/* mainpage.css
   Modern cyber / crypto look — neon accents, layered shadows, glass panels.
   Uses CSS variables so you can tweak the palette easily.
*/

/* -------------------------
   Variables & base
   ------------------------- */
:root{
  --bg: #061326;
  --panel: rgba(20,30,44,0.75);
  --muted: #94a3b8;
  --accent: #6effd6;   /* neon crypto accent */
  --accent-2: #ff6b6b; /* secondary neon */
  --glass-border: rgba(255,255,255,0.04);
  --glass-shadow: 0 8px 30px rgba(6,19,38,0.7);
  --card-shadow: 0 10px 30px rgba(14,24,40,0.7);
  --text: #e9f3ff;
  --rounded: 12px;
  --max-width: 1100px;
}

/* Reset */
* { box-sizing: border-box; margin:0; padding:0; }
html,body { height:100%; }
body{
  font-family: "Inter", "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 400px at 10% 10%, rgba(110,255,214,0.04), transparent),
              radial-gradient(900px 300px at 90% 90%, rgba(255,107,107,0.03), transparent),
              var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.55;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  scroll-behavior:smooth;
}

/* utility */
.container { max-width: var(--max-width); margin:0 auto; padding:0 20px; }

/* -------------------------
   Header
   ------------------------- */
.site-header {
  position: sticky;
  top:0;
  z-index:1200;
  background: linear-gradient(180deg, rgba(6,19,38,0.65), rgba(6,19,38,0.45));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 6px 30px rgba(2,8,23,0.6);
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 24px;
  max-width: var(--max-width);
  margin:0 auto;
}

/* Logo with glow layers */
.logo{
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  position:relative;
  font-weight:800;
  letter-spacing:0.6px;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
.logo:hover{
  transform: scale(1.05);
  filter: brightness(1.1);
}
.logo-core{
  font-size:1.4rem;
  color:var(--accent-2);
  mix-blend-mode:screen;
  text-shadow:
    0 2px 8px rgba(255,107,107,0.08),
    0 0 12px rgba(255,107,107,0.06),
    0 0 20px rgba(255,107,107,0.04);
  font-family: "Space Grotesk", monospace;
  font-weight: 900;
}
.logo-glow{
  position:absolute;
  left:0;
  top:0;
  transform:translate(4px,4px) scale(1.02);
  color:var(--accent);
  opacity:0.18;
  filter: blur(6px);
  pointer-events:none;
}

/* Nav */
.nav { display:flex; align-items:center; gap:12px; }
.nav-list { list-style:none; display:flex; gap:12px; align-items:center; margin-left:2px; }
.nav-list a {
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  font-size:0.98rem;
  padding:8px 10px;
  border-radius:8px;
  transition: color .18s ease, background .18s ease, transform .15s ease;
}
.nav-list a:hover, .nav-list a:focus {
  color:var(--accent);
  transform:translateY(-2px);
  outline: none;
}
.nav-list a.active {
  color:var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent-2);
}

/* hamburger (mobile) */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  width:44px;
  height:44px;
  border-radius:8px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.hamburger{
  width:18px;
  height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  position:relative;
  display:block;
  border-radius:2px;
}
.hamburger::before, .hamburger::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:inherit;
  border-radius:2px;
}
.hamburger::before{ top:-6px; }
.hamburger::after{ top:6px; }

/* header controls (accent toggle) */
.header-controls { display:flex; align-items:center; gap:8px; }
.accent-toggle{
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.03);
  padding:8px 10px;
  border-radius:9px;
  cursor:pointer;
  color:var(--muted);
  font-weight:700;
}
.accent-toggle:hover { color:var(--text); transform:translateY(-2px); }

/* -------------------------
   Hero
   ------------------------- */
.hero{
  position:relative;
  margin-top:28px;
  padding:48px 0 60px 0;
  overflow:visible;
}
.hero-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
}
.hero-title{
  font-size:clamp(1.6rem, 3.6vw, 2.6rem);
  line-height:1.05;
  color:var(--accent);
  letter-spacing: -0.6px;
  margin-bottom:6px;
  text-shadow: 0 8px 40px rgba(110,255,214,0.06);
}
.hero-sub{
  color:var(--muted);
  max-width:780px;
  font-size:1.02rem;
}

