/* =========================================================
   IGYPTE — systeme de design
   Terminal doré. Monospace, CRT, brackets de visée.
   ========================================================= */

:root {
  --bg: #050409;
  --bg-2: #08070d;
  --panel: #0d0b13;
  --panel-hi: #12101a;
  --line: #1e1929;
  --line-2: #2b2439;
  --line-hi: rgba(212, 175, 55, .40);
  --gold: #d4af37;
  --gold-soft: #f6d592;
  --gold-dim: rgba(212, 175, 55, .12);
  --signal: #46e08a;
  --signal-dim: rgba(70, 224, 138, .14);
  --text: #e6e1d8;
  --dim: #8a8398;
  --dimmer: #565062;
  --r: 3px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  background-image:
    radial-gradient(110vw 52vh at 50% -10%, rgba(212, 175, 55, .10), transparent 62%),
    radial-gradient(60vw 38vh at 96% 4%, rgba(70, 224, 138, .035), transparent 60%),
    linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  color: var(--text);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Voile CRT : lignes de balayage + grain, au-dessus de tout, inerte. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .022) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
  opacity: .55;
}

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.35rem; }

a { color: var(--gold-soft); }

::selection { background: rgba(212, 175, 55, .28); color: #fff; }

/* ---------------- Intro : sequence de boot ---------------- */

#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  background: #000;
  overflow: hidden;
}

body.intro-on { overflow: hidden; }
body.intro-on #intro { display: grid; }

#intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  pointer-events: none;
  opacity: .5;
}

/* Balayage lumineux qui traverse l'ecran */
#intro::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 28vh;
  top: -30vh;
  background: linear-gradient(to bottom, transparent, rgba(212,175,55,.10), transparent);
  animation: sweep 1.5s cubic-bezier(.4, 0, .3, 1) .15s;
  pointer-events: none;
}

@keyframes sweep { to { top: 110vh; } }

.intro-stack { position: relative; display: grid; place-items: center; gap: 1.6rem; }

#intro svg { width: min(38vw, 15rem); height: auto; overflow: visible; }

#intro path, #intro circle {
  fill: none;
  stroke: var(--gold-soft);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgba(212, 175, 55, .65));
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
  animation: draw .8s cubic-bezier(.65, 0, .35, 1) .42s forwards;
}

@keyframes draw { to { stroke-dashoffset: 0; } }

.boot {
  position: absolute;
  top: 21%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  font: 500 .72rem/1.9 var(--mono);
  color: var(--signal);
  text-align: left;
  white-space: pre;
  opacity: .9;
}

.boot span { display: block; opacity: 0; animation: bootline .01s forwards; }
.boot span:nth-child(1) { animation-delay: .05s; }
.boot span:nth-child(2) { animation-delay: .17s; }
.boot span:nth-child(3) { animation-delay: .29s; }

@keyframes bootline { to { opacity: 1; } }

#intro .word {
  font: 800 1.05rem/1 var(--mono);
  letter-spacing: .62em;
  text-indent: .62em;
  color: var(--gold-soft);
  opacity: 0;
  animation: glitchIn .55s steps(3, end) 1.02s forwards;
  text-shadow: 0 0 18px rgba(212, 175, 55, .5);
}

@keyframes glitchIn {
  0%   { opacity: 0; transform: translateX(-6px) skewX(12deg); filter: blur(3px); }
  30%  { opacity: 1; transform: translateX(5px) skewX(-9deg); }
  55%  { transform: translateX(-3px) skewX(5deg); filter: blur(0); }
  80%  { transform: translateX(2px) skewX(-2deg); }
  100% { opacity: 1; transform: none; filter: none; }
}

body.intro-out #intro {
  animation: introOut .5s cubic-bezier(.7, 0, .3, 1) forwards;
  pointer-events: none;
}

@keyframes introOut {
  40%  { opacity: 1; transform: scale(1.01); filter: brightness(2.4) contrast(1.6); }
  100% { opacity: 0; transform: scale(1.09); visibility: hidden; }
}

