/* ── ASTRIUM SHARED STYLES — Zion Theme ── */

:root {
  --bg: #f8f9fc;
  --bg2: #f0f2f7;
  --surface: rgba(255, 255, 255, 0.65);
  --surface2: rgba(240, 243, 250, 0.7);
  --accent: #8a9bb5;
  --accent2: #6e7f99;
  --accent3: #a0aec0;
  --accent4: #7b8faa;
  --accent-rgb: 138, 155, 181;
  --accent2-rgb: 110, 127, 153;
  --accent3-rgb: 160, 174, 192;
  --border: rgba(180, 195, 215, 0.35);
  --text: #4a5568;
  --muted: #8898aa;
  --bright: #1a2332;
  --glow: rgba(138, 155, 181, 0.25);
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(180, 195, 215, 0.3);
  --glass-blur: 18px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; cursor: none }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(140, 160, 185, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 75% 60%, rgba(140, 160, 185, 0.03) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(140, 160, 185, 0.025) 0%, transparent 40%);
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── CURSOR ── */
.cursor { width: 10px; height: 10px; background: var(--accent); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width .2s, height .2s; mix-blend-mode: multiply }
.cursor-ring { width: 36px; height: 36px; border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%) }

/* ── CANVAS ── */
#techCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.7 }

/* ── NAV ── */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 20px 60px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--glass-border); background: rgba(248, 249, 252, 0.82); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px) }
.logo { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--bright); letter-spacing: .05em; text-decoration: none }
.logo span { color: var(--accent) }
.nav-links { display: flex; gap: 0; list-style: none; align-items: center }
.nav-links > li { position: relative }
.nav-links > li.has-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 15px; background: transparent }
.nav-links > li > a { display: block; padding: 8px 18px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .2s; font-weight: 500 }
.nav-links > li > a:hover, .nav-links > li.active > a { color: var(--bright) }
.has-dropdown > a::after { content: ' ▾'; font-size: .55rem; opacity: .6 }
.dropdown { display: none; position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); background: rgba(248, 249, 252, 0.94); border: 1px solid var(--glass-border); min-width: 220px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 8px; overflow: hidden }
.has-dropdown:hover .dropdown { display: block }
.dropdown a { display: flex; align-items: center; gap: 12px; padding: 14px 20px; font-size: .72rem; color: var(--text); text-decoration: none; letter-spacing: .05em; transition: background .2s, color .2s; border-bottom: 1px solid rgba(180, 195, 215, 0.15) }
.dropdown a:last-child { border-bottom: none }
.dropdown a:hover { background: rgba(var(--accent-rgb), .08); color: var(--bright) }
.dropdown a .dd-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb), .1); flex-shrink: 0; border-radius: 4px }
.dropdown a .dd-icon svg { width: 14px; height: 14px; stroke: var(--accent); fill: none; stroke-width: 1.8 }
.dropdown a.purple .dd-icon { background: rgba(123, 97, 255, .08) }
.dropdown a.purple .dd-icon svg { stroke: #7b61ff }
.dropdown a.purple:hover { color: #7b61ff; background: rgba(123, 97, 255, .06) }
.dd-label { display: flex; flex-direction: column }
.dd-label span { font-size: .58rem; color: var(--muted); margin-top: 1px; letter-spacing: .08em }
.nav-cta { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: 10px 22px; border: 1px solid rgba(var(--accent-rgb), 0.4); color: var(--bright); background: transparent; text-decoration: none; font-weight: 600; transition: background .2s, color .2s, box-shadow .2s; margin-left: 18px; border-radius: 4px }
.nav-cta:hover { background: var(--bright); color: #ffffff; border-color: var(--bright); box-shadow: 0 4px 20px rgba(26, 35, 50, 0.15) }

/* ── BUTTONS ── */
.btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; background: var(--bright); color: #ffffff; font-family: 'Inter', sans-serif; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; font-weight: 600; transition: box-shadow .2s, transform .2s; border-radius: 4px }
.btn-primary:hover { box-shadow: 0 8px 30px rgba(26, 35, 50, 0.2); transform: translateY(-2px) }
.btn-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; border: 1px solid rgba(var(--accent-rgb), 0.4); color: var(--bright); font-family: 'Inter', sans-serif; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; font-weight: 500; transition: border-color .2s, color .2s; border-radius: 4px }
.btn-secondary:hover { border-color: var(--bright); color: var(--bright) }

/* ── SECTIONS ── */
section { position: relative; z-index: 1 }
.section-inner { max-width: 1200px; margin: 0 auto; padding: 120px 60px }
.section-tag { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px }
.section-tag::before { content: '//'; color: var(--accent3); margin-right: 2px }
.section-title { font-family: 'Orbitron', sans-serif; font-size: clamp(1.6rem, 3.5vw, 2.8rem); font-weight: 800; letter-spacing: .02em; color: var(--bright); line-height: 1.1; margin-bottom: 20px }
.section-desc { font-size: .95rem; line-height: 1.85; color: var(--muted); font-weight: 400; max-width: 520px }

/* ── PRODUCT HERO (shared between product pages) ── */
.product-hero { position: relative; min-height: 100vh; display: flex; align-items: center; z-index: 1; overflow: hidden; padding-top: 80px; background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%) }
.product-hero-inner { max-width: 1200px; margin: 0 auto; padding: 80px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; width: 100% }
.product-hero-badge { display: inline-flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .3); padding: 6px 16px; margin-bottom: 24px; background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 4px }
.product-hero-badge::before { content: '> '; opacity: .4 }
.product-hero-title { font-family: 'Orbitron', sans-serif; font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 900; letter-spacing: .02em; color: var(--bright); line-height: 1.05; margin-bottom: 20px }
.product-hero-title span { display: block; background: linear-gradient(135deg, var(--bright), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }
.product-hero-desc { font-size: 1.05rem; line-height: 1.85; color: var(--muted); margin-bottom: 40px; font-weight: 400 }
.product-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap }

