/* ==========================================================================
   Cindershift design system
   One stylesheet for every page. Edit tokens in :root to reskin the site.
   ========================================================================== */

:root{
  /* surfaces */
  --bg:#08090C;
  --bg-2:#0B0D12;
  --panel:rgba(255,255,255,.028);
  --panel-2:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.14);

  /* type colors */
  --text:#EEF0F6;
  --muted:#98A0B2;
  --muted-2:#737B8B;

  /* brand */
  --ember:#FF6A2B;
  --ember-2:#FFB020;
  --cyan:#3BE8E0;
  --grad:linear-gradient(102deg,#FF6A2B 0%,#FFB020 55%,#FFD166 100%);

  /* geometry */
  --r:14px;
  --r-lg:22px;
  --maxw:1180px;
  --maxw-narrow:760px;

  /* type */
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --disp:'Space Grotesk',var(--sans);

  /* rhythm */
  --sp-section:104px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:124px}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.1;letter-spacing:-.025em;margin:0;font-weight:600}
p{margin:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
::selection{background:rgba(255,106,43,.32)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-narrow{width:100%;max-width:var(--maxw-narrow);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:var(--ember);color:#140B04;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

/* ---------- ambient background ---------- */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-fx::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 100% 62% at 50% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 100% 62% at 50% 0%,#000 20%,transparent 78%);
}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.orb.a{width:620px;height:620px;top:-260px;left:-120px;background:radial-gradient(circle,rgba(255,106,43,.5),transparent 68%)}
.orb.b{width:560px;height:560px;top:-180px;right:-160px;background:radial-gradient(circle,rgba(59,232,224,.26),transparent 68%)}
.orb.c{width:700px;height:700px;top:1600px;left:45%;background:radial-gradient(circle,rgba(255,176,32,.14),transparent 70%)}

/* ---------- construction banner ---------- */
.construction{
  background:linear-gradient(100deg,rgba(255,106,43,.19),rgba(255,176,32,.13) 55%,rgba(59,232,224,.08));
  border-bottom:1px solid rgba(255,140,60,.28);
  font-size:13.5px;color:#FFD9B8;text-align:center;padding:9px 20px;line-height:1.5;
}
.construction .in{display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap;max-width:var(--maxw);margin:0 auto}
.construction b{color:#FFE9D4;font-weight:600;letter-spacing:.01em}
.construction .pulse{
  width:8px;height:8px;border-radius:50%;background:var(--ember-2);flex:0 0 8px;
  box-shadow:0 0 0 0 rgba(255,176,32,.7);animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,176,32,.6)}
  70%{box-shadow:0 0 0 9px rgba(255,176,32,0)}
  100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}
}
.construction a{color:#FFD9B8;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.construction a:hover{color:#fff}
@media (max-width:640px){
  .construction{font-size:12.5px;padding:8px 14px}
  .construction .sep{display:none}
}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:60;transition:background .3s,border-color .3s;border-bottom:1px solid transparent;background:rgba(8,9,12,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
header.nav.stuck{background:rgba(8,9,12,.78);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.03em}
.brand .mark{width:30px;height:30px;flex:0 0 30px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:14.5px;color:var(--muted);font-weight:500;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:14px}

/* dropdown */
.has-drop{position:relative}
.drop-btn{background:none;border:none;cursor:pointer;font-size:14.5px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px;padding:0;transition:color .2s}
.drop-btn:hover,.has-drop:hover .drop-btn{color:var(--text)}
.drop-btn svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .25s}
.has-drop:hover .drop-btn svg{transform:rotate(180deg)}
.drop{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:280px;background:rgba(13,15,20,.97);backdrop-filter:blur(18px);
  border:1px solid var(--line-2);border-radius:16px;padding:8px;
  opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;
  box-shadow:0 24px 60px -16px rgba(0,0,0,.8);
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.drop a{display:block;padding:11px 14px;border-radius:10px;transition:background .2s}
.drop a:hover{background:var(--panel-2)}
.drop a b{display:block;font-size:14.5px;font-weight:600;color:var(--text);font-family:var(--disp);letter-spacing:-.01em}
.drop a span{display:block;font-size:12.5px;color:var(--muted-2);margin-top:2px;line-height:1.45}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:100px;font-weight:600;font-size:14.5px;
  border:1px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .25s,background .2s,border-color .2s;
  white-space:nowrap;text-align:center;
}
.btn-primary{background:var(--grad);color:#140B04;box-shadow:0 6px 26px -8px rgba(255,120,45,.65)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px -8px rgba(255,120,45,.8)}
.btn-ghost{background:var(--panel);border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{background:var(--panel-2);border-color:rgba(255,255,255,.26);transform:translateY(-2px)}
.btn-lg{padding:15px 30px;font-size:15.5px}
.btn-block{width:100%}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

.burger{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--line-2);background:var(--panel);align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:17px;height:1.5px;background:var(--text);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--text)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
.mobile-menu{display:none;border-top:1px solid var(--line);background:rgba(8,9,12,.98);backdrop-filter:blur(16px);max-height:calc(100vh - 72px);overflow-y:auto}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:15px 24px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--muted);font-weight:500}
.mobile-menu .sub{padding-left:40px;font-size:14px}
.mobile-menu .grp{padding:16px 24px 8px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.mobile-menu .btn{margin:18px 24px 24px;width:calc(100% - 48px)}

/* ---------- sections ---------- */
main{position:relative;z-index:1}
section{padding:var(--sp-section) 0;position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:100px;
  border:1px solid var(--line-2);background:var(--panel);
  font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember)}