/* ---------------- Nav ---------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(5, 4, 9, .84);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav .wrap { display: flex; align-items: center; gap: 1.5rem; height: 3.9rem; }

.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font: 800 .88rem/1 var(--mono);
  letter-spacing: .26em;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

.brand .glyph { color: var(--gold); font-size: 1.05rem; letter-spacing: 0; }
.brand:hover { animation: shake .3s steps(2, end); }

@keyframes shake {
  25% { transform: translateX(-1.5px); }
  75% { transform: translateX(1.5px); }
}

.nav-links { margin-left: auto; display: flex; gap: 1.45rem; align-items: center; }

.nav-links a {
  position: relative;
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  transition: color .2s;
}

.nav-links a:not(.btn)::before {
  content: "";
  position: absolute;
  left: -.72rem;
  color: var(--gold);
  opacity: 0;
  transition: opacity .2s, transform .2s;
  transform: translateX(3px);
}

.nav-links a:not(.btn):hover { color: var(--gold-soft); }
.nav-links a:not(.btn):hover::before { content: ">"; opacity: 1; transform: none; }

@media (max-width: 720px) { .nav-links a.hide-s { display: none; } }

/* ---------------- Typo ---------------- */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--signal);
}

.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-dim), 0 0 10px var(--signal);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse { 50% { opacity: .3; transform: scale(.85); } }

h1 {
  margin: 1.15rem 0 0;
  font: 800 clamp(2rem, 6vw, 3.7rem)/1.06 var(--mono);
  letter-spacing: -.045em;
  color: #fff;
}

h1 .accent {
  background: linear-gradient(100deg, var(--gold-soft), var(--gold) 52%, #9c7a26);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  margin: 0 0 .9rem;
  font: 700 clamp(1.4rem, 3.2vw, 1.95rem)/1.2 var(--mono);
  letter-spacing: -.035em;
  color: #fff;
}

h3 { margin: 0 0 .4rem; font: 700 1rem/1.35 var(--mono); letter-spacing: -.02em; color: #fff; }

.lede { margin: 1.2rem 0 0; max-width: 40rem; font-size: 1.04rem; color: var(--dim); }

.section { padding: 5.5rem 0; }
.section-head { margin-bottom: 2.5rem; }
.section-head .lede { margin-top: .75rem; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1rem;
  padding: .3rem .72rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--panel);
  font: 500 .64rem/1.5 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

.tag::before { content: "▚"; opacity: .55; }

code.inline {
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: .12rem .42rem;
  font: 13px var(--mono);
  color: var(--gold-soft);
}

/* Curseur clignotant */
.cur {
  display: inline-block;
  width: .58em; height: 1.05em;
  margin-left: .12em;
  background: var(--gold);
  vertical-align: -.16em;
  animation: blink 1.05s steps(1, end) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* ---------------- Boutons ---------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--line-hi);
  border-radius: var(--r);
  background: transparent;
  color: var(--gold-soft);
  padding: .64rem 1.25rem;
  font: 600 .72rem/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .22s, color .22s, background .22s, transform .22s, box-shadow .22s;
}

/* Balayage lumineux au survol */
.btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .17), transparent);
  transform: skewX(-18deg);
  transition: left .55s cubic-bezier(.3, .8, .3, 1);
}

.btn:hover::after { left: 130%; }

.btn:hover {
  border-color: var(--gold-soft);
  color: #fff;
  background: rgba(212, 175, 55, .08);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .12), 0 8px 26px -14px rgba(212, 175, 55, .7);
}

.btn-primary {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold) 55%, #b9942e);
  border-color: transparent;
  color: #14100a;
  box-shadow: 0 10px 32px -14px rgba(212, 175, 55, .9);
}

