/* CSS CUSTOM PROPERTIES */
:root {
/* Ba Gua Trigram Spectrum (CANONICAL) */
--tri-earth: #0FBD8C;
--tri-mountain: #4C72B0;
--tri-water: #3A95B9;
--tri-wind: #78C9D0;
--tri-thunder: #F2B40E;
--tri-fire: #FF5E68;
--tri-lake: #7D5EFF;
--tri-heaven: #834D9B;

/* RGB variants */
--tri-earth-rgb: 15, 189, 140;
--tri-mountain-rgb: 76, 114, 176;
--tri-water-rgb: 58, 149, 185;
--tri-wind-rgb: 120, 201, 208;
--tri-thunder-rgb: 242, 180, 14;
--tri-fire-rgb: 255, 94, 104;
--tri-lake-rgb: 125, 94, 255;
--tri-heaven-rgb: 131, 77, 155;

/* Surfaces */
--bg: #0a0a0b;
--bg-left: #07070a;
--bg-right: #0c0c0e;
--surface: #131316;
--surface-raised: #1a1a1e;
--surface-inset: #0a0a0b;

/* Borders */
--border: #2a2a2e;
--border-subtle: #1e1e22;
--border-emphasis: #3a3a3f;

/* Text */
--text: #e4e4e7;
--text-dim: #a1a1aa;
--text-muted: #71717a;
--text-faint: #5a5a62;

/* Accent */
--accent: #78C9D0;
--accent-rgb: 120, 201, 208;

/* Store Accent - Warm Amber/Copper (distinct from Ba Gua but harmonious) */
--store-accent: #D4A574;
--store-accent-rgb: 212, 165, 116;
--store-accent-dark: #B8956A;
--store-glow: rgba(212, 165, 116, 0.3);

/* Store Accent - Rich Amber Gold */
--store-accent: #E5A50A;
--store-accent-rgb: 229, 165, 10;
--store-accent-glow: rgba(229, 165, 10, 0.3);

/* Social Brand Colors */
--brand-fb: #1877F2;
--brand-ig: #E4405F;
--brand-th: #E0E0E8;
--brand-yt: #FF0000;
--brand-tt: #00F2EA;
--brand-pi: #E60023;
--brand-tu: #7C93AD;

/* Status */
--success: #0FBD8C;
--warning: #F2B40E;
--error: #FF5E68;
--info: #3A95B9;

/* Layout */
--max-container: 1600px;
--max-content: 620px;

/* Animation */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 200ms;
--duration-normal: 300ms;
--duration-slow: 500ms;

/* Z-Index */
--z-modal-backdrop: 300;
--z-modal: 400;
--z-cookie-banner: 600;
--z-skip-link: 700;
}

/* Light Theme */
[data-theme="light"] {
--bg: #f5f5f7;
--bg-left: #ffffff;
--bg-right: #fafafa;
--surface: #ffffff;
--surface-raised: #ffffff;
--surface-inset: #f0f0f2;
--border: #e0e0e4;
--border-subtle: #eaeaee;
--text: #1a1a1e;
--text-dim: #4a4a52;
--text-muted: #6a6a72;
--text-faint: #8a8a92;
--accent: #0891b2;
--accent-rgb: 8, 145, 178;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--bg); }
body {
color: var(--text);
font-family: 'JetBrains Mono', monospace;
font-size: 18px;
line-height: 1.5;
display: flex;
flex-direction: column;
align-items: center;
-webkit-font-smoothing: antialiased;
}

/* Accessibility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.skip-link {
position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
background: var(--accent); color: var(--bg); padding: 12px 24px;
font-size: 15px; font-weight: 600; text-decoration: none; z-index: var(--z-skip-link);
transition: top var(--duration-fast);
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Typography */
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; color: var(--text); }
a { color: var(--accent); text-decoration: none; transition: color var(--duration-fast); }
a:hover { color: var(--text); }

/* Animations */
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes trigram-glow {
0%, 100% { box-shadow: 0 0 6px currentColor; opacity: 0.8; }
50% { box-shadow: 0 0 10px currentColor, 0 0 16px currentColor; opacity: 1; }
}
@keyframes icon-bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes stagger-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════════════════════════════════════════════════════════════════════════
 ASCII LOGO REVEAL ANIMATIONS - Soft looping then settles into color
 ═══════════════════════════════════════════════════════════════════════════ */

.hero-banner__ascii span,
.mobile-header__ascii span {
display: inline;
transition: all 0.8s ease;
}

/* Animation 1: Fade from Grayscale - soft breathing */
.reveal-fade { animation: reveal-fade 8s ease-in-out 12; }
@keyframes reveal-fade {
0%, 100% { filter: grayscale(0) brightness(1); }
50% { filter: grayscale(0.6) brightness(0.85); }
}

/* Animation 2: Sequential Left to Right - gentle wave */
.reveal-sequential span { animation: reveal-letter 6s ease-in-out 8; }
.reveal-sequential .l1  { animation-delay: 0s; }
.reveal-sequential .l2  { animation-delay: 0.2s; }
.reveal-sequential .l3  { animation-delay: 0.4s; }
.reveal-sequential .l4  { animation-delay: 0.6s; }
.reveal-sequential .l5  { animation-delay: 0.8s; }
.reveal-sequential .l6  { animation-delay: 1.0s; }
.reveal-sequential .l7  { animation-delay: 1.2s; }
.reveal-sequential .l8  { animation-delay: 1.4s; }
.reveal-sequential .l9  { animation-delay: 1.6s; }
.reveal-sequential .l10 { animation-delay: 1.8s; }
.reveal-sequential .l11 { animation-delay: 2.0s; }
.reveal-sequential .l12 { animation-delay: 2.2s; }
.reveal-sequential .l13 { animation-delay: 2.4s; }
.reveal-sequential .l14 { animation-delay: 2.6s; }
@keyframes reveal-letter {
0%, 100% { filter: grayscale(0) brightness(1); }
50% { filter: grayscale(0.5) brightness(1.2); }
}

/* Animation 3: Wave Sweep - gentle undulation */
.reveal-wave span { animation: reveal-wave-letter 5s ease-in-out 10; }
.reveal-wave .l1  { animation-delay: 0s; }
.reveal-wave .l2  { animation-delay: 0.25s; }
.reveal-wave .l3  { animation-delay: 0.5s; }
.reveal-wave .l4  { animation-delay: 0.75s; }
.reveal-wave .l5  { animation-delay: 1.0s; }
.reveal-wave .l6  { animation-delay: 1.25s; }
.reveal-wave .l7  { animation-delay: 1.5s; }
.reveal-wave .l8  { animation-delay: 1.75s; }
.reveal-wave .l9  { animation-delay: 2.0s; }
.reveal-wave .l10 { animation-delay: 2.25s; }
.reveal-wave .l11 { animation-delay: 2.5s; }
.reveal-wave .l12 { animation-delay: 2.75s; }
.reveal-wave .l13 { animation-delay: 3.0s; }
.reveal-wave .l14 { animation-delay: 3.25s; }
@keyframes reveal-wave-letter {
0%, 100% { filter: grayscale(0) brightness(1); transform: translateY(0); }
50% { filter: grayscale(0.3) brightness(1.15); transform: translateY(-2px); }
}

/* Animation 4: Flash Burst - soft pulse */
.reveal-flash { animation: reveal-flash 6s ease-in-out 10; }
@keyframes reveal-flash {
0%, 100% { filter: grayscale(0) brightness(1); }
45% { filter: grayscale(0.4) brightness(0.9); }
50% { filter: grayscale(0) brightness(1.4); }
55% { filter: grayscale(0) brightness(1.1); }
}

/* Animation 5: Glitch Reveal - subtle digital shimmer */
.reveal-glitch { animation: reveal-glitch 4s ease-in-out 15; }
.reveal-glitch span { animation: glitch-letter 4s ease-in-out 15; }
@keyframes reveal-glitch {
0%, 100% { filter: grayscale(0) brightness(1); transform: translateX(0); }
48% { filter: grayscale(0.3) brightness(1.1); transform: translateX(0); }
50% { filter: grayscale(0.1) brightness(1.2); transform: translateX(1px); }
52% { filter: grayscale(0.2) brightness(1.05); transform: translateX(-1px); }
54% { filter: grayscale(0) brightness(1); transform: translateX(0); }
}
@keyframes glitch-letter {
0%, 47%, 55%, 100% { opacity: 1; }
50% { opacity: 0.85; }
52% { opacity: 0.95; }
}

