:root {
    --home-max-width: 1180px;
    --home-radius-lg: 28px;
    --home-radius-md: 20px;
    --home-radius-sm: 14px;
    --home-ease: cubic-bezier(.2, .8, .2, 1);
}

html[data-theme="dark"] .page-home {
    --home-bg: #080c14;
    --home-surface: #111827;
    --home-surface-soft: #151d2c;
    --home-text: #f5f7ff;
    --home-muted: #9aa4b5;
    --home-line: rgba(148, 163, 184, .13);
    --home-shadow: 0 26px 70px rgba(0, 0, 0, .34);
    --home-nav: rgba(8, 12, 20, .76);
    --home-grid: rgba(129, 140, 248, .055);
}

html[data-theme="light"] .page-home {
    --home-bg: #f6f7fb;
    --home-surface: #ffffff;
    --home-surface-soft: #f0f2f8;
    --home-text: #172033;
    --home-muted: #667085;
    --home-line: rgba(71, 84, 103, .12);
    --home-shadow: 0 24px 64px rgba(35, 44, 72, .11);
    --home-nav: rgba(246, 247, 251, .8);
    --home-grid: rgba(79, 70, 229, .05);
}

.page-home {
    min-height: 100dvh;
    margin: 0;
    color: var(--home-text);
    background:
        radial-gradient(circle at 8% 6%, rgba(99, 102, 241, .15), transparent 30rem),
        radial-gradient(circle at 92% 32%, rgba(34, 211, 238, .11), transparent 28rem),
        var(--home-bg);
    font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    overflow-x: clip;
    transition: color .25s ease, background-color .25s ease;
}

html { scroll-behavior: smooth; }
.page-home :where(h1, h2, h3, p) { margin: 0; }
.page-home :where(ul) { margin: 0; }

.page-home::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--home-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--home-grid) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, black, transparent 76%);
}

.page-home::after { display: none; }
.page-home * { box-sizing: border-box; }
.page-home a { color: inherit; }

.home-shell {
    width: min(calc(100% - 40px), var(--home-max-width));
    margin-inline: auto;
}

.home-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: max(12px, env(safe-area-inset-top)) 0 10px;
}

.home-nav {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 8px 10px 8px 16px;
    border: 1px solid var(--home-line);
    border-radius: 18px;
    background: var(--home-nav);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
    backdrop-filter: blur(20px) saturate(150%);
}

.home-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--home-text);
    font-weight: 700;
    letter-spacing: -.02em;
    text-decoration: none;
}

.home-logo-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #22d3ee);
    box-shadow: 0 8px 20px rgba(79, 70, 229, .28);
}

.home-logo-mark svg { width: 20px; height: 20px; }
.home-logo-text span { color: var(--home-muted); font-weight: 500; }

.home-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.home-nav-links a {
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--home-muted);
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease, background .2s ease;
}

.home-nav-links a:hover { color: var(--home-text); background: var(--home-surface-soft); }

.home-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

.page-home #themeToggleBtn,
.page-home .main-download-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 13px;
    color: var(--home-text);
    background: var(--home-surface-soft);
    box-shadow: none;
}

.page-home #themeToggleBtn:hover,
.page-home .main-download-btn:hover { transform: translateY(-2px); }
.page-home #themeToggleBtn svg,
.page-home .main-download-btn svg { width: 20px; height: 20px; }
.page-home .main-download-btn span { display: none; }

.home-main {
    display: block;
    width: min(calc(100% - 40px), var(--home-max-width));
    max-width: none;
    min-height: auto;
    margin: 0 auto;
    padding: 74px 0 24px;
}

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
    align-items: center;
    gap: clamp(44px, 7vw, 92px);
    min-height: 570px;
}

.hero-eyebrow,
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #22d3ee;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hero-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 0 6px rgba(34, 211, 238, .11);
}

.hero-copy h1 {
    max-width: 720px;
    margin: 18px 0 20px;
    color: var(--home-text);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -.065em;
    line-height: .99;
}

