/* ===========================================================
   AUXIMOR SYSTEMS — Site web vitrine
   Design system partagé · #0A0D16 / cobalt #3D5AFE / Geist
   =========================================================== */

:root {
  /* Fond bleu nuit profond */
  --bg:        #0a0d16;
  --bg-2:      #0c0f1a;
  --surface:   #11151f;   /* carte */
  --surface-2: #161b27;   /* carte survol / inset */
  --surface-3: #1c2230;

  /* Hairlines */
  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.15);
  --grid:      rgba(94,124,255,0.05);   /* blueprint */

  /* Type */
  --fg:        #f5f6f8;
  --fg-2:      #aeb4c0;   /* gris moyen */
  --muted:     #767d8c;
  --faint:     #565d6b;

  /* Accent cobalt */
  --acc:       #3d5afe;
  --acc-2:     #6f86ff;
  --acc-3:     #97a8ff;
  --acc-dim:   rgba(61,90,254,0.14);
  --acc-line:  rgba(61,90,254,0.34);
  --acc-glow:  rgba(61,90,254,0.5);

  --sans: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", "SFMono-Regular", ui-monospace, monospace;

  --maxw: 1200px;
  --pad: clamp(22px, 5.5vw, 80px);
  --nav-h: 68px;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--acc); color: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------------- Blueprint backdrop ---------------- */
.bp {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 58px 58px;
}
.halo {
  position: absolute; pointer-events: none; z-index: 0; border-radius: 50%;
  filter: blur(90px); opacity: 0.6;
  background: var(--acc);
  animation: haloFloat 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes haloFloat {
  0%   { transform: translate3d(0,0,0) scale(1);      opacity: var(--halo-o, .55); }
  50%  { transform: translate3d(24px,18px,0) scale(1.08); opacity: calc(var(--halo-o, .55) * 1.25); }
  100% { transform: translate3d(-18px,12px,0) scale(0.97); opacity: calc(var(--halo-o, .55) * .8); }
}

/* ---------------- Layout ---------------- */
.section { position: relative; padding: clamp(54px,8vh,108px) var(--pad); }
.section.tline { border-top: 1px solid var(--line); }
.wrap { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.narrow { max-width: 820px; }

/* ---------------- Signature components ---------------- */
/* pastille monospace + puce */
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2);
  border: 1px solid var(--line-2); border-radius: 100px;
  padding: 7px 15px 7px 13px; background: rgba(255,255,255,0.015);
  width: fit-content;
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 11px var(--acc-glow);
}

/* marqueur de section (haut droite) */
.marker {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--faint); text-transform: uppercase;
}

/* kicker mono simple */
.kick {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}

