/* ==========================================================================
   Pilates Clasic Cluj — style.css
   1. Fonturi   2. Teme (palete)   3. Bază   4. Componente   5. Secțiuni
   6. Animații  7. Responsive
   ========================================================================== */

/* 1. FONTURI (self-hosted) ------------------------------------------------ */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/cormorant-300-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/cormorant-300-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-400-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-400-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/jost-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/jost-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 2. TEME ------------------------------------------------------------------
   Rolurile sunt aceleași în ambele teme; doar valorile se schimbă.
   Culorile sunt eșantionate din paletele 5.jpg (Salvie) și 6.jpg (Lemn).
   Contrast verificat WCAG AA pentru perechile text/fundal folosite.
   -------------------------------------------------------------------------- */
:root,
[data-theme="sage"]{
  --bg:#F1F2ED;           --bg-rgb:241 242 237;
  --bg-alt:#E3E2D9;
  --surface:#FAFAF7;
  --ink:#242A1E;          --ink-rgb:36 42 30;
  --ink-soft:#4A5245;
  --accent:#556922;       --accent-hover:#445743;   --on-accent:#F1F2ED;
  --gold:#6B6726;         /* accente mici pe fundal deschis */
  --deep:#445743;         --deep-2:#242A1E;         --deep-rgb:36 42 30;
  --on-deep:#F1F2ED;      --on-deep-rgb:241 242 237;
  --on-deep-soft:#D6D4C8;
  --gold-on-deep:#D3CF8E;
  --line:rgb(36 42 30 / .16);
  --line-strong:rgb(36 42 30 / .34);
  color-scheme:light;
}
[data-theme="wood"]{
  --bg:#F5EFE6;           --bg-rgb:245 239 230;
  --bg-alt:#E9DDCF;
  --surface:#FBF8F3;
  --ink:#331E0B;          --ink-rgb:51 30 11;
  --ink-soft:#5C4733;
  --accent:#874D1B;       --accent-hover:#6D3C12;   --on-accent:#FBF8F3;
  --gold:#7A6322;
  --deep:#331E0B;         --deep-2:#25150A;         --deep-rgb:37 21 10;
  --on-deep:#F5EFE6;      --on-deep-rgb:245 239 230;
  --on-deep-soft:#D9C9B6;
  --gold-on-deep:#C9A483;
  --line:rgb(51 30 11 / .16);
  --line-strong:rgb(51 30 11 / .34);
}

:root{
  --font-display:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --font-body:"Jost","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(20px,5vw,48px);
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.18,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:58px;
}

/* 3. BAZĂ ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background-color .6s var(--ease),color .6s var(--ease);
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
svg{width:1.25em;height:1.25em}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.25em}
h1,h2,h3,p,ul,dl,dd,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.section--deep :focus-visible,.footer :focus-visible,.hero :focus-visible,.cut--deep :focus-visible{outline-color:var(--gold-on-deep)}
::selection{background:var(--accent);color:var(--on-accent)}

.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

.container{width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}

.section{padding-block:clamp(80px,12vw,160px);position:relative}
.section--tight{padding-block:clamp(56px,8vw,110px)}
.section--alt{background:var(--bg-alt)}
.section--deep{background:var(--deep);color:var(--on-deep)}

/* Tipografie */
.display{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.005em;
  text-wrap:balance;
}
.display em,.hero__title .it,.brand em,.footer__brand em,.plan__head span{font-style:italic;font-weight:400}
.display em{color:var(--gold)}
.section--deep .display em{color:var(--gold-on-deep)}
.lead{font-family:var(--font-display);font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.4;font-weight:400;color:var(--ink)}
.section--deep .lead{color:var(--on-deep)}
p{color:var(--ink-soft);text-wrap:pretty}
.section--deep p{color:var(--on-deep-soft)}
.section--deep .lead{color:var(--on-deep)}

.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:.74rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin-bottom:22px;
}
.eyebrow i{display:block;height:1px;width:44px;background:currentColor;transform-origin:left}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{content:"";display:block;height:1px;width:44px;background:currentColor;transform-origin:right}
.section--deep .eyebrow{color:var(--gold-on-deep)}

