*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,Arial,sans-serif;
}

body{
    min-height:100vh;
    overflow-x:hidden;
    background:
    radial-gradient(circle at top left,rgba(37,99,235,0.98),#020617 34%),
    linear-gradient(135deg,rgba(22,163,74,0.12),transparent 38%),
    #020617;
    color:white;
}

body.is-loading{
    overflow:hidden;
}

.page-loader{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
    radial-gradient(circle at center,rgba(37,99,235,0.28),transparent 42%),
    #020617;
    transition:opacity 0.65s ease,visibility 0.65s ease;
}

.page-loader.hide{
    opacity:0;
    visibility:hidden;
}

.loader-card{
    width:min(380px,calc(100% - 40px));
    padding:34px;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:28px;
    background:rgba(15,23,42,0.78);
    backdrop-filter:blur(22px);
    text-align:center;
    box-shadow:0 30px 100px rgba(0,0,0,0.48);
    animation:loaderCardIn 0.7s ease both;
}

.loader-brand{
    font-size:34px;
    font-weight:900;
    margin-bottom:18px;
}

.loader-line{
    height:8px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,0.08);
    margin-bottom:16px;
}

.loader-line span{
    display:block;
    height:100%;
    width:42%;
    border-radius:999px;
    background:linear-gradient(90deg,#2563eb,#22c55e,#3b82f6);
    animation:loaderProgress 2.35s ease-in-out forwards;
}

.loader-card p{
    color:#94a3b8;
    font-size:14px;
    font-weight:700;
    animation:loaderText 1.1s ease-in-out infinite;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
    linear-gradient(115deg,transparent 0%,rgba(255,255,255,0.045) 38%,transparent 62%);
    transform:translateX(-120%);
    animation:pageSheen 8s ease-in-out infinite;
    z-index:0;
}

body > *{
    position:relative;
    z-index:1;
}

.ambient-motion{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}

.ambient-motion span{
    position:absolute;
    width:360px;
    height:360px;
    border-radius:50%;
    filter:blur(72px);
    opacity:0.22;
    animation:driftGlow 15s ease-in-out infinite;
}

.ambient-motion span:first-child{
    left:-120px;
    top:18%;
    background:#2563eb;
}

.ambient-motion span:nth-child(2){
    right:-140px;
    top:12%;
    background:#22c55e;
    animation-delay:-5s;
}

.ambient-motion span:nth-child(3){
    left:36%;
    bottom:-180px;
    background:#38bdf8;
    animation-delay:-9s;
}

a{
    color:inherit;
    text-decoration:none;
}

.site-header,
.hero,
.category-highlight-section,
.landing-api-section,
.bonus-band,
.feature-band,
.experience,
.workflow,
.final-cta,
footer{
    width:min(1180px,calc(100% - 36px));
    margin-left:auto;
    margin-right:auto;
}

.site-header{
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    opacity:0;
    animation:dropIn 0.55s ease both;
    animation-delay:2.55s;
}

.brand{
    display:flex;
    align-items:center;
    gap:8px;
    width:max-content;
    max-width:100%;
    font-size:30px;
    font-weight:800;
    transition:0.24s;
}

.brand:hover{
    transform:translateY(-2px);
}

.brand-logo{
    width:190px;
    max-height:58px;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 14px 28px rgba(37,99,235,0.22));
}

.brand-logo-loader{
    width:86px;
    height:86px;
    margin:0 auto 16px;
    object-fit:contain;
    animation:loaderLogo 1.6s ease-in-out infinite;
}

.nav-actions,
.hero-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.nav-link{
    color:#cbd5e1;
    font-weight:700;
    padding:12px 14px;
    transition:0.2s;
}

.nav-link:hover{
    color:white;
}

.nav-button,
.primary-action,
.secondary-action,
.bonus-band a,
.final-cta a{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    font-weight:800;
    transition:0.2s;
}

.nav-button,
.primary-action,
.final-cta a{
    background:linear-gradient(135deg,#2563eb,#3b82f6);
    color:white;
    box-shadow:0 14px 36px rgba(37,99,235,0.28);
    position:relative;
    overflow:hidden;
}

.nav-button::after,
.primary-action::after,
.final-cta a::after,
.bonus-band a::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.24),transparent);
    transform:translateX(-120%);
    animation:buttonShine 3.6s ease-in-out infinite;
}

.nav-button{
    padding:0 18px;
}

.primary-action,
.secondary-action,
.bonus-band a,
.final-cta a{
    padding:0 24px;
}

.secondary-action{
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.06);
    color:#e2e8f0;
}

.nav-button:hover,
.primary-action:hover,
.secondary-action:hover,
.bonus-band a:hover,
.final-cta a:hover{
    transform:translateY(-2px);
}

.primary-action:hover,
.nav-button:hover,
.final-cta a:hover{
    box-shadow:0 18px 46px rgba(37,99,235,0.38);
}

