/* ============================ RESET & BASE ============================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-deep:#03051a;
  --bg-space:#060b2e;
  --bg-nebula:#0d0633;
  --glass-bg:rgba(255,255,255,0.045);
  --glass-border:rgba(255,255,255,0.12);
  --glass-hover:rgba(255,255,255,0.08);
  --neon-blue:#00d4ff;
  --neon-purple:#a855f7;
  --neon-cyan:#22d3ee;
  --neon-pink:#ec4899;
  --text-primary:#ffffff;
  --text-secondary:rgba(255,255,255,0.72);
  --text-muted:rgba(255,255,255,0.5);
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
}
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{display:none;width:0;height:0}
body{
  font-family:var(--font-body);
  background:var(--bg-deep);
  color:var(--text-primary);
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;outline:none}
img{display:block;max-width:100%}

/* ============================ GLOBAL BACKGROUND STAGE ============================ */
.bg-stage{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}
.bg-layer{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  opacity:0;
  transition:opacity 0.8s ease-out;
  z-index:0;
}
.bg-layer picture,
.bg-layer img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.bg-layer::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(3,5,26,0.20) 0%,rgba(3,5,26,0.40) 50%,rgba(3,5,26,0.90) 100%);
  pointer-events:none;
}
.bg-layer.active{
  opacity:1;
}

