/* ndize.al — homepage sections after the hero: fire tape + product bento. */

/* =====================================================================
   FIRE TAPE — two crossing marquee bands from the night into the day
   ===================================================================== */
.nd-tape {
    position: relative; z-index: 2;
    height: 150px;
    overflow: hidden;
    background: linear-gradient(to bottom, #07111b 0 50%, var(--nd-surface) 50% 100%);
}
.nd-tape__band {
    position: absolute; left: -5%; right: -5%; top: 50%;
    display: flex; align-items: center;
    height: 62px; margin-top: -31px;
    overflow: hidden;
}
.nd-tape__band--back {
    transform: rotate(2.4deg);
    background: #0a6aa8; color: #ffffff;
    box-shadow: 0 10px 30px -14px rgba(4,18,31,.6);
}
.nd-tape__band--front {
    transform: rotate(-2.4deg);
    background: #ffc21a; color: #1a1405;
    box-shadow: 0 18px 40px -16px rgba(217,96,12,.75), inset 0 -3px 0 rgba(217,96,12,.35);
}
.nd-tape__track { display: flex; width: max-content; animation: nd-marquee 46s linear infinite; }
.nd-tape__band--back .nd-tape__track { animation-duration: 60s; animation-direction: reverse; }
.nd-tape:hover .nd-tape__track { animation-play-state: paused; }
@keyframes nd-marquee { to { transform: translateX(-50%); } }

.nd-tape__run { display: flex; align-items: center; flex: none; list-style: none; margin: 0; padding: 0; }
.nd-tape__item {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 0 22px; white-space: nowrap;
    font: 700 21px/1 var(--nd-font-display); letter-spacing: -0.01em;
}
.nd-tape__item svg { width: 22px; height: 22px; flex: none; }
.nd-tape__band--back .nd-tape__item { font: 500 15px/1 var(--nd-font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .9; padding: 0 16px; }
.nd-tape__dot { display: inline-flex; align-items: center; color: #d9600c; font-size: 14px; }
.nd-tape__band--back .nd-tape__dot { color: #ffc21a; }
.nd-tape__sep { width: 20px; height: 20px; }

@media (max-width: 640px) {
    .nd-tape { height: 120px; }
    .nd-tape__band { height: 50px; margin-top: -25px; }
    .nd-tape__item { font-size: 17px; padding: 0 16px; }
    .nd-tape__item svg { width: 18px; height: 18px; }
}

/* =====================================================================
   PRODUCT BENTO
   ===================================================================== */
.nd-bento-sec { padding: 72px 0 96px; }
.nd-bento-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.nd-page .nd-bento-all {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; text-decoration: none; color: var(--nd-cloud-strong);
}
.nd-bento-all svg { width: 18px; height: 18px; transition: transform .2s; }
.nd-bento-all:hover svg { transform: translateX(4px); }

.nd-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(230px, auto);
    grid-template-areas:
        "host host vps   dom"
        "host host vps   radio"
        "mail mail mail  irc";
    gap: 20px;
}
.nd-tile--host  { grid-area: host; }
.nd-tile--vps   { grid-area: vps; }
.nd-tile--dom   { grid-area: dom; }
.nd-tile--radio { grid-area: radio; }
.nd-tile--mail  { grid-area: mail; }
.nd-tile--irc   { grid-area: irc; }

/* ---------- tile ---------- */
.nd-page .nd-tile {
    --mx: 50%; --my: 50%;
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; gap: 10px;
    padding: 26px;
    border-radius: 24px;
    background: var(--nd-surface-raised);
    border: 1px solid var(--nd-line);
    color: var(--nd-ink); text-decoration: none;
    transition: transform .35s cubic-bezier(.2,.9,.2,1), border-color .25s, box-shadow .35s;
}
/* fire spotlight following the pointer */
.nd-tile::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,194,26,.22), transparent 60%);
    opacity: 0; transition: opacity .3s;
}
.nd-page .nd-tile:hover {
    color: var(--nd-ink);
    transform: translateY(-4px);
    border-color: rgba(255,194,26,.7);
    box-shadow: 0 30px 60px -30px rgba(14,34,51,.35);
}
.nd-tile:hover::before { opacity: 1; }
.nd-tile:focus-visible { outline: 3px solid var(--nd-cloud-strong); outline-offset: 3px; }

