/* ============================================================
   SPLENDOR — CEO redesign, ported faithfully as a scoped island.
   Everything lives under `.csr` so it cannot leak into the rest
   of the site. shadcn tokens are HSL triplets (so our Tailwind
   `hsl(var(--token))` utilities + opacity variants render the
   CEO palette); brand-* are full oklch (used in inline styles
   and as literal oklch in tailwind.config).
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");

@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes rotate-border { to { --angle: 360deg; } }
@keyframes live-pulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 oklch(0.74 0.16 165 / 0.5); } 50% { opacity:.6; box-shadow:0 0 0 4px oklch(0.74 0.16 165 / 0); } }
@keyframes csr-shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes csr-marquee { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
@keyframes csr-fade-in-up { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes csr-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes mesh-drift { 0%,100% { transform:translate3d(0,0,0) scale(1); opacity:1; } 50% { transform:translate3d(2%,-2%,0) scale(1.08); opacity:.85; } }

.csr {
  /* shadcn tokens — HSL triplets (Tailwind: hsl(var(--token))) */
  --background: 229 78% 1%;
  --foreground: 240 0% 97%;
  --card: 227 68% 1%;
  --card-foreground: 240 0% 97%;
  --popover: 227 68% 1%;
  --popover-foreground: 240 0% 97%;
  --primary: 205 100% 50%;
  --primary-foreground: 0 0% 99%;
  --secondary: 223 51% 5%;
  --secondary-foreground: 120 0% 93%;
  --muted: 221 42% 6%;
  --muted-foreground: 220 8% 54%;
  --accent: 185 100% 44%;
  --accent-foreground: 229 78% 1%;
  --destructive: 0 85% 62%;
  --destructive-foreground: 240 0% 97%;
  --border: 221 28% 10%;
  --input: 223 51% 5%;
  --ring: 205 100% 50%;
  --radius: 0.75rem;

  /* brand spectrum — full oklch (inline var() use) */
  --brand-blue: oklch(0.62 0.20 255);
  --brand-cyan: oklch(0.80 0.14 200);
  --brand-teal: oklch(0.74 0.14 175);
  --brand-indigo: oklch(0.58 0.20 270);
  --brand-amber: oklch(0.80 0.14 75);
  --brand-rose: oklch(0.68 0.18 15);

  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
  min-height: 100vh;
}


.csr .font-mono, .csr code, .csr pre { font-family: "JetBrains Mono", ui-monospace, monospace; }
.csr ::selection { background: oklch(0.65 0.19 250 / 0.35); color: hsl(var(--foreground)); }
.csr * { border-color: hsl(var(--border)); }

/* ---- gradient text ---- */
.csr .text-gradient { background:linear-gradient(135deg,oklch(0.99 0 0),oklch(0.72 0.04 265));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; }
.csr .text-gradient-brand { background:linear-gradient(120deg,oklch(0.80 0.14 200),oklch(0.62 0.20 255) 55%,oklch(0.62 0.20 285));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; }
.csr .text-gradient-teal { background:linear-gradient(120deg,oklch(0.82 0.14 185),oklch(0.74 0.16 165));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; }

/* ---- primary CTA (blue → violet pill) ---- */
.csr .btn-brand {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; color:hsl(var(--primary-foreground));
  border-radius:9999px;
  background:linear-gradient(120deg,oklch(0.62 0.20 255),oklch(0.58 0.20 285));
  box-shadow:0 8px 30px oklch(0.62 0.20 255 / 0.28),0 4px 14px oklch(0.58 0.20 285 / 0.18);
  transition:opacity .2s ease;
}
.csr .btn-brand:hover { opacity:.9; }
.csr .btn-brand-teal {
  background:linear-gradient(120deg,oklch(0.74 0.14 175),oklch(0.62 0.20 255));
  box-shadow:0 8px 30px oklch(0.74 0.14 175 / 0.28),0 4px 14px oklch(0.62 0.20 255 / 0.18);
}

/* ---- glows ---- */
.csr .glow-blue { box-shadow:0 0 80px -20px oklch(0.62 0.20 255 / 0.45); }
.csr .glow-cyan { box-shadow:0 0 80px -20px oklch(0.80 0.14 200 / 0.4); }

/* ---- glass ---- */
.csr .glass { background:oklch(0.09 0.018 265 / 0.7); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }

/* ---- grid + mesh + aurora ---- */
.csr .grid-pattern { background-image:linear-gradient(oklch(0.16 0.02 265) 1px,transparent 1px),linear-gradient(90deg,oklch(0.16 0.02 265) 1px,transparent 1px); background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,black 30%,transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,black 30%,transparent 75%); }
.csr .hero-mesh { background:radial-gradient(ellipse 50% 45% at 12% 8%,oklch(0.62 0.20 255 / 0.30),transparent 60%),radial-gradient(ellipse 45% 40% at 88% 0%,oklch(0.80 0.14 200 / 0.24),transparent 60%),radial-gradient(ellipse 55% 50% at 70% 95%,oklch(0.58 0.20 285 / 0.20),transparent 65%),radial-gradient(ellipse 40% 35% at 5% 80%,oklch(0.74 0.14 175 / 0.16),transparent 60%); }
.csr .aurora { background:conic-gradient(from 180deg at 50% 50%,oklch(0.62 0.20 255 / 0.18),oklch(0.80 0.14 200 / 0.16),oklch(0.74 0.14 175 / 0.14),oklch(0.58 0.20 285 / 0.18),oklch(0.62 0.20 255 / 0.18)); filter:blur(70px); }
.csr .mesh-animate { animation:mesh-drift 14s ease-in-out infinite; }

