:root {
  --ink: #0B1118;
  --graphite: #18222E;
  --cloud: #EEF3F7;
  --white: #F7FAFC;

  --blue: #2C6BE0;
  --blue-soft: #8EA7C2;
  --blue-muted: #5E7896;
  --line: #D8E1EA;
  --muted: #667588;
  --signal: var(--blue-soft);

  --shadow:
    0 24px 70px rgba(10, 18, 30, .10);

  --radius: 28px;

  --container:
    min(1180px, calc(100% - 40px));
}


/* =========================================
   RESET
========================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: var(--ink);

  background:
    var(--white);

  -webkit-font-smoothing:
    antialiased;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color:
    transparent;
}

img {
  max-width: 100%;
  display: block;
}

svg {
  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.6;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}

.container {
  width:
    var(--container);

  margin:
    0 auto;
}

.mono,
.eyebrow {
  font-family:
    "JetBrains Mono",
    monospace;
}


/* =========================================
   NOISE
========================================= */

.noise {
  position: fixed;

  inset: 0;

  z-index: 99;

  pointer-events: none;

  opacity: .018;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
}


/* =========================================
   HEADER
========================================= */

.site-header {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 80;

  border-bottom:
    1px solid rgba(255, 255, 255, .08);

  background:
    rgba(11, 15, 20, .78);

  backdrop-filter:
    blur(18px);

  transition:
    background .3s ease,
    box-shadow .3s ease;
}

.site-header.scrolled {
  background:
    rgba(11, 15, 20, .94);

  box-shadow:
    0 12px 35px rgba(0, 0, 0, .15);
}

.nav {
  height: 78px;

  display: flex;

  align-items: center;

  gap: 34px;
}

.brand {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  min-height: 38px;

  transition:
    opacity .2s ease,
    transform .2s ease;
}

.brand:hover,
.brand:focus-visible {
  opacity: .9;
}

.brand img {
  display: block;

  width: auto;
  height: 38px;
  max-width: 220px;

  object-fit: contain;

  filter: none;

  transition:
    opacity .2s ease;
}

.desktop-nav {
  margin-left: auto;

  display: flex;

  gap: 28px;
}

.desktop-nav a {
  position: relative;

  padding: 10px 0;

  font-size: 14px;

  color:
    #CBD5E1;

  transition:
    color .2s ease;
}

.desktop-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 3px;

  width: 0;
  height: 1px;

  background:
    var(--signal);

  transition:
    width .25s ease;
}

.desktop-nav a:hover {
  color:
    white;
}

.desktop-nav a:hover::after {
  width: 100%;
}

.desktop-cta {
  margin-left: 8px;
}

.menu-btn {
  display: none;

  margin-left: auto;

  width: 40px;
  height: 40px;

  padding: 10px;

  background: none;

  border: 0;
}

.menu-btn span {
  display: block;

  height: 1px;

  margin: 7px 0;

  background:
    white;
}

.mobile-nav {
  display: none;
}


/* =========================================
   BUTTONS
========================================= */

.btn {
  min-height: 52px;

  padding:
    0 22px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  border:
    1px solid transparent;

  border-radius:
    14px;

  cursor:
    pointer;

  font-size:
    14px;

  font-weight:
    700;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.btn:hover {
  transform:
    translateY(-2px);
}

.btn-primary {
  color:
    white;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      #239DEF
    );

  box-shadow:
    0 14px 36px
    rgba(20, 110, 245, .25);
}

.btn-primary:hover {
  box-shadow:
    0 18px 46px
    rgba(20, 110, 245, .36);
}

.btn-ghost {
  color:
    white;

  border-color:
    rgba(255, 255, 255, .2);

  background:
    rgba(255, 255, 255, .04);
}

.btn-small {
  min-height:
    44px;

  padding:
    0 18px;
}

.btn-full {
  width:
    100%;
}


/* =========================================
   GENERIC
========================================= */

.section-dark {
  color:
    white;

  background:
    var(--ink);
}

.section-light {
  background:
    linear-gradient(180deg, #F1F4F8 0%, #EDF2F6 100%);
}

.eyebrow {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin:
    0 0 24px;

  color:
    #9CB8D8;

  font-size:
    11px;

  font-weight:
    600;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}

.eyebrow.dark {
  color:
    #5F7897;
}

.status-dot {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--signal);

  box-shadow:
    0 0 18px
    var(--signal);
}


/* =========================================
   HERO
========================================= */

.hero {
  position:
    relative;

  min-height:
    860px;

  padding:
    150px 0 90px;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 75% 30%,
      rgba(20, 110, 245, .18),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 76%,
      rgba(107, 199, 255, .08),
      transparent 24%
    ),
    var(--ink);
}

.hero::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    .17;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, .04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .04) 1px,
      transparent 1px
    );

  background-size:
    56px 56px;

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      black 45%,
      black 100%
    );
}

.hero-orbit {
  position:
    absolute;

  border:
    1px solid
    rgba(107, 199, 255, .16);

  border-radius:
    50%;

  pointer-events:
    none;
}

.orbit-a {
  width:
    620px;

  height:
    620px;

  right:
    -170px;

  top:
    80px;
}

.orbit-b {
  width:
    410px;

  height:
    410px;

  right:
    5%;

  bottom:
    -150px;
}

.hero-grid {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    1.08fr .92fr;

  gap:
    clamp(32px, 4vw, 70px);

  align-items:
    center;
}

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

.hero h1 {
  max-width:
    min(760px, 100%);

  margin:
    0;

  font-size:
    clamp(49px, 5.2vw, 86px);

  line-height:
    .98;

  letter-spacing:
    -.055em;

  font-weight:
    780;
  text-wrap:
    balance;
}

.gradient-text {
  display:
    block;

  color:
    transparent;

  background:
    linear-gradient(
      100deg,
      #fff 2%,
      #9DDFFF 40%,
      #3F9AFF 75%
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;
}

.hero-sub {
  max-width:
    52ch;

  margin:
    24px 0 0;

  color:
    #B5C1D1;

  font-size:
    clamp(16px, 1.25vw, 18px);

  line-height:
    1.7;
}

.hero-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    30px;
}

.hero-proof {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    18px;

  margin-top:
    58px;

  padding-top:
    26px;

  border-top:
    1px solid
    rgba(255, 255, 255, .09);
}

.hero-proof div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}

.hero-proof strong {
  color:
    var(--signal);

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    11px;

  letter-spacing:
    .08em;
}

.hero-proof span {
  color:
    #8D9AAF;

  font-size:
    12px;

  line-height:
    1.5;
}

