:root{
            --font: 'DM Sans', sans-serif;
            --black: #FBFAF9;
            --gray-900: #FFFFFF;
            --gray-800: #E6E2DD;
            --gray-700: #D2CCC4;
            --gray-600: #57514A;
            --gray-500: #766E65;
            --gray-400: #766E65;
            --gray-300: #57514A;
            --gray-200: #E6E2DD;
            --white: #16130F;
            --blue: #B84A00;
            --green: #1E7A3E;
            --orange: #8A5A00;
            --purple: #6B3FA0;
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 20px;
            --radius-xl: 28px;
        }
*, *::before, *::after{ margin: 0; padding: 0; box-sizing: border-box; }
body{
            font-family: var(--font);
            background: var(--black);
            color: var(--gray-300);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }
a{ color: inherit; text-decoration: none; }
.container{
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }
.btn{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 600;
            font-family: var(--font);
            border-radius: var(--radius-sm);
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
        }
.btn-primary{
            background:var(--o);
            color: var(--white);
        }
.btn-primary:hover{ background: #2563eb; }
.btn-secondary{
            background: var(--gray-800);
            color: var(--white);
            border: 1px solid var(--gray-700);
        }
.btn-secondary:hover{ background: var(--gray-700); }
/* HERO */
        .hero{
            padding: 80px 0 60px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
.hero::before{
            content: '';
            position: absolute;
            top: -120px;
            left: 50%;
            transform: translateX(-50%);
            width: 800px;
            height: 500px;
            background: radial-gradient(ellipse, rgba(168, 85, 247, 0.12) 0%, rgba(59, 130, 246, 0.06) 40%, transparent 70%);
            pointer-events: none;
        }
.breadcrumb{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 13px;
            color: var(--gray-500);
            margin-bottom: 24px;
            position: relative;
            z-index: 1;
        }
.breadcrumb a{
            color: var(--gray-500);
            transition: color 0.2s;
        }
.breadcrumb a:hover{ color: var(--white); }
.breadcrumb-sep{ color: var(--gray-600); }
.breadcrumb-current{ color: var(--gray-400); }
.hero h1{
            font-size: 52px;
            font-weight: 800;
            color: var(--white);
            line-height: 1.1;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }
.hero p{
            font-size: 18px;
            color: var(--gray-400);
            max-width: 640px;
            margin: 0 auto;
            line-height: 1.7;
            position: relative;
            z-index: 1;
        }
.version-badge{
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 20px;
            padding: 6px 16px;
            background: rgba(168, 85, 247, 0.12);
            border: 1px solid rgba(168, 85, 247, 0.25);
            border-radius: 100px;
            font-size: 13px;
            font-weight: 600;
            color: var(--purple);
            position: relative;
            z-index: 1;
        }
/* SECTION HEADERS */
        .section-header{
            text-align: center;
            margin-bottom: 48px;
        }
.section-header h2{
            font-size: 36px;
            font-weight: 800;
            color: var(--white);
            margin-bottom: 12px;
        }
.section-header p{
            font-size: 16px;
            color: var(--gray-400);
            max-width: 560px;
            margin: 0 auto;
            line-height: 1.6;
        }
/* HARDWARE PRIORITY BARS */
        .priority-section{
            padding: 0 0 80px;
        }
.priority-bars{
            max-width: 700px;
            margin: 0 auto 64px;
            padding: 0 24px;
        }
.priority-bar{
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }
.priority-label{
            min-width: 80px;
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-300);
        }
.priority-track{
            flex: 1;
            height: 32px;
            background: var(--gray-800);
            border-radius: 100px;
            overflow: hidden;
            position: relative;
        }
.priority-fill{
            height: 100%;
            border-radius: 100px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 12px;
            font-size: 12px;
            font-weight: 600;
        }
.priority-tag{
            font-size: 12px;
            color: var(--gray-500);
            min-width: 100px;
            text-align: right;
        }
/* CONFIG CARDS */
        .configs-section{
            padding: 0 0 80px;
        }
.config-cards{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }
.config-card{
            background: var(--gray-900);
            border: 1px solid var(--gray-800);
            border-radius: var(--radius-xl);
            padding: 32px;
            position: relative;
        }
.config-card.recommended{
            border-color: var(--blue);
        }
.config-badge{
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            padding: 4px 16px;
            background:var(--o);
            border-radius: 100px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--white);
        }
