/*
Theme Name: Savransky Media
Theme URI: https://savransky.media
Author: Savransky Media
Description: Стильный сайт-визитка Savransky Media — фото, видео и аудио портфолио с калькулятором услуг и формой заявки. Графит, изумруд, платина, псевдо-3D переходы между разделами.
Version: 2.0
Requires at least: 5.9
Requires PHP: 7.4
License: Proprietary
Text Domain: savransky-media
*/
:root{
  --bg-0:#0A0C0F;
  --bg-1:#12151A;
  --bg-2:#181C22;
  --surface:#1D2229;
  --surface-2:#252B33;
  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.15);
  --platinum:#EEF0F2;
  --platinum-dim:#A8AFB7;
  --muted:#6E7680;
  --emerald:#19BD7C;
  --emerald-2:#3FE8A6;
  --emerald-deep:#0A6B48;
  --glow:rgba(25,189,124,.38);
  --serif:'Lora',serif;
  --sans:'Poppins',sans-serif;
  --radius:20px;
  --ease:cubic-bezier(.22,.9,.32,1);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg-1);
  color:var(--platinum-dim);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
input, textarea{ -webkit-user-select:text; -moz-user-select:text; user-select:text; }
img{ max-width:100%; display:block; -webkit-user-drag:none; user-drag:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea{ font-family:inherit; }
a{ color:inherit; }
::selection{ background:var(--glow); color:#fff; }

.container{ max-width:1180px; margin:0 auto; padding:0 32px; }
.eyebrow{
  font-size:12.5px; font-weight:600; letter-spacing:5px; text-transform:uppercase;
  color:var(--emerald-2); display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--emerald-2); display:inline-block; }

h1,h2,h3{ font-family:var(--serif); color:var(--platinum); font-weight:600; line-height:1.08; letter-spacing:.2px; }

.metal{
  background:linear-gradient(110deg,#fff 0%, #d7dde1 22%, #838c94 42%, #fbfcfc 58%, #aab1b8 76%, #fff 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 9s linear infinite;
}
@keyframes shimmer{ to{ background-position:-260% 0; } }
.accent{ color:var(--emerald-2); font-weight:700; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:999px; border:1px solid transparent;
  font-size:14.5px; font-weight:600; letter-spacing:.3px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  text-decoration:none; white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(120deg,var(--emerald-2),var(--emerald));
  color:#06120C; box-shadow:0 16px 40px -14px var(--glow);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 22px 50px -12px var(--glow); }
.btn-ghost{ background:rgba(255,255,255,.02); border-color:var(--border-2); color:var(--platinum); }
.btn-ghost:hover{ background:rgba(255,255,255,.06); transform:translateY(-3px); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* film grain overlay */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:140px 140px;
}
.cursor-glow{
  position:fixed; width:240px; height:240px; border-radius:50%; left:-9999px; top:-9999px;
  transform:translate(-50%,-50%); pointer-events:none; z-index:4; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(25,189,124,.14), transparent 72%); filter:blur(8px);
  transition:opacity .4s; opacity:0;
}

/* ---------- NAV ---------- */
header.nav{
  position:fixed; top:20px; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:center; gap:14px; pointer-events:none;
  padding:0 20px;
}
header.nav > *{ pointer-events:auto; }
.logo-mark{
  width:48px; height:48px; border-radius:50%; position:relative; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 28%, #232a32, #0d1013 78%);
  border:1px solid var(--border-2);
}
.logo-mark span{ font-family:var(--serif); font-weight:700; font-size:16px; letter-spacing:.5px; color:var(--emerald-2); }
.logo-mark::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid var(--glow); border-top-color:var(--emerald-2); border-right-color:var(--emerald-2);
  animation:spin 10s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

nav.tabs{
  position:relative; display:flex; gap:2px;
  background:rgba(18,21,26,.72); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border); border-radius:999px; padding:6px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.7);
  max-width:calc(100vw - 90px); overflow-x:auto; scrollbar-width:none;
}
nav.tabs::-webkit-scrollbar{ display:none; }
.tab{
  position:relative; z-index:2; padding:11px 20px; border-radius:999px; background:none; border:none;
  color:var(--platinum-dim); font-size:13.5px; font-weight:500; letter-spacing:.3px; white-space:nowrap;
  transition:color .35s;
}
.tab.current{ color:#06130D; font-weight:600; }
.pill{
  position:absolute; top:6px; left:6px; height:calc(100% - 12px); border-radius:999px;
  background:linear-gradient(120deg,var(--emerald-2),var(--emerald));
  box-shadow:0 10px 26px -8px var(--glow);
  transition:transform .5s var(--ease), width .5s var(--ease);
}

/* ---------- STAGE / PANEL TRANSITIONS (pseudo-3D) ---------- */
main.stage{ position:relative; width:100%; perspective:1900px; overflow:hidden; }
.panel{ display:none; position:relative; width:100%; min-height:100vh; }
.panel.current{ display:block; }
.panel-inner{ position:relative; z-index:2; padding:150px 0 120px; }

@keyframes turnOutR{ from{ opacity:1; transform:rotateY(0) translateZ(0) scale(1); } to{ opacity:0; transform:rotateY(-62deg) translateZ(-260px) scale(.88); } }
@keyframes turnInR { from{ opacity:0; transform:rotateY(62deg) translateZ(-260px) scale(.88); } to{ opacity:1; transform:rotateY(0) translateZ(0) scale(1); } }
@keyframes turnOutL{ from{ opacity:1; transform:rotateY(0) translateZ(0) scale(1); } to{ opacity:0; transform:rotateY(62deg) translateZ(-260px) scale(.88); } }
@keyframes turnInL { from{ opacity:0; transform:rotateY(-62deg) translateZ(-260px) scale(.88); } to{ opacity:1; transform:rotateY(0) translateZ(0) scale(1); } }
.panel.leaving-r{ display:block; position:absolute; top:0; left:0; width:100%; animation:turnOutR .62s var(--ease) forwards; transform-origin:center; }
.panel.entering-r{ animation:turnInR .62s var(--ease) forwards; transform-origin:center; }
.panel.leaving-l{ display:block; position:absolute; top:0; left:0; width:100%; animation:turnOutL .62s var(--ease) forwards; transform-origin:center; }
.panel.entering-l{ animation:turnInL .62s var(--ease) forwards; transform-origin:center; }
@media (prefers-reduced-motion:reduce){
  .panel.leaving-r,.panel.leaving-l,.panel.entering-r,.panel.entering-l{ animation:none !important; }
}

/* ---------- BACKGROUNDS ---------- */
.bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent, var(--bg-1) 92%); }
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; }
.dotgrid{ position:absolute; inset:-40px; background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px); background-size:34px 34px; opacity:.5; }

