:root {
  --bg: #ffffff;
  --ink: #000000;       /* emblem + headings - pure flat black */
  --accent: #000000;    /* monochrome: heartbeat + ring + icons all black */
  --muted: #4a4a4a;     /* secondary text (neutral grey) */
  --hair: #e6e6e6;      /* hairlines */
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* NB: no `justify-content: center` — when the content is taller than the
     screen (small phones) flex-centering clips the top off-screen with no
     way to scroll up to it, which hid the logo. Auto margins on .wrap
     centre it when there's room but fall back to top-aligned + scrollable
     when it overflows. */
  min-height: 100vh;
  min-height: 100dvh;
  padding: 48px 22px;
  overflow-x: hidden;   /* guard the full-bleed mobile carousel strip */
}
.wrap { width: 100%; max-width: 760px; text-align: center; margin: auto; }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 28px;
}
.eyebrow .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: 9px; vertical-align: middle;
  animation: dot-blink 1.8s ease-in-out infinite;
}
@keyframes dot-blink { 0%,100%{opacity:1;} 50%{opacity:.25;} }

/* ── Branded loading animation (lifted from the Devastator admin) ──
   Clean two-beat heartbeat pulse on the emblem itself, plus two
   outline-only rings expanding underneath. No blur, no rotation. */
.brand-loader {
  position: relative; width: 168px; height: 168px;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.brand-loader::before,
.brand-loader::after {
  content: ""; position: absolute; inset: 26px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0;
  animation: brand-ring 1.8s ease-out infinite; pointer-events: none;
}
.brand-loader::after { animation-delay: .9s; }
.brand-loader-emblem {
  position: relative; width: 108px; height: 108px; color: var(--ink);
  animation: brand-pulse 1.8s cubic-bezier(.4,0,.2,1) infinite;
  transform-origin: 50% 50%;
}
@keyframes brand-ring {
  0%   { transform: scale(.55); opacity: .55; }
  70%  { opacity: .12; }
  100% { transform: scale(1.45); opacity: 0; }
}
@keyframes brand-pulse {
  0%,28%,100% { transform: scale(1);    color: var(--ink); }
  14%         { transform: scale(1.12); color: var(--accent); }
}
/* Respect users who prefer no motion - hold the resting frame. */
@media (prefers-reduced-motion: reduce) {
  .brand-loader-emblem, .brand-loader::before, .brand-loader::after, .eyebrow .dot { animation: none; }
  .brand-loader::before, .brand-loader::after { display: none; }
}

.wordmark {
  margin: 22px 0 0; font-size: clamp(34px, 8vw, 58px); font-weight: 800;
  letter-spacing: clamp(4px, 1.4vw, 11px); text-transform: uppercase;
  line-height: 1;
}

h1 {
  margin: 20px auto 0; max-width: 620px;
  font-size: clamp(19px, 3.4vw, 26px); font-weight: 600; line-height: 1.35;
  color: var(--ink);
}
.positioning {
  margin: 18px auto 0; max-width: 600px;
  font-size: 15px; line-height: 1.6; color: var(--muted);
}

.features-viewport { width: 100%; }
.features {
  list-style: none; margin: 40px auto 0; padding: 0; max-width: 680px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 26px;
  text-align: left;
}
.features li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px; line-height: 1.45; color: var(--ink);
}
.features .ico {
  flex: 0 0 auto; color: #000; display: inline-flex;
  width: 22px; height: 22px; margin-top: 1px;
}
.features .ico svg { width: 22px; height: 22px; display: block; }
.features b { font-weight: 700; }
.features span.sub { color: var(--muted); font-weight: 400; }

