@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400&family=Playfair+Display:ital@1&display=swap');

/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  background:#0d0d0d;
  color:#e0e0e0;
  font-family:'Inter',system-ui,sans-serif;
  font-size:1rem;
  line-height:1.7;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:#bf80ff;text-decoration:none;transition:color .2s}
a:hover{color:#ff00ff}
img{max-width:100%;height:auto;display:block}
ul,ol,menu{list-style:none}
h1,h2,h3,h4{line-height:1.2;font-weight:800}
h1{font-family:'Playfair Display',Georgia,serif;font-style:italic}
time{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:#8000ff;opacity:.9}

/* ===== CSS VARIABLES ===== */
:root{
  --c-bg:#0d0d0d;
  --c-primary:#8000ff;
  --c-accent:#ff00ff;
  --c-text:#e0e0e0;
  --c-muted:#888;
  --c-glass:rgba(128,0,255,.08);
  --c-glass-border:rgba(128,0,255,.35);
  --radius:18px;
  --max-w:1200px;
  --col-gap:2rem;
}

/* ===== SCANLINES OVERLAY ===== */
.scanlines{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,.18) 3px,
    rgba(0,0,0,.18) 4px
  );
  opacity:.45;
}

/* ===== HEADER ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(13,13,13,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-glass-border);
}
.header-bar{
  background:linear-gradient(90deg,var(--c-primary),var(--c-accent));
  padding:.25rem 1.5rem;
  overflow:hidden;
}
.announce-ticker{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  color:#fff;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  animation:ticker 20s linear infinite;
}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-30%)}}
.header-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem 1.5rem;
  gap:1rem;
}
.brand-mark{
  display:flex;
  align-items:center;
  flex-shrink:0;
  min-height:40px;
}
.logo-text{
  font-family:'JetBrains Mono',monospace;
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:-.02em;
}
.logo-img{max-height:40px;width:auto}
.neon-text{
  color:var(--c-primary);
  text-shadow:0 0 8px var(--c-primary),0 0 20px var(--c-accent);
}

/* ===== HAMBURGER / DETAILS NAV ===== */
.nav-drawer{position:relative}
.nav-drawer summary{list-style:none}
.nav-drawer summary::-webkit-details-marker{display:none}
.hamburger{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:30px;
  height:22px;
  cursor:pointer;
  padding:0;
  min-height:40px;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.hamburger span{
  display:block;
  width:28px;
  height:2px;
  background:var(--c-primary);
  box-shadow:0 0 6px var(--c-primary);
  transition:transform .3s,opacity .3s;
  flex-shrink:0;
}
.nav-drawer[open] .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-drawer[open] .hamburger span:nth-child(2){opacity:0}
.nav-drawer[open] .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.fullscreen-menu{
  position:fixed;
  inset:0;
  z-index:999;
  background:rgba(13,13,13,.97);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  padding:2rem;
  backdrop-filter:blur(20px);
  border:1px solid var(--c-glass-border);
  animation:menuIn .25s ease;
}
@keyframes menuIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.fullscreen-menu li a{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(1rem,3vw,1.4rem);
  color:var(--c-text);
  letter-spacing:.08em;
  padding:.6rem 1.2rem;
  display:block;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:8px;
  transition:all .2s;
}
.fullscreen-menu li a:hover{
  color:var(--c-accent);
  border-color:var(--c-accent);
  text-shadow:0 0 12px var(--c-accent);
}

/* ===== MAIN LAYOUT ===== */
main{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:var(--col-gap);
  max-width:var(--max-w);
  margin:0 auto;
  padding:2rem 1.5rem 3rem;
  align-items:start;
}
section{min-width:0}

/* ===== GLASS CARD ===== */
.glass{
  background:var(--c-glass);
  border:1px solid var(--c-glass-border);
  border-radius:var(--radius);
  backdrop-filter:blur(8px);
  transition:border-color .2s,box-shadow .2s;
}
.glass:hover{
  border-color:var(--c-accent);
  box-shadow:0 0 18px rgba(255,0,255,.18);
}

/* ===== HERO (HOME) ===== */
.hero-section{
  position:relative;
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:4rem 1.5rem 3rem;
  overflow:hidden;
  margin-bottom:3rem;
}
.hero-bg-text{
  position:absolute;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(120px,22vw,280px);
  font-weight:700;
  font-style:italic;
  color:transparent;
  -webkit-text-stroke:1px rgba(128,0,255,.15);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  letter-spacing:-.04em;
}
.hero-content{
  position:relative;
  z-index:1;
  max-width:760px;
}
.hero-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-accent);
  text-shadow:0 0 10px var(--c-accent);
  margin-bottom:.75rem;
}
.glitch-title{
  font-size:clamp(2.2rem,6vw,5rem);
  margin-bottom:1.2rem;
  position:relative;
  color:#fff;
  text-shadow:0 0 20px rgba(128,0,255,.5);
  animation:glitch 5s infinite;
}
@keyframes glitch{
  0%,94%,100%{text-shadow:0 0 20px rgba(128,0,255,.5)}
  95%{text-shadow:-3px 0 var(--c-accent),3px 0 var(--c-primary);transform:skewX(-2deg)}
  97%{text-shadow:3px 0 var(--c-accent),-3px 0 var(--c-primary);transform:skewX(2deg)}
}
.hero-sub{
  font-size:1.1rem;
  color:var(--c-muted);
  margin-bottom:2rem;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}

