/* ==========================================================
   HashHost — test8 — design.css
   Concept: "It's just a machine."
   White paper, true black bands, one type family, two coloured
   accents each with exactly one job.
   ========================================================== */

:root{
  --paper:#FFFFFF;
  --ink:#000000;
  --graphite:#2A2A2A;
  --rule:#D8D8D8;
  --heat:#FF6A1F;
  --amber:#F5A524;

  --wrap:1200px;
  --gut:clamp(20px,4vw,48px);

  --fs-body:1.0625rem;
  --fs-small:0.9375rem;

  --sp-sec:clamp(68px,8.5vw,116px);
}

html.i18n-boot body{opacity:0}

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

html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Almarai","Noto Sans","Noto Sans Georgian",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;
  font-size:var(--fs-body);
  line-height:1.8;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3{margin:0;font-weight:800}

p{margin:0}

a{color:inherit}

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

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.skip{
  position:absolute;top:0;inset-inline-start:0;z-index:99;
  background:var(--amber);color:var(--ink);
  padding:12px 20px;font-weight:700;text-decoration:none;
  transform:translateY(-200%);
}
.skip:focus{transform:translateY(0)}

/* ---------- paragraphs ---------- */
.p{
  max-width:62ch;
  color:var(--graphite);
  line-height:1.8;
}
.lead{margin-top:20px}

.note{
  max-width:70ch;
  margin-top:24px;
  color:var(--graphite);
  font-size:var(--fs-small);
  line-height:1.75;
}

/* ---------- button: the only amber on the page ---------- */
.btn{
  display:inline-block;
  background:var(--amber);
  color:var(--ink);
  font-weight:800;
  font-size:1rem;
  line-height:1.2;
  padding:17px 30px;
  border:0;
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s linear;
}
.btn:hover{background:#FFC25A}
.btn:active{background:#E08F14}
.btn-sm{padding:11px 18px;font-size:.9375rem;white-space:nowrap}
.btn-block{width:100%;text-align:center;margin-top:8px}

/* ==========================================================
   1. HERO — the single bold element
   ========================================================== */
.hero{
  background:var(--ink);
  color:var(--paper);
  padding-bottom:clamp(56px,7vw,96px);
}

.hero-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:22px;
  border-bottom:1px solid #1E1E1E;
}
.logo{font-weight:800;font-size:1.125rem;letter-spacing:0}
.hero-bar-end{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.hero-bar-link{
  font-size:var(--fs-small);
  font-weight:400;
  color:#D5D5D5;
  text-decoration:none;
  border-bottom:1px solid #4A4A4A;
  padding-bottom:2px;
}
.hero-bar-link:hover{color:var(--paper);border-color:var(--paper)}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,0.88fr);
  gap:clamp(28px,4vw,56px);
  align-items:center;
  padding-top:clamp(48px,7vw,104px);
}

.hero-h{
  font-size:clamp(2rem,8vw,4rem);
  line-height:1.42;
  letter-spacing:-0.005em;
}
html:not([lang="ar"]) .hero-h{line-height:1.12;letter-spacing:-0.02em}
html[lang="ru"] .hero-h,
html[lang="ka"] .hero-h{font-size:clamp(1.4rem,5.6vw,2.6rem)}

.hero-line{display:block}

.hero-sub{
  margin-top:clamp(24px,3vw,36px);
  max-width:46ch;
  color:#BDBDBD;
  font-size:clamp(1rem,1.25vw,1.1875rem);
  line-height:1.8;
}
.hero-say .btn{margin-top:clamp(28px,3.2vw,40px)}

.hero-fig{margin:0}
.hero-fig img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:#0A0A0A;
}

/* ==========================================================
   2. INSIDE — editorial rows, no cards
   ========================================================== */
.section{padding-block:var(--sp-sec)}

.sec-h{
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.4;
  letter-spacing:-0.01em;
}
html:not([lang="ar"]) .sec-h{line-height:1.18;letter-spacing:-0.02em}

