/* ============================================================
   TechYard Systems — Webinar Registration
   Palette & type lifted from techyardsystems.com
   ============================================================ */

:root{
  --navy:       #08203E;   /* brand primary            */
  --navy-deep:  #04060B;   /* heading ink              */
  --navy-soft:  #0B4C8C;
  --cyan:       #61CDFF;   /* brand accent             */
  --cyan-2:     #29C2F0;
  --cyan-pale:  #EAF8FF;
  --slate:      #557C93;
  --body:       #3d4f62;   /* body copy                */
  --muted:      #8896A6;
  --line:       #E2E8F0;
  --line-soft:  #EEF2F6;
  --wash:       #FAFBFD;
  --wash-2:     #F0F2F7;
  --blue-pale:  #B0C9E8;
  --white:      #ffffff;
  --danger:     #C0392B;
  --ok:         #0F9D58;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(8,32,62,.05);
  --shadow-md: 0 8px 24px rgba(8,32,62,.07);
  --shadow-lg: 0 24px 60px rgba(8,32,62,.10);
}

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

/* `hidden` must win over any display rule we set on the element itself
   (e.g. .control{display:block}), otherwise the attribute does nothing. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:20px; }

body{
  margin:0;
  /* soft brand washes — cyan top-right, navy-tinted bottom-left */
  background:
    radial-gradient(1100px 620px at 92% -6%, rgba(97,205,255,.16) 0%, rgba(97,205,255,0) 62%),
    radial-gradient(900px 520px at 2% 46%, rgba(11,76,140,.07) 0%, rgba(11,76,140,0) 60%),
    var(--white);
  background-repeat:no-repeat;
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;               /* nothing should ever scroll sideways */
}

/* No grey flash on tap; let the :active states do the talking */
a,button,input,select,label,.fact,.dial__opt{ -webkit-tap-highlight-color:transparent; }

#register{ scroll-margin-top:16px; }

img,svg{ max-width:100%; display:block; }
a{ color:var(--navy); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ width:100%; max-width:1240px; margin:0 auto; padding:0 24px; }

/* ---------- TechYard type scale ---------- */
.ty-h1{ font-size:55px; font-weight:600; color:var(--navy-deep); letter-spacing:-2.5px; line-height:1.2; margin:0; }
/* second headline line picks up the brand cyan→navy gradient */
.ty-h1__accent{
  background:linear-gradient(94deg, var(--cyan-2) 0%, #2E8FD8 48%, var(--navy-soft) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--navy-soft);
}
.ty-h2{ font-size:40px; font-weight:500; color:var(--navy-deep); letter-spacing:-.02em; line-height:1.15; margin:0; }
.ty-h3{ font-size:28px; font-weight:600; color:var(--navy-deep); line-height:1.3; margin:0; letter-spacing:-.01em; }
.ty-body{ font-size:16px; font-weight:400; color:var(--body); line-height:1.6; }
.ty-body-sm{ font-size:13px; font-weight:400; color:var(--body); line-height:1.5; }

/* ---------- TechYard button ---------- */
.ty-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--navy); color:var(--white);
  font-family:'Poppins',sans-serif; font-size:14px; font-weight:600;
  padding:14px 28px; border:1.5px solid var(--navy); border-radius:var(--r-sm);
  cursor:pointer; transition:background-color .2s, color .2s, opacity .2s;
}
.ty-btn:hover{ background:var(--white); color:var(--navy); text-decoration:none; }
.ty-btn--block{ width:100%; padding:16px 32px; font-size:15px; }
.ty-btn--dark{ background:var(--navy-deep); border-color:var(--navy-deep); border-radius:14px; padding:19px 32px; font-size:16px; box-shadow:0 10px 24px rgba(4,6,11,.18); }
.ty-btn--dark:hover{ background:var(--white); color:var(--navy-deep); }
.ty-btn--dark:disabled:hover{ background:var(--navy-deep); color:var(--white); }
.ty-btn:disabled{ opacity:.6; cursor:not-allowed; }
.ty-btn:disabled:hover{ background:var(--navy); color:var(--white); }

/* ============================ NAVBAR ============================ */
.ty-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.ty-nav__inner{ display:flex; align-items:center; gap:28px; min-height:76px; }
.ty-nav__logo img{ height:46px; width:auto; }
.ty-nav__logo:hover{ text-decoration:none; opacity:.85; }

.ty-nav__menu{ margin-left:auto; }
.ty-nav__list{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:30px; }
.ty-nav__list > li > a{
  display:inline-flex; align-items:center; gap:5px;
  font-size:15px; font-weight:500; color:var(--navy-deep); white-space:nowrap;
  padding:10px 0; transition:color .2s;
}
.ty-nav__list > li > a:hover{ color:var(--navy-soft); text-decoration:none; }
.ty-nav__list .chev{ width:14px; height:14px; transition:transform .2s; }

/* services dropdown */
.has-sub{ position:relative; }
.ty-nav__sub{
  position:absolute; left:0; top:100%; z-index:60;
  list-style:none; margin:0; padding:8px; min-width:290px;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s, transform .18s, visibility .18s;
}
.has-sub:hover .ty-nav__sub,
.has-sub:focus-within .ty-nav__sub{ opacity:1; visibility:visible; transform:translateY(0); }
.has-sub:hover .chev{ transform:rotate(180deg); }
.ty-nav__sub a{
  display:block; padding:10px 12px; border-radius:var(--r-sm);
  font-size:14px; font-weight:500; color:var(--body); transition:background-color .15s, color .15s;
}
.ty-nav__sub a:hover{ background:var(--cyan-pale); color:var(--navy); text-decoration:none; }

.ty-nav__cta{ padding:11px 22px; font-size:14px; white-space:nowrap; }

.ty-nav__burger{
  display:none; margin-left:auto;
  width:44px; height:44px; padding:11px 10px;
  flex-direction:column; justify-content:space-between;
  background:none; border:0; cursor:pointer;
}
.ty-nav__burger span{ display:block; height:2px; border-radius:2px; background:var(--navy-deep); transition:transform .25s, opacity .2s; }
.ty-nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.ty-nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.ty-nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* ============================ HERO ============================ */
/* Cyan brand canvas: a deep-to-pale cyan wash, two soft drifting light
   pools, a whisper-fine grid for texture, and a white melt at the bottom
   so the hero dissolves into the page instead of ending on a hard edge. */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.72) 84%, var(--white) 100%),
    radial-gradient(120% 96% at 82% -20%, rgba(41,194,240,.34) 0%, rgba(41,194,240,0) 62%),
    radial-gradient(86% 82% at 2% 6%, rgba(97,205,255,.24) 0%, rgba(97,205,255,0) 58%),
    linear-gradient(166deg, #EFFBFF 0%, #E2F6FF 34%, #F1FBFF 68%, var(--white) 100%);
}

/* hairline of light along the top edge + the bottom melt */
.hero::before{
  content:''; position:absolute; inset:0 0 auto; height:1px; z-index:2;
  background:linear-gradient(90deg, rgba(97,205,255,0) 0%, rgba(41,194,240,.55) 38%, rgba(255,255,255,.9) 70%, rgba(97,205,255,0) 100%);
}

/* fine engraved grid — fades out before it reaches the copy */
.hero::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(8,32,62,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,32,62,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 100% at 76% 0%, #000 0%, rgba(0,0,0,.35) 46%, transparent 76%);
          mask-image:radial-gradient(120% 100% at 76% 0%, #000 0%, rgba(0,0,0,.35) 46%, transparent 76%);
  opacity:.9;
}

/* two slow cyan light pools — the "breathing" that keeps the panel alive */
.hero__glow{
  display:block; position:absolute; inset:-20% -10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(34% 44% at 72% 26%, rgba(41,194,240,.34) 0%, rgba(41,194,240,0) 70%),
    radial-gradient(30% 40% at 18% 74%, rgba(97,205,255,.28) 0%, rgba(97,205,255,0) 72%);
  filter:blur(6px);
  animation:heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-2.5%,2%,0) scale(1.08); }
}

