/* ==========================================================
   HashHost — «الماء يصير بيتكوين»
   لوحة واحدة، عائلة خط واحدة، ثلاثة أوزان، عنصر جريء واحد.
   ========================================================== */

:root{
  --water:#EAF2F5;   /* أرضية الصفحة */
  --snow:#FFFFFF;    /* ألواح المحتوى */
  --ink:#0F3B4C;     /* كل النص، وقاعدة الصفحة */
  --river:#6FAFC2;   /* خطوط وأشرطة وتسطير — لا نص صغير */
  --silt:#41697C;    /* النص الثانوي على الفاتح */
  --mist:#A9C9D6;    /* النص الثانوي على الحبر */
  --amber:#F5A524;   /* الزر الأساسي فقط */

  --line:rgba(15,59,76,.14);
  --line-soft:rgba(15,59,76,.09);
  --river-soft:rgba(111,175,194,.16);

  --wrap:1100px;
  --gut:clamp(20px,5vw,36px);
  --sec:clamp(72px,9vw,116px);
  --r:2px;

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

html.i18n-boot body{opacity:0}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html,body{overflow-x:clip;max-width:100%}

body{
  margin:0;
  background:var(--water);
  color:var(--ink);
  font-family:var(--font);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.82;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:760px){ body{font-size:1.125rem} }

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

h1,h2,h3{
  margin:0;
  font-weight:300;
  letter-spacing:0;
  text-wrap:pretty;
}
h1{font-size:clamp(2.05rem,4.6vw,3.4rem);line-height:1.36}
h2{font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.4}
h3{font-size:1.125rem;font-weight:500;line-height:1.55}
@media (min-width:760px){ h3{font-size:1.18rem} }

p{margin:0}
a{color:inherit}

.num{
  direction:ltr;
  unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;
}

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

.skip{
  position:fixed;inset-block-start:-100px;inset-inline-start:12px;z-index:200;
  background:var(--ink);color:var(--snow);padding:.6rem 1rem;border-radius:var(--r);
  font-weight:500;text-decoration:none;
}
.skip:focus{inset-block-start:12px}

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

/* ---------- الأزرار ---------- */
.btn{
  display:inline-block;border:0;border-radius:var(--r);
  font-family:inherit;font-weight:700;font-size:1rem;line-height:1.4;
  padding:.85rem 1.5rem;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:filter .15s ease;
}
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-amber:hover{filter:brightness(.93)}
.btn-sm{padding:.5rem 1rem;font-size:.9375rem}

/* ---------- الهيدر ---------- */
.hdr{
  position:sticky;inset-block-start:0;z-index:60;
  background:rgba(234,242,245,.94);
  backdrop-filter:saturate(1.2) blur(8px);
  border-block-end:1px solid var(--line-soft);
}
.hdr-in{
  max-width:var(--wrap);margin-inline:auto;padding:.6rem var(--gut);
  display:flex;align-items:center;gap:1rem;
}
.brand{
  display:flex;align-items:center;gap:.5rem;
  font-weight:500;font-size:1.0625rem;text-decoration:none;flex:none;
}
.brand img{width:26px;height:26px}
.nav{display:none;gap:1.6rem;margin-inline-start:auto;font-size:.9375rem;font-weight:500}
.nav a{text-decoration:none;color:var(--silt);padding-block:.3rem}
.nav a:hover{color:var(--ink)}
.hdr-end{display:flex;align-items:center;gap:.7rem;margin-inline-start:auto}
@media (min-width:900px){
  .nav{display:flex}
  .hdr-end{margin-inline-start:1.6rem}
}
/* شاشات ضيقة: يبقى الزر كامل بلا قص — العلامة تبقى بالأيقونة وحدها */
@media (max-width:560px){
  .hdr-in{gap:.55rem;padding-inline:var(--gut)}
  .hdr-end{gap:.45rem}
  .brand span{display:none}
  .btn-sm{padding:.48rem .75rem;font-size:.875rem}
  .lang-current{padding:.35rem .5rem}
}

/* ---------- مبدّل اللغة ---------- */
#lang-switch{position:relative;flex:none}
.lang-current{
  display:flex;align-items:center;gap:.38rem;
  background:transparent;border:1px solid var(--line);border-radius:var(--r);
  padding:.4rem .6rem;cursor:pointer;
  font-family:inherit;font-size:.875rem;font-weight:500;color:var(--ink);
}
.lang-current:hover{border-color:var(--river)}
.lang-flag{font-size:1rem;line-height:1}
.lang-caret{
  width:7px;height:7px;flex:none;margin-inline-start:.1rem;
  border-right:1.5px solid var(--silt);border-bottom:1.5px solid var(--silt);
  transform:translateY(-2px) rotate(45deg);
}
.lang-menu{
  position:fixed;z-index:120;margin:0;padding:.3rem;
  list-style:none;min-width:170px;
  background:var(--snow);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 14px 34px -18px rgba(15,59,76,.5);
  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:.6rem;width:100%;
  background:transparent;border:0;border-radius:var(--r);
  padding:.5rem .6rem;cursor:pointer;text-align:start;
  font-family:inherit;font-size:.9375rem;font-weight:300;color:var(--ink);
}
.lang-opt:hover{background:var(--water)}
.lang-opt.active{font-weight:500;background:var(--river-soft)}
.lang-name{flex:1}
.lang-menu .lang-code{color:var(--silt);font-size:.8125rem}

/* ==========================================================
   ١. الهيرو + الحاسبة  — العنصر الجريء الوحيد
   ========================================================== */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--snow);
  padding-block:clamp(44px,7vw,84px) clamp(56px,8vw,96px);
  overflow:clip;
}
.hero-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(180deg,rgba(15,59,76,.82) 0%,rgba(15,59,76,.62) 45%,rgba(15,59,76,.86) 100%),
    url("../images/hero.webp");
  background-size:cover;
  background-position:center 40%;
}
.hero-in{position:relative;display:grid;gap:clamp(32px,5vw,56px)}
@media (min-width:980px){
  .hero-in{grid-template-columns:1fr minmax(390px,430px);align-items:center}
}
.hero-say h1{max-width:24ch;color:var(--snow)}
.hero-say .lead{
  margin-block-start:1.3rem;max-width:46ch;
  color:#DCEAF0;font-size:1.0625rem;line-height:1.85;
}
.hero-link{
  display:inline-block;margin-block-start:1.5rem;
  color:var(--snow);font-weight:500;font-size:.9375rem;
  text-decoration:none;
  border-block-end:2px solid var(--river);padding-block-end:3px;
}
.hero-link:hover{border-color:var(--snow)}

