@import url("assets/fonts/fonts.css");

/* ==========================================================================
   گام — Gaam
   Structure is the Axion layout language: a floating white pill of a navbar,
   a full-viewport hero over an animated ground, numbered section badges,
   text-roll buttons, and rounded media cards on three alternating grounds.
   Colour is Gaam's: orange accent, near-black anchor, warm neutrals.

   Two things are deliberately NOT copied from that layout, because they
   break Persian:
     - negative letter-spacing severs the joins between Arabic-script letters
     - a 1.08 line-height drops descenders onto the line below
   Display line-height sits at 1.28; body stays between 1.75 and 1.85.
   ========================================================================== */

:root{
  /* three grounds, warm neutrals so the orange does not turn sour */
  --paper:#EFEEEB;      /* hero, and every other section */
  --shell:#F6F5F3;      /* the quieter third ground */
  --surface:#FFFFFF;    /* cards, the nav pill */

  --ink:#17150F;
  --muted:#5E5A52;
  --deep:#141210;       /* dark surfaces: contact, footer, the logo disc */
  --line:#E2E0DA;
  --line-soft:#EDEBE6;

  /* #F26522 is 3.15:1 on white — it carries shapes, never small text, and
     never white text on top. --orange-ink does both: 5.53:1 on white and
     4.77:1 on --paper, which is the ground the 13px links actually sit on.
     #C1440E was tried first and came back 4.41 there. Same split the palette
     already used for --brass / --brass-ink. */
  --orange:#F26522;
  --orange-ink:#B84109;
  --orange-ink-hover:#953406;
  --tint:#FBEEE7;

  --display:'Estedad', 'Vazirmatn', system-ui, sans-serif;
  --body:'Vazirmatn', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  --wrap:1440px;
  --r-sm:10px;
  --r:14px;
  --r-lg:18px;
  --section-y:clamp(56px, 8vw, 112px);
  --ease:cubic-bezier(.25,.1,.25,1);
  --ease-sheet:cubic-bezier(.32,.72,0,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;      /* Persian reads small at 16px */
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:0}
h1,h2{font-weight:500;line-height:1.28}
h3,h4{font-weight:800;line-height:1.5}
p{margin:0 0 1rem}
a{color:var(--orange-ink);text-decoration-thickness:1px;text-underline-offset:3px}
img,svg{max-width:100%;height:auto}
ul{margin:0;padding:0;list-style:none}

/* Never removed: the brand guide mandates a visible focus ring. */
:focus-visible{
  outline:3px solid var(--orange-ink);
  outline-offset:2px;
  border-radius:6px;
}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
@media (min-width:640px){ .wrap{padding-inline:32px} }
@media (min-width:1024px){ .wrap{padding-inline:48px} }

.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.mono{font-family:var(--mono);direction:ltr;unicode-bidi:isolate}

.skip{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:100;
  background:var(--deep);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;
}
.skip:focus{inset-inline-start:0}

/* the line break the headline uses on wide screens only */
.br-w{display:none}
@media (min-width:640px){ .br-w{display:block} }

/* ---------- the stair: one idea, reused ---------- */
.stair{display:inline-flex;align-items:flex-end;gap:3px;direction:ltr}
.stair i{display:block;flex:none;width:6px;background:var(--line);border-radius:2px}
.stair i:nth-child(1){height:6px}
.stair i:nth-child(2){height:10px}
.stair i:nth-child(3){height:14px}
.stair i:nth-child(4){height:18px}
.stair[data-step="1"] i:nth-child(1),
.stair[data-step="2"] i:nth-child(-n+2),
.stair[data-step="3"] i:nth-child(-n+3),
.stair[data-step="4"] i:nth-child(-n+4){background:var(--deep)}
.stair[data-step="1"] i:nth-child(1),
.stair[data-step="2"] i:nth-child(2),
.stair[data-step="3"] i:nth-child(3),
.stair[data-step="4"] i:nth-child(4){background:var(--orange)}
.stair.on-dark i{background:rgba(255,255,255,.2)}
.stair.on-dark[data-step="4"] i{background:rgba(255,255,255,.4)}
.stair.on-dark[data-step="4"] i:nth-child(4){background:var(--orange)}

/* ==========================================================================
   Buttons — the text-roll and the rotating arrow disc
   Both are pure CSS, so they still work with script.js blocked.
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-weight:500;
  font-size:.8125rem;line-height:1.35;
  padding:8px;padding-inline-start:20px;
  border-radius:999px;border:1px solid transparent;
  min-height:44px;
  text-decoration:none;cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease);
}
@media (min-width:640px){ .btn{font-size:.875rem;padding-inline-start:24px} }

/* the roll: the label twice in a column, clipped to one line */
.roll{display:block;overflow:hidden;height:1.35em}
.roll-in{display:flex;flex-direction:column;transition:transform .5s var(--ease)}
.roll-in > span{display:block;height:1.35em}
.btn:hover .roll-in,
.btn:focus-visible .roll-in{transform:translateY(-50%)}

/* the disc. In RTL "forward" is leftward, so the arrow points left and lifts
   clockwise on hover — a mirrored -45deg, not the same -45deg. Physical
   rotation, because the direction of an arrow is a shape, not a sentence. */
.disc{
  flex:none;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--surface);color:var(--orange-ink);
}
.disc svg{display:block;transition:transform .5s var(--ease)}
.btn:hover .disc svg,
.btn:focus-visible .disc svg{transform:rotate(45deg)}
@media (min-width:640px){ .disc{width:32px;height:32px} }

