:root{
  --bg:#060609;
  --bg-soft:#0b0b10;
  --surface:#101016;
  --surface-2:#15151d;
  --surface-3:#1b1b25;

  --text:#f8f8fb;
  --text-soft:#b7b7c5;
  --text-muted:#777786;

  --violet:#8b5cf6;
  --violet-light:#a78bfa;
  --pink:#ec4899;
  --cyan:#22d3ee;
  --green:#34d399;

  --line:rgba(255,255,255,.08);
  --line-hover:rgba(167,139,250,.30);

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:26px;
  --radius-xl:34px;

  --shadow:
    0 30px 100px rgba(0,0,0,.45);

  --gradient:
    linear-gradient(135deg,#8b5cf6,#ec4899);

  --container:1200px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
  background:var(--bg);
}

body{
  min-height:100vh;
  background:
    radial-gradient(
      circle at 50% -15%,
      rgba(139,92,246,.20),
      transparent 35%
    ),
    radial-gradient(
      circle at 100% 25%,
      rgba(236,72,153,.08),
      transparent 30%
    ),
    var(--bg);

  color:var(--text);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background:
    linear-gradient(
      rgba(255,255,255,.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.012) 1px,
      transparent 1px
    );

  background-size:70px 70px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 75%
    );
}

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

button,
input,
textarea,
select{
  font:inherit;
}

button{
  border:0;
}

.container{
  width:min(
    calc(100% - 40px),
    var(--container)
  );

  margin-inline:auto;
}

/* =========================
   TYPOGRAPHY
========================= */

.gradient-text{
  background:
    linear-gradient(
      90deg,
      #c4b5fd,
      #a78bfa,
      #f472b6
    );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;

  padding:8px 13px;

  border:1px solid rgba(139,92,246,.20);
  border-radius:999px;

  background:
    rgba(139,92,246,.07);

  color:#c4b5fd;

  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;

  backdrop-filter:blur(14px);
}

.eyebrow-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#34d399;

  box-shadow:
    0 0 0 4px rgba(52,211,153,.08),
    0 0 15px rgba(52,211,153,.7);

  animation:pulse-dot 2s infinite;
}

@keyframes pulse-dot{
  0%,100%{
    opacity:1;
    transform:scale(1);
  }

  50%{
    opacity:.55;
    transform:scale(.8);
  }
}

.section-kicker{
  margin-bottom:12px;

  color:#a78bfa;

  font-size:10px;
  font-weight:900;

  letter-spacing:.16em;
  text-transform:uppercase;
}

.section-title{
  font-size:
    clamp(32px,5vw,56px);

  line-height:1.02;
  letter-spacing:-.045em;

  font-weight:900;
}

.section-description{
  max-width:620px;

  margin-top:16px;

  color:var(--text-muted);

  font-size:15px;
  line-height:1.7;
}

/* =========================
   HEADER
========================= */

.site-header{
  position:sticky;
  top:0;
  z-index:100;

  border-bottom:1px solid rgba(255,255,255,.06);

  background:
    rgba(6,6,9,.72);

  backdrop-filter:blur(22px);
}

.nav{
  height:76px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.logo{
  display:flex;
  align-items:center;
  gap:11px;

  font-size:15px;
  font-weight:900;
  letter-spacing:-.02em;
}

.logo-mark{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:var(--gradient);

  box-shadow:
    0 8px 30px rgba(139,92,246,.25);

  font-size:18px;
}

.logo-text span{
  color:#a78bfa;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:30px;

  color:#8f8f9e;

  font-size:12px;
  font-weight:700;
}

.nav-links a{
  position:relative;
  transition:.2s ease;
}

.nav-links a:hover{
  color:#fff;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:9px;
}

/* =========================
   BUTTONS
========================= */

.btn{
  min-height:46px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:0 19px;

  border:1px solid transparent;
  border-radius:13px;

  background:var(--gradient);

  color:white;

  font-size:12px;
  font-weight:900;

  cursor:pointer;

  box-shadow:
    0 10px 30px rgba(139,92,246,.16);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}

.btn:hover{
  transform:translateY(-2px);

  filter:brightness(1.08);

  box-shadow:
    0 15px 40px rgba(139,92,246,.28);
}

.btn:active{
  transform:translateY(0);
}

.btn-secondary{
  background:
    rgba(255,255,255,.045);

  border-color:var(--line);

  box-shadow:none;

  color:#d0d0da;
}

.btn-secondary:hover{
  background:
    rgba(255,255,255,.075);

  border-color:var(--line-hover);

  box-shadow:none;
}

.btn-large{
  min-height:54px;
  padding:0 25px;

  border-radius:15px;

  font-size:13px;
}

.btn-full{
  width:100%;
}

/* =========================
   CARDS
========================= */

.glass-card{
  border:1px solid var(--line);

  border-radius:var(--radius-lg);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.018)
    );

  box-shadow:
    0 20px 70px rgba(0,0,0,.18);

  backdrop-filter:blur(20px);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.glass-card:hover{
  transform:translateY(-4px);

  border-color:var(--line-hover);

  box-shadow:
    0 30px 90px rgba(0,0,0,.30);
}

/* =========================
   HERO
========================= */

.hero{
  position:relative;

  min-height:
    calc(100vh - 76px);

  display:flex;
  align-items:center;

  overflow:hidden;

  padding:
    100px 0
    90px;
}

.hero::before{
  content:"";

  position:absolute;

  width:700px;
  height:700px;

  left:50%;
  top:-420px;

  transform:translateX(-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(139,92,246,.24),
      transparent 68%
    );

  filter:blur(20px);

  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:2;

  max-width:900px;

  margin:auto;

  text-align:center;
}

.hero h1{
  margin-top:26px;

  font-size:
    clamp(52px,8vw,100px);

  line-height:.91;

  letter-spacing:-.065em;

  font-weight:950;

  text-shadow:
    0 0 70px rgba(139,92,246,.10);
}

.hero-description{
  max-width:650px;

  margin:
    28px auto 0;

  color:#92929f;

  font-size:
    clamp(15px,2vw,18px);

  line-height:1.7;
}

.hero-actions{
  display:flex;
  justify-content:center;
  gap:11px;

  margin-top:32px;

  flex-wrap:wrap;
}

.hero-meta{
  margin-top:18px;

  color:#666674;

  font-size:10px;
}

.hero-visual{
  position:relative;

  max-width:900px;

  height:170px;

  margin:65px auto 0;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:5px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      black 15%,
      black 85%,
      transparent
    );
}

.wave-bar{
  width:4px;

  min-height:10px;

  border-radius:999px;

  background:
    linear-gradient(
      to top,
      #8b5cf6,
      #ec4899
    );

  box-shadow:
    0 0 15px rgba(139,92,246,.25);

  animation:
    wave 1.4s ease-in-out infinite alternate;
}

@keyframes wave{
  from{
    transform:scaleY(.35);
    opacity:.45;
  }

  to{
    transform:scaleY(1);
    opacity:1;
  }
}

/* =========================
   SECTIONS
========================= */

.section{
  padding:110px 0;
}

.section-header{
  max-width:760px;

  margin-bottom:45px;
}

.section-header.center{
  margin-inline:auto;

  text-align:center;
}

.section-header.center .section-description{
  margin-inline:auto;
}

/* =========================
   FEATURE GRID
========================= */

.feature-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:15px;
}

.feature-card{
  padding:28px;
}

.feature-icon{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  margin-bottom:24px;

  border-radius:14px;

  background:
    rgba(139,92,246,.10);

  border:
    1px solid rgba(139,92,246,.18);

  font-size:21px;
}

.feature-card h3{
  font-size:17px;
  letter-spacing:-.02em;
}

.feature-card p{
  margin-top:10px;

  color:#777786;

  font-size:12px;
  line-height:1.7;
}

/* =========================
   SHOWCASE
========================= */

.showcase{
  display:grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:18px;
}

.showcase-cover{
  position:relative;

  min-height:500px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  border-radius:var(--radius-xl);

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.18),
      transparent 25%
    ),
    radial-gradient(
      circle at 70% 80%,
      rgba(236,72,153,.45),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #34206f,
      #160d2d
    );

  box-shadow:var(--shadow);
}

.showcase-cover::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,.14) 50%,
      transparent 70%
    );

  transform:translateX(-100%);

  animation:
    shine 5s infinite;
}

@keyframes shine{
  0%,55%{
    transform:translateX(-100%);
  }

  75%,100%{
    transform:translateX(100%);
  }
}

.showcase-cover-symbol{
  position:relative;
  z-index:2;

  font-size:110px;

  filter:
    drop-shadow(
      0 20px 40px rgba(0,0,0,.4)
    );
}

.showcase-info{
  padding:38px;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.track-label{
  color:#a78bfa;

  font-size:10px;
  font-weight:900;

  letter-spacing:.16em;
  text-transform:uppercase;
}

.track-title{
  margin-top:10px;

  font-size:
    clamp(30px,4vw,52px);

  line-height:1;

  letter-spacing:-.05em;
}

.track-meta{
  margin-top:10px;

  color:#777786;

  font-size:12px;
}

.player{
  margin-top:35px;
}

.player-progress{
  height:4px;

  overflow:hidden;

  border-radius:99px;

  background:#252530;
}

.player-progress span{
  display:block;

  width:58%;
  height:100%;

  border-radius:inherit;

  background:var(--gradient);
}

.player-controls{
  display:flex;
  align-items:center;
  gap:15px;

  margin-top:20px;
}

.play-button{
  width:52px;
  height:52px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:var(--gradient);

  color:white;

  cursor:pointer;

  box-shadow:
    0 10px 35px rgba(139,92,246,.25);
}

.player-time{
  color:#777786;
  font-size:10px;
}

/* =========================
   PROCESS
========================= */

.process-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}

.process-card{
  position:relative;

  padding:25px;
}

.process-number{
  color:#a78bfa;

  font-size:10px;
  font-weight:900;

  letter-spacing:.12em;
}

.process-card h3{
  margin-top:42px;

  font-size:16px;
}

.process-card p{
  margin-top:8px;

  color:#70707f;

  font-size:11px;
  line-height:1.65;
}

/* =========================
   PRICING
========================= */

.pricing-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:15px;
}

.price-card{
  position:relative;

  padding:30px;

  overflow:hidden;
}

.price-card.featured{
  border-color:
    rgba(139,92,246,.45);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(139,92,246,.14),
      transparent 45%
    ),
    var(--surface);
}

.price-badge{
  display:inline-block;

  padding:5px 9px;

  border-radius:7px;

  background:
    rgba(139,92,246,.10);

  color:#c4b5fd;

  font-size:9px;
  font-weight:900;

  letter-spacing:.08em;
}

.price-card h3{
  margin-top:15px;

  font-size:20px;
}

.price{
  margin:20px 0;

  font-size:43px;
  font-weight:950;

  letter-spacing:-.06em;
}

.price small{
  color:#666674;

  font-size:11px;
  font-weight:500;
}

.price-list{
  list-style:none;

  margin-bottom:25px;

  color:#888895;

  font-size:11px;

  line-height:2.25;
}

.price-list li::before{
  content:"✓";

  margin-right:8px;

  color:#34d399;
}

/* =========================
   CTA
========================= */

.cta{
  position:relative;

  overflow:hidden;

  padding:
    90px 30px;

  border:
    1px solid rgba(139,92,246,.25);

  border-radius:var(--radius-xl);

  text-align:center;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(139,92,246,.20),
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(236,72,153,.14),
      transparent 45%
    ),
    #0d0d14;
}

.cta h2{
  font-size:
    clamp(34px,6vw,62px);

  line-height:.98;

  letter-spacing:-.055em;
}

.cta p{
  max-width:550px;

  margin:
    18px auto 28px;

  color:#858592;

  line-height:1.7;

  font-size:13px;
}

/* =========================
   FOOTER
========================= */

.footer{
  padding:45px 0 100px;

  border-top:1px solid var(--line);

  color:#5f5f6d;

  font-size:10px;
}

.footer-inner{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;
}

.footer-brand{
  color:#aaaab6;

  font-weight:900;
}

.footer-links{
  display:flex;
  gap:20px;
}

.footer-links a:hover{
  color:#fff;
}

/* =========================
   MOBILE
========================= */

.mobile-nav{
  display:none;
}

@media(max-width:900px){

  .nav-links{
    display:none;
  }

  .hero{
    min-height:auto;

    padding:
      80px 0
      60px;
  }

  .hero h1{
    font-size:
      clamp(48px,12vw,75px);
  }

  .showcase{
    grid-template-columns:1fr;
  }

  .showcase-cover{
    min-height:360px;
  }

  .feature-grid,
  .pricing-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .process-grid{
    grid-template-columns:
      repeat(2,1fr);
  }
}

@media(max-width:600px){

  .container{
    width:
      calc(100% - 28px);
  }

  .nav{
    height:66px;
  }

  .nav-actions .btn-secondary{
    display:none;
  }

  .nav-actions .btn{
    min-height:40px;
    padding:0 13px;
    font-size:10px;
  }

  .logo-mark{
    width:34px;
    height:34px;
  }

  .logo{
    font-size:13px;
  }

  .hero{
    padding:
      70px 0
      45px;
  }

  .hero h1{
    margin-top:20px;

    font-size:
      clamp(44px,13vw,62px);
  }

  .hero-description{
    font-size:14px;
  }

  .hero-actions{
    flex-direction:column;
  }

  .hero-actions .btn{
    width:100%;
  }

  .hero-visual{
    height:110px;

    margin-top:45px;

    gap:3px;
  }

  .wave-bar{
    width:3px;
  }

  .section{
    padding:75px 0;
  }

  .section-title{
    font-size:35px;
  }

  .feature-grid,
  .pricing-grid,
  .process-grid{
    grid-template-columns:1fr;
  }

  .showcase-cover{
    min-height:300px;
  }

  .showcase-info{
    padding:25px;
  }

  .showcase-cover-symbol{
    font-size:80px;
  }

  .cta{
    padding:
      65px 20px;
  }

  .footer-inner{
    flex-direction:column;

    text-align:center;
  }

  .mobile-nav{
    position:fixed;

    display:flex;

    left:10px;
    right:10px;
    bottom:10px;

    z-index:150;

    padding:7px;

    border:
      1px solid rgba(255,255,255,.09);

    border-radius:18px;

    background:
      rgba(12,12,18,.88);

    backdrop-filter:blur(22px);

    box-shadow:
      0 20px 60px rgba(0,0,0,.55);
  }

  .mobile-nav a{
    flex:1;

    padding:8px 3px;

    text-align:center;

    color:#777786;

    font-size:8px;
    font-weight:800;
  }

  .mobile-nav a:first-child{
    color:#c4b5fd;
  }

  .mobile-nav-icon{
    display:block;

    margin-bottom:3px;

    font-size:16px;
  }
}

