:root{--bg:#090b10;--ink:#0e1118;--paper:#f5f3ee;--paper-2:#ebe8e0;--white:#fff;--muted:#6f737c;--muted-light:#a6aab4;--gold:#c7a95a;--gold-bright:#e0c675;--gold-soft:#d5bd78;--line:#dcd8cf;--dark-line:#242934;--radius:24px;--shadow:0 28px 80px rgba(13,14,18,.12);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}

/* =========================================================
   GLOBAL SCROLLBAR
   ========================================================= */

/* Firefox */

html{
  scrollbar-width:thin;
  scrollbar-color:#343946 #ebe8e0;
}


/* Chrome / Edge / Safari */

::-webkit-scrollbar{
  width:7px;
  height:7px;
}


::-webkit-scrollbar-track{
  background:#ebe8e0;
}


::-webkit-scrollbar-thumb{
  background:#343946;

  border-radius:999px;

  border:1px solid #ebe8e0;
}


::-webkit-scrollbar-thumb:hover{
  background:#a08543;
}

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);overflow-x:hidden}a{color:inherit}button,input,select,textarea{font:inherit}.shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}.page-noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.025;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='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}.page-glow{position:fixed;z-index:-2;border-radius:999px;filter:blur(100px);opacity:.17;pointer-events:none}.page-glow-a{width:520px;height:520px;background:#d8bf74;top:-270px;right:-130px}.page-glow-b{width:400px;height:400px;background:#9f8a51;top:840px;left:-250px}
.site-header{width:min(1240px,calc(100% - 40px));height:80px;margin:14px auto 0;padding:0 24px;display:flex;align-items:center;gap:28px;position:relative;z-index:20;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(9,11,16,.95);color:white;box-shadow:0 18px 50px rgba(0,0,0,.16);backdrop-filter:blur(18px)}.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;min-width:max-content}.brand-copy{display:flex;align-items:baseline;gap:6px}.brand-copy strong{font-size:13px;letter-spacing:.22em}.brand-copy small{font-size:11px;letter-spacing:.18em;color:var(--gold-bright)}.nav-links{display:flex;align-items:center;gap:24px;margin:auto}.nav-links a{text-decoration:none;color:#b8bcc5;font-size:12px;transition:.2s ease}.nav-links a:hover{color:white}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:11px;padding:12px 17px;text-decoration:none;font-size:13px;font-weight:750;transition:transform .2s ease,background .2s ease,border-color .2s ease}.button:hover{transform:translateY(-1px)}.button-quiet{border:1px solid #343946;background:#151923;color:#f2f3f5}.button-quiet:hover{background:#1c212d}.button-primary{background:var(--ink);color:white;border:1px solid var(--ink);padding:14px 20px}.button-primary:hover{background:#222733}.button-light{background:#f8f5ed;color:#10131a;padding:14px 20px}

.header-logo-wrap{
  width:38px;
  height:38px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  overflow:hidden;

  border:1px solid rgba(224,198,117,.42);
  border-radius:11px;

  background:#11151d;
}

.header-logo{
  display:block;

  width:31px;
  height:31px;

  object-fit:contain;
}

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

.hero{
  position:relative;

  display:grid;

  grid-template-columns:
        minmax(0,1.02fr)
        minmax(460px,.98fr);

  align-items:center;

  gap:68px;

  min-height:720px;

  padding:92px 0 88px;
}


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

.hero-copy{
  position:relative;

  z-index:2;

  max-width:660px;
}


.hero h1{
  max-width:770px;

  margin:0;

  font-size:
          clamp(52px,6.15vw,84px);

  font-weight:680;

  line-height:.95;

  letter-spacing:-.055em;
}


.hero h1 em{
  font-family:
          Georgia,
          "Times New Roman",
          serif;

  font-weight:400;
  font-style:italic;

  color:#9e8340;
}


.hero-lede{
  max-width:650px;

  margin:30px 0 0;

  color:#5f646d;

  font-size:17px;
  line-height:1.75;
}


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

.hero-actions{
  display:flex;
  align-items:center;

  gap:24px;

  margin-top:35px;
}


.text-link{
  display:inline-flex;
  align-items:center;

  gap:8px;

  color:#171a20;

  font-size:13px;
  font-weight:700;

  text-decoration:none;
}


.text-link span{
  transition:
          transform .22s ease;
}


.text-link:hover span{
  transform:
          translateY(3px);
}


/* =========================================================
   TRUST ROW
   ========================================================= */

.trust-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:12px;

  margin-top:52px;

  color:#747982;

  font-size:10px;

  text-transform:uppercase;

  letter-spacing:.09em;
}


.trust-row i{
  width:3px;
  height:3px;

  border-radius:50%;

  background:#b4a26f;
}


/* =========================================================
   ONYX STAGE
   ========================================================= */

.onyx-stage{
  position:relative;

  width:100%;
  height:590px;

  overflow:hidden;
  isolation:isolate;

  border-radius:30px;

  color:#fff;

  background:
          radial-gradient(
                  circle at 50% 48%,
                  #17151a 0%,
                  #0d1016 34%,
                  #090b10 70%
          );

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

  box-shadow:
          0 42px 90px rgba(13,14,18,.25),
          inset 0 0 0 1px rgba(255,255,255,.018);
}


/* =========================================================
   CANVAS
   ========================================================= */

.onyx-particle-canvas{
  position:absolute;

  inset:0;

  z-index:2;

  display:block;

  width:100%;
  height:100%;

  pointer-events:none;
}


/* =========================================================
   CENTRAL AMBIENT LIGHT
   ========================================================= */

.onyx-stage-aura{
  position:absolute;

  z-index:1;

  left:50%;
  top:50%;

  width:330px;
  height:330px;

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

  border-radius:50%;

  background:
          radial-gradient(
                  circle,
                  rgba(215,161,143,.11) 0%,
                  rgba(199,169,90,.055) 35%,
                  transparent 70%
          );

  filter:
          blur(15px);

  pointer-events:none;
}


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

.onyx-stage-grid{
  position:absolute;

  inset:0;

  z-index:0;

  opacity:.42;

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

  background-size:
          48px 48px;

  -webkit-mask-image:
          radial-gradient(
                  circle at center,
                  #000 0%,
                  transparent 78%
          );

  mask-image:
          radial-gradient(
                  circle at center,
                  #000 0%,
                  transparent 78%
          );

  pointer-events:none;
}


/* =========================================================
   TOP STATUS
   ========================================================= */

.stage-topline{
  position:absolute;

  z-index:6;

  left:24px;
  right:24px;
  top:22px;

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

  pointer-events:none;
}


.stage-index{
  color:#646b76;

  font-size:7px;
  font-weight:750;

  letter-spacing:.16em;
}


.stage-status{
  display:flex;
  align-items:center;

  gap:7px;

  color:#8f969f;

  font-size:7px;
  font-weight:750;

  letter-spacing:.14em;
}


.stage-status b{
  width:6px;
  height:6px;

  border-radius:50%;

  background:#d6b968;

  box-shadow:
          0 0 0 4px rgba(214,185,104,.08),
          0 0 12px rgba(214,185,104,.35);

  animation:
          onyxStatusPulse 2.5s ease-in-out infinite;
}


/* =========================================================
   FLOATING LABELS
   ========================================================= */

.core-label{
  position:absolute;

  z-index:5;

  display:flex;
  align-items:center;

  gap:7px;

  padding:7px 9px;

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

  border-radius:999px;

  color:#737a85;

  background:
          rgba(11,14,20,.48);

  backdrop-filter:
          blur(7px);

  font-size:6px;
  font-weight:800;

  letter-spacing:.13em;

  pointer-events:none;
}


.core-label i{
  width:4px;
  height:4px;

  border-radius:50%;

  background:#caa85b;

  box-shadow:
          0 0 8px rgba(202,168,91,.38);
}


