/* The UNIVA 10x Plan - /test2 v3: the MC+-derived structure (poster hero,
   glass chips, tilted mosaic wall, offer cards, stage-light beam,
   phone cascade, white finale) re-skinned in the ORIGINAL Univa colour theme. Colours come
   from /css/tokens.css: pale-blue canvas, deep-blue feature surfaces (never
   black), vivid blue accents, pill-everything. */

@import url("/css/tokens.css");

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Varela Round";
  src: url("/fonts/varela-round.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* derived from house tokens */
  --glow: rgba(37, 99, 255, 0.35);
  --glow-soft: rgba(37, 99, 255, 0.18);
  --grid-line: rgba(37, 99, 255, 0.12);
  --grid-line-dark: rgba(156, 192, 255, 0.16);
  --font: var(--font-sans);
  --r-card: 1.5rem;
  --sec-gap: clamp(6rem, 16vh, 11rem);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; background: var(--bg); overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; padding: 0; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.skip-link {
  position: fixed; top: -100%; left: 1rem; z-index: 200;
  background: var(--ink); color: var(--on-dark);
  padding: 0.6rem 1.2rem; border-radius: var(--r-pill);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- Nav ---------- */

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem var(--gutter);
  background: rgba(238, 244, 255, 0.85);
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(10px);
}
/* The official UNIVA mark replaces the text wordmark (CSS-only swap, so the
   markup keeps a readable label for screen readers and no-image fallback). */
.brand {
  display: block;
  height: clamp(1.65rem, 2.6vw, 2.35rem);
  aspect-ratio: 760 / 432;
  background: url("/univa-logo.png") left center / contain no-repeat;
  font-size: 0; line-height: 0; color: transparent;
}
.brand-dot { display: none; }
.nav-cta { display: flex; gap: 0.6rem; align-items: center; }

/* ---------- Buttons (house pills) ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  font-size: 0.85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.02em;
  padding: 0.7rem 1.5rem;
  transition: transform 0.4s var(--ease-pill), box-shadow 0.25s ease, background-color 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: scale(1.06); }
.btn-big { padding: 0.95rem 2.1rem; font-size: 0.95rem; }

/* primary: deep ink pill (house pill-dark) */
.btn-gold {
  background: var(--ink);
  color: var(--on-dark);
  box-shadow: 0 10px 28px -10px rgba(16, 42, 102, 0.55);
}
.btn-gold:hover { background: var(--blue-deep); }

/* accent: brand-blue gradient pill */
.btn-magenta {
  background: linear-gradient(90deg, var(--blue), var(--blue-bright));
  color: #fff;
  box-shadow: 0 10px 28px -10px var(--glow);
}
.btn-magenta:hover { box-shadow: 0 14px 34px -10px rgba(37, 99, 255, 0.6); }

/* secondary: soft light pill (house pill-light) */
.btn-green {
  background: var(--soft);
  color: var(--ink);
}
.btn-green:hover { background: var(--blue-light); }

.btn-ghost {
  background: transparent; color: var(--muted);
  box-shadow: inset 0 0 0 2px var(--soft);
}
.btn-ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 2px var(--blue-light); }

.btn-navy-ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--soft);
}
.btn-navy-ghost:hover { box-shadow: inset 0 0 0 2px var(--blue); }

