@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200;300;400;600;700;900&family=Barlow:wght@300;400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --night:    #111110;
  --granite:  #242422;
  --concrete: #6b6a65;
  --dust:     #b8b5ac;
  --limestone:#e8e4dc;
  --sand:     #b8956a;
  --accent:   #9a7040;
  --border:   rgba(255,255,255,0.07);
  --section-bg: rgba(17,17,16,0.72); /* sectiuni semi-transparente */
}

html{ scroll-behavior:smooth }

body{
  background:var(--night); /* fallback solid daca canvas nu ruleaza */
  color:var(--limestone);
  font-family:'Barlow',sans-serif;
  font-weight:300;
  font-size:15px;
  line-height:1.85;
  overflow-x:hidden;
}

/* ══ CANVAS BACKGROUND ══
   Fixed, z-index 1 — se vede mereu in viewport.
   Body background (#111110) e fallback pentru zone fara canvas. */
#beton-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  display:block;
}

/* ══ GRAIN OVERLAY ══ */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.035;
  pointer-events:none;
  z-index:2;
}

/* ══ Z-INDEX STACK ══
   1: canvas
   2: grain
   3: nav + content
   200: nav
   500: modal
   1000: lightbox
   2000: contact modal
   8000: page transition
   9999: cursor */

/* Tot continutul sta deasupra canvas-ului */
nav, main, footer, .mobile-nav{
  position:relative;
  z-index:3;
}
nav{ z-index:200; }

/* ══ SECTIUNI — semi-transparente, panza vizibila ══ */
/* Regula unica, fara overrideuri: orice sectiune mare are rgba */
section,
.intro-col,
.split, .split-a, .split-b,
.contact-section,
.page-hero,
.portfolio,
.stats,
.process,
.cta-band{
  background: var(--section-bg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Exceptii: hero e transparent ca sa se vada panza complet */
.hero{
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Footer si nav: mai opace pentru lizibilitate */
footer{
  background: rgba(17,17,16,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
nav{
  background: rgba(17,17,16,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ══ TEXT SHADOW GLOBAL — lizibilitate pe fundal animat ══ */
h1,h2,h3,h4,h5,
.page-title,.hero-title,.s-title,.intro-title,.pn-title{
  text-shadow: 0 2px 20px rgba(0,0,0,0.95), 0 0 40px rgba(0,0,0,0.7);
}
p, li, span, a, div{
  /* text-shadow doar unde e nevoie — nu global pe toate div-urile */
}
.s-label, .intro-num, .feat-label, .cm-lbl{
  text-shadow: 0 0 20px rgba(184,149,106,0.3);
}

/* ══ NAV ══ */
nav{
  position:fixed;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 48px;
  border-bottom:1px solid var(--border);
  transition:padding .3s;
}
nav.scrolled{ padding:10px 48px; background:rgba(17,17,16,0.96); }

.nav-logo{
  font-family:'Barlow Condensed',sans-serif;
  display:flex;align-items:baseline;text-decoration:none;gap:0;
}
.nav-logo .BR,.nav-logo .TT{ font-size:22px;font-weight:900;color:var(--limestone);letter-spacing:-1px }
.nav-logo .u{ font-size:14px;font-weight:200;color:var(--sand) }
.nav-logo .st{ font-size:9px;font-weight:400;letter-spacing:5px;color:var(--dust);margin-left:10px;align-self:center }

.nav-links{ display:flex;list-style:none }
.nav-links a{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--dust);text-decoration:none;
  padding:6px 16px;transition:color .2s;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-2px;left:16px;right:16px;
  height:1px;background:var(--sand);
  transform:scaleX(0);transition:transform .25s;transform-origin:left;
}
.nav-links a:hover,.nav-links a.active{ color:var(--limestone) }
.nav-links a.active::after,.nav-links a:hover::after{ transform:scaleX(1) }

.nav-page-indicator{ display:flex;gap:6px;align-items:center }
.nav-dot{
  width:4px;height:4px;background:var(--granite);
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  transition:background .2s,transform .2s;
}
.nav-dot.active{ background:var(--sand);transform:scale(1.5) }

.nav-cta{
  font-family:'Barlow Condensed',sans-serif;font-size:10px;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--night);background:var(--sand);
  text-decoration:none;padding:9px 20px;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 100%,8px 100%);
  transition:background .2s;flex-shrink:0;
}
.nav-cta:hover{ background:var(--accent) }

.nav-burger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:4px;
}
.nav-burger span{ display:block;width:22px;height:1px;background:var(--limestone) }

.mobile-nav{
  display:none;position:fixed;top:54px;left:0;right:0;
  background:rgba(17,17,16,0.98);border-bottom:1px solid var(--border);
  z-index:199;padding:12px 0;
}
.mobile-nav.open{ display:block }
.mobile-nav a{
  display:block;padding:14px 24px;
  font-family:'Barlow Condensed',sans-serif;font-size:14px;
  font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--dust);text-decoration:none;
  border-bottom:1px solid var(--border);
}
.mobile-nav a:hover,.mobile-nav a.active{ color:var(--sand) }
.mobile-nav .mobile-cta{
  display:block;margin:12px 20px 4px;text-align:center;
  background:var(--sand);color:var(--night);padding:12px;
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;text-decoration:none;
}

/* ══ LABELS ══ */
.s-label{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:5px;color:var(--sand);
  text-transform:uppercase;display:block;margin-bottom:16px;
}

/* ══ BUTOANE ══ */
.btn-primary{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--night);background:var(--sand);border:none;
  padding:13px 36px;text-decoration:none;display:inline-block;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 100%,10px 100%);
  transition:background .2s;cursor:pointer;
}
.btn-primary:hover{ background:var(--accent) }

