/*==================================================
=                LANDING VARIABLES
==================================================*/
.landing{
    --hero-radius:28px;
    --hero-padding:80px;
    --hero-max-width:1112px;
    --glass:rgba(255,255,255,.05);
    --glass-border:rgba(255,255,255,.08);
    --hero-shadow:0 27px 71px rgba(0,0,0,.35);
}

/*==================================================
=                LANDING
==================================================*/
.landing{
    display:flex;
    flex-direction:column;
    gap:62px;
}

/*==================================================
=                HERO
==================================================*/
.hero{
    position:relative;
    overflow:hidden;
    border-radius:32px;
    border:1px solid var(--border);
    background:linear-gradient(180deg,rgba(18,30,56,.95),rgba(9,17,32,.85));
    box-shadow:var(--hero-shadow);
    padding:var(--hero-padding);
    contain:layout paint style;
}

/*==================================================
=                BACKGROUND
==================================================*/
.hero-background{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

/*==================================================
=                GRID
==================================================*/
.hero-background .grid{
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:37px 37px;
    mask-image:radial-gradient(circle at center,black,transparent 80%);
}

/*==================================================
=                AURORA
==================================================*/
.blur{
    position:absolute;
    border-radius:999px;
    filter:blur(62px);
    opacity:.85;
    animation:aurora 14s linear infinite;
    will-change:transform;
    transform:translateZ(0);
    contain:layout paint;
}

.blur-1{
    width:463px;
    height:463px;
    background:#2563eb;
    top:-160px;
    right:-107px;
}

.blur-2{
    width:409px;
    height:409px;
    background:#7c3aed;
    bottom:-142px;
    left:-107px;
    animation-duration:18s;
}


@media (max-width: 640px) {
  .blur-1{
    width:300px;
    height:300px;
  }
  
  .blur-2{
    width:300px;
    height:300px;
  }
}

@keyframes aurora{
    0%{transform:translate(0,0) rotate(0);}
    50%{transform:translate(80px,-50px) rotate(180deg);}
    100%{transform:translate(0,0) rotate(360deg);}
}

/*==================================================
=                HERO CONTENT
==================================================*/
.hero-content{
    position:relative;
    z-index:10;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

/*==================================================
=                BADGE
==================================================*/
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 16px;
    border-radius:999px;
    background:rgba(59,130,246,.12);
    border:1px solid rgba(59,130,246,.25);
    color:#8ec5ff;
    font-weight:700;
    margin-bottom:27px;
}

/*==================================================
=                LOGO
==================================================*/
.hero-logo{
    width:125px;
    height:125px;
    padding:21px;
    border-radius:27px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 44px rgba(37,99,235,.35);
    margin-bottom:31px;
}

/*==================================================
=                TITLE
==================================================*/
.hero h1{
    margin:0;
    font-size:52px;
    font-weight:900;
    line-height:1.2;
    max-width:801px;
}

.hero h1 span{
    display:block;
    margin-top:11px;
    background:linear-gradient(90deg,#60a5fa,#818cf8,#c084fc);
    -webkit-background-clip:text;
    color:transparent;
}

/*==================================================
=                DESCRIPTION
==================================================*/
.hero p{
    margin-top:27px;
    max-width:676px;
    font-size:16px;
    line-height:2.1;
    color:var(--muted);
}

/*==================================================
=                FORM
==================================================*/
.scan-form{
    margin-top:49px;
    display:flex;
    align-items:center;
    width:100%;
    max-width:676px;
    gap:14px;
    box-sizing:border-box;
}

.scan-form input{
    flex:1;
    min-width:0;
    height:57px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.05);
    color:white;
    font-size:13px;
    padding:0 21px;
    direction:ltr;
    transition:.25s;
    box-sizing:border-box;
}

.scan-form input:focus{
    outline:none;
    border-color:#3b82f6;
    box-shadow:0 0 0 4px rgba(59,130,246,.15);
}

.scan-form button{
    height:57px;
    padding:0 30px;
    border:none;
    border-radius:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    font-weight:800;
    font-size:13px;
    color:white;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    box-shadow:0 16px 36px rgba(37,99,235,.35);
    transition:.25s;
    box-sizing:border-box;
    flex-shrink:0;
    white-space:nowrap;
}

.scan-form button:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 49px rgba(37,99,235,.45);
}

