/* ===== Тематичні змінні: «Глибина панелей» (dark) ===== */
:root{
  --spine-bg:#0D1117;
  --spine-surface:#161B26;
  --spine-surface-alt:#1D2432;
  --spine-tone:#22D3EE;
  --spine-tone-hover:#67E8F9;
  --spine-violet:#7C3AED;
  --spine-gold:#FBBF24;
  --spine-mint:#34D399;
  --spine-lilac:#A78BFA;
  --spine-ink:#F5F7FA;
  --spine-muted:#B8C2D0;
  --spine-header:#FAF7F2;
  --spine-header-ink:#1A1A2A;
  --spine-header-tone:#0E7490;
  --spine-footer:#080B10;
  --spine-line:rgba(255,255,255,.08);
  --spine-gradient:linear-gradient(135deg,#22D3EE 0%,#7C3AED 100%);
  --spine-shadow-deep:0 30px 80px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.3);
  --spine-shadow-float:0 20px 60px rgba(0,0,0,.35);
  --spine-radius:16px;
  --spine-section-pad:10dvh;
  --font-display:'Montserrat','Noto Nastaliq Urdu','Jameel Noori Nastaleeq',sans-serif;
  --font-body:'Inter','Noto Nastaliq Urdu','Jameel Noori Nastaleeq',sans-serif;
}

/* Реєстрація властивостей для анімації фонового mesh */
@property --spine-x1{syntax:'<percentage>';inherits:false;initial-value:20%}
@property --spine-y1{syntax:'<percentage>';inherits:false;initial-value:20%}
@property --spine-x2{syntax:'<percentage>';inherits:false;initial-value:80%}
@property --spine-y2{syntax:'<percentage>';inherits:false;initial-value:30%}
@property --spine-x3{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --spine-y3{syntax:'<percentage>';inherits:false;initial-value:85%}

/* ===== Міжсторінкові переходи ===== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.35s ease both vt-out; }
::view-transition-new(root) { animation: 0.45s ease both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ===== База ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--spine-bg);
  color:var(--spine-ink);
  font-family:var(--font-body);
  font-size:1.05rem;
  line-height:1.85;
  overflow-x:clip;
}
h1,h2,h3{font-family:var(--font-display);line-height:1.35;margin:0 0 .6em;font-weight:700}
h1{font-size:clamp(1.9rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.3rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
a{color:var(--spine-tone)}
a:hover{color:var(--spine-tone-hover)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--spine-tone);outline-offset:3px}

/* ===== Header ===== */
.spine-hdr{
  position:sticky;top:0;z-index:50;
  background:var(--spine-header);
  color:var(--spine-header-ink);
  box-shadow:0 4px 20px rgba(0,0,0,.08);
}
.spine-hdr-inner{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 5vw;
}
.spine-brand{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:inherit;
  font-family:var(--font-display);font-weight:700;font-size:1.1rem;
}
.spine-brand svg{width:34px;height:34px;flex:none}
.spine-hdr .spine-brand{color:var(--spine-header-ink)}
.spine-nav-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.spine-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.4rem;color:var(--spine-header-ink)}
.spine-burger span{display:block;width:26px;height:3px;background:currentColor;border-radius:2px}
.spine-nav-toggle:focus-visible ~ .spine-burger{outline:3px solid var(--spine-header-tone);outline-offset:2px}
.spine-nav{display:flex;gap:1.6rem}
.spine-nav a{
  color:var(--spine-header-ink);text-decoration:none;font-weight:600;
  padding:.3rem 0;border-bottom:2px solid transparent;transition:border-color .25s,color .25s;
}
.spine-nav a:hover{color:var(--spine-header-tone);border-color:var(--spine-header-tone)}
.spine-progress{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--spine-gradient);
  transform-origin:0 50%;
  transform:scaleX(0);
  animation:spine-grow linear both;
  animation-timeline:scroll(root block);
}
@keyframes spine-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:860px){
  .spine-burger{display:flex}
  .spine-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--spine-header);padding:.5rem 5vw 1.2rem;
    box-shadow:0 14px 30px rgba(0,0,0,.12);
  }
  .spine-nav a{padding:.8rem 0;border-bottom:1px solid rgba(26,26,42,.08)}
  .spine-nav-toggle:checked ~ .spine-nav{display:flex}
}

