/* ============================================================
   KAIPEC · Design System v2.0 — "Black Intelligence Campus"
   Foundation layer (tokens + base components).
   Reconstructed from DESIGN-SYSTEM v2.0 spec + style-guide.html.
   Black/Gray base · Purple signal (10–15%) · Cyan data.
   ============================================================ */
:root{
  /* ---- color: black & gray ---- */
  --c-obsidian:#050509;   /* main bg */
  --c-carbon:#0B0D17;     /* section surface */
  --c-graphite:#121421;   /* card surface */
  --c-border:#282B3A;     /* line */
  --c-gray:#B7BBC8;       /* body text */
  --c-white:#FFFFFF;
  /* ---- color: purple signal & cyan data ---- */
  --c-purple:#8B5CFF;     /* CTA · signal */
  --c-violet:#B99CFF;     /* glow · hover */
  --c-royal:#4B28D4;      /* deep accent */
  --c-cyan:#62E7FF;       /* data */
  /* ---- semantic aliases ---- */
  --bg:var(--c-obsidian);
  --surface:var(--c-carbon);
  --card:var(--c-graphite);
  --border:var(--c-border);
  --border-hover:#3A3F57;
  --text-strong:#FFFFFF;
  --text-body:var(--c-gray);
  --text-dim:#7B8194;
  --purple-soft:rgba(139,92,255,.10);
  --purple-glow:rgba(139,92,255,.45);
  --grad-purple:linear-gradient(135deg,#8B5CFF,#4B28D4);
  --grad-text:linear-gradient(100deg,#FFFFFF 28%,#B99CFF);
  /* ---- type ---- */
  --font-kr:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-en:'Space Grotesk','Pretendard Variable',Pretendard,system-ui,sans-serif;
  --font:var(--font-kr);
  --w-md:500; --w-sb:600; --w-b:700;
  --tr-tight:-0.02em;
  --fs-h2:clamp(1.9rem,3.4vw,2.625rem);
  /* ---- layout ---- */
  --gutter:24px; --maxw:1280px; --section-pad:120px;
  /* ---- radius ---- */
  --r-sm:10px; --r-md:16px; --r-card:24px; --r-lg:28px; --r-full:999px;
  /* ---- elevation ---- */
  --shadow-soft:0 8px 30px rgba(0,0,0,.45);
  --shadow-card:0 24px 70px rgba(0,0,0,.55);
  --shadow-glow:0 0 44px var(--purple-glow);
  /* ---- motion ---- */
  --ease:cubic-bezier(.22,1,.36,1); --d-1:.25s; --d-2:.5s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text-body);font-family:var(--font-kr);
  line-height:1.7;letter-spacing:-.01em;word-break:keep-all;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip;max-width:100vw}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
::selection{background:rgba(139,92,255,.32);color:#fff}
:focus-visible{outline:2px solid var(--c-purple);outline-offset:3px;border-radius:6px}

/* ---- layout primitives ---- */
.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,9vw,var(--section-pad))}
.section--surface{background:var(--surface)}

/* ---- typography ---- */
.display{font-size:clamp(2.625rem,5.6vw,4.5rem);line-height:1.12;font-weight:var(--w-b);letter-spacing:-.035em;color:#fff}
.h1{font-size:clamp(2.25rem,4.4vw,3.5rem);line-height:1.18;font-weight:var(--w-b);letter-spacing:-.03em;color:#fff}
.h2{font-size:var(--fs-h2);line-height:1.22;font-weight:var(--w-b);letter-spacing:-.025em;color:#fff}
.h3{font-size:clamp(1.3rem,1.8vw,1.75rem);line-height:1.3;font-weight:var(--w-sb);color:#fff}
.lead{font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.6;color:var(--text-body)}
.body{color:var(--text-body);font-size:1.0625rem;line-height:1.65}
.cap{font-size:.875rem;color:var(--text-dim);line-height:1.5}
.mono{font-family:var(--font-en)}
.eyebrow{display:inline-block;font-family:var(--font-en);font-size:.8125rem;font-weight:var(--w-md);
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-violet)}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.signal-text{color:var(--c-violet);font-family:var(--font-kr);font-size:.9rem;font-weight:var(--w-md)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-kr);font-weight:var(--w-sb);
  font-size:.9375rem;border-radius:var(--r-full);padding:13px 24px;cursor:pointer;border:1px solid transparent;
  transition:transform var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease),border-color var(--d-1) var(--ease),background var(--d-1) var(--ease)}
.btn .arrow{transition:transform var(--d-1) var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn--primary{background:var(--grad-purple);color:#fff;box-shadow:0 10px 30px rgba(139,92,255,.35)}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(139,92,255,.5)}
.btn--secondary{background:transparent;color:#fff;border-color:var(--border-hover)}
.btn--secondary:hover{transform:translateY(-3px);border-color:var(--c-violet)}
.btn--lg{padding:16px 30px;font-size:1rem}

/* ---- card ---- */
.card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);
  padding:30px 28px;overflow:hidden;transition:transform var(--d-2) var(--ease),border-color var(--d-2) var(--ease)}
.card:hover{transform:translateY(-6px);border-color:var(--border-hover)}
.card--line::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-purple);opacity:.9}
.card__glow{position:absolute;top:-45%;right:-30%;width:60%;height:130%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(139,92,255,.22),transparent 60%);transition:opacity var(--d-2) var(--ease)}
.card:hover .card__glow{opacity:1}

/* ---- badge ---- */
.badge{display:inline-flex;align-items:center;font-family:var(--font-en);font-size:.75rem;font-weight:var(--w-sb);
  letter-spacing:.04em;color:var(--c-violet);background:var(--purple-soft);border:1px solid rgba(139,92,255,.32);
  border-radius:var(--r-full);padding:5px 12px}
.badge--cyan{color:var(--c-cyan);background:rgba(98,231,255,.08);border-color:rgba(98,231,255,.32)}

/* ---- chip ---- */
.chip{display:inline-flex;align-items:center;font-size:.875rem;font-weight:var(--w-md);color:var(--text-body);
  background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--r-full);padding:9px 16px;
  cursor:pointer;transition:all var(--d-1) var(--ease)}
.chip:hover{border-color:var(--border-hover);color:#fff}
.chip.is-active{background:var(--purple-soft);border-color:var(--c-purple);color:#fff}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}