.bg-home .blob1{ width:620px; height:620px; top:-220px; left:-160px; background:radial-gradient(circle, var(--emerald-deep), transparent 70%); animation:driftA 22s ease-in-out infinite; }
.bg-home .blob2{ width:520px; height:520px; bottom:-240px; right:-140px; background:radial-gradient(circle, var(--emerald), transparent 72%); opacity:.35; animation:driftB 26s ease-in-out infinite; }
.beam{ position:absolute; width:180%; height:220px; top:8%; left:-40%; background:linear-gradient(100deg, transparent, rgba(63,232,166,.09), transparent); transform:rotate(-9deg); animation:sweep 9s ease-in-out infinite; }
@keyframes driftA{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(60px,40px) scale(1.12);} }
@keyframes driftB{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-50px,-30px) scale(1.08);} }
@keyframes sweep{ 0%,100%{ opacity:.5; transform:rotate(-9deg) translateX(-4%);} 50%{ opacity:1; transform:rotate(-9deg) translateX(4%);} }

.bg-photo .ring{ position:absolute; border:1px solid rgba(63,232,166,.22); border-radius:50%; }
.bg-photo .r1{ width:520px; height:520px; top:-180px; right:-140px; animation:spinSlow 40s linear infinite; }
.bg-photo .r2{ width:360px; height:360px; bottom:-140px; left:-100px; animation:spinSlow 50s linear infinite reverse; }
.bg-photo .r3{ width:240px; height:240px; bottom:14%; right:8%; animation:spinSlow 34s linear infinite; }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }

.bg-video .scan{ position:absolute; inset:-10% -10%; background:repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 5px); animation:scanMove 7s linear infinite; }
@keyframes scanMove{ from{ transform:translateY(0);} to{ transform:translateY(60px);} }
.bg-video .corner{ position:absolute; width:46px; height:46px; border-color:var(--emerald-2); opacity:.55; }
.bg-video .c1{ top:150px; left:32px; border-top:2px solid; border-left:2px solid; }
.bg-video .c2{ top:150px; right:32px; border-top:2px solid; border-right:2px solid; }

