/* Whisperwood Narrator Engine — landing brief
   ---------------------------------------------------------------
   CSS imported from the darkvalley-website mockup (palette + grammar
   alignée sur darkvalley.fr live). Whisperwood = page produit de la suite,
   donc même langue visuelle.
*/

:root{
  --teal:#668C82;--teal-d:#3d5f57;--teal-l:#8fbeb3;
  --mint:#B5D4C8;--beige:#E8E4DE;--beige2:#f0ece4;
  --paper:#f8f5ef;--gold:#D4AF37;--gold-l:#e8cd6a;
  --ink:#131815;--ink2:#374039;--ink3:#6b7a74;
  --line:rgba(19,24,21,.1);--lsoft:rgba(19,24,21,.06);
  --sans:'DM Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:90px;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* a11y skip link — hidden until keyboard-focused */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 20px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

/* Focus rings — visible only on keyboard nav */
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px;}

/* ── HEADER ───────────────────────────────────── */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 40px;
  transition:background .4s,border-color .4s;
}
/* Brand pill aligné sur la famille .btn-hero-fill / .hdr-cta : même opacités
   bg/border, même backdrop-blur. Cohérence visuelle des éléments cliquables
   du header + hero. */
.brand{display:flex;align-items:center;background:rgba(255,255,255,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.30);border-radius:999px;padding:6px 16px 6px 8px;gap:10px;transition:background .3s,border-color .3s;}
.brand:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45);}
.brand-text{display:flex;flex-direction:column;line-height:1.05;}
.brand-sigil{width:34px;height:34px;flex-shrink:0;border-radius:22.5%;filter:drop-shadow(0 0 4px rgba(143,190,179,.30));}
.brand-name{font-family:var(--sans);font-weight:500;font-size:16px;color:#fff;letter-spacing:-.005em;line-height:1.05;}
.brand-tag{font-family:var(--mono);font-size:9.5px;font-weight:400;color:rgba(255,255,255,.55);letter-spacing:.16em;text-transform:uppercase;line-height:1.05;}

.hdr-right{display:flex;align-items:center;gap:8px;}
.nav{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:4px;height:42px;box-sizing:border-box;}
.nav a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);padding:7px 16px;border-radius:999px;transition:background .2s,color .2s;white-space:nowrap;}
.nav a:hover{color:#fff;background:rgba(255,255,255,.18);}
/* CTA header aligné sur .btn-hero-fill (même famille glass-light) — avant
   c'était une variante dark (.20 ink) qui dénotait avec brand+btn-hero. */
.hdr-cta{display:inline-flex;align-items:center;gap:8px;padding:0 22px;height:42px;background:rgba(255,255,255,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.30);color:#fff;border-radius:999px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:background .3s,border-color .3s;white-space:nowrap;}
.hdr-cta:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45);}
.burger{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:6px;}

