/* ==========================================================
   HashHost — test9 — «النواة» / The Core
   One bold element: the energy orb. Everything else is quiet.
   ========================================================== */

/* ------------------------------------------------------------- tokens */
:root{
  --void:#000000;
  --shell:#050505;
  --warm:#F3EDE3;
  --warm-2:#A29B92;
  --amber:#F5A524;
  --edge:rgba(243,237,227,.11);
  --edge-soft:rgba(243,237,227,.06);

  --gutter:clamp(20px,4vw,64px);
  --bar-h:66px;
  --measure:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --font:"Readex Pro","Noto Sans","Noto Sans Georgian",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.i18n-boot body{ opacity:0; }

body{
  margin:0;
  background:var(--void);
  color:var(--warm);
  font-family:var(--font);
  font-weight:300;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
::selection{ background:var(--amber); color:#000; }

:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }

.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:fixed; inset-inline-start:8px; top:-100px; z-index:120;
  background:var(--amber); color:#000; padding:10px 16px; border-radius:8px;
  font-weight:500; transition:top .2s var(--ease);
}
.skip:focus{ top:8px; }

/* --------------------------------------------------------- the scene */
#scene{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  --sx:0vw; --sy:0vh; --ss:1; --so:1;
  /* base placement: the orb sits toward the end edge so the reading keeps
     the start edge of the frame */
  --ox:26vw; --oy:0vh;
}
[dir="rtl"] #scene{ --ox:-26vw; }

#scene-stage{
  position:absolute; inset:0;
  transform:translate3d(calc(var(--ox) + var(--sx)),calc(var(--oy) + var(--sy)),0)
            scale(var(--ss));
  transform-origin:50% 50%;
  opacity:var(--so);
  will-change:transform,opacity;
}
#scene-stage canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
#scene-stars{ z-index:0; }
#scene-orb{ z-index:1; }

/* static stand-in when WebGL is unavailable or motion is reduced */
.scene-fb{ display:none; }
.no-scene .scene-fb{
  display:block; position:absolute; inset:0;
  transform:translate3d(var(--ox),var(--oy),0);
  background:
    /* the light on the near shoulder */
    radial-gradient(circle 31vmin at 43% 37%,
      rgba(255,236,196,.72), rgba(255,198,120,.20) 34%, transparent 58%),
    /* the body of the core, with a hard edge where the orb ends */
    radial-gradient(circle 31vmin at 50% 50%,
      #FFD89C 0%, #F0AC46 44%, #C97F22 64%, #7A4A10 75%, rgba(122,74,16,0) 77%),
    /* the halo it throws */
    radial-gradient(circle 52vmin at 50% 50%,
      rgba(245,165,36,.26), rgba(245,165,36,.08) 46%, transparent 72%);
}
.no-scene #scene-stage{ display:none; }
.no-scene #scene{ --sx:0vw; --sy:0vh; --ss:1; --so:1; }

#vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(118% 90% at 50% 46%, transparent 34%, rgba(0,0,0,.72) 100%);
}
#grain{
  position:fixed; inset:-1px; z-index:3; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay; background-size:200px 200px;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- header */
.bar{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:50;
  height:var(--bar-h);
  display:flex; align-items:center; gap:clamp(10px,2vw,28px);
  padding-inline:var(--gutter);
  background:rgba(4,4,4,.55);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-block-end:1px solid var(--edge-soft);
}
.brand{
  display:flex; align-items:center; gap:9px;
  font-size:15px; font-weight:500; letter-spacing:.01em; white-space:nowrap;
}
[lang="ar"] .brand{ letter-spacing:0; }
.brand-mark{
  width:11px; height:11px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 14px rgba(245,165,36,.85), 0 0 3px rgba(255,220,170,.9) inset;
}
.bar-nav{ display:flex; gap:clamp(14px,2.2vw,32px); margin-inline-start:auto; }
.bar-nav a{
  font-size:14px; color:var(--warm-2);
  transition:color .3s var(--ease);
  padding-block:6px;
}
.bar-nav a:hover{ color:var(--warm); }
.bar-cta{ flex:0 0 auto; }

