/* ============================================================
   FONTURILE, aduse pe serverul nostru
   ------------------------------------------------------------
   Pana pe 6 septembrie 2026 fonturile veneau de la Google, ceea
   ce insemna ca Google primea adresa de internet a fiecarui
   vizitator inca de la deschiderea paginii. Acum stau in
   assets/fonturi/ si nu mai pleaca nimic in afara.

   Doua subseturi pentru fiecare taietura: latin si latin-ext.
   Al doilea are diacriticele romanesti. Browserul il cere numai
   daca pagina chiar contine literele din unicode-range.
   ============================================================ */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonturi/archivo-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonturi/archivo-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonturi/archivo-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonturi/archivo-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonturi/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonturi/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonturi/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonturi/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonturi/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonturi/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   ADRISIMO 27, tokens
   ============================================================ */
:root{
  --canvas:#E9EBEA;
  --canvas-deep:#0F161B;
  --panel:#F5F6F5;
  --panel-deep:#18222A;
  --accent:#0B6BA8;
  --accent-hover:#095A8E;
  --accent-on-deep:#5FA8DA;
  --accent-muted:#B9D3E4;
  --text-primary:#0F161B;
  --text-secondary:#4A5661;
  --text-on-deep:#EDEFEE;
  --text-on-deep-2:#9FB0BC;
  --hairline:#CFD5D6;
  --hairline-strong:#6E7B80;
  --hairline-deep:#2C3A44;

  /* cele trei fețe ale desenelor izometrice, lumină din stânga sus */
  --iso-top:#D6E5F0;
  --iso-left:#A9C5D9;
  --iso-right:#7E9EB6;
  --iso-top-2:#EEF4F8;
  --iso-left-2:#C6DAE8;
  --iso-right-2:#9CB8CC;
  --iso-edge:#587B92;

  --display:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --body:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --tshadow:0 1px 2px rgba(5,8,12,.95),0 3px 12px rgba(5,8,12,.8),0 10px 44px rgba(5,8,12,.82);
  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
.card .ph img,.gal img{height:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.015em;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.deep :focus-visible{outline-color:var(--accent-on-deep)}

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

/* ============ the fixed environment layer ============ */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5}
.env::before,.env::after{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(ellipse 50% 40% at 22% 30%,rgba(185,211,228,.5),transparent 62%),
             radial-gradient(ellipse 44% 36% at 78% 68%,rgba(160,175,182,.42),transparent 60%);
  animation:drift 96s var(--ease-soft) infinite alternate;
}
.env::after{animation-duration:132s;animation-delay:-40s;transform:scale(1.25)}
@keyframes drift{
  0%{transform:translate3d(-2%,-1.5%,0) scale(1)}
  100%{transform:translate3d(2.5%,2%,0) scale(1.12)}
}

/* ============ chrome ============ */
.navveil{
  position:fixed;top:0;left:0;right:0;height:160px;z-index:88;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,13,18,.82) 0%,rgba(9,13,18,.44) 44%,rgba(9,13,18,0) 100%);
  transition:opacity .5s var(--ease);
}
body.navsolid .navveil{opacity:0}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;gap:20px;
  padding:14px var(--pad);
  background:rgba(15,22,27,0);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(15,22,27,.86);backdrop-filter:blur(14px);border-bottom-color:var(--hairline-deep)}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto;line-height:0;flex:none}
/* logo-ul e PNG cu fundal transparent, asa ca umbra trebuie sa urmareasca
   desenul, nu dreptunghiul. De aceea filter, nu box-shadow. */
.brand img{
  height:54px;width:auto;flex:none;
  filter:drop-shadow(0 2px 8px rgba(5,8,12,.55));
  transition:transform .4s var(--ease);
}
.brand:hover img{transform:translateY(-1px)}
/* comutatorul dintre cele doua ramuri ale firmei */
.branch{
  display:flex;gap:2px;padding:3px;border-radius:999px;
  background:rgba(237,239,238,.07);border:1px solid var(--hairline-deep);
}
.branch a{
  font-family:var(--body);font-weight:500;font-size:13.5px;
  color:var(--text-on-deep-2);text-decoration:none;
  padding:7px 15px;border-radius:999px;white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.branch a:hover{color:var(--text-on-deep)}
.branch a.on{background:var(--accent);color:#fff}
@media (max-width:520px){.branch a{padding:6px 11px;font-size:12.5px}}

.navlinks{display:flex;gap:24px;align-items:center}
.navlinks a{
  color:var(--text-on-deep-2);text-decoration:none;font-size:14.5px;
  transition:color .35s var(--ease);position:relative;
}
.navlinks a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:var(--accent-on-deep);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.navlinks a:hover{color:var(--text-on-deep)}
.navlinks a:hover::after{transform:scaleX(1)}
.navtel{
  font-family:var(--body);font-weight:500;font-size:15px;color:var(--text-on-deep);
  text-decoration:none;padding:8px 14px;border:1px solid var(--hairline-deep);border-radius:999px;
  transition:border-color .35s var(--ease),background .35s var(--ease);white-space:nowrap;
}
.navtel:hover{border-color:var(--accent-on-deep);background:rgba(95,168,218,.1)}
@media (max-width:900px){.navlinks{display:none}}
@media (max-width:620px){
  .nav{padding:9px 14px;gap:10px}
  .brand img{height:44px}
  .navtel{padding:9px 13px;font-size:14px}
}
@media (max-width:470px){
  .nav{flex-wrap:wrap;padding:8px 12px 10px;gap:8px}
  .brand{order:1;margin-right:0}
  .navtel{order:2;margin-left:auto}
  .branch{order:3;width:100%;justify-content:center}
  .brand img{height:42px}
}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:500;font-size:16px;line-height:1;
  padding:16px 26px;border-radius:3px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--text-on-deep);border-color:rgba(237,239,238,.42)}
