/* VENICE.AI INSPIRED THEME - AIFORUM ULTIMATE */

/* OPTION A: GALACTIC CORE (Default - Cold, Cyan/Purple) */
:root {
    --bg-main: #020305;
    --bg-card: rgba(10, 15, 25, 0.4);
    --border-color: rgba(0, 255, 204, 0.15);
    --accent: #00ffcc;
    --accent-glow: rgba(0, 255, 204, 0.6);
    --accent-secondary: #aa55ff;
    --text-main: #f0f4f8;
    --text-muted: #8b9bb4;
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
}

/* OPTION B: CRIMSON ORBIT (Alternative - Warm, Red/Gold) */
[data-theme="crimson"] {
    --bg-main: #070101;
    --bg-card: rgba(25, 5, 5, 0.4);
    --border-color: rgba(255, 51, 51, 0.2);
    --accent: #ff3333;
    --accent-glow: rgba(255, 51, 51, 0.6);
    --accent-secondary: #ffaa00;
    --text-main: #fff0f0;
    --text-muted: #b48b8b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 2026-08-23 (Osman live bug, phone: "sağında siyah şerit kalmış, ekrana tam oturmuyor") -
   `body { overflow-x: hidden }` alone doesn't reliably clip a wide descendant's horizontal
   overflow on every mobile browser (a known iOS Safari gap in particular: when `html` itself is
   left at its default `overflow: visible`, the viewport can still open a horizontal scroll gutter
   that reveals `body`'s own near-black background on one side, reading exactly as a "black
   strip"). `.solar-system-bg` below (800px wide, absolutely centered) is the actual source - it
   was never resized for narrow viewports. Fixed at both ends: `html` gets the same guard `body`
   already had (belt-and-suspenders, matches every other overflow guard in this file), and the
   graphic itself is scaled down under the existing mobile breakpoint so there's far less excess
   width to clip in the first place. */
html { overflow-x: hidden; width: 100%; }

body {
    font-family: var(--font-sans);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
    transition: background-color 0.5s ease;
}

/* Background Effects */
.stars {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0ibm9uZSIvPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjEiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMSIvPjxjaXJjbGUgY3g9IjE4MCIgY3k9IjQwIiBHIjEiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMSIvPjxjaXJjbGUgY3g9IjMwMCIgY3k9IjEyMCIgcj0iMC41IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjEiLz48L3N2Zz4=');
    z-index: -2;
}

.nebula {
    position: fixed; width: 60vw; height: 60vw; border-radius: 50%;
    filter: blur(120px); z-index: -1; opacity: 0.12; transition: background 0.8s ease;
}
.nebula-1 { top: -20%; left: -10%; background: var(--accent); }
.nebula-2 { bottom: -20%; right: -10%; background: var(--accent-secondary); }

/* Layout & Typography */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-weight: 800; line-height: 1.2; }
.gradient-text {
    background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Navbar */
.navbar {
    position: fixed; top: 0; left: 0; width: 100%;
    background: rgba(2, 3, 5, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color); z-index: 1000;
}
[data-theme="crimson"] .navbar { background: rgba(5, 1, 1, 0.7); }
.nav-container { display: flex; justify-content: space-between; align-items: center; height: 70px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.logo { font-family: var(--font-mono); font-size: 24px; font-weight: bold; color: #fff; letter-spacing: 2px; display: inline-flex; align-items: center; gap: 8px; }
.logo-icon { filter: drop-shadow(0 0 5px var(--accent)); transition: filter 0.5s ease; }
/* 2026-08-22 (Osman live request: "sol üstte yanlış logo var, AIFORUM simgesi olmalı" + "AIFORUM
   by OSM olsun") - was a generic 🪐 planet emoji; app/public/app-icon.png is the REAL brand icon
   (the actual desktop app's own icon), copied into this folder. */
.logo-icon-img { width: 28px; height: 28px; border-radius: 6px; filter: drop-shadow(0 0 5px var(--accent)); }
.logo-suffix { font-size: 11px; font-weight: 400; color: var(--text-muted); letter-spacing: 1px; }
.nav-links a { color: var(--text-main); text-decoration: none; margin: 0 16px; font-size: 14px; font-weight: 600; transition: color 0.3s ease; }
.nav-links a:hover { color: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.icon-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-family: var(--font-mono); font-size: 14px; transition: color 0.3s ease; }
.icon-btn:hover { color: var(--accent); }
.mobile-menu-btn { display: none; font-size: 24px; cursor: pointer; }

/* Buttons */
.btn { display: inline-block; padding: 12px 24px; border-radius: 4px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; text-align: center; text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-mono); font-size: 14px;}
.primary-btn { background: transparent; border: 1px solid var(--accent); color: var(--accent); box-shadow: 0 0 10px rgba(0,0,0,0), inset 0 0 5px rgba(0,0,0,0); }
.primary-btn:hover { background: var(--accent); color: #000; box-shadow: 0 0 20px var(--accent-glow); transform: translateY(-2px); }
.secondary-btn { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.secondary-btn:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
.outline-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); }
.outline-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Hero Section */
.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 70px; position: relative; }
.hero-content { max-width: 800px; z-index: 10; }
.hero h1 { font-size: 64px; margin-bottom: 24px; letter-spacing: -1px; }
.hero-subtitle { font-size: 20px; color: var(--text-muted); margin-bottom: 40px; }
.hero-cta { display: flex; gap: 20px; justify-content: center; }

/* Sections */
.section { padding: 100px 0; position: relative; z-index: 5; }
.dark-section { background: rgba(0,0,0,0.5); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.section-title { font-size: 40px; margin-bottom: 60px; text-align: center; }

/* Grid & Mouse Tracking Glow Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.glow-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 40px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}
/* Mouse Glow Effect injected via JS */
.glow-card::before {
    content: ''; position: absolute; top: var(--mouse-y, 0); left: var(--mouse-x, 0);
    width: 300px; height: 300px; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: -1;
}
.glow-card:hover::before { opacity: 0.15; }
.glow-card:hover { transform: translateY(-5px); border-color: var(--accent); }

.card-icon { font-size: 40px; margin-bottom: 20px; filter: drop-shadow(0 0 10px var(--accent-glow)); }

/* Store Items */
.store-item { padding: 30px; text-align: center; clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); }
.store-item img { width: 80px; height: 80px; margin-bottom: 20px; filter: drop-shadow(0 0 10px var(--accent-glow)); }
.token-price { display: inline-block; margin-top: 15px; padding: 5px 15px; background: rgba(0,0,0,0.5); border: 1px solid var(--accent-secondary); color: var(--accent-secondary); font-family: var(--font-mono); border-radius: 20px; }

/* Pricing cards (2026-08-22, Faz 6 draft) - .pricing-card/.price/.pricing-features/.popular-badge
   had NO rules anywhere in this file (only the generic .glow-card base applied), so the tier cards
   rendered as unstyled text blocks - matches the same class as the app.js syntax error: content
   existed but was never actually finished. Sizes/colors reuse the SAME tokens every other section
   already uses (--accent/--text-muted/--font-mono/--border-color), not a new palette. */
.pricing-card { text-align: center; display: flex; flex-direction: column; }
.pricing-card.featured { border-color: var(--accent); }
.popular-badge {
    position: absolute; top: 16px; right: 16px;
    background: var(--accent); color: #000; font-family: var(--font-mono);
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px;
}
/* Early Access labeling (2026-09-07, Osman: "full herşeyi bitmiş ürün gibi sunmak istemiyorum")
   - same Steam-style "this is still being built" signal, on the pricing page specifically since
   that's where money changes hands. Deliberately a warning tone (amber), never --accent, so it
   never reads as a feature/selling point. */
.early-access-banner {
    max-width: 720px; margin: 0 auto 56px; padding: 22px 28px;
    background: rgba(255, 176, 32, 0.08); border: 1px solid rgba(255, 176, 32, 0.4);
    border-radius: 8px; text-align: center;
}
.early-access-banner strong { display: inline-block; font-size: 22px; margin-bottom: 4px; color: #ffb020; font-family: var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; }
.early-access-banner p { margin: 6px 0 0; color: var(--text-muted); font-size: 14px; }
.early-access-banner p.thanks { margin-top: 10px; color: #ffb020; opacity: 0.9; }
.early-access-badge {
    position: absolute; top: 16px; left: 16px;
    background: rgba(255, 176, 32, 0.15); color: #ffb020; font-family: var(--font-mono);
    font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px; border: 1px solid rgba(255, 176, 32, 0.4);
}
.pricing-card h3 { font-size: 20px; margin-bottom: 12px; }
.price {
    font-family: var(--font-mono); font-size: 42px; font-weight: 700; color: var(--accent);
    margin-bottom: 24px;
}
.price span { font-size: 14px; font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.pricing-features { list-style: none; text-align: left; margin-bottom: 32px; flex: 1; }
.pricing-features li {
    padding: 10px 0; border-bottom: 1px solid var(--border-color);
    font-size: 14px; color: var(--text-main);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features li del { color: var(--text-muted); }

/* FAQ Accordion */
.accordion-item { border-bottom: 1px solid var(--border-color); margin-bottom: 10px; }
.accordion-header { width: 100%; background: transparent; border: none; color: var(--text-main); font-size: 18px; font-weight: 600; text-align: left; padding: 20px 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: color 0.3s; }
.accordion-header:hover { color: var(--accent); }
.accordion-icon { font-family: var(--font-mono); font-size: 24px; color: var(--accent); transition: transform 0.3s; }
.accordion-header.active .accordion-icon { transform: rotate(45deg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; padding: 0 10px; color: var(--text-muted); }
.accordion-content p { padding-bottom: 20px; }

/* Modal */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.3s; }
.modal-overlay.hidden { opacity: 0; pointer-events: none; }
.modal-content { background: var(--bg-card); border: 1px solid var(--accent); padding: 40px; width: 100%; max-width: 400px; position: relative; clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); transform: translateY(0); transition: transform 0.3s; }
.modal-overlay.hidden .modal-content { transform: translateY(50px); }
.close-modal { position: absolute; top: 15px; right: 20px; background: none; border: none; color: var(--text-muted); font-size: 24px; cursor: pointer; }
.close-modal:hover { color: var(--accent); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
.form-control { width: 100%; padding: 12px; background: rgba(0,0,0,0.5); border: 1px solid var(--border-color); color: var(--text-main); font-family: var(--font-mono); outline: none; transition: border-color 0.3s; }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 10px rgba(0,255,204,0.1); }

/* Animations */
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }

/* Responsive */
@media (max-width: 900px) {
    .nav-links { display: none; }
    /* Fix (2026-08-30, Osman live mobile screenshot: "sağ üstte sekme simgesi çok yakın solundaki
       simgeye") - .nav-container is display:flex + justify-content:space-between across 4 direct
       children (.logo, .nav-links, .nav-actions, .mobile-menu-btn). With .nav-links hidden above,
       .nav-actions and .mobile-menu-btn become adjacent flex items with no gap defined between
       them as SIBLINGS of .nav-container (the 16px gap in .nav-actions only applies to ITS OWN
       children) - space-between then pushes .logo far left and crams the last two items together
       with zero space, while a large empty gap opens up before them. */
    .mobile-menu-btn { display: block; margin-left: 16px; }
    /* Fix (2026-08-30, Osman: "hala sıkışık, solundaki kısımı hafif daha sola ittirip yer aç") -
       the 16px gap alone wasn't enough breathing room on a narrow phone; compacting .nav-actions'
       own content (container padding, its internal gap, the Login button's padding) shifts
       everything left of the hamburger further left instead of just widening the gap in place,
       which would otherwise push the hamburger itself closer to the screen edge. */
    .nav-container { padding: 0 14px; }
    .nav-actions { gap: 10px; }
    .nav-actions .btn { padding: 10px 16px; font-size: 12px; }
    .hero h1 { font-size: 40px; }
    .hero-cta { flex-wrap: wrap; }
    /* 2026-08-23 (same phone bug as the html/body overflow-x guard above) - the graphic's own
       rings/planets are fixed px sizes (path-3/.sun-core etc.), NOT relative to .solar-system-bg's
       own box, so shrinking that box's width/height alone wouldn't actually shrink what renders -
       only a `scale()` on the whole transformed subtree resizes everything inside it together.
       Appended to the SAME transform (not a separate rule) since a later `transform` declaration
       would otherwise just replace the base one, not layer on top of it. 0.5 keeps the graphic
       proportional at typical phone widths (~400px total width, well under a ~360-430px viewport)
       instead of the desktop's untouched 800px overflowing every side by ~200px+. */
    .solar-system-bg { transform: translate(-50%, -50%) rotateX(70deg) rotateY(-10deg) scale(0.5); }
    /* 2026-08-22 (Osman live bug, phone test): .mobile-menu-btn had no click handler at all
       (see app.js) - .nav-links stayed unreachable below this breakpoint no matter what. Now
       toggled to a fixed-position dropdown anchored under the navbar (matches .navbar's own
       fixed/full-width nature - .nav-container itself is centered/max-width:1200px, not a useful
       positioning parent for a full-width dropdown). */
    .nav-links.open {
        display: flex; flex-direction: column; gap: 4px;
        position: fixed; top: 70px; left: 0; width: 100%;
        background: rgba(2, 3, 5, 0.95); backdrop-filter: blur(20px);
        padding: 16px 24px; border-bottom: 1px solid var(--border-color);
    }
    .nav-links.open a { margin: 0; padding: 10px 0; }
}

/* --- 3D Solar System Hero Background --- */
/* 2026-08-22 (Osman live request: "arka planda dönen galaksi görseli yazıların altında kalıyor,
   yazıları aşağı alalım ya da gezegen animasyonunu biraz üste alalım") - rotateX(70deg) visually
   compresses the orbit rings into a flat, narrow band well below the true 50% midpoint they're
   mathematically centered on, so the tilted graphic's visual weight reads as sitting lower than
   the text expects. Nudged up from 50% - a visual/composition call, not a precise fix; re-check by
   eye after deploying and adjust this one value further if needed. */
.solar-system-bg {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(70deg) rotateY(-10deg);
    width: 800px;
    height: 800px;
    z-index: 1;
    pointer-events: none;
    transform-style: preserve-3d;
}

.sun-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotateX(-70deg);
    width: 60px; height: 60px;
    background: radial-gradient(circle, var(--accent) 20%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 100px var(--accent-glow), 0 0 40px var(--accent-secondary);
    animation: pulseSun 4s infinite alternate ease-in-out;
}

@keyframes pulseSun {
    0% { transform: translate(-50%, -50%) rotateX(-70deg) scale(1); opacity: 0.8;}
    100% { transform: translate(-50%, -50%) rotateX(-70deg) scale(1.1); opacity: 1;}
}

.orbit-path {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 50%;
    box-shadow: inset 0 0 20px rgba(0,255,204,0.02);
}

.path-1 { width: 300px; height: 300px; animation: spin 20s linear infinite; border-color: rgba(0,255,204,0.1); }
.path-2 { width: 500px; height: 500px; animation: spin 40s linear infinite reverse; border-color: rgba(170,85,255,0.1); }
.path-3 { width: 800px; height: 800px; animation: spin 80s linear infinite; border-color: rgba(255,255,255,0.05); }

.planet-orb {
    position: absolute;
    top: 0; left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Counter-rotate the planets so they stay upright */
.orb-1 { width: 15px; height: 15px; background: var(--accent); box-shadow: 0 0 20px var(--accent-glow); animation: spinCounter 20s linear infinite; }
.orb-2 { width: 25px; height: 25px; background: var(--accent-secondary); box-shadow: 0 0 30px rgba(170,85,255,0.6); animation: spinCounterReverse 40s linear infinite; }
.orb-3 { width: 10px; height: 10px; background: #fff; box-shadow: 0 0 15px #fff; animation: spinCounter 80s linear infinite; }

@keyframes spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spinCounter { 100% { transform: translate(-50%, -50%) rotate(-360deg) rotateX(-70deg); } }
@keyframes spinCounterReverse { 100% { transform: translate(-50%, -50%) rotate(360deg) rotateX(-70deg); } }

/* Ensure Hero content is above the solar system */
.hero-content {
    z-index: 10;
    position: relative;
    backdrop-filter: blur(2px);
    padding: 40px;
    border-radius: 20px;
    background: radial-gradient(circle, rgba(0,0,0,0.4) 0%, transparent 80%);
}

/* --- FINAL TOUCHES: MOVING STARS & TYPEWRITER --- */
.stars {
    background-size: 400px 400px !important;
    animation: moveStars 120s linear infinite;
}

@keyframes moveStars {
    from { background-position: 0 0; }
    to { background-position: -1000px 1000px; }
}

/* Typing Effect for Hero Title */
/* 2026-08-22 (Osman live bug: "Türkçe'ye çevirince ortadaki başlık ekrana ortalanmıyor") - the
   width:0->100% typewriter animation only reliably centers the string it was tuned for (English,
   21 chars) - a longer/wider translation (Turkish: 26 chars + wider ı/ş/ğ glyphs) can render past
   the viewport (mobile already handled this by disabling the effect below 900px) or just read as
   off-center at any width while the reveal animation is mid-flight, since `width` itself is what's
   animating, not a static box `.hero`'s `text-align:center` can reliably center throughout.
   Dropping the reveal animation is the fix that holds at EVERY viewport regardless of string
   length - a plain, always-correctly-centered heading, not a size recalibrated for one specific
   string that could just as easily overflow again on a future copy change. */
.typing-effect {
    display: inline-block;
    margin: 0 auto 24px auto !important;
}


.glow-card {
    transition: transform 0.1s ease, border-color 0.3s ease !important; /* Faster transition for 3D tilt */
    transform-style: preserve-3d;
}

/* 2026-08-22 (Osman live request: desteklenen AI markaları şeridi, ana sayfanın altında yavaş
   kayan) - slow left-to-right (well, the track scrolls right-to-left visually, giving a
   left-scrolling reading motion) marquee of real supported providers. */
.brand-marquee {
    overflow: hidden;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    padding: 20px 0;
    position: relative;
    z-index: 5;
}
/* 2026-08-22 (Osman live bug: "loopta değil, ollamadan sonra ilk yazan olmalı") - was `display:flex;
   gap:48px` - flex `gap` only sits BETWEEN items (11 gaps for 12 items), so exactly half the
   track's total width does NOT land on the seam between the two identical 6-badge halves (11 gaps
   split unevenly, 5.5 each side) - `translateX(-50%)` therefore looped with a visible stutter/jump
   instead of Ollama flowing straight into the next OpenAI. Moving the spacing onto each badge's own
   `margin-right` instead makes every badge (including its trailing space) a self-contained,
   identically-sized unit - 12 such units split into an exact 6+6, so -50% always lands precisely on
   the seam. */
.brand-marquee-track {
    display: flex;
    width: max-content;
    animation: brandScroll 30s linear infinite;
}
.brand-badge {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: 1px;
    margin-right: 48px;
}
@keyframes brandScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.site-footer {
    border-top: 1px solid var(--border-color);
    background: rgba(0,0,0,0.4);
    padding: 24px 0;
    position: relative;
    z-index: 5;
}
.site-footer-inner {
    display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: center;
    font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
}
.site-footer-inner a { color: var(--text-muted); text-decoration: none; transition: color 0.3s ease; }
.site-footer-inner a:hover { color: var(--accent); }

/* 2026-08-23 (bug sweep, Faz 5) - about.html's own markup(.about-container/.about-text/
   .about-visual/.cyber-box/.cyber-box-inner) never had matching rules anywhere in this file - the
   intended two-column "vision text next to a cyber terminal" layout never rendered, just a plain
   stacked text block. Reuses the SAME grid mechanics `.grid` above already establishes(auto-fit
   two-up, not a new pattern) and the SAME border/background vocabulary(--border-color/--bg-card)
   every other bordered panel on this site already uses(.form-control, the pricing tier boxes). */
.about-container {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 48px; align-items: center;
}
.about-text h3 { color: var(--accent); font-family: var(--font-mono); font-size: 15px; letter-spacing: 1px; margin: 8px 0 20px; }
.about-text p { color: var(--text-muted); line-height: 1.7; margin-bottom: 16px; }
.cyber-box {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px;
    padding: 24px; box-shadow: 0 0 30px rgba(0,0,0,0.3);
}
.cyber-box-inner { display: flex; flex-direction: column; gap: 12px; }
.cyber-box-inner code {
    display: block; font-family: var(--font-mono); font-size: 13px; color: var(--accent);
    opacity: 0.85;
}
.cyber-box-inner code::before { content: '> '; opacity: 0.6; }