/* ============================================================
   FXGlobal - Main stylesheet
   Design language: globalgle.com — pure black, neon green,
   glass cards, 3D floating elements, scroll reveal.
   ============================================================ */

:root {
  --bg: #000000;
  --bg-soft: #060606;
  --bg-card: #0a0a0a;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.55);
  --muted-2: rgba(255, 255, 255, 0.35);
  --green: #00e06b;
  --green-dim: #00c05a;
  --green-soft: rgba(0, 224, 107, 0.12);
  --red: #ff4d5c;
  --radius: 20px;
  --radius-sm: 12px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

::selection { background: var(--green); color: #000; }

/* ------------------------------------------------------------
   Scroll reveal: starts blurred+hidden, JS clears it
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  filter: blur(18px);
  transform: translateY(34px);
  transition:
    opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 1s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, filter, transform;
}
.reveal.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ------------------------------------------------------------
   Typography
   ------------------------------------------------------------ */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
}
.pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pillPulse 2s ease-in-out infinite;
}
@keyframes pillPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.headline {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.section-head {
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

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

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

/* Typewriter heading caret */
.type-words { display: inline-block; }
.type-words .caret {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  margin-left: 4px;
  background: var(--green);
  vertical-align: -0.1em;
  animation: caretBlink 0.9s steps(2) infinite;
}
@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  font-family: inherit;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--green);
  color: #000;
}
.btn-primary:hover {
  background: var(--green-dim);
  box-shadow: 0 0 24px rgba(0, 224, 107, 0.35);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }

.btn-danger { background: var(--red); color: #fff; }

.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; border-radius: 10px; }

.btn-lg { height: 54px; padding: 0 34px; font-size: 16px; }

/* ------------------------------------------------------------
   Navbar
   ------------------------------------------------------------ */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.navbar .brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
}
.navbar .brand .logo-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--green), #008f45);
  display: flex; align-items: center; justify-content: center;
  color: #000; font-weight: 900; font-size: 15px;
  box-shadow: 0 0 18px rgba(0, 224, 107, 0.35);
}
.navbar .nav-links { display: flex; align-items: center; gap: 8px; }
.navbar .nav-links a {
  padding: 8px 14px; border-radius: 10px;
  font-size: 14px; color: var(--muted); font-weight: 500;
  transition: color 0.2s ease, background 0.2s ease;
}
.navbar .nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.navbar .nav-cta { display: flex; gap: 10px; align-items: center; }

@media (max-width: 720px) {
  .navbar { padding: 0 18px; }
  .navbar .nav-links { display: none; }
  .hero { padding: 100px 6vw 44px; min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-visual { height: 380px; }
  .carousel-wrap { height: auto; }
  .phone-carousel { height: 620px; }
  .phone-frame { width: 300px; height: 460px; }
  .stack-stage { min-height: 400px; }
  .scene { height: 300px; }
}
@media (max-width: 480px) {
  .phone-frame { width: 272px; height: 428px; }
  .phone-carousel { height: 600px; }
  .carousel-dots { bottom: 0; }
  .stack-stage { min-height: 460px; }
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 8vw 60px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  width: 100%;
}
.hero .kicker { margin-bottom: 20px; }
.hero h1 { margin-bottom: 18px; }
.hero .sub {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 34px;
}
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-visual {
  position: relative;
  height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-mascot {
  width: min(460px, 80%);
  filter: drop-shadow(0 30px 60px rgba(0, 224, 107, 0.15));
  animation: mascotFloat 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes mascotFloat {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-18px) rotate(1.2deg); }
}

/* Staggered card reveals — each card inside a grid rises with its own delay */
.service-card.reveal,
.quote-card.reveal {
  transition-delay: var(--stagger, 0ms);
}

/* Floating 3D icons */
.float3d {
  position: absolute;
  pointer-events: none;
  will-change: transform, filter;
  transition: filter 0.8s ease;
  filter: blur(0);
}
.float3d img { display: block; }

/* ------------------------------------------------------------
   Floating-3D scene container (parallax handled by JS)
   ------------------------------------------------------------ */
.scene {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 420px;
}

/* ------------------------------------------------------------
   Dashboard carousel — auto-rotating phone mockups (globalgle pattern)
   ------------------------------------------------------------ */
.carousel-wrap { max-width: 980px; margin: 56px auto 0; position: relative; height: 700px; }

.phone-carousel { position: relative; height: 640px; }

.carousel-slide {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  filter: blur(14px);
  transform: scale(0.92) translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.carousel-slide .carousel-caption { opacity: 0; }
.carousel-slide.active .carousel-caption { opacity: 1; }
.carousel-slide.active {
  opacity: 1;
  filter: blur(0);
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.phone-frame {
  width: 330px;
  height: 500px;
  border-radius: 42px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(160deg, #111, #070707);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.7),
    0 0 0 8px #0a0a0a,
    0 0 60px rgba(0, 224, 107, 0.08);
  overflow: hidden;
  position: relative;
}
.phone-notch {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 22px;
  border-radius: 999px;
  background: #050505;
  z-index: 5;
}
.phone-body {
  padding: 44px 20px 14px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mock-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.mock-logo {
  font-size: 15px; font-weight: 800; letter-spacing: -0.02em;
  background: var(--green); color: #000;
  padding: 5px 10px; border-radius: 9px;
}
.mock-balance {
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--green);
}
.mock-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.mock-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 11px 12px;
}
.mock-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.mock-value { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mock-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
}
.mock-row-name { font-weight: 700; }
.mock-row-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
.mock-row-left { display: flex; align-items: center; gap: 9px; }
.mock-row-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--green);
  box-shadow: 0 0 8px rgba(0, 224, 107, 0.6);
}
.mock-row-right.pos .mock-row-dot { background: var(--green); }

/* Polished mock header — avatar, name, notification bell */
.mock-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mock-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--green), #008f45);
  color: #000;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 224, 107, 0.35);
}
.mock-header-name { font-size: 13px; font-weight: 700; }
.mock-header-sub { font-size: 10px; color: var(--muted); }
.mock-bell {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  margin-left: auto;
  box-shadow: 0 0 10px rgba(0, 224, 107, 0.8);
}

/* Balance card with sparkline + action chips */
.mock-balance-card {
  background: linear-gradient(160deg, rgba(0,224,107,0.12), rgba(0,224,107,0.03));
  border: 1px solid rgba(0,224,107,0.28);
  border-radius: 18px;
  padding: 12px 14px 10px;
  margin-bottom: 12px;
}
.mock-balance-top { display: flex; justify-content: space-between; align-items: center; }
.mock-balance-label { font-size: 10px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.08em; }
.mock-balance-pct { font-size: 10px; font-weight: 700; color: var(--green); }
.mock-balance-amount { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.mock-spark { display: block; width: 100%; height: 40px; margin-top: 6px; }
.mock-actions { display: flex; gap: 7px; margin-top: 8px; }
.mock-action {
  flex: 1; text-align: center;
  font-size: 10px; font-weight: 700;
  padding: 6px 0;
  border-radius: 9px;
  background: var(--green);
  color: #000;
}
.mock-row-right { font-weight: 700; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.75); }
.mock-row-right.pos { color: var(--green); }

/* ---------- Upgraded mock: status bar, glow card, asset rows, tab nav ---------- */
.mock-status {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.55);
  margin: -6px 4px 14px;
}
.mock-status-icons i.m-bar {
  display: inline-block; width: 4px; height: 8px; border-radius: 2px;
  background: rgba(255,255,255,0.5); margin-right: 2px;
  transform: translateY(2px);
}
.mock-balance-card-glow {
  background: linear-gradient(165deg, rgba(0,224,107,0.18), rgba(0,224,107,0.05) 60%, rgba(0,0,0,0.25));
  border: 1px solid rgba(0,224,107,0.4);
  box-shadow:
    0 0 32px rgba(0, 224, 107, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.mock-balance-card-glow::before {
  content: ""; position: absolute; top: -40%; right: -30%;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,224,107,0.35), rgba(0,224,107,0) 65%);
  pointer-events: none;
}
.mock-section-label {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin: 4px 2px 8px;
}
.mock-row-tall { padding: 11px 12px; }
.mock-avatar-sm {
  width: 30px; height: 30px; border-radius: 10px; flex: 0 0 auto;
  color: #000; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
.mock-sub-amt { font-size: 10px; color: var(--muted); font-weight: 600; }
.mock-progress {
  width: 92px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.08); margin-top: 5px; overflow: hidden;
}
.mock-progress i { display: block; height: 100%; border-radius: 999px; }
.mock-tabnav {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
  background: rgba(0,0,0,0.45); border: 1px solid var(--border);
  border-radius: 14px; padding: 3px;
  margin-top: 12px;
}
.m-tab {
  text-align: center; font-size: 10.5px; font-weight: 700;
  color: var(--muted); padding: 6px 0; border-radius: 10px;
  cursor: default;
}
.m-tab.active { background: var(--green); color: #000; }
.mock-bell { margin-left: auto; }

.carousel-caption {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  margin-top: 0;
  max-width: 520px;
  text-align: center;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 0;
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  z-index: 4;
}
.carousel-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(0,224,107,0.4);
  background: transparent;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.carousel-dots button.active {
  background: var(--green);
  transform: scale(1.35);
}

/* Word-cycle caret (for "Go beyond X|") */
.carousel-word + .caret {
  display: inline-block;
  width: 3px; height: 0.85em;
  margin-left: 4px;
  background: var(--green);
  vertical-align: -0.1em;
  animation: caretBlink 0.9s steps(2) infinite;
}

/* ------------------------------------------------------------
   Sections
   ------------------------------------------------------------ */
section.block {
  position: relative;
  padding: 120px 8vw;
}
.block .eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 700;
  margin-bottom: 14px;
}
.block p.lead { color: var(--muted); max-width: 640px; margin-top: 16px; }

.section-title { margin-bottom: 14px; }

/* ------------------------------------------------------------
   Service cards (homepage grid)
   ------------------------------------------------------------ */
/* Shared service-card base (used by other sections too) */
.service-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1),
              border-color 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden;
}
.service-card:hover { border-color: rgba(0,224,107,0.35); }

/* ------------------------------------------------------------
   Stacked card deck (homepage services carousel)
   Cards sit on top of each other; the top card rises up, slides
   under the deck, and the next card rises in its place — looping.
   ------------------------------------------------------------ */
.stack-deck { position: relative; margin-top: 48px; }
.stack-stage {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  min-height: 380px;
}
.stack-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(100%, 620px);
  transform: translateX(-50%);
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 34px 32px;
  display: flex;
  align-items: flex-start;
  gap: 26px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  opacity: 1;
  pointer-events: auto;
  transition: transform 0.62s cubic-bezier(0.32, 0.9, 0.2, 1),
              opacity 0.38s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              filter 0.38s ease;
  will-change: transform, opacity;
}
/* Fail-safe visibility for the stacked deck:
   - Without JS (no html.js): the first card is visible by default
     (natural stacking, no classes needed).
   - JS loaded (html.js) but deck script NOT yet run: keep the first
     card visible so visitors never see a dark empty space.
   - Once the deck script runs (html.js.js-ready): cards are hidden
     and controlled entirely by .top / .under / .stack classes.
*/
html.js.js-ready .stack-card { opacity: 0; pointer-events: none; }
/* While JS is present but the deck hasn't initialized yet, show ONLY
   the first card (others would just pile on top of each other) */
