/* ===========================================================
   Imagine Radiology — "The Ascent" 3D cinematic experiment
   The WebGL canvas is the world; these panels float over it
   and scroll past as the camera drives forward.
   Palette from your Hubtown re-skin: dark, silver-blue accent.
   =========================================================== */

:root {
  --bg:      #06080d;
  --head:    #eaf0fb;
  --text:    #aab4c6;
  --dim:     #6a7280;
  --accent:  #c4d1ea;     /* silver-blue (brand) */
  --glow:    #74f5eb;     /* neon teal (the "future" glow) */
  --line:    rgba(255,255,255,0.11);
  --panel:   rgba(8,11,18,0.55);
}

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

html, body { background:var(--bg); color:var(--text); }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }

body {
  font-family:'Inter', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
}

h1,h2,h3 { font-family:'Saira', sans-serif; color:var(--head); letter-spacing:0.012em; line-height:1.02; }
a { color:inherit; text-decoration:none; }

/* ---------- the 3D layers ---------- */
.sun {
  position:fixed; left:50%; top:53%; transform:translate(-50%,-50%);
  width:min(900px,85vw); height:min(900px,85vw); border-radius:50%;
  background:radial-gradient(circle,
    rgba(116,245,235,0.26) 0%,
    rgba(96,150,230,0.13) 36%,
    transparent 64%);
  filter:blur(18px); z-index:0; pointer-events:none;
}
#scene { position:fixed; inset:0; z-index:1; display:block; }

/* ---------- framed border + cursor ---------- */
.frame { position:fixed; inset:10px; border:1px solid var(--line); border-radius:22px; pointer-events:none; z-index:60; }
.cursor {
  position:fixed; top:0; left:0; width:12px; height:12px; border-radius:50%;
  background:var(--accent); pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
  transition:width .25s, height .25s, background .25s;
}
.cursor.is-hover { width:54px; height:54px; background:var(--head); }

/* ---------- HUD ---------- */
.hud {
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:55; display:flex; align-items:center; gap:14px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.16em;
  padding:10px 18px; border:1px solid var(--line); border-radius:100px;
  background:rgba(6,8,13,0.5); backdrop-filter:blur(8px); white-space:nowrap;
}
.hud__k { color:var(--dim); }
.hud__v { color:var(--accent); }
.hud__sep { width:1px; height:14px; background:var(--line); }

/* ---------- preloader ---------- */
.preloader {
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
}
.preloader__name { font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.4em; color:var(--accent); text-transform:uppercase; }
.preloader__name span, .nav__logo span { color:var(--glow); }
.preloader__count { font-family:'Saira', sans-serif; font-weight:700; font-size:clamp(4rem,15vw,11rem); color:var(--head); line-height:1; }
.preloader__bar { width:min(340px,58vw); height:2px; background:rgba(255,255,255,0.12); overflow:hidden; }
.preloader__bar span { display:block; height:100%; width:0%; background:var(--glow); }
.preloader__hint { font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.25em; color:var(--dim); text-transform:uppercase; }

