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

/* --------------------------------------------------------------------------
   Self-hosted fonts. Nothing is requested from Google.
   Files live in assets/fonts/ — see the README in that folder if they are
   missing. unicode-range means a browser only downloads latin-ext when the
   page actually contains those characters, so English visitors never pay for
   the Turkish and Azerbaijani glyphs.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/inter-latin-regular.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/inter-latin-ext-regular.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/inter-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/inter-latin-ext-500.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0259,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/inter-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/inter-latin-ext-600.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0259,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/space-grotesk-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/space-grotesk-latin-ext-500.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0259,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/space-grotesk-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/space-grotesk-latin-ext-600.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0259,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/space-grotesk-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/space-grotesk-latin-ext-700.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0259,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}

: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;
  /* #737B8B cleared 4.5:1 on the page background (4.68) and on a single panel
     (4.62), but a pricing card stacks two translucent panels and lands on
     #0f1013, where it measured 4.47 and failed. Contrast has to hold against
     the lightest surface the colour actually sits on, not the darkest.
     #7B8394 is 5.00:1 there and 5.23:1 on the page. */
  --muted-2:#7B8394;

  /* 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,'Helvetica Neue',Arial,sans-serif;
  --disp:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI Variable Display','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

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

*{box-sizing:border-box}
/* Anchor landings clear the sticky header. 124px was sized for the old
   construction banner plus the nav; with the banner gone that dropped
   every #section landing ~50px too low. Measured nav height is 73px on
   desktop and 65px on mobile, plus breathing room. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:93px}
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}
/* Parked above the viewport, not to the left of it. Hiding things at
   left:-9999px is safe only in a left-to-right document; in RTL the scrollable
   axis flips and the same offset adds ~10,000px of horizontal scroll. Sliding
   down from -100px works identically in both directions, and inset-inline-start
   keeps the link anchored to the reading edge when it is focused. */
.skip{position:absolute;top:-100px;inset-inline-start:0;z-index:200;padding:12px 20px;
  background:var(--ember);color:#140B04;border-radius:0 0 10px 0;font-weight:600;
  transition:top .18s ease}
.skip:focus{top: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%)}@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)}
}@media (max-width:640px){}

/* ---------- 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}

/* ---------- rising embers ----------------------------------------------
   Nine particles, low opacity, slow. Built in JS so the markup stays clean,
   and skipped entirely under prefers-reduced-motion. Restraint is the whole
   point: at this scale it reads as atmosphere, not as a gimmick. */
.embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.embers span{
  position:absolute;bottom:-12px;width:var(--sz,3px);height:var(--sz,3px);border-radius:50%;
  background:radial-gradient(circle,#FFC875 0%,#FF8A3D 55%,rgba(255,106,43,0) 100%);
  opacity:0;animation:ember var(--d,12s) linear infinite;animation-delay:var(--delay,0s);
}
@keyframes ember{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.5)}
  12%{opacity:.5}
  75%{opacity:.28}
  100%{opacity:0;transform:translate3d(var(--x,0),-62vh,0) scale(1)}
}

/* ---------- home hero ---------- */
.hero{padding:96px 0 96px;text-align:center;position:relative}
.hero > .wrap{position:relative;z-index:1}
.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))}

/* slow light travelling around the featured card's border.
   A conic gradient sits behind the card and is masked to a 1px ring, so the
   card body stays flat and only the edge lights up. */
.price.featured::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:0;
  background:conic-gradient(from var(--sweep,0deg),
    transparent 0deg,transparent 300deg,
    rgba(255,176,32,.85) 340deg,rgba(255,214,120,1) 352deg,rgba(255,176,32,.85) 358deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1px;
  animation:sweep 6s linear infinite;
}
.price.featured > *{position:relative;z-index:1}
@property --sweep{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes sweep{to{--sweep:360deg}}
/* browsers without @property cannot animate the custom angle, so rotate instead */
@supports not (background:conic-gradient(from 0deg,red,blue)){
  .price.featured::before{display:none}
}
.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);position:relative;overflow:hidden}
.slot.open::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--grad);box-shadow:0 0 12px -2px rgba(255,140,60,.8);
  transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.25,1);
}
/* fill left to right, one after another, when the offer scrolls into view */
.js .slot.open::after{transform:scaleX(0)}
.js .founding.in .slot.open::after{transform:scaleX(1)}
.founding.in .slot.open:nth-of-type(1)::after{transition-delay:.15s}
.founding.in .slot.open:nth-of-type(2)::after{transition-delay:.3s}
.founding.in .slot.open:nth-of-type(3)::after{transition-delay:.45s}
.slots span{font-size:13px;color:var(--muted);margin-left:4px}