.btn-wa {
  background: var(--ink);
  color: var(--on-dark);
  padding: 0.55rem 1.2rem;
  font-size: 0.8rem;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

/* ---------- Hero ---------- */

.hero { position: relative; overflow: clip; padding-bottom: clamp(1.5rem, 5vh, 4rem); }

/* The two founders flank the hero copy, cut at the waist and standing on the
   section's bottom edge so the crop reads as framing rather than a chop. They
   sit outside the 60rem text column on wide screens and step out of the way
   entirely once there is no room left for them. */
.founder {
  position: absolute; bottom: 0; z-index: 1;
  margin: 0;
  outline: none;
}
.founder img {
  height: clamp(16rem, 30vw, 29rem); width: auto;
  /* the waist cut dissolves into the canvas instead of ending on a hard line,
     which on a flat background would read as a mistake rather than a crop.
     (The mask lives on the image so the name pill can float above the head.) */
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
/* Hover (or tap / focus) a founder and their name pops up over the middle of the figure. */
.founder-name {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + 0.6rem)) scale(0.96);
  display: grid; justify-items: center; gap: 0.05rem;
  background: var(--ink); color: var(--on-dark);
  font-size: 0.95rem; font-weight: 700; letter-spacing: var(--track-3);
  line-height: 1.15; white-space: nowrap;
  border-radius: var(--r-pill);
  padding: 0.55rem 1.1rem 0.6rem;
  box-shadow: 0 16px 36px -16px rgba(16, 42, 102, 0.6);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.45s var(--ease-spring);
}
.founder-name small { font-size: 0.68rem; font-weight: 600; color: var(--blue-light); letter-spacing: 0.06em; text-transform: uppercase; }
.founder:hover .founder-name, .founder:focus-visible .founder-name, .founder:focus-within .founder-name {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (prefers-reduced-motion: reduce) { .founder-name { transition: opacity 0.2s ease; } }
.founder-l { left: clamp(0.5rem, 3vw, 4rem); }
.founder-r { right: clamp(0.5rem, 3vw, 4rem); }
/* On a phone there is no room beside the copy, so the pair moves under it:
   still standing on the hero's bottom edge, one at each side, with the hero
   holding open exactly as much room as they are tall. */
@media (max-width: 1100px) {
  .hero { padding-bottom: clamp(11rem, 64vw, 21rem); }
  .founder img { height: clamp(11rem, 56vw, 19rem); }
  .founder-l { left: max(-0.5rem, -2vw); }
  .founder-r { right: max(-0.5rem, -2vw); }
}
.hero-inner {
  position: relative;
  display: grid; gap: 1.6rem; justify-items: center;
  max-width: 60rem; margin-inline: auto;
  padding: clamp(2.5rem, 6vh, 4.5rem) var(--gutter) 0;
  text-align: center;
  z-index: 2;
}

/* the poster in its white frame on the pale wall */
.poster-frame {
  background: #fff;
  border-radius: 1.4rem;
  padding: 0.85rem;
  width: min(30rem, 92vw);
  box-shadow: 0 30px 80px -30px rgba(16, 42, 102, 0.45), 0 0 60px -20px var(--glow-soft);
}
.poster {
  position: relative;
  display: grid; gap: 0.9rem; justify-items: center;
  background:
    radial-gradient(90% 60% at 15% 0%, rgba(37, 99, 255, 0.45), transparent 60%),
    radial-gradient(90% 60% at 85% 100%, rgba(91, 141, 255, 0.4), transparent 60%),
    repeating-linear-gradient(to right, var(--grid-line-dark) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(to bottom, var(--grid-line-dark) 0 1px, transparent 1px 44px),
    var(--ink);
  color: var(--on-dark);
  border-radius: 0.9rem;
  padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem;
  overflow: clip;
}
.poster-brand { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.03em; }
.poster .brand-dot { color: var(--blue-bright); }
.poster-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 4.6rem);
  font-weight: 400; line-height: 0.88; letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 0 44px rgba(91, 141, 255, 0.55);
}
.poster-sub { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; color: var(--blue-light); }
.poster-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.poster-chips span {
  font-size: 0.68rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.7rem;
  color: var(--on-dark);
}
.poster-chips .poster-free {
  background: linear-gradient(90deg, var(--blue), var(--blue-bright));
  border-color: transparent; color: #fff;
}
.poster-open { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; color: var(--blue-light); }
.poster-bar {
  display: block;
  margin-top: 0.85rem;
  background: var(--blue);
  color: #fff;
  text-align: center;
  font-weight: 700; font-size: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  padding: 0.85rem 1rem;
  transition: background-color 0.2s ease, transform 0.25s ease;
}
.poster-bar:hover { background: var(--blue-deep); transform: translateY(-1px); }

