/* Vanisher.io — full refreshed styles
   Easy to read, tidy spacing, strong contrast, smooth hovers, mobile-first */

/* ===== TOKENS (colors, sizes) ===== */
:root{
  --blue: #2B82F6;
  --cyan: #22E6E6;
  --navy: #0A0F1F;

  --ink: #EDEFF6;          /* main text */
  --ink-soft: #B8C4DA;     /* secondary text */
  --ink-dim: #8DA1C2;

  --card: rgba(255,255,255,.06);
  --bd: rgba(255,255,255,.14);

  --radius-sm: .6rem;
  --radius-md: .9rem;
  --radius-lg: 1rem;

  --shadow-1: 0 10px 28px rgba(0,0,0,.35);
  --shadow-2: 0 16px 42px rgba(0,0,0,.45);

  --container: 70rem;               /* ~1120px */
  --rail: min(var(--container), 100vw - 20rem); /* room for sidebar */
}

/* ===== RESET / BASE ===== */
*{ box-sizing: border-box }
html, body{ height:100% }
html{ font-size: 16px }              /* respects browser zoom */

/* === Floating blurred glow background === */
@keyframes glowShift {
  0%   { transform: translateY(0) scale(1);   opacity: 1;   }
  50%  { transform: translateY(-8px) scale(1.04); opacity: .9; }
  100% { transform: translateY(0) scale(1);   opacity: 1;   }
}

/* Keep the dark base static */
/* === Seamless brand background (navy base + cyan/blue glows + soft noise) === */
body{
  margin:0;
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background-color: #0A0F1F; /* solid brand navy */
  color-scheme: dark;
  line-height: 1.55;
}

/* 3 glow layers: html::before (bottom), body::before (top-left), body::after (top-right) */
html::before,
body::before,
body::after{
  content:"";
  position: fixed;         /* stick to viewport */
  inset: -12%;             /* extra room so blur doesn't clip */
  z-index: -1;             /* behind everything */
  pointer-events: none;
  background-repeat: no-repeat;
  filter: blur(42px);      /* ✨ the soft fog look */
  will-change: transform, opacity;
  animation: glowShift 22s ease-in-out infinite;
}

/* Bottom cyan mist */
html::before{
  background: radial-gradient(50rem 30rem at 50% 100%, rgba(34,230,230,0.08), transparent 80%);
  animation-delay: 10s;
}

/* Cyan top-left */
body::before{
  background: radial-gradient(40rem 32rem at 20% 15%, rgba(34,230,230,0.12), transparent 70%);
  animation-delay: 0s;
}

/* Blue top-right */
body::after{
  background: radial-gradient(36rem 28rem at 80% 20%, rgba(43,130,246,0.12), transparent 72%);
  animation-delay: 5s;
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce){
  html::before, body::before, body::after{ animation: none }
}

img{ max-width:100%; height:auto; display:block }
a{ color:#d6e6ff; text-decoration:none }
a:hover{ text-decoration:underline }

.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden;
  clip: rect(1px,1px,1px,1px); white-space:nowrap
}

/* Skip link (shows when tabbed) */
.skip-link{ position:absolute; left:-9999px; top:auto }
.skip-link:focus{
  left: .75rem; top: .75rem; z-index: 1000;
  background: #0A0F1F; color:#fff; padding:.5rem .75rem;
  border-radius: .5rem; outline: 2px dashed var(--cyan)
}

/* Keyboard focus outline */
:focus-visible{ outline: 2px dashed var(--cyan); outline-offset: 3px }

/* ===== LAYOUT: SIDEBAR & RAIL ===== */
.sidebar{
  position: fixed; inset: 0 auto 0 0; width: 17.5rem; z-index: 10;
  background: linear-gradient(180deg, rgba(10,15,31,.92), rgba(10,15,31,.78));
  border-right: 1px solid rgba(255,255,255,.10);
  display:flex; align-items:stretch;
}
.side-inner{ display:flex; flex-direction:column; gap:1rem; padding:1.25rem; width:100% }
.brand img{ display:block }
.sidenav{ display:flex; flex-direction:column; gap:.6rem; margin-top:.25rem }
.sidenav a{
  color:#cfe2ff; font-weight:600; padding:.25rem .25rem; border-radius:.4rem;
  transition: transform .2s ease, background .2s ease;
}
.sidenav a:hover{ background: rgba(255,255,255,.06) }
.side-note{ margin-top:auto; color: var(--ink-dim); font-size:.75rem }

