/* ============================================================
   ARTAN — Trade From Anywhere
   Dark cozy premium living room · neon blue/cyan/purple · grain
   ============================================================ */

:root {
  --bg: #06050b;
  --ink: #f4f2ff;
  --muted: #9a93b8;
  --purple: #8b3dff;
  --violet: #b36bff;
  --cyan: #3fd8ff;
  --green: #3dffb4;
  --lime: #b9fb4e;
  --acid: #7dfc02;
  --red: #ff5470;
  --font-head: 'Termina Test', 'Termina', system-ui, sans-serif;
  --font-body: 'Almarai', system-ui, sans-serif;
}

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

html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(139, 61, 255, .45); }

/* ============================================================
   FILM TREATMENT — vignette + grain (whole page)
   ============================================================ */
.vignette {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background: radial-gradient(115% 90% at 50% 44%,
    transparent 38%,
    rgba(2, 2, 8, .45) 68%,
    rgba(2, 2, 8, .94) 100%);
}

/* fine grain — page 1 only (absolute in #stage), in the heading band so it
   never sits over the TV and the glass pill can refract it. */
.grain {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  height: 34vh;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: screen;
  will-change: transform;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  animation: grain-jitter 1.1s steps(3) infinite;
}
@keyframes grain-jitter {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-22px, 14px); }
  66%  { transform: translate(16px, -18px); }
  100% { transform: translate(0, 0); }
}
@media (pointer: coarse), (max-width: 880px) {
  .grain { animation: none; will-change: auto; }
}

/* ============================================================
   LIQUID GLASS (shared) — refracting lens via SVG displacement
   (Chromium). Other browsers gracefully fall back to blur.
   ============================================================ */
