/* ============================================================
   REIN INS REGAL! 4.0 — page styles (light/premium CI v2.0)
   Loaded after styles.css. Rows · rail · glow · magnetic · cards.
============================================================ */

/* ---------- ROBUST REVEAL — transform-only slide-up (opacity stays 1).
   A frozen/throttled compositing frame can stall a transition, so we never
   tie VISIBILITY to a time-based property: content is always opaque; the
   entrance is just a transform that, if stalled, leaves content visible
   (merely shifted) rather than blank. ---------- */
.reveal, .reveal-scale { opacity: 1 !important; transition: transform .75s cubic-bezier(.16,.84,.3,1) !important; }
html.jsrev .reveal:not(.in) { transform: translateY(26px); }
html.jsrev .reveal-scale:not(.in) { transform: scale(.97) translateY(16px); }
@media (prefers-reduced-motion: reduce) {
  html.jsrev .reveal:not(.in), html.jsrev .reveal-scale:not(.in) { transform: none; }
}

/* ---------- VERTICAL SCROLL-SPY RAIL ---------- */
.theme-rail { display: none; }
@media (min-width: 1280px) {
  .theme-rail {
    position: fixed; left: clamp(18px, 2.4vw, 40px); top: 50%; transform: translateY(-50%);
    z-index: 55; display: flex; flex-direction: column; gap: 2px;
    padding-left: 16px;
  }
  .theme-rail::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px;
    background: var(--night-line);
  }
}
.rail-link {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 7px 0; text-decoration: none; cursor: pointer; background: none; border: 0;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); transition: color .25s; line-height: 1;
}
.rail-link .rn { font-size: 10px; opacity: 0.6; min-width: 16px; }
.rail-link .rl { opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; white-space: nowrap; }
.rail-link::before {
  content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 0; background: var(--pink-deep); transition: height .25s;
}
.rail-link:hover .rl, .rail-link.on .rl { opacity: 1; transform: none; }
.rail-link:hover { color: var(--ink-1); }
.rail-link.on { color: var(--ink-0); }
.rail-link.on .rn { color: var(--pink-deep); opacity: 1; }
.rail-link.on::before { height: 18px; }

/* ---------- HERO ---------- */
.hero4 { padding: clamp(150px, 19vh, 230px) var(--pad) clamp(56px, 7vw, 96px); position: relative; overflow: hidden; }
.hero4-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (max-width: 940px) { .hero4-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero4 .kick { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 24px; display: inline-flex; align-items: center; gap: 12px; }
.hero4 .kick .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.hero4 h1 { font-size: clamp(42px, 6.2vw, 88px); line-height: 0.96; letter-spacing: -0.035em; margin-bottom: 26px; }
.hero4 p.lead { max-width: 52ch; margin: 0 0 36px; }
.hero4 .cta-note { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-3); margin-top: 18px; }

.hero4-portrait { position: relative; }
.hero4-portrait .frame { aspect-ratio: 4/5; border-radius: 22px; overflow: hidden; position: relative; box-shadow: 0 40px 90px -50px rgba(20,18,28,0.55); will-change: transform; }
.hero4-portrait .frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
.hero4-portrait .logo-badge { position: absolute; left: -22px; bottom: 28px; width: 112px; height: 112px; background: #0A0814; border-radius: 20px; display: grid; place-items: center; padding: 12px; box-shadow: 0 24px 50px -22px rgba(10,8,20,0.7); }
.hero4-portrait .logo-badge img { width: 100%; height: 100%; object-fit: contain; }
.hero4-portrait .name-tag { position: absolute; right: 16px; bottom: 16px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-radius: 12px; padding: 11px 15px; box-shadow: 0 12px 30px -16px rgba(20,18,28,0.5); }
.hero4-portrait .name-tag b { font-family: var(--f-display); font-weight: 800; font-size: 15px; color: var(--ink-0); display: block; }
.hero4-portrait .name-tag span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 940px) { .hero4-portrait { max-width: 420px; } }