/* Section content wrapper (keeps content centred, section itself full-width) */
.section-inner{
  position:relative;
  z-index:2;
  max-width:1400px;
  margin:0 auto;
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ============================ HERO BACKGROUND ============================ */
.hero{
  position:relative;
  z-index:2;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:140px 40px 80px;
  overflow:hidden;
}

/* ============================ BODY DEEP SPACE BACKGROUND ============================ */
body{
  background:var(--bg-deep);
}

/* ============================ NAVIGATION ============================ */
.navbar{
  position:fixed;
  top:0;left:0;
  width:100%;
  z-index:1000;
  padding:18px 0;
  transition:all 0.4s ease-out;
}
.nav-container{
  max-width:1400px;
  margin:0 auto;
  padding:0 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,0.035);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:60px;
  padding:12px 32px;
  margin:0 40px;
  max-width:calc(100% - 80px);
  transition:all 0.4s ease-out;
}
.navbar.scrolled .nav-container{
  background:rgba(3,5,26,0.7);
  border-color:rgba(255,255,255,0.08);
  box-shadow:0 8px 40px rgba(0,0,0,0.3);
}
.nav-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
  letter-spacing:2px;
  color:#fff;
}
.nav-logo .logo-dot{
  width:10px;height:10px;
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));
  border-radius:50%;
  box-shadow:0 0 12px rgba(0,212,255,0.6);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 12px rgba(0,212,255,0.6);transform:scale(1)}
  50%{box-shadow:0 0 20px rgba(0,212,255,0.9);transform:scale(1.2)}
}
.nav-links{
  display:flex;
  gap:36px;
  list-style:none;
}
.nav-links a{
  font-size:14px;
  font-weight:500;
  color:var(--text-secondary);
  transition:color 0.3s;
  position:relative;
}
.nav-links a:hover{color:#fff}
.nav-links a::after{
  content:'';
  position:absolute;
  bottom:-4px;left:0;
  width:0;height:2px;
  background:linear-gradient(90deg,var(--neon-blue),var(--neon-purple));
  border-radius:2px;
  transition:width 0.3s ease-out;
}
.nav-links a:hover::after{width:100%}
.nav-cta{
  display:flex;
  gap:14px;
  align-items:center;
}
.nav-cta .btn-ghost{
  font-size:14px;font-weight:500;
  color:var(--text-secondary);
  background:none;border:none;
  padding:8px 20px;
  transition:color 0.3s;
}
.nav-cta .btn-ghost:hover{color:#fff}
.nav-cta .btn-glass{
  font-size:14px;font-weight:600;
  padding:10px 24px;
  background:linear-gradient(135deg,rgba(0,212,255,0.2),rgba(168,85,247,0.2));
  border:1px solid rgba(0,212,255,0.3);
  border-radius:30px;
  color:#fff;
  backdrop-filter:blur(10px);
  transition:all 0.3s ease-out;
}
  .nav-cta .btn-glass:hover{
  background:linear-gradient(135deg,rgba(0,212,255,0.35),rgba(168,85,247,0.35));
  box-shadow:0 0 24px rgba(0,212,255,0.3);
  transform:translateY(-1px);
}
.nav-lang{
  font-size:13px;font-weight:600;
  padding:8px 14px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:20px;
  color:var(--text-secondary);
  backdrop-filter:blur(10px);
  transition:all 0.3s ease-out;
  cursor:pointer;
  white-space:nowrap;
}
.nav-lang:hover{
  color:#fff;
  border-color:rgba(0,212,255,0.3);
  background:var(--glass-hover);
}
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{
  width:22px;height:2px;
  background:#fff;border-radius:2px;
  transition:all 0.3s;
}

/* ============================ HERO SECTION ============================ */
.hero{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:140px 40px 80px;
  overflow:hidden;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 20px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--glass-border);
  border-radius:40px;
  font-size:13px;
  font-weight:500;
  color:var(--text-secondary);
  backdrop-filter:blur(12px);
  margin-bottom:36px;
  opacity:1;
}
.hero-badge .pulse-dot{
  width:8px;height:8px;
  background:var(--neon-blue);
  border-radius:50%;
  box-shadow:0 0 8px var(--neon-blue);
  animation:pulse 2s ease-in-out infinite;
}
.hero-logo{
  font-family:var(--font-display);
  font-size:clamp(60px,12vw,160px);
  font-weight:700;
  letter-spacing:clamp(4px,1vw,12px);
  line-height:1;
  margin-bottom:24px;
  background:linear-gradient(135deg,#ffffff 0%,#e0e7ff 40%,var(--neon-blue) 70%,var(--neon-purple) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:1;
  animation:fadeUp 1.2s ease-out 0.4s forwards;
  filter:drop-shadow(0 0 40px rgba(0,212,255,0.3));
}
.hero-subtitle{
  font-family:var(--font-display);
  font-size:clamp(14px,2vw,20px);
  font-weight:400;
  letter-spacing:6px;
  text-transform:uppercase;
  color:var(--text-secondary);
  margin-bottom:36px;
  opacity:1;
  animation:fadeUp 1.2s ease-out 0.6s forwards;
}
.hero-headline{
  font-family:var(--font-display);
  font-size:clamp(32px,5.5vw,68px);
  font-weight:700;
  line-height:1.15;
  max-width:900px;
  margin-bottom:24px;
  opacity:1;
  animation:fadeUp 1.2s ease-out 0.8s forwards;
}
.hero-headline .gradient-text{
  background:linear-gradient(90deg,var(--neon-blue),var(--neon-purple),var(--neon-pink));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-desc{
  font-size:clamp(15px,1.6vw,18px);
  color:var(--text-secondary);
  max-width:600px;
  margin-bottom:44px;
  opacity:1;
  animation:fadeUp 1.2s ease-out 1s forwards;
}
.hero-buttons{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
  opacity:1;
  animation:fadeUp 1.2s ease-out 1.2s forwards;
}
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 40px;
  font-size:15px;font-weight:600;
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));
  border-radius:40px;
  color:#fff;
  box-shadow:0 4px 30px rgba(0,212,255,0.35);
  transition:all 0.3s ease-out;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 40px rgba(0,212,255,0.5);
}
.btn-primary .arrow{transition:transform 0.3s}
.btn-primary:hover .arrow{transform:translateX(4px)}
.btn-glass-large{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 40px;
  font-size:15px;font-weight:600;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:40px;
  color:#fff;
  backdrop-filter:blur(12px);
  transition:all 0.3s ease-out;
}
.btn-glass-large:hover{
  background:var(--glass-hover);
  border-color:rgba(255,255,255,0.25);
  transform:translateY(-2px);
}
.hero-scroll{
  position:absolute;
  bottom:40px;left:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:500;
  letter-spacing:2px;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  opacity:0;
  animation:heroScrollIn 1s ease-out 1.6s forwards;
  transition:color 0.3s, transform 0.3s;
}
.hero-scroll:hover{
  color:#fff;
  transform:translateX(-50%) translateY(-4px);
}
@keyframes heroScrollIn{
  from{opacity:0;transform:translate(-50%,30px)}
  to{opacity:1;transform:translate(-50%,0)}
}
/* Small mouse icon */
.mouse-icon{
  position:relative;
  width:22px;height:34px;
  border:1.5px solid rgba(255,255,255,0.5);
  border-radius:12px;
  display:flex;
  justify-content:center;
  margin-top:4px;
  transition:border-color 0.3s;
}
.hero-scroll:hover .mouse-icon{border-color:rgba(255,255,255,0.9)}
.mouse-wheel{
  width:3px;height:7px;
  background:var(--neon-blue);
  border-radius:3px;
  margin-top:5px;
  box-shadow:0 0 6px var(--neon-blue);
  animation:mouseWheel 1.6s ease-in-out infinite;
}
@keyframes mouseWheel{
  0%{transform:translateY(0);opacity:1}
  70%{transform:translateY(10px);opacity:0}
  100%{transform:translateY(0);opacity:0}
}

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

