/* ═══════════════════════════════════════════════════════════════════
   INA Webtech — Premium Cinematic Layer v17
   Inspired by Apple · OpenAI · Vercel · Linear · Stripe
   Principle: Minimal. Confident. Slow. Intelligent. Luxury.
   NOT: cyberpunk. NOT: neon overload. NOT: gaming.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --cb:rgba(8,10,18,0.72);
  --b1:rgba(255,255,255,0.07);
  --b2:rgba(255,255,255,0.12);
  --d:#06080f;--d2:#08090f;--d3:#0a0c14;
}

/* ══ BODY ══════════════════════════════════════════════════════ */
body{background:#06080f}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%,rgba(61,178,232,0.055) 0%,transparent 60%),
    radial-gradient(ellipse 40% 60% at 90% 80%,rgba(30,40,80,0.12) 0%,transparent 55%);
  animation:aurora-breathe 18s ease-in-out infinite;
}
@keyframes aurora-breathe{0%,100%{opacity:0.8}50%{opacity:1}}

/* Reading progress bar via CSS custom property set by JS */
body::after{
  content:'';position:fixed;top:0;left:0;height:1px;
  width:var(--progress,0%);
  background:linear-gradient(90deg,#2596cc,#3DB2E8,#7dd8f8);
  z-index:10001;pointer-events:none;
  box-shadow:0 0 6px rgba(61,178,232,0.5);
}

/* ══ NAV ════════════════════════════════════════════════════════ */
#nav{
  background:rgba(6,8,15,0.55) !important;
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
}
#nav.stuck{background:rgba(6,8,15,0.9) !important;border-color:rgba(255,255,255,0.08) !important}

/* ══ HERO ════════════════════════════════════════════════════════ */
.hero{background:radial-gradient(ellipse 120% 80% at 50% 60%,#08101e 0%,#06080f 70%) !important}
.hbg{display:none}
.hgrid{
  opacity:0.22;
  background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px) !important;
  background-size:80px 80px !important;
  mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,black 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,black 0%,transparent 100%);
  z-index:2 !important;
}
#hero3d{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;opacity:0;transition:opacity 2.2s ease;pointer-events:none;z-index:1 !important}
#hero3d.ready{opacity:1 !important}
.hero .wrap,.hero-content{position:relative;z-index:4}
.hero-content::before{
  content:'';position:absolute;inset:-40px -32px;
  background:radial-gradient(ellipse 85% 85% at 35% 50%,rgba(6,8,15,0.62) 0%,rgba(6,8,15,0.28) 55%,transparent 100%);
  pointer-events:none;z-index:-1;
}
.hero h1{letter-spacing:-0.04em;line-height:1.04;text-shadow:none}
.hero h1 .gt{
  background:linear-gradient(135deg,#7dd8f8 0%,#3DB2E8 45%,#2596cc 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 20px rgba(61,178,232,0.3));
}

/* ══ BUTTONS ════════════════════════════════════════════════════ */
.btn.bp{
  background:linear-gradient(135deg,#3DB2E8 0%,#2596cc 100%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.18) inset,0 4px 20px rgba(61,178,232,0.28) !important;
  border:none !important;position:relative;overflow:hidden;will-change:transform;
}
.btn.bp::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,transparent 60%);pointer-events:none}
.btn.bp:hover{box-shadow:0 1px 0 rgba(255,255,255,0.18) inset,0 8px 28px rgba(61,178,232,0.42) !important}
.btn.bo{border-color:rgba(255,255,255,0.11) !important;backdrop-filter:blur(12px);transition:all 0.4s ease !important}
.btn.bo:hover{border-color:rgba(255,255,255,0.2) !important;background:rgba(255,255,255,0.04) !important}

