/* ============================================================
   LocalGURUJI — design system
   Vanilla CSS. Server-rendered friendly, no framework.
   Motion is progressive: disabled under prefers-reduced-motion.
   ============================================================ */

:root {
    /* Google logo palette */
    --g-blue:   #4285f4;
    --g-red:    #ea4335;
    --g-yellow: #fbbc05;
    --g-green:  #34a853;

    /* Brand (Google blue ramp) */
    --brand-700: #174ea6;
    --brand-600: #1a73e8;
    --brand-500: #4285f4;
    --brand-400: #8ab4f8;
    --violet:    #34a853;            /* secondary accent = Google green (legacy var name) */
    --accent:    var(--brand-600);   /* per-business pages may override this */
    --accent-2:  var(--violet);

    /* Semantic (Google system colors) */
    --amber:   #f9ab00;   /* ratings */
    --success: #188038;
    --error:   #d93025;
    --warn:    #b06000;
    --wa:      #25d366;   /* WhatsApp */

    /* Ink & surfaces */
    --ink:     #0f172a;
    --ink-soft:#334155;
    --muted:   #64748b;
    --line:    #e6e8ef;
    --line-2:  #eef0f6;
    --bg:      #f6f7fb;
    --surface: #ffffff;
    --surface-2:#f9fafc;

    /* Radius */
    --r-sm: 8px;
    --r:    12px;
    --r-lg: 18px;
    --r-xl: 26px;
    --pill: 999px;

    /* Shadows (soft, layered) */
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
    --shadow:    0 6px 20px -6px rgba(15,23,42,.14), 0 2px 6px -2px rgba(15,23,42,.08);
    --shadow-lg: 0 18px 44px -12px rgba(15,23,42,.24), 0 6px 14px -8px rgba(15,23,42,.14);
    --shadow-brand: 0 10px 26px -8px rgba(26,115,232,.5);

    --t: 200ms cubic-bezier(.4,0,.2,1);
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-head: "Sora", var(--font);
}

* { box-sizing: border-box; }

/* The hidden attribute must win over component display rules (e.g. .form label). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* soft ambient background */
    background-image:
        radial-gradient(60rem 30rem at 110% -10%, rgba(52,168,83,.06), transparent 60%),
        radial-gradient(50rem 26rem at -10% 0%, rgba(26,115,232,.07), transparent 55%);
    background-attachment: fixed;
}

h1, h2, h3, .brand { font-family: var(--font-head); letter-spacing: -0.02em; color: var(--ink); }
h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.35rem); line-height: 1.15; font-weight: 800; }
h2 { font-size: 1.4rem; font-weight: 700; margin-top: 2rem; }
h3 { font-weight: 700; }

a { color: var(--brand-600); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--brand-700); }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 0.7rem clamp(1rem, 4vw, 2rem);
    background: rgba(255,255,255,.72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); background: rgba(255,255,255,.86); }
.site-header nav { display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.3rem); }
.site-header nav a { color: var(--ink-soft); font-weight: 500; font-size: .95rem; }
.site-header nav a:hover { color: var(--brand-600); }

.brand {
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 800; font-size: 1.2rem; color: var(--ink);
}
.brand::before {
    content: ""; width: 26px; height: 26px; border-radius: 8px;
    background: conic-gradient(from 45deg, var(--g-blue), var(--g-green), var(--g-yellow), var(--g-red), var(--g-blue));
    box-shadow: var(--shadow-brand);
    transition: transform var(--t);
}
.brand:hover::before { transform: rotate(-8deg) scale(1.06); }
.admin-header .badge { vertical-align: middle; }

/* ---------- Layout ---------- */
.container { max-width: 760px; margin: 0 auto; padding: 1.75rem clamp(1rem, 4vw, 1.5rem) 4rem; animation: pageIn .5s ease both; }
.container-wide { max-width: 1040px; }

.site-footer {
    text-align: center; color: var(--muted); font-size: .85rem;
    padding: 2rem 1rem; border-top: 1px solid var(--line);
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.5));
}

/* ---------- Buttons ---------- */
.button {
    --btn-bg: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), #fff 20%));
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .62rem 1.15rem; border: 0; border-radius: var(--pill);
    background: var(--btn-bg); color: #fff; font: inherit; font-weight: 600; font-size: .95rem;
    text-decoration: none; cursor: pointer; position: relative; overflow: hidden;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent), transparent 45%);
    transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
.button::after { /* sheen */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .6s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--accent), transparent 35%); color:#fff; }
.button:hover::after { transform: translateX(120%); }
.button:active { transform: translateY(0); }
.button-danger { --accent: var(--error); }
.button-wa { --accent: var(--wa); }
.button[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.button[disabled]:hover { transform: none; }

.link-button {
    background: none; border: 0; padding: 0; font: inherit; color: var(--brand-600);
    text-decoration: none; cursor: pointer; font-weight: 500; transition: color var(--t);
}
.link-button:hover { color: var(--brand-700); text-decoration: underline; }
.inline-form { display: inline; }

/* ---------- Cards ---------- */
.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 1.5rem;
    box-shadow: var(--shadow-sm); transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}

