/* ===== Darby Bailey – Arcade Neon Theme (v2) ===== */
:root{
  /* Brand accents */
  --db-gold:#D4A017;
  --db-lime:#A9D62A;
  --db-pink:#FF4BD1;     /* a bit hotter so it reads over darks */
  --db-lilac:#E8A7FF;    /* soft purple highlight */
  --db-sky:#B9C3FF;      /* light steel/sky */
  --db-black:#000000;
  --db-white:#FFFFFF;

  /* Keep legacy names so JS doesn’t break */
  --dsl-deep-blue:#151729; /* night blue instead of near-black */
  --dsl-soft-gray:#D3D3D3;

  /* Runtime accents */
  --brand:var(--db-gold);
  --bg-accent:#1D2040; /* for Pong blend */
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#f1f1f1;

  /* brighter, colorful background */
  background:
    radial-gradient(1200px 600px at 55% -15%, color-mix(in oklab,var(--db-pink) 30%, transparent) 0%, transparent 60%),
    radial-gradient(1100px 700px at 10% 15%, color-mix(in oklab,var(--db-lilac) 24%, transparent) 0%, transparent 60%),
    radial-gradient(1200px 700px at 65% 65%, color-mix(in oklab,var(--db-lime) 18%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, #101223 0%, #12142A 38%, #191a39 70%, #202248 100%);
}

/* slight CRT texture */
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025), rgba(255,255,255,.025) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}

/* Pong sits under everything */
#pong{position:fixed;inset:0;z-index:0;opacity:.28}