.sec-head{max-width:680px;margin-bottom:56px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(30px,4.4vw,46px);margin:20px 0 16px}
.sec-head p{color:var(--muted);font-size:17px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- home hero ---------- */
.hero{padding:96px 0 96px;text-align:center}
.hero h1{font-size:clamp(40px,7.2vw,74px);line-height:1.08;margin:34px auto 28px;max-width:15ch;font-weight:700}
.hero .lede{color:var(--muted);font-size:clamp(16.5px,2.1vw,19.5px);line-height:1.6;max-width:56ch;margin:0 auto 40px}
.hero-note{margin-top:26px;font-size:13.5px;color:var(--muted-2)}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero .commit{margin-top:88px;text-align:left}
.btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.field-note{font-size:12.5px;color:var(--muted-2);margin-top:14px;line-height:1.6}
.foot-legal{display:flex;gap:18px;flex-wrap:wrap}
.foot-legal a{color:var(--muted)}
.foot-legal a:hover{color:var(--text)}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:80px 0 56px;text-align:center}
.page-hero h1{font-size:clamp(34px,5.6vw,58px);margin:22px auto 20px;max-width:18ch;font-weight:700}
.page-hero p{color:var(--muted);font-size:clamp(16.5px,2vw,19px);max-width:62ch;margin:0 auto 34px}
.crumbs{font-size:13px;color:var(--muted-2);margin-bottom:6px}
.crumbs a:hover{color:var(--text)}
.crumbs span{margin:0 8px;opacity:.5}

/* ---------- cards ---------- */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;
  transition:border-color .3s,background .3s,transform .3s;position:relative;overflow:hidden;
}
.card:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-3px)}
.card h3{font-size:20px;margin-bottom:11px}
.card p{color:var(--muted);font-size:15px}
a.card{display:block}
.card .more{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:14px;font-weight:600;color:var(--ember-2)}
.card .more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .2s}
a.card:hover .more svg{transform:translateX(4px)}
.icon{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(140deg,rgba(255,106,43,.2),rgba(255,176,32,.06));
  border:1px solid rgba(255,140,60,.28);color:var(--ember-2);
}
.icon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.tag{font-size:12px;padding:4px 11px;border-radius:100px;border:1px solid var(--line);color:var(--muted-2);background:rgba(255,255,255,.02)}