/* ── SCREENSHOT PLACEHOLDER ── */
.screenshot-wrap { position: relative }
.screenshot-placeholder { width: 100%; aspect-ratio: 16/10; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; position: relative; overflow: hidden; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)) }
.screenshot-placeholder::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--accent-rgb), .04), rgba(var(--accent2-rgb), .03)) }
.screenshot-placeholder .ph-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .15); border-radius: 6px }
.screenshot-placeholder .ph-icon svg { width: 30px; height: 30px; stroke: var(--accent); fill: none; stroke-width: 1.5 }
.screenshot-placeholder .ph-label { font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted) }
.screenshot-placeholder .ph-sub { font-size: .75rem; color: rgba(136, 152, 170, .6); margin-top: -8px }
.corner-tl, .corner-br { position: absolute; width: 24px; height: 24px }
.corner-tl { top: 0; left: 0; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent) }
.corner-br { bottom: 0; right: 0; border-bottom: 2px solid var(--accent2); border-right: 2px solid var(--accent2) }
.screenshot-stat { position: absolute; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--glass-border); padding: 12px 18px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 6px }
.screenshot-stat.s1 { bottom: 20px; left: 20px }
.screenshot-stat.s2 { top: 20px; right: 20px }
.screenshot-stat .s-num { font-family: 'Orbitron', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--bright) }
.screenshot-stat .s-label { font-family: 'JetBrains Mono', monospace; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 2px }

/* ── FEATURES ── */
.features-section { position: relative; z-index: 1; background: rgba(240, 242, 247, 0.6) }
.features-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; gap: 40px; flex-wrap: wrap }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px }
.feature-card { background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 36px 32px; transition: border-color .3s, transform .3s, box-shadow .3s; border-radius: 8px; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)) }
.feature-card:hover { border-color: rgba(var(--accent-rgb), .5); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) }
.feature-card::before { content: ''; display: block; width: 40px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); margin-bottom: 22px }
.feature-icon { width: 44px; height: 44px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .15); border-radius: 4px }
.feature-icon svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.5 }
.feature-title { font-family: 'Orbitron', sans-serif; font-size: .88rem; font-weight: 700; color: var(--bright); margin-bottom: 10px; letter-spacing: .02em }
.feature-desc { font-size: .82rem; line-height: 1.8; color: var(--muted) }