.scan-form svg{
    transform:scaleX(-1);
}

/*==================================================
=                TRUST
==================================================*/
.hero-trust{
    margin-top:40px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.hero-trust div{
    padding:11px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:var(--muted);
    font-size:12px;
    transition:.25s;
}

.hero-trust div:hover{
    transform:translateY(-3px);
    color:white;
    border-color:#3b82f6;
}

/*==================================================
=                RESPONSIVE
==================================================*/
@media(max-width:900px){
    .hero{padding:49px 27px;}
    .hero h1{font-size:37px;}
    .scan-form{flex-direction:column; display: grid;}
    .scan-form input,.scan-form button{width:100%;}
    .hero-logo{width:98px;height:98px;}
}

@media(max-width:600px){
    .hero{padding:36px 18px;}
    .hero h1{font-size:27px;}
    .hero p{font-size:13px;line-height:1.9;}
    .hero-badge{font-size:11px;}

    .scan-form{
        margin-top:34px;
        gap:11px;
    }

    .scan-form input{
        height:50px;
        font-size:14px;
        padding:0 16px;
    }

    .scan-form button{
        height:50px;
        padding:0 21px;
        font-size:12px;
    }
}

/*==================================================
=                SECTION TITLE
==================================================*/
.section-title{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin-bottom:37px;
}

.section-title small{
    color:#60a5fa;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.78px;
    margin-bottom:9px;
}

.section-title h2{
    margin:0;
    font-size:34px;
    font-weight:900;
    color:var(--text);
}

/*==================================================
=                STATS
==================================================*/
.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.stat-card{
    position:relative;
    overflow:hidden;
    padding:30px;
    border-radius:21px;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(7px);
    transition:transform .35s,border-color .35s,box-shadow .35s;
    contain:layout paint style;
}

.stat-card::before{
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    background:radial-gradient(circle,#3b82f633,transparent);
    right:-62px;
    top:-62px;
    transition:.35s;
}

.stat-card:hover{
    transform:translateY(-8px);
    border-color:#3b82f6;
    box-shadow:0 22px 53px rgba(37,99,235,.22);
}

.stat-card:hover::before{
    transform:scale(1.4);
}

.stat-card h2{
    margin:0;
    font-size:37px;
    font-weight:900;
    color:#60a5fa;
}

.stat-card span{
    display:block;
    margin-top:12px;
    color:var(--muted);
    font-size:12px;
}

/*==================================================
=                DEMO
==================================================*/
.demo{
    padding:62px 36px;
    border-radius:30px;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(9px);
}

/*==================================================
=                SCORE GRID
==================================================*/
.score-card{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:23px;
}

/*==================================================
=                SCORE ITEM
==================================================*/
.score{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.score span{
    margin-top:18px;
    color:var(--muted);
    font-weight:700;
}

/*==================================================
=                CIRCLE
==================================================*/
.circle{
    width:134px;
    height:134px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:37px;
    font-weight:900;
    position:relative;
    transition:.35s;
}

.circle::before{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    z-index:-1;
}

.circle:hover{
    transform:scale(1.08) rotate(3deg);
}

/*==================================================
=                PERFORMANCE
==================================================*/
.performance{
    color:#22c55e;
    background:#22c55e22;
    border:9px solid #22c55e;
}

.performance::before{
    background:radial-gradient(circle,#22c55e33,transparent);
}

/*==================================================
=                ACCESSIBILITY
==================================================*/
.access{
    color:#3b82f6;
    background:#3b82f622;
    border:9px solid #3b82f6;
}

.access::before{
    background:radial-gradient(circle,#3b82f633,transparent);
}

/*==================================================
=                BEST PRACTICES
==================================================*/
.best{
    color:#f59e0b;
    background:#f59e0b22;
    border:9px solid #f59e0b;
}

.best::before{
    background:radial-gradient(circle,#f59e0b33,transparent);
}

/*==================================================
=                SEO
==================================================*/
.seo{
    color:#8b5cf6;
    background:#8b5cf622;
    border:9px solid #8b5cf6;
}

.seo::before{
    background:radial-gradient(circle,#8b5cf633,transparent);
}

/*==================================================
=                RESPONSIVE
==================================================*/
@media(max-width:1000px){
    .stats{grid-template-columns:repeat(2,1fr);}
    .score-card{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:650px){
    /*.stats{grid-template-columns:1fr;}
    .score-card{grid-template-columns:1fr;}*/
    .circle{width:107px;height:107px;font-size:30px;}
    .section-title h2{font-size:25px;}
    .demo{padding:36px 18px;}
}

/*==================================================
=                FEATURES
==================================================*/
.features{
    display:flex;
    flex-direction:column;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:21px;
}

.feature-card{
    position:relative;
    overflow:hidden;
    padding:30px;
    border-radius:25px;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(7px);
    transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
    cursor:pointer;
    contain:layout paint style;
}

.feature-card::before{
    content:"";
    position:absolute;
    left:var(--x);
    top:var(--y);
    width:214px;
    height:214px;
    background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);
    transform:translate(-50%,-50%);
    pointer-events:none;
    opacity:0;
    transition:.3s;
}

.feature-card:hover::before{
    opacity:1;
}

.feature-card:hover{
    transform:translateY(-10px);
    border-color:#3b82f6;
    box-shadow:0 27px 62px rgba(37,99,235,.25),0 0 71px rgba(124,58,237,.18);
}

.feature-card .icon{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    border-radius:20px;
    background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(124,58,237,.18));
    margin-bottom:23px;
}

.feature-card h3{
    margin:0;
    font-size:20px;
    font-weight:900;
    color:var(--text);
}

.feature-card p{
    margin-top:16px;
    line-height:2;
    color:var(--muted);
}

.feature-card::after{
    content:"";
    position:absolute;
    left:-120%;
    top:0;
    width:60%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
    transform:skewX(-20deg);
    transition:1s;
}

.feature-card:hover::after{
    left:150%;
}

/*==================================================
=                TIMELINE
==================================================*/
.timeline{
    padding:62px 27px;
    border-radius:30px;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
}

.timeline-items{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:9px;
    margin-top:44px;
}

.timeline-items div{
    width:98px;
    height:98px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    color:white;
    box-shadow:0 13px 36px rgba(37,99,235,.35);
    transition:.3s;
}

.timeline-items div:hover{
    transform:translateY(-10px) scale(1.05);
}

.timeline-items span{
    flex:1;
    height:3.56px;
    border-radius:999px;
    background:linear-gradient(90deg,#2563eb,#7c3aed);
}

/*==================================================
=                CTA
==================================================*/
.cta{
    position:relative;
    overflow:hidden;
    padding:80px 36px;
    text-align:center;
    border-radius:32px;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    color:white;
    box-shadow:0 31px 80px rgba(59,130,246,.30);
}

.cta::before{
    content:"";
    position:absolute;
    width:534px;
    height:534px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    filter:blur(107px);
    left:-160px;
    top:-196px;
}

.cta>*{
    position:relative;
    z-index:2;
}

.cta h2{
    margin:0;
    font-size:43px;
    font-weight:900;
}

.cta p{
    margin:23px auto;
    max-width:623px;
    font-size:16px;
    opacity:.9;
    line-height:2;
}

.cta a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 37px;
    border-radius:16px;
    background:white;
    color:#2563eb;
    font-weight:900;
    transition:.3s;
    box-shadow:0 16px 40px rgba(0,0,0,.18);
}

.cta a:hover{
    transform:translateY(-5px) scale(1.03);
}

/*==================================================
=                RESPONSIVE
==================================================*/
@media(max-width:1100px){
    .feature-grid{grid-template-columns:repeat(2,1fr);}
    .timeline-items{flex-wrap:wrap;justify-content:center;}
    .timeline-items span{display:none;}
}

@media(max-width:700px){
    .feature-grid{grid-template-columns:1fr;}
    .feature-card{padding:25px;}
    .timeline{padding:36px 18px;}
    .timeline-items{gap:21px;}
    .timeline-items div{width:80px;height:80px;font-size:12px;}
    .cta{padding:53px 18px;}
    .cta h2{font-size:28px;}
    .cta p{font-size:13px;}
}

/*==================================================
=                PREMIUM EFFECTS
==================================================*/
html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
}

/*==================================================
=                Animated Gradient Title
==================================================*/
.hero h1 span{
    background:linear-gradient(90deg,#3b82f6,#8b5cf6,#06b6d4,#3b82f6);
    background-size:300%;
    -webkit-background-clip:text;
    color:transparent;
    animation:titleGradient 8s linear infinite;
}

@keyframes titleGradient{
    0%{background-position:0%;}
    100%{background-position:300%;}
}

/*==================================================
=                Floating Animation
==================================================*/
.hero-logo{
    animation:floating 5s ease-in-out infinite;
}

@keyframes floating{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
}

/*==================================================
=                Glow
==================================================*/
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:radial-gradient(circle at center,rgba(255,255,255,.05),transparent 60%);
}

/*==================================================
=                Animated Border
==================================================*/
.scan-form{
    position:relative;
}

.scan-form::before{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:18px;
    padding:2.67px;
    background:linear-gradient(135deg,#3b82f6,#8b5cf6,#06b6d4,#3b82f6);
    background-size:300%;
    animation:borderMove 6s linear infinite;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

@keyframes borderMove{
    0%{background-position:0%;}
    100%{background-position:300%;}
}

/*==================================================
=                Particle Background
==================================================*/
.hero-background::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle,#ffffff22 1px,transparent 1px);
    background-size:80px 80px;
    animation:particles 25s linear infinite;
    opacity:.45;
    will-change:transform;
}

@keyframes particles{
    0%{transform:translateY(0);}
    100%{transform:translateY(-120px);}
}

/*==================================================
=                Scroll Reveal
==================================================*/
.hero,.stats,.demo,.features,.timeline,.cta{
    animation:fadeUp .6s ease both;
}

.stats{animation-delay:.15s;}
.demo{animation-delay:.25s;}
.features{animation-delay:.35s;}
.timeline{animation-delay:.45s;}
.cta{animation-delay:.55s;}

@keyframes fadeUp{
    from{opacity:0;transform:translateY(40px);}
    to{opacity:1;transform:none;}
}

/*==================================================
=                Button Ripple
==================================================*/
.scan-form button{
    position:relative;
    overflow:hidden;
}

.scan-form button::before{
    content:"";
    position:absolute;
    width:222px;
    height:222px;
    background:rgba(255,255,255,.2);
    border-radius:50%;
    left:-196px;
    top:-80px;
    transition:.8s;
}

.scan-form button:hover::before{
    left:120%;
}

/*==================================================
=                Card Glow
==================================================*/
.stat-card,.feature-card,.demo{
    position:relative;
}

.stat-card::after,.demo::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:inset 0 1px rgba(255,255,255,.08);
    pointer-events:none;
}

/*==================================================
=                Selection & Scrollbar
==================================================*/
::selection{
    background:#3b82f6;
    color:white;
}

::-webkit-scrollbar{
    width:9px;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#3b82f6,#8b5cf6);
    border-radius:999px;
}

::-webkit-scrollbar-track{
    background:transparent;
}

/*==================================================
=                Reveal on Scroll States
==================================================*/
.visible{
    opacity:1!important;
    transform:none!important;
    will-change:auto;
}

.stat-card,.feature-card,.demo,.timeline,.cta{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .5s ease,transform .5s ease;
    will-change:opacity,transform;
}

/*==================================================
=                Ripple Effect
==================================================*/
.ripple{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.35);
    transform:scale(0);
    animation:ripple .6s linear;
    pointer-events:none;
}

@keyframes ripple{
    to{transform:scale(4);opacity:0;}
}

/*==================================================
=                LIGHT MODE — CARD DEFINITION
=  NOTE: selector assumed as [data-theme="light"];
=  update to match the actual attribute/class your
=  base-dashboard.html toggles for day mode.
==================================================*/
[data-theme="light"] .stat-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .demo,
[data-theme="light"] .timeline{
    box-shadow:0 9px 21px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.9);
}

/*==================================================
=                LIGHT MODE — HERO
==================================================*/
[data-theme="light"] .hero{
    background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(240,244,250,.9));
    border-color:rgba(15,23,42,.08);
    box-shadow:0 22px 62px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.9);
}

[data-theme="light"] .hero::after{
    background:radial-gradient(circle at center,rgba(15,23,42,.05),transparent 60%);
    mix-blend-mode:normal;
}

[data-theme="light"] .hero-background .grid{
    background:
        linear-gradient(rgba(15,23,42,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(15,23,42,.04) 1px,transparent 1px);
}

[data-theme="light"] .hero-background::before{
    background-image:radial-gradient(circle,rgba(15,23,42,.08) 1px,transparent 1px);
    opacity:.6;
}

[data-theme="light"] .blur-1{
    background:#60a5fa;
    opacity:.45;
}

[data-theme="light"] .blur-2{
    background:#a78bfa;
    opacity:.45;
}

[data-theme="light"] .hero-badge{
    background:rgba(37,99,235,.08);
    border-color:rgba(37,99,235,.22);
    color:#2563eb;
}

[data-theme="light"] .hero-logo{
    background:rgba(15,23,42,.03);
    border-color:rgba(15,23,42,.08);
    box-shadow:0 18px 40px rgba(37,99,235,.18);
}

[data-theme="light"] .hero h1{
    color:#0f172a;
}

[data-theme="light"] .hero p{
    color:#475569;
}

[data-theme="light"] .scan-form input{
    background:rgba(15,23,42,.03);
    border-color:rgba(15,23,42,.10);
    color:#0f172a;
}

[data-theme="light"] .scan-form input::placeholder{
    color:rgba(15,23,42,.4);
}

[data-theme="light"] .scan-form input:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

[data-theme="light"] .hero-trust div{
    background:rgba(15,23,42,.04);
    border-color:rgba(15,23,42,.09);
    color:#475569;
}

[data-theme="light"] .hero-trust div:hover{
    color:#0f172a;
    border-color:#2563eb;
}

/*==================================================
=                LIGHT MODE — LOADING CARD
==================================================*/
[data-theme="light"] .loading-card{
    background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(241,245,249,.95));
    border-color:rgba(15,23,42,.08);
    box-shadow:0 27px 89px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.9);
}

