/* =======================================================
   HERO V3
======================================================= */

.hero-v3{
    position:relative;
    overflow:hidden;

    min-height:calc(100vh - 120px);
    width: 100%;

    background:

    radial-gradient(
    circle at top left,
    rgba(59,130,246,.25),
    transparent 35%
    ),

    radial-gradient(
    circle at bottom right,
    rgba(139,92,246,.25),
    transparent 35%
    ),

    linear-gradient(
    180deg,
    #0f172a,
    #1a1f3a
    );

    padding:clamp(28px, 3vw, 48px) 0 clamp(48px, 5vw, 72px);
    margin:0;
    transition:margin-top .45s ease;
}

body.announcement-hidden .hero-v3{
    margin-top:0;
}

.hero-v3::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
        rgba(15,23,42,0),
        rgba(15,23,42,0)
    ),

    radial-gradient(
        circle at 20% 20%,
        rgba(59,130,246,.15),
        transparent 25%
    ),

    radial-gradient(
        circle at 80% 80%,
        rgba(139,92,246,.15),
        transparent 25%
    );

    pointer-events:none;
}

/* =======================================================
   BACKGROUND GLOW
======================================================= */

.hero-bg{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(120px);
}

.hero-bg-1{
    width:450px;
    height:450px;

    top:-120px;
    left:-150px;

    background:#60a5fa;
    opacity:.18;
}

.hero-bg-2{
    width:500px;
    height:500px;

    bottom:-200px;
    right:-150px;

    background:#8b5cf6;
    opacity:.14;
}

/* =======================================================
   MAIN LAYOUT
======================================================= */

.hero-inner{

    max-width:min(94vw, 1760px);

    width:100%;

    margin:0 auto;

    display:grid;

    grid-template-columns:minmax(0, 56fr) minmax(380px, 44fr);

    gap:clamp(24px, 3vw, 56px);

    padding:0 clamp(24px, 4vw, 72px);

    position:relative;
    z-index:2;
}

/* =======================================================
   LEFT CONTENT
======================================================= */

.hero-content{
    max-width:none;
    width:100%;
}

/* =======================================================
   BADGE
======================================================= */

.hero-badge{

    display:inline-flex;
    align-items:center;

    gap:8px;

    padding:12px 22px;

    border-radius:999px;

    background:rgba(37,99,235,.15);

    border:1px solid rgba(37,99,235,.3);

    color:#60a5fa;

    font-size:13px;
    font-weight:700;

    letter-spacing:.4px;

    margin-bottom:34px;
}

/* =======================================================
   TITLE
======================================================= */

.hero-heading{

    margin:0;

    font-size:clamp(46px, 4.1vw, 76px);

    line-height:1.15;

    letter-spacing:-1px;

    font-weight:700;

    color:#ffffff;
}

/* =========================================
   HERO RANK
========================================= */

.hero-rank{

    display:inline-block;

    margin-right:6px;

    font-family:"Archivo Black", sans-serif;

    font-size:1.4em;

    line-height:1;

    background:linear-gradient(
        90deg,
        #60a5fa,
        #2563eb,
        #8b5cf6,
        #2563eb,
        #60a5fa
    );

    background-size:300% 300%;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 0 30px rgba(99,102,241,.25);

    animation:shine 4s linear infinite;
}

.hero-main-title{
    display:inline;
    color:#ffffff;
}

.hero-gradient-text{
    display:block;
    margin-top:6px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #4f46e5,
        #8b5cf6
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

@keyframes shine{

    0%{
        background-position:-100% 0;
    }

    100%{
        background-position:200% 0;
    }

}
/* =======================================================
   DESCRIPTION
======================================================= */

.hero-description{

    margin-top:15px;
    margin-bottom:20px;

    max-width:clamp(560px, 44vw, 760px);

    font-size:clamp(18px, 1.35vw, 24px);
    line-height:1.8;

    color:#cbd5e1;
}

/* =======================================================
   FEATURES
======================================================= */

.hero-features{

    display:flex;
    flex-wrap:wrap;

    gap:clamp(16px, 2vw, 30px);

    margin-bottom:20px;
}

.feature-item{

    display:flex;
    align-items:center;

    gap:10px;

    color:#cbd5e1;

    font-weight:600;

    font-size:15px;
}

.feature-icon{
    font-size:18px;
}

/* =======================================================
   SEARCH
======================================================= */

.hero-search{

    display:flex;
    align-items:center;
    max-width:min(100%, 820px);
    width:100%;
    height:clamp(62px, 4.8vw, 78px);

    background:rgba(255,255,255,.08);

    border-radius:999px;

    border:1px solid rgba(255,255,255,.15);

    padding:8px;

    box-shadow:
    0 20px 40px rgba(0,0,0,.3);

    margin-bottom:15px;
    backdrop-filter:blur(10px);
}

.hero-search input{

    flex:1;

    border:none;
    outline:none;

    background:transparent;

    padding:0 24px;

    font-size:17px;

    color:#ffffff;
}

.hero-search input::placeholder{
    color:#94a3b8;
}

.hero-search button{

    width:clamp(48px, 3.8vw, 60px);
    height:clamp(48px, 3.8vw, 60px);

    border:none;

    cursor:pointer;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #8b5cf6
    );

    color:#ffffff;

    font-size:30px;
    font-weight:100;

    transition:.3s;
}

