/* CSS: cyberpunk hacker landing styling (mobile-first) */

/* 1) Light reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 2) Theme and utilities */
:root{
  --olive: #6b8e23;
  --olive-dark: #526a1c;
  --bg: #061a2a;
  --text: #eaf7e0;
  --muted: #a6bfa0;
  --glass: rgba(255,255,255,.08);
  --card: rgba(6, 22, 12, .65);
  --neo: #66e0ff;
  --focus: 0 0 0 3px rgba(102, 226, 255, .75);
  --shadow: 0 8px 26px rgba(0,0,0,.35);
  --cta-gradient: linear-gradient(#203c11,#1b3a0f 60%, #214f14 100%);
}
html, body { height: 100%; }
body {
  min-height: 100svh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color: var(--text);
  background-color: var(--bg);
  /* Blue carbon fiber background (stylized) */
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.75) 25%, transparent 25%),
    linear-gradient(225deg, rgba(0,0,0,.75) 25%, transparent 25%),
    linear-gradient(135deg, rgba(20,60,120,.55), rgba(0,0,0,.0) 60%),
    linear-gradient(45deg, rgba(6,90,160,.5), rgba(0,0,0,0) 60%);
  background-size: 60px 60px, 60px 60px, 320px 320px, 320px 320px;
  background-position: 0 0, 0 0, -40px -40px, -40px -40px;
  /* Subtle blue tint overlay to reinforce "blue carbon" vibe */
  position: relative;
  overflow-x: hidden;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(60,180,255,.08), transparent 40%),
              radial-gradient(circle at 80% 100%, rgba(0,0,0,.25), transparent 40%);
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* 3) Layout: mobile-first hero area */
main {
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  min-height: 60svh;
}
.image-frame {
  width: min(100%, 900px);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(8,18,12,.55);
  box-shadow: var(--shadow);
  backdrop-filter: saturate(1.1) blur(6px);
}
.image-frame img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
}

/* 4) Footer + product ad (CTA) */
footer {
  padding: 1.75rem 1rem;
  text-align: center;
  color: var(--muted);
  background: rgba(5,15,12,.65);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.08);
}
.product-ad { display: inline-block; padding: .4rem; margin-bottom: .75rem; border-radius: 12px; background: rgba(8,18,12,.6); }
.product-ad h3 { font-size: 1rem; color: #d6f7c9; margin-bottom: .25rem; }
.product-ad a { text-decoration: none; color: inherit; }
.product-ad a > p {
  display: inline-block;
  margin: 0;
  padding: .5rem 1rem;
  font-weight: 700;
  color: #eaffdc;
  background: var(--cta-gradient);
  border-radius: 999px;
  border: 1px solid rgba(107,142,35,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 6px 12px rgba(0,0,0,.25);
}
.product-ad a:focus-visible { outline: var(--focus); outline-offset: 2px; }

/* Global links (for accessibility) */
a { color: #b6f0cc; text-decoration: none; }
a:hover { text-decoration: underline; }

/* 5) Focus visibility for keyboard users (button-like CTA) */
:focus-visible { outline: var(--focus); outline-offset: 2px; }

/* 6) Responsive tweaks */
@media (min-width: 720px) {
  main { padding: 3rem 0; }
  .image-frame { border-radius: 24px; }
  .product-ad h3 { font-size: 1.02rem; }
}
@media (min-width: 1024px) {
  main { padding: 4rem 0; }
  body { font-size: 16px; }
}