/* Layout: Stripi-inspired, white theme only. Mesh hero with a holographic delegate pass, stats + event photo bento,
   cream band, formats bento, particle-globe seat finder, co-hosts, closing CTA. The interest form lives in a modal.
   Radius rule: buttons and tags are pills, inputs 6px, cards 12px, feature panels 16px. */
:root {
  color-scheme: light;
  --canvas: #ffffff;
  --card: #ffffff;
  --soft: #f6f9fc;
  --cream: #f5e9d4;
  --ink: #0d253d;
  --ink-2: #273951;
  --mute: #64748d;
  --hair: #e3e8ee;
  --input-line: #8199b3;
  --primary: #533afd;
  --primary-deep: #4434d4;
  --primary-press: #2e2b8c;
  --navy: #1c1e54;
  --on-primary: #ffffff;
  --ruby: #ea2261;
  --magenta: #f96bee;
  --tag-bg: #b9b9f9;
  --tag-ink: #2e2b8c;
  --ok: #0f7b5f;
  --err: #c41d4f;
  --shadow-1: 0 1px 3px rgba(0, 55, 112, 0.08);
  --shadow-2: 0 8px 24px rgba(0, 55, 112, 0.08), 0 2px 6px rgba(0, 55, 112, 0.04);
  --shadow-3: 0 30px 60px -20px rgba(28, 30, 84, 0.35), 0 12px 24px -12px rgba(0, 55, 112, 0.18);
  --font: "Inter", "SF Pro Display", system-ui, -apple-system, sans-serif;
  --r-lg: 24px;
  --r-md: 16px;
}
/* iOS-style continuous corners: a squircle needs a larger radius to read the same size as a circular one */
@supports (corner-shape: squircle) {
  :root { --r-lg: 44px; --r-md: 28px; }
  .mesh, .meta-row, .fchip, .stats, .photo, .band, .proof li, .deal-card, .bubble, .cell, .slots li, .globe-card, .detail, .anchor.hub, .logo-card, .cta, dialog.modal { corner-shape: squircle; }
}
@media (max-width: 560px) { @supports (corner-shape: squircle) { :root { --r-lg: 36px; --r-md: 24px; } } }
:root[data-theme="dark"] { color-scheme: light; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--canvas); color: var(--ink); font-family: var(--font); font-weight: 300; font-size: 16px; line-height: 1.4; font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--canvas); }
a { color: var(--primary); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; font-feature-settings: "ss01"; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-weight: 300; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: 1160px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.num { font-feature-settings: "tnum", "ss01"; }
.display-xl { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.15; letter-spacing: -0.96px; }
.lead { font-size: 18px; color: var(--ink-2); max-width: 60ch; }
.caption { font-size: 13px; font-weight: 400; letter-spacing: -0.3px; color: var(--mute); }
.tag { display: inline-block; background: var(--tag-bg); color: var(--tag-ink); font-size: 11px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; padding: 4px 10px; border-radius: 9999px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; font-size: 16px; font-weight: 400; line-height: 1; padding: 12px 22px; min-height: 46px; border-radius: 9999px; border: 1px solid var(--primary); cursor: pointer; background: var(--primary); color: var(--on-primary); transition: background .15s, transform .15s, box-shadow .2s; }
.btn:hover { background: var(--primary-deep); border-color: var(--primary-deep); box-shadow: 0 6px 18px -6px rgba(83, 58, 253, .55); }
.btn:active { background: var(--primary-press); transform: scale(0.98); }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn[disabled] { opacity: .6; cursor: progress; }
/* same gradient as the B2B wordmark tile */
.btn-grad { background: linear-gradient(110deg, #533afd 0%, #a640e8 58%, #ea2261 100%); border-color: transparent; box-shadow: 0 .4em 1.1em -.4em rgba(83, 58, 253, .45); }
.btn-grad:hover { background: linear-gradient(110deg, #4434d4 0%, #9435d6 58%, #d81b55 100%); border-color: transparent; box-shadow: 0 8px 22px -8px rgba(166, 64, 232, .7); }
.btn-white { background: #fff; color: var(--primary); border-color: #fff; }
.btn-white:hover { background: #f1efff; border-color: #f1efff; color: var(--primary-deep); }
.textlink { background: none; border: 0; padding: 0; color: var(--primary); font-weight: 400; cursor: pointer; }
.textlink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Hero */
.hero { position: relative; isolation: isolate; overflow: hidden; }
/* the gradient sits in a rounded panel inset from the window edge; the diagonal cut lives on the svg so the corners stay round */
.mesh { position: absolute; inset: 12px 12px auto 12px; height: 84%; z-index: -1; border-radius: var(--r-lg); overflow: hidden; }
.mesh svg { width: 100%; height: 100%; display: block; background: var(--cream); clip-path: polygon(0 0, 100% 0, 100% 58%, 0 100%); }
@media (max-width: 560px) { .mesh { inset: 8px 8px auto 8px; } }
.drift-a { animation: driftA 26s ease-in-out infinite alternate; }
.drift-b { animation: driftB 32s ease-in-out infinite alternate; }
@keyframes driftA { to { transform: translate(60px, 30px); } }
@keyframes driftB { to { transform: translate(-70px, -20px); } }
.hero .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(28px, 4vw, 40px); padding-block: calc(env(safe-area-inset-top, 0px) + clamp(48px, 7vw, 88px)) clamp(64px, 8vw, 96px); }
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: 26px; min-width: 0; max-width: 1040px; }
.presents { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 9999px; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--shadow-1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); line-height: 1; }
.presents .plogo { height: 22px; width: auto; display: block; }
.presents span { font-size: 15px; font-weight: 300; color: var(--ink-2); }
.title .deal { font-style: normal; font-weight: 500; color: var(--ink); background: linear-gradient(90deg, #533afd, #ea2261) no-repeat 0 100% / 100% 3px; padding-bottom: 4px; }
.meta-row { display: inline-grid; grid-template-columns: repeat(2, minmax(160px, auto)); background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.9); border-radius: var(--r-md); box-shadow: var(--shadow-1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; }
.meta-row span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 22px; font-size: 16px; font-weight: 500; color: var(--ink); letter-spacing: -0.2px; text-align: left; }
.meta-row span + span { border-left: 1px solid rgba(13, 37, 61, .1); }
.meta-row small { font-size: 11px; font-weight: 400; color: var(--mute); letter-spacing: 0.2px; }
.meta-note { margin-top: -14px; font-size: 13px; font-weight: 400; color: var(--mute); }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn-ghost { background: rgba(255,255,255,.6); color: var(--ink); border-color: rgba(13, 37, 61, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-ghost:hover { background: #fff; border-color: rgba(13, 37, 61, .3); box-shadow: none; }
.btn-ghost:active { background: #fff; }
@media (max-width: 620px) {
  /* compact pill on phones: each item only as wide as its text */
  .meta-row { display: inline-grid; grid-template-columns: repeat(2, auto); width: auto; }
  .meta-row span { padding: 9px 18px; font-size: 14px; }
  .meta-row span + span { border-left: 0; }
  .meta-row span:nth-child(2) { border-left: 1px solid rgba(13, 37, 61, .1); }
}
.title { font-weight: 650; font-size: clamp(46px, 6.6vw, 84px); line-height: 0.98; letter-spacing: -0.045em; color: var(--ink); }
/* B2B Enterprise Summit wordmark: a gradient B2B tile plus the name. Same lockup in the hero (one line) and on the passes (stacked). */
.wordmark { display: inline-flex; align-items: center; gap: .26em; }
.wm-b2b { display: inline-block; padding: .08em .2em .1em; border-radius: .2em; background: linear-gradient(110deg, #533afd 0%, #a640e8 58%, #ea2261 100%); color: #fff; font-weight: 700; letter-spacing: -.02em; line-height: 1; white-space: nowrap; box-shadow: 0 .08em .3em -.08em rgba(83, 58, 253, .45); }
.wm-name { font-weight: 650; letter-spacing: -.035em; }
.wordmark-hero { flex-wrap: wrap; justify-content: center; row-gap: .06em; }
.wordmark-hero .wm-b2b { font-size: .86em; }
.title .tl { display: block; margin-top: 18px; font-weight: 300; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -0.64px; color: var(--ink-2); }
.title .tl b { font-weight: 650; color: var(--ink); }
/* phones: the name stays on one line (sized to the screen) and the tagline breaks after "One Room." */
@media (max-width: 560px) {
  .title { font-size: min(42px, 9.6vw); }
  .wordmark-hero .wm-name { white-space: nowrap; }
  .title .tl { font-size: min(20px, 5vw); white-space: nowrap; }
  /* both CTA pairs stay side by side on phones */
  .cta-row { flex-wrap: nowrap; gap: 10px; }
  .cta-row .btn { padding: 12px 16px; font-size: 15px; }
}
@media (max-width: 360px) { .cta-row .btn { padding: 11px 12px; font-size: 14px; gap: 6px; } }
.hero .lead { max-width: 46ch; }
.enter { animation: enter .8s cubic-bezier(.16, 1, .3, 1) both; }
.enter-2 { animation-delay: .08s; } .enter-3 { animation-delay: .16s; } .enter-4 { animation-delay: .24s; }
@keyframes enter { from { transform: translateY(14px); } to { transform: none; } }

/* Delegate pass */
.hero-copy { position: relative; z-index: 6; }
.pass-stage { position: relative; display: grid; place-items: center; width: 100%; max-width: 1040px; min-height: 560px; perspective: 1100px; padding-block: 72px 24px; }
#halo { position: absolute; left: -10%; top: -60px; width: 120%; height: calc(100% + 120px); z-index: -1; pointer-events: none; }
.pass-float { position: relative; z-index: 2; }
/* badges hang from lanyards: every swing pivots around the top of the strap */
.side { position: absolute; top: 128px; width: 230px; z-index: 1; transform-origin: 50% -150px; }
.side .pass { box-shadow: 0 2px 0 -.5px #d3d9e3, var(--shadow-2); }
.side-l { left: calc(50% - 400px); animation: slideInL 1.1s cubic-bezier(.16,1,.3,1) .35s both, floatL 8s ease-in-out 1.45s infinite; }
.side-r { right: calc(50% - 400px); animation: slideInR 1.1s cubic-bezier(.16,1,.3,1) .45s both, floatR 9s ease-in-out 1.55s infinite; }
@keyframes slideInL { from { opacity: 0; transform: translateY(-80px) rotate(0deg); } to { opacity: 1; transform: rotate(9deg); } }
@keyframes slideInR { from { opacity: 0; transform: translateY(-80px) rotate(0deg); } to { opacity: 1; transform: rotate(-9deg); } }
@keyframes chipInL { from { opacity: 0; transform: translateX(-56px); } }
@keyframes chipInR { from { opacity: 0; transform: translateX(56px); } }
@keyframes floatL { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(7deg); } }
@keyframes floatR { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(-7deg); } }
.pass.mini { --cut-r: 46%; --cut-l: 56%; }
.pass.mini .brand { top: 34px; left: 18px; font-size: 13px; }
.pass.mini .brand img { height: 12px; }
.pass.mini .meta { font-size: 11px; }
.pass.mini .role-chip { font-size: 10px; padding: 3px 8px; }
.pass.mini .year { top: 32px; right: 16px; font-size: 11px; }
.pass.mini .slot { top: 14px; width: 44px; height: 8px; margin-left: -22px; }
.pass.mini .bottom { left: 18px; right: 18px; bottom: 18px; gap: 8px; }
.pass.mini .event { font-size: 17px; }
.pass.mini .who b { font-size: 13px; }
.pass.mini .photo-id { width: 86px; height: 86px; left: 50%; top: 64px; border-width: 2.5px; }
.hue-a .holo { filter: hue-rotate(-38deg) saturate(1.1); }
.hue-b .holo { filter: hue-rotate(52deg) saturate(1.05); }
/* Lanyard: woven strap with the event name, metal crimp and split ring through the badge slot */
.lanyard { position: absolute; left: 50%; bottom: calc(100% - 26px); width: 30px; height: 210px; margin-left: -15px; z-index: 5; pointer-events: none; }
.lanyard .strap { position: absolute; inset: 0 0 14px; border-radius: 2px; overflow: hidden;
  background: linear-gradient(90deg, rgba(0,0,0,.24), rgba(255,255,255,.14) 18%, transparent 40%, transparent 72%, rgba(0,0,0,.26)), linear-gradient(180deg, #533afd, #a640e8 72%, #ea2261);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 58%); mask-image: linear-gradient(to bottom, transparent, #000 58%); }
.lanyard .strap::before { content: "B2B ENTERPRISE SUMMIT \00B7  B2B ENTERPRISE SUMMIT"; position: absolute; inset: 0; writing-mode: vertical-rl; transform: rotate(180deg); line-height: 30px; padding-top: 14px; color: rgba(255,255,255,.92); font-size: 8.5px; font-weight: 700; letter-spacing: .22em; white-space: nowrap; }
.lanyard .clip { position: absolute; left: 50%; bottom: 0; width: 24px; height: 22px; margin-left: -12px; }
.lanyard .clip::before { content: ""; position: absolute; left: -3px; right: -3px; top: 0; height: 12px; border-radius: 3px; background: linear-gradient(180deg, #fdfdff, #c2c9d4 40%, #eef1f5 60%, #8e98a7); box-shadow: 0 2px 3px rgba(13,37,61,.3); }
.lanyard .clip::after { content: ""; position: absolute; left: 50%; top: 8px; width: 14px; height: 22px; margin-left: -7px; border: 2.5px solid #b4bcc9; border-top-color: #eef1f5; border-radius: 9999px; box-shadow: 0 1px 2px rgba(13,37,61,.35); }
.side .lanyard { width: 24px; height: 180px; margin-left: -12px; }
.side .lanyard .strap::before { line-height: 24px; font-size: 7px; }
.fchip { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 2px; text-align: left; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 10px 14px; box-shadow: var(--shadow-2); }
.fchip.f1, .fchip.f3 { animation: chipInL .9s cubic-bezier(.16,1,.3,1) both, bob 6s ease-in-out infinite; }
.fchip.f2, .fchip.f4 { animation: chipInR .9s cubic-bezier(.16,1,.3,1) both, bob 6s ease-in-out infinite; }
.fchip span { font-size: 11px; font-weight: 400; color: var(--mute); }
.fchip { max-width: 196px; }
.fchip b { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.fchip.f1 { left: calc(50% - 575px); top: 64px; animation-delay: .7s, 1.6s; }
.fchip.f2 { right: calc(50% - 575px); top: 64px; animation-delay: .85s, 2.4s; }
.fchip.f3 { max-width: 168px; left: calc(50% - 575px); bottom: 0; animation-delay: 1s, 3.2s; }
.fchip.f4 { right: calc(50% - 575px); bottom: 0; animation-delay: 1.15s, 2s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
@media (max-width: 1219px) {
  /* not enough room around the passes: the chips line up in a row beneath them instead */
  .pass-stage { grid-template-columns: repeat(4, auto); justify-content: center; align-content: start; gap: 12px; }
  .pass-stage .pass-float { grid-column: 1 / -1; order: -1; margin-bottom: 18px; }
  .fchip { position: static; animation: none !important; max-width: 220px; }
  .side { width: 210px; }
  .side-l { left: calc(50% - 360px); } .side-r { right: calc(50% - 360px); }
  .side .pass { --cut-r: 42%; --cut-l: 52%; }
  .side .pass .event { font-size: 15px; }
}
@media (max-width: 900px) { .pass-stage { grid-template-columns: repeat(2, auto); } }
@media (max-width: 760px) {
  .pass-stage { min-height: 430px; }
  .side { width: 170px; top: 120px; }
  .pass-float .pass .photo-id { width: 92px; height: 92px; top: 70px; }
  .side .pass .photo-id { width: 56px; height: 56px; top: 56px; left: 50%; }
  .side-l { left: calc(50% - 205px); } .side-r { right: calc(50% - 205px); }
  .fchip { display: none; }
  .pass-stage .pass-float { width: 240px; }
  .pass-float .pass .event { font-size: 17px; }
  .pass-float .pass .bottom { left: 18px; right: 18px; bottom: 16px; gap: 8px; }
  .side .pass .event { font-size: 13px; }
  .side .pass .bottom { left: 14px; right: 14px; bottom: 12px; gap: 6px; }
  .side .pass .who b { font-size: 11px; }
  .side .pass .meta { font-size: 9px; }
  .side .pass .role-chip { display: none; }
  .pass-stage { min-height: 0; padding-bottom: 0; }
  .pass-stage .pass-float { margin-bottom: 0; }
  .hero .wrap { padding-bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) { .side, .fchip.f1, .fchip.f2, .fchip.f3, .fchip.f4, .pass-float { animation: none !important; } .side-l { transform: rotate(9deg); } .side-r { transform: rotate(-9deg); } }
.pass-stage::before { content: ""; position: absolute; width: 70%; height: 70%; background: radial-gradient(closest-side, rgba(249,107,238,.45), rgba(83,58,253,.25) 55%, transparent); filter: blur(30px); z-index: -1; }
/* the main badge drops in on its lanyard, then sways gently from the top of the strap */
.pass-float { animation: dropIn 1.2s cubic-bezier(.2,1.25,.35,1) .15s both, swing 7s ease-in-out 1.35s infinite; width: min(300px, 64vw); transform-origin: 50% -170px; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-90px) rotate(5deg); } to { opacity: 1; transform: rotate(-1.5deg); } }
@keyframes swing { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
/* PVC card: a hairline edge for thickness under the drop shadow */
.pass { position: relative; aspect-ratio: 34 / 50; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 2px 0 -.5px #d3d9e3, 0 3px 2px -1px rgba(13,37,61,.12), var(--shadow-3); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s ease-out; }
.pass { text-align: left; }
/* laminate: soft sheen plus a highlight that follows the pointer (JS sets --gx/--gy) */
.pass .glare { position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.9);
  background: radial-gradient(circle at var(--gx, 24%) var(--gy, 14%), rgba(255,255,255,.34), rgba(255,255,255,0) 44%), linear-gradient(125deg, rgba(255,255,255,.2), rgba(255,255,255,0) 30% 72%, rgba(255,255,255,.12)); }
/* badge photo: the holder's portrait in a white mount on the foil */
.pass .photo-id { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); z-index: 1; width: 116px; height: 116px; border-radius: 50%; overflow: hidden; background: linear-gradient(160deg, #fff, #f1efff); border: 3px solid #fff; box-shadow: 0 6px 16px -6px rgba(28,30,84,.5); }
.pass .photo-id img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.holo { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% var(--cut-r, 52%), 0 var(--cut-l, 62%));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"),
    repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 14px, rgba(255,255,255,.16) 15px 16px, rgba(255,255,255,0) 17px 34px),
    radial-gradient(120% 70% at 10% 0%, #f96bee 0%, transparent 55%),
    radial-gradient(90% 60% at 100% 30%, #ff9b6b 0%, transparent 60%),
    linear-gradient(160deg, #f9a8f0 0%, #c084fc 28%, #6d5bfd 52%, #533afd 64%, #ff8a5c 86%, #ffc29e 100%);
}
.holo::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 49%, rgba(255,255,255,.1) 54%, transparent 62%); animation: sheen 5.5s ease-in-out infinite; }
@keyframes sheen { 0% { transform: translateX(-60%); } 55%, 100% { transform: translateX(60%); } }
.pass .slot { position: absolute; top: 18px; left: 50%; width: 56px; height: 10px; margin-left: -28px; border-radius: 9999px; background: rgba(255,255,255,.85); box-shadow: inset 0 1px 2px rgba(28,30,84,.35); }
.pass .brand { position: absolute; top: 44px; left: 24px; color: #fff; font-weight: 600; font-size: 15px; letter-spacing: -0.2px; }
.pass .brand small { display: block; margin-top: 5px; font-weight: 400; font-size: 11px; opacity: .9; letter-spacing: 0.3px; }
.pass .brand img { display: block; height: 15px; width: auto; filter: brightness(0) invert(1); }
.pass .year { position: absolute; top: 40px; right: 22px; color: rgba(255,255,255,.9); font-weight: 600; font-size: 13px; letter-spacing: 0.3px; }
.pass .bottom { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 10px; }
.pass .event { font-weight: 650; font-size: 21px; line-height: 1.05; letter-spacing: -0.6px; color: var(--navy); }
.pass .wordmark { flex-direction: column; align-items: flex-start; gap: 6px; }
.pass .wm-b2b { font-size: .8em; }
.pass .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-top: 1px solid var(--hair); padding-top: 10px; }
.pass .who { display: flex; flex-direction: column; min-width: 0; }
.pass .who span { font-size: 10px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; color: var(--mute); }
.pass .who b { font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass .role-chip { background: var(--tag-bg); color: var(--tag-ink); border-radius: 9999px; padding: 4px 10px; font-size: 11px; font-weight: 500; text-transform: capitalize; white-space: nowrap; }
.pass .meta { font-size: 12px; color: var(--ink-2); }
/* role accents: Speaker blue, Delegate violet, Sponsor rose */
.role-speaker { --acc: #2f6bff; } .role-delegate { --acc: #533afd; } .role-sponsor { --acc: #d81b60; }
.pass .who span { color: var(--acc, var(--mute)); font-weight: 600; }
.pass .row { border-top-color: color-mix(in srgb, var(--acc, #533afd) 24%, #fff); }
.pass .role-chip { background: color-mix(in srgb, var(--acc, #533afd) 12%, #fff); color: var(--acc, var(--tag-ink)); font-weight: 600; }
@media (max-width: 880px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } .mesh { height: 55%; } .pass-float { width: min(300px, 78vw); } }
@media (prefers-reduced-motion: reduce) { .drift-a, .drift-b, .enter, .pass-float, .holo::after { animation: none; } }

/* Sections */
.section { padding-block: clamp(64px, 9vw, 104px); }
.head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; max-width: 880px; }
.sh .ln { display: block; }
.sh b { font-weight: 650; color: var(--primary); }
.track-h .sub { margin-top: .4em; font-size: .58em; letter-spacing: -0.02em; color: var(--ink-2); }
.head-format { margin-bottom: 40px; max-width: none; }
.eyebrow { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.head-row { max-width: none; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.head-row > div { display: flex; flex-direction: column; gap: 14px; }

/* Stats: one raised strip, bold gradient figures */
.stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 32px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 30px 12px; }
/* each stat is centred in its column so the strip has equal side margins and even spacing between dividers */
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 4px 10px; border-left: 1px solid var(--hair); min-width: 0; }
.stat:first-child { border-left: 0; }
.stat .fig { font-size: clamp(26px, 2.4vw, 34px); white-space: nowrap; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--primary); background: linear-gradient(100deg, #533afd, #a640e8 60%, #ea2261); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat .lbl .lc { text-transform: none; } /* keeps the plural "s" in "VCs" lowercase */
.stat .lbl { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } .stat:nth-child(4) { border-left: 0; } }
@media (max-width: 520px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px 8px; } .stat { padding-inline: 10px; } .stat:nth-child(4) { border-left: 1px solid var(--hair); } .stat:nth-child(odd) { border-left: 0; } }

/* Photo bento: 5 slots, 4 x 2 */
.photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 16vw, 210px); gap: 12px; }
.photo { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--soft); border: 1px solid var(--hair); min-width: 0; }
.photo:first-child { grid-column: span 2; grid-row: span 2; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.photo:hover img { transform: scale(1.04); }
.photo.empty { display: grid; place-items: center; background: linear-gradient(140deg, #fbf3e6 0%, #f3eaff 50%, #eef1ff 100%); }
.photo.empty span { font-size: 13px; color: var(--mute); font-weight: 400; display: inline-flex; align-items: center; gap: 8px; }
.photo.empty span::before { content: ""; width: 16px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px; }
@media (max-width: 760px) { .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; } }

/* Cream band */
.band { --pad: clamp(28px, 5vw, 56px); position: relative; overflow: hidden; background: var(--cream); border-radius: var(--r-lg); padding: var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.band-copy { display: flex; flex-direction: column; gap: 16px; }
.band p { color: var(--ink-2); font-size: 18px; max-width: 46ch; }
.proof { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.proof li { display: flex; flex-direction: column; gap: 4px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); border-radius: var(--r-md); padding: 14px; }
.proof b { font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--primary); }
.proof span { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
/* Deal illustration: founder and buyer, their exchange, and the deal card between them */
.deal-art { position: relative; min-height: 430px; align-self: stretch; }
/* person "sticker": a full circle behind them; the body's flat bottom edge is rounded off by the
   circle while the head is free to rise above it (top half unmasked) */
.person { position: absolute; bottom: 0; margin: 0; width: 46%; aspect-ratio: 1; }
.person::before { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.person img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 50% no-repeat, radial-gradient(circle closest-side, #000 99%, transparent 100%);
  mask: linear-gradient(#000 0 0) top / 100% 50% no-repeat, radial-gradient(circle closest-side, #000 99%, transparent 100%); }
.p-founder { left: 0; } .p-founder::before { background: #d9ccff; }
.p-buyer { right: 0; } .p-buyer::before { background: #ffc08a; }
.p-founder img { transform: scaleX(-1); }
.person figcaption { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 9999px; }
.bubble { position: absolute; max-width: 200px; background: #fff; border-radius: var(--r-lg); padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--ink); box-shadow: var(--shadow-2); animation: bob 6s ease-in-out infinite; }
.bubble.b1 { left: 0; top: 0; border-bottom-left-radius: 4px; }
.bubble.b2 { right: 0; top: 13%; border-bottom-right-radius: 4px; background: var(--primary); color: #fff; animation-delay: 1.5s; }
.deal-card { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 2; width: 196px; display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow-3); }
.dc-k { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.deal-card b { font-size: 16px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.dc-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.dc-steps li { flex: 1; font-size: 10px; font-weight: 600; color: var(--primary); padding-top: 7px; border-top: 3px solid var(--primary); }
.dc-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ok); }
.dc-ok svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--ok); fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .band { grid-template-columns: minmax(0, 1fr); } .deal-art { min-height: 340px; max-width: 480px; width: 100%; justify-self: center; } }
@media (max-width: 520px) { .proof { grid-template-columns: minmax(0, 1fr); } .deal-art { min-height: 410px; } .bubble { font-size: 13px; max-width: 75%; padding: 8px 12px; } .bubble.b2 { top: 15%; } .deal-card { width: 170px; top: 47%; } }
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }

/* Formats bento: 7 cells, 4 x 3 */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cell { position: relative; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--card); padding: 26px; display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, opacity .25s; }
.cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.cell h3 { font-size: 22px; letter-spacing: -0.22px; line-height: 1.15; }
.cell p { color: var(--mute); font-size: 15px; }
.cell.connect { grid-column: span 2; grid-row: span 2; background: var(--primary); border-color: var(--primary); color: #fff; justify-content: flex-end; }
.cell.connect h3 { font-size: clamp(28px, 3vw, 34px); letter-spacing: -0.9px; line-height: 1.1; font-weight: 400; }
.cell.connect p { color: rgba(255,255,255,.88); font-size: 16px; }
.cell.connect .tag { align-self: flex-start; background: rgba(255,255,255,.18); color: #fff; margin-bottom: auto; }
/* Enterprise Connect: a peek at a founder's meeting schedule */
.slots { list-style: none; margin: 16px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.slots li { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--r-md); padding: 7px 10px; font-size: 13px; }
.slots time { font-weight: 600; font-feature-settings: "tnum"; }
.slots span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.92); }
.slots i { font-style: normal; opacity: .6; }
.slots em { font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 9999px; background: #fff; color: var(--ok); }
.slots em.wait { background: rgba(255,255,255,.2); color: #fff; }
/* avatar stack sits mid-right of the Networking card */
.faces { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); display: flex; padding-left: 12px; }
.faces .av, .faces b { width: 44px; height: 44px; margin-left: -12px; border: 2px solid var(--cream); }
.cell.expo, .cell.network { justify-content: center; }
.faces b { display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 18px; font-weight: 600; }
.cell.network h3, .cell.network p { max-width: calc(100% - 180px); }
@media (max-width: 480px) { .faces { position: static; transform: none; margin-top: 8px; } .cell.network h3, .cell.network p { max-width: none; } }
/* character avatar: crops the head and shoulders out of the square illustration */
.av { position: relative; display: inline-block; flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #f1efff; }
.av img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.cell.connect svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.cell.connect > :not(svg) { position: relative; z-index: 1; }
.cell.expo { grid-column: span 2; background: var(--navy); border-color: var(--navy); color: #fff; }
.cell.expo p { color: rgba(255,255,255,.75); }
.cell.network { grid-column: span 2; background: var(--cream); border-color: transparent; }
.cell.network p { color: var(--ink-2); }
.bento.dim .cell:not(.match) { opacity: .45; }
.cell.match { box-shadow: 0 0 0 2px var(--ruby); }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cell.connect { grid-row: auto; min-height: 260px; } }
@media (max-width: 480px) { .bento { grid-template-columns: minmax(0, 1fr); gap: 10px; } .cell { min-height: 0; padding: 20px; } .cell.connect, .cell.expo, .cell.network { grid-column: auto; } .cell.connect { min-height: 0; } }
.marquee { margin-top: 20px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.track { display: flex; gap: 8px; width: max-content; animation: marquee 44s linear infinite; }
.marquee:hover .track, .marquee:focus-within .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 4px)); } }
.track span { white-space: nowrap; border: 1px solid var(--hair); border-radius: 9999px; padding: 8px 14px; font-size: 14px; color: var(--ink-2); background: var(--card); }
@media (prefers-reduced-motion: reduce) { .track { animation: none; flex-wrap: wrap; width: auto; } .track [aria-hidden="true"] { display: none; } .marquee { -webkit-mask-image: none; mask-image: none; } }

/* Who attends: particle globe + detail */
.seats { background: var(--soft); }
.seat-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 16px; align-items: stretch; }
.globe-card { position: relative; background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; min-height: 440px; min-width: 0; }
.globe-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.anchor { position: absolute; transform: translate(-50%, -50%); background: rgba(255,255,255,.92); border: 1px solid var(--hair); border-radius: 9999px; padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; box-shadow: var(--shadow-1); white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.anchor:hover { border-color: var(--primary); }
.anchor[aria-selected="true"] { background: var(--primary); color: #fff; border-color: var(--primary); transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 5px rgba(83, 58, 253, .18), var(--shadow-2); font-weight: 600; }
.anchor { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; }
.anchor .av { width: 30px; height: 30px; }
.anchor[aria-selected="true"] .av { background: #fff; }
/* the founder hub sits on the globe's centre */
.anchor.hub { flex-direction: column; gap: 6px; padding: 10px 18px 10px; border-radius: var(--r-md); z-index: 1; }
.anchor.hub .av { width: 68px; height: 68px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(83,58,253,.22); }
.detail .who-am { flex-direction: row; align-items: center; gap: 16px; }
.detail .who-am > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (max-width: 520px) { .detail .who-am { gap: 14px; } .detail h3 { font-size: 20px; } .detail .av-lg { width: 50px; height: 50px; } }
/* the two grey sections run together, so the second doesn't add a second top gap */
.seats + .seats { padding-top: 0; }
.av-lg { width: 64px; height: 64px; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--hair); }
.detail { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: clamp(22px, 3vw, 28px) clamp(22px, 3.4vw, 36px); display: flex; flex-direction: column; justify-content: center; gap: 18px; min-width: 0; border-top: 3px solid var(--primary); }
.detail .who-am { display: flex; align-items: center; gap: 18px; }
.seat-tag { align-self: flex-start; font-size: 11px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; color: var(--tag-ink); background: var(--tag-bg); padding: 4px 10px; border-radius: 9999px; }
.detail .grp { display: flex; flex-direction: column; gap: 18px; padding-top: 20px; border-top: 1px solid var(--hair); }
.detail h3 { font-size: clamp(22px, 2.3vw, 28px); letter-spacing: -0.56px; line-height: 1.15; }
.detail .comes { font-size: 18px; color: var(--ink-2); }
.detail .k { font-size: 13px; font-weight: 400; color: var(--mute); margin-bottom: 8px; }
.detail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.detail li { border: 1px solid var(--hair); background: var(--soft); border-radius: 9999px; padding: 6px 12px; font-size: 14px; font-weight: 400; }
.detail .btn { align-self: flex-start; }
.swap { animation: swap .3s ease; }
@keyframes swap { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .swap { animation: none; } }
@media (max-width: 860px) { .seat-grid { grid-template-columns: minmax(0, 1fr); } .globe-card { min-height: 380px; } .anchor { font-size: 13px; padding: 7px 11px; } }
@media (max-width: 760px) {
  /* phones keep the globe; corner tags become compact cards (avatar above a short label) so they fit */
  .globe-card { min-height: 380px; }
  .anchor { flex-direction: column; gap: 4px; padding: 6px 8px 8px; border-radius: 16px; font-size: 12px; line-height: 1.15; white-space: normal; text-align: center; width: 92px; }
  .anchor .av { width: 34px; height: 34px; }
  .anchor.hub { width: auto; padding: 8px 14px 10px; font-size: 14px; }
  .anchor.hub .av { width: 56px; height: 56px; }
}

/* Partners and Sponsors: two logo rows drifting in opposite directions, pause on hover */
/* rows run the full window width and fade out softly towards both edges */
.logo-rows { display: flex; flex-direction: column; gap: 12px; margin-inline: calc(50% - 50vw); }
.logo-rows .marquee { margin-top: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
/* the loop is driven by script (see "Logo rows" in script.js) so it can also be dragged */
.logo-rows .track { list-style: none; margin: 0; padding: 4px 0; gap: 12px; animation: none; will-change: transform; }
.logo-rows .marquee { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.logo-rows .marquee.dragging { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .logo-rows .track { flex-wrap: nowrap; width: max-content; } .logo-rows .track [aria-hidden="true"] { display: grid; } }
@keyframes logos { to { transform: translateX(calc(-50% - 6px)); } }
.logo-card { flex: none; width: 220px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-md); min-height: 108px; display: grid; place-items: center; padding: 18px 24px; transition: box-shadow .2s, border-color .2s, transform .2s; }
.logo-card:hover { border-color: var(--tag-bg); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.logo-card img { height: var(--h, 40px); width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 560px) { .logo-card { width: 168px; min-height: 92px; padding: 14px; } .logo-card img { height: calc(var(--h, 40px) * .78); } }

/* Closing CTA: copy and button on the left; a delegate badge hangs from the card's top edge on the right */
.cta { --pad: clamp(32px, 5vw, 64px); --pad-y: clamp(28px, 3.4vw, 44px); position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); background: var(--primary); color: #fff; padding: var(--pad-y) var(--pad); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 32px; }
.cta svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.cta-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.cta h2 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.04; max-width: 14ch; }
.cta p { color: rgba(255,255,255,.88); font-size: 18px; max-width: 44ch; }
/* the badge: starts at the card's top edge so the strap reads as hanging from it */
.cta-pass { align-self: stretch; display: flex; justify-content: center; align-items: flex-start; margin-top: calc(-1 * var(--pad-y)); padding-top: 76px; }
.cta-pass .hang { position: relative; width: min(224px, 100%); transform-origin: 50% -100px; animation: swing 7s ease-in-out infinite; }
.cta-pass .lanyard { height: 150px; }
.cta-pass .pass .photo-id { width: 92px; height: 92px; top: 66px; }
.cta-pass .pass .event { font-size: 18px; }
.cta-pass .pass .bottom { left: 18px; right: 18px; bottom: 16px; gap: 8px; }
.cta-pass .lanyard .strap { -webkit-mask-image: none; mask-image: none; }
.cta-pass .pass { box-shadow: 0 2px 0 -.5px #d3d9e3, 0 40px 70px -24px rgba(20, 10, 80, .55); }
@media (max-width: 860px) {
  .cta { grid-template-columns: minmax(0, 1fr); }
  .cta-pass { margin: 0; padding-top: 100px; }
  .cta-pass .hang { width: 230px; transform-origin: 50% -90px; }
  .cta-pass .lanyard { height: 120px; }
  .cta-pass .pass .photo-id { width: 88px; height: 88px; top: 66px; }
  .cta-pass .pass .event { font-size: 17px; }
  .cta-pass .pass .bottom { left: 18px; right: 18px; bottom: 16px; gap: 8px; }
  .cta-pass .lanyard .strap { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 58%); mask-image: linear-gradient(to bottom, transparent, #000 58%); }
}
@media (max-width: 560px) {
  .cta { --pad: 24px; }
}
@media (prefers-reduced-motion: reduce) { .cta-pass .hang, .logo-rows .track { animation: none; } }

/* Footer */
.foot { border-top: 1px solid var(--hair); }
.foot .wrap { padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: 13px; color: var(--mute); }
.foot b { color: var(--ink); font-weight: 600; }
.foot .wrap { align-items: center; }
.foot-r { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot-link { color: var(--ink-2); font-weight: 400; }
.foot-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.form-foot small a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.social { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: #0a66c2; transition: background .2s, transform .2s; }
.social:hover { background: var(--soft); transform: translateY(-1px); }
.social svg { width: 24px; height: 24px; fill: currentColor; display: block; }

/* Modal form */
dialog.modal { width: min(680px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--card); color: var(--ink); box-shadow: var(--shadow-3); overflow: auto; }
dialog.modal::backdrop { background: rgba(13, 37, 61, .45); backdrop-filter: blur(4px); animation: fadeIn .35s ease both; }
dialog.modal.opening { animation: modalIn .6s cubic-bezier(.16, 1, .3, 1) both; }
dialog.modal.opening .modal-head > div, dialog.modal.opening .stack > *, dialog.modal.opening .done > * { animation: fieldIn .55s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 140ms); }
dialog.modal.closing { animation: modalOut .26s ease-in both; }
dialog.modal.closing::backdrop { animation: fadeOut .26s ease-in both; }
@keyframes modalIn { 0% { opacity: 0; transform: scale(.35); filter: blur(8px); } 55% { filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes modalOut { to { opacity: 0; transform: translateY(14px) scale(.95); } }
@keyframes fieldIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.modal.opening, dialog.modal.closing, dialog.modal.opening *, dialog.modal::backdrop { animation: none !important; } }

/* Scroll reveal: blocks slide in from the side as they enter the viewport */
main { overflow-x: clip; }
html.reveal-on .rv { opacity: 0; transform: translate(var(--sx, 0px), var(--sy, 32px)); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1), box-shadow .25s; transition-delay: var(--d, 0s); }
html.reveal-on .rv.in { opacity: 1; transform: none; }
html.reveal-on .rv.in:hover { transition-delay: 0s; }
.modal-head { position: sticky; top: 0; z-index: 1; background: var(--card); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 28px 16px; border-bottom: 1px solid var(--hair); }
.modal-head h2 { font-size: 26px; letter-spacing: -0.4px; font-weight: 400; }
.modal-head p { font-size: 14px; color: var(--mute); margin-top: 4px; }
.close { flex: none; width: 40px; height: 40px; border-radius: 9999px; border: 1px solid var(--hair); background: var(--card); cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink-2); }
.close:hover { border-color: var(--input-line); }
.modal-body { padding: 24px 28px 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.chips legend { font-size: 14px; font-weight: 400; color: var(--ink-2); margin-bottom: 8px; padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 9px 16px; border-radius: 9999px; border: 1px solid var(--input-line); font-size: 14px; font-weight: 400; transition: background .15s, color .15s, border-color .15s; cursor: pointer; }
.chip input:hover + span { border-color: var(--primary); }
.chip input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: minmax(0, 1fr); } .modal-head, .modal-body { padding-inline: 18px; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 400; color: var(--ink-2); }
.field .opt { color: var(--mute); font-weight: 300; }
.field input, .field select, .field textarea { width: 100%; background: #fff; color: var(--ink); border: 1px solid var(--input-line); border-radius: 6px; padding: 10px 12px; font-size: 15px; font-weight: 300; min-height: 44px; transition: border-color .15s, box-shadow .15s; }
.field input::placeholder, .field textarea::placeholder { color: var(--mute); }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(83, 58, 253, .2); }
.field.bad input, .field.bad select { border-color: var(--err); }
.ferr { color: var(--err); font-size: 13px; font-weight: 400; }
.ferr:empty { display: none; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.form-foot small { color: var(--mute); font-size: 13px; max-width: 36ch; }
.status { font-size: 14px; font-weight: 400; padding: 12px 14px; border-radius: 8px; color: var(--err); background: rgba(196, 29, 79, .08); }
.done { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 8px 0 4px; }
.done .tick { width: 44px; height: 44px; border-radius: 9999px; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 20px; }
.done h3 { font-size: 28px; letter-spacing: -0.5px; }
.done p { color: var(--ink-2); }
.done .row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }