:root{
      --bg:#f5f7fb;
      --surface:#ffffff;
      --text:#142033;
      --muted:#5b6b82;
      --border:#d9e3ef;
      --primary:#0f766e;
      --primary-dark:#115e59;
      --accent:#1d4ed8;
      --shadow-sm:0 8px 22px rgba(15,23,42,.06);
      --shadow-md:0 14px 36px rgba(15,23,42,.10);
      --shadow-lg:0 20px 46px rgba(15,23,42,.13);
      --radius:20px;
      --radius-lg:28px;
      --max:1180px;
      --grad-1:linear-gradient(135deg,#0f766e 0%,#14b8a6 100%);
      --grad-2:linear-gradient(135deg,#1d4ed8 0%,#38bdf8 100%);
      --grad-dark:linear-gradient(135deg,#0b1324 0%,#1d4ed8 100%);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}

    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      line-height:1.68;
      color:var(--text);
      background:
        radial-gradient(circle at top center,rgba(29,78,216,.05),transparent 28%),
        linear-gradient(180deg,#f7f9fc 0%,#f5f7fb 100%);
      overflow-x:hidden;
    }

    img{max-width:100%;height:auto;display:block}
    a{color:var(--accent);text-decoration:none}
    a:hover{text-decoration:underline}

    a:focus-visible,
    button:focus-visible{
      outline:3px solid #111827;
      outline-offset:3px;
      border-radius:8px;
    }

    .skip-link{
      position:absolute;
      left:-9999px;
      top:auto;
      width:1px;
      height:1px;
      overflow:hidden;
    }

    .skip-link:focus{
      left:12px;
      top:12px;
      width:auto;
      height:auto;
      padding:10px 12px;
      z-index:10000;
      background:#fff;
      color:#000;
      border-radius:10px;
      box-shadow:var(--shadow-md);
    }

    .header-container,
    .hero-container,
    .section-container,
    .contact-container{
      width:min(100% - 32px,var(--max));
      margin-inline:auto;
    }

    header{
      position:sticky;
      top:0;
      z-index:999;
      background:rgba(255,255,255,.88);
      backdrop-filter:blur(12px) saturate(1.15);
      border-bottom:1px solid rgba(217,227,239,.88);
      box-shadow:0 6px 18px rgba(15,23,42,.04);
    }

    .header-container{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:14px 0;
    }

    .logo-area{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
      color:var(--text);
      text-decoration:none;
    }

    .logo-mark{
      width:210px;
      max-width:42vw;
      height:auto;
      object-fit:contain;
      filter:drop-shadow(0 4px 10px rgba(15,23,42,.08));
    }

    .logo-title{
      display:block;
      margin:0;
      font-size:1.08rem;
      font-weight:850;
      line-height:1.2;
      color:var(--text);
      letter-spacing:-.01em;
    }

    .logo-text p{
      margin:3px 0 0;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.25;
    }

    nav#menu{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
      flex-wrap:wrap;
    }

    nav#menu a{
      color:var(--text);
      font-weight:650;
      font-size:.94rem;
      white-space:nowrap;
      padding:8px 10px;
      border-radius:10px;
      transition:background .18s ease,color .18s ease;
    }

    nav#menu a:hover{
      background:#eef5fb;
      text-decoration:none;
      color:var(--primary);
    }

    nav#menu a.active{
      color:var(--primary-dark);
      background:#e7f8f5;
    }

    .menu-toggle{
      display:none;
      border:1px solid var(--border);
      background:#fff;
      color:var(--text);
      border-radius:14px;
      padding:10px 12px;
      font-size:1.1rem;
      cursor:pointer;
      box-shadow:var(--shadow-sm);
    }

    .section-hero,
    .section-block,
    .section-muted,
    .section-contact{
      padding:58px 0;
    }

    .section-muted{
      background:linear-gradient(180deg,#eef4f8 0%,#f5f7fb 100%);
      border-block:1px solid rgba(217,227,239,.75);
    }

    .hero-container{
      display:grid;
      grid-template-columns:1.16fr .84fr;
      gap:28px;
      align-items:start;
    }

    .hero-left,
    .hero-aside,
    .card,
    .contact-info,
    .contact-cta{
      background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
      border:1px solid rgba(217,227,239,.95);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-lg);
    }

    .hero-left{
      position:relative;
      padding:32px;
      overflow:hidden;
    }

    .hero-left::after{
      content:"";
      position:absolute;
      top:-80px;
      right:-80px;
      width:220px;
      height:220px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(20,184,166,.15),transparent 70%);
      pointer-events:none;
    }

    .hero-line{
      width:92px;
      height:7px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--primary),var(--accent));
      margin-bottom:18px;
      box-shadow:0 6px 12px rgba(20,184,166,.18);
    }

    h1{
      margin:0 0 14px;
      font-size:clamp(2.1rem,4.6vw,3.55rem);
      line-height:1.06;
      letter-spacing:-.035em;
      color:#0b1324;
      max-width:18ch;
    }

    .hero-subtitle{
      margin:0 0 18px;
      color:var(--muted);
      font-size:1.08rem;
      max-width:74ch;
    }

    .hero-actions,
    .page-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:18px 0 20px;
    }

    .page-links a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:10px 14px;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--border);
      color:var(--text);
      font-weight:750;
      text-decoration:none;
      box-shadow:var(--shadow-sm);
    }

    .page-links a:hover{
      transform:translateY(-2px);
      border-color:#bfd0e2;
      text-decoration:none;
    }

    .pill-urgent{
      background:#fff7ed!important;
      border-color:#fed7aa!important;
      color:#9a3412!important;
    }

    .cta-button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:52px;
      padding:0 20px;
      border-radius:16px;
      background:var(--grad-1);
      color:#fff;
      font-weight:850;
      text-decoration:none;
      box-shadow:0 16px 28px rgba(15,118,110,.22);
      transition:transform .18s ease,box-shadow .18s ease;
    }

    .cta-button:hover{
      transform:translateY(-2px);
      box-shadow:0 20px 34px rgba(15,118,110,.26);
      text-decoration:none;
      color:#fff;
    }

    .cta-secondary{background:var(--grad-2)}

    .toc{
      margin:20px 0 24px;
      padding:18px;
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
      box-shadow:var(--shadow-sm);
    }

    .toc strong{
      display:block;
      margin-bottom:8px;
      color:#0b1324;
    }

    .toc ul{
      margin:0;
      padding-left:18px;
      columns:2;
      gap:24px;
    }

    .toc li{break-inside:avoid}

    .hero-aside{
      padding:22px;
      position:sticky;
      top:96px;
    }

    .hero-aside img{
      width:100%;
      aspect-ratio:4/3;
      object-fit:contain;
      background:#fff;
      border-radius:22px;
      border:1px solid #e6eef7;
      box-shadow:var(--shadow-sm);
    }

    .aside-box{
      margin-top:16px;
      padding:16px;
      border-radius:18px;
      background:#f8fbff;
      border:1px solid var(--border);
    }

    .aside-box h2{
      margin:0 0 8px;
      font-size:1.05rem;
    }

    .aside-box ul{
      margin:0;
      padding-left:18px;
      color:var(--muted);
    }

    .section-title{
      margin:0 0 14px;
      font-size:clamp(1.65rem,2.6vw,2.45rem);
      line-height:1.12;
      color:#0b1324;
      letter-spacing:-.02em;
    }

    .section-lead{
      margin:0 0 20px;
      color:var(--muted);
      max-width:940px;
      font-size:1.03rem;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-bottom:10px;
      padding:7px 10px;
      border-radius:999px;
      background:#e7f8f5;
      color:var(--primary-dark);
      font-weight:850;
      font-size:.82rem;
      text-transform:uppercase;
      letter-spacing:.06em;
    }

    .grid-2,
    .grid-3,
    .grid-4{
      display:grid;
      gap:18px;
      margin-top:20px;
    }

    .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

    .card{
      border-radius:var(--radius);
      padding:22px;
      box-shadow:var(--shadow-md);
      transition:transform .18s ease,box-shadow .18s ease;
    }

    .card:hover{
      transform:translateY(-3px);
      box-shadow:0 20px 38px rgba(15,23,42,.12);
    }

    .card-number{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:44px;
      height:44px;
      padding:0 12px;
      border-radius:999px;
      background:linear-gradient(135deg,#dbf4f1 0%,#dbeafe 100%);
      color:#0f4d6a;
      font-weight:850;
      margin-bottom:14px;
    }

    .card h3{
      margin:0 0 10px;
      font-size:1.12rem;
      line-height:1.25;
      letter-spacing:-.01em;
    }

    .card p{
      margin:0;
      color:var(--muted);
    }

    .alert{
      padding:18px;
      border-radius:18px;
      background:#fff7ed;
      border:1px solid #fed7aa;
      color:#7c2d12;
      box-shadow:var(--shadow-sm);
      margin:18px 0;
    }

    .danger-box{
      padding:18px;
      border-radius:18px;
      background:#fef2f2;
      border:1px solid #fecaca;
      color:#7f1d1d;
      box-shadow:var(--shadow-sm);
      margin:18px 0;
    }

    .dark-band{
      background:var(--grad-dark);
      color:#fff;
      border-radius:var(--radius-lg);
      padding:34px;
      box-shadow:var(--shadow-lg);
      display:grid;
      grid-template-columns:1.25fr .75fr;
      gap:22px;
      align-items:center;
    }

    .dark-band h2{
      margin:0 0 10px;
      font-size:clamp(1.5rem,2.5vw,2.35rem);
      line-height:1.12;
    }

    .dark-band p{
      margin:0;
      color:rgba(255,255,255,.82);
    }

    .keyword-list{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:12px;
    }

    .keyword-list a,
    .keyword-list span{
      display:inline-flex;
      padding:8px 10px;
      border-radius:999px;
      background:#eef5fb;
      border:1px solid #dbe7f3;
      color:#17324d;
      font-size:.92rem;
      font-weight:700;
    }

    .faq-list{
      display:grid;
      gap:12px;
      margin-top:20px;
    }

    details{
      background:#fff;
      border:1px solid var(--border);
      border-radius:16px;
      padding:18px 20px;
      box-shadow:var(--shadow-sm);
    }

    summary{
      cursor:pointer;
      font-weight:850;
      color:#0b1324;
    }

    details p{
      margin:12px 0 0;
      color:var(--muted);
    }

    .contact-container{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:22px;
    }

    .contact-info,
    .contact-cta{
      border-radius:var(--radius);
      padding:26px;
      box-shadow:var(--shadow-md);
    }

    .contact-cta{
      background:
        radial-gradient(circle at top right,rgba(20,184,166,.12),transparent 35%),
        linear-gradient(180deg,#ffffff 0%,#f8fffd 100%);
    }

    .contact-details{
      display:grid;
      gap:14px;
      margin-top:18px;
    }

    .contact-item{
      padding:14px 16px;
      border:1px solid var(--border);
      border-radius:16px;
      background:#f9fbfe;
    }

    .contact-item label{
      display:block;
      font-size:.92rem;
      color:var(--muted);
      margin-bottom:4px;
      font-weight:800;
    }

    .contact-item p{margin:0}

    footer{
      padding:40px 16px 44px;
      background:linear-gradient(180deg,#eef4f8 0%,#eaf1f6 100%);
      border-top:1px solid var(--border);
      text-align:center;
      color:var(--muted);
    }

    footer p{
      max-width:980px;
      margin:0 auto;
    }

    .social-links{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      flex-wrap:wrap;
      margin-top:16px;
    }

    .social-links a{
      width:42px;
      height:42px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      border:1px solid var(--border);
      background:#fff;
      color:var(--text);
      text-decoration:none;
      box-shadow:var(--shadow-sm);
    }

    .social-links svg{
      width:18px;
      height:18px;
      fill:currentColor;
    }

    .sr-only{
      position:absolute!important;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }

    .wa-float{
      position:fixed;
      right:18px;
      bottom:18px;
      width:58px;
      height:58px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:1000;
      text-decoration:none;
      background:#25D366;
      box-shadow:0 16px 30px rgba(37,211,102,.26);
      transition:transform .18s ease;
    }

    .wa-float:hover{transform:translateY(-2px)}

    .wa-float svg{
      width:28px;
      height:28px;
      fill:#fff;
    }

    @media(max-width:1080px){
      .hero-container,
      .grid-2,
      .contact-container,
      .dark-band{
        grid-template-columns:1fr;
      }

      .hero-aside{
        position:relative;
        top:auto;
      }

      h1{max-width:none}
    }

    @media(max-width:980px){
      .menu-toggle{display:inline-flex}

      nav#menu{
        display:none;
        width:100%;
        margin-top:10px;
        padding:12px;
        border:1px solid var(--border);
        border-radius:16px;
        background:#fff;
        box-shadow:var(--shadow-md);
      }

      header.menu-open nav#menu{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
      }

      .header-container{flex-wrap:wrap}

      .logo-mark{
        width:170px;
        max-width:48vw;
      }

      .grid-3,
      .grid-4{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
    }

    @media(max-width:640px){
      .section-hero,
      .section-block,
      .section-muted,
      .section-contact{
        padding:42px 0;
      }

      .hero-left,
      .hero-aside,
      .card,
      .contact-info,
      .contact-cta,
      .dark-band{
        padding:18px;
      }

      .grid-3,
      .grid-4{
        grid-template-columns:1fr;
      }

      .toc ul{columns:1}

      .page-links a,
      .hero-actions .cta-button{
        width:100%;
      }

      .logo-mark{
        width:148px;
        max-width:52vw;
      }

      .logo-title{font-size:1rem}

      .logo-text p{font-size:.88rem}

      .wa-float{
        right:14px;
        bottom:14px;
        width:52px;
        height:52px;
      }
    }