/* ---------- Flash / toasts ---------- */
.flash {
    padding: .8rem 1.05rem; border-radius: var(--r); margin-bottom: 1rem;
    font-size: .95rem; font-weight: 500; border: 1px solid transparent;
    display: flex; align-items: flex-start; gap: .5rem;
    animation: flashIn .45s cubic-bezier(.2,.8,.3,1.2) both;
    box-shadow: var(--shadow-sm);
}
.flash::before { font-weight: 700; }
.flash-error   { background: #fce8e6; color: #c5221f; border-color: #f6bcb9; }
.flash-error::before { content: "!"; }
.flash-success { background: #e6f4ea; color: #188038; border-color: #b7dfc2; }
.flash-success::before { content: "✓"; }
.flash-info    { background: #e8f0fe; color: #174ea6; border-color: #aecbfa; }
.flash-info::before { content: "i"; font-style: italic; }

.muted { color: var(--muted); font-size: .92rem; }

/* ---------- Forms ---------- */
.form { max-width: 440px; }
.form-wide { max-width: 660px; }
.form label { display: block; margin-bottom: 1.05rem; font-weight: 600; font-size: .9rem; color: var(--ink-soft); }
.form input, .form select, .form textarea {
    display: block; width: 100%; margin-top: .38rem; padding: .68rem .8rem;
    font: inherit; font-weight: 400; color: var(--ink);
    border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none; border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(66,133,244,.16);
}
.form textarea { resize: vertical; }
.form fieldset { border: 1px solid var(--line); border-radius: var(--r); margin: 1.1rem 0; padding: 1.1rem 1.2rem; background: var(--surface-2); }
.form legend { font-weight: 700; font-size: .95rem; padding: 0 .45rem; color: var(--ink); }
.checkbox-label { font-weight: 400 !important; display: flex; align-items: center; gap: .5rem; }
.checkbox-label input { width: auto; margin: 0; }
.hours-row { display: flex; align-items: center; gap: .6rem; }
.hours-row input { max-width: 220px; margin-top: 0 !important; }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .16rem .6rem; border-radius: var(--pill);
    font-size: .74rem; font-weight: 700; letter-spacing: .01em;
    background: var(--line-2); color: var(--muted); vertical-align: middle;
    line-height: 1.5;
}
.badge-verified { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #047857; position: relative; overflow: hidden; }
.badge-verified::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.6) 50%, transparent 60%);
    transform: translateX(-150%);
}
.badge-verified:hover::after { animation: shine 1s ease; }
.badge-pending  { background: #fef3c7; color: #b45309; }
.badge-rejected { background: #fee2e2; color: #b91c1c; }
.badge-sponsored{ background: linear-gradient(135deg,#fde68a,#fcd34d); color:#92400e; }

/* ---------- Tables ---------- */
.table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm);
}
.table th, .table td { text-align: left; padding: .72rem .9rem; border-bottom: 1px solid var(--line-2); }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--surface-2); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t); }
.table tbody tr:hover { background: var(--surface-2); }
.table input[type="text"], .table select { padding: .32rem .5rem; font-size: .88rem; margin-top: 0; }
.row-actions { white-space: nowrap; display: flex; gap: .5rem; align-items: center; }
.row-actions .button { padding: .3rem .75rem; font-size: .82rem; }
.inline-fields { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; max-width: none; }
.inline-fields label { margin-bottom: 0; }

/* ---------- Hero (home) ---------- */
.hero { text-align: center; padding: 2.5rem 0; }
.hero-search {
    position: relative; text-align: center;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1rem clamp(2rem, 4vw, 3rem);
    margin: -1.75rem calc(50% - 50vw) 1.5rem;
    width: 100vw; overflow: hidden;
}
.hero-search::before { /* animated aurora */
    content: ""; position: absolute; inset: -20% -10% auto -10%; height: 140%;
    background:
        radial-gradient(38rem 20rem at 20% 15%, rgba(66,133,244,.28), transparent 60%),
        radial-gradient(34rem 18rem at 82% 20%, rgba(52,168,83,.25), transparent 60%),
        radial-gradient(30rem 16rem at 55% 90%, rgba(59,130,246,.18), transparent 60%);
    filter: blur(6px); z-index: -1;
    animation: aurora 16s ease-in-out infinite alternate;
}
.hero-search h1 {
    font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.2rem); max-width: 18ch; margin: 0 auto .5rem;
    background: linear-gradient(120deg, var(--ink) 30%, var(--brand-600) 70%, var(--violet));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: fadeUp .6s ease both;
}
.hero-search > p { animation: fadeUp .6s .06s ease both; font-size: 1.05rem; color: var(--ink-soft); }

