/* =========================================================
   RANZE PORTFOLIO v2  —  漆黒 × 赤 / HUD - BRIEFING
   ========================================================= */

:root{
  --bg:      #07080A;
  --bg-1:    #0B0D11;
  --bg-2:    #0F1116;
  --line:    rgba(255,255,255,.09);
  --line-2:  rgba(255,255,255,.18);
  --txt:     #E9EAED;
  --txt-2:   rgba(233,234,237,.62);
  --txt-3:   rgba(233,234,237,.34);
  --red:     #E5142A;
  --red-2:   #FF4054;
  --red-dim: rgba(229,20,42,.16);
  --red-glow:rgba(229,20,42,.45);

  /* 英字ロゴ・数値：幅広ジオメトリック */
  --disp: 'Syncopate', 'Zen Kaku Gothic New', sans-serif;
  /* HUD・ラベル：現代的モノスペース */
  --mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* 和文（本文・見出し共通） */
  --jp:   'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;

  --wrap: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--jp);
  font-weight:300;
  line-height:1.75;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--red); color:#fff; }

.mono{ font-family:var(--mono); font-weight:400; letter-spacing:.08em; }
.dim{ color:var(--txt-3); }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px; }

/* scrollbar */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); }
::-webkit-scrollbar-thumb:hover{ background:var(--red); }

/* =========================================================
   BOOT
   ========================================================= */
.boot{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s var(--ease), visibility .5s;
}
.boot.done{ opacity:0; visibility:hidden; pointer-events:none; }
.boot-inner{ width:min(520px,82vw); }
.boot-log{
  margin:0 0 18px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.1em; line-height:2; color:var(--txt-2);
  white-space:pre-wrap; min-height:8.5em;
}
.boot-log .ok{ color:var(--red-2); }
.boot-bar{ height:1px; background:rgba(255,255,255,.12); position:relative; overflow:hidden; }
.boot-bar span{ position:absolute; inset:0 100% 0 0; background:var(--red); transition:right .18s linear; }
.boot-skip{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  font-size:10.5px; color:var(--txt-3);
}

/* =========================================================
   GLOBAL FX
   ========================================================= */
/* 走査線はヒーロー内の背景のみ（本文の上には絶対に重ねない＝文字が刻まれるため） */
.fx-scan{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
  opacity:.5;
}
.fx-grain{
  position:fixed; inset:0; pointer-events:none; z-index:900;
  opacity:.022;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* =========================================================
   TOP HUD
   ========================================================= */
.hud{
  position:fixed; top:0; left:0; right:0; z-index:800;
  height:56px; display:flex; align-items:center; gap:24px;
  padding:0 26px;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
}
.hud.stuck{
  background:rgba(7,8,10,.82);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line);
}
.hud-l{ display:flex; align-items:baseline; gap:10px; }
.hud-mark{
  font-family:var(--disp); font-weight:400; font-size:12px;
  letter-spacing:.28em; padding-left:2px;
}
.hud-mark::before{
  content:''; display:inline-block; width:6px; height:6px;
  background:var(--red); margin-right:11px; vertical-align:middle;
  box-shadow:0 0 10px var(--red-glow);
}
.hud-sub{ font-size:10.5px; color:var(--txt-3); }

.hud-nav{ margin-left:auto; display:flex; gap:4px; }
.hud-nav a{
  position:relative; font-size:11px; color:var(--txt-2);
  padding:9px 13px; transition:color .25s;
}
.hud-nav a i{
  font-style:normal; color:var(--txt-3); font-size:10px;
  margin-right:7px; transition:color .25s;
}
.hud-nav a::after{
  content:''; position:absolute; left:13px; right:13px; bottom:4px;
  height:1px; background:var(--red); transform:scaleX(0);
  transform-origin:left; transition:transform .3s var(--ease);
}
.hud-nav a:hover{ color:var(--txt); }
.hud-nav a:hover i{ color:var(--red-2); }
.hud-nav a:hover::after{ transform:scaleX(1); }