footer {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hair);
  width: 100%; max-width: 680px;
  font-size: 12.5px; color: var(--muted); letter-spacing: .3px;
}
footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ── "Built with" technology ticker (pure-black logos, auto-scrolling) ── */
.tech-ticker {
  width: 100%; max-width: 760px; margin: 46px auto 0;   /* same width as the site */
  overflow: hidden; padding: 20px 0 4px; border-top: 1px solid var(--hair);
  -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.tech-cap {
  text-align: center; margin: 0 0 16px; font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted);
}
.tech-track { display: flex; width: max-content; align-items: center; animation: tech-scroll 26s linear infinite; }
.tech-track:hover { animation-play-state: paused; }
.tech-link { flex: 0 0 auto; display: inline-flex; align-items: center; margin-right: 64px; }
.tech-logo { height: 27px; width: auto; display: block; transition: filter .15s ease; }
.tech-link:hover .tech-logo { filter: invert(60%); }   /* pure black → lighter grey */
@keyframes tech-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tech-track { animation: none; }
  .tech-ticker { overflow-x: auto; scrollbar-width: none; }
  .tech-ticker::-webkit-scrollbar { display: none; }
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  body { padding: 36px 18px; }
  .eyebrow { margin-bottom: 22px; }
  .brand-loader { width: 132px; height: 132px; }
  .brand-loader::before, .brand-loader::after { inset: 20px; }
  .brand-loader-emblem { width: 84px; height: 84px; }
  .wordmark { margin-top: 18px; }
  h1 { margin-top: 16px; }
  .features { margin-top: 32px; gap: 16px; }
}
@media (max-width: 380px) {
  body { padding: 30px 16px; }
  .features li { font-size: 13.5px; }
}

/* ── Bullet rows fade + rise in, one by one, as they scroll into view
   (matters most on mobile where the list sits below the fold). Scoped to
   .js so the rows are always visible when JavaScript is unavailable. */
.js .features li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
  will-change: opacity, transform;
}
.js .features li.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .features li { opacity: 1; transform: none; transition: none; }
}

/* ── Mobile (<600px): one-card-at-a-time carousel ──────────────────
   Horizontal scroll-snap strip you swipe, or step through with the black
   arrow buttons. JS advances it every 3s until the first interaction.
   Cards are always visible here (override the fade-in reveal state). */
.feat-nav-row { display: none; }   /* carousel controls are mobile-only */
@media (max-width: 599.98px) {
  .features-viewport { position: relative; width: 100%; }
  .features {
    display: flex; flex-wrap: nowrap; grid-template-columns: none;
    gap: 12px; margin: 28px 0 0; padding: 2px; max-width: none; text-align: left;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .features::-webkit-scrollbar { display: none; }
  .features li {
    flex: 0 0 100%; scroll-snap-align: center; align-items: flex-start;
    border: 1px solid var(--hair); border-radius: 12px;
    padding: 16px 18px; background: #fff; font-size: 13.5px; min-height: 78px;
    opacity: 1 !important; transform: none !important;   /* never hidden in the carousel */
  }
  /* Plain flat-black chevrons centred below the strip (no white button chrome). */
  .feat-nav-row { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 16px; }
  .feat-nav {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; padding: 6px; margin: 0;
    color: #000; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: color .15s ease, opacity .15s ease;
  }
  .feat-nav:hover { color: #555; }
  .feat-nav:active { opacity: .45; }
  .feat-nav svg { width: 30px; height: 30px; display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .features { scroll-behavior: auto; }
}

/* ── Guides & articles list (sits under the feature carousel) ───────── */
.articles {
  width: 100%; max-width: 760px; margin: 46px auto 0;
  padding: 26px 0 0; border-top: 1px solid var(--hair); text-align: left;
}
.articles-cap {
  text-align: center; margin: 0 0 20px; font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted);
}
.article-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}
.article-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--hair); border-radius: 14px; background: #fff;
  padding: 20px 22px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.article-card:hover {
  border-color: #cfcfcf; box-shadow: 0 6px 22px rgba(0,0,0,.06); transform: translateY(-2px);
}
.article-card h3 {
  margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--ink);
}
.article-card .sub {
  margin: 9px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
.article-card .read-more {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
}
.article-card .read-more svg { width: 14px; height: 14px; display: block; transition: transform .15s ease; }
.article-card:hover .read-more svg { transform: translateX(3px); }
/* Stretched link — the whole card is clickable, link text stays meaningful. */
.article-card .read-more::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }

@media (max-width: 600px) {
  .articles { margin-top: 36px; }
  .article-list { grid-template-columns: 1fr; }
}