:root {
  --bg: #0f1216;
  --fg: #e6ebee;
  --muted: #9aa6ad;
  --accent: #afc6ff;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 800px at 70% 40%, #1a1f25 0%, var(--bg) 50%, #0b0e11 100%);
  color: var(--fg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

body.stats{ background: linear-gradient(180deg, #141a21 0%, #0f1318 50%, #0b0e11 100%); }
body.business{ background: #0F1116; }
body.recruit{ background: #000000; }

body.home{
  background:
    linear-gradient(180deg, #141a21 0%, #0f1318 60%, #0b0e11 100%);
}

.mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; letter-spacing: .02em; }

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.three-container {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.overlay {
  position: relative;
  height: 100%;
  width: 100%;
  pointer-events: none;
  z-index: 1;
}

.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(32vw, 360px);
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.45)) brightness(1.05);
  z-index: 20;
  pointer-events: none;
}

.topbar { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; pointer-events: none; z-index: 20; }
.topbar .audio-toggle{ pointer-events: auto; }
.topbar .label { font-size: 12px; color: var(--muted); text-transform: uppercase; pointer-events: none; }
.topbar .breadcrumb { pointer-events: auto; }
.topbar .breadcrumb a, .topbar .breadcrumb .current { font-size: 12px; color: #cfd6dc; text-decoration: none; opacity: .9; }
.topbar .breadcrumb a:hover { color: #ffffff; text-shadow: 0 0 10px rgba(175,198,255,.35); }
.topbar .breadcrumb .sep { margin: 0 6px; color: var(--muted); }

.left-block {
  position: absolute;
  left: min(6vw, 80px);
  top: 26vh;
  max-width: 360px;
}

.quote {
  line-height: 1.8;
  font-weight: 300;
  color: #cfd6dc;
  text-shadow: 0 0 20px rgba(175, 198, 255, 0.15);
}

.chapter { margin-top: 16px; font-size: 12px; color: var(--muted); }

.right-list {
  position: absolute;
  right: min(6vw, 80px);
  top: 16vh;
  list-style: none;
  margin: 0; padding: 0;
  width: clamp(300px, 28vw, 460px);
  font-size: 12px;
  color: var(--muted);
  height: clamp(360px, 70vh, 800px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.8) 24px, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.8) 24px, #000 90%, transparent 100%);
  z-index: 3;
}
.right-list { position: absolute; }
.right-list .list-track { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
.right-list li { display: block; padding: 8px 0 14px; border-bottom: 1px dashed rgba(255,255,255,.06); }
.right-list li .row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.right-list li .label { color: #ffffff; font-weight: 400; flex: 1 1 auto; }
.right-list li .value { color: #ffffff; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 600; flex: 0 0 auto; }
.right-list li .value .num { font-size: 26px; font-weight: 700; letter-spacing: .02em; color: #D23968; }

@media (min-width: 1200px) {
  .right-list li .value { font-size: 20px; }
  .right-list li .value .num { font-size: 30px; }
}
.right-list li small { display: block; margin-top: 6px; color: var(--muted); opacity: .9; line-height: 1.5; }

/* Hover highlight (glow) */
.right-list li.highlight { position: relative; }
.right-list li.highlight::before {
  content: "";
  position: absolute; left: -12px; right: -12px; top: -6px; bottom: -6px;
  background: radial-gradient(120% 80% at 10% 50%, rgba(var(--hl-rgb, 210,57,104), .24), transparent 70%);
  filter: blur(6px);
  opacity: .9;
  pointer-events: none;
}
.right-list li.highlight .label, .right-list li.highlight .value { color: #fff; }
.right-list li.highlight .value .num { color: var(--hl-accent, #ff5b8d); text-shadow: 0 0 10px rgba(var(--hl-rgb, 210,57,104), .55); }

.bottom-center {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .12em;
}

.total {
  position: absolute;
  right: min(6vw, 80px);
  bottom: 40px;
  font-size: 12px;
  color: var(--muted);
}

.corner { position: absolute; width: 36px; height: 36px; border: 2px solid rgba(255,255,255,.3); z-index: 18; }
.corner.tl { top: 24px; left: 24px; border-right: none; border-bottom: none; }
.corner.tr { top: 24px; right: 24px; border-left: none; border-bottom: none; }
.corner.bl { bottom: 24px; left: 24px; border-right: none; border-top: none; }
.corner.br { bottom: 24px; right: 24px; border-left: none; border-top: none; }

.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 50% at 50% 50%, transparent 30%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
}

.stats-tooltip{ position: fixed; left: 0; top: 0; transform: translate(-50%, -8px) scale(.98); opacity: 0; pointer-events: none; z-index: 7; min-width: 280px; width: clamp(320px, 42vw, 560px); max-width: 600px; padding: 14px 16px; color:#e6ebee; background: rgba(8,10,13,.82); border:1px solid rgba(255,255,255,.14); border-radius: 12px; backdrop-filter: blur(8px); box-shadow: 0 18px 50px rgba(0,0,0,.5); transition: opacity .15s ease, transform .15s ease; }
.stats-tooltip.show{ opacity: 1; transform: translate(-50%, -14px); }
.stats-tooltip .title{ font-size: 13px; color: #afc6ff; letter-spacing: .18em; margin-bottom: 8px; text-transform: uppercase; opacity:.95; }
.stats-tooltip .content{ display:flex; align-items: flex-start; gap: 14px; }
.stats-tooltip .desc{ flex:1 1 auto; min-width: 0; font-size: 13px; color:#cfd6dc; line-height: 1.7; opacity:.95; }
.stats-tooltip .title-row{ display:flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.stats-tooltip .headline{ font-size: clamp(14px, 1.8vw, 22px); color: #afc6ff; letter-spacing: .18em; text-transform: uppercase; opacity:.95; }
.stats-tooltip .big-num{ font-size: clamp(22px, 4vw, 40px); font-weight: 800; color: #ffffff; letter-spacing: .02em; }
.stats-tooltip::after{ content:""; position:absolute; left:50%; bottom:-8px; transform: translateX(-50%); width:0; height:0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top:8px solid rgba(8,10,13,.82); filter: drop-shadow(0 -1px 0 rgba(255,255,255,.14)); }

.stats-modal{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 9; }
.stats-modal.show{ display: flex; }
.stats-modal::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.stats-modal .stats-modal-inner{ position: relative; z-index: 1; width: min(92vw, 680px); background: rgba(8,10,13,.9); border:1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 16px; color:#e6ebee; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.stats-modal .stats-modal-inner .close{ position:absolute; top:8px; right:8px; width:32px; height:32px; border:none; border-radius:8px; background: rgba(255,255,255,.12); color:#fff; font-size:16px; cursor:pointer; }
.stats-modal .stats-modal-inner .next{ position:absolute; bottom:-18px; left:50%; transform: translateX(-50%); width:44px; height:44px; border:1px solid rgba(255,255,255,.28); border-radius:50%; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); color:#ffffff; font-size:28px; line-height:44px; text-align:center; box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 20px rgba(255,255,255,.12); text-shadow: 0 1px 8px rgba(175,198,255,.65); cursor:pointer; }
.stats-modal .stats-modal-inner .next:active{ transform: translateX(-50%) scale(.98); }
.stats-modal .body .headline{ font-size: clamp(16px, 2vw, 22px); color:#afc6ff; letter-spacing:.14em; text-transform: uppercase; }
.stats-modal .body .big-num{ font-size: clamp(22px, 6vw, 40px); font-weight: 800; letter-spacing:.02em; }
.stats-modal .body .desc{ margin-top: 6px; color:#cfd6dc; line-height:1.8; }

canvas.rings {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .35;
}

@media (max-width: 960px) {
  body.about .hero{ height: auto; min-height: 100vh; overflow: visible; }
  body.about .overlay{ height: auto; min-height: 100vh; pointer-events: auto; }
  body.about{ overflow-y: auto; }
  body.about .about-wrap{ padding-bottom: 14vh; }
  body.about .about-columns{ display:block; }
  body.about .company-card{ margin-top: 14px; }
  .left-block { top: 16vh; max-width: 80vw; left: 24px; }
  body.about .three-container{ position: fixed; inset: 0; z-index: 0; }
  body.about .overlay{ position: relative; z-index: 1; }
  .right-list {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 38vh;
    width: auto;
    max-height: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(0,0,0,.18);
    padding: 8px 12px;
    border-radius: 10px;
  }
  .values-list { left: 24px !important; right: 24px !important; top: 38vh !important; width: auto !important; height: auto !important; max-height: 48vh; overflow-y:auto; -webkit-overflow-scrolling: touch; }
  .right-list li { padding: 10px 0; }
  .right-list li .row { display: flex; justify-content: space-between; gap: 12px; }
  .right-list li .label { font-size: 13px; }
  .right-list li .value { font-size: 16px; }
  .right-list li .value .num { font-size: 22px; }
  .nav-jump { left: 24px; bottom: 24px; }
  .logo {
    width: min(48vw, 240px);
    left: 24px;
    top: 12vh;
    transform: none;
    z-index: 3;
  }
}

.nav-jump {
  position: absolute; left: min(6vw, 80px); bottom: 56px; z-index: 20; pointer-events: auto; visibility: hidden;
}
.nav-jump.ready{ visibility: visible; }
.nav-jump ul { list-style: none; margin: 0; padding: 0; }
.nav-jump li { margin: 6px 0; }
.nav-jump a { color: #cfd6dc; text-decoration: none; font-size: 12px; letter-spacing: .04em; opacity: .9; }
.nav-jump a:hover { color: #ffffff; text-shadow: 0 0 10px rgba(175,198,255,.35); }

.nav-hamburger{ position: fixed; top: 14px; right: 14px; width: 44px; height: 44px; background: linear-gradient(180deg, rgba(22,26,33,.85), rgba(10,12,16,.85)); border:1px solid rgba(255,255,255,.16); border-radius:12px; display:none; align-items:center; justify-content:center; gap:6px; z-index: 50; flex-direction: column; pointer-events: auto; box-shadow: 0 8px 28px rgba(0,0,0,.35); backdrop-filter: blur(8px); }
.nav-hamburger span{ display:block; width:22px; height:2px; background:#e6ebee; border-radius: 2px; transition: transform .28s ease, opacity .2s ease; }
.nav-hamburger.active span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2){ opacity: 0; }
.nav-hamburger.active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
.nav-drawer{ position: fixed; inset: 0; display: none; z-index: 5; }
.nav-drawer.show{ display:block; }
.nav-drawer .nav-backdrop{ position:absolute; inset:0; background: radial-gradient(120% 120% at 100% 0%, rgba(14,18,24,.6), rgba(6,8,12,.85)); backdrop-filter: blur(4px); }
.nav-drawer .nav-panel{ position:absolute; top:0; bottom:0; right:0; width: 82vw; max-width: 380px; background: rgba(10,12,16,.9); border-left:1px solid rgba(255,255,255,.12); box-shadow: -20px 0 80px rgba(0,0,0,.55); transform: translateX(102%); transition: transform .38s cubic-bezier(.2,.7,.2,1); }
.nav-drawer.show .nav-panel{ transform: translateX(0); }
.nav-drawer .nav-panel-inner{ padding: 18px 20px; }
.nav-drawer .nav-fx{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.4; mix-blend-mode: screen; }
.nav-panel-head{ display:flex; align-items:center; justify-content:space-between; padding: 6px 0 12px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 12px; }
.nav-panel-head .brand{ font-weight: 800; letter-spacing: .08em; color: #e6ebee; font-size: 12px; }
.nav-drawer .nav-panel-inner ul{ list-style:none; margin:0; padding:0; }
.nav-drawer .nav-panel-inner li{ margin: 12px 0; opacity:0; transform: translateY(6px); animation: navItemIn .4s ease forwards; animation-delay: calc(var(--i, 0) * 50ms + 80ms); }
.nav-drawer .nav-panel-inner a{ position: relative; display:inline-block; padding: 8px 12px; color:#e2e8ef; text-decoration:none; font-size:15px; letter-spacing:.02em; border-radius: 999px; }
.nav-drawer .nav-panel-inner a::before{ content:""; position:absolute; inset:0; border-radius:999px; background: linear-gradient(90deg, rgba(95,160,255,.22), rgba(255,255,255,0)); opacity:0; transform: scaleX(.96); transform-origin:left center; transition: opacity .25s ease, transform .25s ease; pointer-events:none; }
.nav-drawer .nav-panel-inner a:hover::before{ opacity:1; transform: scaleX(1); }
.nav-drawer .nav-panel-inner a.active{ color:#ffffff; }
.nav-drawer .nav-panel-inner a.active::before{ opacity:1; }
@keyframes navItemIn{ to{ opacity:1; transform: translateY(0); } }
.nav-drawer .nav-panel-inner a:hover{ color:#fff; }

@media (max-width: 1024px){
  .topbar{ display: flex; align-items: center; gap: 12px; }
}

@media (max-width: 768px){
  .nav-hamburger{ display:flex; }
  .nav-jump{ display: none; }
  .corner.tr{ display: none; }
}

@media (max-width: 480px){
  .bottom-center.copy-center{ font-size: 9px; }
}

@media (min-width: 1440px){
  .right-list{ width: clamp(360px, 24vw, 520px); }
}
.values-list { position: absolute; right: min(6vw, 80px); top: 12vh; width: clamp(320px, 30vw, 520px); z-index: 4; list-style: none; margin: 0; padding: 0; height: 70vh; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%); }
.values-list .list-track { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
.values-list li { background: rgba(0,0,0,.35); margin-bottom: 12px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
.values-list .row { display: flex; justify-content: space-between; gap: 12px; }
.values-list .label { font-size: 14px; color: #fff; }
.values-list small { display: block; margin-top: 6px; font-size: 12px; color: #cfd6dc; line-height: 1.7; }

.value-caption { position: absolute; left: 50%; top: 10vh; transform: translate(-50%, 0); opacity: 0; pointer-events: none; transition: opacity .2s ease; color: #ffffff; font-size: 12px; letter-spacing: .02em; text-align: center; line-height: 1.5; max-width: 92vw; text-shadow: 0 2px 10px rgba(0,0,0,.65); }

.stats-hud{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width: min(92vw, 980px); height: 220px; z-index:4; pointer-events:none; }
.stream-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; filter: blur(0.2px); opacity:.9; }
.stats-glass{ position:absolute; inset:0; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.18); box-shadow: 0 20px 60px rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.stats-value{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.stats-value .label{ color:#afc6ff; font-size:12px; letter-spacing:.2em; opacity:.95; }
.stats-value .big{ color:#ffffff; font-size: clamp(24px, 6vw, 56px); letter-spacing: .02em; font-weight:800; }
.stats-value .big .num{ color:#D23968; text-shadow: 0 0 18px rgba(210,57,104,.35); }
.stats-value .big .suffix{ margin-left: 8px; font-size: clamp(14px,2.6vw,24px); color:#e6ebee; opacity:.9; }


.about-wrap{ position:absolute; left:50%; top: 14vh; transform: translateX(-50%); width: min(92vw, 1200px); z-index: 3; display: flex; flex-direction: column; gap: 20px; }
.about-columns{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
.left-col, .right-col{ display: flex; flex-direction: column; gap: 20px; }
.about-card{ background: rgba(8,10,13,.55); border:1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 22px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.35); backdrop-filter: blur(4px); }
.about-title{ font-size: clamp(24px, 4vw, 40px); font-weight: 800; letter-spacing: .06em; text-align: center; color: #ffffff; text-shadow: 0 0 24px rgba(175,198,255,.22); }
.about-sub{ text-align:center; margin-top: 2px; color:#9aa6ad; font-size: 12px; letter-spacing: .08em; }
.about-divider{ height: 1px; margin: 14px auto 18px; width: 180px; background: linear-gradient(90deg, rgba(210,57,104,0) 0%, rgba(210,57,104,.9) 50%, rgba(210,57,104,0) 100%); box-shadow: 0 0 20px rgba(210,57,104,.35); }
.about-body{ color: #cfd6dc; line-height: 1.9; font-weight: 300; font-size: 14px; }
.about-body p{ margin: 0 0 10px; }


.vision-card{ background: linear-gradient(180deg, rgba(13,16,20,.7), rgba(13,16,20,.45)); border:1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 22px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.vision-kicker{ color:#afc6ff; letter-spacing: .18em; font-size: 12px; margin-bottom: 8px; }
.vision-title{ margin: 0 0 8px; font-size: clamp(18px, 3.2vw, 28px); color:#ffffff; text-shadow: 0 0 18px rgba(175,198,255,.18); }
.vision-card p{ margin:0; color:#cfd6dc; line-height:1.9; font-weight:300; font-size:14px; }

@media (max-width: 960px){
  .about-wrap{ top: 10vh; width: min(94vw, 760px); }
  .about-columns{ grid-template-columns: 1fr; }
}

@media (max-width: 1100px) and (min-width: 769px){
  .about-wrap{ padding-bottom: 180px; }
}

@media (max-width: 960px){
  .about-wrap{ padding-bottom: 200px; }
}

.company-card{ background: rgba(8,10,13,.55); border:1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 22px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.company-kicker{ color:#afc6ff; letter-spacing:.18em; font-size:12px; margin-bottom:6px; }
.company-title{ margin:0 0 12px; font-size: clamp(18px, 3.2vw, 26px); color:#fff; text-shadow: 0 0 18px rgba(175,198,255,.18); }
.company-grid{ display:grid; grid-template-columns: 120px 1fr; gap: 10px 14px; margin:0; }
.company-grid dt{ color:#9aa6ad; font-size:12px; }
.company-grid dd{ margin:0; color:#cfd6dc; line-height:1.9; font-weight:300; }
.company-grid .alt{ color:#afc6ff; font-size:12px; letter-spacing:.06em; opacity:.9; }
@media (max-width: 560px){
  .company-grid{ grid-template-columns: 1fr; }
  .company-grid dt{ margin-top: 10px; }
}

.recruit-visual{ position: relative; width: 100%; height: 100%; min-height: 100vh; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.cloud-back{ position:absolute; left:50%; top:0; transform: translateX(-50%); width: 120vw; height: 100vh; object-fit: cover; object-position: center top; opacity:.45; filter: blur(1px); z-index: 10; pointer-events:none; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); }
.neon-carousel{ position:absolute; left:60%; top: 1vh; transform: translateX(-50%); width: 200vw; height: min(42vh, 480px); z-index: 4; pointer-events: none; overflow: visible; }
@media (max-width: 960px){ .neon-carousel{ width: 160vw; top: 8vh; height: 36vh; } }
.recruit-visual .neon-screen{ position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(34vw, 520px); height: auto; aspect-ratio: 16 / 9; background: radial-gradient(120% 220% at 50% 180%, #ffffff 0%, #f6f8ff 40%, rgba(255,255,255,0.95) 60%, rgba(255,255,255,0.0) 100%); box-shadow: 0 0 40px rgba(255,255,255,.40), 0 0 140px rgba(255,255,255,.2), inset 0 0 32px rgba(255,255,255,.5); border-radius: 8px; overflow: visible; display:flex; align-items: flex-end; justify-content: center; transform-origin: center bottom; will-change: transform, opacity; pointer-events: auto; transition: opacity .25s linear; }
.recruit-visual .neon-screen .board-content{ max-width: 92%; max-height: 92%; width: auto; height: auto; object-fit: contain; position: relative; z-index: 3; transform: translateY(-6%); filter: drop-shadow(0 6px 18px rgba(0,0,0,.25)); }
.recruit-visual .neon-screen::after{ content:""; position:absolute; left:50%; bottom:-6vh; transform: translateX(-50%) scale(1.04); width: 140%; height: 120%; background-image: url('img/recruit/mountain.png'); background-repeat: no-repeat; background-position: center bottom; background-size: 200% auto; opacity: .10; filter: grayscale(1) invert(1) contrast(.3) brightness(1.06) blur(1.2px); -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 22%, rgba(255,255,255,0) 70%); mask-image: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 22%, rgba(255,255,255,0) 70%); pointer-events: none; z-index: 1; }

.fog-overlay{ position:absolute; left:0; right:0; top:0; height: 38vh; z-index: 5; pointer-events:none; background: radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.28) 0%, rgba(255,255,255,.18) 35%, rgba(255,255,255,0) 80%); filter: blur(2px); mix-blend-mode: screen; }
.recruit-visual .mountain-wrap{ position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100vw; height: 100vh; z-index: 5; /* 最前面 */ -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 12%, #000 88%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 12%, #000 88%, rgba(0,0,0,0) 100%); overflow: hidden; }
.recruit-visual .mountain{ position:absolute; left:0; right:0; bottom:0; top:0; width:100%; height:100%; object-fit: cover; object-position: center bottom; display:block; filter: contrast(1.00) brightness(0.98); /* 上方向フェード（地形上部を馴染ませる） */ -webkit-mask-image: linear-gradient(to top, #000 70%, rgba(0,0,0,0.92) 84%, rgba(0,0,0,0.45) 94%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to top, #000 70%, rgba(0,0,0,0.92) 84%, rgba(0,0,0,0.45) 94%, rgba(0,0,0,0) 100%); }
.pin-layer{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.pin{ position:absolute; width: 56px; height: 56px; 
  transform: translate(-50%, -100%) rotateX(22deg) rotateZ(var(--rz, 0deg)) scale(var(--s, 1));
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); opacity:.95; pointer-events:auto; cursor: pointer; will-change: transform;
  background: transparent; border: none; padding: 0; outline: none; appearance: none; -webkit-appearance: none; }
.pin:hover{ transform: translate(-50%, -100%) rotateX(22deg) rotateZ(var(--rz, 0deg)) scale(calc(var(--s,1) * 1.12)); }
.pin img{ width:100%; height:100%; display:block; filter: saturate(90%) brightness(0.96); mix-blend-mode: multiply; }
.pin img[src$="pin2.png"]{ object-fit: contain; object-position: center bottom; }

.member-panel{ position:absolute; left:50%; top:50%; transform: translate(-50%, -52%) scale(.96); width: min(92vw, 860px); max-height: 84vh; background: rgba(8,10,13,.86); border:1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 18px; color:#e6ebee; box-shadow: 0 20px 60px rgba(0,0,0,.55); display:none; z-index: 22; overflow: hidden; opacity: 0; }
.member-panel::before{ content:""; position:absolute; inset:0; background-image: var(--thumb); background-size: cover; background-position: center; filter: blur(18px) saturate(120%); opacity: .16; z-index: 0; }
.member-panel.show{ display:grid; grid-template-columns: 280px 1fr; gap:18px; align-items:start; opacity: 1; transform: translate(-50%, -52%) scale(1); animation: panelIn .45s cubic-bezier(.2,.7,.2,1) both; }
.member-panel.show::before{ animation: panelGlow .6s ease .05s both; }
.member-panel .thumb{ width: 260px; height: 220px; background:#0b0e11 url('img/recruit/member/memberback.jpg') center/cover no-repeat; border-radius: 12px; overflow:hidden; opacity: 0; transform: translateY(6px) scale(.98); }
.member-panel .thumb img{ width:100%; height:100%; object-fit: contain; object-position: center top; }
.member-panel .thumb img[src$="pin2.png"]{ object-position: center center; }
.member-panel .body{ position: relative; z-index: 1; opacity: 0; transform: translateY(8px); max-height: calc(84vh - 260px); overflow: auto; padding-right: 6px; }
.member-panel .name{ font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.member-panel .line{ font-size: 14px; color:#cfd6dc; opacity:.95; white-space: pre-wrap; line-height: 1.9; }
.member-panel .close{ position:absolute; top:8px; right:8px; width:32px; height:32px; border:none; border-radius:8px; background: rgba(255,255,255,.12); color:#fff; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; pointer-events:auto; z-index: 2; }
.member-panel .close:focus-visible{ outline:2px solid rgba(175,198,255,.8); outline-offset:2px; }

@media (max-width: 640px){
  .member-panel{ max-height: 76vh; }
  .member-panel.show{ grid-template-columns: 1fr; }
  .member-panel .thumb{ width: 100%; height: 220px; }
  .member-panel .body{ max-height: calc(86vh - 260px); }
}

@keyframes panelIn{ 0%{ opacity: 0; transform: translate(-50%, -52%) scale(.94);} 100%{ opacity:1; transform: translate(-50%, -52%) scale(1);} }
@keyframes panelGlow{ 0%{ opacity: 0; filter: blur(26px) saturate(140%);} 100%{ opacity: .16; filter: blur(18px) saturate(120%);} }
.member-panel.show .thumb{ animation: thumbIn .45s ease .08s both; }
.member-panel.show .body{ animation: txtIn .45s ease .12s both; }
@keyframes thumbIn{ 0%{ opacity:0; transform: translateY(8px) scale(.96);} 100%{ opacity:1; transform: translateY(0) scale(1);} }
@keyframes txtIn{ 0%{ opacity:0; transform: translateY(8px);} 100%{ opacity:1; transform: translateY(0);} }

@media (max-width: 600px){
  body.recruit .recruit-visual .copy{ margin-bottom: 16vh; padding: 0 14px; }
  body.recruit .recruit-visual .copy .kicker{ font-size: 11px; }
  body.recruit .recruit-visual .copy .headline{ font-size: clamp(18px, 6.4vw, 28px); }
  body.recruit .recruit-visual .copy .lead{ font-size: 12px; }
  body.recruit .recruit-visual::after{ content:""; position:absolute; left:0; right:0; bottom:0; height: 42vh; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 18%, rgba(0,0,0,.28) 36%, rgba(0,0,0,.42) 58%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.62) 100%); z-index: 5; pointer-events: none; }

  body.recruit .pin{ width: 48px; height: 48px; }
  body.recruit .pin-layer .pin:nth-child(1){ left: 26% !important; top: 62% !important; }
  body.recruit .pin-layer .pin:nth-child(2){ left: 46% !important; top: 46% !important; }
  body.recruit .pin-layer .pin:nth-child(3){ left: 64% !important; top: 54% !important; }
  body.recruit .pin-layer .pin:nth-child(4){ left: 82% !important; top: 50% !important; }

  .member-panel.show{ grid-template-columns: 1fr; }
  .member-panel{ width: 92vw; padding: 12px; border-radius: 12px; max-height: 72vh; }
  .member-panel .thumb{ width: 100%; height: 180px; }
  .member-panel .close{ width: 40px; height: 40px; top: 10px; right: 10px; }
  .member-panel .name{ font-size: 16px; }
  .member-panel .line{ font-size: 13px; line-height: 1.8; }
  .member-panel .body{ max-height: calc(72vh - 200px); }

  .credits-inner{ width: 94vw; height: 76vh; padding: 16px; }
  .credits-title{ font-size: 14px; margin-bottom: 10px; }
}

@media (max-width: 430px){
  .member-panel{ width: 92vw; padding: 10px; max-height: 68vh; }
  .member-panel .thumb{ height: 160px; }
  .member-panel .body{ max-height: calc(68vh - 180px); }
  .member-panel .name{ font-size: 14px; }
  .member-panel .line{ font-size: 12px; line-height: 1.75; }
  .member-panel .close{ width: 34px; height: 34px; }
}
.recruit-visual .copy{ position: relative; z-index: 6; text-align: center; margin-bottom: 14vh; text-shadow: 0 8px 30px rgba(0,0,0,.6); pointer-events: auto; }
.recruit-visual .copy .kicker{ color:#dcdcdc; letter-spacing:.22em; font-size:12px; opacity:.95; margin-bottom: 6px; }
.recruit-visual .copy .headline{ margin: 0; font-size: clamp(22px, 4.6vw, 44px); color:#ffffff; letter-spacing:.02em; text-shadow: 0 2px 18px rgba(255,255,255,.22); }
.recruit-visual .copy .lead{ margin: 6px 0 0; color:#cfd6dc; font-size: 14px; line-height: 1.9; font-weight: 300; }
.as-link{ background:none; border:none; padding:0; color:inherit; font: inherit; cursor:pointer; text-shadow: inherit; outline:none; }
.as-link:focus{ outline: none; box-shadow: none; }
.as-link:hover{ text-decoration: underline; }

.credits{ position: fixed; inset:0; display:none; align-items: center; justify-content: center; z-index: 100; }
.credits[aria-hidden="false"]{ display:flex; }
.credits::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.credits-inner{ position: relative; z-index:101; width: min(96vw, 1040px); height: min(80vh, 720px); overflow: auto; border:1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(8,10,13,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 20px 60px rgba(0,0,0,.55); padding: 20px 20px 24px; }
.credits-title{ font-size: 16px; letter-spacing: .2em; color:#afc6ff; text-align:center; margin-bottom: 8px; opacity: .95; }
.credits-inner .track{ position: relative; white-space: pre-wrap; color:#e6ebee; line-height: 1.9; transform: none !important; transition: none !important; bottom: auto; }
.credits-close{ position:absolute; top: 6vh; right: 6vw; z-index:101; width:36px; height:36px; border:none; border-radius:8px; background: rgba(255,255,255,.16); color:#fff; font-size:18px; cursor:pointer; }

.contact-modal{ position: fixed; inset:0; display:none; align-items: center; justify-content: center; z-index: 120; }
.contact-modal[aria-hidden="false"]{ display:flex; }
.contact-modal::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.contact-inner{ position: relative; z-index:1; width: min(94vw, 720px); max-height: 86vh; overflow: auto; background: rgba(8,10,13,.88); border:1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6); color:#e6ebee; }
.contact-title{ margin:0 0 10px; text-align:center; color:#afc6ff; letter-spacing:.18em; }
.contact-inner .row{ margin: 8px 0; }
.contact-inner label{ display:block; font-size: 13px; color:#cfd6dc; }
.contact-inner input, .contact-inner select, .contact-inner textarea{ width:100%; margin-top:6px; padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color:#fff; }
.contact-inner textarea{ resize: vertical; }
.contact-inner .actions{ display:flex; gap:10px; justify-content:flex-end; margin-top: 10px; }
.contact-inner .send{ background:#3a7afe; border:1px solid rgba(255,255,255,.18); color:#fff; padding:10px 14px; border-radius:8px; cursor:pointer; }
.contact-inner .cancel{ background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:#fff; padding:10px 14px; border-radius:8px; cursor:pointer; }
.contact-inner .req{ color:#ff8080; margin-left: 4px; }
.contact-inner .note{ font-size: 12px; color:#9aa6ad; }

@media (max-width: 600px){
  .contact-inner{ width: 94vw; padding: 14px; }
}

@media (max-width: 960px){
  .recruit-visual .neon-screen{ top: 10vh; width: 92vw; height: 34vh; }
  .recruit-visual .copy{ margin-bottom: 18vh; padding: 0 18px; }
  .recruit-visual .mountain-wrap{ bottom: -16vh; }
}

body.contact .hero{ height: auto; min-height: 100vh; overflow: visible; }
body.contact .contact-page{ position:absolute; left:50%; top: 10vh; transform: translateX(-50%); width: min(92vw, 760px); z-index: 2; }
body.contact .contact-form .row{ margin: 10px 0; }
body.contact .contact-form input, body.contact .contact-form select, body.contact .contact-form textarea{ width:100%; padding: 10px 12px; border-radius: 8px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color:#fff; }
body.contact .contact-title{ text-align:center; color:#afc6ff; letter-spacing:.18em; margin: 0 0 12px; }
body.contact .contact-form .actions{ display:flex; justify-content:flex-end; margin-top: 12px; }
body.contact .contact-form .send{ background:#3a7afe; border:1px solid rgba(255,255,255,.18); color:#fff; padding:10px 14px; border-radius:8px; cursor:pointer; }
body.contact .overlay{ pointer-events: auto; }

/* Agree row (checkbox) */
body.contact .contact-form .row.agree label{ display:flex; align-items:center; gap:10px; font-size:12px; color:#cfd6dc; }
body.contact .contact-form .row.agree input[type="checkbox"]{
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06);
  display:inline-block; position: relative; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.25);
}
body.contact .contact-form .row.agree input[type="checkbox"]:focus{ outline: none; box-shadow: 0 0 0 3px rgba(175,198,255,.22), inset 0 0 0 1px rgba(255,255,255,.06); border-color: rgba(175,198,255,.8); }
body.contact .contact-form .row.agree input[type="checkbox"]:checked{
  background: linear-gradient(180deg, #5f9bff, #3a7afe);
  border-color: rgba(255,255,255,.32);
}
body.contact .contact-form .row.agree input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:4px; top:1px; width:8px; height:12px; border:2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg);
}
body.contact .contact-form .row.agree a{ color:#cfe0ff; text-decoration: underline; text-underline-offset: 3px; }

body.policy .overlay{ pointer-events: auto; }
body.policy .hero{ height: auto; min-height: 100vh; overflow: visible; }
body.policy .policy-page{ position: absolute; left:50%; top: 14vh; transform: translateX(-50%); width: min(92vw, 840px); padding: 20px 24px; color:#e6ebee; background: rgba(8,10,13,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.16); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.55); margin-bottom: 12vh; }
body.policy .policy-title{ text-align:center; color:#afc6ff; letter-spacing:.18em; margin: 0 0 12px; }
body.policy .policy-page h2{ font-size: 16px; margin: 18px 0 6px; color:#cfe0ff; }
body.policy .policy-page p{ margin: 0 0 10px; line-height: 1.9; color:#cfd6dc; }

/* ------------------------------------------------------
   Modern Contact Form (glass, glow, custom selects)
   ------------------------------------------------------ */
body.contact .contact-page{ width: min(92vw, 760px); }
body.contact .contact-form{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}
body.contact .contact-form .row{ margin: 14px 0; }
body.contact .contact-form label{
  display: block;
  font-size: 12px;
  color: #cfd6dc;
  letter-spacing: .02em;
}
body.contact .contact-form label .req{ color:#ff8099; font-weight: 600; margin-left: 4px; }
body.contact .contact-form label > input,
body.contact .contact-form label > select,
body.contact .contact-form label > textarea{
  display: block;
  width: 100%;
  margin-top: 8px;
}
body.contact .contact-form input,
body.contact .contact-form select,
body.contact .contact-form textarea{
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  color: #ffffff;
  padding: 12px 14px;
  line-height: 1.4;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .05s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 6px 18px rgba(0,0,0,.25);
}
body.contact .contact-form input::placeholder,
body.contact .contact-form textarea::placeholder{ color: rgba(230,235,238,.55); }
body.contact .contact-form textarea{ resize: vertical; min-height: 140px; }
body.contact .contact-form select{
  background-image: url("data:image/svg+xml;utf8,<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='rgba(175,198,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}
body.contact .contact-form input:focus,
body.contact .contact-form select:focus,
body.contact .contact-form textarea:focus{
  outline: none;
  border-color: rgba(175,198,255,.8);
  box-shadow: 0 0 0 3px rgba(175,198,255,.22), inset 0 0 0 1px rgba(255,255,255,.06);
  background: rgba(255,255,255,.08);
}
body.contact .contact-form .row:focus-within label{ color:#eaf1ff; text-shadow: 0 0 14px rgba(175,198,255,.25); }

/* Buttons */
body.contact .contact-form .actions{ display:flex; justify-content:flex-end; gap: 10px; margin-top: 14px; }
body.contact .contact-form .send{
  background: linear-gradient(180deg, #5f9bff, #3a7afe);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 10px 28px rgba(63,122,254,.35), inset 0 0 12px rgba(255,255,255,.08);
  transition: transform .04s ease, filter .18s ease, box-shadow .18s ease, background .18s ease;
}
body.contact .contact-form .send:hover{ filter: brightness(1.06); box-shadow: 0 12px 34px rgba(63,122,254,.45), inset 0 0 14px rgba(255,255,255,.10); }
body.contact .contact-form .send:active{ transform: translateY(1px); }
body.contact .contact-form .send:disabled{ opacity:.6; cursor: not-allowed; filter: grayscale(.2); }

/* Compact on mobile */
@media (max-width: 600px){
  body.contact .contact-page{ top: 8vh; }
  body.contact .contact-form{ padding: 12px; border-radius: 12px; }
  body.contact .contact-form .row{ margin: 10px 0; }
  body.contact .contact-form input,
  body.contact .contact-form select,
  body.contact .contact-form textarea{ padding: 10px 12px; border-radius: 10px; }
  body.contact .contact-form textarea{ min-height: 120px; }
  body.contact .contact-title{ font-size: clamp(22px, 8vw, 34px); }
}

/* ------------------------------------------------------
   Extra polish: transparent (no color) checkbox & button
   ------------------------------------------------------ */
/* Title to white */
body.contact .contact-title{ color:#ffffff !important; text-shadow: 0 0 14px rgba(255,255,255,.18); }

/* Transparent checkbox */
body.contact .contact-form .row.agree input[type="checkbox"]{
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.32);
  position: relative; overflow: hidden;
}
/* remove strong shine; keep subtle neutral glow on focus/checked */
body.contact .contact-form .row.agree input[type="checkbox"]:checked{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
body.contact .contact-form .row.agree input[type="checkbox"]:focus{ outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.06); border-color: rgba(255,255,255,.6); }

/* Transparent (glass) send button */
body.contact .contact-form .send{
  position: relative; border-radius: 14px; padding: 14px 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 0 12px rgba(255,255,255,.06);
  overflow: hidden; color:#fff;
}
body.contact .contact-form .send::before{ content:""; position:absolute; left:0; right:0; top:0; height:46%; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.08) 70%, rgba(255,255,255,0)); pointer-events:none; }
body.contact .contact-form .send:hover{ filter: brightness(1.03); transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 0 14px rgba(255,255,255,.10); }
body.contact .contact-form .send:active{ transform: translateY(0); filter: brightness(0.99); }

/* Agree row inline layout (SP: 横並び) */
body.contact .contact-form .row.agree{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
body.contact .contact-form .row.agree label{ flex: 1 1 auto; }
body.contact .contact-form .row.agree .send{ flex: 0 0 auto; }
@media (max-width: 420px){
  body.contact .contact-form .row.agree{ gap: 10px; }
  body.contact .contact-form .row.agree .send{ padding: 10px 12px; border-radius: 12px; }
}