:root {
  --blue-700: #3174b7;
  --blue-500: #5fa6d9;
  --blue-300: #a7c9e7;
  --orange-500: #f1822a;
  --ink: #0f1b2d;
  --bg: #f7fafc;
  --card: #ffffff;
  --muted: #5b728a;
  --ring: rgba(49,116,183,.35);
  --shadow: 0 10px 25px rgba(15,27,45,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--ink);background: radial-gradient(1200px 600px at 20% -10%, #e9f2fb 0%, #fff 55%), var(--bg)}
img{max-width:100%;display:block}
.container{width:min(1100px,92vw);margin-inline:auto}

.skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:.5rem;background:#000;color:#fff}

.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e7eef6;box-shadow:0 2px 12px rgba(15,27,45,.04)}
.head-wrap{display:flex;align-items:center;gap:clamp(12px,2vw,24px);padding:.85rem 0}
.logo{width:clamp(64px,12vw,96px);height:auto}
.titles .eyebrow{margin:0;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;color:var(--muted)}
.titles .title{margin:0;font-size:clamp(1.4rem,3.5vw,2.4rem);line-height:1.1;color:var(--blue-700);text-shadow:0 1px 0 #fff;font-weight:800}
.titles .sub{margin:.15rem 0 0;color:var(--muted)}

.partner-logos{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}
.partner-logos .logo-row{display:flex;gap:.75rem;align-items:center}
.partner-logos img{height:48px;width:auto;object-fit:contain}
.partner-logos img.artsalive-logo{height:42px}
.presented-label{font-weight:800;letter-spacing:.02em;color:var(--muted);text-transform:uppercase;font-size:.8rem}

.hero{position:relative;isolation:isolate;overflow:clip;background:linear-gradient(90deg, rgba(49,116,183,.03), rgba(241,130,42,.05))}
.hero-bg{position:absolute;inset:0;opacity:.2;background-size:cover;background-position:center;filter:saturate(105%) contrast(105%);z-index:-1}
.hero-inner{padding:clamp(2rem,8vw,6rem) 0;display:grid;gap:1rem}
.hero-headline{margin:0;font-weight:900;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(1.5rem,5vw,3rem);color:var(--orange-500)}
.hero-kicker{color:var(--muted);margin:0 0 .75rem}
.btn{--bg:var(--blue-700);--fg:#fff;--bd:transparent;display:inline-block;text-decoration:none;font-weight:700;padding:.85rem 1.05rem;border-radius:14px;background:var(--bg);color:var(--fg);border:2px solid var(--bd);box-shadow:var(--shadow);text-align:center}
.btn:hover{filter:brightness(1.03);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{--bg:#fff;--fg:var(--blue-700);--bd:var(--blue-300)}
.btn.outline{--bg:transparent;--fg:var(--blue-700);--bd:var(--blue-700);box-shadow:none}
.btn.small{padding:.6rem .8rem;font-size:.95rem;border-radius:12px}
.cta-row{display:grid;grid-template-columns:1fr;gap:.8rem;align-items:center}

.cards{padding:clamp(2rem,6vw,4rem) 0}
.section-title{font-size:clamp(1.25rem,2.5vw,1.75rem);margin:0 0 .25rem;color:var(--blue-700)}
.section-sub{color:var(--muted);margin:0 0 1.25rem}
.card-grid{display:grid;grid-template-columns: repeat(3, 1fr);gap:clamp(20px,2.5vw,32px)}
.card{background:var(--card);border:1px solid #e7eef6;border-radius:18px;padding:1.2rem;box-shadow:var(--shadow);display:grid;align-content:start;gap:.6rem}
.card h4{margin:.25rem 0;font-size:1.2rem}
.badge{width:max-content;background:#eff6fd;color:var(--blue-700);padding:.25rem .5rem;border-radius:999px;font-weight:700;font-size:.8rem;letter-spacing:.02em}

.download{background:linear-gradient(180deg,#f8fbff,#fff);border-top:1px solid #e7eef6}
.download-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(18px,3vw,32px);padding:clamp(2rem,6vw,4rem) 0}
.muted{color:var(--muted)}
.store-row{display:flex;flex-wrap:wrap;gap:.6rem;margin:.75rem 0 0}
.store-btn{background:#141414;color:#fff;padding:.8rem 1.1rem;border-radius:12px;text-decoration:none;font-weight:700}
.store-btn:hover{filter:brightness(1.1)}
.howto{margin-top:1rem}
.howto-steps{margin:.5rem 0 0 1rem}
.howto-steps li{margin:.25rem 0}

.grid-tiles{display:grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; margin-top:1rem}
.tile{background:#fff;border:1px solid #e7eef6;border-radius:16px;padding:1rem;box-shadow:var(--shadow);display:block;text-decoration:none;color:inherit}
.tile .thumb{background:linear-gradient(135deg,#e9f2fb,#fff);height:160px;border-radius:12px;border:1px solid #e7eef6}
.tile h4{margin:.6rem 0 .2rem}
.tile:hover{filter:brightness(1.02);transform:translateY(-1px)}

.site-footer{padding:2rem 0;background:#0f1b2d;color:#e6eef8;margin-top:2rem}
.footer-inner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:800}
.brand img{width:40px;height:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.footer-right{margin-left:auto;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.links{display:flex;gap:1rem;flex-wrap:wrap}
.links a{color:#e6eef8;text-decoration:none}
.contact-info{color:#e6eef8;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.contact-info a{color:#e6eef8;text-decoration:none;font-weight:700}
.tiny{font-size:.8rem;width:100%;opacity:.8;margin:.25rem 0 0}

.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(15,27,45,.5);padding:1rem}
.modal[aria-hidden="false"]{display:grid}
.modal-card{position:relative;background:#fff;width:min(900px,92vw);border-radius:16px;padding:1rem;box-shadow:var(--shadow);display:grid;gap:.75rem}
.modal-close{position:absolute;top:8px;right:10px;width:36px;height:36px;border-radius:999px;background:#f3f6fa;color:#304a6e;border:none;cursor:pointer;display:grid;place-items:center}
#map-frame{width:100%;height:min(70vh,520px);border:1px solid #e7eef6;border-radius:12px}
.modal-actions{display:flex;justify-content:flex-end}

@media (max-width:900px){
  .card-grid{grid-template-columns:1fr}
  .download-inner{grid-template-columns:1fr}
}
html{scroll-behavior:smooth}
.reveal{opacity:1;transform:none;transition:opacity .6s ease, transform .6s ease}
.js .reveal{opacity:0;transform:translateY(12px)}
.js .reveal.visible{opacity:1;transform:none}

@media (min-width: 900px){ .cta-row{grid-template-columns: repeat(3, minmax(180px,1fr)); } }