/* ============================================================
   ask-it — Direction artistique « orb »
   Deux sphères granuleuses qui se chevauchent :
   orange-rouge/magenta × pêche→lilas→teal, sur blanc chaud.
   Épuré, blanc dominant, grain en texture. Geist fin.
   ============================================================ */

:root{
  --flame  :#fc3d18;   /* orange-rouge vif */
  --magenta:#f5476f;   /* magenta          */
  --coral  :#f6a98a;   /* pêche            */
  --lilac  :#b9a8c4;   /* lilas            */
  --teal   :#7fc9c4;   /* teal calme       */
  --teal-deep:#3f8e89; /* teal lisible (texte) */
  --greige :#ddd7cd;   /* greige (accent)  */

  --linen  :#ffffff;   /* blanc chaud (fond) */
  --sand   :#f5f5f7;
  --ink    :#241f20;
  --ink-soft:#6c6560;
  --ink-faint:#a39c95;
  --line   :rgba(36,31,32,.12);
  --line-2 :rgba(36,31,32,.2);

  --paper  :#ffffff;
  --grain-opacity:.12;
  --orb-grain:.5;
  --title-weight:600;

  --maxw:1140px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Plus Jakarta Sans","Geist",system-ui,sans-serif;
  font-weight:400;font-size:18px;line-height:1.6;letter-spacing:-.005em;overflow-x:hidden;
}
::selection{background:var(--flame);color:#fff}

h1,h2,h3{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:var(--title-weight);letter-spacing:-.03em;line-height:1;margin:0;text-wrap:balance}
.display{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:clamp(3.1rem,8.4vw,8rem);font-weight:600 !important;letter-spacing:-.035em;line-height:.96}
.h1{font-size:clamp(2.5rem,5.6vw,5rem);letter-spacing:-.032em}
.h2{font-size:clamp(1.9rem,4vw,3.3rem)}
.h3{font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:-.02em;font-weight:300}
.lead{font-size:clamp(1.1rem,1.6vw,1.45rem);line-height:1.5;font-weight:300;letter-spacing:-.01em;color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
.faint{color:var(--ink-faint)}
p{margin:0}

.eyebrow{font-family:"Geist Mono",ui-monospace,monospace;font-weight:400;font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.7em;color:var(--ink-soft)}
.eyebrow .dot{width:.6em;height:.6em;border-radius:50%;border:1px solid currentColor;display:inline-block;position:relative;flex:none}
.eyebrow .dot::after{content:"";position:absolute;inset:24%;border-radius:50%;background:var(--flame)}
.mono{font-family:"Geist Mono",ui-monospace,monospace}

.text-orb{
  background:linear-gradient(118deg,var(--flame),var(--magenta) 50%,var(--teal-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}

.section{position:relative;padding:clamp(84px,13vh,160px) clamp(22px,5vw,60px)}
.wrap{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}
.wrap-narrow{max-width:780px;margin:0 auto;position:relative;z-index:2}
.section-head{margin-bottom:clamp(40px,7vh,84px)}
.section-head .eyebrow{margin-bottom:22px}
.divider{height:1px;background:var(--line);border:0;margin:0}
.grid{display:grid;gap:24px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.flex{display:flex}.wrap-flex{flex-wrap:wrap}.items-center{align-items:center}
.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.stack-sm{display:flex;flex-direction:column;gap:14px}

/* ---- grain ---- */
.mesh{position:relative;isolation:isolate;overflow:hidden}
.mesh > *{position:relative;z-index:2}
.mesh::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:var(--grain-opacity);mix-blend-mode:soft-light;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.mesh--hero{
  background:
    radial-gradient(36% 40% at 88% 16%,rgba(252,61,24,.09) 0%,rgba(252,61,24,0) 56%),
    radial-gradient(40% 46% at 8% 92%,rgba(127,201,196,.10) 0%,rgba(127,201,196,0) 58%),
    linear-gradient(150deg,#ffffff,#f4f4f6);
}
.mesh--soft{
  background:
    radial-gradient(40% 46% at 90% 12%,rgba(245,71,111,.06) 0%,rgba(245,71,111,0) 56%),
    radial-gradient(38% 44% at 8% 90%,rgba(127,201,196,.08) 0%,rgba(127,201,196,0) 58%),
    linear-gradient(150deg,#ffffff,#f4f4f6);
}
/* panneau clair chaud pour mettre les sphères en valeur */
.mesh--greige{background:linear-gradient(160deg,#f4f4f6,#ececef)}

/* ---- Les deux sphères qui se chevauchent (signature) ---- */
.orbs{position:relative;width:min(86vw,360px);aspect-ratio:360/520;margin:0 auto}
.orb{position:absolute;left:50%;width:84%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);
  isolation:isolate;overflow:hidden}
.orb::after{content:"";position:absolute;inset:0;opacity:var(--orb-grain);mix-blend-mode:overlay;
  background-size:140px 140px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.orb-top{top:0;background:radial-gradient(circle at 64% 32%,#ff6a2a 0%,#fc3d18 38%,#f5476f 88%)}
.orb-bot{bottom:0;mix-blend-mode:multiply;
  background:radial-gradient(circle at 48% 26%,#f6a98a 0%,#b9a8c4 46%,#7fc9c4 92%)}

/* ---- Buttons ---- */
.btn{appearance:none;border:0;cursor:pointer;font-family:inherit;font-size:1rem;font-weight:400;letter-spacing:-.01em;
  padding:14px 28px;border-radius:100px;display:inline-flex;align-items:center;gap:.5em;line-height:1;text-decoration:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s,color .3s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-flame{color:#fff;background:linear-gradient(118deg,var(--flame),var(--magenta))}
.btn-flame:hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(252,61,24,.5)}
.btn-ink{color:var(--linen);background:var(--ink)}
.btn-ink:hover{transform:translateY(-2px);background:#000}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn-outline:hover{transform:translateY(-2px);border-color:var(--ink)}
.btn-lg{padding:17px 34px;font-size:1.06rem}
.btn .arrow{transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ---- Badges ---- */
.badge{display:inline-flex;align-items:center;gap:.5em;font-family:"Geist Mono",ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:100px;line-height:1;white-space:nowrap}
.badge-flame{color:#fff;background:linear-gradient(118deg,var(--flame),var(--magenta))}
.badge-soft{color:var(--flame);background:rgba(252,61,24,.10)}
.badge-teal{color:#fff;background:var(--teal-deep)}
.badge-outline{color:var(--ink-soft);border:1px solid var(--line-2)}

/* ---- Inputs ---- */
.field{display:flex;flex-direction:column;gap:9px}
.field label{font-size:.85rem;color:var(--ink-soft)}
.input{font-family:inherit;font-size:1rem;color:var(--ink);padding:14px 18px;border-radius:14px;
  background:#fff;border:1px solid var(--line);width:100%;transition:border-color .25s,box-shadow .25s}
.input::placeholder{color:var(--ink-faint)}
.input:focus{outline:0;border-color:var(--flame);box-shadow:0 0 0 4px rgba(252,61,24,.13)}

/* ---- Cards ---- */
.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(36,31,32,.26)}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(22px,5vw,60px);background:rgba(251,248,243,.6);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--line)}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{color:var(--ink-soft);text-decoration:none;font-size:.95rem;transition:color .25s;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.wordmark{font-weight:300;letter-spacing:-.035em;font-size:1.3rem;color:var(--ink);display:inline-flex;align-items:center}
.wordmark .orb-dot{width:.56em;height:.56em;border-radius:50%;margin:0 .05em;
  background:radial-gradient(circle at 36% 28%,#ff6a2a,#fc3d18 50%,#7fc9c4);display:inline-block}
.wordmark .reg{font-size:.5em;vertical-align:super;margin-left:.12em;color:var(--flame);font-weight:500}

/* ---- Apple-style utilities ---- */
.center{text-align:center}
.klink{color:var(--flame);text-decoration:none;font-weight:400;display:inline-flex;gap:.4em;align-items:center;
  font-size:1.05rem;transition:gap .3s var(--ease)}
.klink .ar{transition:transform .3s var(--ease)}
.klink:hover .ar{transform:translateX(4px)}
.klink-teal{color:var(--teal-deep)}
.feat{border-top:1px solid var(--line);padding-top:26px}
.feat .ix{font-family:"Geist Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.feat h3{margin-top:16px}
.feat p{margin-top:12px;color:var(--ink-soft);font-size:.98rem}

/* mock diagnostic UI */
.mock{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:0 30px 70px -40px rgba(36,31,32,.4)}
.mock-row{display:flex;align-items:center;gap:10px}
.mock-orb{width:30px;height:30px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 36% 28%,#ff6a2a,#fc3d18 52%,#7fc9c4)}
.bubble{background:var(--sand);border-radius:16px;border-top-left-radius:5px;padding:14px 16px;font-size:.96rem;color:var(--ink);max-width:90%}
.chip{display:inline-flex;align-items:center;padding:9px 15px;border-radius:100px;border:1px solid var(--line-2);
  font-size:.9rem;color:var(--ink);background:#fff;cursor:pointer;transition:border-color .25s,background .25s}
.chip:hover{border-color:var(--flame);background:rgba(252,61,24,.04)}
.chip.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.result-row{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:14px;background:rgba(127,201,196,.12);color:var(--teal-deep);font-size:.94rem}

/* big stat */
.stat-xl{font-weight:600 !important;font-size:clamp(5rem,17vw,14rem);letter-spacing:-.04em;line-height:.82}

/* integrations row */
.int-row{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;justify-content:center}
.int-row span{font-weight:300;font-size:1.3rem;letter-spacing:-.02em;color:var(--ink-faint)}

/* ---- Swatches ---- */
.swatch-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.swatch{aspect-ratio:2.6/4;display:flex;flex-direction:column;justify-content:flex-end;padding:16px}
.swatch .hex{font-family:"Geist Mono",ui-monospace,monospace;font-size:.72rem}
.swatch .nm{font-size:.72rem;opacity:.78;margin-top:2px}

/* ---- Reveal ---- */
.fade-up{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 14%}
  }
}

@media (max-width:860px){
  .cols-2,.cols-3{grid-template-columns:1fr}
  .swatch-grid{grid-template-columns:repeat(4,1fr)}
  .nav-links{display:none}
  .hero-grid{grid-template-columns:1fr !important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}