.hero{
    min-height:calc(100vh - 82px);
    display:grid;
    grid-template-columns:minmax(0,0.92fr) minmax(360px,0.78fr);
    align-items:center;
    gap:clamp(34px,5vw,72px);
    padding:48px 0 72px;
}

.hero-copy{
    opacity:0;
    animation:slideUp 0.72s ease both;
    animation-delay:2.68s;
}

.eyebrow,
.bonus-pill,
.section-label{
    display:inline-flex;
    width:max-content;
    max-width:100%;
    padding:9px 14px;
    border:1px solid rgba(34,197,94,0.3);
    border-radius:999px;
    background:rgba(22,163,74,0.14);
    color:#bbf7d0;
    font-size:13px;
    font-weight:900;
}

.eyebrow{
    position:relative;
    overflow:hidden;
}

.eyebrow::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);
    transform:translateX(-120%);
    animation:badgeSweep 3s ease-in-out infinite;
}

.eyebrow{
    margin-bottom:22px;
}

.hero h1{
    max-width:820px;
    font-size:clamp(50px,6.7vw,90px);
    line-height:1;
    letter-spacing:0;
    margin-bottom:24px;
}

.hero p{
    max-width:690px;
    color:#cbd5e1;
    font-size:19px;
    line-height:1.72;
    margin-bottom:34px;
}

.trust-strip{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
}

.trust-strip span{
    padding:10px 13px;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    background:rgba(255,255,255,0.05);
    color:#cbd5e1;
    font-size:13px;
    font-weight:700;
    animation:softPop 0.6s ease both;
    animation-delay:2.95s;
}

.trust-strip span:nth-child(2){
    animation-delay:3.07s;
}

.trust-strip span:nth-child(3){
    animation-delay:3.19s;
}

.console-preview{
    min-width:0;
    width:100%;
    max-width:560px;
    justify-self:end;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:28px;
    background:
    linear-gradient(180deg,rgba(15,23,42,0.86),rgba(15,23,42,0.62));
    box-shadow:0 28px 90px rgba(0,0,0,0.42);
    backdrop-filter:blur(18px);
    overflow:hidden;
    opacity:0;
    animation:
    consoleEnter 0.9s ease both 2.82s,
    floatPreview 5.8s ease-in-out infinite 3.8s;
    transform-style:preserve-3d;
}

.console-preview:hover{
    animation-play-state:paused;
    transform:translateY(-8px) rotateX(1.5deg) rotateY(-1.5deg);
}

.preview-topbar{
    height:54px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 20px;
    border-bottom:1px solid rgba(255,255,255,0.07);
}

.preview-topbar span{
    width:11px;
    height:11px;
    border-radius:50%;
    background:#475569;
}

.preview-topbar span:first-child{
    background:#ef4444;
    animation:dotBlink 2.6s ease-in-out infinite;
}

.preview-topbar span:nth-child(2){
    background:#f59e0b;
    animation:dotBlink 2.6s ease-in-out infinite;
    animation-delay:0.22s;
}

.preview-topbar span:nth-child(3){
    background:#22c55e;
    animation:dotBlink 2.6s ease-in-out infinite;
    animation-delay:0.44s;
}

.preview-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    padding:22px;
}

.preview-grid::before{
    content:"";
    position:absolute;
}

.preview-card,
.preview-result{
    border:1px solid rgba(255,255,255,0.07);
    border-radius:18px;
    background:rgba(255,255,255,0.045);
    padding:18px;
    transition:0.24s;
}

.preview-card:hover,
.preview-result:hover{
    transform:translateY(-4px);
    border-color:rgba(96,165,250,0.32);
    background:rgba(255,255,255,0.065);
}

.animated-card{
    animation:
    pulseCard 2.8s ease-in-out infinite,
    microTilt 4.2s ease-in-out infinite;
}

.delay-one{
    animation-delay:0.55s;
}

.preview-card span,
.preview-result span{
    display:block;
    color:#94a3b8;
    font-size:13px;
    margin-bottom:9px;
}

.preview-card strong{
    display:block;
    font-size:30px;
    margin-bottom:7px;
    animation:numberRise 0.85s ease both;
}

.balance-card strong::after{
    content:" coins";
    color:#94a3b8;
    font-size:14px;
    font-weight:700;
    margin-left:5px;
}

.preview-card small{
    color:#cbd5e1;
}

.balance-card strong{
    color:#22c55e;
}

.wide-card,
.preview-result{
    grid-column:1 / -1;
}

.endpoint-row{
    min-height:50px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 14px;
    border-radius:14px;
    background:rgba(2,6,23,0.52);
    position:relative;
    overflow:hidden;
}

.endpoint-row::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);
    transform:translateX(-100%);
    animation:scanLine 3.4s ease-in-out infinite;
}

.endpoint-row b{
    color:#93c5fd;
    font-size:12px;
}

.endpoint-row code{
    color:#e2e8f0;
    overflow-wrap:anywhere;
}

