@import url('fonts.css');
:root { --ink:#162b40; --navy:#102c49; --muted:#687b89; --line:#dce5e9; --warm:#f5f1e9; --mint:#e5f0eb; --paper:#fbfcfb; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; font-size:16px; line-height:1.55; } a { color:inherit; text-decoration:none; } .site-header,.site-footer { width:min(1180px,calc(100% - 64px)); margin:auto; } .site-header { display:flex; align-items:center; gap:44px; padding:25px 0; border-bottom:1px solid var(--line); } .wordmark { display:flex; align-items:center; gap:10px; color:var(--navy); font-family:"Source Serif 4",serif; font-size:25px; font-weight:600; letter-spacing:-.04em; }.mark { position:relative; display:block; width:23px; height:27px; transform:skewY(-16deg); }.mark i { position:absolute; left:1px; width:22px; height:9px; border:2px solid #315e7c; border-left-color:transparent; border-radius:50%; transform:rotate(-29deg); }.mark i:first-child { top:2px; }.mark i:last-child { top:13px; border-color:#84aab8; border-left-color:transparent; }.site-header nav { display:flex; gap:27px; margin-left:auto; color:var(--muted); font-size:13px; }.site-header nav a:hover,.site-footer a:hover,.text-link:hover { color:#4b8192; }.header-link { padding:9px 13px; border:1px solid var(--line); border-radius:4px; color:var(--navy); font-size:12px; }.header-link span,.button span,.text-link span { margin-left:7px; }.hero { display:grid; grid-template-columns:1fr 1fr; gap:70px; width:min(1180px,calc(100% - 64px)); margin:0 auto; padding:110px 0 125px; }.kicker { margin:0 0 17px; color:#7095a0; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }.hero h1 { max-width:620px; margin:0; color:var(--navy); font-family:"Source Serif 4",serif; font-size:clamp(48px,6vw,78px); font-weight:500; letter-spacing:-.065em; line-height:1.01; }.hero-lead { max-width:480px; margin:28px 0 32px; color:var(--muted); font-size:18px; line-height:1.55; }.hero-actions { display:flex; align-items:center; gap:25px; }.button { display:inline-flex; align-items:center; padding:13px 17px; border-radius:4px; font-size:13px; font-weight:600; }.button-dark { background:var(--navy); color:white; }.button-dark:hover { background:#244d6d; }.button-outline { border:1px solid #aac0c6; color:#466f7d; }.text-link { color:#547984; font-size:13px; }.hero-visual { align-self:center; }.visual-window { overflow:hidden; border:1px solid #cddce0; border-radius:10px; background:#f0f6f4; box-shadow:0 25px 55px rgba(25,56,72,.12); transform:rotate(2deg); }.window-top { display:flex; align-items:center; gap:5px; height:38px; padding:0 15px; border-bottom:1px solid #d8e5e5; background:#f9fcfb; }.window-top > span { width:7px; height:7px; border-radius:50%; background:#c4d8d7; }.window-top small { margin-left:auto; color:#9aacaf; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }.visual-grid { display:grid; grid-template-columns:68px 1fr; min-height:330px; }.visual-sidebar { display:grid; align-content:start; gap:18px; padding:26px 22px; background:#163552; }.visual-sidebar b { width:22px; height:5px; border-radius:5px; background:#638ca1; }.visual-sidebar b:first-child { background:#e2f0ee; }.visual-main { padding:40px 39px; }.visual-label { display:block; color:#75959c; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }.visual-main strong { display:block; margin:12px 0 25px; color:#183d57; font-family:"Source Serif 4",serif; font-size:28px; font-weight:500; }.visual-line { width:66%; height:8px; margin-top:12px; border-radius:9px; background:#c9deda; }.visual-line.wide { width:88%; height:12px; background:#85b4ad; }.visual-line.short { width:42%; }.visual-card-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:43px; }.visual-card-row div { height:60px; border:1px solid #d1e2de; border-radius:5px; background:#fbfdfb; }.visual-caption { margin:20px 0 0 24px; color:#91a1a7; font-size:12px; }.statement,.product-section,.principles,.contact-section { width:min(1180px,calc(100% - 64px)); margin:auto; }.statement { max-width:820px; padding:105px 0 120px; border-top:1px solid var(--line); }.statement h2,.section-heading h2,.contact-section h2 { margin:0; color:var(--navy); font-family:"Source Serif 4",serif; font-size:clamp(34px,4vw,53px); font-weight:500; letter-spacing:-.05em; line-height:1.08; }.statement > p:last-child { max-width:650px; margin:25px 0 0; color:var(--muted); font-size:17px; }.product-section { padding:100px 0 125px; border-top:1px solid var(--line); }.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:47px; }.section-index { color:#9aa9ae; font-size:11px; }.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }.product-copy h3 { margin:0; color:var(--ink); font-family:"Source Serif 4",serif; font-size:31px; font-weight:500; letter-spacing:-.04em; }.product-copy > p { max-width:520px; margin:17px 0 27px; color:var(--muted); font-size:16px; }.product-copy ul { display:grid; gap:14px; margin:0 0 34px; padding:0; list-style:none; color:#546c78; font-size:14px; }.product-copy li { display:flex; gap:13px; align-items:center; padding-top:14px; border-top:1px solid var(--line); }.product-copy li span { color:#87a7ab; font-size:10px; }.product-card { align-self:center; overflow:hidden; border:1px solid #b9d0cc; border-radius:8px; background:var(--mint); box-shadow:0 20px 50px rgba(48,102,94,.08); transform:rotate(-2deg); }.product-card-top { display:flex; justify-content:space-between; padding:21px 24px; border-bottom:1px solid #c8ddda; }.mini-brand { color:#2d766c; font-family:"Source Serif 4",serif; font-size:20px; }.status-chip { align-self:center; padding:5px 8px; border-radius:20px; background:#d1e7e0; color:#4c887c; font-size:10px; }.product-card-body { padding:33px 40px 38px; }.product-card-body p { margin:0 0 11px; color:#67867f; font-size:13px; }.product-card-body strong { display:block; color:#245d5a; font-family:"Source Serif 4",serif; font-size:60px; font-weight:500; letter-spacing:-.07em; line-height:1; }.product-card-body > span { color:#6e9088; font-size:12px; }.progress { height:6px; margin:27px 0 17px; overflow:hidden; border-radius:7px; background:#c7ded8; }.progress i { display:block; width:42%; height:100%; border-radius:inherit; background:#5b9e90; }.product-meta { display:flex; justify-content:space-between; color:#6d8b84; font-size:11px; }.product-card-foot { padding:13px 24px; border-top:1px solid #c8ddda; color:#75938d; font-size:10px; }.principles { padding:105px 0 120px; border-top:1px solid var(--line); }.principle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:45px; }.principle-grid article { padding-top:18px; border-top:1px solid #abc4c7; }.principle-grid article > span { color:#739da5; font-size:11px; }.principle-grid h3 { margin:36px 0 10px; color:var(--ink); font-family:"Source Serif 4",serif; font-size:24px; font-weight:500; letter-spacing:-.03em; }.principle-grid p { margin:0; color:var(--muted); font-size:14px; }.trust-band { padding:85px max(32px,calc((100vw - 1180px)/2)); background:var(--navy); color:#c6d7db; }.trust-band .kicker { color:#91bdbe; }.trust-band h2 { max-width:720px; margin:0; color:#f4f7f6; font-family:"Source Serif 4",serif; font-size:clamp(35px,4vw,55px); font-weight:500; letter-spacing:-.05em; line-height:1.08; }.trust-band p:last-child { max-width:590px; margin:24px 0 0; font-size:16px; }.contact-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding:112px 0; }.contact-section > div:last-child { align-self:end; color:var(--muted); font-size:16px; }.site-footer { display:flex; justify-content:space-between; gap:20px; padding:24px 0 32px; border-top:1px solid var(--line); color:#89999f; font-size:12px; }.site-footer nav { display:flex; gap:20px; } @media(max-width:800px){.site-header,.site-footer,.hero,.statement,.product-section,.principles,.contact-section{width:min(100% - 38px,600px)}.site-header{gap:0}.site-header nav{display:none}.header-link{margin-left:auto}.hero,.product-grid,.contact-section{grid-template-columns:1fr;gap:50px}.hero{padding:70px 0 85px}.hero h1{font-size:52px}.hero-lead{font-size:17px}.principle-grid{grid-template-columns:1fr;gap:32px}.contact-section{gap:30px}.site-footer{flex-wrap:wrap}.site-footer nav{width:100%;order:3}.visual-grid{min-height:270px}.visual-main{padding:30px 25px}.visual-card-row{margin-top:25px}}
/* The supplied Softewave mark is an image asset. */
.wordmark { width: 142px; height: 55px; display: flex; align-items: center; }
.wordmark img { display: block; width: 142px; height: auto; }

body {
  background:#f1f1f3;
  overflow-x:hidden;
}

.site-header,
.hero {
  width:min(1210px,calc(100% - 112px));
  background:#07101b;
  color:#f7fbff;
}

.site-header {
  position:relative;
  z-index:3;
  margin:56px auto 0;
  padding:26px 36px 18px;
  border:0;
  border-radius:10px 10px 0 0;
}

.wordmark {
  width:124px;
  height:28px;
}

.wordmark img {
  width:116px;
  filter:brightness(0) invert(1);
}

.site-header nav {
  gap:34px;
  margin-right:auto;
  margin-left:auto;
  color:#f4f8fb;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.site-header nav a:hover {
  color:#b9d9f2;
}

.header-link {
  padding:12px 18px;
  border:0;
  border-radius:5px;
  background:#fff;
  color:#07101b;
  font-size:12px;
  font-weight:700;
}

.hero {
  position:relative;
  display:block;
  min-height:650px;
  margin:0 auto 0;
  overflow:hidden;
  padding:48px 32px 0;
  border-radius:0 0 10px 10px;
  isolation:isolate;
}

.hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(circle at 14% 72%, rgba(213,241,255,.88) 0, rgba(118,174,216,.55) 14%, rgba(29,67,102,.4) 30%, transparent 48%),
    radial-gradient(circle at 86% 72%, rgba(213,241,255,.9) 0, rgba(116,176,220,.58) 15%, rgba(29,67,102,.42) 31%, transparent 48%),
    linear-gradient(180deg, #05080e 0%, #13253a 44%, #29435a 72%, #f7f8f6 100%);
}

.hero::after {
  content:"010101 10110 011001 11010 00101 101101 01010 11001 00110 10101 01100 11011 00101 10110 01001 11100 00101 10101 01011 11001 00110 10011 01101 10110 01001";
  position:absolute;
  inset:-8px 0 auto;
  z-index:-2;
  min-height:485px;
  color:rgba(190,222,244,.26);
  font-family:"Courier New",monospace;
  font-size:12px;
  line-height:1.15;
  letter-spacing:10px;
  overflow:hidden;
  text-align:justify;
  text-shadow:
    0 18px rgba(190,222,244,.18),
    0 36px rgba(190,222,244,.15),
    0 54px rgba(190,222,244,.12),
    0 72px rgba(190,222,244,.1),
    0 90px rgba(190,222,244,.08),
    0 108px rgba(190,222,244,.07),
    0 126px rgba(190,222,244,.06),
    0 144px rgba(190,222,244,.05),
    0 162px rgba(190,222,244,.04);
  mask-image:linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.16) 34%, transparent 50%, rgba(0,0,0,.16) 66%, rgba(0,0,0,.85));
}

.hero-copy {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:790px;
  margin:0 auto;
  text-align:center;
}

.hero .kicker {
  margin:0 0 30px;
  padding:10px 17px;
  border:1px solid rgba(220,234,246,.24);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#d7e6f2;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.hero h1 {
  max-width:720px;
  color:#fff;
  font-family:"DM Sans",sans-serif;
  font-size:clamp(58px,5.7vw,86px);
  font-weight:400;
  letter-spacing:-.055em;
  line-height:.95;
}

.hero-lead {
  max-width:520px;
  margin:34px auto 24px;
  color:#e4edf4;
  font-size:16px;
  line-height:1.5;
}

.hero-actions {
  justify-content:center;
  gap:12px;
}

.hero .button {
  min-height:43px;
  padding:12px 18px;
  border-radius:5px;
  font-size:12px;
  font-weight:700;
}

.hero .button-dark {
  background:#fff;
  color:#07101b;
}

.hero .button-dark:hover {
  background:#e8f1f8;
}

.hero .button-muted {
  background:rgba(255,255,255,.16);
  color:#edf6fc;
}

.hero .button-muted:hover {
  background:rgba(255,255,255,.24);
}

.hero-visual {
  position:absolute;
  right:50%;
  bottom:-98px;
  z-index:-1;
  width:min(560px,72vw);
  aspect-ratio:1.55;
  transform:translateX(50%);
  pointer-events:none;
}

.hero-visual::before,
.hero-visual::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50% 50% 0 0;
}

.hero-visual::before {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.92) 0 1px, transparent 2px) 0 0 / 12px 12px,
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.58) 0 1px, transparent 2px) 6px 6px / 12px 12px;
  mask-image:radial-gradient(ellipse at center, rgba(0,0,0,.9) 0 38%, rgba(0,0,0,.45) 46%, transparent 64%);
}

.hero-visual::after {
  background:radial-gradient(ellipse at center, rgba(255,255,255,.64), transparent 68%);
  filter:blur(12px);
  opacity:.78;
}

