/* ==========================================================================
   Godzly Freelancing — Premium UI/UX Overhaul
   ========================================================================== */

:root {
    /* Color Palette — V3 light foundation. These are the baseline definitions;
       the V3 block at the end of this file restates them as the authoritative
       set, and the two are kept in step deliberately so no dark value survives
       anywhere in the cascade. */
    --bg: #FFFFFF;
    --bg-deep: #FFFFFF;
    --bg-alt: #F7F8F7;
    
    /* Glass Surfaces (white, translucent) */
    --surface: #F7F8F7;
    --surface-strong: #FCFDFC;
    --surface-soft: rgba(252, 253, 252, 0.72);
    --surface-hover: #F1F3F1;
    
    /* Borders & Shadows (hairline warm greys) */
    --border: #E5E9E6;
    --border-subtle: rgba(21, 26, 24, 0.075);
    
    /* Text (Near-black ink / muted grey-green) */
    --text-main: #151A18;
    --text-light: #151A18;
    --text-muted: #68716D;
    
    /* Accents (Godzly emerald, deepened for white) */
    --accent: #0E9F6E;
    --accent-hover: #0A6C4A;
    --accent-ink: #0B7A54;
    --accent-soft: rgba(14, 159, 110, 0.10);
    --accent-edge: rgba(14, 159, 110, 0.30);
    --accent-secondary: #9AA6A0;
    
    /* System Colors */
    --success: #0B7A54;
    --danger: #B3261E;
    --warning: #8A5A00;
    
    /* Radius */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    
    /* Elevation — soft and neutral-tinted, never black */
    --shadow-sm: 0 1px 2px rgba(21, 26, 24, 0.05), 0 2px 6px rgba(21, 26, 24, 0.04);
    --shadow-md: 0 6px 18px rgba(21, 26, 24, 0.07), 0 2px 6px rgba(21, 26, 24, 0.04);
    --shadow-lg: 0 20px 48px rgba(21, 26, 24, 0.10), 0 8px 20px rgba(21, 26, 24, 0.05);
    --shadow-glow: 0 10px 26px rgba(14, 159, 110, 0.16);
    
    /* Animation */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fast: 180ms;
    --smooth: 320ms;
    
    /* Typography */
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Legacy Aliases (DO NOT REMOVE - used by JS inline styles) */
    --bg-dark: var(--bg);
    --bg-translucent: var(--surface);
    --glass-bg: var(--surface);
    --glass-border: var(--border-subtle);
    --glass-hover: var(--surface-hover);
    --neon-cyan: var(--accent);
    --neon-purple: var(--accent);
    --neon-white: var(--text-main);
    --transition-fast: var(--fast) var(--ease);
    --transition-smooth: var(--smooth) var(--ease);
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #FFFFFF;
    scroll-behavior: auto;
    scroll-padding-top: 6rem;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text-main);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.1;
    letter-spacing: -0.05em;
    color: var(--text-main);
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    border: none;
    background: none;
    cursor: pointer;
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

::selection {
    background-color: var(--accent-soft);
    color: var(--accent);
}

/* ==========================================================================
   Typography Utilities
   ========================================================================== */
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.neon-text, .neon-text-cyan, .neon-text-purple { color: var(--accent); }
.hidden { display: none !important; }
.full-width { width: 100%; }
.mb-4 { margin-bottom: 1.5rem; }

.section-label {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    font-weight: 650;
    margin-bottom: 0.75rem;
}

.section-title {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 750;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* ==========================================================================
   Global States & Accessibility
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

button:disabled, .btn:disabled, input:disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

/* ==========================================================================
   Premium Glassmorphism Mixins
   ========================================================================== */
/* Sharp glass: translucent panel only — no backdrop blur so content stays crisp */
.glass-panel {
    background: linear-gradient(145deg, var(--surface-strong), var(--surface-soft));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md), inset 0 1px 1px rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.68rem 1.35rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.92rem;
    transition: all var(--smooth) var(--ease);
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(180deg, #0C7A53 0%, #0A6C4A 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(11, 122, 84, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.btn-primary:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #0A6C4A 0%, #085B3E 100%);
    box-shadow: 0 10px 22px rgba(11, 122, 84, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    filter: none;
}

.btn:active {
    transform: scale(0.97);
}

.btn-secondary, .glass-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-main);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.btn-secondary:hover, .glass-btn:hover {
    transform: translateY(-2px);
    background: var(--surface-hover);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.btn-nav {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--text-muted);
    transition: all var(--fast) var(--ease);
}

.btn-icon:hover {
    background: var(--surface);
    color: var(--accent);
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.glass-nav {
    position: fixed;
    top: 0.85rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(1180px, calc(100% - 1.5rem));
    z-index: 1000;
    transition: all var(--smooth) var(--ease);
}

.nav-container {
    background: linear-gradient(145deg, var(--surface-strong), var(--surface-soft));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm), inset 0 1px 1px rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.5rem 0.5rem 1.25rem;
    border-radius: 18px;
    transition: all var(--smooth) var(--ease);
}

.glass-nav.scrolled .nav-container {
    background: linear-gradient(145deg, var(--surface-hover), var(--surface-strong));
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.logo {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-main);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-links a:not(.btn), .nav-links button:not(.btn) {
    padding: 0.45rem 0.85rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: all var(--fast) var(--ease);
}

.nav-links a:not(.btn):hover, .nav-links button:not(.btn):hover {
    color: var(--text-main);
    background: var(--surface-soft);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--border-subtle);
    margin-left: 0.25rem;
}

.nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.nav-username {
    font-size: 0.88rem;
    font-weight: 500;
}

.mobile-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
    color: var(--text-main);
    border-radius: 10px;
    place-items: center;
}

.mobile-nav {
    position: fixed;
    top: calc(0.85rem + 56px);
    right: 1rem;
    width: min(320px, calc(100% - 2rem));
    z-index: 999;
    padding: 1rem;
    display: none;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-nav.active {
    display: flex;
    animation: surface-enter 0.3s var(--ease);
}

.mobile-link, .mobile-btn {
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    text-align: left;
}

.mobile-link:hover, .mobile-btn:hover {
    background: var(--surface-soft);
    color: var(--text-main);
}

/* ==========================================================================
   Hero Section — "This Looks Expensive"
   ========================================================================== */
.hero-section {
    min-height: min(900px, 100svh);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8rem 5% 4rem;
    text-align: left;
    position: relative;
    overflow: hidden;
}



/* ── Hero Content Layout ───────────────────────────────────────────────── */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-width: 600px;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ── Trust Badge ───────────────────────────────────────────────────────── */
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.25rem;
    border-radius: 100px;
    font-size: 0.82rem;
    font-weight: 560;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(16px);
    margin-bottom: 1.5rem;
    letter-spacing: 0.01em;
}

.availability-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
    animation: pulse-dot 2s ease-in-out infinite;
    flex-shrink: 0;
}

/* ── Hero Title — Gradient Treatment ───────────────────────────────────── */
.hero-title {
    font-size: clamp(3.0rem, 8vw, 5.5rem);
    font-weight: 820;
    line-height: 1.02;
    letter-spacing: -0.06em;
    margin-bottom: 1rem;
}



/* ── Hero Subtitle ─────────────────────────────────────────────────────── */
.hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 640px;
    margin-bottom: 2rem;
}

/* ── Hero CTA Buttons ──────────────────────────────────────────────────── */
.hero-buttons {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
}

.hero-buttons .btn {
    padding: 0.85rem 1.85rem;
    font-size: 1rem;
    border-radius: 16px;
}

.hero-buttons .btn-primary i {
    transition: transform 400ms var(--ease);
}

.hero-buttons .btn-primary:hover i {
    transform: translateX(4px);
}

/* ── Hero Stats — Premium Glass Card ───────────────────────────────────── */
.hero-stats {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 1.15rem 2.5rem;
    border-radius: var(--radius-lg);
    margin-top: 0;
    position: relative;
}

/* Gradient accent line at top of stats card */
.hero-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-secondary), transparent);
    border-radius: 1px;
    opacity: 0.6;
}

/* Inner glass highlight */
.hero-stats::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    border-radius: 1px;
    pointer-events: none;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 1.75rem;
    gap: 0.1rem;
}

.stat-icon {
    font-size: 1rem;
    color: var(--accent);
    opacity: 0.6;
    margin-bottom: 0.15rem;
}

.stat-number {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.stat-label {
    font-size: 0.70rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 560;
    margin-top: 0.1rem;
}

.stat-divider {
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom, transparent, var(--border-subtle), transparent);
}

/* ── Scroll Indicator ──────────────────────────────────────────────────── */
.hero-section .scroll-indicator {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-muted);
    opacity: 0.5;
    transition: opacity var(--smooth) var(--ease);
    z-index: 1;
}

.hero-section .scroll-indicator:hover {
    opacity: 0.8;
}

.mouse {
    width: 24px;
    height: 38px;
    border: 2px solid var(--border-subtle);
    border-radius: 12px;
    position: relative;
    display: flex;
    justify-content: center;
}

.wheel {
    width: 3px;
    height: 8px;
    background: var(--text-muted);
    border-radius: 3px;
    margin-top: 6px;
    animation: wheel-scroll 2s ease-in-out infinite;
}

@keyframes wheel-scroll {
    0% { opacity: 1; transform: translateY(0); }
    50% { opacity: 0.3; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.scroll-text {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 550;
}



/* ==========================================================================
   Services Section
   ========================================================================== */
.services-section {
    padding: 6rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 1.15rem;
}

.service-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: all var(--smooth) var(--ease);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.80);
    background: linear-gradient(145deg, var(--surface-hover), var(--surface-strong));
}

.service-icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.3rem;
    background: var(--accent-soft);
    color: var(--accent);
}

.icon-cyan, .icon-purple, .icon-white {
    /* Legacy classes mapped to accent */
    background: var(--accent-soft);
    color: var(--accent);
}

.service-card h3 {
    font-size: 1.1rem;
    font-weight: 650;
}

.service-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ==========================================================================
   Portfolio Section (NEW)
   ========================================================================== */
.portfolio-section {
    padding: 6rem 0;
}

.portfolio-filters {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.filter-btn {
    padding: 0.45rem 1.1rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 550;
    border: 1px solid var(--border-subtle);
    background: var(--surface-soft);
    color: var(--text-muted);
    transition: all var(--fast) var(--ease);
}

.filter-btn:hover {
    background: var(--surface-hover);
    color: var(--text-main);
}

.filter-btn.active {
    background: var(--accent-soft);
    color: var(--accent-ink);
    border-color: var(--accent-edge);
    box-shadow: none;
    transform: scale(1.04);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.portfolio-card {
    overflow: hidden;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--smooth) var(--ease);
    position: relative;
}

.portfolio-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity var(--smooth) var(--ease);
}

.portfolio-card:hover::before {
    opacity: 1;
}

.portfolio-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}



.portfolio-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.portfolio-image img, .portfolio-placeholder {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    transition: transform 600ms var(--ease);
}

.portfolio-card:hover .portfolio-image img, 
.portfolio-card:hover .portfolio-placeholder {
    transform: scale(1.06);
}

.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16, 20, 18, 0.88) 0%, rgba(16, 20, 18, 0.28) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity var(--smooth) var(--ease);
}

.portfolio-card:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-overlay h3 {
    color: white;
    font-size: 1.15rem;
    font-weight: 650;
    margin-bottom: 0.5rem;
}

.portfolio-overlay .tech-tag {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    border-color: transparent;
    margin-bottom: 0.5rem;
    width: fit-content;
}

.portfolio-overlay .btn {
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    width: fit-content;
}

.portfolio-info {
    padding: 1.25rem 1.5rem;
}

.portfolio-info h3 {
    font-size: 1.05rem;
    font-weight: 650;
    margin-bottom: 0.35rem;
}

.portfolio-info p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.portfolio-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tech-tag {
    display: inline-flex;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 550;
    background: var(--accent-soft);
    color: var(--accent-ink);
    border: 1px solid var(--accent-edge);
}

/* Portfolio Modal */
.body-modal-open { overflow: hidden; }

.portfolio-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(21, 26, 24, 0.44);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--smooth) var(--ease);
}

.portfolio-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.portfolio-modal.active .portfolio-modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.portfolio-modal-content {
    max-width: 960px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--radius-lg);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    transform: scale(0.96) translateY(12px);
    opacity: 0;
    transition: transform 400ms var(--ease), opacity 400ms var(--ease);
}

.portfolio-modal-gallery {
    overflow: hidden;
    border-radius: var(--radius-lg) 0 0 0;
    grid-row: 1 / 2;
}

.portfolio-modal-gallery img, .portfolio-modal-gallery .portfolio-placeholder {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
}

.portfolio-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    color: white;
    font-size: 1.2rem;
    display: grid;
    place-items: center;
    transition: all var(--fast) var(--ease);
    cursor: pointer;
    border: none;
}

.portfolio-modal-close:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}

.portfolio-modal-body {
    padding: 2rem 2rem 1.5rem;
    overflow-y: auto;
    grid-row: 1 / 2;
}

.portfolio-modal-body h3 { font-size: 1.6rem; margin-bottom: 0.5rem; }
.portfolio-modal-summary { color: var(--accent); font-weight: 500; font-size: 0.95rem; margin-bottom: 0.75rem; }
.portfolio-modal-body > p:not(.portfolio-modal-summary) { color: var(--text-muted); line-height: 1.7; margin-bottom: 1.25rem; font-size: 0.92rem; }

.portfolio-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.portfolio-tag-success { background: rgba(16, 185, 129, 0.1); color: var(--success); border-color: rgba(16, 185, 129, 0.2); }
.portfolio-tag-info { background: rgba(129, 140, 248, 0.1); color: var(--accent-secondary); border-color: rgba(129, 140, 248, 0.2); }

.portfolio-modal-section { margin-bottom: 1.25rem; }
.portfolio-modal-section h4 { font-size: 0.95rem; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; color: var(--text-main); }
.portfolio-modal-section h4 i { color: var(--accent); font-size: 1.1rem; }

.portfolio-modal-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.portfolio-modal-list li {
    font-size: 0.88rem;
    color: var(--text-muted);
    padding-left: 1.2rem;
    position: relative;
    line-height: 1.5;
}

.portfolio-modal-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}

.portfolio-modal-nav {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
    border-top: 1px solid var(--border-subtle);
}

.portfolio-modal-nav-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    transition: all var(--fast) var(--ease);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.portfolio-modal-nav-btn:hover { color: var(--accent); background: var(--accent-soft); }



/* ==========================================================================
   Why Me Section
   ========================================================================== */
.why-me-section {
    padding: 6rem 0;
}

.large-panel {
    padding: 3.5rem;
    border-radius: var(--radius-lg);
}

.why-content {
    text-align: left;
}

.features-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.feature-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.feature-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.feature-text h4 {
    font-size: 1rem;
    font-weight: 640;
    margin-bottom: 0.25rem;
}

.feature-text p {
    font-size: 0.88rem;
    color: var(--text-muted);
}

/* ==========================================================================
   Vouches Section
   ========================================================================== */
.vouches-section {
    padding: 6rem 0;
}

.vouch-dashboard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.vouch-stats {
    display: flex;
    gap: 2rem;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-box .stat-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--accent);
}

.stat-stars {
    color: var(--warning);
    font-size: 1.1rem;
}

.stat-box .stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.vouch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
}

.vouch-card {
    padding: 1.5rem;
    transition: all var(--smooth) var(--ease);
}

.vouch-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.vouch-card-enter {
    /* `backwards`, not `both`: with `both` the animation's final keyframe keeps
       applying after it ends, and an animated value outranks the `:hover`
       declaration in the cascade — so the card could never lift again. The
       keyframe's end state is identical to the base state, so nothing moves. */
    animation: surface-enter 0.4s var(--ease) backwards;
}

.vouch-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.vouch-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.vouch-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 700;
}

.vouch-username {
    font-weight: 620;
    font-size: 0.92rem;
}

.verified-icon {
    color: var(--accent);
    font-size: 0.85rem;
    margin-left: 0.25rem;
}

.vouch-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.vouch-service-tag-wrapper {
    margin-bottom: 0.5rem;
}

.vouch-service-tag {
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
}

.vouch-rating {
    display: flex;
    gap: 0.2rem;
    color: var(--warning);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.vouch-feedback {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: var(--text-muted);
}
.empty-state i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* ==========================================================================
   Perks/Pricing Section
   ========================================================================== */
.perks-section {
    padding: 6rem 0;
}

.perks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.perk-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all var(--smooth) var(--ease);
    position: relative;
}

.perk-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.most-popular {
    border: 2px solid var(--accent);
    box-shadow: var(--shadow-glow);
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: white;
    padding: 0.3rem 1rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.05em;
}

