:root {

  --navy: #0b2545;

  --navy-mid: #13315c;

  --navy-deep: #081a33;

  --blue: #2563eb;

  --blue-light: #3b82f6;

  --cream: #f7efdc;

  --cream-dark: #e8dcc0;

  --red: #b91c1c;

  --red-light: #dc2626;

  --gold: #d4a017;

  --slate: #475569;

  --slate-light: #8295ab;

  --bg: #f4ecd8;

  --paper: #fbf6ea;

  --white: #ffffff;

  --ink: #1a1208;

  --display: "Bebas Neue", "Oswald", Impact, sans-serif;

  --head: "Oswald", "Segoe UI", sans-serif;

  --stamp: "Special Elite", "Courier New", monospace;

  --body: "Source Serif 4", Georgia, serif;

}



*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



body {

  font-family: var(--body);

  color: var(--ink);

  background: var(--bg);

  line-height: 1.65;

  -webkit-font-smoothing: antialiased;

}



a { color: var(--blue); text-decoration: none; }

a:hover { text-decoration: underline; }



.container { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }

.center { text-align: center; }



h1, h2, h3 { font-family: var(--head); line-height: 1.08; letter-spacing: 0.01em; }



.kicker {

  font-family: var(--stamp);

  text-transform: uppercase;

  letter-spacing: 0.18em;

  font-size: 0.8rem;

  color: var(--red);

  margin-bottom: 0.6rem;

}

.kicker.center { text-align: center; }

.kicker.light { color: var(--gold); }



/* ---------- Buttons ---------- */

.btn {

  display: inline-block;

  font-family: var(--head);

  text-transform: uppercase;

  letter-spacing: 0.06em;

  padding: 0.8rem 1.7rem;

  border-radius: 3px;

  font-weight: 700;

  font-size: 0.95rem;

  cursor: pointer;

  border: 2px solid transparent;

  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;

}

.btn:hover { transform: translateY(-2px); text-decoration: none; }

.btn-sm { padding: 0.5rem 1.1rem; font-size: 0.8rem; background: var(--red); color: var(--white); }

.btn-sm:hover { background: var(--red-light); }

.btn-primary { background: var(--red); color: var(--cream); box-shadow: 0 6px 0 #7f1212; }

.btn-primary:hover { background: var(--red-light); box-shadow: 0 4px 0 #7f1212; }

.btn-primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #7f1212; }

.btn-outline { background: transparent; color: var(--cream); border-color: rgba(247,239,220,0.6); }

.btn-outline:hover { border-color: var(--cream); background: rgba(247,239,220,0.1); }

.btn-dark { background: var(--navy); color: var(--cream); box-shadow: 0 5px 0 #04101f; }

.btn-dark:hover { background: var(--navy-mid); }

.btn-lg { padding: 1.05rem 2.8rem; font-size: 1.15rem; }



/* ---------- Nav ---------- */

.nav {

  display: flex;

  align-items: center;

  gap: 1.4rem;

  padding: 1rem 2rem;

  position: absolute;

  top: 0; left: 0; right: 0;

  z-index: 20;

}

.logo {

  font-family: var(--display);

  font-size: 1.5rem;

  letter-spacing: 0.08em;

  color: var(--cream);

  margin-right: auto;

}

.logo:hover { text-decoration: none; }

.logo span { color: var(--gold); }

.nav-link { color: rgba(247,239,220,0.82); font-family: var(--head); text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.05em; }

.nav-link:hover { color: var(--cream); text-decoration: none; }



/* ---------- Hero ---------- */

.hero {

  background:

    radial-gradient(circle at 80% 10%, rgba(212,160,23,0.16), transparent 45%),

    linear-gradient(135deg, var(--navy-mid) 0%, var(--navy) 55%, var(--navy-deep) 100%);

  color: var(--cream);

  position: relative;

  overflow: hidden;

  padding-top: 5.5rem;

}

.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);

  background-size: 22px 22px;

  opacity: 0.5;

}

.hero-grid {

  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 2.5rem;

  align-items: center;

  padding-top: 2.5rem;

  padding-bottom: 3.5rem;

  position: relative;

  z-index: 2;

}

.eyebrow { font-family: var(--stamp); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; opacity: 0.9; margin-bottom: 0.8rem; color: var(--gold); }

.eyebrow .star { color: var(--gold); }

.hero h1 {

  font-family: var(--display);

  font-size: clamp(4.5rem, 13vw, 8.5rem);

  line-height: 0.85;

  color: var(--cream);

  text-shadow: 4px 4px 0 var(--red);

  margin-bottom: 0.3rem;

}

.hero-script {

  font-family: var(--head);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  font-size: clamp(1.1rem, 2.6vw, 1.6rem);

  color: var(--gold);

  margin-bottom: 1.2rem;

  border-left: 4px solid var(--red);

  padding-left: 0.8rem;

}

.hero-sub { font-size: 1.1rem; line-height: 1.6; opacity: 0.92; margin-bottom: 1.8rem; max-width: 34rem; }

.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }

.hero-note { font-size: 0.82rem; opacity: 0.7; font-family: var(--head); letter-spacing: 0.03em; }



.hero-art { display: flex; justify-content: center; position: relative; }

.hero-cover-frame { position: relative; transform: rotate(-3deg); }

.hero-cover {

  width: min(100%, 360px);

  height: auto;

  border-radius: 6px;

  box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 0 8px rgba(247,239,220,0.08);

  border: 3px solid rgba(247,239,220,0.25);

}

.price-badge {

  position: absolute;

  top: -22px; right: -22px;

  width: 84px; height: 84px;

  background: var(--red);

  color: var(--cream);

  border-radius: 50%;

  display: grid;

  place-items: center;

  font-family: var(--display);

  font-size: 1.4rem;

  transform: rotate(12deg);

  box-shadow: 0 6px 18px rgba(0,0,0,0.4);

  border: 3px dashed rgba(247,239,220,0.7);

}



.hero-stripe {

  position: relative;

  z-index: 2;

  background: var(--gold);

  color: var(--navy-deep);

  font-family: var(--display);

  font-size: 1.05rem;

  letter-spacing: 0.12em;

  padding: 0.5rem 0;

  display: flex;

  gap: 1.2rem;

  align-items: center;

  white-space: nowrap;

  overflow: hidden;

}

.hero-stripe span { flex: none; }

.hero-stripe i { color: var(--red); font-style: normal; }



/* ---------- Sections ---------- */

.section { padding: 4.5rem 0; }

.section h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 0.6rem; font-weight: 700; }

.section-lead { color: var(--slate); max-width: 40rem; margin: 0.5rem auto 2.5rem; text-align: center; font-size: 1.05rem; }

.section-lead.light { color: rgba(247,239,220,0.85); }



/* Intro */

.intro { background: var(--paper); }

.intro-wrap { max-width: 50rem; }

.intro h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-bottom: 1.2rem; }

.intro .lead { font-size: 1.2rem; margin-bottom: 1.1rem; }

.intro p { margin-bottom: 1.1rem; font-size: 1.06rem; }

.intro-points {

  list-style: none;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1rem;

  margin-top: 2rem;

  border-top: 2px dashed var(--cream-dark);

  padding-top: 1.6rem;

  text-align: center;

}

.intro-points li { font-family: var(--head); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--slate); }

.intro-points b { display: block; font-family: var(--display); font-size: 2.4rem; color: var(--red); line-height: 1; }



/* Peek inside */

.inside { background: var(--bg); }

.card-gallery {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

  margin-bottom: 2.5rem;

}

.card-gallery figure {

  background: var(--white);

  padding: 0.6rem;

  border-radius: 6px;

  box-shadow: 0 12px 30px rgba(11,37,69,0.16);

  transform: rotate(-1.2deg);

  transition: transform 0.2s;

}

.card-gallery figure:nth-child(2) { transform: rotate(1deg); }

.card-gallery figure:nth-child(3) { transform: rotate(-0.6deg); }

.card-gallery figure:hover { transform: rotate(0) translateY(-6px); }

.card-gallery img { width: 100%; height: auto; display: block; border-radius: 3px; }



/* PILOT pillars */

.pilot-system {

  background:

    radial-gradient(circle at 15% 90%, rgba(212,160,23,0.14), transparent 40%),

    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);

  color: var(--cream);

}

.light { color: var(--cream); }

.pillars {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));

  gap: 1.1rem;

}

.pillar {

  background: rgba(247,239,220,0.06);

  border: 1px solid rgba(247,239,220,0.14);

  border-top: 4px solid var(--gold);

  border-radius: 6px;

  padding: 1.4rem;

  backdrop-filter: blur(2px);

}

.pillar-letter {

  display: inline-grid;

  place-items: center;

  width: 44px; height: 44px;

  background: var(--red);

  color: var(--cream);

  border-radius: 6px;

  font-family: var(--display);

  font-size: 1.6rem;

  margin-bottom: 0.7rem;

}

.pillar h3 { font-size: 1.15rem; margin-bottom: 0.15rem; color: var(--cream); }

.acronym { font-family: var(--stamp); color: var(--gold); font-size: 0.85rem; letter-spacing: 0.14em; margin-bottom: 0.5rem; }

.pillar p:last-child { font-size: 0.88rem; color: rgba(247,239,220,0.78); line-height: 1.5; }



/* Rules list */

.rules-preview { background: var(--paper); }

.rules-list {

  columns: 2;

  column-gap: 3rem;

  list-style: none;

  counter-reset: rule;

  max-width: 46rem;

  margin: 0 auto;

}

.rules-list li {

  counter-increment: rule;

  padding: 0.6rem 0 0.6rem 3rem;

  position: relative;

  border-bottom: 1px dotted var(--cream-dark);

  break-inside: avoid;

  font-size: 1rem;

}