.row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,64px);
  align-items:center;
  padding-block:clamp(40px,5vw,64px);
  border-top:1px solid var(--rule);
}
#inside .row:first-of-type{margin-top:clamp(40px,5vw,64px)}

.row-fig{margin:0}
.row-fig img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  background:var(--ink);
}

.row-h{
  font-size:clamp(1.375rem,2.2vw,1.75rem);
  line-height:1.5;
  margin-bottom:16px;
}
html:not([lang="ar"]) .row-h{line-height:1.3}

/* the heat row is the only place orange is allowed */
.row-heat .row-say{
  border-inline-start:3px solid var(--heat);
  padding-inline-start:clamp(18px,2.2vw,30px);
}
.row-fig-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.4vw,18px);
}
.row-fig-pair figure{margin:0}
.row-fig-pair img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:var(--ink);
}

.row-plain{grid-template-columns:minmax(0,1fr)}
.row-say-wide .p{max-width:58ch}

/* ==========================================================
   3. TICKER — the only motion on the page
   ========================================================== */
.ticker{
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
  padding-block:0;
}
.ticker-track{
  display:flex;
  width:max-content;
  animation:tk-ltr 58s linear infinite;
}
body.rtl .ticker-track{animation-name:tk-rtl}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track{animation-play-state:paused}

.ticker-seq{display:flex;flex:0 0 auto}

.tk{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding-inline:clamp(20px,2.6vw,38px);
  padding-block:16px;
  border-inline-end:1px solid #262626;
  white-space:nowrap;
  font-size:var(--fs-small);
}
.tk-k{color:#8C8C8C;font-weight:300}
.tk-v{color:var(--paper);font-weight:700;font-variant-numeric:tabular-nums}

@keyframes tk-ltr{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--tk-shift,50%)))}}
@keyframes tk-rtl{from{transform:translateX(0)}to{transform:translateX(var(--tk-shift,50%))}}

/* ==========================================================
   4. TABLE — a real table, no cards, no sparklines
   ========================================================== */
.tbl{
  width:100%;
  margin-top:clamp(32px,4vw,52px);
  border-collapse:collapse;
  text-align:start;
  font-size:var(--fs-small);
}
.tbl th,.tbl td{
  text-align:start;
  padding:18px 14px;
  vertical-align:middle;
  border-bottom:1px solid var(--rule);
}
.tbl thead th{
  font-weight:400;
  color:var(--graphite);
  border-bottom:1px solid var(--ink);
  padding-bottom:12px;
}
.tbl th:first-child,.tbl td:first-child{padding-inline-start:0}
.tbl th:last-child,.tbl td:last-child{padding-inline-end:0}

.c-dev{font-weight:800;font-size:1.0625rem;white-space:nowrap;unicode-bidi:isolate}
.cv{font-weight:400;font-variant-numeric:tabular-nums}
.cv.num{font-weight:700;font-size:1.0625rem}
.ck{display:none}
.tbl td.c-act{text-align:end}
.tbl tbody tr:last-child th,
.tbl tbody tr:last-child td{border-bottom:0}

/* ==========================================================
   5. FACTS — number-led rows, not cards
   ========================================================== */
.facts{margin:clamp(32px,4vw,52px) 0 0}
.fact{
  display:grid;
  grid-template-columns:clamp(120px,14vw,168px) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);
  padding-block:clamp(26px,3vw,36px);
  border-top:1px solid var(--rule);
}
.fact:last-child{border-bottom:1px solid var(--rule)}
.fact-n{
  margin:0;
  font-weight:800;
  font-size:clamp(1.875rem,3.4vw,2.75rem);
  line-height:1.15;
  white-space:nowrap;
}
.fact-u{font-size:.42em;font-weight:400;margin-inline-start:.28em}