/* ══ PREMIUM GLASS CARDS ════════════════════════════════════════ */
.btile,.pillar,.dcard,.tcard,.cs,.incard,.jcard{
  background:rgba(255,255,255,0.028) !important;
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid rgba(255,255,255,0.07) !important;
  box-shadow:0 4px 24px rgba(0,0,0,0.38),0 1px 0 rgba(255,255,255,0.06) inset !important;
  transition:border-color 0.5s ease,box-shadow 0.5s ease !important;
  transform-style:preserve-3d;will-change:transform;
}
.btile:hover,.pillar:hover,.dcard:hover,.tcard:hover,.cs:hover,.incard:hover,.jcard:hover{
  border-color:rgba(255,255,255,0.12) !important;
  box-shadow:0 20px 60px rgba(0,0,0,0.55),0 0 0 1px rgba(61,178,232,0.08),0 1px 0 rgba(255,255,255,0.09) inset !important;
}
/* Top specular highlight */
.btile::before,.pillar::before,.dcard::before,.tcard::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
  pointer-events:none;z-index:1;
}
/* Sheen sweep */
.btile::after,.pillar::after,.cs::after,.incard::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,0.04) 50%,transparent 65%);
  transform:translateX(-100%);transition:transform 0.8s ease;
}
.btile:hover::after,.pillar:hover::after,.cs:hover::after,.incard:hover::after{transform:translateX(120%)}
.pillar.feat{background:rgba(61,178,232,0.045) !important;border-color:rgba(61,178,232,0.18) !important}

/* Card icons */
.pico,.bico,.dico{
  background:rgba(255,255,255,0.05) !important;border:1px solid rgba(255,255,255,0.08) !important;
  box-shadow:none !important;transition:all 0.4s ease !important;
}
.pillar:hover .pico,.btile:hover .bico{background:rgba(61,178,232,0.1) !important;border-color:rgba(61,178,232,0.18) !important}
.pico svg,.bico svg,.dico svg{transition:filter 0.4s ease}
.pillar:hover .pico svg,.btile:hover .bico svg{filter:drop-shadow(0 0 7px rgba(61,178,232,0.45))}

/* ══ SECTIONS ═══════════════════════════════════════════════════ */
.sec{position:relative;overflow:hidden}
.sec::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 45% 65% at 95% 50%,rgba(20,30,60,0.14) 0%,transparent 60%),
             radial-gradient(ellipse 35% 45% at 5% 50%,rgba(61,178,232,0.025) 0%,transparent 55%);
}
.sec>*{position:relative;z-index:1}
.sec.alt{background:radial-gradient(ellipse 70% 60% at 25% 50%,rgba(12,18,36,0.7) 0%,transparent 65%),linear-gradient(180deg,rgba(7,9,18,0.96) 0%,rgba(6,8,15,1) 100%)}

