/* =========================================================
   HUB EXECUTIVO — SINGLE FILE
   HTML + CSS + JavaScript
   ========================================================= */
:root {
   --navy: #071426;
   --navy-2: #0b1d35;
   --blue: #164d83;
   --blue-light: #2f78b9;
   --gold: #c9a45b;
   --gold-light: #e4c982;
   --white: #fff;
   --soft: #f4f7fa;
   --muted: #8492a6;
   --line: rgba(255, 255, 255, .10);
   --dark-line: rgba(7, 20, 38, .10);
   --radius: 24px;
   --ease: cubic-bezier(.22, 1, .36, 1);
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

html {
   scroll-behavior: smooth
}

body {
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   color: var(--navy);
   background: #fff;
   overflow-x: hidden;
   cursor: none;
}

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

button {
   font: inherit
}

::selection {
   background: var(--gold);
   color: var(--navy)
}

.container {
   width: min(1180px, calc(100% - 48px));
   margin: auto
}

/* LOADER */
.loader {
   position: fixed;
   inset: 0;
   background: #fff;
   z-index: 9999;
   display: grid;
   place-items: center;
   transition: opacity .9s var(--ease), visibility .9s;
}

.loader.done {
   opacity: 0;
   visibility: hidden
}

.loader-mark {
   text-align: center
}

.loader-line {
   width: 130px;
   height: 1px;
   background: var(--gold);
   transform: scaleX(0);
   transform-origin: left;
   animation: loadline 1.5s var(--ease) forwards;
}

.loader-logo {
   margin-top: 18px;
   letter-spacing: .25em;
   font-size: 13px;
   font-weight: 700;
   opacity: 0;
   animation: fadeup .8s .7s var(--ease) forwards;
}

@keyframes loadline {
   to {
      transform: scaleX(1)
   }
}

@keyframes fadeup {
   to {
      opacity: 1;
      transform: none
   }
}

/* CURSOR */
.cursor,
.cursor-ring {
   position: fixed;
   pointer-events: none;
   z-index: 10000;
   border-radius: 50%;
   transform: translate(-50%, -50%);
}

.cursor {
   width: 6px;
   height: 6px;
   background: var(--gold)
}

.cursor-ring {
   width: 34px;
   height: 34px;
   border: 1px solid rgba(201, 164, 91, .55);
   transition: width .25s, height .25s, border .25s, background .25s;
}

.cursor-ring.active {
   width: 60px;
   height: 60px;
   background: rgba(201, 164, 91, .08);
   border-color: var(--gold)
}

@media(max-width:800px) {
   body {
      cursor: auto
   }

   .cursor,
   .cursor-ring {
      display: none
   }
}

/* NAV */
.nav {
   position: fixed;
   top: 18px;
   left: 50%;
   transform: translateX(-50%);
   width: min(1200px, calc(100% - 36px));
   height: 70px;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 24px;
   color: #fff;
   border: 1px solid transparent;
   border-radius: 18px;
   transition: .5s var(--ease);
}

.nav.scrolled {
   background: rgba(7, 20, 38, .72);
   backdrop-filter: blur(18px);
   border-color: rgba(255, 255, 255, .09);
   box-shadow: 0 15px 50px rgba(0, 0, 0, .16);
}

.brand {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: .18em
}

.brand-mark {
   width: 30px;
   height: 30px;
   position: relative
}

.brand-mark:before,
.brand-mark:after {
   content: "";
   position: absolute;
   inset: 4px;
   border: 1px solid var(--gold);
   transform: rotate(45deg);
}

.brand-mark:after {
   inset: 9px;
   border-color: rgba(255, 255, 255, .8)
}

.nav-links {
   display: flex;
   gap: 28px;
   font-size: 12px;
   color: rgba(255, 255, 255, .72)
}

.nav-links a {
   position: relative;
   padding: 8px 0
}

.nav-links a:after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 2px;
   width: 100%;
   height: 1px;
   background: var(--gold);
   transform: scaleX(0);
   transform-origin: right;
   transition: .4s var(--ease)
}

.nav-links a:hover:after {
   transform: scaleX(1);
   transform-origin: left
}