/* ===== PAGE HERO (inner pages) ===== */
.page-hero,.ranking-hero,.compare-hero-section,.about-hero-section,.faq-hero,.privacy-hero,.review-header-section{
  position:relative;
  min-height:38vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:3rem 0 2rem;
  overflow:hidden;
  margin-bottom:2.5rem;
  border-bottom:1px solid var(--c-glass-border);
}
.page-hero-bg-text{
  position:absolute;
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(60px,14vw,160px);
  font-weight:700;
  color:transparent;
  -webkit-text-stroke:1px rgba(128,0,255,.12);
  top:50%;
  left:0;
  transform:translateY(-50%);
  pointer-events:none;
  user-select:none;
  letter-spacing:-.04em;
}
.page-hero-content{position:relative;z-index:1}
.page-date{
  display:inline-block;
  margin-top:.5rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;
  color:var(--c-primary);
}

/* ===== REVIEW HEADER ===== */
.review-meta-row{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.75rem;
}
.review-meta-row time{font-size:.75rem}
.review-hero-wrap{margin-top:1.5rem;border-radius:var(--radius);overflow:hidden}
.review-hero-img{width:100%;object-fit:cover;max-height:360px}

/* ===== SECTIONS ===== */
.index-section,.content-section,.ranking-tabs,.related-reviews,.about-links-section,.faq-nav-section{
  margin-bottom:3rem;
}
.index-section h2,.content-section h2{
  font-size:clamp(1.5rem,3vw,2.2rem);
  color:#fff;
  margin-bottom:.5rem;
  text-shadow:0 0 12px rgba(128,0,255,.3);
}

/* ===== SUBTITLE (h2+p.subtitle) ===== */
.subtitle{
  color:var(--c-muted);
  font-size:.95rem;
  margin-bottom:1.5rem;
}

/* ===== TAG ===== */
.tag-neon{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:.65rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--c-accent);
  border:1px solid var(--c-accent);
  padding:.2rem .6rem;
  border-radius:4px;
  text-shadow:0 0 8px var(--c-accent);
  box-shadow:0 0 8px rgba(255,0,255,.15);
}

