/* ===========================================================================
   GEAR APEX — Home Premium Layer   scope: body.home のみ
   方針: 既存の世界観(紫×シアン/グラス/HUD/2キャラ)は壊さず "作り込みと統一感" を一段上げる。
   - ディスプレイ書体(Oxanium)で Latin見出し/数値/ラベルに統一アイデンティティ
   - ライティング(上端ハイライト＋アンビエント発光)で立体感
   - HUD/カードの装飾規律を統一（有ったり無かったりを解消）
   - フッターをテンプレ感から脱却
   全て静止＋ホバーのみ。prefers-reduced-motion 尊重。既存トークンに乗せる。
   =========================================================================== */

:root{
  --gx-disp:'Oxanium','Inter',system-ui,sans-serif;
  --gx-cyan:#34d3ee;
  --gx-violet:#a855f7;
  --gx-gold:#fbbf24;
  --gx-ink:#070710;
}

/* ---- 1. ディスプレイ書体でアイデンティティ統一（Latin見出し・数値・ラベル） ---- */
body.home .logo,
body.home .hero-eyebrow,
body.home .eyebrow,
body.home .section-title,
body.home .sf-brand,
body.home .sf-col h4,
body.home .featured-tag,
body.home .art-tag2{
  font-family:var(--gx-disp);
}
body.home .hero h1{ font-family:var(--gx-disp); letter-spacing:-.015em; }
/* 数値・件数は等幅感のあるディスプレイで揃える（テック印象） */
body.home .hero-trust b,
body.home .hero-stats .hs-num,
body.home #category-container .cat-count,
body.home #category-container [class*="count"]{
  font-family:var(--gx-disp); font-weight:700; letter-spacing:.01em;
}

/* ---- 2. eyebrow（小見出しラベル）を統一規律へ：mono caps + 先頭の発光ダッシュ ---- */
body.home .eyebrow{
  font-weight:700; font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:#bfb0ff; display:inline-flex; align-items:center; gap:.55rem; opacity:.95;
}
body.home .eyebrow::before{
  content:""; width:20px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gx-cyan),var(--gx-violet)); box-shadow:0 0 10px rgba(168,85,247,.6);
}

/* ---- 3. セクション見出し：階層を強く・トラッキング統一 ---- */
body.home .section-title{
  font-weight:800; letter-spacing:.005em; font-size:1.7rem; line-height:1.2;
}
@media (max-width:760px){ body.home .section-title{ font-size:1.4rem; } }

/* ---- 4. ヒーロー：色グレード統一＋冗長な数値帯を解消 ---- */
/* 写真背景をブランド色へ寄せる薄いデュオトーン（上=紫 / 下=シアン寄りの締め）。可読性も上がる。 */
body.home .hero .hero-bg::after{
  background-image:
    linear-gradient(180deg, rgba(124,58,237,.30) 0%, rgba(8,8,18,.30) 30%, rgba(8,8,18,.55) 62%, rgba(8,8,18,.96) 100%),
    radial-gradient(120% 85% at 50% 30%, rgba(8,8,18,0) 36%, rgba(7,6,18,.66) 100%),
    radial-gradient(60% 50% at 84% 8%, rgba(34,211,238,.18), transparent 60%) !important;
}
/* 注入される実数カウント帯(.hero-stats)は .hero-trust と重複 → 隠して1帯に集約（密度UP/honesty） */
body.home .hero .hero-stats{ display:none !important; }
/* 残す信頼帯を"HUDメトリクス"らしく：数値はシアン発光、枠は締める */
body.home .hero-trust span{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
  border:1px solid rgba(168,85,247,.36) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 6px 18px rgba(8,8,18,.4) !important;
}
body.home .hero-trust b{ color:#7ef0ff !important; text-shadow:0 0 12px rgba(52,211,238,.35); }

/* ---- 5. ライティング：パネル/カードに上端ハイライト＝"光が当たってる"質感 ---- */
body.home .feature-card,
body.home .news-item,
body.home #category-container > *,
body.home .featured-card,
body.home .char-hero{
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 14px 34px rgba(6,6,14,.5);
}

/* ---- 6. カード装飾の規律統一：ニュース/カテゴリにも feature と同じ作法（上辺グロー＋ホバー浮上） ---- */
body.home .news-item,
body.home #category-container > *{
  position:relative; border-radius:16px !important; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
  border:1px solid rgba(168,85,247,.22) !important;
  transition:transform .18s ease, box-shadow .25s ease, border-color .2s ease !important;
}
body.home .news-item::before,
body.home #category-container > *::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gx-violet) 30%, var(--gx-cyan) 70%, transparent);
  opacity:.5; transition:opacity .25s ease;
}
body.home .news-item:hover,
body.home #category-container > *:hover{
  transform:translateY(-5px);
  border-color:rgba(168,85,247,.5) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 18px 42px rgba(124,58,237,.32), 0 0 22px rgba(168,85,247,.22) !important;
}
body.home .news-item:hover::before,
body.home #category-container > *:hover::before{ opacity:1; }