/* Animation 6: Bloom from Center - gentle expansion */
.reveal-bloom span { animation: reveal-bloom-letter 5s ease-in-out 10; }
.reveal-bloom .l7  { animation-delay: 0s; }
.reveal-bloom .l8  { animation-delay: 0s; }
.reveal-bloom .l6  { animation-delay: 0.3s; }
.reveal-bloom .l9  { animation-delay: 0.3s; }
.reveal-bloom .l5  { animation-delay: 0.6s; }
.reveal-bloom .l10 { animation-delay: 0.6s; }
.reveal-bloom .l4  { animation-delay: 0.9s; }
.reveal-bloom .l11 { animation-delay: 0.9s; }
.reveal-bloom .l3  { animation-delay: 1.2s; }
.reveal-bloom .l12 { animation-delay: 1.2s; }
.reveal-bloom .l2  { animation-delay: 1.5s; }
.reveal-bloom .l13 { animation-delay: 1.5s; }
.reveal-bloom .l1  { animation-delay: 1.8s; }
.reveal-bloom .l14 { animation-delay: 1.8s; }
@keyframes reveal-bloom-letter {
0%, 100% { filter: grayscale(0) brightness(1); transform: scale(1); }
50% { filter: grayscale(0.2) brightness(1.2); transform: scale(1.01); }
}

/* Animation 7: CRT Power On - soft scan lines */
.reveal-crt { animation: reveal-poweron 6s ease-in-out 10; }
@keyframes reveal-poweron {
0%, 100% { filter: grayscale(0) brightness(1); }
25% { filter: grayscale(0.3) brightness(0.9); }
50% { filter: grayscale(0.1) brightness(1.15); }
75% { filter: grayscale(0.2) brightness(1.05); }
}

/* Animation 8: Matrix Rain - gentle cascade */
.reveal-matrix span { animation: reveal-matrix-letter 4s ease-in-out 12; }
.reveal-matrix .l1  { animation-delay: 0.7s; }
.reveal-matrix .l2  { animation-delay: 0.3s; }
.reveal-matrix .l3  { animation-delay: 0.9s; }
.reveal-matrix .l4  { animation-delay: 0.5s; }
.reveal-matrix .l5  { animation-delay: 1.1s; }
.reveal-matrix .l6  { animation-delay: 0.2s; }
.reveal-matrix .l7  { animation-delay: 0.8s; }
.reveal-matrix .l8  { animation-delay: 0.4s; }
.reveal-matrix .l9  { animation-delay: 1.0s; }
.reveal-matrix .l10 { animation-delay: 0.6s; }
.reveal-matrix .l11 { animation-delay: 0.1s; }
.reveal-matrix .l12 { animation-delay: 0.85s; }
.reveal-matrix .l13 { animation-delay: 0.35s; }
.reveal-matrix .l14 { animation-delay: 0.95s; }
@keyframes reveal-matrix-letter {
0%, 100% { filter: grayscale(0) brightness(1); transform: translateY(0); }
50% { filter: grayscale(0.4) brightness(1.3); transform: translateY(-1px); }
}

/* Animation 9: Pulse Ignite - gentle sequential glow */
.reveal-ignite span { animation: reveal-ignite-letter 6s ease-in-out 10; }
.reveal-ignite .l1  { animation-delay: 0s; }
.reveal-ignite .l2  { animation-delay: 0.15s; }
.reveal-ignite .l3  { animation-delay: 0.3s; }
.reveal-ignite .l4  { animation-delay: 0.45s; }
.reveal-ignite .l5  { animation-delay: 0.6s; }
.reveal-ignite .l6  { animation-delay: 0.75s; }
.reveal-ignite .l7  { animation-delay: 0.9s; }
.reveal-ignite .l8  { animation-delay: 1.05s; }
.reveal-ignite .l9  { animation-delay: 1.2s; }
.reveal-ignite .l10 { animation-delay: 1.35s; }
.reveal-ignite .l11 { animation-delay: 1.5s; }
.reveal-ignite .l12 { animation-delay: 1.65s; }
.reveal-ignite .l13 { animation-delay: 1.8s; }
.reveal-ignite .l14 { animation-delay: 1.95s; }
@keyframes reveal-ignite-letter {
0%, 100% { filter: grayscale(0) brightness(1); }
50% { filter: grayscale(0) brightness(1.4); }
}

/* Unified Hero Banner - spans full width above panels */
.hero-banner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 32px;
background: var(--surface);
border-bottom: 1px solid var(--border);
width: 100%;
max-width: var(--max-container);
gap: 24px;
}
.hero-banner__content {
display: flex;
align-items: center;
gap: 20px;
flex: 1;
}
.hero-banner__ascii {
font-family: 'IBM Plex Mono', monospace;
font-size: 6px;
line-height: 1.1;
letter-spacing: 0;
margin: 0;
white-space: pre;
}
.hero-banner__tagline {
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 2px;
text-transform: uppercase;
margin-left: 16px;
align-self: center;
white-space: nowrap;
}
.hero-banner__matrix {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 2px;
width: 200px;
height: 36px;
padding: 4px;
background: var(--surface-inset);
border: 1px solid var(--border);
flex-shrink: 0;
}
.hero-banner__matrix .nav-cell {
width: 100%;
height: 100%;
}
.hero-banner__right {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.hero-banner__toggle {
width: 36px;
height: 36px;
background: var(--surface-inset);
border: 1px solid var(--border);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--text-muted);
transition: all var(--duration-fast);
flex-shrink: 0;
}
.hero-banner__toggle:hover {
border-color: var(--accent);
color: var(--accent);
}

/* Unified Footer Banner */
.unified-footer {
display: flex;
align-items: center;
justify-content: center;
padding: 14px 32px;
background: var(--surface);
border-top: 1px solid var(--border);
width: 100%;
max-width: var(--max-container);
}
.unified-footer__content {
display: flex;
align-items: center;
gap: 14px;
font-size: 13px;
color: var(--text-muted);
}
.unified-footer__content a {
color: var(--text-dim);
text-decoration: none;
transition: color var(--duration-fast);
}
.unified-footer__content a:hover {
color: var(--accent);
}
.unified-footer__divider {
color: var(--border);
}
.unified-footer__socials {
display: flex;
align-items: center;
gap: 10px;
}
.unified-footer__socials a {
font-size: 14px;
}

/* Split Layout */
.split-container {
display: grid;
grid-template-columns: 1fr 1fr;
height: calc(100vh - 108px);
width: 100%;
max-width: var(--max-container);
margin: 0 auto;
transition: grid-template-columns var(--duration-slow) var(--ease-out-quart);
}
.split-container.expanded-left { grid-template-columns: 0.7fr 1.3fr; }
.split-container.expanded-right { grid-template-columns: 1.3fr 0.7fr; }

/* Left Panel (Nav) - Now displays on RIGHT */
.panel-left {
background: var(--bg-left);
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
order: 2;
}
.slider-viewport { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; width: 100%; }

/* Slide System */
.slide {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
display: flex; flex-direction: column; align-items: center;
opacity: 0; pointer-events: none; transform: translateX(100%);
transition: opacity var(--duration-normal) var(--ease-out-quart), transform var(--duration-slow) var(--ease-out-expo);
overflow: hidden;
}
.slide.active { opacity: 1; pointer-events: auto; transform: translateX(0); }
.slide.exiting { opacity: 0; transform: translateX(-50%); }

.slide-inner {
width: 100%; max-width: var(--max-content); height: 100%;
overflow-y: auto; padding: 40px 24px;
display: flex; flex-direction: column;
}

.slide.active .link-section { animation: stagger-in var(--duration-slow) var(--ease-out-expo) backwards; }
.slide.active .link-section:nth-child(1) { animation-delay: 0.05s; }
.slide.active .link-section:nth-child(2) { animation-delay: 0.1s; }
.slide.active .link-section:nth-child(3) { animation-delay: 0.15s; }
.slide.active .link-section:nth-child(4) { animation-delay: 0.2s; }

/* Navigation Components */
.slide-back {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 24px; margin-bottom: 24px;
background: var(--surface); border: 1px solid var(--border);
color: var(--text-dim); font-family: inherit; font-size: 18px;
cursor: pointer; transition: all var(--duration-fast); align-self: flex-start;
}
.slide-back:hover { border-color: var(--accent); color: var(--accent); transform: translateX(-4px); }

.slide-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.slide-nav .slide-back { margin-bottom: 0; }

.slide-home {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 18px; background: transparent; border: 1px solid var(--border-subtle);
color: var(--text-muted); font-family: inherit; font-size: 18px;
cursor: pointer; transition: all var(--duration-fast);
}
.slide-home:hover { border-color: var(--tri-earth); color: var(--tri-earth); }

.slide-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-left: auto; }
.breadcrumb-item { background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: inherit; cursor: pointer; padding: 4px 8px; }
.breadcrumb-item:hover { color: var(--accent); }
.breadcrumb-item.is-current { color: var(--text-dim); cursor: default; }
.breadcrumb-sep { color: var(--text-faint); font-size: 12px; }

