/* NexaCore — panel-style UI (reference: hosting login / dashboard patterns) */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap");

:root {
    /* NexaCore logo — linear gradient (see assets/images/logo.png) */
    --logo-purple: #7b2cfe;
    --logo-magenta: #d122e3;
    --logo-coral: #ff4b2b;
    --logo-orange: #ff8c00;
    --gradient-logo: linear-gradient(
        90deg,
        var(--logo-purple),
        var(--logo-magenta),
        var(--logo-coral),
        var(--logo-orange)
    );
    --bg-deep: #000000;
    --bg-base: #050508;
    --bg-elevated: #0c0c10;
    --bg-card: rgba(10, 10, 14, 0.88);
    --stroke: rgba(255, 255, 255, 0.08);
    --stroke-strong: rgba(255, 255, 255, 0.14);
    --text: #f0f2f8;
    --text-muted: #9a9fb0;
    --accent: var(--logo-magenta);
    --accent-dim: rgba(123, 44, 254, 0.14);
    --accent-dim-hot: rgba(209, 34, 227, 0.1);
    --accent-hover: #e94fff;
    --warn: #fbbf24;
    --danger: #f87171;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    --font: "Outfit", system-ui, sans-serif;
    --font-display: "Syne", var(--font);
    --header-h: 72px;
}