.search-bar {
    display: flex; gap: .5rem; max-width: 680px; margin: 1.6rem auto .9rem;
    background: var(--surface); padding: .5rem; border-radius: var(--pill);
    box-shadow: var(--shadow-lg); border: 1px solid var(--line);
    animation: fadeUp .6s .12s ease both;
}
.search-bar input[type="search"], .search-bar input[type="text"] {
    flex: 1; padding: .7rem 1.1rem; font: inherit; border: 0; background: transparent; border-radius: var(--pill);
}
.search-bar input:focus { outline: none; }
.search-bar select { border: 0; background: transparent; font: inherit; color: var(--ink-soft); padding: 0 .5rem; cursor: pointer; }
.search-bar .button { padding-inline: 1.5rem; }
.search-bar-compact {
    box-shadow: var(--shadow); max-width: none; margin: 0 0 1.5rem;
    animation: none;
}
@media (max-width: 620px) {
    .search-bar { flex-direction: column; border-radius: var(--r-lg); padding: .8rem; }
    .search-bar input, .search-bar select { border: 1px solid var(--line); border-radius: var(--r-sm); }
}

.top-searches { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; align-items: center; animation: fadeUp .6s .18s ease both; }
.top-searches .muted { margin-right: .2rem; }
.chip {
    display: inline-flex; align-items: center; padding: .32rem .85rem; border-radius: var(--pill);
    background: rgba(255,255,255,.8); border: 1px solid var(--line); color: var(--brand-600);
    text-decoration: none; font-size: .88rem; font-weight: 500; cursor: pointer;
    transition: transform var(--t), border-color var(--t), background var(--t), color var(--t);
}
.chip:hover { transform: translateY(-2px); border-color: var(--brand-400); background: #fff; color: var(--brand-700); }

/* ---------- Section headings with the 4-color Google underline ---------- */
main section > h2, .band-head h2 { position: relative; display: inline-block; }
main section > h2::after, .band-head h2::after {
    content: ""; position: absolute; left: 0; bottom: -7px; height: 4px; width: 100%;
    background: linear-gradient(90deg, var(--g-blue) 0 25%, var(--g-red) 25% 50%, var(--g-yellow) 50% 75%, var(--g-green) 75% 100%);
    border-radius: 4px;
    transform: scaleX(0); transform-origin: left; transition: transform .5s ease .1s;
}
main section > h2.is-visible::after, .band-head h2.is-visible::after { transform: scaleX(1); }

/* ---------- Grids ---------- */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: .85rem; margin-top: 1.4rem; }
.category-card {
    display: flex; flex-direction: column; gap: .25rem; padding: 1.05rem 1.15rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.category-card strong { font-family: var(--font-head); }
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-400); }

.location-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: .85rem; margin-top: 1.4rem; }
.location-card {
    position: relative; display: flex; flex-direction: column; gap: .2rem;
    padding: 1.05rem 1.15rem 1.05rem 2.6rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.location-card strong { font-family: var(--font-head); }
.location-pin { position: absolute; left: .85rem; top: 1.05rem; }
.location-count {
    display: inline-block; margin-top: .35rem; align-self: flex-start;
    font-size: .78rem; font-weight: 600; color: var(--brand-600);
    background: rgba(66, 133, 244, .1); border-radius: 999px; padding: .15rem .6rem;
}
.location-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-400); }
.location-about { margin: 1.2rem 0 1.6rem; max-width: 72ch; }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; align-items: center; margin: 2rem 0 1rem; }
.page-link {
    display: inline-block; min-width: 2.2rem; text-align: center; padding: .45rem .7rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
    color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 500;
    transition: border-color var(--t), background var(--t);
}
.page-link:hover { border-color: var(--brand-400); }
.page-link.is-current { background: var(--brand-600); border-color: var(--brand-600); color: #fff; font-weight: 700; }
.page-link.is-disabled { opacity: .45; pointer-events: none; }
.page-gap { color: var(--ink-3); padding: 0 .2rem; }

.business-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; margin-top: 1.2rem; }
.business-card {
    display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.1rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.business-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-400); }
