@font-face{
  font-family:"KongText";
  src:url("/assets/fonts/KONGTEXT.TTF") format("truetype");
  font-display:swap;
}

:root{
  --mx:50%;
  --my:35%;

  --black:#02040a;
  --blue:#2aa8ff;
  --cyan:#52e1ff;
  --red:#ff2e55;

  --text:#eaf2ff;
  --muted:#a7b7d9;

  --panel:rgba(6,10,22,.62);
  --panel2:rgba(8,14,30,.82);

  --max:1200px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR",Arial,sans-serif;
  line-height:1.55;
  background:
    radial-gradient(900px 520px at var(--mx) var(--my), rgba(82,225,255,.22), transparent 60%),
    radial-gradient(780px 520px at calc(100% - var(--mx)) calc(100% - var(--my)), rgba(255,46,85,.18), transparent 60%),
    linear-gradient(145deg, #0b0f28 0%, #070a18 35%, var(--black) 100%);
  overflow-x:hidden;
}

/* neon cloud overlay */
body::before{
  content:"";
  position:fixed; inset:-25%;
  pointer-events:none;
  background:
    conic-gradient(from 180deg at 50% 50%,
      rgba(255,46,85,.14),
      rgba(42,168,255,.14),
      rgba(82,225,255,.12),
      rgba(255,46,85,.12),
      rgba(42,168,255,.14)
    );
  filter: blur(70px);
  opacity:.40;
  mix-blend-mode: screen;
  animation: spin 12s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  body::before{ animation:none; }
}

/* scanlines + subtle grid */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0px, rgba(0,0,0,.05) 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 6px);
  opacity:.22;
  mix-blend-mode: overlay;
}

.container{ width:min(var(--max), calc(100% - 32px)); margin:0 auto; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* readability */
.outline{
  text-shadow:
    2px 0 0 rgba(0,0,0,.82),
   -2px 0 0 rgba(0,0,0,.82),
    0 2px 0 rgba(0,0,0,.82),
    0 -2px 0 rgba(0,0,0,.82),
    2px 2px 0 rgba(0,0,0,.82),
   -2px 2px 0 rgba(0,0,0,.82),
    2px -2px 0 rgba(0,0,0,.82),
   -2px -2px 0 rgba(0,0,0,.82),
    0 0 18px rgba(42,168,255,.12),
    0 0 18px rgba(255,46,85,.10);
}

/* header */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(2,4,10,.62);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 0;
}
.brand{ display:flex; align-items:center; gap:10px; min-width:220px; }
.brand img{
  width:44px; height:44px; object-fit:contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.65));
}
.brand-title{
  font-family:"KongText",ui-monospace,monospace;
  font-size:14px; letter-spacing:.6px;
}
.navlinks{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }

