/* =========================================
   JUSTWEB OS — BASE SYSTEM
   base.css  ·  All pages inherit this
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
    /* Brand */
    --red:          #D93025;
    --red-glow:     rgba(217,48,37,0.22);
    --blue:         #1A56E8;
    --blue-glow:    rgba(26,86,232,0.14);
    --green:        #00C96B;
    --green-dim:    rgba(0,201,107,0.55);

    /* Surfaces */
    --dark:         #0F1117;
    --dark-2:       #161B27;
    --off-white:    #F7F6F2;
    --cream:        #F0EDE6;
    --white:        #FFFFFF;

    /* Glass */
    --gl-w:         rgba(255,255,255,0.70);
    --gl-wb:        rgba(255,255,255,0.14);
    --gl-d:         rgba(15,17,23,0.78);
    --gl-db:        rgba(255,255,255,0.09);

    /* Ink (on light backgrounds) */
    --ink:          #0E1018;
    --ink-mid:      #374151;
    --ink-soft:     #6B7280;
    --ink-faint:    #9CA3AF;

    /* Typography */
    --font-b:       'Plus Jakarta Sans', sans-serif;
    --font-m:       'IBM Plex Mono', monospace;

    /* Layout */
    --max-w:        1360px;
    --pad-x:        44px;
    --sec-y:        110px;

    /* Easing */
    --ease:         cubic-bezier(0.16,1,0.3,1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
    font-family: var(--font-b);
    background: var(--off-white);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 1.6;
}
img,video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

/* ── UTILITIES ──────────────────────────────────────────────── */
.mono       { font-family: var(--font-m); }
.no-scroll  { overflow:hidden; }
.d-none     { display:none !important; }
.d-md-block { display:none; }
@media(min-width:768px){ .d-md-block{ display:block; } }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container-wide {
    width:100%; max-width:var(--max-w);
    margin:0 auto; padding:0 var(--pad-x);
}

/* ── GLASS UTILITIES ─────────────────────────────────────────── */
.glass-light {
    background: var(--gl-w);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border:1px solid var(--gl-wb); border-radius:16px;
}
.glass-dark {
    background: var(--gl-d);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border:1px solid var(--gl-db); border-radius:16px;
}

/* ── KEYFRAMES ──────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity:0; transform:translateY(28px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
    from { opacity:0; } to { opacity:1; }
}
@keyframes dotPulse {
    0%  { box-shadow:0 0 0 0 var(--green-dim); }
    60% { box-shadow:0 0 0 7px transparent; }
    100%{ box-shadow:0 0 0 0 transparent; }
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:1100px){
    :root { --pad-x:28px; --sec-y:80px; }
}
@media(max-width:768px){
    :root { --pad-x:20px; --sec-y:60px; }
}