.business-card img { border-radius: 12px; object-fit: cover; box-shadow: var(--shadow-sm); }
.logo-placeholder {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 12px; flex: none;
    background: linear-gradient(135deg, var(--brand-500), var(--violet));
    color: #fff; font-family: var(--font-head); font-size: 1.5rem; font-weight: 800;
    box-shadow: var(--shadow-brand);
}
.rating { color: #b45309; font-weight: 700; }

.results-list { display: flex; flex-direction: column; gap: .7rem; max-width: 760px; }
.result-card { align-items: center; }
.results-heading { font-size: 1.35rem; }

.cta-band {
    text-align: center; color: #fff; border-radius: var(--r-xl);
    padding: clamp(2rem, 4vw, 3rem) 1.5rem; margin-top: 2.5rem; position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--brand-600), var(--violet));
    box-shadow: var(--shadow-lg);
}
.cta-band::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(24rem 16rem at 15% 0%, rgba(255,255,255,.22), transparent 60%),
                radial-gradient(20rem 14rem at 100% 100%, rgba(255,255,255,.14), transparent 60%);
}
.cta-band h2 { color: #fff; margin-top: 0; }
.cta-band h2::after { display: none; }
.cta-band p { color: rgba(255,255,255,.92); position: relative; }
.cta-band .button { --accent: #fff; color: var(--brand-700); position: relative; }
.cta-band .button:hover { color: var(--brand-700); }

/* ---------- Secondary (ghost) button ---------- */
.button-ghost {
    background: var(--surface); color: var(--ink-soft); font-weight: 600;
    border: 1.5px solid var(--line); box-shadow: none;
}
.button-ghost:hover { color: var(--brand-700); border-color: var(--brand-400); background: var(--surface); }
.button-ghost::after { display: none; }
.btn-block { width: 100%; }
.block-form { display: block; }

/* ---------- Public business profile ---------- */
.profile-hero {
    height: clamp(150px, 22vw, 230px); border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), var(--violet) 55%));
    background-size: cover; background-position: center; position: relative; overflow: hidden;
    box-shadow: var(--shadow);
}
.profile-hero.has-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.32), transparent 55%); }
.profile-hero:not(.has-cover)::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(20rem 12rem at 12% 10%, rgba(255,255,255,.28), transparent 60%),
                radial-gradient(16rem 10rem at 92% 90%, rgba(255,255,255,.16), transparent 60%);
}

.profile-topbar { display: flex; gap: 1.2rem; align-items: flex-end; margin: -3.2rem 0 1.6rem clamp(.5rem, 3vw, 1.8rem); position: relative; }
.profile-avatar { flex: none; }
.profile-avatar img, .logo-lg {
    width: 104px; height: 104px; border-radius: 22px; object-fit: cover;
    border: 4px solid var(--surface); box-shadow: var(--shadow-lg); background: var(--surface);
}
.logo-lg { width: 104px; height: 104px; font-size: 2.6rem; }
.profile-id { padding-bottom: .35rem; }
.profile-id h1 { font-size: clamp(1.5rem, 1rem + 2.4vw, 2.2rem); display: inline; }
.profile-id .badge-verified { font-size: .8rem; vertical-align: middle; }
.tagline { font-size: 1.08rem; color: var(--ink-soft); margin: .35rem 0 .5rem; }
.profile-meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.meta-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .28rem .7rem; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); font-size: .85rem; font-weight: 500; box-shadow: var(--shadow-sm); }
.meta-rating { color: #b45309; }

.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.4rem; align-items: start; }
.profile-main { display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; }
.profile-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 78px; }
@media (max-width: 860px) {
    .profile-layout { grid-template-columns: 1fr; }
    .profile-side { position: static; order: -1; }
}
@media (max-width: 620px) {
    .profile-topbar { flex-direction: column; align-items: flex-start; gap: .7rem; margin-left: clamp(.5rem, 3vw, 1.8rem); }
    .profile-id { padding-bottom: 0; }
    .profile-id h1 { display: block; font-size: 1.55rem; }
}

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.3rem 1.5rem; box-shadow: var(--shadow-sm); }
.panel h2 { margin-top: 0; }
.panel > .interact { margin-top: 0; border-top: 0; padding-top: 0; }

.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.15rem 1.2rem; box-shadow: var(--shadow-sm); }
.contact-card { display: flex; flex-direction: column; gap: .55rem; }
.contact-card .side-cta, .contact-card .block-form { display: block; }
.contact-card .side-cta .button { width: 100%; }
.side-title { font-size: .95rem; margin: 0 0 .7rem; color: var(--ink); }
.hours-table { width: 100%; }
.hours-table td { padding: .28rem .5rem .28rem 0; font-size: .9rem; }
.hours-table td:last-child { text-align: right; color: var(--ink-soft); }
.hours-today { font-weight: 700; }
.hours-today td { color: var(--brand-600); }

/* ---------- Listing cards (grid) ---------- */
.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; margin-top: 1rem; }
.listing-card {
    display: block; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: .8rem; text-decoration: none; color: var(--ink);
    box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.listing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-400); }
.listing-card img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--r-sm); }
.listing-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 140px; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--surface-2), var(--line-2)); font-size: 2.2rem; }
.listing-card h3 { margin: .6rem 0 .2rem; font-size: 1rem; }
.listing-card .price { font-weight: 800; color: var(--brand-600); font-family: var(--font-head); }

/* ---------- Posts ---------- */
.post-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.post { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; transition: transform var(--t), box-shadow var(--t); }
.post:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.post-body { flex: 1; min-width: 0; }
.post-body h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.post-date { margin: .5rem 0 0; font-size: .82rem; }
.post-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm); flex: none; }