.hero-visual span {
  position:absolute;
  left:50%;
  bottom:26%;
  width:72%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform:translateX(-50%) rotate(var(--tilt, 0deg));
  opacity:.7;
}

.hero-visual span:nth-child(2) { --tilt:9deg; width:60%; bottom:34%; }
.hero-visual span:nth-child(3) { --tilt:-8deg; width:66%; bottom:42%; }
.hero-visual span:nth-child(4) { --tilt:16deg; width:44%; bottom:50%; }
.hero-visual span:nth-child(5) { --tilt:-16deg; width:42%; bottom:58%; }
.hero-visual span:nth-child(6) { --tilt:0deg; width:30%; bottom:66%; }

@media(max-width:800px) {
  .site-header,
  .hero {
    width:calc(100% - 24px);
    max-width:calc(100% - 24px);
  }

  .site-header {
    gap:0;
    margin-top:12px;
    padding:18px 18px 12px;
  }

  .wordmark {
    width:104px;
  }

  .wordmark img {
    width:100px;
  }

  .header-link {
    padding:10px 11px;
    font-size:11px;
  }

  .header-link span {
    display:none;
  }

  .hero {
    min-height:560px;
    padding:42px 20px 0;
  }

  .hero-copy {
    width:100%;
    max-width:100%;
  }

  .hero .kicker {
    margin-bottom:24px;
    font-size:10px;
  }

  .hero h1 {
    max-width:330px;
    font-size:clamp(36px,11vw,44px);
    letter-spacing:-.035em;
    line-height:1.04;
  }

  .hero-lead {
    max-width:310px;
    margin-top:24px;
    font-size:15px;
  }

  .hero-actions {
    flex-wrap:wrap;
  }

  .hero .button {
    width:min(100%,220px);
    justify-content:center;
  }
}

@media(max-width:480px) {
  .header-link {
    font-size:0;
  }

  .header-link::before {
    content:"Softewave";
    font-size:11px;
  }

  .hero .kicker {
    max-width:100%;
    padding:9px 13px;
    white-space:normal;
  }

  .hero h1 {
    max-width:280px;
    font-size:38px;
    text-wrap:balance;
  }

  .hero-lead {
    max-width:285px;
  }
}

/* Hero reference pass: wider, lower-scale, closer to the supplied composition. */
.site-header,
.hero {
  width:min(1680px,calc(100% - 112px));
}

.site-header {
  min-height:88px;
  margin-top:56px;
  padding:22px 34px 16px;
}

.wordmark {
  width:112px;
  height:26px;
  color:#fff;
  font-family:"DM Sans",sans-serif;
  font-size:19px;
  font-weight:700;
  letter-spacing:-.03em;
}

.wordmark img {
  display:none;
}

.wordmark::before {
  content:"Softewave";
}

.site-header nav {
  gap:34px;
  font-size:10px;
  letter-spacing:.07em;
}

.header-link {
  padding:12px 19px;
  border-radius:4px;
  font-size:11px;
}

.hero {
  min-height:650px;
  padding:46px 32px 0;
}

.hero::before {
  background:
    radial-gradient(circle at 13% 73%, rgba(230,250,255,.94) 0, rgba(133,191,231,.58) 13%, rgba(32,73,110,.44) 29%, transparent 47%),
    radial-gradient(circle at 87% 73%, rgba(230,250,255,.94) 0, rgba(133,191,231,.58) 13%, rgba(32,73,110,.44) 29%, transparent 47%),
    linear-gradient(180deg, #03070d 0%, #0b1725 26%, #1f3a54 57%, #b5d5e5 88%, #fbfaf5 100%);
}

.hero::after {
  min-height:405px;
  color:rgba(185,219,241,.3);
  font-size:10px;
  letter-spacing:8px;
  opacity:.95;
  mask-image:linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.38) 27%, transparent 50%, rgba(0,0,0,.38) 73%, rgba(0,0,0,.9));
}

.hero-copy {
  max-width:760px;
}

.hero .kicker {
  margin-bottom:28px;
  padding:9px 16px;
  font-size:10px;
}

.hero h1 {
  max-width:780px;
  font-size:clamp(58px,4.7vw,82px);
  letter-spacing:-.055em;
  line-height:.98;
}

.hero-lead {
  max-width:500px;
  margin:28px auto 22px;
  font-size:16px;
}

.hero .button {
  min-height:42px;
  padding:12px 18px;
  font-size:11px;
}

.hero-visual {
  bottom:-104px;
  width:min(620px,48vw);
}

@media(max-width:1200px) {
  .site-header,
  .hero {
    width:calc(100% - 64px);
  }
}

@media(max-width:800px) {
  .site-header,
  .hero {
    width:calc(100% - 24px);
  }

  .site-header {
    min-height:68px;
    margin-top:12px;
    padding:18px 18px 12px;
  }

  .wordmark {
    width:104px;
    font-size:17px;
  }

  .hero {
    min-height:560px;
    padding:42px 20px 0;
  }

  .hero h1 {
    max-width:330px;
    font-size:clamp(36px,11vw,44px);
    line-height:1.04;
  }

  .hero-visual {
    width:min(460px,92vw);
  }
}

/* Make the header sit over the same hero surface, matching the reference. */
.site-header {
  position:absolute;
  top:56px;
  left:50%;
  z-index:5;
  min-height:72px;
  margin:0;
  padding:23px 34px 0;
  transform:translateX(-50%);
  background:transparent;
}

.hero {
  min-height:650px;
  margin-top:56px;
  padding-top:64px;
  border-radius:10px;
}

.hero .kicker {
  margin-bottom:30px;
}

@media(max-width:800px) {
  .site-header {
    top:12px;
    min-height:66px;
    padding:17px 18px 0;
  }

  .hero {
    margin-top:12px;
    padding-top:110px;
  }
}

/* Remove the unwanted outer frame and side light spots. */
body {
  background:#07101b;
}

main,
.statement,
.product-section,
.principles,
.contact-section,
.site-footer {
  background:var(--paper);
}

.site-header,
.hero {
  width:100%;
}

.site-header {
  top:0;
}

.hero {
  margin-top:0;
  border-radius:0;
}

.hero::before {
  background:linear-gradient(180deg, #03070d 0%, #07111d 34%, #17304a 70%, #dfe9ed 100%);
}

.hero-visual {
  display:none;
}

@media(max-width:1200px) {
  .site-header,
  .hero {
    width:100%;
  }
}

@media(max-width:800px) {
  .site-header {
    top:0;
  }

  .hero {
    margin-top:0;
  }
}

/* Clean hero reset: full viewport, no blue-to-white wash, quieter data texture. */
.hero {
  width:100vw;
  min-height:100vh;
  margin-left:calc(50% - 50vw);
  margin-top:0;
  padding-top:clamp(96px,10vh,132px);
  background:#07101b;
  border-radius:0;
}

.hero::before {
  background:
    linear-gradient(180deg, rgba(3,7,13,.98) 0%, rgba(5,14,25,.98) 34%, rgba(14,36,57,.96) 70%, rgba(18,45,68,.94) 100%);
}

.hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  min-height:auto;
  opacity:.42;
  background:
    repeating-linear-gradient(90deg, rgba(147,191,220,.18) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(180deg, rgba(147,191,220,.16) 0 1px, transparent 1px 18px);
  mask-image:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.75) 16%, transparent 38%, transparent 62%, rgba(0,0,0,.75) 84%, #000 100%),
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 28%, transparent 62%);
  mask-composite:intersect;
}

.statement {
  margin-top:0;
}

@media(max-width:800px) {
  .hero {
    width:100vw;
    min-height:100vh;
    margin-left:calc(50% - 50vw);
    padding-top:112px;
  }
}

/* Reference-style hero background only. */
.hero {
  min-height:max(100vh, 900px);
  overflow:hidden;
  background:#07111c;
}

.hero::before {
  background:
    radial-gradient(ellipse at 50% 28%, rgba(40,72,98,.18) 0%, rgba(7,17,28,0) 46%),
    radial-gradient(circle at 7% 54%, rgba(70,150,220,.22) 0%, rgba(70,150,220,.12) 11%, rgba(70,150,220,0) 30%),
    radial-gradient(circle at 94% 54%, rgba(70,150,220,.22) 0%, rgba(70,150,220,.12) 11%, rgba(70,150,220,0) 30%),
    radial-gradient(ellipse 46% 24% at 50% 92%, rgba(255,255,255,.42) 0%, rgba(244,248,249,.18) 36%, rgba(244,248,249,0) 72%),
    radial-gradient(ellipse 72% 34% at 50% 112%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.64) 34%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #07111c 0%, #081522 55%, #10263a 68%, #29445a 80%, #6f8492 91%, #f7f8f8 100%);
}

.hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  min-height:auto;
  background:
    linear-gradient(90deg, rgba(143,186,216,.18) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(143,186,216,.12) 0 1px, transparent 1px 18px);
  opacity:.032;
  mask-image:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 20%, transparent 42%, transparent 58%, rgba(0,0,0,.55) 80%, #000 100%),
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.8) 42%, transparent 82%);
  mask-composite:intersect;
}

.hero-background {
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}

.data-field {
  position:absolute;
  top:0;
  height:58%;
  width:32vw;
  color:rgba(180,216,240,.28);
  font-family:"Courier New",monospace;
  font-size:10px;
  line-height:1.25;
  letter-spacing:7px;
  word-break:break-all;
  opacity:.5;
  filter:blur(.1px);
  animation:dataDrift 28s ease-in-out infinite alternate;
}

.data-field-left {
  left:0;
  mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.72) 36%, transparent 100%),
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 62%, transparent 100%);
}

.data-field-right {
  right:0;
  text-align:right;
  mask-image:linear-gradient(270deg, #000 0%, rgba(0,0,0,.72) 36%, transparent 100%),
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 62%, transparent 100%);
}

.background-grain {
  position:absolute;
  inset:0;
  opacity:.022;
  background:
    radial-gradient(circle at 15% 20%, #fff 0 1px, transparent 1px),
    radial-gradient(circle at 85% 70%, #fff 0 1px, transparent 1px);
  background-size:17px 19px, 23px 29px;
}

.hero-visual {
  display:block;
  right:50%;
  bottom:6%;
  z-index:0;
  width:min(390px,38vw);
  aspect-ratio:1.9;
  transform:translateX(50%);
  opacity:.46;
  filter:blur(.05px);
}

.hero-visual::before {
  background:
    radial-gradient(circle, rgba(255,255,255,.78) 0 1px, transparent 1.5px) 0 0 / 10px 9px,
    radial-gradient(circle, rgba(255,255,255,.42) 0 1px, transparent 1.5px) 5px 5px / 10px 9px;
  border-radius:50% 50% 0 0;
  mask-image:radial-gradient(ellipse at 50% 100%, transparent 0 18%, rgba(0,0,0,.35) 28%, #000 48%, transparent 72%),
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.88) 48%, transparent 100%);
}

.hero-visual::after {
  background:radial-gradient(ellipse at 50% 82%, rgba(255,255,255,.34), transparent 62%);
  filter:blur(18px);
  opacity:.55;
}

.hero-visual span {
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity:.28;
}

@keyframes dataDrift {
  from { opacity:.54; transform:translateY(-1.5%); }
  to { opacity:.72; transform:translateY(1.5%); }
}

.data-field-right {
  animation-name:dataDriftRight;
}

@keyframes dataDriftRight {
  from { opacity:.42; transform:translateY(-1.5%); }
  to { opacity:.58; transform:translateY(1.5%); }
}

@media(max-width:900px) {
  .hero {
    min-height:max(100vh, 760px);
  }

  .data-field {
    width:28vw;
    font-size:10px;
    letter-spacing:7px;
    opacity:.42;
  }

  .hero-visual {
    width:min(320px,72vw);
    bottom:7%;
  }
}

@media(max-width:480px) {
  .data-field {
    width:20vw;
    font-size:9px;
    letter-spacing:6px;
    opacity:.24;
  }

  .hero-visual {
    width:250px;
    bottom:8%;
    opacity:.34;
  }
}

/* Final background calibration against the reference. */
.hero {
  min-height:clamp(850px, 100vh, 950px);
}

.hero::before {
  background:
    radial-gradient(ellipse 42% 34% at 50% 34%, rgba(42,74,100,.16) 0%, rgba(7,17,28,0) 64%),
    radial-gradient(circle at 7% 52%, rgba(70,150,220,.3) 0%, rgba(70,150,220,.13) 13%, rgba(70,150,220,0) 32%),
    radial-gradient(circle at 94% 52%, rgba(70,150,220,.3) 0%, rgba(70,150,220,.13) 13%, rgba(70,150,220,0) 32%),
    radial-gradient(ellipse 38% 20% at 50% 82%, rgba(255,255,255,.24) 0%, rgba(246,249,250,.12) 38%, rgba(246,249,250,0) 76%),
    radial-gradient(ellipse 82% 34% at 50% 112%, rgba(255,255,255,1) 0%, rgba(255,255,255,.74) 38%, rgba(255,255,255,0) 76%),
    linear-gradient(180deg, #07111c 0%, #081522 48%, #10263a 64%, #29445a 78%, #6f8492 90%, #f7f8f8 100%);
}

.hero::after {
  opacity:.018;
}

.data-field {
  top:0;
  height:64%;
  width:30vw;
  color:rgba(190,225,247,.24);
  font-size:9px;
  line-height:1.18;
  letter-spacing:8px;
  opacity:.55;
}

.data-field-left {
  left:-1vw;
  padding-right:9vw;
  mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.82) 28%, rgba(0,0,0,.22) 62%, transparent 100%),
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.74) 66%, transparent 100%);
}

