:root
        { 
        --primary:#0158D1; /* logo blue */
        --accent:#F33C5D;  /* logo red */
        --bg:#F8FAFC;
        --ink:#121619;
        --muted:#5A6672;
        --card:#ffffff;
        --ring: rgba(1,88,209,.18);
    }
    
    *
        { box-sizing:border-box}
    
    html,body
        { margin:0; padding:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg);font-size:16px}
    
    a
        { color:var(--primary); text-decoration:none}
    
    a:hover
        { text-decoration:underline}
    
    img
        { max-width:100%; height:auto;}
    
    .container
        { width:min(1100px, 92%); margin-inline:auto}
    
    header
        { position:sticky; top:0; z-index:50; background:rgba(248,250,252,.9); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #e9eef5; box-shadow: 0 2px 6px rgba(0,0,0,.03); }
    
    .nav
        { display:flex; align-items:center; justify-content:space-between; padding:14px 0}
    
    .brand
        { display:flex; align-items:center; gap:.75rem}
    
    .brand img
        { width:40px; height:40px}
    
    .badge
        { font-size:.8rem; color:var(--muted)}
    
    .cta-phone
        { display:none}
    
    .btn
        { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.15rem; border-radius:14px; font-weight:600; border:1px solid transparent; box-shadow:0 1px 0 rgba(0,0,0,.04); transition:transform .06s ease, box-shadow .2s}
    
    .btn:hover
        { transform:translateY(-1px)}
    
    .btn-primary
        { background:var(--primary); color:#fff}
    
    .btn-outline
        { background:#fff; color:var(--primary); border-color:var(--primary)}
    
    .hero
        { padding:48px 0 48px; background:linear-gradient(180deg, rgba(1,88,209,.06), transparent 60%)}
    
    .notice
        { background:var(--primary); color:#fff; padding:10px 14px; border-radius:12px; display:inline-flex; align-items:center; gap:.5rem}
    
    .notice a
        { color:#fff; text-decoration:underline}
    
    .hero
        { padding:56px 0 32px }
    
    .hero h1
        { font-size:clamp(28px, 5vw, 48px); line-height:1.1; margin:0 0 .6rem}
    
    .hero p
        { font-size:clamp(16px, 2.4vw, 20px); color:var(--muted); margin:0 0 1.2rem}
    
    .hero-ctas
        { display:flex; gap:.6rem; flex-wrap:wrap}
    
    .trust
        { margin-top:.6rem; font-size:.9rem; color:var(--muted)}
    
    .grid
        { display:grid; gap:20px}
    
    @media (min-width:900px)
        { .grid-3
            { grid-template-columns:repeat(3, 1fr)} }
    
    @media (min-width:900px)
        { .grid-2
            { grid-template-columns:repeat(2, 1fr)} }
    
    section
        { padding:40px 0}
    
    .section-title
        { font-size:clamp(22px, 3.2vw, 28px); margin:0 0 10px}
    
    .muted
        { color:var(--muted)}
    
    .card
        { background:var(--card); border:1px solid #e9eef5; border-radius:18px; padding:20px; box-shadow:0 6px 24px rgba(50, 60, 70, .05)}
    
    .cards
        { display:grid; gap:16px}
    
    @media (min-width:800px)
        { .cards
            { grid-template-columns:repeat(3,1fr)}}
    
    .list
        { padding-left:1.2rem; margin:.4rem 0}
    
    .list li
        { margin:.2rem 0}
    
    .plans
        { display:grid; gap:16px}
    
    @media (min-width:960px)
        { .plans
            { grid-template-columns:repeat(3, 1fr)}}
    
    .plan .price
        { font-size:1.6rem; font-weight:800}
    
    .result-tiles
        { display:grid; gap:14px}
    
    @media (min-width:760px)
        { .result-tiles
            { grid-template-columns:repeat(3,1fr)}}
    
    .result .num
        { font-size:1.8rem; font-weight:800}
    
    .portfolio-grid
        { display:grid; gap:14px}
    
    @media (min-width:900px)
        { .portfolio-grid
            { grid-template-columns:repeat(3, 1fr)}}
    
    .tile
        { overflow:hidden; border-radius:16px; border:1px solid #e9eef5; background:#fff}
    
    .tile figcaption
        { padding:10px 12px; font-size:.95rem}
    
    .faq details
        { background:#fff; border:1px solid #e9eef5; padding:14px 16px; border-radius:14px}
    
    .faq details + details
        { margin-top:10px}
    
    .faq summary
        { cursor:pointer; font-weight:600}
    
    .helper
        { font-size:.9rem; color:var(--muted)}
    
    form
        { display:grid; gap:12px}
    
    label
        { font-weight:600}
    
    input, select, textarea
        { width:100%; padding:12px 12px; border:1px solid #dbe3ec; border-radius:12px; background:#fff; outline:none}
    
    input:focus, textarea:focus
        { border-color:var(--primary); box-shadow:0 0 0 4px var(--ring)}
    
    footer
        { padding:28px 0 44px; border-top:1px solid #e9eef5; color:var(--muted)}
    
    .tag
        { display:inline-flex; align-items:center; gap:.45rem; background:#fff; border:1px solid #e9eef5; padding:6px 10px; border-radius:999px; font-size:.9rem; color:var(--muted)}
    
    /* --- Icon system --- */
    .icon 
        { width: 22px; height: 22px; vertical-align: -4px; margin-right: 8px; opacity: .85; }
    
    .icon-lg 
        { width: 26px; height: 26px; }
    
    .icon-dim 
        { opacity: .7; }
        
        .cta-phone img,
        .cta-phone svg {
          width: 16px;
          height: 16px;
          margin-right: 0px;
          vertical-align: -2px;
          opacity: .85;
        }
    
    /* Tint approximation for external SVGs used via <img> (keeps brand vibe without inlining SVG) */
    .icon-blue 
        { filter: invert(22%) sepia(85%) saturate(4043%) hue-rotate(205deg) brightness(92%) contrast(94%); } /* ~#0158D1 */
    .icon-red  
        { filter: invert(27%) sepia(84%) saturate(2876%) hue-rotate(332deg) brightness(101%) contrast(97%); } /* ~#F33C5D */
    .icon-white  
    
        { filter: brightness(0) invert(1); } /* ~#FFFFFF */
    
    /* Ensure the pill doesn't push layout on mobile */
    @media (max-width: 480px)
        { 
        .tag
        { font-size:.9rem;width:100%;justify-content:space-between}
        
        .hero-ctas .btn
        { width:100% } /* stacked full-width CTAs on very small screens */
        
    }
    /* Keep hero graphics from exploding */
    .hero img.icon, .hero .icon 
        { width: 18px; height: 18px; margin-right: 6px; }
    
    
    .tag
        { display:inline-flex;align-items:center;gap:.45rem}
    
    @media (min-width:680px)
        { .cta-phone
            { display:inline-flex; align-items:center; gap:.5rem;}
        }
    
    @media (max-width: 480px)
        { 
        .hero .tag 
        { order: 3; display:block; margin-top: 8px; }
        
      .tag
        { font-size:.9rem; width:100%; justify-content:space-between }
      .hero-ctas .btn
        { width:100% }
    }
    
    @media(max-width:420px)
        { 
            .icon
                { width:18px; height:18px; margin-right:6px } 
            
        }