/* ---------- commitments ---------- */
.commit{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.commit.two{grid-template-columns:repeat(2,1fr)}
.commit > div{background:var(--bg-2);padding:30px 28px;transition:background .3s}
.commit > div:hover{background:#0E1117}
.commit h3{font-size:17px;margin-bottom:9px;display:flex;align-items:center;gap:10px}
.commit h3 svg{width:17px;height:17px;flex:0 0 17px;stroke:var(--ember-2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.commit p{color:var(--muted);font-size:14.5px}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.steps.three{grid-template-columns:repeat(3,1fr)}
.step{position:relative;padding-top:30px;border-top:1px solid var(--line)}
.step::before{
  counter-increment:s;content:"0" counter(s);
  font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.1em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  position:absolute;top:-9px;left:0;background-color:var(--bg);padding-right:12px;
}
.step h3{font-size:18.5px;margin-bottom:9px}
.step p{color:var(--muted);font-size:14.5px}
.step .when{font-size:12.5px;color:var(--muted-2);margin-top:12px;display:block;letter-spacing:.03em}

/* ---------- deliverables list ---------- */
.deliver{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 32px;list-style:none;padding:0;margin:0}
.deliver li{display:flex;gap:13px;font-size:15px;color:var(--muted);align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--line)}
.deliver li svg{width:17px;height:17px;flex:0 0 17px;margin-top:4px;stroke:var(--ember-2);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.deliver li b{color:var(--text);font-weight:600}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.price{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px;
  display:flex;flex-direction:column;height:100%;position:relative;transition:border-color .3s,transform .3s;
}
.price:hover{border-color:var(--line-2);transform:translateY(-3px)}
.price.featured{border-color:rgba(255,140,60,.42);background:linear-gradient(180deg,rgba(255,106,43,.07),rgba(255,255,255,.02))}
.price.featured::after{
  content:attr(data-badge);position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:#140B04;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  padding:5px 14px;border-radius:100px;text-transform:uppercase;white-space:nowrap;
}
.price h3{font-size:18px;margin-bottom:6px}
.price .who{font-size:13.5px;color:var(--muted-2);margin-bottom:22px;min-height:40px}
.price .amt{font-family:var(--disp);font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1}
.price .amt small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.price .per{font-size:13px;color:var(--muted-2);margin:8px 0 24px}
.price ul{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:11px;flex:1}
.price li{display:flex;gap:11px;font-size:14.5px;color:var(--muted);align-items:flex-start}
.price li svg{width:16px;height:16px;flex:0 0 16px;margin-top:4px;stroke:var(--ember-2);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.care{margin-top:20px;border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:rgba(255,255,255,.015)}
.care p{color:var(--muted);font-size:14.5px;max-width:62ch}
.care b{color:var(--text)}

/* ---------- founding offer ---------- */
.founding{
  border:1px solid rgba(255,140,60,.34);border-radius:26px;overflow:hidden;
  background:linear-gradient(155deg,rgba(255,106,43,.12),rgba(59,232,224,.045) 62%,rgba(255,255,255,.02));
  display:grid;grid-template-columns:1.15fr .85fr;
}
.founding-main{padding:48px 44px}
.founding-main h2{font-size:clamp(27px,3.6vw,38px);margin:18px 0 16px}
.founding-main > p{color:var(--muted);font-size:16.5px;margin-bottom:28px;max-width:52ch}
.founding-side{border-left:1px solid rgba(255,255,255,.1);padding:48px 40px;background:rgba(0,0,0,.22)}
.founding-side h3{font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);margin-bottom:20px}
.founding-side ul{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:14px}
.founding-side li{display:flex;gap:12px;font-size:15px;align-items:flex-start}
.founding-side li svg{width:17px;height:17px;flex:0 0 17px;margin-top:4px;stroke:var(--ember-2);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.slots{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.slot{width:34px;height:6px;border-radius:4px;background:rgba(255,255,255,.13)}
.slot.open{background:var(--grad);box-shadow:0 0 12px -2px rgba(255,140,60,.8)}
.slots span{font-size:13px;color:var(--muted);margin-left:4px}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}
.about-visual{
  aspect-ratio:1/1;border-radius:26px;border:1px solid var(--line-2);position:relative;overflow:hidden;
  background:radial-gradient(120% 100% at 30% 0%,rgba(255,106,43,.3),transparent 62%),
             radial-gradient(90% 80% at 80% 100%,rgba(59,232,224,.16),transparent 60%),#0A0C11;
  display:grid;place-items:center;
}
.about-visual .big-mark{width:46%;opacity:.92;filter:drop-shadow(0 12px 40px rgba(255,120,45,.4))}
.about-copy h2{font-size:clamp(29px,4.2vw,44px);margin:20px 0 20px}
.about-copy p{color:var(--muted);font-size:16.5px;margin-bottom:18px}
.about-copy p strong{color:var(--text);font-weight:600}
.sig{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted-2)}
.sig b{color:var(--text);font-family:var(--disp);font-size:16px;display:block;margin-bottom:2px}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:1.35fr .95fr;gap:22px;align-items:start}
.calc-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
.field{margin-bottom:28px}
.field:last-child{margin-bottom:0}
.field > label,.field .lbl{display:block;font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{
  display:block;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);
  background:rgba(255,255,255,.02);cursor:pointer;font-size:14.5px;font-weight:500;transition:all .2s;
}
.opt span small{display:block;font-size:12.5px;color:var(--muted-2);font-weight:400;margin-top:3px}
.opt input:checked + span{border-color:rgba(255,140,60,.55);background:rgba(255,106,43,.11);box-shadow:inset 0 0 0 1px rgba(255,140,60,.22)}
.opt input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:2px}
.opt span:hover{border-color:var(--line-2)}
.range-row{display:flex;align-items:center;gap:16px}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:5px;border-radius:5px;background:rgba(255,255,255,.12);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#FF8A3D;cursor:pointer;border:2px solid #0B0D12;box-shadow:0 0 0 1px rgba(255,140,60,.5)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#FF8A3D;cursor:pointer;border:2px solid #0B0D12}
.range-val{font-family:var(--disp);font-weight:700;font-size:17px;min-width:78px;text-align:right}
.calc-out{
  background:linear-gradient(180deg,rgba(255,106,43,.09),rgba(255,255,255,.02));
  border:1px solid rgba(255,140,60,.32);border-radius:var(--r-lg);padding:30px;position:sticky;top:96px;
}
.calc-out .est-lbl{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.calc-out .est{font-family:var(--disp);font-size:clamp(30px,4.6vw,42px);font-weight:700;letter-spacing:-.03em;margin:12px 0 4px;line-height:1.05}
.calc-out .est-sub{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.breakdown{list-style:none;padding:0;margin:0 0 24px;border-top:1px solid var(--line);padding-top:18px;display:grid;gap:9px}
.breakdown li{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:var(--muted)}
.breakdown li b{color:var(--text);font-weight:600;white-space:nowrap}
.breakdown li.total{border-top:1px solid var(--line);padding-top:11px;margin-top:5px;color:var(--text);font-weight:600}
.calc-out .fine{font-size:12px;color:var(--muted-2);margin-top:14px;line-height:1.5}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:0 auto}
.q{border-bottom:1px solid var(--line)}
.q button{
  width:100%;background:none;border:none;text-align:left;padding:24px 44px 24px 0;
  font-family:var(--disp);font-size:17.5px;font-weight:600;cursor:pointer;position:relative;letter-spacing:-.015em;
}
.q button::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .28s,border-color .28s;
}
.q.open button::after{transform:translateY(-25%) rotate(225deg);border-color:var(--ember-2)}
.q .a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.q .a p{color:var(--muted);font-size:15.5px;padding-bottom:24px;padding-right:40px}

/* ---------- blog ---------- */
.post-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .3s,transform .3s;
}
.post-card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.post-top{height:132px;position:relative;border-bottom:1px solid var(--line)}
.post-top .num{
  position:absolute;right:22px;bottom:14px;font-family:var(--disp);font-size:62px;font-weight:700;
  color:rgba(255,255,255,.07);letter-spacing:-.04em;line-height:1;
}
.post-body{padding:26px;flex:1;display:flex;flex-direction:column}
.post-meta{font-size:12.5px;color:var(--muted-2);letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px}
.post-body h3{font-size:19.5px;margin-bottom:10px;line-height:1.25}
.post-body p{color:var(--muted);font-size:14.5px;flex:1}
.post-body .more{margin-top:20px}

/* article body */
.article{max-width:var(--maxw-narrow);margin:0 auto;padding:0 24px}
.article-head{padding:70px 0 40px;text-align:center}
.article-head h1{font-size:clamp(31px,4.8vw,50px);margin:20px auto 20px;max-width:22ch}
.article-head .meta{font-size:13.5px;color:var(--muted-2);letter-spacing:.04em}
.prose{font-size:17px;line-height:1.78;color:#C9CFDD;padding-bottom:20px}
.prose > *{margin-bottom:24px}
.prose h2{font-size:clamp(24px,3vw,31px);color:var(--text);margin:52px 0 18px}
.prose h3{font-size:20px;color:var(--text);margin:36px 0 14px}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--ember-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--ember)}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:11px}
.prose li{padding-left:4px}
.prose li::marker{color:var(--ember-2)}
.prose blockquote{
  border-left:2px solid var(--ember);padding:4px 0 4px 24px;margin:32px 0;
  font-family:var(--disp);font-size:19px;line-height:1.5;color:var(--text);letter-spacing:-.015em;
}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:28px 0}
.prose th,.prose td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--disp);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.prose td{color:var(--muted)}
.prose td:first-child{color:var(--text);font-weight:500}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:#FFD9B8;
}
.callout{
  border:1px solid rgba(255,140,60,.3);background:rgba(255,106,43,.07);
  border-radius:var(--r-lg);padding:24px 26px;font-size:15.5px;color:var(--muted);
}
.callout b{color:var(--text);display:block;margin-bottom:6px;font-family:var(--disp);font-size:16px}
.article-cta{border-top:1px solid var(--line);margin-top:20px;padding:44px 0 0;text-align:center}
.article-cta h3{font-size:24px;margin-bottom:12px}
.article-cta p{color:var(--muted);margin-bottom:24px;font-size:16px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.contact-side h2{font-size:clamp(30px,4.2vw,44px);margin:20px 0 18px}
.contact-side > p{color:var(--muted);font-size:16.5px;margin-bottom:32px}
.cx{display:grid;gap:18px}
.cx div{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;color:var(--muted)}
.cx svg{width:18px;height:18px;flex:0 0 18px;margin-top:3px;stroke:var(--ember-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{margin-bottom:18px}
.f label{display:block;font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--muted-2);margin-bottom:8px;text-transform:uppercase}
.f input,.f select,.f textarea{
  width:100%;padding:13px 15px;border-radius:var(--r);border:1px solid var(--line);
  background:rgba(255,255,255,.03);transition:border-color .2s,background .2s;font-size:15px;
}
.f input:focus,.f select:focus,.f textarea:focus{border-color:rgba(255,140,60,.55);background:rgba(255,255,255,.05);outline:none}
.f input::placeholder,.f textarea::placeholder{color:var(--muted-2)}
.f textarea{resize:vertical;min-height:118px}
.f select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2398A0B2' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.f select option{background:#0B0D12}
.hp{position:absolute;left:-9999px}
.form-note{font-size:12.5px;color:var(--muted-2);margin-top:14px;text-align:center}
.success{display:none;text-align:center;padding:26px 10px}
.success.on{display:block}
.success .ok{width:52px;height:52px;border-radius:50%;background:var(--grad);display:grid;place-items:center;margin:0 auto 18px}
.success .ok svg{width:24px;height:24px;stroke:#140B04;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.success h3{font-size:21px;margin-bottom:9px}
.success p{color:var(--muted);font-size:15px}

/* ---------- cta band ---------- */
.band{
  border:1px solid rgba(255,140,60,.3);border-radius:26px;padding:56px 40px;text-align:center;
  background:linear-gradient(150deg,rgba(255,106,43,.13),rgba(59,232,224,.05) 70%,rgba(255,255,255,.02));
  position:relative;overflow:hidden;
}
.band h2{font-size:clamp(28px,4.2vw,42px);margin-bottom:16px}
.band p{color:var(--muted);max-width:52ch;margin:0 auto 30px;font-size:16.5px}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0;overflow:hidden;background:rgba(255,255,255,.012);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
/* The belt shifts by exactly one group width, measured in JS, so the seam is
   mathematically invisible no matter how many groups exist. Spacing lives in
   margin-right rather than `gap`, because gap is not included in a group's
   offsetWidth and that mismatch is what causes a visible jump at the loop. */
.marquee-track{
  display:flex;width:max-content;will-change:transform;
  animation:marquee var(--marquee-dur,40s) linear infinite;
}
.marquee-track:not(.ready){animation:none}
.marquee:hover .marquee-track{animation-play-state:paused}
.mq-group{display:flex;flex:0 0 auto}
.marquee-track span{
  font-family:var(--disp);font-size:15px;font-weight:600;color:rgba(255,255,255,.36);
  white-space:nowrap;letter-spacing:.02em;margin-right:56px;
}
@keyframes marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--marquee-shift,50%)),0,0)}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;justify-content:center;width:100%;flex-wrap:wrap;row-gap:10px;column-gap:0}
  .marquee-track span{margin:0 18px}
  .mq-group{flex-wrap:wrap;justify-content:center}
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:56px 0 34px;position:relative;z-index:1;margin-top:20px}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:44px}
.foot-brand{max-width:320px}
.foot-brand p{color:var(--muted);font-size:14.5px;margin-top:16px}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-col h3{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px;font-weight:600}
.foot-col a{display:block;font-size:14.5px;color:var(--muted);margin-bottom:11px;transition:color .2s}
.foot-col a:hover{color:var(--text)}
.foot-bot{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--muted-2)}

