/* ============================================================
   AXIAL AUTO — showcase de categorie auto
   HTML semantic + CSS propriu. Zero dependențe, zero CDN.
   Deciziile din spatele valorilor sunt în ../../../DIRECTION.md
   ============================================================ */

/* ---------- fonturi locale ---------- */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/space-grotesk-latin-ext-500-normal.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:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/space-grotesk-latin-500-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/space-grotesk-latin-ext-700-normal.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:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/space-grotesk-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/archivo-latin-ext-400-normal.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:"Archivo";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/archivo-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/archivo-latin-ext-600-normal.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:"Archivo";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/archivo-latin-600-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ibm-plex-mono-latin-ext-400-normal.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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ibm-plex-mono-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokenuri ---------- */
:root{
  --paper:#F4F3F0;
  --paper-warm:#EDEBE5;
  --surface:#FFFFFF;
  --panel:#101214;
  --panel-2:#1B1E21;
  --ink:#16181A;
  --ink-2:#5C6166;
  --line:#DCDAD4;
  --line-panel:#2C3135;
  --accent:#C43D00;
  --accent-hot:#FF6B2C;
  --on-panel:#E8E6E1;
  --on-panel-2:#9BA3A9;

  --dw-solid:#33383C;
  --dw-thin:#9AA0A5;
  --dw-axis:#C3C0B8;

  --f-disp:"Space Grotesk",system-ui,sans-serif;
  --f-body:"Archivo",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;

  --t-fast:200ms; --t-base:300ms; --t-slow:500ms;
  --ease:cubic-bezier(.4,0,.2,1);

  --gut:20px;
  --r:4px;          /* colțuri mici: registrul e tehnic, nu prietenos */
  --hdr-h:66px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--f-disp);font-weight:700;margin:0}
p,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit}
button,input{font:inherit;color:inherit}
/* regulile de mai jos folosesc `display`, care ar învinge `[hidden]` din foaia
   browserului; atributul rămâne autoritatea asupra vizibilității */
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.panel :focus-visible{outline-color:var(--accent-hot)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

.wrap{width:min(100% - (var(--gut) * 2),1180px);margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff;padding:12px 18px;font-weight:600}
.skip:focus{left:8px;top:8px}

.ico{width:20px;height:20px;flex:none;display:block}

/* ---------- bara de concept ---------- */
.demo-bar{background:var(--panel);color:var(--on-panel-2);font-size:13px;line-height:1.45;padding:9px 0}
.demo-bar__in{display:flex;gap:12px;align-items:baseline}
.demo-bar__tag{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--panel);background:var(--accent-hot);padding:3px 7px;flex:none;
}
.demo-bar p{margin:0}

/* ---------- antet ---------- */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);transition:box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
  border-bottom:1px solid transparent}
.hdr.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(0,0,0,.5)}
.hdr__in{display:flex;align-items:center;gap:24px;min-height:var(--hdr-h)}

/* min-height, nu padding: sub 600px descriptorul dispare și marca rămâne un
   singur rând, adică o țintă tactilă sub prag */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;
  padding:6px 0;min-height:46px}
.brand__mark{width:30px;height:30px;color:var(--accent);flex:none}
.brand__mark svg{width:100%;height:100%}
.brand__txt{display:block;min-width:0}
.brand__name{font-family:var(--f-disp);font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1.1;
  display:block;white-space:nowrap}
.brand__name span{color:var(--ink-2);font-weight:500}
.brand__sub{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);display:block;margin-top:2px;white-space:nowrap}

.nav{display:flex;gap:26px}
.nav a{text-decoration:none;font-size:15px;font-weight:600;font-family:var(--f-disp);position:relative;padding:10px 0;color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}