/* اللوح */
.calc{
  background:var(--snow);color:var(--ink);
  border-radius:var(--r);
  padding:clamp(20px,3.4vw,28px);
  box-shadow:0 26px 60px -28px rgba(7,32,42,.75);
}
.calc-title{font-size:1.0625rem;font-weight:500;line-height:1.5;margin-block-end:1.15rem}
.calc-field{margin-block-end:1.1rem}
.calc-field.row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.calc-label{display:block;font-size:.875rem;font-weight:500;color:var(--silt);margin-block-end:.5rem}
.calc-field.row .calc-label{margin-block-end:0}

.devs{display:grid;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dev{
  display:block;width:100%;text-align:start;cursor:pointer;
  background:transparent;border:0;border-block-end:1px solid var(--line-soft);
  border-inline-start:3px solid transparent;
  padding:.62rem .8rem;font-family:inherit;color:var(--ink);
}
.dev:last-child{border-block-end:0}
.dev:hover{background:var(--water)}
.dev.on{background:var(--river-soft);border-inline-start-color:var(--ink)}
.dev-name{display:block;font-size:.9375rem;font-weight:500;line-height:1.45}
.dev-spec{display:block;font-size:.8125rem;font-weight:300;line-height:1.5;color:var(--silt);unicode-bidi:isolate}

.stepper{display:flex;align-items:center;gap:.15rem;flex:none}
.step{
  width:34px;height:34px;flex:none;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:var(--r);
  font-family:inherit;font-size:1.05rem;font-weight:500;line-height:1;color:var(--ink);
}
.step:hover{border-color:var(--river);background:var(--water)}
.step-val{min-width:42px;text-align:center;font-size:1.05rem;font-weight:700}

/* الدفتر */
.ledger{margin:1.3rem 0 0;padding:0}
.led-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-block:.6rem;border-block-end:1px dotted var(--river);
}
.led-row dt{font-size:.9375rem;font-weight:300;color:var(--silt)}
.led-row dd{margin:0;font-size:1rem;font-weight:500}
.led-row dd.minus{color:var(--silt)}