@media (max-width: 1100px) {
  .hero {
    min-height: auto;
    padding-top: 134px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

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

  .hero-visual {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    height: clamp(360px, 52vw, 520px);
  }

  .hero-data-label {
    display: none;
  }
}

@media (max-width: 820px) {
  .hero {
    padding-top: 118px;
  }

  .hero h1 {
    max-width: 12ch;
    letter-spacing: -0.05em;
  }
}

@media (max-width: 680px) {
  .hero {
    padding: 108px 0 64px;
  }

  .hero h1 {
    max-width: 10.2ch;
    font-size: clamp(38px, 12vw, 56px);
    letter-spacing: -0.06em;
  }

  .hero-sub {
    font-size: 15.5px;
    line-height: 1.7;
  }

  .hero-actions {
    margin-top: 26px;
  }

  .hero-proof {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 42px;
  }
}

@media (max-width: 430px) {
  .hero {
    padding-top: 100px;
    padding-bottom: 52px;
  }

  .hero h1 {
    max-width: 9.2ch;
    font-size: clamp(34px, 11vw, 43px);
  }

  .hero-sub {
    margin-top: 18px;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-proof {
    margin-top: 34px;
    padding-top: 18px;
  }

  .hero-proof strong {
    font-size: 10px;
  }

  .hero-proof span {
    font-size: 11px;
  }
}


/* HERO VISUAL */

.hero-visual {
  position:
    relative;

  height:
    620px;
}

.system-grid {
  position:
    absolute;

  inset:
    58px;

  border-radius:
    50%;

  background-image:
    linear-gradient(
      rgba(107, 199, 255, .075) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(107, 199, 255, .075) 1px,
      transparent 1px
    );

  background-size:
    28px 28px;

  mask-image:
    radial-gradient(
      circle,
      black 15%,
      transparent 69%
    );
}

.core-node {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  z-index:
    4;

  width:
    178px;

  height:
    178px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(107, 199, 255, .42);

  border-radius:
    38px;

  background:
    linear-gradient(
      145deg,
      rgba(32, 121, 255, .28),
      rgba(13, 29, 51, .9)
    );

  box-shadow:
    0 0 70px
    rgba(20, 110, 245, .22);

  transform:
    translate(-50%, -50%);
}

.core-node img {
  width:
    78px;

  filter:
    drop-shadow(
      0 10px 30px
      rgba(20, 110, 245, .42)
    );
}

.core-node span {
  margin-top:
    10px;

  font-family:
    "JetBrains Mono";

  font-size:
    10px;

  letter-spacing:
    .12em;
}

.core-node small {
  margin-top:
    5px;

  color:
    #6BC7FF;

  font-family:
    "JetBrains Mono";

  font-size:
    8px;

  letter-spacing:
    .08em;
}

.core-ring {
  position:
    absolute;

  inset:
    -26px;

  border:
    1px solid
    rgba(107, 199, 255, .24);

  border-radius:
    48px;

  transform:
    rotate(45deg);

  animation:
    coreGlow 4s ease-in-out
    infinite alternate;
}

.connections {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  color:
    rgba(107, 199, 255, .23);

  stroke-dasharray:
    4 8;
}

.float-card {
  position:
    absolute;

  z-index:
    5;

  width:
    190px;

  padding:
    17px 18px;

  border:
    1px solid
    rgba(255, 255, 255, .12);

  border-radius:
    18px;

  background:
    rgba(15, 22, 31, .92);

  box-shadow:
    0 24px 60px
    rgba(0, 0, 0, .3);

  backdrop-filter:
    blur(14px);

  animation:
    floatCard 5s ease-in-out
    infinite alternate;
}

.float-card .meta {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #6BC7FF;

  font-size:
    8px;

  letter-spacing:
    .08em;
}

.float-card strong {
  display:
    block;

  font-size:
    14px;
}

.float-card small {
  display:
    block;

  margin-top:
    4px;

  color:
    #8390A1;

  font-size:
    10px;
}

.card-security {
  left:
    0;

  top:
    102px;
}

.card-ai {
  right:
    -8px;

  top:
    137px;

  animation-delay:
    .7s;
}

.card-build {
  right:
    28px;

  bottom:
    82px;

  animation-delay:
    1.3s;
}


/* =========================================
   NORMAL SECTIONS
========================================= */

.section-light,
.build-section,
.process-section {
  padding:
    102px 0;
}

.section-heading {
  max-width:
    790px;

  margin-bottom:
    56px;
}

.section-heading.compact {
  max-width:
    700px;
}

.section-heading h2,
.split h2,
.contact-copy h2 {
  margin:
    0;

  font-size:
    clamp(40px, 4.5vw, 66px);

  line-height:
    1.04;

  letter-spacing:
    -.045em;
}

.section-heading h2 span {
  color:
    #687384;

  font-weight:
    650;
}

.section-heading p:not(.eyebrow),
.split-copy > p:not(.eyebrow),
.contact-copy > p:not(.eyebrow) {
  max-width:
    720px;

  margin-top:
    24px;

  color:
    #5F6C7D;

  font-size:
    17px;

  line-height:
    1.75;
}


/* =========================================
   CAPABILITIES
========================================= */

#capabilities {
  position: relative;
  overflow: hidden;

  padding: 108px 0 118px;

  background:
    radial-gradient(
      circle at 82% 72%,
      rgba(44, 107, 224, 0.045),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #F1F4F8 0%,
      #EDF2F6 100%
    );
}

/* heading */

#capabilities .section-heading {
  max-width: 830px;
  margin-bottom: 44px;
}

#capabilities .section-heading h2 {
  max-width: 820px;
}

#capabilities .section-heading p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 22px;
}

/* =========================================
   GRID
========================================= */

.capability-grid {
  display: grid;

  grid-template-columns:
    1.08fr 1fr 1fr;

  gap: 16px;

  align-items: stretch;
}

/* =========================================
   BASE CARD
========================================= */

.capability-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  min-height: 455px;

  padding: 28px;

  display: flex;
  flex-direction: column;

  border:
    1px solid #D6E0EA;

  border-radius: 26px;

  background:
    linear-gradient(
      180deg,
      #F8FAFC 0%,
      #F2F6F9 100%
    );

  box-shadow:
    0 8px 28px
    rgba(13, 24, 38, 0.035);

  transition:
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}

/* subtle hover only */

.capability-card:hover {
  transform: translateY(-5px);

  border-color:
    rgba(44, 107, 224, .22);

  box-shadow:
    0 18px 42px
    rgba(15, 28, 45, .08);
}

/* =========================================
   CORE / SECURITY CARD
========================================= */

.capability-card.dark-card {
  color: #FFFFFF;

  border-color:
    rgba(91, 117, 148, .30);

  background:
    radial-gradient(
      circle at 80% 85%,
      rgba(44, 107, 224, .18),
      transparent 35%
    ),
    radial-gradient(
      circle at 18% 12%,
      rgba(107, 199, 255, .07),
      transparent 25%
    ),
    linear-gradient(
      160deg,
      #0B1118 0%,
      #101B28 100%
    );

  box-shadow:
    0 18px 45px
    rgba(6, 13, 22, .20);
}

/* IMPORTANT:
   garante que nada sobrescreva o título branco */

.capability-card.dark-card h3 {
  color: #FFFFFF !important;
}

.capability-card.dark-card p {
  color: #9EADBF;
}

.capability-card.dark-card li {
  color: #C2CDDA;
}

.capability-card.dark-card:hover {
  border-color:
    rgba(107, 199, 255, .32);

  box-shadow:
    0 24px 58px
    rgba(6, 13, 22, .25),
    0 20px 65px
    rgba(44, 107, 224, .08);
}

/* =========================================
   TOP / METADATA
========================================= */

.card-top {
  min-height: 26px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  color: #7A899B;

  font-family:
    "JetBrains Mono",
    monospace;

  font-size: 9px;

  letter-spacing: .08em;
}

.dark-card .card-top {
  color: #71869E;
}

/* pills */

.pill {
  padding: 7px 10px;

  border-radius: 999px;

  color: #91CAFF;

  background:
    rgba(107, 199, 255, .09);

  font-family:
    "JetBrains Mono",
    monospace;

  font-size: 8px;

  letter-spacing: .07em;
}

.pill.light {
  color: #376DCB;

  background:
    rgba(44, 107, 224, .075);
}

/* =========================================
   ICON
========================================= */

.icon-wrap {
  width: 52px;
  height: 52px;

  margin:
    42px 0 23px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  color: #78C5FF;

  background:
    rgba(42, 88, 138, .20);

  box-shadow:
    inset 0 0 0 1px
    rgba(107, 199, 255, .05);
}

.icon-wrap svg {
  width: 24px;
  height: 24px;
}

.light-icon {
  color: #376DCE;

  background:
    rgba(44, 107, 224, .07);

  box-shadow: none;
}

/* =========================================
   TYPOGRAPHY
========================================= */

.capability-card h3 {
  margin: 0;

  color: #0B1118;

  font-size: 25px;

  line-height: 1.08;

  letter-spacing: -.035em;
}

.capability-card p {
  margin: 15px 0 22px;

  color: #667588;

  font-size: 13.5px;

  line-height: 1.68;
}

/* =========================================
   FEATURES
========================================= */

.capability-card ul {
  margin: auto 0 0;

  padding: 24px 0 0;

  display: grid;

  gap: 9px;

  border-top:
    1px solid rgba(130, 150, 172, .14);

  list-style: none;
}

.dark-card ul {
  border-top-color:
    rgba(255, 255, 255, .07);
}

.capability-card li {
  position: relative;

  padding-left: 17px;

  color: #596A7D;

  font-size: 12.5px;

  line-height: 1.4;
}

.capability-card li::before {
  content: "";

  position: absolute;

  left: 0;
  top: .56em;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    #4D7FD8;
}

.dark-card li::before {
  background:
    #72BFFF;

  box-shadow:
    0 0 8px
    rgba(114, 191, 255, .24);
}

/* =========================================
   TOP ACCENT LINE — FULL WIDTH
========================================= */

.capability-card::after {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

  opacity: 0.28;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(44, 107, 224, 0),
      rgba(44, 107, 224, 0.72) 20%,
      rgba(142, 167, 194, 0.85) 50%,
      rgba(44, 107, 224, 0.72) 80%,
      rgba(44, 107, 224, 0)
    );

  box-shadow:
    0 3px 14px
    rgba(44, 107, 224, 0.08);

  transition:
    opacity 0.35s ease,
    box-shadow 0.35s ease;
}

/* hover */

.capability-card:hover::after {
  opacity: 1;

  box-shadow:
    0 4px 18px
    rgba(44, 107, 224, 0.14);
}

/* SECURITY / CARD ESCURO */

.capability-card.dark-card::after {
  background:
    linear-gradient(
      90deg,
      rgba(107, 199, 255, 0),
      rgba(107, 199, 255, 0.75) 18%,
      rgba(55, 109, 206, 0.95) 50%,
      rgba(107, 199, 255, 0.75) 82%,
      rgba(107, 199, 255, 0)
    );

  box-shadow:
    0 3px 18px
    rgba(107, 199, 255, 0.10);
}