[data-theme="light"] .error-card{
    background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(241,245,249,.95));
    border-color:rgba(15,23,42,.08);
    box-shadow:0 27px 89px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.9);
}

[data-theme="light"] .btn-close{
    background:rgba(23, 27, 158, 0.06);
    color:rgb(0, 0, 38);
    border:1px solid rgba(23, 27, 158, 0.6);
}

[data-theme="light"] .error-card p {
  color: #071831;
}

[data-theme="light"] .loading-title{
    color:#0f172a;
}

[data-theme="light"] .loading-url{
    color:#64748b;
}

[data-theme="light"] .loading-percent{
    color:#0f172a;
}

[data-theme="light"] .loading-step{
    color:#2563eb;
}

[data-theme="light"] .ring-bg{
    stroke:rgba(15,23,42,.08);
}

[data-theme="light"] .timeline-item span{
    color:#64748b;
}

[data-theme="light"] .timeline-item .dot{
    background:#cbd5e1;
    border-color:rgba(15,23,42,.08);
}

[data-theme="light"] .timeline-line{
    background:#e2e8f0;
}

[data-theme="light"] .loading-footer{
    color:#052a47;
}

/*==================================================
=                LOADING OVERLAY
==================================================*/
.loading-overlay{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(3,8,20,.9);
    backdrop-filter:blur(9px);
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease,visibility .35s ease;
    z-index:999999;
}