.preview-result{
    display:grid;
    gap:12px;
}

.preview-result div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.result-line{
    animation:slideResult 2.8s ease-in-out infinite;
}

.delay-two{
    animation-delay:0.3s;
}

.delay-three{
    animation-delay:0.6s;
}

.preview-result div:last-child{
    padding-bottom:0;
    border-bottom:none;
}

.preview-result strong{
    color:#f8fafc;
    text-align:right;
    line-height:1.35;
}

.bonus-band,
.category-highlight-section,
.landing-api-section,
.feature-band,
.experience,
.workflow,
.final-cta{
    margin-bottom:36px;
}

.category-highlight-section{
    padding:28px;
    border:1px solid rgba(96,165,250,0.16);
    border-radius:28px;
    background:
    linear-gradient(135deg,rgba(37,99,235,0.18),rgba(20,184,166,0.08)),
    rgba(15,23,42,0.56);
    box-shadow:0 24px 80px rgba(0,0,0,0.24);
    backdrop-filter:blur(18px);
    opacity:0;
    animation:sectionRise 0.75s ease both;
    animation-delay:2.95s;
}

.category-highlight-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.category-highlight-header h2{
    margin-top:14px;
    font-size:clamp(30px,4vw,46px);
    line-height:1.05;
}

.category-highlight-header p{
    max-width:690px;
    margin-top:10px;
    color:#94a3b8;
    line-height:1.65;
}

.category-highlight-header a{
    min-height:44px;
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 16px;
    border:1px solid rgba(96,165,250,0.24);
    border-radius:14px;
    background:rgba(37,99,235,0.14);
    color:#bfdbfe;
    font-size:14px;
    font-weight:900;
    transition:0.2s;
}

.category-highlight-header a:hover{
    transform:translateY(-2px);
    border-color:rgba(96,165,250,0.42);
    background:rgba(37,99,235,0.22);
}

.category-highlight-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
}

.category-highlight-card{
    min-height:178px;
    padding:18px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:20px;
    background:
    linear-gradient(180deg,rgba(15,23,42,0.82),rgba(15,23,42,0.54));
    color:white;
    text-align:left;
    cursor:pointer;
    transition:0.22s;
    opacity:0;
    animation:cardFloatIn 0.6s ease both;
    animation-delay:calc(3.08s + var(--delay,0s));
}

.category-highlight-card:hover{
    transform:translateY(-5px);
    border-color:rgba(34,197,94,0.28);
    background:
    linear-gradient(180deg,rgba(30,64,175,0.44),rgba(15,23,42,0.68));
    box-shadow:0 18px 46px rgba(37,99,235,0.18);
}

.category-highlight-top,
.category-highlight-card strong,
.category-highlight-card small{
    display:block;
}

.category-highlight-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.category-highlight-top span{
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(96,165,250,0.24);
    border-radius:14px;
    background:rgba(37,99,235,0.16);
    color:#bfdbfe;
}

.category-highlight-top svg{
    width:22px;
    height:22px;
    stroke-width:2.2;
}

.category-highlight-card h3{
    min-height:46px;
    margin-top:16px;
    color:#dbeafe;
    font-size:18px;
    font-weight:900;
    line-height:1.25;
    overflow-wrap:anywhere;
}

.category-highlight-card strong{
    margin-top:16px;
    color:#bbf7d0;
    font-size:38px;
    line-height:1;
}

.category-highlight-card small{
    margin-top:0;
    color:#93c5fd;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.category-highlight-card p{
    margin-top:12px;
    color:#94a3b8;
    font-size:13px;
    line-height:1.45;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.landing-api-section{
    padding:28px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:28px;
    background:
    linear-gradient(
        180deg,
        rgba(15,23,42,0.74),
        rgba(15,23,42,0.54)
    );
    box-shadow:0 24px 80px rgba(0,0,0,0.28);
    backdrop-filter:blur(18px);
    opacity:0;
    animation:sectionRise 0.75s ease both;
    animation-delay:3.02s;
}

.landing-api-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.landing-api-header h2{
    margin-top:14px;
    font-size:clamp(30px,4vw,46px);
    line-height:1.05;
}

.landing-api-header p{
    max-width:650px;
    margin-top:10px;
    color:#94a3b8;
    line-height:1.65;
}

.landing-api-search{
    width:min(360px,100%);
    min-height:50px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 16px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    background:rgba(255,255,255,0.055);
    color:#94a3b8;
}

.landing-api-search svg{
    width:18px;
    height:18px;
}

.landing-api-search input{
    width:100%;
    min-width:0;
    border:none;
    outline:none;
    background:transparent;
    color:white;
    font-size:14px;
    font-weight:700;
}

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

.landing-api-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.landing-api-group{
    display: grid;
    gap: 14px;
}

.landing-api-group-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #dbeafe;
    font-weight: 900;
}

.landing-api-group-header small{
    color: #93c5fd;
    font-size: 12px;
}

