/* Global layer: reset, brand tokens, the floating chrome, intro/closing screens and the section frame.
   Every style section owns its look in Components/Styles/*.razor.css (CSS isolation). */

:root {
    /* Official Neural Technology palette, used only by chrome / intro / closing. */
    --nt-ink: #120e2b;
    --nt-indigo: #261560;
    --nt-violet: #5a2a9e;
    --nt-orchid: #834aab;
    --nt-lilac: #9a5bb2;
    --nt-paper: #f7f5fb;
    --nt-grad: linear-gradient(115deg, #261560 0%, #5a2a9e 38%, #8f53ab 70%, #9a5bb2 100%);
    --nt-font: "Manrope", "Vazirmatn", system-ui, sans-serif;
    --gutter: clamp(1rem, 4vw, 3rem);
    color-scheme: light;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--nt-font);
    background: var(--nt-paper);
    color: var(--nt-ink);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure, pre { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }

/* Arabic and Persian letters must join: never track them out. */
:lang(ar), :lang(fa), [dir="rtl"] * { letter-spacing: 0 !important; }

:focus-visible { outline: 3px solid #9a5bb2; outline-offset: 3px; }

.skip {
    position: fixed;
    inset-inline-start: 1rem;
    top: -4rem;
    z-index: 100;
    padding: .7rem 1rem;
    background: var(--nt-ink);
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ---------- Section frame ---------- */

.style {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    overflow: clip;
    isolation: isolate;
    scroll-margin-top: 0;
}
/* Style components render one root element that fills the section. */
.style > * { min-height: inherit; }

/* No content-visibility here on purpose: it breaks in-page anchor jumps (#hud …) because offscreen
   sections report placeholder heights. Offscreen cost is kept low by pausing animations instead. */

/* ---------- Floating chrome ---------- */

.chrome {
    position: fixed;
    z-index: 50;
    top: max(.75rem, env(safe-area-inset-top));
    inset-inline: var(--gutter);
    display: flex;
    align-items: center;
    gap: .75rem;
    pointer-events: none;
    font-family: var(--nt-font);
    font-size: .8125rem;
}
.chrome > * { pointer-events: auto; }

.chrome__brand,
.chrome__now,
.chrome__langs > summary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2.5rem;
    padding: 0 .9rem;
    border-radius: 999px;
    background: rgba(18, 14, 43, .82);
    color: #f4f1ff;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
    text-decoration: none;
    transition: background-color .25s, color .25s;
}
.chrome[data-on="dark"] .chrome__brand,
.chrome[data-on="dark"] .chrome__now,
.chrome[data-on="dark"] .chrome__langs > summary {
    background: rgba(247, 245, 251, .9);
    color: var(--nt-ink);
    box-shadow: 0 0 0 1px rgba(18, 14, 43, .08);
}

.chrome__brand { padding-inline-start: .55rem; font-weight: 700; }
.chrome__mark { width: 1.6rem; height: 1.6rem; }
.chrome__now { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.chrome__now:empty, .chrome__now:not(:has(span:not(:empty))) { visibility: hidden; }
.chrome__counter { opacity: .6; }
.chrome__style { font-weight: 600; }

.chrome__langs { position: relative; }
.chrome__langs > summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    letter-spacing: .04em;
}
.chrome__langs > summary::-webkit-details-marker { display: none; }
.chrome__langs > summary::after { content: "▾"; font-size: .7em; opacity: .7; }
.chrome__langs ul {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + .4rem);
    min-width: 11rem;
    padding: .4rem;
    border-radius: 1rem;
    background: var(--nt-ink);
    box-shadow: 0 18px 40px rgba(18, 14, 43, .35);
}
.chrome__langs a {
    display: block;
    padding: .55rem .8rem;
    border-radius: .6rem;
    color: #f4f1ff;
    text-decoration: none;
}
.chrome__langs a:hover, .chrome__langs a:focus-visible { background: rgba(154, 91, 178, .3); }
.chrome__langs a[aria-current] { background: var(--nt-grad); }

@media (max-width: 560px) {
    .chrome__name { display: none; }
    .chrome__brand { padding-inline-end: .55rem; }
    .chrome__counter { display: none; }
}

/* ---------- Intro (brand palette) ---------- */

.intro {
    min-height: 100svh;
    display: grid;
    align-items: center;
    padding: calc(5rem + env(safe-area-inset-top)) var(--gutter) 3rem;
    background:
        radial-gradient(60rem 40rem at 85% 10%, rgba(154, 91, 178, .16), transparent 60%),
        radial-gradient(50rem 40rem at 0% 100%, rgba(90, 42, 158, .12), transparent 60%),
        var(--nt-paper);
}
.intro__inner {
    width: min(72rem, 100%);
    margin-inline: auto;
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
}
.intro__logo { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.intro__mark { width: clamp(4.5rem, 11vw, 7.5rem); height: auto; }
.intro__wordmark { width: clamp(15rem, 44vw, 30rem); height: auto; }
.intro__wordmark--small { width: 11rem; }
.intro__title {
    font-size: clamp(2.6rem, 8vw, 6.5rem);
    line-height: .95;
    font-weight: 800;
    letter-spacing: -.035em;
    background: var(--nt-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-block-end: .08em;
}
.intro__role { font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 700; color: var(--nt-violet); }
.intro__lead { max-width: 40rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #3a3358; }
.intro__index { border-top: 1px solid rgba(38, 21, 96, .15); padding-top: 1.25rem; }
.intro__index-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nt-orchid);
    margin-bottom: .75rem;
}
.intro__index ol {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(10rem, 45%), 1fr));
    gap: .15rem 1.5rem;
}
.intro__index a {
    display: flex;
    gap: .6rem;
    padding: .3rem 0;
    text-decoration: none;
    color: var(--nt-indigo);
    font-weight: 600;
}
.intro__index a:hover { color: var(--nt-violet); }
.intro__n { font-variant-numeric: tabular-nums; color: var(--nt-lilac); font-weight: 500; }
.intro__hint {
    justify-self: start;
    text-decoration: none;
    font-weight: 700;
    color: var(--nt-violet);
}
.intro__hint span { display: inline-block; animation: nt-nudge 1.6s ease-in-out infinite; }
@keyframes nt-nudge { 50% { transform: translateY(.3rem); } }