.hero-search button:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(99,102,241,.35);
}

/* =======================================================
   TAGS
======================================================= */

.hero-tags{

    display:flex;
    flex-wrap:wrap;

    gap:12px;
}

.hero-tags a{

    padding:10px 16px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    color:#cbd5e1;
    text-decoration:none;

    font-size:13px;
    font-weight:600;

    transition:.25s;
}

.hero-tags a:hover{

    transform:translateY(-2px);

    background:rgba(37,99,235,.2);

    border-color:rgba(37,99,235,.4);
}

/* =======================================================
   HERO DASHBOARD
======================================================= */

.hero-dashboard{
    width:100%;
    max-width:min(100%, 44vw, 820px);
    margin-left:auto;
    position:relative;
}

.dashboard-wrapper{

    position:relative;

    background:
    linear-gradient(
        180deg,
        rgba(30,41,59,.5),
        rgba(15,23,42,.6)
    );

    border:1px solid rgba(100,116,139,.3);

    border-radius:clamp(22px, 1.7vw, 30px);

    padding:clamp(16px, 2vw, 28px);

    backdrop-filter:blur(20px);

    box-shadow:
    0 30px 80px rgba(0,0,0,.4);

    overflow:hidden;
    transform:perspective(1400px)
    rotateY(-2deg);
}

.dashboard-wrapper::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:4px;

    background:
    linear-gradient(
        90deg,
        #2563eb,
        #4f46e5,
        #8b5cf6
    );
}

.dashboard-wrapper::after{
    content:"";
    position:absolute;
    inset:8%;
    z-index:0;
    pointer-events:none;
    opacity:.45;
    background:
    radial-gradient(circle, rgba(96,165,250,.9) 0 1px, transparent 2px) 12% 18% / 120px 120px,
    radial-gradient(circle, rgba(167,139,250,.85) 0 1px, transparent 2px) 70% 28% / 150px 150px,
    radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 2px) 38% 72% / 180px 180px;
    transform-origin:center;
    animation:dashboardGalaxyRotate 28s linear infinite;
}

.dashboard-top,
.dashboard-middle{
    position:relative;
    z-index:2;
}

/* =======================================================
   TOP STATS
======================================================= */

.dashboard-top{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:clamp(10px, 2.4%, 16px);

    margin-bottom:clamp(14px, 2.8%, 20px);
}

.stat-card{

    position:relative;
    overflow:hidden;

    background:rgba(51,65,85,.3);

    border:1px solid rgba(100,116,139,.2);

    border-radius:clamp(16px, 1.25vw, 22px);

    padding:clamp(14px, 3%, 18px);
    min-height:clamp(96px, 6.8vw, 132px);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    transition:.3s;
}

.stat-card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 35px rgba(37,99,235,.2);
}

.stat-card h3{

    margin:0;

    font-size:clamp(26px, 2.1vw, 40px);
    font-weight:800;

    color:#60a5fa;
}

.stat-card p{

    margin:8px 0 0;

    font-size:clamp(11px, .82vw, 14px);

    color:#94a3b8;
}

/* =======================================================
   DASHBOARD GRID
======================================================= */

.dashboard-middle{

    display:grid;

    grid-template-columns:repeat(3, minmax(0, 1fr));

    gap:clamp(12px, 2.6%, 18px);

    align-items:stretch;
}

/* =======================================================
   POPULAR TOOLS PANEL
======================================================= */

