/* ============================================================
SOLIDUS CONSTRUCTION — shared site styles (draft)
Animatrix-inspired riveted-steel HUD, on the Solidus brand:
black terminal, mint glow (#5fffce), Orbitron + JetBrains Mono,
56px grid, scanlines, CAD survey crosshairs.
Shared by index.html + intake.html; assets local in ./assets/.
============================================================ */
@font-face{font-family:'Orbitron';src:url('Orbitron.ttf') format('truetype');font-weight:400 900;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('JetBrainsMono.ttf') format('truetype');font-weight:100 800;font-display:swap;}
:root{
--bg:#05080a; --bg2:#0a1013;
--glow:#5fffce; --glow-bright:#8affda; --glow-dim:#2f7d68;
--amber:#ffb43f; --amber-bright:#ffd27a; --amber-dim:#8a5e12;
--muted:#6c7378; --line:rgba(95,255,206,.16);
--steel-0:#3a4247; --steel-1:#20272b; --steel-2:#12181b; --steel-hi:#586169;
--display:'Orbitron','JetBrains Mono',sans-serif;
--mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;
--sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg);color:#cdd6d2;font-family:var(--mono);}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
/* ---------- fixed backdrop: grid + scanlines + vignette ---------- */
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg);}
.backdrop .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(1.1);}
#stars{position:absolute;inset:0;width:100%;height:100%;}
.grid{position:absolute;inset:0;background:
linear-gradient(rgba(95,255,206,.04) 1px,transparent 1px) 0 0/56px 56px,
linear-gradient(90deg,rgba(95,255,206,.04) 1px,transparent 1px) 0 0/56px 56px;
-webkit-mask:radial-gradient(circle at 50% 42%,#000 0%,#000 32%,transparent 82%);
mask:radial-gradient(circle at 50% 42%,#000 0%,#000 32%,transparent 82%);
animation:gridpan 34s linear infinite;}
@keyframes gridpan{to{background-position:56px 56px,56px 56px;}}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(95,255,206,.05) 0 1px,transparent 1px 3px);mix-blend-mode:screen;}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 30%,rgba(5,8,10,.55) 72%,#05080a 100%);}
/* ---------- shell ---------- */
.wrap{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:26px 22px 60px;}
/* ---------- top HUD bar ---------- */
.hud{display:flex;justify-content:space-between;align-items:center;gap:14px;
font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
padding:9px 16px;border:1px solid var(--line);border-radius:4px;
background:linear-gradient(180deg,rgba(10,16,19,.85),rgba(5,8,10,.85));backdrop-filter:blur(2px);}
.hud .b{color:var(--glow);}
.hud .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 8px var(--glow);margin-right:7px;vertical-align:-1px;animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hud .r{color:#8b948f;display:flex;align-items:center;gap:16px;}
.hud a.home{color:var(--muted);transition:.15s;}
.hud a.home:hover{color:var(--glow-bright);}
/* discreet SITELOG client-portal login */
.portal{display:inline-flex;align-items:center;gap:7px;flex:none;
font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#9aa4a0;
border:1px solid var(--line);border-radius:3px;padding:5px 11px;background:rgba(10,16,19,.6);transition:.16s;}
.portal svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.6;}
.portal:hover{color:var(--glow-bright);border-color:var(--glow-dim);background:rgba(95,255,206,.05);box-shadow:0 0 14px rgba(95,255,206,.15);}
/* ---------- riveted steel masthead ---------- */
.plate{position:relative;margin:16px 0;border-radius:9px;overflow:hidden;
background:
linear-gradient(158deg,var(--steel-0),var(--steel-1) 42%,var(--steel-2) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 40px rgba(0,0,0,.6),0 18px 46px rgba(0,0,0,.6);
border:1px solid #454e54;}
.plate::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
background:
radial-gradient(120% 80% at 20% -10%,rgba(255,255,255,.14),transparent 40%),
repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 5px);}
.rivets{position:absolute;inset:9px;pointer-events:none;}
.rivet{position:absolute;width:11px;height:11px;border-radius:50%;
background:radial-gradient(circle at 35% 30%,#7b858c,#2a3135 60%,#12171a);
box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.7);}
.rivet.tl{top:0;left:0}.rivet.tr{top:0;right:0}.rivet.bl{bottom:0;left:0}.rivet.br{bottom:0;right:0}
.rivet.tm{top:0;left:50%;margin-left:-5px}.rivet.bm{bottom:0;left:50%;margin-left:-5px}
.masthead{position:relative;text-align:center;padding:26px 20px 30px;}
.welcome{font-family:var(--mono);font-size:12px;letter-spacing:.55em;text-indent:.55em;color:#aeb7bc;text-transform:uppercase;}
.welcome::before,.welcome::after{content:'—';color:var(--glow-dim);margin:0 12px;}
.wordmark{position:relative;display:inline-block;margin-top:10px;
font-family:var(--display);font-weight:800;font-size:clamp(38px,9vw,92px);line-height:.9;letter-spacing:.05em;
color:#eafff6;text-shadow:0 0 26px rgba(95,255,206,.45),0 0 4px rgba(95,255,206,.6);}
.wordmark.sm{font-size:clamp(30px,6vw,58px);}
.wordmark .glitch{position:absolute;inset:0;color:var(--glow);clip-path:inset(0 0 55% 0);opacity:.0;}
.wordmark:hover .glitch{animation:glitch .5s steps(2) 2;}
@keyframes glitch{0%{opacity:.7;transform:translate(-3px,-1px)}50%{opacity:.5;transform:translate(3px,1px)}100%{opacity:0}}
.subword{margin-top:8px;font-family:var(--display);font-weight:600;font-size:clamp(9px,1.8vw,13px);letter-spacing:.5em;text-indent:.5em;color:#dff3ec;}
.eyebrow{margin-top:14px;font-size:10px;letter-spacing:.42em;text-indent:.42em;color:var(--glow);text-transform:uppercase;}
/* plain-language identity line under the masthead — says clearly what Solidus IS */
.tagline{max-width:720px;margin:14px auto 0;padding:0 16px;text-align:center;
font-family:var(--mono);font-size:13.5px;line-height:1.75;letter-spacing:.04em;color:#c3cdc8;}
.tagline b{color:var(--glow);font-weight:700;}
@media(max-width:820px){.tagline{font-size:12px;}}
/* ---------- main grid: hero column + panels ---------- */
/* columns stretch to equal height; the CTA pins to the rail's bottom and the
rack distributes its units, so both boxes end flush */
.main{display:grid;grid-template-columns:340px 1fr;gap:20px;margin-top:20px;align-items:stretch;}
/* hero column (mirrors Animatrix left rail) */
.rail{display:flex;flex-direction:column;gap:16px;}
.rail .cta.primary{margin-top:auto;}
.frame{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;
background:linear-gradient(180deg,rgba(10,16,19,.9),rgba(5,8,10,.92));}
.frame .cap{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:8px 11px;border-bottom:1px solid var(--line);}
.frame .cap .b{color:var(--glow);}
.hero-media{position:relative;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:#05080a;}
/* ---------- SITECAM CRT stand-by (future: live jobsite feed) ---------- */
.crt{overflow:hidden;border-radius:4px;animation:crt-flicker 4s steps(1) infinite;}
/* jobsite live-cam feed — real photo, grayed + phosphor-tinted behind the CRT effect */
.crt-feed{position:absolute;inset:0;z-index:0;
background:url('sitelog/livecam.jpg') center/cover no-repeat;}
.crt-feed::after{content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(8,34,24,.42),rgba(4,12,9,.55)),
radial-gradient(circle at 50% 44%,rgba(95,255,206,.10),transparent 62%);}
#crt-noise{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:.2;
image-rendering:pixelated;mix-blend-mode:screen;}
.crt::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
background:repeating-linear-gradient(180deg,rgba(0,0,0,.32) 0 1px,transparent 1px 3px);}
.crt-roll{position:absolute;left:0;right:0;height:26%;z-index:2;pointer-events:none;mix-blend-mode:screen;
background:linear-gradient(180deg,transparent,rgba(180,255,228,.09) 45%,rgba(180,255,228,.16) 50%,rgba(180,255,228,.09) 55%,transparent);
animation:crt-roll 5.5s linear infinite;}
@keyframes crt-roll{0%{top:-30%}100%{top:110%}}
.crt-center{position:relative;z-index:4;text-align:center;}
.standby{font-family:var(--display);font-weight:800;font-size:clamp(17px,2.9vw,25px);letter-spacing:.2em;text-indent:.2em;line-height:1.08;
color:#eafff6;text-shadow:0 0 18px rgba(95,255,206,.7),0 2px 10px rgba(0,0,0,.7),1px 0 0 rgba(255,60,90,.3),-1px 0 0 rgba(60,160,255,.3);
animation:standby-blink 8s ease-in-out infinite;}
@keyframes standby-blink{0%,90%,100%{opacity:1}94%{opacity:.6}97%{opacity:1}}
.nosig{margin-top:9px;font-family:var(--mono);font-size:8.5px;letter-spacing:.28em;text-indent:.28em;color:#bfe9da;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.7);}
.crt-osd .lf{color:#9fb0aa;letter-spacing:.14em;}
.crt-status{margin-top:11px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.34em;text-indent:.34em;
text-transform:uppercase;color:var(--amber);text-shadow:0 0 10px rgba(255,180,63,.55),0 1px 6px rgba(0,0,0,.75);
animation:pulse 2.6s ease-in-out infinite;}
.crt-osd{position:absolute;left:10px;right:10px;z-index:4;display:flex;justify-content:space-between;
font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#bfe9da;text-transform:uppercase;text-shadow:0 0 6px rgba(95,255,206,.4);}
.crt-osd.t{top:9px;}.crt-osd.b{bottom:9px;color:#6f8d82;}
.crt-osd .rec{color:#ff5f6e;text-shadow:0 0 8px rgba(255,95,110,.6);animation:pulse 1.6s steps(1) infinite;}
.crt-vig{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:4px;
background:radial-gradient(ellipse at 50% 50%,transparent 52%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.85) 100%);
box-shadow:inset 0 0 60px rgba(0,0,0,.8);}
@keyframes crt-flicker{0%,100%{opacity:1}7%{opacity:.92}8%{opacity:1}53%{opacity:.95}54%{opacity:1}}
.cta{display:block;text-align:center;font-family:var(--display);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
border:1px solid var(--glow-dim);border-radius:5px;padding:16px 14px;color:var(--glow-bright);font-size:15px;
background:linear-gradient(180deg,rgba(95,255,206,.07),rgba(95,255,206,.02));
transition:.18s;position:relative;overflow:hidden;}
.cta:hover{border-color:var(--glow);color:#04110c;background:linear-gradient(180deg,var(--glow-bright),var(--glow));box-shadow:0 0 26px rgba(95,255,206,.45);}
.cta .sub{display:block;font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:.2em;margin-top:5px;opacity:.75;}
/* primary CTA — hi-vis AMBER engage plate: brackets + sheen + slow pulse */
.cta.primary{font-size:17px;padding:22px 18px;color:var(--amber-bright);
border:1px solid rgba(255,180,63,.5);
background:linear-gradient(180deg,#1c1608 0%,#120d04 55%,#0a0702 100%);
text-shadow:0 0 16px rgba(255,180,63,.5);
animation:cta-pulse 3.2s ease-in-out infinite;}
.cta.primary .sub{color:#c9a45f;opacity:1;}
.cta.primary::before,.cta.primary::after{content:'';position:absolute;width:15px;height:15px;
border:2px solid var(--amber);transition:.22s;filter:drop-shadow(0 0 4px rgba(255,180,63,.6));}
.cta.primary::before{top:7px;left:7px;border-right:0;border-bottom:0;}
.cta.primary::after{bottom:7px;right:7px;border-left:0;border-top:0;}
.cta.primary .sheen{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(115deg,transparent 32%,rgba(255,210,122,.18) 48%,rgba(255,210,122,.05) 55%,transparent 68%);
transform:translateX(-130%);animation:sheen 5s ease-in-out infinite;}
@keyframes sheen{0%,58%{transform:translateX(-130%)}82%,100%{transform:translateX(130%)}}
@keyframes cta-pulse{
0%,100%{border-color:rgba(255,180,63,.38);box-shadow:0 0 10px rgba(255,180,63,.12),inset 0 0 18px rgba(255,180,63,.04);}
50%{border-color:rgba(255,180,63,.9);box-shadow:0 0 26px rgba(255,180,63,.35),inset 0 0 26px rgba(255,180,63,.08);}
}
.cta.primary:hover{animation:none;color:#150d00;border-color:var(--amber);
background:linear-gradient(180deg,var(--amber-bright),var(--amber));text-shadow:none;
box-shadow:0 0 40px rgba(255,180,63,.55);transform:translateY(-1px);}
.cta.primary:hover::before{top:4px;left:4px;border-color:#150d00;filter:none;}
.cta.primary:hover::after{bottom:4px;right:4px;border-color:#150d00;filter:none;}
.cta.primary:hover .sub{color:#3a2a08;}
.cta.primary:hover .sheen{display:none;}
.cta.ghost{color:#cdd6d2;border-color:var(--line);background:rgba(10,16,19,.7);}
.cta.ghost:hover{color:var(--glow-bright);border-color:var(--glow-dim);background:rgba(95,255,206,.05);box-shadow:none;}
/* right: service panels (unnumbered — the list is open-ended, not a closed set) */
.panels{display:flex;flex-direction:column;gap:14px;justify-content:space-between;}
.panel{position:relative;display:grid;grid-template-columns:1fr 176px;align-items:stretch;
border:1px solid #2b3338;border-radius:7px;overflow:hidden;
background:linear-gradient(150deg,var(--steel-1),var(--steel-2));
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 22px rgba(0,0,0,.45);
transition:.2s;}
.panel::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.4;
background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 6px);}
.panel:hover{border-color:var(--glow-dim);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 30px rgba(0,0,0,.6),0 0 0 1px rgba(95,255,206,.12);}
.pbody{padding:15px 20px;position:relative;z-index:1;}
.pbody h3{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#eef5f2;}
.pbody .meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px;}
.click{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:0 18px;
border-left:1px solid #2b3338;background:linear-gradient(180deg,rgba(5,8,10,.4),rgba(5,8,10,.7));position:relative;z-index:1;}
.click .go{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.12em;color:var(--glow-bright);text-shadow:0 0 12px rgba(95,255,206,.4);}
.click .l{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--glow-dim);}
.panel:hover .click{background:linear-gradient(180deg,rgba(95,255,206,.06),rgba(95,255,206,.02));}
.panel:hover .click .go{color:#fff;}
/* ---------- section caps (shared) ---------- */
.sec-cap{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.sec-cap .b{color:var(--glow);}
.sec-cap .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);}
/* ---------- build pipeline ---------- */
.pipe{margin-top:22px;border:1px solid var(--line);border-radius:7px;position:relative;overflow:hidden;
background:linear-gradient(180deg,rgba(10,16,19,.85),rgba(5,8,10,.9));padding:16px 22px 20px;}
.pipe-rail{display:grid;grid-template-columns:repeat(5,1fr);position:relative;margin-top:22px;}
.pipe-rail::before{content:'';position:absolute;top:9px;left:10%;right:10%;height:2px;
background:linear-gradient(90deg,var(--glow-dim),rgba(95,255,206,.12) 60%,rgba(95,255,206,.25));}
.pipe-pulse{position:absolute;top:5px;width:10px;height:10px;border-radius:50%;z-index:2;
background:var(--glow);box-shadow:0 0 14px var(--glow);animation:pipe-run 7s linear infinite;}
@keyframes pipe-run{0%{left:10%;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:calc(90% - 10px);opacity:0}}
.stage{text-align:center;padding:0 8px;position:relative;}
.stage .node{width:20px;height:20px;margin:0 auto;border-radius:50%;border:2px solid var(--glow-dim);
background:#0a1013;position:relative;z-index:1;box-shadow:0 0 10px rgba(95,255,206,.15);}
.stage .num{font-family:var(--display);font-weight:800;font-size:15px;color:var(--glow-bright);margin-top:10px;text-shadow:0 0 10px rgba(95,255,206,.35);}
.stage .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#dff3ec;margin-top:3px;}
.stage .desc{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:var(--muted);margin-top:5px;line-height:1.5;}
/* ---------- project files ---------- */
.files{margin-top:22px;}
.file-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px;}
.file{position:relative;border:1px solid #2b3338;border-radius:7px;overflow:hidden;
background:linear-gradient(150deg,var(--steel-1),var(--steel-2));
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 22px rgba(0,0,0,.45);transition:.2s;}
.file:hover{border-color:var(--glow-dim);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 30px rgba(0,0,0,.6),0 0 0 1px rgba(95,255,206,.12);}
.file .tagtype{position:absolute;top:9px;right:9px;z-index:2;font-family:var(--mono);font-size:8px;letter-spacing:.14em;
padding:2px 7px;border:1px solid rgba(95,255,206,.35);border-radius:3px;color:var(--glow);background:rgba(5,8,10,.75);}
.file .ph{position:relative;aspect-ratio:16/10;background:#05080a;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.file .ph img{width:100%;height:100%;object-fit:cover;} /* drop photos in assets/projects/ */
.file .ph::after{content:'';position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(180deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);}
.pending{text-align:center;font-family:var(--mono);font-size:8.5px;letter-spacing:.26em;text-indent:.26em;color:#54706a;text-transform:uppercase;}
.pending .big{display:block;font-family:var(--display);font-size:13px;letter-spacing:.32em;text-indent:.32em;color:#7fa99a;margin-bottom:7px;}
/* ============================================================
CREDENTIALS — stamped industrial certification plate
(same machined-metal language as the masthead rating plate)
============================================================ */
.creds{margin-top:22px;}
.certplate{position:relative;margin-top:14px;padding:26px 32px 0;border:1px solid #4a5359;border-radius:9px;overflow:hidden;
background-image:var(--noise-fine),linear-gradient(158deg,var(--steel-0),var(--steel-1) 44%,var(--steel-2) 100%);
background-size:240px,auto;background-blend-mode:overlay,normal;
box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 44px rgba(0,0,0,.55),0 16px 40px rgba(0,0,0,.6);}
.certplate::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
background:radial-gradient(120% 80% at 18% -12%,rgba(255,255,255,.13),transparent 44%),
repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 5px);}
.certplate>.screw{position:absolute;z-index:4;width:12px;height:12px;}
.certplate>.screw.tl{top:11px;left:11px;}.certplate>.screw.tr{top:11px;right:11px;}
.certplate>.screw.bl{bottom:15px;left:11px;}.certplate>.screw.br{bottom:15px;right:11px;}
/* header: engraved nameplate + rubber inspection stamp */
.cp-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:24px;}
.cp-kick{font-family:var(--mono);font-size:9px;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--glow-dim);}
.cp-name{font-family:var(--display);font-weight:800;font-size:clamp(19px,2.5vw,27px);letter-spacing:.05em;color:#eafff6;
margin-top:9px;text-shadow:0 0 22px rgba(95,255,206,.28),0 1px 0 #000;}
.cp-name span{font-weight:600;font-size:.5em;letter-spacing:.24em;color:#c1ccc6;margin-left:.5em;vertical-align:.18em;}
.cp-sub{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:#96a09b;margin-top:9px;}
.cp-stamp{flex:none;width:96px;height:96px;border-radius:50%;transform:rotate(-9deg);
display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--glow);
border:2px solid rgba(95,255,206,.55);box-shadow:0 0 0 4px rgba(95,255,206,.05),inset 0 0 0 1px rgba(95,255,206,.18);
background:radial-gradient(circle,rgba(95,255,206,.06),transparent 72%);
text-shadow:0 0 8px rgba(95,255,206,.4);}
.cp-stamp svg{width:19px;height:19px;stroke:var(--glow);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 0 6px rgba(95,255,206,.5));}
.cp-stamp .s1{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.14em;margin-top:4px;}
.cp-stamp .s2{font-family:var(--mono);font-size:7.5px;letter-spacing:.26em;color:var(--glow-dim);margin-top:2px;}
/* engraved divider groove */
.cp-groove{position:relative;z-index:1;height:2px;margin:22px 0 4px;
background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(255,255,255,.07));}
/* etched spec rows, 2 columns */
.cp-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:0 34px;}
.cp-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 2px;
border-bottom:1px solid rgba(0,0,0,.4);box-shadow:0 1px 0 rgba(255,255,255,.05);}
.cp-row .k{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#8b948f;white-space:nowrap;}
.cp-row .v{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:#e4efe9;text-align:right;
text-shadow:0 0 10px rgba(95,255,206,.16);}
.cp-foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
padding:16px 2px 22px;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#6c7378;}
.cp-foot .b{color:var(--glow);}
/* worn hazard stripe on the bottom edge — echoes the masthead plate */
.cp-hazard{position:absolute;left:0;right:0;bottom:0;height:6px;pointer-events:none;opacity:.4;
background:repeating-linear-gradient(45deg,var(--amber) 0 12px,#0b0b0b 12px 24px);
-webkit-mask:var(--noise-coarse);-webkit-mask-size:300px;mask:var(--noise-coarse);mask-size:300px;}
.file .plate{padding:11px 13px;border-top:1px solid #2b3338;}
.file .plate .id{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--glow-dim);}
.file .plate h4{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#eef5f2;margin-top:4px;}
.file .plate .st{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:var(--muted);margin-top:5px;text-transform:uppercase;}
.archive-link{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--glow-dim);text-transform:uppercase;}
.archive-link:hover{color:var(--glow-bright);text-shadow:0 0 10px rgba(95,255,206,.4);}
/* ---------- client intake — // PROJECT_INTAKE window ---------- */
.intake-wrap{margin-top:30px;}
.intake-intro{text-align:center;font-family:var(--mono);font-size:12.5px;line-height:2;letter-spacing:.05em;color:#b9c4bf;margin-bottom:24px;}
/* steel console frame — same machined language as the portal uplink window */
.intake{position:relative;border:1px solid #3d454a;
background-image:var(--noise-fine),linear-gradient(160deg,#20272c,#141a1e 45%,#0c1114);
background-size:240px,auto;background-blend-mode:overlay,normal;
box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 40px rgba(0,0,0,.55),0 16px 36px rgba(0,0,0,.6);}
.intake>.screw{position:absolute;z-index:5;}
.intake>.screw.tl{top:8px;left:8px;}
.intake>.screw.tr{top:8px;right:8px;}
.intake>.screw.bl{bottom:8px;left:8px;}
.intake>.screw.br{bottom:8px;right:8px;}
.intake .bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 22px;
border-bottom:1px solid #2b3338;background:rgba(5,8,10,.45);font-family:var(--mono);}
.intake .bar .t{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.24em;
color:#dff3ec;text-transform:uppercase;text-shadow:0 0 12px rgba(95,255,206,.25),0 1px 0 #000;}
.intake .bar .winctl{font-size:11px;letter-spacing:.35em;color:#5c6a65;}
.intake form{padding:24px 26px 28px;display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;}
.f-line{display:flex;flex-direction:column;gap:9px;}
.f-full{grid-column:1/-1;}
.f-line label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.22em;color:#dfe8e4;text-transform:uppercase;}
.f-line label .req{color:var(--glow);margin-left:2px;}
.intake input,.intake textarea{font-family:var(--mono);font-size:13px;color:#dffbf0;
background:#070d0c;border:1px solid #253430;padding:13px 14px;outline:none;caret-color:var(--glow);}
.intake ::placeholder{color:#55625d;}
.intake input:focus,.intake textarea:focus{border-color:var(--glow-dim);box-shadow:0 0 0 1px rgba(95,255,206,.15),0 0 16px rgba(95,255,206,.06);}
.intake textarea{min-height:110px;resize:vertical;line-height:1.6;}
/* segmented project-type buttons */
.seg{display:flex;flex-wrap:wrap;gap:12px;}
.seg-btn{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:#cdd6d2;
background:#0a100f;border:1px solid #2b3a36;padding:12px 24px;cursor:pointer;transition:.15s;}
.seg-btn:hover{border-color:var(--glow-dim);color:#fff;}
.seg-btn.sel{border-color:var(--glow);background:var(--glow);color:#04110c;font-weight:700;box-shadow:0 0 18px rgba(95,255,206,.3);}
/* file drop zone */
.drop{border:1px dashed #3a4a45;padding:28px 16px;text-align:center;cursor:pointer;transition:.15s;}
.drop:hover,.drop.over{border-color:var(--glow-dim);background:rgba(95,255,206,.03);}
.drop-arrow{color:var(--glow);font-size:17px;text-shadow:0 0 10px rgba(95,255,206,.5);}
.drop-main{font-family:var(--mono);font-weight:700;font-size:13.5px;color:#eef5f2;margin-top:7px;}
.drop-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:#5c6a65;margin-top:9px;}
.drop-list{margin-top:12px;font-family:var(--mono);font-size:10.5px;color:var(--glow-bright);text-align:left;display:inline-block;}
.drop-list .bad{color:#ff5f6e;}
/* submit */
.submit-btn{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;
color:#04110c;background:var(--glow);border:0;padding:18px;cursor:pointer;transition:.15s;}
.submit-btn:hover{background:var(--glow-bright);box-shadow:0 0 32px rgba(95,255,206,.45);}
.submit-btn:disabled{opacity:.6;cursor:wait;}
#tx-log{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--glow-bright);margin:0;min-height:0;white-space:pre-wrap;}
#tx-log:empty{display:none;}
.f-note{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#4b5459;text-align:center;}
/* ---------- trust strip ---------- */
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.badge{flex:1 1 auto;text-align:center;border:1px solid var(--line);border-radius:5px;padding:12px 10px;background:rgba(10,16,19,.6);}
.badge .n{font-family:var(--display);font-weight:800;font-size:20px;color:var(--glow-bright);text-shadow:0 0 14px rgba(95,255,206,.35);}
.badge .l{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:5px;}
/* ---------- footer ---------- */
.foot{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.foot a:hover{color:var(--glow-bright);}
.foot .contact b{color:#dff3ec;font-weight:600;}
.foot .tag{color:var(--glow-dim);letter-spacing:.24em;}
.disclaimer{text-align:center;margin-top:18px;font-size:9px;letter-spacing:.14em;color:#4b5459;text-transform:uppercase;}
/* ---------- boot overlay ---------- */
#boot{position:fixed;inset:0;z-index:50;background:#05080a;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;transition:opacity .6s;}
#boot .bt{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--glow);white-space:pre;text-align:left;}
#boot .bar{width:min(360px,70vw);height:2px;background:rgba(95,255,206,.15);overflow:hidden;}
#boot .bar i{display:block;height:100%;width:0;background:var(--glow);box-shadow:0 0 10px var(--glow);animation:load 1.7s ease-out forwards;}
@keyframes load{to{width:100%}}
#boot.done{opacity:0;pointer-events:none;}
/* internal navigation (already booted this session) — hide before paint, no flash */
html.booted #boot{display:none;}
/* ---------- intake page header ---------- */
.page-head{text-align:center;margin:26px 0 6px;}
.page-head .kick{font-family:var(--mono);font-size:10px;letter-spacing:.4em;text-indent:.4em;color:var(--glow);text-transform:uppercase;}
.page-head h1{font-family:var(--display);font-weight:800;font-size:clamp(26px,5vw,44px);letter-spacing:.1em;color:#eafff6;
text-shadow:0 0 22px rgba(95,255,206,.4);margin-top:10px;text-transform:uppercase;}
.page-head .lead{max-width:640px;margin:14px auto 0;font-family:var(--mono);font-size:12.5px;line-height:2;letter-spacing:.05em;color:#b9c4bf;}
.intake-page{max-width:860px;margin:0 auto;}
@media(max-width:820px){
.main{grid-template-columns:1fr;}
/* mobile: lead with WHAT WE DO (service panels), then the CTAs, and
drop the SITECAM "stand by" monitor to the bottom of the column */
.panels{order:-1;}
.rail .monitor{order:2;}
.rail .mon-cap{order:3;}
.panel{grid-template-columns:1fr;}
.click{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;gap:10px;
border-left:0;border-top:1px solid #2b3338;padding:10px 16px;}
.click .go{font-size:13px;white-space:nowrap;}
.click .l{text-align:right;}
.hud .stat{display:none;}
.hud-co{display:none;} /* brand shortens to "● SOLIDUS" so it never wraps */
.file-grid{grid-template-columns:1fr;}
.intake form{grid-template-columns:1fr;}
/* pipeline goes vertical */
.pipe-rail{grid-template-columns:1fr;gap:18px;}
.pipe-rail::before{left:9px;right:auto;top:10px;bottom:10px;width:2px;height:auto;
background:linear-gradient(180deg,var(--glow-dim),rgba(95,255,206,.12) 60%,rgba(95,255,206,.25));}
.pipe-pulse{animation:pipe-run-v 7s linear infinite;left:5px;}
.stage{display:grid;grid-template-columns:20px auto 1fr;gap:4px 12px;text-align:left;align-items:center;padding:0;}
.stage .node{margin:0;}
.stage .num{margin-top:0;}
.stage .lbl{margin-top:0;}
.stage .desc{grid-column:3;grid-row:1;margin-top:0;text-align:right;}
}
@keyframes pipe-run-v{0%{top:2%;opacity:0}6%{opacity:1}94%{opacity:1}100%{top:96%;opacity:0}}
/* ============================================================
SCULPTED CHROME — pushed pass (grunge, machining, cabling)
All procedural: SVG turbulence noise inlined as data URIs,
no image files. This is the "how far can CSS go" layer.
============================================================ */
:root{
--noise-fine:url("data:image/svg+xml;utf8,");
--noise-coarse:url("data:image/svg+xml;utf8,");
}
/* Phones upscale the SVG feTurbulence noise ~3x and the overlay blend washes the
steel to harsh light-gray grain (bad on iOS Safari). Drop the noise on mobile —
every textured surface references these vars, so this cleans them all at once,
leaving the crisp steel gradients. Desktop keeps the machined texture. */
@media(max-width:820px){
:root{--noise-fine:none;--noise-coarse:none;}
}
/* page-edge grime — dark mottling closing in around the content */
.backdrop::after{content:'';position:absolute;inset:0;pointer-events:none;
background-image:var(--noise-coarse);background-size:900px;
mix-blend-mode:multiply;opacity:.5;
-webkit-mask:radial-gradient(ellipse at 50% 45%,transparent 42%,#000 96%);
mask:radial-gradient(ellipse at 50% 45%,transparent 42%,#000 96%);}
/* full-page film grain, whisper quiet */
body::after{content:'';position:fixed;inset:0;z-index:3;pointer-events:none;
background-image:var(--noise-fine);background-size:240px;
mix-blend-mode:overlay;opacity:.05;}
/* ---------- masthead: machined chamfered plate ---------- */
.plate-wrap{margin:16px 0;filter:drop-shadow(0 18px 40px rgba(0,0,0,.65));}
.plate-wrap .plate{margin:0;border-radius:0;border:1px solid #4a5359;
clip-path:polygon(26px 0,calc(100% - 26px) 0,100% 26px,100% calc(100% - 26px),
calc(100% - 26px) 100%,26px 100%,0 calc(100% - 26px),0 26px);
background-image:var(--noise-fine),linear-gradient(158deg,var(--steel-0),var(--steel-1) 42%,var(--steel-2) 100%);
background-size:240px,auto;background-blend-mode:overlay,normal;}
/* rust + oil staining */
.plate .rust{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.75;
background:
radial-gradient(190px 90px at 11% 90%,rgba(96,60,28,.55),transparent 70%),
radial-gradient(230px 110px at 90% 8%,rgba(84,54,26,.4),transparent 70%),
radial-gradient(150px 80px at 68% 96%,rgba(40,44,46,.6),transparent 70%),
radial-gradient(110px 60px at 34% 4%,rgba(50,54,56,.5),transparent 70%);}
/* side vent slats */
.plate .vents{position:absolute;top:24%;bottom:24%;width:30px;pointer-events:none;
background:repeating-linear-gradient(180deg,rgba(0,0,0,.68) 0 6px,rgba(255,255,255,.05) 6px 8px,transparent 8px 15px);
border:1px solid rgba(0,0,0,.55);box-shadow:inset 0 0 9px rgba(0,0,0,.85);}
.plate .vents.l{left:22px;}.plate .vents.r{right:22px;}
/* worn hazard stripe along the bottom edge */
.plate .hazard{position:absolute;left:26px;right:26px;bottom:0;height:7px;pointer-events:none;opacity:.45;
background:repeating-linear-gradient(45deg,var(--amber) 0 14px,#0b0b0b 14px 28px);
-webkit-mask:var(--noise-coarse);-webkit-mask-size:300px;
mask:var(--noise-coarse);mask-size:300px;}
/* stenciled unit markings */
.stencil{position:absolute;font-family:var(--mono);font-size:8px;font-weight:700;
letter-spacing:.3em;color:rgba(255,255,255,.25);text-transform:uppercase;pointer-events:none;}
.stencil.tl{top:15px;left:44px;}
.stencil.br{bottom:17px;right:44px;text-align:right;}
/* phillips-head screws (mid-edges) */
.screw{position:absolute;width:13px;height:13px;border-radius:50%;
background:radial-gradient(circle at 35% 30%,#8b959c,#394247 55%,#161b1e);
box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.8);}
.screw::before,.screw::after{content:'';position:absolute;left:50%;top:50%;background:rgba(8,10,11,.9);}
.screw::before{width:9px;height:1.6px;transform:translate(-50%,-50%) rotate(var(--rot,20deg));}
.screw::after{width:1.6px;height:9px;transform:translate(-50%,-50%) rotate(var(--rot,20deg));}
.screw.ml{left:0;top:50%;margin-top:-7px;}
.screw.mr{right:0;top:50%;margin-top:-7px;}
/* corner rivets shift inward to sit on the chamfer flats */
.plate-wrap .rivet.tl,.plate-wrap .rivet.bl{left:24px;}
.plate-wrap .rivet.tr,.plate-wrap .rivet.br{right:24px;}
/* ---------- cable harness hanging off the masthead ---------- */
.cables{display:block;width:min(92%,1000px);height:42px;margin:-8px auto 0;
opacity:.8;filter:drop-shadow(0 3px 3px rgba(0,0,0,.6));}
.cables .data{animation:dataflow 2.6s linear infinite;}
@keyframes dataflow{to{stroke-dashoffset:-64;}}
/* ---------- texture the steel components ---------- */
.panel,.file{
background-image:var(--noise-fine),linear-gradient(150deg,var(--steel-1),var(--steel-2));
background-size:240px,auto;background-blend-mode:overlay,normal;}
/* ============================================================
SITECAM PVM — sculpted broadcast CRT monitor
============================================================ */
.monitor{position:relative;border-radius:10px;padding:16px 16px 0;
border:1px solid #3d454a;border-bottom-color:#22282c;
background-image:var(--noise-fine),linear-gradient(165deg,#31383d,#1b2023 45%,#101416);
background-size:240px,auto;background-blend-mode:overlay,normal;
box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -8px 16px rgba(0,0,0,.5),0 16px 34px rgba(0,0,0,.65);}
/* top carry-groove */
.monitor::before{content:'';position:absolute;top:6px;left:24%;right:24%;height:4px;border-radius:2px;
background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(255,255,255,.05));}
/* corner screws on the case */
.monitor>.screw{position:absolute;width:11px;height:11px;}
.monitor>.screw.tl{top:8px;left:8px;}
.monitor>.screw.tr{top:8px;right:8px;}
.monitor>.screw.bl{bottom:8px;left:8px;}
.monitor>.screw.br{bottom:8px;right:8px;}
/* recessed bezel around the tube */
.mon-bezel{position:relative;border-radius:9px;padding:13px;margin-top:6px;
background:linear-gradient(180deg,#0b0e10,#171c1f 80%,#1d2326);
box-shadow:inset 0 3px 8px rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,255,255,.06);}
/* the tube: 4:3, curved-corner glass */
.monitor .hero-media{aspect-ratio:4/3;}
.monitor .crt{border-radius:14px;}
/* convex glass reflection */
.glass{position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
background:
radial-gradient(120% 85% at 28% 10%,rgba(255,255,255,.14),transparent 42%),
radial-gradient(150% 120% at 50% 118%,rgba(255,255,255,.05),transparent 55%);}
/* control panel strip */
.mon-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 4px 13px;}
.mon-brand{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.26em;color:#c7ced2;text-shadow:0 1px 0 #000;}
.mon-model{font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;color:#6a7378;text-transform:uppercase;margin-top:3px;}
.knobs{display:flex;align-items:center;gap:9px;}
.knob{position:relative;width:12px;height:12px;border-radius:50%;flex:none;
background:radial-gradient(circle at 35% 30%,#5f696e,#23292c 60%,#0d1113);
box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.75);}
.knob::after{content:'';position:absolute;left:50%;top:1.5px;width:1.5px;height:4px;background:#b8c1c5;
transform:translateX(-50%) rotate(var(--kr,0deg));transform-origin:50% 4.5px;}
.mbtn{width:9px;height:6px;border-radius:1px;background:#22282b;flex:none;
box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 1px 1px #000;}
.mon-power{display:flex;align-items:center;gap:5px;margin-left:3px;}
.mon-power .led{width:6px;height:6px;border-radius:50%;background:var(--glow);
box-shadow:0 0 9px var(--glow);animation:pulse 2.4s ease-in-out infinite;}
/* caption line under the set */
.mon-cap{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:9px;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted);padding:9px 6px 0;}
.mon-cap span:first-child{font-size:8px;letter-spacing:.09em;white-space:nowrap;}
.mon-cap .b{color:var(--glow);white-space:nowrap;}
/* ============================================================
EQUIPMENT RACK — service panels as 19" rack units
============================================================ */
.rack{position:relative;padding:12px 34px;border-radius:8px;
border:1px solid #2b3338;
background-image:var(--noise-fine),linear-gradient(180deg,#161c1f,#0b0f11);
background-size:240px,auto;background-blend-mode:overlay,normal;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 30px rgba(0,0,0,.55),0 12px 28px rgba(0,0,0,.5);}
/* vertical mounting rails with bolt holes every 30px */
.rack::before,.rack::after{content:'';position:absolute;top:8px;bottom:8px;width:20px;
border:1px solid #06090b;border-radius:2px;
background:
radial-gradient(circle,#04060a 2.6px,#4a545a 3.2px,rgba(0,0,0,.35) 4px,transparent 4.6px) 50% 8px/100% 30px repeat-y,
linear-gradient(90deg,#272e33,#161b1e 60%,#1d2327);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.rack::before{left:6px;}
.rack::after{right:6px;}
/* rack nameplate header above the service units */
.rack-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
padding:3px 2px 11px;border-bottom:1px solid #2b3338;font-family:var(--mono);}
.rack-head .t{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.24em;
color:#dff3ec;text-transform:uppercase;white-space:nowrap;text-shadow:0 0 12px rgba(95,255,206,.25),0 1px 0 #000;}
.rack-head .r{font-size:9px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;}
/* open-ended footer row — the rack is a sampler, not the full catalog */
.rack-more{display:block;text-align:center;padding:10px 12px;border:1px dashed #33403c;
font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:#8b948f;transition:.16s;}
.rack-more .b{color:var(--glow-dim);font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.rack-more:hover{border-color:var(--glow-dim);color:#cdd6d2;background:rgba(95,255,206,.03);}
.rack-more:hover .b{color:var(--glow-bright);text-shadow:0 0 10px rgba(95,255,206,.4);}
@media(max-width:820px){
.plate .vents,.stencil,.cables{display:none;}
}
/* ============================================================
SITELOG CLIENT PORTAL — refined-dark "modern SaaS" skin.
Deliberately NOT the HUD: system-sans, charcoal, soft radii,
sage accent (#86b89a) only. Lives INSIDE the Solidus mint
chrome — the contrast (serious builder + calm tech) is the point.
Everything is scoped under .sitelog so it never touches the HUD.
============================================================ */
.sitelog{
--sl-bg:#101316; --sl-surface:#171b1f; --sl-surface2:#1e242a; --sl-raise:#232a30;
--sl-line:rgba(255,255,255,.08); --sl-line-2:rgba(255,255,255,.14);
--sl-accent:#86b89a; --sl-accent-bright:#a8d6bd; --sl-accent-dim:#4c6a5b;
--sl-text:#e9edeb; --sl-muted:#909995; --sl-faint:#616a66;
--sl-warn:#d9a25a;
font-family:var(--sans);color:var(--sl-text);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.sitelog *{font-family:inherit;letter-spacing:normal;}
/* ---------- home-page teaser: riveted HUD uplink window ----------
The AD chrome is full Solidus Y2K metal (Orbitron, mono, steel,
screws, stencils, mint). Only the phone SCREEN keeps the SITELOG
refined-dark skin — that contrast is the whole effect. */
.portal-teaser{margin-top:22px;}
.pt-frame{position:relative;margin-top:14px;border:1px solid #3d454a;
background-image:var(--noise-fine),linear-gradient(160deg,#20272c,#141a1e 45%,#0c1114);
background-size:240px,auto;background-blend-mode:overlay,normal;
box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 40px rgba(0,0,0,.55),0 16px 36px rgba(0,0,0,.6);}
.pt-frame>.screw{position:absolute;z-index:5;}
.pt-frame>.screw.tl{top:7px;left:7px;}
.pt-frame>.screw.tr{top:7px;right:7px;}
.pt-frame>.screw.bl{bottom:7px;left:7px;}
.pt-frame>.screw.br{bottom:7px;right:7px;}
/* terminal cap bar — same language as // PROJECT_INTAKE */
.pt-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 28px;
border-bottom:1px solid #2b3338;background:rgba(5,8,10,.45);font-family:var(--mono);}
.pt-bar .t{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.24em;
color:#dff3ec;text-transform:uppercase;white-space:nowrap;text-shadow:0 0 12px rgba(95,255,206,.25),0 1px 0 #000;}
.pt-bar .ch{font-size:9px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;}
.pt-bar .live{color:var(--glow);animation:pulse 2.4s ease-in-out infinite;}
.pt-grid{display:grid;grid-template-columns:1fr 300px;gap:34px;align-items:center;padding:30px 34px 34px;}
.pt-pitch .pt-kick{display:inline-flex;align-items:center;gap:9px;
font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--glow);}
.pt-pitch .pt-kick .d{width:6px;height:6px;border-radius:50%;background:var(--glow);box-shadow:0 0 8px var(--glow);}
.pt-pitch h2{font-family:var(--display);font-weight:800;font-size:clamp(19px,2.6vw,28px);line-height:1.3;
letter-spacing:.05em;text-transform:uppercase;color:#eafff6;margin-top:14px;
text-shadow:0 0 20px rgba(95,255,206,.22);}
.pt-pitch h2 .hl{color:var(--glow);text-shadow:0 0 24px rgba(95,255,206,.55),0 0 4px rgba(95,255,206,.4);}
.pt-pitch .pt-sub{font-family:var(--mono);font-size:12px;line-height:1.9;letter-spacing:.04em;
color:#b9c4bf;margin-top:14px;max-width:56ch;}
/* proof strip — bolted equipment tags, stroke emblems (no emoji, ever) */
.pt-proof{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;padding:0;}
.pt-proof li{display:flex;align-items:center;gap:11px;list-style:none;padding:9px 12px;
border:1px solid var(--line);background:rgba(5,8,10,.55);
font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#cdd6d2;
transition:.16s;}
.pt-proof li:hover{border-color:var(--glow-dim);color:#eafff6;background:rgba(95,255,206,.04);}
.pt-proof .ic{width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;
border:1px solid rgba(95,255,206,.28);background:rgba(95,255,206,.05);}
.pt-proof .ic svg{width:15px;height:15px;stroke:var(--glow);fill:none;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(95,255,206,.45));}
.pt-actions{margin-top:22px;}
.pt-cta{max-width:360px;}
.pt-device{display:flex;flex-direction:column;align-items:center;}
.pt-frame .stencil.pt-st{bottom:13px;left:44px;}
/* ---------- the phone (shared by teaser + portal page) ---------- */
.sl-phone{position:relative;width:296px;flex:none;border-radius:38px;padding:11px;
background:linear-gradient(160deg,#2a3138,#12161a);
box-shadow:0 2px 2px rgba(255,255,255,.06) inset,0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.5);}
.sl-screen{position:relative;border-radius:28px;overflow:hidden;background:var(--sl-bg);
aspect-ratio:9/19;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);}
.sl-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:96px;height:20px;border-radius:12px;
background:#05070a;z-index:20;}
.sl-app{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;text-align:left;}
/* status bar */
.sl-status{display:flex;justify-content:space-between;align-items:center;padding:13px 20px 6px;
font-size:11px;font-weight:600;color:#cfd8d3;}
.sl-status .r{display:flex;gap:5px;align-items:center;opacity:.8;}
/* app top bar */
.sl-top{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 12px;border-bottom:1px solid var(--sl-line);}
.sl-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;letter-spacing:.02em;color:#f2f6f4;}
.sl-brand .mark{width:16px;height:16px;border-radius:5px;background:linear-gradient(145deg,#a8d6bd,#5f8f78);
box-shadow:0 0 12px rgba(134,184,154,.5);}
.sl-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(150deg,#3a4750,#222a30);
border:1px solid var(--sl-line-2);}
/* scroll body */
.sl-body{flex:1;overflow:hidden;padding:14px 16px 18px;display:flex;flex-direction:column;gap:13px;}
.sl-proj{font-size:11px;color:var(--sl-muted);}
.sl-proj b{display:block;font-size:16px;font-weight:700;color:#f2f6f4;margin-top:2px;letter-spacing:-.01em;}
.sl-card{background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:15px;padding:14px;}
.sl-card .h{display:flex;justify-content:space-between;align-items:baseline;}
.sl-card .h .t{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--sl-muted);text-transform:uppercase;}
.sl-card .h .v{font-size:12px;font-weight:600;color:var(--sl-accent-bright);}
/* progress */
.sl-prog .big{font-size:26px;font-weight:700;color:#f2f6f4;margin-top:6px;letter-spacing:-.02em;}
.sl-prog .big span{font-size:14px;font-weight:600;color:var(--sl-muted);}
.sl-bar{height:8px;border-radius:6px;background:var(--sl-surface2);overflow:hidden;margin-top:11px;}
.sl-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#5f8f78,#a8d6bd);}
.sl-phase{display:flex;justify-content:space-between;margin-top:9px;font-size:10.5px;color:var(--sl-faint);}
/* photos */
.sl-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px;}
.sl-ph{aspect-ratio:1;border-radius:9px;position:relative;overflow:hidden;
background:linear-gradient(135deg,#33413a,#1b2420);}
.sl-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;}
.sl-ph::after{content:'';position:absolute;inset:0;z-index:1;
background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.08),transparent 60%);}
.sl-ph.a{background:linear-gradient(135deg,#3e3a2c,#232013);}
.sl-ph.b{background:linear-gradient(135deg,#2c3742,#161d24);}
.sl-ph.c{background:linear-gradient(135deg,#3a2f34,#20181c);}
/* costs — open book */
.sl-costs .row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px;}
.sl-costs .row .k{color:var(--sl-muted);}
.sl-costs .row .val{font-weight:600;color:#eef3f0;font-variant-numeric:tabular-nums;}
.sl-costs .row .val.ok{color:var(--sl-accent-bright);}
.sl-costs .split{height:1px;background:var(--sl-line);margin:12px 0 2px;}
/* message */
.sl-msg{display:flex;gap:10px;align-items:flex-start;}
.sl-msg .mav{width:30px;height:30px;flex:none;border-radius:50%;background:linear-gradient(145deg,#5f8f78,#3a5749);
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#0b1510;}
.sl-msg .mtxt{font-size:12.5px;line-height:1.5;color:#d7dfdb;}
.sl-msg .mtxt .who{font-weight:600;color:#f2f6f4;}
.sl-msg .mtxt .when{color:var(--sl-faint);font-size:10.5px;margin-top:3px;}
/* bottom tab bar */
.sl-tabs{display:flex;justify-content:space-around;padding:11px 8px 14px;border-top:1px solid var(--sl-line);background:var(--sl-bg);}
.sl-tabs .tb{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:9px;color:var(--sl-faint);}
.sl-tabs .tb .g{width:20px;height:20px;border-radius:6px;background:var(--sl-surface2);}
.sl-tabs .tb.on{color:var(--sl-accent-bright);}
.sl-tabs .tb.on .g{background:linear-gradient(145deg,#a8d6bd,#5f8f78);}
/* ---------- interactive demo (portal hero phone) ---------- */
.sl-demo-body{overflow-y:auto;gap:0 !important;scrollbar-width:none;}
.sl-demo-body::-webkit-scrollbar{display:none;}
.sl-scr{display:none;}
.sl-scr.on{display:flex;flex-direction:column;gap:13px;}
.sl-card[data-jump],.sl-minicard[data-jump]{cursor:pointer;}
/* home mini stat tiles */
.sl-mini{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.sl-minicard{background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:14px;padding:11px 12px;transition:.15s;}
.sl-minicard:hover{border-color:var(--sl-accent-dim);background:var(--sl-surface2);}
.sl-minicard .k{font-size:10px;color:var(--sl-muted);}
.sl-minicard .v{font-size:18px;font-weight:700;color:#f2f6f4;margin-top:3px;letter-spacing:-.01em;}
.sl-minicard .v.ok{color:var(--sl-accent-bright);}
.sl-minicard .s{font-size:9px;color:var(--sl-faint);margin-top:2px;}
/* daily log entries (updates screen) */
.sl-log{background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:14px;padding:12px 13px;}
.sl-log .lg-date{font-size:11.5px;font-weight:600;color:#eef3f0;}
.sl-log .lg-meta{display:flex;gap:14px;font-size:10px;color:var(--sl-muted);margin-top:4px;}
.sl-log .lg-txt{font-size:12px;line-height:1.5;color:#c8d1cc;margin-top:8px;}
/* interactive tabs: 5 across, Docs/Messages inert */
.sl-demo-tabs .tb{font-size:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.sl-demo-tabs .tb .g{width:18px;height:18px;}
.sl-demo-tabs .tb.off{opacity:.38;cursor:default;}
/* "interactive demo" hint under the phone */
.sl-demo-hint{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);text-align:center;}
.sl-demo-hint b{color:var(--glow);font-weight:700;}
/* ============================================================
PORTAL.HTML — dedicated page. CHROME = Solidus HUD (steel,
Orbitron, mono, mint). Only .pt-device (phone) and .sl-shot
.win (live screens) carry .sitelog and stay refined-dark —
that serious-frame / tech-forward-product contrast is the point.
============================================================ */
.sl-page{margin:0 auto;}
.portal-hero{margin-top:24px;}
.sl-sec{margin-top:30px;}
.sl-h2{font-family:var(--display);font-weight:800;font-size:clamp(19px,2.8vw,28px);letter-spacing:.05em;
text-transform:uppercase;color:#eafff6;margin-top:16px;text-shadow:0 0 20px rgba(95,255,206,.2);}
.sl-lead{font-family:var(--mono);font-size:12px;line-height:1.9;letter-spacing:.03em;color:#b9c4bf;margin-top:12px;max-width:74ch;}
/* feature grid — steel equipment cards, mint stroke emblems */
.sl-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;}
.sl-feat .f{position:relative;border:1px solid #2b3338;border-radius:7px;padding:22px 20px;transition:.2s;
background-image:var(--noise-fine),linear-gradient(150deg,var(--steel-1),var(--steel-2));
background-size:240px,auto;background-blend-mode:overlay,normal;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 22px rgba(0,0,0,.45);}
.sl-feat .f:hover{border-color:var(--glow-dim);transform:translateY(-3px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 30px rgba(0,0,0,.6),0 0 0 1px rgba(95,255,206,.12);}
.sl-feat .f .ic{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
border:1px solid rgba(95,255,206,.28);background:rgba(95,255,206,.05);}
.sl-feat .f .ic svg{width:22px;height:22px;stroke:var(--glow);fill:none;stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(95,255,206,.4));}
.sl-feat .f h3{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#eef5f2;margin-top:16px;}
.sl-feat .f p{font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.02em;color:#9aa4a0;margin-top:9px;}
/* "also included" footnote line under the feature grid */
.sl-also{font-family:var(--mono);font-size:11px;line-height:1.85;letter-spacing:.03em;color:#8b948f;
margin-top:16px;padding:14px 18px;text-align:center;border:1px solid var(--line);border-radius:6px;
background:rgba(10,16,19,.5);}
.sl-also .k{color:var(--glow);font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-right:8px;}
/* a look inside — steel card with a refined-dark screen embedded (like a monitor) */
.sl-screens{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;}
.sl-shot{position:relative;border:1px solid #2b3338;border-radius:7px;padding:15px 15px 17px;
background-image:var(--noise-fine),linear-gradient(150deg,var(--steel-1),var(--steel-2));
background-size:240px,auto;background-blend-mode:overlay,normal;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 22px rgba(0,0,0,.45);}
.sl-shot .win{border-radius:10px;overflow:hidden;background:var(--sl-bg);border:1px solid var(--sl-line);
padding:14px;min-height:186px;display:flex;flex-direction:column;gap:11px;box-shadow:inset 0 2px 10px rgba(0,0,0,.6);}
/* built billing screen ("where's my money going?") — mirrors the real SITELOG view */
.sl-shot .win.moneyshot{display:block;justify-content:flex-start;padding:14px 13px;}
.sl-bill{--g:#83c9a1;font-family:var(--sans);color:var(--sl-text);}
.bl-bal .bl-lbl{font-size:11px;color:var(--sl-muted);}
.bl-bal .bl-big{font-size:29px;line-height:1.05;font-weight:700;color:var(--g);letter-spacing:-.01em;margin-top:3px;font-variant-numeric:tabular-nums;}
.bl-bal .bl-sub{font-size:11px;color:var(--sl-muted);margin-top:5px;}
.bl-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px;}
.bl-stat{background:var(--sl-surface2);border:1px solid var(--sl-line);border-radius:10px;padding:9px 11px 10px;}
.bl-stat .k{font-size:9.5px;color:var(--sl-muted);}
.bl-stat .v{font-size:16px;font-weight:700;color:#eef3f0;margin-top:3px;font-variant-numeric:tabular-nums;}
.bl-stat .v.ok{color:var(--g);}
.bl-stat .s{font-size:9px;color:var(--sl-faint);margin-top:2px;}
.bl-sched{margin-top:14px;}
.bl-row{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--sl-muted);}
.bl-row span:last-child{color:#cdd6d2;font-variant-numeric:tabular-nums;}
.bl-bar{height:5px;border-radius:4px;background:var(--sl-surface2);overflow:hidden;margin-top:8px;}
.bl-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#5f8f78,var(--g));}
.bl-split{height:1px;background:var(--sl-line);margin:14px 0;}
.bl-seg{display:flex;height:8px;border-radius:5px;overflow:hidden;background:#3a434d;margin-top:9px;}
.bl-seg i{height:100%;}
.bl-seg i.paid{background:linear-gradient(90deg,#5f8f78,var(--g));}
.bl-seg i.due{background:var(--sl-warn);}
.bl-leg{display:flex;align-items:center;gap:9px;font-size:11px;color:#9aa4a0;margin-top:10px;}
.bl-leg .dot{width:8px;height:8px;border-radius:50%;flex:none;}
.bl-leg .dot.paid{background:var(--g);}
.bl-leg .dot.due{background:var(--sl-warn);}
.bl-leg .dot.rem{background:#5a6672;}
.bl-leg .amt{margin-left:auto;color:#cdd6d2;font-variant-numeric:tabular-nums;}
.sl-shot .cap-t{font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.03em;color:#eef5f2;margin-top:15px;}
.sl-shot .cap-d{font-family:var(--mono);font-size:10.5px;line-height:1.65;letter-spacing:.02em;color:#8b948f;margin-top:7px;}
/* reassurance strip — HUD readout row */
.sl-strip{display:grid;grid-template-columns:repeat(3,1fr);margin-top:22px;
border:1px solid var(--line);border-radius:6px;overflow:hidden;
background:linear-gradient(180deg,rgba(10,16,19,.85),rgba(5,8,10,.9));}
.sl-strip .s{text-align:center;padding:24px 20px;border-right:1px solid var(--line);}
.sl-strip .s:last-child{border-right:0;}
.sl-strip .s .n{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.14em;text-transform:uppercase;
color:var(--glow-bright);text-shadow:0 0 14px rgba(95,255,206,.3);}
.sl-strip .s .l{font-family:var(--mono);font-size:10px;line-height:1.7;letter-spacing:.04em;color:var(--muted);margin-top:9px;}
/* closing CTA — steel panel */
.sl-cta{margin-top:40px;text-align:center;padding:44px 30px;border-radius:7px;position:relative;overflow:hidden;
border:1px solid var(--line);
background-image:var(--noise-fine),linear-gradient(180deg,rgba(10,16,19,.9),rgba(5,8,10,.95));
background-size:240px,auto;background-blend-mode:overlay,normal;}
.sl-cta h2{font-family:var(--display);font-weight:800;font-size:clamp(21px,3.4vw,32px);letter-spacing:.05em;
text-transform:uppercase;color:#eafff6;text-shadow:0 0 22px rgba(95,255,206,.3);}
.sl-cta p{font-family:var(--mono);font-size:12px;line-height:1.9;letter-spacing:.03em;color:#b9c4bf;margin:16px auto 0;max-width:62ch;}
.sl-cta .cta-row{display:flex;justify-content:center;margin-top:26px;}
.sl-cta .cta-row .pt-cta{margin:0;}
.sl-cta .fine{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#4b5459;margin-top:18px;}
@media(max-width:820px){
.pt-grid{grid-template-columns:1fr;gap:28px;justify-items:center;text-align:center;padding:24px 18px 28px;}
.pt-bar{padding:12px 18px;}
.pt-bar .t{white-space:nowrap;}
.pt-bar .ch{display:none;} /* channel readout hides like .hud .stat */
.rack-head .r{display:none;}
/* certification plate stacks on mobile */
.certplate{padding:22px 20px 0;}
.cp-head{flex-direction:column;text-align:center;gap:16px;}
.cp-stamp{order:-1;width:84px;height:84px;}
.cp-grid{grid-template-columns:1fr;gap:0;}
.cp-foot{justify-content:center;text-align:center;}
.pt-pitch .pt-sub{max-width:100%;}
.pt-proof{grid-template-columns:1fr 1fr;text-align:left;width:100%;max-width:540px;margin-left:auto;margin-right:auto;}
.pt-cta{margin:0 auto;}
.sl-feat,.sl-screens,.sl-strip{grid-template-columns:1fr;}
.sl-strip .s{border-right:0;border-bottom:1px solid var(--line);}
.sl-strip .s:last-child{border-bottom:0;}
.sl-lead{max-width:100%;}
}
/* narrow phones: tighten proof chips so the 2×2 grid holds without ragged wraps
(kept at end of file so it wins the cascade over the base .pt-proof rules) */
@media(max-width:480px){
.pt-proof{gap:8px;}
.pt-proof li{font-size:8.5px;letter-spacing:.09em;gap:8px;padding:8px 9px;}
.pt-proof .ic{width:24px;height:24px;}
.pt-proof .ic svg{width:13px;height:13px;}
}