/* language switcher (markup is built by js/i18n.js) */
.lang-current{
  display:flex; align-items:center; gap:7px;
  padding:7px 11px; border:1px solid var(--edge); border-radius:999px;
  font-size:13px; color:var(--warm-2);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.lang-current:hover{ border-color:rgba(243,237,227,.26); color:var(--warm); }
.lang-flag{ font-size:14px; line-height:1; }
.lang-code{ font-size:12px; letter-spacing:.04em; }
.lang-caret{
  width:7px; height:7px; border-right:1px solid currentColor;
  border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px);
  opacity:.65;
}
.lang-caret::before{ content:""; }
.lang-menu{
  position:fixed; z-index:90; margin:0; padding:6px; list-style:none;
  min-width:172px; border-radius:14px;
  background:rgba(8,8,8,.92);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--edge);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.lang-menu.open{ opacity:1; visibility:visible; transform:none; }
.lang-opt{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 11px; border-radius:9px; font-size:14px; color:var(--warm-2);
  text-align:start;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.lang-opt:hover{ background:rgba(243,237,227,.06); color:var(--warm); }
.lang-opt.active{ color:var(--warm); }
.lang-opt.active .lang-code{ color:var(--amber); }
.lang-name{ flex:1 1 auto; }

/* ------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 22px; border-radius:999px;
  font-size:14px; font-weight:500; line-height:1.2; white-space:nowrap;
  border:1px solid transparent;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.btn-amber{ background:var(--amber); color:#000; }
.btn-amber:hover{ background:#FFC25A; }
.btn-amber:active{ transform:translateY(1px); }
.btn-plain{ border-color:var(--edge); color:var(--warm); }
.btn-plain:hover{ border-color:rgba(243,237,227,.34); background:rgba(243,237,227,.05); }
.bar-cta{ padding:9px 16px; font-size:13px; }

/* ------------------------------------------------------------- layout */
main{ position:relative; z-index:10; }
.wrap{
  width:100%; max-width:var(--measure); margin-inline:auto;
  padding-inline:var(--gutter);
}
.sec{
  position:relative;
  padding-block:clamp(82px,13vh,168px);
  overflow-x:clip;
}
.sec::before{
  content:""; position:absolute; inset:-14% -6%; z-index:-1; pointer-events:none;
  background:radial-gradient(86% 58% at 34% 50%, rgba(0,0,0,.90), rgba(0,0,0,.66) 46%,
    rgba(0,0,0,.24) 74%, transparent);
  -webkit-mask-image:linear-gradient(transparent, #000 34%, #000 66%, transparent);
          mask-image:linear-gradient(transparent, #000 34%, #000 66%, transparent);
}
[dir="rtl"] .sec::before{
  background:radial-gradient(86% 58% at 66% 50%, rgba(0,0,0,.90), rgba(0,0,0,.66) 46%,
    rgba(0,0,0,.24) 74%, transparent);
}

/* --------------------------------------------------------------- type */
h1,h2,h3{ margin:0; font-weight:300; }
h1{
  font-size:clamp(32px,5.4vw,74px);
  line-height:1.08;
  letter-spacing:.012em;
}
h1 span{ display:block; }
h1 span + span{ color:var(--warm-2); }
h2{
  font-size:clamp(26px,3.8vw,52px);
  line-height:1.15;
  letter-spacing:.012em;
  margin-block-end:clamp(22px,3.4vh,44px);
}
h3{ font-size:1rem; }
[lang="ar"] h1{ line-height:1.4; letter-spacing:0; }
/* Georgian and Cyrillic set much wider than Latin at the same size, and the
   headline is two full sentences — step them down so the call to action stays
   above the fold on a 900-tall frame */
[lang="ka"] h1{ font-size:clamp(27px,4.1vw,55px); }
[lang="ru"] h1{ font-size:clamp(29px,4.7vw,63px); }
[lang="ar"] h2{ line-height:1.4; letter-spacing:0; }
p{ margin:0; }
.lead{
  margin-block-start:clamp(18px,2.6vh,28px);
  font-size:clamp(15px,1.1vw,18px);
  line-height:1.8;
  color:var(--warm-2);
  max-width:56ch;
}
.note{
  margin-block-start:18px;
  font-size:13.5px; line-height:1.7; color:var(--warm-2);
  max-width:62ch;
}
.lbl{ font-size:13px; font-weight:500; color:var(--warm-2); }

/* numbers are read left-to-right in every language */
b[data-tk], .dev-spec, .count input, .step-n{
  direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums;
}

/* ----------------------------------------------------------- 1 · hero */
#hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to right,
    rgba(0,0,0,.93) 0%, rgba(0,0,0,.74) 32%, rgba(0,0,0,.22) 60%, transparent 78%);
}
[dir="rtl"] #hero::before{
  background:linear-gradient(to left,
    rgba(0,0,0,.93) 0%, rgba(0,0,0,.74) 32%, rgba(0,0,0,.22) 60%, transparent 78%);
}
#hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:calc(var(--bar-h) + 40px) 64px;
  padding-inline:var(--gutter);
}
.hero-copy{
  position:relative; z-index:2;
  width:100%; max-width:var(--measure); margin-inline:auto;
  opacity:calc(1 - var(--hero-p,0) * .92);
  transform:translate3d(0, calc(var(--hero-p,0) * -46px), 0);
}
.hero-copy > *{ max-width:min(680px,48vw); }
.hero-act{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-block-start:clamp(28px,4.4vh,48px);
}