.slide-header { margin-bottom: 28px; }
.slide-title { font-size: 34px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.slide-subtitle { font-size: 18px; color: var(--text-muted); line-height: 1.6; }

/* Depth Indicator */
.slide[data-depth="1"] { --depth-color: var(--accent); }
.slide[data-depth="2"] { --depth-color: var(--tri-water); }
.slide[data-depth="3"] { --depth-color: var(--tri-lake); }

/* Link Sections & Buttons */
.link-section { margin-bottom: 28px; width: 100%; }
.link-section:last-child { margin-bottom: 0; }
.link-section-label {
font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;
text-align: center; margin-bottom: 12px; padding-bottom: 8px;
border-bottom: 1px solid var(--border);
color: var(--section-accent, var(--text-muted));
}

.link-section--shop { --section-accent: var(--tri-lake); --section-accent-rgb: var(--tri-lake-rgb); }
.link-section--services { --section-accent: var(--tri-wind); --section-accent-rgb: var(--tri-wind-rgb); }
.link-section--connect { --section-accent: var(--tri-heaven); --section-accent-rgb: var(--tri-heaven-rgb); }
.link-section--content { --section-accent: var(--tri-water); --section-accent-rgb: var(--tri-water-rgb); }

.link-btn {
display: flex; align-items: center; gap: 14px;
width: 100%; padding: 12px 16px; margin-bottom: 6px;
background: var(--surface); border: 1px solid var(--border);
border-left: 3px solid var(--btn-accent, var(--accent));
color: var(--text); text-decoration: none; font-family: 'JetBrains Mono', monospace;
font-size: 18px; text-align: left; cursor: pointer;
transition: all var(--duration-fast); position: relative; overflow: hidden;
}

.link-btn::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 60px;
background: linear-gradient(90deg, rgba(var(--btn-accent-rgb, var(--accent-rgb)), 0.06), transparent);
pointer-events: none; transition: width var(--duration-fast);
}

.link-btn:hover {
border-color: var(--btn-accent, var(--accent));
background: linear-gradient(90deg, rgba(var(--btn-accent-rgb, var(--accent-rgb)), 0.1), transparent 60%);
transform: translateX(4px);
box-shadow: 0 4px 16px rgba(var(--btn-accent-rgb, var(--accent-rgb)), 0.12);
}
.link-btn:hover::before { width: 100px; }
.link-btn:active { transform: translateX(4px) scale(0.99); }

.link-section--shop .link-btn { --btn-accent: var(--tri-lake); --btn-accent-rgb: var(--tri-lake-rgb); }
.link-section--services .link-btn { --btn-accent: var(--tri-wind); --btn-accent-rgb: var(--tri-wind-rgb); }
.link-section--connect .link-btn { --btn-accent: var(--tri-heaven); --btn-accent-rgb: var(--tri-heaven-rgb); }
.link-section--content .link-btn { --btn-accent: var(--tri-water); --btn-accent-rgb: var(--tri-water-rgb); }

.link-btn-icon {
width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
background: var(--surface-inset); border: 1px solid var(--border); border-radius: 4px;
font-size: 19px; flex-shrink: 0; color: var(--btn-accent, var(--accent));
transition: all var(--duration-fast);
}
.link-btn:hover .link-btn-icon { animation: icon-bounce var(--duration-normal) var(--ease-spring); box-shadow: 0 0 12px rgba(var(--btn-accent-rgb, var(--accent-rgb)), 0.3); }

.link-btn-content { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0; overflow: hidden; }
.link-btn-title { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 14px; color: var(--text); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; flex-shrink: 0; }
.link-btn-desc { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-btn-desc::before { content: ' — '; color: var(--border); }
.link-btn-arrow { font-size: 18px; color: var(--text-muted); opacity: 0; transition: opacity var(--duration-fast), transform var(--duration-fast); flex-shrink: 0; }
.link-btn:hover .link-btn-arrow { opacity: 1; transform: translateX(4px); }

.link-btn-badge {
font-size: 13px; padding: 4px 10px;
background: var(--surface-inset); border: 1px solid var(--border);
color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;
font-weight: 600; flex-shrink: 0;
}
.badge-new { background: rgba(var(--tri-earth-rgb), 0.15); border-color: var(--tri-earth); color: var(--tri-earth); }
.badge-hot { background: rgba(var(--tri-fire-rgb), 0.15); border-color: var(--tri-fire); color: var(--tri-fire); }
.badge-featured { background: rgba(var(--tri-lake-rgb), 0.15); border-color: var(--tri-lake); color: var(--tri-lake); }

/* ═══════════════════════════════════════════════════════════════════════════
 STORE SECTION - Distinctive Styling
 ═══════════════════════════════════════════════════════════════════════════ */

/* Store Section in Main Nav */
.link-section--store {
--section-accent: var(--tri-earth);
--section-accent-rgb: var(--tri-earth-rgb);
}

.link-section--store .link-section-label {
color: var(--tri-earth);
border-color: var(--tri-earth);
}

/* Store Hero Button - Stand out from everything else */
.link-btn--store-hero {
background: linear-gradient(135deg, 
  rgba(var(--tri-earth-rgb), 0.15) 0%, 
  rgba(var(--tri-earth-rgb), 0.08) 50%,
  rgba(var(--tri-earth-rgb), 0.03) 100%
);
border: 2px solid var(--tri-earth);
border-left-width: 4px;
padding: 12px 14px;
position: relative;
overflow: hidden;
}

.link-btn--store-hero::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 100px;
background: linear-gradient(90deg, rgba(var(--tri-earth-rgb), 0.12), transparent);
pointer-events: none;
}

.link-btn--store-hero::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 60px; height: 60px;
background: radial-gradient(circle at top right, rgba(var(--store-accent-rgb), 0.15), transparent 70%);
pointer-events: none;
}

.link-btn--store-hero:hover {
border-color: var(--store-accent);
background: linear-gradient(135deg, 
  rgba(var(--store-accent-rgb), 0.25) 0%, 
  rgba(var(--store-accent-rgb), 0.12) 50%,
  rgba(var(--store-accent-rgb), 0.05) 100%
);
box-shadow: 
  0 0 30px var(--store-glow),
  0 8px 32px rgba(0,0,0,0.3),
  inset 0 1px 0 rgba(255,255,255,0.05);
transform: translateX(6px);
}

.link-btn--store-hero .link-btn-icon {
background: linear-gradient(135deg, rgba(var(--tri-earth-rgb), 0.3), rgba(var(--tri-earth-rgb), 0.1));
border-color: var(--tri-earth);
color: var(--tri-earth);
width: 43px;
height: 43px;
font-size: 22px;
}

.link-btn--store-hero .link-btn-title {
color: var(--tri-earth);
font-size: 16px;
}

.link-btn--store-hero .link-btn-desc {
color: var(--text-dim);
}

/* Gumroad Link Button */
.link-btn--gumroad {
--btn-accent: #ff90e8;
--btn-accent-rgb: 255, 144, 232;
background: linear-gradient(90deg, rgba(255, 144, 232, 0.08), transparent 60%);
border-left: 3px solid #ff90e8;
}
.link-btn--gumroad .link-btn-title {
color: #ff90e8;
}
.link-btn--gumroad .link-btn-desc {
color: var(--text-dim);
}
.link-btn--gumroad:hover {
border-color: #ff90e8;
background: linear-gradient(90deg, rgba(255, 144, 232, 0.15), transparent 60%);
box-shadow: 0 4px 16px rgba(255, 144, 232, 0.2);
}
.link-btn--gumroad .link-btn-icon {
color: #ff90e8;
}
.link-btn--gumroad:hover .link-btn-icon {
box-shadow: 0 0 12px rgba(255, 144, 232, 0.4);
}

/* Store Quick Purchase Hero */
.store-hero {
margin-bottom: 32px;
padding: 20px;
background: linear-gradient(135deg, 
  rgba(var(--store-accent-rgb), 0.08) 0%,
  rgba(var(--store-accent-rgb), 0.02) 100%
);
border: 1px solid rgba(var(--store-accent-rgb), 0.3);
border-radius: 2px;
}

.store-hero__label {
font-size: 11px;
font-weight: 600;
color: var(--store-accent);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}

.store-hero__label::before,
.store-hero__label::after {
content: '◆';
font-size: 6px;
opacity: 0.6;
}

.store-hero__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}

/* Quick Purchase Card */
.quick-purchase {
display: flex;
flex-direction: column;
padding: 14px;
background: var(--surface);
border: 1px solid var(--border);
text-decoration: none;
transition: all var(--duration-fast);
position: relative;
overflow: hidden;
}

.quick-purchase::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--qp-color, var(--store-accent));
}

.quick-purchase:hover {
border-color: var(--qp-color, var(--store-accent));
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 20px rgba(var(--store-accent-rgb), 0.15);
}

.quick-purchase__icon {
font-size: 24px;
margin-bottom: 10px;
filter: drop-shadow(0 0 8px var(--qp-color, var(--store-accent)));
}

