/* OraclePvP landing page.

   Deliberately NOT the store's layout. The store leads with a jungle parallax
   header, a nav pill bar and flanking counter boxes; this is a single dark
   centred column with no top nav, because the four tiles are the navigation.

   What IS taken from the store is the button colour, exactly: the four tile
   gradients below are the live values read off store.oraclepvp.net's own
   category cards on 2026-08-09. */

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

:root {
  --body: #00060d;
  --panel: rgba(10, 26, 42, 0.55);

  --accent: #42cdeb;
  --accent-bright: #7fe6ff;

  --success: #66CCBE;
  --danger: #D1757E;

  --text-main: #ffffff;
  --text-muted: #b6c8d6;
  --text-soft: #7e97ab;
  --text-dim: #56718a;

  --font-kanit: "Kanit", sans-serif;
  --font-karla: "Karla", sans-serif;

  --transition: 400ms ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html { overflow-x: hidden; }

body {
  min-height: 100vh;
  background: var(--body);
  color: var(--text-main);
  font-family: var(--font-karla);
  overflow-x: hidden;
}

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

button { font-family: var(--font-karla); cursor: pointer; border: 0; background: none; color: inherit; }

/* ---------- Backdrop ---------- */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* A faint grid, so the dark reads as textured rather than empty. */
.bg::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(circle, rgba(120, 190, 225, 0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 32%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 32%, #000 25%, transparent 78%);
}

/* Vignette, to pull the eye to the middle. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 65% at 50% 38%, transparent 35%, rgba(0, 4, 9, 0.75) 100%);
}

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
}

.aurora-a {
  width: 1100px;
  height: 720px;
  top: -300px;
  left: 50%;
  margin-left: -550px;
  background: radial-gradient(circle, rgba(45, 175, 215, 0.42), transparent 68%);
}

.aurora-b {
  width: 900px;
  height: 620px;
  top: 180px;
  left: 50%;
  margin-left: -180px;
  background: radial-gradient(circle, rgba(118, 78, 200, 0.30), transparent 68%);
}

/* ---------- Layout ---------- */

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.home {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 70px 22px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo {
  width: 300px;
  max-width: 62vw;
  height: auto;
  filter: drop-shadow(0 18px 46px rgba(0, 6, 14, 0.75));
}

.headline {
  max-width: 840px;
  margin: 26px auto 0;
  font-family: var(--font-kanit);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: #ffffff;
}

.headline .hl {
  color: var(--accent-bright);
  white-space: nowrap;
  text-shadow: 0 0 30px rgba(101, 207, 229, 0.5);
}

/* ---------- Join: the conversion ----------
   This block is deliberately the loudest thing under the logo. Three of the four
   tiles below send traffic to the store, and someone who typed this domain into a
   browser is almost always trying to play rather than shop. */

.join {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cta {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 14px 14px 14px 30px;
  border-radius: 999px;
  border: 1px solid rgba(120, 200, 235, 0.3);
  background: var(--panel);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0, 4, 10, 0.6);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform 300ms var(--ease-out);
}

.cta:hover, .cta:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 18px 50px rgba(66, 205, 235, 0.3);
  transform: translateY(-3px);
}

.cta:active { transform: translateY(0) scale(0.985); }

.cta-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

.cta-label {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #8fb2c8;
}

.cta-ip {
  font-family: var(--font-kanit);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.4px;
}

.cta-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 24px;
  height: 54px;
  border-radius: 999px;
  background: linear-gradient(140deg, #4fd6f2, #1f8fb4);
  color: #002130;
  font-family: var(--font-kanit);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(66, 205, 235, 0.35);
  transition: filter var(--transition);
}

.cta:hover .cta-btn { filter: brightness(1.08); }

.cta-btn svg { width: 19px; height: 19px; fill: #002130; }

.platforms {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-soft);
}

/* ---------- Social proof ---------- */

.proof {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.proof-item { display: flex; align-items: baseline; gap: 9px; }

.proof-item .dot { align-self: center; }

.proof-item strong {
  font-family: var(--font-kanit);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(101, 207, 229, 0.45);
}

.proof-item span:not(.dot) {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.7px;
  color: var(--text-soft);
}

.proof-sep {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #2c4256;
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--text-dim);
}

.dot[data-state="online"] { background: var(--success); animation: pulse 2.4s ease-out infinite; }
.dot[data-state="offline"] { background: var(--danger); }
.dot[data-state="loading"] { animation: blink 1.4s ease-in-out infinite; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(102, 204, 190, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(102, 204, 190, 0); }
  100% { box-shadow: 0 0 0 0 rgba(102, 204, 190, 0); }
}

@keyframes blink {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* ---------- How to join ----------
   Cheap to add and aimed squarely at the visitor who meant to paste the address
   into Minecraft and put it in the browser instead. */

.steps {
  margin-top: 26px;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 9px;
  border-radius: 999px;
  border: 1px solid rgba(120, 200, 235, 0.14);
  background: rgba(10, 26, 42, 0.4);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
}

.step-n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(66, 205, 235, 0.16);
  color: var(--accent-bright);
  font-family: var(--font-kanit);
  font-size: 14px;
  font-weight: 700;
}

/* ---------- Gameplay strip ----------
   Screenshots are the owner's own, taken from the public wiki page. */

.shots {
  width: 100%;
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.shot {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(120, 200, 235, 0.14);
  box-shadow: 0 16px 34px rgba(0, 4, 10, 0.55);
  transition: transform 450ms var(--ease-out), box-shadow 450ms var(--ease-out);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 16px 12px;
  text-align: left;
  font-family: var(--font-kanit);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  background: linear-gradient(0deg, rgba(0, 6, 13, 0.9), transparent);
}

.shot:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 44px rgba(0, 4, 10, 0.7);
}

/* ---------- Tiles ----------
   Gradients, angles and the dark diagonal wedge are the store's own category
   cards, read off the live site. The wedge is what lets white text sit on the
   gold one, so it is kept at the store's strength and not softened. */

.tiles {
  width: 100%;
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 210px;
  padding: 0 24px 26px;
  overflow: hidden;
  border-radius: 20px;
  border-bottom: 7px solid rgba(0, 0, 0, 0.30);
  text-align: left;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.5),
    0 18px 38px rgba(var(--glow), 0.22);
  transition: transform 450ms var(--ease-out), box-shadow 450ms var(--ease-out);
}

/* Live values from store.oraclepvp.net category cards, 2026-08-09. */
.tile-store   { background: linear-gradient(40deg,  #f55151, #bb2727); --glow: 224, 70, 70; }
.tile-wiki    { background: linear-gradient(180deg, #33637f, #31bcd2); --glow: 49, 188, 210; }
.tile-vote    { background: linear-gradient(51deg,  #f5c561, #dba91f); --glow: 226, 178, 48; }
.tile-discord { background: linear-gradient(54deg,  #3fc173, #286311); --glow: 63, 193, 115; }

.tile:hover {
  transform: translateY(-9px) scale(1.02);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.5),
    0 30px 58px rgba(var(--glow), 0.45);
}

/* The store's wedge, at the store's strength. */
.tile-wedge {
  position: absolute;
  left: 84px;
  top: 0;
  width: 50%;
  height: 700px;
  margin: -200px;
  transform: rotate(45deg);
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.42), transparent);
  pointer-events: none;
}

.tile-shine {
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  pointer-events: none;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26), transparent);
}

.tile:hover .tile-shine { animation: shine 900ms var(--ease-out); }

@keyframes shine {
  from { left: -60%; }
  to   { left: 130%; }
}

.tile-art {
  position: absolute;
  right: -14px;
  top: 16px;
  transform: rotate(-10deg);
  pointer-events: none;
  transition: transform 500ms var(--ease-out);
}

.tile-art svg { width: 118px; height: 118px; fill: rgba(255, 255, 255, 0.20); }

.tile:hover .tile-art { transform: rotate(-4deg) scale(1.12) translateY(4px); }

.tile-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 3px; }

.tile-name {
  font-family: var(--font-kanit);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  transition: transform 450ms var(--ease-out);
}

.tile:hover .tile-name { transform: translateX(3px); }

.tile-sub {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* ---------- Footer ---------- */

.footer {
  position: relative;
  z-index: 1;
  padding: 34px 22px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }

.footer-links a {
  position: relative;
  text-transform: uppercase;
  font-family: var(--font-kanit);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.1px;
  color: var(--text-muted);
  padding-bottom: 3px;
}

.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms var(--ease-out);
}

.footer-links a:hover { color: var(--accent); }
.footer-links a:hover::after { transform: scaleX(1); }

.footer-copy { color: #3f5468; font-size: 12.5px; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 20;
  transform: translate(-50%, 20px);
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(120, 200, 235, 0.3);
  background: rgba(5, 14, 24, 0.97);
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 40px rgba(0, 4, 10, 0.55);
  font-weight: 700;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s var(--ease-out);
}

.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Motion ----------
   Kept inside a no-preference query. If the reveal base state (opacity 0) were
   global and animations were merely disabled, reduced-motion users would get a
   blank page. */

@media (prefers-reduced-motion: no-preference) {

  .reveal {
    opacity: 0;
    animation: reveal 900ms var(--ease-out) var(--d, 0ms) forwards;
  }

  @keyframes reveal {
    from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
  }

  .logo {
    animation:
      reveal 900ms var(--ease-out) var(--d, 0ms) forwards,
      float 7s ease-in-out 1.5s infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-11px); }
  }

  /* The two glows drift independently. Neither clips anything, so there is no
     clip edge to land on a fractional pixel and read as a line across the page,
     which is what the old parallax backdrop did. */
  .aurora-a { animation: floatA 30s ease-in-out infinite; }
  .aurora-b { animation: floatB 38s ease-in-out infinite; }

  @keyframes floatA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-70px, 34px) scale(1.10); }
  }

  @keyframes floatB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(80px, -44px) scale(1.14); }
  }
}

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