[data-theme="light"] .loading-overlay{
    background:rgba(228, 236, 255, 0.3);
}

.loading-overlay.show{
    opacity:1;
    visibility:visible;
}

/*==================================================
=                LOADING CARD
==================================================*/
.loading-card{
    position:relative;
    overflow:hidden;
    width:min(605px,92vw);
    padding:49px 40px;
    border-radius:30px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg,rgba(16,22,36,.96),rgba(7,11,22,.97));
    box-shadow:0 27px 89px rgba(0,0,0,.45);
    text-align:center;
}

/*==================================================
=                LOADING AURORA
==================================================*/
.loading-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.loading-bg .blur{
    position:absolute;
    border-radius:999px;
    filter:blur(53px);
    opacity:.8;
    will-change:transform;
    transform:translateZ(0);
}

.loading-bg .blur-1{
    width:374px;
    height:374px;
    background:#2563eb;
    right:-107px;
    top:-107px;
    animation:loadingAurora1 10s ease-in-out infinite;
}

.loading-bg .blur-2{
    width:320px;
    height:320px;
    background:#7c3aed;
    left:-89px;
    bottom:-107px;
    animation:loadingAurora2 13s ease-in-out infinite;
}

@keyframes loadingAurora1{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-60px,40px) scale(1.15);}
}