.hero h1 {
  font-size: clamp(2.4rem, 6.5vw, 5rem);
  font-weight: 700; line-height: 1.02; letter-spacing: var(--track-5);
  margin-top: 1rem;
  color: var(--ink);
}
.hl { color: var(--blue); }
.fade {
  background: linear-gradient(90deg, var(--ink), var(--blue-bright), var(--ink));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: grad-move 5s linear infinite;
}
@keyframes grad-move { from { background-position: 0% 0; } to { background-position: 200% 0; } }
.lede { max-width: 46ch; color: var(--dark-2); font-size: clamp(1rem, 1.6vw, 1.2rem); }


/* ---------- Sections ---------- */

.section { padding: var(--sec-gap) var(--gutter); position: relative; }
.sec-head { display: grid; gap: 1rem; justify-items: center; text-align: center; margin-bottom: clamp(3rem, 7vh, 4.5rem); }
.sec-head h2 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 700; letter-spacing: var(--track-5); line-height: 1.05;
  color: var(--ink);
}
.sec-sub { max-width: 52ch; color: var(--muted); font-size: 0.95rem; font-weight: 500; }

/* ---------- Product chips ---------- */

/* ---------- App wheel (phones on a turning cylinder) ---------- */

.wheel {
  position: relative;
  height: clamp(25rem, 37vw, 33rem);
  perspective: 2000px;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.wheel.is-dragging { cursor: grabbing; }

/* Real 3D takes over when WebGL is there: the CSS phones stay in the markup
   as the fallback and as the keyboard/screen-reader path. */
.wheel-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.phones-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; z-index: 1; }
.phones.gl-on .phone { opacity: 0; pointer-events: none; }
.wheel.gl-on .wheel-stage { opacity: 0; }
.wheel.gl-on .wheel-stage:focus-within { opacity: 1; }
.wheel-stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  /* radius of the cylinder the phones ride on */
  --r: clamp(15rem, 27vw, 22rem);
}
.capp {
  position: absolute; left: 50%; top: 50%;
  width: clamp(6.5rem, 10vw, 8rem);
  display: grid; justify-items: center; gap: 0.8rem;
  color: var(--ink);
  /* static fallback: nine seats, 40deg apart, so the wheel reads with JS off */
  transform: translate(-50%, -50%) rotateY(calc(var(--i) * 40deg)) translateZ(var(--r));
  transform-style: preserve-3d;
  /* never render a mirrored back face as a seat turns away */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.capp-phone {
  display: block;
  width: 100%;
  border-radius: 1.4rem;
  border: 6px solid var(--ink);
  background: var(--ink);
  overflow: clip;
  box-shadow: 0 0 38px -10px var(--glow), 0 26px 50px -28px rgba(16, 42, 102, 0.55);
}
.capp-phone img { display: block; width: 100%; aspect-ratio: 9 / 18; object-fit: cover; object-position: top; border-radius: 0.9rem; }
.capp-name { font-weight: 600; font-size: 0.85rem; letter-spacing: 0.01em; white-space: nowrap; }

/* ---------- Mosaic wall ---------- */

.wall {
  position: relative;
  padding: clamp(3rem, 8vh, 5rem) 0 clamp(4rem, 10vh, 7rem);
  overflow: clip;
  contain: paint;
}
.wall-cap {
  text-align: center;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2.5rem;
  padding-inline: var(--gutter);
  position: relative; z-index: 2;
}
.wall-tilt {
  display: grid; gap: 1rem;
  transform: rotate(-7deg) scale(1.18);
  transform-origin: 50% 50%;
}
/* Rows drift like a conveyor: row 1 right, row 2 left, row 3 right. The
   inline script triples each row so a one-third translate loops seamlessly;
   margin-right (not gap) keeps every copy exactly one period wide. */
.wall-row { display: flex; gap: 0; width: max-content; will-change: transform; }
.wall-tilt:not(.marquee) .wall-row { width: auto; justify-content: center; }
.wall-row img {
  width: clamp(11rem, 24vw, 20rem);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-radius: 0.8rem;
  box-shadow: 0 14px 34px -14px rgba(16, 42, 102, 0.45);
  flex: none;
  margin-right: 1rem;
}
.wall-tilt.marquee .wall-row { animation: wall-left 84s linear infinite; }
.wall-tilt.marquee .wall-row:nth-child(odd) { animation-name: wall-right; animation-duration: 72s; }
.wall-tilt.marquee .wall-row:nth-child(3) { animation-duration: 96s; }
@keyframes wall-left  { from { transform: translateX(0); }          to { transform: translateX(-33.3333%); } }
@keyframes wall-right { from { transform: translateX(-33.3333%); }  to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .wall-tilt.marquee .wall-row { animation: none; }
}
.wall::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--bg) 4%, transparent 30%, transparent 70%, var(--bg) 96%),
    linear-gradient(rgba(216, 230, 255, 0.35), rgba(216, 230, 255, 0.35));
  pointer-events: none;
}