/* ---------- Listing detail page ---------- */
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand-600); }
.listing-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.4rem; align-items: start; }
.listing-media { display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; }
.listing-hero-img { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); background: var(--surface-2); }
.listing-noimg-lg { height: 320px; font-size: 4rem; border-radius: var(--r-lg); }
.thumb-row { display: flex; gap: .55rem; flex-wrap: wrap; }
.thumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); cursor: pointer; border: 2px solid transparent; box-shadow: var(--shadow-sm); transition: border-color var(--t); }
.thumb:hover { border-color: var(--brand-400); }
.thumb.is-active { border-color: var(--brand-600); }
.listing-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 78px; }
.buy-card { display: flex; flex-direction: column; gap: .7rem; }
.buy-card .badge { align-self: flex-start; }
.listing-title { font-size: 1.5rem; margin: 0; }
.listing-price { font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: var(--brand-600); margin: 0; }
.buy-card .side-cta .button { width: 100%; }
.seller-card { display: block; text-decoration: none; color: var(--ink); transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.seller-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-400); }
.seller-name { font-weight: 700; font-family: var(--font-head); margin: .2rem 0; }
.seller-link { color: var(--brand-600); font-weight: 600; font-size: .9rem; }
@media (max-width: 860px) {
    .listing-layout { grid-template-columns: 1fr; }
    .listing-side { position: static; order: -1; }
}

/* ---------- Reviews ---------- */
.interact { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1.75rem; }
.review-form { max-width: 500px; margin-bottom: 1.75rem; }
.review-list { display: flex; flex-direction: column; gap: .85rem; }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); }
.review-head { margin: 0 0 .35rem; display: flex; gap: .55rem; align-items: baseline; flex-wrap: wrap; }
.review-head .rating { color: var(--amber); letter-spacing: 1px; }

/* ---------- Chat ---------- */
.chat-box { max-width: 660px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.chat-messages { height: 400px; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .55rem; background: var(--surface-2); scroll-behavior: smooth; }
.msg { max-width: 76%; padding: .55rem .8rem; border-radius: 16px; font-size: .95rem; box-shadow: var(--shadow-sm); animation: msgIn .3s cubic-bezier(.2,.8,.3,1.1) both; }
.msg-text { display: block; }
.msg-time { display: block; font-size: .7rem; color: var(--muted); margin-top: .18rem; }
.msg-mine { align-self: flex-end; background: linear-gradient(135deg, var(--brand-600), var(--brand-500)); color: #fff; border-bottom-right-radius: 5px; }
.msg-mine .msg-time { color: rgba(255,255,255,.82); }
.msg-theirs { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.suggested { display: flex; gap: .45rem; flex-wrap: wrap; padding: .7rem 1.1rem 0; }
.suggested .chip { cursor: pointer; }
.chat-form { display: flex; gap: .5rem; padding: .9rem 1.1rem; border-top: 1px solid var(--line-2); }
.chat-form input { flex: 1; padding: .65rem .85rem; font: inherit; border: 1.5px solid var(--line); border-radius: var(--pill); transition: border-color var(--t), box-shadow var(--t); }
.chat-form input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(66,133,244,.14); }
.chat-error { color: var(--error); padding: 0 1.1rem .8rem; margin: 0; font-size: .9rem; }

.thread-list { display: flex; flex-direction: column; gap: .6rem; max-width: 660px; }
.thread-item { display: block; padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.thread-item:hover { transform: translateX(3px); box-shadow: var(--shadow); border-color: var(--brand-400); }

/* ---------- Scroll reveal (JS-gated so no-JS shows everything) ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s cubic-bezier(.4,0,.2,1); transition-delay: calc(var(--i, 0) * 45ms); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes flashIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes shine { to { transform: translateX(150%); } }
@keyframes aurora {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(-2%, 2%, 0) scale(1.06); }
    100% { transform: translate3d(2%, -1%, 0) scale(1.03); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    * , *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* ---- CMS pages + footer links ---- */
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-bottom: .6rem; }
.footer-links a { color: var(--muted); font-size: .85rem; font-weight: 500; }
.footer-links a:hover { color: var(--brand-600); }
.cms-page { max-width: 760px; }
.cms-body { line-height: 1.75; }
.cms-body h2 { font-size: 1.2rem; margin-top: 1.6rem; }
.cms-body ul, .cms-body ol { padding-left: 1.3rem; }
.cms-body li { margin: .3rem 0; }
.cms-updated { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.code-area { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85rem; }

/* ---- Phase 5: superadmin panel ---- */
.flag-list { display: flex; flex-direction: column; gap: .8rem; }
.flag-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; }
.flag-info strong { font-family: var(--font-head); }
.flag-info p { margin: .35rem 0 0; }
.flag-note { color: var(--warn); font-size: .85rem; }
.flag-meta { font-size: .8rem; }
.flag-toggle { flex: none; }
.pagination { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1rem; }
.pagination a, .page-current { padding: .3rem .7rem; border-radius: var(--r-sm); border: 1px solid var(--line); text-decoration: none; }
.page-current { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }

/* ---- Pricing ---- */
.pricing-hero { text-align: center; padding: 2rem 0 1rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin-top: 1.5rem; align-items: start; }
.pricing-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); position: relative; transition: transform var(--t), box-shadow var(--t); }
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pricing-featured { border-color: var(--brand-400); box-shadow: var(--shadow); }
.pricing-featured::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); padding: 1.5px; background: linear-gradient(135deg, var(--brand-500), var(--violet)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.pricing-amount { font-family: var(--font-head); font-size: 2rem; font-weight: 800; margin: .5rem 0 1rem; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.pricing-features li { padding: .4rem 0 .4rem 1.6rem; position: relative; border-top: 1px solid var(--line-2); }
.pricing-features li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }

/* ---- Contact page ---- */
.contact-hero { text-align: center; padding: 1.5rem 0 .5rem; }
.contact-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.4rem; align-items: start; margin-top: 1.5rem; }
.contact-info { display: flex; flex-direction: column; gap: 1rem; }
.contact-line { margin: .4rem 0; }
.contact-social { display: flex; flex-wrap: wrap; gap: .8rem; }
.contact-social a { font-weight: 600; }
@media (max-width: 780px) { .contact-layout { grid-template-columns: 1fr; } .contact-info { order: 2; } }