.data-field-right {
  right:-1vw;
  padding-left:9vw;
  mask-image:linear-gradient(270deg, #000 0%, rgba(0,0,0,.82) 28%, rgba(0,0,0,.22) 62%, transparent 100%),
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.74) 66%, transparent 100%);
}

.hero-visual {
  bottom:5%;
  width:min(380px,34vw);
  opacity:.34;
}

.hero-visual::before {
  background:
    radial-gradient(circle, rgba(255,255,255,.66) 0 1px, transparent 1.45px) 0 0 / 9px 8px,
    radial-gradient(circle, rgba(255,255,255,.32) 0 1px, transparent 1.45px) 4px 4px / 9px 8px;
  mask-image:radial-gradient(ellipse at 50% 100%, transparent 0 20%, rgba(0,0,0,.34) 31%, #000 51%, transparent 74%),
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.78) 44%, transparent 100%);
}

.hero-visual::after {
  opacity:.34;
}

@media(max-width:900px) {
  .hero {
    min-height:820px;
  }

  .data-field {
    width:24vw;
    font-size:8px;
    letter-spacing:6px;
    opacity:.34;
  }

  .hero-visual {
    width:min(300px,62vw);
  }
}

@media(max-width:480px) {
  .hero {
    min-height:760px;
  }

  .data-field {
    width:18vw;
    opacity:.18;
  }

  .hero-visual {
    width:230px;
  }
}

/* Hero match: keep the reference composition as one continuous surface. */
.site-header {
  position:absolute;
  top:0;
  left:0;
  transform:none;
  width:100%;
  min-height:76px;
  margin:0;
  padding:14px clamp(16px, 3vw, 40px) 0;
  border:0;
  background:transparent;
}

.wordmark {
  width:clamp(96px, 9vw, 122px);
  height:28px;
}

.wordmark img {
  width:100%;
}

.site-header nav {
  gap:clamp(18px, 2.3vw, 34px);
  font-size:10px;
  letter-spacing:.04em;
}

.header-link {
  min-height:38px;
  padding:10px 16px;
  font-size:11px;
}

.hero {
  min-height:clamp(850px, 100vh, 950px);
  padding:clamp(118px, 14vh, 148px) 24px 0;
}

.hero::before {
  background:
    radial-gradient(ellipse 46% 34% at 50% 34%, rgba(48,82,109,.2) 0%, rgba(7,17,28,0) 70%),
    radial-gradient(ellipse 72% 33% at 50% 82%, rgba(247,250,250,.56) 0%, rgba(239,245,247,.2) 48%, rgba(239,245,247,0) 100%),
    radial-gradient(ellipse 82% 35% at 50% 107%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.72) 42%, rgba(255,255,255,0) 78%),
    linear-gradient(180deg, #07111c 0%, #081522 48%, #10263a 64%, #29445a 76%, #6f8492 88%, #e8eff1 96%, #f7f8f8 100%);
}

.hero::after {
  opacity:0;
  background:none;
}

.hero-copy {
  width:min(100%, 820px);
  max-width:820px;
}

.hero .kicker {
  margin-bottom:22px;
}

.hero h1 {
  width:100%;
  min-width:0;
  max-width:780px;
  font-size:clamp(56px, 5.5vw, 82px);
  line-height:.97;
}

.hero-lead {
  margin-top:28px;
  margin-bottom:24px;
}

.hero-background {
  z-index:-2;
}

.data-field {
  top:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:clamp(10px, 1.3vw, 22px);
  height:65%;
  width:clamp(230px, 28vw, 430px);
  padding:5px 0 0;
  color:rgba(190,225,247,.34);
  font-size:9px;
  line-height:1.25;
  letter-spacing:2px;
  word-break:normal;
  white-space:normal;
  opacity:.55;
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.82) 65%, transparent 100%);
}

.data-field::before,
.data-field::after {
  content:"0 1 0 0 1 1 0 1 0 1 1 0 0 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 0 1 0 1 1 0 1 0 0 1 0 1 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 0 1 0 1 1 0 1 0 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 0 1 0 1 1 0 1 0 0 1 1 0 1";
  display:block;
  width:33%;
  overflow:hidden;
  line-height:1.36;
  text-align:center;
  white-space:pre-wrap;
  opacity:.72;
}

.data-field::after {
  content:"1 0 1 1 0 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 1 0 0 1 0 1 0 1 1 0 1 0 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0 1 0 1 1 0";
}

.data-field-left {
  left:-2vw;
  padding-right:0;
  mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.78) 42%, transparent 100%), linear-gradient(180deg, #000 0%, rgba(0,0,0,.82) 65%, transparent 100%);
}

.data-field-right {
  right:-2vw;
  padding-left:0;
  text-align:center;
  mask-image:linear-gradient(270deg, #000 0%, rgba(0,0,0,.78) 42%, transparent 100%), linear-gradient(180deg, #000 0%, rgba(0,0,0,.82) 65%, transparent 100%);
}

.data-field-right::before {
  order:2;
}

.data-field-right::after {
  order:1;
}

.hero-visual {
  bottom:4%;
  width:min(390px, 34vw);
  opacity:.32;
}

.hero-visual::after {
  opacity:.28;
}

@media(max-width:900px) {
  .hero {
    min-height:820px;
    padding-top:112px;
  }

  .data-field {
    width:24vw;
    font-size:8px;
    letter-spacing:1px;
    opacity:.36;
  }

  .hero-visual {
    width:min(300px, 62vw);
  }
}

@media(max-width:480px) {
  .site-header {
    padding-top:12px;
  }

  .site-header nav {
    display:none;
  }

  .header-link {
    min-height:34px;
    padding:8px 11px;
    font-size:10px;
  }

  .hero {
    min-height:760px;
    padding:104px 18px 0;
  }

  .hero .kicker {
    margin-bottom:18px;
    padding:8px 11px;
    font-size:9px;
  }

  .hero h1 {
    max-width:340px;
    font-size:clamp(38px, 11vw, 48px);
  }

  .hero-lead {
    max-width:330px;
    margin-top:24px;
    font-size:14px;
  }

  .data-field {
    width:18vw;
    font-size:7px;
    opacity:.2;
  }

  .hero-visual {
    width:230px;
    bottom:5%;
  }
}

/* Continuous side data field: the characters should run down the edges, not sit in a top strip. */
.data-field {
  display:flex;
  align-items:flex-start;
  height:72%;
  color:transparent;
  font-size:0;
  line-height:1;
  opacity:.72;
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.94) 54%, rgba(0,0,0,.62) 78%, transparent 100%);
}

.data-field::before,
.data-field::after {
  display:block;
  flex:0 0 44%;
  width:44%;
  height:100%;
  overflow:hidden;
  color:rgba(190,225,247,.24);
  font-size:9px;
  line-height:1.55;
  letter-spacing:3px;
  white-space:pre;
  opacity:.9;
}

.data-field::before {
  content:"0 1 0 1 1 0 0 1 0 1 1 0 1 0 0 1 0 1 0 0\A1 0 1 0 0 1 1 0 1 0 0 1 0 1 1 0 1 0 1 0\A0 0 1 1 0 1 0 0 1 0 1 1 0 0 1 1 0 1 0 1\A1 1 0 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0 1\A0 1 1 0 1 0 0 1 0 1 0 1 1 0 0 1 1 0 1 0 0\A1 0 0 1 1 0 1 0 1 0 0 1 0 1 1 0 0 1 0 1\A0 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 0\A1 0 1 1 0 0 1 0 1 1 0 1 0 0 1 0 1 0 1 1\A0 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1\A1 0 1 0 1 0 0 1 1 0 1 1 0 0 1 0 1 0 1 0\A0 1 1 0 0 1 0 1 0 1 1 0 1 0 0 1 1 0 1 0\A1 0 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0 1\A0 1 0 0 1 1 0 1 0 1 0 0 1 0 1 1 0 1 0 1\A1 1 0 1 0 0 1 0 1 1 0 0 1 0 1 0 1 0 1 0\A0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 0 1 0 1 1\A1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 1 0\A0 1 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 0 1\A1 0 0 1 0 1 0 1 1 0 0 1 0 1 0 1 0 1 1 0\A0 1 0 1 1 0 0 1 0 1 1 0 1 0 1 0 0 1 1 0\A1 0 1 0 1 0 1 0 0 1 1 0 1 0 1 0 0 1 0 1\A0 0 1 1 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0 1\A1 0 1 0 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 0\A0 1 1 0 1 0 0 1 0 1 0 1 1 0 1 0 0 1 1 0\A1 0 0 1 1 0 1 0 1 0 0 1 0 1 1 0 1 0 0 1\A0 1 0 1 0 1 1 0 0 1 1 0 1 0 1 0 1 0 0 1\A1 1 0 0 1 0 1 1 0 1 0 1 0 0 1 1 0 1 0 1 0\A0 1 0 0 1 1 0 1 0 1 1 0 0 1 0 1 0 1 1 0\A1 0 1 1 0 1 0 0 1 0 1 0 1 1 0 1 0 0 1 0 1\A0 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 0 1 1 0\A1 0 0 1 0 1 1 0 1 0 1 0 0 1 1 0 1 0 1 0";
}

.data-field::after {
  content:"1 0 1 0 0 1 1 0 1 0 1 0 0 1 0 1 1 0 1 0\A0 1 1 0 1 0 0 1 0 1 1 0 1 0 0 1 1 0 1 0\A1 0 0 1 0 1 1 0 1 0 0 1 0 1 0 1 1 0 1 0\A0 1 0 1 1 0 0 1 1 0 1 0 1 0 0 1 0 1 1 0\A1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 1 0\A0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1\A1 1 0 0 1 0 1 0 1 1 0 0 1 1 0 1 0 1 0 0\A0 1 0 1 0 0 1 1 0 1 1 0 1 0 0 1 1 0 1 0\A1 0 1 1 0 1 0 0 1 0 1 0 1 1 0 1 0 1 0 0\A0 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1\A1 0 0 1 1 0 1 0 1 0 0 1 0 1 1 0 1 0 1 0\A0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 1 1 0 1 0\A1 0 1 0 1 1 0 0 1 0 1 1 0 1 0 1 0 0 1 1\A0 0 1 1 0 1 0 1 1 0 0 1 0 1 0 1 1 0 1 0\A1 1 0 0 1 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1\A0 1 0 1 0 0 1 1 0 1 0 1 0 1 1 0 0 1 0 1\A1 0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 1 0 1 1\A0 0 1 0 1 1 0 1 0 1 0 0 1 1 0 1 0 0 1 1\A1 0 0 1 0 1 1 0 1 0 0 1 0 1 1 0 1 0 1 0\A0 1 0 1 1 0 0 1 1 0 1 0 1 0 0 1 0 1 1 0\A1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 1 0\A0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1\A1 1 0 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0\A0 1 0 1 0 0 1 1 0 1 1 0 1 0 0 1 0 1 1 0\A1 0 1 1 0 1 0 0 1 0 1 0 1 1 0 1 0 1 0 0";
}

.data-field-left {
  mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.82) 42%, rgba(0,0,0,.18) 82%, transparent 100%), linear-gradient(180deg, #000 0%, rgba(0,0,0,.94) 54%, rgba(0,0,0,.58) 80%, transparent 100%);
}

