/* ==========================================================================
   NODRA
   Shared Components
   Version 0.2

   This file holds every primitive reused across the whole ecosystem:
   the Nodra Home (/), the Academy landing (/academy), and every lesson
   module. Nothing here is specific to a single product line.

   ARCHITECTURE NOTE (2026 platform reorganization)
   --------------------------------------------------------------------
   Version 0.1 kept .navbar, .hero, .hero-stats, .hero-dashboard and
   .footer inside academy.css, because the Academy landing was, at the
   time, the only "home" the project had. Now that Nodra is an
   ecosystem of multiple products (Academy, Community, Labs, Tools,
   Games, About) with its own Home, those primitives are used by pages
   that have nothing to do with the Academy — so they were promoted
   here, to components.css, where any product can rely on them without
   depending on a file literally named "academy.css".

   The dashboard mockup's inner checklist content
   (.dashboard-title/.dashboard-item/.dashboard-divider/
   .dashboard-progress/.dashboard-footer) moved here too: it is a
   generic "checklist inside a chrome card" pattern with no
   Academy-specific styling — the Nodra Home reuses it identically for
   its own mockup. Only the text differs, and that lives in HTML/i18n.

   This file previously also contained a second, dead copy of .navbar
   (with BEM-style .navbar__inner / .navbar__logo / .lang-switch /
   .logo-mark classes) left over from an earlier, abandoned markup
   convention. That block was never referenced by any current HTML and
   has been removed as part of this reorganization.

   academy.css now contains ONLY what is truly Academy-specific:
   Learning Paths / tracks, the modules grid, the mission box, and the
   "next" comparison grid reused by lesson content.
   ========================================================================== */

@import url("./variables.css");

/* ==========================================================================
   RESET
   ========================================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-body);
    background:var(--gradient-background);
    color:var(--text);
    min-height:100vh;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

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

button{
    border:none;
    background:none;
    font-family:inherit;
    cursor:pointer;
}

/* ==========================================================================
   BACKGROUND (shared brand texture: grid overlay + radial glow)
   ========================================================================== */

body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:64px 64px;
    pointer-events:none;
    z-index:-2;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at top left, rgba(77,166,255,.12), transparent 35%),
        radial-gradient(circle at bottom right, rgba(77,166,255,.08), transparent 40%);
    z-index:-1;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.container{
    width:min(100% - 48px,var(--container));
    margin-inline:auto;
}

.section{
    padding:var(--space-24) 0;
}

.grid{
    display:grid;
    gap:var(--space-8);
}

.flex{
    display:flex;
}

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

/* ==========================================================================
   NAVBAR (shared by Home, Academy, and every lesson module)
   ========================================================================== */

.navbar{
    position:fixed;
    inset:0 0 auto 0;
    height:80px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 48px;
    background:rgba(6,8,13,.72);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.05);
    z-index:1000;
}

.logo{
    display:flex;
    align-items:center;
    gap:14px;
}

.logo-icon{
    width:18px;
    height:18px;
    border-radius:6px;
    background:var(--primary);
    box-shadow:0 0 24px rgba(77,166,255,.5);
}

.logo-text{
    font-family:var(--font-heading);
    font-size:30px;
    text-transform:uppercase;
    font-weight:900;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:34px;
}

.nav-links a{
    color:var(--text-secondary);
    transition:.25s;
}

.nav-links a:hover{
    color:var(--primary);
}

.language-switch{
    display:flex;
    gap:10px;
    margin-left:24px;
}

.language-switch button{
    background:transparent;
    color:var(--text-secondary);
    border:1px solid var(--border);
    border-radius:8px;
    padding:8px 12px;
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    transition:all .2s ease;
}

.language-switch button:hover{
    border-color:var(--primary);
    color:var(--text-primary);
}

.language-switch button.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

/* ==========================================================================
   HERO (shared shell — every product's hero uses this two-column layout;
   only the copy and the dashboard-mockup content inside it differ)
   ========================================================================== */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding-top:80px;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:72px;
    align-items:center;
}