/* ---------- Offer cards (deep-blue feature surfaces) ---------- */

.cards { display: grid; gap: clamp(2rem, 5vh, 3rem); max-width: 70rem; margin-inline: auto; }

.card {
  position: relative;
  display: grid; gap: clamp(1.25rem, 3vw, 2.25rem);
  background:
    radial-gradient(130% 150% at 100% 100%, rgba(37, 99, 255, 0.45), transparent 55%),
    var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-mega);
  padding: clamp(1.25rem, 2.8vw, 2.25rem);
  box-shadow: 0 30px 60px -30px rgba(16, 42, 102, 0.5);
}
@media (min-width: 940px) {
  .card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}
.card-shot {
  border-radius: 1rem;
  overflow: clip;
  box-shadow: 0 14px 40px -14px rgba(0, 0, 0, 0.5);
}
.card-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.card-shot-portrait img { aspect-ratio: 1; object-position: center 20%; }

.card-body { display: grid; gap: 0.9rem; justify-items: start; }
.card-level {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--blue-light);
}
.card-body h3 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1rem;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 700; letter-spacing: var(--track-3);
}
.card-amount {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--blue-bright);
  text-shadow: 0 0 30px rgba(91, 141, 255, 0.45);
}
.card-copy { color: var(--blue-light); max-width: 56ch; }
.card-fit { font-size: 0.85rem; color: var(--on-dark); opacity: 0.92; }
.card-fit strong { color: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  background: var(--tag-bg);
  color: var(--on-dark);
  font-size: 0.78rem; font-weight: 500;
  border-radius: var(--r-pill);
  padding: 0.45rem 1rem;
}
/* pills inside the deep cards flip to light */
.card .btn-gold { background: var(--soft); color: var(--ink); box-shadow: none; }
.card .btn-gold:hover { background: #fff; }

/* ---------- Certification beam ---------- */

.beam {
  position: relative;
  margin-top: clamp(4rem, 10vh, 6rem);
  padding: clamp(4rem, 9vh, 6rem) var(--gutter) clamp(3rem, 7vh, 4.5rem);
  text-align: center;
  overflow: clip;
}
.beam::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 85% at 50% 0%, rgba(37, 99, 255, 0.4), rgba(37, 99, 255, 0.1) 55%, transparent 75%);
  pointer-events: none;
}
.beam-cap {
  position: relative;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dark-2);
  margin-bottom: 1.75rem;
}
.beam-chips {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; align-items: center;
}
.mchip {
  background: linear-gradient(180deg, #ffffff 0%, #f1f6ff 55%, var(--soft) 100%);
  color: var(--ink);
  font-weight: 600; font-size: 0.88rem;
  border-radius: var(--r-pill);
  padding: 0.8rem 1.3rem;
  box-shadow: 0 10px 24px -12px rgba(16, 42, 102, 0.45), inset 0 1px 0 #fff;
}
.mchip-arrow { color: var(--blue); font-weight: 700; }

/* ---------- FREE (house footer-panel gradient) ---------- */

.free-band { padding: var(--sec-gap) var(--gutter); }
.card-free {
  position: relative;
  display: grid; gap: 1rem; justify-items: center; text-align: center;
  background: linear-gradient(135deg, #2f6bff 0%, #1c4fc0 100%);
  color: var(--on-dark);
  border-radius: var(--r-mega);
  padding: clamp(3rem, 8vh, 5.5rem) var(--gutter);
  max-width: 70rem; margin-inline: auto;
  box-shadow: 0 40px 90px -30px rgba(37, 99, 255, 0.6);
  scroll-margin-top: 6rem;
}
.card-free .card-level { color: rgba(255, 255, 255, 0.85); }
.free-word {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 13vw, 11rem);
  font-weight: 400; letter-spacing: var(--track-5); line-height: 0.9;
  color: #fff;
  text-shadow: 0 0 48px rgba(255, 255, 255, 0.35);
}
.card-free h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: var(--track-3); }
.card-free .card-copy { color: rgba(255, 255, 255, 0.92); max-width: 52ch; }
.card-free .btn-gold { background: var(--soft); color: var(--ink); box-shadow: none; }
.card-free .btn-gold:hover { background: #fff; }
.free-note { font-size: 0.82rem; color: rgba(255, 255, 255, 0.78); }

/* ---------- Phone cascade ---------- */

.phones-sec { overflow: clip; }
.phones {
  position: relative;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 1.5rem;
  min-height: 24rem;
}
.phones::before {
  content: "";
  position: absolute; inset: 10% -10% -20% -10%;
  background:
    radial-gradient(50% 55% at 50% 60%, rgba(91, 141, 255, 0.35), transparent 72%),
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 50px);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 40%, transparent 100%);
  pointer-events: none;
}
.phone {
  position: relative;
  width: clamp(9rem, 17vw, 13rem);
  border-radius: 1.8rem;
  border: 7px solid var(--ink);
  background: var(--ink);
  overflow: clip;
  box-shadow: 0 0 44px -8px var(--glow), 0 30px 60px -30px rgba(16, 42, 102, 0.6);
  flex: none;
}
.phone img { width: 100%; aspect-ratio: 9 / 18; object-fit: cover; object-position: top; border-radius: 1.1rem; }
.ph1 { transform: rotate(-9deg) translate(1.6rem, 2.2rem); z-index: 1; }
.ph2 { transform: translateY(0); z-index: 3; }
.ph3 { transform: rotate(9deg) translate(-1.6rem, 2.2rem); z-index: 2; }