.perk-icon {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 0.25rem;
}

.perk-card h3 {
    font-size: 1.2rem;
    font-weight: 680;
}

.perk-price {
    font-size: 1.5rem;
    font-weight: 780;
    color: var(--accent);
    letter-spacing: -0.02em;
}

.perk-features {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0 1.5rem;
    flex-grow: 1;
}

.perk-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.perk-features li i {
    color: var(--accent);
    flex-shrink: 0;
    font-size: 0.9rem;
    margin-top: 0.15rem;
}

.perks-footer {
    padding: 1.15rem 1.5rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.how-to-buy-section {
    margin-top: 4rem;
}

.steps-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 180px;
    gap: 0.5rem;
}

.step-icon {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.2rem;
}

.step-num {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: 0.6rem;
    display: grid;
    place-items: center;
    font-weight: 700;
}

.step-item h4 {
    font-size: 0.95rem;
    font-weight: 640;
}

.step-item p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.step-arrow {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 1rem;
    padding-top: 1rem;
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */
.faq-section {
    padding: 6rem 0;
}

.faq-accordion {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.faq-item {
    overflow: hidden;
    border-radius: var(--radius-sm);
    transition: all var(--smooth) var(--ease);
}

.faq-item.active {
    border-color: var(--accent-edge);
    background: linear-gradient(180deg, #FFFFFF, rgba(14, 159, 110, 0.035));
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.15rem 1.35rem;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    text-align: left;
    gap: 1rem;
}

.faq-question i {
    font-size: 1rem;
    color: var(--text-muted);
    transition: transform var(--smooth) var(--ease);
    flex-shrink: 0;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
    color: var(--accent);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 400ms var(--ease), opacity 300ms var(--ease);
    opacity: 0;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    opacity: 1;
}

.faq-answer p {
    padding: 0 1.35rem 1.25rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ==========================================================================
   Contact Section & Forms
   ========================================================================== */
.contact-section {
    padding: 6rem 0;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.contact-info {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border-right: 1px solid var(--border-subtle);
}

.contact-info h3 {
    font-size: 1.3rem;
    font-weight: 680;
}

.info-blocks {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-block {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.info-block i {
    font-size: 1.3rem;
    color: var(--accent);
}

.info-block .label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
}

.info-block .value {
    font-size: 0.95rem;
    font-weight: 550;
}

.helper-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: auto;
}

.glass-form {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

label {
    font-size: 0.85rem;
    font-weight: 580;
    color: var(--text-main);
}

input, select, textarea {
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-soft);
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--text-main);
    transition: all var(--fast) var(--ease);
    outline: none;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

.form-status {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-top: 0.5rem;
}

.status-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.status-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.glass-footer {
    margin-top: 4rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-soft);
}

.footer-container {
    padding: 2.5rem 1.5rem 1.5rem;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.social-links {
    display: flex;
    gap: 0.5rem;
}

.social-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: all var(--fast) var(--ease);
}

.social-btn:hover {
    color: var(--accent);
    background: var(--surface-hover);
}

.tooltip-container {
    position: relative;
}

.tooltip {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    background: var(--text-main);
    color: white;
    font-size: 0.72rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fast);
}

.tooltip-container:hover .tooltip {
    opacity: 1;
}

.footer-divider {
    height: 1px;
    background: var(--border-subtle);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.25rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.trust-text {
    font-weight: 500;
}

/* ==========================================================================
   Modals
   ========================================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(21, 26, 24, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--smooth) var(--ease);
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-container {
    max-width: 500px;
    width: 100%;
    border-radius: var(--radius-lg);
    padding: 2rem;
    transform: scale(0.95) translateY(10px);
    transition: transform var(--smooth) var(--ease);
}

.modal-overlay.active .modal-container {
    transform: scale(1) translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: 1.1rem;
    transition: all var(--fast) var(--ease);
}

.modal-close-btn:hover {
    background: var(--surface-hover);
    color: var(--text-main);
    transform: rotate(8deg);
}

.modal-header {
    margin-bottom: 1.5rem;
}

.modal-header h3 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.modal-header p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 0.5rem;
}

.login-panel {
    max-width: 420px;
}

/* Star Rating */
.star-rating-input {
    display: flex;
    gap: 0.35rem;
    font-size: 1.4rem;
    color: var(--border-subtle);
    cursor: pointer;
}

.star-btn {
    transition: color var(--fast), transform var(--fast);
}

.star-btn.active, .star-btn.hover {
    color: var(--warning);
    transform: scale(1.15);
}

/* ==========================================================================
   Dashboard
   ========================================================================== */
.dashboard-wrapper {
    display: flex;
    gap: 1.5rem;
    padding-top: 6rem;
    padding-bottom: 2rem;
}

.dashboard-sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 6rem;
    align-self: flex-start;
    height: fit-content;
    padding: 1.5rem;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 1rem;
}

.sidebar-user img, .avatar-glow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.sidebar-user-info h4 {
    font-size: 0.95rem;
    font-weight: 620;
}

.user-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    text-align: left;
    transition: all var(--fast) var(--ease);
    width: 100%;
}

.sidebar-link:hover {
    background: var(--surface-soft);
    color: var(--text-main);
}

.sidebar-link.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.sidebar-link i {
    font-size: 1.1rem;
}

.dashboard-main {
    flex: 1;
    padding: 1.5rem 2rem;
    min-height: 500px;
}

.dashboard-section {
    display: none;
}

.dashboard-section.active {
    display: block;
    animation: surface-enter 0.3s var(--ease);
}

.dashboard-section > .section-title {
    font-size: 1.35rem;
}

.orders-grid, .orders-list, .invoices-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-card, .invoice-card {
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-sm);
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.65rem;
}

.order-id {
    font-size: 0.78rem;
    font-family: monospace;
    color: var(--text-muted);
}

.order-status, .status-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
}

.status-pending { background: rgba(138, 90, 0, 0.10); color: var(--warning); }
.status-progress { background: var(--accent-soft); color: var(--accent-ink); }
.status-testing { background: rgba(14, 116, 144, 0.10); color: #0E7490; }
.status-completed { background: rgba(11, 122, 84, 0.10); color: var(--success); }
.status-badge { background: var(--accent-soft); color: var(--accent-ink); }

.order-progress-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--border-subtle);
    overflow: hidden;
    margin-top: 0.5rem;
}

.progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
    transition: width 0.5s var(--ease);
}

.invoice-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.invoice-info h4 {
    font-size: 1rem;
    font-weight: 620;
}

/* Tickets */
.tickets-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1rem;
}

.tickets-sidebar {
    padding: 1rem;
    max-height: 500px;
    overflow-y: auto;
}

.tickets-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ticket-item {
    padding: 0.85rem;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all var(--fast) var(--ease);
}

.ticket-item:hover {
    background: var(--surface-hover);
    border-color: var(--border-subtle);
}

.ticket-chat {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    max-height: 350px;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-msg {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    max-width: 85%;
}

.msg-user {
    background: var(--accent-soft);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.msg-admin {
    background: var(--surface-strong);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.chat-input-area {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}

.chat-input-area input {
    flex: 1;
}

/* Payment Modal */
.payment-modal-container {
    max-width: 800px;
    padding: 0;
}

.payment-modal-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.payment-sidebar {
    border-right: 1px solid var(--border-subtle);
}

.payment-content {
    padding: 2rem;
}

.payment-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
}

.payment-tab {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all var(--fast) var(--ease);
    width: 100%;
}

.payment-tab:hover {
    background: var(--surface-soft);
}

.payment-tab.active {
    background: var(--accent-soft);
    border-color: var(--accent-edge);
}

.tab-radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border-subtle);
    transition: all var(--fast) var(--ease);
}

.payment-tab.active .tab-radio {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 3px white;
}

.tab-info {
    display: flex;
    flex-direction: column;
}

.tab-info strong { font-size: 0.9rem; }
.tab-info span { font-size: 0.78rem; color: var(--text-muted); }

.payment-view {
    display: none;
    padding: 2rem;
}

.payment-view.active {
    display: block;
}

.qr-container {
    text-align: center;
}

/* ==========================================================================
   Admin Pages
   ========================================================================== */
.admin-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    border-radius: 0;
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-wrapper {
    display: flex;
    gap: 1.5rem;
    padding: 5rem 1.5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.admin-sidebar {
    width: 240px;
    flex-shrink: 0;
    padding: 1rem;
    position: sticky;
    top: 5rem;
    align-self: flex-start;
    border-radius: var(--radius-md);
}

.admin-main {
    flex: 1;
}

.admin-menu-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: all var(--fast) var(--ease);
    width: 100%;
}

.admin-menu-item:hover {
    background: var(--surface-soft);
    color: var(--text-main);
}

.admin-menu-item.active {
    background: var(--accent-soft);
    color: var(--accent);
}

.admin-section {
    display: none;
}

.admin-section.active {
    display: block;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    padding: 1.25rem;
    text-align: center;
    border-radius: var(--radius-sm);
}

.stat-card .stat-value {
    font-size: 1.8rem;
    font-weight: 780;
    color: var(--accent);
    display: block;
}

.stat-card .stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.admin-table-container {
    overflow-x: auto;
    border-radius: var(--radius-sm);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.admin-table th {
    padding: 0.85rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-subtle);
}

.admin-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.admin-table tr:hover td {
    background: var(--surface-soft);
}

/* ==========================================================================
   Toast
   ========================================================================== */
.toast-container {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.toast {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 550;
    animation: toast-enter 0.4s var(--ease);
    white-space: nowrap;
}

@keyframes toast-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Captcha & Legacy Hides */
.captcha-container { margin: 0.5rem 0; }

/* Bot trap (honeypot) — moved off-screen rather than `display:none`/`visibility:hidden`,
   because bots that inspect computed styles skip fields hidden that way. Being positioned
   out of the viewport means it can never affect the layout, and off to the left it cannot
   create a scrollbar either. */
.form-trap {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
}
.login-captcha { display: flex; justify-content: center; }
.input-glow { display: none !important; }

/* ==========================================================================
   Animations
   ========================================================================== */


@keyframes surface-enter {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.85); }
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 992px) {
    .contact-container { grid-template-columns: 1fr; }
    .contact-info { border-right: none; border-bottom: 1px solid var(--border-subtle); }
    .dashboard-wrapper { flex-direction: column; }
    .dashboard-sidebar { width: 100%; position: static; }
    .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
    .perks-grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-grid { grid-template-columns: 1fr; }
    .features-list { grid-template-columns: 1fr; }
    .payment-modal-layout { grid-template-columns: 1fr; }
    .portfolio-modal-content { grid-template-columns: 1fr; max-width: 640px; }
    .portfolio-modal-gallery { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 300px; }
    .portfolio-modal-gallery img { min-height: 200px; }
}

@media (max-width: 900px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: grid; }
}

@media (max-width: 768px) {
    .container { padding: 0 1.15rem; }
    .hero-title { font-size: clamp(2.8rem, 8vw, 4.2rem); }
    .hero-stats { flex-wrap: wrap; padding: 1rem; }
    .hero-stats::before { width: 80%; }
    .stat-item { padding: 0.5rem 1rem; }
    .stat-divider:nth-child(3) { display: none; }
    .hero-buttons .btn { padding: 0.75rem 1.5rem; font-size: 0.95rem; }
    .hero-section .scroll-indicator { bottom: 1rem; }
    .hero-section::before { width: 300px; height: 300px; }
    .hero-section::after { width: 250px; height: 250px; }
    .form-row { grid-template-columns: 1fr; }
    .footer-top { flex-direction: column; gap: 1rem; text-align: center; }
    .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
    .tickets-layout { grid-template-columns: 1fr; }
    .portfolio-modal { padding: 1rem; }
    .portfolio-modal-body { padding: 1.5rem; }
    .portfolio-modal-nav { padding: 0.75rem 1.5rem; }
}



@media (max-width: 480px) {
    .hero-buttons { flex-direction: column; width: 100%; }
    .hero-buttons .btn { width: 100%; justify-content: center; }
    .services-grid { grid-template-columns: 1fr; }
    .perks-grid { grid-template-columns: 1fr; }
    .hero-stats .stat-item { padding: 0.4rem 0.75rem; }
    .step-arrow { display: none; }
    .steps-container { flex-direction: column; align-items: center; }
    .portfolio-modal-body { padding: 1.25rem; }
    .portfolio-modal-body h3 { font-size: 1.3rem; }
    .portfolio-modal-nav-btn { padding: 0.6rem 1.2rem; font-size: 0.9rem; }
}

/* ==========================================================================
   Godzly Designer — Premium App Shell
   ========================================================================== */

/* ── Wrapper & Layout ──────────────────────────────────────────────────── */
.designer-wrapper {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.designer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    z-index: 10;
}

.designer-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.designer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 650;
    font-size: 1.05rem;
    color: var(--text-main);
}

.designer-brand i {
    font-size: 1.25rem;
    color: var(--accent);
}

.designer-header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.designer-breadcrumb {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    padding: 0.35rem 0.85rem;
    background: var(--surface-soft);
    border-radius: 100px;
    border: 1px solid var(--border-subtle);
}

.designer-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Body (3-Column Layout) ────────────────────────────────────────────── */
.designer-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 0;
}

/* ── Left Sidebar ──────────────────────────────────────────────────────── */
.designer-sidebar {
    width: 280px;
    flex-shrink: 0;
    overflow-y: auto;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--border-subtle);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.designer-sidebar-section {
    padding: 0.5rem 0;
}

.designer-sidebar-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.designer-sidebar-title i {
    font-size: 1rem;
    color: var(--accent);
}

/* ── Dividers ──────────────────────────────────────────────────────────── */
.designer-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 0.25rem 0;
}

/* ── Empty States ──────────────────────────────────────────────────────── */
.designer-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    text-align: center;
    gap: 0.5rem;
}

.designer-empty-state i {
    font-size: 1.75rem;
    color: var(--border-subtle);
    opacity: 0.6;
}

.designer-empty-state p {
    font-size: 0.82rem;
    color: var(--text-muted);
    opacity: 0.7;
    margin: 0;
}

/* ── Center Preview ────────────────────────────────────────────────────── */
.designer-preview {
    flex: 1;
    overflow-y: auto;
    border-radius: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        180deg,
        var(--surface-soft) 0%,
        rgba(255, 255, 255, 0.25) 100%
    );
    position: relative;
}

.designer-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: 2rem;
    max-width: 400px;
}

.designer-preview-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    margin-bottom: 0.5rem;
}

.designer-preview-icon i {
    font-size: 2.25rem;
    color: var(--accent);
}

.designer-preview-empty h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.designer-preview-empty p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.designer-preview-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 500;
    margin-top: 0.5rem;
    opacity: 0.8;
}

.designer-preview-hint i {
    font-size: 0.9rem;
    animation: designer-hint-bounce 1.5s ease-in-out infinite;
}

/* ── Blueprint Generation Engine (SD-3) ───────────────────────────────── */
.designer-generate-btn {
    margin-top: 0.75rem;
}

.designer-generation-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(100%, 540px);
    margin: auto;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(0.98);
    transition: opacity var(--smooth) var(--ease), transform var(--smooth) var(--ease);
}

.designer-preview.is-generating .designer-preview-empty {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px) scale(0.98);
    transition: opacity var(--smooth) var(--ease), transform var(--smooth) var(--ease);
}

.designer-preview.is-generating .designer-generation-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* ── Generated Discord Preview (SD-4) ─────────────────────────────────── */
.designer-discord-preview {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    overflow-y: auto;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(0.98);
    transition: opacity var(--smooth) var(--ease), transform var(--smooth) var(--ease);
}

.designer-preview.has-blueprint-preview .designer-preview-empty,
.designer-preview.has-blueprint-preview .designer-generation-panel {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px) scale(0.98);
}

.designer-preview.has-blueprint-preview .designer-discord-preview {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.designer-discord-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.designer-discord-server-icon {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
}

.designer-discord-server-icon i {
    font-size: 1.35rem;
}

.designer-discord-header h3,
.designer-discord-category h4,
.designer-discord-bots h4 {
    margin: 0;
}

.designer-discord-header h3 {
    font-size: 1rem;
}

.designer-discord-header p {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.designer-discord-structure {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem;
}

.designer-discord-category,
.designer-discord-bots {
    padding: 0.9rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}

.designer-discord-category {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--smooth) var(--ease), transform var(--smooth) var(--ease);
    transition-delay: var(--category-delay);
}

.designer-discord-category h4,
.designer-discord-bots h4 {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
}

.designer-discord-channels,
.designer-discord-bots ul {
    display: grid;
    gap: 0.35rem;
    margin: 0.7rem 0 0;
    padding: 0;
    list-style: none;
}

.designer-discord-channels li,
.designer-discord-bots li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    color: var(--text-main);
    font-size: 0.82rem;
}