.hud-r{ display:flex; align-items:center; gap:18px; font-size:10.5px; color:var(--txt-3); }
.hud-live{ display:flex; align-items:center; gap:7px; }
.hud-live b{
  width:5px; height:5px; border-radius:50%; background:var(--red);
  animation:blip 2.4s infinite;
}
@keyframes blip{ 0%,88%{ opacity:1 } 92%{ opacity:.15 } 100%{ opacity:1 } }
#hud-clock{ font-variant-numeric:tabular-nums; }

.hud-burger{ display:none; margin-left:auto; width:34px; height:34px; position:relative; }
.hud-burger span{
  position:absolute; left:7px; right:7px; height:1px; background:var(--txt);
  transition:transform .3s var(--ease), opacity .2s;
}
.hud-burger span:nth-child(1){ top:14px; }
.hud-burger span:nth-child(2){ top:20px; }
.hud-burger.open span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.hud-burger.open span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

.drawer{
  position:fixed; inset:56px 0 auto 0; z-index:790;
  background:rgba(7,8,10,.96); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  max-height:0; overflow:hidden; transition:max-height .45s var(--ease);
}
.drawer.open{ max-height:420px; }
.drawer nav{ display:flex; flex-direction:column; padding:8px 26px 22px; }
.drawer a{
  display:flex; align-items:center; gap:14px; padding:15px 0;
  border-bottom:1px solid var(--line); font-size:12px; color:var(--txt);
}
.drawer a i{ font-style:normal; font-size:10px; color:var(--red-2); }
.drawer a em{ font-style:normal; font-family:var(--jp); font-size:11px; color:var(--txt-3); margin-left:auto; letter-spacing:.06em; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:96px 28px 92px; overflow:hidden;
}
#fx{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-vign{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 45%, transparent 30%, rgba(7,8,10,.72) 78%, var(--bg) 100%),
    linear-gradient(to bottom, rgba(7,8,10,.85) 0%, transparent 22%, transparent 74%, var(--bg) 100%);
}

.hero-frame{ position:absolute; inset:74px 34px 34px; pointer-events:none; }
.cb{ position:absolute; width:22px; height:22px; border:1px solid var(--line-2); }
.cb.tl{ top:0; left:0; border-right:0; border-bottom:0; }
.cb.tr{ top:0; right:0; border-left:0; border-bottom:0; }
.cb.bl{ bottom:0; left:0; border-right:0; border-top:0; }
.cb.br{ bottom:0; right:0; border-left:0; border-top:0; }

.hero-tick{
  position:absolute; top:50%; display:flex; flex-direction:column;
  align-items:center; gap:14px; font-size:10px; color:var(--txt-3);
  writing-mode:vertical-rl; transform:translateY(-50%);
}
/* グラデーションで消える線ではなく「目盛りの上に置いた赤いインデックス」 */
.hero-tick b{
  display:block; width:1px; height:52px;
  background:linear-gradient(var(--line-2) 0 18px, var(--red) 18px 32px, var(--line-2) 32px 100%);
}
.hero-tick-l{ left:20px; }
.hero-tick-r{ right:20px; }

.hero-inner{ position:relative; width:100%; max-width:var(--wrap); margin:0 auto; }

.hero-eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:11px; color:var(--txt-2); margin-bottom:26px;
}
.eb-line{ display:block; width:46px; height:1px; background:var(--red); }
.badge{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  padding:4px 10px; border:1px solid var(--line-2); color:var(--txt-3);
}
.badge.open{ color:var(--red-2); border-color:rgba(229,20,42,.5); background:var(--red-dim); }

.wordmark{
  margin:0; font-family:var(--disp); font-weight:400;
  font-size:clamp(44px, 12.5vw, 138px);
  line-height:1.0; letter-spacing:.05em; text-transform:uppercase;
  text-indent:.05em;
}
.wordmark span{ display:inline-block; opacity:0; transform:translateY(.22em); }
.wordmark.in span{ animation:wmIn .9s var(--ease) forwards; }
@keyframes wmIn{ to{ opacity:1; transform:none; } }