.capability-card.dark-card:hover::after {
  opacity: 1;

  box-shadow:
    0 4px 22px
    rgba(107, 199, 255, 0.18);
}

/* =========================================
   BRAND THESIS
========================================= */

.brand-thesis {
  padding: 96px 0 92px;
}

.thesis-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 42px;
  align-items: start;
}

.thesis-index {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 12px;
}

.thesis-number {
  color: #5D799A;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.thesis-line {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(44, 107, 224, 0.6), rgba(44, 107, 224, 0));
}

.thesis-content h2 {
  margin: 0;
  max-width: 820px;
  color: #0B1118;
  font-size: clamp(38px, 4vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.thesis-content h2 span {
  display: block;
  margin-top: 8px;
  color: #697E97;
}

.thesis-copy {
  max-width: 680px;
  margin: 28px 0 0;
  color: #5E6E81;
  font-size: 17px;
  line-height: 1.7;
}

.thesis-principles {
  margin-top: 30px;
  display: grid;
  gap: 18px;
}

.thesis-principles > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid rgba(122, 142, 165, 0.2);
}

.thesis-principles span {
  color: #4E7AD9;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.thesis-principles strong {
  color: #0F1A27;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.03em;
}

/* =========================================
   ECOSYSTEM
========================================= */

.ecosystem-section {
  padding: 96px 0 106px;
}

.ecosystem-header {
  margin-bottom: 36px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
}

.ecosystem-header h2 {
  margin: 0;
  color: #0B1118;
  font-size: clamp(38px, 4vw, 60px);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.ecosystem-header h2 span {
  display: block;
  margin-top: 8px;
  color: #697E97;
}

.ecosystem-header p {
  max-width: 480px;
  margin: 0;
  color: #63758A;
  font-size: 17px;
  line-height: 1.7;
}

.capability-grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.outcome-card {
  background: linear-gradient(180deg, #edf5ff 0%, #f6f9fd 100%);
}

/* =========================================
   DATA FIELD BACKGROUND
========================================= */

.data-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.72;
  pointer-events: none;
}

.data-field--hero {
  opacity: 0.62;
}

.has-data-field {
  position: relative;
  overflow: hidden;
}

.hero-data-label {
  position: absolute;
  z-index: 1;
  color: rgba(154, 184, 219, 0.55);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-data-label--a {
  top: 180px;
  right: 18%;
}

.hero-data-label--b {
  bottom: 110px;
  right: 12%;
}

/* =========================================
   DATA SECTION
========================================= */

.data-section,
.growth-section {
  position: relative;
  overflow: hidden;
  padding: 108px 0;
  background: linear-gradient(180deg, #0B1118 0%, #0C1722 100%);
}

.data-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.data-copy h2,
.growth-heading h2 {
  margin: 0;
  color: #F3F8FF;
  font-size: clamp(39px, 4vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.data-copy h2 span,
.growth-heading h2 span {
  display: block;
  margin-top: 8px;
  color: #9DB0C9;
}

.data-copy > p:not(.eyebrow),
.growth-heading > p {
  margin: 24px 0 0;
  max-width: 580px;
  color: #A1B5CB;
  font-size: 17px;
  line-height: 1.7;
}

.data-engine {
  position: relative;
  padding: 24px 20px 18px;
  border: 1px solid rgba(113, 143, 179, 0.24);
  border-radius: 28px;
  background: rgba(7, 13, 18, 0.52);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
}

.data-engine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 16px;
  color: #7C8EA7;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.data-live {
  color: #77E2B5;
}

.data-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 18px;
  align-items: center;
  min-height: 92px;
  padding: 18px 16px;
  margin-top: 10px;
  border: 1px solid rgba(124, 151, 184, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.01);
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.data-stage.is-active {
  border-color: rgba(107, 199, 255, 0.52);
  background: linear-gradient(90deg, rgba(44, 107, 224, 0.12), rgba(107, 199, 255, 0.04));
}

.data-stage-index,
.data-stage-state {
  color: #7CA5D6;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.data-stage div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.data-stage strong {
  color: #F2F8FF;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.data-stage small {
  color: #8CA0B8;
  font-size: 12px;
  line-height: 1.5;
}

.data-stage-state {
  color: #A9DFFF;
}

.data-stream {
  position: relative;
  height: 14px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.data-stream span {
  position: absolute;
  inset: 0 auto 0 -30%;
  width: 30%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(107, 199, 255, 0.8) 28%, rgba(44, 107, 224, 0.9) 52%, transparent 100%);
  animation: dataStreamMove 3.4s ease-in-out infinite;
}

@keyframes dataStreamMove {
  0% {
    transform: translateX(0%);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    transform: translateX(260%);
    opacity: 0;
  }
}

.growth-section {
  background: linear-gradient(180deg, #09141C 0%, #0E1A27 100%);
}

.growth-heading {
  max-width: 900px;
  margin: 0 auto 42px;
  text-align: center;
}

.growth-heading > p {
  margin-left: auto;
  margin-right: auto;
}

.growth-equation {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 18px;
  padding: 28px 24px;
  border: 1px solid rgba(124, 151, 184, 0.2);
  border-radius: 30px;
  background: rgba(12, 19, 26, 0.48);
}

.growth-source,
.growth-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 98px;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 18px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.growth-source span,
.growth-result span {
  color: #7ea7d6;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.growth-source strong,
.growth-result strong {
  color: #F2F8FF;
  font-size: 19px;
  letter-spacing: -0.04em;
}

.growth-plus,
.growth-arrow {
  color: #9ed0ff;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}

.growth-result {
  border-color: rgba(107, 199, 255, 0.24);
  background: linear-gradient(180deg, rgba(38, 91, 170, 0.18), rgba(10, 16, 22, 0.34));
}

.growth-result small {
  color: #9db0c9;
  font-size: 12px;
}

/* =========================================
   INSIGHTS
========================================= */

.insights-section {
  padding: 96px 0 104px;
  background: linear-gradient(180deg, #F2F5F8 0%, #EEF3F7 100%);
}

.insights-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.insights-heading h2 {
  margin: 0;
  color: #0B1118;
  font-size: clamp(38px, 4vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.insights-heading h2 span {
  display: block;
  margin-top: 8px;
  color: #6E8096;
}

.insights-link {
  color: #1A65D7;
  font-size: 14px;
  font-weight: 700;
}

.insights-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.1fr;
  gap: 18px;
}

.insight-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
  padding: 26px 24px 22px;
  border: 1px solid rgba(132, 146, 168, 0.2);
  border-radius: 28px;
  background: linear-gradient(180deg, #F8FAFC 0%, #F2F6F9 100%);
  box-shadow: 0 14px 34px rgba(13, 24, 38, 0.04);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.insight-card:hover {
  transform: translateY(-6px);
  border-color: rgba(44, 107, 224, 0.25);
  box-shadow: 0 20px 42px rgba(15, 28, 45, 0.08);
}

.insight-card span,
.insight-card small {
  color: #617899;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.insight-card h3 {
  margin: 22px 0 0;
  color: #0E1722;
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.insight-card-dark {
  border-color: rgba(62, 92, 130, 0.35);
  background: radial-gradient(circle at 18% 15%, rgba(44, 107, 224, 0.12), transparent 20%), linear-gradient(180deg, #0B1118 0%, #101B28 100%);
}

.insight-card-dark span,
.insight-card-dark small {
  color: #8DA5C8;
}

.insight-card-dark h3 {
  color: #F5F9FF;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1180px) {
  .thesis-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .thesis-index {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .thesis-line {
    width: 72px;
    height: 1px;
  }

  .capability-grid--five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-layout {
    grid-template-columns: 1fr;
  }

  .growth-equation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .growth-plus,
  .growth-arrow {
    display: none;
  }

  .insights-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .thesis-grid,
  .ecosystem-header,
  .insights-heading {
    grid-template-columns: 1fr;
    display: grid;
  }

  .thesis-principles > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .capability-grid--five {
    grid-template-columns: 1fr;
  }

  .ecosystem-header {
    display: grid;
    align-items: start;
  }

  .growth-equation {
    grid-template-columns: 1fr;
  }

  .growth-source,
  .growth-result {
    min-height: 84px;
  }

  .data-stage {
    grid-template-columns: 40px 1fr;
  }

  .data-stage-state {
    grid-column: 2;
  }

  .insights-heading {
    align-items: start;
    gap: 14px;
  }
}

/* =========================================
   PROCESS SECTION
========================================= */

@media (max-width: 980px) {

  .capability-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .capability-card:first-child {
    grid-column:
      span 2;
  }

}

@media (max-width: 680px) {

  #capabilities {
    padding:
      82px 0;
  }

  #capabilities .section-heading {
    margin-bottom:
      34px;
  }

  .capability-grid {
    grid-template-columns:
      1fr;
  }

  .capability-card:first-child {
    grid-column:
      auto;
  }

  .capability-card {
    min-height:
      410px;

    padding:
      24px;
  }

  .icon-wrap {
    margin-top:
      34px;
  }

}

/* =========================================
   PREMIUM CAROUSEL
========================================= */

.tech-carousel-section {
  position:
    relative;

  padding:
    130px 0;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(20, 110, 245, .16),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #091018,
      #0B0F14
    );
}

.carousel-ambient {
  position:
    absolute;

  width:
    780px;

  height:
    780px;

  right:
    -350px;

  top:
    -300px;

  border:
    1px solid
    rgba(107, 199, 255, .12);

  border-radius:
    50%;

  pointer-events:
    none;
}

.carousel-ambient::after {
  content:
    "";

  position:
    absolute;

  inset:
    100px;

  border:
    1px solid
    rgba(107, 199, 255, .09);

  border-radius:
    50%;
}

.carousel-heading {
  position:
    relative;

  z-index:
    2;

  margin-bottom:
    44px;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    40px;
}

.carousel-heading h2 {
  max-width:
    820px;

  margin:
    0;

  font-size:
    clamp(42px, 5vw, 68px);

  line-height:
    1;

  letter-spacing:
    -.05em;
}

.carousel-heading h2 span {
  display:
    block;

  color:
    #778496;
}

.carousel-controls {
  display:
    flex;

  gap:
    8px;
}

.carousel-button {
  width:
    48px;

  height:
    48px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(255, 255, 255, .13);

  border-radius:
    14px;

  color:
    white;

  background:
    rgba(255, 255, 255, .035);

  cursor:
    pointer;

  font-size:
    18px;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.carousel-button:hover {
  border-color:
    rgba(107, 199, 255, .42);

  background:
    rgba(20, 110, 245, .12);

  transform:
    translateY(-2px);
}

.tech-carousel {
  position:
    relative;

  z-index:
    2;

  border:
    1px solid
    rgba(255, 255, 255, .11);

  border-radius:
    34px;

  overflow:
    hidden;

  background:
    rgba(255, 255, 255, .025);

  box-shadow:
    0 45px 120px
    rgba(0, 0, 0, .26);

  backdrop-filter:
    blur(12px);
}

.carousel-viewport {
  overflow:
    hidden;

  touch-action:
    pan-y;
}

.carousel-track {
  display:
    flex;

  transition:
    transform .85s
    cubic-bezier(.22, .72, .26, 1);
}

.carousel-slide {
  position:
    relative;

  min-width:
    100%;

  min-height:
    570px;

  padding:
    56px;

  display:
    grid;

  grid-template-columns:
    .86fr 1.14fr;

  gap:
    52px;

  align-items:
    center;

  overflow:
    hidden;
}

.carousel-slide::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    .22;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, .025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .025) 1px,
      transparent 1px
    );

  background-size:
    54px 54px;

  mask-image:
    linear-gradient(
      to right,
      transparent,
      black
    );
}

.carousel-slide-copy {
  position:
    relative;

  z-index:
    3;
}

.slide-index {
  color:
    var(--signal);

  font-size:
    10px;

  letter-spacing:
    .1em;
}

.carousel-slide-copy h3 {
  margin:
    28px 0 20px;

  font-size:
    clamp(40px, 4vw, 58px);

  line-height:
    1;

  letter-spacing:
    -.05em;
}

.carousel-slide-copy h3 span {
  display:
    block;

  color:
    #8391A4;
}

.carousel-slide-copy p {
  max-width:
    470px;

  margin:
    0;

  color:
    #9CAABB;

  font-size:
    15px;

  line-height:
    1.75;
}

.slide-tags {
  margin-top:
    32px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;
}

.slide-tags span {
  padding:
    8px 10px;

  border:
    1px solid
    rgba(255, 255, 255, .11);

  border-radius:
    999px;

  color:
    #9EB0C6;

  background:
    rgba(255, 255, 255, .025);

  font-family:
    "JetBrains Mono";

  font-size:
    9px;

  letter-spacing:
    .05em;
}


/* CAROUSEL VISUAL */

.slide-visual {
  position:
    relative;

  z-index:
    3;

  min-height:
    430px;

  border:
    1px solid
    rgba(107, 199, 255, .11);

  border-radius:
    28px;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(20, 110, 245, .14),
      rgba(9, 15, 23, .85) 56%,
      #0B1118 100%
    );
}

.visual-grid {
  position:
    absolute;

  inset:
    0;

  opacity:
    .5;

  background-image:
    linear-gradient(
      rgba(107, 199, 255, .07) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(107, 199, 255, .07) 1px,
      transparent 1px
    );

  background-size:
    34px 34px;

  mask-image:
    radial-gradient(
      circle,
      black,
      transparent 78%
    );
}

.visual-core {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    142px;

  height:
    142px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(107, 199, 255, .4);

  border-radius:
    34px;

  background:
    linear-gradient(
      145deg,
      rgba(24, 109, 245, .32),
      rgba(14, 29, 50, .95)
    );

  box-shadow:
    0 0 70px
    rgba(20, 110, 245, .20);

  transform:
    translate(-50%, -50%);
}

.visual-core span {
  color:
    var(--signal);

  font-size:
    8px;
}

.visual-core strong {
  margin-top:
    8px;

  font-size:
    21px;
}

.visual-core small {
  margin-top:
    6px;

  color:
    #7691B0;

  font-family:
    "JetBrains Mono";

  font-size:
    7px;
}

.visual-node {
  position:
    absolute;

  padding:
    10px 13px;

  border:
    1px solid
    rgba(255, 255, 255, .11);

  border-radius:
    12px;

  color:
    #A9B8CA;

  background:
    rgba(12, 20, 30, .92);

  font-family:
    "JetBrains Mono";

  font-size:
    9px;

  box-shadow:
    0 18px 35px
    rgba(0, 0, 0, .18);
}

.node-a {
  left:
    10%;

  top:
    18%;
}

.node-b {
  right:
    9%;

  top:
    22%;
}

.node-c {
  left:
    12%;

  bottom:
    17%;
}

.node-d {
  right:
    10%;

  bottom:
    16%;
}

.pulse-circle {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  border:
    1px solid
    rgba(107, 199, 255, .14);

  border-radius:
    50%;

  transform:
    translate(-50%, -50%);

  animation:
    pulseRing 4s ease-in-out
    infinite;
}

.pulse-one {
  width:
    260px;

  height:
    260px;
}

.pulse-two {
  width:
    340px;

  height:
    340px;

  animation-delay:
    1s;
}


/* AI VISUAL */

.slide-intelligence {
  display:
    grid;

  place-items:
    center;
}

.ai-stack {
  position:
    relative;

  width:
    310px;

  height:
    290px;
}

.ai-layer {
  position:
    absolute;

  left:
    50%;

  width:
    220px;

  height:
    74px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(107, 199, 255, .24);

  border-radius:
    18px;

  color:
    #AFC2D9;

  background:
    rgba(20, 52, 86, .42);

  font-family:
    "JetBrains Mono";

  font-size:
    9px;

  letter-spacing:
    .10em;

  transform:
    translateX(-50%) rotateX(58deg)
    rotateZ(-4deg);

  box-shadow:
    0 25px 50px
    rgba(0, 0, 0, .22);
}

.layer-one {
  top:
    168px;

  opacity:
    .45;
}

.layer-two {
  top:
    126px;

  opacity:
    .62;
}

.layer-three {
  top:
    84px;

  border-color:
    rgba(107, 199, 255, .48);

  color:
    white;

  background:
    rgba(20, 110, 245, .26);
}

.layer-four {
  top:
    42px;

  color:
    #A3DCFF;

  background:
    rgba(23, 117, 247, .24);
}

.ai-status {
  position:
    absolute;

  left:
    28px;

  bottom:
    24px;

  color:
    #6BC7FF;

  font-size:
    8px;

  letter-spacing:
    .09em;
}


/* SYSTEM VISUAL */

.slide-systems {
  padding:
    50px;
}

.system-window {
  height:
    100%;

  overflow:
    hidden;

  border:
    1px solid
    #293A4E;

  border-radius:
    20px;

  background:
    #101923;

  box-shadow:
    0 35px 75px
    rgba(0, 0, 0, .28);

  transform:
    perspective(1000px)
    rotateY(-5deg)
    rotateX(2deg);
}

.system-window-top {
  height:
    44px;

  padding:
    0 15px;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  border-bottom:
    1px solid #233244;
}

.system-window-top i {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #40536A;
}

.system-window-body {
  height:
    calc(100% - 44px);

  display:
    grid;

  grid-template-columns:
    105px 1fr;
}

.system-side {
  border-right:
    1px solid #223145;

  background:
    linear-gradient(
      180deg,
      #121E2B,
      #0D151E
    );
}

.system-main {
  padding:
    26px;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  grid-template-rows:
    78px 1fr;

  gap:
    14px;
}

.system-stat {
  border:
    1px solid #26384E;

  border-radius:
    13px;

  background:
    linear-gradient(
      135deg,
      #14263B,
      #111A25
    );
}

.system-chart {
  position:
    relative;

  grid-column:
    span 2;

  overflow:
    hidden;

  border:
    1px solid #26384E;

  border-radius:
    14px;

  background:
    linear-gradient(
      180deg,
      rgba(20, 110, 245, .06),
      rgba(20, 110, 245, .01)
    );
}

.system-chart::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  opacity:
    .28;

  background-image:
    linear-gradient(
      rgba(107, 199, 255, .1) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(107, 199, 255, .1) 1px,
      transparent 1px
    );

  background-size:
    30px 30px;
}

.system-chart span {
  position:
    absolute;

  left:
    8%;

  right:
    8%;

  top:
    53%;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #39A8FF 15%,
      #54C4FF 55%,
      transparent
    );

  transform:
    rotate(-8deg);

  box-shadow:
    0 0 20px
    rgba(57, 168, 255, .4);
}


/* APP VISUAL */

.slide-apps {
  display:
    grid;

  place-items:
    center;
}

.phone {
  position:
    absolute;

  width:
    190px;

  height:
    360px;

  padding:
    9px;

  border:
    1px solid
    #31445A;

  border-radius:
    34px;

  background:
    #0B1118;

  box-shadow:
    0 35px 75px
    rgba(0, 0, 0, .35);
}

.phone-front {
  z-index:
    2;

  transform:
    translateX(55px)
    rotate(5deg);
}

.phone-back {
  opacity:
    .65;

  transform:
    translateX(-90px)
    translateY(18px)
    rotate(-7deg);
}

.phone-screen {
  height:
    100%;

  padding:
    25px 17px;

  overflow:
    hidden;

  border-radius:
    26px;

  background:
    linear-gradient(
      180deg,
      #142338,
      #0D1723
    );
}

.phone-screen .mono {
  color:
    var(--signal);

  font-size:
    7px;
}

.phone-hero {
  height:
    130px;

  margin-top:
    28px;

  border:
    1px solid
    rgba(107, 199, 255, .22);

  border-radius:
    18px;

  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(54, 169, 255, .38),
      transparent 42%
    ),
    #132943;
}

.phone-line {
  width:
    78%;

  height:
    7px;

  margin-top:
    20px;

  border-radius:
    99px;

  background:
    #526A85;
}

.phone-line.small {
  width:
    52%;

  margin-top:
    8px;

  opacity:
    .6;
}

.phone-card {
  height:
    72px;

  margin-top:
    22px;

  border:
    1px solid
    #293B51;

  border-radius:
    15px;

  background:
    #162538;
}

.phone-card.short {
  height:
    50px;

  margin-top:
    12px;
}


/* CAROUSEL FOOTER */

.carousel-meta {
  height:
    78px;

  padding:
    0 32px;

  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  gap:
    25px;

  align-items:
    center;

  border-top:
    1px solid
    rgba(255, 255, 255, .08);
}

.carousel-dots {
  display:
    flex;

  gap:
    7px;
}

.carousel-dot {
  width:
    8px;

  height:
    8px;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    #3D4959;

  cursor:
    pointer;

  transition:
    width .3s ease,
    border-radius .3s ease,
    background .3s ease;
}

.carousel-dot.is-active {
  width:
    25px;

  border-radius:
    999px;

  background:
    var(--signal);
}

.carousel-progress {
  position:
    relative;

  height:
    1px;

  overflow:
    hidden;

  background:
    rgba(255, 255, 255, .09);
}

.carousel-progress span {
  position:
    absolute;

  left:
    0;

  top:
    0;

  width:
    0;

  height:
    100%;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      var(--signal)
    );
}

.carousel-counter {
  display:
    flex;

  gap:
    5px;

  color:
    #657487;

  font-size:
    9px;
}

.carousel-current {
  color:
    var(--signal);
}


/* =========================================
   SECURITY
========================================= */

.security-section {
  padding:
    128px 0;
}

.split {
  display:
    grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:
    90px;

  align-items:
    center;
}

.split-copy > p:not(.eyebrow) {
  color:
    #9EACBC;
}

.text-link {
  margin-top:
    20px;

  display:
    inline-flex;

  gap:
    8px;

  color:
    #7ECFFF;

  font-size:
    14px;

  font-weight:
    700;
}

/* =========================================
   SECURITY LIVE CONSOLE
========================================= */

.security-console {
  position: relative;
  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, .13);

  border-radius: 26px;

  background:
    linear-gradient(
      145deg,
      #0D141D,
      #101A26
    );

  box-shadow:
    0 32px 100px
    rgba(0, 0, 0, .35);
}

.security-console::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: .38;

  background:
    radial-gradient(
      circle at 75% 60%,
      rgba(44, 107, 224, .08),
      transparent 40%
    );
}

.security-console::after {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  left: -15%;

  width: 12%;

  pointer-events: none;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(107, 199, 255, .06),
      transparent
    );

  transform: skewX(-10deg);
}

.security-console.visible::after {
  animation:
    securityScan 6.5s ease-in-out
    1.2s infinite;
}

.console-head,
.console-row {
  position: relative;
  z-index: 1;

  padding:
    18px 22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .08);
}

