/* Distill — « Built for people. Read by machines. » */

@font-face{font-family:"Inter";src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/fonts/newsreader.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/fonts/newsreader-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plex-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#EEF0F2; --ink:#0F1115; --body:#2A2E35; --muted:#8B9098; --code:#7A7F88; --comment:#B3B8BF;
  --hot:#FF5A1F; --hot-soft:#FFE1D3;
  --cw:46vw; --ch:52vh; --gap:4.75vw; --top:40.2vh;
  --sans:"Inter",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
p,h1,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--hot);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.stage{position:absolute;inset:0;overflow:hidden}

/* ── Nav ─────────────────────────────────────────── */
.nav{position:relative;z-index:5;height:56px;padding:0 20px;display:flex;align-items:center;gap:56px}
.logo{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;font-size:23px;letter-spacing:-.035em;line-height:1}
.logo svg{flex:none}
.logo .hl{stroke:var(--bg)}
.links{display:flex;align-items:center;gap:38px}
.links a{display:flex;align-items:center;gap:6px;font-weight:500;font-size:13px;color:var(--body)}
.chev{opacity:.7}
.right{margin-left:auto;display:flex;align-items:center;gap:20px;font-weight:500;font-size:12.5px;color:var(--body)}
.lang{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);transition:color .2s}
.lang:hover{color:var(--ink)}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;white-space:nowrap}
.pill--ghost{height:32px;padding:0 17px;border:1px solid #C4C9CF;background:rgba(255,255,255,.35);color:var(--ink)}
.pill--hot{height:32px;padding:0 17px;background:var(--hot);color:#fff}

/* ── Hero ────────────────────────────────────────── */
.hero{position:relative;z-index:5;display:grid;grid-template-columns:1fr 34vw;gap:4vw;padding:30px 8.9vw 0;align-items:end}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--body)}
.hero h1{margin-top:14px;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3vw,58px);line-height:1.05;letter-spacing:-.025em;color:var(--ink)}
.hero h1 em{font-style:italic}
.lede{font-size:clamp(14px,1.05vw,19px);line-height:1.55;color:var(--body);max-width:34vw}
.cta{margin-top:20px;height:40px;padding:0 22px;font-weight:500;font-size:13px;transition:transform .35s var(--ease)}
.cta:hover{transform:translateY(-2px)}

