/* ============ 90% ============ */

/* ===== Global 90% scale (desktop “normal mode”) ===== */
:root{ --ui-scale: .9; }

/* Prefer zoom (best in Chromium/Safari). Keeps layout & fixed header aligned */
@media (min-width: 1024px){
  html{ zoom: var(--ui-scale); }
  body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Fallback for browsers without `zoom` (e.g., some Firefox versions) */
@supports not (zoom: 1){
  @media (min-width: 1024px){
    html{
      transform: scale(var(--ui-scale));
      transform-origin: top left;
      width: calc(100% / var(--ui-scale)); /* prevent right-side cutoff */
      overflow-x: hidden;
    }
  }
}
/* ============ 90% ============ */
/* -------------------- Theme -------------------- */
:root{
  --app-bg-1:#0b1220;
  --app-bg-2:#0e1628;
  --card:#111827;
  --border: rgba(255,255,255,.10);
  --text-strong:#ffffff;
  --text-body:#e9edf5;
  --amber-1:#fbbf24;
  --amber-2:#f59e0b;

  /* 0 = pattern very visible, 1 = pattern almost hidden */
  --bg-pattern-strength: 0.89;
}


/* -------------------- Base -------------------- */
* { box-sizing: border-box; }
/* Let the background continue past the first viewport */
html { min-height: 100%; background-color: var(--app-bg-2); } /* dark fallback */
body { min-height: 100%; height: auto; }                      /* allow growth */

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.5; color:#e5eaf3;
}

/* -------------------- Page Background -------------------- */
.bg-app{
  /* solid fallback color */
  background-color: var(--app-bg-2);

  /* TOP → BOTTOM layers:
     1) Dark overlay (controls how “transparent” the pattern feels)
     2) Repeating AVIF pattern
     3) Your two glow gradients
     4) Main dark gradient
  */
  background-image:
    linear-gradient(
      rgba(11,18,32,var(--bg-pattern-strength)),
      rgba(11,18,32,var(--bg-pattern-strength))
    ),
    url("../assets/img/3.jpg"),
    radial-gradient(1200px 800px at 80% -10%, rgba(245,158,11,.12), transparent 60%),
    radial-gradient(900px 600px at 0% -10%, rgba(99,102,241,.12), transparent 55%),
    linear-gradient(180deg, var(--app-bg-1), var(--app-bg-2));

  background-repeat:
    no-repeat,
    repeat,
    no-repeat,
    no-repeat,
    no-repeat;

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

  background-attachment:
    scroll,
    scroll,
    scroll,
    scroll,
    scroll;

  background-position:
    center,
    top left,
    center,
    center,
    center;
}


/* -------------------- Utilities -------------------- */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.grad-amber{ background: linear-gradient(90deg, var(--amber-1), var(--amber-2)); -webkit-background-clip:text; background-clip:text; color: transparent; }
.no-wrap{ white-space: nowrap; }

/* -------------------- Navbar -------------------- */
.site-header{
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  background: rgba(255,255,255,.07);             /* lighter, lets background show through */
  border-bottom: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.nav-link{ color:#d1d5db; font-weight:600; }
.nav-link:hover{ color:#fff; }

/* icon-only login */
.btn-icon{
  height:40px; width:40px; display:inline-grid; place-items:center; border-radius:.8rem;
  background:rgba(255,255,255,.08); border:1px solid var(--border); color:#fff;
}
.btn-icon:hover{ background:rgba(255,255,255,.12); }

/* -------------------- Navbar Dropdowns (updated) -------------------- */
.nav-dd{ position:relative; }
.nav-dd-btn{ display:inline-flex; align-items:center; gap:.45rem; }
.nav-caret{ width:16px; height:16px; opacity:.9; transition: transform .2s ease; }

/* Menu panel — remove physical gap */
.nav-dd-menu{
  position:absolute; top:100%; left:0; z-index:50;   /* was calc(100% + .45rem) */
  margin-top:0;
  min-width:220px; padding:.5rem; border-radius:.9rem;
  background: linear-gradient(180deg, rgba(20,26,40,.98), rgba(16,23,42,.96));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  display:none;
}
.nav-dd.open .nav-dd-menu{ display:block; }
.nav-dd.open .nav-caret{ transform: rotate(180deg); }

/* Invisible hover “bridge” to prevent flicker while moving mouse down */
.nav-dd:hover::after,
.nav-dd.open::after{
  content:"";
  position:absolute; left:0; right:0; top:100%;
  height:10px;                       /* extend hover state under the button */
  background:transparent;
}

/* Items */
.nav-dd-item{
  display:flex; align-items:center; gap:.55rem;
  padding:.55rem .6rem; border-radius:.6rem;
  color:#e6edf7; text-decoration:none; font-weight:600;
}
.nav-dd-item:hover{ background: rgba(255,255,255,.08); }

/* Hover support on pointer devices (still clickable on touch) */
@media (hover:hover){
  .nav-dd:hover .nav-dd-menu{ display:block; }
  .nav-dd:hover .nav-caret{ transform: rotate(180deg); }
}

/* Optional: right-aligned dropdown */
.nav-dd.align-right .nav-dd-menu{ right:0; left:auto; }


/* -------------------- Hero Overlay -------------------- */
.hero-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 400px at 80% 10%, rgba(245,158,11,.14), transparent 60%),
    radial-gradient(800px 500px at 0% 20%, rgba(99,102,241,.16), transparent 55%);
}

/* ---------- Hero badge placement ---------- */
/* keep the visual style you already have, only change placement */
.hero-heading{ position:relative; display:grid; justify-items:center; }

.hero-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.48rem .9rem; border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#f5f7fb; font-weight:700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.35);

  /* NEW: natural flow + gentle overlap on top of the white line */
  position:relative;             /* not absolute */
  transform:none;                /* remove previous translate */
  margin-bottom:-14px;           /* tucks the badge onto the top edge of the H1 */
  z-index:2;                     /* stays above the text edge */
}

@media (min-width:1024px){
  .hero-badge{ margin-bottom: 20px; }  /* a tiny bit more overlap on large screens */
}


/* -------------------- Cards (grayer surface) -------------------- */
.card-surface{
  /* neutral slate/gray feel */
  background: linear-gradient(180deg, rgba(34,38,46,.96), rgba(17,24,39,.96));
  border: 1px solid var(--border);
}
.card-glow{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 30px -15px rgba(0,0,0,.6),
    0 14px 60px -20px rgba(245,158,11,.12);
}

/* -------------------- Calculator Layout -------------------- */
.calc-grid-wide{
  display:grid;
  grid-template-columns: minmax(0, 460px) 56px minmax(0, 460px);
  gap: 1.25rem;
  justify-content:center;
}
.calc-col{ min-width:0; }
.calc-mid{
  display:flex;
  align-items:center;
  justify-content:center;
  transform: translateY(12px);
}

/* -------------------- Inputs & SelectX -------------------- */
.input-flat{
  width:100%; height:50px;
  background:rgba(255,255,255,.10);
  border:1px solid var(--border);
  border-radius:0.5rem;
  padding:0 1rem; color:#ffffff; outline:none;
}
.input-flat::placeholder{ color:#b7c4d6; }
.input-flat:focus{ border-color:rgba(245,158,11,.8); box-shadow:0 0 0 3px rgba(245,158,11,.22); }
.input-with-icon{ position:relative; }
.cur-icon{
  position:absolute; left:.55rem; top:50%; transform:translateY(-50%);
  height:22px; width:22px; object-fit:contain;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
.cur-icon.invert{ filter: invert(1) brightness(1.2); }

/* ---------- SelectX ---------- */
.selectx{ position:relative; }
.selectx-btn{
  position:relative; width:100%; height:50px; text-align:left;
  background:rgba(255,255,255,.10);
  border:1px solid var(--border); border-radius:0.5rem; padding:0 2.6rem 0 .9rem;
  color:#fff; font-weight:600; font-size:.95rem; cursor:pointer;
}
.selectx-btn::after{
  content:""; position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  height:28px; width:28px; border-radius:.7rem; pointer-events:none;
  background:
    radial-gradient(16px 16px at 50% 50%, rgba(245,158,11,.9), rgba(245,158,11,.55) 60%, transparent 61%);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
.selectx.open .selectx-btn{ border-color: rgba(245,158,11,.75); }

/* Default (non-floating) dropdown — spans the wrapper width */
.selectx-menu{
  position:absolute; left:0; right:0; top:calc(100% + .5rem);
  z-index:30;
  background: rgba(16,23,42,.98);
  border:1px solid var(--border); border-radius:1rem; box-shadow:0 24px 60px rgba(0,0,0,.45);
  padding:.75rem;
  max-height:360px;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-gutter: stable both-edges;
  display:none;
}
/* Show when wrapper is open */
.selectx.open .selectx-menu{ display:block; }

/* Amount row: single, merged rule (no duplicates) */
.amount-row{
  position: relative;        /* so the row-relative menu can anchor here */
  overflow: visible;         /* allow the dropdown to extend out */
  display: flex;
  align-items: center;
  gap: .7rem;
}

/* Row-relative dropdown: JS sets left/top/width inline — don't override them here */
.selectx-menu.is-rowfloat{
  position: absolute !important;
  display: block !important;
  margin-top: 0 !important;  /* remove any default gap */
  max-width: none;           /* let JS control width */
  transform: none !important;
  z-index: 1000;             /* above cards/glass */
  /* don't set left/top/right/width here — JS handles them */
}

/* Optional: keep the legacy body-floating style for other menus (fallback) */
.selectx-menu.is-floating{
  margin-top: 0 !important;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  transform: translateZ(0);   /* layer promotion for crisp edges under zoom */
  will-change: top, left, width, transform;
  border-top-width: 1px;      /* clean visual join under scaling */
}





/* Dark, rounded scrollbar (WebKit) */
.selectx-menu::-webkit-scrollbar{ width:10px; }
.selectx-menu::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04);
  border-left:1px solid var(--border);
  border-radius:0 1rem 1rem 0;
}
.selectx-menu::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
}
.selectx-menu::-webkit-scrollbar-corner{ background:transparent; }
/* Firefox scrollbar */
.selectx-menu{ scrollbar-width:thin; scrollbar-color: rgba(255,255,255,.28) rgba(16,23,42,.98); }