.btn-ghost:hover{border-color:var(--text-on-deep);background:rgba(237,239,238,.09)}
.btn-line{background:transparent;color:var(--text-primary);border-color:var(--hairline-strong)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}
@media (pointer:coarse){.btn{min-height:48px}}

/* ============ the signature: batch strip ============ */
.strip{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
}
.strip i{font-style:normal;opacity:.4}
.strip b{font-weight:500}
.strip-deep{color:var(--text-on-deep-2)}
.strip-deep b{color:var(--accent-on-deep)}
.strip-light{color:var(--text-secondary)}
.strip-light b{color:var(--accent)}

/* ============ HERO ============ */
.hero{position:relative;height:650vh;z-index:1}
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:#0B1014;
}
.poster,.hero video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.poster{background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
.hero video{opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 92% at 50% 44%,rgba(9,13,18,0) 34%,rgba(9,13,18,.6) 100%);
}

/* loading ring */
.ringwrap{
  position:absolute;left:50%;bottom:38px;transform:translateX(-50%);
  display:flex;align-items:center;gap:11px;color:var(--text-on-deep);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  transition:opacity .6s var(--ease);
}
.stage.video-ready .ringwrap{opacity:0;pointer-events:none}
.ring{width:30px;height:30px;transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .25s linear}
.chev{width:22px;height:34px;border:1px solid rgba(237,239,238,.5);border-radius:12px;position:relative}
.chev::after{
  content:"";position:absolute;left:50%;top:8px;width:3px;height:7px;border-radius:2px;
  background:var(--text-on-deep);transform:translateX(-50%);
  animation:cue 2.4s var(--ease-soft) infinite;
}
@keyframes cue{0%,100%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:0;transform:translate(-50%,12px)}}

/* caption bands */
.bands{position:absolute;inset:0}
.band{
  position:absolute;opacity:0;pointer-events:none;
  color:var(--text-on-deep);text-shadow:var(--tshadow);
  max-width:min(46ch,42vw);
}
.band.on{pointer-events:auto}
.band .btn{text-shadow:none}
.band::before{
  content:"";position:absolute;inset:-14% -18%;pointer-events:none;z-index:-1;
  opacity:calc(.28 + .72*var(--k,1));
  background:radial-gradient(ellipse 74% 64% at 50% 50%,
     rgba(5,8,12,var(--sa,.66)) 0%,
     rgba(5,8,12,calc(var(--sa,.66)*.66)) 46%,
     rgba(5,8,12,0) 78%);
}
.band-l{left:var(--pad);top:50%;transform:translateY(-50%)}
.band-r{right:var(--pad);top:50%;transform:translateY(-50%);text-align:right}
.band-c{left:50%;top:34%;transform:translate(-50%,-50%);text-align:center;max-width:min(820px,86vw)}
.band-c::before{inset:-34% -26%}
.band-c h2{max-width:none;white-space:nowrap}
@media (max-width:1100px){.band-c h2{white-space:normal}}

.kicker{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-on-deep);margin-bottom:16px;
}
/* small text over live footage gets a chip, never the big radial */
.band .kicker,.static-hero .kicker{
  display:inline-block;color:#93C9EC;
  background:rgba(8,11,16,.58);border:1px solid rgba(95,168,218,.34);
  border-radius:999px;padding:7px 15px;backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(5,8,12,.9);
}
.band h1,.band h2{font-size:clamp(30px,4.6vw,62px);margin-bottom:16px}
.band p{font-size:clamp(15.5px,1.35vw,19px);color:var(--text-on-deep);max-width:34ch}
.band-r p{margin-left:auto}
.band-c p{margin-left:auto;margin-right:auto}
.band .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.band-r .row{justify-content:flex-end}
.band-c .row{justify-content:center}