@keyframes loadingAurora2{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(70px,-50px) scale(1.1);}
}

/*==================================================
=                LOADING LOGO
==================================================*/
.loading-logo{
    position:relative;
    z-index:5;
    width:77px;
    height:77px;
    margin-bottom:20px;
    animation:loadingFloat 4s ease-in-out infinite;
}

@keyframes loadingFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
}

/*==================================================
=                LOADING TITLE / URL
==================================================*/
.loading-title{
    position:relative;
    z-index:5;
    margin:0;
    font-size:30px;
    font-weight:900;
    color:#fff;
}

.loading-url{
    position:relative;
    z-index:5;
    margin-top:14px;
    color:#94a3b8;
    direction:ltr;
    word-break:break-word;
    font-size:12px;
}

/*==================================================
=                PROGRESS RING
==================================================*/
.loading-ring-wrapper{
    position:relative;
    width:160px;
    height:160px;
    margin:36px auto;
}

.loading-ring{
    width:160px;
    height:160px;
    transform:rotate(-90deg);
    shape-rendering:geometricPrecision;
    border-radius: 999px;
}

.ring-bg{
    fill:none;
    stroke:rgba(255,255,255,.06);
    stroke-width:8;
    shape-rendering:geometricPrecision;
}

.ring-progress{
    fill:none;
    stroke:#3b82f6;
    stroke-width:8;
    stroke-linecap:round;
    stroke-dasharray:327;
    stroke-dashoffset:327;
    shape-rendering:geometricPrecision;
    filter:drop-shadow(0 0 9px #3b82f6) drop-shadow(0 0 18px #3b82f6);
    transition:stroke-dashoffset .35s linear;
}

.loading-percent{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    font-weight:900;
    color:white;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/*==================================================
=                CURRENT STEP TEXT
==================================================*/
.loading-step{
    margin-top:7px;
    min-height:25px;
    font-size:16px;
    font-weight:700;
    color:#60a5fa;
    animation:pulseText 2s infinite;
}

@keyframes pulseText{
    0%,100%{opacity:1;}
    50%{opacity:.55;}
}

/*==================================================
=                TIMELINE
==================================================*/
.loading-timeline{
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:0;
    margin-top:40px;
    z-index:5;
}

.timeline-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:64px;
}

.timeline-item .dot{
    width:16px;
    height:16px;
    border-radius:50%;
    background:#334155;
    border:3px solid rgba(255,255,255,.08);
    transition:.35s;
}

.timeline-item span{
    margin-top:11px;
    font-size:11px;
    color:#94a3b8;
    font-weight:700;
    text-align:center;
    transition:.35s;
}

.timeline-line{
    width:43px;
    height:2.67px;
    margin-top:7px;
    background:#273244;
    border-radius:999px;
    transition:.35s;
}

.timeline-item.active .dot{
    background:#3b82f6;
    border-color:#60a5fa;
    box-shadow:0 0 11px rgba(59,130,246,.8),0 0 27px rgba(59,130,246,.35);
}

.timeline-item.active span{
    color:white;
}

.timeline-item.done .dot{
    background:#22c55e;
    border-color:#4ade80;
    box-shadow:0 0 12px rgba(34,197,94,.7);
}

.timeline-item.done span{
    color:#4ade80;
}

.timeline-item.done .dot::after{
    content:"✓";
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:10px;
    font-weight:900;
}

.timeline-line.done{
    background:linear-gradient(90deg,#22c55e,#3b82f6);
}

/*==================================================
=                FOOTER HINT
==================================================*/
.loading-footer{
    margin-top:30px;
    color:#f4f8ff;
    font-size:12px;
    line-height:1.8;
}

/*==================================================
=                LOADING CARD SHINE + BORDER GLOW
==================================================*/
.loading-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-140%;
    width:60%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
    transform:skewX(-18deg);
    animation:loadingShine 6s linear infinite;
}

@keyframes loadingShine{
    0%{left:-140%;}
    100%{left:170%;}
}

.loading-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    box-shadow:inset 0 1px rgba(255,255,255,.08);
}

