/* ============ Design tokens ============ */
:root{
  --bg:#FAF6EF; --surface:#FFFFFF; --surface-alt:#F2EAD9;
  --text:#2A2318; --text-muted:#6E6350;
  --accent:#BE6A2C; --accent-ink:#8A4718; --accent-soft:#F1DDC2;
  --border:#E5DAC3; --good:#3F7D54;
  --shadow: 0 1px 2px rgba(42,35,24,.07), 0 12px 32px -14px rgba(42,35,24,.22);
  --radius: 16px;
  color-scheme: light;
}
:root[data-theme="dark"]{
  --bg:#1A1510; --surface:#211B14; --surface-alt:#28211A;
  --text:#F1E9D8; --text-muted:#B3A68D;
  --accent:#E5924F; --accent-ink:#F3B27E; --accent-soft:#3B2D1D;
  --border:#3A3023; --good:#79C08E;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 36px -16px rgba(0,0,0,.6);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition: background .4s ease, color .4s ease;
}
h1,h2,h3{font-family:'Fraunces', Georgia, serif; font-weight:600; text-wrap:balance; margin:0 0 .4em;}
p{margin:0 0 1em; max-width:62ch;}
a{color:var(--accent-ink);}
.muted{color:var(--text-muted);}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
section{padding:110px 0;}
@media (max-width:720px){ section{padding:70px 0;} }
img,svg{max-width:100%;}

/* ============ Scroll progress ============ */
.scroll-progress{position:fixed; top:0; left:0; width:100%; height:3px; background:transparent; z-index:60;}
.scroll-progress span{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-ink)); transition:width .08s linear;}

/* ============ Custom cursor ============ */
.cursor-dot,.cursor-ring{position:fixed; top:0; left:0; pointer-events:none; z-index:70; border-radius:50%; transform:translate(-50%,-50%); will-change:transform;}
.cursor-dot{width:6px; height:6px; background:var(--accent); opacity:0; transition:opacity .2s;}
.cursor-ring{width:34px; height:34px; border:1.5px solid var(--accent); opacity:0; transition:opacity .2s, width .25s ease, height .25s ease, border-color .25s ease;}
body.cursor-ready .cursor-dot, body.cursor-ready .cursor-ring{opacity:1;}
body.cursor-hover .cursor-ring{width:54px; height:54px; border-color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 12%, transparent);}
@media (pointer:coarse){ .cursor-dot,.cursor-ring{display:none;} }

/* ============ Nav ============ */
.topbar{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:20px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);}
.brand-mark{width:28px; height:28px; flex-shrink:0;}
.brand-word{font-family:'Fraunces',serif; font-weight:700; font-size:1.25rem;}
.brand-word-light{font-weight:400; color:var(--accent-ink);}
.navlinks{display:flex; gap:26px; font-size:.94rem; font-weight:600;}
.navlinks a{color:var(--text); text-decoration:none; position:relative;}
.navlinks a::after{content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--accent); transition:width .25s ease;}
.navlinks a:hover::after{width:100%;}
.nav-right{display:flex; align-items:center; gap:14px;}
.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); position:relative;
}
.theme-toggle svg{width:18px; height:18px; position:absolute; transition:opacity .35s ease, transform .5s ease;}
.theme-toggle .icon-moon{opacity:0; transform:rotate(-90deg) scale(.5);}
:root[data-theme="dark"] .theme-toggle .icon-sun{opacity:0; transform:rotate(90deg) scale(.5);}
:root[data-theme="dark"] .theme-toggle .icon-moon{opacity:1; transform:rotate(0) scale(1);}
.nav-cta{background:var(--accent); color:#fff; padding:9px 18px; border-radius:8px; font-weight:600; font-size:.92rem; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease;}
.nav-cta:hover{transform:translateY(-2px); box-shadow:0 8px 20px -8px var(--accent);}
@media (max-width:760px){ .navlinks{display:none;} }
@media (max-width:420px){ .nav-cta{padding:9px 14px; font-size:.84rem;} .brand-word{font-size:1.05rem;} }

/* ============ Hero ============ */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border); isolation:isolate;}
.hero-bg{position:absolute; inset:0; z-index:-1; overflow:hidden;}
.blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; mix-blend-mode:normal;}
.blob-1{width:480px; height:480px; background:var(--accent-soft); top:-180px; right:-120px; animation:float1 22s ease-in-out infinite;}
.blob-2{width:360px; height:360px; background:var(--accent); opacity:.18; bottom:-140px; left:-80px; animation:float2 26s ease-in-out infinite;}
.blob-3{width:260px; height:260px; background:var(--good); opacity:.10; top:30%; left:45%; animation:float3 30s ease-in-out infinite;}
@keyframes float1{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-40px,50px) scale(1.08);} }
@keyframes float2{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(50px,-30px) scale(1.12);} }
@keyframes float3{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(-30px,-40px);} }
.grain{position:absolute; inset:0; opacity:.03; pointer-events:none;}

