/* ══════════════════════════════════════════════════════════
   DigitalGTP — Shared Glass Design System
   Included by all pages. Works alongside or without Tailwind.
   ══════════════════════════════════════════════════════════ */

/* ── CSS Variables ── */
:root { --transition: 0.35s cubic-bezier(.4,0,.2,1); }

[data-theme="dark"] {
    --bg-base:        #06060f;
    --bg-glow-1:      rgba(99,102,241,0.18);
    --bg-glow-2:      rgba(14,165,233,0.12);
    --glass-bg:       rgba(255,255,255,0.055);
    --glass-bg-2:     rgba(255,255,255,0.04);
    --glass-border:   rgba(255,255,255,0.1);
    --glass-border-2: rgba(255,255,255,0.06);
    --glass-hover:    rgba(255,255,255,0.08);
    --blur:           blur(24px) saturate(180%);
    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;
    --accent:         #6366f1;
    --accent-glow:    rgba(99,102,241,0.35);
    --accent-2:       #0ea5e9;
    --input-bg:       rgba(255,255,255,0.06);
    --input-border:   rgba(255,255,255,0.12);
    --input-focus:    rgba(99,102,241,0.5);
    --dot-pending:    rgba(255,255,255,0.15);
    --shadow-card:    0 8px 32px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.07) inset;
    --shadow-glow:    0 0 60px rgba(99,102,241,0.15);
    --btn-primary:    linear-gradient(135deg,#6366f1,#4f46e5);
    --btn-primary-hover: linear-gradient(135deg,#818cf8,#6366f1);
    --toggle-bg:      rgba(255,255,255,0.1);
    --nav-bg:         rgba(6,6,15,0.85);
    --score-ring:     rgba(99,102,241,0.2);
    --overlay-bg:     rgba(6,6,15,0.78);
    --page-bg:        #0d0d1a;
    /* Status colors — vibrant on dark */
    --color-good:         #4ade80;
    --color-warn:         #fbbf24;
    --color-bad:          #f87171;
    --chip-good-bg:       rgba(74,222,128,0.12);
    --chip-good-border:   rgba(74,222,128,0.28);
    --chip-warn-bg:       rgba(251,191,36,0.12);
    --chip-warn-border:   rgba(251,191,36,0.28);
    --chip-bad-bg:        rgba(248,113,113,0.12);
    --chip-bad-border:    rgba(248,113,113,0.28);
}

[data-theme="light"] {
    --bg-base:        #f0f4ff;
    --bg-glow-1:      rgba(99,102,241,0.1);
    --bg-glow-2:      rgba(14,165,233,0.08);
    --glass-bg:       rgba(255,255,255,0.72);
    --glass-bg-2:     rgba(255,255,255,0.5);
    --glass-border:   rgba(0,0,0,0.08);
    --glass-border-2: rgba(0,0,0,0.05);
    --glass-hover:    rgba(255,255,255,0.9);
    --blur:           blur(24px) saturate(200%);
    --text-primary:   #0f172a;
    --text-secondary: #334155;
    --text-muted:     #64748b;
    --accent:         #4f46e5;
    --accent-glow:    rgba(79,70,229,0.25);
    --accent-2:       #0284c7;
    --input-bg:       rgba(255,255,255,0.9);
    --input-border:   rgba(0,0,0,0.1);
    --input-focus:    rgba(79,70,229,0.4);
    --dot-pending:    rgba(0,0,0,0.12);
    --shadow-card:    0 8px 32px rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.8) inset;
    --shadow-glow:    0 0 60px rgba(99,102,241,0.08);
    --btn-primary:    linear-gradient(135deg,#6366f1,#4f46e5);
    --btn-primary-hover: linear-gradient(135deg,#818cf8,#6366f1);
    --toggle-bg:      rgba(0,0,0,0.08);
    --nav-bg:         rgba(240,244,255,0.88);
    --score-ring:     rgba(99,102,241,0.15);
    --overlay-bg:     rgba(240,244,255,0.88);
    --page-bg:        #f0f4ff;
    /* Status colors — darker/richer on light for contrast */
    --color-good:         #15803d;
    --color-warn:         #b45309;
    --color-bad:          #dc2626;
    --chip-good-bg:       rgba(21,128,61,0.08);
    --chip-good-border:   rgba(21,128,61,0.25);
    --chip-warn-bg:       rgba(180,83,9,0.08);
    --chip-warn-border:   rgba(180,83,9,0.25);
    --chip-bad-bg:        rgba(220,38,38,0.08);
    --chip-bad-border:    rgba(220,38,38,0.25);
}

/* ── Base ── */
html, body {
    transition: background-color var(--transition), color var(--transition);
}
body {
    background-color: var(--bg-base);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── NAV ── */
.g-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
    padding: 0 24px;
    transition: background var(--transition), border-color var(--transition);
}
.g-nav-inner {
    max-width: 1200px; margin: 0 auto; height: 62px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.g-nav-logo {
    display: inline-flex; align-items: center; gap: 9px;
    text-decoration: none; flex-shrink: 0;
}
.g-nav-logo-img {
    width: 28px; height: 28px; flex-shrink: 0; display: block;
}
.g-nav-logo-text {
    font-size: 17px; font-weight: 800; letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
@media(max-width:480px) {
    .g-nav-logo-text { display: none; }
    .g-nav-logo-img  { width: 32px; height: 32px; }
}
.g-nav-spacer { flex: 1; }

/* Nav dropdowns */
.g-nav-links { display: flex; align-items: center; gap: 2px; }
.g-nav-dropdown { position: relative; }
.g-nav-dropdown-btn {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--text-secondary); background: none; border: none; cursor: pointer;
    padding: 8px 12px; border-radius: 10px; transition: all 0.2s;
    font-family: 'Inter', system-ui, sans-serif;
}
.g-nav-dropdown-btn:hover,
.g-nav-dropdown:hover .g-nav-dropdown-btn {
    color: var(--text-primary);
    background: var(--glass-bg);
}
.g-nav-chevron { font-size: 8px; transition: transform 0.2s; opacity: 0.6; }
.g-nav-dropdown:hover .g-nav-chevron { transform: rotate(180deg); }

/* Invisible bridge so mouse can travel from button to menu */
.g-nav-dropdown-menu {
    display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    width: 230px; z-index: 300; padding-top: 8px;
}
.g-nav-dropdown-menu::before {
    content: ''; display: block; height: 8px; /* fills the padding-top gap so hover doesn't break */
}
.g-nav-dropdown:hover .g-nav-dropdown-menu,
.g-nav-dropdown.dd-open .g-nav-dropdown-menu { display: block; }
.g-nav-dropdown-inner {
    background: var(--nav-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    padding: 8px;
}
.g-nav-dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px;
    font-size: 13px; color: var(--text-secondary); text-decoration: none;
    transition: all 0.15s; font-family: 'Inter', system-ui, sans-serif;
}
.g-nav-dropdown-item:hover { background: var(--glass-hover); color: var(--text-primary); }
.g-nav-dropdown-item i { width: 16px; text-align: center; }
.g-nav-dropdown-divider { height: 1px; background: var(--glass-border-2); margin: 4px 0; }

/* Nav actions */
.g-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.g-nav-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: 100px; padding: 6px 14px;
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    text-decoration: none; transition: all 0.2s;
    font-family: 'Inter', system-ui, sans-serif;
}
.g-nav-pill:hover { background: var(--glass-hover); color: var(--text-primary); }
.g-nav-link-plain {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-decoration: none; transition: color 0.2s;
}
.g-nav-link-plain:hover { color: var(--text-secondary); }

/* Theme toggle */
.g-theme-toggle {
    display: flex; align-items: center; gap: 4px;
    background: var(--toggle-bg); border: 1px solid var(--glass-border);
    border-radius: 100px; padding: 3px; cursor: pointer; transition: all var(--transition);
}
.g-theme-toggle:hover { background: var(--glass-hover); }
.g-toggle-btn {
    width: 28px; height: 28px; border-radius: 100px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--text-muted); cursor: pointer;
    transition: all var(--transition); border: none; background: transparent;
}
.g-toggle-btn.active {
    background: var(--accent); color: white;
    box-shadow: 0 2px 8px var(--accent-glow);
}

/* ── Glass Cards ── */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.glass:hover { background: var(--glass-hover); border-color: rgba(99,102,241,0.2); }
.glass-sm {
    background: var(--glass-bg-2);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-border-2);
    border-radius: 14px;
    transition: background var(--transition), border-color var(--transition);
}

