/* Hallmark · v2.0.0 · shape: engineering study, a page laid out like a bureau d'études plan · genre: modern-minimal · theme: custom (KAZAK brand, inherited) · job: hire · idea: "a bureau d'études that studies your company before installing any AI, and stays" · vibe: "precise engineer, white sheet, navy ink, neon signal"
 * paper: oklch(99.4% 0.003 250) · accent: oklch(91% 0.22 120) · display: Chakra Petch · body: Titillium Web · hero: headline left, a working roadmap and an agent message built in HTML right · nav: edge-aligned, lockup, three links, one action · footer: navy close with contact · imagery: product built in HTML, one slot for Oz's photograph · signature: the feuille de route card, ticking itself off
 * axes: light/grotesk-technical/chromatic-lime · posture: restrained · contrast: pass · fold: pass · design system: ui-ux-pro-max (Trust & Authority + Conversion), brand palette and faces kept */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V5 · weakest: E, the proof band waits for real client results; nothing invented, the slot is named */
@import url("./tokens.css");
@import url("./base.css");

:root{
 --color-paper:oklch(99.4% 0.003 250);--color-paper-2:oklch(97.3% 0.006 250);--color-paper-3:oklch(94.5% 0.01 250);
 --color-ink:oklch(25.5% 0.06 252);--color-ink-2:oklch(36% 0.055 252);--color-muted:oklch(50% 0.03 252);--color-rule:oklch(91% 0.012 252);
 --color-accent:oklch(91% 0.22 120);--color-accent-ink:oklch(25.5% 0.06 252);--color-focus:oklch(25.5% 0.06 252);
 --color-night:oklch(25.5% 0.06 252);--color-on-night:oklch(98.6% 0.006 300);--color-on-night-muted:oklch(80% 0.03 252);--color-night-rule:oklch(38% 0.06 252);
 --font-display:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;--font-body:"Titillium Web",ui-sans-serif,system-ui,sans-serif;--font-outlier:var(--font-display);
 --radius-card:10px;--radius-pill:999px;--rule-hair:1px;--shadow-card:0 1px 2px oklch(25% 0.06 252 / .06),0 12px 32px -12px oklch(25% 0.06 252 / .18);
 --container:1200px;--gutter:40px;
 --color-card:oklch(100% 0 0);--color-shade:oklch(25% 0.06 252 / .12);--color-strike:oklch(50% 0.03 252 / .5);--color-mask:oklch(25.5% 0.06 252);
}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;line-height:1.06;margin:0;text-wrap:balance;overflow-wrap:break-word;min-width:0}
p{margin:0;text-wrap:pretty}
a{color:inherit}
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px;border-radius:4px}
.ic{width:22px;height:22px;flex:none}
.logo{display:block;height:30px;width:auto}
.logo .logo-word{fill:var(--color-ink)}
.logo .logo-sym{fill:var(--color-accent)}
.logo.on-night .logo-sym{fill:var(--color-accent)}.logo.on-night .logo-word{fill:var(--color-on-night)}
.kicker{font-family:var(--font-display);font-weight:500;font-size:var(--text-sm);color:var(--color-muted);display:flex;align-items:center;gap:var(--space-xs)}
.kicker::before{content:"";width:8px;height:8px;background:var(--color-accent);box-shadow:0 0 0 1px var(--color-ink)}

.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:var(--space-xs);font-family:var(--font-display);font-weight:600;font-size:1rem;min-height:48px;padding:0 var(--space-lg);border-radius:var(--radius-card);text-decoration:none;cursor:pointer;background:var(--color-ink);color:var(--color-on-night);transition:transform var(--dur-micro) var(--ease-out),background-color var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}
.btn .ic{width:18px;height:18px;transition:transform var(--dur-short) var(--ease-out)}
.btn:hover{background:var(--color-ink-2)}.btn:hover .ic{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.night .btn{background:var(--color-accent);color:var(--color-accent-ink)}.night .btn:hover{background:var(--color-on-night)}
.btn.line{background:transparent;color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--color-rule)}.btn.line:hover{box-shadow:inset 0 0 0 1px var(--color-ink)}