.btn-orange{background:var(--orange-ink);color:#fff}
.btn-orange:hover{background:var(--orange-ink-hover)}
.btn-dark{background:var(--deep);color:#fff}
.btn-dark:hover{background:#2C2721}
.btn-dark .disc{background:var(--surface);color:var(--deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface);border-color:#CFCCC3}
.btn-ghost .disc{background:var(--tint);color:var(--orange-ink)}
.btn-light{background:var(--surface);color:var(--ink)}
.btn-light:hover{background:#F3F1EC}
.btn-light .disc{background:var(--orange-ink);color:#fff}

@media (prefers-reduced-motion:reduce){
  .roll-in,.disc svg{transition:none}
  .btn:hover .roll-in,.btn:focus-visible .roll-in{transform:none}
  .btn:hover .disc svg,.btn:focus-visible .disc svg{transform:none}
}

/* ==========================================================================
   Header — a white pill floating over whatever is behind it
   ========================================================================== */

.site-head{
  position:fixed;inset-inline:0;top:0;z-index:50;
  padding:8px;
}
@media (min-width:640px){ .site-head{padding:12px} }

.navpill{
  max-width:var(--wrap);margin-inline:auto;
  background:var(--surface);border-radius:999px;padding:5px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:box-shadow .3s var(--ease);
}
.site-head.stuck .navpill{box-shadow:0 2px 4px rgba(0,0,0,.06),0 12px 28px -16px rgba(0,0,0,.28)}

.nav-side{display:flex;align-items:center;gap:10px;min-width:0}

.brand-link{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:50%;
  background:var(--deep);text-decoration:none;
}
.brand-link svg{width:22px;height:22px;display:block}

.nav-links{display:none}
@media (min-width:768px){
  .nav-links{display:flex;align-items:center;gap:24px;padding-inline:14px}
}
.nav-links a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.875rem;color:var(--ink);text-decoration:none;
  transition:color .3s var(--ease);
}
.nav-links a:hover{color:var(--muted)}

.nav-note{display:none}
@media (min-width:1100px){
  .nav-note{display:inline-flex;align-items:center;font-size:.8125rem;color:var(--muted)}
}

/* the clock chip is built by script.js, so no empty frame is left behind
   when the script never loads. Persian digits need --body: the bundled
   JetBrains Mono is U+0000-00FF only and would fall back to a system face. */
.nav-clock{
  display:none;align-items:center;gap:7px;
  font-family:var(--body);font-size:.8125rem;color:var(--muted);
  white-space:nowrap;
}
@media (min-width:768px){ .nav-clock.on{display:inline-flex} }
.nav-clock svg{flex:none;opacity:.75}

.nav-cta{display:inline-flex}
.nav-menu{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--deep);color:#fff;border:0;cursor:pointer;
  font-family:var(--body);font-size:.8125rem;font-weight:500;
  border-radius:999px;padding-inline:16px;min-height:44px;
}
@media (min-width:768px){ .nav-menu{display:none} }
.nav-menu svg{display:block}
.nav-menu .x{display:none}
.nav-menu[aria-expanded="true"] .x{display:block}
.nav-menu[aria-expanded="true"] .m{display:none}

@media (max-width:400px){
  .nav-cta .roll{max-width:5.4em}
  .nav-menu{padding-inline:12px}
}

/* ---------- the mobile sheet ---------- */
.sheet{position:fixed;inset:0;z-index:60;visibility:hidden}
.sheet.open{visibility:visible}
.sheet-back{
  position:absolute;inset:0;background:rgba(0,0,0,.6);
  opacity:0;transition:opacity .4s var(--ease-sheet);
}
.sheet.open .sheet-back{opacity:1}
.sheet-panel{
  position:absolute;inset-inline:12px;bottom:12px;
  background:var(--surface);border-radius:20px;padding:20px;
  transform:translateY(115%);
  transition:transform .5s var(--ease-sheet);
}
.sheet.open .sheet-panel{transform:none}
.sheet-chip{
  display:none;align-items:center;gap:8px;
  background:var(--paper);border-radius:999px;padding:8px 16px;
  font-size:.8125rem;color:var(--muted);margin-bottom:18px;
}
.sheet-chip.on{display:inline-flex}
.sheet-links{display:grid;gap:2px;margin-bottom:18px}
.sheet-links a{
  display:flex;align-items:center;min-height:56px;
  font-family:var(--display);font-weight:500;font-size:1.75rem;
  color:var(--ink);text-decoration:none;
}
.sheet .btn{width:100%;justify-content:space-between}
@media (prefers-reduced-motion:reduce){
  .sheet-back,.sheet-panel{transition:none}
}

/* ==========================================================================
   Hero — full viewport, content pinned to the bottom, four animated layers
   underneath. 100svh not 100vh: the mobile address bar breaks 100vh.
   ========================================================================== */

.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;
  display:flex;flex-direction:column;
  background:var(--paper);
  padding-block:0;
}

.hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-bg > *{position:absolute}

/* 1 — the swirl: two soft lobes over a slowly turning conic band */
.sh-swirl{
  inset:-35%;
  background:
    radial-gradient(38% 44% at 30% 32%, #fff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(46% 40% at 72% 62%, #fff 0%, rgba(255,255,255,0) 60%),
    conic-gradient(from 20deg at 52% 46%,
      #EFEEEB, #FFFFFF 18%, #E9E7E2 34%, #FFFFFF 52%,
      #ECEAE5 70%, #FFFFFF 86%, #EFEEEB 100%);
  animation:sh-turn 44s linear infinite;
}

/* 2 — the colour flow: orange pushed through the swirl on its own clock,
   so the two layers never come back into step */
.sh-chroma{
  inset:-30%;
  background:
    radial-gradient(34% 34% at 26% 70%, rgba(255,95,3,.30), transparent 66%),
    radial-gradient(30% 30% at 74% 26%, rgba(255,95,3,.24), transparent 68%),
    radial-gradient(26% 26% at 58% 84%, rgba(255,95,3,.18), transparent 70%);
  filter:blur(30px);
  mix-blend-mode:multiply;
  animation:sh-flow 31s ease-in-out infinite alternate;
}

/* 3 — fluted glass. The one effect CSS does for real rather than imitates:
   backdrop-filter refracts the layers beneath, the ::after adds the
   chromatic fringe along each flute. */
.sh-fluted{
  inset:0;
  background:repeating-linear-gradient(31deg,
    rgba(255,255,255,0) 0 10px,
    rgba(255,255,255,.38) 10px 11.5px,
    rgba(255,255,255,.10) 11.5px 21px,
    rgba(0,0,0,.022) 21px 22px);
  backdrop-filter:blur(4px) saturate(106%);
  -webkit-backdrop-filter:blur(4px) saturate(106%);
}
.sh-fluted::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(31deg,
    rgba(255,120,20,.08) 0 1.5px,
    rgba(255,255,255,0) 1.5px 10px,
    rgba(40,120,255,.045) 10px 11.5px,
    rgba(255,255,255,0) 11.5px 22px);
}

/* 4 — film grain, strength .05 */
.sh-grain{
  inset:0;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

@keyframes sh-turn{ to{transform:rotate(360deg)} }
@keyframes sh-flow{
  from{transform:translate3d(-4%,3%,0) scale(1)}
  to{transform:translate3d(5%,-4%,0) scale(1.15)}
}
@media (prefers-reduced-motion:reduce){
  .sh-swirl,.sh-chroma{animation:none}
}

.hero-body{
  position:relative;z-index:2;
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:104px;
  padding-bottom:56px;
}
@media (min-width:640px){ .hero-body{padding-bottom:64px} }
@media (min-width:1024px){ .hero-body{padding-bottom:80px} }

.hero-label{
  font-size:.8125rem;color:var(--ink);margin:0 0 20px;
}
@media (min-width:640px){ .hero-label{font-size:.875rem;margin-bottom:32px} }

.hero h1{
  font-size:clamp(1.9rem,6.6vw,4rem);
  max-width:19ch;margin:0;
}
@media (min-width:640px){ .hero h1{font-size:clamp(2.4rem,4.8vw,4rem)} }
.hero h1 mark{background:none;color:var(--orange-ink)}

.hero-cta{
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  margin-top:32px;
}
@media (min-width:640px){
  .hero-cta{flex-direction:row;align-items:center;gap:20px;margin-top:48px}
}

/* the badge beside the button: a claim the site can actually stand behind */
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--surface);border-radius:6px;
  padding:8px 12px;min-height:44px;
  font-size:.8125rem;font-weight:500;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:box-shadow .3s var(--ease);
}
.hero-badge:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
@media (min-width:640px){ .hero-badge{font-size:.875rem} }
.hero-badge .stair i{width:5px}
.hero-badge b{font-weight:500}
.hero-badge .chip{
  font-size:.6875rem;background:var(--deep);color:#fff;
  padding:3px 8px;border-radius:5px;font-weight:400;
}
@media (min-width:640px){ .hero-badge .chip{font-size:.75rem} }

.hero-note{
  font-size:.8125rem;color:var(--muted);margin:20px 0 0;max-width:56ch;
}
.hero-note a{
  color:var(--orange-ink);font-weight:700;text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
}
.hero-note a:hover{text-decoration:underline}

/* the hero's supporting line, between the headline and the buttons */
.hero-body .lede{margin:20px 0 0;max-width:52ch}
@media (min-width:640px){ .hero-body .lede{margin-top:24px} }

/* each pill opens to the width of the words it holds */
.expand-w1{--expand-w:142px}
.expand-w2{--expand-w:152px}
.expand-w3{--expand-w:140px}
.expand-w4{--expand-w:154px}

/* ==========================================================================
   Section furniture
   ========================================================================== */

.sec{padding-block:var(--section-y)}
.sec-white{background:var(--surface)}
.sec-shell{background:var(--shell)}

.badge-row{
  display:flex;align-items:center;gap:12px;
  margin-bottom:24px;
}
@media (min-width:640px){ .badge-row{margin-bottom:32px} }
.badge-no{
  flex:none;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--deep);color:#fff;
  font-family:var(--body);font-weight:700;font-size:.6875rem;line-height:1;
}
@media (min-width:640px){ .badge-no{width:28px;height:28px;font-size:.75rem} }
.badge-label{
  display:inline-flex;align-items:center;
  font-size:.75rem;font-weight:500;
  border:1px solid var(--line);border-radius:999px;
  padding:5px 14px;
}
@media (min-width:640px){ .badge-label{font-size:.8125rem;padding:7px 16px} }
.sec-shell .badge-label{border-color:#DAD7CF}

.section-title{
  font-size:clamp(1.5rem,4vw,3rem);
  max-width:24ch;margin-bottom:.5em;
}
.section-title-lg{font-size:clamp(1.9rem,6.6vw,4rem);max-width:20ch}
@media (min-width:640px){ .section-title-lg{font-size:clamp(2.4rem,4.8vw,4rem)} }
.lede{font-size:clamp(1rem,1.6vw,1.125rem);color:var(--muted);max-width:58ch}

/* ==========================================================================
   Sections
   ========================================================================== */

/* ---------- pain, and the tool clutter that belongs with it ---------- */
.pain-list{display:grid;gap:16px;margin:0 0 32px}
@media (min-width:1024px){ .pain-list{grid-template-columns:repeat(3,1fr)} }
.pain-list li{
  display:flex;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;font-size:1rem;line-height:1.8;
}
.sec-white .pain-list li{background:var(--paper);border-color:var(--line-soft)}
.pain-punch{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.125rem,2.4vw,1.5rem);line-height:1.5;
  max-width:46ch;margin:0 0 40px;
}
.pain-punch strong{color:var(--orange-ink);font-weight:800}

.chaos{
  position:relative;overflow:hidden;max-width:760px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px 24px 168px;min-height:360px;
}
.sec-white .chaos{background:var(--paper);border-color:var(--line-soft)}
.chaos::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:204px;
  background:linear-gradient(to top, var(--paper) 42%, transparent);
}
.chaos-label{font-size:.8125rem;color:var(--muted);margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{
  font-family:var(--mono);font-size:.8125rem;direction:ltr;
  color:var(--muted);background:var(--shell);border:1px solid var(--line);
  padding:5px 11px;border-radius:8px;white-space:nowrap;
}
.one-step{
  position:absolute;z-index:2;inset-inline:24px;bottom:24px;
  background:var(--deep);color:#fff;border-radius:var(--r);padding:20px 22px;
  box-shadow:0 18px 36px -20px rgba(0,0,0,.6);
}
.one-step .tag{
  display:flex;align-items:center;gap:9px;
  font-size:.8125rem;font-weight:700;color:var(--orange);margin-bottom:8px;
}
.one-step b{font-family:var(--display);font-weight:800;font-size:1.0625rem;display:block;line-height:1.6}
.one-step > span{display:block;font-size:.875rem;color:#B7B0A6;margin-top:4px}

/* ---------- roadmap: the asymmetric two-column grid ----------
   Was three tracks (stats / pitch / list): the pitch text and its CTA sat
   alone in a narrow middle column, anchored to nothing, while the stats sat
   equally isolated on the other side — an orphaned sentence between two
   unrelated blocks. The stats now open the pitch column instead of forming
   a column of their own, so the whole left side reads as one argument
   (numbers, then why, then the button) against the checklist on the right. */
.roadmap-grid{display:grid;gap:32px}
@media (min-width:1024px){
  .roadmap-grid{
    grid-template-columns:minmax(280px,36%) 1fr;
    align-items:start;gap:40px;
  }
}
@media (min-width:1280px){ .roadmap-grid{gap:56px} }

.meta-stack{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.meta-stack div{
  background:var(--tint);border-radius:var(--r-sm);padding:12px 16px;
  font-size:.875rem;color:var(--orange-ink);
}
.meta-stack b{font-weight:700;direction:ltr;display:inline-block}

.deliver{display:grid;gap:12px}
.deliver li{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:18px 20px;
}
.sec-white .deliver li{background:var(--paper);border-color:var(--line-soft)}
.deliver .tick{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--orange-ink);color:#fff;display:grid;place-items:center;
  font-size:.75rem;margin-top:4px;
}
.deliver b{display:block;font-family:var(--display);font-weight:800;font-size:1rem;margin-bottom:2px}
.deliver span{color:var(--muted);font-size:.9375rem;line-height:1.75}

/* ---------- the staircase: four dark cards ----------
   The reference put text under a media panel. With no media to put in it, that
   panel was ~494px of empty dark per card. Here the panel is the card. */
.steps{display:grid;gap:16px}
@media (min-width:768px){ .steps{grid-template-columns:repeat(2,1fr);gap:20px} }
@media (min-width:1024px){ .steps{gap:24px} }

/* the article is the grid item and stretches; the card has to be told to
   follow it, or two cards in a row end at different heights */
.step{display:flex}
.step-card{
  position:relative;overflow:hidden;flex:1;
  display:flex;flex-direction:column;
  background:var(--deep);color:#fff;
  border-radius:var(--r-lg);
  padding:22px 24px;min-height:230px;
}
@media (min-width:640px){ .step-card{padding:26px 28px;min-height:246px} }
/* step 02 is the gate — the product everything else hangs off. A hairline
   ring plus the orange pill mark it without a second background colour. */
.step:nth-child(2) .step-card{
  background:#211D18;box-shadow:inset 0 0 0 1px rgba(242,101,34,.38);
}

.step-top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:16px;
}
.step-no{
  font-family:var(--display);font-weight:500;font-size:1.625rem;line-height:1;
  color:var(--orange);
}
.step-card .stairbig{
  display:flex;align-items:flex-end;gap:5px;direction:ltr;
  transition:transform .5s var(--ease);
}
.step-card .stairbig i{display:block;width:11px;border-radius:3px;background:rgba(255,255,255,.17)}
.step-card .stairbig i:nth-child(1){height:14px}
.step-card .stairbig i:nth-child(2){height:26px}
.step-card .stairbig i:nth-child(3){height:38px}
.step-card .stairbig i:nth-child(4){height:50px}
.step-card .stairbig i.lit{background:var(--orange)}
.step-card:hover .stairbig{transform:translateY(-2px)}

.step-card h3{font-size:1.0625rem;color:#fff;margin-bottom:8px}
.step-card p{margin:0 0 18px;color:#B7B0A6;font-size:.9375rem;line-height:1.75}

/* the pill that opens on hover — a disc until you reach it.
   margin-top:auto pins it to the foot, so cards of different copy length
   still line their pills up. */
.expand{
  align-self:flex-start;margin-top:auto;
  display:flex;align-items:center;
  height:44px;width:44px;
  border-radius:999px;background:var(--surface);color:var(--ink);
  text-decoration:none;overflow:hidden;
  transition:width .3s ease-in-out;
}
.expand .ico{flex:none;display:grid;place-items:center;width:44px;height:44px}
.expand .ico svg{display:block;transform:rotate(45deg);transition:transform .3s ease-in-out}
.expand .txt{
  white-space:nowrap;font-size:.8125rem;font-weight:500;
  padding-inline-end:18px;
  opacity:0;transition:opacity .3s ease-in-out .1s;
}
.step-card:hover .expand,
.expand:focus-visible{width:var(--expand-w,150px)}
.step-card:hover .expand .txt,
.expand:focus-visible .txt{opacity:1}
.step-card:hover .expand .ico svg,
.expand:focus-visible .ico svg{transform:none}
.expand-dark{background:var(--orange);color:#2A1103}
@media (prefers-reduced-motion:reduce){
  .expand,.expand .ico svg,.expand .txt,.step-card .stairbig{transition:none}
}

/* ---------- why me ---------- */
.why-grid{display:grid;gap:20px}
@media (min-width:820px){ .why-grid{grid-template-columns:repeat(3,1fr)} }
.why-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px;
}
.sec-white .why-card{background:var(--paper);border-color:var(--line-soft)}
.why-card h3{font-size:1.0625rem;margin-bottom:10px}
.why-card p{margin:0;color:var(--muted);font-size:.9375rem;line-height:1.8}
.why-card.dark{background:var(--deep);border-color:var(--deep);color:#EDE9E3}
.why-card.dark h3{color:#fff}
.why-card.dark p{color:#B7B0A6}

/* ---------- about: the narrow / wide pairing ---------- */
.about-grid{display:grid;gap:28px}
@media (min-width:1024px){
  .about-grid{grid-template-columns:26% 1fr;align-items:end;gap:44px}
}
.portrait{
  aspect-ratio:438/346;border-radius:var(--r-lg);
  background:var(--tint);border:1px dashed #E3C3AE;
  display:grid;place-items:center;text-align:center;padding:20px;
}
.portrait .ph-mark{width:46px;opacity:.55;margin-bottom:10px}
.portrait small{font-size:.8125rem;color:var(--orange-ink);line-height:1.7;display:block}
.about-say p{color:var(--muted);max-width:62ch}
.about-say p strong{color:var(--ink)}

/* ---------- faq ---------- */
.faq-list{display:grid;gap:12px;max-width:900px}
.faq{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
}
.sec-shell .faq{border-color:#DAD7CF}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 24px;min-height:44px;
  font-family:var(--display);font-weight:800;font-size:1.0625rem;line-height:1.6;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;
  /* Physical, not logical: border-inline-end flips to the left in RTL and
     turned this chevron sideways. The arrow is a shape, not a sentence. */
  border-right:2px solid var(--orange-ink);border-bottom:2px solid var(--orange-ink);
  transform:rotate(45deg);transition:transform .2s ease;margin-top:-4px;
}
.faq[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.faq .body{padding:0 24px 22px;color:var(--muted);font-size:.9375rem;line-height:1.85}
.faq .body p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){ .faq summary::after{transition:none} }

/* ==========================================================================
   Final call — the intake form
   ========================================================================== */

.contact{background:var(--deep);color:#EDE9E3}
.contact .badge-no{background:var(--orange);color:var(--deep)}
.contact .badge-label{border-color:rgba(255,255,255,.22);color:#EDE9E3}
.contact .stairbig{display:flex;align-items:flex-end;gap:8px;margin-bottom:26px;direction:ltr}
.contact .stairbig i{display:block;width:20px;border-radius:5px;background:rgba(255,255,255,.14)}
.contact .stairbig i:nth-child(1){height:20px}
.contact .stairbig i:nth-child(2){height:34px}
.contact .stairbig i:nth-child(3){height:48px}
.contact .stairbig i:nth-child(4){height:62px;background:var(--orange)}
.contact h2{color:#fff;margin-bottom:.45em;max-width:18ch}
.contact .lede{color:#B7B0A6;max-width:40ch}

.contact-grid{display:grid;gap:32px;align-items:start}
@media (min-width:1024px){
  .contact-grid{grid-template-columns:.85fr 1.15fr;gap:48px}
  /* the form is far taller than the pitch beside it; without this the
     other column leaves a long empty stretch of dark */
  .contact-grid > div:first-child{position:sticky;top:104px}
}

.after{display:grid;gap:16px;margin-top:32px}
.after li{display:flex;gap:14px;align-items:flex-start}
.after .n{
  flex:none;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.1);color:var(--orange);
  font-family:var(--body);font-weight:700;font-size:.9375rem;
  display:grid;place-items:center;
}
.after b{display:block;font-family:var(--display);font-weight:800;font-size:1rem;color:#fff;line-height:1.6}
.after span{display:block;font-size:.9375rem;color:#B7B0A6;line-height:1.75;margin-top:2px}

.or-telegram{
  margin:24px 0 0;font-size:.9375rem;color:#B7B0A6;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.or-telegram a{
  color:var(--orange);text-decoration:none;font-weight:700;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
}
.or-telegram a:hover{text-decoration:underline}

.form-card{
  background:var(--surface);color:var(--ink);
  border-radius:22px;padding:clamp(22px,3.4vw,34px);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.7);
}
.form-card > h3{font-size:1.25rem;margin-bottom:6px}
.form-card > .form-note{color:var(--muted);font-size:.9375rem;margin-bottom:26px;line-height:1.8}

.fields{display:grid;gap:18px}
@media (min-width:620px){
  .fields{grid-template-columns:1fr 1fr}
  .field.wide{grid-column:1 / -1}
}
.field{display:grid;gap:7px;min-width:0}
.field > label,
.fieldset > legend{
  font-family:var(--display);font-weight:800;font-size:.9375rem;
  color:var(--ink);line-height:1.6;padding:0;
}
.field .opt{color:var(--muted);font-family:var(--body);font-weight:400;font-size:.8125rem}
.field .hint{font-size:.8125rem;color:var(--muted);line-height:1.7}

.field input[type="text"],
.field textarea,
.field select{
  font-family:var(--body);font-size:1rem;color:var(--ink);line-height:1.8;
  background:var(--paper);
  border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;width:100%;min-height:48px;
  transition:border-color .16s ease, background-color .16s ease;
}
.field textarea{min-height:132px;resize:vertical}
.field input[type="text"]:hover,
.field textarea:hover,
.field select:hover{border-color:#CFCCC3}
.field input[type="text"]:focus,
.field textarea:focus,
.field select:focus{background:var(--surface);border-color:var(--orange-ink)}
.field input::placeholder,
.field textarea::placeholder{color:#8B857B}

/* the caret is a shape, so its borders are physical, not logical —
   border-inline-end would resolve to the left edge and turn it sideways. */
.select-wrap{position:relative;display:block}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-inline-end:40px}
.select-wrap::after{
  content:"";position:absolute;inset-inline-end:16px;top:50%;
  width:9px;height:9px;margin-top:-7px;pointer-events:none;
  border-right:2px solid var(--orange-ink);border-bottom:2px solid var(--orange-ink);
  transform:rotate(45deg);
}

.fieldset{border:0;padding:0;margin:0;display:grid;gap:9px;min-width:0}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices label{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:8px 15px;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  font-size:.9375rem;line-height:1.6;cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease;
}
.choices label:hover{border-color:#CFCCC3}
.choices input{
  appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:18px;height:18px;border:2px solid #C3BEB4;background:var(--surface);
  cursor:pointer;
}
.choices input[type="checkbox"]{border-radius:6px}
.choices input[type="radio"]{border-radius:50%}
.choices input:checked{background:var(--orange-ink);border-color:var(--orange-ink)}
.choices input[type="checkbox"]:checked{
  /* the tick is drawn, not a glyph, so it never falls back to a system font */
  background-image:linear-gradient(45deg,transparent 44%,#fff 44%,#fff 56%,transparent 56%),
                   linear-gradient(-45deg,transparent 62%,#fff 62%,#fff 74%,transparent 74%);
}
.choices input[type="radio"]:checked{box-shadow:inset 0 0 0 3px var(--surface)}
.choices label:has(input:checked){background:var(--tint);border-color:var(--orange-ink)}

/* honeypot — a field a person never sees and a bot usually fills */
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

.form-foot{
  display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
}
.privacy{font-size:.8125rem;color:var(--muted);line-height:1.75;margin:0;max-width:36ch}

@media (prefers-reduced-motion:reduce){
  .field input,.field select,.field textarea,.choices label{transition:none}
}

/* ==========================================================================
   Footer — the same pill, closing the page the way the header opened it
   ========================================================================== */

.site-foot{background:var(--paper);padding:12px 12px 20px}
.foot-pill{
  max-width:var(--wrap);margin-inline:auto;
  background:var(--surface);border-radius:22px;
  padding:20px 24px;
  display:flex;flex-wrap:wrap;gap:16px 24px;
  align-items:center;justify-content:space-between;
}
.foot-pill > img{height:22px;width:auto}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.foot-links a{
  color:var(--muted);text-decoration:none;font-size:.875rem;
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:4px;
  transition:color .3s var(--ease);
}
.foot-links a:hover{color:var(--orange-ink)}
.foot-legal{font-size:.8125rem;color:var(--muted);margin:0}

/* ---------- scroll reveal (only when JS is on) ---------- */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.in{opacity:1;transform:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in.d1{transition-delay:.06s}
.js .reveal.in.d2{transition-delay:.12s}
.js .reveal.in.d3{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .js .reveal.in{transition:none}
}

/* ==========================================================================
   Chat widget — a third channel beside Telegram and Bale, AI-answered.
   Built entirely by site/chat.js at runtime; with JS blocked none of this
   markup exists, so there is nothing here for the no-JS test to fail.
   ========================================================================== */

.chatw{position:fixed;inset-inline-end:20px;bottom:20px;z-index:70}

.chatw-btn{
  position:relative;
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--deep);color:#fff;border:0;cursor:pointer;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.45);
  transition:background-color .3s var(--ease);
}
.chatw-btn:hover{background:#2C2721}
.chatw-btn svg{display:block;position:relative;z-index:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}

/* The orb. Its dark centre is the button's own --deep background; only the rim
   is drawn, by inset shadows that travel as the layer rotates. It sits on its
   own element rather than the button so the bubble icon does not rotate with
   it, and it carries the 0% frame as a static shadow so that switching the
   animation off leaves an orb rather than a bare dark disc. */
.chatw-orb{
  position:absolute;inset:0;border-radius:50%;
  box-shadow:0 3px 7px 0 #FBBF8E inset, 0 7px 11px 0 #F26522 inset,
             0 21px 21px 0 #B84109 inset,
             0 0 2px 1px rgba(242,101,34,.35), 0 0 5px 1px rgba(184,65,9,.25);
  animation:chatw-orb 5s linear infinite;
}
@keyframes chatw-orb{
  0%{transform:rotate(90deg);
     box-shadow:0 3px 7px 0 #FBBF8E inset, 0 7px 11px 0 #F26522 inset,
                0 21px 21px 0 #B84109 inset,
                0 0 2px 1px rgba(242,101,34,.35), 0 0 5px 1px rgba(184,65,9,.25)}
  50%{transform:rotate(270deg);
     box-shadow:0 3px 7px 0 #FFD9BC inset, 0 7px 3px 0 #E4580F inset,
                0 14px 21px 0 #F26522 inset,
                0 0 2px 1px rgba(242,101,34,.35), 0 0 5px 1px rgba(184,65,9,.25)}
  100%{transform:rotate(450deg);
     box-shadow:0 3px 7px 0 #FBBF8E inset, 0 7px 11px 0 #F26522 inset,
                0 21px 21px 0 #B84109 inset,
                0 0 2px 1px rgba(242,101,34,.35), 0 0 5px 1px rgba(184,65,9,.25)}
}
.chatw-btn .x{display:none}
.chatw.open .chatw-btn .m{display:none}
.chatw.open .chatw-btn .x{display:block}

.chatw-panel{
  position:fixed;inset-inline-end:20px;bottom:88px;z-index:80;
  width:min(360px, calc(100vw - 40px));height:min(520px, calc(100vh - 140px));
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.7);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(16px) scale(.98);opacity:0;visibility:hidden;
  transition:transform .4s var(--ease-sheet), opacity .3s var(--ease), visibility 0s .4s;
}
.chatw.open .chatw-panel{
  transform:none;opacity:1;visibility:visible;
  transition:transform .4s var(--ease-sheet), opacity .3s var(--ease);
}
@media (max-width:480px){
  .chatw-panel{inset-inline:12px;bottom:88px;width:auto}
}

.chatw-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:14px 18px;background:var(--deep);color:#fff;
}
.chatw-head b{font-family:var(--display);font-weight:800;font-size:.9375rem;display:block}
.chatw-head span{display:block;font-size:.75rem;color:#B7B0A6;margin-top:2px}
.chatw-x{
  flex:none;display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,.12);color:#fff;border:0;cursor:pointer;
}

.chatw-msgs{flex:1;overflow-y:auto;padding:16px;display:grid;gap:10px;align-content:start}
.chatw-msg{
  max-width:84%;padding:10px 14px;border-radius:14px;
  font-size:.9375rem;line-height:1.7;white-space:pre-wrap;
}
.chatw-msg.bot{background:var(--shell);color:var(--ink);justify-self:start}
.chatw-msg.user{background:var(--deep);color:#fff;justify-self:end}

.chatw-typing{justify-self:start;display:flex;gap:4px;padding:10px 14px}
.chatw-typing i{width:6px;height:6px;border-radius:50%;background:#B9B4AA;animation:chatw-bounce 1.1s ease-in-out infinite}
.chatw-typing i:nth-child(2){animation-delay:.15s}
.chatw-typing i:nth-child(3){animation-delay:.3s}
@keyframes chatw-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.chatw-foot{flex:none;margin:0;padding:8px 16px;font-size:.75rem;color:var(--muted);border-top:1px solid var(--line)}
.chatw-foot a{color:var(--orange-ink);font-weight:700;text-decoration:none}
.chatw-foot a:hover{text-decoration:underline}

.chatw-form{flex:none;display:flex;gap:8px;padding:12px 16px 16px}
.chatw-input{
  flex:1;min-width:0;font-family:var(--body);font-size:.9375rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:10px 16px;min-height:44px;
}
.chatw-input:hover{border-color:#CFCCC3}
.chatw-input:focus{background:var(--surface);border-color:var(--orange-ink);outline:none}

.chatw-send{
  flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--orange-ink);color:#fff;border:0;cursor:pointer;
  transition:background-color .3s var(--ease);
}
.chatw-send:hover{background:var(--orange-ink-hover)}
.chatw-send:disabled{opacity:.5;cursor:default}
.chatw-send svg{display:block;transition:transform .3s var(--ease)}
.chatw-send:hover svg{transform:rotate(45deg)}

@media (prefers-reduced-motion:reduce){
  .chatw-btn,.chatw-panel,.chatw-send,.chatw-send svg{transition:none}
  .chatw-typing i{animation:none}
  .chatw-orb{animation:none}
}