.bg-audio .wave{ position:absolute; left:50%; top:44%; width:2px; height:2px; border-radius:50%; border:1px solid rgba(63,232,166,.3); transform:translate(-50%,-50%); animation:pulseRing 4s ease-out infinite; }
.bg-audio .wave.w2{ animation-delay:1.3s; }
.bg-audio .wave.w3{ animation-delay:2.6s; }
@keyframes pulseRing{ 0%{ width:2px; height:2px; opacity:.9; } 100%{ width:900px; height:900px; opacity:0; } }

.bg-services .blob1{ width:520px; height:520px; top:-200px; right:-160px; background:radial-gradient(circle, var(--emerald-deep), transparent 70%); opacity:.4; animation:driftA 24s ease-in-out infinite; }

/* ---------- HOME ---------- */
.home-inner{ text-align:center; padding-top:190px; }
.home-inner h1{ font-size:clamp(46px,8vw,92px); margin-top:26px; }
.home-inner p.lead{ max-width:560px; margin:26px auto 0; font-size:17px; color:var(--platinum-dim); }
.cta-row{ display:flex; gap:16px; justify-content:center; margin-top:42px; flex-wrap:wrap; }
.chip-row{ display:flex; gap:12px; justify-content:center; margin-top:50px; flex-wrap:wrap; }
.chip{
  padding:10px 20px; border-radius:999px; border:1px solid var(--border-2); font-size:13px;
  color:var(--platinum-dim); background:rgba(255,255,255,.02);
}
.chip b{ color:var(--emerald-2); font-weight:600; }
.marquee{ margin-top:100px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:22px 0; overflow:hidden; white-space:nowrap; }
.marquee-track{ display:inline-flex; gap:40px; animation:marquee 26s linear infinite; }
.marquee-track span{ font-family:var(--serif); font-weight:600; font-size:22px; color:var(--platinum-dim); opacity:.75; }
.marquee-track span b{ color:var(--emerald-2); font-style:normal; margin-right:8px; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- SECTION HEAD (shared) ---------- */
.section-head{ text-align:center; max-width:640px; margin:0 auto 64px; }
.section-head h2{ font-size:clamp(34px,5vw,52px); margin-top:18px; }
.section-head p{ margin-top:16px; font-size:15.5px; }

/* ---------- TILT CARD ---------- */
.tilt{ transform-style:preserve-3d; transition:transform .18s ease-out, box-shadow .3s; position:relative; }
.tilt::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.14), transparent 60%);
}
.tilt:hover::after{ opacity:1; }

/* ---------- PHOTO ---------- */
.gallery{ column-count:3; column-gap:20px; }
.gallery figure{
  break-inside:avoid; margin-bottom:20px; border-radius:16px; overflow:hidden; position:relative;
  border:1px solid var(--border); background:var(--surface); cursor:zoom-in;
}
.gallery figure img{ width:100%; display:block; transition:transform .6s var(--ease); }
.gallery figure:hover img{ transform:scale(1.06); }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 18px 14px;
  background:linear-gradient(0deg, rgba(8,10,12,.88), transparent);
  font-size:13.5px; color:var(--platinum); opacity:0; transform:translateY(8px);
  transition:all .35s var(--ease);
}
.gallery figure:hover figcaption{ opacity:1; transform:translateY(0); }
.gallery figure.add-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:180px; border:1.5px dashed var(--border-2); background:rgba(255,255,255,.015); cursor:pointer;
}
.gallery figure.add-card span{ font-size:30px; color:var(--emerald-2); line-height:1; }
.gallery figure.add-card small{ color:var(--muted); font-size:12px; }
.edit-pin{
  position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%;
  background:rgba(10,12,15,.72); border:1px solid var(--border-2); color:var(--platinum);
  display:flex; align-items:center; justify-content:center; font-size:13px; opacity:0; transition:opacity .25s; z-index:3;
}
.gallery figure:hover .edit-pin, .reel-card:hover .edit-pin{ opacity:1; }
.empty-note{ color:var(--muted); font-size:14px; text-align:center; padding:30px 0; }

