:root {
  --bg: #050508 !important;
  --bg-soft: #0b0b12 !important;
  --surface: #0d0d15 !important;
  --surface-2: #11111c !important;
  --text: #f2f1eb !important;
  --muted: #aaa9b4 !important;
  --line: rgba(22, 247, 255, .22) !important;
  --accent: #16f7ff !important;
  --accent-2: #ff2bd6 !important;
  --brand: #16f7ff !important;
  --brand-dark: #08aab3 !important;
  --primary: #16f7ff !important;
  --primary-dark: #08aab3 !important;
  --yellow: #f4ff35;
  --dark: #050508 !important;
  --white: #f2f1eb !important;
  --shadow: 0 24px 70px rgba(22, 247, 255, .10) !important;
  --radius: 0px !important;
}

html { color-scheme: dark; background: #050508; scroll-behavior: smooth; }

body {
  color: #f2f1eb !important;
  background-color: #050508 !important;
  background-image:
    linear-gradient(rgba(22,247,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,247,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 82% -10%, rgba(255,43,214,.17), transparent 34%),
    radial-gradient(circle at 4% 30%, rgba(22,247,255,.09), transparent 25%) !important;
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100% !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

body::after {
  content: "";
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: none;
  opacity: .075;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.10) 4px);
}

::selection { color: #fff; background: #ff2bd6; }
a { color: #16f7ff; }
img { max-width: 100%; }

h1, h2, h3, h4,
.hero h1, .section-head h2, .article-header h1, .content h2, .content h3,
.video-title, .article-card h2 {
  color: #f2f1eb !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}

h1 em, h2 em, h3 em, .gradient {
  color: transparent !important;
  background: none !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px #ff2bd6;
  text-shadow: 4px 3px 0 rgba(22,247,255,.24);
}

p, li { color: inherit; }
.sub, .lead, .subtitle, .bio, .meta, .microcopy, .footer-disclaimer { color: #aaa9b4 !important; }

.topbar, .site-header, .page-header, header.topbar {
  border-color: rgba(22,247,255,.22) !important;
  background: rgba(5,5,8,.84) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: none !important;
}

.topbar::before, .site-header::before {
  content: "SYSTEM://LEONARDO_AMOYR";
  color: #16f7ff;
  font: 700 8px/1 monospace;
  letter-spacing: 1.5px;
  white-space: nowrap;
}

.logo img, .logo-img, .brand-logo {
  filter: grayscale(1) invert(1) brightness(2) drop-shadow(4px 3px 0 rgba(255,43,214,.48));
}

.hero, section.hero {
  position: relative;
  isolation: isolate;
  color: #f2f1eb !important;
  background:
    radial-gradient(circle at 78% 30%, rgba(255,43,214,.15), transparent 30%),
    linear-gradient(180deg, rgba(5,5,8,.70), rgba(5,5,8,.97)) !important;
  border-bottom: 1px solid rgba(22,247,255,.20);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 52% -20% -45%;
  transform: perspective(600px) rotateX(62deg);
  transform-origin: top;
  background-image:
    linear-gradient(rgba(22,247,255,.17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,247,255,.17) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, transparent 92%);
}

.eyebrow, .kicker, .video-eyebrow, .article-card__meta,
.related__eyebrow, .codex-hostinger-card__eyebrow {
  color: #16f7ff !important;
  font-family: monospace !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
}

.eyebrow::before, .kicker::before {
  content: "// ";
  color: #f4ff35;
}

.button, .btn, a.button, button, input[type="submit"], .screen-cta,
.hero-actions a, .hero-buttons a {
  border: 1px solid #16f7ff !important;
  border-radius: 0 !important;
  color: #050508 !important;
  background: #16f7ff !important;
  box-shadow: 5px 5px 0 rgba(255,43,214,.55) !important;
  clip-path: polygon(0 0, 94% 0, 100% 26%, 100% 100%, 6% 100%, 0 74%);
  font-family: monospace !important;
  font-weight: 900 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}

.button:hover, .btn:hover, a.button:hover, button:hover, input[type="submit"]:hover,
.screen-cta:hover, .hero-actions a:hover, .hero-buttons a:hover {
  color: #050508 !important;
  background: #f4ff35 !important;
  border-color: #f4ff35 !important;
  transform: translate(3px,-3px) !important;
  box-shadow: -5px 5px 0 rgba(255,43,214,.62) !important;
}

.button.alt, .btn.secondary, .hero-actions a.alt, .hero-buttons a.secondary {
  color: #16f7ff !important;
  background: transparent !important;
  box-shadow: none !important;
}

.card, .floating-card, .price-card, .offer, .guarantee, .quote-box,
.module, .faq, .vsl-card, .browser, .mockup, .screen, .screen-card,
.article-card, .toc, .tool-box, .related, .cta, details,
.info-card, .hero-card, .code-card, .callout, .step,
.codex-hostinger-card, .table-wrap {
  color: #f2f1eb !important;
  border: 1px solid rgba(22,247,255,.20) !important;
  border-radius: 0 !important;
  background: rgba(11,11,18,.90) !important;
  box-shadow: none !important;
  clip-path: polygon(0 0, 98% 0, 100% 4%, 100% 100%, 2% 100%, 0 96%);
}

.card:hover, .floating-card:hover, .article-card:hover, .info-card:hover,
.step:hover, details:hover {
  border-color: #16f7ff !important;
  box-shadow: -7px 7px 0 rgba(255,43,214,.10), 0 0 34px rgba(22,247,255,.08) !important;
}

.dark-section, .final-cta, .offer, .proof-strip, .cta, section:nth-of-type(even) {
  color: #f2f1eb !important;
  border-block: 1px solid rgba(22,247,255,.16);
  background-color: rgba(8,8,14,.94) !important;
  background-image: linear-gradient(135deg, rgba(255,43,214,.045), transparent 45%) !important;
}

.proof-pill, .pill, .tag, .batch-label, .ending {
  color: #050508 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f4ff35 !important;
  font-family: monospace !important;
  font-weight: 800 !important;
}

.num, .check, .metric strong, .price, .batch-status, .dot { color: #16f7ff !important; }
.check, .num, .step-list li::before { border-radius: 0 !important; background: rgba(22,247,255,.10) !important; border: 1px solid #16f7ff !important; }

.vsl-frame, .featured-image, .article-card__image, .video-thumb, iframe, video {
  border: 1px solid rgba(255,43,214,.34) !important;
  border-radius: 0 !important;
  box-shadow: -8px 8px 0 rgba(22,247,255,.08) !important;
}

.browser-bar, .code-head, .agent-header {
  color: #16f7ff !important;
  border-color: rgba(22,247,255,.22) !important;
  background: #08080d !important;
  font-family: monospace !important;
}

.content, article, .article-header { color: #d7d6dc !important; }
.content a, article a { color: #16f7ff !important; text-decoration-color: rgba(22,247,255,.5) !important; }
.content strong, article strong { color: #f2f1eb; }
.content code, pre, code { color: #f4ff35 !important; background: #08080d !important; border-color: rgba(22,247,255,.20) !important; }
.content blockquote, blockquote { color: #d7d6dc !important; border-left: 3px solid #ff2bd6 !important; background: rgba(255,43,214,.055) !important; }
.mark { color: #f2f1eb !important; background: linear-gradient(transparent 55%, rgba(244,255,53,.26) 55%) !important; }

table { color: #d7d6dc !important; border-color: rgba(22,247,255,.22) !important; background: rgba(11,11,18,.88) !important; }
th { color: #050508 !important; background: #16f7ff !important; }
td { border-color: rgba(22,247,255,.14) !important; }

input, textarea, select {
  color: #f2f1eb !important;
  border: 1px solid rgba(22,247,255,.30) !important;
  border-radius: 0 !important;
  background: #08080d !important;
}
input:focus, textarea:focus, select:focus { outline: 1px solid #ff2bd6 !important; box-shadow: 0 0 22px rgba(255,43,214,.12) !important; }

.site-footer, footer, .footer {
  color: #8d8c98 !important;
  border-color: rgba(22,247,255,.18) !important;
  background: #050508 !important;
}
.site-footer a, footer a, .footer a { color: #f4ff35 !important; }

@media (max-width: 760px) {
  .topbar::before, .site-header::before { display: none; }
  .hero::before { inset: 60% -40% -30%; }
  .card, .floating-card, .price-card, .offer, .guarantee, .quote-box,
  .module, .faq, .vsl-card, .browser, .mockup, .screen, .screen-card,
  .article-card, .toc, .tool-box, .related, .cta, details,
  .info-card, .hero-card, .code-card, .callout, .step { clip-path: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}