/* CoinLingo homepage visual layer. */

:root{
  --hp-bg:#050609;
  --hp-bg-soft:#090b10;
  --hp-ink:#f7f3ea;
  --hp-body:#c9c8c0;
  --hp-muted:#8e928d;
  --hp-line:rgba(247,243,234,.14);
  --hp-line-soft:rgba(247,243,234,.08);
  --hp-panel:#101319;
  --hp-panel-2:#151922;
  --hp-orange:#ff5b22;
  --hp-amber:#ffbd66;
  --hp-cyan:#5fd7d1;
  --hp-green:#8ddf9e;
  --hp-shadow:0 22px 46px rgba(0,0,0,.42);
}

body{
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 260px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 50% 0 / 112px 112px,
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px) 0 0 / 100% 112px,
    var(--hp-bg);
  color:var(--hp-body);
}

body::before{
  background:
    conic-gradient(from 215deg at 74% 16%, rgba(255,91,34,.30), transparent 20%, rgba(95,215,209,.20) 32%, transparent 50%, rgba(255,189,102,.15) 69%, transparent 82%),
    linear-gradient(126deg, transparent 0 52%, rgba(255,91,34,.16) 52% 53%, transparent 53% 100%),
    linear-gradient(154deg, transparent 0 63%, rgba(95,215,209,.12) 63% 64%, transparent 64% 100%);
  opacity:.9;
}

body::after{
  background:
    linear-gradient(90deg, rgba(5,6,9,.92), rgba(5,6,9,.54) 42%, rgba(5,6,9,.88)),
    linear-gradient(180deg, transparent, rgba(5,6,9,.82) 78%, var(--hp-bg));
}

.container{ max-width:1248px; }
h1,h2,h3,h4{ color:var(--hp-ink); letter-spacing:-.018em; }
.em{ color:var(--hp-orange); }