.quick-purchase__title {
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
}

.quick-purchase__price {
font-size: 15px;
font-weight: 700;
color: var(--qp-color, var(--store-accent));
margin-bottom: 8px;
}

.quick-purchase__cta {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
padding-top: 8px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}

.quick-purchase__cta::after {
content: '→';
transition: transform var(--duration-fast);
}

.quick-purchase:hover .quick-purchase__cta::after {
transform: translateX(4px);
}

/* Store Catalogue Section */
.store-catalogue {
margin-bottom: 28px;
}

.store-catalogue__header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}

.store-catalogue__icon {
font-size: 20px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(var(--cat-color-rgb, var(--store-accent-rgb)), 0.15), transparent);
border: 1px solid rgba(var(--cat-color-rgb, var(--store-accent-rgb)), 0.3);
color: var(--cat-color, var(--store-accent));
}

.store-catalogue__title {
font-size: 15px;
font-weight: 600;
color: var(--text);
}

.store-catalogue__subtitle {
font-size: 12px;
color: var(--text-muted);
margin-left: auto;
}

.store-catalogue__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px;
}

/* Product Card (within catalogues) */
.product-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--cat-color, var(--store-accent));
text-decoration: none;
transition: all var(--duration-fast);
}

.product-card:hover {
border-color: var(--cat-color, var(--store-accent));
transform: translateX(4px);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.product-card__icon {
font-size: 16px;
color: var(--cat-color, var(--store-accent));
flex-shrink: 0;
}

.product-card__info {
flex: 1;
min-width: 0;
}

.product-card__title {
font-size: 15px;
font-weight: 500;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.product-card__price {
font-size: 13px;
color: var(--cat-color, var(--store-accent));
font-weight: 600;
}

.product-card__arrow {
font-size: 15px;
color: var(--text-muted);
opacity: 0;
transition: opacity var(--duration-fast), transform var(--duration-fast);
}

.product-card:hover .product-card__arrow {
opacity: 1;
transform: translateX(3px);
}

/* Catalogue Color Variants */
.store-catalogue--spirituality { --cat-color: var(--tri-heaven); --cat-color-rgb: var(--tri-heaven-rgb); }
.store-catalogue--alignment { --cat-color: var(--tri-earth); --cat-color-rgb: var(--tri-earth-rgb); }
.store-catalogue--divination { --cat-color: var(--tri-lake); --cat-color-rgb: var(--tri-lake-rgb); }
.store-catalogue--zodiac { --cat-color: var(--tri-thunder); --cat-color-rgb: var(--tri-thunder-rgb); }
.store-catalogue--masculine { --cat-color: var(--tri-fire); --cat-color-rgb: var(--tri-fire-rgb); }
.store-catalogue--feminine { --cat-color: var(--tri-wind); --cat-color-rgb: var(--tri-wind-rgb); }
.store-catalogue--wealth { --cat-color: #C9A227; --cat-color-rgb: 201, 162, 39; }
.store-catalogue--shadow { --cat-color: var(--tri-mountain); --cat-color-rgb: var(--tri-mountain-rgb); }
.store-catalogue--sacred-math { --cat-color: var(--tri-water); --cat-color-rgb: var(--tri-water-rgb); }
.store-catalogue--mathematics { --cat-color: var(--tri-water); --cat-color-rgb: var(--tri-water-rgb); }
.store-catalogue--ribbon { --cat-color: var(--tri-thunder); --cat-color-rgb: var(--tri-thunder-rgb); }

/* Store Catalogue Button */
.store-cat-btn {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 16px 18px;
margin-bottom: 10px;
background: var(--surface);
border: 1px solid var(--border);
border-left: 4px solid var(--cat-color, var(--store-accent));
color: var(--text);
text-decoration: none;
font-family: inherit;
font-size: 15px;
text-align: left;
cursor: pointer;
transition: all var(--duration-fast);
position: relative;
}

.store-cat-btn::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 60px;
background: linear-gradient(90deg, rgba(var(--cat-color-rgb, var(--store-accent-rgb)), 0.08), transparent);
pointer-events: none;
transition: width var(--duration-fast);
}

.store-cat-btn:hover {
border-color: var(--cat-color, var(--store-accent));
background: linear-gradient(90deg, rgba(var(--cat-color-rgb, var(--store-accent-rgb)), 0.1), transparent 60%);
transform: translateX(5px);
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.store-cat-btn:hover::before {
width: 100px;
}

.store-cat-btn__icon {
font-size: 20px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(var(--cat-color-rgb, var(--store-accent-rgb)), 0.15), transparent);
border: 1px solid rgba(var(--cat-color-rgb, var(--store-accent-rgb)), 0.3);
color: var(--cat-color, var(--store-accent));
flex-shrink: 0;
transition: all var(--duration-fast);
}

.store-cat-btn:hover .store-cat-btn__icon {
box-shadow: 0 0 16px rgba(var(--cat-color-rgb, var(--store-accent-rgb)), 0.4);
border-color: var(--cat-color, var(--store-accent));
}

.store-cat-btn__content {
flex: 1;
min-width: 0;
}

.store-cat-btn__title {
display: block;
font-weight: 600;
font-size: 15px;
color: var(--text);
margin-bottom: 3px;
}

.store-cat-btn__desc {
display: block;
font-size: 13px;
color: var(--text-muted);
line-height: 1.4;
}

.store-cat-btn__arrow {
font-size: 16px;
color: var(--text-muted);
opacity: 0;
transition: opacity var(--duration-fast), transform var(--duration-fast);
flex-shrink: 0;
}

.store-cat-btn:hover .store-cat-btn__arrow {
opacity: 1;
transform: translateX(4px);
}

/* Store External Link */
.store-external-link {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 20px;
margin-top: 20px;
background: transparent;
border: 1px dashed var(--border);
color: var(--text-dim);
text-decoration: none;
font-size: 15px;
transition: all var(--duration-fast);
}

.store-external-link:hover {
border-color: var(--store-accent);
border-style: solid;
color: var(--store-accent);
background: rgba(var(--store-accent-rgb), 0.05);
}

.store-external-link__icon {
font-size: 15px;
}

.link-btn--cta {
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--tri-lake-rgb), 0.05));
border-color: var(--accent); border-left-width: 4px;
}
.link-btn--cta .link-btn-title { color: var(--accent); }

/* Store Button - Special highlight treatment */
.link-btn--store {
background: linear-gradient(135deg, rgba(var(--store-accent-rgb), 0.12), rgba(var(--store-accent-rgb), 0.04));
border: 1px solid var(--store-accent);
border-left: 4px solid var(--store-accent);
position: relative;
overflow: hidden;
}

.link-btn--store::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 80px;
background: linear-gradient(90deg, rgba(var(--store-accent-rgb), 0.15), transparent);
pointer-events: none;
}

.link-btn--store::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 60px; height: 100%;
background: linear-gradient(90deg, transparent, rgba(var(--store-accent-rgb), 0.08));
pointer-events: none;
}

.link-btn--store .link-btn-icon {
background: linear-gradient(135deg, rgba(var(--store-accent-rgb), 0.25), rgba(var(--store-accent-rgb), 0.1));
border-color: var(--store-accent);
color: var(--store-accent);
}

.link-btn--store .link-btn-title {
color: var(--store-accent);
font-weight: 700;
}

.link-btn--store:hover {
background: linear-gradient(135deg, rgba(var(--store-accent-rgb), 0.2), rgba(var(--store-accent-rgb), 0.08));
border-color: var(--store-accent);
box-shadow: 0 4px 24px var(--store-accent-glow), 0 0 40px rgba(var(--store-accent-rgb), 0.1);
transform: translateX(4px);
}

.link-btn--store:hover .link-btn-icon {
box-shadow: 0 0 16px var(--store-accent-glow);
}

/* Store Section Label */
.link-section--store-main {
--section-accent: var(--store-accent);
--section-accent-rgb: var(--store-accent-rgb);
}

.link-section--store-main .link-section-label {
color: var(--store-accent);
border-left-color: var(--store-accent);
font-weight: 600;
}

/* Right Panel (Brand) - Now displays on LEFT */
.panel-right {
background: var(--bg-right); position: relative; overflow: hidden;
display: flex; justify-content: center;
order: 1;
}
.panel-right::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.03) 0%, transparent 60%);
pointer-events: none;
}
.panel-right--brand {
display: flex; flex-direction: column; justify-content: flex-start;
align-items: center; padding: 40px 30px; overflow-y: auto;
}
.brand-panel-inner {
display: flex; flex-direction: column; align-items: center;
width: 100%; max-width: 600px;
transition: transform var(--duration-slow) var(--ease-out-quart);
}