/* ── Belt ────────────────────────────────────────── */
.belt{position:absolute;left:0;width:100%;top:calc(var(--top) - 70px);height:calc(var(--ch) + 140px);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;column-gap:var(--gap)}
.belt.is-drag{cursor:grabbing}
.codes,.cards{position:absolute;inset:0}
.codes{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24vw);mask-image:linear-gradient(90deg,transparent 0,#000 24vw)}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.card,.code{position:absolute;top:70px;left:0;width:var(--cw);height:var(--ch);transform:translate3d(100vw,0,0)}

/* code twin */
.code{overflow:hidden;white-space:pre;container-type:inline-size;visibility:hidden}
.code .html,.code .meta{position:absolute;top:0;font-family:var(--mono);font-weight:400;font-size:1.56cqw;line-height:1.39}
.code .html{left:0;color:var(--code)}
.code .meta{left:51%;color:var(--comment)}

/* ── Scanner ─────────────────────────────────────── */
.scan{position:absolute;z-index:4;left:50%;top:calc(var(--top) - 14px);height:calc(var(--ch) + 40px);width:0;pointer-events:none}
.scan i{position:absolute;left:-2px;top:0;bottom:0;width:4px;border-radius:4px;
  background:linear-gradient(180deg,#ff7a3c 0,#FF5A1F 12%,#FF5A1F 88%,#ff7a3c 100%);
  box-shadow:0 0 10px 2px rgba(255,90,31,.85),0 0 34px 10px rgba(255,90,31,.38)}
.scan b{position:absolute;left:0;top:4%;height:92%;width:42px;background:linear-gradient(90deg,rgba(255,110,50,.55),rgba(255,110,50,0));filter:blur(6px)}

/* ── Counter ─────────────────────────────────────── */
.badge{position:absolute;z-index:6;left:50%;top:calc(var(--top) - 60px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none}
.badge__label{font-size:11.5px;line-height:1;color:var(--muted);white-space:nowrap}
.badge__pill{display:flex;height:26px;border-radius:999px;overflow:hidden;box-shadow:0 0 18px rgba(255,90,31,.35);font-family:var(--mono);font-weight:500;font-size:12.5px;white-space:nowrap}
.badge__num{display:flex;align-items:center;justify-content:flex-end;min-width:8.2ch;padding:0 11px 0 13px;background:var(--hot);color:#fff;font-variant-numeric:tabular-nums}
.badge__pct{display:flex;align-items:center;padding:0 12px 0 10px;background:var(--hot-soft);color:#D9430F;font-size:11px}

/* ── Kessler cards ───────────────────────────────── */
.card{border-radius:1.6vw;overflow:hidden;color:#fff;font-family:var(--sans);container-type:inline-size;will-change:transform,clip-path;user-select:none;-webkit-user-select:none}
.card p,.card ul{margin:0}
.ph,.veil{position:absolute;inset:0}
.ph,.tile,.thumb{background-size:cover;background-position:center}
.ph-dunes{background-image:url(https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/0e201fcd-ffc0-46a0-bd06-faa07bf0e84b.webp)}
.ph-foundry{background-image:url(https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/e80ba08d-d7b6-4b27-b0cd-8d0ad09c788c.webp)}
.ph-mineral{background-image:url(https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/2bebad68-8177-446a-9550-d64074166364.webp)}
.ph-mesa{background-image:url(https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/62b0d7c1-3eb7-44bd-9b19-57b975fb250f.webp)}
.ph-fire{background-image:url(https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/156ff74d-ee37-4443-8f3a-11ae2095ed4c.webp)}
.ph-saltflat{background-image:url(https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/7b6ad638-89ec-4dec-be74-d36fbff3ea53.webp)}

/* shared header */
.k-nav{position:absolute;z-index:2;left:4.4cqw;right:4.4cqw;top:4cqw;display:flex;align-items:center;justify-content:space-between}
.k-logo{display:flex;align-items:center;gap:1.3cqw;font-weight:500;font-size:4.6cqw;letter-spacing:-.03em;line-height:1}
.k-logo svg{width:5.4cqw;height:4.2cqw;flex:none}
.k-menu{display:flex;align-items:center;gap:3.4cqw;font-weight:500;font-size:1.32cqw;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.k-menu .on{border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:.7cqw 1.6cqw;margin:-.7cqw -1.6cqw}
.card > :not(.ph):not(.veil){position:absolute;z-index:2}

/* 1 · home */
.k-home .veil{background:linear-gradient(180deg,rgba(20,10,4,.25) 0,rgba(20,10,4,0) 30%,rgba(20,10,4,.55) 100%)}
.h-stats{left:4.4cqw;bottom:4.4cqw;display:flex;gap:4cqw}
.h-stats b{display:block;font-weight:300;font-size:9cqw;line-height:.9;letter-spacing:-.04em}
.h-stats span{display:block;margin-top:1.2cqw;font-size:1.9cqw;opacity:.9}
.h-stats .rule{width:1px;background:rgba(255,255,255,.35)}
.h-tag{right:4.4cqw;bottom:4.4cqw;width:24cqw;font-size:2.2cqw;line-height:1.3}

/* 2 · price */
.k-price{color:#2A1406;background:radial-gradient(120% 90% at 20% 110%,#FF6A1F 0,#FF9A4A 35%,#F7C79A 62%,#EFD9C4 100%)}
.k-price .k-menu .on{border-color:rgba(42,20,6,.5)}
.p-amount{left:4.4cqw;top:38%;font-weight:300;font-size:13cqw;line-height:1;letter-spacing:-.05em}
.p-amount .cur{font-size:.4em;vertical-align:top;line-height:1.5;margin-right:.08em;letter-spacing:0}
.p-per{left:4.8cqw;top:62%;font-family:var(--mono);font-size:1.6cqw;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.p-plans{right:4.4cqw;top:38%;width:36cqw}
.p-plans li{display:flex;justify-content:space-between;padding:1.5cqw 0;border-top:1px solid rgba(42,20,6,.25);font-size:1.9cqw}
.p-plans li span:last-child{font-variant-numeric:tabular-nums}
.p-start{left:4.4cqw;bottom:4.4cqw;padding:1.3cqw 2.6cqw;border-radius:999px;background:#2A1406;color:#F7E6D6;font-weight:500;font-size:1.7cqw}

/* 3 · case */
.k-case .ph{filter:blur(1.4cqw) saturate(1.1);transform:scale(1.12)}
.k-case .veil{background:linear-gradient(180deg,rgba(25,14,8,.15),rgba(25,14,8,.55))}
.c-kicker{left:4.4cqw;top:17%;font-family:var(--mono);font-size:1.4cqw;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.c-title{left:4.4cqw;top:24%;width:56cqw;font-family:var(--serif);font-size:4.6cqw;line-height:1.08;letter-spacing:-.015em}
.c-stats{left:4.4cqw;right:4.4cqw;bottom:4.4cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw}
.c-stats div{border-top:1px solid rgba(255,255,255,.35);padding-top:1.5cqw}
.c-stats b{display:block;font-weight:300;font-size:6cqw;line-height:1;letter-spacing:-.04em}
.c-stats span{display:block;margin-top:.9cqw;font-size:1.7cqw;opacity:.85}

/* 4 · vision */
.k-vision{background:#1B1311}
.v-row{left:4.4cqw;right:4.4cqw;top:21%;height:46%;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:2cqw}
.tile{border-radius:1.4cqw}
.v-quote{align-self:end;padding-left:1cqw;font-family:var(--serif);font-size:3.4cqw;line-height:1.1;letter-spacing:-.01em}
.v-quote em{opacity:.75}
.v-foot{left:4.4cqw;right:4.4cqw;bottom:4.4cqw;display:flex;justify-content:space-between;align-items:flex-end}
.v-title{font-size:2.4cqw;line-height:1.2;letter-spacing:-.015em}
.v-meta{font-size:1.6cqw;opacity:.7}

/* 5 · alloy */
.k-alloy{background:#140C08}
.k-alloy .ph{filter:blur(.6cqw);transform:scale(1.06)}
.k-alloy .veil{background:linear-gradient(90deg,rgba(14,8,5,0) 45%,rgba(14,8,5,.45) 100%)}
.a-title{left:4.4cqw;bottom:4.4cqw;font-family:var(--serif);font-size:7.4cqw;line-height:.98;letter-spacing:-.03em}
.a-spec{right:4.4cqw;bottom:4.4cqw;width:28cqw} /* 30cqw dans le prompt : le titre la chevauchait */
.a-spec li{display:flex;justify-content:space-between;padding:1.2cqw 0;border-top:1px solid rgba(255,255,255,.3);font-size:1.7cqw}
.a-spec li span:first-child{opacity:.7}

/* 6 · journal */
.k-journal{background:#E9ECF1;color:#121A2A}
.k-journal .k-menu{opacity:.7}
.k-journal .k-menu .on{border-color:rgba(18,26,42,.5)}
.j-title{left:4.4cqw;top:23%;font-family:var(--serif);font-size:5.6cqw;line-height:1;letter-spacing:-.02em}
.j-title em{color:#46618E}
.j-posts{left:4.4cqw;right:4.4cqw;bottom:4.4cqw;display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:2.4cqw;align-items:end}
.thumb{aspect-ratio:4/3;border-radius:1.2cqw}
.j-k{margin-top:1.2cqw!important;font-family:var(--mono);font-size:1.2cqw;letter-spacing:.1em;text-transform:uppercase;color:#6A7891}
.j-t{margin-top:.5cqw!important;font-weight:500;font-size:1.7cqw;line-height:1.25;letter-spacing:-.01em}

/* ── Phone ───────────────────────────────────────── */
@media (max-width:767px){
  :root{--cw:84vw;--ch:54vw;--gap:7vw;--top:54svh}
  .nav{padding:0 16px;gap:16px}
  .links,.signin,.trial{display:none}
  .right{gap:16px}
  .book{height:30px;padding:0 13px;font-size:12px}
  .hero{grid-template-columns:1fr;gap:14px;padding:18px 20px 0;align-items:start}
  .hero h1{font-size:34px}
  .lede{font-size:14px;max-width:none}
  .cta{margin-top:14px}
  .codes{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30vw);mask-image:linear-gradient(90deg,transparent 0,#000 30vw)}
}
@media (max-width:767px) and (max-height:700px){
  :root{--top:58svh}
}