/* ===== AQUA landing — tokens lifted from the dashboard ===== */
:root {
  --bg: #F4F3EE;
  --card: #FAFAFA;
  --ink: #1C2635;          /* Kashmir 950 */
  --muted: #5B6573;
  --primary: #5179A6;      /* Kashmir 500 */
  --primary-dark: #334D71; /* Kashmir 700 */
  --accent: #E9EEF5;       /* Kashmir 100 */
  --accent-fg: #334D71;
  --border: #E5E5E5;
  --success: #059669;
  --success-bg: #D1FAE5;
  --warning: #D97706;
  --warning-bg: #FEF3C7;
  --destructive: #DC2626;
  --error-bg: #FEE2E2;
  --shadow-md: 0 4px 8px rgba(28, 38, 53, .08);
  --shadow-lg: 0 12px 24px rgba(28, 38, 53, .12);
  --radius: 12px;
  --maxw: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #262624;
    --card: #30302E;
    --ink: #FFFFFF;
    --muted: #B9BBC0;
    --primary: #CEDAE9;     /* Kashmir 200 */
    --primary-dark: #7396BD;
    --accent: #2E435E;      /* Kashmir 800 */
    --accent-fg: #CEDAE9;
    --border: #3A3A38;
    --success: #34D399;
    --success-bg: #064E3B;
    --warning: #FBBF24;
    --warning-bg: #78350F;
    --destructive: #F87171;
    --error-bg: #7F1D1D;
    --shadow-md: 0 4px 8px rgba(0,0,0,.5);
    --shadow-lg: 0 12px 24px rgba(0,0,0,.6);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; font-weight: 800; }
p { color: var(--muted); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--primary);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 700; font-size: 1rem;
  text-decoration: none;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  min-height: 44px;
}
.btn-sm { padding: .55rem 1.1rem; font-size: .92rem; min-height: 38px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-md); }
@media (prefers-color-scheme: dark) { .btn-primary { color: #0D0D0D; } }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--primary-dark); box-shadow: var(--shadow-lg); }
.btn-light:hover { transform: translateY(-2px); }

/* ===== Top bar ===== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand-mark { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.brand-name { font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; }

/* ===== Hero (scroll-scrubbed) ===== */
.hero { position: relative; }
/* Fixed animation backdrop: stays in the viewport and keeps scrubbing while
   all page content scrolls over it. Pushed down below the top banner so the
   image's top feather fades in open space, not behind the bar. */
.scrub-backdrop {
  position: fixed;
  top: 76px;            /* clear the fixed top banner so the top fade shows */
  left: 0; right: 0;
  height: calc(100svh - 76px);
  width: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}
/* All real content sits above the backdrop. */
.hero, .features, .cta, .footer { position: relative; z-index: 1; }

.hero {
  min-height: 100svh;
  display: flex; align-items: center;
}
.hero-content {
  position: relative; z-index: 2;
  max-width: var(--maxw); width: 100%;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}
.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  margin: .6rem 0 1.1rem;
}
.hero-sub { font-size: clamp(1rem, 2vw, 1.25rem); max-width: 30ch; margin-bottom: 1.8rem; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }

.scroll-cue {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  color: var(--muted); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  animation: cue 2s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ===== Reveal on scroll ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ===== Features ===== */
.features { max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) clamp(1.25rem, 5vw, 3rem); }

/* Frosted scrim behind bare text so it stays legible over the live animation (option b). */
.section-head, .feature-text {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.section-head { text-align: center; max-width: 36rem; margin: 0 auto clamp(3rem, 7vw, 5rem); }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin: .6rem 0 .8rem; }
.section-sub { font-size: 1.1rem; }

.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-bottom: clamp(4rem, 9vw, 7rem);
}
.feature:last-child { margin-bottom: 0; }
.feature-reverse .feature-text { order: 2; }
.feature-tag {
  display: inline-block;
  background: var(--accent); color: var(--accent-fg);
  font-weight: 700; font-size: .8rem;
  padding: .35rem .75rem; border-radius: 999px; margin-bottom: 1rem;
}
.feature h3 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .8rem; }
.feature-text p { font-size: 1.08rem; }

/* ===== Mock cards (dashboard styling) ===== */
/* ===== Real miniapp cards (ported from Aqua-dashboard/components) ===== */
/* Card: bg-card border border-border rounded-lg p-4 shadow-sm (ui.tsx Card) */
.app-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);          /* rounded-lg = var(--radius) */
  box-shadow: var(--shadow-md);
  padding: 1rem;                         /* p-4 */
  display: flex; flex-direction: column; gap: .5rem;
}
.app-card.stack { gap: .5rem; }

/* StatusBadge (ui.tsx): flex items-center gap-1 font-medium w-fit, sm = px-2 py-1 text-[10px] rounded-lg */
.sb {
  display: inline-flex; align-items: center; gap: .25rem;
  font-weight: 500; width: fit-content;
  padding: .25rem .5rem; font-size: 10px; border-radius: var(--radius);
  white-space: nowrap;
}
.sb-active    { background: var(--success-bg); color: var(--success); }       /* bg-success-light text-success */
.sb-trial,
.sb-scheduled { background: var(--accent); color: var(--accent-fg); }         /* bg-accent text-accent-foreground */
.sb-attn      { background: var(--warning-bg); color: var(--warning); }       /* attendance_due */
.sb-invoice   { background: var(--error-bg); color: var(--destructive); }     /* invoice_needed */
.sb-paid      { background: var(--success-bg); color: var(--success); }

