/* ZAMTEK WELLHEAD design system — shared across all pages. Source: homepage v2. */ /* ========================================================== ZAMTEK — "WELLHEAD" system · Fable v2 Evolution of v1: same six inks, same three voices, same panel/paper rhythm and drain-trace signature — now carrying the mesh + AI-agents thesis, with motion layered on top of fully semantic content (progressive enhancement only). Palette --wellhead #141414 petroleum green-black (dark ground) --gypsum #F3F2F0 desert paper (light ground / dark-mode text) --beacon #F00018 annunciator red (decoration only: borders, dots, svg strokes) --flare #F00018 alarm / drain events only (decoration only) --beacon-text-d #FF4D5E text-safe red on dark ground (5.7:1 vs --wellhead) --beacon-text-p #C80014 text-safe red on paper/white (5.4:1 vs --gypsum) --caspian #5D5C5B deep sea-green (paper-mode headings, tags) --ink #141414 text on paper ========================================================== */ :root{ --wellhead:#141414; --gypsum:#F3F2F0; --beacon:#F00018; --flare:#F00018; --caspian:#5D5C5B; --ink:#141414; --beacon-text-d:#FF4D5E; --beacon-text-p:#C80014; --line-d:rgba(243,242,240,.18); --line-d-strong:rgba(243,242,240,.34); --mut-d:rgba(243,242,240,.62); --line-p:rgba(20,20,20,.28); --line-p-strong:#141414; --mut-p:rgba(20,20,20,.66); --disp:'Barlow Condensed',Impact,sans-serif; --body:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --wrap:1240px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--wellhead);color:var(--gypsum);font-family:var(--body); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px} .mono{font-family:var(--mono)} ::selection{background:var(--beacon);color:var(--ink)} :focus-visible{outline:2px solid var(--beacon);outline-offset:3px;border-radius:0} .skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;margin:0;clip:auto; overflow:visible;background:var(--beacon);color:var(--ink);padding:10px 16px; font-family:var(--mono);font-size:13px;z-index:999} /* ---------- Motion: scroll reveal (JS adds .js to ; no-JS = fully visible) ---------- */ .js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.3,.6,.2,1),transform .6s cubic-bezier(.3,.6,.2,1)} .js .rv.in{opacity:1;transform:none} .js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s} @media (prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* ---------- Buttons: flat, square, printed ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono); font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase; padding:14px 22px;border:1.5px solid transparent;transition:background .15s,color .15s,border-color .15s;cursor:pointer} .btn-beacon{background:var(--beacon-text-p);color:var(--gypsum);border-color:var(--beacon-text-p)} .btn-beacon:hover{background:var(--gypsum);border-color:var(--gypsum);color:var(--ink)} .btn-line{border-color:var(--line-d-strong);color:var(--gypsum)} .btn-line:hover{border-color:var(--beacon);color:var(--beacon-text-d)} .btn-ink{background:var(--ink);color:var(--gypsum);border-color:var(--ink)} .btn-ink:hover{background:var(--caspian);border-color:var(--caspian)} .btn-pline{border-color:var(--line-p-strong);color:var(--ink)} .btn-pline:hover{border-color:var(--flare);color:var(--beacon-text-p)} /* ---------- Nav ---------- */ header.nav{position:sticky;top:0;z-index:60;background:rgba(15,21,18,.92); backdrop-filter:blur(8px);border-bottom:1.5px solid var(--line-d-strong)} .nav-inner{display:flex;align-items:stretch;height:62px} .brand{display:flex;align-items:center;gap:12px;padding-right:26px;border-right:1.5px solid var(--line-d); font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:.08em} .brand .fzc{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.18em; color:var(--mut-d);line-height:1.35;text-transform:uppercase} .brand .dot{width:9px;height:9px;background:var(--beacon)} .nav-links{display:flex;align-items:center;gap:0;margin-left:6px;flex:1} .nav-links a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase; color:var(--mut-d);padding:8px 12px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s} .nav-links a:hover{color:var(--gypsum);border-bottom-color:var(--beacon)} .nav-cta{display:flex;align-items:center;margin-left:auto} /* markup-only mobile menu (no polling scripts, ever again) */ .mnav{display:none;position:relative;margin-left:auto;align-self:center} .mnav summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:12px; letter-spacing:.14em;text-transform:uppercase;padding:12px 14px;border:1.5px solid var(--line-d-strong)} .mnav summary::-webkit-details-marker{display:none} .mnav[open] summary{background:var(--beacon);color:var(--ink);border-color:var(--beacon)} .mnav .mm{position:absolute;right:0;top:calc(100% + 10px);min-width:230px;background:var(--wellhead); border:1.5px solid var(--line-d-strong);display:flex;flex-direction:column;z-index:70} .mnav .mm a{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase; padding:13px 18px;border-bottom:1px solid var(--line-d)} .mnav .mm a:last-child{border-bottom:none} .mnav .mm a:hover{color:var(--beacon-text-d)} @media(max-width:1020px){.nav-links{display:none}.nav-cta{display:none}.mnav{display:block}} /* ---------- Title block (engineering drawing header) ---------- */ .tblock{display:grid;grid-template-columns:auto 1fr auto;border:1.5px solid var(--line-d-strong);margin-bottom:44px} .tblock>*{padding:14px 20px} .tblock .tb-no{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--beacon-text-d); border-right:1.5px solid var(--line-d-strong);display:flex;align-items:center} .tblock h2{font-family:var(--disp);font-weight:600;font-size:clamp(26px,3.4vw,40px); letter-spacing:.03em;text-transform:uppercase;line-height:1} .tblock .tb-meta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--mut-d); text-transform:uppercase;border-left:1.5px solid var(--line-d-strong);display:flex;align-items:center;text-align:right} @media(max-width:680px){.tblock{grid-template-columns:1fr}.tblock .tb-meta{display:none} .tblock .tb-no{border-right:none;border-bottom:1.5px solid var(--line-d-strong);padding:10px 16px} .paper .tblock .tb-no{border-bottom-color:var(--line-p-strong)} .tblock h2{font-size:24px;line-height:1.12}.tblock>*{padding:12px 16px}} .paper .tblock{border-color:var(--line-p-strong)} .paper .tblock .tb-no{border-right-color:var(--line-p-strong);color:var(--beacon-text-p)} .paper .tblock .tb-meta{border-left-color:var(--line-p-strong);color:var(--mut-p)} /* ---------- Sections / grounds ---------- */ section{padding:88px 0} .paper{background:var(--gypsum);color:var(--ink)} .paper ::selection{background:var(--caspian);color:var(--gypsum)} .sec-lead{max-width:64ch;color:var(--mut-d);margin-bottom:46px;font-size:17px} .sec-lead strong{color:var(--gypsum)} .paper .sec-lead{color:var(--mut-p)} .paper .sec-lead strong{color:var(--ink)} /* ---------- Hero ---------- */ .hero{padding:64px 0 0;position:relative} .hero .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--mut-d);display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:30px} .hero .eyebrow b{color:var(--beacon-text-d);font-weight:500} h1{font-family:var(--disp);font-weight:700;text-transform:uppercase; font-size:clamp(50px,8.6vw,120px);line-height:.92;letter-spacing:.005em;max-width:1080px} h1 .amber{color:var(--beacon-text-d)} .hero .lead{max-width:62ch;margin-top:28px;font-size:clamp(16px,1.6vw,19px);color:var(--mut-d)} .hero .lead strong{color:var(--gypsum);font-weight:600} .hero .lead .lic{display:block;margin-top:14px;font-size:14px} /* second hero — the ecosystem statement, a sibling of h1 */ #ecosystem{padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(44px,5vw,72px)} .eco-hero{font-family:var(--disp);text-transform:uppercase;font-weight:700; font-size:clamp(33px,5.2vw,72px);line-height:.97;letter-spacing:.005em; text-align:center;max-width:1120px;margin:0 auto;color:var(--ink);text-wrap:balance} .eco-hero .eco-red{color:var(--beacon-text-p)} .eco-hero .eco-kick{display:block;margin:clamp(20px,2.6vw,32px) auto 0;max-width:640px; font-family:var(--body);text-transform:none;font-weight:400;letter-spacing:0; font-size:clamp(15px,1.5vw,19px);line-height:1.5;color:var(--mut-p)} .eco-hero .eco-kick strong{color:var(--ink);font-weight:600} [dir=rtl] .eco-hero{letter-spacing:0} /* two doors — the business split, made structural */ .doors{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--line-d-strong);margin-top:46px} .door{padding:26px 28px 24px;position:relative;transition:background .15s} .door+.door{border-left:1.5px solid var(--line-d-strong)} .door .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--beacon-text-d)} .door h3{font-family:var(--disp);font-weight:600;font-size:clamp(24px,2.6vw,34px); text-transform:uppercase;letter-spacing:.02em;margin:10px 0 8px;line-height:1} .door p{font-size:16px;color:var(--mut-d);max-width:40ch} .door .go{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--gypsum);margin-top:16px;display:inline-block} .door:hover{background:rgba(255,176,0,.07)} .door:hover .go{color:var(--beacon-text-d)} @media(max-width:760px){.doors{grid-template-columns:1fr}.door+.door{border-left:none;border-top:1.5px solid var(--line-d-strong)}} /* ---------- Signature: the drain trace ---------- */ .trace{margin-top:64px;border-top:1.5px solid var(--line-d-strong);border-bottom:1.5px solid var(--line-d-strong); background:rgba(243,242,240,.025)} .trace-head{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between; font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--mut-d);padding:12px 28px;border-bottom:1px solid var(--line-d)} .trace-head .live{color:var(--beacon-text-d)} .trace-head .live::before{content:"";display:inline-block;width:8px;height:8px;background:var(--beacon); margin-right:8px;animation:blink 2.4s steps(2,start) infinite} @keyframes blink{50%{opacity:.25}} .trace svg{width:100%;height:auto} .trace .t-grid{stroke:rgba(243,242,240,.10);stroke-width:1} .trace .t-axis{font-family:'IBM Plex Mono',monospace;font-size:13px;fill:rgba(243,242,240,.5);letter-spacing:.06em} .trace .t-lab{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.04em} .trace .t-line{fill:none;stroke:var(--gypsum);stroke-width:2; stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.8s .3s cubic-bezier(.5,0,.2,1) forwards} .trace .t-drain{fill:none;stroke:var(--flare);stroke-width:3; stroke-dasharray:1;stroke-dashoffset:1;animation:draw .5s 1.5s linear forwards} .trace .t-refuel{fill:none;stroke:var(--beacon);stroke-width:3; stroke-dasharray:1;stroke-dashoffset:1;animation:draw .5s 2.3s linear forwards} @keyframes draw{to{stroke-dashoffset:0}} .trace .t-flag{opacity:0;animation:appear .4s 2.1s forwards} .trace .t-flag2{opacity:0;animation:appear .4s 2.9s forwards} @keyframes appear{to{opacity:1}} @media (prefers-reduced-motion:reduce){ .trace .t-line,.trace .t-drain,.trace .t-refuel{animation:none;stroke-dashoffset:0} .trace .t-flag,.trace .t-flag2{animation:none;opacity:1} .trace-head .live::before{animation:none} } /* ---------- SEC 02 · Method: the loop, now flowing ---------- */ .loop{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;align-items:stretch} .node{border:1.5px solid var(--line-d-strong);padding:24px 24px 20px;background:var(--wellhead);position:relative} .node .id{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--beacon-text-d)} .node h3{font-family:var(--disp);font-weight:600;font-size:32px;letter-spacing:.05em; text-transform:uppercase;margin:8px 0 4px;line-height:1} .node .role{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--mut-d); text-transform:uppercase;display:block;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line-d)} .node p{font-size:16px;color:var(--mut-d)} .node.act{border-color:var(--beacon)} .node.act .id{color:var(--beacon-text-d)} .pipe{position:relative} /* the signal flows: animated dash stream along each pipe */ .pipe::before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;margin-top:-1px; background:repeating-linear-gradient(90deg,var(--beacon) 0 7px,rgba(243,242,240,.16) 7px 16px)} .js .pipe::before{animation:flowx 1.1s linear infinite} @keyframes flowx{to{background-position:16px 0}} .pipe::after{content:"";position:absolute;top:50%;right:-1px;width:9px;height:9px; border-top:1.5px solid var(--beacon);border-right:1.5px solid var(--beacon); transform:translateY(-50%) rotate(45deg)} .loop-return{height:64px;margin:0 calc(16.6% - 22px);border:1.5px dashed var(--line-d);border-top:none;position:relative} .loop-return::after{content:"";position:absolute;left:-5px;top:-7px;width:9px;height:9px; border-left:1.5px solid var(--line-d);border-top:1.5px solid var(--line-d);transform:rotate(45deg)} .loop-return .cap{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%); background:var(--wellhead);padding:0 16px;font-family:var(--mono);font-size:11px; letter-spacing:.2em;color:var(--beacon-text-d);text-transform:uppercase;white-space:nowrap} .loop-foot{margin-top:64px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em; color:var(--mut-d);text-transform:uppercase;max-width:72ch} .loop-foot b{color:var(--beacon-text-d);font-weight:500} @media(max-width:860px){ .loop{grid-template-columns:1fr} .pipe{height:40px} .pipe::before{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;margin:0 0 0 -1px; background:repeating-linear-gradient(180deg,var(--beacon) 0 7px,rgba(243,242,240,.16) 7px 16px)} .js .pipe::before{animation:flowy 1.1s linear infinite} .pipe::after{right:auto;left:50%;top:auto;bottom:-1px;transform:translateX(-50%) rotate(135deg)} .loop-return{margin:0;height:auto;min-height:52px;border:none;border-left:1.5px dashed var(--line-d)} .loop-return::after{display:none} .loop-return .cap{position:static;display:block;transform:none;white-space:normal; padding:16px 0 0 16px;max-width:100%} } @keyframes flowy{to{background-position:0 16px}} @media (prefers-reduced-motion:reduce){.js .pipe::before{animation:none}} /* ---------- SEC 03 · Proof (paper · field log) ---------- */ .statrow{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--line-p-strong);margin-bottom:46px} .stat{padding:22px 24px 18px} .stat+.stat{border-left:1.5px solid var(--line-p-strong)} .stat .n{font-family:var(--disp);font-weight:700;font-size:clamp(38px,4.6vw,60px);line-height:1;color:var(--caspian)} .stat .n .u{font-size:.55em;letter-spacing:.02em} .stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-p);margin-top:8px;display:block} @media(max-width:860px){.statrow{grid-template-columns:1fr 1fr} .stat:nth-child(3){border-left:none}.stat:nth-child(n+3){border-top:1.5px solid var(--line-p-strong)}} .cases{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--line-p-strong)} .case{padding:26px 28px 24px;border-bottom:1.5px solid var(--line-p-strong)} .case:nth-child(odd){border-right:1.5px solid var(--line-p-strong)} .case:nth-last-child(-n+2){border-bottom:none} .case-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px} .case h3{font-family:var(--disp);font-weight:700;font-size:30px;letter-spacing:.03em;text-transform:uppercase;line-height:1;color:var(--caspian)} .case .tag{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--gypsum);background:var(--caspian);padding:4px 9px;white-space:nowrap} .case .tag.hot{background:var(--flare)} .case .sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut-p);display:block;margin-bottom:12px} .case p{font-size:16px;color:var(--mut-p)} .case p b{color:var(--ink)} @media(max-width:860px){.cases{grid-template-columns:1fr} .case:nth-child(odd){border-right:none} .case:nth-last-child(2){border-bottom:1.5px solid var(--line-p-strong)}} .deals{margin-top:46px;border:1.5px solid var(--line-p-strong)} .deals-head{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--gypsum);background:var(--ink);padding:10px 18px} .deal{display:grid;grid-template-columns:minmax(150px,220px) 1fr auto;gap:8px 20px; padding:12px 18px;border-top:1px solid var(--line-p);font-family:var(--mono);font-size:13.5px;letter-spacing:.02em} .deal:first-of-type{border-top:none} .deal .who{color:var(--ink);font-weight:600;text-transform:uppercase;letter-spacing:.08em} .deal .what{color:var(--mut-p)} .deal .flag{color:var(--caspian);font-weight:600;text-transform:uppercase;letter-spacing:.1em;text-align:right} .deal .flag.live{color:var(--beacon-text-p)} .deal.quiet .who,.deal.quiet .what,.deal.quiet .flag{color:var(--mut-p);font-weight:400} @media(max-width:760px){.deal{grid-template-columns:1fr}.deal .flag{text-align:left}} /* ---------- SEC 04 · The stack (dark) ---------- */ .stack{border:1.5px solid var(--line-d-strong);position:relative} .srow{display:grid;grid-template-columns:132px 190px 1fr;border-top:1.5px solid var(--line-d)} .srow:first-child{border-top:none} .srow .alt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--beacon-text-d);padding:20px;border-right:1.5px solid var(--line-d);display:flex;align-items:flex-start} .srow .lname{font-family:var(--disp);font-weight:600;font-size:30px;letter-spacing:.04em;text-transform:uppercase; line-height:1;padding:16px 20px;border-right:1.5px solid var(--line-d)} .srow .ldesc{padding:18px 22px} .srow .ldesc p{font-size:16px;color:var(--mut-d);margin-bottom:10px;max-width:70ch} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--mut-d);border:1px solid var(--line-d-strong);padding:4px 9px;white-space:nowrap} .chip.hot{color:var(--ink);background:var(--beacon);border-color:var(--beacon)} @media(max-width:860px){.srow{grid-template-columns:1fr} .srow .alt{border-right:none;padding:16px 18px 0} .srow .lname{border-right:none;padding:6px 18px 4px} .srow .ldesc{padding:6px 18px 18px}} /* Velavu spine + AI crown */ .pane{border:1.5px solid var(--beacon);margin-top:34px;display:grid;grid-template-columns:1fr 1fr} .pane>div{padding:26px 28px 24px} .pane>div+div{border-left:1.5px solid var(--line-d-strong)} .pane .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--beacon-text-d)} .pane h3{font-family:var(--disp);font-weight:600;font-size:clamp(24px,2.6vw,34px);text-transform:uppercase; letter-spacing:.02em;margin:10px 0 8px;line-height:1} .pane p{font-size:16px;color:var(--mut-d);max-width:52ch} .pane p b{color:var(--gypsum)} .pane ul{list-style:none;margin-top:12px} .pane li{font-family:var(--mono);font-size:13.5px;letter-spacing:.04em;color:var(--mut-d); padding:7px 0 7px 18px;border-top:1px solid var(--line-d);position:relative} .pane li::before{content:"▸";position:absolute;left:0;color:var(--beacon-text-d)} @media(max-width:860px){.pane{grid-template-columns:1fr} .pane>div+div{border-left:none;border-top:1.5px solid var(--line-d-strong)}} /* ---------- SEC 05 · Store (paper · datasheet grid) ---------- */ .dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1.5px solid var(--line-p-strong)} .dcard{padding:26px 26px 22px;display:flex;flex-direction:column;border-bottom:1.5px solid var(--line-p-strong)} .dcard:not(:nth-child(3n+1)){border-left:1.5px solid var(--line-p-strong)} .dcard:nth-last-child(-n+3){border-bottom:none} .dcard-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px; padding-bottom:14px;margin-bottom:14px;border-bottom:1.5px solid var(--line-p-strong)} .dcard .model{font-family:var(--disp);font-weight:700;font-size:34px;letter-spacing:.03em; line-height:1;color:var(--caspian);text-transform:uppercase} .dcard .tag{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--gypsum);background:var(--caspian);padding:4px 9px;white-space:nowrap} .dcard .tag.hot{background:var(--flare)} .dcard h3{font-size:16.5px;font-weight:600;margin-bottom:6px} .dcard>p{font-size:16px;color:var(--mut-p);margin-bottom:18px} .specs{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13.5px;margin-top:auto} .specs td{padding:8px 0;border-top:1px solid var(--line-p);vertical-align:top} .specs td:first-child{color:var(--mut-p);letter-spacing:.1em;text-transform:uppercase;padding-right:14px;white-space:nowrap} .specs td:last-child{text-align:right;color:var(--ink);font-weight:500} .stamp{align-self:flex-start;margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.16em; color:var(--beacon-text-p);border:1.5px solid var(--flare);padding:5px 10px;text-transform:uppercase;transform:rotate(-1.5deg)} @media(max-width:1000px){.dgrid{grid-template-columns:1fr 1fr} .dcard:not(:nth-child(3n+1)){border-left:none} .dcard:nth-child(even){border-left:1.5px solid var(--line-p-strong)} .dcard:nth-last-child(-n+3){border-bottom:1.5px solid var(--line-p-strong)} .dcard:nth-last-child(-n+2){border-bottom:none}} @media(max-width:640px){.dgrid{grid-template-columns:1fr} .dcard:nth-child(even){border-left:none} .dcard{border-bottom:1.5px solid var(--line-p-strong)} .dcard:last-child{border-bottom:none}} .paper-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:40px} .paper-note{font-family:var(--mono);font-size:11.5px;color:var(--mut-p);letter-spacing:.04em;max-width:66ch} /* ---------- SEC 06 · Sector bundles (dark) ---------- */ .bundles{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--line-d-strong)} .bundle{padding:26px 26px 24px;display:flex;flex-direction:column} .bundle+.bundle{border-left:1.5px solid var(--line-d-strong)} .bundle .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--beacon-text-d)} .bundle h3{font-family:var(--disp);font-weight:600;font-size:clamp(26px,2.6vw,34px);text-transform:uppercase; letter-spacing:.02em;margin:10px 0 6px;line-height:1} .bundle .out{font-size:14.5px;color:var(--mut-d);margin-bottom:16px} .bundle .out b{color:var(--gypsum)} .bundle ul{list-style:none;margin-top:auto} .bundle li{font-family:var(--mono);font-size:13.5px;letter-spacing:.05em;text-transform:uppercase; color:var(--mut-d);padding:8px 0 8px 18px;border-top:1px solid var(--line-d);position:relative} .bundle li::before{content:"+";position:absolute;left:0;color:var(--beacon-text-d)} .bundle .go{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--gypsum);margin-top:18px;display:inline-block} .bundle .go:hover{color:var(--beacon-text-d)} @media(max-width:960px){.bundles{grid-template-columns:1fr} .bundle+.bundle{border-left:none;border-top:1.5px solid var(--line-d-strong)}} .quiet-line{margin-top:26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--mut-d)} .quiet-line a{border-bottom:1px solid var(--line-d-strong)} .quiet-line a:hover{color:var(--beacon-text-d);border-bottom-color:var(--beacon)} /* corridor coverage strip */ .corridor{margin-top:64px;border:1.5px solid var(--line-d-strong)} .corridor-head{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--mut-d);padding:10px 18px;border-bottom:1px solid var(--line-d)} .corridor-head b{color:var(--beacon-text-d);font-weight:500} .route{display:flex;align-items:center;gap:0;padding:26px 18px;overflow-x:auto} .stop{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--gypsum);white-space:nowrap;position:relative;padding-top:16px} .stop::before{content:"";position:absolute;top:0;left:50%;margin-left:-4px;width:8px;height:8px; background:var(--beacon)} .stop.hq::before{background:var(--flare)} .stop small{display:block;color:var(--mut-d);font-size:10px;letter-spacing:.14em} .leg{flex:1;min-width:40px;height:2px;margin:0 10px;position:relative;top:-9px; background:repeating-linear-gradient(90deg,var(--beacon) 0 6px,rgba(243,242,240,.14) 6px 14px)} .js .leg{animation:flowx 1.4s linear infinite} @media (prefers-reduced-motion:reduce){.js .leg{animation:none}} /* ---------- SEC 07 · FAQ (paper) ---------- */ .faq{border:1.5px solid var(--line-p-strong)} .faq details{border-top:1.5px solid var(--line-p-strong)} .faq details:first-child{border-top:none} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px; align-items:baseline;padding:18px 22px;font-family:var(--disp);font-weight:600;font-size:22px; letter-spacing:.02em;text-transform:uppercase;line-height:1.1} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--mono);font-size:18px;color:var(--beacon-text-p);flex:none} .faq details[open] summary::after{content:"−"} .faq details[open] summary{color:var(--caspian)} .faq .a{padding:0 22px 20px;max-width:78ch;font-size:16px;color:var(--mut-p)} .faq .a b{color:var(--ink)} /* ---------- SEC 08 · Contact (dark) ---------- */ .contact h2.big{font-family:var(--disp);font-weight:700;font-size:clamp(44px,7vw,96px); text-transform:uppercase;line-height:.92;letter-spacing:.005em;max-width:14ch} .contact h2.big .amber{color:var(--beacon-text-d)} .contact .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px} .contact .meta{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:24px 40px; border-top:1.5px solid var(--line-d);padding-top:28px} .contact .meta h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--beacon-text-d);margin-bottom:8px;font-weight:500} .contact .meta p{font-size:14px;color:var(--mut-d);max-width:56ch} .contact .meta a{border-bottom:1px solid var(--line-d-strong)} .contact .meta a:hover{color:var(--beacon-text-d);border-bottom-color:var(--beacon)} @media(max-width:760px){.contact .meta{grid-template-columns:1fr}} /* ---------- Footer ---------- */ footer{border-top:1.5px solid var(--line-d-strong);padding:34px 0 40px} .foot{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between; font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mut-d);text-transform:uppercase} .foot a:hover{color:var(--beacon-text-d)} .foot .loopmark{color:var(--beacon-text-d)} .lic-line{margin-top:20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em; color:var(--mut-d);max-width:100%;line-height:1.8;text-transform:uppercase} /* light-section fixes: dark .door component + chips readable on .paper */ .paper .cap{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-p)} .paper .chips{display:flex;flex-wrap:wrap;gap:8px} .paper .chip{font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:6px 12px;border:1px solid var(--line-p-strong);border-radius:2px;color:var(--ink)} .paper .door .go{color:var(--beacon-text-p)} .paper .door .k{color:var(--beacon-text-p)} .paper .door p{color:var(--mut-p)} .paper .door+.door{border-color:var(--line-p-strong)} .paper .doors{border-color:var(--line-p-strong)} /* hero animated cycle flow (sensor -> invoice, loops) */ .hero-flow{margin:40px auto 2px;max-width:1040px} .hero-flow svg{width:100%;height:auto;display:block;overflow:visible} .hero-flow .zk-flab{font-family:var(--mono);font-size:13px;letter-spacing:.16em;fill:var(--gypsum)} .hero-flow .zk-fcap{font-family:var(--mono);font-size:11px;letter-spacing:.06em;fill:var(--mut-d)} .hero-flow-cap{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mut-d);margin-top:10px;text-transform:uppercase} #sense-live{padding:56px 0;background:var(--wellhead)} /* ============ 2026-07-27 compact homepage redesign ============ */ /* tighten section rhythm */ .paper{padding-top:clamp(46px,5.2vw,74px);padding-bottom:clamp(46px,5.2vw,74px)} /* hero strapline (replaces the 2nd giant header) */ .hero-strap{text-align:center;max-width:900px;margin:34px auto 0;font-family:var(--body); font-size:clamp(16px,1.7vw,21px);line-height:1.5;color:var(--mut-d);letter-spacing:-.01em} .hero-strap strong{color:var(--beacon-text-d);font-weight:600} /* compact 4-step method row */ .cyc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px} .cyc-step{position:relative;border:1px solid var(--line-d);border-radius:3px;padding:20px 18px 22px; background:rgba(20,20,20,.015);transition:transform .18s,border-color .18s,box-shadow .18s;overflow:hidden} .cyc-step::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--flare); transform:scaleX(0);transform-origin:left;transition:transform .28s} .cyc-step:hover{transform:translateY(-4px);border-color:var(--flare);box-shadow:0 14px 30px rgba(0,0,0,.10)} .cyc-step:hover::before{transform:scaleX(1)} .cyc-k{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--beacon-text-p); margin-bottom:10px} .cyc-step p{font-family:var(--body);font-size:16px;line-height:1.5;color:var(--mut-p);margin:0} .cyc-step .go{margin-top:10px;font-size:12px} .cyc-note{text-align:center;margin-top:20px;margin-inline:auto;font-family:var(--body);font-size:16px;color:var(--mut-p);max-width:66ch} .cyc-note strong{color:var(--ink)} @media(max-width:820px){.cyc{grid-template-columns:1fr 1fr}} @media(max-width:520px){.cyc{grid-template-columns:1fr}} /* compact price table (the estimator) */ .ptable{margin-top:26px;border:1px solid var(--line-d);border-radius:4px;overflow:hidden} .prow{display:grid;grid-template-columns:minmax(150px,1fr) 2.2fr minmax(140px,auto);gap:16px; align-items:center;padding:15px 20px;border-top:1px solid var(--line-d);transition:background .15s} .prow:first-child{border-top:0} .prow:hover{background:rgba(240,0,24,.04)} .prow .pname{font-family:var(--disp);text-transform:uppercase;font-weight:600;font-size:18px; letter-spacing:.01em;color:var(--ink)} .prow .pwhat{font-family:var(--body);font-size:15px;line-height:1.45;color:var(--mut-p)} .prow .pfrom{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--beacon-text-p);white-space:nowrap;text-align:right} .prow .pfrom span{display:block;color:var(--mut-p);font-weight:400;font-size:11px} @media(max-width:720px){.prow{grid-template-columns:1fr auto;gap:6px 14px}.prow .pwhat{grid-column:1/-1;order:3}.prow .pfrom{text-align:right}} /* compact proof grid */ .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px} .pitem{border:1px solid var(--line-d);border-radius:3px;padding:18px;transition:transform .18s,border-color .18s} .pitem:hover{transform:translateY(-3px);border-color:var(--mut-p)} .pitem .tag{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.1em; color:var(--beacon-text-p);margin-bottom:8px} .pitem p{font-family:var(--body);font-size:15px;line-height:1.45;color:var(--mut-p);margin:0} @media(max-width:820px){.pgrid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.pgrid{grid-template-columns:1fr}} /* slim demote band (store) */ .band{text-align:center;font-family:var(--body);font-size:16px;color:var(--mut-p);margin:0 auto;max-width:66ch} .band strong{color:var(--ink)} /* subtle hover lift on remaining card types */ .dcard,.door,.case{transition:transform .18s,border-color .18s,box-shadow .18s} .dcard:hover,.case:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.08)} /* ============ 2026-07-27 category-tile homepage (v3) ============ */ .catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px} @media(max-width:900px){.catgrid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.catgrid{grid-template-columns:1fr}} .cat{display:flex;flex-direction:column;border:1px solid var(--line-p);border-radius:4px; padding:26px 24px 22px;background:#fff;transition:transform .18s,border-color .18s,box-shadow .18s;min-height:230px} .cat:hover{transform:translateY(-5px);border-color:var(--flare);box-shadow:0 16px 34px rgba(0,0,0,.10)} .cat-k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--beacon-text-p);margin-bottom:14px} .cat h3{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:26px;line-height:1; letter-spacing:.01em;color:var(--ink);margin-bottom:12px} .cat p{font-family:var(--body);font-size:16px;line-height:1.5;color:var(--mut-p);margin:0 0 18px} .cat .cat-foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding-top:16px;border-top:1px solid var(--line-p)} .cat .cat-price{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink)} .cat .cat-price span{color:var(--mut-p);font-weight:400} .cat .cat-go{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--beacon-text-p)} .cat:hover .cat-go{text-decoration:underline} /* ============ 2026-08-23 product-grid + how-to-buy ============ */ .cat-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .cat-btns .btn{padding:12px 16px;font-size:11.5px} .hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px} .step{border:1.5px solid var(--line-p-strong);border-radius:4px;padding:24px;background:#fff} .step-no{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--beacon-text-p);display:block;margin-bottom:10px} .step h3{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:22px;line-height:1;color:var(--ink);margin-bottom:10px} .step p{font-family:var(--body);font-size:16px;line-height:1.5;color:var(--mut-p);margin:0} @media(max-width:760px){.steps{grid-template-columns:1fr}} @media(max-width:420px){.cat-btns .btn{width:100%;justify-content:center}}