
/* === Pro Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root{
  --font-head:'Space Grotesk',sans-serif;
  --font-body:'Manrope',sans-serif;
}
body{font-family:var(--font-body);}
h1,h2,h3,h4,h5{font-family:var(--font-head);}

:root{
  --accent:#00d4ff;
  --accent2:#7b61ff;
  --bg:#0d0f1a;
  --fg:#f5f7fa;
  --muted:#9aa0b2;
  --radius:14px;
  --container:1200px;
  --transition:.3s ease;
  font-size:16px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--fg);line-height:1.6;overflow-x:hidden;}
a{color:var(--accent);text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem;}
header{position:fixed;top:0;left:0;width:100%;z-index:1000;background:rgba(13,15,26,.6);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05);}
.nav{display:flex;justify-content:space-between;align-items:center;height:70px;}
.logoimg img{height:46px;object-fit:contain;}
.menu{display:flex;gap:1.4rem;list-style:none;}
.menu a{color:#fff;font-weight:500;transition:var(--transition);}
.menu a:hover{color:var(--accent);}
.hamburger{display:none;background:none;border:none;cursor:pointer;}
.hamburger span{display:block;width:26px;height:2px;background:#fff;margin:5px 0;transition:var(--transition);}
.taskbar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.06);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:50px;display:flex;gap:1.2rem;padding:.6rem 1.4rem;z-index:1000;box-shadow:0 8px 24px rgba(0,0,0,.25);}
.tb-item{color:#fff;font-size:.9rem;font-weight:600;}
.tb-item:hover{color:var(--accent);}
.hero{padding-top:8rem;text-align:center;min-height:88vh;display:flex;flex-direction:column;justify-content:center;align-items:center;}
.big-logo{max-width:360px;width:100%;margin:0 auto 1.5rem auto;filter:drop-shadow(0 0 12px rgba(0,212,255,.35));}
.section{padding:6rem 0 4rem 0;}
.section-title{font-size:2.3rem;margin-bottom:2.6rem;text-align:center;}
.center{text-align:center;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:2rem;border-radius:var(--radius);position:relative;}
.list,.icons-list{margin-top:1rem;margin-left:1.2rem;color:var(--muted);}
.icons-list{list-style:none;margin:0;padding:0;}
.icons-list li{display:flex;gap:.6rem;align-items:flex-start;margin:.4rem 0;color:#d0d3dc;font-size:.95rem;}
.icons-list li i{margin-top:4px;color:var(--accent);}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;}
.feature h4{margin-bottom:.6rem;color:var(--accent);font-size:1.05rem;}
.stats-block{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;margin-top:1.6rem;color:#9aa0b2;font-size:1rem;}
.brands-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;text-align:center;color:#9aa0b2;font-size:.9rem;}
.footer{padding:2.4rem 0;background:rgba(0,0,0,.3);margin-top:3rem;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;font-size:.9rem;color:var(--muted);gap:1rem;}
.to-top{color:var(--accent);font-weight:600;}
.bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;background:linear-gradient(120deg,var(--bg),#111631,#0a1f2d);overflow:hidden;}
.bg::before,.bg::after{content:'';position:absolute;width:120%;height:120%;background:radial-gradient(circle at center,var(--accent2) 0%,transparent 60%);animation:spin 18s linear infinite;opacity:.06;filter:blur(120px);}
.bg::after{background:radial-gradient(circle at center,var(--accent) 0%,transparent 60%);animation-duration:26s;}
@keyframes spin{0%{transform:translate(-10%, -10%) rotate(0deg);}50%{transform:translate(10%, 10%) rotate(180deg);}100%{transform:translate(-10%, -10%) rotate(360deg);}}
#triangles,#cyberbg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--transition), transform .8s var(--transition);}
.reveal.visible{opacity:1;transform:none;}
.delay-1{transition-delay:.15s}.delay-2{transition-delay:.3s}.delay-3{transition-delay:.45s}
.contact-block{max-width:780px;margin:0 auto;}
.contact-item{display:flex;gap:.8rem;margin:.6rem 0;color:#d0d3dc;font-size:1rem;align-items:flex-start;}
.contact-item i{color:var(--accent);margin-top:4px;}
form#msgForm input,form#msgForm textarea{width:100%;padding:.9rem 1rem;border-radius:var(--radius);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#fff;font-size:1rem;margin-bottom:.7rem;}
form#msgForm button{margin-top:1rem;}
.toast{position:fixed;right:20px;bottom:20px;background:#0a1f2d;color:#fff;padding:1rem 1.2rem;border-radius:12px;border:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(20px);transition:.4s var(--transition);z-index:2000;}
.toast.show{opacity:1;transform:none;}
@media(max-width:860px){
  .menu{position:fixed;top:70px;right:0;background:rgba(13,15,26,.95);flex-direction:column;width:220px;transform:translateX(100%);transition:var(--transition);padding:1.2rem 1.4rem;height:calc(100vh - 70px);}
  .menu.open{transform:none;}
  .hamburger{display:block;}
  .taskbar{bottom:10px;gap:.8rem;padding:.5rem 1rem;}
}


/* ===== v5 Enhancements ===== */
/* Neo Dock Taskbar */
.dock{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  display:flex;gap:1.4rem;padding:.8rem 1.8rem;
  background:rgba(15,18,34,.55);
  backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:42px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  z-index:1200;
}
.dock a{
  color:#fff;font-size:.88rem;font-weight:600;display:flex;flex-direction:column;
  align-items:center;gap:.3rem;transition:transform .25s var(--transition), color .25s var(--transition);
}
.dock a i{font-size:1.05rem;}
.dock a:hover{color:var(--accent);transform:translateY(-3px) scale(1.05);}
/* hide dock on very small screens when keyboard up? keep visible with wrap */
@media(max-width:620px){
  .dock{gap:.9rem;padding:.6rem 1rem;}
  .dock a span{display:none;}
}