[data-glass] {
  position: relative;
  background: rgba(255,255,255,.012);              /* near-invisible body — pure lens */
  backdrop-filter: blur(2px) saturate(175%) brightness(1.1);
  -webkit-backdrop-filter: blur(2px) saturate(175%) brightness(1.1);
  backdrop-filter: url(#lg-dist) saturate(185%) brightness(1.1);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),         /* whisper of a rim — no white edges */
    inset 0 -6px 14px -8px rgba(120,160,255,.12),  /* cool light caught in the bottom of the glass */
    0 14px 36px rgba(0,0,0,.45);
  transition: filter .45s ease;
}
/* Apple-style hover: the glass itself brightens softly — no white rims */
[data-glass].lit { filter: brightness(1.18) saturate(1.08); }

/* phones (Safari can't do the SVG displacement lens) — richer frosted glass
   with a subtle inner highlight + edge sheen so it still reads as real glass */
@media (pointer: coarse) {
  [data-glass] {
    backdrop-filter: blur(9px) saturate(190%) brightness(1.16) contrast(1.05);
    -webkit-backdrop-filter: blur(9px) saturate(190%) brightness(1.16) contrast(1.05);
    background:
      linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(255,255,255,0) 70%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -8px 16px -10px rgba(120,160,255,.22),
      inset 0 0 0 1px rgba(255,255,255,.08),
      0 14px 36px rgba(0,0,0,.45);
  }
}

/* ============================================================
   SECTION 1 — STAGE (hero room, pinned for the plaque flight)
   ============================================================ */
#stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;            /* heading on top, room fills below — never overlap */
  background:
    radial-gradient(90% 60% at 50% 110%, rgba(70, 30, 140, .14), transparent 60%),
    linear-gradient(180deg, #07060d 0%, #08070f 55%, #0a0814 100%);
}

/* floating dust over the headline zone */
/* pixie dust — rises from the TV up through the heading */
.dust {
  position: absolute;
  z-index: 9;
  top: 0; left: 0;
  width: 100%;
  height: 56vh;                      /* spans heading down to the top of the TV */
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

/* ——— headline ——— */
.hero-head {
  position: relative;
  z-index: 10;
  flex: none;                        /* takes its own height at the top of the column */
  /* top padding clears the fixed BOOK A CALL pill in the corner — without it
     the first headline line runs underneath the pill */
  padding: clamp(52px, 8vh, 84px) 5vw clamp(6px, 1.2vh, 12px);
}

.headline {
  text-transform: uppercase;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;                 /* centred heading + pill */
}

.head-big {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 50px);
  line-height: 1.06;
  letter-spacing: .01em;
  text-wrap: balance;
  /* the slightest film grain inside the letters */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/></svg>"),
    linear-gradient(180deg, #ffffff 30%, #d9d3f0 100%);
  background-blend-mode: multiply;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.head-rest {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(13px, 1.45vw, 21px);
  line-height: 2;                         /* room so the pill never clashes with the line above */
  letter-spacing: .11em;
}

.headline .hl {
  font-weight: 700;
  /* override the heading's grain text-clip so it actually renders green */
  background: none;
  color: var(--acid);
  -webkit-text-fill-color: var(--acid);
  text-shadow: 0 0 26px rgba(125, 252, 2, .55);
}

/* ——— liquid glass pill ——— */
.pill-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 1.1em;
  margin-right: .3em;
  top: -.12em;
}
/* green pulse sits BEHIND the glass so the lens refracts it */
.pill-aura {
  position: absolute;
  left: 1.35em; top: 50%;
  width: 2.1em; height: 2.1em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(125,252,2,.95), rgba(125,252,2,.35) 38%, rgba(125,252,2,0) 70%);
  animation: aura-pulse 2.4s cubic-bezier(.25,.6,.3,1) infinite;
}
@keyframes aura-pulse {
  0%        { transform: translate(-50%, -50%) scale(.55); opacity: .95; }
  70%, 100% { transform: translate(-50%, -50%) scale(1.5); opacity: .25; }
}
.glass-pill {
  position: relative;
  z-index: 1;                         /* above the aura → its backdrop refracts the green pulse */
  display: inline-flex;
  align-items: center;
  gap: .75em;
  top: 0;
  padding: .6em 1.3em .54em;
  font-family: var(--font-body);
  font-size: .95em;
  font-weight: 300;
  letter-spacing: .18em;
  border-radius: 999px;
  white-space: nowrap;
  color: #fff;
}
.glass-pill .slot-reel b { font-weight: 400; }

.pill-dot {
  position: relative;
  width: .62em; height: .62em;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 8px rgba(125,252,2,.9);
}

/* static "3" in the pill */
.pill-num { display: inline-block; font-weight: inherit; }

/* ============================================================
   THE ROOM
   ============================================================ */
.room {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;                    /* fills the space below the heading */
  min-height: 0;
  width: 100%;
  overflow: hidden;                  /* setup can't poke up into the heading */
  /* fade the top edge so the purple room glow blends into the dark heading
     instead of starting with a hard line */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9vh);
  mask-image: linear-gradient(180deg, transparent 0, #000 9vh);
}

.wall { position: absolute; inset: 0 0 9vh 0; }

.wall-glow {
  position: absolute;
  width: 42vw; height: 46vh;
  filter: blur(70px);
  opacity: .5;
}
.wall-glow-l {
  left: -12vw; top: -6vh;
  background: radial-gradient(closest-side, rgba(123, 43, 255, .32), transparent 70%);
}
.wall-glow-r {
  right: -12vw; top: -2vh;
  background: radial-gradient(closest-side, rgba(63, 216, 255, .2), transparent 70%);
}

.wall-strip {
  position: absolute; top: 2vh;
  width: 6px; height: 52vh;
  border-radius: 6px;
  animation: strip-pulse 2.4s ease-in-out infinite;
}
/* white-hot core — fades at the SAME points as the tube so there's no
   doubled "bulb" seam; it's just a brighter centre of one clean tube */
.wall-strip::after {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: linear-gradient(180deg, transparent 6%, #ffffff 22%, #ffffff 78%, transparent 94%);
  box-shadow:
    0 0 7px rgba(255,255,255,1),
    0 0 18px rgba(255,255,255,.9),
    0 0 38px rgba(255,255,255,.65);
}
.wall-strip-l {
  left: 7vw;
  background: linear-gradient(180deg, transparent 6%, #c89aff 22%, #b87aff 78%, transparent 94%);
  box-shadow:
    0 0 4px rgba(235,210,255,1),
    0 0 12px rgba(205,150,255,1),
    0 0 28px rgba(170,90,255,1),
    0 0 70px rgba(150,70,255,.9),
    0 0 150px rgba(139,61,255,.6);
}
.wall-strip-r {
  right: 7vw;
  animation-delay: -1.2s;
  background: linear-gradient(180deg, transparent 6%, #9fe9ff 22%, #6cdcff 78%, transparent 94%);
  box-shadow:
    0 0 4px rgba(225,250,255,1),
    0 0 12px rgba(160,240,255,1),
    0 0 28px rgba(90,225,255,1),
    0 0 70px rgba(63,216,255,.85),
    0 0 150px rgba(63,216,255,.5);
}
@keyframes strip-pulse { 50% { opacity: .5; } }

.floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 11vh;
  background: linear-gradient(180deg, #0b0913 0%, #070610 100%);
}
.floor::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(255,255,255,.06) 30%, rgba(255,255,255,.06) 70%, transparent 96%);
}

/* ——— the setup (stand + tv + lamp + speaker) ——— */
.setup {
  position: absolute;
  left: 50%;
  bottom: 3vh;
  transform: translateX(-50%);
  width: min(1180px, 92vw);
}

/* TV — mounted above the stand with a strong neon halo */
.tv {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 22px);
  transform: translateX(-50%);
  width: min(72vw, 1100px, 62vh * 1.78);
}
.tv-glow {
  position: absolute;
  inset: -34% -18% -14% -18%;
  background:
    radial-gradient(55% 62% at 32% 46%, rgba(150, 70, 255, .85), transparent 70%),
    radial-gradient(55% 62% at 70% 52%, rgba(63, 216, 255, .6), transparent 70%),
    radial-gradient(80% 80% at 50% 30%, rgba(123, 43, 255, .35), transparent 75%);
  filter: blur(38px);
  opacity: .95;
}
.tv-frame {
  position: relative;
  border-radius: 10px;
  padding: 7px;
  background: linear-gradient(180deg, #17171d, #060609);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 0 50px rgba(150, 70, 255, .5),
    0 0 130px rgba(100, 60, 255, .3),
    0 30px 60px rgba(0,0,0,.65);
}
.tv-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  overflow: hidden;
  background: #000;
  animation: crt-on 1.7s cubic-bezier(.25,.75,.25,1) .4s both;
}
@keyframes crt-on {
  0%   { transform: scale(0, .004); opacity: 0; filter: brightness(7); }
  12%  { opacity: 1; }
  42%  { transform: scale(1, .004); filter: brightness(6); }
  58%  { transform: scale(1, .035); filter: brightness(3.4); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}
/* failsafe: if the CRT animation is throttled (tab loaded in the background)
   it can freeze while the screen is a 1px sliver — audio plays, no picture.
   JS adds this class to force the finished state. */
.tv-screen.crt-done {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.tv-video { position: absolute; inset: 0; }
.tv-video > * { width: 100% !important; height: 100% !important; }
.tv-video iframe { border: 0; }

.tv-glare {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,.07) 0%, transparent 26%);
}

/* soundbar */
.soundbar {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: min(30vw, 430px);
  height: clamp(8px, 1.1vw, 13px);
  border-radius: 99px;
  background: linear-gradient(180deg, #1d1d25, #08080c);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 18px rgba(0,0,0,.5);
}
.soundbar-led {
  position: absolute; right: 9%; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  transform: translateY(-50%);
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* speaker — left of the TV on the stand */
.speaker {
  position: absolute;
  left: 4.5%;
  bottom: 100%;                      /* base flush on the stand top */
  z-index: 2;
  height: clamp(110px, 13vw, 180px);
  aspect-ratio: .68;
  border-radius: 8px;
  background: linear-gradient(160deg, #1b1b22, #0a0a0f);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    -14px 0 38px -10px rgba(139,61,255,.25),
    0 14px 28px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(7px, .9vw, 13px);
  padding-top: clamp(8px, 1vw, 15px);   /* drivers sit high on the cabinet */
}
.spk-tweeter {
  width: 38%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #3a3a44, #0c0c11 65%);
  box-shadow: inset 0 0 0 2px #1f1f27, 0 0 0 1px #000;
}
.spk-woofer {
  width: 64%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #34343e, #0a0a0f 70%);
  box-shadow: inset 0 0 0 2px #21212a, 0 0 0 1px #000;
  display: grid; place-items: center;
}
.spk-woofer i {
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, #4a4a56, #15151c 70%);
  animation: woofer 2.4s ease-in-out infinite;
}
@keyframes woofer { 50% { transform: scale(.92); } }

/* lava lamp 3D canvas — right of the TV on the stand */
#lamp3d {
  position: absolute;
  right: 3%;
  bottom: 100%;
  width: clamp(100px, 10.5vw, 160px);
  height: clamp(190px, 20vw, 300px);
  filter:
    drop-shadow(0 0 26px rgba(255, 90, 210, .65))
    drop-shadow(0 0 80px rgba(255, 60, 190, .35));
}

/* ——— TV stand ——— */
.stand { position: relative; width: 100%; }
.stand-top {
  height: 10px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #2c2c36 0%, #15151c 80%);
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset;
}
.stand-body {
  display: flex;
  flex-direction: column;            /* two stacked full-width sections */
  gap: clamp(6px, 0.9vh, 11px);
  padding: 9px 2.5% 10px;
  background: linear-gradient(180deg, #14141b, #0b0b11);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 24px 50px rgba(0,0,0,.6);
}

.shelf {
  position: relative;
  flex: 1;
  border-radius: 5px;
  background: linear-gradient(180deg, #060609, #0a0a12);
  box-shadow:
    inset 0 6px 18px rgba(0,0,0,.85),
    inset 0 -16px 26px -12px rgba(61, 255, 180, .12),
    inset 0 0 0 1px rgba(255,255,255,.03);
}
.shelf::after {
  content: '';
  position: absolute; left: 4%; right: 4%; bottom: 3px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(63,216,255,.0), rgba(61,255,180,.95), rgba(63,216,255,.85), rgba(61,255,180,.0));
  box-shadow:
    0 0 10px rgba(61,255,180,.9),
    0 0 26px rgba(63,216,255,.6),
    0 -10px 30px rgba(61,255,180,.35);
  filter: blur(.5px);
}
/* extra light pooling behind the APPLY NOW glass so the lens has
   something bright to refract */
.shelf-right::before {
  content: '';
  position: absolute; inset: 18% 6% 8% 6%;
  border-radius: 12px;
  background: radial-gradient(70% 90% at 50% 100%,
    rgba(61,255,180,.28),
    rgba(63,216,255,.14) 55%,
    transparent 80%);
  filter: blur(6px);
}

.shelf-left {
  width: 100%;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  height: clamp(52px, 6vh, 78px);
  padding: 5px 3% 8px;
}
.shelf-slot {
  height: 88%;
  aspect-ratio: 320 / 226;
}

.shelf-right { position: relative; display: grid; place-items: center; }
/* purple-green particle dots pooled behind the CTA so the glass refracts them */
.shelf-right::after {
  content: '';
  position: absolute; inset: 8% 6%;
  border-radius: 12px;
  background-image:
    radial-gradient(circle, rgba(170,140,255,.9) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(125,252,2,.85) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(150,235,150,.8) 0 1.5px, transparent 2px);
  background-size: 34px 30px, 46px 40px, 28px 38px;
  background-position: 4px 6px, 20px 16px, 12px 24px;
  opacity: .55;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* top section under the TV — two stacked 3D keycap buttons (same style as
   the bottom-of-page CTA), full width */
.cta-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, .8vh, 10px);
}
.shelf-cta {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  padding: clamp(8px, 1vh, 13px) clamp(20px, 3vw, 44px);
  border-radius: clamp(10px, 1.2vw, 16px);
  text-decoration: none;
  text-align: center;
  background: linear-gradient(180deg, #3a3a44 0%, #2a2a32 52%, #1c1c22 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.16),
    inset 0 -5px 9px rgba(0,0,0,.55),
    0 6px 0 #14141a,
    0 9px 12px rgba(0,0,0,.5),
    0 14px 26px rgba(139, 61, 255, .55);
  transition: transform .14s ease, box-shadow .14s ease;
}
.shelf-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.2),
    inset 0 -5px 9px rgba(0,0,0,.55),
    0 8px 0 #14141a,
    0 12px 14px rgba(0,0,0,.5),
    0 20px 42px rgba(139, 61, 255, .92);
}
.shelf-cta:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.12),
    inset 0 -3px 7px rgba(0,0,0,.55),
    0 2px 0 #14141a,
    0 4px 10px rgba(0,0,0,.5),
    0 12px 22px rgba(160, 90, 255, 1);
}
.cta-engraved {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(15px, 1.9vw, 27px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* pixelated cursor that taps to signal "clickable" */
.cta-cursor {
  position: absolute;
  bottom: 6%;
  right: 10%;
  width: clamp(22px, 2.6vw, 34px);
  height: auto;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.7));
  animation: cta-tap 1.6s ease-in-out infinite;
}
@keyframes cta-tap {
  0%, 100% { transform: translate(0, 0); }
  45%      { transform: translate(-3px, -3px); }
  55%      { transform: translate(-3px, -3px) scale(.84); }   /* the click */
  70%      { transform: translate(0, 0); }
}