/* 目盛りスケール＋往復する赤いインデックスマーカー */
.hero-rule{ position:relative; height:5px; margin:34px 0 26px; max-width:520px; }
.hero-rule::before{
  content:''; position:absolute; left:0; right:0; top:2px; height:1px;
  background:repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 8px);
}
.hero-rule span{
  position:absolute; top:0; left:0; width:5px; height:5px;
  background:var(--red);
  animation:sweepIdx 6.4s var(--ease) infinite;
}
@keyframes sweepIdx{
  0%{ left:0 } 50%{ left:calc(100% - 5px) } 100%{ left:0 }
}

.hero-tagline{
  margin:0; max-width:620px; font-size:14.5px; line-height:2;
  color:var(--txt-2); letter-spacing:.04em;
}

.hero-grid-nav{
  margin-top:44px; display:grid; gap:12px;
  grid-template-columns:repeat(4, minmax(0,142px));
}
.gnav{
  position:relative; aspect-ratio:1/1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:11px;
  border:1px solid var(--line); background:rgba(255,255,255,.012);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.gnav .gi{ width:22px; height:22px; fill:none; stroke:var(--txt-2); stroke-width:1.1; transition:stroke .3s; }
.gnav span{ font-size:10.5px; color:var(--txt-2); transition:color .3s; }
.gnav em{ font-style:normal; font-size:10.5px; color:var(--txt-3); letter-spacing:.1em; }
.gnav::before,.gnav::after{
  content:''; position:absolute; width:9px; height:9px; opacity:0;
  border:1px solid var(--red); transition:opacity .3s, transform .3s var(--ease);
}
.gnav::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; transform:translate(5px,5px); }
.gnav::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; transform:translate(-5px,-5px); }
.gnav:hover{ border-color:rgba(229,20,42,.45); background:rgba(229,20,42,.05); transform:translateY(-3px); }
.gnav:hover .gi{ stroke:var(--red-2); }
.gnav:hover span{ color:var(--txt); }
.gnav:hover::before,.gnav:hover::after{ opacity:1; transform:none; }

.hero-social{ margin-top:30px; display:flex; flex-wrap:wrap; gap:8px; }
.sbtn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  padding:8px 14px; border:1px solid var(--line); color:var(--txt-2);
  transition:border-color .28s, color .28s, background .28s;
}
.sbtn svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.2; }
.sbtn:hover{ border-color:rgba(229,20,42,.5); color:var(--red-2); background:var(--red-dim); }

.hero-foot{
  position:absolute; left:0; right:0; bottom:30px;
  display:flex; align-items:center; gap:22px;
  padding:0 52px; max-width:100%;
}
.ticker{
  flex:1; min-width:0; font-size:11px; color:var(--txt-2);
  background:rgba(255,255,255,.03); border-left:2px solid var(--red);
  padding:7px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.caret{ display:inline-block; width:6px; height:11px; background:var(--red); vertical-align:-1px; margin-left:3px; animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0 } }
.scroll-hint{ display:flex; align-items:center; gap:10px; font-size:10px; color:var(--txt-3); }
.scroll-hint span{ display:block; width:46px; height:1px; background:var(--line-2); position:relative; overflow:hidden; }
.scroll-hint span::after{
  content:''; position:absolute; inset:0 100% 0 0; background:var(--red);
  animation:hint 2.1s var(--ease) infinite;
}
@keyframes hint{ 0%{ inset:0 100% 0 0 } 55%{ inset:0 0 0 0 } 100%{ inset:0 0 0 100% } }

/* =========================================================
   SECTION SHELL
   ========================================================= */
.sec{ position:relative; padding:110px 0; }
.sec + .sec{ padding-top:0; }
#about, #skills, #contact{ padding-top:110px; }
.sec::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.sec:first-of-type::before{ display:none; }