.head{margin-bottom:clamp(36px,5vw,64px)}
.head--center{text-align:center;display:flex;flex-direction:column;align-items:center}

/* 4. COMPONENTE ------------------------------------------------------------ */

/* Butoane */
.btn{
  --h:48px;
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  min-height:var(--h);padding:0 1.7em;border-radius:999px;border:1px solid transparent;
  font-size:.8rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;text-align:center;line-height:1.3;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.btn svg{width:1.3em;height:1.3em;flex:none;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--sm{--h:38px;padding:0 1.25em;font-size:.72rem}
.btn--lg{--h:56px;padding:0 2.1em}
.btn--block{width:100%}
.btn--solid{background:var(--accent);color:var(--on-accent)}
.btn--solid:hover{background:var(--accent-hover)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--light{background:var(--on-deep);color:var(--deep-2)}
.btn--light:hover{background:var(--gold-on-deep)}
.icon-btn{
  display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-strong);background:transparent;color:inherit;text-decoration:none;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.icon-btn svg{width:20px;height:20px}
.icon-btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.icon-btn--lg{width:54px;height:54px}
.icon-btn--lg svg{width:23px;height:23px}
.icon-btn[disabled]{opacity:.35;pointer-events:none}

/* Carduri cu colțuri teșite + chenar fin (inspirat din herbeast.world) */
.cut{
  --c:18px;--ci:calc(var(--c) - .586px);
  --cut-border:var(--line-strong);--cut-bg:var(--surface);
  padding:1px;background:var(--cut-border);
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
}
.cut > .cut__in{
  height:100%;background:var(--cut-bg);position:relative;
  clip-path:polygon(var(--ci) 0,calc(100% - var(--ci)) 0,100% var(--ci),100% calc(100% - var(--ci)),calc(100% - var(--ci)) 100%,var(--ci) 100%,0 calc(100% - var(--ci)),0 var(--ci));
}
.cut--deep{--cut-border:rgb(var(--on-deep-rgb) / .35);--cut-bg:var(--deep);color:var(--on-deep)}
.cut--deep p{color:var(--on-deep-soft)}
.cut--deep h3{color:var(--on-deep)}

/* Etichete mici cu cifre */
.swatches{display:inline-flex;gap:0}
.swatches i{display:block;width:22px;height:22px;background:var(--c);border:2px solid var(--surface);border-radius:50%;margin-left:-7px}
.swatches i:first-child{margin-left:0}
.swatches--sm i{width:14px;height:14px;border-width:1.5px;margin-left:-5px}
.swatches--sm i:nth-child(1){--c:#878135}.swatches--sm i:nth-child(2){--c:#556922}.swatches--sm i:nth-child(3){--c:#445743}
[data-theme="wood"] .swatches--sm i:nth-child(1){--c:#B08C6A}[data-theme="wood"] .swatches--sm i:nth-child(2){--c:#874D1B}[data-theme="wood"] .swatches--sm i:nth-child(3){--c:#331E0B}

/* NAVBAR ------------------------------------------------------------------ */
.nav{position:fixed;inset:14px 0 auto;z-index:90;display:flex;justify-content:center;padding-inline:14px;pointer-events:none}
.nav__pill{
  pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:min(1120px,100%);min-height:var(--nav-h);padding:8px 10px 8px 22px;border-radius:999px;
  background:rgb(var(--bg-rgb) / .74);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgb(var(--bg-rgb) / .55);
  box-shadow:0 10px 40px -18px rgb(var(--ink-rgb) / .45);
  transition:background-color .4s var(--ease),transform .6s var(--ease),box-shadow .4s var(--ease);
}
.nav.is-scrolled .nav__pill{background:rgb(var(--bg-rgb) / .9)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}
.brand__mark{width:26px;height:26px;color:var(--accent)}
.brand__name{font-family:var(--font-display);font-size:1.3rem;font-weight:500;letter-spacing:.02em}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__links a:not(.btn){
  position:relative;display:block;padding:8px 14px;font-size:.74rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;text-decoration:none;color:var(--ink);
}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav__links a:not(.btn):hover::after,.nav__links a[aria-current="true"]:not(.btn)::after{transform:scaleX(1)}
.nav__cta-item{margin-left:8px}
.nav__tools{display:flex;align-items:center;gap:8px}

.nav__toggle{display:none;position:relative;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:transparent}
.nav__toggle span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),top .4s var(--ease)}
.nav__toggle span:nth-child(1){top:18px}.nav__toggle span:nth-child(2){top:25px}
.nav__toggle[aria-expanded="true"] span:nth-child(1){top:21.5px;transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){top:21.5px;transform:rotate(-45deg)}

/* Selector paletă */
.palette{position:relative}
.palette__btn{
  display:flex;align-items:center;gap:9px;height:44px;padding:0 14px 0 12px;border-radius:999px;
  border:1px solid var(--line-strong);background:transparent;
  font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.palette__btn:hover,.palette__btn[aria-expanded="true"]{background:rgb(var(--ink-rgb) / .07)}
.palette__chev{width:16px;height:16px;transition:transform .35s var(--ease)}
.palette__btn[aria-expanded="true"] .palette__chev{transform:rotate(180deg)}
.palette__menu{
  position:absolute;right:0;top:calc(100% + 14px);z-index:5;width:min(320px,calc(100vw - 28px));padding:12px;
  background:var(--bg);border:1px solid var(--line-strong);border-radius:22px;
  box-shadow:0 30px 60px -30px rgb(var(--ink-rgb) / .55);
  transform-origin:top right;animation:pop .35s var(--ease-out);
}
.palette__menu[hidden]{display:none}
.palette__title{padding:6px 10px 10px;font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.palette__opt{
  display:flex;align-items:center;gap:14px;width:100%;padding:12px 10px;border:1px solid transparent;border-radius:14px;background:transparent;text-align:left;
  transition:background-color .25s var(--ease),border-color .25s var(--ease);
}
.palette__opt:hover{background:rgb(var(--ink-rgb) / .06)}
.palette__opt[aria-pressed="true"]{border-color:var(--line-strong);background:rgb(var(--ink-rgb) / .05)}
.palette__opt .swatches i{border-color:var(--bg)}
.palette__txt{display:flex;flex-direction:column;flex:1;line-height:1.3}
.palette__txt b{font-family:var(--font-display);font-size:1.25rem;font-weight:500}
.palette__txt small{font-size:.8rem;color:var(--ink-soft)}
.palette__check{width:18px;height:18px;color:var(--accent);opacity:0}
.palette__opt[aria-pressed="true"] .palette__check{opacity:1}

/* CARUSEL ----------------------------------------------------------------- */
.carousel{position:relative}
.carousel__track{
  --pad:max(var(--gutter),calc((100vw - var(--maxw)) / 2));
  display:flex;gap:clamp(14px,2vw,24px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:6px var(--pad) 6px;scroll-padding-inline:var(--pad);
  scrollbar-width:none;cursor:grab;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.carousel__track.is-dragging *{pointer-events:none}
.carousel__track > .card{flex:0 0 clamp(250px,26vw,320px);scroll-snap-align:start;transition:transform .5s var(--ease)}
.carousel__track > .card:hover{transform:translateY(-6px)}
.carousel__ui{display:flex;align-items:center;gap:28px;margin-top:clamp(24px,3vw,36px)}
.carousel__progress{flex:1;height:1px;background:var(--line-strong);position:relative;overflow:hidden}
.carousel__progress i{position:absolute;inset:-1px auto -1px 0;width:30%;background:var(--ink);transform-origin:left;transition:transform .15s linear}
.carousel__btns{display:flex;gap:10px}

.cut--photo .cut__in{padding:10px}
.cut--photo img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  user-select:none;-webkit-user-drag:none}
.card__no{position:absolute;right:22px;bottom:20px;font-family:var(--font-display);font-style:italic;font-size:1.15rem;color:#fff;text-shadow:0 1px 14px rgb(0 0 0 / .45)}

.card__body{padding:22px 24px 28px}
.card__body h3{font-family:var(--font-display);font-size:1.75rem;font-weight:500;line-height:1.1;margin-bottom:10px}
.card__body p{font-size:.98rem;line-height:1.6}
.media{padding:10px 10px 0}
.media img,.media__ph{width:100%;aspect-ratio:4/3;object-fit:cover;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.media__ph{
  position:relative;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 20% 0%,rgb(var(--on-deep-rgb) / .16),transparent 55%),
    linear-gradient(160deg,var(--accent),var(--deep));
}
.media__ph::before{content:attr(data-no);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;font-family:var(--font-display);font-style:italic;font-size:4.6rem;line-height:1;color:rgb(var(--on-deep-rgb) / .9)}
.media__ph::after{content:"";position:absolute;inset:14px;border:1px solid rgb(var(--on-deep-rgb) / .28);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}

/* 5. SECȚIUNI -------------------------------------------------------------- */

/* Intro (overlay): literele se scriu una câte una, apar accentele, apoi panoul se retrage în sus
   (inspirat din weaintplastic.com). Doar CSS; ~3.8s; se sare la vizitele repetate. */
.intro{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--deep-2);color:var(--on-deep);
  animation:introWipe 3.8s linear forwards;
}
.intro__inner{display:flex;flex-direction:column;align-items:center;gap:22px;animation:introRise 3.8s linear forwards}
.intro__mark{width:40px;height:40px;color:var(--gold-on-deep);animation:markIn .7s var(--ease-out) 2s both}
.intro__word{
  display:flex;font-family:var(--font-display);font-size:clamp(1.25rem,3.6vw,2rem);font-weight:300;letter-spacing:.34em;text-transform:uppercase;white-space:pre;
}
.intro__word i{font-style:normal;opacity:0;animation:letterIn .4s ease calc(.55s + var(--k) * .065s) forwards}
.intro__word .sp{width:.55em}
.intro__line{display:block;height:1px;width:clamp(90px,16vw,160px);background:var(--gold-on-deep);transform-origin:center;animation:lineGrow .9s var(--ease) 2s both}
html.skip-intro .intro{display:none}

/* Hero */
:root{--d0:3.05s}
html.skip-intro{--d0:.1s}
.hero{padding:12px;min-height:100vh;min-height:100svh;display:flex}
.hero__frame{
  --c:30px;position:relative;flex:1;overflow:hidden;isolation:isolate;display:grid;place-items:center;
  min-height:calc(100svh - 24px);background:var(--deep-2);color:var(--on-deep);
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform-origin:center;will-change:transform;animation:heroZoom 2.8s var(--ease-out) calc(var(--d0) - .5s) both}
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 52% at 50% 46%,rgb(var(--deep-rgb) / .44),transparent 80%),
    linear-gradient(180deg,rgb(var(--deep-rgb) / .5) 0%,rgb(var(--deep-rgb) / .2) 42%,rgb(var(--deep-rgb) / .72) 100%);
  transition:background .6s var(--ease);
}
.hero__content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(var(--nav-h) + 56px) var(--gutter) 130px;max-width:960px}
.hero__eyebrow{font-size:.76rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-on-deep);margin-bottom:clamp(18px,3vw,30px)}
.hero__title{
  font-family:var(--font-display);font-weight:300;text-transform:uppercase;
  font-size:clamp(3rem,11.5vw,8.6rem);line-height:.98;letter-spacing:.06em;
  display:flex;flex-wrap:wrap;justify-content:center;column-gap:.28em;
  color:var(--on-deep);text-shadow:0 2px 40px rgb(0 0 0 / .18);
}
.hero__title .it{text-transform:none;letter-spacing:.02em;color:var(--gold-on-deep)}
.mask{display:inline-block;overflow:hidden;padding:.06em .08em .24em;margin:-.06em -.08em -.24em;vertical-align:bottom}
.mask > span{display:inline-block;animation:maskUp 1.25s var(--ease-out) calc(var(--d0) + var(--n) * .13s) both}
.hero__sub{font-family:var(--font-display);font-style:italic;font-size:clamp(1.25rem,2.6vw,1.9rem);line-height:1.35;color:var(--on-deep);max-width:30ch;margin-top:clamp(22px,3.5vw,38px)}
.hero__cta{margin-top:clamp(28px,4vw,46px)}
.rise{animation:rise 1.1s var(--ease-out) calc(var(--d0) + var(--n) * .13s) both}
.hero__corner{position:absolute;bottom:clamp(22px,3.5vw,38px);font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--on-deep-soft);line-height:1.8;text-decoration:none}
.hero__corner--l{left:clamp(26px,4vw,52px)}
.hero__corner--r{right:clamp(26px,4vw,52px)}
.hero__scroll{display:flex;align-items:center;gap:14px}
.hero__scroll i{display:block;width:1px;height:46px;background:rgb(var(--on-deep-rgb) / .4);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--on-deep);animation:scrollCue 2.2s var(--ease) infinite}

