@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Manrope:wght@400;500;700;800&display=swap');

:root{
  --ink:#101012;
  --paper:#f3f0e8;
  --acid:#d8ff3d;
  --orange:#ff5c2b;
  --max:1160px;
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--acid);color:var(--ink)}
body{font-family:'Manrope',-apple-system,sans-serif;background:var(--paper);color:var(--ink);line-height:1.55;font-size:17px}
h1,h2,h3,.logo,.btn{font-family:'Unbounded',sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
header{background:var(--ink);color:var(--paper);position:sticky;top:0;z-index:50;border-bottom:1px solid #2a2a2e}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-weight:900;font-size:20px;letter-spacing:-.5px;text-transform:uppercase}
.logo i{font-style:normal;color:var(--acid)}
.nav nav{display:flex;gap:4px}
.nav nav a{font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;opacity:.75;transition:.2s}
.nav nav a:hover{opacity:1}
.nav nav a.active{background:var(--acid);color:var(--ink);opacity:1}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--paper);padding:84px 0 0;overflow:hidden;position:relative}
.kicker{display:inline-block;background:var(--orange);color:#fff;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:7px 16px;transform:rotate(-2deg);margin-bottom:28px}
.hero h1{font-size:clamp(36px,6.4vw,76px);font-weight:900;line-height:1.04;letter-spacing:-2px;text-transform:uppercase;max-width:900px}
.hero h1 .hl{color:var(--acid);position:relative;white-space:nowrap}
.hero p.lead{margin-top:26px;font-size:20px;max-width:560px;opacity:.8}
.hero-cta{margin:38px 0 72px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--acid);color:var(--ink);font-weight:700;font-size:15px;padding:18px 34px;border:2px solid var(--acid);transition:.15s;text-transform:uppercase;letter-spacing:.02em}
.btn:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--orange)}
.btn.ghost{background:transparent;color:var(--paper);border-color:#4a4a50}
.btn.ghost:hover{border-color:var(--paper);box-shadow:6px 6px 0 var(--acid)}
.btn.dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.dark:hover{box-shadow:6px 6px 0 var(--orange)}

/* ---------- marquee ---------- */
.marquee{background:var(--acid);color:var(--ink);overflow:hidden;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-1deg) scale(1.02)}
.marquee-track{display:flex;white-space:nowrap;animation:scroll 22s linear infinite;font-family:'Unbounded';font-weight:700;font-size:15px;text-transform:uppercase;padding:13px 0}
.marquee-track span{padding:0 18px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:88px 0}
.sec-head{display:flex;align-items:baseline;gap:20px;margin-bottom:48px;flex-wrap:wrap}
.sec-num{font-family:'Unbounded';font-weight:900;font-size:15px;color:var(--orange)}
h2{font-size:clamp(28px,3.6vw,44px);font-weight:900;text-transform:uppercase;letter-spacing:-1px;line-height:1.1}