.console-head {
  color:
    #8795A7;

  font-family:
    "JetBrains Mono";

  font-size:
    10px;
}

.online {
  position: relative;

  color: #73E0B2;
}

.online::before {
  content: "";

  display: inline-block;

  width: 6px;
  height: 6px;

  margin-right: 5px;

  border-radius: 50%;

  background: #73E0B2;

  box-shadow:
    0 0 0 0
    rgba(115, 224, 178, .35);

  animation:
    securityStatusPulse 2.4s
    ease-out infinite;
}

.console-row span {
  color:
    #B8C4D3;

  font-size:
    14px;
}

.console-row strong {
  color:
    #FFCC7D;

  font-family:
    "JetBrains Mono";

  font-size:
    10px;
}

.console-row.ok strong {
  color:
    #72E7BC;
}

/* =========================================
   ATTACK SURFACE GRAPH
========================================= */

.risk-graph {
  position: relative;

  padding:
    26px 22px 14px;
}

.risk-graph-head {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}

.risk-graph-head > span {
  color: #738196;

  font-size: 9px;

  letter-spacing: .08em;
}

.risk-checks {
  display: flex;

  align-items: baseline;

  gap: 6px;

  color: #5E7896 !important;
}

.risk-checks strong {
  color: #8EA7C2;

  font-size: 13px;

  font-weight: 600;
}

