/* ================================================================

   NODUS_SYSTEMS — Award-Level Stylesheet

   ================================================================ */



/* Reset */

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



/* Tokens */

:root {

    --bg: #1a1a22;

    --bg-2: #20202a;

    --surface: #25252f;

    --surface-2: #2d2d38;

    --text: #f5f5f7;

    --text-2: #b0b0ba;

    --text-3: #70707a;

    --accent: #e64749;

    --accent-dim: rgba(230,71,73,.12);

    --border: rgba(255,255,255,.12);

    --border-h: rgba(255,255,255,.22);

    --font: 'Space Grotesk', sans-serif;

    --mono: 'JetBrains Mono', monospace;

    --ease: cubic-bezier(.22,1,.36,1);

    --ease-out: cubic-bezier(.16,1,.3,1);

}



/* Base */
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/SpaceGrotesk-300.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/SpaceGrotesk-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/SpaceGrotesk-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/SpaceGrotesk-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/SpaceGrotesk-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
html { background:var(--bg); }

body {

    font-family:var(--font);

    background:var(--bg);

    color:var(--text);

    cursor:none;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}

::selection { background:var(--accent); color:#fff; }



/* ================================================================

   Cursor

   ================================================================ */

.cursor {

    position:fixed; top:0; left:0; z-index:9999;

    pointer-events:none; mix-blend-mode:difference;

    transition:opacity .3s;

}

.cursor-dot {

    width:8px; height:8px; background:#fff;

    border-radius:50%; transform:translate(-50%,-50%);

    transition:width .25s var(--ease),height .25s var(--ease);

}

.cursor.hovering .cursor-dot {

    width:40px; height:40px; background:transparent;

    border:1px solid #fff;

}



/* ================================================================

   Preloader

   ================================================================ */

.preloader {

    position:fixed; inset:0; z-index:10000;

    background:var(--bg); display:flex;

    align-items:center; justify-content:center;

    transition:opacity .6s var(--ease);

}

.preloader.hidden { opacity:0; pointer-events:none; }

.preloader-inner { text-align:center; }

.preloader-count {

    font-family:var(--mono); font-size:clamp(3rem,10vw,6rem);

    font-weight:500; color:var(--text); line-height:1;

    margin-bottom:1.5rem;

}

.preloader-bar {

    width:min(280px,60vw); height:1px; background:var(--border);

    margin:0 auto; overflow:hidden;

}

.preloader-bar-fill {

    width:0; height:100%; background:var(--accent);

    transition:width .1s linear;

}

.preloader-label {

    font-family:var(--mono); font-size:.7rem;

    color:var(--text-3); margin-top:1rem;

    letter-spacing:.1em;

}



/* ================================================================

   Background Canvas

   ================================================================ */

.bg-canvas {

    position:fixed; inset:0; z-index:0;

    opacity:.7; pointer-events:none;

}



/* ================================================================

   Nav

   ================================================================ */

.nav {

    position:fixed; top:0; left:0; right:0; z-index:100;

    display:flex; align-items:center; justify-content:space-between;

    padding:1.2rem 2rem;

    background:linear-gradient(180deg,rgba(20,20,26,.85),transparent);

    backdrop-filter:blur(8px);

}

.nav-brand {

    font-family:var(--mono); font-size:.8rem; font-weight:500;

    letter-spacing:.05em; color:var(--text);

}

.nav-brand span { color:var(--accent); }

.nav-links { display:flex; gap:2rem; }

.nav-link {

    font-family:var(--mono); font-size:.7rem;

    color:var(--text-2); text-decoration:none;

    letter-spacing:.08em; transition:color .3s var(--ease);

}

.nav-link:hover { color:var(--text); }

.nav-cta {

    font-family:var(--mono); font-size:.7rem;

    background:none; border:1px solid var(--border-h);

    color:var(--text); padding:.5rem 1.2rem;

    cursor:none; transition:all .3s var(--ease);

    letter-spacing:.05em;

}

.nav-cta:hover { background:var(--text); color:var(--bg); }



/* ================================================================

   Layout

   ================================================================ */

.main { position:relative; z-index:1; }

.section { padding:8rem 2rem; position:relative; }

.container { max-width:1200px; margin:0 auto; }

.container.narrow { max-width:760px; }



/* Section Head */

.section-head {

    display:flex; align-items:center; gap:1rem;

    margin-bottom:3rem;

}

.section-num {

    font-family:var(--mono); font-size:.7rem;

    color:var(--accent); font-weight:500;

}

.section-label {

    font-family:var(--mono); font-size:.7rem;

    color:var(--text-3); letter-spacing:.15em;

    text-transform:uppercase;

}

.section-title {

    font-size:clamp(2.5rem,6vw,4.5rem); font-weight:700;

    line-height:1.02; letter-spacing:-.03em;

    margin-bottom:3rem;

}

.section-sub {

    font-size:1.1rem; line-height:1.7; color:var(--text-2);

    max-width:680px; margin-bottom:3rem;

}

.section-body { max-width:720px; margin:0 auto; }



/* Text */

.text-lg { font-size:1.05rem; line-height:1.8; color:var(--text-2); margin-bottom:1.5rem; }

.text-lg strong { color:var(--text); font-weight:600; }



/* Reveal */

.reveal-text {

    opacity:0; transform:translateY(30px);

    transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);

}