/* 2. Metoda */
.method__grid{display:grid;grid-template-columns:minmax(0,1.25fr) 1px minmax(0,.8fr);gap:clamp(32px,6vw,88px);align-items:center}
.method__text{display:flex;flex-direction:column;gap:20px}
.method__text .display{margin-bottom:10px}
.method__rule{align-self:stretch;background:var(--line-strong);transform-origin:top}
.principles{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:10px}
.principles li{
  font-family:var(--font-display);font-style:italic;font-size:1.35rem;line-height:1;padding:11px 20px 12px;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink);
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.principles li:hover{background:var(--ink);color:var(--bg)}

.arch{justify-self:center;width:100%;max-width:440px}
.arch__frame{padding:12px;border:1px solid var(--line-strong);border-radius:999px 999px 0 0;position:relative}
.arch__frame img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 0 0;display:block}

/* 3. Galerie / 4. Aparate */
.apparatus__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.apparatus__copy{display:flex;flex-direction:column;gap:16px}
.formats{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:8px}
.formats li{display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 14px;border:1px solid var(--line-strong);border-radius:999px;font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.formats__dots{display:inline-flex}
.formats__dots i{display:block;width:16px;height:16px;border-radius:50%;background:var(--accent)}
.formats__dots i+i{margin-left:-6px;background:transparent;border:1.5px solid var(--accent)}
.apparatus__lead{margin-bottom:clamp(24px,3vw,36px)}
.apparatus__lead p{font-family:var(--font-display);font-style:italic;font-size:clamp(1.25rem,2vw,1.6rem);color:var(--ink)}
.apparatus .carousel__track > .card{flex-basis:clamp(260px,24vw,300px)}
.apparatus .cut__in{display:flex;flex-direction:column}
.apparatus .carousel__progress i{background:var(--accent)}

/* 5. Paula */
.paula__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,7vw,110px);align-items:center}
.oval{justify-self:center;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:22px}
.oval__frame{width:100%;padding:12px;border:1px solid rgb(var(--on-deep-rgb) / .38);border-radius:50%}
.oval__frame img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:50%}
.oval figcaption{font-size:.74rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-on-deep);text-align:center}
.paula__text{display:flex;flex-direction:column;gap:20px}
.paula__text .display{margin-bottom:10px}