.popular-tools-panel{

    position:relative;
    overflow:hidden;

    background:rgba(51,65,85,.3);

    border:1px solid rgba(100,116,139,.2);

    border-radius:clamp(18px, 1.45vw, 26px);

    padding:clamp(14px, 1.4vw, 22px);
    min-height:100%;
}

.popular-tools-panel h4{

    margin:0 0 clamp(14px, 1.3vw, 20px);

    font-size:clamp(14px, 1vw, 18px);

    color:#e2e8f0;
}

.popular-tools-panel ul{

    list-style:none;

    margin:0;
    padding:0;
}

.popular-tools-panel li{

    display:flex;
    align-items:center;

    gap:clamp(8px, .85vw, 12px);

    padding:clamp(8px, .85vw, 12px) 0;

    border-bottom:
    1px solid rgba(100,116,139,.15);

    font-size:clamp(12px, .86vw, 15px);

    color:#cbd5e1;

    font-weight:600;
}

.popular-tools-panel li a{
    width:100%;
    display:flex;
    align-items:center;
    gap:clamp(8px, .85vw, 12px);
    color:inherit;
    text-decoration:none;
}

.popular-tools-panel li:last-child{
    border-bottom:none;
}

.popular-tools-panel li span{

    width:clamp(26px, 2vw, 34px);
    aspect-ratio:1;
    height:auto;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;

    background:rgba(37,99,235,.2);
}

/* =======================================================
   CENTER CARD
======================================================= */

.hero-core-card{

    position:relative;
    isolation:isolate;

    border-radius:clamp(20px, 1.6vw, 28px);

    background:
    linear-gradient(
        135deg,
        rgba(37,99,235,.15),
        rgba(139,92,246,.15)
    );

    display:flex;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    min-height:clamp(340px, 25vw, 460px);

    overflow:hidden;
    border:1px solid rgba(100,116,139,.2);
}

.hero-core-card .hero-core-circle,
.hero-core-card h2,
.hero-core-card p{
    transform:translateY(-4px);
}

.hero-core-card::before{

    content:"";

    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -38%);

    width:min(120%, clamp(210px, 16vw, 300px));
    aspect-ratio:1;
    height:auto;

    border-radius:50%;

    border:2px solid
    rgba(99,102,241,.12);
}

.hero-core-card::after{

    content:"";

    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -38%);

    width:min(92%, clamp(170px, 12.5vw, 230px));
    aspect-ratio:1;
    height:auto;

    border-radius:50%;

    border:2px solid
    rgba(99,102,241,.18);
}

/* =======================================================
   CENTER ICON
======================================================= */

.hero-core-circle{

    position:relative;
    z-index:2;
    container-type:inline-size;
    overflow:hidden;

    width:min(70%, clamp(126px, 11vw, 200px));
    aspect-ratio:1;
    height:auto;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #8b5cf6
    );

    box-shadow:
    0 25px 50px rgba(99,102,241,.25);

    margin-bottom:clamp(18px, 1.8vw, 30px);
}

.hero-core-icon{

    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);

    color:white;

    font-size:clamp(42px, 10vw, 90px);
    font-size:clamp(42px, 42cqi, 90px);
    line-height:1;
}

.hero-core-card h2{

    position:relative;
    z-index:2;

    margin:0;

    font-size:clamp(30px, 2.7vw, 48px);
    font-weight:800;
    line-height:1.05;

    color:#ffffff;
}

.hero-core-card p{

    position:relative;
    z-index:2;

    margin-top:14px;

    color:#cbd5e1;

    font-size:clamp(13px, .95vw, 17px);
}

/* =======================================================
   RIGHT SIDE
======================================================= */

.dashboard-side{

    display:grid;

    grid-template-rows:repeat(2, minmax(0, 1fr));

    gap:clamp(12px, 2.6%, 18px);
}

.security-card,
.speed-card{

    position:relative;
    overflow:hidden;

    background:rgba(51,65,85,.3);

    border:1px solid rgba(100,116,139,.2);

    border-radius:clamp(18px, 1.45vw, 26px);

    padding:clamp(14px, 1.55vw, 24px);
    min-height:0;
}

.security-icon{

    width:min(36%, clamp(42px, 3.2vw, 58px));
    aspect-ratio:1;
    height:auto;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:rgba(37,99,235,.2);

    font-size:24px;

    margin-bottom:clamp(10px, 1vw, 16px);
}

.security-card h5{

    margin:0 0 10px;

    font-size:clamp(14px, .98vw, 18px);

    color:#03234d;
}

