/* poppins-latin-ext-300-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(fonts/poppins-latin-ext-300-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* poppins-latin-300-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(fonts/poppins-latin-300-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;
}
/* poppins-latin-ext-400-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/poppins-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* poppins-latin-400-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/poppins-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;
}
/* poppins-latin-ext-500-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/poppins-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* poppins-latin-500-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/poppins-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;
}
/* poppins-latin-ext-600-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/poppins-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* poppins-latin-600-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/poppins-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;
}

/* LS ELECTRO — site public, ediția 2026
   Layout: antet plutitor din sticlă; hero cinetic pe albastru senin; grilă „bento” de fapte;
   pași care se suprapun la derulare; benzi închise pentru produse; subsol cu logo-ul la scară mare.
   Regulile manualului: logo într-o singură culoare, fără umbre sau degradeuri pe logo;
   modelul Ecou doar albastru deschis pe senin sau senin pe alb, mereu după logo, niciodată peste el. */
:root {
  --senin: #1D9BEA;
  --gri: #7C8794;
  --noapte: #0E1A26;
  --deschis: #5CB8F2;
  --ceata: #EAF5FD;
  --alb: #FFFFFF;
  --noapte-2: #162536;      /* suprafață ridicată pe fundal închis */
  --text: #0E1A26;
  --text-2: #45515E;
  --text-inchis-2: #A9B4BF; /* text secundar pe albastru noapte */
  --link: #0B6CB0;
  --linie: #DCE6EF;
  --linie-inchis: rgba(169, 180, 191, .18);
  --sticla: rgba(255, 255, 255, .82);

  --font: "Poppins", Arial, sans-serif;
  --fs-hero: clamp(2.75rem, 1.1rem + 5.4vw, 6.4rem);
  --fs-h1: clamp(2.5rem, 1.25rem + 4vw, 5rem);
  --fs-h2: clamp(2rem, 1.2rem + 2.6vw, 3.75rem);
  --fs-h3: clamp(1.25rem, 1.08rem + .55vw, 1.625rem);
  --fs-lead: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
  --fs-small: .875rem;
  --fs-label: .75rem;

  --wrap: 1320px;
  --gx: max(20px, env(safe-area-inset-left, 0px));
  --gxr: max(20px, env(safe-area-inset-right, 0px));
  --header-h: 92px;
  --r-xl: 32px;
  --r-lg: 22px;
  --r-md: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--alb); color: var(--text);
  font-family: var(--font); font-size: 1rem; font-weight: 400; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 70; background: var(--senin);
}
img, svg, canvas { max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--noapte); }
:focus-visible { outline: 3px solid var(--senin); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--noapte); color: var(--alb); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); color: var(--alb); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 48px); margin-inline: auto; padding-left: var(--gx); padding-right: var(--gxr); }
@media (min-width: 720px) { :root { --gx: max(24px, env(safe-area-inset-left, 0px)); --gxr: max(24px, env(safe-area-inset-right, 0px)); } }
.section { padding-block: clamp(80px, 4.5rem + 4vw, 168px); }
.bg-ceata { background: var(--ceata); }
.bg-noapte { background: var(--noapte); color: var(--alb); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--senin);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.bg-noapte .eyebrow { color: var(--deschis); }
.hero .eyebrow, .page-hero .eyebrow, .cta .eyebrow { color: var(--alb); }
.head { display: grid; gap: 18px; max-width: 52rem; margin-bottom: clamp(40px, 2rem + 2.5vw, 80px); }
.head h2 { font-size: var(--fs-h2); }
.head p:not(.eyebrow) { font-size: var(--fs-lead); font-weight: 300; color: var(--text-2); max-width: 40rem; }
.bg-noapte .head p:not(.eyebrow) { color: var(--text-inchis-2); }
.head--split { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 40px; }
.head--split > div { display: grid; gap: 18px; max-width: 52rem; }
@media (max-width: 760px) { .head--split { grid-template-columns: minmax(0, 1fr); row-gap: 22px; } }

/* Butoane */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 28px; border-radius: 999px; border: 0;
  font: 500 1rem/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn .dot { display: grid; place-items: center; width: 30px; height: 30px; margin-right: -14px; border-radius: 50%; transition: transform .3s var(--ease); }