/* 6. Recenzii */
.reviews__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);align-items:start}
.review{display:flex;flex-direction:column;gap:20px;padding:clamp(26px,3vw,38px) clamp(24px,2.6vw,34px) clamp(24px,3vw,32px);margin:0}
.review__stars{display:flex;gap:4px;color:var(--gold)}
.review__stars svg{width:18px;height:18px}
.review blockquote{display:flex;flex-direction:column;gap:12px}
.review blockquote p{font-family:var(--font-display);font-size:1.28rem;line-height:1.45;color:var(--ink)}
.review figcaption{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--line);margin-top:auto}
.avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--deep);color:var(--on-deep);font-family:var(--font-display);font-size:1.3rem;font-weight:500}
.review figcaption b{display:block;font-size:.9rem;font-weight:500;letter-spacing:.12em;color:var(--ink)}
.review figcaption small{display:block;font-size:.8rem;color:var(--ink-soft);line-height:1.3}
.reviews__more{display:flex;justify-content:center;margin-top:clamp(32px,4vw,52px)}

/* 7. Prețuri */
.intro-offer{margin-bottom:clamp(16px,2.4vw,28px);--c:26px}
.intro-offer__in{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,5vw,72px);padding:clamp(28px,4vw,52px) clamp(26px,4.5vw,64px)}
.intro-offer h3,.plan__head h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.1;margin-bottom:12px}
.intro-offer p:not(.price):not(.price__meta){max-width:44ch}
.intro-offer__price{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:none}
.price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:1rem;color:inherit}
.price b{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;font-family:var(--font-display);font-size:clamp(2.6rem,4.6vw,3.6rem);font-weight:400;line-height:1}
.price small{display:block;width:100%;font-size:.8rem;color:var(--ink-soft);line-height:1.4}
.price__meta{font-size:.76rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px}
.cut--deep .price b{color:var(--on-deep)}