/* ---- premium card ---- */
.csr .card-premium { background:linear-gradient(180deg,oklch(0.11 0.02 265),oklch(0.08 0.018 265)); border:1px solid oklch(0.18 0.02 265); transition:all .4s cubic-bezier(.4,0,.2,1); }
.csr .card-premium:hover { border-color:oklch(0.32 0.06 255); transform:translateY(-3px); }

/* ---- animated conic border ---- */
.csr .border-animated { position:relative; }
.csr .border-animated::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--angle),transparent 55%,oklch(0.62 0.20 255 / 0.7),oklch(0.80 0.14 200 / 0.7),transparent 85%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:rotate-border 6s linear infinite; pointer-events:none; }

/* ---- misc fx ---- */
.csr .live-pulse { animation:live-pulse 2s ease-in-out infinite; }
.csr .shimmer { background:linear-gradient(90deg,transparent 0%,oklch(1 0 0 / 0.04) 50%,transparent 100%); background-size:200% 100%; animation:csr-shimmer 6s ease-in-out infinite; }
.csr .marquee-track { animation:csr-marquee 30s linear infinite; }
.csr .number-highlight { font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.csr .animate-fade-in-up { animation:csr-fade-in-up .6s ease-out forwards; }
.csr .animate-float { animation:csr-float 6s ease-in-out infinite; }

/* ── Polish: number glow — brand-colored stats feel screen-lit, not flat ── */
.csr .text-brand-cyan  { text-shadow: 0 0 36px oklch(0.80 0.14 200 / 0.28); }
.csr .text-brand-blue  { text-shadow: 0 0 36px oklch(0.62 0.20 255 / 0.30); }
.csr .text-brand-teal  { text-shadow: 0 0 36px oklch(0.74 0.14 175 / 0.26); }
.csr .text-brand-indigo{ text-shadow: 0 0 36px oklch(0.58 0.20 270 / 0.28); }
.csr .text-brand-amber { text-shadow: 0 0 36px oklch(0.80 0.14 75  / 0.22); }

/* ── Polish: inner top-edge light on section cards — depth without shadows ── */
.csr #products .rounded-3xl,
.csr #solutions .rounded-2xl,
.csr #how-it-works .rounded-2xl,
.csr #security .rounded-2xl,
.csr #tender .rounded-3xl,
.csr #comparison .cmp-adv-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 1px 0 rgba(0,0,0,0.12);
}
.csr #comparison .cmp-adv-card:hover {
  border-color: color-mix(in oklch, var(--cmp-accent) 32%, hsl(var(--border)));
}
.csr #comparison .rounded-2xl,
.csr #vault-feature .rounded-xl,
.csr #download .rounded-2xl {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 1px 0 rgba(0,0,0,0.12);
}

/* ── Polish: .glass gets a stronger inner rim light ── */
.csr .glass {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.15), 0 24px 56px -14px rgba(0,0,0,0.45);
}

/* ── Polish: primary gradient CTA button — glow bloom + letter-spacing lift ── */
.csr a[style*="linear-gradient"][style*="oklch(0.62"] {
  transition: letter-spacing 0.28s ease, box-shadow 0.28s ease, opacity 0.18s ease, transform 0.18s ease;
}
.csr a[style*="linear-gradient"][style*="oklch(0.62"]:hover {
  letter-spacing: 0.012em;
  box-shadow: 0 0 0 1px oklch(0.62 0.20 255 / 0.5), 0 8px 48px -8px oklch(0.62 0.20 255 / 0.55);
}

/* ── Polish: tighter tracking on number values for precision feel ── */
.csr .number-highlight {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.028em;
}

/* ── Hero wallet showcase: mobile app + web dashboard, both fully visible ── */
.csr .hero-wallet-showcase {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  gap: 1.25rem;
  padding-bottom: 0.25rem;
  overflow: visible;
}
@media (min-width: 640px) {
  .csr .hero-wallet-showcase { gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .csr .hero-wallet-showcase { justify-content: center; }
}
@media (max-width: 639px) {
  .csr .hero-wallet-showcase {
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
  }
}
.csr .hero-wallet-showcase .hero-phone {
  position: relative;
  z-index: 2;
  flex: none;
  width: min(48vw, 200px);
  aspect-ratio: 9 / 19.4;
  padding: 7px;
  border-radius: 30px;
  background: linear-gradient(160deg, #26262c, #0c0c10);
  box-shadow: 0 40px 80px -28px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
@media (min-width: 640px) {
  .csr .hero-wallet-showcase .hero-phone { width: 200px; }
}
@media (min-width: 1024px) {
  .csr .hero-wallet-showcase .hero-phone { width: 214px; }
}
.csr .hero-wallet-showcase .hero-phone .hero-phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 16px;
  border-radius: 0 0 12px 12px;
  background: #000;
  z-index: 2;
  pointer-events: none;
}
.csr .hero-wallet-showcase .hero-phone .hero-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
}
.csr .hero-wallet-showcase .hero-phone .hero-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.csr .hero-wallet-showcase .hero-wallet-card {
  position: relative;
  z-index: 1;
  flex: none;
  margin-left: 0;
  margin-bottom: 0.5rem;
}
@media (max-width: 639px) {
  .csr .hero-wallet-showcase .hero-wallet-card { margin-bottom: 0; }
}