/* ── Dots ── */
.g-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; transition: all 0.3s; display: inline-block; }
.g-dot-good    { background: #4ade80; box-shadow: 0 0 6px #4ade8066; }
.g-dot-warn    { background: #facc15; box-shadow: 0 0 6px #facc1566; }
.g-dot-bad     { background: #f87171; box-shadow: 0 0 6px #f8717166; }
.g-dot-pending { background: var(--dot-pending); }

/* ── Status text utilities (theme-aware) ── */
.text-good { color: var(--color-good); }
.text-warn { color: var(--color-warn); }
.text-bad  { color: var(--color-bad);  }

/* ── Status chip utilities (theme-aware) ── */
.chip-good { background: var(--chip-good-bg); color: var(--color-good); border: 1px solid var(--chip-good-border); }
.chip-warn { background: var(--chip-warn-bg); color: var(--color-warn); border: 1px solid var(--chip-warn-border); }
.chip-bad  { background: var(--chip-bad-bg);  color: var(--color-bad);  border: 1px solid var(--chip-bad-border); }

/* Legacy dot classes (keep compatible with index.php) */
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; transition: all 0.3s; }
.dot-good    { background: #4ade80; box-shadow: 0 0 6px #4ade8066; }
.dot-warn    { background: #facc15; box-shadow: 0 0 6px #facc1566; }
.dot-bad     { background: #f87171; box-shadow: 0 0 6px #f8717166; }
.dot-pending { background: var(--dot-pending); }

/* ── Buttons ── */
.g-btn {
    background: var(--btn-primary); border: none; border-radius: 14px;
    padding: 13px 24px; font-size: 14px; font-weight: 700; color: white;
    cursor: pointer; letter-spacing: 0.02em; white-space: nowrap;
    transition: all 0.2s; box-shadow: 0 4px 20px var(--accent-glow);
    font-family: 'Inter', system-ui, sans-serif; text-decoration: none;
    display: inline-flex; align-items: center; gap: 7px;
}
.g-btn:hover { background: var(--btn-primary-hover); transform: translateY(-1px); box-shadow: 0 8px 28px var(--accent-glow); }
.g-btn:active { transform: translateY(0); }

.g-btn-outline {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--glass-border); background: var(--glass-bg);
    backdrop-filter: blur(24px); border-radius: 14px; padding: 12px 22px;
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    cursor: pointer; text-decoration: none; transition: all 0.2s;
    font-family: 'Inter', system-ui, sans-serif;
}
.g-btn-outline:hover { background: var(--glass-hover); border-color: var(--accent); }

/* ── Inputs ── */
.g-input {
    background: var(--input-bg); border: 1px solid var(--input-border);
    border-radius: 14px; padding: 13px 18px; font-size: 14px;
    font-family: 'Inter', system-ui, sans-serif; font-weight: 500;
    color: var(--text-primary); outline: none; transition: all var(--transition);
    width: 100%;
}
.g-input::placeholder { color: var(--text-muted); font-weight: 400; }
.g-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--input-focus); background: var(--glass-hover); }

/* ── Text utilities ── */
.g-text-primary   { color: var(--text-primary); transition: color var(--transition); }
.g-text-secondary { color: var(--text-secondary); transition: color var(--transition); }
.g-text-muted     { color: var(--text-muted); transition: color var(--transition); }
.g-text-accent    { color: var(--accent); }
.g-gradient-text {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Spin ── */
@keyframes g-spin { to { transform: rotate(360deg); } }
.g-spin { animation: g-spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; display: inline-block; }

/* ── Background blobs (optional, add .g-bg-canvas to a fixed div) ── */
.g-bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.g-bg-blob { position: absolute; border-radius: 50%; filter: blur(80px); transition: opacity var(--transition); }
.g-bg-blob-1 { width: 600px; height: 600px; top: -200px; right: -100px; background: var(--bg-glow-1); animation: blobFloat 12s ease-in-out infinite; }
.g-bg-blob-2 { width: 500px; height: 500px; bottom: -100px; left: -150px; background: var(--bg-glow-2); animation: blobFloat 15s ease-in-out infinite reverse; }
.g-bg-blob-3 { width: 300px; height: 300px; top: 50%; left: 40%; background: rgba(236,72,153,0.06); animation: blobFloat 18s ease-in-out infinite; }
@keyframes blobFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(20px,-30px) scale(1.05); }
    66%      { transform: translate(-15px,20px) scale(0.95); }
}
@keyframes pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.3); }
}

