/* ZenTurf — Calm PMU listing */
:root{
  --bg:#0b1220;
  --bg-soft:#0e172a;
  --card:#0f1b31;
  --card-2:#0c1629;
  --primary:#34d399;
  --primary-2:#2dd4bf;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --ring: rgba(52,211,153,.3);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 1200px at 10% 10%, #0e1a30 0%, var(--bg) 60%),
              radial-gradient(900px 900px at 90% 20%, #0d1326 0%, transparent 60%),
              linear-gradient(180deg, #0b1220, #0b1220);
  color:var(--text);
}
.container{max-width:1100px;margin:0 auto;padding:0 24px}

/* Subtle breathing gradient */
.bg-breath{position:fixed;inset:0;pointer-events:none;opacity:.4;background:radial-gradient(40% 40% at 50% 40%, rgba(45,212,191,.20), transparent 60%),radial-gradient(35% 35% at 70% 60%, rgba(52,211,153,.18), transparent 60%);animation:breath 12s ease-in-out infinite}
@keyframes breath{0%,100%{filter:blur(40px);transform:scale(1)} 50%{filter:blur(60px);transform:scale(1.03)}}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:linear-gradient(to bottom, rgba(11,18,32,.8), rgba(11,18,32,.2));backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:36px;height:36px;border-radius:12px;background:conic-gradient(from 180deg, var(--primary), var(--primary-2), var(--primary));box-shadow:0 0 0 6px rgba(45,212,191,.08)}
.brand-text{display:flex;flex-direction:column}
.brand-title{font-weight:700;letter-spacing:.2px}
.brand-sub{font-size:.78rem;color:var(--muted)}
.nav{display:flex;gap:18px}
.nav a{color:var(--text);text-decoration:none;font-weight:500;opacity:.8}
.nav a:hover{opacity:1}
.btn{border:none;border-radius:12px;padding:10px 14px;font-weight:600;cursor:pointer;transition:transform .15s ease, box-shadow .2s ease, background .2s ease}
.btn.primary{background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#052017;box-shadow:0 8px 24px rgba(45,212,191,.25)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.12)}
.btn.soft{background:rgba(255,255,255,.06);color:var(--text);border:1px solid rgba(255,255,255,.08)}

/* Hero */
.hero{padding:56px 0 28px;border-bottom:1px solid rgba(255,255,255,.06)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 10px}
.hero p{color:var(--muted);margin:0 0 20px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.breath-circle{position:relative;aspect-ratio:1/1;background:radial-gradient(circle at 50% 50%, #0d1a2e 0%, #0a1322 70%);border-radius:24px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.ring{position:absolute;width:60%;height:60%;border-radius:50%;border:2px solid var(--ring);animation:ring 7s ease-in-out infinite}
.ring.delay{animation-delay:1.2s}
.hint{position:absolute;bottom:10%;font-size:.9rem;color:var(--muted)}
@keyframes ring{0%,100%{transform:scale(.95);opacity:.8} 50%{transform:scale(1.05);opacity:1}}

/* Ticker */
.calm-ticker{margin-top:22px;border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.ticker-track{display:flex;gap:18px;padding:12px 16px;white-space:nowrap;animation:ticker 40s linear infinite}
.ticker-item{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.ticker-item .tag{font-size:.78rem;color:var(--muted)}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Sections */
.section{padding:40px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.section-head h2{margin:0 0 8px}
.section-head .muted{color:var(--muted)}

/* Filters */
.filters{margin:14px 0 18px;padding:12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.chip-group{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.chip{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer}
.chip.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(52,211,153,.15)}
.filters-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{color:var(--muted);font-size:.85rem}
.field input{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:#0c1527;color:var(--text)}

/* Cards */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}.cards-grid{grid-template-columns:repeat(2,1fr)}.filters-row{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards-grid{grid-template-columns:1fr}.nav{display:none}}
.card{background:linear-gradient(180deg, var(--card), var(--card-2));border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.card .meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.85rem}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:.78rem;color:var(--muted)}
.card h3{margin:4px 0 0;font-size:1.05rem}
.small{font-size:.88rem}
.muted{color:var(--muted)}

/* Calendar */
.calendar{border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:12px;background:rgba(255,255,255,.03)}
.calendar-head{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}
.icon-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--text);border-radius:10px;padding:6px 10px;cursor:pointer}
.month-label{font-weight:700}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.day{padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:#0c1527;text-align:center;color:var(--text)}
.day.has{outline:2px solid rgba(45,212,191,.25)}

/* Tracks */
.chips-wrap{display:flex;flex-wrap:wrap;gap:10px}
.track-chip{padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);cursor:pointer}
.track-chip.active{border-color:var(--primary)}

/* About */
.about{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.about-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.about-card{padding:14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:6px}
@media (max-width:900px){.about{grid-template-columns:1fr}.about-cards{grid-template-columns:1fr}}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.06);padding:18px 0;margin-top:20px;background:linear-gradient(to top, rgba(255,255,255,.02), transparent)}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.footer a{color:var(--muted);text-decoration:none}

/* Focus/Reduced motion mode */
.focus-mode .bg-breath{animation-play-state:paused;opacity:.22}
.focus-mode .ring{animation-duration:12s}
.focus-mode .ticker-track{animation-duration:80s}
.focus-mode *{scroll-behavior:auto}