/* ASCII Logo */
.brand-ascii { 
font-size: 4px; 
line-height: 1.1; 
letter-spacing: 0; 
white-space: pre; 
margin-bottom: 20px; 
overflow-x: auto;
}
.brand-ascii--large { 
font-size: 4.5px; 
text-align: center; 
margin-bottom: 16px; 
transform: scale(0.85);
transform-origin: center top;
max-width: 100%;
}

/* Tagline */
.brand-tagline { font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 3px; margin-bottom: 16px; text-transform: uppercase; }
.brand-tagline--large { font-size: 11px; letter-spacing: 4px; }

/* Trigram Cell Matrix - Hero Banner, 3x8 square cells */
.trigram-matrix {
display: grid;
grid-template-columns: repeat(8, 28px);
grid-template-rows: repeat(3, 28px);
gap: 3px;
width: fit-content;
margin: 20px auto 20px auto;
padding: 6px;
background: var(--surface-inset);
border: 1px solid var(--border);
}
.trigram-cell {
width: 28px;
height: 28px;
background: var(--surface);
border: 1px solid var(--border);
transition: background 0.08s ease-out, box-shadow 0.08s ease-out, border-color 0.08s ease-out;
}
.trigram-cell.is-lit {
background: var(--cell-color);
border-color: var(--cell-color);
box-shadow: 0 0 12px var(--cell-color), 0 0 24px var(--cell-color), inset 0 0 6px rgba(255,255,255,0.4);
}
/* Column colors - each column is a trigram */
.trigram-cell[data-col="0"] { --cell-color: var(--tri-earth); }
.trigram-cell[data-col="1"] { --cell-color: var(--tri-mountain); }
.trigram-cell[data-col="2"] { --cell-color: var(--tri-water); }
.trigram-cell[data-col="3"] { --cell-color: var(--tri-wind); }
.trigram-cell[data-col="4"] { --cell-color: var(--tri-thunder); }
.trigram-cell[data-col="5"] { --cell-color: var(--tri-fire); }
.trigram-cell[data-col="6"] { --cell-color: var(--tri-lake); }
.trigram-cell[data-col="7"] { --cell-color: var(--tri-heaven); }

/* Legacy Trigram Bar (hidden) */
.trigram-bar { display: none; }

/* Nav Hero Matrix - Large secondary hero for right panel */
.nav-hero-matrix {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 3px;
width: 100%;
max-width: 500px;
height: 72px;
margin: 0 auto 24px auto;
padding: 6px;
background: var(--surface-inset);
border: 1px solid var(--border);
}
.nav-cell {
background: var(--surface);
border: 1px solid var(--border-subtle);
transition: all 0.5s ease-in-out;
}
.nav-cell.is-lit {
background: var(--cell-color);
border-color: var(--cell-color);
opacity: 0.85;
box-shadow: 0 0 4px var(--cell-color), 0 0 8px var(--cell-color);
}
/* Column colors */
.nav-cell[data-col="0"] { --cell-color: var(--tri-earth); }
.nav-cell[data-col="1"] { --cell-color: var(--tri-mountain); }
.nav-cell[data-col="2"] { --cell-color: var(--tri-water); }
.nav-cell[data-col="3"] { --cell-color: var(--tri-wind); }
.nav-cell[data-col="4"] { --cell-color: var(--tri-thunder); }
.nav-cell[data-col="5"] { --cell-color: var(--tri-fire); }
.nav-cell[data-col="6"] { --cell-color: var(--tri-lake); }
.nav-cell[data-col="7"] { --cell-color: var(--tri-heaven); }