/* ---- Homepage rebuild -------------------------------------------------- */
.home-v2 { --ink: #f8f7fc; --muted-v2: #a9a5b7; --panel-v2: #11101a; background: #09080e; }
.home-v2::before { background: radial-gradient(circle at 78% 5%, rgba(244, 73, 130, .18), transparent 25%), radial-gradient(circle at 10% 26%, rgba(112, 69, 255, .16), transparent 27%), linear-gradient(180deg, #0c0a12 0%, #09080e 63%, #0c0911 100%); }
.home-v2 .site-header { max-width: none; padding: 0 clamp(1.25rem, 5vw, 5.5rem); background: rgba(9, 8, 14, .76); }
.home-v2 .header-cta { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-size: .88rem; font-weight: 700; padding: .56rem 1rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; transition: .2s ease; }
.home-v2 .header-cta:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); transform: translateY(-1px); }
.hero-v2 { padding: clamp(4.7rem, 10vw, 8.4rem) 0 clamp(4rem, 9vw, 7rem); text-align: left; }
.hero-v2__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(350px, .95fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); }
.eyebrow-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .38rem .76rem; margin: 0 0 1.35rem; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; color: #cfcbda; font-size: .75rem; font-weight: 600; letter-spacing: .02em; background: rgba(255,255,255,.035); }
.eyebrow-pill span, .status-dot { width: .48rem; height: .48rem; border-radius: 50%; background: #b98aff; box-shadow: 0 0 0 4px rgba(185,138,255,.13); }
.hero-v2 h1 { max-width: 730px; margin: 0; color: var(--ink); font: 800 clamp(2.8rem, 6vw, 5.5rem)/.97 var(--font-display); letter-spacing: -.065em; }
.hero-v2 h1 em { font-style: normal; background: linear-gradient(106deg,#b693ff 5%,#ef5bc5 48%,#ff9a61 98%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero-v2__lede { max-width: 590px; margin: 1.5rem 0 0; color: var(--muted-v2); font-size: clamp(1rem, 1.6vw, 1.14rem); line-height: 1.7; }
.hero-v2__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; margin-top: 2rem; }
.home-v2 .btn { padding: .78rem 1.25rem; }
.text-link { color: #e8e3f3; font-size: .92rem; font-weight: 650; border-bottom: 1px solid rgba(255,255,255,.32); padding-bottom: .15rem; }
.text-link:hover { color: #fff; border-color: #fff; }
.trust-row { display: flex; gap: clamp(1.25rem, 3vw, 2.8rem); margin: clamp(2.6rem, 5vw, 4rem) 0 0; padding: 0; }
.trust-row div { padding-right: clamp(1.25rem, 3vw, 2.8rem); border-right: 1px solid rgba(255,255,255,.11); }
.trust-row div:last-child { border: 0; padding: 0; }
.trust-row dt { color: #fff; font: 750 1.5rem/1 var(--font-display); letter-spacing: -.05em; }
.trust-row dt span { color: #df64d7; }.trust-row dd { margin: .35rem 0 0; color: #8f899e; font-size: .74rem; }
.hero-v2__visual { position: relative; min-height: 405px; isolation: isolate; }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); z-index: -1; }.orb--one { width: 310px; height: 310px; top: 1rem; right: 2rem; background: radial-gradient(circle, rgba(223,63,151,.5), rgba(91,52,191,.08) 58%, transparent 70%); }.orb--two { width: 210px; height: 210px; left: -1rem; bottom: .5rem; background: radial-gradient(circle, rgba(87,89,255,.36), transparent 68%); }
.workflow-card { border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(31,27,43,.91), rgba(13,11,20,.92)); box-shadow: 0 30px 70px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(14px); }
.workflow-card--main { position: absolute; width: min(100%, 420px); right: 0; top: 1.35rem; padding: 1.35rem; border-radius: 20px; transform: rotate(2.2deg); }
.workflow-card__top { display: flex; align-items: center; gap: .5rem; color: #b6afc4; font-size: .63rem; font-weight: 700; letter-spacing: .12em; }.workflow-card__top .dots { margin-left: auto; letter-spacing: .08em; }
.workflow-card__brand { display: flex; gap: .85rem; align-items: center; margin: 1.5rem 0; }.workflow-card__brand img { border-radius: 12px; }.workflow-card__brand strong, .workflow-card--floating strong { display: block; color: #fff; font-size: .96rem; }.workflow-card__brand small, .workflow-card--floating small { display: block; margin-top: .18rem; color: #9d95ad; font-size: .72rem; }
.progress-label { display: flex; justify-content: space-between; color: #bcb6ca; font-size: .72rem; }.progress-label strong { color: #fff; }.progress { margin: .55rem 0 1.3rem; height: 6px; overflow: hidden; background: rgba(255,255,255,.1); border-radius: 10px; }.progress i { display: block; height: 100%; width: 72%; border-radius: inherit; background: linear-gradient(90deg,#8f70ff,#e754ba,#ff9868); }
.workflow-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }.workflow-grid div { padding: .75rem .55rem; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.025); }.workflow-grid b { display: block; color: #9e94ad; font-size: .68rem; }.workflow-grid span { display: block; margin-top: .24rem; color: #ebe8f2; font-size: .71rem; }.workflow-grid .is-done { border-color: rgba(218,100,211,.36); background: rgba(215,80,190,.1); }
.workflow-card--floating { position: absolute; left: .35rem; bottom: 1rem; display: flex; align-items: center; gap: .7rem; padding: .8rem 1.05rem; border-radius: 14px; transform: rotate(-4deg); }.floating-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: #ffd5f6; background: linear-gradient(135deg,#7f51fc,#e34db3); }.code-lines { position: absolute; right: 1rem; bottom: 0; width: 120px; transform: rotate(2deg); }.code-lines i { display: block; height: 3px; margin: .6rem 0; border-radius: 4px; background: linear-gradient(90deg,rgba(183,138,255,.85),transparent); }.code-lines i:nth-child(2) { width: 75%; margin-left: 1rem; }.code-lines i:nth-child(3) { width: 90%; }.code-lines i:nth-child(4) { width: 50%; margin-left: 2rem; }
.logo-strip { border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); }.logo-strip .shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; overflow: hidden; color: #948d9e; font: 650 .69rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }.logo-strip i { width: 4px; height: 4px; flex: 0 0 auto; border-radius: 50%; background: #d55abf; }
.services-v2 { padding-top: clamp(5rem, 11vw, 9rem); }.split-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 3rem; }.section-kicker { margin: 0 0 .8rem; color: #e174c8; font-size: .7rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }.split-heading h2, .process-v2 h2, .proof-copy h2, .final-cta h2 { margin: 0; color: #f7f5fb; font: 750 clamp(2.1rem,4vw,3.45rem)/1.02 var(--font-display); letter-spacing: -.055em; }.split-heading > p { max-width: 330px; margin: 0 0 .35rem; color: var(--muted-v2); line-height: 1.65; }
.service-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1rem; }.service-card { position: relative; display: flex; min-height: 305px; flex-direction: column; padding: 1.45rem; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: rgba(255,255,255,.025); transition: transform .2s,border-color .2s,background .2s; }.service-card:hover { transform: translateY(-5px); border-color: rgba(232,112,201,.5); background: rgba(255,255,255,.05); box-shadow: 0 20px 45px rgba(0,0,0,.18); }.service-card--feature { background: linear-gradient(145deg,rgba(109,58,190,.32),rgba(234,73,157,.14) 55%,rgba(255,255,255,.035)); }.service-card__number { color: #9a92a8; font: 700 .7rem var(--font-display); }.service-icon { display: grid; place-items: center; width: 45px; height: 45px; margin: auto 0 1.1rem; border-radius: 13px; color: #fff; font-size: 1.3rem; background: linear-gradient(135deg,rgba(137,99,255,.8),rgba(237,77,177,.75)); }.service-card:not(.service-card--feature) .service-icon { background: rgba(255,255,255,.09); }.service-card h3 { margin: 0; color: #fff; font: 700 1.35rem var(--font-display); }.service-card p { margin: .65rem 0 1.3rem; color: #aca5b7; font-size: .9rem; line-height: 1.55; }.service-card__link { margin-top: auto; color: #e9e3f3; font-size: .83rem; font-weight: 700; }.service-card__link b { margin-left: .4rem; color: #ef78cd; }
.process-v2 { padding-block: clamp(5rem, 11vw, 9rem); }.process-v2__grid, .proof-v2__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(3rem,9vw,10rem); }.body-copy { max-width: 490px; color: var(--muted-v2); line-height: 1.75; }.process-v2 .btn { margin-top: 1rem; }.process-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.11); }.process-list li { display: grid; grid-template-columns: 55px 1fr; gap: 1.1rem; padding: 1.28rem 0; border-bottom: 1px solid rgba(255,255,255,.11); }.process-list li > span { color: #df70ca; font: 700 .75rem var(--font-display); }.process-list h3 { margin: 0; color: #f6f3f8; font: 700 1.05rem var(--font-display); }.process-list p { margin: .4rem 0 0; color: #9e96aa; font-size: .88rem; }
.proof-v2 { padding-top: clamp(2rem,5vw,4rem); }.quote-panel { padding: clamp(1.7rem,4vw,3rem); border-radius: 20px; background: linear-gradient(145deg,#29133b,#13101d 72%); border: 1px solid rgba(233,117,201,.25); }.quote-mark { display: block; height: 2.6rem; color: #ed73cb; font: 4.4rem/.85 Georgia,serif; }.quote-panel blockquote { margin: 1rem 0 2rem; color: #faf7fc; font: 600 clamp(1.2rem,2.1vw,1.65rem)/1.4 var(--font-display); letter-spacing: -.025em; }.quote-by { display: flex; align-items: center; gap: .7rem; }.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: .76rem; font-weight: 700; background: linear-gradient(135deg,#ff9a61,#df54b9); }.quote-by strong,.quote-by small { display: block; }.quote-by strong { color: #f2edf5; font-size: .78rem; }.quote-by small { margin-top: .14rem; color: #a79ead; font-size: .68rem; }.check-list { margin: 1.6rem 0 0; padding: 0; list-style: none; }.check-list li { margin: .75rem 0; color: #d4cfdb; font-size: .9rem; }.check-list li::before { content: "✓"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: .65rem; border-radius: 50%; color: #f8c8ec; background: rgba(230,89,188,.18); font-size: .68rem; }
.final-cta { padding-top: clamp(5rem,11vw,9rem); }.final-cta .shell { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2rem,5vw,4rem); border: 1px solid rgba(255,255,255,.11); border-radius: 22px; background: radial-gradient(circle at 80% 20%,rgba(231,73,166,.24),transparent 30%),linear-gradient(120deg,#171126,#0f0d16); }.final-cta p:not(.section-kicker) { max-width: 550px; margin: 1rem 0 0; color: #ada5b5; }.home-v2 .site-footer { margin-top: clamp(5rem,11vw,9rem); border-top: 1px solid rgba(255,255,255,.1); background: rgba(2,2,5,.22); }.home-v2 .footer-brand p { max-width: 245px; margin: .9rem 0 0; color: #90899b; font-size: .82rem; }.home-v2 .footer-grid { grid-template-columns: 1.6fr .6fr .6fr; }.home-v2 .footer-bottom { border-top-color: rgba(255,255,255,.08); }
@media (max-width: 800px) { .home-v2 .site-header { padding-inline: 1.1rem; }.home-v2 .header-cta { display: none; }.hero-v2__grid,.process-v2__grid,.proof-v2__grid { grid-template-columns: 1fr; }.hero-v2__visual { max-width: 470px; width: 100%; margin: 0 auto; min-height: 350px; }.service-grid { grid-template-columns: 1fr; }.service-card { min-height: 250px; }.split-heading,.final-cta .shell { align-items: flex-start; flex-direction: column; }.logo-strip .shell { justify-content: flex-start; }.logo-strip i:nth-of-type(n+3),.logo-strip span:nth-of-type(n+4) { display: none; }.home-v2 .footer-grid { grid-template-columns: 1fr 1fr; }.footer-brand { grid-column: 1/-1; } }
@media (max-width: 480px) { .hero-v2 { padding-top: 3.3rem; }.hero-v2 h1 { font-size: 2.75rem; }.trust-row { gap: .7rem; }.trust-row div { padding-right: .7rem; }.trust-row dt { font-size: 1.25rem; }.trust-row dd { font-size: .65rem; }.workflow-card--main { right: 0; }.workflow-card--floating { left: 0; }.home-v2 .footer-grid { grid-template-columns: 1fr; }.footer-brand { grid-column: auto; } }

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg-base);
    padding-top: var(--header-h);
    overflow-x: hidden;
}

/* Ambient grid + glow (subtle, non-distracting) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 100% 80% at 50% -35%, rgba(123, 44, 254, 0.18), transparent 55%),
        radial-gradient(ellipse 55% 45% at 100% 10%, rgba(255, 75, 43, 0.1), transparent 50%),
        radial-gradient(ellipse 50% 40% at 0% 80%, rgba(209, 34, 227, 0.08), transparent 45%),
        linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-base) 45%, #020203 100%);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

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

img {
    max-width: 100%;
    height: auto;
}

/* —— Header —— */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.25rem;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--stroke);
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.brand-link .logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--stroke);
}

.brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--text);
}

.brand .accent {
    background: var(--gradient-logo);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.5rem;
}

.site-nav a {
    display: inline-block;
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: 999px;
    transition: color 0.15s, background 0.15s;
}

.site-nav a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

.site-nav a.is-active {
    color: #ffffff;
    background: var(--gradient-logo);
    box-shadow: 0 0 20px rgba(209, 34, 227, 0.25);
}

.header-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Account icon (replaces primary CTA in header) — same look on every page */
.header-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid transparent;
    color: #fff;
    background: var(--gradient-logo);
    box-shadow: 0 4px 20px rgba(123, 44, 254, 0.35);
    transition: filter 0.15s, box-shadow 0.15s, transform 0.1s;
}

.header-account:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 26px rgba(209, 34, 227, 0.45);
}

.header-account:active {
    transform: scale(0.97);
}

.header-account__icon {
    display: block;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}

.btn:active {
    transform: scale(0.98);
}

.btn--primary {
    background: var(--gradient-logo);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 24px rgba(123, 44, 254, 0.35);
}

.btn--primary:hover {
    filter: brightness(1.12);
    box-shadow: 0 6px 28px rgba(209, 34, 227, 0.4);
}

.btn--ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--stroke-strong);
}

.btn--ghost:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.25);
}