/* Cyber animated background (matrix circuits) */
canvas#cybergrid{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;
}

/* Slow-motion section fade/slide */
.reveal-slow{
  opacity:0;transform:translateY(40px) scale(.98);
  transition:opacity 1.6s cubic-bezier(.22,.61,.36,1), transform 1.6s cubic-bezier(.22,.61,.36,1);
}
.reveal-slow.visible{opacity:1;transform:none;}

/* Section cards with subtle background */
.section-card{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
  border-radius:var(--radius);
  padding:3rem 2rem;
  margin-bottom:3rem;
  box-shadow:0 10px 38px rgba(0,0,0,.25);
  backdrop-filter:blur(18px) saturate(130%);
}

/* Headings bar underline */
h2.section-title::after{
  content:'';display:block;width:68px;height:3px;background:var(--accent);
  margin:12px auto 0 auto;border-radius:2px;opacity:.8;
}

/* Better typography spacing */
p{margin:.8rem 0;font-size:1.02rem;color:#d3d6e2;}
h1{font-size:3rem;margin:1rem 0;}
h2{font-size:2.2rem;margin:1rem 0;}
h3{font-size:1.4rem;margin:.8rem 0;}
h5{margin:.4rem 0;color:var(--muted);}

/* Responsive tweaks */
@media(max-width:1024px){
  h1{font-size:2.5rem;}
  h2.section-title{font-size:2rem;}
  .big-logo{max-width:280px;}
}
@media(max-width:768px){
  .two-col,.grid-3,.cards{grid-template-columns:1fr !important;}
  .hero{padding-top:7.5rem;}
  .section{padding:4.5rem 0 3rem 0;}
}

/* floating subtle bg for text blocks */
.bg-block{
  background:linear-gradient(135deg, rgba(0,212,255,.06) 0%, rgba(123,97,255,.06) 100%);
  border:1px solid rgba(255,255,255,.05);
  border-radius:16px;
  padding:1.2rem 1.6rem;
}

/* Smooth scroll */
html{scroll-behavior:smooth;}

/* slow-mo keyframes */
@keyframes slowFadeUp{
  0%{opacity:0;transform:translateY(50px) scale(.96);}
  60%{opacity:.6;}
  100%{opacity:1;transform:none;}
}
.slow-item{opacity:0;animation:slowFadeUp 2.4s cubic-bezier(.22,.61,.36,1) forwards;}
.slow-delay-1{animation-delay:.4s;}
.slow-delay-2{animation-delay:.8s;}
.slow-delay-3{animation-delay:1.2s;}
/* Intro overlay */
#introOverlay{
  position:fixed;inset:0;background:#0d0f1a;z-index:2000;display:flex;align-items:center;justify-content:center;flex-direction:column;
  animation:fadeOutIntro 1s ease 3.2s forwards;
}
#introOverlay h1{
  font-size:3.4rem;color:#fff;margin:0;
  animation:slowFadeUp 2.2s cubic-bezier(.22,.61,.36,1) forwards;
}
#introOverlay p{
  color:var(--accent);margin-top:1rem;font-size:1.1rem;letter-spacing:.06em;
  animation:slowFadeUp 2.2s cubic-bezier(.22,.61,.36,1) .3s forwards;
}
@keyframes fadeOutIntro{
  to{opacity:0;visibility:hidden;}
}