/* ---- Phase 6: AI assist panels ---- */
.ai-panel { background: linear-gradient(135deg, rgba(66,133,244,.08), rgba(52,168,83,.08)); border: 1px solid var(--brand-400); border-radius: var(--r); padding: 1rem 1.1rem; margin-bottom: 1.2rem; }
.ai-panel > strong { font-family: var(--font-head); }
.ai-panel p { margin: .35rem 0 .7rem; }
.ai-panel-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.ai-panel-row input { flex: 1; min-width: 200px; margin-top: 0 !important; padding: .6rem .8rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); font: inherit; }
.ai-panel-row .button { flex: none; }
#ai-status, #ai-draft-status { display: inline-block; margin-top: .5rem; }
.ai-reply-bar { padding: .5rem 1.1rem 0; }
.ai-reply-bar .chip { cursor: pointer; border: 1px solid var(--brand-400); }

/* ---- Mobile header & overflow guards ---- */
body { overflow-x: clip; }
@media (max-width: 680px) {
    .site-header { flex-wrap: wrap; padding: .55rem .9rem; gap: .35rem .8rem; }
    .site-header .brand { font-size: 1.05rem; }
    .site-header nav { flex-wrap: wrap; gap: .4rem .85rem; font-size: .88rem; margin-left: auto; }
    .site-header nav .button { padding: .38rem .8rem; font-size: .82rem; }
    .hero-search { padding-top: 1.6rem; }
    .hero-search h1 { font-size: 1.65rem; }
    .container { padding-top: 1.1rem; }
}

/* ============================================================
   Admin console — dark sidebar shell
   ============================================================ */
.admin-shell { display: flex; min-height: 100vh; background: var(--bg); background-image: none; animation: none; }

