:root {
  color-scheme: dark;
  --bg: #07080d;
  --panel: #10121b;
  --panel2: #161925;
  --text: #f8f9ff;
  --muted: #a0a4b5;
  --line: #2b2f3e;
  --pink: #ff2d67;
  --cyan: #19d9ff;
  --green: #32e6a1;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  line-height: 1.65;
  background:
    radial-gradient(circle at 8% 4%, rgba(255,45,103,.18), transparent 29%),
    radial-gradient(circle at 95% 8%, rgba(25,217,255,.14), transparent 31%),
    var(--bg);
}

a { color: var(--cyan); }
button, input, textarea { font: inherit; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px clamp(18px, 4vw, 54px);
  border-bottom: 1px solid var(--line);
  background: rgba(7,8,13,.82);
  backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; font-size: 20px; font-weight: 950; }
.brand-mark { width: 40px; height: 40px; display: block; object-fit: contain; filter: drop-shadow(0 12px 32px rgba(255,45,103,.25)); }
.header-links { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.header-links a { padding: 9px 12px; border-radius: 12px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 800; }
.header-links a:hover { color: #fff; background: rgba(255,255,255,.07); }

.legal-layout { width: min(1160px, calc(100% - 28px)); margin: 0 auto; padding: clamp(40px,8vw,92px) 0 80px; display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 42px; }
.legal-nav { position: sticky; top: 100px; align-self: start; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: rgba(16,18,27,.84); }
.legal-nav b { display: block; margin-bottom: 11px; color: var(--cyan); font-size: 12px; letter-spacing: .1em; }
.legal-nav a { display: block; padding: 9px 10px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 750; }
.legal-nav a:hover, .legal-nav a.active { color: #fff; background: rgba(255,255,255,.07); }
.legal-card { min-width: 0; padding: clamp(24px,5vw,60px); border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(145deg,rgba(18,20,31,.97),rgba(10,12,19,.97)); box-shadow: 0 35px 100px rgba(0,0,0,.34); }
.eyebrow { margin: 0 0 12px; color: var(--cyan); font-size: 11px; font-weight: 950; letter-spacing: .14em; }
.legal-card h1 { margin: 0; max-width: 850px; font-size: clamp(40px,7vw,72px); line-height: .96; letter-spacing: -.065em; }
.lead { max-width: 780px; margin: 22px 0 34px; color: #c7cad6; font-size: 17px; }
.updated { display: inline-flex; margin-bottom: 32px; padding: 7px 10px; border: 1px solid rgba(50,230,161,.3); border-radius: 999px; color: #8ff1c9; background: rgba(50,230,161,.08); font-size: 11px; font-weight: 900; }
.legal-card section { padding: 28px 0; border-top: 1px solid var(--line); scroll-margin-top: 105px; }
.legal-card h2 { margin: 0 0 10px; font-size: 25px; letter-spacing: -.035em; }
.legal-card h3 { margin: 22px 0 6px; font-size: 17px; }
.legal-card p, .legal-card li { color: #b8bccb; }
.legal-card li + li { margin-top: 7px; }
.callout { margin: 20px 0; padding: 18px 20px; border: 1px solid rgba(25,217,255,.25); border-radius: 16px; color: #d9f9ff; background: rgba(25,217,255,.07); }
.danger-callout { border-color: rgba(255,45,103,.28); background: rgba(255,45,103,.08); }

.form-card { width: min(620px, calc(100% - 28px)); margin: clamp(36px,8vw,92px) auto; padding: clamp(24px,5vw,44px); border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: 0 32px 100px rgba(0,0,0,.42); }
.form-card-wide { width: min(780px, calc(100% - 28px)); }
.form-icon { width: 70px; height: 70px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 23px; background: linear-gradient(135deg,rgba(255,45,103,.22),rgba(25,217,255,.2)); font-size: 29px; font-weight: 950; }
.form-icon img { width: 54px; height: 54px; object-fit: contain; }
.form-card h1 { margin: 0; font-size: clamp(34px,7vw,52px); line-height: 1; letter-spacing: -.06em; }
.form-card > p { color: var(--muted); }
.field { display: grid; gap: 7px; margin-top: 17px; }
.field label { font-size: 12px; font-weight: 900; }
.field input, .field textarea { width: 100%; min-height: 56px; padding: 0 15px; border: 1px solid var(--line); border-radius: 16px; outline: none; color: #fff; background: #191c27; }
.field textarea { min-height: 130px; padding-block: 13px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(25,217,255,.09); }
.code-input { text-align: center; font-size: 26px; font-weight: 950; letter-spacing: .35em; }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 18px; border-radius: 17px; color: #fff; text-decoration: none; font-weight: 950; cursor: pointer; }
.primary { width: 100%; margin-top: 20px; border: 0; background: linear-gradient(110deg,var(--pink),#ff6256); box-shadow: 0 18px 45px rgba(255,45,103,.23); }
.secondary { border: 1px solid var(--line); background: #191c27; }
.secondary:hover { background: #202431; }
.danger-button { background: linear-gradient(110deg,#d82d50,#ff554f); }
.primary:disabled { opacity: .6; cursor: wait; }
.form-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 20px; }
.form-actions .primary { margin: 0; }
.status { display: none; margin-top: 18px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; color: #c7cad6; background: var(--panel2); }
.status.show { display: block; }
.status.success { border-color: rgba(50,230,161,.32); color: #92f1cc; }
.status.error { border-color: rgba(255,45,103,.35); color: #ff9ab5; }
.spinner { display: inline-block; width: 18px; height: 18px; margin-right: 9px; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; vertical-align: -4px; animation: spin .7s linear infinite; }
.check { width: 82px; height: 82px; display: grid; place-items: center; margin: 0 auto 20px; border: 1px solid rgba(50,230,161,.42); border-radius: 50%; color: var(--green); background: rgba(50,230,161,.12); font-size: 42px; }
.center { text-align: center; }
.mini-links { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; font-size: 12px; }
.mini-links a { color: var(--muted); }
.page-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 7px 10px; border: 1px solid rgba(25,217,255,.25); border-radius: 999px; color: #8beaff; background: rgba(25,217,255,.07); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.page-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.feature-card { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel2); }
.feature-card b, .feature-card span { display: block; }
.feature-card span { margin-top: 5px; color: var(--muted); font-size: 13px; }
.timeline { display: grid; gap: 10px; margin: 22px 0; }
.timeline-item { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 11px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel2); }
.timeline-item > span:first-child { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--cyan); background: rgba(25,217,255,.09); font-weight: 950; }
.timeline-item b, .timeline-item small { display: block; }
.timeline-item small { margin-top: 4px; color: var(--muted); line-height: 1.5; }
.status-panel { padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel2); }
.status-panel h2 { margin: 0 0 7px; font-size: 22px; }
.status-panel p { margin: 0; color: var(--muted); }
.loading-screen { display: grid; place-items: center; min-height: 55vh; text-align: center; }
.loading-screen .spinner { width: 34px; height: 34px; margin: 0 0 16px; border-width: 3px; }
.loading-screen p { color: var(--muted); }

/* Vyral+ standalone experience */
.plus-standalone { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:clamp(34px,7vw,82px) 0 72px; }
.plus-standalone-hero { position:relative; isolation:isolate; overflow:hidden; min-height:660px; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr); gap:54px; align-items:center; padding:clamp(28px,5vw,64px); border:1px solid rgba(255,255,255,.12); border-radius:38px; background:radial-gradient(circle at 87% 14%,rgba(32,217,255,.17),transparent 30%),radial-gradient(circle at 8% 86%,rgba(255,45,103,.22),transparent 34%),linear-gradient(145deg,#151321,#0d1018 58%,#0a1419); box-shadow:0 44px 140px rgba(0,0,0,.38); }
.plus-standalone-hero::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.42; 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:48px 48px; mask-image:linear-gradient(90deg,#000,transparent 78%); }
.plus-standalone-copy { position:relative; z-index:2; }
.plus-status { display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid rgba(101,240,190,.24); border-radius:999px; color:#8ff1c9; background:rgba(50,230,161,.075); font-size:10px; font-weight:950; letter-spacing:.12em; }
.plus-status i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 16px var(--green); }
.plus-standalone h1 { margin:23px 0 18px; font-size:clamp(54px,8vw,96px); line-height:.87; letter-spacing:-.082em; }
.plus-standalone-copy > p { max-width:630px; margin:0; color:#c0c3d0; font-size:17px; line-height:1.65; }
.plus-price { display:flex; align-items:center; gap:15px; margin-top:28px; }
.plus-price b { font-size:42px; line-height:1; letter-spacing:-.055em; }
.plus-price span { color:#858a9d; font-size:11px; font-weight:750; line-height:1.35; }
.plus-purchase { min-height:58px; display:inline-flex; align-items:center; justify-content:center; gap:12px; margin-top:24px; padding:0 24px; border:0; border-radius:17px; color:#fff; background:linear-gradient(110deg,#ff2d67,#ff615b); box-shadow:0 20px 48px rgba(255,45,103,.27); font-weight:950; cursor:pointer; transition:transform .2s,box-shadow .2s; }
.plus-purchase:hover { transform:translateY(-2px); box-shadow:0 24px 60px rgba(255,45,103,.34); }
.plus-purchase svg { width:20px; height:20px; }
.plus-standalone-copy > small { display:block; margin-top:11px; color:#6f7384; font-size:10px; }
.plus-showcase { position:relative; min-height:430px; }
.plus-showcase-glow { position:absolute; inset:8% 4% 0; border-radius:50%; background:conic-gradient(from 200deg,rgba(255,45,103,.55),rgba(139,92,246,.48),rgba(25,217,255,.48),rgba(255,45,103,.55)); filter:blur(70px); opacity:.62; }
.plus-showcase-card { position:absolute; display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.15); background:linear-gradient(145deg,rgba(38,33,62,.92),rgba(14,17,28,.92)); box-shadow:0 35px 90px rgba(0,0,0,.44); backdrop-filter:blur(20px); }
.card-back { width:58%; height:215px; right:0; top:12px; padding:24px; border-radius:28px; transform:rotate(9deg); color:#cbbcff; }
.card-back svg { width:32px; height:32px; margin-bottom:auto; }
.card-back span { font-size:10px; font-weight:950; letter-spacing:.12em; }
.card-main { width:76%; min-height:350px; left:3%; bottom:0; justify-content:flex-end; padding:32px; border-radius:34px; transform:rotate(-5deg); }
.plus-gem { position:absolute; top:32px; left:32px; display:grid; place-items:center; width:76px; height:76px; border-radius:25px; color:#fff; background:linear-gradient(135deg,#ff2d67,#8f5cff 55%,#20dfff); box-shadow:0 22px 60px rgba(132,80,255,.35); }
.plus-gem svg { width:34px; height:34px; }
.card-main > b { font-size:46px; line-height:1; letter-spacing:-.06em; }
.card-main > span { margin-top:7px; color:#9599aa; font-size:13px; font-weight:750; }
.plus-showcase-bars { display:grid; gap:7px; margin-top:25px; }
.plus-showcase-bars i { height:7px; border-radius:999px; background:rgba(255,255,255,.09); }
.plus-showcase-bars i:first-child { width:100%; background:linear-gradient(90deg,#ff2d67,#9a5cff,#20dfff); }
.plus-showcase-bars i:nth-child(2) { width:72%; }
.plus-showcase-bars i:nth-child(3) { width:45%; }
.plus-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-top:16px; }
.plus-benefits article { min-height:230px; padding:25px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg,rgba(22,24,36,.95),rgba(13,15,23,.95)); }
.plus-benefits article > svg { width:25px; height:25px; color:#cbb5ff; }
.plus-benefits b { display:block; margin-top:38px; font-size:19px; }
.plus-benefits p { margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
.plus-disclosure { display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; margin-top:16px; padding:24px; border:1px solid rgba(50,230,161,.2); border-radius:24px; background:rgba(50,230,161,.055); }
.plus-disclosure > svg { width:28px; height:28px; color:#66efbc; }
.plus-disclosure b { font-size:18px; }
.plus-disclosure p { margin:5px 0 0; color:#a9afbc; }
.plus-modal { position:fixed; z-index:100; inset:0; display:none; place-items:center; padding:18px; background:rgba(0,0,0,.72); backdrop-filter:blur(18px); }
.plus-modal.show { display:grid; }
.plus-modal > section { position:relative; width:min(560px,100%); padding:34px; border:1px solid var(--line); border-radius:30px; background:#10121b; box-shadow:0 45px 150px rgba(0,0,0,.72); }
.plus-modal h2 { margin:9px 0 13px; padding-right:42px; font-size:clamp(32px,6vw,48px); line-height:1; letter-spacing:-.055em; }
.plus-modal p { color:#b9bdca; }
.plus-modal .primary { margin-top:20px; }
.plus-modal-icon { display:grid; place-items:center; width:64px; height:64px; margin-bottom:18px; border-radius:21px; color:#71eaff; background:rgba(25,217,255,.09); }
.plus-modal-icon svg { width:28px; height:28px; }
.plus-modal-close { position:absolute; top:17px; right:17px; display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:14px; color:#fff; background:rgba(255,255,255,.05); cursor:pointer; }
.plus-modal-close svg { width:19px; height:19px; }
.plus-modal-open { overflow:hidden; }

@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 800px) {
  .site-header { padding: 13px 15px; }
  .header-links a:not(:last-child) { display: none; }
  .legal-layout { display: block; padding-top: 25px; }
  .legal-nav { position: static; display: flex; gap: 5px; overflow: auto; margin-bottom: 14px; }
  .legal-nav b { display: none; }
  .legal-nav a { white-space: nowrap; }
  .legal-card { border-radius: 24px; }
  .legal-card h1 { font-size: 43px; }
  .form-card { margin-top: 24px; }
  .plus-standalone { width:min(100% - 20px,720px); padding:18px 0 60px; }
  .plus-standalone-hero { min-height:0; grid-template-columns:1fr; gap:28px; padding:28px 22px; border-radius:28px; }
  .plus-standalone h1 { font-size:clamp(50px,15vw,72px); }
  .plus-showcase { min-height:360px; }
  .plus-benefits { grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px) {
  .form-actions, .feature-grid { grid-template-columns: 1fr; }
  .form-card { border-radius: 22px; }
  .header-links a { display: none !important; }
  .plus-showcase { min-height:300px; }
  .card-back { height:165px; }
  .card-main { min-height:260px; padding:24px; }
  .plus-gem { width:60px; height:60px; top:24px; left:24px; border-radius:20px; }
  .plus-gem svg { width:27px; height:27px; }
  .card-main > b { font-size:37px; }
  .plus-benefits { grid-template-columns:1fr; }
  .plus-benefits article { min-height:0; }
  .plus-benefits b { margin-top:24px; }
  .plus-disclosure { grid-template-columns:1fr; }
  .plus-modal { align-items:end; padding:0; }
  .plus-modal > section { width:100%; padding:28px 20px calc(22px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .spinner { animation-duration: 1.5s; }
}