/* —— Layout —— */
.shell {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.section {
    padding: clamp(3rem, 8vw, 5rem) 0;
}

.section__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

.section__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.6rem;
}

.section__title {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 0 0.75rem;
    color: var(--text);
}

.section__lead {
    margin: 0;
    color: var(--text-muted);
    font-size: 1.05rem;
}

/* —— Hero —— */
.hero {
    padding: clamp(3rem, 10vw, 6rem) 0 4rem;
    text-align: center;
}

.hero__inner {
    position: relative;
    padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
    border-radius: calc(var(--radius) + 8px);
    border: 1px solid var(--stroke);
    background: var(--bg-card);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.hero__inner::before {
    content: "";
    position: absolute;
    top: -40%;
    left: 50%;
    width: 120%;
    height: 80%;
    transform: translateX(-50%);
    background: radial-gradient(
        circle,
        rgba(123, 44, 254, 0.16) 0%,
        rgba(209, 34, 227, 0.08) 40%,
        transparent 65%
    );
    pointer-events: none;
}

.hero__badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #f8e8ff;
    background: linear-gradient(
        135deg,
        rgba(123, 44, 254, 0.2),
        rgba(209, 34, 227, 0.12)
    );
    border: 1px solid rgba(209, 34, 227, 0.35);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}

.hero__title {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 0 0 1rem;
}

.hero__title .line {
    display: block;
}