/* Grounded Section */
.grounded-section { width: 100%; margin-top: 20px; }
.grounded-section:first-child { margin-top: 0; }
.grounded-label {
font-size: 13px; font-weight: 600; color: var(--tri-wind);
text-transform: uppercase; letter-spacing: 2px; text-align: center;
margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.grounded-grid { display: flex; flex-direction: column; gap: 6px; }

.grounded-card {
display: flex; flex-direction: row; align-items: center; text-align: left;
padding: 12px 16px; gap: 14px;
background: var(--surface); border: 1px solid var(--border);
border-left: 3px solid var(--grounded-accent, var(--border));
text-decoration: none; transition: all var(--duration-fast); cursor: pointer;
font-family: 'JetBrains Mono', monospace;
}
.grounded-card:hover { transform: translateX(4px); border-color: var(--grounded-accent, var(--accent)); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }

.grounded-icon {
font-size: 19px; width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: var(--surface-inset); border: 1px solid var(--border); border-radius: 4px;
color: var(--grounded-accent, var(--text-dim)); transition: all var(--duration-fast); flex-shrink: 0;
}
.grounded-card:hover .grounded-icon { border-color: var(--grounded-accent, var(--accent)); box-shadow: 0 0 12px var(--grounded-accent, var(--accent)); }

.grounded-text { flex: 1; display: flex; align-items: baseline; gap: 0; overflow: hidden; }
.grounded-title { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; flex-shrink: 0; }
.grounded-desc { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grounded-desc::before { content: ' — '; color: var(--border); }

.grounded-card--productivity { --grounded-accent: var(--tri-heaven); }
.grounded-card--health { --grounded-accent: var(--tri-fire); }
.grounded-card--finance { --grounded-accent: var(--tri-thunder); }
.grounded-card--skills { --grounded-accent: var(--tri-wind); }
.grounded-card--home { --grounded-accent: var(--tri-earth); }
.grounded-card--career { --grounded-accent: var(--tri-lake); }

/* Section Divider */
.section-divider { display: flex; align-items: center; gap: 16px; width: 100%; margin: 28px 0 12px 0; }
.section-divider__line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }
.section-divider__label { font-size: 11px; color: var(--tri-lake); text-transform: uppercase; letter-spacing: 2px; white-space: nowrap; }

/* SILASTRO Badge */
.silastro-badge { margin-top: 16px; }
.silastro-badge a {
display: block; text-decoration: none; padding: 14px 20px;
background: var(--surface); border: 1px solid var(--border);
transition: all var(--duration-normal); text-align: center;
}
.silastro-badge a:hover { border-color: var(--tri-lake); box-shadow: 0 0 20px rgba(var(--tri-lake-rgb), 0.2); }
.silastro-badge__logo { font-size: 4px; line-height: 1; letter-spacing: 0; white-space: pre; color: var(--tri-lake); margin-bottom: 6px; }
.silastro-badge--large .silastro-badge__logo { font-size: 5px; }
.silastro-badge__tagline { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; }
.silastro-badge--large .silastro-badge__tagline { font-size: 12px; letter-spacing: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
 STORE DOMAIN BADGES - SILASTRO-style store sections
 ═══════════════════════════════════════════════════════════════════════════ */
.store-domains {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 480px;
margin: 0 auto;
}

.store-domain-badge {
--domain-color: var(--store-accent);
--domain-rgb: var(--store-accent-rgb);
background: var(--surface);
border: 1px solid var(--border);
padding: 20px;
cursor: pointer;
transition: all var(--duration-normal);
text-align: center;
}
.store-domain-badge:hover {
border-color: var(--domain-color);
box-shadow: 0 0 25px rgba(var(--domain-rgb), 0.2);
transform: translateY(-2px);
}
.store-domain-badge__ascii {
font-size: 5px;
line-height: 1;
letter-spacing: 0;
white-space: pre;
color: var(--domain-color);
margin-bottom: 10px;
}
.store-domain-badge__tagline {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 2px;
}
.store-domain-badge__preview {
font-size: 12px;
color: var(--text-dim);
margin-top: 8px;
}

/* Domain color variants */
.store-domain-badge--spirituality { --domain-color: var(--tri-heaven); --domain-rgb: 255, 215, 0; }
.store-domain-badge--alignment { --domain-color: var(--tri-earth); --domain-rgb: 121, 85, 72; }
.store-domain-badge--divination { --domain-color: var(--tri-lake); --domain-rgb: 125, 94, 255; }
.store-domain-badge--sacredmath { --domain-color: var(--tri-water); --domain-rgb: 58, 149, 185; }
.store-domain-badge--ribbon { --domain-color: var(--tri-thunder); --domain-rgb: 255, 106, 0; }
.store-domain-badge--shadow { --domain-color: var(--tri-mountain); --domain-rgb: 96, 125, 139; }
.store-domain-badge--masculine { --domain-color: var(--tri-fire); --domain-rgb: 229, 57, 53; }
.store-domain-badge--feminine { --domain-color: var(--tri-wind); --domain-rgb: 46, 204, 113; }
.store-domain-badge--wealth { --domain-color: #FFD700; --domain-rgb: 255, 215, 0; }

/* Store Product Grid - 2 columns of badge-like items */
.store-product-grid {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 20px;
}

/* Enhanced Product Preview Card */
.product-preview {
--product-color: var(--domain-color, var(--store-accent));
background: var(--surface);
border: 1px solid var(--border);
overflow: hidden;
transition: all var(--duration-normal);
}
.product-preview:hover {
border-color: var(--product-color);
box-shadow: 0 4px 24px rgba(var(--domain-rgb), 0.15);
}
.product-preview__media {
height: 120px;
background: var(--surface-inset);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.product-preview__media-icon {
font-size: 48px;
opacity: 0.6;
color: var(--product-color);
}
.product-preview__format {
position: absolute;
top: 8px;
right: 8px;
background: var(--bg);
border: 1px solid var(--border);
padding: 4px 8px;
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
}
.product-preview__body {
padding: 16px;
}
.product-preview__title {
font-size: 16px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.product-preview__desc {
font-size: 13px;
color: var(--text-dim);
line-height: 1.5;
margin-bottom: 12px;
}
.product-preview__meta {
display: flex;
gap: 16px;
font-size: 11px;
color: var(--text-muted);
margin-bottom: 14px;
flex-wrap: wrap;
}
.product-preview__meta-item {
display: flex;
align-items: center;
gap: 4px;
}
.product-preview__meta-icon {
opacity: 0.6;
}
.product-preview__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.product-preview__price {
font-size: 20px;
font-weight: 700;
color: var(--product-color);
}
.product-preview__price-note {
font-size: 11px;
color: var(--text-muted);
font-weight: 400;
}
.product-preview__buy {
padding: 10px 20px;
background: var(--product-color);
border: none;
color: var(--bg);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all var(--duration-fast);
text-transform: uppercase;
letter-spacing: 1px;
}
.product-preview__buy:hover {
filter: brightness(1.1);
transform: translateY(-1px);
}

/* Legacy store-product-badge (keep for backwards compat) */
.store-product-badge {
--product-color: var(--domain-color, var(--store-accent));
background: var(--surface-inset);
border: 1px solid var(--border);
border-left: 3px solid var(--product-color);
padding: 16px;
cursor: pointer;
transition: all var(--duration-normal);
text-align: left;
display: flex;
flex-direction: column;
gap: 6px;
}
.store-product-badge:hover {
border-color: var(--product-color);
background: var(--surface);
transform: translateX(4px);
box-shadow: 0 0 20px rgba(var(--domain-rgb, var(--store-accent-rgb)), 0.15);
}
.store-product-badge__icon {
font-size: 20px;
margin-bottom: 4px;
}
.store-product-badge__title {
font-size: 15px;
font-weight: 600;
color: var(--text);
letter-spacing: 0.5px;
}
.store-product-badge__desc {
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
}
.store-product-badge__price {
font-size: 15px;
font-weight: 700;
color: var(--product-color);
margin-top: auto;
}

/* Product Detail Modal */
.product-modal {
max-width: 500px;
}
.product-modal__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.product-modal__title {
font-size: 18px;
font-weight: 700;
color: var(--text);
}
.product-modal__cart-btn {
background: var(--store-accent);
color: var(--bg);
border: none;
padding: 10px 16px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all var(--duration-fast);
display: flex;
align-items: center;
gap: 6px;
}
.product-modal__cart-btn:hover {
background: var(--text);
transform: scale(1.02);
}
.product-modal__price {
font-size: 24px;
font-weight: 700;
color: var(--store-accent);
margin-bottom: 16px;
}
.product-modal__desc {
font-size: 15px;
color: var(--text-dim);
line-height: 1.6;
margin-bottom: 20px;
}
.product-modal__features {
list-style: none;
padding: 0;
margin: 0;
}
.product-modal__features li {
font-size: 13px;
color: var(--text-muted);
padding: 8px 0;
border-bottom: 1px solid var(--border-subtle);
display: flex;
align-items: center;
gap: 8px;
}
.product-modal__features li::before {
content: '✓';
color: var(--tri-wind);
font-weight: bold;
}

/* Social Links */
.brand-socials { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.social-link {
display: flex; align-items: center; justify-content: center;
padding: 6px 8px; border: 1px solid var(--border);
background: var(--surface); text-decoration: none; transition: all var(--duration-fast);
}
.social-link pre { font-size: 4px; line-height: 1; letter-spacing: 0; margin: 0; color: var(--text-muted); transition: all var(--duration-fast); }
.social-link--fb { --brand-color: var(--brand-fb); }
.social-link--ig { --brand-color: var(--brand-ig); }
.social-link--th { --brand-color: #e4e4e7; }
.social-link--yt { --brand-color: var(--brand-yt); }
.social-link--tt { --brand-color: var(--brand-tt); }
.social-link--pi { --brand-color: var(--brand-pi); }
.social-link:hover { transform: translateY(-2px); border-color: var(--brand-color); box-shadow: 0 0 12px var(--brand-color); }
.social-link:hover pre { color: var(--brand-color); text-shadow: 0 0 8px var(--brand-color); }

/* Panel Footer */
.panel-footer {
padding: 16px 20px; border-top: 1px solid var(--border);
background: var(--surface); display: flex; flex-direction: column;
align-items: center; gap: 12px;
}
.legal-footer { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; justify-content: center; }
.legal-footer a { color: var(--text-dim); text-decoration: none; transition: color var(--duration-fast); }
.legal-footer a:hover { color: var(--accent); }
.legal-footer .footer-socials { display: flex; gap: 8px; align-items: center; }
.legal-footer .footer-social { 
width: 22px; height: 22px; 
display: flex; align-items: center; justify-content: center;
color: var(--text-muted); 
font-size: 14px;
transition: color var(--duration-fast), transform var(--duration-fast);
}
.legal-footer .footer-social:hover { color: var(--accent); transform: translateY(-1px); }
.footer-divider { opacity: 0.4; }

/* General footer-social (works in brand panel and unified footer) */
.footer-social {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
color: var(--text-muted);
font-size: 26px;
text-decoration: none;
transition: color var(--duration-fast), transform var(--duration-fast);
}
.footer-social:hover { color: var(--accent); transform: translateY(-2px); }

/* Forms */
.form { width: 100%; max-width: 480px; }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 16px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.form-input, .form-select, .form-textarea {
width: 100%; padding: 14px 16px; background: var(--surface);
border: 1px solid var(--border); color: var(--text);
font-family: inherit; font-size: 18px;
transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-faint); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); }
.form-input.is-error, .form-select.is-error, .form-textarea.is-error { border-color: var(--error); }
.form-textarea { min-height: 120px; resize: vertical; }
.form-hint { font-size: 13px; color: var(--text-faint); margin-top: 6px; }
.form-error { display: block; font-size: 13px; color: var(--error); margin-top: 6px; min-height: 16px; }
.form-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form-submit {
width: 100%; padding: 14px 24px;
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--tri-lake-rgb), 0.1));
border: 1px solid var(--accent); color: var(--accent);
font-family: inherit; font-size: 15px; font-weight: 600;
cursor: pointer; transition: all var(--duration-fast); position: relative;
}
.form-submit:hover:not(:disabled) { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--tri-lake-rgb), 0.15)); box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.2); }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.form-submit.is-loading .form-submit-text { opacity: 0; }
.form-submit.is-loading .form-submit-spinner { display: block; }
.form-submit-spinner { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
.form-status { margin-top: 16px; padding: 12px 16px; font-size: 15px; text-align: center; display: none; }
.form-status.is-success { display: block; background: rgba(var(--tri-earth-rgb), 0.1); border: 1px solid var(--tri-earth); color: var(--tri-earth); }
.form-status.is-error { display: block; background: rgba(var(--tri-fire-rgb), 0.1); border: 1px solid var(--tri-fire); color: var(--tri-fire); }

/* Newsletter Drawer - Soft close mechanics */
.newsletter-drawer-wrapper {
overflow: hidden;
}
.newsletter-drawer-trigger {
width: 100%;
}
.newsletter-drawer-trigger .link-btn-arrow {
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.newsletter-drawer-trigger.is-open .link-btn-arrow {
transform: rotate(90deg);
opacity: 1;
}
.newsletter-drawer {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: 
  max-height 0.5s cubic-bezier(0.32, 0, 0.67, 0),
  opacity 0.3s ease-out,
  margin 0.5s cubic-bezier(0.32, 0, 0.67, 0);
margin-top: 0;
}
.newsletter-drawer.is-open {
max-height: 200px;
opacity: 1;
margin-top: 8px;
transition: 
  max-height 0.6s cubic-bezier(0.33, 1, 0.68, 1),
  opacity 0.4s ease-in 0.1s,
  margin 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.newsletter-drawer-inner {
padding: 16px;
background: var(--surface-inset);
border: 1px solid var(--border);
border-left: 3px solid var(--tri-heaven);
}
.newsletter-drawer-input {
display: flex;
gap: 8px;
}
.newsletter-drawer-input input {
flex: 1;
padding: 12px 14px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
font-family: inherit;
font-size: 14px;
}
.newsletter-drawer-input input:focus {
outline: none;
border-color: var(--tri-heaven);
}
.newsletter-drawer-input button {
padding: 12px 18px;
background: var(--tri-heaven);
border: none;
color: var(--bg);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background var(--duration-fast), transform var(--duration-fast);
}
.newsletter-drawer-input button:hover {
background: var(--text);
transform: translateX(2px);
}
.newsletter-drawer-note {
font-size: 11px;
color: var(--text-faint);
margin-top: 10px;
}
.newsletter-drawer-success {
display: none;
color: var(--tri-wind);
font-size: 14px;
}
.newsletter-drawer.is-success .newsletter-drawer-input,
.newsletter-drawer.is-success .newsletter-drawer-note {
display: none;
}
.newsletter-drawer.is-success .newsletter-drawer-success {
display: block;
}

/* Newsletter (legacy slide version) */
.newsletter-form { background: var(--surface); border: 1px solid var(--border); padding: 24px; text-align: center; width: 100%; max-width: 400px; }
.newsletter-header { margin-bottom: 20px; }
.newsletter-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.newsletter-desc { font-size: 15px; color: var(--text-dim); line-height: 1.6; }
.newsletter-input-group { display: flex; gap: 8px; }
.newsletter-input-group input { flex: 1; padding: 12px 14px; background: var(--surface-inset); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 15px; }
.newsletter-input-group input:focus { outline: none; border-color: var(--accent); }
.newsletter-input-group button { padding: 12px 20px; background: var(--accent); border: none; color: var(--bg); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background var(--duration-fast); }
.newsletter-input-group button:hover { background: var(--text); }
.newsletter-disclaimer { font-size: 12px; color: var(--text-faint); margin-top: 12px; }
.newsletter-success { display: none; padding: 16px; background: rgba(var(--tri-earth-rgb), 0.1); border: 1px solid var(--tri-earth); color: var(--tri-earth); font-size: 15px; }
.newsletter-form.is-success .newsletter-header, .newsletter-form.is-success .newsletter-input-group, .newsletter-form.is-success .newsletter-disclaimer { display: none; }
.newsletter-form.is-success .newsletter-success { display: block; }

/* Modal */
.modal-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.8); z-index: var(--z-modal-backdrop);
opacity: 0; visibility: hidden; transition: opacity var(--duration-normal), visibility var(--duration-normal);
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }
.modal {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95);
background: var(--bg); border: 1px solid var(--border);
width: 90%; max-width: 700px; max-height: 85vh;
z-index: var(--z-modal); opacity: 0; visibility: hidden;
transition: opacity var(--duration-normal), visibility var(--duration-normal), transform var(--duration-normal) var(--ease-out-quart);
display: flex; flex-direction: column;
}
.modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 18px; font-weight: 600; color: var(--text); }
.modal-close {
width: 36px; height: 36px; background: transparent; border: 1px solid var(--border);
color: var(--text-muted); font-size: 18px; cursor: pointer;
transition: all var(--duration-fast); display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { border-color: var(--accent); color: var(--accent); }
.modal-body { padding: 24px; overflow-y: auto; flex: 1; }

/* Cookie Banner */
.cookie-banner {
position: fixed; bottom: 0; left: 0; right: 0;
background: var(--surface); border-top: 1px solid var(--border);
padding: 16px 24px; z-index: var(--z-cookie-banner);
transform: translateY(100%); transition: transform var(--duration-normal) var(--ease-out-quart);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-content { max-width: var(--max-container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cookie-text { font-size: 15px; color: var(--text-dim); flex: 1; min-width: 200px; }
.cookie-text a { color: var(--accent); }
.cookie-actions { display: flex; gap: 12px; }
.cookie-btn { padding: 10px 20px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: all var(--duration-fast); }
.cookie-btn--accept { background: var(--accent); border: 1px solid var(--accent); color: var(--bg); }
.cookie-btn--accept:hover { background: var(--text); border-color: var(--text); }
.cookie-btn--decline { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.cookie-btn--decline:hover { border-color: var(--text-muted); color: var(--text); }

/* Theme Toggle - now integrated into hero banner */
.theme-toggle {
display: none; /* Old fixed position toggle - hidden */
}
.theme-toggle__icon--light { display: none; }
.theme-toggle__icon--dark { display: block; }
[data-theme="light"] .theme-toggle__icon--light { display: block; }
[data-theme="light"] .theme-toggle__icon--dark { display: none; }

/* Sub-Item List */
.sub-item-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.sub-item {
display: flex; align-items: center; gap: 12px; padding: 14px 16px;
background: var(--surface); border: 1px solid var(--border);
text-decoration: none; transition: all var(--duration-fast); cursor: pointer;
}
.sub-item:hover { border-color: var(--accent); transform: translateX(4px); }
.sub-item-icon {
font-size: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
background: var(--surface-inset); border: 1px solid var(--border); color: var(--text-dim); flex-shrink: 0;
}
.sub-item:hover .sub-item-icon { color: var(--accent); border-color: var(--accent); }
.sub-item-content { flex: 1; }
.sub-item-title { font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
.sub-item-desc { font-size: 13px; color: var(--text-muted); }

/* Content Article */
.content-article { max-width: 100%; }
.content-body { font-size: 15px; color: var(--text-dim); line-height: 1.8; }
.content-body h3 { font-size: 15px; color: var(--text); margin-top: 24px; margin-bottom: 12px; }
.content-body p { margin-bottom: 16px; }

/* Mobile Header (hidden on desktop) */
.mobile-header {
display: none;
background: var(--bg-left);
border-bottom: 1px solid var(--border);
padding: 16px 20px;
position: sticky;
top: 0;
z-index: 100;
overflow-x: auto;
}
.mobile-header__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.mobile-header__brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
overflow-x: auto;
}
.mobile-header__ascii {
font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
font-size: 4px;
line-height: 1.1;
letter-spacing: 0;
margin: 0;
white-space: pre;
transform-origin: center;
}
.mobile-header__logo {
font-size: 15px;
font-weight: 700;
color: var(--text);
letter-spacing: 1px;
background: linear-gradient(90deg, var(--tri-earth), var(--tri-mountain), var(--tri-water), var(--tri-wind), var(--tri-thunder), var(--tri-fire), var(--tri-lake), var(--tri-heaven));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.mobile-header__tagline {
font-size: 9px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1.5px;
display: block;
}
.mobile-header__trigrams {
display: flex;
gap: 3px;
flex-shrink: 0;
}
.mobile-header__trigram {
width: 8px;
height: 8px;
border-radius: 1px;
animation: trigram-glow 4s ease-in-out infinite;
}
/* Trigram colors using nth-child */
.mobile-header__trigram:nth-child(1) { background: var(--tri-earth); color: var(--tri-earth); animation-delay: 0s; }
.mobile-header__trigram:nth-child(2) { background: var(--tri-mountain); color: var(--tri-mountain); animation-delay: 0.5s; }
.mobile-header__trigram:nth-child(3) { background: var(--tri-water); color: var(--tri-water); animation-delay: 1s; }
.mobile-header__trigram:nth-child(4) { background: var(--tri-wind); color: var(--tri-wind); animation-delay: 1.5s; }
.mobile-header__trigram:nth-child(5) { background: var(--tri-thunder); color: var(--tri-thunder); animation-delay: 2s; }
.mobile-header__trigram:nth-child(6) { background: var(--tri-fire); color: var(--tri-fire); animation-delay: 2.5s; }
.mobile-header__trigram:nth-child(7) { background: var(--tri-lake); color: var(--tri-lake); animation-delay: 3s; }
.mobile-header__trigram:nth-child(8) { background: var(--tri-heaven); color: var(--tri-heaven); animation-delay: 3.5s; }

/* Mobile Grounded Section (in navigation, hidden on desktop) */
.mobile-grounded {
display: none;
margin-top: 28px;
padding-top: 20px;
}
.mobile-grounded .section-divider {
margin: 0 0 12px 0;
}
.mobile-grounded .section-divider__label {
color: var(--tri-earth);
font-size: 10px;
letter-spacing: 1px;
}
.mobile-grounded .grounded-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.mobile-grounded .grounded-card {
flex-direction: column;
text-align: center;
padding: 14px 10px;
gap: 8px;
border-left-width: 1px;
border-top: 2px solid var(--grounded-accent, var(--border));
}
.mobile-grounded .grounded-icon {
width: 36px;
height: 36px;
font-size: 16px;
}
.mobile-grounded .grounded-title {
font-size: 10px;
letter-spacing: 0;
line-height: 1.3;
white-space: normal;
}
.mobile-grounded .grounded-desc {
display: none;
}
/* Side-by-side sections for AI & Design */
.mobile-grounded .grounded-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 16px;
}
.mobile-grounded .grounded-row .grounded-mini-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.mobile-grounded .grounded-row .section-divider {
margin: 0 0 8px 0;
}
.mobile-grounded .grounded-row .section-divider__label {
font-size: 9px;
}
.mobile-grounded .grounded-row .grounded-card {
padding: 12px 8px;
}
.mobile-grounded .grounded-row .grounded-title {
font-size: 9px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 STORE COMPONENTS
 ═══════════════════════════════════════════════════════════════════════════ */

/* Quick Buy Hero Section */
.store-hero {
margin-bottom: 28px;
padding: 20px;
background: linear-gradient(135deg, rgba(var(--store-accent-rgb), 0.08), rgba(var(--store-accent-rgb), 0.02));
border: 1px solid rgba(var(--store-accent-rgb), 0.3);
position: relative;
overflow: hidden;
}

.store-hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--store-accent), var(--tri-thunder), var(--store-accent));
}

.store-hero__label {
font-size: 11px;
font-weight: 700;
color: var(--store-accent);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}

.store-hero__label::before {
content: '⚡';
font-size: 15px;
}

.store-hero__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

/* Quick Buy Card */
.quick-buy-card {
display: flex;
flex-direction: column;
padding: 14px;
background: var(--surface);
border: 1px solid var(--border);
cursor: pointer;
transition: all var(--duration-fast);
text-decoration: none;
position: relative;
}

.quick-buy-card:hover {
border-color: var(--store-accent);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(var(--store-accent-rgb), 0.15);
}

.quick-buy-card__title {
font-size: 15px;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
line-height: 1.3;
}

.quick-buy-card__price {
font-size: 15px;
font-weight: 700;
color: var(--store-accent);
margin-bottom: 8px;
}

.quick-buy-card__btn {
font-size: 11px;
font-weight: 600;
color: var(--bg);
background: var(--store-accent);
padding: 6px 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
transition: background var(--duration-fast);
}

.quick-buy-card:hover .quick-buy-card__btn {
background: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════════
 MOBILE COMPONENTS
 ═══════════════════════════════════════════════════════════════════════════ */

/* Mobile Grounded Section - Hidden on desktop */
.mobile-grounded {
display: none;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--border);
}

.mobile-grounded .grounded-label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 14px;
padding-left: 10px;
border-left: 3px solid var(--tri-earth);
}

.mobile-grounded .grounded-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}

.mobile-grounded .grounded-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 14px 10px;
gap: 8px;
background: var(--surface);
border: 1px solid var(--border);
border-top: 3px solid var(--grounded-accent, var(--border));
border-left: none;
cursor: pointer;
transition: all var(--duration-fast);
}