.data-field-right {
  mask-image:linear-gradient(270deg, #000 0%, rgba(0,0,0,.82) 42%, rgba(0,0,0,.18) 82%, transparent 100%), linear-gradient(180deg, #000 0%, rgba(0,0,0,.94) 54%, rgba(0,0,0,.58) 80%, transparent 100%);
}

@media(max-width:900px) {
  .data-field {
    height:64%;
  }

  .data-field::before,
  .data-field::after {
    font-size:8px;
    letter-spacing:2px;
  }
}

@media(max-width:480px) {
  .data-field {
    height:58%;
  }

  .data-field::before,
  .data-field::after {
    font-size:7px;
    letter-spacing:1px;
    opacity:.7;
  }
}

.background-grain {
  opacity:.006;
}

@media(max-width:480px) {
  .site-header {
    right:0;
    width:100vw;
    padding-right:16px;
    padding-left:16px;
    transform:none;
  }

  .site-header .header-link {
    position:absolute;
    top:12px;
    right:16px;
    margin:0;
    transform:none;
  }

  .hero-copy,
  .hero h1 {
    width:100%;
    max-width:100%;
    min-width:0;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:normal;
  }

  .hero h1 {
    max-width:300px;
    font-size:36px;
    line-height:1.02;
    text-wrap:balance;
    overflow-wrap:anywhere;
  }

  .background-grain {
    opacity:.003;
  }
}

/* Render the side streams as actual rows and carry them through the upper half. */
.data-field::before,
.data-field::after {
  flex:0 0 40%;
  width:40%;
  height:auto;
  overflow:visible;
  color:rgba(190,225,247,.2);
  font-size:8px;
  line-height:1.35;
  letter-spacing:2px;
  white-space:pre;
  text-shadow:
    0 92px rgba(190,225,247,.18),
    0 184px rgba(190,225,247,.15),
    0 276px rgba(190,225,247,.12),
    0 368px rgba(190,225,247,.1),
    0 460px rgba(190,225,247,.08),
    0 552px rgba(190,225,247,.05);
}

.data-field {
  gap:24px;
  justify-content:space-between;
}

.data-field-left::before,
.data-field-left::after {
  text-align:right;
}

.data-field-right::before,
.data-field-right::after {
  text-align:left;
}

.data-field::before {
  content:"0 1 0 1 1 0 0 1 0 1 1 0 1 0 0 1 0 1 0 0\A 1 0 1 0 0 1 1 0 1 0 0 1 0 1 1 0 1 0 1 0\A 0 0 1 1 0 1 0 0 1 0 1 1 0 0 1 1 0 1 0 1\A 1 1 0 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0\A 0 1 1 0 1 0 0 1 0 1 0 1 1 0 0 1 1 0 1 0\A 1 0 0 1 1 0 1 0 1 0 0 1 0 1 1 0 0 1 0 1\A 0 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 0\A 1 0 1 1 0 0 1 0 1 1 0 1 0 0 1 0 1 0 1 1";
}

.data-field::after {
  content:"1 0 1 0 0 1 1 0 1 0 1 0 0 1 0 1 1 0 1 0\A 0 1 1 0 1 0 0 1 0 1 1 0 1 0 0 1 1 0 1 0\A 1 0 0 1 0 1 1 0 1 0 0 1 0 1 0 1 1 0 1 0\A 0 1 0 1 1 0 0 1 1 0 1 0 1 0 0 1 0 1 1 0\A 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 1 0\A 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1\A 1 1 0 0 1 0 1 0 1 1 0 0 1 1 0 1 0 1 0 0\A 0 1 0 1 0 0 1 1 0 1 1 0 1 0 0 1 1 0 1 0";
}
.data-field {
  width:50vw;
  gap:20px;
  justify-content:flex-start;
  opacity:.72;
}

.data-field::before,
.data-field::after {
  flex:0 0 calc(50% - 10px);
  width:calc(50% - 10px);
  color:rgba(190,225,247,.16);
}

.data-field-left {
  left:-2vw;
  mask-image:linear-gradient(90deg, #000 0%, #000 52%, rgba(0,0,0,.7) 76%, transparent 100%), linear-gradient(180deg, #000 0%, rgba(0,0,0,.92) 58%, rgba(0,0,0,.55) 82%, transparent 100%);
}

.data-field-right {
  right:-2vw;
  mask-image:linear-gradient(270deg, #000 0%, #000 52%, rgba(0,0,0,.7) 76%, transparent 100%), linear-gradient(180deg, #000 0%, rgba(0,0,0,.92) 58%, rgba(0,0,0,.55) 82%, transparent 100%);
}

@media(max-width:900px) {
  .data-field {
    width:46vw;
  }
}

@media(max-width:480px) {
  .data-field {
    width:38vw;
  }
}

/* Each side uses one uninterrupted stream; remove the empty split between columns. */
.data-field {
  gap:0;
}

.data-field::before {
  flex:0 0 100%;
  width:100%;
}

.data-field::after {
  display:none;
}

.data-field-left::before {
  text-align:left;
}

.data-field-right::before {
  text-align:right;
}

/* The full-width matrix replaces the two older side layers, preventing duplicate characters. */
.data-field {
  display:none;
}

.hero-visual {
  display:none !important;
}

.hero-background::before,
.hero-background::after {
  content:none !important;
  display:none !important;
}

.hero-matrix {
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* Close the vertical gaps inside the single full-width matrix. */
.hero-background::before {
  line-height:1;
  text-shadow:
    0 22px rgba(190,225,247,.07),
    0 44px rgba(190,225,247,.065),
    0 66px rgba(190,225,247,.06),
    0 88px rgba(190,225,247,.055),
    0 110px rgba(190,225,247,.05),
    0 132px rgba(190,225,247,.045),
    0 154px rgba(190,225,247,.04),
    0 176px rgba(190,225,247,.035),
    0 198px rgba(190,225,247,.03),
    0 220px rgba(190,225,247,.027),
    0 242px rgba(190,225,247,.024),
    0 264px rgba(190,225,247,.021),
    0 286px rgba(190,225,247,.018),
    0 308px rgba(190,225,247,.015),
    0 330px rgba(190,225,247,.012),
    0 352px rgba(190,225,247,.01),
    0 374px rgba(190,225,247,.008),
    0 396px rgba(190,225,247,.006);
}

/* Continue the same matrix through the complete hero, including the fog at the bottom. */
.hero-background::before {
  mask-image:none;
  text-shadow:
    0 30px rgba(190,225,247,.07),
    0 60px rgba(190,225,247,.067),
    0 90px rgba(190,225,247,.064),
    0 120px rgba(190,225,247,.061),
    0 150px rgba(190,225,247,.058),
    0 180px rgba(190,225,247,.055),
    0 210px rgba(190,225,247,.052),
    0 240px rgba(190,225,247,.049),
    0 270px rgba(190,225,247,.046),
    0 300px rgba(190,225,247,.043),
    0 330px rgba(190,225,247,.04),
    0 360px rgba(190,225,247,.037),
    0 390px rgba(190,225,247,.034),
    0 420px rgba(190,225,247,.031),
    0 450px rgba(190,225,247,.028),
    0 480px rgba(190,225,247,.025),
    0 510px rgba(190,225,247,.022),
    0 540px rgba(190,225,247,.02),
    0 570px rgba(130,165,185,.06),
    0 600px rgba(130,165,185,.055),
    0 630px rgba(130,165,185,.05),
    0 660px rgba(130,165,185,.045),
    0 690px rgba(130,165,185,.04),
    0 720px rgba(130,165,185,.036),
    0 750px rgba(130,165,185,.032),
    0 780px rgba(130,165,185,.028),
    0 810px rgba(130,165,185,.024),
    0 840px rgba(130,165,185,.02),
    0 870px rgba(130,165,185,.016);
}

/* Full-width matrix layer so the center is never left empty. */
.hero-background::before {
  content:"01011001010110010100110101101001011001010101100101001101011010010110010101011001010011010110100101100101010110010100110101101001011001010101100101001101011010010110010101011001010011010110100101100101010110010100110101101001011001010101100101001101011010010110010101011001010011010110100101100101010110010100110101101001011001010101100101001101011010010110010101011001010011010110100101100101010110010100110101101001011001010101100101001101011010010110010101011001010011010110100101100101010110010100110101101001011001010101100101001101011010010110010101011001010011010110100101100101010110010100110101101001011001010101100101001101011010010110010101011001010011010110100101100101010110010100110101101001";
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  color:rgba(190,225,247,.075);
  font-family:"Courier New",monospace;
  font-size:8px;
  line-height:1.2;
  letter-spacing:2px;
  word-break:break-all;
  white-space:normal;
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.92) 56%, rgba(0,0,0,.45) 78%, transparent 94%);
  text-shadow:
    0 30px rgba(190,225,247,.07),
    0 60px rgba(190,225,247,.065),
    0 90px rgba(190,225,247,.06),
    0 120px rgba(190,225,247,.055),
    0 150px rgba(190,225,247,.05),
    0 180px rgba(190,225,247,.045),
    0 210px rgba(190,225,247,.04),
    0 240px rgba(190,225,247,.035),
    0 270px rgba(190,225,247,.03),
    0 300px rgba(190,225,247,.025),
    0 330px rgba(190,225,247,.02),
    0 360px rgba(190,225,247,.015);
}

/* Let the two background grids meet in the center instead of leaving a clear gap. */
.data-field-left,
.data-field-right {
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.94) 58%, rgba(0,0,0,.55) 82%, transparent 100%);
}

/* Bottom continuation, kept separate so later side-mask rules cannot erase it. */
.hero-background::after {
  content:"01011001010110010100110101101001011001010101100101001101011010010110010101011001010011010110100101100101010110010100110101101001011001010101100101001101011010010110010101011001010011010110100101100101010110010100110101101001011001010101100101001101011010010110010101011001010011010110100101100101010110010100110101101001011001010101100101001101011010010110010101011001010011010110100101100101010110010100110101101001";
  position:absolute;
  inset:470px 0 0;
  z-index:0;
  overflow:hidden;
  color:rgba(110,145,165,.12);
  font-family:"Courier New",monospace;
  font-size:8px;
  line-height:1.1;
  letter-spacing:2px;
  word-break:break-all;
  white-space:normal;
  text-shadow:
    0 28px rgba(110,145,165,.11),
    0 56px rgba(110,145,165,.1),
    0 84px rgba(110,145,165,.09),
    0 112px rgba(110,145,165,.08),
    0 140px rgba(110,145,165,.07),
    0 168px rgba(110,145,165,.065),
    0 196px rgba(110,145,165,.06),
    0 224px rgba(110,145,165,.055),
    0 252px rgba(110,145,165,.05),
    0 280px rgba(110,145,165,.045),
    0 308px rgba(110,145,165,.04),
    0 336px rgba(110,145,165,.035),
    0 364px rgba(110,145,165,.03),
    0 392px rgba(110,145,165,.025);
}

/* Use the supplied navbar logo instead of the generated wordmark text. */
.wordmark::before {
  content:none;
}

.wordmark img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
}

.wordmark {
  width:clamp(108px, 10vw, 138px);
  height:32px;
  margin-left:14px;
}

.site-header nav {
  position:absolute;
  top:50%;
  left:50%;
  margin-left:0;
  transform:translate(-50%, -50%);
}

.site-header .header-link {
  margin-left:auto;
}

@media(max-width:480px) {
  .wordmark {
    width:112px;
    height:30px;
    margin-left:6px;
  }
}

/* Security product layout based on the supplied reference composition. */
.hero-white-fog {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0) 62%, rgba(255,255,255,.04) 69%, rgba(255,255,255,.18) 78%, rgba(255,255,255,.62) 90%, rgba(255,255,255,.94) 98%, #fff 100%);
}

.hero-matrix {
  z-index:2;
}

.hero-copy {
  position:absolute;
  top:38%;
  left:50%;
  width:min(100% - 48px, 820px);
  margin:0;
  transform:translate(-50%, -50%);
}

/* Security product layout based on the supplied reference composition. */
.security-section {
  width:min(1180px, calc(100% - 64px));
  padding:86px 0 120px;
  border-top:1px solid #d9d9d9;
}

.security-frame {
  overflow:hidden;
  border:1px solid #d1d1d1;
  background:#f1f1f1;
  color:#262626;
}

.security-title {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:96px;
  border-bottom:1px solid #d1d1d1;
  background:#f4f4f4;
}

.security-title h2 {
  margin:0;
  color:#252525;
  font-family:"DM Sans",sans-serif;
  font-size:34px;
  font-weight:400;
  letter-spacing:-.04em;
}

.security-content {
  display:grid;
  grid-template-columns:272px minmax(0, 1fr) 272px;
  min-height:610px;
}

.security-column {
  min-width:0;
  border-right:1px solid #d1d1d1;
  background:rgba(248,248,248,.42);
}

.security-column-right {
  border-right:0;
  border-left:1px solid #d1d1d1;
}

.security-column > article {
  padding:96px 25px 25px;
}

.security-column h3 {
  margin:0 0 5px;
  color:#252525;
  font-family:"DM Sans",sans-serif;
  font-size:14px;
  font-weight:400;
  letter-spacing:0;
}

.security-column p {
  margin:0;
  color:#666;
  font-family:"Courier New",monospace;
  font-size:10px;
  line-height:1.35;
}

.security-list {
  display:grid;
  gap:6px;
  padding:0 9px;
}

.security-list article {
  padding:10px 13px;
  border:1px solid #d6d6d6;
  background:rgba(245,245,245,.74);
}

.security-list article h3 {
  font-size:13px;
}

.security-cta {
  display:block;
  width:187px;
  margin:50px 16px 0;
  padding:12px 20px;
  background:#272727;
  color:#f5f5f5;
  font-family:"Courier New",monospace;
  font-size:14px;
  text-align:center;
  clip-path:polygon(0 0, 100% 0, 94% 100%, 0 100%);
}

.security-stage {
  position:relative;
  overflow:hidden;
  min-height:610px;
  background-color:#ededed;
  background-image:linear-gradient(rgba(100,100,100,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(100,100,100,.13) 1px, transparent 1px);
  background-size:100% 66px, 100% 100%;
}

.security-stage::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 36%, rgba(255,255,255,.45) 100%);
}

.security-sculpture {
  position:absolute;
  inset:0;
  filter:grayscale(1) contrast(1.2);
}

