/* ==========================================================================
   Photon Technology International LLC — site styles
   One stylesheet, no framework. Palette derived from the studio logo.
   ========================================================================== */

:root{
  /* Surfaces — cool near-black, tuned to sit under the cyan/mint mark */
  --bg:            #04070C;
  --bg-elev:       #080D15;
  --surface:       #0D141E;
  --surface-2:     #121B28;
  --line:          rgba(255,255,255,.075);
  --line-2:        rgba(255,255,255,.13);

  /* Ink */
  --ink:           #EEF3F8;
  --ink-2:         #A9B6C6;
  --ink-3:         #6F7E90;

  /* Brand — straight off the logo */
  --cyan:          #1FC8FF;
  --cyan-soft:     #7ADEFF;
  --mint:          #2BD3A6;
  --mint-soft:     #6FE7C6;
  --brand-grad:    linear-gradient(104deg, var(--cyan) 0%, #29CFC9 48%, var(--mint) 100%);

  /* Per-title accents, sampled from the app icons */
  --ballvolt:      #3E9BFF;
  --taptraffic:    #35D9A0;

  /* Type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Space + shape */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1320px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 38px;

  /* Elevation — layered, soft, never a single hard drop */
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 6px 16px -8px rgba(0,0,0,.6);
  --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 18px 48px -18px rgba(0,0,0,.75);
  --sh-3: 0 4px 12px rgba(0,0,0,.5), 0 40px 90px -34px rgba(0,0,0,.9);
  --glow-cyan: 0 14px 44px -16px rgba(31,200,255,.55);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem, .96rem + .2vw, 1.06rem);
  line-height:1.65;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Fine film grain — kills the flat-gradient look on large dark areas */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.038'/%3E%3C/svg%3E");
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.06; letter-spacing:-.03em; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; }

::selection{ background:var(--cyan); color:#03060A; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }

/* ---------- Layout primitives ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); position:relative; z-index:2; }
.section{ padding-block:clamp(4.5rem, 9vw, 8.5rem); position:relative; }
.section--tight{ padding-block:clamp(3rem, 6vw, 5rem); position:relative; }
/* Hairline that fades out at both ends — quieter than a full-width rule */
.section--rule::before{
  content:""; position:absolute; inset-inline:var(--gutter); top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent);
}
.stack > * + *{ margin-top:1rem; }
.center{ text-align:center; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--cyan); color:#03060A; padding:.7rem 1.1rem; border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ---------- Type scale ---------- */
.display{ font-size:clamp(2.6rem, 1.2rem + 4.6vw, 4.6rem); letter-spacing:-.042em; }
.h1{ font-size:clamp(2.2rem, 1.4rem + 3.4vw, 3.9rem); letter-spacing:-.035em; }
.h2{ font-size:clamp(1.9rem, 1.3rem + 2.3vw, 3rem); letter-spacing:-.033em; }
.h3{ font-size:clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.lede{ font-size:clamp(1.06rem, 1rem + .5vw, 1.28rem); color:var(--ink-2); line-height:1.62; letter-spacing:-.008em; }
.muted{ color:var(--ink-2); }
.dim{ color:var(--ink-3); }
.measure{ max-width:60ch; }
.measure-sm{ max-width:46ch; }

.eyebrow{
  font-family:var(--font-display);
  font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mint-soft); display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--brand-grad); }
.center .eyebrow{ justify-content:center; }