.core-label-voice{
  left:7%;
  top:29%;
}


.core-label-web{
  right:8%;
  top:25%;
}


.core-label-knowledge{
  left:8%;
  bottom:27%;
}


.core-label-qualification{
  right:6%;
  bottom:30%;
}


/* =========================================================
   CENTRAL ONYX IDENTITY
   ========================================================= */

.onyx-core-identity{
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  pointer-events:none;
}

.onyx-core-logo-wrap{
  position:relative;
  isolation:isolate;
  width:176px;
  height:176px;
  display:grid;
  place-items:center;
}

.onyx-core-logo-wrap::before{
  content:"";
  position:absolute;
  z-index:0;
  width:126px;
  height:126px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(218,174,135,.13),rgba(199,169,90,.055) 42%,transparent 72%);
  filter:blur(13px);
}

.onyx-core-logo{
  position:relative;
  z-index:1;
  display:block;
  width:138px;
  max-width:80%;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 0 10px rgba(218,178,124,.18))
    drop-shadow(0 0 25px rgba(218,178,124,.09));
}

.onyx-core-identity small{
  margin-top:5px;
  color:#656b75;
  font-size:5.5px;
  font-weight:750;
  letter-spacing:.15em;
}

/* =========================================================
   BOTTOM CAPTION
   ========================================================= */

.stage-caption{
  position:absolute;

  z-index:6;

  left:24px;
  right:24px;
  bottom:22px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  pointer-events:none;
}


.stage-caption > div{
  display:grid;

  gap:4px;
}


.stage-caption strong{
  color:#dcbf99;

  font-size:8px;

  letter-spacing:.15em;
}


.stage-caption span{
  color:#717985;

  font-size:7px;
}


.stage-caption > small{
  color:#555d68;

  font-size:6px;

  letter-spacing:.10em;
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes onyxStatusPulse{

  0%,
  100%{
    opacity:.55;
  }

  50%{
    opacity:1;

    box-shadow:
            0 0 0 5px rgba(214,185,104,.09),
            0 0 17px rgba(214,185,104,.5);
  }

}


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

@media(max-width:980px){

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

    gap:52px;

    padding-top:72px;
  }


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


  .onyx-stage{
    width:100%;
    max-width:720px;

    height:560px;
  }

}


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

@media(max-width:680px){

  .hero{
    display:block;

    min-height:auto;

    padding:58px 0 64px;
  }


  .hero h1{
    font-size:
            clamp(46px,13vw,58px);
  }


  .hero-lede{
    font-size:15px;
  }


  .hero-actions{
    align-items:flex-start;
    flex-direction:column;
  }


  .trust-row{
    margin-top:38px;
  }


  .onyx-stage{
    height:445px;

    margin-top:48px;

    border-radius:24px;
  }


  .stage-topline{
    left:17px;
    right:17px;
    top:17px;
  }


  .stage-caption{
    left:17px;
    right:17px;
    bottom:17px;
  }


  .core-label{
    font-size:5.5px;

    padding:6px 7px;
  }


  .core-label-voice{
    left:4%;
  }


  .core-label-web{
    right:4%;
  }


  .core-label-knowledge{
    left:4%;
  }


  .core-label-qualification{
    right:4%;
  }


  .stage-caption > small{
    display:none;
  }

}


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

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

  .stage-status b{
    animation:none;
  }

}