.rail{
  margin-left: 17.5rem;
  min-height: 100svh;
  display:block;
}

/* ===== PANELS / SECTIONS ===== */
.panel{
  width: var(--rail);
  margin: 1.25rem auto;
  padding: 1.25rem;
}

.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:0 0 .75rem
}
.section-head h2{
  font-family: 'Montserrat', sans-serif; color:#F3F7FF; margin:0; font-size:1.5rem
}
.section-tag{ color: var(--ink-dim); margin:0; font-size:.9rem }

/* ===== BUTTONS ===== */
.btn{
  background: var(--blue); color:#fff; border:none;
  padding:.75rem 1rem; border-radius: var(--radius-md);
  font-weight:700; cursor:pointer;
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
  box-shadow: 0 0 0 0 rgba(43,130,246,.0);
}
.btn.small{ padding:.5rem .75rem; font-size:.9rem }
.btn:hover{ filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(43,130,246,.25) }
.btn:active{ transform: translateY(0) }
.btn:focus-visible{ outline: 2px dashed var(--cyan); outline-offset: 3px }

/* ===== HERO ===== */
.hero-panel{ margin-top: 2rem }

/* Hero box with its own cyan/blue gradient glow */
.hero-wrap{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:1.25rem; align-items:center;

  background:
    radial-gradient(60rem 40rem at 18% 30%, rgba(34,230,230,.14), transparent 60%),
    radial-gradient(48rem 36rem at 82% 40%, rgba(43,130,246,.14), transparent 65%),
    linear-gradient(135deg, #0A0F1F 0%, #081226 45%, #0F2345 100%);

  border:1px solid var(--bd);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  box-shadow: var(--shadow-1);
}

.hero-copy h1{
  font-family:'Montserrat', sans-serif; font-size:3rem; line-height:1.04;
  margin:.2rem 0 .6rem; color:#fff;
}
.hero-copy h1 span{
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  -webkit-background-clip:text; background-clip:text; color: transparent
}
.lede{ font-size:1.125rem; color:#dceaff; margin:0 0 1rem }

.hero-art img{ border-radius: .9rem; box-shadow: var(--shadow-1); max-width:100%; height:auto }

/* ===== WAITLIST FORM ===== */
.waitlist{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-start; margin-top:.5rem
}
.waitlist input[type="email"]{
  flex:1; min-width: 15rem;
  padding:.85rem 1rem; border:1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.07);
  color:#fff; outline:none;
}
.waitlist input::placeholder{ color:#c9d4ea }

/* Consent row: checkbox + text */
.waitlist label[for="consent"]{
  display:flex; gap:.6rem; align-items:flex-start; width:100%;
  line-height:1.35; color: var(--ink); font-size:.95rem; margin:.25rem 0 .25rem;
}
.waitlist #consent{
  width:1.05rem; height:1.05rem; margin-top:.15rem;
  accent-color: var(--blue);
}

/* Help, status, success */
.help{ width:100%; font-size:.85rem; color: var(--ink-soft); margin:.35rem 2px 0 }
#formStatus{
  display:block !important;
  margin-top:.4rem; font-size:.9rem; min-height:1.2rem;
  color:#eaeefc;
}
.thanks{
  background: rgba(34,230,230,.12);
  border:1px solid rgba(34,230,230,.35);
  color:#d8fffb;
  padding: .9rem 1rem;
  border-radius: .8rem;
  font-weight:600;
  text-align:center;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}

/* Make the submit button full width on narrow screens */
@media (max-width: 40rem){
  .waitlist .btn{ width:100% }
}
@media (max-width: 26rem){
  .waitlist input[type="email"]{ width:100% }
}

/* ===== FEATURE CARDS ===== */
.grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem }
.cards .card{
  background: var(--card); border:1px solid var(--bd);
  border-radius: var(--radius-md); padding:1.2rem; display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cards .card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: rgba(255,255,255,.22);
}
.card h3{
  margin:.2rem 0 .4rem;
  font-family:'Montserrat', sans-serif; color:#F1F6FF; font-size:1.2rem
}
.card p{ margin:0 }

