:root{
  /* default to a light (white) theme */
  --bg:#ffffff;
  --card:#f7f9fb;
  --accent:#36618E; /* primary accent from squash logo */
  --accent-2:#FA9D33; /* secondary warm tone */
  --accent-3:#149992; /* tertiary cool tone */
  --muted:#475569;
  --text:#081126;
  --glass: rgba(0,0,0,0.04);
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial; margin:0; color:var(--text); background:var(--bg);} 
.container{max-width:1100px;margin:0 auto;padding:28px}
.site-header{position:sticky;top:0;background:var(--accent);color:#ffffff;backdrop-filter: blur(6px);z-index:1000}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{height:120px;width:auto;display:inline-block}
.site-header .brand-text{font-weight:800;color:#ffffff;font-size:38px}
.site-header .nav a{color:#ffffff;margin-left:18px;text-decoration:none}
.site-header .nav a.cta{background:#ffffff;color:var(--accent);padding:8px 12px;border-radius:8px}
.hero{padding:60px 0}
.hero-grid{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:center}
.lead{color:var(--muted);font-size:18px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none}
.btn.primary{background:var(--accent-3);color:#fff;position:relative;overflow:visible}
.btn.primary::before{content:'';position:absolute;left:0;right:0;top:0;height:0;border-top:4px solid transparent;border-radius:12px 12px 0 0;transition:all 180ms ease}
.btn.primary:hover::before{height:4px;border-top-color:var(--accent-2)}
.btn.ghost{border:1px solid rgba(255,255,255,0.06);color:var(--text);background:transparent}
.quick-features{display:flex;gap:12px;list-style:none;padding:0;margin-top:18px}
.quick-features li{background:var(--glass);padding:8px 10px;border-radius:8px;color:var(--muted);font-size:14px}
.phone-mock img{width:100%;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,0.6)}
.features{padding:40px 0}
.features .grid{position:relative}
.features article{position:relative}
.coming-soon-badge{position:absolute;top:12px;right:12px;background:var(--accent-3);color:#fff;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;box-shadow:0 6px 18px rgba(20,153,146,0.08);z-index:2;border-top:3px solid var(--accent-2)}

.coming-soon{background:linear-gradient(90deg,rgba(20,153,146,0.06),rgba(250,157,51,0.04));border-left:4px solid var(--accent-2);padding:12px 16px;margin-bottom:16px;border-radius:8px;display:flex;gap:12px;align-items:center}
.coming-soon strong{color:var(--accent-3);margin-right:6px}
.coming-soon span{color:var(--muted)}
.features .grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.features article{background:var(--card);padding:18px;border-radius:12px}
.how{padding:40px 0}
.steps{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.steps li{background:var(--card);padding:16px;border-radius:10px}
.screens .shots{display:flex;gap:8px}
.screens img{width:32%;border-radius:10px}
.cta-join{background:linear-gradient(180deg,rgba(255,107,107,0.06),transparent);padding:40px 0;margin-top:40px}
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:18px 0;margin-top:40px}
.foot-links a{color:var(--muted);margin-left:12px}

@media(max-width:900px){
  /* medium screens: adjust layout and header to an intermediate scale */
  .site-header .container{padding:10px 16px}
  .brand-logo{height:88px}
  .site-header .brand-text{font-size:28px}
  .site-header .nav a{margin-left:12px}
  .site-header .nav a.cta{padding:7px 11px}

  .hero-grid{grid-template-columns:1fr}
  .phone-mock{order:-1}
  .features .grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .screens img{width:48%}
}

/* Responsive header/logo tweaks for narrow viewports */
@media (max-width: 600px) {
  .site-header .container{padding:8px 12px}
  .brand-logo{height:56px}
  .site-header .brand-text{font-size:20px}
  .site-header .nav a{margin-left:10px;font-size:14px}
  .site-header .nav a.cta{padding:6px 10px;font-size:13px}
  .coming-soon{font-size:14px;padding:10px}
  .coming-soon-badge{top:8px;right:8px;font-size:11px;padding:5px 8px}
}
/* apply the original dark theme when the user prefers dark mode */
/*@media(prefers-color-scheme:dark){
  :root{--bg:#06121a;--card:#0b1320;--text:#e6eef6;--muted:#9aa4b2;--glass: rgba(255,255,255,0.04);--accent:#ff6b6b;--accent-2:#ffd166}
  body{background:linear-gradient(180deg,#06121a,#071521 60%)}
}*/