/* ===== CARD LIST ===== */
.card-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.card{
  border-radius:var(--radius);
}
.card a{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.1rem 1.4rem;
  color:var(--c-text);
  transition:all .2s;
  border-radius:var(--radius);
}
.card a:hover{color:#fff;background:rgba(128,0,255,.12)}
.card-num{
  font-family:'JetBrains Mono',monospace;
  font-size:1.6rem;
  font-weight:700;
  color:var(--c-primary);
  opacity:.7;
  min-width:2.5rem;
  line-height:1;
}
.card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.card-body strong{font-size:1rem;color:#fff}
.card-body small{font-size:.82rem;color:var(--c-muted)}
.card-arrow{
  font-size:1.2rem;
  color:var(--c-primary);
  opacity:.6;
  transition:transform .2s,opacity .2s;
}
.card a:hover .card-arrow{transform:translateX(4px);opacity:1;color:var(--c-accent)}

/* ===== STAGGER ANIMATION ===== */
.stagger-item{
  opacity:0;
  transform:translateY(20px);
  animation:staggerIn .5s ease forwards;
}
.stagger-item:nth-child(1){animation-delay:.05s}
.stagger-item:nth-child(2){animation-delay:.12s}
.stagger-item:nth-child(3){animation-delay:.19s}
.stagger-item:nth-child(4){animation-delay:.26s}
.stagger-item:nth-child(5){animation-delay:.33s}
.stagger-item:nth-child(6){animation-delay:.4s}
@keyframes staggerIn{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .stagger-item{animation:none;opacity:1;transform:none}
  .glitch-title{animation:none}
  .announce-ticker{animation:none}
}

/* ===== TABS ===== */
.tab-row{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  padding-bottom:1rem;
}
.tab-link{
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;
  letter-spacing:.08em;
  padding:.45rem 1rem;
  border:1px solid var(--c-glass-border);
  border-radius:6px;
  color:var(--c-muted);
  min-height:40px;
  display:flex;
  align-items:center;
  transition:all .2s;
}
.tab-link:hover,.tab-link.active{
  color:var(--c-accent);
  border-color:var(--c-accent);
  text-shadow:0 0 8px var(--c-accent);
  background:rgba(255,0,255,.06);
}

/* ===== PROSE ===== */
.prose{
  max-width:72ch;
  font-size:1rem;
  line-height:1.8;
  color:#ccc;
}
.prose h2{
  font-size:1.5rem;
  color:#fff;
  margin:2rem 0 .6rem;
  text-shadow:0 0 10px rgba(128,0,255,.25);
}
.prose h3{
  font-size:1.2rem;
  color:#ddd;
  margin:1.5rem 0 .5rem;
}
.prose p{margin-bottom:1.1rem}
.prose ul,.prose ol{margin:.8rem 0 1rem 1.5rem;list-style:initial}
.prose ol{list-style:decimal}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--c-accent)}
.prose strong{color:#fff}
.prose blockquote{
  border-left:3px solid var(--c-primary);
  padding:.6rem 1.2rem;
  margin:1rem 0;
  background:rgba(128,0,255,.06);
  border-radius:0 8px 8px 0;
  color:var(--c-muted);
  font-style:italic;
}
.prose table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.9rem}
.prose th{background:rgba(128,0,255,.15);color:#fff;padding:.6rem 1rem;text-align:left;border:1px solid var(--c-glass-border)}
.prose td{padding:.55rem 1rem;border:1px solid rgba(128,0,255,.15);color:#ccc}
.prose tr:nth-child(even) td{background:rgba(128,0,255,.04)}
.prose code{
  font-family:'JetBrains Mono',monospace;
  font-size:.85em;
  background:rgba(128,0,255,.15);
  padding:.15em .4em;
  border-radius:4px;
  color:var(--c-accent);
}
.prose pre{
  background:rgba(0,0,0,.5);
  border:1px solid var(--c-glass-border);
  border-radius:8px;
  padding:1rem;
  overflow-x:auto;
  margin:1rem 0;
}
.legal-prose{max-width:80ch}

/* ===== BUTTONS ===== */
.btn-neon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.7rem 1.8rem;
  background:transparent;
  border:2px solid var(--c-primary);
  border-radius:8px;
  color:var(--c-primary);
  font-family:'JetBrains Mono',monospace;
  font-size:.85rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  text-shadow:0 0 8px var(--c-primary);
  box-shadow:0 0 12px rgba(128,0,255,.2),inset 0 0 12px rgba(128,0,255,.05);
  transition:all .2s;
  min-height:44px;
}
.btn-neon:hover{
  background:rgba(128,0,255,.15);
  border-color:var(--c-accent);
  color:var(--c-accent);
  text-shadow:0 0 12px var(--c-accent);
  box-shadow:0 0 24px rgba(255,0,255,.3),inset 0 0 12px rgba(255,0,255,.08);
}
.btn-sm{padding:.5rem 1.2rem;font-size:.78rem;min-height:40px}

/* ===== SIDEBAR ===== */
.sidebar{
  position:sticky;
  top:80px;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.sidebar-widget{
  padding:1.4rem;
  border-radius:var(--radius);
}
.sidebar-widget h3{
  font-size:.95rem;
  font-family:'JetBrains Mono',monospace;
  color:var(--c-primary);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:.9rem;
  text-shadow:0 0 8px rgba(128,0,255,.4);
}
.sidebar-links{display:flex;flex-direction:column;gap:.5rem}
.sidebar-links li a{
  font-size:.88rem;
  color:var(--c-muted);
  padding:.3rem 0;
  min-height:36px;
  display:flex;
  align-items:center;
  border-bottom:1px solid rgba(128,0,255,.08);
  transition:color .2s,padding-left .2s;
}
.sidebar-links li:last-child a{border-bottom:none}
.sidebar-links li a:hover{color:var(--c-accent);padding-left:6px}
.sidebar-widget p{font-size:.85rem;color:var(--c-muted);line-height:1.6}
.sidebar-widget p a{color:var(--c-primary)}

/* ===== FOOTER ===== */
.site-footer{
  border-top:1px solid var(--c-glass-border);
  padding:2.5rem 1.5rem 1.5rem;
  max-width:var(--max-w);
  margin:0 auto;
}
.footer-cta{
  text-align:center;
  padding:2rem;
  margin-bottom:2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}
.footer-cta p{color:var(--c-muted);font-size:1rem}
.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(128,0,255,.1);
}
.footer-brand a{
  font-family:'JetBrains Mono',monospace;
  font-size:.95rem;
}
.footer-nav{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
}
.footer-nav a{
  font-size:.85rem;
  color:var(--c-muted);
  min-height:40px;
  display:flex;
  align-items:center;
  transition:color .2s;
}
.footer-nav a:hover{color:var(--c-accent)}
.footer-copy small{
  font-size:.75rem;
  color:rgba(136,136,136,.6);
  font-family:'JetBrains Mono',monospace;
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  main{
    grid-template-columns:1fr;
  }
  .sidebar{
    position:static;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
  }
}
@media(max-width:600px){
  main{padding:1.5rem 1rem 2rem}
  .hero-section{min-height:60vh;padding:3rem 1rem 2rem}
  .sidebar{grid-template-columns:1fr}
  .footer-row{flex-direction:column;align-items:flex-start}
  .footer-nav{gap:1rem}
  .tab-row{gap:.4rem}
  .fullscreen-menu{padding:1.5rem 1rem}
  .site-footer{padding:2rem 1rem 1rem}
  .prose table{font-size:.8rem}
  .prose th,.prose td{padding:.4rem .6rem}
}
@media(max-width:375px){
  .glitch-title{font-size:1.8rem}
  .hero-bg-text{font-size:100px}
}

/* ===== SCROLL REVEAL ===== */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s ease,transform .5s ease;
}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}