.tab{
  position:relative;
  display:inline-flex; align-items:center;
  padding:9px 10px;
  border:2px solid rgba(255,255,255,.12);
  background:rgba(6,10,22,.55);
  box-shadow:0 0 0 2px rgba(0,0,0,.45) inset;
  font-family:"KongText",ui-monospace,monospace;
  font-size:12px;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.tab::before{
  content:"";
  position:absolute; inset:-2px;
  background:linear-gradient(90deg, rgba(255,46,85,.75), rgba(42,168,255,.75), rgba(82,225,255,.55));
  opacity:0;
  filter:blur(12px);
  z-index:-1;
  transition:opacity .15s ease;
}
.tab:hover{ text-decoration:none; transform:translateY(-1px); border-color:rgba(42,168,255,.35); }
.tab:hover::before{ opacity:.55; }
.tab.active{
  border-color:rgba(82,225,255,.75);
  box-shadow:0 0 0 2px rgba(0,0,0,.55) inset, 0 0 22px rgba(42,168,255,.16), 0 0 18px rgba(255,46,85,.10);
}

/* cards (panels are made transparent for "no base rectangle") */
.panel{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.panel::before, .panel::after{ display:none !important; }

.card{
  position:relative;
  background:var(--panel2);
  border:2px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 2px rgba(0,0,0,.55) inset, 0 18px 50px rgba(0,0,0,.45);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  will-change:transform;
}

.tilt-inner{ will-change: transform; }

.hero{ padding:26px 0 14px; }
.h1{ margin:0 0 10px; font-family:"KongText",ui-monospace,monospace; font-size:20px; }
.p{ margin:0 0 12px; color:var(--muted); font-size:14px; }
.kv{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px;
  border:2px solid rgba(255,255,255,.12);
  background:rgba(8,14,30,.70);
  box-shadow:0 0 0 2px rgba(0,0,0,.45) inset;
  font-family:"KongText",ui-monospace,monospace;
  font-size:12px;
  transition:transform .12s ease, border-color .12s ease;
}
.btn.primary{ border-color:rgba(82,225,255,.75); }
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

/* home fullpage */
.deck{
  height: calc(100vh - 70px);
  overflow:auto;
  scroll-snap-type: y mandatory;
  scroll-behavior:smooth;
  border-top:1px solid rgba(255,255,255,.06);
}
.screen{
  height: calc(100vh - 70px);
  scroll-snap-align: start;
  display:flex;
  align-items:center;
  padding: 22px 0;
}
.screen .container{ width:min(var(--max), calc(100% - 32px)); }

.center-logo{
  display:flex; align-items:center; justify-content:center;
  padding: 30px 0 10px;
}
.center-logo img{
  width:min(520px, 76vw);
  height:auto;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.65));
}
.home-menu{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-top: 10px;
}

/* side nav */
.side-nav{
  position:fixed;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* dropdown drawer */
.dropdown{ position:relative; }
.dropdown::after{
  content:"";
  position:absolute;
  left:-10px; right:-10px;
  top:100%;
  height:16px;
}
.dropdown-menu{
  display:block;
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 260px;

  overflow:hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;

  transform: translateY(-8px);
  transition: max-height .22s ease, opacity .18s ease, transform .22s ease;

  background: rgba(6,10,22,.92);
  border: 2px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 2px rgba(0,0,0,.55) inset, 0 18px 50px rgba(0,0,0,.55);
  padding: 10px;
}
.dropdown.open .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  max-height: 420px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dropdown-item{
  display:block;
  padding: 10px 10px;
  margin-bottom: 10px;
  border: 2px solid rgba(255,255,255,.10);
  background: rgba(8,14,30,.80);
  box-shadow: 0 0 0 2px rgba(0,0,0,.45) inset;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0;
}
.dropdown-item:last-child{ margin-bottom:0; }
.dropdown-item:hover{ text-decoration:none; border-color: rgba(82,225,255,.45); }

/* orbit 2D */
.orbit2d-wrap{
  position:relative;
  height: 520px;
}
.orbit2d{
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
}
.orbit2d .orbit-item{
  position:absolute;
  left:0;
  top:0;
}
.orbit-card{
  width: 340px;
  padding: 16px;
}
@media (max-width: 640px){
  .orbit-card{ width: 300px; }
  .orbit2d-wrap{ height: 560px; }
}

.thumb{
  width:100%;
  height: 140px;
  border:2px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 10px;
}
.thumb span{
  font-family:"KongText",ui-monospace,monospace;
  font-size: 11px;
  opacity:.9;
}

.title, .subtitle{
  font-family:"KongText",ui-monospace,monospace;
}
.subtitle{
  margin: 6px 0 10px;
  font-size: 12px;
  opacity: .95;
}

/* footer block */
.corp-footer{
  margin-top: 18px;
  padding: 18px 0 30px;
  color: rgba(167,183,217,.90);
  font-size: 12px;
}
.corp-links{
  display:flex; flex-wrap:wrap; gap:14px;
  font-family:"KongText",ui-monospace,monospace;
  font-size: 11px;
  color: rgba(234,242,255,.85);
}
.corp-links a{ color: rgba(234,242,255,.85); }
.corp-info{
  margin-top: 12px;
  color: rgba(167,183,217,.85);
  line-height: 1.7;
}
.corp-logo{
  margin-top: 12px;
  display:flex; align-items:center; gap:10px;
}
.corp-logo img{ width: 86px; height:auto; opacity:.95; }