/* /public/assets/css/style.css */
/* Velora VPN — UI-first design system (LOCKED SPEC)
   Flat, calm, engineered. No illustrations. No visible background shapes.
*/

:root{
  --bg0:#050505;
  --bg1:#050505;

  --text:#eaeaea;
  --body:rgba(234,234,234,.74); /* 0.70–0.75 */
  --body2:rgba(234,234,234,.62);

  --accent:#3ccfd0; /* flat cyan/teal */
  --border:rgba(255,255,255,.08);
  --borderSoft:rgba(255,255,255,.06);

  --card:rgba(255,255,255,.04); /* SPEC */
  --card2:rgba(255,255,255,.04); /* keep same */
  --shadow: 0 10px 26px rgba(0,0,0,.38); /* short, realistic */
  --shadow2: 0 6px 18px rgba(0,0,0,.32);

  --r:16px;
  --r2:14px;
  --container:1120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);

  /* Base background only (FX on fixed layers below) */
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  position:relative;
  overflow-x:hidden;

  /* FIX: keep background FX from visually "bleeding" into translucent cards */
  isolation:isolate;
}

a{ color:inherit; text-decoration:none; }

/* nicer anchor jumps with sticky header */
section[id]{ scroll-margin-top: 84px; }

/* Ensure content always paints above negative z-index FX layers */
.main{
  padding:0;
  position:relative;
  z-index:0;
}

/* ---------- GLOBAL BACKGROUND FX (fixed, stable on scroll) ---------- */

/* Main mesh / glows (no hard edges) */
body::before{
  content:"";
  position:fixed;
  inset:-22vh -20vw;
  z-index:-3;
  pointer-events:none;

  background:
    radial-gradient(920px 720px at 18% 6%,
      rgba(60,207,208,.10),
      rgba(60,207,208,0) 62%),
    radial-gradient(820px 640px at 86% 14%,
      rgba(124,92,255,.09),
      rgba(124,92,255,0) 62%),
    radial-gradient(980px 760px at 52% 86%,
      rgba(60,207,208,.08),
      rgba(60,207,208,0) 62%),
    radial-gradient(860px 680px at 10% 84%,
      rgba(255,255,255,.04),
      rgba(255,255,255,0) 60%);

  filter: blur(30px);
  transform: translateZ(0);
  will-change: transform;
}

