/* HERO AREA Layout */
        .hero-section {
            padding: 80px 0 60px 0;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 60px;
            align-items: center;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            background: var(--primary-light);
            color: var(--primary);
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 500;
            margin-bottom: 24px;
        }

        .hero-content h1 {
            font-size: 3.2rem;
            line-height: 1.15;
            letter-spacing: -0.04em;
            color: var(--text-main);
            margin-bottom: 20px;
        }

        .hero-content h1 span {
            color: var(--primary);
        }

        .hero-content p {
            font-size: 1.05rem;
            color: var(--text-muted);
            margin-bottom: 32px;
            max-width: 520px;
        }

        .hero-buttons {
            display: flex;
            gap: 16px;
            margin-bottom: 36px;
        }

        /* Primary and Secondary CTA Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 12px 24px;
            font-size: 0.95rem;
            font-weight: 500;
            border-radius: 8px;
            cursor: pointer;
            transition: var(--transition-smooth);
            text-decoration: none;
        }

        .btn-primary {
            background: var(--primary);
            color: #ffffff;
            border: 1px solid transparent;
            box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
        }

        .btn-primary:hover {
            background: #4338ca;
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);
        }

        .btn-secondary {
            background: var(--bg-surface);
            color: var(--text-main);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-soft);
        }

        .btn-secondary:hover {
            border-color: #cbd5e1;
            transform: translateY(-1px);
        }

        /* NEW PROMINENT SUPPORTED PLATFORMS HERO CONTAINER */
        .hero-platforms-bar {
            border-top: 1px solid var(--border-color);
            padding-top: 24px;
            margin-top: 12px;
        }

        .platforms-title {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            font-weight: 500;
            margin-bottom: 14px;
        }

        .platforms-grid {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .platform-hero-card {
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 10px 18px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-main);
            box-shadow: var(--shadow-soft);
            transition: var(--transition-smooth);
            cursor: pointer;
        }

        .platform-hero-card:hover {
            border-color: var(--primary);
            color: var(--primary);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08);
        }

        .platform-hero-card i {
            font-size: 1.1rem;
            color: var(--text-muted);
            transition: var(--transition-smooth);
        }

        .platform-hero-card:hover i {
            color: var(--primary);
        }

        /* Clean Visual Representation of the Client */
        .hero-visual {
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 36px;
            box-shadow: var(--shadow-premium);
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .hero-visual-top {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .hero-logo-big {
            width: 64px;
            height: 64px;
            object-fit: contain;
            flex-shrink: 0;
        }

        .hero-app-name {
            font-size: 1.6rem;
            font-weight: 600;
            color: var(--text-main);
            letter-spacing: -0.03em;
        }

        .hero-app-version {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-top: 2px;
            font-family: var(--font-mono);
        }

        .hero-visual-section-label {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            font-weight: 500;
        }

        .hero-visual-protocols {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .proto-tag {
            background: var(--bg-neutral);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 4px 10px;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-main);
            font-family: var(--font-mono);
        }

        .hero-visual-divider {
            height: 1px;
            background: var(--border-color);
        }

        .hero-visual-stats {
            display: flex;
            justify-content: space-around;
            text-align: center;
        }

        .hero-stat {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .stat-num {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary);
            letter-spacing: -0.02em;
        }

        .stat-label {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        /* TRUST METRICS (Purely functional metrics, completely decoupled from GitHub) */
        .trust-metrics {
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            background: var(--bg-surface);
            padding: 32px 0;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            text-align: center;
        }

        .metric-card h3 {
            font-size: 2.2rem;
            font-weight: 600;
            color: var(--text-main);
            margin-bottom: 2px;
        }

        .metric-card p {
            font-size: 0.8rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* */
        /* CORE FEATURES SECTION */
        .features-section {
            padding: 80px 0;
        }

        .section-header {
            text-align: center;
            max-width: 580px;
            margin: 0 auto 50px auto;
        }

        .section-header h2 {
            font-size: 2.2rem;
            color: var(--text-main);
            margin-bottom: 12px;
            letter-spacing: -0.03em;
        }

        .section-header p {
            color: var(--text-muted);
            font-size: 1rem;
        }

        /* Asymmetric feature grid */
        .features-grid {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 20px;
        }

        .feat-col-right {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .feature-card {
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 32px;
            box-shadow: var(--shadow-soft);
            transition: var(--transition-smooth);
            position: relative;
            overflow: hidden;
        }

        .feature-card:hover {
            border-color: #c7d2fe;
            box-shadow: var(--shadow-premium);
            transform: translateY(-2px);
        }

        .feat-body,
        .feat-demo,
        .feat-protocols,
        .feat-perf {
            position: relative;
            z-index: 1;
        }

        .feat-body h3 {
            font-size: 1.2rem;
            font-weight: 500;
            color: var(--text-main);
            margin-bottom: 8px;
            letter-spacing: -0.02em;
        }

        .feat-body p {
            font-size: 0.88rem;
            color: var(--text-muted);
            line-height: 1.65;
            margin-bottom: 22px;
        }

        /* Rule config preview lines */
        .feat-demo {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .feat-rule-line {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.78rem;
            font-family: var(--font-mono);
            background: var(--bg-neutral);
            border-radius: 7px;
            padding: 8px 12px;
        }

        .rule-type  { color: var(--text-muted); min-width: 120px; }
        .rule-target { color: var(--text-main); flex: 1; font-weight: 600; }

        .rule-action {
            font-size: 0.7rem;
            font-weight: 500;
            padding: 2px 8px;
            border-radius: 4px;
        }

        .rule-proxy  { background: #e0e7ff; color: var(--primary); }
        .rule-direct { background: #d1fae5; color: var(--success); }
        .rule-block  { background: #fee2e2; color: var(--danger); }

        /* Protocol tag pills */
        .feat-protocols {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }

        .fp-tag {
            background: var(--bg-neutral);
            border: 1px solid var(--border-color);
            border-radius: 5px;
            padding: 4px 10px;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-main);
            font-family: var(--font-mono);
        }

        .fp-tag--more {
            background: var(--primary-light);
            border-color: transparent;
            color: var(--primary);
        }

        /* Performance metrics strip */
        .feat-perf {
            display: flex;
            align-items: center;
            background: var(--bg-neutral);
            border-radius: 10px;
            padding: 14px 0;
        }

        .perf-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
        }

        .perf-val {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-main);
            letter-spacing: -0.02em;
            line-height: 1;
        }

        .perf-val small {
            font-size: 0.6rem;
            font-weight: 600;
            color: var(--text-muted);
            margin-left: 1px;
        }

        .perf-label {
            font-size: 0.7rem;
            color: var(--text-muted);
        }

        .perf-divider {
            width: 1px;
            height: 28px;
            background: var(--border-color);
        }

        @media (max-width: 768px) {
            .features-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ==========================================
           CLASH ROUTING VISUALIZATION SECTION
           ========================================== */
        .diagram-section {
            padding: 100px 0;
            background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }

        .diagram-header {
            text-align: center;
            margin-bottom: 56px;
        }

        .diagram-header h2 {
            font-size: 2.2rem;
            font-weight: 600;
            color: var(--text-main);
            letter-spacing: -0.03em;
            margin-bottom: 12px;
        }

        .diagram-header p {
            font-size: 1rem;
            color: var(--text-muted);
            max-width: 560px;
            margin: 0 auto;
        }

        .diagram-body {
            display: grid;
            grid-template-columns: 260px 1fr;
            gap: 28px;
            align-items: start;
        }

        /* Scenario selector */
        .scenario-panel {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .scenario-panel-label {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-muted);
            font-weight: 500;
            margin-bottom: 4px;
            padding-left: 2px;
        }

        .scenario-btn {
            background: var(--bg-surface);
            border: 1.5px solid var(--border-color);
            border-radius: 12px;
            padding: 14px 16px;
            text-align: left;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 6px;
            transition: var(--transition-smooth);
            width: 100%;
        }

        .scenario-btn:hover {
            border-color: #c7d2fe;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.06);
        }

        .scenario-btn.active {
            border-color: var(--primary);
            background: var(--primary-light);
        }

        .scenario-btn-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .scenario-title {
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-main);
        }

        .scenario-url {
            font-size: 0.75rem;
            font-family: var(--font-mono);
            color: var(--text-muted);
        }

        .route-badge {
            font-size: 0.72rem;
            padding: 2px 10px;
            border-radius: 20px;
            font-weight: 500;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .badge-green  { background: #d1fae5; color: var(--success); }
        .badge-indigo { background: #e0e7ff; color: var(--primary); }
        .badge-red    { background: #fee2e2; color: var(--danger); }

        .scenario-tip {
            margin-top: 16px;
            padding: 14px;
            background: var(--bg-neutral);
            border-radius: 10px;
            font-size: 0.8rem;
            color: var(--text-muted);
            line-height: 1.65;
        }

        /* Current request bar */
        .req-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 16px;
            background: var(--bg-neutral);
            border-radius: 8px;
            margin-bottom: 16px;
            min-height: 38px;
            transition: all 0.3s;
        }
        .req-bar.rb-direct { background: #d1fae5; }
        .req-bar.rb-proxy  { background: #ede9fe; }
        .req-bar.rb-block  { background: #fee2e2; }
        .req-bar-dot {
            width: 9px; height: 9px;
            border-radius: 50%;
            background: var(--text-muted);
            flex-shrink: 0;
        }
        .req-bar.rb-direct .req-bar-dot { background: var(--success); animation: node-pulse-green 1s ease-out infinite; }
        .req-bar.rb-proxy  .req-bar-dot { background: var(--primary); animation: node-pulse-ring  1s ease-out infinite; }
        .req-bar.rb-block  .req-bar-dot { background: var(--danger);  animation: node-pulse-red   1s ease-out infinite; }
        .req-bar-url {
            font-family: var(--font-mono);
            font-size: 0.82rem;
            font-weight: 500;
            color: var(--text-main);
            flex: 1;
        }
        .req-bar-dest {
            font-size: 0.72rem;
            font-weight: 500;
            padding: 2px 9px;
            border-radius: 20px;
        }
        .req-bar.rb-direct .req-bar-dest { background: #a7f3d0; color: #065f46; }
        .req-bar.rb-proxy  .req-bar-dest { background: #c4b5fd; color: #3730a3; }
        .req-bar.rb-block  .req-bar-dest { background: #fca5a5; color: #991b1b; }
        .req-bar-idle { color: var(--text-muted); font-size: 0.8rem; }
        .req-bar.rb-routing .req-bar-dest { background: #e2e8f0; color: #475569; }

        /* Pause hint when editing */
        .edit-pause-hint {
            display: none;
            font-size: 0.7rem;
            color: var(--primary);
            font-weight: 600;
            padding: 2px 8px;
            background: var(--primary-light);
            border-radius: 4px;
            animation: none;
        }
        .edit-pause-hint.show { display: inline-block; }

        /* Viz panel */
        .viz-panel {
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 36px;
            box-shadow: var(--shadow-premium);
            overflow: visible;
        }

        /* ── Branch Flow Diagram ── */
        .branch-flow {
            position: relative;
            height: 280px;
            margin-bottom: 24px;
            user-select: none;
            overflow: visible;
        }

        .branch-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: visible;
        }

        .b-line {
            stroke: var(--border-color);
            stroke-width: 2;
            stroke-linecap: round;
            transition: stroke 0.35s, stroke-width 0.35s;
        }

        .b-line.hi-direct { stroke: var(--success); stroke-width: 2.5; }
        .b-line.hi-proxy  { stroke: var(--primary); stroke-width: 2.5; }
        .b-line.hi-block  { stroke: var(--danger);  stroke-width: 2.5; }
        .b-line.dim-line  { stroke: #e8edf2; }

        /* Marching dashes on active lines */
        .b-line.marching {
            stroke-dasharray: 6 4;
            animation: b-march 0.4s linear infinite;
        }
        @keyframes b-march { to { stroke-dashoffset: -10; } }

        /* Node layout */
        .bnode {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 7px;
        }
        #bn-device { left: 0;   top: 50%; transform: translateY(-50%); }
        #bn-clash  { left: 50%; top: 50%; transform: translate(-50%, -50%); }
        #bn-direct { right: 0;  top: 18px; }
        #bn-proxy  { right: 0;  top: 50%; transform: translateY(-50%); }
        #bn-block  { right: 0;  top: 208px; }

        .bnode-c {
            border-radius: 50%;
            border: 2px solid var(--border-color);
            background: var(--bg-neutral);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .bnode-c--lg   { width: 60px; height: 60px; font-size: 1.35rem; }
        .bnode-c--main { width: 68px; height: 68px; border-color: var(--primary); background: var(--primary-light); }
        .bnode-c--sm   { width: 50px; height: 50px; font-size: 1.1rem; }

        .bnode-c.hi-direct { border-color: var(--success); background: #d1fae5; color: var(--success); }
        .bnode-c.hi-proxy  { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
        .bnode-c.hi-block  { border-color: var(--danger);  background: #fee2e2; color: var(--danger); }
        .bnode-c.dim-node  { opacity: 0.35; }

        @keyframes node-pulse-ring {
            0%   { box-shadow: 0 0 0 0px rgba(79,70,229,0.45); }
            70%  { box-shadow: 0 0 0 12px rgba(79,70,229,0); }
            100% { box-shadow: 0 0 0 0px rgba(79,70,229,0); }
        }
        @keyframes node-pulse-green {
            0%   { box-shadow: 0 0 0 0px rgba(16,185,129,0.45); }
            70%  { box-shadow: 0 0 0 12px rgba(16,185,129,0); }
            100% { box-shadow: 0 0 0 0px rgba(16,185,129,0); }
        }
        @keyframes node-pulse-red {
            0%   { box-shadow: 0 0 0 0px rgba(239,68,68,0.45); }
            70%  { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
            100% { box-shadow: 0 0 0 0px rgba(239,68,68,0); }
        }
        .bnode-c.pulse-direct { animation: node-pulse-green 1.1s ease-out infinite; }
        .bnode-c.pulse-proxy  { animation: node-pulse-ring  1.1s ease-out infinite; }
        .bnode-c.pulse-block  { animation: node-pulse-red   1.1s ease-out infinite; }
        .bnode-c.pulse-clash  { animation: node-pulse-ring  1.1s ease-out infinite; }

        .bnode-lbl {
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--text-muted);
            white-space: nowrap;
            text-align: center;
            transition: color 0.3s;
        }
        .bnode-lbl.hi-direct { color: var(--success); }
        .bnode-lbl.hi-proxy  { color: var(--primary); }
        .bnode-lbl.hi-block  { color: var(--danger); }

        /* Rule panel mode banner (global / direct override) */
        .mode-banner {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 18px 20px;
            border-radius: 10px;
            background: var(--bg-neutral);
            border: 1.5px solid var(--border-color);
        }
        .mode-banner--proxy  { background: #ede9fe; border-color: #a5b4fc; }
        .mode-banner--direct { background: #d1fae5; border-color: #6ee7b7; }

        .mode-banner-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }

        .mode-banner-body strong {
            display: block;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-main);
            margin-bottom: 5px;
        }
        .mode-banner-body p {
            font-size: 0.8rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin: 0;
        }
        .mode-banner--proxy .mode-banner-body strong { color: var(--primary); }
        .mode-banner--direct .mode-banner-body strong { color: var(--success); }

        /* Rule panel */
        .rule-match-panel {
            background: var(--bg-neutral);
            border-radius: 10px;
            padding: 20px 24px;
            margin-bottom: 16px;
        }

        .rmp-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            margin-bottom: 14px;
        }

        .rmp-title {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-muted);
            font-weight: 500;
        }

        .rmp-status {
            font-size: 0.78rem;
            font-family: var(--font-mono);
            color: var(--text-muted);
            transition: color 0.3s;
        }

        .rmp-rules {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .rmp-rule {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 14px;
            border-radius: 7px;
            font-size: 0.8rem;
            background: var(--bg-surface);
            border: 1px solid transparent;
            transition: all 0.25s;
        }

        .rmp-rule.checking {
            border-color: #fbbf24;
            background: #fffbeb;
            transform: translateX(3px);
        }

        .rmp-rule.matched-direct { background: #d1fae5; border-color: #6ee7b7; }
        .rmp-rule.matched-proxy  { background: var(--primary-light); border-color: #a5b4fc; }
        .rmp-rule.matched-block  { background: #fee2e2; border-color: #fca5a5; }
        .rmp-rule.skipped        { opacity: 0.38; }

        .rmp-rule-match { border-style: dashed; border-color: var(--border-color); opacity: 0.7; }

        .rmp-rule-num {
            font-family: var(--font-mono);
            font-size: 0.68rem;
            font-weight: 500;
            color: var(--text-muted);
            min-width: 22px;
        }

        /* Editable rule text */
        .rmp-editable {
            flex: 1;
            font-family: var(--font-mono);
            border-radius: 4px;
            padding: 2px 6px;
            margin: -2px -6px;
            transition: background 0.2s, outline 0.15s;
            cursor: text;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .rmp-editable:hover { background: rgba(79,70,229,0.06); }
        .rmp-editable:focus {
            outline: 1.5px solid var(--primary);
            background: white;
            text-overflow: clip;
        }

        .rmp-hint {
            font-size: 0.68rem;
            color: var(--text-muted);
            opacity: 0.6;
            margin-right: auto;
            font-style: italic;
        }

        .rmp-rule-text {
            flex: 1;
            font-family: var(--font-mono);
            color: var(--text-main);
        }

        .rmp-rule-badge {
            font-size: 0.7rem;
            font-weight: 500;
            padding: 2px 8px;
            border-radius: 4px;
            opacity: 0;
            transition: opacity 0.2s;
            white-space: nowrap;
        }

        .rmp-rule.matched-direct .rmp-rule-badge,
        .rmp-rule.matched-proxy  .rmp-rule-badge,
        .rmp-rule.matched-block  .rmp-rule-badge,
        .rmp-rule.skipped        .rmp-rule-badge { opacity: 1; }

        .outcome-log {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 18px;
            border-radius: 10px;
            font-size: 0.88rem;
            font-weight: 600;
            background: var(--bg-neutral);
            border: 1.5px solid var(--border-color);
            transition: background 0.5s, border-color 0.5s, color 0.5s;
            min-height: 52px;
        }

        .outcome-log.popin {
            animation: outcome-popin 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes outcome-popin {
            from { transform: scale(0.95); opacity: 0.4; }
            to   { transform: scale(1);    opacity: 1; }
        }

        /* Loop progress bar */
        .viz-loop-bar {
            height: 2px;
            background: var(--border-color);
            border-radius: 2px;
            margin-bottom: 28px;
            overflow: hidden;
        }

        .viz-loop-bar-fill {
            height: 100%;
            width: 0%;
            border-radius: 2px;
            background: var(--primary);
            transition: width linear, background 0.3s;
        }
        .viz-loop-bar-fill.direct { background: var(--success); }
        .viz-loop-bar-fill.proxy  { background: var(--primary); }
        .viz-loop-bar-fill.block  { background: var(--danger); }

        .outcome-log.result-direct { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
        .outcome-log.result-proxy  { background: var(--primary-light); border-color: #a5b4fc; color: #3730a3; }
        .outcome-log.result-block  { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }

        .outcome-log-icon { font-size: 1.1rem; }
        .outcome-log-text { flex: 1; }
        .outcome-log-latency {
            font-family: var(--font-mono);
            font-size: 0.75rem;
            opacity: 0.7;
        }

        @media (max-width: 900px) {
            .diagram-body { grid-template-columns: 1fr; }
        }

        /* */
        /* CLUTTER-FREE DOWNLOAD CENTER */
        .download-section {
            padding: 80px 0;
        }

        .download-tabs {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 36px;
            flex-wrap: wrap;
        }

        .tab-btn {
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            padding: 10px 20px;
            border-radius: 8px;
            color: var(--text-muted);
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: var(--transition-smooth);
        }

        .tab-btn:hover {
            border-color: #cbd5e1;
            color: var(--text-main);
        }

        .tab-btn.active {
            background: var(--primary);
            border-color: var(--primary);
            color: #ffffff;
            box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
        }

        /* Simple download card grid */
        .download-panel {
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 36px;
            display: none;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 40px;
            box-shadow: var(--shadow-premium);
        }

        .download-panel.active {
            display: grid;
        }

        .panel-info h3 {
            font-size: 1.6rem;
            color: var(--text-main);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .panel-info h3 span {
            font-size: 0.75rem;
            padding: 2px 8px;
            background: #d1fae5;
            color: var(--success);
            border-radius: 4px;
            font-weight: 500;
        }

        .panel-info p {
            color: var(--text-muted);
            margin-bottom: 24px;
            font-size: 0.95rem;
        }

        .release-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .release-item {
            background: var(--bg-neutral);
            border: 1px solid var(--border-color);
            padding: 12px 16px;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: var(--transition-smooth);
        }

        .release-item:hover {
            border-color: #cbd5e1;
            background: #f8fafc;
        }

        .release-meta {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .release-title {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--text-main);
            font-family: var(--font-mono);
        }

        .release-specs {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .dl-icon-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            transition: var(--transition-smooth);
        }

        .release-item:hover .dl-icon-btn {
            background: var(--primary);
            color: #ffffff;
            border-color: transparent;
        }

        /* Standard One-click Terminal command */
        .terminal-copy-box {
            background: #0f172a;
            border-radius: 10px;
            padding: 20px;
            align-self: flex-start;
        }

        .term-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            font-size: 0.75rem;
            color: #94a3b8;
        }

        .term-body {
            background: transparent;
            border: none;
            color: #38bdf8;
            font-family: var(--font-mono);
            font-size: 0.85rem;
            width: 100%;
            resize: none;
            outline: none;
        }

        .copy-btn {
            background: transparent;
            border: none;
            color: #94a3b8;
            cursor: pointer;
            transition: var(--transition-smooth);
            font-size: 0.75rem;
        }

        .copy-btn:hover {
            color: #ffffff;
        }

        /* FAQ ACCORDION LAYOUT */
        .faq-section {
            padding: 80px 0;
            background: #f8fafc;
            border-top: 1px solid var(--border-color);
        }

        .faq-accordion {
            max-width: 760px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .faq-item {
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            transition: var(--transition-smooth);
        }

        .faq-question {
            padding: 20px 24px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            font-size: 1rem;
            color: var(--text-main);
        }

        .faq-question:hover {
            color: var(--primary);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            background: #fafafa;
        }

        .faq-answer-inner {
            padding: 24px;
            color: var(--text-muted);
            border-top: 1px solid var(--border-color);
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .faq-item.active .faq-answer {
            max-height: 300px;
        }

        .faq-item.active .faq-question i {
            transform: rotate(180deg);
            color: var(--primary);
        }

        /* MODAL DIALOG (No native alerts allowed) */
        .custom-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(15, 23, 42, 0.4);
            backdrop-filter: blur(4px);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .custom-dialog {
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 30px;
            max-width: 440px;
            width: 90%;
            text-align: center;
            transform: scale(0.95);
            transition: transform 0.2s ease;
            box-shadow: var(--shadow-premium);
        }

        .dialog-icon {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 1.4rem;
            margin: 0 auto 16px auto;
        }

        .dialog-title {
            font-size: 1.2rem;
            color: var(--text-main);
            margin-bottom: 8px;
            font-weight: 500;
        }

        .dialog-message {
            color: var(--text-muted);
            font-size: 0.9rem;
            margin-bottom: 24px;
            line-height: 1.5;
        }

        /* ── RESPONSIVE BREAKPOINTS ── */

        /* Tablet: hide right visual card, single column, still centered */
        @media (max-width: 1024px) {
            .hero-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
            .hero-content p { margin: 0 auto 28px auto; max-width: 560px; }
            .hero-buttons { justify-content: center; }
            .platforms-grid { justify-content: center; }
            .features-grid { grid-template-columns: repeat(2, 1fr); }
            .download-panel { grid-template-columns: 1fr; gap: 24px; }
        }

        /* Mobile landscape / large phone */
        @media (max-width: 768px) {
            .hero-section { padding: 48px 0 36px; }
            .hero-visual { display: none; }
            .hero-content h1 { font-size: 2rem; }

            /* Section padding */
            .features-section { padding: 52px 0; }
            .metrics-section  { padding: 36px 0; }
            .download-section { padding: 52px 0; }
            .faq-section      { padding: 52px 0; }
            .diagram-section  { padding: 56px 0; }

            .section-header h2 { font-size: 1.7rem; }
            .metrics-grid { grid-template-columns: repeat(2, 1fr); }
            .features-grid { grid-template-columns: 1fr; }

            /* Diagram: clip ALL overflow at the panel level */
            .diagram-header h2 { font-size: 1.5rem; }
            .viz-panel { padding: 18px 14px; overflow: hidden; }
            .branch-flow { display: none; }        /* hide absolute-positioned nodes on ALL mobile */
            .scenario-panel { padding: 14px 12px; }

            /* Prevent rule text / badges from overflowing */
            .rmp-rule { overflow: hidden; }
            .rmp-rule-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .rule-type { min-width: auto; }
            .req-bar { flex-wrap: wrap; gap: 4px; overflow: hidden; }
            .req-bar-url { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; max-width: 140px; white-space: nowrap; }

            .download-panel { padding: 20px 18px; }
        }

        /* Small phone: left-align text, single column layout */
        @media (max-width: 600px) {
            .hero-grid { text-align: left; }
            .hero-content p { margin: 0 0 24px 0; max-width: 100%; }
            .hero-buttons { flex-direction: column; align-items: stretch; gap: 10px; }
            .hero-buttons .btn { width: 100%; justify-content: center; padding: 13px 20px; }
            .hero-badge { font-size: 0.75rem; }

            /* Platforms: CSS Grid 3-column, reliable */
            .platforms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
            .platform-hero-card { justify-content: center; padding: 8px 10px; font-size: 0.78rem; gap: 6px; }

            /* Hide viz flow on very small screens */
            .branch-flow { display: none; }
            .rmp-rules { max-height: 200px; overflow-y: auto; }
            .outcome-log { flex-wrap: wrap; }

            .section-header h2 { font-size: 1.5rem; }
            .section-header p { font-size: 0.88rem; }
            .feature-card { padding: 20px 16px; }
            .diagram-header h2 { font-size: 1.35rem; }
        }

        /* Extra small phone */
        @media (max-width: 400px) {
            .hero-content h1 { font-size: 1.65rem; letter-spacing: -0.03em; }
            .hero-section { padding: 36px 0 28px; }
            .metrics-grid { grid-template-columns: repeat(2, 1fr); }
            .scenario-btn { padding: 10px 10px; font-size: 0.8rem; }
        }