.nd-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.nd-tile__icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nd-cloud-soft); color: var(--nd-cloud-strong);
    transition: background-color .25s, color .25s, transform .4s cubic-bezier(.3,1.6,.5,1), box-shadow .25s;
}
.nd-tile__icon svg { width: 24px; height: 24px; }
.nd-tile:hover .nd-tile__icon {
    background: #ffc21a; color: #1a1405; transform: rotate(-12deg) scale(1.06);
    box-shadow: 0 0 0 5px rgba(255,194,26,.22), 0 8px 20px -6px rgba(217,96,12,.6);
}
.nd-tile__title { font: 700 24px/1.15 var(--nd-font-display); letter-spacing: -0.015em; }
.nd-tile__desc { font-size: 15px; line-height: 22px; color: var(--nd-ink-muted); max-width: 46ch; }
.nd-tile__foot {
    margin-top: auto; padding-top: 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 14px; color: var(--nd-ink-muted);
}
.nd-tile__price b { font: 700 18px var(--nd-font-mono); color: var(--nd-ember); margin: 0 2px; }
.nd-tile__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--nd-cloud-strong); }
.nd-tile__go svg { width: 18px; height: 18px; transition: transform .2s; }
.nd-tile:hover .nd-tile__go svg { transform: translateX(4px); }
.nd-tile__tag { padding: 5px 12px; border-radius: 999px; background: #ffc21a; color: #1a1405; font: 700 12.5px var(--nd-font-sans); }

/* ---------- night tile (Web Hosting) ---------- */
.nd-page .nd-tile--night {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(10,106,168,.55), transparent 60%),
        radial-gradient(80% 60% at 0% 100%, rgba(217,96,12,.28), transparent 60%),
        #0b1622;
    border-color: #1d3346; color: #e8f1f8;
}
.nd-page .nd-tile--night:hover { color: #e8f1f8; }
.nd-tile--night .nd-tile__icon { background: rgba(124,200,248,.14); color: #7cc8f8; }
.nd-tile--night .nd-tile__title { font-size: clamp(30px, 3vw, 40px); color: #ffffff; }
.nd-tile--night .nd-tile__desc { color: #b8cad8; font-size: 16px; line-height: 24px; }
.nd-tile--night .nd-tile__foot { color: #9fb3c4; }
.nd-tile--night .nd-tile__price b { color: #ffcc3d; }
.nd-tile--night .nd-tile__go {
    padding: 0 20px; height: 48px; border-radius: 999px;
    background: #ffc21a; color: #1a1405;
}

.nd-host { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: center; margin: 14px 0 6px; }
.nd-host__rack { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: rgba(4,12,20,.6); border: 1px solid #1d3346; }
.nd-host__unit { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 10px; background: #0b1622; border: 1px solid #23384a; }
.nd-host__led { width: 8px; height: 8px; border-radius: 50%; background: #4cc38a; box-shadow: 0 0 8px #4cc38a; animation: nd-blink 1.6s steps(2) infinite; }
.nd-host__led--f { background: #ffc21a; box-shadow: 0 0 8px #ffc21a; animation-duration: .9s; }
.nd-host__bars { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-left: 6px; }
.nd-host__bars i { height: 5px; border-radius: 3px; background: #1d3a54; }
.nd-host__bars i:nth-child(-n+3) { background: #38a8f0; }
.nd-host__perks { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: #e8f1f8; }
.nd-host__perks span { display: flex; align-items: center; gap: 10px; }
.nd-host__perks svg { width: 18px; height: 18px; flex: none; padding: 3px; border-radius: 50%; background: rgba(76,195,138,.18); color: #4cc38a; box-sizing: content-box; }

/* ---------- VPS meters ---------- */
.nd-meters { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: var(--nd-surface); border: 1px solid var(--nd-line); }
.nd-meter { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; font: 500 12px var(--nd-font-mono); color: var(--nd-ink-muted); }
.nd-meter__bar { height: 8px; border-radius: 4px; background: var(--nd-cloud-soft); overflow: hidden; }
.nd-meter__bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #38a8f0, #ffc21a); width: 30%; }
.is-inview .nd-meter__bar i { animation: nd-meter 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -0.8s); }
@keyframes nd-meter { 0% { width: 22%; } 40% { width: 64%; } 70% { width: 41%; } 100% { width: 78%; } }
.nd-meters__up { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--nd-font-mono); color: var(--nd-success); }
.nd-meters__up i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: nd-blink 1.2s steps(2) infinite; }

/* ---------- domain ---------- */
.nd-tld-big { margin: 8px 0 0; font: 700 clamp(30px, 2.6vw, 38px)/1 var(--nd-font-display); letter-spacing: -0.03em; color: var(--nd-ink); white-space: nowrap; }
.nd-tld-big span { display: inline-block; color: var(--nd-ember); }
.nd-tld-big span.is-swap { animation: nd-swap .45s cubic-bezier(.2,.9,.2,1); }

/* ---------- radio ---------- */
.nd-onair { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #b42318; color: #ffffff; font: 700 11px var(--nd-font-mono); letter-spacing: .1em; }
.nd-onair::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ffffff; animation: nd-blink 1s steps(2) infinite; }
.nd-mini-eq { display: flex; align-items: flex-end; gap: 4px; height: 52px; margin-top: 6px; }
.nd-mini-eq i { flex: 1; height: 30%; border-radius: 3px 3px 1px 1px; background: linear-gradient(to top, #38a8f0, #ffc21a); }
.is-inview .nd-mini-eq i { animation: nd-eq 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -91ms); }

/* ---------- email ---------- */
.nd-tile__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center; }
.nd-tile__col { display: flex; flex-direction: column; gap: 10px; }
.nd-addr { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 18px; background: #0b1622; color: #e8f1f8; }
.nd-addr__line { font: 500 clamp(18px, 1.8vw, 24px)/1.2 var(--nd-font-mono); white-space: nowrap; overflow: hidden; }
.nd-addr__line b { color: #ffc21a; font-weight: 500; }
.nd-addr__caret { display: inline-block; width: 3px; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: #ffc21a; animation: nd-blink 1s steps(2) infinite; }
.nd-addr__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nd-addr__chips span { padding: 6px 12px; border-radius: 999px; background: rgba(124,200,248,.12); border: 1px solid rgba(124,200,248,.22); color: #bfe3fb; font: 500 12.5px var(--nd-font-mono); }

/* ---------- IRC ---------- */
.nd-chat { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.nd-chat__b {
    align-self: flex-start; max-width: 100%;
    padding: 8px 12px; border-radius: 14px 14px 14px 4px;
    background: var(--nd-cloud-soft); color: var(--nd-ink);
    font: 500 13px var(--nd-font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nd-chat__b b { color: var(--nd-cloud-strong); font-weight: 600; }
.nd-chat__b--me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: #ffc21a; color: #1a1405; }
.is-inview .nd-chat__b { animation: nd-chat 6s ease infinite; animation-delay: calc(var(--i) * .7s); }
@keyframes nd-chat {
    0% { opacity: 0; transform: translateY(8px) scale(.96); }
    8%, 80% { opacity: 1; transform: none; }
    92%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* shared keyframes also used by header-hero.css (defined here too so this file stands alone) */
@keyframes nd-blink { 50% { opacity: .25; } }
@keyframes nd-swap { from { transform: translateY(60%); opacity: 0; filter: blur(4px); } }
@keyframes nd-eq { 0% { height: 12%; } 35% { height: 78%; } 60% { height: 40%; } 100% { height: 92%; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .nd-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "host  host"
            "vps   dom"
            "vps   radio"
            "mail  mail"
            "irc   irc";
    }
}
@media (max-width: 680px) {
    .nd-bento { grid-template-columns: 1fr; grid-template-areas: "host" "vps" "dom" "radio" "mail" "irc"; grid-auto-rows: auto; gap: 16px; }
    .nd-host, .nd-tile__row { grid-template-columns: 1fr; }
    .nd-page .nd-tile { padding: 22px; }
    .nd-bento-sec { padding: 56px 0 72px; }
}

@media (prefers-reduced-motion: reduce) {
    .nd-tape__track, .nd-bento * { animation: none !important; }
    .nd-chat__b { opacity: 1; transform: none; }
    .nd-page .nd-tile, .nd-tile__icon { transition: none; }
}

/* =====================================================================
   PACKAGES — tabs per service, billing switch, heat bars
   ===================================================================== */
.nd-pk { padding: 40px 0 110px; }
.nd-pk__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.nd-pk__hl { color: var(--nd-ember); }
[data-theme="dark"] .nd-pk__hl { color: var(--nd-fire); }

/* billing switch with a sliding fire thumb */
.nd-billing {
    position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
    padding: 5px; border-radius: 999px;
    background: var(--nd-surface-raised); border: 1px solid var(--nd-line-strong);
}
.nd-billing button {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
    font: 600 15px var(--nd-font-sans); color: var(--nd-ink-muted); white-space: nowrap;
    transition: color .25s;
}
.nd-billing button.is-on { color: #1a1405; }
.nd-billing__save { padding: 2px 8px; border-radius: 999px; background: rgba(17,115,74,.12); color: var(--nd-success); font-size: 12.5px; font-weight: 700; }
.nd-billing button.is-on .nd-billing__save { background: rgba(26,20,5,.12); color: #1a1405; }
.nd-billing__thumb {
    position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px);
    border-radius: 999px; background: #ffc21a;
    box-shadow: 0 6px 18px -6px rgba(217,96,12,.7);
    transition: transform .35s cubic-bezier(.3,1.3,.5,1);
}
.nd-billing.is-yearly .nd-billing__thumb { transform: translateX(100%); }

.nd-pk__preview {
    margin-bottom: 20px; padding: 12px 16px; border-radius: 14px;
    background: rgba(255,194,26,.15); border: 1px dashed #d9600c; color: var(--nd-ink); font-size: 14px;
}

/* tabs with a sliding ink */
.nd-tabs {
    position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
    padding: 6px; border-radius: 20px; margin-bottom: 18px;
    background: var(--nd-surface-raised); border: 1px solid var(--nd-line);
}
.nd-tabs::-webkit-scrollbar { display: none; }
.nd-tab {
    position: relative; z-index: 1; flex: 1 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 18px; border: 0; border-radius: 14px; background: transparent; cursor: pointer;
    font: 600 15px var(--nd-font-sans); color: var(--nd-ink-muted); white-space: nowrap;
    transition: color .25s;
}
.nd-tab:hover { color: var(--nd-ink); }
.nd-tab[aria-selected="true"] { color: #ffffff; }
.nd-tab__icon {
    width: 32px; height: 32px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nd-cloud-soft); color: var(--nd-cloud-strong);
    transition: background-color .25s, color .25s, transform .35s cubic-bezier(.3,1.6,.5,1);
}
.nd-tab__icon svg { width: 18px; height: 18px; }
.nd-tab[aria-selected="true"] .nd-tab__icon { background: #ffc21a; color: #1a1405; transform: rotate(-10deg); }
.nd-tabs__ink {
    position: absolute; top: 6px; bottom: 6px; left: 0; width: 0;
    border-radius: 14px; background: #0b1622;
    transition: transform .4s cubic-bezier(.3,1.2,.5,1), width .4s cubic-bezier(.3,1.2,.5,1);
}

.nd-panel__tagline { margin: 6px 4px 22px; color: var(--nd-ink-muted); font-size: 15px; }
.nd-panel.is-entering .nd-plan2 { animation: nd-plan-in .5s cubic-bezier(.2,.9,.2,1) both; }
.nd-panel.is-entering .nd-plan2:nth-child(2) { animation-delay: .06s; }
.nd-panel.is-entering .nd-plan2:nth-child(3) { animation-delay: .12s; }
.nd-panel.is-entering .nd-plan2:nth-child(4) { animation-delay: .18s; }
@keyframes nd-plan-in { from { opacity: 0; transform: translateY(18px); } }

/* plan grid */
.nd-plans { display: grid; gap: 22px; align-items: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nd-plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.nd-plans--1 { grid-template-columns: minmax(0, 420px); }
.nd-plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* plan card */
.nd-plan2 {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 20px;
    padding: 30px 28px 28px;
    border-radius: 24px;
    background: var(--nd-surface-raised); border: 1px solid var(--nd-line);
    transition: transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s;
}
.nd-plan2:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(14,34,51,.35); }
.nd-plan2__heat { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--nd-cloud-soft); }
.nd-plan2__heat i { display: block; height: 100%; width: var(--heat); background: linear-gradient(90deg, #38a8f0, #ffc21a 60%, #d9600c); border-radius: 0 3px 3px 0; }
.nd-plan2__name { margin: 0; font: 700 28px/1.1 var(--nd-font-display); letter-spacing: -0.02em; }
.nd-plan2__tag { margin: 6px 0 0; font-size: 15px; color: var(--nd-ink-muted); }
.nd-plan2__price { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6px; padding: 18px 0; border-top: 1px solid var(--nd-line); border-bottom: 1px solid var(--nd-line); }
.nd-plan2__amount { font: 700 46px/1 var(--nd-font-display); letter-spacing: -0.03em; }
.nd-plan2__amount.is-swap { animation: nd-swap .4s cubic-bezier(.2,.9,.2,1); }
.nd-plan2__amount--na { font-size: 30px; color: var(--nd-ink-muted); }
.nd-plan2__per { font-size: 15px; color: var(--nd-ink-muted); }
.nd-plan2__note { grid-column: 1 / -1; margin-top: 8px; font: 500 12.5px var(--nd-font-mono); color: var(--nd-ink-muted); }
.nd-plan2__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.nd-plan2__list li { display: flex; gap: 12px; font-size: 15px; line-height: 22px; }
.nd-plan2__list svg { flex: none; width: 20px; height: 20px; padding: 2px; border-radius: 50%; background: rgba(17,115,74,.12); color: var(--nd-success); box-sizing: border-box; }
.nd-page .nd-plan2__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; border-radius: 999px; text-decoration: none;
    font-weight: 700; font-size: 16px;
    background: var(--nd-cloud); color: var(--nd-on-cloud);
    transition: transform .2s, filter .2s;
}
.nd-page .nd-plan2__cta:hover { color: var(--nd-on-cloud); filter: brightness(1.06); transform: translateY(-1px); }
.nd-plan2__cta svg { width: 18px; height: 18px; transition: transform .2s; }
.nd-plan2__cta:hover svg { transform: translateX(4px); }

/* featured: night card with a fire rim */
.nd-plan2.is-featured {
    background:
        radial-gradient(120% 70% at 100% 0%, rgba(10,106,168,.5), transparent 60%),
        radial-gradient(90% 60% at 0% 100%, rgba(217,96,12,.25), transparent 60%),
        #0b1622;
    color: #e8f1f8; border-color: transparent;
    box-shadow: 0 0 0 2px #ffc21a, 0 30px 70px -30px rgba(217,96,12,.6);
}
.nd-plan2.is-featured:hover { box-shadow: 0 0 0 2px #ffc21a, 0 40px 80px -30px rgba(217,96,12,.75); }
.nd-plan2.is-featured .nd-plan2__heat { background: #1d3346; }
.nd-plan2.is-featured .nd-plan2__tag,
.nd-plan2.is-featured .nd-plan2__per,
.nd-plan2.is-featured .nd-plan2__note { color: #9fb3c4; }
.nd-plan2.is-featured .nd-plan2__price { border-color: #23384a; }
.nd-plan2.is-featured .nd-plan2__amount { color: #ffffff; }
.nd-plan2.is-featured .nd-plan2__list svg { background: rgba(76,195,138,.18); color: #4cc38a; }
.nd-page .nd-plan2.is-featured .nd-plan2__cta { background: #ffc21a; color: #1a1405; box-shadow: 0 12px 30px -12px rgba(255,194,26,.9); }
.nd-plan2__ribbon {
    position: absolute; top: 22px; right: 20px;
    padding: 5px 12px; border-radius: 999px;
    background: #ffc21a; color: #1a1405; font: 700 12px var(--nd-font-sans);
    box-shadow: 0 6px 16px -6px rgba(255,194,26,.8);
}
.nd-plan2__draft { position: absolute; top: 14px; left: 14px; padding: 3px 8px; border-radius: 6px; background: #d9600c; color: #ffffff; font: 700 11px var(--nd-font-mono); letter-spacing: .08em; }
.nd-plan2.is-featured .nd-plan2__name { padding-right: 150px; }

.nd-pk__foot { margin: 28px 0 0; text-align: center; color: var(--nd-ink-muted); }
.nd-pk__empty {
    display: flex; align-items: center; gap: 18px;
    padding: 28px; border-radius: 24px;
    background: var(--nd-surface-raised); border: 1px dashed var(--nd-line-strong);
}
.nd-pk__empty b { display: block; font: 700 22px var(--nd-font-display); margin-bottom: 4px; }
.nd-pk__empty span { color: var(--nd-ink-muted); }
.nd-pk__empty-flame { flex: none; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #0b1622; color: #ffc21a; }
.nd-pk__empty-flame svg { width: 28px; height: 28px; }

@media (max-width: 1100px) {
    .nd-plans, .nd-plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .nd-plans, .nd-plans--2, .nd-plans--4 { grid-template-columns: 1fr; }
    .nd-tab { flex: 0 0 auto; }
    .nd-billing { width: 100%; }
    .nd-pk { padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) {
    .nd-tabs__ink, .nd-billing__thumb, .nd-plan2 { transition: none; }
    .nd-panel.is-entering .nd-plan2 { animation: none; }
}

/* =====================================================================
   FLAME DIVIDER — the night section burns up into the light one
   ===================================================================== */
.nd-pk { padding-bottom: clamp(88px, 9vw, 130px); }
.nd-cdiv {
    position: absolute; left: 0; right: 0;
    height: clamp(40px, 4.5vw, 64px);
    top: calc(-1 * clamp(40px, 4.5vw, 64px) + 1px);
    pointer-events: none; z-index: 1;
}
.nd-cdiv svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* =====================================================================
   SERVICES — numbered index + detail stage
   ===================================================================== */
.nd-svc { position: relative; isolation: isolate; background: #07111b; color: #e8f1f8; }
.nd-svc__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.nd-svc__bg span { position: absolute; border-radius: 50%; filter: blur(90px); }
.nd-svc__bg span:first-child { width: 560px; height: 560px; left: -180px; top: 10%; background: #d9600c; opacity: .22; }
.nd-svc__bg span:last-child { width: 620px; height: 620px; right: -200px; bottom: -160px; background: #0a6aa8; opacity: .35; }
.nd-svc__inner { position: relative; z-index: 2; padding-top: 72px; padding-bottom: 120px; }
.nd-svc__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
.nd-svc .nd-eyebrow { color: #ffcc3d; }
.nd-svc .nd-lead { color: #9fb3c4; }
.nd-svc__title { margin: 0; font: 700 clamp(38px, 5vw, 64px)/1.02 var(--nd-font-display); letter-spacing: -0.035em; color: #ffffff; }
.nd-svc__title em { font-style: normal; color: #ffc21a; }

.nd-svc__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; }

/* index */
.nd-svc__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #1d3346; }
.nd-svc__item { border-bottom: 1px solid #1d3346; }
.nd-svc__btn {
    position: relative; width: 100%;
    display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px;
    padding: 22px 4px; border: 0; background: transparent; cursor: pointer; text-align: left;
    color: #7f97ab;
    transition: color .3s, padding-left .35s cubic-bezier(.2,.9,.2,1);
}
.nd-svc__btn::before { /* fire underline that grows */
    content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
    background: linear-gradient(90deg, #ffc21a, #d9600c); transition: width .5s cubic-bezier(.2,.9,.2,1);
}
.nd-svc__num { font: 500 14px var(--nd-font-mono); color: #5f7a90; transition: color .3s; }
.nd-svc__name { font: 700 clamp(24px, 3vw, 38px)/1.1 var(--nd-font-display); letter-spacing: -0.025em; }
.nd-svc__arrow {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #23384a; color: #7f97ab;
    transition: background-color .3s, color .3s, border-color .3s, transform .4s cubic-bezier(.3,1.6,.5,1);
}
.nd-svc__arrow svg { width: 18px; height: 18px; }
.nd-svc__btn:hover, .nd-svc__btn[aria-selected="true"] { color: #ffffff; padding-left: 14px; }
.nd-svc__btn[aria-selected="true"]::before { width: 100%; }
.nd-svc__btn[aria-selected="true"] .nd-svc__num { color: #ffc21a; }
.nd-svc__btn[aria-selected="true"] .nd-svc__arrow { background: #ffc21a; border-color: #ffc21a; color: #1a1405; transform: rotate(-45deg); }
.nd-svc__btn:focus-visible { outline: 2px solid #7cc8f8; outline-offset: 2px; }
.nd-svc__inline { display: none; }

/* stage */
.nd-svc__stage {
    position: sticky; top: 110px;
    padding: 32px; border-radius: 28px;
    background: rgba(18,33,47,.7); border: 1px solid #1d3346;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 40px 90px -40px rgba(0,0,0,.8);
}
.nd-svc__panel { display: flex; flex-direction: column; gap: 18px; }
.nd-svc__panel:not([hidden]) { animation: nd-svc-in .5s cubic-bezier(.2,.9,.2,1); }
@keyframes nd-svc-in { from { opacity: 0; transform: translateY(14px); } }
.nd-svc__visual {
    position: relative; height: 290px; border-radius: 20px; overflow: hidden;
    background:
        radial-gradient(70% 80% at 50% 110%, rgba(255,194,26,.18), transparent 70%),
        radial-gradient(60% 60% at 100% 0%, rgba(10,106,168,.35), transparent 70%),
        #0b1622;
    border: 1px solid #1d3346;
}
.nd-svc__badge {
    position: absolute; left: 14px; top: 14px; z-index: 3;
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: #ffc21a; color: #1a1405; transform: rotate(-8deg);
    box-shadow: 0 10px 24px -8px rgba(217,96,12,.8);
}
.nd-svc__ptitle { margin: 6px 0 0; font: 700 28px/1.1 var(--nd-font-display); letter-spacing: -0.02em; color: #ffffff; }
.nd-svc__pdesc { margin: 0; font-size: 16.5px; line-height: 26px; color: #b8cad8; }
.nd-svc__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nd-svc__tags li { padding: 7px 12px; border-radius: 999px; background: rgba(124,200,248,.1); border: 1px solid rgba(124,200,248,.22); color: #cfe7f8; font: 500 13px var(--nd-font-mono); }
.nd-page .nd-svc__cta {
    align-self: flex-start; margin-top: 6px;
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 50px; padding: 0 22px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.28); color: #ffffff; text-decoration: none; font-weight: 600;
    transition: background-color .2s, color .2s, border-color .2s;
}
.nd-page .nd-svc__cta:hover { background: #ffc21a; border-color: #ffc21a; color: #1a1405; }
.nd-svc__cta svg { width: 18px; height: 18px; }

@keyframes nd-spin { to { transform: rotate(360deg); } }

/* phones: accordion in place, no stage */
@media (max-width: 900px) {
    .nd-svc__grid { grid-template-columns: 1fr; }
    .nd-svc__stage { display: none; }
    .nd-svc__btn { grid-template-columns: 40px 1fr auto; padding: 18px 2px; }
    .nd-svc__btn:hover, .nd-svc__btn[aria-selected="true"] { padding-left: 2px; }
    .nd-svc__inline { padding: 0 2px 22px 52px; }
    .nd-live .nd-svc__inline { display: flex; flex-direction: column; gap: 14px; animation: nd-svc-in .4s ease; }
    .nd-svc__inline p { margin: 0; color: #b8cad8; font-size: 15.5px; line-height: 24px; }
    .nd-svc__inner { padding-bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) {
    .nd-svc__ring { animation: none !important; }
    .nd-svc__panel:not([hidden]) { animation: none; }
}

/* =====================================================================
   SERVICE SCENES — one mockup per service
   (animations restart each time the panel / accordion entry opens)
   ===================================================================== */
.nd-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 26px; color: #e8f1f8; }
.nd-svc__inline .nd-scene { position: relative; height: 250px; border-radius: 18px; overflow: hidden; background: #0b1622; border: 1px solid #1d3346; }

/* --- web: browser --- */
.nd-br { position: relative; width: 100%; max-width: 400px; border-radius: 14px; overflow: hidden; background: #f5f9fd; box-shadow: 0 30px 60px -25px rgba(0,0,0,.8); }
.nd-br__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #dbe7f1; }
.nd-br__bar > i { width: 9px; height: 9px; border-radius: 50%; background: #ff7a6b; }
.nd-br__bar > i:nth-child(2) { background: #ffcc3d; } .nd-br__bar > i:nth-child(3) { background: #4cc38a; }
.nd-br__url { margin-left: 10px; flex: 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #ffffff; color: #4a5d6e; font: 500 11.5px var(--nd-font-mono); }
.nd-br__url svg { width: 11px; height: 11px; color: #11734a; }
.nd-br__page { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.nd-br__nav { display: flex; align-items: center; gap: 10px; }
.nd-br__logo { width: 46px; height: 10px; border-radius: 5px; background: #0a6aa8; }
.nd-br__links { display: flex; gap: 6px; flex: 1; }
.nd-br__links i { width: 26px; height: 6px; border-radius: 3px; background: #c3d4e2; }
.nd-br__lang { display: flex; gap: 2px; font: 600 9px var(--nd-font-mono); }
.nd-br__lang em { font-style: normal; padding: 2px 4px; border-radius: 4px; color: #4a5d6e; }
.nd-br__hero { display: flex; flex-direction: column; gap: 7px; padding: 14px; border-radius: 10px; background: #0b1622; }
.nd-br__hero .l1 { width: 70%; height: 12px; border-radius: 6px; background: #ffffff; }
.nd-br__hero .l2 { width: 48%; height: 7px; border-radius: 4px; background: #5f7a90; }
.nd-br__hero .btn { width: 64px; height: 16px; border-radius: 8px; background: #ffc21a; margin-top: 4px; }
.nd-br__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nd-br__cards i { height: 44px; border-radius: 8px; background: #ffffff; border: 1px solid #d5e2ee; }
.nd-br__seo { position: absolute; right: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: #11734a; color: #ffffff; font: 700 11px var(--nd-font-mono); }

.nd-svc__panel:not([hidden]) .nd-br__nav, .nd-live .nd-br__nav { animation: nd-build .5s .2s ease both; }
.nd-svc__panel:not([hidden]) .nd-br__hero, .nd-live .nd-br__hero { animation: nd-build .5s .5s ease both; }
.nd-svc__panel:not([hidden]) .nd-br__cards i, .nd-live .nd-br__cards i { animation: nd-build .45s ease both; }
.nd-br__cards i:nth-child(1) { animation-delay: .8s !important; } .nd-br__cards i:nth-child(2) { animation-delay: .9s !important; } .nd-br__cards i:nth-child(3) { animation-delay: 1s !important; }
.nd-svc__panel:not([hidden]) .nd-br__seo, .nd-live .nd-br__seo { animation: nd-build .4s 1.4s cubic-bezier(.3,1.6,.5,1) both; }
.nd-svc__panel:not([hidden]) .nd-br__lang em, .nd-live .nd-br__lang em { animation: nd-lang 4.5s infinite; }
.nd-br__lang em:nth-child(2) { animation-delay: 1.5s !important; } .nd-br__lang em:nth-child(3) { animation-delay: 3s !important; }
@keyframes nd-build { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nd-lang { 0%, 33% { background: #ffc21a; color: #1a1405; } 34%, 100% { background: transparent; color: #4a5d6e; } }

/* --- mobile: two phones --- */
.nd-phones { position: relative; display: flex; gap: 22px; align-items: flex-end; }
.nd-phone {
    position: relative; width: 112px; height: 216px; padding: 22px 10px 12px;
    border-radius: 24px; background: #f5f9fd; border: 5px solid #23384a;
    display: flex; flex-direction: column; gap: 7px;
    box-shadow: 0 30px 50px -20px rgba(0,0,0,.8);
}
.nd-phone--android { border-radius: 16px; transform: translateY(-18px) rotate(4deg); }
.nd-phone--ios { transform: rotate(-4deg); }
.nd-phone__notch { position: absolute; top: 6px; left: 50%; width: 36px; height: 7px; margin-left: -18px; border-radius: 4px; background: #23384a; }
.nd-phone--android .nd-phone__notch { width: 7px; margin-left: -3px; }
.nd-phone__head { height: 9px; width: 60%; border-radius: 5px; background: #0e2233; }
.nd-phone__card { height: 56px; border-radius: 10px; background: linear-gradient(135deg, #38a8f0, #0a6aa8); }
.nd-phone__row { display: flex; gap: 6px; }
.nd-phone__row i { flex: 1; height: 26px; border-radius: 8px; background: #ffffff; border: 1px solid #d5e2ee; }
.nd-phone__row:last-of-type i:first-child { background: #ffc21a; border-color: #ffc21a; }
.nd-phone__tab { margin-top: auto; display: flex; justify-content: space-around; padding-top: 6px; border-top: 1px solid #d5e2ee; }
.nd-phone__tab i { width: 12px; height: 12px; border-radius: 4px; background: #c3d4e2; }
.nd-phone__tab i:first-child { background: #0a6aa8; }
.nd-toast {
    position: absolute; left: 50%; top: -6px; transform: translate(-50%, -14px); white-space: nowrap;
    padding: 8px 14px; border-radius: 12px; background: #ffffff; color: #0e2233; font: 600 12px var(--nd-font-sans);
    box-shadow: 0 16px 30px -10px rgba(0,0,0,.6);
}
.nd-toast b { color: #11734a; }
.nd-svc__panel:not([hidden]) .nd-toast, .nd-live .nd-toast { animation: nd-toast 4s .6s ease infinite; }
@keyframes nd-toast { 0% { opacity: 0; transform: translate(-50%, -14px); } 12%, 70% { opacity: 1; transform: translate(-50%, 0); } 85%, 100% { opacity: 0; transform: translate(-50%, -8px); } }

/* --- ai: chat + flow --- */
.nd-ai { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.nd-chatw { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: #f5f9fd; color: #0e2233; box-shadow: 0 24px 50px -24px rgba(0,0,0,.8); }
.nd-chatw__top { display: flex; align-items: center; gap: 8px; font: 600 12.5px var(--nd-font-sans); padding-bottom: 8px; border-bottom: 1px solid #d5e2ee; }
.nd-chatw__bot { width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #ffc21a; color: #1a1405; font: 700 10px var(--nd-font-mono); }
.nd-msg { max-width: 82%; padding: 7px 11px; border-radius: 12px; font-size: 12.5px; line-height: 17px; }
.nd-msg--u { align-self: flex-end; background: #0a6aa8; color: #ffffff; border-bottom-right-radius: 4px; }
.nd-msg--b { align-self: flex-start; background: #ffffff; border: 1px solid #d5e2ee; border-bottom-left-radius: 4px; }
.nd-msg--typing { display: inline-flex; gap: 4px; padding: 0 12px; max-height: 0; margin: -4px 0; overflow: hidden; opacity: 0; }
.nd-msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: #6f879c; animation: nd-dot 1s infinite; }
.nd-msg--typing i:nth-child(2) { animation-delay: .15s; } .nd-msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes nd-dot { 50% { transform: translateY(-3px); opacity: .5; } }
.nd-svc__panel:not([hidden]) .nd-msg, .nd-live .nd-msg { animation: nd-build .35s var(--d) ease both; }
.nd-svc__panel:not([hidden]) .nd-msg--typing, .nd-live .nd-msg--typing { animation: nd-typing 1.1s var(--d) ease forwards; }
@keyframes nd-typing { 0% { opacity: 0; transform: translateY(6px); } 20%, 85% { opacity: 1; transform: none; max-height: 40px; } 100% { opacity: 0; max-height: 0; padding: 0; margin: -4px 0; } }
.nd-flow { display: flex; align-items: center; }
.nd-flow__node { flex: none; padding: 7px 10px; border-radius: 10px; background: #12212f; border: 1px solid #23384a; font: 600 11.5px var(--nd-font-mono); color: #cfe7f8; }
.nd-flow__node.is-ai { background: #ffc21a; color: #1a1405; border-color: #ffc21a; }
.nd-flow__link { position: relative; flex: 1; height: 2px; margin: 0 4px; background: #23384a; overflow: hidden; }
.nd-flow__link i { position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, #ffc21a); }
.nd-svc__panel:not([hidden]) .nd-flow__link i, .nd-live .nd-flow__link i { animation: nd-data 1.6s linear infinite; animation-delay: calc(var(--n) * .5s); }
@keyframes nd-data { to { left: 100%; } }

/* --- azure: architecture --- */
.nd-arch { width: 100%; max-width: 460px; height: auto; overflow: visible; }
.nd-arch__cloud { fill: rgba(56,168,240,.08); stroke: rgba(124,200,248,.3); stroke-width: 1.5; stroke-dasharray: 5 6; }
.nd-arch__links path { fill: none; stroke: #7cc8f8; stroke-width: 2; stroke-dasharray: 6 6; }
.nd-svc__panel:not([hidden]) .nd-arch__links path, .nd-live .nd-arch__links path { animation: nd-dash 1s linear infinite; }
@keyframes nd-dash { to { stroke-dashoffset: -12; } }
.nd-arch__nodes rect { fill: #12212f; stroke: #2e4a62; stroke-width: 1.5; }
.nd-arch__nodes rect.is-hot { fill: #ffc21a; stroke: #ffc21a; }
.nd-arch__nodes text { fill: #e8f1f8; font: 600 11px var(--nd-font-mono); text-anchor: middle; }
.nd-arch__nodes g:nth-child(2) text { fill: #1a1405; }
.nd-svc__panel:not([hidden]) .nd-arch__nodes g, .nd-live .nd-arch__nodes g { animation: nd-fade .4s ease both; }
.nd-arch__nodes g:nth-child(2) { animation-delay: .2s !important; } .nd-arch__nodes g:nth-child(3) { animation-delay: .4s !important; }
.nd-arch__nodes g:nth-child(4) { animation-delay: .6s !important; } .nd-arch__nodes g:nth-child(5) { animation-delay: .7s !important; }
@keyframes nd-fade { from { opacity: 0; } to { opacity: 1; } }
.nd-arch__label { fill: #8ea6ba; font: 500 11px var(--nd-font-mono); text-anchor: middle; }

/* --- ops: monitoring --- */
.nd-ops { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.nd-ops__rows { display: flex; flex-direction: column; gap: 6px; }
.nd-ops__row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #12212f; border: 1px solid #23384a; font: 500 12.5px var(--nd-font-mono); color: #cfe7f8; }
.nd-ops__row i { width: 9px; height: 9px; border-radius: 50%; background: #4cc38a; box-shadow: 0 0 8px #4cc38a; }
.nd-ops__row b { font-weight: 500; color: #9fb3c4; }
.nd-ops__row--warn i { background: #ffc21a; box-shadow: 0 0 8px #ffc21a; animation: nd-blink .9s steps(2) infinite; }
.nd-ops__row--warn b { color: #ffcc3d; }
.nd-svc__panel:not([hidden]) .nd-ops__row--warn i, .nd-live .nd-ops__row--warn i { animation: nd-warnfix 4s ease forwards; }
@keyframes nd-warnfix { 0%, 60% { background: #ffc21a; box-shadow: 0 0 8px #ffc21a; } 65%, 100% { background: #4cc38a; box-shadow: 0 0 8px #4cc38a; } }
.nd-ops__chart { width: 100%; height: 80px; border-radius: 10px; background: #0b1622; border: 1px solid #1d3346; }
.nd-ops__area { fill: rgba(56,168,240,.15); stroke: none; }
.nd-ops__line { fill: none; stroke: #38a8f0; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 600; stroke-dashoffset: 0; }
.nd-svc__panel:not([hidden]) .nd-ops__line, .nd-live .nd-ops__line { animation: nd-draw 1.6s ease both; }
@keyframes nd-draw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
.nd-ops__alert { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; background: rgba(255,194,26,.14); border: 1px solid rgba(255,194,26,.4); color: #ffe08a; font: 500 12px var(--nd-font-mono); }
.nd-ops__alert b { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #ffc21a; color: #1a1405; font-size: 11px; }
.nd-ops__alert em { font-style: normal; color: #4cc38a; }
.nd-svc__panel:not([hidden]) .nd-ops__alert em, .nd-live .nd-ops__alert em { animation: nd-fade .4s 2.5s ease both; }

@media (max-width: 480px) {
    .nd-phone { width: 92px; height: 180px; }
    .nd-scene { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .nd-scene *, .nd-scene *::before { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
    .nd-msg--typing { display: none; }
}

/* =====================================================================
   SERVICES IN THE LIGHT THEME — soft cloud tint instead of the night block
   (the dark theme keeps the night look above; mockup "screens" stay dark)
   ===================================================================== */
.nd-cdiv__fill { fill: #07111b; }
[data-theme="light"] .nd-cdiv__fill { fill: #eaf4fc; }

[data-theme="light"] .nd-svc { background: #eaf4fc; color: #0e2233; }
[data-theme="light"] .nd-svc__bg span:first-child { opacity: .10; }
[data-theme="light"] .nd-svc__bg span:last-child { background: #38a8f0; opacity: .18; }
[data-theme="light"] .nd-svc .nd-eyebrow { color: #0a6aa8; }
[data-theme="light"] .nd-svc .nd-lead { color: #4a5d6e; }
[data-theme="light"] .nd-svc__title { color: #0e2233; }
[data-theme="light"] .nd-svc__title em { color: #d9600c; }

[data-theme="light"] .nd-svc__list,
[data-theme="light"] .nd-svc__item { border-color: #c9dceb; }
[data-theme="light"] .nd-svc__btn { color: #4a5d6e; }
[data-theme="light"] .nd-svc__btn:hover,
[data-theme="light"] .nd-svc__btn[aria-selected="true"] { color: #0e2233; }
[data-theme="light"] .nd-svc__num { color: #6f879c; }
[data-theme="light"] .nd-svc__btn[aria-selected="true"] .nd-svc__num { color: #d9600c; }
[data-theme="light"] .nd-svc__arrow { border-color: #b7cde0; color: #4a5d6e; }
[data-theme="light"] .nd-svc__btn:focus-visible { outline-color: #0a6aa8; }

[data-theme="light"] .nd-svc__stage {
    background: #ffffff; border-color: #d5e2ee;
    box-shadow: 0 30px 70px -40px rgba(14,34,51,.35);
}
[data-theme="light"] .nd-svc__ptitle { color: #0e2233; }
[data-theme="light"] .nd-svc__pdesc,
[data-theme="light"] .nd-svc__inline p { color: #4a5d6e; }
[data-theme="light"] .nd-svc__tags li { background: #f5f9fd; border-color: #d5e2ee; color: #0e2233; }
[data-theme="light"] .nd-page .nd-svc__cta,
.nd-page[data-theme="light"] .nd-svc__cta { color: #0e2233; border-color: #6f879c; }
[data-theme="light"] .nd-svc__cta { color: #0e2233; border-color: #6f879c; }
[data-theme="light"] .nd-svc__cta:hover { color: #1a1405; }

/* =====================================================================
   SERVICES — stacking cards
   ===================================================================== */
.nd-svc--stack .nd-svc__inner { padding-bottom: 96px; }
.nd-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.nd-stack__card {
    position: sticky; top: calc(96px + var(--i) * 16px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; align-items: stretch;
    min-height: 430px; padding: 32px;
    border-radius: 28px;
    background: var(--nd-surface-raised); border: 1px solid var(--nd-line);
    box-shadow: 0 -10px 40px -24px rgba(14,34,51,.35), 0 30px 60px -40px rgba(14,34,51,.4);
}
.nd-stack__text { display: flex; flex-direction: column; gap: 16px; padding: 8px 4px; }
.nd-stack__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nd-stack__icon {
    width: 52px; height: 52px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #ffc21a; color: #1a1405; transform: rotate(-6deg);
    box-shadow: 0 10px 24px -10px rgba(217,96,12,.8);
}
.nd-stack__num { font: 500 13px var(--nd-font-mono); letter-spacing: .08em; color: var(--nd-ink-muted); }
.nd-stack__title { margin: 6px 0 0; font: 700 clamp(28px, 3vw, 40px)/1.05 var(--nd-font-display); letter-spacing: -0.03em; color: var(--nd-ink); }
.nd-stack__desc { margin: 0; font-size: 17px; line-height: 27px; color: var(--nd-ink-muted); max-width: 46ch; }
.nd-stack .nd-svc__tags li { background: var(--nd-surface); border-color: var(--nd-line); color: var(--nd-ink); }
.nd-page .nd-stack__cta {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 50px; padding: 0 22px; border-radius: 999px;
    background: #0b1622; color: #ffffff; text-decoration: none; font-weight: 600;
    transition: background-color .2s, color .2s, transform .2s;
}
.nd-page .nd-stack__cta:hover { background: #ffc21a; color: #1a1405; transform: translateY(-1px); }
.nd-stack__cta svg { width: 18px; height: 18px; transition: transform .2s; }
.nd-stack__cta:hover svg { transform: translateX(4px); }
.nd-stack__visual {
    position: relative; overflow: hidden; border-radius: 22px; min-height: 360px;
    background:
        radial-gradient(70% 80% at 50% 110%, rgba(255,194,26,.18), transparent 70%),
        radial-gradient(60% 60% at 100% 0%, rgba(10,106,168,.35), transparent 70%),
        #0b1622;
}
[data-theme="dark"] .nd-stack__card { background: #12212f; border-color: #23384a; }
[data-theme="dark"] .nd-stack .nd-svc__tags li { background: #0b1622; border-color: #23384a; color: #cfe7f8; }
[data-theme="dark"] .nd-page .nd-stack__cta { background: #ffc21a; color: #1a1405; }

@media (max-width: 900px) {
    .nd-stack__card { position: relative; top: auto; grid-template-columns: 1fr; min-height: 0; padding: 20px; gap: 20px; }
    .nd-stack__visual { order: -1; min-height: 270px; }
    .nd-stack__desc { font-size: 16px; line-height: 25px; }
}

/* ---- stack: fit each card to the screen so it is always fully visible ---- */
.nd-stack__card {
    top: calc(76px + var(--i) * 12px);
    height: clamp(340px, calc(100svh - 76px - var(--i) * 12px - 24px), 460px);
    min-height: 0;
    padding: clamp(18px, 3vh, 32px);
    gap: clamp(20px, 3vw, 36px);
}
.nd-stack__text { gap: clamp(8px, 1.6vh, 16px); padding: 4px; min-height: 0; overflow: hidden; }
.nd-stack__title { font-size: clamp(24px, min(3vw, 4.4vh), 40px); }
.nd-stack__desc { font-size: clamp(15px, 2vh, 17px); line-height: 1.55; }
.nd-stack__visual { min-height: 0; height: 100%; }
.nd-stack .nd-scene { transform-origin: center; }
@media (max-height: 760px) {
    .nd-stack .nd-scene > * { transform: scale(.88); }
    .nd-stack .nd-svc__tags li:nth-child(n+4) { display: none; }   /* keep the card short */
}
/* short screens: no stacking, cards simply follow each other */
@media (max-height: 640px) {
    .nd-stack__card { position: relative; top: auto; height: auto; }
    .nd-stack__visual { min-height: 280px; }
}
@media (max-width: 900px) {
    .nd-stack__card { position: relative; top: auto; height: auto; }
    .nd-stack__visual { height: auto; min-height: 270px; }
    .nd-stack .nd-scene > * { transform: none; }
}

/* ---------- why ndize.al ---------- */
.nd-why h2 em { font-style: normal; color: var(--nd-ember); }
.nd-why__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.nd-why__item {
    display: flex; flex-direction: column; gap: 10px;
    padding: 26px; border-radius: var(--nd-radius-lg);
    background: var(--nd-surface-raised); border: 1px solid var(--nd-line);
    transition: border-color .15s, transform .15s;
}
.nd-why__item:hover { border-color: var(--nd-cloud); transform: translateY(-2px); }
.nd-why__item .nd-chip-icon { margin-bottom: 6px; }
.nd-why__title { font: 600 20px/1.2 var(--nd-font-display); }
.nd-why__desc { font-size: 15px; line-height: 22px; color: var(--nd-ink-muted); }

/* ---------- domain search band ---------- */
.nd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nd-dsearch { background: var(--nd-night); color: var(--nd-night-ink); }
.nd-dsearch .nd-eyebrow { color: var(--nd-night-fire); }
.nd-dsearch .nd-lead { color: var(--nd-night-muted); }
.nd-dsearch__inner { align-items: center; text-align: center; }
.nd-dsearch__head { align-items: center; }
.nd-dsearch__form {
    width: 100%; max-width: 760px;
    display: flex; gap: 8px; padding: 8px;
    border-radius: var(--nd-radius-lg);
    background: var(--nd-night-raised); border: 1px solid var(--nd-night-line);
}
.nd-dsearch__form:focus-within { border-color: var(--nd-night-fire); }
.nd-dsearch__field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--nd-night-muted); }
.nd-dsearch__field input {
    flex: 1 1 auto; min-width: 0; height: 52px;
    background: transparent; border: 0; outline: 0;
    font: 500 18px var(--nd-font-sans); color: var(--nd-night-ink);
}
.nd-dsearch__field input::placeholder { color: var(--nd-night-muted); }
.nd-dsearch__tld select {
    height: 52px; padding: 0 14px; border-radius: var(--nd-radius-md);
    background: var(--nd-night-soft); color: var(--nd-night-ink); border: 1px solid var(--nd-night-line);
    font: 600 16px var(--nd-font-mono); cursor: pointer;
}
.nd-dsearch__prices { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.nd-dsearch__prices li {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 8px 14px; border-radius: var(--nd-radius-pill);
    background: var(--nd-night-raised); border: 1px solid var(--nd-night-line);
}
.nd-dsearch__ext { font: 700 15px var(--nd-font-mono); color: var(--nd-night-fire); }
.nd-dsearch__price { font-size: 15px; font-weight: 600; }
.nd-dsearch__price small { font-size: 12px; font-weight: 500; color: var(--nd-night-muted); margin-left: 2px; }
@media (max-width: 640px) {
    .nd-dsearch__form { flex-wrap: wrap; }
    .nd-dsearch__field { flex-basis: 100%; }
    .nd-dsearch__tld { flex: 1 1 auto; }
    .nd-dsearch__tld select { width: 100%; }
    .nd-dsearch__form .nd-btn { flex: 1 1 auto; }
}

/* ---------- service scenes: SEO / GEO / SMM ---------- */
.nd-serp { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.nd-serp__q { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: #f5f9fd; color: #0e2233; font: 500 13.5px var(--nd-font-sans); box-shadow: 0 18px 40px -22px rgba(0,0,0,.8); }
.nd-serp__q svg { width: 16px; height: 16px; flex: none; color: #4a5d6e; }
.nd-serp__typed { font-family: var(--nd-font-mono); font-size: 12.5px; display: inline-block; overflow: hidden; white-space: nowrap; border-right: 2px solid #0a6aa8; }
.nd-serp__list { display: flex; flex-direction: column; gap: 6px; }
.nd-serp__row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #12212f; border: 1px solid #23384a; }
.nd-serp__row b { font: 700 12px var(--nd-font-mono); color: #9fb3c4; }
.nd-serp__row span:nth-child(2) { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nd-serp__row em { font: normal 500 12.5px var(--nd-font-mono); color: #7cc8f8; }
.nd-serp__row i { display: block; height: 5px; border-radius: 3px; background: #23384a; }
.nd-serp__row.is-us { background: rgba(255,194,26,.1); border-color: rgba(255,194,26,.5); }
.nd-serp__row.is-us b { color: #ffcc3d; }
.nd-serp__row.is-us em { color: #ffcc3d; }
.nd-serp__up { font: 700 11.5px var(--nd-font-mono); color: #4cc38a; }
.nd-serp__chart { width: 100%; height: 56px; border-radius: 10px; background: #0b1622; border: 1px solid #1d3346; }
.nd-serp__line { fill: none; stroke: #4cc38a; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 600; }
.nd-serp__label { align-self: flex-start; font: 500 12px var(--nd-font-mono); color: #4cc38a; }
.nd-live .nd-serp__typed { animation: nd-typeq 1.4s steps(17) both, nd-caret .8s step-end 1.4s 3; }
.nd-live .nd-serp__row { animation: nd-build .4s ease both; }
.nd-live .nd-serp__row:nth-child(1) { animation: nd-climb .9s 1.5s cubic-bezier(.2,.9,.2,1) both; }
.nd-live .nd-serp__row:nth-child(2) { animation-delay: 1.5s; }
.nd-live .nd-serp__row:nth-child(3) { animation-delay: 1.65s; }
.nd-live .nd-serp__up { animation: nd-fade .4s 2.4s ease both; }
.nd-live .nd-serp__line { animation: nd-draw 1.6s 1.8s ease both; }
@keyframes nd-typeq { from { width: 0; } to { width: 17ch; } }
@keyframes nd-caret { 50% { border-color: transparent; } }
@keyframes nd-climb { 0% { opacity: 0; transform: translateY(96px); } 100% { opacity: 1; transform: none; } }

.nd-geo { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.nd-geo__card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #f5f9fd; color: #0e2233; box-shadow: 0 24px 50px -24px rgba(0,0,0,.8); }
.nd-geo__top { display: flex; align-items: center; gap: 8px; font: 600 12.5px var(--nd-font-sans); padding-bottom: 8px; border-bottom: 1px solid #d5e2ee; }
.nd-geo__q { align-self: flex-end; max-width: 86%; padding: 7px 11px; border-radius: 12px 12px 4px 12px; background: #0a6aa8; color: #ffffff; font-size: 12.5px; line-height: 17px; }
.nd-geo__ans { display: flex; flex-direction: column; gap: 6px; }
.nd-geo__ans i { display: block; height: 6px; border-radius: 3px; background: #d5e2ee; }
.nd-geo__hl { font-size: 12.5px; line-height: 18px; padding: 4px 8px; border-radius: 8px; background: rgba(255,194,26,.25); }
.nd-geo__hl b { color: #9a4a06; }
.nd-geo__hl sup, .nd-geo__src sup { font: 700 9px var(--nd-font-mono); color: #0a6aa8; margin-left: 2px; }
.nd-geo__src { display: flex; flex-wrap: wrap; gap: 6px; }
.nd-geo__src span { padding: 4px 9px; border-radius: 999px; background: #ffffff; border: 1px solid #d5e2ee; font: 500 11px var(--nd-font-mono); color: #4a5d6e; }
.nd-geo__src span.is-us { background: #ffc21a; border-color: #ffc21a; color: #1a1405; }
.nd-geo__engines { display: flex; justify-content: center; gap: 8px; }
.nd-geo__engines span { padding: 5px 11px; border-radius: 999px; background: #12212f; border: 1px solid #23384a; font: 500 11.5px var(--nd-font-mono); color: #9fb3c4; }
.nd-live .nd-geo__q { animation: nd-build .35s .3s ease both; }
.nd-live .nd-geo__ans > * { animation: nd-build .35s ease both; }
.nd-live .nd-geo__ans > :nth-child(1) { animation-delay: .9s; }
.nd-live .nd-geo__ans > :nth-child(2) { animation-delay: 1.05s; }
.nd-live .nd-geo__ans > :nth-child(3) { animation: nd-build .4s 1.3s cubic-bezier(.3,1.6,.5,1) both; }
.nd-live .nd-geo__ans > :nth-child(4) { animation-delay: 1.5s; }
.nd-live .nd-geo__src span { animation: nd-build .3s 1.8s ease both; }
.nd-live .nd-geo__src span.is-us { animation: nd-build .3s 1.8s ease both, nd-glow 2s 2.2s ease-in-out infinite; }
.nd-live .nd-geo__engines span { animation: nd-geo-eng 4.5s infinite; }
.nd-live .nd-geo__engines span:nth-child(2) { animation-delay: 1.5s; }
.nd-live .nd-geo__engines span:nth-child(3) { animation-delay: 3s; }
@keyframes nd-glow { 50% { box-shadow: 0 0 0 4px rgba(255,194,26,.3); } }
@keyframes nd-geo-eng { 0%, 30% { color: #ffcc3d; border-color: rgba(255,194,26,.6); } 34%, 100% { color: #9fb3c4; border-color: #23384a; } }

.nd-smm { position: relative; width: 100%; max-width: 420px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.nd-post { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #f5f9fd; color: #0e2233; box-shadow: 0 24px 50px -24px rgba(0,0,0,.8); }
.nd-post__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.nd-post__head span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.nd-post__head b { font: 600 12.5px var(--nd-font-sans); }
.nd-post__head small { font-size: 10.5px; color: #6f879c; }
.nd-post__av { width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(#ffc21a, #d9600c, #38a8f0, #ffc21a); padding: 2px; }
.nd-post__img { height: 130px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #133049, #0a6aa8 55%, #ffc21a); }
.nd-post__img span { font: 700 34px var(--nd-font-display); color: #ffffff; letter-spacing: -0.03em; text-shadow: 0 6px 20px rgba(0,0,0,.35); }
.nd-post__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.nd-post__heart { width: 20px; height: 20px; fill: none; stroke: #0e2233; stroke-width: 2; }
.nd-post__likes { font: 600 12.5px var(--nd-font-sans); }
.nd-smm__stats { display: flex; flex-direction: column; gap: 8px; }
.nd-smm__stats span { display: flex; flex-direction: column; padding: 9px 12px; border-radius: 12px; background: #12212f; border: 1px solid #23384a; font: 500 11px var(--nd-font-mono); color: #9fb3c4; }
.nd-smm__stats b { font: 700 18px var(--nd-font-display); color: #4cc38a; }
.nd-smm__pop { position: absolute; left: var(--x); bottom: 30%; font-size: 16px; color: #ff5a6e; opacity: 0; pointer-events: none; }
.nd-live .nd-post { animation: nd-build .45s .2s ease both; }
.nd-live .nd-post__heart { animation: nd-like 3s 1s ease infinite; }
.nd-live .nd-smm__stats span { animation: nd-build .35s var(--d) ease both; }
.nd-live .nd-smm__pop { animation: nd-pop 3s calc(1s + var(--d, 0s)) ease-out infinite; }
@keyframes nd-like { 0%, 10% { fill: none; stroke: #0e2233; transform: scale(1); } 16% { transform: scale(1.35); } 22%, 100% { fill: #ff3b5c; stroke: #ff3b5c; transform: scale(1); } }
@keyframes nd-pop { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 70% { opacity: 0; transform: translateY(-90px) scale(1.2); } 100% { opacity: 0; } }
@media (max-width: 480px) {
    .nd-smm { grid-template-columns: 1fr; }
    .nd-smm__stats { flex-direction: row; }
    .nd-smm__stats span { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .nd-serp__typed { width: auto; border-right: 0; }
    .nd-post__heart { fill: #ff3b5c; stroke: #ff3b5c; }
    .nd-smm__pop { display: none; }
}

/* ---------- service scene: graphic design ---------- */
.nd-dz { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.nd-dz__board {
    position: relative; height: 210px; border-radius: 16px; overflow: hidden;
    background-color: #12212f; border: 1px solid #23384a;
    background-image: radial-gradient(#23384a 1px, transparent 1px); background-size: 14px 14px;
}
.nd-dz__flyer {
    position: absolute; left: 16px; top: 18px; width: 108px; height: 160px; padding: 10px;
    display: flex; flex-direction: column; gap: 6px; border-radius: 6px;
    background: linear-gradient(160deg, #0a6aa8, #133049); transform: rotate(-6deg);
    box-shadow: 0 16px 30px -14px rgba(0,0,0,.8);
}
.nd-dz__flyer-top { height: 44px; border-radius: 4px; background: linear-gradient(135deg, #ffc21a, #d9600c); }
.nd-dz__flyer-title { font: 700 15px/1 var(--nd-font-display); color: #ffffff; letter-spacing: -0.02em; }
.nd-dz__flyer i, .nd-dz__card i { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); }
.nd-dz__flyer-btn { margin-top: auto; width: 54px; height: 14px; border-radius: 4px; background: #ffc21a; }
.nd-dz__logo {
    position: absolute; left: 50%; top: 22px; transform: translateX(-30%);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 12px 16px; border-radius: 12px; background: #f5f9fd;
    border: 1.5px dashed #38a8f0;
}
.nd-dz__logo svg { width: 46px; height: 46px; }
.nd-dz__mark { fill: none; stroke: #d9600c; stroke-width: 3.5; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 0; }
.nd-dz__logo span { font: 700 13px var(--nd-font-display); color: #0e2233; letter-spacing: -0.02em; }
.nd-dz__cards { position: absolute; right: 16px; bottom: 16px; width: 150px; height: 90px; }
.nd-dz__card { position: absolute; inset: 0; border-radius: 8px; box-shadow: 0 14px 26px -12px rgba(0,0,0,.8); }
.nd-dz__card--back { background: #0b1622; border: 1px solid #23384a; transform: rotate(8deg) translate(10px, -8px); display: flex; align-items: center; justify-content: center; }
.nd-dz__cmark { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(#ffc21a, #d9600c, #ffc21a); }
.nd-dz__card--front { background: #f5f9fd; padding: 12px; display: flex; flex-direction: column; gap: 5px; }
.nd-dz__card--front b { font: 700 13px var(--nd-font-display); color: #0e2233; }
.nd-dz__card--front small { font: 500 10px var(--nd-font-mono); color: #d9600c; margin-bottom: 4px; }
.nd-dz__card--front i { background: #d5e2ee; }
.nd-dz__cursor { position: absolute; left: 60%; top: 60%; width: 18px; height: 18px; fill: #ffffff; stroke: #0b1622; stroke-width: 1.5; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.nd-dz__swatches { display: flex; align-items: center; gap: 8px; }
.nd-dz__swatches i { width: 26px; height: 26px; border-radius: 8px; background: var(--c); border: 1px solid #23384a; }
.nd-dz__swatches span { margin-left: auto; font: 700 18px var(--nd-font-display); color: #e8f1f8; }
.nd-live .nd-dz__flyer { animation: nd-dz-in .5s .2s cubic-bezier(.2,.9,.2,1) both; }
.nd-live .nd-dz__logo { animation: nd-fade .4s .5s ease both; }
.nd-live .nd-dz__mark { animation: nd-dz-draw 1.4s .7s ease both, nd-dz-fill .5s 2.1s ease forwards; }
.nd-live .nd-dz__card--front { animation: nd-dz-card .6s 1.2s cubic-bezier(.2,.9,.2,1) both; }
.nd-live .nd-dz__card--back { animation: nd-fade .4s 1s ease both; }
.nd-live .nd-dz__cursor { animation: nd-dz-cursor 5s 1s ease-in-out infinite; }
.nd-live .nd-dz__swatches i { animation: nd-build .3s ease both; }
.nd-live .nd-dz__swatches i:nth-child(2) { animation-delay: .1s; }
.nd-live .nd-dz__swatches i:nth-child(3) { animation-delay: .2s; }
.nd-live .nd-dz__swatches i:nth-child(4) { animation-delay: .3s; }
.nd-live .nd-dz__swatches i:nth-child(5) { animation-delay: .4s; }
@keyframes nd-dz-in { from { opacity: 0; transform: rotate(-14deg) translateY(30px); } to { opacity: 1; transform: rotate(-6deg); } }
@keyframes nd-dz-draw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
@keyframes nd-dz-fill { to { fill: #ffc21a; } }
@keyframes nd-dz-card { from { opacity: 0; transform: translateY(40px) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes nd-dz-cursor { 0%, 100% { left: 60%; top: 60%; } 25% { left: 30%; top: 30%; } 50% { left: 55%; top: 22%; } 75% { left: 78%; top: 68%; } }
@media (prefers-reduced-motion: reduce) {
    .nd-dz__mark { fill: #ffc21a; }
}