.landing-api-drawer{
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.07);
    border-radius:22px;
    background:
    linear-gradient(
        180deg,
        rgba(15,23,42,0.78),
        rgba(15,23,42,0.58)
    );
    transition:0.22s;
}

.landing-api-drawer:hover{
    border-color:rgba(59,130,246,0.24);
    background:
    linear-gradient(
        180deg,
        rgba(15,23,42,0.9),
        rgba(15,23,42,0.66)
    );
}

.landing-api-drawer-header{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px;
    border:none;
    background:transparent;
    color:white;
    text-align:left;
    cursor:pointer;
}

.landing-api-try{
    position:relative;
    flex:0 0 auto;
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin:0;
    padding:0 14px;
    overflow:hidden;
    border:1px solid rgba(147,197,253,0.32);
    border-radius:14px;
    background:linear-gradient(135deg,#2563eb,#3b82f6);
    color:white;
    font-size:12px;
    font-weight:900;
    box-shadow:0 14px 36px rgba(37,99,235,0.32);
    transition:transform 0.2s ease,box-shadow 0.2s ease;
}

.landing-api-try::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent);
    transform:translateX(-120%);
    animation:buttonShine 3.6s ease-in-out infinite;
}

.landing-api-try span{
    position:relative;
    z-index:1;
    font-size:15px;
    transition:transform 0.2s ease;
}

.landing-api-try:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 44px rgba(37,99,235,0.46),0 0 0 3px rgba(59,130,246,0.1);
}

.landing-api-try:hover span{
    transform:translateX(3px);
}

.landing-api-drawer-header strong,
.landing-api-drawer-header small{
    display:block;
}

.landing-api-drawer-header strong{
    font-size:19px;
    line-height:1.25;
}

.landing-api-drawer-header small{
    margin-top:6px;
    color:#94a3b8;
    font-size:13px;
    overflow-wrap:anywhere;
}

.landing-api-meta{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
}

.landing-api-meta b,
.landing-api-meta em{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    border-radius:999px;
    font-size:12px;
    font-style:normal;
    font-weight:900;
}

.landing-api-meta b{
    background:rgba(59,130,246,0.13);
    color:#93c5fd;
}

.landing-api-meta em{
    border:1px solid rgba(34,197,94,0.24);
    background:rgba(34,197,94,0.1);
    color:#bbf7d0;
}

.landing-api-meta .landing-api-views{
    gap:6px;
    border-color:rgba(56,189,248,0.24);
    background:rgba(56,189,248,0.1);
    color:#bae6fd;
}

.landing-api-meta .landing-api-views svg{
    width:14px;
    height:14px;
    stroke-width:2.4;
}

.landing-api-meta .landing-api-arrow{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:rgba(255,255,255,0.06);
    color:#cbd5e1;
    font-style:normal;
    font-weight:900;
}

.landing-api-drawer-body{
    display:none;
    padding:20px;
    border-top:1px solid rgba(255,255,255,0.07);
    background:rgba(2,6,23,0.18);
}

.landing-api-drawer-body.open{
    display:grid;
    gap:16px;
}

.landing-api-drawer-body label{
    display:block;
    margin-bottom:8px;
    color:#e2e8f0;
    font-weight:800;
}

.landing-api-description{
    margin:0;
    padding:14px;
    border:1px solid rgba(56,189,248,0.14);
    border-radius:14px;
    background:linear-gradient(135deg,rgba(37,99,235,0.12),rgba(20,184,166,0.08));
    color:#dbeafe;
    line-height:1.55;
    font-size:14px;
}

