/* ═══════════════════════════════════════════════════════════
   AuralogicX — Hero Section (v5 Split Layout)
   css/hero.css
═══════════════════════════════════════════════════════════ */

/* ─── Wrapper ────────────────────────────────────────────── */
.hero {
  position:   relative;
  min-height: 100vh;
  display:    flex;
  align-items:stretch;
  overflow:   hidden;
  padding-top:88px;
}

/* ─── Atmospheric layers ─────────────────────────────────── */
.hero-bg {
  position:   absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%, rgba(124,58,237,.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 40%, rgba(0,212,255,.16) 0%, transparent 55%);
}

/* ─── Split grid ─────────────────────────────────────────── */
.hero-split {
  position:              relative; z-index:5;
  width:100%; max-width: 1280px;
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0;
  align-items:           center;
  padding:               60px 48px;
}

/* ══ LEFT — Text Content ═════════════════════════════════ */
.hero-left {
  padding-right:  48px;
  display:        flex;
  flex-direction: column;
}
.hero-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  padding:         8px 20px;
  border-radius:   30px;
  margin-bottom:   32px;
  align-self:      flex-start;
  border:          1px solid rgba(0,212,255,.28);
  background:      rgba(0,212,255,.05);
  backdrop-filter: blur(10px);
}
.hero-badge-dot {
  width:         7px; height:7px;
  border-radius: 50%;
  background:    var(--cyan);
  box-shadow:    0 0 8px var(--cyan);
  animation:     blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.hero-badge span {
  font-family:    var(--ff-display);
  font-size:      10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--cyan);
}
.hero-title {
  font-family:  var(--ff-display);
  font-size:    clamp(38px,5vw,68px);
  font-weight:  800;
  line-height:  1.06;
  margin-bottom:8px;
}
.hero-tagline {
  font-family:    var(--ff-display);
  font-size:      clamp(14px,2vw,22px);
  font-weight:    300;
  letter-spacing: 6px;
  text-transform: uppercase;
  color:          #c8daf0;
  margin-bottom:  24px;
}
.hero-sub {
  font-size:    15.5px;
  color:        #b8ccec;
  line-height:  1.85;
  margin-bottom:36px;
  max-width:    480px;
}
.hero-actions {
  display:      flex;
  gap:          14px;
  flex-wrap:    wrap;
  margin-bottom:44px;
}

/* ─── "More about us" inline link ────────────────────────── */
.hero-more-link {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  margin-left:    8px;
  color:          var(--cyan);
  font-family:    var(--ff-display);
  font-size:      13px;
  font-weight:    600;
  letter-spacing: .4px;
  border-bottom:  1px solid rgba(0,212,255,.35);
  padding-bottom: 1px;
  transition:     .25s var(--ease);
  filter:         drop-shadow(0 0 0 rgba(0,212,255,0));
}
.hero-more-link:hover {
  color:        #fff;
  border-color: var(--cyan);
  filter:       brightness(1.3) drop-shadow(0 0 10px rgba(0,212,255,.6));
}
.hero-more-arrow { display:inline-block; transition:.25s var(--ease) }
.hero-more-link:hover .hero-more-arrow { transform:translate(2px,-2px) }

