/* ============================================================
   SANGITECH — Design System
   ============================================================ */
:root{
  --navy-1000:#010816;
  --navy-950:#020d20;
  --navy-900:#06152d;
  --navy-850:#081b35;
  --navy-800:#0a2142;

  --blue:#0878f9;
  --blue-light:#27a7ff;
  --blue-soft:#75c7ff;

  --orange:#f36c0a;
  --orange-light:#ff8a1f;

  --white:#ffffff;
  --text-primary:#f5f8fc;
  --text-secondary:#a8b5c9;
  --text-tertiary:#6f8099;

  --border:rgba(255,255,255,0.10);
  --border-hover:rgba(39,167,255,0.35);

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}

body{
  background:var(--navy-1000);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
ul{list-style:none;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.05;
}

.wrap{
  max-width:1360px;
  margin:0 auto;
  padding:0 40px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue-light);
}
.eyebrow::before{
  content:'';
  width:16px;
  height:1px;
  background:var(--orange);
  display:inline-block;
}

:focus-visible{
  outline:2px solid var(--blue-light);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute;
  top:-100px;
  left:24px;
  background:var(--orange);
  color:var(--white);
  padding:12px 20px;
  border-radius:6px;
  font-weight:600;
  z-index:1000;
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:16px; }

/* reveal-on-scroll */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in{
  opacity:1;
  transform:translateY(0);
}

/* ============================================================
   Global atmosphere
   ============================================================ */
.atmosphere{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.atmosphere .grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 75%);
}
.atmosphere .glow-a{
  position:absolute; top:-10%; left:-5%;
  width:60vw; height:60vw; max-width:900px; max-height:900px;
  background:radial-gradient(circle, rgba(8,120,249,.16), transparent 65%);
  filter:blur(10px);
}
.atmosphere .glow-b{
  position:absolute; top:20%; right:-15%;
  width:50vw; height:50vw; max-width:800px; max-height:800px;
  background:radial-gradient(circle, rgba(243,108,10,.08), transparent 65%);
}

/* ============================================================
   Navigation
   ============================================================ */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:22px 0;
  transition:padding .4s var(--ease), background .4s var(--ease);
  background: linear-gradient(to bottom, rgba(1, 8, 22, 0.92) 0%, rgba(1, 8, 22, 0.6) 50%, rgba(1, 8, 22, 0) 100%);
}
.nav-inner{
  max-width:1360px;
  margin:0 auto;
  padding:0 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), border-radius .4s var(--ease), padding .4s var(--ease);
  border:1px solid transparent;
}
.site-header.scrolled{
  padding:12px 0;
  background: transparent;
}
.site-header.scrolled .nav-inner{
  max-width:1180px;
  background:rgba(2,13,32,.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(8, 120, 249, 0.35);
  border-radius:100px;
  padding:10px 14px 10px 22px;
  box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 20px rgba(8, 120, 249, 0.15);
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:19px;
  letter-spacing:0.02em;
  flex-shrink:0;
}
.logo .mark{
  width:52px;
  height:52px;
  object-fit:contain;
  filter: brightness(1.4) contrast(1.1);
  transition: all 0.3s var(--ease);
}
.logo b{ color:var(--orange); font-weight:700; }

.nav-links{
  display:flex;
  align-items:center;
  gap:2px;
  background:rgba(255,255,255,.03);
  border:1px solid transparent;
  border-radius:100px;
  padding:4px;
}
.nav-links a{
  position:relative;
  font-size:14px;
  font-weight:500;
  color:var(--text-secondary);
  padding:9px 16px;
  border-radius:100px;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav-links a:hover{ color:var(--text-primary); background:rgba(255,255,255,.05); }
.nav-links a.active{ color:var(--white); background:rgba(8,120,249,.16); }

.nav-right{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.nav-contact-link{
  font-size:14px;
  font-weight:500;
  color:var(--text-secondary);
  transition:color .25s var(--ease);
}
.nav-contact-link:hover{ color:var(--text-primary); }

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:0.01em;
  padding:13px 22px;
  border-radius:100px;
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;
  min-height:44px;
}
.btn svg{ width:15px; height:15px; flex-shrink:0; transition:transform .35s var(--ease); }

.btn-primary{
  background:linear-gradient(135deg, var(--orange-light), var(--orange));
  color:var(--white);
}
.btn-primary::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(135deg, var(--orange), #d95a06);
  opacity:0;
  transition:opacity .3s var(--ease);
}
.btn-primary:hover::before{ opacity:1; }
.btn-primary:hover svg{ transform:translateX(4px); }

.btn-ghost{
  border:1px solid var(--border);
  color:var(--text-primary);
  background:rgba(255,255,255,.02);
}
.btn-ghost:hover{ border-color:var(--border-hover); background:rgba(39,167,255,.08); }
.btn-ghost:hover svg{ transform:translateX(4px); }

.btn-block{ display:flex; width:100%; justify-content:center; }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  border:1px solid var(--border);
  border-radius:50%;
  background:rgba(255,255,255,.03);
}
.nav-toggle span{
  position:relative;
  width:16px; height:1px; background:var(--text-primary);
  transition:background .2s;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:''; position:absolute; left:0; width:16px; height:1px; background:var(--text-primary);
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.nav-toggle span::before{ top:-5px; }
.nav-toggle span::after{ top:5px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* Mobile overlay menu */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:99;
  background:var(--navy-950);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:100px 32px 40px;
  transform:translateY(-8px);
  opacity:0;
  visibility:hidden;
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.mobile-menu.open{
  opacity:1; transform:translateY(0); visibility:visible;
}
.mobile-menu-links{ display:flex; flex-direction:column; gap:6px; }
.mobile-menu-links a{
  font-family:var(--font-display);
  font-size:clamp(32px,9vw,44px);
  font-weight:600;
  padding:10px 0;
  border-bottom:1px solid var(--border);
  color:var(--text-primary);
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.mobile-menu.open .mobile-menu-links a{ opacity:1; transform:translateY(0); }
.mobile-menu.open .mobile-menu-links a:nth-child(1){ transition-delay:.08s; }
.mobile-menu.open .mobile-menu-links a:nth-child(2){ transition-delay:.14s; }
.mobile-menu.open .mobile-menu-links a:nth-child(3){ transition-delay:.20s; }
.mobile-menu.open .mobile-menu-links a:nth-child(4){ transition-delay:.26s; }
.mobile-menu.open .mobile-menu-links a:nth-child(5){ transition-delay:.32s; }

.mobile-menu-footer{ display:flex; flex-direction:column; gap:18px; }
.mobile-menu-contact{ display:flex; flex-direction:column; gap:8px; color:var(--text-secondary); font-size:15px; }
.mobile-menu-contact a{ color:var(--text-secondary); }

body.menu-open{ overflow:hidden; }

/* ============================================================
   Mobile bottom action bar (Call / Consult / Menu)
   ============================================================ */
.bottom-nav{
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:90;
  background:rgba(2,13,32,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  justify-content:space-between;
  align-items:flex-end;
}
.bottom-nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  color:var(--text-secondary);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.01em;
  padding:8px 4px;
  border-radius:12px;
  min-height:44px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.bottom-nav-item:active{ background:rgba(255,255,255,.05); }
.bottom-nav-item svg{ width:20px; height:20px; }
.bottom-nav-item.accent{ color:var(--blue-light); }

.bottom-nav-cta{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  margin-top:-22px;
}
.bottom-nav-cta-icon{
  width:52px; height:52px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--orange-light), var(--orange));
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(243,108,10,.4);
  border:4px solid var(--navy-1000);
}
.bottom-nav-cta-icon svg{ width:21px; height:21px; }
.bottom-nav-cta span{ font-size:10.5px; font-weight:700; color:var(--orange-light); }

@media (max-width:640px){
  .bottom-nav{ display:flex; }
  body{ padding-bottom:76px; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:160px 0 100px;
  overflow:hidden;
}

/* Background composition */
.hero-bg-image {
  position:absolute;
  inset:0;
  background-image:url('../images/hero/hero_background.png');
  background-size:cover;
  background-position:center;
  z-index:0;
  opacity:0.65;
  filter:brightness(0.55) contrast(1.05);
  transform:scale(1.02);
  transition:transform 0.8s var(--ease), opacity 0.8s var(--ease);
  pointer-events:none;
}
.hero-grid-overlay {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(39,167,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39,167,255,.025) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
  pointer-events:none;
  z-index:1;
}
.hero-radial-overlay {
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 65% 50%, transparent 22%, var(--navy-1000) 88%);
  pointer-events:none;
  z-index:1;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:40px;
  align-items:center;
  width:100%;
  position:relative;
  z-index:2;
}

/* Animations for loading */
.hero-content {
  opacity:0;
  transform:translateY(24px);
  animation:hero-fade-in 1s var(--ease) forwards;
}
.hero-visual {
  opacity:0;
  transform:scale(0.96);
  animation:hero-fade-in 1.2s var(--ease) forwards;
  animation-delay:0.15s;
}
@keyframes hero-fade-in {
  to {
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue-light);
  margin-bottom:28px;
}
.signal-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 0 rgba(243,108,10,.6);
  animation:signal-pulse 2.4s ease-out infinite;
}
@keyframes signal-pulse{
  0%{ box-shadow:0 0 0 0 rgba(243,108,10,.55); }
  70%{ box-shadow:0 0 0 9px rgba(243,108,10,0); }
  100%{ box-shadow:0 0 0 0 rgba(243,108,10,0); }
}

.hero h1.hero-headline {
  font-family:var(--font-display);
  font-size:clamp(46px, 6.2vw, 82px);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:0.95;
  color:var(--white);
  text-transform:uppercase;
}
.hero h1.hero-headline .accent-orange {
  color:var(--orange);
}

.hero-sub{
  margin-top:28px;
  max-width:480px;
  font-size:18px;
  color:var(--text-secondary);
}

.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:40px;
}
.hero-ctas .btn {
  border-radius:100px;
  font-size:14.5px;
  padding:14px 28px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:all 0.3s var(--ease);
}
.hero-ctas .btn-primary {
  background:var(--orange);
  color:var(--white);
  box-shadow:0 4px 20px rgba(243,108,10,0.35);
}
.hero-ctas .btn-primary:hover {
  background:var(--orange-light);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(243,108,10,0.5);
}
.hero-ctas .btn-ghost {
  border:1.5px solid rgba(39,167,255,0.3);
  color:var(--white);
  background:rgba(6,21,45,0.65);
  backdrop-filter:blur(4px);
}
.hero-ctas .btn-ghost:hover {
  border-color:rgba(39,167,255,0.8);
  background:rgba(39,167,255,0.1);
  transform:translateY(-2px);
}

/* Trust Badges under buttons */
.hero-trust-row {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:56px;
  padding-top:28px;
  border-top:1px solid var(--border);
}
.trust-badge {
  display:flex;
  align-items:center;
  gap:10px;
}
.trust-indicator {
  display:flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  border-radius:50%;
  flex-shrink:0;
}
.trust-indicator.orange {
  border:1.5px solid rgba(243,108,10,0.6);
  box-shadow:0 0 8px rgba(243,108,10,0.2);
}
.trust-indicator.orange .inner-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
}
.trust-indicator.blue {
  border:1.5px solid rgba(39,167,255,0.6);
  box-shadow:0 0 8px rgba(39,167,255,0.2);
}
.trust-indicator.blue .inner-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--blue-light);
}
.trust-text {
  font-family:var(--font-body);
  font-size:14px;
  font-weight:500;
  color:var(--text-secondary);
}
.trust-divider {
  width:1px;
  height:16px;
  background:var(--border);
}

