/* ============================================================
   JuanUp 2026 — rebuilt from Figma Dev Mode (exact spec)
   Display: Outfit · Body: Inter
   Reference frame: 1440px, 80px side margins → 1280 content
   Sizes use clamp(min, Nvw, designPx) where N = designPx/1440*100
   ============================================================ */

:root {
  --cyan:      #00f2ff;   /* buttons, "2026", agenda heading, links */
  --ink:       #003366;   /* text on cyan buttons */
  --light:     #f0e2ee;   /* light body text on dark */
  --muted:     #d6c2d3;   /* sub text */
  --purple:    #4f2d91;   /* gradient top */
  --deep:      #1b075a;   /* dark sections */
  --blue:      #4540ff;   /* indigo cards / table */
  --dark-card: #230e67;   /* FAQ cards + FAQs title */

  --container: 1440px;
  --pad-x: clamp(20px, 5.6vw, 80px);
  --body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --display: 'Outfit', var(--body);
  --ease: cubic-bezier(.2, .7, .3, 1);   /* shared easing for all motion */
}

/* self-hosted + preloaded wordmark font (unique family so it's used
   explicitly and present at first paint — no fallback flash that would
   briefly misalign the arrow). Same Inter files = identical metrics. */
@font-face {
  font-family: 'InterWM'; font-style: normal; font-weight: 800;
  font-display: swap; src: url('assets/fonts/inter-extrabold.woff2') format('woff2');
}
@font-face {
  font-family: 'InterWM'; font-style: normal; font-weight: 900;
  font-display: swap; src: url('assets/fonts/inter-black.woff2') format('woff2');
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  color: #111;
  /* dark so sub-pixel section seams (fractional heights) blend invisibly
     instead of flashing white between the dark hero/intro/agenda sections */
  background: var(--deep);
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- Interaction layer (Apple-grade polish) ---------- */
::selection { background: rgba(0, 242, 255, .28); color: #0a0a0a; }

/* keyboard focus: crisp cyan ring, never on mouse click */
:where(a, button):focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible { outline-offset: 4px; }
:where(a, button):focus:not(:focus-visible) { outline: none; }

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

/* ---------- ↗ icon (Figma arrow1: M22 22V2H2M22 2L2 22) ---------- */
.ico--ne {
  display: inline-block;
  width: 1em; height: 1em;
  flex: none;
  background: currentColor;
  -webkit-mask: no-repeat center / contain;
          mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22 22V2H2M22 2L2 22' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22 22V2H2M22 2L2 22' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ico--sm { width: .55em; height: .55em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: clamp(54px, 5.35vw, 77px);
  padding: 0 clamp(28px, 2.78vw, 40px);
  border-radius: 100px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.22vw, 2rem);   /* 32px Get Tickets */
  letter-spacing: -.03em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease), background .3s var(--ease);
  will-change: transform;
}
.btn .ico--ne { width: .62em; height: .62em; transition: transform .3s var(--ease); }
.btn:hover  { transform: translateY(-3px); }
.btn:hover .ico--ne { transform: translate(2px, -2px); }   /* arrow nudges along its diagonal */
.btn:active { transform: translateY(-1px) scale(.985); }

.btn--lg { font-size: clamp(1.25rem, 2.78vw, 2.5rem); }   /* 40px Join Now */

.btn--cyan {
  background: var(--cyan);
  color: var(--ink);
  box-shadow: 7px 7px 20.4px 5px rgba(0,0,0,.05);
}
.btn--cyan:hover { box-shadow: 0 18px 38px -10px rgba(0,242,255,.6); filter: brightness(1.04); }

.btn--ink {
  background: var(--deep);
  color: #fff;
  box-shadow: 7px 7px 20.4px 5px rgba(0,0,0,.05);
}
.btn--ink:hover { background: #2a0f7a; }

.btn--block { width: 100%; justify-content: center; }

/* =========================================================
   HERO  (gradient #4f2d91 -> #1b075a, design height 1017)
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--purple) 0%, var(--deep) 100%);
  color: #fff;
  overflow: hidden;
  /* wave band sits below the meta row (matches the design: meta on clean
     purple, waves entirely below, band ~327px at 1440) */
  padding-bottom: clamp(120px, 23.5vw, 338px);
}
/* Exact Figma masked-wave composite. The layer is wider than the hero and
   its sides are faded to transparent, so neither the image's mask edges nor
   the drift animation can ever reveal a hard edge or side gap. */
/* Wave band sized as a fraction of the HERO (not the viewport), so it always
   fills the lower hero and reaches the bottom at any width. `cover` keeps it
   full-bleed; the mask fades it in at the top and out at the bottom, so it is
   never hard-clipped at the hero→intro edge. */
.hero__waves {
  /* The wave strip is cropped to where the artwork is fully transparent at top
     AND bottom, so the curves fade in/out by their own alpha — no hard cut at
     either edge (no mask needed). Drawn at natural aspect (width %, height auto)
     and pushed just below the fold so the dense waves sit at the hero bottom
     like Figma; the soft fade-out is clipped by the hero's overflow. 106% width
     gives ~Figma scale and clips the strand termini off the sides. */
  position: absolute; left: 0; right: 0; bottom: 0; height: 48%;
  z-index: 0; pointer-events: none;
  background: url("assets/waves-strip.png") no-repeat;
  background-size: 106% auto;
  background-position: 50% 100%;
  /* the strip's own alpha fades the TOP; this dissolves only the last sliver so
     the bright waves don't get sliced by the hero→intro section seam (both are
     --deep, so the fade is invisible) — no hard cut, no purple gap */
  -webkit-mask-image: linear-gradient(180deg, #000 0 90%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0 90%, transparent 100%);
  animation: waveDrift 19s ease-in-out infinite;
  will-change: background-position;
}
@keyframes waveDrift {        /* gentle horizontal flow; stays within the 6%
                                 overflow so an edge is never exposed */
  0%, 100% { background-position: 34% 100%; }
  50%      { background-position: 66% 100%; }
}
/* dissolve the waves into the bottom colour at the hero edge so they are
   never hard-clipped at the hero→intro boundary (above waves, below text) */
.hero__inner { position: relative; z-index: 1; padding-top: clamp(28px, 2.2vw, 32px); }

.brand { width: clamp(150px, 14.2vw, 205px); height: auto; }

/* hero wordmark — live Inter text; the arrow is an inline SVG positioned in
   em over the U's right leg, so the arrow↔U relationship is identical at
   every breakpoint by construction. JuanUp: Inter ExtraBold · 2026: Inter Black */
.hero__lead { margin-top: clamp(36px, 4.6vw, 66px); }
.wordmark {
  margin: 0;
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: clamp(10px, 1.1vw, 16px);
  font-family: var(--body);
  line-height: .92;
  font-size: clamp(2.9rem, 11.3vw, 163px);
}
.wm-juan { color: #fff; font-family: 'InterWM', var(--body); font-weight: 800; letter-spacing: -.07em; }
.wm-u { position: relative; display: inline-block; }
.wm-arrow {
  position: absolute;
  /* Figma arrow asset is 94.6×75.7 (≈ .581em × .465em at the 162.79px design
     size): mostly arrowhead + a short stub. The long "stem" is the U's own
     right leg — the arrow only sits atop it, it does NOT replace it. */
  left: 88%; bottom: .60em;
  transform: translateX(-50%);
  width: .581em; height: .465em;
  color: #fff;
}
.wm-year {
  color: var(--cyan); font-family: 'InterWM', var(--body); font-weight: 900; letter-spacing: -.05em;
  /* pale cyan outline stroke (outside the fill) + outer glow, per Figma */
  -webkit-text-stroke: .018em #c8f9ff;
  paint-order: stroke fill;
  text-shadow: 0 0 18px rgba(0,242,255,.75), 0 0 48px rgba(0,242,255,.45);
}
.hero__lead .btn { margin-top: clamp(18px, 2.2vw, 30px); }

/* hero meta */
.hero__meta {
  margin-top: clamp(34px, 4.8vw, 70px);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 32px; flex-wrap: wrap;
}
.hero__tagline { margin: 0; max-width: 36ch; font-size: clamp(1.05rem, 2.22vw, 32px); line-height: 1.4; }
.hero__tagline span { color: var(--light); font-weight: 400; }
.hero__tagline strong { display: block; color: var(--light); font-weight: 700; }
/* Figma left-aligns the meta lines on a shared left edge (date, "Whitespace",
   "Makati" all start at x=0 in node 1:188), ragged on the right — NOT
   right-aligned. The block itself sits on the right of the hero via the
   space-between flex row; only its internal text is left-aligned. */
.hero__when { text-align: left; }
/* Figma meta block (node 1:186): flex column, gap 8px between the date and the
   place. Date = Inter Medium 24px (line-box 29px → lh 1.21); place = Inter Bold
   40px, two lines, box 96px → lh 1.2. The date had no explicit line-height and
   inherited the body's ~1.5, inflating the gap; pinning both to Figma metrics
   restores the tight 8px box-to-box spacing. */
.hero__date { margin: 0 0 8px; color: var(--light); font-weight: 500; line-height: 1.21; font-size: clamp(.9rem, 1.67vw, 24px); }
.hero__place {
  margin: 0; font-weight: 700; font-size: clamp(1.4rem, 2.78vw, 40px); line-height: 1.2; color: var(--light);
}
.hero__place .ico--ne { color: var(--light); vertical-align: baseline; }

/* =========================================================
   INTRO  (bg #1b075a)
   ========================================================= */
.intro { background: var(--deep); color: #fff; padding-block: clamp(72px, 9.8vw, 141px); }
.intro__grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.intro__eyebrow { margin: 0 0 8px; font-family: var(--body); font-weight: 400; color: var(--light); font-size: clamp(1.5rem, 3.05vw, 44px); }
.intro__title { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; font-size: clamp(2.4rem, 5vw, 72px); }

.card--indigo {
  background: var(--blue);
  color: #fff;
  border-radius: 0 50px 50px 50px;   /* top-left sharp */
  padding: clamp(30px, 3.4vw, 48px);
  box-shadow: 7px 7px 20.4px 5px rgba(0,0,0,.05);
}
.card__title { margin: 0 0 22px; font-family: var(--display); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-size: clamp(1.7rem, 3.33vw, 48px); }
.card__title strong { font-weight: 800; }
.card__body { margin: 0 0 16px; font-family: var(--body); font-weight: 500; color: var(--light); line-height: 1.3; font-size: clamp(1rem, 1.8vw, 26px); }
.card__body:last-of-type { margin-bottom: clamp(26px, 2.6vw, 38px); }

@media (min-width: 900px) {
  .intro__head { padding-top: clamp(8px, 2vw, 28px); }
  .intro__grid { grid-template-columns: 540fr 669fr; gap: clamp(40px, 5vw, 71px); }
}

/* =========================================================
   EXPERIENCE  (white)
   ========================================================= */
.exp { background: #fff; padding-block: clamp(48px, 6.5vw, 100px); }
.exp__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 60px); align-items: center; }
.exp__media { display: flex; justify-content: center; }

/* ring asset (600) with crowd photo circle (430) centered */
.ring {
  position: relative;
  width: clamp(300px, 41.7vw, 600px);
  aspect-ratio: 1;
  display: grid; place-items: center;
  overflow: hidden;        /* contains the rotating swirl — it can never bleed onto the text */
  isolation: isolate;
}
/* swirl rotates slowly on its own; the photo underneath stays still */
.ring::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("assets/ring.png") center / contain no-repeat;
  animation: ringSpin 44s linear infinite;
}
.ring__photo {
  position: relative; z-index: 1;
  width: 71.7%; height: 71.7%;     /* 430 / 600 */
  border-radius: 50%;
  background: url("assets/crowd.png") center / cover;
  transition: transform .5s var(--ease);
}
.exp__media:hover .ring__photo { transform: scale(1.04); }
@keyframes ringSpin { to { transform: rotate(360deg); } }

.exp__copy { position: relative; z-index: 1; }
.exp__title { margin: 0 0 18px; font-family: var(--display); font-weight: 700; color: var(--deep); line-height: 1.05; font-size: clamp(2rem, 3.33vw, 48px); }
.exp__intro { margin: 0 0 22px; font-family: var(--body); color: #000; line-height: 1.35; font-size: clamp(1.1rem, 1.95vw, 28px); }
.exp__list { margin: 0 0 34px; padding-left: 1.4em; font-family: var(--body); color: #000; font-size: clamp(1.1rem, 1.95vw, 28px); }
.exp__list li { margin-bottom: 14px; }
.exp__list li::marker { color: #000; }

@media (min-width: 900px) {
  .exp__grid { grid-template-columns: 600fr 667fr; gap: clamp(40px, 2.3vw, 33px); }
}

/* =========================================================
   AGENDA  (bg #1b075a)
   ========================================================= */
.agenda {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--deep); color: #fff;
  padding-block: clamp(72px, 9vw, 130px);
}
.agenda__wave {
  position: absolute; left: 0; bottom: 8%; width: 45%; z-index: 0;
  pointer-events: none;
  /* exact Figma agenda wave on matching #1b075a; fade the top/right edges
     so the crop boundary (and the drift) never shows a hard line */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(270deg, transparent 0, #000 16%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, transparent 0, #000 22%), linear-gradient(270deg, transparent 0, #000 16%);
          mask-composite: intersect;
  animation: agendaWave 24s ease-in-out infinite;
  will-change: transform;
}
@keyframes agendaWave {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(2.5%, -1.6%); }
}
.agenda__grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 4vw, 56px); align-items: start; }
.agenda__title { margin: 0 0 22px; font-family: var(--display); font-weight: 700; color: var(--cyan); line-height: 1; font-size: clamp(2.6rem, 4.72vw, 68px); }
.agenda__desc { margin: 0; max-width: 17ch; font-family: var(--body); font-weight: 500; color: var(--light); line-height: 1.3; font-size: clamp(1.2rem, 2.22vw, 32px); }

.agenda__card { background: var(--blue); border-radius: clamp(28px, 3.5vw, 50px); padding: clamp(26px, 3vw, 44px); }
.schedule { list-style: none; margin: 0 0 26px; padding: 0; }
.schedule__row {
  display: grid;
  grid-template-columns: clamp(90px, 12vw, 175px) 1fr;
  gap: clamp(16px, 2.5vw, 36px);
  padding: clamp(11px, 1.35vw, 18px) 4px;
  align-items: start;
}
.schedule__time { font-family: var(--display); font-weight: 600; color: #fff; font-size: clamp(1.1rem, 2.22vw, 32px); display: flex; flex-direction: column; }
.schedule__onwards { color: var(--muted); font-family: var(--body); font-weight: 400; font-size: .56em; margin-top: 2px; }
.schedule__what { font-family: var(--body); font-weight: 400; color: var(--light); line-height: 1.2; font-size: clamp(1.05rem, 2.22vw, 32px); }
.schedule__what b { font-weight: 700; }
.schedule__what .semi { font-weight: 600; }
.schedule__sub { display: block; margin-top: 6px; color: var(--muted); font-size: clamp(.85rem, 1.67vw, 24px); }

@media (min-width: 960px) {
  .agenda__grid { grid-template-columns: 546fr 690fr; gap: clamp(36px, 3vw, 44px); }
  .agenda__head { position: sticky; top: 40px; }
}

/* =========================================================
   FAQ  (white)
   ========================================================= */
.faq { background: #fff; padding-block: clamp(64px, 8vw, 120px); }
.faq__title { margin: 0 0 clamp(32px, 3.5vw, 50px); text-align: center; font-family: var(--display); font-weight: 700; letter-spacing: -.03em; color: var(--dark-card); font-size: clamp(3rem, 6.94vw, 100px); }
.faq__grid { display: grid; grid-template-columns: 1fr; gap: clamp(8px, 1vw, 12px); max-width: 1216px; margin-inline: auto; }
.faq__card {
  background: var(--dark-card); color: #fff; border-radius: 26px;
  padding: clamp(28px, 2.8vw, 40px);
  box-shadow: 0 0 0 1px transparent;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
  will-change: transform;
}
.faq__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 50px -22px rgba(0,242,255,.45), 0 0 0 1.5px rgba(0,242,255,.55);
}
.faq__q { margin: 0 0 16px; font-family: var(--display); font-weight: 700; line-height: 1.1; font-size: clamp(1.3rem, 2.22vw, 32px); }
.faq__a { margin: 0; font-family: var(--body); font-weight: 400; color: var(--light); line-height: 1.3; font-size: clamp(1rem, 1.4vw, 20px); }
.faq__a a {
  color: var(--cyan); text-decoration: underline; text-underline-offset: 3px;
  word-break: break-word; transition: color .2s ease, text-underline-offset .2s ease;
}
.faq__a a:hover { color: #7df7ff; text-underline-offset: 5px; }

@media (min-width: 820px) { .faq__grid { grid-template-columns: 1fr 1fr; } }

/* =========================================================
   CLOSING  (gradient #1b075a -> #4f2d91)
   ========================================================= */
.closing {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--deep) 0%, var(--purple) 100%);
  color: #fff;
  padding-block: clamp(100px, 11.5vw, 178px);
}
.closing__arrow {
  position: absolute; right: clamp(2%, 8vw, 110px); top: 50%; transform: translateY(-50%);
  height: clamp(360px, 41vw, 588px); width: auto; z-index: -1; pointer-events: none;
}
.closing__title { margin: 0 0 16px; font-family: var(--display); font-weight: 700; line-height: 1.04; max-width: 16ch; font-size: clamp(2.1rem, 5vw, 72px); }
.closing__sub { margin: 0 0 clamp(28px, 3vw, 40px); font-family: var(--body); color: var(--light); font-size: clamp(1.15rem, 2.36vw, 34px); }
@media (min-width: 1140px) { .closing__title { max-width: none; white-space: nowrap; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:hover, .faq__card:hover, .exp__media:hover .ring__photo { transform: none; }
}