/* ── HERO — plein écran sombre + blobs aurora (thème forêt enchantée) ─── */
.hero{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:#0a1810;
}
.blob{position:absolute;border-radius:50%;will-change:transform;mix-blend-mode:screen;}
/* b1 — vert mousse profond, top right (canopée éclairée) */
.b1{width:75vw;height:75vw;background:radial-gradient(circle at 50% 50%,rgba(60,220,170,.95) 0%,rgba(30,160,120,.6) 35%,transparent 60%);top:-15%;right:-5%;filter:blur(48px);animation:b1 3.5s ease-in-out infinite alternate;}
/* b2 — lime/jaune-vert, soleil filtré entre branches */
.b2{width:55vw;height:55vw;background:radial-gradient(circle at 50% 50%,rgba(155,238,115,.9) 0%,rgba(90,190,70,.5) 40%,transparent 65%);top:15%;left:30%;filter:blur(42px);animation:b2 4.5s ease-in-out infinite alternate;}
/* b3 — vert sapin sombre + brume, sous-bois */
.b3{width:60vw;height:60vw;background:radial-gradient(circle at 50% 50%,rgba(74,103,65,.85) 0%,rgba(30,55,42,.45) 45%,transparent 68%);top:-5%;left:-5%;filter:blur(70px);animation:b3 3s ease-in-out infinite alternate;}
/* b4 — ambre/or, crépuscule (heure du gloaming) */
.b4{width:45vw;height:45vw;background:radial-gradient(circle at 50% 50%,rgba(235,200,75,.85) 0%,rgba(160,120,20,.3) 45%,transparent 68%);bottom:10%;right:10%;filter:blur(55px);animation:b4 4s ease-in-out infinite alternate;}
/* b5 — mint/brume basse, halo intime */
.b5{width:40vw;height:40vw;background:radial-gradient(circle at 50% 50%,rgba(50,140,110,.6) 0%,rgba(30,90,70,.15) 45%,transparent 55%);top:25%;left:5%;filter:blur(38px);animation:b5 2.5s ease-in-out infinite alternate;}
.b6{width:100vw;height:55vw;background:radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.80) 0%,rgba(0,0,0,.65) 25%,rgba(0,0,0,.20) 50%,transparent 75%);bottom:-5%;left:0;pointer-events:none;}

/* Silhouettes d'arbres en bas — évoque les pins en lisière */
/* viewBox `0 270 1920 330` (au lieu de `0 0 1920 600`) supprime le sky vide
   au-dessus des pines dans le SVG. Ratio nouveau SVG 5.82:1 vs band ~7:1
   sur hero 960px = quasiment pas de cropping. Combine avec height 28→34%
   pour donner les ~330px de hauteur naturelle de la SVG. */
.hero-trees{position:absolute;bottom:0;left:0;right:0;height:34%;pointer-events:none;z-index:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 270 1920 330' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23000' fill-opacity='0.85'%3E%3Cpath d='M0 600 V450 L40 380 L60 460 L80 350 L120 470 L140 400 L170 320 L195 460 L210 380 L230 290 L260 470 L290 400 L320 320 L350 470 L370 380 L400 280 L430 470 L460 400 L490 340 L520 470 L550 380 L580 270 L610 470 L640 380 L670 310 L700 470 L730 380 L760 280 L790 470 L820 400 L850 320 L880 470 L910 380 L940 270 L970 470 L1000 380 L1030 320 L1060 470 L1090 400 L1120 290 L1150 470 L1180 380 L1210 320 L1240 470 L1270 380 L1300 280 L1330 470 L1360 400 L1390 320 L1420 470 L1450 380 L1480 270 L1510 470 L1540 380 L1570 320 L1600 470 L1630 400 L1660 290 L1690 470 L1720 380 L1750 320 L1780 470 L1810 380 L1840 270 L1870 470 L1900 380 L1920 350 L1920 600 Z'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:bottom center;background-size:cover;opacity:.55;
  /* Fade le sol plat des sapins dans le hero — évite la coupe horizontale visible
     contre la marquee (le SVG a un sol plat à y=600 qui se voyait comme une bande). */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%);
}
@keyframes b1{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-18%,20%) scale(1.25);}}
@keyframes b2{0%{transform:translate(0,0) scale(1);}100%{transform:translate(18%,-16%) scale(.8);}}
@keyframes b3{0%{transform:translate(0,0) scale(1);}100%{transform:translate(20%,14%) scale(1.22);}}
@keyframes b4{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-16%,-20%) scale(1.28);}}
@keyframes b5{0%{transform:translate(0,0) scale(1);}100%{transform:translate(15%,20%) scale(.82);}}
.hero-noise{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px;}