.nav-cta,
.gold-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 13px 19px;
   border-radius: 10px;
   background: var(--gold);
   color: var(--navy);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .08em;
   text-transform: uppercase;
   border: 1px solid var(--gold);
   transition: .35s var(--ease);
}

.nav-cta:hover,
.gold-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 15px 35px rgba(201, 164, 91, .25)
}

.menu {
   display: none
}

/* HERO */
.hero {
   min-height: 100vh;
   background:
      radial-gradient(circle at 75% 42%, rgba(38, 106, 169, .28), transparent 25%),
      radial-gradient(circle at 20% 70%, rgba(201, 164, 91, .08), transparent 22%),
      var(--navy);
   color: #fff;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
}

#particles {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   opacity: .72
}

.hero-grid {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
   background-size: 80px 80px;
   mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.hero-content {
   position: relative;
   z-index: 2;
   padding-top: 70px
}

.eyebrow {
   display: flex;
   align-items: center;
   gap: 12px;
   color: var(--gold);
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: .24em;
   font-weight: 800;
   margin-bottom: 28px
}

.eyebrow i {
   display: block;
   width: 35px;
   height: 1px;
   background: var(--gold)
}

.hero h1 {
   font-size: clamp(58px, 8.5vw, 126px);
   line-height: .87;
   letter-spacing: -.065em;
   font-weight: 650;
   max-width: 950px;
}

.hero h1 span {
   display: block;
   overflow: hidden
}

.hero h1 span b {
   display: block;
   transform: translateY(110%);
   animation: wordin 1s var(--ease) forwards
}

.hero h1 span:nth-child(2) b {
   animation-delay: .08s
}

.hero h1 span:nth-child(3) b {
   animation-delay: .16s
}

.hero h1 span:nth-child(4) b {
   animation-delay: .24s
}

@keyframes wordin {
   to {
      transform: translateY(0)
   }
}

.hero-bottom {
   margin-top: 45px;
   display: flex;
   align-items: center;
   gap: 22px;
   flex-wrap: wrap
}

.hero-desc {
   max-width: 430px;
   color: rgba(255, 255, 255, .58);
   font-size: 14px;
   line-height: 1.8
}

.ghost-btn {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 13px 18px;
   border: 1px solid rgba(255, 255, 255, .22);
   border-radius: 10px;
   color: #fff;
   font-size: 11px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .08em;
   transition: .35s var(--ease)
}

.ghost-btn:hover {
   border-color: var(--gold);
   transform: translateY(-3px)
}

.hero-orb {
   position: absolute;
   width: 520px;
   height: 520px;
   right: -110px;
   top: 23%;
   border-radius: 50%;
   border: 1px solid rgba(201, 164, 91, .17);
   box-shadow: 0 0 100px rgba(34, 103, 163, .18);
   animation: orb 9s ease-in-out infinite;
}

.hero-orb:before,
.hero-orb:after {
   content: "";
   position: absolute;
   inset: 55px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .08)
}

.hero-orb:after {
   inset: 130px;
   border-color: rgba(201, 164, 91, .14)
}

@keyframes orb {
   50% {
      transform: translateY(-18px) rotate(7deg)
   }
}

/* SECTIONS */
section {
   position: relative
}

.section {
   padding: 150px 0
}

.section-head {
   max-width: 760px;
   margin-bottom: 75px
}

.kicker {
   color: var(--gold);
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: .25em;
   font-weight: 800;
   margin-bottom: 20px
}

.section-title {
   font-size: clamp(38px, 5vw, 70px);
   line-height: .98;
   letter-spacing: -.045em;
   font-weight: 650
}

.section-copy {
   margin-top: 25px;
   color: #657286;
   max-width: 600px;
   line-height: 1.8;
   font-size: 15px
}

/* STORY */
.story {
   background: linear-gradient(180deg, #071426 0%, #0a1c32 48%, #f1f5f8 100%);
   color: #fff;
   overflow: hidden
}

.story:before {
   content: "";
   position: absolute;
   left: -180px;
   top: 160px;
   width: 620px;
   height: 620px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(38, 106, 169, .18), transparent 68%);
   pointer-events: none
}