.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; padding:120px 24px 90px;}
@media (max-width:880px){ .hero-grid{grid-template-columns:1fr; padding:90px 24px 60px;} }

.eyebrow{font-family:'JetBrains Mono',monospace; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:20px; display:flex; align-items:center; gap:9px;}
.eyebrow-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(1.3);} }

.hero-title{font-size:clamp(2.4rem,5.4vw,3.8rem); line-height:1.08; letter-spacing:-.01em;}
.hero-title .line{display:block; overflow:hidden;}
.hero-title .word{display:inline-block; opacity:0; transform:translateY(110%) rotate(2deg); animation:wordUp .8s cubic-bezier(.22,1,.36,1) forwards;}
.hero-title .word-em{font-style:italic; color:var(--accent-ink); font-weight:500;}
.hero-title .line:nth-child(1) .word:nth-child(1){animation-delay:.05s;}
.hero-title .line:nth-child(1) .word:nth-child(2){animation-delay:.12s;}
.hero-title .line:nth-child(1) .word:nth-child(3){animation-delay:.19s;}
.hero-title .line:nth-child(2) .word:nth-child(1){animation-delay:.26s;}
.hero-title .line:nth-child(2) .word:nth-child(2){animation-delay:.33s;}
@keyframes wordUp{ to{ opacity:1; transform:translateY(0) rotate(0);} }

.hero-sub{font-size:1.12rem; color:var(--text-muted); max-width:46ch; margin-top:18px;}
.hero-ctas{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}

.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:10px; font-weight:600; text-decoration:none; font-size:.98rem; position:relative; overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;}
.btn span{position:relative; z-index:1;}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 10px 26px -14px var(--accent);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 16px 32px -14px var(--accent);}
.btn-secondary{background:transparent; color:var(--text); border:1px solid var(--border);}
.btn-secondary:hover{transform:translateY(-3px); border-color:var(--accent); color:var(--accent-ink);}
.btn-lg{padding:16px 30px; font-size:1.02rem;}
.magnetic{will-change:transform;}

.hero-art{display:flex; align-items:center; justify-content:center;}
.hero-mark{width:min(100%,300px); height:auto; animation:spinSlow 40s linear infinite;}
@keyframes spinSlow{ to{ transform:rotate(360deg);} }
.hero-mark-arc{stroke-dasharray:430; stroke-dashoffset:430; animation:drawArc 1.6s cubic-bezier(.22,1,.36,1) .4s forwards;}
.hero-mark-bar{stroke-dasharray:62; stroke-dashoffset:62; animation:drawArc 1s cubic-bezier(.22,1,.36,1) 1.7s forwards;}
@keyframes drawArc{ to{ stroke-dashoffset:0;} }

.scroll-cue{position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);}
.scroll-cue-line{width:1px; height:34px; background:linear-gradient(var(--accent),transparent); animation:scrollCue 1.8s ease-in-out infinite;}
@keyframes scrollCue{ 0%{opacity:0; transform:scaleY(.3); transform-origin:top;} 50%{opacity:1; transform:scaleY(1); transform-origin:top;} 100%{opacity:0; transform:scaleY(.3); transform-origin:bottom;} }