.mobile-grounded .grounded-card:hover {
transform: translateY(-2px);
border-color: var(--grounded-accent, var(--accent));
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.mobile-grounded .grounded-icon {
font-size: 20px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-inset);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--grounded-accent, var(--text-dim));
transition: all var(--duration-fast);
}

.mobile-grounded .grounded-card:hover .grounded-icon {
border-color: var(--grounded-accent, var(--accent));
box-shadow: 0 0 12px var(--grounded-accent, var(--accent));
}

.mobile-grounded .grounded-text {
display: flex;
flex-direction: column;
gap: 2px;
}

.mobile-grounded .grounded-title {
font-size: 12px;
font-weight: 600;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.5px;
}

.mobile-grounded .grounded-desc {
font-size: 11px;
color: var(--text-muted);
line-height: 1.3;
}

/* Mobile SILASTRO in Footer */
.mobile-silastro {
display: none;
padding: 12px 16px;
margin-top: 12px;
}

.mobile-silastro a {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 12px 16px;
background: var(--surface);
border: 1px solid var(--border);
text-decoration: none;
transition: all var(--duration-fast);
}

.mobile-silastro a:hover {
border-color: var(--tri-lake);
box-shadow: 0 0 12px rgba(var(--tri-lake-rgb), 0.2);
}