/* ---------- butoane ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:11px 20px;border:2px solid transparent;border-radius:var(--r);
  font-family:var(--f-disp);font-weight:700;font-size:15px;line-height:1.2;
  text-decoration:none;cursor:pointer;background:none;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.btn--lg{min-height:54px;padding:14px 26px;font-size:16.5px}
.btn--sm{min-height:44px;padding:10px 16px;font-size:14px}
.btn--sm .ico{width:17px;height:17px}
.btn--accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--accent:hover{background:#A83400;border-color:#A83400;transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(196,61,0,.8)}
.btn--accent:active{transform:translateY(0);box-shadow:none}
.btn--ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(0,0,0,.5)}
.btn--ghost:active{transform:translateY(0);box-shadow:none}
.btn--onpanel{background:transparent;border-color:var(--line-panel);color:var(--on-panel)}
.btn--onpanel:hover{border-color:var(--on-panel-2);background:var(--panel-2);transform:translateY(-2px)}
.btn--wa{background:#1F7A46;border-color:#1F7A46;color:#fff}
.btn--wa:hover{background:#1A6539;border-color:#1A6539}
.panel .btn--accent{background:var(--accent-hot);border-color:var(--accent-hot);color:#17120E}
.panel .btn--accent:hover{background:#FF8850;border-color:#FF8850}

.hdr__call .ico{width:17px;height:17px}
.hdr__call{padding:10px 16px;min-height:44px;font-size:14.5px;white-space:nowrap;flex:none}

/* ---------- starea atelierului, calculată din ceasul vizitatorului ---------- */
.status{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.status__clock{font-size:13px;letter-spacing:.02em;color:var(--ink);
  padding-right:9px;border-right:1px solid var(--line)}
.status__dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--ink-2)}
.status__txt{font-weight:400;color:var(--ink)}
.status__more{display:none}

/* Amândouă stările pâlpâie, dar spun altceva: verdele respiră lent, ca un
   aparat pornit; portocaliul clipește sec, ca o lampă de avertizare.
   Ambele animații pornesc și se opresc la `opacity: 1`, ca starea înghețată
   de `prefers-reduced-motion` să rămână un punct plin, nu unul pe jumătate stins. */