/* ---------- staggered commitment tiles ---------- */
.js .commit.rv > div{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.js .commit.rv.in > div{opacity:1;transform:none}
.commit.rv.in > div:nth-child(2){transition-delay:.07s}
.commit.rv.in > div:nth-child(3){transition-delay:.14s}
.commit.rv.in > div:nth-child(4){transition-delay:.21s}
.commit.rv.in > div:nth-child(5){transition-delay:.28s}
.commit.rv.in > div:nth-child(6){transition-delay:.35s}

/* ---------- 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)}
/* Selecting an option warms the panel to #291a15, which lifts the background
   luminance enough that --muted-2 drops to 4.4:1 and fails. Only the selected
   card needs the brighter sub-label; the unselected ones already pass. */
.opt input:checked + span small{color:#9AA3B4}
.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}
/* Spam honeypot. Parked off-screen UPWARDS rather than to the left, because
   left:-9999px only fails to create a scrollbar in a left-to-right document.
   Flip the page to RTL and the scrollable axis reverses, so that same offset
   produced 10,000px of horizontal overflow on every Arabic page view.
   Vertical overflow above the origin is never scrollable in either direction,
   so this hides the field without distorting the page.
   Kept in the layout (not display:none) so bots still fill it in. */
.hp{position:absolute;top:-9999px;left:0;width:1px;height:1px;overflow:hidden}
.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{
  /* These are real words a visitor reads, not decoration, so they answer to
     the 4.5:1 body-text rule rather than the 3:1 large-text one. At 15px/600
     the old .36 alpha composited to #626365 for 3.27:1. .48 gives 4.99:1 and
     still reads as a quiet background band. */
  font-family:var(--disp);font-size:15px;font-weight:600;color:rgba(255,255,255,.48);
  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 ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}

/* ---------- inline form validation ---------------------------------------
   Contrast checked against the panel background: #FF9E7A on #0B0D12 is
   6.1:1, comfortably past the 4.5:1 that WCAG AA asks for body text. */
.ferr{
  margin:7px 0 0;font-size:13px;line-height:1.45;color:#FF9E7A;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .2s ease,opacity .2s ease;
}
.ferr.on{max-height:4em;opacity:1}
.f input.invalid,.f select.invalid,.f textarea.invalid{
  border-color:rgba(255,120,80,.6);
  box-shadow:0 0 0 3px rgba(255,120,80,.12);
}

/* ---------- copy-estimate button ---------- */
.btn-copy{margin-top:10px}
.btn-copy.ok{border-color:rgba(59,232,224,.5);color:var(--cyan)}

/* ---------- sticky mobile CTA + back to top ------------------------------ */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:none;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:rgba(10,12,16,.93);border-top:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.mcta.on{transform:none}
.mcta span{display:flex;flex-direction:column;min-width:0}
.mcta b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.mcta small{font-size:12px;color:var(--muted-2)}
.mcta .btn{flex:0 0 auto;padding:12px 20px;font-size:14.5px}

.totop{
  position:fixed;right:24px;bottom:92px;z-index:90;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(18,20,26,.9);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s,transform .25s,visibility .25s,border-color .2s;
}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:rgba(255,140,60,.5)}
.totop svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .totop{left:24px;right:auto}

@media (max-width:720px){
  .mcta{display:flex}
  .totop{display:none}                    /* the bar owns the bottom edge here */
  body.mcta-on .lang-fab{bottom:84px}
  body.mcta-on .lang-panel{bottom:146px}
}

/* ---------- offscreen work skipping: removed, deliberately ----------------
   content-visibility:auto with contain-intrinsic-size used to live here. It
   was added on the reasoning that a 13,700px page benefits from skipping
   offscreen layout. Measured, it did not: median of 7 runs at 1440x900 put
   FCP 20ms WORSE with it on and LCP within noise at 4ms.

   Meanwhile it broke every anchor link on the site. On a cold load each
   offscreen section is a 760px placeholder, so scrolling to #pricing computes
   a position from placeholder heights, then the real heights replace them and
   the content shifts underneath you. Measured landing error: 829px, on both a
   direct /#pricing load and a nav click. Same link with the property disabled
   landed 20px below the header, correctly.

   Costing correct navigation to buy a measurable regression is not a
   trade worth making, so it is gone. If the page ever grows enough to want it
   back, it needs per-section contain-intrinsic-size measured from real
   heights, plus a scroll correction after layout settles. */

/* ---------- 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}
  html{scroll-padding-top:85px}   /* nav is 65px here */
  .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}.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}}

/* 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}
}