/* text choreography */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w{display:inline-block;white-space:pre}
.c{display:inline-block}
.fx-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
.fx-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.fx-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
.fx-grid .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)));
}
.fx-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 22px));
}
.fx-rise .sub{opacity:var(--ks2,0);transform:translateY(calc((1 - var(--ks2,0)) * 14px))}
.fx-rise .row{opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0)) * 14px))}

/* static hero */
.static-hero{display:none;position:relative;min-height:100svh;overflow:hidden}
.static-hero .bg{
  position:absolute;inset:0;background:#0B1014 center/cover no-repeat;
}
.static-hero .veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,13,18,.82) 0%,rgba(9,13,18,.5) 42%,rgba(9,13,18,.88) 100%);
}
.static-hero .inner{
  position:relative;z-index:2;padding:118px var(--pad) 56px;
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;gap:22px;
  color:var(--text-on-deep);
}
.static-hero h1{font-size:clamp(34px,8.6vw,58px);text-shadow:var(--tshadow)}
.static-hero p{font-size:17px;color:var(--text-on-deep);max-width:38ch;text-shadow:0 2px 10px rgba(5,8,12,.9)}
.static-hero .row{display:flex;gap:12px;flex-wrap:wrap}
.static-hero .row .btn{flex:1 1 auto}

/* ============ sections ============ */
main{position:relative;z-index:2;background:var(--canvas)}
section{position:relative}
section[id],#main,#top{scroll-margin-top:86px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(72px,10vw,128px) var(--pad)}
.deep{background:var(--canvas-deep);color:var(--text-on-deep)}
.deep h2,.deep h3{color:var(--text-on-deep)}
.deep p{color:var(--text-on-deep-2)}
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.deep .eyebrow{color:var(--accent-on-deep)}
h2{font-size:clamp(28px,4vw,50px);margin-bottom:20px}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--text-secondary);max-width:56ch}
.deep .lede{color:var(--text-on-deep-2)}

/* entrances */
.up{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.in.up,.up.in{opacity:1;transform:none}
.stag > *{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.stag.in > *{opacity:1;transform:none}
.stag.in > *:nth-child(1){transition-delay:.02s}
.stag.in > *:nth-child(2){transition-delay:.12s}
.stag.in > *:nth-child(3){transition-delay:.22s}
.stag.in > *:nth-child(4){transition-delay:.32s}
.stag.in > *:nth-child(5){transition-delay:.42s}
.stag.in > *:nth-child(6){transition-delay:.52s}
.stag.done > *:nth-child(1),.stag.done > *:nth-child(2),.stag.done > *:nth-child(3),
.stag.done > *:nth-child(4),.stag.done > *:nth-child(5),.stag.done > *:nth-child(6){transition-delay:0s}

/* ---- 1. trust strip ---- */
.trust .wrap{padding-top:clamp(48px,6vw,72px);padding-bottom:clamp(48px,6vw,72px)}
.trust .strip{padding-bottom:26px;border-bottom:1px solid var(--hairline-deep);margin-bottom:34px}
.trust .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.trust .grid > div{padding-left:20px;border-left:2px solid var(--accent-on-deep);position:relative}
.trust h3{font-size:19px;margin-bottom:8px;line-height:1.25}
.trust p{font-size:15px}
@media (max-width:800px){.trust .grid{grid-template-columns:1fr;gap:24px}}

/* ---- 2. despre: text + tall photo ---- */
.despre .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,70px);align-items:center}
.despre .photo{position:relative}
.despre .photo img{border-radius:3px;box-shadow:0 24px 70px rgba(15,22,27,.2)}
.despre .tag{
  position:absolute;left:-14px;bottom:26px;background:var(--canvas-deep);color:var(--text-on-deep);
  padding:12px 18px;border-radius:3px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;box-shadow:0 12px 34px rgba(15,22,27,.28);
}
.despre .tag b{color:var(--accent-on-deep);font-weight:500}
.despre p + p{margin-top:18px}
@media (max-width:900px){
  .despre .wrap{grid-template-columns:1fr}
  .despre .tag{left:12px}
}

/* ---- 3. betoane: class grid + curve ---- */
.betoane .head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:44px}
.curve{width:220px;height:96px;overflow:visible}
.curve path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.curve .axis{stroke:var(--hairline-strong);stroke-width:1;opacity:.55}
.curve .line{stroke-dasharray:var(--len,320);stroke-dashoffset:calc(var(--len,320) * (1 - var(--draw,0)))}
.classes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cls{
  background:var(--panel);border:1px solid var(--hairline);border-radius:3px;
  padding:20px 18px;transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.cls:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,22,27,.1)}
.cls b{display:block;font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-.01em}
.cls span{display:block;font-family:var(--mono);font-size:12px;color:var(--text-secondary);margin-top:6px;letter-spacing:.08em}
.betoane .note{margin-top:30px;font-size:15.5px;color:var(--text-secondary)}
@media (max-width:900px){.classes{grid-template-columns:repeat(2,1fr)}.betoane .head{grid-template-columns:1fr}.curve{display:none}}

