/* HornSec Premium Theme */
:root{
  --bg:#0b1220;
  --card:#0f172a;
  --muted:#92a0b3;
  --txt:#e8eef7;
  --brand:#12b4a6;
  --brand-2:#2f7fff;
  --line:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.06);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 800px at 80% -10%, rgba(47,127,255,.15), transparent 60%),
             radial-gradient(900px 600px at -10% 0%, rgba(18,180,166,.18), transparent 55%),
             var(--bg);
  color:var(--txt);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{max-width:1160px;margin-inline:auto;padding:0 20px}
.narrow{max-width:820px;margin-inline:auto}

.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(140%) blur(6px);
  background:linear-gradient(to bottom, rgba(11,18,32,.85), rgba(11,18,32,.2));
  border-bottom:1px solid var(--line);

}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--txt);font-weight:700;letter-spacing:.7px}
.logo{width:28px;height:28px}
.logo.small{width:22px;height:22px;opacity:.9}

.nav{display:flex;gap:14px;align-items:center}
.nav a{color:var(--txt);text-decoration:none;opacity:.85;padding:8px 10px;border-radius:10px}
.nav a:hover{background:var(--glass);opacity:1}
.btn{display:inline-block;padding:12px 18px;border-radius:14px;text-decoration:none;font-weight:600;border:1px solid transparent;box-shadow:var(--shadow)}
.btn--primary{background:linear-gradient(135deg, var(--brand), var(--brand-2));color:white;border-color:transparent}
.btn--ghost{background:transparent;color:var(--txt);border-color:var(--line)}

.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer}
.hamburger span{width:24px;height:2px;background:var(--txt);display:block;border-radius:2px}

.hero{position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.12fr .88fr;gap:40px;align-items:center;padding:68px 0 30px}
.eyebrow{letter-spacing:.18em;color:var(--brand);font-weight:800;margin:0 0 6px 0}
.hero h1{font-size:48px;line-height:1.05;margin:.1em 0 .25em 0}
.sub{font-size:17px;color:#cfe1f5;opacity:.9}
.actions{display:flex;gap:12px;margin:18px 0 8px}
.hero-bullets{display:flex;gap:18px;flex-wrap:wrap;padding:0;margin:12px 0 0 0;list-style: none;color:#cfe1f5;opacity:.85}
.hero-art .card{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));box-shadow:var(--shadow)}
.card-head{height:36px;border-bottom:1px solid var(--line);display:flex;gap:6px;align-items:center;padding:0 12px}
.card-head .dot{width:8px;height:8px;border-radius:50%;background:#5b6b86;display:inline-block}
.card-body{padding:16px 16px 22px}
.stat{margin:.2em 0 .2em 0}
.mini-graph{height:90px;border-radius:12px;background:linear-gradient(180deg, rgba(18,180,166,.25), rgba(47,127,255,.25));mask:radial-gradient(100% 90% at 60% 40%, white, transparent 70%);border:1px dashed var(--line)}

.trust{padding:20px 0 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.trust-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.trust-logos{display:flex;gap:16px;flex-wrap:wrap;opacity:.85}
.trust-logos span{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)}

.section{padding:70px 0}
.section.alt{background:rgba(255,255,255,.02);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px}
.section h2{margin:0}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));padding:18px}
.tile h3{margin-top:10px;margin-bottom:8px}
.tile .ticks{margin:10px 0 0 0;padding-left:18px}
.tile .ticks li{margin:6px 0}
.tile-icon img{width:28px;height:28px;opacity:.9}

.platform{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.phone-mock{width:300px;max-width:90%;margin:auto;border-radius:28px;border:1px solid var(--line);background:rgba(255,255,255,.03);box-shadow:var(--shadow);padding:10px}
.notch{width:120px;height:18px;background:#0c1322;border-radius:0 0 12px 12px;margin:0 auto 8px}
.phone-screen{border:1px solid var(--line);border-radius:20px;padding:12px}
.app-head{display:flex;gap:8px;margin-bottom:10px}
.pill{padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--line)}
.pill--ok{background:rgba(18,180,166,.15)}
.pill--warn{background:rgba(255,175,0,.12)}
.events{list-style:none;padding:0;margin:0 0 12px 0}
.events li{display:flex;align-items:center;gap:8px;margin:6px 0}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#5b6b86}
.dot--ok{background:#12b4a6}
.dot--warn{background:#ffaf00}
.dot--info{background:#2f7fff}
.btn-block{width:100%;text-align:center}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.price-card{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));padding:18px;position:relative}
.price-card--featured{background:linear-gradient(180deg, rgba(47,127,255,.12), rgba(18,180,166,.12));border-color:rgba(255,255,255,.18);transform:translateY(-3px)}
.badge{position:absolute;top:-10px;right:14px;background:linear-gradient(135deg, var(--brand), var(--brand-2));color:#fff;font-size:12px;padding:6px 10px;border-radius:999px;box-shadow:var(--shadow)}
.price{font-weight:800;font-size:36px;margin:8px 0}
.price span{font-weight:600;font-size:.6em;opacity:.8}

.contact{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:start}
.form label{display:block;font-weight:600;margin:8px 0 6px 0}
.form input,.form textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);color:var(--txt);outline:none
}
.form input:focus,.form textarea:focus{border-color:rgba(18,180,166,.55);box-shadow:0 0 0 3px rgba(18,180,166,.15)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-card{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));padding:18px}

.site-footer{border-top:1px solid var(--line);padding:22px 0;background:rgba(0,0,0,.2)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:16px}
.foot a{color:#cfe1f5;text-decoration:none;opacity:.8}
.foot a:hover{opacity:1}

.backtotop{
  position:fixed;right:16px;bottom:16px;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.04);display:grid;place-items:center;
  cursor:pointer;opacity:0;transform:translateY(8px);transition:.25s;box-shadow:var(--shadow)
}

@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr;gap:22px;padding-top:40px}
  .card-grid{grid-template-columns:1fr;gap:12px}
  .platform{grid-template-columns:1fr;gap:18px}
  .pricing{grid-template-columns:1fr;gap:12px}
  .contact{grid-template-columns:1fr;gap:16px}
  .grid2{grid-template-columns:1fr}
  .nav{display:none;position:absolute;top:64px;right:0;background:#0b1424;border:1px solid var(--line);border-radius:14px;padding:10px;flex-direction:column;gap:8px;margin:10px;box-shadow:var(--shadow)}
  .hamburger{display:flex}
}

.hero-gradient{
  position:absolute;inset:0;pointer-events:none;opacity:.65;
  background:radial-gradient(700px 420px at 60% -20%, rgba(47,127,255,.35), transparent 60%),
             radial-gradient(500px 380px at -10% 10%, rgba(18,180,166,.35), transparent 60%);
}

.muted{color:var(--muted)}
.list{padding-left:18px}
hr{border:0;border-top:1px solid var(--line);margin:12px 0}
/* ---------- Mobile spacing & layout fixes (override) ---------- */
.container{ padding-inline: clamp(16px, 5vw, 28px); }

