:root{--bg:#0A0910;--bg2:#13111C;--card:rgba(255,255,255,.04);--line:rgba(255,255,255,.1);--txt:#EEEAF8;--mut:#A39DB8;
  --v:#8B5CF6;--p:#EC4899;--c:#22D3EE;--grad:linear-gradient(100deg,var(--v),var(--p) 55%,#FB923C);
  --fr:14px;--fline:rgba(255,255,255,.14);--fbg:rgba(255,255,255,.05);--fokus:#EC4899}
body{background:var(--bg);color:var(--txt);font:400 17px/1.6 "Golos Text",system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;line-height:1.02;letter-spacing:-.01em}
.tag{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 "Golos Text";letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin-bottom:18px}
.live{width:9px;height:9px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.lead{color:var(--mut);font-size:18px;max-width:600px}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:999px;background:var(--grad);color:#fff;text-decoration:none;font-weight:700;font-size:15px;box-shadow:0 10px 40px -10px rgba(236,72,153,.6);transition:transform .2s,box-shadow .2s}
.pill:hover{transform:translateY(-2px);box-shadow:0 14px 50px -8px rgba(236,72,153,.8)}
.pill.big{padding:18px 30px;font-size:16px}
.ghost{display:inline-flex;align-items:center;padding:17px 26px;border-radius:999px;color:var(--txt);text-decoration:none;font-weight:600;box-shadow:inset 0 0 0 1.5px var(--line)}
.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--c);color:var(--c)}

.glow{position:fixed;left:0;top:0;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.22),rgba(236,72,153,.08) 45%,transparent 70%);pointer-events:none;z-index:0;transform:translate(-50vw,-50vh);transition:transform .25s ease-out}
section,header,footer,.marquee{position:relative;z-index:1}

.hd{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:30px;padding:16px 4vw;background:rgba(10,9,16,.7);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{font:400 20px/1 "Dela Gothic One";text-decoration:none;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hd nav{display:flex;gap:26px;margin-left:auto}
.hd nav a{color:var(--mut);text-decoration:none;font-size:15px}.hd nav a:hover{color:var(--txt)}
.tel{text-decoration:none;font-weight:700}

.hero{min-height:calc(100vh - 100px);display:flex;align-items:flex-end;padding:14vh 4vw 8vh;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transform:scale(1.1);animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.18) translate(-2%,-1%)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,16,.2),rgba(10,9,16,.55) 45%,var(--bg) 96%)}
.hero-in{position:relative;z-index:2;max-width:1100px}
.hero h1{font-size:clamp(38px,5.2vw,84px);margin-bottom:24px;background:linear-gradient(100deg,#fff 30%,#F5C2E7 60%,#C4B5FD);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin-bottom:32px;color:#D6D0E8}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chips span{padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.07);backdrop-filter:blur(8px);font-size:14px;color:var(--mut);box-shadow:inset 0 0 0 1px var(--line)}
.chips b{color:var(--txt)}

.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--bg2);padding:18px 0}
.mq-in{display:flex;gap:28px;padding-right:28px;width:max-content;animation:mq 40s linear infinite;font:400 22px/1 "Dela Gothic One"}
.mq-in i{font-style:normal;color:var(--p)}
@keyframes mq{to{transform:translateX(-50%)}}

section{padding:120px 4vw}
h2{font-size:clamp(32px,4.6vw,66px);margin-bottom:18px}
.bento-wrap h2{max-width:900px;margin-bottom:50px}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(200px,auto);grid-auto-flow:dense;gap:14px}
.b-it{background:var(--card);border-radius:24px;padding:28px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;justify-content:flex-end;transition:box-shadow .3s,transform .3s}
.b-it:hover{box-shadow:inset 0 0 0 1px rgba(236,72,153,.6),0 0 40px -10px rgba(236,72,153,.5);transform:translateY(-3px)}
.b-n{font:400 14px "Dela Gothic One";color:var(--p);margin-bottom:auto}
.b-it h3{font-size:24px;margin:18px 0 8px}
.b-it p{color:var(--mut);font-size:15px}
.b0{grid-column:span 2;background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(236,72,153,.2))}
.b0 h3{font-size:40px}
.b-ph{border-radius:24px;background-size:cover;background-position:center;min-height:220px}
.b4{grid-column:span 4;background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(139,92,246,.15))}

.p-head{max-width:860px;margin-bottom:40px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tabs button{background:var(--card);color:var(--mut);border:0;padding:14px 20px;border-radius:999px;font-weight:600;font-size:15px;box-shadow:inset 0 0 0 1px var(--line)}
.tabs button.on{background:var(--txt);color:var(--bg)}
.p-card{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;background:var(--bg2);border-radius:30px;padding:46px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;position:relative}
.p-card::before{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.25),transparent 65%)}
.p-pane{display:none}
.p-pane.on{display:block;animation:fade .45s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}}
.p-big{font:400 clamp(64px,9vw,128px)/1 "Dela Gothic One";background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:18px}
.p-big small{font-size:.3em;margin-right:8px;color:var(--mut);-webkit-text-fill-color:var(--mut)}
.p-big span{font-size:.24em;-webkit-text-fill-color:var(--mut)}
.p-pane p{color:var(--mut);margin-bottom:26px;max-width:460px}
.calc{position:relative;background:rgba(255,255,255,.04);border-radius:22px;padding:28px;align-self:center;box-shadow:inset 0 0 0 1px var(--line)}
.calc label{display:block;font-weight:600;margin-bottom:16px}
.calc input{width:100%;accent-color:var(--p)}
.sum{margin-top:20px;font-size:18px;color:var(--mut)}
.sum b{font:400 40px "Dela Gothic One";color:var(--txt)}
.sum small{display:block;font-size:13px;margin-top:4px}
.note{color:var(--mut);font-size:14px;margin-top:20px;max-width:760px}