/* ===== FAQ ===== */
.faq-col details{
  background: var(--card); border:1px solid var(--bd);
  border-radius: var(--radius-md); padding:1.1rem; margin:.8rem 0;
  transition: border-color .2s ease, background .2s ease;
}
.faq-col summary{
  cursor:pointer; font-weight:700; list-style:none; position:relative; padding-right:1.4rem; font-size:1rem
}
.faq-col summary::-webkit-details-marker{ display:none }
.faq-col summary::after{
  content:"▾"; position:absolute; right:.25rem; top:.15rem; transition: transform .2s ease; font-size:1rem; line-height:1
}
.faq-col details[open] summary::after{ transform: rotate(180deg) }

/* ===== LEGAL PAGES (privacy & terms) ===== */
.panel[aria-labelledby="privacy-title"],
.panel[aria-labelledby="terms-title"]{
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.8rem;
  box-shadow: var(--shadow-1);
  margin-top: 2rem;
}
.panel[aria-labelledby="privacy-title"] h1,
.panel[aria-labelledby="terms-title"] h1{
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  margin-bottom: .3rem;
  color: #fff;
}
.panel[aria-labelledby="privacy-title"] h2,
.panel[aria-labelledby="terms-title"] h2{
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  margin-top: 1.4rem;
  margin-bottom: .4rem;
  color: #f3f7ff;
}
.panel[aria-labelledby="privacy-title"] p,
.panel[aria-labelledby="terms-title"] p{
  margin: .6rem 0;
  color: var(--ink);
  line-height: 1.6;
}
.panel[aria-labelledby="privacy-title"] ul,
.panel[aria-labelledby="terms-title"] ul{
  margin: .6rem 0 1rem 1.2rem;
  padding: 0;
}
.panel[aria-labelledby="privacy-title"] li,
.panel[aria-labelledby="terms-title"] li{
  margin: .35rem 0;
  color: var(--ink-soft);
}
.panel[aria-labelledby="privacy-title"] .help,
.panel[aria-labelledby="terms-title"] .help{
  display:block;
  margin-top: 2rem;
  font-size: .9rem;
  text-align: center;
}

/* ===== SOCIAL ICONS (horizontal) ===== */
.social-links{
  display: flex;
  flex-direction: row;   /* line up side by side */
  flex-wrap: wrap;       /* wrap if space is tight */
  gap: .75rem;
  margin-top: .75rem;
}
.social-links img{
  width: 22px;
  height: 22px;
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease, filter .2s ease;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
.social-links img:hover{
  opacity: 1;
  transform: scale(1.1);
  filter: drop-shadow(0 2px 6px rgba(34,230,230,.25));
}
.foot-panel .social-links{           /* center in footer */
  justify-content: center;
  margin-top: .5rem;
}
.sidebar .social-links{              /* left-align in sidebar */
  justify-content: flex-start;
}

/* ===== FOOTER ===== */
.foot-panel{
  color:#BAC6E0; border-top:1px solid rgba(255,255,255,.10);
  padding-top:1rem; text-align:center;
}
.foot-panel a{ color:#cfe2ff }
.foot-panel a:hover{ text-decoration:underline }

/* ===== RESPONSIVE ===== */
@media (max-width: 62rem){             /* ~992px */
  .sidebar{ position: static; width:auto; border-right:0 }
  .rail{ margin-left:0 }
  .panel{ width: min(100%, 45rem) }
  .hero-wrap{ grid-template-columns: 1fr }
  .hero-copy h1{ font-size: 2.5rem }
  .grid-3{ grid-template-columns: 1fr }
  .side-inner{ gap:1.1rem }
  .sidenav a{ padding:.35rem .4rem }
}

@media (max-width: 26rem){             /* small phones */
  html{ font-size: 15px }
  .panel{ padding: 1rem }
  .chips{ gap:.4rem }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
  html::before, body::before, body::after{ animation: none !important }
}

/* ===== PRINT ===== */
@media print{
  body{ color: #000; background: #fff }
  .sidebar{ display:none }
  .rail{ margin:0; width:100% }
  .panel{ width:100%; box-shadow:none; border:none }
}