body {
            background-color: #0f172a;
            color: #e2e8f0;
            font-family: sans-serif;
            line-height: 1.6;
        }

        
        .site-header {
            background-color: rgba(2, 6, 23, 0.80);
            backdrop-filter: blur(8px);
            border-bottom: 1px solid #1e293b;
            position: sticky;
            top: 0;
            z-index: 1050;
        }
        .logo-icon {
            background-color: #4f46e5;
            padding: 0.45rem 0.6rem;
            border-radius: 0.5rem;
            color: #fff;
        }
        .logo-text {
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            color: #fff;
        }
        .logo-text span { color: #6366f1; }
        .nav-link-custom {
            color: #cbd5e1;
            font-size: 0.875rem;
            font-weight: 500;
            text-decoration: none;
            transition: color .2s;
        }
        .nav-link-custom:hover { color: #818cf8; }
        .btn-header {
            background-color: #4f46e5;
            color: #fff;
            font-size: 0.875rem;
            font-weight: 600;
            padding: 0.45rem 1.25rem;
            border-radius: 0.5rem;
            border: none;
            box-shadow: 0 4px 14px rgba(79,70,229,.3);
            text-decoration: none;
            transition: background-color .2s;
        }
        .btn-header:hover { background-color: #4338ca; color: #fff; }

        /* ── Hero ── */
        .hero-section {
            background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #0f172a 100%);
            padding: 5rem 1.5rem 4rem;
            position: relative;
            overflow: hidden;
        }
        .hero-bg-img {
            position: absolute;
            inset: 0;
            background: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
            opacity: 0.05;
        }
        .badge-eyebrow {
            background-color: rgba(99,102,241,.1);
            color: #818cf8;
            border: 1px solid rgba(99,102,241,.3);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: .15em;
            padding: 0.35rem 1rem;
            border-radius: 999px;
            font-weight: 600;
            display: inline-block;
        }
        .hero-title {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 800;
            color: #fff;
            letter-spacing: -.02em;
            line-height: 1.15;
        }
        .hero-gradient-text {
            background: linear-gradient(90deg, #818cf8, #c084fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero-sub {
            color: #94a3b8;
            font-size: 1.1rem;
            max-width: 38rem;
        }
        .btn-hero-primary {
            background-color: #4f46e5;
            color: #fff;
            font-weight: 700;
            padding: 1rem 2rem;
            border-radius: 0.75rem;
            border: none;
            box-shadow: 0 6px 20px rgba(79,70,229,.35);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: background-color .2s;
        }
        .btn-hero-primary:hover { background-color: #4338ca; color: #fff; }
        .btn-hero-secondary {
            background-color: #1e293b;
            color: #e2e8f0;
            font-weight: 700;
            padding: 1rem 2rem;
            border-radius: 0.75rem;
            border: 1px solid #334155;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: background-color .2s;
        }
        .btn-hero-secondary:hover { background-color: #273548; color: #e2e8f0; }

        /* ── Scanner Section ── */
        .scanner-section {
            background-color: #020617;
            padding: 5rem 1.5rem;
        }
        .section-title {
            font-size: 1.9rem;
            font-weight: 700;
            color: #fff;
        }
        .section-sub { color: #94a3b8; }

        /* Tab switcher pill */
        .tab-switcher {
            background-color: #0f172a;
            border: 1px solid #1e293b;
            border-radius: 0.75rem;
            padding: 0.375rem;
            display: flex;
            max-width: 28rem;
            margin: 0 auto 2rem;
        }
        .tab-btn {
            flex: 1;
            padding: 0.75rem 0;
            border: none;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color .2s, color .2s;
        }
        .tab-btn.active   { background-color: #4f46e5; color: #fff; }
        .tab-btn.inactive { background-color: transparent; color: #94a3b8; }

        /* Scanner card */
        .scanner-card {
            background-color: #0f172a;
            border: 1px solid #1e293b;
            border-radius: 1rem;
            padding: 2rem;
            box-shadow: 0 25px 50px rgba(0,0,0,.5);
        }
        .field-label {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .1em;
            color: #94a3b8;
            display: block;
            margin-bottom: 0.5rem;
        }
        .input-wrapper { position: relative; }
        .input-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #64748b;
        }
        .scan-input {
            width: 100%;
            background-color: #020617;
            border: 1px solid #1e293b;
            border-radius: 0.75rem;
            padding: 1rem 1rem 1rem 2.75rem;
            color: #fff;
            transition: border-color .2s, box-shadow .2s;
        }
        .scan-input::placeholder { color: #475569; }
        .scan-input:focus {
            outline: none;
            border-color: #4f46e5;
            box-shadow: 0 0 0 1px #4f46e5;
            background-color: #020617;
            color: #fff;
        }
        .scan-textarea {
            width: 100%;
            background-color: transparent;
            border: none;
            color: #e2e8f0;
            padding: 0.75rem;
            height: 15rem;
            resize: none;
        }
        .scan-textarea:focus { outline: none; }
        .textarea-wrap {
            background-color: #020617;
            border: 1px solid #1e293b;
            border-radius: 1rem;
            padding: 0.75rem;
        }
        .textarea-hint {
            display: flex;
            align-items: center;
            background-color: rgba(15,23,42,.6);
            border-radius: 0.75rem;
            padding: 0.75rem 1rem;
            margin-top: 0.5rem;
            font-size: 0.75rem;
            color: #94a3b8;
        }
        .textarea-hint i { color: #6366f1; margin-right: 0.75rem; }
        .btn-scan {
            width: 100%;
            background-color: #4f46e5;
            color: #fff;
            font-weight: 700;
            letter-spacing: .05em;
            padding: 1rem;
            border-radius: 0.75rem;
            border: none;
            box-shadow: 0 4px 14px rgba(79,70,229,.2);
            transition: background-color .2s;
            cursor: pointer;
        }
        .btn-scan:hover { background-color: #4338ca; }

        /* Result card */
        .result-card {
            display: none;
            margin-top: 1.5rem;
            padding: 1.25rem;
            background-color: rgba(30,41,59,.5);
            border: 1px solid #334155;
            border-radius: 0.75rem;
        }
        .result-heading {
            font-size: 1.05rem;
            font-weight: 700;
            color: #818cf8;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
        }
        #scan-result-text {
            color: #e2e8f0;
            font-size: 0.875rem;
            line-height: 1.7;
            white-space: pre-line;
        }

        /* ── Features Section ── */
        .features-section {
            background-color: #0f172a;
            border-top: 1px solid #1e293b;
            padding: 5rem 1.5rem;
        }
        .eyebrow {
            color: #6366f1;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .12em;
        }
        .features-title {
            font-size: clamp(1.6rem, 3vw, 2.2rem);
            font-weight: 700;
            color: #fff;
            margin-top: 0.5rem;
        }
        .features-sub {
            color: #94a3b8;
            max-width: 36rem;
            margin: 0 auto;
        }
        .feature-card {
            background-color: #020617;
            border: 1px solid #1e293b;
            border-radius: 1rem;
            padding: 2rem;
            height: 100%;
            transition: border-color .25s, box-shadow .25s;
        }
        .feature-card:hover {
            border-color: rgba(99,102,241,.4);
            box-shadow: 0 0 20px rgba(99,102,241,.08);
        }
        .feature-icon {
            background-color: rgba(79,70,229,.1);
            color: #818cf8;
            width: 3rem;
            height: 3rem;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            margin-bottom: 1.5rem;
        }
        .feature-title {
            font-size: 1.15rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 0.75rem;
        }
        .feature-desc {
            color: #94a3b8;
            font-size: 0.875rem;
            line-height: 1.65;
            margin: 0;
        }

        /* ── Footer ── */
        .site-footer {
            background-color: #020617;
            border-top: 1px solid #1e293b;
            padding: 2rem 1.5rem;
            text-align: center;
            font-size: 0.75rem;
            color: #64748b;
        }

        /* ── Utility ── */
        @keyframes spin { to { transform: rotate(360deg); } }
        .animate-spin { animation: spin 1s linear infinite; }
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
        .animate-pulse { animation: pulse 1.5s ease-in-out infinite; }
 

       #scan-result-text strong {
    color: #ffffff !important;
}