.hero-content{position:relative;z-index:2;padding:0 48px 64px;max-width:1520px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:0;}
.hero-h{font-family:var(--sans);font-weight:300;font-size:clamp(64px,7vw,100px);line-height:.92;letter-spacing:-.03em;color:#fff;max-width:900px;margin-bottom:56px;}
.hero-h em{font-style:italic;font-weight:300;color:var(--mint);letter-spacing:-.04em;}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;}
.hero-lede{max-width:520px;}
.hero-lede p{font-size:16px;color:rgba(255,255,255,.78);line-height:1.6;}
.hero-lede .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:12px;}
.hero-actions{display:flex;align-items:center;gap:12px;}
.btn-hero{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-size:14px;font-weight:500;}
.btn-hero-fill{background:rgba(255,255,255,.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);color:#fff;transition:background .3s,border-color .3s;}
.btn-hero-fill:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.5);}
.btn-hero-out{border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.75);transition:border-color .3s,color .3s;backdrop-filter:blur(6px);}
.btn-hero-out:hover{border-color:rgba(255,255,255,.6);color:#fff;}

/* ── MARQUEE ──────────────────────────────────── */
.marquee{overflow:hidden;padding:14px 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.mtrack{display:flex;gap:48px;white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);animation:scroll 50s linear infinite;}
.mtrack .sep{color:var(--teal);}
@keyframes scroll{to{transform:translateX(-50%);}}

/* ── SECTIONS ─────────────────────────────────── */
.wrap{max-width:1200px;margin:0 auto;padding:0 48px;}
.section{padding:100px 40px;max-width:1520px;margin:0 auto;}

.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:8px;margin-bottom:20px;}
.dot{display:inline-block;width:9px;height:9px;background:var(--teal);border-radius:1px;flex-shrink:0;animation:dot-pulse 3s ease-in-out infinite;}
@keyframes dot-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.85);}}
@media (prefers-reduced-motion: reduce){.dot{animation:none;}}

