/* === Design tokens (from branding) === */
:root{
  --bg:#10122B;          /* темный фон */
  --pink:#FF00FE;        /* розовый */
  --green:#06FC6A;       /* зеленый */
  --neon:#3EF6FF;        /* голубой неоновый */
  --red:#FF295C;         /* красный — использовать в эмблеме */
  --orange:#FF5A1E;      /* оранжевый */
  --purple:#5E3696;      /* фиолетовый */
  --bluepanel:#3B91F0;   /* голубые плашки */
  --text:#E8EEFF;        /* светлый текст */
  --muted:#9AA3C8;
  --neonblue:#3EF6FF;    /* голубой неоновый - для времени */
}

/* .collabscolor{color:#ff00fe}
.medialabcolor{color:var(--purple)}
.techpcolor{color:var(--neonblue)}
.talkscolor{color:var(--pink)} */

/* === Base === */
html,body{margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;}
a{color:var(--neon); text-decoration:none}
a:hover{opacity:.9}
.container{width:min(1200px, 92vw); margin-inline:auto}

/* Универсальная «сетка» на flex */
.grid{display:flex; flex-wrap:wrap; gap:24px}
.grid > *{flex:1 1 100%}                     /* mobile-first */
@media (min-width:640px){ .grid > *{flex:calc(50% - 24px)} }
@media (min-width:980px){ .grid > *{flex:calc(30% - 24px)} }
@media (max-width: 768px) {.grid {grid-template-columns: 1fr !important;}}

/* === Header === */
header{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(10px);
  background:linear-gradient(180deg, rgba(16,18,43,.85), rgba(16,18,43,.65));
  border-bottom:1px solid rgba(62,246,255,.12);
}
.header-slogan{font-weight:700; font-size:18px;text-align: center;}
@media (max-width:640px){ .header-slogan{font-size:16px} }
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:.5px}
.logo img{max-height:80px; max-width:120px}
.pill{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; border:1px solid var(--bluepanel); color:#fff}
.cta{background:var(--bluepanel); color:#fff; font-weight:800}
.cta:hover{transform:translateY(-1px)}
.asiapluslogo{font-family:Nunito, sans-serif; font-size:35px; color:#fff; font-weight:700}


/* === Hero === */
.hero{position:relative; overflow:hidden; min-height:65vh; display:flex}
.hero .wrap{
  display:flex; gap:36px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:56px 0 32px;
}
.hero .wrap > div:first-child{flex:1 1 520px; min-width:280px}
.hero .wrap > div:last-child{flex:1 1 320px; min-width:260px}
.kicker{color:var(--green); font-weight:800; letter-spacing:.12em}
h1{font-size:clamp(36px, 5vw, 64px); line-height:1.05; margin:.2em 0 .3em; font-weight:900}
.lead{font-size:clamp(16px, 2vw, 20px); color:var(--muted)}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;align-items: center;}
.stamp{display:inline-flex; align-items:center; gap:10px; color:var(--pink); border:1px dashed rgba(255,0,254,.35); padding:8px 12px; border-radius:10px}
.bracket {height: 30px;align-content: center;}
@media (max-width: 520px) {
  .bracket {display: none;}
}

/* Decorations */
.accents, .decor{position:absolute; inset:0; pointer-events:none}
.shape{position:absolute; width:18px; height:18px; background:var(--neon); border-radius:4px; opacity:.6; box-shadow:0 0 14px rgba(62,246,255,.65)}
.shape.p{background:var(--purple)} .shape.o{background:var(--orange)}
.shape.g{background:var(--green)}  .shape.r{background:var(--red)} .shape.c{background:var(--pink)}

/* === Section headings === */
.section{padding:64px 0}
.section h2{font-size:clamp(28px, 3.6vw, 40px); margin:0 0 8px; letter-spacing:.3px; display:flex; align-items:center; gap:8px}
.section h2 img{width:48px; height:48px}
.section .sub{color:var(--muted); margin:8px 0 24px}

/* === About === */
.about{background:linear-gradient(180deg, rgba(62,145,240,.08), rgba(62,145,240,.02));
  border-top:1px solid rgba(62,145,240,.22); border-bottom:1px solid rgba(62,145,240,.12)}

/* === Agenda (timeline + accordions) === */
.agenda-grid{display:flex; flex-direction:column; gap:16px}
.parallel{display:flex; gap:16px; flex-wrap:wrap}
.parallel > .card{flex:1 1 380px; min-width:280px}
.card{background:rgba(59,145,240,.08); border:1px solid rgba(62,246,255,.18); border-radius:16px; padding:16px}
.time{display:inline-flex; gap:8px; align-items:center; font-weight:800; color:var(--neonblue); margin-bottom:4px}
details{border-top:1px dotted rgba(62,246,255,.25); padding:10px 0}
summary{cursor:pointer; list-style:none; font-weight:700}
summary::-webkit-details-marker{display:none}
.subtopic{padding-left:24px}

/* badges */
.badge{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:10px; font-size:13px; font-weight:700}
.b-media{background:#3B91F0; color:#fff}
.b-tech{background:#FF295C; color:#fff}
.b-collabs{background:#ff00fe; color:#fff}
.b-talks{background:#4F35AF; color:#fff}
.b-garden{background:#FF8A49; color:#fff}
/* .b-tedx{background:#8d038d; color:#fff} */

/* === Speakers === */
.speakers{display:flex; flex-wrap:wrap; gap:16px}
.speaker{background:rgba(16,18,43,.6); border:1px solid rgba(62,246,255,.16); border-radius:14px; padding:16px; text-align:center;
  flex:1 1 280px; min-width:260px; max-width:100%}
@media (min-width:640px){ .speaker{flex:calc(50% - 16px)} }
@media (min-width:980px){ .speaker{flex:calc(30% - 16px)} }
.speaker img{width:100%; max-width:120px; height:120px; border-radius:50%; object-fit:cover; margin-bottom:12px}
.speaker h3{margin:0 0 8px; font-size:18px}
.role{color:var(--muted); font-size:14px}

/* === Tickets === */
.tickets{background:linear-gradient(90deg, rgba(59,145,240,.12), rgba(233,243,255,.22)); border-top:0; border-bottom:0}
.ticket-card{display:flex; gap:18px; align-items:center; background:#10122b; border:0; border-radius:16px; padding:16px}

/* === Partners === */
.logos{display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:center}
.logo-box{background:rgba(59,145,240,.10); border:1px dashed rgba(62,246,255,.25); border-radius:12px; padding:16px; min-height:68px;
  display:flex; align-items:center; justify-content:center; color:#bcd7ff; font-weight:700; letter-spacing:.3px;
  flex:1 1 150px; max-width:200px}
.partner-logo{max-width:190px; max-height:66px}

/* === Footer === */
footer{padding:36px 0; border-top:1px solid rgba(62,246,255,.18); color:var(--muted)}

/* utilities */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.hidden{display:none}

/* === Floating sprites (global background) === */
.sprite-layer{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.sprite{position:absolute; will-change:transform, opacity; opacity:.65; filter:drop-shadow(0 0 8px rgba(62,246,255,.45))}
header, section, footer{position:relative; z-index:1} /* контент выше спрайтов */