.hero__inner{
  position:relative; z-index:1;
  /* two real columns: the copy can never run underneath the artwork, and
     the artwork can never creep back over the copy */
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,3.6vw,56px); align-items:center;
  box-sizing:border-box;
  min-height:0;
  padding-top:clamp(24px,4.5vh,60px); padding-bottom:clamp(24px,4.5vh,60px);
}
.hero__copy{ display:flex; flex-direction:column; justify-content:center; padding-top:0; }

/* ---- hero artwork ----
   A small stage, built in three depths so the pointer parallax reads as
   real space rather than a flat slide:
     far  — light only: aura, a slow conic light beam, a drifting dot field
     mid  — the orbital system: three rings, three orbiting sparks, twinkles
     near — the subject itself, back-lit by a bloom, grounded by a shadow
   Everything is scoped under .hero__stage, so none of it touches the copy
   column or any section below the hero. */
.hero__stage{
  position:relative; z-index:0; pointer-events:none;
  align-self:center; justify-self:stretch;
  width:100%;
  aspect-ratio:1774/887;
  /* pointer parallax writes these; 0/0 keeps it identical when JS is off */
  --px:0; --py:0; --lift:0;
  perspective:1100px;
  will-change:transform;
}

/* each depth drifts by its own multiple of the pointer offset, so the
   stage separates into real space as the cursor crosses the hero */
.hero__depth{
  position:absolute; inset:0;
  transition:transform .35s cubic-bezier(.22,.7,.28,1);
  will-change:transform;
}
.hero__depth--far{ transform:translate3d(calc(var(--px) * -30px), calc(var(--py) * -20px), 0); }
.hero__depth--mid{ transform:translate3d(calc(var(--px) * 30px), calc(var(--py) * 20px), 0)
                             rotateY(calc(var(--px) * 7deg)) rotateX(calc(var(--py) * -6deg)); }
/* the subject leads the drift — furthest travel, so it sits closest */
.hero__depth--near{
  z-index:2;
  transform:translate3d(calc(var(--px) * 52px), calc(var(--py) * 34px), 0)
            rotateY(calc(var(--px) * 6deg)) rotateX(calc(var(--py) * -5deg))
            scale(calc(1 + var(--lift) * .02));
}

/* ---- far: light ---- */

/* soft cyan aura that swells behind the subject */
.hero__aura{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  height:140%; width:auto; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(circle, rgba(41,194,240,.42) 0%, rgba(97,205,255,.18) 44%, rgba(97,205,255,0) 70%);
  filter:blur(16px);
  animation:heroAura 7s ease-in-out infinite alternate;
}
@keyframes heroAura{
  from{ transform:scale(.90); opacity:.6; }
  to  { transform:scale(1.12); opacity:1; }
}