/* カテゴリのアイコンを"発光ユニット"へ格上げ */
body.home #category-container .cat-ic,
body.home #category-container [class*="icon"]{
  background:radial-gradient(120% 120% at 30% 20%, rgba(168,85,247,.30), rgba(59,130,246,.12)) !important;
  border:1px solid rgba(168,85,247,.42) !important;
  box-shadow:0 0 16px rgba(168,85,247,.28), 0 1px 0 rgba(255,255,255,.12) inset !important;
  color:#d6c6ff !important;
}
/* 件数バッジ：シアンの等幅で"データ"らしく */
body.home #category-container .cat-count,
body.home #category-container [class*="count"]{
  color:#8fe9f5 !important; border-color:rgba(52,211,238,.4) !important;
  background:rgba(52,211,238,.08) !important;
}

/* ---- 7. アンビエント発光：下部セクションが"黒い余白に浮く"のを解消（静止・極薄） ---- */
body.home main{ position:relative; }
body.home main::before{
  content:""; position:absolute; left:0; right:0; top:46%; height:54%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 30% at 16% 18%, rgba(124,58,237,.12), transparent 70%),
    radial-gradient(42% 28% at 88% 52%, rgba(34,211,238,.08), transparent 70%),
    radial-gradient(50% 30% at 50% 96%, rgba(124,58,237,.10), transparent 72%);
}

/* ---- 8. フッター：テンプレ感を脱却し"締めのブランドパネル"へ ---- */
body.home .site-footer{
  position:relative; border-top:1px solid rgba(168,85,247,.22);
  background:linear-gradient(180deg, rgba(13,11,24,.0), rgba(10,9,20,.6));
  margin-top:2.4rem; padding:3rem 5% 2.2rem;
}
body.home .site-footer::before{ /* 上端の発光ライン */
  content:""; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:linear-gradient(90deg, transparent, var(--gx-violet) 25%, var(--gx-cyan) 55%, transparent 85%);
  opacity:.7;
}
body.home .site-footer .sf-inner{
  max-width:1180px; margin:0 auto; text-align:left;
  display:grid; grid-template-columns:minmax(190px,260px) 1fr; gap:36px 48px; align-items:start;
}
body.home .site-footer .sf-brand{
  font-size:1.4rem; font-weight:800; letter-spacing:.04em; color:var(--text-main);
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; max-width:250px;
}
body.home .site-footer .sf-brand i{ color:var(--gx-violet); filter:drop-shadow(0 0 8px rgba(168,85,247,.6)); }
body.home .site-footer .sf-brand::after{
  content:"PRECISION OVER HYPE"; flex-basis:100%; display:block;
  font-family:var(--gx-disp); font-weight:600; font-size:.66rem; letter-spacing:.2em;
  color:#7c7c95; margin-top:.5rem; white-space:normal;
}
body.home .site-footer .sf-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
}
body.home .site-footer .sf-col h4{
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#9c8fd6; margin:0 0 .9rem; display:flex; align-items:center; gap:.45rem;
}
body.home .site-footer .sf-col h4::before{
  content:""; width:12px; height:2px; background:linear-gradient(90deg,var(--gx-cyan),var(--gx-violet)); border-radius:2px;
}
body.home .site-footer .sf-col a{
  display:block; color:var(--text-muted); font-size:.85rem; line-height:1; padding:.4rem 0;
  text-decoration:none; transition:color .18s ease, transform .18s ease;
}
body.home .site-footer .sf-col a:hover{ color:var(--text-main); transform:translateX(3px); }

@media (max-width:880px){
  body.home .site-footer .sf-inner{ grid-template-columns:1fr; gap:24px; }
  body.home .site-footer .sf-brand::after{ white-space:normal; }
}
@media (max-width:560px){
  body.home .site-footer .sf-grid{ grid-template-columns:repeat(2,1fr); gap:20px 16px; }
}

/* ---- 9. 新世界観アートを背景へ（動くヒーロー動画は維持・静止/バナー/スマホを差し替え） ---- */
/* ヒーローの下地静止画（動画ロード前/失敗時に見える）を新アートへ */
body.home .hero .hero-bg{
  background-image:url("../assets/world_hero.webp") !important;
  background-position:center 32% !important; background-size:cover !important;
}
/* 相談バナー背景：暗め余白多めの world_dim（文字が映える） */
body.home .char-hero .ch-bg{
  background-image:
    linear-gradient(180deg, rgba(12,10,26,.82) 0%, rgba(12,10,26,.5) 48%, rgba(12,10,26,.92) 100%),
    url("../assets/world_dim.webp") !important;
  background-size:cover, cover !important;
  background-position:center, center 60% !important;
}
/* スマホ：動画は元から停止 → 縦アートを下地に */
@media (max-width:760px){
  body.home .hero .hero-bg{
    background-image:url("../assets/world_hero.webp") !important;
    background-position:center 34% !important;
  }
  body.home .hero .hero-bg .hero-bg-vid{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 34% !important;
  }
}