.top{position:sticky;top:0;z-index:var(--z-sticky-nav);background:var(--color-paper);border-bottom:var(--rule-hair) solid transparent;transition:border-color var(--dur-short) var(--ease-out)}
.top.scrolled{border-bottom-color:var(--color-rule)}
.nav{display:flex;justify-content:space-between;align-items:center;height:76px}
.nav ul{display:flex;gap:var(--space-xl);list-style:none;margin:0;padding:0;align-items:center;font-size:var(--text-sm)}
.nav ul a:not(.btn){text-decoration:none;color:var(--color-ink-2);transition:color var(--dur-short) var(--ease-out)}
.nav ul a:not(.btn):hover{color:var(--color-ink)}.nav ul a:not(.btn):active{opacity:.7}

.hero{position:relative;padding:var(--space-3xl) 0;overflow:hidden}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--color-rule) 1px,transparent 1px),linear-gradient(90deg,var(--color-rule) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse 70% 70% at 75% 40%,var(--color-mask) 0%,transparent 70%);opacity:.7;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--space-2xl);align-items:center}
.hero h1{font-size:clamp(2.6rem,4.2vw + .6rem,4.6rem)}
.hero .lead{font-size:var(--text-lead);color:var(--color-ink-2);margin-top:var(--space-lg);max-width:44ch}
.hero .actions{display:flex;gap:var(--space-sm);margin-top:var(--space-xl);flex-wrap:wrap}
.hero .facts{display:flex;gap:var(--space-xl);margin-top:var(--space-2xl);flex-wrap:wrap;color:var(--color-muted);font-size:var(--text-sm)}
.hero .facts span{display:flex;align-items:center;gap:var(--space-xs)}
.hero .facts .ic{width:18px;height:18px;color:var(--color-ink)}

.stage{position:relative;min-height:580px}
.card{background:var(--color-card);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.roadmap{position:relative;padding:var(--space-lg);width:min(100%,440px);margin-left:auto}
.rm-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:var(--space-sm);border-bottom:var(--rule-hair) solid var(--color-rule)}
.rm-head b{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg)}
.rm-head span{font-size:var(--text-xs);color:var(--color-muted)}
.rm{list-style:none;margin:var(--space-sm) 0 0;padding:0}
.rm li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--space-sm);align-items:center;padding:var(--space-sm) 0;border-bottom:var(--rule-hair) dashed var(--color-rule);font-size:var(--text-sm)}
.rm li:last-child{border-bottom:0}
.box{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--color-ink);display:grid;place-items:center;transition:background-color var(--dur-long) var(--ease-out)}
.box svg{width:14px;height:14px;opacity:0;transition:opacity var(--dur-short) var(--ease-out)}
.rm li.done .box{background:var(--color-accent)}.rm li.done .box svg{opacity:1}
.tag{font-size:var(--text-xs);font-family:var(--font-display);font-weight:500;padding:var(--space-3xs) var(--space-xs);border-radius:var(--radius-pill);background:var(--color-paper-3);color:var(--color-ink-2)}
.rm li.done .tag{background:var(--color-ink);color:var(--color-on-night)}
.msg{position:absolute;left:0;bottom:0;width:min(88%,330px);padding:var(--space-md)}
.msg-top{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--text-xs);color:var(--color-muted)}
.msg-top .av{width:26px;height:26px;border-radius:7px;background:var(--color-ink);display:grid;place-items:center}
.msg-top .av svg{width:16px;fill:var(--color-accent)}
.msg p{font-size:var(--text-sm);margin-top:var(--space-xs);color:var(--color-ink)}
.msg .ok{display:flex;gap:var(--space-xs);margin-top:var(--space-sm)}
.msg .ok span{font-size:var(--text-xs);font-family:var(--font-display);font-weight:600;padding:var(--space-2xs) var(--space-sm);border-radius:6px;background:var(--color-accent)}
.msg .ok span+span{background:var(--color-paper-3)}
.example{position:absolute;right:0;top:-28px;font-size:var(--text-xs);color:var(--color-muted)}