.dh{font-family:var(--sans);font-weight:300;font-size:clamp(44px,5.5vw,76px);line-height:1.05;letter-spacing:-.025em;color:var(--ink);margin-bottom:32px;}
.dh .fd{color:var(--mint);}
.dh .grad{background:linear-gradient(135deg,var(--teal),var(--mint) 60%,#a0e060);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ── CONCEPT ──────────────────────────────────── */
.concept-sec{padding:120px 0 100px;background:var(--paper);}
.concept-sec p{font-size:17px;color:var(--ink2);line-height:1.75;max-width:780px;margin-bottom:18px;}
.concept-sec .lead{font-size:20px;color:var(--ink);font-weight:400;line-height:1.6;}

/* ── ENGINES (3 cards) ────────────────────────── */
.engines-sec{padding:100px 0;background:#eeecea;}
.engines-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px;}
.sc{padding:32px;border-radius:14px;display:flex;flex-direction:column;gap:16px;transition:transform .35s,box-shadow .35s;}
.sc:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(19,24,21,.08);}
.sc-lt{background:#fff;border:1px solid var(--lsoft);}
.sc-md{background:#cde3d8;}
.sc-dk{background:#1e3530;color:#fff;}
.sc-dk h3,.sc-dk p,.sc-dk li{color:#fff;}
.sc-dk .ctag,.sc-dk .clink{color:rgba(255,255,255,.65);}
.sc-dk .cfoot{border-top-color:rgba(255,255,255,.12);}
.sc-dk .dot{background:#fff;}

.chd{display:flex;justify-content:space-between;align-items:center;}
.ctag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);display:flex;align-items:center;gap:6px;}
.cnum{font-family:var(--mono);font-size:10px;color:var(--ink3);}
.sc h3{font-size:24px;font-weight:400;line-height:1.2;}
.sc-meta{list-style:none;padding:0;margin:0;font-size:13.5px;color:var(--ink2);display:flex;flex-direction:column;gap:8px;}
.sc-dk .sc-meta{color:rgba(255,255,255,.78);}
.sc-meta li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--lsoft);font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;}
.sc-dk .sc-meta li{border-bottom-color:rgba(255,255,255,.1);}
.sc-meta li:last-child{border-bottom:0;}
.sc-meta strong{font-weight:500;color:var(--teal);}
.sc-dk .sc-meta strong{color:var(--mint);}
.sc p{font-size:14.5px;line-height:1.6;color:var(--ink2);}

/* ── COMMENT ÇA MARCHE (3 steps) ─────────────── */
.howto-sec{padding:100px 0;background:#eeecea;}
.howto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px;position:relative;}
.howto-grid::before{content:'';position:absolute;left:14%;right:14%;top:54px;height:1px;background:linear-gradient(90deg,transparent 0%,var(--mint) 30%,var(--mint) 70%,transparent 100%);opacity:.6;z-index:0;pointer-events:none;}
.howto-card{position:relative;z-index:1;padding:32px 28px;background:#fff;border:1px solid var(--lsoft);border-radius:14px;display:flex;flex-direction:column;gap:14px;transition:transform .35s,box-shadow .35s;}
.howto-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(19,24,21,.07);}
.howto-head{display:flex;align-items:center;justify-content:space-between;}
.howto-num{font-family:var(--sans);font-weight:300;font-size:48px;line-height:1;color:var(--mint);letter-spacing:-.02em;}
.howto-icon{width:48px;height:48px;color:var(--teal);opacity:.85;}
.howto-icon svg{width:100%;height:100%;}
.howto-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-top:6px;}
.howto-card h3{font-family:var(--sans);font-size:20px;font-weight:500;line-height:1.25;color:var(--ink);}
.howto-card p{font-size:14.5px;color:var(--ink2);line-height:1.65;}
.howto-card code{font-family:var(--mono);font-size:13px;color:var(--teal-d);background:rgba(102,140,130,.08);padding:2px 8px;border-radius:4px;letter-spacing:0;}
@media(max-width:900px){.howto-grid{grid-template-columns:1fr;}.howto-grid::before{display:none;}}

/* ── INTEGRATIONS (pills) ─────────────────────── */
.integ-sec{padding:100px 0;background:var(--paper);}
.integ-sec p{font-size:16px;color:var(--ink2);max-width:680px;line-height:1.65;margin-bottom:24px;}
.pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0;}
.pills li{padding:10px 20px;background:#fff;border:1px solid var(--lsoft);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);transition:border-color .2s,color .2s,background .2s;}
.pills li:hover{border-color:var(--teal);color:var(--ink);background:#fff;}
.pills code{font-family:var(--mono);font-size:10.5px;color:var(--teal);}

/* Grouped pills — 3 categories under integrations section */
.pills-groups{display:flex;flex-direction:column;gap:24px;margin-top:32px;}
.pills-group{display:flex;flex-direction:column;gap:10px;}
.pills-group h4{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:500;}

/* ── SUITE GRID ───────────────────────────────── */
/* Couleurs canoniques produits — sourcées de mockup index suite Darkvalley */
.suite-sec{padding:80px 0 100px;background:#eeecea;}
.suite-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px;}
.sg-card{
  display:flex;align-items:center;gap:18px;padding:18px 22px;
  background:#fff;border:1px solid var(--lsoft);border-radius:14px;
  transition:transform .3s,box-shadow .3s,border-color .3s;
  --c:var(--teal);--c-deep:var(--teal-d);--c-soft:rgba(102,140,130,.12);
  position:relative;overflow:hidden;
}
.sg-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--c) 0%,var(--c-deep) 100%);
  opacity:.85;
}
.sg-card:hover{transform:translateY(-3px);box-shadow:0 14px 40px var(--c-soft);border-color:var(--c);}