/* Accent “lines” overlay (random-looking curves) + micro-grid */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;

  /* We draw multiple thick curved-ish strokes using masked gradients.
     They are subtle but visible (per your request “по жирнее”). */
  background:
    /* line 1 */
    radial-gradient(120px 420px at 14% 26%, rgba(60,207,208,.28), rgba(60,207,208,0) 70%),
    radial-gradient(120px 420px at 18% 38%, rgba(60,207,208,.24), rgba(60,207,208,0) 72%),
    radial-gradient(120px 420px at 22% 52%, rgba(60,207,208,.22), rgba(60,207,208,0) 72%),

    /* line 2 */
    radial-gradient(160px 520px at 78% 22%, rgba(60,207,208,.22), rgba(60,207,208,0) 72%),
    radial-gradient(160px 520px at 72% 36%, rgba(60,207,208,.20), rgba(60,207,208,0) 72%),
    radial-gradient(160px 520px at 66% 54%, rgba(60,207,208,.18), rgba(60,207,208,0) 72%),

    /* line 3 (bottom) */
    radial-gradient(180px 560px at 40% 78%, rgba(60,207,208,.18), rgba(60,207,208,0) 74%),
    radial-gradient(180px 560px at 52% 86%, rgba(60,207,208,.16), rgba(60,207,208,0) 74%),

    /* micro-grid (SOFTENED to avoid 1px “cut” lines on cards) */
    linear-gradient(to right, rgba(255,255,255,.012) 1px, rgba(0,0,0,0) 1px),
    linear-gradient(to bottom, rgba(255,255,255,.008) 1px, rgba(0,0,0,0) 1px);

  background-size:
    auto, auto, auto,
    auto, auto, auto,
    auto, auto,
    220px 220px, 220px 220px;

  /* Make lines feel like strokes, not blobs: mask them */
  mask-image:
    radial-gradient(70% 46% at 50% 10%, rgba(0,0,0,.92), rgba(0,0,0,0)),
    radial-gradient(70% 52% at 50% 62%, rgba(0,0,0,.88), rgba(0,0,0,0)),
    linear-gradient(#000,#000);
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(70% 46% at 50% 10%, rgba(0,0,0,.92), rgba(0,0,0,0)),
    radial-gradient(70% 52% at 50% 62%, rgba(0,0,0,.88), rgba(0,0,0,0)),
    linear-gradient(#000,#000);

  /* FIX: blur was creating a "veil" that reads like shadow over translucent cards */
  opacity:.14;
  filter:none;
  transform: translateZ(0);
}

/* Vignette to hide any section edges and make transitions smooth */
/* FIX: user requested to remove this "shadow" entirely */
body .main::before{
  content:none !important;
  display:none !important;
}

/* Tiny drift only when motion is allowed (keeps it alive, no “seams”) */
@media (prefers-reduced-motion: no-preference){
  body::before{ animation: bgDrift 18s ease-in-out infinite; }
  body::after{ animation: lineDrift 22s ease-in-out infinite; }

  @keyframes bgDrift{
    0%,100%{ transform: translate3d(0,0,0) scale(1); }
    50%{ transform: translate3d(0,-12px,0) scale(1.02); }
  }
  @keyframes lineDrift{
    0%,100%{ transform: translate3d(0,0,0); opacity:.14; }
    50%{ transform: translate3d(0,-8px,0); opacity:.17; }
  }
}

/* ---------- GLOBAL: reduce “cut” on section boundaries ---------- */
/* This makes every section blend into background instead of having hard “layer edge”. */
.hero,
.features,
.simple{
  background: rgba(0,0,0,.001);
}

/* Make cards blend smoother (prevents perceived seams behind them) */
.fcard,
.plan,
.dlcard,
.compare,
.uiCard{
  outline: 1px solid rgba(255,255,255,.01); /* keeps AA stable on some GPUs */
}

/* ---------- A11Y skip ---------- */
.skip{
  position:absolute; left:-999px; top:8px;
  background:#0f0f0f;
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
}
.skip:focus{ left:10px; z-index:1000; }

.container{
  width:min(var(--container), calc(100% - 48px));
  margin:0 auto;
}

/* HEADER — sticky, blur, transparent, bottom border */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(5,5,5,.32);
  border-bottom:1px solid var(--borderSoft);
}
.topbar__in{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:180px;
}

/* FIX: markup uses <img class="brand__logo">, CSS previously only had .brand__mark */
.brand__logo{
  width:28px;
  height:28px;
  border-radius:10px;
  display:block;
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  box-shadow: var(--shadow2);
  object-fit:cover;
}

.brand__text{
  font-weight:600;
  letter-spacing:-0.02em;
  opacity:.92;
}

.nav{
  display:flex;
  align-items:center;
  gap:10px;
}
.nav__link{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  color: rgba(234,234,234,.78);
  font-size:13px;
  font-weight:600;
  letter-spacing:-0.01em;
}
.nav__link:hover{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(234,234,234,.92);
}

.topbar__right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* =========================================================
   Language dropdown (details/summary) — FIXED + STYLED
   Markup:
   <details class="langdd">
     <summary class="langdd__btn">...</summary>
     <div class="langdd__panel"> ... </div>
   ========================================================= */

.langdd{
  position:relative;
  display:inline-block;
}

/* remove default marker and make summary look like a button */
.langdd > summary{ list-style:none; }
.langdd > summary::-webkit-details-marker{ display:none; }

.langdd__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:40px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow2);
  cursor:pointer;
  user-select:none;
  color: rgba(234,234,234,.88);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.langdd__btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

.langdd__btn:active{
  transform: translateY(0);
}

/* focus ring */
.langdd__btn:focus-visible{
  outline:2px solid rgba(60,207,208,.35);
  outline-offset:2px;
}

/* small code pill on the left */
.langdd__code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(234,234,234,.90);
}