/* ---------- White finale ---------- */

.finale-wrap {
  position: relative;
  padding: var(--sec-gap) var(--gutter) clamp(2rem, 5vh, 3.5rem);
}
.finale-wrap::before {
  content: "";
  position: absolute; inset: 20% 0 auto; height: 55%;
  background: radial-gradient(55% 70% at 50% 50%, rgba(37, 99, 255, 0.28), transparent 72%);
  pointer-events: none;
}
.finale {
  position: relative;
  background: #fff;
  color: var(--ink);
  border-radius: var(--r-mega);
  padding: clamp(3rem, 9vh, 6rem) var(--gutter);
  max-width: 72rem; margin-inline: auto;
  display: grid; gap: 1.6rem; justify-items: center; text-align: center;
  box-shadow: 0 40px 100px -40px rgba(37, 99, 255, 0.5);
}
.finale h2 {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  font-weight: 700; letter-spacing: var(--track-5); line-height: 1.05;
}
.checks { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; justify-content: center; }
.checks span { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem; }
.checks i {
  font-style: normal;
  display: grid; place-items: center;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: 0.8rem; font-weight: 800;
}
.finale-wa { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; justify-content: center; color: var(--muted); font-weight: 500; }

.footer-meta {
  position: relative;
  display: grid; gap: 0.6rem; justify-items: center; text-align: center;
  padding-top: clamp(2.5rem, 6vh, 4rem);
  color: var(--muted);
  font-size: 0.78rem;
}
.footer-meta .brand { height: clamp(1.5rem, 2.2vw, 1.9rem); background-position: center; margin-inline: auto; }
.footer-meta p { max-width: 60ch; line-height: 1.6; }
.footer-meta a { text-decoration: underline; text-underline-offset: 3px; }
.footer-meta a:hover { color: var(--ink); }

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  .nav-cta .btn-ghost { display: none; }
  .btn { white-space: normal; }
  .phones { min-height: 17rem; }
  .ph1 { transform: rotate(-9deg) translate(2.2rem, 1.6rem); }
  .ph3 { transform: rotate(9deg) translate(-2.2rem, 1.6rem); }
}