.grad-text{
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.6rem; border-radius:999px; border:1px solid transparent;
  font-family:var(--font-display); font-weight:600; font-size:.97rem; letter-spacing:-.012em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--primary{
  background:var(--brand-grad); color:#02060A;
  box-shadow:var(--glow-cyan), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--primary:hover{ box-shadow:0 20px 56px -16px rgba(31,200,255,.7), inset 0 1px 0 rgba(255,255,255,.5); }
/* light sweep on hover */
.btn--primary::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
}
.btn--primary:hover::after{ transform:translateX(120%); transition:transform .7s cubic-bezier(.3,.7,.3,1); }
@media (prefers-reduced-motion: reduce){ .btn--primary::after{ display:none; } }

.btn--ghost{ border-color:var(--line-2); background:rgba(255,255,255,.035); color:var(--ink); }
.btn--ghost:hover{ border-color:rgba(31,200,255,.55); background:rgba(31,200,255,.09); color:#fff; box-shadow:0 10px 30px -14px rgba(31,200,255,.5); }
.btn--sm{ padding:.6rem 1.2rem; font-size:.9rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }
.center .btn-row{ justify-content:center; }

/* Store buttons */
.store-row{ display:flex; flex-wrap:wrap; gap:.7rem; }
.store{
  display:inline-flex; align-items:center; gap:.75rem;
  padding:.62rem 1.2rem .62rem 1.05rem; border-radius:15px;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
             linear-gradient(150deg, rgba(255,255,255,.18), rgba(255,255,255,.04)) border-box;
  border:1px solid transparent;
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.store:hover{
  transform:translateY(-2px);
  background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,
             var(--brand-grad) border-box;
  box-shadow:0 14px 34px -18px rgba(31,200,255,.7);
}
.store svg{ width:22px; height:22px; flex:none; fill:currentColor; }
.store span{ display:block; font-family:var(--font-display); line-height:1.15; }
.store .store__sm{ font-size:.61rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); font-weight:500; }
.store .store__lg{ font-size:.98rem; font-weight:600; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(4,7,12,.6);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background-color .3s ease;
}
.site-header.is-stuck{ border-bottom-color:var(--line); background:rgba(4,7,12,.9); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:76px; }
.brand{ display:inline-flex; align-items:center; text-decoration:none; border-radius:50%; transition:transform .25s cubic-bezier(.2,.7,.3,1); }
.brand:hover{ transform:scale(1.06) rotate(-4deg); }
.brand__mark{ width:40px; height:40px; flex:none; filter:drop-shadow(0 4px 14px rgba(31,200,255,.35)); }

.nav__links{ display:flex; align-items:center; gap:.2rem; list-style:none; }
.nav__links a{
  display:block; padding:.5rem .9rem; border-radius:999px; text-decoration:none;
  font-size:.94rem; color:var(--ink-2); transition:color .18s ease, background-color .18s ease;
}
.nav__links a:hover{ color:var(--ink); background:rgba(255,255,255,.055); }
.nav__links a[aria-current="page"]{ color:var(--ink); background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px var(--line); }
.nav__cta{ display:flex; align-items:center; gap:.5rem; }

.nav__toggle{
  display:none; width:44px; height:44px; border-radius:13px; align-items:center; justify-content:center;
  background:rgba(255,255,255,.045); border:1px solid var(--line-2); cursor:pointer;
}
.nav__toggle svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; }
.nav__toggle .icon-x{ display:none; }
.nav__toggle[aria-expanded="true"] .icon-x{ display:block; }
.nav__toggle[aria-expanded="true"] .icon-menu{ display:none; }

@media (max-width:920px){
  .nav__toggle{ display:inline-flex; }
  .nav__cta .btn{ display:none; }
  .nav__links{
    position:fixed; inset:76px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:.15rem;
    padding:1rem var(--gutter) 1.6rem;
    background:rgba(5,9,15,.98);
    border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
  }
  .nav__links.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav__links a{ padding:.85rem 1rem; font-size:1.05rem; }
}

/* ---------- Ambient backdrop ---------- */
.aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.aurora::before,.aurora::after{ content:""; position:absolute; border-radius:50%; filter:blur(100px); }
.aurora::before{
  width:min(60vw,760px); aspect-ratio:1; left:-16%; top:-34%; opacity:.42;
  background:radial-gradient(circle at 50% 50%, rgba(31,200,255,.85), transparent 66%);
  animation:drift 24s ease-in-out infinite alternate;
}
.aurora::after{
  width:min(54vw,660px); aspect-ratio:1; right:-14%; top:-6%; opacity:.34;
  background:radial-gradient(circle at 50% 50%, rgba(43,211,166,.8), transparent 66%);
  animation:drift 29s ease-in-out infinite alternate-reverse;
}
@keyframes drift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(7%,11%,0) scale(1.16); } }
@media (prefers-reduced-motion: reduce){ .aurora::before,.aurora::after{ animation:none; } }

.grid-lines{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 78% 62% at 50% 0%, #000 18%, transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 0%, #000 18%, transparent 74%);
  opacity:.7;
}