.hero-content{
    max-width:720px;
}

.hero-title{
    margin:18px 0 26px;
    font-family:var(--font-heading);
    font-size:clamp(5rem,8vw,7rem);
    line-height:.88;
    text-transform:uppercase;
    font-weight:900;
}

.hero-title span{
    color:var(--primary);
}

.hero-description{
    color:var(--text-secondary);
    line-height:1.9;
    font-size:20px;
    margin-bottom:42px;
}

.hero-actions{
    display:flex;
    gap:18px;
    margin-bottom:42px;
}

.hero-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.stat-card{
    background:var(--surface-1);
    border:1px solid var(--border);
    border-radius:20px;
    padding:22px;
    transition:.25s;
}

.stat-card:hover{
    transform:translateY(-6px);
    border-color:var(--primary);
}

.stat-card strong{
    display:block;
    font-family:var(--font-heading);
    font-size:32px;
    margin-bottom:8px;
}

.stat-card span{
    color:var(--text-secondary);
    font-size:14px;
}

/* ---- Dashboard mockup chrome (outer frame only; inner content classes
   like .dashboard-title/.dashboard-item live in academy.css or in a
   module's own stylesheet, since that content differs per page) ---- */

.hero-dashboard{
    background:linear-gradient(180deg,var(--surface-2),var(--surface-1));
    border:1px solid var(--border);
    border-radius:28px;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
}

.dashboard-header{
    display:flex;
    gap:10px;
    padding:18px 24px;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.dashboard-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--primary);
    opacity:.45;
}

.dashboard-content{
    padding:36px;
}

.dashboard-title{
    font-family:var(--font-heading);
    font-size:40px;
    margin-bottom:30px;
}

.dashboard-item{
    padding:18px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
    color:var(--text-secondary);
}

.dashboard-item.active{
    color:var(--primary);
    font-weight:700;
}

.dashboard-divider{
    height:1px;
    background:rgba(255,255,255,.08);
    margin:28px 0;
}

.dashboard-progress{
    display:flex;
    gap:12px;
    margin-bottom:18px;
}

.dashboard-footer{
    color:var(--text-muted);
    font-size:14px;
}

/* ==========================================================================
   FOOTER (shared by Home, Academy, and every lesson module)
   ========================================================================== */

.footer{
    border-top:1px solid rgba(255,255,255,.05);
    padding:48px 0;
}

.footer-grid{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:32px;
}

.footer-brand h3{
    font-family:var(--font-heading);
    font-size:34px;
    text-transform:uppercase;
}

.footer-brand span{
    color:var(--text-muted);
}

.footer-links{
    display:flex;
    gap:28px;
}

.footer-links a{
    color:var(--text-secondary);
    transition:.25s;
}

.footer-links a:hover{
    color:var(--primary);
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.display{
    font-family:var(--font-heading);
    font-size:var(--hero-title);
    font-weight:var(--black);
    line-height:.9;
    text-transform:uppercase;
}

.title{
    font-family:var(--font-heading);
    font-size:var(--text-4xl);
    font-weight:var(--black);
    text-transform:uppercase;
}

.subtitle{
    font-size:var(--text-xl);
    color:var(--text-secondary);
    line-height:1.8;
}

.text-muted{
    color:var(--text-muted);
}

.section-title{
    font-family:var(--font-heading);
    font-size:64px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:18px;
}

.section-description{
    max-width:720px;
    color:var(--text-secondary);
    font-size:18px;
    line-height:1.9;
}

.tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--primary);
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:12px;
    font-weight:700;
    margin-bottom:18px;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    height:var(--button-height);
    padding:var(--button-padding);

    border-radius:var(--radius-md);

    transition:var(--transition);

    font-weight:600;
}

.btn-primary{
    background:var(--primary);
    color:#061019;
    box-shadow:var(--glow-primary);
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:var(--glow-strong);
}

.btn-secondary{
    border:1px solid var(--border);
    color:var(--text);
    background:rgba(255,255,255,.02);
}