.security-chart {
  width: 100%;

  height: 118px;

  margin-top: 12px;

  overflow: visible;
}

.security-chart-line {
  fill: none;

  stroke:
    url(#securityLine);

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

  stroke-dasharray: 700;

  stroke-dashoffset: 700;

  filter:
    drop-shadow(
      0 0 7px
      rgba(70, 154, 255, .24)
    );
}

.security-console.visible
.security-chart-line {
  animation:
    drawSecurityGraph
    2.2s
    cubic-bezier(.22, .61, .36, 1)
    .35s forwards;
}

.security-points circle {
  fill: #6BC7FF;

  stroke: #0F1823;

  stroke-width: 2;

  opacity: 0;

  transform-box: fill-box;

  transform-origin: center;

  transform: scale(0);
}

.security-console.visible
.security-points circle {
  animation:
    revealSecurityPoint
    .42s ease forwards;
}

.security-console.visible
.security-points circle:nth-child(1) {
  animation-delay: .8s;
}

.security-console.visible
.security-points circle:nth-child(2) {
  animation-delay: 1.15s;
}

.security-console.visible
.security-points circle:nth-child(3) {
  animation-delay: 1.5s;
}

.security-console.visible
.security-points circle:nth-child(4) {
  animation-delay: 1.85s;
}

.security-console.visible
.security-points circle:nth-child(5) {
  animation-delay: 2.15s;
}

.security-live-point {
  fill: #8FCBFF !important;
}

.security-live-ring {
  fill: none;

  stroke: #6BC7FF;

  stroke-width: 1.4;

  opacity: 0;

  transform-box: fill-box;

  transform-origin: center;
}

.security-console.visible
.security-live-ring {
  animation:
    liveSecurityPulse
    2.2s ease-out
    2.4s infinite;
}

/* =========================================
   SECURITY ROWS
========================================= */

.console-row {
  position: relative;

  overflow: hidden;

  transition:
    background .3s ease;
}

.console-row::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: 0;

  height: 1px;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(107, 199, 255, .38),
      transparent
    );

  transform:
    translateX(-100%);
}

.security-console.visible
.console-row::after {
  animation:
    securityRowScan
    3.8s ease-in-out infinite;
}

.console-row:nth-child(3)::after {
  animation-delay: .45s !important;
}

.console-row:nth-child(4)::after {
  animation-delay: .9s !important;
}