.signal-strip{background:#0d1016;color:#7f858f;border-top:1px solid #1d222c;border-bottom:1px solid #1d222c;display:grid;grid-template-columns:repeat(5,1fr);padding:18px max(24px,calc((100vw - 1180px)/2));font-size:9px;letter-spacing:.14em}.signal-strip div{text-align:center;border-right:1px solid #232832}.signal-strip div:last-child{border-right:0}
/* =========================================================
   SHARED SECTION TYPOGRAPHY
   ========================================================= */

.section{
  padding:116px 0;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 20px;
  color:#7b6a3d;
  font-size:10px;
  font-weight:850;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.eyebrow > span{
  width:26px;
  height:1px;
  flex:0 0 auto;
  background:var(--gold);
}

.eyebrow-light{
  color:#bca768;
}

.eyebrow-light > span{
  background:#c7a95a;
}

.section-heading{
  max-width:790px;
  margin-bottom:52px;
}

.section-heading h2,
.onyx-copy h2,
.integration-copy h2,
.final-cta h2{
  margin:0;
  font-size:clamp(38px,4vw,58px);
  font-weight:650;
  line-height:1.04;
  letter-spacing:-.045em;
}

.section-heading > p:last-child,
.onyx-copy > p,
.integration-copy > p{
  max-width:650px;
  margin:20px 0 0;
  color:#686d76;
  font-size:15px;
  line-height:1.78;
}

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

.capabilities-section{
  position:relative;
}


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

.capability-grid{
  display:grid;

  grid-template-columns:
        repeat(12, minmax(0,1fr));

  gap:16px;
}


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

.capability-card{
  grid-column:span 4;

  min-width:0;
  min-height:365px;

  padding:27px;

  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;

  background:#fff;

  border:
          1px solid var(--line);

  border-radius:24px;

  box-shadow:
          0 12px 35px rgba(16,18,24,.04);

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


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

  border-color:#d3c79f;

  box-shadow:
          0 20px 52px rgba(16,18,24,.08);
}


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

.capability-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:44px;
}


.capability-top span,
.capability-top b{
  font-size:9px;
  font-weight:850;

  letter-spacing:.12em;

  text-transform:uppercase;

  color:#a08543;
}


.capability-top b{
  letter-spacing:.14em;
}


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

.capability-card h3{
  margin:0 0 12px;

  font-size:24px;
  line-height:1.15;

  letter-spacing:-.03em;
}


.capability-card > p{
  margin:0;

  font-size:13px;
  line-height:1.72;

  color:#6b7078;
}


/* =========================================================
   VISUAL AREA BASE
   ========================================================= */

.talk-visual,
.understand-visual,
.qualify-visual,
.knowledge-visual,
.follow-visual,
.handoff-visual{
  position:relative;

  min-height:108px;

  margin-top:auto;
  padding-top:29px;
}


/* =========================================================
   01 — TALK
   ========================================================= */

.talk-visual{
  display:grid;

  align-content:end;

  gap:8px;
}


.mini-message{
  max-width:82%;

  padding:9px 11px;

  border-radius:12px;

  font-size:9px;
  line-height:1.45;
}


.message-user{
  justify-self:end;

  color:#23262c;

  background:#f2f0ea;

  border:
          1px solid #e0dcd2;
}


.message-ai{
  display:flex;
  align-items:flex-start;

  gap:8px;

  color:#d8dce3;

  background:#11151d;
}


.message-ai i{
  width:18px;
  height:18px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  border-radius:6px;

  font-family:Georgia,serif;
  font-style:normal;

  color:#17130c;

  background:#c5a858;
}


.typing{
  display:flex;

  gap:4px;

  margin-left:9px;
  margin-top: 9px;
}


.typing i{
  width:4px;
  height:4px;

  border-radius:50%;

  background:#baa15f;

  animation:
          capabilityTyping 1.35s ease-in-out infinite;
}


.typing i:nth-child(2){
  animation-delay:.15s;
}


.typing i:nth-child(3){
  animation-delay:.30s;
}


/* =========================================================
   02 — UNDERSTAND
   ========================================================= */

.understand-visual{
  display:grid;

  align-content:end;

  gap:16px;
}


.language-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.language-cloud span{
  padding:7px 9px;

  border-radius:999px;
  border:1px solid #ddd6c5;

  background:#f5f3ee;

  color:#75673f;

  font-size:8px;
}

.language-cloud .language-more{
  padding-inline:11px;

  border-color:#cdbb83;

  background:#fbf8f0;

  color:#9a8040;

  font-weight:800;

  letter-spacing:.06em;
}

.language-support{
  display:flex;
  align-items:center;

  gap:7px;

  margin-top:-5px;

  font-size:7px;
  font-weight:800;

  letter-spacing:.12em;

  color:#9a8752;
}

.language-support i{
  width:5px;
  height:5px;

  border-radius:50%;

  background:#c7a95a;

  box-shadow:
          0 0 0 4px rgba(199,169,90,.08);
}


.language-cloud span:nth-child(2){
  animation:
          capabilitySoftPulse 3s ease-in-out infinite;
}


.language-cloud span:nth-child(3){
  animation:
          capabilitySoftPulse 3s .8s ease-in-out infinite;
}


.intent-line{
  min-height:38px;

  padding:0 12px;

  display:flex;
  align-items:center;

  gap:10px;

  border-radius:11px;

  background:#11151d;

  color:#aeb4be;

  font-size:8px;

  letter-spacing:.10em;
}


.intent-line i{
  width:6px;
  height:6px;

  flex:0 0 auto;

  border-radius:50%;

  background:#d3b65f;

  box-shadow:
          0 0 0 5px rgba(211,182,95,.08);
}


/* =========================================================
   03 — QUALIFY
   ========================================================= */

.qualify-visual{
  display:grid;

  grid-template-columns:
        110px minmax(0,1fr);

  align-items:center;

  gap:20px;
}


.score-dial{
  width:104px;
  height:104px;

  position:relative;

  display:grid;
  place-items:center;
  align-content:center;

  border-radius:50%;

  background:
          conic-gradient(
                  #c7a95a 0 82%,
                  #ece8dd 82% 100%
          );
}


.score-dial::before{
  content:"";

  position:absolute;

  inset:8px;

  border-radius:50%;

  background:#fff;
}


.score-dial strong,
.score-dial small{
  position:relative;

  z-index:2;
}


.score-dial strong{
  font-size:27px;

  letter-spacing:-.05em;
}


.score-dial small{
  font-size:6px;

  letter-spacing:.12em;

  color:#8c8f95;
}


.score-bars{
  display:grid;

  gap:10px;
}


.score-bars i{
  width:100%;
  height:7px;

  display:block;

  position:relative;
  overflow:hidden;

  border-radius:99px;

  background:#eeeae0;
}


.score-bars i::after{
  content:"";

  position:absolute;

  inset:0 auto 0 0;

  width:var(--w);

  border-radius:inherit;

  background:#b79a50;

  transform:
          scaleX(0);

  transform-origin:left center;

  transition:
          transform 1s .25s
          cubic-bezier(.2,.75,.2,1);
}


.capability-card.is-visible .score-bars i::after,
.is-visible .score-bars i::after{
  transform:
          scaleX(1);
}


/* =========================================================
   04 — KNOWLEDGE NETWORK
   ========================================================= */

.knowledge-visual{
  width:100%;
  height:128px;
  min-height:128px;

  position:relative;

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

  overflow:visible;
}


.knowledge-map{
  display:block;

  width:100%;
  height:128px;

  overflow:visible;
}


/* =========================================================
   CONNECTION PATHS
   ========================================================= */

.knowledge-path{
  fill:none;

  stroke:#d1c6aa;
  stroke-width:1.15;

  stroke-linecap:round;
  stroke-linejoin:round;

  transition:
          stroke .25s ease;
}


/* =========================================================
   DATA PACKETS
   ========================================================= */

.knowledge-packet{
  fill:#c6a958;

  opacity:.98;

  pointer-events:none;

  transition:
          fill .25s ease;
}


/* =========================================================
   SOURCE NODES
   PROPERTY / ORG / DATA
   ========================================================= */

.knowledge-source rect{
  fill:#f3f1eb;

  stroke:#ded8ca;
  stroke-width:1;
}


.knowledge-source text{
  fill:#787c83;

  font-family:inherit;

  font-size:7px;
  font-weight:800;

  letter-spacing:.08em;

  text-anchor:middle;
  dominant-baseline:middle;
}


/* =========================================================
   ONYX PROCESSING CORE
   ========================================================= */

.knowledge-core-svg rect{
  fill:#11151d;

  stroke:rgba(199,169,90,.18);
  stroke-width:1;
}


.knowledge-core-svg text{
  fill:#dbc171;

  font-family:inherit;

  font-size:8px;
  font-weight:850;

  letter-spacing:.10em;

  text-anchor:middle;
  dominant-baseline:middle;
}


.knowledge-core-svg .knowledge-core-sub{
  fill:#707782;

  font-size:4.8px;
  font-weight:750;

  letter-spacing:.13em;
}


/* =========================================================
   HOVER
   ========================================================= */

.capability-know:hover .knowledge-path{
  stroke:#c4b486;
}


.capability-know:hover .knowledge-packet{
  fill:#d7ba66;
}


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

@media(max-width:680px){

  .knowledge-visual{
    height:120px;
    min-height:120px;
  }

  .knowledge-map{
    height:120px;
  }

}


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

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

  .knowledge-packet{
    display:none;
  }

}

/* =========================================================
   05 — FOLLOW UP
   ========================================================= */

.follow-visual{
  display:grid;

  align-content:center;

  gap:11px;

  padding-left:5px;
}


.follow-visual > div{
  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
        10px minmax(0,1fr);

  align-items:center;

  gap:9px;
}


.follow-visual > div i{
  width:7px;
  height:7px;

  border-radius:50%;

  border:
          1px solid #b79b52;

  background:#fff;
}


.follow-visual > div:first-of-type i{
  background:#c7a95a;

  box-shadow:
          0 0 0 5px rgba(199,169,90,.08);
}


.follow-visual span{
  display:flex;

  gap:7px;

  font-size:8px;

  color:#777c84;
}


.follow-visual span b{
  color:#a08747;
}


.follow-visual em{
  position:absolute;

  left:8px;
  top:45px;

  width:1px;
  height:65px;

  background:#ded7c8;

  z-index:1;
}


/* =========================================================
   06 — HANDOFF
   ========================================================= */

.handoff-visual{
  display:grid;

  grid-template-columns:
        65px minmax(0,1fr) 65px;

  align-items:center;

  gap:13px;
}


.handoff-node{
  display:grid;

  place-items:center;

  gap:4px;
}


.handoff-node strong{
  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  border-radius:15px;

  background:#11151d;

  color:#d7b968;

  font-family:Georgia,serif;
}


.handoff-human strong{
  background:#efede6;

  color:#555b65;

  font-family:inherit;

  font-size:10px;
}


.handoff-node small{
  font-size:6px;

  letter-spacing:.12em;

  color:#94989e;
}


.handoff-track{
  height:1px;

  position:relative;

  background:#d4ccb9;
}


.handoff-track::before,
.handoff-track::after{
  content:"";

  position:absolute;

  top:-3px;

  width:7px;
  height:7px;

  border-radius:50%;

  background:#d4ccb9;
}


.handoff-track::before{
  left:0;
}


.handoff-track::after{
  right:0;
}


.handoff-track i{
  position:absolute;

  left:0;
  top:-4px;

  width:8px;
  height:8px;

  border-radius:50%;

  background:#c6a858;

  box-shadow:
          0 0 12px rgba(198,168,88,.4);

  animation:
          capabilityHandoff 3.4s ease-in-out infinite;
}


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

@keyframes capabilityTyping{

  0%,
  60%,
  100%{
    opacity:.35;

    transform:
            translateY(0);
  }

  30%{
    opacity:1;

    transform:
            translateY(-2px);
  }

}


@keyframes capabilitySoftPulse{

  0%,
  100%{
    border-color:#ddd6c5;

    background:#f5f3ee;
  }

  50%{
    border-color:#c9b36d;

    background:#faf7ef;
  }

}