/* ── Container ── */
.g-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.g-page-wrap { padding-top: 80px; min-height: 100vh; position: relative; z-index: 1; }

/* ── Section title ── */
.g-section-title {
    font-size: 26px; font-weight: 800; letter-spacing: -0.03em;
    color: var(--text-primary); text-align: center; margin-bottom: 32px;
    transition: color var(--transition);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; }

/* ── Theme toggle JS (persist active state) ── */
.g-theme-script-init { display: none; }

/* ── Shared page hero ── */
.g-hero { padding: 80px 24px 48px; text-align: center; }
.g-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: 100px; padding: 6px 16px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 20px;
    backdrop-filter: var(--blur);
}
.g-hero-title {
    font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; letter-spacing: -0.04em;
    line-height: 1.05; margin-bottom: 16px; color: var(--text-primary); transition: color var(--transition);
}
.g-hero-sub {
    font-size: 16px; color: var(--text-secondary); max-width: 600px;
    margin: 0 auto; line-height: 1.65; transition: color var(--transition);
}

/* ── Shared footer ── */
.g-footer { border-top: 1px solid var(--glass-border); padding: 40px 24px; text-align: center; margin-top: 60px; transition: border-color var(--transition); }
.g-footer-quote { color: var(--accent); font-weight: 700; font-style: italic; margin-bottom: 14px; font-size: 13px; }
.g-footer-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
.g-footer-links a { font-size: 12px; color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.g-footer-links a:hover { color: var(--text-secondary); }
.g-footer-copy { font-size: 10px; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; font-style: italic; transition: color var(--transition); }

/* ── Page card section label ── */
.g-section-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}

