/* ========================================================================== HOME — WHY PULSAR (css/home-why.css) One LIGHT band under the platform band: three claims for why PULSAR holds up, where the platform band has just said what it is. THE BAND CARRIES ITS OWN PALETTE. index.html does not load design-tokens.css, and the band-level tokens in main.css are tuned for body copy rather than for line art — a var(--accent) that reads well as a link is too pale as a 0.7px mesh stroke on white. So the drawing colours are declared on .home-why itself, the way css/home-platform.css does it. A var() that resolves to nothing makes an SVG fall back to black, which is invisible on dark and wrong on light; local tokens make that impossible. THE FOCUS ROW. One claim is forward and sharp, the other two are blurred and desaturated to shapes. The focus advances every 5s, follows the pointer, and stops when the reader clicks. All of that state lives in js/blocks/home-why-focus.js — this file only says what each state looks like. Read the header of that file before changing either. THE RULE THAT SHAPES IT: ONE MESSAGE PER BLOCK, AND FEW BLOCKS. An earlier pass ran five benefits plus a comparison table plus a lede in one band. Every claim in it was true and the section said nothing, because nothing had room to land. Three claims, each with a headline large enough to be read on its own. If a fourth arrives, one of these has to leave. WHY THESE THREE CLAIMS, OUT OF THE MANY AVAILABLE 01 THE INVERSION. Complexity feeds this and defeats everything else. It is the only argument on the page that is not made somewhere else, and it is the one a reader repeats afterwards. It runs FIRST. 02 THE ASSET. The knowledge accumulates and outlives the people who would otherwise carry it. This is the claim that turns a tool into something a program owns, and it is what makes year three worth more than year one. 03 THE ENTRY. Nothing to install, write or describe. It answers the first objection a buyer raises and the GTM risk an investor prices, in the same sentence. Deliberately NOT here: "the causal layer your agents are missing". It is true, and Causely runs almost exactly that sentence as their own homepage positioning, so it cannot be owned. SPACING IS THE POINT. The band is generous to the edge of wasteful. This is the section a reader is asked to slow down for, and the whitespace is what tells them to. ========================================================================== */ .home-why{ --hw-teal:#2a8f88; --hw-teal-ink:#0a5c56; --hw-warm:#d9663a; --hw-ink:#2b2d42; --hw-soft:#5c677d; --hw-metal:#8d99ae; --hw-line:#e5e7eb; --hw-card:#ffffff} /* The heading is meant to land on ONE line on a desktop screen — it is the section's whole argument in a sentence, and a sentence that breaks reads as two. No max-width, therefore; the container measure is the limit, and below roughly 1100px it wraps to two, which is fine. */ .home-why__head{margin:0 0 clamp(40px,6vh,76px); font-size:clamp(26px,2.9vw,40px);font-weight:700;color:var(--hw-ink); letter-spacing:-.035em;line-height:1.14;text-wrap:balance} /* —— the claims ——————————————————————————————————————————————————————— Three abreast on a wide screen. At three the gutter has to come down from the two-column value or the columns read as three unrelated cards rather than as one argument in three parts. */ .home-why__claims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,2.6vw,40px);align-items:stretch} /* —— the cards ————————————————————————————————————————————————————————— */ .home-why__card{position:relative;display:flex;flex-direction:column; background:var(--hw-card);border:1px solid var(--hw-line);border-radius:18px; padding:clamp(24px,2.8vw,38px);box-shadow:0 1px 2px rgba(43,45,66,.05); transition:filter .42s ease, opacity .42s ease, transform .42s cubic-bezier(.22,.61,.36,1), box-shadow .42s ease} .home-why__card:focus-visible{outline:2px solid var(--hw-teal);outline-offset:3px} /* The recessed state exists ONLY under .anim-ready — see the file header. */ .home-why__claims.anim-ready .home-why__card{ filter:blur(3.5px) grayscale(.85);opacity:.42;transform:scale(.965);cursor:pointer} .home-why__claims.anim-ready .home-why__card.is-on{ filter:none;opacity:1;transform:scale(1) translateY(-6px); box-shadow:0 2px 6px rgba(43,45,66,.06), 0 22px 54px rgba(43,45,66,.13);z-index:2} /* The drain bar. It exists so the swap is not a surprise: a card that changes itself with no warning reads as a glitch rather than a rotation. It disappears the moment the reader takes control by clicking. */ .home-why__timer{position:absolute;left:0;right:0;bottom:0;height:2px; border-radius:0 0 18px 18px;overflow:hidden;opacity:0;transition:opacity .3s ease} .home-why__claims.anim-ready .home-why__card.is-on .home-why__timer{opacity:1} .home-why__claims.anim-ready.is-held .home-why__timer{opacity:0} .home-why__timer i{display:block;height:100%;width:100%;background:var(--hw-teal); transform-origin:left center;transform:scaleX(0)} .home-why__claims.anim-ready:not(.is-held) .home-why__card.is-on .home-why__timer i{ animation:hwDrain var(--dwell,5s) linear forwards} @keyframes hwDrain{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* —— the figure ———————————————————————————————————————————————————————— Each claim is carried by one number. They replaced a small drawing per card, and the reason is worth recording: the drawings were doing two jobs badly — illustrating the claim AND supplying its evidence — and a figure does the second job outright. A picture of complexity rising is an assertion; "100+ suppliers" is a fact with a source behind it. WHAT IS ALLOWED HERE. < 1 day to a cross-domain cause, against 1-4 weeks. Sourced on /why-pulsar to the team's own programmes at Audi, BMW, CARIAD and Qualcomm, 2015-2024. The 5-20x claim is this same range expressed differently, so changing one changes the other. 0 specifications, documentation, source code, instrumentation. The site's own line, repeated on four pages. 1,000s interactions per run. NOT sourced anywhere — it describes the order of magnitude of a trace file rather than claiming a measured result, which is why it is defensible as written. It would stop being defensible the moment it became a precise figure, so it stays an order of magnitude. WHAT IS NOT. "90% faster" is unsourced, "100% transparent and understood" is an absolute nobody can hold, and the firefighting share appears as 70% in one section and 80% in another. All three are still live on /why-pulsar and /platform and should not be brought onto this page. Nor should any figure from the product demos — 128 runs, 96 reference runs, 91% CPU — which are labelled synthetic and would become assertions here. The figure is real text, not SVG: it scales with the card, stays selectable, and is read out as a number rather than as a drawing. */ .home-why__figure{margin:0 0 clamp(10px,1.4vh,14px); font-size:clamp(38px,4.6vw,60px);font-weight:700;letter-spacing:-.045em; line-height:1;color:var(--hw-teal);white-space:nowrap} .home-why__figcap{margin:0 0 clamp(20px,2.6vh,28px);padding-bottom:clamp(16px,2vh,22px); border-bottom:1px solid var(--hw-line); font-size:clamp(13.5px,1vw,15px);line-height:1.5;color:var(--hw-metal)} /* Card 03 is a drawing rather than a figure-plus-caption, because its number has to ACT ON something: the zero sits to the left and the four things it cancels stack to its right, with the one input that remains below the rule. Stacking them vertically instead — a 0, then a list under it — was tried and lost exactly that: the zero stopped counting the items and became a decoration above them. THE NUMERAL IS LARGER THAN ITS SIBLINGS ON PURPOSE. Matching "100+" and "< 1 day" by point size was the wrong test: those are four and seven glyphs wide and carry that much visual mass, while this is a single character. Set to the same size it reads as the quietest thing in the row, when it is the loudest claim in it. At 68 units it renders around 100px against their 60 and finally has equal presence. Its baseline sits low so its optical centre lines up with the middle of the text block beside it rather than with the first line. */ .home-why__viz{display:block;width:100%;height:clamp(96px,9.5vw,124px); margin:0 0 clamp(20px,2.6vh,28px);padding-bottom:0;overflow:visible} .home-why__big{font-family:var(--sans,"DM Sans",system-ui,sans-serif);font-size:68px; font-weight:700;letter-spacing:-.04em;fill:var(--hw-teal)} /* 11 viewBox units, not the 7.5 of the original mockup. Once the drawing is scaled to the card that is roughly 14px on screen — the size the labels needed to be actually read rather than recognised as "some small text". Two items rather than four is what made the room for it. */ .home-why__lbl{font-family:var(--mono);font-size:11px;letter-spacing:.06em; fill:var(--hw-metal);text-transform:uppercase} .home-why__lbl--gone{fill:rgba(43,45,66,.34)} .home-why__lbl--teal{fill:var(--hw-teal-ink)} .home-why__tick{stroke:rgba(43,45,66,.13);stroke-width:1} .home-why__num{margin:0 0 clamp(14px,2vh,20px);padding-bottom:clamp(12px,1.6vh,16px); border-bottom:1px solid var(--hw-line); font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.1em; color:var(--hw-teal)} .home-why__title{margin:0 0 clamp(12px,1.8vh,18px);font-size:clamp(19px,1.9vw,25px); font-weight:700;color:var(--hw-ink);letter-spacing:-.03em;line-height:1.2;text-wrap:balance} .home-why__body{margin:0;font-size:clamp(15px,1.12vw,17.5px);line-height:1.68; color:var(--hw-soft)} /* The sentence each claim lands on. Lifted out of the paragraph colour so a reader who skims only the bright text still receives all three claims whole — the same device the thesis section uses with its teal accents. */ .home-why__body b{font-weight:500;color:var(--hw-ink)} /* THE FOCUS ROW IS A ROW. Once the claims stop sharing one it stops making sense: below 1040px they stack, so the two recessed cards are no longer beside the sharp one but above and below it, off screen. The reader scrolls to a claim and finds it blurred to 42% until a five-second timer they cannot see happens to land on it. The JS already bails on touch, which left exactly this broken on a narrow desktop window; stating it in CSS covers both. */ @media (max-width:1040px){ .home-why__claims{grid-template-columns:repeat(2,minmax(0,1fr))} .home-why__claims.anim-ready .home-why__card, .home-why__claims.anim-ready .home-why__card.is-on{ filter:none;opacity:1;transform:none;cursor:auto} .home-why__claims.anim-ready .home-why__card.is-on{ box-shadow:0 1px 2px rgba(43,45,66,.05)} .home-why__claims.anim-ready .home-why__card.is-on .home-why__timer{opacity:0} .home-why__claims.anim-ready:not(.is-held) .home-why__card.is-on .home-why__timer i{ animation:none} } @media (max-width:760px){.home-why__claims{grid-template-columns:1fr}}