:root { --ink:#171a18; --cream:#f4f1e8; --lime:#d7ff45; --blue:#5c79ff; --muted:#6f746f; --line:#d7d7cf; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
button, a { -webkit-tap-highlight-color:transparent; }
.nav-shell { height:78px; max-width:1280px; margin:0 auto; padding:0 34px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10; border-bottom:1px solid rgba(23,26,24,.12); }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:21px; letter-spacing:-.7px; }
.brand > span:last-child > span { color:#799a00; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; color:var(--ink); background:var(--lime); transform:rotate(-3deg); }
.nav-links { display:flex; gap:34px; font-size:14px; font-weight:600; }
.menu-toggle { display:none; border:0; background:transparent; color:var(--ink); font-size:24px; cursor:pointer; }
.nav-links a:hover { opacity:.55; }
.nav-cta { display:flex; align-items:center; gap:10px; background:var(--ink); color:white; border-radius:100px; padding:12px 18px; font-size:13px; font-weight:700; transition:.2s ease; }
.nav-cta:hover,.button:hover { transform:translateY(-2px); }
.hero { min-height:760px; max-width:1280px; margin:0 auto; padding:92px 34px 100px; display:grid; grid-template-columns:.88fr 1.12fr; gap:75px; align-items:center; position:relative; overflow:hidden; }
.orb { position:absolute; border-radius:999px; filter:blur(1px); opacity:.56; pointer-events:none; }
.orb-one { width:320px; height:320px; background:radial-gradient(circle at 30% 30%,#d7ff45,rgba(215,255,69,0)); top:-150px; left:18%; }
.orb-two { width:360px; height:360px; background:radial-gradient(circle at 50% 50%,rgba(92,121,255,.25),rgba(92,121,255,0)); right:-140px; bottom:0; }
.hero-copy { position:relative; z-index:2; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; background:#fff; padding:7px 12px 7px 8px; border:1px solid rgba(23,26,24,.1); border-radius:100px; box-shadow:0 8px 28px rgba(23,26,24,.06); }
.eyebrow span { width:22px; height:22px; border-radius:50%; background:var(--lime); display:grid; place-items:center; }
h1,h2 { margin:0; font-family:Georgia, 'Times New Roman', serif; font-weight:500; letter-spacing:-.052em; line-height:.94; }
h1 { font-size:clamp(60px,6vw,91px); margin:28px 0 26px; }
h1 em,h2 em { font-weight:400; color:#5e6ee8; }
.hero-lede { max-width:540px; color:#565b57; font-size:18px; line-height:1.65; margin:0; }
.hero-actions { display:flex; gap:12px; margin-top:34px; align-items:center; }
.button { min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:11px; padding:0 22px; border-radius:100px; font-size:14px; font-weight:800; transition:.2s ease; }
.button-primary { background:var(--lime); color:var(--ink); box-shadow:0 12px 28px rgba(107,137,0,.18); }
.button-ghost { border:1px solid rgba(23,26,24,.18); background:rgba(255,255,255,.48); }
.micro-proof { display:flex; align-items:center; gap:14px; margin-top:34px; }
.avatar-stack { display:flex; }
.avatar-stack span { width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-left:-7px;border:2px solid var(--cream);background:#d6c3a4;font-size:9px;font-weight:800; }
.avatar-stack span:first-child { margin-left:0;background:#9cb5d0; }.avatar-stack span:last-child { background:#a7c39a; }
.micro-proof strong,.micro-proof small { display:block; }.micro-proof strong { font-size:12px; }.micro-proof small { font-size:11px; color:#777c77; margin-top:3px; }
.hero-stage { position:relative; z-index:2; background:#fefefe; border:1px solid rgba(23,26,24,.15); border-radius:20px; box-shadow:0 28px 80px rgba(32,38,34,.18); padding:10px; transform:rotate(1.2deg); }
.stage-toolbar { height:39px; display:flex; align-items:center; gap:6px; padding:0 8px; font-size:10px; }
.dot { width:8px;height:8px;border-radius:50%; }.red{background:#ff766b}.amber{background:#ffc95e}.green{background:#72d27a}
.stage-label { margin-left:8px; color:#737873; font-weight:700; }.status-pill { margin-left:auto; border:1px solid #bcd66b; color:#647d16; padding:4px 8px; border-radius:20px; background:#f5ffd9; }
.image-frame { height:430px; position:relative; overflow:hidden; border-radius:13px; background:#ddd; }
.image-frame img { width:100%;height:100%;object-fit:cover;display:block; }
.image-tag { position:absolute; top:14px; padding:7px 10px; border-radius:8px; font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; backdrop-filter:blur(8px); }
.image-tag-left { left:14px; background:rgba(255,255,255,.85); }.image-tag-right { right:14px; background:rgba(215,255,69,.9); display:flex;gap:5px;align-items:center; }
.split-line { position:absolute; top:0; bottom:0; left:50%; width:2px; background:white; box-shadow:0 0 18px rgba(0,0,0,.3); }
.split-line i { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:28px;height:28px;border-radius:50%;background:white;box-shadow:0 3px 12px rgba(0,0,0,.25); }
.prompt-bar { display:grid; grid-template-columns:34px 1fr 38px; align-items:center; gap:9px; padding:10px 5px 0; }
.prompt-icon { width:32px;height:32px;border-radius:9px;background:#edf1ff;color:#5c79ff;display:grid;place-items:center; }.prompt-bar small{font-size:8px;text-transform:uppercase;letter-spacing:.09em;color:#898d89;font-weight:800}.prompt-bar p{font-size:11px;margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.prompt-action{background:var(--ink);color:white;width:36px;height:36px;border-radius:50%;display:grid;place-items:center}
.floating-chip { position:absolute; display:flex;align-items:center;gap:7px;background:white;border:1px solid rgba(23,26,24,.1);box-shadow:0 10px 32px rgba(23,26,24,.16);border-radius:11px;padding:10px 12px;font-size:10px;font-weight:800; }
.chip-one { top:90px; right:-34px; }.chip-one span{color:#70a500}.chip-two { bottom:66px; left:-42px; color:#4c61cf; }
.trust-strip { background:var(--ink); color:white; padding:25px 34px 23px; text-align:center; }
.trust-strip p { margin:0 0 17px; color:#8f9590; text-transform:uppercase; font-size:9px; font-weight:800; letter-spacing:.16em; }
.category-row { max-width:1000px;margin:auto;display:flex;align-items:center;justify-content:space-between;color:#e8ebe7;font-family:Georgia,serif;font-size:15px;letter-spacing:.08em }.category-row i{width:3px;height:3px;border-radius:50%;background:var(--lime)}
.section { max-width:1200px; margin:0 auto; padding:120px 34px; }
.section-kicker { color:#687169; font-size:10px; font-weight:900; letter-spacing:.16em; }
.section-kicker.light { color:#a6aca7; }
.section-heading { display:flex;justify-content:space-between;align-items:flex-end;margin:22px 0 58px;gap:40px; }.section-heading h2,.model-copy h2 { font-size:clamp(49px,5vw,72px); }.section-heading p{max-width:420px;margin:0 0 6px;color:#6c716d;line-height:1.7;font-size:15px}.section-heading.compact{margin-bottom:55px}
.steps-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }.step-card { background:#faf9f5;border:1px solid var(--line);border-radius:17px;padding:22px;position:relative;overflow:hidden;min-height:400px; }.step-card.featured { background:#e9f5cb; }.step-num{font-size:10px;font-weight:900;color:#7a807a}.step-card h3{font-family:Georgia,serif;font-size:25px;margin:25px 0 9px;letter-spacing:-.02em}.step-card p{font-size:13px;color:#6d726e;line-height:1.6;margin:0}.shopify-visual,.scene-swatches,.format-visual{height:220px;display:flex;align-items:center;justify-content:center;margin-top:8px}.shopify-visual{height:145px;margin:46px 10px 37px;padding:16px;border:1px solid #b7c49a;border-radius:15px;background:rgba(255,255,255,.62);justify-content:flex-start;gap:12px;box-shadow:0 12px 30px rgba(54,72,24,.07)}.shopify-badge{width:45px;height:45px;border-radius:12px;background:#95bf47;color:white;display:grid;place-items:center;font-family:Georgia,serif;font-size:24px;font-weight:700}.shopify-visual div{display:grid;gap:5px}.shopify-visual b{font-size:12px}.shopify-visual small{font-size:9px;color:#697066}.shopify-visual i{margin-left:auto;font-style:normal;font-size:18px}.scene-swatches{gap:8px}.scene-swatches span{width:28%;height:150px;border-radius:13px;background:linear-gradient(155deg,#e7e3dc,#b7b0a3);font-size:9px;font-weight:800;display:flex;align-items:flex-end;justify-content:center;padding-bottom:13px;color:white;text-shadow:0 1px 4px #333}.scene-swatches span:nth-child(2){background:linear-gradient(155deg,#b6c7a0,#4d704a)}.scene-swatches span:nth-child(3){background:linear-gradient(155deg,#b8a47f,#322d25)}.format-visual{gap:10px}.format-visual span{display:block;border-radius:9px;background:#e2e4ee;border:1px solid #c8cad4;box-shadow:0 7px 15px rgba(30,32,35,.08)}.landscape{width:120px;height:80px}.portrait{width:75px;height:120px;background:#dfe9c8!important}.square{width:88px;height:88px;background:#d7dcf8!important}
.model-section { background:var(--ink); color:white; padding:120px max(34px,calc((100vw - 1132px)/2)); display:grid;grid-template-columns:1fr 1fr;gap:110px;align-items:center }.model-copy p{color:#a9afaa;line-height:1.7;font-size:15px;max-width:500px;margin:25px 0}.model-copy ul,.price-card ul{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:15px}.model-copy li,.price-card li{display:flex;align-items:center;gap:10px;font-size:13px}.model-copy li svg{color:var(--lime)}
.model-panel{background:#262a27;border:1px solid #3a3e3b;border-radius:20px;padding:24px;box-shadow:0 25px 70px rgba(0,0,0,.25)}.panel-label{font-size:9px!important;letter-spacing:.15em!important;font-weight:900!important;color:#8d938e!important;margin:0 0 15px!important}.model-list{display:grid;gap:10px}.model-option{display:grid;grid-template-columns:45px 1fr auto;align-items:center;gap:12px;padding:13px;border:1px solid #3a3f3b;border-radius:13px;background:#202321}.model-option.active{border-color:#a8ce35;background:#292f23}.model-icon{width:43px;height:43px;border-radius:11px;display:grid;place-items:center;color:#161916}.lime{background:var(--lime)}.blue{background:#91a4ff}.pink{background:#efadd4}.model-option strong,.model-option small{display:block}.model-option strong{font-size:13px}.model-option small{font-size:10px;color:#969c97;margin-top:4px}.model-option b{font-size:9px;text-transform:uppercase;color:#777d78}.active b{color:var(--lime)}.tip{margin-top:16px;background:#1d201e;border-radius:10px;padding:12px;color:#9da29e;font-size:10px;line-height:1.5}.tip span{color:var(--lime);font-weight:900;margin-right:5px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.feature-grid article{background:#faf9f5;border:1px solid var(--line);border-radius:17px;padding:28px;min-height:270px}.feature-symbol{width:42px;height:42px;background:#e9eddf;border-radius:12px;display:grid;place-items:center;font-size:20px}.feature-grid h3{font-family:Georgia,serif;font-size:23px;margin:57px 0 12px}.feature-grid p{font-size:13px;color:#6b706c;line-height:1.65;margin:0}.feature-grid .wide-feature{grid-column:1/-1;min-height:190px;display:grid;grid-template-columns:48px 1fr 240px;align-items:center;gap:30px}.wide-feature h3{margin:0 0 9px}.metric{border-left:1px solid var(--line);padding-left:42px}.metric strong,.metric small{display:block}.metric strong{font-family:Georgia,serif;font-size:60px;font-weight:400;line-height:1}.metric strong span{font-size:25px;color:#777}.metric small{text-transform:uppercase;font-size:8px;letter-spacing:.12em;color:#777;margin-top:8px}
.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .55s ease,transform .55s ease; }
.js .reveal.is-visible { opacity:1; transform:none; }
.final-cta{text-align:center;background:#596fea;color:white;padding:100px 24px}.cta-spark{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;background:var(--lime);color:var(--ink);margin:0 auto 25px;transform:rotate(-4deg)}.final-cta>p{font-size:9px;font-weight:900;letter-spacing:.18em}.final-cta h2{font-size:clamp(55px,6vw,85px);margin:22px 0 32px}.final-cta .button{color:var(--ink)}.final-cta small{display:block;margin-top:18px;color:#cbd2ff;font-size:10px}
footer{max-width:1200px;margin:auto;padding:38px 34px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}footer p{font-size:11px;color:#767b77}footer>div{display:flex;gap:22px;font-size:11px;font-weight:700}footer>small{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;color:#8a8f8a;font-size:9px}
@media (max-width:900px){.menu-toggle{display:block}.nav-cta{display:none}.nav-links{display:none;position:absolute;top:68px;left:18px;right:18px;padding:20px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 18px 40px rgba(23,26,24,.14);flex-direction:column;gap:18px}.nav-links.is-open{display:flex}.hero{grid-template-columns:1fr;padding-top:70px;gap:55px}.hero-copy{max-width:690px}.hero-stage{max-width:700px}.model-section{grid-template-columns:1fr;gap:60px}.steps-grid,.feature-grid{grid-template-columns:1fr}.feature-grid .wide-feature{grid-column:auto;grid-template-columns:48px 1fr}.metric{grid-column:2;border:0;padding:0}.section-heading{align-items:flex-start;flex-direction:column}.section-heading p{max-width:600px}footer{grid-template-columns:1fr auto}footer p{display:none}}
@media (max-width:600px){.nav-shell{height:66px;padding:0 18px}.brand{font-size:18px}.brand-mark{width:29px;height:29px}.hero{padding:58px 18px 70px}.hero h1{font-size:55px}.hero-lede{font-size:16px}.hero-actions{align-items:stretch;flex-direction:column}.button{width:100%}.hero-stage{transform:none}.image-frame{height:300px}.chip-one{right:-8px}.chip-two{left:-8px}.trust-strip{padding-left:18px;padding-right:18px}.category-row{justify-content:center;gap:17px;flex-wrap:wrap}.category-row span{font-size:11px}.category-row i{display:none}.section{padding:84px 18px}.section-heading h2,.model-copy h2{font-size:48px}.steps-grid{gap:10px}.model-section{padding:85px 18px}.feature-grid .wide-feature{grid-template-columns:1fr}.metric{grid-column:auto}.final-cta{padding:80px 18px}.final-cta h2{font-size:51px}footer{padding:30px 18px;grid-template-columns:1fr}footer>div{flex-wrap:wrap}.floating-chip{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}.reveal{opacity:1;transform:none;transition:none}}