.pricing__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.plan{display:flex;flex-direction:column;gap:6px;padding:clamp(28px,3.6vw,48px) clamp(24px,3.4vw,46px)}
.plan__head{margin-bottom:8px}
.plan__head h3{margin-bottom:0}
.plan__head span{color:var(--gold);font-size:.7em}
.plan__list{margin-bottom:26px}
.plan__row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.plan__row:first-child{border-top:0}
.plan__row div b{display:block;font-weight:500;font-size:1.02rem;color:var(--ink);line-height:1.4}
.plan__row div small{display:block;font-size:.84rem;color:var(--ink-soft)}
.plan__row .price{flex-direction:row;justify-content:flex-end;text-align:right;color:var(--ink-soft)}
.plan__row .price b{font-size:2.1rem;color:var(--ink)}
.plan__row .price small{text-align:right}
.plan__row--main .price b{font-size:2.6rem}
.plan .btn{margin-top:auto}
.notice{display:flex;gap:18px;align-items:flex-start;max-width:760px;margin:clamp(28px,4vw,48px) auto 0;padding:22px 26px;border:1px dashed var(--line-strong);border-radius:20px}
.notice svg{width:26px;height:26px;flex:none;color:var(--gold);margin-top:2px}
.notice h3{font-size:.76rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}