/* Hero technology core visual */
.hero-visual{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-width:620px;
  min-width:340px;
  margin:0 auto;
  justify-self:center;
  transform-style:preserve-3d;
  perspective:1000px;
  transition:transform 0.4s var(--ease);
}
.core-stage{
  position:relative;
  width:100%;
  height:100%;
}
.orbit-ring{
  position:absolute;
  border:1px solid var(--border);
  border-radius:50%;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
}
.orbit-ring.r1{ width:94%; height:94%; border-color:rgba(39,167,255,.16); }
.orbit-ring.r2{ width:68%; height:68%; border-color:rgba(39,167,255,.24); }
.orbit-ring.r3{ width:40%; height:40%; border-style:dashed; border-color:rgba(255,255,255,.16); }

/* Rotating HUD outer rings */
.hud-rotating-ring {
  position:absolute;
  top:50%; left:50%;
  width:270px; height:270px;
  transform:translate(-50%, -50%);
  border:2.5px dashed rgba(39, 167, 255, 0.6);
  border-radius:50%;
  animation:rotate-clockwise 20s linear infinite;
  pointer-events:none;
  z-index:1;
}
.hud-rotating-ring::before {
  content:'';
  position:absolute;
  top:-5px; left:50%;
  width:10px; height:10px;
  background:var(--blue-light);
  border-radius:50%;
  box-shadow:0 0 14px var(--blue-light);
  transform:translateX(-50%);
}
.hud-rotating-ring-inner {
  position:absolute;
  top:50%; left:50%;
  width:250px; height:250px;
  transform:translate(-50%, -50%);
  border:1.5px solid rgba(243, 108, 10, 0.5);
  border-left-color:var(--orange);
  border-right-color:var(--orange);
  border-radius:50%;
  animation:rotate-counter-clockwise 15s linear infinite;
  pointer-events:none;
  z-index:1;
}

@keyframes rotate-clockwise {
  from { transform:translate(-50%, -50%) rotate(0deg); }
  to { transform:translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotate-counter-clockwise {
  from { transform:translate(-50%, -50%) rotate(360deg); }
  to { transform:translate(-50%, -50%) rotate(0deg); }
}

/* Soft ambient glow behind the whole core */
.hero-visual::before{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:78%; height:78%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(39, 167, 255, 0.38), transparent 70%);
  filter:blur(25px);
  pointer-events:none;
  z-index:0;
}

/* Center core redesigned as futuristic HUD */
.core-center{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:220px; height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(6, 21, 45, 0.95) 0%, rgba(1, 8, 22, 0.98) 100%);
  border:2.5px solid rgba(39, 167, 255, 0.65);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 80px rgba(8, 120, 249, 0.5), inset 0 0 40px rgba(8, 120, 249, 0.3);
  z-index:2;
  transition:all 0.4s var(--ease);
}
.core-center:hover {
  border-color:rgba(39, 167, 255, 0.8);
  box-shadow:0 0 80px rgba(39, 167, 255, 0.4), inset 0 0 40px rgba(39, 167, 255, 0.2);
}
.core-center-content {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:100%;
  padding:10px;
}
.core-logo {
  margin-bottom:6px;
  filter:drop-shadow(0 0 8px rgba(39, 167, 255, 0.4));
}
.hud-logo-svg {
  width:56px;
  height:56px;
  object-fit:contain;
  background: rgba(20, 50, 90, 0.85);
  border: 1.5px solid rgba(39, 167, 255, 0.5);
  border-radius: 50%;
  padding: 9px;
  box-shadow: 0 0 24px rgba(39, 167, 255, 0.35), inset 0 0 10px rgba(39, 167, 255, 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  filter: brightness(1.35) contrast(1.1);
  animation:logo-float 4s ease-in-out infinite;
}
@keyframes logo-float {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-4px); }
}
.core-title {
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  letter-spacing:0.08em;
  color:var(--white);
  line-height:1.2;
}
.core-title .orange-text {
  color:var(--orange);
}
.core-subtitle {
  font-family:var(--font-body);
  font-size:9px;
  font-weight:500;
  color:var(--text-tertiary);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-top:3px;
  margin-bottom:8px;
}
.core-status {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:600;
  color:#10b981;
  letter-spacing:0.08em;
  background:rgba(16, 185, 129, 0.08);
  padding:3px 8px;
  border-radius:100px;
  border:1px solid rgba(16, 185, 129, 0.2);
  margin-bottom:6px;
  box-shadow:0 0 10px rgba(16, 185, 129, 0.1);
}
.core-status .status-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 6px #10b981;
  animation:status-pulse 1.8s infinite;
}
@keyframes status-pulse {
  0%, 100% { transform:scale(1); opacity:1; }
  50% { transform:scale(1.4); opacity:0.5; }
}
.core-tag {
  font-family:var(--font-mono);
  font-size:8.5px;
  font-weight:500;
  color:var(--text-tertiary);
  letter-spacing:0.1em;
  text-transform:uppercase;
}

/* Redesigned nodes */
.node{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  transform:translate(-50%,-50%);
  z-index:2;
  text-align:center;
  transition:transform 0.3s var(--ease);
}
.node-dot-wrap {
  position:relative;
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.node .node-dot{
  width:64px;
  height:64px;
  border-radius:50%;
  background:rgba(1,8,22,.9);
  border:2.5px solid rgba(39, 167, 255, 0.65);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
  box-shadow:0 0 20px rgba(39,167,255,.25), inset 0 0 12px rgba(39,167,255,.15);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  z-index:1;
}
.node .node-dot svg{
  width:24px;
  height:24px;
  color:var(--white);
  transition:transform .3s var(--ease), color .3s var(--ease);
}
.node-dot-pulse {
  position:absolute;
  inset:-2px;
  border-radius:50%;
  border:2px solid var(--blue-light);
  opacity:0;
  transform:scale(0.9);
  transition:all 0.3s;
  pointer-events:none;
  z-index:0;
}
.node:hover .node-dot{
  border-color:var(--blue-light);
  transform:scale(1.08);
  box-shadow:0 0 24px rgba(39,167,255,.45), inset 0 0 12px rgba(39,167,255,.2);
}
.node:hover .node-dot svg {
  transform:scale(1.05);
  color:var(--blue-light);
}
.node:hover .node-dot-pulse {
  animation:node-pulse-glow 1.5s infinite;
}
@keyframes node-pulse-glow {
  0% { transform:scale(1); opacity:0.6; }
  100% { transform:scale(1.4); opacity:0; }
}

.node .node-label{
  font-family:var(--font-display);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-primary);
  margin-top:5px;
  text-shadow:0 2px 6px rgba(1, 8, 22, 0.95);
  white-space:nowrap;
}
.node .node-status {
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#10b981;
  text-shadow:0 2px 4px rgba(1, 8, 22, 0.95);
  white-space:nowrap;
}

.node.n-cloud{ top:3%; left:50%; }
.node.n-security{ top:26%; left:95%; }
.node.n-ai{ top:78%; left:86%; }
.node.n-data{ top:78%; left:14%; }
.node.n-network{ top:26%; left:5%; }

/* SVG connections with glowing signal pulses */
.signal-line{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; }
.network-path {
  stroke:rgba(39, 167, 255, 0.45);
  stroke-width:2;
  fill:none;
}
.network-path-pulse {
  stroke:var(--blue-light);
  stroke-width:2.8;
  fill:none;
  stroke-dasharray:30 170;
  stroke-dashoffset:200;
  animation:signal-dash 2.5s linear infinite;
}
.signal-line path:nth-child(2) { animation-delay:0s; }
.signal-line path:nth-child(4) { animation-delay:0.6s; }
.signal-line path:nth-child(6) { animation-delay:1.2s; }
.signal-line path:nth-child(8) { animation-delay:1.8s; }
.signal-line path:nth-child(10) { animation-delay:2.4s; }

@keyframes signal-dash {
  to {
    stroke-dashoffset:0;
  }
}

/* ============================================================
   Phototile — SANGITECH SVG illustration system
   (duotone tech scenes used as image placeholders throughout)
   ============================================================ */
.phototile{
  position:relative;
  overflow:hidden;
  background:var(--navy-900);
  border-radius:inherit;
}
.phototile svg{
  width:100%;
  height:100%;
  display:block;
}
.phototile::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(8,120,249,.10), transparent 55%);
  pointer-events:none;
}

@media (hover:hover){
  .hero-visual{ perspective:1000px; }
}

/* ============================================================
   Trust rail (Redesigned Connected Bus Circuit)
   ============================================================ */
.trust-rail{
  position:relative;
  padding:30px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:rgba(2, 13, 32, 0.65);
  backdrop-filter:blur(10px);
  overflow:hidden;
}
.trust-rail-bg-line{
  position:absolute;
  top:50%; left:0; right:0;
  transform:translateY(-50%);
  z-index:0;
  pointer-events:none;
}
.trust-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:trust-scroll 32s linear infinite;
  position:relative;
  z-index:1;
}
.trust-track:hover{
  animation-play-state:paused;
}
.trust-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 24px;
  margin:0 24px;
  font-size:14px;
  font-weight:600;
  color:var(--text-secondary);
  white-space:nowrap;
  background:rgba(6, 21, 45, 0.7);
  border:1px solid var(--border);
  border-radius:100px;
  backdrop-filter:blur(6px);
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
  transition:all 0.35s var(--ease);
}
.trust-item:hover{
  border-color:var(--blue-light);
  color:var(--white);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(39, 167, 255, 0.2);
}
.trust-item .num{
  font-family:var(--font-mono);
  color:var(--orange-light);
  font-size:12px;
  font-weight:700;
}
.trust-icon{
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  color:var(--blue-light);
  transition:transform 0.35s;
}
.trust-item:hover .trust-icon{
  transform:scale(1.15) rotate(5deg);
  color:var(--orange-light);
}
.trust-icon svg{
  width:100%; height:100%;
}
@keyframes trust-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ============================================================
   Section shell & layout
   ============================================================ */
section{ position:relative; z-index:1; }
.section-pad{ padding:130px 0; }
.section-head{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:end;
  margin-bottom:70px;
}
.section-head[style*="text-align:center"],
.section-head[style*="text-align: center"]{
  grid-template-columns:1fr;
  justify-items:center;
}
.section-head[style*="text-align:center"] > div,
.section-head[style*="text-align: center"] > div{
  max-width:700px;
}
.section-head h2{
  font-size:clamp(32px,4vw,50px);
  color:var(--white);
  margin-top:18px;
}
.section-head p{
  font-size:16px;
  color:var(--text-secondary);
  max-width:440px;
  justify-self:end;
}

/* ============================================================
   Services (Interactive technology ecosystem)
   ============================================================ */
.services{ background:var(--navy-950); overflow:hidden; }
.svc-layout-new{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:50px;
  align-items:center;
  border-top:1px solid var(--border);
  padding-top:60px;
}

/* Radial Stage */
.svc-ecosystem-visual{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-width:440px;
  margin:0 auto;
}
.svc-core-stage{
  position:relative;
  width:100%;
  height:100%;
}
.svc-orbit-ring{
  position:absolute;
  border:1px solid var(--border);
  border-radius:50%;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
}
.svc-orbit-ring.sr1{ width:84%; height:84%; border-color:rgba(39, 167, 255, 0.12); }
.svc-orbit-ring.sr2{ width:58%; height:58%; border-style:dashed; border-color:rgba(255, 255, 255, 0.08); }