.hero4-orbit { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero4-orbit i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; }
.hero4-orbit i.a { width: 360px; height: 360px; right: -60px; top: 12%; background: radial-gradient(circle, rgba(189,19,112,0.10), transparent 70%); }
.hero4-orbit i.b { width: 300px; height: 300px; left: -40px; bottom: 6%; background: radial-gradient(circle, rgba(14,127,166,0.10), transparent 70%); }

/* ---------- HORIZONTAL CARD ROWS ---------- */
.hband { background: var(--night-2); padding: clamp(96px,12vw,168px) 0 clamp(80px,10vw,140px); position: relative; }
.hband.alt { background: #fff; }
.hband-sticky { display: flex; flex-direction: column; max-width: 100%; }
.hband-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 0 var(--pad) clamp(44px,5.5vw,76px); }
.hband-top .ht-l { max-width: 60ch; }
.hband-top .eyebrow { margin-bottom: 18px; }
.hband-top h2 { font-size: clamp(30px,4.4vw,58px); margin-bottom: 14px; }
.hband-top p { font-size: 16px; margin: 0; max-width: 52ch; color: var(--ink-2); }
.hband-top .ht-r { text-align: right; flex: 0 0 auto; }
.hband-count { font-family: var(--f-display); font-weight: 800; font-size: clamp(28px,4vw,52px); color: var(--ink-0); line-height: 1; letter-spacing: -0.03em; }
.hband-count .tot { color: var(--ink-3); font-size: 0.5em; }

.hband-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; scroll-padding-left: var(--pad); }
.hband-viewport::-webkit-scrollbar { display: none; }
.hband-viewport.grabbing { cursor: grabbing; scroll-snap-type: none; }
.hband-viewport:focus-visible { outline: 2px solid var(--pink-deep); outline-offset: -4px; border-radius: 8px; }
.hband-track { display: flex; align-items: stretch; gap: clamp(24px,2.8vw,44px); padding: 6px var(--pad); }

.hpanel {
  flex: 0 0 auto; width: clamp(300px, 42vw, 480px); scroll-snap-align: start;
  background: #fff; border: 1px solid var(--night-line); border-radius: 22px;
  padding: clamp(32px,3.4vw,50px); display: flex; flex-direction: column;
  box-shadow: 0 24px 60px -50px rgba(20,18,28,0.4); text-decoration: none; color: inherit;
  transition: transform .4s cubic-bezier(.16,.84,.3,1), border-color .35s, box-shadow .35s;
}
.hband.alt .hpanel { background: var(--night-2); }
a.hpanel:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 40px 80px -44px rgba(20,18,28,0.45); }
.hpanel.on { border-color: var(--line-strong); }
.hpanel.intro { width: clamp(280px, 30vw, 380px); background: transparent; border: 0; box-shadow: none; justify-content: flex-start; padding-left: 0; padding-top: clamp(26px,3vw,42px); }
.hpanel .pn { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--pink-deep); margin-bottom: auto; }
.hpanel .ptag { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-deep); margin-bottom: 14px; }
.hpanel h3 { font-size: clamp(22px,2.5vw,30px); margin: 22px 0 14px; letter-spacing: -0.02em; }
.hpanel.intro h3 { font-size: clamp(22px,2.5vw,30px); margin: 14px 0 14px; }
.hpanel p { font-size: 15.5px; line-height: 1.62; margin: 0; color: var(--ink-2); max-width: 40ch; }
.hpanel .pmeta, .hpanel .insider { display: none; }
.hpanel .ptag { color: var(--ink-3); }
.hpanel .pmeta { margin-top: auto; padding-top: 20px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-3); display: flex; align-items: center; gap: 9px; }
.hpanel .pmeta .d { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.hpanel .picon { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; background: var(--night-2); border: 1px solid var(--night-line); margin-bottom: 6px; }
.hband.alt .hpanel .picon { background: #fff; }
.hpanel .picon svg { width: 24px; height: 24px; fill: none; stroke: var(--pink-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* hover-expand affordance: arrow that reveals on card-link hover */
.hpanel .pgo { margin-top: 16px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink-deep); display: inline-flex; align-items: center; gap: 8px; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; }
.hpanel .pgo svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
a.hpanel:hover .pgo, a.hpanel:focus-visible .pgo { opacity: 1; transform: none; }
.hpanel .insider { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--night-line); font-size: 13px; color: var(--ink-2); }
.hpanel .insider b { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink-deep); display: block; margin-bottom: 5px; }
.intro .lead-note { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; }
.intro .lead-note svg { width: 26px; height: 14px; stroke: var(--pink-deep); fill: none; stroke-width: 2; }

.hband-rail { height: 2px; background: var(--night-line); margin: clamp(24px,3vw,38px) var(--pad) 0; border-radius: 2px; overflow: hidden; }
.hband-rail i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg,var(--cyan-deep),var(--pink-deep)); transform: scaleX(0); transform-origin: left; border-radius: 2px; transition: transform .2s linear; }