@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .cta { gap: 18px; padding-left: 24px; }
  .cta-ip { font-size: 29px; }
}

@media (max-width: 720px) {
  .home { padding: 44px 18px 44px; }
  .logo { width: 210px; }
  .headline { font-size: 22px; margin-top: 20px; }

  .join { margin-top: 26px; }
  .cta { flex-direction: column; gap: 14px; padding: 18px; width: 100%; border-radius: 24px; }
  .cta-col { align-items: center; }
  .cta-ip { font-size: 27px; }
  .cta-btn { width: 100%; justify-content: center; }
  .platforms { font-size: 12.5px; }

  .proof { margin-top: 18px; gap: 4px 12px; flex-direction: column; }
  .proof-item strong { font-size: 22px; }
  .proof-sep { display: none; }

  .steps { margin-top: 20px; gap: 8px; flex-direction: column; align-items: stretch; }
  .steps li { justify-content: flex-start; }

  .shots { margin-top: 30px; grid-template-columns: 1fr 1fr; gap: 10px; }
  .shots .shot:last-child { grid-column: 1 / -1; }
  .shot figcaption { font-size: 13px; padding: 20px 12px 10px; }

  .tiles { margin-top: 36px; gap: 14px; }
  .tile { min-height: 165px; padding: 0 20px 22px; }
  .tile-name { font-size: 28px; }
  .tile-art svg { width: 96px; height: 96px; }
  .aurora-a, .aurora-b { filter: blur(80px); }
}