.story .section-copy {
   color: rgba(255, 255, 255, .52)
}

.story .section-title em {
   font-style: normal;
   color: var(--gold)
}

.story-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 90px;
   align-items: start;
   position: relative;
   z-index: 2
}

.story-sticky {
   position: sticky;
   top: 140px
}

.story-big {
   font-size: clamp(35px, 4.5vw, 61px);
   line-height: 1.02;
   letter-spacing: -.045em
}

.story-big em {
   font-style: normal;
   color: var(--gold)
}

.story-items {
   display: grid;
   gap: 0
}

.story-item {
   padding: 34px 0;
   border-top: 1px solid rgba(255, 255, 255, .14);
   display: grid;
   grid-template-columns: 70px 1fr;
   gap: 20px;
   position: relative
}

.story-item:last-child {
   border-bottom: 1px solid rgba(255, 255, 255, .14)
}

.story-item:before {
   content: "";
   position: absolute;
   left: 5px;
   top: 0;
   width: 1px;
   height: 100%;
   background: linear-gradient(to bottom, rgba(201, 164, 91, .65), rgba(201, 164, 91, 0));
   opacity: .6
}

.story-num {
   font-size: 11px;
   color: var(--gold);
   letter-spacing: .1em;
   position: relative;
   z-index: 1
}

.story-item h3 {
   font-size: 19px;
   margin-bottom: 9px
}

.story-item p {
   color: rgba(255, 255, 255, .5);
   line-height: 1.7;
   font-size: 13px
}

.story-transition {
   position: relative;
   z-index: 2;
   text-align: center;
   padding: 80px 0 20px
}

.story-transition .transition-line {
   width: 1px;
   height: 90px;
   background: linear-gradient(to bottom, transparent, var(--gold));
   margin: 0 auto 35px
}

.story-transition p {
   font-size: clamp(28px, 4vw, 52px);
   line-height: 1;
   letter-spacing: -.045em;
   max-width: 760px;
   margin: auto;
   font-weight: 600
}

.story-transition p span {
   color: var(--gold)
}

/* HUB */
.hub-section {
   background: var(--navy);
   color: #fff;
   overflow: hidden
}

.hub-section .section-copy {
   color: rgba(255, 255, 255, .5)
}

.hub-stage {
   height: 650px;
   position: relative;
   display: grid;
   place-items: center
}

.hub-core {
   width: 180px;
   height: 180px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   text-align: center;
   background: radial-gradient(circle at 35% 25%, #1b4c7d, #091a2e 68%);
   border: 1px solid rgba(201, 164, 91, .6);
   box-shadow: 0 0 90px rgba(31, 105, 170, .25), inset 0 0 40px rgba(201, 164, 91, .06);
   position: relative;
   z-index: 4
}

.hub-core strong {
   display: block;
   font-size: 18px;
   letter-spacing: .12em
}

.hub-core small {
   display: block;
   margin-top: 7px;
   color: var(--gold);
   font-size: 8px;
   letter-spacing: .22em
}

.orbit {
   position: absolute;
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 50%
}

.orbit.one {
   width: 400px;
   height: 400px
}

.orbit.two {
   width: 570px;
   height: 570px
}

.node {
   position: absolute;
   z-index: 5;
   padding: 13px 17px;
   border: 1px solid rgba(255, 255, 255, .13);
   background: rgba(255, 255, 255, .045);
   backdrop-filter: blur(10px);
   border-radius: 11px;
   font-size: 11px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .75);
   transition: .45s var(--ease)
}

.node:hover {
   border-color: var(--gold);
   color: #fff;
   transform: scale(1.08);
   box-shadow: 0 0 35px rgba(201, 164, 91, .14)
}

.n1 {
   top: 4%;
   left: 50%;
   transform: translateX(-50%)
}

.n2 {
   top: 18%;
   right: 11%
}

.n3 {
   top: 50%;
   right: 1%
}

.n4 {
   bottom: 12%;
   right: 16%
}

.n5 {
   bottom: 2%;
   left: 50%;
   transform: translateX(-50%)
}

.n6 {
   bottom: 12%;
   left: 16%
}

.n7 {
   top: 50%;
   left: 1%
}

