* { margin:0; padding:0; box-sizing:border-box; }
    :root {
      --navy:#123a6b; --blue-900:#0e2c57; --blue-700:#1657b0; --blue-600:#2276dd; --blue-100:#e6f0fb; --blue-050:#f4f9ff;
      --teal:#0f9d8f; --green:#16a97a; --green-dk:#0f8a63; --sun:#f4a950;
      --ink:#243447; --muted:#5f7085; --line:#e3e9f1; --white:#fff;
      --shadow:0 10px 30px rgba(20,60,120,.08); --shadow-h:0 18px 44px rgba(20,60,120,.16);
      --radius:16px;
    }
    html { scroll-behavior:smooth; }
    body { font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--ink); background:#fff; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
    a { text-decoration:none; color:inherit; }
    img { max-width:100%; display:block; }
    .container { width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }
    section { padding:104px 0; position:relative; }
    ::selection { background:rgba(15,157,143,.2); }

    .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:700; font-size:16px; padding:15px 30px; border-radius:50px; border:2px solid transparent; cursor:pointer; transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s,background .25s; white-space:nowrap; letter-spacing:.1px; }
    .btn-lg { padding:17px 38px; font-size:17px; }
    .btn svg { width:18px; height:18px; }
    .btn-wa { background:#25D366; color:#fff; box-shadow:0 8px 22px rgba(37,211,102,.3); }
    .btn-wa:hover { background:#1eb857; transform:translateY(-3px); box-shadow:0 14px 30px rgba(37,211,102,.42); }
    .btn-primary { background:var(--blue-700); color:#fff; box-shadow:0 8px 22px rgba(22,87,176,.28); }
    .btn-primary:hover { background:var(--blue-600); transform:translateY(-3px); box-shadow:0 14px 30px rgba(22,87,176,.4); }
    .btn-ghost { background:#fff; color:var(--blue-700); border-color:var(--blue-100); }
    .btn-ghost:hover { border-color:var(--blue-600); transform:translateY(-3px); }

    header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
    .nav { display:flex; align-items:center; justify-content:space-between; height:74px; }
    .logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:var(--blue-900); }
    .logo-mark { width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,var(--blue-700),var(--teal)); display:grid; place-items:center; color:#fff; box-shadow:0 6px 14px rgba(22,87,176,.3); }
    .logo-mark svg { width:20px; height:20px; }
    .nav-links { display:flex; align-items:center; gap:28px; }
    .nav-links a { color:var(--muted); font-weight:500; font-size:15px; transition:color .2s; }
    .nav-links a:hover { color:var(--blue-700); }
    .nav-cta { padding:10px 20px; font-size:14.5px; }
    .hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
    .hamburger span { width:24px; height:2.5px; background:var(--blue-900); border-radius:2px; transition:.3s; }

    /* Hero */
    .hero { position:relative; padding:120px 0 108px; overflow:hidden;
      background:linear-gradient(rgba(26,30,38,.55),rgba(26,30,38,.66)), url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat; }
    .hero .blob { display:none; }
    .blob { position:absolute; border-radius:50%; filter:blur(64px); opacity:.5; z-index:0; }
    .blob.b1 { width:400px; height:400px; background:#cfe4ff; top:-130px; right:-90px; animation:float1 9s ease-in-out infinite; }
    .blob.b2 { width:320px; height:320px; background:#c5f1ea; bottom:-120px; left:-100px; animation:float2 11s ease-in-out infinite; }
    @keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-32px,30px)} }
    @keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-26px)} }
    .hero-inner { position:relative; z-index:2; max-width:820px; margin:0 auto; text-align:center; }
    .pill { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--blue-700); font-weight:600; font-size:13px; padding:8px 16px; border-radius:50px; margin-bottom:24px; box-shadow:var(--shadow); }
    .pill .dot { width:8px; height:8px; border-radius:50%; background:var(--green); animation:blink 1.6s infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }
    .hero h1 { font-size:64px; line-height:1.06; font-weight:800; color:#fff; letter-spacing:-1.5px; text-shadow:0 2px 20px rgba(0,0,0,.25); }
    .hero h1 .hl { position:relative; color:#5cb3ff; }
    .hero p.sub { font-size:19px; color:rgba(255,255,255,.92); margin:22px auto 26px; max-width:620px; line-height:1.65; }
    .hero .earn-line { color:#fff; font-size:16px; font-weight:600; margin-bottom:32px; }
    .hero .earn-line b { color:#7fe3c1; }
    .earn-hook { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,rgba(15,157,143,.12),rgba(34,118,221,.1)); border:1.5px solid rgba(15,157,143,.35); color:var(--blue-900); font-weight:700; font-size:16px; padding:11px 22px; border-radius:50px; margin-bottom:30px; }
    .earn-hook .amt { color:var(--green-dk); font-weight:800; }
    .earn-hook .coin { font-size:18px; }
    .hero-actions { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
    .social-proof { display:inline-flex; align-items:center; gap:12px; margin-top:26px; }
    .avatars { display:flex; }
    .avatars img { width:34px; height:34px; border-radius:50%; border:2.5px solid #fff; object-fit:cover; margin-left:-10px; box-shadow:0 2px 6px rgba(0,0,0,.1); }
    .avatars img:first-child { margin-left:0; }
    .social-proof .txt { font-size:12.5px; color:rgba(255,255,255,.92); line-height:1.35; }
    .hero .btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
    .hero .btn-ghost:hover { background:rgba(255,255,255,.12); border-color:#fff; }
    .social-proof .txt b { color:var(--blue-900); }
    .social-proof .stars { color:#f5b301; letter-spacing:1px; font-size:13px; }
    .hero-img-wrap { position:relative; }
    .hero-img-wrap img.main { border-radius:24px; box-shadow:var(--shadow-h); width:100%; height:500px; object-fit:cover; }
    .float-card { position:absolute; background:#fff; border-radius:14px; padding:13px 16px; box-shadow:var(--shadow); display:flex; align-items:center; gap:11px; }
    .float-card .ic { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:19px; }
    .float-card .t { font-weight:700; font-size:13.5px; color:var(--blue-900); }
    .float-card .s { font-size:12px; color:var(--muted); }
    .fc1 { top:22px; left:-24px; animation:bob 4s ease-in-out infinite; }
    .fc2 { bottom:26px; right:-20px; animation:bob 4s ease-in-out infinite .8s; }
    @keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

    /* Marquee */
    .marquee { background:var(--blue-900); padding:15px 0; overflow:hidden; }
    .marquee-track { display:flex; gap:46px; width:max-content; animation:scroll 26s linear infinite; }
    .marquee-track span { color:#cfe0f5; font-weight:600; font-size:15px; display:flex; align-items:center; gap:12px; white-space:nowrap; }
    .marquee-track span::before { content:"◆"; color:var(--teal); font-size:11px; }
    @keyframes scroll { to { transform:translateX(-50%); } }

    /* Stats */
    .stats { padding:48px 0 72px; }
    .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
    .stat { text-align:center; padding:22px 16px; border-radius:var(--radius); background:var(--blue-050); border:1px solid var(--line); transition:transform .25s,box-shadow .25s; }
    .stat:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
    .stat .big { font-size:40px; font-weight:800; color:var(--blue-700); letter-spacing:-1px; }
    .stat .lbl { font-size:14px; color:var(--muted); margin-top:4px; }

    .head { text-align:center; max-width:680px; margin:0 auto 60px; }
    .head .eyebrow { color:var(--green-dk); font-weight:700; font-size:13px; letter-spacing:1.4px; text-transform:uppercase; }
    .head h2 { font-size:40px; font-weight:800; color:var(--blue-900); margin:12px 0 14px; letter-spacing:-1px; line-height:1.15; }
    .head p { color:var(--muted); font-size:17px; }

    /* About */
    .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
    .about-grid img { border-radius:20px; box-shadow:var(--shadow-h); width:100%; height:430px; object-fit:cover; }
    .about-txt .eyebrow { color:var(--green-dk); font-weight:700; font-size:13px; letter-spacing:1.3px; text-transform:uppercase; }
    .about-txt h2 { font-size:34px; font-weight:800; color:var(--blue-900); margin:10px 0 16px; letter-spacing:-.5px; }
    .about-txt p { color:var(--muted); font-size:16px; margin-bottom:16px; }
    .about-list { list-style:none; margin-top:22px; }
    .about-list li { display:flex; align-items:center; gap:12px; margin-bottom:12px; font-weight:600; color:var(--ink); font-size:15px; }
    .about-list .ck { width:24px; height:24px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-size:13px; flex-shrink:0; }

    /* Why - 6 cards */
    .why { background:var(--blue-050); }
    .features { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
    .feature { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; transition:transform .28s,box-shadow .28s; }
    .feature:hover { transform:translateY(-8px); box-shadow:var(--shadow-h); }
    .feature .ic { width:52px; height:52px; border-radius:13px; background:var(--blue-100); display:grid; place-items:center; font-size:25px; margin-bottom:16px; transition:transform .3s; }
    .feature:hover .ic { transform:rotate(-8deg) scale(1.08); }
    .feature h3 { font-size:18px; color:var(--blue-900); margin-bottom:7px; }
    .feature p { font-size:14.5px; color:var(--muted); }

    /* Roles */
    .roles-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
    .role { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px; transition:transform .28s,box-shadow .28s; position:relative; overflow:hidden; }
    .role::before { content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient(90deg,var(--blue-700),var(--teal)); transform:scaleX(0); transform-origin:left; transition:transform .35s; }
    .role:hover { transform:translateY(-6px); box-shadow:var(--shadow-h); }
    .role:hover::before { transform:scaleX(1); }
    .role-img { width:100%; height:172px; object-fit:cover; border-radius:13px; margin-bottom:20px; }
    .role-top { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
    .role-ic { width:58px; height:58px; border-radius:14px; background:var(--blue-100); display:grid; place-items:center; font-size:28px; flex-shrink:0; }
    .role h3 { font-size:20px; color:var(--blue-900); }
    .role .pay { color:var(--green-dk); font-weight:700; font-size:15px; margin-top:2px; }
    .role p.desc { font-size:14.5px; color:var(--muted); margin-bottom:16px; }
    .role ul { list-style:none; margin-bottom:22px; }
    .role ul li { font-size:14px; color:var(--ink); padding:6px 0 6px 26px; position:relative; }
    .role ul li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800; }
    .role .btn { width:100%; }

    /* Steps */
    .how { background:var(--blue-050); }
    .steps { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
    .step { background:#fff; border:1px solid var(--line); border-radius:var(--radius); text-align:center; padding:32px 22px; transition:transform .28s,box-shadow .28s; }
    .step:hover { transform:translateY(-8px); box-shadow:var(--shadow-h); }
    .step .num { width:60px; height:60px; margin:0 auto 18px; border-radius:50%; background:linear-gradient(135deg,var(--blue-700),var(--blue-600)); color:#fff; display:grid; place-items:center; font-size:23px; font-weight:800; box-shadow:0 10px 24px rgba(22,87,176,.3); }
    .step h3 { font-size:16.5px; color:var(--blue-900); margin-bottom:6px; }
    .step p { font-size:14px; color:var(--muted); }

    /* Requirements band */
    .req { background:var(--blue-900); color:#fff; overflow:hidden; }
    .req .head h2 { color:#fff; }
    .req .head p { color:#b9cbe6; }
    .req-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; max-width:860px; margin:0 auto; }
    .req-item { display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:18px 20px; transition:background .2s,transform .2s; }
    .req-item:hover { background:rgba(255,255,255,.13); transform:translateX(4px); }
    .req-item .check { width:26px; height:26px; border-radius:50%; background:var(--teal); display:grid; place-items:center; flex-shrink:0; font-size:14px; color:#fff; }
    .req-item span { font-size:15px; font-weight:500; }

    /* Testimonials */
    .tst-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
    .tst-card { background:var(--blue-050); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; transition:transform .28s,box-shadow .28s; }
    .tst-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
    .tst-stars { color:#f5b301; font-size:16px; margin-bottom:12px; letter-spacing:2px; }
    .tst-card p { font-size:15px; color:var(--ink); }
    .tst-who { display:flex; align-items:center; gap:12px; margin-top:18px; }
    .tst-who img { width:46px; height:46px; border-radius:50%; object-fit:cover; }
    .tst-who .n { font-weight:700; font-size:14.5px; color:var(--blue-900); }
    .tst-who .r { font-size:12.5px; color:var(--muted); }

    /* FAQ */
    .faq { background:var(--blue-050); }
    .faq-wrap { max-width:760px; margin:0 auto; }
    .faq-item { background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:14px; overflow:hidden; transition:box-shadow .2s; }
    .faq-item:hover { box-shadow:var(--shadow); }
    .faq-q { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; cursor:pointer; font-weight:700; font-size:16px; color:var(--blue-900); }
    .faq-q .plus { font-size:22px; color:var(--blue-600); transition:transform .3s; flex-shrink:0; }
    .faq-item.open .plus { transform:rotate(45deg); }
    .faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
    .faq-a p { padding:0 24px 20px; color:var(--muted); font-size:15px; }

    /* Reusable section CTA */
    .section-cta { text-align:center; margin-top:50px; }
    .section-cta .btn { animation:ctaBob 3s ease-in-out infinite; }
    @keyframes ctaBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

    /* Trust bar (dark band — bridges the hero into the page) */
    .badges { background:linear-gradient(180deg,var(--blue-900),var(--navy)); padding:20px 0; border:none; }
    .badges-row { display:flex; align-items:center; justify-content:center; gap:12px 40px; flex-wrap:wrap; }
    .badge { display:flex; align-items:center; gap:8px; color:#dce9fa; font-weight:600; font-size:13.5px; }
    .badge .bi { width:22px; height:22px; background:transparent; display:grid; place-items:center; font-size:15px; }

    /* Benefits strip */
    .benefits { background:#fff; padding:66px 0 48px; }
    .ben-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
    .ben { text-align:center; background:linear-gradient(180deg,#fff,var(--blue-050)); border:1px solid var(--line); border-radius:var(--radius); padding:28px 20px; transition:transform .28s,box-shadow .28s; }
    .ben:hover { transform:translateY(-8px); box-shadow:var(--shadow-h); }
    .ben .bic { width:64px; height:64px; margin:0 auto 16px; border-radius:16px; background:linear-gradient(135deg,var(--blue-700),var(--teal)); display:grid; place-items:center; font-size:30px; box-shadow:0 10px 22px rgba(22,87,176,.25); }
    .ben h3 { font-size:18px; color:var(--blue-900); margin-bottom:6px; }
    .ben p { font-size:14px; color:var(--muted); }

    /* Form section */
    .apply { background:linear-gradient(135deg,var(--blue-900),#0b2447); color:#fff; }
    .apply .head h2 { color:#fff; }
    .apply .head p { color:#b9cbe6; }
    .form-card { max-width:600px; margin:0 auto; background:#fff; border-radius:22px; padding:38px; box-shadow:var(--shadow-h); }
    .form-row { margin-bottom:16px; }
    .form-row label { display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:6px; }
    .form-row input, .form-row select { width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:12px; font-size:15px; font-family:inherit; color:var(--ink); background:var(--blue-050); transition:border-color .2s,box-shadow .2s; }
    .form-row input:focus, .form-row select:focus { outline:none; border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(34,118,221,.15); background:#fff; }
    .form-card .btn { width:100%; margin-top:8px; }
    .form-note { text-align:center; font-size:12.5px; color:var(--muted); margin-top:14px; }
    .embed-hint { max-width:600px; margin:18px auto 0; text-align:center; font-size:13px; color:#7fa0cc; }

    /* Showcase split band (full-colour image, no dark overlay) */
    .showcase { background:var(--blue-050); }
    .showcase-card { display:grid; grid-template-columns:1fr 1fr; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-h); background:#fff; }
    .showcase-card img { width:100%; height:100%; min-height:380px; object-fit:cover; }
    .showcase-content { background:linear-gradient(135deg,var(--blue-700),var(--teal)); color:#fff; padding:52px 48px; display:flex; flex-direction:column; justify-content:center; }
    .showcase-content h2 { font-size:32px; font-weight:800; letter-spacing:-.6px; line-height:1.2; }
    .showcase-content p { font-size:16.5px; margin:14px 0 26px; color:#eaf4ff; }
    .showcase-content .btn { align-self:flex-start; }

    /* Mid CTA band */
    .midcta { background:linear-gradient(120deg,#e9f2fc,#e6f8f3); }
    .midcta-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:22px; padding:38px 44px; box-shadow:var(--shadow); }
    .midcta-inner h3 { font-size:26px; color:var(--blue-900); font-weight:800; letter-spacing:-.4px; }
    .midcta-inner p { color:var(--muted); font-size:15.5px; margin-top:4px; }

    /* CTA */
    .cta { background:linear-gradient(135deg,var(--blue-700),var(--teal)); text-align:center; overflow:hidden; }
    .cta .trust-row { display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin-top:26px; }
    .cta .trust-row span { color:#eaf4ff; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
    .cta h2 { font-size:38px; font-weight:800; color:#fff; letter-spacing:-.5px; }
    .cta p { color:#eaf4ff; font-size:18px; margin:14px auto 30px; max-width:540px; }
    .cta .btn-wa { background:#fff; color:var(--green-dk); }
    .cta .btn-wa:hover { background:#f0fff8; }

    /* Privacy */
    .privacy { background:var(--blue-050); border-top:1px solid var(--line); }
    .privacy-wrap { max-width:820px; margin:0 auto; }
    .privacy-wrap h2 { font-size:28px; font-weight:800; color:var(--blue-900); letter-spacing:-.5px; margin-bottom:8px; }
    .privacy-wrap .upd { font-size:13px; color:var(--muted); margin-bottom:22px; }
    .privacy-wrap h3 { font-size:17px; color:var(--blue-900); margin:22px 0 6px; }
    .privacy-wrap p { font-size:14.5px; color:var(--muted); margin-bottom:10px; }

    /* Footer */
    footer { background:#0b2447; color:#a9bdd8; padding:60px 0 26px; }
    .foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; }
    .foot-logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:#fff; margin-bottom:14px; }
    .foot-brand p { max-width:300px; font-size:14px; }
    .foot-col h4 { color:#fff; font-size:15px; margin-bottom:16px; }
    .foot-col a { display:block; font-size:14px; margin-bottom:10px; transition:color .2s; }
    .foot-col a:hover { color:#fff; }
    .foot-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:38px; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:#7f97b8; }
    .foot-bottom a { color:#a9bdd8; }
    .foot-bottom a:hover { color:#fff; }

    /* WhatsApp float */
    .wa-float { position:fixed; right:22px; bottom:22px; z-index:90; width:62px; height:62px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 8px 24px rgba(37,211,102,.45); transition:transform .25s; animation:waPulse 2.4s infinite; }
    .wa-float:hover { transform:scale(1.1); }
    .wa-float svg { width:33px; height:33px; }
    @keyframes waPulse { 0%{box-shadow:0 8px 24px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.5)} 70%{box-shadow:0 8px 24px rgba(37,211,102,.45),0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 8px 24px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,0)} }

    .reveal { opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1); }
    .reveal.show { opacity:1; transform:none; }
    @media (prefers-reduced-motion:reduce){ .reveal{transition:none;opacity:1;transform:none} .blob,.float-card,.wa-float,.marquee-track,.pill .dot{animation:none!important} }

    @media (max-width:960px){
      .features{grid-template-columns:repeat(2,1fr)}
      .steps,.stats-grid,.ben-grid{grid-template-columns:repeat(2,1fr)}
      .badges-row{gap:22px 30px}
      .tst-grid{grid-template-columns:1fr}
      .roles-grid{grid-template-columns:1fr}
      .hero-grid,.about-grid{grid-template-columns:1fr;gap:36px}
      .about-grid img{order:-1}
      .hero-img-wrap{order:2;margin-top:4px}
      .hero h1{font-size:46px}
      .hero-img-wrap img.main{height:400px}
      .foot-grid{grid-template-columns:1fr 1fr}
      .midcta-inner{flex-direction:column;align-items:flex-start;text-align:left}
    }
    @media (max-width:720px){
      section{padding:62px 0}
      .nav-links{position:fixed;top:74px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 24px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);transform:translateY(-140%);opacity:0;visibility:hidden;transition:.3s;max-height:calc(100vh - 74px);overflow-y:auto}
      .nav-links.open{transform:none;opacity:1;visibility:visible}
      .nav-links a{padding:14px 4px;border-bottom:1px solid var(--line)}
      .nav-links .nav-cta{margin-top:12px;text-align:center;border:none}
      .hamburger{display:flex}
      .hero{padding-top:56px;padding-bottom:64px}
      .hero h1{font-size:38px}
      .hero p.sub{font-size:16.5px}
      .stats-grid,.ben-grid{grid-template-columns:1fr 1fr;gap:12px}
      .stat{padding:18px 10px}
      .stat .big{font-size:30px}
      .stat .lbl{font-size:12px}
      .ben{padding:22px 14px}
      .ben .bic{width:52px;height:52px;font-size:25px;margin-bottom:12px}
      .ben h3{font-size:16px}
      .badges{padding:14px 0}
      .badges-row{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;justify-items:start}
      .badge{font-size:12px;gap:6px}
      .badge .bi{width:20px;height:20px;font-size:13px}
      .head h2,.cta h2,.about-txt h2,.showcase-content h2{font-size:26px}
      .showcase-card{grid-template-columns:1fr}
      .showcase-card img{min-height:240px}
      .showcase-content{padding:34px 26px}
      .showcase-content .btn{align-self:stretch}
      .role-img{height:150px}
      .hero-actions{width:100%}
      .hero-actions .btn{flex:1}
      .btn-lg{padding:15px 24px;font-size:16px}
      .float-card{display:none}
      .midcta-inner{padding:28px 24px}
      .midcta-inner .btn{width:100%}
      .foot-grid{grid-template-columns:1fr}
    }
    @media (max-width:460px){
      .features,.steps{grid-template-columns:1fr}
      .stats-grid,.ben-grid{grid-template-columns:1fr 1fr;gap:12px}
      .stat{padding:18px 10px}
      .stat .big{font-size:30px}
      .stat .lbl{font-size:12px}
      .ben{padding:22px 14px}
      .ben .bic{width:52px;height:52px;font-size:25px;margin-bottom:12px}
      .ben h3{font-size:16px}
      .hero-img-wrap img.main,.about-grid img{height:300px}
      .form-card{padding:26px 20px}
    }

    /* WhatsForm popup modal (opened by every CTA button) */
    .wf-overlay { position:fixed; inset:0; z-index:1000; display:none; padding:0; overflow-y:auto; -webkit-overflow-scrolling:touch; background:rgba(10,20,40,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:wfFade .2s ease; }
    .wf-overlay.open { display:block; }
    @keyframes wfFade { from{opacity:0} to{opacity:1} }
    .wf-modal { position:relative; width:100%; max-width:560px; margin:56px auto; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.45); animation:wfPop .28s cubic-bezier(.22,.61,.36,1); }
    @keyframes wfPop { from{transform:translateY(24px) scale(.96);opacity:0} to{transform:none;opacity:1} }
    .wf-modal .wf-frame iframe { width:100%; height:1550px; max-height:none; border:0; display:block; }
    .wf-close { position:fixed; top:16px; right:16px; z-index:2; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; border:none; font-size:22px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .2s; }
    .wf-close:hover { background:rgba(0,0,0,.75); }

    /* Hide the built-in WhatsApp button — the WhatsForm launcher provides the floating button */
    .wa-float { display:none !important; }