:root {
      --brand-primary: #059669;
      --brand-primary-hover: #047857;
      --brand-secondary: #0ea5e9;
      --brand-gradient: linear-gradient(135deg, #059669 0%, #0d9488 55%, #0284c7 100%);
      --brand-soft: #ecfdf5;
      --brand-border: #a7f3d0;
      --surface-bg: #f8fafc;
      --surface-card: #ffffff;
      --text-main: #0f172a;
      --text-secondary: #475569;
      --text-muted: #64748b;
      --border-color: #e2e8f0;
      --radius-sm: 10px;
      --radius-md: 16px;
      --radius-lg: 24px;
      --radius-pill: 9999px;
      --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
      --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
      --shadow-float: 0 20px 45px -12px rgba(15, 23, 42, 0.12);
      --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      --brand-gradient:linear-gradient(135deg,#059669 0%,#0d9488 55%,#0284c7 100%);
      --radius-pill:9999px;
      --transition:.2s cubic-bezier(.4,0,.2,1);
    }
    * { box-sizing: border-box; }
    body {
      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: var(--surface-bg);
      background-image: radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.08) 0px, transparent 50%), radial-gradient(at 100% 0%, rgba(14, 165, 233, 0.08) 0px, transparent 50%);
      background-repeat: no-repeat;
      color: var(--text-main);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
    a { color: var(--brand-primary); text-decoration: none; transition: all var(--transition); }
    a:hover { color: var(--brand-primary-hover); }
    .gradient-text { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .navbar-wrapper { position: sticky; top: 12px; z-index: 1030; padding: 0 1rem; margin-bottom: 1rem; }
    .navbar {
      max-width: 1180px; margin: 0 auto; background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
      border: 1px solid rgba(226, 232, 240, 0.9); border-radius: 18px; padding: 0.6rem 1.25rem;
      box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
    }
    .navbar-brand { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em; color: var(--text-main) !important; display: flex; align-items: center; gap: 0.6rem; }
    .brand-logo-box { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-gradient); display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3); }
    .navbar .nav-link { font-weight: 600; font-size: 0.88rem; color: var(--text-secondary) !important; padding: 0.45rem 0.9rem !important; border-radius: var(--radius-sm); transition: all var(--transition); }
    .navbar .nav-link:hover { background: var(--brand-soft); color: var(--brand-primary) !important; }
    .nav-cta-pill { background: var(--text-main) !important; color: #fff !important; border-radius: var(--radius-pill) !important; padding: 0.45rem 1.1rem !important; margin-left: 0.35rem; }
    .nav-cta-pill:hover { background: var(--brand-primary) !important; color: #fff !important; }
    .workspace-section { padding: 1.5rem 1rem 2rem; }
    .hero-head { text-align: center; max-width: 760px; margin: 0 auto 2rem; }
    .trust-pill-bar { display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; border: 1px solid var(--border-color); padding: 0.35rem 0.9rem; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 1rem; box-shadow: var(--shadow-xs); }
    .trust-pill-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-primary); box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.15); }
    .hero-head h1 { font-size: clamp(2.1rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; margin-bottom: 0.75rem; color: var(--text-main); }
    .hero-head p { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 0; }
    .studio-shell { max-width: 1140px; margin: 0 auto; background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); padding: 1.75rem; position: relative; }
    .upload-container { border: 2px dashed #cbd5e1; border-radius: 20px; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); padding: 3.2rem 1.5rem; text-align: center; cursor: pointer; transition: all var(--transition); position: relative; }
    .upload-container:hover, .upload-container.dragover { border-color: var(--brand-primary); background: #f0fdf4; transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(5, 150, 105, 0.15); }
    .upload-icon-ring { width: 72px; height: 72px; border-radius: 22px; background: var(--brand-soft); border: 1px solid var(--brand-border); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.15rem; color: var(--brand-primary); transition: transform var(--transition); }
    .upload-container:hover .upload-icon-ring { transform: scale(1.06) rotate(-3deg); }
    .upload-container h3, .upload-container .upload-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.3rem; }
    .spec-badges { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.25rem; }
    .spec-badge { font-size: 0.76rem; font-weight: 600; color: var(--text-muted); background: #f1f5f9; padding: 0.3rem 0.75rem; border-radius: var(--radius-pill); }
    .btn-brand { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.8rem 1.85rem; font-weight: 700; font-size: 0.95rem; color: #fff; border: none; border-radius: 14px; background: var(--brand-gradient); box-shadow: 0 10px 20px -8px rgba(5, 150, 105, 0.5); transition: all var(--transition); cursor: pointer; }
    .btn-brand:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -8px rgba(5, 150, 105, 0.65); color: #fff; filter: brightness(1.03); }
    .btn-dark-slate { background: var(--text-main); color: #fff; border: none; border-radius: 12px; padding: 0.75rem 1.4rem; font-weight: 700; font-size: 0.92rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all var(--transition); }
    .btn-dark-slate:hover { background: #1e293b; color: #fff; transform: translateY(-1px); }
    .btn-soft { background: #f1f5f9; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 0.72rem 1.25rem; font-weight: 600; font-size: 0.9rem; transition: all var(--transition); }
    .btn-soft:hover { background: #e2e8f0; color: var(--text-main); }
    .settings-panel { background: #f8fafc; border: 1px solid var(--border-color); border-radius: 18px; padding: 1.4rem; height: 100%; }
    .panel-title { font-size: 0.95rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; }
    .preset-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; margin-bottom: 1.15rem; }
    .preset-chip { border: 1px solid var(--border-color); background: #fff; border-radius: 10px; padding: 0.45rem 0.3rem; font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); text-align: center; cursor: pointer; transition: all var(--transition); }
    .preset-chip:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
    .preset-chip.active { background: var(--brand-soft); border-color: var(--brand-primary); color: var(--brand-primary); }
    .quality-badge { background: var(--brand-primary); color: #fff; font-weight: 700; font-size: 0.82rem; padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); }
    .form-range { accent-color: var(--brand-primary); height: 6px; }
    .form-control, .form-select { border-radius: 11px; border: 1.5px solid var(--border-color); padding: 0.6rem 0.9rem; font-size: 0.9rem; font-weight: 500; background-color: #fff; }
    .form-control:focus, .form-select:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.14); }
    .form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); }
    .queue-card { border: 1px solid var(--border-color); border-radius: 18px; background: #fff; overflow: hidden; }
    .queue-header { padding: 1rem 1.25rem; background: #f8fafc; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
    #file-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; background: #fcfcfd; border-bottom: 1px solid var(--border-color); padding: 0.75rem 1rem; }
    #file-table td { vertical-align: middle; padding: 0.75rem 1rem; border-color: var(--border-color); font-size: 0.9rem; }
    .thumb-img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border-color); background: #f1f5f9; }
    .savings-banner { background: linear-gradient(135deg, #064e3b 0%, #0f172a 100%); color: #fff; border-radius: 16px; padding: 1.25rem 1.5rem; margin-bottom: 1.15rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
    .savings-stat { font-size: 1.5rem; font-weight: 800; color: #34d399; letter-spacing: -0.02em; }
    .result-item { border: 1px solid var(--border-color); border-radius: 14px; padding: 0.95rem 1.2rem; margin-bottom: 0.7rem; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; transition: all var(--transition); }
    .result-item:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-card); }
    .result-meta { display: flex; align-items: center; gap: 0.9rem; min-width: 0; width: 100%; }
    .result-meta > div { min-width: 0; flex: 1; overflow: hidden; }
    .result-filename { font-size:0.93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
    .badge-saved { background: var(--brand-soft); color: var(--brand-primary); border: 1px solid var(--brand-border); font-weight: 700; font-size: 0.8rem; padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); }

    /* Target KB Box */
    .target-kb-box { background: #ffffff; border: 1.5px dashed var(--brand-primary); padding: 1.15rem; border-radius: 14px; position: relative; }
    .target-kb-box::before { content: "Active Target"; position: absolute; top: -10px; right: 15px; background: var(--brand-primary); color: #fff; font-size: 0.65rem; font-weight: 800; padding: 0.2rem 0.5rem; border-radius: var(--radius-pill); letter-spacing: 0.05em; text-transform: uppercase; }

    /* ========== QUICK TOOLS SECTION ========== */
    .quick-tools-bar { max-width: 1140px; margin: 1rem auto 3rem; padding: 0 1rem; }
    .quick-tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
    .tool-pill { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-pill); padding: 0.65rem 1rem; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; box-shadow: var(--shadow-xs); transition: all var(--transition); text-align: center; white-space: nowrap; }
    .tool-pill:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--brand-soft); transform: translateY(-2px); }
    @media (max-width: 640px) {
      .quick-tools-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
      .tool-pill { padding: 0.6rem 0.75rem; font-size: 0.8rem; }
    }

    /* ========== BENEFITS SECTION ========== */
    .benefit-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.95rem; border-radius: var(--radius-pill); background: var(--brand-soft); border: 1px solid var(--brand-border); color: var(--brand-primary); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
    .benefit-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem; max-width: 1140px; margin: 0 auto; }
    .benefit-card { position: relative; border-radius: 22px; background: #ffffff; border: 1px solid var(--border-color); box-shadow: var(--shadow-card); padding: 1.65rem 1.5rem; overflow: hidden; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s var(--transition); display: flex; flex-direction: column; }
    .benefit-card:hover { transform: translateY(-6px); border-color: #cbd5e1; box-shadow: 0 22px 42px -16px rgba(15, 23, 42, 0.14); }
    .benefit-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1rem; height: 100%; justify-content: space-between; }
    .benefit-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.25rem; }
    .benefit-index { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; color: var(--text-muted); opacity: 0.55; font-variant-numeric: tabular-nums; line-height: 1; padding-top: 0.35rem; }
    .benefit-icon { width: 46px; height: 46px; border-radius: 13px; background: var(--brand-soft); border: 1px solid var(--brand-border); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s var(--transition); }
    .benefit-card:hover .benefit-icon { transform: scale(1.08) rotate(-5deg); background: var(--brand-primary); color: #ffffff; border-color: transparent; }
    .benefit-featured, .benefit-featured-light { grid-column: span 3; }
    .benefit-featured { background: linear-gradient(145deg, #0b1220 0%, #14283d 50%, #0f2a4d 100%); border: 1px solid rgba(52, 211, 153, 0.18); color: #ffffff; }
    .benefit-featured:hover { border-color: rgba(52, 211, 153, 0.45); box-shadow: 0 24px 48px -16px rgba(5, 150, 105, 0.35); }
    .benefit-card-glow { position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(52, 211, 153, 0.22) 0%, transparent 70%); pointer-events: none; z-index: 0; }
    .benefit-icon-dark { background: rgba(52, 211, 153, 0.14); border-color: rgba(52, 211, 153, 0.28); color: #34d399; }
    .benefit-featured:hover .benefit-icon-dark { background: #34d399; color: #0b1220; border-color: transparent; }
    .benefit-featured .benefit-index { color: #34d399; opacity: 0.7; }
    .benefit-featured .benefit-title { color: #ffffff; }
    .benefit-text-dark { color: #94a3b8 !important; }
    .benefit-featured-light { background: linear-gradient(160deg, #ecfdf5 0%, #ffffff 55%, #f0f9ff 100%); border: 1px solid var(--brand-border); position: relative; }
    .benefit-featured-light::before { content: ""; position: absolute; top: -70px; right: -70px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(5, 150, 105, 0.12) 0%, transparent 70%); pointer-events: none; }
    .benefit-featured-light:hover { border-color: var(--brand-primary); box-shadow: 0 22px 42px -16px rgba(5, 150, 105, 0.22); }
    .benefit-icon-brand { background: var(--brand-gradient); color: #ffffff; border: none; box-shadow: 0 8px 18px -6px rgba(5, 150, 105, 0.5); }
    .benefit-featured-light:hover .benefit-icon-brand { transform: scale(1.08) rotate(-5deg); filter: brightness(1.06); }
    .benefit-card:not(.benefit-featured):not(.benefit-featured-light) { grid-column: span 2; }
    .benefit-title { font-size: 1.22rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; margin: 0 0 0.5rem; color: var(--text-main); }
    .benefit-title-sm { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; margin: 0 0 0.45rem; color: var(--text-main); }
    .benefit-text { font-size: 0.9rem; line-height: 1.65; color: var(--text-secondary); margin: 0; }
    .benefit-text-sm { font-size: 0.85rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }
    .benefit-footer { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.35rem; }
    .benefit-chip, .benefit-chip-dark { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.65rem; border-radius: var(--radius-pill); white-space: nowrap; }
    .benefit-chip { background: var(--brand-soft); color: var(--brand-primary); border: 1px solid var(--brand-border); }
    .benefit-chip-dark { background: rgba(52, 211, 153, 0.12); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.28); }
    @media (max-width: 991px) {
      .benefit-grid { grid-template-columns: repeat(2, 1fr); }
      .benefit-featured, .benefit-featured-light { grid-column: span 2; }
      .benefit-card:not(.benefit-featured):not(.benefit-featured-light) { grid-column: span 1; }
      .how-pipeline-shell { padding: 2.2rem 1.35rem 1.5rem; }
    }
    @media (max-width: 768px) {
      .settings-panel { padding: 1.15rem; margin-bottom: 1.5rem; }
      .queue-header { flex-wrap: wrap; gap: 10px; }
      .result-item { flex-direction: column; align-items: flex-start; max-width: 100%; overflow: hidden; }
      .result-item > .result-meta { max-width: 100%; overflow: hidden; }
      .result-item > div:last-child { width: 100%; justify-content: space-between; margin-top: 0.5rem; }
      .result-item .btn-dark-slate { flex-grow: 1; text-align: center; }
    }
    @media (max-width: 640px) {
      .benefit-grid { grid-template-columns: 1fr; }
      .benefit-featured, .benefit-featured-light, .benefit-card:not(.benefit-featured):not(.benefit-featured-light) { grid-column: span 1; }
      .benefit-card { padding: 1.4rem 1.25rem; }
    }

    /* ========== SHOWCASE & PIPELINE ========== */
    .step-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.9rem; border-radius: var(--radius-pill); background: var(--brand-soft); border: 1px solid var(--brand-border); color: var(--brand-primary); font-weight: 800; font-size: 0.76rem; letter-spacing: 0.05em; margin-bottom: 0.9rem; }
    .how-pipeline-shell { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid var(--border-color); border-radius: 28px; padding: 3rem 2.25rem 2.25rem; box-shadow: var(--shadow-float); position: relative; overflow: hidden; }
    .how-pipeline-shell::before { content: ""; position: absolute; top: -120px; right: -120px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(5, 150, 105, 0.09) 0%, transparent 70%); pointer-events: none; }
    .how-pipeline-shell::after { content: ""; position: absolute; bottom: -120px; left: -120px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%); pointer-events: none; }
    .pipeline-steps-wrap { position: relative; z-index: 1; }
    @media (min-width: 992px) {
      .pipeline-connector { position: absolute; top: 62px; left: 16%; right: 16%; height: 3px; background: linear-gradient(90deg, rgba(5, 150, 105, 0.2) 0%, rgba(13, 148, 136, 0.55) 50%, rgba(2, 132, 199, 0.25) 100%); border-radius: 99px; z-index: 0; }
      .pipeline-connector::after { content: ""; position: absolute; top: -3px; left: 0; width: 72px; height: 9px; border-radius: 99px; background: var(--brand-gradient); box-shadow: 0 0 16px rgba(5, 150, 105, 0.65); animation: pipelinePulse 4.5s ease-in-out infinite; }
    }
    @keyframes pipelinePulse { 0% { left: 0%; opacity: 0.35; } 50% { left: calc(100% - 72px); opacity: 1; } 100% { left: 0%; opacity: 0.35; } }
    .pipeline-step-card { background: #ffffff; border: 1px solid var(--border-color); border-radius: 22px; padding: 1.75rem 1.5rem; height: 100%; position: relative; z-index: 1; box-shadow: var(--shadow-card); transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; justify-content: space-between; }
    .pipeline-step-card:hover { transform: translateY(-7px); border-color: var(--brand-primary); box-shadow: 0 22px 40px -14px rgba(5, 150, 105, 0.16); }
    .step-top-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.35rem; }
    .step-icon-orb { width: 56px; height: 56px; border-radius: 16px; background: var(--brand-soft); border: 1px solid var(--brand-border); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; transition: all var(--transition); box-shadow: 0 6px 16px -4px rgba(5, 150, 105, 0.15); }
    .pipeline-step-card:hover .step-icon-orb { background: var(--brand-gradient); color: #ffffff; border-color: transparent; transform: scale(1.06) rotate(-4deg); }
    .step-num-glow { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(135deg, #059669 0%, #cbd5e1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.85; }
    .pipeline-step-card:hover .step-num-glow { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 1; }
    .step-Tag-label { display: inline-block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-primary); margin-bottom: 0.35rem; }
    .step-micro-ui { margin-top: 1.35rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 0.75rem 0.95rem; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.78rem; font-weight: 700; color: var(--text-main); transition: all var(--transition); }
    .pipeline-step-card:hover .step-micro-ui { background: #f0fdf4; border-color: var(--brand-border); }
    .micro-pill-accent { background: var(--brand-soft); color: var(--brand-primary); border: 1px solid var(--brand-border); padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
    .micro-slider-dots { display: inline-flex; align-items: center; gap: 4px; }
    .micro-slider-dots span { width: 18px; height: 5px; border-radius: 99px; background: #cbd5e1; }
    .micro-slider-dots span.on { width: 28px; background: var(--brand-gradient); }
    .pipeline-bottom-bar { margin-top: 2rem; background: #0f172a; color: #ffffff; border-radius: 18px; padding: 1.15rem 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; position: relative; z-index: 1; }
    .pipeline-perks { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; }
    .perk-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; font-weight: 600; color: #e2e8f0; }
    .perk-check { width: 22px; height: 22px; border-radius: 50%; background: rgba(16, 185, 129, 0.2); color: #34d399; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .showcase-panel { background: #fff; border: 1px solid var(--border-color); border-radius: 24px; padding: 2.5rem; box-shadow: var(--shadow-card); }
    .comparison-visual { background: #0f172a; border-radius: 18px; padding: 1.75rem; color: #fff; }
    .bar-track { background: rgba(255, 255, 255, 0.1); height: 12px; border-radius: 99px; overflow: hidden; margin: 0.45rem 0 1.2rem; }
    .bar-fill-orig { width: 100%; height: 100%; background: #64748b; }
    .bar-fill-opt { width: 24%; height: 100%; background: var(--brand-gradient); }

    /* ========== EDITORIAL SEO SECTION ========== */
    .editorial-section { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; }
    .editorial-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.95rem; border-radius: var(--radius-pill); background: var(--brand-soft); border: 1px solid var(--brand-border); color: var(--brand-primary); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
    .editorial-heading { font-size: clamp(1.75rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.2; color: var(--text-main); margin-bottom: 1.1rem; }
    .editorial-lead { font-size: 1.08rem; line-height: 1.75; color: var(--text-secondary); margin-bottom: 1.25rem; }
    .editorial-body p { font-size: 1rem; line-height: 1.8; color: var(--text-secondary); margin-bottom: 1.25rem; }
    .editorial-body h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 2rem; margin-bottom: 1rem; color: var(--text-main); }
    .editorial-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.75rem; }
    .editorial-list li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.98rem; line-height: 1.65; color: var(--text-secondary); padding: 0.85rem 1rem; background: #ffffff; border: 1px solid var(--border-color); border-radius: 12px; transition: border-color var(--transition), box-shadow var(--transition); }
    .editorial-list li:hover { border-color: var(--brand-border); box-shadow: var(--shadow-xs); }
    .editorial-list .check-orb { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.1rem; }
    .editorial-list strong { color: var(--text-main); font-weight: 700; }
    .editorial-figure { margin: 0 0 1.75rem; border-radius: 20px; overflow: hidden; border: 1px solid var(--border-color); box-shadow: var(--shadow-card); background: #0f172a; position: relative; }
    .editorial-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; }
    .editorial-figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1.5rem 1.1rem; background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.85) 60%, rgba(15, 23, 42, 0.96) 100%); color: #e2e8f0; font-size: 0.84rem; font-weight: 600; display: flex; align-items: center; gap: 0.6rem; }
    .editorial-figure figcaption .fig-badge { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(52, 211, 153, 0.16); border: 1px solid rgba(52, 211, 153, 0.32); color: #34d399; font-size: 0.72rem; font-weight: 800; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; }

    /* ========== FAQ & FOOTER ========== */
    .faq-card { background: #fff; border: 1px solid var(--border-color); border-radius: 16px; margin-bottom: 0.85rem; overflow: hidden; }
    .faq-header .btn-link { color: var(--text-main); font-weight: 700; font-size: 0.98rem; text-decoration: none; padding: 1.15rem 1.35rem !important; display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; }
    .faq-header .btn-link:hover { color: var(--brand-primary); }
    .faq-body { padding: 0 1.35rem 1.25rem; color: var(--text-secondary); font-size: 0.94rem; }
    .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .brand-logo-box{width:36px;height:36px;border-radius:10px;background:var(--brand-gradient);display:inline-flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px rgba(5,150,105,.3)}

/* Footer */
.dark-footer{position:relative;margin-top:4rem;background:#0b1220;color:#94a3b8;padding:3rem 1rem 1.5rem;text-align:center;overflow:hidden}
.dark-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--brand-gradient)}
.dark-footer::after{content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:520px;height:240px;background:radial-gradient(ellipse,rgba(5,150,105,.28) 0%,transparent 70%);pointer-events:none}
.df-inner{position:relative;z-index:1;max-width:640px;margin:0 auto}
.df-logo{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-weight:800;font-size:1.4rem;letter-spacing:-.03em;color:#fff;text-decoration:none}
.df-logo:hover{color:#fff}
.df-tagline{font-size:.92rem;line-height:1.7;margin:.9rem auto 1.25rem;color:#94a3b8}
.df-badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;color:#34d399;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.25);padding:.4rem .9rem;border-radius:var(--radius-pill)}
.df-badge .dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.2)}
.df-links{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:1.75rem 0 0}
.df-links a{font-size:.84rem;font-weight:600;color:#e2e8f0;padding:.45rem 1rem;border:1px solid rgba(148,163,184,.25);border-radius:var(--radius-pill);text-decoration:none;transition:all var(--transition)}
.df-links a:hover{color:#0b1220;background:#34d399;border-color:#34d399}
.df-copy{position:relative;z-index:1;margin-top:2rem;font-size:.8rem;color:#64748b}

@media (max-width:520px){
  .dark-footer{padding:2.5rem 1rem 1.25rem}
}

    @media (max-width: 576px) {
      .studio-shell { padding: 1.15rem; }
      #file-table thead { display: none; }
      #file-table, #file-table tbody, #file-table tr, #file-table td { display: block; width: 100%; }
      #file-table tr { border-bottom: 1px solid var(--border-color); padding: 0.75rem 1rem; }
      #file-table td { display: flex; justify-content: space-between; align-items: center; border: none; padding: 0.3rem 0; }
      #file-table td::before { content: attr(data-label); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; color: var(--text-muted); }
    }