/*==================================================
=                LOADING CARD RESPONSIVE
==================================================*/
@media(max-width:700px){
    .loading-card{padding:30px 20px;}
    .loading-title{font-size:23px;}
    .loading-ring-wrapper{width:129px;height:129px;}
    .loading-ring{width:129px;height:129px;}
    .loading-percent{font-size:27px;}
    .loading-timeline{transform:scale(.86);transform-origin:center;}
    .timeline-item{width:52px;}
    .timeline-line{width:23px;}
}

/*==================================================
=                ERROR OVERLAY
==================================================*/
.error-overlay{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(3,8,20,.92);
    backdrop-filter:blur(9px);
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease,visibility .35s ease;
    z-index:999999;
}

[data-theme="light"] .error-overlay{
    background:rgba(228, 236, 255, 0.3);
}

.error-overlay.show{
    opacity:1;
    visibility:visible;
}

/*==================================================
=                ERROR CARD
==================================================*/
.error-card{
    position:relative;
    overflow:hidden;
    width:min(445px,92vw);
    padding:40px;
    border-radius:27px;
    text-align:center;
    background:linear-gradient(180deg,rgba(20,20,28,.96),rgba(10,10,18,.97));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 27px 71px rgba(0,0,0,.45);
    animation:errorPop .35s ease;
}