/* a slow lighthouse sweep — a conic wedge, faded out at the rim */
.hero__beam{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  height:190%; width:auto; aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(41,194,240,.24) 0deg, rgba(41,194,240,0) 42deg,
    rgba(41,194,240,0) 180deg,
    rgba(97,205,255,.18) 210deg, rgba(97,205,255,0) 250deg,
    rgba(41,194,240,0) 360deg);
  -webkit-mask-image:radial-gradient(circle, #000 12%, rgba(0,0,0,.5) 44%, transparent 68%);
          mask-image:radial-gradient(circle, #000 12%, rgba(0,0,0,.5) 44%, transparent 68%);
  filter:blur(10px);
  animation:heroSpin 30s linear infinite;
}

/* fine dot field, drifting diagonally and fading toward the edges */
.hero__dots{
  position:absolute; inset:-10%;
  background-image:radial-gradient(rgba(41,194,240,.55) 1.5px, transparent 1.7px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(64% 72% at 50% 50%, #000 0%, rgba(0,0,0,.5) 56%, transparent 82%);
          mask-image:radial-gradient(64% 72% at 50% 50%, #000 0%, rgba(0,0,0,.5) 56%, transparent 82%);
  opacity:.8;
  animation:heroDots 26s linear infinite;
}
@keyframes heroDots{
  from{ background-position:0 0; }
  to  { background-position:104px -78px; }
}

/* ---- mid: the orbital system ---- */

.hero__ring,
.hero__orbit{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  border-radius:50%; aspect-ratio:1; width:auto;
  will-change:transform;
}
.hero__ring--1{
  height:114%;
  border:1px dashed rgba(41,194,240,.5);
  animation:heroSpin 34s linear infinite;
}
/* broken arcs — reads as a rim of light rather than an outline */
.hero__ring--2{
  height:136%;
  border:1px solid rgba(97,205,255,.42);
  -webkit-mask-image:conic-gradient(from 0deg, #000 0deg, #000 70deg, transparent 150deg, #000 230deg, #000 290deg, transparent 350deg);
          mask-image:conic-gradient(from 0deg, #000 0deg, #000 70deg, transparent 150deg, #000 230deg, #000 290deg, transparent 350deg);
  animation:heroSpin 26s linear infinite reverse;
}
/* a thicker glowing arc that pulses as it turns */
.hero__ring--3{
  height:124%;
  border:2px solid rgba(41,194,240,.55);
  box-shadow:0 0 22px -4px rgba(41,194,240,.55);
  -webkit-mask-image:conic-gradient(from 0deg, #000 0deg, rgba(0,0,0,.35) 46deg, transparent 96deg, transparent 360deg);
          mask-image:conic-gradient(from 0deg, #000 0deg, rgba(0,0,0,.35) 46deg, transparent 96deg, transparent 360deg);
  animation:heroSpin 12s cubic-bezier(.6,0,.4,1) infinite, heroArcPulse 4s ease-in-out infinite;
}
@keyframes heroSpin{
  from{ transform:rotate(0turn); }
  to  { transform:rotate(1turn); }
}
@keyframes heroArcPulse{
  0%,100%{ opacity:.45; }
  50%    { opacity:1; }
}

/* orbiting sparks — the wrapper spins, the dot rides its rim, and a short
   comet tail trails behind it along the path */
.hero__orbit i{
  position:absolute; top:-4px; left:50%; margin-left:-4px;
  width:8px; height:8px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 14px 3px rgba(41,194,240,.85), 0 0 4px 1px rgba(255,255,255,.95);
}
.hero__orbit i::after{
  content:''; position:absolute; right:50%; top:50%; translate:0 -50%;
  width:62px; height:3px; border-radius:3px;
  background:linear-gradient(270deg, rgba(41,194,240,.75), rgba(41,194,240,0));
  filter:blur(1.5px);
}
.hero__orbit--1{ height:114%; animation:heroSpin 34s linear infinite; }
.hero__orbit--2{ height:136%; animation:heroSpin 26s linear infinite reverse; }
.hero__orbit--3{ height:124%; animation:heroSpin 19s linear infinite; }
.hero__orbit--2 i{ width:6px; height:6px; margin-left:-3px; top:-3px; }
.hero__orbit--2 i::after{ width:44px; right:auto; left:50%; background:linear-gradient(90deg, rgba(97,205,255,.7), rgba(97,205,255,0)); }
.hero__orbit--3 i{ width:5px; height:5px; margin-left:-2.5px; top:-2.5px; opacity:.8; }
.hero__orbit--3 i::after{ width:34px; }

/* twinkles scattered around the subject — four-point stars drawn with two
   crossed bars, so they read as sparkle rather than dust */
.hero__spark{
  position:absolute; width:10px; height:10px;
  animation:heroTwinkle 3.6s ease-in-out infinite;
}
.hero__spark::before,
.hero__spark::after{
  content:''; position:absolute; left:50%; top:50%; translate:-50% -50%;
  background:#fff; border-radius:2px;
  box-shadow:0 0 10px 2px rgba(41,194,240,.7);
}
.hero__spark::before{ width:100%; height:1.6px; }
.hero__spark::after { width:1.6px; height:100%; }
.hero__spark--1{ left:4%; top:16%; width:12px; height:12px; }
.hero__spark--2{ right:5%; top:9%; width:9px; height:9px; animation-delay:1.2s; }
.hero__spark--3{ right:8%; bottom:10%; width:10px; height:10px; animation-delay:2.4s; }
.hero__spark--4{ left:9%; bottom:14%; width:8px; height:8px; animation-delay:3.2s; }
@keyframes heroTwinkle{
  0%,100%{ transform:scale(.4) rotate(0deg);  opacity:.1; }
  50%    { transform:scale(1)  rotate(90deg); opacity:1; }
}

/* ---- near: the subject ---- */

/* a blurred copy of the cutout sitting just behind it, so the subject looks
   lit from within instead of pasted on */
.hero__bloom{
  position:absolute; inset:0; z-index:0;
  background:url("new-img.png") no-repeat center center / contain;
  filter:blur(30px) saturate(1.9) brightness(1.12);
  opacity:.42;
  animation:heroBloom 7s ease-in-out infinite alternate;
}
@keyframes heroBloom{
  from{ opacity:.26; transform:scale(1.01); }
  to  { opacity:.5;  transform:scale(1.05); }
}

/* contact shadow — tightens as the subject floats up, spreads as it settles */
.hero__ground{
  position:absolute; left:50%; bottom:4%; translate:-50% 0;
  width:46%; height:5%; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(8,32,62,.22) 0%, rgba(8,32,62,0) 70%);
  filter:blur(5px);
  animation:heroGround 11s ease-in-out 1.24s infinite alternate;
}
@keyframes heroGround{
  from{ transform:scale(1);   opacity:.9; }
  to  { transform:scale(.86); opacity:.55; }
}

.hero__art{
  position:absolute; inset:0; z-index:1;
  background:url("new-img.png") no-repeat center center / contain;
  will-change:transform;
}
/* starts at 0 so it picks up exactly where the entrance rise lands */
@keyframes heroFloat{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(0,-14px,0); }
}

/* light sweep, clipped to the cutout's own alpha so it only ever crosses
   the subject and never the empty corners of the box */
.hero__shine{
  position:absolute; inset:0;
  background:linear-gradient(112deg,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.42) 49%,
    rgba(180,240,255,.32) 53%,
    rgba(255,255,255,0) 63%);
  background-size:260% 100%;
  -webkit-mask:url("new-img.png") no-repeat center center / contain;
          mask:url("new-img.png") no-repeat center center / contain;
  mix-blend-mode:screen;
  animation:heroShine 6.5s ease-in-out 2s infinite;
}
@keyframes heroShine{
  0%      { background-position:180% 0; opacity:0; }
  12%     { opacity:1; }
  45%,100%{ background-position:-80% 0; opacity:0; }
}

/* width-aware as well as height-aware, so the headline can never outgrow
   its column on tall-but-narrow windows */
.hero__copy .ty-h1{ margin:0 0 clamp(10px,1.8vh,18px); font-size:clamp(32px, min(4.9vh, 4.2vw), 52px); }
.hero__lede{ max-width:500px; margin:0 0 clamp(18px,2.8vh,28px); font-size:clamp(15px,1.9vh,17px); }

/* ---- eyebrow: status pill with a live pulse ---- */
.hero__eyebrow{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 clamp(14px,2.2vh,20px);
  padding:7px 15px 7px 12px; border-radius:999px;
  font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy-soft);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(97,205,255,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px -10px rgba(8,32,62,.35);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
          backdrop-filter:blur(10px) saturate(1.3);
}
.hero__dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--cyan-2); box-shadow:0 0 0 0 rgba(41,194,240,.6);
  animation:heroPulse 2.4s ease-out infinite;
}
@keyframes heroPulse{
  0%  { box-shadow:0 0 0 0 rgba(41,194,240,.55); }
  70% { box-shadow:0 0 0 7px rgba(41,194,240,0); }
  100%{ box-shadow:0 0 0 0 rgba(41,194,240,0); }
}

/* staggered rise — the hero settles rather than snaps */
.hero__eyebrow,
.hero__copy .ty-h1,
.hero__lede,
.details,
.hero__art{ animation:heroRise 1s cubic-bezier(.22,.7,.28,1) both; }
.hero__copy .ty-h1{ animation-delay:.06s; }
.hero__lede{ animation-delay:.12s; }
.details{ animation-delay:.2s; }
/* the art rises in, then hands straight over to the idle float */
.hero__art{ animation:heroRise 1s cubic-bezier(.22,.7,.28,1) .24s both, heroFloat 11s ease-in-out 1.24s infinite alternate; }
/* the ambience fades up behind it — opacity only, so the pointer parallax
   keeps sole ownership of the stage's transform */
.hero__stage{ animation:heroStageIn 1.2s ease .3s both; }
@keyframes heroStageIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes heroRise{
  from{ opacity:0; transform:translate3d(0,18px,0); }
  to  { opacity:1; transform:translate3d(0,0,0); }
}

/* one frosted panel: price as a full-width lead row, then a 2×2 grid of
   details below it, cells split by hairlines — four items fill the grid
   exactly, so there is no orphan row and no dead space to explain away */
.details{
  width:100%; max-width:540px;
  border-radius:16px; overflow:hidden;
  background:linear-gradient(140deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.60) 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 14px 32px -18px rgba(8,32,62,.38);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
          backdrop-filter:blur(10px) saturate(1.3);
}
.facts{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
}

/* the lead row carries the price — same tile + label grammar as a fact,
   just a heavier figure, and a rule separating it from the grid */
.fact--price{
  border-top:0;
  border-bottom:1px solid rgba(8,32,62,.09);
  background:linear-gradient(120deg, rgba(234,248,255,.62) 0%, rgba(255,255,255,0) 68%);
}
.fact__price{
  display:flex; align-items:baseline; flex-wrap:wrap;
  font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--navy-deep);
}
.fact__price__sub{
  font-size:12px; font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted);
}
/* thin divider between the amount and its qualifier */
.fact__price__sub::before{
  content:''; display:inline-block; vertical-align:middle;
  width:1px; height:13px; margin:0 11px;
  background:rgba(8,32,62,.16);
}
.fact{
  display:flex; align-items:center; gap:11px; min-width:0;
  padding:clamp(10px,1.5vh,13px) 15px;
  border-top:1px solid rgba(8,32,62,.07);
  border-left:1px solid rgba(8,32,62,.07);
  transition:background-color .3s ease;
}
/* only interior edges get a rule */
.fact:nth-child(-n+2){ border-top:0; }
.fact:nth-child(odd){ border-left:0; }
.fact:hover{ background:rgba(255,255,255,.55); }

/* dark squircle tile — navy body with a cyan glow bleeding in
   from the bottom-right corner, white stroke icon on top */
.fact__ico{
  flex:none; width:36px; height:36px; display:grid; place-items:center;
  border-radius:12px; color:var(--white);
  background:
    radial-gradient(90% 90% at 118% 118%, var(--cyan) 0%, rgba(41,194,240,.55) 26%, rgba(8,32,62,0) 62%),
    linear-gradient(145deg, #0E2E52 0%, var(--navy) 45%, #05142A 100%);
  box-shadow:
    0 4px 12px rgba(8,32,62,.22),
    0 0 0 1px rgba(97,205,255,.35),
    inset 0 1px 0 rgba(255,255,255,.12);
  transition:box-shadow .35s ease;
}
.fact:hover .fact__ico{
  box-shadow:
    0 6px 18px rgba(8,32,62,.28),
    0 0 0 1px rgba(97,205,255,.75),
    0 0 18px -4px rgba(41,194,240,.75),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.fact__ico svg{ width:18px; height:18px; }
.fact__txt{ display:flex; flex-direction:column; min-width:0; font-size:14.5px; font-weight:500; color:var(--navy-deep); line-height:1.35; }
.fact__slots{ display:flex; flex-direction:column; gap:2px; }

.fact__txt b{ font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ====================== MAIN GRID ====================== */
.main-grid{ background:transparent; padding:20px 0 96px; }
/* speaker + form on the left, about + what you'll learn on the right */
.main-grid__inner{ display:grid; grid-template-columns:1.45fr 1fr; gap:clamp(40px,5vw,72px); align-items:start; }

/* ---------- card ---------- */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
/* static: the speaker sits above it in the same column, so sticking would
   slide the card up over the speaker */
.form-card{ padding:0; background:transparent; border:0; box-shadow:none; border-radius:0; }

.form-head{ padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.form-head__tag{
  display:inline-block; margin-bottom:10px;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy-soft); background:var(--cyan-pale);
  padding:5px 10px; border-radius:999px;
}
/* matches .about__title exactly — same size, weight and tracking */
.form-head .ty-h2{ font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.25; display:flex; align-items:center; gap:10px; }
/* small badge icon sitting in front of the form title */
.form-head__ico{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  background:var(--cyan-pale); color:var(--navy);
}
.form-head__ico svg{ width:19px; height:19px; }
.form-head .ty-body-sm{ margin:8px 0 0; color:var(--muted); }

/* ---------- form panel (soft card holding the fields) ---------- */
.form-panel{
  background:linear-gradient(180deg,#FBFCFE 0%, var(--wash) 100%);
  border:1px solid var(--line-soft);
  border-radius:24px;
  padding:40px 40px 44px;
  box-shadow:0 1px 2px rgba(8,32,62,.04), 0 18px 44px rgba(8,32,62,.06);
}

/* ---------- fields ---------- */
.row{ display:grid; gap:14px; margin-bottom:14px; }
.row--2{ grid-template-columns:1fr 1fr; }
.row--3{ grid-template-columns:repeat(3,1fr); }

.field{ display:flex; flex-direction:column; min-width:0; }
.field label{ font-size:12.5px; font-weight:500; color:var(--slate); margin-bottom:6px; letter-spacing:.005em; }
.field label .opt{ color:var(--muted); font-weight:400; }
.field label .req{ color:var(--danger); font-weight:600; }

/* input + leading icon */
.control{ position:relative; display:block; }
.control__ico{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:#9FB0C0; pointer-events:none;
  transition:color .18s;
}
.control__ico svg{ width:100%; height:100%; display:block; }
.field .control--ico input{ padding-left:38px; }
.control:focus-within .control__ico{ color:var(--navy); }
.field.is-invalid .control__ico{ color:var(--danger); }

.field input,
.field select{
  font-family:'Poppins',sans-serif; font-size:14px; color:var(--navy-deep);
  background:var(--white);
  border:1px solid #E4EAF1;
  border-radius:10px;
  padding:10px 13px;
  width:100%;
  box-shadow:0 1px 2px rgba(8,32,62,.04);
  transition:border-color .18s, box-shadow .18s, background-color .18s;
}
.field select{
  appearance:none; cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23557C93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:15px;
}
.field input::placeholder{ color:#AEB9C6; }
.field input:hover,
.field select:hover{ border-color:#CBD8E5; box-shadow:0 2px 6px rgba(8,32,62,.06); }
.field input:focus,
.field select:focus{
  outline:none; background:var(--white);
  border-color:var(--cyan-2);
  box-shadow:0 0 0 4px rgba(97,205,255,.22);
}
.field input:disabled,
.field select:disabled{ background:var(--wash-2); color:var(--muted); cursor:not-allowed; border-color:var(--line-soft); }

.field.is-invalid input,
.field.is-invalid select{ border-color:var(--danger); background-color:#FEF6F5; }
.field.is-valid input,
.field.is-valid select{ border-color:#BFE3CE; background-color:var(--white); }

.err{ display:none; font-size:11.5px; color:var(--danger); margin-top:5px; }
.field.is-invalid .err{ display:block; }

.phone{ display:grid; grid-template-columns:112px 1fr; gap:8px; }

/* ---------- country dial picker ---------- */
.dial{ position:relative; }
.dial__btn{
  font-family:'Poppins',sans-serif; font-size:13px; color:var(--navy-deep);
  display:flex; align-items:center; gap:7px;
  width:100%; cursor:pointer;
  background:var(--white);
  border:1px solid #E4EAF1;
  border-radius:10px;
  padding:10px 9px 10px 11px;
  box-shadow:0 1px 2px rgba(8,32,62,.04);
  transition:border-color .18s, box-shadow .18s, background-color .18s;
}
.dial__btn:hover{ border-color:#CBD8E5; box-shadow:0 2px 6px rgba(8,32,62,.06); }
.dial__btn:focus-visible{
  outline:none; border-color:var(--cyan-2);
  box-shadow:0 0 0 4px rgba(97,205,255,.22);
}
.field.is-invalid .dial__btn{ border-color:var(--danger); background:#FEF6F5; }

.dial__flag{
  width:20px; height:15px; flex:0 0 20px; display:block;
  object-fit:cover; border-radius:2px;
  box-shadow:0 0 0 1px rgba(8,32,62,.10);
}
.dial__code{ flex:1 1 auto; text-align:left; white-space:nowrap; }
.dial__caret{ width:14px; height:14px; flex:0 0 14px; color:#557C93; transition:transform .18s; }
.dial.is-open .dial__caret{ transform:rotate(180deg); }

.dial__list{
  position:absolute; z-index:40; top:calc(100% + 6px); left:0;
  min-width:238px; max-height:264px; overflow-y:auto;
  margin:0; padding:5px; list-style:none;
  background:var(--white);
  border:1px solid #E4EAF1; border-radius:12px;
  box-shadow:0 14px 34px rgba(8,32,62,.14);
}
.dial__opt{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; border-radius:8px;
  font-size:13.5px; color:var(--body); cursor:pointer;
}
.dial__opt:hover,
.dial__opt.is-active{ background:var(--wash-2); color:var(--navy-deep); }
.dial__opt[aria-selected="true"]{ background:rgba(97,205,255,.16); color:var(--navy-deep); font-weight:500; }
.dial__opt .dial__flag{ box-shadow:0 0 0 1px rgba(8,32,62,.12); }
.dial__opt-name{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dial__opt-dial{ flex:0 0 auto; color:var(--muted); font-size:12.5px; }

/* ---------- submit ---------- */
#submitBtn{ margin-top:26px; }

.form-status{ margin:12px 0 0; font-size:13px; text-align:center; min-height:20px; }
.form-status.is-err{ color:var(--danger); }
.form-status.is-ok{ color:var(--ok); }

/* ---------- social / contact ---------- */
/* Brand-coloured tiles — official platform colours */
.social__link{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:12px; border:0; color:var(--white);
  box-shadow:var(--shadow-sm);
  transition:filter .2s, transform .2s, box-shadow .2s;
}
.social__link svg{ width:20px; height:20px; }
.social__link:hover{
  text-decoration:none; transform:translateY(-2px);
  filter:brightness(1.08); box-shadow:var(--shadow-md);
}
/* Instagram — official gradient */
.social__link--ig{
  background:radial-gradient(circle at 30% 107%,
    #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}
/* LinkedIn */
.social__link--li{ background:#0A66C2; }
/* WhatsApp */
.social__link--wa{ background:#25D366; }
/* Facebook */
.social__link--fb{ background:#1877F2; }
/* Phone — brand navy */
.social__link--call{ background:var(--navy); color:var(--cyan); }

/* ---------- submit spinner ---------- */
.btn__arrow{ width:18px; height:18px; flex:none; transition:transform .2s; }
.ty-btn:hover .btn__arrow{ transform:translateX(3px); }
.is-loading .btn__arrow{ display:none; }
.btn__spin{ display:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; }
.is-loading .btn__label{ opacity:.7; }
.is-loading .btn__spin{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =================== SPEAKER + DESCRIPTION =================== */
.col-desc{ padding-top:6px; position:relative; }
/* faint brand dot-grid sitting beside the description */
.col-desc::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:150px; right:-4px; width:58px; height:58px;
  background-image:radial-gradient(var(--blue-pale) 1.6px, transparent 1.7px);
  background-size:13px 13px; opacity:.75;
}
.col-desc > *{ position:relative; z-index:1; }

/* ---------- speaker ---------- */
.speaker{ display:flex; align-items:center; gap:20px; }
.speaker__photo{
  flex:none;
  width:104px; height:104px; border-radius:14px;
}
.speaker__photo img{
  width:100%; height:100%; border-radius:14px; object-fit:cover;
  background:var(--white); display:block;
  box-shadow:0 0 0 1px rgba(8,32,62,.08), 0 10px 24px rgba(8,32,62,.14);
}
.speaker__tag{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy-soft); margin-bottom:6px;
}
.speaker__name{ margin:0; font-size:24px; font-weight:600; color:var(--navy-deep); letter-spacing:-.02em; line-height:1.2; }
.speaker__role{ margin:5px 0 0; font-size:14px; font-weight:500; color:var(--navy-soft); line-height:1.45; }

.rule{ border:0; border-top:1px solid var(--line-soft); margin:28px 0; }

/* ---------- about ---------- */
.about__title{
  margin:0 0 12px; font-size:26px; font-weight:600;
  color:var(--navy-deep); letter-spacing:-.02em; line-height:1.25;
}
.about .ty-body{ margin:0; font-size:15.5px; }

.mini-h{
  margin:30px 0 14px; font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--navy-soft);
}
.mini-h--flush{ margin-top:0; }
.learn .ty-body-sm{ margin:0; font-size:14.5px; }

.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.ticks li{ position:relative; padding-left:30px; font-size:15px; color:var(--body); line-height:1.55; }
/* the label leads its own line so the point reads as a mini heading */
.tick__label{
  display:block; margin-bottom:2px;
  font-size:15px; font-weight:600; color:var(--navy-deep);
}
/* brand-navy badge with a cyan corner glow and a white check */
.ticks li::before{
  content:""; position:absolute; left:0; top:2px;
  width:20px; height:20px; border-radius:7px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/11px no-repeat,
    radial-gradient(90% 90% at 118% 118%, var(--cyan) 0%, rgba(41,194,240,.5) 28%, rgba(8,32,62,0) 64%),
    linear-gradient(145deg, #0E2E52 0%, var(--navy) 50%, #05142A 100%);
  box-shadow:0 3px 8px rgba(8,32,62,.20), inset 0 1px 0 rgba(255,255,255,.12);
}

/* =================== FAQ ===================
   Split header (title left, intro right) over two accordion
   columns of soft white cards. Each column opens independently
   so a long answer never pushes its neighbour down. */
.faq{ padding:8px 0 84px; }

.faq__head{
  display:grid; grid-template-columns:1fr 1fr; gap:32px 56px;
  align-items:start; margin-bottom:34px;
}
.faq__title{
  margin:0; font-size:42px; font-weight:600;
  color:var(--navy-deep); letter-spacing:-1.4px; line-height:1.18;
}
.faq__lede{
  margin:6px 0 0; font-size:16px; color:var(--body); line-height:1.6;
}

.faq__grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.faq__col{ display:flex; flex-direction:column; gap:20px; }

.faq__item{
  border-radius:16px; background:var(--white);
  border:1px solid var(--line-soft);
  box-shadow:0 1px 2px rgba(8,32,62,.05);
  transition:box-shadow .25s ease, border-color .25s ease;
}
.faq__item:hover{ box-shadow:0 10px 26px rgba(8,32,62,.08); }
.faq__item.is-open{ border-color:var(--line); box-shadow:0 14px 34px rgba(8,32,62,.10); }

.faq__q{ margin:0; font-size:inherit; font-weight:inherit; }

.faq__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 24px; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:500; text-align:left;
  color:var(--navy-deep); line-height:1.45;
}
.faq__btn:focus-visible{ outline:2px solid var(--cyan-2); outline-offset:-2px; border-radius:16px; }

/* CSS-drawn plus that loses its vertical bar when the panel opens */
.faq__sign{
  position:relative; flex:none; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line); background:var(--white);
  transition:background-color .2s ease, border-color .2s ease, transform .25s ease;
}
.faq__sign::before,
.faq__sign::after{
  content:''; position:absolute; top:50%; left:50%;
  width:11px; height:1.6px; border-radius:2px;
  background:var(--navy-deep); transform:translate(-50%,-50%);
  transition:transform .25s ease, opacity .2s ease;
}
.faq__sign::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__btn:hover .faq__sign{ border-color:var(--navy-soft); background:var(--cyan-pale); }
.faq__item.is-open .faq__sign{
  background:var(--navy-deep); border-color:var(--navy-deep); transform:rotate(180deg);
}
.faq__item.is-open .faq__sign::before,
.faq__item.is-open .faq__sign::after{ background:var(--white); }
.faq__item.is-open .faq__sign::after{ opacity:0; transform:translate(-50%,-50%) rotate(0deg); }

/* Height is driven from script.js so open/close can animate.
   visibility (not display) keeps the closed answer out of the
   tab order and off screen readers while staying measurable. */
.faq__panel{
  overflow:hidden; height:0; visibility:hidden;
  transition:height .28s ease, visibility 0s linear .28s;
}
.faq__item.is-open .faq__panel{
  visibility:visible; transition:height .28s ease;
}
.faq__panel p{
  margin:0; padding:0 62px 22px 24px;
  font-size:14.5px; color:var(--body); line-height:1.65;
}

/* =================== FINAL CTA / REGISTRATION ===================
   One wide cyan slab with a diagonal darker fold across the
   right-hand corner, headline + button up top and the supporting
   points sitting in ruled columns underneath. */
.cta{ padding:0 0 88px; }

.cta__card{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(34px,4vw,56px) clamp(26px,3.6vw,54px);
  border-radius:26px;
  background:linear-gradient(104deg, #067FA8 0%, #14A6CE 46%, #29C2F0 100%);
  box-shadow:0 26px 60px rgba(8,32,62,.18);
  color:var(--white);
}

/* the diagonal shade sweeping in from the top-right corner */
.cta__fold{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to bottom left, rgba(4,6,11,.20) 0%, rgba(4,6,11,.20) 22%, rgba(4,6,11,0) 22.2%),
    radial-gradient(520px 320px at 8% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%);
}

.cta__top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.cta__copy{ max-width:46ch; }

/* the mark is drawn for light backgrounds, so it sits on a white chip
   rather than directly on the cyan gradient */
.cta__logo{
  display:block; width:auto; height:42px;
  margin:0 0 clamp(16px,2vw,22px);
  padding:10px 16px; border-radius:12px;
  background:var(--white);
  box-shadow:0 8px 20px rgba(4,6,11,.16);
}

.cta__title{
  margin:0; font-size:clamp(26px,3.1vw,38px); font-weight:600;
  letter-spacing:-.02em; line-height:1.18; color:var(--white);
}
.cta__lede{
  margin:14px 0 0; font-size:15.5px; line-height:1.6;
  color:rgba(255,255,255,.9);
}

.cta__points{
  list-style:none; margin:clamp(30px,3.4vw,46px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.cta__points li{
  padding:0 24px;
  border-left:1px solid rgba(255,255,255,.28);
  font-size:14px; line-height:1.6; color:rgba(255,255,255,.88);
}
.cta__points li:first-child{ border-left:0; padding-left:0; }
.cta__points b{ font-weight:600; color:var(--white); }

/* ====================== FOOTER ====================== */
.foot{ border-top:1px solid var(--line-soft); background:var(--wash); padding:56px 0 28px; margin-top:80px; }
.foot__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr;
  gap:48px; padding-bottom:40px;
}
.foot__brand img{ height:48px; width:auto; }
.foot__brand p{ margin:18px 0 20px; font-size:14px; color:var(--body); line-height:1.65; max-width:320px; }
.foot__social{ list-style:none; margin:0; padding:0; display:flex; gap:10px; }
.foot__social .social__link{ width:38px; height:38px; border-radius:10px; }
.foot__social .social__link svg{ width:17px; height:17px; }

.foot__col h4{
  margin:0 0 16px; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy-deep);
}
.foot__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot__col a{ font-size:14px; color:var(--body); transition:color .18s; }
.foot__col a:hover{ color:var(--navy); text-decoration:none; }

.foot__col--contact address{
  display:flex; flex-direction:column; gap:2px;
  margin-top:18px; font-style:normal; font-size:13px; color:var(--muted); line-height:1.55;
}
.foot__col--contact address b{ font-size:12px; font-weight:600; color:var(--navy-deep); }

.foot__bar{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-top:24px; border-top:1px solid var(--line);
}
.foot__bar p{ margin:0; font-size:13px; color:var(--muted); }
.foot__bar ul{ list-style:none; margin:0; padding:0; display:flex; gap:24px; flex-wrap:wrap; }
.foot__bar a{ font-size:13px; color:var(--muted); transition:color .18s; }
.foot__bar a:hover{ color:var(--navy); text-decoration:none; }

/* ====================== THANK-YOU PAGE ======================
   thankyou.html — the confirmation the form redirects to. */
.thanks{ padding:clamp(32px,6vh,72px) 0 clamp(48px,8vh,96px); }
.thanks__inner{ max-width:760px; margin-inline:auto; }

.thanks__card{
  padding:clamp(28px,3.4vw,44px);
  animation:pop .32s ease;
}
.thanks__tick{
  width:60px; height:60px; margin:0 0 22px; border-radius:50%;
  display:grid; place-items:center; background:var(--cyan-pale); color:var(--navy);
}
.thanks__tick svg{ width:28px; height:28px; }
@keyframes pop{ from{ transform:translateY(12px) scale(.98); opacity:0; } }

.thanks__tag{
  display:inline-block; margin-bottom:12px;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy-soft); background:var(--cyan-pale);
  padding:5px 10px; border-radius:999px;
}
.thanks__title{ font-size:clamp(26px,3vw,34px); font-weight:600; letter-spacing:-.025em; }
.thanks__lede{ margin:12px 0 0; font-size:15.5px; max-width:56ch; }

/* ---- event summary ---- */
.thanks__meta{
  list-style:none; margin:28px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.thanks__meta li{
  display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto;
  column-gap:12px; align-items:center;
  background:var(--wash); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 16px;
}
.thanks__meta-ico{
  grid-row:1 / span 2;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  background:var(--white); border:1px solid var(--line); color:var(--navy);
}
.thanks__meta-ico svg{ width:17px; height:17px; }
.thanks__meta b{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.thanks__meta span:last-child{ font-size:14.5px; font-weight:500; color:var(--navy-deep); line-height:1.4; }

/* ---- social ---- */
.thanks__social{ margin-top:30px; padding-top:24px; border-top:1px solid var(--line-soft); text-align:center; }
.thanks__social-label{
  display:block; margin-bottom:14px;
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.thanks__social-list{
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
}
/* Smaller, centred tiles — glyph carries each platform's colour */
.thanks__social .social__link{
  width:34px; height:34px; border-radius:10px;
  background:var(--white); border:1px solid var(--line-soft); box-shadow:none;
}
.thanks__social .social__link svg{ width:16px; height:16px; }
.thanks__social .social__link--fb{ color:#1877F2; }
.thanks__social .social__link--ig{ color:#D6249F; }
.thanks__social .social__link--li{ color:#0A66C2; }
.thanks__social .social__link--wa{ color:#25D366; }
.thanks__social .social__link:hover{
  filter:none; border-color:currentColor; box-shadow:var(--shadow-sm);
}

@media (max-width:720px){
  .thanks{ padding:24px 0 56px; }
  .thanks__card{ padding:26px 20px 28px; }
  .thanks__meta{ grid-template-columns:1fr; gap:10px; }
}

/* ============== STICKY MOBILE CTA BAR ==============
   Hidden by default; the small-screen media query turns it on and
   script.js toggles .is-up when the register form is out of view. */
.mbar{ display:none; }

@media (max-width:860px){
  .mbar{
    display:flex; align-items:center; gap:14px;
    position:fixed; z-index:80; left:0; right:0; bottom:0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    backdrop-filter:saturate(180%) blur(18px);
    border-top:1px solid var(--line);
    box-shadow:0 -10px 30px rgba(8,32,62,.10);
    transform:translateY(110%);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .24s, visibility .24s;
  }
  .mbar.is-up{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; }

  .mbar__info{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
  .mbar__info b{
    font-size:13px; font-weight:600; color:var(--navy-deep); line-height:1.3;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .mbar__info span{
    font-size:11.5px; color:var(--muted); line-height:1.35;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  .mbar__btn{
    flex:none; display:inline-flex; align-items:center; justify-content:center;
    min-height:46px; padding:0 22px; border-radius:12px;
    background:var(--navy-deep); color:var(--white);
    font-size:14.5px; font-weight:600; letter-spacing:-.01em;
    box-shadow:0 8px 20px rgba(4,6,11,.22);
    transition:transform .16s ease, box-shadow .16s ease;
  }
  .mbar__btn:active{ transform:scale(.96); box-shadow:0 4px 12px rgba(4,6,11,.2); }
  .mbar__btn:hover{ text-decoration:none; color:var(--white); }
}

/* ====================== RESPONSIVE ====================== */
/* collapse the nav into a drawer */
@media (max-width:1140px){
  .ty-nav__burger{ display:flex; }
  .ty-nav__cta{ display:none; }
  .ty-nav__menu{
    position:absolute; left:0; right:0; top:100%;
    background:var(--white); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg); padding:12px 24px 22px;
    display:none;
  }
  .ty-nav__menu.is-open{ display:block; }
  .ty-nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .ty-nav__list > li{ border-bottom:1px solid var(--line-soft); }
  .ty-nav__list > li:last-child{ border-bottom:0; }
  .ty-nav__list > li > a{ padding:14px 0; justify-content:space-between; }
  .ty-nav__sub{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; padding:0 0 10px 12px; min-width:0;
  }
  .ty-nav__sub a{ padding:8px 0; font-size:13.5px; }
  .has-sub .chev{ display:none; }
  .ty-nav{ position:relative; }

  /* 4 → 3 columns before the cards get too narrow to read */
}

@media (max-width:1080px){
  .hero__inner{ grid-template-columns:1fr; gap:40px; min-height:0; padding-top:56px; padding-bottom:64px; }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .hero__copy .ty-h1{ font-size:44px; }
  /* single column: the artwork stacks under the copy at full width */
  .hero__stage{
    justify-self:center; width:100%; max-width:720px;
  }
  .ty-h1{ font-size:44px; letter-spacing:-1.6px; }
  .main-grid__inner{ grid-template-columns:1fr; gap:48px; }
  .form-card{ position:static; }
  .col-desc::before{ display:none; }
  .about__title,
  .form-head .ty-h2{ font-size:24px; }

  /* ---- faq ---- */
  .faq__head{ grid-template-columns:1fr; gap:14px; margin-bottom:28px; }
  .faq__title{ font-size:34px; letter-spacing:-1px; }
  .faq__title br{ display:none; }
  .faq__lede{ margin-top:0; }

  /* two ruled columns; the second row needs its own top gap */
  .cta__points{ grid-template-columns:1fr 1fr; row-gap:22px; }
  .cta__points li:nth-child(odd){ border-left:0; padding-left:0; }
}

/* ---------------- phones & small tablets ---------------- */
@media (max-width:720px){
  .container{ padding:0 18px; }

  /* ---- type ---- */
  .ty-h1{ font-size:34px; letter-spacing:-1px; }
  .ty-h2{ font-size:27px; }
  .ty-h3{ font-size:22px; }
  .ty-body{ font-size:15px; }
  .about__title,
  .form-head .ty-h2{ font-size:22px; }

  /* ---- hero ---- */
  .hero__inner{ padding-top:32px; padding-bottom:40px; gap:28px; }
  /* the artwork stays on phones — it stacks under the copy, keeping the
     desktop reading order, a touch shorter than its 2:1 desktop ratio */
  .hero__stage{ width:100%; max-width:460px; justify-self:center; aspect-ratio:16/11; }
  /* the outer rings scale off the stage height, which is now proportionally
     taller — pull them in so they stay inside the viewport */
  .hero__ring--1,
  .hero__orbit--1{ height:104%; }
  .hero__ring--2,
  .hero__orbit--2{ height:118%; }
  .hero__ring--3,
  .hero__orbit--3{ height:110%; }
  .hero__beam{ height:150%; }
  .hero__aura{ height:118%; }

  .hero__eyebrow{ margin:0 0 14px; font-size:11.5px; padding:6px 13px 6px 11px; }
  .hero__copy .ty-h1{ margin:0 0 12px; font-size:clamp(29px,8.4vw,38px); letter-spacing:-1.1px; }
  .hero__lede{ margin:0 0 20px; font-size:15px; }

  /* the detail panel keeps its 2×2 grid, just tighter */
  .details{ max-width:none; border-radius:14px; }
  .fact__price{ font-size:18px; }
  .fact{ gap:10px; padding:12px 13px; }
  .fact__ico{ width:32px; height:32px; border-radius:10px; }
  .fact__ico svg{ width:16px; height:16px; }
  .fact__txt{ font-size:13px; min-width:0; }
  .fact__txt b{ font-size:10px; letter-spacing:.09em; }

  /* ---- main grid / form ---- */
  .main-grid{ padding:4px 0 64px; }
  .main-grid__inner{ gap:48px; }
  .form-card{ padding:0; }
  .form-head{ padding-bottom:16px; margin-bottom:20px; }
  .form-head__ico{ width:30px; height:30px; border-radius:9px; }
  .form-head__ico svg{ width:17px; height:17px; }
  .form-panel{ padding:26px 22px 30px; border-radius:20px; }

  .row--2, .row--3{ grid-template-columns:1fr; }
  .row{ gap:16px; margin-bottom:16px; }

  /* 16px keeps iOS Safari from zooming the page on focus */
  .field input,
  .field select,
  .dial__btn{ font-size:16px; border-radius:12px; min-height:48px; padding:12px 14px; }
  .field select{ padding-right:38px; background-position:right 13px center; }
  .field .control--ico input{ padding-left:42px; }
  .control__ico{ left:15px; }
  .field label{ font-size:13px; margin-bottom:7px; }

  .phone{ grid-template-columns:112px 1fr; gap:8px; }
  .dial__btn{ padding:10px 10px 10px 12px; font-size:14px; }
  .dial__list{
    left:0; right:auto;
    min-width:0; width:max(240px, calc(100vw - 52px)); max-width:calc(100vw - 52px);
    max-height:min(56vh,300px);
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  .dial__opt{ padding:11px 10px; font-size:14.5px; }

  #submitBtn{ margin-top:22px; }
  .ty-btn--dark{ padding:17px 24px; min-height:56px; border-radius:14px; }

  /* ---- speaker / description ---- */
  .col-desc{ padding-top:0; }
  .speaker{ gap:16px; }
  .speaker__photo{ width:104px; height:104px; border-radius:14px; }
  .speaker__photo img{ border-radius:14px; }
  .speaker__name{ font-size:20px; }
  .speaker__role{ font-size:13.5px; }
  .rule{ margin:26px 0; }
  .about .ty-body{ margin-bottom:0; }
  .mini-h{ margin:30px 0 14px; }
  .ticks{ gap:14px; }
  .ticks li{ font-size:14.5px; padding-left:28px; }

  /* ---- faq ---- */
  .faq{ padding:0 0 60px; }
  .faq__head{ margin-bottom:24px; }
  .faq__title{ font-size:clamp(26px,7.4vw,32px); letter-spacing:-.9px; }
  .faq__lede{ font-size:15px; }
  /* one column: the two .faq__col blocks stack in order */
  .faq__grid{ grid-template-columns:1fr; gap:14px; }
  .faq__col{ gap:14px; }
  .faq__item{ border-radius:14px; }
  .faq__btn{ padding:18px 18px; gap:14px; font-size:15px; }
  .faq__sign{ width:28px; height:28px; }
  .faq__panel p{ padding:0 18px 18px; font-size:14px; }

  /* ---- final CTA ---- */
  .cta{ padding:0 0 56px; }
  .cta__card{ border-radius:20px; }
  /* the diagonal fold reads as clutter at this width */
  .cta__fold{ background:radial-gradient(420px 260px at 6% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%); }
  .cta__logo{ height:32px; padding:8px 13px; margin-bottom:16px; }
  .cta__top{ gap:24px; }
  .cta__lede{ font-size:15px; }
  .cta__points{ grid-template-columns:1fr; row-gap:0; }
  .cta__points li{
    border-left:0; padding:14px 0 0;
    border-top:1px solid rgba(255,255,255,.28);
  }
  .cta__points li:first-child{ padding-top:0; border-top:0; }

  /* ---- footer ---- */
  .foot{ margin-top:56px; padding:44px 0 24px; }
  .foot__grid{ grid-template-columns:1fr; gap:32px; padding-bottom:32px; }
  .foot__bar{ flex-direction:column; align-items:flex-start; gap:14px; }
  .foot__bar ul{ gap:16px; }
  .foot__social .social__link{ width:44px; height:44px; border-radius:12px; }
  .foot__social .social__link svg{ width:19px; height:19px; }
}

/* ---------------- small phones ---------------- */
@media (max-width:420px){
  .container{ padding:0 16px; }
  .hero__copy .ty-h1{ letter-spacing:-.8px; }
  /* single column — the hairlines have to switch axis with it */
  .facts{ grid-template-columns:1fr; }
  .facts .fact{ border-left:0; border-top:1px solid rgba(8,32,62,.07); }
  .facts .fact:first-child{ border-top:0; }
  .speaker{ gap:14px; }
  .speaker__photo{ width:88px; height:88px; border-radius:12px; }
  .speaker__photo img{ border-radius:12px; }
  .speaker__name{ font-size:19px; }
  .form-panel{ padding:22px 18px 26px; border-radius:18px; }
  .phone{ grid-template-columns:104px 1fr; }
  .ty-btn--dark{ font-size:15px; padding:16px 18px; }
  .mbar{ gap:10px; padding-left:14px; padding-right:14px; }
  .mbar__btn{ padding:0 18px; font-size:14px; }
}

/* ---------------- short landscape phones ----------------
   vh-based clamps collapse here, so pin the hero to fixed sizes. */
@media (max-height:520px) and (orientation:landscape){
  .hero__inner{ padding-top:28px; padding-bottom:32px; }
  .hero__copy .ty-h1{ font-size:34px; }
}

/* ---------------- touch devices ----------------
   Desktop hover styles stick after a tap on touch screens, so swap
   them for pressed-state feedback instead. */
@media (hover:none){
  a:hover{ text-decoration:none; }
  .ty-btn:hover{ background:var(--navy); color:var(--white); }
  .ty-btn--dark:hover{ background:var(--navy-deep); color:var(--white); }
  .ty-btn:active{ transform:scale(.985); }
  .field input:hover,
  .field select:hover,
  .dial__btn:hover{ border-color:#E4EAF1; box-shadow:0 1px 2px rgba(8,32,62,.04); }
  .dial__opt:hover{ background:transparent; color:var(--body); }
  .dial__opt:active{ background:var(--wash-2); }
  .dial__opt[aria-selected="true"]{ background:rgba(97,205,255,.16); color:var(--navy-deep); }
  .social__link:hover{ transform:none; filter:none; box-shadow:var(--shadow-sm); }
  .social__link:active{ transform:scale(.94); }
  .fact:hover{ background:transparent; }
  .fact:hover .fact__ico{ box-shadow:0 4px 12px rgba(8,32,62,.22), 0 0 0 1px rgba(97,205,255,.35), inset 0 1px 0 rgba(255,255,255,.12); }
  .fact:active{ background:rgba(255,255,255,.55); }
  .faq__item:hover{ box-shadow:0 1px 2px rgba(8,32,62,.05); }
  .faq__item.is-open:hover{ box-shadow:0 14px 34px rgba(8,32,62,.10); }
  .faq__btn:hover .faq__sign{ border-color:var(--line); background:var(--white); }
  .faq__item.is-open .faq__sign,
  .faq__item.is-open .faq__btn:hover .faq__sign{ background:var(--navy-deep); border-color:var(--navy-deep); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
}

/* ============================================================
   PRIVACY POLICY — small line under the form + modal
   ============================================================ */
.form-privacy{
  margin:10px 0 0;
  font-size:12px; line-height:1.5; text-align:center; color:var(--muted);
}
.form-privacy__link{
  font:inherit; color:var(--navy-soft); font-weight:500;
  background:none; border:0; padding:0;
  text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:rgba(11,76,140,.35);
  cursor:pointer; transition:color .2s, text-decoration-color .2s;
}
.form-privacy__link:hover{ color:var(--navy-deep); text-decoration-color:var(--navy-deep); }
.form-privacy__link:focus-visible{ outline:2px solid var(--cyan-2); outline-offset:3px; border-radius:3px; }

/* ---------- modal shell ---------- */
.pp{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
.pp__scrim{
  position:absolute; inset:0;
  background:rgba(4,6,11,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .25s ease;
}
.pp.is-open .pp__scrim{ opacity:1; }

.pp__dialog{
  position:relative;
  display:flex; flex-direction:column;
  width:100%; max-width:720px; max-height:min(86vh, 860px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .25s ease, transform .25s ease;
}
.pp.is-open .pp__dialog{ opacity:1; transform:none; }

/* ---------- head ---------- */
.pp__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:22px 26px 16px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, var(--cyan-pale) 0%, var(--white) 100%);
}
.pp__title{ margin:0; font-size:22px; font-weight:600; color:var(--navy-deep); letter-spacing:-.02em; line-height:1.25; }
.pp__meta{ margin:4px 0 0; font-size:12px; color:var(--muted); }
.pp__close{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  background:var(--white); color:var(--slate);
  border:1px solid var(--line); border-radius:50%;
  cursor:pointer; transition:background-color .2s, color .2s, border-color .2s;
}
.pp__close svg{ width:16px; height:16px; }
.pp__close:hover{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.pp__close:focus-visible{ outline:2px solid var(--cyan-2); outline-offset:2px; }

/* ---------- body ---------- */
.pp__body{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:22px 26px 26px;
  font-size:14px; line-height:1.68; color:var(--body);
}
.pp__body:focus-visible{ outline:none; }
.pp__lede{ margin:0; font-size:14.5px; color:var(--navy-deep); }
.pp__sec{ margin-top:22px; padding-top:18px; border-top:1px dashed var(--line); }
.pp__sec h3{
  margin:0 0 8px; font-size:15px; font-weight:600;
  color:var(--navy-deep); letter-spacing:-.01em;
}
.pp__sec p{ margin:0 0 10px; }
.pp__sec p:last-child{ margin-bottom:0; }
.pp__sec ul{ margin:0 0 10px; padding:0; list-style:none; }
.pp__sec li{ position:relative; padding-left:18px; margin-bottom:5px; }
.pp__sec li::before{
  content:""; position:absolute; left:2px; top:.68em;
  width:6px; height:6px; border-radius:50%; background:var(--cyan-2);
}
.pp__sec a{ color:var(--navy-soft); text-decoration:underline; text-underline-offset:2px; word-break:break-word; }
.pp__contact b{ display:block; color:var(--navy-deep); }

/* ---------- foot ---------- */
.pp__foot{
  display:flex; justify-content:flex-end;
  padding:14px 26px;
  border-top:1px solid var(--line-soft);
  background:var(--wash);
}
.pp__foot .ty-btn{ padding:11px 26px; font-size:14px; }

/* page must not scroll behind the dialog */
body.pp-lock{ overflow:hidden; }

@media (max-width:640px){
  .pp{ padding:0; align-items:flex-end; }
  .pp__dialog{ max-width:none; max-height:92vh; border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom:0; }
  .pp__head{ padding:18px 18px 14px; }
  .pp__title{ font-size:19px; }
  .pp__body{ padding:18px 18px 22px; font-size:13.5px; }
  .pp__foot{ padding:12px 18px calc(12px + env(safe-area-inset-bottom)); }
}

/* ---------- registration form: "Save your seat" layout ---------- */
.form-head{ border-bottom:0; padding-bottom:0; margin-bottom:24px; }
.form-head .ty-h2{ font-size:30px; font-weight:700; }
.form-head__sub{ margin:6px 0 0; font-size:14px; color:var(--muted); }
.form-panel > .field{ margin-bottom:18px; }
.form-panel .field label,
.form-panel .field__label{ font-size:13.5px; font-weight:600; color:var(--navy-deep); margin-bottom:8px; }

.slots{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.slot{
  font-family:'Poppins',sans-serif; font-size:15px; font-weight:600;
  padding:15px 12px; border-radius:12px; cursor:pointer;
  background:var(--white); color:var(--navy-deep); border:1.5px solid #E4EAF1;
  transition:background-color .18s, color .18s, border-color .18s;
}
.slot:hover{ border-color:var(--navy); }
.slot:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(97,205,255,.35); }
.slot[aria-checked="true"]{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.field.is-invalid .slot{ border-color:var(--danger); }

.ty-btn--cyan{
  margin-top:8px; background:var(--cyan-2); border-color:var(--cyan-2); color:var(--navy-deep);
  border-radius:14px; padding:18px 32px; font-size:16px; box-shadow:0 10px 24px rgba(41,194,240,.28);
}
.ty-btn--cyan:hover{ background:var(--cyan); border-color:var(--cyan); color:var(--navy-deep); }
.ty-btn--cyan:disabled:hover{ background:var(--cyan-2); }
.ty-btn--cyan .btn__spin{ border-color:rgba(4,6,11,.25); border-top-color:var(--navy-deep); }