.svc-signal-line{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
  z-index:1;
}

/* Central Core */
.svc-core-center{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:120px; height:120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(6, 21, 45, 0.98) 0%, rgba(1, 8, 22, 0.98) 100%);
  border:2.5px solid rgba(39, 167, 255, 0.45);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 0 30px rgba(8, 120, 249, 0.3), inset 0 0 16px rgba(8, 120, 249, 0.15);
  z-index:3;
}
.svc-core-center-glow{
  position:absolute; inset:-4px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(39, 167, 255, 0.1), transparent 70%);
  animation:signal-pulse 3s infinite;
}
.svc-hub-svg{
  width:38px;
  height:38px;
  object-fit:contain;
  background: rgba(20, 50, 90, 0.85);
  border: 1.5px solid rgba(39, 167, 255, 0.5);
  border-radius: 50%;
  padding: 6px;
  box-shadow: 0 0 16px rgba(39, 167, 255, 0.3), inset 0 0 8px rgba(39, 167, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom:6px;
  filter: brightness(1.35) contrast(1.1);
}
.svc-core-text{
  font-family:var(--font-display);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.08em;
  color:var(--white);
}
.svc-core-text b{
  color:var(--orange);
}

/* Service Nodes */
.svc-node{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  z-index:3;
  cursor:pointer;
}
.svc-node-dot-wrap{
  position:relative;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
}
.svc-node .svc-node-dot{
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(2, 13, 32, 0.9);
  border:1.5px solid rgba(39, 167, 255, 0.4);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary);
  box-shadow:0 0 12px rgba(39,167,255,0.1);
  transition:all 0.3s var(--ease);
}
.svc-node .svc-node-dot svg{
  width:20px; height:20px;
  transition:transform 0.3s;
}
.svc-node-dot-pulse{
  position:absolute; inset:-1px;
  border-radius:50%;
  border:1.5px solid var(--orange-light);
  opacity:0;
  transform:scale(0.85);
  pointer-events:none;
}
.svc-node-label{
  font-family:var(--font-display);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-secondary);
  text-shadow:0 2px 4px rgba(1, 8, 22, 0.95);
  transition:color 0.3s;
}

/* Node positions */
.sn-cloud   { top:8%; left:50%; }
.sn-security{ top:20.4%; left:80%; }
.sn-ai      { top:50%; left:92%; }
.sn-network { top:79.6%; left:80%; }
.sn-data    { top:92%; left:50%; }
.sn-backup  { top:79.6%; left:20.4%; }
.sn-managed { top:50%; left:8%; }
.sn-amc     { top:20.4%; left:20.4%; }

/* Node Hover / Active States */
.svc-node:hover .svc-node-dot,
.svc-node.active .svc-node-dot{
  border-color:var(--orange);
  color:var(--white);
  transform:scale(1.1);
  box-shadow:0 0 20px rgba(243, 108, 10, 0.35);
  background:var(--navy-900);
}
.svc-node.active .svc-node-dot-pulse{
  animation:node-pulse-glow 1.8s infinite;
}
.svc-node:hover .svc-node-label,
.svc-node.active .svc-node-label{
  color:var(--white);
}
.svc-node:hover .svc-node-dot svg{
  transform:scale(1.1);
}

/* Service Details Panel */
.svc-details-panel{
  position:relative;
  min-height:360px;
  display:flex;
  align-items:center;
}
.svc-detail-card{
  display:none;
  width:100%;
  background:rgba(6, 21, 45, 0.55);
  border:1px solid var(--border);
  border-radius:16px;
  padding:40px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 40px rgba(0,0,0,0.3);
  position:relative;
  overflow:hidden;
}
.svc-detail-card::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 100% 0%, rgba(39, 167, 255, 0.08), transparent 60%);
  pointer-events:none;
}
.svc-detail-card.active{
  display:block;
  animation:panelIn 0.5s var(--ease) forwards;
}
.svc-card-header{
  margin-bottom:20px;
}
.svc-card-header .svc-num{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--orange-light);
  font-weight:700;
  letter-spacing:0.1em;
  display:block;
  margin-bottom:6px;
}
.svc-card-header h3{
  font-size:28px;
  color:var(--white);
  letter-spacing:-0.01em;
}
.svc-detail-card p{
  font-size:15px;
  color:var(--text-secondary);
  line-height:1.6;
  margin-bottom:24px;
}
.svc-detail-card .svc-keywords{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px;
}
.svc-detail-card .svc-keywords span{
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:6px 12px;
  border:1px solid var(--border);
  border-radius:100px;
  color:var(--blue-soft);
  background:rgba(39, 167, 255, 0.03);
}
.svc-detail-card .btn-ghost{
  border-radius:100px;
}

@keyframes panelIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}

.services-cta{ display:flex; justify-content:center; padding-top:60px; }

/* Mobile Accordion Default */
.svc-accordion{ display:none; }

/* ============================================================
   Technology Overview (Cinematic Pipeline Map)
   ============================================================ */
.tech-overview{
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(8,120,249,0.06), transparent 65%), var(--navy-1000);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  position:relative;
}
.pipeline-container{
  position:relative;
  max-width:900px;
  margin:50px auto 30px;
  width:100%;
}
.pipeline-map{
  position:relative;
  width:100%;
  aspect-ratio:880/250;
}
.pipeline-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
}
.pipeline-track{
  stroke:rgba(39, 167, 255, 0.12);
  stroke-width:3;
  fill:none;
}
.pipeline-flow-1,
.pipeline-flow-2{
  stroke:var(--blue-light);
  stroke-width:3.2;
  fill:none;
  stroke-dasharray:50 250;
  stroke-dashoffset:300;
  animation:pipeline-dash 5s linear infinite;
}
.pipeline-flow-2{
  stroke:var(--orange-light);
  animation-delay:2.5s;
}
@keyframes pipeline-flow-dash {
  to { stroke-dashoffset: 0; }
}
@keyframes pipeline-dash {
  to { stroke-dashoffset: 0; }
}

.pipe-node{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:2;
}
.pipe-node-dot{
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid rgba(39, 167, 255, 0.4);
  background:rgba(1, 8, 22, 0.95);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary);
  box-shadow:0 0 12px rgba(39,167,255,0.15);
  transition:all 0.3s var(--ease);
  cursor:pointer;
}
.pipe-node-dot svg{
  width:18px; height:18px;
  transition:transform 0.3s;
}
.pipe-node-label{
  font-family:var(--font-mono);
  font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-tertiary);
  transition:color 0.3s;
}
.pipe-node.active .pipe-node-dot{
  border-color:var(--blue-light);
  color:var(--white);
  box-shadow:0 0 20px rgba(39,167,255,0.4), inset 0 0 8px rgba(39,167,255,0.2);
}
.pipe-node.active:nth-child(odd) .pipe-node-dot{
  border-color:var(--orange);
  box-shadow:0 0 20px rgba(243,108,10,0.35), inset 0 0 8px rgba(243,108,10,0.15);
}
.pipe-node.active .pipe-node-label{
  color:var(--text-primary);
}

/* Telemetry Tooltip on Hover */
.telemetry-tooltip{
  position:absolute;
  bottom:54px; left:50%;
  transform:translate(-50%, 10px);
  width:160px;
  background:rgba(2, 13, 32, 0.95);
  border:1.5px solid var(--border-hover);
  border-radius:10px;
  padding:12px;
  backdrop-filter:blur(12px);
  box-shadow:0 12px 30px rgba(0,0,0,0.5), 0 0 20px rgba(39,167,255,0.15);
  opacity:0;
  visibility:hidden;
  transition:all 0.3s var(--ease);
  pointer-events:none;
  z-index:10;
}
.pipe-node:hover .telemetry-tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}
.pipe-node:hover .pipe-node-dot{
  transform:scale(1.1);
}
.telemetry-header{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding-bottom:6px; margin-bottom:6px;
}
.telemetry-title{
  font-family:var(--font-mono);
  font-size:8.5px; font-weight:700; color:var(--text-tertiary);
}
.telemetry-status{
  font-family:var(--font-mono);
  font-size:7.5px; font-weight:700;
  padding:2px 6px; border-radius:4px;
}
.telemetry-status.ok{
  background:rgba(16, 185, 129, 0.1); color:#10b981;
}
.telemetry-status.warn{
  background:rgba(243, 108, 10, 0.1); color:var(--orange-light);
}
.telemetry-body{
  font-family:var(--font-mono);
  font-size:8px; color:var(--text-secondary);
  line-height:1.4;
  margin-bottom:6px;
}
.telemetry-body p{ margin:2px 0; }
.telemetry-chart{
  width:100%; height:20px;
  opacity:0.8;
}

/* ============================================================
   Technology Partners (Honeycomb Ecosystem Grid)
   ============================================================ */
.partners{ background:var(--navy-950); }
.partner-honeycomb-container{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  margin:50px auto 20px;
  max-width:1000px;
}
.partner-honeycomb-row{
  display:flex;
  gap:14px;
  justify-content:center;
}
.partner-honeycomb-row.nested-row{
  margin-top:-52px; /* nests hexagons perfectly */
}
.partner-hex-outer{
  position:relative;
  width:176px; height:202px;
  background:rgba(255, 255, 255, 0.08);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition:background 0.35s, transform 0.35s var(--ease);
}
.partner-hex-inner{
  position:absolute; inset:1.5px;
  background:var(--navy-900);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:20px;
  text-align:center;
  overflow:hidden;
  transition:background 0.35s;
}
.hex-bg-grid{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  opacity:0.4;
}
.partner-logo{
  max-width: 80%;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 12px;
  z-index: 2;
  transition: transform 0.35s var(--ease), opacity 0.35s, filter 0.35s;
  image-rendering: -webkit-optimize-contrast;
  opacity: 0.9;
}
.partner-hex-outer .partner-cat{
  font-family:var(--font-mono);
  font-size:8px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue-light);
  z-index:2;
  transition:color 0.35s;
}
.partner-hex-outer:hover{
  background:linear-gradient(135deg, var(--blue-light), var(--orange));
  transform:scale(1.05) translateY(-5px);
  z-index:10;
}
.partner-hex-outer:hover .partner-hex-inner{
  background:var(--navy-1000);
}
.partner-hex-outer:hover .partner-logo{
  opacity: 1;
  transform: scale(1.05);
}
.partner-hex-outer:hover .partner-cat{
  color:var(--orange-light);
}

.partners-cta{ display:flex; justify-content:center; padding-top:60px; }

/* ============================================================
   Why SANGITECH (Futuristic Diagnostic Console)
   ============================================================ */