/* ---------- Reveal ---------- */

html.rv .rv-item {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
html.rv .rv-item.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.rv .rv-item { opacity: 1; transform: none; transition: none; }
  .wheel { cursor: default; }
  .btn, .capp { transition: none; }
  .fade { animation: none; }
}

/* ---------- Branded intro: fluted liquid-glass unveil (from the previous homepage) ----------
   Only html.intro (set synchronously in the head, once per tab session, never
   under reduced motion) shows it; everyone else never sees the overlay. */

.preloader { display: none; }
html.intro .preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: grid;
  place-items: center;
  overflow: hidden;
  will-change: transform;
}
.preloader-mark {
  position: relative;
  z-index: 1;
  display: block;
  height: clamp(3rem, 9vw, 5.5rem);
  aspect-ratio: 760 / 432;
  background: url("/univa-logo.png") center / contain no-repeat;
  font-size: 0;
  line-height: 0;
  color: transparent;
  opacity: 0;
}
.preloader-mark .brand-dot { display: none; }
.preloader-flutes {
  position: absolute;
  inset: -8%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0) 0px,
      rgba(255, 255, 255, 0.55) 7px,
      rgba(255, 255, 255, 0.10) 15px,
      rgba(255, 255, 255, 0) 24px),
    linear-gradient(135deg, rgba(208, 226, 255, 0.40), rgba(255, 255, 255, 0.14));
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
  will-change: transform;
}
.preloader-flutes::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, 0.65) 50%, transparent 58%);
  transform: translate3d(-25%, -25%, 0);
  animation: flute-sheen 1.6s ease-in-out infinite;
}
@keyframes flute-sheen {
  from { transform: translate3d(-30%, -30%, 0); }
  to   { transform: translate3d(30%, 30%, 0); }
}

/* ---------- Built And Shipped: studio stage ----------
   Copy on the left, the turning ring on a glass pedestal on the right, with a
   few floating glass UI cards around it and a trust strip beneath. The wheel
   itself (canvas, drag, drift) is untouched; this only re-homes it. */

.built-grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 1100px) { .built-grid { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); } }

.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #fff; color: var(--blue);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: var(--r-pill); padding: 0.55rem 1.1rem;
  box-shadow: 0 12px 28px -16px rgba(16, 42, 102, 0.4);
}
.eyebrow-pill svg { width: 0.9rem; height: 0.9rem; }
.built-copy h2 {
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  font-weight: 700; line-height: 0.98; letter-spacing: var(--track-5);
  color: var(--ink);
  margin: 1.4rem 0 1.1rem;
}
.built-copy .sec-sub { text-align: left; max-width: 40ch; font-size: clamp(1rem, 1.35vw, 1.15rem); }
.built-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 1.7rem; }
.built-cta .btn { gap: 0.5rem; }
.built-link span { margin-left: 0.3rem; }
.built-link { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.built-link:hover { color: var(--blue); }
.built-stats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.9rem; }
.built-stats li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  border-radius: 1rem; padding: 0.7rem 1rem 0.7rem 0.75rem;
  box-shadow: 0 14px 30px -20px rgba(16, 42, 102, 0.4);
}
.bs-ico { grid-row: span 2; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 0.75rem; background: var(--soft); color: var(--blue); }
.bs-ico svg { width: 55%; height: auto; }
.built-stats b { font-size: 0.95rem; font-weight: 700; color: var(--ink); line-height: 1.15; }
.built-stats small { font-size: 0.76rem; color: var(--muted); font-weight: 500; }