.total{border-block-start:2px solid var(--ink);margin-block-start:.1rem;padding-block-start:.9rem}
.total-lbl{display:block;font-size:.875rem;font-weight:500;color:var(--silt)}
.total-num{
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  margin-block-start:.15rem;
}
.total-num .num{font-size:clamp(2.3rem,5.6vw,3.1rem);font-weight:700;line-height:1.15}
.total-per{font-size:.9375rem;font-weight:300;color:var(--silt)}
.total-btc{margin-block-start:.15rem;font-size:.9375rem;color:var(--silt)}
.calc-note{
  margin-block-start:1rem;padding-block-start:.85rem;border-block-start:1px solid var(--line-soft);
  font-size:.8125rem;line-height:1.7;color:var(--silt);
}

/* ==========================================================
   الأقسام
   ========================================================== */
.sec{padding-block:var(--sec)}
.sec-water{background:var(--water)}
.sec-snow{background:var(--snow)}
.sec-river{
  background-color:var(--water);
  background-image:
    linear-gradient(rgba(234,242,245,.945),rgba(234,242,245,.945)),
    url("../images/river.webp");
  background-size:cover;
  background-position:center;
}
.sec-ink{background:var(--ink);color:var(--snow)}

.sec h2{max-width:20ch}
.lead{
  margin-block-start:1rem;max-width:58ch;
  color:var(--silt);line-height:1.85;
}
.sec-ink .lead{color:var(--mist)}
.fine{
  margin-block-start:1.5rem;max-width:62ch;
  font-size:.875rem;line-height:1.75;color:var(--silt);
}

/* ---------- ٢. الشريط ---------- */
.valley{
  margin-block-start:clamp(28px,4vw,44px);
  border-radius:var(--r);
  background-color:var(--river);
  background-image:url("../images/valley.webp");
  background-size:cover;background-position:center 55%;
  aspect-ratio:16/7;min-height:150px;max-height:330px;
}
.flow{
  list-style:none;margin:clamp(28px,4vw,40px) 0 0;padding:0;
  display:grid;gap:1.8rem;
}
.flow li{position:relative;padding-inline-start:2.3rem;padding-block-end:.2rem}
.flow li::before{
  content:"";position:absolute;inset-block-start:.45rem;inset-inline-start:0;
  width:15px;height:15px;border-radius:50%;
  background:var(--water);border:2.5px solid var(--river);
}
.flow li.end::before{background:var(--amber);border-color:var(--amber)}
.flow li::after{
  content:"";position:absolute;
  inset-inline-start:6.5px;width:2px;
  inset-block-start:calc(.45rem + 15px);inset-block-end:-1.8rem;
  background-image:linear-gradient(to bottom,var(--river),var(--amber));
  background-size:100% 300%;
}
.flow li:nth-child(1)::after{background-position:0 0}
.flow li:nth-child(2)::after{background-position:0 50%}
.flow li:nth-child(3)::after{background-position:0 100%}
.flow li.end::after{display:none}
.flow h3{margin-block-end:.25rem}
.flow p{font-size:.9375rem;line-height:1.8;color:var(--silt);max-width:40ch}