/* ============================ SECTION COMMON ============================ */
.section{
  position:relative;
  z-index:2;
  min-height:100vh;
  padding:120px 40px;
  overflow:hidden;
}
.section-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 16px;
  background:rgba(0,212,255,0.08);
  border:1px solid rgba(0,212,255,0.2);
  border-radius:20px;
  font-size:12px;font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--neon-blue);
  margin-bottom:20px;
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(32px,4.5vw,52px);
  font-weight:700;
  line-height:1.2;
  margin-bottom:20px;
  max-width:800px;
}
.section-title .accent{
  background:linear-gradient(90deg,var(--neon-blue),var(--neon-purple));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.section-desc{
  font-size:17px;
  color:var(--text-secondary);
  max-width:600px;
  margin-bottom:60px;
}

/* ============================ AI GALAXY MAP ============================ */
.galaxy-section{
  position:relative;
  z-index:2;
  min-height:100vh;
  padding:120px 40px;
  overflow:hidden;
}
.galaxy-header{
  text-align:center;
  max-width:800px;
  margin:0 auto 80px;
}
.galaxy-header .section-title{margin:0 auto 20px}
.galaxy-header .section-desc{margin:0 auto}
.galaxy-map{
  position:relative;
  width:100%;
  max-width:1100px;
  margin:0 auto;
  height:600px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.galaxy-core{
  position:relative;
  width:160px;height:160px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,0.9),var(--neon-blue) 30%,var(--neon-purple) 70%,var(--bg-nebula));
  box-shadow:
    0 0 60px rgba(0,212,255,0.5),
    0 0 120px rgba(168,85,247,0.3),
    inset 0 0 30px rgba(255,255,255,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  animation:corePulse 4s ease-in-out infinite;
}
.galaxy-core::before{
  content:'';
  position:absolute;
  inset:-20px;
  border-radius:50%;
  border:1px solid rgba(0,212,255,0.15);
  animation:rotate 30s linear infinite;
}
.galaxy-core::after{
  content:'';
  position:absolute;
  inset:-60px;
  border-radius:50%;
  border:1px solid rgba(168,85,247,0.1);
  animation:rotate 40s linear infinite reverse;
}
.galaxy-core-label{
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:2px;
  color:#fff;
  text-shadow:0 0 10px rgba(0,212,255,0.8);
}
@keyframes corePulse{
  0%,100%{box-shadow:0 0 60px rgba(0,212,255,0.5),0 0 120px rgba(168,85,247,0.3),inset 0 0 30px rgba(255,255,255,0.1)}
  50%{box-shadow:0 0 80px rgba(0,212,255,0.7),0 0 160px rgba(168,85,247,0.4),inset 0 0 30px rgba(255,255,255,0.15)}
}
@keyframes rotate{to{transform:rotate(360deg)}}

.galaxy-rings{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.galaxy-ring{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px dashed rgba(255,255,255,0.08);
}
.galaxy-ring.r1{width:320px;height:320px}
.galaxy-ring.r2{width:520px;height:520px}
.galaxy-ring.r3{width:760px;height:760px}

.ai-planet{
  position:absolute;
  width:90px;height:90px;
  border-radius:50%;
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
  transition:all 0.4s ease-out;
  z-index:5;
}
.ai-planet:hover{
  transform:scale(1.15);
  border-color:rgba(0,212,255,0.4);
  box-shadow:0 0 30px rgba(0,212,255,0.3);
}
.ai-planet .planet-icon{font-size:24px}
.ai-planet .planet-name{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.5px;
  color:var(--text-secondary);
}
.ai-planet::before{
  content:'';
  position:absolute;
  width:100%;height:100%;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--glow-color,rgba(0,212,255,0.2)),transparent 70%);
  pointer-events:none;
}
.ai-planet.p1{top:5%;left:50%;transform:translateX(-50%);--glow-color:rgba(0,212,255,0.25)}
.ai-planet.p2{top:20%;right:10%;--glow-color:rgba(168,85,247,0.25)}
.ai-planet.p3{bottom:15%;right:5%;--glow-color:rgba(236,72,153,0.25)}
.ai-planet.p4{bottom:5%;left:50%;transform:translateX(-50%);--glow-color:rgba(34,211,238,0.25)}
.ai-planet.p5{bottom:15%;left:5%;--glow-color:rgba(168,85,247,0.25)}
.ai-planet.p6{top:20%;left:10%;--glow-color:rgba(0,212,255,0.25)}
.ai-planet.p7{top:50%;right:-2%;transform:translateY(-50%);--glow-color:rgba(236,72,153,0.25)}
.ai-planet.p8{top:50%;left:-2%;transform:translateY(-50%);--glow-color:rgba(34,211,238,0.25)}