/* ——— GET INSTANT ACCESS — floating chained notebook + copy, no chrome ——— */
.buy-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 28px);
  /* the roomy top margin is the "space under BOOK A CALL" the notebook floats in */
  margin-top: clamp(10px, 1.8vh, 22px);
  padding: clamp(6px, 1vh, 12px) clamp(10px, 1.6vw, 22px) clamp(10px, 1.4vh, 16px);
  text-decoration: none;
  transition: filter .18s ease;
}
.buy-link:hover { filter: brightness(1.12); }

/* ——— the notebook ——— */
.book {
  position: relative;
  flex: none;
  width: clamp(56px, 5.6vw, 82px);
  aspect-ratio: 100 / 132;
  transition: transform .2s ease;
}
.buy-link:hover .book { transform: scale(1.06); }

/* acid bloom the whole object sits in */
.book-halo {
  position: absolute;
  inset: -34% -46%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 46%, rgba(125,252,2,.42), rgba(125,252,2,.12) 52%, transparent 76%);
  filter: blur(11px);
  pointer-events: none;
}
/* the levitation itself — everything that leaves the ground goes in here */
.book-float {
  position: absolute;
  inset: 0;
  animation: book-hover 4.6s ease-in-out infinite;
}
@keyframes book-hover {
  0%, 100% { transform: translateY(0)     rotate(-6deg); }
  50%      { transform: translateY(-7px)  rotate(-3.5deg); }
}
/* soft contact shadow that tightens as the book rises */
.book-shadow {
  position: absolute;
  left: 12%; right: 12%; bottom: -11%;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(0,0,0,.72), transparent 74%);
  filter: blur(4px);
  animation: book-shadow 4.6s ease-in-out infinite;
}
@keyframes book-shadow {
  0%, 100% { transform: scaleX(1);   opacity: .8; }
  50%      { transform: scaleX(.82); opacity: .5; }
}