.rules-list li::before {

  content: counter(rule, decimal-leading-zero);

  position: absolute;

  left: 0; top: 0.55rem;

  font-family: var(--display);

  font-size: 1.5rem;

  color: var(--red);

  line-height: 1;

}



/* Author */

.author { background: var(--bg); }

.author-card {

  background: var(--white);

  border-radius: 8px;

  padding: 2.2rem;

  max-width: 44rem;

  margin: 0 auto;

  box-shadow: 0 14px 34px rgba(11,37,69,0.14);

  border-top: 5px solid var(--gold);

}

.author-stats {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1rem;

  margin-bottom: 1.6rem;

  text-align: center;

}

.author-stats strong { display: block; font-family: var(--display); font-size: 2rem; color: var(--navy); }

.author-stats span { font-family: var(--head); font-size: 0.72rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.05em; }

.author-card p { font-size: 1.04rem; }

.contact { margin-top: 1rem; font-size: 0.95rem; }



/* Languages */

.languages { background: var(--paper); }

.lang-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

  gap: 1rem;

  max-width: 52rem;

  margin: 0 auto 1.5rem;

}

.lang-card {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.35rem;

  padding: 1.2rem 0.8rem;

  background: var(--white);

  border: 2px solid var(--cream-dark);

  border-radius: 8px;

  text-decoration: none;

  color: var(--ink);

  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;

}

.lang-card:hover {

  transform: translateY(-3px);

  border-color: var(--gold);

  box-shadow: 0 8px 20px rgba(11,37,69,0.12);

  text-decoration: none;

}

.lang-flag {

  font-family: var(--display);

  font-size: 1.6rem;

  color: var(--red);

  letter-spacing: 0.06em;

}

.lang-card strong { font-family: var(--head); font-size: 1rem; }

.lang-card span:last-child { font-size: 0.78rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.05em; }

.lang-note { font-size: 0.9rem; color: var(--slate); }



/* Buy */

.buy {

  background:

    radial-gradient(circle at 50% 0%, rgba(212,160,23,0.18), transparent 50%),

    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);

  color: var(--cream);

}

.buy-box {

  text-align: center;

  max-width: 36rem;

  background: rgba(247,239,220,0.05);

  border: 1px solid rgba(247,239,220,0.16);

  border-radius: 10px;

  padding: 2.6rem 2rem;

  position: relative;

}

.ribbon {

  position: absolute;

  top: -16px; left: 50%;

  transform: translateX(-50%);

  background: var(--red);

  color: var(--cream);

  font-family: var(--head);

  text-transform: uppercase;

  letter-spacing: 0.1em;

  font-size: 0.8rem;

  padding: 0.4rem 1.4rem;

  border-radius: 3px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.3);

}

.buy h2 { color: var(--cream); margin-top: 0.6rem; }

.buy-includes { list-style: none; text-align: left; margin: 1.5rem auto; max-width: 26rem; }

.buy-includes li { padding: 0.45rem 0 0.45rem 1.9rem; position: relative; }

.buy-includes li::before { content: "\2708"; position: absolute; left: 0; color: var(--gold); }

.price { font-family: var(--display); font-size: 3.4rem; margin: 1rem 0 0.4rem; color: var(--cream); }

.price span { display: block; font-family: var(--head); font-size: 0.85rem; font-weight: 400; opacity: 0.7; letter-spacing: 0.04em; }

.secure { font-size: 0.82rem; opacity: 0.7; margin-top: 1rem; }

.secure a { color: var(--gold); }

.error { color: #fca5a5; margin-top: 0.8rem; font-size: 0.95rem; }



/* Footer */

.footer { background: var(--navy-deep); color: rgba(247,239,220,0.7); text-align: center; padding: 2.6rem 1.5rem; }

.footer-brand { font-family: var(--display); font-size: 1.6rem; color: var(--cream); letter-spacing: 0.08em; }

.footer-brand span { color: var(--gold); }

.footer p { margin: 0.3rem 0; font-size: 0.88rem; }

.footer a { color: var(--gold); }

.footer-fine { font-family: var(--stamp); font-size: 0.78rem; letter-spacing: 0.08em; opacity: 0.6; }



/* ---------- Responsive ---------- */

@media (max-width: 820px) {

  .hero-grid { grid-template-columns: 1fr; text-align: center; }

  .hero-script { border-left: none; padding-left: 0; }

  .hero-sub { margin-left: auto; margin-right: auto; }

  .hero-cta { justify-content: center; }

  .hero-art { margin-top: 1.5rem; }

  .card-gallery { grid-template-columns: 1fr; max-width: 26rem; margin: 0 auto 2.5rem; }

  .intro-points { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 600px) {

  .nav-link { display: none; }

  .rules-list { columns: 1; }

  .author-stats { grid-template-columns: repeat(2, 1fr); }

}