.why{ padding:150px 0; position:relative; }
.why-grid-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.why-hud-column{
  width:100%;
  max-width:460px;
  margin:0 auto;
}
.why-console-frame{
  background:rgba(2, 13, 32, 0.95);
  border:2px solid rgba(39, 167, 255, 0.45);
  border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,0.4), 0 0 30px rgba(8, 120, 249, 0.15);
  overflow:hidden;
}
.console-header{
  background:rgba(6, 21, 45, 0.85);
  border-bottom:1.5px solid rgba(39, 167, 255, 0.35);
  padding:10px 18px;
  display:flex;
  justify-content:between;
  align-items:center;
}
.header-indicator{
  font-family:var(--font-mono);
  font-size:9.5px; font-weight:700; color:var(--blue-light);
  letter-spacing:0.06em;
}
.header-leds{
  display:flex; gap:6px; margin-left:auto;
}
.header-leds span{
  width:6px; height:6px; border-radius:50%;
}
.led-red{ background:#ef4444; box-shadow:0 0 6px #ef4444; }
.led-yellow{ background:#f59e0b; box-shadow:0 0 6px #f59e0b; }
.led-green{ background:#10b981; box-shadow:0 0 6px #10b981; }

.console-screen{
  padding:30px;
  background:radial-gradient(circle at 50% 50%, rgba(6, 21, 45, 0.8), rgba(1, 8, 22, 0.98));
  min-height:220px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.console-graphic{
  display:none;
  width:100%;
  text-align:center;
}
.console-graphic.active{
  display:block;
  animation:panelIn 0.4s var(--ease) forwards;
}
.graphic-svg{
  width:100%;
  max-height:160px;
  overflow:visible;
}
.console-status-bar{
  border-top:1px solid rgba(255,255,255,0.06);
  margin-top:16px; padding-top:8px;
  display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:8.5px; font-weight:600; color:var(--text-tertiary);
}

/* Animations in Console graphics */
.radar-sweep {
  transform-origin: 150px 90px;
  animation: radar-sweep-rotate 4s linear infinite;
}
@keyframes radar-sweep-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.radar-target-1 {
  animation: led-blink 1.5s infinite alternate;
}
.radar-target-2 {
  animation: led-blink 1.8s infinite alternate-reverse;
}
.uptime-wave-1 {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw-wave 4s linear infinite;
}
.uptime-wave-2 {
  stroke-dasharray: 600;
  stroke-dashoffset: 0;
  animation: draw-wave 6s linear infinite reverse;
}
@keyframes draw-wave {
  to { stroke-dashoffset: 0; }
}
.rotating-mesh {
  transform-origin: 150px 90px;
  animation: mesh-rotate 12s linear infinite;
}
@keyframes mesh-rotate {
  to { transform: rotate(360deg); }
}
.uptime-glow {
  box-shadow: 0 0 12px var(--blue-light);
  animation: node-pulse-glow 1.5s infinite;
}
.led-blink{
  animation: led-blink 1s infinite alternate;
}
@keyframes led-blink{
  from{ opacity: 0.4; }
  to{ opacity: 1; }
}

/* Why Content List */
.why-list-new{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--border);
  margin-top:40px;
}
.why-row-new{
  display:grid;
  grid-template-columns:50px 1fr;
  gap:16px;
  padding:24px 0;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:all 0.35s var(--ease);
}
.why-row-new.active{
  border-bottom-color:var(--blue-light);
  background:linear-gradient(90deg, rgba(8, 120, 249, 0.05) 0%, transparent 100%);
  padding-left:14px;
}
.why-row-new.active:nth-child(even){
  border-bottom-color:var(--orange);
  background:linear-gradient(90deg, rgba(243, 108, 10, 0.03) 0%, transparent 100%);
}
.why-num-new{
  font-family:var(--font-mono);
  font-size:16px; font-weight:700;
  color:var(--text-tertiary);
  transition:color 0.3s;
}
.why-row-new.active .why-num-new{
  color:var(--orange-light);
  text-shadow:0 0 10px rgba(243,108,10,0.25);
}
.why-row-new.active:nth-child(even) .why-num-new{
  color:var(--blue-light);
  text-shadow:0 0 10px rgba(39,167,255,0.25);
}
.why-row-text h3{
  font-size:19px; color:var(--text-secondary);
  font-weight:600; margin-bottom:6px;
  transition:color 0.3s;
}
.why-row-new.active h3{
  color:var(--white);
}
.why-row-text p{
  font-size:14px; color:var(--text-tertiary);
  line-height:1.5;
  transition:color 0.3s;
}
.why-row-new.active p{
  color:var(--text-secondary);
}
.why-cta{
  display:flex;
  padding-top:40px;
}

/* ============================================================
   Industries (Command Center HUD Panel)
   ============================================================ */
.industries{
  background:var(--navy-950);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:150px 0;
  position:relative;
  transition:background 0.8s ease;
}

/* Industry atmospheric classes */
.industries.ind-govt{
  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(8, 120, 249, 0.08), var(--navy-950));
}
.industries.ind-edu{
  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(39, 167, 255, 0.06), var(--navy-950));
}
.industries.ind-healthcare{
  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(6, 182, 212, 0.07), var(--navy-950));
}
.industries.ind-manu{
  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(243, 108, 10, 0.05), var(--navy-950));
}
.industries.ind-bfsi{
  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(16, 185, 129, 0.06), var(--navy-950));
}
.industries.ind-smes{
  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(139, 92, 246, 0.06), var(--navy-950));
}
.industries.ind-enterprise{
  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(99, 102, 241, 0.06), var(--navy-950));
}

.ind-layout-new{
  display:grid;
  grid-template-columns:0.65fr 1.35fr;
  gap:40px;
  border-top:1px solid var(--border);
  padding-top:50px;
  margin-top:40px;
}

.ind-nav-list{
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
}
.ind-nav-btn{
  display:flex; align-items:center; gap:16px;
  width:100%; text-align:left;
  padding:20px 24px;
  border-bottom:1px solid var(--border);
  background:none;
  cursor:pointer;
  transition:all 0.3s var(--ease);
}
.ind-nav-btn:hover{
  background:rgba(255,255,255,0.02);
}
.ind-nav-num{
  font-family:var(--font-mono); font-size:11px;
  color:var(--text-tertiary); font-weight:600;
}
.ind-nav-title{
  font-family:var(--font-display); font-size:17px; font-weight:500;
  color:var(--text-secondary);
  transition:all 0.3s;
}
.ind-nav-btn.active{
  background:rgba(6, 21, 45, 0.85);
  box-shadow:inset 3px 0 0 0 var(--blue-light);
}
.ind-nav-btn.active .ind-nav-title,
.ind-nav-btn.active .ind-nav-num{
  color:var(--white);
}

/* HUD Panel */
.ind-dashboard-hud{
  position:relative;
  min-height:340px;
}
.ind-hud-panel{
  display:none;
  grid-template-columns:1.2fr 0.8fr;
  gap:30px;
  align-items:center;
  background:rgba(6, 21, 45, 0.6);
  border:1px solid var(--border);
  border-radius:16px;
  padding:40px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 40px rgba(0,0,0,0.3);
}
.ind-hud-panel.active{
  display:grid;
  animation:panelIn 0.5s var(--ease) forwards;
}
.hud-protocol-tag{
  font-family:var(--font-mono); font-size:9px; font-weight:700;
  color:var(--orange-light); letter-spacing:0.08em;
  background:rgba(243,108,10,0.08);
  padding:4px 10px; border-radius:4px;
  display:inline-block; margin-bottom:16px;
}
.ind-hud-panel h3{
  font-size:30px; color:var(--white); margin-bottom:14px;
}
.ind-hud-panel p{
  font-size:15px; color:var(--text-secondary); line-height:1.6; margin-bottom:24px;
}
.ind-specs{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.spec-item{
  display:flex; flex-direction:column; gap:4px;
}
.spec-label{
  font-family:var(--font-mono); font-size:8.5px; color:var(--text-tertiary); text-transform:uppercase;
}
.spec-value{
  font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--blue-soft);
}
.ind-hud-visual{
  width:100%;
  display:flex; align-items:center; justify-content:center;
}
.ind-svg-visual{
  width:100%; max-width:180px; overflow:visible;
}

.ind-mobile{ display:none; }
.scroll-dots{ display:none; }
.industries-cta{
  display:flex;
  padding-top:40px;
}

/* ============================================================
   9. Contact transition
   ============================================================ */
.contact-transition{
  padding:170px 0;
  text-align:center;
}
.contact-transition h2{
  font-size:clamp(30px,5vw,58px);
  color:var(--white);
  max-width:820px;
  margin:0 auto 24px;
}
.contact-transition p{
  color:var(--text-secondary);
  font-size:17px;
  max-width:460px;
  margin:0 auto;
}

/* ============================================================
   10. Final CTA (Tilted Perspective Horizon)
   ============================================================ */
.final-cta{
  position:relative;
  padding:180px 0 160px;
  overflow:hidden;
  background:var(--navy-950);
  border-top:1px solid var(--border);
}
.final-cta .cta-glow{
  position:absolute; top:-20%; left:50%; transform:translateX(-50%);
  width:900px; height:900px;
  background:radial-gradient(circle, rgba(8,120,249,0.18), transparent 65%);
  pointer-events:none;
}
.final-cta-horizon{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.final-cta-grid{
  position:absolute;
  bottom:0; left:-50%; right:-50%;
  height:400px;
  background-image:
    linear-gradient(rgba(8, 120, 249, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 120, 249, 0.08) 1px, transparent 1px);
  background-size:40px 40px;
  background-position:center bottom;
  transform:perspective(240px) rotateX(72deg);
  transform-origin:center bottom;
  opacity:0.85;
}
.horizon-svg{
  position:absolute;
  bottom:0; left:0; width:100%; height:320px;
  overflow:visible;
}
.data-trail-1,
.data-trail-2,
.data-trail-3{
  stroke-dasharray:40 300;
  stroke-dashoffset:340;
  animation:data-trail-pulse 4s linear infinite;
}
.data-trail-2{ animation-delay:1.5s; }
.data-trail-3{ animation-delay:3s; }
@keyframes data-trail-pulse {
  to { stroke-dashoffset: 0; }
}

.final-cta-inner{ position:relative; z-index:2; text-align:center; }
.final-cta h2{
  font-size:clamp(38px,7vw,88px);
  color:var(--white);
  letter-spacing:-0.02em;
}
.final-cta .sub{
  max-width:480px;
  margin:26px auto 46px;
  color:var(--text-secondary);
  font-size:17px;
}
.final-cta-ctas{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.final-cta-email{
  margin-top:40px;
  font-size:14px;
  color:var(--text-tertiary);
}
.final-cta-email a{ color:var(--blue-light); }

/* ============================================================
   Footer
   ============================================================ */
footer{ background:var(--navy-1000); border-top:1px solid var(--border); padding-top:110px; position:relative; z-index:1; }
.footer-circuit-divider{
  position:absolute;
  top:-12px; left:0; right:0;
  width:100%; height:24px;
  overflow:hidden;
  pointer-events:none;
}
.footer-circuit-divider svg{
  width:100%; height:100%;
}
.footer-top{
  display:grid;
  grid-template-columns:1.3fr 0.7fr 0.7fr 0.7fr;
  gap:50px;
  padding-bottom:80px;
  border-bottom:1px solid var(--border);
}
.footer-brand{ display:flex; flex-direction:column; gap:20px; }
.footer-brand .logo{ font-size:24px; }
.footer-brand .tagline{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-light); font-weight:600; }
.footer-brand p{ color:var(--text-secondary); font-size:15px; max-width:320px; }
.footer-social{ display:flex; gap:12px; margin-top:8px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s, background .3s;
}
.footer-social a:hover{ border-color:var(--border-hover); background:rgba(39,167,255,.08); }
.footer-social svg{ width:16px; height:16px; color:var(--text-secondary); }

.footer-col h4{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-tertiary);
  font-weight:600;
  margin-bottom:22px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:14px; }