/* ---- 11. チビを会話の話者アイコンに（相談バナーの掛け合い） ---- */
body.home .char-hero .ch-line{ position:relative; padding-left:54px !important; min-height:44px; display:flex; align-items:center; }
body.home .char-hero .ch-line::before{
  content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:42px; height:42px; background-position:center; background-size:contain; background-repeat:no-repeat;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
body.home .char-hero .ch-line.mio::before{ background-image:url("../assets/characters/chibi/mio_ok.webp"); }
body.home .char-hero .ch-line.hina::before{ background-image:url("../assets/characters/chibi/hina_recommend.webp"); }

/* ---- 12. HUDセクション仕切り（CSS製・フル幅でも崩れない／軽量） ---- */
body.home .hud-divider{
  position:relative; height:26px; max-width:1180px; margin:2px auto 6px;
}
body.home .hud-divider::before{
  content:""; position:absolute; left:6%; right:6%; top:50%; height:1px; transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, rgba(168,85,247,.45) 22%, rgba(34,211,238,.5) 55%, rgba(168,85,247,.45) 78%, transparent);
}
body.home .hud-divider::after{
  content:""; position:absolute; left:50%; top:50%; width:9px; height:9px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:linear-gradient(135deg,#a855f7,#22d3ee);
  box-shadow:0 0 12px rgba(168,85,247,.6), 0 0 0 4px rgba(8,8,18,.9);
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  body.home .news-item, body.home #category-container > *{ transition:none !important; }
  body.home .news-item:hover, body.home #category-container > *:hover{ transform:none; }
  body.home .site-footer .sf-col a:hover{ transform:none; }
}

/* ===========================================================================
   APEX POLISH LAYER v7 — FPS/eスポーツ向けの質感強化（ホーム限定・軽量）
   方針: 新規動画/画像を増やさず、既存背景とUIに HUD の精度・金属感・操作感を足す。
   常時アニメは transform/opacity の薄いスキャンのみ。スマホ/Reduce Motionでは停止。
   =========================================================================== */

/* デスクトップナビの見切れ対策：未公開項目はメニュー内だけにし、主要導線を1行へ収める */
@media (min-width:1025px){
  body.home header{
    padding-left:clamp(16px,3.2vw,54px);
    padding-right:clamp(16px,3.2vw,54px);
  }
  body.home header nav ul{
    gap:clamp(.22rem,.45vw,.55rem) !important;
    justify-content:flex-end;
  }
  body.home header nav li:has(a.nav-locked){ display:none; }
  body.home header nav a{
    font-size:clamp(.72rem,.58rem + .22vw,.84rem) !important;
    padding:.34rem .46rem !important;
  }
}
@media (min-width:1025px) and (max-width:1180px){
  body.home header nav a{ font-size:.72rem !important; padding:.3rem .36rem !important; }
}

/* ヒーローの中心に“照準システム”を重ねる。背景素材はそのまま、UI側でゲーム感を増す。 */
body.home .hero .hero-bg::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.72; mix-blend-mode:screen;
  background:
    radial-gradient(circle at 50% 45%, transparent 0 66px, rgba(34,211,238,.32) 67px 68px, transparent 69px 100%),
    radial-gradient(circle at 50% 45%, transparent 0 116px, rgba(168,85,247,.24) 117px 118px, transparent 119px 100%),
    linear-gradient(90deg, transparent calc(50% - 112px), rgba(34,211,238,.26) calc(50% - 111px), transparent calc(50% - 109px), transparent calc(50% + 109px), rgba(34,211,238,.26) calc(50% + 111px), transparent calc(50% + 112px)),
    linear-gradient(0deg, transparent calc(45% - 112px), rgba(168,85,247,.22) calc(45% - 111px), transparent calc(45% - 109px), transparent calc(45% + 109px), rgba(168,85,247,.22) calc(45% + 111px), transparent calc(45% + 112px)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px);
  -webkit-mask-image:radial-gradient(58% 52% at 50% 45%, #000 0 54%, transparent 78%);
          mask-image:radial-gradient(58% 52% at 50% 45%, #000 0 54%, transparent 78%);
}

/* 画面を横切る薄いスキャン帯。1要素・transformのみで軽い。 */
body.home .hero::before{
  content:""; position:absolute; left:0; right:0; top:-18%; height:18%; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(34,211,238,.10) 48%, rgba(168,85,247,.08) 58%, transparent);
  animation:gaxHomeScan 9s linear infinite;
}
@keyframes gaxHomeScan{ from{ transform:translateY(0); } to{ transform:translateY(660%); } }

/* ヒーローのコピーを少しシャープに。背景に埋もれないが、白飛びしない範囲。 */
body.home .hero h1{
  text-shadow:
    0 0 18px rgba(124,58,237,.45),
    0 8px 30px rgba(0,0,0,.50);
}
body.home .hero p{
  color:rgba(232,238,255,.82) !important;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}

/* CTAは“切削されたFPS UIボタン”。押す時は沈む。 */
body.home .hero-cta .btn-primary,
body.home .hero-cta .btn-ghost-lp,
body.home .char-hero .ch-cta{
  border-radius:8px !important;
  clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  min-height:46px;
  letter-spacing:.01em;
}
body.home .hero-cta .btn-primary{
  color:#0b0714 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 42%),
    linear-gradient(135deg,#a855f7 0%,#38bdf8 46%,#fb923c 100%) !important;
  box-shadow:
    0 14px 32px rgba(168,85,247,.42),
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 1px 0 rgba(255,255,255,.48) inset !important;
}
body.home .hero-cta .btn-ghost-lp{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)) !important;
  border-color:rgba(34,211,238,.56) !important;
  box-shadow:0 0 18px rgba(34,211,238,.16), 0 1px 0 rgba(255,255,255,.12) inset !important;
}
body.home .hero-cta .btn-primary:hover,
body.home .hero-cta .btn-ghost-lp:hover,
body.home .char-hero .ch-cta:hover{
  transform:translateY(-3px);
  filter:saturate(1.1) brightness(1.05);
}
body.home .hero-cta .btn-primary:active,
body.home .hero-cta .btn-ghost-lp:active,
body.home .char-hero .ch-cta:active{
  transform:translateY(1px) scale(.975) !important;
  filter:saturate(1.05) brightness(.98);
}