.n8 {
   top: 18%;
   left: 11%
}

/* SERVICES — CAPACIDADES */
.services {
   background: radial-gradient(circle at 10% 20%, rgba(22, 77, 131, .055), transparent 24%), radial-gradient(circle at 90% 80%, rgba(201, 164, 91, .07), transparent 22%), #f4f7fa
}

.service-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
   border: 0
}

.service {
   min-height: 315px;
   padding: 30px;
   border: 1px solid rgba(7, 20, 38, .09);
   border-radius: 20px;
   position: relative;
   overflow: hidden;
   isolation: isolate;
   background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(238, 243, 247, .76));
   box-shadow: 0 12px 35px rgba(7, 20, 38, .035);
   transition: transform .65s var(--ease), box-shadow .65s var(--ease), border-color .4s
}

.service:nth-child(1) {
   grid-column: span 2;
   min-height: 360px;
   background: linear-gradient(135deg, #08192d 0%, #0d2947 100%);
   color: #fff;
   border-color: rgba(255, 255, 255, .08)
}

.service:nth-child(5) {
   grid-column: span 2
}

.service:before {
   content: "";
   position: absolute;
   width: 320px;
   height: 320px;
   border-radius: 50%;
   left: var(--mx, 50%);
   top: var(--my, 50%);
   transform: translate(-50%, -50%);
   background: radial-gradient(circle, rgba(201, 164, 91, .20), transparent 68%);
   opacity: 0;
   transition: opacity .5s;
   z-index: -1
}

.service:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(120deg, transparent 0 48%, rgba(7, 20, 38, .045) 48.2%, transparent 48.5%), linear-gradient(transparent 0 70%, rgba(7, 20, 38, .035) 70.2%, transparent 70.5%);
   opacity: .7;
   pointer-events: none
}

.service:nth-child(1):after {
   content: "01";
   position: absolute;
   right: 25px;
   bottom: -38px;
   inset: auto 25px -38px auto;
   font-size: 180px;
   line-height: 1;
   font-weight: 800;
   color: rgba(255, 255, 255, .035);
   background: none;
   opacity: 1
}

.service:hover:before {
   opacity: 1
}

.service:hover {
   transform: translateY(-8px);
   box-shadow: 0 28px 65px rgba(7, 20, 38, .13);
   border-color: rgba(201, 164, 91, .38)
}

.service-number {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 10px;
   color: var(--gold);
   letter-spacing: .18em
}

.service-number:after {
   content: "";
   width: 34px;
   height: 1px;
   background: currentColor;
   opacity: .7
}

.service h3 {
   position: relative;
   z-index: 2;
   font-size: clamp(25px, 2.3vw, 34px);
   letter-spacing: -.045em;
   margin-top: 92px
}

.service:nth-child(1) h3 {
   font-size: clamp(34px, 4vw, 58px);
   margin-top: 115px
}

.service p {
   position: relative;
   z-index: 2;
   max-width: 420px;
   font-size: 12px;
   color: #718095;
   line-height: 1.75;
   margin-top: 10px
}

.service:nth-child(1) p {
   color: rgba(255, 255, 255, .55)
}

.service:nth-child(n+2):after {
   content: attr(data-index);
   font-size: 145px;
   font-weight: 800;
   line-height: 1;
   position: absolute;
   right: -12px;
   bottom: -32px;
   color: rgba(7, 20, 38, .035);
   background: none;
   opacity: 1
}

.service h3:after {
   content: "↗";
   position: absolute;
   right: 0;
   bottom: 0;
   width: 38px;
   height: 38px;
   border: 1px solid rgba(7, 20, 38, .12);
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-size: 15px;
   font-weight: 400;
   transition: .4s var(--ease)
}

.service:hover h3:after {
   background: var(--gold);
   border-color: var(--gold);
   color: var(--navy);
   transform: rotate(45deg)
}

.service:nth-child(1) h3:after {
   border-color: rgba(255, 255, 255, .18);
   color: #fff
}