.btn-primary:hover { background: linear-gradient(180deg, #fff0c9, var(--gold-soft)); color: #14100a; }
.btn-lg { padding: .94rem 1.9rem; font-size: .78rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }

/* ---------------- Stats ---------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  margin-top: 4rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.stat { position: relative; background: var(--bg-2); padding: 1.55rem 1.35rem; }

.stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transition: width 1.4s cubic-bezier(.2, .8, .2, 1);
}

.stat.on::before { width: 100%; }

.stat .num {
  font: 800 clamp(1.65rem, 4vw, 2.35rem)/1 var(--mono);
  letter-spacing: -.05em;
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
}

.stat .num.hit { animation: numHit .32s ease; }

@keyframes numHit {
  30% { text-shadow: 0 0 22px rgba(212, 175, 55, .85); transform: translateX(-1px); }
  60% { transform: translateX(1px); }
}

.stat .label {
  margin-top: .45rem;
  font: 500 .66rem/1.45 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dimmer);
}

/* ---------------- Cartes ---------------- */

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); gap: 1.05rem; }

.card {
  position: relative;
  padding: 1.7rem 1.6rem;
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

/* Brackets de visée aux coins */
.card::before, .card::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  border: 1px solid var(--gold);
  opacity: .3;
  transition: opacity .3s, width .3s, height .3s;
  pointer-events: none;
}

.card::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.card::after { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
.card:hover::before, .card:hover::after { opacity: .85; width: 17px; height: 17px; }

.card .idx {
  font: 700 .66rem/1 var(--mono);
  letter-spacing: .18em;
  color: var(--gold);
  opacity: .85;
}

.card p { margin: .55rem 0 0; color: var(--dim); font-size: .93rem; }

/* Produits */

.product {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  background-image:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, -20%), rgba(212, 175, 55, .17), transparent 68%),
    linear-gradient(180deg, var(--panel-hi), var(--panel));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .35s;
}

.product:hover, .product:focus-visible {
  transform: translateY(-4px);
  border-color: var(--line-hi);
  box-shadow: 0 22px 55px -28px rgba(212, 175, 55, .6);
  outline: none;
}

.product .top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }

.product .ico {
  width: 2.45rem; height: 2.45rem;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--gold-dim);
  border: 1px solid var(--line-hi);
  font-size: 1.1rem;
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
}

.product:hover .ico { transform: translateY(-2px) rotate(-6deg) scale(1.08); }
.product h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.product .desc { flex: 1; color: var(--dim); font-size: .93rem; margin: 0 0 1.25rem; }

.product .go {
  font: 700 .68rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

.product .go::before { content: "> "; opacity: .6; }
.product .go::after { content: " _"; opacity: 0; transition: opacity .25s; }
.product:hover .go::after { opacity: 1; animation: blink 1.05s steps(1, end) infinite; }

.pill {
  font: 700 .58rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .34rem .6rem;
  border-radius: var(--r);
  white-space: nowrap;
}

.pill-free { background: var(--signal-dim); color: var(--signal); border: 1px solid rgba(70, 224, 138, .3); }
.pill-live { background: var(--gold-dim); color: var(--gold-soft); border: 1px solid var(--line-hi); }
.pill-soon { background: rgba(255, 255, 255, .04); color: var(--dimmer); border: 1px solid var(--line-2); }

.product.soon { opacity: .68; }
.product.soon:hover { opacity: 1; }

.slot {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 12rem;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  color: var(--dimmer);
  font: 500 .7rem/1.7 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .01);
  transition: border-color .3s, color .3s;
}

.slot:hover { border-color: var(--line-hi); color: var(--gold); }

/* ---------------- Comparatif ---------------- */

