/* ==========================================================
   HashHost — test12 — «رحلة الكاميرا» / The Camera Journey
   One bold element: a single 3-D scene with four stations on a
   path, flown by the scroll. Everything below it is quiet.
   ========================================================== */

/* ------------------------------------------------------------- tokens */
:root{
  --void:#000000;
  --shell:#050505;
  --warm:#F3EDE3;
  --warm-2:#A29B92;
  --aqua:#4FD1D9;
  --aqua-deep:#12616E;
  --amber:#F5A524;
  --gold:#D2A03C;
  --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:"Vazirmatn","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; background:var(--void); }
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; }

#grain{
  position:fixed; inset:-1px; z-index:3; pointer-events:none;
  opacity:.045; 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,.5);
  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;
}

/* --------------------------------------------------------------- type */
h1,h2,h3{ margin:0; font-weight:300; }
h2{
  font-size:clamp(26px,3.8vw,52px);
  line-height:1.16;
  letter-spacing:.012em;
  margin-block-end:clamp(22px,3.4vh,44px);
}
h3{ font-size:1rem; }
[lang="ar"] h2{ line-height:1.42; 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 · the journey (pinned) */
#journey{
  position:relative;
  block-size:420vh;
  block-size:420svh;
}
.jr-pin{
  position:sticky; inset-block-start:0;
  block-size:100vh; block-size:100svh;
  overflow:hidden;
  background:var(--void);
}
.jr-gl{
  position:absolute; inset:0; z-index:0;
  inline-size:100%; block-size:100%; display:block;
}
/* Two scrims, not one. A heavy bottom wash would have drowned the
   reservoir, which is the picture at the first station — so the weight
   is carried by a side wash on the reading edge instead, and the bottom
   one only has to lift the second line off the water. */
.jr-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, rgba(0,0,0,.88) 0%, rgba(0,0,0,.56) 20%,
                    rgba(0,0,0,.16) 38%, transparent 52%),
    linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.46) 13%,
                    rgba(0,0,0,.10) 30%, transparent 44%),
    linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.14) 12%, transparent 22%),
    radial-gradient(132% 96% at 50% 44%, transparent 44%, rgba(0,0,0,.52) 100%);
}
[dir="rtl"] .jr-scrim{
  background:
    linear-gradient(to left, rgba(0,0,0,.88) 0%, rgba(0,0,0,.56) 20%,
                    rgba(0,0,0,.16) 38%, transparent 52%),
    linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.46) 13%,
                    rgba(0,0,0,.10) 30%, transparent 44%),
    linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.14) 12%, transparent 22%),
    radial-gradient(132% 96% at 50% 44%, transparent 44%, rgba(0,0,0,.52) 100%);
}

.jr-copy{
  position:absolute; z-index:2;
  inset-inline-start:var(--gutter);
  inset-block-end:clamp(78px,13vh,138px);
  inline-size:min(600px, calc(100% - var(--gutter) * 2 - 46px));
  display:grid;
}
/* visibility, not just opacity: an invisible stage must also be out of
   the tab order, or the last station's button is reachable from the first */
.jr-stage{
  grid-area:1/1; align-self:end;
  opacity:0; visibility:hidden; transform:translateY(10px); pointer-events:none;
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out),
             visibility 0s linear .55s;
}
.jr-pin[data-stage="0"] .jr-stage[data-i="0"],
.jr-pin[data-stage="1"] .jr-stage[data-i="1"],
.jr-pin[data-stage="2"] .jr-stage[data-i="2"],
.jr-pin[data-stage="3"] .jr-stage[data-i="3"]{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition-delay:0s,0s,0s;
}
.jr-stage h1,.jr-stage h2{
  margin:0;
  font-size:clamp(27px,4.2vw,56px);
  line-height:1.12;
  letter-spacing:.012em;
  max-inline-size:17ch;
}
[lang="ar"] .jr-stage h1,[lang="ar"] .jr-stage h2{ line-height:1.42; letter-spacing:0; }
[lang="ka"] .jr-stage h1,[lang="ka"] .jr-stage h2{ font-size:clamp(25px,3.5vw,46px); }
[lang="ru"] .jr-stage h1,[lang="ru"] .jr-stage h2{ font-size:clamp(26px,3.8vw,50px); }
.jr-stage p{
  margin-block-start:clamp(14px,2vh,22px);
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.8; color:var(--warm-2);
  max-inline-size:50ch;
}
.jr-btn{ margin-block-start:clamp(20px,3vh,30px); }
.jr-shot{ display:none; }
.btc-mark{ display:none; }