.admin-sidebar {
    width: 250px; flex: none; display: flex; flex-direction: column;
    background: linear-gradient(180deg, #0e1c30, #0a1524);
    color: #cbd5e1; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-logo {
    display: flex; align-items: center; gap: .65rem; padding: 1.15rem 1.2rem 1rem;
    color: #fff; text-decoration: none; font-family: var(--font-head); font-weight: 800;
}
.admin-logo small { display: block; font: 500 .7rem var(--font); color: #7c88a5; letter-spacing: .06em; text-transform: uppercase; }
.admin-logo-mark { width: 30px; height: 30px; border-radius: 9px; flex: none;
    background: conic-gradient(from 45deg, var(--g-blue), var(--g-green), var(--g-yellow), var(--g-red), var(--g-blue));
    box-shadow: var(--shadow-brand); }

.admin-nav { flex: 1; padding: .4rem .7rem 1rem; display: flex; flex-direction: column; gap: 2px; }
.admin-nav-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b; padding: 1rem .55rem .35rem; }
.admin-nav a {
    display: flex; align-items: center; gap: .6rem; padding: .52rem .65rem;
    border-radius: 9px; color: #cbd5e1; text-decoration: none; font-size: .92rem; font-weight: 500;
    transition: background var(--t), color var(--t);
}
.admin-nav a span { width: 1.25rem; text-align: center; }
.admin-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-nav a.is-active { background: linear-gradient(135deg, var(--brand-600), var(--violet)); color: #fff; box-shadow: 0 6px 14px -6px rgba(26,115,232,.55); }

.admin-user { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.admin-user-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand-500), var(--violet)); color: #fff; font-weight: 700; }
.admin-user-meta { flex: 1; min-width: 0; line-height: 1.25; }
.admin-user-meta strong { display: block; color: #fff; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user-meta span { font-size: .72rem; color: #7c88a5; text-transform: capitalize; }
.admin-logout { background: none; border: 1px solid rgba(255,255,255,.18); color: #cbd5e1; border-radius: 8px;
    width: 30px; height: 30px; cursor: pointer; font-size: .95rem; transition: all var(--t); }
.admin-logout:hover { background: var(--error); border-color: var(--error); color: #fff; }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .85rem clamp(1rem, 3vw, 2rem); background: var(--surface);
    border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.admin-page-title { font-size: 1.15rem; margin: 0; }
.admin-content { padding: 1.4rem clamp(1rem, 3vw, 2rem) 3rem; max-width: 1160px; width: 100%; }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; }
.kpi-card {
    display: flex; flex-direction: column; gap: .15rem; padding: 1.05rem 1.15rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
a.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-400); }
.kpi-icon { font-size: 1.25rem; }
.kpi-num { font-family: var(--font-head); font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.kpi-label { color: var(--muted); font-size: .85rem; }
.kpi-attention { border-left: 4px solid var(--amber); }
.kpi-attention .kpi-num { color: var(--warn); }
.row-muted td { opacity: .55; }

/* Admin login screen */
.admin-login-wrap { max-width: 420px; margin: 0 auto; padding: 4rem 1.2rem; }
.admin-login-brand { text-align: center; margin-bottom: 1.4rem; }
.admin-login-wrap h1 { text-align: center; font-size: 1.4rem; }
.admin-login-wrap .form { max-width: none; }

@media (max-width: 860px) {
    .admin-shell { flex-direction: column; }
    .admin-sidebar { width: 100%; height: auto; position: static; }
    .admin-nav { flex-direction: row; overflow-x: auto; padding: .3rem .7rem .8rem; }
    .admin-nav-label { display: none; }
    .admin-nav a { white-space: nowrap; }
    .admin-user { padding: .5rem 1rem .8rem; border-top: none; }
}

/* ============================================================
   Growth Score game
   ============================================================ */
.game-wrap { max-width: 620px; margin: 0 auto; }
.game-head { text-align: center; margin-bottom: 1.4rem; }
.game-kicker { display: inline-block; padding: .3rem .9rem; border-radius: var(--pill);
    background: linear-gradient(135deg, rgba(66,133,244,.12), rgba(52,168,83,.12));
    border: 1px solid var(--brand-400); font-weight: 700; font-size: .85rem; margin-bottom: .8rem; }
.game-grad { background: linear-gradient(120deg, var(--brand-600), var(--violet));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.game-progress { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.game-progress-track { flex: 1; height: 10px; border-radius: var(--pill); background: var(--line-2); overflow: hidden; }
.game-progress-fill { height: 100%; width: 0; border-radius: var(--pill);
    background: linear-gradient(90deg, var(--brand-500), var(--violet)); transition: width .45s cubic-bezier(.4,0,.2,1); }
.game-level { font-family: var(--font-head); font-weight: 800; font-size: .78rem; letter-spacing: .08em; color: var(--brand-600); white-space: nowrap; }

.game-stage { position: relative; }
.game-card {
    display: none; text-align: center; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-xl); padding: 2rem 1.6rem; box-shadow: var(--shadow);
}
.game-card.is-current { display: block; animation: gameIn .4s cubic-bezier(.2,.8,.3,1.1) both; }
@keyframes gameIn { from { opacity: 0; transform: translateX(28px) scale(.98); } to { opacity: 1; transform: none; } }
.game-card h2 { font-size: 1.25rem; margin: .4rem 0 1.4rem; }
.game-q-emoji { font-size: 3rem; line-height: 1; display: inline-block; }
.game-q-emoji.pop { animation: emojiPop .35s cubic-bezier(.2,.8,.3,1.4); }
@keyframes emojiPop { 40% { transform: scale(1.35) rotate(-6deg); } }

.game-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: var(--pill);
    background: linear-gradient(90deg, var(--brand-500), var(--violet)); outline: none; cursor: pointer; }
.game-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%;
    background: #fff; border: 4px solid var(--brand-600); box-shadow: var(--shadow); cursor: grab; transition: transform var(--t); }
.game-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.game-slider::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff;
    border: 4px solid var(--brand-600); box-shadow: var(--shadow); cursor: grab; }
.game-slider-labels { display: flex; justify-content: space-between; margin-top: .6rem; font-size: .82rem; color: var(--muted); }

.game-nav { display: flex; justify-content: space-between; gap: .8rem; margin-top: 1.1rem; }

/* Result */
.game-result { position: relative; overflow: hidden; }
.game-ring { position: relative; width: 180px; margin: 0 auto .6rem; }
.game-ring svg { transform: rotate(-90deg); display: block; }
.game-ring-bg { fill: none; stroke: var(--line-2); stroke-width: 11; }
.game-ring-val { fill: none; stroke: url(#gr) currentColor; stroke: var(--brand-600); stroke-width: 11;
    stroke-linecap: round; transition: stroke-dashoffset .12s linear; }
.game-ring-num { position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--font-head); font-size: 3rem; font-weight: 800; }
.game-ring-num span::after { content: ""; }
.game-tips { list-style: none; padding: 0; margin: 1rem auto 1.4rem; max-width: 430px; text-align: left; }
.game-tips li { padding: .55rem .8rem; margin-bottom: .5rem; background: var(--surface-2);
    border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: .92rem; }
.game-cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

.game-confetti { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; pointer-events: none;
    animation: confettiFall linear forwards; }
@keyframes confettiFall {
    to { transform: translate(var(--drift, 0), 420px) rotate(720deg); opacity: 0; }
}

/* ============================================================
   Growth-platform home sections
   ============================================================ */
.section-sub { max-width: 560px; margin: .3rem auto 0; text-align: center; }

/* Live stats band */
.stats-band {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;
    margin: 2.5rem 0; padding: 1.6rem 1.4rem; border-radius: var(--r-xl);
    background: linear-gradient(135deg, #0d1b2e, #143c66); color: #fff;
    box-shadow: var(--shadow-lg); text-align: center; position: relative; overflow: hidden;
}
.stats-band::before { content: ""; position: absolute; inset: 0;
    background: radial-gradient(22rem 12rem at 12% 0%, rgba(52,168,83,.35), transparent 60%),
                radial-gradient(20rem 12rem at 90% 100%, rgba(66,133,244,.3), transparent 60%); }
.stat { position: relative; }
.stat strong { display: block; font-family: var(--font-head); font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800;
    background: linear-gradient(120deg, #aecbfa, #a8dab5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat span { color: #8ab4f8; font-size: .85rem; font-weight: 500; }

/* How it works */
.growth-section { margin-top: 2.5rem; text-align: center; }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.6rem; text-align: left; }
.step-card {
    position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 1.5rem 1.4rem 1.3rem; box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-400); }
.step-num { position: absolute; top: 1rem; right: 1.1rem; font-family: var(--font-head); font-size: 2.4rem; font-weight: 800;
    color: var(--line); line-height: 1; }
.step-icon { font-size: 1.7rem; display: block; margin-bottom: .5rem; }
.step-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.step-card p { margin: 0; color: var(--muted); font-size: .92rem; }

/* Game teaser */
.game-teaser {
    display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
    margin-top: 2.5rem; padding: 1.6rem 1.8rem; border-radius: var(--r-xl);
    background: linear-gradient(135deg, rgba(66,133,244,.10), rgba(52,168,83,.10));
    border: 1.5px dashed var(--brand-400);
}
.game-teaser h2 { margin: .45rem 0 .2rem; }
.game-teaser h2::after { display: none; }
.game-teaser p { margin: 0; max-width: 460px; }

/* Trust grid */
.trust-section { margin-top: 2.5rem; text-align: center; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.6rem; text-align: left; }
.trust-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 1.3rem 1.3rem 1.15rem; box-shadow: var(--shadow-sm); }
.trust-item > span { font-size: 1.55rem; display: block; margin-bottom: .45rem; }
.trust-item strong { font-family: var(--font-head); display: block; margin-bottom: .3rem; }
.trust-item p { margin: 0; color: var(--muted); font-size: .9rem; }

/* Verified provenance chip on profiles */
.provenance {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .55rem;
    padding: .3rem .8rem; border-radius: var(--pill); font-size: .8rem; font-weight: 600;
    background: #e6f4ea; border: 1px solid #b7dfc2; color: #188038;
}

/* ============================================================
   Bands — full-bleed, clearly delineated sections (Apple-style
   whitespace: generous padding, alternating surfaces, one CTA each)
   ============================================================ */
.band {
    margin: 0 calc(50% - 50vw);
    padding: clamp(3.2rem, 7vw, 5.5rem) clamp(1rem, 4vw, 1.5rem);
}
.band-inner { max-width: 1040px; margin: 0 auto; }
.band-alt { background: var(--surface); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.band-head { text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.band-head h2 { margin: 0; font-size: clamp(1.55rem, 1.15rem + 1.8vw, 2.3rem); }
.band-head .section-sub { margin-top: .9rem; }
.band-cta { text-align: center; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.band-cta .muted { display: block; margin-top: .6rem; font-size: .85rem; }

/* The final CTA band + stats band keep their own dark styling inside bands */
.band .stats-band { margin: 0; }
.band .cta-band { margin-top: 0; }
.band .game-teaser { margin-top: 0; }
.band .growth-section, .band .trust-section { margin-top: 0; }