.btn-secondary:hover{
    border-color:var(--primary);
    color:var(--primary);
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.card{
    background:var(--surface-1);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    padding:var(--card-padding);
    transition:var(--transition);
}

.card:hover{
    transform:translateY(-6px);
    border-color:var(--primary);
    box-shadow:var(--shadow-md);
}

.card-title{
    font-family:var(--font-heading);
    font-size:var(--text-3xl);
    font-weight:var(--black);
    margin-bottom:16px;
}

.card-description{
    color:var(--text-secondary);
    line-height:1.8;
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge{
    display:inline-flex;
    align-items:center;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid var(--border-light);
    font-size:12px;
    color:var(--primary);
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* ==========================================================================
   MODULE STATUS
   ========================================================================== */

.status{
    display:flex;
    align-items:center;
    gap:8px;
}

.status-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--primary);
}

.status-coming .status-dot{
    background:var(--text-muted);
}

/* ==========================================================================
   PROGRESS
   ========================================================================== */

.progress{
    display:flex;
    gap:10px;
    margin-top:16px;
}

.progress-dot{
    width:var(--progress-size);
    height:var(--progress-size);
    border-radius:50%;
    border:2px solid var(--primary);
}

.progress-dot.active{
    background:var(--primary);
}

/* ==========================================================================
   MISSION / CALLOUT BOX (generic centered gradient callout, reused by
   the Nodra Home and the Academy landing)
   ========================================================================== */

.mission{
    padding:140px 0;
}

.mission-box{
    background:linear-gradient(180deg,var(--surface-2),var(--surface-1));
    border:1px solid var(--border);
    border-radius:32px;
    padding:72px;
    text-align:center;
}

.mission-box h2{
    font-family:var(--font-heading);
    font-size:68px;
    text-transform:uppercase;
    margin:20px 0;
}

.mission-box p{
    max-width:760px;
    margin:auto;
    color:var(--text-secondary);
    line-height:2;
    font-size:18px;
}

/* ==========================================================================
   GLOW (hover accent used by cards across every product)
   ========================================================================== */

.glow{
    position:relative;
}

.glow::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    background:linear-gradient(135deg, rgba(77,166,255,.20), transparent, rgba(77,166,255,.05));
    opacity:0;
    transition:.3s;
    pointer-events:none;
}

.glow:hover::before{
    opacity:1;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

.reveal{
    opacity:0;
    transform:translateY(32px);
    transition:opacity .8s ease, transform .8s ease;
}

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

.fade-up{
    opacity:0;
    transform:translateY(20px);
    animation:fadeUp .6s forwards;
}

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

.float{
    animation:float 5s ease-in-out infinite;
}

@keyframes float{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
    100%{ transform:translateY(0); }
}

/* ==========================================================================
   SCROLLBAR / SELECTION / FOCUS
   ========================================================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#06080D;
}

::-webkit-scrollbar-thumb{
    background:#223547;
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--primary);
}

::selection{
    background:var(--primary);
    color:#061019;
}

button:focus,
a:focus{
    outline:2px solid var(--primary);
    outline-offset:4px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1024px){

    .container{
        width:min(100% - 32px,var(--container));
    }
}

@media (max-width:768px){

    .display{
        font-size:4rem;
    }

    .title{
        font-size:2.4rem;
    }

    .section{
        padding:64px 0;
    }
}

@media (max-width:1200px){

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

    .hero-visual{
        order:-1;
    }
}

@media (max-width:768px){

    .navbar{
        padding:0 24px;
    }

    .nav-links{
        display:none;
    }

    .hero{
        text-align:center;
        min-height:auto;
        padding:140px 0 80px;
    }

    .hero-title{
        font-size:4rem;
    }

    .hero-description{
        font-size:17px;
        margin-inline:auto;
    }

    .hero-actions{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-grid{
        flex-direction:column;
        text-align:center;
    }

    .footer-links{
        justify-content:center;
        flex-wrap:wrap;
    }
}