@keyframes capabilityHandoff{

  0%{
    left:0;
  }

  45%{
    left:
            calc(100% - 8px);
  }

  55%{
    left:
            calc(100% - 8px);
  }

  100%{
    left:0;
  }

}


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

@media(max-width:980px){

  .capability-card{
    grid-column:span 6;
  }

}


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

@media(max-width:680px){

  .capability-grid{
    display:block;
  }


  .capability-card{
    min-height:auto;

    margin-bottom:14px;

    padding:23px;
  }


  .capability-top{
    margin-bottom:30px;
  }


  .capability-card h3{
    font-size:22px;
  }


  .talk-visual,
  .understand-visual,
  .qualify-visual,
  .knowledge-visual,
  .follow-visual,
  .handoff-visual{
    margin-top:0;
    padding-top:28px;
  }


  .qualify-visual{
    grid-template-columns:
            90px minmax(0,1fr);

    gap:16px;
  }


  .score-dial{
    width:86px;
    height:86px;
  }


  .score-dial strong{
    font-size:23px;
  }


  .knowledge-visual,
  .knowledge-map{
    height:120px;
    min-height:120px;
  }


  .handoff-visual{
    grid-template-columns:
            55px minmax(0,1fr) 55px;

    gap:9px;
  }


  .handoff-node strong{
    width:42px;
    height:42px;
  }

}


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

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

  .typing i,
  .language-cloud span,
  .handoff-track i{
    animation:none !important;
  }


  .knowledge-packet{
    display:none;
  }


  .score-bars i::after{
    transform:
            scaleX(1);

    transition:none;
  }

}

/* =========================================================
   DATA FLOW / WORKFLOW
   ========================================================= */

.flow-section{
  position:relative;

  padding:92px 0;

  color:#fff;

  background:
          radial-gradient(
                  circle at 50% 45%,
                  rgba(199,169,90,.035),
                  transparent 36%
          ),
          #0d1016;

  overflow:hidden;
}


/* =========================================================
   FLOW HEADING
   ========================================================= */

.flow-heading{
  display:block;

  max-width:920px;

  margin-bottom:38px;
}


.flow-heading .eyebrow{
  margin-bottom:22px;
}


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

  margin:0;

  font-size:clamp(38px,4.3vw,64px);
  line-height:1.03;
  letter-spacing:-.045em;
}


.flow-heading .flow-intro{
  max-width:690px;

  margin:24px 0 0;

  color:#9299a4;

  font-size:13px;
  line-height:1.75;
}


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

.data-flow{
  position:relative;

  display:grid;

  grid-template-columns:
        repeat(6,minmax(0,1fr));

  border-top:
          1px solid #2b3039;

  border-bottom:
          1px solid #2b3039;
}


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

.data-flow article{
  position:relative;
  z-index:2;

  min-width:0;
  min-height:138px;

  padding:20px 16px 16px;

  border-right:1px solid #252a33;

  background:rgba(13,16,22,.74);

  transition:background .25s ease;
}


.data-flow article:last-child{
  border-right:0;
}


.data-flow article:hover{
  background:
          rgba(17,20,27,.92);
}


/* step number */

.data-flow article > span{
  display:block;

  font-size:8px;
  font-weight:800;

  letter-spacing:.08em;

  color:#b89b51;
}


/* main label */

.data-flow strong{
  display:block;

  margin-top:35px;

  font-size:14px;
  font-weight:650;
  line-height:1.2;

  color:#f1f2f4;
}


/* supporting text */

.data-flow small{
  display:block;

  margin-top:5px;

  max-width:125px;

  color:#737a86;

  font-size:8px;
  line-height:1.45;
}


/* =========================================================
   DATA LINE
   ========================================================= */


.flow-track{
  position:absolute;

  left:4.5%;
  right:4.5%;
  top:54px;

  height:1px;

  z-index:3;

  background:
          linear-gradient(
                  90deg,
                  transparent 0%,
                  #4c4531 7%,
                  #806d3d 50%,
                  #4c4531 93%,
                  transparent 100%
          );

  pointer-events:none;
}


/* =========================================================
   MOVING DATA PACKETS
   ========================================================= */

.flow-packet{
  position:absolute;

  left:0;
  top:-3.5px;

  width:7px;
  height:7px;

  border-radius:50%;

  background:#e0c675;

  box-shadow:
          0 0 8px rgba(224,198,117,.65),
          0 0 18px rgba(224,198,117,.28);

  animation:
          flowpacket 7s linear infinite;
}


.flow-packet-2{
  opacity:.68;

  animation-delay:-3.5s;
}


/* =========================================================
   TABLET
   Keep the workflow on one line but allow horizontal scroll.
   ========================================================= */

@media(max-width:980px){

  .flow-section{
    padding:80px 0;
  }


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

    gap:22px;

    margin-bottom:38px;
  }


  .flow-heading > p{
    justify-self:start;

    max-width:650px;
  }


  .data-flow{
    grid-template-columns:
            repeat(6,150px);

    overflow-x:auto;
    overflow-y:hidden;

    scrollbar-width:thin;

    scrollbar-color:
            #343944 transparent;
  }


  .data-flow article{
    min-height:155px;
  }


  .flow-track{
    left:35px;
    right:35px;
  }

}


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

@media(max-width:680px){

  .flow-section{
    padding:68px 0;
  }


  .flow-heading{
    margin-bottom:30px;
  }


  .data-flow{
    grid-template-columns:
            repeat(6,142px);
  }


  .data-flow article{
    min-height:148px;

    padding:
            19px 14px 17px;
  }


  .data-flow strong{
    margin-top:40px;

    font-size:13px;
  }


  .flow-track{
    top:55px;
  }

}


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

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

  .flow-packet{
    animation:none;
    display:none;
  }

}

/* =========================================================
   WORKSPACE SECTION
   ========================================================= */