/* mixed-script safety: figures keep Latin order inside Arabic text */
.fact-v,.cv,.tk-v{
  direction:ltr;
  unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;
}
.fact-d{margin:0}
.fact-a{
  margin-top:12px;
  font-size:var(--fs-small);
  font-weight:700;
  color:var(--ink);
}

/* ==========================================================
   6. COST — one line
   ========================================================== */
.cost-line{
  margin-top:clamp(28px,3.5vw,44px);
  padding-block:clamp(26px,3.4vw,42px);
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  font-weight:800;
  font-size:clamp(1.375rem,3.4vw,2.375rem);
  line-height:1.5;
  font-variant-numeric:tabular-nums;
}
html:not([lang="ar"]) .cost-line{line-height:1.25}
.cost-more{
  margin-top:clamp(26px,3vw,40px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,3vw,44px);
}
.cost-more .note{grid-column:1/-1;margin-top:0}

/* ==========================================================
   7. STEPS — a genuine sequence, so numbers are earned
   ========================================================== */
.steps{
  list-style:none;
  counter-reset:step;
  margin:clamp(32px,4vw,52px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,52px);
}
.step{counter-increment:step;border-top:2px solid var(--ink);padding-top:20px}
.step::before{
  content:counter(step);
  display:block;
  font-weight:800;
  font-size:1.5rem;
  line-height:1.2;
  margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.step-h{
  font-size:1.25rem;
  font-weight:700;
  line-height:1.5;
  margin-bottom:10px;
}
.step .p{max-width:42ch}

/* ==========================================================
   8. QUESTIONS
   ========================================================== */
.qa{margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--rule)}
.q{border-bottom:1px solid var(--rule)}
.q>summary{
  list-style:none;
  cursor:pointer;
  padding-block:22px;
  padding-inline-end:44px;
  position:relative;
  font-weight:700;
  font-size:1.0625rem;
  line-height:1.6;
}
.q>summary::-webkit-details-marker{display:none}
.q>summary::after{
  content:"";
  position:absolute;
  inset-inline-end:8px;
  top:50%;
  width:15px;height:15px;
  margin-top:-7px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/100% 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.5px 100% no-repeat;
}
.q[open]>summary::after{
  background:linear-gradient(var(--ink),var(--ink)) center/100% 1.5px no-repeat;
}
.q>.p{padding-bottom:26px;max-width:66ch}

/* ==========================================================
   9. CLOSING BLACK BAND + FORM
   ========================================================== */
.quote{
  background:var(--ink);
  color:var(--paper);
  padding-block:clamp(64px,8vw,112px);
}
.quote-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.95fr);
  gap:clamp(36px,5vw,80px);
  align-items:start;
}
.quote-h{
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.4;
}
html:not([lang="ar"]) .quote-h{line-height:1.18}
.quote-p{
  margin-top:20px;
  max-width:44ch;
  color:#BDBDBD;
  line-height:1.8;
}

