body {
            background-color: #000000;
            color: #FFFFFF;
            overflow-x: hidden;
        }

        ::selection {
            background-color: #333333;
            color: #FFFFFF;
        }

        /* Subtlety & Cinematic Lighting */
        .cinematic-glow {
            box-shadow: 0 0 40px rgba(255, 255, 255, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .border-premium {
            border: 1px solid #151515;
        }

        .border-premium-hover:hover {
            border-color: #333333;
        }

        /* Floating Animations */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        @keyframes float-delayed {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
            100% { transform: translateY(0px); }
        }

        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        
        .animate-float-delayed {
            animation: float-delayed 7s ease-in-out infinite 1s;
        }

        /* Reveal Animations */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Grid Background Effect - 3x less frequent */
        .bg-grid {
            background-size: 120px 120px;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            mask-image: linear-gradient(to bottom, black 20%, transparent 80%);
            -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 80%);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #000000;
        }
        ::-webkit-scrollbar-thumb {
            background: #151515;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #333333;
        }




    @keyframes wave-move {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    .anim-wave {
        animation: wave-move 5s linear infinite;
    }

    /* Анимация полосы загрузки */
    @keyframes slide-load {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(300%); }
    }
    .anim-load {
        animation: slide-load 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    /* Анимация строчек кода (Clean UI) */
    @keyframes code-pulse {
        0%, 100% { opacity: 0.2; transform: scaleX(0.9); }
        50% { opacity: 1; transform: scaleX(1); box-shadow: 0 0 10px rgba(255,255,255,0.2); }
    }
    .anim-code-1 { animation: code-pulse 2s ease-in-out infinite 0s; transform-origin: left; }
    .anim-code-2 { animation: code-pulse 2s ease-in-out infinite 0.4s; transform-origin: left; }
    .anim-code-3 { animation: code-pulse 2s ease-in-out infinite 0.8s; transform-origin: left; }

    /* Вращение кольца CPU */
    @keyframes spin-dashed {
        100% { transform: rotate(360deg); }
    }
    .anim-spin-dashed {
        animation: spin-dashed 10s linear infinite;
        transform-origin: center;
    }

    /* Стили самих карточек */
    .highlight-card {
        background-color: #0F0F10;
        border: 1px solid #151515;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .highlight-card:hover {
        border-color: #333333;
        transform: translateY(-4px);
        box-shadow: 0 12px 40px -10px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }



@keyframes load-bar { 0%{width:0%} 60%{width:85%} 100%{width:100%} }
@keyframes shield-ring { 0%{transform:scale(0.75);opacity:0.5} 100%{transform:scale(1.8);opacity:0} }
@keyframes terminal-blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes graph-draw { from{stroke-dashoffset:220} to{stroke-dashoffset:0} }
@keyframes spin-slow { 100%{transform:rotate(360deg)} }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0} }

.cf-section {
    max-width: 1280px;
    margin: 0 auto 100px;
    padding: 0 24px;
    position: relative;
    z-index: 20;
}

/* ── Chamfer heading ── */
.cf-heading-wrap {
    margin-bottom: 14px;
}
.cf-chamfer-outer {
    display: inline-block;
    position: relative;
    padding: 1px;
    background: linear-gradient(135deg, #333 0%, #1a1a1a 50%, #333 100%);
    clip-path: polygon(18px 0%, 100% 0%, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0% 100%, 0% 18px);
}
.cf-chamfer-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    background: #000;
    clip-path: polygon(17px 0%, 100% 0%, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0% 100%, 0% 17px);
}
.cf-pulse {
    width: 6px; height: 6px;
    background: #fff;
    border-radius: 1px;
    flex-shrink: 0;
    animation: pulse-dot 1.5s ease-in-out infinite;
}
.cf-h2 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cf-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 0 24px;
}
.cf-desc strong { color: #aaa; font-weight: 500; }

/* ── Grid ── */
.cf-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
}
.cf-card-01 { grid-column: 1 / 3; grid-row: 1; }
.cf-card-02 { grid-column: 3 / 4; grid-row: 1; }
.cf-card-03 { grid-column: 4 / 5; grid-row: 1; }
.cf-card-04 { grid-column: 1 / 2; grid-row: 2; }
.cf-card-05 { grid-column: 2 / 4; grid-row: 2; }
.cf-card-06 { grid-column: 4 / 5; grid-row: 2; }

@media (max-width: 860px) {
    .cf-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: unset; }
    .cf-card-01 { grid-column: 1/3; grid-row: auto; }
    .cf-card-02 { grid-column: 1/2; grid-row: auto; }
    .cf-card-03 { grid-column: 2/3; grid-row: auto; }
    .cf-card-04 { grid-column: 1/2; grid-row: auto; }
    .cf-card-05 { grid-column: 1/3; grid-row: auto; }
    .cf-card-06 { grid-column: 2/3; grid-row: auto; }
}
@media (max-width: 520px) {
    .cf-grid { grid-template-columns: 1fr; }
    .cf-card-01,.cf-card-02,.cf-card-03,
    .cf-card-04,.cf-card-05,.cf-card-06 { grid-column: 1/2; grid-row: auto; }
}

