/* ============================================
   NEOMINDS SA — Design System
   Swiss IT Consultancy · AI-Augmented
   ============================================ */

/* --- Brand Fonts (self-hosted) --- */
@font-face {
    font-family: 'Eurostile Extended';
    src: url('../fonts/EurostileExtendedBlack.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neuropol';
    src: url('../fonts/Neuropol.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- Tokens --- */
:root {
    --nm-void: #080E1A;
    --nm-deep: #0C1425;
    --nm-navy: #111B32;
    --nm-slate: #1C2A4A;
    --nm-muted: #6B7A99;
    --nm-silver: #9CA8C2;
    --nm-light: #E8ECF4;
    --nm-ice: #F4F6FA;
    --nm-white: #FFFFFF;
    
    --nm-green: #24CEAB;
    --nm-green-dim: #1BA88B;
    --nm-green-glow: rgba(36, 206, 171, 0.15);
    --nm-blue: #093C88;
    --nm-blue-dim: rgba(9, 60, 136, 0.12);
    
    --font-display: 'Eurostile Extended', 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'Neuropol', 'JetBrains Mono', monospace;
    
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    
    --max-w: 1200px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
}


/* Smooth transitions between themes */
body, .nav, .service-card, .news-card, .job-card, .about__card,
.form-group input, .form-group textarea, h1, h2, h3 {
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--nm-navy);
    background: var(--nm-white);
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* --- Typography --- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nm-green);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.eyebrow::before {
    content: '';
    width: 2rem;
    height: 1px;
    background: var(--nm-green);
}

/* --- Navigation --- */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.25rem 0;
    background: var(--nm-void);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s var(--ease-out);
}

.nav.scrolled {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--nm-light);
    padding: 0.75rem 0;
}

.nav.scrolled .nav__link { color: var(--nm-navy); }
.nav.scrolled .nav__link:hover { color: var(--nm-green-dim); }

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.nav__logo {
    position: relative;
    display: block;
    width: 287px;
    height: 44px;
    z-index: 1001;
}

/* Both logo variants are stacked in the exact same box (absolute, same
   size) and crossfade via opacity, instead of display:none/block, so
   there's no size/position jump when switching between them. */
.nav__logo-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.25s ease;
}

/* Nav sits over a dark background when unscrolled and a white one once
   scrolled - crossfade between the white and color logo variants to match. */
.nav__logo-img.logo-color { opacity: 0; }
.nav.scrolled .nav__logo-img.logo-white { opacity: 0; }
.nav.scrolled .nav__logo-img.logo-color { opacity: 1; }

.footer__brand .nav__logo {
    width: 274px;
    height: 42px;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
}

.nav__link {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s;
    position: relative;
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--nm-green);
    transition: width 0.3s var(--ease-out);
}

.nav__link:hover,
.nav__link.active { color: var(--nm-white); }
.nav__link.active::after,
.nav__link:hover::after { width: 100%; }
.nav.scrolled .nav__link.active { color: var(--nm-green-dim); }

.nav__lang {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s;
}

.nav__lang:hover {
    border-color: var(--nm-green);
    color: var(--nm-green);
}

.nav.scrolled .nav__lang {
    border-color: var(--nm-light);
    color: var(--nm-navy);
}

.nav.scrolled .nav__lang:hover {
    border-color: var(--nm-green);
    color: var(--nm-green-dim);
}

/* Shown only to a visitor whose browser has logged into the admin
   panel before (see setAdminHintCookie() in includes/functions.php) -
   a shortcut, not an access control, so it's just a styled link. */
.nav__admin {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    background: var(--nm-green);
    color: var(--nm-navy);
    white-space: nowrap;
    transition: all 0.3s;
}

.nav__admin:hover {
    background: var(--nm-green-dim);
    color: var(--nm-white);
}

.nav.scrolled .nav__admin {
    background: var(--nm-navy);
    color: var(--nm-white);
}

.nav.scrolled .nav__admin:hover {
    background: var(--nm-blue);
}

/* Mobile hamburger */
.nav__hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    z-index: 1001;
    padding: 4px;
}

.nav__hamburger span {
    width: 24px;
    height: 2px;
    background: var(--nm-white);
    border-radius: 2px;
    transition: all 0.3s var(--ease-out);
}

.nav.scrolled .nav__hamburger span { background: var(--nm-navy); }

.nav__hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- Hero Section --- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--nm-void);
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    opacity: 0.5;
}