/* 8. Contact */
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,88px);align-items:start}
.contact__info{display:flex;flex-direction:column;gap:30px}
.info{display:flex;flex-direction:column;gap:26px}
.info li{display:flex;gap:20px;align-items:flex-start}
.info li > svg{width:26px;height:26px;color:var(--gold);flex:none;margin-top:3px}
.info h3{font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.info p{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;font-family:var(--font-display);font-size:clamp(1.4rem,2.2vw,1.7rem);line-height:1.3;color:var(--ink)}
.info a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease)}
.info a:hover{background-size:100% 1px}
.hours{display:flex;flex-direction:column;gap:2px}
.hours div{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;display:flex;gap:18px;flex-wrap:wrap;font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.55rem);line-height:1.4;color:var(--ink)}
.hours dt{min-width:9.5em;color:var(--ink-soft)}
.contact__note{max-width:46ch;padding-left:18px;border-left:1px solid var(--gold)}
.social{display:flex;gap:12px}
.map{--c:20px}
.map .cut__in{padding:8px;background:var(--surface)}
.map iframe{display:block;width:100%;aspect-ratio:16/10;border:0;filter:grayscale(.45) sepia(.12) contrast(.96);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}

.cut--form{--c:26px}
.formcard{padding:clamp(28px,4vw,52px) clamp(22px,3.6vw,48px)}
.formcard__title{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,3.4vw,2.7rem);line-height:1.1;margin-bottom:10px}
.formcard__lead{margin-bottom:28px}
.field{display:flex;flex-direction:column;gap:8px;margin:0 0 22px;padding:0;border:0;min-width:0}
.field label,.field legend{font-size:.74rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding:0}
.field label span{text-transform:none;letter-spacing:0;color:var(--ink-soft);font-weight:400}
.field input[type="text"],.field textarea{
  width:100%;padding:15px 22px;border:1px solid var(--line-strong);border-radius:999px;background:var(--bg);
  font-size:1rem;color:var(--ink);transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease);
}
.field textarea{border-radius:24px;resize:vertical;min-height:120px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-soft);opacity:.7}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgb(var(--ink-rgb) / .1)}
.field input.is-invalid,.field textarea.is-invalid{border-color:#a53a2a}
.choice__row{display:flex;flex-wrap:wrap;gap:10px}
.choice label{cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400;font-size:.98rem}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{display:inline-block;padding:11px 20px;border:1px solid var(--line-strong);border-radius:999px;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.choice label:hover span{border-color:var(--ink)}
.choice input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.choice input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__status{min-height:1.6em;margin-top:16px;font-size:.98rem;text-align:center}
.form__status.is-ok{color:var(--accent);font-weight:500}
.form__status.is-err{color:#a53a2a;font-weight:500}
.form__status a{color:inherit}
.form__fine{font-size:.82rem;text-align:center;margin-top:6px;opacity:.9}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}

/* Footer */
.footer{background:var(--deep-2);color:var(--on-deep);padding-top:clamp(56px,7vw,90px)}
.footer p,.footer small{color:var(--on-deep-soft)}
.footer__grid{display:grid;grid-template-columns:1.2fr 1.4fr auto;gap:36px;align-items:start;padding-bottom:48px}
.footer__brand svg{width:34px;height:34px;color:var(--gold-on-deep);margin-bottom:12px}
.footer__brand p{font-family:var(--font-display);font-size:1.7rem;color:var(--on-deep);line-height:1.1;margin-bottom:8px}
.footer__brand em{color:var(--gold-on-deep)}
.footer__links{display:grid;grid-template-columns:repeat(2,auto);gap:8px 40px;justify-content:start}
.footer__links a{font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--on-deep-soft);transition:color .3s}
.footer__links a:hover{color:var(--on-deep)}
.social--footer .icon-btn{border-color:rgb(var(--on-deep-rgb) / .35);color:var(--on-deep)}
.social--footer .icon-btn:hover{background:var(--on-deep);color:var(--deep-2);border-color:var(--on-deep)}
.footer__legal{padding-block:24px;border-top:1px solid rgb(var(--on-deep-rgb) / .16)}
.footer__legal p{font-size:.82rem}

/* Bară acțiuni mobil */
.dock{display:none}

/* 6. ANIMAȚII -------------------------------------------------------------- */
@keyframes letterIn{from{opacity:0}to{opacity:1}}
@keyframes markIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes introRise{
  0%,74%{transform:none;opacity:1;animation-timing-function:cubic-bezier(.7,0,.2,1)}
  96%{transform:translateY(-34vh) scale(.6);opacity:1}
  100%{transform:translateY(-34vh) scale(.6);opacity:0}
}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes introWipe{
  0%,74%{clip-path:inset(0 0 0 0);visibility:visible;animation-timing-function:cubic-bezier(.7,0,.2,1)}
  99%{clip-path:inset(0 0 100% 0);visibility:visible}
  100%{clip-path:inset(0 0 100% 0);visibility:hidden}
}
@keyframes heroZoom{from{transform:scale(1.22)}to{transform:scale(1)}}
@keyframes maskUp{from{transform:translateY(115%)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes scrollCue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}

/* Reveal la scroll (doar când JS rulează; fără JS conținutul rămâne vizibil) */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 110ms)}
.js .reveal.is-in{opacity:1;transform:none}
.js .eyebrow i,.js .eyebrow--center::after{transform:scaleX(0);transition:transform 1.1s var(--ease) .15s}
.js .is-in .eyebrow i,.js .eyebrow.is-in i,.js .eyebrow--center.is-in::after{transform:scaleX(1)}
.js .method__rule{transform:scaleY(0);transition:transform 1.4s var(--ease) .2s}
.js .method__rule.is-in{transform:scaleY(1)}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .intro{display:none}
  .js .reveal,.js .method__rule{opacity:1;transform:none}
  .js .eyebrow i,.js .eyebrow--center::after{transform:none}
}