/* Group header + options */
.selectx-group{
  font-size:.82rem; font-weight:800; color:var(--amber-1);
  margin:.2rem .25rem .5rem;
}
.selectx-option{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  width:100%; padding:.5rem .6rem; border-radius:.6rem; color:#e5e7eb;
  background:transparent; border:none; text-align:left; cursor:pointer; font-size:.95rem;
}
.selectx-option:hover{ background:rgba(255,255,255,.06); }
.selectx-option[aria-selected="true"]::after{ content:"✓"; color:#fbbf24; font-weight:800; }

/* reserves counter inside options and on button */
.selectx-option{ justify-content:space-between; }
.selectx-option .opt-label{ pointer-events:none; }
.selectx-option .opt-stat{
  margin-left:auto; font-weight:700; color:#e2e8f0; opacity:.9; font-size:.9rem;
}
.selectx-btn.has-stat{ padding-right: 5.4rem; }
.selectx-btn .btn-stat{
  position:absolute; right:2.2rem; top:50%; transform:translateY(-50%);
  font-weight:700; color:#e2e8f0; font-size:.9rem; opacity:.95;
}
.selectx-btn::after{ right:.55rem; }

/* ---------- Compact amount row (fixed vertical alignment) ---------- */
:root{ --amount-h: 50px; }

.amount-label{ display:block; color:#aeb8c8; font-size:.92rem; margin:0 0 .55rem 0; }

.amount-combo{
  flex:1;
  display:flex; align-items:center;
  height:var(--amount-h);
  padding:0 .75rem;
  background:#1f2937;
  border:1px solid rgba(255,255,255,.12);
  border-radius:.85rem;
  box-sizing:border-box;
}

.amount-input{
  flex:1;
  height:100%;
  background:transparent;
  border:0; outline:0;
  color:#e6edf7; font-weight:700; font-size:1rem;
  padding:0; margin:0; line-height:1;
}
.amount-input::placeholder{ color:#7c8799; }

/* asset button (SelectX trigger) */
.asset-select{ flex:0 0 auto; display:flex; }
.asset-btn{
  display:flex; align-items:center; justify-content:center;
  height:var(--amount-h);
  width:48px; /* square badge look */
  border-radius:.85rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-sizing:border-box;
  cursor:pointer;
}
.asset-btn:hover{ background:rgba(255,255,255,.10); }

.asset-ico{
  width:22px; height:22px; display:block;
  position:relative; top:1px;
}
.asset-btn .caret{ width:16px; height:16px; opacity:.55; margin-left:.15rem; }

/* ---------- Underfield: pill + brief (Reserve / Min / Max) ---------- */
.asset-under{
  display:flex; align-items:center; gap:.65rem; flex-wrap:wrap;
}

.asset-pill{
  display:inline-block; margin:.55rem 0 .35rem; padding:.25rem .6rem;
  border-radius:.6rem; font-weight:700; font-size:.85rem;
  color:#0b1220;
  background: linear-gradient(135deg, #ffbf3a, #d97706);
  border:1px solid rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

.mini-brief{
  color:#d8e0ec; font-size:.9rem;
  display:flex; align-items:center; gap:.5rem; line-height:1.2;
}
.mini-brief b,
.mini-brief strong{
  color:#fff; font-weight:800;
  font-variant-numeric: tabular-nums;
}
.mini-brief .mini-ic,
.i-dot{
  display:inline-grid; place-items:center;
  width:18px; height:18px; border-radius:50%;
  background:#ffd166; color:#0b1220; font-weight:900; font-size:.85rem; line-height:1;
}
.mini-brief .dot{
  opacity:.65; font-weight:900; transform: translateY(-1px);
}

/* -------------------- Summary -------------------- */
.summary-bar{
  display:grid; grid-template-columns: 1fr auto; gap:.75rem;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border); border-radius:0.5rem; padding:.75rem 1rem;
  font-size:.95rem;
}

/* -------------------- Titles -------------------- */
.section-title{
  font-weight:800; color:#fff; letter-spacing:.2px;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  white-space: nowrap;
}

/* -------------------- Trust Strip (base) -------------------- */
.trust-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1.1rem 2rem;
  margin-top:.75rem;
  margin-bottom: 2rem;
  background: transparent;
}
#calculator{ margin-bottom: 4rem; }

.trust-cell{
  display:flex; align-items:center; gap:.6rem;
  min-width:210px;
  padding:.25rem 0;
}
.trust-cell img,
.trust-cell .trust-ic{
  width:22px; height:22px; object-fit:contain;
  color:#e5e7eb;
  filter:none; opacity:.95;
}
.trust-brand{ font-weight:800; line-height:1.1; color:#fff; }
.trust-note{ font-size:.9rem; color:#cbd5e1; margin-top:2px; }
.rating{ color:#facc15; font-weight:800; }

/* Slim separators (desktop only) */
.trust-cell + .trust-cell{ position:relative; }
.trust-cell + .trust-cell::before{
  content:"";
  position:absolute; left:-1rem; top:50%; transform:translateY(-50%);
  width:1px; height:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border-radius:1px;
}
@media (max-width:640px){
  .trust-strip{ gap:.6rem 1rem; }
  .trust-cell{ min-width:unset; }
  .trust-cell + .trust-cell::before{ display:none; }
  .trust-note{ font-size:.85rem; }
}

/* -------------------- Trustpilot (green tint only for this icon) -------------------- */
:root{ --tp-green:#00B67A; }

/* If your Trustpilot icon is an <img> (PNG/SVG), target by class OR filename */
.trust-cell img.trustpilot,
.trust-socket img.trustpilot,
.trust-cell img[src*="trustpilot"],
.trust-socket img[src*="trustpilot"]{
  /* Tint a white/gray glyph to Trustpilot green */
  filter: invert(36%) sepia(88%) saturate(727%) hue-rotate(126deg) brightness(95%) contrast(96%) !important;
}

/* If your Trustpilot icon is inline SVG or uses currentColor */
.trust-cell .trust-ic.trustpilot,
.trust-cell .trust-ic.trustpilot svg{
  color: var(--tp-green) !important;
  fill: var(--tp-green) !important;
}

/* Optional: a tiny hover lift for just the Trustpilot mark */
.trust-cell img.trustpilot:hover,
.trust-cell img[src*="trustpilot"]:hover{
  filter: invert(36%) sepia(88%) saturate(727%) hue-rotate(126deg) brightness(104%) contrast(100%) !important;
}

/* -------------------- Trust “Carved Note” + Ambient Halo (replace block) -------------------- */
.trust-carved{
  position: relative;
  padding: .9rem 1.1rem;
  background: transparent;          /* no panel */
  border: none;
  box-shadow: none;
  isolation: isolate;               /* allow a behind-the-strip halo */
  overflow: visible;                /* let the halo breathe */
  z-index: 0;
}

/* Halo BEHIND the entire strip (not just top) */
.trust-carved::before{
  content:"";
  position:absolute;
  inset:-26px -32px;                /* extend beyond the row */
  z-index:-1;                       /* sit behind the content */
  pointer-events:none;
  filter: blur(18px);
  background:
    radial-gradient(70% 110% at 50% 50%,
      rgba(245,158,11,.085),        /* warm amber glow */
      rgba(99,102,241,.055) 35%,    /* cool counter-glow */
      transparent 70%);
}

/* Balanced inset bevel (very soft, no hard “top border”) */
.trust-carved::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  /* two gentle inner shadows: one light from top, one dark from bottom */
  box-shadow:
    inset 0 10px 26px rgba(255,255,255,.06),
    inset 0 -12px 28px rgba(0,0,0,.34);
  border-radius: 16px;              /* softens the cut without showing a box */
  opacity:.9;
}

/* Engraved separators */
.trust-carved .trust-cell + .trust-cell::before{
  height:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.38));
  opacity:.5;
}

/* Softer text for carved feel */
.trust-carved .trust-brand{
  color:#e2e8f0;
  text-shadow: 0 1px 0 rgba(0,0,0,.32), 0 -1px 0 rgba(255,255,255,.03);
}
.trust-carved .trust-note{
  color:#9fb0c8;
  text-shadow: 0 1px 0 rgba(0,0,0,.28), 0 -1px 0 rgba(255,255,255,.02);
}
.trust-carved .rating{ opacity:.88; }

/* Icon socket stays the same; included for completeness */
.trust-socket{
  display:inline-grid; place-items:center;
  width:32px; height:32px; border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.22));
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.08);
}
.trust-socket img,
.trust-socket svg{
  width:20px; height:20px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 -1px 0 rgba(255,255,255,.05));
}