.hero__bg canvas {
    width: 100%;
    height: 100%;
}

.hero__gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 70% 40%, rgba(35, 206, 170, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 20% 60%, rgba(11, 56, 140, 0.06) 0%, transparent 70%),
        linear-gradient(180deg, transparent 60%, var(--nm-void));
}

.hero__content {
    position: relative;
    z-index: 2;
    padding: 8rem 0 6rem;
}

.hero__tagline {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nm-green);
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s var(--ease-out) 0.2s forwards;
}

.hero h1 {
    color: var(--nm-white);
    margin-bottom: 1.5rem;
    max-width: 700px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s var(--ease-out) 0.4s forwards;
}

.hero__subtitle {
    font-size: 1.15rem;
    color: var(--nm-silver);
    max-width: 560px;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s var(--ease-out) 0.6s forwards;
}

.hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s var(--ease-out) 0.8s forwards;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.85rem 1.75rem;
    border-radius: 6px;
    transition: all 0.3s var(--ease-out);
}

.btn--primary {
    background: var(--nm-green);
    color: var(--nm-void);
}

.btn--primary:hover {
    background: color-mix(in srgb, var(--nm-green) 65%, white);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(35, 206, 170, 0.3);
}

.btn--outline {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--nm-white);
}

.btn--outline:hover {
    border-color: var(--nm-green);
    color: var(--nm-green);
}

.btn--dark {
    background: var(--nm-navy);
    color: var(--nm-white);
}

.btn--dark:hover {
    background: var(--nm-slate);
    transform: translateY(-2px);
}

.btn--ghost {
    color: var(--nm-green-dim);
    font-weight: 600;
    padding: 0.5rem 0;
}

.btn--ghost:hover { color: var(--nm-blue); }

.btn--ghost svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s;
}

.btn--ghost:hover svg { transform: translateX(4px); }

/* --- Sections --- */
.section {
    padding: clamp(4rem, 8vw, 8rem) 0;
}

.section--dark {
    background: var(--nm-void);
    color: var(--nm-white);
}

.section--dark .eyebrow { color: var(--nm-green); }
.section--dark h2 { color: var(--nm-white); }

.section--ice {
    background: var(--nm-ice);
}

.section__header {
    max-width: 640px;
    margin-bottom: 4rem;
}

.section__header h2 {
    margin-bottom: 1rem;
}

.section__header p {
    font-size: 1.1rem;
    color: var(--nm-muted);
    line-height: 1.7;
}

.section--dark .section__header p { color: var(--nm-silver); }

/* --- About --- */
.about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.about__text p {
    margin-bottom: 1.25rem;
    color: var(--nm-muted);
    font-size: 1.05rem;
}

.about__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--nm-light);
}

.stat__number {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--nm-green-dim);
    line-height: 1;
    margin-bottom: 0.35rem;
}

.stat__label {
    font-size: 0.8rem;
    color: var(--nm-muted);
    line-height: 1.4;
}

.about__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 400px;
}

.about__orb {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--nm-green), var(--nm-blue));
    opacity: 0.12;
    filter: blur(60px);
    position: absolute;
}

.about__card {
    position: relative;
    background: var(--nm-white);
    border: 1px solid var(--nm-light);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}

.about__card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--nm-green-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: var(--nm-green-dim);
}

.about__card h4 {
    font-family: var(--font-display);
    margin-bottom: 0.5rem;
    color: var(--nm-navy);
}

.about__card p {
    font-size: 0.9rem;
    color: var(--nm-muted);
    line-height: 1.6;
}

.about__card p + p {
    margin-top: 0.85rem;
}

/* The core-pillar tile: dark brand gradient (vs. the plain white card
   above it) so it visually leads, not just another feature card. */
.about__card--featured {
    background: linear-gradient(150deg, var(--nm-navy) 0%, var(--nm-slate) 100%);
    border: none;
    box-shadow: 0 24px 70px rgba(9, 60, 136, 0.28);
}

.about__card--featured .about__card-icon {
    background: rgba(36, 206, 171, 0.18);
    color: var(--nm-green);
}

.about__card--featured h4 {
    color: var(--nm-white);
}

.about__card--featured .about__card-lead {
    font-weight: 600;
    color: var(--nm-white);
}

.about__card--featured p {
    color: rgba(232, 236, 244, 0.75);
}

/* --- Services Grid --- */
.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.service-card {
    background: var(--nm-white);
    border: 1px solid var(--nm-light);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.4s var(--ease-out);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--nm-green), var(--nm-blue));
    opacity: 0;
    transition: opacity 0.4s;
}

