/* ============================================================
   RONEX — shared design system
   Space Grotesk (display/body) × JetBrains Mono (technical)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* surfaces */
  --bg:        #07080B;
  --bg-1:      #0A0C12;
  --panel:     #0C1018;
  --panel-2:   #10172A;
  --panel-3:   #141C32;

  /* lines */
  --line:        rgba(255,255,255,0.07);
  --line-2:      rgba(255,255,255,0.12);
  --line-violet: rgba(121,97,255,0.32);

  /* brand */
  --violet:     #7961FF;
  --violet-br:  #9A87FF;
  --violet-dim: rgba(121,97,255,0.14);
  --blue:       #3E8BFF;
  --blue-dim:   rgba(62,139,255,0.12);

  /* accent (overridable via tweaks) */
  --accent:     var(--violet);
  --accent-br:  var(--violet-br);
  --accent-dim: var(--violet-dim);
  --accent-rgb: 121,97,255;

  /* text */
  --text:    #EEF0F6;
  --muted:   #9CA2B4;
  --muted-2: #8A90A4;
  --faint:   #3A3F50;

  /* metal */
  --metal: linear-gradient(180deg,#E9ECF5 0%,#AEB4C7 48%,#8E94A8 52%,#D6DAE6 100%);

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 64px);

  --font:         'Inter', system-ui, sans-serif;          /* body / UI — legibility-first */
  --font-display: 'Space Grotesk', system-ui, sans-serif;  /* display headings — brand voice */
  --mono:         'JetBrains Mono', ui-monospace, monospace;

  --motion: 1; /* tweakable motion scalar */

  /* spacing scale — one consistent vertical rhythm */
  --s-section: clamp(76px, 8.5vw, 124px);  /* section top/bottom padding */
  --s-tight:   clamp(52px, 6vw, 84px);     /* compact sections */
  --s-head:    clamp(34px, 4vw, 56px);     /* header → content gap */
  --s-lead:    clamp(20px, 2.2vw, 26px);   /* heading → lead gap */
  --s-block:   clamp(28px, 3vw, 40px);     /* block → block gap */
  --radius:    8px;  /* softened from 4px — modern, approachable surfaces */
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
  letter-spacing: 0; /* body/UI: neutral tracking for readability (tight tracking kept on display headings) */
}

::selection { background: var(--accent); color: #fff; }

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; }
ul { list-style: none; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); width: 100%; }
.section { position: relative; padding-block: var(--s-section); }
.section--tight { position: relative; padding-block: var(--s-tight); }

/* ---------- type ---------- */
.mono {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-br);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.eyebrow--center::before { display: none; }

/* headings: display typeface + bold weight so they rank clearly above Inter body */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }

.display {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 84px); /* reduced from max 104px/7.4vw — was overpowering on wide screens */
  font-weight: 600; /* size carries the hero — keep it a touch lighter than section heads */
  line-height: 1.02; /* slightly looser than 0.98 so multi-line heroes don't crowd */
  letter-spacing: -0.045em;
}
.h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4.6vw, 60px); letter-spacing: -0.035em; line-height: 1.0; }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; }
.lead {
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: -0.005em;
}
.lead b, .lead strong { color: var(--text); font-weight: 600; }
.measure { max-width: 56ch; }
.measure-sm { max-width: 44ch; }

.text-grad {
  /* white-weighted so the accent reads as a refined tail, not a full purple wash (keeps legibility + enterprise tone) */
  background: linear-gradient(115deg,#fff 44%, var(--accent-br) 90%, var(--blue));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- buttons ---------- */
.btn {
  --bh: 52px;
  display: inline-flex; align-items: center; gap: 10px;
  height: var(--bh); padding: 0 26px;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 8px; cursor: pointer; border: 1px solid transparent;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), background .25s, border-color .25s, color .25s, box-shadow .25s;
  white-space: nowrap; position: relative; overflow: hidden;
}
.btn svg { width: 15px; height: 15px; transition: transform .3s; }
.btn:hover svg { transform: translateX(4px); }
.btn-primary {
  /* WCAG AA: white 13px label needs >=4.5:1. Raw --accent (#7961FF) is only 4.23:1.
     Derive a slightly deeper fill from --accent so the tweaks-panel accent still themes it. */
  background: color-mix(in srgb, var(--accent) 88%, #000); color: #fff; /* ~5.27:1 on white text */
  box-shadow: 0 0 0 1px var(--accent), 0 12px 40px -12px rgba(var(--accent-rgb),0.7);
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 94%, #000); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--accent-br), 0 18px 50px -12px rgba(var(--accent-rgb),0.85); } /* ~4.70:1 — lifts without dropping contrast under white text */
.btn:active { transform: scale(0.97); transition-duration: 150ms; }
.btn-primary:active { transform: scale(0.97); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px -8px rgba(var(--accent-rgb),0.6); }
.btn-ghost:active { transform: scale(0.97); }
.btn.is-loading { pointer-events: none; opacity: 0.85; }
.btn.is-loading svg.btn-spin { animation: btnspin 0.8s linear infinite; }
@keyframes btnspin { to { transform: rotate(360deg); } }
.btn-ghost {
  background: rgba(255,255,255,0.02); color: var(--text);
  border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--accent); color: #fff; background: var(--accent-dim); transform: translateY(-2px); }
.btn-sm { --bh: 42px; padding: 0 18px; font-size: 12px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-br);
  transition: gap .25s, color .25s;
}
.link-arrow svg { width: 14px; height: 14px; }
.link-arrow:hover { gap: 14px; color: #fff; }

/* ---------- decorative ---------- */
.grid-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 78%);
}
.glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(80px); opacity: 0.5; z-index: 0;
}
.hr-x {
  height: 1px; border: 0; width: 100%;
  background: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);
}
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 2px;
  background: rgba(255,255,255,0.015);
}
.tag .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* ---------- reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  .btn:active { transform: none; }
}

/* tabular figures for stats */
.hero-meta .m-v, .k-v, .spec .s-v, [data-count] { font-variant-numeric: tabular-nums; }
.hero-meta .m-v.count-done { animation: statpulse 600ms ease-out; }
@keyframes statpulse {
  0% { text-shadow: 0 0 0 rgba(var(--accent-rgb), 0); }
  40% { text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.55); }
  100% { text-shadow: 0 0 0 rgba(var(--accent-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-meta .m-v.count-done { animation: none; }
}

/* ---------- section header ---------- */
.shead { display: flex; flex-direction: column; gap: 22px; margin-bottom: var(--s-head); }
.shead .h2 { max-width: 18ch; }
.shead.center { align-items: center; text-align: center; }
.shead--wide .h2 { max-width: 22ch; }

.idx { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; color: var(--muted-2); }

/* footer */
.foot-link { color: var(--muted); transition: color .2s; font-size: 14px; }
.foot-link:hover { color: #fff; }

/* utility */
.stack-sm > * + * { margin-top: 14px; }
.center { text-align: center; }
.rel { position: relative; z-index: 1; }