.footer-col a{
  font-size:14.5px; color:var(--text-secondary); transition:color .25s;
  position:relative;
}
.footer-col a::after{
  content:'';
  position:absolute; bottom:-3px; left:0; width:0; height:1px;
  background:var(--orange-light);
  transition:width 0.3s var(--ease);
}
.footer-col a:hover{ color:var(--white); }
.footer-col a:hover::after{
  width:100%;
}

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding:30px 0 40px;
  flex-wrap:wrap; gap:16px;
}
.footer-bottom p{ font-size:13px; color:var(--text-tertiary); }
.footer-bottom-links{ display:flex; gap:24px; }
.footer-bottom-links a{ font-size:13px; color:var(--text-tertiary); transition:color 0.25s; }
.footer-bottom-links a:hover{ color:var(--text-secondary); }

.back-to-top{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border);
  transition:border-color .3s, transform .3s var(--ease);
}
.back-to-top:hover{ border-color:var(--border-hover); transform:translateY(-3px); }
.back-to-top svg{ width:16px; height:16px; }

/* ============================================================
   Responsive (Premium Mobile-First Optimizations)
   ============================================================
   Breakpoint strategy:
   1024px — Tablets, small laptops, iPad Pro landscape
    768px — Tablets portrait, large phones landscape
    640px — Bottom nav appears, large phones
    480px — Standard phones (iPhone 14, Pixel 7)
    430px — iPhone Pro Max, large Android
    390px — iPhone 14/15, Galaxy S24
    375px — iPhone SE (2nd/3rd gen)
    320px — iPhone SE (1st gen), narrow screens
   ============================================================ */

/* ---------- Tablet & Small Laptops (≤1024px) ---------- */
@media (max-width: 1024px) {
  .wrap { padding: 0 clamp(20px, 4vw, 32px); }
  .nav-inner { padding: 0 clamp(20px, 4vw, 32px); }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  /* Header scrolled capsule — full width on smaller screens */
  .site-header.scrolled .nav-inner {
    max-width: 100%;
    border-radius: 0;
    margin: 0;
    padding: 10px clamp(20px, 4vw, 32px);
  }

  /* Hero — single column centered */
  .hero { padding: 140px 0 80px; }
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 50px;
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero h1.hero-headline { text-align: center; }
  .hero-sub {
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-ctas { justify-content: center; }
  .hero-trust-row {
    justify-content: center;
    margin-top: 48px;
    width: 100%;
    max-width: 600px;
  }
  .hero-visual {
    margin-top: 40px;
    max-width: 440px;
  }

  /* Section head — single column */
  .section-head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: clamp(40px, 6vw, 70px);
  }
  .section-head p {
    justify-self: start;
    margin-top: 0;
    max-width: 100%;
  }

  /* Services — stack */
  .svc-layout-new {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  /* Technology Overview */
  .pipeline-map { aspect-ratio: 800/300; }

  /* Why SANGITECH — stack */
  .why { padding: clamp(80px, 12vw, 150px) 0; }
  .why-grid-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .why-hud-column {
    max-width: 100%;
    order: -1;
  }

  /* Industries — stack with horizontal tabs */
  .ind-layout-new {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ind-nav-list {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
    scrollbar-width: none;
    gap: 0;
  }
  .ind-nav-list::-webkit-scrollbar { display: none; }
  .ind-nav-btn {
    flex: 0 0 auto;
    border-bottom: none;
    border-right: 1px solid var(--border);
    padding: 16px 20px;
    white-space: nowrap;
  }
  .ind-nav-btn:last-child { border-right: none; }
  .ind-nav-btn.active {
    box-shadow: inset 0 -3px 0 0 var(--blue-light);
  }

  /* Footer — 3 col */
  .footer-top {
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: 40px;
  }

  /* Section padding fluid */
  .section-pad { padding: clamp(80px, 12vw, 130px) 0; }

  /* Contact transition */
  .contact-transition { padding: clamp(100px, 14vw, 170px) 0; }

  /* Final CTA */
  .final-cta { padding: clamp(120px, 14vw, 180px) 0 clamp(100px, 12vw, 160px); }
}

/* ---------- Mobile Landscapes & Tablets (≤768px) ---------- */
@media (max-width: 768px) {
  .wrap { padding: 0 24px; }

  /* Hero refinements */
  .hero { padding: 120px 0 70px; min-height: auto; }
  .hero-visual { max-width: 340px; }
  .hero-sub { font-size: 16px; }

  /* Simplify hero HUD on tablets — slow down heavy animations */
  .hud-rotating-ring { animation-duration: 40s; }
  .hud-rotating-ring-inner { animation-duration: 30s; }
  .network-path-pulse { animation-duration: 4s; }

  /* Services — hide radial stage, show accordion */
  .svc-layout-new { display: none; }
  .svc-accordion { display: block !important; }

  /* Accordion styling */
  .acc-item {
    border-bottom: 1px solid var(--border);
  }
  .acc-trigger {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 0;
    cursor: pointer;
    min-height: 56px;
    transition: color 0.3s var(--ease);
  }
  .acc-trigger .svc-num {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-tertiary);
    min-width: 28px;
    transition: color 0.3s;
  }
  .acc-trigger .svc-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
    flex: 1;
    text-align: left;
    transition: color 0.3s;
  }
  .acc-plus {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .acc-plus::before,
  .acc-plus::after {
    content: '';
    position: absolute;
    background: var(--text-secondary);
    transition: transform 0.3s var(--ease), opacity 0.3s;
  }
  .acc-plus::before {
    top: 50%;
    left: 2px;
    right: 2px;
    height: 1.5px;
    transform: translateY(-50%);
  }
  .acc-plus::after {
    left: 50%;
    top: 2px;
    bottom: 2px;
    width: 1.5px;
    transform: translateX(-50%);
  }
  .acc-item[aria-expanded="true"] .acc-plus::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
  }
  .acc-item[aria-expanded="true"] .svc-num { color: var(--orange-light); }
  .acc-item[aria-expanded="true"] .svc-name { color: var(--white); }

  .acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--ease);
  }
  .acc-item[aria-expanded="true"] .acc-panel {
    grid-template-rows: 1fr;
  }
  .acc-panel-inner {
    overflow: hidden;
    padding: 0;
    transition: padding 0.4s var(--ease);
  }
  .acc-item[aria-expanded="true"] .acc-panel-inner {
    padding: 0 0 24px 44px;
  }
  .acc-panel-inner p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
  }
  .acc-panel-inner .svc-keywords {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .acc-panel-inner .svc-keywords span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--blue-soft);
    background: rgba(39, 167, 255, 0.03);
  }

  /* Technology Overview (Vertical Timeline) */
  .pipeline-svg { display: none !important; }
  .pipeline-container { margin: 30px auto 20px; }
  .pipeline-map {
    height: auto !important;
    aspect-ratio: auto !important;
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding-left: 28px;
    border-left: 2px dashed rgba(39, 167, 255, 0.25);
    margin-left: 16px;
  }
  .pipe-node {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px;
    width: 100%;
  }
  .pipe-node::before {
    content: '';
    position: absolute;
    left: -29px;
    top: 50%;
    width: 12px;
    height: 2px;
    background: rgba(39, 167, 255, 0.25);
  }
  .pipe-node-label {
    text-align: left;
    min-width: 60px;
    font-size: 10px;
  }
  .telemetry-tooltip {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 100% !important;
    max-width: 280px;
    margin-top: 0;
    padding: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  }

  /* Capability Row */
  .capability-row {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  /* Partner Brands Honeycomb — Responsive Grid Wrap */
  .partner-honeycomb-container {
    margin-top: 30px;
    gap: 14px;
  }
  .partner-honeycomb-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  .partner-honeycomb-row.nested-row {
    margin-top: 0 !important;
  }
  .partner-hex-outer {
    width: 130px !important;
    height: 150px !important;
  }
  .partner-hex-outer .partner-name {
    font-size: 14px !important;
  }
  .partner-hex-outer .partner-cat {
    font-size: 7.5px !important;
  }

  /* Why section */
  .why-console-frame { margin-bottom: 10px; }
  .console-screen { padding: 20px; min-height: 180px; }

  /* Industries HUD Panel — single column, show mobile cards */
  .ind-layout-new { display: none !important; }
  .ind-mobile {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 10px 0 20px;
    scrollbar-width: none;
    margin-top: 20px;
  }
  .ind-mobile::-webkit-scrollbar { display: none; }
  .ind-card {
    flex: 0 0 85%;
    max-width: 340px;
    scroll-snap-align: center;
    background: rgba(6, 21, 45, 0.6);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 24px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .ind-card-header {
    margin-bottom: 14px;
  }
  .ind-panel-num {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--orange-light);
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 8px;
  }
  .ind-card h3 {
    font-size: 22px;
    color: var(--white);
    margin-bottom: 0;
  }
  .ind-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
  }

  /* Scroll dots for swipeable sections */
  .scroll-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    padding: 16px 0 0;
  }
  .scroll-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    transition: all 0.3s var(--ease);
  }
  .scroll-dots .dot.active {
    background: var(--blue-light);
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(39, 167, 255, 0.4);
  }

  /* Industries CTA */
  .industries-cta { justify-content: center; }

  /* Footer */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  /* Final CTA */
  .final-cta-ctas { gap: 12px; }
}

/* ---------- Bottom Nav Appearance (≤640px) ---------- */
@media (max-width: 640px) {
  .bottom-nav { display: flex; }
  body { padding-bottom: 76px; }

  /* Ensure bottom nav doesn't overlap content */
  .final-cta { padding-bottom: clamp(120px, 16vw, 160px); }
  footer { padding-bottom: 80px; }
}