/* Orbit lines connecting planets to core */
.orbit-line{
  position:absolute;
  top:50%;left:50%;
  height:1px;
  background:linear-gradient(90deg,rgba(0,212,255,0.2),transparent);
  transform-origin:left center;
  pointer-events:none;
  z-index:1;
}

/* ============================ AI TOOLS ECOSYSTEM ============================ */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
  margin-top:40px;
}
.tool-card{
  position:relative;
  padding:36px 32px;
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:all 0.4s ease-out;
}
.tool-card::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background:radial-gradient(circle at top left,var(--card-glow,rgba(0,212,255,0.08)),transparent 60%);
  opacity:0;
  transition:opacity 0.4s;
  pointer-events:none;
}
.tool-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,0.2);
  background:var(--glass-hover);
}
.tool-card:hover::before{opacity:1}
.tool-icon{
  width:56px;height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  margin-bottom:24px;
  background:linear-gradient(135deg,var(--icon-bg-1,rgba(0,212,255,0.15)),var(--icon-bg-2,rgba(168,85,247,0.15)));
  border:1px solid var(--glass-border);
}
.tool-card h3{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  margin-bottom:12px;
}
.tool-card p{
  font-size:15px;
  color:var(--text-secondary);
  line-height:1.7;
}
.tool-tag{
  display:inline-block;
  margin-top:20px;
  padding:4px 12px;
  font-size:12px;font-weight:500;
  background:rgba(0,212,255,0.1);
  border:1px solid rgba(0,212,255,0.2);
  border-radius:12px;
  color:var(--neon-blue);
}
.tool-card:nth-child(2) .tool-icon{--icon-bg-1:rgba(168,85,247,0.15);--icon-bg-2:rgba(236,72,153,0.15)}
.tool-card:nth-child(2){--card-glow:rgba(168,85,247,0.08)}
.tool-card:nth-child(3) .tool-icon{--icon-bg-1:rgba(34,211,238,0.15);--icon-bg-2:rgba(0,212,255,0.15)}
.tool-card:nth-child(3){--card-glow:rgba(34,211,238,0.08)}
.tool-card:nth-child(4) .tool-icon{--icon-bg-1:rgba(236,72,153,0.15);--icon-bg-2:rgba(168,85,247,0.15)}
.tool-card:nth-child(4){--card-glow:rgba(236,72,153,0.08)}
.tool-card:nth-child(5) .tool-icon{--icon-bg-1:rgba(0,212,255,0.15);--icon-bg-2:rgba(34,211,238,0.15)}
.tool-card:nth-child(6) .tool-icon{--icon-bg-1:rgba(168,85,247,0.15);--icon-bg-2:rgba(0,212,255,0.15)}
.tool-card:nth-child(6){--card-glow:rgba(168,85,247,0.08)}