/* 検索バーを“入力端末”寄りに。右端の小さなラインで空間を締める。 */
body.home .search-container{
  filter:drop-shadow(0 18px 34px rgba(15,8,28,.38));
}
body.home .search-container::after{
  content:""; position:absolute; right:18px; top:50%; width:48px; height:10px; transform:translateY(-50%);
  pointer-events:none; opacity:.72;
  background:
    linear-gradient(90deg, rgba(34,211,238,.8), rgba(168,85,247,.8)) left center / 100% 2px no-repeat,
    linear-gradient(90deg, rgba(34,211,238,.35), transparent) left bottom / 72% 1px no-repeat;
  box-shadow:0 0 12px rgba(34,211,238,.32);
}
body.home .search-input{
  border-radius:12px !important;
  background:linear-gradient(180deg, rgba(18,14,32,.78), rgba(10,9,19,.72)) !important;
  border-color:rgba(168,85,247,.46) !important;
}

/* ステータスチップをソシャゲの“報酬/メタ情報”風に。 */
body.home .hero-trust span{
  min-width:128px;
  padding:.54rem .95rem !important;
  border-radius:8px !important;
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* タブレットのキャラ相談: 2人を上に逃がさず、左右ステージ＋中央端末に戻す。 */
@media (min-width:641px) and (max-width:880px){
  body.home .char-hero{
    grid-template-columns:132px minmax(0,1fr) 132px !important;
    grid-template-areas:"left mid right" !important;
    align-items:center !important;
    gap:.65rem !important;
    padding:.9rem !important;
    min-height:246px !important;
  }
  body.home .char-hero .ch-left{ grid-area:left; }
  body.home .char-hero .ch-right{ grid-area:right; }
  body.home .char-hero .ch-mid{
    grid-area:mid; margin-top:0 !important;
    padding:1.05rem 1rem 1rem !important;
    border-radius:16px !important;
  }
  body.home .char-hero .ch-art{ width:132px !important; }
  body.home .char-hero .ch-title{ font-size:1.08rem !important; margin-bottom:.7rem !important; }
  body.home .char-hero .ch-tag{ font-size:.68rem !important; margin-bottom:.55rem !important; }
  body.home .char-hero .ch-line{
    font-size:.76rem !important; line-height:1.42 !important;
    padding:.48rem .62rem .48rem 46px !important;
  }
  body.home .char-hero .ch-line::before{ width:35px; height:35px; }
  body.home .char-hero .ch-cta{ min-height:40px; padding:.62rem 1.1rem !important; font-size:.88rem !important; }
}
@media (max-width:640px){
  body.home .char-hero{ padding:.7rem .62rem 1rem !important; }
  body.home .char-hero .ch-art{ width:min(42vw,142px) !important; }
  body.home .char-hero .ch-mid{ border-radius:16px !important; }
}

/* カード類は輪郭を少し硬く、FPS向けの“パネル”に寄せる。 */
body.home .feature-card,
body.home .news-item,
body.home #category-container > *,
body.home .featured-card{
  border-radius:12px !important;
}
body.home .feature-card .fc-icon{
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  border-radius:0 !important;
}
body.home #categories{ padding-bottom:2.4rem !important; }

/* site-footer を実マークアップに合わせる。 */
body.home .site-footer .sf-inner{
  grid-template-columns:minmax(190px,260px) 1fr !important;
}
body.home .site-footer .sf-copy{
  grid-column:1 / -1;
  color:#676a82;
  font-size:.78rem;
  margin:0;
  padding-top:.25rem;
}

@media (max-width:760px){
  body.home .hero::before{ display:none; }
  body.home .hero .hero-bg::before{ opacity:.48; }
  body.home .search-container::after{ display:none; }
  body.home .hero-trust span{ min-width:0; }
}
@media (max-width:560px){
  body.home .site-footer .sf-inner{ grid-template-columns:1fr !important; }
  body.home .site-footer .sf-copy{ grid-column:auto; }
}
@media (prefers-reduced-motion:reduce){
  body.home .hero::before{ animation:none !important; display:none !important; }
  body.home .hero-cta .btn-primary:hover,
  body.home .hero-cta .btn-ghost-lp:hover,
  body.home .char-hero .ch-cta:hover{ transform:none !important; }
}

/* Mobile home density pass: keep the first screen rich, then reduce scroll cost. */
@media (max-width:640px){
  body.home main{
    overflow:hidden;
  }

  body.home .hero{
    padding:1.05rem 5% .85rem !important;
  }
  body.home .hero h1{
    font-size:clamp(1.75rem, 1.46rem + 1.35vw, 2.05rem) !important;
    line-height:1.08 !important;
    margin-bottom:.42rem !important;
  }
  body.home .hero p{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:.88rem !important;
    line-height:1.62 !important;
    max-width:31rem !important;
    margin-bottom:.72rem !important;
  }
  body.home .hero-eyebrow{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.72rem !important;
    padding:.34rem .7rem !important;
  }
  body.home .hero-cta{
    gap:.55rem !important;
    margin:.62rem 0 !important;
  }
  body.home .hero-cta .btn-primary,
  body.home .hero-cta .btn-ghost-lp{
    min-height:43px !important;
    padding:.64rem .86rem !important;
    font-size:.9rem !important;
  }
  body.home .search-input{
    min-height:48px !important;
    padding:.82rem 1rem .82rem 2.85rem !important;
    font-size:.92rem !important;
  }
  body.home .hero-trust{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:.42rem !important;
    margin-top:.7rem !important;
  }
  body.home .hero-trust span{
    min-width:0 !important;
    padding:.44rem .38rem !important;
    font-size:.68rem !important;
    line-height:1.22 !important;
    white-space:normal;
  }
  body.home .hero-trust b{
    display:block;
    font-size:.86rem !important;
  }

  body.home .char-hero{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:"left right" "mid mid" !important;
    gap:.5rem !important;
    margin:1rem 5% .45rem !important;
    padding:.62rem !important;
    min-height:0 !important;
    border:1px solid rgba(56,189,248,.34);
    border-radius:14px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
      linear-gradient(135deg, rgba(7,10,20,.94), rgba(23,13,41,.92));
  }
  body.home .char-hero::after{
    content:"";
    position:absolute;
    left:12px; right:12px; top:148px;
    height:1px;
    pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(56,189,248,.75), rgba(168,85,247,.65), transparent);
    opacity:.78;
  }
  body.home .char-hero .ch-bg{
    opacity:.38;
    background-size:cover !important;
    background-position:center 32% !important;
  }
  body.home .char-hero .ch-left{ grid-area:left; }
  body.home .char-hero .ch-right{ grid-area:right; }
  body.home .char-hero .ch-art{
    width:100% !important;
    height:146px !important;
    aspect-ratio:auto !important;
    border-radius:10px !important;
    border:1px solid rgba(56,189,248,.28);
    background:
      linear-gradient(180deg, rgba(4,8,18,.1), rgba(4,8,18,.66)),
      radial-gradient(80% 78% at 50% 25%, rgba(56,189,248,.18), transparent 70%),
      #050711 !important;
    box-shadow:0 10px 24px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.09) !important;
  }
  body.home .char-hero .ch-art .ch-framed-vid,
  body.home .char-hero .ch-art .gc-standee-vid,
  body.home .char-hero .ch-art img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 32% !important;
    transform:scale(1.24) !important;
    transform-origin:center 36% !important;
    animation:none !important;
    filter:saturate(1.08) contrast(1.04) drop-shadow(0 0 18px rgba(56,189,248,.2)) !important;
    -webkit-mask-image:none !important;
            mask-image:none !important;
  }
  body.home .char-hero .ch-left .ch-framed-vid,
  body.home .char-hero .ch-left .gc-standee-vid,
  body.home .char-hero .ch-left img{
    object-position:52% 50% !important;
    transform:scale(1.08) !important;
  }
  body.home .char-hero .ch-right .ch-framed-vid,
  body.home .char-hero .ch-right .gc-standee-vid,
  body.home .char-hero .ch-right img{
    object-position:50% 50% !important;
    transform:scale(1.08) !important;
  }
  body.home .char-hero .ch-mid{
    grid-area:mid !important;
    margin-top:0 !important;
    padding:.72rem .74rem .78rem !important;
    border-radius:10px !important;
    text-align:left !important;
    background:linear-gradient(135deg, rgba(18,14,34,.84), rgba(10,9,20,.78)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  body.home .char-hero .ch-tag{
    max-width:100%;
    margin:0 0 .42rem !important;
    padding:.26rem .5rem !important;
    font-size:.63rem !important;
    line-height:1.2 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body.home .char-hero .ch-title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:0 0 .58rem !important;
    font-size:.98rem !important;
    line-height:1.35 !important;
  }
  body.home .char-hero .ch-talk{
    display:none !important;
  }
  body.home .char-hero .ch-cta{
    width:100%;
    min-height:39px !important;
    justify-content:center;
    padding:.54rem .8rem !important;
    font-size:.86rem !important;
  }

  body.home .gax-featured{
    display:none !important;
  }

  body.home .lp-features,
  body.home .lp-guides,
  body.home #featured-sec,
  body.home #promo-sec,
  body.home #news-sec,
  body.home #categories{
    padding-top:.85rem !important;
    padding-bottom:.85rem !important;
  }
  body.home .hud-divider{
    height:16px !important;
    margin:0 auto .2rem !important;
  }
  body.home .section-title{
    font-size:1.12rem !important;
    line-height:1.25 !important;
    gap:.5rem !important;
    margin-bottom:.58rem !important;
  }
  body.home .eyebrow{
    font-size:.62rem !important;
    letter-spacing:.2em !important;
    margin-bottom:.18rem;
  }

  body.home .feature-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:.56rem !important;
  }
  body.home .feature-card{
    min-height:0 !important;
    padding:.72rem .68rem !important;
    gap:.24rem !important;
  }
  body.home .feature-card .fc-icon{
    width:30px !important;
    height:30px !important;
    font-size:.82rem !important;
    margin-bottom:.16rem !important;
  }
  body.home .feature-card h3{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:.82rem !important;
    line-height:1.25 !important;
  }
  body.home .feature-card p{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:.68rem !important;
    line-height:1.42 !important;
  }
  body.home .feature-card .fc-go{
    margin-top:.28rem !important;
    font-size:.68rem !important;
  }

  body.home .featured-card{
    padding:.78rem .86rem !important;
  }
  body.home .featured-card h2{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:.94rem !important;
    line-height:1.36 !important;
  }
  body.home .featured-card p,
  body.home .news-item p{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  body.home .news-grid{
    gap:.55rem !important;
  }
  body.home .news-item{
    padding:.72rem .78rem !important;
  }
  body.home .news-item h3{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:.88rem !important;
    line-height:1.35 !important;
  }

  body.home #category-container{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:.52rem !important;
  }
  body.home #category-container > .reveal{
    opacity:1 !important;
    transform:none !important;
  }
  body.home #category-container > *{
    min-height:92px !important;
    padding:.62rem .56rem !important;
    border-radius:10px !important;
  }
  body.home #category-container .card-icon{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    margin:0 0 .32rem !important;
    font-size:.82rem !important;
  }
  body.home #category-container .card-title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.45em;
    margin:0 !important;
    font-size:.78rem !important;
    line-height:1.22 !important;
  }
  body.home #category-container .card-desc{
    display:none !important;
  }
  body.home #category-container .card-meta{
    margin-top:auto !important;
    gap:.3rem;
    font-size:.68rem !important;
  }
  body.home #category-container .card-meta span{
    padding:.14rem .42rem !important;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body.home .site-footer{
    margin-top:.8rem !important;
    padding:1.7rem 5% 1.45rem !important;
  }

  body.home #sfx-toggle,
  body.home #pwa-install-btn{
    display:none !important;
  }
}