/* DIFFERENTIALS — POR QUE O HUB */
.differentials {
   background: radial-gradient(circle at 80% 15%, rgba(36, 105, 165, .18), transparent 27%), linear-gradient(135deg, #071426 0%, #0b1e35 55%, #071426 100%);
   color: #fff;
   overflow: hidden
}

.differentials:before {
   content: "";
   position: absolute;
   inset: 0;
   opacity: .35;
   pointer-events: none;
   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: 72px 72px
}

.differentials .section-copy {
   color: rgba(255, 255, 255, .5)
}

.diff-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
   position: relative;
   z-index: 2
}

.diff {
   min-height: 420px;
   padding: 32px;
   border-radius: 22px;
   border: 1px solid rgba(255, 255, 255, .11);
   background: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025)), rgba(7, 20, 38, .34);
   backdrop-filter: blur(14px);
   position: relative;
   overflow: hidden;
   transition: transform .65s var(--ease), box-shadow .65s var(--ease), border-color .4s
}

.diff:before {
   content: "";
   position: absolute;
   inset: auto -30% -45% auto;
   width: 320px;
   height: 320px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(201, 164, 91, .14), transparent 65%);
   transition: .6s var(--ease)
}

.diff:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, transparent 0 55%, rgba(255, 255, 255, .045) 55.2%, transparent 55.6%);
   pointer-events: none
}

.diff:hover {
   transform: perspective(1000px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-10px);
   box-shadow: 0 35px 90px rgba(0, 0, 0, .28);
   border-color: rgba(201, 164, 91, .38)
}

.diff:hover:before {
   transform: scale(1.25);
   opacity: 1
}

.diff-index {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 10px;
   color: var(--gold);
   letter-spacing: .18em
}

.diff-index:after {
   content: "";
   height: 1px;
   width: 34px;
   background: currentColor;
   opacity: .7
}

.diff h3 {
   position: relative;
   z-index: 2;
   font-size: clamp(29px, 3vw, 43px);
   line-height: .98;
   letter-spacing: -.055em;
   margin-top: 135px;
   max-width: 330px
}

.diff p {
   position: relative;
   z-index: 2;
   max-width: 360px;
   font-size: 13px;
   color: rgba(255, 255, 255, .48);
   line-height: 1.75;
   margin-top: 15px
}

.diff-glow {
   position: absolute;
   width: 210px;
   height: 210px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(45, 123, 190, .28), transparent 68%);
   top: -70px;
   right: -70px;
   transition: .5s var(--ease)
}

.diff:hover .diff-glow {
   transform: scale(1.25)
}

.diff:nth-child(1):after,
.diff:nth-child(2):after,
.diff:nth-child(3):after {
   font-size: 170px;
   font-weight: 800;
   line-height: 1;
   left: auto;
   right: -18px;
   bottom: -30px;
   top: auto;
   background: none;
   color: rgba(255, 255, 255, .035)
}

.diff:nth-child(1):after {
   content: "01"
}

.diff:nth-child(2):after {
   content: "02"
}

.diff:nth-child(3):after {
   content: "03"
}

/* RESPONSIVE CARD COMPOSITION */
@media(max-width:900px) {

   .service:nth-child(1),
   .service:nth-child(5) {
      grid-column: span 2
   }

   .service:nth-child(1) {
      min-height: 330px
   }

   .diff {
      min-height: 360px
   }
}

@media(max-width:560px) {
   .service-grid {
      grid-template-columns: 1fr
   }

   .service:nth-child(1),
   .service:nth-child(5) {
      grid-column: span 1
   }

   .service:nth-child(1) {
      min-height: 310px
   }

   .service h3,
   .service:nth-child(1) h3 {
      margin-top: 85px
   }

   .diff h3 {
      margin-top: 105px
   }
}

/* TIMELINE */
.timeline-section {
   background: var(--soft)
}

.timeline {
   position: relative;
   margin-top: 60px;
   padding: 20px 0
}

.timeline:before {
   content: "";
   position: absolute;
   left: 50%;
   top: 0;
   bottom: 0;
   width: 1px;
   background: var(--dark-line)
}

.step {
   width: 50%;
   padding: 30px 60px;
   position: relative
}

.step:nth-child(even) {
   margin-left: 50%
}