/* ============================ AI WORKSPACE ============================ */
.workspace-section{
  position:relative;
  z-index:2;
  min-height:100vh;
  padding:120px 40px;
  overflow:hidden;
  margin:0 auto;
}
.workspace-layout{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
  align-items:center;
}
.workspace-info .section-title{margin-bottom:24px}
.workspace-features{
  list-style:none;
  margin-top:32px;
}
.workspace-features li{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.workspace-features li:last-child{border-bottom:none}
.feature-check{
  flex-shrink:0;
  width:24px;height:24px;
  border-radius:8px;
  background:linear-gradient(135deg,rgba(0,212,255,0.2),rgba(168,85,247,0.2));
  border:1px solid rgba(0,212,255,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:var(--neon-blue);
}
.workspace-features li h4{
  font-size:16px;
  font-weight:600;
  margin-bottom:4px;
}
.workspace-features li p{
  font-size:14px;
  color:var(--text-secondary);
}
.workspace-mockup{
  position:relative;
  padding:24px;
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.workspace-mockup::before{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:radial-gradient(circle,rgba(0,212,255,0.06) 0%,transparent 50%);
  animation:rotate 20s linear infinite;
  pointer-events:none;
}
.mockup-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  margin-bottom:20px;
}
.mockup-dot{
  width:12px;height:12px;
  border-radius:50%;
}
.mockup-dot.red{background:#ff5f57}
.mockup-dot.yellow{background:#febc2e}
.mockup-dot.green{background:#28c840}
.mockup-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.mockup-panel{
  padding:20px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-md);
  min-height:120px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mockup-panel.wide{grid-column:1/-1}
.mockup-line{
  height:8px;
  border-radius:4px;
  background:rgba(255,255,255,0.08);
  animation:shimmer 3s ease-in-out infinite;
}
.mockup-line.short{width:60%}
.mockup-line.medium{width:80%}
.mockup-line.accent{background:linear-gradient(90deg,rgba(0,212,255,0.3),rgba(168,85,247,0.3))}
@keyframes shimmer{
  0%,100%{opacity:0.5}
  50%{opacity:1}
}
.mockup-chart{
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:50px;
  margin-top:auto;
}
.mockup-bar-item{
  flex:1;
  background:linear-gradient(180deg,var(--neon-blue),rgba(168,85,247,0.3));
  border-radius:3px 3px 0 0;
  animation:barGrow 2s ease-out infinite;
  animation-delay:var(--delay,0s);
}
@keyframes barGrow{
  0%{height:20%}
  50%{height:100%}
  100%{height:20%}
}

/* ============================ AI MAIL ============================ */
.mail-section{
  position:relative;
  z-index:2;
  min-height:100vh;
  padding:120px 40px;
  overflow:hidden;
  margin:0 auto;
}
.mail-layout{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:60px;
  align-items:center;
}
.mail-preview{
  position:relative;
  padding:32px;
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
}
.mail-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  margin-bottom:20px;
}
.mail-avatar{
  width:40px;height:40px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.mail-header-info h4{font-size:15px;font-weight:600}
.mail-header-info span{font-size:12px;color:var(--text-muted)}
.mail-subject{
  font-size:18px;
  font-weight:600;
  font-family:var(--font-display);
  margin-bottom:8px;
}
.mail-preview-text{
  font-size:14px;
  color:var(--text-secondary);
  line-height:1.8;
  margin-bottom:16px;
}
.mail-ai-suggest{
  padding:16px;
  background:linear-gradient(135deg,rgba(0,212,255,0.08),rgba(168,85,247,0.08));
  border:1px solid rgba(0,212,255,0.15);
  border-radius:var(--radius-md);
  margin-bottom:16px;
}
.mail-ai-suggest-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  color:var(--neon-blue);
  margin-bottom:8px;
}
.mail-ai-suggest p{
  font-size:13px;
  color:var(--text-secondary);
  line-height:1.6;
}
.mail-actions{
  display:flex;
  gap:12px;
}
.mail-btn{
  flex:1;
  padding:10px;
  font-size:13px;font-weight:500;
  border-radius:var(--radius-sm);
  transition:all 0.3s;
}
.mail-btn.primary{
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));
  color:#fff;
}
.mail-btn.secondary{
  background:rgba(255,255,255,0.05);
  border:1px solid var(--glass-border);
  color:var(--text-secondary);
}
.mail-btn:hover{transform:translateY(-1px)}

/* ============================ AI COMPANION ============================ */
.companion-section{
  position:relative;
  z-index:2;
  min-height:100vh;
  padding:120px 40px;
  overflow:hidden;
  margin:0 auto;
  overflow:hidden;
}
.companion-layout{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:60px;
  align-items:center;
}
.companion-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:400px;
}
.companion-orb{
  position:relative;
  width:280px;height:280px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,0.15),rgba(0,212,255,0.1) 40%,rgba(168,85,247,0.15) 70%,transparent);
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:float 6s ease-in-out infinite;
}
.companion-orb::before{
  content:'';
  position:absolute;
  inset:-30px;
  border-radius:50%;
  border:1px solid rgba(0,212,255,0.1);
  animation:rotate 20s linear infinite;
}
.companion-orb::after{
  content:'';
  position:absolute;
  inset:-70px;
  border-radius:50%;
  border:1px dashed rgba(168,85,247,0.08);
  animation:rotate 30s linear infinite reverse;
}
.companion-inner{
  width:120px;height:120px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
  box-shadow:0 0 60px rgba(0,212,255,0.4);
  animation:corePulse 4s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-20px)}
}
.companion-particle{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--neon-blue);
  box-shadow:0 0 10px var(--neon-blue);
  opacity:0.6;
  animation:float 4s ease-in-out infinite;
  animation-delay:var(--p-delay,0s);
}
.companion-particle:nth-child(2){top:10%;left:20%;background:var(--neon-purple);box-shadow:0 0 10px var(--neon-purple);--p-delay:1s}
.companion-particle:nth-child(3){top:15%;right:15%;background:var(--neon-cyan);box-shadow:0 0 10px var(--neon-cyan);--p-delay:2s}
.companion-particle:nth-child(4){bottom:20%;left:10%;background:var(--neon-pink);box-shadow:0 0 10px var(--neon-pink);--p-delay:1.5s}
.companion-particle:nth-child(5){bottom:10%;right:20%;background:var(--neon-blue);box-shadow:0 0 10px var(--neon-blue);--p-delay:2.5s}