/* ------------------------------------------------ 2 · how the core runs */
.veil{
  border-block:1px solid var(--edge);
  background:rgba(243,237,227,.018);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
}
.claim{
  padding-block:clamp(26px,4.2vh,44px);
  padding-inline:clamp(18px,3vw,42px);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(14px,3vw,52px);
  align-items:baseline;
  position:relative;
}
.claim + .claim{ border-block-start:1px solid var(--edge-soft); }
.claim::before{
  content:""; position:absolute; inset-block-start:-1px; inset-inline-start:0;
  width:clamp(40px,7vw,96px); height:1px;
  background:linear-gradient(to right, var(--amber), rgba(245,165,36,0));
}
[dir="rtl"] .claim::before{ background:linear-gradient(to left, var(--amber), rgba(245,165,36,0)); }
.claim:first-child::before{ inset-block-start:-1px; }
.claim h3{
  font-size:clamp(21px,2.9vw,38px); font-weight:300; line-height:1.25;
  letter-spacing:.012em; max-width:18ch;
}
[lang="ar"] .claim h3{ line-height:1.45; letter-spacing:0; }
.claim p{ color:var(--warm-2); font-size:15.5px; line-height:1.8; max-width:52ch; }

/* --------------------------------------------------------- 3 · glass pane */
.pane{
  margin-block-start:clamp(28px,4vh,48px);
  padding:clamp(20px,3vw,38px);
  border:1px solid var(--edge);
  border-radius:22px;
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(245,165,36,.07), transparent 58%),
    rgba(255,255,255,.028);
  backdrop-filter:blur(22px) saturate(1.06);
  -webkit-backdrop-filter:blur(22px) saturate(1.06);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
}
[dir="rtl"] .pane{
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(245,165,36,.07), transparent 58%),
    rgba(255,255,255,.028);
}
.calc-head{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:16px; align-items:center;
  padding-block-end:14px; border-block-end:1px solid var(--edge-soft);
}
.calc-body{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(16px,3vw,38px); align-items:start;
}
.devs{ border:0; margin:0; padding:0; min-width:0; }
.dev{ display:block; cursor:pointer; position:relative; }
.dev input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0;
}
.dev-in{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) auto auto minmax(0,.9fr);
  gap:8px clamp(10px,1.8vw,26px);
  align-items:baseline;
  padding-block:15px; padding-inline:14px 8px;
  border-block-end:1px solid var(--edge-soft);
  transition:background .3s var(--ease), color .3s var(--ease);
  color:var(--warm-2);
}
.dev:last-child .dev-in{ border-block-end:0; }
.dev-in::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0;
  width:2px; background:var(--amber); opacity:0;
  transition:opacity .3s var(--ease);
}
.dev:hover .dev-in{ background:rgba(243,237,227,.035); }
.dev input:checked ~ .dev-in{ color:var(--warm); background:rgba(243,237,227,.05); }
.dev input:checked ~ .dev-in::before{ opacity:1; }
.dev input:focus-visible ~ .dev-in{ outline:2px solid var(--amber); outline-offset:-2px; }
.dev-name{ font-size:15px; font-weight:500; white-space:nowrap; }
.dev-tag{
  font-style:normal; font-size:11px; font-weight:500; color:var(--amber);
  margin-inline-start:9px; padding:2px 8px; border-radius:999px;
  border:1px solid rgba(245,165,36,.34);
}
.dev-spec{ font-size:13.5px; white-space:nowrap; }
.dev-spec b{ font-weight:500; color:inherit; }
.dev-cool{ font-size:12.5px; opacity:.72; }

