:root{
  --bg: #0b0f14;
  --bg-2: #11161c;
  --text: #e6ffff;
  --muted: #b9d9e6;
  --accent: #2ff0e0;       /* turquoise */
  --accent-2: #8a1b2b;     /* maroon */
  --surface: rgba(12,18,23,.28);
  --surface-2: rgba(12,18,23,.34);
  --card: rgba(8,14,20,.28);
  --shadow: 0 8px 28px rgba(0,0,0,.25);
  --radius: 14px;
  --ring: 0 0 0 3px rgba(47,240,224,.65);
}
*{box-sizing:border-box}
html,body{height:100%}
html{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial}
body{margin:0; color:var(--text); background: linear-gradient(#0b0f14, #0b0f14 60%, #11161c);
  min-height:100dvh; position:relative; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
:root{color-scheme: dark}

 /* Layered background: turquoise glow + scanlines */
body::before{
  content:"";
  position: fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(circle at 20% 15%, rgba(0,255,230,.28) 0 12%, transparent 40%),
    radial-gradient(circle at 75% 25%, rgba(0,180,170,.18) 0 28%, transparent 40%),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.65));
  mix-blend-mode: screen;
  filter: saturate(110%);
}
body::after{
  content:"";
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(to right, rgba(0,0,0,.04) 0 1px, transparent 1px 2px);
  opacity:.65; mix-blend-mode: overlay;
}

/* Layout helpers */
.container{ width:100%; max-width: clamp(320px, 92vw, 1100px); padding:0 1rem; margin:0 auto; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1rem; }
.card{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:.75rem; }

/* Glass panels (fallback plus backdrop) */
header, main, footer, aside{ background: rgba(8,12,16,.28); border:1px solid rgba(255,255,255,.25);
  border-radius: var(--radius); padding:1rem; margin: .75rem auto; max-width: calc(100% - 2rem);
  box-shadow: var(--shadow);
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))){
  header, main, footer, aside{ backdrop-filter: blur(12px) saturate(115%);
    -webkit-backdrop-filter: blur(12px) saturate(115%); }
}
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))){
  header, main, footer, aside{ background: rgba(8,12,16,.60); }
}

/* Header hero typography */
header{ text-align:center; padding:1.25rem 1rem 0.75rem; }
header h1{ margin:0; font-size: clamp(1.6rem, 4vw, 2.8rem); line-height:1.15; letter-spacing:.2px;
  color:#eaffff; font-weight:800;
}
header p{ margin: .25rem 0 0; color: var(--muted); font-size: clamp(0.95rem, 2vw, 1.05rem); }

/* Main content and image frame */
main{ display:block; }
article{ margin:0 auto; padding:0; }
.image-frame{ width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:12px;
  border:1px solid rgba(255,255,255,.25); background:#000; box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Content utility (present for completeness per selectors) */
.content{ padding:0.75rem 0; color:var(--muted); }

/* Product ad / footer sections */
.product-ad{ display:block; text-align:center; padding:.6rem 0; }
.product-ad a{ display:block; padding:.6rem 1rem; border-radius:999px;
  color:var(--text); text-decoration:none;
  background: rgba(22,240,224,.18); border:1px solid rgba(22,240,224,.55);
  transition: transform .2s ease, background .2s ease;
}
.product-ad a:hover{ transform: translateY(-1px); background: rgba(22,240,224,.28); }
.product-ad a:focus-visible{ outline:none; box-shadow: var(--ring); }

/* Footer copy & sponsor links */
footer{ text-align:center; padding:0.75rem 1rem; }

/* Typography helpers */
ul, li{ margin:0; padding:0; list-style: none; }
.tag{ display:inline-block; padding:.15em .55em; border-radius:999px; font-size:.75rem;
  background: rgba(20,240,224,.15); border:1px solid rgba(20,240,224,.45); color:#eaffff;
}
a, button, .btn, .cta{ color:var(--text); text-decoration:none; cursor: pointer; font-weight:600; }
a:hover, a:focus{ text-decoration: underline; color:#b6fff0; }

/* Buttons (solid & outline variants) */
.btn{ display:inline-block; padding:.75rem 1rem; border-radius:8px;
  border:1px solid rgba(255,255,255,.4); background: rgba(20,240,224,.28);
  color:#041414; text-align:center; text-decoration:none; transition: transform .25s ease, background .25s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(20,240,224,.38); }
.btn:active{ transform: translateY(0); }
.btn--primary{ background: linear-gradient(135deg, rgba(20,240,224,.95), rgba(20,240,224,.75));
  color:#041414; border-color: rgba(255,255,255,.6);
}
.btn--outline{ background: transparent; color:var(--text);
  border:1px solid rgba(20,240,224,.75);
}
.cta{ display:inline-block; padding:.75rem 1rem; border-radius:8px;
  border:1px solid rgba(255,255,255,.4); background: rgba(20,240,224,.28);
  color:#041414; text-decoration:none; font-weight:700; }

/* Lists and grid helpers */
ul{ padding-left:1rem; }
li{ margin:.25rem 0; }

/* Responsive tweaks */
@media (min-width: 760px){
  .container{ padding:0 1.25rem; }
}
@media (prefers-color-scheme: light){
  :root{ --bg: #f5fbff; --bg-2: #eef4f9; --text: #0b1b24; --muted:#345067;
    --surface: rgba(255,255,255,.9); --surface-2: rgba(255,255,255,.95); }
  body{ background: #f7fbff; color:var(--text); }
  header, main, footer, aside{ background: rgba(255,255,255,.92); border-color: rgba(0,0,0,.12); }
  .image-frame{ border-color: rgba(0,0,0,.15); }
  .btn{ background: rgba(0,0,0,.05); color:#0b1b24; }
  a{ color:#0a4a58; }
  a:hover, a:focus{ text-decoration: underline; }
}

/* Print styles (basic readability) */
@media print{
  body{ background:#fff; color:#000; }
  header, main, footer{ background:#fff; border:0; border-radius:0; box-shadow:none; }
  a{ text-decoration: underline; }
}
 /* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}