/* X9 landing — vanilla CSS, mobile-first. Two cards: IN (neon) + OUT (tactical). */
:root {
  --bg:        #0a0e0a;
  --fg:        #e6edd8;
  --muted:     #8b9580;
  --in-grad:   linear-gradient(135deg,#6366f1 0%,#ec4899 55%,#f59e0b 100%);
  --in-accent: #ec4899;
  --out-bg:    #0f1208;
  --out-fg:    #b3c594;
  --out-accent:#a3e635;
  --out-border:#5c6e3e;
  /* ASK — white/light surface to contrast IN's neon and OUT's tactical green */
  --ask-bg:    #ffffff;
  --ask-fg:    #131722;
  --ask-muted: #5b6677;
  --ask-accent:#0a7cff;
  --ask-grad:  linear-gradient(135deg,#0a7cff 0%,#00b6d3 100%);
  --danger:    #ef4444;
}

*,*:before,*:after { box-sizing: border-box }
html,body { margin:0; padding:0 }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand { font-weight: 900; letter-spacing: .12em; font-size: 1.5rem; }
.lang { display: flex; gap: 0.75rem; font-size: .9rem; }
.lang a, .lang strong { color: var(--muted); text-decoration: none; }
.lang strong { color: var(--fg); }
.lang a:hover { color: var(--fg); }

main { flex: 1; max-width: 1200px; margin: 0 auto; padding: 2rem 1.25rem 3rem; width: 100%; }

.hero { text-align: center; padding: 2rem 0; }
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 .5rem; letter-spacing: -0.02em; }
.lede { color: var(--muted); margin: 0; font-size: 1.1rem; }

.modes {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}
@media (min-width: 720px) {
  .modes { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (min-width: 1080px) {
  .modes { grid-template-columns: 1fr 1fr 1fr; }
}

.mode {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--fg);
  padding: 2rem 1.5rem;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
  min-height: 280px;
}
.mode:hover { transform: translateY(-2px); }

.mode--in {
  background: var(--in-grad);
  box-shadow: 0 8px 30px rgba(99,102,241,.3);
}
.mode--in h2 { color: #fff; }
.mode--in .subtitle, .mode--in .desc, .mode--in .cta { color: rgba(255,255,255,.92); }
.mode--in .pill { background: rgba(255,255,255,.18); color: #fff; }
.mode--in:hover { box-shadow: 0 12px 40px rgba(236,72,153,.5); }

.mode--out {
  background: var(--out-bg);
  border: 1px solid var(--out-border);
  color: var(--out-fg);
}
.mode--out h2 { color: var(--out-accent); font-family: "Courier New", monospace; letter-spacing: .05em; }
.mode--out .subtitle { color: var(--out-accent); }
.mode--out .desc { color: var(--out-fg); }
.mode--out .pill { background: var(--out-accent); color: var(--out-bg); }
.mode--out .cta { color: var(--out-accent); }
.mode--out:hover { border-color: var(--out-accent); box-shadow: 0 0 30px rgba(163,230,53,.15); }

.mode--ask {
  background: var(--ask-bg);
  color: var(--ask-fg);
  border: 1px solid #e2e6ee;
}
.mode--ask h2 { color: var(--ask-fg); }
.mode--ask .subtitle { color: var(--ask-accent); }
.mode--ask .desc { color: var(--ask-muted); }
.mode--ask .pill { background: var(--ask-grad); color: #fff; }
.mode--ask .cta { color: var(--ask-accent); }
.mode--ask:hover { box-shadow: 0 12px 40px rgba(10,124,255,.25); border-color: var(--ask-accent); }

.pill {
  position: absolute;
  top: 1rem; right: 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.mode h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 0.25rem; }
.subtitle { font-size: 1rem; margin: 0 0 .75rem; opacity: .95; }
.desc { font-size: 0.95rem; line-height: 1.55; margin: 0 0 1.5rem; flex: 1; }
.cta { font-weight: 700; font-size: 1rem; margin-top: auto; }

.compare { margin: 3rem auto 0; max-width: 720px; }
.compare h3 { text-align: center; color: var(--muted); font-weight: 600; margin: 0 0 1rem; font-size: .9rem; letter-spacing: .15em; text-transform: uppercase; }
.compare__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}
@media (min-width: 600px) {
  .compare__grid { grid-template-columns: 1fr 1fr; }
}
/* 3-column row when IN / OUT / ASK comparison rows fit side-by-side. */
@media (min-width: 900px) {
  .compare__grid--3 { grid-template-columns: 1fr 1fr 1fr; }
}
.compare__grid > div {
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.compare__grid b {
  font-size: .7rem;
  letter-spacing: .15em;
  color: var(--muted);
  min-width: 2.5rem;
}
.compare__grid > div:nth-child(odd) b { color: var(--in-accent); }
.compare__grid > div:nth-child(even) b { color: var(--out-accent); }
/* IN/OUT/ASK 3-column variant — colour-key each badge to the matching mode. */
.compare__grid--3 > div b { color: var(--muted); }
.compare__grid--3 > div:nth-child(3n+1) b { color: var(--in-accent); }
.compare__grid--3 > div:nth-child(3n+2) b { color: var(--out-accent); }
.compare__grid--3 > div:nth-child(3n) b   { color: var(--ask-accent); }
.compare__grid span { font-size: .9rem; color: var(--fg); }

footer {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: .85rem;
  border-top: 1px solid rgba(255,255,255,.05);
  margin-top: 2rem;
}
footer a { color: var(--muted); text-decoration: none; margin: 0 0.5rem; }
footer a:hover { color: var(--fg); }
.sep { opacity: .5; }