/* En-tête de section standard */
.shead { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.shead h2 { margin: 14px 0 0; font-size: clamp(28px,3.6vw,46px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; max-width: 20ch; }
.shead p { margin: 18px 0 0; color: var(--fg-2); font-size: clamp(15px,1.3vw,18px); max-width: 50ch; font-weight: 350; line-height: 1.6; }

/* Titres énormes déclaratifs */
.display {
  font-weight: 600; letter-spacing: -0.04em; line-height: 0.98;
  font-size: clamp(40px, 8vw, 104px);
}
.hl { color: var(--acc-2); }
.dim { color: var(--muted); }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  padding: 13px 22px; border-radius: 9px; border: 1px solid transparent; cursor: pointer;
  transition: all .18s ease; line-height: 1; white-space: nowrap;
}
.btn .arw { transition: transform .22s cubic-bezier(.16,1,.3,1); }
.btn:hover .arw { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn-primary { background: var(--acc); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 10px 30px -12px var(--acc-glow); }
.btn-primary:hover { background: var(--acc-2); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 16px 40px -12px var(--acc-glow); }
.btn-ghost { color: var(--fg); border-color: var(--line-2); background: rgba(255,255,255,0.015); }
.btn-ghost:hover { border-color: var(--fg-2); background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.btn-lg { font-size: 16px; padding: 16px 28px; }
.btn-sm { font-size: 13px; padding: 10px 16px; }

/* ---------------- Cards ---------------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--line-2); }
.card.lift:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -28px rgba(0,0,0,.8); }

/* ---------------- NAV (injected) ---------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,13,22,0.72);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.nav-in { max-width: var(--maxw); margin: 0 auto; height: var(--nav-h); padding: 0 var(--pad);
  display: flex; align-items: center; gap: 26px; position: relative; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand .word { font-weight: 600; font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; }

/* ---- animated logo mark ---- */
.aux-mark .m-dot { transform-box: fill-box; transform-origin: center; transform: rotate(45deg); }
.aux-mark .m-corners { transform-box: fill-box; transform-origin: center; }
.aux-mark .m-corners path { transition: opacity .2s ease; }
.brand:hover .aux-mark .m-dot,
.aux-mark.play .m-dot { animation: markDot .9s cubic-bezier(.16,1,.3,1); }
.brand:hover .aux-mark .m-corners,
.aux-mark.play .m-corners { animation: markScan .9s cubic-bezier(.16,1,.3,1); }
@keyframes markDot {
  0%   { transform: rotate(45deg)  scale(1); }
  35%  { transform: rotate(225deg) scale(1.42); }
  70%  { transform: rotate(225deg) scale(.78); }
  100% { transform: rotate(405deg) scale(1); }
}
@keyframes markScan {
  0%   { transform: scale(1); }
  35%  { transform: scale(.8) rotate(-4deg); }
  70%  { transform: scale(1.06) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
.aux-hl { cursor: default; transition: color .2s ease, text-shadow .2s ease; }
.aux-hl:hover { color: var(--acc-2); text-shadow: 0 0 18px var(--acc-glow); }
@media (prefers-reduced-motion: reduce) {
  .brand:hover .aux-mark .m-dot, .aux-mark.play .m-dot,
  .brand:hover .aux-mark .m-corners, .aux-mark.play .m-corners { animation: none; }
}
.nav-links { display: flex; gap: 24px; margin-left: 14px; }
.nav-links a { font-size: 14px; color: var(--fg-2); letter-spacing: -0.005em; transition: color .15s; position: relative; padding: 4px 0; }
.nav-links a:hover { color: var(--fg); }
.nav-links a.active { color: var(--fg); }
.nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--acc); border-radius: 2px; }

/* =========================================================
   MEGA-MENU (Cas d'usage)
   ========================================================= */
.nav-item { display: inline-flex; align-items: center; }
.nav-item.has-mega { position: static; }
.mega {
  position: absolute;
  top: calc(var(--nav-h) - 4px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: min(900px, calc(100vw - 36px));
  background: rgba(13,16,24,0.96);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,0,0,0.3);
  padding: 22px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1), visibility .22s;
  z-index: 120;
}
.has-mega.mega-open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }

.mega-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; }
.mega-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 14px; }

/* use-case rows */
.mega-cases { display: flex; flex-direction: column; }
.muc { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 12px; border: 1px solid transparent; transition: background .16s, border-color .16s, transform .16s; }
.muc + .muc { margin-top: 4px; }
.muc:hover { background: rgba(255,255,255,0.03); border-color: var(--line); transform: translateX(2px); }
.muc-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background: var(--acc-dim); border: 1px solid var(--acc-line); color: var(--acc-2); }
.muc:hover .muc-ic { background: var(--acc); color: #fff; }
.muc-ic .auxic .ac { color: var(--acc-3); }
.muc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.muc-sector { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc-2); }
.muc-h { display: block; margin: 4px 0 0; font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--fg); }
.muc-p { display: block; margin: 5px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.muc-gain { flex: none; align-self: center; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--acc-2); background: var(--acc-dim); border: 1px solid var(--acc-line); border-radius: 100px; padding: 6px 11px; white-space: nowrap; }
.mega-all { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--fg); padding: 4px 2px; transition: gap .18s, color .18s; }
.mega-all:hover { gap: 12px; color: var(--acc-2); }