/* ---------- cards ---------- */
.grid{display:grid;gap:0}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.card{background:var(--paper);border:2px solid var(--ink);padding:34px 28px;margin:-1px 0 0 -1px;transition:.15s;position:relative}
.card:hover{background:#fff;z-index:2;box-shadow:8px 8px 0 var(--ink)}
.card .idx{font-family:'Unbounded';font-weight:900;font-size:14px;color:var(--orange);display:block;margin-bottom:16px}
.card h3{font-size:19px;font-weight:700;margin-bottom:12px;line-height:1.25}
.card p{font-size:15px;opacity:.75}
.card .price{font-family:'Unbounded';font-weight:700;font-size:21px;margin-top:20px}
.card .tag{position:absolute;top:-13px;right:18px;background:var(--orange);color:#fff;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em;padding:5px 12px;transform:rotate(2deg)}

/* dark section */
section.dark{background:var(--ink);color:var(--paper)}
section.dark .card{background:var(--ink);border-color:#3a3a40;color:var(--paper)}
section.dark .card:hover{background:#1a1a1e;box-shadow:8px 8px 0 var(--acid)}

/* ---------- steps ---------- */
.step{display:grid;grid-template-columns:90px 1fr;gap:26px;padding:34px 0;border-top:2px solid var(--ink);align-items:start}
.step:last-of-type{border-bottom:2px solid var(--ink)}
.step .n{font-family:'Unbounded';font-weight:900;font-size:44px;line-height:1;color:transparent;-webkit-text-stroke:2px var(--ink)}
.step h3{font-size:20px;margin-bottom:6px}
.step p{opacity:.75;max-width:640px}
.dark .step{border-color:#3a3a40}
.dark .step .n{-webkit-text-stroke:2px var(--acid)}

/* ---------- big CTA ---------- */
.bigcta{background:var(--orange);color:#fff;padding:96px 0;text-align:center}
.bigcta h2{font-size:clamp(30px,5vw,58px);margin-bottom:14px}
.bigcta p{font-size:19px;opacity:.92;margin-bottom:36px}
.bigcta .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bigcta .btn:hover{box-shadow:6px 6px 0 var(--acid)}

/* ---------- contacts ---------- */
.contact-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:30px 0;border-top:2px solid var(--ink);flex-wrap:wrap}
.contact-row:last-of-type{border-bottom:2px solid var(--ink)}
.contact-row .lbl{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.12em;opacity:.55}
.contact-row .val{font-family:'Unbounded';font-weight:700;font-size:clamp(18px,3vw,28px)}
.contact-row .val a:hover{color:var(--orange)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper);padding:64px 0 32px;overflow:hidden}
.foot-logo{font-family:'Unbounded';font-weight:900;font-size:clamp(48px,11vw,150px);line-height:.95;text-transform:uppercase;letter-spacing:-3px;color:transparent;-webkit-text-stroke:1.5px #3f3f46;margin-bottom:36px;user-select:none}
.foot-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;opacity:.65}
.foot-row a:hover{color:var(--acid)}

/* ---------- page hero (inner) ---------- */
.page-hero{background:var(--ink);color:var(--paper);padding:72px 0}
.page-hero h1{font-size:clamp(32px,5.4vw,62px);font-weight:900;text-transform:uppercase;letter-spacing:-1.5px;line-height:1.05}
.page-hero h1 .hl{color:var(--acid)}
.page-hero p{margin-top:18px;font-size:19px;opacity:.8;max-width:600px}

/* ---------- animations ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.hero .kicker{animation:drop .6s cubic-bezier(.2,.7,.3,1) both}
.hero h1{animation:rise .8s .1s cubic-bezier(.2,.7,.3,1) both}
.hero p.lead{animation:rise .8s .25s cubic-bezier(.2,.7,.3,1) both}
.hero-cta{animation:rise .8s .4s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:rotate(-2deg) translateY(-18px)}to{opacity:1;transform:rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){.hero .kicker,.hero h1,.hero p.lead,.hero-cta{animation:none}}

.card{will-change:transform;transition:transform .25s ease,box-shadow .2s ease,background .2s ease,opacity .7s cubic-bezier(.2,.7,.3,1)}

/* ---------- calculator ---------- */
.calc-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start}
.calc-row{display:flex;gap:14px;align-items:center;border:2px solid var(--ink);padding:18px 20px;margin:-2px 0 0;cursor:pointer;background:var(--paper);transition:background .15s}
.calc-row:hover{background:#fff}
.calc-row input{width:22px;height:22px;accent-color:var(--ink);flex:none;cursor:pointer}
.calc-row b{display:block;font-size:16px}
.calc-row em{font-style:normal;font-size:13px;opacity:.6}
.calc-result{border:2px solid var(--ink);background:var(--ink);color:var(--paper);padding:28px}
.calc-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid #3a3a40}
.calc-line b{font-family:'Unbounded';font-size:clamp(16px,2vw,21px);color:var(--acid);white-space:nowrap}
.calc-result p{font-size:13px;opacity:.65;margin:16px 0 20px}
@media(max-width:760px){.calc-grid{grid-template-columns:1fr}}

/* ---------- ai widget ---------- */
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.ai-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ai-fields label{font-size:13px;font-weight:700;display:flex;flex-direction:column;gap:6px;opacity:.9}
.ai-fields textarea{resize:vertical;font-family:inherit}
.ai-fields input,.ai-fields select,.ai-fields textarea{background:#1a1a1e;border:2px solid #3a3a40;color:var(--paper);padding:12px 14px;font:inherit;font-size:15px;width:100%}
.ai-fields input:focus,.ai-fields select:focus{outline:none;border-color:var(--acid)}
.ai-wide{grid-column:1/-1}
.ai-fields .btn{grid-column:1/-1;border:none;cursor:pointer;margin-top:4px}
.ai-result{border:2px solid var(--acid);padding:26px;min-height:280px;font-size:15px;line-height:1.7;white-space:pre-line}
.ai-placeholder{opacity:.45}
.ai-result.loading{display:flex;align-items:center;justify-content:center;font-family:'Unbounded';font-size:15px;color:var(--acid)}
.ai-result .btn{margin-top:18px;display:inline-block}
@media(max-width:760px){.ai-grid{grid-template-columns:1fr}.ai-fields{grid-template-columns:1fr}}

/* ---------- founder ---------- */
.founder-box{max-width:720px;border-left:6px solid var(--acid);padding-left:28px}
.founder-lead{font-family:'Unbounded';font-weight:700;font-size:20px;margin-bottom:14px}
.founder-box p+p{margin-top:12px}

/* ---------- faq ---------- */
.faq{border-bottom:2px solid #3a3a40;padding:6px 0}
.faq summary{font-family:'Unbounded';font-weight:700;font-size:17px;padding:18px 36px 18px 0;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:26px;color:var(--acid);transition:transform .2s}
.faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{padding:0 0 20px;opacity:.8;max-width:680px}

/* ---------- 3D holder ---------- */
.hero .wrap{position:relative;z-index:2}
#hero3d{position:absolute;top:0;right:-4%;width:48%;height:calc(100% - 50px);z-index:1;pointer-events:none}
#hero3d canvas{display:block;width:100%!important;height:100%!important}
@media(max-width:760px){#hero3d{display:none}}

@media(max-width:700px){
  .nav nav a{padding:7px 9px;font-size:12.5px}
  .step{grid-template-columns:56px 1fr;gap:16px}
  .step .n{font-size:30px}
  section{padding:60px 0}
}