/* ==========================================================================
   home.css — styles that only the home page uses.

   Sections:
     1. Hero (video backdrop, orbs, floor grid, flows, particles, sweep)
     2. Hero stage (floating dashboard mock)
     3. Feature cards
     4. Showcase
     5. Steps
     6. CTA
     7. Responsive

   Loads after base.css and may freely override it.
   ========================================================================== */

/* 1. HERO ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 900px;
  overflow: clip;
  background: radial-gradient(120% 90% at 70% 0%, #fffaf0 0%, var(--cream) 55%, #efe7d2 100%);
}

/* Looping video backdrop. Sits below every other hero layer (no z-index, so
   DOM order wins). If the file can't play, js/site.js adds .is-hidden and the
   CSS-only orbs take over. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
  filter: saturate(.85) contrast(1.05);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.hero-video.is-hidden { display: none; }

.hl { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; will-change: transform; }
.orb.o1 { width: 640px; height: 640px; left: -160px; top: -120px; background: radial-gradient(circle at 50% 50%, rgba(235, 176, 34, .32), transparent 65%); animation: drift1 18s ease-in-out infinite alternate; }
.orb.o2 { width: 760px; height: 760px; right: -220px; top: 80px; background: radial-gradient(circle at 50% 50%, rgba(65, 90, 119, .2), transparent 65%); animation: drift2 22s ease-in-out infinite alternate; }
.orb.o3 { width: 420px; height: 420px; left: 38%; bottom: -160px; background: radial-gradient(circle, rgba(235, 176, 34, .22), transparent 65%); animation: drift1 15s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate3d(90px, 60px, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-80px, -50px, 0) scale(1.1); } }

.floor {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -6%;
  height: 60%;
  perspective: 620px;
  perspective-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 92%);
  mask-image: linear-gradient(to top, #000 15%, transparent 92%);
}
.plane { position: absolute; inset: 0; transform: rotateX(66deg); transform-origin: 50% 0; transform-style: preserve-3d; }
.slide {
  position: absolute;
  left: 0;
  right: 0;
  top: -160px;
  bottom: 0;
  background-image: linear-gradient(rgba(235, 176, 34, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(65, 90, 119, .28) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: slide 3.2s linear infinite;
  will-change: transform;
}
@keyframes slide { to { transform: translate3d(0, 80px, 0); } }

.flows { position: absolute; inset: 0; width: 100%; height: 100%; }
.flows .track { fill: none; stroke: rgba(65, 90, 119, .35); stroke-width: 1; }
.flows .run { fill: none; stroke: url(#gl); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 60 940; animation: run 7s linear infinite; }
.flows .run.r2 { animation-duration: 10s; animation-delay: -3s; stroke-dasharray: 90 910; }
.flows .run.r3 { animation-duration: 13s; animation-delay: -6s; stroke-dasharray: 50 950; }
@keyframes run { to { stroke-dashoffset: -1000; } }

.pt {
  position: absolute;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 2px rgba(235, 176, 34, .7);
  opacity: 0;
  animation: rise 12s ease-in-out infinite;
}
.pt.c { background: var(--n6); box-shadow: 0 0 10px 2px rgba(65, 90, 119, .35); }
@keyframes rise {
  0% { opacity: 0; transform: translate3d(0, 40px, 0); }
  20% { opacity: .9; }
  80% { opacity: .5; }
  100% { opacity: 0; transform: translate3d(14px, -180px, 0); }
}

.sweep {
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 34%;
  left: -40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg);
  animation: sweep 9s ease-in-out infinite;
}
@keyframes sweep {
  0%, 20% { transform: translate3d(0, 0, 0) skewX(-18deg); }
  80%, 100% { transform: translate3d(520%, 0, 0) skewX(-18deg); }
}

.vig { background: radial-gradient(90% 70% at 50% 40%, transparent 55%, rgba(247, 243, 233, .9) 100%); }

.hero-in {
  position: relative;
  z-index: 5;
  padding-top: 140px;
  padding-bottom: 120px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}
.hero-copy { flex: 1 1 480px; min-width: 0; }
.stage { flex: 1 1 560px; min-width: 0; perspective: 1400px; display: flex; justify-content: center; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(138, 98, 9, .45);
  background: rgba(255, 255, 255, .7);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gd);
}
.dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  animation: ping 2s ease-out infinite;
}
@keyframes ping {
  from { transform: scale(.4); opacity: 1; }
  to { transform: scale(1.6); opacity: 0; }
}

.gt {
  background: linear-gradient(100deg, var(--gd) 0%, #b88408 50%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: shine 6s ease-in-out infinite alternate;
}
@keyframes shine { to { background-position: 100% 0; } }

.scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 6;
  width: 26px;
  height: 44px;
  margin-left: -13px;
  border: 2px solid rgba(13, 27, 42, .4);
  border-radius: 14px;
}
.scroll::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--gold);
  animation: wheel 2s ease-in-out infinite;
}
@keyframes wheel {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(16px); }
}

/* 2. HERO STAGE (laptop mockup + screen slider) --------------------------- */
/* The frame, both screens and their opening were all authored on the same
   1050x700 canvas, and each screen's artwork runs a few pixels past the
   bezel opening on every side. So the screens sit behind the frame at their
   natural size and the bezel crops them: no gaps, no letterboxing, no
   scaling — the shell just needs to be the sizing context. */
