/* ==========================================================
   base.css
========================================================== */

body{

    font-family:
        "Inter",
        "Noto Sans JP",
        sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    line-height:1.8;

    position:relative;

}

/* ================= Background ================= */

.bg-gradient{

    position:fixed;

    inset:0;

    z-index:-4;

    background:
        radial-gradient(circle at 20% 10%,rgba(91,140,255,.28),transparent 40%),
        radial-gradient(circle at 80% 80%,rgba(110,231,255,.18),transparent 35%),
        linear-gradient(180deg,#060816,#0D132A);

}

.noise{

    position:fixed;

    inset:0;

    z-index:-3;

    opacity:.03;

    background-image:
    radial-gradient(circle,#ffffff 1px,transparent 1px);

    background-size:26px 26px;

}

#networkCanvas{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    z-index:-2;

}

#topics{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

}

/* ================= Typography ================= */

h1{

    font-size:clamp(3rem,6vw,5.5rem);

    font-weight:900;

    line-height:1.1;

    letter-spacing:-2px;

}

h1 span{

    color:var(--primary);

}

h2{

    font-size:clamp(2.2rem,4vw,3.4rem);

    line-height:1.2;

    margin-bottom:28px;

}

h3{

    font-size:1.35rem;

    margin-bottom:14px;

}

p{

    color:var(--sub);

    font-size:1.05rem;

}

/* ================= Container ================= */

.container{

    width:min(
        calc(100% - 48px),
        var(--container)
    );

    margin:0 auto;

}

section{

    padding:140px 0;

    position:relative;

}

.section-title{

    text-align:center;

    margin-bottom:80px;

}

.section-title span{

    display:inline-block;

    margin-bottom:18px;

    color:var(--primary);

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:700;

}

/* ================= Glass ================= */

.glass-card{

    background:var(--glass);

    backdrop-filter:blur(24px);

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

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

/* ================= Button ================= */

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:18px 34px;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 45px rgba(91,140,255,.35);

}

.btn-secondary{

    border:1px solid rgba(255,255,255,.12);

    background:rgba(255,255,255,.04);

}

.btn-secondary:hover{

    background:rgba(255,255,255,.08);

}

/* ================= Selection ================= */

::selection{

    background:var(--primary);

    color:#fff;

}

/* ================= Scroll ================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:rgba(255,255,255,.18);

    border-radius:999px;

}

::-webkit-scrollbar-track{

    background:transparent;

}