/* ═══════════════════════════════════════════════
   Rzzro v2 — Design System
   Purple · IBM Plex Mono · Light · Institutional
   ═══════════════════════════════════════════════ */

:root {
  --p:        #4F46E5;
  --ph:       #4338CA;
  --pl:       #EEF2FF;
  --ink:      #111827;
  --ink2:     #374151;
  --ink3:     #6B7280;
  --border:   #E5E7EB;
  --surf:     #F7F8FA;
  --white:    #FFFFFF;
  --mono:     'IBM Plex Mono', ui-monospace, monospace;
  --body:     'Inter', system-ui, -apple-system, sans-serif;
  --r:        4px;
  --success:  #059669;
  --danger:   #DC2626;
  --warning:  #D97706;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--body);background:var(--white);color:var(--ink);line-height:1.6;overflow-x:hidden}
::selection{background:var(--pl);color:var(--ink)}

/* ── Typography ── */
.font-mono{font-family:var(--mono)!important}
.text-accent{color:var(--p)}

/* ── Cards ── */
.card{background:var(--white);border:1px solid var(--border);border-radius:8px;transition:border-color .15s}
.card:hover{border-color:var(--p)}
.card-accent{border-color:var(--p)}

/* ── Buttons ── */
.btn{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:8px 20px;border-radius:6px;border:1px solid var(--border);cursor:pointer;transition:background .15s,color .15s,border-color .15s;text-align:center;text-decoration:none;font-weight:500;background:var(--white);color:var(--ink)}
.btn-primary{background:var(--p);color:#fff;border-color:var(--p)}
.btn-primary:hover{background:var(--ph)}
.btn-secondary{background:var(--pl);color:var(--p);border-color:transparent}
.btn-outline{background:transparent;color:var(--ink3);border-color:var(--border)}
.btn-outline:hover{color:var(--ink);border-color:var(--p)}

/* ── Tags ── */
.tag{font-family:var(--mono);font-size:9px;letter-spacing:.03em;text-transform:uppercase;padding:2px 8px;border-radius:4px;background:var(--pl);color:var(--p);font-weight:500;cursor:pointer;border:none;transition:background .15s}
.tag:hover{background:#DDE0FF}
.tag.active{background:var(--p);color:#fff}

/* ── Badges ── */
.badge-stable{display:inline-block;font-family:var(--mono);font-size:9px;padding:1px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.03em;background:#ECFDF5;color:var(--success);border:1px solid #A7F3D0}
.badge-watch{display:inline-block;font-family:var(--mono);font-size:9px;padding:1px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.03em;background:#FFFBEB;color:var(--warning);border:1px solid #FDE68A}
.badge-buywindow{display:inline-block;font-family:var(--mono);font-size:9px;padding:1px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.03em;background:var(--pl);color:var(--p);border:1px solid #C7D2FE}

/* ── Price colors ── */
.price-up{color:var(--success)}
.price-down{color:var(--danger)}

/* ── Data tables ── */
.data-table{background:var(--white);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.data-table .table-header{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:8px 16px;background:var(--surf);color:var(--ink2);border-bottom:1px solid var(--border);font-weight:600}
.data-table td.table-header{background:var(--surf);color:var(--ink2);font-weight:600}
.data-table .table-cell{padding:8px 16px;font-family:var(--body);font-size:13px;border-bottom:1px solid var(--border);color:var(--ink)}
.data-table tbody tr:nth-child(even){background:var(--surf)}
.data-table tbody tr:hover{background:var(--pl)}

/* ── Ticker ── */
#ticker-bar{height:24px;background:var(--white);border-bottom:1px solid var(--border);overflow:hidden;position:relative;z-index:40;font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--ink);line-height:24px;white-space:nowrap}
#ticker-bar .ticker-track{display:inline-flex;gap:40px;animation:ticker-scroll 60s linear infinite;will-change:transform}
#ticker-bar .ticker-track-inner{display:inline-flex;gap:40px}
#ticker-bar .ticker-item{display:inline-flex;gap:6px;align-items:baseline}
#ticker-bar .ticker-name{font-weight:500;color:var(--ink)}
#ticker-bar .ticker-price{color:var(--ink)}
#ticker-bar .ticker-chg.positive{color:var(--success)}
#ticker-bar .ticker-chg.negative{color:var(--danger)}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Animations ── */
@keyframes slideUpFade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.reveal{animation:slideUpFade .4s ease-out forwards}
.reveal-hidden{opacity:0;transform:translateY(16px)}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,var(--surf)25%,var(--border)50%,var(--surf)75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:4px;height:16px;margin-bottom:8px}

/* ── V3 Nav (shared) ── */
.nav-v3{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-v3 .page{max-width:1280px;margin:0 auto;padding:0 48px}
.nav-inner{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.nav-left{display:flex;align-items:center;gap:32px}
.nav-name{font-family:var(--mono);font-weight:600;font-size:.875rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.nav-v3 .nav-links{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.nav-v3 .nav-links a{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);text-decoration:none;transition:color .15s;position:relative}
.nav-v3 .nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:currentColor;transition:width .25s}
.nav-v3 .nav-links a:hover{color:var(--ink)}
.nav-v3 .nav-links a:hover::after{width:100%}
.nav-v3 .nav-links a.on{color:var(--ink)}
.nav-v3 .nav-links a.on::after{width:100%}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-right .signin{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);text-decoration:none;transition:color .15s}
.nav-right .signin:hover{color:var(--p)}
.nav-right .signup{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--p);color:#fff;padding:8px 18px;border-radius:4px;text-decoration:none;transition:background .25s,transform .15s}
.nav-right .signup:hover{background:var(--ph);transform:translateY(-1px)}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:4px}
.nav-toggle span{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform .15s,opacity .15s}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}
.nav-mobile{display:none;padding:16px 0 24px;border-top:1px solid var(--border);flex-direction:column;gap:12px}
.nav-mobile.open{display:flex}
.nav-mobile a{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);text-decoration:none;padding:8px 0;transition:color .15s}
.nav-mobile a:hover{color:var(--p)}

/* ── Footer V3 ── */
footer{background:var(--surf);padding:40px 56px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);gap:24px}
.f-logo{font-family:var(--mono);font-weight:600;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:6px}
.f-dot{width:6px;height:6px;border-radius:50%;background:var(--p)}
.f-tag{font-family:var(--mono);font-size:9px;color:var(--ink3);margin-top:4px;letter-spacing:.03em}
.f-links{display:flex;gap:24px;list-style:none;flex-wrap:wrap}
.f-links a{font-family:var(--mono);font-size:10px;color:var(--ink3);text-decoration:none;letter-spacing:.06em;text-transform:uppercase;transition:color .15s}
.f-links a:hover{color:var(--p)}
.f-copy{font-family:var(--mono);font-size:9px;color:var(--ink3)}

/* ── Page layout ── */
.page-wrap{max-width:1280px;margin:0 auto;padding:0 48px}

/* ── Accent bar hero ── */
.accent-hero{border-left:4px solid var(--p);padding-left:24px;margin:48px 0 32px}
.accent-hero .label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--p);margin-bottom:8px}
.accent-hero h1{font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin-bottom:12px}
.accent-hero h1 span{background:linear-gradient(135deg,var(--ink)50%,var(--p)100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.accent-hero p{font-size:16px;color:var(--ink3);max-width:600px;line-height:1.6}

/* ── Section page header ── */
.section-header{padding:32px 0 24px}
.section-header .label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--p);margin-bottom:8px}
.section-header h2{font-size:28px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.section-header p{color:var(--ink3);max-width:600px}

/* ── Mobile ── */
@media(max-width:768px){
  .nav-v3 .page{padding:0 20px}
  .nav-v3 .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-right .signup{padding:8px 16px}
  footer{flex-direction:column;align-items:flex-start;padding:28px 20px}
  .f-links{gap:14px}
  .accent-hero{margin:32px 0 24px;padding-left:16px}
  .accent-hero h1{font-size:30px}
  .section-header h2{font-size:24px}
  .page-wrap{padding:0 20px}
  #ticker-bar{display:none!important}
}

@media(max-width:640px){
  .accent-hero h1{font-size:26px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  #ticker-bar .ticker-track{animation:none!important}
  .reveal-hidden{opacity:1!important;transform:none!important}
  .skeleton{animation:none!important;background:var(--surf)!important}
}

@media print{
  body{background:#fff!important;color:#111!important}
  #ticker-bar{display:none!important}
  .card{border:1px solid #ddd!important}
}