:root{--paper:#f4f3f0;--ink:#1c1b2e;--mute:#585670;--blue:#4f6bf5;--purple:#a96cf0;--orange:#ff5a28}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;padding-top:env(safe-area-inset-top,0px)}
a{color:inherit}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:800;line-height:1.05;letter-spacing:-.035em;margin:0}
h1{font-size:clamp(2.6rem,7vw,4.8rem)}
h2{font-size:clamp(1.8rem,4vw,2.7rem);margin-bottom:20px}
h3{font-size:1.4rem;letter-spacing:-.02em}
p{margin:0 0 14px}
mark{background:var(--orange);color:#fff;padding:0 .14em}
.mute{color:var(--mute)}

header .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:22px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none}
nav a{margin-left:26px;font-weight:600;text-decoration:none}
nav a:hover,nav a.on{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:7px}

.btn{display:inline-block;padding:13px 22px;border:2px solid var(--ink);background:var(--orange);color:#fff;font-weight:700;text-decoration:none;box-shadow:4px 4px 0 var(--ink);margin:10px 14px 10px 0}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.plain{background:transparent;color:var(--ink)}

.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center;padding:56px 0 72px}
.hero p.lead{font-size:1.2rem;max-width:560px;margin:24px 0 10px}
.hero img{width:100%;max-width:380px;justify-self:center}

.row{display:grid;grid-template-columns:80px 1fr;gap:20px;border-top:2px solid var(--ink);padding:28px 0}
.row .n{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:2rem;color:var(--orange)}
.row p{max-width:620px;margin:8px 0 0;color:var(--mute)}