.console-row:nth-child(5)::after {
  animation-delay: 1.35s !important;
}

.console-row:hover {
  background:
    rgba(107, 199, 255, .025);
}

.console-row strong {
  transition:
    text-shadow .3s ease;
}

.console-row:hover strong {
  text-shadow:
    0 0 12px
    rgba(227, 184, 97, .18);
}

.console-row.ok strong {
  color: #72E7BC;
}

.console-row.ok:hover strong {
  text-shadow:
    0 0 12px
    rgba(114, 231, 188, .22);
}

.console-note {
  position: relative;
  z-index: 1;

  margin:
    0;

  padding:
    0 22px 22px;

  color:
    #667487;

  font-size:
    11px;

  line-height:
    1.6;
}

.console-demo {
  display: inline-block;

  margin-left: 8px;

  color: #7A90AB;

  font-size: 9px;

  letter-spacing: .1em;
}

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

@keyframes drawSecurityGraph {

  to {
    stroke-dashoffset: 0;
  }

}

@keyframes revealSecurityPoint {

  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }

}

@keyframes liveSecurityPulse {

  0% {
    opacity: .65;
    transform: scale(.6);
  }

  70% {
    opacity: 0;
    transform: scale(1.8);
  }

  100% {
    opacity: 0;
    transform: scale(1.8);
  }

}

@keyframes securityStatusPulse {

  0% {
    box-shadow:
      0 0 0 0
      rgba(115, 224, 178, .36);
  }

  75% {
    box-shadow:
      0 0 0 7px
      rgba(115, 224, 178, 0);
  }

  100% {
    box-shadow:
      0 0 0 0
      rgba(115, 224, 178, 0);
  }

}

