:root{
  --bg0:#02040b;
  --bg1:#061528;

  /* Medusa-inspired palette */
  --teal:#22d3c5;
  --aqua:#48b7ff;
  --gold:#d7b56b;

  --text: rgba(244,247,255,.92);

  --container: 1120px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  /* vertical rhythm */
  --section-pad-y: 64px;
  --section-pad-y-sm: 44px;
  --section-head-gap: 18px;
  --section-head-gap-sm: 14px;

}

*{ box-sizing:border-box; }

html{
  min-height: 100%;
  background: var(--bg0); /* prevents iOS grey/white canvas */
}


body{
  margin:0;
  min-height: 100%;
  height: auto;
  font-family: var(--font);
  color: var(--text);
  overflow-x:hidden;

  background:
    radial-gradient(900px 520px at 14% 18%, rgba(34,211,197,.15), transparent 60%),
    radial-gradient(700px 420px at 82% 28%, rgba(72,183,255,.12), transparent 55%),
    radial-gradient(600px 460px at 58% 78%, rgba(215,181,107,.08), transparent 60%),
    /* push return-to-dark past viewport so there’s no seam */
    linear-gradient(180deg, rgba(2,4,11,1) 0%, rgba(6,21,40,1) 65%, rgba(2,4,11,1) 220%);

  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* mobile browsers can glitch with fixed backgrounds */
@media (max-width: 900px){
  body{ background-attachment: scroll; }
}

/* subtle “scale/noise” feel (disable on mobile iOS to avoid grey/washed rendering) */
body::before{
  content:"";
  position: fixed;
  inset:-120px;
  pointer-events:none;
  opacity:.22;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.05), transparent 35%),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.035), transparent 35%),
    radial-gradient(circle at 40% 75%, rgba(255,255,255,.03), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,.025), transparent 35%);
  filter: blur(10px);
}
@media (max-width: 900px){
  body::before{ display:none; }
}

/* reusable container */
.container{
  width:min(var(--container), calc(100% - 2rem));
  margin:0 auto;
}

/* -----------------------------
   HEADER / NAV
------------------------------ */
.topbar{
  position: sticky;
  top:0;
  z-index: 10;

  backdrop-filter: blur(12px);
  background: rgba(46, 53, 61, 0.42);
  border-bottom: 1px solid rgba(255, 255, 255, 0.185);
  opacity: 1.9;
}

.nav-shell{
  position: relative;
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px clamp(12px, 2vw, 22px);
}

/* logo pinned left, actions centered */
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  color: var(--text);
  position: absolute;
  left: clamp(12px, 2vw, 22px);
  top: 50%;
  transform: translateY(-50%);
}

.logo-wrap{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.logo{
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0);

}

.actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap: wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 10px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 700;
  letter-spacing: .2px;

  color: rgba(244,247,255,.92);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(8,14,26,.28);
  backdrop-filter: blur(10px);

  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(72,183,255,.32);
  background: rgba(8,14,26,.40);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

.btn:active{
  transform: translateY(0);
  box-shadow: none;
}

.btn.primary{
  border-color: rgba(34,211,197,.35);
  background:
    radial-gradient(120px 80px at 20% 20%, rgba(34,211,197,.22), transparent 55%),
    linear-gradient(135deg, rgba(34,211,197,.18), rgba(72,183,255,.12));
}

.btn.primary:hover{
  border-color: rgba(34,211,197,.55);
  background:
    radial-gradient(140px 90px at 18% 20%, rgba(34,211,197,.28), transparent 55%),
    linear-gradient(135deg, rgba(34,211,197,.22), rgba(72,183,255,.14));
}

/* -----------------------------
   HERO + TOP SPLIT LAYOUT
------------------------------ */
.top-split{
  width:min(var(--container), calc(100% - 2rem));
  margin:0 auto;
  display:grid;
  grid-template-columns: minmax(0, 720px) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 64px);
  align-items:start;
}

/* keep this as-is on desktop */
.top-left{ display:block; }

.top-right{
  padding-top: 76px;
  padding-bottom: 36px;
}

/* HERO */
.hero{
  padding: 76px 0 36px;
  text-align: left;
}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,247,255,.70);
}

.hero h1{
  margin: 0;
  font-size: clamp(44px, 6vw, 78px);
  line-height: 1.05;
  letter-spacing: -1px;
  text-shadow:
    0 10px 50px rgba(0,0,0,.55),
    0 0 24px rgba(34,211,197,.10);
}

.hero h1::after{
  content:"";
  display:block;
  width: min(520px, 92%);
  height: 1px;
  margin: 18px 0 0;
  background: linear-gradient(90deg, rgba(72,183,255,.35), rgba(34,211,197,.35), transparent);
}

.hero-sub{
  margin: 18px 0 0;
  max-width: 860px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(244,247,255,.78);
}

.hero-sub strong{ color: rgba(244,247,255,.92); }

.hero-ctas{
  margin-top: 18px;
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
}

.trustline{
  margin-top: 14px;
  font-size: 13px;
  color: rgba(244,247,255,.62);
}

.dot{
  opacity: .7;
  padding: 0 6px;
}

/* HERO VISUAL */
.hero-visual{
  position: relative;
  display:block;
  width: clamp(520px, 60vw, 700px);
  margin-left: auto;
  margin-right: auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;

  animation: heroSlideIn 1.7s cubic-bezier(.2,.9,.2,1) both;
  will-change: transform, opacity;
}

.hero-visual .hero-img{
  display:block;
  width:100%;
  height:auto;
  object-fit: contain;
  object-position: center;
}

