/* SQAZLY MUSIC - production CSS */
:root{
  --bg:#030607;
  --bg-2:#071115;
  --panel:rgba(20,40,46,.58);
  --panel-strong:rgba(24,48,55,.72);
  --panel-dim:rgba(11,23,26,.52);
  --border:rgba(8,184,232,.24);
  --border-soft:rgba(8,184,232,.12);
  --accent-cyan:#08B8E8;
  --cyan:#08b8e8;
  --cyan-2:#12d3ff;
  --text:#f4fbfd;
  --muted:rgba(244,251,253,.72);
  --muted-2:rgba(244,251,253,.52);
  --shadow:0 24px 80px rgba(0,0,0,.38);
  --radius:18px;
  /* Proportional scale from 1440 design (unitless 0..1). Requires length/length division. */
  --s:min(1, 100vw / 1440px);
  --space:clamp(24px, 5.556vw, 80px);
  --space-md:clamp(20px, 2.778vw, 40px);
  --space-sm:clamp(16px, 1.667vw, 24px);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* JS owns smooth anchors. overflow-x on html (not body) keeps html as scroll root. */
  scroll-behavior:auto;
  overflow-x:clip;
  overflow-y:scroll;
}

.section[id],
.footer[id]{
  scroll-margin-top:24px;
}