/* =========================================================
   СИЛА ЗВУКА AI — PREMIUM FOOTER V2
   Единый адаптивный footer
========================================================= */

.footer{
  position:relative;
  padding:86px 0 28px;
  border-top:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(
      ellipse at 15% 0%,
      rgba(139,92,246,.075),
      transparent 38%
    ),
    radial-gradient(
      ellipse at 85% 20%,
      rgba(236,72,153,.045),
      transparent 35%
    ),
    #050507;
  color:#777786;
  font-size:12px;
  overflow:hidden;
}

.footer::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(900px,80%);
  height:1px;
  transform:translateX(-50%);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(167,139,250,.28),
      rgba(236,72,153,.18),
      transparent
    );
}

.footer-inner{
  display:grid;
  grid-template-columns:
    minmax(240px,1.7fr)
    repeat(4,minmax(120px,1fr));
  gap:48px;
  align-items:start;
}

.footer-brand-block{
  max-width:310px;
}

.footer-brand{
  display:inline-flex;
  align-items:center;
  color:#f5f5f8;
  font-size:17px;
  font-weight:950;
  letter-spacing:-.04em;
  transition:color .2s ease;
}

.footer-brand span{
  margin-left:4px;
  color:#a78bfa;
}

.footer-brand:hover{
  color:#fff;
}

.footer-description{
  max-width:290px;
  margin-top:15px;
  color:#70707e;
  font-size:12px;
  line-height:1.75;
}

.footer-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#858591;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.4px;
}

.footer-status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#34d399;
  box-shadow:
    0 0 0 4px rgba(52,211,153,.06),
    0 0 13px rgba(52,211,153,.65);
  animation:footerStatusPulse 2.4s ease-in-out infinite;
}

@keyframes footerStatusPulse{
  0%,100%{
    opacity:1;
    transform:scale(1);
  }
  50%{
    opacity:.55;
    transform:scale(.82);
  }
}

.footer-column{
  min-width:0;
}

.footer-column-title{
  margin-bottom:18px;
  color:#aaaab6;
  font-size:9px;
  font-weight:950;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

.footer-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:11px;
}

.footer-links a{
  position:relative;
  color:#686874;
  font-size:11px;
  line-height:1.45;
  transition:
    color .2s ease,
    transform .2s ease;
}

.footer-links a:hover{
  color:#f0eff7;
  transform:translateX(3px);
}

.footer-legal{
  margin-top:62px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.055);
}

.footer-legal-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px 24px;
}

.footer-legal-links a{
  color:#555560;
  font-size:10px;
  transition:color .2s ease;
}

.footer-legal-links a:hover{
  color:#aaaab6;
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.045);
  color:#484852;
  font-size:9px;
  letter-spacing:.7px;
  text-transform:uppercase;
}

.footer-bottom strong{
  color:#777784;
}

/* =========================
   TABLET
========================= */

@media(max-width:1000px){

  .footer{
    padding:72px 0 26px;
  }

  .footer-inner{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
    gap:42px 28px;
  }

  .footer-brand-block{
    grid-column:span 3;
    max-width:520px;
    padding-bottom:8px;
  }

  .footer-description{
    max-width:470px;
  }

}

/* =========================
   MOBILE
========================= */

@media(max-width:600px){

  .footer{
    padding:58px 0 88px;
  }

  .footer-inner{
    display:flex;
    flex-direction:column;
    gap:0;
  }

  .footer-brand-block{
    width:100%;
    max-width:none;
    padding-bottom:28px;
  }

  .footer-brand{
    font-size:16px;
  }

  .footer-description{
    max-width:330px;
    margin-top:12px;
    font-size:11px;
    line-height:1.7;
  }

  .footer-status{
    margin-top:16px;
  }

  .footer-column{
    width:100%;
    padding:22px 0;
    border-top:1px solid rgba(255,255,255,.055);
  }

  .footer-column-title{
    margin-bottom:14px;
    font-size:8px;
    letter-spacing:1.6px;
  }

  .footer-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 18px;
  }

  .footer-links a{
    font-size:11px;
  }

  .footer-links a:hover{
    transform:none;
  }

  .footer-legal{
    margin-top:8px;
    padding-top:22px;
  }

  .footer-legal-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    border:1px solid rgba(255,255,255,.055);
    border-radius:16px;
    overflow:hidden;
    background:rgba(255,255,255,.018);
  }

  .footer-legal-links a{
    min-height:48px;
    display:flex;
    align-items:center;
    padding:10px 13px;
    border-right:1px solid rgba(255,255,255,.045);
    border-bottom:1px solid rgba(255,255,255,.045);
    color:#666672;
    font-size:9px;
    line-height:1.35;
  }

  .footer-legal-links a:nth-child(2n){
    border-right:0;
  }

  .footer-legal-links a:nth-last-child(-n+2){
    border-bottom:0;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-top:18px;
    padding-top:18px;
    font-size:8px;
  }

}

@media(max-width:380px){

  .footer{
    padding-bottom:82px;
  }

  .footer-links{
    grid-template-columns:1fr;
    gap:9px;
  }

  .footer-legal-links{
    grid-template-columns:1fr;
  }

  .footer-legal-links a,
  .footer-legal-links a:nth-child(2n){
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.045);
  }

  .footer-legal-links a:last-child{
    border-bottom:0;
  }

}

/* =========================================================
   СИЛА ЗВУКА AI — HEADER ONLINE + FOOTER V3
   Premium horizontal layout
========================================================= */

/* ---------- HEADER: AI STUDIO ONLINE ---------- */

.header-online-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  padding:8px 12px;
  border:1px solid rgba(52,211,153,.16);
  border-radius:999px;
  background:rgba(52,211,153,.045);
  color:#9b9ba8;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.5px;
  white-space:nowrap;
}

.header-online-dot{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#34d399;
  box-shadow:
    0 0 0 3px rgba(52,211,153,.08),
    0 0 12px rgba(52,211,153,.65);
  animation:headerOnlinePulse 2s ease-in-out infinite;
}

@keyframes headerOnlinePulse{
  0%,100%{
    opacity:1;
    transform:scale(1);
  }
  50%{
    opacity:.55;
    transform:scale(.82);
  }
}

/* ---------- FOOTER ---------- */

.footer{
  padding:68px 0 24px;
}

.footer-top{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  margin-bottom:48px;
}

.footer-brand-block{
  max-width:280px;
}

.footer-brand{
  font-size:18px;
  letter-spacing:-.045em;
}

.footer-description{
  max-width:260px;
  margin-top:12px;
  font-size:11px;
  line-height:1.7;
}

/* Навигация — все 4 раздела в один горизонтальный ряд */

.footer-navigation{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr)
    minmax(0,1fr)
    minmax(0,1fr);
  gap:20px;
  width:100%;
  padding:34px 0 38px;
  border-top:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.055);
}

.footer-column{
  min-width:0;
}

.footer-column-title{
  margin-bottom:17px;
  color:#8f8f9c;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.8px;
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-links a{
  width:max-content;
  max-width:100%;
  color:#62626f;
  font-size:11px;
  line-height:1.35;
  transition:
    color .2s ease,
    transform .2s ease;
}

.footer-links a:hover{
  color:#f1f1f5;
  transform:translateX(2px);
}

/* Юридическая навигация */

.footer-legal{
  padding:22px 0 20px;
}

.footer-legal-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
}

.footer-legal-links a{
  padding:0 15px;
  color:#555560;
  font-size:9px;
  line-height:1.5;
  transition:color .2s ease;
}

.footer-legal-links a + a{
  border-left:1px solid rgba(255,255,255,.07);
}

.footer-legal-links a:hover{
  color:#b8b8c4;
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.04);
  color:#44444e;
  font-size:8px;
  letter-spacing:1px;
}

.footer-bottom strong{
  color:#696974;
}

/* ---------- TABLET ---------- */

@media(max-width:1100px){

  .header-online-status{
    padding:7px 10px;
  }

  .footer{
    padding:60px 0 24px;
  }

  .footer-top{
    margin-bottom:36px;
  }

  .footer-navigation{
    gap:15px;
  }

  .footer-links a{
    font-size:10px;
  }

}

/* ---------- MOBILE ---------- */

@media(max-width:900px){

  .header-online-status{
    order:2;
  }

  .nav-links{
    order:3;
  }

  .nav-actions{
    order:4;
  }

  .footer-top{
    display:block;
    margin-bottom:30px;
  }

  .footer-brand-block{
    max-width:100%;
  }

  .footer-description{
    max-width:430px;
  }

  .footer-navigation{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 24px;
  }

}

@media(max-width:600px){

  .header-online-status{
    padding:6px 8px;
    gap:6px;
    font-size:7px;
    letter-spacing:1px;
  }

  .header-online-dot{
    width:5px;
    height:5px;
    flex-basis:5px;
  }

  .footer{
    padding:52px 0 86px;
  }

  .footer-top{
    margin-bottom:28px;
  }

  .footer-brand{
    font-size:17px;
  }

  .footer-description{
    font-size:11px;
    line-height:1.65;
  }

  .footer-navigation{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px 18px;
    padding:28px 0;
  }

  .footer-column-title{
    margin-bottom:13px;
    font-size:8px;
  }

  .footer-links{
    gap:9px;
  }

  .footer-links a{
    font-size:10px;
  }

  .footer-legal{
    padding:20px 0 18px;
  }

  .footer-legal-links{
    justify-content:flex-start;
  }

  .footer-legal-links a{
    padding:6px 10px;
    font-size:8px;
  }

  .footer-legal-links a:first-child{
    padding-left:0;
  }

  .footer-legal-links a + a{
    border-left:0;
  }

  .footer-bottom{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    padding-top:16px;
  }

}

@media(max-width:380px){

  .header-online-status span:last-child{
    display:none;
  }

  .header-online-status{
    width:24px;
    height:24px;
    padding:0;
    justify-content:center;
  }

  .footer-navigation{
    grid-template-columns:1fr 1fr;
    gap:25px 14px;
  }

  .footer-links a{
    font-size:9px;
  }

}


/* =========================================================
   SILA ZVUKA AI — HEADER / FOOTER FINAL OVERRIDE V1
========================================================= */

/* ---------- HEADER: логотип + статус ---------- */

.logo{
  flex-shrink:0;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
}

.logo-text{
  line-height:1;
}

.header-online-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
  order:0;
  padding:6px 10px;
  border:1px solid rgba(52,211,153,.18);
  border-radius:999px;
  background:rgba(52,211,153,.045);
  color:#858591;
  font-size:7px;
  font-weight:900;
  line-height:1;
  letter-spacing:1.25px;
  white-space:nowrap;
}

.header-online-dot{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#34d399;
  box-shadow:
    0 0 0 3px rgba(52,211,153,.08),
    0 0 12px rgba(52,211,153,.65);
  animation:pulse-dot 2s infinite;
}

/* ---------- HEADER: правильный порядок ---------- */

.nav{
  align-items:center;
}

.logo + .header-online-status{
  margin-left:2px;
}

/* ---------- FOOTER BRAND ---------- */

.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  margin-bottom:34px;
}

.footer-top .footer-brand{
  flex-shrink:0;
}

.footer-top .footer-description{
  max-width:520px;
  margin:0;
}

/* ---------- FOOTER LEGAL + COPYRIGHT ---------- */

.footer-legal{
  margin-top:0;
  padding:18px 0 0;
}

.footer-legal-links{
  justify-content:flex-start;
}

.footer-bottom{
  margin-top:0;
  padding-top:18px;
}

/* На ПК юридические ссылки и copyright компактно в одну линию */

@media(min-width:901px){
  .footer-legal{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
  }

  .footer-legal-links{
    flex-wrap:nowrap;
    justify-content:flex-start;
  }

  .footer-bottom{
    flex:0 0 auto;
    margin:0;
    padding:0;
    border-top:0;
  }

  .footer-bottom span:last-child{
    display:none;
  }
}

/* ---------- TABLET ---------- */

@media(max-width:900px){
  .logo{
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
  }

  .header-online-status{
    order:0;
  }

  .footer-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:25px;
    margin-bottom:30px;
  }

  .footer-top .footer-description{
    max-width:430px;
    margin:0;
  }
}

/* ---------- MOBILE ---------- */

@media(max-width:600px){
  .nav{
    gap:10px;
  }

  .logo{
    min-width:0;
    flex-shrink:1;
  }

  .logo-text{
    white-space:nowrap;
  }

  .header-online-status{
    margin-left:0;
    padding:5px 8px;
    gap:5px;
    font-size:6.5px;
    letter-spacing:.9px;
  }

  .header-online-dot{
    width:5px;
    height:5px;
    flex-basis:5px;
  }

  /* Не даём главному контенту получать горизонтальный overflow */
  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  .container{
    max-width:100%;
  }

  .footer-top{
    display:block;
    margin-bottom:26px;
  }

  .footer-top .footer-description{
    max-width:100%;
    margin-top:10px;
  }

  .footer-legal{
    margin-top:0;
    padding-top:16px;
  }
}

/* ---------- VERY SMALL MOBILE ---------- */

@media(max-width:380px){
  .header-online-status{
    width:auto;
    height:auto;
    padding:5px 7px;
  }

  .header-online-status span:last-child{
    display:inline;
  }
}


/* =========================================================
   SILA ZVUKA AI — FOOTER LEGAL FINAL
========================================================= */

/* Убираем второе AI, которое старый CSS добавлял через ::after */
.footer-brand::after{
  content:none !important;
  display:none !important;
}

/* Компактная нижняя строка футера */
.footer-bottom-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.045);
}

/* Копирайт */
.footer-copyright{
  flex:0 0 auto;
  color:#44444e;
  font-size:8px;
  line-height:1.4;
  letter-spacing:.7px;
  white-space:nowrap;
}