.service-card:hover {
    border-color: transparent;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.service-card:hover::before { opacity: 1; }

.service-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--nm-green-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: var(--nm-green-dim);
    font-size: 1.2rem;
}

.service-card h3 {
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
    color: var(--nm-navy);
}

.service-card p {
    font-size: 0.9rem;
    color: var(--nm-muted);
    line-height: 1.65;
}

/* --- AI Difference Section --- */
.ai-section {
    position: relative;
}

.ai-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.ai-section__content h2 {
    margin-bottom: 1.25rem;
}

.ai-section__content > p {
    color: var(--nm-silver);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.ai-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--nm-light);
    line-height: 1.5;
}

.ai-list__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--nm-green-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    color: var(--nm-green);
    font-size: 0.7rem;
}

.ai-section__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-graphic {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1;
    position: relative;
}

.ai-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(35, 206, 170, 0.15);
    animation: spin 20s linear infinite;
}

.ai-ring:nth-child(1) { inset: 0; }
.ai-ring:nth-child(2) { inset: 15%; animation-direction: reverse; animation-duration: 15s; border-color: rgba(11, 56, 140, 0.12); }
.ai-ring:nth-child(3) { inset: 30%; animation-duration: 25s; }

.ai-ring__dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nm-green);
    box-shadow: 0 0 12px var(--nm-green);
}

.ai-ring__dot:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, -50%); }
.ai-ring__dot:nth-child(2) { bottom: 0; left: 50%; transform: translate(-50%, 50%); }

.ai-core {
    position: absolute;
    inset: 38%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--nm-green), var(--nm-blue));
    opacity: 0.35;
    filter: blur(20px);
    animation: pulse 3s ease-in-out infinite;
}

/* Logo overlaid on the glowing "planet" at the center of the animation */
.ai-core-logo {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 42%;
    height: auto;
    z-index: 1;
}

/* --- News --- */
.news__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.news-card {
    background: var(--nm-white);
    border: 1px solid var(--nm-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s var(--ease-out);
}

.news-card:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.news-card__img {
    height: 200px;
    background: linear-gradient(135deg, var(--nm-navy), var(--nm-slate));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nm-green);
    font-size: 2rem;
    overflow: hidden;
}

.news-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card__body {
    padding: 1.5rem;
}

.news-card__date {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--nm-muted);
    margin-bottom: 0.5rem;
}

.news-card h3 {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
    line-height: 1.35;
}

.news-card h3 a { transition: color 0.3s; }
.news-card h3 a:hover { color: var(--nm-green-dim); }

.news-card p,
.news-card__excerpt {
    font-size: 0.88rem;
    color: var(--nm-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.news-card__excerpt p:last-child { margin-bottom: 0; }

/* --- Jobs --- */
.jobs__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.job-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--nm-white);
    border: 1px solid var(--nm-light);
    border-radius: 12px;
    padding: 1.75rem 2rem;
    transition: all 0.3s var(--ease-out);
}

.job-card:hover {
    border-color: var(--nm-green);
    box-shadow: 0 8px 30px rgba(35, 206, 170, 0.08);
}

.job-card__info h3 {
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

.job-card__meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--nm-muted);
}

.job-card__meta span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* --- Contact --- */
.contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact__info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact__block h4 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nm-muted);
    margin-bottom: 0.5rem;
}

.contact__block p,
.contact__block a {
    font-size: 1rem;
    color: var(--nm-navy);
    line-height: 1.6;
}

.contact__block a:hover { color: var(--nm-green-dim); }

.contact__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--nm-navy);
    letter-spacing: 0.02em;
}

.required-asterisk {
    color: #991b1b;
}

.form-group input,
.form-group textarea,
.form-group select {
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--nm-light);
    border-radius: 8px;
    background: var(--nm-white);
    color: var(--nm-navy);
    transition: border-color 0.3s;
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--nm-green);
    box-shadow: 0 0 0 3px var(--nm-green-glow);
}

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

.phone-field {
    display: flex;
    gap: 0.5rem;
}

.phone-country-select {
    flex: 0 0 auto;
    width: 6.5rem;
    padding-left: 0.6rem;
    padding-right: 0.4rem;
    cursor: pointer;
}