/* ══ STATS ═══════════════════════════════════════════════════════ */
.stats-strip{
  background:radial-gradient(ellipse 70% 110% at 50% 50%,rgba(20,30,60,0.35) 0%,transparent 70%),linear-gradient(180deg,rgba(7,9,18,0.95) 0%,rgba(8,11,20,0.98) 100%) !important;
  border-top:1px solid rgba(255,255,255,0.055) !important;border-bottom:1px solid rgba(255,255,255,0.055) !important;
}
.sn{
  background:linear-gradient(135deg,#ffffff 20%,#7dd8f8 55%,#3DB2E8 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 16px rgba(61,178,232,0.35));display:inline-block;
}

/* ══ PAGE HERO ════════════════════════════════════════════════ */
.ph{
  background:radial-gradient(ellipse 80% 80% at 50% -5%,rgba(30,50,90,0.12) 0%,transparent 55%),linear-gradient(180deg,#07090f 0%,#06080f 100%) !important;
  border-bottom:1px solid rgba(255,255,255,0.055) !important;position:relative;overflow:hidden;
}
.ph::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent,transparent 119px,rgba(255,255,255,0.012) 120px),repeating-linear-gradient(0deg,transparent,transparent 119px,rgba(255,255,255,0.012) 120px);
  mask-image:radial-gradient(ellipse 65% 65% at 85% 50%,black 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 65% 65% at 85% 50%,black 0%,transparent 100%);
}
.ph h1 .gt,.ph h2 .gt{
  background:linear-gradient(135deg,#7dd8f8 0%,#3DB2E8 50%,#2596cc 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ══ CTA / FOOTER ════════════════════════════════════════════ */
.ctabox{background:rgba(255,255,255,0.02) !important;border:1px solid rgba(255,255,255,0.07) !important;backdrop-filter:blur(20px);box-shadow:0 30px 80px rgba(0,0,0,0.45),0 1px 0 rgba(255,255,255,0.05) inset !important}
footer,.footer{background:radial-gradient(ellipse 55% 45% at 50% 0%,rgba(61,178,232,0.035) 0%,transparent 55%),linear-gradient(180deg,#07090f 0%,#04050b 100%) !important;border-top:1px solid rgba(255,255,255,0.055) !important}

/* ══ MISC ════════════════════════════════════════════════════ */
.tcard::before{content:'"';position:absolute;top:-12px;left:16px;font-size:5rem;line-height:1;color:rgba(255,255,255,0.05);font-family:Georgia,serif;pointer-events:none}
input,textarea,select{background:rgba(255,255,255,0.04) !important;border-color:rgba(255,255,255,0.09) !important;backdrop-filter:blur(8px);transition:all 0.3s ease !important}
input:focus,textarea:focus,select:focus{border-color:rgba(61,178,232,0.38) !important;box-shadow:0 0 0 3px rgba(61,178,232,0.07) !important;outline:none}
.tag,.ppt,.pp{background:rgba(255,255,255,0.05) !important;border:1px solid rgba(255,255,255,0.08) !important}
.hpill{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.09);backdrop-filter:blur(12px)}
.havail{background:rgba(74,222,128,0.05);border-color:rgba(74,222,128,0.16)}
.qstep,.rcard{background:rgba(255,255,255,0.03) !important;backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,0.07) !important;box-shadow:0 20px 60px rgba(0,0,0,0.45) !important}
.qopt{background:rgba(255,255,255,0.03) !important;border:1px solid rgba(255,255,255,0.07) !important;backdrop-filter:blur(10px);transition:all 0.3s ease !important}
.qopt:hover,.qopt.sel{background:rgba(61,178,232,0.07) !important;border-color:rgba(61,178,232,0.28) !important}
.qbar-fill{background:linear-gradient(90deg,#2596cc,#3DB2E8) !important;box-shadow:0 0 10px rgba(61,178,232,0.28) !important}
.rscore{background:linear-gradient(135deg,#7dd8f8,#3DB2E8) !important;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important}
.nm a,.nl a{position:relative;transition:color 0.3s ease}
.nm a::after,.nl a::after{content:'';position:absolute;bottom:-2px;left:50%;right:50%;height:1px;background:rgba(255,255,255,0.35);transition:left 0.3s ease,right 0.3s ease}
.nm a:hover::after,.nl a:hover::after{left:0;right:0}
.g2,.g3,.g4,.ig{perspective:1400px}

/* ══ MOBILE ════════════════════════════════════════════════════ */
@media(max-width:820px){
  .btile,.pillar,.dcard,.tcard,.cs,.incard,.jcard{backdrop-filter:blur(12px) !important;-webkit-backdrop-filter:blur(12px) !important;transform:none !important;will-change:auto !important}
  .btile::after,.pillar::after,.cs::after,.incard::after{display:none}
  body::before{animation:none}
}
@media(max-width:580px){
  .btile-inner{flex-direction:column !important;align-items:center !important;text-align:center !important;gap:10px !important}
  .btile-inner>*{width:100%}
  .pillar{align-items:center !important;text-align:center !important}
  .ppts,.btile-tags{justify-content:center !important}
  .pico,.bico,.dico{margin:0 auto 10px !important}
  .dcard{text-align:center !important}
}

/* ═══════════════════════════════════════════════════════════════════
   WORLD3D ARCHITECTURE — sections become glass overlays
   The 3D world is always visible. HTML floats on top.
   ═══════════════════════════════════════════════════════════════════ */

/* Fixed world canvas — CSS handles fade-in via .ready class */
#world3d{
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
  z-index:0 !important;
  opacity:0;
  transition:opacity 2.5s ease !important;
  display:block !important;
}
#world3d.ready{ opacity:1 !important }

/* Hero — fully transparent, world shows through */
.hero{
  background:transparent !important;
  position:relative;
  z-index:1;
}
.hbg,.hgrid{display:none !important}
#hero3d{display:none !important}

/* Section backgrounds become glass overlays */
.sec{
  background:rgba(6,8,15,0.0) !important;
  position:relative;
  z-index:1;
}
.sec.alt{
  background:rgba(6,8,15,0.15) !important;
}

/* Soft glass protection behind text so it stays readable */
.sec .wrap{
  position:relative;
}
.sec .wrap::before{
  content:'';
  position:absolute;
  inset:-32px -24px;
  background:radial-gradient(ellipse 90% 90% at 50% 50%,
    rgba(6,8,15,0.72) 0%,
    rgba(6,8,15,0.45) 50%,
    transparent 100%
  );
  pointer-events:none;
  z-index:-1;
  border-radius:24px;
}

/* Stats strip — slight dark band so numbers read against the world */
.stats-strip{
  background:rgba(6,8,15,0.55) !important;
  backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,0.06) !important;
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
  position:relative;
  z-index:1;
}

/* Footer — needs solid background as it's at the edge of the world */
footer,.footer{
  background:rgba(4,5,11,0.88) !important;
  backdrop-filter:blur(24px);
  border-top:1px solid rgba(255,255,255,0.07) !important;
  position:relative;
  z-index:1;
}

/* Nav sits above the world */
#nav{ z-index:1000 !important }

/* Hero content floats above */
.hero .wrap,.hero-content{ z-index:4; position:relative }
.hero-content::before{
  inset:-60px -40px;
  background:radial-gradient(ellipse 85% 85% at 35% 50%,
    rgba(6,8,15,0.65) 0%,
    rgba(6,8,15,0.3) 55%,
    transparent 100%
  );
}

/* Page heroes on sub-pages */
.ph{
  background:rgba(6,8,15,0.82) !important;
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
  position:relative;
  z-index:1;
}

/* Mobile — sections need more opacity since no 3D world on mobile */
@media(max-width:820px){
  .sec{ background:rgba(6,8,15,0.88) !important }
  .sec.alt{ background:rgba(7,9,18,0.92) !important }
  .hero{ background:rgba(6,8,15,0.95) !important }
  .sec .wrap::before{ display:none }
}

/* ═══════════════════════════════════════════════════════════════════
   AURORA HAZE + NEURAL NETWORK — replaces Three.js world
   ═══════════════════════════════════════════════════════════════════ */

/* Remove world3d canvas rules */
#world3d{ display:none !important }

/* ── AURORA LAYER 1 — primary blue bloom, top-right ── */
.aurora-a,.aurora-b,.aurora-c{
  position:fixed;pointer-events:none;border-radius:50%;z-index:0;
  filter:blur(80px);will-change:transform,opacity;
}
.aurora-a{
  width:900px;height:700px;
  top:-15%;right:-8%;
  background:radial-gradient(ellipse,rgba(61,178,232,0.13) 0%,rgba(61,178,232,0.04) 45%,transparent 70%);
  animation:aurora-drift-a 18s ease-in-out infinite;
}
.aurora-b{
  width:700px;height:800px;
  bottom:-20%;left:-10%;
  background:radial-gradient(ellipse,rgba(80,120,220,0.1) 0%,rgba(61,178,232,0.03) 50%,transparent 70%);
  animation:aurora-drift-b 24s ease-in-out infinite;
}
.aurora-c{
  width:600px;height:600px;
  top:35%;left:38%;
  background:radial-gradient(ellipse,rgba(61,178,232,0.07) 0%,transparent 65%);
  animation:aurora-drift-c 15s ease-in-out infinite;
}

@keyframes aurora-drift-a{
  0%,100%{transform:translate(0,0) scale(1);opacity:0.8}
  33%{transform:translate(-5%,8%) scale(1.08);opacity:1}
  66%{transform:translate(6%,-6%) scale(0.94);opacity:0.7}
}
@keyframes aurora-drift-b{
  0%,100%{transform:translate(0,0) scale(1);opacity:0.7}
  40%{transform:translate(8%,-7%) scale(1.12);opacity:1}
  75%{transform:translate(-4%,5%) scale(0.96);opacity:0.6}
}
@keyframes aurora-drift-c{
  0%,100%{transform:translate(0,0) scale(1);opacity:0.5}
  50%{transform:translate(-8%,6%) scale(1.15);opacity:0.85}
}

/* Hero canvas network */
#hero-net{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
  z-index:2 !important;
  opacity:0;
  transition:opacity 1.2s ease !important;
}

/* Fix hero — transparent so aurora shows through */
.hero{
  background:transparent !important;
  position:relative;
  overflow:hidden;
}

/* Sections — transparent so aurora bleeds through */
.sec{
  background:rgba(6,8,15,0.0) !important;
  position:relative;z-index:1;
}
.sec.alt{
  background:rgba(6,8,15,0.18) !important;
}

/* Mobile — disable aurora animations for battery */
@media(max-width:820px){
  .aurora-a,.aurora-b,.aurora-c{animation-play-state:paused;opacity:0.5}
  .sec{background:rgba(6,8,15,0.85) !important}
  .sec.alt{background:rgba(7,9,18,0.9) !important}
  .hero{background:rgba(6,8,15,0.9) !important}
}

/* ── AURORA: moved to hero-relative, fix nav z-index conflict ── */
.aurora-a,.aurora-b,.aurora-c{
  position:fixed !important;
  pointer-events:none;
  border-radius:50%;
  z-index:0 !important;
  filter:blur(80px);
  will-change:transform,opacity;
}
/* Nav always above aurora */
#nav{ z-index:1000 !important }
/* Mobile overlay always on top */
#mob,.mob{ z-index:999 !important }

/* ── SVG hero network ── */
#hero-svg{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
  z-index:2 !important;
  opacity:0;
  transition:opacity 1.5s ease !important;
  overflow:visible;
}
/* More precise aurora — sharper, less cloudy */
.aurora-a{
  width:800px !important;height:600px !important;
  top:-10% !important;right:-5% !important;
  background:radial-gradient(ellipse,rgba(61,178,232,0.09) 0%,rgba(61,178,232,0.02) 50%,transparent 70%) !important;
  filter:blur(60px) !important;
}
.aurora-b{
  width:600px !important;height:700px !important;
  bottom:-15% !important;left:-8% !important;
  background:radial-gradient(ellipse,rgba(70,110,210,0.07) 0%,rgba(61,178,232,0.02) 50%,transparent 70%) !important;
  filter:blur(70px) !important;
}
.aurora-c{
  width:500px !important;height:500px !important;
  top:40% !important;left:40% !important;
  background:radial-gradient(ellipse,rgba(61,178,232,0.05) 0%,transparent 65%) !important;
  filter:blur(55px) !important;
}
/* Client section */
.client-sec{
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
/* Reading progress line */
body::after{
  content:'';
  position:fixed;top:0;left:0;
  height:1px;width:var(--progress,0%);
  background:linear-gradient(90deg,#1a8bbf,#3DB2E8,#7dd8f8);
  z-index:10001;pointer-events:none;
  box-shadow:0 0 6px rgba(61,178,232,0.5);
}