.block{background:var(--blue);color:#fff;padding:68px 0;margin-top:72px}
.block .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:30px}
.block h3{margin-bottom:8px}
.block p{opacity:.92}
.cta{background:var(--orange);color:#fff;padding:64px 0}
.cta .btn{background:var(--ink);box-shadow:4px 4px 0 #fff;border-color:var(--ink)}

.top{padding:48px 0 36px}
.top p{font-size:1.15rem;max-width:620px;margin-top:20px}

.plan{display:grid;grid-template-columns:1.1fr 1.5fr auto;gap:28px;align-items:start;background:#fff;border:2px solid var(--ink);padding:28px;margin-bottom:22px;position:relative}
.plan.pick{background:#efe6fd;box-shadow:8px 8px 0 var(--purple)}
.plan ul{margin:0;padding-left:18px;color:var(--mute)}
.plan .price{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:2.4rem;line-height:1;text-align:right}
.plan .price small{display:block;font-family:system-ui,sans-serif;font-size:.8rem;color:var(--mute);margin-top:6px}
.stamp{position:absolute;top:-14px;left:24px;background:var(--orange);color:#fff;font-weight:700;font-size:.8rem;padding:3px 10px;transform:rotate(-3deg)}
.line{display:flex;gap:10px;align-items:baseline;padding:14px 0;border-bottom:2px dotted var(--ink)}
.line b{white-space:nowrap}.line span{flex:1;color:var(--mute);font-size:.95rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:64px}

.person{display:grid;grid-template-columns:14px 1fr;gap:22px;margin-bottom:34px}
.person i{background:var(--blue)}
.person:nth-child(2) i{background:var(--purple)}.person:nth-child(3) i{background:var(--orange)}
.person small{font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.person p{margin:8px 0 0;max-width:560px}

footer{border-top:2px solid var(--ink);padding:26px 0;font-size:.9rem;color:var(--mute)}
@media(max-width:760px){.hero,.plan,.two,.block .steps{grid-template-columns:1fr}.hero img{max-width:220px}.plan .price{text-align:left}.row{grid-template-columns:50px 1fr}nav a{margin-left:16px}.logo span{display:none}}

/* motion + interaction */
html{scroll-padding-top:76px}
header{position:sticky;top:0;z-index:20;background:var(--paper);transition:box-shadow .2s}
header.scrolled{box-shadow:0 2px 0 var(--ink)}
.progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--orange);z-index:30}
[data-r]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
[data-r].in{opacity:1;transform:none}
.hero h1,.hero .lead,.hero .btn{animation:up .8s cubic-bezier(.2,.8,.2,1) both}
.hero .lead{animation-delay:.12s}.hero .btn{animation-delay:.24s}
@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.art{width:100%;max-width:380px;justify-self:center;overflow:visible}
.art polygon{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.art .a1{fill:#4f6bf5;animation:s1 1s cubic-bezier(.2,.8,.2,1) both}
.art .a2{fill:#a96cf0;animation:s2 1s .15s cubic-bezier(.2,.8,.2,1) both}
.art .a3{fill:#ff5a28;animation:s3 1s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes s1{from{transform:translate(-30px,-24px);opacity:0}}
@keyframes s2{from{transform:translate(0,-34px);opacity:0}}
@keyframes s3{from{transform:translate(30px,-24px);opacity:0}}
.art:hover .a1{transform:translate(-4px,-3px)}.art:hover .a2{transform:translate(0,-5px)}.art:hover .a3{transform:translate(4px,-3px)}
.marquee{overflow:hidden;background:var(--ink);color:var(--paper);border-block:2px solid var(--ink);font:700 .95rem ui-monospace,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase}
.marquee div{display:flex;width:max-content;padding:12px 0;animation:mq 30s linear infinite}
.marquee span{padding-right:2.2em;white-space:nowrap}.marquee span:nth-child(3n+1){color:var(--orange)}
.marquee:hover div{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.lab{font:700 .82rem ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:72px 0 10px}
.lab:after{content:"\258C";color:var(--orange);margin-left:4px;animation:bl 1s steps(2) infinite}
.block .lab{color:#fff;margin-top:0}
@keyframes bl{50%{opacity:0}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;border-top:2px solid var(--ink);padding-top:28px}
.stats b{display:block;font:700 3.2rem/1 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--blue)}.stats div:nth-child(2) b{color:var(--purple)}.stats div:nth-child(3) b{color:var(--orange)}
.stats span{color:var(--mute);font-size:.95rem}
.cf{display:grid;gap:12px;max-width:560px;margin-top:22px}
.cf input,.cf textarea{font:inherit;padding:12px 14px;border:2px solid var(--ink);background:#fff;color:var(--ink);width:100%}
.cf input:focus,.cf textarea:focus{outline:3px solid var(--ink);outline-offset:2px}
.plan{transition:transform .25s,box-shadow .25s}.plan:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.plan.pick:hover{box-shadow:11px 11px 0 var(--purple)}
.est{margin-top:20px}.est .lab{margin-top:64px}
.estgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start}
.est label{display:block;font-weight:600;margin-bottom:14px}.est .ck{display:flex;gap:10px;align-items:center;cursor:pointer}
.est input[type=range]{width:100%;accent-color:var(--orange);margin-top:8px;display:block}
.est input[type=checkbox]{width:20px;height:20px;accent-color:var(--orange)}
.res{background:var(--blue);color:#fff;padding:26px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.res .big{font:700 3rem/1.1 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;margin:6px 0}.res p{margin:4px 0;opacity:.95}.res small{text-transform:uppercase;letter-spacing:.08em;font-weight:700;opacity:.85}
.res .big.tick{animation:tk .3s}@keyframes tk{from{transform:translateY(6px);opacity:.4}}
details{border-top:2px solid var(--ink);padding:18px 0}details:last-of-type{border-bottom:2px solid var(--ink)}
summary{cursor:pointer;font:700 1.2rem Inter,system-ui,-apple-system,"Segoe UI",sans-serif;list-style:none;display:flex;justify-content:space-between}
summary::-webkit-details-marker{display:none}summary:after{content:"+";color:var(--orange);font-size:1.5rem;line-height:1;transition:transform .25s}
details[open] summary:after{transform:rotate(45deg)}details p{margin:12px 0 0;max-width:640px;color:var(--mute);animation:up .4s both}
@media(max-width:760px){.stats,.estgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}[data-r]{opacity:1;transform:none}}

/* contact section layout */
.cta-in{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.cta .cf{margin-top:0;max-width:none}
.cta-in h2{margin-bottom:14px}
@media(max-width:760px){.cta-in{grid-template-columns:1fr;gap:24px}}

/* fix: highlight no longer covers descenders (g, y) of the line above */
h1{line-height:1.14}h2{line-height:1.15}h3{line-height:1.2}
mark{background:linear-gradient(var(--orange),var(--orange)) 0 72%/100% 82% no-repeat;color:#fff;padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.marquee .set{display:flex;flex-shrink:0;min-width:100vw;justify-content:space-around;margin:0}

/* Mobile fixes: paste at the very bottom of css/style.css */
.hero{padding-left:24px;padding-right:24px}
@media(max-width:760px){
  .hero{padding-top:28px;padding-bottom:44px;gap:28px}
  .hero h1{font-size:2.5rem}
  .hero p.lead{font-size:1.05rem}
  .art{max-width:190px}
  .btn{display:block;text-align:center;margin:12px 4px 12px 0}
  header .wrap{padding-top:14px;padding-bottom:14px}
  .lab{margin-top:48px}
  .row{padding:22px 0}
  .stats{gap:18px;margin-top:40px}
  .stats b{font-size:2.6rem}
  .block{padding:48px 0;margin-top:48px}
  .cta{padding:48px 0}
  .top{padding:28px 0 24px}
}