/* ---- 4. servicii: 3 image cards ---- */
.servicii .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.card{
  background:var(--panel-deep);border:1px solid var(--hairline-deep);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.card:hover{border-color:var(--accent-on-deep);transform:translateY(-4px)}
.card .ph{aspect-ratio:16/10;overflow:hidden;background:#0B1014}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .ph img{transform:scale(1.05)}
.card .body{padding:26px 24px 30px}
.card h3{font-size:21px;margin-bottom:10px}
.card p{font-size:15px}
.card .mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-on-deep);margin-bottom:12px}
@media (max-width:900px){.servicii .grid{grid-template-columns:1fr}}

/* ---- 5. calculator ---- */
.calc .wrap{max-width:900px}
.calc .box{
  background:var(--panel);border:1px solid var(--hairline);border-radius:4px;
  padding:clamp(24px,4vw,40px);margin-top:36px;
}
.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.field label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px}
.field input,.field select,.f input,.f select,.f textarea{
  width:100%;font-family:var(--body);font-size:17px;color:var(--text-primary);
  background:#fff;border:1px solid var(--hairline-strong);border-radius:3px;padding:13px 14px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.field input:focus,.field select:focus,.f input:focus,.f select:focus,.f textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,107,168,.16);outline:none;
}
.calc .use{margin-top:16px}
.result{
  margin-top:26px;padding-top:26px;border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:auto 1fr;gap:22px 30px;align-items:center;
  opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.result.show{opacity:1;transform:none}
.result .big{font-family:var(--display);font-weight:700;font-size:clamp(38px,7vw,64px);line-height:1;color:var(--accent);letter-spacing:-.02em}
.result .big small{font-size:.35em;color:var(--text-secondary);font-weight:600;margin-left:8px;letter-spacing:0}
.result .said{font-size:15.5px;color:var(--text-secondary)}
.result .said b{color:var(--text-primary);font-weight:500}
.result .act{grid-column:1/-1}
@media (max-width:760px){.fields{grid-template-columns:1fr 1fr}.field.wide{grid-column:1/-1}.result{grid-template-columns:1fr}}

/* ---- 6a. lucrari: tipuri de turnare, desenate ---- */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.app{
  background:var(--panel);border:1px solid var(--hairline);border-radius:3px;
  padding:26px 24px 24px;
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.app:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 16px 38px rgba(15,22,27,.1)}
.app .art{display:block;width:100%;max-width:212px;height:auto;margin:0 0 20px}
.app .art path{
  stroke:var(--iso-edge);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  transition:fill .45s var(--ease);
}
.app .art .t{fill:var(--iso-top)}
.app .art .l{fill:var(--iso-left)}
.app .art .r{fill:var(--iso-right)}
.app .art .t2{fill:var(--iso-top-2)}
.app .art .l2{fill:var(--iso-left-2)}
.app .art .r2{fill:var(--iso-right-2)}
.app .art .at{fill:var(--accent)}
.app .art .al{fill:var(--accent-hover)}
.app .art .ar{fill:#07496F}
.app .art .a{fill:none;stroke:var(--accent);stroke-width:1.25;opacity:.48}
.app:hover .art .t{fill:#C9DEEE}
.app:hover .art .l{fill:#98BAD3}
.app:hover .art .r{fill:#6E93AF}
.app b{display:block;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em;margin-bottom:7px}
.app span{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary);
}
.app:hover .art{color:var(--accent-hover)}
.lucrari .after{margin-top:30px;font-size:15.5px;color:var(--text-secondary);max-width:64ch}
.lucrari .sub-head{
  margin:clamp(56px,7vw,84px) 0 28px;padding-top:clamp(40px,5vw,56px);
  border-top:1px solid var(--hairline);
}
.lucrari .sub-head h3{font-size:clamp(21px,2.6vw,27px);margin-bottom:8px}
.lucrari .sub-head p{font-size:15.5px;color:var(--text-secondary);max-width:58ch}
@media (max-width:980px){.apps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.apps{grid-template-columns:1fr}}

/* ---- 6b. lucrari gallery ---- */
.lucrari .head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal figure{
  margin:0;position:relative;border-radius:3px;overflow:hidden;background:var(--panel);
  border:1px solid var(--hairline);cursor:zoom-in;
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.gal figure:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,22,27,.14)}
.gal .ph{aspect-ratio:4/3;overflow:hidden}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{padding:15px 18px 17px}
.gal figcaption b{display:block;font-family:var(--display);font-weight:600;font-size:17px}
.gal figcaption span{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
@media (max-width:980px){.gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.gal{grid-template-columns:1fr}}

.lightbox{
  position:fixed;inset:0;z-index:150;background:rgba(9,13,18,.94);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.lightbox.open{opacity:1;pointer-events:auto}
/* ============================================================
   SLIDESHOW-UL DIN LIGHTBOX
   Poza noua vine din dreapta si se aseaza PESTE cea veche, care
   ramane pe loc. Fiecare poza sta intr-un strat propriu, ca sa
   poata fi mutat fara sa se deformeze imaginea dinauntru.
   ============================================================ */
.lbscena{
  position:relative;width:min(1200px,92vw);height:80svh;overflow:hidden;border-radius:3px;
}
.lbstrat{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transform:translateX(0);transition:transform .55s var(--ease);will-change:transform;
}
.lbstrat.din-dreapta{transform:translateX(105%)}
.lbstrat.din-stanga{transform:translateX(-105%)}
.lbstrat img{max-width:100%;max-height:100%;object-fit:contain;border-radius:3px}

.lbnav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;border-radius:50%;
  background:rgba(237,239,238,.1);border:1px solid rgba(237,239,238,.3);
  color:var(--text-on-deep);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.lbnav svg{width:24px;height:24px;display:block}
.lbnav:hover{background:rgba(237,239,238,.2);border-color:rgba(237,239,238,.55)}
.lbprev{left:max(14px,2vw)}
.lbnext{right:max(14px,2vw)}
@media (max-width:640px){
  .lbnav{width:44px;height:44px}
  .lbnav svg{width:20px;height:20px}
  .lbscena{width:100vw;height:74svh}
}
@media (prefers-reduced-motion:reduce){.lbstrat{transition:none}}
.lightbox .cap{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:var(--text-on-deep);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.lightbox .x{
  position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;
  background:rgba(237,239,238,.1);border:1px solid rgba(237,239,238,.34);color:var(--text-on-deep);
  font-size:22px;line-height:1;cursor:pointer;transition:background .3s var(--ease)
}
.lightbox .x:hover{background:rgba(237,239,238,.2)}

/* ---- 7. pasi ---- */
section.pasi{
  background-image:linear-gradient(rgba(13,19,24,.93),rgba(13,19,24,.97)),url('hero-ending.jpg');
  background-size:cover;background-position:50% 60%;
}
.pasi .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;position:relative}
.pasi .steps::before{
  content:"";position:absolute;top:26px;left:8%;right:8%;height:1px;background:var(--hairline-deep);
  transform:scaleX(var(--draw,0));transform-origin:left;transition:transform 1.4s var(--ease);
}
.step .n{
  width:54px;height:54px;border-radius:50%;border:1px solid var(--accent-on-deep);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:15px;color:var(--accent-on-deep);
  background:var(--canvas-deep);position:relative;z-index:2;margin-bottom:22px;
}
.step h3{font-size:20px;margin-bottom:10px}
.step p{font-size:15px}
@media (max-width:860px){.pasi .steps{grid-template-columns:1fr;gap:32px}.pasi .steps::before{display:none}}

/* ---- 8. faq ---- */
.faq .wrap{max-width:860px}
.q{border-bottom:1px solid var(--hairline)}
.q:first-of-type{border-top:1px solid var(--hairline)}
.q button{
  width:100%;background:none;border:0;padding:24px 44px 24px 0;text-align:left;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,21px);color:var(--text-primary);
  position:relative;line-height:1.3;transition:color .3s var(--ease);
}
.q button:hover{color:var(--accent)}
.q button::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease);
}
.q.open button::after{transform:translateY(-20%) rotate(225deg)}
.q .a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.q .a p{padding:0 0 26px;color:var(--text-secondary);font-size:16.5px;max-width:62ch}

/* ---- 9. contact ---- */
.contact .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,64px)}
.f{display:grid;gap:16px;margin-top:28px}
.f label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-deep-2);margin-bottom:8px}
.f .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f textarea{min-height:118px;resize:vertical}
.f .hint{font-size:13.5px;color:var(--text-on-deep-2)}
.sent{
  display:none;padding:20px 22px;border:1px solid var(--accent-on-deep);border-radius:3px;
  background:rgba(95,168,218,.1);color:var(--text-on-deep);font-size:15.5px;
}
.sent.show{display:block}
.det{display:grid;gap:2px;align-content:start}
.det .row{padding:20px 0;border-bottom:1px solid var(--hairline-deep)}
.det .row:first-child{border-top:1px solid var(--hairline-deep)}
.det .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-on-deep);margin-bottom:7px}
.det .v{font-size:17px;color:var(--text-on-deep)}
.det .v a{text-decoration:none;transition:color .3s var(--ease)}
.det .v a:hover{color:var(--accent-on-deep)}
.det .sm{font-size:14px;color:var(--text-on-deep-2);margin-top:4px}
.map{margin-top:26px;border:1px solid var(--hairline-deep);border-radius:3px;overflow:hidden;background:var(--panel-deep)}
.map iframe{width:100%;height:300px;border:0;display:block;filter:grayscale(.28) contrast(1.04)}
.map .under{display:flex;gap:10px;padding:14px;flex-wrap:wrap}
.map .under .btn{padding:11px 16px;font-size:14px}
@media (max-width:960px){.contact .wrap{grid-template-columns:1fr}.f .two{grid-template-columns:1fr}}