@media (min-width:820px){
  .flow{grid-template-columns:repeat(4,1fr);gap:0}
  .flow li{padding-inline-start:0;padding-block-start:2.1rem;padding-inline-end:1.6rem}
  .flow li::before{inset-block-start:0;inset-inline-start:0}
  .flow li::after{
    inset-block:6.5px auto;height:2px;width:auto;
    inset-inline-start:15px;inset-inline-end:0;
    background-image:linear-gradient(to right,var(--river),var(--amber));
    background-size:300% 100%;
  }
  .flow li:nth-child(1)::after{background-position:0 0}
  .flow li:nth-child(2)::after{background-position:50% 0}
  .flow li:nth-child(3)::after{background-position:100% 0}
}
@media (min-width:820px){
  body.rtl .flow li::after{background-image:linear-gradient(to left,var(--river),var(--amber))}
  body.rtl .flow li:nth-child(1)::after{background-position:100% 0}
  body.rtl .flow li:nth-child(2)::after{background-position:50% 0}
  body.rtl .flow li:nth-child(3)::after{background-position:0 0}
}

/* ---------- ٣. الجدول ---------- */
.tbl-scroll{margin-block-start:clamp(28px,4vw,42px);overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;text-align:start}
.cmp th,.cmp td{
  text-align:start;vertical-align:top;
  padding:.95rem .8rem;
  border-block-end:1px solid var(--line-soft);
  font-size:.9375rem;line-height:1.7;
}
.cmp thead th{
  font-weight:500;font-size:.875rem;color:var(--silt);
  border-block-end:1px solid var(--line);padding-block:.6rem;
}
.cmp tbody th{font-weight:500;color:var(--ink)}
.cmp td{font-weight:300;color:var(--silt)}
.cmp .us{background:var(--river-soft)}
.cmp td.us{color:var(--ink)}
.cmp thead th.us{color:var(--ink)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-block-end:0}
.cmp th:first-child,.cmp td:first-child{padding-inline-start:0}
@media (max-width:560px){
  .cmp th,.cmp td{padding:.7rem .5rem;font-size:.84375rem;line-height:1.65}
  .cmp thead th{font-size:.8125rem}
}

/* ---------- ٤. وش تشتري ---------- */
.buy{display:grid;gap:clamp(28px,4vw,52px);align-items:center}
@media (min-width:860px){ .buy{grid-template-columns:minmax(0,4fr) minmax(0,5fr)} }
.buy-fig{margin:0}
.buy-fig img{
  width:100%;border-radius:var(--r);
  aspect-ratio:5/4;object-fit:cover;background:var(--river-soft);
}
.specs{list-style:none;margin:1.6rem 0 0;padding:0}
.specs li{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1rem;
  padding-block:.7rem;border-block-end:1px dotted var(--river);
}
.specs li:first-child{border-block-start:1px dotted var(--river)}
.specs span{font-weight:500;font-size:.9375rem;unicode-bidi:isolate}
.specs em{font-style:normal;font-size:.875rem;color:var(--silt);unicode-bidi:isolate}

/* ---------- ٥. التكلفة ---------- */
.cost{margin:clamp(28px,4vw,42px) 0 0;display:grid;gap:0}
@media (min-width:760px){ .cost{grid-template-columns:minmax(9rem,13rem) 1fr;column-gap:2.2rem} }
.cost dt{
  font-weight:500;font-size:1rem;
  padding-block:1.05rem .2rem;border-block-start:1px solid var(--line);
}
.cost dd{
  margin:0;font-size:.9375rem;line-height:1.8;color:var(--silt);
  padding-block:0 1.05rem;
}
@media (min-width:760px){
  .cost dt{padding-block:1.15rem}
  .cost dd{padding-block:1.15rem;border-block-start:1px solid var(--line)}
}

/* ---------- ٦. حال الشبكة ---------- */
.prose{
  margin-block-start:clamp(24px,3.4vw,36px);max-width:62ch;
  font-size:1.0625rem;line-height:1.95;
}
@media (min-width:760px){ .prose{font-size:1.1875rem} }
.live{
  font-weight:500;white-space:nowrap;
  direction:ltr;unicode-bidi:isolate;
  border-block-end:2px solid var(--river);
  padding-block-end:2px;
}