.btn .dot svg { width: 16px; height: 16px; }
.btn:hover .dot { transform: translateX(3px) rotate(-45deg); }
.btn:active { transform: scale(.98); }
.btn--alb { background: var(--alb); color: var(--noapte); }
.btn--alb .dot { background: var(--senin); color: var(--alb); }
.btn--alb:hover { color: var(--noapte); box-shadow: 0 0 0 6px rgba(255,255,255,.22); }
.btn--senin { background: var(--senin); color: var(--alb); }
.btn--senin .dot { background: var(--alb); color: var(--senin); }
.btn--senin:hover { background: var(--noapte); color: var(--alb); }
.btn--noapte { background: var(--noapte); color: var(--alb); }
.btn--noapte .dot { background: var(--senin); color: var(--alb); }
.btn--noapte:hover { background: var(--senin); color: var(--alb); }
.btn--ghost { background: transparent; color: var(--alb); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.btn--ghost:hover { background: var(--alb); color: var(--noapte); box-shadow: inset 0 0 0 1.5px var(--alb); }
.btn--contur { background: var(--alb); color: var(--noapte); box-shadow: inset 0 0 0 1.5px var(--linie); }
.btn--contur:hover { box-shadow: inset 0 0 0 1.5px var(--senin); color: var(--noapte); }
.link-arrow { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; text-decoration: none; color: inherit; }
.link-arrow .circle { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color .25s var(--ease), color .25s var(--ease), transform .3s var(--ease); }
.link-arrow .circle svg { width: 18px; height: 18px; }
.link-arrow:hover .circle, a:hover .link-arrow .circle { background: var(--alb); color: var(--noapte); box-shadow: none; transform: rotate(-45deg); }
.bg-ceata .link-arrow:hover .circle, .panel--ceata .link-arrow:hover .circle, .head .link-arrow:hover .circle { background: var(--senin); color: var(--alb); }
.link-arrow:hover { color: inherit; }

/* Antet plutitor */
.site-header {
  position: sticky; top: calc(14px + env(safe-area-inset-top, 0px)); z-index: 60;
  height: var(--header-h); margin-bottom: calc(-1 * var(--header-h)); pointer-events: none;
}
.site-header .wrap { height: 100%; display: flex; align-items: flex-start; }
.bar {
  pointer-events: auto; position: relative;
  width: 100%; display: flex; align-items: center; gap: 16px;
  min-height: 64px; padding: 8px 8px 8px 24px;
  background: var(--sticla); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border-radius: 999px; box-shadow: 0 12px 40px -18px rgba(14,26,38,.45);
  transition: background-color .3s var(--ease);
}
.is-scrolled .bar { background: rgba(255,255,255,.94); }
.brand { display: inline-flex; margin-right: auto; padding-block: 6px; }
.brand svg { display: block; height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  padding: 10px 16px; border-radius: 999px;
  font-weight: 500; font-size: .95rem; color: var(--noapte); text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav a:hover { background: var(--ceata); color: var(--noapte); }
.nav a[aria-current="page"] { background: var(--noapte); color: var(--alb); }
.bar .btn { min-height: 48px; padding: 0 22px; margin-left: 6px; }
.menu-toggle {
  display: none; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--noapte); color: var(--alb);
  font: 500 .95rem/1 var(--font); cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; }
.menu-toggle .i-close { display: none; }
.menu-open .menu-toggle .i-open { display: none; }
.menu-open .menu-toggle .i-close { display: block; }
@media (max-width: 1040px) {
  :root { --header-h: 84px; }
  .site-header { top: calc(10px + env(safe-area-inset-top, 0px)); }
  .bar { padding-left: 18px; min-height: 60px; }
  .brand svg { height: 30px; }
  .menu-toggle { display: inline-flex; }
  .nav-panel {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    padding: 12px; border-radius: var(--r-lg);
    background: var(--alb); box-shadow: 0 30px 60px -24px rgba(14,26,38,.45);
  }
  .menu-open .nav-panel { display: block; }
  .nav { flex-direction: column; align-items: stretch; }
  .nav a { padding: 16px 18px; font-size: 1.125rem; border-radius: var(--r-md); }
  .nav-panel .btn { width: 100%; margin: 10px 0 0; min-height: 56px; }
  :root:not(.js) .nav-panel { display: block; position: static; box-shadow: none; padding: 8px 0 0; background: transparent; }
  :root:not(.js) .bar { flex-wrap: wrap; border-radius: 28px; }
  :root:not(.js) .menu-toggle { display: none; }
}
@media (min-width: 1041px) { .nav-panel { display: flex; align-items: center; } }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--senin); color: var(--alb); padding-top: var(--header-h); }
.hero-grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center;
  min-height: clamp(560px, 30rem + 18vw, 820px);
}
.hero-copy { position: relative; z-index: 2; display: grid; gap: 28px; padding-block: 56px 72px; }
.chip-pill {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px; border-radius: 999px; background: rgba(255,255,255,.16);
  font-size: var(--fs-small); font-weight: 500;
}
.chip-pill b { white-space: nowrap; display: inline-grid; place-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--alb); color: var(--senin); font-weight: 600; font-size: .75rem; letter-spacing: .06em; }
.hero h1 { font-size: var(--fs-hero); line-height: .98; letter-spacing: -.038em; font-weight: 500; }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hero h1 .w > span { display: inline-block; animation: word-up .9s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 100ms); }
@keyframes word-up { from { transform: translateY(105%); } to { transform: none; } }
.hero-lead { font-size: var(--fs-lead); max-width: 32rem; color: rgba(255,255,255,.94); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Certificările: o bandă cu trei căsuțe egale, pe un singur rând la orice lățime */
.hero-iso { display: grid; gap: 10px; width: 100%; max-width: 30rem; }
.hero-iso-k { font-size: var(--fs-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.hero-iso ul {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 18px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.42);
}
.hero-iso li { display: grid; gap: 1px; min-width: 0; padding: 12px 16px 13px; }
.hero-iso li + li { border-left: 1px solid rgba(255,255,255,.32); }
.hero-iso small { font-size: .6875rem; font-weight: 500; letter-spacing: .18em; line-height: 1.3; color: rgba(255,255,255,.8); }
.hero-iso b { font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--alb); }
.hero-iso li > span { font-size: .8125rem; line-height: 1.4; color: rgba(255,255,255,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-iso abbr { text-decoration: none; cursor: help; }
@media (max-width: 380px) { .hero-iso li { padding-inline: 12px; } }
.hero-mark {
  position: relative; align-self: stretch; display: flex; align-items: center;
  margin-right: min(-24px, calc((var(--wrap) + 48px - 100vw) / 2)); padding-left: clamp(8px, 2vw, 40px);
}
.mark { flex: none; width: clamp(150px, 7rem + 9vw, 290px); height: auto; overflow: visible; cursor: pointer; position: relative; z-index: 2; }
.echo-box { flex: 1 1 auto; align-self: stretch; position: relative; min-width: 0; margin-left: clamp(22px, 3vw, 56px); }
.echo {
  position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: none;
  clip-path: inset(0 100% 0 0);
  animation: echo-in 1.6s 2.1s cubic-bezier(.3,.1,.2,1) forwards, signal 5.5s 4s linear infinite;
  -webkit-mask-image: radial-gradient(circle 260px at var(--px, -999px) var(--py, -999px), rgba(0,0,0,.9), transparent), linear-gradient(90deg, rgba(0,0,0,.55) 0 40%, #000 50%, rgba(0,0,0,.55) 60% 100%);
  mask-image: radial-gradient(circle 260px at var(--px, -999px) var(--py, -999px), rgba(0,0,0,.9), transparent), linear-gradient(90deg, rgba(0,0,0,.55) 0 40%, #000 50%, rgba(0,0,0,.55) 60% 100%);
  -webkit-mask-size: 100% 100%, 300% 100%; mask-size: 100% 100%, 300% 100%;
  -webkit-mask-position: 0 0, 100% 0; mask-position: 0 0, 100% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-over; mask-composite: add;
}
@keyframes echo-in { to { clip-path: inset(0 0 0 0); } }
@keyframes signal { from { -webkit-mask-position: 0 0, 100% 0; mask-position: 0 0, 100% 0; } to { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; } }
.hero-foot { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.28); }
.ticker { display: flex; overflow: hidden; padding-block: 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker ul { display: flex; flex: none; animation: marquee 40s linear infinite; }
.ticker li { display: inline-flex; align-items: center; gap: 48px; padding-right: 48px; white-space: nowrap; font-weight: 500; font-size: 1.0625rem; color: rgba(255,255,255,.94); font-variant-numeric: tabular-nums; }
.ticker li::after { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--deschis); }
@keyframes marquee { to { transform: translateX(-100%); } }

/* Animația logo-ului: pătrat → bara S-ului → unda → ELECTRO */
.mark .mk-square { transform-box: fill-box; transform-origin: 50% 50%; animation: mk-square .6s var(--ease) both; }
.mark .mk-slot, .mark .mk-wave { fill: none; stroke: var(--senin); stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.mark .mk-slot { stroke-width: 27.4; stroke-linecap: round; animation: mk-draw .45s .65s cubic-bezier(.5,0,.3,1) forwards; }
.mark .mk-wave { stroke-width: 18.7; stroke-linecap: butt; animation: mk-draw .72s 1.1s cubic-bezier(.45,0,.25,1) forwards; }
.mark .mk-build { animation: mk-hide 0s 1.85s forwards; }
.mark .mk-final { opacity: 0; animation: mk-show 0s 1.85s forwards; }
.mark .mk-word { opacity: 0; transform: translateY(8px); animation: mk-word .5s 1.9s var(--ease) forwards; }
@keyframes mk-square { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes mk-draw { to { stroke-dashoffset: 0; } }
@keyframes mk-hide { to { opacity: 0; } }
@keyframes mk-show { to { opacity: 1; } }
@keyframes mk-word { to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-copy { padding-block: 40px 24px; }
  .hero-mark { height: 250px; padding-left: 0; margin-right: calc(-1 * var(--gxr)); margin-bottom: 8px; }
  .mark { width: 132px; }
}

/* Antet de pagină */
.page-hero { position: relative; overflow: hidden; background: var(--senin); color: var(--alb); padding-top: var(--header-h); }
.page-hero .wrap { position: relative; z-index: 2; display: grid; gap: 22px; padding-block: clamp(56px, 3rem + 4vw, 128px) clamp(56px, 3rem + 3vw, 104px); }
.page-hero h1 { font-size: var(--fs-h1); line-height: 1; letter-spacing: -.035em; max-width: 14ch; }
.page-hero p { font-size: var(--fs-lead); max-width: 36rem; color: rgba(255,255,255,.94); }
.echo-side { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none; pointer-events: none; }
[data-spot] .echo-side {
  -webkit-mask-image: radial-gradient(circle 240px at var(--px, -999px) var(--py, -999px), #000, rgba(0,0,0,.62));
  mask-image: radial-gradient(circle 240px at var(--px, -999px) var(--py, -999px), #000, rgba(0,0,0,.62));
}
.page-hero .echo-side { z-index: 1; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-small); color: rgba(255,255,255,.85); }
.crumbs a { color: var(--alb); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; color: var(--alb); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.jump a { padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,.16); color: var(--alb); text-decoration: none; font-weight: 500; font-size: .9375rem; transition: background-color .2s var(--ease), color .2s var(--ease); }
.jump a:hover { background: var(--alb); color: var(--noapte); }
@media (max-width: 1100px) { .page-hero .echo-side { opacity: .4; } }

/* Iconițe */
.ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--ceata); color: var(--senin); flex: none; }
.ico svg { width: 28px; height: 28px; }

/* Grilă bento */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(260px, auto); gap: 16px; }
.tile { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(24px, 1.2rem + 1vw, 36px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tile h3 { font-size: var(--fs-h3); }
.tile p { font-size: .96875rem; }
.tile .big { font-size: clamp(3rem, 2rem + 3vw, 5.25rem); font-weight: 500; line-height: .95; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.tile .label { font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.tile .push { margin-top: auto; }
.t-cab { grid-column: span 2; grid-row: span 2; background: var(--ceata); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 28px; }
.t-cab .cab-copy { display: grid; gap: 14px; align-content: center; }
.t-cab .cab-copy h3 { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem); }
.t-cab p { color: var(--text-2); }
.t-year { background: var(--noapte); color: var(--alb); }
.t-year p { color: var(--text-inchis-2); }
.t-wave { background: var(--senin); color: var(--alb); padding-bottom: 0; }
.t-wave p { color: rgba(255,255,255,.92); }
.t-wave canvas { display: block; width: calc(100% + 2 * clamp(24px, 1.2rem + 1vw, 36px)); max-width: none; margin-inline: calc(-1 * clamp(24px, 1.2rem + 1vw, 36px)); height: 110px; margin-top: auto; }
.phases { display: flex; gap: 14px; font-size: var(--fs-label); font-weight: 500; letter-spacing: .1em; }
.phases span::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--c); }
.t-kv { grid-column: span 2; background: var(--alb); box-shadow: inset 0 0 0 1.5px var(--linie); }
.t-kv p { color: var(--text-2); max-width: 30rem; }
.scale { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: auto; }
.scale i { flex: 1; border-radius: 6px 6px 2px 2px; background: var(--ceata); height: var(--h); }
.scale i.on { background: var(--senin); }
.scale-legend { display: flex; justify-content: space-between; font-size: var(--fs-label); color: var(--text-2); font-variant-numeric: tabular-nums; }
.t-iso { background: var(--ceata); }
.t-iso ul { display: grid; gap: 4px; }
.t-iso li { font-size: 1.375rem; font-weight: 500; letter-spacing: -.01em; }
.t-iso li span { color: var(--senin); }
.t-iso p { color: var(--text-2); }
.t-prod { background: var(--noapte); color: var(--alb); text-decoration: none; }
.t-prod:hover { color: var(--alb); }
.t-prod p { color: var(--text-inchis-2); }
.codes { display: flex; flex-wrap: wrap; gap: 6px; }
.codes span { padding: 4px 8px; border-radius: 6px; background: var(--noapte-2); font-size: .75rem; font-weight: 600; letter-spacing: .08em; color: var(--alb); }
.t-key { grid-column: span 2; background: var(--senin); color: var(--alb); text-decoration: none; }
.t-key:hover { color: var(--alb); }
.t-key p { color: rgba(255,255,255,.92); max-width: 22rem; position: relative; z-index: 1; }
.t-key h3 { position: relative; z-index: 1; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); max-width: 13ch; }
.t-key .link-arrow { position: relative; z-index: 1; }
.t-key .echo-side { transition: transform .9s var(--ease); }
.t-key:hover .echo-side { transform: translateX(-28px); }
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-cab { grid-row: span 1; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .t-cab, .t-kv, .t-key { grid-column: auto; }
  .t-cab { grid-template-columns: minmax(0, 1fr); }
  .tile { min-height: 230px; }
  .t-key .echo-side { opacity: .45; }
}

/* Tabloul electric, cu ușă care se deschide */
.cabinet { position: relative; width: 100%; max-width: 360px; margin-inline: auto; aspect-ratio: 360 / 480; perspective: 1600px; }
.cabinet .inside { position: absolute; inset: 0; width: 100%; height: 100%; }
.cab-door {
  position: absolute; left: 3.333%; top: 1.667%; width: 93.333%; height: 94.167%;
  transform-origin: 0 50%; transform-style: preserve-3d;
  transition: transform 1.4s cubic-bezier(.3,.85,.25,1);
}
.cab-door .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cab-door .face svg { display: block; width: 100%; height: 100%; }
.cab-door .back { transform: rotateY(180deg); }
.cabinet.is-open .cab-door { transform: rotateY(-108deg); }
.cab-toggle {
  position: absolute; right: -8px; bottom: -8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: 999px; background: var(--noapte); color: var(--alb);
  font: 500 .875rem/1 var(--font); cursor: pointer; box-shadow: 0 10px 30px -12px rgba(14,26,38,.6);
  transition: background-color .2s var(--ease);
}
.cab-toggle:hover { background: var(--senin); }
.cab-toggle svg { width: 16px; height: 16px; }
.cabinet.is-open .led { animation: led 1.6s ease-in-out infinite; }
@keyframes led { 50% { opacity: .45; } }

/* Pași: carduri care se suprapun la derulare */
.steps-wrap { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.steps-intro { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 20px; }
.steps-intro h2 { font-size: var(--fs-h2); }
.steps-intro p:not(.eyebrow) { font-size: var(--fs-lead); font-weight: 300; color: var(--text-2); }
.steps { display: grid; gap: 22px; }
.step {
  position: sticky; top: calc(var(--header-h) + 32px + var(--i) * 22px);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 32px;
  min-height: 340px; padding: clamp(28px, 1.6rem + 1.4vw, 52px);
  border-radius: var(--r-xl); text-decoration: none; color: inherit;
  box-shadow: 0 -24px 48px -36px rgba(14,26,38,.55);
  transition: transform .4s var(--ease);
}
a.step:hover { color: inherit; }
.step:nth-child(1) { background: var(--alb); box-shadow: inset 0 0 0 1.5px var(--linie); }
.step:nth-child(2) { background: var(--ceata); }
.step:nth-child(3) { background: var(--senin); color: var(--alb); }
.step:nth-child(4) { background: var(--noapte); color: var(--alb); }
.step .num { font-size: clamp(3.5rem, 2.5rem + 3vw, 6rem); font-weight: 500; line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums; color: var(--senin); }
.step:nth-child(3) .num { color: var(--alb); }
.step:nth-child(4) .num { color: var(--deschis); }
.step-body { display: grid; gap: 14px; align-content: start; }
.step h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.625rem); }
.step p { font-size: 1.0625rem; color: var(--text-2); max-width: 34rem; }
.step:nth-child(3) p { color: rgba(255,255,255,.94); }
.step:nth-child(4) p { color: var(--text-inchis-2); }
.kw { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.kw li { padding: 7px 14px; border-radius: 999px; font-size: var(--fs-small); font-weight: 500; background: rgba(14,26,38,.06); }
.step:nth-child(3) .kw li { background: rgba(255,255,255,.18); }
.step:nth-child(4) .kw li { background: var(--noapte-2); }
.step .link-arrow { margin-top: 10px; }
@media (max-width: 900px) {
  .steps-wrap { grid-template-columns: minmax(0, 1fr); }
  .steps-intro { position: static; }
  .step { top: calc(var(--header-h) + 12px + var(--i) * 12px); min-height: 0; grid-template-columns: minmax(0, 1fr); }
}

/* Plăcuțe de produs, ca plăcuțele gravate de pe tablou */
.plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.plate {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px;
  padding: 24px 26px; border-radius: var(--r-md); background: #F4F7F9; color: var(--noapte);
  transition: transform .35s var(--ease), background-color .35s var(--ease);
}
.plate:hover { transform: translateY(-4px); background: var(--alb); }
.plate::before, .plate::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #C3CDD6; top: 10px; }
.plate::before { left: 10px; }
.plate::after { right: 10px; }
.plate-code { min-width: 4.8em; padding: 10px 12px; border-radius: 8px; background: var(--noapte); color: var(--alb); font-weight: 600; font-size: .9375rem; letter-spacing: .08em; text-align: center; }
.plate-name { font-size: .96875rem; line-height: 1.4; }
.bg-ceata .plate { background: var(--alb); }
@media (max-width: 980px) { .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .plates { grid-template-columns: minmax(0, 1fr); } }

/* Proiecte */
.work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px;
  min-height: 300px; padding: clamp(24px, 1.2rem + 1vw, 36px); border-radius: var(--r-xl);
  background: var(--alb); box-shadow: inset 0 0 0 1.5px var(--linie);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px var(--senin), 0 24px 48px -32px rgba(14,26,38,.45); }
.cat { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--link); }
.cat::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--senin); }
.card h2, .card h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.15; }
.card p { color: var(--text-2); font-size: .96875rem; }
.who { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--linie); }
.who dt { font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--gri); font-weight: 500; margin-bottom: 4px; }
.who dd { display: inline; margin: 0; font-weight: 500; font-size: .9375rem; line-height: 1.5; }
.who dd:not(:last-child)::after { content: ", "; }
.card--feature { grid-row: span 2; background: var(--senin); color: var(--alb); box-shadow: none; }
.card--feature:hover { box-shadow: 0 30px 60px -30px rgba(29,155,234,.8); }
.card--feature .cat { color: var(--alb); }
.card--feature .cat::before { background: var(--alb); }
.card--feature h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); max-width: 14ch; position: relative; z-index: 1; }
.card--feature p { color: rgba(255,255,255,.94); position: relative; z-index: 1; }
.card--feature .who { border-top-color: rgba(255,255,255,.3); position: relative; z-index: 1; }
.card--feature .who dt { color: rgba(255,255,255,.8); }
.card--feature .echo-side { top: auto; bottom: 0; right: -60px; height: 58%; }
.work--all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .work { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card--feature { grid-row: auto; grid-column: span 2; min-height: 420px; } }
@media (max-width: 640px) { .work, .work--all { grid-template-columns: minmax(0, 1fr); } .card--feature { grid-column: auto; } }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filter { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--ceata); color: var(--noapte); font: 500 .9375rem/1 var(--font); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.filter:hover { background: #D6ECFB; }
.filter[aria-pressed="true"] { background: var(--noapte); color: var(--alb); }
:root:not(.js) .filters { display: none; }
.filter-count { color: var(--text-2); font-size: var(--fs-small); margin-bottom: 28px; }

/* Clienți: bandă care se derulează */
.marquee { display: grid; gap: 14px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee .row { display: flex; }
.marquee ul { display: flex; flex: none; animation: marquee 70s linear infinite; }
.marquee .row:nth-child(2) ul { animation-direction: reverse; animation-duration: 80s; }
.marquee:hover ul { animation-play-state: paused; }
.marquee li { white-space: nowrap; margin-right: 14px; padding: 18px 28px; border-radius: 999px; background: var(--alb); font-size: clamp(1rem, .9rem + .4vw, 1.25rem); font-weight: 500; color: var(--noapte); }

/* Despre + cariere */
.duo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.panel { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(28px, 1.6rem + 2vw, 56px); display: flex; flex-direction: column; gap: 18px; text-decoration: none; color: inherit; }
.panel h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.panel--ceata { background: var(--ceata); }
.panel--ceata p { color: var(--text-2); }
.panel--noapte { background: var(--noapte); color: var(--alb); }
.panel--noapte:hover { color: var(--alb); }
.panel--noapte .eyebrow { color: var(--deschis); }
.panel--noapte p { color: var(--text-inchis-2); }
.panel .push { margin-top: auto; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
.fact { display: grid; gap: 4px; padding-top: 16px; border-top: 2px solid var(--senin); }
.fact b { font-weight: 500; font-size: clamp(1.375rem, 1.1rem + .8vw, 1.875rem); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fact span { font-size: var(--fs-small); color: var(--text-2); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { padding: 6px 12px; border-radius: 999px; font-size: var(--fs-small); font-weight: 500; background: var(--ceata); color: var(--link); }
.panel--noapte .tags span, .job-head .tags span { background: var(--noapte-2); color: var(--deschis); }
.job-title { font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem) !important; letter-spacing: -.04em; }
@media (max-width: 900px) { .duo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* Cerere de ofertă */
.cta { position: relative; overflow: hidden; background: var(--senin); color: var(--alb); }
.cta .wrap { position: relative; z-index: 2; display: grid; gap: 26px; padding-block: clamp(72px, 3.5rem + 3.5vw, 128px); }
.cta h2 { font-size: clamp(2.75rem, 1.4rem + 5vw, 6rem); line-height: .98; letter-spacing: -.04em; max-width: 12ch; }
.cta p { font-size: var(--fs-lead); max-width: 34rem; color: rgba(255,255,255,.94); }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cta-actions .tel { color: var(--alb); text-decoration: none; font-weight: 500; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.cta-actions .tel:hover { color: var(--alb); text-decoration: underline; }
.cta .echo-side { z-index: 1; }
@media (max-width: 900px) { .cta .echo-side { opacity: .35; } }

/* Pagina Servicii */
.svc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.svc + .svc { margin-top: clamp(72px, 4rem + 4vw, 144px); }
.svc-head { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 18px; }
.svc-head .num { font-size: clamp(3rem, 2rem + 3vw, 5rem); font-weight: 500; line-height: .8; letter-spacing: -.06em; color: var(--senin); }
.svc-head h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.svc-head p { font-size: var(--fs-lead); font-weight: 300; color: var(--text-2); }
.checks li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; padding: 20px 4px; border-bottom: 1px solid var(--linie); font-size: 1.0625rem; }
.checks li:first-child { border-top: 1px solid var(--linie); }
.checks li::before { content: ""; width: 12px; height: 12px; margin: .5em 0 0 4px; border-radius: 3px; background: var(--senin); }
.svc-media { margin-top: 28px; padding: 36px 32px 44px; border-radius: var(--r-xl); background: var(--ceata); }
@media (max-width: 900px) { .svc { grid-template-columns: minmax(0, 1fr); } .svc-head { position: static; } }

/* Despre noi */
.statement { font-size: clamp(1.75rem, 1.15rem + 2.2vw, 3.5rem); font-weight: 400; line-height: 1.15; letter-spacing: -.03em; max-width: 24ch; }
.statement span { color: var(--senin); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); margin-top: clamp(48px, 3rem + 3vw, 96px); }
.two .col { display: grid; gap: 16px; align-content: start; }
.two h3 { font-size: var(--fs-h3); }
.two p { color: var(--text-2); font-size: 1.0625rem; }
@media (max-width: 860px) { .two { grid-template-columns: minmax(0, 1fr); } }
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.value { display: flex; flex-direction: column; gap: 10px; padding: 32px 28px; border-radius: var(--r-lg); background: var(--alb); min-height: 240px; }
.value h3 { font-size: 1.5rem; margin-top: auto; }
.value p { color: var(--text-2); font-size: .96875rem; }
@media (max-width: 1000px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .values { grid-template-columns: minmax(0, 1fr); } }
.certs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cert { position: relative; display: grid; gap: 10px; padding: 36px 32px; border-radius: var(--r-xl); background: var(--noapte-2); color: var(--alb); min-height: 260px; align-content: end; overflow: hidden; }
.cert .std { font-size: clamp(2.5rem, 1.8rem + 2vw, 3.75rem); font-weight: 500; letter-spacing: -.045em; line-height: .9; }
.cert .std small { display: block; font-size: .8125rem; letter-spacing: .16em; color: var(--deschis); font-weight: 500; margin-bottom: 14px; }
.cert p { color: var(--text-inchis-2); }
.cert .yr { position: absolute; top: 28px; right: 28px; font-size: var(--fs-small); color: var(--text-inchis-2); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .certs { grid-template-columns: minmax(0, 1fr); } .cert { min-height: 0; } }

/* Cariere */
.job { border-radius: var(--r-xl); overflow: hidden; background: var(--alb); box-shadow: inset 0 0 0 1.5px var(--linie); }
.job-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; padding: clamp(28px, 1.6rem + 2vw, 56px); background: var(--noapte); color: var(--alb); }
.job-head h3 { font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem); letter-spacing: -.04em; }
.job-head .tags { margin-top: 16px; }
.job-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding: clamp(28px, 1.6rem + 2vw, 56px); }
.job-body h4 { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .16em; color: var(--gri); margin-bottom: 16px; font-weight: 500; }
.job-body ul { display: grid; gap: 12px; }
.job-body li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; color: var(--text-2); }
.job-body li::before { content: ""; width: 8px; height: 8px; margin-top: .6em; border-radius: 2px; background: var(--senin); }
.job-apply { padding: 24px clamp(28px, 1.6rem + 2vw, 56px); border-top: 1px solid var(--linie); color: var(--text-2); }
@media (max-width: 900px) { .job-body { grid-template-columns: minmax(0, 1fr); } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.contact-big { display: grid; gap: 30px; }
.contact-big .k { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .16em; color: var(--gri); font-weight: 500; margin-bottom: 6px; }
.contact-big .v { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.contact-big .v a { color: var(--noapte); text-decoration: none; background-image: linear-gradient(var(--senin), var(--senin)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s var(--ease); }
.contact-big .v a:hover { background-size: 100% 2px; }
.contact-big .sub { display: inline-block; margin-top: 8px; font-size: var(--fs-small); }
.depts { display: grid; gap: 10px; }
.dept { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 18px 22px; border-radius: var(--r-md); background: var(--ceata); }
.dept span { font-size: var(--fs-small); color: var(--text-2); }
.dept a { font-weight: 500; overflow-wrap: anywhere; }
.form-card { display: grid; gap: 22px; padding: clamp(24px, 1.4rem + 2vw, 52px); border-radius: var(--r-xl); background: var(--alb); box-shadow: 0 40px 80px -48px rgba(14,26,38,.45), inset 0 0 0 1.5px var(--linie); }
.form-card h2 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.375rem); }
.form-card > p { color: var(--text-2); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 500; }
.req { color: var(--link); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 54px; padding: 14px 16px; border: 0; border-radius: var(--r-md);
  background: var(--ceata); color: var(--text); font: 400 1rem/1.4 var(--font);
  transition: box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: var(--alb); box-shadow: inset 0 0 0 1.5px var(--senin), 0 0 0 4px rgba(29,155,234,.18); }
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #B42318; }
.error { font-size: var(--fs-small); color: #B42318; }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--fs-small); color: var(--text-2); }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--senin); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
.form-actions p { font-size: var(--fs-small); color: var(--text-2); }
.result { display: grid; gap: 14px; padding: 24px; border-radius: var(--r-lg); background: var(--ceata); }
.result h3 { font-size: 1.25rem; }
.result p { color: var(--text-2); font-size: .9375rem; }
.result pre { margin: 0; padding: 16px; border-radius: var(--r-md); background: var(--alb); white-space: pre-wrap; overflow-wrap: anywhere; font: 400 .875rem/1.55 var(--font); max-height: 260px; overflow: auto; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .fields { grid-template-columns: minmax(0, 1fr); } }

/* 404 */
.notfound { display: grid; gap: 22px; justify-items: start; padding-block: calc(var(--header-h) + 72px) 120px; }
.notfound .code { font-size: clamp(6rem, 4rem + 10vw, 14rem); font-weight: 500; line-height: .85; letter-spacing: -.06em; color: var(--senin); }
.notfound h1 { font-size: var(--fs-h2); }
.notfound .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Subsol */
.site-footer { background: var(--noapte); color: var(--text-inchis-2); padding-top: clamp(64px, 4rem + 3vw, 120px); overflow: hidden; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer-top .lead { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.75rem); color: var(--alb); font-weight: 400; line-height: 1.3; letter-spacing: -.015em; max-width: 22ch; }
.footer-top .lead span { color: var(--senin); }
.site-footer h2 { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .18em; color: var(--alb); font-weight: 500; margin-bottom: 18px; }
.site-footer ul { display: grid; gap: 10px; font-size: .9375rem; }
.site-footer a { color: var(--text-inchis-2); text-decoration: none; overflow-wrap: anywhere; }
.site-footer a:hover { color: var(--alb); }
.footer-brand { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; margin-top: clamp(48px, 3rem + 3vw, 96px); padding-bottom: 32px; }
.footer-logo svg { display: block; width: clamp(220px, 12rem + 12vw, 400px); height: auto; }
.site-footer .isos { display: flex; flex-wrap: wrap; gap: 10px; font-size: inherit; }
.iso-badge { display: grid; gap: 2px; min-width: 140px; padding: 14px 18px; border-radius: var(--r-md); background: var(--noapte-2); box-shadow: inset 0 0 0 1px var(--linie-inchis); }
.iso-badge small { font-size: .6875rem; font-weight: 500; letter-spacing: .16em; color: var(--deschis); }
.iso-badge b { font-size: 1.5rem; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; color: var(--alb); font-variant-numeric: tabular-nums; }
.iso-badge span { font-size: .75rem; color: var(--text-inchis-2); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 24px calc(24px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linie-inchis); font-size: var(--fs-small); }
@media (max-width: 600px) {
  .footer-brand { gap: 28px; }
  .site-footer .isos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .iso-badge { min-width: 0; padding: 12px 12px 14px; align-content: start; }
  .iso-badge b { font-size: 1.25rem; }
  .iso-badge span { line-height: 1.35; }
}
@media (max-width: 960px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-top > :first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: minmax(0, 1fr); } }

/* Apariție la derulare, doar în browserele care o suportă; altfel totul e vizibil */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
    @keyframes rise { from { opacity: .2; transform: translateY(48px) scale(.985); } to { opacity: 1; transform: none; } }
  }
}