.compare { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.crow { display: grid; grid-template-columns: 1.5fr 1fr 1fr; border-top: 1px solid var(--line); transition: background .25s; }
.crow:first-child { border-top: 0; }
.crow:not(.chead):hover { background: rgba(212, 175, 55, .035); }
.crow > div { padding: .95rem 1.15rem; font-size: .9rem; }
.crow .feat { color: var(--text); font-family: var(--mono); font-size: .82rem; letter-spacing: -.01em; }
.crow .them { color: var(--dimmer); border-left: 1px solid var(--line); }
.crow .them::after { content: " ✕"; color: #6b3d3d; font-size: .8em; }
.crow .us { color: var(--gold-soft); border-left: 1px solid var(--line); background: rgba(212, 175, 55, .04); }
.crow .us::after { content: " ✓"; color: var(--signal); font-size: .8em; }

.chead > div {
  font: 700 .64rem/1.5 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dimmer);
  padding-top: 1.05rem; padding-bottom: 1.05rem;
}

.chead .us { color: var(--gold); }
.chead .them::after, .chead .us::after { content: ""; }

@media (max-width: 640px) {
  .crow { grid-template-columns: 1fr; }
  .crow .them, .crow .us { border-left: 0; border-top: 1px solid var(--line); }
  .crow .them::before { content: "MARKETPLACES · "; color: var(--dimmer); font-family: var(--mono); font-size: .7em; letter-spacing: .1em; }
  .crow .us::before { content: "IGYPTE · "; color: var(--gold); font-family: var(--mono); font-size: .7em; letter-spacing: .1em; }
  .chead { display: none; }
}

/* ---------------- Graphe ---------------- */

.chart-box { padding: 1.6rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); position: relative; }
.chart-box svg { width: 100%; height: auto; display: block; }

.chart-line {
  fill: none;
  stroke: url(#goldgrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  filter: drop-shadow(0 0 7px rgba(212, 175, 55, .45));
}

.chart-box.on .chart-line { transition: stroke-dashoffset 2s cubic-bezier(.25, .6, .3, 1); stroke-dashoffset: 0; }
.chart-area { fill: url(#areagrad); opacity: 0; }
.chart-box.on .chart-area { transition: opacity 1.3s ease .55s; opacity: 1; }
.chart-grid { stroke: var(--line); stroke-width: 1; }

.chart-head {
  position: absolute;
  top: 1.6rem; right: 1.6rem;
  font: 500 .64rem/1.6 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dimmer);
  text-align: right;
}

.chart-head b { display: block; color: var(--gold-soft); font-size: 1.05rem; letter-spacing: -.03em; }

/* ---------------- Preuves ---------------- */

.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.05rem; }

.proof a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  overflow: hidden;
  transition: border-color .3s, transform .3s, background .3s;
}

.proof a::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.proof a:hover { border-color: var(--line-hi); transform: translateY(-3px); background: var(--panel-hi); }
.proof a:hover::before { transform: scaleY(1); }
.proof .t { color: #fff; font: 700 .98rem/1.4 var(--mono); letter-spacing: -.02em; }
.proof .s { color: var(--dim); font-size: .86rem; }
.proof .h { font: 700 .62rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .35rem; }

/* ---------------- Terminal ---------------- */

.term { background: #030207; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-family: var(--mono); }

.term-bar {
  display: flex; align-items: center; gap: .42rem;
  padding: .68rem 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .018);
}

.term-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); display: block; }
.term-bar i:first-child { background: #4a2f2f; }
.term-bar span { margin-left: .6rem; font-size: .66rem; letter-spacing: .14em; color: var(--dimmer); text-transform: uppercase; }

.term-body { padding: 1.15rem; font-size: .8rem; line-height: 1.95; overflow-x: auto; }
.term-body .c { color: var(--dimmer); }
.term-body .g { color: var(--signal); }
.term-body .y { color: var(--gold-soft); }
.term-body .w { color: var(--text); }
.term-body b { display: block; font-weight: inherit; white-space: pre; }

/* Lignes revelees une par une */
.term-body b { opacity: 0; transform: translateX(-6px); }
.term.on .term-body b { animation: termline .34s cubic-bezier(.2, .8, .2, 1) forwards; }
.term.on .term-body b:nth-child(1) { animation-delay: .05s; }
.term.on .term-body b:nth-child(2) { animation-delay: .18s; }
.term.on .term-body b:nth-child(3) { animation-delay: .31s; }
.term.on .term-body b:nth-child(4) { animation-delay: .44s; }
.term.on .term-body b:nth-child(5) { animation-delay: .57s; }
.term.on .term-body b:nth-child(6) { animation-delay: .70s; }

@keyframes termline { to { opacity: 1; transform: none; } }

/* ---------------- Pages OS ---------------- */

.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.05rem; }