/* name part */
.langdd__name{
  font-size:12px;
  font-weight:750;
  letter-spacing:-0.01em;
  color: rgba(234,234,234,.82);
  white-space:nowrap;
  max-width: 160px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* caret (CSS only) */
.langdd__btn::after{
  content:"";
  width:10px;
  height:10px;
  margin-left:2px;
  border-right:2px solid rgba(234,234,234,.58);
  border-bottom:2px solid rgba(234,234,234,.58);
  transform: rotate(45deg);
  transition: transform .16s ease, border-color .16s ease, opacity .16s ease;
  opacity:.9;
}

/* open state */
.langdd[open] .langdd__btn{
  border-color: rgba(60,207,208,.26);
  background: rgba(60,207,208,.08);
}
.langdd[open] .langdd__btn::after{
  transform: rotate(225deg);
  border-right-color: rgba(234,234,234,.70);
  border-bottom-color: rgba(234,234,234,.70);
}

/* dropdown panel */
.langdd__panel{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: min(520px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  overflow:auto;

  border-radius: 18px;
  background: rgba(10,10,10,.92);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);

  padding: 12px;
  z-index: 80;

  /* prevent "panel" from blending badly with background fx */
  transform: translateZ(0);
}

/* subtle top/bottom fade for scrolling panel */
.langdd__panel::before,
.langdd__panel::after{
  content:"";
  position:sticky;
  left:0;
  right:0;
  height:18px;
  pointer-events:none;
  z-index:1;
}
.langdd__panel::before{
  top:0;
  background: linear-gradient(180deg, rgba(10,10,10,.98), rgba(10,10,10,0));
}
.langdd__panel::after{
  bottom:0;
  background: linear-gradient(0deg, rgba(10,10,10,.98), rgba(10,10,10,0));
}

/* groups */
.langdd__group{
  padding: 10px 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  margin-bottom: 10px;
}
.langdd__group:last-child{ margin-bottom:0; }

.langdd__groupTitle{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(234,234,234,.58);
  padding: 2px 2px 10px;
}

/* grid of items */
.langdd__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* item */
.langdd__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  color: rgba(234,234,234,.86);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
  min-width:0;
}

.langdd__item:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.langdd__item:focus-visible{
  outline:2px solid rgba(60,207,208,.35);
  outline-offset:2px;
}

.langdd__item.is-active{
  border-color: rgba(60,207,208,.30);
  background: rgba(60,207,208,.10);
}

.langdd__flag{
  flex:0 0 auto;
  width: 22px;
  display:inline-flex;
  justify-content:center;
  filter: saturate(1.05);
}

.langdd__label{
  font-size: 13px;
  font-weight: 750;
  letter-spacing:-0.01em;
  color: rgba(234,234,234,.86);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width: 0;
  flex:1 1 auto;
}

.langdd__codeMini{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(234,234,234,.78);
}

/* mobile: one column */
@media (max-width: 560px){
  .langdd__name{ display:none; } /* keep compact in header */
  .langdd__panel{ width: min(420px, calc(100vw - 24px)); }
  .langdd__grid{ grid-template-columns: 1fr; }
}