/* ---------- nav ---------- */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:22px clamp(24px,5vw,60px); }
.nav__logo { font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.18em; color:var(--head); text-transform:uppercase; }
.nav__links { display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); }
.nav__links a { font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.13em; text-transform:uppercase; color:#97a1b1; }
.nav__links a:hover { color:#fff; }
.nav__cta { border:1px solid var(--line); border-radius:100px; padding:9px 18px; color:var(--head) !important; background:rgba(6,8,13,0.4); }

/* divisions dropdown */
.nav__drop { position:relative; }
.nav__droplabel { font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.13em; text-transform:uppercase; color:#97a1b1; cursor:pointer; }
.nav__drop:hover .nav__droplabel { color:#fff; }
.nav__menu {
  position:absolute; top:calc(100% + 12px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:210px; display:flex; flex-direction:column; padding:8px;
  background:rgba(10,12,18,0.94); border:1px solid var(--line); border-radius:12px;
  backdrop-filter:blur(12px); box-shadow:0 24px 50px -24px rgba(0,0,0,0.8);
  opacity:0; visibility:hidden; transition:.18s;
}
.nav__drop:hover .nav__menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav__menu a { font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); padding:10px 12px; border-radius:8px; white-space:nowrap; }
.nav__menu a:hover { background:rgba(255,255,255,0.06); color:#fff; }

/* ===========================================================
   SCROLLING PANELS — each is a full screen of travel.
   Generous heights give the camera room to drive.
   =========================================================== */
.panel-stage { position:relative; z-index:5; min-height:135vh; display:flex; align-items:center; padding:0 clamp(24px,7vw,110px); }
.hero { min-height:100vh; }
#summit, #partner { min-height:120vh; }

.stage-inner { width:100%; max-width:1180px; margin:0 auto; }
.stage-inner.center { text-align:center; display:flex; flex-direction:column; align-items:center; }
.stage-inner.left  { display:flex; justify-content:flex-start; }
.stage-inner.right { display:flex; justify-content:flex-end; }
.narrow { max-width:780px; }

.eyebrow { display:inline-flex; align-items:center; gap:11px; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--glow); }
.eyebrow::before { content:""; width:7px; height:7px; background:var(--glow); display:inline-block; }

/* hero */
.hero__title { font-size:clamp(2.6rem,10vw,8.5rem); font-weight:700; text-transform:uppercase; margin-top:24px; }
.hero__title .line { display:block; overflow:hidden; }
.hero__title .line > span { display:block; }
.hero__sub { margin-top:28px; max-width:560px; color:var(--text); font-size:clamp(1rem,1.8vw,1.2rem); }
.hero__scroll { position:absolute; bottom:42px; left:50%; transform:translateX(-50%); font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.25em; text-transform:uppercase; color:var(--dim); }

/* shared big type / lead */
.big { font-size:clamp(2rem,6vw,4.6rem); font-weight:700; text-transform:uppercase; margin:22px 0 26px; }
.lead { font-size:clamp(1.05rem,2vw,1.35rem); color:var(--text); max-width:680px; margin-left:auto; margin-right:auto; }

/* integration diagram */
.diagram { margin:40px auto 8px; max-width:900px; padding:24px 22px; background:var(--panel); border:1px solid var(--line); border-radius:16px; backdrop-filter:blur(10px); }
.dg-cap { fill:var(--accent); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.18em; }
.dg-box rect { fill:rgba(255,255,255,0.03); stroke:var(--line); stroke-width:1; }
.dg-box text { fill:var(--head); font-family:'Saira',sans-serif; font-size:14px; font-weight:600; text-anchor:middle; }
.dg-line path { fill:none; stroke:#74f5eb; stroke-width:1.4; opacity:0.5; }
.dg-edge { fill:var(--text); font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em; }
.dg-engine rect { fill:rgba(116,245,235,0.06); stroke:#74f5eb; stroke-width:1.3; }
.dg-eng-t { fill:var(--head); font-family:'Saira',sans-serif; font-size:16px; font-weight:700; text-anchor:middle; letter-spacing:0.02em; }
.dg-eng-s { fill:var(--text); font-family:'IBM Plex Mono',monospace; font-size:10px; text-anchor:middle; }
.dg-return { fill:none; stroke:var(--accent); stroke-width:1.4; stroke-dasharray:5 5; opacity:0.6; }
@media (max-width:760px){ .diagram { padding:14px 10px; } }

/* three-up content cells (value prop, pillars, report) */
.trio { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; text-align:left; }
.cell { padding:26px 24px; background:var(--panel); border:1px solid var(--line); border-radius:14px; backdrop-filter:blur(10px); }
.cell__h { font-family:'Saira', sans-serif; font-weight:600; font-size:1.15rem; color:var(--head); margin-bottom:10px; }
.cell p { font-size:0.95rem; color:var(--text); }
@media (max-width:760px) { .trio { grid-template-columns:1fr; } }

/* waypoint card (roadside, glassy) */
.wp {
  max-width:580px; padding:36px 40px;
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  backdrop-filter:blur(10px);
  box-shadow:0 30px 80px -40px rgba(0,0,0,0.8);
}
.wp__no { font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.2em; color:var(--glow); }
.wp h3 { font-size:clamp(1.9rem,4.5vw,3.2rem); font-weight:700; text-transform:uppercase; margin:14px 0 6px; }
.wp__tagline { font-family:'Saira', sans-serif; font-size:clamp(1.05rem,1.8vw,1.35rem); color:var(--head); margin-bottom:14px; }
.wp__mod { font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.08em; color:var(--accent); margin-bottom:16px; }
.wp__desc { font-size:1.02rem; color:var(--text); margin-bottom:18px; }
.wp__tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.chip { font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.04em; color:var(--text); padding:6px 11px; border:1px solid var(--line); border-radius:100px; background:rgba(255,255,255,0.03); }
.wp__link { font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.13em; text-transform:uppercase; color:var(--accent); }

/* summit */
.summit__title { font-size:clamp(2.4rem,8vw,6rem); font-weight:700; text-transform:uppercase; margin:22px 0 46px; }
.stat-band { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel); backdrop-filter:blur(10px); }
.stat { padding:30px 24px; border-right:1px solid var(--line); text-align:left; }
.stat:last-child { border-right:none; }
.stat__n { font-family:'Saira', sans-serif; font-weight:700; font-size:clamp(2rem,4vw,3rem); color:var(--head); display:block; line-height:1; }
.stat__n i { font-style:normal; font-size:0.5em; color:var(--glow); margin-left:3px; }
.stat__l { font-size:13.5px; color:var(--text); margin-top:10px; display:block; }

/* partner */
.partner__title { font-size:clamp(2.4rem,8vw,7rem); font-weight:700; text-transform:uppercase; margin-bottom:8px; }
.partner__btn { display:inline-block; margin-top:22px; padding:18px 42px; border:1px solid var(--accent); border-radius:100px; color:var(--accent); font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; transition:.2s; }
.partner__btn:hover { background:var(--accent); color:var(--bg); }
.note { font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.12em; color:var(--dim); margin-top:34px; }

/* ---------- responsive ---------- */
@media (max-width:760px) {
  .panel-stage { min-height:120vh; padding:0 22px; }
  .stage-inner.left, .stage-inner.right { justify-content:center; }
  .stat-band { grid-template-columns:1fr 1fr; }
  .stat:nth-child(2) { border-right:none; }
  .nav__links a:not(.nav__cta) { display:none; }
  .nav__drop { display:none; }
  .hud { font-size:10px; gap:10px; padding:8px 14px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
  body { cursor:auto; } .cursor, .hud { display:none; }
}