.security-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.security-card p{

    margin:0;

    font-size:clamp(11px, .82vw, 14px);

    line-height:1.7;

    color:#cbd5e1;
}

.speed-card{

    margin-top:0;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
}

.speed-value{

    font-size:clamp(20px, 1.6vw, 28px);
    font-weight:800;

    color:#a78bfa;

    margin-bottom:10px;
}

.speed-card p{

    margin:0;

    font-size:clamp(11px, .82vw, 14px);

    color:#cbd5e1;
}

/* =======================================================
   DASHBOARD SHINE ANIMATION
======================================================= */

.floating-dot{

    position:absolute;
    z-index:1;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #8b5cf6
    );

    box-shadow:
    0 0 22px rgba(99,102,241,.65),
    0 0 48px rgba(96,165,250,.28);
    pointer-events:none;
    transform-origin:center;
}

.floating-dot-1{
    width:1.8%;
    min-width:9px;
    max-width:14px;
    aspect-ratio:1;
    height:auto;

    top:14%;
    left:78%;
    animation:galaxyOrbitOne 9s ease-in-out infinite;
}

.floating-dot-2{
    width:2.7%;
    min-width:13px;
    max-width:20px;
    aspect-ratio:1;
    height:auto;

    top:75%;
    left:88%;
    animation:galaxyOrbitTwo 12s ease-in-out infinite;
}

.floating-dot-3{
    width:1.5%;
    min-width:8px;
    max-width:12px;
    aspect-ratio:1;
    height:auto;

    top:39%;
    left:7%;
    animation:galaxyOrbitThree 10.5s ease-in-out infinite;
}

@keyframes dashboardGalaxyRotate{

    0%{
        transform:rotate(0deg) scale(1);
    }

    50%{
        transform:rotate(180deg) scale(1.04);
    }

    100%{
        transform:rotate(360deg) scale(1);
    }
}

@keyframes galaxyOrbitOne{

    0%{
        transform:translate(0, 0) rotate(0deg) scale(1);
        opacity:.72;
    }

    35%{
        transform:translate(-42px, 34px) rotate(140deg) scale(1.35);
        opacity:1;
    }

    70%{
        transform:translate(26px, 74px) rotate(260deg) scale(.85);
        opacity:.62;
    }

    100%{
        transform:translate(0, 0) rotate(360deg) scale(1);
        opacity:.72;
    }
}

@keyframes galaxyOrbitTwo{

    0%{
        transform:translate(0, 0) rotate(0deg) scale(1);
        opacity:.8;
    }

    30%{
        transform:translate(-66px, -46px) rotate(120deg) scale(.78);
        opacity:.58;
    }

    65%{
        transform:translate(-28px, -118px) rotate(240deg) scale(1.28);
        opacity:1;
    }

    100%{
        transform:translate(0, 0) rotate(360deg) scale(1);
        opacity:.8;
    }
}

@keyframes galaxyOrbitThree{

    0%{
        transform:translate(0, 0) rotate(0deg) scale(1);
        opacity:.66;
    }

    40%{
        transform:translate(58px, -30px) rotate(150deg) scale(1.2);
        opacity:1;
    }

    72%{
        transform:translate(104px, 38px) rotate(270deg) scale(.75);
        opacity:.52;
    }

    100%{
        transform:translate(0, 0) rotate(360deg) scale(1);
        opacity:.66;
    }
}

.stat-card::after,
.popular-tools-panel::after,
.hero-core-circle::after,
.security-card::after,
.speed-card::after{
    content:"";
    position:absolute;
    inset:-40%;
    z-index:3;
    pointer-events:none;
    background:
    linear-gradient(
        115deg,
        transparent 35%,
        var(--dashboard-shine-edge, rgba(255,255,255,.08)) 43%,
        var(--dashboard-shine-core, rgba(255,255,255,.8)) 50%,
        var(--dashboard-shine-edge, rgba(255,255,255,.08)) 57%,
        transparent 65%
    );
    mix-blend-mode:var(--dashboard-shine-blend, screen);
    transform:translateX(-130%) rotate(8deg);
    animation:dashboardShine 7s ease-in-out infinite;
}

.hero-core-circle::after{
    border-radius:50%;
}

.dashboard-top .stat-card:nth-child(1)::after{
    animation-delay:0s;
}

.dashboard-top .stat-card:nth-child(2)::after{
    animation-delay:.75s;
}

.dashboard-top .stat-card:nth-child(3)::after{
    animation-delay:1.5s;
}