/* (Legacy) old inline lang pills (kept, harmless if unused) */
.lang{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border-radius:16px;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
}
.lang__a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  padding:0 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:-0.01em;
  color: rgba(234,234,234,.70);
  border:1px solid transparent;
}
.lang__a:hover{
  color: rgba(234,234,234,.92);
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.lang__a.is-active{
  color: rgba(234,234,234,.96);
  border-color: rgba(60,207,208,.30);
  background: rgba(60,207,208,.10);
}

/* Typography */
.h1{
  font-size: clamp(34px, 4.8vw, 60px);
  line-height:1.03;
  letter-spacing:-0.04em;
  margin:0;
}
.h3{
  font-size:14px;
  letter-spacing:-0.02em;
  margin:0;
}
.p{
  margin:0;
  color: var(--body);
  font-size:14px;
  line-height:1.5;
}
.lead{
  margin:14px 0 0;
  color: var(--body);
  font-size:15px;
  line-height:1.55;
  max-width: 64ch;
}

.accent{
  color: var(--accent);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 16px;
  border-radius:14px;
  font-size:13px;
  font-weight:700;
  letter-spacing:-0.01em;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(234,234,234,.92);
  box-shadow: var(--shadow2);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}
.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.btn:active{
  transform: translateY(0);
}
.btn--primary{
  border-color: rgba(60,207,208,.32);
  background: rgba(60,207,208,.12);
}
.btn--primary:hover{
  border-color: rgba(60,207,208,.42);
  background: rgba(60,207,208,.16);
}
.btn--ghost{
  background: rgba(255,255,255,.02);
}

/* HERO */
.hero{
  padding:64px 0 22px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:start;
}
.hero__left{
  padding-top:4px;
}
.hero__cta{
  display:flex;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.pill{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(234,234,234,.76);
  font-size:12px;
  font-weight:700;
  letter-spacing:-0.01em;
}

/* Command pill (below buttons) */
.cmd{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
}
.cmd__dollar{
  width:20px; height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(234,234,234,.90);
  font-weight:700;
}
.cmd__code{
  font-size:13px;
  opacity:.82;
  letter-spacing:-0.01em;
  white-space:nowrap;
}

/* RIGHT SIDE: floating UI components — flat UI cards */
.hero__right{
  position:relative;
  min-height:420px;
}

.floatStage{
  position:relative;
  height:420px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.01);
  overflow:hidden;
}

/* Explicitly disable any “halo” visuals */
.halo{ display:none !important; }

.uiCard{
  position:absolute;
  width:280px;
  border-radius: var(--r);
  background: var(--card); /* SPEC */
  border:1px solid var(--border); /* SPEC */
  box-shadow: var(--shadow); /* short, realistic */
  backdrop-filter: blur(10px);
  padding:14px 14px 12px;
  transform: translateZ(0);
}

/* Card header: minimal, no flashy visuals */
.uiCard__pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.uiPill{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-size:12px;
  opacity:.82;
  letter-spacing:-0.01em;
}
.uiTag{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  font-size:12px;
  opacity:.82;
}

/* Keep tags calm */
.uiTag--ok{
  border-color: rgba(60,207,208,.26);
  background: rgba(60,207,208,.10);
}
.uiTag--live{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.uiTag--muted{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  opacity:.74;
}

.uiCard__title{
  font-weight:650;
  letter-spacing:-0.01em;
  font-size:14px;
  opacity:.94;
  margin-bottom:10px;
}

/* Rows inside cards — flat, no gradients */
.uiList{ display:flex; flex-direction:column; gap:8px; }

.uiRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.uiRow--tight{ padding:8px 10px; }

.uiK{ font-size:12px; opacity:.68; }
.uiV{ font-size:12px; opacity:.90; }

/* Card placement + subtle rotation (±2deg max) */
.uiCard--a{ left:26px; top:36px;  --rot:-1.4deg; transform: rotate(var(--rot)); }
.uiCard--b{ right:34px; top:82px; width:250px; --rot: 1.2deg; transform: rotate(var(--rot)); }
.uiCard--c{ left:56px; bottom:54px; width:252px; --rot: 1.1deg; transform: rotate(var(--rot)); }
.uiCard--d{ right:40px; bottom:78px; width:262px; --rot:-1.0deg; transform: rotate(var(--rot)); }

/* Float animation — very slow, tiny amplitude */
[data-float="1"]{
  animation: floatY 12.5s ease-in-out infinite;
}
.uiCard--b[data-float="1"]{ animation-duration: 14.5s; animation-delay: -2.2s; }
.uiCard--c[data-float="1"]{ animation-duration: 13.6s; animation-delay: -4.6s; }
.uiCard--d[data-float="1"]{ animation-duration: 15.4s; animation-delay: -1.2s; }

@keyframes floatY{
  0%,100%{ transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%{ transform: translateY(-10px) rotate(var(--rot, 0deg)); }
}

/* FEATURES — exactly 4 cards, equal height, same card style */
.features{ padding:12px 0 0; }

.fgrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  margin-top:18px;
}

.fcard{
  border-radius: var(--r);
  background: var(--card); /* same as UI cards */
  border:1px solid var(--border);
  box-shadow: var(--shadow2);
  padding:16px 16px 14px;
  min-height: 140px;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
  position:relative;
  overflow:hidden;
}

.fcard:hover{
  transform: translateY(-4px); /* SPEC */
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}

.fcard__top{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Base icon container */
.ficon{
  width:28px; height:28px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03); /* flat */
  position:relative;
  flex:0 0 auto;
}

/* simple “glyph” inside icon (no external assets) */
.ficon::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.02);
}