@keyframes securityScan {

  0% {
    left: -15%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  55% {
    opacity: .8;
  }

  70%,
  100% {
    left: 115%;
    opacity: 0;
  }

}

@keyframes securityRowScan {

  0%,
  70% {
    opacity: 0;
    transform: translateX(-100%);
  }

  78% {
    opacity: .7;
  }

  100% {
    opacity: 0;
    transform: translateX(100%);
  }

}


/* =========================================
   INTELLIGENCE SECTION
========================================= */

.intelligence-section {
  background: linear-gradient(180deg, #F2F5F8 0%, #EDF2F6 100%);
  padding-bottom: 130px;
}

.intelligence-section .section-heading h2 span {
  color: #758196;
}

/* ===== FLOW CONTAINER ===== */

.ai-flow {
  margin-top: 42px;
  padding: 34px;
  border: 1px solid #D8E1EA;
  border-radius: 32px;
  background: linear-gradient(180deg, #F8FAFC 0%, #F2F6F9 100%);
  box-shadow: 0 12px 32px rgba(12, 22, 34, 0.05);

  display: grid;
  grid-template-columns: 1fr auto 1.15fr auto 1fr;
  align-items: center;
  gap: 18px;
}

.ai-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2C6BE0;
  font-size: 26px;
  transition: color 0.35s ease, transform 0.35s ease;
}

/* ===== FLOW CARDS ===== */

.ai-flow-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  min-height: 140px;
  padding: 28px;

  border: 1px solid #D7E0E8;
  border-radius: 24px;

  background: linear-gradient(180deg, #F7FAFC 0%, #F1F5F8 100%);
  box-shadow: 0 10px 24px rgba(15, 24, 35, 0.04);

  transition:
    background 0.4s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease,
    color 0.35s ease;
}

.ai-flow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;

  background:
    radial-gradient(circle at top left, rgba(55, 135, 255, 0.18), transparent 34%),
    linear-gradient(180deg, #0B1118 0%, #0F1823 100%);

  transition: opacity 0.35s ease;
}

.ai-flow-card > * {
  position: relative;
  z-index: 1;
}

.ai-flow-card .mini-label {
  display: inline-block;
  margin-bottom: 24px;
  color: #6C84A0;
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.35s ease;
}

.ai-flow-card h3 {
  margin: 0 0 10px;
  color: #0E1722;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  transition: color 0.35s ease;
}

.ai-flow-card p {
  margin: 0;
  color: #667588;
  font-size: 15px;
  line-height: 1.6;
  transition: color 0.35s ease;
}

/* ===== CARD CENTRAL AZUL ===== */

.ai-flow-card.is-core {
  border-color: #223246;
  background:
    radial-gradient(circle at 18% 18%, rgba(44, 107, 224, 0.16), transparent 25%),
    linear-gradient(180deg, #0B1118 0%, #12233A 100%);
  box-shadow: 0 14px 30px rgba(12, 22, 34, 0.16);
}

.ai-flow-card.is-core::before {
  background:
    linear-gradient(180deg, #F8FAFC 0%, #EEF3F7 100%);
}

.ai-flow-card.is-core .mini-label {
  color: #8FC2FF;
}

.ai-flow-card.is-core h3 {
  color: #FFFFFF;
}

.ai-flow-card.is-core p {
  color: #B8C6D8;
}

/* ===== HOVER - BRANCO VIRA AZUL ===== */

.ai-flow-card:not(.is-core):hover {
  transform: translateY(-6px);
  border-color: rgba(44, 107, 224, 0.22);
  box-shadow:
    0 18px 36px rgba(12, 22, 34, 0.10),
    0 26px 68px rgba(20, 110, 245, 0.10);
}

.ai-flow-card:not(.is-core):hover::before {
  opacity: 1;
}

.ai-flow-card:not(.is-core):hover .mini-label {
  color: #8FC2FF;
}

.ai-flow-card:not(.is-core):hover h3,
.ai-flow-card:not(.is-core):hover p {
  color: #FFFFFF;
}

/* ===== HOVER - AZUL VIRA BRANCO ===== */

.ai-flow-card.is-core:hover {
  transform: translateY(-6px);
  border-color: rgba(44, 107, 224, 0.24);
  background: linear-gradient(180deg, #F8FAFC 0%, #EEF3F7 100%);
  box-shadow:
    0 18px 36px rgba(12, 22, 34, 0.08),
    0 24px 60px rgba(20, 110, 245, 0.08);
}

.ai-flow-card.is-core:hover::before {
  opacity: 1;
}

.ai-flow-card.is-core:hover .mini-label {
  color: #2C6BE0;
}

.ai-flow-card.is-core:hover h3 {
  color: #12315A;
}

.ai-flow-card.is-core:hover p {
  color: #5F7084;
}

/* ===== BENEFIT CARDS ===== */

.ai-benefits {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.ai-benefit-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  min-height: 164px;
  padding: 28px 24px;

  border: 1px solid #D7E0E8;
  border-radius: 24px;

  background: linear-gradient(180deg, #F7FAFC 0%, #F1F5F8 100%);
  box-shadow: 0 10px 24px rgba(15, 24, 35, 0.04);

  transition:
    background 0.4s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

.ai-benefit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;

  background:
    radial-gradient(circle at top left, rgba(55, 135, 255, 0.18), transparent 34%),
    linear-gradient(180deg, #0B1118 0%, #0F1823 100%);

  transition: opacity 0.35s ease;
}

.ai-benefit-card > * {
  position: relative;
  z-index: 1;
}

.ai-benefit-card .mini-number {
  display: inline-block;
  margin-bottom: 22px;
  color: #4E7AD9;
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.35s ease;
}

.ai-benefit-card h3 {
  margin: 0 0 12px;
  color: #0E1722;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  transition: color 0.35s ease;
}

.ai-benefit-card p {
  margin: 0;
  color: #667588;
  font-size: 15px;
  line-height: 1.65;
  transition: color 0.35s ease;
}

.ai-benefit-card:hover {
  transform: translateY(-6px);
  border-color: rgba(44, 107, 224, 0.22);
  box-shadow:
    0 18px 36px rgba(12, 22, 34, 0.10),
    0 26px 68px rgba(20, 110, 245, 0.10);
}

.ai-benefit-card:hover::before {
  opacity: 1;
}

.ai-benefit-card:hover .mini-number {
  color: #8FC2FF;
}

.ai-benefit-card:hover h3,
.ai-benefit-card:hover p {
  color: #FFFFFF;
}

/* ===== RESPONSIVO ===== */

@media (max-width: 1080px) {
  .ai-flow {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ai-flow-arrow {
    transform: rotate(90deg);
    justify-content: flex-start;
    padding-left: 8px;
  }

  .ai-benefits {
    grid-template-columns: 1fr;
  }
}


/* =========================================
   BUILD
========================================= */

.build-section {
  background:
    white;
}

.browser-mock {
  overflow:
    hidden;

  border-radius:
    30px;

  background:
    #0D131B;

  box-shadow:
    0 40px 100px
    rgba(10, 18, 30, .17);
}

.browser-top {
  height:
    58px;

  padding:
    0 20px;

  display:
    flex;

  align-items:
    center;

  gap:
    22px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .08);
}

.dots {
  display:
    flex;

  gap:
    7px;
}

.dots i {
  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    #344256;
}

.url {
  width:
    min(480px, 55%);

  margin:
    auto;

  padding:
    8px;

  border:
    1px solid #243244;

  border-radius:
    10px;

  color:
    #75859A;

  background:
    #141D29;

  font-family:
    "JetBrains Mono";

  font-size:
    9px;

  text-align:
    center;
}

.browser-content {
  min-height:
    510px;

  display:
    grid;

  grid-template-columns:
    .76fr 1.24fr;
}

.mock-sidebar {
  padding:
    62px;

  color:
    white;

  background:
    linear-gradient(
      160deg,
      #0D131B,
      #111D2C
    );
}

.mock-sidebar > span {
  color:
    #6BC7FF;

  font-size:
    9px;
}

.mock-sidebar h3 {
  margin:
    30px 0 16px;

  font-size:
    46px;

  line-height:
    1;

  letter-spacing:
    -.04em;
}

.mock-sidebar p {
  max-width:
    360px;

  color:
    #8E9CAD;

  line-height:
    1.7;
}

.mock-tags {
  margin-top:
    30px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;
}

.mock-tags span {
  padding:
    8px 10px;

  border:
    1px solid #2A394D;

  border-radius:
    999px;

  color:
    #9DA9B8;

  font-size:
    10px;
}

.mock-screen {
  margin:
    38px 38px 0 0;

  padding:
    46px;

  border-radius:
    28px 28px 0 0;

  background:
    #F7FAFE;
}

.mock-nav {
  width:
    38%;

  height:
    10px;

  margin-bottom:
    72px;

  border-radius:
    10px;

  background:
    #D3E0EF;
}

.mock-hero-line,
.mock-copy-line {
  height:
    18px;

  margin-bottom:
    13px;

  border-radius:
    10px;

  background:
    #0D1725;
}

.mock-copy-line {
  height:
    8px;

  background:
    #CBD6E2;
}

.w80 {
  width:
    80%;
}

.w70 {
  width:
    70%;
}

.w60 {
  width:
    60%;
}

.w55 {
  width:
    55%;
}

.mock-btn {
  width:
    120px;

  height:
    38px;

  margin-top:
    25px;

  border-radius:
    10px;

  background:
    linear-gradient(
      135deg,
      #146EF5,
      #2DA8F4
    );
}

.mock-grid {
  margin-top:
    68px;

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    12px;
}

.mock-grid i {
  height:
    100px;

  border:
    1px solid #E0E7EF;

  border-radius:
    14px;

  background:
    white;
}


/* =========================================
   PROCESS SECTION
========================================= */

.process-section {
  background:
    linear-gradient(180deg, #F2F5F8 0%, #EEF3F7 100%);
}

.process-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #D7E0E8;
}

.process-step {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  min-height: 210px;
  padding: 34px 28px 30px;

  border-right: 1px solid #D7E0E8;
  background: transparent;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.process-step:last-child {
  border-right: none;
}

.process-step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  opacity: 0;
  transform: scale(1.02);

  background:
    radial-gradient(circle at top left, rgba(55, 135, 255, 0.18), transparent 32%),
    linear-gradient(180deg, #0B1118 0%, #0F1823 100%);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.process-step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 1;

  background: linear-gradient(90deg, #2C6BE0, #6BA8FF);
  opacity: 0;

  transition: opacity 0.35s ease;
}

.process-step > * {
  position: relative;
  z-index: 2;
}

.process-number {
  display: inline-block;
  margin-bottom: 40px;

  color: #4E7AD9;
  font-size: 12px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  transition: color 0.35s ease;
}

.process-step h3 {
  margin: 0 0 16px;
  color: #0B1118;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.03em;

  transition: color 0.35s ease;
}

.process-step p {
  margin: 0;
  max-width: 28ch;

  color: #667588;
  font-size: 15px;
  line-height: 1.7;

  transition: color 0.35s ease;
}

.process-step:hover {
  transform: translateY(-6px);
  border-color: rgba(44, 107, 224, 0.22);

  box-shadow:
    0 18px 38px rgba(12, 22, 34, 0.10),
    0 28px 70px rgba(20, 110, 245, 0.10);
}

.process-step:hover::before {
  opacity: 1;
  transform: scale(1);
}

.process-step:hover::after {
  opacity: 1;
}

.process-step:hover .process-number {
  color: #8FC2FF;
}

.process-step:hover h3,
.process-step:hover p {
  color: #FFFFFF;
}

/* Responsivo */
@media (max-width: 1080px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-step:nth-child(2) {
    border-right: none;
  }

  .process-step:nth-child(1),
  .process-step:nth-child(2) {
    border-bottom: 1px solid #D7E0E8;
  }
}

@media (max-width: 640px) {
  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-step {
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #D7E0E8;
  }

  .process-step:last-child {
    border-bottom: none;
  }

  .process-number {
    margin-bottom: 24px;
  }
}

/* =========================================
   CONTACT
========================================= */

.contact-section {
  padding:
    125px 0;

  background:
    radial-gradient(
      circle at 12% 30%,
      rgba(20, 110, 245, .14),
      transparent 30%
    ),
    var(--ink);
}

.contact-grid {
  display:
    grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:
    95px;

  align-items:
    start;
}

.contact-copy > p:not(.eyebrow) {
  color:
    #9DAABC;
}

.contact-options {
  margin-top:
    34px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;
}

.contact-chip {
  padding:
    11px 13px;

  border:
    1px solid
    rgba(255, 255, 255, .12);

  border-radius:
    999px;

  color:
    #9BA9BB;

  background:
    rgba(255, 255, 255, .03);

  cursor:
    pointer;

  font-size:
    12px;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.contact-chip.active {
  color:
    #A9DFFF;

  border-color:
    rgba(107, 199, 255, .5);

  background:
    rgba(20, 110, 245, .16);
}

.contact-trust {
  margin-top:
    34px;

  display:
    grid;

  gap:
    12px;
}

.contact-trust div {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}

.contact-trust p {
  margin:
    0;

  color:
    #8492A5;

  font-size:
    12px;
}

.trust-status {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #6DE4B6;

  box-shadow:
    0 0 12px
    rgba(109, 228, 182, .35);
}


/* FORM */

.contact-form {
  padding:
    30px;

  color:
    var(--ink);

  border-radius:
    28px;

  background:
    white;

  box-shadow:
    0 35px 80px
    rgba(0, 0, 0, .24);
}

.contact-form label {
  display:
    block;

  margin-bottom:
    18px;
}

.contact-form label span {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #566274;

  font-size:
    11px;

  font-weight:
    700;
}

.contact-form input,
.contact-form textarea {
  width:
    100%;

  padding:
    14px 15px;

  outline:
    none;

  border:
    1px solid #DCE3EB;

  border-radius:
    13px;

  color:
    var(--ink);

  background:
    #F8FAFC;

  resize:
    vertical;

  transition:
    border-color .2s,
    box-shadow .2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color:
    #6DB8FF;

  box-shadow:
    0 0 0 4px
    rgba(20, 110, 245, .08);
}

.field-row {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    12px;
}

.form-note {
  margin:
    14px 0 0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  color:
    #8A96A5;

  font-size:
    10px;

  text-align:
    center;
}

.secure-dot {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #62D7AA;
}

.form-status {
  min-height:
    20px;

  margin-top:
    12px;

  color:
    #146EF5;

  font-size:
    11px;

  text-align:
    center;
}

.form-status.error {
  color:
    #C84F5F;
}


/* HONEYPOT */

.hp-field {
  position:
    absolute !important;

  left:
    -10000px !important;

  width:
    1px !important;

  height:
    1px !important;

  overflow:
    hidden !important;
}


/* =========================================
   FOOTER
========================================= */

footer {
  padding:
    70px 0 25px;

  color:
    #A0ADBD;

  border-top:
    1px solid #14202C;

  background:
    #071018;
}

.footer-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    50px;
}

.footer-logo {
  display: block;

  width: auto;
  height: 32px;
  max-width: 200px;

  object-fit: contain;

  filter: none;
}

.footer-grid > div > p {
  margin-top:
    15px;

  font-size:
    13px;
}

.footer-links {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    40px;
}

.footer-links div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}

.footer-links strong {
  margin-bottom:
    6px;

  color:
    white;

  font-size:
    12px;
}

.footer-links a {
  font-size:
    12px;
}

.footer-bottom {
  margin-top:
    55px;

  padding-top:
    22px;

  display:
    flex;

  justify-content:
    space-between;

  border-top:
    1px solid #162331;

  font-size:
    10px;
}

.footer-bottom .mono {
  font-size:
    9px;

  letter-spacing:
    .08em;
}


/* =========================================
   FLOATING WHATSAPP
========================================= */

.whatsapp-fab {
  position:
    fixed;

  right:
    24px;

  bottom:
    24px;

  z-index:
    75;

  width:
    58px;

  height:
    58px;

  padding:
    0 18px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  overflow:
    hidden;

  opacity:
    0;

  pointer-events:
    none;

  border:
    1px solid
    rgba(255, 255, 255, .14);

  border-radius:
    999px;

  color:
    white;

  background:
    linear-gradient(
      135deg,
      #146EF5,
      #28A5F0
    );

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, .27),
    0 8px 28px
    rgba(20, 110, 245, .28);

  transform:
    translateY(16px);

  transition:
    width .32s
    cubic-bezier(.22, .61, .36, 1),
    opacity .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}

.whatsapp-fab.is-visible {
  opacity:
    1;

  pointer-events:
    auto;

  transform:
    translateY(0);
}

.whatsapp-fab:hover {
  width:
    207px;

  box-shadow:
    0 22px 55px
    rgba(0, 0, 0, .32),
    0 12px 34px
    rgba(20, 110, 245, .36);
}

.whatsapp-fab-icon {
  flex:
    0 0 22px;

  display:
    grid;

  place-items:
    center;
}

.whatsapp-fab-icon svg {
  width:
    22px;

  height:
    22px;
}

.whatsapp-fab-label {
  white-space:
    nowrap;

  opacity:
    0;

  font-size:
    13px;

  font-weight:
    700;

  transform:
    translateX(8px);

  transition:
    opacity .2s ease,
    transform .25s ease;
}

.whatsapp-fab:hover
.whatsapp-fab-label {
  opacity:
    1;

  transform:
    translateX(0);
}


/* =========================================
   REVEAL
========================================= */

.reveal {
  opacity:
    0;

  transform:
    translateY(20px);

  transition:
    opacity .75s ease,
    transform .75s ease;
}

.reveal.visible {
  opacity:
    1;

  transform:
    none;
}

.delay-1 {
  transition-delay:
    .08s;
}

.delay-2 {
  transition-delay:
    .16s;
}

.delay-3 {
  transition-delay:
    .24s;
}


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

@keyframes floatCard {

  from {
    transform:
      translateY(-3px);
  }

  to {
    transform:
      translateY(8px);
  }

}

@keyframes coreGlow {

  from {
    opacity:
      .6;

    transform:
      rotate(42deg)
      scale(.98);
  }

  to {
    opacity:
      1;

    transform:
      rotate(48deg)
      scale(1.04);
  }

}

@keyframes pulseRing {

  0% {
    opacity:
      .2;

    transform:
      translate(-50%, -50%)
      scale(.92);
  }

  50% {
    opacity:
      .75;
  }

  100% {
    opacity:
      0;

    transform:
      translate(-50%, -50%)
      scale(1.12);
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 980px) {

  .desktop-nav,
  .desktop-cta {
    display:
      none;
  }

  .menu-btn {
    display:
      block;
  }

  .mobile-nav {
    position:
      fixed;

    left:
      0;

    right:
      0;

    top:
      78px;

    padding:
      25px 20px 34px;

    flex-direction:
      column;

    gap:
      22px;

    color:
      white;

    border-bottom:
      1px solid #263241;

    background:
      #0B0F14;
  }

  .mobile-nav.open {
    display:
      flex;
  }

  .hero {
    min-height:
      auto;

    padding-top:
      130px;
  }

  .hero-grid,
  .split,
  .contact-grid {
    grid-template-columns:
      1fr;
  }

  .hero-visual {
    height:
      540px;

    margin-top:
      5px;
  }

  .hero h1 {
    font-size:
      64px;
  }

  .capability-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .capability-card:first-child {
    grid-column:
      span 2;
  }

  .split {
    gap:
      55px;
  }

  .flow-board {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }

  .flow-arrow {
    transform:
      rotate(90deg);
  }

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

  .mock-screen {
    min-height:
      400px;

    margin:
      0 28px;

    padding:
      35px;
  }

  .process-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .process-item:nth-child(2) {
    border-right:
      0;
  }

  .process-item:nth-child(3) {
    border-top:
      1px solid #D6DEE7;
  }

  .carousel-slide {
    grid-template-columns:
      1fr;

    gap:
      36px;
  }

  .slide-visual {
    min-height:
      400px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 680px) {

  :root {
    --container:
      min(100% - 28px, 1180px);
  }

  .nav {
    height:
      68px;
  }

  .brand img {
    height:
      32px;

    max-width:
      180px;
  }

  .mobile-nav {
    top:
      68px;
  }

  .hero {
    padding:
      112px 0 62px;
  }

  .hero h1 {
    font-size:
      clamp(42px, 15vw, 64px);
  }

  .hero-sub {
    font-size:
      16px;
  }

  .hero-actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .hero-proof {
    grid-template-columns:
      1fr;

    gap:
      16px;
  }

  .hero-visual {
    height:
      440px;

    margin-top:
      15px;
  }

  .core-node {
    width:
      140px;

    height:
      140px;
  }

  .core-node img {
    width:
      60px;
  }

  .float-card {
    width:
      155px;

    padding:
      13px;
  }

  .float-card strong {
    font-size:
      11px;
  }

  .card-security {
    left:
      -4px;

    top:
      62px;
  }

  .card-ai {
    right:
      -3px;

    top:
      84px;
  }

  .card-build {
    right:
      5px;

    bottom:
      52px;
  }

  .section-light,
  .build-section,
  .process-section,
  .security-section,
  .contact-section {
    padding:
      85px 0;
  }

  .section-heading {
    margin-bottom:
      38px;
  }

  .section-heading h2,
  .split h2,
  .contact-copy h2 {
    font-size:
      40px;
  }

  .capability-grid {
    grid-template-columns:
      1fr;
  }

  .capability-card:first-child {
    grid-column:
      auto;
  }

  .capability-card {
    min-height:
      430px;

    padding:
      24px;
  }

  .icon-wrap {
    margin-top:
      42px;
  }

  .split,
  .contact-grid {
    gap:
      48px;
  }

  .mini-cards {
    grid-template-columns:
      1fr;
  }

  .browser-top {
    gap:
      10px;
  }

  .url {
    width:
      70%;
  }

  .mock-sidebar {
    padding:
      40px 28px;
  }

  .mock-sidebar h3 {
    font-size:
      38px;
  }

  .mock-screen {
    min-height:
      370px;

    margin:
      0 16px;

    padding:
      28px 22px;
  }

  .mock-grid {
    gap:
      7px;
  }

  .mock-grid i {
    height:
      75px;
  }

  .process-grid {
    grid-template-columns:
      1fr;
  }

  .process-item,
  .process-item:not(:first-child),
  .process-item:last-child {
    min-height:
      160px;

    padding:
      24px 0;

    border-top:
      1px solid #D6DEE7;

    border-right:
      0;
  }

  .process-item:first-child {
    border-top:
      0;
  }

  .process-item h3 {
    margin-top:
      30px;
  }

  .field-row {
    grid-template-columns:
      1fr;

    gap:
      0;
  }

  .contact-form {
    padding:
      22px;
  }

  .footer-grid {
    grid-template-columns:
      1fr;
  }

  .footer-links {
    grid-template-columns:
      1fr 1fr;
  }

  .footer-bottom {
    flex-direction:
      column;

    gap:
      8px;
  }


  /* CAROUSEL MOBILE */

  .tech-carousel-section {
    padding:
      90px 0;
  }

  .carousel-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .carousel-heading h2 {
    font-size:
      41px;
  }

  .carousel-controls {
    align-self:
      flex-end;
  }

  .carousel-slide {
    min-height:
      690px;

    padding:
      30px 22px;

    gap:
      30px;
  }

  .carousel-slide-copy h3 {
    font-size:
      38px;
  }

  .slide-visual {
    min-height:
      340px;
  }

  .node-a,
  .node-b,
  .node-c,
  .node-d {
    font-size:
      7px;
  }

  .ai-stack {
    transform:
      scale(.82);
  }

  .slide-systems {
    padding:
      22px;
  }

  .system-window-body {
    grid-template-columns:
      65px 1fr;
  }

  .phone {
    width:
      150px;

    height:
      300px;
  }

  .phone-front {
    transform:
      translateX(40px)
      rotate(5deg);
  }

  .phone-back {
    transform:
      translateX(-65px)
      translateY(18px)
      rotate(-7deg);
  }

  .carousel-meta {
    height:
      68px;

    padding:
      0 18px;

    gap:
      12px;
  }


  /* WHATSAPP */

  .whatsapp-fab {
    right:
      16px;

    bottom:
      16px;

    width:
      54px;

    height:
      54px;

    padding:
      0 16px;
  }

  .whatsapp-fab:hover {
    width:
      54px;
  }

  .whatsapp-fab-label {
    display:
      none;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (
  prefers-reduced-motion: reduce
) {

  html {
    scroll-behavior:
      auto;
  }

  *,
  *::before,
  *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

  .reveal {
    opacity:
      1;

    transform:
      none;
  }

}