/* ===== Music & Sport — shared styles for the static pages =====
   (homepage, /method, /coaching, /academies)
   Theme: "LOIT black/green" — same tokens as app.html and glossary.html. */

:root{
  --green:#00C9A7; --greenBright:#21FDE1; --ink:#06251f;
  --bg0:#11202b; --bg1:#080A0E; --text:#eaf3f1; --muted:#9fb4b0;
  --line:rgba(255,255,255,0.09); --card:rgba(255,255,255,0.04);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Outfit', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1100px 900px at 12% -8%, rgba(0,201,167,.10), transparent 60%),
    radial-gradient(900px 900px at 112% 0%, rgba(33,253,225,.06), transparent 55%),
    radial-gradient(140% 150% at 0% 0%, var(--bg0) 0%, var(--bg1) 58%) fixed;
  color:var(--text); line-height:1.6; min-height:100vh;
  padding:48px 20px 72px;
}
.wrap{ max-width:720px; margin:0 auto; }
.brand{ font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
.brand a{ color:inherit; text-decoration:none; }
.brand a:hover{ color:var(--green); }
h1{ font-size:clamp(34px,7vw,52px); font-weight:800; letter-spacing:-0.5px; line-height:1.08; }
h1 .grad{
  background:linear-gradient(135deg, var(--greenBright), var(--green));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.accent{ width:64px; height:5px; background:var(--green); border-radius:3px; margin:16px 0 14px; }
.sub{ font-size:clamp(17px,3.4vw,21px); color:var(--muted); margin-bottom:40px; }

.group{ font-family:'Space Mono', monospace; font-size:13px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--green);
  margin:44px 0 14px; }

.hero-video{ max-width:320px; margin:30px auto 0; }
.hero-video iframe{ display:block; width:100%; aspect-ratio:9/16; border:1px solid #ffffff26;
  border-radius:16px; background:#000; box-shadow:0 6px 16px rgba(0,0,0,.18); }

.card{
  display:block; background:#ffffff10; border:1px solid #ffffff26;
  border-radius:16px; padding:20px; margin:12px 0;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  color:inherit; text-decoration:none;
}
a.card{ transition:border-color .2s ease, transform .15s ease, box-shadow .2s ease; }
a.card:hover{ border-color:rgba(0,201,167,0.5); transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.25); }
.card-title{ font-size:20px; font-weight:800; color:var(--greenBright); }
.card-sub{ font-size:15.5px; color:var(--muted); margin-top:4px; }
.card p{ color:#dce9e6; margin-top:8px; font-size:16px; }

/* Card with an image on the left */
.door{ display:flex; align-items:center; gap:18px; }
.door .thumb{ width:96px; height:96px; border-radius:14px; object-fit:cover; flex:0 0 auto;
  border:1px solid #ffffff1f; }
.door .door-body{ flex:1 1 auto; min-width:0; }
.door .door-body p{ margin-top:6px; }
@media (max-width:540px){
  /* Balanced phone layout: image and title share the first row, vertically
     centered; description and buttons span the full card width below. */
  .door{ display:grid; grid-template-columns:64px 1fr; gap:0 14px; align-items:center; }
  .door .thumb{ width:64px; height:64px; grid-row:1; grid-column:1; }
  .door .door-body{ display:contents; }
  .door .card-title{ grid-row:1; grid-column:2; font-size:19px; }
  .door .door-body p{ grid-column:1 / -1; margin-top:12px; }
  .door .btn-row{ grid-column:1 / -1; margin-top:14px; }
}

/* Coming-soon tag */
.soon{ display:inline-block; font-family:'Space Mono', monospace; font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--greenBright);
  border:1px solid rgba(33,253,225,.45); border-radius:999px; padding:3px 10px;
  margin-left:10px; vertical-align:middle; }

.btn-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.cta{ display:inline-block; background:var(--green); color:var(--ink); font-weight:700;
  text-decoration:none; padding:13px 22px; border-radius:999px; font-size:16px; }
.cta:hover{ background:var(--greenBright); }
.cta.big{ background:linear-gradient(180deg, var(--greenBright), var(--green)); }
/* No backdrop-filter here: these sit inside already-blurred cards, and Safari
   mis-renders nested backdrop blurs (paints the button solid white). */
.cta.ghost{ background:rgba(255,255,255,.08); color:var(--text); border:1px solid #ffffff30; }
.cta.ghost:hover{ border-color:var(--green); color:var(--greenBright); background:rgba(255,255,255,.08); }

.socials{ display:flex; gap:14px; margin-top:16px; }
.soc{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid #ffffff26; color:var(--text); }
.soc:hover{ border-color:var(--green); color:var(--greenBright); }

.num{ display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; flex:0 0 auto;
  background:rgba(0,201,167,.15); color:var(--greenBright);
  font-family:'Space Mono', monospace; font-weight:700; font-size:14px; margin-right:12px; }
.li-row{ display:flex; align-items:baseline; }

table.grid{ width:100%; border-collapse:collapse; font-size:14.5px; }
table.grid th, table.grid td{ border:1px solid var(--line); padding:9px 10px; text-align:left; }
table.grid thead th{ color:var(--greenBright); font-weight:700; }
table.grid tbody th{ color:var(--green); font-weight:700; white-space:nowrap; }
.table-scroll{ overflow-x:auto; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chip{ background:rgba(0,201,167,.15); color:var(--greenBright); border-radius:999px;
  padding:6px 13px; font-size:13.5px; font-weight:600; }

.note{ font-size:14px; color:var(--muted); font-style:italic; }

.foot{ margin-top:56px; padding-top:26px; border-top:1px solid var(--line);
  font-size:14px; color:#cfe7e1; }
.foot a{ color:inherit; }
.foot a:hover{ color:var(--greenBright); }
.foot-links{ margin-bottom:10px; }
.foot-links a{ text-decoration:none; margin-right:14px; }
.mail{ display:inline-flex; align-items:center; gap:8px; margin-bottom:10px;
  color:inherit; text-decoration:none; }
.mail:hover{ color:var(--greenBright); }

@media (max-width:540px){
  body{ padding:36px 16px 60px; }
  .btn-row{ gap:8px; }
  .btn-row .cta{ flex:1 1 auto; padding:11px 16px; font-size:14px;
    white-space:nowrap; text-align:center; }
}