/* ===== Декоративні шари ===== */
.spine-decor{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:clip}
.spine-decor-bg1{background:linear-gradient(180deg,rgba(13,17,23,.78),rgba(13,17,23,.94)),url("img/bg.webp") center/cover no-repeat}
.spine-decor-bg2{background:linear-gradient(180deg,rgba(13,17,23,.80),rgba(13,17,23,.95)),url("img/bg2.webp") center/cover no-repeat}
.spine-decor-bg3{background:linear-gradient(180deg,rgba(13,17,23,.80),rgba(13,17,23,.95)),url("img/bg3.webp") center/cover no-repeat}
.spine-mesh{
  position:absolute;inset:0;pointer-events:none;z-index:0;overflow:clip;
  background:
    radial-gradient(circle at var(--spine-x1) var(--spine-y1), rgba(34,211,238,.35), transparent 45%),
    radial-gradient(circle at var(--spine-x2) var(--spine-y2), rgba(124,58,237,.38), transparent 50%),
    radial-gradient(circle at var(--spine-x3) var(--spine-y3), rgba(34,211,238,.18), transparent 40%);
  animation:spine-mesh-drift 24s ease-in-out infinite alternate;
}
@keyframes spine-mesh-drift{
  from{--spine-x1:15%;--spine-y1:20%;--spine-x2:80%;--spine-y2:30%;--spine-x3:50%;--spine-y3:85%}
  to{--spine-x1:70%;--spine-y1:60%;--spine-x2:25%;--spine-y2:75%;--spine-x3:85%;--spine-y3:20%}
}