.platform {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: .85rem;
  padding: 2rem 1.75rem;
  background-image:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, -20%), rgba(212, 175, 55, .16), transparent 68%),
    linear-gradient(180deg, var(--panel-hi), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .35s;
}

.platform::before, .platform::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  border: 1px solid var(--gold);
  opacity: .3;
  transition: opacity .3s, width .3s, height .3s;
}

.platform::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.platform::after { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
.platform:hover::before, .platform:hover::after { opacity: .85; width: 17px; height: 17px; }

.platform:hover, .platform:focus-visible {
  transform: translateY(-4px);
  border-color: var(--line-hi);
  box-shadow: 0 20px 52px -26px rgba(212, 175, 55, .5);
  outline: none;
}

.platform svg { width: 2.35rem; height: 2.35rem; fill: var(--gold-soft); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.platform:hover svg { transform: translateY(-2px) scale(1.07); }
.platform .name { font: 700 1.25rem/1.2 var(--mono); letter-spacing: -.03em; color: #fff; }
.platform .detail { font-size: .89rem; color: var(--dim); }
.platform .go { margin-top: .35rem; font: 700 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.platform .go::before { content: "> "; opacity: .6; }
.platform .go::after { content: " _"; opacity: 0; transition: opacity .25s; }
.platform:hover .go::after { opacity: 1; animation: blink 1.05s steps(1, end) infinite; }

.os-head { display: flex; align-items: center; gap: 1.05rem; margin-bottom: .35rem; }
.os-head svg { width: 2.6rem; height: 2.6rem; fill: var(--gold-soft); flex-shrink: 0; }
.os-head h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 2.7rem); }

.back {
  display: inline-block;
  margin-bottom: 2.25rem;
  font: 500 .7rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dimmer);
  text-decoration: none;
  transition: color .25s, transform .25s;
}

.back:hover { color: var(--gold-soft); transform: translateX(-3px); }

.cmd {
  display: flex; gap: .75rem; align-items: center;
  background: #030207;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 1rem 1.15rem;
}

.cmd code { flex: 1; overflow-x: auto; white-space: nowrap; font: 13px/1.5 var(--mono); color: var(--gold-soft); }
.cmd code::before { content: "$ "; color: var(--signal); }

button {
  flex-shrink: 0;
  border: 1px solid var(--line-hi);
  background: transparent;
  color: var(--gold-soft);
  border-radius: var(--r);
  padding: .5rem 1.1rem;
  font: 600 .7rem/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}

button:hover { border-color: var(--gold-soft); color: #fff; background: rgba(212, 175, 55, .08); }

.hint { margin-top: .85rem; font-size: .87rem; color: var(--dim); }

.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }

.steps li {
  position: relative;
  counter-increment: step;
  padding: 0 0 1.5rem 3.1rem;
  border-left: 1px solid var(--line);
  margin-left: 1.05rem;
}

.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }

.steps li::before {
  content: "0" counter(step);
  position: absolute;
  left: -1.05rem; top: -.15rem;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--panel-hi);
  border: 1px solid var(--line-hi);
  color: var(--gold-soft);
  font: 700 .66rem/1 var(--mono);
  letter-spacing: .02em;
}