.config-card h3{
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 4px;
            color: var(--white);
        }
.config-price{
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
        }
.config-usecase{
            font-size: 14px;
            color: var(--gray-400);
            margin-bottom: 24px;
            line-height: 1.5;
        }
.spec-list{
            list-style: none;
        }
.spec-list li{
            display: flex;
            gap: 12px;
            padding: 10px 0;
            border-top: 1px solid var(--gray-800);
            font-size: 14px;
        }
.spec-label{
            color: var(--gray-500);
            min-width: 70px;
            font-weight: 500;
        }
.spec-value{
            color: var(--gray-300);
        }
.config-note{
            margin-top: 16px;
            padding: 12px 16px;
            background: var(--gray-800);
            border-radius: var(--radius-sm);
            font-size: 13px;
            color: var(--gray-400);
        }
/* WHY THESE SPECS */
        .why-section{
            padding: 0 0 80px;
        }
.why-grid{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }
.why-card{
            background: var(--gray-900);
            border: 1px solid var(--gray-800);
            border-radius: var(--radius-lg);
            padding: 32px;
        }
.why-card-icon{
            width: 48px;
            height: 48px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin-bottom: 16px;
        }
.why-card h3{
            font-size: 18px;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 8px;
        }
.why-card p{
            font-size: 14px;
            color: var(--gray-400);
            line-height: 1.7;
        }
/* CTA */
        .cta-section{
            padding: 0 0 80px;
        }
.cta-box{
            background: var(--gray-900);
            border: 1px solid var(--gray-800);
            border-radius: var(--radius-xl);
            padding: 64px;
            text-align: center;
        }
.cta-box h2{
            font-size: 36px;
            font-weight: 800;
            color: var(--white);
            margin-bottom: 16px;
        }
.cta-box p{
            font-size: 17px;
            color: var(--gray-400);
            max-width: 560px;
            margin: 0 auto 32px;
            line-height: 1.6;
        }
.cta-buttons{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
        }
.cta-buttons .btn{
            padding: 14px 28px;
            font-size: 15px;
        }
/* RELATED SOFTWARE */
        .related-section{
            padding: 0 0 100px;
        }
.related-grid{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
.related-card{
            background: var(--gray-900);
            border: 1px solid var(--gray-800);
            border-radius: var(--radius-lg);
            padding: 24px;
            transition: all 0.3s;
            display: block;
        }
.related-card:hover{
            border-color: var(--gray-700);
            transform: translateY(-4px);
        }
.related-card h4{
            font-size: 16px;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 6px;
        }
.related-card p{
            font-size: 13px;
            color: var(--gray-500);
            line-height: 1.5;
        }
.related-card-link{
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-top: 12px;
            font-size: 13px;
            font-weight: 600;
            color: var(--blue);
            transition: gap 0.2s;
        }
.related-card:hover .related-card-link{ gap: 8px; }
/* RESPONSIVE */
        @media (max-width: 1024px){
            .config-cards {
                grid-template-columns: 1fr;
                max-width: 500px;
            }
        }
@media (max-width: 768px){.hero{ padding: 60px 0 40px; }
.hero h1{ font-size: 32px; }
.hero p{ font-size: 16px; }
.priority-bar{ flex-direction: column; align-items: flex-start; gap: 8px; }
.priority-label{ min-width: unset; }
.priority-tag{ text-align: left; min-width: unset; }
.why-grid{
                grid-template-columns: 1fr;
            }
.related-grid{
                grid-template-columns: 1fr;
            }
.cta-box{ padding: 40px 24px; }
.cta-box h2{ font-size: 28px; }
.section-header h2{ font-size: 28px; }

        }