.sec-head{ display:flex; align-items:flex-end; gap:20px; margin-bottom:42px; }
.sec-idx{ font-size:11px; color:var(--red); padding-bottom:7px; }
.sec-ttl{ line-height:1.2; }
.sec-en{ font-size:11px; color:var(--txt-3); margin-bottom:7px; }
.sec-jp{
  margin:0; font-family:var(--jp); font-weight:500;
  font-size:clamp(21px,2.9vw,29px); letter-spacing:.2em;
}
.sec-rule{
  flex:1; height:1px; margin-bottom:11px;
  background:repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 10px);
}
.sec-cnt{ font-size:11px; color:var(--txt-3); padding-bottom:9px; }

/* =========================================================
   WORKS
   ========================================================= */
.ctrl{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; margin-bottom:32px; }
.filters{ display:flex; flex-wrap:wrap; gap:6px; }
.fbtn{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  padding:8px 15px; border:1px solid var(--line); color:var(--txt-3);
  transition:all .26s var(--ease);
}
.fbtn:hover{ color:var(--txt); border-color:var(--line-2); }
.fbtn.active{ color:#fff; border-color:var(--red); background:var(--red-dim); box-shadow:inset 0 0 22px rgba(229,20,42,.13); }
.sortbtn{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  padding:8px 15px; border:1px solid var(--line); color:var(--txt-3);
  transition:all .26s var(--ease);
}
.sortbtn:hover{ color:var(--red-2); border-color:rgba(229,20,42,.5); }

.cards{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(310px,1fr));
}
.card{
  position:relative; cursor:pointer; overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid var(--line); background:var(--bg-1);
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease),
             border-color .3s, background .3s;
}
.card.in{ opacity:1; transform:none; }
.card.hidden{ display:none; }
.card:hover{ border-color:rgba(229,20,42,.42); background:var(--bg-2); }

.card-thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#0A0C10; }
.card-thumb img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.62) contrast(1.05) brightness(.82);
  transition:transform .8s var(--ease), filter .55s var(--ease);
}
.card:hover .card-thumb img{ transform:scale(1.05); filter:grayscale(0) contrast(1.02) brightness(.95); }
.card-thumb::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(7,8,10,.92), transparent 62%);
}
.ph{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:26px; opacity:.28; }

.card-idx{
  position:absolute; top:11px; left:12px; z-index:2;
  font-size:10px; letter-spacing:.16em; color:var(--txt-2);
  background:rgba(7,8,10,.72); padding:3px 8px; border-left:2px solid var(--red);
}
.card-feat{
  position:absolute; top:11px; right:12px; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:#fff; background:var(--red); padding:3px 8px;
}
.lock{ position:absolute; inset:8px; z-index:2; pointer-events:none; }
.lock i{
  position:absolute; width:13px; height:13px; border:1px solid var(--red);
  opacity:0; transition:opacity .3s, transform .35s var(--ease);
}
.lock i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; transform:translate(7px,7px); }
.lock i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; transform:translate(-7px,7px); }
.lock i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; transform:translate(7px,-7px); }
.lock i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; transform:translate(-7px,-7px); }
.card:hover .lock i{ opacity:1; transform:none; }

.card-body{ position:relative; flex:1; padding:18px 20px 20px; }
.card-meta{ display:flex; align-items:center; gap:12px; margin-bottom:11px; }
.cat{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--red-2);
}
.card-date{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--txt-3); margin-left:auto; }
.card-title{
  margin:0 0 10px; font-family:var(--jp); font-weight:400;
  font-size:14.5px; line-height:1.6; letter-spacing:.03em;
}
.card-client{ font-family:var(--mono); font-size:10px; color:var(--txt-3); letter-spacing:.1em; margin-bottom:12px; }
.card-client b{ color:var(--red-2); font-weight:400; margin-right:8px; }
.tags{ display:flex; flex-wrap:wrap; gap:5px; }
.tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  padding:3px 8px; border:1px solid var(--line); color:var(--txt-3);
}
.card-cta{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  padding:11px 20px; border-top:1px solid var(--line); color:var(--txt-3);
  transition:color .3s, background .3s, border-color .3s;
}
.card:hover .card-cta{ color:var(--red-2); border-top-color:rgba(229,20,42,.3); background:rgba(229,20,42,.05); }