/*==================================================
=                ERROR AURORA
==================================================*/
.error-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.error-blur{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
}

.error-blur-1{
    width:249px;
    height:249px;
    background:#ef4444;
    top:-107px;
    right:-71px;
}

.error-blur-2{
    width:196px;
    height:196px;
    background:#f97316;
    left:-71px;
    bottom:-71px;
}

/*==================================================
=                ERROR ICON
==================================================*/
.error-icon{
    width:85px;
    height:85px;
    margin:0 auto 22px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:37px;
    font-weight:bold;
    color:white;
    background:linear-gradient(135deg,#ef4444,#f97316);
    box-shadow:0 0 27px rgba(239,68,68,.45);
}

/*==================================================
=                ERROR TEXT
==================================================*/
.error-card h2{
    margin:0;
    font-size:27px;
    font-weight:900;
}

.error-card p{
    margin:16px 0 31px;
    color:#94a3b8;
    line-height:2;
}

/*==================================================
=                ERROR BUTTONS
==================================================*/
.error-actions{
    display:flex;
    gap:12px;
    justify-content:center;
}

.error-actions button{
    min-width:125px;
    height:46px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-size:13px;
    font-weight:800;
    transition:.25s;
}

.btn-retry{
    color:white;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
}

.btn-retry:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 31px rgba(37,99,235,.35);
}

.btn-close{
    background:rgba(255,255,255,.06);
    color:white;
    border:1px solid rgba(255,255,255,.08);
}

.btn-close:hover{
    background:rgba(255,255,255,.10);
}

/*==================================================
=                ERROR ANIMATION
==================================================*/
@keyframes errorPop{
    from{opacity:0;transform:scale(.9) translateY(25px);}
    to{opacity:1;transform:none;}
}

/*==================================================
=                ERROR CARD RESPONSIVE
==================================================*/
@media(max-width:600px){
    .error-card{padding:28px 18px;}
    .error-card h2{font-size:21px;}
    .error-actions{flex-direction:column;}
    .error-actions button{width:100%;}
}

/*==================================================
=                REDUCED MOTION / LOW-POWER
==================================================*/
@media(prefers-reduced-motion:reduce){
    .blur,
    .hero-background::before,
    .hero h1 span,
    .hero-logo,
    .scan-form::before,
    .loading-logo,
    .loading-card::before,
    .loading-step{
        animation:none!important;
    }
}

@media(max-width:700px){
    .blur{filter:blur(40px);}
    .loading-bg .blur{filter:blur(36px);}
}