.footer-copyright strong{
  color:#696974;
}

/* Юридические ссылки */
.footer-bottom-row .footer-legal-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
  gap:0;
  margin:0;
  padding:0;
}

.footer-bottom-row .footer-legal-links a{
  padding:0 12px;
  color:#555560;
  font-size:8px;
  line-height:1.4;
  white-space:nowrap;
}

.footer-bottom-row .footer-legal-links a:first-child{
  padding-left:0;
}

.footer-bottom-row .footer-legal-links a:last-child{
  padding-right:0;
}

.footer-bottom-row .footer-legal-links a + a{
  border-left:1px solid rgba(255,255,255,.06);
}

.footer-bottom-row .footer-legal-links a:hover{
  color:#b8b8c4;
}

/* ---------- MOBILE ---------- */
@media(max-width:900px){
  .footer-bottom-row{
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    margin-top:20px;
    padding-top:16px;
  }

  .footer-bottom-row .footer-legal-links{
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:8px 0;
  }

  .footer-bottom-row .footer-legal-links a{
    padding:0 9px;
    font-size:8px;
  }

  .footer-bottom-row .footer-legal-links a:first-child{
    padding-left:0;
  }

  .footer-bottom-row .footer-legal-links a:last-child{
    padding-right:9px;
  }
}

@media(max-width:600px){
  .footer-bottom-row{
    gap:12px;
  }

  .footer-bottom-row .footer-legal-links{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .footer-bottom-row .footer-legal-links a{
    font-size:8px;
    line-height:1.5;
  }
}


/* =========================================================
   СИЛА ЗВУКА AI — HEADER RESPONSIVE FINAL
   ПК / ПЛАНШЕТ / МОБИЛЬНЫЙ
   Футер не затрагивается
========================================================= */

/* ---------- БАЗА ---------- */

.site-header .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-width:0;
}

.site-header .logo{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:11px;
  flex:0 0 auto;
  min-width:0;
}

.site-header .logo-mark{
  flex:0 0 38px;
}

.site-header .logo-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
  gap:5px;
}

.site-header .logo-text{
  white-space:nowrap;
  line-height:1;
}

.site-header .header-online-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  margin:0;
  border:1px solid rgba(52,211,153,.18);
  border-radius:999px;
  background:rgba(52,211,153,.045);
  color:#858591;
  font-size:7px;
  font-weight:900;
  line-height:1;
  letter-spacing:1.1px;
  white-space:nowrap;
}

.site-header .header-online-dot{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#34d399;
  box-shadow:
    0 0 0 3px rgba(52,211,153,.08),
    0 0 12px rgba(52,211,153,.65);
  animation:pulse-dot 2s infinite;
}

.site-header .nav-links{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}

.site-header .nav-actions{
  flex:0 0 auto;
}

/* ---------- ПЛАНШЕТ ---------- */

@media (max-width:1100px) and (min-width:901px){

  .site-header .nav{
    gap:16px;
  }

  .site-header .logo{
    gap:9px;
  }

  .site-header .logo-mark{
    flex-basis:36px;
    width:36px;
    height:36px;
  }

  .site-header .logo-text{
    font-size:14px;
  }

  .site-header .header-online-status{
    padding:4px 8px;
    font-size:6.5px;
    letter-spacing:.9px;
  }

  .site-header .nav-links{
    gap:14px;
    font-size:11px;
  }

  .site-header .nav-actions{
    gap:6px;
  }

  .site-header .nav-account{
    font-size:10px;
  }

  .site-header .nav-create{
    padding-left:12px;
    padding-right:12px;
  }
}

/* ---------- МОБИЛЬНЫЙ ---------- */

@media (max-width:900px){

  .site-header{
    width:100%;
    overflow:hidden;
  }

  .site-header .container{
    width:min(calc(100% - 28px),var(--container));
    max-width:100%;
  }

  .site-header .nav{
    width:100%;
    min-width:0;
    gap:10px;
  }

  .site-header .logo{
    flex:1 1 auto;
    min-width:0;
    gap:8px;
  }

  .site-header .logo-mark{
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:10px;
  }

  .site-header .logo-content{
    min-width:0;
    gap:4px;
  }

  .site-header .logo-text{
    font-size:13px;
    white-space:nowrap;
  }

  .site-header .header-online-status{
    padding:4px 7px;
    gap:5px;
    font-size:6px;
    letter-spacing:.8px;
  }

  .site-header .header-online-dot{
    width:5px;
    height:5px;
    flex-basis:5px;
  }

  .site-header .nav-links{
    display:none;
  }

  .site-header .nav-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
  }

  .site-header .nav-account,
  .site-header .nav-create{
    display:none;
  }

  .site-header .mobile-menu-button{
    flex:0 0 auto;
  }
}

/* ---------- ОЧЕНЬ УЗКИЕ ЭКРАНЫ ---------- */

@media (max-width:380px){

  .site-header .container{
    width:calc(100% - 20px);
  }

  .site-header .nav{
    gap:7px;
  }

  .site-header .logo{
    gap:7px;
  }

  .site-header .logo-mark{
    flex-basis:32px;
    width:32px;
    height:32px;
  }

  .site-header .logo-text{
    font-size:12px;
  }

  .site-header .header-online-status{
    padding:4px 6px;
    font-size:5.5px;
    letter-spacing:.6px;
  }
}


/* =========================================================
   SILA ZVUKA AI — HEADER MOBILE FIX V1
   Личный кабинет + меню + позиция ONLINE
   Футер НЕ затрагиваем
========================================================= */

/* ---------- ПК ---------- */

@media (min-width:1101px){
  .site-header .logo-content{
    transform:translateX(-5px);
  }

  .site-header .header-online-status{
    transform:translateX(-2px);
  }
}

/* ---------- ПЛАНШЕТ ---------- */

@media (max-width:1100px) and (min-width:901px){
  .site-header .logo-content{
    transform:translateX(-3px);
  }

  .site-header .header-online-status{
    transform:translateX(-1px);
  }
}

/* ---------- МОБИЛЬНЫЙ ---------- */

@media (max-width:900px){

  .site-header .logo-content{
    transform:translateX(-7px);
  }

  .site-header .header-online-status{
    transform:translateX(-4px);
  }

  /* Возвращаем кнопку меню */
  .site-header .mobile-menu-button{
    display:flex !important;
    position:relative;
    z-index:20;
    flex:0 0 auto;
    width:42px;
    height:42px;
    align-items:center;
    justify-content:center;
  }

  /* Возвращаем личный кабинет как компактную иконку */
  .site-header .nav-account{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    padding:0;
    flex:0 0 38px;
  }

  .site-header .nav-account > span:last-child{
    display:none;
  }

  .site-header .nav-account-icon{
    display:inline-flex !important;
    margin:0;
  }

  /* На телефоне не показываем большую кнопку "Создать трек" */
  .site-header .nav-create{
    display:none !important;
  }

  .site-header .nav-actions{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex:0 0 auto;
  }

  /* Ничего в шапке не должно выталкивать страницу вправо */
  .site-header .nav,
  .site-header .container{
    max-width:100%;
    overflow:visible;
  }
}

/* ---------- УЗКИЙ ТЕЛЕФОН ---------- */

@media (max-width:600px){

  .site-header .logo-content{
    transform:translateX(-8px);
  }

  .site-header .header-online-status{
    transform:translateX(-5px);
  }

  .site-header .nav-account{
    width:36px;
    height:36px;
    flex-basis:36px;
  }

  .site-header .mobile-menu-button{
    width:38px;
    height:38px;
  }

  .site-header .nav-actions{
    gap:4px;
  }
}

/* ---------- ОЧЕНЬ УЗКИЙ ТЕЛЕФОН ---------- */

@media (max-width:380px){

  .site-header .logo-content{
    transform:translateX(-9px);
  }

  .site-header .header-online-status{
    transform:translateX(-5px);
  }

  .site-header .logo-text{
    font-size:12px;
  }

  .site-header .nav-account{
    width:34px;
    height:34px;
    flex-basis:34px;
  }

  .site-header .mobile-menu-button{
    width:36px;
    height:36px;
  }
}


/* =========================================================
   SILA ZVUKA AI — HEADER CONTROLS FINAL
   Личный кабинет + мобильное меню
   Футер НЕ затрагиваем
========================================================= */

/* ---------- ПК ---------- */

@media (min-width:1181px){

  .site-header .logo-content{
    transform:translateX(-5px);
  }

  .site-header .header-online-status{
    transform:translateX(-2px);
  }

}

/* ---------- ПЛАНШЕТ ---------- */

@media (min-width:601px) and (max-width:1180px){

  .site-header .logo-content{
    transform:translateX(-5px);
  }

  .site-header .header-online-status{
    transform:translateX(-3px);
  }

  .site-header .mobile-menu-button{
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    cursor:pointer;
  }

}

/* ---------- МОБИЛЬНЫЙ ---------- */

@media (max-width:600px){

  .site-header .logo-content{
    transform:translateX(-8px);
  }

  .site-header .header-online-status{
    transform:translateX(-5px);
  }

  .site-header .nav-actions{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    flex-shrink:0;
    gap:5px;
  }

  /* Личный кабинет */
  .site-header .nav-account{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    flex:0 0 36px;
  }

  .site-header .nav-account > span:last-child{
    display:none !important;
  }

  .site-header .nav-account-icon{
    display:inline-flex !important;
    margin:0 !important;
  }

  /* Три полоски */
  .site-header .mobile-menu-button{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    padding:8px;
    flex:0 0 38px;
    cursor:pointer;
    position:relative;
    z-index:1001;
  }

  .site-header .mobile-menu-button span{
    display:block !important;
    width:20px;
    height:2px;
    margin:3px auto;
    background:#fff;
    border-radius:10px;
  }

  /* Большая кнопка создания в мобильной шапке не нужна */
  .site-header .nav-create{
    display:none !important;
  }

}

/* ---------- ОЧЕНЬ УЗКИЙ ТЕЛЕФОН ---------- */

@media (max-width:380px){

  .site-header .logo-content{
    transform:translateX(-9px);
  }

  .site-header .header-online-status{
    transform:translateX(-5px);
  }

  .site-header .nav-account{
    width:34px;
    height:34px;
    flex-basis:34px;
  }

  .site-header .mobile-menu-button{
    width:36px;
    height:36px;
    flex-basis:36px;
  }

}

/* ---------- МОБИЛЬНОЕ МЕНЮ ---------- */

@media (max-width:1180px){

  .site-header .mobile-menu{
    z-index:1000;
  }

}


/* =========================================================
   SILA ZVUKA AI — HEADER POSITION FINAL V2
   Только позиционирование. Футер НЕ трогаем.
========================================================= */

/* ---------- ПК ---------- */
@media (min-width:1181px){
  .site-header .logo-content{
    transform:translateX(0);
  }

  .site-header .header-online-status{
    transform:translateX(-5px);
  }
}

/* ---------- ПЛАНШЕТ ---------- */
@media (min-width:601px) and (max-width:1180px){
  .site-header .logo-content{
    transform:translateX(0);
  }

  .site-header .header-online-status{
    transform:translateX(-4px);
  }
}

/* ---------- МОБИЛЬНЫЙ ---------- */
@media (max-width:600px){
  /* Бренд возвращаем вправо */
  .site-header .logo-content{
    transform:translateX(0);
  }

  /* Только ONLINE уводим левее */
  .site-header .header-online-status{
    transform:translateX(-7px);
  }
}

/* ---------- ОЧЕНЬ УЗКИЙ ТЕЛЕФОН ---------- */
@media (max-width:380px){
  .site-header .logo-content{
    transform:translateX(0);
  }

  .site-header .header-online-status{
    transform:translateX(-7px);
  }
}

/* =========================================================
   SILA ZVUKA AI — ONLINE ALIGNMENT FINAL
   ONLINE начинается строго под буквой «С»
   Логотип / бренд / футер НЕ изменяем
========================================================= */

/* ---------- ПК ---------- */
@media (min-width:1181px){
  .site-header .logo-content{
    transform:translateX(0);
  }

  .site-header .header-online-status{
    transform:translateX(-5px);
  }
}

/* ---------- ПЛАНШЕТ ---------- */
@media (min-width:601px) and (max-width:1180px){
  .site-header .logo-content{
    transform:translateX(0);
  }

  .site-header .header-online-status{
    transform:translateX(-4px);
  }
}

/* ---------- МОБИЛЬНЫЙ ---------- */
@media (max-width:600px){
  .site-header .logo-content{
    transform:translateX(0);
  }

  .site-header .header-online-status{
    transform:translateX(-7px);
  }
}

/* ---------- ОЧЕНЬ УЗКИЙ ТЕЛЕФОН ---------- */
@media (max-width:380px){
  .site-header .logo-content{
    transform:translateX(0);
  }

  .site-header .header-online-status{
    transform:translateX(-7px);
  }
}


/* =========================================================
   СИЛА ЗВУКА AI — MOBILE MENU CLEAN V1
   Единый CSS мобильного меню.
   Нижняя навигация остаётся видимой.
========================================================= */