.designer-discord-channels li {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
    transition-delay: calc(var(--channels-start) + var(--category-delay) + var(--channel-delay));
}

.designer-discord-channels i {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.designer-discord-channels span,
.designer-discord-bots span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.designer-discord-bots {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--smooth) var(--ease), transform var(--smooth) var(--ease);
    transition-delay: var(--bot-delay);
}

.designer-discord-bots li {
    color: var(--text-muted);
}

.designer-discord-bots li i {
    color: var(--accent);
    font-size: 1rem;
}

.designer-discord-preview.is-rendered .designer-discord-category,
.designer-discord-preview.is-rendered .designer-discord-category li,
.designer-discord-preview.is-rendered .designer-discord-bots {
    opacity: 1;
    transform: translate(0);
}

/* ── Blueprint Summary & Order Integration (SD-5) ─────────────────────── */
.designer-blueprint-summary {
    display: grid;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 1.15rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-strong);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--smooth) var(--ease), transform var(--smooth) var(--ease);
    transition-delay: var(--summary-delay);
}

.designer-discord-preview.is-rendered .designer-blueprint-summary.is-ready {
    opacity: 1;
    transform: translateY(0);
}

.designer-blueprint-summary-heading > span {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.designer-blueprint-summary-heading h3 {
    margin: 0;
    font-size: 1.15rem;
}

.designer-blueprint-summary-heading p,
.designer-blueprint-empty,
.designer-blueprint-notes {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.designer-blueprint-live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.designer-blueprint-sections {
    display: grid;
    gap: 0.5rem;
}

.designer-blueprint-section {
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--surface-soft);
}

.designer-blueprint-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 0.85rem;
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 650;
    text-align: left;
}

.designer-blueprint-section-toggle i {
    color: var(--text-muted);
    transition: transform var(--fast) var(--ease);
}

.designer-blueprint-section.is-collapsed .designer-blueprint-section-toggle i {
    transform: rotate(-90deg);
}

.designer-blueprint-section-content {
    padding: 0 0.85rem 0.85rem;
}

.designer-blueprint-section-content[hidden] {
    display: none;
}

.designer-blueprint-overview {
    display: grid;
    grid-template-columns: minmax(110px, 0.6fr) 1fr;
    gap: 0.45rem 0.75rem;
    margin: 0;
    font-size: 0.78rem;
}

.designer-blueprint-overview dt {
    color: var(--text-muted);
}

.designer-blueprint-overview dd {
    min-width: 0;
    margin: 0;
    color: var(--text-main);
    font-weight: 550;
}

.designer-blueprint-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.designer-blueprint-chip,
.designer-blueprint-category-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    font-size: 0.75rem;
}

.designer-blueprint-chip {
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: var(--surface);
}

.designer-blueprint-chip i {
    color: var(--accent);
    font-size: 0.85rem;
}

.designer-blueprint-chip.is-highlighted,
.designer-blueprint-category-link:hover,
.designer-blueprint-category-link:focus-visible {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.designer-blueprint-structure {
    display: grid;
    gap: 0.65rem;
}

.designer-blueprint-structure > div {
    display: grid;
    gap: 0.2rem;
}

.designer-blueprint-category-link {
    justify-self: start;
    padding: 0;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.designer-blueprint-structure p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.designer-blueprint-bot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.designer-blueprint-bot-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-main);
    font-size: 0.78rem;
}

.designer-blueprint-bot-list i {
    color: var(--accent);
}

.designer-blueprint-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.designer-blueprint-actions .designer-generate-btn {
    margin-top: 0;
}

.designer-discord-category.is-highlighted {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.designer-blueprint-section-toggle:focus-visible,
.designer-blueprint-chip:focus-visible,
.designer-blueprint-category-link:focus-visible {
    outline: 3px solid var(--accent-secondary);
    outline-offset: 2px;
}

.designer-generation-heading {
    text-align: center;
}

.designer-generation-kicker {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.designer-generation-heading h3 {
    margin: 0;
    font-size: 1.35rem;
}

.designer-generation-heading p {
    margin: 0.65rem 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.designer-generation-progress {
    height: 4px;
    margin: 1.5rem 0 1.25rem;
    overflow: hidden;
    background: var(--border-subtle);
    border-radius: 999px;
}

.designer-generation-progress-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--accent);
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 260ms var(--ease);
}

.designer-generation-stages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.designer-generation-stage {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    opacity: 0.52;
    transform: translateY(4px);
    transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.designer-generation-stage-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--text-muted);
}

.designer-generation-stage-marker i {
    font-size: 1rem;
}

.designer-generation-stage.is-active,
.designer-generation-stage.is-complete {
    opacity: 1;
    transform: translateY(0);
}

.designer-generation-stage.is-active {
    color: var(--text-main);
}

.designer-generation-stage.is-active .designer-generation-stage-marker {
    color: var(--accent);
}

.designer-generation-stage.is-complete {
    color: var(--text-main);
}

.designer-generation-stage.is-complete .designer-generation-stage-marker {
    color: var(--success);
}

.designer-generate-btn:focus-visible {
    outline: 3px solid var(--accent-secondary);
    outline-offset: 3px;
}

@media (max-width: 480px) {
    .designer-generation-panel {
        justify-content: flex-start;
        overflow-y: auto;
        padding: 1.5rem 1rem;
    }

    .designer-generation-stages {
        grid-template-columns: 1fr;
    }

    .designer-discord-preview {
        padding: 1rem;
    }

    .designer-discord-structure {
        grid-template-columns: 1fr;
    }

    .designer-blueprint-overview {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .designer-blueprint-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .designer-blueprint-actions .btn {
        justify-content: center;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .designer-generation-panel,
    .designer-preview.is-generating .designer-preview-empty,
    .designer-generation-progress-fill,
    .designer-generation-stage,
    .designer-discord-preview,
    .designer-discord-category,
    .designer-discord-channels li,
    .designer-discord-bots,
    .designer-blueprint-summary,
    .designer-blueprint-section-toggle i {
        transition: none;
    }
}

@keyframes designer-hint-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-4px); }
}

/* ── Right Summary Panel ───────────────────────────────────────────────── */
.designer-summary {
    width: 300px;
    flex-shrink: 0;
    overflow-y: auto;
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--border-subtle);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.designer-summary-section {
    padding: 0.5rem 0;
}

.designer-summary-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.designer-summary-title i {
    font-size: 1rem;
    color: var(--accent);
}

/* ── Statistics Grid ───────────────────────────────────────────────────── */
.designer-summary-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.designer-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.85rem 0.5rem;
    background: var(--surface-soft);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    gap: 0.25rem;
    transition: all var(--fast) var(--ease);
}

.designer-stat-item:hover {
    background: var(--surface);
    border-color: var(--border);
}

.designer-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 550;
}

.designer-stat-value {
    font-size: 1.35rem;
    font-weight: 750;
    color: var(--text-main);
}

/* ── Export Section ────────────────────────────────────────────────────── */
.designer-summary-export {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Sidebar Hint Text ─────────────────────────────────────────────────── */
.designer-sidebar-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: -0.25rem 0 0.75rem 0;
    opacity: 0.7;
}

/* ── Server Type Grid ──────────────────────────────────────────────────── */
.designer-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.designer-type-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-subtle);
    background: var(--surface-soft);
    cursor: pointer;
    transition: all var(--smooth) var(--ease);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    animation: designer-card-in 400ms var(--ease) forwards;
    animation-delay: var(--card-delay, 0ms);
}

.designer-type-card:hover {
    background: var(--surface);
    border-color: var(--border);
    transform: translateY(-1px);
}

.designer-type-card:active {
    transform: scale(0.97);
}

.designer-type-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.designer-type-card.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm);
}

.designer-type-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    flex-shrink: 0;
    transition: all var(--fast) var(--ease);
}

.designer-type-card.selected .designer-type-icon {
    background: var(--accent);
    color: white;
}

.designer-type-icon i {
    font-size: 1.1rem;
    color: var(--accent);
    transition: color var(--fast) var(--ease);
}

.designer-type-card.selected .designer-type-icon i {
    color: white;
}

.designer-type-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.designer-type-label {
    font-size: 0.82rem;
    font-weight: 620;
    color: var(--text-main);
    line-height: 1.2;
}

.designer-type-desc {
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Card Checkmark ────────────────────────────────────────────────────── */
.designer-card-check {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0);
    transition: all 250ms var(--ease);
}

.designer-card-check i {
    font-size: 0.65rem;
    color: white;
    font-weight: 700;
}

.selected .designer-card-check {
    opacity: 1;
    transform: scale(1);
    animation: designer-check-pop 350ms var(--ease) forwards;
}

/* ── Feature Grid ──────────────────────────────────────────────────────── */
.designer-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

.designer-feature-card {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.65rem;
    border-radius: 10px;
    border: 1.5px solid var(--border-subtle);
    background: var(--surface-soft);
    cursor: pointer;
    transition: all var(--smooth) var(--ease);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    animation: designer-card-in 400ms var(--ease) forwards;
    animation-delay: var(--card-delay, 0ms);
}

.designer-feature-card:hover {
    background: var(--surface);
    border-color: var(--border);
    transform: translateY(-1px);
}

.designer-feature-card:active {
    transform: scale(0.97);
}

.designer-feature-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.designer-feature-card.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm);
}

.designer-feature-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    flex-shrink: 0;
    transition: all var(--fast) var(--ease);
}

.designer-feature-card.selected .designer-feature-icon {
    background: var(--accent);
}

.designer-feature-icon i {
    font-size: 0.95rem;
    color: var(--accent);
    transition: color var(--fast) var(--ease);
}

.designer-feature-card.selected .designer-feature-icon i {
    color: white;
}

.designer-feature-label {
    font-size: 0.78rem;
    font-weight: 560;
    color: var(--text-main);
    line-height: 1.2;
}

/* ── Config Tags (Summary) ─────────────────────────────────────────────── */
.designer-config-selected {
    padding: 0.25rem 0;
}

.designer-config-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.designer-config-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 550;
    background: var(--surface-soft);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    transition: all var(--fast) var(--ease);
}

.designer-config-tag i {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.designer-config-tag.accent {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.designer-config-tag.accent i {
    color: var(--accent);
}

/* ── Card Animations ───────────────────────────────────────────────────── */
@keyframes designer-card-in {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes designer-check-pop {
    0% {
        transform: scale(0);
    }
    60% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* ── Entry Animation ──────────────────────────────────────────────────── */

.designer-wrapper:not(.hidden) {
    animation: designer-enter 400ms var(--ease) forwards;
}

@keyframes designer-enter {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Designer Responsive ──────────────────────────────────────────────── */
@media (max-width: 992px) {
    .designer-body {
        flex-direction: column;
    }

    .designer-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        gap: 0;
        padding: 1rem;
        flex-shrink: 0;
        max-height: 45vh;
    }

    .designer-sidebar-section {
        padding: 0.5rem 0;
    }

    .designer-divider {
        height: 1px;
        width: 100%;
        margin: 0.25rem 0;
    }

    .designer-summary {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-subtle);
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0;
        padding: 0.75rem 1rem;
        flex-shrink: 0;
    }

    .designer-summary-section {
        min-width: 200px;
        flex-shrink: 0;
        padding: 0.25rem 0.5rem;
    }

    .designer-preview {
        flex: 1;
        min-height: 200px;
    }

    .designer-header-center {
        display: none;
    }
}

@media (max-width: 768px) {
    .designer-header {
        padding: 0.65rem 1rem;
    }

    .designer-brand span {
        display: none;
    }

    .designer-header-right .btn-sm span,
    .designer-header-right .btn-sm:not(:last-child) {
        display: none;
    }

    .designer-sidebar {
        max-height: 50vh;
    }

    .designer-type-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .designer-feature-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem;
    }

    .designer-summary-section {
        min-width: 160px;
    }

    .designer-preview-icon {
        width: 64px;
        height: 64px;
    }

    .designer-preview-icon i {
        font-size: 1.75rem;
    }

    .designer-preview-empty h3 {
        font-size: 1.15rem;
    }
}

@media (max-width: 480px) {
    .designer-header {
        padding: 0.5rem 0.75rem;
    }

    .designer-sidebar {
        padding: 0.5rem 0.75rem;
        max-height: 55vh;
    }

    .designer-summary {
        padding: 0.5rem 0.75rem;
    }

    .designer-type-grid {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .designer-feature-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.3rem;
    }

    .designer-sidebar-section {
        padding: 0.35rem 0;
    }

    .designer-summary-section {
        min-width: 140px;
    }

    .designer-preview-empty {
        padding: 1.5rem 1rem;
    }

    .designer-preview-hint {
        display: none;
    }
}

/* ── Interactive Blueprint Experience (SD-7) ─────────────────────────── */

/* Category Expansion */
.designer-discord-category h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.designer-category-caret {
    font-size: 0.75rem;
    transition: transform var(--fast) var(--ease);
    opacity: 0;
}

.designer-discord-preview.is-interactive .designer-category-caret {
    opacity: 0.5;
}

.designer-discord-category.is-expandable h4 {
    cursor: pointer;
    border-radius: 6px;
    padding: 0.25rem 0.35rem;
    margin: -0.25rem -0.35rem 0;
    transition: background var(--fast) var(--ease);
}

.designer-discord-category.is-expandable h4:hover {
    background: var(--surface);
}

.designer-discord-category.is-expandable h4:hover .designer-category-caret {
    opacity: 1;
}

.designer-discord-category.is-expandable h4:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.designer-discord-category.is-collapsed .designer-category-caret {
    transform: rotate(-90deg);
}

.designer-discord-category.is-expandable .designer-discord-channels {
    transition: max-height var(--smooth) var(--ease), opacity var(--fast) var(--ease);
    overflow: hidden;
}

.designer-discord-category.is-collapsed .designer-discord-channels {
    opacity: 0;
    margin-top: 0 !important;
}

/* Channel & Bot Interactive States */
.designer-discord-preview.is-interactive .designer-discord-channels li,
.designer-discord-preview.is-interactive .designer-discord-bots li {
    cursor: pointer;
    border-radius: 6px;
    padding: 0.25rem 0.35rem;
    margin: 0 -0.35rem;
    transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
    transition-delay: 0ms;
}

.designer-discord-preview.is-interactive .designer-discord-channels li:hover {
    background: var(--surface);
    transform: translateX(3px);
}

.designer-discord-preview.is-interactive .designer-discord-bots li:hover {
    background: var(--surface);
}

.designer-discord-preview.is-interactive .designer-discord-channels li:focus-visible,
.designer-discord-preview.is-interactive .designer-discord-bots li:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.designer-discord-preview.is-interactive .designer-discord-channels li[aria-expanded="true"],
.designer-discord-preview.is-interactive .designer-discord-bots li[aria-expanded="true"] {
    background: var(--accent-soft);
}

/* Inspector Popover */
.designer-inspector-popover {
    position: fixed;
    z-index: 200;
    width: 280px;
    max-width: calc(100vw - 32px);
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.designer-channel-popover,
.designer-bot-popover {
    background: var(--surface-strong);
}

.designer-inspector-popover.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    will-change: opacity, transform;
}

.designer-inspector-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
}

.designer-inspector-header i:first-child {
    color: var(--accent);
    font-size: 1rem;
}

.designer-inspector-header h5 {
    flex: 1;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--text-main);
}

.designer-inspector-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
    border: none;
    background: none;
    padding: 0;
}

.designer-inspector-close:hover {
    background: var(--surface-soft);
    color: var(--text-main);
}

.designer-inspector-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.designer-inspector-body {
    padding: 0.65rem 0.85rem 0.85rem;
    display: grid;
    gap: 0.55rem;
}

.designer-inspector-row {
    display: grid;
    gap: 0.15rem;
}

.designer-inspector-row dt {
    font-size: 0.68rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.designer-inspector-row dd {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-main);
    line-height: 1.45;
}

/* SD-7 Sections (Roles, Expert Panel) */
.designer-sd7-section {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--smooth) var(--ease), transform var(--smooth) var(--ease);
}

.designer-role-recommendations,
.designer-expert-panel {
    scroll-margin-top: 1rem;
}

.designer-sd7-live {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.designer-discord-preview.is-interactive .designer-sd7-section {
    opacity: 1;
    transform: translateY(0);
}

.designer-sd7-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.designer-sd7-section-title i {
    color: var(--accent);
    font-size: 0.9rem;
}

/* Role Recommendations */
.designer-sd7-role-list {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.designer-sd7-role-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.designer-sd7-role-item:hover {
    border-color: var(--border);
    background: var(--surface-hover);
}

.designer-sd7-role-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.designer-sd7-role-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
}

.designer-sd7-role-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: auto;
    white-space: nowrap;
}