.phone-field input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Once the JS enhancer has replaced it with .phone-country-picker, the
   native select stays in the DOM (it's still what actually submits)
   but is visually hidden. */
.phone-country-select--native-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.phone-country-picker {
    position: relative;
    flex: 0 0 auto;
}

.phone-country-picker__button {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 100%;
    padding: 0.6rem 0.6rem;
    border: 1px solid var(--nm-light);
    border-radius: 8px;
    background: var(--nm-white);
    font-size: 0.88rem;
    color: var(--nm-slate);
    cursor: pointer;
    white-space: nowrap;
}

.phone-country-picker__button img { display: block; border-radius: 2px; }
.phone-country-picker__chevron { margin-left: 0.15rem; opacity: 0.5; flex-shrink: 0; }

.phone-country-picker__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    max-height: 260px;
    overflow-y: auto;
    background: var(--nm-white);
    border: 1px solid var(--nm-light);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(11, 22, 45, 0.12);
    z-index: 50;
    min-width: 190px;
}

.phone-country-picker__list.open { display: block; }

.phone-country-picker__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    color: var(--nm-slate);
    cursor: pointer;
}

.phone-country-picker__item img { display: block; border-radius: 2px; }
.phone-country-picker__item:hover { background: var(--nm-ice); }

.form-message {
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.form-message--success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.form-message--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* --- Single Article / Job --- */
.single {
    padding-top: 10rem;
    padding-bottom: 6rem;
}

.single__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--nm-green-dim);
    margin-bottom: 2rem;
    transition: color 0.3s;
}

.single__back:hover { color: var(--nm-blue); }

.single h1 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    margin-bottom: 1rem;
    max-width: 720px;
}

.single__meta {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--nm-muted);
    margin-bottom: 2.5rem;
    display: flex;
    gap: 1.5rem;
}

.single__content {
    max-width: 720px;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--nm-slate);
}

/* Both job postings and news articles use the full header-width column
   (logo to FR/EN toggle) rather than the narrower 720px article column,
   with justified body text. text-align-last keeps a short final line
   left-aligned instead of stretching it out, which justify alone looks
   broken on. */
.single--job h1,
.single--job .single__content,
.single--news h1,
.single--news .single__content {
    max-width: none;
}

.single--job .single__content p,
.single--job .single__content li,
.single--news .single__content p,
.single--news .single__content li {
    text-align: justify;
    text-align-last: left;
}

/* Description / Requirements each get their own card, same visual
   language as .news-card, so the two sections read as distinct,
   scannable blocks instead of running together as one long column. */
.job-box {
    background: var(--nm-white);
    border: 1px solid var(--nm-light);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.job-box:last-child { margin-bottom: 0; }
.job-box h2:first-child { margin-top: 0; }

.single__content p { margin-bottom: 1.25rem; }
.single__content ul, .single__content ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.single__content li { margin-bottom: 0.5rem; }

.single__content h1,
.single__content h2,
.single__content h3,
.single__content h4 {
    color: var(--nm-navy);
    font-family: var(--font-display);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.single__content h1 { font-size: 1.9rem; }
.single__content h2 { font-size: 1.5rem; }
.single__content h3 { font-size: 1.25rem; }
.single__content h4 { font-size: 1.1rem; }

.single__content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
    display: block;
}

.single__content blockquote {
    border-left: 3px solid var(--nm-green);
    padding: 0.25rem 0 0.25rem 1.25rem;
    margin: 0 0 1.25rem;
    color: var(--nm-muted);
    font-style: italic;
}

.single__content pre {
    background: var(--nm-navy);
    color: var(--nm-ice);
    padding: 1rem 1.25rem;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 1.25rem;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
}

.single__content code {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.88em;
    background: var(--nm-ice);
    padding: 0.15em 0.4em;
    border-radius: 4px;
}

.single__content pre code {
    background: none;
    padding: 0;
    border-radius: 0;
}

.single__content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

.single__content th,
.single__content td {
    border: 1px solid var(--nm-light);
    padding: 0.6rem 0.9rem;
    text-align: left;
}

.single__content th {
    background: var(--nm-ice);
    font-weight: 600;
    color: var(--nm-navy);
}

.single__content ul.todo-list {
    list-style: none;
    padding-left: 0;
}

.single__content ul.todo-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.single__content ul.todo-list input[type="checkbox"] {
    margin-top: 0.35rem;
    flex-shrink: 0;
}

/* --- Footer --- */
.footer {
    background: var(--nm-void);
    color: var(--nm-silver);
    padding: 4rem 0 2rem;
}

.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer__brand p {
    margin-top: 1rem;
    font-size: 0.9rem;
    max-width: 280px;
    line-height: 1.6;
}

.footer__col h4 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--nm-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

.footer__col a {
    display: block;
    font-size: 0.88rem;
    color: var(--nm-silver);
    margin-bottom: 0.65rem;
    transition: color 0.3s;
}

.footer__col a:hover { color: var(--nm-green); }

.footer__bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--nm-muted);
}