.book-body { position: absolute; inset: 0; }
/* the page block — only its edge peeks past the cover, lit from within */
.book-pages {
  position: absolute;
  top: 4%; bottom: 2%;
  left: 62%; right: -7%;
  border-radius: 2px 4px 4px 2px;
  background:
    linear-gradient(90deg, rgba(180,255,140,.5), rgba(255,255,255,.95) 60%),
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.95) 0 1px,
      rgba(150,200,130,.6) 1px 2.5px);
  box-shadow: 0 0 14px rgba(125,252,2,.9), 0 0 30px rgba(125,252,2,.55);
}
/* the cover sits on top, spine down the left */
.book-cover {
  position: absolute;
  inset: 0 4% 0 0;
  display: grid;
  align-content: start;
  justify-items: center;
  padding-top: 15%;
  border-radius: 3px 7px 7px 3px;
  background:
    linear-gradient(100deg, rgba(255,255,255,.1) 0 14%, transparent 42%),
    linear-gradient(180deg, #241a3d 0%, #17102a 55%, #0e0a1c 100%);
  border: 1px solid rgba(125,252,2,.22);
  box-shadow:
    inset 3px 0 0 rgba(0,0,0,.55),          /* spine shadow */
    inset 5px 0 0 rgba(255,255,255,.07),
    0 6px 14px rgba(0,0,0,.6);
}
.book-ico { display: grid; place-items: center; width: 44%; }
.book-ico svg {
  width: 100%; height: auto;
  fill: none;
  stroke: var(--acid);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(125,252,2,.9)) drop-shadow(0 0 14px rgba(125,252,2,.55));
}
/* the light escaping from the seam between cover and pages */
.book-leak {
  position: absolute;
  top: 2%; bottom: 0%; right: -4%;
  width: 15%;
  background: linear-gradient(90deg, transparent, rgba(210,255,150,1) 45%, rgba(125,252,2,.55));
  filter: blur(4px);
  mix-blend-mode: screen;
  animation: book-leak 4.6s ease-in-out infinite;
}
@keyframes book-leak {
  0%, 100% { opacity: .75; }
  50%      { opacity: 1; }
}

/* ——— chain + padlock, drawn over the cover ——— */
.book-chain {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.book-chain ellipse {
  fill: none;
  stroke: #b6bcc9;
  stroke-width: 2.6;
}
.chain-links, .chain-drop {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.85));
}
.chain-drop { animation: lock-swing 4.6s ease-in-out infinite; transform-origin: 48px 86px; }
@keyframes lock-swing {
  0%, 100% { transform: rotate(-3.5deg); }
  50%      { transform: rotate(3.5deg); }
}
.lock-shackle {
  fill: none;
  stroke: #cdd3de;
  stroke-width: 4;
  stroke-linecap: round;
}
.lock-body {
  fill: #9aa2b1;
  stroke: #6d7484;
  stroke-width: 1.2;
}
.lock-hole {
  fill: none;
  stroke: #2a2f3a;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* ——— the copy beside it ——— */
.buy-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(4px, .6vh, 9px);
  min-width: 0;
}
.buy-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(15px, 2vw, 30px);
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 0 22px rgba(125,252,2,.25);
}
.buy-price {
  display: inline-flex;
  align-items: baseline;
  gap: .55em;
  font-family: var(--font-body);
  line-height: 1;
}
.buy-was {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(13px, 1.7vw, 25px);
  color: rgba(244,242,255,.42);
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255,90,90,.85);
}
.buy-now {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(16px, 2.1vw, 32px);
  letter-spacing: .02em;
  color: var(--acid);
  text-shadow: 0 0 18px rgba(125,252,2,.5);
}

