/* DC-Lab Redesign — base engine (concept-agnostic foundation) */
:root{
  /* brand palette (from POSYL: teal/cyan + multicolor accents) */
  --ink:#0e1726;          /* near-black ink for premium light hero */
  --ink-soft:#3a4458;
  --paper:#f6f8fb;        /* light premium paper */
  --paper-2:#eef2f8;
  --teal:#12b5a8;         /* primary CTA teal/cyan */
  --teal-deep:#0a8e84;
  --magenta:#e23b8a;      /* course accent */
  --green:#3fb96a;        /* course accent */
  --blue:#3a7bf0;         /* course accent */
  --gold:#e0a431;         /* Autodesk/award accent */
  --line:rgba(14,23,38,.10);
  --shadow:0 18px 50px -18px rgba(14,23,38,.30);
  --r:18px;
  --maxw:1240px;
  --ff-display:'Unbounded','Manrope',system-ui,sans-serif;
  --ff-text:'Manrope',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0;font-family:var(--ff-text);color:var(--ink);background:var(--paper);
  font-size:clamp(16px,1.05vw,18px);line-height:1.6;font-weight:500;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--ff-display);font-weight:700;line-height:1.02;letter-spacing:-.02em;margin:0}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
.eyebrow{font-family:var(--ff-text);font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-deep)}

/* ---------- designer precision cursor (AutoCAD/3ds Max pickbox) ---------- */
/* .cursor = precise crosshair pick-point (two hairlines crossing) */
.cursor{position:fixed;top:0;left:0;width:22px;height:22px;pointer-events:none;
  z-index:9999;transform:translate(-50%,-50%);will-change:transform}
.cursor::before,.cursor::after{content:"";position:absolute;background:var(--teal);
  box-shadow:0 0 6px rgba(18,181,168,.7);transition:background .3s}
.cursor::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.cursor::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%)}
/* tiny center snap-point dot */
.cursor i{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;
  transform:translate(-50%,-50%);background:#fff;box-shadow:0 0 8px var(--teal)}

/* .cursor-ring = selection pickbox with 4 corner brackets */
.cursor-ring{position:fixed;top:0;left:0;width:40px;height:40px;pointer-events:none;
  z-index:9998;transform:translate(-50%,-50%);will-change:transform}
/* spinning corner-bracket box (precision-instrument feel) */
.cursor-ring .cr-box{position:absolute;inset:0;animation:crSpin 9s linear infinite;
  transition:transform .35s cubic-bezier(.22,1,.36,1)}
@keyframes crSpin{to{transform:rotate(360deg)}}
.cursor-ring span{position:absolute;width:9px;height:9px;border:1.5px solid rgba(18,181,168,.6);
  transition:border-color .3s}
.cursor-ring span:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.cursor-ring span:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.cursor-ring span:nth-child(3){right:0;bottom:0;border-left:0;border-top:0}
.cursor-ring span:nth-child(4){left:0;bottom:0;border-right:0;border-top:0}
/* readout label (action) — designer HUD, stays upright */
.cursor-ring b{position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);
  font-family:var(--ff-text);font-weight:700;font-size:9px;letter-spacing:.14em;
  white-space:nowrap;color:var(--gold);opacity:0;transition:opacity .3s;text-transform:uppercase}
/* hover state — pickbox blooms gold (Autodesk), label shows */
.cursor-ring.is-hover{width:62px;height:62px}
.cursor-ring.is-hover .cr-box{animation-duration:3.5s}
.cursor-ring.is-hover span{border-color:var(--gold)}
.cursor-ring.is-hover b{opacity:1}
.cursor.is-hover::before,.cursor.is-hover::after{background:var(--gold);box-shadow:0 0 8px rgba(224,164,49,.8)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-ring{display:none}}

/* shared button */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:1.05em 1.7em;border-radius:999px;
  font-family:var(--ff-text);font-weight:700;font-size:1rem;letter-spacing:.01em;cursor:pointer;
  border:0;background:var(--teal);color:#fff;box-shadow:var(--shadow);
  transition:transform .35s cubic-bezier(.22,1,.36,1),background .3s;will-change:transform}
.btn:hover{background:var(--teal-deep)}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn--ghost:hover{background:var(--ink);color:#fff}

/* reveal helper for scroll-driven CSS (compositor, near-zero cost) */
[data-reveal]{opacity:0;transform:translateY(28px)}
.is-in [data-reveal],[data-reveal].is-in{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}