body{
  margin:0;
  font-family:"Geologica", sans-serif;
  background:
    radial-gradient(circle at 50% 0, rgba(8,184,232,.12), transparent 26%),
    linear-gradient(180deg, #020405 0%, #030607 100%);
  color:var(--text);
  /* Do NOT set overflow-x here — it makes body the scroll container and kills smooth scroll */
  line-height:1.4;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
}

button{
  font:inherit;
}

h1,
h2,
h3,
h4,
dt{
  font-family:"Geologica", sans-serif;
  margin:0;
}

p,
dl,
dd,
ul{
  margin:0;
}

ul{
  padding:0;
  list-style:none;
}

.page{
  width:100%;
  overflow-x:clip;
}

.container{
  width:min(1440px, 100%);
  margin:0 auto;
  padding:0 var(--space);
}

.section{
  position:relative;
  width:100%;
  overflow:hidden;
}

.section.cases{
  overflow:visible;
}

.panel{
  position:relative;
  border:1px solid var(--border);
  background:var(--panel);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.panel::before{
  content:"";
  position:absolute;
  inset:auto auto auto auto;
  width:220px;
  height:120px;
  left:0;
  top:0;
  border-radius:999px;
  background:rgba(8,184,232,.12);
  filter:blur(40px);
  pointer-events:none;
}

.section-head{
  position:relative;
  z-index:1;
  margin-bottom:28px;
}

.section-head--platforms{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:8px;
}

.section-head--platforms .section-head__copy{
  max-width:760px;
}

.section-head--platforms .section-head__copy p{
  max-width:620px;
}

.section-head h2{
  font-size:calc(40px * var(--s));
  line-height:calc(44px * var(--s));
  font-weight:700;
  letter-spacing:-0.02em;
  color:#fff;
}

.section-head p{
  margin-top:10px;
  max-width:760px;
  font-size:16px;
  line-height:20px;
  color:var(--muted);
}

.section-head strong{
  color:#fff;
  font-weight:700;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:14px;
  border:1px solid transparent;
  font-family:"Geologica", sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
  cursor:pointer;
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
  text-align:center;
}

.button:hover{
  transform:translateY(-1px);
}

.button--primary{
  background:var(--cyan);
  color:#fff;
  box-shadow:0 10px 30px rgba(8,184,232,.24);
}

.button--primary:hover{
  background:#19c6f4;
}

.button--outline{
  border-color:rgba(8,184,232,.9);
  background:rgba(8,184,232,.02);
  color:#d9fbff;
}

.button--outline:hover{
  background:rgba(8,184,232,.08);
}

.button--ghost{
  display:inline-flex;
  width:auto;
  min-width:0;
  height:calc(56px * var(--s));
  padding:0 calc(24px * var(--s));
  flex:0 0 auto;
  justify-content:center;
  align-items:center;
  gap:10px;
  border-radius:calc(16px * var(--s));
  border:2px solid var(--accent-cyan, #08B8E8);
  background:rgba(255,255,255,.01);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--accent-cyan, #08B8E8);
  text-align:center;
  font-family:"Geologica", sans-serif;
  font-size:calc(16px * var(--s));
  font-style:normal;
  font-weight:700;
  line-height:1.1;
}

.button__icon{
  width:max(20px, calc(22px * var(--s)));
  height:max(20px, calc(22px * var(--s)));
  flex-shrink:0;
  display:block;
  overflow:visible;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));
}

.button--ghost .button__icon{
  width:max(20px, calc(22px * var(--s)));
  height:max(20px, calc(22px * var(--s)));
}

.button--lg{
  height:50px;
  padding:0 22px;
  font-size:15px;
}

.button--sm{
  height:36px;
  padding:0 16px;
  font-size:12px;
  border-radius:12px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand__mark{
  width:74.331px;
  height:32px;
  display:block;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:hidden;
  flex:0 0 auto;
}

.brand__mark svg{
  display:block;
  width:100%;
  height:100%;
}

.brand__name{
  font-family:"Geologica", sans-serif;
  font-size:calc(26px * var(--s));
  font-weight:600;
  line-height:calc(30px * var(--s));
  letter-spacing:-0.03em;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brand--footer .brand__mark{
  width:56px;
  height:24px;
}

.brand--footer .brand__name{
  font-size:18px;
}

.hero{
  padding:0;
  min-height:calc(820px * var(--s));
  width:100%;
  position:relative;
  overflow:visible;
  z-index:1;
  background:
    radial-gradient(circle at 78% 10%, rgba(8,184,232,.10), transparent 22%),
    radial-gradient(circle at 18% 14%, rgba(8,184,232,.10), transparent 16%),
    linear-gradient(180deg, #05090a 0%, #030607 100%);
}

.hero .container{
  width:min(1440px, 100%);
  min-height:calc(820px * var(--s));
  padding:calc(48px * var(--s)) 0 calc(180px * var(--s));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(64px * var(--s));
  box-sizing:border-box;
  position:relative;
  overflow:visible;
}

.topbar{
  position:relative;
  z-index:5;
  min-height:calc(84px * var(--s));
  height:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(16px * var(--s));
  padding:calc(14px * var(--s)) calc(32px * var(--s));
  border-radius:calc(16px * var(--s));
  background:rgba(11,23,26,.33);
  border-color:rgba(255,255,255,.08);
  width:100%;
  margin:0;
  flex-wrap:nowrap;
  box-sizing:border-box;
}

.topbar .brand{
  flex:0 1 auto;
  min-width:0;
}

.topbar .button--ghost{
  flex:0 0 auto;
}

.topbar__nav{
  display:flex;
  align-items:center;
  gap:calc(28px * var(--s));
  justify-content:center;
  flex:1 1 auto;
  font-family:"Open Sans", sans-serif;
  font-size:calc(12px * var(--s));
  font-style:normal;
  font-weight:700;
  line-height:calc(18px * var(--s));
  color:var(--accent-cyan, #08B8E8);
  text-align:center;
  font-feature-settings:"liga" off, "clig" off;
}

.topbar__nav a{
  transition:color .18s ease;
}

.topbar__nav a:hover{
  color:#10c8f4;
}

.hero__layout{
  position:relative;
  width:100%;
  display:block;
  margin-top:0;
  padding-inline:var(--space);
  box-sizing:border-box;
  min-height:calc(560px * var(--s));
  isolation:isolate;
}

.hero__copy{
  position:relative;
  z-index:3;
  max-width:min(570px, 42vw);
  width:100%;
}

.hero h1{
  font-size:calc(48px * var(--s));
  line-height:calc(56px * var(--s));
  letter-spacing:0;
  max-width:100%;
}

.hero__copy p{
  margin-top:calc(18px * var(--s));
  max-width:100%;
  font-family:"Golos Text", sans-serif;
  font-size:calc(16px * var(--s));
  line-height:calc(20px * var(--s));
  color:rgba(244,251,253,.84);
}

.hero__copy strong{
  color:#fff;
}

.stats{
  display:flex;
  gap:calc(36px * var(--s));
  flex-wrap:wrap;
  margin-top:calc(48px * var(--s));
}

.stats__item{
  min-width:0;
  flex:0 1 auto;
}

.stats__item dt{
  font-size:calc(28px * var(--s));
  line-height:1;
  font-weight:600;
  color:#fff;
}

.stats__item dd{
  margin-top:calc(6px * var(--s));
  font-family:"Geologica", sans-serif;
  font-size:calc(13px * var(--s));
  line-height:calc(16px * var(--s));
  color:var(--muted-2);
  white-space:nowrap;
}

.hero__actions{
  display:flex;
  gap:calc(12px * var(--s));
  flex-wrap:wrap;
  align-items:stretch;
  margin-top:calc(48px * var(--s));
  width:100%;
  max-width:calc(570px * var(--s));
}

.hero__actions .button--primary,
.hero__actions .button--outline{
  width:auto;
  flex:1 1 auto;
  min-width:min(100%, 200px);
  max-width:100%;
  height:50px;
  padding:0 18px;
  font-size:clamp(13px, calc(15px * var(--s)), 15px);
}

.hero__note{
  margin-top:calc(10px * var(--s));
  font-size:calc(14px * var(--s));
  line-height:calc(16px * var(--s));
  color:rgba(244,251,253,.48);
}

/*
  Hero visual frame — anchored to right of hero__layout.
  All offsets use --s so crop stays proportional 900–1440.
*/
.hero__visual{
  position:absolute;
  left:calc(480px * var(--s));
  right:calc(-420px * var(--s));
  top:calc(-240px * var(--s));
  height:calc(1220px * var(--s));
  width:auto;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
  mask-image:linear-gradient(
    180deg,
    #000 0%,
    #000 58%,
    rgba(0,0,0,.72) 72%,
    rgba(0,0,0,.28) 86%,
    transparent 100%
  );
  -webkit-mask-image:linear-gradient(
    180deg,
    #000 0%,
    #000 58%,
    rgba(0,0,0,.72) 72%,
    rgba(0,0,0,.28) 86%,
    transparent 100%
  );
}

/* Column strips → staggered → rotated = diagonal artists grid */
.hero__scene{
  --col-w:calc(230px * var(--s));
  --col-gap:calc(18px * var(--s));
  --col-stagger:calc(160px * var(--s));
  position:absolute;
  left:calc(58% + 80px * var(--s));
  top:calc(60% + 16px * var(--s));
  display:flex;
  align-items:flex-start;
  gap:var(--col-gap);
  width:max-content;
  transform:translate(-50%, -50%) rotate(-17deg);
  transform-origin:center center;
  filter:drop-shadow(0 32px 80px rgba(0,0,0,.45));
  will-change:transform;
}

.hero__col{
  display:block;
  width:var(--col-w);
  height:auto;
  flex:0 0 auto;
  max-width:none;
  border-radius:calc(16px * var(--s));
}

.hero__col:nth-child(1){ transform:translateY(0); }
.hero__col:nth-child(2){ transform:translateY(var(--col-stagger)); }
.hero__col:nth-child(3){ transform:translateY(0); }
.hero__col:nth-child(4){ transform:translateY(var(--col-stagger)); }

.platforms{
  position:relative;
  z-index:4;
  isolation:isolate;
  width:100%;
  margin-top:calc(-140px * var(--s));
  padding:calc(56px * var(--s)) 0 calc(92px * var(--s));
  overflow:visible;
  background:
    radial-gradient(circle at 50% 0, rgba(8,184,232,.14), transparent 34%),
    linear-gradient(180deg, rgba(3,6,7,.0) 0%, rgba(3,6,7,.55) 18%, rgba(3,6,7,.92) 42%, #030607 100%);
}

.platforms::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-160px;
  height:280px;
  background:linear-gradient(
    180deg,
    rgba(3,6,7,0) 0%,
    rgba(3,6,7,.35) 35%,
    rgba(3,6,7,.78) 70%,
    rgba(3,6,7,.96) 100%
  );
  pointer-events:none;
  z-index:0;
}

.platforms .container{
  position:relative;
  z-index:1;
}

.platform-marquee{
  margin-top:16px;
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.platform-marquee__track{
  display:flex;
  width:max-content;
  gap:14px;
  will-change:transform;
  animation:platform-marquee-scroll 34s linear infinite;
}

.platform-grid{
  display:flex;
  gap:14px;
  align-items:stretch;
  flex:0 0 auto;
  width:max-content;
}

.platform-grid::-webkit-scrollbar{
  display:none;
}

.platform-card{
  flex:0 0 auto;
  height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  border-radius:16px;
  background:rgba(20,40,46,.62);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow);
}

.platform-logo{
  display:block;
  width:auto;
  height:auto;
  max-width:none;
  flex:0 0 auto;
}

.platform-card--yandex .platform-logo{
  height:17.02px;
}

.platform-card--apple .platform-logo{
  height:29.837px;
}

.platform-card--tiktok .platform-logo{
  height:40.21px;
}

.platform-card--soundcloud .platform-logo{
  height:57px;
}

.platform-card--youtube .platform-logo{
  height:27.15px;
}

.platform-card--spotify .platform-logo{
  height:41.474px;
}

.platform-card--deezer .platform-logo{
  height:33.75px;
}

.platform-card--spotify{
  padding-inline:18px;
}

.platform-card--deezer{
  padding-inline:18px;
}

@media (prefers-reduced-motion: reduce){
  .platform-marquee__track{
    animation:none;
    transform:none;
  }
}

@keyframes platform-marquee-scroll{
  from{
    transform:translate3d(0, 0, 0);
  }

  to{
    transform:translate3d(calc(-50% - 7px), 0, 0);
  }
}

@keyframes cases-marquee-scroll{
  from{
    transform:translate3d(0, 0, 0);
  }

  to{
    transform:translate3d(calc(-50% - 10px), 0, 0);
  }
}

.compare{
  width:100%;
  padding:calc(64px * var(--s)) 0 calc(96px * var(--s));
  background:
    radial-gradient(circle at 50% 44%, rgba(8,184,232,.16), transparent 28%),
    linear-gradient(180deg, rgba(3,6,7,.18), rgba(3,6,7,.22));
}

.compare__layout{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  align-items:center;
}

.compare-card{
  width:calc(478px * var(--s));
  min-height:calc(320px * var(--s));
  padding:calc(38px * var(--s)) calc(34px * var(--s)) calc(32px * var(--s));
  border-radius:18px;
}

.compare-card--muted{
  background:rgba(14,29,33,.50);
  border-color:rgba(8,184,232,.08);
}

.compare-card--bright{
  background:rgba(28,51,58,.52);
}

.compare-card h3{
  font-size:calc(30px * var(--s));
  line-height:1.1;
  font-weight:600;
  letter-spacing:-0.02em;
}

.compare-card--bright h3{
  color:var(--cyan);
}

.feature-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
  font-size:16px;
  line-height:20px;
}

.feature-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.feature-list--muted li{
  color:#95a5aa;
}

.feature-list--bright li{
  color:#fff;
}

.compare-icon{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  margin-top:0;
}

.compare-icon svg{
  display:block;
  width:24px;
  height:24px;
}

.compare-icon--x{
  color:#046580;
}

.compare-icon--check{
  color:#08b8e8;
}

.compare__figure{
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:calc(520px * var(--s));
  pointer-events:none;
}

.compare__figure img{
  width:calc(520px * var(--s));
  height:auto;
  opacity:.86;
}

.process{
  width:100%;
  padding:calc(64px * var(--s)) 0 calc(96px * var(--s));
  background:
    radial-gradient(circle at 50% 0, rgba(8,184,232,.16), transparent 24%),
    linear-gradient(180deg, rgba(3,6,7,.16), rgba(3,6,7,.22));
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.process-card{
  position:relative;
  min-height:192px;
  padding:24px 22px 22px 44px;
  border-radius:18px;
}

.process-card__step{
  position:absolute;
  inset:0 auto 0 0;
  width:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:"Geologica", sans-serif;
  font-size:10px;
  font-weight:500;
  letter-spacing:.18em;
  color:rgba(244,251,253,.24);
  border-right:1px solid rgba(8,184,232,.18);
}

.process-card__head{
  display:flex;
  align-items:center;
  gap:12px;
}

.process-card__icon{
  width:30px;
  height:30px;
  display:block;
  flex:0 0 30px;
  border-radius:0;
  background:none;
  color:inherit;
}

.process-card__icon svg{
  display:block;
  width:100%;
  height:100%;
}

.process-card h3{
  font-size:clamp(20px, calc(28px * var(--s)), 28px);
  line-height:1.2;
  font-weight:600;
}

.process-card p{
  margin-top:16px;
  font-size:14px;
  line-height:1.45;
  color:rgba(244,251,253,.76);
}

.process-card--action{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
}

.cases{
  width:100%;
  padding:calc(78px * var(--s)) 0 calc(98px * var(--s));
  background:
    radial-gradient(circle at 36% 22%, rgba(8,184,232,.12), transparent 26%),
    linear-gradient(180deg, rgba(3,6,7,.18), rgba(3,6,7,.24));
  overflow:visible;
}

.cases .container{
  overflow:visible;
}

.cases-marquee{
  overflow:visible;
  padding:40px 0;
  margin:-40px 0;
  mask-image:none;
  -webkit-mask-image:none;
}

.cases-marquee__track{
  display:flex;
  width:max-content;
  gap:20px;
  will-change:transform;
  animation:cases-marquee-scroll 38s linear infinite;
  padding:0 8px;
  overflow:visible;
}

.cases-marquee:hover .cases-marquee__track{
  animation-play-state:paused;
}

.cases-rail{
  display:flex;
  gap:20px;
  align-items:flex-end;
  flex:0 0 auto;
  width:max-content;
  overflow:visible;
}

.case-tile{
  position:relative;
  flex:0 0 auto;
  width:calc(212px * var(--s));
  height:calc(280px * var(--s));
  border-radius:16px;
  overflow:hidden;
  background:#101b1f;
  box-shadow:var(--shadow);
  transform:translateZ(0);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  will-change:transform;
  isolation:isolate;
}

.case-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.case-tile--featured{
  width:calc(212px * var(--s));
  height:calc(280px * var(--s));
  background:rgba(20,40,46,.58);
  border:1px solid rgba(8,184,232,.34);
  padding:0;
}

.case-tile:hover{
  transform:translateZ(0) scale(1.08);
  box-shadow:0 28px 80px rgba(0,0,0,.44);
  z-index:5;
}

.case-tile__badge{
  position:absolute;
  left:16px;
  bottom:54px;
  padding:7px 14px;
  border-radius:10px;
  background:var(--cyan);
  color:#fff;
  font-family:"Geologica", sans-serif;
  font-size:12px;
  font-weight:600;
}

.case-tile__meta{
  position:absolute;
  left:16px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.case-tile__meta strong{
  font-family:"Geologica", sans-serif;
  font-size:18px;
  font-weight:400;
  letter-spacing:-0.02em;
}

.case-tile__meta span{
  font-family:"Geologica", sans-serif;
  font-size:11px;
  color:#a6b5b8;
}

.community{
  width:100%;
  padding:calc(96px * var(--s)) 0 calc(84px * var(--s));
  background:
    radial-gradient(circle at 16% 16%, rgba(8,184,232,.10), transparent 24%),
    linear-gradient(180deg, rgba(3,6,7,.18), rgba(3,6,7,.22));
}

.community-layout{
  display:grid;
  grid-template-columns:calc(383px * var(--s)) minmax(0, 1fr);
  gap:calc(28px * var(--s));
  align-items:start;
}

.community-left{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.feedback-card{
  min-height:188px;
  padding:24px 22px 22px;
  border-radius:18px;
}

.feedback-card h3{
  font-size:18px;
  line-height:1.2;
}

.feedback-card__list{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:14px;
  line-height:1.4;
  color:#aab8bb;
}

.feedback-card__list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.feedback-card__icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:block;
}

.feedback-card__icon svg{
  display:block;
  width:24px;
  height:24px;
}

.community-stats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.mini-stat{
  min-height:98px;
  padding:18px 16px;
  border-radius:16px;
}

.mini-stat strong{
  display:block;
  font-family:"Geologica", sans-serif;
  font-size:clamp(22px, calc(30px * var(--s)), 30px);
  line-height:1;
  font-weight:600;
}

.mini-stat span{
  display:block;
  margin-top:6px;
  font-size:12px;
  line-height:1.35;
  color:var(--muted-2);
}

.community-right{
  min-width:0;
}

.community-right__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.community-right__head h3{
  font-size:clamp(20px, calc(30px * var(--s)), 30px);
  line-height:1.2;
  color:#fff;
}

.round-controls{
  display:flex;
  gap:8px;
}

.round-controls__btn{
  width:40px;
  height:40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--cyan);
  border:1px solid rgba(8,184,232,.8);
  background:rgba(8,184,232,.04);
  font-size:18px;
  cursor:pointer;
  padding:0;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}

.round-controls__btn:hover{
  background:rgba(8,184,232,.12);
  border-color:var(--cyan);
}

.round-controls__btn:disabled{
  opacity:.35;
  cursor:default;
}

.review-row{
  display:flex;
  gap:18px;
  margin-top:16px;
  overflow-x:auto;
  padding-bottom:0;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.review-row::-webkit-scrollbar{
  display:none;
  height:0;
  width:0;
}

.review-card{
  flex:0 0 320px;
  width:320px;
  min-width:320px;
  max-width:320px;
  min-height:240px;
  padding:20px 20px 18px;
  border-radius:18px;
  box-sizing:border-box;
}

.review-card__head{
  display:flex;
  align-items:center;
  gap:10px;
}

.review-card__head img{
  width:40px;
  height:40px;
  border-radius:50%;
  flex:0 0 40px;
}

.review-card__head strong{
  display:block;
  font-family:"Golos Text", sans-serif;
  font-size:14px;
  line-height:1.2;
  font-weight:700;
  color:var(--cyan);
}

.review-card__head span{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:rgba(244,251,253,.66);
}

.review-card p{
  margin-top:14px;
  font-size:14px;
  line-height:1.45;
  color:#fff;
}

.review-card a{
  display:inline-flex;
  margin-top:16px;
  font-size:14px;
  font-weight:600;
  color:var(--cyan);
}

.faq{
  width:100%;
  padding:calc(96px * var(--s)) 0;
  min-height:0;
  background:
    radial-gradient(circle at 50% 0, rgba(8,184,232,.10), transparent 26%),
    linear-gradient(180deg, rgba(3,6,7,.18), rgba(3,6,7,.24));
}

.faq .section-head{
  margin-bottom:calc(48px * var(--s));
}

.faq-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) calc(604px * var(--s));
  gap:calc(24px * var(--s)) calc(36px * var(--s));
  align-items:start;
}

.faq-list,
.faq-side__list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.faq-item{
  border-radius:16px;
  padding:0;
  background:rgba(28,52,58,.64);
  border:1px solid rgba(8,184,232,.26);
}

.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:18px 52px 18px 18px;
  font-family:"Geologica", sans-serif;
  font-size:clamp(16px, calc(20px * var(--s)), 20px);
  line-height:1.3;
  font-weight:600;
  color:#fff;
  position:relative;
}

.faq-item summary::-webkit-details-marker{
  display:none;
}

.faq-item__summary-text{
  display:block;
  padding-right:2px;
}

.faq-item__icon{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  transition:opacity .18s ease, transform .18s ease;
}

.faq-item__icon svg{
  display:block;
  width:24px;
  height:24px;
}

.faq-item__icon--minus{
  opacity:0;
}

.faq-item[open] .faq-item__icon--plus{
  opacity:0;
}

.faq-item[open] .faq-item__icon--minus{
  opacity:1;
}

.faq-item__body{
  padding:0 18px 16px;
}

.faq-item__body p{
  max-width:100%;
  font-family:"Golos Text", sans-serif;
  font-size:15px;
  line-height:1.45;
  color:rgba(244,251,253,.72);
}

.faq-side{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.faq-cta{
  position:relative;
  overflow:hidden;
  min-height:calc(266px * var(--s));
  padding:calc(28px * var(--s)) calc(28px * var(--s)) calc(24px * var(--s)) calc(32px * var(--s));
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(10px * var(--s));
  background:rgba(28,52,58,.64);
  border:1px solid rgba(8,184,232,.26);
}

.faq-cta h3{
  font-size:calc(40px * var(--s));
  line-height:calc(44px * var(--s));
  max-width:calc(280px * var(--s));
}

.faq-cta p{
  font-family:"Golos Text", sans-serif;
  font-size:16px;
  line-height:20px;
  color:rgba(244,251,253,.72);
  max-width:251px;
}

.faq-cta .button{
  min-width:0;
  width:auto;
  max-width:100%;
  height:50px;
  padding:0 22px;
  margin-top:calc(6px * var(--s));
  font-size:15px;
  position:relative;
  z-index:1;
}

.faq-cta__vk{
  position:absolute;
  right:calc(22px * var(--s));
  bottom:0;
  width:calc(228px * var(--s));
  height:calc(192px * var(--s));
  background:url("images/Image_216x189.webp") right bottom / contain no-repeat;
  font-size:0;
  pointer-events:none;
}

.cta{
  width:100%;
  padding:calc(62px * var(--s)) 0;
  background:
    radial-gradient(circle at 18% 0, rgba(8,184,232,.12), transparent 24%),
    linear-gradient(180deg, rgba(3,6,7,.14), rgba(3,6,7,.18));
}

.cta-layout{
  display:grid;
  grid-template-columns:minmax(0, calc(1048px * var(--s))) calc(225px * var(--s));
  gap:calc(42px * var(--s));
  align-items:stretch;
}

.cta-card{
  min-height:calc(272px * var(--s));
  padding:calc(36px * var(--s)) calc(34px * var(--s)) calc(28px * var(--s)) calc(36px * var(--s));
  border-radius:18px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) calc(304px * var(--s));
  gap:calc(20px * var(--s));
  align-items:start;
}

.cta-card__copy{
  min-width:0;
  align-self:start;
  padding-top:calc(4px * var(--s));
}

.cta-card h2{
  max-width:calc(540px * var(--s));
  font-size:calc(38px * var(--s));
  line-height:calc(44px * var(--s));
  letter-spacing:-0.03em;
}

.cta-card__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  margin-top:24px;
  width:100%;
  max-width:calc(360px * var(--s));
}

.cta-card__actions .button--primary,
.cta-card__actions .button--outline{
  flex:none;
  min-width:0;
  height:50px;
  padding:0 18px;
}

.cta-card__actions .button--primary{
  width:100%;
  max-width:100%;
}

.cta-card__actions .button--outline{
  width:80%;
  max-width:80%;
}

.cta-card__copy p{
  margin-top:10px;
  font-size:calc(14px * var(--s));
  line-height:calc(16px * var(--s));
  color:rgba(244,251,253,.56);
}

.cta-card__image{
  width:calc(304px * var(--s));
  height:calc(389px * var(--s));
  justify-self:end;
  align-self:end;
  margin-bottom:calc(-93px * var(--s));
  object-fit:contain;
}

.cta-steps{
  display:flex;
  flex-direction:column;
  gap:18px;
  justify-content:center;
  padding-top:0;
}

.cta-step span{
  display:block;
  font-family:"Geologica", sans-serif;
  font-size:calc(28px * var(--s));
  line-height:1;
  font-weight:600;
  color:#98a9ae;
}

.cta-step p{
  margin-top:6px;
  font-family:"Geologica", sans-serif;
  font-size:calc(12px * var(--s));
  line-height:calc(16px * var(--s));
  color:var(--muted-2);
}

.footer{
  width:100%;
  padding:calc(22px * var(--s)) 0 calc(120px * var(--s));
  background:
    radial-gradient(circle at 50% 100%, rgba(8,184,232,.12), transparent 28%),
    linear-gradient(180deg, rgba(3,6,7,.06), rgba(3,6,7,.08));
}

.footer__line{
  height:2px;
  margin-bottom:34px;
  background:linear-gradient(90deg, transparent, rgba(8,184,232,.34), transparent);
}

.footer__grid{
  display:grid;
  grid-template-columns:minmax(180px, 220px) 1fr 1fr 1fr 1fr;
  gap:34px;
  align-items:start;
}

.footer__brand-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  min-width:0;
}

.footer__brand-block .brand--footer{
  margin-bottom:18px;
}

.footer__col h3{
  margin-bottom:10px;
  font-size:20px;
  line-height:1.2;
  color:#aab8bb;
}

.footer__col ul{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.footer__col a{
  color:var(--cyan);
  font-family:"Geologica", sans-serif;
  font-weight:700;
  font-size:12px;
  line-height:1.4;
}

.footer__email{
  margin-top:12px;
  font-family:"Geologica", sans-serif;
  font-size:12px;
  font-weight:700;
  color:var(--cyan);
}

.footer__support{
  margin-top:0;
  font-size:10px;
  color:#aab8bb;
}

.footer__support-links{
  display:flex;
  gap:8px;
  margin-top:4px;
}

.footer__support-links a{
  color:var(--cyan);
  font-family:"Geologica", sans-serif;
  font-size:12px;
  font-weight:700;
}

.footer__copy{
  margin-top:14px;
  font-size:10px;
  color:#93a4a8;
}


/* ============================================================
   Responsive reflow — aligned with Figma breakpoints
   (1440 base / 1280 / 768 tablet / 360 mobile)
   ============================================================ */

/* ----- 1280 design: 1025–1439 ----- */
@media (max-width: 1439px){
  .hero__copy{
    max-width:min(560px, 46vw);
  }

  .hero__visual{
    left:calc(440px * var(--s));
    right:calc(-380px * var(--s));
    top:calc(-220px * var(--s));
    height:calc(1150px * var(--s));
  }

  .hero__scene{
    --col-w:calc(215px * var(--s));
    left:calc(60% + 56px * var(--s));
    top:calc(62% + 10px * var(--s));
  }
}

/* ----- 768 tablet design: 641–1024 ----- */
@media (max-width: 1024px){
  .container{
    padding-inline:40px;
  }

  /* Header: Меню + Войти */
  .topbar{
    padding:12px 20px;
    gap:12px;
  }

  .topbar__nav{
    display:none;
  }

  .topbar .topbar__burger{
    display:inline-flex;
  }

  .topbar .button--ghost{
    margin-left:auto;
  }

  /* Hero: collage on the right, unrotated */
  .hero{
    min-height:0;
  }

  .hero .container{
    min-height:0;
    padding:32px 0 96px;
    gap:36px;
  }

  .hero__layout{
    min-height:0;
    padding-inline:40px;
  }

  .hero__copy{
    max-width:56%;
  }

  .hero h1{
    font-size:clamp(32px, 5.2vw, 44px);
    line-height:1.18;
    letter-spacing:-0.02em;
  }

  .hero__copy p{
    margin-top:16px;
    font-size:16px;
    line-height:1.5;
  }

  .hero__visual{
    left:47%;
    right:-180px;
    top:-70px;
    height:740px;
    width:auto;
    opacity:1;
    mask-image:linear-gradient(90deg, transparent 0%, #000 24%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 24%);
  }

  .hero__scene{
    --col-w:210px;
    --col-gap:14px;
    --col-stagger:130px;
    left:auto;
    right:-30px;
    top:50%;
    transform:translate(0, -50%) rotate(0deg);
  }

  .stats{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:32px 24px;
    margin-top:36px;
  }

  .stats__item dt{
    font-size:26px;
  }

  .stats__item dd{
    margin-top:6px;
    font-size:13px;
    white-space:normal;
  }

  .hero__actions{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-top:36px;
    max-width:340px;
  }

  .hero__actions .button--primary,
  .hero__actions .button--outline{
    width:100%;
    min-width:0;
    height:48px;
    font-size:15px;
    border-radius:14px;
  }

  .hero__note{
    margin-top:10px;
    font-size:13px;
  }

  /* Compare: stacked, VS sits between the cards */
  .compare__layout{
    flex-direction:column;
    gap:0;
  }

  .compare-card{
    width:100%;
    max-width:648px;
    min-height:0;
    padding:28px 26px 26px;
  }

  .compare__figure{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:min(420px, 80%);
    margin:-26px auto;
    z-index:2;
  }

  .compare__figure img{
    width:100%;
  }

  /* Process: single column */
  .process-grid{
    grid-template-columns:1fr;
    gap:16px;
    max-width:648px;
    margin-inline:auto;
  }

  .process-card{
    min-height:0;
    padding:20px 20px 20px 44px;
  }

  .process-card h3{
    font-size:20px;
  }

  .process-card p{
    margin-top:12px;
    font-size:14px;
    line-height:1.5;
  }

  /* Cases: tap hint */
  .cases__hint{
    display:flex;
  }

  /* Community: stacked */
  .community-layout{
    grid-template-columns:1fr;
    gap:24px;
  }

  .community-left{
    gap:16px;
  }

  .community-stats{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .mini-stat{
    min-height:0;
    padding:16px;
  }

  .mini-stat strong{
    font-size:24px;
  }

  .review-row{
    gap:14px;
    margin-top:16px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  .review-card{
    flex:0 0 300px;
    width:300px;
    min-width:300px;
    max-width:300px;
    min-height:230px;
    scroll-snap-align:start;
  }

  /* FAQ: flattened single column in design order */
  .faq-layout{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .faq-list,
  .faq-side,
  .faq-side__list{
    display:contents;
  }

  .faq-list > .faq-item:nth-child(1){ order:1; }
  .faq-list > .faq-item:nth-child(2){ order:2; }
  .faq-list > .faq-item:nth-child(3){ order:3; }
  .faq-list > .faq-item:nth-child(4){ order:4; }
  .faq-list > .faq-item:nth-child(5){ order:6; }
  .faq-list > .faq-item:nth-child(6){ order:8; }
  .faq-side__list > .faq-item:nth-child(1){ order:5; }
  .faq-side__list > .faq-item:nth-child(2){ order:7; }
  .faq-side__list > .faq-item:nth-child(3){ order:9; }
  .faq-side__list > .faq-item:nth-child(4){ order:11; }

  .faq-cta{
    order:12;
  }

  .faq-item summary{
    padding:18px 56px 18px 20px;
  }

  .faq-item__summary-text{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .faq-item__body p{
    font-size:14px;
  }

  .faq-cta{
    min-height:0;
    padding:26px 24px 24px 28px;
  }

  .faq-cta h3{
    font-size:clamp(24px, 4vw, 32px);
    line-height:1.15;
  }

  .faq-cta__vk{
    width:150px;
    height:126px;
  }

  /* CTA: card side-by-side, steps in a row below */
  .cta-layout{
    grid-template-columns:1fr;
    gap:28px;
  }

  .cta-card{
    min-height:0;
    padding:32px;
    grid-template-columns:minmax(0, 1fr) minmax(160px, 220px);
    align-items:center;
  }

  .cta-card h2{
    font-size:clamp(26px, 3.6vw, 36px);
    line-height:1.15;
  }

  .cta-card__image{
    width:100%;
    max-width:220px;
    height:auto;
    max-height:280px;
    margin-bottom:-60px;
  }

  .cta-steps{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
    padding-top:8px;
  }

  .cta-step span{
    font-size:22px;
  }

  .cta-step p{
    margin-top:8px;
    font-size:13px;
    line-height:1.45;
  }

  /* Footer: link columns first, brand block as bottom bar */
  .footer__grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:32px 24px;
  }

  .footer__brand-block{
    order:6;
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:2px 40px;
    align-items:start;
  }

  .footer__brand-block .brand--footer{
    grid-row:1 / 4;
    margin:0;
  }

  .footer__legal{
    grid-column:1;
    grid-row:4;
    margin-top:14px;
    font-size:10px;
    color:#93a4a8;
  }

  .footer__legal a{
    color:inherit;
  }

  .footer__copy{
    grid-column:2;
    grid-row:4;
    justify-self:end;
    align-self:end;
    margin-top:14px;
  }
}

/* ----- 360 mobile design: ≤640 ----- */
@media (max-width: 640px){
  .container{
    padding-inline:20px;
  }

  /* Header: burger only */
  .topbar{
    padding:10px 12px;
    border-radius:14px;
  }

  .topbar .button--ghost{
    display:none;
  }

  .topbar__burger span{
    display:none;
  }

  .topbar__burger{
    width:44px;
    height:44px;
    min-width:44px;
    padding:0;
    border-radius:12px;
  }

  .hero .container{
    padding:20px 0 72px;
    gap:24px;
  }

  .hero__layout{
    padding-inline:20px;
  }

  .hero__copy{
    max-width:100%;
  }

  .hero h1{
    font-size:28px;
    line-height:1.22;
  }

  .hero__copy p{
    margin-top:14px;
    font-size:14px;
    line-height:1.55;
  }

  .hero__visual{
    left:-24%;
    right:-24%;
    top:0;
    height:auto;
    bottom:-4%;
    opacity:.65;
    mask-image:linear-gradient(180deg, #000 55%, rgba(0,0,0,.65) 78%, transparent 100%);
    -webkit-mask-image:linear-gradient(180deg, #000 55%, rgba(0,0,0,.65) 78%, transparent 100%);
  }

  .hero__layout::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(180deg, rgba(3,6,7,.42) 0%, rgba(3,6,7,.58) 55%, rgba(3,6,7,.86) 100%);
    pointer-events:none;
  }

  .hero__scene{
    --col-w:132px;
    --col-gap:10px;
    --col-stagger:84px;
    right:50%;
    top:56%;
    transform:translate(50%, -50%) rotate(-8deg);
  }

  .stats{
    gap:24px 16px;
    margin-top:28px;
  }

  .stats__item dt{
    font-size:22px;
  }

  .stats__item dd{
    font-size:12px;
    line-height:1.4;
  }

  .hero__actions{
    margin-top:28px;
    max-width:100%;
    gap:10px;
  }

  .hero__actions .button--primary,
  .hero__actions .button--outline{
    height:46px;
    font-size:14px;
  }

  .hero__note{
    font-size:12px;
  }

  .section-head h2{
    font-size:24px;
    line-height:1.2;
  }

  .section-head p{
    margin-top:8px;
    font-size:14px;
    line-height:1.4;
  }

  /* Platforms: static 2-col grid */
  .platforms{
    padding:32px 0 48px;
  }

  .platforms .platform-grid[aria-hidden="true"]{
    display:none;
  }

  .platform-marquee{
    overflow:visible;
    mask-image:none;
    -webkit-mask-image:none;
  }

  .platform-marquee__track{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    width:auto;
    animation:none;
    transform:none;
  }

  .platform-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    width:auto;
  }

  .platform-card{
    height:60px;
    padding:10px 14px;
    border-radius:12px;
  }

  .platform-card--yandex .platform-logo{ height:12px; }
  .platform-card--apple .platform-logo{ height:21px; }
  .platform-card--tiktok .platform-logo{ height:28px; }
  .platform-card--soundcloud .platform-logo{ height:40px; }
  .platform-card--youtube .platform-logo{ height:19px; }
  .platform-card--spotify .platform-logo{ height:29px; }
  .platform-card--deezer .platform-logo{ height:24px; }

  /* Compare */
  .compare{
    padding:48px 0 64px;
  }

  .compare-card{
    padding:22px 18px;
  }

  .compare-card h3{
    font-size:20px;
  }

  .feature-list{
    gap:8px;
    margin-top:14px;
    font-size:14px;
    line-height:1.4;
  }

  .compare-icon,
  .compare-icon svg{
    width:20px;
    height:20px;
    flex-basis:20px;
  }

  .compare__figure{
    width:min(300px, 78%);
    margin:-22px auto;
  }

  /* Process */
  .process{
    padding:48px 0 64px;
  }

  .process-grid{
    max-width:none;
  }

  .process-card{
    padding:18px 16px 18px 40px;
  }

  .process-card__step{
    width:24px;
  }

  .process-card h3{
    font-size:18px;
  }

  .process-card p{
    font-size:13px;
  }

  /* Cases: snap scroll + hint */
  .cases{
    padding:48px 0 56px;
  }

  .cases-marquee{
    overflow:visible;
    padding:0;
    margin:0;
  }

  .cases-marquee__track{
    animation:none;
    transform:none;
    display:flex;
    gap:14px;
    width:auto;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 20px 12px;
    margin:-4px -20px -12px;
  }

  .cases-rail[aria-hidden="true"]{
    display:none;
  }

  .case-tile{
    width:168px;
    height:224px;
    scroll-snap-align:start;
  }

  .case-tile--featured{
    width:184px;
    height:245px;
  }

  .case-tile:hover{
    transform:none;
  }

  /* Community */
  .community{
    padding:48px 0 56px;
  }

  .review-row{
    margin-inline:-20px;
    padding-inline:20px;
  }

  .review-card{
    flex:0 0 min(280px, calc(100vw - 56px));
    width:min(280px, calc(100vw - 56px));
    min-width:min(280px, calc(100vw - 56px));
    max-width:min(280px, calc(100vw - 56px));
    min-height:210px;
    padding:18px 16px 16px;
    border-radius:16px;
  }

  .review-card__head img{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  .review-card p{
    font-size:14px;
  }

  /* FAQ */
  .faq{
    padding:48px 0 56px;
  }

  .faq .section-head{
    margin-bottom:20px;
  }

  .faq-item summary{
    padding:16px 48px 16px 16px;
    font-size:15px;
  }

  .faq-item__icon{
    right:14px;
    width:20px;
    height:20px;
  }

  .faq-item__icon svg{
    width:20px;
    height:20px;
  }

  .faq-item__body{
    padding:0 16px 16px;
  }

  .faq-cta{
    padding:22px 18px;
    gap:10px;
  }

  .faq-cta h3{
    font-size:22px;
    line-height:1.2;
  }

  .faq-cta p{
    font-size:14px;
  }

  .faq-cta .button{
    width:100%;
    height:46px;
  }

  .faq-cta__vk{
    width:118px;
    height:100px;
  }

  /* CTA: card stacked, CD image floats beside the steps */
  .cta{
    padding:40px 0 56px;
  }

  .cta-layout{
    position:relative;
    gap:24px;
  }

  .cta-card{
    grid-template-columns:1fr;
    padding:22px 18px;
    gap:14px;
  }

  .cta-card h2{
    font-size:24px;
    line-height:1.25;
    letter-spacing:-0.02em;
  }

  .cta-card__actions{
    margin-top:18px;
    gap:10px;
    max-width:100%;
  }

  .cta-card__actions .button--primary,
  .cta-card__actions .button--outline{
    width:100%;
    max-width:100%;
    height:46px;
    font-size:14px;
  }

  .cta-card__copy p{
    margin-top:14px;
    font-size:13px;
  }

  .cta-card__image{
    position:absolute;
    right:14px;
    bottom:0;
    width:126px;
    height:auto;
    max-height:none;
    margin:0;
    z-index:1;
  }

  .cta-steps{
    grid-template-columns:1fr;
    gap:16px;
    padding-right:138px;
  }

  .cta-step span{
    font-size:18px;
  }

  .cta-step p{
    font-size:12px;
    line-height:1.4;
  }

  /* Footer: 2×2 columns, brand block last */
  .footer__grid{
    grid-template-columns:1fr 1fr;
    gap:28px 20px;
  }

  .footer__brand-block{
    grid-template-columns:1fr;
    gap:10px;
  }

  .footer__brand-block .brand--footer{
    grid-row:auto;
  }

  .footer__brand-block > *{
    grid-column:1;
    grid-row:auto;
  }

  .footer__copy{
    justify-self:start;
  }
}

/* ============================================================
   Burger button (hidden on desktop)
   ============================================================ */
.topbar__burger{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:48px;
  min-width:48px;
  padding:0 16px;
  border-radius:14px;
  border:2px solid var(--accent-cyan, #08B8E8);
  background:rgba(255,255,255,.01);
  color:var(--accent-cyan, #08B8E8);
  font-family:"Geologica", sans-serif;
  font-size:14px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
}

.topbar__burger svg{
  display:block;
  width:22px;
  height:22px;
}

/* ============================================================
   Mobile menu overlay
   ============================================================ */
.menu-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(2, 4, 5, .72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:overlay-in .2s ease;
}

.menu-overlay[hidden]{
  display:none;
}

.menu-overlay__panel{
  position:absolute;
  inset:12px;
  border-radius:24px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, #071115 0%, #030607 100%);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  padding:20px 24px 24px;
  overflow:hidden;
}

.menu-overlay__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.menu-overlay__top .brand__mark{
  width:74px;
  height:32px;
}

.menu-overlay__top .brand__name{
  font-size:22px;
}

.menu-overlay__close{
  width:44px;
  height:44px;
  min-width:44px;
  flex:0 0 auto;
  border-radius:50%;
  border:1.5px solid rgba(8,184,232,.6);
  background:transparent;
  color:var(--cyan);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.menu-overlay__close svg{
  width:20px;
  height:20px;
}

.menu-overlay__nav{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
}

.menu-overlay__nav a{
  font-family:"Geologica", sans-serif;
  font-size:20px;
  font-weight:600;
  color:var(--cyan);
  letter-spacing:-0.01em;
}

.menu-overlay__footer{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.menu-overlay__email{
  font-family:"Geologica", sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--cyan);
}

.menu-overlay__support{
  display:flex;
  align-items:baseline;
  gap:16px;
  font-size:12px;
  color:#aab8bb;
}

.menu-overlay__support a{
  font-family:"Geologica", sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--cyan);
}

.menu-overlay__legal{
  margin-top:4px;
  font-size:12px;
  color:#93a4a8;
}

.menu-overlay__legal a{
  color:inherit;
}

.menu-overlay__copy{
  font-size:12px;
  color:#93a4a8;
}

/* ============================================================
   Case modal
   ============================================================ */
.case-modal{
  position:fixed;
  inset:0;
  z-index:110;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(2, 4, 5, .8);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  animation:overlay-in .2s ease;
}

.case-modal[hidden]{
  display:none;
}

.case-modal__card{
  width:min(560px, 100%);
  flex:0 1 auto;
  min-width:0;
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(24,48,55,.92) 0%, rgba(11,23,26,.96) 100%);
  box-shadow:var(--shadow);
  padding:28px 28px 24px;
  box-sizing:border-box;
}

.case-modal__close{
  position:absolute;
  top:24px;
  right:24px;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--cyan);
  cursor:pointer;
  z-index:2;
}

.case-modal__close svg{
  width:26px;
  height:26px;
}

.case-modal__head{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.case-modal__photo{
  width:88px;
  height:88px;
  border-radius:12px;
  object-fit:cover;
  flex:0 0 88px;
}

.case-modal__head-text{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.case-modal__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.case-modal__tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  border-radius:8px;
  background:rgba(8,184,232,.12);
  color:var(--cyan-2);
  font-family:"Geologica", sans-serif;
  font-size:11px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}

.case-modal__tag svg{
  width:11px;
  height:11px;
  flex:0 0 11px;
}

.case-modal__title{
  font-size:28px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.01em;
  color:#fff;
}

.case-modal__subtitle{
  font-family:"Golos Text", sans-serif;
  font-size:14px;
  color:var(--muted);
}

.case-modal__desc{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  font-family:"Golos Text", sans-serif;
  font-size:14px;
  line-height:1.55;
  color:rgba(244,251,253,.88);
}

.case-modal__list{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.case-modal__list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-family:"Golos Text", sans-serif;
  font-size:14px;
  color:#fff;
}

.case-modal__list svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin-top:1px;
}

.case-modal__stats{
  margin:22px 0 0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  gap:18px 16px;
}

.case-modal__stat dt,
.case-modal__stat b{
  display:block;
  font-family:"Geologica", sans-serif;
  font-size:22px;
  font-weight:700;
  line-height:1.1;
  color:#fff;
}

.case-modal__stat dd,
.case-modal__stat span{
  display:block;
  margin:4px 0 0;
  font-family:"Geologica", sans-serif;
  font-size:12px;
  line-height:1.3;
  color:var(--muted-2);
}

.case-modal__cta{
  margin-top:24px;
}

.case-modal__cta .button{
  width:100%;
  height:48px;
  font-size:15px;
}

.case-tile[data-case]{
  cursor:pointer;
}

@media (max-width: 640px){
  .case-modal{
    padding:16px;
  }

  .case-modal__card{
    padding:20px 18px 18px;
    max-height:calc(100dvh - 32px);
  }

  .case-modal__close{
    top:14px;
    right:14px;
    width:40px;
    height:40px;
    color:var(--cyan);
  }

  .case-modal__photo{
    width:64px;
    height:64px;
    flex-basis:64px;
  }

  .case-modal__title{
    font-size:22px;
  }

  .case-modal__stats{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px 12px;
  }

  .case-modal__stat dt,
  .case-modal__stat b{
    font-size:20px;
  }
}

/* Cases tap hint (mobile/tablet only) */
.cases__hint{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:18px;
  font-family:"Golos Text", sans-serif;
  font-size:13px;
  color:var(--muted-2);
}

.cases__hint svg{
  width:16px;
  height:16px;
}

/* Footer legal line */
.footer__legal{
  display:none;
}

@media (max-width: 1024px){
  .footer__legal{
    display:block;
  }
}

@keyframes overlay-in{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

@media (prefers-reduced-motion: reduce){
  .platform-marquee__track,
  .cases-marquee__track{
    animation:none;
    transform:none;
  }

  .menu-overlay,
  .case-modal{
    animation:none;
  }
}