/* ===== Hero ===== */
.posture-hero-stage{
  position:relative;overflow:clip;
  min-height:100vh;min-height:100dvh;
  display:grid;place-items:center;
  padding:14dvh 5vw;
  background:var(--spine-bg);
}
.posture-hero-stage.is-compact{min-height:auto;padding:12dvh 5vw 6dvh}
.posture-hero-stack{
  position:relative;z-index:1;isolation:isolate;
  width:min(760px,100%);
}
.posture-hero-back{
  position:absolute;z-index:0;pointer-events:none;
  border-radius:var(--spine-radius);
  background:var(--spine-surface-alt);
  box-shadow:var(--spine-shadow-float);
  opacity:.55;
  display:flex;align-items:flex-start;justify-content:flex-end;padding:1rem 1.2rem;
  color:var(--spine-muted);font-family:var(--font-display);font-size:.9rem;
}
.posture-hero-back-a{top:-6%;right:-8%;width:70%;height:70%;transform:rotate(-4deg) translate(-12px,-14px)}
.posture-hero-back-b{bottom:-8%;left:-6%;width:60%;height:55%;transform:rotate(3deg) translate(10px,10px);background:linear-gradient(135deg,#1D2432,#2A1F4A)}
.posture-hero-card{
  position:relative;z-index:1;
  width:100%;max-width:720px;margin:0 auto;
  background:var(--spine-surface);
  border:1px solid var(--spine-line);
  border-radius:24px;
  padding:clamp(1.6rem,4vw,3rem);
  box-shadow:var(--spine-shadow-deep);
  text-align:center;
}
.posture-hero-lead{color:var(--spine-muted);font-size:1.1rem;max-width:58ch;margin:0 auto 1.6rem}
.spine-eyebrow{
  display:inline-block;margin-bottom:.8rem;padding:.25rem .9rem;
  border-radius:999px;background:rgba(34,211,238,.12);color:var(--spine-tone);
  font-size:.9rem;font-weight:700;
}

/* ===== Загальні секції ===== */
.spine-section{position:relative;overflow:clip;padding:var(--spine-section-pad) 5vw;background:var(--spine-bg)}
.spine-band{background:var(--spine-surface)}
.spine-section-head{max-width:720px;margin:0 auto 3rem;text-align:center}
.spine-section-head p{color:var(--spine-muted)}
.spine-page-main{min-height:60vh}

/* ===== Кнопки ===== */
.spine-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 2rem;border-radius:999px;
  background:var(--spine-tone);color:var(--spine-bg);
  font-weight:700;text-decoration:none;font-size:1rem;
  border:0;cursor:pointer;font-family:inherit;
  box-shadow:0 12px 30px rgba(34,211,238,.25);
  transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.spine-cta:hover{background:var(--spine-tone-hover);color:var(--spine-bg);transform:scale(1.03);box-shadow:0 14px 34px rgba(34,211,238,.35)}
.spine-cta:active{transform:scale(.99)}
.spine-cookie-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.6rem 1.4rem;border-radius:999px;font:inherit;font-weight:700;cursor:pointer;
  background:var(--spine-tone);color:var(--spine-bg);border:2px solid var(--spine-tone);
  transition:background .25s ease,color .25s ease;
}
.spine-cookie-btn:hover{background:var(--spine-tone-hover);border-color:var(--spine-tone-hover)}
.spine-cookie-btn-ghost{background:transparent;color:var(--spine-ink);border-color:var(--spine-muted)}
.spine-cookie-btn-ghost:hover{background:rgba(255,255,255,.08);color:var(--spine-ink);border-color:var(--spine-ink)}

/* ===== Split-розкладка та рамки ===== */
.spine-split{display:grid;gap:3rem;grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.spine-split{grid-template-columns:1fr 1fr}}
.spine-frame{margin:0;border-radius:var(--spine-radius);overflow:hidden;box-shadow:var(--spine-shadow-deep)}
.spine-frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.spine-floating-card{
  margin:0;background:var(--spine-surface);
  border-radius:var(--spine-radius);box-shadow:var(--spine-shadow-float);overflow:hidden;
  border:1px solid var(--spine-line);
}
.spine-floating-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.spine-raised-panel{
  background:var(--spine-surface);
  padding:2.5rem;border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
@media (max-width:600px){.spine-raised-panel{padding:1.5rem}}

/* Clip-reveal зображень через view() */
@supports (animation-timeline: view()){
  .spine-clip-img{
    animation:spine-clip-open linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 40%;
  }
}
@keyframes spine-clip-open{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}

/* ===== Іконки ===== */
.spine-icon{display:inline-grid;place-items:center;flex:none}
.spine-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===== Features (floating) ===== */
.joint-feature-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:700px){.joint-feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.joint-feature-grid{grid-template-columns:repeat(4,1fr)}}
.joint-feature-item{
  position:relative;z-index:1;
  background:var(--spine-surface-alt);
  border:1px solid var(--spine-line);
  border-radius:var(--spine-radius);
  padding:2rem;
  box-shadow:var(--spine-shadow-float);
  transition:opacity .7s ease,translate .7s ease,transform .35s ease,box-shadow .35s ease;
}
@media (min-width:1000px){.joint-feature-item{margin-top:-50px;z-index:10}}
.joint-feature-item:hover{transform:translateY(-12px);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.joint-feature-icon{
  width:52px;height:52px;border-radius:14px;
  background:var(--spine-gradient);color:var(--spine-bg);
  margin-bottom:1rem;
}
.joint-feature-item p{color:var(--spine-muted);margin:0}

/* ===== Steps (pills) ===== */
.motion-steps-row{display:grid;gap:1.4rem;grid-template-columns:1fr;margin-top:1rem}
@media (min-width:800px){.motion-steps-row{grid-template-columns:repeat(3,1fr)}}
.motion-step-pill{
  display:flex;align-items:center;gap:1rem;
  background:var(--spine-surface);
  border-radius:28px;
  padding:1.4rem 1.6rem;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  transition:opacity .7s ease,translate .7s ease;
}
@media (min-width:800px){.motion-step-pill{border-radius:999px;padding:1.5rem 2.5rem}}
.motion-step-num{
  flex:none;width:44px;height:44px;border-radius:50%;
  background:var(--spine-tone);color:var(--spine-bg);
  font-weight:700;display:grid;place-items:center;
}

/* ===== CTA strip ===== */
.spine-cta-strip{
  position:relative;overflow:clip;
  background:var(--spine-footer);
  padding:12dvh 5vw;
  display:grid;place-items:center;
}
.spine-cta-bg{opacity:.9}
.spine-cta-panel{
  position:relative;z-index:1;
  width:100%;max-width:820px;
  background:var(--spine-surface);
  border:1px solid var(--spine-line);
  border-radius:24px;
  padding:clamp(2rem,4vw,3.5rem);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  text-align:center;
}
@media (min-width:900px){.spine-cta-panel{width:65%}}
.spine-cta-panel p{color:var(--spine-muted)}

/* ===== Expert ===== */
.expert-approach-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem;max-width:860px;margin-inline:auto}
.expert-approach-list li{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--spine-surface-alt);
  border-radius:var(--spine-radius);
  padding:1.2rem 1.4rem;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  transition:opacity .7s ease,translate .7s ease;
}
.expert-approach-list .spine-icon{color:var(--spine-tone);width:44px;height:44px;border-radius:12px;background:rgba(34,211,238,.1)}
.core-stat-row{display:grid;gap:1.2rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.core-stat-row{grid-template-columns:repeat(4,1fr)}}
.core-stat-pill{
  background:var(--spine-surface-alt);
  border:1px solid var(--spine-line);
  border-radius:var(--spine-radius);
  padding:1.8rem 1rem;text-align:center;
  box-shadow:var(--spine-shadow-float);
  transition:opacity .7s ease,translate .7s ease;
}
.core-stat-num{
  display:block;font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3rem);font-weight:800;
  color:var(--spine-tone);line-height:1.1;margin-bottom:.4rem;
}
.core-stat-pill span:last-child{color:var(--spine-muted)}