main>section:not(.hero){padding-top:var(--section-gap-s)}
.sec-head{max-width:760px;margin-bottom:var(--space-2xl)}
.sec-head h2{font-size:var(--text-section)}
.sec-head p:not(.kicker){color:var(--color-ink-2);margin-top:var(--space-md);max-width:58ch;font-size:var(--text-lead)}

.who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md)}
.who .card{padding:var(--space-lg);box-shadow:none;transition:border-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.who .card:hover{border-color:var(--color-ink);transform:translateY(-2px)}
.who h3{font-size:var(--text-title);margin:var(--space-md) 0 var(--space-xs)}
.who p{color:var(--color-ink-2);font-size:var(--text-sm)}
.who .ic{width:28px;height:28px}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--color-ink)}
.step{padding:var(--space-lg) var(--space-lg) var(--space-lg) 0;border-right:var(--rule-hair) solid var(--color-rule)}
.step+.step{padding-left:var(--space-lg)}
.step:last-child{border-right:0}
.step .n{font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);color:var(--color-muted);font-variant-numeric:tabular-nums}
.step .ic{display:block;margin:var(--space-lg) 0 var(--space-md);width:30px;height:30px}
.step h3{font-size:var(--text-xl)}
.step p{color:var(--color-ink-2);font-size:var(--text-sm);margin-top:var(--space-xs)}
.step small{display:flex;gap:var(--space-xs);align-items:baseline;margin-top:var(--space-md);font-size:var(--text-sm);font-weight:600;color:var(--color-ink)}
.step small::before{content:"";flex:none;width:8px;height:8px;background:var(--color-accent);box-shadow:0 0 0 1px var(--color-ink)}

.tabs{display:inline-flex;gap:var(--space-2xs);padding:var(--space-2xs);border-radius:12px;background:var(--color-paper-3);margin-bottom:var(--space-xl);flex-wrap:wrap}
.tabs button{font:600 var(--text-sm) var(--font-display);border:0;background:transparent;color:var(--color-ink-2);min-height:44px;padding:0 var(--space-lg);border-radius:9px;cursor:pointer;transition:background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.tabs button:hover{color:var(--color-ink)}
.tabs button[aria-selected="true"]{background:var(--color-card);color:var(--color-ink);box-shadow:0 1px 3px var(--color-shade)}
.tabs button:active{transform:translateY(1px)}
.tabs button:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.panel[hidden]{display:none}
.task{padding:var(--space-lg);box-shadow:none}
.task .before{font-size:var(--text-sm);color:var(--color-muted);text-decoration:line-through;text-decoration-color:var(--color-strike)}
.task .after{display:flex;gap:var(--space-xs);margin-top:var(--space-sm);font-weight:600}
.task .after .ic{color:var(--color-ink);background:var(--color-accent);border-radius:5px;padding:var(--space-3xs);width:20px;height:20px}

.gains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-columns);border-top:2px solid var(--color-ink);padding-top:var(--space-xl)}
.gains .g{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--text-display-s);line-height:1}
.gains .g::after{content:"";display:block;width:48px;height:6px;background:var(--color-accent);margin:var(--space-md) 0}
.gains p{color:var(--color-ink-2);max-width:30ch}
.night{background:var(--color-night);color:var(--color-on-night)}
main>section.pledge{margin-top:var(--section-gap-s);padding:var(--space-4xl) 0}
.pledge .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-3xl);align-items:start}
.pledge .big{width:120px;fill:var(--color-accent);margin-bottom:var(--space-xl);display:block}
.pledge h2{font-size:var(--text-display-s)}
.pledge .lead{color:var(--color-on-night-muted);margin-top:var(--space-lg);font-size:var(--text-lead);max-width:40ch}
.pl>div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--space-md);padding:var(--space-lg) 0;border-top:var(--rule-hair) solid var(--color-night-rule)}
.pl>div:last-child{border-bottom:var(--rule-hair) solid var(--color-night-rule)}
.pl .ic{width:28px;height:28px;color:var(--color-accent)}
.pl h3{font-size:var(--text-title)}
.pl p{color:var(--color-on-night-muted);margin-top:var(--space-2xs)}