.hero__title em {
    font-style: normal;
    background: var(--gradient-logo);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.hero__desc {
    position: relative;
    max-width: 520px;
    margin: 0 auto 1.75rem;
    color: var(--text-muted);
    font-size: 1.1rem;
}

.hero__actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}

.hero__meta {
    position: relative;
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.hero__meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hero__meta svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

/* —— Grids & cards —— */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.card {
    text-align: left;
    padding: 1.35rem 1.4rem;
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    background: rgba(12, 16, 23, 0.65);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

/* Centered marketing cards (testimonials, nav tiles, portfolio teasers) */
.card--center {
    text-align: center;
}

.card--center .card__icon {
    margin-left: auto;
    margin-right: auto;
}

.reviews-grid {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
}

.reviews-grid .card {
    max-width: 720px;
}

.card:hover {
    border-color: rgba(209, 34, 227, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(123, 44, 254, 0.12);
}

.card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        145deg,
        rgba(123, 44, 254, 0.2),
        rgba(255, 140, 0, 0.1)
    );
    color: #e8b4ff;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(209, 34, 227, 0.25);
}

.card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--text);
}

.card p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.card__link {
    display: inline-flex;
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--gradient-logo);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.card__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.stat {
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    background: rgba(7, 9, 13, 0.5);
}

.stat__num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    background: var(--gradient-logo);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.stat__label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.quote {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0 0 1rem;
    font-style: italic;
}

.quote-by {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
}

.section--muted {
    background: linear-gradient(180deg, transparent, rgba(45, 212, 191, 0.03));
    border-top: 1px solid var(--stroke);
    border-bottom: 1px solid var(--stroke);
}

/* —— Legal (Privacy / Terms) —— */
.page-legal .hero {
    padding-bottom: 1.5rem;
}

.page-legal .legal-wrap {
    max-width: 720px;
    margin: 0 auto 4rem;
}

.page-legal .legal-panel {
    padding: 2rem 1.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--stroke-strong);
    background: var(--bg-card);
    box-shadow: var(--shadow);
}

.page-legal .legal-panel__meta {
    text-align: center;
    margin: 0 0 2rem;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.page-legal .legal-section {
    margin-bottom: 1.75rem;
}

.page-legal .legal-section:last-child {
    margin-bottom: 0;
}

.page-legal .legal-section h2 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.65rem;
    color: var(--text);
}

.page-legal .legal-section p,
.page-legal .legal-section li {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 0.65rem;
}

.page-legal .legal-section ul {
    margin: 0.35rem 0 0;
    padding-left: 1.35rem;
}

.page-legal .legal-section li {
    margin-bottom: 0.5rem;
}

.page-legal .legal-section a {
    color: var(--logo-magenta);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.page-legal .legal-section a:hover {
    color: var(--logo-orange);
}

.page-legal .legal-closing {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--stroke);
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* —— Form shell (login / order panel style) —— */
.page-form .hero {
    padding-bottom: 2rem;
}

.form-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
    max-width: 920px;
    margin: 0 auto 4rem;
}

.form-shell--single {
    grid-template-columns: 1fr;
    max-width: 680px;
}

.form-aside {
    padding: 2rem;
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    background: linear-gradient(160deg, rgba(45, 212, 191, 0.08), rgba(7, 9, 13, 0.9));
}

.form-aside h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
}

.form-aside p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.form-aside ul {
    margin: 1.25rem 0 0;
    padding-left: 1.1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.form-aside li {
    margin-bottom: 0.5rem;
}

.form-panel {
    padding: 2rem;
    border-radius: var(--radius);
    border: 1px solid var(--stroke-strong);
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
}

.form-shell--single .form-panel {
    width: 100%;
}

.form-panel__title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.form-panel__sub {
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.field {
    margin-bottom: 1rem;
    text-align: left;
}

.field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.input,
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: rgba(7, 9, 13, 0.65);
    border: 1px solid var(--stroke-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
    text-align: left;
}

.input::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(139, 149, 168, 0.65);
}

.input:focus,
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: rgba(45, 212, 191, 0.55);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
}

.contact-form textarea {
    min-height: 140px;
    resize: vertical;
}

