:root{--green:#04964F;--green-deep:#007c46;--lime:#8FE01B;--ink:#0f2d1f;--ink-dark:#07281B;--muted:#64756c;--line:#e3eae5;--bg:#fcfdfc;
--mint:#eef7f1;--mint-b:#d3e8da;--limebg:#f4f9e6;--lime-b:#e0edc2;--pink:#fdf1f2;--pink-b:#f3d9dc}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block}
.wrap{max-width:1180px;margin:auto;padding:0 32px}
.wrap-narrow{max-width:880px}

/* ---------- type ---------- */
.eyebrow{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:1.8px;color:var(--ink);text-transform:uppercase}
.eyebrow i{color:var(--green);font-style:normal}
.eyebrow.lime{color:var(--lime)}
h1{font:800 62px/1.06 Manrope,sans-serif;letter-spacing:-3px;margin:20px 0 0}
h2{font:800 46px/1.08 Manrope,sans-serif;letter-spacing:-2.2px;margin:16px 0 0}
h3{font:800 21px/1.25 Manrope,sans-serif;letter-spacing:-.6px;margin:0 0 10px}
.accent{color:var(--green)}
.lime-t{color:var(--lime)}
.hl{position:relative;color:var(--green);display:inline-block}
.swash{position:absolute;left:2%;bottom:-12px;width:96%;height:14px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:12px;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn-primary{background:var(--green);color:#fff;padding:15px 26px;font-size:15.5px;box-shadow:0 6px 18px #04964f2b}
.btn-primary:hover{background:var(--green-deep);transform:translateY(-2px);box-shadow:0 12px 26px #04964f38}
.btn-big{padding:19px 34px;font-size:17.5px;border-radius:14px}
.btn-nav{padding:11px 20px;font-size:14px}
.btn-light{background:#fff;color:var(--ink-dark);box-shadow:0 10px 26px #04210f4d}
.btn-light:hover{transform:translateY(-2px)}
.btn-ghost{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:15px;color:var(--ink)}
.btn-ghost:hover .play-dot{background:var(--green);color:#fff}
.play-dot{width:34px;height:34px;border-radius:50%;border:1.5px solid #c8dcd0;display:grid;place-items:center;font-size:13px;color:var(--green);transition:all .15s;background:#fff}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:#fcfdfce8;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1240px;margin:auto;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 32px}
.brand{display:flex;align-items:center;gap:10px;font-family:Manrope,sans-serif;font-size:20px;font-weight:800;letter-spacing:-.7px}
.brand svg{width:30px;height:30px}
.brand b{color:var(--green);font-weight:800}
.nav-links{display:flex;gap:32px;font-size:14.5px;font-weight:600;color:#3c5547}
.nav-links a:hover{color:var(--green)}

/* ---------- hero ---------- */
.hero{padding:74px 0 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:40px;align-items:center}
.hero-sub{color:#4b5f54;font-size:18px;line-height:1.7;margin:34px 0 0}
.hero-cta{margin-top:36px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.cta-foot{display:block;margin-top:18px;font-size:12.5px;color:#8b9a91}

/* hero stage */
.hero-stage{position:relative;min-height:520px;display:grid;place-items:center}
.ring{position:absolute;inset:0;margin:auto;width:103%;height:103%;animation:spin 80s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spark{position:absolute;color:var(--green);font-size:18px}
.s1{top:6%;left:4%}.s2{bottom:10%;right:2%;color:var(--lime)}.s3{top:16%;right:8%;font-size:22px;color:#9fc7ae}
.hand-note{position:absolute;top:1%;right:0;font-style:italic;font-size:13.5px;color:#8b9a91;transform:rotate(3deg)}
.mockwin{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.hero-mock{position:relative;width:88%;transform:rotate(2deg);box-shadow:0 30px 70px #0f2d1f14,0 4px 14px #0f2d1f0a}
.mockwin-bar{display:flex;align-items:center;gap:12px;background:#f4f7f5;border-bottom:1px solid var(--line);padding:11px 16px}
.wdots{display:flex;gap:5px}
.wdots i{width:9px;height:9px;border-radius:50%;background:#dbe4de}
.wdots i:first-child{background:#f3b6ad}.wdots i:nth-child(2){background:#f4d9a3}.wdots i:last-child{background:#b4dcc1}
.waddr{flex:1;background:#fff;border:1px solid var(--line);border-radius:18px;padding:6px 15px;font-size:12px;color:#7f8e85}
.wico{position:relative;display:grid;place-items:center}
.wbadge{position:absolute;right:-9px;bottom:-7px;background:#F00;color:#fff;font-style:normal;font-size:9px;font-weight:700;border-radius:4px;padding:1.5px 4px;border:1.5px solid #f4f7f5;font-family:'DM Sans',sans-serif}
.wbadge.big{font-size:12px;padding:2.5px 5px;right:-12px;bottom:-9px;border-radius:5px}
.mockwin-body{padding:26px 30px 30px}
.mk-brandrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.mk-logo{font-family:Manrope,sans-serif;font-weight:800;font-size:15px;letter-spacing:-.3px}
.mk-logo i{font-style:normal;font-size:9px;color:var(--green);vertical-align:super}
.mk-nav{font-size:9.5px;letter-spacing:2px;color:#9aa8a0;font-weight:700}
.mk-eyebrow{font-size:9.5px;letter-spacing:2px;color:var(--green);font-weight:700}
.mk-head{font:800 30px/1.15 Manrope,sans-serif;letter-spacing:-1.2px;margin:10px 0 18px}
.mk-lines{display:grid;gap:9px;margin-bottom:20px}
.sk{display:block;height:10px;border-radius:5px;background:#edf2ee}
.sk-90{width:90%}.sk-85{width:85%}.sk-80{width:80%}.sk-75{width:75%}.sk-60{width:60%}
.sk-title{height:18px;width:55%;background:#e2eae4;margin-bottom:6px}
.sk-img{height:96px;border-radius:10px;background:linear-gradient(135deg,#eaf2ec,#dcebe1);margin:8px 0}
.mk-chips{display:flex;gap:10px}
.mk-chips span{flex:1;height:44px;border-radius:9px;display:grid;place-items:center;font-size:15px}
.c1{background:var(--mint);color:var(--green)}
.c2{background:var(--pink);color:#d4707e}
.c3{background:var(--limebg);color:#6c9718}
.c4{background:#eef3f0}
.sticker{position:absolute;top:86px;right:-18px;background:var(--lime);color:var(--ink-dark);font-weight:800;font-size:13px;font-family:Manrope,sans-serif;padding:9px 15px;border-radius:9px;transform:rotate(7deg);box-shadow:0 8px 18px #4e7d0e2e}
.mascot{position:absolute}
.mascot svg{width:100%;height:100%}
.peek{right:-34px;bottom:88px;width:104px;height:92px;overflow:hidden;animation:bob 4.5s ease-in-out infinite}
.peek svg{width:104px;height:116px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.toast{position:absolute;left:4%;bottom:34px;display:flex;align-items:center;gap:14px;background:var(--ink-dark);color:#e8f4ec;border-radius:14px;padding:15px 20px;box-shadow:0 20px 44px #04210f3d;max-width:420px}
.toast b{display:block;font-size:14.5px;font-family:Manrope,sans-serif;letter-spacing:-.2px}
.toast span{display:block;font-size:12px;color:#9dbfa9;margin-top:2px}
.toast em{margin-left:6px;font-style:normal;color:var(--lime);font-weight:700;font-size:16px}
.stage-foot{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:12px;color:#8b9a91}

/* hero strip */
.hero-strip{display:flex;align-items:center;gap:34px;border-top:1px solid var(--line);margin-top:58px;padding-top:22px;padding-bottom:26px;flex-wrap:wrap}
.strip-cap{font-size:11px;font-weight:700;letter-spacing:1.8px;color:#8b9a91}
.strip-f{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700}
.strip-f i{font-style:normal;color:var(--green)}
.strip-sign{margin-left:auto;font-style:italic;font-size:13px;color:#8b9a91}

/* ---------- wave divider ---------- */
.wave{position:relative;height:50px}
.wave svg{position:absolute;inset:0;width:100%;height:100%}
.wave span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--bg);padding:0 14px;color:var(--green);font-size:13px}

/* ---------- sections ---------- */
.sec{padding:84px 0}
.sec-alt{background:#f3f8f4}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px}
.head-aside{font-size:15px;line-height:1.65;color:var(--muted);text-align:right;margin:0 0 6px}

/* ---------- superpowers ---------- */
.pow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pow{border-radius:18px;padding:24px 26px 26px;border:1px solid;display:flex;flex-direction:column}
.pow-mint{background:var(--mint);border-color:var(--mint-b)}
.pow-lime{background:var(--limebg);border-color:var(--lime-b)}
.pow-pink{background:var(--pink);border-color:var(--pink-b)}
.pow header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.pow-tag{font-size:10.5px;font-weight:800;letter-spacing:1.6px;color:#51665a}
.pow-ico{font-size:15px;color:#7d9488}
.pow-scene{position:relative;height:150px;margin-bottom:20px}
.note{position:absolute;background:#fff;border-radius:10px;box-shadow:0 10px 24px #0f2d1f14;padding:14px 18px}
.n-blue{left:4%;top:14px;transform:rotate(-4deg);border:1px solid #cfe0f0;background:#eaf3fb;max-width:220px}
.note-addr{display:block;font-size:10px;color:#7d94a8;margin-bottom:4px}
.n-blue b{font-size:14.5px;font-family:Manrope,sans-serif}
.stamp{position:absolute;right:18%;bottom:8px;background:#fbd0d6;color:#b3341d;font-family:Manrope,sans-serif;font-weight:800;font-size:14px;padding:8px 14px;border-radius:8px;transform:rotate(-6deg);box-shadow:0 6px 14px #b3341d1f}
.mini-mascot{position:absolute;right:-4px;top:4px;width:74px;height:74px;animation:bob 5s 1s ease-in-out infinite}
.n-white{left:4%;top:18px;transform:rotate(-2deg);border:1px solid #e7dfc9;max-width:250px}
.note-cookie{position:absolute;left:-12px;top:-12px;width:30px;height:30px;border-radius:50%;background:#f4e9c8;display:grid;place-items:center;font-size:14px;color:#9a7b2e;border:1px solid #e7dfc9}
.n-white b{display:block;font-size:14.5px;font-family:Manrope,sans-serif}
.note-sub{display:block;font-size:11.5px;color:#93a29a;margin-top:3px}
.back-read{position:absolute;left:10%;bottom:10px;font-size:12.5px;font-weight:700;color:var(--green)}
.counter-chip{position:absolute;inset:auto 0 auto 0;top:26px;margin:auto;display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--pink-b);border-radius:12px;padding:16px 20px;box-shadow:0 10px 24px #0f2d1f10;max-width:270px}
.cc-ico{position:relative;flex-shrink:0}
.cc-txt{font-size:12.5px;line-height:1.5;color:#5d6f65}
.cc-txt b{color:var(--ink)}
.pow h3{margin-top:2px}
.pow p{margin:0;font-size:14px;line-height:1.65;color:#51665a;flex:1}
.pow-link{margin-top:18px;font-size:13.5px;font-weight:800;font-family:Manrope,sans-serif}
.pow-link i{font-style:normal;color:var(--green);margin-left:4px}
.pow-link:hover{color:var(--green)}

/* yt banner */
.yt-banner{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 24px;margin-top:22px;box-shadow:0 8px 24px #0f2d1f08}
.yt-play{width:40px;height:40px;border-radius:50%;background:#fdeef0;color:#d4707e;display:grid;place-items:center;font-size:13px;flex-shrink:0}
.yt-banner b{display:block;font-size:15px;font-family:Manrope,sans-serif;letter-spacing:-.2px}
.yt-banner div span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.yt-banner>a{margin-left:auto;font-size:13.5px;font-weight:800;font-family:Manrope,sans-serif;white-space:nowrap}
.yt-banner>a i{font-style:normal;color:var(--green)}
.yt-banner>a:hover{color:var(--green)}

/* ---------- clouds ---------- */
.clouds{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cloud{position:relative;background:#fff;border:1px solid var(--line);border-radius:60px;padding:48px 40px 40px;text-align:center;box-shadow:0 14px 40px #0f2d1f08}
.cloud-tag{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:12.5px;font-weight:800;font-family:Manrope,sans-serif;padding:8px 18px;border-radius:30px;white-space:nowrap}
.t-green{background:var(--green);color:#fff;box-shadow:0 6px 16px #04964f33}
.t-lime{background:var(--lime);color:var(--ink-dark);box-shadow:0 6px 16px #4e7d0e26}
.cloud-icons{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px}
.cloud-icons img{width:40px;height:40px;border-radius:10px;background:#fff;box-shadow:0 4px 12px #0f2d1f14;padding:5px;transition:transform .15s}
.cloud-icons img:hover{transform:scale(1.14) rotate(-3deg)}
.more-chip{font-size:12px;font-weight:700;color:#6b7f73;background:#f1f5f2;border-radius:20px;padding:9px 14px}
.cloud-foot{text-align:center;font-size:12px;color:#99a79e;margin:26px 0 0;font-style:italic}

/* ---------- playground ---------- */
.pg{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 18px 50px #0f2d1f0a}
.pg-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line);background:#f8fbf9}
.pg-label{font-size:13px;color:#7f8e85}
.pg-toggle{display:flex;align-items:center;gap:12px;border:1.5px solid #cfdfd5;background:#fff;border-radius:40px;padding:7px 16px 7px 7px;font:700 13px 'DM Sans',sans-serif;color:#64756c;cursor:pointer;transition:all .2s}
.pg-knob{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid #d6e2da;display:grid;place-items:center;transition:all .25s;position:relative}
.pg-knob img{position:absolute;transition:opacity .2s}
.pk-on{opacity:0}
.pg-toggle[aria-pressed="true"] .pk-on{opacity:1}
.pg-toggle[aria-pressed="true"] .pk-off{opacity:0}
.pg-toggle[aria-pressed="true"]{border-color:var(--green);color:var(--green);background:#f0faf4}
.pg-toggle[aria-pressed="true"] .pg-knob{background:#fff;border-color:var(--green)}
.pg-stage{position:relative;min-height:380px;padding:30px 34px;overflow:hidden}
.pg-article{max-width:62%}
.pg-article .sk{margin-bottom:11px}
.pg-article .sk-img{height:120px}
.pg-ad{position:absolute;transition:all .5s cubic-bezier(.5,-.3,.6,1);font-family:Manrope,sans-serif}
.pga-banner{top:24px;left:34px;right:34px;background:repeating-linear-gradient(45deg,#fff0ee,#fff0ee 10px,#ffe4e0 10px,#ffe4e0 20px);border:1.5px dashed #e58573;color:#b3341d;font-size:12px;font-weight:800;text-align:center;padding:14px;border-radius:9px;letter-spacing:.4px}
.pga-modal{top:120px;left:30%;background:#fff;border:1.5px solid #e58573;border-radius:12px;padding:18px 22px;box-shadow:0 18px 40px #7f211233;transform:rotate(-2deg);z-index:3}
.pga-modal b{display:block;font-size:15px}
.pga-modal span{display:block;font-size:12px;color:#8d9b93;margin-top:4px;font-family:'DM Sans',sans-serif}
.pga-modal i{position:absolute;top:10px;right:12px;font-style:normal;font-size:11px;color:#b3341d}
.pga-side{top:88px;right:34px;width:86px;background:#fff4e3;border:1.5px dashed #e0b05e;color:#9a6b13;font-size:11px;font-weight:800;text-align:center;padding:16px 8px;border-radius:9px;line-height:1.8}
.pga-cookie{bottom:26px;left:34px;right:30%;background:#fff;border:1.5px solid #d9c9a8;color:#6d5a2e;font-size:12.5px;font-weight:700;padding:15px 18px;border-radius:10px;box-shadow:0 12px 30px #6d5a2e22;z-index:2}
.cleaned .pg-ad{opacity:0;pointer-events:none}
.cleaned .pga-banner{transform:translateY(-90px) rotate(3deg) scale(.9)}
.cleaned .pga-modal{transform:translateY(130px) rotate(14deg) scale(.6)}
.cleaned .pga-side{transform:translateX(140px) rotate(10deg)}
.cleaned .pga-cookie{transform:translateY(110px) rotate(-8deg) scale(.7)}
.pg-done{position:absolute;right:30px;bottom:24px;display:flex;align-items:center;gap:12px;background:var(--ink-dark);color:#e8f4ec;border-radius:12px;padding:13px 18px;opacity:0;transform:translateY(14px);transition:all .45s .35s}
.pg-done b{font-size:13.5px;display:block}
.pg-done span{font-size:11px;color:#9dbfa9;display:block;margin-top:1px}
.cleaned .pg-done{opacity:1;transform:none}
.pg-foot{text-align:center;font-size:12.5px;color:#8b9a91;padding:16px 20px;border-top:1px solid var(--line);margin:0;background:#f8fbf9}

/* ---------- dark panel (how) ---------- */
.dark-panel{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;background:linear-gradient(150deg,#07281B,#0c3624);border-radius:26px;padding:56px 58px;color:#dcEEe2;align-items:center}
h2.light{color:#fff}
.dp-sub{color:#9dbfa9;font-size:16px;line-height:1.7;margin:18px 0 0}
.dp-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px}
.dp-list li{display:flex;gap:15px;align-items:flex-start;font-size:14.5px;line-height:1.6;color:#b9d4c2}
.dp-list b{color:#fff}
.dp-list li>span{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:#16452e;color:var(--lime);font:800 12.5px/26px Manrope,sans-serif;text-align:center}
.dp-puzzle{width:14px;height:14px;fill:#b9d4c2;vertical-align:-2px;display:inline-block}
.dp-right{position:relative;display:grid;gap:18px;justify-items:center}
.dp-toolbar{display:flex;align-items:center;gap:18px;background:#10311f;border:1px solid #1d4a31;border-radius:14px;padding:14px 20px;width:100%}
.dp-addr{flex:1;background:#0a2416;border:1px solid #1d4a31;border-radius:20px;padding:8px 16px;font-size:12.5px;color:#7fa78c}
.dp-ico{position:relative}
.dp-ico .wbadge{border-color:#10311f}
.dp-tip{background:#fff;color:var(--ink);border-radius:14px;padding:18px 22px;width:84%;box-shadow:0 20px 44px #02130a66}
.dp-tip b{display:block;font-family:Manrope,sans-serif;font-size:15px}
.dp-tip span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#5d6f65;margin-top:6px}
.dot-on{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}
.dp-hint{color:#99a79e!important;font-style:italic}
.dp-cursor{position:absolute;right:16%;top:34%;font-size:22px;color:#fff;text-shadow:0 2px 8px #0008}

/* ---------- steps ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stepc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px 26px;box-shadow:0 10px 30px #0f2d1f07}
.stepc-tag{display:block;font-size:10.5px;font-weight:800;letter-spacing:1.6px;color:#8b9a91;margin-bottom:16px}
.stepc-scene{position:relative;height:120px;border-radius:12px;margin-bottom:20px;display:grid;place-items:center;overflow:hidden}
.sc-mint{background:var(--mint)}
.sc-lime{background:var(--limebg)}
.sc-pink{background:var(--pink);display:flex;flex-direction:column;justify-content:center;padding:0 26px;gap:9px;align-items:flex-start}
.sc-btn{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;font-weight:700;font-size:13.5px;border-radius:9px;padding:11px 18px;box-shadow:0 8px 18px #04964f33}
.sc-cursor{position:absolute;bottom:22%;right:30%;font-size:20px}
.sc-pin{font-size:22px;position:absolute;top:18px;right:30%}
.sc-shield{display:grid;place-items:center}
.sc-note{position:absolute;bottom:12px;font-size:11px;color:#79886f;font-style:italic}
.sc-zen{font-size:11.5px;color:#c08b93;font-style:italic;margin-top:4px}
.stepc h3{font-size:19px}
.stepc p{margin:0;font-size:14px;line-height:1.65;color:var(--muted)}

/* ---------- ribbon ---------- */
.ribbon{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0}
.ribbon-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ribbon-row b{display:block;font:800 30px/1 Manrope,sans-serif;letter-spacing:-1.2px;color:var(--green)}
.ribbon-row span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px}
.ribbon-row i{width:1px;height:38px;background:var(--line)}

/* ---------- faq ---------- */
.faq-list{display:grid;gap:12px}
.faq-list details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 24px;transition:border-color .2s}
.faq-list details[open]{border-color:#9ec7ab;box-shadow:0 10px 26px #0f2d1f0a}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:19px 0;font-weight:800;font-family:Manrope,sans-serif;font-size:16px;letter-spacing:-.3px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:22px;color:var(--green);font-weight:400;transition:transform .2s;flex-shrink:0}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{margin:0 0 20px;color:var(--muted);font-size:14.5px;line-height:1.7}
.faq-list a{color:var(--green-deep);font-weight:700}

/* ---------- cta ---------- */
.cta-band{background:linear-gradient(140deg,#0b7a4b,#04964F 60%,#1aa75f);color:#fff;text-align:center;padding:78px 0 86px;position:relative;overflow:hidden}
.cta-inner{position:relative}
.cta-mascot{display:grid;place-items:center;margin-bottom:18px}
.cta-mascot svg{animation:bob 4s ease-in-out infinite;filter:drop-shadow(0 14px 26px #04210f45)}
.cta-band h2{color:#fff;font-size:46px}
.cta-band p{color:#cdeeda;margin:16px 0 30px;font-size:16.5px}
.cta-under{display:block;margin-top:16px;font-size:13px;color:#b4e3c6}

/* ---------- footer ---------- */
.foot{background:var(--ink-dark);color:#9db8a7;padding:54px 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:40px;padding-bottom:38px}
.foot .brand{color:#fff}
.foot .brand b{color:var(--lime)}
.foot-brand p{font-size:13.5px;line-height:1.65;max-width:300px;margin:16px 0 0}
.foot-col{display:grid;gap:11px;align-content:start;font-size:14px}
.foot-label{font-size:11px;font-weight:800;letter-spacing:1.6px;color:#6f8f7c;margin-bottom:4px}
.foot-col a:hover{color:#fff}
.foot-legal{border-top:1px solid #16402c;padding-top:20px;padding-bottom:26px;font-size:12px;color:#6f8f7c}

/* ---------- responsive ---------- */
@media(max-width:1080px){
 h1{font-size:56px;letter-spacing:-2.6px}
 h2{font-size:38px}
 .peek{right:-16px}
 .toast{max-width:360px}
}
@media(max-width:900px){
 .nav-links{display:none}
 .hero-grid{grid-template-columns:1fr}
 .hero{padding-top:46px}
 .hero-stage{margin-top:40px}
 .hand-note{display:none}
 .sec-head{flex-direction:column;align-items:flex-start;gap:14px}
 .head-aside{text-align:left}
 .head-aside br{display:none}
 .pow-grid,.steps-grid,.clouds{grid-template-columns:1fr}
 .dark-panel{grid-template-columns:1fr;padding:38px 30px;gap:34px}
 .ribbon-row{justify-content:flex-start}
 .ribbon-row i{display:none}
 .pg-article{max-width:100%}
 .pga-side{display:none}
 .pga-modal{left:12%}
 h2{font-size:32px;letter-spacing:-1.3px}
 .cta-band h2{font-size:36px}
 .sec{padding:56px 0}
 .hero-sub br{display:none}
 .yt-banner{flex-wrap:wrap}
 .yt-banner>a{margin-left:58px}
}
@media(max-width:560px){
 h1{font-size:42px;letter-spacing:-1.8px}
 .btn-big{width:100%;justify-content:center}
 .hero-cta{flex-direction:column;align-items:stretch;gap:16px}
 .btn-ghost{justify-content:center}
 .toast{left:3%;right:3%;max-width:none;padding:12px 16px}
 .peek{display:none}
 .sticker{right:6px}
 .hero-strip{gap:16px}
 .strip-sign{margin-left:0}
 .cloud{border-radius:30px;padding:40px 22px 30px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.hero-trust{display:flex;align-items:center;gap:10px;margin-top:28px;font-size:14px;color:#58695f;flex-wrap:wrap}
.hero-trust b{color:var(--ink)}
.dot{color:#b9c6be}
.blocked-tag{position:absolute;left:10%;bottom:12px;font-size:12.5px;font-weight:700;color:#b3341d;background:#fdeef0;border-radius:20px;padding:8px 14px}
/* demo affordance */
.pg-top{position:relative}
.pg-toggle{padding:9px 22px 9px 9px;font-size:14.5px;gap:14px}
.pg-knob{width:36px;height:36px}
.pg-knob img{width:24px;height:24px}
.pg-toggle[aria-pressed="false"]{border-color:var(--green);color:var(--ink);animation:pulse-halo 2s infinite}
@keyframes pulse-halo{0%{box-shadow:0 0 0 0 #04964f5c}70%{box-shadow:0 0 0 14px #04964f00}100%{box-shadow:0 0 0 0 #04964f00}}
.pg-hint{position:absolute;right:30px;top:74px;z-index:6;background:var(--ink-dark);color:#fff;font-size:13px;font-weight:700;padding:11px 16px;border-radius:10px;box-shadow:0 12px 28px #04210f40;animation:hint-nudge 1.5s ease-in-out infinite;white-space:nowrap}
.pg-hint i{position:absolute;top:-13px;right:34px;font-style:normal;color:var(--ink-dark);font-size:15px}
@keyframes hint-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(max-width:560px){.pg-hint{right:12px}}
/* real extension icon in CTA buttons + stronger presence */
.btn-ico{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;flex-shrink:0;box-shadow:0 2px 8px #04210f33}
.btn-ico img{display:block}
.btn-primary{background:linear-gradient(135deg,#04964F,#0aa85d);font-weight:800;letter-spacing:.1px}
.btn-primary:hover{background:linear-gradient(135deg,#02874536,#0aa85d);background-color:var(--green-deep)}
.btn-big{padding:20px 38px 20px 14px;font-size:19px;box-shadow:0 12px 34px #04964f52;border-radius:16px}
.btn-big .btn-ico{width:42px;height:42px}
.btn-big .btn-ico img{width:28px;height:28px}
.btn-nav{padding:11px 24px 11px 10px;font-size:15.5px;font-weight:800;box-shadow:0 6px 18px #04964f40}
.btn-light .btn-ico{background:#eaf6ee}
.sc-btn .btn-ico{width:22px;height:22px}
.sc-btn .btn-ico img{width:15px;height:15px}

/* CTA emphasis: sheen sweep + halo on primary buttons */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;background:linear-gradient(100deg,transparent,#ffffff3d,transparent);transform:skewX(-20deg);animation:sheen 3.2s ease-in-out infinite}
@keyframes sheen{0%,55%{left:-80%}85%,100%{left:130%}}
.hero .btn-big{animation:cta-halo 2.6s infinite}
@keyframes cta-halo{0%{box-shadow:0 12px 34px #04964f52,0 0 0 0 #04964f44}70%{box-shadow:0 12px 34px #04964f52,0 0 0 16px #04964f00}100%{box-shadow:0 12px 34px #04964f52,0 0 0 0 #04964f00}}
.btn-nav .btn-ico{width:26px;height:26px}
.btn-nav .btn-ico img{width:18px;height:18px}