/* Permission Recommendations */
.designer-sd7-permission-block {
    margin-top: 0.5rem;
}

.designer-sd7-permission-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.35rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background var(--fast) var(--ease);
    border: none;
    background: none;
    font-family: inherit;
}

.designer-sd7-permission-toggle:hover {
    background: var(--surface);
}

.designer-sd7-permission-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.designer-sd7-permission-toggle i:first-child {
    font-size: 0.85rem;
    color: var(--accent);
}

.designer-sd7-permission-toggle i:last-child {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform var(--fast) var(--ease);
}

.designer-sd7-permission-toggle[aria-expanded="true"] i:last-child {
    transform: rotate(180deg);
}

.designer-sd7-permission-content {
    padding: 0.35rem 0.5rem 0.25rem;
}

.designer-sd7-permission-content[hidden] {
    display: none;
}

.designer-sd7-permission-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.75rem;
}

.designer-sd7-permission-row + .designer-sd7-permission-row {
    border-top: 1px solid var(--border-subtle);
}

.designer-sd7-permission-role {
    font-weight: 600;
    color: var(--text-main);
}

.designer-sd7-permission-access {
    color: var(--text-muted);
    font-size: 0.72rem;
}

/* Expert Recommendations */
.designer-sd7-expert-list {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.designer-sd7-expert-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    font-size: 0.8rem;
    color: var(--text-main);
    line-height: 1.45;
}

.designer-sd7-expert-item i {
    flex-shrink: 0;
    color: var(--accent);
    font-size: 0.95rem;
    margin-top: 0.1rem;
}

/* SD-7 Responsive */
@media (max-width: 992px) {
    .designer-inspector-popover {
        max-width: calc(100vw - 24px);
    }

    .designer-sd7-section {
        margin-top: 0.75rem;
    }
}

@media (max-width: 768px) {
    .designer-inspector-popover {
        width: min(280px, calc(100vw - 24px));
    }

    .designer-sd7-permission-access {
        max-width: 58%;
        text-align: right;
    }
}

@media (max-width: 480px) {
    .designer-inspector-popover {
        width: calc(100vw - 32px);
        left: 16px !important;
    }

    .designer-sd7-role-desc {
        display: none;
    }

    .designer-sd7-section {
        padding: 0.75rem;
    }
}

/* SD-7 Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .designer-inspector-popover,
    .designer-category-caret,
    .designer-sd7-section,
    .designer-discord-preview.is-interactive .designer-discord-channels li,
    .designer-discord-preview.is-interactive .designer-discord-bots li,
    .designer-discord-preview.is-interactive .designer-discord-category h4,
    .designer-sd7-permission-toggle i:last-child,
    .designer-sd7-role-item {
        transition: none;
    }

    .designer-discord-category .designer-discord-channels {
        transition: none;
    }

    .designer-inspector-popover.is-visible {
        transform: none;
    }

    .designer-sd7-section {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   V3 — WHITE GLASS & CLAY SYSTEM
   --------------------------------------------------------------------------
   This block replaces the V2 dark "studio" system (graphite foundation,
   indigo/royal atmosphere, obsidian glass). It keeps everything structural
   that V2 got right — the single reveal system, the transform ownership
   rules, the small-phone safety net, the hero layout — and rebuilds the
   surface, colour and depth language around a light page.

   Design rules held throughout:
     • Predominantly white. Colour is spent only on emerald emphasis.
     • One accent, the Godzly emerald, deepened so it reads on white.
     • Two surface families and no more: glass (translucent) and clay (raised).
     • The background is static CSS — linework, a faint wash, a soft top light.
       The site has no continuous animation at all now.
     • No canvas, no image asset, no third-party dependency.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
    /* Foundation — white, with two off-white neutrals for tonal variation */
    --bg: #FFFFFF;
    --bg-deep: #FFFFFF;
    --bg-alt: #F7F8F7;

    /* Neutral surfaces */
    --surface: #F7F8F7;
    --surface-strong: #FCFDFC;
    --surface-soft: rgba(252, 253, 252, 0.72);
    --surface-hover: #F1F3F1;

    /* Type */
    --text-main: #151A18;
    --text-light: #151A18;
    --text-muted: #68716D;

    /* Hairlines */
    --border: #E5E9E6;
    --border-subtle: rgba(21, 26, 24, 0.075);

    /* Brand — the same emerald hue the site always used, deepened for white.
       `--accent` fills a surface; `--accent-ink` is the weight used for text
       (5.4:1 on white) and for the primary CTA fill (white text, 5.4:1). */
    --accent: #0E9F6E;
    --accent-hover: #0A6C4A;
    --accent-ink: #0B7A54;
    --accent-soft: rgba(14, 159, 110, 0.10);
    --accent-edge: rgba(14, 159, 110, 0.30);
    --accent-secondary: #9AA6A0;

    /* System colours */
    --success: #0B7A54;
    --danger: #B3261E;
    --warning: #8A5A00;

    /* Editorial paper surfaces (portfolio + project detail) */
    --paper: #FFFFFF;
    --paper-2: #F7F8F7;
    --ink: #151A18;
    --ink-muted: #5C6662;
    --ink-line: rgba(21, 26, 24, 0.09);
    --ink-accent: #0B7A54;

    /* Geometry */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;

    /* Elevation — soft, neutral-tinted. Nothing black, nothing glowing. */
    --shadow-sm: 0 1px 2px rgba(21, 26, 24, 0.05), 0 2px 6px rgba(21, 26, 24, 0.04);
    --shadow-md: 0 6px 18px rgba(21, 26, 24, 0.07), 0 2px 6px rgba(21, 26, 24, 0.04);
    --shadow-lg: 0 20px 48px rgba(21, 26, 24, 0.10), 0 8px 20px rgba(21, 26, 24, 0.05);
    --shadow-glow: 0 10px 26px rgba(14, 159, 110, 0.16);

    /* ----------------------------------------------------------------------
       CLAY — the opaque, sculpted family.

       Nothing shows through clay, ever. Its depth is entirely modelled: a
       bright top rim, a shaded lower inner curve where the surface turns away
       from the light, a tight contact shadow and a wide ambient one. A
       three-stop shadow (contact + mid + ambient) is what makes it look
       moulded rather than merely drop-shadowed.

       That is the whole difference from glass, which is see-through and takes
       its depth from whatever is behind it. No embossed borders, no inflated
       shapes, and it is used on a handful of surfaces only.
       -------------------------------------------------------------------- */
    --clay-edge: rgba(21, 26, 24, 0.055);
    --clay-surface: linear-gradient(180deg, #FFFFFF 0%, #EFF4F1 100%);
    --clay-raised: inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 -5px 9px -3px rgba(21, 26, 24, 0.13);
    --clay-shadow: 0 1px 1px rgba(21, 26, 24, 0.05), 0 8px 16px -6px rgba(21, 26, 24, 0.13), 0 22px 40px -18px rgba(21, 26, 24, 0.20);
    /* The same three-stop model scaled down for chips and badges: the wide
       ambient term of --clay-shadow is far too big under a 40px icon. */
    --clay-shadow-sm: 0 1px 1px rgba(21, 26, 24, 0.05), 0 4px 9px -3px rgba(21, 26, 24, 0.15), 0 10px 20px -10px rgba(21, 26, 24, 0.18);
    --clay-raised-sm: inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 -3px 5px -2px rgba(21, 26, 24, 0.12);
    --clay-inset: inset 0 3px 6px -1px rgba(21, 26, 24, 0.10), inset 0 -1px 0 rgba(255, 255, 255, 0.9);
    --clay-accent-shadow: 0 1px 1px rgba(9, 92, 63, 0.14), 0 10px 20px -6px rgba(11, 122, 84, 0.34), inset 0 1.5px 0 rgba(255, 255, 255, 0.32), inset 0 -3px 6px -2px rgba(4, 60, 41, 0.38);

    /* ----------------------------------------------------------------------
       GLASS — the translucent family.

       Genuinely translucent now: 0.55 rather than the 0.72 that made these
       panels read as plain white boxes. It carries a real backdrop blur, so
       whatever is behind it — the linework and the soft architectural forms
       in section 2 — arrives as a soft, tinted depth rather than as flat
       paint. The light-catching rim is a white inset; the dark hairline is the
       fine outer edge.

       Blur is still not spent on every container: a surface nested inside
       another panel is already over opaque paint, and blurring that is
       invisible while still costing a backdrop read. The blurred list is
       exactly the surfaces that sit directly over the page.
       -------------------------------------------------------------------- */
    --glass: rgba(255, 255, 255, 0.55);
    --glass-strong: rgba(255, 255, 255, 0.74);
    --glass-soft: rgba(252, 254, 253, 0.40);
    --glass-edge: rgba(21, 26, 24, 0.10);
    --glass-edge-soft: rgba(21, 26, 24, 0.065);
    --glass-rim: rgba(255, 255, 255, 0.85);
    --glass-sheen: rgba(255, 255, 255, 0.95);
    --glass-blur-nav: 18px;
    --glass-blur-panel: 22px;
    --glass-sat: 150%;
    /* Opaque enough to stay readable where backdrop-filter is unavailable. */
    --glass-fallback: rgba(255, 255, 255, 0.97);

    /* Dialog scrim */
    --scrim: rgba(21, 26, 24, 0.34);

    /* Card tilt ceiling, in degrees. Set once; both the CSS and motion.js
       read the same number so the interaction can never drift from the spec. */
    --tilt-max: 3.4deg;

    /* One easing vocabulary for the whole site */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    /* No overshoot anywhere: these legacy names resolve to a clean curve so
       the components that still reference them cannot bounce. */
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-back: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-anime-slow-end: cubic-bezier(0.22, 1, 0.36, 1);
    --fast: 160ms;
    --smooth: 260ms;

    /* Rhythm */
    --section-y: 4.5rem;
    --gutter: 1.5rem;

    /* Legacy aliases (kept — referenced by JS-written inline styles) */
    --bg-dark: var(--bg);
    --bg-translucent: var(--surface);
    --glass-bg: var(--surface);
    --glass-border: var(--border-subtle);
    --glass-hover: var(--surface-hover);
    --neon-cyan: var(--accent-ink);
    --neon-purple: var(--accent-ink);
    --neon-white: var(--text-main);
    --transition-fast: var(--fast) var(--ease);
    --transition-smooth: var(--smooth) var(--ease);
    /* Legacy glass aliases used by the legal layer */
    --glass-sheen-soft: rgba(255, 255, 255, 0.65);
    --glass-edge-faint: rgba(21, 26, 24, 0.055);

    /* ----------------------------------------------------------------------
       ATMOSPHERE PALETTE
       Channels rather than hex, so each layer picks its own alpha. The alphas
       below are deliberately very low: the wash is meant to read as tonal
       variation on white, never as a coloured background.
       -------------------------------------------------------------------- */
    --atmo-foundation: #FFFFFF;
    --atmo-emerald: 14 159 110;
    --atmo-slate: 104 113 109;
    --atmo-ink: 21 26 24;
    --atmo-fade: 900ms;
}

/* ==========================================================================
   2. ATMOSPHERE
   --------------------------------------------------------------------------
   One coherent static background for the whole site: five stacked layers
   inside a single fixed container.

     1. .atmo-base      white foundation + two very faint anchor washes
     2. .atmo-mood      one cross-fading layer per section (moods below)
     3. .atmo-drift     a static tonal wash (it no longer animates)
     4. .atmo-grid      hairline linework, masked away before the edges
     5. .atmo-vignette  a soft top light + the faintest edge tone

   Why the container exists, and why `body` is transparent:

     a negative-z-index box paints *behind its parent's background box*. An
     earlier version put its layers on `body::before`/`::after` (z-index -1)
     while `body` itself painted an opaque background — so every one of those
     layers was hidden and only the flat `body` gradients were ever visible.
     The foundation lives on <html>, `body` is transparent, and the system is
     actually seen.
   ========================================================================== */
html {
    background-color: var(--atmo-foundation);
}

body {
    /* Deliberately transparent — see the note above. The foundation colour
       sits on <html>, which also paints the overscroll area. */
    background: transparent;
    color: var(--text-main);
}

.atmosphere {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;               /* the oversized layers never scroll a page */
    pointer-events: none;
    contain: layout paint style;
}

.atmosphere > * {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
}

