/* Zimyo webinar landing page. Colours are the main site's Calm theme. */
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/fonts/poppins-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/fonts/poppins-latin-700-normal.woff2) format("woff2")}

:root {
  --primary:#3a76ee; --primary-h:#2c5fd0; --primary-2:#5f6cf0; --navy:#1d3553; --ink:#11233a;
  --heading:#1f2a37; --text:#5f6b7a; --muted:#8592a3; --border:#e4e9f1;
  --tint:#eef4fd; --surface:#f7faff; --page:#fbfcfe; --green:#2bb37a;
  --shadow:0 1px 2px rgba(17,35,58,.04),0 12px 32px -12px rgba(17,35,58,.16);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth; overflow-x:clip }
body { margin:0; font:400 16px/1.65 Poppins,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased }
img,svg { display:block; max-width:100% }
a { color:var(--primary) }
h1,h2,h3 { margin:0; color:var(--heading); line-height:1.2; letter-spacing:-.015em; text-wrap:balance }
p { margin:0 }
svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.skip { position:absolute; left:-9999px } .skip:focus { left:16px; top:16px; z-index:99; padding:8px 14px; background:#fff; border-radius:8px }
.wrap { width:100%; max-width:1200px; margin:0 auto; padding:0 24px }
.narrow { max-width:820px }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border:0; border-radius:999px; font:600 16px/1 Poppins,sans-serif; text-decoration:none; cursor:pointer; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s }
.btn svg { width:18px; height:18px }
.btn-p { color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow:0 10px 24px -10px rgba(58,118,238,.7) }
.btn-p:hover { transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(58,118,238,.8) }
.btn-w { color:var(--primary); background:#fff } .btn-w:hover { transform:translateY(-2px) }
.btn-sm { padding:10px 20px; font-size:14px }
.btn-full { width:100%; margin-top:6px }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid color-mix(in srgb,var(--primary) 40%,transparent); outline-offset:2px }

/* header */
.top { position:sticky; top:0; z-index:10; background:rgba(251,252,254,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--border) }
.top-in { display:flex; align-items:center; justify-content:space-between; height:68px }
.logo img { width:auto; height:36px }