/* the hint shows once, at the very top of the journey */
.jr-hint{
  position:absolute; z-index:3; inset-inline:0;
  inset-block-end:clamp(20px,3.4vh,34px);
  text-align:center; font-size:13px; letter-spacing:.01em;
  color:var(--warm-2);
  opacity:0; transition:opacity .5s var(--ease); pointer-events:none;
}
.jr-pin[data-hint="1"] .jr-hint{ opacity:.85; }

/* the rail carries how far along the journey is, not only which stop */
.jr-rail{
  position:absolute; z-index:4;
  inset-inline-end:clamp(12px,2.2vw,34px);
  inset-block-start:50%; transform:translateY(-50%);
  display:grid; gap:clamp(13px,2.2vh,20px); justify-items:center;
}
.jr-rail::before{
  content:""; position:absolute; inset-block:-4px; inset-inline-start:50%;
  inline-size:1px; margin-inline-start:-.5px;
  background:rgba(243,237,227,.16);
}
.jr-rail-fill{
  position:absolute; inset-block-start:-4px; inset-inline-start:50%;
  inline-size:1px; margin-inline-start:-.5px;
  block-size:calc(100% + 8px);
  background:var(--warm); opacity:.42;
  transform-origin:top; transform:scaleY(var(--jp,0));
}
.jr-dot{
  position:relative; inline-size:22px; block-size:22px;
  display:grid; place-items:center; border-radius:50%;
}
.jr-dot::after{
  content:""; inline-size:7px; block-size:7px; border-radius:50%;
  background:rgba(243,237,227,.30);
  transition:inline-size .45s var(--ease-out), block-size .45s var(--ease-out),
             background .45s var(--ease), box-shadow .45s var(--ease);
}
.jr-dot:hover::after{ background:var(--warm-2); }
.jr-dot[aria-current="true"]::after{ inline-size:11px; block-size:11px; background:var(--warm); }
.jr-pin[data-stage="0"] .jr-dot[aria-current="true"]::after,
.jr-pin[data-stage="1"] .jr-dot[aria-current="true"]::after{
  background:var(--aqua); box-shadow:0 0 13px rgba(79,209,217,.7);
}
.jr-pin[data-stage="2"] .jr-dot[aria-current="true"]::after{
  background:var(--amber); box-shadow:0 0 13px rgba(245,165,36,.7);
}
.jr-pin[data-stage="3"] .jr-dot[aria-current="true"]::after{
  background:var(--gold); box-shadow:0 0 13px rgba(210,160,60,.75);
}