/* Layout */
.page{position:relative;z-index:1}
.ribbon{
  width:100%; text-align:center; padding:10px 14px; font-size:14px;
  background:linear-gradient(90deg,#0c1030,#0b0e2a);
  color:#E7ECFF; border-bottom:1px solid rgba(255,255,255,.08)
}
.ribbon .sep{opacity:.55;margin:0 8px}

/* Header */
.nav{max-width:1100px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:14px}
.logo{
  width:44px;height:44px;border-radius:10px;object-fit:cover;
  border:2px solid rgba(255,255,255,.10);
  box-shadow:0 0 18px color-mix(in oklab,var(--db-pink) 35%, transparent)
}
.name{font-weight:800}
.sub{font-size:12px;color:#cbd0ff;margin-top:2px;opacity:.85}
.links .btn{margin-left:8px}

/* Hero */
.container{max-width:1100px;margin:0 auto;padding:24px}
.hero{padding:20px 0 10px;text-align:center}
.hero h1{
  font-family:"Press Start 2P",system-ui,monospace;
  font-size:clamp(18px,7vw,24px);
  line-height:1.03;margin:0;
  color:#fff;
  text-shadow:
    0 0 10px color-mix(in oklab,var(--db-pink) 70%, transparent),
    0 0 22px color-mix(in oklab,var(--db-pink) 35%, transparent);
}
.tagline{max-width:860px;margin:12px auto 0;font-size:18px;color:#E6E6FA}
.context{max-width:860px;margin:9px auto 0;color:#CBD1FF}

/* Buttons */
.cta-row{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block;padding:12px 14px;border-radius:14px;text-decoration:none;
  color:#0a0a0b;background:#EFEFEF;border:2px solid #fff;
  box-shadow:0 0 18px rgba(255,255,255,.12)
}
.btn.secondary{
  background:linear-gradient(180deg, color-mix(in oklab,var(--brand) 92%, #fff) 0%, var(--brand) 90%);
  color:#0a0a0b;border-color:transparent;
  box-shadow:0 0 24px color-mix(in oklab,var(--brand) 55%, #000)
}
.btn.ghost{
  background:transparent;border-color:var(--db-pink);color:var(--db-pink);
  box-shadow:0 0 16px color-mix(in oklab,var(--db-pink) 50%, transparent);
}
.btn:hover{transform:translateY(-132)}
.btn:active{transform:translateY(0)}




/* Pillars */
.pillars{margin:34px 0 28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{
  position:relative;
  background:linear-gradient(180deg,#131421,#0f1020);
  border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:18px 18px 20px;
  box-shadow:0 18px 52px rgba(0,0,0,.55);
}
.card::before{
  /* colored rim glow per card (pink, lime, gold) */
  content:""; position:absolute; inset:-2px; border-radius:20px; z-index:-1;
  background:
    linear-gradient(90deg, var(--db-pink), transparent),
    linear-gradient(90deg, transparent, var(--db-lime)),
    linear-gradient(0deg, transparent, color-mix(in oklab,var(--db-gold) 70%, transparent));
  filter:blur(16px); opacity:.5;
}
.card h3{margin:0 0 8px;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.08)}
.card p{color:#E8E8FF}

/* Stops grid (unchanged neon buttons) */
.stops{margin:40px 0 18px;text-align:center}
.stops h2{margin:0 0 14px}
.stops-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:980px;margin:0 auto}
.neon{
  position:relative;height:96px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;overflow:hidden;background:#101226;color:#fff;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 48px rgba(0,0,0,.5), inset 0 0 30px rgba(255,255,255,.03)
}
.neon::before{
  content:"";position:absolute;inset:-25%;
  background: conic-gradient(var(--n1), var(--n2), var(--n3), var(--n1));
  animation: neonSpin 5.8s linear infinite;
  filter:saturate(190%) brightness(1.3);
}
.neon::after{
  content:"";position:absolute;inset:4px;border-radius:12px;
  background:linear-gradient(180deg,#14162b,#0e1122);
  box-shadow: inset 0 0 22px rgba(0,0,0,.55), 0 0 20px rgba(0,0,0,.25);
}
.neon .label{
  position:relative;z-index:1;font-weight:800;letter-spacing:.4px;
  text-shadow:0 0 8px color-mix(in oklab, var(--n2) 70%, white)
}
.neon .here{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  font-style:normal;font-weight:700;font-size:12px;background:var(--n2);color:#111
}

/* Footer */
.footer{margin:46px 0 12px;text-align:center;color:#cdd3ff;font-size:14px}

/* Responsive */
@media (max-width:900px){
  .pillars{grid-template-columns:1fr}
  .stops-grid{grid-template-columns:1fr 1fr}
}

/* Animations */
@keyframes neonSpin { to { transform: rotate(1turn) } }

/* Context links — force brand colors for these two URLs */
.context a[href*="darbybailey.com"],
.context a[href*="darbybailey.com"]:visited {
  color: #ff2efc !important;         /* neon pink */
  text-shadow: 0 0 8px #ff2efc, 0 0 16px #ff69f9;
  font-weight: 700;
}

.context a[href*="pipprojects.com"],
.context a[href*="pipprojects.com"]:visited {
  color: #ff3b3b !important;         /* neon red */
  text-shadow: 0 0 8px #ff3b3b, 0 0 16px #ff7070;
  font-weight: 700;
}

/* Skinny gold SEO line above footer */
.seo-footer-wrap{
  max-width: 1100px;
  margin: 26px auto 6px;            /* room from the cards, tight to footer */
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06); /* subtle divider */
}

.seo-footer-text{
  font-size: clamp(.62rem, .95vw, .74rem); /* tiny, responsive */
  font-weight: 300;                         /* skinny */
  letter-spacing: .15px;                    /* light tracking = crisp */
  line-height: 1.35;
  text-align: center;
  max-width: 880px;
  margin: 8px auto 0;
  color: rgba(212,160,23,.78);              /* soft gold */
  text-shadow: 0 0 4px rgba(212,160,23,.35);/* faint glow */
  -webkit-font-smoothing: antialiased;
  opacity: .85;                              /* dial it down */
}

/* Override CTA buttons to neon blue */
.btn,
.btn.secondary,
.btn.ghost {
  background: linear-gradient(180deg, #4ddfff 0%, #1cb0f6 100%);
  color: #0a0a0b;
  border: none;
  box-shadow: 0 0 16px #4ddfff, 0 0 32px #1cb0f6;
  font-weight: 600;
}

/* Optional: tweak hover for extra glow */
.btn:hover,
.btn.secondary:hover,
.btn.ghost:hover {
  box-shadow: 0 0 20px #6eeaff, 0 0 40px #33cfff;
  transform: translateY(-2px);
}

/* === Tools Section === */
/* Container for the interactive demo and upcoming tools */
.tools{
  margin:40px 0;
}
.tools h2{
  text-align:center;
  margin-bottom:22px;
  font-size:clamp(1.3rem,4.5vw,1.6rem);
  color:#f7f7fa;
  text-shadow:0 0 10px rgba(255,255,255,.06);
}

/* Starlink demo bar spans full width */
.starlink-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(180deg,#121a34,#0e1428);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:24px 28px;
  box-shadow:0 14px 36px rgba(0,0,0,.55);
  margin-bottom:32px;
}
.starlink-content{
  max-width:650px;
}
.starlink-bar h3{
  margin:0 0 8px;
  font-size:clamp(1.1rem,4vw,1.5rem);
  font-weight:700;
  color:#fff;
  text-shadow:none;
}
.starlink-bar p{
  margin:0;
  font-size:clamp(.9rem,3.2vw,1.1rem);
  color:#d4d7ef;
  line-height:1.5;
}
.starlink-cta{
  margin-left:auto;
  white-space:nowrap;
}

/* Upcoming tools grid layout */
.upcoming-tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:20px;
}

/* Individual tool cards */
.tool-card{
  position:relative;
  background:linear-gradient(180deg,#131421,#0f1020);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:20px 22px 22px;
  box-shadow:0 14px 42px rgba(0,0,0,.55);
}
.tool-card h3{
  margin:0 0 8px;
  font-size:1rem;
  font-weight:700;
  color:#fff;
  text-shadow:none;
}
.tool-card p{
  margin:0;
  font-size:.92rem;
  color:#d2d4ef;
  line-height:1.5;
}

/* Badge indicating upcoming status */
.badge-soon{
  display:inline-block;
  margin-top:14px;
  padding:6px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  color:#f9c74f;
  font-weight:700;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.4px;
  box-shadow:0 0 12px rgba(0,0,0,.35);
}

/* Responsive adjustments for the starlink bar */
@media (max-width:700px){
  .starlink-bar{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }
  .starlink-cta{
    margin-left:0;
    margin-top:18px;
  }
}