@keyframes heroSlideIn{
  from{ transform: translateX(1000px); opacity: 0; }
  to  { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  .hero-visual{ animation:none; }
}

/* -----------------------------
   SHARED SECTION LAYOUT
------------------------------ */
.section{
  padding: var(--section-pad-y) 0;
}

.section-head{
  margin-bottom: var(--section-head-gap);
}

.section-head h2{
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.3px;
}

.section-head p{
  margin: 8px 0 0;
  max-width: 920px;
  color: rgba(244,247,255,.70);
  line-height: 1.55;
}

.section-head.compact{ margin-bottom: 6px; }
.section-cta{ margin-top: 14px; }

/* -----------------------------
   CARDS & GRIDS
------------------------------ */
.step-grid,
.why-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.info-card{
  position: relative;
  border-radius: 18px;
  padding: 16px 16px 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,14,26,.22);
  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04) inset;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.info-card:hover{
  transform: translateY(-2px);
  border-color: rgba(72,183,255,.22);
  box-shadow:
    0 24px 80px rgba(0,0,0,.45),
    0 0 0 1px rgba(72,183,255,.08) inset;
}

.card-top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}

.card-num{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(2,4,11,.30);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}

.info-card h3{
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.2px;
}

.info-card p{
  margin: 0;
  color: rgba(244,247,255,.74);
  line-height: 1.55;
}

.why-title{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}

.why-ico{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,4,11,.22);
}

/* -----------------------------
   COMPETITION SNAPSHOT
------------------------------ */
.snapshot{
  display:grid;
  grid-template-columns: 1.25fr .9fr auto;
  gap: 16px;
  align-items: stretch;

  border-radius: 20px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,14,26,.20);
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
}

.snapshot-main{
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2,4,11,.18);
}

.snapshot-row{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.snapshot-row:last-child{ border-bottom:none; }

.snapshot-row .k{
  color: rgba(244,247,255,.62);
  font-weight: 700;
}
.snapshot-row .v{
  color: rgba(244,247,255,.88);
  font-weight: 900;
}

.snapshot-side{
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2,4,11,.14);
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.count-label{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,247,255,.62);
}
.count{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.6px;
}

.snapshot-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 8px;
}

.snapshot-note-title{
  margin-top: 6px;
  font-weight: 900;
  letter-spacing: -0.3px;
}
.snapshot-note{
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(244,247,255,.62);
}

/* -----------------------------
   LEGITIMACY STRIP
------------------------------ */
.legitimacy{
  padding: var(--section-pad-y) 0 calc(var(--section-pad-y) + 26px);
}

.legitimacy p{
  margin: 0;
  border-radius: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2,4,11,.18);
  color: rgba(244,247,255,.65);
  font-size: 13px;
  line-height: 1.55;
}

/* -----------------------------
   ABOUT
------------------------------ */
.about-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.about-card{
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,14,26,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.32);
}

.about-card h3{
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: -0.2px;
}

.about-card p{
  margin: 0;
  color: rgba(244,247,255,.74);
  line-height: 1.55;
}

/* -----------------------------
   JOIN
------------------------------ */
.join-box{
  border-radius: 20px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,14,26,.18);
  box-shadow: 0 20px 70px rgba(0,0,0,.34);
}

.join-list{
  margin: 0 0 14px;
  padding-left: 18px;
  color: rgba(244,247,255,.74);
  line-height: 1.6;
}

.join-form{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.join-form input{
  flex: 1 1 260px;
  min-width: 240px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,4,11,.28);
  color: rgba(244,247,255,.92);
  outline: none;
  backdrop-filter: blur(10px);
}

.join-form input::placeholder{ color: rgba(244,247,255,.45); }

.join-form input:focus{
  border-color: rgba(72,183,255,.26);
  box-shadow: 0 0 0 4px rgba(72,183,255,.08);
}

.small{ font-size: 12px; }
.nowrap{ white-space: nowrap; }

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* UI preview head spacing */
.ui-head{
  padding: calc(var(--section-pad-y) - 10px) 0 0;
}

/* -----------------------------
   SLIDER (Why ClutchTrades)
------------------------------ */
.slider{
  position: relative;
  margin-top: 14px;
}

.slider-track{
  display: flex;
  gap: 16px;

  overflow-x: auto;
  padding: 6px 2px 14px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  height: 125px;
  scrollbar-width: none;
  font-size: large;
}
.slider-track::-webkit-scrollbar{ display:none; }

.slide{
  scroll-snap-align: start;
  flex: 0 0 min(420px, 82vw);
}

.slider::before,
.slider::after{
  content:"";
  position:absolute;
  top: 0;
  bottom: 36px;
  width: 44px;
  pointer-events:none;
  z-index: 1;
}
.slider::before{
  left: 0;
  background: linear-gradient(90deg, rgba(2,4,11,.65), transparent);
}
.slider::after{
  right: 0;
  background: linear-gradient(270deg, rgba(2,4,11,.65), transparent);
}

.slider-btn{
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 2;

  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,14,26,.35);
  backdrop-filter: blur(10px);

  color: rgba(244,247,255,.85);
  display: grid;
  place-items: center;

  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.slider-btn:hover{
  transform: translateY(-50%) scale(1.03);
  border-color: rgba(72,183,255,.26);
  background: rgba(8,14,26,.45);
}
.slider-btn:disabled{
  opacity: .35;
  cursor: default;
}
.slider-btn.prev{ left: -8px; }
.slider-btn.next{ right: -8px; }

.slider-btn span{
  font-size: 28px;
  line-height: 1;
  margin-top: -2px;
}

/* dots */
.slider-dots{
  display:flex;
  justify-content:center;
  gap: 8px;
  margin-top: 6px;
}
.slider-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(244,247,255,.18);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.slider-dot.active{
  background: rgba(244,247,255,.75);
  border-color: rgba(244,247,255,.55);
  transform: scale(1.15);
}

