/* ================================================================
   Marcus — main stylesheet (landing + shell).
   Built on tokens.css. No external CSS framework.
   ================================================================ */

* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--fg);
    background: var(--bg);
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; padding: 0; }
img { max-width: 100%; display: block; }
input, textarea { font: inherit; color: inherit; }

/* ---- containers ---- */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--s-6);
}
.container--narrow { max-width: var(--container-narrow); }
.container--text   { max-width: var(--container-text); }

/* ---- header ---- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--bg) 75%, transparent);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--border); }
.site-header__row {
    display: flex;
    align-items: center;
    height: 64px;
    gap: var(--s-8);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    letter-spacing: var(--tracking-snug);
}
.brand__mark {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--grad-pink), var(--grad-orange) 55%, var(--grad-purple));
    box-shadow: var(--sh-1);
}
.nav-primary {
    display: flex;
    gap: var(--s-6);
    align-items: center;
    margin-left: auto;
}
.nav-primary a {
    font-size: var(--fs-sm);
    color: var(--fg-muted);
    transition: color var(--t-fast) var(--ease-out);
}
.nav-primary a:hover { color: var(--fg); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 10px 16px;
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    border: 1px solid transparent;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
    white-space: nowrap;
}
.btn--ghost {
    color: var(--fg-muted);
    border-color: transparent;
}
.btn--ghost:hover { color: var(--fg); background: var(--bg-muted); }
.btn--primary {
    background: var(--fg);
    color: var(--bg);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--sh-3); }
.btn--outline {
    border-color: var(--border-strong);
    color: var(--fg);
}
.btn--outline:hover { background: var(--bg-muted); }
.btn--lg { padding: 14px 22px; font-size: var(--fs-md); }
.btn--icon-only { width: 38px; height: 38px; padding: 0; border-radius: 50%; }

/* ---- hero ---- */
.hero {
    position: relative;
    min-height: 92vh;
    display: grid;
    place-items: center;
    padding: var(--s-20) 0 var(--s-32);
    isolation: isolate;
    overflow: hidden;
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.hero__bg::before, .hero__bg::after {
    content: "";
    position: absolute;
    inset: -10%;
    background:
      radial-gradient(ellipse 70% 55% at 50% 100%, rgba(255,99,140,0.55), transparent 65%),
      radial-gradient(ellipse 55% 45% at 25% 100%, rgba(255,170,90,0.45), transparent 70%),
      radial-gradient(ellipse 55% 45% at 80% 100%, rgba(120,150,255,0.42), transparent 70%),
      radial-gradient(ellipse 40% 30% at 65% 90%, rgba(164,117,255,0.35), transparent 65%);
    filter: blur(0px);
    animation: heroDrift 16s ease-in-out infinite alternate;
}
.hero__bg::after {
    animation-delay: -8s;
    animation-duration: 22s;
    opacity: 0.6;
    transform: scale(1.05);
}
@keyframes heroDrift {
    0%   { transform: translate3d(-2%, 1%, 0) scale(1.02); }
    100% { transform: translate3d(3%, -2%, 0) scale(1.07); }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--fg-muted);
    box-shadow: var(--sh-1);
    margin-bottom: var(--s-8);
}
.eyebrow__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 25%, transparent);
}
.eyebrow strong { font-weight: var(--fw-semibold); color: var(--fg); }

.hero__inner { text-align: center; padding: 0 var(--s-4); max-width: var(--container-narrow); }
.hero h1 {
    font-size: clamp(40px, 6vw, var(--fs-5xl));
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--s-5);
}
.hero p.lead {
    font-size: clamp(16px, 1.6vw, var(--fs-xl));
    line-height: var(--lh-snug);
    color: var(--fg-muted);
    max-width: var(--container-text);
    margin: 0 auto var(--s-10);
}