/* ---------- Hero ---------- */
.hero{ position:relative; padding-block:clamp(3.5rem, 7vw, 7rem) clamp(3.5rem, 6vw, 6.5rem); overflow:hidden; }
.hero__grid{ display:grid; gap:clamp(2.5rem,5vw,5rem); align-items:center; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); }
@media (max-width:980px){ .hero__grid{ grid-template-columns:1fr; } }
.hero__copy .measure{ max-width:52ch; }

/* Proof row — three real numbers, not a testimonial strip */
.proof{
  display:flex; flex-wrap:wrap; gap:2.4rem; list-style:none;
  margin-top:2.6rem; padding-top:1.9rem;
  border-top:1px solid var(--line);
}
.proof li{ display:flex; flex-direction:column; gap:.15rem; }
.proof b{
  font-family:var(--font-display); font-size:1.5rem; font-weight:700; letter-spacing:-.035em;
  background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.proof span{ font-size:.83rem; color:var(--ink-3); }

/* Stage — devices plus two floating title chips */
.hero__stage{ position:relative; }
.float{
  position:absolute; z-index:4; display:flex; align-items:center; gap:.7rem;
  padding:.6rem .95rem .6rem .6rem; border-radius:16px;
  background:rgba(13,20,30,.72);
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--sh-2);
}
.float img{ width:40px; height:40px; border-radius:11px; flex:none; }
.float span{ display:flex; flex-direction:column; font-size:.72rem; color:var(--ink-3); line-height:1.35; white-space:nowrap; }
.float b{ font-family:var(--font-display); font-size:.9rem; font-weight:600; color:var(--ink); letter-spacing:-.015em; }
.float--a{ left:-2%; top:16%; }
.float--b{ right:-2%; bottom:14%; }
@media (prefers-reduced-motion: no-preference){
  .float--a{ animation:float 8s ease-in-out .3s infinite; }
  .float--b{ animation:float 8s ease-in-out 1.4s infinite; }
}
@media (max-width:520px){
  .float{ padding:.45rem .75rem .45rem .45rem; }
  .float img{ width:32px; height:32px; }
  .float--a{ left:-1%; top:10%; }
  .float--b{ right:-1%; bottom:8%; }
}
.hero h1{ margin-top:1.2rem; }
.hero .lede{ margin-top:1.5rem; }
.hero .btn-row{ margin-top:2.1rem; }

.badge{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.44rem 1rem .44rem .6rem; border-radius:999px;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
             linear-gradient(120deg, rgba(255,255,255,.2), rgba(255,255,255,.04)) border-box;
  border:1px solid transparent;
  font-size:.82rem; color:var(--ink-2); box-shadow:var(--sh-1);
}
.badge__dot{ width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(43,211,166,.18); margin-left:.28rem; }

/* Hero device cluster */
.devices{ position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:min(74vw,480px); }
.devices .phone{ position:absolute; }
.devices .phone--a{ transform:translateX(-28%) rotate(-7deg); z-index:2; }
.devices .phone--b{ transform:translateX(28%) rotate(7deg); z-index:1; }
@media (prefers-reduced-motion: no-preference){
  .devices .phone--a{ animation:float 7s ease-in-out infinite; }
  .devices .phone--b{ animation:float 7s ease-in-out .9s infinite; }
}
@keyframes float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -14px; } }