/* -------------------- LIVE RESERVES (narrow + delicate) -------------------- */

.reserves-wrap-narrow{
  max-width: 62rem;           /* narrower, centered */
  margin: .5rem auto 0;
}

.reserves-grid--sym{
  display:grid; gap: .9rem;
  grid-template-columns: repeat(4, minmax(0,1fr));  /* tidy 4-col grid on desktop */
}
@media (max-width:1024px){ .reserves-grid--sym{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width:640px){  .reserves-grid--sym{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* collapsed: show first 8 (perfect 4×2 symmetry) */
.reserves-grid--sym.collapsed .reserve-card:nth-child(n+9){ display:none; }

/* delicate card */
.reserve-card{
  display:grid; grid-template-rows:auto 1fr auto; gap:.35rem;
  min-height:112px; padding:.8rem; border-radius:.9rem;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.reserve-card:hover{
  transform: translateY(-1px);
  border-color: rgba(245,158,11,.20);
  box-shadow: 0 8px 20px -14px rgba(0,0,0,.35);
}

.r-top{ display:flex; align-items:center; gap:.45rem; color:#e5e7eb; font-size:.93rem; }
.r-ic{ width:20px; height:20px; object-fit:contain; }
.r-ic.invert{ filter: invert(1) brightness(1.2); }
.r-name{ font-weight:700; letter-spacing:.15px; }

.r-amt{
  align-self:center;
  font-size:1.2rem; font-weight:900; color:#f3f4f6;
  font-variant-numeric: tabular-nums; letter-spacing:.01em;
}

.r-sub{ font-size:.78rem; color:#9fb0c8; }
.r-sub.ok{ color:#34d399; }

/* bottom toggle (soft pill) */
.reserves-foot{ display:flex; justify-content:center; margin-top:.9rem; }
.btn-soft-amber{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.38rem .7rem; border-radius:.7rem;
  font-weight:700; font-size:.95rem;
  color:#fbbf24; background:rgba(245,158,11,.08);
  border:1px solid rgba(245,158,11,.25);
}
.btn-soft-amber:hover{ background:rgba(245,158,11,.12); }
.btn-soft-amber .on{ display:none; }
[aria-expanded="true"] .on{ display:inline; }
[aria-expanded="true"] .off{ display:none; }


/* -------------------- Why Us -------------------- */
.why2{ margin-top: 2.2rem; }
.why2-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width:1024px){ .why2-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){  .why2-grid{ grid-template-columns: 1fr; } }

.why2-card{
  position:relative;
  display:grid; grid-template-rows: auto auto 1fr auto; gap:.45rem;
  padding:1rem; border-radius:1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.035)),
    radial-gradient(120% 140% at 0% 0%, rgba(245,158,11,.06), transparent 60%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 28px -18px rgba(0,0,0,.45);
  overflow:hidden;
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
}
.why2-card:hover{
  transform: translateY(-2px);
  border-color: rgba(245,158,11,.22);
  box-shadow: 0 16px 38px -18px rgba(0,0,0,.55);
}

/* slim golden accent bar at the left */
.why2-accent{
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, var(--amber-1), var(--amber-2));
  opacity:.9;
}

/* small folded corner detail (top-right) */
.why2-card::after{
  content:""; position:absolute; right:-18px; top:-18px; width:48px; height:48px; border-radius:12px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.08), rgba(0,0,0,.0));
  transform: rotate(35deg);
  pointer-events:none;
}

/* icon puck */
.why2-icon{
  height:42px; width:42px; border-radius:.9rem; display:grid; place-items:center;
  color:#0b1220;
  background: linear-gradient(135deg, var(--amber-1), var(--amber-2));
  border:1px solid rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 22px -12px rgba(245,158,11,.45);
}
.why2-icon svg{ width:22px; height:22px; }

/* titles & text — softer than pure white */
.why2-title{ font-weight:900; color:#f3f4f6; letter-spacing:.2px;  }
.why2-text{ color:#b8c3d6; font-size:.95rem; }

/* tiny stat pills */
.why2-stats{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.25rem; }
.stat-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.22rem .5rem; border-radius:.55rem; font-weight:700; font-size:.82rem;
  color:#fbbf24; background: rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.24);
}

/* footnote */
.why2-footnote{
  margin-top:.9rem; text-align:center; font-size:.85rem; color:#93a3bb;
}

/* Extra spacing under the WHY header */
.why2 .section-title{
  margin-bottom: 1.1rem; /* a little more space */
}

@media (min-width:1024px){
  .why2 .section-title{ margin-bottom: .9rem; } /* slightly more on desktop */
}


/* ---- Reviews: seamless marquee ---- */
#reviews-title{
  text-align: center;
  display: block;
  margin: 0 auto .75rem; /* adds a little space under the title */
  margin-top: 3rem;
}

/* optional: keep the scroller box visually centered in its area */
.reviews-viewport{
  margin: .75rem auto 0;
}

.reviews-viewport{
  position: relative;
  overflow: clip;             /* no scrollbar & no page overflow */
  width: 100%;
  contain: paint;             /* isolate painting so no bottom scroller appears */
}

.reviews-track{
  display:flex;
  gap:1rem;
  will-change: transform;
  touch-action: pan-y;         /* allow vertical scroll on mobile */
}

.reviews-viewport::-webkit-scrollbar{ display:none; }
.reviews-viewport{ scrollbar-width: none; -ms-overflow-style: none; }

/* Card small tweaks for consistency (you already have base styles) */
.review-card{
  min-width: clamp(260px, 42vw, 360px);
}
.review-user{
  display:flex; align-items:center; gap:.5rem; margin-top:.6rem; color:#9fb0c8; font-size:.9rem;
}
.review-user .fi{ width:20px; height:14px; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.25) inset; }

/* Optional: pause-on-hover cursor */
.reviews-viewport:hover{ cursor:grab; }


/* -------------------- Footer -------------------- */
.site-footer{ background:#171a21; border-top:1px solid var(--border); color:#e5e7eb; }
.footer-head{ font-weight:800; letter-spacing:.3px; border-bottom:1px solid var(--border); padding-bottom:.35rem; display:inline-block; }
.footer-text{ color:#cbd5e1; }
.footer-list{ margin-top:.6rem; display:grid; gap:.4rem; color:#dde3ee; }
.li-ic{ display:inline-block; width:1.2rem; text-align:center; margin-right:.25rem; }
.footer-links{ margin-top:.6rem; display:grid; gap:.45rem; }
.footer-links a{ color:#cbd5e1; }
.footer-links a:hover{ color:#fff; }
.flag{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:18px; background:#2a2f3a; border:1px solid var(--border); border-radius:3px; font-size:12px; }
.social{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:.6rem; background:rgba(255,255,255,.06); border:1px solid var(--border); }
.social:hover{ background:rgba(255,255,255,.1); }
.footer-bottom{ display:grid; gap:.6rem; justify-items:start; border-top:1px solid var(--border); padding-top:1rem; margin-top:1rem; }
@media (min-width: 768px){ .footer-bottom{ grid-template-columns: 1fr auto auto; align-items:center; } }
.pay-ic{ filter: grayscale(.1); }

.footer-flags .fi{
  width:22px; height:16px; border-radius:3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}


/* -------------------- Chat + Modals -------------------- */
/* CHAT (only these selectors changed) */
.chat-fab{
  position:fixed; right:1rem; bottom:1rem; z-index:40;
  height:52px; width:52px; border-radius:999px;
  background: linear-gradient(135deg, var(--amber-1), var(--amber-2));
  box-shadow: 0 14px 30px -12px rgba(245,158,11,.55);
  display:grid; place-items:center; color:#0b1220; border:1px solid rgba(255,255,255,.22);
}

.chat-window{
  position:fixed; right:1rem; bottom:4.5rem; z-index:40;  /* stays below auth overlay (z=50) */
  width:min(390px, calc(100vw - 2rem));
  height:min(64vh, 560px);               /* ⬅️ taller overall */
  display:none;                          /* your JS toggles this */
  flex-direction:column;
  background:linear-gradient(180deg, rgba(18,24,38,.98), rgba(18,24,38,.96));
  border:1px solid rgba(255,255,255,.28);/* clearer edge for separation */
  border-radius:1rem; overflow:hidden;

  /* stronger separation from page */
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  box-shadow:
    0 28px 80px -16px rgba(0,0,0,.75),
    0 12px 34px -18px rgba(0,0,0,.60);
  isolation:isolate;                     /* for the halo below */
}

/* soft amber halo behind the chat window */
.chat-window::before{
  content:""; position:absolute; inset:-10px; z-index:-1; border-radius:1.25rem;
  box-shadow:
    0 0 0 1px rgba(245,158,11,.08),
    0 26px 70px -18px rgba(245,158,11,.25);
}

.chat-head{
  padding:.8rem .95rem;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.chat-body{
  flex:1;                                 /* ⬅️ fills remaining height */
  padding:1rem;
  overflow:auto;
}

.chat-bubble{
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  border-radius:.8rem; padding:.6rem .8rem; font-size:.95rem;
}

.chat-input{
  display:flex; gap:.5rem; padding:.75rem .95rem;
  border-top:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
}

/* mobile: allow more height and edge breathing room */
@media (max-width:640px){
  .chat-window{
    right:.75rem; left:.75rem; bottom:4.25rem; width:auto;
    height:min(72vh, 560px);
  }
}

/* AUTH (unchanged) */
/* ---------- Auth Modal (updated) ---------- */
.auth-overlay{
  position:fixed; inset:0; display:none; z-index:50;
  background: rgba(6,10,18,.78);
  backdrop-filter: blur(10px) saturate(60%) brightness(.75);
  -webkit-backdrop-filter: blur(10px) saturate(60%) brightness(.75);
  align-items:center; justify-content:center; padding:1rem;
  isolation:isolate;
}
.auth-modal{
  width:min(520px, 100%);
  background: linear-gradient(180deg, rgba(70,70,70,.98), rgba(16,23,42,.96));
  border:1px solid var(--border);
  border-radius:1rem; overflow:hidden;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,.75), 0 18px 36px -24px rgba(15,23,42,.8);
}
.auth-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.65rem .75rem; border-bottom:1px solid var(--border);
}

/* Tabs: equal width */
.tabs{ display:flex; gap:.35rem; width:100%; }
.tabs .tab{
  flex:1; text-align:center;
  font-weight:800; padding:.5rem .8rem;
  border-radius:.6rem; color:#e5eaf3;
  border:1px solid transparent;
}
.tabs .tab:hover{ background:rgba(255,255,255,.08); }
.tab.active{
  color:#111827;
  background: linear-gradient(135deg, var(--amber-1), var(--amber-2));
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 10px 18px -10px rgba(245,158,11,.45);
}

.auth-body{ padding:.9rem; }
.auth-label{ display:block; font-size:.85rem; color:#d7e1f1; }

/* Panes */
.auth-pane{ display:none; }
.auth-pane.is-active{ display:block; }

/* Form layout & helpers */
.auth-grid{ display:grid; grid-template-columns:1fr; gap:.65rem; }
.auth-row-between{ display:flex; align-items:center; justify-content:space-between; margin-top:.25rem; }
.auth-check{ display:inline-flex; align-items:center; gap:.45rem; color:#d7e1f1; font-size:.95rem; }
.auth-link{ color:#dbe6ff; text-decoration:underline; }
.auth-hint{ color:#9fb0c8; font-size:.85rem; margin-top:.4rem; }

/* Divider */
.auth-divider{ display:flex; align-items:center; gap:.6rem; margin:.7rem 0; }
.auth-divider::before,
.auth-divider::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
}
.auth-divider span{ color:#aebad1; font-size:.85rem; }

/* Buttons */
.btn-amber{
  height:44px; border-radius:.8rem; font-weight:800;
  color:#111827; border:1px solid rgba(0,0,0,.18);
  background: linear-gradient(135deg, var(--amber-1), var(--amber-2));
  box-shadow: 0 12px 26px -12px rgba(245,158,11,.45);
}
.btn-amber:hover{ filter: brightness(1.04); }

.btn-google{
  height:44px; border-radius:.8rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  color:#0b1220; background:#fff; border:1px solid rgba(0,0,0,.18);
  box-shadow: 0 8px 20px -12px rgba(0,0,0,.35);
}
.btn-google:hover{ filter: brightness(1.02); }
.gmark{ display:inline-grid; place-items:center; width:22px; height:22px; }
.gmark svg{ width:20px; height:20px; display:block; }

/* Ghost-style green button for "Already Paid" */
.btn-paid{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;

  /* same base as btn-ghost but tinted green */
  color:#bbf7d0;
  background: rgba(22,163,74,.10);
  border-color: rgba(34,197,94,.2) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.btn-paid:hover{
  background: rgba(22,163,74,.16);
}

/* Small green check icon inside the button */
.paid-ic{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background: linear-gradient(135deg, #bbf7d0, #4ade80);
  color:#022c22;
  font-size:.8rem;
  font-weight:900;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45);
}

/* -------------------- Mobile Drawer (outside header) -------------------- */
.mobile-panel{
  position: fixed;
  inset: 0;
  height: 100svh;
  z-index: 120;            /* above header + content */
  display: none;
}
.mobile-panel.is-open{ display:block; }

/* Backdrop */
.mobile-panel::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(6,10,18,.72);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}

/* Sheet */
.mobile-panel-inner{
  position:absolute; right:0; top:0; bottom:0;
  width: min(380px, 86vw);
  padding: 1rem;
  overflow:auto;
  background: linear-gradient(180deg, rgba(16,23,42,.98), rgba(16,23,42,.96));
  border-left:1px solid var(--border);
  box-shadow: -20px 0 80px rgba(0,0,0,.6);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

/* Nav stack */
.mobile-nav{ display:grid; gap:.45rem; margin-top:.8rem; }

/* Primary action (no caret) */
.mobile-link{
  display:block; padding:.6rem .75rem;
  border-radius:.8rem; color:#e5e7eb;
  border:1px solid transparent;
}
.mobile-link:hover{ border-color: var(--border); background: rgba(255,255,255,.04); }

.mobile-link--primary{
  font-weight:900; color:#0b1220;
  background: linear-gradient(135deg, var(--amber-1), var(--amber-2));
  border:1px solid rgba(0,0,0,.18);
  box-shadow: 0 12px 26px -12px rgba(245,158,11,.45);
}
.mobile-link--primary:hover{ filter: brightness(1.03); }

/* Accordion groups (these get the caret) */
.mobile-acc{
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:.9rem;
  overflow:hidden;
}
.mobile-acc > summary{
  position: relative;
  list-style:none;
  cursor:pointer;
  padding:.65rem .95rem .65rem .75rem;
  font-weight:800;
  color:#e6edf7;
  user-select:none;
}
.mobile-acc[open] > summary{ background: rgba(255,255,255,.03); }
.mobile-acc > summary::-webkit-details-marker{ display:none; }

/* Right-side caret (flips on open) */
.mobile-acc > summary::after{
  content:"";
  position:absolute; right:.6rem; top:50%;
  width:18px; height:18px; transform: translateY(-50%) rotate(0deg);
  opacity:.9;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5'/%3E%3C/svg%3E\") center/100% 100% no-repeat;
  transition: transform .18s ease, opacity .18s ease;
}
.mobile-acc[open] > summary::after{ transform: translateY(-50%) rotate(180deg); }

/* Submenu */
.mobile-sub{ padding:.45rem; display:grid; gap:.3rem; }
.mobile-sublink{
  display:block; padding:.5rem .55rem;
  border-radius:.6rem; color:#cbd5e1;
  border:1px solid transparent;
}
.mobile-sublink:hover{ color:#fff; border-color: var(--border); background: rgba(255,255,255,.04); }

/* Optional outlined login if you keep it in the drawer */
.btn-login-outline{
  margin-top:.5rem; height:44px; width:100%;
  border-radius:.8rem; font-weight:800; color:#e6edf7;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
}
.btn-login-outline:hover{ background: rgba(255,255,255,.1); }

/* Lock page scroll while open */
body.is-mobile-open{ overflow:hidden; }

/* -------------------- Responsive Tweaks -------------------- */
@media (max-width: 1023px){
  .calc-grid-wide{ grid-template-columns: 1fr 56px 1fr; }
}
@media (max-width: 768px){
  .calc-grid-wide{ grid-template-columns: 1fr; }
  .calc-mid{ display:none; }
}

@media (max-width: 768px){
  .calc-mid{ transform: translateY(6px); } /* smaller nudge on tight layouts */
}

/* -------------------- Header Offset -------------------- */
:root { --header-h: 5rem; } /* equals nav .h-20 (80px) */
.has-fixed-header { padding-top: var(--header-h); }

/* -------------------- Hero Title & Lead -------------------- */
.hero-title{
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.02em;
  text-align:center;
  margin-top: .75rem;
}
.hero-title-line{
  font-size: clamp(2rem, 4.8vw + .5rem, 4.2rem);
}
.hero-title-accent{
  background:
    linear-gradient(180deg,
      #ffe9a6 0%,
      #ffd05e 28%,
      #fbbf24 52%,
      #f59e0b 72%,
      #d97706 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(0,0,0,.25),
    0 8px 22px rgba(245,158,11,.25);
}
.hero-lead{
  margin-top:.5rem;
  text-align:center;
  color:#cfd8e3;
  font-size: clamp(.95rem, .8vw + .45rem, 1.1rem);
  letter-spacing:.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2rem;
}

/* ===== Mobile hero spacing tweaks ===== */
@media (max-width: 640px){
  /* Make each title line a block and add more gap between them */
  .hero-title-line{
    display:block;
  }

  /* First line: Trusted E-Currency, Crypto & Fiat Exchange */
  .hero-title{
    margin-bottom: .85rem;   /* ⬅️ more space before "Exchange Digital Money" */
    margin-top: 2.85rem;   /* ⬅️ more space before "Exchange Digital Money" */
  }

  /* Lead text: reduce bottom margin so box comes closer */
  .hero-lead{
    margin-top: .65rem;      /* almost same top gap */
    margin-bottom: 0.8rem;   /* ⬅️ was 3rem, now less space before main box */
	    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    max-width: 100%;
  }
}

/* -------------------- Brand & Nav Pills -------------------- */
/* Brand container: tighter spacing + better vertical centering */
.brand{
  display:inline-flex; align-items:center; gap:.6rem; min-width:0;
}

/* Puck behind the PNG: subtle bevel + ring so yellow pops on dark glass */
.brand-mark{
  display:grid; place-items:center;
  height:44px; width:44px; border-radius:14px;
  padding:6px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  border:1px solid rgba(255,255,255,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 10px 22px -10px rgba(0,0,0,.60);
}
.brand-mark img{
  width:100%; height:100%; object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
}

/* Lockup text: slightly smaller title for balance with the puck */
.brand-text{ line-height:1; display:grid; }
.brand-title{
  font-weight:900; color:#fff;
  font-size:1.32rem; letter-spacing:.2px;
}
.brand-sub{
  margin-top:.18rem;
  color:#a8b6c9; font-size:.92rem; font-weight:600;
}

/* Collapse subtitle on narrow screens to keep header clean */
@media (max-width: 720px){
  .brand-sub{ display:none; }
}

/* Keep if you still use nav icons elsewhere */
.nav-icon{ width:18px; height:18px; }

/* Pills */
.nav-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:1rem; font-weight:700;
  color:#e6edf7; border:1px solid transparent; background:transparent;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
  white-space:nowrap;
}
.nav-pill:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
.nav-pill.active{
  color:#0b1220;
  background: linear-gradient(135deg, var(--amber-1), var(--amber-2));
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 10px 24px -10px rgba(245,158,11,.45);
}

/* Login button */
.btn-login{
  display:inline-flex; align-items:center; gap:.5rem;
  height:40px; padding:0 .9rem; border-radius:.9rem;
  white-space:nowrap; font-weight:800; color:#fff;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
}
.btn-login:hover{ background: rgba(255,255,255,.14); }
.btn-login .nav-icon{ width:18px; height:18px; }

/* Optional: ultra-compact brand mode—show only the puck under 380px */
@media (max-width: 380px){
  .brand-text{ display:none; }
}

/* -------------------- Small Hygiene -------------------- */
.trust-strip{ list-style:none; padding-left:0; }
.trust-cell{ list-style:none; }
/* slightly lighter/shorter separators already adjusted above */

/* Extra padding when an icon sits inside the input */
.input-flat--iconpad{ padding-left: 2.9rem; }
.cur-icon{ left:.85rem; width:24px; height:24px; }

/* -------------------- Calculator Amber Halo -------------------- */
.calc-amber{ position:relative; }
.calc-amber::before{
  content:""; position:absolute; inset:-6px;
  border-radius: calc(1rem + 6px);
  box-shadow:
    0 0 0 1px rgba(245,158,11,.05),
    0 0 26px 6px rgba(245,158,11,.10),
    0 18px 36px -16px rgba(245,158,11,.16);
  pointer-events:none;
}

/* -------------------- Swap Button (round) -------------------- */
.swap-btn,
.swap-icon{                 /* support either class name */
  position: relative;
  height:50px;
  width:50px;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(34,42,56,.92), rgba(23,30,44,.92)); /* dark disk */
  border:1px solid rgba(255,255,255,.18);                             /* inner ring */
                                  /* outer soft ring */
}
.swap-btn::before,
.swap-icon::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, #ffd466, #f59e0b);              /* gold */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 8h9l-2.2-2'/%3E%3Cpath d='M17.5 14h-9l2.2 2'/%3E%3C/g%3E%3C/svg%3E")
    center/30px 30px no-repeat;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 8h9l-2.2-2'/%3E%3Cpath d='M17.5 14h-9l2.2 2'/%3E%3C/g%3E%3C/svg%3E")
    center/30px 30px no-repeat;
}

.swap-btn:hover,
.swap-icon:hover{
  border-color: rgba(255,255,255,.24);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 0 4px rgba(255,255,255,.12);
}

/* Focus ring for keyboard users */
.swap-btn:focus-visible,
.swap-icon:focus-visible{
  outline: 2px solid rgba(255,255,255,.25);
  outline-offset: 2px;
}

/* Mobile: smaller vertical nudge */
@media (max-width: 768px){
  .calc-mid{ transform: translateY(8px); }
}

/* -------------------- CTA Button (shrink width on hover) -------------------- */
.btn-cta{
  position: relative;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  height:56px; border-radius:1rem;
  font-weight:800; font-size:1.2rem; color:#111827;
  background: transparent; border: none;
  transition: filter .2s;
  isolation: isolate;              /* keep ::before behind text */
}
.btn-cta::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(135deg, var(--amber-1), var(--amber-2));
  box-shadow: 0 24px 60px -18px rgba(245,158,11,.55),
              0 0 0 1px rgba(0,0,0,.18) inset;
  transform-origin:center;
  will-change: transform;
  z-index: -1;
  pointer-events: none;
  transition: transform .6s cubic-bezier(.22,.8,.2,1),
              box-shadow .6s,
              filter .6s;
}
.btn-cta > *{ position: relative; z-index: 1; }
.btn-cta:hover::before{
  transform: scaleX(.9);
  filter: brightness(1.03);
  box-shadow: 0 28px 70px -18px rgba(245,158,11,.62),
              0 0 0 1px rgba(0,0,0,.18) inset;
}
.btn-cta:active::before{
  transform: scaleX(.5) translateY(1px);
  box-shadow: 0 18px 40px -18px rgba(245,158,11,.45),
              0 0 0 1px rgba(0,0,0,.18) inset;
}

/* small helper text under the CTA */
.cta-note{
  margin-top:.9rem;
  text-align:center;
  color:#9fb0c8;
  font-size:.85rem;
  letter-spacing:.01em;
}
/* ---------- Pressed state for step buttons ---------- */

/* Back, Continue (steps 2–3), Already Paid, Pay */
.btn-ghost:active,
.btn-amber:active,
.btn-paid:active,
.btn-cta--pill:active{
  transform: translateY(1px) scale(.99);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 3px 8px -6px rgba(0,0,0,.8);
  filter: brightness(.96);
}

/* -------------------- Language Switcher -------------------- */
.lang-switch{ z-index: 55; }

.lang-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  height:40px; padding:0 .7rem; border-radius:.9rem;
  font-weight:700; color:#e6edf7; white-space:nowrap;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.lang-pill:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }

.lang-pill .fi{ width:20px; height:14px; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.25) inset; }
.lang-label{ font-size:.95rem; }
.lang-caret{ width:18px; height:18px; opacity:.9; }

.lang-menu{
  position:absolute; right:0; top:calc(100% + .4rem);
  min-width: 220px; max-height: 60vh; overflow:auto;
  padding:.4rem; border-radius:.9rem;
  background: linear-gradient(180deg, rgba(20,26,40,.98), rgba(16,23,42,.96));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  display:none;
}
.lang-menu.open{ display:block; }

.lang-opt{
  display:flex; align-items:center; gap:.6rem; width:100%;
  padding:.5rem .55rem; border-radius:.6rem;
  color:#e5e7eb; font-weight:600; background:transparent; border:none; text-align:left; cursor:pointer;
}
.lang-opt .fi{ width:20px; height:14px; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.25) inset; }
.lang-opt:hover{ background:rgba(255,255,255,.08); }

/* tighter on small screens */
@media (max-width: 640px){
  .lang-label{ display:none; }         /* show only flag to save space */
  .lang-pill{ padding:0 .5rem; gap:.35rem; }
}

/* ---------- CTA (centered) — warmer amber background ---------- */
.cta-panel--center{
  position:relative;
  border-radius:1.25rem;
  padding:clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 3.5vw, 2.6rem);
  /* more golden warmth layered over your neutral panel */
  background:
    linear-gradient(180deg, rgba(255,198,62,.08), rgba(245,158,11,.06) 22%, rgba(0,0,0,.22) 100%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.22));
  border:1px solid rgba(255,200,90,.22);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  overflow:hidden;
}

/* stronger golden halo around the panel */
.cta-panel--center::before{
  content:""; position:absolute; inset:-10px; z-index:-1;
  border-radius:calc(1.25rem + 10px);
  box-shadow:
    0 0 0 1px rgba(245,158,11,.10),
    0 40px 120px -18px rgba(245,158,11,.38),
    0 14px 44px -18px rgba(245,158,11,.30);
}

/* amber vignettes inside the panel */
.cta-panel--center::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
  background:
    radial-gradient(700px 320px at 50% 0%,   rgba(245,158,11,.20), transparent 70%),
    radial-gradient(900px 520px at 50% 120%, rgba(245,158,11,.10), transparent 70%),
    radial-gradient(1000px 400px at 10% 50%, rgba(245,158,11,.08), transparent 65%);
}


.cta-icon{
  height:68px; width:68px; border-radius:1rem; display:grid; place-items:center;
  color:#0b1220;
  background: linear-gradient(135deg, var(--amber-1), var(--amber-2));
  border:1px solid rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 24px -10px rgba(245,158,11,.55);
  margin-bottom: .9rem;
}
.cta-icon svg{ width:28px; height:28px; }

.cta-title--center{ font-size:clamp(1.4rem, 2.2vw + .6rem, 2.1rem); font-weight:900; color:#fff; }
.cta-lead--center{
  color:#b8c3d6; margin-top:.35rem;
  font-size:clamp(.95rem, .6vw + .45rem, 1.05rem);
}

.cta-actions--center{ margin-top:1.1rem; display:flex; justify-content:center; }

/* slight pill look for the gold button (you already have .btn-cta) */
.btn-cta--pill{ border-radius:1rem; min-width:240px; padding:0 1.2rem; }

/* soft glow under the button, text stays crisp thanks to your ::before shrink trick */
.cta-btn-glow{ position:relative; }
.cta-btn-glow::after{
  content:""; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  width:80%; height:22px; border-radius:999px; pointer-events:none;
  background: radial-gradient(60% 100% at 50% 50%, rgba(245,158,11,.55), rgba(245,158,11,0) 70%);
  filter: blur(6px); opacity:.9;
}

/* ===== Summary tuning (clean, aligned, gold labels) ===== */
:root{
  /* push summary further down from dropdowns */
  --sum-top-gap: 1.95rem;

  /* keep right block under right input (swap btn 56px + calc gap 1.25rem) + extra nudge */
  --sum-mid-col: calc(56px + 1.25rem + 12px);

  /* indent left labels a bit so they don’t feel glued to the left input edge */
  --sum-left-indent: .55rem;

  /* spacing between label and value */
  --sum-label-gap: .55rem;

  /* colors */
  --sum-label-gold: #ffd772;    /* warm, readable gold */
  --sum-value-gray: #b8c4d9;    /* calmer than body text */
}

/* more air above the summary, no bg/border */
#calc-summary.sum-panel{
  margin-top: var(--sum-top-gap) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* grid still aligns L / spacer / R so each side sits under its input */
.sum-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sum-mid-col) minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: start;
}

/* tighter vertical rhythm but clearer separation between rows */
.sum-col{ display: grid; gap: .18rem; }
.sum-col--left{ grid-column: 1; padding-left: var(--sum-left-indent); }
.sum-spacer{ grid-column: 2; }
.sum-col--right{ grid-column: 3; }

/* each line: Label : Value (keep on one line on desktop) */
.sum-row{
  display: inline-flex;
  align-items: baseline;
  gap: var(--sum-label-gap);
  line-height: 1.16;
  padding: .14rem 0;
  white-space: nowrap;
}

/* labels: gold + crisp + a touch of glow for separation */
.sum-label{
  color: var(--sum-label-gold);
  font-weight: 550;              /* sharp like input numbers */
  font-size: .96rem;
  letter-spacing: 0;
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 0 8px rgba(245,158,11,.16);
}

/* values: smaller + lighter weight + calm gray */
.sum-val{
  color: var(--sum-value-gray);
  font-weight: 350;              /* less bold */
  font-size: .88rem;             /* a bit smaller */
  font-variant-numeric: tabular-nums;
}

/* single divider remains subtle */
.sum-hr{
  grid-column: 1 / -1;
  height: 1px;
  margin: .26rem 0 .32rem;
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
}

/* mobile: stack; allow wrapping so long labels stay readable */
@media (max-width: 768px){
  .sum-grid{ grid-template-columns: 1fr; }
  .sum-col--left, .sum-col--right{ grid-column: 1; padding-left: 0; }
  .sum-row{ white-space: normal; }
}

/* ===== Direction Info Card (under summary) ===== */
:root{
  --info-blue: #3b82f6;
  --info-blue-200: #bfdbfe;
  --info-blue-300: #93c5fd;
  --info-bg: rgba(59,130,246,.10);
  --info-bd: rgba(59,130,246,.35);
}

.info-card{
  margin-top: .9rem;
  padding: .9rem 1rem;
  border-radius: .9rem;
  background:
    linear-gradient(180deg, rgba(59,130,246,.08), rgba(15,23,42,.10));
  border: 1px solid var(--info-bd);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 50px -28px rgba(0,0,0,.55);
}
.info-row{ display:flex; align-items:center; gap:.6rem; margin-bottom:.45rem; }

.info-ic{
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  color: var(--info-blue);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.16));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -10px rgba(59,130,246,.55);
}
.info-ic svg{ width:18px; height:18px; display:block; }

.info-title{
  font-weight: 800;
  color: var(--info-blue-200);
  letter-spacing:.2px;
}

.info-text{
  color:#cfe1ff;
  line-height:1.45;
  margin:.15rem 0 .7rem;
  font-size:.95rem;
}

.info-cta{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.38rem .7rem; border-radius:.7rem;
  color: var(--info-blue-300);
  background: rgba(59,130,246,.12);
  border:1px solid var(--info-bd);
  font-weight:700; font-size:.92rem; text-decoration:none;
}
.info-cta:hover{ background: rgba(59,130,246,.16); }
.info-cta-ic{ font-size:1rem; line-height:1; }


/* ============ Header responsiveness: prevent overflow & collapse earlier ============ */

/* 1) Collapse the center nav earlier (~1100px) and show hamburger */
@media (max-width: 1100px){
  .nav-center{ display: none !important; }          /* hide middle links sooner */
  #mobile-open{ display: inline-flex !important; }  /* show burger even though it has md:hidden */
}

/* 2) Squeeze language first: show only flag (hide label + caret) to save space */
@media (max-width: 1260px){
  .lang-label, .lang-caret{ display: none !important; }
  .lang-pill{ padding: 0 .5rem; gap: .35rem; }      /* tighter pill when text is hidden */
}

/* 3) Then squeeze login: icon-only */
@media (max-width: 1200px){
  .btn-login span{ display: none !important; }      /* hide "Login" text */
  .btn-login{ padding: 0 .55rem; }                  /* compact padding for icon-only look */
}

/* 4) Tighten gaps a touch around that breakpoint so nothing clips the edge */
@media (max-width: 1100px){
  #nav-actions{ gap: .45rem; }
}

/* ---------- Gateway info notes (amber) ---------- */
.note-card{
  display: grid;
  gap: .45rem;
  padding: .85rem .95rem;
  border-radius: .9rem;
  border: 1px solid rgba(245,158,11,.28);
  background:
    linear-gradient(180deg, rgba(255,198,62,.10), rgba(245,158,11,.07));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 26px -18px rgba(245,158,11,.30);
}

.note-amber .note-title{ color:#ffe08a; font-weight:800; }
.note-head{ display:flex; align-items:center; gap:.55rem; }
.note-ic{
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:.5rem;
  background: linear-gradient(135deg, #ffd466, #f59e0b);
  color:#0b1220; font-weight:900; font-size:.9rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.note-body{ display:grid; gap:.25rem; }
.note-row{
  display:flex; align-items:baseline; gap:.5rem;
  line-height:1.2;
}
.note-label{
  color:#ffd772; font-weight:600; text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.note-val{ color:#b8c4d9; font-weight:400; font-variant-numeric: tabular-nums; }

/* ---------- Stepper (pill bar with arrow separators) ---------- */

.stepper-wrap{
  margin-bottom: 1.1rem;
}

/* Outer pill bar */
.stepper{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:0; /* no gaps; one continuous bar */
  border-radius:999px;
  overflow:hidden;
  background: linear-gradient(180deg, #020617, #020617); /* dark outline */
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 22px -12px rgba(0,0,0,.7);
}

/* Base segment */
.step-seg{
  --seg-bg: transparent;
  --seg-arrow: rgba(15,23,42,.9);

  position:relative;
  flex:1 1 0;
  padding:.45rem 1.6rem;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.01em;
  text-align:center;
  color:#cbd5e1;
  background: var(--seg-bg);
  line-height:1.3;
  white-space:nowrap;
}

/* Arrow wedge between steps */
.step-seg::after{
  content:"";
  position:absolute;
  top:0;
  right:-18px;
  width:18px;
  height:100%;
  background: inherit;          /* ⬅️ important: use segment bg */
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index:1;
}

/* no wedge on the last one */
.step-seg:last-child::after{
  display:none;
}

/* ===== Responsive stepper layout ===== */
@media (max-width: 768px){
  .stepper{
    display: grid;                           /* instead of single flex row */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns: 1–2 / 3–4 */
    gap: .35rem;                             /* space between pills */
    padding: .2rem .1rem;

    /* on mobile we don’t need one big rounded bar */
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }

  .step-seg{
    border-radius: 999px;                    /* each step is its own pill */
    padding: .45rem 1rem;
  }

  /* remove arrow wedges between segments on mobile */
  .step-seg::after{
    display: none;
  }
}

/* Extra small: stack steps 1 per row */
@media (max-width: 480px){
  .stepper{
    grid-template-columns: 1fr;              /* each step full-width row */
  }
}

/* STATES -------------------------------------------------- */

/* upcoming (future) */
.step-seg.is-upcoming{
  --seg-bg: linear-gradient(180deg, #1f2937, #111827);
  --seg-arrow: rgba(15,23,42,.95);
  color:#cbd5e1;
  opacity:.95;
}

/* current step */
.step-seg.is-active{
  --seg-bg: linear-gradient(135deg, rgba(237,170,0,1), rgba(237,165,43,1));
  --seg-arrow: rgba(0,0,0,.30);
  color:#111827;
  font-weight:700;
  text-shadow:
    0 1px 0 rgba(255,255,255,.65);
}

/* completed steps */
.step-seg.is-done{
  --seg-bg: linear-gradient(
    135deg,
    rgba(22,163,74,.28),  /* soft emerald, like your button */
    rgba(23,94,74,.90)    /* deeper teal base */
  );
  --seg-arrow: rgba(4,120,87,.95);
  color:#e8fff4;
  cursor:pointer;
}


.step-seg.is-done:hover{
  filter:brightness(1.06);
}

/* Small screens: slightly tighter */
@media (max-width: 480px){
  .step-seg{
    font-size:.7rem;
    padding:.4rem 1rem;
  }
}

/* ---------- Step action rows ---------- */

.step-actions{
  margin-top: 1.6rem;
  display:grid;
  gap:.6rem;
}

.step-actions.two-btns{
  grid-template-columns: 1fr 3fr;  /* left button 1/4, right button 3/4 */
}

/* Back button (ghost) */
.btn-ghost{
  height:44px;
  border-radius:.8rem;
  font-weight:800;
  padding:0 1.1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  color:#e5e7eb;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
}
.btn-ghost:hover{
  background: rgba(255,255,255,.10);
}

/* Main “Continue / Pay” amber button */
.btn-amber{
  height:44px;
  border-radius:.8rem;
  font-weight:800;
  padding:0 1.2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  color:#111827;
  border:1px solid rgba(0,0,0,.18);
  background: linear-gradient(135deg, var(--amber-1), var(--amber-2));
  box-shadow: 0 12px 26px -12px rgba(245,158,11,.45);
}
.btn-amber:hover{
  filter: brightness(1.03);
}

/* “Already Paid” green button (Step 4) */
.btn-paid{
  height:44px;
  border-radius:.8rem;
  font-weight:800;
  padding:0 1.1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  color:#ecfdf5;
  border:1px solid rgba(22,163,74,.7);
  background: rgba(22,163,74,.2);
  box-shadow: 0 12px 26px -12px rgba(34,197,94,.45);
}
.btn-paid:hover{
  filter: brightness(1.03);
}

/* ---------- Step 3: Review summary layout & consent ---------- */

.summary-bar.summary-review{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  padding:1rem 1.25rem 1.05rem;
  margin-bottom:1rem;
  border-radius:1.1rem;
  background:
    radial-gradient(140% 160% at 0% 0%, rgba(251,191,36,.16), transparent 46%),
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,1));
  border:1px solid rgba(148,163,184,.35);
  box-shadow:
    0 20px 40px -24px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(248,250,252,.03);
}

/* Header text above the sides */
.summary-head{
  text-align:left;
}

.summary-step-label{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#e5e7eb;
  margin-bottom:.1rem;
}

.summary-step-note{
  font-size:.78rem;
  color:#9ca3af;
}

/* MAIN: send / receive */
.summary-main{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.6rem;
}

.summary-side{
  flex:1 1 220px;
  min-width:0;
}

.summary-side.is-recv{
  text-align:left;
}

/* small pill heading */
.summary-pill{
  display:inline-flex;
  align-items:center;
  padding:.15rem .55rem;
  margin-bottom:.45rem;
  border-radius:999px;
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:rgba(15,23,42,.9);
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,.45);
}

.summary-pill.alt{
  background:rgba(251,191,36,.10);
  border-color:rgba(251,191,36,.8);
  color:#facc15;
}

/* row: logo + text */
.summary-row{
  display:flex;
  align-items:center;
  gap:.7rem;
}

/* circle behind the logo; approx same height as 2 lines of text */
.summary-icon-wrap{
  width:2.6rem;
  height:2.6rem;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(15,23,42,1),
    0 10px 24px -14px rgba(0,0,0,.9);
}

/* different background tones for send / receive */
.summary-side.is-send .summary-icon-wrap{
  background:#16a34a; /* USDT green */
}
.summary-side.is-recv .summary-icon-wrap{
  background:#020617; /* dark pill behind PayPal icon */
}

/* actual logos */
.summary-logo{
  display:block;
  width:1.8rem;
  height:1.8rem;
}

/* PayPal logo – brand-ish blue on dark background */
.summary-logo-paypal{
  filter:
    invert(26%)
    sepia(94%)
    saturate(2500%)
    hue-rotate(191deg)
    brightness(95%)
    contrast(98%);
}

/* If you ever need a white version, add class="summary-logo summary-logo-paypal logo-white" */
.summary-logo-paypal.logo-white{
  filter: invert(1) brightness(1.4);
}

/* amount + gateway */
.summary-text{
  display:flex;
  flex-direction:column;
  gap:.1rem;
}

.summary-num{
  font-size:1.12rem;
  font-weight:600;
  color:#e5e7eb;
}

.summary-asset{
  font-size:.82rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#9ca3af;
}

/* arrow between */
.summary-arrow.big-arrow{
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  line-height:1;
  color:#9ca3af;
  opacity:.65;
}

/* payout + email block at the end */
.summary-dests{
  padding-top:.65rem;
  border-top:1px dashed rgba(148,163,184,.45);
  font-size:.8rem;
}

.dest-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.55rem;
  margin-bottom:.2rem;
}

.dest-label{
  color:#94a3b8;
}

.dest-value{
  color:#e5e7eb;
  font-weight:500;
  word-break:break-all;
}

/* helper note under card */
.summary-note{
  margin-top:.1rem;
  font-size:.78rem;
  line-height:1.6;
  color:#9ca3af;
}

/* consent / “I agree” block */
.summary-consent{
  margin-top:.75rem;
  padding:.7rem .9rem;
  border-radius:.8rem;
  background:rgba(15,23,42,.95);
  border:1px solid rgba(148,163,184,.45);
}

.chk-agree{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  font-size:.8rem;
  line-height:1.6;
  color:#e5e7eb;
}

.chk-input{
  margin-top:.15rem;
  width:.9rem;
  height:.9rem;
  accent-color: var(--amber-2); /* modern browsers */
}

.chk-text{
  flex:1;
}

.summary-consent a{
  color:var(--amber-1);
  text-decoration:underline;
  text-underline-offset:2px;
}

.summary-consent a:hover{
  color:var(--amber-2);
}

/* Mobile tweaks */
@media (max-width: 640px){
  .summary-main{
    flex-direction:column;
    gap:1.1rem;
  }
  .summary-arrow.big-arrow{
    display:none;
  }
  .dest-row{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ---------- Step 4: Invoice / final page ---------- */

.inv-status-wrap{
  display:inline-flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-bottom:.85rem;
}

.inv-status-pill{
  border-radius:999px;
  padding:.15rem .7rem;
  border:1px solid rgba(148,163,184,.35);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:rgba(15,23,42,.96);
  color:#cbd5e1;
}

.inv-status-pill.is-active{
  background:rgba(251,191,36,.15);
  border-color:var(--amber-1);
  color:#facc15;
}

/* Invoice cards */

.inv-card{
  border-radius:1rem;
  padding:1rem 1.15rem;
  margin-bottom:.9rem;
  background:
    radial-gradient(130% 140% at 0% 0%, rgba(251,191,36,.12), transparent 50%),
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,1));
  border:1px solid rgba(148,163,184,.35);
  box-shadow:
    0 18px 40px -22px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(248,250,252,.03);
}

.inv-card-head{
  margin-bottom:.75rem;
}

.inv-card-head.small-gap{
  margin-bottom:.35rem;
}

.inv-card-title{
  font-size:.9rem;
  font-weight:600;
  color:#e5e7eb;
}

.inv-card-sub{
  margin-top:.15rem;
  font-size:.78rem;
  color:#9ca3af;
}

/* Main exchange summary (top row) */

.inv-main-top{
  display:flex;
  align-items:center;
  gap:1.5rem;
  margin-bottom:.7rem;
}

.inv-main-side{
  flex:1 1 0;
}

.inv-label{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#94a3b8;
  margin-bottom:.25rem;
}

.inv-amt-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.4rem;
}

.inv-amt-num{
  font-size:1.25rem;
  font-weight:600;
  color:#e5e7eb;
}

.inv-amt-asset{
  font-size:.8rem;
  color:#9ca3af;
}

.chip-asset{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.1rem .5rem;
  border-radius:999px;
  background:rgba(15,23,42,.85);
  border:1px solid rgba(148,163,184,.5);
}

.asset-icon{
  width:1.2rem;
  height:1.2rem;
  border-radius:999px;
  background:radial-gradient(circle at 30% 20%, #34d399, #047857);
  display:inline-block;
}

.asset-icon.asset-paypal{
  background:radial-gradient(circle at 30% 20%, #60a5fa, #1d4ed8);
}

.inv-main-arrow{
  font-size:1.5rem;
  color:#9ca3af;
  opacity:.7;
}

.inv-side-sub{
  margin-top:.25rem;
  font-size:.78rem;
  color:#9ca3af;
}

/* Old detailed totals – visually hidden to keep card clean */
.inv-main-break,
.inv-main-totals{
  display:none;
}

/* Combined “order info” grid (contact + destination) */

.inv-main-info{
  margin-top:.65rem;
  padding-top:.7rem;
  border-top:1px dashed rgba(148,163,184,.45);
}

.inv-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.75rem 1.2rem;
}

.inv-field{
  font-size:.8rem;
  color:#cbd5e1;
}

.inv-field.full{
  grid-column:1 / -1;
}

.inv-field-label{
  font-size:.75rem;
  color:#94a3b8;
  margin-bottom:.2rem;
}

.inv-field-row{
  display:flex;
  align-items:stretch;
  gap:.45rem;
}

.inv-field-input{
  flex:1 1 auto;
  border-radius:.55rem;
  border:1px solid rgba(148,163,184,.6);
  background:rgba(15,23,42,.95);
  padding:.45rem .65rem;
  font-size:.8rem;
  color:#e5e7eb;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.inv-field-input:focus{
  outline:none;
  border-color:var(--amber-2);
  box-shadow:0 0 0 1px rgba(251,191,36,.45);
}

.inv-field-static{
  padding:.35rem 0;
  font-size:.8rem;
  color:#e5e7eb;
}

.inv-field-hint{
  margin-top:.22rem;
  font-size:.74rem;
  color:#64748b;
}

.btn-copy{
  border-radius:.55rem;
  border:1px solid rgba(148,163,184,.7);
  background:rgba(15,23,42,.95);
  padding:.35rem .7rem;
  font-size:.75rem;
  font-weight:500;
  color:#e5e7eb;
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
}

.btn-copy.small{
  padding:.3rem .6rem;
  font-size:.72rem;
}

.btn-copy:hover{
  background:rgba(30,64,175,.9);
  border-color:rgba(191,219,254,.8);
}

/* Main footer row (timer + meta + tracking) */

.inv-main-footer{
  margin-top:.8rem;
  padding-top:.65rem;
  border-top:1px dashed rgba(148,163,184,.45);
  font-size:.78rem;
  color:#9ca3af;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}

.inv-footer-top{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1.4rem;
  align-items:center;
}

.inv-timer{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}

.inv-timer-icon{
  font-size:.9rem;
}

.inv-timer-value{
  font-weight:600;
  color:#e5e7eb;
}

.inv-meta{
  display:inline-flex;
  flex-wrap:wrap;
  gap:.35rem .75rem;
}

.inv-meta strong{
  color:#e5e7eb;
}

.inv-meta-sep{
  opacity:.5;
}

/* tracking in footer */

.inv-footer-track{
  align-self:flex-end;
  text-align:right;
  max-width:420px;
}

.inv-track-label{
  font-size:.75rem;
  color:#94a3b8;
}

.inv-track-row{
  margin-top:.15rem;
  display:flex;
  justify-content:flex-end;
  align-items:stretch;
  gap:.35rem;
}

.inv-track-input{
  width:14rem;
  border-radius:.55rem;
  border:1px solid rgba(148,163,184,.6);
  background:rgba(15,23,42,.95);
  padding:.35rem .6rem;
  font-size:.78rem;
  color:#e5e7eb;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.inv-track-input:focus{
  outline:none;
  border-color:var(--amber-2);
  box-shadow:0 0 0 1px rgba(251,191,36,.45);
}

.inv-track-hint{
  margin-top:.18rem;
  font-size:.72rem;
  color:#64748b;
}

/* Status tag (still used in other states if needed) */

.inv-status-tag{
  display:inline-flex;
  align-items:center;
  padding:.2rem .6rem;
  border-radius:999px;
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.status-unpaid{
  background:rgba(248,250,252,.03);
  border:1px solid rgba(250,204,21,.6);
  color:#facc15;
}

/* Deposit card */

.inv-deposit-body{
  display:flex;
  align-items:flex-start;
  gap:1.5rem;
  flex-wrap:wrap;
}

.inv-deposit-main{
  flex:3 1 220px;
}

.inv-deposit-qr{
  flex:1 1 140px;
  text-align:center;
}

.inv-pay-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:.7rem;
}

.inv-pay-label{
  font-size:.75rem;
  color:#94a3b8;
}

.inv-pay-amount{
  display:flex;
  gap:.4rem;
  align-items:baseline;
}

.inv-pay-num{
  font-size:1.1rem;
  font-weight:600;
  color:#e5e7eb;
}

.inv-pay-asset{
  font-size:.8rem;
  color:#9ca3af;
}

.inv-field-group{
  margin-bottom:.55rem;
}

.inv-deposit-note{
  margin-top:.35rem;
  font-size:.78rem;
  line-height:1.7;
  color:#9ca3af;
}

.qr-placeholder{
  width:130px;
  max-width:100%;
  aspect-ratio:1/1;
  margin:0 auto .4rem;
  border-radius:.6rem;
  background:
    repeating-linear-gradient(45deg, #020617, #020617 4px, #0f172a 4px, #0f172a 8px);
  border:1px solid rgba(148,163,184,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  color:#64748b;
}

.qr-caption{
  font-size:.74rem;
  color:#9ca3af;
}

/* Help / info */

.inv-help-text{
  font-size:.8rem;
  color:#9ca3af;
  margin-bottom:.4rem;
}

.inv-help-list{
  margin:0;
  padding-left:1.1rem;
  font-size:.78rem;
  color:#94a3b8;
}

.inv-help-list li + li{
  margin-top:.15rem;
}

/* Responsive */

@media (max-width:768px){
  .inv-main-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .inv-main-arrow{
    display:none;
  }
  .inv-grid{
    grid-template-columns:1fr;
  }
  .inv-deposit-body{
    flex-direction:column;
  }
  .inv-main-footer{
    gap:.65rem;
  }
  .inv-footer-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .inv-footer-track{
    align-self:stretch;
    text-align:left;
  }
  .inv-track-row{
    justify-content:flex-start;
  }
  .inv-track-input{
    width:100%;
  }
}

/* ---------- Top row: Exchange / Track toggle + stepper ---------- */

.calc-top-row{
  display:flex;
  flex-direction:column;      /* button on top, stepper below */
  align-items:flex-start;
  gap:.45rem;
  margin-bottom:1.1rem;
}

/* stepper fills width under the toggle */
.stepper-wrap{
  width:100%;
  flex:0 0 auto;
  margin-bottom:0;
}

/* Text-style toggle button */

.btn-mode{
  border:1px solid transparent;
  background:transparent;
  padding:.25rem .75rem .25rem .6rem;
  border-radius:999px;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.12rem;
  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .05s ease,
    filter .15s ease;
}

.btn-mode-main{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.btn-mode-ic{
  width:18px;
  height:18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.74rem;
  line-height:1;
  border:1px solid transparent;
  background:rgba(15,23,42,.9);
  box-shadow:0 0 0 1px rgba(15,23,42,.95);
}

.btn-mode-sub{
  font-size:.72rem;
  color:#64748b;
}

/* subtle hover so it looks clearly clickable but not like a huge CTA */
.btn-mode:hover{
  background:rgba(15,23,42,.9);
  border-color:rgba(148,163,184,.45);
  box-shadow:0 10px 24px -18px rgba(0,0,0,.9);
}

.btn-mode:active{
  transform:translateY(1px);
  box-shadow:0 6px 14px -12px rgba(0,0,0,.7);
}

/* Default: we are on EXCHANGE, so button invites "Track order" (green) */
.btn-mode-track .btn-mode-main{
  color:#4ade80;
}

.btn-mode-track .btn-mode-ic{
  border-color:rgba(34,197,94,.65);
  background:rgba(22,163,74,.18);
}

/* When we switch to TRACK mode, button becomes "Exchange" (amber) */
.btn-mode-exchange .btn-mode-main{
  color:var(--amber-1);
}

.btn-mode-exchange .btn-mode-ic{
  border-color:rgba(250,204,21,.8);
  background:rgba(250,204,21,.14);
}

/* Slightly stronger hover tint per state */
.btn-mode-track:hover .btn-mode-main{
  color:#86efac;
}

.btn-mode-exchange:hover .btn-mode-main{
  color:var(--amber-2);
}

/* Small-screen tweak: keep things tight */
@media (max-width:640px){
  .btn-mode{
    padding:.25rem .6rem;
  }
  .btn-mode-main{
    font-size:.75rem;
  }
  .btn-mode-sub{
    font-size:.7rem;
  }
}