/* ── Prose / guide content ── */
.g-prose { font-size: 13px; line-height: 1.75; color: var(--text-secondary); }
.g-prose p { margin-bottom: 12px; transition: color var(--transition); }
.g-prose strong { color: var(--text-primary); font-weight: 600; }
.g-prose ul { list-style: disc; padding-left: 20px; margin-bottom: 12px; }
.g-prose li { margin-bottom: 6px; }
.g-prose ol { list-style: decimal; padding-left: 20px; margin-bottom: 12px; }
.g-prose a { color: var(--accent); text-decoration: none; }
.g-prose a:hover { text-decoration: underline; }
code { background: var(--glass-bg-2); border: 1px solid var(--glass-border-2); border-radius: 5px; padding: 1px 6px; font-size: 0.88em; color: #4ade80; font-family: 'JetBrains Mono', 'Courier New', monospace; }
pre { background: var(--glass-bg-2); border: 1px solid var(--glass-border-2); border-radius: 12px; padding: 16px 18px; overflow-x: auto; margin: 10px 0; }
pre code { background: none; border: none; padding: 0; font-size: 11px; color: #4ade80; }

/* ── Guide accordion ── */
.g-accordion { display: flex; flex-direction: column; gap: 8px; }
details.g-details { background: var(--glass-bg-2); border: 1px solid var(--glass-border-2); border-radius: 14px; overflow: hidden; transition: background var(--transition); }
details.g-details[open] { background: var(--glass-bg); border-color: var(--glass-border); }
details.g-details summary { padding: 15px 18px; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; color: var(--text-secondary); font-weight: 600; font-size: 13px; transition: color 0.2s; user-select: none; }
details.g-details summary::-webkit-details-marker { display: none; }
details.g-details summary:hover { color: var(--text-primary); }
details.g-details[open] summary { color: var(--text-primary); }
.g-details-chevron { font-size: 9px; color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; }
details.g-details[open] .g-details-chevron { transform: rotate(180deg); }
.g-details-body { padding: 0 18px 18px; border-top: 1px solid var(--glass-border-2); }
.g-details-body ol { list-style: decimal; padding-left: 20px; font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.g-details-body ol li { margin-bottom: 8px; }
.g-details-body p { font-size: 13px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 8px; padding-top: 12px; }
.g-details-body ul { list-style: disc; padding-left: 20px; font-size: 13px; color: var(--text-secondary); }
.g-tip { font-size: 11px; color: #facc15; margin-top: 8px; display: flex; align-items: flex-start; gap: 6px; }
.g-tip-good { color: #4ade80; }

/* ── Priority list items ── */
.g-priority { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; margin-bottom: 6px; font-size: 12px; color: var(--text-secondary); }
.g-priority-badge { font-size: 10px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }

/* ── Hamburger ── */
.g-hamburger {
    display: none; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 36px; height: 36px; background: var(--glass-bg);
    border: 1px solid var(--glass-border); border-radius: 10px; cursor: pointer;
    padding: 0; transition: all 0.2s; flex-shrink: 0;
}
.g-hamburger:hover { background: var(--glass-hover); }
.g-ham-line {
    display: block; width: 18px; height: 2px; background: var(--text-secondary);
    border-radius: 2px; transition: all 0.3s cubic-bezier(.4,0,.2,1); transform-origin: center;
}
.g-hamburger.is-open .g-ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.g-hamburger.is-open .g-ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.g-hamburger.is-open .g-ham-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile menu ── */
.g-mobile-menu {
    display: none; position: fixed; top: 62px; left: 0; right: 0; bottom: 0;
    background: var(--nav-bg); backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid var(--glass-border);
    z-index: 999; overflow-y: auto; padding: 16px;
    flex-direction: column; gap: 4px;
    transform: translateY(-8px); opacity: 0; transition: all 0.25s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.g-mobile-menu.is-open {
    display: flex; transform: translateY(0); opacity: 1; pointer-events: all;
}
.g-mob-link {
    display: flex; align-items: center; gap: 12px; padding: 13px 16px;
    border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--text-secondary);
    text-decoration: none; transition: all 0.15s; font-family: 'Inter', system-ui, sans-serif;
}
.g-mob-link:hover { background: var(--glass-hover); color: var(--text-primary); }
.g-mob-link-accent { color: var(--accent); font-weight: 700; }
.g-mob-link-accent:hover { background: rgba(99,102,241,0.1); color: var(--accent); }
.g-mob-divider { height: 1px; background: var(--glass-border); margin: 8px 0; }

@media(max-width:767px) {
    .g-hamburger { display: flex; }

    /* Nav: hide links that duplicate the mobile menu */
    .g-nav-link-plain { display: none; }
    /* Shrink nav pill to icon-only on mobile to save space */
    .g-nav-pill span { display: none; }
    .g-nav-pill { padding: 7px 10px; }
    /* No spacer needed on mobile */
    .g-nav-spacer { display: none; }
}

/* ═══════════════════════════════════════════
   GLOBAL MOBILE POLISH — phones
   ═══════════════════════════════════════════ */
@media(max-width:480px) {
    /* Tighter edge padding on phones */
    .g-container { padding: 0 14px; }

    /* Page top spacing (nav = 62px, add 12px breathing room) */
    .g-page-wrap { padding-top: 74px; }

    /* Hero sections */
    .g-hero { padding: 44px 14px 28px; }
    .g-hero-sub { font-size: 14px; }
    .g-section-title { font-size: 20px; margin-bottom: 20px; }

    /* Cards */
    .glass { border-radius: 16px; }
    .glass-sm { border-radius: 12px; }

    /* Inputs — 16px prevents iOS auto-zoom */
    .g-input { font-size: 16px; padding: 14px 16px; }

    /* Buttons */
    .g-btn { padding: 14px 18px; font-size: 13px; }
}