/* ---------- global reach ---------- */
.reach{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.reach-copy h2{font-size:clamp(29px,4.2vw,44px);margin:20px 0 20px}
.reach-copy p{color:var(--muted);font-size:16.5px;margin-bottom:18px}
.reach-copy p strong{color:var(--text);font-weight:600}
.reach-facts{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.reach-facts li{background:var(--bg-2);padding:20px 24px;display:flex;gap:16px;align-items:flex-start;transition:background .3s}
.reach-facts li:hover{background:#0E1117}
.reach-facts svg{width:19px;height:19px;flex:0 0 19px;margin-top:3px;stroke:var(--ember-2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.reach-facts b{display:block;font-family:var(--disp);font-size:15.5px;font-weight:600;margin-bottom:4px;letter-spacing:-.01em}
.reach-facts span{font-size:14px;color:var(--muted);line-height:1.6}

/* ---------- language switcher (globe) ---------- */
.lang-fab{
  position:fixed;right:24px;bottom:24px;z-index:90;
  width:56px;height:56px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(20,22,28,.94),rgba(12,14,19,.94));
  border:1px solid rgba(255,140,60,.42);
  box-shadow:0 10px 34px -10px rgba(0,0,0,.9),0 0 0 0 rgba(255,140,60,.4);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),border-color .22s,box-shadow .3s;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.lang-fab:hover{transform:translateY(-3px) scale(1.05);border-color:rgba(255,176,32,.85);box-shadow:0 16px 40px -10px rgba(0,0,0,.95),0 0 26px -6px rgba(255,140,60,.55)}
.lang-fab:active{transform:translateY(-1px) scale(.98)}
.lang-fab svg{width:25px;height:25px;stroke:url(#globeGrad);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lang-fab .code{
  position:absolute;right:-3px;bottom:-3px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;
  background:var(--grad);color:#140B04;font-family:var(--disp);font-size:10.5px;font-weight:700;
  display:grid;place-items:center;letter-spacing:.03em;text-transform:uppercase;border:2px solid var(--bg);
}
.lang-fab.spin svg{animation:globe-spin .9s cubic-bezier(.4,0,.2,1)}
@keyframes globe-spin{to{transform:rotate(360deg)}}

.lang-panel{
  position:fixed;right:24px;bottom:92px;z-index:91;width:264px;max-height:min(62vh,520px);overflow-y:auto;
  background:rgba(12,14,19,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--line-2);border-radius:18px;padding:8px;
  box-shadow:0 26px 70px -18px rgba(0,0,0,.92);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.97);transform-origin:bottom right;
  transition:opacity .22s,transform .22s,visibility .22s;
}
.lang-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.lang-panel h2{
  font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);
  font-weight:600;padding:10px 12px 8px;margin:0;
}
.lang-panel button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:none;border:none;text-align:left;cursor:pointer;
  padding:10px 12px;border-radius:11px;transition:background .18s;font-size:14.5px;
}
.lang-panel button:hover{background:var(--panel-2)}
.lang-panel button[aria-current="true"]{background:rgba(255,106,43,.13)}
.lang-panel button .native{font-weight:500;color:var(--text)}
.lang-panel button .en{display:block;font-size:12px;color:var(--muted-2);margin-top:1px}
.lang-panel button .tick{width:16px;height:16px;flex:0 0 16px;stroke:var(--ember-2);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.lang-panel button[aria-current="true"] .tick{opacity:1}
.lang-note{font-size:11.5px;color:var(--muted-2);padding:10px 12px 6px;line-height:1.5;border-top:1px solid var(--line);margin-top:6px}

/* right-to-left */
html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] .lang-fab,html[dir="rtl"] .lang-panel{right:auto;left:24px}
html[dir="rtl"] .lang-panel{transform-origin:bottom left}
html[dir="rtl"] .lang-fab .code{right:auto;left:-3px}
html[dir="rtl"] .sec-head,html[dir="rtl"] .reach-copy,html[dir="rtl"] .about-copy{text-align:right}
html[dir="rtl"] .q button{text-align:right;padding:24px 0 24px 44px}
html[dir="rtl"] .q button::after{right:auto;left:6px}
html[dir="rtl"] .step{border-top:1px solid var(--line)}
html[dir="rtl"] .step::before{left:auto;right:0;padding-right:0;padding-left:12px}
html[dir="rtl"] .prose{text-align:right}
html[dir="rtl"] .prose ul,html[dir="rtl"] .prose ol{padding-left:0;padding-right:22px}
html[dir="rtl"] .prose blockquote{border-left:none;border-right:2px solid var(--ember);padding:4px 24px 4px 0}
html[dir="rtl"] .crumbs,html[dir="rtl"] .breadcrumb{direction:rtl}
html[dir="rtl"] .f label,html[dir="rtl"] .field .lbl{text-align:right}
html[dir="rtl"] .price.featured::after{left:50%}

@media (max-width:640px){
  .lang-fab{right:16px;bottom:16px;width:50px;height:50px}
  .lang-fab svg{width:22px;height:22px}
  .lang-panel{right:16px;left:16px;bottom:78px;width:auto}
  html[dir="rtl"] .lang-fab{left:16px;right:auto}
}
@media (max-width:960px){
  .reach{grid-template-columns:1fr;gap:36px}
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .founding{grid-template-columns:1fr}
  .founding-side{border-left:none;border-top:1px solid rgba(255,255,255,.1)}
  .founding-main,.founding-side{padding:38px 32px}
  .about{grid-template-columns:1fr;gap:38px}
  .about-visual{max-width:340px;margin:0 auto}
  .commit{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  :root{--sp-section:76px}
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:flex}
  .g3,.g4,.steps,.steps.three,.price-grid{grid-template-columns:1fr}
  .calc,.contact-grid{grid-template-columns:1fr}
  .calc-out{position:static}
  .g2,.deliver{grid-template-columns:1fr}
  .contact-grid{gap:36px}
}
@media (max-width:640px){
  .wrap,.wrap-narrow,.article{padding:0 18px}
  .frow,.opts.two{grid-template-columns:1fr}
  .card,form,.calc-panel,.calc-out,.price{padding:24px}
  .band{padding:40px 22px}
  .founding-main,.founding-side{padding:30px 22px}
  .commit{grid-template-columns:1fr}
  .commit > div{padding:24px 22px}
  .page-hero .btn{width:100%}
  .prose{font-size:16.5px}
}

/* ==========================================================================
   MOBILE PASS
   Everything below targets phones and small tablets. Ordered from layout,
   to touch ergonomics, to the specific components that break on narrow
   screens. Tested against 320px, 360px, 390px and 430px widths.
   ========================================================================== */

/* never allow a stray element to create a sideways scrollbar */
html,body{max-width:100%;overflow-x:clip}
img,svg,video,table,pre{max-width:100%}
h1,h2,h3{overflow-wrap:break-word}
h1,h2{text-wrap:balance}
p,li{text-wrap:pretty}

/* remove the grey flash iOS puts on tapped elements, we have our own states */
a,button,label,summary,input,select,textarea{-webkit-tap-highlight-color:transparent}

/* wide data tables scroll sideways instead of squashing or overflowing */
.prose table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
.prose th,.prose td{white-space:normal;min-width:110px}

@media (max-width:900px){
  /* the ambient orbs are decorative and expensive to blur on mobile GPUs */
  .orb{filter:blur(60px);opacity:.38}
  .orb.a{width:min(420px,90vw);height:min(420px,90vw);top:-160px;left:-90px}
  .orb.b{width:min(380px,80vw);height:min(380px,80vw);top:-120px;right:-110px}
  .orb.c{display:none}
  .bg-fx::before{background-size:44px 44px}
}

@media (max-width:768px){
  .commit.two{grid-template-columns:1fr}
}

@media (max-width:640px){
  :root{--sp-section:60px}

  /* --- typography that fits a phone --- */
  .hero{padding:64px 0 72px}
  .hero h1{font-size:clamp(31px,8.4vw,44px);line-height:1.14;max-width:18ch;margin:24px auto 22px}
  .hero .lede{font-size:16.5px;line-height:1.65;max-width:42ch;margin-bottom:34px}
  .hero-note{margin-top:22px}
  .hero .commit{margin-top:58px}
  .hero-actions{gap:12px}
  .hero-actions .btn{width:100%}
  .page-hero{padding:56px 0 44px}
  .page-hero h1{font-size:clamp(28px,7.6vw,40px);max-width:none}
  .page-hero p{font-size:16px}
  .sec-head h2,.band h2,.about-copy h2,.reach-copy h2,.contact-side h2,.founding-main h2{font-size:clamp(25px,6.4vw,32px)}
  .sec-head p{font-size:16px}
  .article-head{padding:48px 0 30px}
  .article-head h1{font-size:clamp(26px,7vw,34px)}
  .btn-row .btn{width:100%}

  /* --- touch ergonomics: 44px minimum on anything tappable --- */
  .burger{width:44px;height:44px}
  .btn{padding:14px 22px;min-height:46px}
  .btn-lg{padding:16px 26px;min-height:50px}
  .nav-in{height:64px}
  .mobile-menu a{padding:16px 18px;min-height:48px;display:flex;align-items:center}
  .mobile-menu .grp{padding:14px 18px 6px}
  .q button{padding:20px 40px 20px 0;min-height:56px}
  .opt span{padding:15px 16px;min-height:52px;display:flex;flex-direction:column;justify-content:center}
  .lang-panel button{padding:13px 14px;min-height:48px}
  .price a.btn,.care a.btn{min-height:50px}
  input[type=range]{height:26px;background:transparent}
  input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:rgba(255,255,255,.12)}
  input[type=range]::-webkit-slider-thumb{margin-top:-9px;width:24px;height:24px}
  input[type=range]::-moz-range-track{height:5px;border-radius:5px;background:rgba(255,255,255,.12)}
  input[type=range]::-moz-range-thumb{width:24px;height:24px}

  /* --- 16px inputs stop iOS zooming the page on focus --- */
  .f input,.f select,.f textarea{font-size:16px;padding:14px 15px}
  .f textarea{min-height:132px}
  .f label{font-size:12px}

  /* --- components that need reflowing --- */
  .construction{padding:9px 14px;font-size:12px;line-height:1.45}
  .commit > div{padding:22px 20px}
  .commit h3{font-size:16.5px}
  .reach-facts li{padding:18px 20px}
  .slots{flex-wrap:wrap;row-gap:8px}
  .slots span{width:100%;margin-left:0}
  .breakdown li{gap:10px;align-items:baseline}
  .breakdown li span{min-width:0;overflow-wrap:anywhere}
  .calc-out .est{font-size:clamp(28px,8vw,34px)}
  .price .amt{font-size:34px}
  .price .who{min-height:0}
  .price.featured{margin-top:14px}
  .care{flex-direction:column;align-items:flex-start;gap:16px}
  .care a.btn{width:100%}
  .marquee-track span{font-size:13.5px;margin-right:36px}
  .foot-cols{gap:30px 40px}
  .foot-top{gap:32px}
  .foot-bot{flex-direction:column;gap:10px;font-size:12.5px}
  .cx div{font-size:14px}
  .crumbs{font-size:12.5px}
  .article-cta h2,.article-cta h3{font-size:21px}
  .prose blockquote{font-size:17px;padding-left:18px}
  .prose h2{font-size:clamp(22px,6vw,26px)}
  .callout{padding:20px}
  .sec-head{margin-bottom:38px}
}

/* very small phones: 320px to 360px */
@media (max-width:380px){
  .wrap,.wrap-narrow,.article{padding:0 15px}
  .brand{font-size:17px;gap:9px}
  .brand .mark{width:26px;height:26px;flex:0 0 26px}
  .card,form,.calc-panel,.calc-out,.price{padding:20px}
  .eyebrow{font-size:11.5px;padding:6px 12px}
  .lang-fab{width:48px;height:48px;right:14px;bottom:14px}
  .construction{font-size:11.5px}
}

/* landscape phones: reclaim vertical space */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding:48px 0 44px!important}
  section{padding:44px 0}
  .mobile-menu{max-height:calc(100vh - 64px)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}