/* Homepage composition based on the supplied DS Cloud visual reference. */
body.reference-home {
  --home-bg: #050611;
  --home-panel: #090b1c;
  --home-line: rgba(137, 153, 230, .22);
  --home-violet: #785cff;
  --home-cyan: #20d7e8;
  padding-top: 0 !important;
  background:
    radial-gradient(ellipse 48% 44% at 92% 9%, rgba(94, 44, 155, .22), transparent 74%),
    radial-gradient(ellipse 42% 34% at 15% 97%, rgba(18, 148, 160, .13), transparent 72%),
    var(--home-bg);
  font-family: Inter, system-ui, sans-serif;
}
body.reference-home::before {
  z-index: 0;
  background-size: 56px 56px;
  opacity: .72;
  mask-image: linear-gradient(to bottom, #000 0, transparent 84%);
}
body.reference-home::after { z-index: 0; opacity: .55; }
body.reference-home > * { position: relative; z-index: 1; }
body.reference-home main { overflow: hidden; }

body.reference-home .site-header.global-header {
  position: relative;
  z-index: 20;
  display: flex;
  width: 100%;
  max-width: none;
  height: 76px;
  margin: 0;
  padding: 0 max(28px, calc((100vw - 1540px) / 2));
  border-bottom: 1px solid var(--home-line);
  background: linear-gradient(100deg, rgba(8, 11, 34, .96), rgba(13, 8, 34, .94)) !important;
  box-shadow: 0 18px 48px -38px rgba(101, 103, 255, .8);
  backdrop-filter: blur(20px);
}
body.reference-home .site-header.global-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, #586bff 30%, #9c58ff 70%, transparent);
  opacity: .65;
}
body.reference-home .global-header .global-brand { flex: 0 0 230px; gap: 12px; }
body.reference-home .global-header .global-logo { width: 42px; height: 42px; object-fit: contain; }
body.reference-home .global-header .global-brand > span { color: #f3f4ff; font-size: 22px; }
body.reference-home .global-header .global-brand small { display: none; }
body.reference-home .global-header .global-nav {
  position: static;
  display: flex;
  flex: 1;
  justify-content: center;
  gap: clamp(15px, 2.4vw, 42px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.reference-home .global-header .global-nav-link {
  padding: 10px 2px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #aab2d3;
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
  transition: color .2s ease, text-shadow .2s ease;
}
body.reference-home .global-header .global-nav-link span { display: none; }
body.reference-home .global-header .global-nav-link:hover,
body.reference-home .global-header .global-nav-link.is-active {
  color: #fff;
  text-shadow: 0 0 22px rgba(130, 116, 255, .55);
}
body.reference-home .global-header .global-header-actions { flex: 0 0 230px; justify-content: flex-end; }
body.reference-home .global-header .global-theme-toggle { display: none; }
body.reference-home .global-header .global-login {
  min-height: 43px;
  padding: 0 20px;
  border: 1px solid rgba(162, 157, 255, .25);
  border-radius: 999px;
  background: linear-gradient(115deg, #586bff, #9657f6 58%, #38bde8);
  color: #fff;
  box-shadow: 0 10px 28px -14px rgba(99, 87, 255, .9);
}
body.reference-home .global-header .global-menu-toggle { display: none; }

body.reference-home .reference-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(430px, 1fr);
  align-items: center;
  gap: clamp(54px, 7vw, 120px);
  width: min(1560px, 100%);
  min-height: 650px;
  margin: 0 auto;
  padding: 78px clamp(28px, 7.6vw, 150px) 62px;
}
body.reference-home .reference-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(rgba(142, 159, 233, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 159, 233, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 88%);
  pointer-events: none;
}
body.reference-home .reference-hero .hero-copy { position: relative; z-index: 1; }
/* Preserve the reference hero composition without the legacy decorative section number. */
body.reference-home .reference-hero .hero-copy::before { content: none; }
body.reference-home .reference-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 31px;
  padding: 10px 15px;
  border: 1px solid rgba(142, 159, 233, .42);
  border-radius: 999px;
  color: #c7cff3;
  background: rgba(14, 16, 34, .72);
  font-size: 12px;
  letter-spacing: .075em;
}
body.reference-home .reference-hero .pulse-dot {
  width: 9px;
  height: 9px;
  margin-right: 12px;
  background: #4bd9c1;
  box-shadow: 0 0 16px rgba(75, 217, 193, .8);
}
body.reference-home .reference-hero h1 {
  max-width: none;
  margin: 0 0 22px;
  color: #f1f1ff;
  font: 800 clamp(76px, 7vw, 118px)/.96 "Space Grotesk", Inter, sans-serif;
  letter-spacing: -.078em;
  white-space: nowrap;
}
body.reference-home .reference-hero h1 em {
  font-style: normal;
  background: linear-gradient(105deg, #5265ff 4%, #9759f5 51%, #34bceb 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
body.reference-home .reference-hero .hero-lede {
  max-width: 620px;
  margin: 0 0 34px;
  color: #b6bfdf;
  font-size: clamp(18px, 1.55vw, 25px);
  line-height: 1.65;
}
body.reference-home .reference-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
body.reference-home .reference-hero .button {
  min-height: 61px;
  padding: 0 29px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(110deg, #5268ff, #9358f5 60%, #5d78ff);
  color: white;
  font-size: 16px;
  font-weight: 750;
  box-shadow: 0 15px 35px -17px rgba(88, 90, 255, .92), inset 0 1px rgba(255,255,255,.28);
}
body.reference-home .reference-hero .button:hover { transform: translateY(-3px); box-shadow: 0 22px 42px -18px rgba(104, 84, 255, .95); }
body.reference-home .reference-hero .button-quiet {
  border-color: rgba(137, 153, 230, .37);
  background: rgba(14, 16, 31, .7);
  color: #f3f4ff;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
body.reference-home .hero-stack { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
body.reference-home .hero-stack span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(137, 153, 230, .2);
  border-radius: 999px;
  background: rgba(14, 16, 31, .68);
  color: #b4bddf;
  font-size: 13px;
  font-weight: 650;
}
body.reference-home .hero-stack i { color: #a99aff; font-style: normal; font-size: 16px; }

body.reference-home .reference-terminal {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  border: 1px solid rgba(130, 149, 225, .34);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(8, 10, 25, .98), rgba(6, 8, 20, .96));
  box-shadow: 0 35px 90px -36px rgba(66, 74, 191, .5), inset 0 1px rgba(255,255,255,.065);
  transform: perspective(1300px) rotateY(-3deg) rotateX(1deg);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s;
}
body.reference-home .reference-terminal:hover { transform: perspective(1300px) rotateY(0) translateY(-5px); box-shadow: 0 45px 100px -36px rgba(83, 77, 208, .68), inset 0 1px rgba(255,255,255,.08); }
body.reference-home .terminal-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 0 19px;
  border-bottom: 1px solid rgba(137, 153, 230, .17);
  color: #b5c4e6;
  font: 700 12px/1.35 "JetBrains Mono", monospace;
}
body.reference-home .terminal-dots { display: flex; gap: 8px; }
body.reference-home .terminal-dots i { width: 10px; height: 10px; border-radius: 50%; background: #f25567; }
body.reference-home .terminal-dots i:nth-child(2) { background: #ffc247; }
body.reference-home .terminal-dots i:nth-child(3) { background: #38d472; }
body.reference-home .terminal-bar > span { margin-left: auto; }
body.reference-home .terminal-bar b { color: #b5c4e6; font-size: 11px; font-weight: 600; }
body.reference-home .terminal-body { display: grid; align-content: start; gap: 29px; padding: 34px 30px; color: #c8cbea; font: 500 clamp(12px, 1vw, 16px)/1.6 "JetBrains Mono", monospace; }
body.reference-home .terminal-body p { margin: 0; color: #c8cbea; }
body.reference-home .terminal-prompt { color: #27d8e8; }
body.reference-home .terminal-success { color: #41d8af !important; }
body.reference-home .terminal-success span { color: #b5c4e6; }
body.reference-home .terminal-muted { color: #b5c4e6 !important; font-size: 13px; line-height: 1.5; }
body.reference-home .terminal-cursor-line { display: flex; align-items: center; }
body.reference-home .terminal-cursor-line i { display: inline-block; width: 9px; height: 17px; margin-left: 5px; background: #20d7e8; animation: terminal-blink 1s steps(2, start) infinite; }
@keyframes terminal-blink { to { visibility: hidden; } }

body.reference-home .feature-section { width: min(1420px, 100%); padding: 68px clamp(24px, 6vw, 100px) 105px; }
body.reference-home .feature-section .section-intro { max-width: 760px; margin: 0 auto; text-align: center; }
body.reference-home .feature-section .section-intro h2,
body.reference-home .feature-section .section-intro > p:not(.eyebrow) { margin-right: auto; margin-left: auto; }
body.reference-home .feature-section .section-intro h2 { font-size: clamp(34px, 4.2vw, 54px); }
body.reference-home .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 42px; }
body.reference-home .feature-grid article { min-height: 190px; border-color: rgba(88,147,231,.28); border-radius: 18px; background: linear-gradient(145deg,rgba(17,31,61,.96),rgba(8,15,33,.96)); box-shadow: inset 0 1px rgba(255,255,255,.055); transition: transform .3s ease,border-color .3s,box-shadow .3s; }
body.reference-home .feature-grid article:hover { transform: translateY(-5px); border-color: rgba(145,130,255,.48); box-shadow: 0 24px 55px -38px rgba(103,87,255,.8); }
body.reference-home .feature-grid h3 { color: #e9ecff; }
body.reference-home .feature-grid p { color: #a5afcf; }

/* Keep copy readable if the entrance observer is delayed or skipped. */
.js body.reference-home .reveal { opacity: 1; transform: translateY(12px); }
.js body.reference-home .reveal.in { opacity: 1; transform: none; }
body.reference-home .feature-grid article h3 { color: #f5f9ff; font-size: 18px; line-height: 1.35; }
body.reference-home .feature-grid article p { color: #d4e4fa; font-size: 15px; line-height: 1.6; }
body.reference-home .feature-grid article .feature-icon { color: #72d9ff; background: linear-gradient(135deg, rgba(18,107,255,.28), rgba(0,184,255,.16)); border-color: rgba(88,213,255,.24); }
/* Essential homepage copy must not become unreadable if scroll observers are delayed or unavailable. */
.js body.reference-home .feature-grid article.reveal { opacity: 1; }

/* Keep the static footer usable if the shared JavaScript shell is unavailable. */
body.reference-home > footer:not(.global-footer) { box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 20px; width: 100%; max-width: 100%; padding: 24px 18px; }
body.reference-home > footer:not(.global-footer) > .brand,
body.reference-home > footer:not(.global-footer) > p { flex: 1 0 100%; min-width: 0; text-align: center; }
body.reference-home > footer:not(.global-footer) > a { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* Published customer feedback is optional: the section stays absent until the API confirms real reviews. */
body.reference-home .home-reviews[hidden] { display: none; }
body.reference-home .home-reviews { position: relative; isolation: isolate; overflow: hidden; padding: 74px clamp(20px, 7vw, 112px); border-block: 1px solid rgba(100, 145, 225, .14); background: radial-gradient(ellipse at 82% 18%, rgba(26, 93, 210, .17), transparent 38%), linear-gradient(180deg, rgba(10, 19, 42, .55), rgba(5, 10, 24, .24)); }
body.reference-home .home-reviews-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; max-width: 1240px; margin: 0 auto; }
body.reference-home .home-reviews-heading h2 { margin: 7px 0 8px; color: #f3f7ff; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.045em; }
body.reference-home .home-reviews-intro { margin: 0; color: #c7d4eb; font-size: 15px; line-height: 1.6; }
body.reference-home .home-reviews-heading > .button { flex: 0 0 auto; min-height: 46px; }
body.reference-home .home-reviews-summary { display: flex; align-items: center; gap: 12px; max-width: 1240px; margin: 28px auto 16px; color: #dce8fb; font-size: 14px; font-weight: 700; }
body.reference-home .home-reviews-summary strong { color: #fff; font-size: 23px; }
body.reference-home .home-reviews-summary .review-stars { color: #70cfff; font-size: 17px; letter-spacing: .08em; }
body.reference-home .home-reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; max-width: 1240px; margin: 0 auto; }
body.reference-home .home-review-card { min-width: 0; padding: 22px; border: 1px solid rgba(118, 157, 227, .2); border-radius: 16px; background: linear-gradient(145deg, rgba(19, 37, 70, .84), rgba(9, 18, 38, .88)); box-shadow: 0 16px 40px rgba(0, 0, 0, .16); }
body.reference-home .home-review-person { display: flex; align-items: center; gap: 11px; }
body.reference-home .home-review-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid rgba(114, 202, 255, .34); border-radius: 12px; color: #eaf7ff; background: linear-gradient(145deg, #087cda, #3549b8); font-weight: 850; }
body.reference-home .home-review-person strong { display: block; overflow: hidden; color: #f5f8ff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
body.reference-home .home-review-person time { display: block; margin-top: 3px; color: #b8c9e5; font-size: 12px; }
body.reference-home .home-review-card .review-stars { display: block; margin-top: 15px; color: #70cfff; letter-spacing: .1em; }
body.reference-home .home-review-card p { margin: 12px 0 0; color: #d4e0f3; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
body.reference-home .home-review-verified { display: inline-flex; margin-top: 12px; padding: 5px 8px; border: 1px solid rgba(76, 204, 164, .25); border-radius: 999px; color: #a8f1d7; font-size: 11px; }
@media (max-width: 760px) {
  body.reference-home .home-reviews { padding: 55px 20px; }
  body.reference-home .home-reviews-heading { align-items: start; flex-direction: column; }
  body.reference-home .home-reviews-heading > .button { align-self: stretch; justify-content: center; }
  body.reference-home .home-reviews-grid { grid-template-columns: minmax(0, 1fr); }
  body.reference-home .home-review-card { padding: 19px; }
}

@media (max-width: 1000px) {
  body.reference-home .global-header .global-brand,
  body.reference-home .global-header .global-header-actions { flex-basis: 170px; }
  body.reference-home .global-header .global-nav { gap: 17px; }
  body.reference-home .global-header .global-nav-link { font-size: 13px; }
  body.reference-home .reference-hero { gap: 42px; padding-right: 38px; padding-left: 38px; }
  body.reference-home .reference-hero h1 { font-size: clamp(68px, 8vw, 94px); }
}
@media (max-width: 760px) {
  body.reference-home .site-header.global-header { box-sizing: border-box; height: 70px; padding: 0 16px; gap: 10px; }
  body.reference-home .global-header .global-brand { order: 0; flex: 1 1 auto; min-width: 0; }
  body.reference-home .global-header .global-header-actions { order: 2; flex: 0 0 auto; min-width: 0; margin-left: 0; }
  body.reference-home .global-header .global-menu-toggle { display: flex; flex: 0 0 38px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; order: 1; }
  body.reference-home .global-header .global-menu-toggle span { position: static; inset: auto; display: block; flex: 0 0 1px; width: 15px; height: 1px; margin: 0; transform: none; background: #eef3ff; }
  body.reference-home .global-header .global-nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 12px;
    left: 12px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 12px;
    border: 1px solid rgba(137,153,230,.2);
    border-radius: 16px;
    background: rgba(7,8,22,.98);
    box-shadow: 0 25px 60px rgba(0,0,0,.45);
  }
  body.reference-home .global-header.menu-open .global-nav { display: flex; }
  body.reference-home .global-header .global-nav-link { padding: 12px; font-size: 14px; }
  body.reference-home .reference-hero { box-sizing: border-box; grid-template-columns: minmax(0, 1fr); gap: 44px; min-height: 0; padding: 72px 24px 63px; }
  body.reference-home .reference-hero .hero-copy,
  body.reference-home .reference-hero .hero-lede { min-width: 0; width: 100%; max-width: 100%; }
  body.reference-home .reference-hero .hero-lede { display: block !important; box-sizing: border-box; width: calc(100vw - 48px) !important; max-width: calc(100vw - 48px) !important; white-space: normal !important; overflow-wrap: anywhere !important; }
  body.reference-home .reference-hero h1 { font-size: clamp(65px, 14vw, 96px); }
  body.reference-home .reference-hero .hero-lede { font-size: 18px; }
  body.reference-home .reference-terminal { width: 100%; min-height: 360px; transform: none; }
  body.reference-home .terminal-body { gap: 21px; padding: 28px 23px; }
  body.reference-home .feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  body.reference-home .global-header .global-login { box-sizing: border-box; min-width: max-content; min-height: 38px; padding: 0 11px; font-size: 12px; white-space: nowrap; }
  body.reference-home .global-header .global-menu-toggle { width: 36px; flex-basis: 36px; }
  body.reference-home .global-header .global-logo { width: 35px; height: 35px; }
  body.reference-home .global-header .global-brand > span { font-size: 19px; }
  body.reference-home .reference-hero { padding: 57px 20px 54px; }
  body.reference-home .reference-hero .hero-lede { width: calc(100vw - 40px) !important; max-width: calc(100vw - 40px) !important; line-height: 1.55; }
  body.reference-home .reference-hero .eyebrow { margin-bottom: 25px; padding: 9px 11px; font-size: 9px; }
  body.reference-home .reference-hero h1 { font-size: clamp(59px, 15vw, 76px); }
  body.reference-home .reference-hero .hero-lede { margin-bottom: 25px; font-size: 16px; }
  body.reference-home .reference-hero .hero-actions { gap: 10px; }
  body.reference-home .reference-hero .button { min-height: 52px; padding: 0 19px; font-size: 14px; }
  body.reference-home .hero-stack { gap: 7px; margin-top: 25px; }
  body.reference-home .hero-stack span { min-height: 36px; padding: 0 10px; font-size: 11px; }
  body.reference-home .reference-terminal { min-height: 335px; border-radius: 18px; }
  body.reference-home .terminal-bar { min-height: 48px; gap: 6px; padding: 0 12px; font-size: 11px; }
  body.reference-home .terminal-dots { gap: 5px; }
  body.reference-home .terminal-dots i { width: 8px; height: 8px; }
  body.reference-home .terminal-bar b { display: none; }
  body.reference-home .terminal-body { gap: 20px; padding: 25px 17px; font-size: 12px; }
  body.reference-home .feature-section { padding: 57px 20px 70px; }
  body.reference-home .feature-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 30px; }
  body.reference-home .feature-grid article { min-height: 0; padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  body.reference-home *, body.reference-home *::before, body.reference-home *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}