/* On wide screens, show more cards at once but keep slider behavior */
@media (min-width: 980px){
  .slide{ flex-basis: calc((100% - 32px) / 3); }
}
@media (max-width: 900px){
  .slider-btn.prev{ left: 4px; }
  .slider-btn.next{ right: 4px; }
  .slider::before, .slider::after{ width: 34px; }
}

/* WHY SLIDER = BORDER ONLY (no boxes) */
.slider[data-slider="why"] .slider-track{
  gap: 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.slider[data-slider="why"] .info-card{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 18px 22px;
  transition: none;
}
.slider[data-slider="why"] .info-card:hover{ transform:none; }
.slider[data-slider="why"] .slide{ border-right: 1px solid rgba(255,255,255,.10); }
.slider[data-slider="why"] .slide:last-child{ border-right: 0; }
.slider[data-slider="why"] .why-title{ margin-bottom: 10px; }

/* full width breakout */
.full-bleed{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.full-bleed .slider-track{
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.full-bleed .slider-btn.prev{ left: 10px; }
.full-bleed .slider-btn.next{ right: 10px; }

/* -----------------------------
   SKINS GRID + CARDS
------------------------------ */
.skins{
  padding: var(--section-pad-y) 0 calc(var(--section-pad-y) + 10px);
}

.skins-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.skin-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px;

  display:flex;
  flex-direction: column;
  gap: 12px;

  padding: 18px;
  min-height: 170px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,14,26,.28);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);

  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.skin-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
}

/* rarity background layer */
.skin-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  opacity: .95;
  z-index: 0;
  pointer-events:none;
}

/* subtle sheen layer */
.skin-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  background:
    radial-gradient(280px 160px at 18% 22%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(260px 170px at 86% 40%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), transparent 40%, rgba(0,0,0,.16));
  pointer-events:none;
}

/* rarity backgrounds */
.rarity-classified::before{
  background:
    radial-gradient(320px 190px at 20% 18%, rgba(255,120,220,.55), transparent 60%),
    radial-gradient(360px 220px at 90% 32%, rgba(170,60,230,.50), transparent 62%),
    linear-gradient(135deg, rgba(120,35,170,.70), rgba(12,8,18,.55));
}
.rarity-covert::before{
  background:
    radial-gradient(320px 190px at 20% 18%, rgba(255,90,90,.60), transparent 60%),
    radial-gradient(360px 220px at 90% 32%, rgba(180,30,45,.55), transparent 62%),
    linear-gradient(135deg, rgba(120,18,26,.72), rgba(20,8,12,.55));
}
.rarity-rare-special::before{
  background:
    radial-gradient(320px 190px at 20% 18%, rgba(255,240,170,.50), transparent 60%),
    radial-gradient(360px 220px at 90% 32%, rgba(190,140,40,.55), transparent 62%),
    linear-gradient(135deg, rgba(120,85,18,.70), rgba(18,14,10,.55));
}

/* card content above bg layers */
.skin-top{
  position: relative;
  z-index: 2;
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.skin-chip{
  display:inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(2,4,11,.22);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(244,247,255,.92);
}

.skin-name{
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.2px;
  color: rgba(244,247,255,.95);
}

/* price badge inside skin cards */
.skin-price{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;

  display:flex;
  flex-direction: column;
  align-items:flex-end;
  gap: 8px;
}

.skin-price-val{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,4,11,.22);
  backdrop-filter: blur(10px);
  font-weight: 900;
  letter-spacing: -0.2px;
  color: rgba(244,247,255,.94);
}

.skin-img{
  position: relative;
  z-index: 2;

  width: min(350px, 90%);
  max-height: 160px;
  height: auto;

  align-self: flex-end;
  object-fit: contain;

  margin-top: 4px;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.45));

  pointer-events: none;
  user-select: none;
}

/* -----------------------------
   PRICE SNAPSHOT
------------------------------ */
.price-panel{
  padding: var(--section-pad-y) 0 calc(var(--section-pad-y) + 26px);
}

.price-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-top: 10px;
}

.price-head h2{
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.2px;
  color: rgba(244,247,255,.92);
}

/* segmented range toggle */
.segmented{
  display:inline-flex;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,14,26,.24);
  backdrop-filter: blur(10px);
  gap: 6px;
}

.seg{
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(244,247,255,.86);
  background: transparent;
  padding: 8px 12px;
  border-radius: 999px;
  transition: background .15s ease, transform .15s ease, color .15s ease;
}
.seg:hover{ transform: translateY(-1px); }

.seg.active{
  background: rgba(255,255,255,.10);
  color: rgba(244,247,255,.95);
  border: 1px solid rgba(255,255,255,.10);
}