.lightbox{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(6,8,10,.94); backdrop-filter:blur(6px);
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:88vw; max-height:82vh; border-radius:10px; box-shadow:0 40px 100px -30px rgba(0,0,0,.8); }
.lightbox .lb-close, .lightbox .lb-nav{
  position:absolute; background:rgba(255,255,255,.06); border:1px solid var(--border-2); color:var(--platinum);
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:18px; transition:background .3s;
}
.lightbox .lb-close:hover, .lightbox .lb-nav:hover{ background:var(--emerald); color:#06130D; }
.lightbox .lb-close{ top:26px; right:26px; }
.lightbox .lb-prev{ left:26px; top:50%; transform:translateY(-50%); }
.lightbox .lb-next{ right:26px; top:50%; transform:translateY(-50%); }
.lightbox .lb-fs{
  position:absolute; bottom:26px; right:26px; background:rgba(255,255,255,.06); border:1px solid var(--border-2);
  color:var(--platinum); width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:18px; transition:background .3s;
}
.lightbox .lb-fs:hover{ background:var(--emerald); color:#06130D; }

/* ---------- VIDEO ---------- */
.player-wrap{ max-width:880px; margin:0 auto; }
.video-shell{
  position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--border-2);
  background:#000; box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
}
.video-shell video{ width:100%; display:block; aspect-ratio:16/9; background:#000; }
.video-controls{
  position:absolute; left:0; right:0; bottom:0; padding:16px 20px 18px;
  background:linear-gradient(0deg, rgba(0,0,0,.82), transparent);
  display:flex; align-items:center; gap:14px; opacity:0; transition:opacity .3s;
}
.video-shell:hover .video-controls, .video-shell.paused .video-controls{ opacity:1; }
.play-btn{
  width:46px; height:46px; border-radius:50%; border:none; flex-shrink:0;
  background:linear-gradient(120deg,var(--emerald-2),var(--emerald)); color:#06120C;
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.seek{ flex:1; -webkit-appearance:none; height:4px; border-radius:4px; background:rgba(255,255,255,.25); outline:none; }
.seek::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--emerald-2); box-shadow:0 0 0 4px rgba(63,232,166,.25); }
.time{ font-size:12.5px; color:var(--platinum-dim); min-width:86px; text-align:right; font-variant-numeric:tabular-nums; }
.fs-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border-2); background:rgba(255,255,255,.06);
  color:var(--platinum); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; transition:background .3s;
}
.fs-btn:hover{ background:var(--emerald); color:#06130D; }
.reel-row{
  display:flex; gap:16px; margin-top:26px; overflow-x:auto; padding:4px 4px 14px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.reel-card{
  flex:0 0 200px; scroll-snap-align:start; border-radius:14px; overflow:hidden; border:1px solid var(--border); position:relative; cursor:pointer;
  aspect-ratio:4/3; background:#0d1013;
}
.reel-card img{ width:100%; height:100%; object-fit:contain; background:#0d1013; opacity:.8; transition:opacity .3s, border-color .3s; }
.reel-card:hover img{ opacity:1; }
.reel-card.active{ border-color:var(--emerald); }
.reel-card .reel-noposter{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--emerald-2); font-size:22px; opacity:.7; }
.reel-card span{
  position:absolute; left:12px; bottom:10px; font-size:12px; color:var(--platinum); font-weight:500;
  max-width:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.reel-card .dot{ position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--emerald-2); box-shadow:0 0 8px var(--emerald-2); }
.reel-card.add-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:1.5px dashed var(--border-2); background:rgba(255,255,255,.015);
}
.reel-card.add-card span{ position:static; font-size:26px; color:var(--emerald-2); }
.reel-card.add-card small{ color:var(--muted); font-size:11px; }

/* ---------- AUDIO ---------- */
.playlist{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.track{
  display:flex; align-items:center; gap:18px; padding:16px 20px; border-radius:16px;
  border:1px solid var(--border); background:var(--surface); transition:border-color .3s, background .3s;
}
.track.active{ border-color:var(--emerald); background:var(--surface-2); }
.track .tplay{
  width:42px; height:42px; border-radius:50%; flex-shrink:0; border:1px solid var(--border-2); background:transparent;
  color:var(--platinum); display:flex; align-items:center; justify-content:center; font-size:14px; transition:all .3s;
}
.track.active .tplay{ background:linear-gradient(120deg,var(--emerald-2),var(--emerald)); color:#06120C; border-color:transparent; }
.track .tinfo{ flex:1; min-width:0; }
.track .tname{ color:var(--platinum); font-size:14.5px; font-weight:500; }
.track .ttag{ font-size:12px; color:var(--muted); margin-top:2px; }
.eq{ display:flex; align-items:flex-end; gap:3px; height:20px; width:26px; flex-shrink:0; }
.eq i{ width:3px; background:var(--emerald-2); border-radius:2px; height:4px; opacity:.35; }
.track.active .eq i{ opacity:1; animation:eqBounce 1s ease-in-out infinite; }
.track.active .eq i:nth-child(1){ animation-delay:.1s; }
.track.active .eq i:nth-child(2){ animation-delay:.35s; }
.track.active .eq i:nth-child(3){ animation-delay:.6s; }
.track.active .eq i:nth-child(4){ animation-delay:.2s; }
@keyframes eqBounce{ 0%,100%{ height:4px;} 50%{ height:18px;} }
.tseek{
  width:120px; flex-shrink:0; -webkit-appearance:none; height:3px; border-radius:3px;
  background:rgba(255,255,255,.18); outline:none; cursor:pointer;
}
.tseek::-webkit-slider-thumb{ -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:var(--emerald-2); box-shadow:0 0 0 3px rgba(63,232,166,.22); }
.tseek::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:var(--emerald-2); border:none; }
.track .ttime{ font-size:11.5px; color:var(--muted); width:40px; text-align:right; font-variant-numeric:tabular-nums; flex-shrink:0; }
.edit-pin-track{ position:static; opacity:1; width:28px; height:28px; margin-left:4px; }
.add-audio-btn{ width:100%; margin-top:6px; }

/* ---------- SERVICES / CALCULATOR ---------- */
.steps-track{ display:flex; gap:10px; max-width:520px; margin:0 auto 56px; }
.steps-track i{ flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; position:relative; }
.steps-track i b{ position:absolute; inset:0; background:linear-gradient(90deg,var(--emerald),var(--emerald-2)); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.steps-track i.done b{ transform:scaleX(1); }

.calc-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:28px; max-width:1000px; margin:0 auto; align-items:start; }
.svc-card{
  border:1px solid var(--border); background:var(--surface); border-radius:18px; margin-bottom:14px; overflow:hidden;
  transition:border-color .3s;
}
.svc-card.open{ border-color:var(--border-2); }
.svc-head{
  display:flex; align-items:center; gap:18px; padding:20px 22px; cursor:pointer; background:none; border:none; width:100%; text-align:left;
}
.svc-num{ font-family:var(--serif); font-weight:700; color:var(--emerald-2); font-size:18px; width:30px; flex-shrink:0; }
.svc-name{ flex:1; }
.svc-name b{ display:block; color:var(--platinum); font-size:15.5px; font-weight:500; }
.svc-name span{ display:block; font-size:12.5px; color:var(--muted); margin-top:3px; }
.svc-price{ font-family:var(--serif); font-weight:600; color:var(--emerald-2); font-size:16px; white-space:nowrap; }
.svc-price small{ color:var(--muted); font-weight:400; font-size:11.5px; font-family:var(--sans); }
.svc-chev{ color:var(--muted); transition:transform .35s var(--ease); flex-shrink:0; }
.svc-card.open .svc-chev{ transform:rotate(180deg); }
.svc-body{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.svc-card.open .svc-body{ max-height:600px; }
.svc-body-in{ padding:0 22px 22px; display:flex; flex-direction:column; gap:16px; }
.qty-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.qty{ display:flex; align-items:center; gap:10px; border:1px solid var(--border-2); border-radius:999px; padding:6px 8px; }
.qty button{ width:26px; height:26px; border-radius:50%; border:none; background:rgba(255,255,255,.06); color:var(--platinum); }
.qty span{ min-width:18px; text-align:center; color:var(--platinum); font-size:14px; }
.addbtn{
  padding:11px 22px; border-radius:999px; border:none; background:linear-gradient(120deg,var(--emerald-2),var(--emerald));
  color:#06120C; font-size:13.5px; font-weight:600;
}
.addons{ display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--border); padding-top:14px; }
.addon{
  display:flex; align-items:center; gap:10px; font-size:13px; color:var(--platinum-dim); cursor:pointer;
}
.addon input{ width:15px; height:15px; accent-color:var(--emerald); flex-shrink:0; }
.addon span{ flex:1; }
.addon b{ color:var(--emerald-2); font-weight:600; white-space:nowrap; }

.order-card{
  border:1px solid var(--border-2); background:var(--surface-2); border-radius:20px; padding:26px;
  position:sticky; top:110px;
}
.order-card h3{ font-size:19px; }
.order-empty{ font-size:13.5px; color:var(--muted); margin-top:14px; }
.order-list{ margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.order-item{ display:flex; align-items:center; gap:10px; font-size:13.5px; }
.order-item .oi-name{ flex:1; color:var(--platinum-dim); }
.order-item .oi-price{ color:var(--platinum); font-weight:500; }
.order-item .oi-rm{ color:var(--muted); background:none; border:none; font-size:16px; }
.order-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:20px; padding-top:20px; border-top:1px solid var(--border-2); }
.order-total b{ font-family:var(--serif); font-size:26px; color:var(--emerald-2); }
.order-card .btn{ width:100%; margin-top:20px; }

.lead-form{ max-width:560px; margin:0 auto; }
.recap{ border:1px solid var(--border); border-radius:16px; padding:20px 22px; background:var(--surface); margin-bottom:32px; font-size:13.5px; }
.recap .rline{ display:flex; justify-content:space-between; padding:6px 0; color:var(--platinum-dim); }
.recap .rtotal{ display:flex; justify-content:space-between; margin-top:10px; padding-top:12px; border-top:1px solid var(--border); font-family:var(--serif); font-size:19px; color:var(--emerald-2); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:12.5px; letter-spacing:.4px; color:var(--muted); margin-bottom:8px; text-transform:uppercase; }
.field input, .field textarea{
  width:100%; background:var(--surface); border:1px solid var(--border-2); border-radius:12px; padding:14px 16px;
  color:var(--platinum); font-size:14.5px; outline:none; transition:border-color .3s, background .3s;
}
.field input:focus, .field textarea:focus{ border-color:var(--emerald); background:var(--surface-2); }
.field textarea{ resize:vertical; min-height:90px; }
.check-row{ display:flex; align-items:center; gap:10px; margin-bottom:18px; font-size:13.5px; color:var(--platinum-dim); }
.check-row input{ width:16px; height:16px; accent-color:var(--emerald); }
.form-actions{ display:flex; gap:14px; margin-top:8px; }
.form-actions .btn-ghost{ flex:0 0 auto; }
.form-actions .btn-primary{ flex:1; }
.success-card{ text-align:center; padding:50px 20px; display:none; }
.success-card.show{ display:block; }
.success-card .check{
  width:74px; height:74px; border-radius:50%; margin:0 auto 24px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(120deg,var(--emerald-2),var(--emerald)); color:#06120C; font-size:32px;
}
.lead-error{
  margin-top:16px; padding:14px 18px; border-radius:12px; background:rgba(255,80,80,.08);
  border:1px solid rgba(255,80,80,.3); color:#ffb3b3; font-size:13.5px; line-height:1.6;
}
.lead-error a{ color:var(--emerald-2); font-weight:600; text-decoration:underline; }

/* ---------- FOOTER ---------- */
footer.site{ position:relative; z-index:2; border-top:1px solid var(--border); padding:70px 0 40px; text-align:center; }
footer.site .fname{ font-family:var(--serif); font-size:26px; color:var(--platinum); }
footer.site .ftag{ font-size:13px; color:var(--muted); margin-top:8px; letter-spacing:2px; text-transform:uppercase; }
.social-row{ display:flex; gap:14px; justify-content:center; margin-top:30px; }
.social-row a{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border-2); display:flex; align-items:center; justify-content:center;
  color:var(--platinum-dim); font-size:15px; transition:all .3s;
}
.social-row a:hover{ background:var(--emerald); color:#06130D; border-color:transparent; transform:translateY(-3px); }
footer.site .floc{ margin-top:34px; font-size:12px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; }

/* ---------- TOAST ---------- */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(30px); z-index:300;
  background:var(--surface-2); border:1px solid var(--border-2); color:var(--platinum); padding:14px 24px;
  border-radius:12px; font-size:13.5px; opacity:0; transition:all .4s var(--ease); pointer-events:none;
  box-shadow:0 20px 50px -16px rgba(0,0,0,.6);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .gallery{ column-count:2; }
  .calc-grid{ grid-template-columns:1fr; }
  .order-card{ position:relative; top:0; }
}
@media (max-width:640px){
  .container{ padding:0 20px; }
  header.nav{ top:14px; }
  .logo-mark{ display:none; }
  nav.tabs{ max-width:calc(100vw - 28px); }
  .tab{ padding:10px 14px; font-size:12.5px; }
  .panel-inner{ padding:118px 0 90px; }
  .home-inner{ padding-top:40px; }
  .gallery{ column-count:1; }
  .cta-row{ flex-direction:column; align-items:stretch; }
  .form-actions{ flex-direction:column; }
  .video-controls{ flex-wrap:wrap; }
  .reel-card{ flex-basis:150px; }
  .qty-row{ justify-content:space-between; }
}