.chat-preview{
  margin-top:32px;
  padding:24px;
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
}
.chat-msg{
  display:flex;
  gap:12px;
  margin-bottom:16px;
}
.chat-msg:last-child{margin-bottom:0}
.chat-avatar{
  width:32px;height:32px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
}
.chat-msg.user .chat-avatar{
  background:rgba(255,255,255,0.08);
  border:1px solid var(--glass-border);
}
.chat-msg.ai .chat-avatar{
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));
}
.chat-bubble{
  padding:12px 16px;
  border-radius:16px;
  font-size:14px;
  line-height:1.6;
}
.chat-msg.user .chat-bubble{
  background:rgba(255,255,255,0.06);
  border:1px solid var(--glass-border);
}
.chat-msg.ai .chat-bubble{
  background:linear-gradient(135deg,rgba(0,212,255,0.1),rgba(168,85,247,0.1));
  border:1px solid rgba(0,212,255,0.15);
}

/* ============================ CTA SECTION ============================ */
.cta-section{
position:relative;
z-index:2;
padding:80px 40px;
text-align:center;
overflow:hidden;
}
.cta-section .section-inner{
min-height:auto;
}
.cta-box{
  max-width:900px;
  margin:0 auto;
  padding:80px 60px;
  background:linear-gradient(135deg,rgba(0,212,255,0.05),rgba(168,85,247,0.05));
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  position:relative;
  overflow:hidden;
}
.cta-box::before{
  content:'';
  position:absolute;
  top:-100px;left:50%;
  transform:translateX(-50%);
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(0,212,255,0.15),transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.cta-box h2{
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,44px);
  font-weight:700;
  margin-bottom:16px;
  position:relative;
}
.cta-box p{
  font-size:17px;
  color:var(--text-secondary);
  margin-bottom:36px;
  position:relative;
}
.cta-buttons{
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  position:relative;
}

/* ============================ STAR TRAIL SCROLLBAR ============================ */
.star-trail{
  position:fixed;
  right:14px;
  top:0;
  width:2px;
  height:100vh;
  z-index:999;
  pointer-events:none;
  display:flex;
  justify-content:center;
}
.star-trail-track{
  position:absolute;
  top:10%;
  bottom:10%;
  width:1px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.04) 8%,
    rgba(0,212,255,0.10) 20%,
    rgba(168,85,247,0.10) 50%,
    rgba(0,212,255,0.10) 80%,
    rgba(255,255,255,0.04) 92%,
    transparent 100%
  );
}
.star-trail-marks{
  position:absolute;
  top:10%;
  bottom:10%;
  left:50%;
  transform:translateX(-50%);
  width:1px;
  pointer-events:none;
}
.star-trail-marks span{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,255,255,0.12);
  box-shadow:0 0 3px rgba(255,255,255,0.08);
}
.star-trail-planet{
  position:absolute;
  left:50%;
  top:10%;
  transform:translate(-50%,-50%);
  width:16px;
  height:16px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #6ce5ff 0%, #00d4ff 40%, #0a2a6b 100%);
  box-shadow:0 0 12px rgba(0,212,255,0.5),0 0 24px rgba(0,212,255,0.2);
  pointer-events:auto;
  cursor:grab;
  z-index:2;
  transition:box-shadow 0.2s;
}
.star-trail-planet:hover{
  box-shadow:0 0 16px rgba(0,212,255,0.7),0 0 36px rgba(0,212,255,0.3);
}
.star-trail-planet:active,
.star-trail-planet.dragging{
  cursor:grabbing;
  box-shadow:0 0 20px rgba(0,212,255,0.9),0 0 44px rgba(0,212,255,0.4);
}
.star-trail-planet::after{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(0,212,255,0.15);
}
.star-trail-progress{
  position:absolute;
  top:10%;
  left:50%;
  transform:translateX(-50%);
  width:1px;
  background:linear-gradient(180deg,var(--neon-blue),var(--neon-purple));
  opacity:0.5;
  pointer-events:none;
}
@media(max-width:768px){
  .star-trail{display:none}
}