.btn-outline{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--limestone);background:rgba(17,17,16,0.5);
  border:1px solid rgba(232,228,220,0.2);padding:13px 36px;
  text-decoration:none;display:inline-block;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:all .2s;cursor:pointer;
}
.btn-outline:hover{ border-color:var(--sand);color:var(--sand);background:rgba(184,149,106,0.06) }

/* ══ REVEAL ══ */
.reveal{ opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease }
.reveal.on{ opacity:1;transform:none }

/* ══ PAGE NEXT ══ */
.page-next{
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 48px;border-top:1px solid var(--border);
  background:rgba(17,17,16,0.6);
  text-decoration:none;transition:background .3s;cursor:pointer;
  backdrop-filter:blur(8px);
}
.page-next:hover{ background:rgba(17,17,16,0.8) }
.pn-label{
  font-family:'Barlow Condensed',sans-serif;font-size:10px;
  font-weight:600;letter-spacing:4px;color:var(--dust);
  text-transform:uppercase;display:block;margin-bottom:6px;
}
.pn-title{
  font-family:'Barlow Condensed',sans-serif;font-size:clamp(20px,3vw,32px);
  font-weight:900;color:var(--limestone);letter-spacing:-.5px;
}
.pn-arrow{ font-size:28px;color:var(--sand);transition:transform .3s;flex-shrink:0 }
.page-next:hover .pn-arrow{ transform:translateX(6px) }

/* ══ FOOTER ══ */
footer{
  border-top:1px solid var(--border);padding:32px 48px;
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:20px;align-items:center;
}
.footer-logo{ font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:2px;color:var(--limestone);margin-bottom:4px }
.footer-sub{ font-size:12px;color:var(--dust) }
.footer-logo-img{ height:30px;width:auto;display:block;margin-bottom:10px }
.footer-contact{ text-align:center }
.footer-contact-name{
  font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:3px;color:var(--sand);text-transform:uppercase;display:block;margin-bottom:4px;
}
.footer-contact-info{ font-size:13px;color:var(--limestone) }
.footer-contact-info a{ color:var(--limestone);text-decoration:none;transition:color .2s }
.footer-contact-info a:hover{ color:var(--sand) }
.footer-right{ text-align:right;font-size:12px;color:var(--dust) }

/* ══ LIGHTBOX ══ */
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,0.97);
  z-index:1000;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.lightbox.open{ opacity:1;pointer-events:all }
.lightbox img{ max-width:90vw;max-height:88vh;object-fit:contain;display:block }
.lb-close{
  position:absolute;top:20px;right:24px;
  font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:3px;
  color:var(--dust);background:none;border:none;cursor:pointer;
  text-transform:uppercase;transition:color .2s;
}
.lb-close:hover{ color:var(--sand) }
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(17,17,16,.7);border:1px solid var(--granite);
  color:var(--limestone);width:44px;height:44px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;transition:border-color .2s;
}
.lb-nav:hover{ border-color:var(--sand) }
.lb-prev{ left:16px }.lb-next{ right:16px }

/* ══ RESPONSIVE ══ */
@media(max-width:900px){
  nav{ padding:12px 20px }
  nav.scrolled{ padding:8px 20px }
  .nav-links,.nav-page-indicator,.nav-cta{ display:none }
  .nav-burger{ display:flex }
  footer{ grid-template-columns:1fr;gap:16px;padding:24px 20px;text-align:center }
  .footer-logo-img{ margin-left:auto;margin-right:auto }
  .footer-right{ text-align:center }
  .page-next{ padding:20px 20px }
}