/* ---- footer ---- */
footer{background:#0A1014;color:var(--text-on-deep-2);border-top:1px solid var(--hairline-deep);position:relative;z-index:2}
footer .wrap{padding-top:64px;padding-bottom:40px}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
footer h4{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-on-deep);margin-bottom:16px}
footer a{color:var(--text-on-deep-2);text-decoration:none;transition:color .3s var(--ease)}
footer a:hover{color:var(--accent-on-deep)}
footer li{list-style:none}
footer ul{margin:0;padding:0;display:grid;gap:9px;font-size:15px}
.fbrand .flogo{width:150px;height:auto;margin-bottom:18px;filter:drop-shadow(0 3px 12px rgba(5,8,12,.5))}
.fbrand p{font-size:15px;max-width:34ch}
.fbot{margin-top:44px;padding-top:22px;border-top:1px solid var(--hairline-deep);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:860px){.fgrid{grid-template-columns:1fr}}

/* short screens: hide the small scroll furniture */
@media (max-height:560px){.ringwrap{display:none}}

/* ============================================================
   THE FIVE STATIC-HERO GATES, must match the JS list exactly
   ============================================================ */
@media (max-width:720px),
       (orientation: portrait) and (max-width:1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height:560px),
       (prefers-reduced-motion: reduce){
  .hero{display:none}
  .static-hero{display:block}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important;
  }
  .env{animation:none}
  .up,.stag > *{opacity:1 !important;transform:none !important}
  .result{opacity:1;transform:none}
  .curve .line{stroke-dashoffset:0}
  .pasi .steps::before{transform:scaleX(1)}
  .despre .tag{left:12px}
  .band-l,.band-r{transform:translateY(-50%)}
  .band-c{transform:translate(-50%,-50%)}
}

