:root {
  --ink: #101020;
  --muted: #69677b;
  --purple: #6d45e8;
  --purple-dark: #352078;
  --purple-soft: #f2edff;
  --blue: #3877ee;
  --blue-soft: #edf4ff;
  --orange: #ff6b2c;
  --orange-dark: #f75616;
  --orange-soft: #fff0e7;
  --line: #e7e3ef;
  --surface: #ffffff;
  --page: #fbfaff;
  --radius: 26px;
  --shadow: 0 24px 70px rgba(42, 30, 96, .15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 14px;
  z-index: 50;
  width: min(1180px, calc(100% - 40px));
  min-height: 68px;
  margin: 14px auto 0;
  padding: 10px 18px 10px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 14px 40px rgba(46, 33, 98, .08);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; }
.brand-logo { display: block; width: 36px; height: auto; }
.brand-copy { display: flex; flex-direction: column; line-height: .95; }
.brand-copy strong { font-size: 22px; letter-spacing: -.03em; }
.brand-copy small { margin-top: 4px; color: #69677b; font-size: 10px; }
.desktop-nav { display: flex; gap: 34px; align-items: center; color: #333248; font-size: 14px; }
.desktop-nav a, .login-link { transition: color .2s ease; }
.desktop-nav a:hover, .login-link:hover { color: var(--purple); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 20px; }
.login-link { font-size: 14px; }
.menu-button { display: none; border: 0; background: transparent; font-size: 24px; color: var(--ink); cursor: pointer; }
.mobile-nav { display: none; }

.button {
  min-height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 15px;
  font-weight: 750;
  font-size: 15px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: linear-gradient(135deg, #ff812f, var(--orange-dark)); box-shadow: 0 14px 30px rgba(255, 105, 43, .28); }
.button-primary:hover { box-shadow: 0 18px 34px rgba(255, 105, 43, .36); }
.button-secondary { color: #28253d; border: 1px solid #b9b1cc; background: rgba(255,255,255,.72); }
.button-small { min-height: 44px; padding: 0 18px; border-radius: 13px; }
.play-dot { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 50%; background: #f0edfa; color: #363051; font-size: 10px; }

.hero { position: relative; overflow: hidden; padding: 84px 0 44px; background: radial-gradient(circle at 15% 20%, #ffffff 0 30%, transparent 55%), linear-gradient(135deg, #faf9ff 15%, #f2efff 55%, #e7efff 100%); }
.hero::after { content:""; position:absolute; right:-120px; top:-200px; width:620px; height:620px; border-radius:50%; background: radial-gradient(circle, rgba(61,104,255,.30), rgba(109,69,232,.18) 40%, transparent 68%); filter: blur(16px); }
.hero-glow { position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; }
.hero-glow-one { width:300px; height:300px; left:-80px; bottom:-120px; background:rgba(255,132,67,.14); }
.hero-glow-two { width:380px; height:380px; right:18%; top:8%; background:rgba(107,70,232,.16); }
.hero-grid { position:relative; z-index:2; display:grid; grid-template-columns: .95fr 1.05fr; gap:58px; align-items:center; }
.hero-copy { padding: 34px 0; }
.eyebrow { margin: 0 0 18px; color: #8166e5; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow span { color: var(--orange); }
.hero h1 { max-width: 620px; margin:0; font-size: clamp(48px, 5.2vw, 72px); line-height: .99; letter-spacing: -.045em; }
.hero h1 span, .section-heading h2 span, .faq-grid h2 span { color: var(--purple); }
.hero-text { max-width: 580px; margin: 28px 0 0; color: #444157; font-size: 18px; line-height: 1.62; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.hero-proof { display:flex; gap:18px; flex-wrap:wrap; margin-top:32px; color:#59566a; font-size:13px; }
.hero-proof span::first-letter { color: var(--purple); }

.hero-visual { position:relative; min-height:560px; display:flex; align-items:center; justify-content:center; }
.app-shell { position:relative; z-index:3; width: 100%; max-width: 610px; min-height: 470px; display:grid; grid-template-columns: 155px 1fr; transform: perspective(1500px) rotateY(-4deg) rotateX(1deg); border:1px solid rgba(255,255,255,.6); border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 35px 80px rgba(40,32,111,.24); }
.app-sidebar { padding:24px 14px; color:#d9ddff; background:linear-gradient(180deg,#151b43,#11152f 68%,#0b1026); }
.mini-brand { display:flex; align-items:center; gap:8px; margin-bottom:28px; color:#fff; }
.mini-brand span:last-child { display:flex; flex-direction:column; }
.mini-brand small { font-size:7px; color:#b8bedb; }
.mini-bars { height:26px; display:flex; align-items:center; gap:2px; }
.mini-bars i { width:3px; border-radius:99px; background:#8f67ff; }
.mini-bars i:nth-child(1){height:10px}.mini-bars i:nth-child(2){height:20px}.mini-bars i:nth-child(3){height:26px}.mini-bars i:nth-child(4){height:14px}
.sidebar-link { padding:10px 11px; display:flex; align-items:center; gap:9px; border-radius:10px; font-size:10px; margin:3px 0; }
.sidebar-link.active { color:#fff; background:linear-gradient(90deg,#6150ea,#4157d9); }
.app-main { padding:24px 24px 20px; background:linear-gradient(180deg,#fff,#fbfaff); }
.app-topline { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.app-topline > div { display:flex; flex-direction:column; gap:4px; }
.app-topline strong { font-size:17px; }
.app-topline small { color:#767386; font-size:10px; }
.level-pill { padding:8px 10px; border-radius:999px; background:#f2effa; font-size:9px; white-space:nowrap; }
.session-card { margin-top:18px; padding:15px; border-radius:16px; background:linear-gradient(135deg,#eee9ff,#f6f2ff); }
.session-heading { display:flex; justify-content:space-between; align-items:center; font-size:11px; }
.session-heading b { margin-left:6px; padding:3px 6px; color:#6953d8; background:#dfd8ff; border-radius:999px; font-size:8px; }
.session-heading > strong { color:#5a4ed2; font-size:14px; }
.session-content { display:grid; grid-template-columns:62px 1fr auto; gap:12px; align-items:center; margin-top:11px; }
.album-art { height:62px; display:grid; place-items:center; border-radius:10px; color:#fff; font-size:30px; background:linear-gradient(145deg,#1f2b59,#8b5be8 65%,#ff8a43); }
.session-copy { display:flex; flex-direction:column; gap:5px; }
.session-copy strong { font-size:11px; }
.session-copy small { color:#6f6a7d; font-size:8px; line-height:1.4; }
.session-copy button { width:fit-content; padding:6px 10px; border:0; border-radius:8px; color:#fff; background:linear-gradient(135deg,#ff812f,#ff5b21); font-size:8px; font-weight:800; }
.round-play { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#6654e4; font-size:8px; }
.exercise-list { margin-top:14px; }
.exercise-list h3, .progress-card h3 { margin:0 0 9px; font-size:10px; }
.exercise-row { min-height:33px; display:grid; grid-template-columns:22px 1fr auto 22px; gap:8px; align-items:center; border-bottom:1px solid #eeeaf5; font-size:8px; }
.exercise-number { width:19px; height:19px; display:grid; place-items:center; border-radius:50%; color:#654ddd; background:#ece7ff; font-weight:800; }
.exercise-row small { color:#777388; }
.exercise-row b { color:#6e57eb; font-size:8px; }
.exercise-row .done { width:18px; height:18px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#54d7b0; }
.progress-card { display:grid; grid-template-columns: 1fr auto; gap:15px; align-items:end; margin-top:14px; }
.week-bars { height:46px; display:flex; align-items:flex-end; gap:5px; }
.week-bars span { width:10px; height:var(--h); border-radius:4px 4px 1px 1px; background:linear-gradient(180deg,#7253ef,#496eeb); }
.days { display:flex; gap:5px; color:#8b879a; font-size:6px; }
.days span { width:10px; text-align:center; }
.progress-ring { width:68px; height:68px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#4f62f1 0 75%, #e8e6f3 75% 100%); position:relative; }
.progress-ring::after { content:""; position:absolute; inset:8px; border-radius:50%; background:#fff; }
.progress-ring span { position:relative; z-index:2; font-size:12px; font-weight:800; }
.music-note { position:absolute; z-index:1; color:#fff; font-size:40px; opacity:.8; text-shadow:0 0 25px rgba(255,255,255,.7); }
.note-one { right:6%; top:5%; transform:rotate(8deg); }.note-two { right:-2%; bottom:12%; color:#7c54ee; opacity:.35; }
.guitar-shape { position:absolute; left:-18px; bottom:8%; width:75px; height:230px; border-radius:50% 50% 45% 45%; transform:rotate(10deg); background:linear-gradient(180deg,#7050db,#40238b); opacity:.5; box-shadow:inset 0 0 20px rgba(255,255,255,.2); }
.guitar-shape span { position:absolute; width:26px; height:180px; bottom:170px; left:24px; border-radius:12px; background:#4a329f; }