.step-dot {
   position: absolute;
   width: 11px;
   height: 11px;
   border: 2px solid var(--gold);
   background: var(--soft);
   border-radius: 50%;
   top: 42px
}

.step:nth-child(odd) .step-dot {
   right: -6px
}

.step:nth-child(even) .step-dot {
   left: -5px
}

.step small {
   font-size: 10px;
   color: var(--gold);
   letter-spacing: .18em;
   text-transform: uppercase
}

.step h3 {
   font-size: 28px;
   margin: 10px 0
}

.step p {
   font-size: 13px;
   color: #718095;
   line-height: 1.7
}

/* STATS */
.stats {
   background: var(--navy);
   color: #fff
}

.stat-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line)
}

.stat {
   padding: 45px 30px;
   border-right: 1px solid var(--line)
}

.stat:last-child {
   border-right: 0
}

.stat strong {
   font-size: clamp(38px, 5vw, 66px);
   font-weight: 500;
   letter-spacing: -.05em
}

.stat strong span {
   color: var(--gold)
}

.stat p {
   color: rgba(255, 255, 255, .45);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .12em;
   margin-top: 10px
}

/* CASES */
.cases {
   background: #fff
}

.case-grid {
   display: grid;
   grid-template-columns: 1.25fr .75fr;
   gap: 18px
}

.case {
   min-height: 430px;
   border-radius: var(--radius);
   overflow: hidden;
   position: relative;
   background: var(--navy);
   color: #fff;
   padding: 35px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end
}

.case:nth-child(2) {
   min-height: 430px;
   background: #e9edf1;
   color: var(--navy)
}

.case:before {
   content: "";
   position: absolute;
   inset: 0;
   background:
      radial-gradient(circle at 70% 35%, rgba(54, 132, 199, .4), transparent 30%),
      linear-gradient(135deg, transparent 35%, rgba(201, 164, 91, .12));
}

.case:nth-child(2):before {
   background: radial-gradient(circle at 70% 30%, rgba(22, 77, 131, .16), transparent 35%)
}

.case-content {
   position: relative;
   z-index: 2
}

.case-tag {
   font-size: 9px;
   color: var(--gold);
   letter-spacing: .18em;
   text-transform: uppercase
}

.case h3 {
   font-size: 34px;
   letter-spacing: -.04em;
   margin-top: 8px
}

.case p {
   font-size: 12px;
   opacity: .6;
   max-width: 420px;
   margin-top: 10px;
   line-height: 1.7
}

/* CTA */
.cta {
   min-height: 90vh;
   background: var(--navy);
   color: #fff;
   display: grid;
   place-items: center;
   text-align: center;
   overflow: hidden
}

.cta:before {
   content: "";
   position: absolute;
   width: 800px;
   height: 800px;
   border-radius: 50%;
   border: 1px solid rgba(201, 164, 91, .1);
   box-shadow: 0 0 180px rgba(33, 104, 167, .15)
}

.cta-content {
   position: relative;
   z-index: 2
}

.cta h2 {
   font-size: clamp(55px, 8vw, 112px);
   line-height: .9;
   letter-spacing: -.065em;
   max-width: 1000px
}

.cta h2 span {
   color: var(--gold)
}

.cta .gold-btn {
   margin-top: 42px
}

/* FAQ */
.faq {
   background: #fff
}

.faq-list {
   max-width: 850px;
   margin: auto;
   border-top: 1px solid var(--dark-line)
}

.faq-item {
   border-bottom: 1px solid var(--dark-line)
}

.faq-q {
   width: 100%;
   padding: 25px 0;
   background: none;
   border: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   text-align: left;
   font-size: 17px;
   font-weight: 600;
   color: var(--navy);
   cursor: none
}

.faq-q span:last-child {
   font-size: 24px;
   font-weight: 300;
   color: var(--gold);
   transition: .3s
}

.faq-a {
   max-height: 0;
   overflow: hidden;
   color: #718095;
   font-size: 13px;
   line-height: 1.8;
   transition: max-height .5s var(--ease)
}

.faq-item.open .faq-a {
   max-height: 180px;
   padding-bottom: 24px
}

.faq-item.open .faq-q span:last-child {
   transform: rotate(45deg)
}