/* ---------- Closing (brand palette) ---------- */

.closing {
    min-height: 100svh;
    display: grid;
    align-items: center;
    padding: 6rem var(--gutter) 2rem;
    background:
        radial-gradient(50rem 30rem at 100% 0%, rgba(154, 91, 178, .28), transparent 60%),
        radial-gradient(40rem 30rem at 0% 100%, rgba(90, 42, 158, .3), transparent 60%),
        var(--nt-ink);
    color: #efeafc;
}
.closing__inner { width: min(72rem, 100%); margin-inline: auto; display: grid; gap: 1.75rem; }
.closing__title {
    font-size: clamp(2.2rem, 6.5vw, 5rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.03em;
}
.closing__lead { max-width: 36rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #c9bfe6; }
.closing__contact { display: flex; flex-wrap: wrap; gap: .75rem; }
.closing__cta {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    padding: 1rem 1.4rem;
    border-radius: 999px;
    background: var(--nt-grad);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
}
.closing__cta--alt { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(239, 234, 252, .4); }
.closing__cta:hover { filter: brightness(1.12); }
.closing__team-title {
    margin-top: 1.5rem;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nt-lilac);
}
.closing__people { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.closing__person {
    display: grid;
    gap: .35rem;
    align-content: start;
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
    text-decoration: none;
    transition: background-color .2s;
}
.closing__person:hover { background: rgba(154, 91, 178, .16); }
.closing__mark { width: 2.5rem; height: auto; margin-bottom: .5rem; }
.closing__person-name { font-size: 1.35rem; font-weight: 800; }
.closing__person-role { font-weight: 700; color: #d6b8ec; }
.closing__person-desc { color: #b9aed8; }
.closing__person-link { margin-top: .5rem; font-weight: 700; color: #fff; justify-self: start; }
[dir="rtl"] .closing__person-link { justify-self: end; }
.closing__legal {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    align-items: center;
    font-size: .85rem;
    color: #a69bc8;
}
.closing__legal nav { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.closing__legal a { text-decoration: none; }
.closing__legal a:hover, .closing__legal a[aria-current] { color: #fff; }
.closing__top { margin-inline-start: auto; }

/* ---------- 404 / error ---------- */

.notfound {
    min-height: 100svh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1rem;
    padding: var(--gutter);
    text-align: center;
    background: var(--nt-ink);
    color: #efeafc;
}
.notfound__mark { width: 5rem; color: var(--nt-lilac); }
.notfound__code { font-size: clamp(4rem, 15vw, 9rem); font-weight: 800; line-height: 1; background: var(--nt-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound h1 { font-size: clamp(1.2rem, 3vw, 1.8rem); }
.notfound a { font-weight: 700; color: #d6b8ec; }

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}