/* 7. RESPONSIVE ------------------------------------------------------------ */
@media (max-width:1100px){
  .nav__toggle{display:block}
  .nav__pill{padding-left:18px}
  .nav__links{
    position:absolute;left:0;right:0;top:calc(100% + 10px);flex-direction:column;align-items:stretch;gap:0;margin:0;padding:10px 16px 18px;
    background:var(--bg);
    border:1px solid var(--line-strong);border-radius:28px;box-shadow:0 30px 60px -30px rgb(var(--ink-rgb) / .55);
    opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .35s var(--ease),transform .45s var(--ease-out),visibility .35s;
  }
  .nav__links.is-open{opacity:1;visibility:visible;transform:none}
  .nav__links li{border-bottom:1px solid var(--line)}
  .nav__links li:last-child{border:0;padding-top:14px}
  .nav__links a:not(.btn){padding:16px 8px;font-family:var(--font-display);font-size:1.7rem;font-weight:400;letter-spacing:.01em;text-transform:none}
  .nav__links a:not(.btn)::after{display:none}
  .nav__cta-item{margin:0}
  .nav__links .btn{width:100%;--h:52px}
}
@media (max-width:900px){
  body{padding-bottom:0}
  .method__grid{grid-template-columns:1fr}
  .method__rule{display:none}
  .arch{order:-1;max-width:340px}
  .apparatus__intro,.contact__grid,.paula__grid{grid-template-columns:1fr}
  .paula__grid .oval{max-width:340px}
  .reviews__grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .pricing__grid{grid-template-columns:1fr}
  .intro-offer__in{flex-direction:column;align-items:flex-start}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}

  .dock{
    position:fixed;z-index:80;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));
    display:flex;gap:8px;padding:8px;border-radius:999px;
    background:rgb(var(--bg-rgb) / .9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border:1px solid var(--line-strong);box-shadow:0 14px 40px -14px rgb(var(--ink-rgb) / .5);
    transform:translateY(140%);transition:transform .6s var(--ease-out);
  }
  .dock.is-visible{transform:none}
  .dock__btn{
    display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border-radius:999px;
    font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--line-strong);
  }
  .dock__btn svg{width:20px;height:20px}
  .dock__btn:not(.dock__btn--main){width:48px;padding:0;flex:none}
  .dock__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dock__btn--main{white-space:nowrap}
  .dock__btn--main{flex:1;background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .footer{padding-bottom:84px}
}
@media (max-width:640px){
  body{font-size:1rem}
  .nav{inset:10px 0 auto;padding-inline:10px}
  .brand__name{font-size:1.12rem}
  .palette__label,.palette__chev{display:none}
  .palette__btn{padding:0 12px}
  .hero{padding:8px}
  .hero__veil{background:
    radial-gradient(90% 48% at 50% 52%,rgb(var(--deep-rgb) / .5),transparent 85%),
    linear-gradient(180deg,rgb(var(--deep-rgb) / .55) 0%,rgb(var(--deep-rgb) / .42) 45%,rgb(var(--deep-rgb) / .82) 100%)}
  .hero__frame{--c:22px;min-height:calc(100svh - 16px)}
  .hero__content{padding-bottom:150px}
  .hero__corner--l{display:none}
  .hero__corner--r{left:50%;right:auto;transform:translateX(-50%) !important;flex-direction:column}
  .btn--lg{padding:0 1.5em;font-size:.76rem;letter-spacing:.12em}
  .plan__row{flex-direction:column;gap:8px}
  .plan__row .price{justify-content:flex-start;text-align:left}
  .plan__row .price small{text-align:left}
  .hours div{gap:0 14px}
  .hours dt{min-width:0;width:auto;flex:1 1 9em}
  .plan .btn{letter-spacing:.1em;padding-inline:1.1em}
  .carousel__ui{gap:18px}
  .footer__grid{grid-template-columns:1fr}
}
@media (hover:none){
  .carousel__track > .card:hover{transform:none}
}