* { margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ background:#fff; }
/* anchor targets clear the 88px fixed header */
section[id]{ scroll-margin-top:110px; }
body{
  font-family:'Geologica', Arial, sans-serif;
  color:#171717;
  font-weight:400;
  min-width:1920px;
}
img{ display:block; max-width:none; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.container{ width:1410px; margin:0 auto; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:24px 50px; border-radius:12px;
  font-size:16px; font-weight:600; text-transform:uppercase;
  white-space:nowrap; border:none; cursor:pointer;
}
.btn-gradient{ background:linear-gradient(90deg,#595edb,#3f93e1); color:#fff; }
.btn-outline{ background:transparent; color:#fff; border:1px solid #fff; }
.btn-outline-blue{ background:transparent; color:#3f92e1; border:2px solid #3f92e1; }
.btn-white{ background:#fff; color:#3f92e1; }
.btn-sm{ padding:16px; font-size:14px; border:1.5px solid #fff; border-radius:12px; color:#fff; }
.btn-gold{ background:linear-gradient(90deg,#dba559,#fff12e); color:#111; }
.lang-switch{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #fff; border-radius:90px; padding:8px 20px;
  font-size:14px; font-weight:600; color:#fff; text-decoration:none;
  transition:opacity .2s ease;
}
.lang-switch:hover{ opacity:.8; }

/* ---------- HEADER / HERO ---------- */
.hero{
  position:relative; width:100%; min-width:1920px; height:1000px; overflow:hidden;
  color:#fff;
}
.hero-bg{ position:absolute; inset:0; width:100%; height:128%; top:-20%; object-fit:cover; }
.hero-bg-mobile{ display:none; }
.hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.58); }

.header{
  position:fixed; top:0; left:0; z-index:50; width:100%; height:88px;
  transition:background .35s ease, box-shadow .35s ease;
}
.header.scrolled{
  background:#000;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.header .container{ position:relative; height:100%; }
.header .logo{ position:absolute; left:0; top:50%; transform:translateY(-50%); width:110px; height:56px; object-fit:contain; }
.nav{ position:absolute; left:50%; transform:translateX(calc(-50% - 48px)); top:31px; display:flex; gap:50px; font-weight:300; font-size:16px; white-space:nowrap; }
.header-actions{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:16px; }
.header-actions .btn{ padding:12px 24px; }

.hero-content{
  position:absolute; z-index:2; left:50%; transform:translateX(-50%); top:250px;
  width:930px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:24px;
}
.hero-info{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.hero-date{ display:flex; gap:8px; align-items:center; font-weight:300; font-size:16px; }
.hero-date .ico{ width:24px; height:24px; flex-shrink:0; }
.hero-title{ font-size:50px; font-weight:600; line-height:1.2; text-transform:uppercase; }
.hero-desc{ font-size:16px; font-weight:300; width:690px; }
.hero-buttons{ display:flex; gap:8px; }

.hero-bottom{
  position:absolute; z-index:2; left:50%; transform:translateX(-50%); top:742px;
  width:712px;
  display:flex; flex-direction:column; align-items:center; gap:50px;
}
.hero-theme{ background:linear-gradient(90deg,#595edb,#3f93e1); border-radius:90px; padding:8px 24px; font-size:16px; text-align:center; text-transform:uppercase; }
.hero-theme b{ font-style:italic; font-weight:700; }
.hero-stats{ display:flex; gap:16px; width:100%; justify-content:center; }
.hero-stat{ display:flex; flex-direction:column; align-items:center; gap:8px; width:166px; }
.hero-stat-icon{ background:linear-gradient(90deg,#595edb,#3f93e1); border-radius:6px; padding:4px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.hero-stat-icon .ico{ width:20px; height:20px; }

/* index-v2: real landscape image on desktop, real portrait image on mobile — natural
   width/height, no crop, no artificial background strip. Button overlays the image
   directly (inside its own bottom margin), image then runs straight into next section. */
.hero-v2{ height:auto; min-height:0; overflow:visible; background:#01063c; padding-top:88px; position:relative; }
.hero-v2 .hero-overlay{ display:none; }
.hero-v2 .hero-bg{ position:static; width:100%; height:auto; object-fit:unset; }
.hero-v2 .hero-bg-desktop{ display:block; }
.hero-v2 .hero-bg-mobile{ display:none; }
.hero-content.hero-content-v2{ animation:none; position:absolute; left:25.7%; top:auto; bottom:1.2vw; transform:translateX(-50%); width:auto; padding:0; display:flex; justify-content:center; z-index:3; }
.hero-stat span{ font-size:16px; font-weight:600; text-align:center; line-height:1.3; }

/* ---------- GENERIC SECTION ---------- */
.section{ padding:120px 0 0; position:relative; overflow:hidden; }
.section-inner{ width:1410px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:30px; }
.eyebrow{ font-size:20px; font-weight:600; text-transform:uppercase; text-align:center; line-height:1.3; }
.eyebrow .blue{ color:#3f92e1; }
h2.h-title{ font-size:36px; font-weight:600; text-transform:uppercase; text-align:center; width:100%; }
h2.h-title .blue{ color:#3f92e1; }
.subtitle{ font-size:16px; font-weight:400; text-align:center; }

/* problem cards */
.problems-head{ display:flex; flex-direction:column; gap:8px; text-align:center; width:100%; }
.problems-head h2{ font-size:36px; font-weight:600; text-transform:uppercase; }
.problems-body{ display:flex; gap:30px; width:100%; align-items:center; }
.problem-grid{ display:flex; flex-direction:column; gap:16px; width:690px; }
.problem-row{ display:flex; gap:16px; height:124px; }
.card{
  background:#fff; border:1px solid #e4e4e4; border-radius:16px;
  display:flex; align-items:center; gap:20px; padding:20px 24px; flex:1;
  box-shadow:0 0 4px rgba(0,0,0,.04),0 4px 8px rgba(0,0,0,.06);
}
.icon-circle{ width:46px; height:46px; border-radius:999px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.icon-circle.red{ background:#ffdade; }
.icon-circle.green{ background:#dfffda; }
.icon-circle .ico{ width:30px; height:30px; }
.card p{ font-size:18px; font-weight:500; }
.problem-photo{ width:690px; height:404px; border-radius:24px; object-fit:cover; }
.quote-cta{ font-size:22px; font-style:italic; font-weight:600; text-align:center; }
.quote-cta .blue{ color:#3f92e1; }

/* after-forum */
.afterforum-body{ display:flex; gap:30px; align-items:center; width:100%; }
.afterforum-photo{ width:690px; height:404px; border-radius:24px; object-fit:cover; }

/* goal/mission */
.goal-row{ display:flex; gap:30px; width:100%; }
.goal-card{ width:690px; height:252px; border-radius:24px; position:relative; overflow:hidden; display:flex; align-items:center; }
.goal-card.blue-grad{ background:linear-gradient(90deg,#595edb,#3f93e1); }
.goal-card.dark{ background:#212121; }
.goal-card img.shape{ position:absolute; top:0; height:252px; width:280px; object-fit:cover; }
.goal-card.blue-grad img.shape{ left:0; transform:rotate(180deg) scaleY(-1); }
.goal-card.dark img.shape{ left:410px; }
.goal-text{ position:relative; z-index:1; color:#fff; width:340px; display:flex; flex-direction:column; gap:8px; }
.goal-card.blue-grad .goal-text{ margin-left:310px; }
.goal-card.dark .goal-text{ margin-left:40px; text-align:right; }
.goal-text h3{ font-size:24px; font-weight:600; text-transform:uppercase; }
.goal-text p{ font-size:16px; font-weight:300; }

/* numbers */
.numbers-row{ display:flex; flex-wrap:wrap; gap:30px; width:100%; }
.number-item{ width:330px; display:flex; flex-direction:column; gap:4px; }
.number-item .num{ font-size:36px; font-weight:600; color:#3f92e1; }
.number-item .label{ font-size:16px; color:#595959; }

/* stories */
.stories-row{ display:flex; gap:30px; justify-content:center; width:100%; }
.story-card{ width:450px; display:flex; flex-direction:column; gap:24px; }
.story-card img{ width:450px; height:790px; border-radius:16px; object-fit:cover; }
.story-quote{ display:flex; flex-direction:column; gap:4px; }
.story-quote .ico{ width:32px; height:32px; }
.story-quote p{ font-size:22px; font-weight:500; }
.dots{ display:flex; gap:8px; }
.dot{ width:60px; height:6px; border-radius:90px; background:#cbdae2; }
.dot.active{ background:#3f92e1; }

/* speakers */
.speakers-row{ display:flex; gap:30px; width:100%; }
.speaker-card{ flex:1; display:flex; flex-direction:column; gap:20px; text-decoration:none; color:inherit; }
.speaker-card img{ width:100%; height:360px; border-radius:16px; object-fit:cover; }
.speaker-card h3{ font-size:24px; font-weight:500; }
.speaker-card .role{ font-size:16px; font-weight:600; color:#595959; }
.speaker-list{ display:flex; flex-direction:column; gap:8px; }
.speaker-list li{ display:flex; gap:8px; align-items:flex-start; font-size:16px; color:#595959; }
.speaker-list li::before{ content:''; width:8px; height:8px; border-radius:50%; background:#3f92e1; margin-top:8px; flex-shrink:0; }

/* translation banner */
.translate-banner{ position:relative; width:1410px; height:186px; border-radius:16px; overflow:hidden; border:1px solid #e4e4e4; background:#fff; box-shadow:0 0 4px rgba(0,0,0,.04),0 4px 8px rgba(0,0,0,.06); display:flex; align-items:center; }
.translate-banner img.bg{ position:absolute; left:0; top:0; height:100%; width:635px; object-fit:cover; }
.translate-banner::after{ content:''; position:absolute; left:300px; top:0; bottom:0; width:400px; background:linear-gradient(90deg, rgba(255,255,255,0), #fff 70%); }
.translate-banner p{ position:relative; z-index:1; margin-left:580px; width:771px; font-size:24px; font-style:italic; font-weight:600; }
.translate-banner p .blue{ color:#3f92e1; }
/* headphones sprite crop per Figma transform: img 256.15% x 216.45%, offset -135.04% / -101.21% */
.translate-photo-small{ position:absolute; left:-62px; top:-80px; width:166px; height:196px; overflow:hidden; z-index:3; }
.translate-photo-small img{ position:absolute; width:425px; height:424px; left:-224px; top:-198px; }
.translate-wrap{ position:relative; width:1410px; margin:0 auto; }

/* cost of not attending */
.cost-row{ display:flex; flex-wrap:wrap; gap:30px; width:100%; }
.cost-card{ flex:1; min-width:280px; display:flex; align-items:center; gap:20px; background:#fff; border:1px solid #e4e4e4; border-radius:24px; padding:20px 24px; box-shadow:0 0 4px rgba(0,0,0,.04),0 4px 8px rgba(0,0,0,.06); }
.cost-card .icon-circle{ width:64px; height:64px; }
.cost-card .icon-circle .ico{ width:42px; height:42px; }
.cost-card p{ font-size:22px; font-weight:500; }

/* pricing */
.pricing-row{ display:flex; gap:30px; justify-content:center; width:100%; align-items:stretch; }
.price-card{ width:450px; border-radius:16px; padding:30px; display:flex; flex-direction:column; justify-content:space-between; gap:50px; }
.price-card.startup{ background:#fff; border:1px solid #e4e4e4; }
.price-card.business{ background:linear-gradient(90deg,#595edb,#3f93e1); color:#fff; }
.price-card.vip{ background:#111; border:1px solid #e4e4e4; color:#fff; }
.price-top{ display:flex; flex-direction:column; gap:32px; }
.price-icon-row{ display:flex; justify-content:space-between; align-items:center; }
.price-icon{ width:80px; height:80px; border-radius:999px; background:#fff; border:1px solid #d7d7d7; display:flex; align-items:center; justify-content:center; }
.price-card.business .price-icon{ background:rgba(255,255,255,.2); border:none; }
.price-icon .ico{ width:50px; height:50px; }
.badge{ background:#fff; color:#3f92e1; padding:8px 12px; border-radius:90px; font-size:16px; font-weight:700; }
.price-name{ font-size:22px; font-style:italic; font-weight:600; }
.price-desc{ font-size:16px; color:#595959; }
.price-card.business .price-desc, .price-card.vip .price-desc{ color:#fff; }
.price-amount{ font-size:36px; font-weight:700; }
.price-divider{ height:1px; background:rgba(0,0,0,.1); width:100%; }
.price-card.business .price-divider, .price-card.vip .price-divider{ background:rgba(255,255,255,.2); }
.price-list{ display:flex; flex-direction:column; gap:12px; }
.price-list li{ display:flex; gap:12px; align-items:center; font-size:16px; color:#595959; }
.price-card.business .price-list li, .price-card.vip .price-list li{ color:#fff; }
.price-list li .ico{ width:20px; height:20px; flex-shrink:0; }
.price-card .btn{ width:100%; padding:24px 40px; }

/* partners / media */
.logos-row{ display:flex; flex-wrap:wrap; gap:60px; width:100%; align-items:flex-end; justify-content:center; }
.partner-item{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.partner-label{ font-size:16px; font-weight:600; text-transform:uppercase; color:#171717; letter-spacing:.02em; }
.logos-row img{ height:auto; object-fit:contain; flex:0 0 auto; }
.logos-row .partner-official{ width:480px; }
.logos-row .partner-organizer{ width:300px; }
.logos-row .partner-standard{ width:240px; }
.media-row{ display:flex; flex-wrap:wrap; gap:30px; width:100vw; margin-left:calc(50% - 50vw); align-items:center; justify-content:center; }
.media-row img{ height:60px; object-fit:contain; flex:0 0 auto; max-width:160px; }
.support-buttons{ display:flex; gap:8px; flex-wrap:wrap; }
.btn-sm.btn-wa{ background:#25d366; border-color:#25d366; }
.btn-sm.btn-wa:hover{ background:#1fb857; }

/* final CTA */
.cta-final{ position:relative; width:100%; min-width:1920px; height:600px; overflow:hidden; background:linear-gradient(90deg,#01063c,#010538); color:#fff; display:flex; align-items:center; }
.cta-final img.cta-bg{ position:absolute; right:0; top:-98%; height:226%; width:auto; }
.cta-final-content{ position:relative; z-index:2; width:810px; margin-left:calc(50% - 300px - 405px + 255px); display:flex; flex-direction:column; gap:32px; align-items:flex-start; }
.cta-final-content .btn{ padding:24px 50px; }
.cta-final-content h2{ font-size:50px; font-weight:600; }
.cta-final-content p{ font-size:16px; font-weight:300; width:690px; }

/* footer */
.footer{ background:#fff; padding:50px 0; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; width:100%; }
.footer-logo{ width:110px; height:56px; object-fit:contain; }
.footer-col{ display:flex; flex-direction:column; gap:20px; font-size:16px; font-weight:300; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{ width:40px; height:40px; border-radius:6px; background:linear-gradient(54deg,#595edb,#3f93e1); display:flex; align-items:center; justify-content:center; }
.footer-social .ico{ width:30px; height:30px; }
.footer-divider{ height:1px; background:#f0f0f0; width:100%; margin:60px 0 20px; }
.footer-bottom{ text-align:center; color:#8d8d8d; font-size:16px; font-weight:300; }

/* ---------- ANIMATIONS ---------- */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s; } .reveal.d2{ transition-delay:.2s; } .reveal.d3{ transition-delay:.3s; }

.btn{ transition:transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.btn:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(63,147,225,.35); filter:brightness(1.06); }
.btn:active{ transform:translateY(-1px); }
.btn-sm{ transition:background .25s ease, transform .25s ease; }
.btn-sm:hover{ background:rgba(255,255,255,.15); transform:translateY(-2px); }

.card, .cost-card, .price-card, .speaker-card img, .story-card img{
  transition:transform .35s ease, box-shadow .35s ease;
}
.card:hover, .cost-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.10); }
.price-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.14); }
.speaker-card img:hover, .story-card img:hover{ transform:scale(1.02); }
.footer-social a{ transition:transform .25s ease, filter .25s ease; }
.footer-social a:hover{ transform:translateY(-3px); filter:brightness(1.1); }
.nav a{ position:relative; transition:opacity .2s ease; }
.nav a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:linear-gradient(90deg,#595edb,#3f93e1); transition:width .3s ease;
}
.nav a:hover::after{ width:100%; }

@keyframes heroIn{ from{ opacity:0; transform:translate(-50%,40px);} to{ opacity:1; transform:translate(-50%,0);} }
.hero-content{ animation:heroIn .9s ease .15s both; }
.hero-bottom{ animation:heroIn .9s ease .4s both; }

/* ---------- CAROUSEL (seamless marquee) ---------- */
.carousel{ position:relative; overflow:hidden; width:100%; }
.carousel-track{ display:flex; gap:30px; will-change:transform; }
.carousel-track > *{ flex-shrink:0; }
.speakers-carousel .speaker-card{ flex:0 0 330px; width:330px; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(var(--marquee-distance,0px) * -1)); }
}
.carousel:hover .carousel-track{ animation-play-state:paused; }
.dots{ display:none; }

/* arrows (speakers carousel, RAF-driven) */
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.18);
  font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center;
  color:#001537;
}
.carousel-arrow.prev{ left:-8px; }
.carousel-arrow.next{ right:-8px; }
.carousel-arrow:hover{ background:#f0f4ff; }
@media (max-width:768px){ .carousel-arrow{ display:none; } }

/* ---------- MODAL ---------- */
.modal{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(1,6,40,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.modal.open{ opacity:1; pointer-events:auto; }
.modal-box{
  background:#fff; border-radius:24px; padding:40px; width:520px; max-width:calc(100vw - 40px);
  position:relative; transform:translateY(24px) scale(.97); transition:transform .3s ease;
  box-shadow:0 24px 64px rgba(0,0,0,.25);
}
.modal.open .modal-box{ transform:none; }
.modal-close{
  position:absolute; right:20px; top:20px; width:36px; height:36px; border:none; background:#f2f4f8;
  border-radius:50%; cursor:pointer; font-size:18px; line-height:1; color:#171717;
  transition:background .2s ease;
}
.modal-close:hover{ background:#e4e8f0; }
.modal-box h3{ font-size:26px; font-weight:600; text-transform:uppercase; margin-bottom:6px; }
.modal-box .modal-sub{ font-size:14px; color:#8d8d8d; margin-bottom:24px; }
.modal-box .modal-sub b{ color:#3f92e1; }
.form-fields{ display:flex; flex-direction:column; gap:14px; }
.form-fields input, .form-fields textarea{
  font-family:inherit; font-size:16px; padding:16px 18px; border:1px solid #e4e4e4; border-radius:12px;
  outline:none; transition:border-color .2s ease, box-shadow .2s ease; resize:vertical;
}
.form-fields input:focus, .form-fields textarea:focus{ border-color:#3f92e1; box-shadow:0 0 0 3px rgba(63,146,225,.15); }
.form-fields .btn{ width:100%; border:none; }
.form-consent{ font-size:12px; color:#8d8d8d; }
.form-consent a{ color:#3f92e1; text-decoration:underline; }
.form-done{ display:none; text-align:center; padding:30px 0; }
.form-done .big{ font-size:22px; font-weight:600; margin-bottom:8px; }
.hp-field{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

/* ---------- LEGAL PAGES ---------- */
.legal-page{ width:1000px; margin:0 auto; padding:60px 0 100px; }
.legal-page h1{ font-size:32px; font-weight:600; text-transform:uppercase; margin-bottom:30px; }
.legal-page .legal-text{ font-size:16px; line-height:1.7; color:#333; white-space:pre-line; }
.header.inner{ background:#000; }

/* ---------- INNER PAGES (program / team / faq / order / legal) ---------- */
/* black header everywhere except the hero page (index.php uses its own
   transparent-until-scrolled .header without .header-inner) */
.header-inner{ background:#000; box-shadow:0 6px 24px rgba(0,0,0,.35); }
.header-inner .nav a{ color:#fff; }
.header-inner .menu-toggle span{ background:#fff; }
.nav a.active{ color:#3f92e1 !important; font-weight:600; text-decoration:underline; }
.header.scrolled .nav a{ color:#fff; }
.header-inner .logo{ left:0; }
.inner{ padding-top:88px; }

.program-title{ position:relative; z-index:1; width:1410px; margin:0 auto; padding-top:80px; text-align:center; font-size:36px; font-weight:600; text-transform:uppercase; color:#171717; }
.program-title .blue{ color:#3f92e1; }
.program-city{ position:relative; z-index:1; text-align:center; margin-top:8px; font-size:18px; font-weight:600; color:#5a5a5a; }
.program-timeline{ position:relative; z-index:1; width:782px; margin:40px auto 0; display:flex; flex-direction:column; gap:60px; }
.pr-row{ display:flex; gap:40px; align-items:center; font-size:24px; }
.pr-time{ width:160px; flex-shrink:0; font-weight:600; color:#3f92e1; }
.pr-name{ flex:1; min-width:0; font-weight:400; color:#171717; }
.pr-block{ display:flex; flex-direction:column; gap:16px; }
.pr-block > .pr-time{ width:auto; font-weight:600; color:#3f92e1; font-size:24px; }
.pr-person{ display:flex; align-items:center; gap:16px; }
.pr-avatar{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.pr-avatar-fallback{ display:flex; align-items:center; justify-content:center; background:linear-gradient(90deg,#595edb,#3f93e1); color:#fff; font-weight:600; font-size:22px; text-transform:uppercase; }
.pr-person-info{ min-width:0; }
.pr-name{ font-weight:600; font-size:20px; color:#171717; }
.pr-role{ font-size:15px; font-weight:300; color:#5a5a5a; margin-top:2px; }
.pr-text{ min-width:0; display:flex; flex-direction:column; gap:16px; font-size:20px; font-weight:300; color:#171717; }
.pr-topic-title{ font-weight:600; font-size:22px; color:#171717; }
.pr-label{ font-style:italic; color:#2897ff; }
.pr-italic{ font-style:italic; }
.pr-text ul{ list-style:disc; padding-left:30px; }
.pr-text ul li{ display:flex; align-items:center; gap:8px; }
.pr-participant-avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.pr-people{ list-style:none; padding-left:0; display:flex; flex-direction:column; gap:10px; }
.program-cta{ padding-top:120px; }
.btn-wa-lg{ background:#25d366; }
.btn-wa-lg:hover{ box-shadow:0 10px 24px rgba(37,211,102,.35); }

/* city landing pages (shymkent/atyrau/almaty) */
.city-hero{ position:relative; width:100%; height:600px; border-radius:16px; overflow:hidden; }
.city-hero img{ width:100%; height:100%; object-fit:cover; }
/* city-hero-cover: pre-branded banner (logo/title/date/location baked in) — show at
   natural aspect ratio, no crop, so no baked-in text is cut off. */
.city-hero-cover{ height:auto; background:#01063c; }
.city-hero-cover-picture{ display:block; width:100%; }
.city-hero-cover img{ width:100%; height:auto; object-fit:unset; display:block; }
.city-hero-shade{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,21,55,.05) 0%, rgba(0,21,55,.15) 45%, rgba(0,10,30,.88) 100%); }
.city-hero-top{ position:absolute; z-index:1; left:40px; top:40px; display:flex; gap:24px; color:#fff; }
.city-hero-bottom{ position:absolute; z-index:1; left:40px; right:40px; bottom:40px; color:#fff; }
.city-hero-title{ margin:0; font-size:64px; font-weight:600; text-transform:uppercase; line-height:1.05; }
.city-hero-subtitle{ margin:12px 0 0; font-size:20px; font-weight:300; max-width:820px; }
.city-speakers-cta .h-title,
.city-support-cta .h-title{ margin-bottom:4px; }
.city-support-cta .support-buttons{ margin-bottom:8px; }
.city-btn{ color:#171717; border-color:#171717; }
.city-btn:hover{ background:rgba(23,23,23,.08); }

/* faq accordion */
.faq-list{ position:relative; z-index:1; width:1410px; margin:40px auto 120px; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:#fff; border:1px solid #e4e4e4; border-radius:16px; box-shadow:0 0 4px rgba(0,0,0,.04),0 4px 8px rgba(0,0,0,.06); overflow:hidden; transition:box-shadow .3s ease; }
.faq-item.open{ box-shadow:0 4px 20px rgba(63,146,225,.15); }
.faq-q{ width:100%; background:none; border:none; cursor:pointer; display:flex; gap:60px; align-items:center; padding:16px 16px 16px 40px; text-align:left; font-family:inherit; }
.faq-q > span:first-child{ flex:1; min-width:0; font-size:24px; font-weight:600; color:#171717; }
.faq-toggle{ flex-shrink:0; width:56px; height:56px; border-radius:12px; background:linear-gradient(90deg,#595edb,#3f93e1); display:flex; align-items:center; justify-content:center; transition:transform .3s ease; }
.faq-plus{ position:relative; width:30px; height:30px; display:block; }
.faq-plus::before, .faq-plus::after{ content:''; position:absolute; background:#fff; border-radius:2px; }
.faq-plus::before{ left:50%; top:3px; width:3px; height:24px; transform:translateX(-50%); }
.faq-plus::after{ top:50%; left:3px; height:3px; width:24px; transform:translateY(-50%); }
.faq-item.open .faq-toggle{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a p{ padding:0 40px 24px 40px; font-size:20px; font-weight:300; color:#171717; line-height:1.5; }

/* team grid */
.team-grid{ position:relative; z-index:1; width:1410px; margin:50px auto 120px; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.team-card{ display:flex; flex-direction:column; gap:20px; }
.team-photo{ width:100%; height:360px; border-radius:16px; object-fit:cover; object-position:top center; transition:transform .35s ease; }
.team-card:hover .team-photo{ transform:scale(1.02); }
.team-text{ display:flex; flex-direction:column; gap:8px; }
.team-name{ font-size:24px; font-weight:500; color:#171717; }
.team-role{ font-size:16px; font-weight:400; color:#595959; }

/* decorative background: real Figma line shapes + soft blue blobs.
   Coordinates from Figma page (y minus 1000px hero height). */
.page-bg{ position:relative; overflow:hidden; padding-bottom:120px; }
.page-bg > section{ position:relative; z-index:1; }
.desktop-decor-layer{
  position:absolute;
  left:50%;
  top:0;
  width:1920px;
  height:100%;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:0;
  overflow:visible;
}
.page-decor{ position:absolute; pointer-events:none; }
.page-decor.arc{ width:1345.464px; height:1345.981px; opacity:.1; }
.page-decor.arc.big{ width:1642.618px; height:1643.142px; }
.page-decor.glow{ width:1115px; height:1115px; }
/* decor anchored to a centered 1920px canvas so composition holds on wide screens */
.decor-anchor{ position:absolute; left:50%; transform:translateX(-50%); top:0; width:1920px; height:100%; pointer-events:none; z-index:0; }
.bg-decor{ position:absolute; pointer-events:none; z-index:0; }
.bg-decor.lines{ width:1345px; opacity:.35; }
/* blob export is composited on white; multiply makes white vanish on light bg */
.bg-decor.blob{ width:969px; height:1115px; mix-blend-mode:multiply; }

/* inner-page decor: real Figma concentric arcs (Lines 2) + soft blue glow (Ellipse 57) */
.bg-arcs{ position:absolute; width:1345px; opacity:.1; pointer-events:none; z-index:0; }
.bg-glow{ position:absolute; width:900px; height:900px; pointer-events:none; z-index:0; }

/* hero-only desktop decoration */
.sec-decor{ position:absolute; pointer-events:none; z-index:0; }
.sec-decor.arc{ width:1345px; height:1346px; opacity:.1; }
.sec-decor.arc.big{ width:1643px; height:1643px; }
.sec-decor.glow{ width:1115px; height:1115px; }
.mobile-decor{ display:none; position:absolute; pointer-events:none; z-index:0; }
.section > .section-inner{ position:relative; z-index:1; }
.section > .cities-grid{ position:relative; z-index:1; }

/* ---------- BURGER (mobile only) ---------- */
.menu-toggle{
  display:none; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; background:none; border:none; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; z-index:60; padding:0;
}
.menu-toggle span{ display:block; height:3px; width:26px; background:#fff; border-radius:2px; transition:transform .3s ease, opacity .2s ease, background .3s ease; }
.header.scrolled .menu-toggle span{ background:#fff; }
.header.menu-open .menu-toggle span{ background:#fff; }
.header.menu-open .menu-toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.header.menu-open .menu-toggle span:nth-child(2){ opacity:0; }
.header.menu-open .menu-toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   MOBILE  (<=768px)  — dedicated single-column layout per Figma node 28:2.
   JS disables the desktop zoom-to-fit below this width so these rules apply.
   ========================================================================== */
@media (max-width:768px){
  body{ min-width:0; }
  .container{ width:100%; padding:0 16px; }
  .menu-toggle{ display:flex; }

  /* ---- header + drawer ---- */
  .header{ height:80px; background:#000; }
  .header .logo{ left:50%; transform:translate(-50%,-50%); width:85px; height:44px; }
  .header-actions{ position:static; display:contents; }
  .header-actions .btn{ position:absolute; right:16px; top:50%; transform:translateY(-50%); padding:12px 16px; font-size:13px; border-radius:8px; }
  .header-actions .btn:hover{ transform:translateY(-50%); }
  .header-actions .lang-switch{ position:absolute; left:56px; top:50%; transform:translateY(-50%); padding:6px 14px; font-size:12px; }
  .nav{
    position:fixed; left:0; right:0; top:80px; transform:none;
    flex-direction:column; gap:0; padding:0; background:#000;
    max-height:0; overflow:hidden; transition:max-height .3s ease; white-space:normal;
  }
  .header.menu-open .nav{ max-height:calc(100vh - 80px); overflow-y:auto; padding:8px 0 24px; }
  .nav a{ color:#fff !important; width:100%; padding:14px 24px; font-size:16px; }
  .nav a::after{ display:none; }

  /* ---- hero ---- */
  .hero{ height:auto; min-width:0; display:flex; flex-direction:column; }
  .hero-bg{ height:100%; top:0; }
  .hero-bg-desktop{ display:none; }
  .hero-bg-mobile{ display:block; }
  .hero-v2 .hero-bg-desktop{ display:none; }
  .hero-v2 .hero-bg-mobile{ display:block; }
  /* kill the desktop heroIn keyframe (its translate(-50%) with fill-mode:both
     would otherwise shift the now-static mobile content off-screen left) */
  .hero-content, .hero-bottom{ animation:none !important; }
  .hero-content{ position:static; transform:none; left:auto; top:auto; width:100%; padding:100px 16px 24px; gap:24px; }
  .hero-info .hero-date{ font-size:12px; text-align:center; }
  .hero-title{ font-size:30px; }
  .hero-desc{ width:100%; font-size:13px; }
  .hero-buttons{ flex-direction:column; width:100%; gap:8px; }
  .hero-buttons .btn{ width:100%; padding:16px 24px; font-size:14px; }
  .hero-content-v2 .hero-buttons{ width:auto; }
  .hero-content-v2 .hero-buttons .btn{ width:auto; white-space:nowrap; }
  .hero-content.hero-content-v2{ left:50%; bottom:32px; }
  .hero-bottom{ position:static; transform:none; left:auto; top:auto; width:100%; padding:0 16px 32px; margin-top:8px; gap:24px; }

  /* index-v2: base rule above already handles this at every width (single static image,
     height:auto) — nothing mobile-specific needed here. */
  .hero-theme{ font-size:14px; }
  .hero-stats{ flex-wrap:wrap; gap:16px; }
  .hero-stat{ width:160px; }

  /* ---- generic sections ---- */
  .section{ padding:60px 0 0; }
  .section-inner{ width:100%; padding:0 16px; gap:24px; }
  h2.h-title{ font-size:24px; }
  .eyebrow{ font-size:16px; }
  .subtitle{ font-size:14px; }
  .quote-cta{ font-size:18px; }
  .btn{ padding:16px 24px; font-size:14px; }

  /* translation banner */
  .page-bg > section:first-of-type{ padding-top:60px !important; }
  .translate-wrap{ width:100%; padding:0 16px; }
  .translate-banner{ width:100%; height:auto; flex-direction:column; align-items:stretch; }
  .translate-banner img.bg{ position:static; width:100%; height:186px; }
  .translate-banner::after{ display:none; }
  .translate-banner p{ position:static; margin:0; width:100%; padding:16px; font-size:14px; }
  .translate-photo-small{ display:none; }

  /* problems / after-forum */
  .problems-body, .afterforum-body{ flex-direction:column; gap:24px; }
  .problem-grid{ width:100%; gap:8px; }
  .problem-row{ flex-direction:column; height:auto; gap:8px; }
  .card{ padding:16px; }
  .card p{ font-size:16px; }
  .icon-circle{ width:36px; height:36px; }
  .icon-circle .ico{ width:20px; height:20px; }
  .problem-photo, .afterforum-photo{ width:100%; height:210px; }

  /* cities */
  .cities-grid{ display:flex !important; flex-direction:column; grid-template-columns:none !important; grid-template-rows:none !important; gap:16px !important; }
  .cities-grid > div{ grid-row:auto !important; height:280px; }
  .cities-grid p[style]{ font-size:36px !important; }
  .cities-grid > div > div:last-child{ width:auto !important; left:16px !important; right:16px !important; }
  .support-buttons{ gap:8px; }
  .btn-sm{ padding:12px; font-size:12px; }

  /* goal / mission */
  .goal-row{ flex-direction:column; gap:16px; }
  .goal-card{ width:100%; height:auto; min-height:230px; }
  .goal-card .goal-text{ margin:0 !important; padding:24px; width:auto; text-align:left !important; }
  .goal-card img.shape{ display:none; }

  /* numbers 2-col */
  .numbers-row{ gap:16px; }
  .number-item{ width:calc(50% - 8px); }
  .number-item .num{ font-size:24px; }

  /* speakers carousel -> static wrapped grid on mobile (marquee off) */
  .speakers-carousel{ overflow:visible; }
  .speakers-carousel .carousel-track{ flex-wrap:wrap; animation:none !important; transform:none !important; }
  /* stories carousel stays a running marquee on mobile too */
  .stories-carousel{ overflow:hidden; }
  .stories-carousel .carousel-track{ flex-wrap:nowrap; }
  .stories-row{ gap:16px; }
  .story-card{ flex:0 0 260px; width:260px; }
  .story-card img{ width:100%; height:auto; aspect-ratio:358/630; }
  .story-quote p{ font-size:16px; }
  .speakers-row{ flex-wrap:wrap; gap:16px; }
  .speakers-carousel .speaker-card, .speaker-card{ flex:0 0 calc(50% - 8px); width:auto; }
  .speaker-card img{ height:200px; }
  .speaker-card h3{ font-size:16px; }
  .speaker-card .role{ font-size:12px; }
  .speaker-list li{ font-size:12px; }

  /* cost cards single col */
  .cost-row{ flex-direction:column; gap:8px; }
  .cost-card{ width:100%; min-width:0; padding:16px; }
  .cost-card p{ font-size:16px; }
  .cost-card .icon-circle{ width:36px; height:36px; }
  .cost-card .icon-circle .ico{ width:20px; height:20px; }

  /* pricing single col */
  .pricing-row{ flex-direction:column; gap:16px; }
  .price-card{ width:100%; padding:16px; }
  .price-amount{ font-size:28px; }

  /* partners / media */
  .logos-row{ flex-direction:column; gap:32px; align-items:center; }
  .logos-row img{ width:auto; height:auto; }
  .partner-label{ font-size:13px; }
  .logos-row .partner-official{ width:300px; }
  .logos-row .partner-organizer{ width:220px; }
  .logos-row .partner-standard{ width:200px; }
  .media-row{ width:100%; margin-left:0; gap:16px; }
  .media-row img{ flex:0 0 auto; width:140px; max-width:45%; height:45px; }

  /* final CTA */
  .cta-final{ min-width:0; height:auto; padding:60px 16px; }
  .cta-final img.cta-bg{ display:none; }
  .cta-final-content{ width:100%; margin:0; gap:24px; }
  .cta-final-content h2{ font-size:30px; }
  .cta-final-content p{ width:100%; font-size:14px; }
  .cta-final-content .btn{ width:100%; }

  /* footer */
  .footer-top{ flex-direction:column; align-items:center; gap:24px; text-align:center; }
  .footer-col{ align-items:center; gap:14px; }
  .footer-bottom{ font-size:14px; }

  /* modal */
  .modal-box{ padding:24px; }

  /* decor: shrink the fixed 1920 canvas so blobs don't force overflow */
  .decor-anchor{ width:100%; }
  .desktop-decor-layer, .bg-decor, .bg-arcs, .bg-glow, .sec-decor{ display:none; }
  .page-bg{ isolation:isolate; padding-bottom:60px; }
  .page-bg > section{ z-index:auto; }
  .page-bg > .section{ overflow:visible; }
  .mobile-decor{ display:block; z-index:-1; }
  .mobile-decor.line{ width:539px; height:539.207px; opacity:.1; }
  .mobile-decor.glow{ width:531px; height:531px; }

  /* ---- inner pages (program / team / faq) ---- */
  .inner{ padding-top:80px; }
  .program-title{ width:100%; padding:40px 16px 0; font-size:24px; }
  .program-timeline{ width:100%; padding:0 16px; gap:32px; margin-top:24px; }
  .pr-row{ gap:12px; font-size:16px; align-items:flex-start; }
  .pr-time{ width:auto; min-width:96px; }
  .pr-block > .pr-time{ font-size:16px; }
  .pr-person{ gap:12px; }
  .pr-avatar{ width:48px; height:48px; }
  .pr-avatar-fallback{ font-size:16px; }
  .pr-name{ font-size:16px; }
  .pr-role{ font-size:13px; }
  .pr-text{ font-size:14px; gap:8px; }
  .pr-topic-title{ font-size:16px; }
  .program-cta{ padding-top:60px; }
  .btn-wa-lg{ width:100%; white-space:normal; padding:20px 24px; text-align:center; }

  /* ---- city landing pages ---- */
  .city-hero-section .section-inner[style]{ width:100% !important; padding:0 16px !important; }
  .section .section-inner[style]{ width:100% !important; padding:0 16px; }
  .city-hero{ height:420px; border-radius:12px; }
  .city-hero-top{ left:20px; top:20px; gap:12px; }
  .city-hero-bottom{ left:20px; right:20px; bottom:24px; }
  .city-hero-title{ font-size:34px; }
  .city-hero-subtitle{ font-size:15px; margin-top:8px; }
  .city-hero.city-hero-cover{ height:auto; }
  .city-hero-cover .city-hero-cover-desktop{ display:none; }
  .city-hero-cover .city-hero-cover-mobile{ display:block; }

  .faq-list{ width:100%; padding:0 16px; margin-top:24px; }
  .faq-q{ gap:16px; padding:16px; }
  .faq-q > span:first-child{ font-size:16px; }
  .faq-toggle{ width:40px; height:40px; border-radius:10px; }
  .faq-plus{ width:22px; height:22px; }
  .faq-plus::before{ top:2px; height:18px; }
  .faq-plus::after{ left:2px; width:18px; }
  .faq-a p{ padding:0 16px 16px; font-size:14px; }

  .team-grid{ width:100%; padding:0 16px; margin:24px 0 60px; grid-template-columns:1fr 1fr; gap:16px; }
  .team-photo{ height:200px; }
  .team-name{ font-size:16px; }
  .team-role{ font-size:12px; }

  .legal-page{ width:100%; padding:24px 16px 60px; }
  .legal-page h1{ font-size:22px; }
}