html.js:not(.js-ready) .stack-card:not(:first-child) { opacity: 0; pointer-events: none; }
html.js .stack-card.top {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  z-index: 3;
}
html.js .stack-card.under {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(90px) scale(0.92) rotate(-1.5deg);
  z-index: 1;
}
html.js .stack-card.stack { opacity: 0.92; pointer-events: auto; z-index: 2; }
.stack-card .tag {
  position: absolute;
  top: 18px; right: 18px;
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid rgba(0,224,107,0.25);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stack-icon {
  width: 88px; height: 88px; flex: 0 0 auto;
  border-radius: 20px;
  object-fit: contain;
  /* subtle continuous float handled by JS */
  filter: drop-shadow(0 18px 26px rgba(0,0,0,0.55));
  transform: rotate(-4deg);
  transition: transform 0.6s cubic-bezier(0.32,0.9,0.2,1);
}
.stack-card.top .stack-icon { animation: iconFloat3d 4.5s ease-in-out infinite; }
/* every service icon in the deck also animates (slower drift when not on top) */
.stack-card:not(.top):not(.under) .stack-icon { animation: iconFloat3d 6.5s ease-in-out infinite; }
@keyframes iconFloat3d {
  0%   { transform: rotate(-4deg)  translateY(0)    rotateX(0deg) rotateY(0deg); }
  25%  { transform: rotate(2deg)   translateY(-10px) rotateX(14deg) rotateY(18deg); }
  50%  { transform: rotate(-2deg)  translateY(-4px)  rotateX(0deg)  rotateY(36deg); }
  75%  { transform: rotate(3deg)   translateY(-12px) rotateX(-14deg) rotateY(18deg); }
  100% { transform: rotate(-4deg)  translateY(0)    rotateX(0deg)  rotateY(0deg); }
}
/* true 3D rendering context for the icons */
.stack-stage { perspective: 900px; }
.stack-icon { transform-style: preserve-3d; }
.stack-body { min-width: 0; }
.stack-body h3 { font-size: 24px; margin-bottom: 10px; letter-spacing: -0.01em; }
.stack-body p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.stack-hint {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px;
  font-size: 13px; font-weight: 600;
  color: var(--green);
  opacity: 0.85;
}
.stack-hint .arrow { transition: transform 0.3s ease; }
.stack-card.top .stack-hint .arrow { animation: arrowNudge 1.6s ease-in-out infinite; }
@keyframes arrowNudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} }

/* Deck states --------------------------------------------------
   top   : front card — full size, opaque, slightly lifted
   under : leaving card — slides down & back into the stack
   stack : waiting cards — shrunk, blurred, layered behind
   ------------------------------------------------------------ */
.stack-card.top {
  border-color: rgba(0,224,107,0.32);
  box-shadow: 0 30px 80px rgba(0,0,0,0.65), 0 0 44px rgba(0,224,107,0.10);
  filter: blur(0);
  z-index: 3;
}
.stack-card.under {
  transform: translateX(-50%) translateY(90px) scale(0.92) rotate(-1.5deg);
  filter: blur(8px);
  z-index: 1;
}
.stack-card.stack { z-index: 2; }
.stack-card.stack[data-level="1"] {
  transform: translateX(-50%) translateY(18px) scale(0.96);
  filter: blur(2.5px) brightness(0.86);
  z-index: 2;
}
.stack-card.stack[data-level="2"] {
  transform: translateX(-50%) translateY(36px) scale(0.92);
  filter: blur(5px) brightness(0.72);
  z-index: 1;
}
.stack-card.stack[data-level="3"],
.stack-card.stack[data-level="4"],
.stack-card.stack[data-level="5"] {
  transform: translateX(-50%) translateY(54px) scale(0.88);
  filter: blur(7px) brightness(0.58);
  z-index: 0;
}
/* hover on top card only */
.stack-card.top:hover { border-color: rgba(0,224,107,0.5); }
.stack-card.top:hover .stack-icon { transform: rotate(4deg) translateY(-6px) scale(1.06); }

/* "…and many more" closing card */
.stack-card.stack-more {
  background: linear-gradient(160deg, rgba(0,224,107,0.06), rgba(0,224,107,0.015));
  border: 1.5px dashed rgba(0,224,107,0.35);
}
.stack-card.stack-more .stack-icon { animation: iconSpin 10s linear infinite !important; }
.stack-card .stack-icon { filter: drop-shadow(0 18px 26px rgba(0,0,0,0.55)) drop-shadow(0 0 14px rgba(0,224,107,0.28)); }
@keyframes iconSpin {
  0%   { transform: rotate(-4deg) translateY(0) rotateY(0deg); }
  50%  { transform: rotate(2deg) translateY(-10px) rotateY(180deg); }
  100% { transform: rotate(-4deg) translateY(0) rotateY(360deg); }
}

.stack-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 24px;
}
.stack-dots button {
  width: 9px; height: 9px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  background: rgba(255,255,255,0.18);
  transition: background 0.3s ease, transform 0.3s ease;
}
.stack-dots button.active { background: var(--green); transform: scale(1.3); }
.stack-dots button:hover { background: rgba(255,255,255,0.4); }

@media (max-width: 640px) {
  .stack-card { padding: 26px 22px; gap: 18px; }
  .stack-icon { width: 66px; height: 66px; }
  .stack-body h3 { font-size: 20px; }
  .stack-stage { min-height: 340px; }
}

/* ------------------------------------------------------------
   Stats strip
   ------------------------------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  margin-top: 56px;
}
.stat { text-align: center; }
.stat .num {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat .num .plus { color: var(--green); }
.stat .label { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* ------------------------------------------------------------
   Testimonials
   ------------------------------------------------------------ */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 48px;
}
.quote-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
}
.quote-card .stars { color: var(--green); font-size: 14px; margin-bottom: 14px; letter-spacing: 2px; }
.quote-card .quote { font-size: 15px; color: rgba(255,255,255,0.85); margin-bottom: 20px; }
.quote-card .who { display: flex; align-items: center; gap: 12px; }
.quote-card .avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #008f45);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #000; font-size: 15px;
}
.quote-card .who strong { font-size: 14px; display: block; }
.quote-card .who span { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.faq-list { margin-top: 48px; max-width: 860px; }
.faq-item {
  border-top: 1px solid var(--border);
}
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  padding: 22px 40px 22px 4px;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}
.faq-q:hover { color: var(--green); }
.faq-q .toggle {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: transform 0.3s ease, color 0.2s ease;
}
.faq-item.open .faq-q .toggle { transform: translateY(-50%) rotate(45deg); color: var(--green); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 15px;
  transition: max-height 0.4s cubic-bezier(0.2,0.7,0.2,1), padding 0.3s ease;
}
.faq-item.open .faq-a { max-height: 300px; padding-bottom: 24px; }

/* ------------------------------------------------------------
   CTA banner
   ------------------------------------------------------------ */
.cta-banner {
  margin: 60px 8vw;
  padding: 70px 50px;
  border-radius: 28px;
  background:
    radial-gradient(600px 300px at 85% 20%, rgba(0,224,107,0.16), transparent 60%),
    radial-gradient(500px 280px at 15% 90%, rgba(0,143,69,0.14), transparent 60%),
    #050505;
  border: 1px solid var(--border-strong);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 14px; letter-spacing: -0.03em; }
.cta-banner p { color: var(--muted); margin-bottom: 30px; }
.cta-banner .cta-row { justify-content: center; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 60px 8vw 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}
.footer-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 16px; }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a { color: rgba(255,255,255,0.8); font-size: 14px; transition: color 0.2s ease; }
.footer-grid a:hover { color: var(--green); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted-2);
  font-size: 13px;
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Auth pages (login / signup)
   ============================================================ */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-visual {
  position: relative;
  background:
    radial-gradient(500px 400px at 70% 30%, rgba(0,224,107,0.10), transparent 60%),
    #030303;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.auth-visual img.mascot {
  width: min(420px, 70%);
  animation: mascotFloat 6s ease-in-out infinite;
}
.auth-form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 48px;
}
.auth-form {
  width: 100%;
  max-width: 420px;
}
.auth-form .back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 28px;
  transition: color 0.2s ease;
}
.auth-form .back-link:hover { color: var(--green); }
.auth-form h1 { font-size: 30px; letter-spacing: -0.03em; margin-bottom: 8px; }
.auth-form .sub { color: var(--muted); font-size: 14px; margin-bottom: 30px; }

.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.85);
}
.form-control {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}
.form-control:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,224,107,0.15);
}
.form-control::placeholder { color: var(--muted-2); }
textarea.form-control { height: auto; padding: 14px 16px; resize: vertical; min-height: 110px; }

.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert-error {
  background: rgba(255,77,92,0.10);
  border: 1px solid rgba(255,77,92,0.3);
  color: #ff8a94;
}
.alert-success {
  background: var(--green-soft);
  border: 1px solid rgba(0,224,107,0.3);
  color: var(--green);
}

.auth-switch {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  margin-top: 22px;
}
.auth-switch a { color: var(--green); font-weight: 600; }

@media (max-width: 900px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
}

/* ============================================================
   Dashboard & Admin shared shell
   ============================================================ */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: 264px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: #040404;
  border-right: 1px solid var(--border);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app-sidebar .side-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 800;
  padding: 4px 10px 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.side-section {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
  padding: 16px 12px 6px;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}
.side-link:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.side-link.active {
  background: var(--green-soft);
  color: var(--green);
  font-weight: 600;
}
.side-link .ic { font-size: 16px; width: 20px; text-align: center; }
.side-user {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.side-user .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #008f45);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #000; font-size: 13px;
}
.side-user .name { font-weight: 600; display: block; }
.side-user .role { color: var(--muted-2); font-size: 11px; text-transform: capitalize; }

.app-main {
  flex: 1;
  padding: 0 0 60px;
  max-width: 100%;
  overflow-x: hidden;
}
.dash-content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 34px 20px;
  flex-wrap: wrap;
  gap: 16px;
}
.dash-inner {
  padding: 0 34px;
}
.app-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  gap: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 18px;
}
.app-topbar h1 {
  font-size: 26px;
  letter-spacing: -0.02em;
}
.app-topbar p { color: var(--muted); font-size: 13.5px; }

.top-search-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  max-width: 480px;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  flex: 1;
}
.search-box .ic {
  font-size: 13px;
  opacity: 0.5;
}
.search-box input {
  border: none;
  background: none;
  outline: none;
  color: var(--text);
  font-size: 13.5px;
  width: 100%;
  font-family: inherit;
}
.search-box input::placeholder { color: var(--muted); }

.top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.top-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
}
.top-btn:hover {
  border-color: rgba(0,224,107,0.4);
  background: rgba(0,224,107,0.06);
}
.top-btn .ic { font-size: 14px; }

.top-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
}