@media (max-width: 430px) {
  .tiles { grid-template-columns: 1fr; }
  .headline .hl { white-space: normal; }
  .shots { grid-template-columns: 1fr; }
  .shots .shot:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .dot[data-state="online"], .dot[data-state="loading"] { animation: none; }
}

/* ================= Blog =================
   Card grid on the home page, plus the /blog index and the post template.
   Each post is its own URL under /blog/<slug>/ so it can be indexed on its own. */

.blog {
  width: 100%;
  margin-top: 64px;
  text-align: center;
}

.blog-heading {
  font-family: var(--font-kanit);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.blog-sub {
  margin-top: 8px;
  font-size: 15px;
  color: var(--text-soft);
}

.blog-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  text-align: left;
}

.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(120, 200, 235, 0.14);
  background: rgba(10, 26, 42, 0.42);
  transition: border-color 300ms ease, transform 350ms var(--ease-out),
              background 300ms ease;
}

.blog-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}

.blog-card:hover .blog-thumb { transform: scale(1.05); }

.blog-text {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px 18px 18px;
}

.blog-card:hover {
  border-color: rgba(120, 200, 235, 0.42);
  background: rgba(14, 34, 54, 0.62);
  transform: translateY(-3px);
}

.blog-kicker {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--accent);
}

.blog-title {
  font-family: var(--font-kanit);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
}

.blog-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-soft);
}