/* The stage keeps a band above and a band below the ring for the cards, so
   the cards live around the phones rather than on top of them, and it has
   perspective so the cards turn toward the phones like objects on the same
   set. */
.built-stage { position: relative; padding: 4.75rem 0 5.25rem; perspective: 1100px; }
.built-stage .wheel { position: relative; z-index: 1; }
.built-stage::before {
  content: "";
  position: absolute; inset: -6% -4%; z-index: 0;
  background: radial-gradient(50% 55% at 50% 55%, rgba(91, 141, 255, 0.28), transparent 72%);
  pointer-events: none;
}
.built-stage::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(37, 99, 255, 0.16) 1px, transparent 1.6px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 55%, #000 30%, transparent 100%);
  mask-image: radial-gradient(60% 60% at 50% 55%, #000 30%, transparent 100%);
  pointer-events: none;
}
.pedestal {
  position: absolute; left: 50%; bottom: 3.9rem; z-index: 0;
  width: 76%; height: 15%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, 0.98), rgba(216, 230, 255, 0.9) 55%, rgba(156, 192, 255, 0.5) 100%);
  box-shadow: 0 34px 60px -28px rgba(37, 99, 255, 0.55), inset 0 -10px 22px rgba(37, 99, 255, 0.14), inset 0 2px 0 #fff;
  pointer-events: none;
}