.form-actions {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* —— Footer —— */
.site-footer {
    padding: 3rem 0 2rem;
    border-top: 1px solid var(--stroke);
    background: rgba(7, 9, 13, 0.85);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    text-align: left;
}

.footer-brand p {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 280px;
}

.footer-col h4 {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 1rem;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col a {
    display: block;
    padding: 0.25rem 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.footer-col a:hover {
    color: var(--accent);
}

.footer-bottom {
    padding-top: 1.5rem;
    border-top: 1px solid var(--stroke);
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

.footer-bottom__links {
    margin: 0 0 0.5rem;
}

.footer-bottom__links a {
    color: var(--text-muted);
    font-weight: 600;
}

.footer-bottom__links a:hover {
    color: var(--accent);
}

/* —— Cookie banner —— */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    padding: 1rem 1.25rem;
    background: rgba(7, 9, 13, 0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--stroke-strong);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4);
}

.cookie-banner[hidden] {
    display: none !important;
}

.cookie-banner__inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cookie-banner p {
    margin: 0;
    flex: 1;
    min-width: 220px;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: left;
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* —— Login page —— */
.page-login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.login-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 4rem;
}

.login-panel {
    width: min(420px, 100%);
    padding: 2rem 1.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--stroke-strong);
    background: var(--bg-card);
    box-shadow: var(--shadow);
    text-align: center;
}

.login-panel__intro {
    margin-bottom: 1.5rem;
}

.login-panel__title {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    letter-spacing: -0.03em;
}

.login-panel__lead {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.login-notice {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    font-size: 0.88rem;
    color: #fde68a;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: var(--radius-sm);
    text-align: left;
}

.oauth-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--stroke-strong);
    background: rgba(7, 7, 10, 0.85);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.oauth-btn:hover {
    border-color: rgba(209, 34, 227, 0.4);
    background: rgba(123, 44, 254, 0.08);
}

.oauth-btn:active {
    transform: scale(0.99);
}

.oauth-btn__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.oauth-btn--discord:hover {
    border-color: #5865f2;
}

.oauth-btn--google:hover {
    border-color: rgba(66, 133, 244, 0.6);
}

.oauth-btn--github:hover {
    border-color: rgba(255, 255, 255, 0.35);
}

.oauth-btn--microsoft:hover {
    border-color: rgba(0, 164, 239, 0.5);
}

.login-footnote {
    margin: 1.5rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.login-footnote a {
    color: var(--logo-magenta);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.login-footnote a:hover {
    color: var(--logo-orange);
}

.login-back {
    margin: 1rem 0 0;
    font-size: 0.9rem;
}

.login-back a {
    color: var(--logo-magenta);
    font-weight: 600;
}

.login-back a:hover {
    color: var(--logo-orange);
}

.site-footer--minimal {
    padding: 1.5rem 0;
}

/* Post–OAuth success (main.js) */
.signin-toast {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2100;
    margin: 0;
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #f0f2f8;
    background: rgba(12, 12, 18, 0.95);
    border: 1px solid rgba(209, 34, 227, 0.45);
    border-radius: 999px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(123, 44, 254, 0.15);
    animation: signin-toast-in 0.35s ease-out;
}

@keyframes signin-toast-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* —— Pricing cards —— */
.price-tag {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

/* Page hero variants */
.hero__inner--compact {
    padding: clamp(2rem, 5vw, 3rem) !important;
}

.hero__title--page {
    font-size: clamp(1.85rem, 4.5vw, 2.75rem);
    margin-bottom: 0.75rem;
}

.section__head--tight {
    margin-bottom: 2rem;
}

.hero__desc--narrow {
    max-width: 560px;
}

.text-center-muted {
    text-align: center;
    margin-top: 2.5rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.text-center-muted a {
    color: var(--accent);
    font-weight: 600;
}

.card ul {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.card--highlight {
    border-color: rgba(45, 212, 191, 0.35);
    box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.15);
}

/* —— Mobile navigation —— */
.nav-toggle {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--stroke-strong);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.nav-toggle:focus-visible {
    outline: 2px solid rgba(209, 34, 227, 0.65);
    outline-offset: 2px;
}

.nav-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(209, 34, 227, 0.35);
}

.nav-toggle__icon {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.2s ease, top 0.2s ease;
}

.nav-toggle__icon::before {
    top: -7px;
}

.nav-toggle__icon::after {
    top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
    top: 0;
    transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
    top: 0;
    transform: rotate(-45deg);
}

body.nav-open {
    overflow: hidden;
}

/* —— Responsive —— */
@media (max-width: 900px) {
    .form-shell {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    :root {
        --header-h: 60px;
    }

    .nav-toggle {
        display: inline-flex;
        order: 2;
        margin-left: auto;
    }

    .site-header {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        height: var(--header-h);
        padding: 0 1rem;
    }

    .brand-link {
        order: 1;
        min-width: 0;
    }

    .brand-link .brand {
        font-size: 1.05rem;
    }

    .site-nav {
        order: 4;
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        z-index: 999;
        max-height: min(70vh, calc(100dvh - var(--header-h)));
        overflow-y: auto;
        margin: 0;
        padding: 0.75rem 1rem 1.25rem;
        background: rgba(7, 9, 13, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--stroke-strong);
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    .site-header.nav-open .site-nav {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .site-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
    }

    .site-nav a {
        display: block;
        padding: 0.65rem 0.85rem;
        border-radius: var(--radius-sm);
    }

    .header-actions {
        order: 3;
        width: auto;
    }

    .page-legal .legal-panel {
        padding: 1.35rem 1.1rem;
    }

    .form-panel,
    .form-aside {
        padding: 1.5rem 1.15rem;
    }

    .hero__actions {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero__actions .btn {
        width: 100%;
    }

    /* Reduces iOS zoom on focus */
    .input,
    .contact-form input,
    .contact-form textarea {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .hero__inner {
        padding: 1.75rem 1.25rem;
    }

    .cookie-banner__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-banner__actions {
        justify-content: stretch;
    }

    .cookie-banner__actions .btn {
        flex: 1;
        min-width: 0;
    }

    .signin-toast {
        max-width: calc(100vw - 2rem);
        white-space: normal;
        text-align: center;
    }
}

/* —— File sharing —— */
select.input {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.2rem;
}

.share-auth {
    margin-bottom: 1.25rem;
}

.share-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--stroke-strong);
    border-radius: var(--radius-sm);
    background: rgba(7, 9, 13, 0.65);
    text-align: left;
}

.share-user div {
    flex: 1;
    min-width: 0;
}

.share-user strong {
    display: block;
    font-size: 0.95rem;
}

.share-user span {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    word-break: break-all;
}

.share-user__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.share-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 160px;
    padding: 1.25rem;
    border: 1px dashed var(--stroke-strong);
    border-radius: var(--radius);
    background: rgba(7, 9, 13, 0.45);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}

.share-drop:hover,
.share-drop.is-over {
    border-color: rgba(209, 34, 227, 0.55);
    background: rgba(123, 44, 254, 0.08);
}

.share-drop__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.share-drop {
    position: relative;
}

.share-drop__title {
    font-weight: 600;
    color: var(--text);
}

.share-drop__meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.share-progress {
    margin: 0.5rem 0 1rem;
}

.share-progress__track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.share-progress__bar {
    height: 8px;
    width: 0;
    border-radius: 999px;
    background: var(--gradient-logo);
    transition: width 0.15s ease;
}

.share-progress__text {
    margin: 0.45rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.share-result {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--stroke);
}

.share-result__row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.share-result__row .input {
    flex: 1;
}

.share-player video,
.share-player audio,
.share-player img,
.share-player iframe {
    display: block;
    width: 100%;
    max-height: 70vh;
    border: 0;
    border-radius: var(--radius-sm);
    background: #000;
}

.share-player img {
    object-fit: contain;
    background: rgba(0, 0, 0, 0.35);
}

.share-player iframe {
    min-height: 70vh;
    background: #111;
}

.share-file-note {
    margin: 0;
    padding: 1rem;
    color: var(--text-muted);
    text-align: center;
}

.share-byline {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.share-view-meta {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.share-view-meta p {
    margin: 0 0 0.35rem;
}

@media (max-width: 768px) {
    .share-result__row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* —— Portfolio work cards —— */
.work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.work-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    background: rgba(12, 16, 23, 0.65);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.work-card:hover {
    border-color: rgba(209, 34, 227, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(123, 44, 254, 0.12);
}

.work-card__slides {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0b0b10;
}

.work-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.45s ease;
    background-size: cover;
    background-position: center;
}

.work-slide.is-active {
    opacity: 1;
}

.work-card__preview,
.work-lightbox__preview {
    width: 100%;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
}

.work-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.9rem 1rem 0.85rem;
}

.work-card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
}

.work-card__author,
.work-lightbox__author {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.work-card__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.preview-bot {
    background:
        linear-gradient(180deg, rgba(88, 101, 242, 0.35), transparent 55%),
        linear-gradient(90deg, #1e1f22 0 28%, #313338 28%);
}

.preview-bot-2 {
    background:
        linear-gradient(180deg, #5865f2 0 22%, #2b2d31 22%),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 10px, transparent 10px 22px);
}

.preview-bot-3 {
    background:
        radial-gradient(circle at 70% 30%, rgba(88, 101, 242, 0.5), transparent 45%),
        linear-gradient(90deg, #232428, #313338);
}

.preview-api {
    background:
        linear-gradient(135deg, rgba(123, 44, 254, 0.45), rgba(209, 34, 227, 0.2)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 12px, transparent 12px 24px),
        #0c0c12;
}

.preview-api-2 {
    background:
        linear-gradient(180deg, rgba(209, 34, 227, 0.28), transparent 60%),
        linear-gradient(90deg, #120818 18%, #1a1024 18%);
}

.preview-api-3 {
    background:
        repeating-linear-gradient(135deg, rgba(123, 44, 254, 0.2) 0 8px, transparent 8px 16px),
        #0a0a10;
}

.preview-mc {
    background:
        linear-gradient(180deg, #5a9f3a 0 38%, #8b5a2b 38% 48%, #3d6b1f 48%);
}

.preview-mc-2 {
    background:
        linear-gradient(180deg, #87ceeb 0 32%, #5a9f3a 32% 70%, #6b4423 70%);
}

.preview-mc-3 {
    background:
        linear-gradient(90deg, #3d6b1f 0 40%, #2e4a16 40%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0 16px, transparent 16px 32px);
}

.preview-erlc {
    background:
        radial-gradient(circle at 30% 40%, rgba(255, 140, 0, 0.45), transparent 50%),
        linear-gradient(160deg, #1a2230, #0b0d12);
}

.preview-erlc-2 {
    background:
        linear-gradient(180deg, #2a3344 0 30%, #11161f 30%),
        radial-gradient(circle at 80% 70%, rgba(255, 75, 43, 0.35), transparent 40%);
}

.preview-erlc-3 {
    background:
        linear-gradient(115deg, #0d1118, #243044 55%, #ff8c00 160%);
}

.preview-staff {
    background:
        linear-gradient(180deg, rgba(209, 34, 227, 0.25), transparent 50%),
        linear-gradient(90deg, #14141a 0 22%, #1c1c24 22%);
}

.preview-staff-2 {
    background:
        repeating-linear-gradient(180deg, #1c1c24 0 14px, #15151b 14px 28px);
}

.preview-staff-3 {
    background:
        linear-gradient(180deg, #d122e3 0 16%, #121218 16%);
}

.preview-tickets {
    background:
        linear-gradient(180deg, #5865f2 0 18%, #2b2d31 18% 100%);
}

.preview-tickets-2 {
    background:
        linear-gradient(90deg, #1e1f22 0 30%, #313338 30%),
        linear-gradient(180deg, rgba(88, 101, 242, 0.35), transparent 50%);
}

.preview-tickets-3 {
    background:
        radial-gradient(circle at 20% 80%, rgba(88, 101, 242, 0.4), transparent 40%),
        #2b2d31;
}

.work-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(10px);
}

.work-lightbox[hidden] {
    display: none !important;
}

.work-lightbox__panel {
    position: relative;
    width: min(820px, 100%);
    max-height: min(90vh, 900px);
    overflow: auto;
    padding: 1.25rem;
    border-radius: calc(var(--radius) + 6px);
    border: 1px solid var(--stroke-strong);
    background: var(--bg-card);
    box-shadow: var(--shadow);
}

.work-lightbox__close {
    position: absolute;
    top: 0.7rem;
    right: 0.8rem;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.work-lightbox__stage {
    position: relative;
    margin-bottom: 1rem;
}

.work-lightbox__preview {
    border-radius: var(--radius-sm);
    aspect-ratio: 16 / 9;
    margin: 0;
}

.work-lightbox__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.work-lightbox__arrow[hidden] {
    display: none !important;
}

.work-lightbox__arrow--prev {
    left: 0.6rem;
}

.work-lightbox__arrow--next {
    right: 0.6rem;
}

.work-lightbox__title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    margin: 0 0 0.5rem;
}

.work-lightbox__desc {
    margin: 0 0 1rem;
    color: var(--text-muted);
}

body.lightbox-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .work-grid {
        grid-template-columns: 1fr;
    }
}