/* demo panel */
.mega-demo { display: flex; flex-direction: column; }
.demo-frame { flex: 1; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: linear-gradient(160deg, #0e1320, #0a0d16); position: relative; }
.demo-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(94,124,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(94,124,255,0.05) 1px, transparent 1px); background-size: 26px 26px; }
.da-bar { position: relative; display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.da-bar i.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.da-title { margin-left: 8px; height: 7px; width: 90px; border-radius: 4px; background: rgba(255,255,255,0.14); }
.da-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc-2); }
.da-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc-glow); animation: daLive 1.6s ease-in-out infinite; }
.da-body { position: relative; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.da-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.da-kpi { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; }
.da-kpi .k1 { height: 6px; width: 60%; border-radius: 3px; background: rgba(255,255,255,0.18); }
.da-kpi .k2 { margin-top: 7px; height: 11px; width: 80%; border-radius: 3px; background: linear-gradient(90deg, var(--acc), var(--acc-2)); transform-origin: left; animation: daKpi 3.4s ease-in-out infinite; }
.da-kpi:nth-child(2) .k2 { animation-delay: .5s; width: 55%; }
.da-kpi:nth-child(3) .k2 { animation-delay: 1s; width: 68%; }
.da-chart { display: flex; align-items: flex-end; gap: 7px; height: 56px; padding: 8px 2px 0; border-bottom: 1px solid var(--line); }
.da-chart i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--acc-2), var(--acc)); transform-origin: bottom; transform: scaleY(.3); animation: daGrow 2.8s ease-in-out infinite; opacity: .9; }
.da-chart i:nth-child(2){ animation-delay:.2s } .da-chart i:nth-child(3){ animation-delay:.4s }
.da-chart i:nth-child(4){ animation-delay:.6s } .da-chart i:nth-child(5){ animation-delay:.8s }
.da-chart i:nth-child(6){ animation-delay:1s }
.da-task { position: relative; height: 26px; border-radius: 7px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); overflow: hidden; }
.da-task .chip { position: absolute; top: 5px; left: 6px; height: 16px; width: 58px; border-radius: 5px; background: var(--acc-dim); border: 1px solid var(--acc-line); animation: daMove 4s cubic-bezier(.5,0,.2,1) infinite; }
.da-task .chip::after { content: ""; position: absolute; left: 7px; top: 6px; width: 30px; height: 4px; border-radius: 2px; background: var(--acc-2); }
@keyframes daGrow { 0%,100%{ transform: scaleY(.3); opacity:.6 } 50%{ transform: scaleY(1); opacity:1 } }
@keyframes daLive { 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
@keyframes daKpi { 0%,100%{ transform: scaleX(.5) } 50%{ transform: scaleX(1) } }
@keyframes daMove { 0%,8%{ left:6px } 46%,54%{ left: calc(100% - 64px) } 92%,100%{ left:6px } }
@media (prefers-reduced-motion: reduce) {
  .da-chart i, .da-kpi .k2, .da-task .chip, .da-live::before { animation: none !important; }
  .da-chart i { transform: scaleY(.7); }
}
@media (max-width: 940px) {
  .mega-in { grid-template-columns: 1fr; }
  .mega-demo { display: none; }
}
.nav-cta { margin-left: auto; }
.nav-burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line-2); border-radius: 8px; width: 40px; height: 38px; cursor: pointer; align-items: center; justify-content: center; }
.nav-burger span, .nav-burger span::before, .nav-burger span::after { content: ""; display: block; width: 16px; height: 1.6px; background: var(--fg); position: relative; }
.nav-burger span::before { position: absolute; top: -5px; } .nav-burger span::after { position: absolute; top: 5px; }

.mobile-menu { display: none; }

@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .mobile-menu { display: block; position: fixed; inset: var(--nav-h) 0 0; z-index: 99;
    background: rgba(10,13,22,0.97); backdrop-filter: blur(20px); padding: 28px var(--pad);
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: all .22s ease; }
  .mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .mobile-menu a { display: block; font-size: 24px; font-weight: 500; padding: 16px 0; border-bottom: 1px solid var(--line); letter-spacing: -0.02em; }
  .mobile-menu .btn { margin-top: 26px; width: 100%; justify-content: center; }
}

/* ---------------- FOOTER (injected) ---------------- */
.foot { position: relative; border-top: 1px solid var(--line); background: var(--bg-2); padding: clamp(56px,8vw,88px) var(--pad) 36px; z-index: 2; }
.foot-in { max-width: var(--maxw); margin: 0 auto; }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.foot-brand .word { font-weight: 600; font-size: 17px; letter-spacing: 0.24em; text-transform: uppercase; }
.foot-brand p { margin: 18px 0 0; color: var(--muted); font-size: 14px; max-width: 34ch; line-height: 1.6; }
.foot-col h4 { margin: 0 0 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.foot-col a { display: block; color: var(--fg-2); font-size: 14px; padding: 6px 0; transition: color .15s; }
.foot-col a:hover { color: var(--fg); }
.foot-bot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; flex-wrap: wrap; }
.foot-bot span { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: 0.04em; }
.foot-legal { display: inline-flex; align-items: center; gap: 22px; }
.foot-legal a { color: var(--muted); transition: color .15s; }
.foot-legal a:hover { color: var(--fg); }