.footer__social {
    display: flex;
    gap: 1rem;
}

.footer__social a {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    color: var(--nm-silver);
}

.footer__social a:hover {
    border-color: var(--nm-green);
    color: var(--nm-green);
}

/* --- Page Headers --- */
.page-header {
    background: var(--nm-void);
    padding: 10rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 60% at 80% 30%, rgba(35, 206, 170, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 30% 40% at 10% 70%, rgba(11, 56, 140, 0.04) 0%, transparent 70%);
}

.page-header__content {
    position: relative;
    z-index: 1;
    max-width: 640px;
}

.page-header h1 {
    color: var(--nm-white);
    margin-bottom: 1rem;
}

.page-header p {
    font-size: 1.1rem;
    color: var(--nm-silver);
    line-height: 1.7;
}

/* --- Admin Styles --- */
.admin-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

.admin-sidebar {
    background: var(--nm-void);
    padding: 2rem 1.5rem;
    color: var(--nm-white);
}

.admin-sidebar__logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.admin-sidebar__logo span { color: var(--nm-green); }

.admin-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--nm-silver);
    transition: all 0.3s;
}

.admin-nav a:hover,
.admin-nav a.active {
    background: rgba(255,255,255,0.08);
    color: var(--nm-white);
}

.admin-nav-sub {
    list-style: none;
    margin: 0.15rem 0 0.35rem 2.5rem;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.admin-nav-sub li {
    list-style: none;
    position: relative;
}

/* ASCII tree connector back to the parent item: "├─" for every item
   except the last, which gets "└─" instead. */
.admin-nav-sub li::before {
    content: '├─';
    position: absolute;
    left: -1.4rem;
    top: 0.32rem;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.78rem;
    line-height: 1;
    color: rgba(255,255,255,0.3);
}

.admin-nav-sub li:last-child::before {
    content: '└─';
}

.admin-nav-sub a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--nm-silver);
    opacity: 0.8;
    transition: all 0.3s;
}

.admin-nav-sub a svg { flex-shrink: 0; }

.admin-nav-sub a:hover,
.admin-nav-sub a.active {
    background: rgba(255,255,255,0.08);
    color: var(--nm-white);
    opacity: 1;
}

.admin-main {
    background: var(--nm-ice);
    padding: 2rem 2.5rem;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.admin-header h1 {
    font-size: 1.5rem;
    color: var(--nm-navy);
}

.admin-table {
    width: 100%;
    background: var(--nm-white);
    border-radius: 12px;
    border: 1px solid var(--nm-light);
    overflow: hidden;
    border-collapse: collapse;
}

.admin-table th {
    text-align: left;
    padding: 0.85rem 1.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nm-muted);
    background: var(--nm-ice);
    border-bottom: 1px solid var(--nm-light);
}

.admin-table td {
    padding: 0.85rem 1.25rem;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--nm-light);
}

.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--nm-ice); }