.hnav { display: inline-flex; gap: 10px; margin-top: 16px; justify-content: flex-end; }
.hnav-b { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--night-line); background: #fff; color: var(--ink-1); display: grid; place-items: center; cursor: pointer; transition: transform .15s, border-color .2s, color .2s, background .2s, opacity .2s; }
.hnav-b svg { width: 20px; height: 20px; }
.hnav-b:hover { border-color: var(--ink-0); color: var(--ink-0); transform: translateY(-1px); }
.hnav-b:disabled { opacity: 0.3; cursor: default; transform: none; }
.hband.alt .hnav-b { background: var(--night-2); }
@media (hover: none) { .hnav { display: none; } }
@media (max-width: 760px) {
  .hband-top { flex-direction: column; align-items: flex-start; }
  .hband-top .ht-r { text-align: left; }
  .hpanel { width: min(82vw, 350px); }
  .hpanel.intro { display: none; }
}

/* ---------- DARK MOMENT: cursor glow + KI versus ---------- */
.sec-glow { position: absolute; top: 0; left: 0; width: 540px; height: 540px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .45s ease; z-index: 0; background: radial-gradient(circle, rgba(255,61,181,0.20), rgba(91,216,255,0.09) 42%, transparent 70%); }
.on-dark .wrap { position: relative; z-index: 1; }

.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; overflow: hidden; position: relative; z-index: 1; }
@media (max-width: 820px) { .versus { grid-template-columns: 1fr; } }
.vcol { padding: clamp(28px,3.4vw,46px); background: #0A0814; }
.vcol .vhd { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 8px; }
.vcol h3 { font-size: clamp(22px,2.6vw,30px); color: #fff; margin-bottom: 24px; letter-spacing: -0.02em; }
.vcol.ai .vhd { color: var(--cyan); }
.vcol.ben .vhd { color: var(--pink); }
.vlist { list-style: none; padding: 0; margin: 0; }
.vlist li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.1); font-size: 15.5px; color: #C9C4DC; line-height: 1.5; }
.vlist li:first-child { border-top: 0; }
.vlist li .mk { flex: 0 0 auto; font-family: var(--f-mono); font-size: 13px; padding-top: 1px; }
.vcol.ai .mk { color: var(--cyan); }
.vcol.ben .mk { color: var(--pink); }
.vcol.ben .vlist li { color: #EFE9F8; }
.punch { text-align: center; margin-top: clamp(40px,5vw,62px); position: relative; z-index: 1; }
.punch p { font-family: var(--f-display); font-weight: 800; font-size: clamp(24px,3.4vw,42px); line-height: 1.16; letter-spacing: -0.025em; color: #fff; max-width: 22ch; margin: 0 auto 30px; }
.punch .hl { color: var(--pink); text-shadow: 0 0 18px rgba(255,61,181,0.45); }

.final-cta { text-align: center; }
.final-cta .logo-mark { width: 128px; margin: 0 auto 26px; filter: drop-shadow(0 0 22px rgba(91,216,255,0.4)) drop-shadow(0 0 44px rgba(255,61,181,0.28)); position: relative; z-index: 1; }
.final-cta .logo-mark img { width: 100%; display: block; }
.final-cta h2 { font-size: clamp(34px,5vw,62px); margin-bottom: 20px; color: #fff; }
.final-cta p.lead { margin: 0 auto 36px; max-width: 50ch; color: #C9C4DC; }