/* ═══════════════════════════════════════════════════════════
   APEX BIM STUDIO — Revizto-inspired homepage
   Light, high-trust AECO SaaS · signature red · grotesk type
   ═══════════════════════════════════════════════════════════ */
:root {
  --bg:        #FFFFFF;
  --soft:      #F4F5F7;
  --soft-2:    #EDEFF2;
  --ink:       #0C0F14;   /* dark sections */
  --ink-2:     #14181F;
  --text:      #11151B;
  --text-mid:  #586273;
  --text-low:  #8A93A1;
  --on-dark:   #F4F6F8;
  --on-dark-mid: #A7B0BD;
  --line:      #E4E7EC;
  --line-2:    #D4D8DF;
  --line-dk:   rgba(255,255,255,0.10);
  --red:       #F23925;
  --red-hi:    #FF4F39;
  --red-dim:   rgba(242,57,37,0.10);
  --red-line:  rgba(242,57,37,0.28);
  --blue:      #2D6FF5;
  --cyan:      #19B8C9;
  --green:     #18A957;
  --maxw:      1220px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Hanken Grotesk", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; overflow-x: hidden; }
::selection { background: var(--red); color: #fff; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* ── Type ── */
.eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--red); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow.on-dark { color: var(--red-hi); }
.eyebrow.gray { color: var(--text-low); }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; }
h1 { font-size: clamp(42px, 5.6vw, 78px); }
h2 { font-size: clamp(30px, 3.9vw, 52px); }
h3 { font-size: 23px; letter-spacing: -0.015em; }
p { text-wrap: pretty; }
.lead { font-size: clamp(17px, 1.45vw, 21px); color: var(--text-mid); line-height: 1.55; }
.lead.on-dark { color: var(--on-dark-mid); }
section { position: relative; }
.pad { padding: clamp(80px, 9vw, 140px) 0; }
.pad-sm { padding: clamp(60px, 6vw, 96px) 0; }
.section-head { max-width: 760px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { margin: 18px 0 0; }
.section-head .lead { margin-top: 22px; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; padding: 14px 24px; border-radius: 8px; border: 1.5px solid transparent; cursor: pointer; transition: all .22s var(--ease); white-space: nowrap; }
.btn .arr { transition: transform .22s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-hi); box-shadow: 0 10px 26px -8px rgba(242,57,37,.5); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-2); }
.btn-ghost { border-color: var(--line-2); color: var(--text); background: var(--bg); }
.btn-ghost:hover { border-color: var(--text-mid); }
.btn-ghost.on-dark { color: var(--on-dark); border-color: var(--line-dk); background: transparent; }
.btn-ghost.on-dark:hover { border-color: var(--on-dark-mid); background: rgba(255,255,255,0.05); }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.linkmore { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--red); display: inline-flex; align-items: center; gap: 8px; }
.linkmore .arr { transition: transform .22s var(--ease); }
.linkmore:hover .arr { transform: translateX(4px); }

/* ── Announcement + header ── */
.announce { background: var(--ink); color: var(--on-dark); text-align: center; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; padding: 9px 16px; }
.announce a { color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.announce .tag { color: var(--red-hi); font-weight: 600; }
.announce .arr { transition: transform .22s var(--ease); display:inline-block; }
.announce a:hover .arr { transform: translateX(4px); }
header.site { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.82); backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; color: var(--ink); }
.brand .mark { width: 22px; height: 22px; position: relative; flex: none; border: 2px solid var(--red); border-radius: 3px; transform: rotate(45deg); }
.brand .mark::after { content:""; position: absolute; inset: 4px; border: 2px solid var(--ink); border-radius: 1px; }
.brand span.bim { color: var(--red); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a.nl { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--text); transition: color .2s; }
.nav-links a.nl:hover { color: var(--red); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-cta a.login { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--text); }
.nav-cta a.login:hover { color: var(--red); }
@media (max-width: 1040px){ .nav-links { display: none; } }

/* ── Hero ── */
.hero { padding: clamp(56px, 7vw, 96px) 0 0; text-align: center; overflow: hidden; }
.hero .eyebrow { justify-content: center; }
.hero h1 { margin: 22px auto 0; max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--red); }
.hero .lead { margin: 24px auto 0; max-width: 620px; }
.hero-cta { display: flex; gap: 14px; margin-top: 32px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--text-low); }
.hero-shot { margin-top: 60px; }