.count{
  display:inline-flex; align-items:center;
  border:1px solid var(--edge); border-radius:999px; overflow:hidden;
}
.step{
  width:42px; height:42px; display:grid; place-items:center;
  font-size:19px; line-height:1; color:var(--warm-2);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.step:hover{ background:rgba(243,237,227,.07); color:var(--warm); }
.count input{
  width:54px; height:42px; text-align:center; border:0; background:none;
  font-size:16px; font-weight:500;
  border-inline:1px solid var(--edge-soft);
  -moz-appearance:textfield;
}
.count input::-webkit-outer-spin-button,
.count input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* readings — a ruled band, not cards */
.readout, .band{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  margin-block-start:clamp(22px,3vh,34px);
  border-block-start:1px solid var(--edge);
}
.band{
  margin-block-start:0;
  border-block-end:1px solid var(--edge);
}
.rd{ padding:clamp(18px,2.6vh,30px) clamp(10px,2vw,26px); min-width:0; }
.rd + .rd{ border-inline-start:1px solid var(--edge-soft); }
.rd b{
  display:block; font-weight:300;
  font-size:clamp(22px,3.2vw,44px); line-height:1.15; letter-spacing:-.01em;
  color:var(--warm);
  overflow-wrap:anywhere;
}
.band .rd b{ font-size:clamp(24px,3.3vw,46px); }
.band .rd{ display:flex; flex-direction:column; }
.band .rd span{ margin-block-start:auto; padding-block-start:10px; }
.rd em{
  display:block; font-style:normal; margin-block-start:3px;
  font-size:12.5px; line-height:1.5; color:var(--warm-2); opacity:.72;
}
.rd em:empty{ display:none; }
.rd span{
  display:block; margin-block-start:8px;
  font-size:13px; line-height:1.5; color:var(--warm-2);
}
.pane-cta{ margin-block-start:22px; }

/* ------------------------------------------------ 5 · the machine is yours */
.own-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,5vw,80px); align-items:center;
}
.own-copy p{ color:var(--warm-2); max-width:52ch; }
.claim-line{
  font-size:clamp(19px,2.2vw,30px); line-height:1.4; color:var(--warm) !important;
  margin-block-end:22px; max-width:22ch;
  letter-spacing:.012em;
}
[lang="ar"] .claim-line{ line-height:1.5; letter-spacing:0; }
.own-fig{ margin:0; }
.own-fig img{
  width:100%; height:auto;
  -webkit-mask-image:radial-gradient(76% 70% at 50% 50%, #000 42%, transparent 86%);
          mask-image:radial-gradient(76% 70% at 50% 50%, #000 42%, transparent 86%);
}

/* ------------------------------------------------------- 6 · three steps */
.steps{ list-style:none; margin:0; padding:0; border-block-start:1px solid var(--edge); }
.steps li{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,3vw,44px); align-items:start;
  padding-block:clamp(22px,3.4vh,38px);
  border-block-end:1px solid var(--edge-soft);
}
.step-n{
  font-size:15px; font-weight:500; color:var(--amber);
  padding-block-start:3px; min-width:20px;
}
.steps h3{ font-size:clamp(18px,2vw,26px); font-weight:300; line-height:1.3; letter-spacing:.012em; }
[lang="ar"] .steps h3{ line-height:1.45; letter-spacing:0; }
.steps p{ margin-block-start:10px; color:var(--warm-2); font-size:15.5px; max-width:64ch; }

/* --------------------------------------------------------- 7 · questions */
.qa-list{ border-block-start:1px solid var(--edge); }
.qa{ border-block-end:1px solid var(--edge-soft); }
.qa h3{ margin:0; font-size:inherit; font-weight:inherit; }
.qa-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:20px; text-align:start;
  padding-block:clamp(18px,2.6vh,26px);
  font-size:clamp(16px,1.5vw,21px); font-weight:300; line-height:1.45;
  color:var(--warm-2);
  transition:color .3s var(--ease);
}
.qa-q:hover{ color:var(--warm); }
.qa-q[aria-expanded="true"]{ color:var(--warm); }
.qa-mk{
  position:relative; flex:0 0 auto; width:14px; height:14px;
}
.qa-mk::before,.qa-mk::after{
  content:""; position:absolute; inset-block-start:50%; inset-inline-start:0;
  width:14px; height:1px; background:currentColor;
  transition:transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.qa-mk::after{ transform:rotate(90deg); }
.qa-q[aria-expanded="true"] .qa-mk::after{ transform:rotate(0deg); opacity:0; }
.qa-a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .42s var(--ease-out);
}
.qa-a > div{ overflow:hidden; }
.qa.open .qa-a{ grid-template-rows:1fr; }
.qa-a p{
  padding-block:0 clamp(20px,2.8vh,30px);
  padding-inline-end:clamp(0px,4vw,54px);
  color:var(--warm-2); font-size:15.5px; max-width:70ch;
}