/* ── Card ── */
.cf-card {
    background: #0F0F10;
    border: 1px solid #1C1C1C;
    border-radius: 12px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cf-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 0%, rgba(255,255,255,0.025) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.cf-card:hover { border-color: #2C2C2C; transform: translateY(-2px); }
.cf-card:hover::before { opacity: 1; }

.cf-card-head { display: flex; justify-content: space-between; align-items: center; }
.cf-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14px; font-weight: 700;
    color: #fff; margin: 0; line-height: 1.3;
}
.cf-num {
    font-family: ui-monospace, monospace;
    font-size: 9px; color: #383838; font-weight: 700;
    letter-spacing: 0.1em;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
}
.cf-visual { opacity: 0.55; transition: opacity 0.3s ease; }
.cf-card:hover .cf-visual { opacity: 1; }
.cf-text { font-size: 12px; color: #666; line-height: 1.65; margin: 0; }
.cf-text strong { color: #aaa; font-weight: 500; }

/* Terminal */
.cf-terminal {
    background: #070707; border: 1px solid #1A1A1A;
    border-radius: 7px; padding: 9px 11px;
    transition: border-color 0.3s ease;
}
.cf-card:hover .cf-terminal { border-color: #282828; }
.cf-term-top {
    display: flex; align-items: center; gap: 5px;
    margin-bottom: 7px; font-family: ui-monospace,monospace;
    font-size: 9px; color: #444;
}
.cf-cursor {
    display: inline-block; width: 5px; height: 10px;
    background: rgba(255,255,255,0.65); border-radius: 1px;
    animation: terminal-blink 1.1s infinite;
}
.cf-term-row {
    display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
    font-family: ui-monospace,monospace; font-size: 9px;
}
.cf-term-label { color: #3A3A3A; width: 50px; flex-shrink: 0; }
.cf-term-val { color: #fff; font-weight: 600; }
.cf-bar-track { height: 2px; background: #141414; border-radius: 2px; overflow: hidden; }
.cf-bar-fill { height: 100%; width: 0%; background: #fff; border-radius: 2px; }
.cf-card:hover .cf-bar-fill { animation: load-bar 1.4s cubic-bezier(0.4,0,0.2,1) forwards; }
.cf-term-foot {
    display: flex; justify-content: space-between; margin-top: 4px;
    font-family: ui-monospace,monospace; font-size: 8px; color: #2C2C2C;
}

/* Shield */
.cf-shield-wrap {
    position: relative; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
}
.cf-shield-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
}
.cf-card:hover .cf-shield-ring { animation: shield-ring 1.8s ease-out infinite; }
.cf-card:hover .cf-shield-ring-2 { animation: shield-ring 1.8s ease-out 0.65s infinite; }

/* Graph */
.cf-graph-path { stroke-dasharray: 220; stroke-dashoffset: 220; }
.cf-card:hover .cf-graph-path { animation: graph-draw 1.1s ease forwards; }

/* Update badge */
.cf-update-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #0A0A0A; border: 1px solid #1A1A1A;
    border-radius: 7px; padding: 7px 11px;
    transition: border-color 0.3s ease;
}
.cf-card:hover .cf-update-badge { border-color: #2C2C2C; }
.cf-spin { display: block; }
.cf-card:hover .cf-spin { animation: spin-slow 2s linear infinite; }
.cf-badge-label { font-size: 8px; font-family: ui-monospace,monospace; color: #3A3A3A; text-transform: uppercase; letter-spacing: 0.08em; display: block; }
.cf-badge-val { font-size: 11px; font-weight: 700; color: #fff; display: block; margin-top: 1px; }
.cf-live-dot { width: 4px; height: 4px; border-radius: 50%; background: #fff; margin-left: 2px; box-shadow: 0 0 4px rgba(255,255,255,0.3); }

/* Hub */
.cf-search {
    background: #070707; border: 1px solid #1A1A1A; border-radius: 7px;
    padding: 6px 10px; display: flex; align-items: center; gap: 7px;
    margin-bottom: 5px; transition: border-color 0.3s ease;
}
.cf-card:hover .cf-search { border-color: #252525; }
.cf-search-mock { height: 8px; width: 38%; background: #181818; border-radius: 2px; }
.cf-run-btn { margin-left: auto; background: #fff; color: #000; font-size: 8px; font-weight: 700; padding: 2px 7px; border-radius: 3px; font-family: ui-monospace,monospace; letter-spacing: 0.05em; flex-shrink: 0; }
.cf-hub-bar {
    background: #070707; border: 1px solid #181818; border-radius: 7px;
    padding: 6px 10px; display: flex; align-items: center; gap: 7px;
    margin-bottom: 4px; transition: border-color 0.3s ease;
}
.cf-hub-bar:last-child { margin-bottom: 0; }
.cf-card:hover .cf-hub-bar { border-color: #242424; }
.cf-hub-dot { width: 4px; height: 4px; border-radius: 50%; background: #252525; flex-shrink: 0; }
.cf-hub-bar.active .cf-hub-dot { background: #fff; }
.cf-hub-name { font-family: ui-monospace,monospace; font-size: 10px; color: #444; flex: 1; }
.cf-hub-bar.active .cf-hub-name { color: #999; }
.cf-hub-count { font-family: ui-monospace,monospace; font-size: 8px; color: #2C2C2C; }

/* Toggles */
.cf-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    background: #0A0A0A; border: 1px solid #181818; border-radius: 6px;
    padding: 6px 10px; margin-bottom: 4px; transition: border-color 0.3s ease;
}
.cf-toggle-row:last-child { margin-bottom: 0; }
.cf-card:hover .cf-toggle-row { border-color: #242424; }
.cf-toggle-label { font-size: 10px; font-weight: 500; color: #444; }
.cf-toggle-row.active .cf-toggle-label { color: #ccc; }
.cf-track { width: 24px; height: 14px; border-radius: 7px; position: relative; flex-shrink: 0; }
.cf-track.on { background: #fff; }
.cf-track.off { background: #1A1A1A; border: 1px solid #252525; }
.cf-thumb { position: absolute; top: 2px; width: 10px; height: 10px; border-radius: 50%; }
.cf-track.on .cf-thumb { right: 2px; background: #000; }
.cf-track.off .cf-thumb { left: 2px; background: #333; }


@keyframes htd-pulse { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes htd-arrow { 0%,100%{transform:translateX(0);opacity:0.2} 50%{transform:translateX(5px);opacity:0.7} }
@keyframes htd-fade-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes htd-prog { from{transform:scaleX(0)} to{transform:scaleX(1)} }

.htd { max-width:1280px; margin:0 auto 100px; padding:0 24px; position:relative; z-index:20; }

/* Chamfer heading */
.htd-chamfer-outer {
    display:inline-block; padding:1px;
    background:linear-gradient(135deg,#333 0%,#1a1a1a 50%,#333 100%);
    clip-path:polygon(18px 0%,100% 0%,100% calc(100% - 18px),calc(100% - 18px) 100%,0% 100%,0% 18px);
}
.htd-chamfer-inner {
    display:flex; align-items:center; gap:12px; padding:10px 22px;
    background:#000;
    clip-path:polygon(17px 0%,100% 0%,100% calc(100% - 17px),calc(100% - 17px) 100%,0% 100%,0% 17px);
}
.htd-pulse { width:6px; height:6px; background:#fff; border-radius:1px; flex-shrink:0; animation:htd-pulse 1.5s ease-in-out infinite; }
.htd-h2 { font-family:'Outfit',sans-serif; font-size:clamp(20px,3vw,32px); font-weight:800; color:#fff; margin:0; line-height:1; letter-spacing:0.08em; text-transform:uppercase; }
.htd-intro { font-size:13px; color:#666; line-height:1.7; max-width:520px; margin:12px 0 20px; }
.htd-intro strong { color:#aaa; font-weight:500; }

/* Switcher */
.htd-switcher {
    display:flex; align-items:center; gap:4px;
    padding:4px; background:#0A0A0A;
    border:1px solid #1C1C1C; border-radius:10px;
    margin-bottom:16px;
    width:100%; box-sizing:border-box;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.htd-switcher::-webkit-scrollbar { display:none; }
.htd-switch-btn {
    display:flex; align-items:center; gap:6px;
    padding:7px 14px; border-radius:7px;
    border:1px solid transparent;
    background:transparent; color:#555;
    font-family:'Outfit',sans-serif; font-size:12px; font-weight:600;
    cursor:pointer; transition:all 0.2s ease;
    white-space:nowrap; flex-shrink:0;
}
.htd-switch-btn svg { flex-shrink:0; }
.htd-switch-btn:hover { color:#888; }
.htd-switch-btn.active { background:#151515; border-color:#2A2A2A; color:#fff; }

/* Progress */
.htd-progress { height:1px; background:#111; border-radius:1px; overflow:hidden; margin-bottom:14px; }
.htd-progress-fill { height:100%; background:linear-gradient(90deg,transparent,#2E2E2E,transparent); transform-origin:left; transform:scaleX(0); }
.htd-progress-fill.run { animation:htd-prog 0.5s ease forwards; }

/* ── Grid row: 5 cards + 4 arrows between them ──
   columns: 1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr  */
.htd-grid {
    display:grid;
    grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
    align-items:stretch;
    width:100%;
    margin-bottom:10px;
}

/* Arrow column */
.htd-arr {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 1px;
}
.htd-arr svg {
    animation:htd-arrow 2s ease-in-out infinite;
    flex-shrink:0;
}
.htd-arr:nth-of-type(2)  svg { animation-delay:0.15s; }
.htd-arr:nth-of-type(3)  svg { animation-delay:0.3s; }
.htd-arr:nth-of-type(4)  svg { animation-delay:0.45s; }

/* Card */
.htd-card {
    background:#0F0F10;
    border:1px solid #1C1C1C;
    border-radius:12px;
    padding:14px;
    position:relative; overflow:hidden;
    transition:border-color 0.3s ease, transform 0.3s ease;
    display:flex; flex-direction:column; gap:8px;
    /* equal height */
    height:100%; box-sizing:border-box;
    opacity:0; animation:htd-fade-up 0.35s ease forwards;
}
.htd-card::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 60% 0%,rgba(255,255,255,0.025) 0%,transparent 60%);
    opacity:0; transition:opacity 0.3s ease; pointer-events:none;
}
.htd-card:hover { border-color:#2C2C2C; transform:translateY(-2px); }
.htd-card:hover::before { opacity:1; }
/* spacer pushes desc down so all titles align at same vertical pos */
.htd-card-spacer { flex:1; }

.htd-card-top { display:flex; justify-content:space-between; align-items:center; }
.htd-badge {
    display:flex; align-items:center; gap:4px;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.07);
    border-radius:20px; padding:2px 8px 2px 6px;
}
.htd-badge-dot { width:4px; height:4px; border-radius:50%; background:#fff; opacity:0.4; }
.htd-badge span { font-family:ui-monospace,monospace; font-size:8px; color:#777; letter-spacing:0.06em; text-transform:uppercase; }
.htd-step-num { font-family:ui-monospace,monospace; font-size:9px; color:#2C2C2C; font-weight:700; letter-spacing:0.1em; }

.htd-icon {
    width:30px; height:30px; background:#111; border:1px solid #1E1E1E;
    border-radius:7px; display:flex; align-items:center; justify-content:center;
    transition:border-color 0.3s ease; flex-shrink:0;
}
.htd-card:hover .htd-icon { border-color:#2E2E2E; }
.htd-title { font-family:'Outfit',sans-serif; font-size:13px; font-weight:700; color:#fff; margin:0; line-height:1.25; }
.htd-desc { font-size:11px; color:#555; line-height:1.6; margin:0; }
.htd-desc strong { color:#888; font-weight:500; }

/* Bottom bar */
.htd-bottom {
    display:flex; align-items:center; gap:16px;
    background:#0A0A0A; border:1px solid #1C1C1C; border-radius:12px;
    padding:12px 16px; flex-wrap:wrap;
}
.htd-dev { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.htd-dev-icon {
    width:34px; height:34px; background:#111; border:1px solid #1E1E1E;
    border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.htd-dev-label { font-size:8px; font-family:ui-monospace,monospace; color:#3A3A3A; text-transform:uppercase; letter-spacing:0.08em; display:block; }
.htd-dev-name { font-size:12px; font-weight:700; color:#ccc; font-family:'Outfit',sans-serif; display:block; margin-top:1px; }
.htd-div { width:1px; height:28px; background:#1E1E1E; flex-shrink:0; }
.htd-compat { display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex:1; min-width:0; }
.htd-compat-item { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.htd-compat-dot { width:3px; height:3px; border-radius:50%; background:#fff; opacity:0.25; }
.htd-compat-text { font-size:10px; color:#444; font-family:ui-monospace,monospace; }
.htd-dl {
    display:flex; align-items:center; gap:7px;
    background:#fff; color:#000; font-family:'Outfit',sans-serif;
    font-size:12px; font-weight:700; padding:9px 16px;
    border-radius:8px; border:none; cursor:pointer;
    transition:background 0.2s ease, transform 0.2s ease;
    text-decoration:none; flex-shrink:0; white-space:nowrap;
}
.htd-dl:hover { background:#e0e0e0; transform:translateY(-1px); }

/* Mobile */
@media (max-width:860px) {
    .htd-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .htd-arr { display:none; }
    .htd-bottom { gap:10px; }
    .htd-div { display:none; }
}
@media (max-width:480px) {
    .htd-grid { grid-template-columns: 1fr 1fr; gap:6px; }
    .htd-card { padding:12px; }
    .htd-bottom { flex-direction:column; align-items:flex-start; }
    .htd-compat { display:none; }
    .htd-dl { width:100%; justify-content:center; }
}


@keyframes uio-pulse { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes uio-fade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.uio { max-width:1280px; margin:0 auto 100px; padding:0 24px; position:relative; z-index:20; }

.uio-chamfer-outer {
    display:inline-block; padding:1px;
    background:linear-gradient(135deg,#333 0%,#1a1a1a 50%,#333 100%);
    clip-path:polygon(18px 0%,100% 0%,100% calc(100% - 18px),calc(100% - 18px) 100%,0% 100%,0% 18px);
}
.uio-chamfer-inner {
    display:flex; align-items:center; gap:12px; padding:10px 22px;
    background:#000;
    clip-path:polygon(17px 0%,100% 0%,100% calc(100% - 17px),calc(100% - 17px) 100%,0% 100%,0% 17px);
}
.uio-pulse { width:6px; height:6px; background:#fff; border-radius:1px; flex-shrink:0; animation:uio-pulse 1.5s ease-in-out infinite; }
.uio-h2 { font-family:'Outfit',sans-serif; font-size:clamp(20px,3vw,32px); font-weight:800; color:#fff; margin:0; line-height:1; letter-spacing:0.08em; text-transform:uppercase; }
.uio-intro { font-size:13px; color:#666; line-height:1.7; max-width:560px; margin:12px 0 20px; }
.uio-intro strong { color:#aaa; font-weight:500; }

/* ── Grid layout ──────────────────────────────────────
   Left col: 1 big frame (full height)
   Right col top: 2 mini side-by-side
   Right col bottom: 1 wide frame
───────────────────────────────────────────────────── */
.uio-grid {
    display:grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: auto;
    gap:8px;
}
.uio-left { display:flex; flex-direction:column; }
.uio-right {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap:8px;
}
.uio-right-wide { grid-column: 1 / 3; }

/* ── Mac frame ── */
.uio-frame {
    border-radius:10px;
    overflow:hidden;
    background:#0A0A0A;
    border:1px solid #1C1C1C;
    transition:border-color 0.3s ease, transform 0.3s ease;
    display:flex;
    flex-direction:column;
    opacity:0;
    animation:uio-fade 0.45s ease forwards;
}
.uio-frame:hover { border-color:#2C2C2C; transform:translateY(-2px); }
.uio-frame::after {
    content:''; position:absolute; inset:0; border-radius:10px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0);
    transition:box-shadow 0.3s ease; pointer-events:none; z-index:3;
}
.uio-frame:hover::after { box-shadow:inset 0 0 0 1px rgba(255,255,255,0.035); }
.uio-left .uio-frame { flex:1; animation-delay:0.05s; }
.uio-right .uio-frame:nth-child(1) { animation-delay:0.1s; }
.uio-right .uio-frame:nth-child(2) { animation-delay:0.15s; }
.uio-right .uio-frame:nth-child(3) { animation-delay:0.2s; }

/* Titlebar */
.uio-bar {
    display:flex; align-items:center;
    padding:0 10px; height:28px; flex-shrink:0;
    background:#0C0C0C; border-bottom:1px solid #181818;
    position:relative; z-index:2;
}
.uio-dots { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.uio-dot { width:9px; height:9px; border-radius:50%; }
.uio-d1 { background:#2E1515; border:1px solid #3E1A1A; }
.uio-d2 { background:#272310; border:1px solid #343012; }
.uio-d3 { background:#0F2410; border:1px solid #132C14; }
.uio-frame:hover .uio-d1 { background:#FF5F57; border-color:#E0443C; }
.uio-frame:hover .uio-d2 { background:#FEBC2E; border-color:#D49D1A; }
.uio-frame:hover .uio-d3 { background:#28C840; border-color:#1DAA32; }

.uio-bar-title {
    flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
}
.uio-bar-title span {
    font-family:ui-monospace,monospace; font-size:9px; color:#333;
    letter-spacing:0.04em; transition:color 0.3s ease;
}
.uio-frame:hover .uio-bar-title span { color:#4A4A4A; }
.uio-bar-right { width:38px; }

/* Image */
.uio-img {
    position:relative; overflow:hidden; flex:1;
}
.uio-img img {
    display:block; width:100%;
    aspect-ratio:680/383;
    object-fit:cover; object-position:top left;
    filter:brightness(0.82);
    transition:filter 0.3s ease, transform 0.45s ease;
}
/* big left image — no fixed aspect, fills height */
.uio-left .uio-img { flex:1; }
.uio-left .uio-img img { aspect-ratio:unset; height:100%; }

.uio-frame:hover .uio-img img { filter:brightness(1); transform:scale(1.012); }

/* Label */
.uio-lbl {
    position:absolute; bottom:0; left:0; right:0;
    padding:8px 12px 10px;
    background:linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 100%);
    display:flex; align-items:flex-end; justify-content:space-between;
    z-index:2; pointer-events:none;
}
.uio-lbl-name { font-family:'Outfit',sans-serif; font-size:11px; font-weight:700; color:#e0e0e0; }
.uio-lbl-tag { font-family:ui-monospace,monospace; font-size:8px; color:#4A4A4A; letter-spacing:0.06em; text-transform:uppercase; }

/* Scanlines */
.uio-scan {
    position:absolute; inset:0;
    background:repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px);
    pointer-events:none; z-index:1; opacity:0.6;
}

/* Responsive */
@media (max-width:860px) {
    .uio-grid { grid-template-columns:1fr; }
    .uio-left .uio-img img { aspect-ratio:680/383; height:auto; }
    .uio-right { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
    .uio-right { grid-template-columns:1fr; }
    .uio-right-wide { grid-column:1/2; }
}




@keyframes ss-pulse { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes ss-fade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes ss-run { 0%{transform:translateX(-100%)} 100%{transform:translateX(400%)} }
@keyframes ss-ping { 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(2.2);opacity:0} }

.ss { max-width:1280px; margin:0 auto 100px; padding:0 24px; position:relative; z-index:20; }

/* Heading */
.ss-chamfer-outer {
    display:inline-block; padding:1px;
    background:linear-gradient(135deg,#333 0%,#1a1a1a 50%,#333 100%);
    clip-path:polygon(18px 0%,100% 0%,100% calc(100% - 18px),calc(100% - 18px) 100%,0% 100%,0% 18px);
}
.ss-chamfer-inner {
    display:flex; align-items:center; gap:12px; padding:10px 22px;
    background:#000;
    clip-path:polygon(17px 0%,100% 0%,100% calc(100% - 17px),calc(100% - 17px) 100%,0% 100%,0% 17px);
}
.ss-pulse { width:6px; height:6px; background:#fff; border-radius:1px; flex-shrink:0; animation:ss-pulse 1.5s ease-in-out infinite; }
.ss-h2 { font-family:'Outfit',sans-serif; font-size:clamp(20px,3vw,32px); font-weight:800; color:#fff; margin:0; line-height:1; letter-spacing:0.08em; text-transform:uppercase; }
.ss-intro { font-size:13px; color:#666; line-height:1.7; max-width:600px; margin:12px 0 24px; }
.ss-intro strong { color:#aaa; font-weight:500; }

/* Grid: 5 cols, 2 rows — last card spans 2 cols */
.ss-grid {
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    grid-template-rows:auto auto;
    gap:10px;
}
/* card 9 (last) spans 2 cols in row 2 */
.ss-card:nth-child(9) { grid-column:span 2; }

@media (max-width:1024px) {
    .ss-grid { grid-template-columns:repeat(3,1fr); }
    .ss-card:nth-child(9) { grid-column:span 2; }
}
@media (max-width:640px) {
    .ss-grid { grid-template-columns:repeat(2,1fr); }
    .ss-card:nth-child(9) { grid-column:span 2; }
}

/* Card base */
.ss-card {
    background:#0F0F10;
    border:1px solid #1C1C1C;
    border-radius:12px;
    padding:14px;
    position:relative; overflow:hidden;
    display:flex; flex-direction:column; gap:8px;
    transition:border-color 0.3s ease, transform 0.3s ease;
    opacity:0; animation:ss-fade 0.4s ease forwards;
}
.ss-card::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 70% 0%,rgba(255,255,255,0.025) 0%,transparent 55%);
    opacity:0; transition:opacity 0.3s ease; pointer-events:none;
}
.ss-card:hover { border-color:#2C2C2C; transform:translateY(-2px); }
.ss-card:hover::before { opacity:1; }

/* Stagger delays */
.ss-card:nth-child(1){animation-delay:.04s}
.ss-card:nth-child(2){animation-delay:.08s}
.ss-card:nth-child(3){animation-delay:.12s}
.ss-card:nth-child(4){animation-delay:.16s}
.ss-card:nth-child(5){animation-delay:.20s}
.ss-card:nth-child(6){animation-delay:.24s}
.ss-card:nth-child(7){animation-delay:.28s}
.ss-card:nth-child(8){animation-delay:.32s}
.ss-card:nth-child(9){animation-delay:.36s}

/* Card top row */
.ss-top { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; }

/* Game icon placeholder */
.ss-icon {
    width:32px; height:32px; border-radius:8px;
    background:#111; border:1px solid #1E1E1E;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:border-color 0.3s ease;
    font-size:14px; line-height:1;
}
.ss-card:hover .ss-icon { border-color:#2A2A2A; }

/* Status badge */
.ss-status {
    display:flex; align-items:center; gap:4px;
    padding:2px 7px 2px 5px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.07);
    background:rgba(255,255,255,0.04);
}
.ss-status-dot {
    width:5px; height:5px; border-radius:50%; flex-shrink:0;
    position:relative;
}
.ss-status-dot::after {
    content:''; position:absolute; inset:0; border-radius:50%;
    animation:ss-ping 2s ease-out infinite;
}
.ss-status.working .ss-status-dot { background:#3A7A3A; }
.ss-status.working .ss-status-dot::after { background:#3A7A3A; }
.ss-status.working span { color:#5A9A5A; font-size:8px; font-family:ui-monospace,monospace; letter-spacing:0.06em; text-transform:uppercase; }

.ss-status.updated .ss-status-dot { background:#6A5A1A; }
.ss-status.updated .ss-status-dot::after { background:#888; animation:none; }
.ss-status.updated span { color:#888; font-size:8px; font-family:ui-monospace,monospace; letter-spacing:0.06em; text-transform:uppercase; }

/* Title */
.ss-title {
    font-family:'Outfit',sans-serif;
    font-size:13px; font-weight:700; color:#fff;
    margin:0; line-height:1.3;
}

/* Features list */
.ss-features {
    display:flex; flex-wrap:wrap; gap:4px;
    margin-top:2px;
}
.ss-feat {
    font-family:ui-monospace,monospace;
    font-size:9px; color:#555;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.05);
    padding:2px 6px; border-radius:3px;
    letter-spacing:0.03em;
    transition:color 0.3s ease, border-color 0.3s ease;
}
.ss-card:hover .ss-feat { color:#777; border-color:rgba(255,255,255,0.08); }

/* Version badge */
.ss-ver {
    font-family:ui-monospace,monospace;
    font-size:8px; color:#2E2E2E;
    margin-top:auto;
    padding-top:6px;
}

/* Load bar on hover */
.ss-bar { height:1px; background:#141414; border-radius:1px; overflow:hidden; position:relative; margin-top:auto; }
.ss-bar-fill {
    position:absolute; inset:0;
    background:linear-gradient(90deg,transparent,#2A2A2A,transparent);
    transform:translateX(-100%);
}
.ss-card:hover .ss-bar-fill { animation:ss-run 1.6s ease-in-out infinite; }

/* ── Wide CTA card (9th) ── */
.ss-cta {
    background:#0C0C0C;
    border-color:#1E1E1E;
    justify-content:center; align-items:flex-start;
    gap:10px;
}
.ss-cta::after {
    content:''; position:absolute;
    left:0; top:0; right:0; bottom:0;
    background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,0.025) 0%,transparent 70%);
    pointer-events:none;
}
.ss-cta-count {
    font-family:'Outfit',sans-serif;
    font-size:clamp(28px,4vw,42px);
    font-weight:800; color:#fff;
    letter-spacing:-0.02em; line-height:1;
}
.ss-cta-count span { color:#333; }
.ss-cta-sub {
    font-size:12px; color:#555; line-height:1.5; margin:0;
}
.ss-cta-sub strong { color:#888; font-weight:500; }
.ss-cta-btn {
    display:inline-flex; align-items:center; gap:7px;
    background:#fff; color:#000;
    font-family:'Outfit',sans-serif; font-size:12px; font-weight:700;
    padding:9px 18px; border-radius:8px; border:none;
    cursor:pointer; transition:background 0.2s ease, transform 0.2s ease;
    text-decoration:none; margin-top:4px;
}
.ss-cta-btn:hover { background:#e0e0e0; transform:translateY(-1px); }




@keyframes cmp-pulse { 0%,100%{opacity:1} 50%{opacity:0} }

.cmp-section {
    max-width: 1280px;
    margin: 0 auto 120px;
    padding: 0 24px;
    position: relative;
    z-index: 20;
}

/* Left-aligned header */
.cmp-header-wrapper {
    margin-bottom: 40px;
    max-width: 768px;
}

.cmp-chamfer-outer {
    display: inline-block;
    padding: 1px;
    background: linear-gradient(135deg, #333 0%, #1a1a1a 50%, #333 100%);
    clip-path: polygon(16px 0%, 100% 0%, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0% 100%, 0% 16px);
    margin-bottom: 20px;
}

.cmp-chamfer-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    background: #000;
    clip-path: polygon(15px 0%, 100% 0%, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0% 100%, 0% 15px);
}

.cmp-pulse {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 1px;
    animation: cmp-pulse 1.5s ease-in-out infinite;
}

.cmp-h2 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cmp-intro {
    font-size: 15px;
    color: #B8B8B8;
    line-height: 1.6;
    margin: 0;
}

.cmp-keyword {
    color: #FFF;
    font-weight: 600;
}

.cmp-table-wrapper {
    background: #0F0F10;
    border: 1px solid #151515;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
}

.cmp-table-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 0%, rgba(255,255,255,0.015) 0%, transparent 60%);
    pointer-events: none;
}

.cmp-grid {
    display: flex;
    flex-direction: column;
}

.cmp-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr;
    border-bottom: 1px solid #151515;
    transition: background 0.3s ease;
}

.cmp-row:last-child {
    border-bottom: none;
}

.cmp-row:not(.cmp-head):hover {
    background: rgba(255, 255, 255, 0.02);
}

.cmp-cell {
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cmp-head .cmp-cell {
    padding-top: 24px;
    padding-bottom: 24px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.cmp-head-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
}

.cmp-head-sub {
    font-size: 11px;
    color: #555;
    font-family: ui-monospace, monospace;
}

.cmp-label {
    font-weight: 600;
    color: #fff;
    font-size: 14px;
    align-items: center;
}

.cmp-others {
    border-right: 1px solid #151515;
    border-left: 1px solid #151515;
    color: #888;
}

.cmp-proto {
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
    color: #fff;
    position: relative;
}

.cmp-head .cmp-proto {
    background: rgba(255,255,255,0.03);
}

.cmp-proto-badge {
    background: #fff;
    color: #000;
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.cmp-text-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cmp-val {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.cmp-sub {
    font-size: 12px;
    color: #666;
    line-height: 1.2;
}

.cmp-proto .cmp-sub {
    color: #999;
}

.cmp-icon-warn {
    width: 18px;
    height: 18px;
    color: #555;
    flex-shrink: 0;
    margin-top: -1px;
}

.cmp-icon-check {
    width: 18px;
    height: 18px;
    color: #fff;
    flex-shrink: 0;
    margin-top: -1px;
}

.cmp-highlight-text {
    text-shadow: 0 0 12px rgba(255,255,255,0.2);
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .cmp-row {
        display: flex;
        flex-wrap: wrap;
    }
    
    .cmp-head {
        display: none;
    }

    .cmp-label {
        width: 100%;
        background: #111;
        border-bottom: 1px solid #1c1c1c;
        padding: 14px 20px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #7A7A7A;
    }

    .cmp-others, .cmp-proto {
        width: 50%;
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start;
        border: none;
    }

    .cmp-others {
        border-right: 1px solid #1c1c1c;
        border-bottom: 1px solid #151515;
    }

    .cmp-proto {
        border-bottom: 1px solid #151515;
    }

    .cmp-row:last-child .cmp-others,
    .cmp-row:last-child .cmp-proto {
        border-bottom: none;
    }

    .cmp-icon-warn, .cmp-icon-check {
        margin-bottom: 8px;
    }

    .cmp-val {
        font-size: 13px;
    }

    .cmp-sub {
        font-size: 11px;
    }
}


@keyframes cl-fade-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.cl-section {
    max-width: 1270px;
    margin: 0 auto 120px;
    padding: 0 24px;
    position: relative;
    z-index: 20;
}

/* Header */
.cl-header-wrapper {
    margin-bottom: 40px;
    max-width: 700px;
}

.cl-chamfer-outer {
    display: inline-block;
    padding: 1px;
    background: linear-gradient(135deg, #333 0%, #1a1a1a 50%, #333 100%);
    clip-path: polygon(16px 0%, 100% 0%, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0% 100%, 0% 16px);
    margin-bottom: 20px;
}

.cl-chamfer-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    background: #000;
    clip-path: polygon(15px 0%, 100% 0%, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0% 100%, 0% 15px);
}

.cl-pulse {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 1px;
    animation: cmp-pulse 1.5s ease-in-out infinite;
}

.cl-h2 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cl-intro {
    font-size: 15px;
    color: #B8B8B8;
    line-height: 1.6;
    margin: 0;
}

.cl-keyword {
    color: #FFF;
    font-weight: 600;
}

/* Mac Mockup */
.cl-mac-window {
    background: #000;
    border: 1px solid #1c1c1c;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
}

.cl-mac-topbar {
    background: #0a0a0a;
    border-bottom: 1px solid #1c1c1c;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cl-mac-dots {
    display: flex;
    gap: 8px;
    width: 48px;
}

.cl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2A2A2A;
}

.cl-mac-title {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: #555;
    letter-spacing: 0.05em;
}

/* Body Split */
.cl-mac-body {
    display: flex;
    height: 450px;
    background: radial-gradient(circle at 100% 100%, rgba(255,255,255,0.02) 0%, transparent 60%);
}

/* Sidebar */
.cl-sidebar {
    width: 220px;
    border-right: 1px solid #1c1c1c;
    background: #050505;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 8px;
    overflow-y: auto;
}

.cl-version-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.cl-version-btn:hover {
    background: rgba(255, 255, 255, 0.03);
}

.cl-version-btn.active {
    background: rgba(255, 255, 255, 0.05);
    border-color: #2a2a2a;
}

.cl-ver-name {
    font-family: ui-monospace, monospace;
    font-size: 13px;
    color: #7A7A7A;
    font-weight: 600;
}

.cl-version-btn.active .cl-ver-name {
    color: #fff;
}

.cl-ver-badge {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    background: #fff;
    color: #000;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Content Area */
.cl-content-area {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
    position: relative;
}

.cl-panel {
    display: none;
}

.cl-panel.active {
    display: block;
    animation: cl-fade-in 0.4s ease forwards;
}

.cl-panel-header {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 12px;
}

.cl-panel-title {
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin: 0;
}

.cl-panel-date {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    color: #666;
    padding-bottom: 2px;
}

.cl-panel-desc {
    font-size: 14px;
    color: #888;
    line-height: 1.5;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #1c1c1c;
}

/* Logs */
.cl-log-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cl-log-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.cl-tag {
    font-family: ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    width: 70px;
    text-align: center;
}

.cl-tag-added { background: rgba(255, 255, 255, 0.1); color: #fff; }
.cl-tag-improved { background: rgba(122, 122, 122, 0.1); color: #aaa; }
.cl-tag-fixed { background: transparent; border: 1px solid #333; color: #777; }

.cl-log-text {
    font-size: 14px;
    color: #ccc;
    line-height: 1.5;
    padding-top: 1px;
}

/* Scrollbar styling for Mac window */
.cl-content-area::-webkit-scrollbar { width: 6px; }
.cl-content-area::-webkit-scrollbar-track { background: transparent; }
.cl-content-area::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
.cl-content-area::-webkit-scrollbar-thumb:hover { background: #444; }

/* Mobile Optimization */
@media (max-width: 768px) {
    .cl-mac-body {
        flex-direction: column;
        height: auto;
        min-height: 500px;
    }

    .cl-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid #1c1c1c;
        padding: 12px;
        gap: 12px;
        /* Hide scrollbar for clean look */
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    
    .cl-sidebar::-webkit-scrollbar {
        display: none;
    }

    .cl-version-btn {
        flex-shrink: 0;
        padding: 8px 16px;
        background: #0a0a0a;
        border: 1px solid #1c1c1c;
    }

    .cl-version-btn.active {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .cl-content-area {
        padding: 24px 20px;
        height: 400px;
    }

    .cl-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .cl-panel-title {
        font-size: 24px;
    }

    .cl-log-item {
        flex-direction: column;
        gap: 8px;
    }

    .cl-tag {
        width: auto;
    }
}




/* FOOTER STYLES */
.ft-wrapper {
    background-color: #050505;
    border-top: 1px solid #151515;
    position: relative;
    z-index: 10;
    margin-top: 60px;
}

.ft-container {
    max-width: 1270px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Top Section */
.ft-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 60px;
    padding: 60px 0 40px;
}

/* Brand Area */
.ft-brand {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
}

.ft-logo-group {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 20px;
}

.ft-logo-box {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ft-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.ft-logo-group:hover .ft-logo-img {
    filter: grayscale(0%);
    opacity: 1;
}

.ft-brand-name {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.05em;
}

.ft-brand-desc {
    font-size: 13px;
    color: #7A7A7A;
    line-height: 1.6;
    margin-bottom: 24px;
}

.ft-keyword {
    color: #A3A3A3;
    font-weight: 500;
}

.ft-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0f0f10;
    border: 1px solid #1c1c1c;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: #888;
}

.ft-trust-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2E8B57;
    position: relative;
}
.ft-trust-dot::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: rgba(46, 139, 87, 0.4);
    animation: pulse 2s infinite;
}

.ft-trust-ver {
    color: #fff;
    font-weight: 600;
}

/* Links Area */
.ft-links-grid {
    display: flex;
    gap: 80px;
    flex-wrap: wrap;
}

.ft-link-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ft-col-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.ft-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ft-link {
    font-size: 13px;
    color: #7A7A7A;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ft-link:hover {
    color: #fff;
}

/* Middle Section: Socials */
.ft-social-strip {
    border-top: 1px solid #151515;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.ft-social-label {
    font-size: 13px;
    color: #7A7A7A;
    font-weight: 500;
}

.ft-social-icons {
    display: flex;
    gap: 12px;
}

.ft-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #0f0f10;
    border: 1px solid #1c1c1c;
    border-radius: 8px;
    color: #7A7A7A;
    transition: all 0.3s ease;
}

.ft-social-link svg {
    width: 16px;
    height: 16px;
}

.ft-social-link:hover {
    background: #1a1a1a;
    border-color: #333;
    color: #fff;
    transform: translateY(-2px);
}

/* Bottom Section */
.ft-bottom {
    border-top: 1px solid #151515;
    padding: 24px 0 32px;
    display: flex;
    flex-direction: column;
    md:flex-row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: center;
}

.ft-copyright {
    font-size: 12px;
    color: #555;
}

.ft-copyright strong {
    color: #777;
    font-weight: 600;
}

.ft-disclaimer {
    font-size: 11px;
    color: #444;
    max-width: 500px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .ft-top {
        gap: 40px;
        padding: 40px 0 30px;
    }
    
    .ft-links-grid {
        gap: 40px;
        width: 100%;
        justify-content: space-between;
    }
    
    .ft-link-col {
        min-width: 120px;
    }

    .ft-social-strip {
        flex-direction: column;
        justify-content: center;
    }

    .ft-bottom {
        flex-direction: column;
    }
}