/* ---------- Standard Mobile Phones (≤480px) ---------- */
@media (max-width: 480px) {
  .wrap { padding: 0 20px; }
  .section-pad { padding: clamp(60px, 12vw, 80px) 0; }

  /* Navigation Header — compact */
  .site-header { padding: 10px 0; }
  .site-header.scrolled { padding: 6px 0; }
  .site-header.scrolled .nav-inner {
    padding: 8px 16px;
    border-radius: 0;
  }
  .nav-inner { padding: 0 20px; }
  .logo { font-size: 17px; gap: 8px; }
  .logo .mark { width: 34px; height: 34px; }

  /* Hide nav CTA buttons — bottom nav handles it */
  .nav-right .btn { display: none; }
  .nav-right .nav-contact-link { display: none; }

  /* Mobile menu refinements */
  .mobile-menu { padding: 90px 24px 32px; }
  .mobile-menu-links a {
    font-size: clamp(28px, 8vw, 38px);
    padding: 12px 0;
  }

  /* Hero — dedicated mobile layout */
  .hero {
    padding: 110px 0 50px;
    min-height: auto;
  }
  .hero-grid { gap: 32px; }
  .hero h1.hero-headline {
    font-size: clamp(32px, 9.5vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.035em;
  }
  .hero-eyebrow {
    font-size: 10.5px;
    margin-bottom: 20px;
    gap: 8px;
  }
  .hero-sub {
    font-size: 15px;
    margin-top: 18px;
    line-height: 1.55;
  }
  .hero-ctas {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-top: 28px;
  }
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
    min-height: 50px;
    font-size: 14.5px;
  }

  /* Hero visual — simplified for mobile */
  .hero-visual {
    max-width: 260px;
    min-width: 220px;
  }
  .hero-visual::before {
    width: 90%;
    height: 90%;
    filter: blur(30px);
    opacity: 0.7;
  }
  /* Hide outer orbit ring to declutter */
  .orbit-ring.r1 { opacity: 0.4; }
  /* Simplify HUD rings on mobile */
  .hud-rotating-ring {
    width: 180px;
    height: 180px;
    border-width: 1.5px;
    animation-duration: 60s;
  }
  .hud-rotating-ring::before {
    width: 7px;
    height: 7px;
    top: -3.5px;
  }
  .hud-rotating-ring-inner {
    width: 165px;
    height: 165px;
    border-width: 1px;
    animation-duration: 45s;
  }
  /* Smaller core center */
  .core-center {
    width: 150px;
    height: 150px;
    border-width: 2px;
    box-shadow: 0 0 40px rgba(8, 120, 249, 0.35), inset 0 0 20px rgba(8, 120, 249, 0.2);
  }
  .hud-logo-svg { width: 34px; height: 34px; }
  .core-title { font-size: 14px; }
  .core-subtitle { font-size: 7.5px; margin-bottom: 6px; }
  .core-status { font-size: 7.5px; padding: 2px 6px; }
  .core-tag { font-size: 7px; }

  /* Smaller outer nodes */
  .node .node-dot {
    width: 44px;
    height: 44px;
    border-width: 2px;
  }
  .node-dot-wrap { width: 44px; height: 44px; }
  .node .node-dot svg { width: 18px; height: 18px; }
  .node .node-label {
    font-size: 9px;
    letter-spacing: 0.04em;
    margin-top: 3px;
  }
  .node .node-status {
    font-size: 8px;
  }
  /* Adjust node positions for smaller visual */
  .signal-line { opacity: 0.6; }
  .network-path { stroke-width: 1.5; }
  .network-path-pulse {
    stroke-width: 2;
    animation-duration: 5s;
  }

  /* Trust row — wrap to 2 columns */
  .hero-trust-row {
    flex-wrap: wrap;
    gap: 14px 10px;
    margin-top: 32px;
    padding-top: 24px;
  }
  .trust-badge {
    flex: 0 0 calc(50% - 5px);
    justify-content: center;
  }
  .trust-divider { display: none; }
  .trust-text { font-size: 12.5px; }
  .trust-indicator { width: 12px; height: 12px; }
  .trust-indicator .inner-dot { width: 5px; height: 5px; }

  /* Trust rail — compact items */
  .trust-item {
    padding: 10px 18px;
    margin: 0 12px;
    font-size: 13px;
    gap: 10px;
  }
  .trust-icon { width: 20px; height: 20px; }

  /* Services accordion refinements */
  .acc-trigger {
    padding: 18px 0;
    min-height: 52px;
    gap: 14px;
  }
  .acc-trigger .svc-name {
    font-size: 16px;
  }
  .acc-item[aria-expanded="true"] .acc-panel-inner {
    padding: 0 0 20px 42px;
  }
  .acc-panel-inner p { font-size: 13.5px; }
  .acc-panel-inner .svc-keywords span {
    font-size: 9.5px;
    padding: 4px 8px;
  }
  .services-cta { padding-top: 40px; }
  .services-cta .btn { width: 100%; justify-content: center; }

  /* Technology Overview — tighter timeline */
  .pipeline-map {
    gap: 28px;
    padding-left: 22px;
    margin-left: 10px;
  }
  .pipe-node::before { left: -23px; width: 10px; }
  .pipe-node-dot { width: 34px; height: 34px; }
  .pipe-node-dot svg { width: 15px; height: 15px; }
  .pipe-node-label { font-size: 9px; min-width: 50px; }
  .telemetry-tooltip {
    max-width: 200px;
    padding: 8px;
    font-size: 7.5px;
  }
  .telemetry-header { padding-bottom: 4px; margin-bottom: 4px; }
  .telemetry-title { font-size: 7.5px; }
  .telemetry-status { font-size: 7px; padding: 1.5px 5px; }
  .telemetry-body { font-size: 7.5px; }
  .telemetry-chart { height: 16px; }

  .capability-row span {
    font-size: 11px;
    padding: 6px 12px;
  }

  /* Technology section CTA */
  .tech-overview .btn-primary {
    width: 100%;
    justify-content: center;
    display: flex;
  }

  /* Partners — smaller hexagons, 3 per row */
  .partner-honeycomb-container { gap: 10px; }
  .partner-honeycomb-row { gap: 10px; }
  .partner-hex-outer {
    width: 100px !important;
    height: 115px !important;
  }
  .partner-hex-outer .partner-name { font-size: 12px !important; }
  .partner-hex-outer .partner-cat { font-size: 6.5px !important; }
  .partner-hex-inner { padding: 14px; }
  .partners-cta { padding-top: 40px; }
  .partners-cta .btn { width: 100%; justify-content: center; }

  /* Why SANGITECH */
  .why { padding: clamp(60px, 10vw, 100px) 0; }
  .why-head h2 { font-size: clamp(24px, 6vw, 34px); }
  .console-screen { padding: 16px; min-height: 160px; }
  .graphic-svg { max-height: 130px; }
  .console-status-bar { font-size: 7.5px; margin-top: 12px; }

  .why-list-new { margin-top: 28px; }
  .why-row-new {
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 18px 0;
  }
  .why-num-new { font-size: 14px; }
  .why-row-text h3 { font-size: 17px; }
  .why-row-text p { font-size: 13px; }
  .why-cta { padding-top: 28px; }
  .why-cta .btn { width: 100%; justify-content: center; }

  /* Industries mobile cards */
  .ind-mobile { gap: 12px; }
  .ind-card {
    flex: 0 0 82%;
    padding: 24px 20px;
  }
  .ind-card h3 { font-size: 20px; }
  .ind-card p { font-size: 13px; }
  .industries { padding: clamp(80px, 12vw, 120px) 0; }
  .industries-cta .btn { width: 100%; justify-content: center; }

  /* Contact transition */
  .contact-transition { padding: clamp(80px, 12vw, 120px) 0; }
  .contact-transition h2 { font-size: clamp(24px, 6vw, 36px); }
  .contact-transition p { font-size: 15px; }

  /* Final CTA */
  .final-cta { padding: clamp(100px, 14vw, 140px) 0 clamp(100px, 14vw, 120px); }
  .final-cta h2 { font-size: clamp(28px, 8vw, 48px); }
  .final-cta .sub { font-size: 15px; margin: 20px auto 32px; }
  .final-cta-ctas {
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .final-cta-ctas .btn {
    width: 100%;
    justify-content: center;
    min-height: 50px;
  }
  .final-cta-grid {
    height: 200px;
    background-size: 28px 28px;
  }
  .horizon-svg { height: 180px; }
  .final-cta-email { font-size: 13px; margin-top: 28px; }

  /* Footer — single column */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 36px;
  }
  .footer-brand p { max-width: 100%; }
  footer { padding-top: clamp(60px, 10vw, 110px); }
  .footer-col h4 { margin-bottom: 16px; }
  .footer-col ul { gap: 12px; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 0 30px;
  }
  .footer-bottom p { font-size: 12px; }
  .footer-bottom-links { gap: 16px; }
  .footer-bottom-links a { font-size: 12px; }
  .back-to-top {
    align-self: flex-end;
    margin-top: -44px;
  }
}

/* ---------- Large Phones (≤430px) ---------- */
@media (max-width: 430px) {
  .hero h1.hero-headline {
    font-size: clamp(30px, 9vw, 40px);
  }
  .hero-visual { max-width: 240px; min-width: 200px; }
  .core-center { width: 140px; height: 140px; }
  .hud-rotating-ring { width: 165px; height: 165px; }
  .hud-rotating-ring-inner { width: 152px; height: 152px; }
  .node .node-dot { width: 40px; height: 40px; }
  .node-dot-wrap { width: 40px; height: 40px; }
  .node .node-dot svg { width: 16px; height: 16px; }

  /* Accordion name size */
  .acc-trigger .svc-name { font-size: 15.5px; }

  /* Partners 3-per-row guaranteed */
  .partner-hex-outer {
    width: 95px !important;
    height: 110px !important;
  }
  .partner-hex-outer .partner-name { font-size: 11.5px !important; }
}

/* ---------- Standard Phones (≤390px) ---------- */
@media (max-width: 390px) {
  .wrap { padding: 0 18px; }

  .hero h1.hero-headline {
    font-size: clamp(28px, 8.5vw, 36px);
  }
  .hero-eyebrow { font-size: 10px; letter-spacing: 0.1em; }
  .hero-sub { font-size: 14px; }
  .hero-ctas .btn { font-size: 13.5px; padding: 12px 20px; }

  /* Trust row single column on very narrow */
  .trust-text { font-size: 12px; }

  /* Industries cards narrower */
  .ind-card {
    flex: 0 0 88%;
    padding: 22px 18px;
  }

  /* Accordion tighter */
  .acc-trigger .svc-name { font-size: 15px; }
  .acc-panel-inner .svc-keywords span { font-size: 9px; }

  /* Why section compact */
  .why-row-new { grid-template-columns: 32px 1fr; gap: 10px; }
  .why-num-new { font-size: 13px; }
  .why-row-text h3 { font-size: 16px; }
  .why-row-text p { font-size: 12.5px; }
}

/* ---------- Small Phones (≤375px) ---------- */
@media (max-width: 375px) {
  .wrap { padding: 0 16px; }
  .nav-inner { padding: 0 16px; }

  .logo { font-size: 16px; gap: 7px; }
  .logo .mark { width: 30px; height: 30px; }

  .hero { padding: 100px 0 40px; }
  .hero h1.hero-headline {
    font-size: clamp(26px, 8vw, 34px);
    line-height: 1.1;
  }
  .hero-eyebrow { font-size: 9.5px; margin-bottom: 16px; }
  .hero-sub { font-size: 14px; }
  .hero-ctas .btn { min-height: 48px; font-size: 13px; }
  .hero-visual { max-width: 220px; min-width: 190px; }

  /* Further simplify hero visual */
  .orbit-ring.r1 { display: none; }
  .core-center { width: 128px; height: 128px; }
  .hud-rotating-ring { width: 150px; height: 150px; }
  .hud-rotating-ring-inner { width: 138px; height: 138px; }
  .core-title { font-size: 13px; }
  .hud-logo-svg { width: 30px; height: 30px; }
  .node .node-dot { width: 36px; height: 36px; }
  .node-dot-wrap { width: 36px; height: 36px; }
  .node .node-dot svg { width: 14px; height: 14px; }
  .node .node-label { font-size: 8px; }
  .node .node-status { font-size: 7px; }

  /* Partners — 2 per row */
  .partner-hex-outer {
    width: calc(50% - 8px) !important;
    height: auto !important;
    aspect-ratio: 0.87;
  }
  .partner-hex-outer .partner-name { font-size: 11px !important; }
  .partner-hex-outer .partner-cat { font-size: 6px !important; }

  /* Technology timeline compact */
  .pipeline-map { gap: 24px; padding-left: 18px; margin-left: 8px; }
  .pipe-node { gap: 12px; }
  .pipe-node::before { left: -19px; width: 8px; }
  .pipe-node-dot { width: 30px; height: 30px; }
  .pipe-node-dot svg { width: 13px; height: 13px; }
  .telemetry-tooltip { max-width: 180px; }

  /* Section heading sizes */
  .section-head h2 { font-size: clamp(22px, 6vw, 30px); }

  /* Contact & CTA */
  .contact-transition h2 { font-size: clamp(22px, 5.5vw, 30px); }
  .final-cta h2 { font-size: clamp(24px, 7vw, 38px); }
  .final-cta .sub { font-size: 14px; }

  /* Mobile menu */
  .mobile-menu { padding: 85px 20px 28px; }
  .mobile-menu-links a { font-size: clamp(26px, 7.5vw, 34px); }

  /* Trust rail */
  .trust-item {
    padding: 8px 14px;
    margin: 0 8px;
    font-size: 12px;
  }
  .trust-icon { width: 18px; height: 18px; }

  /* Footer */
  .footer-brand .logo { font-size: 20px; }
  .footer-col a { font-size: 13.5px; }
}