.float { position: relative; width: 100%; max-width: 720px; transform-style: preserve-3d; animation: bob 7s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -16px, 0); }
}

.laptop {
  position: relative;
  display: block;
  transform: rotateY(-16deg) rotateX(9deg) rotateZ(1.5deg);
  transform-origin: 50% 80%;
  transform-style: preserve-3d;
  transition: transform .8s var(--ease);
}
.stage:hover .laptop { transform: rotateY(-4deg) rotateX(3deg) rotateZ(0deg); }

.laptop-screens {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 14px;
  transform: translateZ(1px);
}
.laptop-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.laptop-screen.is-active { opacity: 1; }

/* Draws the bezel, base and camera notch over the screens. */
.laptop-shell {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  transform: translateZ(2px);
  filter: drop-shadow(0 50px 70px -30px rgba(13, 27, 42, .65));
}

.laptop-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px auto 0;
  padding: 8px 12px;
  width: fit-content;
  border-radius: 999px;
  background: rgba(27, 38, 59, .5);
  border: 1px solid rgba(65, 90, 119, .5);
  box-shadow: 0 24px 40px -22px rgba(13, 27, 42, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
  transform: translateZ(70px);
}
.snav {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  color: var(--cream);
  cursor: pointer;
  background: rgba(13, 27, 42, .8);
  border: 1px solid rgba(235, 176, 34, .45);
  transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.snav:hover { background: rgba(235, 176, 34, .22); border-color: var(--gold); transform: scale(1.1); }
.snav svg { width: 16px; height: 16px; }
.sdot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(247, 243, 233, .35);
  border: 1px solid rgba(247, 243, 233, .5);
  transition: width .4s var(--ease), background .4s, box-shadow .4s;
}
.sdot.is-on {
  width: 26px;
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 14px -2px rgba(235, 176, 34, .8);
}
.snav:focus-visible, .sdot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.sk { height: 10px; border-radius: 6px; background: rgba(65, 90, 119, .5); position: relative; overflow: hidden; }
.sk::after, .shim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(247, 243, 233, .18), transparent);
  transform: translateX(-100%);
  animation: shimmer 2.6s ease-in-out infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

.chip {
  color: var(--cream);
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  background: rgba(27, 38, 59, .97);
  border: 1px solid rgba(235, 176, 34, .45);
  box-shadow: 0 24px 40px -14px rgba(0, 0, 0, .8), 0 0 30px -8px rgba(235, 176, 34, .4);
}
.chip.c1 { left: -18px; top: 20%; transform: translateZ(80px); animation: bob2 6s ease-in-out infinite; }
.chip.c2 { right: -18px; bottom: 16px; transform: translateZ(110px); animation: bob2 8s ease-in-out -3s infinite; }
@keyframes bob2 { 50% { margin-top: -12px; } }

