/* =====================================================================
   Purple3 — Intro / Welcome page (/)
   Cinematic artwork layer + functional HTML header, copy, buttons.
   Artwork: assets/intro-scene.jpg (1536x944), assets/intro-scene-mobile.jpg
   ===================================================================== */
:root{
  --p3-ink:#f7f4fb;--p3-muted:#d9d2e6;--p3-violet:#b36bff;--p3-violet-2:#8c38ff;
  --scene-w:1536;--scene-h:944;--hdr:72px;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html,body{margin:0;background:#05030a;color:var(--p3-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
body{min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden}

/* ---------- backdrop fills gutters on non-3:2 viewports ---------- */
.intro-backdrop{position:fixed;inset:0;z-index:0;background:#05030a url("/assets/intro-backdrop.jpg") center/cover no-repeat;opacity:.9}
.intro-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,3,10,.55),rgba(5,3,10,.15) 40%,rgba(5,3,10,.6))}

/* ---------- header (functional) ---------- */
.intro-header{position:relative;z-index:5;height:var(--hdr);display:flex;align-items:center;gap:26px;padding:0 3vw;
  background:rgba(5,4,10,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}
.brand{display:flex;align-items:center;gap:11px;min-width:240px}
.brand img{width:46px;height:46px;border-radius:11px;box-shadow:0 0 22px rgba(160,80,255,.45)}
.brand span{display:flex;flex-direction:column;line-height:1}
.brand strong{font-size:19px;letter-spacing:.05em;color:#fff}.brand strong em{font-style:normal;color:var(--p3-violet)}
.brand small{font-size:9.5px;letter-spacing:.18em;color:var(--p3-violet);margin-top:4px}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{font-size:14.5px;font-weight:600;color:#ddd6e6;transition:color .2s}.nav a:hover{color:#fff}
.nav-actions{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid rgba(191,100,255,.5);border-radius:10px;padding:12px 18px;font-weight:700;font-size:14px;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-ghost{background:rgba(8,5,16,.7);color:#fff}
.btn-primary{background:linear-gradient(120deg,#8a3bff,#a85cff);border-color:#b57cff;color:#fff;box-shadow:0 10px 36px rgba(150,70,255,.45)}
.btn-primary:hover{box-shadow:0 14px 44px rgba(150,70,255,.65)}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:26px;margin-left:auto;cursor:pointer}

/* ---------- stage: artwork scaled to fit width AND remaining height ---------- */
.intro-main{position:relative;z-index:1;flex:1;display:flex;align-items:flex-start;justify-content:center}
.intro-stage{position:relative;width:min(100vw,calc((100dvh - var(--hdr)) * var(--scene-w) / var(--scene-h)));aspect-ratio:var(--scene-w)/var(--scene-h);
  --u:calc(min(100vw,(100dvh - var(--hdr)) * var(--scene-w) / var(--scene-h)) / var(--scene-w));  /* 1 artwork px */
  animation:introIn 1s var(--ease) both}
.intro-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
/* official mark overlaid on the laptop screen (replaces the incorrect mark in the artwork) */
.intro-screen-mark{position:absolute;left:24.48%;top:38.88%;width:2.93%;aspect-ratio:1;border-radius:22%;object-fit:cover;z-index:2;box-shadow:0 0 10px rgba(160,80,255,.5)}

/* ---------- copy block, positioned where the reference places it ---------- */
.intro-copy{position:absolute;left:0;right:0;top:0;z-index:3;text-align:center;padding-top:calc(13 * var(--u))}
.pill{display:inline-flex;align-items:center;padding:calc(11*var(--u)) calc(22*var(--u));border-radius:999px;font-size:calc(12.5*var(--u));font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#ece0ff;background:rgba(10,6,20,.78);border:1px solid rgba(200,140,255,.65);box-shadow:0 0 28px rgba(160,80,255,.3);backdrop-filter:blur(8px)}
.intro-copy h1{font-family:Sora,Inter,sans-serif;font-size:calc(62*var(--u));line-height:1.02;letter-spacing:-.04em;margin:calc(10*var(--u)) auto 0;color:#fff;font-weight:700}
.intro-copy h1 .l1,.intro-copy h1 .l2{display:inline}
.intro-copy h1 .accent{display:block;color:var(--p3-violet);text-shadow:0 0 34px rgba(170,90,255,.45)}
.intro-copy .lead{font-size:calc(19*var(--u));line-height:1.36;color:var(--p3-muted);max-width:calc(760*var(--u));margin:calc(11*var(--u)) auto 0}
.intro-actions{display:flex;justify-content:center;gap:calc(20*var(--u));margin-top:calc(16*var(--u))}
.intro-actions .btn{padding:calc(16*var(--u)) calc(30*var(--u));font-size:calc(17*var(--u));border-radius:calc(11*var(--u))}
.intro-actions .btn svg{width:calc(18*var(--u));height:calc(18*var(--u))}
.intro-enter{display:inline-flex;align-items:center;gap:8px;margin-top:calc(12*var(--u));font-size:calc(13*var(--u));font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#cdbfe6;opacity:.85}
.intro-enter:hover{color:#fff;opacity:1}
.intro-enter svg{width:1em;height:1em}

/* ---------- mobile artwork (hidden on desktop) ---------- */
.intro-scene-mobile{display:none}

/* ---------- footer ---------- */
.intro-footer{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 3vw;font-size:12px;color:#9a91ad;background:linear-gradient(180deg,rgba(5,3,10,0),rgba(5,3,10,.85) 40%)}
.intro-footer a:hover{color:#fff}
.intro-footer em{font-style:normal;color:#b9b0cc}

@keyframes introIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.intro-stage{animation:none}.btn{transition:none}}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1120px){.nav{display:none}.nav-toggle{display:block}.nav.open{display:flex;position:absolute;top:var(--hdr);left:0;right:0;flex-direction:column;gap:0;background:rgba(5,4,10,.96);border-bottom:1px solid rgba(255,255,255,.08);padding:8px 0}.nav.open a{padding:14px 5vw}}
@media(max-width:760px){.nav-actions .btn-primary{display:none}.nav-actions .btn{white-space:nowrap;padding:10px 14px;font-size:13px}.brand{min-width:0;gap:9px}.brand img{width:40px;height:40px}.brand strong{font-size:16px}.brand small{font-size:8.5px;letter-spacing:.14em}}

/* Portrait / narrow: stack copy over the dedicated laptop crop */
@media(max-width:900px){
  .intro-main{display:block}
  .intro-stage{width:100%;aspect-ratio:auto;--u:1px}
  .intro-scene,.intro-screen-mark{display:none}
  .intro-copy{position:relative;padding:38px 20px 0}
  .pill{padding:9px 14px;font-size:10.5px}
  .intro-copy h1{font-size:clamp(34px,9.2vw,46px);margin-top:16px}
  .intro-copy h1 .l1,.intro-copy h1 .l2{display:block}
  .intro-copy .lead{font-size:16px;max-width:560px;margin-top:14px}
  .intro-actions{flex-direction:column;gap:12px;margin-top:22px;padding:0 4px}
  .intro-actions .btn{width:100%;padding:15px 20px;font-size:15px;border-radius:11px}
  .intro-actions .btn svg{width:16px;height:16px}
  .intro-enter{margin-top:14px;font-size:12px}
  .intro-scene-mobile{display:block;position:relative;width:100%;margin-top:10px}
  .intro-scene-mobile img{display:block;width:100%;height:auto}
  .intro-scene-mobile .intro-screen-mark{display:block;left:18.79%;top:10.4%;width:3.58%}
  .intro-footer{position:relative;background:rgba(5,3,10,.7);flex-direction:column;text-align:center;gap:6px;padding:16px 20px}
}