/* CTA buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  border:0;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background: linear-gradient(90deg,var(--accent), var(--accent-2));
  color:#061326;
  box-shadow: 0 8px 30px rgba(110,255,214,0.08), 0 14px 50px rgba(255,107,107,0.03);
}
.btn-ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,0.04);
  color:var(--text);
}

/* neon rings */
.neon-rings{
  position:absolute;
  right:6%;
  top:0;
  width:420px;
  height:420px;
  border-radius:50%;
  pointer-events:none;
  filter: blur(22px) saturate(1.2);
  background:
    radial-gradient(circle at 30% 30%, rgba(110,255,214,0.06), transparent 20%),
    conic-gradient(from 120deg at 50% 50%, rgba(255,107,107,0.02), transparent 15%),
    radial-gradient(circle at 65% 70%, rgba(255,107,107,0.03), transparent 25%);
  transform: translateY(-30px) scale(1);
  opacity:0.9;
}

/* -------------------------
   Panels / sections
   ------------------------- */
.panel{
  margin:32px auto;
  width: min(92%, 960px);
  border-radius: var(--rounded);
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(8,18,30,0.5));
  box-shadow: var(--card-shadow);
  overflow:hidden;
}
.panel--glass { padding:28px; }
.panel h2{ color:var(--accent-2); margin-bottom:10px; font-size:1.25rem; }
.panel p{ color:var(--muted); margin-bottom:8px; }

/* grid cards */
.panel-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; align-items:stretch; }
.panel-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  padding:18px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.02);
  box-shadow: 0 6px 18px rgba(8,18,28,0.6);
}
.panel-card h3{ color:var(--accent); margin-bottom:6px; font-size:1.05rem; }
.panel-card p{ color:var(--muted); font-size:0.95rem; }

/* features list */
.features{ margin-top:12px; list-style:none; padding-left:0; color:var(--text); }
.features li{ margin:10px 0; padding-left:12px; position:relative; }
.features li::before{
  content:"";
  width:8px; height:8px; border-radius:50%;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  position:absolute; left:0; top:10px;
  box-shadow: 0 6px 20px rgba(110,255,214,0.06);
}

/* product demo */
.product-demo{ margin-top:18px; display:flex; gap:16px; }
.product-card{ display:flex; gap:14px; align-items:center; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,0.03); background:rgba(10,20,34,0.35); }
.product-media{ font-size:30px; width:68px; height:68px; display:flex; align-items:center; justify-content:center; border-radius:8px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); }
.product-body h4{ margin-bottom:6px; }
.muted{ color:var(--muted); font-size:0.95rem; }

/* -------------------------
   Footer
   ------------------------- */
.site-footer{
  margin-top:auto;
  padding:26px 20px;
  border-top:1px solid rgba(255,255,255,0.02);
  background:linear-gradient(180deg, rgba(6,19,38,0.2), rgba(6,19,38,0.25));
}
.footer-inner{ max-width:var(--max-width); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.footer-links a{ color:var(--muted); margin-left:12px; text-decoration:none; font-weight:600; }

/* -------------------------
   Modal
   ------------------------- */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(3,6,12,0.6); visibility:hidden; opacity:0; transition:opacity .18s ease, visibility .18s; z-index:1400; }
.modal[aria-hidden="false"]{ visibility:visible; opacity:1; }
.modal-panel{ width:min(760px,95%); background: linear-gradient(180deg, rgba(18,28,44,0.98), rgba(9,15,26,0.98)); border-radius:12px; border:1px solid rgba(255,255,255,0.03); overflow:hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.7); }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.02); }
.modal-body{ padding:18px; color:var(--muted); }
.modal-footer{ padding:12px 18px; text-align:right; }

/* -------------------------
   Back to top
   ------------------------- */
.back-to-top{
  position:fixed; right:20px; bottom:20px; width:44px; height:44px; border-radius:10px; border:0; cursor:pointer;
  display:inline-grid; place-items:center; font-weight:800; background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#041724; box-shadow: 0 10px 30px rgba(110,255,214,0.08);
  transform:translateY(8px); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .15s ease;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* -------------------------
   Reveal animation helper
   ------------------------- */
.reveal{ opacity:0; transform: translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

/* -------------------------
   Responsive
   ------------------------- */
/* Offset anchors so sticky header doesn't cover section tops */
main section[id]{ scroll-margin-top: 90px; }
@media (max-width: 900px){
  .panel-grid{ grid-template-columns: repeat(2,1fr); }
  .nav-list{ gap:12px; }
}
@media (max-width: 650px){
  .panel-grid{ grid-template-columns: 1fr; }
  .hero-inner{ align-items:flex-start; }
  .nav-list{ display:none; position:absolute; right:20px; top:64px; flex-direction:column; background: rgba(6,19,38,0.98); padding:12px; border-radius:10px; width:220px; border:1px solid rgba(255,255,255,0.03); }
  .nav-toggle{ display:inline-flex; }
  .nav.open .nav-list{ display:flex; }
}