.workspace-section{
  position:relative;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.workspace-heading{
  max-width:920px;

  margin-bottom:52px;
}


.workspace-heading .eyebrow{
  margin-bottom:18px;
}


.workspace-heading h2{
  max-width:900px;

  margin:0;

  font-size:clamp(42px,4.6vw,66px);
  line-height:1.02;

  letter-spacing:-.045em;
}


/* =========================================================
   TWO COLUMN LAYOUT
   ========================================================= */

.workspace-layout{
  display:grid;

  grid-template-columns:
        minmax(300px,.76fr)
        minmax(0,1.24fr);

  gap:72px;

  align-items:center;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.workspace-copy{
  min-width:0;
}


.workspace-intro{
  max-width:470px;

  margin:0;

  color:#6b7078;

  font-size:13px;
  line-height:1.75;
}


/* =========================================================
   WORKSPACE POINTS
   ========================================================= */

.workspace-points{
  display:grid;

  margin:28px 0 30px;
}


.workspace-points > div{
  display:grid;

  grid-template-columns:
        34px minmax(0,1fr);

  gap:12px;

  padding:13px 0;

  border-bottom:
          1px solid #ddd8cd;
}


.workspace-points > div:first-child{
  border-top:
          1px solid #ddd8cd;
}


.workspace-points b{
  padding-top:2px;

  color:#a08543;

  font-size:8px;
  font-weight:850;
}


.workspace-points span{
  display:grid;

  gap:3px;
}


.workspace-points strong{
  color:#11151d;

  font-size:11px;
  font-weight:700;
}


.workspace-points small{
  color:#858990;

  font-size:8px;
  line-height:1.5;
}


/* =========================================================
   WORKSPACE PREVIEW
   ========================================================= */

.workspace-preview{
  position:relative;

  min-width:0;

  width:100%;
}


/* =========================================================
   BROWSER FRAME
   ========================================================= */

.preview-browser{
  width:100%;

  overflow:hidden;

  color:#fff;

  background:#0e1117;

  border:
          1px solid #252a33;

  border-radius:24px;

  box-shadow:
          0 34px 80px rgba(13,14,18,.18);

  transform:
          perspective(1500px)
          rotateY(-1.2deg)
          rotateX(.4deg);

  transform-origin:center center;

  transition:
          transform .45s ease,
          box-shadow .45s ease;
}


.workspace-preview:hover .preview-browser{
  transform:
          perspective(1500px)
          rotateY(0)
          rotateX(0)
          translateY(-3px);

  box-shadow:
          0 42px 95px rgba(13,14,18,.22);
}


/* =========================================================
   BROWSER TOP BAR
   ========================================================= */

.preview-topbar{
  height:46px;

  display:flex;
  align-items:center;

  gap:6px;

  padding:0 16px;

  border-bottom:
          1px solid #252a33;
}


.preview-topbar > span{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#343944;
}


.preview-topbar b{
  margin-left:auto;

  color:#6d7480;

  font-size:7px;
  font-weight:750;

  letter-spacing:.13em;
}


/* =========================================================
   PREVIEW SHELL
   ========================================================= */

.preview-shell{
  display:grid;

  grid-template-columns:
        58px minmax(0,1fr);

  min-height:430px;
}


/* =========================================================
   PREVIEW NAV
   ========================================================= */

.preview-nav{
  display:flex;
  flex-direction:column;
  align-items:center;

  gap:17px;

  padding:18px 13px;

  border-right:
          1px solid #252a33;
}


.preview-logo{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  margin-bottom:7px;

  overflow:hidden;

  border:
          1px solid #5d5030;

  border-radius:9px;

  background:#12161e;
}


.preview-logo-image{
  display:block;

  width:23px;
  height:23px;

  object-fit:contain;
}


.preview-nav > i{
  width:18px;
  height:4px;

  border-radius:99px;

  background:#303641;
}


.preview-nav > i.active{
  background:#b89b50;
}


/* =========================================================
   PREVIEW MAIN
   ========================================================= */

.preview-main{
  min-width:0;

  padding:24px;
}


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

.preview-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  padding-bottom:17px;

  border-bottom:
          1px solid #232831;
}


.preview-header span{
  display:grid;

  gap:5px;
}


.preview-header small,
.preview-summary > small,
.preview-next > small,
.preview-activity > small{
  color:#8b7440;

  font-size:7px;

  letter-spacing:.13em;
}


.preview-header strong{
  font-size:17px;
}


.preview-header > b{
  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  color:#ddc06c;

  border:
          1px solid #383f4a;

  border-radius:15px;
}


/* =========================================================
   STATS
   ========================================================= */

.preview-stats{
  display:grid;

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

  gap:8px;

  margin:15px 0;
}


.preview-stats span{
  min-width:0;

  padding:11px;

  background:#151922;

  border:
          1px solid #252b35;

  border-radius:11px;
}


.preview-stats small{
  display:block;

  margin-bottom:6px;

  color:#68707c;

  font-size:6px;

  letter-spacing:.1em;
}


.preview-stats b{
  font-size:9px;
}


/* =========================================================
   SUMMARY / NEXT ACTION
   ========================================================= */

.preview-columns{
  display:grid;

  grid-template-columns:
        1.15fr .85fr;

  gap:9px;
}


.preview-summary,
.preview-next{
  min-width:0;
  min-height:124px;

  padding:14px;

  background:#151922;

  border:
          1px solid #252b35;

  border-radius:13px;
}


.preview-summary p{
  margin:11px 0;

  color:#c2c7cf;

  font-size:9px;
  line-height:1.6;
}


.preview-tags{
  display:flex;

  flex-wrap:wrap;

  gap:5px;
}


.preview-tags i{
  padding:5px 7px;

  color:#9ea4ad;

  border:
          1px solid #313844;

  border-radius:999px;

  font-size:6px;
  font-style:normal;
}


.preview-next{
  display:grid;

  align-content:start;

  gap:10px;
}


.preview-next span{
  display:flex;
  align-items:center;

  gap:7px;

  color:#aab0b9;

  font-size:7px;
}


.preview-next span i{
  width:5px;
  height:5px;

  flex:0 0 auto;

  border-radius:50%;

  background:#c3a657;
}


/* =========================================================
   ACTIVITY
   ========================================================= */

.preview-activity{
  margin-top:9px;

  padding:14px;

  border:
          1px solid #252b35;

  border-radius:13px;
}


.preview-activity > small{
  display:block;

  margin-bottom:10px;
}


.preview-activity > div{
  display:grid;

  grid-template-columns:
        5px minmax(0,1fr);

  align-items:center;

  gap:8px;

  margin-top:7px;
}


.preview-activity > div i{
  width:4px;
  height:4px;

  border-radius:50%;

  background:#59616d;
}


.preview-activity > div span{
  height:5px;

  border-radius:99px;

  background:#242b35;
}


.preview-activity > div:nth-of-type(2) span{
  width:75%;
}


.preview-activity > div:nth-of-type(3) span{
  width:58%;
}


/* =========================================================
   PREVIEW CAPTION
   ========================================================= */

.preview-caption{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  margin:13px 5px 0;

  color:#777b82;
}


.preview-caption span{
  flex:0 0 auto;

  color:#947b3c;

  font-size:7px;

  letter-spacing:.14em;
}


.preview-caption small{
  text-align:right;

  font-size:8px;
}


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

@media(max-width:980px){

  .workspace-heading{
    margin-bottom:40px;
  }


  .workspace-layout{
    grid-template-columns:1fr;

    gap:46px;
  }


  .workspace-copy{
    max-width:650px;
  }


  .workspace-intro{
    max-width:600px;
  }


  .workspace-preview{
    max-width:760px;
  }

}


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

@media(max-width:680px){

  .workspace-heading{
    margin-bottom:34px;
  }


  .workspace-heading h2{
    font-size:clamp(36px,11vw,48px);
  }


  .workspace-layout{
    gap:38px;
  }


  .preview-shell{
    grid-template-columns:
            44px minmax(0,1fr);

    min-height:390px;
  }


  .preview-nav{
    padding:
            15px 8px;

    gap:15px;
  }


  .preview-nav > i{
    width:14px;
  }


  .preview-main{
    padding:17px;
  }


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


  .preview-next{
    min-height:auto;
  }


  .preview-caption{
    align-items:flex-start;

    flex-direction:column;

    gap:5px;
  }


  .preview-caption small{
    text-align:left;
  }

}


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

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

  .preview-browser{
    transform:none !important;

    transition:none;
  }

}