/* ── App window mockup ── */
.app-window { background: #fff; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(12,15,20,.30), 0 0 0 1px rgba(12,15,20,.02); }
.app-window.dark { background: var(--ink); border-color: var(--line-dk); }
.app-bar { height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--soft); }
.app-window.dark .app-bar { background: var(--ink-2); border-color: var(--line-dk); }
/* Windows-style window controls (Revit is Windows-only) */
:root { --winc: rgba(17,21,27,.62); }
.winicon { width: 15px; height: 15px; border-radius: 3px; flex:none; position: relative; background: var(--red); transform: rotate(45deg); }
.winicon::after { content:""; position:absolute; inset:3px; border:1.5px solid #fff; border-radius:1px; }
.traffic { margin-left: auto; display: flex; gap: 0; align-items: stretch; }
.traffic i { width: 30px; height: 28px; display: block; position: relative; background: transparent; border-radius: 0; transition: background .15s; }
.traffic i:hover { background: rgba(0,0,0,.07); }
.traffic i:last-child:hover { background: #E81123; }
.app-window.dark .traffic i:hover, .media-frame.dark .traffic i:hover { background: rgba(255,255,255,.09); }
.app-window.dark .traffic i:last-child:hover, .media-frame.dark .traffic i:last-child:hover { background: #E81123; }
.traffic i::before, .traffic i::after { background: var(--winc); }
.app-window.dark .traffic i::before, .app-window.dark .traffic i::after,
.media-frame.dark .traffic i::before, .media-frame.dark .traffic i::after { background: rgba(244,246,248,.78); }
.traffic i:last-child:hover::before, .traffic i:last-child:hover::after { background: #fff; }
/* minimize */
.traffic i:nth-child(1)::before { content:""; position:absolute; left:9px; right:9px; top:50%; height:1.5px; }
/* maximize */
.traffic i:nth-child(2)::before { content:""; position:absolute; left:9px; top:9px; width:12px; height:10px; border:1.5px solid var(--winc); background:transparent !important; }
.app-window.dark .traffic i:nth-child(2)::before, .media-frame.dark .traffic i:nth-child(2)::before { border-color: rgba(244,246,248,.78); }
.traffic i:nth-child(2):hover::before { } 
.traffic i:last-child:hover:nth-child(2)::before { border-color:#fff; }
/* close */
.traffic i:nth-child(3)::before, .traffic i:nth-child(3)::after { content:""; position:absolute; left:50%; top:50%; width:14px; height:1.5px; }
.traffic i:nth-child(3)::before { transform: translate(-50%,-50%) rotate(45deg); }
.traffic i:nth-child(3)::after { transform: translate(-50%,-50%) rotate(-45deg); }
.app-title { font-family: var(--font-mono); font-size: 12px; color: var(--text-low); }
.app-title b { color: var(--text-mid); font-weight: 500; }
.app-window.dark .app-title { color: var(--on-dark-mid); } .app-window.dark .app-title b { color: var(--on-dark); }
.app-body { display: grid; grid-template-columns: 1fr 1.12fr 0.92fr; min-height: 440px; background: #fff; }
.app-window.dark .app-body { background: var(--ink); }
.panel { padding: 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.app-window.dark .panel { border-color: var(--line-dk); }
.panel:last-child { border-right: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-head .pt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-low); }
.panel-head .pb { font-family: var(--font-mono); font-size: 10px; padding: 3px 7px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--text-mid); }
.panel-head .pb.on { color: var(--green); border-color: rgba(24,169,87,.4); background: rgba(24,169,87,.1); }
.app-window.dark .panel-head .pb { border-color: var(--line-dk); color: var(--on-dark-mid); }

/* drawing panel */
.dwg { flex:1; border:1px solid var(--line); border-radius: 8px; position: relative; overflow: hidden;
  background: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px), var(--soft);
  background-size: 22px 22px, 22px 22px, 100% 100%; }
.dwg .sheet-tag { position:absolute; top:9px; left:10px; font-family: var(--font-mono); font-size: 9px; color: var(--text-low); letter-spacing:.08em; }
.dwg .lineart { position:absolute; inset: 30px 24px; }
.dwg .lineart .box { position:absolute; border: 1.5px solid var(--text-mid); border-radius: 1px; }
.dwg .lineart .b1 { left:0; top:14%; width:46%; height:38%; }
.dwg .lineart .b2 { right:0; top:8%; width:38%; height:28%; }
.dwg .lineart .b3 { left:12%; bottom:6%; width:60%; height:26%; border-style: dashed; border-color: var(--text-low); }
.dwg .lbl { position:absolute; font-family: var(--font-mono); font-size: 8px; color: var(--text-low); }
.dwg .scan { position:absolute; left:0; right:0; height:2px; background: linear-gradient(90deg, transparent, var(--red), transparent); box-shadow: 0 0 14px 2px rgba(242,57,37,.5); animation: scan 3.4s var(--ease) infinite; }
/* detailed shop drawing */
.dwg .sd-elev { position:absolute; left:5%; top:9%; width:37%; height:54%; border:1.5px solid var(--on-dark-mid); }
.dwg .sd-elev .row { position:absolute; left:0; right:0; border-top:1px solid rgba(167,176,189,.45); }
.dwg .sd-elev .np { position:absolute; right:7%; top:7%; width:34%; height:13%; border:1px solid rgba(167,176,189,.55); }
.dwg .sd-term { position:absolute; width:3px; height:3px; border-radius:50%; background: var(--on-dark-mid); }
.dwg .sd-plan { position:absolute; right:6%; top:11%; width:34%; height:28%; border:1.4px solid var(--on-dark-mid); }
.dwg .sd-plan .eqp { position:absolute; inset:32%; border:1px solid rgba(167,176,189,.8); background: rgba(255,255,255,.06); }
.dwg .sd-plan .clr { position:absolute; inset:10%; border:1px dashed rgba(255,79,57,.6); }
.dwg .sd-dimv { position:absolute; left:1.8%; top:9%; height:54%; width:1px; background: rgba(95,168,230,.6); }
.dwg .sd-dimv::before, .dwg .sd-dimv::after { content:""; position:absolute; left:-2px; width:5px; height:1px; background: rgba(95,168,230,.6); }
.dwg .sd-dimv::before { top:0; } .dwg .sd-dimv::after { bottom:0; }
.dwg .sd-dimh { position:absolute; right:6%; top:43%; width:34%; height:1px; background: rgba(95,168,230,.6); }
.dwg .sd-tb { position:absolute; left:0; right:0; bottom:0; height:17%; border:1.5px solid var(--on-dark-mid); display:flex; background: rgba(0,0,0,.18); }
.dwg .sd-tb .c { border-right:1px solid rgba(167,176,189,.4); padding:0 6px; font-family: var(--font-mono); font-size:7px; color: rgba(167,176,189,.7); display:flex; flex-direction:column; justify-content:center; gap:2px; line-height:1.05; overflow:hidden; white-space:nowrap; }
.dwg .sd-tb .c:last-child { border-right:none; }
.dwg .sd-tb .c b { color: rgba(232,238,244,.9); font-weight:500; font-size:7.5px; }
.dwg .sd-tb .c.brand { color: var(--red-hi); justify-content:center; font-size:7.5px; }
/* params always filled — skeleton retired */
.pskel { display:none !important; }
@keyframes scan { 0%,100%{ top:6%; opacity:0;} 12%{opacity:1;} 50%{top:92%; opacity:1;} 62%{opacity:0;} }
@media (prefers-reduced-motion: reduce){ .dwg .scan { animation:none; top:50%; } }

/* family preview */
.fam { flex:1; position: relative; border:1px solid var(--line); border-radius:8px; display:grid; place-items:center; overflow:hidden;
  background: radial-gradient(ellipse 80% 80% at 50% 40%, var(--red-dim), transparent 70%), var(--soft); }
.app-window.dark .fam { background: radial-gradient(ellipse 80% 80% at 50% 40%, rgba(242,57,37,.14), transparent 70%), var(--ink-2); border-color: var(--line-dk); }
.app-window.dark .dwg { background: linear-gradient(var(--line-dk) 1px, transparent 1px), linear-gradient(90deg, var(--line-dk) 1px, transparent 1px), var(--ink-2); background-size: 22px 22px,22px 22px,100% 100%; border-color: var(--line-dk); }
.app-window.dark .dwg .lineart .box { border-color: var(--on-dark-mid); }
.iso { width: 60%; aspect-ratio: 1/1; position: relative; transform: rotateX(58deg) rotateZ(45deg); transform-style: preserve-3d; }
.iso .face { position:absolute; inset:0; border: 1.5px solid var(--red); }
.iso .top { background: rgba(242,57,37,.14); }
.iso .h { position:absolute; inset:0; transform: translateZ(40px); border: 1.5px solid var(--red-hi); background: rgba(255,79,57,.10); }
.iso .pillar { position:absolute; width:1.5px; background: var(--red-line); height: 40px; }
.iso .pillar.a{left:0;top:0;} .iso .pillar.b{right:0;top:0;} .iso .pillar.c{left:0;bottom:0;} .iso .pillar.d{right:0;bottom:0;}
.fam .zone-dash { position:absolute; width:78%; height:78%; border:1.4px dashed var(--red-line); border-radius:3px; }
.fam .badge-gen { position:absolute; bottom:12px; left:12px; font-family: var(--font-mono); font-size:10px; color: var(--green); display:flex; align-items:center; gap:6px; }
.fam .badge-gen .dot { width:6px; height:6px; border-radius:50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.fam .badge-pts { position:absolute; top:12px; right:12px; font-family: var(--font-mono); font-size:10px; color: var(--red); }
.fam .pt-x { position:absolute; width:6px; height:6px; transform: translate(-50%,-50%); }
.fam .pt-x::before,.fam .pt-x::after{ content:""; position:absolute; background: var(--red); }
.fam .pt-x::before{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%);} .fam .pt-x::after{ top:50%; left:0; right:0; height:1px; transform:translateY(-50%);}

/* params */
.params { display:flex; flex-direction:column; }
.prow { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-family: var(--font-mono); font-size:11.5px; }
.app-window.dark .prow { border-color: var(--line-dk); }
.prow .k { color: var(--text-low); } .prow .v { color: var(--text); } .prow .v.b { color: var(--red); }
.app-window.dark .prow .v { color: var(--on-dark); } .app-window.dark .prow .k { color: var(--on-dark-mid); }
.params .ph { font-family: var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-low); margin: 14px 0 8px; }
.params .progress { margin-top:auto; padding-top:16px; }
.progress .pl { display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:10px; color: var(--text-mid); margin-bottom:7px; }
.progress .track { height:5px; border-radius:100px; background: var(--soft-2); overflow:hidden; }
.app-window.dark .progress .track { background: var(--line-dk); }
.progress .fill { height:100%; width:100%; border-radius:100px; background: linear-gradient(90deg, var(--red), var(--red-hi)); }
.params .exp-btn { margin-top:14px; display:flex; align-items:center; justify-content:center; gap:8px; font-family: var(--font-mono); font-size:11.5px; color: var(--red); border:1px solid var(--red-line); background: var(--red-dim); border-radius:6px; padding:9px; }
@media (max-width: 880px){ .app-body { grid-template-columns: 1fr; } .panel { border-right:none; border-bottom:1px solid var(--line); min-height: 260px; } .panel:last-child{border-bottom:none;} }

/* ── Logo wall ── */
.partners { border-bottom: 1px solid var(--line); }
.partner-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 48px; }
.partner { display:flex; flex-direction:column; align-items:center; text-align:center; }
.partner image-slot { width: 100%; height: 88px; border: 1px solid var(--line-2); border-radius: 12px; background:#fff; overflow:hidden; }
/* original wordmark logotypes (stand-ins for official logos) */
.pwm { display:flex; align-items:center; justify-content:center; gap:11px; height:88px; width:100%; border:1px solid var(--line); border-radius:12px; background:#fff; filter:grayscale(1); opacity:.78; transition: filter .22s var(--ease), opacity .22s var(--ease), border-color .22s; }
.partner:hover .pwm { filter:none; opacity:1; border-color: var(--line-2); }
.pwm .m { width:36px; height:36px; border-radius:9px; display:grid; place-items:center; font-size:18px; color:#fff; flex:none; font-family: var(--font-display); font-weight:700; }
.pwm.cve .m { background:#C8202E; }
.pwm.taylor .m { background:#1F2A44; border-radius:7px; }
.pwm.summit .m { background:#0E7C5A; }
.pwm.dp .m { background:#0C0F14; border-radius:50%; font-size:13px; letter-spacing:.02em; }
.pwm .t { display:flex; flex-direction:column; line-height:1; text-align:left; }
.pwm .t b { font-family: var(--font-display); font-weight:700; font-size:18px; color: var(--ink); letter-spacing:-0.02em; }
.pwm .t i { font-style:normal; font-family: var(--font-mono); font-size:9px; letter-spacing:.24em; color: var(--text-mid); margin-top:4px; }
.partner .pl { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); letter-spacing:.03em; margin-top: 5px; }
@media (max-width: 760px){ .partner-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } }

/* ── Trust stats ── */
.trust { background: var(--ink); color: var(--on-dark); }
.trust .section-head .lead { color: var(--on-dark-mid); }
.stat-row { display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line-dk); border:1px solid var(--line-dk); border-radius: 12px; overflow:hidden; margin-top: 52px; }
.stat { background: var(--ink); padding: 40px 34px; }
.stat .sv { font-family: var(--font-display); font-size: clamp(42px,5vw,60px); font-weight:600; letter-spacing:-0.03em; line-height:1; color:#fff; }
.stat .sv .u { color: var(--red-hi); }
.stat .sl { color: var(--on-dark-mid); font-size: 15px; margin-top: 14px; }
@media (max-width: 760px){ .stat-row { grid-template-columns:1fr; } }

/* ── Feature rows (alternating) ── */
.frow { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,88px); align-items:center; }
.frow + .frow { margin-top: clamp(72px,9vw,120px); }
.frow.flip .frow-media { order: -1; }
.frow-copy .ficon { width: 50px; height: 50px; border:1px solid var(--red-line); background: var(--red-dim); border-radius: 11px; display:grid; place-items:center; color: var(--red); margin-bottom: 22px; }
.frow-copy h3 { font-size: clamp(26px,2.7vw,34px); }
.frow-copy p { color: var(--text-mid); font-size: 17px; margin-top: 16px; max-width: 46ch; }
.chips { display:flex; flex-wrap:wrap; gap: 9px; margin: 24px 0 26px; }
.chip { font-family: var(--font-mono); font-size: 12px; color: var(--text-mid); border:1px solid var(--line-2); border-radius: 100px; padding: 6px 13px; background: var(--bg); }
/* media frames */
.media-frame { border-radius: 14px; overflow: hidden; border:1px solid var(--line-2); box-shadow: 0 30px 70px -34px rgba(12,15,20,.28); background: var(--soft); aspect-ratio: 4/3; position: relative; }
.media-frame.dark { background: var(--ink); border-color: var(--line-dk); }
.media-frame .mbar { height: 38px; display:flex; align-items:center; gap:8px; padding: 0 14px; border-bottom:1px solid var(--line); background: #fff; }
.media-frame.dark .mbar { background: var(--ink-2); border-color: var(--line-dk); }
.media-frame .mbar { padding: 0 8px 0 14px; }
.media-frame .mbar .traffic i { width:26px; height:24px; }
.media-frame .mbar .traffic i:nth-child(2)::before { top:8px; }
.media-frame .mbody { position:absolute; inset: 38px 0 0; padding: 22px; }

/* survey visual */
.sv-plan { position:absolute; inset: 22px; border:1px solid var(--line); border-radius:8px; background: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px),#fff; background-size: 26px 26px,26px 26px,100% 100%; }
.sv-plan .eq { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); width:30%; height:26%; border:1.5px solid var(--text-mid); border-radius:2px; background: var(--soft); display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; color:var(--text-mid); }
.sv-plan .zone { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); width:58%; height:54%; border:1.4px dashed var(--red-line); border-radius:3px; background: var(--red-dim); }
.sv-plan .pt { position:absolute; width:9px; height:9px; transform:translate(-50%,-50%); }
.sv-plan .pt::before,.sv-plan .pt::after{ content:""; position:absolute; background:var(--red); }
.sv-plan .pt::before{ left:50%; top:0; bottom:0; width:1.3px; transform:translateX(-50%);} .sv-plan .pt::after{ top:50%; left:0; right:0; height:1.3px; transform:translateY(-50%);}
.csv-card { position:absolute; right: 18px; bottom: 18px; width: 54%; background:#fff; border:1px solid var(--line-2); border-radius:8px; box-shadow: 0 16px 36px -16px rgba(12,15,20,.30); overflow:hidden; }
.csv-card .ch { display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:10px; color: var(--text-low); padding: 9px 12px; border-bottom:1px solid var(--line); background: var(--soft); }
.csv-card .cb { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.85; color: var(--text-mid); padding: 10px 12px; }
.csv-card .cb .r1 { color: var(--red); }

/* validation visual */
.val-list { position:absolute; inset: 22px; display:flex; flex-direction:column; gap: 11px; }
.val-row { display:flex; align-items:center; gap: 12px; background:#fff; border:1px solid var(--line); border-radius: 8px; padding: 13px 15px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text); }
.val-row .vk { width: 20px; height: 20px; border-radius: 50%; background: rgba(24,169,87,.12); color: var(--green); display:grid; place-items:center; font-size: 11px; flex:none; }
.val-row .vstat { margin-left:auto; font-size: 10.5px; color: var(--green); }
.val-row.warn .vk { background: var(--red-dim); color: var(--red); } .val-row.warn .vstat { color: var(--red); }

/* dashboard visual */
.dash { position:absolute; inset: 22px; display:grid; grid-template-rows: auto 1fr; gap: 14px; }
.dash .dtop { display:flex; gap: 12px; }
.dash .kpi { flex:1; background:#fff; border:1px solid var(--line); border-radius:8px; padding: 12px 14px; }
.dash .kpi .kv { font-family: var(--font-display); font-weight:600; font-size: 22px; color: var(--text); }
.dash .kpi .kv .u { color: var(--red); }
.dash .kpi .kl { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-low); letter-spacing:.04em; margin-top: 3px; }
.dash .chart { background:#fff; border:1px solid var(--line); border-radius:8px; padding: 16px 18px; display:flex; align-items:flex-end; gap: 10px; }
.dash .bar { flex:1; border-radius: 4px 4px 0 0; background: var(--soft-2); position: relative; }
.dash .bar i { position:absolute; left:0; right:0; bottom:0; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--red-hi), var(--red)); }
@media (max-width: 860px){ .frow { grid-template-columns: 1fr; gap: 32px; } .frow.flip .frow-media { order: 0; } }

/* ── Proof / outcome cards ── */
.proof { background: var(--soft); }
.proof-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 52px; }
.pcard { background:#fff; border:1px solid var(--line); border-radius: 14px; padding: 32px 30px; display:flex; flex-direction:column; }
.pcard .pmetric { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing:-0.03em; color: var(--text); line-height:1; }
.pcard .pmetric .u { color: var(--red); }
.pcard .ptitle { font-family: var(--font-display); font-weight:600; font-size: 17px; margin: 14px 0 12px; }
.pcard p { color: var(--text-mid); font-size: 15px; flex:1; }
.pcard .pwho { margin-top: 20px; padding-top: 18px; border-top:1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--text-low); }
@media (max-width: 880px){ .proof-grid { grid-template-columns:1fr; } }

/* ═══ MODELING TOOLSET (competitor-adapted) ═══ */
.toolset { display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:48px; }
.tool { background:#fff; padding:26px 22px 28px; transition: background .25s; position:relative; }
.tool:hover { background: var(--soft); }
.tool::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--red); transition: width .3s var(--ease); }
.tool:hover::after { width:100%; }
.tool .ti { width:40px; height:40px; border:1px solid var(--red-line); background: var(--red-dim); border-radius:10px; display:grid; place-items:center; color:var(--red); font-size:18px; margin-bottom:16px; }
.tool h3 { font-size:16px; margin-bottom:7px; }
.tool p { color: var(--text-mid); font-size:13.5px; line-height:1.5; }
@media (max-width: 900px){ .toolset { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .toolset { grid-template-columns: 1fr; } }

/* toolset discipline tabs */
.ts-tabs { display:flex; gap:9px; margin-top: 26px; }
.ts-tab { font-family: var(--font-display); font-weight:600; font-size:14px; color: var(--text-mid); border:1.5px solid var(--line-2); background:#fff; border-radius:9px; padding:9px 18px; cursor:pointer; transition: all .18s var(--ease); }
.ts-tab:hover { border-color: var(--text-mid); color: var(--text); }
.ts-tab.active { border-color: var(--red); color: var(--red); background: var(--red-dim); }

/* conduit routing segments (spotlight) */
.rp-cd { position:absolute; height:2px; background:#ff4133; border-radius:2px; box-shadow:0 0 6px rgba(255,65,51,.4); }
.rp-cd.v { width:2px; height:auto; }
.rp-cd.cy { background: var(--cyan); box-shadow:0 0 6px rgba(25,184,201,.4); }

/* ═══ REVIT UI MOCKUP (ribbon · browser · viewport) ═══ */
.revit-ui { position:absolute; inset:0; display:flex; flex-direction:column; background:#2b2e33; font-family: var(--font-mono); --rln: rgba(232,238,244,.16); --rtx: rgba(232,238,244,.62); }
.rv-ribbon { background:#34383e; }
.rv-tabs { display:flex; padding:0 6px; font-size:9px; border-bottom:1px solid rgba(0,0,0,.45); overflow:hidden; }
.rv-tabs span { padding:6px 9px; color: var(--rtx); white-space:nowrap; }
.rv-tabs span.on { color:#fff; background:#2b2e33; border-top:2px solid var(--red); }
.rv-tools { display:flex; gap:5px; padding:7px 8px; background:#2b2e33; border-bottom:1px solid rgba(0,0,0,.45); overflow:hidden; }
.rv-tool { width:23px; height:23px; border:1px solid var(--rln); border-radius:3px; background:rgba(255,255,255,.04); display:grid; place-items:center; color:var(--rtx); font-size:11px; flex:none; }
.rv-tool.hot { border-color: var(--red-line); color: var(--red-hi); background: var(--red-dim); }
.rv-main { flex:1; display:flex; min-height:0; }
.rv-side { width:124px; flex:none; background:#26292e; border-right:1px solid rgba(0,0,0,.45); padding:9px 9px 0; display:flex; flex-direction:column; gap:5px; overflow:hidden; }
.rv-pal { font-size:8px; color: rgba(232,238,244,.42); text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid rgba(255,255,255,.09); padding-bottom:4px; margin-top:4px; }
.rv-prow { display:flex; justify-content:space-between; gap:6px; font-size:8.5px; }
.rv-prow .k { color: rgba(232,238,244,.4); } .rv-prow .v { color: rgba(232,238,244,.78); }
.rv-prow .v.hot { color: var(--red-hi); }
.rv-tree { font-size:8.5px; color: rgba(232,238,244,.6); display:flex; flex-direction:column; gap:3px; }
.rv-tree span::before { content:"▸ "; color: rgba(232,238,244,.3); }
.rv-tree .ind { padding-left:9px; } .rv-tree .ind::before { content:"• "; }
.rv-tree .on { color: var(--red-hi); }
.rv-view { flex:1; position:relative; overflow:hidden; --ln: rgba(201,209,218,.5); background:
  linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px,transparent 1px), #2a2d32;
  background-size: 26px 26px, 26px 26px, 100% 100%; }
.rv-cube { position:absolute; top:10px; right:10px; width:26px; height:26px; border:1px solid rgba(232,238,244,.5); background: rgba(255,255,255,.06); transform: rotateX(58deg) rotateZ(45deg); }
.rv-vlabel { position:absolute; left:10px; bottom:9px; font-size:9px; color: rgba(232,238,244,.5); letter-spacing:.06em; }
.rv-badge { position:absolute; font-size:9px; display:flex; align-items:center; gap:6px; }
.rv-badge.gen { right:10px; bottom:9px; color: var(--green); }
.rv-badge.gen .dot { width:6px; height:6px; border-radius:50%; background: var(--green); box-shadow:0 0 8px var(--green); }
.rv-badge.pts { top:10px; left:10px; color: var(--red-hi); }

/* isometric equipment cuboid (3D view) */
.cube { position:absolute; left:50%; top:50%; width:80px; height:80px; transform-style: preserve-3d; transform: translate(-50%,-50%) rotateX(58deg) rotateZ(45deg); }
.cube .side { position:absolute; width:80px; height:80px; border:1.4px solid var(--red-hi); }
.cube .top   { transform: translateZ(40px); background: rgba(255,79,57,.36); }
.cube .left  { transform: rotateX(90deg) translateZ(40px); background: rgba(242,57,37,.13); }
.cube .right { transform: rotateY(90deg) translateZ(40px); background: rgba(242,57,37,.24); }
.cube .seam { position:absolute; inset:13px; border:1px solid rgba(255,255,255,.2); }
.iso-clear { position:absolute; left:50%; top:54%; width:60%; height:46%; transform: translate(-50%,-50%); border:1.3px dashed var(--red-line); border-radius:3px; }
.iso-pt { position:absolute; width:9px; height:9px; transform: translate(-50%,-50%); }
.iso-pt::before,.iso-pt::after { content:""; position:absolute; background: var(--red); }
.iso-pt::before { left:50%; top:0; bottom:0; width:1.3px; transform:translateX(-50%); }
.iso-pt::after { top:50%; left:0; right:0; height:1.3px; transform:translateY(-50%); }

/* conduit rack section profile */
.cr-slab { position:absolute; left:9%; right:9%; top:13%; height:13px; border-bottom:1.5px solid rgba(201,209,218,.6); background: repeating-linear-gradient(45deg, rgba(201,209,218,.45) 0 1px, transparent 1px 6px); }
.cr-rod { position:absolute; width:2px; top:13%; bottom:42%; background: rgba(201,209,218,.55); }
.cr-rod::after { content:""; position:absolute; left:-2px; right:-2px; bottom:0; height:2px; background: rgba(201,209,218,.7); }
.cr-strut { position:absolute; left:22%; right:22%; bottom:40%; height:13px; border:1.5px solid rgba(201,209,218,.75); border-top:none; background: rgba(255,255,255,.05); }
.cr-conduit { position:absolute; bottom:calc(40% + 13px); border-radius:50%; border:2px solid rgba(232,238,244,.85); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 3px rgba(232,238,244,.16); transform: translateX(-50%); }
.cr-conduit::before { content:""; position:absolute; left:50%; top:12%; bottom:12%; width:1px; background: rgba(232,238,244,.4); transform:translateX(-50%); }
.cr-conduit::after { content:""; position:absolute; top:50%; left:12%; right:12%; height:1px; background: rgba(232,238,244,.4); transform:translateY(-50%); }
.cr-conduit.sel { border-color: var(--red-hi); box-shadow: inset 0 0 0 3px var(--red-line), 0 0 14px rgba(255,79,57,.45); }
.cr-conduit.sel::before, .cr-conduit.sel::after { background: var(--red-hi); }
.cr-size { position:absolute; transform:translateX(-50%); font-size:8.5px; color: rgba(232,238,244,.6); }
.cr-size.hot { color: var(--red-hi); }
.cr-dimline { position:absolute; left:22%; right:22%; bottom:30%; height:1px; background: rgba(95,168,230,.55); }
.cr-dimtxt { position:absolute; bottom:31%; left:50%; transform:translateX(-50%); font-size:8.5px; color: var(--blue); background:#2a2d32; padding:0 5px; }

/* dark variants for feature-row Revit views */
.csv-dark { position:absolute; right:14px; bottom:14px; width:54%; background: var(--ink-2); border:1px solid var(--line-dk); border-radius:8px; overflow:hidden; box-shadow:0 16px 36px -16px rgba(0,0,0,.6); }
.csv-dark .ch { display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:10px; color: var(--on-dark-mid); padding:8px 11px; border-bottom:1px solid var(--line-dk); background: var(--ink); }
.csv-dark .cb { font-family: var(--font-mono); font-size:10px; line-height:1.85; color: var(--on-dark-mid); padding:9px 11px; }
.csv-dark .cb .r1 { color: var(--red-hi); }
.val-list.dk { inset:18px; }
.val-list.dk .val-row { background: var(--ink-2); border-color: var(--line-dk); color: var(--on-dark); }
.val-list.dk .val-row .vstat { color: var(--green); }
.val-list.dk .val-row.warn .vstat { color: var(--red-hi); }
.dash.dk { inset:18px; }
.dash.dk .kpi { background: var(--ink-2); border-color: var(--line-dk); }
.dash.dk .kpi .kv { color:#fff; }
.dash.dk .kpi .kl { color: var(--on-dark-mid); }
.dash.dk .chart { background: var(--ink-2); border-color: var(--line-dk); }
.dash.dk .bar { background: var(--line-dk); }

/* ═══ AS-BUILT INTELLIGENCE (dark · electric blue) ═══ */
.asbuilt { background: var(--ink); color: var(--on-dark); position:relative; overflow:hidden;
  --eb:var(--red); --eb-hi:var(--red-hi); --eb-dim:var(--red-dim); --eb-line:var(--red-line);
  --ab-blue:#3B82F6; --ab-blue-hi:#5B9DFF; --ab-blue-dim:rgba(59,130,246,.14); --ab-blue-line:rgba(59,130,246,.42); }
.asbuilt::after { content:""; position:absolute; width:540px; height:540px; border-radius:50%; background:rgba(59,130,246,.34); filter:blur(130px); bottom:-280px; right:-140px; opacity:.3; z-index:0; pointer-events:none; }
.asbuilt .ab-glow { position:absolute; z-index:0; width:680px; height:680px; border-radius:50%; background:rgba(242,57,37,.4); filter:blur(120px); top:-280px; left:50%; transform:translateX(-50%); opacity:.32; pointer-events:none; }
.asbuilt .wrap { position:relative; z-index:1; }
.asbuilt .eyebrow { color: var(--eb-hi); } .asbuilt .eyebrow::before { background: var(--eb-hi); }
.asbuilt h2 { color:#fff; }
.asbuilt .section-head .lead { color: var(--on-dark-mid); }

/* workflow rail */
.ab-flow { position:relative; margin-top: 60px; }
.ab-rail { position:absolute; left:8%; right:8%; top:32px; height:2px; background: var(--line-dk); border-radius:2px; overflow:hidden; z-index:0; }
.ab-rail::before { content:""; position:absolute; top:0; left:0; height:100%; width:30%; background: linear-gradient(90deg, transparent, var(--ab-blue-hi), transparent); animation: abflow 3.2s linear infinite; }
@keyframes abflow { from { transform: translateX(-120%); } to { transform: translateX(430%); } }
@media (prefers-reduced-motion: reduce){ .ab-rail::before { animation:none; left:35%; } }
.ab-steps { display:grid; grid-template-columns: repeat(6,1fr); gap: 12px; position:relative; z-index:1; }
.ab-step { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.ab-ico { width:66px; height:66px; border-radius:50%; background: var(--ink-2); border:1.5px solid var(--eb-line); color: var(--eb-hi); display:grid; place-items:center; font-size:24px; box-shadow: 0 0 0 7px var(--ink); }
.ab-step .ab-lbl { font-family: var(--font-display); font-weight:600; font-size:14px; color:#fff; letter-spacing:-0.01em; }
.ab-step p { font-size:12px; color: var(--on-dark-mid); line-height:1.45; max-width: 18ch; }
@media (max-width: 980px){ .ab-rail { display:none; } .ab-steps { grid-template-columns: repeat(3,1fr); gap:28px 12px; } }
@media (max-width: 560px){ .ab-steps { grid-template-columns: 1fr 1fr; } }
/* blue "intelligence" cues on the verification end of the pipeline */
.ab-steps .ab-step:nth-child(5) .ab-ico, .ab-steps .ab-step:nth-child(6) .ab-ico { border-color: var(--ab-blue-line); color: var(--ab-blue-hi); }

/* feature cards */
.ab-cards { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-top: 60px; }
.ab-card { background: var(--ink-2); border:1px solid var(--line-dk); border-radius:14px; padding:28px 24px 30px; transition: border-color .22s, transform .22s var(--ease); }
.ab-card:hover { border-color: var(--eb-line); transform: translateY(-3px); }
.ab-cards .ab-card:nth-child(3) .ci, .ab-cards .ab-card:nth-child(4) .ci { border-color: var(--ab-blue-line); background: var(--ab-blue-dim); color: var(--ab-blue-hi); }
.ab-cards .ab-card:nth-child(3):hover, .ab-cards .ab-card:nth-child(4):hover { border-color: var(--ab-blue-line); }
.ab-card .ci { width:42px; height:42px; border-radius:10px; background: var(--eb-dim); border:1px solid var(--eb-line); color: var(--eb-hi); display:grid; place-items:center; font-size:19px; margin-bottom:18px; }
.ab-card h3 { color:#fff; font-size:17px; margin-bottom:9px; }
.ab-card p { color: var(--on-dark-mid); font-size:14px; line-height:1.5; }
@media (max-width: 900px){ .ab-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .ab-cards { grid-template-columns: 1fr; } }

/* callout */
.ab-callout { margin-top: 48px; border:1px solid var(--eb-line); background: var(--eb-dim); border-radius:14px; padding: clamp(32px,4vw,48px); text-align:center; position:relative; overflow:hidden; }
.ab-callout p { font-family: var(--font-display); font-weight:600; font-size: clamp(22px,2.7vw,32px); color:#fff; letter-spacing:-0.02em; line-height:1.2; max-width: 22ch; margin:0 auto; }
.ab-callout p em { font-style:normal; color: var(--ab-blue-hi); }

/* CTAs */
.ab-cta { display:flex; gap:14px; justify-content:center; margin-top: 40px; flex-wrap:wrap; }
.btn-eb { background: var(--red); color:#fff; }
.btn-eb:hover { background: var(--red-hi); box-shadow: 0 12px 32px -10px rgba(242,57,37,.55); }

/* ── Integrations marquee ── */
.integ { text-align:center; }
.marquee { margin-top: 48px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mtrack { display:flex; gap: 16px; width: max-content; animation: marq 28s linear infinite; }
.marquee:hover .mtrack { animation-play-state: paused; }
@keyframes marq { from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .mtrack { animation:none; } }
.itile { display:flex; align-items:center; gap:10px; flex:none; padding: 16px 26px; border:1px solid var(--line); border-radius: 12px; background:#fff; font-family: var(--font-display); font-weight:600; font-size: 16px; color: var(--text-mid); }
.itile .hex { width: 16px; height: 16px; background: var(--red); flex:none; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }

/* ── Awards ── */
.awards { border-top:1px solid var(--line); }
.awards .row { display:flex; align-items:center; justify-content:center; gap: 40px; flex-wrap: wrap; }
.award { text-align:center; font-family: var(--font-mono); font-size: 11px; color: var(--text-low); letter-spacing:.04em; display:flex; flex-direction:column; align-items:center; gap: 12px; }
.award .medal { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--line-2); display:grid; place-items:center; color: var(--red); font-size: 20px; }

/* ── Final CTA (dark) ── */
.cta { background: var(--ink); color: var(--on-dark); position: relative; overflow:hidden; text-align:center; }
.cta .glow { position:absolute; z-index:0; width: 600px; height: 600px; border-radius:50%; background: rgba(242,57,37,.3); filter: blur(110px); top:-200px; left:50%; transform:translateX(-50%); opacity:.5; pointer-events:none; }
.cta .inner { position: relative; z-index:1; max-width: 680px; margin:0 auto; }
.cta h2 { color:#fff; margin-bottom: 16px; }
.cta p { color: var(--on-dark-mid); font-size: 18px; }
.cta .row { display:flex; gap: 14px; justify-content:center; margin-top: 32px; flex-wrap: wrap; }

/* ── Footer ── */
footer.site { background: var(--ink); color: var(--on-dark-mid); padding: 64px 0 40px; border-top: 1px solid var(--line-dk); }
.foot-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand .brand { color:#fff; }
.foot-brand p { font-size: 14px; margin-top: 16px; max-width: 280px; color: var(--on-dark-mid); }
.foot-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing:.12em; text-transform: uppercase; color: var(--text-low); font-weight: 500; margin-bottom: 16px; }
.foot-col a { display:block; font-size: 14px; color: var(--on-dark-mid); margin-bottom: 11px; transition: color .2s; }
.foot-col a:hover { color:#fff; }
.foot-meta { margin-top: 48px; padding-top: 22px; border-top:1px solid var(--line-dk); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-family: var(--font-mono); font-size: 12px; color: var(--text-low); }
@media (max-width: 820px){ .foot-grid { grid-template-columns: 1fr 1fr; gap:32px; } }

/* reveal */
.reveal { opacity:0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none;} html{scroll-behavior:auto;} }

/* ═══ INTERACTIVE SIMULATION ═══ */
.sim { text-align: left; }
.sim-controls { display:flex; align-items:flex-end; justify-content:space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.sim-step { display:block; font-family: var(--font-mono); font-size: 11px; letter-spacing:.1em; text-transform: uppercase; color: var(--text-low); margin-bottom: 10px; }
.sim-chips { display:flex; gap: 9px; flex-wrap: wrap; }
.sim-chip { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-mid); border:1.5px solid var(--line-2); background:#fff; border-radius: 9px; padding: 9px 15px; cursor: pointer; transition: all .18s var(--ease); }
.sim-chip:hover:not(:disabled) { border-color: var(--text-mid); color: var(--text); }
.sim-chip.active { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.sim-chip:disabled { opacity: .5; cursor: default; }
.sim-actions { display:flex; align-items:center; gap: 14px; }
.sim-status { font-family: var(--font-mono); font-size: 12px; color: var(--text-mid); min-width: 0; }
.sim-reset { padding: 12px 18px; font-size: 14px; }

/* output empty / processing states */
.out-empty, .out-proc, .fam-result { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 10px; }
.out-empty { color: var(--on-dark-mid); font-family: var(--font-mono); font-size: 12px; gap: 6px; }
.out-empty .oe-icon { font-size: 34px; color: var(--line-dk); opacity:.6; }
.out-empty small { font-size: 10.5px; color: var(--text-low); }
.out-proc { color: var(--on-dark-mid); font-family: var(--font-mono); font-size: 12px; }
.spinner { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-dk); border-top-color: var(--red); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spinner { animation: none; } }

/* state-driven visibility */
.sim .out-empty { display:none; } .sim .out-proc { display:none; } .sim .fam-result { display:none; }
.sim[data-state="idle"] .out-empty { display:flex; }
.sim[data-state="scanning"] .out-proc,
.sim[data-state="generating"] .out-proc { display:flex; }
.sim[data-state="done"] .fam-result,
.sim[data-state="exporting"] .fam-result,
.sim[data-state="exported"] .fam-result { display:flex; }
/* scan only while scanning */
.sim .scan { animation: none; opacity: 0; }
.sim[data-state="scanning"] .scan { opacity: 1; animation: scan 1.6s var(--ease) infinite; }
/* output badge accent while busy */
.sim[data-state="scanning"] .panel-head .pb,
.sim[data-state="generating"] .panel-head .pb#simOutBadge { color: var(--red); border-color: var(--red-line); }

/* params skeleton + fill */
.param-scroll { flex:1; }
.pskel .skline { display:block; height: 11px; border-radius: 4px; background: var(--line-dk); margin: 9px 0; }
.pskel .skline:nth-child(3){ width: 80%; } .pskel .skline:nth-child(4){ width: 65%; }
.pskel .skline:nth-child(7){ width: 72%; } .pskel .skline:nth-child(8){ width: 58%; }
.sim[data-state="idle"] .pskel, .sim[data-state="scanning"] .pskel, .sim[data-state="generating"] .pskel { display:block; }
.sim[data-state="done"] .pskel, .sim[data-state="exporting"] .pskel, .sim[data-state="exported"] .pskel { display:none; }
.pfill .reveal-row { opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.pfill .reveal-row.in { opacity: 1; transform: none; }

/* export button states */
.exp-btn { cursor: pointer; transition: all .18s var(--ease); width:100%; }
.exp-btn:disabled { opacity: .4; cursor: default; }
.exp-btn:not(:disabled):hover { background: var(--red); color:#fff; }

/* export drawer */
.csv-drawer { margin-top: 14px; background: var(--ink); border:1px solid var(--line-dk); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px -24px rgba(12,15,20,.5); }
.csv-drawer .cd-head { display:flex; justify-content:space-between; font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-mid); padding: 11px 16px; border-bottom: 1px solid var(--line-dk); background: var(--ink-2); }
.csv-drawer .cd-head span:last-child { color: var(--red-hi); }
.csv-drawer .cd-body { font-family: var(--font-mono); font-size: 12px; line-height: 1.85; color: var(--on-dark); padding: 14px 16px; margin: 0; white-space: pre; overflow-x: auto; min-height: 40px; }

/* ═══ REVIT-STYLE OUTPUT VIEWPORT ═══ */
.revit-tabs { display:flex; background: var(--ink); border-bottom: 1px solid var(--line-dk); padding: 0 8px; }
.rtab { font-family: var(--font-mono); font-size: 10.5px; color: var(--on-dark-mid); padding: 7px 13px; display:flex; align-items:center; gap:7px; border-right: 1px solid var(--line-dk); }
.rtab::before { content:""; width:9px; height:9px; border:1px solid currentColor; opacity:.55; flex:none; }
.rtab.active { color:#fff; background: var(--ink-2); }
/* sim output = Revit canvas */
.sim .fam { background: #2a2d32 !important; }
.sim .panel-head .pt { white-space: nowrap; }
.revit-plan { position:absolute; inset:0; overflow:hidden; --ln: rgba(201,209,218,.5); }
.revit-plan .grid { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px,transparent 1px); background-size: 26px 26px; }
.rp-room { position:absolute; left:9%; top:13%; right:9%; bottom:13%; border:1.4px solid var(--ln); }
.rp-room::after { content:""; position:absolute; inset:3px; border:1px solid rgba(201,209,218,.22); }
.rp-vline { position:absolute; top:13%; bottom:13%; width:1.2px; background:var(--ln); }
.rp-hline { position:absolute; height:1.2px; background:var(--ln); }
.rp-zone { position:absolute; background: rgba(166,176,45,.42); border:1.2px solid rgba(198,208,78,.85); }
.rp-clear { position:absolute; border:1.3px dashed rgba(255,79,57,.7); border-radius:2px; }
.rp-equip { position:absolute; border:1.4px solid rgba(232,238,244,.85); background: rgba(255,255,255,.07); }
.rp-equip::before { content:""; position:absolute; inset:3px; border:1px solid rgba(232,238,244,.3); }
.rp-tag { position:absolute; display:inline-flex; align-items:center; background:#0b0e13; color:#fff; font-family: var(--font-mono); font-size: 11px; letter-spacing:.04em; padding: 3px 8px; border-radius:2px; white-space:nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.rp-tag::after { content:""; position:absolute; left:-11px; bottom:-7px; width:14px; height:1.3px; background:#fff; transform-origin: right center; transform: rotate(38deg); }
.rp-pt { position:absolute; width:10px; height:10px; transform: translate(-50%,-50%); }
.rp-pt::before, .rp-pt::after { content:""; position:absolute; background:#ff4133; }
.rp-pt::before { left:50%; top:0; bottom:0; width:1.4px; transform: translateX(-50%); }
.rp-pt::after { top:50%; left:0; right:0; height:1.4px; transform: translateY(-50%); }
.rp-pt.faint::before, .rp-pt.faint::after { background: rgba(255,65,51,.4); }