.blog-all {
  display: inline-block;
  margin-top: 24px;
  padding: 11px 26px;
  border-radius: 999px;
  border: 1px solid rgba(120, 200, 235, 0.28);
  font-family: var(--font-kanit);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.blog-all:hover { border-color: var(--accent); color: var(--accent-bright); }

/* ---------- Shared topbar on blog pages ---------- */

.topbar {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar-brand { display: flex; align-items: center; gap: 11px; }
.topbar-brand img { width: 42px; height: auto; }

.topbar-brand span {
  font-family: var(--font-kanit);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.topbar-cta {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(120, 200, 235, 0.28);
  background: rgba(10, 26, 42, 0.5);
  font-family: var(--font-kanit);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.topbar-cta:hover { border-color: var(--accent); color: var(--accent-bright); }

/* ---------- Post template ---------- */

.post {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 22px 20px;
  flex: 1;
}

.crumbs { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; }
.crumbs a { color: var(--text-soft); }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 6px; }

.post-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--accent);
}

.post h1 {
  margin-top: 10px;
  font-family: var(--font-kanit);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
}

.post-meta { margin-top: 12px; font-size: 13.5px; color: var(--text-dim); }

.post-body { margin-top: 30px; font-size: 16.5px; line-height: 1.75; color: #d6e2ec; }

.post-body h2 {
  margin-top: 38px;
  font-family: var(--font-kanit);
  font-size: 25px;
  font-weight: 600;
  color: #ffffff;
}

.post-body h3 {
  margin-top: 26px;
  font-family: var(--font-kanit);
  font-size: 19px;
  font-weight: 600;
  color: var(--accent-bright);
}

.post-body p { margin-top: 15px; }
.post-body ul, .post-body ol { margin-top: 15px; padding-left: 22px; }
.post-body li { margin-top: 8px; }
.post-body strong { color: #ffffff; }

.post-body a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: #ffffff; }

.post-body code {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(66, 205, 235, 0.12);
  color: var(--accent-bright);
  font-size: 14.5px;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

.post-body table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  font-size: 15px;
  display: block;
  overflow-x: auto;
}

.post-body th, .post-body td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(120, 200, 235, 0.13);
  white-space: nowrap;
}

.post-body th {
  font-family: var(--font-kanit);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12.5px;
  letter-spacing: 0.8px;
  color: var(--accent);
}

/* ---------- In-post call to action ---------- */

.post-cta {
  margin-top: 44px;
  padding: 26px;
  border-radius: 20px;
  border: 1px solid rgba(120, 200, 235, 0.26);
  background: rgba(10, 26, 42, 0.55);
  text-align: center;
}

.post-cta-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #8fb2c8;
}

.post-cta-ip {
  margin-top: 4px;
  font-family: var(--font-kanit);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}

.post-cta-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 13px 28px;
  border-radius: 999px;
  background: linear-gradient(140deg, #4fd6f2, #1f8fb4);
  color: #002130;
  font-family: var(--font-kanit);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  box-shadow: 0 8px 22px rgba(66, 205, 235, 0.35);
}

.post-cta-btn:hover { filter: brightness(1.08); color: #002130; }

/* ---------- Related ---------- */

.related { margin-top: 50px; }

.related h2 {
  font-family: var(--font-kanit);
  font-size: 21px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.rel-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.rel-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 17px;
  border-radius: 14px;
  border: 1px solid rgba(120, 200, 235, 0.14);
  background: rgba(10, 26, 42, 0.42);
  transition: border-color 300ms ease, transform 350ms var(--ease-out);
}

.rel-card:hover { border-color: rgba(120, 200, 235, 0.42); transform: translateY(-3px); }

.rel-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--accent);
}

.rel-title { font-family: var(--font-kanit); font-size: 15px; font-weight: 600; line-height: 1.3; }

/* ---------- Blog index ---------- */

.blog-index { max-width: 1080px; }
.blog-index h1 { font-size: 42px; }

.blog-intro {
  margin-top: 14px;
  max-width: 640px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-soft);
}

.blog-index .blog-grid { margin-top: 34px; }

/* ---------- Blog responsive ---------- */

@media (max-width: 1000px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .rel-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .blog { margin-top: 46px; }
  .blog-heading { font-size: 22px; }
  .blog-grid { grid-template-columns: 1fr; }
  .rel-grid  { grid-template-columns: 1fr; }

  .post { padding-top: 26px; }
  .post h1, .blog-index h1 { font-size: 29px; }
  .post-body { font-size: 16px; }
  .post-body h2 { font-size: 21px; }
  .post-cta-ip { font-size: 26px; }

  .topbar { padding-top: 16px; }
  .topbar-brand span { font-size: 17px; }
  .topbar-cta { font-size: 12.5px; padding: 9px 15px; }
}


/* ---------- Guide hero image ---------- */

.post-hero {
  margin: 26px 0 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(120, 200, 235, 0.16);
  box-shadow: 0 18px 40px rgba(0, 4, 10, 0.55);
}

.post-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- FAQ ----------
   Marked up with FAQPage schema, which is the strongest single thing the
   competitor does: it is what wins the expandable question results. */

.faq { margin-top: 46px; }

.faq h2 {
  font-family: var(--font-kanit);
  font-size: 24px;
  font-weight: 600;
}

.faq-item {
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid rgba(120, 200, 235, 0.14);
  background: rgba(10, 26, 42, 0.42);
  overflow: hidden;
}

.faq-item summary {
  padding: 15px 46px 15px 18px;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-kanit);
  font-size: 16.5px;
  font-weight: 600;
  color: #ffffff;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 250ms var(--ease-out);
}

.faq-item[open] summary::after { transform: rotate(225deg); top: 26px; }

.faq-item summary:hover { color: var(--accent-bright); }

.faq-item p {
  padding: 0 18px 16px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #cbd9e5;
}

/* ---------- Related cards with thumbnails ---------- */

.rel-card {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.rel-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.rel-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 15px 15px;
}