.stand-legs {
  display: flex;
  justify-content: space-between;
  padding: 0 6%;
}
.stand-legs span {
  width: 14px; height: 16px;
  background: linear-gradient(180deg, #1c1c24, #060609);
  border-radius: 0 0 3px 3px;
}

.stand-underglow {
  position: absolute;
  left: 2%; right: 2%; bottom: -3vh;
  height: 7vh;
  background:
    radial-gradient(45% 100% at 32% 0%, rgba(139,61,255,.5), transparent 75%),
    radial-gradient(45% 100% at 68% 0%, rgba(63,216,255,.36), transparent 75%);
  filter: blur(16px);
}
.floor-reflection {
  position: absolute;
  left: 8%; right: 8%; bottom: -5.5vh;
  height: 4vh;
  background: linear-gradient(90deg, transparent, rgba(139,61,255,.16) 30%, rgba(63,216,255,.13) 70%, transparent);
  filter: blur(8px);
  transform: scaleY(-1);
}

/* ============================================================
   GLASS PLAQUES (stage layer — fly from shelf to results column)
   ============================================================ */
.plaque-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  visibility: hidden;                /* shown by JS once placed */
}
.plaque {
  position: absolute;
  left: 0; top: 0;
  width: clamp(260px, 23vw, 320px);
  will-change: transform;
}
.p-glass {
  position: relative;
  aspect-ratio: 320 / 200;
  /* just the certificate photo — no frame, border or glass */
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.55));
}
/* the certificate image — shown whole, nothing cropped, no letterbox box */
.p-img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
/* glass frame decorations are unused now that real photos are in */
.p-sheen,
.p-brand, .p-cert, .p-amount, .p-meta { display: none; }
.p-brand {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(9px, .8vw, 11px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(244,242,255,.85);
}
.p-cert {
  font-size: clamp(8px, .68vw, 10px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.p-amount {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 0 24px rgba(63,216,255,.4);
}
.p-meta {
  font-size: clamp(8.5px, .72vw, 10.5px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(154,147,184,.95);
}
.p-base { display: none; }            /* no pedestal — just the photo */

/* ============================================================
   RESULTS OVERLAY
   ============================================================ */
.scene-dim {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none;
  opacity: 0;
  /* fully opaque — the TV disappears behind the results */
  background:
    radial-gradient(60% 40% at 85% 0%, rgba(123,43,255,.08), transparent 70%),
    linear-gradient(180deg, #0a0814, #07060d 30%, #06050b);
}

.results {
  position: absolute;
  inset: 0;
  z-index: 6;
  padding: clamp(18px, 4vh, 44px) 6vw 4vh;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.results-head {
  align-self: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}
.results-head h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 76px);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.05;
}
.result-rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-top: 1vh;
}
.result-row {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
}
.col-slot {
  height: min(20vh, 13.5vw);
  aspect-ratio: 320 / 226;
  flex: none;
}
.result-text {
  max-width: 560px;
  opacity: 0;
  visibility: hidden;
}
.result-text h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 22px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--acid);
  text-shadow: 0 0 22px rgba(125,252,2,.35);
}
.result-text p {
  margin-top: 8px;
  color: rgba(244,242,255,.82);
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.65;
}
.r-by {
  display: inline-block;
  margin-top: 8px;
  font-size: clamp(10px, .85vw, 12px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* scroll cue — premium terminal style */
.scroll-cue {
  position: absolute;
  z-index: 10;
  bottom: 2.6vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.scroll-cue .cue {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .82);
  text-shadow:
    0 0 12px rgba(255, 255, 255, .5),
    0 0 34px rgba(255, 255, 255, .22);
  animation: cue-glow 3s ease-in-out infinite;
}
@keyframes cue-glow { 50% { opacity: .55; } }

/* ============================================================
   SECTION 2 — APPLY
   ============================================================ */
#apply {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(56px, 10vh, 130px);
  padding: 8vh 5vw 10vh;
  /* top edge matches where the results section ends (#06050b) so the two
     sections blend with no hard line; the glows ease in lower down */
  background:
    radial-gradient(70% 50% at 12% 26%, rgba(123,43,255,.1), transparent 70%),
    radial-gradient(70% 50% at 88% 30%, rgba(63,216,255,.07), transparent 70%),
    linear-gradient(180deg, #06050b 0%, #060510 14%, #050409 100%);
}

/* two stacked tickers (certs + testimonials) */
.tickers {
  width: min(1200px, 94vw);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 26px);
  align-items: center;
}
.tickers .ticker { width: 100%; }

/* ——— image ticker ——— */
.ticker {
  width: min(1200px, 94vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker-track {
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
}
.tick {
  position: relative;
  height: clamp(120px, 13vw, 170px);   /* fixed height; width follows the image */
  flex: none;
  border-radius: 0;                    /* sharp corners */
  overflow: hidden;
  background: linear-gradient(160deg, #14141d, #0a0a11);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.4);
}
.tick img {
  display: block;
  height: 100%;
  width: auto;                         /* full certificate, nothing cropped */
}

/* testimonials row — white review cards, scrolls the opposite way */
.tick-testi {
  height: clamp(116px, 13vw, 172px);
  border-radius: 12px;
  background: #313338;                  /* discord dark */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.45);
}

/* ——— MacBook ——— */
.macbook {
  position: relative;
  width: min(560px, 82vw);
  perspective: 1500px;
  z-index: 2;
}
.mb-lid {
  position: relative;
  width: 87%;
  margin: 0 auto;
  aspect-ratio: 1.58;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transform: rotateX(-88deg);          /* closed — never dips below the hinge */
  will-change: transform;
}
.mb-back {
  position: absolute; inset: 0;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, #2e2e36, #121218);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  transform: rotateY(180deg);
  backface-visibility: hidden;
  display: grid; place-items: center;
}
.mb-logo {
  width: 30px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,.1) 70%);
  filter: blur(1px);
}
.mb-screen {
  position: absolute; inset: 0;
  border-radius: 12px 12px 0 0;
  background: #07070c;
  border: 8px solid #14141a;
  border-bottom-width: 13px;
  backface-visibility: hidden;
  overflow: hidden;
  opacity: .55;
}
.mb-screen #chart { position: absolute; inset: 0; width: 100%; height: 100%; }

.screen-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  font-size: clamp(7px, 1.1vw, 10px);
  letter-spacing: .1em;
  color: rgba(244,242,255,.7);
  background: linear-gradient(180deg, rgba(10,10,16,.92), rgba(10,10,16,0));
}
.st-funded {
  padding: 2px 9px;
  border-radius: 99px;
  color: #2fe089;
  border: 1px solid rgba(38, 208, 124, .45);
  background: rgba(38, 208, 124, .08);
}

.pnl-card {
  position: absolute;
  z-index: 2;
  left: 4.5%;
  top: 17%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 13px;
  border-radius: 8px;
  background: rgba(10, 14, 12, .82);
  border: 1px solid rgba(38, 208, 124, .3);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 26px rgba(38, 208, 124, .15);
}
.pnl-label {
  font-size: clamp(6.5px, .95vw, 9px);
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
}
.pnl-value {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(13px, 2.3vw, 22px);
  color: #2fe089;
  text-shadow: 0 0 18px rgba(38, 208, 124, .6);
}

.payout-toast {
  position: absolute;
  z-index: 2;
  right: 4.5%;
  bottom: 8%;
  padding: 7px 13px;
  border-radius: 99px;
  font-size: clamp(7px, 1vw, 10px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #06140d;
  background: #26d07c;
  box-shadow: 0 0 26px rgba(38, 208, 124, .55);
  opacity: 0;
  visibility: hidden;
}

.mb-base {
  position: relative;
  width: 100%;
  height: clamp(10px, 1.7vw, 15px);
  background: linear-gradient(180deg, #34343d 0%, #1a1a21 40%, #0a0a0f 100%);
  border-radius: 3px 3px 12px 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 18px 40px rgba(0,0,0,.65);
}
.mb-base::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 11%; height: 38%;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #08080c, #1c1c24);
}
.mb-shadow {
  position: absolute;
  left: 6%; right: 6%; bottom: calc(clamp(10px, 1.7vw, 15px) * -1.6);
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(0,0,0,.7), transparent 75%);
  filter: blur(6px);
}

/* ——— APPLY NOW — dark-grey 3D key, concentrated purple glow underneath ——— */
.apply-btn {
  position: relative;
  z-index: 2;
  /* sit closer to the event details above (counteracts the #apply section gap) */
  margin-top: clamp(-96px, -7vh, -48px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 2.6vw, 32px) clamp(44px, 7vw, 104px);
  border-radius: clamp(16px, 1.8vw, 22px);
  text-decoration: none;
  color: #fff;
  text-align: center;
  /* dark-grey keycap face — light enough to read the edges */
  background: linear-gradient(180deg, #3a3a44 0%, #2a2a32 52%, #1c1c22 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.16),       /* lit top edge */
    inset 0 -5px 9px rgba(0,0,0,.55),            /* shaded underside */
    0 9px 0 #14141a,                              /* tall extruded body → 3D */
    0 12px 14px rgba(0,0,0,.5),
    0 18px 30px rgba(139, 61, 255, .6);          /* concentrated glow, tight under */
  transition: transform .14s ease, box-shadow .14s ease;
}
.apply-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.2),
    inset 0 -5px 9px rgba(0,0,0,.55),
    0 12px 0 #14141a,
    0 16px 18px rgba(0,0,0,.5),
    0 24px 50px rgba(139, 61, 255, .95),         /* HELLA glow on hover */
    0 34px 90px rgba(139, 61, 255, .6);
}
.apply-btn:active {                              /* pressed down — glow only on the bottom */
  transform: translateY(7px);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.12),
    inset 0 -3px 7px rgba(0,0,0,.55),
    0 2px 0 #14141a,
    0 4px 10px rgba(0,0,0,.5),
    0 14px 26px rgba(160, 90, 255, 1);           /* short, bottom-only bloom */
}
.btn-text {
  display: block;
  font-family: var(--font-body);          /* same family as the 3-spots pill */
  font-weight: 500;                        /* a touch thicker */
  font-size: clamp(26px, 4.4vw, 56px);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* ============================================================
   FLIP-PHONE CTA — the closing "book a call" as a real handset:
   tall lid + green LCD, hinge barrel, soft keys, T9 keypad
   ============================================================ */
.flip-cta {
  position: relative;
  z-index: 2;
  margin-top: clamp(-56px, -4vh, -24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(168px, 16vw, 218px);
  text-decoration: none;
  transition: transform .2s ease;
}
.flip-cta:hover  { transform: translateY(-5px); }
.flip-cta:active { transform: translateY(2px) scale(.99); }

/* purple bloom pooling under the phone */
.flip-glow {
  position: absolute;
  inset: 12% -22% -5%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 62%, rgba(139,61,255,.7), rgba(139,61,255,.2) 55%, transparent 78%);
  filter: blur(22px);
  pointer-events: none;
}

/* plastic sheen raked across each shell half */
.flip-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(104deg,
    rgba(255,255,255,.13) 0 12%,
    rgba(255,255,255,.03) 24%,
    transparent 46%,
    rgba(255,255,255,.045) 82%,
    transparent 100%);
}