/* Desktop: hide mobile-only nav items */
.nav-mobile-cta{display:none}
.btn-glass-mobile{display:none}
.nav-lang-mobile{display:none}

/* ============================ FOOTER ============================ */
.footer{
  position:relative;
  z-index:2;
  padding:60px 48px 36px;
  max-width:calc(100% - 80px);
  margin:0 40px 32px;
  background:rgba(3,5,26,0.55);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:32px;
  box-shadow:0 8px 40px rgba(0,0,0,0.3);
  overflow:hidden;
}
.footer-top{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:60px;
}
.footer-brand .nav-logo{margin-bottom:16px}
.footer-brand p{
  font-size:14px;
  color:var(--text-muted);
  max-width:300px;
  line-height:1.7;
}
.footer-col h5{
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text-secondary);
  margin-bottom:20px;
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:12px}
.footer-col a{
  font-size:14px;
  color:var(--text-muted);
  transition:color 0.3s;
}
.footer-col a:hover{color:#fff}
.footer-social{display:flex;gap:12px;margin-top:20px}
.footer-social .social-link{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:10px;
background:var(--glass-bg);border:1px solid var(--glass-border);
color:var(--text-muted);transition:all 0.3s ease-out;
}
.footer-social .social-link:hover{
color:#fff;border-color:rgba(0,212,255,0.4);
background:rgba(0,212,255,0.1);transform:translateY(-2px);
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,0.06);
  font-size:13px;
  color:var(--text-muted);
}
/* ============================ WHY WOAIL SECTION ============================ */
.why-section{
  position:relative;
  z-index:2;
  padding:100px 40px;
  max-width:1400px;
  margin:0 auto;
}
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:48px;
}
.why-card{
  padding:36px 28px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  transition:all 0.3s;
}
.why-card:hover{
  background:var(--glass-hover);
  transform:translateY(-4px);
  border-color:rgba(0,212,255,0.3);
}
.why-card .why-icon{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(0,212,255,0.12),rgba(168,85,247,0.12));
  margin-bottom:20px;
}
.why-card h3{
  font-family:var(--font-display);
  font-size:18px;font-weight:600;
  margin-bottom:10px;
  color:var(--text-primary);
}
.why-card p{
  font-size:14px;line-height:1.7;
  color:var(--text-secondary);
}

/* ============================ FAQ SECTION ============================ */
.faq-section{
  position:relative;
  z-index:2;
  padding:80px 40px 40px;
  max-width:900px;
  margin:0 auto;
}
.faq-list{
  margin-top:40px;
}
.faq-item{
  border-bottom:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
}
.faq-question{
  width:100%;
  background:none;
  border:none;
  cursor:pointer;
  list-style:none;
  padding:24px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  text-align:left;
  font-family:var(--font-body);
  font-size:16px;font-weight:500;
  color:var(--text-primary);
  transition:color 0.2s;
}
.faq-question:hover{color:var(--neon-blue)}
.faq-question::-webkit-details-marker{display:none}
.faq-question::marker{display:none}
.faq-question .faq-icon{
  flex-shrink:0;
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  color:var(--neon-blue);
  transition:transform 0.3s;
}
.faq-item[open] .faq-icon{transform:rotate(45deg)}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s ease;
}
.faq-item[open] .faq-answer{max-height:300px}
.faq-answer-inner{
  padding:0 0 24px;
  font-size:15px;
  line-height:1.8;
  color:var(--text-secondary);
}

