/* Yunsha homepage — premium, product-first, full-width storytelling. */
:root {
  --hp-ink: #07142f;
  --hp-muted: #687188;
  --hp-line: rgba(14, 31, 68, 0.1);
  --hp-purple: #783cff;
  --hp-pink: #e82c91;
  --hp-blue: #278cf5;
  --hp-cyan: #16cfe3;
  --hp-paper: #fbfcff;
  --hp-shell: min(1440px, calc(100vw - 96px));
  --hp-radius: 32px;
  --hp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }
body.home-premium {
  margin: 0;
  overflow-x: hidden;
  background: #fff;
  color: var(--hp-ink);
  font-family: Inter, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.home-premium *, .home-premium *::before, .home-premium *::after { box-sizing: border-box; }
.home-premium img, .home-premium video { max-width: 100%; }
.home-premium a { color: inherit; }
.home-premium button { font: inherit; }
.home-premium .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.hp-shell { width: var(--hp-shell); margin-inline: auto; }
.hp-shell--wide { width: min(1720px, calc(100vw - 48px)); }

/* Header */
.home-premium .hp-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 72px;
  padding: 0;
  background: rgba(255, 255, 255, 0.82);
  border: 0;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: saturate(1.4) blur(18px);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.home-premium .hp-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--hp-line);
  box-shadow: 0 10px 40px rgba(18, 27, 64, 0.07);
}
.home-premium .header-inner {
  width: var(--hp-shell);
  max-width: none;
  height: 72px;
  margin: 0 auto;
  padding: 0;
}
.home-premium .brand { gap: 9px; }
.home-premium .brand-title {
  color: var(--hp-ink);
  font-family: Manrope, sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -.035em;
}
.home-premium .nav-links { gap: 34px; }
.home-premium .nav-links a,
.home-premium .hp-link {
  color: #202a42;
  font-size: .91rem;
  font-weight: 600;
  text-decoration: none;
}
.home-premium .nav-links a:hover,
.home-premium .hp-link:hover { color: var(--hp-purple); }
.home-premium .nav-actions { gap: 20px; }
.home-premium .btn {
  min-height: 46px;
  padding: 0 21px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .3s var(--hp-ease), box-shadow .3s ease, background .3s ease;
}
.home-premium .btn:hover { transform: translateY(-2px); }
.home-premium .btn.primary {
  background: #0a1631;
  color: #fff;
  border: 1px solid #0a1631;
  box-shadow: 0 10px 24px rgba(7, 20, 47, .14);
}
.home-premium .btn.primary:hover { background: var(--hp-purple); border-color: var(--hp-purple); color: #fff; }
.home-premium .btn.ghost { background: #fff; border: 1px solid var(--hp-line); color: var(--hp-ink); }
.home-premium .menu-toggle { display: none; }
.home-premium .mobile-menu {
  position: fixed;
  z-index: 99;
  inset: 72px 16px auto;
  padding: 18px;
  border: 1px solid var(--hp-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 24px 60px rgba(7, 20, 47, .14);
}

/* 1 — Product first */
.product-hero {
  position: relative;
  min-height: 100svh;
  padding: 104px max(24px, 4vw) 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 12%, rgba(112, 153, 255, .13), transparent 29%),
    radial-gradient(circle at 25% 78%, rgba(240, 135, 253, .14), transparent 27%),
    linear-gradient(180deg, #fff, #fbfbff 75%, #fff);
}
.product-hero__aura {
  position: absolute;
  z-index: -1;
  border-radius: 42% 58% 67% 33% / 53% 40% 60% 47%;
  filter: blur(1px);
  opacity: .75;
  transform: rotate(-14deg);
}
.product-hero__aura--one {
  width: 72vw;
  height: 45vw;
  left: 2vw;
  top: 12vh;
  background: linear-gradient(120deg, rgba(77, 139, 255, .16), rgba(174, 80, 255, .21) 55%, rgba(251, 143, 217, .2));
}
.product-hero__aura--two {
  width: 53vw;
  height: 31vw;
  right: -8vw;
  bottom: 6vh;
  background: linear-gradient(135deg, rgba(255, 202, 105, .18), rgba(236, 80, 211, .18), rgba(72, 117, 255, .14));
  transform: rotate(18deg);
}
.product-hero__stage {
  position: relative;
  width: min(1260px, 80vw, 132vh);
  perspective: 1800px;
}
.product-hero__screen {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(98, 94, 179, .16);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 45px 100px rgba(74, 56, 164, .19), 0 8px 30px rgba(14, 28, 68, .11);
  transform: perspective(1800px) rotateX(1.5deg) rotateY(-1.8deg);
}
.product-hero__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.product-hero__screen img { display: block; width: 100%; height: auto; }
.product-hero__actions {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.hp-play {
  padding: 7px 18px 7px 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(113, 69, 239, .16);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--hp-ink);
  box-shadow: 0 14px 40px rgba(63, 44, 138, .12);
  cursor: pointer;
  text-align: left;
  transition: transform .3s var(--hp-ease), box-shadow .3s ease;
}
.hp-play:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(63, 44, 138, .2); }
.hp-play__icon {
  width: 46px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #5a41ff, #c336ec 65%, #ff4f78);
  box-shadow: 0 8px 20px rgba(119, 60, 242, .32);
}
.hp-play__icon svg { width: 24px; fill: currentColor; }
.hp-play strong, .hp-play small { display: block; }
.hp-play strong { font-size: .94rem; }
.hp-play small { margin-top: 2px; color: var(--hp-muted); font-size: .72rem; }
.hp-quiet-link { color: #566078; font-size: .88rem; font-weight: 600; text-decoration: none; }
.hp-quiet-link span { margin-left: 8px; color: var(--hp-purple); }
.product-hero__note {
  position: absolute;
  z-index: 2;
  color: #5f70ff;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: clamp(.9rem, 1.2vw, 1.18rem);
  font-weight: 500;
  line-height: 1.35;
  transform: rotate(-5deg);
}
.product-hero__note svg { display: block; width: 82px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.product-hero__note--right { top: 14%; right: 3.5%; }
.product-hero__note--left { left: 3%; bottom: 17%; }
.product-hero__note--left svg { transform: translateX(38px) rotate(18deg); }

/* Shared typography */
.hp-kicker {
  margin: 0 0 14px;
  color: #7650f5;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.35;
  text-transform: uppercase;
}
.hp-kicker--light { color: rgba(255,255,255,.7); }
.hp-section-head { max-width: 950px; margin: 0 auto 48px; text-align: center; }
.hp-section-head h2,
.statement h2,
.invoice-showcase h2,
.sasha-showcase h2,
.pricing-lite h2,
.final-cta h2 {
  margin: 0;
  color: var(--hp-ink);
  font-family: Manrope, sans-serif;
  font-size: clamp(2.2rem, 4.7vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1.03;
}
.hp-section-head h2 span,
.invoice-showcase h2 span,
.sasha-showcase h2 span,
.pricing-lite h2 span,
.lifestyle-banner h2 span {
  color: transparent;
  background: linear-gradient(100deg, #5b56ff, #b73bdd 46%, #f43f72 78%, #ff8c45);
  background-clip: text;
  -webkit-background-clip: text;
}
.hp-section-head > p:last-child {
  max-width: 720px;
  margin: 20px auto 0;
  color: var(--hp-muted);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.6;
}

/* 2 — Statement */
.statement { padding: clamp(120px, 15vw, 240px) 0; background: #fff; }
.statement .hp-shell { text-align: center; }
.statement h2 { font-size: clamp(3rem, 7.8vw, 7.8rem); line-height: .98; }
.statement h2 span {
  color: transparent;
  background: linear-gradient(90deg, #3987ef 0, #863df2 32%, #e12d91 63%, #ff502f 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

/* 3 & 7 — Full-width lifestyle */
.lifestyle-banner {
  position: relative;
  min-height: min(920px, 87vh);
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #fff;
  background: #090e19;
}
.lifestyle-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lifestyle-banner--founder > img { object-position: center; }
.lifestyle-banner--thomas > img { object-position: center; }
.lifestyle-banner__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 7, 18, .94) 0, rgba(2, 7, 18, .76) 31%, rgba(2, 7, 18, .12) 68%, rgba(2, 7, 18, .08));
}
.lifestyle-banner__content {
  position: relative;
  z-index: 1;
  width: var(--hp-shell);
  margin: 0 auto;
  padding-block: 100px;
}
.lifestyle-banner__content > p:not(.hp-kicker) { max-width: 610px; font-size: clamp(1rem, 1.4vw, 1.24rem); line-height: 1.6; color: rgba(255,255,255,.85); }
.lifestyle-banner h2 { margin: 0 0 22px; max-width: 820px; font: 800 clamp(2.8rem, 5.8vw, 6rem)/1 Manrope, sans-serif; letter-spacing: -.055em; color: #fff; }
.home-premium .lifestyle-banner .hp-btn-light,
.home-premium .final-cta .hp-btn-light { margin-top: 18px; color: var(--hp-ink) !important; background: #fff; border: 0; box-shadow: 0 15px 38px rgba(0,0,0,.2); }
.home-premium .lifestyle-banner .hp-btn-light span,
.home-premium .final-cta .hp-btn-light span { color: inherit !important; }
.home-premium .lifestyle-banner .hp-btn-light:hover,
.home-premium .final-cta .hp-btn-light:hover { color: #fff !important; background: var(--hp-purple); }
.benefit-row, .time-benefits { padding: 0; margin: 42px 0 0; list-style: none; }
.benefit-row { display: flex; gap: 38px; flex-wrap: wrap; }
.benefit-row li { display: flex; align-items: center; gap: 11px; font-size: .94rem; font-weight: 600; }
.benefit-row li > span,
.time-benefits li > span {
  width: 42px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(181, 105, 255, .55);
  border-radius: 14px;
  background: rgba(83, 38, 157, .3);
  color: #d6baff;
}
.lifestyle-banner blockquote { max-width: 620px; margin: 0 0 5px; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.55; color: rgba(255,255,255,.9); }
.time-benefits { display: grid; gap: 18px; }
.time-benefits li { display: flex; align-items: center; gap: 15px; font-weight: 600; }

/* 4 — Invoicing */
.invoice-showcase { padding: clamp(110px, 12vw, 190px) 0; overflow: hidden; background: linear-gradient(135deg, #fff 10%, #fbfbff 54%, #f1efff); }
.invoice-showcase__grid { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(600px, 1.6fr); align-items: center; gap: clamp(46px, 6vw, 100px); }
.invoice-showcase__copy { position: relative; z-index: 2; }
.invoice-showcase__copy h2 { font-size: clamp(3.2rem, 5.2vw, 5.7rem); }
.invoice-showcase__copy > p:not(.hp-kicker) { max-width: 560px; margin: 25px 0; color: #4d5871; font-size: 1.08rem; line-height: 1.65; }
.home-premium .hp-gradient-btn,
.home-premium .hp-gradient-btn:visited,
.home-premium .btn.primary,
.home-premium .btn.primary:visited { color: #fff !important; }
.hp-gradient-btn { color: #fff !important; border: 0; background: linear-gradient(110deg, #5526dc, #873af4 55%, #c83fdb); box-shadow: 0 15px 34px rgba(102, 50, 221, .26); }
.hp-gradient-btn:hover { color: #fff !important; box-shadow: 0 21px 42px rgba(102, 50, 221, .34); }
.hp-gradient-btn > * { color: inherit !important; }
.invoice-showcase__benefits { display: flex; gap: 42px; padding: 0; margin: 46px 0 0; list-style: none; color: #172342; font-size: .88rem; font-weight: 600; line-height: 1.45; }
.invoice-showcase__benefits span { width: 42px; aspect-ratio: 1; margin-bottom: 8px; display: grid; place-items: center; border-radius: 13px; background: #f0eaff; color: var(--hp-purple); font-size: 1.1rem; }
.invoice-showcase__visual { position: relative; min-width: 0; }
.product-window,
.product-tabs__screen,
.sasha-showcase__screen {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(33, 46, 86, .08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 35px 85px rgba(45, 35, 133, .15), 0 8px 26px rgba(10, 28, 70, .08);
}
.product-window img,
.product-tabs__screen img,
.sasha-showcase__screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-window--crop-logo img,
.product-window--crop-logo video { width: 118%; max-width: none; transform: translateX(-15%); object-position: right center; }
.invoice-showcase__scribble { position: absolute; top: -70px; left: -30px; color: #7054ff; font: 500 1rem/1.3 "Segoe Print", cursive; transform: rotate(-7deg); }

.safe-peppol-card {
  padding: clamp(14px, 1.6vw, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 16px);
  color: #17213c;
  font-size: clamp(7px, .66vw, 12px);
}
.safe-peppol-card__head { display: flex; align-items: center; gap: 12px; }
.safe-peppol-card__head > span { width: 42px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; background: #eee7ff; color: var(--hp-purple); font-size: 1.5em; }
.safe-peppol-card__head div { display: grid; gap: 2px; }
.safe-peppol-card__head strong { font-size: 1.25em; }
.safe-peppol-card__head small { color: #7a8499; }
.safe-peppol-card__head button { margin-left: auto; padding: 8px 12px; border: 1px solid #dce2ee; border-radius: 9px; background: #fff; color: #17213c; font-weight: 700; }
.safe-peppol-card__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.safe-peppol-card__stats p { margin: 0; padding: 11px 13px; display: grid; border: 1px solid #e4e8f1; border-radius: 10px; background: #f8faff; color: #788298; }
.safe-peppol-card__stats span { color: #111a31; font-size: 1.45em; font-weight: 800; }
.safe-peppol-card__search { padding: 10px 13px; border: 1px solid #d9dfee; border-radius: 10px; color: #8790a4; }
.safe-peppol-card__search b { float: right; padding: 2px 8px; border-radius: 999px; background: #7b3cf3; color: #fff; font-size: .85em; text-transform: uppercase; }
.safe-peppol-card__table { overflow: hidden; border: 1px solid #e1e6ef; border-radius: 11px; }
.safe-peppol-card__table > div { display: grid; grid-template-columns: 1.25fr 1.5fr .8fr .7fr .7fr; gap: 8px; padding: 10px 12px; align-items: center; background: #fff; border-top: 1px solid #edf0f5; }
.safe-peppol-card__table .is-head { border: 0; background: #f0f4fa; color: #657187; font-size: .78em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.safe-peppol-card__table .is-paid,
.safe-peppol-card__table .is-valid { justify-self: start; padding: 4px 7px; border-radius: 999px; background: #def8ea; color: #07955a; font-weight: 800; }

/* 5 — Product tabs */
.product-tabs { padding: clamp(110px, 12vw, 185px) 0; background: linear-gradient(180deg, #fff, #f5f7ff 62%, #fff); }
.product-tabs__bar {
  margin: 0 auto 28px;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--hp-line);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 16px 50px rgba(59, 63, 125, .08);
}
.product-tabs__bar button {
  min-width: 0;
  padding: 15px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #22315b;
  font-size: clamp(.72rem, .9vw, .9rem);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background .35s ease, color .35s ease, box-shadow .35s ease, transform .35s var(--hp-ease);
}
.product-tabs__bar button:hover { transform: translateY(-1px); color: var(--hp-purple); }
.product-tabs__bar button.is-active { color: #fff; background: linear-gradient(110deg, #6547ff, #9b42ed); box-shadow: 0 10px 25px rgba(105, 69, 238, .28); }
.product-tabs__bar button span { font-size: 1.15em; }
.product-tabs__viewer { position: relative; padding: clamp(14px, 1.6vw, 24px); border: 1px solid rgba(42, 53, 99, .1); border-radius: 36px; background: rgba(255,255,255,.8); box-shadow: 0 35px 100px rgba(83, 71, 167, .15); }
.product-tabs__screen { border-radius: 22px; box-shadow: none; transition: opacity .18s ease, transform .28s var(--hp-ease); }
.product-tabs__viewer.is-switching .product-tabs__screen { opacity: .32; transform: scale(.988); }
.product-tabs__meta {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 0 13px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: auto 1fr 1.25fr;
  gap: 16px;
  align-items: center;
  border: 1px solid #e6e9f1;
  border-radius: 14px;
  background: #fff;
  color: var(--hp-ink);
}
.product-tabs__meta p { margin: 0; padding: 6px 10px; border-radius: 999px; background: #eee8ff; color: #7444e8; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.product-tabs__meta h3 { margin: 0; color: var(--hp-ink); font: 700 clamp(.9rem, 1.25vw, 1.15rem)/1.2 Manrope, sans-serif; }
.product-tabs__meta span { color: var(--hp-muted); font-size: .78rem; line-height: 1.4; }

/* Product demos contain fictional, non-personal data only. */
.product-demo { position: relative; overflow: hidden; background: #eaf0f7; color: #17213b; font-size: clamp(8px, .72vw, 13px); }
.demo-panel { width: 100%; height: 100%; background: #edf2f8; }
.demo-panel[hidden] { display: none !important; }
.demo-panel.is-active { display: block; }
.demo-app { height: 100%; display: grid; grid-template-columns: 12.5em minmax(0, 1fr); }
.demo-nav { padding: 1.8em 1.25em; display: flex; flex-direction: column; gap: .5em; background: #111d38; color: rgba(255,255,255,.72); }
.demo-nav strong { margin-bottom: 1.4em; color: #fff; font-size: 1.15em; }
.demo-nav span { padding: .78em .85em; border-radius: .7em; font-weight: 650; }
.demo-nav span.is-current { color: #fff; background: linear-gradient(110deg, rgba(70,105,245,.45), rgba(123,60,243,.42)); box-shadow: inset 0 0 0 1px rgba(136,157,255,.36); }
.demo-main { min-width: 0; padding: 1.25em; display: flex; flex-direction: column; gap: 1em; }
.demo-topbar { min-height: 4.6em; padding: .8em 1.1em; display: flex; align-items: center; justify-content: space-between; gap: 2em; border-radius: .9em; background: #fff; box-shadow: 0 .3em 1.2em rgba(28,43,75,.06); }
.demo-topbar > div { display: grid; gap: .2em; }
.demo-topbar small { color: #7650f5; font-size: .72em; font-weight: 800; letter-spacing: .12em; }
.demo-topbar strong { font-size: 1.25em; }
.demo-topbar > span,
.demo-topbar button { padding: .65em .9em; border: 1px solid #dde3ed; border-radius: .7em; background: #fff; color: #25304b; font-weight: 700; }
.demo-topbar button { border: 0; background: #7b3cf3; color: #fff; }
.demo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9em; }
.demo-stats p { margin: 0; padding: 1em 1.1em; display: grid; gap: .2em; border-radius: .85em; background: #fff; box-shadow: 0 .3em 1.1em rgba(28,43,75,.05); }
.demo-stats small { color: #778198; }
.demo-stats b { color: #101a31; font-size: 1.45em; }
.demo-stats em { color: #0ba765; font-size: .77em; font-style: normal; }
.demo-card { min-height: 0; flex: 1; overflow: hidden; border-radius: .9em; background: #fff; box-shadow: 0 .3em 1.1em rgba(28,43,75,.05); }
.demo-card__head { padding: 1em 1.2em; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e8ebf1; }
.demo-card__head button { padding: .65em .9em; border: 0; border-radius: .65em; background: #7b3cf3; color: #fff; font-weight: 700; }
.demo-search { min-width: 22em; padding: .65em 1em; border: 1px solid #e0e5ed; border-radius: .65em; color: #8a93a5; }
.demo-table { display: grid; }
.demo-table > div { min-height: 4.8em; padding: .8em 1.2em; display: grid; grid-template-columns: 1.25fr 1.25fr .8fr .8fr .65fr; gap: 1.3em; align-items: center; border-top: 1px solid #edf0f5; }
.demo-table > div:nth-child(odd):not(.is-head) { background: #f7f9fc; }
.demo-table .is-head { min-height: auto; color: #6d778e; font-size: .76em; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.demo-table span { min-width: 0; }
.demo-table span > b,
.demo-table span > small { display: block; }
.demo-table span > small { margin-top: .3em; color: #8992a5; }
.demo-pill { justify-self: start; padding: .45em .7em; border-radius: 999px; font-size: .78em; font-weight: 800; }
.demo-pill.is-green { background: #dcf8ea; color: #098a57; }
.demo-pill.is-blue { background: #e2efff; color: #216ed6; }
.demo-pill.is-orange { background: #fff0d8; color: #bd7110; }
.demo-pill.is-purple { background: #eee6ff; color: #7442df; }

.demo-mail { height: 100%; display: grid; grid-template-columns: 14em 25em minmax(0, 1fr); gap: 1px; background: #dce3ee; }
.demo-mail__folders, .demo-mail__list, .demo-mail__reader { min-width: 0; background: #f7f9fc; }
.demo-mail__folders { padding: 1.4em 1em; display: flex; flex-direction: column; gap: .35em; }
.demo-mail__folders > strong { font-size: 1.15em; }
.demo-mail__folders > small { color: #667188; }
.demo-mail__folders p { margin: 1em 0 .3em; color: #707a90; font-size: .72em; font-weight: 800; letter-spacing: .12em; }
.demo-mail__folders span { padding: .6em .75em; border-radius: .6em; font-weight: 650; }
.demo-mail__folders span.is-current { background: #111d38; color: #fff; }
.demo-mail__list { overflow: hidden; }
.demo-mail__search { margin: 1em; padding: .75em 1em; border: 1px solid #dfe5ee; border-radius: .7em; background: #fff; color: #8a93a6; }
.demo-mail__list button { position: relative; width: 100%; padding: 1em 4em 1em 1.2em; display: grid; gap: .28em; border: 0; border-top: 1px solid #e4e8ef; background: #fff; color: #17213b; text-align: left; cursor: pointer; }
.demo-mail__list button.is-read { background: #f0f4ff; border-left: .3em solid #6f47ed; }
.demo-mail__list button b { color: #59647a; }
.demo-mail__list button strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo-mail__list button span { overflow: hidden; color: #788298; white-space: nowrap; text-overflow: ellipsis; }
.demo-mail__list button small { position: absolute; top: 1em; right: 1em; color: #788298; }
.demo-mail__reader { position: relative; padding: 1.5em; overflow: hidden; background: #fff; }
.demo-mail__reader-head { padding-bottom: 1.2em; display: flex; justify-content: space-between; gap: 1em; border-bottom: 1px solid #e5e9f0; }
.demo-mail__reader-head small { color: #7650f5; font-weight: 800; letter-spacing: .1em; }
.demo-mail__reader-head h4 { margin: .45em 0; font-size: 1.35em; }
.demo-mail__reader-head p { margin: 0; color: #6d778c; font-size: .83em; line-height: 1.45; }
.demo-mail__body { width: 62%; padding-top: 1.5em; color: #39445b; font-size: .95em; line-height: 1.65; }
.demo-sasha { position: absolute; top: 8em; right: 1.3em; width: 31%; padding: 1.1em; border: 1px solid #d9ccff; border-radius: 1em; background: #fbf9ff; box-shadow: 0 .7em 2em rgba(82,50,163,.1); }
.demo-sasha b { color: #6234d6; }
.demo-sasha p { color: #59647a; line-height: 1.45; }
.demo-sasha button { width: 100%; padding: .8em; border: 0; border-radius: .7em; background: #7c3aed; color: #fff; font-weight: 750; }

.demo-calendar { height: 100%; padding: 1em; background: #eef2f8; }
.demo-calendar__top { min-height: 4.6em; padding: .8em 1em; display: grid; grid-template-columns: 1fr auto auto; gap: 1.5em; align-items: center; border-radius: .85em; background: #fff; }
.demo-calendar__top > div:first-child { display: grid; gap: .2em; }
.demo-calendar__top small { color: #7650f5; font-size: .72em; font-weight: 800; letter-spacing: .12em; }
.demo-calendar__top strong { font-size: 1.2em; }
.demo-calendar__top > button,
.demo-calendar__modes button { padding: .65em 1em; border: 1px solid #dce2ec; border-radius: .7em; background: #fff; color: #26314a; font-weight: 700; }
.demo-calendar__top > button { border: 0; background: #7b3cf3; color: #fff; }
.demo-calendar__modes { padding: .25em; display: flex; gap: .25em; border-radius: .8em; background: #f0f3f8; }
.demo-calendar__modes button { border: 0; background: transparent; }
.demo-calendar__modes button.is-active { background: #fff; color: #6735db; box-shadow: 0 .2em .8em rgba(29,43,75,.08); }
.demo-calendar__view { height: calc(100% - 5.6em); margin-top: 1em; overflow: hidden; border-radius: .85em; background: #fff; }
.demo-calendar__view[hidden] { display: none !important; }
.demo-calendar__month { height: 3.7em; display: flex; align-items: center; justify-content: center; gap: 2em; border-bottom: 1px solid #e4e8ef; }
.demo-calendar__month h4 { margin: 0; font-size: 1.35em; text-transform: capitalize; }
.demo-calendar__month button { border: 0; background: transparent; font-size: 1.4em; }
.demo-calendar__grid { height: calc(100% - 3.7em); display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 2.2em repeat(5, 1fr); }
.demo-calendar__grid > b { display: grid; place-items: center; border-right: 1px solid #e4e8ef; border-bottom: 1px solid #e4e8ef; font-size: .76em; text-transform: uppercase; }
.demo-calendar__grid > div { min-width: 0; padding: .45em; border-right: 1px solid #e4e8ef; border-bottom: 1px solid #e4e8ef; color: #566078; text-align: right; }
.demo-calendar__grid > div.is-muted { color: #b7bdca; background: #f7f9fc; }
.demo-calendar__grid .event { margin-top: .35em; padding: .35em .45em; display: block; overflow: hidden; border-radius: .35em; color: #fff; font-size: .7em; font-weight: 750; white-space: nowrap; text-align: left; text-overflow: ellipsis; }
.demo-calendar .is-blue { background: #3b82f6; }
.demo-calendar .is-purple { background: #8b5cf6; }
.demo-calendar .is-green { background: #10b981; }
.demo-calendar .is-orange { background: #f59e0b; }
.demo-planning { height: 100%; overflow: auto; padding: 1em 1.4em; }
.demo-planning section { margin-bottom: 1.25em; }
.demo-planning h4 { margin: 0 0 .5em; padding-bottom: .5em; border-bottom: 1px solid #e4e8ef; color: #2163cc; font-size: 1.1em; }
.demo-planning p { margin: 0; padding: .7em 0; display: grid; grid-template-columns: 5em .7em 1fr auto; gap: 1em; align-items: center; border-bottom: 1px solid #eef1f5; }
.demo-planning time { font-weight: 750; }
.demo-planning p > span { width: .7em; height: .7em; border-radius: 50%; }
.demo-planning em { color: #7c8598; font-style: normal; }

.demo-accounting { padding: 1.2em; display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5em; }
.demo-accounting > div { padding: 1em; border: 1px solid #e5e9ef; border-radius: .8em; }
.demo-bars { height: 16em; margin-top: 1.4em; display: flex; align-items: end; gap: 5%; border-bottom: 1px solid #dce2eb; }
.demo-bars i { width: 7%; height: var(--h); border-radius: .5em .5em 0 0; background: linear-gradient(180deg, #7f4cef, #4f86f7); }
.demo-accounting p { padding: .9em 0; display: flex; justify-content: space-between; border-bottom: 1px solid #edf0f5; }

.demo-peppol { height: 100%; padding: 1em; display: flex; flex-direction: column; gap: .9em; background: #eef2f8; }
.demo-peppol__head { padding: .9em 1em; display: flex; align-items: center; justify-content: space-between; border-radius: .85em; background: #fff; }
.demo-peppol__head > div { display: flex; align-items: center; gap: .8em; }
.demo-peppol__head > div > span { width: 2.8em; height: 2.8em; display: grid; place-items: center; border-radius: .8em; background: #eee7ff; color: #7141e5; font-size: 1.25em; }
.demo-peppol__head > div > div { display: grid; gap: .2em; }
.demo-peppol__head strong { font-size: 1.25em; }
.demo-peppol__head small { color: #727d91; }
.demo-peppol__head button { padding: .65em .9em; border: 1px solid #dce2ec; border-radius: .7em; background: #fff; font-weight: 700; }
.demo-peppol__filters { padding: .75em 1em; display: grid; grid-template-columns: 1fr auto auto auto; gap: .7em; border-radius: .85em; background: #fff; }
.demo-peppol__filters span { padding: .7em .85em; border: 1px solid #dde3ec; border-radius: .65em; color: #778197; }
.demo-peppol__filters button { padding: .7em 1em; border: 0; border-radius: .65em; background: #7b3cf3; color: #fff; font-weight: 750; }
.demo-table--peppol { flex: 1; overflow: hidden; border-radius: .85em; background: #fff; }
.demo-table--peppol > div { min-height: 4em; grid-template-columns: 1.2fr 1.5fr .7fr .65fr .65fr .75fr; }

/* 6 — Stories carousel */
.stories { padding: clamp(110px, 12vw, 185px) 0; background: #fff; }
.stories__viewport { position: relative; }
.stories__track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 4px 2px 24px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.stories__track::-webkit-scrollbar { display: none; }
.story-card {
  position: relative;
  flex: 0 0 calc((100% - 44px) / 3);
  min-height: 570px;
  overflow: hidden;
  border-radius: 26px;
  background: #0a0e18;
  color: #fff;
  scroll-snap-align: start;
  box-shadow: 0 20px 45px rgba(16, 24, 51, .1);
}
.story-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(0,0,0,.2) 47%, rgba(1,5,13,.96) 100%); }
.story-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--hp-ease); }
.story-card:first-child img { object-position: 70% center; }
.story-card:nth-child(4) img { object-position: 67% center; }
.story-card:hover img { transform: scale(1.04); }
.story-card > div { position: absolute; z-index: 2; inset: auto 26px 27px; }
.story-card__tag { margin: 0 0 26px; padding-left: 38px; color: #fff; font-size: .9rem; font-weight: 700; }
.story-card__tag::before { content: ""; position: absolute; left: 0; width: 27px; height: 27px; border-radius: 9px; background: linear-gradient(135deg, #8567ff, #c05bee); box-shadow: 0 6px 16px rgba(120,60,255,.4); }
.story-card h3 { margin: 0 0 12px; color: #fff; font: 600 clamp(1.08rem, 1.5vw, 1.34rem)/1.35 Manrope, sans-serif; }
.story-card > div > p:last-child { margin: 0; color: rgba(255,255,255,.68); font-size: .88rem; }
.stories__arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 54px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid var(--hp-line);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: var(--hp-ink);
  box-shadow: 0 14px 34px rgba(12, 22, 48, .14);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}
.stories__arrow:hover { background: var(--hp-ink); color: #fff; }
.stories__arrow--prev { left: -27px; }
.stories__arrow--next { right: -27px; }
.stories__dots { display: flex; justify-content: center; gap: 8px; margin-top: 15px; }
.stories__dots span { width: 7px; height: 7px; border-radius: 20px; background: #d8dce8; transition: width .3s ease, background .3s ease; }
.stories__dots span.is-active { width: 28px; background: var(--hp-purple); }

/* 8 — Modules */
.modules { padding: clamp(110px, 12vw, 185px) 0; background: linear-gradient(180deg, #fff, #fafbff); }
.modules__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.module-card { min-width: 0; padding: 16px 16px 24px; overflow: hidden; border: 1px solid var(--hp-line); border-radius: 24px; background: rgba(255,255,255,.86); color: var(--hp-ink); text-decoration: none; transition: transform .45s var(--hp-ease), box-shadow .45s ease, border-color .35s ease; }
.module-card:hover { transform: translateY(-8px); border-color: rgba(118, 80, 245, .28); box-shadow: 0 26px 60px rgba(24, 31, 75, .1); }
.module-card__art { height: 200px; margin-bottom: 20px; display: grid; place-items: center; border-radius: 18px; background: #f3efff; }
.module-card__art--rose { background: #fff0f3; }
.module-card__art--blue { background: #eef4ff; }
.module-card__art--green { background: #ecfaf4; }
.module-card__art--orange { background: #fff5e9; }
.module-card__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #eee8ff; color: #7944e9; font-size: 1.1rem; font-weight: 800; }
.module-card__icon--rose { background: #ffe7ed; color: #ed315a; }
.module-card__icon--green { background: #e0f9ee; color: #0bab6b; }
.module-card__icon--orange { background: #fff0de; color: #f08a1d; }
.module-card h3 { margin: 15px 0 10px; color: var(--hp-ink); font: 700 clamp(1rem, 1.2vw, 1.2rem)/1.25 Manrope, sans-serif; }
.module-card > p { min-height: 94px; margin: 0 0 18px; color: var(--hp-muted); font-size: .9rem; line-height: 1.55; }
.module-card__link { display: inline-block; color: var(--hp-purple); font-size: .85rem; font-weight: 700; }
.module-doc { position: relative; width: 142px; height: 142px; padding: 18px; transform: rotate(3deg); border-radius: 12px; background: #fff; color: var(--hp-purple); font: 800 1.3rem Manrope; box-shadow: 0 18px 35px rgba(70,51,157,.15); }
.module-doc i { display: block; width: 75%; height: 7px; margin-top: 14px; border-radius: 8px; background: #e2e4ef; }
.module-doc i + i { width: 55%; }
.module-doc b { position: absolute; right: -12px; bottom: 22px; padding: 8px 12px; border-radius: 7px; background: #27c879; color: #fff; font-size: .72rem; }
.module-alert { width: 78%; padding: 13px 14px; display: block; border: 1px solid rgba(232,48,86,.15); border-radius: 11px; background: #fff; color: #c52f4d; font-size: .75rem; font-weight: 700; box-shadow: 0 9px 20px rgba(123,44,64,.08); }
.module-alert + .module-alert { margin-top: 10px; color: var(--hp-ink); }
.module-chart { color: #7356f7; font-size: 1.6rem; letter-spacing: 4px; }
.module-card__art--blue > b { display: block; padding: 7px 10px; border-radius: 8px; background: #fff; color: #31405e; font-size: .7rem; box-shadow: 0 8px 18px rgba(34,46,85,.1); }
.module-calendar { width: 72%; padding: 14px; display: grid; gap: 8px; border-radius: 13px; background: #fff; box-shadow: 0 16px 30px rgba(26,99,74,.12); }
.module-calendar b { font-size: .78rem; }
.module-calendar i { padding: 6px; border-radius: 6px; background: #e7e1ff; color: #6445db; font-size: .66rem; font-style: normal; text-align: center; }
.module-calendar i:last-child { background: #dcf8ec; color: #088653; }
.module-people { width: 78%; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; color: #4d5871; font-size: .68rem; }
.module-people > * { padding: 9px; background: #fff; }
.module-people b { border-radius: 10px 0 0 10px; color: var(--hp-ink); }
.module-people em { border-radius: 0 10px 10px 0; color: #07935a; font-style: normal; }

/* 9 — Sasha */
.sasha-showcase { padding: clamp(110px, 12vw, 185px) 0; overflow: hidden; background: radial-gradient(circle at 18% 80%, rgba(98,74,245,.13), transparent 35%), #fff; }
.sasha-showcase__grid { display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: clamp(48px, 6vw, 100px); }
.sasha-showcase__visual { min-width: 0; }
.sasha-showcase__screen { border-radius: 26px; background: #121229; box-shadow: 0 40px 90px rgba(36, 27, 109, .2); }
.sasha-showcase h2 { font-size: clamp(2.8rem, 5vw, 5.2rem); }
.sasha-showcase__lede { margin: 22px 0 32px; color: var(--hp-muted); font-size: 1.08rem; line-height: 1.6; }
.sasha-features { display: grid; gap: 20px; padding: 0; margin: 0 0 34px; list-style: none; }
.sasha-features li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; }
.sasha-features li > span { width: 52px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 16px; background: #f0eaff; color: var(--hp-purple); font-size: .95rem; font-weight: 800; }
.sasha-features li:nth-child(2) > span { color: #f23564; background: #ffedf1; }
.sasha-features li:nth-child(3) > span { color: #04ab80; background: #e6faf4; }
.sasha-features strong { display: block; color: var(--hp-ink); font: 700 1rem Manrope, sans-serif; }
.sasha-features p { margin: 4px 0 0; color: var(--hp-muted); font-size: .88rem; line-height: 1.45; }

/* Pricing and final CTA */
.pricing-lite { padding: clamp(110px, 12vw, 185px) 0; background: #f7f8fc; }
.pricing-lite__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-card { position: relative; padding: 35px; display: flex; flex-direction: column; border: 1px solid var(--hp-line); border-radius: 26px; background: #fff; box-shadow: 0 18px 45px rgba(14,28,68,.05); }
.price-card--featured { border-color: rgba(117,63,244,.35); box-shadow: 0 25px 60px rgba(91,54,179,.13); }
.price-card__badge { position: absolute; top: 18px; right: 18px; padding: 7px 11px; border-radius: 999px; background: #efe9ff; color: #6e42d8; font-size: .68rem; font-weight: 800; }
.price-card__promo { align-self: flex-start; margin-bottom: 18px; padding: 7px 11px; border-radius: 999px; background: #ddf8e9; color: #07814f; font-size: .68rem; font-weight: 800; letter-spacing: .03em; }
.price-card__name { min-height: 0 !important; margin: 0; color: var(--hp-ink) !important; font: 900 1.45rem/1.1 Manrope, sans-serif; letter-spacing: -.035em; }
.price-card h3 { margin: 12px 0 15px; font: 800 clamp(2rem, 3.5vw, 3.5rem)/1 Manrope, sans-serif; letter-spacing: -.05em; }
.price-card h3 small { display: block; margin-top: 8px; color: var(--hp-muted); font-size: .72rem; letter-spacing: 0; }
.price-card h3 small strong { color: var(--hp-ink); font-weight: 900; }
.price-card__facts { margin: 0 0 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.price-card__fact { min-width: 0; padding: 10px 11px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #e7e2fb; border-radius: 13px; background: #f8f6ff; color: #5d42b8; }
.price-card__fact strong { color: var(--hp-ink); font: 800 .82rem/1.25 Manrope, sans-serif; }
.price-card__fact small { margin-top: 2px; color: #6d7486; font-size: .67rem; font-weight: 650; }
.price-card__fact--user strong { font-size: .96rem; }
.price-card__fact--storage { grid-column: 1 / -1; background: #f5f8ff; }
.price-card__facts--two .price-card__fact--user { background: #f1ebff; }
.price-card > p:not(.hp-kicker):not(.price-card__name) { min-height: 52px; color: var(--hp-muted); line-height: 1.55; }
.price-card__summary { margin-bottom: 14px; }
.price-card__modules-title { min-height: 0 !important; margin: 4px 0 5px; color: var(--hp-ink) !important; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.price-card__features { padding: 0; margin: 0 0 24px; list-style: none; }
.price-card__features li { position: relative; padding: 10px 0 10px 24px; border-bottom: 1px solid #edf0f5; color: #525d74; font-size: .85rem; line-height: 1.4; }
.price-card__features li::before { content: "✓"; position: absolute; left: 0; color: #7945eb; font-weight: 900; }
.price-card__features strong { color: var(--hp-ink); }
.price-card__plugins { padding: 4px 0 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; }
.price-card__plugins li { padding: 10px 12px; border: 1px solid #ebe7fb; border-radius: 12px; background: #faf9ff; }
.price-card__plugins strong { display: block; margin-bottom: 3px; color: var(--hp-ink); font-size: .78rem; }
.price-card__plugins span { display: block; color: #606b81; font-size: .72rem; line-height: 1.4; }
.price-card__setup { min-height: 122px; margin: auto 0 18px; padding: 16px; display: grid; align-content: center; gap: 5px; border-radius: 16px; background: #f7f5ff; }
.price-card__setup > span { color: #6e42d8; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.price-card__setup b { color: var(--hp-ink); font-size: 1rem; }
.price-card__setup s { margin-right: 7px; color: #9aa1af; font-weight: 600; }
.price-card__setup small { color: #0a8a56; font-weight: 700; }
.price-card .btn { margin-top: 0; align-self: flex-start; }
.pricing-lite__note { margin: 28px 0 0; color: var(--hp-muted); text-align: center; font-size: .83rem; }
.pricing-lite__note a { color: var(--hp-purple); font-weight: 700; }
.final-cta { padding: clamp(80px, 9vw, 140px) 0; background: linear-gradient(115deg, #111632, #432490 55%, #972878); color: #fff; }
.final-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.final-cta h2 { color: #fff; font-size: clamp(2.4rem, 4.6vw, 4.8rem); }
.final-cta__inner > div:last-child { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.final-cta__inner > div:last-child > a:last-child { color: rgba(255,255,255,.75); font-size: .9rem; }

/* Footer */
.home-premium .hp-footer { padding: 40px 0; background: #070d1b; color: rgba(255,255,255,.68); border: 0; }
.hp-footer__inner { display: grid; grid-template-columns: 1fr auto auto; gap: 60px; align-items: center; }
.hp-footer .brand-title { color: #fff; }
.hp-footer nav { display: flex; gap: 24px; }
.hp-footer a { color: inherit; font-size: .82rem; text-decoration: none; }
.hp-footer a:hover { color: #fff; }

/* Video modal */
.video-modal[hidden] { display: none; }
.video-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; }
.video-modal__backdrop { position: absolute; inset: 0; background: rgba(3, 7, 18, .8); backdrop-filter: blur(14px); }
.video-modal__dialog { position: relative; z-index: 1; width: min(1160px, 94vw); overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; background: #101526; color: #fff; box-shadow: 0 50px 120px rgba(0,0,0,.45); animation: hpModalIn .45s var(--hp-ease) both; }
.video-modal__head { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.video-modal__head p { margin: 0 0 4px; color: #b6a4ff; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.video-modal__head h2 { margin: 0; color: #fff; font: 700 clamp(1.2rem, 2vw, 1.7rem)/1.2 Manrope, sans-serif; }
.video-modal__head button { width: 44px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: rgba(255,255,255,.06); color: #fff; font-size: 1.7rem; cursor: pointer; }
.video-modal video { display: block; width: 100%; background: #050816; }
body.modal-open { overflow: hidden; }
@keyframes hpModalIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

/* Reveal */
.js .hp-reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--hp-ease), transform .9s var(--hp-ease); }
.js .hp-reveal.is-visible { opacity: 1; transform: none; }
.product-hero .hp-reveal { transition-delay: .1s; }

/* Responsive */
@media (max-width: 1240px) {
  :root { --hp-shell: min(100% - 56px, 1180px); }
  .product-hero__stage { width: min(1080px, 84vw); }
  .product-hero__note { display: none; }
  .invoice-showcase__grid { grid-template-columns: .8fr 1.35fr; gap: 45px; }
  .modules__grid { overflow-x: auto; grid-template-columns: repeat(5, minmax(280px, 1fr)); padding-bottom: 18px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .module-card { scroll-snap-align: start; }
  .hp-footer__inner { grid-template-columns: 1fr auto; }
  .hp-footer__inner nav:last-child { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  :root { --hp-shell: min(100% - 40px, 900px); }
  .home-premium .nav-links, .home-premium .hp-link, .home-premium .nav-actions > .btn { display: none; }
  .home-premium .menu-toggle { display: inline-flex; }
  .home-premium .mobile-menu:not([hidden]) { display: grid; }
  .product-hero { min-height: auto; padding-top: 116px; }
  .product-hero__stage { width: 100%; }
  .statement { padding-block: 120px; }
  .lifestyle-banner { min-height: 760px; }
  .lifestyle-banner > img { object-position: 64% center; }
  .lifestyle-banner__shade { background: linear-gradient(90deg, rgba(2,7,18,.91), rgba(2,7,18,.38) 70%, rgba(2,7,18,.1)); }
  .invoice-showcase__grid, .sasha-showcase__grid { grid-template-columns: 1fr; }
  .invoice-showcase__copy { max-width: 680px; }
  .invoice-showcase__visual { margin-left: 10vw; }
  .invoice-showcase__scribble { display: none; }
  .product-tabs__bar { grid-template-columns: repeat(6, minmax(150px, 1fr)); overflow-x: auto; border-radius: 22px; scrollbar-width: none; }
  .product-tabs__bar::-webkit-scrollbar { display: none; }
  .story-card { flex-basis: calc((100% - 22px) / 2); }
  .pricing-lite__grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .price-card > p:not(.hp-kicker):not(.price-card__name) { min-height: 0; }
}

@media (max-width: 680px) {
  :root { --hp-shell: calc(100% - 28px); --hp-radius: 22px; }
  .hp-shell--wide { width: calc(100% - 20px); }
  .home-premium .hp-header, .home-premium .header-inner { height: 64px; }
  .home-premium .mobile-menu { inset: 70px 10px auto; }
  .product-hero { min-height: 88svh; padding: 94px 14px 35px; justify-content: flex-start; }
  .product-hero__stage { margin-top: auto; margin-bottom: auto; }
  .product-hero__screen { border-radius: 14px; box-shadow: 0 24px 55px rgba(74,56,164,.2); transform: none; }
  .product-hero__actions { width: 100%; margin-top: 16px; flex-direction: column; gap: 14px; }
  .hp-play { width: min(100%, 330px); }
  .statement { padding-block: 95px; }
  .statement h2 { font-size: clamp(2.7rem, 14vw, 4.5rem); }
  .lifestyle-banner { min-height: 760px; align-items: flex-end; }
  .lifestyle-banner > img { object-position: 69% center; }
  .lifestyle-banner--thomas > img { object-position: 61% center; }
  .lifestyle-banner__shade { background: linear-gradient(0deg, rgba(2,7,18,.98) 0, rgba(2,7,18,.74) 48%, rgba(2,7,18,.08) 85%); }
  .lifestyle-banner__content { padding-block: 66px; }
  .lifestyle-banner h2 { font-size: clamp(2.7rem, 13vw, 4.2rem); }
  .benefit-row { display: grid; gap: 12px; margin-top: 30px; }
  .invoice-showcase, .product-tabs, .stories, .modules, .sasha-showcase, .pricing-lite { padding-block: 92px; }
  .invoice-showcase__grid { gap: 48px; }
  .invoice-showcase__copy h2 { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .invoice-showcase__benefits { gap: 20px; justify-content: space-between; }
  .invoice-showcase__benefits li { font-size: .72rem; }
  .invoice-showcase__visual { margin-left: 0; }
  .invoice-showcase__visual { overflow-x: auto; }
  .product-window, .product-tabs__screen, .sasha-showcase__screen { border-radius: 14px; }
  .hp-section-head { margin-bottom: 34px; }
  .hp-section-head h2, .sasha-showcase h2, .pricing-lite h2 { font-size: clamp(2.35rem, 12vw, 3.8rem); }
  .product-tabs__bar { margin-inline: -4px; padding: 5px; grid-template-columns: repeat(6, 145px); }
  .product-tabs__viewer { padding: 9px; border-radius: 20px; }
  .product-tabs__meta { position: relative; left: auto; bottom: auto; width: 100%; margin-bottom: 10px; grid-template-columns: 1fr; gap: 6px; background: #fff; }
  .product-tabs__screen { height: 560px; aspect-ratio: auto; overflow: auto; }
  .product-tabs__screen img { object-fit: cover; }
  .demo-panel { min-width: 900px; }
  .safe-peppol-card { min-width: 680px; overflow: auto; }
  .story-card { flex-basis: 84%; min-height: 510px; }
  .stories__arrow { width: 46px; top: calc(50% - 20px); }
  .stories__arrow--prev { left: -9px; }
  .stories__arrow--next { right: -9px; }
  .modules__grid { grid-template-columns: repeat(5, minmax(84vw, 1fr)); }
  .module-card > p { min-height: 0; }
  .sasha-showcase__grid { gap: 44px; }
  .sasha-showcase__copy { display: flex; flex-direction: column; }
  .sasha-showcase__copy .hp-kicker { order: -3; }
  .sasha-showcase__copy h2 { order: -2; }
  .sasha-showcase__lede { order: -1; }
  .price-card { padding: 28px; }
  .price-card__badge { top: 17px; }
  .price-card__plugins { grid-template-columns: 1fr; }
  .final-cta__inner { align-items: flex-start; flex-direction: column; }
  .final-cta__inner > div:last-child { align-items: flex-start; }
  .hp-footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .hp-footer__inner nav, .hp-footer__inner nav:last-child { grid-column: auto; flex-wrap: wrap; gap: 14px 20px; }
  .video-modal { padding: 10px; }
  .video-modal__dialog { width: 100%; border-radius: 18px; }
  .video-modal__head { padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home-premium *, .home-premium *::before, .home-premium *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .hp-reveal { opacity: 1; transform: none; }
}