
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
  --lilac:#D4B8F0; --lilac2:#9B6FD4; --deep:#4A2D7A; --deep2:#351F5C;
  --bg:#EDE6F7; --card:#FFFFFF; --ink:#1E1230; --mute:#6B5A82; --line:rgba(74,45,122,.14);
  --studio:#4A2D7A; --studio-ink:#F3ECFF;
  --sans:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block} a{color:inherit;text-decoration:none}
.wrap{width:min(430px,94vw);margin:0 auto}
@media(min-width:900px){.wrap{width:min(980px,92vw)}}

.top{position:sticky;top:0;z-index:40;background:rgba(247,243,251,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{font-weight:800;letter-spacing:.12em;font-size:1.05rem}
.logo span{display:block;font-size:.62rem;letter-spacing:.18em;font-weight:600;color:var(--mute);text-transform:uppercase}
.menu{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;gap:4px;cursor:pointer}
.menu i{width:16px;height:2px;background:var(--deep);display:block}
.drawer{display:none;flex-direction:column;gap:10px;padding:0 0 14px;font-weight:600;font-size:.95rem}
.drawer.open{display:flex}
.drawer a{padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line)}

.hero{padding:18px 0 8px}
.hero-card{background:var(--card);border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 40px rgba(107,78,154,.08)}
.hero-photo{aspect-ratio:4/5;background:
  linear-gradient(160deg,rgba(201,178,232,.35),rgba(85,60,126,.25)),
  radial-gradient(circle at 40% 28%,#efe6f8,#c9b2e8 45%,#8a6bb8 78%);
  position:relative}
.hero-photo::before{content:"";position:absolute;left:18%;right:18%;top:16%;height:52%;border-radius:48% 48% 42% 42%;background:linear-gradient(180deg,#f4ecf8,#d8c4ee)}
.hero-photo::after{content:"";position:absolute;left:22%;right:22%;top:10%;height:28%;border-radius:50%;background:linear-gradient(180deg,#3a2a4a,#1a1222);opacity:.85}
.hero-body{padding:18px 16px 20px}
.usp-row{display:grid;gap:10px;margin-bottom:14px}
.usp-row div{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--mute)}
.usp-row .ic{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--lilac2);flex:0 0 28px;position:relative}
.usp-row .ic::before{content:"";position:absolute;inset:7px;border-radius:2px;background:var(--deep);opacity:.55}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:999px;border:0;background:var(--deep);color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;width:100%}
.btn:hover{background:var(--deep2)}
.btn-line{background:transparent;border:1.5px solid var(--deep);color:var(--deep)}
.btn-sm{width:auto;padding:8px 14px;font-size:.75rem}

.grid4{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 0}
.g4{background:var(--card);border-radius:18px;padding:16px 14px;border:1px solid var(--line);min-height:108px;display:flex;flex-direction:column;justify-content:space-between}
.g4 .ic{width:34px;height:34px;border-radius:12px;background:rgba(201,178,232,.35);display:grid;place-items:center;margin-bottom:10px}
.g4 .ic svg{width:18px;height:18px;stroke:var(--deep);fill:none;stroke-width:1.8}
.g4 strong{display:block;font-size:.98rem;margin-bottom:4px}
.g4 span{font-size:.78rem;color:var(--deep);font-weight:700}

.offer{display:grid;grid-template-columns:1.15fr .85fr;gap:0;background:linear-gradient(90deg,#EFE6F8,#E4D6F4);border-radius:20px;overflow:hidden;border:1px solid var(--line);margin:8px 0 18px}
.offer-t{padding:16px}
.offer-t p{margin:0 0 4px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--deep);font-weight:800}
.offer-t h2{margin:0 0 6px;font-size:1.15rem;line-height:1.25}
.offer-t span{font-size:.85rem;color:var(--mute)}
.offer-pic{background:radial-gradient(circle at 50% 40%,#f7f1fc,#b49ad9 70%);min-height:110px;position:relative}
.offer-pic::before{content:"";position:absolute;left:22%;right:22%;top:28%;bottom:22%;border-radius:14px;background:linear-gradient(160deg,#d8c4ee,#6b4e9a);opacity:.55}

.sec{padding:22px 0}
.sec h2{margin:0 0 14px;font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase}
.svc{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px;margin-bottom:10px}
.svc .thumb{width:72px;height:72px;border-radius:16px;flex:0 0 72px;background:linear-gradient(145deg,#e8dcf6,#9a7fc4)}
.svc .thumb.a{background:linear-gradient(145deg,#ddd0ef,#7a5aa8)}
.svc .thumb.b{background:linear-gradient(145deg,#eadff7,#b49ad9)}
.svc .thumb.c{background:linear-gradient(145deg,#d5c6ea,#6b4e9a)}
.svc .thumb.d{background:linear-gradient(145deg,#efe6f8,#8f74bc)}
.svc h3{margin:0 0 4px;font-size:1rem}
.svc p{margin:0 0 8px;font-size:.82rem;color:var(--mute)}

.gift{background:var(--card);border-radius:22px;padding:16px;border:1px solid var(--line);display:grid;grid-template-columns:1.1fr .9fr;gap:12px;align-items:center}
.gift h3{margin:0 0 6px;font-size:1.1rem}
.gift p{margin:0;font-size:.88rem;color:var(--mute)}
.gift-pic{aspect-ratio:1;border-radius:18px;background:
  radial-gradient(circle at 50% 45%,#f4ecfb,#c9b2e8 55%,#6b4e9a);
  position:relative}
.gift-pic::before{content:"";position:absolute;left:28%;right:28%;top:22%;bottom:28%;border-radius:10px;background:rgba(255,255,255,.35);border:2px solid rgba(107,78,154,.35)}

.values{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:center;padding:8px 0}
.val .ring{width:64px;height:64px;border-radius:50%;margin:0 auto 8px;border:1.5px solid var(--lilac2);display:grid;place-items:center;background:var(--card)}
.val .ring i{width:18px;height:18px;border-radius:4px;background:var(--deep);opacity:.55;display:block}
.val strong{display:block;font-size:.88rem;line-height:1.3}

.interior{border-radius:22px;aspect-ratio:16/10;background:
  linear-gradient(120deg,rgba(201,178,232,.25),rgba(42,36,51,.15)),
  radial-gradient(circle at 30% 60%,#efe6f8,#c9b2e8 40%,#8a6bb8 75%);
  border:1px solid var(--line);position:relative;overflow:hidden}
.interior::before{content:"";position:absolute;left:8%;bottom:18%;width:28%;height:28%;border-radius:18px 18px 8px 8px;background:#9b7fc8;opacity:.7}
.interior::after{content:"";position:absolute;right:10%;bottom:18%;width:28%;height:28%;border-radius:18px 18px 8px 8px;background:#b49ad9;opacity:.75}

.review{background:var(--card);border-radius:22px;padding:16px;border:1px solid var(--line)}
.review .who{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.review .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,#d8c4ee,#6b4e9a)}
.stars{color:#E0A800;letter-spacing:1px;font-size:.9rem}
.review p{margin:0 0 12px;font-size:.92rem}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.shots span{aspect-ratio:1;border-radius:12px;background:linear-gradient(145deg,#e8dcf6,#9a7fc4)}
.shots span:nth-child(2){background:linear-gradient(145deg,#ddd0ef,#7a5aa8)}
.shots span:nth-child(3){background:linear-gradient(145deg,#eadff7,#b49ad9)}

.studio{background:var(--card);border-radius:24px;padding:16px;border:1px solid var(--line)}
.drop{border:1.5px dashed rgba(107,78,154,.4);border-radius:20px;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;cursor:pointer;background:rgba(201,178,232,.15);gap:4px}
.drop strong{font-size:1.05rem}
.drop span{color:var(--mute);font-size:.85rem}
.drop.has{border-style:solid;background:#fff}
.stage{margin-top:12px;border-radius:20px;overflow:hidden;aspect-ratio:1;background:#efe6f8;position:relative;border:1px solid var(--line)}
.stage canvas{width:100%;height:100%;display:block}
.status{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(42,36,51,.82);color:#fff;border-radius:12px;padding:10px;font-size:.8rem;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips label{border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:.78rem;font-weight:700;cursor:pointer;background:#fff}
.chips input{display:none}
.chips label.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.results{display:none;margin-top:14px}
.results.show{display:block}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.res{background:var(--bg);border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.res canvas{width:100%;aspect-ratio:3/4;display:block}
.res p{margin:0;padding:8px 10px;font-size:.82rem;font-weight:700}
.note{font-size:.78rem;color:var(--mute);margin-top:8px}
.modes{display:grid;gap:8px;margin:12px 0 0}
.modes article{background:rgba(201,178,232,.18);border-radius:14px;padding:10px 12px;font-size:.85rem}
.modes b{display:block;margin-bottom:2px}

.map{border-radius:22px;aspect-ratio:16/11;background:
  linear-gradient(#e8e4ef 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,#e8e4ef 1px,transparent 1px) 0 0/28px 28px,
  #f3f0f7;
  border:1px solid var(--line);position:relative;margin-bottom:12px}
.map::after{content:"";position:absolute;left:52%;top:46%;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--deep);box-shadow:0 0 0 8px rgba(107,78,154,.2)}
.contacts p{margin:0 0 8px;font-size:.92rem;color:var(--mute)}
.contacts strong{color:var(--ink)}

.foot{background:var(--deep);color:rgba(255,255,255,.88);padding:28px 0 110px;margin-top:28px;font-size:.88rem}
.foot a{color:#fff}
.foot .logo{color:#fff;margin-bottom:10px}
.foot .logo span{color:rgba(255,255,255,.7)}
.legal{margin-top:12px;font-size:.75rem;line-height:1.45;opacity:.85}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgba(247,243,251,.96) 30%);display:flex;justify-content:center}
.sticky .btn{width:min(420px,100%);box-shadow:0 10px 28px rgba(107,78,154,.35)}
body.hide-sticky .sticky{display:none}

@media(min-width:900px){
  .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
  .grid4{grid-template-columns:repeat(4,1fr)}
  .svc-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .svc{margin:0}
  .values{grid-template-columns:repeat(4,1fr)}
  .studio-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:14px}
  .res-grid{grid-template-columns:repeat(3,1fr)}
}

/* DIVERSE 03-stylo */

/* STYLO RibbonSweep — мобайл-стек: сцена сверху */
.studio{background:var(--deep)!important;border:0!important;border-radius:28px!important;padding:14px!important;color:#fff!important}
.studio-grid{display:flex!important;flex-direction:column-reverse!important;gap:14px!important}
.studio .stage{border-radius:22px!important;aspect-ratio:4/5!important;border:0!important;order:-1}
.studio .drop{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.25)!important;border-radius:16px!important;color:#fff!important}
.studio .drop strong,.studio .drop span{color:#fff}
.studio .chips label{background:transparent!important;border:1px solid rgba(255,255,255,.35)!important;color:#fff!important}
.studio .chips label.on{background:var(--lilac)!important;color:var(--deep)!important;border-color:var(--lilac)!important}
.studio .modes article{background:rgba(255,255,255,.08)!important;color:rgba(255,255,255,.9)!important}
.studio .note{color:rgba(255,255,255,.65)!important}
.studio .status,.stage .status,#stStatus{background:rgba(74,45,122,.92)!important}
/* FORCE BG */
body{background:var(--bg)!important}

/* BA photos */
.ba-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0}
.ba-strip img,.ba-grid img,.gallery img,.ba-one img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:14px}
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.ba-card{margin:0}
.ba-one{background:var(--cream,var(--soft,#f5f5f5));border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.ba-one h3{margin:0;padding:10px 12px;font-size:.92rem}
.gallery img{border-radius:12px}