/* Mișcare redusă (setare de accesibilitate a telefonului sau a calculatorului): varianta blândă.
   Rămân logo-ul care se desenează, aparițiile prin estompare și cuvântul care se schimbă;
   dispar deplasările: benzile care curg, alunecările, mișcările legate de derulare. */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .hero h1 .w > span { animation-name: fade-in; }
  .mark .mk-square { animation-name: fade-in; }
  .mark .mk-word { transform: none; animation-name: fade-in; }
  .echo { animation: echo-in 1.6s 2.1s cubic-bezier(.3,.1,.2,1) forwards; -webkit-mask-image: none; mask-image: none; }
  .ticker ul, .marquee ul { animation: none !important; }
  .ticker ul + ul, .marquee ul + ul { display: none; }
  .ticker ul, .marquee ul { flex-wrap: wrap; flex: 1 1 auto; row-gap: 12px; }
}


/* ===== Ediția 2026: efecte ===== */

/* Tranziții între pagini (navigare între documente) */
@view-transition { navigation: auto; }
.bar { view-transition-name: bara; }
::view-transition-old(root) { animation: vt-out .32s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(22px); } }

/* Cuvânt rotativ în hero */
.rot { display: inline-grid; height: 1.35em; overflow: hidden; vertical-align: bottom; }
.rot-track { display: grid; animation: rot 11s cubic-bezier(.7,0,.2,1) infinite; }
.rot-track span { justify-self: start; height: 1.35em; line-height: 1.35em; white-space: nowrap; font-weight: 500; color: var(--alb); box-shadow: inset 0 -2px 0 var(--deschis); }
@keyframes rot {
  0%, 20% { transform: translateY(0); }
  25%, 45% { transform: translateY(-1.35em); }
  50%, 70% { transform: translateY(-2.7em); }
  75%, 95% { transform: translateY(-4.05em); }
  100% { transform: translateY(-5.4em); }
}