/* ─── Stat cards ─────────────────────────────────────────── */
.hero-statsbar {
  display:               grid;
  grid-template-columns: repeat(4,1fr);
  gap:                   10px;
  align-self:            flex-start;
  width:100%; max-width: 520px;
}
.hstat {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  padding:         16px 18px 14px;
  border-radius:   14px;
  background:      rgba(10,18,40,.70);
  border:          1px solid rgba(0,212,255,.10);
  backdrop-filter: blur(14px);
  overflow:        hidden;
  transition:      .3s var(--ease);
  cursor:          default;
}
.hstat::before {
  content:''; position:absolute; inset:0; border-radius:14px;
  background: linear-gradient(135deg,rgba(0,212,255,.06) 0%,transparent 60%);
  opacity:0; transition:.3s var(--ease);
}
.hstat::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg,var(--cyan),var(--violet));
  transform:scaleX(0); transform-origin:left; transition:.3s var(--ease);
}
.hstat:hover { border-color:rgba(0,212,255,.28); transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.35),0 0 20px rgba(0,212,255,.08) }
.hstat:hover::before { opacity:1 }
.hstat:hover::after  { transform:scaleX(1) }
.hstat-glow {
  position:absolute; top:-20px; right:-20px;
  width:60px; height:60px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.18) 0%,transparent 70%);
  pointer-events:none;
}
.hstat:nth-child(2) .hstat-glow { background:radial-gradient(circle,rgba(157,78,221,.2) 0%,transparent 70%) }
.hstat:nth-child(3) .hstat-glow { background:radial-gradient(circle,rgba(124,58,237,.2) 0%,transparent 70%) }
.hstat:nth-child(4) .hstat-glow { background:radial-gradient(circle,rgba(199,125,255,.2) 0%,transparent 70%) }
.hstat-icon  { font-size:18px; margin-bottom:5px; line-height:1; filter:drop-shadow(0 0 6px rgba(0,212,255,.4)); transition:filter .3s var(--ease) }
.hstat:hover .hstat-icon { filter:brightness(1.4) drop-shadow(0 0 14px rgba(0,212,255,.6)) }
.hstat-num {
  font-family:   var(--ff-display);
  font-size:     26px; font-weight:800; line-height:1;
  background:    linear-gradient(130deg,var(--cyan) 0%,var(--purple) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom: 4px;
}
.hstat-label {
  font-family:    var(--ff-display);
  font-size:      8.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color:          #9ab8d8;
  line-height:    1.3;
}

/* ══ RIGHT — Futuristic Hex Panel ════════════════════════ */
.hero-right {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding-left:    24px;
  overflow:        visible;
}
.hero-halo {
  position:       absolute;
  width:480px; height:480px; border-radius:50%;
  background:     radial-gradient(circle,rgba(124,58,237,.22) 0%,rgba(0,212,255,.10) 40%,transparent 70%);
  animation:      halo-breathe 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes halo-breathe { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.08);opacity:1} }
.hex-frame {
  position:        relative;
  width:340px; height:340px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.hex-ring {
  position:      absolute;
  border-radius: 50%;
  border-style:  solid;
  pointer-events:none;
}
.hex-ring-1 { inset:0;    border-width:1px; border-color:rgba(0,212,255,.25) transparent rgba(0,212,255,.25) transparent; animation:ring-cw 12s linear infinite }
.hex-ring-2 { inset:24px; border-width:1px; border-color:transparent rgba(157,78,221,.3) transparent rgba(157,78,221,.3); animation:ring-ccw 18s linear infinite }
.hex-ring-3 { inset:52px; border-width:1px; border-color:rgba(0,212,255,.12) transparent rgba(0,212,255,.12) transparent; animation:ring-cw 28s linear infinite }
.hex-ring-scan { position:absolute; inset:-12px; border-radius:50%; border:1px dashed rgba(0,212,255,.15); animation:ring-cw 40s linear infinite }
@keyframes ring-cw  { to { transform:rotate(360deg)  } }
@keyframes ring-ccw { to { transform:rotate(-360deg) } }
.hex-connectors { position:absolute; inset:0; z-index:1; pointer-events:none }
.hex-connectors svg { width:100%; height:100%; overflow:visible }
.hex-centre {
  position:        relative; z-index:2;
  width:200px; height:200px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  clip-path:       polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:      linear-gradient(140deg,rgba(0,212,255,.10),rgba(124,58,237,.22));
  animation:       hex-pulse 5s ease-in-out infinite;
}
@keyframes hex-pulse { 0%,100%{filter:drop-shadow(0 0 20px rgba(0,212,255,.35));transform:scale(1)} 50%{filter:drop-shadow(0 0 42px rgba(124,58,237,.5));transform:scale(1.04)} }
.hex-inner-text { text-align:center; padding:8px }
.hex-inner-text .hit-main {
  font-family:    var(--ff-display);
  font-size:      15px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  background:     linear-gradient(135deg,var(--cyan),var(--pink));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:    1.3;
}
.hex-inner-text .hit-sub { font-family:var(--ff-display); font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-top:4px }

/* ─── Orbiting nodes ─────────────────────────────────────── */
.orb-node  { position:absolute; z-index:3; display:flex; flex-direction:column; align-items:center; gap:5px }
.orb-card  {
  width:80px; height:80px; border-radius:16px;
  background:      rgba(8,14,34,.88);
  border:          1px solid rgba(0,212,255,.2);
  backdrop-filter: blur(16px);
  display:         flex; flex-direction:column; align-items:center; justify-content:center; gap:0px; /*Uma Made changes to reduce the gap */
  transition:      .3s var(--ease);
  box-shadow:      0 8px 28px rgba(0,0,0,.5);
  animation:       node-float 5s ease-in-out infinite;
  cursor:          default;
}
.orb-card:hover { border-color:rgba(0,212,255,.55); box-shadow:0 0 28px rgba(0,212,255,.25),0 8px 28px rgba(0,0,0,.5); transform:scale(1.1)!important }
.orb-card .oc-icon  { font-size:22px; transition:filter .3s var(--ease) }
.orb-card:hover .oc-icon { filter:brightness(1.45) drop-shadow(0 0 14px rgba(0,212,255,.65)) }
/*Uma Made changes to increase the font size from 7.5 to 8.5 - Code:font-size:8.5px; */
.orb-card .oc-label { font-family:var(--ff-display); font-size:8.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); text-align:center; line-height:1.3 }
@keyframes node-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
/* Clock-face positions */
.orb-n  { top:-52px;    left:50%; transform:translateX(-50%);  animation-delay:0s    }
.orb-ne { top:20px;     right:-52px;                           animation-delay:-.8s  }
.orb-se { bottom:20px;  right:-52px;                           animation-delay:-1.6s }
.orb-s  { bottom:-52px; left:50%; transform:translateX(-50%);  animation-delay:-2.4s }
.orb-sw { bottom:20px;  left:-52px;                            animation-delay:-3.2s }
.orb-nw { top:20px;     left:-52px;                            animation-delay:-4s   }