.gal{padding-right:0}
.hint{color:var(--mut);font-size:14px}
.strip{display:flex;gap:18px;overflow-x:auto;padding:20px 4vw 30px 0;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab}
.strip::-webkit-scrollbar{display:none}
.s-it{flex:0 0 auto;width:min(420px,76vw);aspect-ratio:4/5;border:0;padding:0;border-radius:26px;overflow:hidden;scroll-snap-align:start;background:var(--bg2);transition:transform .4s}
.s-it:nth-child(odd){transform:rotate(-1.5deg)}.s-it:nth-child(even){transform:rotate(1.5deg) translateY(20px)}
.s-it:hover{transform:rotate(0) scale(1.02)}
.s-it img{width:100%;height:100%;object-fit:cover;pointer-events:none}

.uses ul{list-style:none;border-top:1px solid var(--line)}
.uses li{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);transition:padding .3s}
.uses li:hover{padding-left:20px}
.u-t{font:400 clamp(28px,4vw,56px)/1 "Dela Gothic One"}
.uses li:hover .u-t{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.u-d{color:var(--mut)}

.r-grid{gap:16px}
.r-wrap .rail-nav{background:rgba(10,9,16,.75);color:#fff;box-shadow:inset 0 0 0 1.5px var(--p),0 0 24px -4px rgba(236,72,153,.7);backdrop-filter:blur(8px)}
.r-wrap .rail-nav:hover{background:var(--p)}
.r-wrap .rail-nav[data-prev]{left:-12px}.r-wrap .rail-nav[data-next]{right:-12px}
.r-wrap .rail-bar{color:var(--p);background:rgba(255,255,255,.1)}
.r{width:calc((100% - 32px)/3);background:#15131E;border-radius:24px;padding:28px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column}
.r b{margin-top:auto}
.st{color:#FBBF24;letter-spacing:3px;margin-bottom:12px}
.r p{margin-bottom:16px}
.r b{display:block}.r small{color:var(--mut)}

.book{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.bk-txt ol{list-style:none;margin-top:30px;display:grid;gap:16px}
.bk-txt li{display:flex;gap:14px;color:var(--mut)}
.bk-txt li b{flex:0 0 34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:14px}
.bk-form{background:var(--bg2);border-radius:30px;padding:38px;box-shadow:inset 0 0 0 1px var(--line),0 30px 80px -40px rgba(139,92,246,.6)}
.bform .fld span{font-size:13px;font-weight:600;color:var(--mut)}
.bform .fld select option{background:var(--bg2)}
.bsend{padding:18px;border-radius:999px;background:var(--grad);color:#fff;font-weight:700;font-size:16px}

.contacts{display:grid;grid-template-columns:1fr 1.2fr;gap:50px}
.addr{color:var(--mut);margin-bottom:12px}.addr span{font-size:15px}
.bigtel{display:inline-block;font:400 clamp(28px,3.4vw,44px)/1 "Dela Gothic One";text-decoration:none;margin:14px 0 26px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.soc{display:flex;gap:10px;flex-wrap:wrap}
.soc a{padding:11px 18px;border-radius:999px;text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--line);font-weight:600;font-size:14px}
.map{border-radius:30px;overflow:hidden;min-height:420px;filter:invert(.9) hue-rotate(180deg) saturate(.6)}
.map iframe{width:100%;height:100%;min-height:420px;border:0;display:block}

.ft{padding:30px 4vw 110px;color:var(--mut);font-size:13px;border-top:1px solid var(--line)}
.mbar{background:rgba(19,17,28,.85);backdrop-filter:blur(12px);padding:8px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.mbar a{border-radius:999px}.mbar .m1{color:var(--txt)}.mbar .m2{background:var(--grad);color:#fff}

@media (max-width:1000px){
  .r{width:calc((100% - 16px)/2)}
  .hd nav,.hd .tel{display:none}.hd .pill{margin-left:auto}
  .bento{grid-template-columns:1fr 1fr}.b0,.b4{grid-column:span 2}
  .p-card{grid-template-columns:1fr;padding:30px}
  .book,.contacts{grid-template-columns:1fr}
  .uses li{grid-template-columns:1fr;gap:6px}
}
@media (max-width:560px){
  .r{width:86%}
  section{padding:80px 18px}.gal{padding-right:0}
  .hero{padding:110px 18px 60px;min-height:88vh}
  .bento{grid-template-columns:1fr}.b0,.b4{grid-column:span 1}
  .bk-form{padding:24px}
  .tabs button{padding:11px 14px;font-size:14px}
}