.empty{ grid-column:1/-1; text-align:center; padding:70px 0; color:var(--txt-3); font-family:var(--mono); font-size:11px; }

/* =========================================================
   ABOUT
   ========================================================= */
.about{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:16px; align-items:start; }
.panel{ position:relative; border:1px solid var(--line); background:var(--bg-1); padding:26px 26px 28px; }
.panel-tag{ font-size:10px; color:var(--red); letter-spacing:.18em; margin-bottom:16px; }
.about-bio p{ margin:0; font-size:14px; line-height:2.1; color:var(--txt-2); white-space:pre-line; letter-spacing:.03em; }

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.stat{
  position:relative; border:1px solid var(--line); background:var(--bg-1);
  padding:20px 18px 18px; overflow:hidden;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.stat::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--red); transition:width 1.1s var(--ease) .15s;
}
.stat.in::after{ width:100%; }
.stat:hover{ border-color:rgba(229,20,42,.32); background:var(--bg-2); }

.stat-no{
  position:absolute; top:16px; right:16px;
  font-family:var(--mono); font-weight:300; font-size:10px;
  letter-spacing:.16em; color:rgba(233,234,237,.2);
}
.stat-ico{ margin-bottom:14px; height:22px; }
.stat-ico svg{
  width:22px; height:22px; fill:none;
  stroke:rgba(229,20,42,.72); stroke-width:1;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .3s var(--ease);
}
.stat:hover .stat-ico svg{ stroke:var(--red-2); }
.stat-val{ font-family:var(--disp); font-weight:400; font-size:30px; line-height:1; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
.stat-val em{ font-style:normal; font-family:var(--jp); font-weight:300; font-size:11px; color:var(--txt-3); margin-left:7px; letter-spacing:.08em; }
.stat-lbl{ margin-top:12px; font-family:var(--jp); font-weight:300; font-size:11px; letter-spacing:.06em; color:var(--txt-3); line-height:1.7; }

/* reveal shared */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   SKILLS
   ========================================================= */
.skills{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; align-items:start; }
.skgroup{ border:1px solid var(--line); background:var(--bg-1); padding:24px 24px 26px; }
.skgroup h3{
  margin:0 0 20px; font-family:var(--mono); font-weight:400; font-size:11px;
  letter-spacing:.2em; color:var(--red-2);
  display:flex; align-items:center; gap:12px;
}
.skgroup h3::after{ content:''; flex:1; height:1px; background:var(--line); }
.sk{ margin-bottom:17px; }
.sk:last-child{ margin-bottom:0; }
.sk-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
.sk-name{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--txt); }
.sk-pct{ font-family:var(--mono); font-size:10px; color:var(--txt-3); }
.sk-bar{ position:relative; height:3px; background:rgba(255,255,255,.07); }
.sk-bar i{
  position:absolute; inset:0 100% 0 0; background:var(--red);
  box-shadow:0 0 7px rgba(229,20,42,.3);
  transition:right 1.15s var(--ease);
}
.sk-bar::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 9.6%, rgba(7,8,10,.9) 9.6% 10%);
}

/* =========================================================
   CONTACT / FOOTER
   ========================================================= */
.contact-lead{ margin:0 0 30px; font-size:14px; line-height:2.1; color:var(--txt-2); }
.contact-lead .mono{ font-size:10.5px; }
.contacts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.ccard{
  position:relative; display:flex; align-items:center; gap:15px;
  border:1px solid var(--line); background:var(--bg-1); padding:19px 20px;
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.ccard svg{ width:18px; height:18px; fill:none; stroke:var(--txt-2); stroke-width:1.15; transition:stroke .3s; }
.ccard-l{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; }
.ccard-v{ font-family:var(--mono); font-size:10px; color:var(--txt-3); margin-top:3px; }
.ccard-arrow{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--txt-3); transition:transform .3s var(--ease), color .3s; }
.ccard:hover{ border-color:rgba(229,20,42,.45); background:rgba(229,20,42,.05); transform:translateY(-2px); }
.ccard:hover svg{ stroke:var(--red-2); }
.ccard:hover .ccard-arrow{ transform:translateX(4px); color:var(--red-2); }