.mobile-silastro__text {
font-size: 13px;
font-weight: 600;
color: var(--tri-lake);
letter-spacing: 1px;
}

.mobile-silastro__tagline {
font-size: 11px;
color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
 RESPONSIVE STYLES
 ═══════════════════════════════════════════════════════════════════════════ */

/* Responsive */
@media (max-width: 1024px) {
.split-container { grid-template-columns: 1fr 1fr; }
.slide-inner { padding: 32px 20px; }
.brand-ascii--large { font-size: 4px; transform: scale(0.7); }
}

@media (max-width: 900px) {
/* Hide hero banner on mobile - mobile-header handles this */
.hero-banner { display: none; }

.split-container { grid-template-columns: 1fr; height: 100vh; }
.split-container.expanded-left, .split-container.expanded-right { grid-template-columns: 1fr; }

/* Hide desktop-only right panel */
.panel-right--brand { display: none; }

/* Full width left panel */
.panel-left { 
  width: 100%; 
  border-right: none;
  display: flex;
  flex-direction: column;
}

.slider-viewport { flex: 1; }
.slide-inner { max-width: 100%; padding: 24px 20px; }

/* Show mobile header */
.mobile-header { display: block; }

/* Mobile ASCII logo sizing for tablets */
.mobile-header__ascii {
  font-size: 5px;
}

/* Show mobile grounded in main slide */
.mobile-grounded { display: block; }

/* Show mobile SILASTRO in footer */
.mobile-silastro { display: block; }

/* Adjust footer for mobile */
.panel-footer {
  padding: 16px;
  gap: 8px;
}

.legal-footer {
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
}
}

@media (max-width: 600px) {
.slide-inner { padding: 20px 16px; }
.slide-title { font-size: 26px; }
.link-btn { padding: 14px 14px; gap: 12px; }
.link-btn-icon { width: 36px; height: 36px; font-size: 15px; }
.link-btn-title { font-size: 15px; }
.link-btn-desc { font-size: 12px; }
.slide-nav { flex-direction: column; align-items: flex-start; }
.slide-breadcrumb { margin-left: 0; margin-top: 8px; }
.cookie-content { flex-direction: column; text-align: center; }
.cookie-actions { width: 100%; justify-content: center; }
.modal { width: 95%; max-height: 90vh; }

/* Mobile header adjustments */
.mobile-header { padding: 12px 12px; }
.mobile-header__ascii { font-size: 3px; }
.mobile-header__tagline { font-size: 10px; letter-spacing: 1px; }
.mobile-header__trigram { width: 6px; height: 6px; }

/* Grounded grid - 2 columns on small phones */
.mobile-grounded .grounded-grid { gap: 6px; }
.mobile-grounded .grounded-card { padding: 12px 8px; gap: 8px; }
.mobile-grounded .grounded-icon { width: 32px; height: 32px; font-size: 15px; }
.mobile-grounded .grounded-title { font-size: 11px; letter-spacing: 0; }

/* Section divider in grounded */
.mobile-grounded .section-divider { margin: 0 0 14px 0; }
.mobile-grounded .section-divider__label { font-size: 10px; }

/* SILASTRO adjustments */
.mobile-silastro { padding: 10px 16px; }
.mobile-silastro a { padding: 10px 14px; }
.mobile-silastro__text { font-size: 12px; }
.mobile-silastro__tagline { font-size: 10px; }

/* Store responsive */
.store-hero { padding: 16px; margin-bottom: 20px; }
.store-hero__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-buy-card { padding: 12px; }
.quick-buy-card__title { font-size: 13px; }
.quick-buy-card__price { font-size: 15px; }
.quick-buy-card__btn { font-size: 10px; padding: 5px 10px; }
.store-cat-btn { padding: 10px 12px; }
.store-cat-btn__icon { width: 44px; height: 44px; font-size: 18px; }
.store-cat-btn__title { font-size: 15px; }
.store-cat-btn__desc { font-size: 11px; }
}

@media (max-width: 400px) {
.slide-inner { padding: 16px 12px; }
.slide-back, .slide-home { padding: 12px 16px; font-size: 16px; }
.link-btn { padding: 12px 12px; }
.newsletter-input-group { flex-direction: column; }
.newsletter-input-group button { width: 100%; }

/* Ultra-small grounded - single column */
.mobile-grounded .grounded-grid { 
  grid-template-columns: 1fr; 
  gap: 8px; 
}
.mobile-grounded .grounded-card { 
  flex-direction: row; 
  text-align: left;
  padding: 12px 14px;
  gap: 12px;
}
.mobile-grounded .grounded-icon { 
  width: 36px; 
  height: 36px; 
  font-size: 16px; 
  border-radius: 4px;
}
.mobile-grounded .grounded-title { 
  font-size: 13px; 
  letter-spacing: 0.5px; 
}

/* Mobile header - ultra small phones */
.mobile-header { padding: 10px 12px; }
.mobile-header__ascii { font-size: 3px; }
.mobile-header__tagline {
  display: block;
  font-size: 10px;
  letter-spacing: 0.5px;
}
.mobile-header__trigrams { 
  flex-shrink: 0;
}
.mobile-header__trigram { width: 5px; height: 5px; }
}