.form{margin:0}
.f{margin-bottom:22px}
.f label{
  display:block;
  font-size:var(--fs-small);
  color:#9E9E9E;
  margin-bottom:8px;
}
.f input,.f textarea{
  width:100%;
  background:transparent;
  color:var(--paper);
  border:0;
  border-bottom:1px solid #4A4A4A;
  padding:10px 2px;
  font-family:inherit;
  font-size:1rem;
  font-weight:300;
  line-height:1.6;
  border-radius:0;
}
.f textarea{resize:vertical;min-height:72px}
/* phone numbers stay Latin-ordered but keep the RTL edge */
.f input[type="tel"]{direction:ltr}
body.rtl .f input[type="tel"]{text-align:right}
.f input::placeholder,.f textarea::placeholder{color:#8A8A8A}
.f input:focus,.f textarea:focus{
  outline:none;
  border-bottom-color:var(--amber);
}
.f input:focus-visible,.f textarea:focus-visible{outline:none}
.botcheck{display:none!important}

.form-msg{
  margin-top:18px;
  font-size:var(--fs-small);
  line-height:1.7;
  min-height:1px;
}
.form.sent .f,
.form.sent .btn{display:none}
.form.sent .form-msg{
  margin-top:0;
  font-size:1.125rem;
  font-weight:700;
  line-height:1.7;
  border-top:2px solid var(--amber);
  padding-top:22px;
}

.form-msg.ok{color:#8CE0A8}
.form-msg.bad{color:#FF9A6B}

/* ---------- footer ---------- */
.foot{
  padding-block:32px;
  border-top:1px solid var(--rule);
  font-size:var(--fs-small);
  color:var(--graphite);
}

/* ==========================================================
   LANGUAGE SWITCHER (markup built by i18n.js)
   ========================================================== */
#lang-switch{position:relative}
.lang-current{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  color:var(--paper);
  border:1px solid #3A3A3A;
  border-radius:2px;
  padding:8px 12px;
  font-family:inherit;
  font-size:var(--fs-small);
  font-weight:400;
  line-height:1;
  cursor:pointer;
}
.lang-current:hover{border-color:#7A7A7A}
.lang-flag{font-size:1rem;line-height:1}
.lang-code{font-weight:700;letter-spacing:.02em}
.lang-caret{
  width:0;height:0;
  border-inline-start:4px solid transparent;
  border-inline-end:4px solid transparent;
  border-top:5px solid currentColor;
  display:inline-block;
  opacity:.7;
}

.lang-menu{
  position:fixed;
  z-index:120;
  margin:0;padding:6px;
  list-style:none;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--ink);
  border-radius:2px;
  min-width:180px;
  box-shadow:none;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
.lang-menu.open{visibility:visible;opacity:1;pointer-events:auto}
.lang-opt{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  background:transparent;
  border:0;
  padding:10px 12px;
  font-family:inherit;
  font-size:var(--fs-small);
  color:var(--ink);
  cursor:pointer;
  text-align:start;
}
.lang-opt:hover{background:#F0F0F0}
.lang-opt.active{font-weight:800}
.lang-opt .lang-name{flex:1 1 auto}
.lang-opt .lang-code{color:var(--graphite);font-weight:400}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-fig{order:-1}
  .hero-fig img{aspect-ratio:16/10}
  .row,.row-heat{grid-template-columns:minmax(0,1fr)}
  .row-fig{order:-1}
  .cost-more{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .quote-grid{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:760px){
  .hero-bar-link{display:none}

  /* table collapses into labelled rows — no horizontal scroll */
  .tbl,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:100%}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .tbl tbody tr{
    border-top:1px solid var(--ink);
    padding-block:20px;
  }
  .tbl tbody tr:last-child{border-bottom:1px solid var(--ink)}
  .tbl th,.tbl td{
    border-bottom:0;
    padding:0;
  }
  .tbl .c-dev{margin-bottom:12px;white-space:normal}
  .tbl td{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    padding-block:6px;
    border-bottom:1px solid var(--rule);
  }
  .ck{display:block;color:var(--graphite)}
  .tbl td.c-act{
    display:block;
    border-bottom:0;
    margin-top:16px;
    text-align:start;
  }
  .btn-sm{width:100%;text-align:center}

  .fact{grid-template-columns:minmax(0,1fr);gap:10px}
  .row-fig-pair{gap:8px}
}

@media (max-width:420px){
  .hero-h{letter-spacing:0}
  .btn{width:100%;text-align:center}
  .hero-say .btn{width:auto;display:inline-block}
}

/* ==========================================================
   REDUCED MOTION — the ticker becomes a static strip
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ticker{padding-inline:var(--gut)}
  .ticker-track{
    animation:none!important;
    width:100%;
    flex-wrap:wrap;
  }
  .ticker-seq{
    flex:1 1 100%;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:0 clamp(16px,2.4vw,32px);
  }
  .ticker-seq:not(:first-child){display:none}
  .tk{border-inline-end:0;padding-inline:0}
}