@media (max-width:640px){
  body.home #featured-sec,
  body.home #promo-sec,
  body.home #news-sec{
    padding-top:.48rem !important;
    padding-bottom:.48rem !important;
  }

  body.home .featured-card{
    min-height:0 !important;
    padding:.68rem .78rem !important;
    border-radius:10px !important;
  }

  body.home .featured-tag{
    margin-bottom:.26rem !important;
    font-size:.66rem !important;
  }

  body.home .featured-card h2{
    -webkit-line-clamp:1;
    margin-bottom:.22rem !important;
    font-size:.88rem !important;
  }

  body.home .featured-card p{
    -webkit-line-clamp:1 !important;
    margin:0 !important;
    font-size:.72rem !important;
    line-height:1.38 !important;
  }

  body.home .featured-cta{
    margin-top:.34rem !important;
    font-size:.7rem !important;
  }

  body.home .promo-slot{
    min-height:42px;
    justify-content:flex-start;
    flex-wrap:nowrap !important;
    gap:.48rem !important;
    margin:.12rem 0 !important;
    padding:.52rem .66rem !important;
    font-size:.68rem !important;
    line-height:1.3;
    overflow:hidden;
  }

  body.home .promo-slot i{
    flex:0 0 auto;
  }

  body.home #news-sec .section-title{
    display:flex;
    align-items:center;
    margin-bottom:.48rem !important;
  }

  body.home #news-sec .section-title a{
    flex:0 0 auto;
    font-size:.68rem !important;
    white-space:nowrap;
  }

  body.home .news-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:.54rem !important;
    overflow:visible;
    padding:.04rem 0 .18rem;
    margin:0;
  }

  body.home .news-item{
    min-height:136px;
    padding:.64rem .68rem !important;
  }

  body.home .news-item:nth-of-type(n+2){
    display:none !important;
  }

  body.home .news-item h3{
    -webkit-line-clamp:2;
    margin:.34rem 0 .24rem !important;
    font-size:.82rem !important;
  }

  body.home .news-item p{
    -webkit-line-clamp:1 !important;
    font-size:.68rem !important;
    line-height:1.35 !important;
  }

  body.home .art-tag2,
  body.home .news-date{
    font-size:.62rem !important;
  }
}

