/* ============================================================================
   SpeakUp — webinar landing. Energetic violet/indigo, glassmorphism,
   Space Grotesk. Flourish: large live countdown, glow blobs, bento grid.
   ========================================================================== */
:root {
  --violet: #7c3aed;
  --violet-2: #a855f7;
  --indigo: #4f46e5;
  --pink: #ec4899;
  --cyan: #22d3ee;
  --ink: #0e0b1f;          /* near-black indigo */
  --ink-2: #16122e;
  --surface: #1d1840;
  --text: #ece9f7;
  --text-muted: #b3acd4;
  --text-faint: #8b83b0;
  --line: rgba(168,85,247,.25);

  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);

  --container: 1140px; --container-narrow: 720px;
  --gutter: clamp(1.1rem,.6rem+3vw,2.5rem);
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px; --r-full:999px;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:150ms; --dur:260ms; --dur-slow:520ms;
  --z-header:100; --z-modal:1000;
  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;--sp-6:2rem;--sp-7:3rem;--sp-8:4rem;
  --grad: linear-gradient(100deg, var(--violet-2), var(--indigo) 60%, var(--cyan));
}

*,*::before,*::after{box-sizing:border-box} *{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{font-family:var(--font-sans);font-size:clamp(.98rem,.94rem+.2vw,1.05rem);line-height:1.65;color:var(--text);background:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,iframe{display:block;max-width:100%}img{height:auto}
a{color:var(--violet-2)}
h1,h2,h3{font-family:var(--font-display);line-height:1.1;font-weight:700;letter-spacing:-.02em}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.u-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:50%;translate:-50% -130%;top:8px;z-index:var(--z-modal);background:var(--violet);color:#fff;padding:.5rem 1rem;border-radius:var(--r-sm);transition:translate var(--dur) var(--ease)}
.skip-link:focus{translate:-50% 0}
:focus-visible{outline:2px solid var(--violet-2);outline-offset:3px}

.eyebrow{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-2)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Buttons */
.btn{--_bg:var(--grad);display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font:inherit;font-weight:600;line-height:1;padding:.95rem 1.7rem;border:1px solid transparent;border-radius:var(--r-full);background:var(--grad);color:#fff;cursor:pointer;text-decoration:none;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease),filter var(--dur) var(--ease)}
.btn--primary{box-shadow:0 10px 30px rgba(124,58,237,.45)}
.btn--primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 16px 40px rgba(124,58,237,.55)}
.btn--ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn--lg{padding:1.1rem 2rem;font-size:1.05rem}
.btn--block{width:100%}

/* Header */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:color-mix(in srgb,var(--ink) 78%,transparent);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;gap:var(--sp-4);padding-block:.8rem}
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff}
.logo__mark{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);background:var(--grad);font-size:1.2rem}
.logo__text{font-family:var(--font-display);font-weight:700;font-size:1.3rem}
.logo__text strong{color:var(--violet-2)}
.nav{margin-left:auto}
.nav__menu{list-style:none;display:flex;gap:1.7rem;padding:0}
.nav__menu a{color:var(--text-muted);text-decoration:none;font-weight:500;font-size:.94rem;transition:color var(--dur-fast) var(--ease)}
.nav__menu a:hover{color:#fff}
.nav__toggle{display:none;background:none;border:0;padding:.4rem;cursor:pointer}
.nav__burger,.nav__burger::before,.nav__burger::after{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:var(--dur) var(--ease)}
.nav__burger::before,.nav__burger::after{content:"";position:relative}.nav__burger::before{top:-7px}.nav__burger::after{top:5px}

/* Hero */
.hero{position:relative;text-align:center;padding-block:clamp(3rem,1.5rem+8vw,6rem);overflow:hidden}
.hero__glow{position:absolute;inset:-20% -10% auto -10%;height:120%;background:
  radial-gradient(40% 50% at 25% 20%, rgba(124,58,237,.55), transparent 60%),
  radial-gradient(40% 50% at 80% 10%, rgba(34,211,238,.30), transparent 60%),
  radial-gradient(50% 60% at 60% 90%, rgba(236,72,153,.30), transparent 60%);
  filter:blur(20px);pointer-events:none;z-index:0}
.hero__inner{position:relative;z-index:1;max-width:880px}
.badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:.45rem 1rem;border-radius:var(--r-full);backdrop-filter:blur(6px)}
.badge__dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.hero__title{font-size:clamp(2.3rem,1.3rem+4.6vw,4.6rem);margin:1.3rem 0;color:#fff}
.hero__lead{font-size:1.15rem;color:var(--text-muted);max-width:54ch;margin-inline:auto}

/* Countdown — изюминка */
.countdown{display:inline-flex;align-items:center;gap:.5rem;margin:2.2rem auto 0;padding:1.1rem 1.4rem;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--r-lg);backdrop-filter:blur(10px)}
.countdown__cell{display:flex;flex-direction:column;align-items:center;min-width:64px}
.countdown__num{font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,1.2rem+2.4vw,3rem);color:#fff;font-variant-numeric:tabular-nums;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.countdown__lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);margin-top:.4rem}
.countdown__sep{font-size:1.8rem;color:var(--violet-2);font-weight:700;margin-top:-.6rem}
.hero__when{margin-top:1rem;color:var(--text-muted);font-size:.95rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2rem}
.hero__proof{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:2.2rem;color:var(--text-muted);font-size:.92rem}
.hero__proof strong{color:#fff}
.avatars{display:flex}
.avatars span{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);margin-left:-10px;background:var(--grad)}
.avatars span:nth-child(2){background:linear-gradient(135deg,#f59e0b,#ec4899)}
.avatars span:nth-child(3){background:linear-gradient(135deg,#22d3ee,#4f46e5)}
.avatars span:nth-child(4){background:linear-gradient(135deg,#34d399,#06b6d4)}

/* Sections */
.section{padding-block:clamp(3rem,1.5rem+6vw,5.5rem);position:relative}
.section--soft{background:var(--ink-2)}
.section--cta{background:radial-gradient(80% 120% at 50% 0%, #241a52, var(--ink));overflow:hidden}
.section__head{text-align:center;max-width:var(--container-narrow);margin:0 auto var(--sp-7)}
.section__title{font-size:clamp(1.8rem,1.2rem+2.4vw,3rem);color:#fff;margin-top:.6rem}
.section__subtitle{color:var(--text-muted);margin-top:.8rem;font-size:1.05rem}

/* Program */
.program{list-style:none;padding:0;margin:0;display:grid;gap:1.2rem;grid-template-columns:1fr;counter-reset:p}
.program__item{position:relative;padding:1.6rem 1.6rem 1.6rem 5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.program__item:hover{transform:translateY(-3px);border-color:var(--violet-2)}
.program__num{position:absolute;left:1.4rem;top:1.5rem;width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:var(--r-md);background:var(--grad);color:#fff;font-family:var(--font-display);font-weight:700}
.program__item h3{color:#fff;font-size:1.25rem;margin-bottom:.3rem}
.program__item p{color:var(--text-muted)}

/* Bento */
.bento{display:grid;gap:1.2rem;grid-template-columns:1fr}
.bento__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.bento__card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(124,58,237,.2)}
.bento__card--lg{background:linear-gradient(135deg, rgba(124,58,237,.25), rgba(34,211,238,.12));border-color:rgba(168,85,247,.4)}
.bento__ico{font-size:2rem;display:block;margin-bottom:.7rem}
.bento__card h3{color:#fff;font-size:1.2rem;margin-bottom:.3rem}
.bento__card p{color:var(--text-muted);font-size:.95rem}

/* Video */
.video{position:relative;max-width:900px;margin-inline:auto;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);cursor:pointer;aspect-ratio:16/9;background:#000}
.video__cover{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity var(--dur) var(--ease)}
.video:hover .video__cover{opacity:.6}
.video__play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border:0;border-radius:50%;background:var(--grad);color:#fff;font-size:1.6rem;cursor:pointer;box-shadow:0 10px 40px rgba(124,58,237,.6);transition:transform var(--dur) var(--ease)}
.video:hover .video__play{transform:scale(1.1)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Speaker */
.speaker{display:grid;gap:2rem;align-items:center}
.speaker__photo{width:100%;max-width:300px;aspect-ratio:7/8;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--line);margin-inline:auto}
.speaker__role{color:var(--violet-2);font-weight:600;margin:.4rem 0 1rem}
.speaker__body p{color:var(--text-muted)}
.speaker__tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.speaker__tags li{background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;font-size:.85rem;padding:.4rem .9rem;border-radius:var(--r-full)}

/* Register */
.register{display:grid;gap:2.2rem;align-items:center;position:relative;z-index:1}
.register__list{list-style:none;padding:0;margin-top:1.2rem;display:grid;gap:.6rem}
.register__list li{position:relative;padding-left:1.8rem;color:var(--text-muted)}
.register__list li::before{content:"✦";position:absolute;left:0;color:var(--violet-2)}
.register__form{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--r-lg);padding:2rem;backdrop-filter:blur(12px);display:grid;gap:1.1rem;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.register__seats{text-align:center;color:#fcd34d;font-size:.92rem}
.register__note{text-align:center;font-size:.8rem;color:var(--text-faint)}
.register__note a,.register__form a{color:var(--violet-2)}

/* Forms */
.field{display:grid;gap:.45rem}
.field label{font-weight:600;font-size:.85rem;color:var(--text-muted)}
.field input{font:inherit;padding:.9rem 1.1rem;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-md);background:rgba(255,255,255,.04);color:#fff;width:100%;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.field input::placeholder{color:var(--text-faint)}
.field input:focus{border-color:var(--violet-2);box-shadow:0 0 0 3px rgba(124,58,237,.3);outline:none}
.field[data-invalid] input{border-color:#f87171}
.field__err{color:#f87171;font-size:.82rem}

/* Footer */
.site-footer{background:var(--ink);color:var(--text-faint);padding-block:1.8rem;border-top:1px solid var(--line)}
.site-footer__inner{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;font-size:.9rem}
.site-footer a{color:var(--text-muted);text-decoration:none}

/* Modal */
.modal{border:0;border-radius:var(--r-lg);padding:0;max-width:440px;width:calc(100% - 2rem);background:var(--surface);color:var(--text);box-shadow:0 30px 80px rgba(0,0,0,.6);border:1px solid var(--line)}
.modal::backdrop{background:rgba(14,11,31,.7);backdrop-filter:blur(4px)}
.modal__body{padding:2.6rem 2.2rem;text-align:center;display:grid;gap:.8rem;justify-items:center}
.modal__icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:1.8rem}
.modal__body h2{color:#fff;font-size:1.8rem}
.modal__body p{color:var(--text-muted)}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
[data-reveal].is-visible{opacity:1;transform:none}

/* Responsive */
@media (min-width:680px){
  .program{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .bento{grid-template-columns:repeat(3,1fr)}
  .bento__card--lg{grid-column:span 1;grid-row:span 2;display:flex;flex-direction:column;justify-content:center}
  .speaker{grid-template-columns:300px 1fr}
  .register{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav__toggle{display:inline-flex}
  .nav__menu{position:absolute;inset:100% 0 auto 0;flex-direction:column;gap:0;background:var(--ink-2);border-bottom:1px solid var(--line);padding:.4rem var(--gutter);display:none}
  .nav__menu.is-open{display:flex}.nav__menu li{padding-block:.7rem;border-bottom:1px solid var(--line)}
}
@media (max-width:520px){.site-header__cta{display:none}.countdown{gap:.2rem;padding:.9rem}.countdown__cell{min-width:52px}.countdown__sep{font-size:1.3rem}}
@media (max-width:640px){.field input{font-size:16px}}