/* =========================
   PRICING
   ========================= */

.simple{ padding:64px 0; }

#pricing.simple{ padding-top:56px; }
#download.simple{ padding-top:56px; }

/* strengthen plan cards in anchor version too */
#pricing .plan{
  border-radius: var(--r);
  background: var(--card);
  border:1px solid var(--border);
  box-shadow: var(--shadow2);
}
#pricing .plan:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}

/* =========================
   Pricing (flat, UI-first)
   ========================= */

.plans{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
  margin-top:18px;
}
.plan{
  border-radius: var(--r);
  background: var(--card);
  border:1px solid var(--border);
  box-shadow: var(--shadow2);
  padding:18px;
  display:flex;
  flex-direction:column;
  min-height: 180px;
  position:relative;
  overflow:hidden;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.plan:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}

.plan__hd{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.plan__price{
  font-size:14px;
  font-weight:700;
  opacity:.88;
}
.plan__desc{
  margin-top:10px;
  color: var(--body);
  font-size:14px;
  line-height:1.5;
}
.plan__cta{
  margin-top:auto;
  padding-top:16px;
}

.plan__note{
  margin-top:10px;
  font-size:12px;
  color: rgba(234,234,234,.62);
}

.compare{
  margin-top:14px;
  border-radius: var(--r);
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow2);
  padding:16px;
}

.compare__title{
  font-weight:700;
  letter-spacing:-0.02em;
  font-size:14px;
  opacity:.92;
  margin-bottom:10px;
}

.ctable{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.ctable__row{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border-radius:14px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}

.ctable__head{
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.06);
}

.ctable__cell{
  font-size:13px;
  color: rgba(234,234,234,.78);
}

.ctable__head .ctable__cell{
  color: rgba(234,234,234,.90);
  font-weight:700;
}

.ctable__k{
  color: rgba(234,234,234,.64);
  font-weight:600;
}

/* FIX: Partners CTA spacing (button not “sticking” to Step 4) */
#partners .compare > div:last-child{
  margin-top:18px !important;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* =========================
   DOWNLOAD — NEW wide cards (dlgrid/dlcard)
   ========================= */

.dlgrid{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.dlcard{
  border-radius: 18px;
  background: var(--card);
  border:1px solid var(--border);
  box-shadow: var(--shadow2);
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height: 84px;
  position:relative;
  overflow:hidden;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

a.dlcard{
  display:flex;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}

.dlcard:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}

.dlcard__left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;
}

.dlcard__txt{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 0;
}

.dlcard__title{
  font-size:14px;
  font-weight:750;
  letter-spacing:-0.02em;
  color: rgba(234,234,234,.92);
  line-height:1.2;
}

.dlcard__desc{
  font-size:13px;
  line-height:1.45;
  color: rgba(234,234,234,.66);
  max-width: 86ch;
}

.dlcard__right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

/* left icon — simple engineered glyphs */
.dlicon{
  width:34px;
  height:34px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  position:relative;
  flex:0 0 auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
}

.dlicon::after{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.02);
}

.dlicon--android::after{
  border-color: rgba(60,207,208,.22);
  background: rgba(60,207,208,.06);
}

.dlicon--ios::after{
  inset:10px;
  border-radius:999px;
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
}

.dlicon--desktop::after{
  inset:10px 9px 11px;
  border-radius:8px;
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.02);
}

/* right badge */
.dlbadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(234,234,234,.86);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
}

.dlbadge--download{
  border-color: rgba(60,207,208,.28);
  background: rgba(60,207,208,.10);
  color: rgba(234,234,234,.92);
}