/* ============ Reveal on scroll ============ */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ============ Marquee ============ */
.marquee{border-bottom:1px solid var(--border); border-top:1px solid var(--border); background:var(--surface-alt); overflow:hidden; padding:16px 0;}
.marquee-track{display:flex; width:max-content; gap:14px; animation:marquee 26s linear infinite; font-family:'JetBrains Mono',monospace; font-size:.82rem; letter-spacing:.04em; color:var(--text-muted); white-space:nowrap;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track .dot{color:var(--accent);}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============ Sections / cards ============ */
.section-head{max-width:62ch; margin-bottom:46px;}
.section-eyebrow{font-family:'JetBrains Mono',monospace; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:12px;}
h2{font-size:clamp(1.7rem,3.2vw,2.3rem);}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:980px){ .cards{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .cards{grid-template-columns:1fr;} }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px 24px; box-shadow:var(--shadow); position:relative; transform-style:preserve-3d; will-change:transform;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.card:hover{border-color:var(--accent);}
.card::before{
  content:""; position:absolute; inset:0; border-radius:var(--radius); opacity:0; pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  transition:opacity .3s ease;
}
.card:hover::before{opacity:1;}
.card-num{font-family:'JetBrains Mono',monospace; color:var(--accent); font-size:.8rem; margin-bottom:14px; display:block;}
.card h3{font-size:1.1rem; margin-bottom:8px;}
.card p{font-size:.93rem; color:var(--text-muted); margin:0;}

/* ============ Origin ============ */
.origin{position:relative; overflow:hidden; background:var(--surface-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.origin-canvas{position:absolute; inset:0; width:100%; height:100%; opacity:.5;}
.origin-wrap{position:relative; z-index:1;}
.origin-copy{max-width:72ch;}
.origin-copy p{font-size:1.05rem;}
.origin-line{margin-top:28px; padding-top:24px; border-top:1px solid var(--border); font-family:'Fraunces',serif; font-size:1.2rem; font-style:italic; color:var(--text);}
.origin-line span{color:var(--accent-ink);}

/* ============ Pricing ============ */
.pricing-soft{background:var(--surface-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.pricing-list{max-width:72ch; border-top:1px solid var(--border);}
.pricing-row{display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:18px 0; border-bottom:1px solid var(--border);}
.pricing-label{font-size:.98rem; color:var(--text);}
.pricing-range{font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--text-muted); text-align:right; white-space:nowrap;}
@media (max-width:560px){
  .pricing-row{flex-direction:column; align-items:flex-start; gap:4px;}
  .pricing-range{text-align:left;}
}

/* ============ FAQ accordion ============ */
.accordion{border-top:1px solid var(--border);}
.accordion-item{border-bottom:1px solid var(--border);}
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:none; border:none; padding:22px 4px; text-align:left; cursor:pointer;
  font-family:'Fraunces',serif; font-size:1.08rem; font-weight:500; color:var(--text);
}
.accordion-icon{width:18px; height:18px; stroke:var(--accent); stroke-width:2; fill:none; flex-shrink:0; transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.accordion-item.open .accordion-icon{transform:rotate(45deg);}
.accordion-panel{max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.2,.8,.2,1);}
.accordion-panel p{padding:0 4px 22px; color:var(--text-muted); max-width:62ch; margin:0;}

/* ============ Approach / timeline ============ */
.approach{background:var(--surface-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.timeline{position:relative; padding-left:38px; display:flex; flex-direction:column; gap:40px;}
.timeline-line{position:absolute; left:9px; top:4px; bottom:4px; width:2px; background:var(--border); border-radius:2px; overflow:hidden;}
.timeline-fill{display:block; width:100%; height:0%; background:linear-gradient(var(--accent),var(--accent-ink)); transition:height .1s linear;}
.timeline-item{display:flex; gap:20px; position:relative;}
.timeline-dot{
  position:absolute; left:-38px; top:0; width:20px; height:20px; border-radius:50%;
  background:var(--surface); border:2px solid var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:.68rem; font-weight:700;
}
.timeline-item h3{font-size:1.05rem; margin-bottom:5px;}
.timeline-item p{font-size:.93rem;}

/* ============ About ============ */
.about-wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
@media (max-width:780px){ .about-wrap{grid-template-columns:1fr;} }
.about-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow);}
.about-card h3{font-size:1rem; margin-bottom:18px;}
.about-stats{display:flex; gap:26px; flex-wrap:wrap;}
.stat b{display:block; font-family:'JetBrains Mono',monospace; font-size:1.4rem; color:var(--accent-ink);}
.stat span{font-size:.82rem; color:var(--text-muted);}

/* ============ Contact ============ */
.contact-card{
  position:relative; overflow:hidden; border-radius:24px; border:1px solid var(--border);
  background:var(--surface-alt); padding:4px;
}
.contact-blob{position:absolute; width:380px; height:380px; background:var(--accent); opacity:.22; filter:blur(70px); border-radius:50%; top:-120px; right:-80px; animation:float1 18s ease-in-out infinite;}
.contact-inner{position:relative; padding:52px 44px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;}
.contact-inner h2{margin-bottom:6px;}

footer{border-top:1px solid var(--border); padding:32px 0; color:var(--text-muted); font-size:.84rem;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.footer-brand{display:flex; align-items:center; gap:8px;}