/* ==========================================================================
   EVO CAD EXPERT — sistem vizual
   inspirat din: interfață CAD (ceață gri, liste de instrumente, carduri pătrate),
   fâșii diagonale cu foto alb-negru, straturi „explodate” pe negru cu etichete.
   ========================================================================== */
:root{
  --fog-top:#c8ccd1;
  --fog-mid:#b1b6bc;
  --fog-bot:#a2a8af;
  --ink:#0b0d10;
  --ink-2:#2b3036;      /* text secundar: ≥ 5,5:1 pe toată ceața */
  --ink-3:#353b42;      /* etichete mici: ≥ 4,7:1 */
  --ink-soft:#4a5058;   /* doar text mare (a doua linie a titlurilor): ≥ 3,4:1 */
  --line:rgba(11,13,16,.22);

  --black:#050607;
  --black-2:#0d0f12;
  --on-black:#e8eaec;
  --on-black-2:#8b9198;
  --line-dark:rgba(232,234,236,.16);

  --lidar:#37d4ff;
  --stake:#ff4b3a;
  --gold:#e3b04b;

  --cond:"Barlow Condensed", "Arial Narrow", sans-serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"Instrument Serif", Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, Consolas, monospace;

  --gutter:clamp(16px, 5vw, 80px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--black);
  color:var(--on-black);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-loading{ overflow:hidden; }
img,video,canvas{ display:block; }
a{ color:inherit; }
h1,h2,h3,p{ margin:0; }
button{ font:inherit; color:inherit; }
.wrap{ padding-left:var(--gutter); padding-right:var(--gutter); max-width:1600px; margin:0 auto; position:relative; z-index:1; }
.mono{ font-family:var(--mono); }
.ico{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
/* pe secțiunile deschise la culoare conturul auriu nu se vede → contur negru */
.fog :focus-visible,body.legal :focus-visible,body.hdr-light .site-header :focus-visible{ outline-color:var(--ink); }

.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{
  position:fixed; z-index:200; left:var(--gutter); top:12px; padding:14px 20px;
  background:var(--gold); color:#0b0d10; font:600 13px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  transform:translateY(-160%); transition:transform .25s var(--ease);
}
.skip-link:focus,.skip-link:focus-visible{ transform:none; outline:2px solid #fff; outline-offset:3px; }

/* ------------------------------------------------------------ elemente comune */
.logo-box{
  display:inline-flex; flex-direction:column;
  border:1.5px solid currentColor; padding:7px 10px 6px;
  font:600 11px/1.08 var(--sans); letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none;
}
.logo-box span:last-child{ display:flex; align-items:flex-end; gap:8px; }
.logo-box i{ width:4px; height:4px; background:currentColor; margin-bottom:2px; }
.logo-box--lg{ font-size:15px; padding:10px 14px 9px; }
.logo-box--sm{ font-size:10px; }

.panel-label{ font:500 12px/1 var(--sans); color:var(--ink-3); margin-bottom:14px; }

.tool-list{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.tool-list button,.tool-list a{
  display:flex; align-items:center; gap:14px; width:100%; min-height:44px;
  padding:10px 14px; border:0; background:none; text-align:left; text-decoration:none;
  font:500 14px/1.2 var(--sans); color:inherit; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.tool-list .is-active,.tool-list [aria-selected="true"]{ background:var(--inv-bg, var(--ink)); color:var(--inv-fg, #fff); }
.tool-list button:not(.is-active):not([aria-selected="true"]):hover{ background:var(--hover-bg, rgba(11,13,16,.08)); }

.btn{
  display:inline-flex; align-items:center; gap:.7em;
  padding:13px 22px; border:1px solid currentColor; background:transparent;
  font:600 11.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s;
}
.btn--light{ color:#fff; }
.btn--light:hover,.btn--light:focus-visible{ background:#fff; color:var(--black); }
.btn--dark{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn--dark:hover,.btn--dark:focus-visible{ background:transparent; color:var(--ink); }

.dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#fff; margin-right:10px; vertical-align:1px; }
.dot--lidar{ background:var(--lidar); box-shadow:0 0 10px var(--lidar); }
.dot--stake{ background:var(--stake); box-shadow:0 0 10px var(--stake); }
.dot--gold{ background:var(--gold); box-shadow:0 0 10px var(--gold); }
.dot--white{ background:#fff; box-shadow:0 0 10px rgba(255,255,255,.8); }

.gizmo{ width:38px; height:38px; flex:none; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.4; }
.gizmo text{ fill:currentColor; stroke:none; font:500 7px var(--sans); }

/* antet de secțiune: majuscule serif + linie fină */
.sec-top{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:9vh;
}
.kicker{ font:400 clamp(20px, 2vw, 28px)/1.12 var(--serif); text-transform:uppercase; letter-spacing:.03em; }
.kicker--r{ text-align:right; color:var(--ink-3); }
.sec-top--dark{ border-color:var(--line-dark); }
.sec-top--dark .kicker--r{ color:var(--on-black-2); }

.display{
  font:300 clamp(46px, 7.2vw, 128px)/.9 var(--cond); text-transform:uppercase; letter-spacing:.005em;
}
.display em{ font-style:normal; font-weight:200; color:var(--ink-soft); }
.display--md{ font-size:clamp(42px, 5.6vw, 96px); }
.display--xl{ font-size:clamp(54px, 10vw, 180px); }

/* carduri pătrate (ca „Spot / Area / Target / Sun”) */
.tiles{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.tile{
  position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:12px;
  min-height:150px; padding:16px; border:1px solid rgba(11,13,16,.55); color:var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.tile:hover{ background:rgba(255,255,255,.22); }
.tile b{ font:300 clamp(40px, 4vw, 60px)/1 var(--cond); }
.tile b small{ font-size:.45em; margin-left:3px; }
.tile span,.tile-k{ font:600 13px/1.3 var(--sans); max-width:200px; }
.tile-ico{ position:absolute; top:14px; right:14px; width:18px; height:18px; }
.tile--inv{ background:var(--ink); border-color:var(--ink); color:#fff; overflow:hidden; }
.tile--inv:hover{ background:#1a1e23; }
.tile--inv::before{ content:""; position:absolute; top:-30px; right:-20px; width:120px; height:80px; background:radial-gradient(closest-side, rgba(255,255,255,.55), transparent); pointer-events:none; }
.tile-v{ font:400 14px/1.35 var(--sans); overflow-wrap:anywhere; }
.tiles--contact .tile-v{ font-size:clamp(13px, 1vw, 14px); }
.tile--dark{ border-color:rgba(232,234,236,.3); color:var(--on-black); }
.tile--dark:hover{ background:rgba(255,255,255,.05); }
.tile--dark.tile--inv{ background:var(--on-black); color:var(--black); border-color:var(--on-black); }
.tile--dark.tile--inv::before{ background:radial-gradient(closest-side, rgba(0,0,0,.18), transparent); }
.tile--dark .tile-v{ text-decoration:none; }

/* lumea „ceață” — gri rece cu podea în perspectivă */
.fog{ position:relative; overflow:hidden; color:var(--ink); background:linear-gradient(180deg, var(--fog-top) 0%, var(--fog-mid) 55%, var(--fog-bot) 100%); }
.floor{
  position:absolute; left:-50%; right:-50%; bottom:0; height:55%; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(11,13,16,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(11,13,16,.13) 1px, transparent 1px);
  background-size:90px 90px;
  transform:perspective(700px) rotateX(72deg); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top, #000 10%, transparent 85%); mask-image:linear-gradient(to top, #000 10%, transparent 85%);
}
.dark{ background:var(--black); color:var(--on-black); }

/* ============================== LOADER ============================== */
.loader{
  position:fixed; inset:0; z-index:100;
  background:radial-gradient(120% 90% at 80% 0%, #15181c 0%, var(--black) 60%);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader-parcel{ width:min(300px, 64vw); overflow:visible; }
.lp-grid path{ stroke:var(--line-dark); stroke-width:.5; stroke-dasharray:2 4; }
.lp-line{ stroke:var(--on-black); stroke-width:1; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:lp-draw 1.5s .35s var(--ease) forwards; }
.lp-pts g{ opacity:0; animation:lp-pop .35s calc(.35s + var(--i) * .3s) var(--ease) forwards; transform-box:fill-box; transform-origin:center; }
.lp-pts circle{ fill:var(--black); stroke:var(--gold); stroke-width:1.2; }
.lp-pts text{ fill:var(--on-black-2); font:500 10px var(--mono); }
.loader-foot{ position:absolute; bottom:30px; left:var(--gutter); right:var(--gutter); display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.loader-coords{ display:flex; gap:18px; flex-wrap:wrap; font:400 10px/1 var(--mono); letter-spacing:.12em; color:var(--on-black-2); }
.loader-coords b{ font-weight:500; color:var(--on-black); }
@keyframes lp-draw{ to{ stroke-dashoffset:0; } }
@keyframes lp-pop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }

/* ============================== HEADER ============================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:clamp(20px, 5vw, 70px);
  padding:22px var(--gutter);
  color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.45); pointer-events:none;
  transition:color .35s var(--ease), text-shadow .35s var(--ease);
}
.site-header a,.site-header button{ pointer-events:auto; }
/* culoarea antetului urmează secțiunea de dedesubt (main.js → body.hdr-light) */
.site-header .logo-box{ box-shadow:0 0 14px rgba(0,0,0,.18), inset 0 0 14px rgba(0,0,0,.12); transition:box-shadow .35s; }
body.hdr-light .site-header{ color:var(--ink); text-shadow:none; }
body.hdr-light .site-header .logo-box{ box-shadow:none; }
.h-date{ display:flex; align-items:center; gap:22px; font:500 15px/1 var(--sans); }
.h-date i{ width:30px; height:1px; background:currentColor; }
.h-actions{ margin-left:auto; display:flex; align-items:center; gap:28px; }
.h-link,.h-menu{
  font:500 14px/1 var(--sans); text-decoration:none; background:none; border:0; padding:6px 0; min-height:44px; min-width:44px; cursor:pointer;
  display:flex; align-items:center; gap:12px;
}
.burger{ display:inline-flex; flex-direction:column; gap:5px; width:22px; }
.burger i{ display:block; height:1.5px; background:currentColor; transition:transform .35s var(--ease); }
.h-menu[aria-expanded="true"] .burger i:first-child{ transform:translateY(3.25px) rotate(45deg); }
.h-menu[aria-expanded="true"] .burger i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.corner{ position:fixed; bottom:24px; z-index:40; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.45); pointer-events:none; transition:color .35s var(--ease); }
body.rail-light .corner{ color:var(--ink); text-shadow:none; }
.corner--l{ left:var(--gutter); font:500 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
.corner--r{ right:var(--gutter); font:500 18px/1 var(--sans); }
.corner--r small{ font-size:11px; opacity:.6; margin-left:4px; }
.scroll-hint{ transition:opacity .5s; }
.scroll-hint span{ display:inline-block; margin-left:8px; animation:nudge 1.8s ease-in-out 4; }
.is-scrolled .scroll-hint{ opacity:0; }
@keyframes nudge{ 50%{ transform:translateY(4px); } }

.menu{
  position:fixed; inset:0; z-index:45; color:var(--on-black);
  background:rgba(5,6,7,.96); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--gutter);
  --inv-bg:#fff; --inv-fg:var(--black); --hover-bg:rgba(255,255,255,.08);
}
.menu[hidden]{ display:none; }
.menu .panel-label{ color:var(--on-black-2); }
.tool-list--menu{ gap:2px; max-width:820px; }
.tool-list--menu a{ padding:12px 16px; font:300 clamp(26px, 3.8vw, 50px)/1 var(--cond); text-transform:uppercase; gap:20px; }
.tool-list--menu a span{ font:500 11px/1 var(--mono); color:var(--on-black-2); width:24px; }
.tool-list--menu .ico{ width:24px; height:24px; }
.tool-list--menu a:hover,.tool-list--menu a:focus-visible{ background:#fff; color:var(--black); }
.tool-list--menu a:hover span,.tool-list--menu a:focus-visible span{ color:var(--ink-3); }
.menu .menu-more{ margin-top:28px; display:flex; flex-wrap:wrap; gap:0 22px; max-width:820px; padding:0 16px; }
.menu .menu-more p{ width:100%; font:500 12px/1 var(--sans); color:var(--on-black-2); margin-bottom:4px; }
.menu .menu-more a{ display:inline-flex; align-items:center; min-height:44px; font:500 14px/1.2 var(--sans); color:var(--on-black); text-decoration:none; }
.menu .menu-more a:hover,.menu .menu-more a:focus-visible{ text-decoration:underline; text-underline-offset:4px; }

/* ====================== SCROLL VIDEO (mecanica din ghid) ====================== */
.sv-track{ position:relative; height:660vh; background:var(--black); }
.sv-scan{ height:380vh; }
.sv-stage{ position:sticky; top:0; width:100%; height:100vh; height:100svh; overflow:hidden; background:var(--black); }
.sv-canvas,.sv-plate,.sv-film{ position:absolute; inset:0; width:100%; height:100%; }
.sv-plate,.sv-film{ object-fit:cover; object-position:50% 50%; transform:scale(var(--sv-zoom, 1)); transform-origin:55% 55%; }
.sv-canvas{ z-index:0; }
.sv-plate{ z-index:1; }
.sv-film{ z-index:2; opacity:0; pointer-events:none; transition:opacity .8s var(--ease); }
.sv-film.is-ready{ opacity:1; }
.sv-track.is-film .sv-canvas{ visibility:hidden; }
.sv-scrim{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(5,6,7,.78) 0%, rgba(5,6,7,.3) 38%, rgba(5,6,7,0) 60%),
    linear-gradient(260deg, rgba(5,6,7,.45) 0%, rgba(5,6,7,0) 30%),
    linear-gradient(0deg, rgba(5,6,7,.6) 0%, rgba(5,6,7,0) 30%);
}
.sv-dim{ position:absolute; inset:0; z-index:3; pointer-events:none; background:var(--black); opacity:var(--sv-dim, 0); }
.sv-chapters{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.sv-chapter{ position:absolute; left:var(--gutter); top:48%; max-width:min(640px, 88vw); opacity:0; transform:translateY(-50%); will-change:opacity, transform; }
.sv-chapter .btn{ pointer-events:auto; margin-top:28px; }
.sv-chapter.is-off .btn{ pointer-events:none; }
.sv-eyebrow{ font:500 11px/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.78); margin-bottom:20px; }
.sv-title{ font:300 clamp(46px, 6.4vw, 116px)/.9 var(--cond); text-transform:uppercase; letter-spacing:.005em; text-shadow:0 2px 30px rgba(0,0,0,.35); }
.sv-title em{ font-style:normal; font-weight:200; color:rgba(255,255,255,.62); }
.sv-title--xl{ font-size:clamp(70px, 11vw, 200px); font-weight:200; line-height:.84; }
.sv-h1{ font:inherit; margin:0; }
.sv-h1 > span{ display:block; }
.sv-sub{ margin-top:22px; max-width:440px; font-size:15px; color:#d9dcdf; }
.sv-chapter--center{ left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; max-width:90vw; width:max-content; }
.sv-title--center{ font-size:clamp(50px, 7.6vw, 140px); }
.sv-eyebrow--center{ margin:24px 0 0; }

/* panou „Etape” (lista de instrumente) */
.stage-panel{
  position:absolute; z-index:5; right:var(--gutter); top:50%; transform:translateY(-50%);
  width:230px; --inv-bg:#fff; --inv-fg:var(--black); --hover-bg:rgba(255,255,255,.12);
}
.stage-panel .panel-label{ color:rgba(255,255,255,.7); }
.stage-panel .tool-list button{ color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.stage-panel .tool-list button.is-active{ color:var(--black); text-shadow:none; }

/* citire de progres (ca „Rotation 35°”) */
.sv-hud{
  position:absolute; z-index:4; left:50%; bottom:26px; transform:translateX(-50%);
  width:min(400px, 70vw); pointer-events:none; color:#fff; text-align:center;
}
.hud-ring{ position:absolute; left:0; right:0; bottom:58px; width:100%; overflow:visible; }
.hud-ring ellipse{ fill:none; stroke:rgba(255,255,255,.35); stroke-width:1; }
.hud-ring .hud-arc{ stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-dasharray:7 93; stroke-dashoffset:var(--arc, -21); }
.hud-read{ display:inline-flex; align-items:center; gap:16px; text-align:left; }
.hud-label{ font:500 12px/1 var(--sans); color:rgba(255,255,255,.75); }
.hud-value{ font:300 40px/1.05 var(--sans); }
.hud-value small{ font-size:.5em; margin-left:2px; }
.hud-coords{ margin-top:10px; display:flex; justify-content:center; gap:16px; font:400 10px/1 var(--mono); letter-spacing:.1em; color:rgba(255,255,255,.65); }
.hud-coords b{ font-weight:500; color:#fff; }

/* fallback: reduced-motion / fără video și fără canvas */
.sv-track.no-film{ height:auto; }
.sv-track.no-film .sv-stage{ position:relative; height:auto; min-height:100vh; padding:18vh 0 14vh; }
.sv-track.no-film .sv-film,.sv-track.no-film .sv-hud,.sv-track.no-film .sv-dim,.sv-track.no-film .stage-panel{ display:none; }
.sv-track.no-film .sv-chapters{ position:relative; inset:auto; padding:0 var(--gutter); display:flex; flex-direction:column; gap:12vh; }
.sv-track.no-film .sv-chapter{ position:relative; left:auto; top:auto; opacity:1 !important; transform:none !important; }
.sv-track.no-film .sv-chapter--center{ text-align:left; width:auto; }
.sv-track.no-film .sv-scrim{ background:rgba(5,6,7,.55); }

/* ============================== 01 · DESPRE ============================== */
.intro{ padding:22vh 0 18vh; }
.intro-cols{ display:grid; grid-template-columns:1fr 1fr; gap:6vw; margin:9vh 0 12vh; max-width:1100px; }
.lead{ font:400 clamp(19px, 1.6vw, 24px)/1.45 var(--sans); }
.body{ font-size:15px; color:var(--ink-2); max-width:520px; }

/* ============================== 02 · STRATURI ============================== */
.layers{ position:relative; height:330vh; background:var(--black); color:var(--on-black); }
.layers-stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; padding-top:110px;
  background:radial-gradient(60% 55% at 50% 58%, #15181c 0%, var(--black) 70%); }
.layers .sec-top{ margin-bottom:0; }
.stack-scene{
  position:absolute; left:50%; top:57%; width:min(36vw, 50vh, 500px); aspect-ratio:1;
  transform:translate(-50%,-50%); perspective:1800px;
}
.stack{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transform:rotateX(58deg) rotateZ(var(--rz, -38deg)); }
.layer{
  position:absolute; inset:0; border-radius:3px;
  transform:translateZ(calc((var(--i) - 2.5) * var(--gap, 10px)));
  transition:opacity .5s var(--ease), filter .5s var(--ease);
}
.stack.has-active .layer{ opacity:.5; }
.stack.has-active .layer.is-active{ opacity:1; filter:brightness(1.35); }
.layer svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.layer--terrain{
  background:
    repeating-radial-gradient(circle at 34% 62%, transparent 0 9px, rgba(232,234,236,.2) 9px 10px),
    radial-gradient(circle at 70% 30%, #444b53, #17191d 75%);
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 40px 60px rgba(0,0,0,.6);
}
.layer--points{
  background:radial-gradient(circle, rgba(232,234,236,.9) 0 1.2px, transparent 1.7px) 0 0 / 13px 13px;
  -webkit-mask-image:radial-gradient(closest-side, #000 70%, transparent); mask-image:radial-gradient(closest-side, #000 70%, transparent);
}
.layer--mesh{
  background-image:linear-gradient(rgba(232,234,236,.38) 1px, transparent 1px), linear-gradient(90deg, rgba(232,234,236,.38) 1px, transparent 1px);
  background-size:7.7% 7.7%;
  -webkit-mask-image:radial-gradient(closest-side, #000 75%, transparent); mask-image:radial-gradient(closest-side, #000 75%, transparent);
}
.layer--parcel{ background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.layer--parcel path{ fill:rgba(227,176,75,.1); stroke:var(--gold); stroke-width:1.6px; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 4px rgba(227,176,75,.8)); }
.layer--parcel circle{ fill:var(--gold); }
.layer--stake{ background:rgba(255,255,255,.02); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.layer--stake rect,.layer--stake path{ fill:none; stroke:var(--stake); stroke-width:1.2px; vector-effect:non-scaling-stroke; }
.layer--stake path{ stroke-dasharray:6 3 1 3; opacity:.8; }
.layer--stake .cross{ stroke-dasharray:none; stroke-width:1.6px; }
.layer--plan{
  background:linear-gradient(135deg, rgba(220,230,240,.24), rgba(220,230,240,.06));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);
}
.layer--plan rect,.layer--plan path{ fill:none; stroke:#fff; stroke-width:1.6px; vector-effect:non-scaling-stroke; }
.layer--plan .dim{ stroke:var(--gold); stroke-width:1px; }
.anchor{ position:absolute; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.18); }

.leaders{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
.leaders path{ fill:none; stroke:rgba(232,234,236,.38); stroke-width:1; transition:stroke .4s; }
.leaders path.is-active{ stroke:#fff; }
.callouts{ list-style:none; margin:0; padding:0; position:absolute; inset:0; pointer-events:none; z-index:3; }
.callout{
  position:absolute; top:0; left:0; display:grid; gap:3px; min-width:150px;
  transform:translate(0,-50%); opacity:.42; transition:opacity .4s var(--ease);
}
.callout--l{ transform:translate(-100%,-50%); text-align:right; }
.callout.is-active{ opacity:1; }
.callout b{ font:500 10px/1 var(--mono); color:var(--on-black-2); letter-spacing:.1em; }
.callout span{ font:400 16px/1.15 var(--sans); }
.callout small{ font:400 12px/1.2 var(--sans); color:var(--on-black-2); }
.layers-foot{ position:absolute; left:0; right:0; bottom:28px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding-right:calc(var(--gutter) + 90px); }
.layers-text{ max-width:400px; font-size:14px; color:var(--on-black-2); }
.layers-count{ font:400 12px/1 var(--mono); letter-spacing:.12em; color:var(--on-black-2); text-transform:uppercase; }
.layers-count b{ color:var(--on-black); font-weight:500; }

/* bara de fereastră (asistentul de programare) */
.app-bar{ display:flex; justify-content:space-between; align-items:flex-start; }
.win-ctrl{ display:flex; align-items:center; gap:22px; padding-top:2px; }
.win-ctrl i{ width:20px; height:1.5px; background:var(--ink); }
.win-ctrl b{ position:relative; width:18px; height:18px; }
.win-ctrl b::before,.win-ctrl b::after{ content:""; position:absolute; left:50%; top:50%; width:22px; height:1.5px; background:var(--ink); transform:translate(-50%,-50%) rotate(45deg); }
.win-ctrl b::after{ transform:translate(-50%,-50%) rotate(-45deg); }

/* ============================== 05 · PROCES (fâșii diagonale) ============================== */
.process{ display:grid; grid-template-columns:minmax(230px, 22vw) 1fr; min-height:100vh; min-height:100svh; }
.process-intro{ position:relative; z-index:2; padding:20vh 0 10vh var(--gutter); display:flex; flex-direction:column; }
.process-mark{ font:200 clamp(110px, 12vw, 190px)/.8 var(--cond); color:transparent; -webkit-text-stroke:1px var(--ink); }
.process-title{ margin-top:24px; font:300 clamp(34px, 3vw, 46px)/1 var(--cond); text-transform:uppercase; letter-spacing:.12em; }
.process-text{ margin-top:22px; max-width:220px; font:500 11px/1.6 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); border-top:1px solid var(--line); padding-top:18px; }
.strips{ display:flex; gap:2.2vw; height:100vh; height:100svh; min-height:600px; padding-left:16vh; padding-right:6vw; }
.strip{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden; cursor:pointer; outline:none;
  transform:skewX(-20deg); transition:flex-grow .8s var(--ease);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.strip:focus-visible{ box-shadow:inset 0 0 0 2px var(--gold); }
.strip-img{
  position:absolute; top:0; left:-60%; width:220%; max-width:none; height:100%; object-fit:cover; transform:skewX(20deg);
  background:var(--black);
  filter:grayscale(1) contrast(1.08) brightness(.82);
  transition:filter .7s var(--ease), transform 1s var(--ease);
}
.strip::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(5,6,7,.7), rgba(5,6,7,0) 55%); pointer-events:none; }
.strip-copy{ position:absolute; z-index:1; left:20%; bottom:12%; width:min(260px, 70%); transform:skewX(20deg); color:#fff; }
.strip-num{ font:200 clamp(38px, 3.2vw, 56px)/.85 var(--cond); transition:font-size .6s var(--ease); }
.strip-label{ font:300 clamp(15px, 1.25vw, 20px)/1 var(--cond); text-transform:uppercase; letter-spacing:.02em; margin-top:4px; white-space:nowrap; transition:font-size .6s var(--ease); }
/* fâșia deschisă: textul crește la mărimea completă */
.strip:hover .strip-num,.strip:focus-within .strip-num,.strip.is-open .strip-num{ font-size:clamp(56px, 5vw, 84px); }
.strip:hover .strip-label,.strip:focus-within .strip-label,.strip.is-open .strip-label{ font-size:clamp(22px, 1.9vw, 32px); }
.strip-text{ margin-top:12px; font-size:13px; line-height:1.5; color:#e4e6e8; opacity:0; max-height:0; overflow:hidden; transition:opacity .5s var(--ease), max-height .6s var(--ease); }
.strip:hover,.strip:focus-within,.strip.is-open{ flex-grow:2.6; }
.strip:hover .strip-img,.strip:focus-within .strip-img,.strip.is-open .strip-img{ filter:none; transform:skewX(20deg) scale(1.04); }
.strip:hover .strip-text,.strip:focus-within .strip-text,.strip.is-open .strip-text{ opacity:1; max-height:9em; }

/* ============================== 06 · PRECIZIE ============================== */
.statement{ padding:22vh 0 0; }
.ghost{
  position:absolute; right:-2vw; top:10vh; z-index:0;
  font:200 clamp(140px, 26vw, 460px)/1 var(--cond); text-transform:uppercase;
  color:var(--ink); opacity:.07; white-space:nowrap; pointer-events:none;
}
.marquee{ position:relative; z-index:1; margin-top:22vh; border-top:1px solid var(--line); overflow:hidden; padding:22px 0; background:rgba(255,255,255,.08); }
.marquee-track{ display:flex; width:max-content; animation:marquee 38s linear infinite; }
.marquee:hover .marquee-track,.marquee.is-paused .marquee-track{ animation-play-state:paused; }
.marquee-btn{
  position:absolute; z-index:2; right:var(--gutter); top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  background:var(--fog-mid); border:1px solid rgba(11,13,16,.55); color:var(--ink); cursor:pointer;
  font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
}
.marquee-btn:hover{ background:var(--ink); color:#fff; }
.marquee-track span{ font:500 12px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; padding:0 34px; white-space:nowrap; color:var(--ink-2); }
.marquee-track span::before{ content:"+"; margin-right:34px; font-family:var(--mono); color:var(--ink); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================== 07 · CONTACT ============================== */
.contact{ padding:20vh 0 0; background:radial-gradient(80% 60% at 85% 0%, #15181c 0%, var(--black) 60%); }
.contact .display em{ color:var(--on-black-2); }
.contact .body{ color:var(--on-black-2); margin-top:26px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7vw; align-items:start; }
.tiles--contact{ grid-template-columns:repeat(3, 1fr); margin-top:6vh; }
.tiles--contact .tile{ min-height:130px; }
.contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:26px 24px; }
.contact-form label{ display:flex; flex-direction:column; gap:10px; }
.contact-form .full{ grid-column:1 / -1; }
.contact-form label span{ font:500 12px/1 var(--sans); color:var(--on-black-2); }
.contact-form input,.contact-form select,.contact-form textarea{
  font:400 16px/1.4 var(--sans); color:var(--on-black);
  background:transparent; border:0; border-bottom:1px solid var(--line-dark);
  padding:8px 0 10px; border-radius:0; outline:none; width:100%; transition:border-color .3s;
}
.contact-form select{ appearance:none; background:linear-gradient(45deg, transparent 50%, var(--on-black-2) 50%) calc(100% - 10px) 55%/5px 5px no-repeat, linear-gradient(-45deg, transparent 50%, var(--on-black-2) 50%) calc(100% - 5px) 55%/5px 5px no-repeat; }
.contact-form select option{ background:var(--black); }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{ border-color:#fff; }
.contact-form textarea{ resize:vertical; }
.contact-form input::placeholder,.contact-form textarea::placeholder{ color:#5b6168; }
.contact-form .btn{ justify-self:start; margin-top:8px; }
.form-note{ grid-column:1 / -1; font-size:14px; color:var(--on-black); min-height:1.4em; }
.contact-form .is-invalid{ border-color:var(--stake); }
.site-footer{
  margin-top:20vh; padding-top:24px; padding-bottom:30px; border-top:1px solid var(--line-dark);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  font:500 11px/1.6 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--on-black-2);
}
.site-footer .logo-box{ color:var(--on-black); letter-spacing:.04em; }
.site-footer .mono{ letter-spacing:.06em; }
.site-footer a{ text-decoration:none; }
.site-footer .footer-legal a,.site-footer .footer-legal button,#backTop{ display:inline-flex; align-items:center; min-height:44px; }
.site-footer a:hover{ color:#fff; }

/* ============================== REVEAL ============================== */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:calc(var(--d, 0) * .1s); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 1180px){
  .stage-panel{ display:none; }
}
@media (max-width: 1000px){
  .tiles{ grid-template-columns:1fr 1fr; }
  .tiles--contact{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width: 820px){
  .sv-track{ height:575vh; }
  .sv-scan{ height:340vh; }
  .h-date,.h-link{ display:none; }
  .corner--l{ display:none; }
  .sv-chapter{ top:auto; bottom:24vh; transform:none; right:var(--gutter); }
  .sv-chapter--center{ bottom:auto; top:45%; left:50%; right:auto; transform:translate(-50%,-50%); width:88vw; }
  .sv-scrim{ background:linear-gradient(0deg, rgba(5,6,7,.9) 0%, rgba(5,6,7,.55) 45%, rgba(5,6,7,0) 72%); }
  .sv-sub{ font-size:14px; margin-top:14px; }
  .sv-eyebrow{ margin-bottom:12px; font-size:10px; }
  .sv-hud{ left:var(--gutter); right:var(--gutter); width:auto; transform:none; bottom:20px; text-align:left; }
  .hud-ring,.hud-coords{ display:none; }
  .hud-value{ font-size:28px; }
  .gizmo{ width:30px; height:30px; }

  .sec-top{ margin-bottom:6vh; }
  .intro-cols,.contact-grid{ grid-template-columns:1fr; }
  .intro-cols{ gap:24px; }

  .layers{ height:300vh; }
  .layers-stage{ padding-top:90px; }
  .stack-scene{ width:min(68vw, 42vh); top:50%; }
  .leaders{ display:none; }
  .callout{ opacity:0; left:var(--gutter) !important; right:var(--gutter); top:auto !important; bottom:96px; transform:none !important; text-align:left; transition:opacity .3s; }
  .callout.is-active{ opacity:1; }
  .layers-text{ display:none; }


  .process{ grid-template-columns:1fr; }
  .process-intro{ padding:16vh var(--gutter) 6vh; }
  .strips{ flex-direction:column; height:auto; min-height:0; margin:0; padding:0 var(--gutter) 12vh; gap:10px; }
  .strip{ transform:none; height:24vh; min-height:150px; flex:none; transition:height .6s var(--ease); }
  .strip-img{ left:0; width:100%; transform:none; }
  .strip-copy{ transform:none; left:20px; bottom:18px; width:auto; right:20px; }
  .strip-num{ font-size:56px; }
  .strip-label{ font-size:24px; }
  .strip:hover .strip-img,.strip:focus-within .strip-img,.strip.is-open .strip-img{ transform:scale(1.03); }
  .strip.is-open{ height:38vh; }

  .contact-form{ grid-template-columns:1fr; }
  .tiles--contact{ grid-template-columns:1fr; }
  .site-footer{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 480px){
  .tiles{ grid-template-columns:1fr 1fr; gap:10px; }
  .tile{ min-height:120px; }
  .tiles--contact{ grid-template-columns:1fr; }
  .tiles--contact .tile{ min-height:86px; }
  .sv-title--xl{ font-size:24vw; }
}
@media (max-height: 640px) and (min-width: 821px){
  .sv-title{ font-size:min(6.4vw, 12vh); }
  .sv-title--xl{ font-size:min(11vw, 19vh); }
  .stage-panel .tool-list button{ padding:7px 12px; }
  .hud-ring{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .marquee-track{ animation:none; }
  .layers{ height:auto; }
  .layers-stage{ position:relative; height:100vh; }
}

/* ============================== BUTONUL „PROGRAMEAZĂ” — mereu vizibil ============================== */
.cta-book{
  position:fixed; z-index:52; top:14px; right:calc(var(--gutter) + 118px);
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 24px; background:var(--gold); color:#0b0d10;
  font:600 13.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  box-shadow:0 10px 30px rgba(227,176,75,.35);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, opacity .4s var(--ease);
}
.cta-book .ico{ width:19px; height:19px; stroke-width:1.7; }
.cta-book .cta-arrow{ transition:transform .3s var(--ease); }
.cta-book::after{
  content:""; position:absolute; inset:-1px; border:1px solid var(--gold); pointer-events:none;
  animation:cta-pulse 2.8s ease-out 3;
}
.cta-book:hover,.cta-book:focus-visible{ background:#f2c46a; transform:translateY(-2px); box-shadow:0 16px 40px rgba(227,176,75,.5); }
.cta-book:hover .cta-arrow{ transform:translateX(4px); }
.cta-book:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.cta-book.is-hidden{ opacity:0; pointer-events:none; transform:translateY(-10px); }
body.is-loading .cta-book{ opacity:0; pointer-events:none; }
@keyframes cta-pulse{ 0%{ opacity:.85; transform:scale(1); } 70%,100%{ opacity:0; transform:scale(1.12, 1.5); } }
.cta-book--static{ position:relative; top:auto; right:auto; z-index:auto; padding:13px 20px; }

.btn--gold{ background:var(--gold); border-color:var(--gold); color:#0b0d10; }
.btn--gold:hover,.btn--gold:focus-visible{ background:#f2c46a; border-color:#f2c46a; color:#0b0d10; }
.btn--lg{ padding:16px 26px; font-size:13px; gap:.8em; }
.btn--lg .ico{ width:18px; height:18px; }

@media (max-width: 820px){
  .cta-book{ top:auto; right:16px; left:16px; bottom:14px; justify-content:center; padding:18px 20px; font-size:14px; box-shadow:0 12px 34px rgba(0,0,0,.45); }
  .cta-book.is-hidden{ transform:translateY(14px); }
  body:not(.legal){ padding-bottom:84px; }   /* bara aurie nu acoperă subsolul */
  .cta-book--static{ position:relative; left:auto; right:auto; bottom:auto; padding:11px 14px; font-size:12px; }
  .corner--r{ display:none; }
  .sv-hud{ bottom:86px; }
  .layers-foot{ bottom:86px; }
}
@media (prefers-reduced-motion: reduce){
  .cta-book::after{ animation:none; opacity:0; }
}

/* filmul vertical (9:16) pentru telefon: compus pentru ecran, deci centrat */
.sv-track.is-portrait .sv-plate,.sv-track.is-portrait .sv-film{ object-position:50% 50%; transform-origin:50% 45%; }

/* ============================== PROCES: butonul din fiecare fâșie ============================== */
.strip-toggle{ all:unset; cursor:pointer; display:inline-block; }
.strip .strip-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.strip:has(.strip-toggle:focus-visible){ box-shadow:inset 0 0 0 2px var(--gold); }

/* ============================== ÎNTREBĂRI FRECVENTE ============================== */
.faq-block{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:6vw; margin-top:16vh; padding-top:6vh; border-top:1px solid var(--line); scroll-margin-top:90px; }
.faq{ border-top:1px solid rgba(11,13,16,.4); }
.faq-item{ border-bottom:1px solid rgba(11,13,16,.4); }
.faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:44px; padding:18px 0; cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-q{ font:500 16px/1.4 var(--sans); }
.faq-ico{ position:relative; flex:none; width:16px; height:16px; }
.faq-ico::before,.faq-ico::after{ content:""; position:absolute; left:0; top:50%; width:16px; height:1.5px; background:currentColor; transition:transform .3s var(--ease); }
.faq-ico::after{ transform:rotate(90deg); }
.faq-item[open] .faq-ico::after{ transform:rotate(0deg); }
.faq-item p{ padding:0 40px 22px 0; max-width:680px; font-size:15px; line-height:1.65; color:var(--ink-2); }
@media (max-width: 820px){
  .faq-block{ grid-template-columns:1fr; gap:4vh; margin-top:12vh; }
  .faq-item p{ padding-right:0; }
}

/* subsolul paginii principale: lista de servicii */

/* ============================== SUBSOL: cardurile de servicii (toate paginile) ============================== */
.footer-svc{
  width:100%; order:-1; padding-bottom:30px;
  --fs-line:rgba(232,234,236,.38); --fs-fg:var(--on-black); --fs-sub:var(--on-black-2); --fs-hover-bg:#fff; --fs-hover-fg:var(--black); --fs-hover-sub:var(--ink-2);
}
.fs-label{ margin-bottom:16px; font:500 12px/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--fs-sub); }
.footer-svc ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.footer-svc li{ display:flex; }
nav.footer-svc a{ flex:1; align-content:center; }
.legal-foot nav.footer-svc{ display:block; }
nav.footer-svc a{
  display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; column-gap:16px; row-gap:6px;
  min-height:96px; padding:18px 20px; border:1px solid var(--fs-line); color:var(--fs-fg);
  text-decoration:none; text-transform:none; letter-spacing:normal;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.footer-svc .ico{ grid-row:1 / span 2; width:26px; height:26px; }
.fs-name{ font:400 clamp(21px, 1.7vw, 26px)/1.02 var(--cond); text-transform:uppercase; letter-spacing:.02em; }
.fs-sub{ grid-column:2; font:400 13.5px/1.4 var(--sans); color:var(--fs-sub); transition:color .25s var(--ease); }
.fs-arrow{ grid-column:3; grid-row:1 / span 2; font-size:20px; transition:transform .25s var(--ease); }
nav.footer-svc a:hover,nav.footer-svc a:focus-visible{ background:var(--fs-hover-bg); color:var(--fs-hover-fg); border-color:var(--fs-hover-bg); }
nav.footer-svc a:hover .fs-sub,nav.footer-svc a:focus-visible .fs-sub{ color:var(--fs-hover-sub); }
nav.footer-svc a:hover .fs-arrow,nav.footer-svc a:focus-visible .fs-arrow{ transform:translateX(5px); }
nav.footer-svc a[aria-current="page"]{ border-width:2px; padding:17px 19px; }
/* pe paginile deschise la culoare (legale, servicii, 404) */
.legal-foot .footer-svc{ --fs-line:rgba(11,13,16,.55); --fs-fg:var(--ink); --fs-sub:var(--ink-2); --fs-hover-bg:var(--ink); --fs-hover-fg:#fff; --fs-hover-sub:rgba(255,255,255,.75); }
@media (max-width: 1000px){ .footer-svc ul{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){
  .footer-svc ul{ grid-template-columns:1fr; }
  nav.footer-svc a{ min-height:84px; padding:16px; }
}

/* ============================== 06 · SERVICII (secțiune cu carduri) ============================== */
.svc-sec{ padding:18vh 0 16vh; background:radial-gradient(70% 60% at 15% 0%, #15181c 0%, var(--black) 60%); }
.svc-sec .display em{ color:var(--on-black-2); }
.svc-sec-cards{ margin-top:8vh; }
.svc-sec .footer-svc{ padding-bottom:0; }

/* subsolul paginii principale: după „Despre noi” (secțiune deschisă), ca ultim bloc pe negru */
.site-footer--end{ margin-top:0; padding-top:30px; border-top:0; }

/* ținte de atingere: telefonul și emailul se ating ușor pe mobil */
.tile .tile-v[href]::after{ content:""; position:absolute; inset:0; }   /* tot cardul de contact e clicabil */
.locate-card dd a{ display:inline-block; padding:13px 0; margin:-13px 0; }
.map-ph p a{ display:inline-block; padding:13px 4px; margin:-13px -4px; }
.site-footer > span a,.legal-foot > span a{ display:inline-block; padding:15px 0; margin:-15px 0; }