.landing-api-drawer-body code,
.landing-api-drawer-body pre{
    display:block;
    width:100%;
    margin:0;
    padding:14px;
    overflow:auto;
    border:1px solid rgba(255,255,255,0.06);
    border-radius:14px;
    background:rgba(2,6,23,0.72);
    color:#cbd5e1;
    font-size:13px;
    line-height:1.55;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.landing-api-drawer-body a{
    width:max-content;
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    border-radius:14px;
    background:linear-gradient(135deg,#2563eb,#3b82f6);
    color:white;
    font-weight:900;
    box-shadow:0 14px 36px rgba(37,99,235,0.24);
}

.landing-api-state{
    padding:28px;
    border:1px dashed rgba(148,163,184,0.24);
    border-radius:22px;
    background:rgba(15,23,42,0.42);
    color:#94a3b8;
    text-align:center;
    font-weight:800;
}

.bonus-band{
    min-height:220px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:32px;
    border:1px solid rgba(34,197,94,0.22);
    border-radius:28px;
    background:
    linear-gradient(135deg,rgba(22,163,74,0.22),rgba(37,99,235,0.14)),
    rgba(15,23,42,0.62);
    box-shadow:0 24px 80px rgba(0,0,0,0.28);
    opacity:0;
    animation:sectionRise 0.75s ease both;
    animation-delay:3.05s;
}

.bonus-pill,
.section-label{
    margin-bottom:14px;
    font-size:12px;
}

.bonus-band h2,
.experience h2,
.final-cta h2{
    font-size:clamp(32px,4.4vw,56px);
    line-height:1.05;
    margin-bottom:14px;
}

.bonus-band p,
.experience-copy p,
.final-cta p{
    max-width:650px;
    color:#cbd5e1;
    font-size:17px;
    line-height:1.65;
}

.bonus-band a{
    min-height:56px;
    flex:0 0 auto;
    background:linear-gradient(135deg,#16a34a,#22c55e);
    color:white;
    box-shadow:0 16px 38px rgba(22,163,74,0.25);
    position:relative;
    overflow:hidden;
    animation:ctaPulse 2.8s ease-in-out infinite;
}

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

.feature-band article,
.workflow,
.experience,
.final-cta{
    border:1px solid rgba(255,255,255,0.07);
    border-radius:24px;
    background:rgba(15,23,42,0.52);
    padding:24px;
}

.feature-band article{
    min-width:0;
    transition:0.22s;
}

.feature-band article:hover{
    transform:translateY(-5px);
    border-color:rgba(59,130,246,0.32);
}

.feature-band article{
    opacity:0;
    animation:sectionRise 0.75s ease both;
    animation-delay:3.12s;
}

.feature-band article:nth-child(2){
    animation-delay:3.24s;
}

.feature-band article:nth-child(3){
    animation-delay:3.36s;
}

.feature-band h2,
.workflow h2{
    font-size:24px;
    margin-bottom:10px;
}

.feature-band p,
.workflow p{
    color:#94a3b8;
    line-height:1.65;
}

.experience{
    min-height:360px;
    display:grid;
    grid-template-columns:0.76fr 1fr;
    gap:30px;
    align-items:center;
    opacity:0;
    animation:sectionRise 0.75s ease both;
    animation-delay:3.22s;
}

.experience-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.experience-grid article{
    min-height:230px;
    padding:20px;
    border:1px solid rgba(255,255,255,0.07);
    border-radius:22px;
    background:rgba(255,255,255,0.045);
    transition:0.22s;
}

.experience-grid article:hover{
    transform:translateY(-5px);
    border-color:rgba(59,130,246,0.3);
}

.experience-grid article{
    opacity:0;
    animation:cardFloatIn 0.7s ease both;
    animation-delay:3.35s;
}

.experience-grid article:nth-child(2){
    animation-delay:3.49s;
}

.experience-grid article:nth-child(3){
    animation-delay:3.63s;
}

.experience-grid span{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    border-radius:15px;
    background:rgba(37,99,235,0.2);
    color:#bfdbfe;
    font-weight:900;
}

.experience-grid h3{
    font-size:21px;
    margin-bottom:10px;
}

.experience-grid p{
    color:#94a3b8;
    line-height:1.6;
}

.workflow{
    min-height:330px;
    display:grid;
    grid-template-columns:0.85fr 1fr;
    gap:30px;
    align-items:start;
    opacity:0;
    animation:sectionRise 0.75s ease both;
    animation-delay:3.32s;
}

.workflow-list{
    display:grid;
    gap:14px;
}

.workflow-list div{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px;
    border:1px solid rgba(255,255,255,0.07);
    border-radius:18px;
    background:rgba(255,255,255,0.04);
    transition:0.22s;
}

.workflow-list div:hover{
    transform:translateX(6px);
    border-color:rgba(34,197,94,0.24);
    background:rgba(255,255,255,0.06);
}

.workflow-list span{
    width:42px;
    height:42px;
    flex:0 0 auto;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(37,99,235,0.2);
    color:#bfdbfe;
    font-weight:900;
    position:relative;
}

.workflow-list span::after{
    content:"";
    position:absolute;
    inset:-5px;
    border:1px solid rgba(96,165,250,0.22);
    border-radius:18px;
    animation:ringPulse 2.4s ease-in-out infinite;
}

.final-cta{
    min-height:280px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    background:
    linear-gradient(135deg,rgba(37,99,235,0.18),rgba(22,163,74,0.1)),
    rgba(15,23,42,0.58);
    opacity:0;
    animation:sectionRise 0.75s ease both;
    animation-delay:3.42s;
}

.final-cta a{
    min-height:56px;
    flex:0 0 auto;
}

.not-found-page{
    width:min(1180px,calc(100% - 36px));
    margin-left:auto;
    margin-right:auto;
    min-height:calc(100vh - 154px);
    display:grid;
    grid-template-columns:minmax(0,0.9fr) minmax(300px,0.78fr);
    align-items:center;
    gap:32px;
    padding:34px 0;
    overflow:hidden;
}

.not-found-copy{
    min-width:0;
    max-width:660px;
}

.not-found-copy h2{
    font-size:clamp(38px,5.4vw,68px);
    line-height:1;
    margin-bottom:18px;
    max-width:640px;
}

.not-found-copy p{
    max-width:620px;
    color:#cbd5e1;
    font-size:18px;
    line-height:1.7;
    margin-bottom:30px;
}

.not-found-scene{
    width:100%;
    min-height:360px;
    max-height:460px;
    aspect-ratio:1.1;
    position:relative;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:32px;
    background:
    radial-gradient(circle at 50% 42%,rgba(37,99,235,0.28),transparent 42%),
    rgba(15,23,42,0.56);
    box-shadow:0 28px 90px rgba(0,0,0,0.38);
    overflow:hidden;
}

.lost-character{
    position:absolute;
    left:50%;
    top:50%;
    width:138px;
    height:178px;
    transform:translate(-50%,-50%);
    animation:characterFloat 3.4s ease-in-out infinite;
}

.character-head{
    width:104px;
    height:80px;
    margin:0 auto;
    border:2px solid rgba(191,219,254,0.7);
    border-radius:30px;
    background:
    linear-gradient(180deg,rgba(37,99,235,0.92),rgba(15,23,42,0.95));
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    box-shadow:0 18px 44px rgba(37,99,235,0.28);
}

.character-head span{
    width:13px;
    height:13px;
    border-radius:50%;
    background:#bbf7d0;
    box-shadow:0 0 18px rgba(34,197,94,0.9);
    animation:characterBlink 3s ease-in-out infinite;
}

.character-head span:nth-child(2){
    animation-delay:0.08s;
}

.character-body{
    width:82px;
    height:82px;
    margin:-5px auto 0;
    border-radius:26px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.1);
    display:flex;
    align-items:center;
    justify-content:center;
}

.signal{
    width:42px;
    height:42px;
    border-radius:14px;
    background:linear-gradient(135deg,#2563eb,#22c55e);
    position:relative;
    animation:signalSpin 4s linear infinite;
}

.signal::before,
.signal::after{
    content:"";
    position:absolute;
    inset:-10px;
    border:1px solid rgba(96,165,250,0.3);
    border-radius:18px;
    animation:signalPulse 2s ease-in-out infinite;
}

.signal::after{
    animation-delay:0.45s;
}

.character-shadow{
    width:98px;
    height:18px;
    margin:12px auto 0;
    border-radius:50%;
    background:rgba(0,0,0,0.28);
    filter:blur(4px);
    animation:shadowPulse 3.4s ease-in-out infinite;
}

.orbit{
    position:absolute;
    width:76px;
    height:40px;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.06);
    color:#bfdbfe;
    font-size:13px;
    font-weight:900;
    box-shadow:0 16px 40px rgba(0,0,0,0.18);
}

.orbit-one{
    left:10%;
    top:16%;
    animation:orbitOne 7s ease-in-out infinite;
}

.orbit-two{
    right:10%;
    top:22%;
    animation:orbitTwo 8s ease-in-out infinite;
}

.orbit-three{
    left:13%;
    bottom:18%;
    color:#fecaca;
    animation:orbitThree 7.4s ease-in-out infinite;
}

.path-line{
    position:absolute;
    left:12%;
    right:12%;
    bottom:22%;
    height:2px;
    background:linear-gradient(90deg,transparent,rgba(96,165,250,0.5),transparent);
    opacity:0.55;
    animation:pathScan 3s ease-in-out infinite;
}

@keyframes characterFloat{
    0%,100%{
        transform:translate(-50%,-50%) translateY(0) rotate(-1deg);
    }
    50%{
        transform:translate(-50%,-50%) translateY(-18px) rotate(1deg);
    }
}

@keyframes characterBlink{
    0%,88%,100%{
        transform:scaleY(1);
    }
    92%{
        transform:scaleY(0.12);
    }
}

@keyframes signalSpin{
    to{
        transform:rotate(360deg);
    }
}

@keyframes signalPulse{
    0%,100%{
        opacity:0;
        transform:scale(0.84);
    }
    50%{
        opacity:1;
        transform:scale(1.12);
    }
}

@keyframes shadowPulse{
    0%,100%{
        transform:scale(1);
        opacity:0.38;
    }
    50%{
        transform:scale(0.78);
        opacity:0.22;
    }
}

@keyframes orbitOne{
    0%,100%{
        transform:translate(0,0) rotate(-4deg);
    }
    50%{
        transform:translate(28px,20px) rotate(5deg);
    }
}

@keyframes orbitTwo{
    0%,100%{
        transform:translate(0,0) rotate(5deg);
    }
    50%{
        transform:translate(-24px,28px) rotate(-6deg);
    }
}

@keyframes orbitThree{
    0%,100%{
        transform:translate(0,0) rotate(3deg);
    }
    50%{
        transform:translate(34px,-20px) rotate(-5deg);
    }
}

@keyframes pathScan{
    0%,100%{
        opacity:0.25;
        transform:scaleX(0.72);
    }
    50%{
        opacity:0.75;
        transform:scaleX(1);
    }
}

footer{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    color:#64748b;
    font-size:14px;
}

.footer-links{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    flex-wrap:wrap;
}

.footer-links a{
    color:#94a3b8;
    font-weight:800;
    transition:0.2s;
}

.footer-links a:hover{
    color:#e2e8f0;
}

.legal-page{
    width:min(960px,calc(100% - 36px));
    margin:0 auto;
    padding:54px 0 72px;
}

.legal-hero{
    margin-bottom:24px;
    padding:34px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:28px;
    background:
    linear-gradient(135deg,rgba(37,99,235,0.24),rgba(15,23,42,0.62)),
    rgba(15,23,42,0.56);
    box-shadow:0 24px 80px rgba(0,0,0,0.28);
}

.legal-hero h1{
    margin-top:14px;
    font-size:clamp(38px,5.5vw,68px);
    line-height:1;
}

.legal-hero p{
    max-width:760px;
    margin-top:16px;
    color:#cbd5e1;
    font-size:18px;
    line-height:1.65;
}

.legal-content{
    display:grid;
    gap:16px;
}

.legal-card{
    padding:24px;
    border:1px solid rgba(255,255,255,0.07);
    border-radius:22px;
    background:rgba(15,23,42,0.58);
}

.legal-card h2{
    margin-bottom:12px;
    font-size:24px;
}

.legal-card p,
.legal-card li{
    color:#cbd5e1;
    line-height:1.7;
}

.legal-card ul{
    padding-left:20px;
}

.legal-card strong{
    color:#ffffff;
}

.no-refund-box{
    border-color:rgba(248,113,113,0.28);
    background:
    linear-gradient(135deg,rgba(239,68,68,0.16),rgba(15,23,42,0.72));
}

@keyframes dropIn{
    from{
        opacity:0;
        transform:translateY(-12px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes loaderCardIn{
    from{
        opacity:0;
        transform:translateY(18px) scale(0.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes loaderLogo{
    0%,100%{
        transform:scale(1) rotate(0deg);
        filter:drop-shadow(0 0 0 rgba(59,130,246,0));
    }
    50%{
        transform:scale(1.08) rotate(3deg);
        filter:drop-shadow(0 18px 28px rgba(59,130,246,0.28));
    }
}

@keyframes loaderProgress{
    0%{
        width:0;
        transform:translateX(0);
    }
    65%{
        width:72%;
        transform:translateX(8%);
    }
    100%{
        width:100%;
        transform:translateX(0);
    }
}

@keyframes loaderText{
    0%,100%{
        opacity:0.62;
    }
    50%{
        opacity:1;
    }
}

@keyframes slideUp{
    from{
        opacity:0;
        transform:translateY(18px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

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

@keyframes consoleEnter{
    from{
        opacity:0;
        transform:translateY(28px) scale(0.96) rotateX(4deg);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1) rotateX(0);
    }
}

@keyframes pulseCard{
    0%,100%{
        border-color:rgba(255,255,255,0.07);
        box-shadow:none;
    }
    50%{
        border-color:rgba(34,197,94,0.34);
        box-shadow:0 0 0 4px rgba(34,197,94,0.05);
    }
}

@keyframes scanLine{
    0%,35%{
        transform:translateX(-100%);
    }
    65%,100%{
        transform:translateX(100%);
    }
}

@keyframes badgeSweep{
    0%,40%{
        transform:translateX(-120%);
    }
    65%,100%{
        transform:translateX(120%);
    }
}

@keyframes pageSheen{
    0%,42%{
        transform:translateX(-120%);
    }
    58%,100%{
        transform:translateX(120%);
    }
}

@keyframes driftGlow{
    0%,100%{
        transform:translate3d(0,0,0) scale(1);
    }
    35%{
        transform:translate3d(48px,-34px,0) scale(1.12);
    }
    70%{
        transform:translate3d(-34px,42px,0) scale(0.92);
    }
}

@keyframes buttonShine{
    0%,38%{
        transform:translateX(-120%);
    }
    58%,100%{
        transform:translateX(120%);
    }
}

@keyframes softPop{
    from{
        opacity:0;
        transform:translateY(8px) scale(0.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes dotBlink{
    0%,100%{
        opacity:0.55;
        transform:scale(1);
    }
    50%{
        opacity:1;
        transform:scale(1.18);
    }
}

@keyframes numberRise{
    from{
        opacity:0;
        transform:translateY(12px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes slideResult{
    0%,100%{
        transform:translateX(0);
        background:transparent;
    }
    50%{
        transform:translateX(4px);
        background:rgba(37,99,235,0.06);
    }
}

@keyframes sectionRise{
    from{
        opacity:0;
        transform:translateY(22px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes cardFloatIn{
    from{
        opacity:0;
        transform:translateY(18px) scale(0.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes microTilt{
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }
    50%{
        transform:translateY(-3px) rotate(-0.5deg);
    }
}

@keyframes ringPulse{
    0%,100%{
        opacity:0;
        transform:scale(0.92);
    }
    50%{
        opacity:1;
        transform:scale(1.08);
    }
}

@keyframes ctaPulse{
    0%,100%{
        box-shadow:0 16px 38px rgba(22,163,74,0.25);
    }
    50%{
        box-shadow:0 18px 54px rgba(34,197,94,0.42);
    }
}

@media (max-width:920px){
    .hero,
    .workflow,
    .experience,
    .not-found-page{
        grid-template-columns:1fr;
    }

    .hero{
        min-height:auto;
        padding-top:42px;
        gap:28px;
    }

    .feature-band,
    .experience-grid{
        grid-template-columns:1fr;
    }

    .landing-api-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .category-highlight-header{
        align-items:center;
        flex-direction:column;
        text-align:center;
    }

    .category-highlight-header .section-label{
        margin-left:auto;
        margin-right:auto;
    }

    .category-highlight-header p{
        margin-left:auto;
        margin-right:auto;
    }

    .category-highlight-grid{
        grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
    }

    .category-highlight-card{
        text-align:center;
    }

    .category-highlight-top{
        justify-content:center;
        flex-direction:column;
    }

    .category-highlight-card h3{
        min-height:auto;
    }

    .landing-api-search{
        width:100%;
    }

    .bonus-band,
    .final-cta{
        align-items:flex-start;
        flex-direction:column;
    }

    .console-preview{
        width:100%;
        animation:none;
    }

    .not-found-scene{
        min-height:320px;
        max-height:none;
        aspect-ratio:1.4;
        order:-1;
    }
}

@media (max-width:620px){
    .site-header,
    .hero,
    .category-highlight-section,
    .landing-api-section,
    .bonus-band,
    .feature-band,
    .experience,
    .workflow,
    .final-cta,
    footer{
        width:min(100% - 28px,1180px);
    }

    .site-header{
        min-height:auto;
        padding:16px 0;
        align-items:flex-start;
        flex-direction:column;
    }

    .brand{
        font-size:28px;
    }

    .nav-actions,
    .hero-actions{
        width:100%;
    }

    .nav-link,
    .nav-button,
    .primary-action,
    .secondary-action{
        flex:1;
    }

    .hero h1{
        font-size:clamp(42px,15vw,52px);
        line-height:1;
    }

    .hero p{
        font-size:16px;
        line-height:1.62;
    }

    .eyebrow{
        width:100%;
        border-radius:16px;
        line-height:1.35;
    }

    .console-preview,
    .category-highlight-section,
    .landing-api-section,
    .not-found-scene,
    .bonus-band,
    .feature-band article,
    .experience,
    .workflow,
    .final-cta{
        border-radius:22px;
    }

    .bonus-band,
    .category-highlight-section,
    .landing-api-section,
    .experience,
    .workflow,
    .final-cta{
        padding:20px;
    }

    .landing-api-drawer-header{
        align-items:flex-start;
        flex-direction:column;
        padding:18px;
    }

    .landing-api-try{
        width:auto;
        margin:0;
    }

    .landing-api-meta{
        width:100%;
        flex-wrap:wrap;
    }

    .landing-api-meta .landing-api-arrow{
        margin-left:auto;
    }

    .landing-api-drawer-body{
        padding:18px;
    }

    .landing-api-drawer-body a{
        width:100%;
    }

    .preview-grid{
        grid-template-columns:1fr;
        padding:16px;
        gap:12px;
    }

    .preview-card,
    .preview-result{
        border-radius:16px;
        padding:16px;
    }

    .preview-result div{
        align-items:flex-start;
        flex-direction:column;
    }

    .preview-result strong{
        text-align:left;
    }

    .not-found-copy p{
        font-size:16px;
    }

    .not-found-page{
        width:min(100% - 28px,1180px);
        min-height:auto;
        padding:24px 0 34px;
        gap:24px;
    }

    .not-found-copy .hero-actions{
        width:100%;
    }

    footer{
        gap:12px;
        align-items:flex-start;
        flex-direction:column;
        padding:20px 0;
    }
}

@media (max-width:420px){
    .brand{
        font-size:24px;
    }

    .brand .brand-logo{
        width:166px;
        max-height:52px;
    }

    .hero-actions,
    .nav-actions{
        flex-direction:column;
    }

    .hero h1{
        font-size:40px;
    }

    .preview-card strong{
        font-size:26px;
    }

    .workflow-list div{
        align-items:flex-start;
    }

    .bonus-band a,
    .final-cta a{
        width:100%;
    }

    .not-found-scene{
        min-height:270px;
        aspect-ratio:1.12;
        border-radius:22px;
    }

    .lost-character{
        width:120px;
        height:150px;
    }

    .orbit{
        width:62px;
        height:34px;
        font-size:12px;
    }

    .orbit-one{
        left:8%;
        top:14%;
    }

    .orbit-two{
        right:7%;
        top:18%;
    }

    .orbit-three{
        left:9%;
        bottom:16%;
    }
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }
}