/* Sub 470px bara de sus e pe doua randuri, deci e mai inalta. Regula asta
   sta la sfarsit ca sa bata regula generala de mai sus, nu inaintea ei. */
@media (max-width:470px){
  section[id],#main,#top{scroll-margin-top:122px}
}

/* ============================================================
   PAGINILE LEGALE
   Confidentialitate, cookie-uri, termeni. Nu au film in cap, deci
   bara de sus trebuie sa fie plina de la inceput, nu transparenta.
   ============================================================ */
body.legalpage .nav{
  background:rgba(15,22,27,.94);backdrop-filter:blur(14px);
  border-bottom-color:var(--hairline-deep);
}
body.legalpage .navveil{opacity:0}
.legal .wrap{max-width:880px;padding-top:calc(clamp(72px,10vw,128px) + 34px)}
.legal h1{font-size:clamp(29px,4.2vw,48px);line-height:1.06;letter-spacing:-.02em;margin:10px 0 16px}
.legal .upd{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);margin-top:24px;
}
.legal section{margin-top:40px;padding-top:34px;border-top:1px solid var(--hairline)}
.legal h2{font-size:clamp(19px,2.2vw,25px);margin-bottom:14px;line-height:1.2}
.legal h3{font-size:17px;margin:24px 0 8px}
.legal p{font-size:16px;color:var(--text-secondary);margin-bottom:13px;max-width:70ch}
.legal ul{margin:0 0 15px;padding-left:20px}
.legal li{font-size:16px;color:var(--text-secondary);margin-bottom:8px;max-width:68ch}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal strong,.legal b{color:var(--text-primary);font-weight:500}
.legal .box{background:var(--panel);border:1px solid var(--hairline);border-radius:3px;padding:20px 22px;margin:18px 0}
.legal .box p:last-child{margin-bottom:0}
.legal .tw{overflow-x:auto;margin:16px 0}
.legal table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.legal th,.legal td{text-align:left;padding:12px;border-bottom:1px solid var(--hairline);vertical-align:top;color:var(--text-secondary)}
.legal th{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-primary);font-weight:500;white-space:nowrap;
}
/* campurile pe care clientul trebuie sa le completeze; se vad de la distanta */
.todo{
  background:#FFF1CE;border:1px solid #DDB65A;color:#5A4413;
  padding:2px 7px;border-radius:3px;font-family:var(--mono);font-size:13px;white-space:nowrap;
}
.legal .toc{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:26px}
.legal .toc a{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-secondary);text-decoration:none;
  border:1px solid var(--hairline);border-radius:999px;padding:8px 14px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.legal .toc a:hover{border-color:var(--accent);color:var(--accent)}