.nav{
  background:rgba(5,6,9,.82);
  border-bottom:1px solid var(--hp-line-soft);
  box-shadow:0 1px 0 rgba(255,255,255,.04), 0 16px 40px rgba(0,0,0,.24);
}
.nav-inner{ height:76px; }
.nav-logo{ gap:12px; color:var(--hp-ink); }
.nav-logo svg{
  width:34px;
  height:34px;
  padding:5px;
  border:1px solid var(--hp-line);
  border-radius:9px;
  background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.nav-mid{ gap:30px; }
.nav-mid a{ color:rgba(247,243,234,.60); font-weight:600; }
.nav-mid a:hover,.nav-mid a.active{ color:var(--hp-ink); }
.nav-mid a.active::after{
  height:3px;
  bottom:-8px;
  background:linear-gradient(90deg, var(--hp-orange), var(--hp-amber));
}
.lang-switch summary{
  border-radius:9px;
  border-color:var(--hp-line);
  background:rgba(255,255,255,.035);
}
.btn{ border-radius:9px; font-weight:700; letter-spacing:.01em; }
.btn-primary{
  color:#160905;
  background:linear-gradient(135deg, var(--hp-amber), var(--hp-orange) 58%, #ff7746);
  box-shadow:0 14px 26px rgba(255,91,34,.22), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-primary:hover{ filter:saturate(1.06) brightness(1.04); transform:translateY(-1px); }

.reg-wrap{
  min-height:calc(100vh - 76px);
  display:grid;
  align-items:center;
  padding:clamp(54px,7vw,92px) 0 clamp(58px,7vw,92px)!important;
  border-bottom:1px solid var(--hp-line-soft);
}
.reg-wrap::before{
  background:
    linear-gradient(90deg, rgba(95,215,209,.12), transparent 33%),
    linear-gradient(270deg, rgba(255,91,34,.17), transparent 42%);
}
.reg-wrap .container{ width:min(1248px,100%); }
.reg{
  max-width:none;
  padding:0 24px;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(360px,.78fr);
  gap:clamp(34px,6vw,78px);
  align-items:center;
  text-align:left;
}
.reg-main{
  position:relative;
  padding:0;
}
.reg-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 13px;
  border:1px solid rgba(95,215,209,.32);
  border-radius:999px;
  color:var(--hp-cyan);
  background:rgba(95,215,209,.07);
  letter-spacing:.02em;
}
.reg h2{
  margin:22px 0 18px;
  max-width:760px;
  font-size:clamp(3.2rem,7vw,6rem);
  line-height:.98;
  letter-spacing:-.032em;
}
.reg h2 .em{
  display:inline-block;
  color:var(--hp-orange);
  text-shadow:0 0 24px rgba(255,91,34,.22);
}
.reg-sub{
  max-width:640px;
  color:rgba(247,243,234,.70);
  font-size:clamp(1.03rem,1.4vw,1.2rem);
}
.reg-sub strong{ color:var(--hp-amber); }
.reg-actions{ justify-content:flex-start; margin-top:6px; }
.reg-actions .btn{ min-height:58px; padding-inline:28px; }
.reg-code{
  min-height:58px;
  border-radius:10px;
  background:rgba(247,243,234,.045);
  border-color:rgba(247,243,234,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.reg-code code{ color:var(--hp-amber); }
.reg-code button{ border-radius:8px; }
.reg-guide{
  color:var(--hp-cyan);
  font-weight:700;
}
.reg-note{ max-width:620px; color:rgba(201,200,192,.52); }
.reg-visual{
  display:block;
  position:relative;
}
.reg-visual::before{
  content:'';
  position:absolute;
  inset:-18px;
  border:1px solid rgba(95,215,209,.18);
  border-radius:14px;
  transform:rotate(-2deg);
}
.dash{
  position:relative;
  z-index:1;
  border-radius:12px;
  padding:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.015)),
    #080a0e;
  border:1px solid rgba(247,243,234,.16);
  box-shadow:var(--hp-shadow);
}
.dash-top{ margin-bottom:18px; }
.dash-pair,.dash-tag,.dash-fee .l,.dash-fee .old,.dash-fee .new,.dash-fee .badge{ letter-spacing:.02em; }
.dash-tag{ color:var(--hp-cyan); border-color:rgba(95,215,209,.42); }
.dash-chart{ filter:drop-shadow(0 14px 20px rgba(255,91,34,.14)); }
.dash-fee{
  border:1px solid rgba(247,243,234,.12);
  border-radius:9px;
  background:rgba(255,255,255,.04);
}
.dash-fee .new{ color:var(--hp-amber); }
.dash-fee .badge{ background:linear-gradient(135deg, var(--hp-cyan), var(--hp-green)); color:#06100a; }
.dash-actions span{ border-radius:8px; }
.dash-buy{ background:linear-gradient(135deg, var(--hp-orange), #ff7b4a); color:#160905; }
.dash-sell{ background:rgba(95,215,209,.10); color:var(--hp-cyan); }
.fx-dots i{ opacity:.65; box-shadow:0 0 18px rgba(255,91,34,.45); }

.hero{
  padding:clamp(76px,9vw,118px) 0 clamp(56px,7vw,86px);
  text-align:left;
  border-bottom:1px solid var(--hp-line-soft);
}
.hero::before,.hero::after{ opacity:.28; }
.hero .container{
  max-width:1248px;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(320px,.62fr);
  gap:clamp(28px,5vw,70px);
  align-items:end;
}
.hero-pill{
  grid-column:1;
  width:max-content;
  border-radius:999px;
  border-color:rgba(247,243,234,.14);
  background:rgba(247,243,234,.04);
}
.hero h1{
  grid-column:1;
  font-size:clamp(3.1rem,7.8vw,6rem);
  line-height:.96;
  margin-bottom:20px;
}
.hero-sub{
  grid-column:1;
  margin:0;
  max-width:620px;
  color:rgba(247,243,234,.66);
}
.hero-search{
  grid-column:2;
  grid-row:1 / span 4;
  align-self:stretch;
  max-width:none;
  margin:0;
  display:grid;
  grid-template-columns:auto 1fr;
  align-content:end;
  gap:18px 12px;
  padding:24px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border-color:rgba(247,243,234,.14);
  box-shadow:var(--hp-shadow);
}
.hero-search .mag{ color:var(--hp-cyan); }
.hero-search input{
  color:var(--hp-ink);
  font-size:1.05rem;
}
.hero-search .btn{ grid-column:1 / -1; width:100%; }

.stats{
  grid-column:1 / -1;
  width:100%;
  margin-top:60px;
  border:1px solid var(--hp-line-soft);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.stats-grid{ grid-template-columns:repeat(3,1fr); }
.stat{ padding:24px; text-align:left; }
.stat + .stat{ border-left:1px solid var(--hp-line-soft); }
.stat .lbl{ color:var(--hp-muted); text-shadow:none; }
.stat .num{ color:var(--hp-ink); text-shadow:none; font-size:clamp(2rem,4vw,3.2rem); }

.section{ padding:clamp(72px,9vw,124px) 0; }
.section-head{
  max-width:760px;
  margin-bottom:42px;
}
.section-head h2{ font-size:clamp(2.2rem,4.8vw,3.7rem); letter-spacing:-.028em; }
.section-head p{ color:rgba(201,200,192,.68); }

.bento{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}
.feat{
  grid-column:span 6;
  min-height:230px;
  border-radius:12px;
  padding:28px;
  background:linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
  border-color:rgba(247,243,234,.13);
  box-shadow:none;
}
.feat:nth-child(1){ grid-column:span 7; }
.feat:nth-child(2){ grid-column:span 5; }
.feat:nth-child(3){ grid-column:span 5; }
.feat:nth-child(4){ grid-column:span 7; }
.feat::after{
  inset:auto 20px 20px auto;
  width:92px;
  height:2px;
  background:linear-gradient(90deg, var(--hp-orange), transparent);
  opacity:.8;
}
.feat:hover{ border-color:rgba(255,189,102,.38); transform:translateY(-4px); }
.feat-arrow{
  width:38px;
  height:38px;
  border-radius:9px;
  background:rgba(255,91,34,.14);
  color:var(--hp-orange);
  border:1px solid rgba(255,91,34,.28);
}
.feat-title{ font-size:clamp(1.45rem,2.7vw,2.15rem); }
.feat-desc{ color:rgba(201,200,192,.68); }

.term-tools{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}
.term-card{
  grid-column:span 3;
  min-height:168px;
  border-radius:12px;
  padding:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(8,10,14,.78);
  border-color:rgba(247,243,234,.12);
}
.term-card:nth-child(1),
.term-card:nth-child(6),
.term-card:nth-child(11){ grid-column:span 6; }
.term-card:nth-child(3),
.term-card:nth-child(9),
.term-card:nth-child(16){ grid-column:span 4; }
.term-card:hover{
  border-color:rgba(95,215,209,.34);
  transform:translateY(-3px);
  background:
    linear-gradient(180deg, rgba(95,215,209,.07), rgba(255,91,34,.035)),
    rgba(8,10,14,.82);
}
.term-card .tag{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(95,215,209,.08);
  color:var(--hp-cyan);
  text-transform:none;
  letter-spacing:.02em;
}
.term-card .nm{
  color:var(--hp-ink);
  margin-top:18px;
  font-size:clamp(1.12rem,1.8vw,1.5rem);
}
.term-card .ds{ color:rgba(201,200,192,.64); }

.faq{ max-width:900px; }
.faq details{
  border-color:var(--hp-line-soft);
  background:rgba(255,255,255,.018);
  padding-inline:18px;
}
.faq details + details{ margin-top:8px; }
.faq summary{ color:var(--hp-ink); }
.faq details > p{ color:rgba(201,200,192,.68); }

.cta-final{
  border-radius:12px;
  background:
    linear-gradient(135deg, rgba(95,215,209,.12), transparent 38%),
    linear-gradient(315deg, rgba(255,91,34,.20), transparent 48%),
    #090b10;
  border-color:rgba(255,189,102,.28);
}
.cta-final::before{
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 100% 56px;
}

.footer{
  background:#050609;
  border-top-color:var(--hp-line-soft);
}
.footer-grid{ border-bottom-color:var(--hp-line-soft); }
.footer-col h4{ color:var(--hp-amber); }

.cl-consent-bar{
  background:rgba(5,6,9,.94);
  border-top-color:rgba(247,243,234,.14);
}
.cl-consent-bar button{
  border-radius:9px;
}

@media (max-width:980px){
  .reg{ grid-template-columns:1fr; text-align:center; }
  .reg-main,.reg-sub,.reg-note{ margin-left:auto; margin-right:auto; }
  .reg-actions{ justify-content:center; }
  .reg-visual{ order:0; max-width:520px; margin:8px auto 0; }
  .hero .container{ display:block; }
  .hero-search{ margin-top:28px; }
  .bento,.term-tools{ grid-template-columns:repeat(6,1fr); }
  .feat,.feat:nth-child(n),.term-card,.term-card:nth-child(n){ grid-column:span 3; }
}

@media (max-width:760px){
  .nav-inner{ height:70px; }
  .nav.open .nav-mid{ top:70px; }
  .reg-wrap{ min-height:auto; padding-top:48px!important; }
  .reg{ padding:0; gap:30px; }
  .reg-visual{ order:0; }
  .reg h2{ font-size:clamp(2.45rem,13vw,4rem); }
  .reg-actions{ align-items:stretch; }
  .reg-code{ justify-content:center; }
  .hero{ padding-top:64px; }
  .hero h1{ font-size:clamp(2.7rem,16vw,4.6rem); }
  .stats-grid{ grid-template-columns:1fr; }
  .stat + .stat{ border-left:0; border-top:1px solid var(--hp-line-soft); }
  .bento,.term-tools{ grid-template-columns:1fr; }
  .feat,.feat:nth-child(n),.term-card,.term-card:nth-child(n){ grid-column:auto; }
  .term-card{ min-height:0; }
}

@media (max-width:480px){
  .container{ padding-inline:18px; }
  .nav-logo span{ font-size:1rem; }
  .nav-right .btn-primary{ padding-inline:16px; }
  .reg-actions .btn{ width:100%; }
  .hero-search{ grid-template-columns:1fr; }
  .hero-search .mag{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .feat:hover,.term-card:hover,.btn-primary:hover{ transform:none; }
}

/* Lighter graphite-paper atmosphere and a tighter search panel. */
:root{
  --hp-bg:#0b0d0e;
  --hp-bg-soft:#121617;
  --hp-body:#d7d0c3;
  --hp-muted:#aaa69d;
  --hp-line:rgba(255,247,229,.20);
  --hp-line-soft:rgba(255,247,229,.105);
  --hp-panel:#171b1c;
  --hp-panel-2:#202525;
  --hp-shadow:0 18px 34px rgba(0,0,0,.32);
}

body{
  background:
    linear-gradient(90deg, rgba(11,32,35,.84) 0%, rgba(16,20,21,.90) 28%, rgba(52,48,40,.54) 50%, rgba(34,25,22,.86) 74%, rgba(10,10,12,.94) 100%),
    linear-gradient(180deg, #171a19 0%, #0a0c0e 76%, #07080a 100%);
}

body::before{
  background:
    linear-gradient(108deg, transparent 0 18%, rgba(255,247,226,.075) 18.4% 19%, transparent 19.5% 100%),
    linear-gradient(78deg, transparent 0 39%, rgba(255,247,226,.055) 39.4% 40%, transparent 40.6% 100%),
    linear-gradient(156deg, transparent 0 58%, rgba(95,215,209,.12) 58.4% 59%, transparent 59.6% 100%),
    conic-gradient(from 235deg at 62% 34%, rgba(255,126,62,.18), transparent 18%, rgba(239,232,209,.08) 33%, transparent 48%, rgba(95,215,209,.13) 64%, transparent 80%);
  opacity:.72;
}

body::after{
  background:
    linear-gradient(90deg, rgba(6,8,9,.62), rgba(52,47,40,.20) 42%, rgba(7,8,10,.68)),
    linear-gradient(180deg, transparent 0%, rgba(9,10,11,.36) 58%, rgba(5,6,9,.78) 100%);
}

.nav{
  background:rgba(10,12,13,.80);
  backdrop-filter:blur(16px);
}

.reg-wrap,
.hero{
  background:
    linear-gradient(90deg, rgba(8,33,37,.50), rgba(38,42,38,.24) 50%, rgba(55,30,22,.38)),
    linear-gradient(180deg, rgba(255,247,226,.045), transparent 62%);
}

.reg-wrap::before{
  background:
    linear-gradient(112deg, transparent 0 22%, rgba(255,247,226,.075) 22.4% 23%, transparent 23.5% 100%),
    linear-gradient(83deg, transparent 0 50%, rgba(95,215,209,.10) 50.4% 51%, transparent 51.6% 100%),
    linear-gradient(270deg, rgba(255,126,62,.14), transparent 42%);
}

.hero{
  isolation:isolate;
}

.hero::before{
  opacity:1;
  background:
    linear-gradient(105deg, transparent 0 21%, rgba(255,247,226,.095) 21.4% 21.8%, transparent 22.2% 100%),
    linear-gradient(80deg, transparent 0 48%, rgba(255,247,226,.055) 48.4% 48.9%, transparent 49.4% 100%),
    linear-gradient(180deg, rgba(255,247,226,.050), transparent 72%);
}

.hero::after{
  opacity:1;
  background:
    linear-gradient(90deg, rgba(255,247,226,.06) 1px, transparent 1px) 50% 0 / 112px 112px,
    linear-gradient(rgba(255,247,226,.044) 1px, transparent 1px) 0 0 / 100% 112px;
  mask-image:linear-gradient(90deg, rgba(0,0,0,.40), rgba(0,0,0,.98) 45%, rgba(0,0,0,.55));
}

.hero .container{
  grid-template-columns:minmax(0,.92fr) minmax(360px,.54fr);
  gap:clamp(32px,4.8vw,66px);
  align-items:center;
}

.hero-pill{
  background:rgba(255,247,226,.075);
  border-color:rgba(255,247,226,.18);
  color:rgba(255,247,229,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.hero-pill .dots span{
  background:#2f3a4d;
  border-color:#12171a;
}

.hero h1{
  max-width:720px;
  letter-spacing:-.026em;
  text-wrap:balance;
}

.hero-sub{
  color:rgba(245,237,221,.76);
  text-wrap:pretty;
}

.hero-search{
  position:relative;
  overflow:hidden;
  align-self:center;
  min-height:318px;
  grid-template-columns:1fr;
  align-content:end;
  gap:10px;
  padding:26px;
  border-radius:14px;
  background:
    linear-gradient(152deg, rgba(255,247,226,.13), rgba(255,247,226,.035) 42%, rgba(255,105,45,.07)),
    linear-gradient(180deg, rgba(26,31,31,.96), rgba(14,16,17,.96));
  border-color:rgba(255,247,226,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 18px 34px rgba(0,0,0,.30);
}

.hero-search::before{
  content:'';
  position:absolute;
  left:22px;
  right:22px;
  top:22px;
  bottom:98px;
  border-radius:11px;
  background:
    linear-gradient(180deg, rgba(255,247,226,.075), transparent 40%),
    linear-gradient(100deg, transparent 0 18%, rgba(255,247,226,.10) 18.3% 18.8%, transparent 19.2% 100%),
    linear-gradient(80deg, transparent 0 52%, rgba(95,215,209,.13) 52.2% 52.8%, transparent 53.2% 100%),
    linear-gradient(90deg, rgba(255,247,226,.075) 1px, transparent 1px) 0 0 / 74px 74px,
    linear-gradient(rgba(255,247,226,.052) 1px, transparent 1px) 0 0 / 100% 54px;
  border:1px solid rgba(255,247,226,.10);
}

.hero-search::after{
  content:'';
  position:absolute;
  left:34px;
  right:34px;
  bottom:104px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(95,215,209,.55), rgba(255,126,62,.45), transparent);
}

.hero-search .mag,
.hero-search input,
.hero-search .btn{
  position:relative;
  z-index:1;
}

.hero-search .mag{
  width:max-content;
  min-height:24px;
  padding:5px 10px;
  border:1px solid rgba(95,215,209,.24);
  border-radius:999px;
  background:rgba(95,215,209,.08);
  color:#83f0ea;
}

.hero-search input{
  min-height:52px;
  padding:0 14px;
  border:1px solid rgba(255,247,226,.13);
  border-radius:10px;
  background:rgba(255,247,226,.070);
  color:#fff7e8;
}

.hero-search input::placeholder{
  color:rgba(231,222,205,.58);
}

.hero-search .btn{
  min-height:50px;
  margin-top:2px;
}

.stats{
  margin-top:48px;
  background:
    linear-gradient(90deg, rgba(255,247,226,.070), rgba(255,247,226,.030)),
    rgba(13,16,17,.62);
  border-color:rgba(255,247,226,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.stat .lbl{
  color:rgba(226,217,200,.76);
}

.stat .num{
  color:#fff7e8;
}

.dash{
  background:
    linear-gradient(145deg, rgba(255,247,226,.10), rgba(255,247,226,.028)),
    #101416;
  border-color:rgba(255,247,226,.18);
}

.feat,
.term-card,
.faq details{
  background:
    linear-gradient(145deg, rgba(255,247,226,.055), rgba(255,247,226,.018)),
    rgba(13,16,17,.72);
}

@media (max-width:980px){
  .hero .container{ display:block; }
  .hero-search{
    max-width:560px;
    min-height:286px;
    margin:30px auto 0;
  }
}

@media (max-width:760px){
  .hero{
    background:
      linear-gradient(180deg, rgba(11,34,37,.72), rgba(38,35,29,.34) 58%, rgba(41,22,18,.36)),
      linear-gradient(180deg, rgba(255,247,226,.05), transparent);
  }
  .hero-search{
    min-height:258px;
    padding:18px;
  }
  .hero-search::before{
    inset:16px 16px 92px;
  }
  .hero-search::after{
    left:24px;
    right:24px;
    bottom:96px;
  }
  .cl-consent-bar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    justify-content:stretch;
    gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    text-align:left;
    font-size:.78rem;
  }
  .cl-consent-bar p{
    max-width:none;
    line-height:1.45;
  }
  .cl-consent-bar button{
    min-width:62px;
    min-height:42px;
    padding:9px 12px;
  }
}

@media (max-width:480px){
  .hero-search{
    min-height:226px;
    gap:9px;
  }
  .hero-search input{
    min-height:50px;
  }
}

/* Center the metric band and refine small UI details. */
.stats{
  display:flex;
  justify-content:center;
  padding:0 24px;
}

.stats .container{
  width:min(920px,100%);
  max-width:920px;
  padding-inline:0;
  display:block;
}

.stats-grid{
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-left:1px solid rgba(255,247,226,.08);
  border-right:1px solid rgba(255,247,226,.08);
}

.stat{
  min-height:106px;
  padding:20px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.stat .lbl{
  margin-bottom:8px;
  font-size:.88rem;
}

.stat .num{
  line-height:.94;
  letter-spacing:-.026em;
}

.hero-pill,
.reg-eyebrow{
  backdrop-filter:blur(12px);
}

.term-card,
.feat,
.faq details{
  border-color:rgba(255,247,226,.14);
}

.term-card .ds,
.feat-desc,
.faq details > p{
  color:rgba(226,217,200,.72);
}

.btn-primary{
  border:1px solid rgba(255,215,159,.34);
}

@media (max-width:760px){
  .stats{
    padding:0 18px;
  }
  .stats-grid{
    border-left:1px solid rgba(255,247,226,.10);
    border-right:1px solid rgba(255,247,226,.10);
  }
  .stat{
    min-height:92px;
    padding:18px 16px;
  }
}

/* RTL (Arabic): flip text flow and directional accents.
   Grid/flex tracks already reverse automatically under dir=rtl. */
[dir=rtl] .reg,
[dir=rtl] .hero{ text-align:right; }
[dir=rtl] .feat::after{ inset:auto auto 20px 20px; background:linear-gradient(270deg, var(--hp-orange), transparent); }
[dir=rtl] .nav-mid a.active::after{ background:linear-gradient(270deg, var(--hp-orange), var(--hp-amber)); }
@media (max-width:980px){ [dir=rtl] .reg{ text-align:center; } }

/* Mobile nav: hide the duplicate register button on small screens to keep the top bar
   (logo + language switch + burger) from overflowing, and anchor the language dropdown
   to the right edge so it stays on screen. */
@media (max-width:760px){
  .nav-right>.btn-primary{ display:none; }
  .lang-menu{ right:0; left:auto; min-width:168px; }
  .deco-ring,.deco-streak{ display:none; }
  .feat{ overflow-wrap:anywhere; }
  .btn{ white-space:normal; }
}

/* Accessibility: copy-code button touch target >=44px. */
.reg-code button{ min-height:44px; }

/* Homepage directory: categorized, compact layout. */
.directory{
  display:grid;
  gap:16px;
}

#terms,
#tools{
  scroll-margin-top:96px;
}

.directory-block{
  border:1px solid rgba(255,247,226,.14);
  border-radius:12px;
  padding:18px;
  background:
    linear-gradient(145deg, rgba(255,247,226,.050), rgba(255,247,226,.018)),
    rgba(12,15,16,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}

.directory-block-primary{
  border-color:rgba(255,189,102,.25);
  background:
    linear-gradient(135deg, rgba(255,126,62,.105), rgba(95,215,209,.050) 48%, rgba(255,247,226,.018)),
    rgba(12,15,16,.78);
}

.directory-block[hidden]{
  display:none;
}

.directory-block-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,247,226,.105);
}

.directory-block-head h3{
  margin:0;
  color:#fff7e8;
  font-size:1.18rem;
  line-height:1.2;
  letter-spacing:-.012em;
}

.directory-block-head span{
  flex:0 0 auto;
  color:rgba(226,217,200,.66);
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.03em;
  white-space:nowrap;
}

.directory-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.directory-block-compact .directory-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.directory .term-card,
.directory .term-card:nth-child(n){
  grid-column:auto;
  min-height:0;
  display:block;
  padding:15px 16px;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,247,226,.044), rgba(255,247,226,.014)),
    rgba(8,10,11,.62);
  border-color:rgba(255,247,226,.12);
}

.directory .term-card:hover{
  border-color:rgba(95,215,209,.34);
  background:
    linear-gradient(180deg, rgba(95,215,209,.060), rgba(255,126,62,.028)),
    rgba(8,10,11,.72);
}

.directory .term-card .tag{
  font-size:.64rem;
  color:#83f0ea;
}

.directory .term-card .nm{
  margin-top:10px;
  font-size:1.04rem;
  line-height:1.2;
}

.directory .term-card .ds{
  font-size:.84rem;
  line-height:1.46;
}

[dir=rtl] .directory-block-head,
[dir=rtl] .directory .term-card{
  text-align:right;
}

@media (max-width:980px){
  .directory-grid,
  .directory-block-compact .directory-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:620px){
  .directory{
    gap:12px;
  }
  .directory-block{
    padding:14px;
  }
  .directory-block-head{
    display:grid;
    gap:6px;
    margin-bottom:12px;
  }
  .directory-block-head span{
    white-space:normal;
    line-height:1.4;
  }
  .directory-grid,
  .directory-block-compact .directory-grid{
    grid-template-columns:1fr;
  }
  .directory .term-card{
    padding:14px;
  }
}

/* Grouped article navigation: native details keeps the menu keyboard-accessible. */
.nav-guides{
  position:relative;
}
.nav-guides > summary{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:6px;
  color:rgba(247,243,234,.60);
  font-size:.96rem;
  font-weight:600;
  cursor:pointer;
  list-style:none;
}
.nav-guides > summary::-webkit-details-marker{
  display:none;
}
.nav-guides[open] > summary,
.nav-guides > summary:hover{
  color:var(--hp-ink);
}
.nav-guides > summary span{
  color:var(--hp-orange);
  font-size:.72rem;
}
.nav-guides-menu{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  z-index:70;
  width:min(660px,calc(100vw - 48px));
  padding:16px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  transform:translateX(-50%);
  border:1px solid var(--hp-line);
  border-radius:12px;
  background:rgba(15,18,19,.98);
  box-shadow:0 18px 36px rgba(0,0,0,.38);
}
.nav-guides-group{
  display:grid;
  align-content:start;
  gap:2px;
}
.nav-guides-group > span{
  padding:4px 10px 7px;
  color:var(--hp-amber);
  font-size:.82rem;
  font-weight:700;
}
.nav-guides-menu a{
  min-height:44px;
  display:flex;
  align-items:center;
  padding:8px 10px;
  border-radius:8px;
  color:rgba(247,243,234,.70);
  font-size:.9rem;
}
.nav-guides-menu a:hover{
  color:var(--hp-ink);
  background:rgba(255,255,255,.055);
}
.nav-guides-all{
  grid-column:1 / -1;
  justify-content:center;
  border-top:1px solid var(--hp-line-soft);
  color:var(--hp-cyan)!important;
}
[dir=rtl] .nav-guides-menu{
  text-align:right;
}

@media (max-width:760px){
  .nav.open .nav-mid{
    max-height:calc(100vh - 70px);
    overflow-y:auto;
  }
  .nav-guides{
    width:100%;
  }
  .nav-guides > summary{
    min-height:44px;
    padding:0;
    border-bottom:1px solid var(--border-2);
  }
  .nav-guides-menu{
    position:static;
    width:100%;
    padding:10px 0 6px;
    grid-template-columns:1fr;
    gap:8px;
    transform:none;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .nav-guides-group{
    padding:0 4px;
  }
  .nav-guides-group > span{
    padding:6px 8px 4px;
  }
  .nav-guides-menu a{
    padding:8px 12px;
  }
  .nav-guides-all{
    justify-content:flex-start;
  }
}

/* Mobile touch targets: keep primary navigation, helper links and consent controls at WCAG-sized hit areas. */
@media (max-width:760px){
  .nav-logo,
  .reg-guide,
  .footer-col a,
  .cl-consent-bar button{
    min-height:44px;
  }
  .reg-guide,
  .footer-col a{
    display:flex;
    align-items:center;
  }
}