/* Lumină care urmărește cursorul pe carduri */
.spot { --mx: -999px; --my: -999px; }
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(29,155,234,.14), transparent 45%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.spot:hover::before { opacity: 1; }
.t-year.spot::before, .t-prod.spot::before, .panel--noapte.spot::before, .cert.spot::before, .step:nth-child(4).spot::before {
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(92,184,242,.2), transparent 45%);
}
.t-wave.spot::before, .t-key.spot::before, .card--feature.spot::before, .step:nth-child(3).spot::before {
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.16), transparent 45%);
}
.tile > *, .card > *, .panel > *, .step > *, .cert > *, .value > * { position: relative; z-index: 1; }
.tile > .echo-side, .card > .echo-side { position: absolute; z-index: 0; }

/* Numere care urcă la derulare */
@property --num { syntax: '<integer>'; inherits: false; initial-value: 0; }
.count::after { content: attr(data-n); }

/* Galerie orizontală de proiecte */
.hs-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: max(var(--gx), calc((100vw - var(--wrap)) / 2)); padding-bottom: 8px;
}
.hs-track::-webkit-scrollbar { display: none; }
.hs-track > .card { flex: 0 0 min(400px, 84vw); scroll-snap-align: start; min-height: 440px; }
.hs-track > .card--feature { flex-basis: min(560px, 88vw); }
.hs-hint { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: var(--fs-small); color: var(--text-2); }
.hs-bar { position: relative; flex: 0 0 160px; height: 3px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.hs-bar i { position: absolute; inset: 0; background: var(--senin); transform-origin: left; transform: scaleX(.2); }

/* Butoane magnetice: deplasarea vine din script */
.mag { will-change: transform; }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* bară de progres a citirii, în antet (doar pe ecrane late; pe telefon părea o liniuță rătăcită) */
    @media (min-width: 1041px) {
    .bar::after {
      content: ""; position: absolute; left: 28px; right: 28px; bottom: 5px; height: 2px; border-radius: 2px;
      background: var(--senin); transform-origin: left; transform: scaleX(0);
      animation: progres linear both; animation-timeline: scroll(root);
    }
    }
    @keyframes progres { to { transform: scaleX(1); } }
    /* hero: logo-ul și ecoul se retrag la derulare, doar când stau alături de text;
       pe telefon, unde stau unul sub altul, mișcarea urca logo-ul peste certificări */
    @media (min-width: 901px) {
      .hero-mark { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
      .hero-copy { animation: copy-out linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    }
    @keyframes hero-out { to { transform: translateY(-80px) scale(.92); opacity: .25; } }
    @keyframes copy-out { to { transform: translateY(60px); opacity: .4; } }
    /* logo-ul mare din subsol se ridică */
    .footer-logo svg { animation: footer-up linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes footer-up { from { transform: translateY(30%); opacity: .2; } to { transform: none; opacity: 1; } }
    /* numerele */
    .count { counter-reset: num var(--num); animation: count-up linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    .count::after { content: counter(num); }
    @keyframes count-up { from { --num: var(--from, 0); } to { --num: var(--to); } }
    /* galeria orizontală, condusă de derularea verticală */
    .hscroll.hs-on { height: calc(100vh + var(--dist, 0px)); padding-block: 0; view-timeline-name: --hs; }
    .hscroll.hs-on .hs-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
    .hscroll.hs-on .hs-track { overflow: visible; scroll-snap-type: none; animation: hs-move linear both; animation-timeline: --hs; animation-range: contain 0% contain 100%; }
    .hscroll.hs-on .hs-bar i { animation: hs-bar linear both; animation-timeline: --hs; animation-range: contain 0% contain 100%; }
    @keyframes hs-move { to { transform: translateX(calc(-1 * var(--dist, 0px))); } }
    @keyframes hs-bar { from { transform: scaleX(.08); } to { transform: scaleX(1); } }
    .hscroll.hs-on .head { margin-bottom: clamp(28px, 2rem + 1vw, 48px); }
    .hscroll.hs-on .hs-track > .card { min-height: min(56vh, 540px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* între pagini: doar estompare, fără alunecare */
  ::view-transition-old(root) { animation: vt-fade-out .25s ease both; }
  ::view-transition-new(root) { animation: fade-in .35s ease both; }
  /* cuvântul din hero: cuvintele se înlocuiesc prin estompare, pe loc */
  .rot-track { animation: none; }
  .rot-track span { grid-area: 1 / 1; opacity: 0; animation: rot-fade 11s ease-in-out infinite; }
  .rot-track span:nth-child(2) { animation-delay: 2.75s; }
  .rot-track span:nth-child(3) { animation-delay: 5.5s; }
  .rot-track span:nth-child(4) { animation-delay: 8.25s; }
  .rot-track span:nth-child(5) { display: none; }
  .spot::before { display: none; }
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes rot-fade { 0% { opacity: 0; } 4%, 25% { opacity: 1; } 29%, 100% { opacity: 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: reduce) {
    /* secțiunile apar prin estompare la derulare, fără să urce */
    .reveal { animation: fade-reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
    @keyframes fade-reveal { from { opacity: .2; } to { opacity: 1; } }
  }
}

/* etichetele mici rămân mici și în benzile colorate */
.cta p.eyebrow, .hero p.eyebrow, .page-hero p.eyebrow { font-size: var(--fs-label); color: var(--alb); max-width: none; }
.panel--ceata p.eyebrow, .t-cab p.eyebrow { color: var(--senin); }
.panel--noapte p.eyebrow { color: var(--deschis); }

.footer-bottom .credit { color: var(--gri); letter-spacing: .04em; }

/* Telefon și tabletă în picioare: logo-ul animat apare primul, deasupra titlului */
@media (max-width: 900px) {
  .hero-mark { order: -1; height: clamp(190px, 44vw, 300px); margin-top: 16px; margin-bottom: 0; }
  .mark { width: clamp(112px, 28vw, 180px); }
  .hero-copy { padding-block: 20px 36px; }
}

/* ===== Telefon și tabletă: benzi glisante, liste compacte, zone de atingere ===== */
.bento-rest { display: contents; }
.swipe-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; font-size: var(--fs-small); color: var(--text-2); }
.swipe-dots { display: flex; align-items: center; gap: 6px; }
.swipe-dots i { width: 7px; height: 7px; border-radius: 4px; background: #C9DCEA; transition: width .3s var(--ease), background-color .3s var(--ease); }
.swipe-dots i.on { width: 24px; background: var(--senin); }
.swipe-txt::after { content: " →"; color: var(--senin); }

/* Cum lucrăm: pe ecrane înguste, cele patru etape sunt carduri alăturate, trecute cu degetul */
@media (max-width: 900px) {
  .steps {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gx)) calc(-1 * var(--gxr)); padding-inline: var(--gx) var(--gxr); scroll-padding-inline: var(--gx); padding-block: 2px;
  }
  .steps::-webkit-scrollbar { display: none; }
  .step { position: relative; top: auto; flex: 0 0 min(84%, 420px); scroll-snap-align: start; box-shadow: none; }
  .step:nth-child(1) { box-shadow: inset 0 0 0 1.5px var(--linie); }
}

@media (max-width: 640px) {
  /* Pe scurt: tabloul rămâne mare, celelalte fapte devin carduri glisante */
  .bento-rest {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gx)) calc(-1 * var(--gxr)); padding-inline: var(--gx) var(--gxr); scroll-padding-inline: var(--gx);
  }
  .bento-rest::-webkit-scrollbar { display: none; }
  .bento-rest > .tile { flex: 0 0 min(80%, 340px); min-height: 300px; grid-column: auto; scroll-snap-align: start; }
  .bento-rest .reveal { animation: none; }
  .t-cab .cabinet { max-width: 250px; }
  /* Proiecte: filtrele pe un singur rând, derulabil */
  .filters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gx)) calc(-1 * var(--gxr)); padding-inline: var(--gx) var(--gxr); padding-bottom: 2px;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; }
}

/* Despre noi: valorile, compacte, cu iconița alături */
@media (max-width: 520px) {
  .value { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; min-height: 0; padding: 22px 20px; }
  .value .ico { grid-row: span 2; width: 48px; height: 48px; }
  .value h3 { margin-top: 0; font-size: 1.25rem; }
}

/* Subsol: Servicii și Pagini una lângă alta */
@media (max-width: 480px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .footer-top > :nth-child(-n+2) { grid-column: 1 / -1; }
}

/* Pe ecrane tactile: legăturile mici primesc o zonă de atingere de cel puțin 40 px, fără să se schimbe aspectul */
@media (pointer: coarse) {
  .footer-top ul { gap: 0; }
  .footer-top ul a { display: inline-block; padding-block: 9px; }
  .crumbs a, .cta-actions .tel, .dept a, .contact-big .sub, .job-apply a { display: inline-block; padding-block: 9px; margin-block: -9px; }
  .contact-big .v a { display: inline-block; padding-block: 8px; }
}