:root{
  --bg:#050505;
  --bg-soft:#090909;
  --line:#242424;
  --line-soft:#171717;
  --text:#f4f4f4;
  --muted:#8b8b8b;
  --muted-2:#555;
  --max:1120px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.045),transparent 28%),
    radial-gradient(circle at 85% 55%,rgba(255,255,255,.018),transparent 24%),
    linear-gradient(#050505,#050505);
}
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
.site-header{
  height:96px;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 34px;position:sticky;top:0;background:rgba(5,5,5,.82);
  backdrop-filter:blur(16px);z-index:20;
}
.brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.brand img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 9px rgba(255,255,255,.28));transition:.35s var(--ease)}
.brand:hover img{transform:scale(1.08);filter:drop-shadow(0 0 15px rgba(255,255,255,.45))}
.nav{display:flex;gap:28px;margin-left:auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.nav a{color:#999;transition:.25s}
.nav a:hover{color:#fff}
.menu-btn{display:none;background:none;border:0}
.hero{
  min-height:calc(100vh - 96px);max-width:var(--max);margin:auto;
  display:flex;align-items:center;justify-content:center;position:relative;
  padding:80px 32px;
}
.hero-mark{text-align:center;margin-top:-40px}
.hero-logo{
  width:clamp(110px,12vw,170px);height:clamp(110px,12vw,170px);
  object-fit:contain;display:block;margin:0 auto 28px;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.28));
  transition:.35s var(--ease)
}
.hero-logo:hover{transform:scale(1.04);filter:drop-shadow(0 0 24px rgba(255,255,255,.42))}
.eyebrow,.mini-label{
  color:#777;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.hero h1{
  font-size:clamp(48px,9vw,118px);line-height:.82;letter-spacing:-.07em;
  margin:20px 0 22px;font-weight:900;text-transform:uppercase;
}
.hero p{color:#8c8c8c;font-size:14px;line-height:1.7;margin:0}
.hero-actions{display:flex;justify-content:center;gap:10px;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:42px;padding:0 18px;border:1px solid #363636;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.08em;transition:.25s var(--ease);
}
.btn-primary{background:#f3f3f3;color:#050505;border-color:#f3f3f3}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,255,255,.08)}
.btn-ghost{color:#ddd}.btn-ghost:hover{background:#111;border-color:#555;transform:translateY(-2px)}
.scroll-note{
  position:absolute;bottom:28px;left:32px;color:#555;font-size:9px;letter-spacing:.2em;
  display:flex;align-items:center;gap:9px
}
.scroll-note span{width:5px;height:5px;border-radius:50%;background:#777}
.section{
  max-width:var(--max);margin:auto;padding:110px 32px;border-top:1px solid var(--line-soft)
}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px}
.section-head h2{
  font-size:clamp(34px,5vw,58px);letter-spacing:-.055em;margin:12px 0 0;line-height:.95
}
.section-index{color:#444;font-size:12px;font-weight:700}
.featured{
  display:grid;grid-template-columns:1fr 1fr;min-height:440px;
  border:1px solid var(--line);background:#080808
}
.featured-art{
  min-height:440px;display:flex;align-items:center;justify-content:center;position:relative;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.07),transparent 25%),
    linear-gradient(135deg,#0a0a0a,#050505);
  border-right:1px solid var(--line)
}
.featured-art:before{
  content:"";position:absolute;width:180px;height:180px;border:1px solid #222;border-radius:50%;
}
.play-ring{
  width:70px;height:70px;border:1px solid #444;border-radius:50%;display:grid;place-items:center;
  padding-left:3px;color:#fff;font-size:17px;transition:.3s var(--ease)
}
.featured:hover .play-ring{transform:scale(1.08);border-color:#777}
.featured-art span{position:absolute;bottom:22px;left:24px;color:#4f4f4f;font-size:9px;letter-spacing:.16em}
.featured-copy{padding:52px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.featured-copy h3,.discord-copy h3{font-size:clamp(28px,4vw,46px);letter-spacing:-.045em;line-height:1.02;margin:18px 0}
.featured-copy p,.discord-copy p{color:#888;line-height:1.7;font-size:14px;max-width:460px}
.text-link{
  margin-top:25px;display:inline-flex;gap:14px;align-items:center;
  font-size:10px;font-weight:800;letter-spacing:.13em;border-bottom:1px solid #555;padding-bottom:8px;
  transition:.25s
}
.text-link:hover{border-color:#fff;gap:20px}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.project-card{
  min-height:360px;border:1px solid var(--line);background:#080808;padding:26px;
  display:flex;flex-direction:column;justify-content:space-between;transition:.35s var(--ease);
  position:relative;overflow:hidden
}
.project-card:after{
  content:"";position:absolute;width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.025);right:-100px;bottom:-100px;transition:.4s
}
.project-card:hover{border-color:#444;transform:translateY(-3px)}
.project-card:hover:after{transform:scale(1.4)}
.project-top{display:flex;justify-content:space-between;color:#555;font-size:9px;letter-spacing:.15em;font-weight:700}
.project-card h3{font-size:32px;letter-spacing:-.04em;margin:18px 0 8px}
.project-card p{color:#777;font-size:13px;line-height:1.65;max-width:440px;margin:0}
.project-status{font-size:9px;color:#555;letter-spacing:.15em;font-weight:700}
.project-icon{height:105px;width:105px;margin-bottom:15px;color:#eee;position:relative;display:flex;align-items:center;justify-content:center}
.spreadsheet-icon{display:grid;grid-template-columns:repeat(3,25px);grid-template-rows:repeat(2,25px);gap:2px}
.spreadsheet-icon i{border:1px solid #777;display:block}.spreadsheet-icon i:first-child{background:#eee}
.code-icon{font-size:50px;font-weight:800;letter-spacing:-.1em}
.web-icon{border:1px solid #777;border-radius:50%}
.web-icon:before,.web-icon:after{content:"";position:absolute;border:1px solid #555;border-radius:50%}
.web-icon:before{inset:17px 35px}.web-icon:after{inset:35px 17px}
.plus-icon{font-size:80px;font-weight:200;color:#777}
.social-list{border-top:1px solid var(--line)}
.social-row{
  min-height:92px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:58px 1fr 30px;
  align-items:center;transition:.25s;padding:0 18px
}
.social-row:hover{background:#0b0b0b;padding-left:26px}
.social-icon{width:34px;height:34px;border:1px solid #444;border-radius:50%;display:grid;place-items:center;font-size:14px}
.social-row strong{display:block;font-size:15px}.social-row small{display:block;color:#666;margin-top:4px;font-size:11px}
.arrow{color:#555;font-size:18px}
.discord-wrap{
  display:grid;grid-template-columns:1fr 350px;gap:70px;align-items:center;
  border:1px solid var(--line);padding:52px;background:#080808
}
.discord-widget{justify-self:end;line-height:0}
.discord-widget iframe{max-width:100%;border:1px solid #222;border-radius:5px}
.contact{
  max-width:var(--max);margin:auto;padding:110px 32px 130px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:50px
}
.contact h2{font-size:clamp(42px,7vw,82px);letter-spacing:-.06em;line-height:.9;margin:16px 0}
.contact-side{max-width:320px;align-self:flex-end}.contact-side p{color:#777;font-size:13px;line-height:1.7}
.footer{
  border-top:1px solid var(--line);padding:24px 34px;color:#555;font-size:9px;letter-spacing:.12em;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-transform:uppercase
}
.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand img{width:32px;height:32px;object-fit:contain}
.footer>a{justify-self:end}.footer>a:hover{color:#fff}
@media(max-width:760px){
  .site-header{height:76px;padding:0 20px}.brand img{width:50px;height:50px}
  .nav{display:none}.menu-btn{display:flex;flex-direction:column;gap:5px;margin-left:auto;padding:8px}
  .menu-btn span{width:22px;height:1px;background:#aaa}
  .hero{min-height:calc(100vh - 76px);padding:60px 20px}
  .hero h1{font-size:22vw}.hero-actions{flex-direction:column;align-items:center}.btn{width:210px}
  .scroll-note{left:20px}.section{padding:80px 20px}
  .featured{grid-template-columns:1fr}.featured-art{min-height:300px;border-right:0;border-bottom:1px solid var(--line)}
  .featured-copy{padding:34px 26px}.project-grid{grid-template-columns:1fr}.project-card{min-height:330px}
  .discord-wrap{grid-template-columns:1fr;gap:40px;padding:30px 20px}.discord-widget{justify-self:center}
  .discord-widget iframe{width:min(350px,100%);height:500px}
  .contact{padding:80px 20px 100px;display:block}.contact-side{margin-top:45px}
  .footer{padding:20px;grid-template-columns:1fr auto}.footer>span{display:none}
}

.project-placeholder .question-mark{
  font-size:110px;line-height:1;font-weight:200;color:#2d2d2d;
  letter-spacing:-.08em;margin:6px 0 2px;
  transition:.4s var(--ease);
}
.project-placeholder:hover .question-mark{color:#777;transform:translateX(5px)}
.social-icon svg{width:17px;height:17px;display:block}
.instagram-icon svg{fill:none;stroke:#eee;stroke-width:1.7}
.instagram-icon .fill{fill:#eee;stroke:none}
.youtube-icon svg{fill:#eee;stroke:none}
.youtube-icon .yt-play{fill:#080808}


.featured-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}


/* LOADING SCREEN */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #050505;
  display: grid;
  place-items: center;
  opacity: 1;
  visibility: visible;
  transition: opacity .65s var(--ease), visibility .65s;
}
.loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-inner {
  width: min(320px, 70vw);
  text-align: center;
}
.loading-logo {
  width: 74px;
  height: 74px;
  object-fit: contain;
  margin-bottom: 28px;
  filter: drop-shadow(0 0 16px rgba(255,255,255,.28));
  animation: loadingPulse 1.8s ease-in-out infinite;
}
.loading-word {
  min-height: 18px;
  color: #eee;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.loading-word i {
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-left: 4px;
  vertical-align: -2px;
  background: #aaa;
  animation: cursorBlink .65s steps(1) infinite;
}
.loading-line {
  width: 100%;
  height: 1px;
  margin-top: 22px;
  overflow: hidden;
  background: #1b1b1b;
}
.loading-line span {
  display: block;
  width: 35%;
  height: 100%;
  background: #aaa;
  animation: loadingLine 1.5s var(--ease) infinite;
}
@keyframes loadingPulse {
  0%,100% { transform: scale(.96); opacity: .7; }
  50% { transform: scale(1.04); opacity: 1; }
}
@keyframes cursorBlink {
  0%,45% { opacity: 1; }
  46%,100% { opacity: 0; }
}
@keyframes loadingLine {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(340%); }
}

/* LIVE PROJECT */
.project-live h3 {
  max-width: 520px;
}
.project-link {
  margin-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .loading-logo, .loading-word i, .loading-line span {
    animation: none;
  }
  .loading-screen {
    transition: none;
  }
}


/* CSI project artwork */
.project-csi {
  overflow: hidden;
}
.project-csi-art {
  display: block;
  margin: 4px 0 14px;
  overflow: hidden;
  border: 1px solid #252525;
  background: #063b2e;
  aspect-ratio: 16 / 8.6;
  border-radius: 8px;
  position: relative;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background .5s var(--ease);
}
.banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .6s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
}
.banner-img-csi {
  opacity: 1;
}
.banner-img-bsi {
  opacity: 0;
  transform: scale(1.02);
}
.project-csi.is-blue-mode .banner-img-csi {
  opacity: 0;
  transform: scale(0.98);
}
.project-csi.is-blue-mode .banner-img-bsi {
  opacity: 1;
  transform: scale(1);
}
.project-csi.is-blue-mode .project-csi-art {
  background: #02122b;
}
.project-csi-art:hover {
  border-color: #00ff9d;
  box-shadow: 0 0 30px rgba(0,255,157,.22);
}
.project-csi.is-blue-mode .project-csi-art:hover {
  border-color: #00d2ff;
  box-shadow: 0 0 30px rgba(0,210,255,.28);
}
.project-csi-art:hover .banner-img {
  transform: scale(1.035);
  filter: saturate(1.2) brightness(1.06);
}

/* Project badges */
.project-badge {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  border: 1px solid #222;
  background: #09090b;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 8px 0 16px;
  padding: 6px;
  box-sizing: border-box;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.project-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  transition: transform .35s var(--ease), filter .35s var(--ease);
}

/* Dual badge crossfade for CSI / BSI */
.project-badge-csi {
  position: relative;
}
.project-badge-csi .badge-logo {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.project-badge-csi .badge-logo-csi {
  opacity: 1;
}
.project-badge-csi .badge-logo-bsi {
  opacity: 0;
  transform: scale(0.92);
}
.project-csi.is-blue-mode .badge-logo-csi {
  opacity: 0;
  transform: scale(0.92);
}
.project-csi.is-blue-mode .badge-logo-bsi {
  opacity: 1;
  transform: scale(1);
}

/* Morphing Title */
.morph-title {
  min-height: 38px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 32px;
  letter-spacing: -.04em;
  margin: 18px 0 8px;
}
.morph-cursor {
  display: inline-block;
  margin-left: 3px;
  color: inherit;
  opacity: .8;
  animation: cursorBlink .65s steps(1) infinite;
}
#csi-morph-text {
  transition: color .4s, text-shadow .4s;
}
#csi-morph-text.text-clean {
  color: #00ff9d;
  text-shadow: 0 0 16px rgba(0, 255, 157, 0.4);
}
#csi-morph-text.text-blue {
  color: #00d2ff;
  text-shadow: 0 0 16px rgba(0, 210, 255, 0.5);
}

/* CSI (Hover: Green) */
.project-csi {
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.project-csi:hover {
  border-color: #00ff9d;
  box-shadow: 0 14px 42px rgba(0, 255, 157, 0.16);
  transform: translateY(-4px);
}
.project-csi:hover:after {
  background: radial-gradient(circle, rgba(0, 255, 157, 0.18), transparent 70%);
  transform: scale(1.4);
}
.project-csi:hover .project-badge-csi {
  border-color: #00ff9d;
  box-shadow: 0 0 24px rgba(0, 255, 157, 0.45);
  transform: scale(1.06);
}
.project-csi:hover .project-badge-csi img {
  filter: brightness(1.1) drop-shadow(0 0 8px rgba(0, 255, 157, 0.6));
}
.project-csi:hover .project-number,
.project-csi:hover .project-type,
.project-csi:hover .project-status {
  color: #00ff9d;
}
.project-csi:hover .project-link {
  border-color: #00ff9d;
  color: #00ff9d;
  gap: 20px;
}

/* Blue Mode Card Transitions */
.project-csi.is-blue-mode {
  border-color: rgba(0, 110, 255, 0.25);
}
.project-csi.is-blue-mode:hover {
  border-color: #00d2ff;
  box-shadow: 0 14px 42px rgba(0, 110, 255, 0.25);
}
.project-csi.is-blue-mode:hover:after {
  background: radial-gradient(circle, rgba(0, 210, 255, 0.22), transparent 70%);
}
.project-csi.is-blue-mode .project-badge-csi {
  border-color: rgba(0, 110, 255, 0.35);
}
.project-csi.is-blue-mode:hover .project-badge-csi {
  border-color: #00d2ff;
  box-shadow: 0 0 24px rgba(0, 210, 255, 0.5);
}
.project-csi.is-blue-mode:hover .project-number,
.project-csi.is-blue-mode:hover .project-type,
.project-csi.is-blue-mode:hover .project-status {
  color: #00d2ff;
}
.project-csi.is-blue-mode:hover .project-link {
  border-color: #00d2ff;
  color: #00d2ff;
}

/* HSJM (Hover: Red) */
.project-hsjm {
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.project-hsjm:hover {
  border-color: #ff2a3b;
  box-shadow: 0 14px 42px rgba(255, 42, 59, 0.22);
  transform: translateY(-4px);
}
.project-hsjm:hover:after {
  background: radial-gradient(circle, rgba(255, 42, 59, 0.22), transparent 70%);
  transform: scale(1.4);
}
.project-hsjm:hover .project-badge-hsjm {
  border-color: #ff2a3b;
  box-shadow: 0 0 24px rgba(255, 42, 59, 0.5);
  transform: scale(1.06);
}
.project-hsjm:hover .project-badge-hsjm img {
  filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 42, 59, 0.6));
}
.project-hsjm:hover .project-number,
.project-hsjm:hover .project-type,
.project-hsjm:hover .project-status {
  color: #ff3344;
}
.project-hsjm:hover .project-link {
  border-color: #ff2a3b;
  color: #ff4d5e;
  gap: 20px;
}

/* JDMPARK (Hover: JDM Redline / Racing Glow) */
.project-jdmpark {
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.project-jdmpark:hover {
  border-color: #ff3838;
  box-shadow: 0 14px 42px rgba(255, 56, 56, 0.2);
  transform: translateY(-4px);
}
.project-jdmpark:hover:after {
  background: radial-gradient(circle, rgba(255, 56, 56, 0.22), transparent 70%);
  transform: scale(1.4);
}
.project-jdmpark:hover .project-badge-jdmpark {
  border-color: #ff3838;
  box-shadow: 0 0 24px rgba(255, 56, 56, 0.5);
  transform: scale(1.06);
}
.project-jdmpark:hover .project-badge-jdmpark img {
  filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 56, 56, 0.6));
}
.project-jdmpark:hover .project-number,
.project-jdmpark:hover .project-type,
.project-jdmpark:hover .project-status {
  color: #ff3838;
}
.project-jdmpark:hover .project-link {
  border-color: #ff3838;
  color: #ff5c5c;
  gap: 20px;
}
.project-soon {
  cursor: default;
  opacity: .8;
}