.onyx-section{background:#0c0f15;color:#fff}.onyx-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.onyx-copy>p{color:#969da8}.onyx-traits{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}.onyx-traits span{font-size:8px;letter-spacing:.07em;color:#bec3cb;border:1px solid #2e343e;background:#12161e;border-radius:999px;padding:8px 10px}.voice-signature{height:410px;border:1px solid #282e37;border-radius:26px;background:linear-gradient(180deg,#11151c,#0b0e13);position:relative;overflow:hidden}.voice-signature:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:34px 34px}.voice-topline{position:absolute;z-index:3;left:20px;right:20px;top:18px;display:flex;justify-content:space-between;font-size:7px;letter-spacing:.13em;color:#747b86}.voice-topline b{display:flex;gap:7px;align-items:center;color:#8f969f}.voice-topline i{width:6px;height:6px;border-radius:50%;background:#87d6a2;box-shadow:0 0 0 5px rgba(135,214,162,.06)}#onyx-wave{position:absolute;inset:55px 0 68px;width:100%;height:calc(100% - 123px);z-index:2}.voice-transcript{position:absolute;left:20px;right:20px;bottom:18px;border-top:1px solid #252b33;padding-top:14px;display:flex;justify-content:space-between;align-items:center;z-index:3}.voice-transcript span{font-family:Georgia,serif;color:#d9c47f;font-size:14px}.voice-transcript small{font-size:7px;color:#747b86}

/* =========================================================
   INTEGRATIONS
   ========================================================= */

.integration-section{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:72px;
  align-items:center;
}

.integration-copy > p{
  max-width:590px;
}

.integration-note{
  padding-left:15px;
  border-left:2px solid #d0b45f;
  font-size:12px !important;
  color:#7a7f87 !important;
}

.integration-copy .button{
  margin-top:28px;
}


/* =========================================================
   NETWORK PANEL
   ========================================================= */

.network-panel{
  height:470px;
  position:relative;
  overflow:hidden;

  border-radius:28px;
  border:1px solid #292e37;

  background:
          radial-gradient(
                  circle at 50% 48%,
                  rgba(208,180,95,.055),
                  transparent 31%
          ),
          #0e1117;

  box-shadow:
          0 24px 60px rgba(15,17,22,.13);
}


/* subtle technical grid */

.network-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;

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

  background-size:44px 44px;

  pointer-events:none;
}


/* =========================================================
   SVG CONNECTIONS
   ========================================================= */

.network-lines{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  z-index:1;

  pointer-events:none;
}

.network-lines path{
  fill:none;

  stroke:rgba(202,172,91,.36);
  stroke-width:1.25;

  stroke-linecap:round;

  stroke-dasharray:4 7;
}


/* =========================================================
   MOVING DATA PACKETS
   IMPORTANT:
   These circles now live INSIDE the SVG,
   so they remain exactly on the paths.
   ========================================================= */

.network-lines .packet{
  fill:#e1c46f;

  filter:
          drop-shadow(0 0 3px rgba(225,196,111,.95))
          drop-shadow(0 0 9px rgba(225,196,111,.55));

  pointer-events:none;
}


/* =========================================================
   NETWORK NODES
   ========================================================= */

.network-node{
  position:absolute;
  z-index:3;

  min-width:102px;

  padding:10px 12px;

  display:grid;
  gap:3px;

  color:#d7dbe1;

  background:
          rgba(21,25,34,.96);

  border:
          1px solid #303641;

  border-radius:13px;

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

.network-node strong{
  font-size:9px;
  line-height:1.2;
}

.network-node small{
  font-size:6px;
  color:#707884;
}


/* small connection light beside external nodes */

.network-node > b{
  position:absolute;

  left:-4px;
  top:50%;

  width:6px;
  height:6px;

  transform:
          translateY(-50%);

  border-radius:50%;

  background:#c7a95a;

  box-shadow:
          0 0 0 4px rgba(199,169,90,.08),
          0 0 10px rgba(199,169,90,.22);
}


/* =========================================================
   CENTRAL GLAMOUR AI NODE
   ========================================================= */

.network-core{
  left:50%;
  top:50%;

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

  width:130px;
  height:105px;

  min-width:130px;

  padding:10px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:6px;

  border-color:
          rgba(199,169,90,.42);

  background:
          rgba(17,20,27,.98);

  box-shadow:
          0 15px 40px rgba(0,0,0,.24),
          0 0 35px rgba(199,169,90,.045),
          inset 0 0 0 1px rgba(255,255,255,.02);
}


/* logo */

.network-core-logo{
  display:block;

  width:72px;
  max-width:82%;

  height:auto;
  max-height:72px;

  object-fit:contain;
}

.network-core small{
  margin-top:1px;

  font-size:6px;

  letter-spacing:.13em;

  color:#7f8691;
}


/* =========================================================
   NODE POSITIONS
   ========================================================= */

.network-web{
  left:7%;
  top:12%;
}

.network-crm{
  right:7%;
  top:12%;
}

.network-data{
  left:6%;
  bottom:15%;
}

.network-phone{
  right:6%;
  bottom:15%;
}

.network-api{
  left:50%;
  bottom:5%;

  transform:
          translateX(-50%);
}


/* =========================================================
   STATUS CHIPS
   ========================================================= */

.network-status{
  position:absolute;

  left:15px;
  right:15px;
  bottom:12px;

  z-index:5;

  display:flex;
  gap:6px;

  pointer-events:none;
}

.network-status span{
  padding:5px 7px;

  font-size:6px;
  letter-spacing:.1em;

  color:#727a85;

  border:
          1px solid #282e37;

  border-radius:999px;

  background:
          rgba(17,21,28,.94);
}


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

@media(max-width:980px){

  .integration-section{
    grid-template-columns:1fr;
    gap:46px;
  }

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

  .network-panel{
    width:100%;
    max-width:680px;
  }

}


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

@media(max-width:680px){

  .integration-section{
    display:block;
  }

  .integration-copy{
    margin-bottom:45px;
  }

  .network-panel{
    height:410px;
    border-radius:22px;
  }

  .network-node{
    min-width:88px;
    padding:8px 9px;
  }

  .network-node strong{
    font-size:8px;
  }

  .network-node small{
    font-size:5.5px;
  }

  .network-web{
    left:5%;
    top:11%;
  }

  .network-crm{
    right:5%;
    top:11%;
  }

  .network-data{
    left:4%;
    bottom:17%;
  }

  .network-phone{
    right:4%;
    bottom:17%;
  }

  .network-api{
    bottom:5%;
  }

  .network-core{
    width:112px;
    height:92px;
    min-width:112px;
  }

  .network-core-logo{
    width:62px;
    max-height:60px;
  }

  .network-status{
    display:none;
  }

}

/* =========================================================
   COMPANY / GLAMOUR ECOSYSTEM
   ========================================================= */

.company-section{
  position:relative;
  padding-top:88px;
}


/* =========================================================
   COMPANY HEADING
   ========================================================= */

.company-heading{
  display:grid;

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

  gap:64px;

  align-items:end;

  margin-bottom:42px;
}


.company-heading > div{
  min-width:0;
}


.company-heading h2{
  max-width:680px;

  margin:0;

  font-size:clamp(38px,4vw,58px);
  line-height:1.04;

  letter-spacing:-.045em;

  font-weight:650;
}


.company-heading > p{
  max-width:470px;

  margin:0;

  justify-self:end;

  color:#6b7078;

  font-size:13px;
  line-height:1.75;
}


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

.company-focus{
  display:grid;

  grid-template-columns:
        repeat(4,minmax(0,1fr));

  gap:10px;

  padding-top:4px;
}


/* PRODUCT LINK */

.company-product{
  min-width:0;
  min-height:82px;

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

  gap:14px;

  padding:17px 18px;

  color:#171a20;

  background:#f1efe9;

  border:1px solid var(--line);
  border-radius:14px;

  text-decoration:none;

  box-shadow:
          0 8px 24px rgba(16,18,24,.025);

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


.company-product > span{
  min-width:0;

  display:grid;

  gap:5px;
}


.company-product b{
  color:inherit;

  font-size:8px;
  font-weight:850;

  letter-spacing:.11em;

  white-space:nowrap;
}


.company-product small{
  color:#898d94;

  font-size:7px;
  line-height:1.4;
}


.company-product > i{
  flex:0 0 auto;

  color:#a08543;

  font-size:11px;
  font-style:normal;

  transition:
          transform .25s ease,
          color .25s ease;
}


/* =========================================================
   PRODUCT HOVER
   ========================================================= */

.company-product:hover{
  transform:translateY(-3px);

  background:#fff;

  border-color:#cdbf98;

  box-shadow:
          0 15px 38px rgba(15,17,22,.065);
}


.company-product:hover > i{
  color:#8f7538;

  transform:translate(2px,-2px);
}


/* =========================================================
   CURRENT PRODUCT — GLAMOUR AI
   ========================================================= */

.company-product-active{
  color:#fff;

  background:#11151d;

  border-color:#252b35;

  box-shadow:
          0 14px 34px rgba(13,15,20,.12);
}


.company-product-active small{
  color:#858c96;
}


.company-product-active > i{
  color:#c7a95a;
}


.company-product-active:hover{
  background:#151a23;

  border-color:#8e7942;

  box-shadow:
          0 17px 42px rgba(13,15,20,.16);
}


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

@media(max-width:980px){

  .company-heading{
    grid-template-columns:1fr;

    gap:22px;

    margin-bottom:38px;
  }


  .company-heading > p{
    max-width:650px;

    justify-self:start;
  }


  .company-focus{
    grid-template-columns:
            repeat(2,minmax(0,1fr));

    gap:10px;
  }

}


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

@media(max-width:560px){

  .company-section{
    padding-top:70px;
  }


  .company-heading{
    margin-bottom:30px;
  }


  .company-heading h2{
    font-size:clamp(36px,10vw,46px);
  }


  .company-heading > p{
    font-size:12px;
  }


  .company-focus{
    grid-template-columns:1fr;
  }


  .company-product{
    min-height:76px;

    padding:16px 17px;
  }

}


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

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

  .company-product,
  .company-product > i{
    transition:none;
  }


  .company-product:hover{
    transform:none;
  }

}

.final-cta{
  margin-top:16px;
  margin-bottom:80px;
  padding:72px;
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:#0c0f15;
  color:#fff;
}

.final-cta::after{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  right:-190px;
  top:-230px;
  border-radius:50%;
  background:rgba(199,169,90,.12);
  filter:blur(85px);
}

.final-cta .eyebrow,
.final-cta h2,
.final-cta > p,
.final-actions{
  position:relative;
  z-index:2;
}

.final-cta h2{
  max-width:830px;
}

.final-cta > p:nth-of-type(2){
  max-width:660px;
  color:#939aa5;
  font-size:14px;
  line-height:1.7;
}

.final-actions{
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:26px;
}

.text-link.text-link-light{
  color:#d3d7dd;
}

.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .72s ease,transform .78s cubic-bezier(.2,.75,.2,1);
}