/* =========================
   DOWNLOAD — legacy pseudo badge hard-disable (FIXES ANDROID STRIPE)
   Your current markup still has the old inline-grid articles,
   where a ::after badge is injected (Download/Soon). This causes
   a thin band/stripe due to compositing inside the first card.
   ========================= */

#download [style*="grid-template-columns: repeat(3"] > article::after{
  content:none !important;
  display:none !important;
}

#download [style*="grid-template-columns: repeat(3"] > article{
  padding-right:0 !important;
}

#download [style*="grid-template-columns: repeat(3"] > article .fcard__top{
  padding-right:0 !important;
}

/* =========================
   Footer — old minimal footer (kept)
   ========================= */

.footer{
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(5,5,5,.22);
  backdrop-filter: blur(10px);
}
.footer__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 0;
}
.footer__t{
  font-size:12px;
  opacity:.62;
}

/* =========================
   Footer — NEW full footer like main site
   ========================= */

.footer--full{
  margin-top: 42px;
  background:
    radial-gradient(900px 360px at 50% 0%,
      rgba(60,207,208,.05),
      rgba(60,207,208,0) 60%),
    rgba(5,5,5,.22);
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer--full .container{
  padding: 40px 0 22px;
}

.footer--full .footer__grid{
  display:grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer--full .footer__brand{
  min-width: 0;
}

.footer--full .footer__name{
  display:inline-flex;
  align-items:center;
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:16px;
  color: rgba(234,234,234,.92);
  transition: opacity .16s ease, transform .16s ease;
}
.footer--full .footer__name:hover{
  opacity: .95;
  transform: translateY(-1px);
}

.footer--full .footer__tagline{
  margin-top: 10px;
  color: rgba(234,234,234,.66);
  font-size:13px;
  line-height:1.55;
  max-width: 40ch;
}

.footer--full .footer__mini{
  margin-top: 16px;
  display:flex;
  flex-wrap:wrap;
  gap: 12px 16px;
}

.footer--full .footer__title{
  font-weight:800;
  letter-spacing:-0.01em;
  font-size:14px;
  color: rgba(234,234,234,.92);
  margin-bottom: 12px;
}

.footer--full .footer__link{
  display:block;
  padding: 8px 0;
  font-size:13px;
  color: rgba(234,234,234,.62);
  transition: color .16s ease, transform .16s ease;
}

.footer--full .footer__link:hover{
  color: rgba(234,234,234,.88);
  transform: translateX(2px);
}

.footer--full .footer__bottom{
  padding-top: 18px;
  color: rgba(234,234,234,.54);
  font-size:13px;
}

.footer--full .footer__bottom--center{
  text-align:center;
}

/* reveal animation hooks */
[data-reveal]{
  opacity:0;
  transform: translateY(8px);
  transition: opacity .55s ease, transform .55s ease;
}
.is-revealed{
  opacity:1 !important;
  transform: translateY(0) !important;
}

/* responsive */
@media (max-width: 980px){
  .nav{ display:none; }
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__right{ min-height:420px; }
  .fgrid{ grid-template-columns: repeat(2, 1fr); }
  .plans{ grid-template-columns: 1fr; }

  .ctable__row{ grid-template-columns: 1fr 1fr; }
  .ctable__row .ctable__k{ grid-column: 1 / -1; }

  .footer--full .footer__grid{
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }
}

@media (max-width: 560px){
  .container{ width:min(var(--container), calc(100% - 28px)); }
  .hero{ padding:48px 0 26px; }
  .floatStage{ height:420px; }
  .uiCard{ width:260px; }
  .uiCard--b{ width:240px; }
  .fgrid{ grid-template-columns: 1fr; }

  .dlcard{ padding: 14px 14px; }
  .dlcard__desc{ max-width: 48ch; }

  .footer--full .footer__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .footer--full .container{
    padding: 34px 0 18px;
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  body::before{ animation:none !important; }
  body::after{ animation:none !important; }
  [data-float="1"]{ animation:none !important; }
  [data-reveal]{ transition:none !important; transform:none !important; opacity:1 !important; }
  .btn, .fcard, .plan, .dlcard{ transition:none !important; }
}