/* ============================ RESPONSIVE ============================ */
@media(max-width:1024px){
  .workspace-layout,.mail-layout,.companion-layout{
    grid-template-columns:1fr;
  }
  .footer-top{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav-links{
    display:none;
    position:absolute;
    top:calc(100% + 12px);
    left:16px;right:16px;
    flex-direction:column;
    gap:0;
    background:rgba(3,5,26,0.95);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--glass-border);
    border-radius:18px;
    padding:8px 0;
    z-index:100;
  }
  .nav-links.active{display:flex}
  .nav-links li{width:100%}
  .nav-links a{
    display:block;
    padding:14px 24px;
    font-size:15px;
  }
  .nav-links a::after{display:none}
  .nav-mobile-cta{
    display:list-item;
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .btn-glass-mobile{
    display:block;
    text-align:center;
    padding:14px 24px;
    border-radius:30px;
    background:linear-gradient(135deg,rgba(0,212,255,0.2),rgba(168,85,247,0.2));
    border:1px solid rgba(0,212,255,0.3);
    color:#fff;
    font-weight:600;
  }
  .nav-toggle{display:flex}
  .nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.active span:nth-child(2){opacity:0}
  .nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-cta .btn-ghost{display:none}
  .nav-cta .btn-glass{display:none}
  .nav-cta .nav-lang{display:none}
  .nav-lang-mobile{
    display:block;
    width:100%;
    text-align:center;
    padding:14px 24px;
    border-radius:30px;
    font-size:15px;
    font-weight:600;
    color:var(--neon-blue);
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    cursor:pointer;
  }
  .nav-container{padding:10px 20px}
  .hero{padding:120px 24px 60px}
  .hero-scroll{display:none}
  .section,.workspace-section,.mail-section,.companion-section,.why-section{padding:80px 24px}
.cta-section{padding:60px 24px}
.faq-section{padding:60px 24px 30px}
  .galaxy-map{height:400px}
  .galaxy-core{width:100px;height:100px}
  .galaxy-ring.r1{width:200px;height:200px}
  .galaxy-ring.r2{width:340px;height:340px}
  .galaxy-ring.r3{width:480px;height:480px}
  .ai-planet{width:70px;height:70px}
  .ai-planet .planet-icon{font-size:20px}
  .ai-planet .planet-name{font-size:9px}
  .tools-grid{grid-template-columns:1fr}
  .cta-box{padding:60px 30px}
.footer-top{grid-template-columns:1fr}
.footer-bottom{flex-direction:column;gap:20px;text-align:center}
.footer{margin:0 16px 20px;padding:40px 24px 28px;border-radius:24px;max-width:calc(100% - 32px)}
}
@media(max-width:480px){
  .hero-logo{font-size:56px}
  .hero-buttons{flex-direction:column;align-items:center}
  .btn-primary,.btn-glass-large{width:100%;justify-content:center}
  .galaxy-map{height:350px}
  .mockup-content{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
}

/* ============================ MOBILE BACKDROP-FILTER DEGRADATION ============================ */
@media(max-width:768px){
  .nav-container,.tool-card,.workspace-mockup,.mail-preview,.chat-preview,.cta-box,.footer,.ai-planet{
    backdrop-filter:blur(10px) saturate(150%);
    -webkit-backdrop-filter:blur(10px) saturate(150%);
  }
}
@media(max-width:480px){
  .nav-container,.tool-card,.workspace-mockup,.mail-preview,.chat-preview,.cta-box,.footer,.ai-planet{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(3,5,26,0.88);
  }
  .nav-container{background:rgba(3,5,26,0.92)}
  .footer{background:rgba(3,5,26,0.92)}
}

/* SVG line icons */
.section-label svg{
  width:14px;height:14px;
  stroke:var(--neon-blue);
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.planet-icon svg{
  width:22px;height:22px;
  stroke:var(--text-secondary);
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ai-planet:hover .planet-icon svg{stroke:#fff}
.tool-icon svg{
  width:26px;height:26px;
  stroke:#fff;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.feature-check svg{
  width:14px;height:14px;
  stroke:var(--neon-blue);
  fill:none;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.mail-avatar svg{
  width:20px;height:20px;
  stroke:#fff;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.mail-ai-suggest-label svg{
  width:14px;height:14px;
  stroke:var(--neon-blue);
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.chat-avatar svg{
  width:18px;height:18px;
  stroke:#fff;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.companion-inner svg{
  width:52px;height:52px;
  stroke:#fff;
  fill:none;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ============================ STAR PARTICLES (box-shadow, zero DOM nodes) ============================ */
.stars-layer{position:absolute;top:0;left:0;width:100%;height:100vh;z-index:1;pointer-events:none;overflow:hidden}
.star-layer{position:absolute;top:0;left:0;width:2px;height:2px;border-radius:50%;background:#fff;opacity:0;animation:twinkle 4s ease-in-out infinite}
.star-layer-2{width:1px;height:1px;animation-duration:5s;animation-delay:1.5s}
@keyframes twinkle{
  0%,100%{opacity:0}
  50%{opacity:0.8}
}

/* Ripple effect (moved from JS injection) */
@keyframes ripple{to{transform:scale(2.5);opacity:0}}

/* Reveal animation */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s ease-out,transform 0.8s ease-out;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}