/* yTranslate marketing site — design tokens match the app's own design
   system (app/src/theme.ts) and the analytics dashboard's theme, so all
   three surfaces read as the same product. */
:root{
  --void:#07070d;
  --panel:#111119;
  --panel-2:#15151f;
  --blue:#5B8DEF;
  --violet:#9B6BF2;
  --magenta:#F0529C;
  --amber:#F5A25C;
  --mint:#34D399;
  --text:#F6F6FA;
  --text-secondary:#C7C7D4;
  --link:#AFC6FF;
  --border:rgba(255,255,255,0.14);
  --btn-grad:linear-gradient(90deg,#3557C7,#6B3FD1,#C23A78);
  --brand-grad:linear-gradient(90deg,var(--blue),var(--violet),var(--magenta));
  --brand-grad-diag:linear-gradient(135deg,var(--blue),var(--violet),var(--magenta));
  --radius:18px;
  --max:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
html, body{ background:#07070d; }
body{
  margin:0;
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  min-height:100vh;
}
h1,h2,h3{ font-family:'Space Grotesk',sans-serif; color:#fff; line-height:1.2; margin:0 0 .5em; }
code, .mono{ font-family:'IBM Plex Mono',monospace; }
p{ color:var(--text-secondary); margin:0 0 1em; }
a{ color:var(--link); text-underline-offset:3px; }
a:not(.btn){ text-decoration:underline; }
a:hover{ opacity:0.85; }
:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
  border-radius:6px;
}
.skip-link{
  position:absolute; left:12px; top:-60px;
  background:#fff; color:#111; padding:12px 18px; border-radius:10px;
  font-weight:700; z-index:100; transition:top .15s ease;
}
.skip-link:focus{ top:12px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(7,7,13,0.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-row{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; padding-bottom:14px; }
.brand, .brand:hover{ display:flex; align-items:center; gap:10px; text-decoration:none !important; }
.brand-mark{ width:34px; height:34px; border-radius:10px; background:var(--brand-grad-diag); display:grid; place-items:center; flex:none; }
.brand-name{ color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; }
.nav-right{ display:flex; align-items:center; gap:14px; }
nav.primary ul{ list-style:none; display:flex; gap:22px; margin:0; padding:0; }
nav.primary a{ color:var(--text-secondary); text-decoration:none; font-weight:500; font-size:14px; }
nav.primary a:hover, nav.primary a:focus-visible{ color:#fff; }
.btn{
  display:inline-block; padding:11px 22px; border-radius:14px; font-weight:700; font-size:14px;
  text-decoration:none; color:#fff; background:var(--btn-grad); border:none; cursor:pointer;
}
.btn-outline{
  background:transparent; border:1px solid var(--border); color:#fff;
}

/* Dropdown language switcher — built to scale to all 20 supported
   languages, not just the two live today. A row of link-pairs (the
   original approach) breaks the header layout well before then. */
.lang-switch{ position:relative; }
.lang-switch-btn{
  display:flex; align-items:center; gap:6px;
  background:transparent; color:var(--text-secondary); cursor:pointer;
  border:1px solid var(--border); border-radius:8px; padding:6px 10px;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.02em;
}
.lang-switch-btn:hover, .lang-switch-btn:focus-visible{ color:#fff; }
.lang-switch-btn svg{ transition:transform .15s ease; }
.lang-switch-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }

.lang-switch-menu{
  display:none;
  position:absolute; top:calc(100% + 6px); right:0; z-index:60;
  min-width:170px; max-height:320px; overflow-y:auto;
  background:var(--panel-2); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,0.45);
  list-style:none; margin:0; padding:6px;
}
.lang-switch-menu.open{ display:block; }
.lang-switch-menu a{
  display:block; padding:9px 12px; border-radius:8px; font-size:13.5px;
  color:var(--text-secondary); text-decoration:none;
}
.lang-switch-menu a:hover, .lang-switch-menu a:focus-visible{ background:rgba(255,255,255,0.06); color:#fff; }
.lang-switch-menu a.current{ color:#fff; font-weight:600; }
.lang-switch-menu a.current::after{ content:" ✓"; color:var(--mint); }

.menu-toggle{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px; flex:none;
  background:transparent; border:1px solid var(--border); color:#fff; cursor:pointer;
}
.menu-toggle .icon-close{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-open{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-close{ display:block; }
.mobile-cta{ display:none; }

@media (max-width:760px){
  nav.primary{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(7,7,13,0.98);
    border-bottom:1px solid var(--border);
    padding:6px 24px 18px;
    max-height:80vh; overflow-y:auto;
  }
  nav.primary.open{ display:block; }
  nav.primary ul{ flex-direction:column; gap:0; }
  nav.primary li{ border-bottom:1px solid var(--border); }
  nav.primary li:last-child{ border-bottom:none; }
  nav.primary a{ display:block; padding:15px 4px; font-size:16px; }
  .nav-right > a.btn{ display:none; }
  .menu-toggle{ display:flex; }
  .mobile-cta{ display:block; margin-top:14px; text-align:center; }
}

@media (max-width:600px){
  section{ padding:60px 0; }
  section.tight{ padding:44px 0; }
  .hero{ padding-top:52px; }
  .orbit-demo{ transform:scale(0.82); margin:-14px auto -14px; }
  .pricing-grid{ gap:14px; }
  .legal{ padding:48px 0; }
}

/* decorative background blobs, aria-hidden, never carry text */
.bg-blobs{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:0.35; }

section{ position:relative; padding:88px 0; }
section.tight{ padding:56px 0; }

/* Anchor targets need breathing room under the sticky header — without
   this, jumping to e.g. #download or #features lands the target's top
   edge exactly at the viewport top, scrolled directly behind the sticky
   header, hiding it entirely. */
section[id], #download{ scroll-margin-top:84px; }
.eyebrow{
  text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700;
  color:var(--amber); margin-bottom:12px;
}

/* ---------- Hero ---------- */
.hero{ text-align:center; padding-top:100px; }
.hero h1{ font-size:clamp(34px,6vw,58px); max-width:820px; margin:0 auto 18px; }
.hero .lead{ font-size:18px; max-width:600px; margin:0 auto 34px; }
.hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.hero-note{ font-size:13px; color:var(--text-secondary); margin-bottom:56px; }

.orbit-demo{ position:relative; width:220px; height:220px; margin:0 auto; }
.orbit-ring{ position:absolute; inset:0; animation:spin 28s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.orbit-chip{
  position:absolute; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:11px; font-family:'IBM Plex Mono',monospace;
  border:1px solid rgba(255,255,255,0.3); box-shadow:0 6px 16px rgba(0,0,0,0.4);
}
.orbit-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:78px; height:78px; border-radius:50%; background:var(--brand-grad-diag);
  display:grid; place-items:center; box-shadow:0 14px 34px rgba(155,107,242,0.45);
}

/* ---------- Store badges (custom, non-trademarked "coming soon" style) ---------- */
.store-badges{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.store-badge{
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:10px 18px; text-align:left; min-width:190px;
}
.store-badge .icon{ flex:none; width:28px; height:28px; display:grid; place-items:center; color:#fff; }
.store-badge .label-lines{ display:flex; flex-direction:column; line-height:1.25; }
.store-badge .top-line{ font-size:11px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.06em; }
.store-badge .bottom-line{ font-size:15px; font-weight:700; color:#fff; font-family:'Space Grotesk',sans-serif; }

/* ---------- Section headings ---------- */
h2.section-title{ font-size:clamp(26px,4vw,36px); text-align:center; margin-bottom:14px; }
.section-lead{ text-align:center; max-width:560px; margin:0 auto 48px; font-size:16px; }

.grid{ display:grid; gap:20px; }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:980px){ .grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){ .grid.cols-3, .grid.cols-2{ grid-template-columns:1fr; } }
@media (max-width:560px){ .grid.cols-4{ grid-template-columns:1fr; } }

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px;
}
.card h3{ font-size:17px; margin-bottom:8px; }
.card p{ font-size:14.5px; margin:0; }
.icon-badge{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(155,107,242,0.18); border:1px solid var(--border); margin-bottom:14px;
  color:var(--violet);
}
.icon-badge svg{ width:20px; height:20px; }

/* ---------- How it works ---------- */
ol.steps{ counter-reset:step; list-style:none; margin:0; padding:0; display:grid; gap:18px; }
ol.steps li{
  counter-increment:step; display:flex; gap:16px; align-items:flex-start;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px;
}
ol.steps li::before{
  content:counter(step); flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--brand-grad-diag); color:#fff; font-weight:700; font-family:'IBM Plex Mono',monospace;
  display:grid; place-items:center; font-size:14px;
}
ol.steps h3{ font-size:16px; margin-bottom:4px; }
ol.steps p{ font-size:14px; margin:0; }

/* ---------- Languages ---------- */
.lang-pills{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:820px; margin:0 auto; }
.lang-pill{
  background:var(--panel); border:1px solid var(--border); border-radius:999px;
  padding:8px 16px; font-size:13.5px; color:var(--text-secondary); display:flex; align-items:center; gap:8px;
}
.dev-tag{
  font-size:10px; font-weight:700; color:var(--amber); border:1px solid rgba(245,162,92,0.4);
  background:rgba(245,162,92,0.12); border-radius:999px; padding:1px 7px; font-family:'IBM Plex Mono',monospace;
  display:inline-block;
}
.lang-legend{ text-align:center; font-size:13px; color:var(--text-secondary); margin-top:20px; }

/* ---------- Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:820px){ .pricing-grid{ grid-template-columns:1fr; } }
.plan{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; display:flex; flex-direction:column; gap:10px;
}
.plan.featured{ border-color:rgba(155,107,242,0.6); background:var(--panel-2); }
.plan .badge{
  align-self:flex-start; font-size:11px; font-weight:700; color:var(--amber);
  background:rgba(245,162,92,0.12); border:1px solid rgba(245,162,92,0.4);
  padding:3px 9px; border-radius:999px;
}
.plan .price{ font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:600; color:#fff; }
.plan .price span{ font-size:14px; color:var(--text-secondary); font-family:'Inter',sans-serif; }
.plan ul{ list-style:none; margin:0; padding:0; font-size:13.5px; color:var(--text-secondary); display:grid; gap:6px; }
.plan ul li::before{ content:"✓ "; color:var(--mint); font-weight:700; }
.price-disclaimer{ text-align:center; font-size:12.5px; color:var(--text-secondary); margin-top:18px; }

.wallet-table{
  margin-top:36px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 26px;
}
.wallet-table h3{ font-size:16px; margin-bottom:4px; }
.wallet-table > p{ font-size:14px; margin-bottom:18px; }
.wallet-rows{ display:grid; gap:10px; }
.wallet-row{
  display:grid; grid-template-columns:1fr 120px 90px; align-items:center; gap:12px;
  padding:10px 0; border-top:1px solid var(--border); font-size:14px;
}
.wallet-row:first-child{ border-top:none; }
.wallet-row .pack-name{ color:#fff; font-weight:600; }
.wallet-row .pack-credits{ color:var(--text-secondary); text-align:right; }
.wallet-row .pack-price{ font-family:'IBM Plex Mono',monospace; color:#fff; font-weight:600; text-align:right; }
@media (max-width:480px){
  .wallet-row{ grid-template-columns:1fr auto auto; gap:8px; font-size:13px; }
}

/* ---------- FAQ ---------- */
details.faq{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:4px 20px; margin-bottom:12px;
}
details.faq summary{
  cursor:pointer; padding:16px 0; font-weight:600; color:#fff; font-size:15px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{ content:"+"; font-size:22px; color:var(--text-secondary); flex:none; }
details.faq[open] summary::after{ content:"–"; }
details.faq p{ padding-bottom:16px; font-size:14.5px; }

/* ---------- Footer ---------- */
footer.site{
  border-top:1px solid var(--border); padding:44px 0 30px; margin-top:40px;
}
.footer-grid{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-col{ flex:1 1 150px; }
/* Below this width the flex-wrap above naturally packs two columns per
   row (e.g. Brand next to the 5-link Product column) — since each row's
   height follows its tallest item, a short column ends up with a large
   empty gap under it before the next row starts. Stacking to a single
   column sidesteps the row-height mismatch entirely rather than trying
   to rebalance column pairings. */
@media (max-width:640px){
  .footer-grid{ flex-direction:column; gap:32px; }
  /* flex-basis tracks the main axis, which flex-direction:column just
     flipped from width to height — the 150px above (a preferred WIDTH in
     the row layout) would otherwise become a preferred/growable HEIGHT
     per stacked section, stretching the short Brand column to fill space.
     Size purely by content instead. */
  .footer-col{ flex:0 0 auto; }
}
.footer-col h4{ color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.footer-col a{ font-size:14px; color:var(--text-secondary); text-decoration:none; }
.footer-col a:hover, .footer-col a:focus-visible{ color:#fff; }
.footer-col button.linklike{
  font-size:14px; color:var(--text-secondary); text-decoration:none; background:none; border:none;
  padding:0; cursor:pointer; font-family:inherit; text-align:left;
}
.footer-col button.linklike:hover, .footer-col button.linklike:focus-visible{ color:#fff; }
.footer-bottom{ margin-top:36px; padding-top:20px; border-top:1px solid var(--border); font-size:13px; color:var(--text-secondary); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- Legal pages ---------- */
.legal{ padding:64px 0; }
.legal-hero{ padding:56px 0 0; }
.legal h2{ font-size:32px; }
.legal .updated{ color:var(--text-secondary); font-size:13px; margin-bottom:28px; }
.legal h3{ font-size:18px; margin-top:30px; }
.legal p, .legal li{ color:var(--text-secondary); font-size:15px; }
.legal ul{ padding-inline-start:20px; }
.back-to-top{ display:inline-block; margin-top:36px; font-size:13px; }
.disclaimer-box{
  background:rgba(245,162,92,0.08); border:1px solid rgba(245,162,92,0.35);
  border-radius:12px; padding:16px 18px; font-size:13.5px; color:var(--text-secondary); margin-bottom:26px;
}

/* ---------- Cookie consent banner ---------- */
#cookie-consent{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
  max-width:640px; margin:0 auto;
  background:var(--panel-2); border:1px solid var(--border); border-radius:16px;
  padding:20px 22px; box-shadow:0 20px 50px rgba(0,0,0,0.5);
  display:none;
}
#cookie-consent.visible{ display:block; }
#cookie-consent p{ font-size:13.5px; margin:0 0 14px; }
#cookie-consent .consent-actions{ display:flex; gap:10px; flex-wrap:wrap; }
#cookie-consent .btn, #cookie-consent .btn-outline{ padding:9px 18px; font-size:13px; }

/* ---------- Browser-language suggestion banner ---------- */
/* In normal document flow (first child of body), not fixed — it scrolls
   away with the page rather than competing with the sticky header or the
   fixed cookie-consent card for screen space. English-only (see
   lang-suggest.js), so no RTL handling needed here. */
#lang-suggest{
  display:flex; align-items:center; justify-content:center; gap:16px;
  flex-wrap:wrap; text-align:center; position:relative;
  background:var(--panel-2); border-bottom:1px solid var(--border);
  padding:10px 44px 10px 16px; font-size:13.5px;
}
#lang-suggest-text{ color:var(--text-secondary); }
#lang-suggest .lang-suggest-actions{ display:flex; align-items:center; gap:10px; }
#lang-suggest .btn{ padding:7px 16px; font-size:13px; }
#lang-suggest-dismiss{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; border:none; background:transparent;
  color:var(--text-secondary); font-size:18px; line-height:1; cursor:pointer;
}
#lang-suggest-dismiss:hover{ background:rgba(255,255,255,0.08); color:var(--text); }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}