/* ── Layer 1 — foundation ─────────────────────────────────────────────── */
.atmo-base {
    background:
        radial-gradient(120% 78% at 6% -16%, rgb(var(--atmo-emerald) / 0.055) 0%, rgb(var(--atmo-emerald) / 0) 62%),
        radial-gradient(100% 64% at 104% -4%, rgb(var(--atmo-slate) / 0.048) 0%, rgb(var(--atmo-slate) / 0) 60%),
        linear-gradient(180deg, #FFFFFF 0%, #FDFEFD 42%, #F7F8F7 100%);
}

/* ── Layer 2 — section moods ──────────────────────────────────────────────
   Only one mood is lit at a time, and every one of them is a pale, low-alpha
   tint rather than a colour: switching sections reads as the page catching a
   slightly different light, not as the background changing colour. */
.atmo-mood {
    opacity: 0;
    transition: opacity var(--atmo-fade) var(--ease);
}

html[data-mood="hero"]      .atmo-mood[data-mood="hero"],
html[data-mood="services"]  .atmo-mood[data-mood="services"],
html[data-mood="portfolio"] .atmo-mood[data-mood="portfolio"],
html[data-mood="why"]       .atmo-mood[data-mood="why"],
html[data-mood="vouches"]   .atmo-mood[data-mood="vouches"],
html[data-mood="perks"]     .atmo-mood[data-mood="perks"],
html[data-mood="faq"]       .atmo-mood[data-mood="faq"],
html[data-mood="contact"]   .atmo-mood[data-mood="contact"],
html[data-mood="neutral"]   .atmo-mood[data-mood="neutral"] {
    opacity: 1;
}

/* Hero — the strongest reading of the brand, and still only a tint. Also the
   authored default on <html>, so the page is correct before the observer's
   first callback and with JavaScript switched off. */
.atmo-mood[data-mood="hero"] {
    background:
        radial-gradient(74% 54% at 12% 4%, rgb(var(--atmo-emerald) / 0.075) 0%, rgb(var(--atmo-emerald) / 0) 64%),
        radial-gradient(60% 48% at 92% 22%, rgb(var(--atmo-slate) / 0.05) 0%, rgb(var(--atmo-slate) / 0) 66%);
}

/* Services — a cool neutral field with one emerald shoulder. */
.atmo-mood[data-mood="services"] {
    background:
        radial-gradient(70% 54% at 88% 6%, rgb(var(--atmo-slate) / 0.06) 0%, rgb(var(--atmo-slate) / 0) 64%),
        radial-gradient(46% 40% at 14% 52%, rgb(var(--atmo-emerald) / 0.05) 0%, rgb(var(--atmo-emerald) / 0) 70%);
}

/* Portfolio — flat and neutral: the work carries the attention. */
.atmo-mood[data-mood="portfolio"] {
    background:
        radial-gradient(88% 58% at 50% 0%, rgb(var(--atmo-slate) / 0.062) 0%, rgb(var(--atmo-slate) / 0) 60%);
}

/* Why Me — almost nothing, so nothing competes with the panel. */
.atmo-mood[data-mood="why"] {
    background:
        radial-gradient(84% 56% at 44% 6%, rgb(var(--atmo-slate) / 0.045) 0%, rgb(var(--atmo-slate) / 0) 64%);
}

/* Vouches — the quietest emerald lift on the page. */
.atmo-mood[data-mood="vouches"] {
    background:
        radial-gradient(66% 52% at 80% 14%, rgb(var(--atmo-emerald) / 0.05) 0%, rgb(var(--atmo-emerald) / 0) 66%);
}

/* Perks — emerald over neutral, the one place both meet at full strength. */
.atmo-mood[data-mood="perks"] {
    background:
        radial-gradient(72% 54% at 16% 10%, rgb(var(--atmo-emerald) / 0.065) 0%, rgb(var(--atmo-emerald) / 0) 66%),
        radial-gradient(56% 46% at 88% 74%, rgb(var(--atmo-slate) / 0.05) 0%, rgb(var(--atmo-slate) / 0) 68%);
}

/* FAQ — a plain neutral passage between Perks and Contact. */
.atmo-mood[data-mood="faq"] {
    background:
        radial-gradient(80% 54% at 46% 8%, rgb(var(--atmo-slate) / 0.05) 0%, rgb(var(--atmo-slate) / 0) 64%);
}

/* Contact — a green edge and the faintest neutral falloff. */
.atmo-mood[data-mood="contact"] {
    background:
        radial-gradient(68% 54% at 84% 16%, rgb(var(--atmo-emerald) / 0.06) 0%, rgb(var(--atmo-emerald) / 0) 68%),
        radial-gradient(54% 46% at 12% 80%, rgb(var(--atmo-slate) / 0.045) 0%, rgb(var(--atmo-slate) / 0) 70%);
}

/* Neutral — the fallback mood, used whenever no public section is on screen
   (the designer and the client dashboard), and by the legal pages. */
.atmo-mood[data-mood="neutral"] {
    background:
        radial-gradient(88% 58% at 50% -4%, rgb(var(--atmo-slate) / 0.05) 0%, rgb(var(--atmo-slate) / 0) 64%);
}

/* ── Layer 3 — static tonal wash ─────────────────────────────────────────
   This layer used to drift over 140 seconds. It is static now: the revision
   asks for decorative detail that holds still, so the site has no continuous
   animation anywhere and nothing needs pausing when the tab is hidden. */
.atmo-drift {
    inset: -10vh -8vw;
    background:
        radial-gradient(40% 32% at 22% 24%, rgb(var(--atmo-emerald) / 0.048) 0%, rgb(var(--atmo-emerald) / 0) 74%),
        radial-gradient(36% 30% at 78% 62%, rgb(var(--atmo-slate) / 0.042) 0%, rgb(var(--atmo-slate) / 0) 76%);
}

/* ── Layer 4 — architectural detail ──────────────────────────────────────
   The translucency revealer. Glass only reads as glass where something has
   structure behind it to refract: a 0.72-alpha panel over a flat wash is
   indistinguishable from an opaque panel, which is exactly the "ordinary white
   box" problem this revision set out to fix.

   So this layer places four large, very soft geometric forms (each with a
   readable EDGE, which is what survives a blur) in the regions panels actually
   occupy. Under an 18px backdrop blur these become a faint cloudy tint and a
   soft edge travelling across the surface — visible on glass, absent on the
   opaque clay surfaces. Everything stays under 6% alpha, so the page still
   reads as white; the lines are hairlines, the forms are not shapes you notice
   until they are behind glass. */
.atmo-detail {
    background-image:
        radial-gradient(closest-side, rgb(var(--atmo-emerald) / 0.068) 0%, rgb(var(--atmo-emerald) / 0) 100%),
        radial-gradient(closest-side, rgb(var(--atmo-slate) / 0.062) 0%, rgb(var(--atmo-slate) / 0) 100%),
        radial-gradient(closest-side, rgb(var(--atmo-emerald) / 0.05) 0%, rgb(var(--atmo-emerald) / 0) 100%),
        radial-gradient(closest-side, rgb(var(--atmo-slate) / 0.058) 0%, rgb(var(--atmo-slate) / 0) 100%);
    background-size:
        min(52vw, 620px) min(52vw, 620px),
        min(46vw, 560px) min(46vw, 560px),
        min(42vw, 500px) min(42vw, 500px),
        min(38vw, 460px) min(38vw, 460px);
    /* Spread across the viewport, because the layer is fixed and one placement
       therefore serves every section alike. Percentages (not lengths) so each
       disc is aligned by its edge and stays fully on screen at any width. */
    background-position:
        6% 26%,
        100% 2%,
        54% 100%,
        96% 74%;
    background-repeat: no-repeat;
}

/* ── Layer 5 — linework ──────────────────────────────────────────────────
   Fine architectural grid, masked so it thins out before the page edges and
   never becomes wallpaper. It is the crisp half of the background detail:
   hairlines that read as drawing on white at normal contrast, and that smear
   into a soft wash behind a translucent panel. Two rhythms instead of one — a
   72px primary and an 18px secondary — so the linework has texture rather than
   reading as graph paper. */
.atmo-grid {
    background-image:
        linear-gradient(to right, rgb(var(--atmo-ink) / 0.075) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(var(--atmo-ink) / 0.075) 1px, transparent 1px),
        linear-gradient(to right, rgb(var(--atmo-ink) / 0.032) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(var(--atmo-ink) / 0.032) 1px, transparent 1px);
    background-size: 72px 72px, 72px 72px, 18px 18px, 18px 18px;
    -webkit-mask-image: radial-gradient(126% 96% at 50% -2%, #000 0%, rgb(0 0 0 / 0) 74%);
    mask-image: radial-gradient(126% 96% at 50% -2%, #000 0%, rgb(0 0 0 / 0) 74%);
}

/* ── Layer 6 — top light + edge tone ───────────────────────────────────
   The top light is deliberately gentler than it was: a near-opaque white
   radial at the top flattened the very region the navigation floats over, so
   the nav had nothing behind it to blur and read as a plain white bar. Keeping
   it soft lets the linework and detail survive up there, which is what makes
   the capsule read as a distinct surface sitting over the page. */
.atmo-vignette {
    background:
        radial-gradient(142% 70% at 50% -18%, rgb(255 255 255 / 0.62) 0%, rgb(255 255 255 / 0) 52%),
        radial-gradient(150% 104% at 50% 122%, rgb(var(--atmo-slate) / 0.055) 0%, rgb(var(--atmo-slate) / 0) 54%);
}

/* ==========================================================================
   3. TYPE & BASE
   ========================================================================== */
body {
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.028em;
    line-height: 1.14;
    color: var(--text-main);
}

p {
    text-wrap: pretty;
}

::selection {
    background-color: var(--accent-soft);
    color: var(--accent-ink);
}

/* Every legacy "neon" class now resolves to the readable emerald. Nothing on
   the site paints a second accent colour. */
.neon-text,
.neon-text-cyan,
.neon-text-purple {
    color: var(--accent-ink);
}

.section-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 0.9rem;
}

.section-title {
    font-size: clamp(1.8rem, 3.3vw, 2.55rem);
    font-weight: 700;
    letter-spacing: -0.032em;
    line-height: 1.12;
    margin-bottom: 0.85rem;
}

.section-subtitle {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--text-muted);
    max-width: 48ch;
    margin: 0;
}

/* Editorial headers: left-aligned measure instead of a centred stack */
.section-header {
    text-align: left;
    max-width: 52rem;
    margin: 0 0 3rem;
}

.section-header .section-subtitle {
    margin: 0;
}

a {
    text-underline-offset: 3px;
}

/* ==========================================================================
   4. RHYTHM & LAYOUT
   ========================================================================== */
.container {
    max-width: 1180px;
    padding: 0 var(--gutter);
}

section {
    background: transparent;
    scroll-margin-top: 6rem;
}

.services-section,
.portfolio-section,
.why-me-section,
.vouches-section,
.perks-section,
.faq-section,
.contact-section {
    padding: var(--section-y) 0;
}

/* A hairline between chapters gives the page an editorial spine */
.portfolio-section,
.why-me-section,
.vouches-section,
.perks-section,
.faq-section {
    border-top: 1px solid var(--border-subtle);
}

@media (min-width: 1024px) {
    :root {
        --section-y: 7rem;
        --gutter: 2rem;
    }
}

@media (max-width: 479px) {
    :root {
        --section-y: 3.5rem;
        --gutter: 1.15rem;
    }
}

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    min-height: min(720px, 82svh);
    padding: 7.5rem 0 4rem;
    overflow: visible;          /* was `hidden`, which clipped the hero content */
}

/* The decorative blurred orbs belonged to the old system. */
.hero-section::before,
.hero-section::after {
    display: none;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    min-width: 0;               /* lets the flex/grid item shrink below content width */
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.42rem 0.95rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 550;
    letter-spacing: 0.005em;
    color: var(--text-muted);
    background: var(--glass-strong);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-sheen);
    backdrop-filter: none;
    margin-bottom: 1.6rem;
}

.availability-dot {
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.hero-title {
    font-size: clamp(2.3rem, 6.2vw, 3.9rem);
    font-weight: 780;
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-bottom: 1.15rem;
    text-wrap: balance;
    color: var(--text-main);
}

/* The purple gradient + infinite shimmer is replaced by the brand accent. */
.hero-title .neon-text-cyan {
    background: none;
    background-size: auto;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--accent-ink);
    animation: none;
}

.hero-subtitle {
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    line-height: 1.75;
    color: var(--text-muted);
    max-width: 46ch;
    margin-bottom: 2rem;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

/* The statistics panel is the clay member of the family: it is the first
   surface the eye lands on after the headline, and it is the one place on the
   site where the numbers themselves are the content. */
.hero-stats {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 1.05rem 1.15rem;
    width: 100%;
    max-width: 34rem;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFB 100%);
    border: 1px solid var(--clay-edge);
    box-shadow: var(--clay-shadow), var(--clay-raised);
    /* Its backdrop blur is declared in section 7, with the rest of the family:
       this element also carries .glass-panel, and the family rule resets
       backdrop-filter, so the blur has to be stated after it. */
}

/* The gradient accent lines on the stats card were part of the old system. */
.hero-stats::before,
.hero-stats::after {
    display: none;
}

.stat-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    text-align: center;
}

/* Each stat icon is a small clay chip inside the glass statistics panel: the
   panel is the see-through member of the family, and the chips resting on it
   are the opaque, sculpted one. Two languages, one surface, no guesswork about
   which is which. */
.hero-stats .stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 0.95rem;
    border-radius: 10px;
    background: var(--clay-surface);
    background-color: #FFFFFF;
    border: 1px solid var(--clay-edge);
    box-shadow: var(--clay-shadow-sm), var(--clay-raised-sm);
    color: var(--accent-ink);
    opacity: 1;
    margin-bottom: 0.45rem;
}

.stat-divider {
    width: 1px;
    align-self: stretch;
    margin: 0.3rem 0.1rem;
    background: linear-gradient(180deg, rgb(var(--atmo-ink) / 0), rgb(var(--atmo-ink) / 0.12) 50%, rgb(var(--atmo-ink) / 0));
}

.hero-stats .stat-number {
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
    font-weight: 760;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--accent-ink);
    font-variant-numeric: tabular-nums;
}

.hero-stats .stat-label {
    font-size: 0.66rem;
    font-weight: 560;
    letter-spacing: 0.13em;
    line-height: 1.4;
    color: var(--text-muted);
}

/* The service orbit is a quiet, wrapping index of services — same content,
   same click behaviour. Each entry is a small white glass chip. */
.service-orbit {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
}

.orbit-stage {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
    height: auto;
}

.orbit-card {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    background: var(--glass-strong);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-sheen);
    font-size: 0.84rem;
    font-weight: 550;
    color: var(--text-muted);
    text-align: left;
    transition: background var(--fast) var(--ease),
                border-color var(--fast) var(--ease),
                color var(--fast) var(--ease),
                box-shadow var(--fast) var(--ease);
}

.orbit-card i {
    font-size: 1.05rem;
    color: var(--text-muted);
    transition: color var(--fast) var(--ease);
}

.orbit-card span {
    font-size: 0.84rem;
    white-space: normal;
}

.orbit-card:hover,
.orbit-card:focus-visible {
    background: #FFFFFF;
    border-color: var(--accent-edge);
    color: var(--text-main);
    box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-sheen);
}

.orbit-card:hover i,
.orbit-card:focus-visible i {
    color: var(--accent-ink);
}

/* Desktop: statement on the left, service index on the right. */
@media (min-width: 1024px) {
    .hero-content {
        display: grid;
        grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
        grid-template-areas:
            "badge    orbit"
            "title    orbit"
            "subtitle orbit"
            "buttons  orbit"
            "stats    orbit";
        align-items: start;
        column-gap: clamp(2rem, 5vw, 5rem);
        row-gap: 0;
    }

    .hero-content .trust-badge { grid-area: badge; justify-self: start; }
    .hero-content .hero-title { grid-area: title; }
    .hero-content .hero-subtitle { grid-area: subtitle; max-width: 34rem; }
    .hero-content .hero-buttons { grid-area: buttons; }
    .hero-content .hero-stats { grid-area: stats; align-self: end; }
    .hero-content .service-orbit { grid-area: orbit; align-self: center; }
}

@media (max-width: 479px) {
    .orbit-stage {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-stats {
        flex-wrap: wrap;
    }

    .stat-item {
        flex: 1 1 40%;
    }

    .stat-divider {
        display: none;
    }
}

/* ==========================================================================
   6. NAVIGATION
   --------------------------------------------------------------------------
   The one surface with page content continuously travelling behind it, so
   this is where a real backdrop blur earns its cost.
   ========================================================================== */
.glass-nav {
    top: 0.75rem;
    width: min(1180px, calc(100% - 1.5rem));
}

.glass-nav .nav-container {
    /* The capsule is the one surface with page content continuously travelling
       behind it, so it carries the most translucency on the site (0.44 at the
       top of the gradient) and the strongest rim. It must read as a distinct
       pane floating above the page, not as a white bar. */
    background-color: rgba(255, 255, 255, 0.44);
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.74) 0%,
        rgba(250, 253, 251, 0.34) 54%,
        rgba(255, 255, 255, 0.52) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    box-shadow:
        0 0 0 1px rgba(21, 26, 24, 0.055),
        0 14px 34px -12px rgba(21, 26, 24, 0.22),
        0 3px 10px -4px rgba(21, 26, 24, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -1px 0 rgba(255, 255, 255, 0.45);
    padding: 0.4rem 0.4rem 0.4rem 1.15rem;
    backdrop-filter: blur(var(--glass-blur-nav)) saturate(170%);
    -webkit-backdrop-filter: blur(var(--glass-blur-nav)) saturate(170%);
    transition: background var(--smooth) var(--ease),
                border-color var(--smooth) var(--ease),
                box-shadow var(--smooth) var(--ease);
}

/* Once the page has scrolled, content is passing directly under the capsule and
   legibility matters more than showing it off: the surface firms up rather than
   becoming opaque. */
.glass-nav.scrolled .nav-container {
    background-color: rgba(255, 255, 255, 0.72);
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(252, 253, 252, 0.62) 100%
    );
    border-color: rgba(255, 255, 255, 0.82);
    box-shadow:
        0 0 0 1px rgba(21, 26, 24, 0.06),
        0 18px 40px -14px rgba(21, 26, 24, 0.24),
        0 4px 12px -4px rgba(21, 26, 24, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.glass-nav .logo {
    color: var(--text-main);
}

.nav-links a:not(.btn),
.nav-links button:not(.btn) {
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
}

.nav-links a:not(.btn):hover,
.nav-links button:not(.btn):hover {
    color: var(--text-main);
    background: var(--surface);
}

/* Functional active-section state, kept and made quieter */
.nav-links a.nav-link-active:not(.btn) {
    color: var(--accent-ink) !important;
    background: transparent;
}

.nav-links a.nav-link-active:not(.btn)::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: var(--accent);
}

.nav-links a:not(.btn),
.nav-links a.nav-link-active:not(.btn) {
    position: relative;
}

.nav-username {
    color: var(--text-main);
}

@media (max-width: 1023px) {
    .glass-nav .nav-container {
        padding: 0.4rem 0.55rem;
    }
}

/* Mobile menu — the same glass as the capsule, but firmer: it is always over
   content when open, so readability wins over translucency. */
.mobile-nav {
    background-color: rgba(255, 255, 255, 0.80);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 253, 251, 0.74) 100%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        0 0 0 1px rgba(21, 26, 24, 0.06),
        0 24px 54px -20px rgba(21, 26, 24, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(var(--glass-blur-nav)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--glass-blur-nav)) saturate(160%);
}

.mobile-link {
    color: var(--text-muted);
}

.mobile-link:hover {
    color: var(--text-main);
    background: var(--surface);
}

/* ==========================================================================
   7. SURFACES — THE GLASS & CLAY SYSTEM
   --------------------------------------------------------------------------
   Two families, and the choice between them is deliberate:

     GLASS  — panels that group content over the background (cards, FAQ rows,
              the contact shell). Depth is hairline + inner sheen + one soft
              shadow. Blur is NOT spent here: blurring a low-frequency white
              wash behind a panel is indistinguishable from not blurring it,
              while still costing a backdrop read on every scroll frame.

     CLAY   — the handful of surfaces that should feel physically raised: the
              statistics panel, the primary call to action, the icon chips,
              the Most Popular badge and the "How to Buy" step markers.
   ========================================================================== */
/* ── The glass surface ──────────────────────────────────────────────────
   Four things together, and all four are needed for it to read as glass
   rather than as a white box:

     1. real translucency    0.55 white, so the page shows through it
     2. a real backdrop blur the linework and forms behind arrive softened
     3. a specular gradient  light caught at the top-left, falling away
     4. a rim                a white inset highlight over a dark hairline

   The specular is a background-image rather than a ::before: panels already
   spend ::before/::after on their own content in several places, and a purely
   decorative layer must never take one over. */