@media (max-width: 740px) { .foot-top { grid-template-columns: 1fr 1fr; gap: 32px; } .foot-brand { grid-column: span 2; } }

/* ---------------- utility ---------------- */
.url { font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
.lead { color: var(--fg-2); font-weight: 350; line-height: 1.62; }
.strike { position: relative; color: var(--muted); white-space: nowrap; }
.strike::after { content: ""; position: absolute; left: -3%; right: -3%; top: 56%; height: 0.055em; background: var(--acc); transform: rotate(-2.5deg); border-radius: 2px; }
.eyebrow-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* =========================================================
   ANIMATIONS
   ========================================================= */

/* nav gains a denser shadow once scrolled */
.nav { transition: box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.nav.scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,.9); border-bottom-color: var(--line-2); }

/* scroll-reveal: elements fade + rise into place (JS-gated so content is never stuck hidden) */
[data-reveal] { will-change: opacity, transform; }
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--rd, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* grouped children stagger automatically (set via JS --rd) */

/* hero headline: per-line mask reveal on load (JS-gated) */
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero-title .line > span { display: block; }
.js .hero-title .line > span {
  transform: translateY(115%);
  animation: lineUp 1s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--ld, 0ms);
}
@keyframes lineUp { to { transform: translateY(0); } }

/* the accent strike draws itself in */
.strike { font-style: normal; }
.js .strike::after { transform-origin: left center; animation: strikeIn .5s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--sd, 1s); transform: rotate(-2.5deg) scaleX(0); }
@keyframes strikeIn { to { transform: rotate(-2.5deg) scaleX(1); } }

/* generic fade-up used on load for hero sub-elements (JS-gated) */
.js .fade-up { opacity: 0; transform: translateY(16px); animation: fadeUp .8s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--fd, 0ms); }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* pill pulse dot */
.pill::before { animation: dotPulse 2.6s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { box-shadow: 0 0 11px var(--acc-glow); } 50% { box-shadow: 0 0 4px var(--acc-glow); opacity: .7; } }

/* count-up numbers keep layout stable */
.hm b { font-variant-numeric: tabular-nums; }

/* accordion (FAQ) */
.acc-item { border-bottom: 1px solid var(--line); }
.acc-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; color: var(--fg);
  font-family: var(--sans); display: flex; align-items: flex-start; gap: 18px; padding: 22px 0; }
.acc-q .qt { font-size: clamp(16px,1.7vw,19px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.4; flex: 1; transition: color .18s; }
.acc-q:hover .qt { color: #fff; }
.acc-ic { flex: none; width: 26px; height: 26px; border: 1px solid var(--line-2); border-radius: 7px; position: relative; transition: border-color .2s, background .2s; margin-top: 2px; }
.acc-ic::before, .acc-ic::after { content: ""; position: absolute; background: var(--fg-2); border-radius: 2px; transition: transform .26s cubic-bezier(.16,1,.3,1), background .2s; }
.acc-ic::before { left: 50%; top: 7px; bottom: 7px; width: 1.6px; transform: translateX(-50%); }
.acc-ic::after { top: 50%; left: 7px; right: 7px; height: 1.6px; transform: translateY(-50%); }
.acc-item.open .acc-ic { border-color: var(--acc); background: var(--acc-dim); }
.acc-item.open .acc-ic::before { transform: translateX(-50%) scaleY(0); background: var(--acc-2); }
.acc-item.open .acc-ic::after { background: var(--acc-2); }
.acc-a { overflow: hidden; max-height: 0; transition: max-height .34s cubic-bezier(.4,0,.2,1); }
.acc-a-inner { padding: 0 44px 24px 0; color: var(--fg-2); font-size: 15.5px; line-height: 1.62; font-weight: 350; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .fade-up, .hero-title .line > span, .strike::after, .halo, .pill::before { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .strike::after { transform: rotate(-2.5deg) scaleX(1); }
  html { scroll-behavior: auto; }
}