:root{
  --navy:#0b1220;
  --navy-2:#111827;
  --slate:#334155;
  --muted:#64748b;
  --line:#e2e8f0;
  --white:#ffffff;
  --yellow:#facc15;
  --orange:#f97316;
  --red:#ef4444;
  --blue:#2563eb;
  --green:#16a34a;
  --shadow:0 20px 50px rgba(2,8,23,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter", Arial, sans-serif;
  color:#0f172a;
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{width:min(1220px, calc(100% - 32px));margin:0 auto}

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(226,232,240,.9);
}
.header-inner{
  min-height:132px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.brand{display:flex;align-items:center;flex:0 0 auto;position:relative;isolation:isolate;overflow:visible}
.brand img{
  height:120px;
  width:auto;
  transform:scaleX(2);
  transform-origin:left center;
  object-fit:contain;
}
.brand.brand-glow::after{
  content:"";position:absolute;left:8px;top:12px;width:88px;height:88px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,92,92,.96) 24%, rgba(255,0,0,.48) 58%, rgba(255,0,0,0) 80%);
  filter:blur(7px);mix-blend-mode:screen;opacity:.96;pointer-events:none;animation:triangleBeacon 1.8s ease-in-out infinite;z-index:2;
}
.brand.brand-glow::before{
  content:"";position:absolute;left:30px;top:2px;width:20px;height:102px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.98) 50%, rgba(255,255,255,0) 100%);
  transform:rotate(24deg);filter:blur(2px);opacity:0;pointer-events:none;animation:triangleSweep 3s linear infinite;z-index:3;
}
.menu{display:flex;align-items:center;gap:28px;font-weight:800;color:var(--slate)}
.menu a:hover,.menu a.active{color:#111827}
.header-actions{display:flex;align-items:center;gap:12px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:16px;border:1px solid transparent;
  background:linear-gradient(135deg,var(--yellow),#f59e0b);color:#111827;font-weight:900;box-shadow:var(--shadow);transition:transform .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-outline{background:#fff;border-color:#cbd5e1;box-shadow:none}
.btn-call{background:linear-gradient(135deg,#fde047,#f59e0b);border-color:transparent;box-shadow:0 14px 26px rgba(245,158,11,.22)}
.btn-whatsapp{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:none;box-shadow:0 18px 32px rgba(34,197,94,.26)}
.lang-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border-radius:999px;font-weight:900;background:linear-gradient(135deg,#111827,#334155);color:#fff;border:1px solid transparent;box-shadow:0 14px 26px rgba(15,23,42,.18)}

.hero{padding:46px 0 18px}
.hero-grid{display:block}
.hero-copy{max-width:980px;margin:0 auto;padding:18px 0 8px}
.hero-copy h1{
  max-width:14ch;margin:0 auto 18px;text-align:center;
  font-size:clamp(2.8rem, 5vw, 4.9rem);line-height:1.04;
}
.hero-copy p,.section-head p,.about-copy p,.contact-card p,.card p,.info-card,.team-card p{ text-align:justify; text-justify:inter-word; }
.hero-copy p{font-size:1.12rem;color:var(--slate);max-width:72ch;margin:0 auto}
.hero-buttons,.logo-panel,.logo-row,.logo-banner,.warning-triangle,.cone{display:none !important}

.page-hero{
  padding:54px 0 22px;
}
.page-hero .section-tag{margin-bottom:14px}
.page-hero h1{
  font-size:clamp(2.4rem,4vw,4rem);
  line-height:1.06;margin:0 0 16px;
}
.page-hero p{
  max-width:75ch;color:var(--slate);margin:0;
  text-align:justify;
}

.info-strip{padding:12px 0 0}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.info-card{
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px 20px;
  box-shadow:0 12px 24px rgba(15,23,42,.05);font-weight:700;color:var(--slate);
}

.section{padding:88px 0}
.section-head{max-width:920px;margin-bottom:34px}
.section-tag{
  display:inline-block;padding:9px 14px;border-radius:999px;background:rgba(250,204,21,.18);
  color:#92400e;font-size:.92rem;font-weight:900;
}
.section-head h2,.about-copy h2,.contact-card h2,.cta-box h2{
  font-size:clamp(2rem,3vw,3rem);line-height:1.08;margin:14px 0;
}
.section-head p,.about-copy p,.contact-card p{color:var(--muted)}

.grid-3,.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card,.about-panel,.contact-card,.form-card,.team-card{
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 16px 34px rgba(15,23,42,.06);
}
.card{transition:transform .28s ease, box-shadow .28s ease}
.card:hover{transform:translateY(-8px);box-shadow:0 24px 42px rgba(15,23,42,.12)}
.card h3{margin:16px 0 10px}
.card p,.team-card p{margin:0;color:var(--muted)}

.service-icon{
  width:62px;height:62px;display:grid;place-items:center;border-radius:20px;font-size:1.35rem;font-weight:900;
  animation:iconPulse 4s ease-in-out infinite, iconSpin 11s linear infinite;
  box-shadow:0 0 0 1px rgba(255,255,255,.55) inset, 0 0 18px rgba(15,23,42,.12);
}
.icon-red{background:linear-gradient(135deg, rgba(239,68,68,.22), rgba(250,204,21,.26)); color:#b91c1c; box-shadow:0 0 22px rgba(239,68,68,.18);}
.icon-gray{background:linear-gradient(135deg, rgba(148,163,184,.22), rgba(203,213,225,.38)); color:#475569; animation-delay:.4s; box-shadow:0 0 22px rgba(148,163,184,.18);}
.icon-yellow{background:linear-gradient(135deg, rgba(250,204,21,.26), rgba(245,158,11,.28)); color:#b45309; animation-delay:.8s; box-shadow:0 0 22px rgba(245,158,11,.18);}
.icon-blue{background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(14,165,233,.24)); color:#1d4ed8; animation-delay:1.2s; box-shadow:0 0 22px rgba(37,99,235,.18);}
.icon-green{background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(16,185,129,.24)); color:#15803d; animation-delay:1.6s; box-shadow:0 0 22px rgba(22,163,74,.18);}
.icon-orange{background:linear-gradient(135deg, rgba(249,115,22,.24), rgba(239,68,68,.18)); color:#c2410c; animation-delay:2s; box-shadow:0 0 22px rgba(249,115,22,.18);}
.icon-electric{background:linear-gradient(135deg, rgba(250,204,21,.22), rgba(251,146,60,.26)); color:#b45309;}
.icon-led{background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(139,92,246,.22)); color:#4338ca;}
.icon-signal{background:linear-gradient(135deg, rgba(239,68,68,.18), rgba(245,158,11,.26)); color:#b91c1c;}
.icon-light{background:linear-gradient(135deg, rgba(253,224,71,.24), rgba(250,204,21,.30)); color:#92400e;}
.icon-protect{background:linear-gradient(135deg, rgba(16,185,129,.18), rgba(34,197,94,.24)); color:#166534;}
.icon-tech{background:linear-gradient(135deg, rgba(148,163,184,.20), rgba(96,165,250,.22)); color:#334155;}

.dark{background:linear-gradient(180deg,#0b1220 0%,#111827 100%);color:#fff}
.about-grid{display:grid;grid-template-columns:1fr .92fr;gap:24px;align-items:start}
.section-tag-dark{background:rgba(255,255,255,.12);color:#fde68a}
.about-copy p{color:#cbd5e1}
.about-panel{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.about-row{
  display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);
}
.about-row:last-child{border-bottom:none}
.about-label{color:#cbd5e1}
.about-anim,.contact-anim{animation:contactFloat 3.4s ease-in-out infinite}
.about-anim:nth-child(2),.contact-anim:nth-child(2){animation-delay:.4s}
.about-anim:nth-child(3),.contact-anim:nth-child(3){animation-delay:.8s}
.about-anim:nth-child(4),.contact-anim:nth-child(4){animation-delay:1.2s}
.contact-item.contact-anim,.about-row.about-anim{position:relative;overflow:hidden}
.contact-item.contact-anim::after,.about-row.about-anim::after{
  content:"";position:absolute;left:-35%;bottom:0;width:42%;height:2px;
  background:linear-gradient(90deg, transparent, rgba(250,204,21,.95), transparent);
  animation:contactSweep 3.6s linear infinite;opacity:.8;
}

.team-section{padding-top:8px}
.team-head{margin-bottom:26px}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.team-card h3{margin:0 0 12px}

.cta-section{padding:10px 0 0}
.cta-box{
  background:linear-gradient(135deg,var(--yellow),var(--orange));color:#111827;border-radius:30px;padding:34px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;box-shadow:var(--shadow);
}
.cta-buttons{display:flex;gap:12px;flex-wrap:wrap}

.contact-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:24px}
.contact-items{display:grid;gap:14px;margin-top:22px}
.contact-item{border:1px solid var(--line);border-radius:18px;padding:16px 18px;background:#fff}
.contact-item span{display:block;color:var(--muted);margin-bottom:6px;font-size:.95rem}
.contact-item a,.contact-item strong{font-size:1.06rem;font-weight:900}
.contact-cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.btn-quote{background:#fff;border-color:#cbd5e1;color:#0f172a;box-shadow:none}

.form-card{display:grid;gap:16px;background:#f8fafc}
.form-card label{display:grid;gap:8px;font-weight:800}
input,textarea{
  width:100%;border:1px solid #cbd5e1;background:#fff;border-radius:16px;padding:14px 16px;font:inherit;
}

.footer{background:#0a1020;color:#cbd5e1;padding:56px 0 18px}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:24px}
.footer-logo{width:min(100%, 420px);margin-bottom:14px}
.footer h4{margin-top:0;color:#fff}
.footer a{display:block;margin-bottom:8px}
.footer-bottom{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.footer-brand{display:inline-flex;align-items:center}
.footer-glow.brand.brand-glow::after{left:6px;top:14px;width:74px;height:74px}
.footer-glow.brand.brand-glow::before{left:26px;top:5px;height:84px}

.whatsapp{
  position:fixed;right:20px;bottom:20px;z-index:90;
  background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-weight:900;padding:14px 18px;border-radius:999px;
  box-shadow:0 18px 30px rgba(0,0,0,.20);
}

@keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes iconSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes contactFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes contactSweep{0%{transform:translateX(-130%)}100%{transform:translateX(360%)}}
@keyframes triangleBeacon{0%,100%{transform:scale(.94);opacity:.45}50%{transform:scale(1.18);opacity:1}}
@keyframes triangleSweep{0%{transform:translateX(-14px) rotate(24deg);opacity:0}14%{opacity:.92}38%{transform:translateX(30px) rotate(24deg);opacity:0}100%{transform:translateX(30px) rotate(24deg);opacity:0}}

@media (max-width:1080px){
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .grid-3,.services-grid,.team-grid,.footer-grid,.info-grid{grid-template-columns:1fr 1fr}
  .cta-box{flex-direction:column;align-items:flex-start}
}
@media (max-width:780px){
  .header-inner{flex-wrap:wrap;justify-content:center;padding:12px 0}
  .menu{order:3;width:100%;justify-content:center;flex-wrap:wrap;gap:16px}
  .header-actions{width:100%;justify-content:center;flex-wrap:wrap}
  .brand img{height:98px}
  .brand.brand-glow::after{left:4px;top:9px;width:68px;height:68px}
  .brand.brand-glow::before{left:22px;top:0;height:78px}
  .hero-copy h1{max-width:12ch;font-size:clamp(2.2rem, 9vw, 3.8rem)}
  .services-grid,.team-grid,.footer-grid,.info-grid{grid-template-columns:1fr}
  .contact-cta{flex-direction:column;align-items:stretch}
}


/* ===== ERIANA visual upgrade ===== */
.hero,
.page-hero{
  position: relative;
  overflow: hidden;
}

.hero::before,
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(248,250,252,0.86)),
    repeating-linear-gradient(
      -28deg,
      rgba(15,23,42,0.035) 0px,
      rgba(15,23,42,0.035) 10px,
      transparent 10px,
      transparent 36px
    );
  pointer-events:none;
}

.hero::after,
.page-hero::after{
  content:"";
  position:absolute;
  right:-120px;
  top:-80px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(250,204,21,0.18) 0%, rgba(249,115,22,0.10) 38%, rgba(255,255,255,0) 72%);
  pointer-events:none;
}

.hero .container,
.page-hero .container{
  position:relative;
  z-index:1;
}

.brand.brand-glow::after{
  width:98px;
  height:98px;
  left:6px;
  top:10px;
  background:radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(255,120,120,.98) 18%, rgba(255,59,59,.72) 42%, rgba(255,0,0,.22) 66%, rgba(255,0,0,0) 82%);
  filter:blur(8px);
  animation:triangleBeaconStrong 1.45s ease-in-out infinite;
}

.brand.brand-glow::before{
  left:28px;
  top:-2px;
  width:24px;
  height:112px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.20) 10%, rgba(255,255,255,1) 48%, rgba(255,255,255,.18) 82%, rgba(255,255,255,0) 100%);
  filter:blur(1.6px);
  animation:triangleSweepStrong 2.5s linear infinite;
}

.footer-glow.brand.brand-glow::after{
  width:84px;
  height:84px;
  left:4px;
  top:12px;
}

.footer-glow.brand.brand-glow::before{
  left:22px;
  top:2px;
  height:94px;
}

.service-icon{
  background:linear-gradient(135deg, #ffffff, #f8fafc) !important;
  border:1px solid rgba(203,213,225,.95);
  width:72px;
  height:72px;
  border-radius:22px;
  box-shadow:
    0 10px 25px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
  animation:iconLift 3.6s ease-in-out infinite;
}

.service-icon svg{
  width:42px;
  height:42px;
  display:block;
  filter:drop-shadow(0 4px 10px rgba(15,23,42,.10));
}

.card:hover .service-icon{
  transform:translateY(-4px) scale(1.04);
}

@keyframes triangleBeaconStrong{
  0%,100%{transform:scale(.88); opacity:.52;}
  50%{transform:scale(1.24); opacity:1;}
}

@keyframes triangleSweepStrong{
  0%{transform:translateX(-18px) rotate(24deg); opacity:0;}
  12%{opacity:.98;}
  36%{transform:translateX(34px) rotate(24deg); opacity:0;}
  100%{transform:translateX(34px) rotate(24deg); opacity:0;}
}

@keyframes iconLift{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-3px);}
}

@media (max-width:780px){
  .brand.brand-glow::after{
    width:74px;
    height:74px;
    left:2px;
    top:7px;
  }
  .brand.brand-glow::before{
    left:18px;
    top:-2px;
    height:82px;
  }
}


/* stronger road marking background */
.hero::before,
.page-hero::before{
  background:
    linear-gradient(135deg, rgba(255,255,255,0.90), rgba(248,250,252,0.80)),
    repeating-linear-gradient(
      -28deg,
      rgba(0,0,0,0.06) 0px,
      rgba(0,0,0,0.06) 12px,
      transparent 12px,
      transparent 38px
    );
}


/* logo size fix so it doesn't cover menu */
.brand img{
  height:88px;
  width:auto;
  transform:none;
  object-fit:contain;
}


/* reflective effect like real road signs */
.service-icon svg{
  position:relative;
}

.service-icon svg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.8) 45%,
    rgba(255,255,255,0) 60%
  );
  opacity:0.6;
  animation:reflectMove 3.2s linear infinite;
}

@keyframes reflectMove{
  0%{transform:translateX(-120%);}
  100%{transform:translateX(120%);}
}


/* animated road stripe background */
body::before{
  content:"";
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:6px;
  background:repeating-linear-gradient(
    90deg,
    #facc15 0px,
    #facc15 60px,
    transparent 60px,
    transparent 120px
  );
  animation:roadStripeMove 4s linear infinite;
  opacity:0.6;
  pointer-events:none;
}

@keyframes roadStripeMove{
  0%{background-position:0 0;}
  100%{background-position:120px 0;}
}


/* logo 50% bigger */
.brand img{
  height:132px;
}

.footer-logo{
  width:150%;
  max-width:520px;
}