/* 3. FEATURE CARDS -------------------------------------------------------- */
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 70px; perspective: 1300px; }
.card {
  position: relative;
  padding: 36px 32px 34px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #ffffff 0%, #f3ecda 100%);
  border: 1px solid rgba(65, 90, 119, .22);
  box-shadow: inset 0 1px 0 #fff, 0 24px 40px -24px rgba(27, 38, 59, .35);
  transform-style: preserve-3d;
  transition: transform .6s var(--ease), box-shadow .6s, border-color .4s;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(235, 176, 34, .16) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease);
}
.card:hover {
  transform: translateY(-14px) rotateX(7deg) rotateY(-7deg);
  border-color: rgba(235, 176, 34, .9);
  box-shadow: inset 0 1px 0 #fff, 0 50px 70px -30px rgba(27, 38, 59, .5), 0 0 70px -14px rgba(235, 176, 34, .55);
}
.g3 .card:nth-child(3n+3):hover { transform: translateY(-14px) rotateX(7deg) rotateY(7deg); }
.card:hover::before { transform: translateX(120%); }
.ic {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(145deg, #243550, #162235);
  border: 1px solid rgba(235, 176, 34, .4);
  color: var(--gold);
  box-shadow: 0 12px 24px -8px rgba(27, 38, 59, .45), 0 0 24px -6px rgba(235, 176, 34, .35);
  transition: transform .6s var(--ease);
}
.card:hover .ic { transform: translateZ(60px) scale(1.1) rotate(-6deg); }
.card h3 { font-size: 24px; margin-top: 26px; transition: transform .6s var(--ease); }
.card:hover h3 { transform: translateZ(30px); }
.card p { color: var(--mut); margin: 12px 0 0; font-size: 16px; }
.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 700; font-size: 14px; color: var(--gd); }
.more svg { transition: transform .3s; }
.card:hover .more svg { transform: translateX(6px); }