.glass-card {
  position: absolute; z-index: 2; pointer-events: none;
  display: grid; gap: 0.4rem; align-content: start;
  width: 11.5rem;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(10px);
  border-radius: 1rem; padding: 0.9rem 1rem;
  box-shadow: 0 24px 48px -26px rgba(16, 42, 102, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  font-size: 0.78rem; color: var(--ink);
  animation: gc-float 7s ease-in-out infinite alternate;
  transform-style: preserve-3d;
}
.gc-title { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; font-size: 0.78rem; }
.gc-title svg { width: 0.85rem; height: 0.85rem; color: var(--blue); }
.gc-pill { display: inline-flex; align-items: center; gap: 0.4rem; justify-self: start; background: #fff; border-radius: var(--r-pill); padding: 0.28rem 0.7rem; font-size: 0.7rem; font-weight: 600; color: var(--dark-2); box-shadow: 0 6px 14px -10px rgba(16, 42, 102, 0.5); }
.gc-pill i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.gc-chart { width: 100%; height: 2.6rem; margin-top: 0.2rem; }
.gc-big { font-size: 1.9rem; font-weight: 800; letter-spacing: var(--track-5); color: var(--blue); line-height: 1; }
.gc-sub { font-size: 0.7rem; color: var(--muted); font-weight: 500; }
.gc-bars { display: flex; align-items: flex-end; gap: 0.25rem; height: 2rem; margin-top: 0.2rem; }
.gc-bars i { flex: 1; height: var(--h); border-radius: 0.2rem 0.2rem 0 0; background: linear-gradient(180deg, var(--blue-bright), var(--blue)); }
.gc-text { color: var(--dark-2); font-size: 0.74rem; line-height: 1.4; }
.gc-mini { justify-self: start; background: var(--soft); color: var(--ink); border-radius: var(--r-pill); padding: 0.25rem 0.65rem; font-size: 0.68rem; font-weight: 700; }
.gc-step { display: inline-flex; align-items: center; gap: 0.45rem; justify-self: start; background: #fff; border-radius: 0.6rem; padding: 0.35rem 0.7rem; font-size: 0.72rem; font-weight: 600; box-shadow: 0 6px 14px -10px rgba(16, 42, 102, 0.45); }
.gc-step i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--blue); }
.gc-arrow { justify-self: start; padding-left: 0.85rem; color: var(--muted); font-size: 0.7rem; line-height: 0.6; }

/* corners of the stage, turned in toward the phones */
.gc-status { left: 0; top: 0; transform: rotateY(22deg) rotateX(6deg) rotateZ(-2deg); transform-origin: right center; }
.gc-apps { left: 1%; bottom: 0; transform: rotateY(20deg) rotateX(-6deg) rotateZ(2deg); transform-origin: right center; animation-delay: -2.4s; }
.gc-ai { right: 0; top: 0; transform: rotateY(-22deg) rotateX(6deg) rotateZ(2deg); transform-origin: left center; animation-delay: -4.6s; }
.gc-flow { right: 1%; bottom: 0; transform: rotateY(-20deg) rotateX(-6deg) rotateZ(-2deg); transform-origin: left center; animation-delay: -1.2s; }
@keyframes gc-float { from { translate: 0 -0.35rem; } to { translate: 0 0.35rem; } }
@media (max-width: 1099px) { .glass-card { display: none; } .built-stage { padding: 0; } }
@media (prefers-reduced-motion: reduce) { .glass-card { animation: none; } }

.trust {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.25rem 2.25rem;
  background: #fff;
  border-radius: 1.5rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 2.5rem);
  box-shadow: 0 24px 50px -30px rgba(16, 42, 102, 0.35);
}
.trust-label { font-weight: 700; color: var(--ink); max-width: 13ch; line-height: 1.25; }
.trust-mark { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; color: var(--dark-2); font-size: 0.95rem; transition: color 0.2s ease; }
.trust-mark img { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.trust-mark:hover { color: var(--blue); }

/* ---------- AI Mastery card: the syllabus tree ----------
   A course outline drawn live: module header pill, chapter pills, lesson rows
   with durations and play buttons, stepped like an outline and fading out at
   the bottom to say there is more. Same 16:10 frame as the other card images. */

.card-syllabus {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg);
  border-radius: 1rem;
  overflow: clip;
  min-height: 0;
  box-shadow: 0 14px 40px -14px rgba(0, 0, 0, 0.5);
}
.card-syllabus::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 28%;
  background: linear-gradient(to bottom, rgba(238, 244, 255, 0), var(--bg) 85%);
  pointer-events: none;
}
/* out of flow, so the list can never stretch the 16:10 frame */
.syl { position: absolute; inset: 0.85rem 0.9rem 0; display: grid; gap: 0.3rem; align-content: start; font-size: 0.66rem; line-height: 1.2; color: var(--ink); }
.syl li { border-radius: 0.45rem; }
.syl-module {
  justify-self: start;
  background: var(--blue); color: #fff;
  font-weight: 500; font-size: 0.72rem;
  padding: 0.38rem 0.8rem;
  border-radius: 0.5rem;
  box-shadow: 0 8px 18px -10px rgba(37, 99, 255, 0.7);
}
.syl-module b { font-weight: 800; }
.syl-chapter {
  justify-self: start;
  margin-left: 1rem;
  background: var(--ink); color: var(--on-dark);
  font-weight: 500;
  padding: 0.34rem 0.75rem;
  border-radius: 0.5rem;
}
.syl-chapter b { font-weight: 800; }
.syl-lesson {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.55rem;
  margin-left: 2.2rem;
  background: #fff;
  padding: 0.3rem 0.5rem 0.3rem 0.7rem;
  font-weight: 500;
  box-shadow: 0 6px 14px -10px rgba(16, 42, 102, 0.35);
}
.syl-lesson em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.syl-lesson i {
  width: 0.95rem; height: 0.95rem; border-radius: 50%;
  background: var(--blue);
  position: relative;
}
.syl-lesson i::after {
  content: "";
  position: absolute; left: 38%; top: 28%;
  border-left: 0.32rem solid #fff;
  border-top: 0.22rem solid transparent;
  border-bottom: 0.22rem solid transparent;
}
/* the outline spine */
.syl-chapter, .syl-lesson { position: relative; }
.syl-chapter::before, .syl-lesson::before {
  content: "";
  position: absolute; top: -0.35rem; bottom: 50%;
  left: -0.55rem; width: 0.55rem;
  border-left: 1px solid var(--blue-light);
  border-bottom: 1px solid var(--blue-light);
  border-radius: 0 0 0 0.3rem;
}