.reveal.is-visible{
  opacity:1;
  transform:none;
}


/* =========================================================
   SHARED ANIMATION / RESPONSIVE
   ========================================================= */

@keyframes flowpacket{
  from{left:0}
  to{left:100%}
}

@media(max-width:1080px){
  .nav-links{gap:15px}
  .nav-links a{font-size:10px}
}

@media(max-width:980px){
  .site-header{width:min(100% - 24px,1240px)}
  .nav-links{display:none}
  .site-header .button{margin-left:auto}

  .signal-strip{
    grid-template-columns:repeat(3,1fr);
    row-gap:14px;
  }
  .signal-strip div{border:0}

  .onyx-layout{
    grid-template-columns:1fr;
    gap:46px;
  }
  .onyx-copy{max-width:760px}
  .voice-signature{max-width:680px;width:100%}
}

@media(max-width:680px){
  .shell{width:min(100% - 30px,1180px)}

  .site-header{
    height:68px;
    padding:0 15px;
    border-radius:16px;
  }
  .header-logo-wrap{width:34px;height:34px;border-radius:10px}
  .header-logo{width:28px;height:28px}
  .brand-copy strong{font-size:11px}
  .brand-copy small{font-size:9px}
  .site-header .button{padding:10px 12px}

  .signal-strip{
    grid-template-columns:1fr 1fr;
    padding-block:16px;
  }

  .section{padding:78px 0}
  .section-heading h2,
  .onyx-copy h2,
  .integration-copy h2,
  .final-cta h2{font-size:38px}

  .onyx-layout{display:block}
  .onyx-copy{margin-bottom:42px}
  .voice-signature{height:340px}
  .voice-transcript{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }

  .final-cta{
    padding:46px 26px;
    margin-bottom:55px;
  }
  .final-actions{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .flow-packet{
    animation:none !important;
  }
}

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

.site-footer{
  margin-top:85px;

  color:#9399a3;

  background:#0d1016;

  border-top:1px solid #20252e;
}


.footer-main{
  display:grid;

  grid-template-columns:
        minmax(280px,1.8fr)
        minmax(150px,.7fr)
        minmax(180px,.8fr);

  gap:70px;

  padding-top:58px;
  padding-bottom:52px;
}


/* BRAND */

.footer-brand{
  max-width:390px;
}

.footer-brand-logo{
  display:inline-block;

  margin-bottom:18px;
}

.footer-brand-logo img{
  display:block;

  width:125px;
  max-height:44px;

  object-fit:contain;
}

.footer-brand p{
  max-width:340px;

  margin:0;

  color:#8d949e;

  font-size:12px;
  line-height:1.7;
}

.footer-powered{
  display:block;

  margin-top:18px;

  color:#a08543;

  font-size:7px;
  font-weight:800;

  letter-spacing:.16em;
}


/* LINK GROUPS */

.footer-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;

  gap:11px;
}

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

  color:#c5a95d;

  font-size:7px;
  font-weight:850;

  letter-spacing:.16em;
}

.footer-links a{
  position:relative;

  color:#858c96;

  font-size:10px;

  text-decoration:none;

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

.footer-links a:hover{
  color:#f0f1f3;

  transform:translateX(2px);
}


/* BOTTOM */

.footer-bottom{
  min-height:68px;

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

  gap:30px;

  border-top:1px solid #20252e;

  color:#666d77;

  font-size:8px;
}

.footer-bottom a{
  color:#777f89;

  text-decoration:none;

  transition:color .2s ease;
}

.footer-bottom a:hover{
  color:#c7a95a;
}


/* TABLET */

@media(max-width:800px){

  .footer-main{
    grid-template-columns:1.4fr 1fr;

    gap:45px;
  }

  .footer-brand{
    grid-column:1 / -1;
  }

}


/* MOBILE */

@media(max-width:560px){

  .site-footer{
    margin-top:65px;
  }

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

    gap:35px;

    padding-top:45px;
    padding-bottom:40px;
  }

  .footer-brand{
    grid-column:auto;
  }

  .footer-bottom{
    align-items:flex-start;
    flex-direction:column;

    gap:8px;

    padding-top:18px;
    padding-bottom:20px;
  }

}

/* =========================================================
   BACK TO TOP
   ========================================================= */

.back-to-top{
  position:fixed;

  right:22px;
  bottom:22px;

  z-index:50;

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  padding:0;

  border:1px solid rgba(199,169,90,.38);
  border-radius:13px;

  background:rgba(14,17,23,.92);
  color:#dfc36e;

  box-shadow:
          0 10px 30px rgba(8,10,14,.18),
          inset 0 0 0 1px rgba(255,255,255,.025);

  backdrop-filter:blur(10px);

  font-size:16px;
  line-height:1;

  cursor:pointer;

  opacity:0;
  visibility:hidden;

  transform:translateY(10px);

  transition:
          opacity .25s ease,
          visibility .25s ease,
          transform .25s ease,
          border-color .25s ease,
          background .25s ease;
}


.back-to-top.is-visible{
  opacity:1;
  visibility:visible;

  transform:translateY(0);
}


.back-to-top:hover{
  background:#151922;

  border-color:rgba(224,198,117,.72);

  transform:translateY(-2px);
}


.back-to-top span{
  display:block;

  transform:translateY(-1px);
}


/* MOBILE */

@media(max-width:680px){

  .back-to-top{
    right:14px;
    bottom:14px;

    width:38px;
    height:38px;

    border-radius:11px;

    font-size:14px;
  }

}


/* REDUCED MOTION */

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

  .back-to-top{
    transition:none;
  }

}