@media (max-width:390px){
  body.home .hero-trust span{
    font-size:.64rem !important;
  }
  body.home .char-hero .ch-art{
    height:140px !important;
  }
  body.home #category-container > *{
    min-height:88px !important;
  }
}

/* Lightweight detail-up pass: static HUD texture + tactile states, no new assets. */
body.home{
  -webkit-tap-highlight-color:transparent;
}

body.home .hero-cta a,
body.home .char-hero .ch-cta,
body.home .feature-card,
body.home .featured-card,
body.home .news-item,
body.home #category-container > *,
body.home .category-more{
  touch-action:manipulation;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

body.home .hero-cta a:focus-visible,
body.home .char-hero .ch-cta:focus-visible,
body.home .feature-card:focus-visible,
body.home .featured-card:focus-visible,
body.home .news-item:focus-visible,
body.home #category-container > *:focus-visible,
body.home .category-more:focus-visible{
  outline:2px solid rgba(56,189,248,.92);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(56,189,248,.13), 0 0 22px rgba(56,189,248,.18) !important;
}

body.home .feature-card,
body.home .featured-card,
body.home .news-item,
body.home #category-container > *{
  transform-origin:center;
}

body.home .feature-card:active,
body.home .featured-card:active,
body.home .news-item:active,
body.home #category-container > *:active{
  transform:translateY(1px) scale(.985) !important;
  filter:saturate(1.04) brightness(.96);
}