@media (max-width:1180px){

  /* Шапка не обрезает меню */
  .site-header{
    overflow:visible !important;
  }

  /* Кнопка ☰ */
  .site-header .mobile-menu-button{
    display:flex !important;
    align-items:center;
    justify-content:center;
    pointer-events:auto !important;
    touch-action:manipulation;
    cursor:pointer;
    position:relative;
    z-index:1002 !important;
  }

  /* Выпадающее меню */
  .site-header .mobile-menu{
    display:none !important;
    position:fixed !important;

    top:76px !important;
    left:14px !important;
    right:14px !important;
    bottom:92px !important;

    width:auto !important;
    height:auto !important;
    max-height:none !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    box-sizing:border-box !important;

    z-index:1001 !important;

    padding:0 !important;

    background:#101016 !important;
    color:#fff !important;

    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:20px !important;

    box-shadow:
      0 25px 80px rgba(0,0,0,.65),
      0 0 50px rgba(139,92,246,.12) !important;
  }

  /* Открытое меню */
  .site-header .mobile-menu.open{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  /* Содержимое */
  .site-header .mobile-menu-inner{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    box-sizing:border-box !important;
  }

  /* Нижняя мобильная навигация */
  .mobile-nav{
    display:flex !important;
    position:fixed !important;

    left:10px !important;
    right:10px !important;
    bottom:10px !important;

    z-index:150 !important;

    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .mobile-nav a{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  /* При открытом меню страницу не блокируем */
  body.mobile-menu-open{
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
}

/* ---------- ТЕЛЕФОН ---------- */

@media (max-width:600px){

  .site-header .mobile-menu{
    top:68px !important;
    left:8px !important;
    right:8px !important;
    bottom:88px !important;
    border-radius:18px !important;
  }

  .site-header .mobile-menu-inner{
    padding:16px !important;
  }

}

/* ---------- ОЧЕНЬ УЗКИЙ ТЕЛЕФОН ---------- */

@media (max-width:380px){

  .site-header .mobile-menu{
    top:64px !important;
    left:6px !important;
    right:6px !important;
    bottom:82px !important;
  }

  .site-header .mobile-menu-inner{
    padding:13px !important;
  }

}

/* =========================================================
   СИЛА ЗВУКА AI — MOBILE MENU REAL OPEN FIX V1
   Последнее правило имеет приоритет над всеми старыми патчами
========================================================= */

@media (max-width:1180px){

  .site-header .mobile-menu{
    display:none !important;
  }

  .site-header .mobile-menu.open{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    position:fixed !important;
    top:76px !important;
    left:14px !important;
    right:14px !important;
    bottom:92px !important;
    z-index:999999 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    background:#101016 !important;
  }

}

@media (max-width:600px){

  .site-header .mobile-menu.open{
    top:68px !important;
    left:8px !important;
    right:8px !important;
    bottom:88px !important;
  }

}

@media (max-width:380px){

  .site-header .mobile-menu.open{
    top:64px !important;
    left:6px !important;
    right:6px !important;
    bottom:82px !important;
  }

}


/* =========================================================
   СИЛА ЗВУКА AI — MOBILE MENU FINAL REAL FIX
   Открытие меню через класс .open
========================================================= */

@media (max-width:1180px){

  .site-header .mobile-menu{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;

    position:fixed !important;
    top:76px !important;
    left:14px !important;
    right:14px !important;
    bottom:92px !important;

    width:auto !important;
    height:auto !important;
    max-height:none !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    box-sizing:border-box !important;

    z-index:999999 !important;

    background:#101016 !important;
    color:#fff !important;

    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:20px !important;

    box-shadow:
      0 25px 80px rgba(0,0,0,.65),
      0 0 50px rgba(139,92,246,.12) !important;
  }

  .site-header .mobile-menu.open{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .site-header .mobile-menu-inner{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-height:100% !important;
    box-sizing:border-box !important;
    padding:20px !important;
  }

  .site-header .mobile-menu-button{
    display:flex !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    cursor:pointer !important;
    position:relative !important;
    z-index:1000000 !important;
  }

  .site-header .mobile-menu-close{
    pointer-events:auto !important;
    cursor:pointer !important;
  }

  .mobile-nav{
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    z-index:999998 !important;
  }

}

/* ---------- ТЕЛЕФОН ---------- */

@media (max-width:600px){

  .site-header .mobile-menu{
    top:68px !important;
    left:8px !important;
    right:8px !important;
    bottom:88px !important;
  }

  .site-header .mobile-menu-inner{
    padding:16px !important;
  }

}

/* ---------- ОЧЕНЬ УЗКИЙ ТЕЛЕФОН ---------- */

@media (max-width:380px){

  .site-header .mobile-menu{
    top:64px !important;
    left:6px !important;
    right:6px !important;
    bottom:82px !important;
  }

  .site-header .mobile-menu-inner{
    padding:13px !important;
  }

}

/* =========================================================
   СИЛА ЗВУКА AI — MOBILE NAV ONLY ON MOBILE
   ПК: нижнего мобильного меню нет.
   МОБИЛЬНЫЕ: существующее меню не изменяем.
========================================================= */
@media (min-width:901px){
  .mobile-nav{
    display:none !important;
  }
}

/* =========================================================
   FINAL — MOBILE BOTTOM NAV IS MOBILE ONLY
   Desktop/tablet >= 901px: completely removed.
   Mobile <= 900px: untouched.
========================================================= */
@media screen and (min-width: 901px) {
  body .mobile-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   DESKTOP HEADER — MOBILE MENU BUTTON HIDDEN
   ПК: показываем "Личный кабинет"
   МОБИЛЬНЫЕ: кнопка ☰ продолжает работать
========================================================= */

@media screen and (min-width: 901px) {
  .site-header .mobile-menu-button {
    display: none !important;
  }
}

/* =========================================================
   FINAL HEADER FIX
   На ПК и планшете: только Создать трек + Личный кабинет.
   Кнопка мобильного меню ☰ только на мобильных <= 900px.
========================================================= */
@media screen and (min-width: 901px) {
  .site-header .mobile-menu-button {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   СИЛА ЗВУКА AI — FINAL HEADER + MOBILE FOOTER
   Финальное позиционирование
========================================================= */

/* ---------- ШАПКА: ЛОГОТИП + ONLINE ---------- */

.site-header .logo{
  align-items:center;
}

.site-header .logo-content{
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  transform:none !important;
}

.site-header .logo-text{
  display:block;
  line-height:1;
  margin:0;
}

.site-header .header-online-status{
  align-self:flex-start;
  display:inline-flex;
  margin:0 !important;
  transform:none !important;
}

/* ---------- МОБИЛЬНАЯ ШАПКА ---------- */

@media (max-width:600px){
  .site-header .logo{
    align-items:center;
    gap:8px;
  }

  .site-header .logo-content{
    align-items:flex-start;
    gap:4px;
    transform:none !important;
  }

  .site-header .logo-text{
    font-size:13px;
    line-height:1;
  }

  .site-header .header-online-status{
    align-self:flex-start;
    padding:3px 7px;
    margin:0 !important;
    transform:none !important;
    font-size:6px;
    line-height:1;
  }
}

/* ---------- ОЧЕНЬ УЗКИЙ ТЕЛЕФОН ---------- */

@media (max-width:380px){
  .site-header .logo-content{
    transform:none !important;
    gap:3px;
  }

  .site-header .logo-text{
    font-size:12px;
  }

  .site-header .header-online-status{
    transform:none !important;
    padding:3px 6px;
    font-size:5.5px;
  }
}


/* =========================================================
   МОБИЛЬНЫЙ FOOTER — КОМПАКТНАЯ PREMIUM-СЕТКА
   Все существующие элементы сохраняются
========================================================= */

@media (max-width:600px){

  .footer{
    padding:42px 0 24px;
  }

  .footer-inner{
    width:min(calc(100% - 28px),var(--container));
    margin:0 auto;
  }

  .footer-top{
    display:block;
    margin-bottom:28px;
  }

  .footer-brand-block{
    width:100%;
    margin-bottom:25px;
  }

  .footer-brand{
    display:inline-flex;
    align-items:center;
    margin-bottom:10px;
    font-size:18px;
  }

  .footer-description{
    max-width:320px;
    margin:0;
    font-size:11px;
    line-height:1.55;
  }

  /* 4 колонки превращаем в аккуратную сетку 2 × 2 */
  .footer-navigation{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 18px;
    width:100%;
  }

  .footer-column{
    min-width:0;
  }

  .footer-column-title{
    margin-bottom:10px;
    font-size:9px;
    letter-spacing:1.5px;
    line-height:1.2;
  }

  .footer-links{
    display:flex;
    flex-direction:column;
    gap:7px;
  }

  .footer-links a{
    display:block;
    font-size:10px;
    line-height:1.35;
    white-space:normal;
  }

  /* Нижняя часть */
  .footer-bottom-row{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    margin-top:28px;
    padding-top:18px;
  }

  .footer-copyright{
    width:100%;
    font-size:9px;
    line-height:1.4;
  }

  .footer-legal-links{
    display:flex;
    flex-wrap:wrap;
    gap:7px 14px;
    width:100%;
  }

  .footer-legal-links a{
    font-size:9px;
    line-height:1.4;
  }
}

/* ---------- СОВСЕМ УЗКИЕ ТЕЛЕФОНЫ ---------- */

@media (max-width:380px){

  .footer{
    padding-top:36px;
  }

  .footer-navigation{
    gap:20px 14px;
  }

  .footer-column-title{
    font-size:8px;
  }

  .footer-links{
    gap:6px;
  }

  .footer-links a{
    font-size:9px;
  }

  .footer-description{
    font-size:10px;
  }

  .footer-legal-links{
    gap:6px 12px;
  }

  .footer-legal-links a{
    font-size:8px;
  }
}


/* =========================================================
   FINAL — STUDIO ONLINE РОВНО ПОД БУКВОЙ «С»
========================================================= */

.site-header .logo-content{
  transform:none !important;
  align-items:flex-start !important;
}

.site-header .header-online-status{
  position:relative !important;
  left:0 !important;
  margin-left:0 !important;
  transform:none !important;
  align-self:flex-start !important;
}

@media (max-width:600px){
  .site-header .logo-content{
    transform:none !important;
    align-items:flex-start !important;
  }

  .site-header .header-online-status{
    position:relative !important;
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
    align-self:flex-start !important;
  }
}

@media (max-width:380px){
  .site-header .logo-content{
    transform:none !important;
  }

  .site-header .header-online-status{
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
  }
}


/* =========================================================
   FINAL HEADER ALIGNMENT — ONLINE ПОД «С»
========================================================= */

.site-header .logo-content{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:4px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
}

.site-header .header-online-status{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:max-content !important;
  margin:0 !important;
  padding:4px 7px !important;
  transform:none !important;
  position:static !important;
}

@media (max-width:600px){
  .site-header .logo-content{
    align-items:flex-start !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }

  .site-header .header-online-status{
    margin:0 !important;
    transform:none !important;
    position:static !important;
  }
}

@media (max-width:380px){
  .site-header .logo-content{
    transform:none !important;
  }

  .site-header .header-online-status{
    transform:none !important;
  }
}


/* =========================================================
   FINAL — STUDIO ONLINE ТОЧНО ПОД БУКВОЙ «С»
   Перекрывает все предыдущие позиционирования
========================================================= */

.site-header .logo-content{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:4px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
}

.site-header .header-online-status{
  position:relative !important;
  left:0 !important;
  right:auto !important;
  margin:0 !important;
  padding:4px 7px !important;
  transform:none !important;
  align-self:flex-start !important;
  width:max-content !important;
}

/* Телефон */
@media (max-width:600px){
  .site-header .logo-content{
    position:relative !important;
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
  }

  .site-header .header-online-status{
    position:relative !important;
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
    align-self:flex-start !important;
  }
}

/* Узкий телефон */
@media (max-width:380px){
  .site-header .logo-content{
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
  }

  .site-header .header-online-status{
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
  }
}

/* =========================================================
   FINAL V2 — STUDIO ONLINE ПОД ПЕРВОЙ БУКВОЙ «С»
   Двигаем ТОЛЬКО индикатор, бренд не трогаем
========================================================= */

.site-header .header-online-status{
  position:relative !important;
  left:-18px !important;
  margin-left:0 !important;
  transform:none !important;
}

@media (max-width:600px){
  .site-header .header-online-status{
    left:-18px !important;
    margin-left:0 !important;
    transform:none !important;
  }
}

@media (max-width:380px){
  .site-header .header-online-status{
    left:-16px !important;
  }
}

/* =========================================================
   FINAL HEADER + TABLET FOOTER
   V3 — точная адаптация ПК / планшет / мобильный
========================================================= */

/* ---------- ПК ---------- */
@media (min-width:1181px){
  .site-header .header-online-status{
    left:3px !important;
    transform:none !important;
  }
}

/* ---------- ПЛАНШЕТ ---------- */
@media (min-width:601px) and (max-width:1180px){
  .site-header .header-online-status{
    left:3px !important;
    transform:none !important;
  }

  /* Футер как на ПК — 4 столбика в одну линию */
  .footer-top{
    display:grid !important;
    grid-template-columns:minmax(220px,1.3fr) repeat(4,minmax(110px,1fr)) !important;
    gap:30px !important;
    align-items:start !important;
  }

  .footer-brand-block{
    min-width:0 !important;
  }

  .footer-navigation{
    display:contents !important;
  }

  .footer-column{
    min-width:0 !important;
  }

  /* © слева + юридические ссылки справа */
  .footer-bottom-row{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:20px !important;
    flex-wrap:nowrap !important;
  }

  .footer-copyright{
    flex:0 0 auto !important;
  }

  .footer-bottom-row .footer-legal-links{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
    gap:18px !important;
    margin-left:auto !important;
    width:auto !important;
  }

  .footer-bottom-row .footer-legal-links a{
    white-space:nowrap !important;
  }
}

/* ---------- МОБИЛЬНЫЙ ---------- */
@media (max-width:600px){
  .site-header .header-online-status{
    left:-25px !important;
    transform:none !important;
  }
}

/* ---------- ОЧЕНЬ УЗКИЙ ---------- */
@media (max-width:380px){
  .site-header .header-online-status{
    left:-23px !important;
  }
}


/* =========================================================
   FINAL V4 — AI STUDIO ONLINE НАЧИНАЕТСЯ РОВНО ПОД «С»
   Никаких смещений всего logo-content
========================================================= */

.site-header .logo-content{
  position:relative !important;
  left:0 !important;
  margin-left:0 !important;
  transform:none !important;
}

.site-header .logo-text{
  position:relative !important;
  left:0 !important;
  margin-left:0 !important;
  transform:none !important;
}

.site-header .header-online-status{
  position:relative !important;
  left:0 !important;
  margin-left:0 !important;
  align-self:flex-start !important;
  transform:none !important;
}

/* Одинаковое начало на всех экранах */
@media (min-width:601px){
  .site-header .logo-content,
  .site-header .logo-text,
  .site-header .header-online-status{
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
  }
}

@media (max-width:600px){
  .site-header .logo-content,
  .site-header .logo-text,
  .site-header .header-online-status{
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
  }
}

@media (max-width:380px){
  .site-header .logo-content,
  .site-header .logo-text,
  .site-header .header-online-status{
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
  }
}


/* =========================================================
   FINAL V5
   ПК + ПЛАНШЕТ ШАПКА НЕ ТРОГАЕМ
   Мобильная шапка + планшетный футер
========================================================= */

/* =========================================================
   МОБИЛЬНАЯ ШАПКА
   AI STUDIO ONLINE — ровно от начала «С»
========================================================= */
@media (max-width:600px){

  .site-header .logo-content{
    position:relative !important;
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
  }

  .site-header .logo-text{
    position:relative !important;
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
  }

  .site-header .header-online-status{
    position:relative !important;
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
    align-self:flex-start !important;
  }

}

/* =========================================================
   ПЛАНШЕТНЫЙ FOOTER
   Полностью возвращаем структуру ПК
========================================================= */
@media (min-width:601px) and (max-width:1180px){

  .footer-top{
    display:grid !important;
    grid-template-columns:1.25fr 1fr 1fr 1fr 1fr !important;
    gap:40px !important;
    align-items:start !important;
    margin-bottom:50px !important;
  }

  .footer-brand-block{
    min-width:0 !important;
  }

  .footer-navigation{
    display:contents !important;
    width:auto !important;
  }

  .footer-column{
    min-width:0 !important;
  }

  .footer-column-title{
    white-space:nowrap !important;
  }

  .footer-links{
    display:flex !important;
    flex-direction:column !important;
  }

  .footer-links a{
    white-space:nowrap !important;
  }

  /* Нижняя строка — как на ПК */
  .footer-bottom-row{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
    gap:30px !important;
    width:100% !important;
  }

  .footer-copyright{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  .footer-bottom-row .footer-legal-links{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
    gap:20px !important;
    width:auto !important;
    margin-left:auto !important;
  }

  .footer-bottom-row .footer-legal-links a{
    white-space:nowrap !important;
  }

}

/* =========================================================
   УЗКИЙ ПЛАНШЕТ
   Чуть уменьшаем расстояния, сохраняя одну строку
========================================================= */
@media (min-width:601px) and (max-width:850px){

  .footer-top{
    grid-template-columns:1.15fr repeat(4,minmax(85px,1fr)) !important;
    gap:18px !important;
  }

  .footer-links a{
    font-size:10px !important;
  }

  .footer-column-title{
    font-size:9px !important;
  }

  .footer-bottom-row{
    gap:15px !important;
  }

  .footer-bottom-row .footer-legal-links{
    gap:12px !important;
  }

  .footer-bottom-row .footer-legal-links a{
    font-size:9px !important;
  }

}


/* =========================================================
   FINAL V6
   МОБИЛЬНЫЙ ONLINE — НАЧАЛО РОВНО ПОД «С»
   ПК / ПЛАНШЕТ НЕ ТРОГАЕМ
========================================================= */

@media (max-width:600px){

  .site-header .logo-content{
    position:relative !important;
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
  }

  .site-header .logo-text{
    position:relative !important;
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
  }

  .site-header .header-online-status{
    position:relative !important;

    /* Начало индикатора ровно с начала текста «СИЛА...» */
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;

    align-self:flex-start !important;
    width:max-content !important;
  }

}

/* =========================================================
   ПЛАНШЕТНЫЙ FOOTER
   601–1180px = ТОЧНО ТА ЖЕ ЛОГИКА, ЧТО И ПК
   Бренд слева + 4 колонки в одну линию
========================================================= */

@media (min-width:601px) and (max-width:1180px){

  .footer-top{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:30px !important;
    margin-bottom:48px !important;
  }

  .footer-brand-block{
    flex:0 0 220px !important;
    max-width:220px !important;
  }

  .footer-navigation{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    align-items:start !important;
    flex:1 1 auto !important;
    width:auto !important;
    gap:25px !important;
  }

  .footer-column{
    min-width:0 !important;
  }

  .footer-column-title{
    white-space:nowrap !important;
  }

  .footer-links{
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
  }

  .footer-links a{
    white-space:nowrap !important;
  }

  /* Нижняя строка — как на ПК */
  .footer-bottom-row{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
    gap:30px !important;
    width:100% !important;
  }

  .footer-copyright{
    width:auto !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  .footer-bottom-row .footer-legal-links{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
    width:auto !important;
    margin-left:auto !important;
    gap:0 !important;
  }

  .footer-bottom-row .footer-legal-links a{
    white-space:nowrap !important;
  }

}

/* =========================================================
   УЗКИЙ ПЛАНШЕТ
   Сохраняем одну линию, только уменьшаем расстояния
========================================================= */

@media (min-width:601px) and (max-width:850px){

  .footer-top{
    gap:20px !important;
  }

  .footer-brand-block{
    flex-basis:190px !important;
    max-width:190px !important;
  }

  .footer-navigation{
    gap:14px !important;
  }

  .footer-links a{
    font-size:9px !important;
  }

  .footer-column-title{
    font-size:8px !important;
  }

  .footer-bottom-row{
    gap:18px !important;
  }

  .footer-bottom-row .footer-legal-links a{
    padding-left:8px !important;
    padding-right:8px !important;
    font-size:7px !important;
  }

}


/* =========================================================
   FINAL — AI STUDIO ONLINE
   Весь бейдж начинается ровно под буквой «С»
   ПК / ПЛАНШЕТ / МОБИЛЬНЫЙ
========================================================= */

.site-header .header-online-status{
  position:relative !important;
  left:0 !important;
  right:auto !important;
  margin-left:0 !important;
  transform:none !important;
  align-self:flex-start !important;

  /* аккуратно уменьшаем ВЕСЬ бейдж */
  padding:3px 6px !important;
  gap:5px !important;
  font-size:6px !important;
  line-height:1 !important;
  letter-spacing:.7px !important;
  width:max-content !important;
}

/* Зелёная точка тоже чуть компактнее */
.site-header .header-online-dot{
  width:4px !important;
  height:4px !important;
  flex:0 0 4px !important;
}

/* ---------- ПК ---------- */
@media (min-width:1181px){
  .site-header .header-online-status{
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
  }
}

/* ---------- ПЛАНШЕТ ---------- */
@media (min-width:601px) and (max-width:1180px){
  .site-header .header-online-status{
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
  }
}

/* ---------- МОБИЛЬНЫЙ ---------- */
@media (max-width:600px){
  .site-header .header-online-status{
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;

    padding:3px 5px !important;
    gap:4px !important;
    font-size:5.5px !important;
    letter-spacing:.6px !important;
  }

  .site-header .header-online-dot{
    width:4px !important;
    height:4px !important;
    flex-basis:4px !important;
  }
}

/* ---------- ОЧЕНЬ УЗКИЙ ТЕЛЕФОН ---------- */
@media (max-width:380px){
  .site-header .header-online-status{
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
    padding:3px 5px !important;
    font-size:5.2px !important;
  }
}


/* =========================================================
   FINAL — AI STUDIO ONLINE
   ПЛАНШЕТ + МОБИЛЬНЫЙ
   Левый край бейджа = начало буквы «С»
   ПК НЕ ТРОГАЕМ
========================================================= */

/* ---------- ПЛАНШЕТ ---------- */
@media (min-width:601px) and (max-width:1180px){
  .site-header .header-online-status{
    position:relative !important;
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;

    /* немного уменьшаем весь бейдж */
    padding:3px 6px !important;
    gap:4px !important;
    font-size:5.5px !important;
    letter-spacing:.6px !important;
    line-height:1 !important;
  }

  .site-header .header-online-dot{
    width:4px !important;
    height:4px !important;
    flex:0 0 4px !important;
  }
}

/* ---------- МОБИЛЬНЫЙ ---------- */
@media (max-width:600px){
  .site-header .header-online-status{
    position:relative !important;

    /* подводим ЛЕВЫЙ КРАЙ бейджа к началу «С» */
    left:-18px !important;

    margin-left:0 !important;
    transform:none !important;
    align-self:flex-start !important;

    /* компактный premium-размер */
    padding:3px 5px !important;
    gap:4px !important;
    font-size:5.5px !important;
    letter-spacing:.6px !important;
    line-height:1 !important;
  }

  .site-header .header-online-dot{
    width:4px !important;
    height:4px !important;
    flex:0 0 4px !important;
  }
}

/* ---------- ОЧЕНЬ УЗКИЙ МОБИЛЬНЫЙ ---------- */
@media (max-width:380px){
  .site-header .header-online-status{
    left:-16px !important;
    padding:3px 5px !important;
    font-size:5.2px !important;
    letter-spacing:.5px !important;
  }
}


/* =========================================================
   FINAL V2 — ТОЧНАЯ КОРРЕКЦИЯ AI STUDIO ONLINE
   ПК НЕ ТРОГАЕМ
========================================================= */

/* ---------- ПЛАНШЕТ ---------- */
@media (min-width:601px) and (max-width:1180px){
  .site-header .header-online-status{
    padding:2.5px 5px !important;
    gap:4px !important;
    font-size:5px !important;
    letter-spacing:.5px !important;
  }

  .site-header .header-online-dot{
    width:4px !important;
    height:4px !important;
    flex-basis:4px !important;
  }
}

/* ---------- МОБИЛЬНЫЙ ---------- */
@media (max-width:600px){
  .site-header .header-online-status{
    left:-28px !important;
    margin-left:0 !important;
    transform:none !important;
    padding:3px 5px !important;
    gap:4px !important;
    font-size:5.5px !important;
    letter-spacing:.6px !important;
  }
}

/* ---------- УЗКИЙ МОБИЛЬНЫЙ ---------- */
@media (max-width:380px){
  .site-header .header-online-status{
    left:-26px !important;
  }
}


/* =========================================================
   FINAL V3 — AI STUDIO ONLINE
   ТОЧНАЯ ФИНАЛЬНАЯ КОРРЕКЦИЯ
========================================================= */

/* ---------- ПЛАНШЕТ ---------- */
@media (min-width:601px) and (max-width:1180px){
  .site-header .header-online-status{
    padding:2px 4px !important;
    gap:3px !important;
    font-size:4.7px !important;
    letter-spacing:.45px !important;
    line-height:1 !important;
  }

  .site-header .header-online-dot{
    width:3.5px !important;
    height:3.5px !important;
    flex-basis:3.5px !important;
  }
}

/* ---------- МОБИЛЬНЫЙ ---------- */
@media (max-width:600px){
  .site-header .header-online-status{
    left:-38px !important;
    margin-left:0 !important;
    transform:none !important;
  }
}

/* ---------- УЗКИЙ МОБИЛЬНЫЙ ---------- */
@media (max-width:380px){
  .site-header .header-online-status{
    left:-36px !important;
  }
}


/* =========================================================
   FINAL — МОБИЛЬНЫЙ FOOTER COMPACT PREMIUM V1
   Только мобильная версия <=600px
   Шапка / ПК / планшет НЕ ТРОГАЕМ
========================================================= */

@media (max-width:600px){

  .footer{
    padding:30px 0 18px !important;
  }

  .footer .container{
    width:calc(100% - 28px) !important;
    max-width:none !important;
  }

  /* Бренд + описание */
  .footer-top{
    display:block !important;
    margin:0 0 22px !important;
  }

  .footer-brand{
    font-size:16px !important;
    line-height:1 !important;
    margin:0 0 7px !important;
  }

  .footer-description{
    max-width:300px !important;
    margin:0 !important;
    font-size:9px !important;
    line-height:1.45 !important;
  }

  /* 4 раздела — компактная сетка 2×2 */
  .footer-navigation{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:19px 24px !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
  }

  .footer-column{
    min-width:0 !important;
  }

  .footer-column-title{
    margin:0 0 7px !important;
    font-size:7px !important;
    line-height:1.1 !important;
    letter-spacing:1.2px !important;
  }

  .footer-links{
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
    margin:0 !important;
  }

  .footer-links a{
    display:block !important;
    font-size:9px !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
  }

  /* Нижняя линия */
  .footer-bottom-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
    margin-top:20px !important;
    padding-top:12px !important;
  }

  .footer-copyright{
    width:auto !important;
    font-size:7px !important;
    line-height:1.3 !important;
    white-space:nowrap !important;
  }

  .footer-bottom-row .footer-legal-links{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:4px 0 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .footer-bottom-row .footer-legal-links a{
    font-size:7px !important;
    line-height:1.3 !important;
    padding:0 7px !important;
    white-space:nowrap !important;
  }

  .footer-bottom-row .footer-legal-links a:first-child{
    padding-left:0 !important;
  }

  /* Очень тонкая разделительная линия */
  .footer-bottom-row{
    border-top:1px solid rgba(255,255,255,.045) !important;
  }
}

/* =========================================================
   ОЧЕНЬ УЗКИЙ ТЕЛЕФОН
========================================================= */

@media (max-width:380px){

  .footer{
    padding:26px 0 16px !important;
  }

  .footer .container{
    width:calc(100% - 22px) !important;
  }

  .footer-top{
    margin-bottom:19px !important;
  }

  .footer-brand{
    font-size:15px !important;
  }

  .footer-description{
    font-size:8.5px !important;
    max-width:280px !important;
  }

  .footer-navigation{
    gap:16px 18px !important;
  }

  .footer-column-title{
    font-size:6.5px !important;
    margin-bottom:6px !important;
  }

  .footer-links{
    gap:4px !important;
  }

  .footer-links a{
    font-size:8.5px !important;
  }

  .footer-bottom-row{
    margin-top:17px !important;
    padding-top:10px !important;
    gap:7px !important;
  }

  .footer-copyright{
    font-size:6.5px !important;
  }

  .footer-bottom-row .footer-legal-links a{
    font-size:6.5px !important;
    padding-left:5px !important;
    padding-right:5px !important;
  }

  .footer-bottom-row .footer-legal-links a:first-child{
    padding-left:0 !important;
  }
}


/* =========================================================
   FINAL V2 — МОБИЛЬНЫЙ FOOTER
   Компактный бренд + центрированные колонки + чистые ссылки
   ПК / ПЛАНШЕТ / ШАПКА НЕ ТРОГАЕМ
========================================================= */

@media (max-width:600px){

  /* ---------- БРЕНД + ОПИСАНИЕ ---------- */

  .footer-top{
    margin-bottom:15px !important;
  }

  .footer-brand{
    margin-bottom:5px !important;
    font-size:15px !important;
    line-height:1 !important;
  }

  .footer-description{
    max-width:270px !important;
    font-size:8.5px !important;
    line-height:1.35 !important;
  }

  /* ---------- 4 КОЛОНКИ ---------- */

  .footer-navigation{
    grid-template-columns:repeat(2, minmax(105px, 1fr)) !important;
    justify-content:center !important;
    justify-items:center !important;
    align-items:start !important;
    column-gap:28px !important;
    row-gap:13px !important;
    width:100% !important;
    max-width:330px !important;
    margin:0 auto !important;
  }

  .footer-column{
    width:100% !important;
    min-width:0 !important;
    text-align:center !important;
  }

  .footer-column-title{
    margin-bottom:6px !important;
    text-align:center !important;
    font-size:7px !important;
  }

  .footer-links{
    align-items:center !important;
    gap:4px !important;
  }

  .footer-links a{
    text-align:center !important;
    font-size:8.5px !important;
    line-height:1.2 !important;
  }

  /* ---------- НИЖНЯЯ ЧАСТЬ ---------- */

  .footer-bottom-row{
    margin-top:15px !important;
    padding-top:10px !important;
    gap:6px !important;
    border-top:1px solid rgba(255,255,255,.045) !important;
  }

  .footer-copyright{
    font-size:6.5px !important;
  }

  /* Юридические ссылки — БЕЗ РАМОК И ВЕРТИКАЛЬНЫХ РАЗДЕЛИТЕЛЕЙ */

  .footer-bottom-row .footer-legal-links{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:3px 10px !important;
    width:100% !important;
  }

  .footer-bottom-row .footer-legal-links a{
    padding:0 !important;
    border:0 !important;
    font-size:6.5px !important;
    line-height:1.25 !important;
  }

  .footer-bottom-row .footer-legal-links a + a{
    border-left:0 !important;
  }

}

/* ---------- ОЧЕНЬ УЗКИЙ ТЕЛЕФОН ---------- */

@media (max-width:380px){

  .footer-top{
    margin-bottom:13px !important;
  }

  .footer-brand{
    font-size:14px !important;
    margin-bottom:4px !important;
  }

  .footer-description{
    max-width:250px !important;
    font-size:8px !important;
    line-height:1.3 !important;
  }

  .footer-navigation{
    grid-template-columns:repeat(2, minmax(95px, 1fr)) !important;
    max-width:300px !important;
    column-gap:18px !important;
    row-gap:10px !important;
  }

  .footer-column-title{
    font-size:6.5px !important;
    margin-bottom:5px !important;
  }

  .footer-links{
    gap:3px !important;
  }

  .footer-links a{
    font-size:8px !important;
  }

  .footer-bottom-row{
    margin-top:13px !important;
    padding-top:9px !important;
  }

  .footer-bottom-row .footer-legal-links{
    gap:3px 8px !important;
  }

  .footer-bottom-row .footer-legal-links a{
    font-size:6px !important;
  }
}


/* =========================================================
   FINAL V3 — МОБИЛЬНЫЙ FOOTER
   Центрирование содержимого + компактный верх +
   copyright и legal в одну строку
   ПК / ПЛАНШЕТ / ШАПКА НЕ ТРОГАЕМ
========================================================= */

@media (max-width:600px){

  /* ---------- КОМПАКТНЫЙ ВЕРХ ---------- */

  .footer{
    padding-top:20px !important;
  }

  .footer-top{
    margin-top:0 !important;
    margin-bottom:14px !important;
    text-align:center !important;
  }

  .footer-brand{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    margin:0 0 4px !important;
    font-size:15px !important;
    line-height:1 !important;
    text-align:center !important;
  }

  .footer-description{
    margin:0 auto !important;
    max-width:270px !important;
    font-size:8.5px !important;
    line-height:1.3 !important;
    text-align:center !important;
  }

  /* ---------- СТОЛБИКИ ---------- */

  .footer-navigation{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(105px,1fr)) !important;
    justify-items:center !important;
    align-items:start !important;
    justify-content:center !important;
    max-width:330px !important;
    margin:0 auto !important;
    column-gap:28px !important;
    row-gap:11px !important;
  }

  .footer-column{
    width:100% !important;
    text-align:center !important;
  }

  .footer-column-title{
    width:100% !important;
    margin:0 0 6px !important;
    text-align:center !important;
  }

  .footer-links{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    gap:4px !important;
    text-align:center !important;
  }

  .footer-links a{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    white-space:nowrap !important;
    font-size:8.5px !important;
    line-height:1.2 !important;
  }

  /* ---------- COPYRIGHT + ЮРИДИЧЕСКИЕ ССЫЛКИ ---------- */

  .footer-bottom-row{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    width:100% !important;
    margin-top:13px !important;
    padding-top:9px !important;

    /* никакого окна вокруг нижней строки */
    border-top:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:0 !important;
  }

  .footer-copyright{
    width:auto !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
    font-size:6.2px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .footer-bottom-row .footer-legal-links{
    display:flex !important;
    flex:0 1 auto !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    gap:7px !important;

    /* полностью убираем оформление контейнера */
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:0 !important;
  }

  .footer-bottom-row .footer-legal-links a{
    display:inline !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:0 !important;
    font-size:6.1px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .footer-bottom-row .footer-legal-links a + a{
    border-left:0 !important;
  }

}

/* ---------- УЗКИЙ ТЕЛЕФОН ---------- */

@media (max-width:380px){

  .footer{
    padding-top:18px !important;
  }

  .footer-top{
    margin-bottom:12px !important;
  }

  .footer-brand{
    font-size:14px !important;
  }

  .footer-description{
    max-width:245px !important;
    font-size:7.8px !important;
    line-height:1.25 !important;
  }

  .footer-navigation{
    grid-template-columns:repeat(2,minmax(95px,1fr)) !important;
    max-width:300px !important;
    column-gap:18px !important;
    row-gap:9px !important;
  }

  .footer-column-title{
    font-size:6.5px !important;
    margin-bottom:5px !important;
  }

  .footer-links{
    gap:3px !important;
  }

  .footer-links a{
    font-size:8px !important;
  }

  .footer-bottom-row{
    gap:5px !important;
    margin-top:11px !important;
    padding-top:7px !important;
  }

  .footer-copyright{
    font-size:5.7px !important;
  }

  .footer-bottom-row .footer-legal-links{
    gap:5px !important;
  }

  .footer-bottom-row .footer-legal-links a{
    font-size:5.6px !important;
  }
}


/* =========================================================
   FINAL V4 — МОБИЛЬНЫЙ FOOTER CLEAN PREMIUM
   Никаких обрезаний / рамок / кривых строк
   ПК и планшет НЕ ТРОГАЕМ
========================================================= */

@media (max-width:600px){

  /* ---------- ВЕРХ ФУТЕРА ---------- */

  .footer{
    padding-top:16px !important;
    padding-bottom:16px !important;
  }

  .footer-top{
    margin-top:0 !important;
    margin-bottom:12px !important;
    text-align:center !important;
  }

  .footer-brand-block{
    margin-bottom:12px !important;
    text-align:center !important;
  }

  .footer-brand{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    margin:0 0 4px !important;
    font-size:14px !important;
    line-height:1 !important;
  }

  .footer-description{
    max-width:270px !important;
    margin:0 auto !important;
    font-size:8px !important;
    line-height:1.3 !important;
    text-align:center !important;
  }

  /* ---------- 4 КОЛОНКИ ---------- */

  .footer-navigation{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    max-width:310px !important;
    margin:0 auto !important;
    column-gap:14px !important;
    row-gap:12px !important;
    padding:0 !important;
  }

  .footer-column{
    min-width:0 !important;
    text-align:center !important;
  }

  .footer-column-title{
    width:100% !important;
    margin:0 0 5px !important;
    text-align:center !important;
    font-size:7px !important;
    line-height:1.1 !important;
    letter-spacing:1.2px !important;
  }

  .footer-links{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:3px !important;
    width:100% !important;
  }

  .footer-links a{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    font-size:8px !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }

  /* ---------- НИЖНЯЯ ЧАСТЬ ---------- */

  .footer-bottom-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    margin:12px 0 0 !important;
    padding:8px 0 0 !important;
    gap:7px !important;

    border-top:1px solid rgba(255,255,255,.045) !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
  }

  /* ---------- COPYRIGHT ---------- */

  .footer-copyright{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    white-space:normal !important;
    font-size:6.5px !important;
    line-height:1.3 !important;
    color:#44444e !important;
  }

  .footer-copyright strong{
    color:#696974 !important;
  }

  /* Добавляем "все права защищены" аккуратно */
  .footer-copyright::after{
    content:" — все права защищены." !important;
    color:#44444e !important;
  }

  /* ---------- ЮРИДИЧЕСКИЕ ССЫЛКИ ---------- */

  .footer-bottom-row .footer-legal-links{
    display:grid !important;
    grid-template-columns:repeat(2,max-content) !important;
    justify-content:center !important;
    align-items:center !important;
    column-gap:12px !important;
    row-gap:4px !important;

    width:100% !important;
    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
  }

  .footer-bottom-row .footer-legal-links a{
    display:block !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;

    text-align:center !important;
    font-size:6.2px !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
  }

  .footer-bottom-row .footer-legal-links a + a{
    border-left:0 !important;
  }

}

/* =========================================================
   ОЧЕНЬ УЗКИЙ ТЕЛЕФОН
========================================================= */

@media (max-width:380px){

  .footer{
    padding-top:14px !important;
    padding-bottom:14px !important;
  }

  .footer-top{
    margin-bottom:10px !important;
  }

  .footer-brand-block{
    margin-bottom:10px !important;
  }

  .footer-brand{
    font-size:13px !important;
    margin-bottom:3px !important;
  }

  .footer-description{
    max-width:245px !important;
    font-size:7.5px !important;
    line-height:1.25 !important;
  }

  .footer-navigation{
    max-width:285px !important;
    column-gap:10px !important;
    row-gap:10px !important;
  }

  .footer-column-title{
    font-size:6.5px !important;
    margin-bottom:4px !important;
  }

  .footer-links{
    gap:3px !important;
  }

  .footer-links a{
    font-size:7.5px !important;
  }

  .footer-bottom-row{
    margin-top:10px !important;
    padding-top:7px !important;
    gap:6px !important;
  }

  .footer-copyright{
    font-size:6px !important;
  }

  .footer-bottom-row .footer-legal-links{
    column-gap:9px !important;
    row-gap:3px !important;
  }

  .footer-bottom-row .footer-legal-links a{
    font-size:5.7px !important;
  }

}


/* =========================================================
   FINAL V5 — MOBILE FOOTER COPYRIGHT + LEGAL
========================================================= */

@media (max-width:600px){

  /* ---------- COPYRIGHT ---------- */

  .footer-copyright{
    font-size:6.5px !important;
    line-height:1.3 !important;
    white-space:nowrap !important;
  }

  /* Убираем добавляемую CSS-фразу — текст будет только один раз */
  .footer-copyright::after{
    content:none !important;
    display:none !important;
  }

  /* ---------- ЮРИДИЧЕСКИЕ ССЫЛКИ 2 × 2 ---------- */

  .footer-bottom-row .footer-legal-links{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto auto !important;
    width:100% !important;
    max-width:300px !important;
    margin:0 auto !important;
    padding:0 !important;

    column-gap:12px !important;
    row-gap:4px !important;

    justify-content:stretch !important;
    align-items:center !important;

    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
  }

  .footer-bottom-row .footer-legal-links a{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    background:none !important;
    box-shadow:none !important;
    outline:none !important;

    font-size:6.2px !important;
    line-height:1.3 !important;
    white-space:nowrap !important;
  }

  /* Левая колонка */
  .footer-bottom-row .footer-legal-links a:nth-child(1),
  .footer-bottom-row .footer-legal-links a:nth-child(3){
    text-align:right !important;
  }

  /* Правая колонка */
  .footer-bottom-row .footer-legal-links a:nth-child(2),
  .footer-bottom-row .footer-legal-links a:nth-child(4){
    text-align:left !important;
  }

  .footer-bottom-row .footer-legal-links a + a{
    border-left:0 !important;
  }
}

/* ---------- ОЧЕНЬ УЗКИЙ ТЕЛЕФОН ---------- */

@media (max-width:380px){

  .footer-copyright{
    font-size:5.8px !important;
  }

  .footer-bottom-row .footer-legal-links{
    max-width:280px !important;
    column-gap:9px !important;
    row-gap:3px !important;
  }

  .footer-bottom-row .footer-legal-links a{
    font-size:5.5px !important;
  }
}


/* =========================================================
   FINAL V6 — FOOTER LEGAL ALIGNMENT
========================================================= */

/* Во всех версиях — компактный copyright */
.footer-copyright{
  letter-spacing:.2px !important;
}

/* ---------- МОБИЛЬНЫЙ ---------- */
@media (max-width:600px){

  /* Убираем лишнее пространство перед нижним блоком */
  .footer-bottom-row{
    margin-top:7px !important;
    padding-top:5px !important;
    gap:5px !important;
  }

  /* Юридические ссылки — две ровные колонки */
  .footer-bottom-row .footer-legal-links{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;

    width:100% !important;
    max-width:300px !important;

    margin:0 auto !important;
    padding:0 !important;

    column-gap:12px !important;
    row-gap:3px !important;

    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .footer-bottom-row .footer-legal-links a{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    background:transparent !important;

    font-size:6.2px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }

  /* Левая колонка */
  .footer-bottom-row .footer-legal-links a:nth-child(1),
  .footer-bottom-row .footer-legal-links a:nth-child(3){
    text-align:right !important;
  }

  /* Правая колонка */
  .footer-bottom-row .footer-legal-links a:nth-child(2),
  .footer-bottom-row .footer-legal-links a:nth-child(4){
    text-align:left !important;
  }

}

/* ---------- ОЧЕНЬ УЗКИЙ ТЕЛЕФОН ---------- */
@media (max-width:380px){

  .footer-bottom-row{
    margin-top:6px !important;
    padding-top:4px !important;
    gap:4px !important;
  }

  .footer-bottom-row .footer-legal-links{
    max-width:280px !important;
    column-gap:9px !important;
    row-gap:2px !important;
  }

  .footer-bottom-row .footer-legal-links a{
    font-size:5.5px !important;
  }

}


/* =========================================================
   FINAL V7 — FOOTER LEGAL ORDER
   Правильная сетка:
   Пользовательское соглашение | AI-политика
   Политика конфиденциальности | Карта сайта
========================================================= */

@media (max-width:600px){

  .footer-bottom-row{
    margin-top:5px !important;
    padding-top:4px !important;
    gap:4px !important;
  }

  .footer-bottom-row .footer-legal-links{
    display:grid !important;

    /* две одинаковые колонки */
    grid-template-columns:1fr 1fr !important;

    /* две строки */
    grid-template-rows:auto auto !important;

    width:100% !important;
    max-width:310px !important;

    margin:0 auto !important;
    padding:0 !important;

    column-gap:14px !important;
    row-gap:3px !important;

    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
  }

  .footer-bottom-row .footer-legal-links a{
    display:block !important;

    width:100% !important;
    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    background:none !important;
    box-shadow:none !important;

    font-size:6px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }

  /* 
     Меняем визуальный порядок:
     1 = Пользовательское соглашение
     2 = Политика конфиденциальности
     3 = AI-политика
     4 = Карта сайта
  */

  .footer-bottom-row .footer-legal-links a:nth-child(1){
    grid-column:1 !important;
    grid-row:1 !important;
    text-align:right !important;
  }

  .footer-bottom-row .footer-legal-links a:nth-child(2){
    grid-column:1 !important;
    grid-row:2 !important;
    text-align:right !important;
  }

  .footer-bottom-row .footer-legal-links a:nth-child(3){
    grid-column:2 !important;
    grid-row:1 !important;
    text-align:left !important;
  }

  .footer-bottom-row .footer-legal-links a:nth-child(4){
    grid-column:2 !important;
    grid-row:2 !important;
    text-align:left !important;
  }

  .footer-bottom-row .footer-legal-links a + a{
    border-left:0 !important;
  }

  /* Никакого дополнительного оформления у copyright */
  .footer-copyright::after{
    content:none !important;
    display:none !important;
  }

}

/* ---------- ОЧЕНЬ УЗКИЙ ТЕЛЕФОН ---------- */

@media (max-width:380px){

  .footer-bottom-row{
    margin-top:4px !important;
    padding-top:3px !important;
    gap:3px !important;
  }

  .footer-bottom-row .footer-legal-links{
    max-width:285px !important;
    column-gap:10px !important;
    row-gap:2px !important;
  }

  .footer-bottom-row .footer-legal-links a{
    font-size:5.5px !important;
  }

}


/* =========================================================
   FINAL V8 — LEGAL LINKS COMPACT
   Возвращаем прежнее расположение.
   Меняем только размер и расстояния.
========================================================= */

@media (max-width:600px){

  .footer-bottom-row{
    margin-top:6px !important;
    padding-top:5px !important;
    gap:5px !important;
  }

  .footer-bottom-row .footer-legal-links{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;

    width:100% !important;
    max-width:310px !important;

    margin:0 auto !important;
    padding:0 !important;

    gap:3px 10px !important;

    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
  }

  .footer-bottom-row .footer-legal-links a{
    display:inline-block !important;
    width:auto !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;

    font-size:6.2px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    text-align:center !important;
  }

  .footer-bottom-row .footer-legal-links a + a{
    border-left:0 !important;
  }

  /* Убираем любые старые принудительные grid-позиции */
  .footer-bottom-row .footer-legal-links a:nth-child(1),
  .footer-bottom-row .footer-legal-links a:nth-child(2),
  .footer-bottom-row .footer-legal-links a:nth-child(3),
  .footer-bottom-row .footer-legal-links a:nth-child(4){
    grid-column:auto !important;
    grid-row:auto !important;
    text-align:center !important;
  }

  /* Не добавляем второе "все права защищены" */
  .footer-copyright::after{
    content:none !important;
    display:none !important;
  }

}

/* ---------- УЗКИЙ ТЕЛЕФОН ---------- */

@media (max-width:380px){

  .footer-bottom-row{
    margin-top:5px !important;
    padding-top:4px !important;
    gap:4px !important;
  }

  .footer-bottom-row .footer-legal-links{
    max-width:285px !important;
    gap:2px 8px !important;
  }

  .footer-bottom-row .footer-legal-links a{
    font-size:5.7px !important;
  }

}

/* =========================================================
   FINAL V8 — FOOTER MICRO CLEANUP
   Только нижний отступ + copyright
========================================================= */

/* ---------- ВСЕ ВЕРСИИ ---------- */
.footer-copyright{
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
}

/* ---------- МОБИЛЬНЫЙ ---------- */
@media (max-width:600px){
  .footer{
    padding-bottom:8px !important;
  }

  .footer-bottom-row{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  .footer-bottom-row .footer-legal-links{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  .footer-bottom-row .footer-legal-links a{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  /* Убираем искусственно добавленный пробел/разрыв */
  .footer-copyright::after{
    content:none !important;
    display:none !important;
  }
}

/* ---------- ОЧЕНЬ УЗКИЙ ТЕЛЕФОН ---------- */
@media (max-width:380px){
  .footer{
    padding-bottom:7px !important;
  }

  .footer-bottom-row{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  .footer-bottom-row .footer-legal-links{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }
}

/* =========================================================
   PREMIUM POLISH V1 — HEADER
   CINEMATIC MUSIC PRO × ULTRA MINIMAL
   Структура и функциональность НЕ меняются
========================================================= */

.site-header{
  position:relative !important;
  background:rgba(8,8,12,.72) !important;
  border-bottom:1px solid rgba(255,255,255,.055) !important;
  backdrop-filter:blur(18px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(125%) !important;
  box-shadow:0 10px 40px rgba(0,0,0,.18) !important;
}

.site-header::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-1px !important;
  height:1px !important;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(214,178,92,.08) 20%,
    rgba(214,178,92,.42) 50%,
    rgba(214,178,92,.08) 80%,
    transparent 100%
  ) !important;
  pointer-events:none !important;
}

.site-header .nav{
  position:relative !important;
}

.site-header .logo{
  transition:opacity .25s ease,transform .25s ease !important;
}

.site-header .logo:hover{
  opacity:.94 !important;
  transform:translateY(-1px) !important;
}

.site-header .logo-text{
  letter-spacing:.02em !important;
}

.site-header .logo-text span{
  color:#d6b25c !important;
  text-shadow:0 0 18px rgba(214,178,92,.18) !important;
}

.site-header .header-online-status{
  border:1px solid rgba(214,178,92,.16) !important;
  background:rgba(214,178,92,.035) !important;
  box-shadow:
    0 0 18px rgba(214,178,92,.06),
    inset 0 0 12px rgba(255,255,255,.018) !important;
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease !important;
}

.site-header .header-online-status:hover{
  border-color:rgba(214,178,92,.30) !important;
  background:rgba(214,178,92,.055) !important;
  box-shadow:0 0 22px rgba(214,178,92,.11) !important;
}

.site-header .header-online-dot{
  box-shadow:0 0 8px rgba(100,220,150,.65) !important;
}

.site-header .nav-links a{
  position:relative !important;
  transition:
    color .22s ease,
    opacity .22s ease !important;
}

.site-header .nav-links a::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:-7px !important;
  width:0 !important;
  height:1px !important;
  transform:translateX(-50%) !important;
  background:linear-gradient(
    90deg,
    transparent,
    #d6b25c,
    transparent
  ) !important;
  transition:width .25s ease !important;
}

.site-header .nav-links a:hover::after,
.site-header .nav-links a.active::after{
  width:70% !important;
}

.site-header .nav-create{
  box-shadow:
    0 8px 24px rgba(0,0,0,.22),
    0 0 20px rgba(214,178,92,.08) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease !important;
}

.site-header .nav-create:hover{
  transform:translateY(-2px) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.28),
    0 0 26px rgba(214,178,92,.14) !important;
}

.site-header .nav-account{
  transition:
    color .22s ease,
    opacity .22s ease,
    transform .22s ease !important;
}

.site-header .nav-account:hover{
  transform:translateY(-1px) !important;
}

.site-header .nav-account-icon{
  transition:
    color .22s ease,
    filter .22s ease !important;
}

.site-header .nav-account:hover .nav-account-icon{
  color:#d6b25c !important;
  filter:drop-shadow(0 0 6px rgba(214,178,92,.18)) !important;
}

@media (max-width:600px){
  .site-header{
    background:rgba(8,8,12,.82) !important;
    backdrop-filter:blur(16px) saturate(120%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(120%) !important;
  }

  .site-header::after{
    background:linear-gradient(
      90deg,
      transparent,
      rgba(214,178,92,.28),
      transparent
    ) !important;
  }
}


/* ============================================================
   MOBILE LEGAL LINKS — COOKIE IN SAME LINE
   ============================================================ */
@media (max-width: 767px) {
  .footer-legal-links {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .footer-legal-links::-webkit-scrollbar {
    display: none;
  }

  .footer-legal-links a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ============================================================
   FINAL MOBILE LEGAL LINKS — ONE SINGLE LINE
   ============================================================ */
@media (max-width:767px){
  .footer-bottom-row .footer-legal-links{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    width:100% !important;
    max-width:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;
    gap:10px !important;
    padding:0 4px !important;
    margin:0 auto !important;
    scrollbar-width:none !important;
  }

  .footer-bottom-row .footer-legal-links::-webkit-scrollbar{
    display:none !important;
  }

  .footer-bottom-row .footer-legal-links a{
    flex:0 0 auto !important;
    width:auto !important;
    white-space:nowrap !important;
  }
}

/* FINAL — slight right shift for mobile legal links */
@media (max-width:767px){
  .footer-bottom-row .footer-legal-links{
    padding-left:12px !important;
  }
}

/* =========================================================
   CREATE STUDIO — PREMIUM POLISH V1
   СИЛА ЗВУКА AI
========================================================= */

.showcase{
  gap:20px;
  align-items:stretch;
}

.showcase-cover{
  min-height:500px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:26px;
  background:
    radial-gradient(
      circle at 28% 22%,
      rgba(157,140,255,.16),
      transparent 28%
    ),
    radial-gradient(
      circle at 76% 78%,
      rgba(214,178,92,.10),
      transparent 30%
    ),
    radial-gradient(
      circle at 52% 48%,
      rgba(255,255,255,.035),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #17151f 0%,
      #0d0d13 52%,
      #09090d 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 22px 60px rgba(0,0,0,.30);
}

.showcase-cover::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(214,178,92,.055),
      transparent 32%
    );
  pointer-events:none;
}

.showcase-cover::after{
  opacity:.55;
  background:
    linear-gradient(
      115deg,
      transparent 28%,
      rgba(255,255,255,.10) 48%,
      rgba(214,178,92,.08) 52%,
      transparent 72%
    );
}

.showcase-cover-symbol{
  position:relative;
  z-index:3;
  width:116px;
  height:116px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0;
  color:#d6b25c;
  border:1px solid rgba(214,178,92,.24);
  border-radius:30px;
  background:
    linear-gradient(
      145deg,
      rgba(214,178,92,.10),
      rgba(157,140,255,.055)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 0 0 8px rgba(214,178,92,.018),
    0 22px 55px rgba(0,0,0,.32),
    0 0 35px rgba(214,178,92,.06);
}

.showcase-cover-symbol svg{
  width:62px;
  height:62px;
  overflow:visible;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 8px 18px rgba(214,178,92,.12));
}

.showcase-info{
  position:relative;
  overflow:hidden;
  padding:42px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:26px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018) 55%,
      rgba(255,255,255,.010)
    ),
    rgba(10,10,15,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 22px 60px rgba(0,0,0,.26);
}

.showcase-info::before{
  content:"";
  position:absolute;
  top:0;
  left:12%;
  right:12%;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(214,178,92,.42),
    transparent
  );
  pointer-events:none;
}

.track-label{
  color:#d6b25c;
  font-size:9px;
  letter-spacing:.20em;
}

.track-title{
  color:#f7f5f8;
  font-weight:850;
  letter-spacing:-.045em;
}

.track-meta{
  color:#88848f;
  letter-spacing:.02em;
}

.player{
  margin-top:34px;
}

.player-progress{
  height:3px;
  background:rgba(255,255,255,.085);
}

.player-progress span{
  background:
    linear-gradient(
      90deg,
      #8f7cff,
      #d6b25c
    );
  box-shadow:0 0 14px rgba(214,178,92,.12);
}

.player-controls{
  gap:15px;
  margin-top:19px;
}

.play-button{
  width:52px;
  height:52px;
  flex:none;
  border:1px solid rgba(214,178,92,.34);
  background:
    linear-gradient(
      145deg,
      rgba(214,178,92,.14),
      rgba(214,178,92,.055)
    );
  color:#d6b25c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 12px 30px rgba(0,0,0,.25);
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.play-button:hover{
  transform:translateY(-2px);
  border-color:rgba(214,178,92,.58);
  background:
    linear-gradient(
      145deg,
      rgba(214,178,92,.20),
      rgba(214,178,92,.075)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 16px 34px rgba(0,0,0,.30),
    0 0 22px rgba(214,178,92,.08);
}

.play-button svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

.player-controls strong{
  color:#f3f1f5;
  font-size:12px;
  letter-spacing:.02em;
}

.player-time{
  margin-top:4px;
  color:#706c77;
  font-size:9px;
  letter-spacing:.10em;
}

.showcase-info .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}

.showcase-info .btn svg{
  width:16px;
  height:16px;
  flex:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:900px){
  .showcase{
    grid-template-columns:1fr;
    gap:16px;
  }

  .showcase-cover{
    min-height:360px;
  }

  .showcase-info{
    padding:34px;
  }
}

@media(max-width:600px){
  .showcase{
    gap:12px;
  }

  .showcase-cover{
    min-height:285px;
    border-radius:22px;
  }

  .showcase-info{
    padding:25px 22px;
    border-radius:22px;
  }

  .showcase-cover-symbol{
    width:88px;
    height:88px;
    border-radius:23px;
  }

  .showcase-cover-symbol svg{
    width:52px;
    height:52px;
  }

  .track-title{
    font-size:clamp(30px,9vw,42px);
  }

  .player{
    margin-top:28px;
  }

  .play-button{
    width:48px;
    height:48px;
  }

  .showcase-info .btn{
    width:100%;
  }
}


/* =========================================================
   POSSIBILITIES — PREMIUM POLISH V1
   СИЛА ЗВУКА AI
========================================================= */

.feature-grid{
  gap:18px;
}

.feature-card{
  position:relative;
  overflow:hidden;
  min-height:218px;
  padding:30px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:22px;
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(214,178,92,.055),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.018)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 18px 45px rgba(0,0,0,.18);
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.feature-card::before{
  content:"";
  position:absolute;
  top:0;
  left:24px;
  right:24px;
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(214,178,92,.32),
      transparent
    );
  opacity:.65;
}

.feature-card:hover{
  transform:translateY(-4px);
  border-color:rgba(214,178,92,.17);
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(214,178,92,.085),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.02)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 24px 55px rgba(0,0,0,.28);
}

.feature-icon{
  position:relative;
  width:48px;
  height:48px;
  margin-bottom:25px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#d6b25c;
  background:
    linear-gradient(
      145deg,
      rgba(214,178,92,.11),
      rgba(214,178,92,.045)
    );
  border:1px solid rgba(214,178,92,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 10px 25px rgba(0,0,0,.16);
  font-size:0;
}

.feature-icon::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.025);
  pointer-events:none;
}

.feature-icon svg{
  width:21px;
  height:21px;
  overflow:visible;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  filter:drop-shadow(
    0 5px 12px rgba(214,178,92,.10)
  );
}

.feature-card h3{
  position:relative;
  margin:0;
  color:#f5f3f7;
  font-size:17px;
  font-weight:750;
  line-height:1.25;
  letter-spacing:-.025em;
}

.feature-card p{
  position:relative;
  max-width:330px;
  margin-top:11px;
  color:#85818c;
  font-size:12px;
  line-height:1.7;
  letter-spacing:.005em;
}

@media (max-width:900px){
  .feature-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }

  .feature-card{
    min-height:205px;
    padding:26px;
  }
}

@media (max-width:600px){
  .feature-grid{
    grid-template-columns:1fr;
    gap:13px;
  }

  .feature-card{
    min-height:0;
    padding:24px;
    border-radius:20px;
  }

  .feature-card:hover{
    transform:none;
  }

  .feature-icon{
    width:46px;
    height:46px;
    margin-bottom:20px;
  }

  .feature-card h3{
    font-size:16px;
  }

  .feature-card p{
    max-width:none;
    font-size:12px;
    line-height:1.65;
  }
}


/* =========================================================
   SHOWCASE — PREMIUM POLISH V1
   Cinematic Music Pro + Ultra Minimal + Luxury Gold
========================================================= */

.showcase{
  gap:20px;
  align-items:stretch;
}

.showcase-cover{
  min-height:500px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 28% 22%, rgba(216,180,90,.10), transparent 30%),
    radial-gradient(circle at 72% 78%, rgba(212,175,55,.12), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.035), transparent 55%),
    linear-gradient(145deg,#17131f 0%,#09090d 58%,#111019 100%);
  box-shadow:
    0 30px 80px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.045);
}

.showcase-cover::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,.045);
  border-radius:calc(var(--radius-xl) - 10px);
  pointer-events:none;
}

.showcase-cover::after{
  opacity:.55;
}

.showcase-cover-symbol{
  display:grid;
  place-items:center;
  width:118px;
  height:118px;
  border-radius:50%;
  color:#d8b45a;
  background:
    radial-gradient(circle,rgba(216,180,90,.09),transparent 68%);
  border:1px solid rgba(216,180,90,.18);
  box-shadow:
    0 0 70px rgba(216,180,90,.08),
    inset 0 0 35px rgba(216,180,90,.035);
  filter:none;
}

.showcase-cover-symbol svg{
  width:62px;
  height:62px;
  display:block;
  overflow:visible;
  color:currentColor;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.showcase-info{
  min-height:500px;
  padding:42px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:var(--radius-xl);
  background:
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),
    rgba(10,10,14,.78);
  box-shadow:
    0 30px 80px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(18px);
}

.track-label{
  color:#d8b45a;
  font-size:9px;
  letter-spacing:.22em;
}

.track-title{
  margin-top:12px;
  font-weight:850;
  letter-spacing:-.055em;
}

.track-meta{
  margin-top:12px;
  color:#858594;
  letter-spacing:.01em;
}

.player{
  margin-top:38px;
}

.player-progress{
  height:3px;
  background:rgba(255,255,255,.08);
}

.player-progress span{
  background:
    linear-gradient(90deg,#b98a32 0%,#d8b45a 55%,#f3d98a 100%);
  box-shadow:0 0 14px rgba(216,180,90,.18);
}

.player-controls{
  gap:16px;
  margin-top:18px;
}

.play-button{
  flex:0 0 52px;
  width:52px;
  height:52px;
  border:1px solid rgba(216,180,90,.38);
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.08),transparent 45%),
    rgba(216,180,90,.10);
  color:#e1c16d;
  box-shadow:
    0 12px 35px rgba(0,0,0,.28),
    0 0 28px rgba(216,180,90,.08);
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.play-button:hover{
  transform:translateY(-2px);
  border-color:rgba(216,180,90,.65);
  background:rgba(216,180,90,.16);
}

.play-button svg{
  width:18px;
  height:18px;
  display:block;
  color:currentColor;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.player-time{
  margin-top:4px;
  color:#686875;
}

@media (max-width:900px){
  .showcase{
    grid-template-columns:1fr;
  }

  .showcase-cover,
  .showcase-info{
    min-height:420px;
  }
}

@media (max-width:600px){
  .showcase{
    gap:14px;
  }

  .showcase-cover{
    min-height:300px;
  }

  .showcase-cover::before{
    inset:12px;
  }

  .showcase-cover-symbol{
    width:92px;
    height:92px;
  }

  .showcase-cover-symbol svg{
    width:50px;
    height:50px;
  }

  .showcase-info{
    min-height:auto;
    padding:28px 22px;
  }

  .track-title{
    font-size:34px;
  }

  .player{
    margin-top:30px;
  }
}


/* ============================================================
   HOW IT WORKS / PROCESS — PREMIUM POLISH V1
============================================================ */

.process-grid{
  gap:18px;
  align-items:stretch;
}

.process-card{
  position:relative;
  min-height:238px;
  padding:30px;
  overflow:hidden;

  border:1px solid rgba(255,255,255,.075);
  border-radius:22px;

  background:
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),
    rgba(10,10,14,.72);

  box-shadow:
    0 24px 65px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.045);

  backdrop-filter:blur(16px);

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.process-card::before{
  content:"";
  position:absolute;
  top:0;
  left:24px;
  right:24px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(216,180,90,.45),
      transparent
    );

  opacity:.7;
}

.process-card:hover{
  transform:translateY(-4px);

  border-color:rgba(216,180,90,.18);

  box-shadow:
    0 32px 80px rgba(0,0,0,.38),
    0 0 35px rgba(216,180,90,.035),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.process-number{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:6px 10px;

  border:1px solid rgba(216,180,90,.18);
  border-radius:8px;

  background:rgba(216,180,90,.055);

  color:#d8b45a;

  font-size:9px;
  font-weight:850;
  letter-spacing:.18em;
}

.process-card h3{
  margin-top:42px;

  color:#f2f1f5;

  font-size:18px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.025em;
}

.process-card p{
  margin-top:10px;

  max-width:260px;

  color:#858594;

  font-size:11px;
  line-height:1.75;
}

@media (max-width:900px){
  .process-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }

  .process-card{
    min-height:220px;
  }
}

@media (max-width:600px){
  .process-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .process-card{
    min-height:auto;
    padding:26px 22px;
  }

  .process-card:hover{
    transform:none;
  }

  .process-card h3{
    margin-top:34px;
    font-size:17px;
  }

  .process-card p{
    max-width:none;
  }
}


/* ============================================================
   PRICING — PREMIUM POLISH V1
============================================================ */

.pricing-grid{
  gap:18px;
  align-items:stretch;
}

.price-card{
  display:flex;
  flex-direction:column;
  min-height:470px;
  padding:32px;

  border:1px solid rgba(255,255,255,.075);
  border-radius:22px;

  background:
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),
    rgba(10,10,14,.72);

  box-shadow:
    0 24px 65px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.045);

  backdrop-filter:blur(16px);

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.price-card:hover{
  transform:translateY(-4px);

  border-color:rgba(216,180,90,.18);

  box-shadow:
    0 32px 80px rgba(0,0,0,.38),
    0 0 35px rgba(216,180,90,.035),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.price-card::before{
  content:"";
  position:absolute;
  top:0;
  left:24px;
  right:24px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(216,180,90,.35),
      transparent
    );

  opacity:.65;
}

.price-card.featured{
  border-color:rgba(216,180,90,.30);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(216,180,90,.10),
      transparent 42%
    ),
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
    rgba(10,10,14,.80);

  box-shadow:
    0 30px 80px rgba(0,0,0,.34),
    0 0 45px rgba(216,180,90,.045),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.price-card.featured::before{
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(216,180,90,.70),
      transparent
    );

  opacity:.9;
}

.price-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;

  min-height:27px;
  padding:6px 10px;

  border:1px solid rgba(216,180,90,.18);
  border-radius:8px;

  background:rgba(216,180,90,.055);

  color:#d8b45a;

  font-size:9px;
  font-weight:850;
  letter-spacing:.18em;
}

.price-card.featured .price-badge{
  border-color:rgba(216,180,90,.32);
  background:rgba(216,180,90,.09);
  color:#e1c16d;
}

.price-card h3{
  margin-top:20px;

  color:#f2f1f5;

  font-size:21px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.03em;
}

.price{
  margin:22px 0 24px;

  color:#f5f4f7;

  font-size:45px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.065em;
}

.price-list{
  flex:1;

  margin:0 0 28px;
  padding:0;

  color:#858594;

  font-size:11px;
  line-height:1.5;
}

.price-list li{
  position:relative;

  padding:9px 0 9px 22px;

  border-bottom:1px solid rgba(255,255,255,.045);
}

.price-list li:last-child{
  border-bottom:none;
}

.price-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;

  width:7px;
  height:4px;

  border-left:1px solid #d8b45a;
  border-bottom:1px solid #d8b45a;

  transform:rotate(-45deg);

  color:transparent;
}