.glass-panel,
.service-card,
.perk-card,
.vouch-card {
    position: relative;
    background-color: var(--glass);
    /* The specular is a diagonal run: nearly solid white where the pane catches
       the light at the top-left, its most transparent band across the middle,
       then firming up again towards the bottom-right. That sweep is what the
       eye reads as a sheet of glass rather than a flat tint. */
    background-image: linear-gradient(
        154deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(248, 251, 249, 0.26) 44%,
        rgba(255, 255, 255, 0.58) 100%
    );
    /* The light-catching rim is the bright border; the fine dark hairline is
       the 1px outer shadow, so the pane has a lit edge AND an outline. */
    border: 1px solid var(--glass-rim);
    border-radius: var(--radius-md);
    box-shadow:
        0 0 0 1px var(--glass-edge-soft),
        0 18px 42px -22px rgba(21, 26, 24, 0.26),
        0 4px 12px -5px rgba(21, 26, 24, 0.08),
        inset 0 1px 0 var(--glass-sheen),
        inset 0 -1px 0 rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-sat));
}

/* The statistics panel is the hero's glass member: the visitor meets a
   translucent, blurred surface and an opaque clay one (the primary button
   beside it) within the first screen, which is what makes the two languages
   legible as different things rather than as one effect at two strengths. */
.hero-stats {
    backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-sat));
}

/* ── Glass, paint without the blur ──────────────────────────────────────
   These members keep the family's tint, rim and shadow but give up the blur,
   for one honest reason each:

     • .faq-item / .accordion-item — numerous and narrow, sitting in a band
       with almost no background detail, so the blur would cost a backdrop
       read per row and show nothing;
     • .vouch-card / .vouch-dashboard / .orbit-card / .stat-box — already
       inside another surface, so there is no page background behind them to
       refract. Blurring paint that is already opaque is invisible.

   This is the "do not apply blur indiscriminately" rule made concrete rather
   than a stylistic whim. */
.faq-item,
.accordion-item,
.vouch-card,
.vouch-dashboard,
.orbit-card,
.stat-box {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.faq-item,
.accordion-item {
    position: relative;
    background-color: var(--glass);
    background-image: linear-gradient(
        154deg,
        rgba(255, 255, 255, 0.90) 0%,
        rgba(250, 252, 251, 0.30) 46%,
        rgba(255, 255, 255, 0.64) 100%
    );
    border: 1px solid var(--glass-rim);
    border-radius: var(--radius-md);
    box-shadow:
        0 0 0 1px var(--glass-edge-soft),
        0 14px 30px -20px rgba(21, 26, 24, 0.20),
        0 2px 8px -4px rgba(21, 26, 24, 0.06),
        inset 0 1px 0 var(--glass-sheen);
}

/* Same specular sweep as the family, so the FAQ rows belong to it. */
.faq-item,
.accordion-item {
    background-image: linear-gradient(
        154deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(248, 251, 249, 0.26) 44%,
        rgba(255, 255, 255, 0.58) 100%
    );
}

/* Clarity fallback: if backdrop-filter is unsupported every translucent
   surface simply becomes opaque white. Text contrast never depends on the
   blur, and never depends on the 0.55 alpha either — the fallback replaces
   both, so an unsupported browser gets a clean white panel rather than a
   washed-out one. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .glass-nav .nav-container,
    .glass-nav.scrolled .nav-container,
    .hero-stats,
    .modal-container,
    .glass-panel,
    .service-card,
    .perk-card,
    .vouch-card,
    .vouch-dashboard,
    .faq-item,
    .accordion-item,
    .contact-container,
    .contact-auth-gate {
        background: var(--glass-fallback);
        background-color: var(--glass-fallback);
        background-image: none;
    }

    .modal-overlay,
    .portfolio-modal {
        background: rgba(21, 26, 24, 0.55);
    }
}

/* The vouch counters are a grouping inside an existing panel, not a card in
   their own right — so they stay quiet rather than nesting glass in glass. */
.stat-box {
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0.65rem 1.1rem;
    transition: background var(--smooth) var(--ease);
}

.service-card,
.perk-card,
.vouch-card,
.stat-box {
    transition: background var(--smooth) var(--ease),
                border-color var(--smooth) var(--ease),
                transform var(--smooth) var(--ease),
                box-shadow var(--smooth) var(--ease);
}

/* Hover keeps the surface a glass surface. It used to hard-swap to opaque
   #FFFFFF, which meant a card stopped being translucent the moment the pointer
   touched it — the tell that the glass was only skin deep. It now gets slightly
   BRIGHTER and lifts, which is what a real pane does when it moves nearer the
   light. */
.service-card:hover,
.perk-card:hover,
.vouch-card:hover {
    background-color: rgba(255, 255, 255, 0.70);
    background-image: linear-gradient(
        154deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(252, 254, 253, 0.44) 46%,
        rgba(255, 255, 255, 0.78) 100%
    );
    border-color: var(--glass-edge);
    transform: translateY(-3px);
    box-shadow:
        0 28px 56px -26px rgba(21, 26, 24, 0.30),
        0 6px 16px -6px rgba(21, 26, 24, 0.10),
        inset 0 1px 0 var(--glass-sheen);
}

/* ── Clay surface ───────────────────────────────────────────────────────
   The featured tier is the one card that is clay rather than glass, and the
   contrast is meant to be obvious next to its two neighbours: opaque instead
   of translucent, no blur, a sculpted top rim and a shaded lower curve, and a
   three-stop shadow underneath. Nothing of the page shows through it. */
.perk-card.most-popular {
    border-color: var(--accent-edge);
    background-color: #FFFFFF;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #F2F7F4 62%, rgba(14, 159, 110, 0.06) 100%);
    /* Opaque: the blur has to be switched off explicitly, because this element
       also carries .perk-card, which is in the blurred glass family above. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--clay-shadow), var(--clay-raised);
}

.perk-card.most-popular:hover {
    border-color: var(--accent);
    box-shadow:
        0 1px 1px rgba(21, 26, 24, 0.05),
        0 10px 20px -6px rgba(14, 159, 110, 0.20),
        0 26px 48px -20px rgba(14, 159, 110, 0.24),
        var(--clay-raised);
}

/* A square chip, not a full-width bar. .perk-icon is a block element inside a
   column flexbox, so it was stretching to the card's whole width and reading as
   an empty bordered slab with a 32px glyph adrift in the middle of it. It is
   now the small tactile tile the mark was always meant to sit on — and being
   the card's only clay element, it is the clear local contrast against the
   glass surface underneath. */
.perk-icon {
    align-self: flex-start;      /* a column flexbox stretches children otherwise */
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 15px;
    font-size: 1.35rem;
    background: var(--clay-surface);
    background-color: #FFFFFF;
    border: 1px solid var(--clay-edge);
    box-shadow: var(--clay-shadow-sm), var(--clay-raised-sm);
    color: var(--accent-ink);
}

.perk-card.most-popular .perk-icon {
    /* The featured card is clay, so its chip cannot rely on the glass/clay
       contrast to stand out. It gets the accent clay recipe instead. */
    background-image: linear-gradient(180deg, #FFFFFF 0%, rgba(14, 159, 110, 0.12) 100%);
    border-color: var(--accent-edge);
    box-shadow:
        0 1px 1px rgba(9, 92, 63, 0.10),
        0 5px 12px -4px rgba(11, 122, 84, 0.26),
        var(--clay-raised-sm);
}

.perk-card.most-popular .perk-icon {
    color: var(--accent);
}

.popular-badge {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-ink) 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.28);
    /* The accent clay recipe, scaled to a badge. */
    box-shadow:
        0 1px 1px rgba(9, 92, 63, 0.16),
        0 5px 12px -4px rgba(11, 122, 84, 0.38),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.32),
        inset 0 -2px 4px -1px rgba(4, 60, 41, 0.36);
}

.perk-price {
    color: var(--accent-ink);
}

.perk-features li {
    color: var(--text-muted);
}

.perk-features li i {
    color: var(--accent-ink);
}

.perks-footer {
    color: var(--text-muted);
}

/* How to Buy — clay step markers on glass-free ground */
.step-icon {
    background: var(--clay-surface);
    background-color: #FFFFFF;
    border: 1px solid var(--clay-edge);
    box-shadow: var(--clay-shadow-sm), var(--clay-raised-sm);
    color: var(--accent-ink);
}

.step-num {
    /* Uses the deep emerald, not --accent: white on #0E9F6E is only 3.4:1,
       which fails AA for a label this small. This gradient holds 5.4:1–6.5:1. */
    background: linear-gradient(180deg, #0C7A53 0%, #0A6C4A 100%);
    color: #FFFFFF;
    box-shadow:
        0 1px 1px rgba(9, 92, 63, 0.16),
        0 5px 12px -4px rgba(11, 122, 84, 0.38),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.30),
        inset 0 -2px 4px -1px rgba(4, 60, 41, 0.36);
}

.step-arrow {
    color: var(--border);
}

.step-item h4 {
    color: var(--text-main);
}

.step-item p {
    color: var(--text-muted);
}

/* The open FAQ row restates its state here because the shared family rule
   above outranks the legacy rule that used to carry it. */
.faq-item.active {
    border-color: var(--accent-edge);
    background-image: linear-gradient(180deg, #FFFFFF 0%, rgba(14, 159, 110, 0.035) 100%);
    box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-sheen);
}

.faq-question {
    color: var(--text-main);
}

.faq-answer p {
    color: var(--text-muted);
}

.service-card h3 {
    font-size: 1.06rem;
    font-weight: 650;
    color: var(--text-main);
}

.service-card p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* The icon chip inside each service card is clay — one small tactile element
   per card, which is enough to give the grid dimension without turning every
   card into a pillow. */
.service-icon,
.feature-icon {
    background: var(--clay-surface);
    background-color: #FFFFFF;
    border: 1px solid var(--clay-edge);
    box-shadow: var(--clay-shadow-sm), var(--clay-raised-sm);
    color: var(--accent-ink);
}

.icon-cyan,
.icon-purple,
.icon-white {
    /* Legacy classes mapped to the brand accent */
    background: var(--clay-surface);
    border: 1px solid var(--clay-edge);
    box-shadow: var(--clay-shadow-sm), var(--clay-raised-sm);
    color: var(--accent-ink);
}

.feature-text h4 {
    color: var(--text-main);
}

.feature-text p {
    color: var(--text-muted);
}

.tech-tag {
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-weight: 550;
}

/* Both of these sit inside another surface, so they carry the family's tint
   and rim without the blur (see the paint-only list above). */
.vouch-dashboard {
    background-color: var(--glass);
    background-image: linear-gradient(
        154deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(248, 251, 249, 0.26) 44%,
        rgba(255, 255, 255, 0.58) 100%
    );
}

.vouch-card {
    background-color: rgba(255, 255, 255, 0.72);
    background-image: linear-gradient(180deg, #FFFFFF 0%, rgba(251, 252, 251, 0.86) 100%);
}

.empty-state {
    color: var(--text-muted);
}

/* ==========================================================================
   8. BUTTONS, FILTERS, FORMS
   ========================================================================== */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: -0.005em;
    padding: 0.66rem 1.25rem;
    transition: background var(--fast) var(--ease),
                border-color var(--fast) var(--ease),
                color var(--fast) var(--ease),
                transform var(--fast) var(--ease),
                box-shadow var(--fast) var(--ease);
}

/* Primary: deep emerald clay. White on #0B7A54 is 5.4:1 — the gradient stays
   above 5:1 at both ends, so the label never dips below AA. */