/* =========================================================
   ONYX LIGHT / PRO · Interactive workspace showcase
   ========================================================= */
.dual-workspace-section{overflow:hidden}.dual-workspace-lede{max-width:790px;margin:18px auto 0;color:#727782;font-size:15px;line-height:1.7;text-align:center}.dual-workspace-layout{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(560px,1.25fr);gap:58px;align-items:center;margin-top:54px}.dual-mode-copy h3{margin:9px 0 12px;font-size:31px;letter-spacing:-.035em}.dual-mode-copy>p{margin:0 0 24px;color:#747983;line-height:1.7}.dual-mode-label{display:inline-flex;padding:6px 9px;border:1px solid #d7c47f;border-radius:999px;color:#806617;font-size:10px;font-weight:850;letter-spacing:.14em}.dual-points{margin-bottom:20px}.dual-workspace-controls{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;margin:5px 0 20px;padding:4px;border:1px solid #dad6cc;border-radius:12px;background:#ece9e1}.dual-workspace-controls button{min-width:88px;padding:8px 13px;border:0;border-radius:8px;background:transparent;color:#737780;font-size:11px;font-weight:800;cursor:pointer}.dual-workspace-controls button.active{background:#0d1118;color:#fff;box-shadow:0 6px 18px #1118271c}.dual-dashboard-showcase{position:relative;min-height:570px;perspective:1600px}.dual-dashboard-flipper{position:relative;width:100%;height:510px;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.dual-dashboard-showcase:hover:not(.mode-locked) .dual-dashboard-flipper,.dual-dashboard-showcase[data-dashboard-showcase="pro"] .dual-dashboard-flipper{transform:rotateY(180deg)}.dual-dashboard-face{position:absolute;inset:0;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:25px;background:#0d1118;box-shadow:0 38px 90px #15171d2b;backface-visibility:hidden;-webkit-backface-visibility:hidden}.dual-dashboard-pro{transform:rotateY(180deg)}.dual-browser-bar{height:48px;display:flex;align-items:center;gap:7px;padding:0 17px;border-bottom:1px solid #ffffff12;color:#fff}.dual-browser-bar>span{width:7px;height:7px;border-radius:50%;background:#ffffff24}.dual-browser-bar b{margin-left:8px;font-size:9px;letter-spacing:.14em}.dual-browser-bar em{margin-left:auto;font-style:normal;color:#c7a95a;font-size:8px;letter-spacing:.13em}.dual-light-shell,.dual-pro-shell{display:grid;grid-template-columns:62px 1fr;height:calc(100% - 48px)}.dual-light-shell aside,.dual-pro-shell aside{display:grid;align-content:start;justify-items:center;gap:14px;padding:17px 10px;border-right:1px solid #ffffff10;background:#10151e}.mini-onyx{display:grid;place-items:center;width:31px;height:31px;margin-bottom:7px;border-radius:10px;background:linear-gradient(145deg,#ddc87d,#8d7121);color:#10151e;font-size:12px;font-weight:900}.dual-light-shell aside i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#687181;font-style:normal;font-size:12px}.dual-light-shell aside i.active{background:#ffffff0c;color:#d7c47f}.dual-light-shell main{padding:22px;background:radial-gradient(circle at 85% 0,#3f392619,transparent 30%),#f5f6f8}.dual-light-greeting{display:grid;padding:19px 20px;border-radius:16px;background:#151b26;color:#fff}.dual-light-greeting small{color:#c7a95a;font-size:7px;letter-spacing:.12em}.dual-light-greeting strong{margin-top:5px;font-size:18px}.dual-light-greeting span{margin-top:5px;color:#9fa8b7;font-size:9px}.dual-light-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.dual-light-metrics div{padding:12px;border:1px solid #e4e8ee;border-radius:11px;background:#fff}.dual-light-metrics small{display:block;color:#8a909a;font-size:6px;letter-spacing:.08em}.dual-light-metrics b{display:block;margin-top:5px;font-size:19px}.dual-light-journey,.dual-light-attention{margin-top:10px;padding:12px;border:1px solid #e4e8ee;border-radius:11px;background:#fff}.dual-light-journey>small,.dual-light-attention>small{display:block;margin-bottom:9px;color:#937622;font-size:6px;letter-spacing:.1em}.dual-light-journey>div{display:grid;grid-template-columns:repeat(6,auto);align-items:center;gap:3px}.dual-light-journey i{width:8px;height:8px;border:2px solid #d4bd6e;border-radius:50%}.dual-light-journey i.done{background:#d4bd6e}.dual-light-journey span{display:none}.dual-light-attention article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #edf0f3}.dual-light-attention article:first-of-type{border-top:0}.dual-light-attention article>b{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#111827;color:#d7c47f;font-size:7px}.dual-light-attention article span{display:grid}.dual-light-attention article strong{font-size:8px}.dual-light-attention article em{font-style:normal;color:#8a909a;font-size:7px}.dual-light-attention article>i{font-style:normal;color:#9a7b23}.dual-pro-shell aside{background:#10151e}.dual-pro-shell aside i{width:26px;height:7px;border-radius:999px;background:#29313e}.dual-pro-shell aside i.active{background:#c7a95a}.dual-pro-shell main{padding:21px;background:#eef1f5}.dual-pro-head{display:flex;align-items:center;justify-content:space-between}.dual-pro-head span{display:grid}.dual-pro-head small{color:#8a909a;font-size:6px;letter-spacing:.1em}.dual-pro-head strong{margin-top:3px;font-size:17px}.dual-pro-head>b{padding:5px 8px;border-radius:999px;background:#10151e;color:#d7c47f;font-size:7px;letter-spacing:.1em}.dual-pro-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:15px}.dual-pro-grid section{display:grid;padding:11px;border:1px solid #dfe4ea;border-radius:10px;background:#fff}.dual-pro-grid small,.dual-pro-panels small{color:#8a909a;font-size:6px;letter-spacing:.08em}.dual-pro-grid strong{margin-top:4px;font-size:17px}.dual-pro-grid em{margin-top:3px;color:#8a909a;font-size:6px;font-style:normal}.dual-pro-panels{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.dual-pro-panels>div{display:grid;gap:7px;padding:12px;border:1px solid #dfe4ea;border-radius:10px;background:#fff}.dual-pro-panels span{padding:7px 8px;border-radius:7px;background:#f3f5f7;color:#3e4652;font-size:7px}.dual-showcase-hint{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:#7e828a;font-size:9px;letter-spacing:.04em}.dual-showcase-hint small{font-size:8px}.dual-showcase-caption{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:13px;padding:0 4px}.dual-showcase-caption strong{font-size:10px;letter-spacing:.04em}.dual-showcase-caption span{color:#8a8f97;font-size:9px}@media(max-width:1040px){.dual-workspace-layout{grid-template-columns:1fr;gap:34px}.dual-dashboard-showcase{width:min(760px,100%);margin-inline:auto}.dual-mode-copy{max-width:760px}}@media(max-width:680px){.dual-workspace-lede{text-align:left}.dual-dashboard-showcase{min-height:500px}.dual-dashboard-flipper{height:445px}.dual-light-shell,.dual-pro-shell{grid-template-columns:48px 1fr}.dual-light-shell main,.dual-pro-shell main{padding:13px}.dual-pro-grid{grid-template-columns:1fr 1fr}.dual-light-greeting strong{font-size:15px}.dual-showcase-hint small{display:none}.dual-showcase-caption{align-items:flex-start;flex-direction:column}.dual-workspace-controls{width:100%}.dual-workspace-controls button{width:100%}}@media(prefers-reduced-motion:reduce){.dual-dashboard-flipper{transition:none}.dual-dashboard-showcase:hover:not(.mode-locked) .dual-dashboard-flipper{transform:none}}