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

:root {
  --bg:        #BECEF0;
  --bg-warm:   #DCE2F4;
  --ink:       #15151A;
  --ink-soft:  #2E2E36;
  --gray-1:    #54545C;
  --gray-2:    #82828A;
  --gray-3:    #B4B4BA;
  --line:      rgba(21,21,26,.14);
  --line-soft: rgba(21,21,26,.08);
  --orange:    #F26B1F;
  --orange-d:  #C44F0A;
  --yellow:    #FFD23F;
  --red:       #E63946;
  --green:     #06A77D;
  --blue:      #3D5AFE;
  --white:     #FFFFFF;

  --font-display: 'Archivo Black', system-ui, sans-serif;
  --font-ui: 'Familjen Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

html { scroll-behavior:smooth }
::selection { background:var(--orange); color:var(--white) }

html { overflow-x:hidden; }
body {
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  line-height:1.5;
  width:100%;
  max-width:100vw;
  min-width:0;
}
a { text-decoration:none; color:inherit }
img { display:block; max-width:100% }

body::before {
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 900px 600px at 110% 95%, rgba(242,107,31,.22), transparent 60%),
    radial-gradient(ellipse 900px 700px at -15% 85%, rgba(255,255,255,.32), transparent 60%);
  pointer-events:none;
  z-index:-2;
}

.stud {
  display:inline-block;
  width:11px; height:11px;
  border-radius:50%;
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.45),
    0 1px 2px rgba(0,0,0,.18);
  border:1.5px solid var(--ink);
  position:relative;
  z-index:10;
}
.stud-o { background:var(--orange) }
.stud-y { background:var(--yellow) }
.stud-r { background:var(--red) }
.stud-b { background:var(--blue) }
.stud-g { background:var(--green) }

/* WRAP */
.wrap {
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 28px;
  min-width:0;
  box-sizing:border-box;
}

/* Shared keyframes used across sections */
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(6,167,125,.7) }
  70% { box-shadow: 0 0 0 8px rgba(6,167,125,0) }
  100% { box-shadow: 0 0 0 0 rgba(6,167,125,0) }
}
@keyframes reveal {
  to { opacity:1; transform:translateY(0) }
}