.founder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-3xl);align-items:center}
.portrait{position:relative;aspect-ratio:4/5;border-radius:var(--radius-card);margin:0;border:var(--rule-hair) solid var(--color-rule)}
.slot-note{position:absolute;inset:auto var(--space-lg) var(--space-lg) var(--space-lg);color:var(--color-muted);font-size:var(--text-sm)}
.founder blockquote{margin:0;font-family:var(--font-display);font-weight:500;font-size:var(--text-2xl);line-height:1.25;text-wrap:balance}
.founder .sig{margin-top:var(--space-lg);color:var(--color-ink-2)}
.founder .sig b,.founder li b{color:var(--color-ink)}
.founder ul{list-style:none;margin:var(--space-xl) 0 0;padding:0;display:grid;gap:var(--space-sm)}
.founder li{display:flex;gap:var(--space-sm);align-items:baseline;color:var(--color-ink-2)}
.founder li .ic{width:18px;height:18px;color:var(--color-ink);transform:translateY(3px)}

.faq{max-width:860px}
.faq details{border-top:var(--rule-hair) solid var(--color-rule)}
.faq details:last-child{border-bottom:var(--rule-hair) solid var(--color-rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg);padding:var(--space-lg) 0;font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);transition:color var(--dur-short) var(--ease-out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:500;font-size:1.5rem;transition:transform var(--dur-short) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--color-ink-2)}
.faq summary:active{opacity:.8}
.faq details p{padding:0 0 var(--space-lg);color:var(--color-ink-2);max-width:64ch}

.close{margin-top:var(--section-gap-s);padding:var(--space-4xl) 0 var(--space-xl)}
.close .row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-2xl);align-items:end}
.close h2{font-size:var(--text-display-s)}
.close .lead{color:var(--color-on-night-muted);margin-top:var(--space-lg);font-size:var(--text-lead);max-width:42ch}
.contact{display:grid;gap:var(--space-md);justify-items:start}
.contact a.mail{font-size:var(--text-lg);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;transition:text-decoration-color var(--dur-short) var(--ease-out)}
.contact a.mail:hover{text-decoration-color:var(--color-accent)}
.contact a.mail:active{opacity:.8}
.foot{display:flex;justify-content:space-between;align-items:center;border-top:var(--rule-hair) solid var(--color-night-rule);margin-top:var(--space-3xl);padding-top:var(--space-lg);color:var(--color-on-night-muted);font-size:var(--text-sm)}
.foot .logo{height:22px}

.js .rv{opacity:0;transform:translateY(14px)}
@media (max-width:960px){
 :root{--gutter:20px}
 .hero .wrap,.pledge .wrap,.founder,.close .row{grid-template-columns:minmax(0,1fr)}
 .who,.panel,.steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .gains{grid-template-columns:minmax(0,1fr)}
 .step{border-right:0;padding-left:0!important;border-bottom:var(--rule-hair) solid var(--color-rule)}
 .nav ul li:not(:last-child){display:none}
 .stage{min-height:auto;padding-bottom:160px}
 .roadmap{margin:0}
}
@media (max-width:600px){.who,.panel,.steps{grid-template-columns:minmax(0,1fr)}.nav .btn{min-height:44px;padding:0 var(--space-md)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}.js .rv{opacity:1;transform:none}}