.phone{
  width:min(44vw, 250px); aspect-ratio:9/19.5; flex:none;
  border-radius:32px; padding:7px;
  background:linear-gradient(158deg,#2E3A4C,#0A0E16 58%);
  box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(0,0,0,.5);
  position:relative;
}
.phone::after{
  content:""; position:absolute; top:15px; left:50%; translate:-50% 0;
  width:32%; height:5px; border-radius:99px; background:rgba(0,0,0,.6); z-index:2;
}
.phone img{ width:100%; height:100%; object-fit:cover; border-radius:26px; background:#0A0E16; }

/* ---------- Stat strip ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-2);
}
@media (max-width:780px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ background:var(--bg-elev); padding:1.8rem 1.4rem; }
.stat__num{
  font-family:var(--font-display); font-size:clamp(1.7rem,1.2rem+1.5vw,2.35rem);
  font-weight:700; letter-spacing:-.04em;
  background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__label{ font-size:.86rem; color:var(--ink-3); margin-top:.35rem; }

/* ---------- Game cards ---------- */
.game{
  position:relative; overflow:hidden;
  border:1px solid transparent; border-radius:var(--r-xl);
  background:linear-gradient(168deg, var(--surface), var(--bg-elev) 62%) padding-box,
             linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 45%) border-box;
  padding:clamp(1.85rem,3.5vw,3.25rem);
  display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  box-shadow:var(--sh-2);
  transition:box-shadow .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
.game:hover{ transform:translateY(-4px); box-shadow:var(--sh-3), 0 0 0 1px rgba(255,255,255,.05); }
.game + .game{ margin-top:1.5rem; }
.game::before{
  content:""; position:absolute; width:440px; aspect-ratio:1; border-radius:50%;
  right:-130px; top:-170px; filter:blur(90px); opacity:.3;
  background:radial-gradient(circle, var(--accent, var(--cyan)), transparent 68%);
  pointer-events:none;
}
.game--flip{ grid-template-columns:minmax(0,.8fr) minmax(0,1fr); }
.game--flip::before{ right:auto; left:-130px; }
.game--flip .game__art{ order:-1; }
@media (max-width:900px){
  .game, .game--flip{ grid-template-columns:1fr; }
  .game--flip .game__art{ order:0; }
}
.game__body{ position:relative; z-index:1; }
.game__head{ display:flex; align-items:center; gap:1.1rem; }
.game__icon{
  width:70px; height:70px; flex:none; border-radius:18px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.1);
}
.game__title{ font-size:clamp(1.55rem,1.2rem+1.2vw,2.15rem); }
.game__tag{ color:var(--accent, var(--cyan)); font-size:.9rem; font-weight:500; margin-top:.2rem; }
.game__desc{ margin-top:1.3rem; color:var(--ink-2); max-width:52ch; }
.game__meta{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.3rem; list-style:none; }
.game__meta li{
  font-size:.79rem; padding:.34rem .75rem; border-radius:999px;
  background:rgba(255,255,255,.045); border:1px solid var(--line); color:var(--ink-2);
}
.game__art{ display:flex; justify-content:center; gap:.85rem; position:relative; z-index:1; }
.game__art .phone{ width:min(40vw,194px); }
.game__art .phone:nth-child(2){ display:none; }
@media (min-width:1060px){ .game__art .phone:nth-child(2){ display:block; margin-top:2.6rem; } }
.game .store-row{ margin-top:1.7rem; }

/* ---------- Grids and cards ---------- */
.grid{ display:grid; gap:1.15rem; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

.card{
  position:relative;
  border:1px solid transparent; border-radius:var(--r-lg);
  background:linear-gradient(var(--bg-elev),var(--bg-elev)) padding-box,
             linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.025) 55%) border-box;
  padding:1.7rem;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, background .25s ease;
}
.card:hover{
  transform:translateY(-4px);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
             linear-gradient(160deg, rgba(31,200,255,.4), rgba(43,211,166,.12) 60%) border-box;
  box-shadow:var(--sh-2);
}
.card__icon{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center; margin-bottom:1.15rem;
  background:linear-gradient(150deg, rgba(31,200,255,.2), rgba(43,211,166,.1));
  border:1px solid rgba(31,200,255,.25); color:var(--cyan-soft);
}
.card__icon svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card h3{ font-size:1.08rem; letter-spacing:-.02em; }
.card p{ color:var(--ink-2); font-size:.95rem; margin-top:.55rem; }

/* Spec list */
.spec{ display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.spec:last-child{ border-bottom:0; }
.spec__check{ width:23px; height:23px; border-radius:50%; display:grid; place-items:center; background:rgba(43,211,166,.16); color:var(--mint); flex:none; }
.spec__check svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.spec__label{ font-size:.98rem; }
.spec__value{ font-family:var(--font-display); font-size:.92rem; color:var(--ink-2); text-align:right; }

/* ---------- Panel ---------- */
.panel{
  border:1px solid transparent; border-radius:var(--r-xl);
  background:linear-gradient(155deg, var(--surface-2), var(--bg-elev) 68%) padding-box,
             linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 50%) border-box;
  padding:clamp(2rem,4vw,3.6rem); position:relative; overflow:hidden;
  box-shadow:var(--sh-2);
}
.panel::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(31,200,255,.16), transparent 70%);
  pointer-events:none;
}
.panel > *{ position:relative; z-index:1; }

