/* ============================================
   NOVEX — Main Stylesheet
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&display=swap');

:root {
  --primary:           #03d3fc;
  --primary-rgb:       3, 211, 252;
  --primary-hover:     #00b8e0;
  --background:        #03d3fc;
  --surface:           rgba(255,255,255,0.55);
  --surface-light:     rgba(255,255,255,0.75);
  --card:              rgba(255,255,255,0.65);
  --card-border:       rgba(255,255,255,0.80);
  --card-hover-border: rgba(255,255,255,1);
  --foreground:        #04111a;
  --foreground-inv:    #ffffff;
  --muted:             #1a5a72;
  --muted-dim:         #2e8aaa;
  --border:            rgba(255,255,255,0.4);
  --radius:            14px;
  --radius-lg:         18px;
  --radius-xl:         24px;
  --radius-full:       9999px;
  --font-heading:      'Montserrat', sans-serif;
  --font-display:      'Montserrat', sans-serif;
  --font-body:         'Montserrat', sans-serif;
  --font-mono:         'Montserrat', monospace;
  --navbar-h:          68px;
  --max-w:             1500px;
  --transition:        0.3s ease;
  --navbar-bg:         rgba(255,255,255,0.78);
  --navbar-border:     rgba(255,255,255,0.92);
  --grid-color:        rgba(4,17,26,0.065);
  --shadow:            0 8px 40px rgba(4,17,26,0.13);
  --shadow-lg:         0 20px 60px rgba(4,17,26,0.18);
}

body.dark-mode {
  --background:        #000000;
  --surface:           #0a0a0a;
  --surface-light:     #111111;
  --card:              rgba(12,12,12,0.94);
  --card-border:       rgba(3,211,252,0.10);
  --card-hover-border: rgba(3,211,252,0.38);
  --foreground:        #ffffff;
  --foreground-inv:    #000000;
  --muted:             #808080;
  --muted-dim:         #505050;
  --border:            #161616;
  --navbar-bg:         rgba(0,0,0,0.82);
  --navbar-border:     rgba(3,211,252,0.14);
  --grid-color:        rgba(3,211,252,0.03);
  --shadow:            0 8px 40px rgba(3,211,252,0.06);
  --shadow-lg:         0 20px 60px rgba(3,211,252,0.10);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: var(--font-body);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.65;
  overflow-x: hidden;
  transition: background 0.5s ease, color 0.5s ease;
}

body::before {
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events:none; z-index:0;
}

body::after {
  content:'';
  position:fixed; top:-200px; left:50%;
  transform:translateX(-50%);
  width:1000px; height:600px;
  background:radial-gradient(ellipse, rgba(255,255,255,0.22), transparent 65%);
  pointer-events:none; z-index:0;
}
body.dark-mode::after {
  background:radial-gradient(ellipse, rgba(3,211,252,0.055), transparent 65%);
}

.page-glow-bottom {
  position:fixed; bottom:-200px; left:50%;
  transform:translateX(-50%);
  width:800px; height:400px;
  background:radial-gradient(ellipse, rgba(255,255,255,0.13), transparent 70%);
  pointer-events:none; z-index:0;
}
body.dark-mode .page-glow-bottom {
  background:radial-gradient(ellipse, rgba(3,211,252,0.035), transparent 70%);
}

.container { max-width:var(--max-w); margin:0 auto; padding:0 36px; position:relative; z-index:1; }
.page-content { padding-top:calc(var(--navbar-h) + 70px); position:relative; z-index:1; }
section { padding:110px 0; position:relative; z-index:2; }

h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); font-weight:700; line-height:1.1; letter-spacing:-0.02em; }
h1 { font-size:clamp(2.6rem,6vw,4.8rem); font-weight:800; }
h2 { font-size:clamp(1.9rem,4vw,3rem); }
h3 { font-size:clamp(1.05rem,2vw,1.25rem); }

/* Montserrat Black 900 for all section key titles & labels */
.section-header h2,
.section-divider-title span,
.step-num { font-family:var(--font-display); }

.section-header h2 { font-weight:900; letter-spacing:-0.03em; }

a { color:inherit; text-decoration:none; transition:color var(--transition); }
.text-primary { color:var(--primary); }

body:not(.dark-mode) h1,
body:not(.dark-mode) h2,
body:not(.dark-mode) h3 { color:#04111a; }

.label {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 16px; border-radius:var(--radius-full);
  border:1px solid rgba(255,255,255,0.72);
  background:rgba(255,255,255,0.48);
  color:#04111a;
  font-size:0.66rem; font-weight:900;
  text-transform:uppercase; letter-spacing:0.16em;
  font-family:var(--font-display);
  backdrop-filter:blur(8px);
}
body.dark-mode .label {
  border-color:rgba(3,211,252,0.22);
  background:rgba(3,211,252,0.06);
  color:var(--primary);
}

.section-header { text-align:center; margin-bottom:68px; }
.section-header .label { margin-bottom:20px; display:inline-flex; }
.section-header h2 { margin-bottom:16px; }
.section-header p { color:var(--muted); max-width:540px; margin:0 auto; font-size:1.02rem; line-height:1.75; }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--background); }
::-webkit-scrollbar-thumb { background:rgba(3,211,252,0.28); border-radius:2px; }
::selection { background:rgba(3,211,252,0.22); }

@media (max-width:768px) { section { padding:72px 0; } .container { padding:0 20px; } }
@media (max-width:480px) { section { padding:52px 0; } }