/* ------------------------------------------------------------ 8 · form */
.quote-grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(26px,5vw,72px); align-items:start;
}
.quote-copy p{ color:var(--warm-2); max-width:46ch; }
.quote-grid .pane{ margin-block-start:0; }
.f{ margin-block-end:16px; }
.f label{
  display:block; margin-block-end:7px;
  font-size:13px; font-weight:500; color:var(--warm-2);
}
.f input,.f textarea{
  width:100%; padding:12px 14px;
  background:rgba(0,0,0,.34);
  border:1px solid var(--edge); border-radius:12px;
  font-size:15px; font-weight:300; line-height:1.6;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.f textarea{ resize:vertical; min-height:88px; }
.f input::placeholder,.f textarea::placeholder{ color:rgba(162,155,146,.62); }
.f input:hover,.f textarea:hover{ border-color:rgba(243,237,227,.22); }
.f input:focus,.f textarea:focus{
  outline:none; border-color:var(--amber); background:rgba(0,0,0,.5);
}
.botcheck{ position:absolute; opacity:0; height:0; width:0; overflow:hidden; }
#quote-form button[type="submit"]{ width:100%; margin-block-start:6px; }
#quote-form[disabled] button{ opacity:.6; }
#quote-form.sent{ display:none; }
.form-msg{ margin-block-start:14px; font-size:14.5px; line-height:1.7; }
.form-msg:empty{ display:none; }
.form-msg.ok{ color:var(--warm); }
.form-msg.bad{ color:#FFB4A0; }

/* ------------------------------------------------------------- footer */
.foot{
  position:relative; z-index:10;
  border-block-start:1px solid var(--edge-soft);
  background:var(--shell);
  padding-block:clamp(26px,4vh,38px);
}
.foot-in{
  display:flex; flex-wrap:wrap; gap:12px 26px;
  align-items:center; justify-content:space-between;
  font-size:13.5px; color:var(--warm-2);
}
.foot-in a{ transition:color .3s var(--ease); }
.foot-in a:hover{ color:var(--warm); }

/* --------------------------------------------------------- responsive */
@media (max-width:1040px){
  .quote-grid,.own-grid{ grid-template-columns:minmax(0,1fr); }
  .own-fig{ order:-1; max-width:520px; }
  .claim{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .claim h3{ max-width:26ch; }
}

@media (max-width:860px){
  :root{ --bar-h:62px; }
  .bar-nav{ display:none; }
  #lang-switch{ margin-inline-start:auto; }
  /* the column collapses: the core drops below the reading and the scrim
     turns with it, so the copy never sits on the bright face of the orb */
  #scene, [dir="rtl"] #scene{ --ox:0vw; --oy:19vh; }
  #hero::before, [dir="rtl"] #hero::before{
    background:linear-gradient(to bottom,
      rgba(0,0,0,.95) 0%, rgba(0,0,0,.91) 48%, rgba(0,0,0,.55) 70%, transparent 88%);
  }
  .hero-copy > *{ max-width:100%; }
  #hero{ min-height:92svh; }
  .hero-copy > *{ max-width:100%; }
  .calc-body{ grid-template-columns:minmax(0,1fr); }
  .calc-head{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .calc-head .lbl:last-child{ display:none; }
  .count{ margin-block-start:4px; }
  .dev-in{
    grid-template-columns:minmax(0,1fr) auto;
    padding-inline:12px 8px;
  }
  .dev-name{ grid-column:1 / -1; white-space:normal; }
  .dev-cool{ grid-column:1 / -1; text-align:start; opacity:.62; }
}

@media (max-width:640px){
  body{ font-size:15.5px; }
  .readout,.band{ grid-template-columns:minmax(0,1fr); }
  .rd + .rd{ border-inline-start:0; border-block-start:1px solid var(--edge-soft); }
  .rd{ padding-inline:2px; }
  .band .rd b,.rd b{ font-size:clamp(26px,8vw,38px); }
  .steps li{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .step-n{ padding-block-start:0; }
  .bar-cta{ padding:8px 13px; font-size:12px; }
  .brand{ font-size:14px; }
  .lang-current{ padding:6px 9px; }
  .hero-act .btn{ flex:1 1 auto; }
  .qa-a p{ padding-inline-end:0; }
  .pane{ padding:18px 16px; border-radius:18px; }
  .dev-in{ padding-inline:10px 4px; }
}

@media (max-width:380px){
  .bar{ gap:8px; }
  .lang-name{ display:none; }
}

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