/* FOOTER */
footer {
   background: #050f1c;
   color: #fff;
   padding: 80px 0 30px
}

.footer-top {
   display: flex;
   justify-content: space-between;
   gap: 50px;
   padding-bottom: 70px
}

.footer-brand {
   font-size: 20px;
   letter-spacing: .14em;
   font-weight: 800
}

.footer-brand small {
   display: block;
   font-size: 10px;
   letter-spacing: .22em;
   color: var(--gold);
   margin-top: 9px
}

.footer-links {
   display: flex;
   gap: 70px
}

.footer-col h4 {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: .18em;
   color: var(--gold);
   margin-bottom: 18px
}

.footer-col a,
.footer-col p {
   display: block;
   font-size: 12px;
   color: rgba(255, 255, 255, .5);
   margin: 10px 0
}

.footer-bottom {
   border-top: 1px solid var(--line);
   padding-top: 25px;
   display: flex;
   justify-content: space-between;
   color: rgba(255, 255, 255, .3);
   font-size: 10px
}

/* REVEAL */
.reveal {
   opacity: 0;
   transform: translateY(35px);
   transition: opacity .9s var(--ease), transform .9s var(--ease)
}

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

/* MOBILE */
@media(max-width:900px) {

   .nav-links,
   .nav-cta {
      display: none
   }

   .menu {
      display: block;
      color: #fff;
      background: none;
      border: 0;
      font-size: 20px
   }

   .container {
      width: min(100% - 32px, 680px)
   }

   .hero h1 {
      font-size: clamp(53px, 14vw, 90px)
   }

   .hero-orb {
      width: 350px;
      height: 350px;
      right: -170px
   }

   .section {
      padding: 100px 0
   }

   .story-grid {
      grid-template-columns: 1fr;
      gap: 60px
   }

   .story-sticky {
      position: relative;
      top: auto
   }

   .story-transition {
      padding-top: 55px
   }

   .story-transition .transition-line {
      height: 65px
   }

   .service-grid {
      grid-template-columns: 1fr 1fr
   }

   .diff-grid {
      grid-template-columns: 1fr
   }

   .stat-grid {
      grid-template-columns: 1fr 1fr
   }

   .stat {
      border-bottom: 1px solid var(--line)
   }

   .stat:nth-child(2) {
      border-right: 0
   }

   .case-grid {
      grid-template-columns: 1fr
   }

   .case,
   .case:nth-child(2) {
      min-height: 360px
   }

   .hub-stage {
      height: 560px
   }

   .orbit.one {
      width: 300px;
      height: 300px
   }

   .orbit.two {
      width: 440px;
      height: 440px
   }

   .node {
      font-size: 9px;
      padding: 9px 11px
   }

   .n2 {
      right: 3%
   }

   .n8 {
      left: 3%
   }

   .n3 {
      right: -3%
   }

   .n7 {
      left: -3%
   }

   .footer-top {
      flex-direction: column
   }

   .footer-links {
      gap: 40px;
      flex-wrap: wrap
   }
}

@media(max-width:560px) {
   .nav {
      top: 10px;
      width: calc(100% - 20px);
      height: 62px
   }

   .hero-content {
      padding-top: 40px
   }

   .hero-bottom {
      margin-top: 32px
   }

   .service-grid {
      grid-template-columns: 1fr
   }

   .service {
      min-height: 230px
   }

   .service h3 {
      margin-top: 70px
   }

   .stat-grid {
      grid-template-columns: 1fr 1fr
   }

   .stat {
      padding: 30px 18px
   }

   .timeline:before {
      left: 8px
   }

   .step,
   .step:nth-child(even) {
      width: 100%;
      margin-left: 0;
      padding: 25px 20px 25px 40px
   }

   .step-dot,
   .step:nth-child(odd) .step-dot,
   .step:nth-child(even) .step-dot {
      left: 3px;
      right: auto
   }

   .hub-stage {
      transform: scale(.78);
      width: 128%;
      margin-left: -14%
   }

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

   .footer-bottom {
      flex-direction: column;
      gap: 12px
   }
}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce) {

   *,
   *:before,
   *:after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important
   }
}