/*
Theme Name: SAXOtherapy
Theme URI: https://saxotherapy.ru
Author: Petr Ritter
Description: Авторская тема WordPress для музыкального проекта SAXOtherapy — живой саксофон, электроника, лупы и авторская музыка.
Version: 1.8.1
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: saxotherapy
*/

:root {
  --bg: #111111;
  --bg-soft: #181818;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-strong: rgba(255, 255, 255, 0.095);
  --text: #ffffff;
  --muted: #bdbdbd;
  --line: rgba(255,255,255,.14);
  --purple: #9625b9;
  --purple-bright: #b02bd0;
  --purple-dark: #72158f;
  --content: 1180px;
  --radius: 18px;
  --shadow: 0 24px 80px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(150,37,185,.18), transparent 30rem),
    radial-gradient(circle at 88% 12%, rgba(176,43,208,.11), transparent 26rem),
    var(--bg);
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.admin-bar .site-header { top: 32px; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--text); }
img { max-width: 100%; height: auto; }
button, input, textarea { font: inherit; }

.wrap { width: min(calc(100% - 40px), var(--content)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(17,17,17,.90);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.site-header.is-scrolled { border-color: var(--line); background: rgba(17,17,17,.97); }
.header-inner {
  width: min(calc(100% - 64px), 1500px);
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: clamp(46px, 7vw, 130px);
}

.brand {
  flex: 0 0 auto;
  font-family: "Uni Sans Heavy", "Uni Sans", "Montserrat", Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: -.04em;
  font-size: clamp(22px, 1.9vw, 29px);
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
}

.brand .brand-sax {
  color: #ffffff;
  font-weight: 900;
}

.brand .brand-therapy {
  display: inline-block;
  margin-left: .06em;
  color: #949494;
  font-weight: 700;
  font-size: .88em;
  letter-spacing: .055em;
  transform: translateY(-.015em);
}

.site-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 72px);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #f0f0f0;
}

.site-nav a {
  white-space: nowrap;
  transition: color .2s ease;
}

.site-nav a:hover { color: var(--purple); }
.menu-toggle { display: none; border: 1px solid var(--line); color: var(--text); background: transparent; border-radius: 999px; padding: 8px 14px; }

.hero { min-height: calc(100svh - 78px); display: grid; align-items: center; padding: 86px 0 72px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 64px; align-items: center; }
.eyebrow { color: var(--purple); text-transform: uppercase; letter-spacing: .17em; font-size: 13px; font-weight: 750; margin: 0 0 22px; }
.hero h1, .section-title, .entry-title {
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  margin: 0;
}
.hero h1 { font-size: clamp(58px, 8.5vw, 126px); max-width: 9ch; }
.hero h1 em { font-style: normal; color: var(--purple); }
.hero-lead { max-width: 670px; margin: 30px 0 0; font-size: clamp(20px, 2.2vw, 29px); line-height: 1.38; color: #f0f0f0; letter-spacing: -.018em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 750; border: 1px solid var(--line); transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--purple); border-color: var(--purple); box-shadow: 0 10px 30px rgba(150,37,185,.22); }
.button-secondary { background: rgba(255,255,255,.045); }
.button-secondary:hover { background: rgba(255,255,255,.09); }

.hero-art {
  position: relative;
  aspect-ratio: .82;
  max-height: 650px;
  justify-self: end;
  width: min(100%, 460px);
}

.hero-photo {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
}

.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17,17,17,.66), transparent 48%);
  pointer-events: none;
}

.hero-photo-placeholder {
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, rgba(150,37,185,.20), transparent 48%),
    linear-gradient(25deg, #1c1c1c, #101010);
  border: 1px solid rgba(255,255,255,.08);
}

