/* ============================================================
   LOCAL PREVIEW — shared nav + hero system (namespaced .nh-*)
   Deliberately does NOT reuse production .hero* class names.
   ============================================================ */

:root{ --shell-max:1440px; --shell-pad:clamp(20px,4vw,64px); }

.site-shell{
  width:100%; max-width:var(--shell-max);
  margin-inline:auto; padding-inline:var(--shell-pad);
}

nav, .nh{ font-family:Inter,"Source Sans 3",sans-serif; }

/* ---------- NAV: logo left, links + Register as one right cluster ---------- */
nav .navin{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:76px; padding-block:0;
}
nav .nav-right{ display:flex; align-items:center; gap:22px; }
nav .navlinks{ display:flex; gap:32px; font-size:16px; }
nav .navin .wordmark,
nav .navin .cta-s{ justify-self:auto; }

/* ---------- HERO shell ---------- */
.nh{
  position:relative; display:block; overflow:hidden;
  isolation:isolate;               /* own stacking context, no bleed */
  background:var(--bg);
}
.nh-bg{ position:absolute; inset:0; z-index:0; }
.nh-bg img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
}
.nh-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; }

.nh-inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(480px,0.9fr);
  gap:clamp(40px,5vw,80px);
  align-items:center;
  padding-block:clamp(56px,7vh,96px);
}

.nh-copy{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }

/* ---------- typography ---------- */
.nh-kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; margin-bottom:24px;
  border:1px solid rgba(255,255,255,.20); border-radius:999px;
  background:rgba(255,255,255,.05);
  font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#eef1f7; white-space:nowrap;
}
.nh-kicker img{ width:20px; height:20px; display:block; flex:0 0 auto; }
.nh-kicker .kd{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.45); }
.nh-kicker .kdate{ color:var(--cyan); }

.nh h1{
  margin:0; font-weight:700;
  font-size:clamp(40px,5.1vw,72px);
  line-height:1.0; letter-spacing:-0.03em;
  color:var(--ink);
}
.nh h1 .l2{ display:block; }
.nh h1 .sub{
  display:block; margin-top:.30em;
  font-size:clamp(22px,2.45vw,34px);
  line-height:1.14; letter-spacing:-0.015em; font-weight:700;
  background:linear-gradient(90deg,#22D3EE 0%,#4F7CFF 38%,#8B5CF6 70%,#E34FCB 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.nh-sub{
  margin:22px 0 0; max-width:54ch;
  font-size:clamp(16px,1.15vw,17.5px);
  font-weight:400; line-height:1.6; color:#c8cddb;
}
.nh-ctas{ display:flex; align-items:center; gap:16px; margin-top:34px; flex-wrap:wrap; }
.nh-ctas .btn, .nh-ctas .btn-o{ min-height:44px; }

/* ---------- interface frame (exact 800/726) ---------- */
.nh-ui{
  margin:0; width:min(100%,617px); aspect-ratio:800 / 726;
  justify-self:end; overflow:hidden; border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.85);
}
.nh-ui img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ---------- event rail (production markup, untouched styling) ---------- */
.nh-rail{ position:relative; z-index:2; }
.nh-rail .site-shell{ padding-block:14px; }
.nh-rail .event-rail--beside{
  width:100%; justify-content:space-between;
  position:static; display:flex; padding:0; background:transparent; border:0;
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nh-inner{ grid-template-columns:minmax(0,1fr) minmax(400px,0.85fr); gap:clamp(28px,4vw,56px); }
}
@media (max-width:900px){
  nav .navin{ height:68px; }
  .nh-inner{ grid-template-columns:minmax(0,1fr); gap:32px; padding-block:40px 36px; }
  .nh-ui{ width:100%; justify-self:stretch; order:2; }
  .nh-copy{ order:1; }
  .nh h1{ font-size:clamp(38px,9.5vw,56px); }
  .nh h1 .sub{ font-size:clamp(21px,5.4vw,30px); }
  .nh-sub{ max-width:none; font-size:16.5px; }
  .nh-ctas{ width:100%; }
  .nh-ctas .btn, .nh-ctas .btn-o{ flex:1 1 100%; justify-content:center; min-height:46px; height:auto; }
  .nh-rail .event-rail--beside{ flex-direction:column; align-items:flex-start; gap:18px; }
}
@media (max-width:560px){
  .nh-inner{ padding-block:30px 28px; gap:24px; }
  .nh-kicker{ font-size:11.5px; letter-spacing:.13em; padding:9px 14px; white-space:normal; }
}