.popular-tools-panel::after{
    animation-delay:2.25s;
}

.hero-core-circle::after{
    animation-delay:3s;
}

.security-card::after{
    animation-delay:3.75s;
}

.speed-card::after{
    animation-delay:4.5s;
}

@keyframes dashboardShine{

    0%{
        transform:translateX(-130%) rotate(8deg);
        opacity:0;
    }

    3%{
        opacity:1;
    }

    10%{
        transform:translateX(130%) rotate(8deg);
        opacity:1;
    }

    14%,
    100%{
        transform:translateX(130%) rotate(8deg);
        opacity:0;
    }
}

/* =======================================================
   HOVER EFFECTS
======================================================= */

.popular-tools-panel,
.security-card,
.speed-card{

    transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.popular-tools-panel:hover,
.security-card:hover,
.speed-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 20px 40px rgba(37,99,235,.08);
}

.hero-core-circle{

    transition:.4s;
}

.hero-core-card:hover .hero-core-circle{

    transform:translateY(-4px) scale(1.08);
}

/* =======================================================
   TABLET
======================================================= */

@media (max-width:1200px){

    .hero-inner{

        grid-template-columns:1fr;
        gap:60px;
    }

    .hero-content{

        max-width:100%;
        text-align:center;
    }

    .hero-features{
        justify-content:center;
    }

    .hero-tags{
        justify-content:center;
    }

    .hero-search{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-dashboard{
        max-width:min(100%, 900px);
        margin:auto;
    }
}

/* =======================================================
   MOBILE LARGE
======================================================= */

@media (max-width:992px){

    .hero-v3{

        padding:70px 18px 80px;
        min-height:auto;
    }

    .hero-heading{

        font-size:clamp(42px, 7vw, 58px);
        letter-spacing:-1px;
    }

    .hero-description{

        font-size:18px;
    }

    .dashboard-middle{

        grid-template-columns:1fr;
    }

    .dashboard-side{

        flex-direction:row;
    }

    .security-card,
    .speed-card{
        flex:1;
    }

    .hero-core-card{

        min-height:300px;
    }
}

/* =======================================================
   MOBILE
======================================================= */

@media (max-width:768px){

    .hero-heading{

        font-size:42px;
        line-height:1.15;
    }

    .hero-description{

        font-size:16px;
        line-height:1.8;
    }

    .hero-features{

        gap:16px;
    }

    .feature-item{

        font-size:14px;
    }

    .hero-search{

        height:64px;
        width:min(100%, 360px);
        max-width:360px;

        padding:8px;

        flex-direction:row;

        border-radius:999px;

        gap:0;
        margin-left:auto;
        margin-right:auto;
    }

    .hero-search input{

        width:auto;
        min-width:0;
        padding:0 16px;
        font-size:15px;
    }

    .hero-search button{

        width:48px;
        height:48px;
        flex:0 0 48px;

        border-radius:50%;
    }

    .dashboard-top{

        grid-template-columns:1fr;
    }

    .dashboard-side{

        flex-direction:column;
    }

    .hero-core-circle{

        width:min(44%, 110px);
        height:auto;
    }

    .hero-core-icon{

        font-size:clamp(36px, 42cqi, 42px);
    }

    .hero-core-card h2{

        font-size:30px;
    }
}

/* =======================================================
   SMALL MOBILE
======================================================= */

@media (max-width:480px){

    .hero-v3{

        padding:50px 14px 60px;
    }

    .hero-badge{

        font-size:11px;

        padding:10px 16px;
    }

    .hero-heading{

        font-size:34px;
    }

    .hero-description{

        font-size:15px;
    }

    .hero-features{

        flex-direction:column;
        align-items:flex-start;
    }

    .hero-tags{

        gap:8px;
    }

    .hero-tags a{

        font-size:12px;
        padding:8px 12px;
    }

    .dashboard-wrapper{

        padding:18px;
        border-radius:24px;
    }

    .hero-core-card{

        min-height:250px;
    }

    .hero-core-circle{

        width:min(42%, 90px);
        height:auto;
    }

    .hero-core-icon{

        font-size:clamp(32px, 42cqi, 36px);
    }

    .hero-core-card h2{

        font-size:24px;
    }

    .stat-card h3{

        font-size:26px;
    }
}

/* ===== HOME MOBILE WHITE FIT ===== */
@media(max-width:900px){
    .hero-v3{min-height:auto !important;padding-bottom:48px !important;}
    .hero-title{font-size:clamp(40px,12vw,58px) !important;line-height:1.18 !important;}
    .hero-description{font-size:1rem !important;line-height:1.65 !important;}
    .hero-search-wrapper{max-width:100% !important;}
}

/* ===== HERO SEARCH TAGS AND GALAXY FINAL ===== */
.hero-search button{display:grid;place-items:center;}
.hero-search button i{font-size:24px;line-height:1;}

.hero-tags{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 14px;
    max-width:min(100%, 820px);
}

.hero-tags a{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 13px;
    border-radius:999px;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    color:#bfdbfe;
    background:rgba(96,165,250,.12);
    border:1px solid rgba(96,165,250,.16);
}

.dashboard-wrapper::after{
    opacity:.72;
    background:
    radial-gradient(circle, rgba(37,99,235,.95) 0 1.4px, transparent 2.6px) 12% 18% / 120px 120px,
    radial-gradient(circle, rgba(139,92,246,.92) 0 1.4px, transparent 2.6px) 70% 28% / 150px 150px,
    radial-gradient(circle, rgba(14,165,233,.70) 0 1.2px, transparent 2.4px) 38% 72% / 180px 180px;
}

@media(max-width:900px){
    .hero-tags{justify-content:center;gap:9px;}
    .hero-tags a{font-size:12px;min-height:28px;padding:0 11px;}
}

/* ===== HERO SEARCH INPUT SURFACE FIX ===== */
.hero-search input,
body.theme-dark .hero-search input{
    background:transparent !important;
    box-shadow:none !important;
    border-radius:999px !important;
    color:#f8fbff !important;
}

body.theme-dark .hero-search{
    background:rgba(255,255,255,.075) !important;
    border-color:rgba(255,255,255,.16) !important;
}

body.theme-dark .hero-search input::placeholder{color:#a8b5c7 !important;}

body:not(.theme-dark) .hero-search input{
    background:rgba(255,255,255,.72) !important;
    color:#102033 !important;
}


/* Remove gap below announcement */
.hero-v3{
    padding-top:0 !important;
}
.hero-inner{
    padding-top:0 !important;
}
.hero-badge{
    margin-top:0 !important;
}
@media(max-width:900px){
    .hero-v3{padding-top:0 !important;}
    .hero-inner{padding-top:0 !important;}
    .hero-badge{margin-top:0 !important;}
}
/* Final measured fix: pull hero content to announcement edge */
.hero-inner{
    margin-top:-20px !important;
}



@media(max-width:900px){
    .hero-inner{
        margin-top:-20px !important;
    }
}
/* Final measured section pull: remove 20px hero band under announcement */
.hero-v3,
body.announcement-hidden .hero-v3,
body:not(.theme-dark) .hero-v3{
    margin-top:-20px !important;
    padding-top:0 !important;
}

@media(max-width:900px){
    .hero-v3,
    body.announcement-hidden .hero-v3,
    body:not(.theme-dark) .hero-v3{
        margin-top:-20px !important;
        padding-top:0 !important;
    }
}
/* Keep hero aligned correctly after announcement is closed */
body.announcement-hidden .hero-v3,
body.announcement-hidden:not(.theme-dark) .hero-v3{
    margin-top:0 !important;
}
/* Closed announcement: move hero up, but keep badge below header */
body.announcement-hidden .hero-v3,
body.announcement-hidden:not(.theme-dark) .hero-v3{
    margin-top:0 !important;
    padding-top:0 !important;
}

body.announcement-hidden .hero-inner,
body.announcement-hidden:not(.theme-dark) .hero-inner{
    margin-top:0 !important;
    padding-top:0 !important;
}
/* Mobile: keep hero focused by hiding the dashboard preview */
@media(max-width:900px){
    .hero-dashboard{
        display:none !important;
    }

    .hero-inner{
        grid-template-columns:1fr !important;
    }
}

/* ===== HOME MOBILE HEADER GAP FINAL ===== */
@media(max-width:900px){
    .hero-v3,
    body.announcement-hidden .hero-v3,
    body:not(.theme-dark) .hero-v3{
        margin-top:0 !important;
        padding-top:18px !important;
    }

    .hero-inner,
    body.announcement-hidden .hero-inner,
    body.announcement-hidden:not(.theme-dark) .hero-inner{
        margin-top:0 !important;
        padding-top:0 !important;
    }

    .hero-badge{
        margin-top:4px !important;
        margin-bottom:28px !important;
    }
}