:root{--ink:#0b0b0d;--bone:#f6f2e9;--paper:#fffdfa;--acid:#dfff4f;--blue:#78a8ff;--peach:#ffc6a8;--pink:#ffc8e1;--mint:#c8f5df;--lav:#d9ceff;--muted:#6f6b64;--line:rgba(11,11,13,.14);--shadow:0 18px 60px rgba(11,11,13,.10);--radius:28px;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bone);color:var(--ink);font-family:Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.shell{width:min(calc(100% - 34px),var(--max));margin:auto}.nav{position:sticky;top:0;z-index:30;background:rgba(246,242,233,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.navin{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:flex;gap:10px;align-items:center;font-weight:900;font-size:20px}.brand-dot{width:38px;height:38px;border-radius:12px;background:var(--acid);display:grid;place-items:center;font-weight:1000}.brand small{display:block;font-size:9px;letter-spacing:.16em;color:var(--muted);margin-top:2px}.navlinks{display:flex;gap:18px;align-items:center;font-size:11px;font-weight:850;letter-spacing:.08em}.pill{border:1px solid var(--ink);border-radius:999px;padding:9px 12px}.topstrip{background:var(--ink);color:#fff;text-align:center;padding:9px 14px;font-size:10px;letter-spacing:.14em;font-weight:800}.section{padding:78px 0}.soft{background:#f0ece3}.white{background:var(--paper)}.darksection{background:var(--ink);color:#fff}.head{max-width:820px;margin-bottom:34px}.head.center{text-align:center;margin-left:auto;margin-right:auto}.head p{font-size:17px;line-height:1.55;color:#5d5851}.eyebrow,.kicker{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.16em;font-weight:900;text-transform:uppercase}.eyebrow:before,.kicker:before{content:"";width:22px;height:7px;border-radius:999px;background:var(--acid)}h1{font-size:clamp(50px,6vw,82px);line-height:.93;letter-spacing:-.06em;margin:18px 0 20px}h2{font-size:clamp(34px,4.5vw,60px);line-height:.98;letter-spacing:-.045em;margin:12px 0 16px}h3{font-size:22px;line-height:1.08;letter-spacing:-.02em;margin:8px 0 10px}.lead{font-size:19px;line-height:1.55;color:#3d3934;max-width:700px}.micro{font-size:11px;line-height:1.55;color:var(--muted)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.btn{display:inline-flex;justify-content:center;align-items:center;min-height:50px;padding:0 20px;border:1px solid var(--ink);border-radius:999px;font-size:12px;font-weight:950;letter-spacing:.05em;cursor:pointer}.btn.primary{background:var(--acid);color:var(--ink)}.btn.dark{background:var(--ink);color:#fff}.btn.soft{background:var(--paper)}
/* HERO */
.hero{padding:46px 0 22px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:28px;align-items:center}.hero .lead{max-width:650px}.hero-stack{min-height:520px;display:flex;align-items:center;justify-content:center}.hero-stack img{width:min(760px,115%);max-width:none;filter:drop-shadow(0 22px 48px rgba(0,0,0,.10));transform:translateY(-6px)}.hero-proof{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.hero-proof span{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 10px;font-size:11px;font-weight:800}.hero-mantra{margin:30px 0 0;background:var(--ink);color:#fff;border-radius:26px;padding:19px 22px;font-size:clamp(20px,2.5vw,34px);line-height:1.06;font-weight:950;letter-spacing:-.035em}.hero-mantra span{color:var(--acid)}.process-rail{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:18px;background:var(--paper)}.process-rail span{padding:12px 9px;text-align:center;font-size:9px;font-weight:950;letter-spacing:.08em;border-right:1px solid var(--line)}.process-rail span:last-child{border-right:0;background:var(--acid)}
/* HOW IT WORKS */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.stepcard{background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:18px;overflow:hidden}.stepcard .n{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--ink);border-radius:13px;font-size:11px;font-weight:950;margin-bottom:14px}.stepcard:nth-child(1) .n{background:var(--pink)}.stepcard:nth-child(2) .n{background:var(--acid)}.stepcard:nth-child(3) .n{background:var(--blue)}.stepcard p{font-size:13px;line-height:1.55;color:var(--muted);min-height:61px}.step-shot{margin-top:14px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#eee;aspect-ratio:16/10}.step-shot img{width:100%;height:100%;object-fit:cover;object-position:top}.step-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}.step-tags span{font-size:9px;font-weight:850;border-radius:999px;padding:6px 8px;background:rgba(11,11,13,.055)}
/* STATEMENT */
.statement{padding:64px 0;background:var(--acid);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}.statement h2{font-size:clamp(52px,7vw,94px);max-width:1050px;margin:0;line-height:.88}.statement p{font-size:22px;max-width:720px;line-height:1.45;margin:26px 0 0}
/* USE CASES */
.use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.use-card{border:1px solid var(--line);border-radius:26px;background:var(--paper);overflow:hidden}.use-head{padding:19px 19px 13px;display:flex;align-items:center;gap:12px}.use-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--ink);font-size:20px}.use-card:nth-child(2) .use-icon,.use-card:nth-child(5) .use-icon{background:var(--acid)}.use-card:nth-child(3) .use-icon{background:var(--blue)}.use-card:nth-child(4) .use-icon{background:var(--pink)}.use-card:nth-child(6) .use-icon{background:var(--mint)}.use-body{padding:0 19px 19px}.use-body strong{display:block;font-size:15px}.use-body p{font-size:12px;line-height:1.5;color:var(--muted);min-height:54px}.use-result{display:flex;justify-content:space-between;align-items:center;background:#f4f1eb;border-radius:14px;padding:10px 11px;font-size:10px;font-weight:850}.use-result b{font-size:9px;background:var(--ink);color:#fff;padding:5px 7px;border-radius:999px}
/* LIVE DEMOS */
.demo-section{background:#111318;color:#fff}.demo-switcher{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.demo-switch{border:1px solid rgba(255,255,255,.28);background:transparent;color:white;border-radius:999px;padding:10px 14px;font-weight:850;font-size:10px}.demo-switch.is-active{background:var(--acid);color:var(--ink);border-color:var(--acid)}.demo-shell{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:stretch}.device{border-radius:34px;background:#20242c;padding:15px;box-shadow:0 20px 70px rgba(0,0,0,.35)}.device iframe{width:100%;height:560px;border:0;border-radius:22px;background:white}.demo-copy{background:#1d2128;border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:26px;display:flex;flex-direction:column;justify-content:center}.demo-copy p{line-height:1.55;color:rgba(255,255,255,.72)}.demo-badge{display:inline-flex;align-self:flex-start;background:var(--acid);color:var(--ink);padding:8px 10px;border-radius:999px;font-size:9px;font-weight:950;letter-spacing:.08em;margin:8px 0 16px}.demo-note{display:grid;gap:8px;margin-top:12px}.demo-note span{border-top:1px solid rgba(255,255,255,.12);padding-top:9px;font-size:11px;color:rgba(255,255,255,.68)}.demo-copy .btn.primary{color:var(--ink);background:var(--acid)}
/* MARQUEE */
.product-marquee{padding:74px 0;background:var(--ink);color:#fff;overflow:hidden}.product-marquee .head p{color:rgba(255,255,255,.65)}.marquee-wrap{display:grid;gap:16px;margin-top:26px}.marquee-row{overflow:hidden;width:100%;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}.marquee-track{display:flex;gap:16px;width:max-content;animation:gn-scroll-left 52s linear infinite}.marquee-row.reverse .marquee-track{animation-name:gn-scroll-right;animation-duration:58s}.marquee-card{width:390px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#1c2026;box-shadow:0 18px 45px rgba(0,0,0,.24)}.marquee-card img{width:100%;height:218px;object-fit:cover;object-position:top}.marquee-card span{display:block;padding:11px 13px;font-size:10px;letter-spacing:.08em;font-weight:850;color:rgba(255,255,255,.78)}@keyframes gn-scroll-left{to{transform:translateX(-50%)}}@keyframes gn-scroll-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* WHAT'S INSIDE */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.product-card{border:1px solid var(--line);border-radius:26px;background:var(--paper);overflow:hidden}.product-card img{width:100%;height:205px;object-fit:cover;object-position:top}.product-copy{padding:16px}.product-copy small{font-size:9px;font-weight:950;letter-spacing:.12em;color:var(--muted)}.product-copy h3{font-size:19px}.product-copy p{font-size:12px;line-height:1.5;color:var(--muted)}.included-list{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.included-list article{border:1px solid var(--line);background:var(--paper);border-radius:18px;padding:15px}.included-list b{display:block;font-size:13px}.included-list span{font-size:11px;color:var(--muted);line-height:1.45;display:block;margin-top:5px}
/* ECOSYSTEM */
.eco-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.eco-card{border:1px solid var(--line);border-radius:24px;background:var(--paper);overflow:hidden;position:relative}.eco-card.active{background:var(--acid)}.eco-card.coming{background:var(--ink);color:#fff}.eco-visual{height:132px;background:#ede8df;border-bottom:1px solid var(--line);position:relative;overflow:hidden}.eco-visual img{width:100%;height:100%;object-fit:cover;object-position:top}.eco-visual.simple{display:grid;place-items:center;background:linear-gradient(135deg,#181a20,#0b0b0d)}.rocket-orbit{width:64px;height:64px;border:1px solid rgba(223,255,79,.35);border-radius:50%;display:grid;place-items:center;font-size:28px;box-shadow:0 0 0 18px rgba(223,255,79,.06),0 0 0 38px rgba(223,255,79,.03)}.eco-copy{padding:17px;min-height:180px}.eco-copy .stage-num{font-size:9px;font-weight:950;letter-spacing:.12em}.eco-copy p{font-size:12px;line-height:1.45;color:var(--muted)}.eco-card.coming .eco-copy p{color:rgba(255,255,255,.62)}.eco-price{font-size:28px;font-weight:950;letter-spacing:-.04em;margin-top:14px}.eco-price small{font-size:9px;color:var(--muted);letter-spacing:.08em}.eco-card.coming .eco-price small{color:rgba(255,255,255,.5)}
/* OFFER CONFIGURATOR */
.offer-builder{background:var(--paper);border:1px solid var(--line);border-radius:34px;padding:28px}.offer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:start}.core-product{border:2px solid var(--ink);border-radius:26px;padding:20px;background:var(--acid)}.core-product-top{display:flex;justify-content:space-between;gap:12px}.core-product h3{font-size:28px}.core-price{font-size:42px;font-weight:950;letter-spacing:-.05em}.addon-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.addon{position:relative;border:1px solid var(--line);border-radius:20px;background:#fff;padding:16px;cursor:pointer;display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:start}.addon input{width:20px;height:20px;accent-color:#0b0b0d;margin-top:2px}.addon b{font-size:15px}.addon p{font-size:11px;color:var(--muted);line-height:1.45;margin:4px 0 0}.addon-price{font-size:18px;font-weight:950;white-space:nowrap}.addon small{grid-column:2/-1;color:var(--muted);font-size:9px}.order-summary{background:var(--ink);color:#fff;border-radius:26px;padding:22px;position:sticky;top:104px}.order-summary h3{font-size:24px;margin-top:0}.summary-row{display:flex;justify-content:space-between;gap:15px;border-top:1px solid rgba(255,255,255,.14);padding:11px 0;font-size:12px}.summary-row.muted{color:rgba(255,255,255,.56)}.summary-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(255,255,255,.22);padding-top:16px;margin-top:6px}.summary-total strong{font-size:42px;color:var(--acid)}.order-summary .btn{width:100%;margin-top:16px;background:var(--acid);color:var(--ink)}.order-summary .micro{color:rgba(255,255,255,.58);margin-bottom:0}.post-purchase-note{margin-top:12px;border-radius:14px;background:rgba(223,255,79,.11);border:1px solid rgba(223,255,79,.25);padding:11px;font-size:10px;line-height:1.45;color:rgba(255,255,255,.76)}
/* FAQ */
.faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:34px;align-items:start}.faq-intro{position:sticky;top:110px}.faq-intro p{font-size:15px;line-height:1.55;color:var(--muted)}.faq{display:grid;grid-template-columns:1fr 1fr;gap:10px}.faq details{border:1px solid var(--line);border-radius:17px;background:var(--paper);padding:0 16px;align-self:start}.faq summary{cursor:pointer;font-weight:850;padding:15px 0;font-size:13px}.faq p{font-size:12px;color:var(--muted);line-height:1.55;margin-top:0;padding-bottom:13px}
/* FOOTER */
.footer{background:var(--ink);color:#fff;padding:45px 0}.footergrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}.footer h4{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:14px}.footer a{display:block;color:rgba(255,255,255,.8);text-decoration:none;margin-bottom:8px;font-size:13px}.footer a:hover{color:var(--acid)}.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;margin-top:30px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.45);font-size:12px}@media (max-width:900px){.footergrid{grid-template-columns:1fr 1fr;gap:28px}}@media (max-width:600px){.footergrid{grid-template-columns:1fr;gap:22px}}
@media(max-width:950px){.hero-grid,.demo-shell,.offer-grid,.faq-layout{grid-template-columns:1fr}.hero-stack{min-height:420px}.hero-stack img{width:100%}.process-rail{grid-template-columns:repeat(3,1fr)}.process-rail span:nth-child(3){border-right:0}.process-rail span:nth-child(-n+3){border-bottom:1px solid var(--line)}.three,.product-grid,.included-list{grid-template-columns:repeat(2,1fr)}.use-grid{grid-template-columns:repeat(2,1fr)}.eco-flow{grid-template-columns:repeat(2,1fr)}.faq-intro{position:static}.order-summary{position:static}.device iframe{height:500px}}
@media(max-width:640px){.shell{width:min(calc(100% - 24px),var(--max))}.navlinks a:not(.pill){display:none}.hero{padding-top:34px}.hero-grid{gap:4px}.hero-stack{min-height:300px}.hero-stack img{width:120%;transform:none}.hero-mantra{font-size:25px}.three,.product-grid,.included-list,.use-grid,.eco-flow,.faq,.addon-grid{grid-template-columns:1fr}.marquee-card{width:290px}.marquee-card img{height:165px}.statement h2{font-size:54px}.statement p{font-size:18px}.footergrid{grid-template-columns:1fr}.footer-bottom{display:grid;gap:6px}.device iframe{height:430px}.core-product-top{display:block}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ===== GoNano Commercial V7 fine tune ===== */
.hero-stack{min-height:500px;position:relative;display:flex;align-items:center;justify-content:center}
.hero-stack:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(213,255,62,.22),rgba(213,255,62,0) 68%);filter:blur(2px)}
.hero-stack img.v7-hero{width:min(650px,94%);height:auto;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 24px 44px rgba(0,0,0,.13));transform:translateY(8px)}

.system-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.system-pillar{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:var(--paper);padding:24px;min-height:270px}
.system-pillar:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-58px;bottom:-65px;background:rgba(11,11,13,.035)}
.system-pillar.acid{background:linear-gradient(145deg,#f9ffe4,#fff)}
.system-pillar.pink{background:linear-gradient(145deg,#fff0f6,#fff)}
.system-pillar.blue{background:linear-gradient(145deg,#edf4ff,#fff)}
.system-pillar.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.system-pillar .sys-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.system-pillar .sys-num{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--acid);border:1px solid var(--ink);font-size:11px;font-weight:950}
.system-pillar.dark .sys-num{background:var(--acid);color:var(--ink)}
.system-pillar small{font-size:9px;font-weight:950;letter-spacing:.13em;color:var(--muted)}
.system-pillar.dark small{color:rgba(255,255,255,.55)}
.system-pillar h3{font-size:25px;max-width:480px;margin-bottom:8px}
.system-pillar p{font-size:13px;line-height:1.55;color:var(--muted);max-width:560px}
.system-pillar.dark p{color:rgba(255,255,255,.68)}
.tool-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.tool-chips span{border:1px solid var(--line);border-radius:999px;background:#fff;padding:7px 9px;font-size:9px;font-weight:850}
.system-pillar.dark .tool-chips span{background:#181a20;border-color:rgba(255,255,255,.16);color:#fff}
.system-pillar .sys-stat{font-size:40px;font-weight:950;letter-spacing:-.06em;margin-top:16px}
.system-pillar .sys-stat em{font-size:11px;font-style:normal;letter-spacing:.04em;color:var(--muted);margin-left:5px}
.system-pillar.dark .sys-stat em{color:rgba(255,255,255,.55)}
.business-toolbox{margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.business-tool{border:1px solid var(--line);background:#fff;border-radius:15px;padding:11px;display:flex;gap:9px;align-items:center;font-size:10px;font-weight:850}
.business-tool i{font-style:normal;font-size:18px}

.eco-visual.mockup{height:220px;background:#f3efe7;padding:8px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.eco-card.active .eco-visual.mockup{background:linear-gradient(145deg,#f6f2ea,#e7ffc0)}
.eco-visual.mockup img{width:100%;height:100%;object-fit:contain;object-position:center}
.eco-card .eco-copy{min-height:178px}

.offer-builder.v7-note{position:relative;background:var(--ink);color:#fff;border:0;border-radius:30px 30px 30px 8px;padding:34px;overflow:hidden;box-shadow:0 25px 70px rgba(0,0,0,.14)}
.offer-builder.v7-note:after{content:"";position:absolute;right:0;top:0;width:62px;height:62px;background:linear-gradient(225deg,var(--soft) 0 49%,#25282d 50% 100%);border-bottom-left-radius:12px}
.offer-builder.v7-note .head{padding-right:58px}
.offer-builder.v7-note .head h2{color:#fff;max-width:880px}
.offer-builder.v7-note .head p{color:rgba(255,255,255,.66);max-width:780px}
.offer-builder.v7-note .head .kicker{color:var(--acid)}
.offer-builder.v7-note .core-product{background:var(--acid);border:2px solid var(--ink);border-radius:24px;padding:22px 24px;box-shadow:0 12px 32px rgba(0,0,0,.22);color:var(--ink)}
.offer-builder.v7-note .core-product small{display:inline-block;background:var(--ink);color:var(--acid);font-size:10px;font-weight:950;letter-spacing:.14em;padding:4px 10px;border-radius:6px;text-transform:uppercase;margin-bottom:8px}
.offer-builder.v7-note .core-product h3{color:var(--ink);font-size:30px;font-weight:950;letter-spacing:-.03em;margin:4px 0 6px}
.offer-builder.v7-note .core-product p{color:#1a1a1e;font-size:13px;line-height:1.5;margin:0;font-weight:500}
.offer-builder.v7-note .core-price{color:var(--ink);font-size:42px;font-weight:950;letter-spacing:-.05em;display:flex;align-items:center}
.offer-builder.v7-note .addon-grid{grid-template-columns:1fr 1fr}
.offer-builder.v7-note .addon{background:#f6f2ea;border:2px solid transparent;color:var(--ink);transition:transform .18s ease,background .18s ease,border-color .18s ease;box-shadow:0 9px 20px rgba(0,0,0,.08)}
.offer-builder.v7-note .addon:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.55)}
.offer-builder.v7-note .addon input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:2px solid var(--ink);border-radius:5px;background:#fff;display:grid;place-items:center;margin-top:0}
.offer-builder.v7-note .addon input:checked:after{content:"✓";font-weight:950;font-size:16px;line-height:1;color:#fff}
.offer-builder.v7-note .addon input:checked{background:var(--ink)}
.offer-builder.v7-note .addon.addon-cf.is-selected{background:var(--pink);border-color:var(--ink)}
.offer-builder.v7-note .addon.addon-ag.is-selected{background:var(--blue);border-color:var(--ink)}
.offer-builder.v7-note .addon p,.offer-builder.v7-note .addon small{color:#5c5b5a}
.offer-builder.v7-note .order-summary{background:#15171b;border:1px solid rgba(255,255,255,.13);box-shadow:none}
.offer-builder.v7-note .post-purchase-note{background:rgba(213,255,62,.1);border-color:rgba(213,255,62,.27)}

@media(max-width:950px){.system-pillars{grid-template-columns:1fr}.eco-visual.mockup{height:260px}.hero-stack img.v7-hero{width:min(650px,82%)}.offer-builder.v7-note{padding:26px}.offer-builder.v7-note .head{padding-right:34px}}
@media(max-width:640px){.hero-stack{min-height:370px}.hero-stack img.v7-hero{width:92%}.business-toolbox{grid-template-columns:1fr}.offer-builder.v7-note{padding:22px 16px;border-radius:24px 24px 24px 7px}.offer-builder.v7-note:after{width:46px;height:46px}.offer-builder.v7-note .addon-grid{grid-template-columns:1fr}.eco-visual.mockup{height:220px}}

/* ─── Compact 3-Part Workflow Section ────────────────────────────────────────── */
.workflow-section {
  padding: 68px 0 76px;
  background: var(--bone);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.workflow-section .head {
  max-width: 840px;
  margin: 0 auto 36px;
  text-align: center;
}

.workflow-cards {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 44px;
}

.workflow-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 30px 32px;
  box-shadow: 0 10px 30px rgba(11,11,13,0.04);
}

.workflow-card-body {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 36px;
  align-items: center;
}

.workflow-card-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.workflow-badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ink);
}
.workflow-badge.acid { background: var(--acid); }
.workflow-badge.blue { background: var(--blue); }
.workflow-badge.pink { background: var(--pink); }

.workflow-card-info h3 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.workflow-card-info p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.workflow-step-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.workflow-step-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
}

.workflow-step-list .step-idx {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 950;
  color: var(--ink);
}

.workflow-step-list b {
  font-weight: 850;
  color: var(--ink);
  display: inline;
}

.workflow-step-list small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 1px;
}

.workflow-card-media {
  display: grid;
  gap: 12px;
  align-items: center;
}

.workflow-card-media.duo {
  grid-template-columns: 1fr 1fr;
}

.workflow-card-media.single {
  grid-template-columns: 1fr;
}

.media-frame {
  background: #f0ece3;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.03), 0 6px 18px rgba(11,11,13,0.05);
  overflow: hidden;
}

.media-frame img {
  width: 100%;
  height: auto;
  max-height: 230px;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  display: block;
}

.workflow-statement-box {
  background: var(--ink);
  color: #ffffff;
  border-radius: 24px;
  padding: 34px 24px;
  text-align: center;
  box-shadow: 0 18px 45px rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.1);
}

.workflow-statement-kicker {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.16em;
  color: var(--acid);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.workflow-statement-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 20px;
  font-size: clamp(18px, 2.5vw, 30px);
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.workflow-statement-words span { color: #ffffff; }
.workflow-statement-words span.highlight { color: var(--acid); }
.workflow-statement-words span.accent { color: var(--blue); }

@media (max-width: 950px) {
  .workflow-card-body {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .workflow-card {
    padding: 22px 18px;
  }
  .workflow-card-media.duo {
    grid-template-columns: 1fr 1fr;
  }
  .media-frame img {
    max-height: 190px;
  }
}

@media (max-width: 640px) {
  .workflow-section {
    padding: 48px 0;
  }
  .workflow-card {
    padding: 18px 14px;
    border-radius: 20px;
  }
  .workflow-card-media.duo {
    grid-template-columns: 1fr;
  }
  .media-frame img {
    max-height: 170px;
  }
  .workflow-statement-box {
    padding: 26px 16px;
    border-radius: 20px;
  }
  .workflow-statement-words {
    gap: 6px 12px;
    font-size: 19px;
  }
}

/* ─── Sticky Bottom Purchase Bar ─────────────────────────────────────────── */
.gn-sticky-bar {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translate(-50%, 35px);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
  width: max-content;
  max-width: calc(100% - 24px);
}

.gn-sticky-bar.is-visible,
.gn-sticky-bar.gn-sticky-active {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.gn-sticky-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(14, 16, 20, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  padding: 8px 12px 9px 16px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.3);
  color: #fff;
}

.gn-sticky-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 2px;
}

.gn-sticky-helper {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: -0.01em;
}

.gn-sticky-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gn-sticky-items {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Base Badge Style (15px rounded corners) */
.gn-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all 0.18s ease;
  user-select: none;
  font-family: inherit;
  margin: 0;
  text-decoration: none;
}

/* Core GoNano Badge */
.gn-badge-core {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
  cursor: default;
  border-radius: 15px;
}
.gn-badge-core .gn-badge-name {
  color: #ffffff;
  font-weight: 850;
}
.gn-badge-core .gn-badge-role {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(223, 255, 79, 0.2);
  color: var(--acid);
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 800;
}
.gn-badge-core .gn-badge-price {
  color: var(--acid);
  font-weight: 950;
  margin-left: 2px;
}

/* Upsell Badges (Always visible text, 15px rounded corners) */
.gn-badge-upsell {
  cursor: pointer;
  background: #ede8df;
  color: #121316;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  border-radius: 15px;
}
.gn-badge-upsell:hover {
  transform: translateY(-1px);
  background: #ffffff;
}
.gn-badge-upsell .gn-badge-check {
  display: none;
  font-size: 10.5px;
  font-weight: 950;
}
.gn-badge-upsell .gn-badge-prefix {
  color: #63605c;
  font-weight: 900;
}
.gn-badge-upsell .gn-badge-name {
  color: #121316;
  font-weight: 800;
}
.gn-badge-upsell .gn-badge-price {
  color: #45423f;
  font-weight: 850;
}

/* Client Finder Selected State (Pink) */
.gn-badge-cf.is-selected {
  background: var(--pink, #ffc8e1) !important;
  color: #0b0b0d !important;
  border-color: #0b0b0d !important;
  box-shadow: 0 2px 8px rgba(255, 200, 225, 0.45);
}
.gn-badge-cf.is-selected .gn-badge-check {
  display: inline-block !important;
  color: #0b0b0d;
}
.gn-badge-cf.is-selected .gn-badge-prefix {
  display: none;
}
.gn-badge-cf.is-selected .gn-badge-name,
.gn-badge-cf.is-selected .gn-badge-price {
  color: #0b0b0d !important;
  font-weight: 900;
}

/* Agency Kit Selected State (Blue) */
.gn-badge-ag.is-selected {
  background: var(--blue, #78a8ff) !important;
  color: #0b0b0d !important;
  border-color: #0b0b0d !important;
  box-shadow: 0 2px 8px rgba(120, 168, 255, 0.45);
}
.gn-badge-ag.is-selected .gn-badge-check {
  display: inline-block !important;
  color: #0b0b0d;
}
.gn-badge-ag.is-selected .gn-badge-prefix {
  display: none;
}
.gn-badge-ag.is-selected .gn-badge-name,
.gn-badge-ag.is-selected .gn-badge-price {
  color: #0b0b0d !important;
  font-weight: 900;
}

/* Total Section */
.gn-badge-total {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 0 4px;
}
.gn-total-label {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}
.gn-total-amount {
  font-size: 16px;
  font-weight: 950;
  color: var(--acid);
  letter-spacing: -0.02em;
}

/* Sticky CTA Button */
.gn-sticky-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--acid);
  color: #0b0b0d !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.02em;
  padding: 9px 18px;
  border-radius: 15px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: 0 4px 14px rgba(223, 255, 79, 0.28);
  white-space: nowrap;
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.gn-sticky-cta svg {
  transition: transform 0.16s ease;
}
.gn-sticky-cta:hover {
  background: #ecff66;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(223, 255, 79, 0.42);
}
.gn-sticky-cta:hover svg {
  transform: translateX(2px);
}
.gn-sticky-cta:active {
  transform: translateY(0);
}

/* Responsive Rules */
@media (max-width: 900px) {
  .gn-sticky-bar {
    bottom: max(12px, env(safe-area-inset-bottom, 12px));
    max-width: calc(100% - 16px);
  }
  .gn-sticky-main {
    gap: 10px;
  }
  .gn-badge {
    padding: 5px 10px;
    font-size: 10.5px;
    gap: 4px;
    border-radius: 12px;
  }
  .gn-total-amount {
    font-size: 14.5px;
  }
  .gn-sticky-cta {
    padding: 8px 15px;
    font-size: 11px;
    border-radius: 12px;
  }
}

@media (max-width: 680px) {
  .gn-sticky-bar {
    width: calc(100% - 14px);
    bottom: max(10px, env(safe-area-inset-bottom, 10px));
  }
  .gn-sticky-container {
    padding: 8px 10px;
    border-radius: 16px;
    width: 100%;
  }
  .gn-sticky-helper {
    font-size: 10px;
  }
  .gn-sticky-main {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .gn-sticky-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 4px;
  }
  .gn-badge {
    padding: 4px 7px;
    font-size: 9.5px;
    border-radius: 10px;
    gap: 3px;
  }
  .gn-badge-core .gn-badge-name {
    font-size: 9.5px;
  }
  .gn-badge-role {
    display: none;
  }
  .gn-badge-upsell .gn-badge-name {
    font-size: 9px;
  }
  .gn-badge-upsell .gn-badge-price {
    font-size: 9px;
  }
  .gn-total-label {
    font-size: 8px;
  }
  .gn-total-amount {
    font-size: 13px;
  }
  .gn-sticky-cta {
    width: 100%;
    justify-content: center;
    padding: 9px 12px;
    font-size: 12px;
    border-radius: 12px;
  }
}