.hero-copy h1 span {
    background: linear-gradient(100deg, #818cf8 8%, #22d3ee 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-copy > p {
    max-width: 610px;
    color: var(--home-muted);
    font-size: clamp(1rem, 1.8vw, 1.13rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 30px;
}

.home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 12px 18px;
    border-radius: 14px;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s var(--home-ease), box-shadow .2s ease, background .2s ease;
}

.home-button:hover { transform: translateY(-2px); }
.home-button svg { width: 19px; height: 19px; }
.home-button-primary {
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 14px 28px rgba(79, 70, 229, .28);
}
.home-button-secondary { background: var(--home-surface); box-shadow: 0 10px 28px rgba(0, 0, 0, .08); }

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
    color: var(--home-muted);
    font-size: .78rem;
    font-weight: 600;
}
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof svg { width: 15px; height: 15px; color: #22c55e; }

.hero-preview-wrap { position: relative; padding: 16px; }
.hero-preview-wrap::before {
    content: "";
    position: absolute;
    inset: -12%;
    z-index: -1;
    background: radial-gradient(circle, rgba(99, 102, 241, .2), transparent 62%);
    filter: blur(18px);
}

.hero-preview {
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: var(--home-radius-lg);
    background: color-mix(in srgb, var(--home-surface) 95%, transparent);
    box-shadow: var(--home-shadow);
    transform: rotate(1.25deg);
}

.preview-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 18px;
    border-bottom: 1px solid var(--home-line);
}
.preview-brand { display: flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 700; }
.preview-brand-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #6366f1, #22d3ee); }
.preview-live { display: inline-flex; align-items: center; gap: 6px; color: var(--home-muted); font-size: .7rem; font-weight: 600; }
.preview-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .1); }