.sculpture-upper,
.sculpture-lower,
.sculpture-finger {
  position:absolute;
  display:block;
  background:linear-gradient(105deg, #a9a9a9 0%, #626262 45%, #303030 100%);
  filter:blur(2px);
}

.sculpture-upper {
  top:-24px;
  left:50%;
  width:122px;
  height:345px;
  opacity:.72;
  transform:translateX(-30%) rotate(-3deg);
  clip-path:polygon(29% 0, 71% 0, 64% 23%, 79% 42%, 62% 57%, 75% 68%, 61% 76%, 46% 63%, 49% 100%, 35% 88%, 31% 67%, 18% 57%, 27% 39%, 19% 22%);
}

.sculpture-lower {
  bottom:-75px;
  left:50%;
  width:155px;
  height:330px;
  transform:translateX(-12%) rotate(4deg);
  clip-path:polygon(36% 100%, 25% 75%, 15% 62%, 3% 57%, 8% 49%, 28% 52%, 9% 42%, 15% 35%, 37% 43%, 24% 29%, 31% 24%, 49% 41%, 43% 16%, 51% 0, 60% 5%, 64% 29%, 76% 51%, 70% 73%, 58% 100%);
}

.sculpture-finger {
  z-index:1;
  width:72px;
  height:22px;
  border-radius:80% 30% 30% 80%;
}

.finger-one {
  bottom:218px;
  left:calc(50% - 72px);
  transform:rotate(9deg);
}

.finger-two {
  bottom:190px;
  left:calc(50% - 76px);
  transform:rotate(1deg);
}

.finger-three {
  bottom:162px;
  left:calc(50% - 70px);
  transform:rotate(-8deg);
}

.security-certificate {
  position:relative;
  min-height:392px;
  margin-top:0;
  padding:15px 25px 20px !important;
  border-top:1px solid #d1d1d1;
}

.security-certificate > span {
  color:#1e1e1e;
  font-size:18px;
}

.security-certificate > small {
  float:right;
  color:#555;
  font-family:"Courier New",monospace;
  font-size:10px;
}

.certificate-mark {
  display:grid;
  place-content:center;
  width:100%;
  height:260px;
  margin:8px 0 16px;
  border:1px solid #d2d2d2;
  clip-path:polygon(13% 0, 87% 0, 100% 9%, 100% 91%, 87% 100%, 13% 100%, 0 91%, 0 9%);
  background:radial-gradient(circle at 50% 50%, #fff 0%, #f3f3f3 78%);
  text-align:center;
}

.certificate-mark strong {
  color:#fff;
  font-family:"DM Sans",sans-serif;
  font-size:42px;
  font-weight:600;
  letter-spacing:-.08em;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}

.certificate-mark em {
  color:#555;
  font-size:18px;
  font-style:normal;
  letter-spacing:.08em;
}

.security-certificate h3 {
  margin-bottom:3px;
}

@media(max-width:800px) {
  .security-section {
    width:calc(100% - 24px);
    padding:60px 0 80px;
  }

  .security-content {
    grid-template-columns:1fr;
  }

  .security-column,
  .security-column-right {
    border:0;
  }

  .security-column-left {
    border-bottom:1px solid #d1d1d1;
  }

  .security-column-right {
    border-top:1px solid #d1d1d1;
  }

  .security-column > article {
    padding-top:30px;
  }

  .security-stage {
    min-height:480px;
  }

  .security-title h2 {
    font-size:28px;
  }
}

/* Redesigned hero: the matrix remains underneath a focused workflow scene. */
main > .hero:not(.hero-redesigned) {
  display:none;
}

.hero-redesigned {
  width:100%;
  max-width:none;
  min-height:clamp(720px, 100vh, 900px);
  padding:0 24px;
  border-radius:0;
  background:#080d16;
}

.hero-redesigned::before {
  background:
    radial-gradient(ellipse 60% 54% at 50% 48%, rgba(9,20,39,.78) 0%, rgba(7,14,25,.3) 62%, rgba(7,14,25,0) 100%),
    radial-gradient(ellipse 74% 48% at 50% 104%, rgba(12,43,91,.55) 0%, rgba(9,24,45,.25) 54%, rgba(7,13,23,0) 100%),
    linear-gradient(180deg, #080c14 0%, #080e1a 52%, #0a1424 100%);
}

.hero-redesigned .hero-background {
  z-index:-2;
  opacity:.9;
}

.hero-redesigned .hero-white-fog {
  background:linear-gradient(180deg, rgba(255,255,255,0) 65%, rgba(20,58,101,.08) 84%, rgba(13,40,77,.2) 100%);
}

.hero-redesigned .hero-matrix {
  opacity:.72;
}

.hero-system {
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.hero-system::before {
  content:"";
  position:absolute;
  left:50%;
  bottom:-8%;
  z-index:0;
  width:min(760px, 72vw);
  height:34%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(17,76,170,.34) 0%, rgba(9,43,104,.16) 42%, rgba(7,20,43,0) 76%);
  filter:blur(18px);
}

.hero-dome {
  position:absolute;
  top:-10%;
  left:50%;
  width:min(1100px, 116vw);
  height:78%;
  transform:translateX(-50%);
  border-radius:50% 50% 42% 42%;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(2,8,17,.94) 0%, rgba(3,10,21,.84) 52%, rgba(8,23,47,.5) 70%, rgba(18,48,91,0) 78%),
    radial-gradient(ellipse at 50% 50%, rgba(25,73,142,.24) 0%, rgba(8,21,42,0) 64%);
  box-shadow:
    0 -20px 90px rgba(24,70,140,.14),
    inset 0 24px 60px rgba(20,65,131,.12),
    inset 0 -35px 80px rgba(3,10,20,.5);
  opacity:.94;
  animation:heroDomeBreath 14s ease-in-out infinite;
}

.hero-dome::after {
  content:"";
  position:absolute;
  inset:4% 3% 5%;
  border-radius:inherit;
  border:1px solid rgba(88,142,219,.12);
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 40%, transparent 82%);
}

.hero-technical-grid {
  position:absolute;
  top:17%;
  left:50%;
  width:min(820px, 92vw);
  height:45%;
  transform:translateX(-50%);
  background-image:
    linear-gradient(rgba(91,130,190,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,130,190,.08) 1px, transparent 1px);
  background-size:60px 52px;
  mask-image:radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.72) 48%, transparent 82%);
  opacity:.65;
}

.hero-flow-node {
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 11px;
  border:1px solid rgba(127,155,199,.26);
  border-radius:6px;
  background:rgba(10,18,32,.84);
  box-shadow:0 8px 22px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.05);
  color:rgba(220,230,243,.72);
  font-family:"DM Sans",sans-serif;
  font-size:clamp(9px, .68vw, 11px);
  white-space:nowrap;
  backdrop-filter:blur(8px);
}

.hero-flow-node strong {
  color:rgba(235,241,250,.92);
  font-weight:600;
}

.node-icon {
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border:1px solid rgba(154,188,232,.34);
  border-radius:4px;
  color:#a9c8f1;
  font-size:clamp(10px, .75vw, 12px);
  line-height:1;
}

.node-import { top:72%; left:max(16px, calc(50% - 590px)); }
.node-calendar { top:72%; right:max(16px, calc(50% - 590px)); }

.node-launch,
.node-deliver {
  top:80%;
  min-height:25px;
  padding:4px 10px;
  border-color:rgba(225,231,255,.7);
  background:#e8ecff;
  color:#0b1423;
  font-weight:700;
  box-shadow:0 5px 18px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.9);
}

.node-launch { left:calc(50% - 435px); }
.node-deliver { right:calc(50% - 435px); background:#eee7ff; }
.node-documents { top:87%; left:calc(50% - 245px); width:225px; }
.node-automation { top:87%; left:calc(50% + 20px); width:205px; }

.flow-path {
  position:absolute;
  z-index:1;
  display:block;
  border-color:rgba(177,205,240,.7);
  opacity:.82;
}

.path-import,
.path-calendar {
  top:75.7%;
  width:78px;
  height:39px;
  border-top:1px dotted rgba(177,205,240,.7);
}

.path-import {
  left:calc(50% - 513px);
  border-right:1px dotted rgba(177,205,240,.7);
  border-radius:0 15px 0 0;
}

.path-calendar {
  right:calc(50% - 513px);
  border-left:1px dotted rgba(177,205,240,.7);
  border-radius:15px 0 0 0;
}

.path-left,
.path-right {
  top:82.7%;
  width:205px;
  height:55px;
  border-bottom:1px dotted rgba(177,205,240,.7);
}

.path-left {
  left:calc(50% - 407px);
  border-left:1px dotted rgba(177,205,240,.7);
  border-radius:0 0 0 16px;
}

.path-right {
  right:calc(50% - 407px);
  border-right:1px dotted rgba(177,205,240,.7);
  border-radius:0 0 16px 0;
}

.path-documents,
.path-automation {
  top:89.3%;
  height:1px;
  border-top:1px dotted rgba(177,205,240,.7);
}

.path-documents { left:calc(50% - 20px); width:40px; }
.path-automation { left:calc(50% + 225px); width:48px; }

.hero-redesigned .hero-copy {
  top:42%;
  z-index:4;
  width:min(100% - 48px, 760px);
}

.hero-redesigned .hero .kicker,
.hero-redesigned .kicker {
  margin-bottom:22px;
}

.hero-redesigned h1 {
  max-width:700px;
  font-size:clamp(44px, 4.7vw, 72px);
  line-height:.98;
}

.hero-redesigned .hero-lead {
  max-width:510px;
  margin-top:25px;
  font-size:clamp(13px, 1.05vw, 16px);
}

.hero-redesigned .hero-actions {
  margin-top:4px;
}

@keyframes heroDomeBreath {
  0%, 100% { transform:translateX(-50%) scale(1); opacity:.9; }
  50% { transform:translateX(-50%) scale(1.018); opacity:1; }
}

@media(max-width:900px) {
  .hero-redesigned {
    min-height:780px;
  }

  .hero-redesigned .hero-copy {
    top:40%;
  }

  .hero-flow-node {
    font-size:10px;
  }

  .node-import { left:16px; }
  .node-calendar { right:16px; }
  .node-launch { left:9%; }
  .node-deliver { right:9%; }
  .path-import { left:18%; width:60px; }
  .path-calendar { right:18%; width:60px; }
}

@media(max-width:600px) {
  .hero-redesigned {
    min-height:760px;
    padding:0 14px;
  }

  .hero-redesigned .hero-copy {
    top:39%;
    width:calc(100% - 28px);
  }

  .hero-redesigned h1 {
    max-width:370px;
    font-size:clamp(38px, 11vw, 50px);
  }

  .hero-redesigned .hero-lead {
    max-width:340px;
    font-size:13px;
  }

  .hero-dome {
    top:2%;
    width:170vw;
    height:70%;
  }

  .hero-technical-grid {
    width:125vw;
  }

  .node-import,
  .node-calendar {
    top:71%;
  }

  .node-launch,
  .node-deliver {
    top:80%;
  }

  .node-documents,
  .node-automation {
    top:89%;
    width:auto;
  }

  .node-documents { left:4%; }
  .node-automation { right:4%; left:auto; }

  .path-left,
  .path-right,
  .path-documents,
  .path-automation {
    display:none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero-dome {
    animation:none;
  }
}

/* Workflow scene polish. */
.hero-redesigned .hero-dome {
  top:-13%;
  height:82%;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(2,7,15,.96) 0%, rgba(3,10,21,.88) 50%, rgba(6,19,39,.55) 66%, rgba(11,34,66,.18) 76%, rgba(11,34,66,0) 86%),
    radial-gradient(ellipse at 50% 54%, rgba(28,76,151,.2) 0%, rgba(8,21,42,0) 66%);
  box-shadow:0 -24px 120px rgba(20,60,124,.1), inset 0 30px 80px rgba(17,56,118,.08);
}

.hero-redesigned .hero-dome::after {
  display:none;
}

.hero-system::before {
  bottom:-12%;
  width:min(960px, 86vw);
  height:43%;
  background:radial-gradient(ellipse at center, rgba(15,82,191,.42) 0%, rgba(10,54,132,.24) 36%, rgba(7,31,76,.08) 62%, rgba(7,20,43,0) 80%);
  filter:blur(24px);
}

.hero-system::after {
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:0;
  height:38%;
  background:
    radial-gradient(circle at 32% 61%, rgba(95,151,231,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 43%, rgba(95,151,231,.15) 0 1px, transparent 2px),
    radial-gradient(circle at 53% 72%, rgba(124,178,255,.2) 0 1px, transparent 2px),
    linear-gradient(180deg, rgba(5,15,31,0) 0%, rgba(6,20,44,.22) 52%, rgba(7,24,54,.46) 100%);
  background-size:auto, auto, auto, 100% 100%;
  mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.8) 28%, #000 100%);
}

.hero-redesigned .hero-technical-grid {
  top:16%;
  height:66%;
  opacity:.48;
  mask-image:radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.68) 54%, transparent 88%);
}

.workflow-connections {
  position:absolute;
  bottom:0;
  left:50%;
  z-index:1;
  width:min(1200px, 100%);
  height:31.5%;
  overflow:visible;
  transform:translateX(-50%);
  filter:drop-shadow(0 0 5px rgba(89,145,224,.2));
}

.workflow-connections path {
  fill:none;
  stroke:url(#workflow-line);
  stroke-width:1.15;
  stroke-linecap:round;
  stroke-dasharray:2 5;
  vector-effect:non-scaling-stroke;
  animation:workflowTrace 12s linear infinite;
}

.flow-path {
  display:none;
}

.hero-flow-node {
  min-height:38px;
  padding:8px 12px;
  border-color:rgba(131,165,214,.38);
  background:linear-gradient(180deg, rgba(16,27,47,.94), rgba(8,17,31,.92));
  box-shadow:
    0 12px 30px rgba(0,0,0,.25),
    0 0 28px rgba(38,93,171,.07),
    inset 0 1px rgba(255,255,255,.07);
}

.hero-flow-node::after {
  content:"";
  position:absolute;
  right:12px;
  bottom:-1px;
  left:12px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(115,169,239,.35), transparent);
}