/* ══ LINK TEHNIC — paralelogram gold glow ══ */
.link-technical{
  font-family:'Barlow Condensed',sans-serif;font-size:10px;
  font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--night);background:var(--sand);
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  padding:9px 22px;margin-top:16px;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 100%,10px 100%);
  position:relative;
  box-shadow:0 0 12px rgba(184,149,106,0.35),0 0 24px rgba(184,149,106,0.15);
  transition:background .2s,box-shadow .2s,color .2s;
}
.link-technical:hover{
  background:var(--limestone);
  color:var(--night);
  box-shadow:0 0 18px rgba(184,149,106,0.55),0 0 36px rgba(184,149,106,0.25);
}
.link-technical .lt-arrow{
  font-size:12px;transition:transform .2s;
}
.link-technical:hover .lt-arrow{transform:translateX(3px)}


/* ══ CONTACT FORM POPUP ══ */
.cf-overlay{
  position:fixed;inset:0;background:rgba(17,17,16,.85);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:9000;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.cf-overlay.open{opacity:1;pointer-events:all}
.cf-modal{
  background:var(--granite);border:1px solid rgba(184,149,106,.25);
  width:100%;max-width:520px;max-height:90vh;overflow-y:auto;
  position:relative;
}
.cf-close{
  position:absolute;top:16px;right:20px;
  font-family:'Barlow Condensed',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:3px;color:var(--concrete);
  background:none;border:none;cursor:pointer;text-transform:uppercase;
  transition:color .2s;padding:4px;
}
.cf-close:hover{color:var(--limestone)}
.cf-head{
  padding:36px 36px 20px;
  border-bottom:1px solid var(--border);
}
.cf-head-label{
  font-family:'Barlow Condensed',sans-serif;font-size:10px;
  font-weight:600;letter-spacing:4px;color:var(--sand);
  text-transform:uppercase;display:block;margin-bottom:10px;
}
.cf-head h2{
  font-family:'Barlow Condensed',sans-serif;font-size:clamp(28px,5vw,44px);
  font-weight:900;color:var(--limestone);letter-spacing:-1.5px;line-height:1;
}
.cf-body{padding:28px 36px}
.cf-row{margin-bottom:18px}
.cf-label{
  font-family:'Barlow Condensed',sans-serif;font-size:9px;
  font-weight:600;letter-spacing:3px;text-transform:uppercase;
  color:var(--concrete);display:block;margin-bottom:7px;
}
.cf-input,.cf-select,.cf-textarea{
  width:100%;background:rgba(17,17,16,.6);
  border:1px solid var(--granite);
  color:var(--limestone);font-family:'Barlow',sans-serif;
  font-size:13px;font-weight:300;padding:10px 14px;
  outline:none;transition:border-color .2s;
  appearance:none;-webkit-appearance:none;box-sizing:border-box;
}
.cf-input:focus,.cf-select:focus,.cf-textarea:focus{
  border-color:rgba(184,149,106,.5);
}
.cf-textarea{resize:vertical;min-height:80px}
.cf-select option{background:var(--granite)}
.cf-submit{
  font-family:'Barlow Condensed',sans-serif;font-size:10px;
  font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--night);background:var(--sand);
  border:none;cursor:pointer;width:100%;padding:13px;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 100%,10px 100%);
  box-shadow:0 0 12px rgba(184,149,106,.35);
  transition:background .2s,box-shadow .2s;margin-top:8px;
}
.cf-submit:hover{
  background:var(--limestone);
  box-shadow:0 0 20px rgba(184,149,106,.5);
}
.cf-submit:disabled{opacity:.5;cursor:not-allowed}
.cf-status{
  font-size:12px;color:var(--dust);text-align:center;
  margin-top:12px;min-height:18px;
}
.cf-status.ok{color:#7aad7a}
.cf-status.err{color:#c47a7a}
/* Card Marian sub formular */
.cf-card{
  margin:0 36px 36px;padding:20px 20px;
  border:1px solid var(--border);
  display:flex;gap:16px;align-items:flex-start;
}
.cf-card-initial{
  font-family:'Barlow Condensed',sans-serif;font-size:32px;
  font-weight:900;color:var(--sand);line-height:1;
  flex-shrink:0;width:40px;text-align:center;
}
.cf-card-name{
  font-family:'Barlow Condensed',sans-serif;font-size:16px;
  font-weight:700;color:var(--limestone);letter-spacing:.5px;
  display:block;margin-bottom:2px;
}
.cf-card-role{
  font-family:'Barlow Condensed',sans-serif;font-size:9px;
  font-weight:600;letter-spacing:3px;color:var(--sand);
  text-transform:uppercase;display:block;margin-bottom:8px;
}
.cf-card-tel{
  font-family:'Barlow Condensed',sans-serif;font-size:13px;
  font-weight:600;color:var(--limestone);text-decoration:none;
  letter-spacing:.5px;transition:color .2s;
}
.cf-card-tel:hover{color:var(--sand)}
@media(max-width:540px){
  .cf-head,.cf-body,.cf-card{padding-left:20px;padding-right:20px}
  .cf-card{margin-left:20px;margin-right:20px}
}