.preview-body { padding: 18px; }
.preview-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 5px; border-radius: 12px; background: var(--home-surface-soft); }
.preview-days span { padding: 8px 2px; border-radius: 8px; color: var(--home-muted); font-size: .69rem; font-weight: 700; text-align: center; }
.preview-days .active { color: #fff; background: linear-gradient(135deg, #6366f1, #22d3ee); }

.preview-date { display: flex; align-items: end; justify-content: space-between; margin: 22px 2px 12px; }
.preview-date strong { display: block; font-size: .98rem; }
.preview-date span { color: var(--home-muted); font-size: .7rem; }

.preview-class-list { display: grid; gap: 10px; }
.preview-class {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    gap: 12px;
    align-items: center;
    min-height: 74px;
    padding: 12px 13px;
    border-radius: 15px;
    background: var(--home-surface-soft);
}
.preview-class::before { content: ""; width: 4px; height: 42px; border-radius: 8px; background: #818cf8; }
.preview-class:nth-child(2)::before { background: #22d3ee; }
.preview-class:nth-child(3)::before { background: #f59e0b; }
.preview-class strong { display: block; font-size: .78rem; line-height: 1.35; }
.preview-class small { display: block; margin-top: 4px; color: var(--home-muted); font-size: .64rem; }
.preview-room { padding: 5px 8px; border-radius: 8px; color: #22d3ee; background: rgba(34, 211, 238, .1); font-size: .65rem; font-weight: 700; }

.home-section { padding: 92px 0 24px; scroll-margin-top: 90px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 30px; }
.section-heading h2 { max-width: 650px; margin-top: 8px; font-size: clamp(2rem, 4vw, 3.15rem); letter-spacing: -.05em; line-height: 1.08; }
.section-heading > p { max-width: 420px; color: var(--home-muted); font-size: .92rem; }

.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 410px;
    padding: clamp(24px, 4vw, 38px);
    border: 0;
    border-radius: var(--home-radius-lg);
    color: var(--home-text);
    background: var(--home-surface);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .09);
    text-decoration: none;
    overflow: hidden;
    transition: transform .25s var(--home-ease), box-shadow .25s ease;
}
.tool-card::after { content: ""; position: absolute; width: 260px; height: 260px; right: -110px; bottom: -130px; border-radius: 50%; background: var(--card-glow); filter: blur(2px); opacity: .7; }
.tool-card:hover { transform: translateY(-6px); box-shadow: var(--home-shadow); }
.tool-card-pulse { --card-accent: #818cf8; --card-glow: rgba(99, 102, 241, .22); }
.tool-card-compass { --card-accent: #22d3ee; --card-glow: rgba(34, 211, 238, .18); }
.tool-card-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.tool-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; color: #fff; background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 55%, #172033)); box-shadow: 0 12px 28px color-mix(in srgb, var(--card-accent) 28%, transparent); }
.tool-icon svg { width: 27px; height: 27px; }
.tool-tag { padding: 7px 10px; border-radius: 999px; color: var(--card-accent); background: color-mix(in srgb, var(--card-accent) 11%, transparent); font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tool-card h3 { margin-top: 30px; font-size: clamp(1.65rem, 3vw, 2.25rem); letter-spacing: -.04em; }
.tool-card > p { max-width: 470px; margin-top: 8px; color: var(--home-muted); font-size: .9rem; }
.tool-list { display: grid; gap: 10px; margin: 24px 0 30px; padding: 0; list-style: none; color: var(--home-muted); font-size: .83rem; }
.tool-list li { display: flex; align-items: center; gap: 9px; }
.tool-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--card-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--card-accent) 10%, transparent); }
.tool-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--home-text); font-size: .88rem; font-weight: 700; }
.tool-link svg { width: 18px; height: 18px; transition: transform .2s ease; }
.tool-card:hover .tool-link svg { transform: translateX(4px); }

.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.benefit-card { padding: 24px; border-radius: var(--home-radius-md); background: color-mix(in srgb, var(--home-surface) 88%, transparent); }
.benefit-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #818cf8; background: rgba(129, 140, 248, .12); }
.benefit-icon svg { width: 21px; height: 21px; }
.benefit-card h3 { margin-top: 20px; font-size: 1rem; }
.benefit-card p { margin-top: 7px; color: var(--home-muted); font-size: .8rem; }

.home-note { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 76px; padding: 30px 34px; border-radius: var(--home-radius-lg); color: #fff; background: linear-gradient(120deg, #3730a3, #4f46e5 55%, #0891b2); box-shadow: 0 20px 50px rgba(55, 48, 163, .24); }
.home-note h2 { font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -.035em; }
.home-note p { margin-top: 5px; color: rgba(255,255,255,.75); font-size: .82rem; }
.home-note .home-button { flex-shrink: 0; color: #172033; background: #fff; box-shadow: none; }

.page-home .footer {
    position: static;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    width: min(calc(100% - 40px), var(--home-max-width));
    height: auto;
    margin: 58px auto 0;
    padding: 24px 0 max(30px, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--home-line);
    border-radius: 0;
    color: var(--home-muted);
    background: transparent;
    box-shadow: none;
    animation: none;
    transform: none;
    font-size: .78rem;
    white-space: normal;
}
.page-home .footer a { margin: 0; color: var(--home-text); text-decoration: none; }
.footer-note { text-align: right; flex: 1 1 240px; }

.page-home .pwa-install-banner { border-color: var(--home-line); background: var(--home-nav); backdrop-filter: blur(20px); }
.page-home .pwa-install-banner {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    z-index: 3000;
    width: min(680px, calc(100% - 24px));
    border: 1px solid var(--home-line);
    border-radius: 18px;
    box-shadow: var(--home-shadow);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -18px);
    transition: opacity .25s ease, transform .25s var(--home-ease);
}
.page-home .pwa-install-banner.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.page-home .pwa-install-banner-content { display: flex; align-items: center; gap: 12px; padding: 12px; }
.page-home .pwa-install-banner-icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #6366f1, #22d3ee); }
.page-home .pwa-install-banner-icon svg { width: 19px; height: 19px; }
.page-home .pwa-install-banner-text { flex: 1; min-width: 0; }
.page-home .pwa-install-banner-text strong { display: block; font-size: .88rem; }
.page-home .pwa-install-banner-text p { color: var(--home-muted); font-size: .74rem; }
.page-home .pwa-install-banner-actions { display: flex; gap: 7px; }
.page-home .pwa-install-banner button { min-height: 38px; padding: 8px 12px; border: 0; border-radius: 10px; color: var(--home-text); background: var(--home-surface-soft); font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; }
.page-home #pwaInstallCta { color: #fff; background: linear-gradient(135deg, #6366f1, #4f46e5); }

@media (min-width: 769px) {
    .page-home .main-download-btn { display: none; }
}

@media (max-width: 900px) {
    .home-nav-links { display: none; }
    .home-hero { grid-template-columns: 1fr; min-height: auto; gap: 50px; padding-top: 36px; }
    .hero-copy { text-align: center; }
    .hero-copy > p { margin-inline: auto; }
    .hero-actions, .hero-proof { justify-content: center; }
    .hero-preview-wrap { width: min(100%, 540px); margin-inline: auto; }
    .section-heading { display: block; text-align: center; }
    .section-heading h2, .section-heading > p { margin-inline: auto; }
    .section-heading > p { margin-top: 12px; }
    .tool-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .home-shell,
    .home-main,
    .page-home .footer { width: min(calc(100% - 24px), var(--home-max-width)); }
    .home-header { padding-top: max(8px, env(safe-area-inset-top)); }
    .home-nav { min-height: 56px; padding: 6px 7px 6px 11px; border-radius: 16px; }
    .home-logo-mark { width: 34px; height: 34px; }
    .home-logo-text { font-size: .88rem; }
    .home-logo-text span { display: none; }
    .home-nav-actions { margin-left: auto; }
    .page-home #themeToggleBtn,
    .page-home .main-download-btn { width: 40px; height: 40px; border-radius: 12px; }
    .page-home .footer {
        justify-content: center;
        text-align: center;
    }
    .footer-note {
        text-align: center;
        flex-basis: 100%;
    }
    .hero-preview-wrap::before,
    .tool-card::after {
        content: none;
    }
    .home-main { padding-top: 42px; }
    .home-hero { gap: 34px; padding-top: 14px; }
    .hero-eyebrow { font-size: .64rem; }
    .hero-copy h1 { margin: 15px 0 17px; font-size: clamp(2.7rem, 14vw, 4rem); }
    .hero-copy > p { font-size: .92rem; line-height: 1.7; }
    .hero-actions { display: grid; grid-template-columns: 1fr; margin-top: 24px; }
    .home-button { width: 100%; min-height: 52px; }
    .hero-proof { gap: 8px 14px; margin-top: 20px; font-size: .68rem; }
    .hero-preview-wrap { padding: 4px; }
    .hero-preview { border-radius: 22px; transform: none; }
    .preview-topbar { padding: 13px 14px; }
    .preview-body { padding: 13px; }
    .preview-date { margin-top: 17px; }
    .preview-class { min-height: 66px; padding: 10px; }
    .preview-class:nth-child(3) { display: none; }
    .home-section { padding-top: 72px; }
    .section-heading { margin-bottom: 22px; }
    .section-heading h2 { font-size: 2rem; }
    .section-heading > p { font-size: .82rem; }
    .tool-card { min-height: 390px; padding: 24px; border-radius: 22px; }
    .tool-card h3 { margin-top: 24px; }
    .benefit-grid { grid-template-columns: 1fr; }
    .benefit-card { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; padding: 18px; }
    .benefit-card h3 { align-self: end; margin: 0; }
    .benefit-card p { grid-column: 2; }
    .home-note { display: block; margin-top: 56px; padding: 26px 22px; text-align: center; }
    .home-note .home-button { margin-top: 20px; }
    .page-home .footer { display: block; margin-top: 40px; text-align: center; }
    .footer-note { margin-top: 8px; text-align: center; }
    .page-home .pwa-install-banner-content { display: grid; grid-template-columns: auto 1fr; }
    .page-home .pwa-install-banner-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
    .page-home *, .page-home *::before, .page-home *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}