/* ── SCREENSHOTS ── */
.screenshots-section { position: relative; z-index: 1; background: rgba(248, 249, 252, 0.95) }
.screenshots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px }
.screenshot-mini { background: var(--glass-bg); border: 1px solid var(--glass-border); aspect-ratio: 4/3; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden; transition: border-color .3s; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)) }
.screenshot-mini:hover { border-color: rgba(var(--accent-rgb), .5) }
.screenshot-mini::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--accent-rgb), .03), rgba(var(--accent2-rgb), .02)) }
.screenshot-mini .ph-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .15); border-radius: 4px }
.screenshot-mini .ph-icon svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.5 }
.screenshot-mini .ph-label { font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 0 12px }

/* ── HOW IT WORKS ── */
.how-section { position: relative; z-index: 1; background: rgba(240, 242, 247, 0.6) }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 60px }
.step { background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 36px 28px; position: relative; transition: border-color .3s; border-radius: 8px; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)) }
.step:hover { border-color: rgba(var(--accent-rgb), .5) }
.step-num { font-family: 'Orbitron', sans-serif; font-size: .7rem; font-weight: 700; color: var(--accent); letter-spacing: .1em; margin-bottom: 20px; display: flex; align-items: center; gap: 8px }
.step-num::after { content: ''; flex: 1; height: 1px; background: rgba(var(--accent-rgb), .2) }
.step-title { font-family: 'Orbitron', sans-serif; font-size: .9rem; font-weight: 700; color: var(--bright); margin-bottom: 10px; line-height: 1.3 }
.step-desc { font-size: .8rem; line-height: 1.8; color: var(--muted) }
.connector { position: absolute; top: 50%; right: -1px; width: 2px; height: 40px; background: linear-gradient(to bottom, var(--accent), transparent); transform: translateY(-50%) }

/* ── CTA BAND ── */
.cta-band { position: relative; z-index: 1; background: var(--glass-bg); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)) }
.cta-inner { max-width: 1200px; margin: 0 auto; padding: 80px 60px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap }
.cta-text h2 { font-family: 'Orbitron', sans-serif; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 800; color: var(--bright); letter-spacing: .02em; margin-bottom: 10px }
.cta-text p { font-size: .9rem; color: var(--muted) }

/* ── FOOTER ── */
footer { border-top: 1px solid var(--glass-border); background: rgba(240, 242, 247, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; z-index: 1; padding: 40px 60px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px }
.footer-logo { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: .95rem; color: var(--bright); text-decoration: none; letter-spacing: .05em }
.footer-logo span { color: var(--accent) }
.footer-copy { font-size: .7rem; color: var(--muted); font-family: 'JetBrains Mono', monospace }
.footer-links { display: flex; gap: 28px }
.footer-links a { font-size: .7rem; color: var(--muted); text-decoration: none; transition: color .2s; letter-spacing: .08em; font-weight: 500 }
.footer-links a:hover { color: var(--bright) }

/* ── LAUNCHING SOON BADGE ── */
.coming-soon-tag { border-color: rgba(var(--accent-rgb), 0.3); color: var(--muted); background: rgba(var(--accent-rgb), 0.06); border-radius: 3px }

/* ── ASTRIUM INSIGHT CARD (teal accent) ── */
.product-card.insight::after { background: radial-gradient(circle, rgba(56, 178, 172, 0.06), transparent 70%) }
.product-card.insight .product-icon-wrap { background: rgba(56, 178, 172, 0.08); border-color: rgba(56, 178, 172, 0.2) }
.product-card.insight .product-icon-wrap svg { stroke: #38b2ac }
.product-card.insight .product-features li::before { background: #38b2ac }
.product-card.insight:hover { border-color: rgba(56, 178, 172, 0.4); box-shadow: 0 12px 40px rgba(56, 178, 172, 0.06) }
.product-card.insight .product-cta { color: #38b2ac }

/* ── HAMBURGER MENU ── */
.nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: none; padding: 8px; z-index: 101 }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--bright); transition: transform .3s, opacity .3s }
nav.nav-open .nav-hamburger span:nth-child(1) { transform: rotate(45deg) translateY(7px) }
nav.nav-open .nav-hamburger span:nth-child(2) { opacity: 0 }
nav.nav-open .nav-hamburger span:nth-child(3) { transform: rotate(-45deg) translateY(-7px) }

/* ── THEME TOGGLE ── */
.theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: 1px solid var(--glass-border); border-radius: 4px; cursor: none; color: var(--muted); transition: color .2s, border-color .2s; margin-left: auto }
.theme-toggle:hover { color: var(--bright); border-color: rgba(var(--accent-rgb), .5) }