/* ——— upper shell ——— */
.flip-lid {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 11px 11px 13px;
  border-radius: 22px 22px 6px 6px;
  background: linear-gradient(180deg, #40404b 0%, #282831 55%, #1a1a21 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 -6px 12px rgba(0,0,0,.5),
    0 6px 16px rgba(0,0,0,.5);
}
/* lens · earpiece grille · notification LED */
.flip-topbar {
  width: 74%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.flip-lens {
  width: 5px; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 38% 32%, #4b5566, #08080c 72%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 4px rgba(63,216,255,.35);
}
.flip-earpiece {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, #0b0b10 0 1.5px, #22222b 1.5px 3px);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06);
}
.flip-led {
  width: 4px; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 6px rgba(125,252,2,.9);
  animation: flip-blink 3.2s ease-in-out infinite;
}
@keyframes flip-blink {
  0%, 88%, 100% { opacity: .25; }
  92%           { opacity: 1; }
}

/* classic backlit-green LCD, taller than it is wide */
.flip-screen {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 7px;
  border-radius: 5px;
  background: linear-gradient(180deg, #082a14 0%, #041b0d 70%, #06210f 100%);
  border: 1px solid rgba(125,252,2,.2);
  box-shadow:
    inset 0 0 26px rgba(125,252,2,.16),
    inset 0 2px 5px rgba(0,0,0,.75),
    0 1px 0 rgba(255,255,255,.06);
}
.flip-status {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 7px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(125,252,2,.8);
}
.flip-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 7px; }
.flip-bars i {
  width: 2px;
  border-radius: 1px;
  background: var(--acid);
  box-shadow: 0 0 4px rgba(125,252,2,.8);
}
.flip-bars i:nth-child(1) { height: 32%; }
.flip-bars i:nth-child(2) { height: 55%; }
.flip-bars i:nth-child(3) { height: 78%; }
.flip-bars i:nth-child(4) { height: 100%; }
.flip-batt {
  position: relative;
  width: 12px; height: 6px;
  border: 1px solid rgba(125,252,2,.6);
  border-radius: 1.5px;
}
.flip-batt::before {
  content: '';
  position: absolute; inset: 1px; right: 3px;
  background: var(--acid);
  box-shadow: 0 0 5px rgba(125,252,2,.8);
}
.flip-batt::after {
  content: '';
  position: absolute; right: -3px; top: 1.5px;
  width: 1.5px; height: 3px;
  border-radius: 0 1px 1px 0;
  background: rgba(125,252,2,.6);
}
.flip-text {
  margin: 3px 0 1px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(14px, 1.6vw, 21px);
  line-height: 1.08;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--acid);
  text-shadow: 0 0 10px rgba(125,252,2,.6), 0 0 28px rgba(125,252,2,.3);
}
.flip-sub {
  font-family: var(--font-body);
  font-size: 7.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(125,252,2,.6);
}
/* on-screen labels sitting above the physical soft keys */
.flip-soft-labels {
  width: 100%;
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid rgba(125,252,2,.18);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 7px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(125,252,2,.75);
}
.flip-soft-labels i { font-style: normal; }
.flip-brand {
  font-family: var(--font-body);
  font-size: 6.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(244,242,255,.3);
}

/* ——— hinge barrel — bridges the halves, sits proud of both ——— */
.flip-hinge {
  position: relative;
  z-index: 3;
  width: 78%;
  height: 10px;
  margin: -2px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  border-radius: 5px;
  background: linear-gradient(180deg, #545461 0%, #2d2d38 52%, #17171d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 6px rgba(0,0,0,.7);
}
.flip-hinge i {
  width: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(62% 62% at 38% 32%, #666673, #16161c 78%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}

/* ——— lower shell ——— */
.flip-body {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 11px 12px 13px;
  border-radius: 6px 6px 24px 24px;
  background: linear-gradient(180deg, #35353f 0%, #23232c 55%, #15151b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 -6px 12px rgba(0,0,0,.55),
    0 9px 0 #101015,
    0 14px 26px rgba(0,0,0,.55),
    0 20px 44px rgba(139,61,255,.5);
}

/* soft keys flanking the d-pad */
.flip-controls {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flip-soft {
  width: 24%;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(180deg, #3a3a45, #202028);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 0 #101015;
}
.flip-soft-l { transform: skewX(9deg); }
.flip-soft-r { transform: skewX(-9deg); }

.flip-nav {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(32px, 3.2vw, 42px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(62% 62% at 50% 32%, #4e4e5b, #23232c 72%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(0,0,0,.6);
}
/* centre OK button */
.flip-nav::after {
  content: '';
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #45454f, #26262e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 3px rgba(0,0,0,.7);
}

/* green send key + red end key */
.flip-callrow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flip-key-call, .flip-key-end {
  display: grid;
  place-items: center;
  width: 30%;
  height: 13px;
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 0 #101015;
}
.flip-key-call {
  background: linear-gradient(180deg, #5ea60c, #33660a);
  animation: flip-ring 2s ease-in-out infinite;
}
@keyframes flip-ring {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 0 #101015, 0 0 6px rgba(125,252,2,.35); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 0 #101015, 0 0 16px rgba(125,252,2,.95); }
}
.flip-key-end { background: linear-gradient(180deg, #a6303c, #661c25); }
.flip-key-call svg, .flip-key-end svg {
  width: 8px; height: 8px;
  fill: rgba(255,255,255,.9);
}
.flip-key-end svg { transform: rotate(135deg); }

/* T9 keypad */
.flip-keys {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 5px;
}
.flip-keys b {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 0 4px;
  border-radius: 5px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(8px, .8vw, 10px);
  line-height: 1;
  color: rgba(244,242,255,.75);
  background: linear-gradient(180deg, #383842, #202029);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 2px 0 #101015;
}
.flip-keys b i {
  font-style: normal;
  font-size: 5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(244,242,255,.4);
}
.flip-cta:hover .flip-keys b { color: rgba(244,242,255,.92); }

/* mic grille at the chin */
.flip-mic {
  width: 22%;
  height: 3px;
  margin-top: 1px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #0b0b10 0 1.5px, #26262f 1.5px 3px);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.9);
}

/* ——— the "click" hint pointing at the handset ——— */
.flip-hint {
  position: absolute;
  right: 100%;
  top: 4%;
  margin-right: clamp(2px, 1vw, 14px);
  width: clamp(64px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  animation: hint-nudge 2.6s ease-in-out infinite;
}
@keyframes hint-nudge {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(4px, 3px); }
}
.flip-hint-word {
  font-family: 'Caveat', var(--font-body);
  font-weight: 600;
  font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1;
  color: var(--acid);
  text-shadow: 0 0 14px rgba(125,252,2,.55);
  transform: rotate(-9deg);
}
.flip-hint-arrow {
  width: 100%;
  height: auto;
  margin-top: 2px;
  fill: none;
  stroke: var(--acid);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(125,252,2,.55));
}

/* 3D Discord badge — pops in beside the button when the setup completes */
.discord-pop {
  position: absolute;
  right: clamp(-86px, -6vw, -56px);
  top: -18%;
  width: clamp(48px, 5vw, 72px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 26%;
  color: #fff;
  background: linear-gradient(145deg, #6c79ff 0%, #5865f2 45%, #3d49d6 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.45),
    inset 0 -4px 6px rgba(20, 25, 110, .8),
    0 6px 0 #2f3ab2,                       /* extruded edge — the 3D depth */
    0 14px 28px rgba(30, 38, 160, .5),
    0 0 44px rgba(88, 101, 242, .45);
  transform: rotate(8deg);
  opacity: 0;
  visibility: hidden;
  animation: discord-float 3.2s ease-in-out infinite;
}
.discord-pop svg { width: 58%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
@keyframes discord-float { 50% { translate: 0 -7px; } }

/* ============================================================
   CHART (inside MacBook screen) — TradingView dark, red/black
   ============================================================ */
#chart { background: #0d0d11; }
#chart .candle { transform-box: fill-box; }
#chart .candles-glow { filter: drop-shadow(0 0 4px rgba(38, 208, 124, .45)); }
#chart .grid { stroke: rgba(255,255,255,.045); stroke-width: 1; }
#chart .axis-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  fill: rgba(255,255,255,.3);
}
#chart .watermark {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: .2em;
  fill: rgba(255,255,255,.04);
}
#chart .marker-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  letter-spacing: .12em;
  fill: #26d07c;
}
#chart .tp-label { fill: #26d07c; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px) {
  /* heading: a touch smaller, stretched nearly edge to edge.
     top padding keeps the first line clear of the fixed corner CTA */
  .hero-head { padding: clamp(42px, 6vh, 54px) 1.5vw clamp(4px, 1vh, 10px); }
  .headline { max-width: 100%; }
  .head-big { font-size: clamp(27px, 8.7vw, 46px); line-height: 1.06; }
  .head-rest { font-size: clamp(12px, 3.4vw, 17px); line-height: 1.5; margin-top: 8px; }

  .room { height: 66vh; }
  .setup { bottom: 4vh; }
  .tv { width: min(96vw, 56vh * 1.78); }
  .soundbar { width: 52vw; }
  .speaker { height: clamp(64px, 17vw, 100px); left: 1.5%; }
  #lamp3d { width: clamp(60px, 15vw, 90px); height: clamp(115px, 29vw, 175px); right: 1%; }
  .stand-body { gap: 8px; }
  .shelf-left { height: clamp(54px, 9vw, 80px); }
  .shelf-cta { padding: clamp(9px, 2.4vw, 14px) 4vw; border-radius: 10px; }
  .cta-engraved { font-size: clamp(13px, 3.8vw, 20px); letter-spacing: .12em; white-space: nowrap; }
  .cta-cursor { bottom: 10%; right: 6%; }

  /* compact results so all three testimonials fit in the pinned screen */
  .results { padding: 8vh 5vw 3vh; }
  .results-head { align-self: flex-start; text-align: left; }
  .results-head h2 { font-size: clamp(28px, 7vw, 42px); }
  .result-rows { gap: 2vh; }
  .result-row { gap: 12px; align-items: flex-start; }
  .col-slot { height: min(11vh, 24vw); }
  .result-text { flex: 1 1 auto; min-width: 0; max-width: none; }  /* wrap inside the screen */
  .result-text h3 { font-size: clamp(12.5px, 3.4vw, 16px); }
  .result-text p { font-size: clamp(10.5px, 2.9vw, 13px); line-height: 1.4; margin-top: 5px; }
  .result-text .r-by { font-size: clamp(9px, 2.4vw, 11px); margin-top: 5px; }

  .plaque { width: clamp(130px, 38vw, 190px); }

  .macbook { width: 88vw; }
  .apply-btn { margin-top: clamp(-70px, -5vh, -34px); }
  .ticker { margin-bottom: 3vh; }
  .tick { height: clamp(96px, 26vw, 130px); }
  .discord-pop { right: -10vw; top: -34%; }
}

@media (max-height: 700px) and (min-width: 881px) {
  .tv { width: min(58vw, 48vh * 1.78); }
}

/* respect reduced motion for ambient loops */
@media (prefers-reduced-motion: reduce) {
  .grain, .tv-screen, .scroll-cue .cue, .pill-aura,
  .spk-woofer i, .wall-strip, .discord-pop, .cta-cursor,
  .flip-key-call, .flip-led, .flip-hint,
  .book-float, .book-shadow, .book-leak, .chain-drop { animation: none !important; }
}

/* head-rest now holds only the spots pill — keep it centred & airy */
.head-rest { text-align: center; }

/* ============================================================
   SHARED SECTION TITLE (Termina branding, same as the headings)
   ============================================================ */
.section-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 48px);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.06;
  text-wrap: balance;
  background: linear-gradient(180deg, #ffffff 30%, #d9d3f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


/* ============================================================
   FLOATING LIQUID-GLASS CTA — pinned to the bottom-right corner
   ============================================================ */
.float-cta {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  top: clamp(16px, 2.4vh, 26px);
  z-index: 90;                         /* above the vignette */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(13px, 1.3vw, 17px) clamp(22px, 2vw, 32px);
  border-radius: 999px;
  text-decoration: none;
  /* lightweight solid glass — no SVG lens / backdrop-filter (kills scroll jank) */
  background: rgba(26, 22, 38, .78);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 26px rgba(139,61,255,.45);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* tiny purple glow behind the pill (static — no per-frame animation) */
.float-glow {
  position: absolute;
  inset: -10px -8px -14px -8px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(60% 100% at 50% 100%, rgba(139,61,255,.6), rgba(139,61,255,.2) 55%, transparent 78%);
  filter: blur(12px);
  pointer-events: none;
}
.float-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(12px, 1.15vw, 15px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  white-space: nowrap;
}
.float-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(139,61,255,.55);
}
/* compact pill on narrow screens — also means the headline needs less
   top clearance, which matters on a 100vh hero */
@media (pointer: coarse), (max-width: 880px) {
  .float-cta { padding: 10px 15px; right: 10px; top: 6px; }
  .float-text { font-size: 11px; letter-spacing: .12em; }
}

/* ============================================================
   TESTIMONIALS — the MacBook, then a 3 + 2 grid of video slots
   ============================================================ */
.testimonials {
  width: min(1180px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(34px, 6vh, 68px);
  text-align: center;
}
.testimonials .event-laptop { display: flex; justify-content: center; width: 100%; }
.testimonials .macbook { margin: 0; }

/* 6 columns so three cards span 2 each, and the last row of two centres */
.testi-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(22px, 3vw, 40px) clamp(16px, 2.2vw, 32px);
}
.testi-slot { grid-column: span 2; display: flex; flex-direction: column; gap: 14px; }
.testi-slot:nth-child(4) { grid-column: 2 / span 2; }
.testi-slot:nth-child(5) { grid-column: 4 / span 2; }

/* the 16:9 frame — holds the Wistia player once a media ID is set */
.testi-video {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(10px, 1.1vw, 16px);
  background:
    radial-gradient(70% 70% at 50% 30%, rgba(139,61,255,.16), rgba(63,216,255,.05) 70%, transparent),
    linear-gradient(180deg, #0b0a14, #07060d);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 34px rgba(139,61,255,.18);
}
.testi-video wistia-player { display: block; width: 100%; }
.testi-video.has-video { place-items: stretch; }

/* placeholder play glyph — same glowing-tile language as the buy icon */
.testi-ph {
  display: grid;
  place-items: center;
  width: clamp(42px, 4vw, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(70% 70% at 50% 30%, rgba(139,61,255,.22), rgba(63,216,255,.06) 70%, transparent);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 26px rgba(139,61,255,.2);
}
.testi-ph svg {
  width: 58%; height: 58%;
  fill: var(--cyan);
  stroke: none;
  filter: drop-shadow(0 0 6px rgba(63,216,255,.85)) drop-shadow(0 0 16px rgba(139,61,255,.5));
}
.testi-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(12px, 1.05vw, 15px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ============================================================
   ABOUT ARTAN — photo + text side by side
   ============================================================ */
.about {
  width: min(1100px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-title { margin-bottom: clamp(22px, 4vh, 46px); text-align: center; }
.about-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
}
.about-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, #16121f, #0a0810);
  border: 1px solid rgba(255,255,255,.07);
  /* tiny purple glow behind the photo */
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 44px rgba(139,61,255,.32), 0 0 90px rgba(139,61,255,.16);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* placeholder shown until a real photo is dropped at assets/about/artan.jpg */
.about-photo.no-img::after {
  content: 'ARTAN';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 40px);
  letter-spacing: .2em;
  color: rgba(244,242,255,.18);
  background: radial-gradient(80% 60% at 50% 35%, rgba(139,61,255,.18), transparent 70%);
}
.about-text .section-title { margin-bottom: clamp(14px, 2.4vh, 24px); }
.about-text p {
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.7;
  color: rgba(244,242,255,.78);
}
.about-text p + p { margin-top: 14px; }

/* ============================================================
   RESPONSIVE — new sections
   ============================================================ */
@media (max-width: 880px) {
  /* two per row — cards 1–4 pair up, card 5 centres underneath */
  .testi-grid { grid-template-columns: repeat(4, 1fr); gap: 24px 18px; }
  .testi-slot,
  .testi-slot:nth-child(4) { grid-column: span 2; }
  .testi-slot:nth-child(5) { grid-column: 2 / span 2; }

  .about-row {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
    text-align: center;
  }
  .about-photo { width: min(320px, 80vw); }
  .freepdf-badge { padding: 10px 18px 10px 12px; }
}

@media (max-width: 560px) {
  .testi-grid { grid-template-columns: 1fr; }
  .testi-slot,
  .testi-slot:nth-child(4),
  .testi-slot:nth-child(5) { grid-column: 1; }
}