/* ---------- Smallest Screens (≤320px) ---------- */
@media (max-width: 320px) {
  .wrap { padding: 0 14px; }

  .hero h1.hero-headline {
    font-size: 24px;
    letter-spacing: -0.04em;
  }
  .hero-eyebrow { font-size: 9px; }
  .hero-sub { font-size: 13px; }
  .hero-visual { max-width: 200px; min-width: 180px; }
  .hero-ctas .btn { font-size: 12.5px; padding: 11px 16px; min-height: 46px; }

  /* Hide hero HUD rings on very small screens */
  .hud-rotating-ring,
  .hud-rotating-ring-inner { display: none; }
  .orbit-ring { display: none; }
  .core-center {
    width: 110px;
    height: 110px;
    border-width: 1.5px;
  }
  .core-title { font-size: 12px; }
  .hud-logo-svg { width: 26px; height: 26px; }
  .core-subtitle { font-size: 7px; }
  .core-status { font-size: 7px; }
  .core-tag { display: none; }
  .node .node-dot { width: 32px; height: 32px; }
  .node-dot-wrap { width: 32px; height: 32px; }
  .node .node-dot svg { width: 13px; height: 13px; }
  .node .node-label { font-size: 7.5px; }
  .node .node-status { display: none; }

  /* Trust row — single column */
  .hero-trust-row { gap: 10px; }
  .trust-badge { flex: 0 0 100%; }

  /* Services accordion */
  .acc-trigger .svc-name { font-size: 14px; }
  .acc-trigger .svc-num { font-size: 10px; }
  .acc-item[aria-expanded="true"] .acc-panel-inner { padding-left: 38px; }

  /* Partners — full width stack */
  .partner-hex-outer {
    width: calc(50% - 6px) !important;
  }

  /* Industries cards */
  .ind-card { flex: 0 0 92%; padding: 20px 16px; }
  .ind-card h3 { font-size: 18px; }
  .ind-card p { font-size: 12.5px; }

  /* Why section */
  .why-row-new { grid-template-columns: 28px 1fr; gap: 8px; }
  .why-num-new { font-size: 12px; }
  .why-row-text h3 { font-size: 15px; }
  .why-row-text p { font-size: 12px; }

  /* Footer */
  .footer-top { gap: 28px; padding-bottom: 28px; }
  .footer-col h4 { margin-bottom: 12px; font-size: 11px; }
  .footer-col a { font-size: 13px; }
  .footer-col ul { gap: 10px; }

  /* Final CTA */
  .final-cta h2 { font-size: 22px; }
  .final-cta .sub { font-size: 13px; }

  /* All buttons minimum touch target */
  .btn { min-height: 44px; font-size: 12.5px; }
}

/* ---------- Mobile Animation Reduction (≤768px) ----------
   Reduce heavy GPU animations on mobile to improve
   scroll performance and battery life while preserving
   a premium visual feel.
   -------------------------------------------------------- */
@media (max-width: 768px) {
  /* Slow down continuous rotations */
  .hud-rotating-ring { animation-duration: 60s; }
  .hud-rotating-ring-inner { animation-duration: 45s; }

  /* Reduce signal pulse frequency */
  .network-path-pulse {
    animation-duration: 5s;
    stroke-dasharray: 20 180;
  }

  /* Simplify hero ambient glow */
  .hero-visual::before { opacity: 0.5; }

  /* Reduce trust rail speed for mobile readability */
  .trust-track { animation-duration: 45s; }

  /* Simplify atmosphere effects on mobile */
  .atmosphere .grid { opacity: 0.5; }
  .atmosphere .glow-a { filter: blur(20px); opacity: 0.7; }
  .atmosphere .glow-b { opacity: 0.6; }

  /* Reduce hero bg parallax effect */
  .hero-bg-image { transform: none; }
}

/* ============================================================
   INNER PAGES — Shared Components
   ============================================================ */

/* Page sections */
.page-section{
  padding:100px 0 80px;
  position:relative;
  z-index:1;
}
.page-section + .page-section{ padding-top:60px; }

.section-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue-light);
  margin-bottom:16px;
}
.section-label::before{
  content:'';
  width:16px;height:1px;
  background:var(--orange);
}

.section-title{
  font-size:clamp(28px,4vw,44px);
  margin-bottom:20px;
  line-height:1.1;
}
.section-desc{
  font-size:clamp(15px,1.3vw,18px);
  color:var(--text-secondary);
  max-width:680px;
  line-height:1.7;
}

/* Glass card base */
.glass-card{
  background:rgba(6,21,45,0.65);
  border:1px solid var(--border);
  border-radius:16px;
  padding:36px 32px;
  backdrop-filter:blur(12px);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.glass-card:hover{
  border-color:var(--border-hover);
  box-shadow:0 0 30px rgba(39,167,255,0.06);
  transform:translateY(-4px);
}

/* Stats grid */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin:60px 0;
}
.stat-card{
  text-align:center;
  padding:36px 20px;
  background:rgba(6,21,45,0.5);
  border:1px solid var(--border);
  border-radius:14px;
  position:relative;
  overflow:hidden;
}
.stat-card::before{
  content:'';
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:40%;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue-light),transparent);
}
.stat-num{
  font-family:var(--font-display);
  font-size:clamp(32px,4vw,52px);
  font-weight:700;
  background:linear-gradient(135deg,var(--blue-light),var(--orange));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.1;
}
.stat-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-tertiary);
  margin-top:10px;
}

/* Icon cards grid */
.icon-cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;
}
.icon-card{
  background:rgba(6,21,45,0.5);
  border:1px solid var(--border);
  border-radius:14px;
  padding:32px 28px;
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  position:relative;
}
.icon-card:hover{
  border-color:var(--border-hover);
  transform:translateY(-4px);
  box-shadow:0 8px 32px rgba(39,167,255,0.06);
}
.icon-card-icon{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(39,167,255,0.08);
  border:1px solid rgba(39,167,255,0.2);
  border-radius:12px;
  margin-bottom:20px;
  color:var(--blue-light);
}
.icon-card-icon svg{
  width:24px;height:24px;
}
.icon-card h3{
  font-size:18px;
  margin-bottom:10px;
  font-weight:600;
}
.icon-card p{
  font-size:14.5px;
  color:var(--text-secondary);
  line-height:1.6;
}
.icon-card .card-tags{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:16px;
}
.icon-card .card-tags span{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--blue-soft);
  background:rgba(39,167,255,0.06);
  border:1px solid rgba(39,167,255,0.12);
  padding:4px 10px;
  border-radius:100px;
}

/* Two-column layout */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}

/* Process flow (horizontal) */
.process-flow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:48px;
  position:relative;
}
.process-flow::before{
  content:'';
  position:absolute;
  top:36px;left:60px;right:60px;
  height:2px;
  background:linear-gradient(90deg,var(--blue-light),var(--orange));
  opacity:0.3;
}
.process-step{
  text-align:center;
  position:relative;
}
.process-step-num{
  width:72px;height:72px;
  margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(6,21,45,0.8);
  border:2px solid var(--border);
  font-family:var(--font-display);
  font-size:24px;
  font-weight:700;
  color:var(--blue-light);
  position:relative;
  z-index:2;
  transition:border-color .3s, box-shadow .3s;
}
.process-step:hover .process-step-num{
  border-color:var(--orange);
  box-shadow:0 0 24px rgba(243,108,10,0.15);
}
.process-step h4{
  font-size:16px;
  margin-bottom:6px;
}
.process-step p{
  font-size:13px;
  color:var(--text-secondary);
  line-height:1.5;
}

/* Capability strip */
.capability-strip{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:48px;
}
.capability-strip span{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:8px 20px;
  border:1px solid var(--border);
  border-radius:100px;
  color:var(--text-secondary);
  transition:border-color .3s, color .3s;
}
.capability-strip span:hover{
  border-color:var(--blue-light);
  color:var(--blue-light);
}

/* Page CTA section */
.page-cta-section{
  padding:80px 0 100px;
  text-align:center;
  position:relative;
  z-index:1;
}
.page-cta-section h2{
  font-size:clamp(24px,3.5vw,40px);
  margin-bottom:16px;
}
.page-cta-section p{
  color:var(--text-secondary);
  margin-bottom:32px;
  font-size:16px;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-profile{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.about-profile-text h3{
  font-size:clamp(22px,3vw,32px);
  margin-bottom:16px;
}
.about-profile-text p{
  font-size:15px;
  color:var(--text-secondary);
  line-height:1.8;
  margin-bottom:14px;
}
.about-profile-visual{
  display:flex;align-items:center;justify-content:center;
}
.about-profile-visual .profile-hud{
  width:100%;max-width:440px;
  aspect-ratio:1/0.85;
  background:rgba(6,21,45,0.6);
  border:1px solid var(--border);
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  overflow:hidden;
}
.profile-hud svg{
  width:80%;height:80%;
}

/* Vision / Mission */
.vm-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.vm-card{
  background:rgba(6,21,45,0.5);
  border:1px solid var(--border);
  border-radius:16px;
  padding:40px 36px;
  position:relative;
  overflow:hidden;
}
.vm-card::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:4px;height:100%;
}
.vm-card.vision::before{ background:var(--blue-light); }
.vm-card.mission::before{ background:var(--orange); }
.vm-card .vm-icon{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  margin-bottom:20px;
}
.vm-card.vision .vm-icon{
  background:rgba(39,167,255,0.1);
  border:1px solid rgba(39,167,255,0.2);
  color:var(--blue-light);
}
.vm-card.mission .vm-icon{
  background:rgba(243,108,10,0.1);
  border:1px solid rgba(243,108,10,0.2);
  color:var(--orange);
}
.vm-card .vm-icon svg{ width:26px;height:26px; }
.vm-card h3{
  font-size:22px;
  margin-bottom:12px;
}
.vm-card p{
  font-size:14.5px;
  color:var(--text-secondary);
  line-height:1.7;
}

/* Why choose grid (about page variant) */
.why-grid-6{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.why-item{
  background:rgba(6,21,45,0.4);
  border:1px solid var(--border);
  border-radius:14px;
  padding:28px 24px;
  transition:border-color .3s, transform .3s;
}
.why-item:hover{
  border-color:var(--border-hover);
  transform:translateY(-3px);
}
.why-item-num{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--orange);
  letter-spacing:0.1em;
  margin-bottom:12px;
}
.why-item h4{
  font-size:17px;
  margin-bottom:8px;
}
.why-item p{
  font-size:13.5px;
  color:var(--text-secondary);
  line-height:1.6;
}

/* ============================================================
   PRODUCTS PAGE
   ============================================================ */
.brand-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:20px;
}
.brand-card{
  background:rgba(6,21,45,0.55);
  border:1px solid var(--border);
  border-radius:14px;
  padding:28px 24px;
  text-align:center;
  transition:border-color .35s, transform .35s, box-shadow .35s;
  display:flex;flex-direction:column;align-items:center;
  gap:12px;
}
.brand-card:hover{
  border-color:var(--border-hover);
  transform:translateY(-5px);
  box-shadow:0 12px 40px rgba(39,167,255,0.08);
}
.brand-card-logo{
  width:100%;
  height:60px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;
}
.brand-card-logo img{
  max-height:44px;
  max-width:120px;
  object-fit:contain;
  opacity:0.9;
  transition:opacity .3s;
}
.brand-card:hover .brand-card-logo img{ opacity:1; }