/* hero */
.hero { position:relative; overflow:hidden; padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,100px) }
.hero-bg { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#f2f7ff,var(--page)) }
.orb { position:absolute; border-radius:50%; filter:blur(70px); opacity:.55 }
.o1 { width:520px; height:520px; right:-120px; top:-160px; background:#cfe0ff }
.o2 { width:420px; height:420px; left:-160px; bottom:-120px; background:#e3e1ff }
.dots { position:absolute; inset:0; background-image:radial-gradient(rgba(29,53,83,.12) 1px,transparent 1px); background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse at 30% 30%,#000 20%,transparent 70%); mask-image:radial-gradient(ellipse at 30% 30%,#000 20%,transparent 70%) }
.hero-in { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,72px); align-items:center }
.pill { display:inline-flex; align-items:center; gap:10px; padding:7px 16px; border-radius:999px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); font-size:14px; font-weight:600; color:var(--navy) }
.live { position:relative; width:9px; height:9px; border-radius:50%; background:#e5484d }
.live::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid #e5484d; opacity:0; animation:ping 1.8s var(--ease) infinite }
@keyframes ping { 0% { transform:scale(.5); opacity:.8 } 100% { transform:scale(1.4); opacity:0 } }
.hero h1 { margin-top:22px; font-size:clamp(34px,5vw,58px); font-weight:700; line-height:1.1 }
.grad { background:linear-gradient(120deg,var(--primary),var(--primary-2)); -webkit-background-clip:text; background-clip:text; color:transparent }
.lead { margin-top:20px; max-width:560px; font-size:clamp(17px,1.5vw,19px); color:var(--text) }
.meta { display:grid; gap:12px; margin:28px 0 0; padding:0; list-style:none }
.meta li { display:flex; align-items:center; gap:12px; font-size:16px }
.meta strong { color:var(--heading); font-weight:600 }
.meta svg { flex:none; width:38px; height:38px; padding:9px; border-radius:12px; color:var(--primary); background:#fff; border:1px solid var(--border) }
.count { display:flex; gap:12px; margin-top:30px }
.count div { display:grid; place-items:center; min-width:76px; padding:12px 8px; border-radius:16px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow) }
.count b { font-size:28px; font-weight:700; line-height:1; color:var(--heading); font-variant-numeric:tabular-nums }
.count small { margin-top:6px; font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:var(--muted) }
.count.over { display:none }

/* registration card */
.card { border-radius:24px; background:#fff; border:1px solid var(--border); box-shadow:0 30px 60px -28px rgba(17,35,58,.3) }
.reg { padding:clamp(24px,3vw,36px); scroll-margin-top:90px }
.reg h2 { font-size:24px }
.reg-sub { margin-top:6px; font-size:15px }
.form { display:grid; gap:14px; margin-top:22px }
.form label { display:grid; gap:6px; font-size:14px; font-weight:500; color:var(--heading) }
.form input, .form select { width:100%; height:48px; padding:0 14px; border:1px solid var(--border); border-radius:12px; font:400 15px Poppins,sans-serif; color:var(--heading); background:var(--surface); transition:border-color .2s,background .2s }
.form input:focus, .form select:focus { border-color:var(--primary); background:#fff }
.form [aria-invalid="true"] { border-color:#e5484d }
.two { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form-msg { min-height:0; font-size:14px; font-weight:500 } .form-msg:empty { display:none }
.form-msg.ok { color:var(--green) } .form-msg.err { color:#d23b40 }
.fine { font-size:12px; color:var(--muted); text-align:center }

/* sections */
.sec { padding:clamp(56px,7vw,96px) 0 }
.alt { background:var(--surface) }
.head { max-width:680px; margin:0 auto 44px; text-align:center }
.eyebrow { display:inline-block; padding:5px 14px; border-radius:999px; background:var(--tint); font-size:13px; font-weight:600; color:var(--primary); letter-spacing:.02em }
.head h2 { margin-top:14px; font-size:clamp(28px,3.4vw,40px) }
.grid4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px }
.feat { padding:28px 24px; border-radius:22px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); transition:transform .35s var(--ease) }
.feat:hover { transform:translateY(-4px) }
.ic { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-2)) }
.ic svg { width:22px; height:22px }
.feat h3 { margin-top:18px; font-size:18px }
.feat p { margin-top:8px; font-size:15px }

.speakers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; max-width:980px; margin:0 auto }
.spk { display:flex; gap:20px; padding:28px; border-radius:22px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow) }
.av { flex:none; display:grid; place-items:center; width:84px; height:84px; border-radius:50%; overflow:hidden; font-size:24px; font-weight:600; color:var(--primary); background:var(--tint) }
.av img { width:100%; height:100%; object-fit:cover }
.spk h3 { font-size:19px }
.role { margin:2px 0 10px; font-size:14px; font-weight:500; color:var(--primary) }
.spk p:last-child { font-size:15px }

.agenda { display:grid; gap:0; margin:0; padding:0; list-style:none }
.agenda li { position:relative; display:grid; grid-template-columns:72px 1fr; gap:20px; padding:0 0 28px }
.agenda li:not(:last-child)::before { content:""; position:absolute; left:91px; top:14px; bottom:0; width:2px; background:var(--border) }
.agenda time { font-weight:600; color:var(--primary); font-variant-numeric:tabular-nums; text-align:right }
.agenda li > div { position:relative; padding-left:24px }
.agenda li > div::before { content:""; position:absolute; left:-5px; top:6px; width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid var(--primary) }
.agenda h3 { font-size:18px }
.agenda p { margin-top:4px; font-size:15px }

.cta { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(28px,4vw,52px); border-radius:28px; color:#fff;
  background:radial-gradient(400px 260px at 100% 0,rgba(255,255,255,.16),transparent 70%),linear-gradient(135deg,var(--primary),var(--primary-2)) }
.cta h2 { color:#fff; font-size:clamp(24px,3vw,34px) }
.cta p { margin-top:8px; color:rgba(255,255,255,.88) }
.cta .btn { flex:none }

.foot { padding:28px 0; border-top:1px solid var(--border); background:#fff }
.foot-in { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:14px; color:var(--muted) }
.foot img { width:auto; height:28px }
.foot a { color:var(--text) }

/* old way vs Zimyo way: drag comparison */
.head-l { max-width:none; margin:0 0 40px; text-align:left }
.head-l p { margin-top:14px; max-width:640px; font-size:17px }
.head-l strong { color:var(--heading) }
.vs { --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; border:1px solid var(--border); border-radius:24px; overflow:hidden; background:#fff; box-shadow:var(--shadow) }
.vs-top { display:flex; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border) }
.vs-tab { padding:8px 14px; border:0; border-radius:999px; background:none; font:600 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); cursor:pointer }
.vs-tab:hover { background:var(--tint) }
.vs-tab-n { color:var(--primary) }
.vs { --pad:clamp(16px,4vw,56px) }
.vs-stages, .vs-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(16px,4vw,64px); padding:0 var(--pad) }
.vs-stages { padding-block:16px; background:var(--surface); border-bottom:1px solid var(--border) }
.vs-stages span { display:flex; align-items:baseline; justify-content:center; gap:10px; font-size:clamp(14px,1.4vw,18px); font-weight:500; color:var(--heading) }
.vs-stages b { font:600 11px var(--mono); color:var(--primary) }
.vs-stage { position:relative; user-select:none; -webkit-user-select:none; touch-action:pan-y }
.vs-old, .vs-new { padding:clamp(32px,5vw,64px) 0 clamp(20px,3vw,32px) }
.vs-grid { --row:clamp(56px,5.5vw,72px); position:relative; z-index:1; grid-template-rows:repeat(3,var(--row)); row-gap:clamp(24px,3.5vw,48px) }
.vs-b { display:grid; place-items:center; min-width:0; padding:8px 10px; border-radius:6px; text-align:center; font-size:clamp(12px,1.3vw,17px); line-height:1.3 }
.vs-note { margin-top:clamp(24px,4vw,44px); padding:0 16px; text-align:center; font:400 clamp(11px,1.1vw,14px)/1.5 var(--mono) }

.vs-old { background:linear-gradient(180deg,#f7f8fa,#f1f3f7); color:#6b7685 }
.vs-old .vs-b { position:relative; border:1.5px solid #c9d0da; background:rgba(255,255,255,.55); color:#4f5a68 }
.vs-old .vs-b:not([style*="/4"])::after { content:""; position:absolute; left:100%; top:50%; width:clamp(16px,4vw,64px); border-top:1.5px dashed #b6bfcb }
.vs-handoff { position:absolute; left:calc(var(--pad) + (100% - 2 * var(--pad)) * .25); top:calc(50% - (var(--row) + clamp(24px,3.5vw,48px)) / 2); transform:translate(-50%,-50%); font:400 11px var(--mono); color:#8b95a3; white-space:nowrap }

.vs-new { position:absolute; inset:0; z-index:2; color:rgba(255,255,255,.7); clip-path:inset(0 0 0 var(--p));
  background:radial-gradient(520px 340px at 50% 48%,rgba(58,118,238,.38),transparent 70%),linear-gradient(160deg,#142a46,#0c1a2c 70%) }
.vs-lines { position:absolute; left:var(--pad); top:0; width:calc(100% - 2 * var(--pad)); height:100%; z-index:0; overflow:visible }
.vs-grid > .vs-b, .vs-hub { position:relative; z-index:1 }
.vs-lines line { stroke:rgba(140,180,255,.35); stroke-width:1.2; vector-effect:non-scaling-stroke }
.vs-new .vs-b { border:1.5px solid rgba(150,185,255,.4); background:rgba(17,35,58,.92); color:#fff; box-shadow:0 0 0 4px rgba(58,118,238,.06) }

.vs-hub span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:clamp(84px,11vw,150px); aspect-ratio:1; padding:12px; border-radius:50%; text-align:center; font-size:clamp(11px,1.15vw,15px); font-weight:600; line-height:1.25; color:#fff;
  background:radial-gradient(circle at 35% 30%,#6f9bff,var(--primary) 45%,#2a4fb8); box-shadow:0 0 0 10px rgba(58,118,238,.14),0 0 0 22px rgba(58,118,238,.07),0 20px 50px -10px rgba(58,118,238,.7) }

.vs-handle { position:absolute; top:0; bottom:0; left:var(--p); z-index:3; width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 0 1px rgba(17,35,58,.15); cursor:ew-resize; outline:none }
.vs-knob { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; transform:translate(-50%,-50%); background:#fff; color:var(--ink); box-shadow:0 6px 20px rgba(17,35,58,.35); transition:transform .2s var(--ease) }
.vs-knob svg { width:20px; height:20px }
.vs-handle:hover .vs-knob, .vs-stage.drag .vs-knob { transform:translate(-50%,-50%) scale(1.08) }
.vs-handle:focus-visible .vs-knob { outline:3px solid color-mix(in srgb,var(--primary) 55%,transparent); outline-offset:3px }
.vs-tip { position:absolute; left:50%; top:calc(50% - 50px); transform:translate(-50%,-50%); padding:6px 12px; border-radius:999px; background:var(--ink); color:#fff; font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; transition:opacity .3s }
.vs.used .vs-tip { opacity:0 }
.vs-stage.anim .vs-new, .vs-stage.anim .vs-handle { transition:clip-path .6s var(--ease),left .6s var(--ease) }
.vs-foot { display:flex; justify-content:space-between; gap:16px; padding:14px 22px; border-top:1px solid var(--border); font:400 12px/1.5 var(--mono); color:var(--muted) }
@media (max-width:720px) {
  .vs { --pad:10px }
  .vs-stages, .vs-grid { column-gap:8px }
  .vs-stages span { flex-direction:column; align-items:center; gap:2px }
  .vs-b { padding:6px 4px; border-radius:5px; font-size:11px }
  .vs-handoff { display:none }
  .vs-grid { --row:66px; row-gap:22px }
  .vs-hub span { width:80px; font-size:10px; padding:8px; box-shadow:0 0 0 6px rgba(58,118,238,.14),0 12px 30px -8px rgba(58,118,238,.7) }
  .vs-foot { flex-direction:column; gap:4px }
  .vs-tab { letter-spacing:.08em; padding:8px 6px }
}

/* hero lead keyword, section intro, hidden speakers */
.lead-k { color:var(--heading); font-weight:600 }
.head-p { margin-top:12px; font-size:17px }
/* mystery speakers */
.mys-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:940px; margin:0 auto }
.mys { display:flex; flex-direction:column; overflow:hidden; border-radius:26px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); transition:transform .4s var(--ease),box-shadow .4s var(--ease) }
.mys:hover { transform:translateY(-6px); box-shadow:0 30px 60px -28px rgba(17,35,58,.35) }
.mys-art { position:relative; display:grid; place-items:end center; height:260px; overflow:hidden; isolation:isolate;
  background:radial-gradient(260px 200px at 50% 38%,rgba(95,140,255,.55),transparent 70%),radial-gradient(400px 220px at 50% 120%,rgba(95,108,240,.45),transparent 70%),linear-gradient(160deg,#142a46,#0b1728) }
.mys-art::before { content:""; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px); background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 70%); mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 70%) }
.mys-art::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%); transform:translateX(-100%); animation:shine 4.5s var(--ease) infinite }
.mys:nth-child(2) .mys-art::after { animation-delay:1.2s }
@keyframes shine { 0%,40% { transform:translateX(-100%) } 80%,100% { transform:translateX(100%) } }
.mys-sil { width:230px; height:auto; filter:blur(.4px) drop-shadow(0 0 24px rgba(120,160,255,.35)) }
.mys-sil text { font:700 34px Poppins,sans-serif; fill:rgba(255,255,255,.9) }
.mys-no { position:absolute; left:18px; top:18px; font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7) }
.mys-lock { position:absolute; right:16px; top:14px; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px) }
.mys-lock svg { width:13px; height:13px }
.mys-tx { display:flex; flex-direction:column; flex:1; padding:24px 26px 26px }
.mys-tx h3 { font-size:21px }
.mys-tx p { margin:8px 0 20px; font-size:15px }
.mys-topic { display:inline-flex; align-self:flex-start; align-items:center; gap:8px; margin-top:auto; padding:7px 14px 7px 7px; border-radius:999px; background:var(--tint); font-size:13px; font-weight:600; color:var(--heading) }

.mys-topic b { padding:3px 9px; border-radius:999px; background:#fff; font-size:11px; font-weight:600; color:var(--primary); text-transform:uppercase; letter-spacing:.06em }
.mys-cta { margin-top:28px; text-align:center; font-size:15px }
.mys-cta a { font-weight:600 }

/* responsive */
@media (max-width:1024px) {
  .hero-in { grid-template-columns:1fr }
  .reg { max-width:560px; width:100%; margin:0 auto }
  .grid4 { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .mys-art { height:220px }
}
@media (max-width:720px) {
  .wrap { padding:0 16px }
  .speakers, .mys-grid { grid-template-columns:1fr }
  .cta { flex-direction:column; align-items:flex-start }
  .foot-in { flex-direction:column; text-align:center }
}
@media (max-width:560px) {
  .grid4, .two { grid-template-columns:1fr }
  .count { gap:8px } .count div { flex:1; min-width:0 } .count b { font-size:24px }
  .spk:not(.spk-x) { flex-direction:column; gap:14px }
  .agenda li { grid-template-columns:52px 1fr; gap:12px } .agenda li:not(:last-child)::before { left:63px }
  .top .btn-sm { padding:9px 14px; font-size:13px }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } *,*::after { animation:none !important; transition:none !important } }