/* Carton gris : fond paper-tinted subtle, le squircle iOS apporte sa propre couleur */
.sg-logobox{
  width:64px;height:64px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(19,24,21,.04);
  border-radius:14px;padding:6px;
  transition:background .25s;
}
.sg-card:hover .sg-logobox{background:var(--c-soft);}
.sg-logo{width:100%;height:100%;object-fit:contain;border-radius:11px;filter:drop-shadow(0 2px 6px rgba(19,24,21,.12));}
.sg-meta{display:flex;flex-direction:column;gap:3px;min-width:0;}
.sg-code{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-deep);font-weight:500;}
.sg-name{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink);line-height:1.25;}
.sg-domain{font-size:12.5px;color:var(--ink3);line-height:1.4;}

/* Couleurs canoniques par produit (cf. mockup-index suite Darkvalley) */
.sg-of   {--c:#FF7A1A;--c-deep:#c44500;--c-soft:rgba(255,122,26,.12);}
.sg-sw   {--c:#8AAED0;--c-deep:#3D6E9C;--c-soft:rgba(138,174,208,.18);}
.sg-fse  {--c:#FFC107;--c-deep:#A87800;--c-soft:rgba(255,193,7,.12);}
.sg-hape {--c:#10B981;--c-deep:#047857;--c-soft:rgba(16,185,129,.12);}
.sg-impe {--c:#3B82F6;--c-deep:#1D4ED8;--c-soft:rgba(59,130,246,.12);}

/* WNE self : carton mint/teal gradient + label "vous êtes ici"
   Hover désactivé : c'est une carte informative ("vous êtes ici"), pas un lien. */
.sg-card.sg-self{
  --c:var(--teal);--c-deep:var(--teal-d);--c-soft:rgba(143,190,179,.22);
  background:linear-gradient(135deg,rgba(143,190,179,.20) 0%,rgba(143,190,179,.05) 100%);
  border-color:var(--mint);
  cursor:default;
}
.sg-card.sg-self:hover{transform:none;box-shadow:none;border-color:var(--mint);}
.sg-card.sg-self:hover .sg-logobox{background:rgba(19,24,21,.04);}
.sg-card.sg-self .sg-name{color:var(--teal-d);}
.sg-card.sg-self::before{opacity:1;}
.sg-sigil{width:100%;height:100%;border-radius:22.5%;}

/* Lore section emphasis — was inline style, extracted for consistency */
.lore-em{color:var(--mint);font-weight:500;}

/* Footer brand row — was inline style */
.ftr-brand-row{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
.ftr-brand-row img{width:40px;height:40px;border-radius:22.5%;}
.ftr-brand-row-text{display:flex;flex-direction:column;}
.ftr-suite-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.ftr-suite-link img{height:22px;filter:brightness(0) invert(1);opacity:.55;}
.ftr-tailnet{color:rgba(255,255,255,.4);}

/* ── FOOTER ───────────────────────────────────── */
.ftr{padding:56px 0 28px;background:#1e3528;color:#fff;}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:36px;}
.ftr-brand{display:flex;flex-direction:column;gap:14px;}
.ftr-brand .name{font-family:var(--sans);font-size:22px;font-weight:400;color:#fff;letter-spacing:-.01em;}
.ftr-brand .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--mint);text-transform:uppercase;}
.ftr-brand p{color:rgba(255,255,255,.6);max-width:340px;font-size:13.5px;line-height:1.6;}
.ftr-col h5{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:14px;}
.ftr-col ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.ftr-col a{color:rgba(255,255,255,.7);font-size:14px;transition:color .2s;}
.ftr-col a:hover{color:var(--mint);}
.ftr-bot{display:flex;justify-content:space-between;align-items:center;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.35);}
.ftr-bot a{color:#a0e060;}

/* Legal block (providers + privacy + trademarks) — discreet under .ftr-bot */
.ftr-legal{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);}
.ftr-legal p{font-size:11.5px;line-height:1.65;color:rgba(255,255,255,.40);margin-bottom:8px;}
.ftr-legal p:last-child{margin-bottom:0;}
.ftr-legal-providers{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:rgba(255,255,255,.50);}
.ftr-legal-privacy{font-size:11.5px;color:rgba(255,255,255,.36);}

/* Status pill — small live health indicator in footer */
.status-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.55);}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5e665e;flex-shrink:0;}
.status-pill.live .status-dot{background:#7CA982;box-shadow:0 0 8px rgba(124,169,130,.6);animation:status-blink 2.5s ease-in-out infinite;}
.status-pill.down .status-dot{background:#e87060;animation:none;}
@keyframes status-blink{0%,100%{opacity:1;}50%{opacity:.5;}}
@media (prefers-reduced-motion: reduce){.status-pill.live .status-dot{animation:none;}}

/* ── UNIVERS / LORE (sylvan) ─────────────────── */
.lore-sec{padding:120px 0;background:#1a2820;color:#fff;position:relative;overflow:hidden;}
.lore-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(74,103,65,.4) 0%,transparent 55%),radial-gradient(ellipse at 80% 80%,rgba(143,190,179,.15) 0%,transparent 55%);pointer-events:none;}
.lore-grid{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:start;}
.lore-h{font-family:var(--sans);font-weight:300;font-size:clamp(40px,5vw,68px);line-height:1.05;letter-spacing:-.025em;color:#fff;}
.lore-h em{font-style:italic;font-weight:300;color:var(--mint);font-family:'DM Sans',serif;}
.lore-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);margin-bottom:18px;}
.lore-body p{font-size:16px;color:rgba(255,255,255,.78);line-height:1.7;margin-bottom:18px;}
.lore-body p:last-child{margin-bottom:0;}
.lore-refs{margin-top:24px;padding:20px;background:rgba(255,255,255,.04);border-left:2px solid var(--mint);border-radius:0 8px 8px 0;}
.lore-refs span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.5);text-transform:uppercase;display:block;margin-bottom:6px;}
.lore-refs em{font-style:italic;color:rgba(255,255,255,.85);font-size:14.5px;line-height:1.5;}
@media(max-width:900px){.lore-grid{grid-template-columns:1fr;gap:32px;}}

