/* ============================================================
   トップのヒーロービジュアル「Ki:CODE シグナルコア」
   丸いレーダーをやめ、六角形のコア＋Kマーク＋兆し（水色の四角）から
   広がる信号、角を切ったHUDパネルで「先に気づく」を表現
   ============================================================ */
.hero-visual{height:520px!important}
.kc-core{--c:#00d4ff;--c2:#2f6bff;--line:rgba(0,212,255,.28);--mono:'IBM Plex Mono',ui-monospace,monospace;
  position:relative;width:500px;height:500px;flex:none}
.kc-core *{box-sizing:border-box}

/* 背景の格子（遠近感） */
.kc-grid{position:absolute;inset:-40px;background:
  linear-gradient(rgba(0,212,255,.07) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,rgba(0,212,255,.07) 1px,transparent 1px) 0 0/28px 28px;
  -webkit-mask:radial-gradient(closest-side,#000 35%,transparent 100%);mask:radial-gradient(closest-side,#000 35%,transparent 100%)}

/* 回転する外周リング（八角形＋目盛り） */
.kc-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kc-ring.r1{animation:kcSpin 80s linear infinite}
.kc-ring.r2{animation:kcSpin 46s linear infinite reverse}
.kc-ring.r3{animation:kcSpin 120s linear infinite}
@keyframes kcSpin{to{transform:rotate(360deg)}}

/* スキャン（六角形の中を走る光） */
.kc-scan{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
  background:conic-gradient(from 0deg,rgba(0,212,255,0) 0deg,rgba(0,212,255,0) 300deg,rgba(0,212,255,.28) 352deg,rgba(0,212,255,.55) 360deg);
  animation:kcSpin 5.5s linear infinite;opacity:.75}

/* 六角形のコア */
.kc-hex{position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
  background:linear-gradient(150deg,rgba(47,107,255,.55),rgba(4,10,30,.92) 55%,rgba(0,212,255,.25));
  display:flex;align-items:center;justify-content:center}
.kc-hex::before{content:'';position:absolute;inset:2px;clip-path:inherit;background:linear-gradient(160deg,#0b1a3a,#050a18 70%)}
.kc-hex-line{position:absolute;left:50%;top:50%;width:196px;height:196px;margin:-98px 0 0 -98px;overflow:visible;filter:drop-shadow(0 0 10px rgba(0,212,255,.55))}
.kc-mark{position:relative;width:86px;height:86px;overflow:visible}
.kc-mark .sig{fill:var(--c);filter:drop-shadow(0 0 6px var(--c));animation:kcBlink 2.4s ease-in-out infinite}
@keyframes kcBlink{0%,100%{opacity:1}50%{opacity:.55}}

/* 兆し：水色の四角から広がる信号（四角い波紋） */
.kc-wave{position:absolute;left:calc(50% - 14px);top:calc(50% - 7px);width:14px;height:14px;border:1.5px solid var(--c);
  transform-origin:center;animation:kcWave 3.6s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
.kc-wave.w2{animation-delay:1.2s}.kc-wave.w3{animation-delay:2.4s}
@keyframes kcWave{0%{transform:scale(1) rotate(0deg);opacity:.9}100%{transform:scale(17) rotate(45deg);opacity:0}}

/* 接続線とデータの流れ */
.kc-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kc-links path{fill:none;stroke:var(--line);stroke-width:1}
.kc-links .flow{stroke:var(--c);stroke-width:1.6;stroke-dasharray:4 18;animation:kcFlow 1.6s linear infinite}
@keyframes kcFlow{to{stroke-dashoffset:-44}}
.kc-links .node{fill:var(--c)}

/* HUDパネル（角を切った形） */
.kc-hud{position:absolute;min-width:150px;padding:12px 14px 12px;font-family:var(--mono);color:#e8f6ff;
  background:linear-gradient(180deg,rgba(8,22,48,.92),rgba(4,10,24,.92));
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.35);backdrop-filter:blur(4px);
  animation:kcFloat 6s ease-in-out infinite}
.kc-hud::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;background:var(--c)}
.kc-hud .k{font-size:10px;letter-spacing:.18em;color:rgba(0,212,255,.9);display:flex;align-items:center;gap:6px}
.kc-hud .k i{width:6px;height:6px;background:var(--c);display:inline-block;animation:kcBlink 1.4s steps(2) infinite}
.kc-hud .v{font-family:'Inter Tight',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.01em;line-height:1.1;margin-top:6px;color:#fff;font-variant-numeric:tabular-nums}
.kc-hud .v small{font-size:12px;font-weight:600;color:rgba(255,255,255,.7);margin-left:4px;font-family:var(--mono)}
.kc-hud .s{font-size:10.5px;color:rgba(232,246,255,.7);margin-top:4px;letter-spacing:.04em;font-family:'Noto Sans JP',sans-serif}
.kc-bar{display:flex;gap:3px;margin-top:8px}
.kc-bar b{flex:1;height:5px;background:rgba(0,212,255,.18)}
.kc-bar b.on{background:var(--c);box-shadow:0 0 6px rgba(0,212,255,.6)}
.kc-stars{font-size:15px;letter-spacing:.12em;color:var(--c);margin-top:4px}
.kc-stars span{color:rgba(0,212,255,.25)}
.h1{top:18px;right:-24px;animation-delay:0s}
.h2{bottom:52px;right:-40px;animation-delay:-2s}
.h3{bottom:30px;left:-30px;animation-delay:-4s}
.h4{top:40px;left:-34px;min-width:0;padding:9px 12px;animation-delay:-1s}
.h4 .k{color:rgba(232,246,255,.75)}
@keyframes kcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* 下部のターミナル表示 */
.kc-term{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(0,212,255,.85)}
.kc-term::before{content:'> ';color:rgba(255,255,255,.45)}
.kc-term b{font-weight:600;color:#fff}
.kc-term::after{content:'_';animation:kcBlink 1s steps(2) infinite;margin-left:2px}

/* コーナーのブラケット */
.kc-corner{position:absolute;width:22px;height:22px;border-color:rgba(0,212,255,.55);border-style:solid;border-width:0}
.kc-corner.tl{left:22px;top:22px;border-left-width:1.5px;border-top-width:1.5px}
.kc-corner.tr{right:22px;top:22px;border-right-width:1.5px;border-top-width:1.5px}
.kc-corner.bl{left:22px;bottom:22px;border-left-width:1.5px;border-bottom-width:1.5px}
.kc-corner.br{right:22px;bottom:22px;border-right-width:1.5px;border-bottom-width:1.5px}

@media (max-width:1280px){.kc-core{transform:scale(.86)}}
@media (max-width:1100px){.kc-core{transform:scale(.72)}}
@media (prefers-reduced-motion:reduce){.kc-core *{animation:none!important}.kc-wave{opacity:.35}}