/* 4. SHOWCASE ------------------------------------------------------------- */
.show { background: linear-gradient(180deg, var(--cream) 0%, #ebe3cd 50%, var(--cream) 100%); overflow: clip; }
.ghost {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -150px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(160px, 24vw, 340px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(65, 90, 119, .28);
  pointer-events: none;
  user-select: none;
}
.show-in { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 60px; }
.show-copy { flex: 1 1 420px; min-width: 0; }
.ticks { padding: 0; margin: 34px 0 0; display: grid; gap: 16px; }
.ticks li { display: flex; gap: 14px; align-items: center; font-weight: 600; }
.ticks i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: rgba(235, 176, 34, .2);
  border: 1px solid var(--gd);
  color: var(--gd);
}
.vis { position: relative; flex: 1 1 460px; max-width: 600px; height: 560px; perspective: 1400px; min-width: 0; }
.pan {
  position: absolute;
  border-radius: var(--radius);
  padding: 22px;
  background: linear-gradient(150deg, #ffffff, #f5eedd);
  border: 1px solid rgba(65, 90, 119, .25);
  box-shadow: 0 40px 60px -26px rgba(27, 38, 59, .45), inset 0 1px 0 #fff;
  transition: box-shadow .5s, border-color .5s;
}
.pan:hover { border-color: var(--gold); box-shadow: 0 50px 80px -24px rgba(27, 38, 59, .55), 0 0 60px -10px rgba(235, 176, 34, .4); }
.pan.p1 { left: 0; top: 10px; width: 62%; height: 200px; }
.pan.p2 { right: 0; top: 120px; width: 66%; height: 250px; border-color: rgba(235, 176, 34, .5); }
.pan.p3 { left: 8%; bottom: 0; width: 56%; height: 190px; }
.sk2 { height: 12px; border-radius: 6px; background: rgba(65, 90, 119, .22); margin-top: 14px; }
.ring { position: absolute; right: -30px; top: -40px; width: 200px; height: 200px; animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ring circle { fill: none; stroke: rgba(138, 98, 9, .45); stroke-width: 1.2; stroke-dasharray: 4 10; }

/* 5. STEPS ---------------------------------------------------------------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 80px; }
.rail { position: absolute; left: 8%; right: 8%; top: 34px; height: 4px; pointer-events: none; }
.rail path { fill: none; stroke: rgba(65, 90, 119, .4); stroke-width: 2; }
.rail .gl { stroke: var(--gold); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 8px rgba(235, 176, 34, .9)); }
.step { position: relative; padding-top: 0; transition: transform .5s var(--ease); }
.step:hover { transform: translateY(-8px); }
.num {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: #0d1b2a;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 6px 0 #9b6f0c, 0 20px 30px -8px rgba(235, 176, 34, .5);
  transition: transform .4s var(--ease);
}
.step:hover .num { transform: rotate(-8deg) scale(1.08); }
.step h3 { font-size: 26px; margin-top: 30px; }
.step p { color: var(--mut); margin: 10px 0 0; max-width: 340px; }

/* 6. CTA ------------------------------------------------------------------ */
.ctaw {
  position: relative;
  padding: 2px;
  border-radius: 34px;
  background: conic-gradient(from var(--ang), var(--gold), #415a77, #1b263b, #415a77, var(--gold));
  animation: ang 8s linear infinite;
  box-shadow: 0 60px 100px -40px rgba(27, 38, 59, .55), 0 0 90px -30px rgba(235, 176, 34, .4);
}
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ang { to { --ang: 360deg; } }
.ctai {
  color: var(--cream);
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 90px 40px;
  text-align: center;
  background: radial-gradient(80% 120% at 50% 0%, #415a77 0%, #243550 70%);
}
.ctai .h2 { max-width: 760px; margin: 16px auto 0; }
.ctai .sub { margin: 20px auto 0; color: rgba(247, 243, 233, .78); }
.ctai .eyebrow { color: var(--gold); }
.ctai .btn-ghost { color: var(--cream); border-color: rgba(247, 243, 233, .35); background: rgba(27, 38, 59, .5); }
.ctai .btn-ghost:hover { border-color: var(--gold); background: rgba(235, 176, 34, .14); }
.ctai .cta-row { justify-content: center; }
.ctai .contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  margin-top: 34px;
  font-size: 17px;
}
.ctai .contact a {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(247, 243, 233, .28);
  color: rgba(247, 243, 233, .85);
  transition: color .3s, border-color .3s, background .3s;
}
.ctai .contact a:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(235, 176, 34, .12);
}

/* 6b. SOCIAL PROOF --------------------------------------------------------- */
.sec-tight { padding: 90px 0 0; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.stat {
  padding: 34px 20px;
  text-align: center;
  border-top: 1px solid var(--border);
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.2vw, 56px);
  line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat span {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mut);
}

.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 60px;
}
.quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 34px 30px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .45));
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -40px rgba(13, 27, 42, .5);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.quote:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(13, 27, 42, .55); }
.quote blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--n9);
}
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after { content: "\201D"; }
/* The result line is the point of the card, so it sits apart from the quote. */
.quote .qres {
  margin-top: 22px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gd);
  background: rgba(235, 176, 34, .14);
  border: 1px solid rgba(235, 176, 34, .3);
}
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.quote .qa {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #0d1b2a;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
}
.quote figcaption b { display: block; font-size: 16px; }
.quote figcaption span { display: block; margin-top: 3px; font-size: 14px; color: var(--mut); }

.stack-label {
  margin-top: 70px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gd);
}
.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 0;
}
.stack li {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--n6);
  background: rgba(65, 90, 119, .1);
  border: 1px solid var(--border);
  transition: color .3s, border-color .3s, background .3s;
}
.stack li:hover {
  color: var(--gd);
  border-color: var(--gold);
  background: rgba(235, 176, 34, .12);
}

/* 7. RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 900px) {
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; }
  .rail { display: none; }
  .vis { height: 520px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .quotes { grid-template-columns: 1fr; margin-top: 44px; }
}
@media (max-width: 620px) {
  .g3 { grid-template-columns: 1fr; }
  .sec-tight { padding-top: 60px; }
  .stat { padding: 24px 10px; }
  .hero-in { padding-top: 140px; padding-bottom: 110px; }
  .chip.c1 { left: -8px; }
  .chip.c2 { right: -4px; }
  .ctai { padding: 60px 22px; }
  .hero-video { opacity: .22; }
  .chip { padding: 10px 14px; font-size: 13px; }
  .laptop-nav { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .sk::after, .shim::after { display: none; }
  .laptop-screen { transition: none; }
  .float, .chip.c1, .chip.c2 { animation: none; }
}