:root {
    --ink: #100d18;
    --ink-soft: #231c33;
    --violet: #6d28d9;
    --violet-2: #7c3aed;
    --coral: #ff6a3d;
    --rose: #ff4f8b;
    --bg: #f4f1f6;
    --paper: #fffcfa;
    --muted: #655f73;
    --line: rgba(16, 13, 24, .1);
    --good: #0e7a45;
    --warn: #b45309;
    --bad: #c2413a;
    --shadow: 0 18px 50px rgba(28, 16, 48, .08);
    --radius: 22px;
    --font: "Plus Jakarta Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: .95; letter-spacing: -.045em; margin-bottom: .4rem; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -.03em; }
.lede { font-size: 1.15rem; max-width: 38rem; color: var(--muted); }
.muted { color: var(--muted); }
.wrap { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.narrow { width: min(760px, calc(100% - 2rem)); }
.sr-only, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: 1rem; top: -4rem; background: white; padding: .5rem 1rem; z-index: 50; }
.skip:focus { top: 1rem; }

.topbar { position: sticky; top: 0; z-index: 30; background: rgba(255, 252, 250, .9); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 4.4rem; }
.logo { font-weight: 800; letter-spacing: -.04em; text-decoration: none; font-size: 1.15rem; }
.logo span { color: var(--violet-2); }
.nav { display: flex; gap: 1rem; }
.nav a { text-decoration: none; color: var(--muted); font-weight: 600; }
.nav a[aria-current="page"] { color: var(--ink); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.nav-toggle { display: none; margin-left: auto; background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .45rem .8rem; }
.note-link { text-decoration: none; font-weight: 700; display: inline-flex; gap: .35rem; align-items: center; }
.note-link span { background: var(--coral); color: white; border-radius: 999px; min-width: 1.3rem; text-align: center; font-size: .75rem; padding: .1rem .35rem; }
.text-button { background: none; border: 0; padding: 0; font-weight: 700; cursor: pointer; text-decoration: none; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    background: var(--violet); color: white; text-decoration: none; border: 0; cursor: pointer;
    border-radius: 999px; padding: .85rem 1.2rem; font-weight: 700; box-shadow: 0 10px 24px rgba(109, 40, 217, .22);
}
.btn:hover { background: var(--violet-2); }
.btn-lg { padding: 1rem 1.35rem; font-size: 1.05rem; }
.btn-small { padding: .55rem .9rem; box-shadow: none; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn-light { background: white; color: var(--ink); box-shadow: none; }
.btn-light:hover { background: #fff4ee; }

.flash { width: min(1120px, calc(100% - 2rem)); margin: 1rem auto 0; padding: .8rem 1rem; border-radius: 14px; background: white; }
.flash-error { background: #fff1ef; color: var(--bad); }
.flash-ok { background: #eefbf4; color: var(--good); }

.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: white; overflow: hidden; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 16, .25) 0%, rgba(10, 8, 16, .18) 35%, rgba(10, 8, 16, .78) 100%), radial-gradient(circle at 85% 20%, rgba(255, 79, 139, .35), transparent 28%); }
.hero-copy { position: relative; padding: 8rem 0 4.5rem; }
.hero h1 { max-width: 10ch; }
.hero .lede { color: rgba(255,255,255,.88); }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; font-weight: 700; color: var(--coral); }
.hero .eyebrow { color: #ffd0c2; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; margin-top: 1.5rem; }
.quiet-link { color: white; font-weight: 700; }
.quiet-link.dark { color: var(--violet); }
.is-home .topbar { position: absolute; inset: 0 0 auto; background: linear-gradient(to bottom, rgba(8,6,14,.55), transparent); border: 0; color: white; }
.is-home .nav a, .is-home .text-button, .is-home .logo, .is-home .note-link { color: white; }
.is-home .btn-ghost { color: white; border-color: rgba(255,255,255,.35); }

.section { padding: 4.5rem 0; }
.section-paper { background: var(--paper); }
.section-head, .card-top, .plan-main, .plan-side, .service-list li, .timeline li { display: flex; gap: 1rem; }
.section-head { justify-content: space-between; align-items: end; margin-bottom: 1.4rem; }
.section-head p { color: var(--muted); margin: 0; }
.cat-grid, .cards, .stories, .dash-grid, .stat-row, .mini-grid, .gallery, .steps { display: grid; gap: 1rem; }
.cat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-bottom: 1.5rem; }
.cat { background: white; border-radius: 18px; padding: 1rem; text-decoration: none; border: 1px solid var(--line); font-weight: 700; display: flex; flex-direction: column; gap: .35rem; }
.cat span { font-size: 1.4rem; }
.cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.card { background: white; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card-media { position: relative; aspect-ratio: 4/5; }
.card-media img, .showreel img, .showreel video, .story img, .mini img { width: 100%; height: 100%; object-fit: cover; }
.pill { position: absolute; left: .8rem; border-radius: 999px; padding: .25rem .6rem; font-size: .78rem; font-weight: 800; }
.pill-light { top: .8rem; background: white; }
.pill-good { bottom: .8rem; background: #e7f8ee; color: var(--good); }
.card-body, .panel, .review { padding: 1rem 1rem 1.15rem; }
.card-top { justify-content: space-between; align-items: baseline; }
.card h3 { margin: 0; font-size: 1.15rem; }
.card h3 a, .plan-row h2 a { text-decoration: none; }
.card-meta { font-weight: 700; }
.card-actions, .profile-cta, .partner-row, .admin-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.rating { font-weight: 800; }

.steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.steps article { background: white; border-radius: var(--radius); padding: 1.3rem; border: 1px solid var(--line); }
.steps span { color: var(--coral); font-weight: 800; }

.chat-screen { min-height: calc(100svh - 4.4rem); display: flex; align-items: center; padding: 2.5rem 0 3rem; }
.chat-wrap { width: min(760px, calc(100% - 2rem)); }
.composer .btn { justify-self: start; }
.chat-intro h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.composer, .stack-form, .filters { display: grid; gap: .8rem; }
.composer textarea, .stack-form input, .stack-form textarea, .stack-form select, .filters input, .filters select {
    width: 100%; border: 1px solid var(--line); background: white; border-radius: 16px; padding: .95rem 1rem;
}
.composer textarea { min-height: 140px; resize: vertical; box-shadow: var(--shadow); }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chips button { border: 1px solid var(--line); background: white; border-radius: 999px; padding: .55rem .8rem; cursor: pointer; }
.thread { display: grid; gap: .7rem; margin-bottom: 1rem; }
.bubble { max-width: 38rem; background: white; border-radius: 18px; padding: .9rem 1rem; border: 1px solid var(--line); }
.bubble-user { margin-left: auto; background: var(--ink); color: white; }
.bubble p { margin: 0; }
.spark { display: block; margin-bottom: .2rem; }

.plan-list, .stack, .service-list, .timeline { display: grid; gap: .8rem; }
.plan-row, .panel, .review { background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.plan-row { padding: 1rem; display: flex; justify-content: space-between; gap: 1rem; }
.plan-icon { width: 3rem; height: 3rem; border-radius: 16px; display: grid; place-items: center; background: #fff1ea; font-size: 1.3rem; flex: none; }
.plan-row h2 { font-size: 1.25rem; margin: 0; }
.plan-side { text-align: right; }
.match { color: var(--violet); font-weight: 800; }
.reasons { list-style: none; padding: 0; margin: .4rem 0 0; color: var(--good); font-weight: 650; }
.budget-card, .suggest, .next-step { background: white; border-radius: var(--radius); padding: 1.2rem; border: 1px solid var(--line); margin-top: 1rem; }
.budget-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.budget-card span, .stat-row span { color: var(--muted); display: block; }
.budget-card strong, .stat-row strong, .price-lg { font-size: 1.6rem; letter-spacing: -.03em; }
.good, .good-note { color: var(--good); }
.meter { height: 8px; background: #eee7f7; border-radius: 999px; overflow: hidden; grid-column: 1 / -1; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--coral)); }
.suggest { background: #fff7f2; }
.center { text-align: center; }
.check-list { list-style: none; padding: 0; }
.check-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.check-list em { color: var(--muted); font-style: normal; }
.check-list .is-done { font-weight: 700; }
.figures div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.dash-grid { grid-template-columns: 1.2fr .8fr; margin-top: 1rem; }
.mini-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.mini { background: white; border-radius: 18px; overflow: hidden; text-decoration: none; border: 1px solid var(--line); }
.mini img { aspect-ratio: 16/10; }
.mini span, .mini strong { display: block; padding: .2rem .8rem; }
.mini strong { padding-bottom: .8rem; }
.timeline { list-style: none; padding: 0; }
.timeline time { font-weight: 800; min-width: 4.5rem; }
.block-title { margin-top: 2rem; }
.link-panel { display: grid; text-decoration: none; }
.next-step { display: flex; justify-content: space-between; gap: 1rem; align-items: center; background: var(--ink); color: white; }
.next-step .btn { background: white; color: var(--ink); }

.showreel { height: min(72vh, 680px); background: var(--ink); position: relative; }
.showreel img, .showreel video { height: 100%; }
.showreel-label { position: absolute; left: 1rem; bottom: 1rem; background: white; border-radius: 999px; padding: .45rem .8rem; font-weight: 800; }
.profile-head, .anchors { display: flex; justify-content: space-between; gap: 1rem; align-items: end; padding-top: 1.4rem; }
.anchors { gap: .8rem; overflow: auto; padding-bottom: .6rem; }
.anchors a { text-decoration: none; font-weight: 700; color: var(--muted); white-space: nowrap; }
.profile-grid { display: grid; grid-template-columns: 1.4fr .7fr; gap: 1rem; padding-bottom: 5rem; }
.gallery { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.gallery img { aspect-ratio: 1; border-radius: 16px; }
.gallery figcaption { font-size: .9rem; color: var(--muted); }
.service-list { list-style: none; padding: 0; }
.service-list li { justify-content: space-between; background: white; border-radius: 16px; padding: .9rem 1rem; border: 1px solid var(--line); }
.review + .review { margin-top: .7rem; }
.dock { display: none; }
.stories { grid-template-columns: 1fr; }
.story { display: grid; grid-template-columns: 1.1fr .9fr; background: white; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.story img { height: 100%; min-height: 240px; }
.story div { padding: 1.3rem; }
.filters { grid-template-columns: 1.4fr repeat(4, .7fr) auto; margin: 1rem 0 1.4rem; }
.stat-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 1rem 0 2rem; }
.stat-row article, .table-wrap { background: white; border-radius: 18px; padding: 1rem; border: 1px solid var(--line); }
.table-wrap { overflow: auto; padding: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.choice { display: flex; gap: .6rem; align-items: center; background: white; border-radius: 14px; padding: .7rem .8rem; border: 1px solid var(--line); }
fieldset { border: 0; padding: 0; display: grid; gap: .5rem; }
.box-thread { background: transparent; }
.bubble-quote { border-color: #e4d4ff; background: #faf7ff; }
.stripe-note { margin: 1.5rem 0; }
.empty { background: white; border-radius: 18px; padding: 1rem; }
.footer { background: var(--ink); color: white; padding: 3rem 0 1.4rem; margin-top: 2rem; }
.footer a { color: white; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 1rem; }
.footer-grid div { display: grid; gap: .35rem; align-content: start; }
.footer span { color: #ffb199; font-weight: 800; }
.footer-end { margin-top: 2rem; color: rgba(255,255,255,.7); }
.report { margin-top: 1rem; }

@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }
    .nav, .top-actions { display: none; }
    .topbar.is-open .topbar-inner { flex-wrap: wrap; padding-bottom: 1rem; }
    .topbar.is-open .nav, .topbar.is-open .top-actions { display: flex; width: 100%; flex-direction: column; align-items: flex-start; margin: 0; }
    .dash-grid, .profile-grid, .story, .filters, .budget-card, .footer-grid, .plan-row, .next-step, .profile-head { grid-template-columns: 1fr; display: grid; }
    .plan-side { text-align: left; }
    .filters { grid-template-columns: 1fr; }
    .dock {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
        justify-content: space-between; gap: 1rem; align-items: center;
        background: rgba(255,252,250,.96); border-top: 1px solid var(--line); padding: .7rem 1rem;
    }
    .has-dock { padding-bottom: 5.2rem; }
    .profile-cta { display: none; }
}
@media (min-width: 801px) {
    .stories { grid-template-columns: 1fr; }
}