/* ─── Vertical separator ─────────────────────────────────── */
.hero-divider {
  position:       absolute;
  left:50%; top:10%; bottom:10%;
  width:          1px;
  background:     linear-gradient(180deg,transparent 0%,rgba(0,212,255,.18) 30%,rgba(124,58,237,.25) 70%,transparent 100%);
  pointer-events: none; z-index:4;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width:1024px) {
  .hero        { align-items:flex-start; padding-top:72px; padding-bottom:48px }
  .hero-split  { grid-template-columns:1fr; padding:40px 20px; text-align:center; justify-items:center }
  .hero-left   { padding-right:0; align-items:center; width:100%; max-width:540px; margin:0 auto }
  .hero-badge  { align-self:center }
  .hero-sub    { margin:0 auto 36px; max-width:480px }
  .hero-statsbar { align-self:center; max-width:360px }
  .hero-divider { display:none }
  .hero-right  { padding-left:0; margin-top:64px; width:100%; justify-content:center }
  .hex-frame   { width:300px; height:300px }
  .hex-centre  { width:160px; height:160px }
  .orb-card    { width:68px; height:68px }
  .orb-card .oc-icon { font-size:18px }
  .orb-n  { top:-48px }
  .orb-s  { bottom:-48px }
  .orb-ne { top:16px;  right:-48px }
  .orb-nw { top:16px;  left:-48px  }
  .orb-se { bottom:16px; right:-48px }
  .orb-sw { bottom:16px; left:-48px  }
}
@media (max-width:600px) {
  .hero-split  { padding:28px 16px 32px }
  .hero-title  { font-size:36px }
  .hero-tagline{ font-size:12px; letter-spacing:3px }
  .hero-sub    { font-size:14.5px }
  .hero-actions{ flex-direction:column; align-items:center; gap:10px }
  .hero-statsbar{ grid-template-columns:repeat(2,1fr); max-width:320px }
  .hex-frame   { width:250px; height:250px }
  .hex-centre  { width:130px; height:130px }
  .hex-inner-text .hit-main { font-size:11px }
  .orb-card    { width:54px; height:54px; border-radius:12px }
  .orb-card .oc-icon  { font-size:16px }
  .orb-card .oc-label { font-size:6.5px }
  .orb-n  { top:-40px }
  .orb-s  { bottom:-40px }
  .orb-ne { top:12px;  right:-40px }
  .orb-nw { top:12px;  left:-40px  }
  .orb-se { bottom:12px; right:-40px }
  .orb-sw { bottom:12px; left:-40px  }
  .hero-right  { margin-top:48px; overflow:visible; padding:0 24px }
  .hero-halo   { width:260px; height:260px }
}
@media (max-width:380px) {
  .hex-frame  { width:210px; height:210px }
  .hex-centre { width:108px; height:108px }
  .orb-card   { width:46px; height:46px; border-radius:10px }
  .orb-card .oc-icon  { font-size:14px }
  .orb-card .oc-label { display:none }
  .orb-n  { top:-34px }
  .orb-s  { bottom:-34px }
  .orb-ne { top:8px;  right:-34px }
  .orb-nw { top:8px;  left:-34px  }
  .orb-se { bottom:8px; right:-34px }
  .orb-sw { bottom:8px; left:-34px  }
}