body.home .featured-card::after,
body.home .news-item::after,
body.home #category-container > *::after{
  content:"";
  position:absolute;
  inset:8px;
  z-index:1;
  pointer-events:none;
  opacity:.34;
  background:
    linear-gradient(90deg, rgba(56,189,248,.72) 0 10px, transparent 10px calc(100% - 10px), rgba(168,85,247,.62) calc(100% - 10px) 100%) top left / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(168,85,247,.62) 0 10px, transparent 10px calc(100% - 10px), rgba(56,189,248,.72) calc(100% - 10px) 100%) bottom left / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(56,189,248,.72) 0 10px, transparent 10px calc(100% - 10px), rgba(168,85,247,.62) calc(100% - 10px) 100%) top left / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(168,85,247,.62) 0 10px, transparent 10px calc(100% - 10px), rgba(56,189,248,.72) calc(100% - 10px) 100%) top right / 1px 100% no-repeat;
  transition:opacity .18s ease;
}

body.home .featured-card:hover::after,
body.home .news-item:hover::after,
body.home #category-container > *:hover::after{
  opacity:.58;
}

body.home .category-more{
  grid-column:1 / -1;
  position:relative;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  color:#eef7ff;
  font-family:var(--gx-disp);
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.03em;
  cursor:pointer;
  border:1px solid rgba(56,189,248,.38);
  border-radius:10px;
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.018)),
    linear-gradient(135deg, rgba(56,189,248,.18), rgba(168,85,247,.24));
  box-shadow:0 12px 26px rgba(4,8,18,.46), inset 0 1px 0 rgba(255,255,255,.12);
}

body.home .category-more b{
  min-width:2.1rem;
  padding:.14rem .44rem;
  border-radius:999px;
  color:#0b0714;
  background:linear-gradient(135deg,#7dd3fc,#f0abfc);
}

body.home .category-more:active{
  transform:translateY(1px) scale(.985);
  filter:brightness(.96);
}

body.home .gax-press-ripple{
  position:absolute;
  z-index:4;
  border-radius:999px;
  pointer-events:none;
  transform:translate(-50%, -50%) scale(0);
  opacity:.72;
  background:
    radial-gradient(circle, rgba(255,255,255,.62) 0 8%, rgba(125,211,252,.48) 12%, rgba(168,85,247,.26) 34%, transparent 64%);
  mix-blend-mode:screen;
  animation:gax-press-ripple .48s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes gax-press-ripple{
  0%{ transform:translate(-50%, -50%) scale(.08); opacity:.74; }
  56%{ opacity:.34; }
  100%{ transform:translate(-50%, -50%) scale(1); opacity:0; }
}

@media (max-width:640px){
  body.home .featured-card::after,
  body.home .news-item::after,
  body.home #category-container > *::after{
    inset:7px;
    opacity:.28;
  }

  body.home .category-more{
    min-height:44px;
    font-size:.78rem;
  }
}

@media (prefers-reduced-motion:reduce){
  body.home .featured-card::after,
  body.home .news-item::after,
  body.home #category-container > *::after{
    transition:none !important;
  }
  body.home .gax-press-ripple{
    display:none !important;
    animation:none !important;
  }
}

/* Generated cyber detail assets: static, tiny WebP layers for extra depth without layout cost. */
body.home main::before{
  background:
    linear-gradient(180deg, rgba(7,7,16,.74), rgba(7,7,16,.88)),
    url("../assets/generated/gax-hud-scan-soft.webp"),
    radial-gradient(46% 30% at 16% 18%, rgba(124,58,237,.12), transparent 70%),
    radial-gradient(42% 28% at 88% 52%, rgba(34,211,238,.08), transparent 70%),
    radial-gradient(50% 30% at 50% 96%, rgba(124,58,237,.10), transparent 72%);
  background-size:cover, cover, auto, auto, auto;
  background-position:center;
  opacity:.96;
}

body.home .hud-divider{
  height:32px;
  background:url("../assets/generated/gax-energy-rail-strip.webp") center / 100% 100% no-repeat;
  overflow:hidden;
}

body.home .hud-divider .gax-rail-video{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  transition:opacity .28s ease;
}

body.home .hud-divider .gax-rail-video.is-ready{
  opacity:.76;
}

body.home .hud-divider::before{
  opacity:.34;
  z-index:1;
}

body.home .hud-divider::after{
  z-index:2;
  box-shadow:
    0 0 14px rgba(168,85,247,.72),
    0 0 18px rgba(34,211,238,.32),
    0 0 0 4px rgba(8,8,18,.9);
}

body.home #category-container > .reveal{
  opacity:1 !important;
  transform:none !important;
  transition-delay:0s !important;
}

@media (max-width:760px){
  body.home .hud-divider{
    height:20px !important;
    background-size:100% 100%;
  }
}

body.home .char-hero .gax-duo-frame-video{
  display:none;
}

@media (max-width:640px){
  body.home .char-hero .gax-duo-frame-video{
    display:block;
    position:absolute;
    left:.62rem;
    right:.62rem;
    top:.62rem;
    z-index:1;
    width:calc(100% - 1.24rem);
    height:146px;
    object-fit:cover;
    opacity:0;
    pointer-events:none;
    border-radius:11px;
    mix-blend-mode:screen;
    filter:saturate(1.08) brightness(1.05);
    transition:opacity .28s ease;
  }

  body.home .char-hero .gax-duo-frame-video.is-ready{
    opacity:.52;
  }

  body.home .char-hero .ch-bg{
    z-index:0;
  }

  body.home .char-hero .ch-art,
  body.home .char-hero .ch-mid{
    position:relative;
    z-index:2;
  }

  body.home .char-hero::after{
    z-index:3;
  }
}