/* ── REVEAL on scroll ─────────────────────────── */
.rv{opacity:0;transform:translateY(14px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1);}
.rv.in{opacity:1;transform:none;}

/* ── RESPONSIVE ───────────────────────────────── */
@media(max-width:1100px){
  .nav,.hdr-cta{display:none;}
  .burger{display:block;}
  .engines-cards{grid-template-columns:1fr;}
  .suite-grid{grid-template-columns:1fr 1fr;}
  .ftr-grid{grid-template-columns:1fr 1fr;}
  .hero-bottom{flex-direction:column;gap:32px;align-items:flex-start;}
  .hero-lede{max-width:100%;}
  .hero-content{padding:0 24px 48px;}
  .hero-h{font-size:clamp(48px,10vw,80px);}
}
@media(max-width:640px){
  .wrap{padding:0 20px;}
  .hdr{padding:14px 20px;}
  .suite-grid{grid-template-columns:1fr;}
  .ftr-grid{grid-template-columns:1fr;gap:32px;}
  .section,.concept-sec,.engines-sec,.integ-sec,.suite-sec,.lore-sec{padding:64px 0;}
  .hero-h{font-size:clamp(40px,12vw,64px);margin-bottom:32px;}
  .dh{font-size:clamp(32px,8vw,52px);}
  .brand-tag{display:none;}
}


/* ════════════════════════════════════════════════════════════════
   v0.15.0 — landing refonte 6 moteurs + use cases + hosting tagline
   ════════════════════════════════════════════════════════════════ */

/* Title color variations across sections (.fd-teal / .fd-gold modifier sur .fd) */
.dh .fd-teal{color:var(--teal);}
.dh .fd-gold{color:var(--gold);}
.dh .fd-deep{color:var(--teal-d);}