.hero h1{ font-size: clamp(32px, 6vw, 48px); }          /* prevents huge heading squeezing */
.section{ padding: clamp(56px, 7vw, 80px) 0; }          /* nicer vertical rhythm on phones */

/* Ensure mobile dropdown positions nicely on the right */
@media (max-width:980px){
  .nav{ right:12px; left:auto; }
}
/* ---------- Mobile spacing & layout fixes (override) ---------- */
.container{ padding-inline: clamp(16px, 5vw, 28px); }

.hero h1{ font-size: clamp(32px, 6vw, 48px); }
.section{ padding: clamp(56px, 7vw, 80px) 0; }

@media (max-width: 640px){
  .hero-inner{ text-align:center }
  .actions{ justify-content:center }
  .hero-bullets{ justify-content:center }
}

@media (max-width:980px){ .nav{ right:12px; left:auto; } }
/* HS MOBILE NAV FIX */
.nav-wrap{position:relative}
@media (max-width:980px){.hamburger{display:flex;position:relative;z-index:10000}.nav{position:absolute;top:64px;right:12px;min-width:220px;display:none;flex-direction:column;gap:8px;background:#0b1424;border:1px solid var(--line);border-radius:14px;padding:10px;z-index:9999;box-shadow:0 12px 28px rgba(0,0,0,.35)}.nav a{padding:10px 12px}}
section[id]{scroll-margin-top:88px}.section{padding:64px 0}
section[id]{scroll-margin-top:88px}.section{padding:64px 0}
section[id]{scroll-margin-top:88px}.section{padding:64px 0}
section[id]{scroll-margin-top:88px}.section{padding:64px 0}.references-list{margin-top:1rem;line-height:1.8}
section[id]{scroll-margin-top:88px}.section{padding:64px 0}
/* References page grid */
.logo-grid{display:grid;gap:20px;grid-template-columns:repeat( auto-fit, minmax(160px,1fr) );margin-top:24px}
.logo-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.logo-card img{max-width:160px;max-height:60px;object-fit:contain;display:block;filter:none}
.logo-card figcaption{margin-top:8px;font-size:.95rem;opacity:.9}
/* References grid styling */ .logo-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:2rem}.logo-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px;text-align:center;transition:all .25s ease}.logo-card:hover{background:rgba(255,255,255,.07);transform:translateY(-4px)}.logo-card img{max-width:160px;max-height:70px;object-fit:contain;display:block;margin:0 auto 10px}.logo-card figcaption{font-size:.95rem;opacity:.85}
/* === HORNSEC PREMIUM THEME === */
:root{
  --brand-a:#19E3CF;        /* teal */
  --brand-b:#4F7BFF;        /* blue */
  --ink-1:rgba(255,255,255,.92);
  --ink-2:rgba(255,255,255,.78);
  --ink-3:rgba(255,255,255,.64);
  --line:rgba(255,255,255,.10);
  --glass:rgba(14,20,34,.55);
}
/* Premium header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(9,14,24,.68);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{max-width:1200px;margin:0 auto;padding:14px 22px;}

/* Nav links: kill default purple, add premium hover/active */
.site-header nav a,
.site-header nav a:visited{
  color:var(--ink-2);
  text-decoration:none;
  font-weight:600;
  letter-spacing:.2px;
  position:relative;
  transition:color .22s ease, opacity .22s ease, transform .22s ease;
}
.site-header nav a:hover{ color:var(--ink-1); transform:translateY(-1px); }
.site-header nav a:focus-visible{ outline:2px solid var(--brand-b); border-radius:8px; outline-offset:3px; }

/* Gradient underline */
.site-header nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  background:linear-gradient(90deg,var(--brand-a),var(--brand-b));
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.site-header nav a:hover::after,
.site-header nav a.active::after{ transform:scaleX(1); }

/* Mobile spacing keeps it clean */
@media (max-width:980px){
  .site-header .container{padding:12px 16px;}
}
/* References grid — premium cards */
.logo-grid{
  display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:28px;
}
.logo-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px;
  text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 26px rgba(0,0,0,.25);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.logo-card:hover{
  transform:translateY(-4px);
  border-color:rgba(79,123,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 16px 40px rgba(36,73,255,.25);
}
.logo-card img{
  max-width:200px; max-height:72px; object-fit:contain; display:block; margin:0 auto 12px;
}
.logo-card figcaption{
  color:var(--ink-2); font-weight:600; letter-spacing:.3px;
}
/* Section rhythm + anchor offset */
section[id]{ scroll-margin-top: 88px; }
.section{ padding: clamp(64px, 8vw, 100px) 0; }
/* === PREMIUM REFERENCES SECTION === */
.references-section{
  background:radial-gradient(ellipse at center, rgba(13,20,34,.9) 0%, rgba(8,12,22,1) 100%);
  padding: clamp(80px, 8vw, 120px) 0;
  text-align:center;
  color:var(--ink-1);
}
.references-section h2{
  font-size: clamp(32px, 5vw, 46px);
  font-weight:700;
  letter-spacing:.4px;
  background:linear-gradient(90deg,var(--brand-a),var(--brand-b));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:12px;
}
.references-section p{
  color:var(--ink-3);
  font-size:18px;
  margin-bottom:48px;
}
.references-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:48px;
}
.ref-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:36px 42px;
  width: min(340px, 90%);
  text-align:center;
  transition: all .3s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 40px rgba(0,0,0,.25);
}
.ref-card:hover{
  transform:translateY(-6px) scale(1.03);
  border-color:rgba(79,123,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 20px 50px rgba(36,73,255,.25);
}
.ref-card img{
  max-width:260px;
  max-height:120px;
  margin:0 auto 16px;
  object-fit:contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
}
.ref-card span{
  color:var(--ink-2);
  font-weight:600;
  letter-spacing:.5px;
}
@media(max-width:768px){
  .ref-card{ width:100%; max-width:340px; padding:28px; }
  .ref-card img{ max-width:220px; max-height:100px; }
}
/* === REFINED REFERENCES GRID (MULTI-LOGO SUPPORT) === */
.references-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:48px;
  align-items:center;
  justify-items:center;
  max-width:1100px;
  margin:0 auto;
}

.ref-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:40px 32px;
  text-align:center;
  transition:all .3s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.25);
  width:100%;
  max-width:300px;
}

.ref-card:hover{
  transform:translateY(-6px);
  border-color:rgba(79,123,255,.4);
  box-shadow:0 20px 50px rgba(79,123,255,.25);
}

.ref-card img{
  max-width:240px;
  max-height:100px;
  margin:0 auto 16px;
  object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
  transition:transform .3s ease;
}

.ref-card:hover img{ transform:scale(1.05); }

.ref-card figcaption{
  font-weight:600;
  letter-spacing:.4px;
  color:var(--ink-2);
  font-size:15px;
}