/* SessionCard row: px-4 py-3 flex items-center gap-3; time w-14 text-xs; name text-sm font-semibold */
.session-row { display: flex; align-items: center; gap: .75rem; padding: .25rem; }
.session-time { width: 3.5rem; flex-shrink: 0; font-size: .75rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.session-name { flex: 1; min-width: 0; font-size: .875rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* urgency left border (border-l-4 + color var) */
.session-card.urgency-attn { border-left: 4px solid var(--warning); }

/* ClassCard: p-4 flex items-start justify-between gap-3 */
.class-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .25rem; }
.class-name { font-size: .875rem; font-weight: 600; color: var(--ink); }
.class-meta { font-size: .75rem; color: var(--muted); margin-top: .25rem; }
.class-meta + .class-meta { margin-top: .125rem; }
.class-side { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; flex-shrink: 0; }
.class-count { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--muted); }
.class-count b { font-weight: 500; }

/* KPICard: rounded-xl border bg-card border-l-4 px-4 py-4 shadow-sm; title text-xs muted; value bold clamp; label text-xs */
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.kpi {
  background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 16px;                   /* rounded-xl */
  padding: 1rem; box-shadow: var(--shadow-sm);
}
.kpi-title { font-size: .75rem; color: var(--muted); margin-bottom: .25rem; line-height: 1.1; }
.kpi-value { font-weight: 700; color: var(--ink); margin-bottom: .5rem; line-height: 1.1; font-variant-numeric: tabular-nums; font-size: clamp(0.9rem, 3.5vw, 1.5rem); }
.kpi-label { font-size: .75rem; line-height: 1.1; font-weight: 500; color: var(--muted); }

/* ===== Real Telegram chat (ported from currentswim-video-skill TelegramTheme) =====
   Scaled from the kit's 1080px canvas down to a phone card; exact colors/ratios kept. */
.tg-phone {
  max-width: 300px; margin: 0 auto;
  border-radius: 28px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  font-family: Roboto, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
}
/* header: background #eaf0e6, border bottom rgba(0,0,0,.06) */
.tg-header {
  background: #eaf0e6; border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex; align-items: center; gap: .55rem; padding: .7rem .9rem;
}
.tg-back { color: #3a3f3a; font-size: 1.2rem; line-height: 1; }
.tg-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.tg-htitle { color: #1a1a1a; font-size: .95rem; font-weight: 700; line-height: 1.1; letter-spacing: .5px; }
.tg-hsub { color: #6b7280; font-size: .72rem; margin-top: 1px; }
.tg-menu { color: #3a3f3a; font-size: 1.05rem; margin-left: auto; }
/* wallpaper gradient from theme */
.tg-body { background: linear-gradient(135deg, #c3d18a 0%, #8fb277 45%, #6f9a63 100%); padding: .9rem .7rem; }
/* bubbles: bot #fff (sharp top-left), user #e6f8cf (sharp top-right), text #1a1a1a */
.tg-bubble {
  max-width: 82%; padding: .55rem .7rem; color: #1a1a1a;
  font-size: .82rem; line-height: 1.32; white-space: pre-line;
  box-shadow: 0 1px 1px rgba(15,23,42,.06); margin-bottom: .5rem;
}
.tg-bot  { background: #fff;     border-radius: 10px 18px 18px 18px; margin-right: auto; }
.tg-user { background: #e6f8cf; border-radius: 18px 10px 18px 18px; margin-left: auto; }
.tg-time { float: right; margin-left: .6rem; margin-top: .35rem; color: #7b8794; font-size: .62rem; }
.tg-tick { color: #4fae54; }
/* inline keyboard: fill rgba(74,110,70,.72), text #fff, radius 18 */
.tg-keyboard { display: grid; gap: .35rem; margin: 2px 0 .5rem; }
.tg-krow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .35rem; }
.tg-key {
  background: rgba(74,110,70,.72); color: #fff;
  border-radius: 9px; min-height: 38px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 .7rem; font-size: .78rem; font-weight: 600;
}

/* ===== CTA ===== */
.cta { padding: clamp(1rem, 5vw, 3rem); }
.cta-inner {
  max-width: var(--maxw); margin: 0 auto;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 24px;
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-inner h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: .8rem; }
.cta-inner p { color: rgba(255,255,255,.88); font-size: 1.15rem; margin-bottom: 1.8rem; }

/* ===== Footer ===== */
.footer {
  max-width: var(--maxw); margin: 0 auto;
  padding: 3rem clamp(1.25rem, 5vw, 3rem);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  border-top: 1px solid var(--border);
}
.footer-brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; }
.footer p { font-size: .9rem; }

/* ===== Responsive ===== */
@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; gap: 1.5rem; }
  .feature-reverse .feature-text { order: 0; }
  .hero-sub { max-width: 100%; }
}

/* ===== Reduced motion: drop the scrub, show a calm static hero ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-spacer { height: 0; }
  .hero-sticky { position: relative; }
  .scroll-cue { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}