/* ── DARK THEME ── */
[data-theme="dark"] { --bg: #0f1219; --bg2: #161b26; --surface: rgba(22, 27, 38, 0.65); --surface2: rgba(30, 36, 50, 0.7); --text: #b0b8c8; --muted: #7a8599; --bright: #e8ecf2; --glass-bg: rgba(22, 27, 38, 0.55); --glass-border: rgba(60, 75, 100, 0.3); --border: rgba(80, 95, 120, 0.35) }
[data-theme="dark"] body { background: var(--bg) }
[data-theme="dark"] body::before { background-image: radial-gradient(circle at 20% 30%, rgba(140, 160, 185, 0.06) 0%, transparent 50%), radial-gradient(circle at 75% 60%, rgba(140, 160, 185, 0.04) 0%, transparent 45%), radial-gradient(circle at 50% 80%, rgba(140, 160, 185, 0.03) 0%, transparent 40%) }
[data-theme="dark"] nav { background: rgba(15, 18, 25, 0.82) }
[data-theme="dark"] .cursor { mix-blend-mode: screen }
[data-theme="dark"] .dropdown { background: rgba(22, 27, 38, 0.94) }
[data-theme="dark"] .screenshot-stat { background: rgba(22, 27, 38, 0.85) }
[data-theme="dark"] .features-section { background: rgba(22, 27, 38, 0.6) }
[data-theme="dark"] .screenshots-section { background: rgba(15, 18, 25, 0.95) }
[data-theme="dark"] .how-section { background: rgba(22, 27, 38, 0.6) }
[data-theme="dark"] .product-hero { background: linear-gradient(180deg, #0f1219 0%, var(--bg) 100%) }
[data-theme="dark"] footer { background: rgba(22, 27, 38, 0.9) }
[data-theme="dark"] .cta-band { background: var(--glass-bg) }
[data-theme="dark"] .btn-primary { background: #e8ecf2; color: #0f1219 }
[data-theme="dark"] .btn-secondary { border-color: rgba(var(--accent-rgb), 0.5); color: #e8ecf2 }
[data-theme="dark"] .nav-cta { border-color: rgba(var(--accent-rgb), 0.5); color: #e8ecf2 }
[data-theme="dark"] .nav-cta:hover { background: #e8ecf2; color: #0f1219; border-color: #e8ecf2 }
[data-theme="dark"] .form-submit { background: #e8ecf2; color: #0f1219 }

/* ── PAGE TRANSITIONS ── */
body { opacity: 0; transition: opacity .35s ease }
body.loaded { opacity: 1 }
body.page-exiting { opacity: 0 }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s ease }
.reveal.visible { opacity: 1; transform: translateY(0) }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  nav { padding: 18px 24px; flex-wrap: wrap }
  .nav-hamburger { display: flex }
  .nav-links { display: none; width: 100%; order: 10; flex-direction: column; padding: 16px 0 8px }
  nav.nav-open .nav-links { display: flex }
  .nav-links > li > a { padding: 12px 0 }
  .has-dropdown > a::after { display: none }
  nav.nav-open .dropdown { display: block; position: static; transform: none; background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; min-width: 0; padding-left: 16px }
  .nav-cta { order: 11; width: 100%; text-align: center; margin: 8px 0 0; display: none }
  nav.nav-open .nav-cta { display: block }
  .theme-toggle { margin-left: auto; margin-right: 12px }
  .section-inner { padding: 80px 24px }
  .product-hero-inner { grid-template-columns: 1fr; padding: 80px 24px }
  .features-grid, .screenshots-grid { grid-template-columns: 1fr }
  .steps-grid { grid-template-columns: 1fr 1fr }
  .cta-inner { flex-direction: column; padding: 60px 24px }
  footer { padding: 30px 24px }
}