.btn-primary {
    background: linear-gradient(180deg, #0C7A53 0%, #0A6C4A 100%);
    background-image: linear-gradient(180deg, #0C7A53 0%, #0A6C4A 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--clay-accent-shadow);
}

.btn-primary:hover {
    background: linear-gradient(180deg, #0A6C4A 0%, #085B3E 100%);
    background-image: linear-gradient(180deg, #0A6C4A 0%, #085B3E 100%);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(11, 122, 84, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--clay-inset);
}

.btn-primary::after {
    display: none;              /* the old radial press ripple */
}

.btn-secondary,
.glass-btn {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFA 100%);
    background-image: linear-gradient(180deg, #FFFFFF 0%, #FAFBFA 100%);
    border: 1px solid var(--border);
    color: var(--text-main);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.btn-secondary:hover,
.glass-btn:hover {
    background: var(--surface-hover);
    background-image: none;
    border-color: #D6DDD8;
    color: var(--text-main);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.btn-icon {
    border: 1px solid var(--border-subtle);
    background: var(--surface);
    color: var(--text-muted);
}

.btn-icon:hover {
    background: #FFFFFF;
    color: var(--accent-ink);
    border-color: var(--accent-edge);
}

/* Filters (portfolio) */
.filter-btn {
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: background var(--fast) var(--ease),
                border-color var(--fast) var(--ease),
                color var(--fast) var(--ease);
}

.filter-btn:hover {
    color: var(--text-main);
    border-color: #D6DDD8;
    background: var(--surface-hover);
}

.filter-btn.active {
    background: var(--accent-soft);
    border-color: var(--accent-edge);
    color: var(--accent-ink);
    box-shadow: none;
    transform: none;
}

/* Forms */
input,
select,
textarea {
    background: #FFFFFF;
    border: 1px solid var(--border);
    color: var(--text-main);
}

input::placeholder,
textarea::placeholder {
    color: #98A29D;
}

select option {
    background: #FFFFFF;
    color: var(--text-main);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.glass-form {
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
}

.form-group label {
    color: var(--text-main);
}

.helper-text {
    color: var(--text-muted);
}

.info-block {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
}

.info-block i {
    color: var(--accent-ink);
}

.info-block .label {
    color: var(--text-muted);
}

.info-block .value {
    color: var(--text-main);
}

.contact-info {
    background: linear-gradient(180deg, #FCFDFC 0%, #F7F8F7 100%);
    border-right: 1px solid var(--border-subtle);
}

.contact-info h3 {
    color: var(--text-main);
}

.contact-info p {
    color: var(--text-muted);
}

/* Footer — deliberately not a glass panel: the page should end by settling
   into the background rather than with one more floating surface. */
.glass-footer {
    border-top: 1px solid var(--border-subtle);
    background: transparent;
}

.footer-bottom p,
.trust-text {
    color: var(--text-muted);
}

.footer-legal a,
.footer-legal-btn {
    color: var(--text-muted);
}

.footer-legal a:hover,
.footer-legal-btn:hover {
    color: var(--accent-ink);
}

.footer-divider {
    background: var(--border-subtle);
}

.social-btn {
    color: var(--text-muted);
}

.social-btn:hover {
    color: var(--accent-ink);
}

/* ==========================================================================
   9. DIALOGS
   --------------------------------------------------------------------------
   The scrim carries the blur and the container carries the material, so a
   dialog separates from the page by depth rather than by a heavy outline.
   ========================================================================== */
.modal-overlay {
    background: var(--scrim);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.modal-container {
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFC 100%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    color: var(--text-main);
    backdrop-filter: blur(var(--glass-blur-panel)) saturate(130%);
    -webkit-backdrop-filter: blur(var(--glass-blur-panel)) saturate(130%);
}

.modal-header h3,
.modal-header p {
    color: var(--text-main);
}

.modal-header p {
    color: var(--text-muted);
}

.modal-close-btn {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

.modal-close-btn:hover {
    background: var(--surface-hover);
    color: var(--text-main);
}

.login-content {
    color: var(--text-main);
}

/* An empty status box must take up no space and paint nothing — but it must
   stay in the accessibility tree, because it is a live region and display:none
   would silence it. `.form-status` carries padding and a margin on its own, so
   the empty state is neutralised here rather than by hiding the element. */
.login-content .form-status:empty {
    padding: 0;
    margin-top: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

/* The line that tells the visitor the Google button is waiting on the
   human-verification challenge. Muted, and never the only explanation — the
   status box below it carries the failures. */
.login-hint {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-muted);
    text-align: center;
}

.login-content .btn + .btn {
    margin-top: 0.6rem;
}

/* Payment sheet selected tab */
.payment-tab {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

.payment-tab.active {
    background: #FFFFFF;
    border-color: var(--accent-edge);
    color: var(--accent-ink);
    box-shadow: var(--shadow-sm);
}

.payment-view {
    color: var(--text-main);
}

/* ==========================================================================
   10. CARD TILT
   --------------------------------------------------------------------------
   The tilt is driven by GSAP (motion.js) on the same element the reveal
   animation owns. That is safe precisely because the reveal hands its inline
   transform back to the stylesheet when it finishes (`clearProps`), so the
   only inline transform that can exist on a card afterwards is the tilt's —
   and the tilt clears it again on pointer exit.

   `tilt-ready` is set by motion.js only when the device can actually hover and
   the visitor has not asked for reduced motion.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
    html.tilt-ready .service-card,
    html.tilt-ready .perk-card.most-popular,
    html.tilt-ready .portfolio-card {
        /* No permanent will-change: it is added by the tilt handler for the
           duration of the interaction only. */
        transform-style: preserve-3d;
    }
}

/* ==========================================================================
   11. PORTFOLIO — PAPER ON WHITE
   --------------------------------------------------------------------------
   The cards are pure white with a hairline and a soft shadow, so on a white
   page they read as elevated sheets. The only dark surface left is the hover
   scrim, which sits directly over the project image — that is a legibility
   decision about the photograph, not a page colour.
   ========================================================================== */
.portfolio-grid {
    gap: 1.25rem;
}

.portfolio-card {
    display: flex;              /* matches the inline display the filter JS sets */
    flex-direction: column;
    /* Glass on the strip the text lives in, paper behind the work. The image
       container below is opaque, so the photograph stays completely crisp —
       only the caption band is translucent. This is the "controlled glass
       overlay where beneficial" case, and it is the only surface where a
       blur is spent underneath a photograph. */
    background-color: var(--glass);
    background-image: linear-gradient(
        154deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(248, 251, 249, 0.26) 44%,
        rgba(255, 255, 255, 0.58) 100%
    );
    border: 1px solid var(--glass-rim);
    border-radius: var(--radius-md);
    box-shadow:
        0 0 0 1px var(--glass-edge-soft),
        0 18px 40px -22px rgba(21, 26, 24, 0.22),
        0 3px 10px -4px rgba(21, 26, 24, 0.07),
        inset 0 1px 0 var(--glass-sheen);
    backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-sat));
    overflow: hidden;
    transition: transform var(--smooth) var(--ease),
                box-shadow var(--smooth) var(--ease),
                border-color var(--smooth) var(--ease);
}

.portfolio-card::before {
    display: none;              /* the old diagonal gradient sheen */
}

.portfolio-card:hover {
    transform: translateY(-3px);
    border-color: var(--glass-edge);
    background-color: rgba(255, 255, 255, 0.68);
    box-shadow:
        0 28px 56px -26px rgba(21, 26, 24, 0.28),
        0 6px 16px -6px rgba(21, 26, 24, 0.10),
        inset 0 1px 0 var(--glass-sheen);
}

.portfolio-image {
    border-radius: 0;
    background: var(--paper-2);
}

.portfolio-image img,
.portfolio-placeholder {
    transition: transform 500ms var(--ease);
}

/* The image is inside the card, and the tilt transforms the card, so the two
   never write to the same element. */
.portfolio-card:hover .portfolio-image img,
.portfolio-card:hover .portfolio-placeholder {
    transform: scale(1.03);
}

.portfolio-overlay {
    background: linear-gradient(to top, rgba(16, 20, 18, 0.88) 0%, rgba(16, 20, 18, 0.28) 55%, transparent 100%);
}

.portfolio-overlay h3 {
    color: #FFFFFF;
}

.portfolio-overlay .tech-tag {
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.94);
    border-color: transparent;
}

.portfolio-overlay .btn {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.35);
}

.portfolio-overlay .btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.55);
}

.portfolio-info {
    padding: 1.15rem 1.25rem 1.35rem;
    /* Transparent, so the card's own glass shows through here. */
    background: transparent;
}

.portfolio-info h3 {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    margin-bottom: 0.35rem;
}

.portfolio-info p {
    color: var(--ink-muted);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 0.8rem;
}

.portfolio-info .tech-tag {
    background: var(--surface);
    color: var(--ink-muted);
    border-color: var(--border-subtle);
}

/* Project detail (modal) shares the paper surface. */
.portfolio-modal {
    background: rgba(21, 26, 24, 0.44);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.portfolio-modal-content {
    background: #FFFFFF;
    color: var(--ink);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

.portfolio-modal-body h3 {
    color: var(--ink);
}

.portfolio-modal-summary {
    color: var(--ink-accent);
}

.portfolio-modal-body > p:not(.portfolio-modal-summary) {
    color: var(--ink-muted);
}

.portfolio-modal-meta .tech-tag {
    background: var(--surface);
    color: var(--ink-muted);
    border-color: var(--border-subtle);
}

.portfolio-modal-section h4 {
    color: var(--ink);
}

.portfolio-modal-section h4 i {
    color: var(--ink-accent);
}

.portfolio-modal-list li {
    color: var(--ink-muted);
}

.portfolio-modal-list li::before {
    color: var(--ink-accent);
}

.portfolio-modal-nav-btn {
    color: var(--ink-muted);
    border: 1px solid var(--border);
    background: #FFFFFF;
}

.portfolio-modal-nav-btn:hover {
    color: var(--ink);
    background: var(--surface);
}

.portfolio-modal-close {
    background: rgba(21, 26, 24, 0.55);
    color: #FFFFFF;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.portfolio-modal-close:hover {
    background: rgba(21, 26, 24, 0.75);
    transform: none;
}

/* ==========================================================================
   12. CONTACT AUTHENTICATION GATE
   --------------------------------------------------------------------------
   The contact form now requires a signed-in, verified Firebase account. This
   is the frontend half of the requirement: it states the requirement, offers
   the existing sign-in flow, and shows the verified account the inquiry will
   come from. The enforcement that actually matters lives in
   functions/api/contact.js and rejects anything without a verified token.
   ========================================================================== */
.contact-auth-gate {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-md);
    /* Glass, in the family's language: genuinely translucent (0.62), a white
       rim, a specular falloff, and the brand tint carried under it rather than
       painted flat. No backdrop blur — the gate sits inside the contact panel,
       so there is already opaque paint behind it and a blur would be invisible
       while still costing a backdrop read. */
    background-color: rgba(255, 255, 255, 0.62);
    background-image: linear-gradient(
        154deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(238, 250, 244, 0.44) 52%,
        rgba(14, 159, 110, 0.055) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow:
        0 0 0 1px var(--accent-edge),
        0 16px 34px -20px rgba(11, 122, 84, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.contact-auth-gate.hidden {
    display: none;
}

.contact-auth-gate[data-state="unverified"] {
    background-image: linear-gradient(
        154deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(252, 248, 236, 0.46) 52%,
        rgba(138, 90, 0, 0.055) 100%
    );
    box-shadow:
        0 0 0 1px rgba(138, 90, 0, 0.28),
        0 16px 34px -20px rgba(138, 90, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.contact-auth-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
}

/* The icon is the clay note inside the glass gate — opaque, sculpted, and
   clearly not the same material as the sheet it sits on. */
.contact-auth-icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--clay-surface);
    background-color: #FFFFFF;
    border: 1px solid var(--clay-edge);
    box-shadow: var(--clay-shadow-sm), var(--clay-raised-sm);
    color: var(--accent-ink);
    font-size: 1.15rem;
}

.contact-auth-gate[data-state="unverified"] .contact-auth-icon {
    color: var(--warning);
}

.contact-auth-copy h4 {
    margin: 0 0 0.2rem;
    font-size: 0.98rem;
    font-weight: 650;
    color: var(--text-main);
}

.contact-auth-copy p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.contact-auth-status {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.contact-auth-status.status-error {
    color: var(--danger);
}

.contact-auth-status.status-success {
    color: var(--accent-ink);
}

.contact-auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* The signed-in account strip. It replaces the gate once a verified account is
   present, and it is the only place the inquiry's sender address is shown. */
.contact-auth-account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1.35rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
}

.contact-auth-account > i {
    flex: 0 0 auto;
    font-size: 1.15rem;
    color: var(--accent-ink);
}

.contact-auth-account-text {
    min-width: 0;
}

.contact-auth-account .label {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.contact-auth-account .value {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.contact-auth-account .btn {
    margin-left: auto;
    flex: 0 0 auto;
}

/* The email field is account information, not user input. */
#contact-form input#email[readonly] {
    background: var(--surface);
    color: var(--text-muted);
    cursor: default;
}

#contact-form input#email[readonly]:focus {
    border-color: var(--border);
    box-shadow: none;
}

/* While the account requirement is unmet the submit action is visibly inert —
   but this is a courtesy, not the control. The endpoint is the control. */
#contact-form[data-auth="signed-out"] .captcha-container,
#contact-form[data-auth="signed-out"] #submit-btn {
    opacity: 0.55;
}

@media (max-width: 420px) {
    .contact-auth-account {
        flex-wrap: wrap;
    }

    .contact-auth-account .btn {
        margin-left: 0;
        width: 100%;
    }
}

/* ==========================================================================
   13. PROJECT CONFIGURATOR (designer shell)
   --------------------------------------------------------------------------
   An application shell rather than a stack of cards: the floating-panel radius
   is deliberately taken back and the three columns meet at hairlines. The
   shell stays effectively opaque, because it renders a Discord-like mock-up
   and legibility there matters more than seeing the background through it.
   ========================================================================== */
.designer-wrapper {
    background: linear-gradient(180deg, #FFFFFF 0%, #F7F8F7 100%);
    color: var(--text-main);
}

.designer-header {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 251, 250, 0.88) 100%);
    box-shadow: none;
    color: var(--text-main);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.designer-sidebar,
.designer-summary {
    border-radius: 0;
    border: none;
    background: #FCFDFC;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.designer-sidebar {
    border-right: 1px solid var(--border-subtle);
}

.designer-summary {
    border-left: 1px solid var(--border-subtle);
}

/* The preview is the most opaque surface in the shell, because the mock-up
   inside it is the content the visitor is here to look at. */
.designer-preview {
    border-radius: 0;
    border: none;
    background: #FFFFFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ==========================================================================
   14. REVEAL SYSTEM  (single source of truth)
   The hidden state is gated on `html.anim-armed`, a class that only RUNNING
   JavaScript can set — anim-arm.js adds it in <head>, before any body paint.

   That distinction is the whole point. The previous gate was `@media
   (scripting: enabled)`, which reports whether the browser supports scripting,
   not whether any script executed. A visitor whose scripts were all blocked
   matched it and was left with 26 reveal targets at opacity 0 — a half-empty
   page. Now:

     • JavaScript off, or every script blocked -> no class -> visible by default
     • scripts running -> armed -> the reveal system animates as before
     • GSAP blocked, or the coordinator never boots -> animation-core.js and
       anim-arm.js both strip the arming (`no-anim`) -> visible

   Nothing here weakens the CSP, needs an inline script, or waits on a timer.
   ========================================================================== */
html.anim-armed .fade-up:not(.visible) {
    /* "Not revealed yet" rather than "revealed": once `.visible` is set, no
       rule touches these elements at all. That matters, because a `.visible`
       rule declaring `transform` would outrank the `:hover` transform of every
       card that is also a reveal target and silently kill the hover lift. */
    opacity: 0;
    transform: translateY(14px);
}

html.no-anim .fade-up,
html.no-anim .fade-up.visible {
    opacity: 1 !important;
    transform: none !important;
}

/* --------------------------------------------------------------------------
   Portfolio filters sit on the same axis as the editorial section header.
   -------------------------------------------------------------------------- */
.portfolio-filters {
    justify-content: flex-start;
    margin-bottom: 2.25rem;
}

/* --------------------------------------------------------------------------
   Small-phone safety (320px and similar).
   The contact panel is a two-column grid. Below 420px it collapses to a single
   column, and minmax(0, 1fr) + min-width: 0 let it shrink below its own
   min-content width — which is what previously pushed the contact info and the
   form past the right edge of their clipped container.
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
    .contact-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-container > * {
        min-width: 0;
    }

    .contact-info {
        padding: 1.5rem;
        border-right: 0;
        border-bottom: 1px solid var(--border-subtle);
    }

    .contact-info h3 {
        font-size: 1.15rem;
    }

    .glass-form {
        padding: 1.35rem;
    }

    .section-title {
        font-size: clamp(1.55rem, 7vw, 2rem);
    }

    .btn {
        max-width: 100%;
    }
}

/* ==========================================================================
   15. ACCESSIBILITY & MOTION PREFERENCES
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.portfolio-card:focus-visible,
.faq-question:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    /* All content is visible; nothing waits on an animation, and nothing on
       the page moves. The background is static CSS, so there is nothing to
       stop there. */
    .fade-up {
        opacity: 1 !important;
        transform: none !important;
    }

    .btn,
    .btn-primary,
    .btn-secondary,
    .glass-btn,
    .filter-btn,
    .orbit-card,
    .service-card,
    .perk-card,
    .vouch-card,
    .portfolio-card,
    .portfolio-image img,
    .portfolio-placeholder,
    .glass-nav,
    .glass-nav .nav-container,
    .portfolio-modal-content,
    .modal-overlay,
    .contact-auth-gate {
        transition: none !important;
        animation: none !important;
    }

    .service-card:hover,
    .perk-card:hover,
    .vouch-card:hover,
    .portfolio-card:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .glass-btn:hover {
        transform: none !important;
    }

    .portfolio-card:hover .portfolio-image img,
    .portfolio-card:hover .portfolio-placeholder {
        transform: none !important;
    }

    /* The three pre-existing looping micro-affordances (the availability dot,
       the scroll-indicator wheel and the configurator hint arrow). They are
       conventional UI signals rather than decorative background motion, so
       they are deliberately kept in the default experience — but a
       reduced-motion preference stops them outright, like everything else.
       They were the only loops on the site that a reduced-motion visitor could
       still see moving. */
    .availability-dot,
    .wheel,
    .designer-preview-hint i {
        animation: none !important;
    }
}

/* ==========================================================================
   ADMIN CONTROL PLANE — the dashboard shell and its controls
   ==========================================================================
   The administrator interface only. Everything here is scoped to `.admin-body`
   / `.admin-shell` (or to a class that exists only on admin.html), so the public
   site and the customer dashboard keep their existing styles. `.sidebar-user`
   and `.sidebar-nav` ARE shared with the customer dashboard, so their overrides
   are qualified with `.admin-sidebar`.

   Direction: white foundation, deep Godzly emerald, restrained glass in the
   sidebar, clay-edged buttons, hairline borders, lowercase data density. No new
   dependencies and no colour outside the existing tokens.
   ========================================================================== */

/* Visually hidden but available to a screen reader. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* `hidden` must beat the author-level `display` on buttons and images. */
.admin-shell [hidden] {
    display: none !important;
}

.admin-body {
    background: transparent;
}

/* ── Shell ─────────────────────────────────────────────────────────────── */

.admin-shell {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.85rem, 1.6vw, 1.5rem);
    width: 100%;
    max-width: 1720px;
    min-height: 100vh;
    margin: 0 auto;
    padding: clamp(0.75rem, 1.4vw, 1.5rem);
}

.admin-sidebar {
    position: sticky;
    top: clamp(0.75rem, 1.4vw, 1.5rem);
    flex: 0 0 clamp(228px, 17vw, 264px);
    width: clamp(228px, 17vw, 264px);
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.admin-main {
    flex: 1 1 auto;
    /* THE overflow fix: a flex item's default min-width is auto, so a wide table
       forced the whole page wider than the viewport. min-width:0 lets the table
       container scroll instead of the page. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* ── Brand + account ───────────────────────────────────────────────────── */

.admin-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.3rem 0.45rem 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
}

.admin-brand-mark {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.02rem;
    font-weight: 800;
    color: #FFFFFF;
    background: linear-gradient(150deg, #12A876 0%, #0A6C4A 100%);
    box-shadow: 0 6px 16px rgba(14, 159, 110, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.admin-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.admin-brand-text strong {
    font-size: 1rem;
    font-weight: 720;
    letter-spacing: -0.025em;
}

.admin-brand-text small {
    font-size: 0.63rem;
    font-weight: 650;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.admin-sidebar .sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem;
    margin: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: linear-gradient(160deg, #FFFFFF 0%, var(--surface) 100%);
}

.admin-sidebar .sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
}

.admin-sidebar .sidebar-user-info h4 {
    font-size: 0.87rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-sidebar .user-role {
    font-size: 0.735rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.user-role-badge {
    align-self: flex-start;
    margin-top: 0.15rem;
    padding: 0.02rem 0.4rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-ink);
    background: var(--accent-soft);
    border: 1px solid var(--accent-edge);
    border-radius: 999px;
}

.sidebar-avatar {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(150deg, rgba(14, 159, 110, 0.18) 0%, rgba(14, 159, 110, 0.05) 100%);
    border: 1px solid var(--accent-edge);
}

.sidebar-avatar-initials {
    font-size: 0.92rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    color: var(--accent-ink);
}

.sidebar-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 50%;
}

/* ── Navigation ────────────────────────────────────────────────────────── */

.admin-sidebar .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sidebar-group-label {
    display: block;
    padding: 0.55rem 0.6rem 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8A938F;
}

.admin-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.52rem 0.62rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    font-size: 0.855rem;
    font-weight: 550;
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.admin-menu-item i {
    flex: 0 0 auto;
    font-size: 1.05rem;
}

.admin-menu-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-menu-item:hover {
    background: var(--surface-hover);
    color: var(--text-main);
}

.admin-menu-item.active {
    background: var(--accent-soft);
    border-color: var(--accent-edge);
    color: var(--accent-ink);
    font-weight: 650;
    box-shadow: inset 3px 0 0 var(--accent);
}

.admin-menu-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.admin-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: auto;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border-subtle);
}

/* ── Topbar ────────────────────────────────────────────────────────────── */

.admin-topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    padding: 0.2rem 0.25rem 0.35rem;
}

.admin-topbar-title {
    min-width: 0;
}

.admin-eyebrow {
    margin: 0 0 0.12rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-ink);
}

.admin-topbar h1 {
    margin: 0;
    font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem);
    font-weight: 720;
    letter-spacing: -0.032em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Section surface ───────────────────────────────────────────────────── */

.admin-section {
    display: none;
    padding: clamp(1rem, 1.1vw + 0.75rem, 1.7rem);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    min-width: 0;
}

.admin-section.active {
    display: block;
    animation: surface-enter 0.28s var(--ease);
}

.admin-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1.05rem;
}

.admin-title {
    margin: 0;
    font-size: clamp(1.12rem, 1rem + 0.45vw, 1.38rem);
    font-weight: 690;
    letter-spacing: -0.028em;
    line-height: 1.2;
}

.admin-lede {
    margin: 0.35rem 0 0;
    max-width: 72ch;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.admin-lede strong {
    color: var(--accent-ink);
}

.admin-subtitle {
    margin: 1.55rem 0 0.7rem;
    font-size: 0.95rem;
    font-weight: 660;
    letter-spacing: -0.012em;
    color: var(--text-main);
}

.admin-section .admin-subtitle:first-of-type {
    margin-top: 0.5rem;
}

.admin-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.admin-grid-two {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    gap: clamp(1rem, 1.8vw, 1.6rem);
    margin-top: 0.35rem;
}

/* ── Loader / gate states ──────────────────────────────────────────────── */

.admin-loader-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 260px;
    padding: clamp(1.5rem, 4vw, 3rem);
    text-align: center;
    border-radius: 20px;
}

.admin-loader-box p {
    max-width: 56ch;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.ph-spin {
    font-size: 1.6rem;
    color: var(--accent);
    animation: ph-spin 1.1s linear infinite;
}

@keyframes ph-spin {
    to { transform: rotate(360deg); }
}

.admin-loader-error {
    align-items: flex-start;
    text-align: left;
}

.admin-loader-error > i {
    font-size: 1.55rem;
    color: var(--warning);
}

.admin-loader-error h2 {
    margin: 0;
    font-size: 1.08rem;
    letter-spacing: -0.02em;
}

.admin-loader-error p {
    margin: 0;
    max-width: 62ch;
    overflow-wrap: anywhere;
}

.admin-loader-error .btn {
    margin-top: 0.6rem;
}

/* ── Summary cards ─────────────────────────────────────────────────────── */

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: clamp(0.6rem, 1vw, 0.9rem);
    margin-bottom: 1.4rem;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    min-width: 0;
    padding: 0.95rem 1.05rem;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(160deg, #FFFFFF 0%, var(--surface) 100%);
    box-shadow: var(--shadow-sm);
}

.stat-card-accent {
    border-color: var(--accent-edge);
    background: linear-gradient(160deg, rgba(14, 159, 110, 0.09) 0%, #FFFFFF 72%);
}

.stat-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: 0.4rem;
    border-radius: 10px;
    border: 1px solid var(--accent-edge);
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 1rem;
}

.stat-card .stat-value {
    display: block;
    font-size: clamp(1.3rem, 1.05rem + 0.75vw, 1.7rem);
    font-weight: 760;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.stat-card-accent .stat-value {
    color: var(--accent-ink);
}

.stat-card .stat-label {
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Policy card (Contact Rate Limits) ─────────────────────────────────── */

.admin-policy {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--accent-edge);
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(14, 159, 110, 0.09) 0%, rgba(255, 255, 255, 0.94) 70%);
}

.admin-policy[data-state="loading"] {
    border-color: var(--border);
    background: var(--surface);
}

.admin-policy[data-state="error"] {
    border-color: rgba(179, 38, 30, 0.32);
    background: rgba(179, 38, 30, 0.045);
}

.admin-policy-mark {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--accent-ink);
    font-size: 1.05rem;
}

.admin-policy[data-state="error"] .admin-policy-mark {
    color: var(--danger);
}

.admin-policy-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.admin-policy-value {
    font-size: 1.02rem;
    font-weight: 720;
    letter-spacing: -0.015em;
    color: var(--accent-ink);
    overflow-wrap: anywhere;
}

.admin-policy[data-state="error"] .admin-policy-value {
    color: var(--danger);
}

.admin-policy-detail {
    margin: 0.15rem 0 0;
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.admin-policy-meta {
    margin: 0.18rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.admin-policy-retry {
    flex: 0 0 auto;
    align-self: center;
}

.admin-policy-note {
    margin-top: 0.8rem;
    padding: 0.85rem 1.1rem;
    border: 1px dashed var(--border);
    border-radius: 14px;
    background: var(--surface-soft);
}

.admin-policy-note-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.9rem;
    margin-bottom: 0.45rem;
}

.admin-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* ── Callouts ──────────────────────────────────────────────────────────── */

.admin-callout {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--accent-edge);
    border-radius: 14px;
    background: var(--accent-soft);
}

.admin-callout-muted {
    display: block;
    border-color: var(--border);
    background: var(--surface);
}

.admin-callout strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 1rem;
    color: var(--accent-ink);
}

.admin-callout-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.admin-callout-meta {
    align-self: center;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.admin-callout-copy {
    margin: 0.3rem 0 0;
    max-width: 58ch;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ── Forms ─────────────────────────────────────────────────────────────── */

.admin-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.85rem 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.admin-form-stacked {
    grid-template-columns: minmax(0, 1fr);
}

.admin-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.85rem;
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.admin-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
}

.admin-field .req {
    color: #B3261E;
}

.admin-field input,
.admin-field select {
    width: 100%;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--text-main);
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.admin-field input:focus-visible,
.admin-field select:focus-visible,
.admin-toolbar input:focus-visible,
.admin-toolbar select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.admin-hint {
    font-size: 0.745rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    grid-column: 1 / -1;
}

.admin-form .form-status,
.admin-form-status {
    grid-column: 1 / -1;
    margin-top: 0;
    overflow-wrap: anywhere;
}

.admin-form-status:empty {
    display: none;
}

/* ── Toolbars and list status ──────────────────────────────────────────── */

.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.admin-toolbar input[type="search"],
.admin-toolbar input[type="text"],
.admin-toolbar input[type="email"] {
    flex: 1 1 13rem;
    min-width: 0;
    padding: 0.52rem 0.7rem;
    font: inherit;
    font-size: 0.86rem;
    color: var(--text-main);
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.admin-toolbar select {
    /* The global form rule is `select { width: 100% }`; in a wrapping toolbar
       that made every filter a full-width row of its own. */
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0.52rem 0.6rem;
    font: inherit;
    font-size: 0.86rem;
    color: var(--text-main);
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.admin-list-status {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.admin-list-status:empty {
    display: none;
}

.admin-list-status.status-error {
    padding: 0.6rem 0.8rem;
    border: 1px solid rgba(179, 38, 30, 0.3);
    border-radius: 10px;
}

/* ── Result panels (lookup) ────────────────────────────────────────────── */

.admin-result:empty {
    display: none;
}

.admin-result-card {
    display: grid;
    gap: 0.55rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: var(--shadow-sm);
}

.admin-result-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.85rem;
    font-size: 0.875rem;
    min-width: 0;
}

.admin-result-row > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-result-row .admin-callout-label {
    flex: 0 0 10.5rem;
}

.admin-result-row strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.admin-empty-inline {
    margin: 0.4rem 0;
    font-size: 0.84rem;
    color: var(--text-muted);
}

/* ── Chips and badges ──────────────────────────────────────────────────── */

.admin-chip {
    display: inline-block;
    margin: 0 0.3rem 0.3rem 0;
    padding: 0.16rem 0.52rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.73rem;
    color: var(--accent-ink);
    background: var(--accent-soft);
    border: 1px solid var(--accent-edge);
    border-radius: 999px;
    overflow-wrap: anywhere;
}

.admin-chip.as-button {
    font: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.73rem;
    cursor: pointer;
}

.admin-chip.as-button:hover {
    background: var(--accent);
    color: #FFFFFF;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    font-size: 0.69rem;
    font-weight: 680;
    letter-spacing: 0.02em;
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
}

.badge-active {
    color: var(--accent-ink);
    background: var(--accent-soft);
    border-color: var(--accent-edge);
}

.badge-expired {
    color: #8A5A00;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
}

.badge-removed {
    color: #B4232A;
    background: rgba(179, 38, 30, 0.09);
    border-color: rgba(179, 38, 30, 0.3);
}

/* ── Warnings and empty states ─────────────────────────────────────────── */

.admin-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    font-size: 0.84rem;
    line-height: 1.55;
    color: #7A4F00;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 12px;
}

.admin-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1.9rem 1.25rem;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-soft);
    border: 1px dashed var(--border);
    border-radius: 14px;
}

.admin-empty i {
    font-size: 1.5rem;
    color: var(--accent);
}

.admin-empty p {
    margin: 0;
    font-size: 0.85rem;
}

/* ── Tables ────────────────────────────────────────────────────────────── */

.admin-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #FFFFFF;
    -webkit-overflow-scrolling: touch;
}

.admin-table {
    width: 100%;
    min-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.855rem;
}

.admin-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.68rem 0.85rem;
    text-align: left;
    font-size: 0.655rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-muted);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.admin-table td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    min-width: 0;
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-table tbody tr:hover td {
    background: rgba(14, 159, 110, 0.045);
}