.price-list{
  margin-top: 14px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.price-row{
  display:grid;
  grid-template-columns: 1.4fr 1fr 0.7fr;
  align-items:center;
  gap: 12px;

  border-radius: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,14,26,.26);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

.price-title{
  font-weight: 850;
  letter-spacing: -0.2px;
  color: rgba(244,247,255,.94);
}
.price-sub{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(244,247,255,.70);
}
.price-value{
  font-weight: 900;
  letter-spacing: -0.2px;
}

/* delta badge */
.delta{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(2,4,11,.22);
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(244,247,255,.90);
}
.price-right .delta{ justify-self: end; }

.delta.up{
  border-color: rgba(34,211,197,.35);
  box-shadow: 0 0 0 1px rgba(34,211,197,.10) inset;
}
.delta.down{
  border-color: rgba(255,90,90,.35);
  box-shadow: 0 0 0 1px rgba(255,90,90,.10) inset;
}

.muted{
  font-size: 12px;
  color: rgba(244,247,255,.58);
}

/* -----------------------------
   LAYOUT RHYTHM
------------------------------ */
main{ padding-bottom: 56px; }

main > section.container{ scroll-margin-top: 92px; }
main > section.container + section.container{ margin-top: 6px; }

/* -----------------------------
   FOOTER
------------------------------ */
.site-footer{
  margin-top: 42px;
  padding: 18px 0 28px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(2,4,11,.20);
  backdrop-filter: blur(12px);
}

.footer-inner{
  display:flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
}

.footer-left{
  flex: 1 1 auto;
  min-width: 240px;
}

.footer-brand{
  display:flex;
  gap: 12px;
  align-items:center;
}

.footer-mark{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing: -0.5px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,14,26,.22);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

.footer-name{
  font-weight: 900;
  letter-spacing: -0.2px;
}

.footer-sub{
  font-size: 12px;
  color: rgba(244,247,255,.62);
  margin-top: 2px;
}

.footer-legal{
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(244,247,255,.55);
}

.footer-right{
  display:flex;
  gap: 10px;
  align-items:center;
}

.social{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,14,26,.18);
  color: rgba(244,247,255,.78);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.social svg{ fill: currentColor; }
.social:hover{
  transform: translateY(-2px);
  border-color: rgba(72,183,255,.26);
  box-shadow: 0 16px 60px rgba(0,0,0,.42);
  color: rgba(244,247,255,.92);
}

/* -----------------------------
   RESPONSIVE
------------------------------ */
@media (max-width: 900px){
  :root{
    --section-pad-y: var(--section-pad-y-sm);
    --section-head-gap: var(--section-head-gap-sm);
  }

  /* Make the hero image go UNDER the trustline:
     HERO -> IMAGE -> HOW (no HTML changes) */
  .top-left{ display: contents; }

  .top-split{
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "media"
      "how";
    gap: 18px;
  }

  .top-split .hero{ grid-area: hero; }
  .top-split #how{ grid-area: how; }
  .top-split .top-right{ grid-area: media; }

  .top-right{
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero{ padding-top: 42px; }
  .hero-sub{ font-size: 16px; }

  .hero-ctas{
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hero-ctas .btn{ width: 100%; }

  .hero-visual{
    width: 100%;
    max-width: 700px;
    border-radius: 18px;
  }

  /* no iOS side-gap jitter from 100vw breakout */
  .full-bleed{
    width: 100%;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .step-grid, .why-grid{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .snapshot{ grid-template-columns: 1fr; }
  .snapshot-cta{ justify-content: flex-start; padding: 0; }

  .skins-grid{ grid-template-columns: 1fr; }
  .skin-img{ width: min(380px, 92%); max-height: 120px; }

  .footer-inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-right{ margin-top: 10px; }
}

@media (max-width: 720px){
  .logo{ width: 42px; height: 42px; }
  .btn{ padding: 9px 14px; font-weight: 700; min-height: 44px; }

  .join-form{ flex-direction: column; align-items: stretch; }
  .join-form input{ min-width: 0; width: 100%; }
  .join-form button{ width: 100%; }

  .price-row{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .price-right .delta{ justify-self: start; }
  .price-head{ align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px){
  .actions{ gap: 12px; }
  .btn{ padding: 9px 12px; font-size: 14px; }

  .skin-price{ top: 12px; right: 12px; }
  .skin-price-val{ padding: 7px 10px; }
  .delta{ padding: 7px 10px; }
}

@media (prefers-reduced-motion: reduce){
  .btn, .seg, .skin-card{ transition: none; }
  .btn:hover, .seg:hover, .skin-card:hover{ transform: none; }
}

/* =========================
   ABOUT PAGE TYPO FIX
   ========================= */

/* Make About hero headline + copy smaller than landing page */
.about-page .hero h1,
body.about .hero h1,
main.about .hero h1{
  font-size: clamp(28px, 5.2vw, 44px);
  line-height: 1.10;
  letter-spacing: -0.6px;
}

.about-page .hero-sub,
body.about .hero-sub,
main.about .hero-sub{
  font-size: 16px;
  line-height: 1.55;
}

/* On small phones, tighten even more */
@media (max-width: 520px){
  .about-page .hero h1,
  body.about .hero h1,
  main.about .hero h1{
    font-size: 30px;
  }
  .about-page .hero-sub,
  body.about .hero-sub,
  main.about .hero-sub{
    font-size: 15px;
  }
}

/* ===== About page: shrink hero typography ===== */
.about-page .hero h1{
  font-size: clamp(28px, 5.2vw, 44px) !important;
  line-height: 1.10 !important;
  letter-spacing: -0.6px !important;
}

.about-page .hero-sub{
  font-size: 16px !important;
  line-height: 1.55 !important;
}

@media (max-width: 520px){
  .about-page .hero h1{
    font-size: 30px !important;
  }
  .about-page .hero-sub{
    font-size: 15px !important;
  }
}

/* Hide the countdown target date (still readable by JS) */
.snapshot-side .count-date{
  display: none;
}

html { scroll-behavior: smooth; }

.footer-link{
  color: rgba(244,247,255,.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.footer-link:hover{
  color: rgba(244,247,255,.92);
  border-color: rgba(72,183,255,.32);
}

/* -----------------------------
   LEGAL PAGES (TOS / PRIVACY)
------------------------------ */

/* little pill chips (your legal pages use this class, but it had NO styling) */
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;

  color: rgba(244,247,255,.84);
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(120px 80px at 20% 20%, rgba(34,211,197,.14), transparent 55%),
    linear-gradient(135deg, rgba(8,14,26,.30), rgba(2,4,11,.18));
  box-shadow:
    0 16px 50px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.05) inset;
  backdrop-filter: blur(10px);
}

.legal-meta{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* layout */
.legal-wrap{
  padding: 40px 0 72px;
}

.legal-layout{
  display:grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 18px;
  align-items:start;
}

/* “glass card” that matches your other cards */
.legal-card{
  position: relative;
  border-radius: 20px;
  padding: 18px 18px 16px;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,14,26,.22);

  box-shadow:
    0 24px 80px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.04) inset;

  backdrop-filter: blur(12px);
}

/* subtle gradient rim */
.legal-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 20px;
  padding:1px;
  background: linear-gradient(
    135deg,
    rgba(72,183,255,.22),
    rgba(34,211,197,.18),
    rgba(215,181,107,.10),
    rgba(255,255,255,.06)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.55;
}

.legal-card h2{
  margin: 0 0 10px;
  font-size: 24px;
  letter-spacing: -0.35px;
}

.legal-card h3{
  margin: 18px 0 10px;
  font-size: 16px;
  letter-spacing: -0.2px;
  color: rgba(244,247,255,.90);
}

.legal-card p{
  margin: 0 0 12px;
  line-height: 1.65;
  color: rgba(244,247,255,.78);
}

.legal-card strong{
  color: rgba(244,247,255,.92);
}

/* lists */
.legal-card ul{
  margin: 8px 0 14px 18px;
  color: rgba(244,247,255,.78);
}

.legal-card li{
  margin: 7px 0;
  line-height: 1.6;
}

.legal-card li::marker{
  color: rgba(72,183,255,.70);
}

/* content links (avoid default blue browser links) */
.legal-card a{
  color: rgba(72,183,255,.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(72,183,255,.28);
}
.legal-card a:hover{
  color: rgba(244,247,255,.92);
  border-color: rgba(34,211,197,.40);
}

/* table of contents */
.legal-toc{
  position: sticky;
  top: 92px; /* sticky header offset */
  padding: 18px;
}

.legal-toc h3{
  margin: 0 0 10px;
}

.legal-toc a{
  display:block;
  padding: 10px 12px;
  border-radius: 14px;
  margin-top: 10px;

  color: rgba(244,247,255,.84);
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2,4,11,.18);

  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.legal-toc a:hover{
  transform: translateY(-1px);
  border-color: rgba(72,183,255,.26);
  background: rgba(8,14,26,.26);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.legal-toc a:focus-visible{
  outline: 2px solid rgba(72,183,255,.50);
  outline-offset: 2px;
}

/* make anchor jumps land nicely under sticky header */
.legal-card [id]{
  scroll-margin-top: 108px;
}

/* highlight the section you jumped to */
.legal-card :target{
  position: relative;
}
.legal-card :target::after{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  bottom:-6px;
  height: 2px;
  background: linear-gradient(90deg, rgba(72,183,255,.55), rgba(34,211,197,.45), transparent);
  opacity: .9;
}

.legal-note{
  margin-top: 12px;
  font-size: 13px;
  color: rgba(244,247,255,.62);
}

/* responsive */
@media (max-width: 980px){
  .legal-layout{ grid-template-columns: 1fr; }
  .legal-toc{ position: relative; top:auto; }
  .legal-wrap{ padding-top: 24px; }
}

/* =============================
   LEGAL PAGES FIX (OVERRIDE)
   fixes: TOC too wide + content squeezed
============================= */

/* 1) FIX THE GRID: TOC fixed, CONTENT flexible */
.legal-layout{
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* Optional: keep reading width nice on huge screens */
@media (min-width: 1200px){
  .legal-layout{
    grid-template-columns: 280px minmax(0, 860px);
    justify-content: center;
  }
}

/* 2) TOC: stop making it a massive “full card” */
.legal-toc{
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 120px);
  overflow: auto;

  padding: 16px !important;
}

/* Make TOC links look clean + compact (not long pills) */
.legal-toc a{
  display: flex;
  gap: 10px;
  align-items: center;

  padding: 10px 12px;
  margin-top: 10px;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2,4,11,.18);

  color: rgba(244,247,255,.82);
  text-decoration: none;

  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.legal-toc a:hover{
  transform: translateY(-1px);
  border-color: rgba(72,183,255,.30);
  background: rgba(8,14,26,.26);
}

/* 3) CONTENT: give it breathing room */
.legal-layout > article.legal-card{
  padding: 26px !important;
}

.legal-card h2{
  font-size: 28px !important;
  letter-spacing: -0.4px;
  margin-bottom: 10px;
}

.legal-card p, .legal-card li{
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(244,247,255,.78);
}

/* stop bullet lists from looking cramped */
.legal-card ul{
  margin: 10px 0 16px 20px;
}

/* mobile */
@media (max-width: 980px){
  .legal-layout{
    grid-template-columns: 1fr;
  }
  .legal-toc{
    position: relative;
    top: auto;
    max-height: none;
  }
}

/* =============================
   LEGAL PAGES: STACKED LAYOUT
   (TOC on top, content below)
============================= */

.legal-layout{
  display: grid;
  grid-template-columns: 1fr !important;  /* single column */
  gap: 18px;
}

/* TOC becomes a horizontal “button grid” instead of a tall sidebar */
.legal-toc{
  position: relative !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;

  padding: 16px !important;
}

/* make the TOC links wrap nicely across rows */
.legal-toc a{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  margin: 10px 10px 0 0 !important; /* space between pills */
  padding: 10px 12px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(2,4,11,.18);
  color: rgba(244,247,255,.84);
  text-decoration: none;
  white-space: nowrap;

  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.legal-toc a:hover{
  transform: translateY(-1px);
  border-color: rgba(72,183,255,.30);
  background: rgba(8,14,26,.26);
}

/* content card spacing */
.legal-layout > article.legal-card{
  padding: 26px !important;
}

.legal-card h2{
  font-size: 28px !important;
  margin-bottom: 10px;
}

.legal-card p, .legal-card li{
  font-size: 15.5px;
  line-height: 1.75;
}

/* =============================
   LEGAL PAGES: CLEANER + SMALLER
   (content tighter, nicer reading width)
============================= */

/* keep stacked layout */
.legal-layout{
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

/* limit reading width + center */
.legal-wrap{
  padding: 26px 0 56px !important;
}
.legal-wrap .legal-layout{
  max-width: 920px;
  margin: 0 auto;
}

/* TOC chips: smaller + cleaner */
.legal-toc{
  padding: 14px !important;
}
.legal-toc a{
  padding: 8px 10px !important;
  font-size: 12px !important;
  font-weight: 700;
  margin: 8px 8px 0 0 !important;
  border-radius: 999px !important;
  opacity: .92;
}

/* content card: tighter */
.legal-layout > article.legal-card{
  padding: 18px 18px 14px !important;
  border-radius: 18px;
}

/* headings: smaller + consistent */
.legal-card h2{
  font-size: 20px !important;
  margin: 18px 0 8px !important;
  letter-spacing: -0.25px;
}
.legal-card h2:first-of-type{
  margin-top: 0 !important;
}

/* optional subtle divider between sections */
.legal-card h2{
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.legal-card h2:first-of-type{
  border-top: 0;
  padding-top: 0;
}

/* body text: smaller + cleaner */
.legal-card p{
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin: 0 0 10px !important;
  color: rgba(244,247,255,.76);
}
.legal-card li{
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 6px 0 !important;
}
.legal-card ul{
  margin: 8px 0 12px 18px !important;
}

/* make links subtle (not screaming) */
.legal-card a{
  border-bottom: 1px solid rgba(72,183,255,.20) !important;
}
.legal-card a:hover{
  border-bottom-color: rgba(34,211,197,.30) !important;
}

/* meta chips smaller */
.legal-meta .chip{
  padding: 7px 10px !important;
  font-size: 11px !important;
}

/* reduce hero spacing a bit on legal pages */
.hero{
  padding-top: 34px !important;
  padding-bottom: 10px !important;
}
/* =============================
   LEGAL PAGES: ALIGN EVERYTHING
   (hero + TOC + content same width)
============================= */

/* one consistent reading width for ALL legal blocks */
.legal-hero,
.legal-wrap .legal-layout{
  max-width: 920px;
  margin: 0 auto;
}

/* keep the page feeling tight */
.legal-hero{
  padding-top: 28px !important;
  padding-bottom: 10px !important;
}

/* heading + chips on one line */
.legal-hero-row{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap; /* stacks nicely on small screens */
}

.legal-hero-row h1{
  margin: 0 !important;
}

/* chips should NOT drop lower than the heading row */
.legal-hero-row .legal-meta{
  margin-top: 0 !important;
}

/* make subtitle align perfectly too */
.legal-hero .hero-sub{
  max-width: 72ch;
}

/* TOC + content already stacked (1 column) */
.legal-layout{
  grid-template-columns: 1fr !important;
}

/* small screens: keep it clean */
@media (max-width: 700px){
  .legal-hero-row{
    align-items: flex-start;
  }
  .legal-hero-row .legal-meta{
    width: 100%;
  }
}

/* -----------------------------
   LEFT KARA ART (stable across resolutions)
------------------------------ */
.kara-band{
  position: relative;
  overflow: visible;
}

/* sticky anchor */
.kara-stick{
  position: sticky;
  top: 88px;
  z-index: 0;
  height: 1px;
  width: 100%;          /* ✅ NOT 1px */
  pointer-events: none;
}

/* image */
.kara-stick .kara-img{
  --kara-w: clamp(560px, 42vw, 900px);     /* ✅ actually responsive */
  --kara-peek: clamp(160px, 12vw, 320px);  /* how much shows inside page */

  /* match your .container width logic */
  --wrap: min(var(--container), calc(100vw - 2rem));
  --edge: calc((100vw - var(--wrap)) / 2);

  position: absolute;
  top: 0;

  /* place it left of container and let it peek in */
  left: calc(var(--edge) - 26px - var(--kara-w) + var(--kara-peek));

  width: var(--kara-w);
  height: auto;

  opacity: .25; /* bump this if you thought it “disappeared” */
  filter: drop-shadow(0 22px 60px rgba(0,0,0,.55));
}

/* keep content above it */
.kara-band > *:not(.kara-stick){
  position: relative;
  z-index: 1;
}
.kara-rail{
  animation: kara-breathe 7s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

@keyframes kara-breathe{
  0%,100% { transform: translateY(0) scale(1); opacity: .95; }
  50%     { transform: translateY(-10px) scale(1.02); opacity: 1; }
}

/* -----------------------------
   BLOG (blog.html + post.html)
------------------------------ */
.blog-controls{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap: 12px;
  margin: 14px 0 18px;
}

.field{
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,4,11,.28);
  color: rgba(244,247,255,.92);
  outline: none;
  backdrop-filter: blur(10px);
}
.field::placeholder{ color: rgba(244,247,255,.45); }
.field:focus{
  border-color: rgba(72,183,255,.26);
  box-shadow: 0 0 0 4px rgba(72,183,255,.08);
}

.post-featured{ margin-top: 14px; }
.featured-card{
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px;
  border-radius: 20px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,14,26,.20);
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
}

.featured-cover{
  display:block;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2,4,11,.18);
  text-decoration:none;
}
.featured-cover img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}
.featured-cover-ph{
  aspect-ratio: 16 / 10;
  display:grid;
  place-items:center;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(244,247,255,.65);
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(72,183,255,.15), transparent 45%),
    radial-gradient(900px 500px at 80% 60%, rgba(255,196,74,.12), transparent 45%),
    rgba(2,4,11,.18);
}

.featured-body{ padding: 6px 2px; }
.featured-kicker{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,247,255,.72);
  margin-bottom: 10px;
}
.featured-title{
  margin: 0 0 10px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.05;
}
.featured-mini{
  color: rgba(244,247,255,.60);
  font-size: 13px;
  margin-bottom: 12px;
}
.featured-excerpt{
  margin: 0 0 14px;
  color: rgba(244,247,255,.76);
}
.featured-ctas{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.blog-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.post-card{
  display:flex;
  flex-direction: column;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,14,26,.18);
  text-decoration:none;
  box-shadow: 0 16px 55px rgba(0,0,0,.30);
  transition: transform .18s ease, border-color .18s ease;
}
.post-card:hover{
  transform: translateY(-4px);
  border-color: rgba(72,183,255,.24);
}

.post-cover{
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(2,4,11,.18);
}
.post-cover img{
  width:100%;
  display:block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}
.post-cover-ph{
  aspect-ratio: 16 / 9;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing: .08em;
  color: rgba(244,247,255,.65);
  background:
    radial-gradient(800px 420px at 30% 20%, rgba(72,183,255,.12), transparent 45%),
    radial-gradient(800px 420px at 80% 70%, rgba(255,196,74,.10), transparent 45%),
    rgba(2,4,11,.18);
}

.post-body{ padding: 14px 14px 12px; }
.post-mini{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(244,247,255,.62);
  margin-bottom: 8px;
}
.post-title{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.15;
}
.post-excerpt{
  margin: 0 0 12px;
  color: rgba(244,247,255,.74);
  font-size: 14px;
}
.post-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2,4,11,.26);
  color: rgba(244,247,255,.70);
  font-size: 12px;
}

.post-hero{ padding-bottom: 8px; }
.post-breadcrumbs{ margin: 10px 0 10px; }
.post-crumb{
  color: rgba(244,247,255,.72);
  text-decoration:none;
}
.post-crumb:hover{ text-decoration: underline; }

.post-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(2,4,11,.25);
  color: rgba(244,247,255,.70);
  font-size: 12px;
}

.post-article{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,14,26,.18);
  padding: 14px;
  box-shadow: 0 20px 70px rgba(0,0,0,.32);
}
.post-cover{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 12px;
}
.post-cover img{ width:100%; display:block; object-fit: cover; aspect-ratio: 16/9; }

.prose{
  color: rgba(244,247,255,.84);
  font-size: 15px;
  line-height: 1.7;
}
.prose h2{
  margin: 18px 0 10px;
  font-size: 18px;
  line-height: 1.2;
}
.prose p{ margin: 0 0 14px; }
.prose ul{ margin: 8px 0 14px 18px; }
.prose li{ margin: 6px 0; }
.prose a{ color: rgba(244,247,255,.92); }

@media (max-width: 980px){
  .blog-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-card{ grid-template-columns: 1fr; }
  .blog-controls{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .blog-grid{ grid-template-columns: 1fr; }
}

/* -----------------------------
   MARKET TABLE (ONE CLEAN BLOCK)
   Replaces the separate skin cards + list.
------------------------------ */

/* make this section visually bigger/wider without affecting the rest of the site */
.price-panel{ --container: 1380px; }

.market-table{
  margin-top: 22px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,14,26,.26);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

.market-head,
.market-row{
  display:grid;
  grid-template-columns: 2.1fr 1fr 1fr 0.8fr;
  gap: 14px;
  align-items:center;
  padding: 16px 20px;
}

.market-head{
  background: rgba(2,4,11,.22);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.market-head .mh{
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .18px;
  color: rgba(244,247,255,.72);
  text-transform: uppercase;
}

.market-row{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* rarity background lives on ::before via existing .rarity-* classes */
.market-row::before{
  content:"";
  position:absolute;
  inset:-2px;
  opacity: .55;
  z-index: 0;
  pointer-events:none;
}

/* subtle sheen so the row looks “premium” */
.market-row::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  opacity: .60;
  background:
    radial-gradient(280px 160px at 18% 22%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(260px 170px at 86% 40%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), transparent 40%, rgba(0,0,0,.18));
  pointer-events:none;
}

.market-row > *{ position: relative; z-index: 2; }
.market-row:hover::after{ opacity: 1; }

.market-row.price-row{
  border-radius: 0;
  border: 0;
  background: rgba(8,14,26,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.market-row:last-child{ border-bottom: 0; }

.market-item{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.price-thumb{
  width: 92px;
  height: 54px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.55));
  pointer-events: none;
  user-select: none;
}

.market-meta{ min-width: 0; }

.market-title{
  font-weight: 950;
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: -0.2px;
  color: rgba(244,247,255,.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-sub{
  margin-top: 4px;
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

.skin-chip.chip-sm{
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 950;
}

.market-price{
  font-weight: 950;
  font-size: 19px;
  letter-spacing: -0.2px;
  color: rgba(244,247,255,.92);
}

.market-vol{
  font-size: 12px;
  color: rgba(244,247,255,.70);
}

.market-delta{ justify-self: end; }

/* kill old list spacing if still present */
.price-list{ margin-top: 0; }

@media (max-width: 720px){
  .market-head{ display:none; }

  .market-head,
  .market-row{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "item delta"
      "price delta"
      "vol delta";
    row-gap: 6px;
    align-items:start;
  }

  .market-item{ grid-area: item; }
  .market-price{ grid-area: price; }
  .market-vol{ grid-area: vol; }
  .market-delta{ grid-area: delta; align-self:center; }

  .price-thumb{ width: 74px; height: 46px; }
}

/* Blog card title: bold white (kills link blue/purple) */
.post-title{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.15;
  color: #fff;
  font-weight: 800;
}

/* Optional: stop the anchor itself from defaulting to link blue */
.post-card{
  color: rgba(244,247,255,.84);
}

.featured-title{
  color: #fff;
  font-weight: 800;
}

/* =========================================================
   BLACK + ORANGE THEME OVERRIDE (paste at END of main.css)
   ========================================================= */

:root{
  color-scheme: dark;

  /* Core */
  --bg: #050607;
  --bg2: #07090c;
  --panel: #0b0e12;
  --panel2: #0f131a;

  --text: #f4f6fb;
  --muted: rgba(244,246,251,.72);

  --border: rgba(255, 122, 0, .22);

  /* Accent */
  --accent: #ff7a00;
  --accent2: #ffb15a;
  --accentSoft: rgba(255, 122, 0, .14);
  --accentSoft2: rgba(255, 122, 0, .08);

  /* States */
  --good: #22c55e;
  --bad: #ef4444;
}

/* Global background + text */
html, body{
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(255,122,0,.14), transparent 55%),
    radial-gradient(900px 520px at 92% 14%, rgba(255,177,90,.10), transparent 52%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
}

/* Kill default link blue/purple everywhere */
a, a:visited{
  color: var(--accent2);
  text-decoration: none;
}
a:hover{
  color: var(--accent);
}

/* Selection */
::selection{
  background: rgba(255,122,0,.28);
  color: var(--text);
}

/* Top bar / header / footer */
.topbar,
header,
.footer,
footer{
  background: rgba(5,6,7,.55);
  border-bottom: 1px solid rgba(255,122,0,.12);
  backdrop-filter: blur(10px);
}

/* General containers / panels / cards (covers most of your UI) */
.card,
.panel,
.glass,
.post-card,
.snapshot-card,
.widget,
.box,
.section-card{
  background: linear-gradient(180deg, rgba(15,19,26,.86), rgba(11,14,18,.86));
  border: 1px solid rgba(255,122,0,.14);
  box-shadow:
    0 18px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,122,0,.06) inset;
}

.card:hover,
.post-card:hover,
.section-card:hover{
  border-color: rgba(255,122,0,.28);
  box-shadow:
    0 20px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,122,0,.10) inset;
}

/* Blog titles specifically (your screenshot problem) */
.post-title,
.post-card .post-title,
.post-card h3,
.post-card a h3{
  color: #fff !important;
  font-weight: 800 !important;
}
.post-card:visited .post-title{ color:#fff !important; }

/* Muted text */
.muted,
.sub,
.small,
.meta,
.kicker,
.post-excerpt,
.post-meta,
.card-meta{
  color: var(--muted);
}

/* Buttons */
.btn{
  background: rgba(255,122,0,.06);
  border: 1px solid rgba(255,122,0,.28);
  color: var(--text);
}
.btn:hover{
  background: rgba(255,122,0,.10);
  border-color: rgba(255,122,0,.42);
}

.btn.primary,
.btn.primary:visited{
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  border: 0;
  color: #0b0e12;
  box-shadow: 0 12px 34px rgba(255,122,0,.22);
}
.btn.primary:hover{
  filter: brightness(1.05);
  box-shadow: 0 14px 40px rgba(255,122,0,.28);
}

/* Chips / tags / pills */
.chip,
.tag,
.pill,
.badge{
  background: var(--accentSoft2);
  border: 1px solid rgba(255,122,0,.22);
  color: rgba(255,225,200,.92);
}
.chip:hover,
.tag:hover,
.pill:hover{
  background: var(--accentSoft);
  border-color: rgba(255,122,0,.34);
}

/* Inputs */
input, textarea, select{
  background: rgba(11,14,18,.92);
  border: 1px solid rgba(255,122,0,.18);
  color: var(--text);
}
input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: rgba(255,122,0,.55);
  box-shadow: 0 0 0 4px rgba(255,122,0,.16);
}

/* Tables (competition snapshot etc.) */
table{
  background: rgba(11,14,18,.78);
  border: 1px solid rgba(255,122,0,.14);
}
th{
  color: #fff;
  background: rgba(255,122,0,.08);
  border-bottom: 1px solid rgba(255,122,0,.18);
}
td{
  border-bottom: 1px solid rgba(255,122,0,.10);
}

/* Dividers */
hr,
.divider{
  border-color: rgba(255,122,0,.12);
}

/* If you have any “active/selected” nav states */
.active,
.is-active{
  color: var(--accent) !important;
}

/* Scrollbar (optional but matches theme) */
*{
  scrollbar-color: rgba(255,122,0,.45) rgba(0,0,0,.25);
}
*::-webkit-scrollbar{ height: 10px; width: 10px; }
*::-webkit-scrollbar-track{ background: rgba(0,0,0,.25); }
*::-webkit-scrollbar-thumb{
  background: rgba(255,122,0,.42);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.35);
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,122,0,.58); }

/* MOBILE: keep slider strictly horizontal */
@media (max-width: 900px){
  .slider-track{
    /* 1) If you added rotate/skew/translate for “border” styling, this is the culprit */
    transform: none !important;

    /* 2) Stop the page from also scrolling vertically while swiping the slider */
    touch-action: pan-x;
    overscroll-behavior-x: contain;

    /* 3) Just in case any vertical overflow is happening */
    overflow-y: hidden;

    font-size: small;
  }
}

/* Mobile: hide slider arrow buttons */
@media (max-width: 900px){
  .slider-btn,
  .slider-prev,
  .slider-next{
    display: none !important;
  }
}