/* Tokens & Theme */
:root{
  --bg: #0a0f14;
  --bg-2: #0b1620;
  --bg-3: #0a1a23;
  --text: #e6feff;
  --muted: #a8b5c2;
  --accent: #2ff2e0;
  --accent-2: #70e0dc;
  --card: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.28);
  --shadow: 0 8px 22px rgba(0,0,0,.32);
}

/* Section: Base & Layout */
*{box-sizing:border-box}
html,body{height:100%}
html{font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--text);
  background: linear-gradient(135deg, var(--bg), var(--bg-2) 60%, var(--bg-3));
  background-image: linear-gradient(135deg, rgba(0,0,0,.0), rgba(0,0,0,.0) 50%, rgba(255,255,255,.02) 50%), repeating-linear-gradient(to bottom, rgba(0,255,235,.04) 0 2px, transparent 2px 4px);
  background-blend-mode: overlay;
}
body{margin:0; padding:0; min-height:100%; color:var(--text);}

/* Layout utilities */
.container{width:100%; max-width:clamp(320px,92vw,1100px); margin-inline:auto; padding-inline:1rem}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem}
.card{padding:1rem; border-radius:12px; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow)}
.tag{display:inline-block; padding:.15rem .5rem; font-size:.75rem; border-radius:999px; background: rgba(47,242,226,.25); color:var(--text); border:1px solid rgba(47,242,226,.6)}

/* Section: Header hero & typography */
header{ display:block; padding:1rem; margin:1rem auto; max-width:1100px; text-align:center; border-radius:14px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); box-shadow:0 10px 26px rgba(0,0,0,.25);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  header{ background: rgba(255,255,255,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
}
header h1{ margin:0; font-size: clamp(1.4rem, 1.4rem + 1vw, 2.2rem); line-height:1.15; letter-spacing:.4px; color:var(--text)}

/* Section: Hero content framing (glass panels) */
.content{ padding:0.75rem; }

/* Section: Image frame */
.image-frame{ aspect-ratio:16/9; width: min(90vw,720px); margin:1rem auto; border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.28); background:#000; box-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 0 20px rgba(0,255,235,.22);
}
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Section: Glass panels (fallback + backdrop) */
.glass{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:.75rem; box-shadow: var(--shadow); }
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .glass{ background: rgba(255,255,255,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
.fallback-glass{ background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); }

/* Section: Links & buttons */
a{ color: var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Button variants */
.btn{ display:inline-block; padding:.6rem 1rem; border-radius:8px; border:1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.08);
  color:var(--text); text-align:center; text-decoration:none; cursor:pointer; transition: transform .15s ease, background .2s ease, color .2s; }
.btn:hover{ background: rgba(255,255,255,.14); }
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.btn-outline{ background: transparent; border:1px solid rgba(46,242,226,.85); color: var(--text); }
.btn-outline:hover{ background: rgba(46,242,226,.15); }

/* Primary CTA */
.cta{ background: linear-gradient(135deg, rgba(46,242,226,.95), rgba(0,210,210,.95)); color:#041617; border:1px solid rgba(255,255,255,.9); }
.cta:hover{ background: linear-gradient(135deg, rgba(46,242,226,1), rgba(0,210,210,1)); }

/* Section: Lists */
ul{ padding-left:1.25rem; margin: .5rem 0; }
li{ margin:.25rem 0; }

/* Section: Form elements (if present) */
input, textarea, select{ padding:.55rem .6rem; border-radius:6px; border:1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08); color:var(--text); width:100%; outline:none; transition: border-color .15s ease, box-shadow .15s ease; }
input:focus-visible, textarea:focus-visible, select:focus-visible{ border-color: rgba(47,242,226,.9); box-shadow:0 0 0 4px rgba(47,242,226,.15); }

/* Section: Footer layout */
footer{ padding:1rem; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; align-items:stretch; }

/* Section: Print (basic readability) */
@media print{
  body{ background:#fff; color:#000; }
  a{ color:#00f; text-decoration:underline; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}