.hero-stats{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:18px;font-family:var(--mono);
  font-size:12.5px;letter-spacing:.04em;
  color:rgba(255,255,255,.65);
}
.hero-stats strong{color:var(--mint);font-weight:600;}
.hero-stats-sep{color:rgba(255,255,255,.30);}

/* 6 engines grid 3×2 */
.engines-cards-6{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:48px;
}
@media(max-width:900px){.engines-cards-6{grid-template-columns:1fr;}}
.sc6{
  position:relative;
  display:flex;flex-direction:column;gap:14px;
  padding:24px 22px;
  background:#fff;border:1px solid var(--lsoft);border-radius:14px;
  transition:transform .35s,box-shadow .35s;
}
.sc6:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(19,24,21,.08);}
.sc6-head{display:flex;align-items:center;gap:14px;}
.sc6-logo{
  flex-shrink:0;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
}
.sc6-logo svg{width:100%;height:100%;display:block;}
.sc6-title{flex:1;min-width:0;}
.sc6-title h3{font-size:18px;font-weight:500;line-height:1.15;color:var(--ink);letter-spacing:-.01em;}
.sc6-title small{font-family:var(--mono);font-size:10.5px;color:var(--ink3);letter-spacing:.06em;text-transform:uppercase;}
.sc6-clone, .sc6-free{
  position:absolute;top:14px;right:14px;
  font-family:var(--mono);font-size:10px;font-weight:600;
  padding:3px 8px;border-radius:999px;
  background:rgba(102,140,130,.14);color:var(--teal-d);
  border:1px solid rgba(102,140,130,.30);
}
.sc6-free{
  background:rgba(212,175,55,.14);color:#a48522;
  border-color:rgba(212,175,55,.40);
}
.sc6-meta{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
  color:var(--ink3);
  border-top:1px dashed var(--lsoft);
  border-bottom:1px dashed var(--lsoft);
  padding:10px 0;
}
.sc6-meta strong{color:var(--ink);font-weight:600;}
.sc6-desc{
  font-size:13.5px;color:var(--ink2);line-height:1.55;
  margin:0;
}
.sc6-desc code{
  font-family:var(--mono);font-size:11.5px;
  background:rgba(102,140,130,.10);padding:1px 6px;border-radius:3px;
  color:var(--teal-d);
}

/* Use cases section */
.usecases-sec{padding:100px 0;background:var(--paper);}
.usecases-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
  margin-top:48px;
}
@media(max-width:900px){.usecases-grid{grid-template-columns:1fr;}}
.usecase{
  padding:28px 26px;
  background:#fff;border:1px solid var(--lsoft);border-radius:14px;
  transition:transform .35s,box-shadow .35s;
}
.usecase:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(19,24,21,.08);}
/* Use case SVG icons (line-stroke 1.5px style, matching .howto-icon) */
.usecase-icon{
  width:42px;height:42px;
  color:var(--teal);
  margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
}
.usecase-icon svg{width:100%;height:100%;display:block;}
.usecase:nth-child(1) .usecase-icon{color:var(--teal);}
.usecase:nth-child(2) .usecase-icon{color:var(--gold);}
.usecase:nth-child(3) .usecase-icon{color:var(--teal-d);}
.usecase:nth-child(4) .usecase-icon{color:var(--mint);filter:saturate(1.4);}
.usecase h3{
  font-size:20px;font-weight:500;line-height:1.2;color:var(--ink);
  margin-bottom:10px;letter-spacing:-.01em;
}
.usecase p{
  font-size:14.5px;color:var(--ink2);line-height:1.6;
  margin-bottom:14px;
}
.usecase-tags{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal);
}

/* Footer hosting tagline (poetry of the place) */
.ftr-hosting{
  font-size:12.5px !important;
  line-height:1.6;
  color:rgba(255,255,255,.50) !important;
  font-style:italic;
  margin-top:8px;
  max-width:340px;
}
.ftr-hosting strong{
  font-style:normal;font-weight:500;
  color:var(--mint);
}