.status.is-open .status__dot{background:#2E9E5B;animation:beat-open 2.6s ease-in-out infinite}
.status.is-open .status__txt{color:#1F7A46}
.status.is-shut .status__dot{background:#E2611F;animation:beat-shut 1.8s linear infinite}
.status.is-shut .status__txt{color:#A34612}

@keyframes beat-open{
  0%   {opacity:1;   box-shadow:0 0 0 0 rgba(46,158,91,.5)}
  55%  {opacity:.45; box-shadow:0 0 0 7px rgba(46,158,91,0)}
  100% {opacity:1;   box-shadow:0 0 0 0 rgba(46,158,91,0)}
}
@keyframes beat-shut{
  0%, 46%   {opacity:1;   box-shadow:0 0 0 3px rgba(226,97,31,.22)}
  47%, 92%  {opacity:.18; box-shadow:0 0 0 0 rgba(226,97,31,0)}
  93%, 100% {opacity:1;   box-shadow:0 0 0 3px rgba(226,97,31,.22)}
}

/* ---------- tipografie de secțiune ---------- */
.eyebrow{
  font-family:var(--f-disp);font-weight:500;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:9px;margin-bottom:18px;
}
.eyebrow__dot{width:6px;height:6px;background:currentColor;flex:none;transform:rotate(45deg)}
.panel .eyebrow{color:var(--accent-hot)}

h1{font-size:clamp(40px,8.4vw,86px);line-height:1.02;letter-spacing:-.03em}
.h1-muted{color:var(--ink-2);font-weight:500}
h2{font-size:clamp(28px,5vw,44px);line-height:1.08;letter-spacing:-.02em}
h3{font-size:clamp(20px,2.6vw,25px);line-height:1.2;letter-spacing:-.015em}
.lede{color:var(--ink-2);font-size:clamp(16.5px,1.6vw,18.5px);line-height:1.6;max-width:56ch;margin-top:16px}
.panel .lede{color:var(--on-panel-2)}

.sect{padding:clamp(64px,9vw,112px) 0}
.sect--warm{background:var(--paper-warm)}
.band{padding:clamp(60px,8vw,104px) 0}
.panel{background:var(--panel);color:var(--on-panel)}
.panel h2,.panel h3{color:#fff}

.shead{max-width:64ch;margin-bottom:clamp(36px,5vw,56px)}
.shead--row{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:flex-end;justify-content:space-between;max-width:none}
.shead--split{max-width:none;display:grid;gap:clamp(24px,3vw,44px)}
.shead__copy{max-width:56ch}

/* desenul roții, mutat din hero: aici e locul lui, după programare */
.fig-wheel{margin:0}
.fig-wheel svg{width:100%;height:auto;display:block}
.fig-wheel figcaption{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);text-align:center;margin-top:2px}

/* ============================================================
   DESEN TEHNIC
   ============================================================ */
.dw-axis .dw-line{stroke:var(--dw-axis);stroke-width:1;fill:none;stroke-dasharray:14 5 3 5}
.dw-solid{stroke:var(--dw-solid);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dw-thin{stroke:var(--dw-thin);stroke-width:1.25;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dw-tread{stroke:#878D93;stroke-width:12;fill:none;stroke-dasharray:21 14.67}
.dw-spoke path{stroke:var(--dw-solid);stroke-width:11;stroke-linecap:round;fill:none}
.dw-bolt circle{stroke:var(--dw-thin);stroke-width:1.5;fill:var(--paper)}
.dw-ring ellipse{stroke:var(--dw-solid);stroke-width:2;fill:none}
.dw-ring ellipse:nth-child(even){stroke:var(--dw-thin);stroke-width:1.5}
.dw-tag rect{stroke:var(--accent);stroke-width:1.5;fill:none}
.dw-tag path{stroke:var(--accent);stroke-width:1.5;fill:none;stroke-linecap:round}

.dw-limit path{stroke:#B32020;stroke-width:1.5;fill:none;stroke-dasharray:7 4}
.dw-limit text{fill:#B32020}
.dw-ext{stroke:var(--dw-axis);stroke-width:1;fill:none}
.dw-dimline,.dw-lead{stroke:var(--accent);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dw-arrow{stroke:var(--accent);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dw-arc{stroke:var(--accent);stroke-width:1.5;fill:none}
.dw-node{fill:var(--accent);stroke:none}
.dw-num{font-family:var(--f-mono);font-size:24px;fill:var(--accent);font-variant-numeric:tabular-nums}
.dw-num--mid{text-anchor:middle}
.dw-num--sm{font-size:15px}
.dw-lbl{font-family:var(--f-mono);font-size:11px;fill:var(--ink-2);letter-spacing:.09em}
.dw-lbl--mid{text-anchor:middle}

/* desenul se construiește la intrarea în ecran */
.dw-anim{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 900ms var(--ease)}
.is-drawn .dw-anim{stroke-dashoffset:0}
html:not(.is-js) .dw-anim{stroke-dashoffset:0}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:clamp(44px,6vw,76px) 0 clamp(56px,7vw,92px);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 90% at 68% 42%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 68% 42%,#000 0%,transparent 72%);
}
.hero__in{position:relative;display:grid;gap:clamp(30px,4vw,48px);
  grid-template-areas:"copy" "facts"}
.hero__copy{grid-area:copy}
.hero__facts{grid-area:facts}

.hero h1{margin-bottom:4px}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.hero__facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hero__facts li{display:flex;align-items:center;gap:9px;background:var(--paper);padding:15px 12px;font-size:13.5px;line-height:1.35}
.hero__facts .ico{color:var(--accent);width:17px;height:17px}
.hero__facts b{font-weight:700}

/* ============================================================
   CONFIGURATOR
   ============================================================ */
.cfg{margin-top:clamp(28px,4vw,40px);background:var(--panel-2);border:1px solid var(--line-panel);
  border-radius:var(--r);padding:clamp(20px,3.4vw,34px)}
.cfg__steps{display:flex;flex-wrap:wrap;gap:8px 22px;padding-bottom:20px;margin-bottom:24px;
  border-bottom:1px solid var(--line-panel)}
.cfg__step{display:flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:700;
  font-size:14px;color:var(--on-panel-2);opacity:.55;transition:opacity var(--t-base) var(--ease),color var(--t-base) var(--ease)}
.cfg__step span{font-size:11px;letter-spacing:.06em;color:var(--on-panel-2)}
.cfg__step.is-on{opacity:1;color:#fff}
.cfg__step.is-on span{color:var(--accent-hot)}
.cfg__step.is-done{opacity:.9;color:var(--on-panel-2)}

.cfg__pane{border:0;padding:0;margin:0;min-inline-size:0}
.cfg__pane:not(.is-on){display:none}
html:not(.is-js) .cfg__pane{display:block;margin-bottom:28px}
.cfg__q{font-family:var(--f-disp);font-weight:700;font-size:clamp(19px,2.4vw,23px);color:#fff;
  padding:0;margin-bottom:18px;letter-spacing:-.015em}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips--time{margin-top:14px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;width:100%;height:100%}
.chip span{display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:12px 20px;
  border:2px solid var(--line-panel);border-radius:var(--r);background:transparent;color:var(--on-panel);
  font-family:var(--f-disp);font-weight:700;font-size:15px;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.chip .ico{color:var(--on-panel-2);transition:color var(--t-fast) var(--ease)}
.chip:hover span{border-color:var(--on-panel-2)}
.chip input:checked + span{border-color:var(--accent-hot);background:rgba(255,107,44,.13);color:#fff}
.chip input:checked + span .ico{color:var(--accent-hot)}
.chip input:focus-visible + span{outline:3px solid var(--accent-hot);outline-offset:3px}
.chip--sm span{min-height:44px;padding:9px 16px;font-size:14px;font-weight:500;font-family:var(--f-body)}

.cfg__live{display:flex;gap:11px;margin-top:22px;padding-top:20px;border-top:1px dashed var(--line-panel);
  font-size:14.5px;color:var(--on-panel-2);max-width:62ch}
.cfg__live .ico{color:var(--accent-hot);width:18px;height:18px;margin-top:3px}
.cfg__live b{color:#fff}

.field{margin-bottom:20px;max-width:440px}
.field label{display:block;font-family:var(--f-disp);font-weight:700;font-size:13.5px;margin-bottom:8px;color:#fff}
.field__opt{font-weight:500;color:var(--on-panel-2)}
.field input{width:100%;min-height:50px;padding:12px 15px;background:var(--panel);color:#fff;
  border:2px solid var(--line-panel);border-radius:var(--r);
  transition:border-color var(--t-fast) var(--ease)}
.field input::placeholder{color:#6E767C}
.field input:hover{border-color:var(--on-panel-2)}
.field input:focus{border-color:var(--accent-hot);outline:none}
.field__hint{font-size:13.5px;color:var(--on-panel-2);margin-top:8px;margin-bottom:10px}

.cfg__foot{display:flex;gap:12px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line-panel)}
.cfg__foot [data-next]{margin-left:auto}
html:not(.is-js) .cfg__foot,html:not(.is-js) .cfg__steps{display:none}

.cfg__out{margin-top:26px;padding-top:26px;border-top:1px solid var(--line-panel)}
.cfg__out-lbl{font-size:10px;letter-spacing:.16em;color:var(--accent-hot);margin-bottom:12px}
.cfg__msg{background:var(--panel);border:1px solid var(--line-panel);border-left:3px solid var(--accent-hot);
  padding:16px 18px;font-size:16px;color:#fff;border-radius:0 var(--r) var(--r) 0}
.cfg__eta{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:14.5px;color:var(--on-panel-2)}
.cfg__eta .ico{color:var(--accent-hot);width:18px;height:18px}
.cfg__eta b{color:#fff}
.cfg__send{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

.cfg__nojs{display:none;margin-top:24px}
html:not(.is-js) .cfg__nojs{display:block}

/* ============================================================
   TABURI DE SERVICII
   ============================================================ */
.tabs__bar{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
  border-bottom:1px solid var(--line);margin-bottom:0}
.tabs__bar::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;min-height:52px;padding:14px 20px;
  border:0;background:none;cursor:pointer;font-family:var(--f-disp);font-weight:700;font-size:15px;
  color:var(--ink-2);position:relative;transition:color var(--t-fast) var(--ease)}
.tab .ico{width:18px;height:18px;color:currentColor}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent);
  transform:scaleX(0);transition:transform var(--t-base) var(--ease)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
html:not(.is-js) .tabs__bar{display:none}

.tabs__panel{background:var(--surface);border:1px solid var(--line);border-top:0;
  padding:clamp(22px,3.4vw,40px)}
/* fara JavaScript nimeni nu poate schimba tabul, deci `hidden` din sursa ar
   ascunde definitiv trei din cele patru panouri. Controlul dispare, nu oferta. */
html:not(.is-js) .tabs__panel[hidden]{display:block !important}
html:not(.is-js) .tabs__panel{border-top:1px solid var(--line);margin-top:20px}
.pane{display:grid;gap:clamp(24px,3.4vw,44px);align-items:start}
.pane h3{margin-bottom:18px}
.ops li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px dashed var(--line)}
.ops li:last-child{border-bottom:0}
.ops span{font-size:16px}
.ops b{font-family:var(--f-mono);font-size:14px;color:var(--accent);white-space:nowrap}
.pane__note{display:flex;gap:10px;margin-top:20px;padding:14px 16px;background:var(--paper-warm);
  font-size:14.5px;color:var(--ink-2);border-left:3px solid var(--accent)}
.pane__note .ico{color:var(--accent);width:18px;height:18px;margin-top:2px}
.pane__draw svg{width:100%;height:auto;display:block}

/* ============================================================
   DECODOR
   ============================================================ */
.dec{background:var(--surface);border:1px solid var(--line);padding:clamp(22px,3.4vw,40px)}
.dec__top{display:grid;gap:24px;padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.field--big label{color:var(--ink);font-size:14px}
.field--big input{background:var(--paper);color:var(--ink);border-color:var(--line);
  min-height:62px;font-size:clamp(20px,3vw,26px);letter-spacing:.02em;padding:12px 18px}
.field--big input:hover{border-color:var(--ink-2)}
.field--big input:focus{border-color:var(--accent)}
.field--big .field__hint{color:var(--ink-2)}
.dec__ex{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dec__ex-lbl{font-size:10px;letter-spacing:.16em;color:var(--ink-2);width:100%}
.dec__chip{border:1px solid var(--line);background:var(--paper);padding:11px 12px;min-height:46px;
  font-size:13px;cursor:pointer;border-radius:var(--r);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.dec__chip:hover{border-color:var(--accent);color:var(--accent)}

.dec__body{display:grid;gap:clamp(26px,4vw,48px);align-items:center}
.dec__draw{margin:0}
.dec__draw svg{width:100%;height:auto;display:block}
.dec__draw figcaption{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);text-align:center;margin-top:6px}
.dec__draw .dw-dim{transition:opacity var(--t-fast) var(--ease)}
.dec__draw.is-focus .dw-dim{opacity:.22}
.dec__draw.is-focus .dw-dim.is-lit{opacity:1}

.dec__list li{display:flex;gap:16px;padding:15px 0;border-bottom:1px dashed var(--line);
  transition:background var(--t-fast) var(--ease)}
.dec__list li:last-child{border-bottom:0}
.dec__list li.is-lit{background:linear-gradient(90deg,rgba(196,61,0,.07),transparent 70%)}
.dec__k{flex:none;min-width:62px;font-size:19px;color:var(--accent);font-weight:400}
.dec__v b{display:block;font-family:var(--f-disp);font-size:16px;letter-spacing:-.01em}
.dec__v em{font-style:normal;color:var(--ink-2);font-size:15px}
.dec__total{margin-top:20px;padding:15px 18px;background:var(--paper-warm);font-size:16px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dec__total .mono:first-child{color:var(--accent);font-size:19px}
.dec__err{display:flex;gap:10px;margin-top:18px;padding:14px 16px;border-left:3px solid var(--accent);
  background:#FDF0EA;font-size:14.5px}
.dec__err .ico{color:var(--accent);flex:none;margin-top:2px}
.dec__cta{margin-top:20px;padding-top:20px;border-top:1px dashed var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.dec__cta p{font-size:15px;color:var(--ink-2);flex:1;min-width:200px}

/* ============================================================
   HOTEL DE ANVELOPE
   ============================================================ */
.hotel{display:grid;gap:clamp(30px,4vw,56px);align-items:center}
.hotel__steps{margin-top:30px;display:grid;gap:2px}
.hotel__steps li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:18px 0;border-top:1px solid var(--line)}
.hotel__steps li:last-child{border-bottom:1px solid var(--line)}
.hotel__steps span{grid-row:span 2;font-size:13px;color:var(--accent);padding-top:3px}
.hotel__steps b{font-family:var(--f-disp);font-size:17px;letter-spacing:-.01em}
.hotel__steps em{font-style:normal;color:var(--ink-2);font-size:15.5px}
.hotel__meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;font-size:11px;letter-spacing:.13em;color:var(--ink-2)}
.hotel__meta span{display:inline-flex;align-items:center;gap:8px}
.hotel__meta .ico{width:16px;height:16px;color:var(--accent)}
.hotel__draw{margin:0}
.hotel__draw svg{width:100%;height:auto;display:block}

/* ============================================================
   CIFRE
   ============================================================ */
.band--nums{padding-block:clamp(52px,7vw,84px)}
.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 24px}
.nums li{display:flex;flex-direction:column;gap:8px}
.num{font-family:var(--f-disp);font-weight:700;font-size:clamp(40px,6.6vw,68px);line-height:1;
  letter-spacing:-.04em;color:var(--accent-hot);font-variant-numeric:tabular-nums}
.nums span{font-size:14.5px;color:var(--on-panel-2);line-height:1.45;max-width:24ch}
.nums__note{margin-top:clamp(34px,4.5vw,50px);font-size:10px;letter-spacing:.16em;color:#5F686E}

/* ============================================================
   RECENZII
   ============================================================ */
.rating{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-2);flex-wrap:wrap}
.rating b{font-size:19px;color:var(--ink)}
.stars{display:inline-flex;gap:2px;color:#B9760A}
.stars .ico{width:17px;height:17px}

.revs__view{overflow:hidden}
.revs__track{display:flex;gap:20px;transition:transform var(--t-slow) var(--ease)}
html:not(.is-js) .revs__view{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
html:not(.is-js) .revs__track{transition:none}
.rev{flex:0 0 100%;background:var(--surface);border:1px solid var(--line);padding:26px 24px;
  display:flex;flex-direction:column;gap:16px;scroll-snap-align:start}
.rev__q{width:24px;height:24px;color:var(--accent);opacity:.35}
.rev p{font-size:17px;line-height:1.55;flex:1}
.rev footer{display:flex;flex-direction:column;gap:3px;padding-top:14px;border-top:1px dashed var(--line)}
.rev footer b{font-family:var(--f-disp);font-size:15.5px}
.rev footer span{font-size:10.5px;letter-spacing:.13em;color:var(--accent)}

.revs__ctl{display:flex;align-items:center;gap:14px;margin-top:24px}
html:not(.is-js) .revs__ctl{display:none}
.rnd{width:46px;height:46px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--line);background:var(--surface);border-radius:50%;cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.rnd:hover:not(:disabled){border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.rnd:active:not(:disabled){transform:translateY(0)}
.rnd:disabled{opacity:.34;cursor:default}
.revs__dots{display:flex;gap:2px;margin-left:auto}
.dot{width:34px;height:44px;padding:0;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center}
.dot::before{content:"";display:block;width:100%;height:2px;background:var(--line);transition:background var(--t-fast) var(--ease)}
.dot:hover::before{background:var(--ink-2)}
.dot[aria-current="true"]::before{background:var(--accent);height:3px}
.revs__note{margin-top:24px;font-size:10px;letter-spacing:.16em;color:var(--ink-2)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{display:grid;gap:clamp(30px,4vw,56px);align-items:start}
.contact__copy .btn{margin-top:14px;margin-right:10px}
.contact__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ccard{background:var(--surface);border:1px solid var(--line);padding:20px 18px;display:flex;
  flex-direction:column;gap:8px;position:relative}
.ccard .ico{color:var(--accent);width:22px;height:22px}
.ccard b{font-family:var(--f-disp);font-size:16px}
.ccard p{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.ccard--todo{background:transparent;border-style:dashed}
.todo{font-size:9.5px;letter-spacing:.16em;color:var(--accent);border:1px solid currentColor;
  padding:3px 7px;align-self:flex-start;margin-top:4px}

/* ============================================================
   SUBSOL ȘI BARA MOBILĂ
   ============================================================ */
.foot{padding:clamp(40px,5vw,60px) 0 clamp(88px,10vw,60px)}
.foot__in{display:grid;gap:18px}
.foot__brand{font-family:var(--f-disp);font-weight:700;font-size:21px;letter-spacing:-.01em;color:#fff}
.foot__brand span{color:var(--on-panel-2);font-weight:500}
.foot__note{font-size:13.5px;color:var(--on-panel-2);max-width:66ch;line-height:1.55}
.foot__nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot__nav a{font-size:14px;color:var(--on-panel-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;
  transition:color var(--t-fast) var(--ease)}
.foot__nav a:hover{color:var(--accent-hot)}

.callbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:8px;padding:9px 12px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--line-panel)}
.callbar .btn{flex:1;min-height:50px;font-size:15px}

/* ---------- dezvăluire la derulare ---------- */
.rv{opacity:0;transform:translateY(10px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.rv.is-in{opacity:1;transform:none}
html:not(.is-js) .rv{opacity:1;transform:none}

/* ============================================================
   PRAGURI
   ============================================================ */
@media (min-width:600px){
  :root{--gut:28px}
  .hero__facts{grid-template-columns:repeat(4,1fr)}
  .cfg__send,.hero__acts{flex-wrap:nowrap}
  .dec__top{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:end}
  .dec__ex-lbl{width:auto;margin-right:4px}
  .status__more{display:inline}
}

@media (min-width:900px){
  :root{--gut:40px;--hdr-h:78px}
  .nav{display:flex}
  .hdr__call{display:inline-flex}
  .callbar{display:none}
  .foot{padding-bottom:clamp(40px,5vw,60px)}

  /* hero fără imagine: titlul are loc să crească, reperele urcă lângă el */
  .hero__in{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
    grid-template-areas:"copy facts";align-items:center;
    column-gap:clamp(36px,5vw,72px)}
  .hero__facts{grid-template-columns:1fr;background:none;border:0;border-radius:0}
  .hero__facts li{background:none;border-top:1px solid var(--line);padding:17px 2px;font-size:15px}
  .hero__facts li:last-child{border-bottom:1px solid var(--line)}

  .shead--split{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);align-items:center;
    column-gap:clamp(32px,4vw,64px)}

  .pane{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
  .dec__body{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .hotel{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .contact{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .nums{grid-template-columns:repeat(4,1fr)}
  .rev{flex:0 0 calc((100% - 40px) / 3)}
  .foot__in{grid-template-columns:auto 1fr auto;align-items:center;gap:32px}
  .foot__note{grid-column:2}
}

@media (max-width:899px){
  .nav,.hdr__call{display:none}
}

/* Starea are două case. Sub 900px umple dreapta antetului, care altfel e goală,
   pentru că meniul și butonul de apel dispar. De la 1200px încap toate patru.
   Între ele antetul are deja meniu și buton: a cincea piesă rupea marca și
   numărul pe două rânduri, măsurat la 1440 înainte de pragul ăsta. */
@media (min-width:900px) and (max-width:1199px){
  .status{display:none}
}

@media (max-width:599px){
  .demo-bar__more{display:none}
  /* la 320 marca și starea nu încap amândouă cu tot cu descriptor */
  .brand__sub{display:none}
  .status__clock{padding-right:7px}
  .status{gap:7px}
  .hero__acts{display:grid;grid-template-columns:1fr}
  .hero__acts .btn{width:100%}
  .cfg__send{display:grid;grid-template-columns:1fr}
  .contact__copy .btn{width:100%;margin-right:0}
}

@media (min-width:600px) and (max-width:899px){
  .rev{flex:0 0 calc((100% - 20px) / 2)}
}

/* sub 400px ceasul nu mai încape lângă marcă; punctul care pâlpâie și starea
   rămân, pentru că ele poartă informația */
@media (max-width:399px){
  .status__clock{display:none}
}

/* ---------- text mai mare pe desenele mici ---------- */
@media (max-width:599px){
  .dw-num{font-size:30px}
  .dw-num--sm{font-size:19px}
  .dw-lbl{font-size:14px}
  .hero__draw{margin-inline:-6px}
}

/* ---------- mișcare redusă ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;animation-iteration-count:1 !important}
  .rv{opacity:1;transform:none}
  .dw-anim{stroke-dashoffset:0}
}