/* ===== v7 Animations & Hero Logo ===== */
.page-hero-logo{
  width:100%;
  text-align:center;
  padding-top:7.5rem;
  margin-bottom:1.2rem;
}
.page-hero-logo img{
  max-width:300px;
  width:100%;
  filter:drop-shadow(0 0 12px rgba(0,212,255,.35));
  animation:logoPop 1.6s cubic-bezier(.22,.61,.36,1) forwards;
  opacity:0;
  transform:translateY(-20px) scale(.92);
}
@keyframes logoPop{
  0%{opacity:0;transform:translateY(-20px) scale(.92) rotateX(20deg);}
  60%{opacity:1;transform:translateY(0) scale(1.02) rotateX(0deg);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

/* Intro cinematic */
#introOverlay{
  position:fixed;inset:0;background:#000;z-index:3000;display:flex;align-items:center;justify-content:center;flex-direction:column;
  overflow:hidden;
}
#introOverlay .scanline{
  position:absolute;top:-100%;left:0;width:100%;height:120%;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,212,255,.15) 50%,rgba(0,0,0,0) 100%);
  animation:scan 2.6s linear infinite;
}
@keyframes scan{
  0%{transform:translateY(-100%);}100%{transform:translateY(100%);}
}
#introOverlay svg{width:260px;opacity:0;transform:scale(.85);animation:introLogo 1.8s cubic-bezier(.22,.61,.36,1) .4s forwards;}
@keyframes introLogo{
  0%{opacity:0;transform:scale(.85) rotate(-6deg);filter:blur(4px);}
  60%{opacity:1;transform:scale(1.04) rotate(0deg);filter:blur(0px);}
  100%{opacity:1;transform:scale(1);}
}
#introOverlay h2{
  margin-top:1.2rem;color:var(--accent);font-family:var(--font-head);letter-spacing:.12em;font-size:1rem;opacity:0;
  animation:fadeUp 1.2s ease 1.1s forwards;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}
}
/* fade out overlay */
.fade-out-intro{animation:fadeOutIntro 1s ease forwards;}
@keyframes fadeOutIntro{to{opacity:0;visibility:hidden;}}

/* Global slow reveal variants */
.slow-item{opacity:0;animation:slowFadeUp 2.2s cubic-bezier(.22,.61,.36,1) forwards;}
.slow-delay-1{animation-delay:.35s;}
.slow-delay-2{animation-delay:.7s;}
.slow-delay-3{animation-delay:1.05s;}
@keyframes slowFadeUp{
  0%{opacity:0;transform:translateY(42px) scale(.96);}
  60%{opacity:.6;}
  100%{opacity:1;transform:none;}
}

/* Page transition */
#pageTransition{
  position:fixed;inset:0;background:#0d0f1a;z-index:2500;pointer-events:none;transform:translateY(100%);
  transition:transform .8s cubic-bezier(.77,0,.175,1);
}
#pageTransition.active{transform:translateY(0);}


/* ===== v8 refinements ===== */
/* Centered logo block (all pages except home) */
.page-top-logo{width:100%;text-align:center;padding-top:7.2rem;margin-bottom:1.6rem;}
.page-top-logo img{max-width:260px;width:100%;filter:drop-shadow(0 0 12px rgba(0,212,255,.32));}

/* Pro loader */
#proLoader{position:fixed;inset:0;background:#000;z-index:4000;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;}
#proLoader .bars{position:absolute;inset:0;pointer-events:none;}
#proLoader .bar{position:absolute;width:100%;height:2px;background:linear-gradient(90deg,rgba(0,212,255,0) 0%,rgba(0,212,255,.7) 50%,rgba(0,212,255,0) 100%);opacity:.12;animation:barMove 3.2s linear infinite;}
#proLoader .bar:nth-child(odd){animation-duration:2.4s;opacity:.18;}
@keyframes barMove{0%{transform:translateY(-100%);}100%{transform:translateY(100%);}}
#proLoader svg{width:280px;opacity:0;animation:logoIn 1.4s cubic-bezier(.22,.61,.36,1) .3s forwards;}
@keyframes logoIn{0%{opacity:0;transform:scale(.85) rotate(-8deg);filter:blur(6px);}60%{opacity:1;transform:scale(1.06) rotate(0deg);filter:blur(0px);}100%{opacity:1;transform:scale(1);}}
#proLoader h2{margin-top:1.1rem;color:var(--accent);font-family:var(--font-head);letter-spacing:.14em;font-size:1rem;opacity:0;animation:textIn 1s ease .9s forwards;}
@keyframes textIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.fade-out-loader{animation:fadeOutIntro 1s ease forwards;}

/* staggered entrance */
.stagger {opacity:0;transform:translateY(36px) scale(.98);}
.stagger.show {opacity:1;transform:none;transition:opacity 1.2s cubic-bezier(.22,.61,.36,1), transform 1.2s cubic-bezier(.22,.61,.36,1);}


/* v10 logo centering fix */
.page-top-logo{
  width:100%;
  padding-top:7rem;
  margin-bottom:1.6rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.page-top-logo img{
  max-width:260px;
  width:100%;
  margin:0 auto;
  filter:drop-shadow(0 0 12px rgba(0,212,255,.32));
}

/* legal pages */
.legal-wrapper{max-width:1200px;margin:0 auto;padding:6rem 1.4rem 4rem 1.4rem;display:flex;gap:2rem;}
.legal-side{flex:0 0 260px;position:sticky;top:90px;height:calc(100vh - 120px);overflow:auto;padding-right:1rem;border-right:1px solid rgba(255,255,255,.06);}
.legal-side a{display:block;font-size:.9rem;color:var(--muted);margin-bottom:.6rem;line-height:1.3;transition:color .2s;}
.legal-side a:hover{color:var(--accent);}
.legal-content{flex:1 1 auto;min-width:0;}
.doc-table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.88rem;}
.doc-table td,.doc-table th{border:1px solid rgba(255,255,255,.12);padding:.6rem;vertical-align:top;}
