/* Base & Tokens */
:root{
  --bg: #062626;           /* deep teal backdrop */
  --bg-2: #0b4d49;         /* teal accent layer */
  --text: #e9e0c8;          /* beige text for contrast */
  --muted: #c7b49a;         /* beige-muted */
  --accent: #2bd6c2;        /* teal/cyan accent */
  --accent-2: #d7c7a8;      /* warm beige accent */
  --glass: rgba(255,255,255,.08);
  --glass-2: rgba(255,255,255,.14);
  --border: rgba(255,255,255,.28);
  --shadow: 0 6px 20px rgba(0,0,0,.25);
  --radius: 12px;
}

*,*:before,*:after{ box-sizing: border-box; }

html, body, header, nav, main, article, footer, aside{
  height: auto;
}

html, body { height: 100%; }

html { line-height: 1.4; }

body{
  margin:0;
  min-height:100dvh;
  color:var(--text);
  font-family: ui-systems, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: clamp(14px, 0.9vw + 12px, 18px);
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg) 100%);
  /* Starfield + subtle stripes (no external assets) */
  background-image:
    radial-gradient(circle at 15px 25px, rgba(0,255,210,.35) 0 1px, transparent 1px),
    radial-gradient(circle at 80px 120px, rgba(0,255,210,.25) 0 2px, transparent 2px),
    radial-gradient(circle at 200px 60px, rgba(0,255,210,.22) 0 2px, transparent 2px),
    linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg) 100%);
  background-blend-mode: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  isolation: isolate;
}
body::before{
  content:"";
  position: fixed;
  inset:0;
  pointer-events: none;
  /* gentle star flicker feel */
  background-image: radial-gradient(circle at 2px 2px, rgba(0,255,230,.6) 0 1px, transparent 1px),
                    radial-gradient(circle at 20px 60px, rgba(0,255,230,.4) 0 2px, transparent 2px),
                    radial-gradient(circle at 60px 20px, rgba(0,255,230,.3) 0 1px, transparent 1px);
  background-size: 80px 80px, 120px 120px, 160px 160px;
  opacity:.25;
  filter: saturate(115%);
  transform: translateZ(0);
  z-index:0;
}
body::after{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  /* subtle scanlines for a cyberpunk vibe */
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.04) 0 1px,
    transparent 1px 2px
  );
  mix-blend-mode: overlay;
  opacity:.45;
  z-index: -1;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.1) 60%, rgba(0,0,0,0));
}

/* Layout helpers */
.container{ width: min(1100px, 92%); margin-inline: auto; }

.grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; }

.card{ background: var(--glass); border:1px solid var(--border); border-radius: var(--radius); padding:1rem; box-shadow: var(--shadow); }

/* Section structure */
header, nav, main, article, aside, footer{ padding: .75rem 0; }
header{ padding-top: clamp(1rem, 2vw, 2rem); padding-bottom: .5rem; text-align: center; position: relative; z-index:1; }
main{ padding: 0; }
footer{ padding-top: 1rem; text-align: center; }

/* Typography & hero style */
header h1{
  font-size: clamp(1.8rem, 2.5vw + 1rem, 4rem);
  line-height: 1.08;
  margin: .25rem 0 0.4rem;
  letter-spacing:.5px;
  color: var(--text);
  text-shadow: 0 2px 20px rgba(0,0,0,.25);
}
header .meta{
  font-size: clamp(.9rem, 0.8vw + .8rem, 1.1rem);
  color: var(--muted);
  margin-top:.25rem;
}
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }
a:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; border-radius:4px; }

/* Image frame with aspect & glow (also targets .image-frame) */
.image-frame, .content img{ border-radius: 12px; overflow:hidden; }
.image-frame{ aspect-ratio: 16 / 9; border: 1px solid rgba(255,255,255,.28); box-shadow: 0 8px 24px rgba(0,0,0,.25); background:#000; display:block; margin: 1rem auto; max-width: 100%; }
.image-frame img{ width:100%; height:100%; object-fit: cover; display:block; }

/* Glass panels (fallback included) */
.glass, .product-ad{ background: var(--glass); border:1px solid var(--border); border-radius: var(--radius); padding: .9rem; box-shadow: var(--shadow); }
@supports not (backdrop-filter: blur(8px)){
  .glass, .product-ad{ background: rgba(255,255,255,.18); }
}
.backdrop{ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Buttons & CTAs */
.btn, .cta, button{ display:inline-block; font-weight:600; border-radius:999px; padding:.75rem 1rem; border:1px solid rgba(255,255,255,.35); color:var(--text); background: rgba(0,0,0,.15); cursor:pointer; transition: transform .15s ease, background .2s ease, color .2s ease; text-align:center; text-decoration:none; }
.btn:hover, .cta:hover{ transform: translateY(-1px); }
.btn:focus-visible, .cta:focus-visible, button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Primary vs outline variants */
.btn.primary{ background: linear-gradient(135deg, rgba(45,210,214,.95), rgba(0,180,180,.95)); border-color: rgba(200,255,255,.8); color:#041b1b; }
.btn.outline{ background: transparent; border-color: rgba(255,255,255,.6); color: var(--text); }

/* Content area helpers */
.content{ padding: .5rem 0 1rem; }
ul{ padding-left: 1.25rem; margin: .5rem 0; }
li{ margin:.25rem 0; }

/* Product ad / aside styling */
.product-ad{ display: inline-block; min-width: 260px; margin: .25rem; }
.product-ad a{ display:flex; align-items:center; justify-content:center; padding: .75rem; text-decoration:none; }
.product-ad p{ margin:0; font-weight:700; }

/* Section wrappers inside article for semantic sections */
article section{ margin: .75rem 0; padding: .25rem 0; }

/* Utility helpers (compact) */
.tag{ display:inline-block; padding:.25rem .5rem; border-radius:999px; font-size:.75rem; background: rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.25); color:var(--muted); }

/* Layout tweaks for content flow on small devices */
@media (max-width: 700px){
  .container{ width: min(92%, 760px); }
  .product-ad{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* Print styles (basic readability) */
@media print{
  body{ background: #fff; color: #000; }
  a{ color: #000; text-decoration: underline; }
  .glass{ background: rgba(255,255,255,1); border: 1px solid #000; box-shadow:none; }
}