.hero-photo-placeholder span {
  position: relative;
  z-index: 1;
  color: #858585;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero-note { position:absolute; bottom: 4%; left: 0; width: 66%; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(15,17,21,.75); backdrop-filter: blur(12px); box-shadow: var(--shadow); color: #dddddd; font-size: 14px; }
.hero-note strong { color: var(--text); display:block; margin-bottom:4px; font-size: 15px; }

.section { padding: 116px 0; border-top: 1px solid var(--line); }
.section-head { display:grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; margin-bottom: 54px; }
.section-kicker { color: var(--purple); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight:800; margin: 7px 0 0; }
.section-title { font-size: clamp(42px, 6vw, 78px); max-width: 11ch; }
.section-copy { color: #c7c7c7; max-width: 700px; font-size: clamp(19px,2vw,24px); line-height:1.5; margin: 2px 0 0; }

.feature-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.feature-card { min-height: 260px; padding: 28px; border:1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); border-radius: var(--radius); display:flex; flex-direction:column; justify-content:space-between; }
.feature-num { font-family: "Montserrat", Arial, Helvetica, sans-serif; color: var(--purple); font-size: 50px; line-height:1; }
.feature-card h3 { font-size: 25px; margin: 36px 0 6px; letter-spacing: -.03em; }
.feature-card p { color: var(--muted); margin: 0; font-size:16px; }

.video-shell { border: 1px solid var(--line); border-radius: 30px; overflow:hidden; background:#0d0d0d; box-shadow: var(--shadow); }
.video-shell .embed { aspect-ratio:16/9; }
.video-shell iframe { display:block; width:100%; height:100%; border:0; }
.video-placeholder { aspect-ratio:16/9; display:grid; place-items:center; padding: 40px; background: radial-gradient(circle at 32% 28%, rgba(150,37,185,.21), transparent 30%), radial-gradient(circle at 70% 62%, rgba(176,43,208,.23), transparent 32%), #121212; text-align:center; }
.video-placeholder span { max-width: 520px; color:#d5d5d5; }

.quote { padding: 90px 0 24px; }
.quote p { font-family:"Montserrat",Arial,Helvetica,sans-serif; font-size:clamp(38px,6vw,82px); line-height:1.08; letter-spacing:-.03em; margin:0; max-width: 15ch; }
.quote p span { color: var(--purple); }

.about-grid { display:grid; grid-template-columns: .72fr 1.28fr; gap: 70px; }
.about-label { position:sticky; top:120px; }
.about-copy { font-size: clamp(20px, 2.1vw, 27px); color:#e3e3e3; }
.about-copy p:first-child { margin-top:0; }
.about-copy strong { color:var(--text); }
.text-link { display:inline-flex; gap:8px; align-items:center; margin-top:16px; color:var(--purple); font-weight:750; font-size:15px; }
.text-link::after { content:"↗"; }

.social-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.social-card { padding: 25px 26px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.035); display:flex; align-items:center; justify-content:space-between; transition:background .2s ease, transform .2s ease; }
.social-card:hover { background:rgba(255,255,255,.075); transform:translateY(-2px); }
.social-card span { color:var(--muted); font-size:14px; }
.social-card strong { font-size:18px; }

.site-footer { border-top:1px solid var(--line); padding: 34px 0 46px; color:#999999; font-size:14px; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.footer-brand { color:var(--text); font-weight:800; }

.content-area { padding: 80px 0 110px; }
.entry { max-width: 860px; margin:0 auto; }
.entry-title { font-size:clamp(44px,7vw,82px); margin-bottom:38px; }
.entry-content { color:#e4e4e4; }
.entry-content a { color:var(--purple); text-decoration:underline; text-underline-offset:4px; }
.entry-content h2, .entry-content h3 { color:var(--text); letter-spacing:-.03em; line-height:1.15; }
.entry-content img { border-radius:20px; }
.post-list { display:grid; gap:14px; }
.post-card { padding:24px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.035); }
.post-card h2 { margin:0 0 8px; font-size:26px; }
.post-card time { color:var(--muted); font-size:14px; }

@media (max-width: 900px) {
  body.admin-bar .site-header { top: 46px; }
  .hero { min-height:auto; padding-top: 64px; }
  .hero-grid, .section-head, .about-grid { grid-template-columns:1fr; }
  .hero-grid { gap: 50px; }
  .hero-art { justify-self:center; width:min(82vw,420px); max-height:none; }
  .section-head { gap: 24px; }
  .section-title { max-width: 13ch; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:210px; }
  .about-label { position:static; }
  .social-grid { grid-template-columns:1fr; }
  .header-inner { width: min(calc(100% - 40px), 1500px); }
  .site-nav { display:none; position:absolute; top:84px; left:20px; right:20px; padding:20px; border:1px solid var(--line); border-radius:18px; background:#181818; flex-direction:column; align-items:flex-start; gap:17px; }
  .site-nav.is-open { display:flex; }
  .menu-toggle { display:block; }
}

@media (max-width: 520px) {
  body { font-size:17px; }
  .wrap { width:min(calc(100% - 28px), var(--content)); }
  .header-inner { min-height:72px; width:min(calc(100% - 28px), 1500px); gap:20px; }
  .site-nav { top:72px; left:14px; right:14px; }
  .brand { font-size:21px; }
  .hero { padding: 50px 0 60px; }
  .hero h1 { font-size: clamp(52px, 18vw, 78px); }
  .hero-lead { font-size:20px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .button { width:100%; }
  .hero-art { width: 90vw; }
  .hero-note { width:80%; }
  .section { padding:82px 0; }
  .section-title { font-size:44px; }
  .quote { padding-top:66px; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
}

/* Homepage v1.1 */
.hero-copy { position: relative; z-index: 2; }
.hero-signature { margin: 34px 0 0; color: #999999; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.hero-signature span { color: var(--purple); }
.hero-note span { display: block; }

.statement-strip { border-top: 1px solid var(--line); border-bottom: 0; background: rgba(255,255,255,.025); }
.statement-strip-inner { min-height: 78px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 22px; text-transform: uppercase; letter-spacing: .13em; font-size: 12px; font-weight: 800; color: #e0e0e0; }
.statement-strip-inner i { color: var(--purple); font-style: normal; }

.section-dark { background: rgba(0,0,0,.16); }
.about-note { color: #aaaaaa; font-size: .74em; max-width: 740px; }
.listen-section { padding-bottom: 92px; }

.closing-mark { margin-top: 92px; padding-top: 42px; border-top: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.brand-large { font-size: clamp(44px, 8vw, 104px); line-height: .9; letter-spacing: -.045em; color: var(--purple); font-weight: 800; }
.brand-large b { color: var(--text); font-weight: 850; }
.closing-mark p { max-width: 330px; color: var(--muted); text-align: right; margin: 0; font-size: 15px; }

@media (max-width: 760px) {
  .statement-strip-inner { justify-content: flex-start; padding-top: 20px; padding-bottom: 20px; }
  .closing-mark { margin-top: 65px; flex-direction: column; align-items: flex-start; }
  .closing-mark p { text-align: left; }
}


/* v1.2 — визуальная связь со school-of-music.ru */
.hero h1 em,
.eyebrow,
.section-kicker,
.text-link,
.feature-num,
.quote p span,
.statement-strip-inner i {
  color: var(--purple);
}

/* Логотип сохраняет написание «САКСОтерапия» без принудительного uppercase. */

.feature-card,
.social-card,
.hero-note {
  border-color: rgba(255,255,255,.12);
}

.feature-card:hover,
.social-card:hover {
  border-color: rgba(150,37,185,.55);
}

.site-nav a:hover {
  color: var(--purple-bright);
}






.video-placeholder {
  background:
    radial-gradient(circle at 32% 28%, rgba(150,37,185,.24), transparent 31%),
    radial-gradient(circle at 70% 62%, rgba(176,43,208,.16), transparent 34%),
    #101010;
}


/* v1.4 — широкая шапка без окантовок и подчёркиваний */
@media (min-width: 901px) {
  .site-header .header-inner {
    max-width: 1500px;
  }

  .site-nav a {
    padding: 31px 0 29px;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
  }
}


/* Uni Sans: логотип. Если Uni Sans установлен/подключён на сайте, используется он;
   иначе временно применяется Montserrat до подключения лицензированного webfont-файла. */
.brand {
  font-family: "Uni Sans Heavy", "Uni Sans", "Montserrat", Arial, Helvetica, sans-serif;
  font-weight: 900;
}


/* v1.5 — абстрактная звуковая графика снова на первом экране */
.hero-art {
  position: relative;
  aspect-ratio: .78;
  max-height: 650px;
  justify-self: end;
  width: min(100%, 430px);
}

.orbit {
  position: absolute;
  inset: 4% 0 6% 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  transform: rotate(-9deg);
}

.orbit::before,
.orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.orbit::before {
  inset: 13%;
  border: 1px solid rgba(150,37,185,.48);
}

.orbit::after {
  width: 18px;
  height: 18px;
  top: 16%;
  right: 9%;
  background: var(--purple);
  box-shadow: 0 0 34px rgba(150,37,185,.58);
}

.sax-line {
  position: absolute;
  left: 51%;
  top: 4%;
  bottom: 3%;
  width: 3px;
  transform: rotate(-13deg);
  transform-origin: center;
  background: linear-gradient(to bottom, transparent, var(--purple) 18%, var(--purple-bright) 62%, transparent);
  box-shadow: 0 0 42px rgba(150,37,185,.34);
}

.sound-disc {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
}

.sound-disc.one {
  width: 64%;
  aspect-ratio: 1;
  left: 7%;
  top: 17%;
  background: radial-gradient(circle at 40% 38%, rgba(150,37,185,.28), rgba(150,37,185,.02) 55%, transparent 65%);
}

.sound-disc.two {
  width: 43%;
  aspect-ratio: 1;
  right: 4%;
  bottom: 13%;
  background: radial-gradient(circle at 55% 50%, rgba(176,43,208,.22), rgba(176,43,208,.02) 56%, transparent 66%);
}


/* v1.6 — cinematic / expressive homepage */
.site-header { background: rgba(11,11,13,.76); border-bottom: 0 !important; }
.site-header.is-scrolled { background: rgba(11,11,13,.94); border-color: transparent !important; box-shadow: 0 12px 45px rgba(0,0,0,.20); }
.header-inner { max-width: 1500px; }
.header-socials { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.header-socials a { display:grid; place-items:center; min-width:26px; height:26px; color:var(--purple-bright); font-size:11px; font-weight:800; letter-spacing:.04em; transition:transform .2s ease, color .2s ease; }
.header-socials a:hover { transform:translateY(-2px); color:#d05bef; }

.hero-cinematic { position:relative; min-height:720px; padding:64px 0 0; overflow:hidden; background: radial-gradient(circle at 73% 46%, rgba(150,37,185,.20), transparent 30rem); }
.hero-cinematic::before { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, rgba(0,0,0,.10), transparent 42%, rgba(89,13,113,.07)); }
.hero-grid-cinematic { grid-template-columns:minmax(0,.92fr) minmax(460px,1.08fr); gap:36px; min-height:620px; position:relative; z-index:2; }
.hero-copy { align-self:center; padding-bottom:74px; }
.hero-kicker-line { display:flex; align-items:center; gap:14px; letter-spacing:.12em; margin-bottom:26px; }
.hero-kicker-line::before { content:""; width:18px; height:2px; background:var(--purple); box-shadow:0 0 12px rgba(176,43,208,.55); }
.hero-cinematic h1 { max-width:9.5ch; font-size:clamp(62px,6.5vw,104px); line-height:.98; letter-spacing:-.045em; text-wrap:balance; }
.hero-cinematic .hero-lead { max-width:610px; font-size:clamp(18px,1.65vw,24px); color:#c9c9ce; margin-top:28px; }
.hero-actions-cinematic { align-items:center; gap:38px; margin-top:34px; }
.button-play { border-radius:8px; min-height:58px; padding-inline:30px; background:linear-gradient(135deg,#7f2de1,#b321c7); box-shadow:0 14px 40px rgba(146,37,185,.30); }
.button-play span { font-size:12px; margin-right:8px; }
.hero-live-link { color:#d85df1; font-size:14px; font-weight:650; text-transform:uppercase; letter-spacing:.04em; padding:12px 0; border-bottom:1px solid rgba(216,93,241,.55); }
.hero-live-link span { display:inline-block; margin-left:14px; transition:transform .2s ease; }
.hero-live-link:hover span { transform:translateX(5px); }

.hero-stage { position:relative; align-self:stretch; min-height:620px; isolation:isolate; }
.hero-stage::after { content:""; position:absolute; left:10%; right:-12%; bottom:0; height:36%; z-index:4; background:linear-gradient(to top,#111 0%,rgba(17,17,17,.92) 28%,rgba(17,17,17,.55) 48%,transparent 100%); pointer-events:none; }
.hero-rings { position:absolute; width:min(820px,66vw); aspect-ratio:1; left:-4%; top:50%; transform:translateY(-50%); z-index:0; }
.hero-rings::before { content:""; position:absolute; inset:35%; border-radius:50%; background:rgba(169,64,209,.28); filter:blur(34px); box-shadow:0 0 80px rgba(172,51,211,.28); }
.hero-rings span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(195,81,225,.55); box-shadow:inset 0 0 18px rgba(153,38,187,.04); }
.hero-rings span:nth-child(1){width:18%;height:18%;opacity:.92}.hero-rings span:nth-child(2){width:31%;height:31%;opacity:.84}.hero-rings span:nth-child(3){width:45%;height:45%;opacity:.72}.hero-rings span:nth-child(4){width:60%;height:60%;opacity:.58}.hero-rings span:nth-child(5){width:76%;height:76%;opacity:.42}.hero-rings span:nth-child(6){width:94%;height:94%;opacity:.20}
.hero-person {
  position:absolute;
  z-index:3;
  inset:2% -2% 0 13%;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:58% 12%;
  filter:brightness(.92) saturate(.94) contrast(1.05) drop-shadow(0 28px 42px rgba(0,0,0,.42));
  border-radius:36px 36px 120px 36px;
  overflow:hidden;
  clip-path:inset(0 round 36px 36px 120px 36px);
}
.hero-person::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 100% 0%, rgba(17,17,17,.98) 0%, rgba(17,17,17,.82) 10%, rgba(17,17,17,.28) 22%, rgba(17,17,17,0) 38%),
    linear-gradient(90deg, rgba(17,17,17,.95) 0%, rgba(17,17,17,.28) 22%, transparent 38%, transparent 72%, rgba(17,17,17,.22) 100%),
    linear-gradient(to top, rgba(17,17,17,.95) 0%, rgba(17,17,17,.42) 18%, transparent 42%);
  pointer-events:none;
}
.hero-person-placeholder { display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.placeholder-silhouette { position:absolute; width:56%; aspect-ratio:.62; right:8%; bottom:-2%; border-radius:46% 46% 14% 14% / 20% 20% 8% 8%; background:linear-gradient(110deg,#202025,#070708 60%); box-shadow:-26px 0 70px rgba(153,38,187,.18); transform:skewX(-3deg); }
.placeholder-silhouette::before { content:""; position:absolute; width:34%; aspect-ratio:1; border-radius:50%; left:36%; top:-12%; background:#16161a; }
.placeholder-silhouette::after { content:""; position:absolute; width:7px; height:56%; left:32%; top:12%; transform:rotate(24deg); transform-origin:center; background:linear-gradient(#b638d7,#4f195e); box-shadow:0 0 16px rgba(176,43,208,.35); }
.hero-person-placeholder small { position:absolute; z-index:5; right:12%; bottom:9%; color:#67676d; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.spark { position:absolute; z-index:5; width:7px; height:7px; border-radius:50%; background:#ad29cc; box-shadow:0 0 15px #ad29cc; }
.spark-one{right:8%;top:29%}.spark-two{right:18%;top:54%;width:4px;height:4px}.spark-three{right:5%;top:67%;width:3px;height:3px;opacity:.65}
.hero-scroll { position:absolute; left:16px; top:38px; bottom:10px; width:34px; z-index:7; display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.hero-scroll span { width:1px; flex:1; min-height:80px; background:linear-gradient(to bottom,var(--purple),rgba(255,255,255,.12)); }
.hero-scroll b { margin:13px 0; writing-mode:vertical-rl; transform:rotate(180deg); color:#76767d; font-size:10px; font-weight:500; letter-spacing:.18em; }
.hero-scroll i { width:7px; height:7px; background:var(--purple); border-radius:50%; box-shadow:0 0 14px rgba(176,43,208,.62); }

.experience-band { position:relative; z-index:8; margin-top:-18px; padding:0 0 34px; background:linear-gradient(to bottom,rgba(17,17,17,.72),#111 18%); }
.experience-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.experience-card { position:relative; min-height:286px; padding:30px 30px 26px; border:1px solid rgba(255,255,255,.06); border-radius:16px; background:linear-gradient(155deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); overflow:hidden; transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.experience-card::before { content:""; position:absolute; inset:auto -20% -45% 35%; height:160px; background:radial-gradient(circle,rgba(156,40,190,.13),transparent 68%); opacity:0; transition:opacity .25s ease; }
.experience-card:hover { transform:translateY(-6px); border-color:rgba(176,43,208,.33); background:linear-gradient(155deg,rgba(255,255,255,.05),rgba(116,24,142,.035)); }
.experience-card:hover::before{opacity:1}.experience-card h3{margin:22px 0 14px;font-size:18px;text-transform:uppercase;letter-spacing:.025em}.experience-card p{margin:0;color:#aaaab0;font-size:14px;line-height:1.7}.experience-card>span{position:absolute;left:30px;bottom:24px;color:#b948d3;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.experience-icon { height:42px; color:#bc42dd; position:relative; }
.icon-wave { display:flex; align-items:center; gap:4px; }
.icon-wave i { width:2px; background:#ba3ddb; border-radius:2px; box-shadow:0 0 8px rgba(186,61,219,.35); }
.icon-wave i:nth-child(1){height:12px}.icon-wave i:nth-child(2){height:29px}.icon-wave i:nth-child(3){height:39px}.icon-wave i:nth-child(4){height:23px}.icon-wave i:nth-child(5){height:14px}
.icon-rings { width:44px; height:44px; border:2px solid #b83bd8; border-radius:50%; }
.icon-rings::before,.icon-rings::after,.icon-rings i{content:"";position:absolute;border:2px solid #b83bd8;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.icon-rings::before{width:28px;height:28px}.icon-rings::after{width:12px;height:12px}.icon-rings i{width:3px;height:3px;background:#b83bd8;border:0}
.icon-headphones { width:38px; height:31px; border:2px solid #b83bd8; border-bottom:0; border-radius:20px 20px 0 0; margin-top:4px; }
.icon-headphones::before,.icon-headphones::after{content:"";position:absolute;width:8px;height:16px;bottom:-7px;border:2px solid #b83bd8;border-radius:5px}.icon-headphones::before{left:-5px}.icon-headphones::after{right:-5px}
.icon-star { font-size:39px; line-height:1; text-shadow:0 0 18px rgba(184,59,216,.30); }

/* The rest of the homepage keeps the calmer school-family typography, with more air. */
#concept { border-top:0; padding-top:92px; }
.section { border-top:1px solid rgba(255,255,255,.06); }
.feature-card { transition:transform .2s ease,border-color .2s ease; }
.feature-card:hover{transform:translateY(-4px)}

@media (max-width:1180px){
  .header-socials{display:none}.hero-scroll{display:none}.hero-grid-cinematic{grid-template-columns:1fr 1fr}.experience-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero-cinematic{padding-top:42px}.hero-grid-cinematic{grid-template-columns:1fr;min-height:auto}.hero-copy{padding-bottom:10px}.hero-stage{min-height:500px}.hero-person{inset:0 -4% 0 4%;background-position:54% 10%}.hero-rings{width:min(680px,100vw);left:50%;transform:translate(-50%,-50%)}.experience-band{margin-top:0}.site-nav{border:0;box-shadow:0 18px 50px rgba(0,0,0,.32)}
}
@media (max-width:620px){
  .hero-cinematic h1{font-size:clamp(52px,15vw,76px)}.hero-actions-cinematic{gap:22px;align-items:flex-start}.button-play{width:auto}.hero-stage{min-height:410px}.experience-grid{grid-template-columns:1fr}.experience-card{min-height:235px}.hero-person-placeholder small{display:none}
}

/* v1.8.1 — мягкий верхний правый край фото, Safari-safe */
.hero-stage::before {
  content:"";
  position:absolute;
  z-index:4;
  top:0;
  right:-3%;
  width:26%;
  height:27%;
  background:radial-gradient(circle at 100% 0%, #111 0%, rgba(17,17,17,.98) 26%, rgba(17,17,17,.78) 48%, rgba(17,17,17,0) 76%);
  pointer-events:none;
}