.node-import,
.node-calendar {
  width:160px;
}

.node-launch,
.node-deliver {
  min-height:27px;
  padding:5px 12px;
  border-color:rgba(235,239,255,.86);
  background:linear-gradient(180deg, #f4f5ff, #dfe5fb);
  color:#0a1425;
  box-shadow:0 7px 22px rgba(0,0,0,.32), 0 0 18px rgba(154,183,255,.12);
}

.node-launch::after,
.node-deliver::after {
  display:none;
}

.node-deliver {
  background:linear-gradient(180deg, #f6f1ff, #e5dcfb);
}

.node-documents {
  width:245px;
}

.node-automation {
  width:225px;
}

.node-icon {
  width:20px;
  height:20px;
  border-color:rgba(143,184,238,.48);
  background:rgba(28,59,101,.22);
  box-shadow:inset 0 0 12px rgba(70,132,214,.08);
}

.hero-orbit-chip {
  position:absolute;
  z-index:2;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid rgba(116,151,205,.25);
  border-radius:8px;
  background:rgba(13,23,40,.66);
  color:rgba(172,201,239,.55);
  font-size:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
  animation:orbitDrift 9s ease-in-out infinite;
}

.orbit-chip-one { top:9%; left:21%; transform:rotate(-12deg); }
.orbit-chip-two { top:8%; right:24%; animation-delay:-2s; }
.orbit-chip-three { top:30%; left:4%; animation-delay:-4s; }
.orbit-chip-four { top:31%; right:4%; transform:rotate(10deg); animation-delay:-6s; }

@keyframes workflowTrace {
  to { stroke-dashoffset:-70; }
}

@keyframes orbitDrift {
  0%, 100% { margin-top:0; opacity:.48; }
  50% { margin-top:-7px; opacity:.78; }
}

@media(max-width:900px) {
  .hero-orbit-chip {
    opacity:.42;
  }

  .orbit-chip-one { left:13%; }
  .orbit-chip-two { right:14%; }

  .workflow-connections {
    width:1100px;
  }
}

@media(max-width:600px) {
  .hero-orbit-chip {
    display:none;
  }

  .workflow-connections {
    width:760px;
    height:30%;
  }

  .node-import,
  .node-calendar {
    width:150px;
  }

  .node-documents,
  .node-automation {
    width:190px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .workflow-connections path,
  .hero-orbit-chip {
    animation:none;
  }
}

/* Final minimal hero direction. */
.hero-redesigned {
  min-height:clamp(720px, 100vh, 860px);
  background:#07111d;
}

.hero-redesigned::before {
  background:
    radial-gradient(ellipse 58% 34% at 50% 92%, rgba(18,64,121,.32) 0%, rgba(10,37,72,.14) 48%, rgba(7,17,29,0) 78%),
    linear-gradient(180deg, #07101b 0%, #07111d 58%, #09182a 100%);
}

.hero-redesigned .hero-background {
  opacity:.68;
}

.hero-redesigned .hero-matrix {
  opacity:.5;
}

.hero-redesigned .hero-white-fog {
  display:none;
}

.hero-redesigned .hero-dome,
.hero-redesigned .hero-technical-grid,
.hero-redesigned .hero-orbit-chip {
  display:none;
}

.hero-system::before {
  bottom:-11%;
  width:min(800px, 70vw);
  height:34%;
  background:radial-gradient(ellipse at center, rgba(20,74,145,.25) 0%, rgba(10,43,88,.12) 46%, rgba(7,20,40,0) 78%);
  filter:blur(32px);
}

.hero-system::after {
  height:31%;
  background:linear-gradient(180deg, rgba(7,17,29,0) 0%, rgba(8,22,40,.2) 58%, rgba(9,27,50,.4) 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 46%, #000 100%);
}

.hero-redesigned .hero-copy {
  top:40%;
  width:min(100% - 48px, 760px);
}

.hero-redesigned .kicker {
  margin-bottom:24px;
  padding:8px 14px;
  border-color:rgba(199,216,235,.22);
  background:rgba(255,255,255,.025);
  box-shadow:none;
  color:rgba(220,231,242,.78);
  font-size:10px;
  letter-spacing:.08em;
}

.hero-redesigned h1 {
  max-width:720px;
  font-size:clamp(48px, 4.6vw, 68px);
  font-weight:400;
  letter-spacing:0;
  line-height:1.02;
}

.hero-redesigned .hero-lead {
  max-width:540px;
  margin-top:27px;
  margin-bottom:26px;
  color:rgba(225,234,242,.78);
  font-size:clamp(13px, 1vw, 15px);
  line-height:1.55;
}

.hero-redesigned .hero-actions {
  gap:10px;
}

.hero-redesigned .button {
  min-height:42px;
  padding:11px 17px;
  border-radius:4px;
  box-shadow:none;
}

.hero-redesigned .button-dark {
  background:#f7f9fb;
  color:#08111c;
}

.hero-redesigned .button-muted {
  border:1px solid rgba(199,216,235,.18);
  background:rgba(255,255,255,.045);
  color:rgba(237,243,248,.82);
}

.workflow-connections {
  bottom:1%;
  width:min(1080px, 92%);
  height:28%;
  filter:none;
}

.workflow-connections path {
  stroke-width:1;
  stroke-dasharray:1.5 5;
  opacity:.55;
}

.hero-flow-node {
  min-height:34px;
  padding:7px 10px;
  border-color:rgba(145,174,211,.24);
  border-radius:5px;
  background:rgba(8,18,32,.86);
  box-shadow:0 10px 24px rgba(0,0,0,.17), inset 0 1px rgba(255,255,255,.035);
  color:rgba(213,224,238,.64);
  backdrop-filter:blur(8px);
}

.hero-flow-node::after {
  display:none;
}

.hero-flow-node strong {
  color:rgba(230,237,246,.82);
  font-weight:500;
}

.node-icon {
  width:18px;
  height:18px;
  border-color:rgba(139,174,220,.3);
  background:transparent;
  box-shadow:none;
  color:rgba(169,197,232,.72);
}

.node-import,
.node-calendar {
  top:73%;
  width:150px;
}

.node-import {
  left:max(32px, calc(50% - 540px));
}

.node-calendar {
  right:max(32px, calc(50% - 540px));
}

.node-launch,
.node-deliver {
  top:80.5%;
  min-height:25px;
  padding:4px 10px;
  border-color:rgba(206,219,238,.36);
  background:rgba(224,233,245,.92);
  color:#0a1422;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}

.node-launch {
  left:calc(50% - 375px);
}

.node-deliver {
  right:calc(50% - 375px);
  background:rgba(231,226,245,.94);
}

.node-documents,
.node-automation {
  top:87%;
  width:220px;
}

.node-documents {
  left:calc(50% - 228px);
}

.node-automation {
  left:calc(50% + 8px);
}

.site-header {
  min-height:72px;
  padding:18px clamp(22px, 3.5vw, 52px) 0;
}

.site-header nav {
  gap:32px;
  color:rgba(232,238,244,.72);
  font-size:10px;
}

.header-link {
  min-height:38px;
  padding:10px 15px;
  border-radius:4px;
  box-shadow:none;
}

@media(max-width:900px) {
  .hero-redesigned .hero-copy {
    top:39%;
  }

  .workflow-connections {
    width:920px;
  }

  .node-import { left:18px; }
  .node-calendar { right:18px; }
  .node-launch { left:15%; }
  .node-deliver { right:15%; }
}

@media(max-width:600px) {
  .hero-redesigned {
    min-height:760px;
  }

  .hero-redesigned .hero-copy {
    top:38%;
  }

  .hero-redesigned h1 {
    max-width:360px;
    font-size:clamp(38px, 10vw, 46px);
  }

  .hero-redesigned .hero-lead {
    max-width:330px;
    font-size:13px;
  }

  .workflow-connections {
    width:700px;
    height:27%;
  }

  .node-import,
  .node-calendar {
    top:74%;
    width:140px;
  }

  .node-launch,
  .node-deliver {
    top:81%;
  }

  .node-documents,
  .node-automation {
    top:88%;
    width:180px;
  }

  .node-documents { left:18px; }
  .node-automation { right:18px; left:auto; }
}

/* Restore the original white lower fade without the workflow diagram. */
.hero-redesigned::before {
  background:
    radial-gradient(ellipse 46% 34% at 50% 34%, rgba(48,82,109,.2) 0%, rgba(7,17,28,0) 70%),
    radial-gradient(ellipse 72% 33% at 50% 82%, rgba(247,250,250,.56) 0%, rgba(239,245,247,.2) 48%, rgba(239,245,247,0) 100%),
    radial-gradient(ellipse 82% 35% at 50% 107%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.72) 42%, rgba(255,255,255,0) 78%),
    linear-gradient(180deg, #07111c 0%, #081522 48%, #10263a 64%, #29445a 76%, #6f8492 88%, #e8eff1 96%, #f7f8f8 100%);
}

.hero-redesigned .hero-white-fog {
  display:block;
  background:linear-gradient(180deg, rgba(255,255,255,0) 62%, rgba(255,255,255,.04) 69%, rgba(255,255,255,.18) 78%, rgba(255,255,255,.62) 90%, rgba(255,255,255,.94) 98%, #fff 100%);
}

.hero-redesigned .hero-system {
  display:none;
}

.hero-redesigned {
  min-height:clamp(680px, 92vh, 800px);
}

@media(max-width:600px) {
  .hero-redesigned {
    min-height:680px;
  }
}

/* Light product-led hero. */
body {
  background:#f8fbff;
}

html,
main {
  background:#f8fbff;
}

html,
body {
  overflow-x:hidden;
}

main::after {
  content:"";
  display:block;
  height:180px;
  background:#f8fbff;
}

.site-header {
  top:18px;
  left:50%;
  z-index:20;
  width:min(1320px, calc(100% - 56px));
  min-height:58px;
  padding:10px 14px 10px 18px;
  border:1px solid rgba(69,119,180,.12);
  border-radius:14px;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 32px rgba(58,101,158,.1);
  transform:translateX(-50%);
  backdrop-filter:blur(16px);
}

.site-header .wordmark {
  width:118px;
  height:28px;
  margin-left:0;
}

.site-header .wordmark img {
  filter:brightness(0) saturate(100%) invert(12%) sepia(18%) saturate(1720%) hue-rotate(177deg) brightness(91%) contrast(94%);
}

.site-header nav {
  gap:30px;
  color:#263750;
  font-size:10px;
  font-weight:600;
  letter-spacing:0;
}

.site-header nav a:hover {
  color:#1677ed;
}

.site-header .header-link {
  min-height:36px;
  padding:9px 16px;
  border:0;
  border-radius:999px;
  background:#1677ed;
  color:#fff;
  box-shadow:0 7px 16px rgba(22,119,237,.22);
}

.hero-showcase {
  position:relative;
  display:block;
  width:min(1440px, calc(100% - 24px));
  max-width:none;
  height:680px;
  min-height:680px;
  margin:8px auto 150px;
  padding:0;
  overflow:visible;
  border:1px solid rgba(75,135,205,.13);
  border-radius:20px;
  isolation:isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 32%),
    linear-gradient(135deg, #ddecff 0%, #c9e1ff 48%, #a9d0ff 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.76);
}

.hero-showcase::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  border-radius:inherit;
  background:
    radial-gradient(ellipse 54% 55% at 50% 12%, rgba(255,255,255,.72), rgba(255,255,255,0) 76%),
    linear-gradient(180deg, rgba(53,135,248,0) 48%, rgba(38,119,240,.11) 100%);
}

.hero-showcase::after {
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:-1;
  height:42%;
  border-radius:0 0 20px 20px;
  background:linear-gradient(180deg, rgba(50,134,247,0), rgba(42,123,240,.12));
}

.showcase-pattern {
  position:absolute;
  inset:75px 0 0;
  z-index:-1;
  overflow:hidden;
  border-radius:0 0 20px 20px;
  background:
    repeating-linear-gradient(90deg, rgba(74,139,220,.08) 0, rgba(74,139,220,.08) 1px, transparent 1px, transparent 76px),
    repeating-linear-gradient(90deg, transparent 0, transparent 52px, rgba(255,255,255,.18) 52px, rgba(255,255,255,.18) 66px, transparent 66px, transparent 118px);
  mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 88%, transparent 100%);
}

.hero-showcase .hero-copy {
  position:relative;
  top:auto;
  left:auto;
  z-index:4;
  width:min(980px, calc(100% - 48px));
  max-width:980px;
  margin:0 auto;
  padding-top:118px;
  transform:none;
  text-align:center;
}

.hero-showcase .kicker {
  margin:0 0 18px;
  padding:0;
  border:0 !important;
  background:none;
  color:#55749d;
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
  box-shadow:none;
}

.hero-showcase h1 {
  width:100%;
  max-width:980px;
  margin:0;
  color:#10213a;
  font-family:"DM Sans",sans-serif;
  font-size:clamp(44px, 4vw, 58px);
  font-weight:600;
  letter-spacing:0;
  line-height:1.02;
  text-wrap:balance;
}

.hero-showcase h1 em {
  color:#1475e8;
  font-family:"Source Serif 4",serif;
  font-weight:500;
}

.hero-showcase .hero-lead {
  max-width:610px;
  margin:20px auto 24px;
  color:#344761;
  font-size:14px;
  line-height:1.55;
}

.hero-showcase .hero-actions {
  justify-content:center;
}

.hero-showcase .showcase-cta {
  min-height:44px;
  padding:11px 20px;
  border:1px solid rgba(12,93,195,.18);
  border-radius:999px;
  background:linear-gradient(180deg, #258cff, #086fe8);
  color:#fff;
  box-shadow:0 9px 22px rgba(23,112,229,.24), inset 0 1px rgba(255,255,255,.28);
}

.hero-showcase .showcase-cta:hover {
  background:linear-gradient(180deg, #147fec, #0565d6);
}

.product-showcase {
  position:absolute;
  top:410px;
  left:50%;
  z-index:5;
  width:min(1040px, 82vw);
  height:430px;
  transform:translateX(-50%);
}

.product-showcase::after {
  content:"";
  position:absolute;
  right:auto;
  bottom:-42px;
  left:50%;
  z-index:10;
  height:220px;
  width:100vw;
  transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(180deg, rgba(248,251,255,0) 0%, rgba(248,251,255,.3) 22%, rgba(248,251,255,.78) 52%, rgba(248,251,255,.97) 72%, #f8fbff 86%);
}

.showcase-window {
  position:relative;
  width:min(860px, 74vw);
  height:420px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(49,102,170,.19);
  border-radius:11px;
  background:#fff;
  box-shadow:0 28px 52px rgba(40,91,163,.24), 0 5px 16px rgba(34,82,148,.12);
}

.showcase-window-bar {
  display:flex;
  align-items:center;
  height:48px;
  padding:0 15px;
  border-bottom:1px solid #e8eef7;
  background:#fff;
  color:#738198;
  font-size:9px;
}

.showcase-mini-brand {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:150px;
  color:#152a47;
}

.showcase-mini-brand > span {
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:6px;
  background:#1677ed;
  color:#fff;
  font-weight:800;
}

.showcase-breadcrumbs {
  flex:1;
}

.showcase-breadcrumbs b {
  margin:0 7px;
  color:#bdc7d5;
}

.showcase-window-actions {
  display:flex;
  align-items:center;
  gap:9px;
}

.showcase-window-actions button {
  border:0;
  border-radius:5px;
  padding:7px 10px;
  background:#1677ed;
  color:#fff;
  font:inherit;
  font-weight:700;
}

.showcase-window-actions i {
  width:15px;
  height:15px;
  border:1px solid #ccd6e4;
  border-radius:50%;
}

.showcase-app {
  display:grid;
  grid-template-columns:116px 1fr;
  height:calc(100% - 48px);
}

.showcase-sidebar {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:20px 12px;
  border-right:1px solid #edf1f7;
  background:#f8faff;
}

.showcase-sidebar span {
  padding:8px 9px;
  border-radius:5px;
  color:#8190a4;
  font-size:9px;
}

.showcase-sidebar .active {
  background:#e9f2ff;
  color:#166bd4;
  font-weight:700;
}

.showcase-dashboard {
  padding:18px 20px;
  background:#fbfcff;
}

.showcase-dashboard-title,
.showcase-chart-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.showcase-dashboard-title small,
.showcase-chart-head small {
  display:block;
  color:#94a1b2;
  font-size:8px;
}

.showcase-dashboard-title strong,
.showcase-chart-head strong {
  display:block;
  margin-top:2px;
  color:#182b46;
  font-size:13px;
}

.showcase-dashboard-title > span {
  padding:6px 9px;
  border:1px solid #e0e7f1;
  border-radius:5px;
  background:#fff;
  color:#66768d;
  font-size:8px;
}

.showcase-metrics {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin:14px 0 12px;
}

.showcase-metrics > div {
  min-width:0;
  padding:10px;
  border:1px solid #e6ecf4;
  border-radius:6px;
  background:#fff;
}

.showcase-metrics small,
.showcase-metrics span {
  display:block;
  overflow:hidden;
  color:#8a98aa;
  font-size:7px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.showcase-metrics strong {
  display:block;
  margin:4px 0;
  color:#132640;
  font-size:18px;
}

.showcase-chart {
  height:154px;
  padding:11px 12px 0;
  border:1px solid #e6ecf4;
  border-radius:6px;
  background:#fff;
}

.showcase-chart-head > div:last-child {
  display:flex;
  gap:12px;
  color:#7e8ca0;
  font-size:7px;
}

.showcase-chart-head > div:last-child span::before {
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:4px;
  border-radius:50%;
  background:#297ef0;
}

.showcase-chart-head > div:last-child span:last-child::before {
  background:#f19c72;
}

.showcase-chart svg {
  width:100%;
  height:106px;
  margin-top:4px;
}

.chart-grid {
  fill:none;
  stroke:#e8edf5;
  stroke-width:1;
}

.chart-area {
  fill:url(#none);
  fill:rgba(41,126,240,.07);
}

.chart-line {
  fill:none;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}

.chart-line-primary { stroke:#297ef0; }
.chart-line-secondary { stroke:#f19c72; }

.showcase-table {
  margin-top:10px;
  overflow:hidden;
  border:1px solid #e6ecf4;
  border-radius:6px;
  background:#fff;
}

.table-row {
  display:grid;
  grid-template-columns:2fr 1.15fr 1fr .7fr;
  padding:7px 10px;
  border-top:1px solid #eef2f7;
  color:#52627a;
  font-size:7px;
}

.table-head {
  border-top:0;
  background:#f8faff;
  color:#93a0b1;
  font-weight:700;
}

.status {
  padding:3px 5px;
  border-radius:4px;
  font-weight:600;
}

.status.green { background:#e6f7ee; color:#278057; }
.status.blue { background:#e7f1ff; color:#276fc6; }

.floating-task-card,
.floating-trust-card {
  position:absolute;
  z-index:3;
  border:1px solid rgba(55,108,177,.18);
  border-radius:10px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 36px rgba(38,89,156,.18);
  backdrop-filter:blur(12px);
}

.floating-task-card {
  top:88px;
  left:0;
  width:220px;
  padding:13px 14px;
}

.floating-task-card > div {
  display:grid;
  grid-template-columns:27px 1fr auto;
  align-items:center;
  gap:7px;
  color:#1c304c;
  font-size:9px;
}

.floating-task-card > div > span {
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:50%;
  background:#dbeaff;
  color:#176fdb;
  font-size:8px;
  font-weight:800;
}

.floating-task-card small {
  color:#9aa6b5;
  font-size:7px;
}

.floating-task-card p,
.floating-trust-card p {
  margin:8px 0 0;
  color:#506078;
  font-size:9px;
}

.floating-task-card > b {
  position:absolute;
  right:14px;
  bottom:11px;
  padding:3px 6px;
  border-radius:4px;
  background:#e3f7ea;
  color:#268257;
  font-size:7px;
}

.floating-trust-card {
  right:0;
  bottom:28px;
  width:205px;
  padding:13px 14px;
}

.floating-trust-card > div {
  display:flex;
  align-items:center;
  gap:3px;
  color:#fff;
}

.floating-trust-card > div span {
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:3px;
  background:#5d9ff5;
  font-size:10px;
}

.floating-trust-card > div strong {
  margin-left:auto;
  color:#142944;
  font-size:15px;
}

.floating-trust-card p b {
  color:#172d49;
  font-size:13px;
}

@media(max-width:900px) {
  .site-header {
    width:calc(100% - 36px);
  }

  .hero-showcase {
    width:calc(100% - 16px);
  }

  .product-showcase {
    width:92vw;
  }

  .showcase-window {
    width:82vw;
  }

  .floating-task-card {
    left:-1vw;
  }

  .floating-trust-card {
    right:-1vw;
  }
}

@media(max-width:600px) {
  .site-header {
    top:12px;
    width:calc(100% - 24px);
    min-height:52px;
    padding:8px 10px 8px 12px;
  }

  .site-header .wordmark {
    width:100px;
  }

  .site-header .header-link {
    top:8px;
    right:10px;
  }

  .hero-showcase {
    width:calc(100% - 12px);
    height:700px;
    min-height:700px;
    margin-top:6px;
    margin-bottom:90px;
    border-radius:14px;
  }

  .hero-showcase .hero-copy {
    width:calc(100% - 32px);
    padding-top:104px;
  }

  .hero-showcase .kicker {
    margin-bottom:14px;
    font-size:9px;
  }

  .hero-showcase h1 {
    max-width:350px;
    font-size:38px;
    line-height:1.04;
  }

  .hero-showcase .hero-lead {
    max-width:330px;
    margin-top:17px;
    font-size:13px;
  }

  .product-showcase {
    top:428px;
    width:calc(100% - 24px);
    height:330px;
  }

  .showcase-window {
    width:100%;
    height:330px;
    border-radius:8px;
  }

  .showcase-window-bar {
    height:41px;
    padding:0 10px;
  }

  .showcase-mini-brand {
    min-width:100px;
  }

  .showcase-breadcrumbs,
  .showcase-window-actions i,
  .showcase-sidebar,
  .showcase-table {
    display:none;
  }

  .showcase-app {
    grid-template-columns:1fr;
    height:calc(100% - 41px);
  }

  .showcase-dashboard {
    padding:14px;
  }

  .showcase-metrics {
    grid-template-columns:repeat(2, 1fr);
  }

  .showcase-chart {
    height:130px;
  }

  .showcase-chart svg {
    height:82px;
  }

  .floating-task-card {
    top:170px;
    left:-8px;
    width:174px;
    transform:scale(.88);
    transform-origin:left center;
  }

  .floating-trust-card {
    right:-8px;
    bottom:-22px;
    width:180px;
    transform:scale(.88);
    transform-origin:right center;
  }
}

/* Refined showcase hierarchy and product presentation. */
.site-header {
  top:16px;
  width:min(1260px, calc(100% - 112px));
  min-height:56px;
  padding:9px 14px 9px 20px;
  border-color:rgba(42,103,173,.1);
  border-radius:12px;
  box-shadow:0 12px 34px rgba(63,105,157,.09);
}

.site-header .wordmark {
  width:132px;
  overflow:hidden;
}

.site-header .wordmark img {
  transform:scale(1.18);
  transform-origin:left center;
}

.site-header nav {
  gap:34px;
  font-size:11px;
}

.site-header .header-link {
  min-height:38px;
  padding:10px 18px;
}

.hero-showcase {
  width:min(1460px, calc(100% - 32px));
  height:700px;
  min-height:700px;
  border-color:rgba(40,111,197,.16);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.16) 34%, rgba(255,255,255,0) 66%),
    linear-gradient(135deg, #e5f1ff 0%, #cfe5ff 46%, #add2fd 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.9), 0 10px 34px rgba(48,105,172,.06);
}

.hero-showcase::before {
  background:
    radial-gradient(ellipse 60% 62% at 50% 14%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.3) 44%, rgba(255,255,255,0) 78%),
    linear-gradient(180deg, rgba(59,136,236,0) 52%, rgba(46,125,229,.1) 100%);
}

.showcase-pattern {
  inset:74px 5% 0;
  background:repeating-linear-gradient(90deg, rgba(56,123,205,.07) 0, rgba(56,123,205,.07) 1px, transparent 1px, transparent 82px);
  mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 24%, #000 70%, transparent 100%);
}

.hero-showcase .hero-copy {
  width:min(940px, calc(100% - 56px));
  max-width:940px;
  padding-top:116px;
}

.hero-showcase .kicker {
  margin-bottom:17px;
  color:#426b9f;
  font-size:10px;
  letter-spacing:.1em;
}

.hero-showcase h1 {
  max-width:940px;
  color:#10233f;
  font-size:clamp(43px, 3.8vw, 56px);
  line-height:1.04;
}

.hero-showcase h1 em {
  color:#126fdf;
}

.hero-showcase .hero-lead {
  max-width:570px;
  margin:19px auto 23px;
  color:#3a506d;
  line-height:1.6;
}

.hero-showcase .showcase-cta {
  min-height:46px;
  padding:12px 21px;
  box-shadow:0 10px 24px rgba(21,105,213,.22), inset 0 1px rgba(255,255,255,.32);
}

.product-showcase {
  top:425px;
  width:min(1080px, 84vw);
  height:438px;
}

.showcase-window {
  width:min(900px, 75vw);
  height:428px;
  border-color:rgba(49,102,170,.16);
  border-radius:10px;
  box-shadow:0 30px 60px rgba(38,83,145,.2), 0 6px 18px rgba(34,82,148,.1);
}

.showcase-window-bar {
  height:50px;
  padding:0 17px;
}

.showcase-app {
  height:calc(100% - 50px);
}

.showcase-dashboard {
  padding:20px 22px;
}

.showcase-metrics {
  gap:10px;
  margin:15px 0 13px;
}

.showcase-metrics > div {
  position:relative;
  overflow:hidden;
  padding:11px;
  border-color:#e2eaf4;
}

.showcase-metrics > div::after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:62%;
  height:2px;
  background:#5b9cf0;
  opacity:.5;
}

.showcase-metrics > div:nth-child(2)::after { width:78%; background:#67b9a0; }
.showcase-metrics > div:nth-child(3)::after { width:38%; background:#efaa7f; }
.showcase-metrics > div:nth-child(4)::after { width:70%; background:#8d8eea; }

.showcase-chart {
  border-color:#e2eaf4;
  box-shadow:0 4px 14px rgba(50,88,139,.03);
}

.floating-task-card,
.floating-trust-card {
  border-color:rgba(52,105,173,.14);
  box-shadow:0 18px 40px rgba(35,82,145,.16), inset 0 1px rgba(255,255,255,.8);
}

.floating-task-card {
  top:96px;
  left:4px;
  width:210px;
}

.floating-trust-card {
  right:2px;
  bottom:76px;
  width:210px;
}

.product-showcase::after {
  bottom:-28px;
  z-index:2;
  height:126px;
  background:linear-gradient(180deg, rgba(248,251,255,0) 0%, rgba(248,251,255,.26) 28%, rgba(248,251,255,.84) 66%, #f8fbff 92%);
}

main::after {
  height:90px;
}

@media(max-width:900px) {
  .site-header {
    width:calc(100% - 48px);
  }

  .product-showcase {
    width:92vw;
  }

  .showcase-window {
    width:84vw;
  }
}

@media(max-width:600px) {
  .site-header {
    width:calc(100% - 24px);
  }

  .site-header .wordmark {
    width:108px;
  }

  .hero-showcase {
    width:calc(100% - 12px);
  }

  .hero-showcase .hero-copy {
    width:calc(100% - 30px);
    padding-top:102px;
  }

  .hero-showcase h1 {
    font-size:36px;
  }

  .product-showcase {
    top:422px;
    width:calc(100% - 22px);
  }

  .showcase-window {
    width:100%;
  }

  .floating-task-card {
    left:-5px;
  }

  .floating-trust-card {
    right:-5px;
    bottom:68px;
  }
}

/* Monochrome editorial hero. */
body,
html,
main {
  background:#fbfbfa;
}

.hero-showcase,
main > .hero:not(.hero-orbit),
main::after {
  display:none !important;
}

main > .hero.hero-orbit {
  display:block !important;
}

.site-header {
  position:fixed;
  top:20px;
  left:50%;
  z-index:20;
  width:calc(100% - 72px);
  max-width:1520px;
  min-height:60px;
  margin:0;
  padding:7px 9px 7px 20px;
  border:1px solid transparent;
  border-radius:999px;
  outline:0;
  background:#fbfbfa;
  box-shadow:none !important;
  filter:none;
  transform:translateX(-50%);
  backdrop-filter:none;
  transition:width .42s cubic-bezier(.22,1,.36,1), max-width .42s cubic-bezier(.22,1,.36,1), padding .42s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
}

.site-header.is-scrolled {
  box-shadow:0 14px 38px rgba(18,63,109,.14), 0 3px 10px rgba(18,63,109,.06) !important;
}

@media(min-width:701px) {
  .site-header.is-scrolled {
    width:calc(100% - 112px);
    max-width:1420px;
    padding:11px 15px 11px 28px;
  }
}

.site-header .wordmark {
  position:relative;
  display:block;
  width:126px;
  height:28px;
  margin:0;
  overflow:hidden;
}

.site-header .wordmark img {
  position:absolute;
  top:50%;
  left:-18.505%;
  width:136.882%;
  height:auto;
  max-width:none;
  filter:none;
  transform:translateY(-49.963%);
}

.site-header nav {
  gap:4px;
  color:#596574;
  font-size:10px;
  font-weight:500;
}

.site-header nav a {
  position:relative;
  padding:7px 14px;
  border-radius:999px;
  transition:background .2s ease, color .2s ease;
}

.site-header nav a::before {
  content:none;
}

.site-header nav a::after {
  content:none;
}

.site-header nav a:hover {
  color:#0555f4;
  background:transparent;
}

.site-header nav a.active {
  color:#25354a;
  background:#eef0f3;
  box-shadow:inset 0 0 0 1px rgba(18,63,109,.04);
}

.site-header .header-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:136px;
  min-height:44px;
  padding:0;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:999px;
  background:#0555f4;
  color:#fff;
  box-shadow:0 8px 20px rgba(5,85,244,.18);
  font-weight:600;
  line-height:1;
  transition:width .38s cubic-bezier(.22,1,.36,1), border-color .3s ease, background .3s ease, transform .2s ease, box-shadow .2s ease;
}

.site-header .header-link:hover {
  width:210px;
  border-width:.25px;
  border-color:rgba(17,17,17,.38);
  background:inherit;
  color:#111;
  box-shadow:none;
  transform:translateY(-1px);
}

.site-header .header-link span {
  display:inline-flex;
  align-items:center;
  margin-left:0;
  line-height:1;
}

.contact-default,
.contact-hover {
  position:absolute;
  inset:0;
  justify-content:center;
  transition:opacity .24s ease, transform .38s cubic-bezier(.22,1,.36,1);
}

.contact-default {
  gap:8px;
  opacity:1;
  transform:translateY(0);
}

.contact-default i {
  font-size:13px;
  font-style:normal;
}

.contact-hover {
  gap:8px;
  padding:0 14px;
  opacity:0;
  transform:translateY(100%);
  white-space:nowrap;
}

.site-header .header-link:hover .contact-default {
  opacity:0;
  transform:translateY(-100%);
}

.site-header .header-link:hover .contact-hover {
  opacity:1;
  transform:translateY(0);
}

.contact-brand-icon {
  position:relative;
  flex:0 0 22px;
  width:22px;
  height:22px;
  overflow:hidden;
  border-radius:50%;
  border:0;
  background:transparent;
}

.contact-brand-icon img {
  position:absolute;
  top:50%;
  left:50%;
  width:28px;
  height:auto;
  max-width:none;
  transform:translate(-50%, -50%);
}

.contact-hover b,
.contact-hover strong {
  font-size:10px;
  font-weight:700;
}

.contact-hover > i {
  font-size:12px;
  font-style:normal;
}

.contact-you {
  padding:5px 8px;
  border-radius:999px;
  background:#f0f1f2;
  color:#111;
  font-size:9px;
  font-weight:700;
}

#inicio,
#plataforma,
#capacidades {
  scroll-margin-top:84px;
}

.hero-orbit {
  position:relative;
  width:calc(100% - 40px);
  max-width:1680px;
  height:calc(100vh - 20px);
  min-height:680px;
  margin:0 auto 20px;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:#fbfbfa;
  color:#123f6d;
  isolation:isolate;
}

.hero-orbit::before,
.hero-orbit::after {
  content:none;
}

.orbit-grid {
  position:absolute;
  inset:64px 0 0;
  z-index:-1;
  opacity:.74;
  background-image:
    linear-gradient(#e9e9e6 1px, transparent 1px),
    linear-gradient(90deg, #e9e9e6 1px, transparent 1px);
  background-size:100% 25%, 25% 100%;
}

.orbit-grid::before,
.orbit-grid::after {
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border:1px solid #d8d8d4;
  background:#fbfbfa;
}

.orbit-grid::before {
  top:-4px;
  left:-4px;
}

.orbit-grid::after {
  right:-4px;
  bottom:-4px;
}

.orbit-index {
  position:absolute;
  top:33%;
  left:24px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:11px;
  color:#aaa9a6;
  font-size:11px;
  font-style:normal;
}

.orbit-index span,
.orbit-index strong {
  position:relative;
  font-weight:400;
}

.orbit-index strong {
  color:#0555f4;
  font-weight:600;
}

.orbit-index strong::before {
  content:"";
  position:absolute;
  top:50%;
  left:-15px;
  width:8px;
  height:1px;
  background:#0555f4;
}

.orbit-copy {
  position:absolute;
  top:50%;
  left:clamp(180px, 20vw, 330px);
  z-index:4;
  width:min(600px, 43vw);
  transform:translateY(-50%);
}

.orbit-eyebrow {
  margin:0 0 22px;
  color:#61778b;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.orbit-copy h1 {
  margin:0;
  color:#111;
  font-family:"DM Sans",sans-serif;
  font-size:clamp(48px, 4.25vw, 68px);
  font-weight:500;
  letter-spacing:0;
  line-height:1.02;
  text-wrap:balance;
}

.orbit-copy h1 > span {
  display:block;
  white-space:nowrap;
}

.orbit-copy h1 .orbit-title-accent {
  color:#0555f4;
}

.orbit-copy > p:not(.orbit-eyebrow) {
  max-width:490px;
  margin:24px 0 30px;
  color:#555752;
  font-size:15px;
  line-height:1.55;
}

.orbit-cta {
  display:inline-flex;
  align-items:center;
  gap:24px;
  min-height:48px;
  padding:13px 19px;
  background:#0555f4;
  color:#fff;
  font-size:12px;
  font-weight:600;
  transition:background .2s ease, transform .2s ease;
}

.orbit-cta:hover {
  background:#0346d1;
  transform:translateY(-2px);
}

.orbit-cta span {
  font-size:16px;
}

.orbit-art {
  position:absolute;
  top:50%;
  right:clamp(20px, 4vw, 76px);
  z-index:2;
  width:min(720px, 54vw);
  aspect-ratio:1;
  transform:translateY(-46%);
  pointer-events:none;
}

.orbit-art img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:contrast(1.06) drop-shadow(0 0 0 rgba(0,0,0,0));
  transform-origin:68% 50%;
  will-change:transform, filter;
  animation:orbitDotsPulse 4.8s ease-in-out infinite;
}

.orbit-particles {
  display:block;
  width:100%;
  height:100%;
}

@keyframes orbitDotsPulse {
  0%, 100% {
    transform:scale(.985);
    filter:contrast(1.04) drop-shadow(0 0 0 rgba(0,0,0,0));
  }
  50% {
    transform:scale(1.025);
    filter:contrast(1.18) drop-shadow(0 0 .75px rgba(0,0,0,.64));
  }
}

@media(prefers-reduced-motion:reduce) {
  .orbit-art img {
    animation:none;
  }
}

.orbit-meta {
  position:absolute;
  right:24px;
  bottom:18px;
  left:24px;
  z-index:3;
  display:flex;
  justify-content:space-between;
  color:#aaa9a5;
  font-family:"Courier New",monospace;
  font-size:8px;
  letter-spacing:.05em;
}

@media(max-width:1000px) {
  .orbit-index {
    display:none;
  }

  .orbit-copy {
    left:7vw;
    width:min(500px, 51vw);
  }

  .orbit-art {
    right:-8vw;
    width:58vw;
    opacity:.72;
  }
}

@media(max-width:700px) {
  .site-header {
    top:14px;
    width:calc(100% - 16px);
    min-height:54px;
    padding:5px 6px 5px 14px;
  }

  .site-header .wordmark {
    width:108px;
  }

  .site-header nav {
    display:none;
  }

  .site-header .header-link {
    position:static;
    min-height:42px;
    margin-left:auto;
    padding:9px 14px;
    font-size:10px;
  }

  .hero-orbit {
    width:calc(100% - 16px);
    height:740px;
    min-height:740px;
    margin:0 8px 8px;
  }

  .orbit-grid {
    inset:58px 0 0;
    background-size:100% 20%, 50% 100%;
  }

  .orbit-copy {
    top:18%;
    left:24px;
    width:calc(100% - 48px);
    transform:none;
  }

  .orbit-eyebrow {
    margin-bottom:16px;
  }

  .orbit-copy h1 {
    max-width:420px;
    font-size:clamp(27px, 8.2vw, 38px);
  }

  .orbit-copy > p:not(.orbit-eyebrow) {
    max-width:390px;
    font-size:14px;
  }

  .orbit-art {
    top:auto;
    right:-24%;
    bottom:-18%;
    width:110vw;
    opacity:.42;
    transform:none;
  }

  .orbit-meta {
    right:14px;
    bottom:12px;
    left:14px;
  }

  .orbit-meta span:last-child {
    display:none;
  }
}

@media(max-width:480px) {
  main > .hero:not(.hero-orbit) {
    width:calc(100% - 24px);
    min-height:0;
    padding:86px 18px 70px;
    grid-template-columns:1fr;
    gap:32px;
  }

  main > .hero:not(.hero-orbit) h1 {
    max-width:none;
    font-size:40px;
    line-height:1.06;
    letter-spacing:-.04em;
  }

  main > .hero:not(.hero-orbit) .hero-lead {
    max-width:none;
    margin-top:22px;
    font-size:15px;
  }

  main > .hero:not(.hero-orbit) .hero-actions {
    align-items:stretch;
    flex-direction:column;
    gap:14px;
  }

  main > .hero:not(.hero-orbit) .hero-actions .button,
  main > .hero:not(.hero-orbit) .hero-actions .text-link {
    width:100%;
    justify-content:center;
  }

  .statement,.product-section,.principles,.contact-section {
    width:calc(100% - 32px);
  }

  .statement,.principles { padding:70px 0 76px; }
  .product-section { padding:70px 0 76px; }
  .statement h2,.section-heading h2,.contact-section h2 { font-size:34px; }
  .statement > p:last-child,.product-copy > p { font-size:14px; }
  .product-grid,.principle-grid,.contact-section { grid-template-columns:1fr; gap:34px; }
  .product-card { transform:none; }
  .product-card-top { padding:18px; }
  .product-card-body { padding:26px; }
  .product-meta { flex-wrap:wrap; gap:10px 16px; }
  .site-footer { width:calc(100% - 32px); flex-direction:column; align-items:flex-start; gap:14px; padding:22px 0 28px; }
  .site-footer nav { flex-wrap:wrap; gap:14px; }
}