.admin-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-badge--published { background: #ecfdf5; color: #065f46; }
.admin-badge--draft { background: #fef3c7; color: #92400e; }

.admin-badge--substatus-rejected { background: #fef2f2; color: #991b1b; }
.admin-badge--substatus-ambiguous { background: #f4f6fa; color: #4b5563; }
.admin-badge--substatus-to-be-explored { background: #eff6ff; color: #1d4ed8; }
.admin-badge--substatus-interesting { background: #fffbeb; color: #92400e; }
.admin-badge--substatus-promising { background: #ecfdf5; color: #065f46; }

.ip-hover { border-bottom: 1px dotted var(--nm-muted); cursor: help; }

.ip-tooltip {
    display: none;
    position: fixed;
    z-index: 200;
    background: var(--nm-navy);
    color: var(--nm-white);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    font-size: 0.78rem;
    line-height: 1.6;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    max-width: 260px;
    pointer-events: none;
}

.ip-tooltip.open { display: block; }
.ip-tooltip__row { display: flex; gap: 0.5rem; white-space: nowrap; }
.ip-tooltip__label { color: var(--nm-silver); min-width: 52px; }
.ip-tooltip__error { color: var(--nm-silver); }

/* Job/News "Preview" links open in this overlay instead of a new tab -
   see assets/js/admin-preview-modal.js. The iframe fills the body
   completely and handles its own scrolling internally, so any scrollbar
   for the previewed page stays contained inside the box rather than
   appearing on the admin page behind it. */
.preview-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(11, 22, 45, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}

.preview-modal-overlay[hidden] { display: none; }

.preview-modal {
    background: var(--nm-white);
    border-radius: 12px;
    width: 100%;
    max-width: 1100px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.preview-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.75rem 0.75rem 1.25rem;
    border-bottom: 1px solid var(--nm-light);
    flex-shrink: 0;
}

.preview-modal__title {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--nm-muted);
}

.preview-modal__close {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--nm-muted);
    padding: 0.15rem 0.65rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.preview-modal__close:hover { background: var(--nm-light); color: var(--nm-navy); }

.preview-modal__body {
    flex: 1;
    overflow: hidden;
}

.preview-modal__frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.admin-actions {
    display: flex;
    gap: 0.5rem;
}

.admin-actions form { display: inline; margin: 0; }

.admin-actions a,
.admin-actions button {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    transition: background 0.3s;
    border: none;
    background: none;
    cursor: pointer;
}

.admin-actions .edit { color: var(--nm-green-dim); }
.admin-actions .edit:hover { background: var(--nm-green-glow); }
.admin-actions .preview { color: var(--nm-blue); }
.admin-actions .preview:hover { background: var(--nm-blue-dim); }
.admin-actions .delete { color: #dc2626; }
.admin-actions .delete:hover { background: #fef2f2; }

/* A publish/draft badge that's really a CSRF-protected POST submit
   button in disguise - reset to look like the plain <a> it replaced. */
.badge-toggle-btn {
    display: inline-block;
    font: inherit;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.admin-form {
    background: var(--nm-white);
    border-radius: 12px;
    border: 1px solid var(--nm-light);
    padding: 2rem;
}

.admin-form .form-group {
    margin-bottom: 1.25rem;
}

.admin-form .form-row {
    margin-bottom: 1.25rem;
}

.admin-form .form-group label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--nm-navy);
    margin-bottom: 0.35rem;
    display: block;
}

.admin-form input[type="text"],
.admin-form input[type="date"],
.admin-form input[type="datetime-local"],
.admin-form select,
.admin-form textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--nm-light);
    border-radius: 6px;
    background: var(--nm-white);
    color: var(--nm-navy);
    transition: border-color 0.3s;
    outline: none;
}

.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
    border-color: var(--nm-green);
    box-shadow: 0 0 0 3px var(--nm-green-glow);
}

.admin-form textarea {
    min-height: 200px;
    resize: vertical;
}

.admin-form .btn {
    margin-top: 0.5rem;
}

/* --- Animations --- */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes pulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.47; transform: scale(1.05); }
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s var(--ease-out);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .about__grid,
    .ai-section__grid,
    .contact__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .news__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .ai-section__visual { display: none; }
}

@media (max-width: 768px) {
    .nav__links { 
        display: none;
        position: fixed;
        inset: 0;
        background: var(--nm-void);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        z-index: 1000;
    }
    
    .nav__links.open { display: flex; }
    .nav__links.open .nav__link { color: var(--nm-white); font-size: 1.2rem; }
    .nav__links.open .nav__lang { color: var(--nm-white); border-color: rgba(255,255,255,0.3); }
    
    .nav__hamburger { display: flex; }
    
    .services__grid,
    .news__grid {
        grid-template-columns: 1fr;
    }
    
    .about__stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .form-row { grid-template-columns: 1fr; }
    
    .job-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .footer__grid {
        grid-template-columns: 1fr;
    }
    
    .footer__bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .hero__content { padding: 7rem 0 4rem; }
    
    .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar { display: none; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

/* --- Error pages (errors/400.php, 403.php, 404.php) --- */
.error-page {
    padding: clamp(7rem, 12vw, 10rem) 0 clamp(5rem, 8vw, 7rem);
}

.error-page__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.error-page__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--nm-green-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.error-page__code {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nm-green-dim);
    margin-bottom: 0.85rem;
}

.error-page__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.25;
    margin-bottom: 1rem;
    text-wrap: balance;
}

.error-page__text {
    font-size: 1.05rem;
    color: var(--nm-muted);
    margin-bottom: 2.25rem;
}

.error-page__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}