@media(max-width:900px){
  .references-grid{ gap:36px; }
  .ref-card{ padding:32px 28px; }
  .ref-card img{ max-width:200px; max-height:90px; }
}
@media(max-width:600px){
  .references-grid{ gap:28px; }
  .ref-card{ max-width:90%; }
  .ref-card img{ max-width:180px; max-height:80px; }
}
/* === REFINED REFERENCES GRID (MULTI-LOGO SUPPORT) === */
.references-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:48px;
  align-items:center;
  justify-items:center;
  max-width:1100px;
  margin:0 auto;
}

.ref-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:40px 32px;
  text-align:center;
  transition:all .3s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.25);
  width:100%;
  max-width:300px;
}

.ref-card:hover{
  transform:translateY(-6px);
  border-color:rgba(79,123,255,.4);
  box-shadow:0 20px 50px rgba(79,123,255,.25);
}

.ref-card img{
  max-width:240px;
  max-height:100px;
  margin:0 auto 16px;
  object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
  transition:transform .3s ease;
}

.ref-card:hover img{ transform:scale(1.05); }

.ref-card figcaption{
  font-weight:600;
  letter-spacing:.4px;
  color:var(--ink-2);
  font-size:15px;
}

@media(max-width:900px){
  .references-grid{ gap:36px; }
  .ref-card{ padding:32px 28px; }
  .ref-card img{ max-width:200px; max-height:90px; }
}
@media(max-width:600px){
  .references-grid{ gap:28px; }
  .ref-card{ max-width:90%; }
  .ref-card img{ max-width:180px; max-height:80px; }
}
/* === REFINED REFERENCES GRID (MULTI-LOGO SUPPORT) === */
.references-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:48px;
  align-items:center;
  justify-items:center;
  max-width:1100px;
  margin:0 auto;
}

.ref-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:40px 32px;
  text-align:center;
  transition:all .3s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.25);
  width:100%;
  max-width:300px;
}

.ref-card:hover{
  transform:translateY(-6px);
  border-color:rgba(79,123,255,.4);
  box-shadow:0 20px 50px rgba(79,123,255,.25);
}

.ref-card img{
  max-width:240px;
  max-height:100px;
  margin:0 auto 16px;
  object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
  transition:transform .3s ease;
}

.ref-card:hover img{ transform:scale(1.05); }

.ref-card figcaption{
  font-weight:600;
  letter-spacing:.4px;
  color:var(--ink-2);
  font-size:15px;
}

@media(max-width:900px){
  .references-grid{ gap:36px; }
  .ref-card{ padding:32px 28px; }
  .ref-card img{ max-width:200px; max-height:90px; }
}
@media(max-width:600px){
  .references-grid{ gap:28px; }
  .ref-card{ max-width:90%; }
  .ref-card img{ max-width:180px; max-height:80px; }
}
/* Premium Enza Home logo sizing */
.ref-card img[alt*="ENZA HOME"]{
  max-width:340px;
  max-height:140px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));
}
/* === REFINED REFERENCES GRID (MULTI-LOGO SUPPORT) === */
.references-section{padding:clamp(80px,8vw,120px) 0;text-align:center}
.references-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:48px;align-items:center;justify-items:center;max-width:1100px;margin:0 auto}
.ref-card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:40px 32px;text-align:center;transition:all .3s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 28px rgba(0,0,0,.25);width:100%;max-width:300px}
.ref-card:hover{transform:translateY(-6px);border-color:rgba(79,123,255,.4);box-shadow:0 20px 50px rgba(79,123,255,.25)}
.ref-card img{max-width:260px;max-height:120px;margin:0 auto 16px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));transition:transform .3s ease}
.ref-card:hover img{transform:scale(1.05)}
.ref-card figcaption{font-weight:600;letter-spacing:.4px;opacity:.85}
@media(max-width:900px){.references-grid{gap:36px}.ref-card{padding:32px 28px}.ref-card img{max-width:220px;max-height:100px}}
@media(max-width:600px){.references-grid{gap:28px}.ref-card{max-width:90%}.ref-card img{max-width:190px;max-height:90px}}
/* === TEXT-ONLY REFERENCES CARDS (PREMIUM STYLE) === */
.ref-card{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:48px 32px;
  text-align:center;
  min-height:140px;
  font-size:22px;
  font-weight:700;
  letter-spacing:.6px;
  color:var(--ink-1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 28px rgba(0,0,0,.25);
  transition:all .3s ease;
}
.ref-card:hover{
  transform:translateY(-6px);
  background:linear-gradient(145deg,rgba(36,73,255,.25),rgba(25,227,207,.15));
  border-color:rgba(79,123,255,.45);
  box-shadow:0 20px 50px rgba(79,123,255,.25);
}
.references-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:40px;
  justify-items:center;
  margin-top:48px;
}
@media(max-width:600px){
  .ref-card{font-size:18px;padding:36px 24px}
}
/* Premium header/nav */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,14,24,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header nav a,
.site-header nav a:visited{
  color:var(--ink-2)!important;text-decoration:none;font-weight:600;letter-spacing:.2px;
  position:relative;transition:color .22s ease,transform .22s ease;
}
.site-header nav a:hover{color:var(--ink-1)!important;transform:translateY(-1px)}
.site-header nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;
  background:linear-gradient(90deg,var(--brand-a),var(--brand-b));
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
.site-header nav a:hover::after,
.site-header nav a.active::after{transform:scaleX(1)}
/* References section header */
.references-section{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(79,123,255,.18), transparent 60%),
    radial-gradient(900px 420px  at 20% 10%,  rgba(25,227,207,.10), transparent 55%),
    #0a0f1a;
  padding:clamp(80px,8vw,120px) 0;
  text-align:center;
}
.references-section h2{
  font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:.4px;margin:0 0 8px;
  background:linear-gradient(90deg,var(--brand-a),var(--brand-b));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.references-section p{color:var(--ink-3);font-size:18px;margin:0 0 40px}
/* Premium reference cards */
.references-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:36px;max-width:1100px;margin:0 auto;justify-items:center;align-items:stretch;
}
.ref-card{
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:42px 28px;min-height:150px;width:100%;max-width:320px;border-radius:22px;
  color:var(--ink-1);font-size:22px;font-weight:800;letter-spacing:.6px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 28px rgba(0,0,0,.25);
  transform:perspective(800px) translateZ(0); transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.ref-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg, rgba(25,227,207,.25), rgba(79,123,255,.25));
  opacity:.0;transition:opacity .28s ease;
}
.ref-card::after{
  content:"";position:absolute;inset:1px;border-radius:inherit;
  border:1px solid rgba(255,255,255,.06);pointer-events:none;
}
.ref-card:hover{
  transform:perspective(800px) translateY(-6px) scale(1.02) rotateX(1deg);
  border-color:rgba(79,123,255,.45);
  box-shadow:0 22px 60px rgba(79,123,255,.22);
}
.ref-card:hover::before{opacity:.10}
@media(max-width:600px){.ref-card{max-width:94%;font-size:18px;padding:34px 22px}}
/* focus accessibility */
.ref-card:focus-visible{outline:2px solid var(--brand-b);outline-offset:4px}
/* ===== STRUCTURAL LAYOUT ===== */
.container{max-width:1200px;margin:0 auto;padding:0 22px}
.section{padding:clamp(64px,8vw,100px) 0}
.band{background:
  radial-gradient(1100px 600px at 50% -20%, rgba(79,123,255,.16), transparent 60%),
  radial-gradient(800px 400px at 10% 0%,  rgba(25,227,207,.10), transparent 55%);}

