/* ============================================================================
   home.css — Home page section styles
============================================================================ */

/* ---------- HERO (statement) ---------- */
.hero { position: relative; overflow: hidden; padding: 104px 0 84px; text-align: center; }
.hero .glow-a { position: absolute; inset: 0; background: var(--grad-glow); pointer-events: none; }
.hero .glow-b { position: absolute; inset: 0; background: var(--grad-glow-gold); pointer-events: none; }
.hero .grid-tex { position: absolute; inset: 0; opacity: 0.5; -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 30%, transparent 80%); mask-image: radial-gradient(80% 70% at 50% 30%, #000 30%, transparent 80%); }
.hero-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hero-mark { height: 66px; width: auto; margin-bottom: 26px; filter: drop-shadow(0 10px 30px rgba(46,99,232,0.42)); }
.hero h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.03em; max-width: 16ch; }
.hero-lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--tx-2); max-width: 44em; margin: 24px 0 32px; line-height: 1.55; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-fine { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--tx-3); margin-top: 26px; }

/* ---------- PERSONA BAND ---------- */
.persona { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
.persona-toggle { display: inline-flex; flex-direction: column; gap: 8px; }
.persona-btn { text-align: left; font-family: var(--font-sans); font-size: 16px; font-weight: 600;
  color: var(--tx-2); background: transparent; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; cursor: pointer; transition: all var(--dur) var(--ease); display: flex; align-items: center; gap: 12px; }
.persona-btn .idx { font-family: var(--font-mono); font-size: 12px; color: var(--tx-3); }
.persona-btn:hover { border-color: var(--line-2); color: var(--tx-1); }
.persona-btn.on { background: rgba(46,99,232,0.1); border-color: var(--el-500); color: var(--tx-1); box-shadow: var(--glow-blue); }
.persona-btn.on .idx { color: var(--el-300); }
.persona-panel { border-left: 2px solid var(--el-600); padding-left: 32px; min-height: 180px; }
.persona-panel .pline { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.persona-panel .pbody { font-size: 16px; color: var(--tx-2); margin-top: 16px; line-height: 1.6; max-width: 40em; }
.persona-panel .pproof { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--gold-300); margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; }
.persona-fade { animation: pfade 0.35s var(--ease-out); }
@keyframes pfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- CAPABILITIES ---------- */
.cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cap-card { position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px; overflow: hidden; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.cap-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 100% 0%, rgba(46,99,232,0.1), transparent 60%); opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; }
.cap-card:hover { transform: translateY(-4px); border-color: rgba(79,134,255,0.45); }
.cap-card:hover::after { opacity: 1; }
.cap-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cap-ic { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center;
  color: var(--el-300); background: rgba(79,134,255,0.12); border: 1px solid rgba(79,134,255,0.28); }
.cap-n { font-family: var(--font-mono); font-size: 12px; color: var(--tx-3); margin-left: auto; }
.cap-card h3 { font-size: 21px; margin: 0; }
.cap-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--el-300); margin: 6px 0 14px; }
.cap-card p { font-size: 14.5px; color: var(--tx-2); line-height: 1.55; }
.cap-points { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.cap-points li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tx-2); }
.cap-points li .ck { color: var(--gold-400); flex: none; }

/* ---------- VENTURES ---------- */
.vent-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tx-3); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.vent-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.vent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 18px; }
.vent-grid.single { grid-template-columns: 1fr; }
.vent-card { display: grid; grid-template-columns: 280px 1fr; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.vent-grid:not(.single) .vent-card { grid-template-columns: 1fr; }
.vent-card:hover { transform: translateY(-3px); border-color: var(--line-2); }
.vent-thumb { position: relative; min-height: 168px; overflow: hidden;
  background: linear-gradient(140deg, #0e1830, #0a1020); display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.vent-grid:not(.single) .vent-thumb { min-height: 150px; }
.vent-card.client .vent-thumb { border-bottom: none; border-right: 1px solid var(--line); }
.vent-thumb .glow { position: absolute; inset: 0; }
.vent-thumb.blue .glow { background: radial-gradient(70% 70% at 50% 30%, rgba(46,99,232,0.4), transparent 65%); }
.vent-thumb.gold .glow { background: radial-gradient(70% 70% at 50% 30%, rgba(214,148,31,0.34), transparent 65%); }
.vent-thumb .chrome { position: absolute; top: 12px; left: 14px; display: flex; gap: 6px; }
.vent-thumb .chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.vent-thumb .mono { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 40px;
  letter-spacing: -0.02em; color: var(--tx-1); text-shadow: 0 6px 30px rgba(0,0,0,0.5); }
.vent-thumb.gold .mono { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vent-thumb.blue .mono { background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vent-thumb .dots { position: absolute; inset: 0; opacity: 0.5; background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 75%); }
.vent-body { padding: 24px 26px; display: flex; flex-direction: column; }
.vent-kind { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--el-300); }
.vent-card.gold-accent .vent-kind { color: var(--gold-300); }
.vent-body h3 { font-size: 24px; margin: 8px 0 12px; }
.vent-body p { font-size: 14.5px; color: var(--tx-2); line-height: 1.55; flex: 1; }
.vent-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.vent-tags span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--tx-2);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 4px 10px; }
.vent-visit { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; color: var(--el-300); }
.vent-visit:hover { color: var(--el-200); }

/* ---------- TECH STACK ---------- */
.stack-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.fchip { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--tx-2);
  background: rgba(255,255,255,0.025); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 8px 15px; cursor: pointer; transition: all var(--dur) var(--ease); }