.reveal-text.shown { opacity:1; transform:none; }



/* ================================================================

   Hero

   ================================================================ */

.section-hero {

    min-height:100vh; display:flex;

    align-items:center; justify-content:center;

    padding:6rem 2rem;

}

.hero-content { text-align:center; width:100%; }

.hero-tags {

    display:flex; justify-content:center; gap:.8rem;

    margin-bottom:2.5rem;

    opacity:0; animation:fadeUp .8s var(--ease) .5s forwards;

}

.tag {

    font-family:var(--mono); font-size:.65rem;

    color:var(--text-2); padding:.3rem .8rem;

    border:1px solid var(--border); border-radius:100px;

    letter-spacing:.05em;

}

.hero-title { margin-bottom:2rem; }

.hero-title .line {

    display:block; overflow:hidden;

    line-height:1.05;

}

.hero-title .line.indent { padding-left:3rem; }

.hero-title .word {

    display:inline-block; font-size:clamp(2.5rem,9vw,6rem);

    font-weight:700; letter-spacing:-.04em;

    transform:translateY(100%);

    opacity:0;

}

.hero-title .line:nth-child(1) .word { animation:wordUp 1s var(--ease) .8s forwards; }

.hero-title .line:nth-child(2) .word { animation:wordUp 1s var(--ease) 1s forwards; }

.hero-title .line:nth-child(3) .word { animation:wordUp 1s var(--ease) 1.2s forwards; }

@keyframes wordUp { to { transform:translateY(0); opacity:1; } }

@keyframes fadeUp { to { opacity:1; } }



.hero-meta { margin-top:1.5rem; }

.hero-brand {

    font-family:var(--mono); font-size:clamp(.9rem,2vw,1.2rem);

    color:var(--text-3); letter-spacing:.1em;

    opacity:0; animation:fadeUp .8s var(--ease) 1.6s forwards;

}

.hero-scroll {

    position:absolute; bottom:2rem; left:50%;

    transform:translateX(-50%);

    font-family:var(--mono); font-size:.65rem;

    color:var(--text-3); letter-spacing:.15em;

    opacity:0; animation:fadeUp .8s var(--ease) 2s forwards;

}



/* ================================================================

   Cards

   ================================================================ */

.card {

    background:var(--surface); border:1px solid var(--border);

    border-radius:8px; padding:2rem;

    transition:all .4s var(--ease);

}

.card:hover {

    border-color:var(--border-h); transform:translateY(-4px);

}



/* Team */

.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }

.card-team .card-tag {

    font-family:var(--mono); font-size:.6rem;

    color:var(--accent); letter-spacing:.1em;

    text-transform:uppercase; margin-bottom:.8rem;

}

.card-name {

    font-size:1.3rem; font-weight:600;

    margin-bottom:1rem; letter-spacing:-.01em;

}

.card-desc { font-size:.85rem; line-height:1.7; color:var(--text-2); }



/* Tech */

.tech-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:2rem; }

.card-tech-title { font-size:1.1rem; font-weight:600; margin-bottom:.8rem; }

.card-tech-desc { font-size:.85rem; line-height:1.7; color:var(--text-2); }



.badges { display:flex; flex-wrap:wrap; gap:.6rem; }

.badge {

    font-family:var(--mono); font-size:.6rem;

    color:var(--text-2); padding:.35rem .8rem;

    border:1px solid var(--border); border-radius:100px;

}



/* Solutions */

.solutions-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }

.sol-letter {

    font-family:var(--mono); font-size:2rem; font-weight:700;

    color:var(--accent); margin-bottom:.5rem;

}

.sol-title { font-size:1.4rem; font-weight:700; margin-bottom:.3rem; }

.sol-sub {

    font-family:var(--mono); font-size:.65rem;

    color:var(--text-3); margin-bottom:1rem; letter-spacing:.05em;

}

.sol-text { font-size:.82rem; line-height:1.7; color:var(--text-2); margin-bottom:.8rem; }



/* Avantage */

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

.avantage-item {

    padding:2rem; border:1px solid var(--border);

    border-radius:8px; transition:all .4s var(--ease);

}

.avantage-item:hover { border-color:var(--border-h); }

.avantage-num {

    font-family:var(--mono); font-size:.7rem;

    color:var(--accent); display:block; margin-bottom:.8rem;

}

.avantage-item h3 { font-size:1.1rem; font-weight:600; margin-bottom:.6rem; }

.avantage-item p { font-size:.85rem; line-height:1.7; color:var(--text-2); }



/* Eco */

.eco-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2rem; }

.eco-card { padding:1.5rem; border:1px solid var(--border); border-radius:8px; }

.eco-label {

    font-family:var(--mono); font-size:.65rem;

    color:var(--accent); letter-spacing:.1em;

    text-transform:uppercase; margin-bottom:.5rem;

}

.eco-card p { font-size:.85rem; line-height:1.6; color:var(--text-2); }



/* Genèse */

.genese-body { margin-bottom:3rem; }

.genese-signature {

    font-size:1.2rem; line-height:1.6; color:var(--text);

    font-weight:500; padding-top:2rem;

    border-top:1px solid var(--border);

}



/* Contact */

.section-contact {

    text-align:center;

    padding:6rem 2rem;

    background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);

    position:relative;

}

.section-contact::before {

    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);

    width:1px; height:60px; background:linear-gradient(180deg, transparent, #00f0ff);

}

.contact-title {

    font-size:clamp(2rem,5vw,3.5rem); font-weight:700;

    line-height:1.05; margin-bottom:2rem; letter-spacing:-.02em;

}



.contact-form { display:flex; flex-direction:column; gap:0; }

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

.form-group { margin-bottom:1.5rem; position:relative; }

.form-group label {

    display:block; font-size:.7rem; font-weight:500;

    color:var(--text-2); font-family:var(--mono);

    text-transform:uppercase; letter-spacing:.08em; margin-bottom:.5rem;

}

.form-group input, .form-group textarea {

    width:100%; padding:.9rem 1.1rem;

    background:rgba(20,20,26,.8); border:1px solid var(--border);

    border-radius:10px; color:var(--text); font-family:var(--font);

    font-size:.9rem; outline:none;

    transition:border-color .3s var(--ease), box-shadow .3s var(--ease);

}

.form-group input:focus, .form-group textarea:focus {

    border-color:rgba(0,240,255,.4);

    box-shadow:0 0 0 3px rgba(0,240,255,.08);

}

.form-group input::placeholder, .form-group textarea::placeholder {

    color:var(--text-3);

}

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

.btn-submit {

    width:100%; padding:1rem 2rem;

    background:#e64749; background:linear-gradient(135deg, #e64749, #ff5060);

    color:#fff; border:none; border-radius:10px;

    font-family:var(--font); font-weight:600; font-size:.9rem;

    cursor:pointer; text-transform:uppercase; letter-spacing:.05em;

    transition:all .3s var(--ease);

    box-shadow:0 4px 16px rgba(230,71,73,.25);

}

.btn-submit:hover {

    opacity:.95; transform:translateY(-1px);

    box-shadow:0 6px 24px rgba(230,71,73,.35);

}

.btn-submit:active { transform:translateY(0); }

.btn-submit:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }

.form-status {

    text-align:center; margin-top:1.25rem;

    font-size:.8rem; font-family:var(--mono); color:var(--text-2);

}

.form-status.success { color:var(--green); }

.form-status.error { color:var(--accent); }

@media (max-width:768px) {

    .form-row { grid-template-columns:1fr; }

    

}







/* Contact card - clean single definition */
.contact-card {
    max-width:640px;
    margin:2rem auto !important;
    background:rgba(30,30,38,.6);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--border);
    border-radius:16px; padding:2.5rem;
    box-shadow:0 8px 32px rgba(0,0,0,.4);
    text-align:left;
}
.contact-card .contact-form { margin-top:0; }