@media (max-width:390px){
  body.home .char-hero .gax-duo-frame-video{
    height:140px;
  }
}

@media (prefers-reduced-motion:reduce){
  body.home .hud-divider .gax-rail-video,
  body.home .char-hero .gax-duo-frame-video{
    display:none !important;
  }
}

/* Home search console: lightweight HUD-style suggestions, no extra assets. */
body.home .search-container{
  z-index:12;
}
body.home .gax-search-panel{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 10px);
  z-index:25;
  display:grid;
  gap:.62rem;
  max-height:min(430px, 54vh);
  padding:.82rem;
  overflow:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px) scale(.985);
  transform-origin:top center;
  border:1px solid rgba(56,189,248,.38);
  border-radius:12px;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.026)),
    radial-gradient(circle at 16% 0, rgba(56,189,248,.18), transparent 38%),
    radial-gradient(circle at 88% 100%, rgba(168,85,247,.18), transparent 42%),
    rgba(7,9,20,.94);
  box-shadow:
    0 24px 54px rgba(3,6,16,.64),
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 0 28px rgba(56,189,248,.12);
  backdrop-filter:blur(16px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
body.home .gax-search-panel.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
body.home .gax-search-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  color:#dbeafe;
  font-family:var(--gx-disp);
  letter-spacing:.06em;
  text-transform:uppercase;
}
body.home .gax-search-head span{
  color:#67e8f9;
  font-size:.72rem;
}
body.home .gax-search-head strong{
  min-width:0;
  color:#f8fafc;
  font-size:.82rem;
  letter-spacing:.01em;
  text-transform:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.home .gax-search-meter{
  height:3px;
  overflow:hidden;
  background:rgba(148,163,184,.16);
  border-radius:999px;
}
body.home .gax-search-meter span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#38bdf8,#a855f7,#fb923c);
  box-shadow:0 0 18px rgba(56,189,248,.36);
  transition:width .22s ease;
}
body.home .gax-search-group{
  display:grid;
  gap:.42rem;
}
body.home .gax-search-label{
  color:rgba(226,232,240,.58);
  font-family:var(--gx-disp);
  font-size:.68rem;
  letter-spacing:.11em;
}
body.home .gax-search-row{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:.66rem;
  min-height:52px;
  padding:.56rem .68rem;
  color:#eef7ff;
  text-decoration:none;
  border:1px solid rgba(148,163,184,.16);
  border-radius:9px;
  background:
    linear-gradient(90deg, rgba(56,189,248,.10), rgba(168,85,247,.08)),
    rgba(255,255,255,.035);
  overflow:hidden;
}
body.home .gax-search-row::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:linear-gradient(90deg, rgba(56,189,248,.18), rgba(251,146,60,.12));
  transition:opacity .16s ease;
}
body.home .gax-search-row:hover::before,
body.home .gax-search-row:focus-visible::before{
  opacity:1;
}
body.home .gax-search-row i,
body.home .gax-search-row span,
body.home .gax-search-row strong{
  position:relative;
  z-index:1;
}
body.home .gax-search-row > i{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  color:#8be9ff;
  border:1px solid rgba(56,189,248,.32);
  border-radius:7px;
  background:rgba(56,189,248,.08);
}
body.home .gax-search-row span{
  display:grid;
  min-width:0;
  gap:.14rem;
}
body.home .gax-search-row b,
body.home .gax-search-row em{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.home .gax-search-row b{
  color:#fff;
  font-size:.9rem;
}
body.home .gax-search-row em{
  color:rgba(203,213,225,.66);
  font-size:.72rem;
  font-style:normal;
}
body.home .gax-search-row > strong{
  min-width:2.25rem;
  padding:.16rem .45rem;
  color:#0b0714;
  font-size:.72rem;
  text-align:center;
  border-radius:999px;
  background:linear-gradient(135deg,#7dd3fc,#f0abfc);
}
body.home .gax-search-row.is-device > i{
  color:#fdba74;
  border-color:rgba(251,146,60,.34);
  background:rgba(251,146,60,.08);
}
body.home .gax-search-empty{
  color:rgba(226,232,240,.72);
  font-size:.78rem;
  line-height:1.55;
  padding:.38rem .12rem .1rem;
}

@media (max-width:640px){
  body.home .gax-search-panel{
    position:static;
    margin-top:.48rem;
    max-height:312px;
    padding:.62rem;
    clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  }
  body.home .gax-search-head{
    gap:.5rem;
  }
  body.home .gax-search-head span{
    font-size:.62rem;
  }
  body.home .gax-search-head strong{
    font-size:.72rem;
  }
  body.home .gax-search-row{
    grid-template-columns:30px minmax(0,1fr) auto;
    min-height:44px;
    gap:.48rem;
    padding:.46rem .5rem;
  }
  body.home .gax-search-row > i{
    width:30px;
    height:30px;
    font-size:.78rem;
  }
  body.home .gax-search-row b{
    font-size:.8rem;
  }
  body.home .gax-search-row em,
  body.home .gax-search-empty{
    font-size:.68rem;
  }
}

@media (min-width:641px){
  body.home .hero{
    z-index:20;
    overflow:visible;
  }
  body.home .search-container{
    z-index:35;
  }
  body.home .char-hero,
  body.home .hud-divider{
    position:relative;
    z-index:4;
  }
}
