/* Section: Tokens & Base */
:root{
  --bg: #0b0010;
  --bg-2: #140027;
  --text: #f6f6ff;
  --muted: #c9b9d9;
  --accent: #ff2d92;
  --accent-2: #dc143c;
  --panel: rgba(255,255,255,0.08);
  --panel-2: rgba(255,255,255,0.22);
  --border: rgba(255,255,255,0.28);
  --shadow: 0 8px 28px rgba(0,0,0,.28);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; -webkit-font-smoothing:antialiased; text-size-adjust:100%}
body{
  margin:0;
  color:var(--text);
  background:
    linear-gradient(135deg, rgba(18,0,28,.95), rgba(20,0,40,.95) 40%, rgba(40,0,60,.95) 100%),
    radial-gradient(circle at 20% 15%, rgba(255,0,140,.25), transparent 40%),
    repeating-linear-gradient(to bottom, rgba(255,0,120,.04) 0 2px, transparent 2px 4px),
    #070012;
  min-height:100%;
  display:flex;
  flex-direction:column;
  line-height:1.6;
}

/* Section: Layout primitives */
.container{width:90%; max-width:clamp(320px, 90vw, 1100px); margin-inline:auto; padding:.5rem 0}
.grid{display:grid; gap:1rem}
.card{ background: var(--panel); border:1px solid var(--border); border-radius: calc(var(--radius) * 0.9); padding:1rem; box-shadow:var(--shadow); }

/* Glass (fallback) + backdrop-filter support */
header, footer, .content, .product-ad, aside, main, article{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:0.75rem;
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))){
  header, footer, .content, .product-ad{ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(12,0,22,0.28); }
}
@supports not ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))){
  header, footer, .content, .product-ad{ background: rgba(12,0,22,0.55); }
}

/* Section: Typography & heading rhythm */
h1,h2,h3{margin:0 0 .5rem; font-weight:600; color:#fff}
p{margin:0 0 1rem; color:var(--text)}
strong{font-weight:700}
em{font-style:italic; color:#ffd6f0}
.subtle{color:var(--muted)}
a{color:var(--accent-2); text-decoration:none}
a:focus-visible, button:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:6px }
a:hover{text-decoration:underline}
.btn{ display:inline-block; padding:.6em 1.1em; border-radius:999px; border:1px solid rgba(255,255,255,.35); background: rgba(255,0,120,.25); color:#fff; text-decoration:none; cursor:pointer; transition: transform .15s ease, background .15s ease; }
.btn:hover{ transform: translateY(-1px); background: rgba(255,0,120,.35) }
.btn:active{ transform: translateY(0); }
.btn--outline{ background: transparent; border:1px solid rgba(255,255,255,.6); color:#fff }
.btn--outline:hover{ background: rgba(255,255,255,.08) }

/* Section: Image framing */
.image-frame{ aspect-ratio:16/9; width:100%; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.25); box-shadow:0 8px 20px rgba(0,0,0,.25); display:block; }
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block }

/* Section: Content blocks & utilities */
.content{ font-size: clamp(0.95rem, 0.8vw + 0.8rem, 1.125rem); color:var(--text) }
 ul, li{ margin:0 0 0.75rem; padding-left:1.25rem; color:var(--muted) }
 li{ margin:0 0 .5rem }
 .tag{ display:inline-block; padding:.25em .6em; border-radius:999px; background: rgba(255,0,140,.25); border:1px solid rgba(255,255,255,.35); font-size:.75rem; color:#fff }

/* Section: Specific selectors required by page structure */
html, body, header, nav, main, article, footer, aside{ /* layout scaffolding targets for consistency */ }
.image-frame, .image-frame img{ }

/* Utility layout helpers */
.main, main{ display:block }
header{ padding-block: .75rem; text-align:center; }
nav{ margin-top:.25rem }
footer{ margin-top:auto; padding:1rem 0; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content:center }

/* Interactive elements across page */
a, button, .cta, .btn{ font-family: inherit; font-weight: 500; }
.cta{ padding:.5em 1em; border-radius:999px; border:1px solid rgba(255,255,255,.4); background: rgba(255,0,120,.28); color:#fff; text-decoration:none; display:inline-block }

/* Section: Layout patterns (image + text blocks) */
.main > article{ display:block; padding:1rem; border-radius: calc(var(--radius) * 0.9); }

/* Section: Print styles (basic readability) */
@media print{
  body{ background: #fff; color:#000 }
  a{ color:#00f; text-decoration:underline }
  header, footer{ background: transparent; border:0; padding:0; border-radius:0 }
  .image-frame{ page-break-inside: avoid }
}

/* Section: Responsive refinements */
@media (min-width: 700px){
  .container{ padding-inline:1rem }
}
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important }
}
@media (min-width: 900px){
  .grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* Section: Structural styling for core page areas */
header{ background: rgba(10,0,20,.32); border-color: rgba(255,255,255,.28); }
main{ flex:1; display:block; padding:1rem 0 }
article{ max-width: 800px; margin-inline:auto; }
footer{ padding:1rem; gap:1rem; }

/* Section: Content helpers (for potential .content usage) */
.content h2{ font-size: clamp(1.25rem, 1vw + 1rem, 2rem); margin: .4rem 0 .6rem }
.content h3{ font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.4rem); margin: .4rem 0 .6rem }
.content p{ color: var(--text) }
.content ul{ margin: .25rem 0 1rem; padding-left: 1.125rem }
.product-ad{ display:inline-flex; align-items:center; justify-content:center; min-width: 0; text-align:center }
.product-ad p{ margin:0; padding:0.25rem 0.5rem; font-weight:600; }
.sponsored-page{ display:inline-flex; align-items:center; justify-content:center }

/* End of stylesheet */