/* ---------- ٧. الخطوات ---------- */
.steps{
  counter-reset:s;list-style:none;
  margin:clamp(28px,4vw,42px) 0 0;padding:0;
}
.steps li{
  counter-increment:s;
  display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;
  padding-block:1.4rem;border-block-start:1px solid var(--line);
}
.steps li:last-child{border-block-end:1px solid var(--line)}
.steps li::before{
  content:counter(s);grid-row:1/3;
  font-size:1.5rem;font-weight:300;line-height:1.3;color:var(--river);
  font-variant-numeric:tabular-nums;
}
.steps h3{align-self:center}
.steps p{
  margin-block-start:.35rem;font-size:.9375rem;line-height:1.8;color:var(--silt);max-width:56ch;
}

/* ---------- ٨. الأسئلة ---------- */
.faq{margin-block-start:clamp(24px,3.4vw,38px);max-width:70ch;border-block-start:1px solid var(--line)}
.faq details{border-block-end:1px solid var(--line)}
.faq summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
  padding-block:1.05rem;cursor:pointer;list-style:none;
  font-weight:500;font-size:1rem;line-height:1.6;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:9px;height:9px;margin-block-start:.35rem;
  border-right:2px solid var(--river);border-bottom:2px solid var(--river);
  transform:rotate(45deg);transform-origin:center;
  transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{
  padding-block:0 1.15rem;margin:0;
  font-size:.9375rem;line-height:1.85;color:var(--silt);max-width:64ch;
}

/* ---------- ٩. النموذج ---------- */
.quote{display:grid;gap:clamp(30px,4vw,56px)}
@media (min-width:880px){ .quote{grid-template-columns:minmax(0,4fr) minmax(0,5fr)} }
.quote h2{color:var(--snow)}
.form{position:relative;display:grid;gap:1rem}
@media (min-width:600px){
  .form{grid-template-columns:1fr 1fr}
  .fld:nth-child(6),.fld:nth-child(7),.fld-go,.form-msg{grid-column:1/-1}
}
.botcheck{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fld{margin:0;display:grid;gap:.4rem}
.fld label{font-size:.875rem;font-weight:500;color:var(--mist)}
.fld input,.fld textarea{
  width:100%;font-family:inherit;font-size:1rem;font-weight:300;line-height:1.6;
  color:var(--snow);background:rgba(255,255,255,.06);
  border:1px solid rgba(169,201,214,.42);border-radius:var(--r);
  padding:.7rem .85rem;
}
.fld textarea{resize:vertical;min-height:92px}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(169,201,214,.75)}
.fld input:focus,.fld textarea:focus{border-color:var(--river);outline:none;background:rgba(255,255,255,.1)}
.fld input:focus-visible,.fld textarea:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.fld-go{display:flex;margin-block-start:.3rem}
.fld-go .btn{flex:1}
@media (min-width:600px){ .fld-go .btn{flex:0 0 auto} }
.sec-ink :focus-visible{outline-color:var(--amber)}
.form-msg{margin:0;font-size:.9375rem;line-height:1.75;min-height:0}
.form-msg.ok{color:var(--snow);border-inline-start:3px solid var(--amber);padding-inline-start:.9rem}
.form-msg.bad{color:#FFD9C7;border-inline-start:3px solid #FFD9C7;padding-inline-start:.9rem}

/* ---------- التذييل ---------- */
.foot{background:var(--ink);color:var(--mist);padding-block:2rem 2.4rem;border-block-start:1px solid rgba(169,201,214,.2)}
.foot-in{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.9375rem}
.foot a{color:var(--mist)}
.foot a:hover{color:var(--snow)}
.foot-note{margin-inline:0;margin-block-start:.9rem;font-size:.8125rem;line-height:1.7;color:rgba(169,201,214,.78);max-width:62ch}

/* ---------- حركة واحدة فقط، وتُلغى عند الطلب ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}