/* ===== Reserve ===== */
.reserve-tip-grid{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media (min-width:800px){.reserve-tip-grid{grid-template-columns:repeat(3,1fr)}}
.reserve-tip-card{
  background:var(--spine-surface);
  border:1px solid var(--spine-line);
  border-radius:var(--spine-radius);
  padding:2rem;
  box-shadow:var(--spine-shadow-float);
  transition:opacity .7s ease,translate .7s ease;
}
.reserve-tip-icon{
  width:52px;height:52px;border-radius:14px;margin-bottom:1rem;
  background:var(--spine-gradient);color:var(--spine-bg);
}
.reserve-steps-ol{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.reserve-steps-ol li{display:flex;gap:.7rem;align-items:center;color:var(--spine-muted)}
.reserve-steps-ol li::before{
  content:attr(data-step);
  flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  font-weight:700;font-size:.9rem;color:var(--spine-bg);
  background:var(--spine-tone);
}
.reserve-steps-ol li:nth-child(2)::before{background:var(--spine-lilac)}
.reserve-steps-ol li:nth-child(3)::before{background:var(--spine-gold)}
.reserve-steps-ol li:nth-child(4)::before{background:var(--spine-mint)}
.reserve-form-card{
  max-width:720px;margin:0 auto;
  display:grid;gap:1.2rem;
  background:var(--spine-surface);
  border:1px solid var(--spine-line);
  border-radius:24px;
  padding:clamp(1.5rem,4vw,2.5rem);
  box-shadow:var(--spine-shadow-deep);
}
.reserve-form-field{display:grid;gap:.45rem}
.reserve-form-field label{font-weight:700;color:var(--spine-ink)}
.reserve-form-card input:not([type="checkbox"]),
.reserve-form-card textarea{
  width:100%;padding:.8rem 1rem;
  border-radius:12px;border:1px solid rgba(255,255,255,.18);
  background:var(--spine-bg);color:var(--spine-ink);
  font:inherit;
}
.reserve-form-card input::placeholder,
.reserve-form-card textarea::placeholder{color:#8B95A7}
.reserve-consent{display:flex;gap:.7rem;align-items:flex-start;color:var(--spine-muted);cursor:pointer}
.reserve-consent input{margin-top:.5rem;width:20px;height:20px;flex:none;accent-color:var(--spine-tone)}
.reserve-consent a{color:var(--spine-tone)}
.reserve-submit{justify-self:start}
.reserve-mail{text-align:center;margin:2rem 0 0;color:var(--spine-muted)}
.faq-lift-list{display:grid;gap:1rem;max-width:860px;margin:0 auto}
.faq-lift-item{
  background:var(--spine-surface);
  border:1px solid var(--spine-line);
  border-radius:var(--spine-radius);
  padding:1.2rem 1.6rem;
  box-shadow:var(--spine-shadow-float);
  transition:opacity .7s ease,translate .7s ease,transform .3s ease,box-shadow .3s ease;
}
.faq-lift-item:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(0,0,0,.45)}
.faq-lift-item summary{font-weight:700;cursor:pointer;list-style:none;color:var(--spine-ink)}
.faq-lift-item summary::-webkit-details-marker{display:none}
.faq-lift-item p{color:var(--spine-muted);margin:.8rem 0 0}

/* ===== Thank / Legal ===== */
.thank-figure{max-width:720px;margin:0 auto 2.5rem}
.thank-panel{
  max-width:720px;margin:0 auto;text-align:center;
  background:var(--spine-surface);
  border:1px solid var(--spine-line);
  padding:3rem 2rem;border-radius:24px;
  box-shadow:var(--spine-shadow-deep);
}
.thank-panel p{color:var(--spine-muted);font-size:1.1rem}
.legal-doc-main{min-height:100vh;min-height:100dvh;padding:14dvh 5vw 10dvh;background:var(--spine-bg)}
.legal-doc-wrap{max-width:860px;margin:0 auto;display:grid;gap:2rem}
.legal-doc-block{
  background:var(--spine-surface);
  border:1px solid var(--spine-line);
  border-radius:var(--spine-radius);
  padding:clamp(1.5rem,4vw,2.8rem);
  box-shadow:var(--spine-shadow-float);
}
.legal-doc-block p{color:var(--spine-muted)}
.legal-doc-block a{color:var(--spine-tone)}

/* ===== Footer ===== */
.spine-foot{
  background:var(--spine-footer);
  color:var(--spine-muted);
  padding:4rem 5vw 2rem;
  border-top:1px solid var(--spine-line);
}
.spine-foot-inner{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start}
.spine-foot .spine-brand{color:var(--spine-ink)}
.spine-foot p{margin:.8rem 0 0}
.spine-foot-links{display:flex;flex-wrap:wrap;gap:1rem 1.6rem}
.spine-foot-links a{color:var(--spine-tone);text-decoration:none;font-weight:600}
.spine-foot-links a:hover{color:var(--spine-tone-hover);text-decoration:underline}
.spine-foot-disclaimer{
  margin:2.5rem 0 .8rem;padding-top:1.5rem;
  border-top:1px solid var(--spine-line);
  color:var(--spine-ink);font-weight:600;
}
.spine-foot-copy{margin:0;font-size:.95rem;color:var(--spine-muted)}

/* ===== Cookie-банер ===== */
.spine-cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding:1rem 5vw;
  background:var(--spine-surface);color:var(--spine-ink);
  border-top:1px solid var(--spine-line);
  box-shadow:0 -10px 30px rgba(0,0,0,.4);
}
.spine-cookie[hidden]{display:none}
.spine-cookie-text{margin:0;flex:1 1 320px;color:var(--spine-muted)}
.spine-cookie-text a{color:var(--spine-tone)}
.spine-cookie-actions{display:flex;gap:.7rem;flex-wrap:wrap}

/* ===== Reveal (JS-рівень; без JS контент видимий) ===== */
.js .spine-reveal{opacity:0;translate:0 24px;transition:opacity .7s ease,translate .7s ease}
.js .spine-reveal.is-in{opacity:1;translate:0 0}
.js .joint-feature-item.spine-reveal{transition:opacity .7s ease,translate .7s ease,transform .35s ease,box-shadow .35s ease}
.js .faq-lift-item.spine-reveal{transition:opacity .7s ease,translate .7s ease,transform .3s ease,box-shadow .3s ease}

/* ===== Accessibility & Motion ===== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  html{view-transition-name:none}
}

/* ===== Адаптивність ===== */
@media (max-width:480px){
  body{font-size:1rem}
  .posture-hero-back{display:none}
  .posture-hero-card{border-radius:20px}
  .spine-cta{width:100%}
  .spine-cookie-actions{width:100%}
  .spine-cookie-btn{flex:1 1 auto}
  .spine-hdr-inner{padding:.8rem 5vw}
  .spine-brand{font-size:1rem}
}