:root{
    --navy:#171c3a;
    --navy2:#1d2350;
    --line:#2c3266;
    --comment:#6b7099;
    --purple:#c792ea;
    --green:#7ee787;
    --blue:#82aaff;
    --orange:#f78c6c;
    --string:#addb67;
    --white:#f5f6fa;
    --pink:#ff6b9d;
}
/*
*{box-sizing:border-box;}
body{
    margin:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
            radial-gradient(circle, #d7d9e2 1px, transparent 1px) 0 0/22px 22px,
            #eceef3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    padding:80px 20px;
}*/

.hero-mockup .stage{
    position:relative;
    /*width:700px;*/
    max-width:100%;
}

/* ---- code card ---- */
.hero-mockup .card{
    background:#2a3053;
    border-radius:22px;
    box-shadow:0 30px 60px -20px rgba(23,28,58,.45), 0 10px 25px -10px rgba(23,28,58,.3);
    padding-bottom:34px;
}
.hero-mockup .titlebar{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    padding:20px 24px 16px;
    background: rgba(255,255,255,.03);
    border-color: rgb(255 255 255/.06);
    border-bottom-width:1px;
}
.hero-mockup .titlebar .filename{
    display:flex;
    align-items:center;
    gap:8px;
    color:#aeb3d6;
    font-size:14px;
    font-family: "SFMono-Regular", Consolas, Menlo, monospace;
}
.hero-mockup .titlebar .filename svg{width:14px;height:14px;opacity:.8;}
.hero-mockup .dots{
    position:absolute;
    right:22px;
    top:22px;
    display:flex;
    gap:7px;
}
.hero-mockup .dots span{width:11px;height:11px;border-radius:50%;display:block;}
.hero-mockup .dots span:nth-child(1){background:#2ecc71;}
.hero-mockup .dots span:nth-child(2){background:#f5a623;}
.hero-mockup .dots span:nth-child(3){background:#f0544c;}

.hero-mockup .live{
    position:absolute;
    left:24px;
    top:22px;
    display:flex;
    align-items:center;
    gap:6px;
    color:#3ddc84;
    font-size:13px;
    font-weight:600;
}
.hero-mockup .live .dot{
    width:7px;height:7px;border-radius:50%;
    background:#3ddc84;
    box-shadow:0 0 0 0 rgba(61,220,132,.6);
    animation:pulse 1.8s infinite;
}
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(61,220,132,.55);}
    70%{box-shadow:0 0 0 8px rgba(61,220,132,0);}
    100%{box-shadow:0 0 0 0 rgba(61,220,132,0);}
}

.hero-mockup .code{
    font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size:15px;
    line-height:2.15;
}
.hero-mockup .code .line{
    display:block;
    direction: ltr;
    text-align: left;
    padding-left: 1.5rem;
}
.hero-mockup .comment{color:var(--comment);}
.hero-mockup .kw{color:var(--purple); font-weight:600;}
.hero-mockup .id{color:var(--green);}
.hero-mockup .fn{color:var(--blue); font-weight:600;}
.hero-mockup .str{color:var(--string);}
.hero-mockup .plain{color:var(--white);}
.hero-mockup .tag{color:#7fd4ff;}
.hero-mockup .attr{color:var(--white);}
.hero-mockup .pink{color:var(--pink); font-weight:600;}
.hero-mockup .caret{
    display:inline-block;width:2px;height:16px;background:var(--white);
    vertical-align:-3px;
    animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0;}}

/* ---- floating badges ---- */
.hero-mockup .badge{
    position:absolute;
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 16px;
    border-radius:999px;
    font-size:12px;
    /*font-weight:700;*/
    white-space:nowrap;
    box-shadow:0 10px 20px -6px rgba(23,28,58,.28);
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.hero-mockup .badge svg{display:block;flex-shrink:0;}

.hero-mockup .b-green{ background:#025740d9; color:#fff; top:-26px; left:20px; animation:float-a 4.2s ease-in-out infinite; }
.hero-mockup .b-white{ background:#ffffffb0; color:#141414; top:-28px; right:0px; animation:float-b 4.8s ease-in-out infinite; animation-delay:-.6s; }
.hero-mockup .b-black{ background:#0a0a0ac4; color:#fff; top:150px; left:-58px; animation:float-a 5.4s ease-in-out infinite; animation-delay:-1.4s; }
.hero-mockup .b-blue{ background:#2f78c4db; color:#fff; top:190px; right:-46px; animation:float-b 4.6s ease-in-out infinite; animation-delay:-2s; }
.hero-mockup .b-dblue{ background:#0f043b99; color:#fff; bottom:-22px; left:14px; animation:float-a 5s ease-in-out infinite; animation-delay:-.9s; }
.hero-mockup .b-red{ background:#b20038bf; color:#fff; bottom:-30px; left:50%; --tx:-50%; animation:float-c 4.4s ease-in-out infinite; animation-delay:-1.8s; }
.hero-mockup .b-lblue{ background:#0ea5c8c7; color:#fff; bottom:-22px; right:6px; animation:float-b 5.2s ease-in-out infinite; animation-delay:-2.6s; }

@keyframes float-a{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
}
@keyframes float-b{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(10px); }
}
@keyframes float-c{
    0%,100%{ transform:translateX(var(--tx)) translateY(0); }
    50%{ transform:translateX(var(--tx)) translateY(-9px); }
}

@media (prefers-reduced-motion: reduce){
    .hero-mockup .badge{ animation:none !important; }
}

@media (max-width: 720px){.hero-mockup .stage{transform:scale(.62); }}
@media (max-width: 640px){.hero-mockup .stage{transform:scale(.62); }}
@media (max-width: 1024px) { .hero-mockup{padding: 0px !important;} .hero-mockup .stage{transform:scale(.62);  }}
@media (max-height: 500px) and (orientation: landscape) {.hero-mockup .stage{transform:scale(.62); }}