.steps strong { color: #fff; font-weight: 700; font-family: var(--mono); font-size: .94rem; letter-spacing: -.02em; }
.steps p { margin: .35rem 0 0; color: var(--dim); font-size: .92rem; }

.warn {
  margin-top: .55rem;
  padding: .7rem .9rem;
  background: var(--gold-dim);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .87rem;
  color: var(--text);
}

.critical {
  position: relative;
  display: flex; gap: 1rem; align-items: flex-start;
  margin: 2.25rem 0 0;
  padding: 1.25rem 1.4rem;
  background: linear-gradient(180deg, rgba(212, 175, 55, .13), rgba(212, 175, 55, .04));
  border: 1px solid var(--line-hi);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 14px 40px -26px rgba(212, 175, 55, .6);
}

.critical::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: scan 3.5s ease-in-out infinite;
}

@keyframes scan { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.critical .mark {
  flex-shrink: 0;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: rgba(212, 175, 55, .16);
  border: 1px solid var(--line-hi);
  font-size: 1.05rem;
}

.critical h3 { margin: 0 0 .35rem; font-size: .98rem; }
.critical p { margin: 0; font-size: .92rem; color: var(--text); }
.critical p + p { margin-top: .5rem; color: var(--dim); }

details { margin-top: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1.15rem; }
summary { cursor: pointer; color: var(--gold-soft); font: 700 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
pre { margin: 1rem 0 0; max-height: 26rem; overflow: auto; font: 12px/1.55 var(--mono); color: var(--text); white-space: pre; }

ul.plain { padding-left: 1.15rem; color: var(--dim); }
ul.plain li { margin: .4rem 0; }
ul.plain strong { color: var(--text); }
ul.plain::marker, ul.plain li::marker { color: var(--gold); }

h2.sub {
  margin: 3rem 0 1rem;
  font: 700 .72rem/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

h2.sub::before { content: "// "; opacity: .5; }

/* ---------------- Coming soon ---------------- */

.soon-wrap { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 4rem 0; }
.soon-wrap .ico-lg { font-size: 2.8rem; margin-bottom: 1.2rem; }
.soon-wrap h1 { margin-bottom: .8rem; }
.soon-wrap .lede { margin-left: auto; margin-right: auto; }

.bar { margin: 2.4rem auto 0; width: min(22rem, 80vw); height: 2px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 36%; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: slide 1.9s ease-in-out infinite; }

@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(380%); } }

/* ---------------- Footer ---------------- */

footer { border-top: 1px solid var(--line); padding: 2.6rem 0 3.5rem; color: var(--dimmer); font: 500 .78rem/1.7 var(--mono); letter-spacing: .04em; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 1.9rem; align-items: center; }
footer a { color: var(--dim); text-decoration: none; transition: color .2s; }
footer a:hover { color: var(--gold-soft); }
footer .spacer { margin-left: auto; }

/* ---------------- Reveals ---------------- */

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.rise { animation: rise .75s cubic-bezier(.2, .8, .2, 1) both; }
.d1 { animation-delay: .06s; } .d2 { animation-delay: .14s; }
.d3 { animation-delay: .22s; } .d4 { animation-delay: .3s; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveal.on { opacity: 1; transform: none; }

/* Titre revele par volet */
.wipe { clip-path: inset(0 100% 0 0); transition: clip-path .95s cubic-bezier(.16, .9, .2, 1); }
.wipe.on { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, #intro path, #intro circle, #intro .word, .boot span,
  .bar i, .dot, .critical::before, .term.on .term-body b, .cur { animation: none !important; }
  #intro::after { display: none; }
  #intro path, #intro circle { stroke-dashoffset: 0; }
  .term-body b { opacity: 1; transform: none; }
  .reveal, .wipe { opacity: 1; transform: none; clip-path: none; transition: none; }
  .product, .platform, .proof a, .btn, .card::before, .card::after { transition: none; }
  .chart-box.on .chart-line { transition: none; stroke-dashoffset: 0; }
  .chart-box.on .chart-area { transition: none; }
  .stat.on::before { transition: none; }
  body::after { display: none; }
}