/* ============================================================
   RONEX — division page components (shared by all division pages)
   ============================================================ */
.subhero { position: relative; padding-top: clamp(132px,15vw,176px); padding-bottom: var(--s-tight); overflow: hidden; }
.subhero canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.7; }
.subhero .veil { position:absolute; inset:0; z-index:1; background: radial-gradient(80% 70% at 20% 0%, var(--accent-dim), transparent 60%), linear-gradient(180deg, transparent 40%, var(--bg)); pointer-events:none; }
.crumb { display:flex; gap:10px; align-items:center; font-family:var(--mono); font-size:12px; letter-spacing:0.08em; color:var(--muted-2); margin-bottom:30px; flex-wrap:wrap; }
.crumb a:hover { color:#fff; }
.crumb .sep { color:#646B80; } /* was --faint (1.91:1, invisible); 3.77:1 keeps the trail legible but subordinate */

.division-nav { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
@media (max-width:760px){ .division-nav { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){
  .division-nav { grid-template-columns:1fr; }
  .division-nav a { padding:18px 16px; }
  .division-nav .dn-name { font-size:15px; line-height:1.35; }
}
.division-nav a { background:var(--bg); padding:26px 24px; transition:background .3s; display:flex; flex-direction:column; gap:8px; }
.division-nav a:hover { background:var(--panel); }
.division-nav a.active { background:var(--accent-dim); }
.division-nav .dn-no { font-family:var(--mono); font-size:11px; color:var(--muted-2); letter-spacing:0.18em; }
.division-nav .dn-name { font-size:16px; font-weight:600; letter-spacing:-0.01em; }
.division-nav a.active .dn-name { color:var(--accent-br); }

.process { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
@media (max-width:820px){ .process { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .process { grid-template-columns:1fr; } .pstep { padding:24px 20px; } }
.pstep { background:var(--bg); padding:34px 28px; position:relative; }
.pstep .ps-no { font-family:var(--mono); font-size:32px; font-weight:600; color:var(--accent); opacity:.5; letter-spacing:-0.04em; }
.pstep h4 { font-size:18px; margin:14px 0 10px; letter-spacing:-0.01em; }
.pstep p { color:var(--muted); font-size:14px; line-height:1.55; }

.cap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:820px){ .cap-grid { grid-template-columns:1fr; } }
.cap { border:1px solid var(--line); border-radius:6px; padding:28px; background:var(--panel); transition:border-color .3s, transform .3s; }
.cap:hover { border-color:var(--line-violet); transform:translateY(-3px); }
.cap .c-ico { width:34px; height:34px; color:var(--accent-br); margin-bottom:18px; }
.cap .c-ico svg { width:100%; height:100%; }
.cap h4 { font-size:17px; margin-bottom:9px; letter-spacing:-0.01em; }
.cap p { color:var(--muted); font-size:14px; line-height:1.55; }

.specs { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
@media (max-width:760px){ .specs { grid-template-columns:1fr 1fr; gap:32px; } }
.spec .s-v { font-size:clamp(30px,4vw,48px); font-weight:600; letter-spacing:-0.03em; }
.spec .s-v small { font-size:.45em; color:var(--accent-br); }
.spec .s-k { font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-2); margin-top:8px; }

.cta-band { position:relative; border:1px solid var(--line-2); border-radius:10px; overflow:hidden; padding:clamp(48px,7vw,88px); text-align:center; background:linear-gradient(180deg,var(--panel-2),var(--panel)); }
.cta-band canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.5; }
.cta-band .cb-in { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:26px; }

/* ---- pipeline mock (software) ---- */
.pipeline { display:flex; flex-direction:column; gap:10px; }
.pl-stage { display:flex; align-items:center; gap:14px; padding:15px 16px; border:1px solid var(--line); border-radius:5px; background:linear-gradient(90deg,var(--panel-2),var(--panel)); }
.pl-stage .pl-i { width:26px; height:26px; border-radius:5px; display:grid; place-items:center; border:1px solid var(--line-violet); color:var(--accent-br); font-family:var(--mono); font-size:12px; }
.pl-stage .pl-n { font-family:var(--mono); font-size:13px; letter-spacing:0.04em; }
.pl-stage .pl-s { margin-left:auto; font-family:var(--mono); font-size:11px; color:#25d07d; display:flex; align-items:center; gap:7px; }
.pl-stage .pl-s::before { content:''; width:6px; height:6px; border-radius:50%; background:#25d07d; box-shadow:0 0 8px #25d07d; }
.pl-stage.run .pl-s { color:var(--accent-br); }
.pl-stage.run .pl-s::before { background:var(--accent); box-shadow:0 0 8px var(--accent); animation:blink 1.4s infinite; }

/* ---- phone mock (mobile) ---- */
.phone { width:200px; margin:0 auto; border:1px solid var(--line-2); border-radius:26px; padding:10px; background:linear-gradient(180deg,#15182a,#0c0f18); box-shadow:0 30px 70px -30px rgba(0,0,0,.8); }
.phone .pscreen { border-radius:18px; overflow:hidden; background:var(--bg); border:1px solid var(--line); }
.phone .ptop { height:22px; display:flex; align-items:center; justify-content:center; }
.phone .ptop i { width:46px; height:5px; border-radius:3px; background:var(--line-2); }
.phone .pbody { padding:14px; display:flex; flex-direction:column; gap:10px; }
.phone .pcard { border:1px solid var(--line); border-radius:8px; padding:12px; background:rgba(255,255,255,.02); }
.phone .pk { font-family:var(--mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.phone .pv { font-size:20px; font-weight:600; margin-top:4px; letter-spacing:-.02em; }
.phone .pv small { font-size:9px; color:#25d07d; font-family:var(--mono); margin-left:5px; }
.phone .prow { display:flex; gap:8px; }
.phone .prow .pcard { flex:1; }
.phone .pbar { display:flex; gap:4px; align-items:flex-end; height:34px; margin-top:8px; }
.phone .pbar i { flex:1; background:linear-gradient(180deg,var(--accent),var(--accent-dim)); border-radius:1px; }

/* split-media holding two stacked things */
.media-pair { display:grid; grid-template-columns:1fr; gap:18px; }
.dual { display:grid; grid-template-columns:172px 1fr; gap:24px; align-items:center; }
@media (max-width:520px){ .dual { grid-template-columns:1fr; } .dual .phone { max-width:200px; } }