.top-wallet {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.top-wallet .label {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.top-wallet .value {
  font-size: 16px;
  font-weight: 800;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.user-menu-trigger:hover {
  border-color: rgba(0,224,107,0.4);
}
.user-menu-trigger .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #00803c);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-menu-trigger .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.dash-h1 {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.dash-sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}
.dash-h-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mobile-menu-btn { display: none; }
.sidebar-toggle { display: inline-flex; }
.app-sidebar.collapsed { width: 78px; padding-left: 10px; padding-right: 10px; }
.app-sidebar.collapsed .side-brand { justify-content: center; padding-left: 0; padding-right: 0; }
.app-sidebar.collapsed .side-brand > span:last-child,
.app-sidebar.collapsed .side-section,
.app-sidebar.collapsed .side-user > div:nth-child(2) { display: none; }
.app-sidebar.collapsed .side-link { justify-content: center; padding-left: 8px; padding-right: 8px; font-size: 0; }
.app-sidebar.collapsed .side-link .ic { font-size: 16px; }
.app-sidebar.collapsed .side-user { justify-content: center; }

@media (max-width: 900px) {
  .app-sidebar {
    position: fixed;
    z-index: 120;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .app-sidebar.open { transform: translateX(0); }
  .mobile-menu-btn { display: inline-flex; }
  .sidebar-toggle { display: inline-flex; }
  .app-sidebar.collapsed { width: 264px; padding: 22px 16px; }
  .app-sidebar.collapsed .side-brand { justify-content: flex-start; padding-left: 10px; padding-right: 10px; }
  .app-sidebar.collapsed .side-brand > span:last-child,
  .app-sidebar.collapsed .side-section,
  .app-sidebar.collapsed .side-user > div:nth-child(2) { display: block; }
  .app-sidebar.collapsed .side-link { justify-content: flex-start; padding-left: 12px; padding-right: 12px; font-size: 14px; }
  .app-sidebar.collapsed .side-user { justify-content: flex-start; }
  .app-main { padding: 24px 18px 60px; }
}

/* Stat cards */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.dash-stat {
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.dash-stat .label { font-size: 12.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.dash-stat .value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.dash-stat .value.green { color: var(--green); }

/* Quick actions grid */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.qa-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.qa-tile:hover {
  border-color: rgba(0,224,107,0.4);
  background: rgba(0,224,107,0.05);
  transform: translateY(-2px);
}
.qa-tile .ic {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--green-soft);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}

/* Tables */
.table-wrap {
  background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
}
.table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.table-head h3 { font-size: 16px; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.data-table th {
  text-align: left;
  padding: 13px 24px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
table.data-table td {
  padding: 15px 24px;
  border-bottom: 1px solid var(--border);
  color: rgba(255,255,255,0.85);
}
table.data-table tr:last-child td { border-bottom: none; }

.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: capitalize;
}
.badge-green { background: var(--green-soft); color: var(--green); border: 1px solid rgba(0,224,107,0.3); }
.badge-yellow { background: rgba(255,190,0,0.12); color: #ffbe00; border: 1px solid rgba(255,190,0,0.3); }
.badge-red { background: rgba(255,77,92,0.12); color: #ff8a94; border: 1px solid rgba(255,77,92,0.3); }
.badge-blue { background: rgba(66,133,244,0.14); color: #7fa8ff; border: 1px solid rgba(66,133,244,0.35); }
.badge-gray { background: rgba(255,255,255,0.06); color: var(--muted); border: 1px solid var(--border-strong); }

.amount-in { color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; }
.amount-out { color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Empty state */
.empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--muted);
}
.empty .ic { font-size: 34px; margin-bottom: 12px; opacity: 0.5; }

/* Chatbot widget */
.chatbot-btn {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--green);
  color: #000;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,224,107,0.4);
  font-size: 24px;
  z-index: 150;
  transition: transform 0.2s ease;
  display: flex; align-items: center; justify-content: center;
}
.chatbot-btn:hover { transform: scale(1.06); }

.chatbot-window {
  position: fixed;
  right: 24px; bottom: 96px;
  width: min(380px, calc(100vw - 48px));
  height: 500px;
  max-height: 70vh;
  border-radius: 22px;
  background: #0a0a0a;
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  z-index: 150;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: chatPop 0.25s cubic-bezier(0.2,0.7,0.2,1);
}
.chatbot-window.open { display: flex; }
@keyframes chatPop {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.chat-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.02);
}
.chat-head strong { font-size: 15px; }
.chat-head .status { font-size: 11.5px; color: var(--green); font-weight: 600; }
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-msg {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  animation: msgIn 0.3s ease;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.chat-msg.bot {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
  align-self: flex-start;
}
.chat-msg.user {
  background: var(--green);
  color: #000;
  font-weight: 500;
  border-bottom-right-radius: 5px;
  align-self: flex-end;
}
.chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 12px;
}
.chat-quick button {
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-strong);
  color: rgba(255,255,255,0.8);
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.chat-quick button:hover { border-color: var(--green); color: var(--green); }
.chat-input {
  display: flex;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.chat-input input {
  flex: 1;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.chat-input input:focus { border-color: var(--green); }
.chat-input button {
  width: 42px;
  border-radius: 10px;
  border: none;
  background: var(--green);
  color: #000;
  font-size: 17px;
  cursor: pointer;
}

/* ============================================================
   Utility
   ============================================================ */
.container { max-width: 1240px; margin: 0 auto; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 40px; }
.mb-2 { margin-bottom: 16px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.hidden { display: none !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Phosphor icon sizing fix */
.side-link .ic .ph, .top-btn .ic .ph, .search-box .ic .ph, .qa-tile .ph, .empty .ph, .mock-avatar-sm .ph {
  font-size: inherit;
  line-height: 1;
}
.side-link .ic .ph { font-size: 18px; }
.top-btn .ic .ph { font-size: 16px; }
.search-box .ic .ph { font-size: 15px; }

/* Ensure Phosphor icons render at correct size inside icon containers */
.ic > .ph {
  font-size: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   PluggerTools landing page layer
   ============================================================ */
.pt-hero { min-height: 760px; padding-top: 150px; }
.pt-hero .sub { max-width: 590px; }
.pt-hero-visual { min-height: 510px; display:flex; align-items:center; justify-content:center; position:relative; }
.pt-command-card { position:relative; z-index:2; width:min(430px, 88%); padding:24px; border:1px solid rgba(0,224,107,.27); border-radius:28px; background:linear-gradient(145deg,rgba(18,25,22,.96),rgba(5,7,7,.88)); box-shadow:0 30px 90px rgba(0,224,107,.15), inset 0 1px rgba(255,255,255,.09); transform:rotate(4deg); }
.pt-card-top,.pt-tool-meta,.pt-progress { display:flex; align-items:center; justify-content:space-between; }
.pt-live { font-size:10px; letter-spacing:.14em; color:var(--green); font-weight:800; }.pt-live i { display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:6px;box-shadow:0 0 10px var(--green); }
.pt-card-title { font-size:34px; line-height:1.04; font-weight:800; letter-spacing:-.04em; margin:54px 0 26px; }.pt-card-title span { color:var(--green); }
.pt-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.pt-card-grid div { padding:15px 13px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.035); }.pt-card-grid i { display:block;color:var(--green);font-size:20px;margin-bottom:12px; }.pt-card-grid b,.pt-card-grid small { display:block; }.pt-card-grid b { font-size:13px; }.pt-card-grid small { color:var(--muted-2);font-size:10px;margin-top:3px; }
.pt-progress { flex-wrap:wrap; gap:8px; margin-top:26px; color:var(--muted); font-size:11px; }.pt-progress b { color:var(--green); }.pt-progress i { width:100%;height:5px;background:rgba(255,255,255,.08);border-radius:10px;overflow:hidden; }.pt-progress em { display:block;width:92%;height:100%;background:var(--green);border-radius:10px;box-shadow:0 0 12px var(--green); }
.pt-orbit { position:absolute; border:1px solid rgba(0,224,107,.16); border-radius:50%; transform:rotate(-25deg); }.pt-orbit-one { width:520px;height:260px; }.pt-orbit-two { width:380px;height:190px; transform:rotate(45deg); }.pt-float { position:absolute!important; z-index:3; width:88px; }.pt-float-a { top:8%; left:2%; }.pt-float-b { right:0; bottom:12%; width:105px; }
.pt-proof { display:flex; gap:20px; flex-wrap:wrap; color:var(--muted); font-size:12px; margin-top:25px; }.pt-proof i { color:var(--green); margin-right:5px; }
.pt-marquee { overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:17px 0;background:rgba(255,255,255,.015);white-space:nowrap; }.pt-marquee div { display:flex;justify-content:space-around;min-width:850px;color:var(--muted-2);font-size:10px;letter-spacing:.25em;font-weight:800; }
.pt-section { padding-top:110px; padding-bottom:110px; }.pt-section-intro { max-width:720px; }.pt-section-intro .lead { max-width:620px; }.pt-tools-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:48px; }.pt-tool-card { min-height:310px;padding:25px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.015));transition:transform .25s ease,border-color .25s ease,background .25s ease; }.pt-tool-card:hover { transform:translateY(-6px);border-color:rgba(0,224,107,.5);background:linear-gradient(150deg,rgba(0,224,107,.1),rgba(255,255,255,.02)); }.pt-tool-icon { width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--green-soft);color:var(--green);font-size:23px;margin-bottom:30px; }.pt-tool-meta { color:var(--green);text-transform:uppercase;font-size:10px;letter-spacing:.12em;font-weight:800; }.pt-tool-meta i { color:var(--muted);font-size:18px; }.pt-tool-card h3 { margin-top:18px;font-size:20px; }.pt-tool-card p { color:var(--muted);font-size:13px;line-height:1.7;margin-top:10px; }.pt-tool-link { color:var(--text);font-size:12px;font-weight:700;margin-top:22px; }.pt-tool-link i { color:var(--green);margin-left:6px; }
.pt-dark-band { background:#030303; }.pt-steps { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px; }.pt-step { position:relative;padding:30px;border-top:1px solid var(--border-strong); }.pt-step>span { color:var(--green);font-size:11px;letter-spacing:.15em;font-weight:800; }.pt-step>i { display:block;font-size:30px;color:var(--green);margin:35px 0 20px; }.pt-step h3 { font-size:20px; }.pt-step p { color:var(--muted);font-size:14px;margin-top:10px;max-width:280px; }.pt-safety { display:flex;gap:22px;align-items:flex-start;max-width:800px;margin-top:40px;padding:25px;border:1px solid rgba(0,224,107,.25);border-radius:18px;background:var(--green-soft); }.pt-safety>i { font-size:30px;color:var(--green); }.pt-safety h3 { font-size:18px; }.pt-safety p { color:var(--muted);font-size:14px;margin-top:6px; }
@media (max-width:800px) { .pt-hero { padding-top:110px; }.pt-tools-grid,.pt-steps { grid-template-columns:1fr 1fr; }.pt-hero-visual { min-height:410px; }.pt-card-title { font-size:29px; } }
@media (max-width:540px) { .pt-tools-grid,.pt-steps { grid-template-columns:1fr; }.pt-section { padding-top:75px;padding-bottom:75px; }.pt-hero-visual { min-height:360px; }.pt-command-card { transform:rotate(2deg); }.pt-orbit-one { width:390px;height:220px; }.pt-orbit-two { width:290px;height:160px; }.pt-proof { gap:10px;flex-direction:column; }.pt-safety { flex-direction:column; } }

/* ============================================================
   PlugSocialVault visual system — PluggerTools adaptation
   Source tokens: deep navy, electric blue, amber/gold, glass UI.
   ============================================================ */
:root {
  --bg:#0a0b0f; --bg-soft:#111318; --bg-card:#181c25;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.13);
  --text:#9ba8bb; --text-strong:#e8edf5; --muted:rgba(78,90,107,1);
  --green:#4a7cff; --green-dim:#3563d4; --green-soft:rgba(74,124,255,.12);
  --gold:#f0a500; --gold-soft:rgba(240,165,0,.14);
  --font:'Instrument Sans',sans-serif; --display:'Bricolage Grotesque',sans-serif;
}
body { background:var(--bg); color:var(--text); font-family:var(--font); font-size:15px; }
h1,h2,h3,h4 { font-family:var(--display); color:var(--text-strong); }
.navbar { height:62px; padding:0 40px; background:rgba(10,11,15,.82); border-bottom:1px solid var(--border); border-radius:0; }
.navbar .brand { font-family:var(--display); font-size:18px; color:var(--text-strong); }
.navbar .brand .logo-mark { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--green),var(--gold)); box-shadow:none; }
.navbar .nav-links { gap:28px; }.navbar .nav-links a { color:var(--muted); font-size:13px; padding:0; }.navbar .nav-links a:hover { color:var(--text-strong); background:none; }
.btn { border-radius:10px; font-family:var(--font); font-size:13px; }.btn-primary { background:var(--green); color:#fff; }.btn-primary:hover { background:#5c8aff; box-shadow:0 0 24px rgba(74,124,255,.3); }.btn-ghost { background:transparent; border-color:var(--border-strong); color:var(--text); }.btn-ghost:hover { color:var(--text-strong); background:rgba(255,255,255,.04); }.btn-lg { border-radius:12px; }
.hero { background:radial-gradient(circle at 50% 15%,rgba(74,124,255,.09),transparent 38%),radial-gradient(circle at 90% 90%,rgba(240,165,0,.055),transparent 28%); }
.headline { font-family:var(--display); font-size:clamp(38px,6.5vw,80px); font-weight:800; color:var(--text-strong); }.accent { background:linear-gradient(90deg,var(--green) 10%,#a78fff 50%,var(--gold) 90%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.kicker .pill { color:var(--green); background:rgba(74,124,255,.1); border-color:rgba(74,124,255,.25); border-radius:30px; }.pill .dot { background:var(--green); box-shadow:0 0 8px var(--green); }.sub,.lead { color:var(--muted); }.eyebrow { font-family:'JetBrains Mono',monospace; color:var(--green); letter-spacing:.16em; }.eyebrow::before { content:'//'; color:var(--muted); }
.pt-command-card { border-color:rgba(74,124,255,.28); background:linear-gradient(145deg,rgba(24,28,37,.97),rgba(13,18,36,.9)); box-shadow:0 30px 90px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.09); }.pt-card-title span { color:var(--green); }.pt-card-grid div { background:rgba(255,255,255,.04); border-color:var(--border); }.pt-card-grid i,.pt-live,.pt-progress b { color:var(--green); }.pt-progress em { background:var(--green); box-shadow:0 0 12px var(--green); }.pt-orbit { border-color:rgba(74,124,255,.16); }
.pt-marquee { background:var(--bg-soft); border-color:var(--border); }.pt-marquee div { color:var(--muted); }.pt-section { background:var(--bg); }.pt-dark-band { background:var(--bg-soft)!important; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.pt-tool-card { background:rgba(255,255,255,.04); border-color:var(--border); border-radius:18px; }.pt-tool-card:hover { border-color:rgba(74,124,255,.5); background:linear-gradient(150deg,rgba(74,124,255,.1),rgba(255,255,255,.02)); }.pt-tool-icon { background:var(--green-soft); color:var(--green); border-radius:10px; }.pt-tool-meta { color:var(--green); }.pt-tool-card h3 { color:var(--text-strong); }.pt-tool-card p,.pt-step p,.pt-safety p { color:var(--muted); }.pt-step { border-top-color:var(--border-strong); }.pt-step>span,.pt-step>i,.pt-tool-link i { color:var(--green); }.pt-safety { background:var(--green-soft); border-color:rgba(74,124,255,.25); }.pt-safety>i { color:var(--green); }.cta-banner { background:linear-gradient(135deg,rgba(74,124,255,.11),rgba(240,165,0,.06)); border-color:var(--border-strong); }.site-footer { background:var(--bg-soft); border-top-color:var(--border); }.site-footer h4 { color:var(--text-strong); }.site-footer a,.site-footer .muted { color:var(--muted); }.footer-bottom { border-top-color:var(--border); color:var(--muted); }
@media (max-width:720px) { .navbar { padding:0 18px; } }

/* PluggerTools service-specific icon treatment */
.stack-ph-icon { display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 30% 20%,rgba(74,124,255,.5),rgba(13,18,36,.9)); color:#8fb0ff; font-size:42px; border:1px solid rgba(74,124,255,.32); }
.stack-ph-icon i { filter:drop-shadow(0 5px 12px rgba(74,124,255,.4)); }
/* Single static workspace preview, inspired by the supplied PlugSocialVault dashboard reference */
.pt-dashboard-wrap { width:100%; margin:52px auto 0; max-width:1100px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:#050609; box-shadow:0 30px 90px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.025); }
.pt-dashboard { display:grid; grid-template-columns:185px 1fr; min-height:560px; background:#050609; color:#9ba8bb; font-family:'Instrument Sans',sans-serif; }
.pt-dash-side { border-right:1px solid rgba(255,255,255,.09); padding:20px 13px; background:#030405; }.pt-dash-brand { display:flex; align-items:center; gap:8px; font-family:'Bricolage Grotesque',sans-serif; color:#e8edf5; font-size:13px; margin:0 7px 34px; }.pt-dash-brand .logo-mark { width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4a7cff,#f0a500);color:#fff;font-size:9px; }.pt-dash-side small { display:block; color:#4e5a6b; font-size:8px; letter-spacing:.12em; margin:14px 8px 7px; }.pt-dash-side a { display:flex; align-items:center; gap:8px; padding:8px 8px; margin:2px 0; border-radius:7px; color:#7f8b9d; font-size:10px; }.pt-dash-side a.active,.pt-dash-side a:hover { background:rgba(74,124,255,.13); color:#e8edf5; border:1px solid rgba(74,124,255,.25); }.pt-dash-side a i { color:#4a7cff; font-size:13px; }.pt-dash-side em { margin-left:auto; font-style:normal; font-size:8px; color:#4a7cff; }
.pt-dash-main { padding:20px 24px; }.pt-dash-top { display:flex; justify-content:space-between; align-items:center; color:#e8edf5; font-family:'Bricolage Grotesque',sans-serif; font-size:16px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.08); }.pt-dash-icons { display:flex; gap:16px; color:#566070; font-size:14px; }.pt-dash-search { margin:18px 0; width:230px; padding:9px 12px; border-radius:7px; border:1px solid rgba(255,255,255,.1); color:#566070; font-size:10px; background:#0a0b0f; }.pt-dash-search i { margin-right:7px; }.pt-dash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:25px; }.pt-dash-stats>div { padding:16px 14px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:rgba(255,255,255,.02); }.pt-dash-stats small { display:block; color:#566070; font-size:9px; margin-bottom:10px; }.pt-dash-stats b { color:#e8edf5; font:600 17px 'Bricolage Grotesque',sans-serif; }.pt-dash-main h4 { color:#e8edf5; font:600 12px 'Bricolage Grotesque',sans-serif; margin:20px 0 11px; }.pt-quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }.pt-quick-grid>div { min-height:72px; padding:12px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:rgba(255,255,255,.02); }.pt-quick-grid i { color:#4a7cff; font-size:16px; }.pt-quick-grid span { color:#c4d0e8; font-size:9px; }.pt-activity { border:1px solid rgba(255,255,255,.1); border-radius:10px; overflow:hidden; }.pt-activity>div { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.07); }.pt-activity>div:last-child { border-bottom:none; }.pt-activity b,.pt-activity small { display:block; }.pt-activity b { color:#c4d0e8; font-size:10px; font-weight:500; }.pt-activity small { color:#566070; font-size:8px; margin-top:3px; }.pt-activity strong { color:#4a7cff; font-size:9px; font-weight:500; }
@media (max-width:720px) { .pt-dashboard { grid-template-columns:1fr; }.pt-dash-side { display:none; }.pt-dash-main { padding:16px; }.pt-dash-stats { grid-template-columns:repeat(2,1fr); }.pt-quick-grid { grid-template-columns:repeat(2,1fr); } }

.mascot-pg-badge { position:absolute; z-index:4; left:50%; top:58%; transform:translate(-50%,-50%); width:58px; height:58px; display:flex; align-items:center; justify-content:center; border:2px solid rgba(255,255,255,.9); border-radius:50%; background:radial-gradient(circle at 35% 28%,#6c98ff,#2454bd 72%); color:#fff; font:800 20px 'Bricolage Grotesque',sans-serif; letter-spacing:-.06em; text-shadow:0 1px 3px rgba(0,0,0,.35); box-shadow:0 5px 14px rgba(0,0,0,.3), inset 0 0 0 2px rgba(255,255,255,.18); }
.mascot-pg-badge::before,.mascot-pg-badge::after { content:''; position:absolute; border:1px solid rgba(255,255,255,.32); border-radius:50%; pointer-events:none; }.mascot-pg-badge::before { inset:7px 16px; }.mascot-pg-badge::after { inset:16px 7px; }
@media (max-width:720px) { .mascot-pg-badge { width:48px; height:48px; font-size:16px; top:57%; } }

/* ============================================================
   PluggerTools product polish — auth + workspace
   ============================================================ */
:root { --blue:#4a7cff; --blue-soft:rgba(74,124,255,.14); --panel:#0b0d11; --panel-2:#10131a; }
.btn:active { transform:scale(.97); }

/* Auth experience */
.auth-bg { min-height:100vh; background:#050607; }
.auth-page { min-height:100vh; display:grid; grid-template-columns:minmax(420px,1.08fr) minmax(420px,.92fr); background:radial-gradient(circle at 16% 18%,rgba(74,124,255,.10),transparent 32%),#050607; }
.auth-visual { position:relative; min-height:100vh; overflow:hidden; padding:clamp(34px,6vw,90px); display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#080b12 0%,#050607 58%,#07140e 100%); }
.auth-visual::before { content:""; position:absolute; inset:0; opacity:.28; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,black,transparent 90%); }
.auth-visual-copy { position:absolute; z-index:3; top:clamp(34px,7vw,92px); left:clamp(28px,6vw,88px); max-width:330px; }
.auth-visual-copy h2 { font-size:clamp(2rem,4vw,4.15rem); line-height:1.02; margin:14px 0 16px; letter-spacing:-.055em; }
.auth-visual-copy p { color:var(--muted); max-width:280px; }
.auth-visual .mascot { position:relative; z-index:2; width:min(74%,480px); max-height:64vh; object-fit:contain; filter:drop-shadow(0 24px 38px rgba(0,0,0,.45)); margin-top:8vh; }
.auth-orbit { position:absolute; z-index:1; border:1px solid rgba(74,124,255,.28); border-radius:50%; transform:rotate(-18deg); }
.orbit-a { width:min(70vw,660px); height:min(25vw,240px); }
.orbit-b { width:min(54vw,500px); height:min(20vw,180px); border-color:rgba(0,224,107,.22); transform:rotate(24deg); }
.auth-globe-badge { position:absolute; z-index:4; left:50%; top:58%; width:72px; height:72px; transform:translate(-50%,-50%); border-radius:50%; display:grid; place-items:center; color:#fff; font:800 23px 'Bricolage Grotesque',sans-serif; letter-spacing:-.08em; background:radial-gradient(circle at 32% 25%,#7da2ff,#2449a8 74%); border:2px solid rgba(255,255,255,.9); box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,255,255,.18); }
.auth-globe-badge::before,.auth-globe-badge::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.34); border-radius:50%; }
.auth-globe-badge::before { inset:9px 20px; }.auth-globe-badge::after { inset:20px 9px; }
.auth-float { position:absolute!important; z-index:3; width:82px; }.auth-float-one { top:31%; left:12%; }.auth-float-two { right:12%; bottom:19%; width:102px; }
.auth-quote { position:absolute; z-index:3; bottom:clamp(28px,6vw,80px); left:clamp(28px,6vw,88px); color:rgba(255,255,255,.48); font-size:13px; max-width:230px; }
.auth-benefits { position:absolute; z-index:3; bottom:clamp(28px,6vw,80px); right:clamp(28px,6vw,88px); display:grid; grid-template-columns:auto 1fr; gap:3px 10px; max-width:220px; font-size:12px; }.auth-benefits span { color:var(--green); font-family:'JetBrains Mono',monospace; }.auth-benefits b { font-weight:600; }.auth-benefits small { grid-column:2; color:var(--muted-2); margin-bottom:6px; }
.auth-form-wrap { display:flex; align-items:center; justify-content:center; padding:42px clamp(24px,6vw,96px); background:#07090b; }
.auth-form { width:min(100%,420px); }.auth-brand { display:flex; align-items:center; gap:9px; font-weight:700; margin:34px 0 52px; }.auth-brand .logo-mark { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--green),#04894a); color:#031008; font-weight:900; box-shadow:0 0 22px rgba(0,224,107,.23); }.auth-form h1 { font-size:clamp(2rem,4vw,2.75rem); letter-spacing:-.045em; margin-bottom:8px; }.auth-form .sub { color:var(--muted); margin-bottom:30px; }.back-link { display:inline-flex; color:var(--muted); font-size:13px; transition:color .18s ease; }.back-link:hover { color:var(--text); }.form-group { margin-bottom:19px; }.form-group label { display:block; margin-bottom:8px; font-size:13px; color:#dce1ea; font-weight:600; }.field-label-row { display:flex; justify-content:space-between; align-items:center; }.field-label-row .muted { font-size:11px; }.form-control { width:100%; min-height:52px; padding:0 15px; border:1px solid rgba(255,255,255,.11); border-radius:13px; background:#0c0f13; color:var(--text); outline:none; font:inherit; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }.form-control:focus { border-color:rgba(74,124,255,.9); background:#10141b; box-shadow:0 0 0 4px rgba(74,124,255,.12); }.auth-submit { width:100%; justify-content:space-between; margin-top:8px; padding-left:20px; padding-right:18px; }.auth-submit span { font-size:21px; line-height:1; }.auth-switch { text-align:center; color:var(--muted); font-size:13px; margin-top:22px; }.auth-switch a { color:var(--green); font-weight:600; }.auth-footnote { color:var(--muted-2); text-align:center; font-size:11px; line-height:1.5; margin-top:38px; }.selected-service { padding:12px 14px; border:1px solid rgba(0,224,107,.2); background:var(--green-soft); border-radius:11px; color:var(--muted); font-size:13px; margin-bottom:14px; }.selected-service strong { color:var(--green); }

/* Workspace shell */
.app-shell { min-height:100vh; background:#07090b; }.app-sidebar { background:#090b0e; border-right:1px solid rgba(255,255,255,.08); width:248px; padding:24px 14px 16px; }.side-brand { margin:0 10px 38px; font-size:16px; }.side-brand .logo-mark { background:linear-gradient(135deg,var(--green),#168b4d); color:#021008; }.side-section { color:#566170; font-size:10px; letter-spacing:.13em; margin:24px 10px 8px; }.side-link { min-height:42px; font-size:13px; border:1px solid transparent; }.side-link.active,.side-link:hover { background:rgba(74,124,255,.12); border-color:rgba(74,124,255,.23); color:#edf3ff; }.side-link .ic { opacity:.9; }.side-user { background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:11px; margin-top:22px; }.app-main { background:radial-gradient(circle at 82% 2%,rgba(74,124,255,.07),transparent 28%),#07090b; }.app-topbar { min-height:76px; padding:0 clamp(18px,4vw,42px); border-bottom:1px solid rgba(255,255,255,.08); }.search-box { background:#0d1015; border-color:rgba(255,255,255,.08); }.top-actions { gap:16px; }.dash-content-header { padding:38px clamp(18px,4vw,42px) 28px; }.dash-h1 { font-size:clamp(1.65rem,3vw,2.35rem); letter-spacing:-.045em; }.dash-sub { color:var(--muted); }.dash-content-header .btn-primary { box-shadow:0 7px 22px rgba(0,224,107,.14); }.dash-inner { padding:0 clamp(18px,4vw,42px) 56px; max-width:1500px; }.workspace-banner { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; padding:24px 26px; margin-bottom:24px; border:1px solid rgba(74,124,255,.22); border-radius:18px; background:linear-gradient(115deg,rgba(74,124,255,.15),rgba(255,255,255,.025) 58%,rgba(0,224,107,.06)); }.workspace-banner .eyebrow { color:#83a6ff; font-size:10px; letter-spacing:.14em; }.workspace-banner h3 { font-size:clamp(1.15rem,2vw,1.6rem); margin:7px 0 4px; }.workspace-banner p { color:var(--muted); font-size:13px; }.workspace-status { display:flex; align-items:center; gap:9px; flex:0 0 auto; padding:10px 13px; border-radius:12px; background:rgba(0,0,0,.23); }.status-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }.workspace-status b,.workspace-status small { display:block; }.workspace-status b { font-size:12px; }.workspace-status small { color:var(--muted); font-size:10px; margin-top:2px; }.dash-stat,.table-wrap,.qa-tile { border-color:rgba(255,255,255,.08); background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); box-shadow:0 10px 30px rgba(0,0,0,.12); }.dash-stat { padding:22px; }.dash-stat .value { font-size:clamp(1.4rem,2.5vw,2rem); }.qa-tile { min-height:96px; border-radius:14px; }.qa-tile:hover { border-color:rgba(74,124,255,.5); background:rgba(74,124,255,.11); transform:translateY(-2px); }.table-head { padding:18px 22px; }.data-table th { color:#667384; }.data-table td { padding:15px 20px; }

/* Responsive behavior: reflow information, don't simply scale it down */
@media (max-width:1050px) { .auth-page { grid-template-columns:1fr; }.auth-visual { min-height:440px; height:44vh; }.auth-visual-copy { top:32px; }.auth-visual .mascot { width:min(42%,330px); margin-top:105px; }.auth-visual-copy h2 { font-size:clamp(1.8rem,5vw,3rem); }.auth-form-wrap { min-height:56vh; }.auth-brand { margin-top:8px; margin-bottom:34px; } }
@media (max-width:800px) { .app-sidebar { position:fixed; z-index:120; inset:0 auto 0 0; transform:translateX(-105%); transition:transform .22s cubic-bezier(.23,1,.32,1); box-shadow:18px 0 42px rgba(0,0,0,.35); }.app-sidebar.open { transform:translateX(0); }.app-main { margin-left:0; }.mobile-menu-btn { display:inline-flex!important; }.top-wallet,.top-actions .top-divider,.top-actions .top-btn span:not(.ic),.user-menu-trigger .name { display:none; }.app-topbar { padding:0 18px; }.dash-content-header { padding:28px 18px 22px; }.dash-content-header,.dash-h-actions { align-items:flex-start; }.dash-h-actions { gap:8px; }.dash-h-actions .btn { padding:0 13px; }.dash-inner { padding:0 18px 42px; }.workspace-banner { align-items:flex-start; flex-direction:column; }.workspace-status { width:100%; }.dash-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.grid-2 { grid-template-columns:1fr; }.table-wrap { overflow-x:auto; }.data-table { min-width:640px; } }
@media (max-width:560px) { .auth-visual { min-height:370px; height:42vh; padding:24px; }.auth-visual-copy { left:24px; top:25px; }.auth-visual-copy p { display:none; }.auth-visual .mascot { width:58%; margin-top:112px; }.auth-globe-badge { width:56px;height:56px;font-size:18px;top:65%; }.auth-quote,.auth-benefits { display:none; }.auth-float { width:56px!important; }.auth-float-one { left:5%; top:45%; }.auth-float-two { right:5%; bottom:13%; }.auth-form-wrap { padding:28px 20px 42px; }.auth-brand { margin-bottom:28px; }.auth-form h1 { font-size:2rem; }.auth-form .sub { margin-bottom:24px; }.dash-content-header { flex-direction:column; }.dash-h-actions { width:100%; }.dash-h-actions .btn { flex:1; }.dash-stats { gap:10px; }.dash-stat { padding:16px; }.dash-stat .label { font-size:11px; }.quick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.qa-tile { min-height:82px; padding:15px; }.table-head { padding:16px; }.workspace-banner { padding:19px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } }

/* Perceived-load improvement: keep above-the-fold content crisp and quick. */
.reveal { transition-duration:.42s; filter:blur(7px); transform:translateY(14px); }
.reveal.visible { filter:blur(0); transform:translateY(0); }
@media (prefers-reduced-motion:reduce) { .reveal { transition:none; filter:none; transform:none; } }

.auth-submit:disabled { opacity:.72; cursor:wait; transform:none; box-shadow:none; }
.signup-spinner { display:inline-block; width:15px; height:15px; border:2px solid rgba(0,0,0,.25); border-top-color:#000; border-radius:50%; animation:signupSpin .7s linear infinite; vertical-align:-2px; }
@keyframes signupSpin { to { transform:rotate(360deg); } }

/* Email verification + celebration */
.verify-icon { width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:var(--blue-soft);color:#8dadff;font-size:25px;margin:28px 0 18px; }.verify-email { color:#e9eef8;overflow-wrap:anywhere; }.verify-code { text-align:center;letter-spacing:.45em;font:700 25px 'JetBrains Mono',monospace;padding-left:25px; }.welcome-page { min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 36%,rgba(74,124,255,.19),transparent 32%),radial-gradient(circle at 50% 100%,rgba(0,224,107,.08),transparent 38%),#050607;padding:24px; }.welcome-card { position:relative;z-index:2;width:min(100%,550px);padding:clamp(30px,6vw,65px) clamp(24px,6vw,70px);text-align:center;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:rgba(13,16,22,.82);box-shadow:0 30px 80px rgba(0,0,0,.45);backdrop-filter:blur(18px); }.welcome-check { width:72px;height:72px;display:grid;place-items:center;margin:0 auto 25px;border-radius:50%;background:var(--green);color:#041008;font-size:38px;font-weight:800;box-shadow:0 0 0 10px rgba(0,224,107,.1),0 0 40px rgba(0,224,107,.35); }.welcome-card h1 { font-size:clamp(2rem,5vw,3.4rem);line-height:1.02;letter-spacing:-.055em;margin:15px 0; }.welcome-card p { color:var(--muted);max-width:370px;margin:0 auto 28px; }.welcome-card small { display:block;color:var(--muted-2);font-size:11px;margin-top:22px; }.welcome-burst { position:absolute;inset:0;pointer-events:none; }.welcome-burst span { position:absolute;color:var(--green);font-size:25px; }.welcome-burst span:nth-child(1){top:13%;left:13%;color:#83a6ff}.welcome-burst span:nth-child(2){top:20%;right:14%;color:#f5b84b}.welcome-burst span:nth-child(3){bottom:18%;left:17%;color:#ff7891}.welcome-burst span:nth-child(4){bottom:14%;right:16%;color:#83a6ff}.welcome-burst span:nth-child(5){top:8%;right:33%;color:var(--green)}.confetti { position:absolute;width:10px;height:22px;opacity:.8;border-radius:4px;animation:confettiFloat 4s ease-in-out infinite; }.confetti-one{left:13%;top:24%;background:#4a7cff;transform:rotate(28deg)}.confetti-two{right:16%;top:30%;background:#00e06b;transform:rotate(-33deg);animation-delay:.6s}.confetti-three{left:21%;bottom:20%;background:#f5b84b;transform:rotate(-26deg);animation-delay:1.1s}.confetti-four{right:23%;bottom:18%;background:#ff7891;transform:rotate(34deg);animation-delay:1.6s}@keyframes confettiFloat{50%{transform:translateY(-18px) rotate(80deg)}}
@media(max-width:560px){.verify-code{font-size:21px;letter-spacing:.3em;padding-left:16px}.welcome-card{border-radius:22px}.welcome-burst span{font-size:19px}}

/* Dedicated tool workspaces */
.service-page-hero { display:flex;align-items:center;gap:18px;padding:24px 26px;margin-bottom:22px;border:1px solid rgba(74,124,255,.24);border-radius:18px;background:linear-gradient(120deg,rgba(74,124,255,.14),rgba(255,255,255,.025)); }.service-page-icon { width:58px;height:58px;display:grid;place-items:center;flex:0 0 auto;border-radius:16px;background:rgba(74,124,255,.16);color:#8bacff;font-size:28px; }.service-page-hero h3 { font-size:clamp(1.3rem,2.6vw,2rem);margin:5px 0 3px; }.service-page-hero p { color:var(--muted);font-size:13px; }.service-state { margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.22);font-size:11px;color:#cbd4e4; }.service-page-grid { display:grid;grid-template-columns:1.1fr .9fr;gap:18px; }.service-card-copy { padding:24px;color:var(--muted); }.service-card-copy p { max-width:520px;margin-bottom:22px; }.service-steps { list-style:none;padding:7px 22px 18px;margin:0;counter-reset:steps; }.service-steps li { display:grid;grid-template-columns:1fr;gap:3px;padding:17px 0 17px 37px;border-bottom:1px solid rgba(255,255,255,.07);position:relative; }.service-steps li::before { counter-increment:steps;content:counter(steps);position:absolute;left:0;top:18px;width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:rgba(74,124,255,.14);color:#87a7ff;font:600 11px 'JetBrains Mono',monospace; }.service-steps li:last-child{border-bottom:0}.service-steps b{font-size:13px}.service-steps span{color:var(--muted);font-size:12px}@media(max-width:760px){.service-page-hero{align-items:flex-start;flex-wrap:wrap;padding:20px}.service-state{margin-left:0;width:100%;justify-content:center}.service-page-grid{grid-template-columns:1fr}.service-page-icon{width:50px;height:50px;font-size:23px}}

/* Document Generator */
.docgen-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:18px}.docgen-card,.docgen-help{overflow:hidden}.docgen-head-icon{font-size:28px;color:#ff718c}.docgen-card form{padding:24px}.docgen-description{display:block;color:var(--muted-2);font-size:12px;margin-top:8px}.docgen-fields{border-top:1px solid rgba(255,255,255,.08);margin-top:22px;padding-top:22px}.docgen-fields .form-group{margin-bottom:18px}.docgen-empty{min-height:170px;display:grid;place-items:center;text-align:center;color:var(--muted-2);font-size:13px}.docgen-empty i{font-size:34px;color:#7e9dff}.docgen-empty p{margin:0}.docgen-help .service-steps{padding-top:8px}.docgen-note{display:flex;gap:10px;align-items:flex-start;margin:10px 22px 22px;padding:14px;border-radius:12px;background:rgba(0,224,107,.06);border:1px solid rgba(0,224,107,.14);color:var(--muted);font-size:11px;line-height:1.6}.docgen-note i{color:var(--green);font-size:18px;flex:0 0 auto}.docgen-card select.form-control{appearance:auto}@media(max-width:760px){.docgen-layout{grid-template-columns:1fr}.docgen-card form{padding:18px}.docgen-head-icon{font-size:23px}}


/* ============================================================
   Receipt simulator
   ============================================================ */
.simulator-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 34px 18px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 224, 107, .28);
  border-radius: var(--radius-sm);
  background: rgba(0, 224, 107, .08);
  color: rgba(255,255,255,.82);
}
.simulator-notice > i { color: var(--green); font-size: 21px; margin-top: 2px; }
.simulator-notice strong, .simulator-notice span { display: block; }
.simulator-notice strong { color: var(--green); margin-bottom: 2px; }
.simulator-notice span { font-size: 13px; color: var(--muted); }
.receipt-simulator-layout { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(320px, 1.1fr); gap: 20px; padding: 0 34px; align-items: start; }
.receipt-simulator-form { padding: 24px; }
.receipt-simulator-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.receipt-simulator-form .form-group { margin-bottom: 16px; }
.receipt-simulator-form textarea.form-control { min-height: 92px; padding-top: 12px; }
.receipt-simulator-preview { position: relative; overflow: hidden; min-height: 470px; padding: 24px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: #edf2f7; color: #111827; }
.simulator-watermark { position: absolute; inset: 44% -10% auto; z-index: 2; transform: rotate(-20deg); color: rgba(17,24,39,.10); font-size: clamp(28px, 5vw, 54px); font-weight: 900; letter-spacing: .12em; text-align: center; pointer-events: none; white-space: nowrap; }
.sample-receipt { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 24px; border: 1px solid #d7dee8; border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgba(15,23,42,.14); }
.sample-receipt-top { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e5e7eb; padding-bottom: 16px; }
.sample-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #111827; color: #00e06b; font-size: 12px; font-weight: 900; }
.sample-receipt-top strong, .sample-receipt-top small { display: block; }
.sample-receipt-top small { color: #6b7280; font-size: 11px; }
.sample-status { margin-left: auto; border-radius: 999px; padding: 5px 10px; background: #dcfce7; color: #166534; font-size: 11px; font-weight: 800; }
.sample-receipt-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 24px 0 18px; }
.sample-receipt-title span { color: #6b7280; font-size: 14px; }
.sample-receipt-title strong { color: #111827; font-size: 27px; }
.sample-receipt-row { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid #f1f5f9; padding: 13px 0; font-size: 13px; }
.sample-receipt-row span { color: #64748b; }
.sample-receipt-row b { max-width: 64%; text-align: right; overflow-wrap: anywhere; }
.sample-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.sample-receipt-note { margin-top: 8px; border-radius: 10px; background: #f8fafc; padding: 12px; font-size: 13px; }
.sample-receipt-note span { color: #64748b; font-weight: 700; }
.sample-receipt-note p { margin: 4px 0 0; white-space: normal; }
.sample-receipt-disclaimer { margin-top: 18px; border-top: 1px solid #e5e7eb; padding-top: 13px; color: #64748b; font-size: 11px; line-height: 1.5; }
.simulator-print { display: flex; margin: 18px auto 0; }
@media (max-width: 980px) { .receipt-simulator-layout { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .simulator-notice, .receipt-simulator-layout { margin-left: 16px; margin-right: 16px; padding-left: 0; padding-right: 0; } .receipt-simulator-layout { display: block; } .receipt-simulator-grid { grid-template-columns: 1fr; } .receipt-simulator-preview { margin-top: 18px; padding: 14px; } .sample-receipt { padding: 18px; } }
@media print { body * { visibility: hidden !important; } .receipt-simulator-preview, .receipt-simulator-preview * { visibility: visible !important; } .receipt-simulator-preview { position: absolute; inset: 0; margin: 0; border: 0; background: #fff; } .simulator-print { display: none; } }

/* ------------------------------------------------------------
   Trackable flight itinerary workspace
   ------------------------------------------------------------ */
.flight-workspace { max-width: 1320px; }
.flight-notice { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; margin-bottom:18px; border:1px solid rgba(255,196,92,.25); border-radius:14px; background:rgba(255,196,92,.07); color:#ffd98a; }
.flight-notice i { font-size:20px; margin-top:1px; }
.flight-notice strong, .flight-notice span { display:block; }
.flight-notice span { color:var(--muted); font-size:13px; margin-top:2px; }
.flight-hero-card { display:flex; align-items:center; justify-content:space-between; min-height:170px; padding:28px 32px; margin-bottom:20px; border:1px solid rgba(0,224,107,.25); border-radius:22px; background:radial-gradient(circle at 85% 10%, rgba(0,224,107,.16), transparent 32%), linear-gradient(120deg,#0c1711,#090b0a 55%,#101814); overflow:hidden; }
.flight-hero-card h3 { font-size:clamp(24px,3vw,38px); margin:6px 0; }
.flight-hero-card p { max-width:620px; color:var(--muted); margin:0; }
.flight-hero-orbit { position:relative; display:flex; align-items:center; justify-content:center; width:108px; height:108px; border:1px solid rgba(0,224,107,.35); border-radius:50%; color:var(--green); font-size:43px; transform:rotate(-18deg); }
.flight-hero-orbit:before { content:""; position:absolute; inset:-14px; border:1px dashed rgba(0,224,107,.28); border-radius:50%; }
.orbit-dot { position:absolute; right:-4px; top:18px; width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 20px var(--green); }
.flight-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:20px; align-items:start; }
.flight-create-card, .flight-side-info > .table-wrap, .flight-records { overflow:hidden; }
.flight-required { color:var(--muted-2); font-size:12px; }
.flight-form { padding:22px 24px 24px; }
.flight-form .form-group { margin-bottom:16px; }
.flight-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.flight-form label { display:block; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; margin-bottom:7px; }
.flight-form .btn { margin-top:4px; }
.source-list { padding:6px 20px 18px; }
.source-list > div { display:flex; align-items:center; gap:11px; padding:13px 0; border-bottom:1px solid var(--border); }
.source-list > div:last-child { border-bottom:0; }
.source-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; font-size:18px; }
.source-icon.opensky { color:#72a7ff; background:rgba(114,167,255,.12); }
.source-icon.tracker { color:#d28aff; background:rgba(210,138,255,.12); }
.source-icon.ui { color:var(--green); background:var(--green-soft); }
.source-list b, .source-list small { display:block; }
.source-list small { color:var(--muted); font-size:12px; }
.source-list em { margin-left:auto; color:var(--muted-2); font-size:11px; font-style:normal; }
.flight-help { margin-top:20px; }
.flight-help ol { padding:4px 24px 20px 42px; color:var(--muted); font-size:13px; }
.flight-help li { padding:5px 0 5px 4px; }
.flight-records { margin-top:20px; }
.flight-live-label { color:var(--green); font:500 12px var(--font); display:flex; gap:7px; align-items:center; }
.flight-ticket-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:16px; padding:0 20px 20px; }
.flight-ticket { position:relative; border:1px solid var(--border-strong); border-radius:18px; overflow:hidden; background:linear-gradient(140deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); }
.flight-ticket-top { display:flex; justify-content:space-between; gap:12px; padding:20px 20px 15px; }
.flight-ticket-kicker { display:block; color:var(--muted-2); font:500 10px var(--font); letter-spacing:.12em; }
.flight-ticket-top h3 { margin-top:5px; font-size:19px; }
.flight-ticket-top h3 strong { color:var(--green); }
.flight-status { display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:999px; font-size:11px; font-weight:700; text-transform:capitalize; white-space:nowrap; }
.status-scheduled { color:#ffd98a; background:rgba(255,196,92,.13); }
.status-in_flight { color:var(--green); background:var(--green-soft); }
.status-landed { color:#89b9ff; background:rgba(98,157,255,.14); }
.status-unknown { color:var(--muted); background:rgba(255,255,255,.08); }
.flight-route { display:grid; grid-template-columns:1fr 34px 1fr; gap:9px; align-items:center; padding:15px 20px; border-top:1px dashed rgba(255,255,255,.18); border-bottom:1px dashed rgba(255,255,255,.18); }
.flight-route small, .flight-passenger small, .live-metrics small { display:block; color:var(--muted-2); font-size:9px; font-weight:700; letter-spacing:.1em; }
.flight-route b { display:block; color:var(--text); font-size:30px; line-height:1.15; letter-spacing:-.04em; }
.flight-route span { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.flight-route > i { color:var(--green); text-align:center; font-size:22px; }
.route-destination { text-align:right; }
.flight-passenger { display:grid; grid-template-columns:1.5fr .6fr 1fr; gap:12px; padding:15px 20px; }
.flight-passenger b { display:block; color:var(--text); font-size:12px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flight-live-panel { margin:0 14px 14px; padding:14px; border:1px solid rgba(0,224,107,.16); border-radius:13px; background:rgba(0,224,107,.035); }
.live-panel-title { display:flex; justify-content:space-between; color:var(--green); font-size:10px; font-weight:700; letter-spacing:.08em; }
.live-panel-title > span:last-child { color:var(--muted-2); font-weight:500; text-transform:capitalize; letter-spacing:0; }
.live-metrics { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; margin:13px 0 9px; }
.live-metrics b { display:block; color:var(--text); font:500 12px var(--font); margin-top:2px; }
.flight-live-panel p { color:var(--muted); font-size:11px; margin:0; min-height:18px; }
.flight-ticket-actions { display:flex; gap:8px; padding:0 14px 16px; }
.flight-ticket-actions .btn { flex:1; padding-left:10px; padding-right:10px; }
.is-loading { opacity:.65; }
@media (max-width:900px) { .flight-layout { grid-template-columns:1fr; } .flight-side-info { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .flight-help { margin-top:0; } }
@media (max-width:620px) { .flight-hero-card { padding:22px; } .flight-hero-orbit { display:none; } .flight-form { padding:18px; } .flight-form .form-row, .flight-side-info { grid-template-columns:1fr; } .flight-ticket-grid { grid-template-columns:1fr; padding-left:12px; padding-right:12px; } .flight-ticket-top { padding-left:15px; padding-right:15px; } .flight-route, .flight-passenger { padding-left:15px; padding-right:15px; } .flight-route b { font-size:25px; } .flight-ticket-actions { flex-direction:column; } }

.airport-combobox { position:relative; }
.airport-hint { display:block; color:var(--muted-2); font-size:11px; margin-top:5px; }
.airport-options { display:none; position:absolute; z-index:20; top:calc(100% - 2px); left:0; right:0; max-height:265px; overflow:auto; padding:6px; border:1px solid var(--border-strong); border-radius:12px; background:#101412; box-shadow:0 18px 45px rgba(0,0,0,.5); }
.airport-options.open { display:block; }
.airport-option { display:flex; align-items:center; gap:10px; width:100%; padding:10px; border:0; border-radius:8px; color:var(--text); background:transparent; text-align:left; cursor:pointer; font:inherit; }
.airport-option:hover, .airport-option:focus { outline:0; background:var(--green-soft); }
.airport-option strong { min-width:38px; color:var(--green); font:700 13px var(--font); }
.airport-option span { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.airport-no-results { padding:12px 10px; color:var(--muted); font-size:12px; }

.status-delayed { color:#ffd98a; background:rgba(255,196,92,.13); }
.status-cancelled { color:#ff9da6; background:rgba(255,77,92,.13); }
.status-diverted { color:#d9b0ff; background:rgba(177,105,255,.14); }
.flight-codeshare { display:flex; align-items:center; gap:8px; padding:0 20px 14px; color:var(--muted); font-size:11px; }
.flight-codeshare small { color:var(--muted-2); font-size:9px; font-weight:700; letter-spacing:.1em; }
.flight-codeshare b { color:var(--text); font-size:11px; }

/* Monochrome boarding-pass card: white surface, black typography, perforated divider. */
.flight-ticket { color:#111; background:#fff; border:0; border-radius:20px; box-shadow:0 18px 45px rgba(0,0,0,.18); }
.flight-ticket::before, .flight-ticket::after { content:""; position:absolute; top:116px; width:18px; height:18px; border-radius:50%; background:var(--bg, #f3f4f2); z-index:2; }
.flight-ticket::before { left:-9px; } .flight-ticket::after { right:-9px; }
.flight-ticket-top { padding:22px 22px 16px; border-bottom:1px solid #e8e8e8; }
.flight-ticket-kicker { color:#6b6b6b; letter-spacing:.14em; }
.flight-ticket-top h3, .flight-ticket-top h3 strong { color:#111; }
.flight-status, .status-scheduled, .status-in_flight, .status-landed, .status-unknown, .status-delayed, .status-cancelled, .status-diverted { color:#111; background:#f0f0f0; border:1px solid #d7d7d7; }
.flight-route { padding:22px; border-top:0; border-bottom:2px dashed #cfcfcf; }
.flight-route small, .flight-passenger small, .live-metrics small, .flight-codeshare small { color:#777; }
.flight-route b, .flight-passenger b, .live-metrics b, .flight-codeshare b { color:#111; }
.flight-route span, .flight-live-panel p { color:#555; }
.flight-route > i { color:#111; }
.flight-passenger { padding:18px 22px 14px; }
.flight-live-panel { margin:0 18px 16px; padding:14px; border:1px solid #dedede; border-radius:12px; background:#fafafa; }
.live-panel-title { color:#111; } .live-panel-title > span:last-child { color:#666; }
.flight-ticket-actions { padding:0 18px 18px; border-top:1px solid #ececec; padding-top:16px; }
.flight-ticket .btn { color:#111; background:#fff; border-color:#c8c8c8; }
.flight-ticket .btn-primary { color:#fff; background:#111; border-color:#111; }
.flight-codeshare { padding:0 22px 14px; color:#444; }
.flight-codeshare b { color:#111; }
.boarding-reference { display:flex; align-items:center; gap:16px; margin:0 18px 16px; padding:14px 0; border-top:1px solid #ececec; color:#111; }
.boarding-reference small, .boarding-reference span { display:block; color:#777; font-size:9px; letter-spacing:.1em; }
.boarding-reference b { display:block; color:#111; font-size:18px; letter-spacing:.08em; margin:2px 0 4px; }
.boarding-bars { width:116px; height:42px; background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px,#111 4px 5px,#fff 5px 8px,#111 8px 11px,#fff 11px 13px); border:1px solid #111; }
.flight-ticket, .flight-ticket * { color:#111 !important; }
.flight-ticket .btn-primary { color:#fff !important; }
.flight-ticket .btn-primary { color:#111 !important; background:#fff; border-color:#111; }

/* Integrated receipt-generator provider previews */
.provider-receipt { max-width:560px; margin:0 auto; overflow:hidden; border:1px solid #d7dee8; border-radius:16px; background:#fff; color:#111827; box-shadow:0 18px 44px rgba(15,23,42,.14); }
.provider-receipt-header, .cashapp-demo-top { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:22px 24px; border-bottom:1px solid #e5e7eb; }
.provider-receipt-header strong { font-size:32px; letter-spacing:-.08em; } .brand-blue { color:#003087; } .brand-sky { color:#009cde; }
.provider-receipt-header > span { color:#6b7280; font-size:12px; }
.provider-banner { display:flex; flex-direction:column; gap:3px; margin:18px 24px; padding:14px 16px; border-left:4px solid #2563eb; background:#eff6ff; color:#1e3a8a; }
.provider-banner.status-completed { border-color:#22c55e; background:#f0fdf4; color:#166534; } .provider-banner.status-pending { border-color:#f59e0b; background:#fffbeb; color:#92400e; } .provider-banner.status-failed { border-color:#ef4444; background:#fef2f2; color:#991b1b; } .provider-banner.status-refunded { border-color:#9ca3af; background:#f9fafb; color:#374151; }
.provider-amount { margin:0 24px 24px; padding:20px; border:1px solid #e5e7eb; border-radius:10px; background:#f9fafb; text-align:center; } .provider-amount small { display:block; color:#4b5563; } .provider-amount strong { display:block; margin-top:6px; color:#111827; font-size:38px; } .provider-amount em { color:#4b5563; font-size:18px; font-style:normal; }
.provider-receipt h4 { margin:0 24px 8px; border-bottom:2px solid #e5e7eb; padding-bottom:8px; color:#111827; font-size:17px; }
.provider-row { display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid #f1f5f9; padding:12px 24px; color:#64748b; font-size:13px; } .provider-row b { max-width:68%; color:#111827; text-align:right; overflow-wrap:anywhere; } .provider-row b small { display:block; margin-top:4px; color:#6b7280; font-weight:400; }
.provider-breakdown { display:grid; grid-template-columns:1fr auto; gap:10px 20px; margin:20px 24px 24px; border-top:1px solid #e5e7eb; padding-top:16px; color:#64748b; font-size:13px; } .provider-breakdown b,.provider-breakdown strong { color:#111827; text-align:right; } .provider-breakdown strong { border-top:2px solid #111827; padding-top:10px; }
.cashapp-demo-receipt { background:#000; color:#fff; border:0; } .cashapp-demo-top { border-color:#292929; font-size:20px; } .cashapp-demo-hero { padding:30px 24px 40px; text-align:center; } .cashapp-avatar { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 16px; border-radius:50%; background:#00d632; color:#000; font-size:25px; font-weight:800; } .cashapp-demo-hero strong { display:block; font-size:42px; } .cashapp-demo-hero p { margin:8px 0 0; color:#c7c7c7; } .cashapp-demo-hero small { display:block; margin-top:10px; color:#c7c7c7; } .cashapp-demo-sheet { border-radius:24px 24px 0 0; background:#171717; padding:24px 0 12px; } .cashapp-demo-sheet .provider-row { border-color:#303030; color:#aaa; } .cashapp-demo-sheet .provider-row b { color:#fff; } .cashapp-demo-status { display:block; margin:0 24px 10px; color:#00d632; }
.chime-demo-receipt { padding-bottom:20px; text-align:center; } .chime-demo-top { padding:22px 24px; text-align:left; font-size:26px; } .chime-demo-icon { display:grid; place-items:center; width:56px; height:56px; margin:24px auto 10px; border-radius:50%; background:#111827; color:#fff; font-size:26px; } .chime-demo-receipt h2 { margin:0; color:#111827; font-size:40px; } .chime-demo-receipt h3 { margin:4px 0; color:#111827; } .chime-demo-receipt > p { color:#64748b; } .chime-demo-rows { margin-top:22px; text-align:left; }
.provider-note { margin:14px auto 0; max-width:560px; } .receipt-simulator-preview > .sample-receipt-disclaimer { max-width:560px; margin:18px auto 0; }
@media print { .provider-receipt { box-shadow:none; } }

.sample-brand { display:flex; align-items:center; gap:8px; padding:12px 24px; border-bottom:1px solid #e5e7eb; color:#111827; font-size:12px; font-weight:800; letter-spacing:.04em; }
.sample-brand span { display:grid; place-items:center; width:28px; height:28px; border-radius:7px; background:#111827; color:#fff; font-size:10px; }
.sample-brand-dark { border-color:#292929; color:#fff; background:#000; } .sample-brand-dark span { background:#00d632; color:#000; }
.receipt-preview-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:560px; margin:16px auto 0; }
.receipt-preview-actions .btn { display:inline-flex; align-items:center; gap:7px; }

/* Apple Pay is the only receipt variant rendered as an iPhone screen. */
.iphone-editor { max-width:560px; margin:0 auto 14px; padding:16px; border:1px solid rgba(0,224,107,.28); border-radius:14px; background:#0b160f; color:#fff; }
.iphone-editor > div:first-child { display:flex; flex-direction:column; gap:3px; margin-bottom:12px; }
.iphone-editor > div:first-child span { color:#9eb3a5; font-size:12px; }
.iphone-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:380px; }
.iphone-editor-grid label { display:grid; gap:5px; color:#b4c2b9; font-size:11px; }
.iphone-editor-grid input,.iphone-editor-grid select { width:100%; min-width:0; height:36px; padding:0 9px; border:1px solid #294635; border-radius:8px; background:#07100a; color:#fff; font:inherit; font-size:12px; }
.iphone-mockup-wrap { display:grid; place-items:center; padding:20px 0 8px; background:radial-gradient(circle,#18231d 0,#0c0f0d 48%,transparent 72%); }
.iphone-mockup { display:none; }
.iphone-screen { position:relative; width:min(100%,390px); min-height:700px; overflow:hidden; padding:14px 20px 22px; border:1px solid #cfd5dc; border-radius:38px; background:linear-gradient(180deg,#f7f8fb 0%,#eef1f5 100%); color:#111827; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif; box-shadow:0 22px 50px rgba(0,0,0,.28); }
.iphone-status { display:flex; justify-content:space-between; align-items:center; padding:0 3px 8px; font-size:10px; font-weight:700; }
.iphone-island { position:absolute; top:8px; left:50%; width:88px; height:23px; transform:translateX(-50%); border-radius:20px; background:#050505; }
.iphone-nav { display:flex; justify-content:space-between; margin:8px 0 36px; color:#1475d1; font-size:14px; }
.applepay-wallet-title { margin:6px 0 28px; text-align:center; font-size:16px; font-weight:700; }
.iphone-wallet-merchant { display:grid; gap:6px; margin-bottom:18px; text-align:center; }
.iphone-wallet-merchant strong { font-size:20px; }
.iphone-wallet-merchant b { font-size:32px; letter-spacing:-.04em; }
.iphone-wallet-merchant span { color:#6b7280; font-size:12px; }
.iphone-amount { margin-top:25px; text-align:center; }
.iphone-amount small,.iphone-amount span { display:block; color:#6b7280; font-size:12px; }
.iphone-amount strong { display:block; margin:4px 0; font-size:30px; letter-spacing:-.04em; }
.iphone-check { display:grid; place-items:center; width:45px; height:45px; margin:25px auto 8px; border-radius:50%; background:#20a45b; color:#fff; font-size:28px; }
.iphone-approved { margin:0 0 18px; text-align:center; color:#168347; font-size:13px; font-weight:700; }
.iphone-detail-card { display:grid; gap:12px; padding:15px; border-radius:14px; background:#fff; box-shadow:0 2px 10px rgba(30,41,59,.08); }
.iphone-detail-card div { display:flex; justify-content:space-between; gap:12px; font-size:11px; }
.iphone-detail-card span { color:#6b7280; } .iphone-detail-card b { max-width:62%; text-align:right; overflow-wrap:anywhere; }
.iphone-watermark { margin-top:22px; text-align:center; color:#b23b3b; font-size:8px; font-weight:800; letter-spacing:.1em; }
.wallet-cleared { color:#168347 !important; }
.wallet-section-label { margin:22px 0 8px; color:#6b7280; font-size:12px; font-weight:700; }
.wallet-receipt-row { display:flex; align-items:center; gap:10px; padding:12px; border-radius:12px; background:#fff; box-shadow:0 2px 9px rgba(30,41,59,.07); font-size:11px; }
.wallet-receipt-row > div { min-width:0; flex:1; }
.wallet-receipt-row b,.wallet-receipt-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wallet-receipt-row small { margin-top:2px; color:#6b7280; }
.wallet-receipt-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:7px; background:#111827; color:#fff; font-size:15px; }
.wallet-report { margin:13px 0 0; padding:0; border:0; background:transparent; color:#1475d1; font:inherit; font-size:11px; }
.wallet-transaction { display:grid; gap:3px; margin-top:16px; padding:12px; border-radius:12px; background:#fff; font-size:10px; }
.wallet-transaction span { color:#6b7280; } .wallet-transaction b { overflow-wrap:anywhere; }
.imessage-screen { display:flex; flex-direction:column; min-height:760px; padding:0 0 15px; border-color:#202522; border-radius:0; background:#000; color:#fff; }
.imessage-screen .iphone-status { position:relative; flex:none; padding:10px 15px 8px; background:#000; color:#f6f7f8; }
.imessage-screen .iphone-status > span:first-child { font-weight:600; letter-spacing:-.03em; }
.iphone-island { display:flex; align-items:center; justify-content:flex-end; gap:9px; padding-right:15px; }
.island-orange-dot,.island-blue-dot { display:block; width:6px; height:6px; border-radius:50%; }
.island-orange-dot { background:#f5a400; box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.island-blue-dot { background:#111c62; box-shadow:0 0 0 1px rgba(70,90,180,.3); }
.ios-status-icons { display:flex; align-items:center; gap:5px; }
.ios-status-icons svg { display:block; fill:none; stroke:#f6f7f8; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ios-signal { width:14px; height:11px; fill:#f6f7f8 !important; stroke:none !important; }
.ios-wifi { width:15px; height:12px; }
.ios-battery { width:23px; height:13px; }
.ios-battery .battery-fill { fill:#f6f7f8; stroke:none; }
.ios-battery-percent { font-size:.82em; font-weight:600; letter-spacing:-.03em; }
.ios-battery { width:25px; height:13px; overflow:visible; }
.ios-battery .battery-shell { fill:#000; stroke:#f6f7f8; stroke-width:1.1; }
.ios-battery .battery-fill { fill:#f6f7f8; opacity:.98; }
.ios-battery .battery-number { fill:#111612; paint-order:stroke; stroke:#f6f7f8; stroke-width:.35; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; font-size:6px; font-weight:700; letter-spacing:-.1px; }
.imessage-contact { display:flex; align-items:center; gap:9px; min-height:68px; padding:8px 14px; border-bottom:1px solid #242a26; background:#111612; }
.imessage-back { display:grid; place-items:center; width:20px; color:#4c9df5; }
.imessage-back svg { width:10px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.imessage-avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 38% 28%,#f7f8f8 0 10%,#d9dcdd 34%,#aeb2b4 100%); color:#fff; box-shadow:inset 0 1px 2px rgba(255,255,255,.55),0 1px 2px rgba(0,0,0,.45); }
.imessage-avatar svg { width:27px; height:27px; fill:#fff; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.imessage-contact div { min-width:0; flex:1; text-align:center; }
.imessage-contact strong,.imessage-contact small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.imessage-contact strong { font-size:13px; } .imessage-contact small { margin-top:2px; color:#ddd; font-size:11px; }
.imessage-video { display:grid; place-items:center; width:25px; color:#4c9df5; }
.imessage-video svg { width:23px; height:20px; fill:currentColor; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.contact-chevron { color:#878b8f; font-size:15px; }
.imessage-thread { position:relative; flex:1; padding:20px 18px 100px; background:#000; }
.imessage-heading { margin-bottom:14px; text-align:center; color:#d7d7d7; font-size:13px; font-weight:700; }
.imessage-heading span { display:block; margin-top:3px; color:#8f8f8f; font-size:11px; font-weight:400; }
.imessage-incoming { width:max-content; margin:0 0 28px auto; padding:10px 15px; border-radius:20px 20px 5px 20px; background:#087ff5; color:#fff; font-size:18px; }
.apple-cash-bubble { position:relative; width:250px; min-height:192px; margin:20px 0 0 auto; padding:18px 22px 16px; border-radius:27px 27px 5px 27px; background:linear-gradient(145deg,#464749 0%,#38393b 54%,#303133 100%); color:#f5f5f5; box-shadow:0 2px 4px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.09); }
.apple-cash-bubble strong { display:block; color:#f2f2f2; font-size:14px; font-weight:500; }
.apple-cash-brand { display:inline-flex; align-items:center; gap:4px; }
.apple-cash-brand svg { width:13px; height:15px; fill:#f2f2f2; stroke:#f2f2f2; stroke-width:.4; vertical-align:-2px; }
.apple-cash-bubble b { display:block; margin-top:17px; color:#e5e7e9; font-size:66px; font-weight:300; letter-spacing:-.08em; line-height:1; text-align:center; text-shadow:1px 2px 2px #111; }
.apple-cash-bubble i { position:absolute; right:-1px; bottom:-13px; width:28px; height:22px; background:#2d2e30; clip-path:polygon(0 0,100% 0,100% 100%); }
.imessage-delivered { margin:7px 10px 0 auto; color:#8e8e93; font-size:12px; text-align:right; }
.imessage-composer { display:flex; align-items:center; gap:10px; padding:10px 13px 0; color:#aeb3b7; font-size:22px; }
.imessage-composer div { flex:1; height:40px; padding:7px 14px; border:1px solid #35383a; border-radius:22px; color:#777b7e; font-size:16px; }
.imessage-composer span:first-child { color:#c8cbcc; } .imessage-composer span:nth-child(2) { color:#c8cbcc; font-size:25px; }
.ios-camera,.ios-appstore,.ios-mic { display:grid; place-items:center; width:30px; height:30px; color:#c8cbcc !important; }
.ios-camera { border-radius:8px; color:#c7c9ca !important; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.ios-camera svg { width:27px; height:23px; fill:currentColor; stroke:#9ea2a5; stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
.ios-camera svg circle { fill:#303234; stroke:#bfc2c3; stroke-width:1.3; }
.ios-appstore { border-radius:50%; background:linear-gradient(145deg,#454749,#252729); color:#d2d4d5 !important; box-shadow:inset 0 1px 1px rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.45); }
.ios-appstore svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ios-mic { border-radius:50%; color:#bfc2c3 !important; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.ios-mic svg { width:15px; height:21px; fill:currentColor; stroke:#9ea2a5; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
.ios-mic svg path { fill:none; stroke:currentColor; stroke-width:1.5; }
.imessage-screen .iphone-watermark { flex:none; margin:13px 0 0; color:#c05050; }
@media(max-width:620px){ .iphone-editor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .iphone-mockup { transform:scale(.94); transform-origin:top center; margin-bottom:-30px; } }

/* Reference-matched portrait geometry: 556 x 988, like the supplied iMessage capture. */
.iphone-mockup-wrap { padding:18px 0 8px; background:transparent; }
.imessage-screen { width:min(100%,556px); aspect-ratio:556 / 988; min-height:0; height:auto; padding:0; border:1px solid #262826; border-radius:0; background:#000; box-shadow:0 20px 45px rgba(0,0,0,.32); }
.imessage-screen .iphone-status { height:7.7%; padding:1.5% 4.7% 1%; background:#111612; font-size:clamp(9px,1.8vw,13px); }
.imessage-screen .iphone-island { top:1%; width:16%; height:2.7%; }
.imessage-contact { height:8.1%; min-height:0; padding:1.2% 4.7%; gap:2.2%; }
.imessage-back { width:4.5%; }
.imessage-avatar { width:9%; height:auto; aspect-ratio:1; }
.imessage-contact div { font-size:clamp(10px,2vw,14px); }
.imessage-contact small { font-size:clamp(9px,1.8vw,12px); }
.imessage-video { width:6%; }
.imessage-thread { padding:3.7% 4.7% 0; }
.imessage-heading { margin-bottom:3.4%; font-size:clamp(10px,2vw,14px); }
.imessage-heading span { margin-top:.5%; font-size:clamp(9px,1.7vw,12px); }
.apple-cash-bubble { width:47.8%; min-height:0; aspect-ratio:266 / 193; margin:8.2% 0 0 auto; padding:3.2% 4%; border-radius:7.2% 7.2% 1.4% 7.2%; }
.apple-cash-bubble strong { font-size:clamp(9px,1.9vw,14px); }
.apple-cash-bubble b { margin-top:7%; font-size:clamp(35px,10.8vw,70px); }
.apple-cash-bubble i { bottom:-6.5%; width:11%; height:11%; }
.imessage-delivered { margin:1.3% 2.1% 0 auto; font-size:clamp(9px,1.8vw,12px); }
.imessage-composer { position:absolute; right:0; bottom:2.2%; left:0; height:6.2%; padding:0 4.7%; gap:2.5%; }
.imessage-composer div { height:100%; padding:1.6% 4%; font-size:clamp(11px,2.2vw,16px); }
.ios-camera,.ios-appstore,.ios-mic { width:7%; height:100%; }
.iphone-watermark { position:absolute; right:0; bottom:.3%; left:0; margin:0 !important; font-size:clamp(5px,.9vw,8px); opacity:.72; }