/* Text-based brand badge for missing logos */
.brand-badge{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  color:var(--text-primary);
  letter-spacing:-0.02em;
  opacity:0.85;
}
.brand-card:hover .brand-badge{ opacity:1; }

.brand-card-name{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
}
.brand-card-cat{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-tertiary);
}

/* Product category cards */
.product-cats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.product-cat-card{
  background:rgba(6,21,45,0.5);
  border:1px solid var(--border);
  border-radius:14px;
  padding:32px 28px;
  transition:border-color .3s, transform .3s;
  position:relative;
  overflow:hidden;
}
.product-cat-card::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--blue-light),var(--orange));
  opacity:0;
  transition:opacity .3s;
}
.product-cat-card:hover{
  border-color:var(--border-hover);
  transform:translateY(-3px);
}
.product-cat-card:hover::after{ opacity:1; }
.product-cat-card .cat-icon{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(39,167,255,0.08);
  border:1px solid rgba(39,167,255,0.15);
  border-radius:10px;
  color:var(--blue-light);
  margin-bottom:16px;
}
.product-cat-card .cat-icon svg{ width:22px;height:22px; }
.product-cat-card h4{
  font-size:17px;
  margin-bottom:8px;
}
.product-cat-card p{
  font-size:13.5px;
  color:var(--text-secondary);
  line-height:1.6;
}

/* Genuine products strip */
.genuine-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:48px;
}
.genuine-item{
  text-align:center;
  padding:28px 20px;
}
.genuine-item .g-icon{
  width:56px;height:56px;
  margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(243,108,10,0.08);
  border:1px solid rgba(243,108,10,0.2);
  border-radius:50%;
  color:var(--orange);
}
.genuine-item .g-icon svg{ width:26px;height:26px; }
.genuine-item h4{
  font-size:16px;
  margin-bottom:6px;
}
.genuine-item p{
  font-size:13px;
  color:var(--text-secondary);
  line-height:1.5;
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.svc-full-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.svc-full-card{
  background:rgba(6,21,45,0.5);
  border:1px solid var(--border);
  border-radius:16px;
  padding:36px 32px;
  transition:border-color .35s, transform .35s, box-shadow .35s;
  position:relative;
}
.svc-full-card:hover{
  border-color:var(--border-hover);
  transform:translateY(-4px);
  box-shadow:0 8px 32px rgba(39,167,255,0.06);
}
.svc-full-card-header{
  display:flex;align-items:center;gap:16px;
  margin-bottom:16px;
}
.svc-full-card-icon{
  width:52px;height:52px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(39,167,255,0.08);
  border:1px solid rgba(39,167,255,0.2);
  border-radius:12px;
  color:var(--blue-light);
}
.svc-full-card-icon svg{ width:26px;height:26px; }
.svc-full-card .svc-full-num{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--orange);
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.svc-full-card h3{
  font-size:20px;
  font-weight:600;
}
.svc-full-card > p{
  font-size:14.5px;
  color:var(--text-secondary);
  line-height:1.7;
  margin-bottom:16px;
}

/* ============================================================
   INDUSTRIES PAGE (full)
   ============================================================ */
.ind-full-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:24px;
}
.ind-full-card{
  background:rgba(6,21,45,0.5);
  border:1px solid var(--border);
  border-radius:16px;
  padding:36px 32px;
  transition:border-color .35s, transform .35s;
  position:relative;
  overflow:hidden;
}
.ind-full-card:hover{
  border-color:var(--border-hover);
  transform:translateY(-4px);
}
.ind-full-card-icon{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(39,167,255,0.08);
  border:1px solid rgba(39,167,255,0.2);
  border-radius:12px;
  color:var(--blue-light);
  margin-bottom:20px;
}
.ind-full-card-icon svg{ width:26px;height:26px; }
.ind-full-card .ind-full-tag{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:8px;
}
.ind-full-card h3{
  font-size:20px;
  margin-bottom:10px;
}
.ind-full-card > p{
  font-size:14px;
  color:var(--text-secondary);
  line-height:1.65;
  margin-bottom:16px;
}
.ind-full-card .ind-full-specs{
  display:flex;flex-direction:column;gap:8px;
}
.ind-full-card .ind-spec-row{
  display:flex;justify-content:space-between;
  padding:6px 0;
  border-top:1px solid rgba(255,255,255,0.05);
  font-size:12.5px;
}
.ind-spec-row .spec-l{
  color:var(--text-tertiary);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.ind-spec-row .spec-r{
  color:var(--blue-soft);
  font-weight:500;
  font-size:13px;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:start;
}
.contact-form-wrap{
  background:rgba(6,21,45,0.6);
  border:1px solid var(--border);
  border-radius:16px;
  padding:40px 36px;
}
.contact-form-wrap h3{
  font-size:22px;
  margin-bottom:6px;
}
.contact-form-wrap > p{
  font-size:14px;
  color:var(--text-secondary);
  margin-bottom:28px;
}
.contact-form{
  display:flex;flex-direction:column;gap:20px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.form-group{
  display:flex;flex-direction:column;gap:6px;
}
.form-group label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-tertiary);
}
.form-group input,
.form-group textarea,
.form-group select{
  background:rgba(1,8,22,0.8);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 16px;
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:14px;
  transition:border-color .3s, box-shadow .3s;
  outline:none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  border-color:var(--blue-light);
  box-shadow:0 0 0 3px rgba(39,167,255,0.1);
}
.form-group input.error,
.form-group textarea.error,
.form-group select.error{
  border-color:#ef4444;
}
.form-group textarea{
  resize:vertical;
  min-height:120px;
}
.form-group select{
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23a8b5c9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
.form-group select option{
  background:var(--navy-900);
  color:var(--text-primary);
}
.form-error-msg{
  font-size:11px;
  color:#ef4444;
  font-family:var(--font-mono);
  display:none;
}
.form-group.has-error .form-error-msg{
  display:block;
}
.form-submit-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 32px;
  background:var(--orange);
  color:var(--white);
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  transition:background .3s, box-shadow .3s, transform .15s;
}
.form-submit-btn:hover{
  background:var(--orange-light);
  box-shadow:0 8px 24px rgba(243,108,10,0.25);
  transform:translateY(-1px);
}
.form-submit-btn svg{
  width:16px;height:16px;
}

/* Contact info panel */
.contact-info-panel{
  display:flex;flex-direction:column;gap:24px;
}
.contact-info-card{
  background:rgba(6,21,45,0.5);
  border:1px solid var(--border);
  border-radius:14px;
  padding:28px 24px;
  display:flex;gap:16px;align-items:flex-start;
  transition:border-color .3s;
}
.contact-info-card:hover{
  border-color:var(--border-hover);
}
.contact-info-icon{
  width:44px;height:44px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(39,167,255,0.08);
  border:1px solid rgba(39,167,255,0.2);
  border-radius:10px;
  color:var(--blue-light);
}
.contact-info-icon svg{ width:20px;height:20px; }
.contact-info-text h4{
  font-size:15px;
  margin-bottom:4px;
}
.contact-info-text p,
.contact-info-text a{
  font-size:14px;
  color:var(--text-secondary);
  line-height:1.5;
  transition:color .3s;
}
.contact-info-text a:hover{ color:var(--blue-light); }

/* Social icons row */
.social-row{
  display:flex;gap:12px;
  margin-top:8px;
}
.social-row a{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(39,167,255,0.06);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text-secondary);
  transition:border-color .3s, color .3s, background .3s;
}
.social-row a:hover{
  border-color:var(--blue-light);
  color:var(--blue-light);
  background:rgba(39,167,255,0.1);
}
.social-row a svg{ width:18px;height:18px; }

/* QR section */
.qr-section{
  background:rgba(6,21,45,0.5);
  border:1px solid var(--border);
  border-radius:14px;
  padding:28px 24px;
  text-align:center;
}
.qr-section h4{
  font-size:14px;
  margin-bottom:12px;
  color:var(--text-secondary);
}
.qr-code-wrap{
  width:140px;height:140px;
  margin:0 auto;
  background:var(--white);
  border-radius:10px;
  padding:10px;
  display:flex;align-items:center;justify-content:center;
}
.qr-code-wrap svg{
  width:100%;height:100%;
}

/* Map section */
.map-section{
  margin-top:48px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  height:300px;
}
.map-section iframe{
  width:100%;height:100%;border:0;
}

/* ============================================================
   INNER PAGE — Responsive (≤1024px)
   ============================================================ */
@media (max-width:1024px){
  .about-profile,
  .vm-grid,
  .two-col,
  .contact-grid{ grid-template-columns:1fr; }

  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid-6{ grid-template-columns:repeat(2,1fr); }
  .svc-full-grid{ grid-template-columns:1fr; }
  .product-cats{ grid-template-columns:repeat(2,1fr); }
  .genuine-strip{ grid-template-columns:1fr; gap:16px; }
  .process-flow{ grid-template-columns:repeat(2,1fr); }
  .process-flow::before{ display:none; }
  .ind-full-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

/* ============================================================
   INNER PAGE — Responsive (≤640px)
   ============================================================ */
@media (max-width:640px){
  .page-section{ padding:60px 0 40px; }
  .stats-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .stat-card{ padding:24px 12px; }
  .stat-num{ font-size:28px; }
  .why-grid-6{ grid-template-columns:1fr; }
  .brand-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .brand-card{ padding:20px 16px; }
  .product-cats{ grid-template-columns:1fr; }
  .process-flow{ grid-template-columns:1fr; gap:32px; }
  .icon-cards-grid{ grid-template-columns:1fr; }
  .contact-form-wrap{ padding:28px 20px; }
  .glass-card{ padding:28px 20px; }
  .vm-card{ padding:28px 24px; }
}

/* ============================================================
   LEGAL PAGES (Privacy Policy / Terms & Conditions)
   ============================================================ */
.legal-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 40px;
  background: rgba(6, 21, 45, 0.45);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.legal-content h3 {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 36px 0 16px;
  color: var(--blue-light);
  border-bottom: 1px solid rgba(39, 167, 255, 0.15);
  padding-bottom: 8px;
}
.legal-content p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.legal-content ul {
  margin-bottom: 24px;
  padding-left: 20px;
  list-style-type: square;
}
.legal-content li {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.legal-content strong {
  color: var(--text-primary);
}
.legal-content a {
  transition: color 0.3s;
}
.legal-content a:hover {
  color: var(--orange-light) !important;
}

@media (max-width: 640px) {
  .legal-container {
    padding: 28px 20px;
  }
  .legal-content h3 {
    font-size: 18px;
    margin: 28px 0 12px;
  }
}