/* ---- chat input — hero centerpiece ---- */
.chat-card {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    box-shadow: var(--sh-input);
    padding: var(--s-3);
    max-width: 640px;
    margin: 0 auto;
    transition: box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.chat-card:focus-within {
    border-color: var(--border-strong);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg) 8%, transparent), var(--sh-3);
}
.chat-card__textarea {
    width: 100%;
    border: 0;
    resize: none;
    outline: none;
    background: transparent;
    color: var(--fg);
    padding: var(--s-4) var(--s-4) var(--s-2);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    min-height: 84px;
    max-height: 240px;
    font-family: var(--font-sans);
}
.chat-card__textarea::placeholder { color: var(--fg-muted-subtle); }
.chat-card__row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2);
}
.chat-card__hint {
    flex: 1;
    color: var(--fg-muted-subtle);
    font-size: var(--fs-xs);
    padding-left: var(--s-2);
    user-select: none;
}
.chat-card__send {
    background: var(--fg);
    color: var(--bg);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.chat-card__send[disabled] { opacity: 0.35; cursor: not-allowed; }
.chat-card__send:not([disabled]):hover { transform: scale(1.06); }

.hero__trust {
    margin-top: var(--s-12);
    color: var(--fg-muted-subtle);
    font-size: var(--fs-sm);
}

/* ---- section frame ---- */
.section {
    padding: var(--s-24) 0;
}
.section__head {
    text-align: center;
    margin-bottom: var(--s-12);
    max-width: var(--container-text);
    margin-left: auto;
    margin-right: auto;
}
.section__eyebrow {
    text-transform: uppercase;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--fg-muted-subtle);
    margin-bottom: var(--s-3);
    font-weight: var(--fw-medium);
}
.section h2 {
    font-size: clamp(28px, 4vw, var(--fs-3xl));
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--s-4);
}
.section p.section__lead {
    color: var(--fg-muted);
    font-size: var(--fs-lg);
    margin: 0 auto;
}

/* ---- "How" — 3 steps ---- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
}
.step {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--s-8);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.step:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-muted);
    color: var(--fg-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--s-5);
}
.step h3 {
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--s-3);
}
.step p {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
}

/* ---- templates grid ---- */
.tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
}
.tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
    aspect-ratio: 4/3;
    display: flex;
    flex-direction: column;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.tile__cover {
    flex: 1;
    background: linear-gradient(135deg, var(--cover-from, var(--c-blue-300)), var(--cover-to, var(--c-purple-400)));
}
.tile__meta {
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--border);
}
.tile__title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    margin: 0 0 2px;
}
.tile__desc {
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    margin: 0;
}

/* ---- stats ---- */
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-8);
    text-align: center;
}
.stat__num {
    font-size: clamp(36px, 5vw, var(--fs-4xl));
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--s-2);
}
.stat__label {
    color: var(--fg-muted);
    font-size: var(--fs-base);
}

/* ---- footer ---- */
.site-footer {
    padding: var(--s-20) 0 var(--s-12);
    border-top: 1px solid var(--border);
    background: var(--bg-muted);
    margin-top: var(--s-24);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: var(--s-12);
    margin-bottom: var(--s-16);
}
.footer-grid h4 {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-muted-subtle);
    margin: 0 0 var(--s-4);
    font-weight: var(--fw-medium);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.footer-grid a {
    font-size: var(--fs-sm);
    color: var(--fg-muted);
    transition: color var(--t-fast) var(--ease-out);
}
.footer-grid a:hover { color: var(--fg); }
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--fg-muted-subtle);
    font-size: var(--fs-xs);
    border-top: 1px solid var(--border);
    padding-top: var(--s-6);
}

/* ---- responsive ---- */
@media (max-width: 960px) {
    /* keep only the primary CTA visible on mobile — drop nav links + Log in
       so the header doesn't overflow on a 390px viewport. Bigger menu UX
       can come later as a hamburger sheet. */
    .nav-primary > a:not(.btn--primary) { display: none; }
    .steps { grid-template-columns: 1fr; }
    .tiles { grid-template-columns: repeat(2, 1fr); }
    .stats { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .tiles { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero { min-height: 80vh; padding: var(--s-12) 0 var(--s-20); }
    .site-header__row { padding: var(--s-3) var(--s-4); }
    .nav-primary .btn--primary { padding: 8px 14px; font-size: var(--fs-sm); }
}