.foot{ border-top:1px solid var(--line); padding:40px 0 46px; margin-top:110px; }
.foot-in{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-mark{ font-family:var(--disp); font-weight:400; font-size:12px; letter-spacing:.28em; }
#footer-text{ font-size:10.5px; }

/* =========================================================
   DOSSIER MODAL
   ========================================================= */
.dossier{
  position:fixed; inset:0; z-index:1000;
  background:rgba(4,5,7,.9); backdrop-filter:blur(9px);
  display:flex; align-items:center; justify-content:center; padding:28px;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.dossier.open{ opacity:1; visibility:visible; }
.dossier-box{
  position:relative; width:min(1000px,100%); max-height:88vh; overflow-y:auto;
  background:var(--bg-1); border:1px solid var(--line-2);
  transform:translateY(18px) scale(.99); transition:transform .4s var(--ease);
}
.dossier.open .dossier-box{ transform:none; }
.dossier-close{
  position:absolute; top:0; right:0; z-index:5;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  padding:12px 16px; color:var(--txt-3); border-left:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(7,8,10,.85); transition:color .25s, background .25s;
}
.dossier-close:hover{ color:#fff; background:var(--red); }

.dh{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); }
.dh-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--red); }
.dh-line{ flex:1; height:1px; background:repeating-linear-gradient(90deg,var(--line) 0 5px, transparent 5px 10px); }
.dh-id{ font-family:var(--mono); font-size:10px; color:var(--txt-3); letter-spacing:.12em; margin-right:80px; }

.dbody{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
.dvis{ position:relative; min-height:360px; background:#08090C; border-right:1px solid var(--line); overflow:hidden; }
.dvis img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.03) brightness(.92); }
.dvis .ph{ position:absolute; inset:0; }
.dvis-grid{
  position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 46px);
}
.dvis .lock{ inset:12px; }
.dvis .lock i{ opacity:1; transform:none; }

.dinfo{ padding:26px 26px 30px; }
.dinfo h2{ margin:0 0 20px; font-family:var(--jp); font-weight:500; font-size:19px; line-height:1.7; letter-spacing:.05em; }
.dspec{ border-top:1px solid var(--line); margin-bottom:20px; }
.dspec div{ display:flex; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); }
.dspec dt{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--txt-3); width:78px; flex:none; }
.dspec dd{ margin:0; font-size:11.5px; color:var(--txt-2); letter-spacing:.03em; }
.ddesc{ margin:0 0 20px; font-size:12.5px; line-height:2.05; color:var(--txt-2); white-space:pre-line; letter-spacing:.03em; }
.dlinks{ display:flex; flex-wrap:wrap; gap:8px; }
.dlink{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  padding:9px 14px; border:1px solid var(--line-2); color:var(--txt-2);
  transition:all .28s var(--ease);
}
.dlink svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.2; }
.dlink:hover{ border-color:var(--red); color:#fff; background:var(--red); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1400px){
  .hero-tick{ display:none; }
}
@media (max-width:1080px){
  .about{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .hud-nav{ display:none; }
  .hud-r{ display:none; }
  .hud-burger{ display:block; }
  .dbody{ grid-template-columns:1fr; }
  .dvis{ border-right:0; border-bottom:1px solid var(--line); min-height:230px; }
  .hero-grid-nav{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .gnav em{ display:none; }
  .hero-foot{ padding:0 28px; }
  .scroll-hint{ display:none; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .hero-frame{ inset:70px 16px 16px; }
  #fx{ opacity:.7; }
}
@media (max-width:560px){
  .wrap{ padding:0 18px; }
  .hero{ padding:88px 18px 96px; }
  .sec{ padding:80px 0; }
  .cards{ grid-template-columns:1fr; }
  .sec-head{ flex-wrap:wrap; gap:12px; }
  .sec-rule{ display:none; }
  .stat-val{ font-size:25px; }
  .dossier{ padding:0; }
  .dossier-box{ max-height:100vh; height:100%; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal,.card{ opacity:1 !important; transform:none !important; }
}