/* Per-table minimums keep every column meaningful; the CONTAINER scrolls on
   narrow screens, never the page. */
.admin-price {
    margin-left: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent-ink);
}

.admin-table-users { min-width: 720px; }
.admin-table-subscriptions { min-width: 720px; }
.admin-table-files { min-width: 560px; }
.admin-table-invoices { min-width: 740px; }
.admin-table-overrides { min-width: 700px; }
.admin-table-blocks { min-width: 820px; }
.admin-table-audit { min-width: 860px; }

.admin-cell-id code {
    display: inline-block;
    max-width: 17ch;
    padding: 0.08rem 0.34rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.765rem;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
}

.admin-cell-email {
    min-width: 13ch;
    overflow-wrap: anywhere;
}

/* Identifiers (addresses, IPs, UIDs) are monospaced but must still wrap, or a
   long value would widen the column past the container on a phone. */
.admin-cell-mono,
.admin-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.admin-cell-date {
    white-space: nowrap;
    font-size: 0.79rem;
    color: var(--text-muted);
}

.admin-cell-reason,
.admin-cell-detail {
    max-width: 26rem;
    overflow-wrap: anywhere;
}

.admin-cell-detail {
    font-size: 0.79rem;
    color: var(--text-muted);
}

.admin-user-cell {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.admin-user-name {
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.admin-avatar-sm {
    position: relative;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid var(--accent-edge);
    background: linear-gradient(150deg, rgba(14, 159, 110, 0.18) 0%, rgba(14, 159, 110, 0.05) 100%);
}

.admin-avatar-initials {
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.03em;
    color: var(--accent-ink);
}

.admin-avatar-sm img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* ── Danger actions ────────────────────────────────────────────────────── */

.btn-danger {
    background: linear-gradient(180deg, #B3261E 0%, #8E1D17 100%);
    background-image: linear-gradient(180deg, #B3261E 0%, #8E1D17 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(179, 38, 30, 0.22);
}

.btn-danger:hover {
    background: linear-gradient(180deg, #8E1D17 0%, #731510 100%);
    background-image: linear-gradient(180deg, #8E1D17 0%, #731510 100%);
    color: #FFFFFF;
    transform: translateY(-1px);
}

.btn-danger-ghost {
    color: var(--danger);
    border-color: rgba(179, 38, 30, 0.28);
}

.btn-danger-ghost:hover {
    color: var(--danger);
    background: rgba(179, 38, 30, 0.06);
    border-color: rgba(179, 38, 30, 0.4);
}

/* ── Chat modal sizing ─────────────────────────────────────────────────── */

.modal-chat-container {
    display: flex;
    flex-direction: column;
    width: min(760px, 94vw);
    max-height: 82vh;
}

.modal-chat-container .chat-messages {
    flex: 1;
    overflow-y: auto;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    .admin-shell {
        gap: 0.85rem;
    }

    .admin-sidebar {
        flex-basis: 220px;
        width: 220px;
    }
}

@media (max-width: 1000px) {
    .admin-shell {
        flex-direction: column;
        /* stretch, not flex-start: in a column flex container the cross axis is
           horizontal, so flex-start let the main column size to its widest
           table and push the page past the viewport. */
        align-items: stretch;
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .admin-main {
        width: 100%;
    }

    .admin-sidebar {
        position: static;
        flex: 0 0 auto;
        width: 100%;
        max-height: none;
        padding: 0.8rem;
        border-radius: 16px;
    }

    .admin-brand {
        padding: 0.2rem 0.35rem 0.65rem;
    }

    .admin-sidebar .sidebar-user {
        padding: 0.6rem 0.65rem;
    }

    /* Ten destinations stay reachable in one swipeable row instead of a drawer
       that would need JavaScript and hide focus. */
    .admin-sidebar .sidebar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.3rem;
        overflow-x: auto;
        padding-bottom: 0.3rem;
        scrollbar-width: thin;
    }

    .admin-sidebar .sidebar-nav::-webkit-scrollbar {
        height: 4px;
    }

    .admin-sidebar .sidebar-nav::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 999px;
    }

    .sidebar-group-label {
        display: none;
    }

    .admin-menu-item {
        width: auto;
        flex: 0 0 auto;
        padding: 0.45rem 0.65rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .admin-menu-item span {
        overflow: visible;
        text-overflow: clip;
    }

    .admin-menu-item.active {
        box-shadow: none;
    }

    .admin-sidebar-footer {
        flex-direction: row;
        margin-top: 0.55rem;
        padding-top: 0.55rem;
    }

    .admin-topbar-actions {
        display: none;
    }

    .admin-grid-two {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-result-row .admin-callout-label {
        flex-basis: 100%;
    }
}

/* Tablets have room for two rows of destinations, so wrap instead of making the
   operator swipe a single row to find the last three sections. Below 640px the
   single swipeable row above is kept. */
@media (min-width: 641px) and (max-width: 1000px) {
    .admin-sidebar .sidebar-nav {
        flex-wrap: wrap;
        overflow-x: visible;
        padding-bottom: 0;
    }
}

@media (max-width: 640px) {
    .admin-shell {
        padding: 0.5rem;
    }

    .admin-section {
        padding: 1rem 0.85rem;
        border-radius: 16px;
    }

    .admin-topbar {
        padding: 0.15rem 0.15rem 0.2rem;
    }

    .analytics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .stat-card {
        padding: 0.8rem 0.85rem;
    }

    .stat-card .stat-label {
        font-size: 0.66rem;
        letter-spacing: 0.07em;
    }

    .stat-icon {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
        margin-bottom: 0.3rem;
    }

    .admin-policy {
        flex-wrap: wrap;
        padding: 0.9rem;
    }

    .admin-policy-body {
        flex: 1 1 12rem;
    }

    .admin-policy-retry {
        align-self: flex-start;
    }

    .admin-form {
        padding: 0.85rem;
    }

    /* One column on phones: two 140px columns made "Maximum submissions" and
       the period select cramped and truncated the selected window. */
    .admin-field-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-toolbar > .btn,
    .admin-toolbar > select {
        flex: 1 1 auto;
    }

    .admin-toolbar input[type="search"],
    .admin-toolbar input[type="text"],
    .admin-toolbar input[type="email"] {
        flex-basis: 100%;
    }

    .admin-user-name {
        max-width: 12ch;
    }
}

@media (max-width: 380px) {
    .admin-brand-text small {
        display: none;
    }

    .admin-menu-item {
        padding: 0.4rem 0.55rem;
        font-size: 0.78rem;
    }

    .admin-section {
        padding: 0.85rem 0.7rem;
    }

    .stat-card .stat-value {
        font-size: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-section.active {
        animation: none;
    }

    .ph-spin {
        animation: none;
    }

    .admin-menu-item,
    .stat-card,
    .admin-policy,
    .btn {
        transition: none;
    }
}