/* ------------------------ the still journey: no WebGL, or reduced motion */
.no-gl #journey{ block-size:auto; }
.no-gl .jr-pin{ position:static; block-size:auto; overflow:visible; }
.no-gl .jr-gl,
.no-gl .jr-scrim,
.no-gl .jr-rail,
.no-gl .jr-hint{ display:none; }
.no-gl .jr-copy{
  position:static; display:block;
  inline-size:auto; max-inline-size:none;
  inset-inline-start:auto; inset-block-end:auto;
}
.no-gl .jr-stage{
  position:relative; opacity:1; visibility:visible; transform:none; pointer-events:auto;
  min-block-size:min(84svh,780px);
  display:flex; align-items:flex-end;
  padding-block:calc(var(--bar-h) + 40px) clamp(38px,7vh,74px);
  padding-inline:var(--gutter);
  transition:none;
}
.no-gl .jr-shot{
  display:block; position:absolute; inset:0; z-index:0;
  background-color:var(--void);
  background-size:cover; background-position:50% 50%; background-repeat:no-repeat;
}
.no-gl .jr-shot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.95) 3%, rgba(0,0,0,.64) 32%,
             rgba(0,0,0,.22) 60%, rgba(0,0,0,.52) 100%);
}
.no-gl .jr-text{ position:relative; z-index:1; max-inline-size:min(620px,100%); }
.no-gl .jr-s1 .jr-shot{ background-image:url("../images/dam.webp"); }
.no-gl .jr-s2 .jr-shot{ background-image:url("../images/valley.webp"); }
.no-gl .jr-s3 .jr-shot{ background-image:url("../images/miner.webp"); }
.no-gl .jr-s4 .jr-shot{
  background-image:
    radial-gradient(1.5px 1.5px at 9% 14%, rgba(243,237,227,.9), transparent),
    radial-gradient(1.2px 1.2px at 21% 31%, rgba(243,237,227,.6), transparent),
    radial-gradient(1.6px 1.6px at 33% 9%, rgba(243,237,227,.8), transparent),
    radial-gradient(1.1px 1.1px at 44% 24%, rgba(243,237,227,.5), transparent),
    radial-gradient(1.7px 1.7px at 57% 13%, rgba(243,237,227,.85), transparent),
    radial-gradient(1.2px 1.2px at 68% 30%, rgba(243,237,227,.55), transparent),
    radial-gradient(1.4px 1.4px at 79% 8%, rgba(243,237,227,.75), transparent),
    radial-gradient(1.1px 1.1px at 91% 22%, rgba(243,237,227,.5), transparent),
    radial-gradient(1.3px 1.3px at 6% 44%, rgba(243,237,227,.6), transparent),
    radial-gradient(1.6px 1.6px at 17% 57%, rgba(243,237,227,.8), transparent),
    radial-gradient(1.1px 1.1px at 29% 47%, rgba(243,237,227,.45), transparent),
    radial-gradient(1.5px 1.5px at 41% 62%, rgba(243,237,227,.7), transparent),
    radial-gradient(1.2px 1.2px at 63% 52%, rgba(243,237,227,.55), transparent),
    radial-gradient(1.7px 1.7px at 74% 66%, rgba(243,237,227,.8), transparent),
    radial-gradient(1.1px 1.1px at 86% 49%, rgba(243,237,227,.45), transparent),
    radial-gradient(1.4px 1.4px at 95% 63%, rgba(243,237,227,.65), transparent),
    radial-gradient(1.2px 1.2px at 13% 77%, rgba(243,237,227,.5), transparent),
    radial-gradient(1.5px 1.5px at 36% 84%, rgba(243,237,227,.6), transparent),
    radial-gradient(1.1px 1.1px at 58% 79%, rgba(243,237,227,.4), transparent),
    radial-gradient(1.3px 1.3px at 82% 88%, rgba(243,237,227,.55), transparent),
    radial-gradient(60vmin 60vmin at 50% 30%, rgba(210,160,60,.14), transparent 70%);
}
.no-gl .jr-s4 .jr-shot::after{
  background:linear-gradient(to top, rgba(0,0,0,.92) 2%, rgba(0,0,0,.42) 30%, transparent 58%);
}
/* the official Bitcoin logo file, shown as it is — no recolouring */
.no-gl .jr-s4 .btc-mark{
  display:block; position:absolute; z-index:1;
  inset-block-start:15%; inset-inline:0; margin-inline:auto;
  inline-size:min(186px,36vw); block-size:auto;
  filter:drop-shadow(0 0 34px rgba(247,147,26,.42));
}

/* --------------------------------------------------------- 2 · 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; }

/* ------------------------------------------------ 4 · 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:24ch;
  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%);
}

/* ------------------------------------------------------- 5 · 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; }

/* --------------------------------------------------------- 6 · 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;
}

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

@media (max-width:860px){
  :root{ --bar-h:62px; }
  .bar-nav{ display:none; }
  #lang-switch{ margin-inline-start:auto; }
  #journey{ block-size:400vh; block-size:400svh; }
  /* the copy runs the full width here, so the side wash has no side to
     sit on — the bottom carries it alone */
  .jr-scrim,[dir="rtl"] .jr-scrim{
    background:
      linear-gradient(to top, rgba(0,0,0,.93) 0%, rgba(0,0,0,.72) 16%,
                      rgba(0,0,0,.24) 38%, transparent 54%),
      linear-gradient(to bottom, rgba(0,0,0,.74) 0%, rgba(0,0,0,.14) 13%, transparent 24%),
      radial-gradient(128% 94% at 50% 40%, transparent 44%, rgba(0,0,0,.5) 100%);
  }
  .jr-copy{
    inline-size:calc(100% - var(--gutter) * 2 - 34px);
    inset-block-end:clamp(66px,11vh,104px);
  }
  .jr-stage h1,.jr-stage h2{ max-inline-size:14ch; }
  .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; }
  .jr-rail{ inset-inline-end:6px; gap:12px; }
  .jr-dot{ inline-size:18px; block-size:18px; }
  .jr-stage p{ font-size:15px; }
  .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; }
  .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;
  }
}