/* ---------- Prose ---------- */
.prose{ max-width:70ch; }
.prose h2{ font-size:clamp(1.4rem,1.2rem+.8vw,1.85rem); margin-top:2.9rem; }
.prose h3{ font-size:1.12rem; margin-top:2rem; }
.prose p, .prose ul, .prose ol{ margin-top:1rem; color:var(--ink-2); }
.prose ul, .prose ol{ padding-left:1.25rem; }
.prose li{ margin-top:.5rem; }
.prose li::marker{ color:var(--mint); }
.prose a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--cyan-soft); }
.prose strong{ color:var(--ink); font-weight:600; }
.prose hr{ border:0; border-top:1px solid var(--line); margin:2.6rem 0; }

/* Fact rows */
.facts{
  border:1px solid transparent; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(var(--bg-elev),var(--bg-elev)) padding-box,
             linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.025) 55%) border-box;
  box-shadow:var(--sh-1);
}
.facts__row{ display:grid; grid-template-columns:210px 1fr; gap:1rem; padding:1rem 1.4rem; border-bottom:1px solid var(--line); }
.facts__row:last-child{ border-bottom:0; }
.facts__row dt{ color:var(--ink-3); font-size:.9rem; }
.facts__row dd{ margin:0; }
@media (max-width:640px){ .facts__row{ grid-template-columns:1fr; gap:.15rem; } }

/* ---------- Page header ---------- */
.page-head{ position:relative; overflow:hidden; padding-block:clamp(3.5rem,7vw,6.5rem) clamp(2rem,4vw,3rem); }

/* ---------- Footer ---------- */
.site-footer{
  position:relative; border-top:1px solid var(--line); background:var(--bg-elev);
  padding-block:clamp(3.2rem,5vw,4.8rem) 2rem; margin-top:clamp(3rem,6vw,5rem);
}
.footer__grid{ display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:2.6rem 1.5rem; }
@media (max-width:880px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .footer__grid{ grid-template-columns:1fr; } }
.footer__col h4{ font-size:.75rem; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:1.05rem; }
.footer__col ul{ list-style:none; }
.footer__col li + li{ margin-top:.6rem; }
.footer__col a{ text-decoration:none; color:var(--ink-2); font-size:.94rem; transition:color .18s ease; }
.footer__col a:hover{ color:var(--cyan); }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  margin-top:3.2rem; padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--ink-3);
}

/* ---------- Reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
  .reveal.is-in{ opacity:1; transform:none; }
}

/* ---------- Utilities ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.mt-0{ margin-top:0 } .mt-1{ margin-top:.5rem } .mt-2{ margin-top:1rem } .mt-3{ margin-top:1.5rem }
.mt-4{ margin-top:2rem } .mt-5{ margin-top:2.75rem } .mt-6{ margin-top:3.5rem }


/* ---------- Generated brand art ---------- */
.art{ margin:0; }
.art img{
  width:100%; border-radius:var(--r-xl); border:1px solid var(--line-2);
  box-shadow:var(--sh-3); aspect-ratio:16/9; object-fit:cover;
}
.art figcaption{
  margin-top:.95rem; font-size:.88rem; color:var(--ink-3);
  max-width:56ch; padding-left:1rem; border-left:2px solid var(--mint); line-height:1.55;
}

/* Panel with the light-streak plate behind it */
.panel--art::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("../img/art-streaks.jpg");
  background-size:cover; background-position:center;
  opacity:.3;
  mask-image:linear-gradient(100deg, transparent 30%, #000 100%);
  -webkit-mask-image:linear-gradient(100deg, transparent 30%, #000 100%);
}
.panel--art::before{ z-index:1; }
.panel--art > *{ position:relative; z-index:2; }

/* Ambient mesh behind secondary page headers */
.page-head--art::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("../img/art-mesh.jpg");
  background-size:cover; background-position:center 30%;
  opacity:.32;
  mask-image:linear-gradient(#000 10%, transparent 92%);
  -webkit-mask-image:linear-gradient(#000 10%, transparent 92%);
}