/* Header structure */
.header-wrap{display:flex;align-items:center;gap:24px;padding:14px 0}
.brand{font-weight:800;letter-spacing:.4px;text-decoration:none}
.site-nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.site-nav a{position:relative;text-decoration:none}
.site-nav a.active::after,
.site-nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:linear-gradient(90deg,#19E3CF,#4F7BFF);}

/* Page hero */
.page-title{font-size:clamp(36px,5vw,56px);font-weight:800;margin:0 0 8px;
  background:linear-gradient(90deg,#19E3CF,#4F7BFF);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.page-subtitle{color:rgba(255,255,255,.72);max-width:800px;margin:0 auto}

/* References grid (text cards) */
.references-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:36px;justify-items:center;align-items:stretch}
.ref-card{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:150px;width:100%;max-width:320px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.25);
  font-weight:800;letter-spacing:.6px;font-size:22px;color:rgba(255,255,255,.92);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.ref-card:hover{transform:translateY(-6px) scale(1.02);
  border-color:rgba(79,123,255,.45);box-shadow:0 22px 60px rgba(79,123,255,.22)}

/* CTA band */
.cta-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-title{margin:0 0 6px;font-size:clamp(22px,3.6vw,32px);font-weight:800}
.cta-sub{margin:0;color:rgba(255,255,255,.72)}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none}
.btn.brand{background:linear-gradient(90deg,#19E3CF,#4F7BFF);color:#08111d}
.btn.ghost{border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.9)}
.btn.ghost:hover{border-color:rgba(79,123,255,.45)}

/* Footer structure */
.footer-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0}
.footer-nav{display:flex;gap:16px;flex-wrap:wrap}
/* ——— Premium Contact Form Styles ——— */
.contact-hero {
  text-align: center;
  background: radial-gradient(circle at top, #10223b 0%, #060c14 100%);
  padding: 6rem 1rem 4rem;
}
.contact-form { padding: 3rem 1rem 6rem; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }

.form-field label {
  font-weight: 600;
  color: #a0b3ca;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.form-field input,
.form-field textarea {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 16px;
  color: #f0f3f8;
  font-size: 15px;
  transition: all .3s ease;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #4fa0ff;
  box-shadow: 0 0 10px rgba(79,160,255,.3);
}

.form-actions {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 2rem;
}

.form-note {
  font-size: 14px;
  color: #7f93a6;
  margin-top: 0.8rem;
}
/* --- Contact Info Cards --- */
.contact-info { background:#070d16; padding:6rem 1rem; text-align:center; }
.contact-info h2 { font-size:2rem; color:#4fa0ff; margin-bottom:1rem; }
.contact-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
  margin-top:3rem;
  justify-items:center;
}
.contact-card {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:2rem;
  width:100%;
  max-width:320px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.contact-card:hover {
  transform:translateY(-6px);
  box-shadow:0 10px 28px rgba(79,160,255,0.25);
}
.contact-card h3 { color:#fff; font-size:1.3rem; margin-bottom:.8rem; }
.contact-card a {
  color:#4fa0ff;
  font-weight:500;
  text-decoration:none;
}
.contact-card a:hover { text-decoration:underline; }
.whatsapp-link::before {
  content:'💬 ';
}
/* --- Compact Contact Info --- */
.contact-info {
  background:linear-gradient(180deg,#0c1625 0%,#070d16 100%);
  padding:3rem 1rem 3rem;
  text-align:center;
}
.contact-info h2,
.contact-info h3 { color:#4fa0ff; margin-bottom:.5rem; font-weight:600; }
.contact-info p { color:#cfd6de; margin:.3rem 0; font-size:15px; }
.contact-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
  justify-items:center;
  align-items:start;
  margin-top:1rem;
}
.contact-card {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:1.5rem;
  width:100%;
  max-width:280px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.contact-card:hover {
  transform:translateY(-5px);
  box-shadow:0 8px 20px rgba(79,160,255,0.25);
}
.contact-card a {
  color:#4fa0ff;
  text-decoration:none;
  font-weight:500;
}
.contact-card a:hover { text-decoration:underline; }
.whatsapp-link::before {
  content:'💬 ';
  margin-right:3px;
}
@media(max-width:768px){
  .contact-info{padding:2.5rem 1rem;}
}
/* === One-page Contact layout === */
.contact-one {padding: clamp(64px,6vw,90px) 0}
.contact-one .page-title{
  font-size: clamp(32px,4.6vw,48px);
  font-weight: 800;
  margin: 0 0 6px;
  background: linear-gradient(90deg,#19E3CF,#4F7BFF);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.contact-one .page-subtitle{color:rgba(255,255,255,.75);margin:0 0 28px}

.contact-one-grid{
  display:grid; grid-template-columns: 1fr 1.2fr; gap:28px;
}
@media(max-width:900px){ .contact-one-grid{grid-template-columns:1fr} }

.contact-one-cards{
  display:grid; gap:16px; align-content:start;
}
.contact-card{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px; padding:18px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.22);
  transition:transform .2s ease, box-shadow .2s ease;
}
.contact-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(79,123,255,.22); }
.contact-card h3{margin:0 0 6px; font-size:18px; color:#eaf3ff}
.contact-card p{margin:6px 0; color:#cdd6e3}
.contact-card small{color:#98a6b8}
.contact-card a{color:#4F7BFF; text-decoration:none; font-weight:600}
.contact-card a:hover{text-decoration:underline}
.whatsapp-link::before{content:"💬 ";}

.contact-one-form .form-grid{display:grid; gap:14px}
.form-field{display:flex; flex-direction:column}
.form-field label{font-weight:600; color:#a0b3ca; margin-bottom:8px; letter-spacing:.3px}
.form-field input,.form-field textarea{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:14px 16px; color:#f0f3f8; font-size:15px; transition:all .3s;
}
.form-field input:focus,.form-field textarea:focus{outline:none; border-color:#4F7BFF; box-shadow:0 0 10px rgba(79,123,255,.28)}
.form-actions{margin-top:6px}
.form-note{font-size:14px; color:#7f93a6; margin-top:.6rem}
/* === Compact Contact (one section) === */
.contact-compact{padding:clamp(48px,5vw,72px) 0}
.cc-title{
  font-size:clamp(28px,4vw,40px);font-weight:800;margin:0 0 6px;
  background:linear-gradient(90deg,#19e3cf,#4f7bff);-webkit-background-clip:text;-webkit-text-fill-color:transparent
}
.cc-sub{margin:0 0 18px;color:rgba(255,255,255,.75)}
.cc-bar{
  list-style:none;display:grid;gap:10px;margin:0 0 20px;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))
}
.chip{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)
}
.chip strong{font-size:12px;letter-spacing:.3px;text-transform:uppercase;color:#a8bad3}
.chip a{color:#4f7bff;text-decoration:none;font-weight:600}
.chip a:hover{text-decoration:underline}
.wa::before{content:"💬 ";}

.cc-form{
  max-width:720px;margin:0 auto;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px 16px 18px;
  box-shadow:0 10px 26px rgba(0,0,0,.22)
}
.cc-form .row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(max-width:760px){.cc-form .row{grid-template-columns:1fr}}
.cc-form label{display:flex;flex-direction:column;gap:6px}
.cc-form label span{font-size:13px;color:#a0b3ca;font-weight:600}
.cc-form input,.cc-form textarea{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:12px 12px;color:#eef3fb;font-size:15px;transition:all .25s
}
.cc-form input:focus,.cc-form textarea:focus{outline:none;border-color:#4f7bff;box-shadow:0 0 8px rgba(79,123,255,.25)}
.cc-form .full{grid-column:1/-1}
.cc-form .actions{display:flex;gap:12px;align-items:center;margin-top:10px}
.cc-form .note{color:#8fa2b6}
/* === HORNSEC Compact Contact Info (small, premium) === */
.contact-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px; margin:0 0 14px; align-items:start;
}
.contact-meta .chip{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px; padding:10px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
}
.contact-meta .chip strong{
  font-size:12px; text-transform:uppercase; letter-spacing:.3px; color:#a8bad3; margin-right:4px;
}
.contact-meta .chip a{ color:#4F7BFF; text-decoration:none; font-weight:600 }
.contact-meta .chip a:hover{ text-decoration:underline }
.contact-meta .wa::before{ content:"💬 "; margin-right:2px }
/* tighten contact section a bit on desktop */
.section.contact-form .container{ max-width:880px }
/* — Small contact info row below form — */
.contact-footer{
  margin:10px auto 0;
  display:flex; gap:10px; flex-wrap:wrap;
  align-items:center; justify-content:center;
  font-size:14px; opacity:.92;
}
.contact-footer .dot{opacity:.5}
.contact-footer a{ color:#4F7BFF; text-decoration:none; font-weight:600 }
.contact-footer a:hover{ text-decoration:underline }
.contact-footer .wa-icon{ display:inline-flex; align-items:center }
.contact-footer .wa-icon svg{
  transition:transform .15s ease, filter .2s ease;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.contact-footer .wa-icon:hover svg{ transform:translateY(-1px) }
/* === Premium Contact PRO === */
.contact-pro{
  padding: clamp(56px,6vw,92px) 0;
  background:
    radial-gradient(1200px 600px at 60% -10%, rgba(79,123,255,.18), transparent 60%),
    radial-gradient(900px 420px at 10% 0%, rgba(25,227,207,.12), transparent 55%),
    #0b1424;
}
.cp-wrap{
  display:grid; grid-template-columns: 1.05fr 1.15fr; gap:28px; align-items:stretch;
}
@media (max-width: 980px){ .cp-wrap{ grid-template-columns:1fr; gap:22px } }

.cp-info{
  border-radius:20px;
  padding:28px 24px;
  background: linear-gradient(160deg, rgba(25,227,207,.10), rgba(79,123,255,.12));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 48px rgba(0,0,0,.28);
}
.cp-title{
  font-size: clamp(28px,4.5vw,40px); font-weight:800; margin:0 0 6px;
  background:linear-gradient(90deg,#19E3CF,#4F7BFF);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.cp-sub{ color:rgba(255,255,255,.76); margin:0 0 16px }

.cp-list{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:12px }
.cp-label{
  display:inline-block; font-size:12px; text-transform:uppercase; letter-spacing:.35px;
  color:#a8bad3; margin-bottom:4px;
}
.cp-links a{ color:#cfe4ff; text-decoration:none; font-weight:600; margin-right:10px }
.cp-links a:hover{ text-decoration:underline }
.cp-links span{ color:#cdd6e3 }

.cp-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px }
.btn.wa{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  background:#0f221a; border:1px solid rgba(37,211,102,.35);
  box-shadow:0 10px 24px rgba(37,211,102,.18);
}
.btn.wa svg{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); transition:transform .2s ease }
.btn.wa:hover svg{ transform: translateY(-1px) }

.cp-form{
  border-radius:20px; padding:22px 22px 24px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 48px rgba(0,0,0,.28);
}
.cp-form form{ display:grid; gap:14px }
.cp-form .row.two{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width:760px){ .cp-form .row.two{ grid-template-columns:1fr } }

.cp-form label{ display:flex; flex-direction:column; gap:6px }
.cp-form label span{
  font-size:13px; color:#a0b3ca; font-weight:600; letter-spacing:.3px;
}
.cp-form input, .cp-form textarea{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:14px 14px; color:#f2f6fb; font-size:15px;
  transition: all .25s ease;
}
.cp-form input:focus, .cp-form textarea:focus{
  outline:none; border-color:#4F7BFF; box-shadow:0 0 10px rgba(79,123,255,.28)
}
.cp-form .actions{ display:flex; align-items:center; gap:12px; margin-top:6px }
.cp-form .note{ color:#8fa2b6; font-size:14px }
/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 20, 36, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
}
.logo {
  font-size: 1.5rem; font-weight: 800;
  background: linear-gradient(90deg,#19E3CF,#4F7BFF);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-links a {
  color: #cfe4ff; text-decoration: none; margin: 0 12px;
  transition: color .3s;
}
.nav-links a:hover { color: #4F7BFF; }

/* Footer */
.site-footer {
  background: #0b1424; color: #cdd6e3;
  padding: 40px 0 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 30px; align-items: start;
}
.footer-about p { opacity: .7; line-height: 1.6; }
.footer-contact ul { list-style: none; padding: 0; margin: 0; }
.footer-contact li { margin-bottom: 8px; }
.footer-contact a { color: #4F7BFF; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.footer-social img { filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); transition: transform .2s; }
.footer-social img:hover { transform: translateY(-2px); }
.footer-bottom {
  text-align: center; margin-top: 30px; font-size: 14px; opacity: .6;
}
/* ===== Premium Header ===== */
.site-header.pro{
  position:sticky; top:0; z-index:1000;
  background:rgba(11,20,36,.78);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.pro.scrolled{ box-shadow:0 10px 30px rgba(0,0,0,.35); background:rgba(11,20,36,.9) }
.navbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; gap:14px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none }
.logo-dot{ width:14px; height:14px; border-radius:4px; background:linear-gradient(135deg,#19E3CF,#4F7BFF) }
.logo-text{ font-weight:800; letter-spacing:.6px; color:#eaf3ff }
.nav{ display:flex; gap:14px; align-items:center }
.nav a{ color:#cfe4ff; text-decoration:none; padding:10px 12px; border-radius:10px; transition:color .2s, background .2s }
.nav a:hover{ color:#fff; background:rgba(255,255,255,.06) }
.nav a.active{ color:#fff; background:linear-gradient(180deg,rgba(79,123,255,.18),rgba(79,123,255,.10)); border:1px solid rgba(79,123,255,.35) }
.nav a.cta{ background:linear-gradient(90deg,#19E3CF,#4F7BFF); color:#00111a; font-weight:800; box-shadow:0 12px 26px rgba(79,123,255,.28) }
.nav a.cta:hover{ filter:saturate(110%) }
.nav-toggle{ display:none; position:relative; width:42px; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:transparent }
.nav-toggle span{ position:absolute; left:10px; right:10px; height:2px; background:#eaf3ff; transition:.2s }
.nav-toggle span:nth-child(1){ top:13px } .nav-toggle span:nth-child(2){ top:20px } .nav-toggle span:nth-child(3){ top:27px }
@media (max-width:980px){
  .nav-toggle{ display:inline-block }
  .nav{ position:absolute; right:20px; top:64px; display:none; flex-direction:column; align-items:stretch; gap:8px; min-width:220px;
        padding:12px; border-radius:14px; background:rgba(12,19,34,.92); border:1px solid rgba(255,255,255,.08); box-shadow:0 18px 40px rgba(0,0,0,.45) }
  .nav.open{ display:flex }
}

/* ===== Premium Footer ===== */
.site-footer.pro{ background:#0b1424; border-top:1px solid rgba(255,255,255,.08); padding:56px 0 24px }
.foot-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:32px; align-items:start }
.foot-brand{ grid-column:1 / span 6; max-width:680px }
.foot-contact{ grid-column:7 / span 3 }
.foot-connect{ grid-column:10 / span 3 }
@media (max-width:1100px){ .foot-brand{grid-column:1 / -1} .foot-contact{grid-column:1 / span 6} .foot-connect{grid-column:7 / span 6} }
@media (max-width:700px){ .foot-contact,.foot-connect{grid-column:1 / -1} }
.foot-logo{ font-size:24px; letter-spacing:.6px; margin:0 0 8px; color:#eaf3ff }
.foot-brand p{ color:#aabdcb; line-height:1.6 }
.foot-contact h5,.foot-connect h5{ color:#dfe9f7; margin:0 0 10px }
.foot-contact ul{ list-style:none; padding:0; margin:0 } .foot-contact li{ margin:8px 0; color:#cdd6e3 }
.foot-contact a{ color:#8bb6ff; text-decoration:none } .foot-contact a:hover{ text-decoration:underline }
.socials{ display:flex; gap:10px }
.social{ width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
         background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); transition:transform .2s, box-shadow .2s }
.social:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(79,123,255,.24) }
.social.wa{ background:#0f221a; border-color:rgba(37,211,102,.35) }
.foot-bottom{ text-align:center; margin-top:30px; color:#9fb0c4; font-size:14px; opacity:.85 }
/* === Premium Footer v2 === */
.site-footer.pro{
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(25,227,207,.10), transparent 55%),
    radial-gradient(1200px 600px at 70% -20%, rgba(79,123,255,.12), transparent 60%),
    #0b1424;
  border-top:1px solid rgba(255,255,255,.08);
}
.site-footer.pro .footer-wrap{
  display:grid; gap:28px; padding:56px 0 26px;
  grid-template-columns: repeat(12,1fr);
}
.site-footer.pro .footer-col{ min-width:0 }
.site-footer.pro .brand{ grid-column:1 / span 6; max-width:720px }
.site-footer.pro .links{ grid-column:7 / span 2 }
.site-footer.pro .contact{ grid-column:9 / span 3 }
.site-footer.pro .connect{ grid-column:12 / span 1 }
@media (max-width:1100px){
  .site-footer.pro .brand{ grid-column:1 / -1 }
  .site-footer.pro .links{ grid-column:1 / span 6 }
  .site-footer.pro .contact{ grid-column:7 / span 6 }
  .site-footer.pro .connect{ grid-column:1 / -1 }
}
@media (max-width:700px){
  .site-footer.pro .links, .site-footer.pro .contact, .site-footer.pro .connect{ grid-column:1 / -1 }
}

/* brand line */
.site-footer.pro .brandline{ display:flex; align-items:center; gap:10px; margin-bottom:6px }
.site-footer.pro .brandline .brand-dot{ width:14px; height:14px; border-radius:4px;
  background:linear-gradient(135deg,#19E3CF,#4F7BFF) }
.site-footer.pro .brand h4{ margin:0; color:#eaf3ff; letter-spacing:.6px; font-size:24px; font-weight:800 }
.site-footer.pro .brand p{ color:#aabdcb; line-height:1.6; margin:8px 0 0 }

/* columns */
.site-footer.pro h5{ color:#dfe9f7; margin:0 0 10px; font-size:14px; letter-spacing:.4px; text-transform:uppercase }
.site-footer.pro ul{ list-style:none; padding:0; margin:0 }
.site-footer.pro li{ margin:8px 0; color:#cdd6e3 }
.site-footer.pro a{ color:#8bb6ff; text-decoration:none }
.site-footer.pro a:hover{ text-decoration:underline }

/* socials */
.site-footer.pro .socials{ display:flex; gap:10px }
.site-footer.pro .social{
  width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  transition:transform .2s, box-shadow .2s
}
.site-footer.pro .social:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(79,123,255,.24) }
.site-footer.pro .social.wa{ background:#0f221a; border-color:rgba(37,211,102,.35) }

/* legal bar */
.site-footer.pro .footer-legal{
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
}
.site-footer.pro .legal-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 0;
}
.site-footer.pro .legal-row p{ color:#9fb0c4; font-size:14px; margin:0 }
.site-footer.pro .legal-links{ display:flex; gap:14px }
.site-footer.pro .legal-links a{ color:#9ec0ff; text-decoration:none; font-size:14px }
.site-footer.pro .legal-links a:hover{ text-decoration:underline }
/* === Footer LUXE (two-tier) === */
.site-footer.luxe{
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(25,227,207,.10), transparent 55%),
    radial-gradient(1200px 600px at 70% -20%, rgba(79,123,255,.12), transparent 60%),
    #0b1424;
  border-top:1px solid rgba(255,255,255,.08);
}

/* CTA band */
.footer-cta{
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  backdrop-filter: blur(8px);
}
.cta-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 0 }
.cta-copy h4{ margin:0 0 6px; font-size:20px; color:#eaf3ff; letter-spacing:.2px }
.cta-copy p{ margin:0; color:#aabdcb }
.cta-actions{ display:flex; gap:10px }
.btn.brand{
  background:linear-gradient(90deg,#19E3CF,#4F7BFF); color:#05131d; font-weight:800;
  padding:10px 14px; border-radius:12px; text-decoration:none; box-shadow:0 12px 26px rgba(79,123,255,.28)
}
.btn.brand:hover{ filter:saturate(108%) }
.btn.wa{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; background:#0f221a; border:1px solid rgba(37,211,102,.35) }
.btn.wa svg{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)) }
@media(max-width:820px){ .cta-row{ flex-direction:column; align-items:flex-start } }

/* Main grid */
.footer-grid{
  display:grid; gap:28px; padding:30px 0 18px;
  grid-template-columns:repeat(12,1fr);
}
.fcol{ min-width:0 }
.fcol.brand{ grid-column:1 / span 6; max-width:720px }
.fcol.links{ grid-column:7 / span 2 }
.fcol.contact{ grid-column:9 / span 3 }
.fcol.news{ grid-column:12 / span 2 }
@media(max-width:1100px){
  .fcol.brand{ grid-column:1 / -1 }
  .fcol.links{ grid-column:1 / span 6 }
  .fcol.contact{ grid-column:7 / span 6 }
  .fcol.news{ grid-column:1 / -1 }
}
@media(max-width:700px){
  .fcol.links,.fcol.contact,.fcol.news{ grid-column:1 / -1 }
}

/* col decoration */
.brandline{ display:flex; align-items:center; gap:10px; margin-bottom:6px }
.brandline .dot{ width:14px; height:14px; border-radius:4px; background:linear-gradient(135deg,#19E3CF,#4F7BFF) }
.fcol.brand h4{ margin:0; color:#eaf3ff; letter-spacing:.6px; font-size:24px; font-weight:800 }
.fcol.brand p{ color:#aabdcb; line-height:1.6; margin:8px 0 0 }
.fcol h5{ color:#dfe9f7; margin:0 0 10px; font-size:14px; letter-spacing:.4px; text-transform:uppercase }
.fcol ul{ list-style:none; margin:0; padding:0 }
.fcol li{ margin:8px 0; color:#cdd6e3 }
.fcol a{ color:#8bb6ff; text-decoration:none }
.fcol a:hover{ text-decoration:underline }

/* tiny newsletter */
.tiny-news{ display:flex; gap:10px; align-items:center; position:relative; max-width:360px }
.tiny-news input{
  flex:1; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09);
  border-radius:10px; padding:10px 12px; color:#eef3fb
}
.tiny-news .btn.ghost{
  border:1px solid rgba(255,255,255,.12); color:#eaf3ff; text-decoration:none;
  background:rgba(255,255,255,.04); padding:10px 14px; border-radius:10px
}
.tiny-news .okmsg{ display:none; color:#8fe3b0; font-size:13px }
.tiny-news.ok .okmsg{ display:inline-block }

/* legal */
.footer-legal{
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
}
.footer-legal .legal{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0;
}
.footer-legal p{ margin:0; color:#9fb0c4; font-size:14px }
.minilinks{ display:flex; gap:14px }
.minilinks a{ color:#9ec0ff; text-decoration:none; font-size:14px }
.minilinks a:hover{ text-decoration:underline }
/* Footer brand tagline refinement */
.site-footer.luxe .fcol.brand small {
  display:block;
  font-size:13px;
  color:#9ab6c9;
  line-height:1.5;
  opacity:.9;
}
/* Footer tagline under HORNSEC */
.site-footer.luxe .fcol.brand .tagline {
  margin-top:4px;
  font-size:16px;
  font-weight:500;
  color:#a7c2d8;
  letter-spacing:.2px;
  line-height:1.6;
}
/* Footer email link hover effect */
.site-footer a[href^="mailto:"] {
  color: #8bb6ff;
  text-decoration: none;
  transition: color .25s ease;
}
.site-footer a[href^="mailto:"]:hover {
  color: #4fa0ff;
  text-decoration: underline;
}
/* --- Fix brand text visibility and clipping --- */
.site-header.pro .brand{ white-space:nowrap; flex:0 0 auto }
.site-header.pro .logo-text{
  background:none !important;
  -webkit-text-fill-color:unset !important;
  color:#eaf3ff !important;            /* solid, premium white */
  font-weight:800; letter-spacing:.6px; /* keep the premium look */
}
@media (max-width:980px){
  .site-header.pro .brand{ max-width:unset }
}
/* ===== Mobile fixes (hard overrides) ===== */
@media (max-width:980px){
  /* safer side padding across the site */
  .container{ padding-inline: clamp(16px, 5vw, 24px); }

  /* Header / Nav */
  .site-header.pro .nav-toggle{ display:inline-block }
  .site-header.pro .nav{
    right:16px; left:auto; top:64px;
    min-width: min(92vw, 420px);
    display:none; flex-direction:column; align-items:stretch; gap:8px;
    padding:12px; border-radius:14px;
    background:rgba(12,19,34,.96);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 18px 40px rgba(0,0,0,.45)
  }
  .site-header.pro .nav.open{ display:flex }
  .site-header.pro .nav a{ padding:14px 12px; font-size:16px; border-radius:10px }

  /* CTA band stacks nicely */
  .footer-cta .cta-row{ flex-direction:column; align-items:flex-start; gap:10px }
  .footer-cta .btn.brand{ width:100% }
  .footer-cta .btn.wa{ width:42px } /* icon button remains small */

  /* Footer grid -> one column */
  .footer-grid{ grid-template-columns:1fr; gap:22px }
  .fcol.news .tiny-news{ flex-direction:column; align-items:stretch; gap:10px }
  .tiny-news input{ width:100% }
  .tiny-news .btn.ghost{ width:100% }

  /* Legal row on its own lines */
  .footer-legal .legal{ flex-direction:column; align-items:flex-start; gap:6px }
}

/* Small phones: tone down giant headings a bit */
@media (max-width:600px){
  .logo-text{ font-size:18px }
  h1, .hero h1{ font-size: clamp(28px, 8vw, 36px) }
}
/* ===== Global header overlap fixes (desktop + mobile) ===== */
:root{
  --hdr-m: 64px;  /* header height on mobile */
  --hdr-d: 72px;  /* header height on desktop */
}

/* Keep header always on top */
.site-header.pro{
  z-index: 2000 !important;
  background: rgba(11,20,36,.92); /* solid enough to read brand on dark heroes */
}

/* Give the page breathing room under sticky header */
main{ padding-top: var(--hdr-m); }
@media (min-width: 981px){
  main{ padding-top: var(--hdr-d); }
}

/* Ensure first section never tucks under header */
main > section:first-of-type{
  margin-top: 0;
  padding-top: calc(clamp(var(--hdr-m), 7vh, var(--hdr-d)) / 2);
}

/* Contact page specific: keep its hero/cards below header */
.contact-pro{ position:relative; z-index:1; }

/* Anchors: smooth scroll offset so headings aren't hidden */
[id]{ scroll-margin-top: var(--hdr-m); }
@media (min-width:981px){ [id]{ scroll-margin-top: var(--hdr-d); } }

/* Mobile nav panel should not visually “sit under” the header shadow */
@media (max-width:980px){
  .site-header.pro .nav{
    z-index: 2100;   /* higher than header shadow so menu is visible */
    top: 64px;       /* exactly below header */
  }
}

/* Brand text readability across dark backgrounds */
.site-header.pro .logo-text{
  color:#eaf3ff !important; background:none !important; -webkit-text-fill-color:unset !important;
  font-weight:800; letter-spacing:.6px;
}
/* ===== Global header overlap fixes (desktop + mobile) ===== */
:root{
  --hdr-m: 64px;  /* header height on mobile */
  --hdr-d: 72px;  /* header height on desktop */
}

/* Keep header always on top */
.site-header.pro{
  z-index: 2000 !important;
  background: rgba(11,20,36,.92); /* solid enough to read brand on dark heroes */
}

/* Give the page breathing room under sticky header */
main{ padding-top: var(--hdr-m); }
@media (min-width: 981px){
  main{ padding-top: var(--hdr-d); }
}

/* Ensure first section never tucks under header */
main > section:first-of-type{
  margin-top: 0;
  padding-top: calc(clamp(var(--hdr-m), 7vh, var(--hdr-d)) / 2);
}

/* Contact page specific: keep its hero/cards below header */
.contact-pro{ position:relative; z-index:1; }

/* Anchors: smooth scroll offset so headings aren't hidden */
[id]{ scroll-margin-top: var(--hdr-m); }
@media (min-width:981px){ [id]{ scroll-margin-top: var(--hdr-d); } }

/* Mobile nav panel should not visually “sit under” the header shadow */
@media (max-width:980px){
  .site-header.pro .nav{
    z-index: 2100;   /* higher than header shadow so menu is visible */
    top: 64px;       /* exactly below header */
  }
}

/* Brand text readability across dark backgrounds */
.site-header.pro .logo-text{
  color:#eaf3ff !important; background:none !important; -webkit-text-fill-color:unset !important;
  font-weight:800; letter-spacing:.6px;
}
/* === Final Mobile Header Fix === */
@media (max-width: 980px){
  .site-header.pro .nav-toggle{
    display:flex !important;
    align-items:center; justify-content:center;
    width:42px; height:42px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    cursor:pointer;
    z-index:3300;
  }

  /* hide desktop nav links */
  .site-header.pro .nav{
    display:none !important;
    position:absolute;
    top:var(--hdr,64px); right:10px;
    flex-direction:column;
    gap:10px;
    background:rgba(11,20,36,.96);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:16px;
    width:min(90vw,380px);
    box-shadow:0 14px 40px rgba(0,0,0,.45);
    z-index:3200;
  }

  /* show only when toggled open */
  .site-header.pro .nav.open{ display:flex !important; }

  /* mobile link styling */
  .site-header.pro .nav a{
    color:#eaf3ff;
    padding:12px 10px;
    border-radius:10px;
    text-align:right;
    font-size:17px;
  }
  .site-header.pro .nav a:hover{
    background:rgba(255,255,255,.08);
  }
}
/* === GLOBAL MOBILE NAV (works even if .pro class is missing) === */
@media (max-width:980px){
  header.site-header .nav-toggle{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    width:42px; height:42px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    cursor:pointer;
    z-index:3300;
  }

  header.site-header .nav{
    display:none !important;             /* hide desktop list on mobile */
    position:absolute; right:12px; top:var(--hdr,64px);
    flex-direction:column; gap:10px;
    min-width:min(92vw,420px);
    padding:14px; border-radius:14px;
    background:rgba(11,20,36,.96);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    z-index:3200;
  }
  header.site-header .nav.open{ display:flex !important; }
  header.site-header .nav a{ padding:14px 12px; font-size:16px; border-radius:10px; text-align:right }
}
/* ===== FINAL HAMBURGER FIXES ===== */

/* Keep header and its children above page content */
header.site-header{ position:sticky; top:0; z-index:4000 !important; }
header.site-header .navbar{ position:relative; z-index:4050; }

/* Ensure the toggle is clickable and visible */
@media (max-width:980px){
  header.site-header .nav-toggle{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    width:42px; height:42px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    cursor:pointer;
    z-index:4100 !important;
    pointer-events:auto !important;
  }
  /* draw the 3 bars if not styled yet */
  header.site-header .nav-toggle span{
    display:block; width:22px; height:2px; background:#eaf3ff; margin:3px 0; border-radius:2px;
  }

  /* Hide desktop nav by default on mobile */
  header.site-header .nav{
    position:absolute; right:12px; top:var(--hdr,64px);
    display:none !important;                 /* hidden by default */
    flex-direction:column; gap:10px;
    min-width:min(92vw,420px);
    padding:14px; border-radius:14px;
    background:rgba(11,20,36,.96);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    z-index:4090 !important;
    pointer-events:auto !important;
  }

  /* Show only when toggled open (wins against any old rules) */
  header.site-header .nav.open{
    display:flex !important;
  }

  /* Comfortable tap targets */
  header.site-header .nav a{
    padding:14px 12px; font-size:16px; border-radius:10px; text-align:right;
  }
  header.site-header .nav a:hover{ background:rgba(255,255,255,.08) }
}
/* === Global mobile nav enforcement === */
@media (max-width:980px){
  header.site-header .nav-toggle{
    display:inline-flex !important; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:10px; cursor:pointer;
    border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
    z-index:4100; pointer-events:auto;
  }
  header.site-header .nav-toggle span{
    display:block; width:22px; height:2px; background:#eaf3ff; margin:3px 0; border-radius:2px;
  }

  /* hide nav list by default on phones */
  header.site-header .nav{
    position:absolute; right:12px; top:var(--hdr,64px);
    display:none !important;                    /* default = hidden */
    flex-direction:column; gap:10px; min-width:min(92vw,420px);
    padding:14px; border-radius:14px;
    background:rgba(11,20,36,.96);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    z-index:4090; pointer-events:auto;
  }
  /* show only when toggled open */
  header.site-header .nav.open{ display:flex !important; }

  header.site-header .nav a{
    padding:14px 12px; font-size:16px; border-radius:10px; text-align:right;
  }
}

header.site-header{ position:sticky; top:0; z-index:4000; background:rgba(11,20,36,.95); backdrop-filter:blur(12px) }
:root{ --hdr: 72px }             /* fallback header height */
main{ padding-top:var(--hdr) }    /* keep content under sticky header */
[id]{ scroll-margin-top:calc(var(--hdr) + 8px) }

header.site-header .logo-text{
  color:#eaf3ff !important; font-weight:800; letter-spacing:.6px;
  -webkit-text-fill-color:unset !important; background:none !important;
}