.price-card .btn{
  width:100%;
  min-height:48px;
}

.price-card.featured .btn{
  border-color:rgba(216,180,90,.35);
  background:
    linear-gradient(
      135deg,
      rgba(216,180,90,.16),
      rgba(216,180,90,.07)
    );
  color:#e1c16d;
}

.price-card.featured .btn:hover{
  border-color:rgba(216,180,90,.58);
  background:rgba(216,180,90,.14);
}

@media (max-width:900px){
  .pricing-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }

  .price-card{
    min-height:450px;
  }

  .price-card:last-child{
    grid-column:1 / -1;
    max-width:calc(50% - 8px);
    width:100%;
    justify-self:center;
  }
}

@media (max-width:600px){
  .pricing-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .price-card,
  .price-card:last-child{
    grid-column:auto;
    max-width:none;
    min-height:auto;
    width:100%;
    padding:28px 22px;
  }

  .price-card:hover{
    transform:none;
  }

  .price{
    font-size:42px;
  }
}


/* ============================================================
   CTA — PREMIUM POLISH V1
============================================================ */

.cta{
  position:relative;
  overflow:hidden;

  padding:92px 30px;

  border:1px solid rgba(216,180,90,.18);
  border-radius:26px;

  text-align:center;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(216,180,90,.10),
      transparent 42%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(216,180,90,.075),
      transparent 38%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,.025),
      transparent 58%
    ),
    linear-gradient(145deg,#111018 0%,#09090d 62%,#0f0e14 100%);

  box-shadow:
    0 30px 85px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.cta::before{
  content:"";
  position:absolute;
  inset:16px;

  border:1px solid rgba(255,255,255,.045);
  border-radius:20px;

  pointer-events:none;
}

.cta::after{
  content:"";
  position:absolute;
  top:-35%;
  left:50%;

  width:420px;
  height:220px;

  transform:translateX(-50%);

  background:radial-gradient(
    ellipse,
    rgba(216,180,90,.07),
    transparent 70%
  );

  pointer-events:none;
}

.cta h2,
.cta p,
.cta .section-kicker,
.cta .btn{
  position:relative;
  z-index:2;
}

.cta .section-kicker{
  color:#d8b45a;
  font-size:9px;
  font-weight:850;
  letter-spacing:.22em;
}

.cta h2{
  margin-top:12px;

  color:#f3f2f6;

  font-size:clamp(36px,6vw,64px);
  font-weight:850;
  line-height:.98;
  letter-spacing:-.06em;
}

.cta p{
  max-width:560px;
  margin:20px auto 30px;

  color:#858594;

  font-size:13px;
  line-height:1.75;
}

.cta .btn-large{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  min-height:54px;
  padding:0 26px;

  border:1px solid rgba(216,180,90,.32);
  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      rgba(216,180,90,.15),
      rgba(216,180,90,.055)
    );

  color:#e1c16d;

  box-shadow:
    0 14px 40px rgba(0,0,0,.25),
    0 0 28px rgba(216,180,90,.055);

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.cta .btn-large:hover{
  transform:translateY(-2px);

  border-color:rgba(216,180,90,.58);

  background:rgba(216,180,90,.13);

  box-shadow:
    0 18px 48px rgba(0,0,0,.32),
    0 0 35px rgba(216,180,90,.09);
}

.cta-btn-icon{
  width:17px;
  height:17px;

  display:block;
  flex:0 0 17px;

  color:currentColor;

  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width:600px){
  .cta{
    padding:68px 20px;
    border-radius:22px;
  }

  .cta::before{
    inset:11px;
    border-radius:16px;
  }

  .cta h2{
    font-size:38px;
  }

  .cta p{
    margin-top:18px;
    margin-bottom:26px;
    font-size:12px;
  }

  .cta .btn-large{
    width:100%;
    min-height:52px;
    padding:0 18px;
  }

  .cta .btn-large:hover{
    transform:none;
  }
}


/* ============================================================
   GRADIENT TEXT — LUXURY GOLD V1
   ============================================================ */

.gradient-text{
  background:
    linear-gradient(
      100deg,
      #f3d98a 0%,
      #d8b45a 42%,
      #fff0b3 68%,
      #b98a32 100%
    );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 28px rgba(216,180,90,.08);
}