.fchip:hover { color: var(--tx-1); border-color: var(--line-strong); }
.fchip.on { background: var(--el-500); border-color: var(--el-500); color: #fff; box-shadow: var(--glow-blue); }
.fchip.on.gold { background: var(--gold-500); border-color: var(--gold-500); color: #2a1c00; box-shadow: var(--glow-gold); }
.stack-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.tech { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 22px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity 0.3s var(--ease); }
.tech:hover { transform: translateY(-4px); border-color: rgba(79,134,255,0.45); }
.tech.dim { opacity: 0.16; filter: grayscale(0.6); transform: none; }
.tech-mark { width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
  color: var(--tx-1); background: linear-gradient(150deg, var(--panel-3), #0c1426); border: 1px solid var(--line-2); }
.tech-name { font-size: 13px; font-weight: 600; color: var(--tx-1); }
.tech-cat { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-3); }

/* ---------- ZERO-TO-TEN TEASER ---------- */
.zt-band { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center;
  background: var(--grad-deep); border: 1px solid var(--line-2); border-radius: var(--r-2xl); padding: 48px; position: relative; overflow: hidden; }
.zt-band .grid-tex { position: absolute; inset: 0; opacity: 0.35; }
.zt-left { position: relative; z-index: 2; }
.zt-left h2 { font-size: 34px; margin: 14px 0 16px; }
.zt-left p { font-size: 16px; color: var(--tx-2); line-height: 1.6; margin-bottom: 26px; max-width: 30em; }
.zt-steps { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.zt-step { border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; background: rgba(255,255,255,0.02); }
.zt-step .zn { font-family: var(--font-mono); font-size: 12px; color: var(--el-300); }
.zt-step .zt-t { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 8px 0 4px; }
.zt-step .zs { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--tx-3); text-transform: uppercase; }

/* ---------- LEADERSHIP ---------- */
.lead-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.lead-card { display: grid; grid-template-columns: auto 1fr; gap: 22px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; transition: border-color var(--dur) var(--ease); }
.lead-card:hover { border-color: var(--line-2); }
.lead-av { width: 88px; height: 88px; border-radius: var(--r-lg); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; position: relative; overflow: hidden; }
.lead-av.blue { background: var(--grad-blue); color: #fff; box-shadow: var(--glow-blue); }
.lead-av.gold { background: var(--grad-gold); color: #2a1c00; box-shadow: var(--glow-gold); }
.lead-av .star { position: absolute; top: 8px; right: 9px; font-size: 12px; opacity: 0.7; }
.lead-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--el-300); text-transform: uppercase; }
.lead-card.gold-accent .lead-role { color: var(--gold-300); }
.lead-info h3 { font-size: 22px; margin: 7px 0 12px; }
.lead-info p { font-size: 14px; color: var(--tx-2); line-height: 1.55; }
.lead-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.lead-tags span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--tx-2);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 4px 10px; }

@media (max-width: 920px) {
  .persona, .zt-band, .lead-grid, .cap-grid, .vent-grid { grid-template-columns: 1fr; }
  .stack-grid { grid-template-columns: repeat(3, 1fr); }
  .vent-card { grid-template-columns: 1fr !important; }
  .zt-steps { grid-template-columns: 1fr 1fr; }
}