/* ============ randul cu linkurile legale, in subsol ============ */
.flegal{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--hairline-deep);
  display:flex;flex-wrap:wrap;gap:11px 26px;align-items:center;font-size:14px;
}
.flegal a,.flegal .clink{
  color:var(--text-on-deep-2);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.flegal a:hover,.flegal .clink:hover{color:var(--accent-on-deep);border-bottom-color:var(--accent-on-deep)}
.flegal .clink{background:none;border:0;border-bottom:1px solid transparent;padding:0;font:inherit;font-family:var(--body);cursor:pointer}
.flegal + .fbot{margin-top:22px;padding-top:0;border-top:0}

/* ============ harta se incarca doar cu acordul vizitatorului ============ */
.mapgate{
  min-height:300px;display:flex;align-items:center;justify-content:center;
  padding:28px 26px;text-align:center;background:var(--panel-deep);
  background-image:radial-gradient(circle at 30% 15%,rgba(255,255,255,.06),transparent 62%);
}
.mapgate .mg-in{max-width:46ch}
.mapgate p{color:var(--text-on-deep-2);font-size:14.5px;margin-bottom:18px}
.mapgate b{color:var(--text-on-deep);font-weight:500}
.mapgate .lnk{
  display:inline-block;margin-top:14px;color:var(--accent-on-deep);
  font-size:13.5px;text-decoration:underline;text-underline-offset:3px;
}

/* ============ bara de acord pentru cookie-uri ============ */
.cookiebar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(10,16,20,.97);backdrop-filter:blur(14px);
  border-top:1px solid var(--hairline-deep);
  padding:20px var(--pad) 22px;
  transform:translateY(115%);transition:transform .5s var(--ease);
}
.cookiebar.on{transform:none}
.cookiebar .in{max-width:var(--maxw);margin:0 auto;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.cookiebar .txt{flex:1 1 400px;max-width:66ch}
.cookiebar strong{
  display:block;font-family:var(--display);font-weight:600;font-size:17px;
  letter-spacing:-.01em;color:var(--text-on-deep);margin-bottom:7px;
}
.cookiebar p{color:var(--text-on-deep-2);font-size:14.5px;line-height:1.6;margin:0}
.cookiebar b{color:var(--text-on-deep);font-weight:500}
.cookiebar a{color:var(--accent-on-deep);text-decoration:underline;text-underline-offset:3px}
.cookiebar .acts{display:flex;gap:10px;flex-wrap:wrap}
.cookiebar .btn{padding:12px 20px;font-size:14.5px}
@media (max-width:700px){
  .cookiebar{padding:16px 16px 18px}
  .cookiebar .acts{width:100%}
  .cookiebar .acts .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){.cookiebar{transition:none}}
/* pagina legala in care te afli, marcata in bara de sus */
.navlinks a[aria-current="page"]{color:var(--text-on-deep)}
.navlinks a[aria-current="page"]::after{transform:scaleX(1)}

/* poarta hartii, dupa ce vizitatorul a acceptat: iese butonul, intra harta */
.mapgate.incarcata{display:block;min-height:0;padding:0;background:none}
.mapgate.incarcata .mg-in{display:none}

/* bara ascunsa nu are voie sa prinda clicuri si nici sa fie ajunsa cu Tab */
.cookiebar{pointer-events:none;visibility:hidden}
.cookiebar.on{pointer-events:auto;visibility:visible}

/* ============ bifa de acord de sub formular ============ */
.f .check{display:flex;gap:12px;align-items:flex-start;margin-top:2px}
.f .check input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:21px;height:21px;flex:none;margin:2px 0 0;padding:0;
  border:1px solid var(--hairline-strong);border-radius:3px;
  background:#fff;cursor:pointer;position:relative;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.f .check input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
.f .check input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg);
}
.f .check input[type="checkbox"]:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(237,239,238,.24);
}
.f .check label{
  font-family:var(--body);font-size:14.5px;line-height:1.55;letter-spacing:0;
  text-transform:none;color:var(--text-on-deep-2);margin:0;cursor:pointer;
}
.f .check a{color:var(--accent-on-deep);text-decoration:underline;text-underline-offset:3px}
.f .check.err input[type="checkbox"]{border-color:#E8703A;box-shadow:0 0 0 3px rgba(232,112,58,.24)}
.f .cerr{font-size:14px;color:#F2A183;margin:-6px 0 0}

/* ============ butonul de WhatsApp din bara de sus ============ */
.navwa{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:999px;
  border:1px solid var(--hairline-deep);background:transparent;color:#25D366;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.navwa svg{width:19px;height:19px;fill:currentColor;display:block}
.navwa:hover{background:#25D366;border-color:#25D366;color:#fff}
.navwa:focus-visible{outline:2px solid #25D366;outline-offset:3px}
@media (max-width:620px){.navwa{width:36px;height:36px}.navwa svg{width:17px;height:17px}}
/* Pe telefon bara sta pe doua randuri: sus logo, WhatsApp si telefon, jos
   comutatorul. WhatsApp si telefonul trebuie sa aiba aceeasi ordine, altfel
   comutatorul se aseaza intre ele si bara iese pe trei randuri. */
@media (max-width:470px){
  .navwa{order:2;margin-left:auto}
  .navtel{order:2;margin-left:0}
}

/* ============================================================
   GALERIILE, pe amandoua paginile
   Pozele de pe teren sunt in mare parte verticale, iar cateva
   orizontale. Un chenar fix le-ar taia exact partea buna, asa ca
   le asezam pe coloane si fiecare poza isi pastreaza inaltimea.
   ============================================================ */
#gal{display:block;column-count:3;column-gap:14px}
#gal figure{break-inside:avoid;margin:0 0 14px;width:100%}
#gal .ph{aspect-ratio:auto}
#gal .ph img{width:100%;height:auto}
@media (max-width:980px){#gal{column-count:2}}
@media (max-width:600px){#gal{column-count:1}}

/* ============================================================
   MISCAREA DIN CAPUL PAGINII, PE TELEFON
   ------------------------------------------------------------
   Pe telefon filmul care se deruleaza cu degetul e oprit: ar
   trebui descarcat intreg inainte de a putea fi derulat, adica
   ape 5 megaocteti pe date mobile, iar cautarea cadru cu cadru
   nu merge bine pe iPhone. In locul lui, imaginea se apropie
   incet, iar textul urca la deschidere. Miscarea vine din CSS,
   nu costa niciun octet in plus si nu incalzeste telefonul.
   ============================================================ */
@keyframes heroApropiere{ from{transform:scale(1.14)} to{transform:scale(1)} }
@keyframes heroUrcare{ from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
.static-hero .bg{
  animation:heroApropiere 20s cubic-bezier(.22,.61,.36,1) both;
  will-change:transform;
}
.static-hero .inner > *{animation:heroUrcare .9s var(--ease) both}
.static-hero .kicker{animation-delay:.10s}
.static-hero h1{animation-delay:.22s}
.static-hero p{animation-delay:.38s}
.static-hero .row{animation-delay:.52s}
@media (prefers-reduced-motion:reduce){
  .static-hero .bg,.static-hero .inner > *{animation:none;opacity:1;transform:none}
}

/* filmul mic de pe telefon, asezat peste imaginea fixa */
.static-hero .mv{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity 1s var(--ease);
}
.static-hero.mv-on .mv{opacity:1}
@media (prefers-reduced-motion:reduce){.static-hero .mv{display:none}}

/* ============================================================
   GALERIA CA SLIDESHOW
   Trei poze deodata pe calculator, doua pe tableta, una pe
   telefon. Banda aluneca lateral, pozele vin din dreapta.
   Chenarele sunt patrate, ca pozele inalte si cele late sa stea
   la fel de frumos una langa alta; poza intreaga, netaiata, se
   vede la clic, in slideshow-ul mare.
   Fara JavaScript clasa .slid nu se pune si pozele raman asezate
   pe coloane, ca inainte. Nimeni nu ramane fara ele.
   ============================================================ */
#gal.slid{display:block;column-count:auto;position:relative;overflow:hidden;border-radius:3px}
#gal.slid .sltrack{
  display:flex;gap:14px;
  transition:transform .55s var(--ease);will-change:transform;
}
#gal.slid figure{
  flex:0 0 calc((100% - 28px) / 3);
  margin:0;cursor:zoom-in;
}
#gal.slid .ph{aspect-ratio:1/1;overflow:hidden}
#gal.slid img{width:100%;height:100%;object-fit:cover}
@media (max-width:980px){#gal.slid figure{flex-basis:calc((100% - 14px) / 2)}}
@media (max-width:600px){#gal.slid figure{flex-basis:100%}}

/* sagetile, asezate peste banda */
.slnav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;
  background:rgba(9,13,18,.55);border:1px solid rgba(237,239,238,.34);
  color:#EDEFEE;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
  transition:background .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease);
}
.slnav svg{width:22px;height:22px;display:block}
.slnav:hover{background:rgba(9,13,18,.82);border-color:rgba(237,239,238,.62)}
.slnav[disabled]{opacity:0;pointer-events:none}
.slprev{left:12px}
.slnext{right:12px}
@media (max-width:600px){.slnav{width:40px;height:40px}.slnav svg{width:19px;height:19px}}

/* bulinele si numarul */
.slpuncte{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:20px}
.slpuncte button{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:var(--hairline);border:0;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.slpuncte button:hover{background:var(--hairline-strong)}
.slpuncte button[aria-current="true"]{background:var(--accent);transform:scale(1.35)}


.lbnav[disabled]{opacity:.28;cursor:default}
.lbnav[disabled]:hover{background:rgba(237,239,238,.1);border-color:rgba(237,239,238,.3)}
@media (prefers-reduced-motion:reduce){#gal.slid .sltrack{transition:none}}