/* =========================================================
   TechGalaxy Solutions — design tokens
   Palette: deep space void, nebula violet/cyan/ember, starlight
   Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (utility)
   ========================================================= */

:root{
  --void:        #05060c;
  --void-2:      #0a0c1a;
  --panel:       #0e1023;
  --panel-line:  #23264a;
  --violet:      #7b4fe0;
  --violet-dim:  #4a3480;
  --cyan:        #29c4e8;
  --ember:       #ff6b4a;
  --star:        #f5f3ff;
  --lavender:    #a9a0c9;
  --lavender-dim:#6a6390;

  --display: "Space Grotesk", "Inter", sans-serif;
  --body:    "Inter", sans-serif;
  --mono:    "JetBrains Mono", monospace;

  --max: 1180px;
}



*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--void);
  color: var(--star);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

p{ margin: 0 0 1em; color: var(--lavender); }
.hero > .wrap {
  position: relative;
  z-index: 5;
  pointer-events: none;
}

.hero > .wrap a,
.hero > .wrap button {
  pointer-events: auto;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before{
  content:"";
  width: 18px; height: 1px;
  background: var(--cyan);
  display:inline-block;
}

/* -------------------- starfield canvas -------------------- */
#stars {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  pointer-events: none;

  z-index: 0;
}
#fluid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;

  pointer-events: auto;
  z-index: 2;

  opacity: 0.65;
  mix-blend-mode: screen;
}

/* =====================================================
   MOBILE — DISABLE WEBGL FLUID TOUCH EFFECT
   ===================================================== */

@media (max-width: 768px) {

  #fluid-canvas {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

}

#galaxy-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}


/* -------------------- header / constellation nav -------------------- */
header{
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  background: rgba(5,6,12,.6);
  border-bottom: none;
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: var(--max);
  margin: 0 auto;
}
.logo{
  display:flex;
  align-items:center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
}
.logo .mark{
  width: 30px; height: 30px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(from 200deg, var(--violet), var(--cyan), var(--ember), var(--violet));
  box-shadow: 0 0 18px rgba(123,79,224,.55);
}
.logo .mark::after{
  content:"";
  position:absolute; inset: 6px;
  border-radius:50%;
  background: var(--void);
}
.logo span.sub{
  display:block;
  font-family: var(--mono);
  font-weight:400;
  font-size: 10px;
  letter-spacing:.2em;
  color: var(--lavender-dim);
  text-transform: uppercase;
}

nav.constellation{
  display:flex;
  align-items:center;
  gap: 4px;
  position: relative;
}
nav.constellation a{
  position:relative;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing:.03em;
  color: var(--lavender);
  padding: 8px 16px;
  transition: color .25s ease;
}
nav.constellation a::before{
  content:"";
  position:absolute;
  left:50%; top:2px;
  transform: translateX(-50%);
  width:4px; height:4px;
  border-radius:50%;
  background: var(--lavender-dim);
  transition: background .25s ease, box-shadow .25s ease;
}
nav.constellation a:hover,
nav.constellation a.active{
  color: var(--star);
}
nav.constellation a:hover::before,
nav.constellation a.active::before{
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
nav.constellation a.active{ color: var(--cyan); }

.nav-toggle{ display:none; }



@media (max-width: 880px){
  nav.constellation{
    position: fixed;
    top: 66px; left:0; right:0;
    flex-direction:column;
    align-items:flex-start;
    background: var(--void-2);
    border-bottom: 1px solid var(--panel-line);
    padding: 10px 32px 20px;
    display:none;
  }
  nav.constellation.open{ display:flex; }
  nav.constellation a{ padding: 10px 0; width:100%; }
  nav.constellation a::before{ left:0; }
  .nav-toggle{
    display:block;
    background:none; border:none; color: var(--star);
    font-family: var(--mono); font-size: 20px; cursor:pointer;
  }
}

/* -------------------- hero -------------------- */
.hero {
  padding: 120px 0 90px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 820px;
}
.hero h1{
  font-size: clamp(38px, 6vw, 72px);
  max-width: 16ch;
}
.hero h1 .accent{
  background: linear-gradient(100deg, var(--cyan), var(--violet) 60%, var(--ember));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede{
  font-size: 18px;
  max-width: 46ch;
  color: var(--lavender);
  margin-bottom: 32px;
}
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }

.btn{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing:.04em;
  padding: 14px 26px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{
  background: linear-gradient(100deg, var(--violet), var(--cyan));
  color: var(--void);
  font-weight: 600;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(123,79,224,.35); }
.btn-ghost{
  border: 1px solid var(--panel-line);
  color: var(--star);
}
.btn-ghost:hover{ border-color: var(--cyan); color: var(--cyan); }

/* -------------------- split hero (image + eyebrow/heading/CTA) -------------------- */
.split-hero{
  padding: 70px 0 60px;
  border-bottom: 1px solid var(--panel-line);
}
.split-hero .wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items:center;
}
.split-hero .split-img{
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid var(--panel-line);
  aspect-ratio: 4/3;
}
.split-hero .split-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.split-hero h1{ font-size: clamp(28px, 4vw, 44px); margin-bottom:16px; }
.split-hero p{ font-size:16px; max-width:48ch; margin-bottom:26px; }
@media (max-width: 780px){
  .split-hero .wrap{ grid-template-columns:1fr; }
  .split-hero .split-img{ order:-1; }
}

/* -------------------- scrolling image strip (Who We Are cards) -------------------- */
.card-scroll{ overflow: hidden; }
.card-scroll .card-scroll-track{
  display: flex;
  gap: 22px;
  width: max-content;
  animation: card-scroll-anim 42s linear infinite;
}
.card-scroll:hover .card-scroll-track{ animation-play-state: paused; }
.card-scroll .card{ width: 300px; flex: 0 0 auto; }
@keyframes card-scroll-anim{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
/* .tech-marquee{
  padding: 34px 0;
  border-bottom: 1px solid var(--panel-line);
  overflow:hidden;
}
.tech-marquee .marquee-label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--lavender-dim);
  margin-bottom: 18px;
}
.tech-marquee .marquee-track{
  display:flex;
  gap:56px;
  width:max-content;
  animation: marquee-scroll 26s linear infinite;
}
.tech-marquee .marquee-track span{
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing:.03em;
  color: var(--lavender);
  white-space:nowrap;
}
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
} */



/* =====================================================
   TECHNOLOGY MARQUEE
===================================================== */

.tech-marquee {

    position: relative;

    padding: 55px 0 60px;

    overflow: hidden;

    border-top:
        1px solid
        rgba(255,255,255,0.07);

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

    background:

        radial-gradient(
            circle at 15% 50%,
            rgba(0,190,255,0.07),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 50%,
            rgba(120,80,255,0.07),
            transparent 28%
        ),

        rgba(255,255,255,0.015);
}


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

.tech-marquee-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 32px;
}


.marquee-label {

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(255,255,255,0.55);

    font-family:
        var(--mono, monospace);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.5px;
}


.tech-marquee-header p {

    margin: 0;

    color:
        rgba(255,255,255,0.32);

    font-size: 11px;

    letter-spacing: .4px;
}


/* glowing dot */

.label-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        #00c6ff;

    box-shadow:
        0 0 12px
        rgba(0,198,255,0.8);

    animation:
        tech-pulse 2s ease-in-out infinite;
}


@keyframes tech-pulse {

    0%,
    100% {
        opacity: .45;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }

}


/* =====================================================
   MARQUEE WINDOW
===================================================== */

.marquee-window {

    position: relative;

    width: 100%;

    overflow: hidden;
}


/* LEFT FADE */

.marquee-window::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 140px;

    z-index: 5;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            #080a12,
            transparent
        );
}


/* RIGHT FADE */

.marquee-window::after {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    right: 0;

    width: 140px;

    z-index: 5;

    pointer-events: none;

    background:
        linear-gradient(
            270deg,
            #080a12,
            transparent
        );
}


/* =====================================================
   TRACK
===================================================== */

.marquee-track {

    display: flex;

    align-items: center;

    width: max-content;

    gap: 18px;

    animation:
        tech-marquee-scroll
        32s
        linear
        infinite;

    will-change:
        transform;
}


/* pause */

.marquee-window:hover
.marquee-track {

    animation-play-state:
        paused;
}


/* =====================================================
   TECH ITEM
===================================================== */

.tech-item {

    display: flex;

    align-items: center;

    gap: 11px;

    min-width: max-content;

    padding: 13px 19px;

    border-radius: 100px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    background:
        rgba(255,255,255,0.035);

    color:
        rgba(255,255,255,0.72);

    font-family:
        var(--mono, monospace);

    font-size: 13px;

    letter-spacing: .2px;

    backdrop-filter:
        blur(12px);

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


/* hover */

.tech-item:hover {

    transform:
        translateY(-4px);

    color: #fff;

    border-color:
        rgba(0,198,255,0.38);

    background:
        rgba(0,198,255,0.08);

    box-shadow:
        0 10px 30px
        rgba(0,170,255,0.12);
}


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

.tech-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            rgba(0,198,255,0.14),
            rgba(120,80,255,0.14)
        );

    border:
        1px solid
        rgba(255,255,255,0.10);

    color:
        #00c6ff;

    font-family:
        var(--mono, monospace);

    font-size: 11px;

    font-weight: 700;

    flex-shrink: 0;
}


/* =====================================================
   SEPARATOR
===================================================== */

.tech-separator {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 20px;

    color:
        rgba(0,198,255,0.35);

    font-size: 9px;

    flex-shrink: 0;

    animation:
        separator-glow
        2.5s
        ease-in-out
        infinite;
}


@keyframes separator-glow {

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

    50% {
        opacity: 1;
    }

}


/* =====================================================
   INFINITE SCROLL
===================================================== */

@keyframes tech-marquee-scroll {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }

}


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

@media (max-width: 700px) {

    .tech-marquee {

        padding: 42px 0 48px;
    }


    .tech-marquee-header {

        display: block;

        margin-bottom: 25px;
    }


    .tech-marquee-header p {

        margin-top: 10px;

        font-size: 10px;
    }


    .tech-item {

        padding: 11px 15px;

        font-size: 11px;
    }


    .tech-icon {

        width: 25px;

        height: 25px;

        font-size: 9px;
    }


    .marquee-window::before,
    .marquee-window::after {

        width: 70px;
    }


    .marquee-track {

        gap: 13px;

        animation-duration:
            27s;
    }

}

/* -------------------- generic page header (inner pages) -------------------- */
.page-head{
  padding: 100px 0 60px;
  border-bottom: none;
}
.page-head h1{ font-size: clamp(32px, 5vw, 52px); }
.page-head p{ max-width: 60ch; font-size: 17px; }

/* -------------------- sections -------------------- */
section{ padding: 80px 0; }
section.tight{ padding: 50px 0; }
.section-head{ margin-bottom: 44px; max-width: 60ch; }
.section-head h2{ font-size: clamp(26px, 3.4vw, 38px); }

/* -------------------- stat strip -------------------- */
.stat-strip{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  overflow:hidden;
}
.stat-strip div{
  padding: 26px 22px;
  border-right: 1px solid var(--panel-line);
}
.stat-strip div:nth-child(1){ background: linear-gradient(155deg, rgba(123,79,224,.42), rgba(123,79,224,.06) 75%), var(--panel); }
.stat-strip div:nth-child(2){ background: linear-gradient(155deg, rgba(255,107,74,.40), rgba(255,107,74,.06) 75%), var(--panel); }
.stat-strip div:nth-child(3){ background: linear-gradient(155deg, rgba(41,196,232,.44), rgba(41,196,232,.06) 75%), var(--panel); }
.stat-strip div:nth-child(4){ background: linear-gradient(155deg, rgba(255,79,180,.34), rgba(255,79,180,.05) 75%), var(--panel); }
.stat-strip div:last-child{ border-right:none; }
.stat-strip strong{
  display:block;
  font-family: var(--display);
  font-size: 26px;
  color: var(--star);
  margin-bottom: 4px;
}
.stat-strip span{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--lavender-dim);
  text-transform: uppercase;
  letter-spacing:.06em;
}
@media (max-width: 720px){
  .stat-strip{ grid-template-columns: repeat(2,1fr); }
  .stat-strip div:nth-child(2){ border-right:none; }
}

/* -------------------- card grid -------------------- */
.grid{
  display:grid;
  gap: 22px;
}
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .grid-3, .grid-2{ grid-template-columns: 1fr; }
}

.card{
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  padding: 28px;
  transition: border-color .25s ease, transform .25s ease;
}
.card:hover{ border-color: var(--violet); transform: translateY(-4px); }
.card .num{
  font-family: var(--mono);
  color: var(--lavender-dim);
  font-size: 12px;
  margin-bottom: 14px;
  display:block;
}
.card h3{ font-size: 19px; margin-bottom: 10px; color: var(--star); }
.card p{ font-size: 14.5px; margin:0; }

/* full-bleed image cards: caption overlays the image, reveal panel is white */
.card.expandable{ padding: 0; }
.card.expandable .card-img{
  position: relative;
  margin: 0;
  border-radius: 16px 16px 0 0;
}
.card-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 20px 18px;
  background: linear-gradient(to top, rgba(4,5,10,.92) 10%, rgba(4,5,10,.55) 55%, transparent 100%);
}
.card-caption .num{
  color: rgba(245,243,255,.75);
  margin-bottom: 8px;
}
.card-caption h3{
  color: #fff;
  margin-bottom: 0;
  font-size: 18px;
}
.card-body{ padding: 0; }
.card.expandable .card-reveal{ margin-top: 0; }

/* cards with no image: white "perspective" style, like the text-only
   Accenture insight cards */
.card-plain{
  background: #f4f2ee;
  border-color: #f4f2ee;
}
.card-plain h3{ color: #14131f; }
.card-plain p{ color: #4a4756; }
.card-plain .btn-ghost{ border-color: #14131f; color: #14131f; }
.card-plain .btn-ghost:hover{ border-color: var(--violet); color: var(--violet); }




/* =========================================================
   WHY CHOOSE US - PREMIUM SHOWCASE
========================================================= */

.why-choose-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
}


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

.why-header {
    display: grid;
    grid-template-columns: 1.2fr .65fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 55px;
}

.why-header-left .eyebrow {
    margin-bottom: 18px;
}

.why-header-left h2 {
    margin: 0;
    max-width: 760px;

    font-size: clamp(42px, 5vw, 72px);
    line-height: .98;
    letter-spacing: -3px;
}

.why-header-left h2 span {
    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #00c6ff,
            #8b5cf6
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.why-header-right {
    padding-bottom: 5px;
}

.why-header-right p {
    margin: 0 0 28px;

    max-width: 410px;

    color: rgba(255,255,255,.52);

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   PROGRESS
========================================================= */

.why-progress {
    display: flex;
    align-items: center;
    gap: 13px;

    font-family: var(--mono, monospace);
    font-size: 10px;

    color: rgba(255,255,255,.38);
}

.why-progress-line {
    position: relative;

    width: 130px;
    height: 2px;

    overflow: hidden;

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

.why-progress-line i {
    position: absolute;
    left: 0;
    top: 0;

    width: 20%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #00c6ff,
            #8b5cf6
        );

    transition:
        width .5s ease;
}


/* =========================================================
   MAIN SHOWCASE
========================================================= */

.why-showcase {
    display: grid;

    grid-template-columns:
        34% 66%;

    min-height: 570px;

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

    border-radius: 22px;

    overflow: hidden;

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


/* =========================================================
   LEFT NAVIGATION
========================================================= */

.why-nav {
    display: flex;
    flex-direction: column;

    padding: 15px;

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

    background:
        rgba(0,0,0,.16);
}

.why-nav-item {
    position: relative;

    display: grid;

    grid-template-columns:
        38px 1fr 30px;

    align-items: center;

    gap: 10px;

    width: 100%;

    min-height: 98px;

    padding: 20px 17px;

    border: 0;

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

    background: transparent;

    color: #fff;

    text-align: left;

    cursor: pointer;

    transition:
        background .35s ease,
        padding .35s ease;
}

.why-nav-item:last-child {
    border-bottom: 0;
}


/* number */

.why-nav-item > span {
    font-family:
        var(--mono, monospace);

    font-size: 10px;

    color:
        rgba(255,255,255,.30);

    transition:
        color .3s ease;
}


/* title */

.why-nav-item strong {
    font-size: 15px;

    font-weight: 500;

    line-height: 1.25;

    color:
        rgba(255,255,255,.48);

    transition:
        color .3s ease,
        transform .35s ease;
}


/* arrow */

.why-nav-item i {
    width: 28px;
    height: 28px;

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

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

    border-radius: 50%;

    font-style: normal;

    font-size: 12px;

    color:
        rgba(255,255,255,.30);

    opacity: 0;

    transform:
        translateX(-8px)
        rotate(-45deg);

    transition:
        opacity .3s ease,
        transform .35s ease;
}


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

.why-nav-item:hover {
    background:
        rgba(255,255,255,.045);

    padding-left: 23px;
}

.why-nav-item:hover strong {
    color: #fff;

    transform:
        translateX(3px);
}

.why-nav-item:hover i {
    opacity: 1;

    transform:
        translateX(0)
        rotate(0deg);
}


/* =========================================================
   ACTIVE NAV
========================================================= */

.why-nav-item.active {
    background:
        linear-gradient(
            90deg,
            rgba(0,198,255,.09),
            rgba(139,92,246,.04)
        );
}

.why-nav-item.active::before {
    content: "";

    position: absolute;

    left: 0;
    top: 15px;
    bottom: 15px;

    width: 2px;

    background:
        linear-gradient(
            180deg,
            #00c6ff,
            #8b5cf6
        );

    border-radius: 5px;
}

.why-nav-item.active > span {
    color: #00c6ff;
}

.why-nav-item.active strong {
    color: #fff;
}

.why-nav-item.active i {
    opacity: 1;

    color: #fff;

    border-color:
        rgba(0,198,255,.35);

    transform:
        translateX(0)
        rotate(0deg);
}


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

.why-visual {
    position: relative;

    min-height: 570px;

    overflow: hidden;

    background: #05070d;
}


/* =========================================================
   PANELS
========================================================= */

.why-panel {
    position: absolute;

    inset: 0;

    visibility: hidden;

    opacity: 0;

    transform:
        scale(1.035);

    transition:
        opacity .7s ease,
        transform 1s cubic-bezier(.2,.8,.2,1),
        visibility .7s ease;
}

.why-panel.active {
    visibility: visible;

    opacity: 1;

    transform:
        scale(1);
}


/* image */

.why-panel img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transform:
        scale(1.06);

    filter:
        brightness(.65)
        saturate(.85);

    transition:
        transform 5s ease,
        filter .8s ease;
}
.why-panel img {
    filter:
        brightness(.65)
        saturate(.85);
}

.why-panel.active img {
    transform:
        scale(1);

    filter:
        brightness(.72)
        saturate(1);
}

.why-panel.active img {
    filter:
        brightness(.72)
        saturate(1);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.why-panel-overlay {
    display: none;
}

/* .why-panel-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2,4,10,.82) 0%,
            rgba(2,4,10,.38) 50%,
            rgba(2,4,10,.12) 100%
        ),

        linear-gradient(
            0deg,
            rgba(2,4,10,.85) 0%,
            transparent 65%
        );
} */


/* =========================================================
   PANEL CONTENT
========================================================= */

.why-panel-content {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 34px 42px;
}


/* top */

.why-panel-top {
    display: flex;

    justify-content: space-between;

    align-items: center;
}

.why-panel-top span {
    font-family:
        var(--mono, monospace);

    font-size: 9px;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,.55);
}


/* bottom */

.why-panel-content > div:last-child {
    max-width: 590px;
}

.why-panel-content h3 {
    margin: 0;

    font-size:
        clamp(38px, 4.2vw, 64px);

    line-height: .98;

    letter-spacing: -2px;

    color: #fff;

    transform:
        translateY(25px);

    opacity: 0;

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1) .15s,
        opacity .7s ease .15s;
}

.why-panel.active
.why-panel-content h3 {
    transform:
        translateY(0);

    opacity: 1;
}

.why-panel-content p {
    max-width: 520px;

    margin: 20px 0 0;

    font-size: 13px;

    line-height: 1.8;

    color:
        rgba(255,255,255,.58);

    transform:
        translateY(20px);

    opacity: 0;

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

.why-panel.active
.why-panel-content p {
    transform:
        translateY(0);

    opacity: 1;
}


/* =========================================================
   BIG BACKGROUND NUMBER
========================================================= */

.why-big-number {
    position: absolute;

    right: 25px;
    bottom: -35px;

    z-index: 3;

    font-family:
        var(--mono, monospace);

    font-size:
        clamp(130px, 15vw, 230px);

    line-height: 1;

    font-weight: 700;

    color:
        rgba(255,255,255,.055);

    pointer-events: none;

    transition:
        all .5s ease;
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.why-bottom {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 25px;

    margin-top: 18px;

    padding: 20px 4px;
}

.why-bottom-line {
    display: none;
}

.why-bottom span {
    font-family:
        var(--mono, monospace);

    font-size: 9px;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,.30);
}

.why-bottom strong {
    font-size: 14px;

    font-weight: 500;

    color:
        rgba(255,255,255,.70);
}


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

@media (max-width: 950px) {

    .why-header {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .why-showcase {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .why-nav {
        display: grid;

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

        border-right: 0;

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

    .why-nav-item {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        min-height: 115px;

        padding: 15px;
    }

    .why-nav-item strong {
        font-size: 12px;
    }

    .why-nav-item i {
        display: none;
    }

    .why-nav-item.active::before {
        top: auto;
        bottom: 0;

        left: 15px;
        right: 15px;

        width: auto;

        height: 2px;
    }

    .why-visual {
        min-height: 520px;
    }

}


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

@media (max-width: 650px) {

    .why-choose-section {
        padding: 75px 0;
    }

    .why-header-left h2 {
        font-size: 43px;

        letter-spacing: -2px;
    }

    .why-header-right p {
        font-size: 13px;
    }

    .why-showcase {
        border-radius: 16px;
    }

    .why-nav {
        display: flex;

        flex-direction: row;

        overflow-x: auto;

        scrollbar-width: none;

        padding: 8px;
    }

    .why-nav::-webkit-scrollbar {
        display: none;
    }

    .why-nav-item {
        flex:
            0 0 155px;

        min-height: 82px;

        padding: 12px;

        border-bottom: 0;

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

    .why-nav-item strong {
        font-size: 11px;

        line-height: 1.2;
    }

    .why-nav-item.active::before {
        left: 10px;
        right: 10px;

        bottom: 0;
    }

    .why-visual {
        min-height: 470px;
    }

    .why-panel-content {
        padding: 25px;
    }

    .why-panel-content h3 {
        font-size: 39px;

        letter-spacing: -1.5px;
    }

    .why-panel-content p {
        font-size: 12px;
    }

    .why-panel-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2,4,10,.78),
                rgba(2,4,10,.25)
            ),

            linear-gradient(
                0deg,
                rgba(2,4,10,.92),
                transparent 70%
            );
    }

    .why-big-number {
        font-size: 130px;

        right: 5px;
    }

    .why-bottom {
        grid-template-columns: 1fr;

        gap: 8px;
    }

}


/* =========================================================
   TECHGALAXY JOURNEY
   NO BOX / NO CARD DESIGN
========================================================= */

.why-journey {
    position: relative;

    padding: 115px 0 95px;

    overflow: hidden;
}


/* =========================================================
   TOP LINE
========================================================= */

.why-journey-top {
    display: flex;

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

    padding-bottom: 22px;

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

.why-journey-label,
.why-journey-location {
    font-family:
        var(--mono, monospace);

    font-size: 9px;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,.35);
}

.why-journey-location {
    color:
        rgba(255,255,255,.22);
}


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

.why-journey-main {
    display: grid;

    grid-template-columns:
        .8fr 1.5fr;

    gap: 100px;

    padding: 80px 0;
}


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

.why-journey-heading {
    position: relative;
}

.why-journey-heading > span {
    display: block;

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

    line-height: .9;

    letter-spacing: -4px;

    color:
        rgba(255,255,255,.28);
}

.why-journey-heading strong {
    display: block;

    font-size:
        clamp(55px, 7vw, 100px);

    line-height: .9;

    letter-spacing: -6px;

    background:
        linear-gradient(
            90deg,
            #00c6ff,
            #8b5cf6
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.why-journey-heading p {
    max-width: 360px;

    margin-top: 32px;

    font-size: 13px;

    line-height: 1.9;

    color:
        rgba(255,255,255,.43);
}


/* =========================================================
   STEPS
========================================================= */

.why-journey-steps {
    display: grid;

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

    align-self: center;
}


/* =========================================================
   STEP
========================================================= */

.journey-step {
    position: relative;

    min-height: 280px;

    padding:
        0 30px;

    border-left:
        1px solid
        rgba(255,255,255,.10);

    transition:
        transform .4s ease;
}

.journey-step:first-child {
    border-left: 0;

    padding-left: 0;
}

.journey-step:hover {
    transform:
        translateY(-8px);
}


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

.journey-step-top {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 55px;
}

.journey-step-top span {
    font-family:
        var(--mono, monospace);

    font-size: 10px;

    color:
        #00c6ff;
}

.journey-step-top i {
    display: block;

    width: 35px;
    height: 1px;

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

    transition:
        width .4s ease,
        background .4s ease;
}

.journey-step:hover
.journey-step-top i {
    width: 65px;

    background:
        linear-gradient(
            90deg,
            #00c6ff,
            #8b5cf6
        );
}


/* =========================================================
   STEP TITLE
========================================================= */

.journey-step h3 {
    margin: 0;

    font-size:
        clamp(34px, 4vw, 52px);

    line-height: 1;

    letter-spacing: -2px;

    color: #fff;

    transition:
        color .35s ease;
}

.journey-step:hover h3 {
    background:
        linear-gradient(
            90deg,
            #fff,
            #8b5cf6
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.journey-step p {
    max-width: 190px;

    margin: 18px 0 0;

    font-size: 12px;

    line-height: 1.75;

    color:
        rgba(255,255,255,.38);
}


/* =========================================================
   KEYWORD
========================================================= */

.journey-keyword {
    position: absolute;

    bottom: 0;
    left: 30px;

    font-family:
        var(--mono, monospace);

    font-size: 8px;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,.22);
}

.journey-step:first-child
.journey-keyword {
    left: 0;
}


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

.why-journey-bottom {
    display: flex;

    align-items: center;

    gap: 22px;

    padding-top: 24px;

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

.why-journey-bottom span,
.why-journey-bottom strong {
    white-space: nowrap;

    font-family:
        var(--mono, monospace);

    font-size: 8px;

    letter-spacing: 1.5px;
}

.why-journey-bottom span {
    color:
        rgba(255,255,255,.22);
}

.why-journey-bottom strong {
    color:
        rgba(255,255,255,.40);
}

.journey-line {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(0,198,255,.25),
            rgba(139,92,246,.05)
        );
}


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

@media (max-width: 900px) {

    .why-journey-main {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .why-journey-heading p {
        max-width: 500px;
    }

}


@media (max-width: 650px) {

    .why-journey {
        padding: 75px 0;
    }

    .why-journey-top {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }

    .why-journey-main {
        padding: 60px 0;

        gap: 60px;
    }

    .why-journey-heading > span {
        font-size: 45px;

        letter-spacing: -2px;
    }

    .why-journey-heading strong {
        font-size: 65px;

        letter-spacing: -4px;
    }

    .why-journey-steps {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .journey-step,
    .journey-step:first-child {
        min-height: 180px;

        padding:
            0 0 35px;

        border-left: 0;

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

    .journey-step:last-child {
        border-bottom: 0;
    }

    .journey-step-top {
        margin-bottom: 25px;
    }

    .journey-keyword,
    .journey-step:first-child
    .journey-keyword {
        left: 0;

        bottom: 0;
    }

    .why-journey-bottom {
        gap: 12px;
    }

    .why-journey-bottom span {
        display: none;
    }

}



/* -------------------- track / program cards -------------------- */
.track{
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  padding: 30px;
  background: linear-gradient(160deg, rgba(123,79,224,.10), transparent 60%), var(--panel);
}
.track h3{ font-size: 22px; color: var(--star); margin-bottom: 6px; }
.track .tag{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid var(--violet-dim);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 16px;
}
.track ul{ margin-top: 14px; }
.track li{
  font-size: 14px;
  color: var(--lavender);
  padding-left: 18px;
  position: relative;
  margin-bottom: 8px;
}
.track li::before{
  content:"";
  position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%;
  background: var(--ember);
}

/* plain track cards — Home page: solid white panel */
.track.track-white{ background: #ffffff; border-color: #ffffff; }
.track.track-white h3{ color:#14131f; }
.track.track-white .tag{ color:#5c3fa8; border-color: rgba(123,79,224,.4); }
.track.track-white p{ color:#4a4756; }
.track.track-white li{ color:#4a4756; }
.track.track-white li::before{ background: var(--violet); }

/* plain track cards — What We Do page: solid pink panel */
.track.track-pink{ background: #ffc2d6; border-color: #ffc2d6; }
.track.track-pink h3{ color:#5c2740; }
.track.track-pink .tag{ color:#5c2740; border-color: rgba(92,39,64,.4); }
.track.track-pink p{ color:#5c2740; }
.track.track-pink li{ color:#5c2740; }
.track.track-pink li::before{ background:#5c2740; }

/* expandable track cards — Careers page: solid white panel below the image */
.track.expandable{ background: #ffffff; border-color: #ffffff; }
.track.expandable .track-blurb{ color:#14131f; }

/* -------------------- quote / testimonial -------------------- */
.quote{
  border-left: 2px solid var(--violet);
  padding-left: 24px;
  font-family: var(--display);
  font-size: 20px;
  color: var(--star);
  font-weight: 500;
}
.quote-by{
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--lavender-dim);
}

/* -------------------- timeline (what we think) -------------------- */
.belief{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--panel-line);
}
.belief:last-child{ border-bottom: 1px solid var(--panel-line); }
.belief .idx{
  font-family: var(--mono);
  color: var(--lavender-dim);
  font-size: 13px;
  padding-top: 4px;
}
.belief h3{ font-size: 19px; color: var(--star); }
@media (max-width: 640px){
  .belief{ grid-template-columns: 1fr; gap: 8px; }
}

/* -------------------- form -------------------- */
.form-panel{
  background: #ffffff;
  border: 1px solid #e3e0d8;
  border-radius: 18px;
  padding: 32px;
}
.form-panel label{ color:#5b5768; }
.form-panel input,
.form-panel select{
  background: #f4f2ee;
  border: 1px solid #ddd8ce;
  color: #14131f;
}
.form-panel input::placeholder{ color:#9b96a6; }
.form-panel input:focus,
.form-panel select:focus{ border-color: var(--violet); }
label{
  display:block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing:.06em;
  text-transform: uppercase;
  color: var(--lavender-dim);
  margin-bottom: 8px;
}
input, select, textarea{
  width:100%;
  background: var(--void-2);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--star);
  font-family: var(--body);
  font-size: 14px;
  margin-bottom: 20px;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--cyan);
}
button.btn{ border:none; cursor:pointer; }

/* -------------------- footer -------------------- */
footer{
  background: #add8e6;
  border-top: 1px solid rgba(0,0,0,.15);
  padding: 56px 0 34px;
  margin-top: 60px;
}
footer p{ color:#20303a; }
.foot-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
footer h4{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: #1b3a4b;
  margin-bottom: 16px;
}
footer li{ margin-bottom: 10px; font-size: 14px; color: #20303a; }
footer li a:hover{ color: #0059f5; }
.foot-bottom{
  border-top: 1px solid rgba(0,0,0,.15);
  padding-top: 22px;
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: #3a4b55;
}
.foot-bottom a{ color: inherit; text-decoration: none; }
.foot-bottom a:hover{ color: #0059f5; }
@media (max-width: 720px){
  .foot-grid{ grid-template-columns: 1fr; }
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* -------------------- hover-reveal image cards -------------------- */
.card.expandable{
  position: relative;
  cursor: default;
  overflow: hidden;
}
.card-img{
  width: 100%;
  aspect-ratio: 10 / 7;
  border-radius: 12px;
  overflow: hidden;
  background: var(--void-2);
  max-height: 500px;
  opacity: 1;
  margin-bottom: 18px;
  transition: max-height .45s ease, opacity .35s ease, margin .45s ease;
}
.card-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* =========================================================
   GLASSY NAVY CARD REVEAL
   ========================================================= */

.what-we-do-page .card.expandable .card-reveal {
    position: absolute;

    inset: 0;

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

    padding: 45px 34px;

    max-height: none !important;

    overflow: hidden;

    /* Glassy navy background */
    background:
        linear-gradient(
            135deg,
            rgba(18, 27, 65, 0.92),
            rgba(7, 14, 38, 0.88)
        );

    /* Glass effect */
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    /* Premium border */
    border: 1px solid rgba(120, 145, 255, 0.28);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 20px 60px rgba(0,0,0,0.35);
}


/* =========================================================
   SMALL CATEGORY LABEL
   ========================================================= */

.what-we-do-page .card.expandable .card-reveal::before {
    content: attr(data-tag);

    font-family: var(--mono);

    font-size: 11px;

    font-weight: 500;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: #55dfff;

    margin-bottom: 24px;
}


/* =========================================================
   WHITE CONTENT
   ========================================================= */

.what-we-do-page .card.expandable .card-reveal p {
    margin: 0 0 30px;

    max-width: 32ch;

    color: #ffffff;

    font-family: var(--display);

    font-size: 19px;

    line-height: 1.6;

    text-shadow:
        0 2px 15px rgba(0,0,0,.25);
}


/* =========================================================
   EXPAND TEXT
   ========================================================= */

.what-we-do-page .card.expandable .card-reveal .more {
    color: #ffffff;

    font-family: var(--mono);

    font-size: 12px;

    font-weight: 500;

    letter-spacing: .12em;

    text-transform: uppercase;

    opacity: .9;
}

/* -------------------- detail modal (opens from "Expand") -------------------- */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(5,6,12,.78);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}
.modal-overlay.open{ display: flex; }
.modal-panel{
  background: #f4f2ee;
  border: 1px solid #f4f2ee;
  border-radius: 20px;
  max-width: 620px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  position: relative;
  animation: modalIn .28s ease;
}
@keyframes modalIn{
  from{ opacity: 0; transform: translateY(16px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.modal-panel .modal-img{ width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.modal-panel .modal-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-body{ padding: 30px 32px 34px; }

/* side-by-side variant: big image left, sentence beside it on the right */
.modal-panel.split{
  max-width: 1040px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: stretch;
}
.modal-panel.split .modal-img{
  width: 100%;
  height: 100%;
  min-height: 380px;
  aspect-ratio: auto;
  background: #0b0c16;
}
.modal-panel.split .modal-img img{ object-fit: cover; }
.modal-panel.split .modal-body{ display:flex; flex-direction:column; justify-content:center; padding: 34px 38px; }
.modal-panel.split .modal-body h3{ font-size: 26px; }
.modal-panel.split .modal-body p{ font-size: 16px; line-height: 1.6; }
@media (max-width: 760px){
  .modal-panel.split{ grid-template-columns: 1fr; }
  .modal-panel.split .modal-img{ aspect-ratio: 16/9; min-height: 0; }
}
.modal-body .tag{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--violet);
  border: 1px solid rgba(123,79,224,.4);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 14px;
}
.modal-body h3{ font-size: 24px; color: #14131f; margin-bottom: 12px; }
.modal-body p{ font-size: 15px; color: #4a4756; }
.modal-close{
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(20,19,31,.08);
  border: 1px solid rgba(20,19,31,.15);
  color: #14131f;
  font-family: var(--mono);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.modal-close:hover{ border-color: var(--violet); color: var(--violet); }

/* -------------------- hover-reveal for track cards (careers page) -------------------- */
.track.expandable{ position: relative; overflow: hidden; cursor: default; padding: 0; }
.track.expandable .card-img{ position: relative; margin: 0; border-radius: 18px 18px 0 0; }
.track.expandable .card-caption .tag{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255,255,255,.5);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 12px;
}
/* =========================================================
   CAREERS CARD - IMAGE ONLY + TEXT POPUP
   ========================================================= */

/* Remove white card background */
.careers-page .track.expandable {
    background: transparent !important;
    border-color: rgba(255,255,255,0.8) !important;
    padding: 0 !important;
    overflow: hidden;
}

/* Make image fill the complete card */
.careers-page .track.expandable .card-img {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 480px;
    margin: 0 !important;
    border-radius: 18px !important;
    overflow: hidden;
}

/* Image */
.careers-page .track.expandable .card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Remove the white area below image */
.careers-page .track.expandable .track-body {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
    pointer-events: none;
}

/* Hide normal description below image */
.careers-page .track.expandable .track-blurb {
    display: none !important;
}

/* Popup sentences - NO background */
.careers-page .track.expandable .card-reveal {
    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    flex-direction: column;
    justify-content: center;

    padding: 45px !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;

    pointer-events: none;
}

/* Popup text */
.careers-page .track.expandable .card-reveal p,
.careers-page .track.expandable .card-reveal li {
    color: #ffffff !important;
}

/* Popup list */
.careers-page .track.expandable .card-reveal ul {
    margin-top: 15px;
}

/* Show sentences when touching / hovering image */
.careers-page .track.expandable:hover .card-reveal,
.careers-page .track.expandable:focus-within .card-reveal {
    opacity: 1 !important;
    transform: translateY(0);
    pointer-events: auto;
}/* =========================================
   CAREER ECOSYSTEM DESIGN
   ========================================= */

.career-ecosystem {
    position: relative;
    min-height: 700px;
    margin: 0;
    padding: 70px 0 90px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(111, 72, 180, 0.22), transparent 30%),
        radial-gradient(circle at 10% 30%, rgba(80, 60, 180, 0.18), transparent 35%),
        radial-gradient(circle at 90% 40%, rgba(0, 180, 220, 0.16), transparent 35%),
        #050812;
}

/* Orbit circles */

.career-ecosystem .ecosystem-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.career-ecosystem .orbit-outer {
    width: 620px;
    height: 620px;
    border: 1px dashed rgba(70, 190, 230, 0.18);
}

.career-ecosystem .orbit-inner {
    width: 440px;
    height: 440px;
    border: 1px solid rgba(125, 95, 255, 0.35);
    box-shadow:
        0 0 35px rgba(120, 80, 255, 0.12),
        inset 0 0 35px rgba(120, 80, 255, 0.08);
}

/* Center */

.career-ecosystem .ecosystem-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 220px;
    height: 220px;
    transform: translate(-50%, -50%);
    border-radius: 50%;

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

    text-align: center;

    background:
        radial-gradient(circle at 50% 35%,
        rgba(130, 90, 220, 0.45),
        rgba(12, 18, 55, 0.96) 65%);

    border: 1px solid rgba(150, 120, 255, 0.55);

    box-shadow:
        0 0 35px rgba(120, 80, 255, 0.35),
        0 0 80px rgba(90, 50, 160, 0.18);

    z-index: 5;
}

.career-ecosystem .ecosystem-center span {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 5px;
    color: #56d8ee;
    margin-bottom: 8px;
}

.career-ecosystem .ecosystem-center strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 30px;
    line-height: 1;
    color: #ffffff;
}

.career-ecosystem .ecosystem-center small {
    margin-top: 12px;
    font-family: "JetBrains Mono", monospace;
    font-size: 8px;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.45);
}

/* Cards */

.career-ecosystem .ecosystem-card {
    position: absolute;
    width: 325px;
    min-height: 165px;

    padding: 25px 28px 25px 95px;

    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.025)
        );

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 15px 35px rgba(0,0,0,0.25);

    z-index: 10;
}

/* Left vertical glow */

.career-ecosystem .ecosystem-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22px;
    bottom: 22px;
    width: 3px;
    border-radius: 5px;
    background: #9d6cff;
    box-shadow: 0 0 12px rgba(157,108,255,0.7);
}

/* Card numbers */

.career-ecosystem .ecosystem-number {
    position: absolute;
    right: 22px;
    top: -10px;

    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: #8c73ff;
}

/* Icons */

.career-ecosystem .ecosystem-icon {
    position: absolute;
    left: 25px;
    top: 25px;

    width: 50px;
    height: 50px;

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

    border: 1px solid rgba(150,110,255,0.5);
    border-radius: 14px;

    color: #b18cff;
    font-size: 22px;

    background: rgba(80,60,160,0.12);
}

/* Card text */

.career-ecosystem .ecosystem-label {
    display: block;

    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 4px;

    color: #a878ff;
    margin-bottom: 8px;
}

.career-ecosystem .ecosystem-card h3 {
    margin: 0 0 6px;

    font-family: "Space Grotesk", sans-serif;
    font-size: 25px;
    line-height: 1.1;

    color: #f4f4ff;
}

.career-ecosystem .ecosystem-card p {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.55;

    color: rgba(235,235,245,0.62);
}

/* Card positions */

.career-ecosystem .ecosystem-card-1 {
    left: calc(50% - 560px);
    top: 70px;
}

.career-ecosystem .ecosystem-card-2 {
    right: calc(50% - 560px);
    top: 70px;
}

.career-ecosystem .ecosystem-card-3 {
    left: calc(50% - 560px);
    bottom: 100px;
}

.career-ecosystem .ecosystem-card-4 {
    right: calc(50% - 560px);
    bottom: 100px;
}

/* Different accent colors */

.career-ecosystem .ecosystem-card-2::before {
    background: #21d8ed;
    box-shadow: 0 0 12px rgba(33,216,237,0.7);
}

.career-ecosystem .ecosystem-card-2 .ecosystem-label {
    color: #22d8ed;
}

.career-ecosystem .ecosystem-card-2 .ecosystem-icon {
    border-color: rgba(33,216,237,0.5);
    color: #22d8ed;
}

.career-ecosystem .ecosystem-card-3::before {
    background: #4d9cff;
    box-shadow: 0 0 12px rgba(77,156,255,0.7);
}

.career-ecosystem .ecosystem-card-3 .ecosystem-label {
    color: #559cff;
}

.career-ecosystem .ecosystem-card-3 .ecosystem-icon {
    border-color: rgba(77,156,255,0.5);
    color: #559cff;
}

.career-ecosystem .ecosystem-card-4::before {
    background: #b46cff;
    box-shadow: 0 0 12px rgba(180,108,255,0.7);
}

.career-ecosystem .ecosystem-card-4 .ecosystem-label {
    color: #b46cff;
}

/* Bottom flow */

.career-ecosystem .ecosystem-flow {
    position: absolute;
    left: 50%;
    bottom: 25px;
    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 18px;

    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 4px;

    color: #a878ff;
}

.career-ecosystem .ecosystem-flow b {
    color: rgba(255,255,255,0.4);
    font-weight: 400;
}

/* Responsive */

@media (max-width: 1000px) {

    .career-ecosystem {
        min-height: auto;
        padding: 50px 25px;
    }

    .career-ecosystem .ecosystem-orbit {
        display: none;
    }

    .career-ecosystem .ecosystem-center {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: 0 auto 40px;
    }

    .career-ecosystem .ecosystem-card {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: min(100%, 500px);
        margin: 20px auto;
    }

    .career-ecosystem .ecosystem-flow {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 35px;
    }
}
.track.expandable .card-reveal {
    position: absolute;
    inset: 0;
    z-index: 20;

    display: flex !important;
    flex-direction: column;
    justify-content: center;

    padding: 40px;

    background: #15132b !important;
    border: none !important;
    border-radius: 18px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);

    transition: opacity .45s ease,
                transform .45s ease,
                visibility .45s ease;

    color: #fff !important;
}

.track.expandable:hover .card-reveal {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.track.expandable:hover .card-img {
    opacity: 0;
    visibility: hidden;
}

.track.expandable:hover .card-caption {
    opacity: 0;
    visibility: hidden;
}

.track.expandable .card-reveal p,
.track.expandable .card-reveal li {
    color: #fff !important;
}
/* track cards (careers.html) always keep their image + blurb visible —
   no hover-collapse. Collapsing the image on hover left an empty pink
   panel showing before the reveal content caught up, so that swap has
   been removed; the image and description just stay put. */

.track.expandable .card-reveal li{ color: #4a4756; }
.track.expandable .card-reveal li::before{ background: var(--violet); }

/* -------------------- Poppins logo lockup -------------------- */
.logo-icon{
  width: 46px; height: 46px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.logo-text{ display: flex; flex-direction: column; }
.logo-t, .logo-g, .logo-sol{
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.01em;
}
.logo-t{ font-weight: 600; color: #0009e5; }
.logo-g{ font-weight: 600; color: #0059f5; }
.logo-sol{ font-weight: 500; margin-left: 4px; color: #ffffff; }
.logo-row{ display: flex; align-items: baseline; }

/* -------------------- ambient smoke background -------------------- */
.smoke-layer{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.smoke-layer .puff{
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .32;
  mix-blend-mode: screen;
  will-change: transform;
}
.smoke-layer .p1{
  width: 520px; height: 520px;
  left: -8%; top: -10%;
  background: radial-gradient(circle, var(--violet), transparent 70%);
  animation: drift1 46s ease-in-out infinite;
}
.smoke-layer .p2{
  width: 460px; height: 460px;
  right: -6%; top: 8%;
  background: radial-gradient(circle, var(--cyan), transparent 70%);
  animation: drift2 54s ease-in-out infinite;
}
.smoke-layer .p3{
  width: 600px; height: 600px;
  left: 30%; bottom: -18%;
  background: radial-gradient(circle, var(--ember), transparent 72%);
  opacity: .22;
  animation: drift3 60s ease-in-out infinite;
}
.smoke-layer .p4{
  width: 380px; height: 380px;
  right: 12%; bottom: 4%;
  background: radial-gradient(circle, var(--violet), transparent 70%);
  opacity: .2;
  animation: drift1 50s ease-in-out infinite reverse;
}
@keyframes drift1{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(70px,50px) scale(1.15); }
}
@keyframes drift2{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-60px,60px) scale(1.1); }
}
@keyframes drift3{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(40px,-50px) scale(1.2); }
}
@media (prefers-reduced-motion: reduce){
  .smoke-layer .puff{ animation: none; }
}
/* =========================================================
   WHAT WE THINK — NEURAL NETWORK HERO
   ========================================================= */

.think-space-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    min-height: 720px;

    display: flex;
    align-items: center;

    border-bottom: none;

    background: #02040a;
}


/* ---------------------------------------------------------
   HERO IMAGE
   --------------------------------------------------------- */

.think-space-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        linear-gradient(
            90deg,
            rgba(2, 4, 10, 0.92) 0%,
            rgba(2, 4, 10, 0.72) 25%,
            rgba(2, 4, 10, 0.30) 55%,
            rgba(2, 4, 10, 0.18) 100%
        ),
        url("./img/optimized/what-we-think-hero.webp");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    transform: scale(1.02);

    transition: transform 1s ease;
}


/* ---------------------------------------------------------
   VERY SUBTLE ZOOM
   --------------------------------------------------------- */

.think-space-hero:hover::before {
    transform: scale(1.045);
}


/* ---------------------------------------------------------
   DARK BOTTOM FADE
   --------------------------------------------------------- */

.think-space-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 35%;

    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(2, 4, 10, 0.95),
            rgba(2, 4, 10, 0)
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.think-space-hero .wrap {

    position: relative;

    z-index: 5;

    width: 100%;

    padding-top: 80px;

    padding-bottom: 80px;
}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

.think-space-hero h1 {

    max-width: 760px;

    font-size: clamp(
        38px,
        5.5vw,
        70px
    );

    line-height: 1.04;

    letter-spacing: -0.035em;

    color: #ffffff;

    text-shadow:
        0 4px 25px rgba(0,0,0,.45);
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.think-space-hero p {

    max-width: 600px;

    font-size: 17px;

    line-height: 1.7;

    color: rgba(245,243,255,.82);

    text-shadow:
        0 2px 15px rgba(0,0,0,.45);
}


/* ---------------------------------------------------------
   EYEBROW
   --------------------------------------------------------- */

.think-space-hero .eyebrow {

    color: #55dfff;

    text-shadow:
        0 0 15px rgba(41,196,232,.35);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .think-space-hero {

        min-height: 650px;

        align-items: flex-end;
    }

    .think-space-hero::before {

        background-position:
            center center;
    }

    .think-space-hero .wrap {

        padding-top: 120px;

        padding-bottom: 60px;
    }

    .think-space-hero h1 {

        font-size: 38px;
    }

    .think-space-hero p {

        font-size: 15px;
    }
}
/* =========================================================
   WHAT WE DO — EARTH HERO
   ========================================================= */

.what-we-do-page #stars,
.what-we-do-page .smoke-layer,
.what-we-do-page #galaxy-canvas,
.what-we-do-page #fluid-canvas {
    display: none !important;
}

/* =========================================================
   WHAT WE DO — EARTH HERO
   SCROLL FADE EFFECT
   ========================================================= */

.what-we-do-page .what-we-do-hero {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    isolation: isolate;

    background: #05060c;
}


/* ---------------------------------------------------------
   Earth image layer
   --------------------------------------------------------- */

.what-we-do-page .what-we-do-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        linear-gradient(
            90deg,
            rgba(2, 5, 12, 0.88) 0%,
            rgba(2, 5, 12, 0.60) 40%,
            rgba(2, 5, 12, 0.20) 75%,
            rgba(2, 5, 12, 0.35) 100%
        ),
        url("./img/optimized/what-we-do-earth.webp");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    transform: scale(var(--earth-scale, 1));

opacity: var(--earth-opacity, 1);

    will-change: transform, opacity;

    transition:
        opacity 0.08s linear,
        transform 0.08s linear;
}


/* ---------------------------------------------------------
   Keep heading above Earth image
   --------------------------------------------------------- */

.what-we-do-page .what-we-do-hero .wrap {

    position: relative;

    z-index: 5;
}

/* =========================================================
   WHAT WE DO — COMPACT PROJECT CARDS
   ========================================================= */

.what-we-do-page .grid-3 {
    gap: 20px;
}

.what-we-do-page .card.expandable {
    border-radius: 12px;
}

/* =========================================================
   WHAT WE DO — LARGER PROJECT CARDS
   ========================================================= */

.what-we-do-page .grid-3 {
    gap: 26px;
}

.what-we-do-page .card.expandable {
    border-radius: 16px;
}

.what-we-do-page .card-img {
    aspect-ratio: 10 / 7;
    max-height: 500px;
    min-height: 390px;
    margin-bottom: 0;
}

.what-we-do-page .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.what-we-do-page .card-caption {
    padding: 42px 20px 18px;
}

.what-we-do-page .card-caption h3 {
    font-size: 19px;
}
.what-we-do-page .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.what-we-do-page .card-caption {
    padding: 35px 18px 16px;
}

.what-we-do-page .card-caption h3 {
    font-size: 17px;
}

/* =========================================================
   WHAT WE DO — HOVER TRANSITION
   IMAGE → CONTENT PANEL
   ========================================================= */

.what-we-do-page .card.expandable {
    position: relative;
    min-height: 450px;
    overflow: hidden;
    cursor: pointer;

    border-radius: 16px;

    transition:
        transform 0.45s cubic-bezier(.2,.7,.2,1),
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}


/* =========================================================
   IMAGE
   ========================================================= */

.what-we-do-page .card.expandable .card-img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    max-height: none !important;
    min-height: 0 !important;

    margin: 0;

    z-index: 2;

    transition:
        opacity 0.65s cubic-bezier(.2,.7,.2,1),
        transform 0.65s cubic-bezier(.2,.7,.2,1);
}


.what-we-do-page .card.expandable .card-img img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s cubic-bezier(.2,.7,.2,1),
        filter 0.7s ease;
}


/* =========================================================
   NORMAL IMAGE CAPTION
   ========================================================= */

.what-we-do-page .card.expandable .card-caption {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 4;

    padding: 80px 24px 24px;

    background:
        linear-gradient(
            to top,
            rgba(4,5,10,.95),
            rgba(4,5,10,.55) 55%,
            transparent
        );

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


/* =========================================================
   CONTENT PANEL
   ========================================================= */

.what-we-do-page .card.expandable .card-body {
    position: absolute;

    inset: 0;

    z-index: 5;

    padding: 0;

    background: #f4f2ee;

    opacity: 0;

    transform: translateY(35px);

    pointer-events: none;

    transition:
        opacity 0.55s cubic-bezier(.2,.7,.2,1),
        transform 0.55s cubic-bezier(.2,.7,.2,1);
}


/* Actual reveal content */

.what-we-do-page .card.expandable .card-reveal {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 45px 34px;

    max-height: none !important;

    overflow: hidden;

    background: #f4f2ee;
}


/* Category */

.what-we-do-page .card.expandable .card-reveal::before {
    content: attr(data-tag);

    font-family: var(--mono);

    font-size: 12px;

    font-weight: 500;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: #7047d9;

    margin-bottom: 24px;
}


/* Description */

.what-we-do-page .card.expandable .card-reveal p {
    margin: 0 0 30px;

    max-width: 32ch;

    color: #171624;

    font-family: var(--display);

    font-size: 19px;

    line-height: 1.6;
}


/* Expand */

.what-we-do-page .card.expandable .card-reveal .more {
    color: #7047d9;

    font-family: var(--mono);

    font-size: 12px;

    letter-spacing: .1em;

    text-transform: uppercase;
}


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

.what-we-do-page .card.expandable:hover {

    transform: translateY(-6px);

    border-color: rgba(85, 223, 255, 0.65);

    box-shadow:
        0 25px 60px rgba(112,71,217,.22);
}


/* Image moves away */

.what-we-do-page .card.expandable:hover .card-img {

    opacity: 0;

    transform: scale(1.08);

    pointer-events: none;
}


/* Image slightly zooms before disappearing */

.what-we-do-page .card.expandable:hover .card-img img {

    transform: scale(1.08);

    filter: brightness(.75);
}


/* Hide normal caption */

.what-we-do-page .card.expandable:hover .card-caption {

    opacity: 0;

    transform: translateY(20px);
}


/* Reveal cream panel */

.what-we-do-page .card.expandable:hover .card-body {

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;
}

/* =========================================================
   FINAL WHAT WE DO CARD GLASS OVERRIDE
   ========================================================= */

.what-we-do-page .card.expandable .card-body {
    background: transparent !important;
}


/* Glassy navy reveal panel */
.what-we-do-page .card.expandable .card-reveal {
    background:
        linear-gradient(
            135deg,
            rgba(22, 32, 78, 0.94),
            rgba(5, 12, 32, 0.96)
        ) !important;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(80, 200, 255, 0.28);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 0 40px rgba(80, 150, 255, 0.08),
        0 20px 60px rgba(0, 0, 0, 0.45);

    color: #ffffff !important;
}


/* Category text */
.what-we-do-page .card.expandable .card-reveal::before {
    color: #55dfff !important;
}


/* Main description */
.what-we-do-page .card.expandable .card-reveal p {
    color: #ffffff !important;
}


/* Expand text */
.what-we-do-page .card.expandable .card-reveal .more {
    color: #ffffff !important;
}


/* Premium cyan hover border */
.what-we-do-page .card.expandable:hover {
    border-color: rgba(85, 223, 255, 0.75) !important;

    box-shadow:
        0 25px 70px rgba(30, 160, 255, 0.20),
        0 0 35px rgba(85, 223, 255, 0.08);
}

/* =========================================================
   WHAT WE DO — FULL CARD CROSSFADE
   ========================================================= */

.what-we-do-page .card.expandable {
    position: relative;
    overflow: hidden;
    min-height: 450px;
    cursor: pointer;
}


/* IMAGE = FULL CARD */
.what-we-do-page .card.expandable .card-img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    max-height: none !important;
    min-height: 0 !important;

    margin: 0;

    z-index: 2;

    opacity: 1;

    transform: scale(1);

    transition:
        opacity .5s ease,
        transform .7s cubic-bezier(.2,.7,.2,1);
}


.what-we-do-page .card.expandable .card-img img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1),
        filter .5s ease;
}


/* Normal image caption */
.what-we-do-page .card.expandable .card-caption {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 4;

    padding: 70px 24px 24px;

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


/* =========================================================
   FULL GLASS CONTENT CARD
   ========================================================= */

.what-we-do-page .card.expandable .card-body {
    position: absolute;

    inset: 0;

    z-index: 5;

    padding: 38px 32px;

    opacity: 0;

    transform: scale(.94);

    pointer-events: none;

    transition:
        opacity .5s ease,
        transform .55s cubic-bezier(.2,.7,.2,1);

    background: transparent !important;
}


.what-we-do-page .card.expandable .card-reveal {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 38px 32px;

    max-height: none !important;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(24, 37, 88, .96),
            rgba(7, 15, 40, .97)
        ) !important;

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(80, 210, 255, .30);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 50px rgba(80,150,255,.08);
}


/* Small category */
.what-we-do-page .card.expandable .card-reveal::before {
    content: attr(data-tag);

    color: #55dfff;

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .14em;

    text-transform: uppercase;

    margin-bottom: 18px;
}


/* SMALLER DESCRIPTION */
.what-we-do-page .card.expandable .card-reveal p {
    margin: 0 0 24px;

    max-width: 34ch;

    color: #ffffff !important;

    font-family: var(--body);

    font-size: 14px;

    line-height: 1.55;

    font-weight: 400;
}


/* Expand */
.what-we-do-page .card.expandable .card-reveal .more {
    color: #ffffff !important;

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .12em;

    text-transform: uppercase;
}



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

/* Image fades away */
.what-we-do-page .card.expandable:hover .card-img {
    opacity: 0;

    transform: scale(1.05);
}


/* Image caption disappears */
.what-we-do-page .card.expandable:hover .card-caption {
    opacity: 0;

    transform: translateY(10px);
}


/* Glass card appears */
.what-we-do-page .card.expandable:hover .card-body {
    opacity: 1;

    transform: scale(1);

    pointer-events: auto;
}


/* Slight card lift */
.what-we-do-page .card.expandable:hover {
    transform: translateY(-4px);

    border-color: rgba(85,223,255,.55);

    box-shadow:
        0 20px 55px rgba(20,120,220,.18);
}

/* =========================================================
   FIX — REVEAL HEADING POSITION
   ========================================================= */

/* Make the reveal panel the positioning reference */
.what-we-do-page .card.expandable .card-reveal {
    position: absolute;
    inset: 0;

    padding: 32px 32px;

    justify-content: flex-start !important;
}


/* Category stays at the top */
.what-we-do-page .card.expandable .card-reveal::before {
    position: absolute;

    top: 32px;
    left: 32px;

    margin: 0 !important;

    color: #55dfff !important;

    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
}


/* =========================================================
   HEADING — MOVE TO TOP
   ========================================================= */

.what-we-do-page .card.expandable .card-reveal::after {

    content: attr(data-title);

    position: absolute;

    top: 68px;
    left: 32px;
    right: 32px;

    margin: 0;

    color: #ffffff;

    font-family: var(--display);

    font-size: 25px;
    font-weight: 600;

    line-height: 1.18;
    letter-spacing: -.02em;

    max-width: 90%;

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity .45s ease .12s,
        transform .55s cubic-bezier(.2,.7,.2,1) .12s;
}


/* =========================================================
   DESCRIPTION — BELOW HEADING
   ========================================================= */

.what-we-do-page .card.expandable .card-reveal p {

    margin-top: 105px !important;
    margin-bottom: 22px !important;

    max-width: 34ch;

    color: rgba(255,255,255,.82) !important;

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

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity .45s ease .22s,
        transform .5s ease .22s;
}


/* =========================================================
   EXPAND — AFTER DESCRIPTION
   ========================================================= */

.what-we-do-page .card.expandable .card-reveal .more {

    color: #ffffff !important;

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .12em;

    text-transform: uppercase;

    opacity: 0;

    transform: translateY(15px);

    transition:
        opacity .4s ease .3s,
        transform .45s ease .3s;
}


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

.what-we-do-page .card.expandable:hover .card-reveal::after {
    opacity: 1;
    transform: translateY(0);
}

.what-we-do-page .card.expandable:hover .card-reveal p {
    opacity: 1;
    transform: translateY(0);
}

.what-we-do-page .card.expandable:hover .card-reveal .more {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   PREMIUM INTERNSHIP PROGRAM CARDS
   ========================================================= */

.internship-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 30px;
}


/* ---------------------------------------------------------
   BASE CARD
   --------------------------------------------------------- */

.internship-card {
    position: relative;
    min-height: 430px;
    overflow: hidden;

    border-radius: 0;

    padding: 0;

    color: #ffffff;

    isolation: isolate;

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease;
}


.internship-card:hover {
    transform: translateY(-6px);

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


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.internship-content {
    position: relative;
    z-index: 3;

    height: 100%;

    min-height: 430px;

    padding: 38px 34px;

    display: flex;
    flex-direction: column;
}


/* ---------------------------------------------------------
   LABEL
   --------------------------------------------------------- */

.internship-label {
    font-family: var(--mono);

    font-size: 11px;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: rgba(255,255,255,.85);

    margin-bottom: 38px;
}


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

.internship-card h3 {
    font-family: var(--display);

    font-size: clamp(28px, 3vw, 42px);

    line-height: 1.05;

    letter-spacing: -.025em;

    color: #ffffff;

    max-width: 10ch;

    margin: 0 0 22px;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.internship-card p {
    max-width: 48ch;

    color: rgba(255,255,255,.92);

    font-family: var(--body);

    font-size: 15px;

    line-height: 1.6;

    margin: 0;
}


/* ---------------------------------------------------------
   META
   --------------------------------------------------------- */

.internship-meta {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 24px;
}


.internship-meta span {
    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .08em;

    text-transform: uppercase;

    padding: 7px 10px;

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

    color: #ffffff;
}


/* ---------------------------------------------------------
   LEARN MORE
   --------------------------------------------------------- */

.internship-link {
    margin-top: auto;

    align-self: flex-end;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    color: #ffffff;

    font-family: var(--display);

    font-size: 17px;

    font-weight: 600;

    transition:
        gap .3s ease,
        opacity .3s ease;
}


.internship-link span {
    font-size: 24px;

    line-height: 1;

    transition: transform .3s ease;
}


.internship-link:hover {
    gap: 20px;
}


.internship-link:hover span {
    transform: translateX(4px);
}


/* =========================================================
   BLUE CARD
   ========================================================= */

.internship-blue {

    background:
        linear-gradient(
            145deg,
            #1649ff 0%,
            #0637ed 55%,
            #0030d8 100%
        );
}


/* =========================================================
   RED / PINK CARD
   ========================================================= */

.internship-red {

    background:
        linear-gradient(
            145deg,
            #f0003c 0%,
            #e60038 55%,
            #d90036 100%
        );
}


/* =========================================================
   ABSTRACT LINE PATTERN
   ========================================================= */

.internship-pattern {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    opacity: .32;

    background-image:

        radial-gradient(
            ellipse 45% 35% at 70% 25%,
            transparent 58%,
            rgba(255,255,255,.7) 59%,
            transparent 60%
        ),

        radial-gradient(
            ellipse 65% 45% at 90% 70%,
            transparent 58%,
            rgba(255,255,255,.55) 59%,
            transparent 60%
        ),

        linear-gradient(
            120deg,
            transparent 48%,
            rgba(255,255,255,.5) 49%,
            transparent 50%
        ),

        linear-gradient(
            70deg,
            transparent 58%,
            rgba(255,255,255,.4) 59%,
            transparent 60%
        );
}


/* Make red card content sit above pattern */

.internship-red .internship-content {
    z-index: 3;
}


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

@media (max-width: 760px) {

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

    .internship-card,
    .internship-content {
        min-height: 400px;
    }

    .internship-card h3 {
        font-size: 34px;
    }

}
/* =========================================================
   WHAT WE THINK — CLEAN BACKGROUND
   ========================================================= */

.think-page #stars,
.think-page #galaxy-canvas,
.think-page #fluid-canvas,
.think-page .smoke-layer {
    display: none !important;
}
/* Clean plain background for What We Think */

.think-page {
    background: #05060c !important;
}

.think-page main {
    background: #05060c;
}

.think-page main > section:not(.think-space-hero) {
    background: #05060c;
}

/* =========================================================
   WHO WE ARE — CHESS STRATEGY HERO
   ========================================================= */

.who-we-are-page .who-we-are-hero {

    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    overflow: hidden;

    isolation: isolate;

    padding: 0;

    background: #05060c;

    border-bottom: none;
}


/* ---------------------------------------------------------
   HERO IMAGE
   --------------------------------------------------------- */
.who-we-are-page .who-we-are-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        linear-gradient(
            90deg,
            rgba(2, 4, 10, 0.94) 0%,
            rgba(2, 4, 10, 0.78) 28%,
            rgba(2, 4, 10, 0.35) 55%,
            rgba(2, 4, 10, 0.10) 100%
        ),
        url("./img/optimized/who-we-are-hero.webp");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    /* SAME SCROLL CONTROL STYLE AS WHAT WE DO */

    transform:
        scale(var(--who-earth-scale, 1));

    opacity:
        var(--who-earth-opacity, 1);

    will-change:
        transform,
        opacity;

    transition:
        opacity 0.08s linear,
        transform 0.08s linear;

    pointer-events: none;
}



/* ---------------------------------------------------------
   DARK BOTTOM FADE
   --------------------------------------------------------- */

.who-we-are-page .who-we-are-hero::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 32%;

    z-index: 1;

    background:

        linear-gradient(
            to top,
            #05060c 0%,
            rgba(5, 6, 12, 0.72) 30%,
            rgba(5, 6, 12, 0) 100%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.who-we-are-page .who-we-are-hero .wrap {

    position: relative;

    z-index: 5;

    width: 100%;

    padding-top: 100px;

    padding-bottom: 100px;
}


.who-we-are-page .who-we-are-hero .hero-content {

    max-width: 720px;

}


/* ---------------------------------------------------------
   EYEBROW
   --------------------------------------------------------- */

.who-we-are-page .who-we-are-hero .eyebrow {

    color: #55dfff;

    text-shadow:
        0 0 15px rgba(41, 196, 232, 0.35);

}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

.who-we-are-page .who-we-are-hero h1 {

    max-width: 720px;

    font-size: clamp(
        38px,
        5.5vw,
        70px
    );

    line-height: 1.04;

    letter-spacing: -0.035em;

    color: #ffffff;

    margin-bottom: 24px;

    text-shadow:
        0 4px 25px rgba(0, 0, 0, 0.55);
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.who-we-are-page .who-we-are-hero p {

    max-width: 600px;

    font-size: 17px;

    line-height: 1.7;

    color: rgba(245, 243, 255, 0.85);

    text-shadow:
        0 2px 15px rgba(0, 0, 0, 0.55);

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .who-we-are-page .who-we-are-hero {

        min-height: 680px;

        align-items: flex-end;

    }


    .who-we-are-page .who-we-are-hero-bg {

        background-position: 65% center;

    }


    .who-we-are-page .who-we-are-hero .wrap {

        padding-top: 120px;

        padding-bottom: 60px;

    }


    .who-we-are-page .who-we-are-hero h1 {

        font-size: 38px;

    }


    .who-we-are-page .who-we-are-hero p {

        font-size: 15px;

    }

}

/* ---------------------------------------------------------
   REMOVE GLOBAL BACKGROUND EFFECTS
   --------------------------------------------------------- */

.who-we-are-page #stars,
.who-we-are-page .smoke-layer,
.who-we-are-page #galaxy-canvas,
.who-we-are-page #fluid-canvas {

    display: none !important;

}

/* =========================================================
   CAREERS & INTERNSHIPS — CINEMATIC HERO
   ========================================================= */

.careers-page .careers-hero {

    position: relative;

    min-height: 760px;

    display: flex;

    align-items: center;

    overflow: hidden;

    isolation: isolate;

    background: #05060c;

    padding: 0;

    border-bottom: none;
}


/* =========================================================
   BACKGROUND IMAGE
   ========================================================= */

.careers-page .careers-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image: url("./img/optimized/career-hero.webp");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    transform: scale(1.02);

    transition: transform 1.2s ease;

}


/* Subtle cinematic zoom */

.careers-page .careers-hero:hover .careers-hero-bg {

    transform: scale(1.045);

}


/* =========================================================
   DARK GRADIENT OVERLAY
   ========================================================= */

.careers-page .careers-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(3, 5, 12, 0.94) 0%,
            rgba(3, 5, 12, 0.82) 25%,
            rgba(3, 5, 12, 0.42) 48%,
            rgba(3, 5, 12, 0.08) 75%,
            rgba(3, 5, 12, 0.18) 100%
        );

}


/* =========================================================
   BOTTOM FADE
   ========================================================= */

.careers-page .careers-hero::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 30%;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            to top,
            #05060c 0%,
            rgba(5, 6, 12, 0.75) 30%,
            rgba(5, 6, 12, 0) 100%
        );

}


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

.careers-page .careers-hero .wrap {

    position: relative;

    z-index: 5;

    width: 100%;

    padding-top: 100px;

    padding-bottom: 120px;

}


.careers-page .careers-hero-content {

    max-width: 650px;

}


/* =========================================================
   EYEBROW
   ========================================================= */

.careers-page .careers-hero .eyebrow {

    display: inline-block;

    color: #55dfff;

    font-family: var(--mono);

    font-size: 12px;

    letter-spacing: .12em;

    text-transform: uppercase;

    margin-bottom: 22px;

    text-shadow:

        0 0 18px rgba(85, 223, 255, .35);

}


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

.careers-page .careers-hero h1 {

    max-width: 650px;

    font-size: clamp(
        42px,
        6vw,
        76px
    );

    line-height: 1.02;

    letter-spacing: -0.045em;

    color: #ffffff;

    margin: 0 0 26px;

    text-shadow:

        0 4px 30px rgba(0, 0, 0, .65);

}


.careers-page .careers-hero h1 span {

    display: block;

    background:

        linear-gradient(
            100deg,
            #55dfff,
            #7b4fe0,
            #ffffff
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.careers-page .careers-hero p {

    max-width: 570px;

    font-size: 17px;

    line-height: 1.7;

    color: rgba(245, 243, 255, .86);

    margin-bottom: 32px;

    text-shadow:

        0 2px 18px rgba(0, 0, 0, .65);

}


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

.careers-page .careers-hero .hero-cta {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

}


/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.careers-page .careers-hero-scroll {

    position: absolute;

    right: 42px;

    bottom: 38px;

    z-index: 6;

    display: flex;

    align-items: center;

    gap: 12px;

    color: rgba(255,255,255,.65);

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .12em;

    writing-mode: vertical-rl;

}


.careers-page .scroll-line {

    display: block;

    width: 1px;

    height: 55px;

    background:

        linear-gradient(
            to bottom,
            #55dfff,
            transparent
        );

}


/* =========================================================
   REMOVE GLOBAL SPACE EFFECTS
   ========================================================= */

.careers-page #stars,
.careers-page .smoke-layer,
.careers-page #galaxy-canvas,
.careers-page #fluid-canvas {

    display: none !important;

}


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

@media (max-width: 760px) {

    .careers-page .careers-hero {

        min-height: 720px;

        align-items: flex-end;

    }


    .careers-page .careers-hero-bg {

        background-position: 58% center;

    }


    .careers-page .careers-hero-overlay {

        background:

            linear-gradient(
                90deg,
                rgba(3, 5, 12, .90),
                rgba(3, 5, 12, .38)
            ),

            linear-gradient(
                to top,
                rgba(3, 5, 12, .85),
                transparent 65%
            );

    }


    .careers-page .careers-hero .wrap {

        padding-top: 100px;

        padding-bottom: 75px;

    }


    .careers-page .careers-hero h1 {

        font-size: 42px;

    }


    .careers-page .careers-hero p {

        font-size: 15px;

    }


    .careers-page .careers-hero-scroll {

        display: none;

    }

}

/* =========================================================
   WHAT WE THINK — SAME CARD ANIMATION AS WHAT WE DO
   ========================================================= */

.think-page .card.expandable {
    position: relative;
    overflow: hidden;

    border-radius: 18px;

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        border-color .45s ease,
        box-shadow .45s ease;
}


/* ---------------------------------------------------------
   CARD BODY
   --------------------------------------------------------- */

.think-page .card.expandable .card-body {

    position: absolute;

    inset: 0;

    z-index: 5;

    padding: 38px 32px;

    opacity: 0;

    transform: scale(.94);

    pointer-events: none;

    transition:
        opacity .5s ease,
        transform .55s cubic-bezier(.2,.7,.2,1);

    background: transparent !important;

}


/* ---------------------------------------------------------
   GLASS REVEAL
   --------------------------------------------------------- */

.think-page .card.expandable .card-reveal {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 38px 32px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(24, 37, 88, .96),
            rgba(7, 15, 40, .98)
        ) !important;

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(80, 210, 255, .30);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 50px rgba(80,150,255,.08);

    max-height: none !important;
}


/* ---------------------------------------------------------
   BELIEF TAG
   --------------------------------------------------------- */

.think-page .reveal-tag {

    color: #55dfff;

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .14em;

    text-transform: uppercase;

    margin-bottom: 18px;

}


/* ---------------------------------------------------------
   REVEAL HEADING
   --------------------------------------------------------- */

.think-page .card-reveal h3 {

    margin: 0 0 18px;

    color: #ffffff !important;

    font-family: var(--heading);

    font-size: clamp(22px, 2vw, 30px);

    line-height: 1.15;

    letter-spacing: -.02em;

}


/* ---------------------------------------------------------
   REVEAL DESCRIPTION
   --------------------------------------------------------- */

.think-page .card-reveal p {

    margin: 0 0 24px;

    max-width: 34ch;

    color: #ffffff !important;

    font-family: var(--body);

    font-size: 14px;

    line-height: 1.55;

    font-weight: 400;

}


/* ---------------------------------------------------------
   EXPAND
   --------------------------------------------------------- */

.think-page .card-reveal .more {

    color: #ffffff !important;

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .12em;

    text-transform: uppercase;

}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.think-page .card.expandable .card-img {

    position: relative;

    z-index: 2;

    transition:
        opacity .5s ease,
        transform .6s cubic-bezier(.2,.7,.2,1);

}


/* ---------------------------------------------------------
   IMAGE CAPTION
   --------------------------------------------------------- */

.think-page .card.expandable .card-caption {

    transition:
        opacity .35s ease,
        transform .4s ease;

}


/* ---------------------------------------------------------
   HOVER — IMAGE DISAPPEARS
   --------------------------------------------------------- */

.think-page .card.expandable:hover .card-img {

    opacity: 0;

    transform: scale(1.05);

}


/* ---------------------------------------------------------
   HOVER — CAPTION DISAPPEARS
   --------------------------------------------------------- */

.think-page .card.expandable:hover .card-caption {

    opacity: 0;

    transform: translateY(10px);

}


/* ---------------------------------------------------------
   HOVER — GLASS PANEL APPEARS
   --------------------------------------------------------- */

.think-page .card.expandable:hover .card-body {

    opacity: 1;

    transform: scale(1);

    pointer-events: auto;

}


/* ---------------------------------------------------------
   HOVER — CARD LIFT
   --------------------------------------------------------- */

.think-page .card.expandable:hover {

    transform: translateY(-4px);

    border-color: rgba(85,223,255,.55);

    box-shadow:
        0 20px 55px rgba(20,120,220,.18);

}
/* =========================================================
   WHAT WE THINK
   SAME CARD ANIMATION AS WHAT WE DO
   WITH STAGGERED TEXT REVEAL
   ========================================================= */


/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */

.think-page .card.expandable {

    position: relative;

    overflow: hidden;

    min-height: 450px;

    padding: 0;

    border-radius: 16px;

    cursor: pointer;

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        border-color .45s ease,
        box-shadow .45s ease;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.think-page .card.expandable .card-img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-height: none !important;

    min-height: 0 !important;

    margin: 0;

    border-radius: 16px;

    z-index: 2;

    opacity: 1;

    transform: scale(1);

    transition:
        opacity .5s ease,
        transform .7s cubic-bezier(.2,.7,.2,1);
}


.think-page .card.expandable .card-img img {

    width: 100%;
    height: 100%;

    object-fit: cover;

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


/* ---------------------------------------------------------
   IMAGE CAPTION
   --------------------------------------------------------- */

.think-page .card.expandable .card-caption {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 4;

    padding: 70px 24px 24px;

    transition:
        opacity .35s ease,
        transform .4s ease;
}


/* ---------------------------------------------------------
   GLASS BODY
   --------------------------------------------------------- */

.think-page .card.expandable .card-body {

    position: absolute;

    inset: 0;

    z-index: 5;

    padding: 38px 32px;

    opacity: 0;

    transform: scale(.94);

    pointer-events: none;

    transition:
        opacity .5s ease,
        transform .55s cubic-bezier(.2,.7,.2,1);

    background: transparent !important;
}


/* ---------------------------------------------------------
   GLASS PANEL
   --------------------------------------------------------- */

.think-page .card.expandable .card-reveal {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    padding: 38px 32px;

    max-height: none !important;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(24, 37, 88, .96),
            rgba(7, 15, 40, .97)
        ) !important;

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(80, 210, 255, .30);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 50px rgba(80,150,255,.08);
}


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


/* ---------------------------------------------------------
   BELIEF LABEL
   --------------------------------------------------------- */

.think-page .card.expandable .card-reveal::before {

    content: attr(data-tag);

    display: block;

    color: #55dfff;

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .14em;

    text-transform: uppercase;

    margin-bottom: 18px;

    opacity: 0;

    transform: translateY(18px);

    transition:
        opacity .45s ease,
        transform .55s cubic-bezier(.2,.7,.2,1);

    transition-delay: .12s;
}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */




/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.think-page .card.expandable .card-reveal p {

    margin: 0 0 24px;

    max-width: 34ch;

    color: #ffffff !important;

    font-family: var(--body);

    font-size: 14px;

    line-height: 1.55;

    font-weight: 400;

    opacity: 0;

    transform: translateY(24px);

    transition:
        opacity .5s ease,
        transform .6s cubic-bezier(.2,.7,.2,1);

    transition-delay: .30s;
}


/* ---------------------------------------------------------
   EXPAND
   --------------------------------------------------------- */

.think-page .card.expandable .card-reveal .more {

    color: #ffffff !important;

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: .12em;

    text-transform: uppercase;

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity .45s ease,
        transform .55s cubic-bezier(.2,.7,.2,1);

    transition-delay: .40s;
}


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


/* Image disappears */

.think-page .card.expandable:hover .card-img {

    opacity: 0;

    transform: scale(1.05);
}


/* Caption disappears */

.think-page .card.expandable:hover .card-caption {

    opacity: 0;

    transform: translateY(10px);
}


/* Glass panel appears */

.think-page .card.expandable:hover .card-body {

    opacity: 1;

    transform: scale(1);

    pointer-events: auto;
}


/* ---------------------------------------------------------
   TEXT COMES IN ONE BY ONE
   --------------------------------------------------------- */

.think-page .card.expandable:hover .card-reveal::before {

    opacity: 1;

    transform: translateY(0);
}


.think-page .card.expandable:hover .card-reveal::after {

    opacity: 1;

    transform: translateY(0);
}


.think-page .card.expandable:hover .card-reveal p {

    opacity: 1;

    transform: translateY(0);
}


.think-page .card.expandable:hover .card-reveal .more {

    opacity: 1;

    transform: translateY(0);
}


/* ---------------------------------------------------------
   CARD LIFT
   --------------------------------------------------------- */

.think-page .card.expandable:hover {

    transform: translateY(-4px);

    border-color: rgba(85,223,255,.55);

    box-shadow:
        0 20px 55px rgba(20,120,220,.18);
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {

    .think-page .card.expandable {

        min-height: 400px;

    }

}

/* =========================================================
   WHAT WE THINK — SCROLL FADE HERO
   SAME EFFECT AS WHAT WE DO
   ========================================================= */

.think-page .think-space-hero {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    isolation: isolate;
    background: #02040a;
}


/* ---------------------------------------------------------
   HERO IMAGE
   --------------------------------------------------------- */

.think-page .think-space-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background-image:
        linear-gradient(
            90deg,
            rgba(2, 4, 10, 0.92) 0%,
            rgba(2, 4, 10, 0.72) 25%,
            rgba(2, 4, 10, 0.30) 55%,
            rgba(2, 4, 10, 0.18) 100%
        ),
        url("./img/optimized/what-we-think-hero.webp");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform:
        scale(var(--think-hero-scale, 1));

    opacity:
        var(--think-hero-opacity, 1);

    will-change: transform, opacity;

    transition:
        opacity 0.08s linear,
        transform 0.08s linear;
}


/* ---------------------------------------------------------
   BOTTOM FADE
   --------------------------------------------------------- */

.think-page .think-space-hero::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 35%;

    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(2, 4, 10, 0.95),
            rgba(2, 4, 10, 0)
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   HERO CONTENT ABOVE IMAGE
   --------------------------------------------------------- */

.think-page .think-space-hero .wrap {

    position: relative;

    z-index: 5;
}

/* =========================================================
   WHAT WE THINK — FIX REAL HEADING ANIMATION
   ========================================================= */

/* Initial state */

.think-page .card.expandable .card-reveal h3 {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .5s ease,
        transform .6s cubic-bezier(.2,.7,.2,1);

    transition-delay: .20s;
}


/* Paragraph */

.think-page .card.expandable .card-reveal p {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity .5s ease,
        transform .6s cubic-bezier(.2,.7,.2,1);

    transition-delay: .32s;
}


/* Expand */

.think-page .card.expandable .card-reveal .more {
    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity .45s ease,
        transform .55s cubic-bezier(.2,.7,.2,1);

    transition-delay: .44s;
}



/* ═════════════════════════════════════════════════════
TECHGALAXY ECOSYSTEM — PREMIUM COLOR EDITION
═════════════════════════════════════════════════════ */

.tg-ecosystem {
position: relative;
overflow: hidden;
padding: 95px 0 90px;

background:
radial-gradient(
circle at 50% 45%,
rgba(91, 65, 255, .16),
transparent 32%
),
radial-gradient(
circle at 10% 80%,
rgba(0, 210, 255, .07),
transparent 25%
),
radial-gradient(
circle at 90% 15%,
rgba(155, 70, 255, .08),
transparent 25%
);

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

/* ───────── BACKGROUND GRID ───────── */

.tg-eco-grid {
position: absolute;
inset: 0;
pointer-events: none;

opacity: .35;

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

background-size: 55px 55px;

mask-image:
radial-gradient(
ellipse at center,
black 0%,
transparent 72%
);
}

/* ───────── HEADER ───────── */

.tg-eco-header {
position: relative;
z-index: 5;
max-width: 700px;
margin: 0 auto;
text-align: center;
}

.tg-eco-label {
display: inline-block;

font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 3px;

color: #62d9ff;

margin-bottom: 18px;

text-shadow:
0 0 15px rgba(98, 217, 255, .45);
}

.tg-eco-header h2 {
margin: 0;

font-size: clamp(38px, 5vw, 64px);
line-height: 1.02;
letter-spacing: -2px;
}

.tg-eco-header h2 span {
background: linear-gradient(
90deg,
#a78bfa 0%,
#6366f1 35%,
#22d3ee 75%,
#67e8f9 100%
);

-webkit-background-clip: text;
background-clip: text;
color: transparent;

filter:
drop-shadow(0 0 18px rgba(99,102,241,.25));
}

.tg-eco-header p {
max-width: 560px;
margin: 22px auto 0;

font-size: 14px;
line-height: 1.8;

color: rgba(235, 240, 255, .58);
}

/* ═══════════════════════════════════════
ORBIT
═══════════════════════════════════════ */

.tg-orbit {
width: min(900px, 100%);
height: 580px;

margin: 45px auto 0;

position: relative;
}

/* ───────── ORBIT RINGS ───────── */

.tg-orbit-ring {
position: absolute;

left: 50%;
top: 50%;

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

border-radius: 50%;

pointer-events: none;
}

.tg-ring-1 {
width: 360px;
height: 360px;

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

box-shadow:
0 0 40px rgba(99, 70, 255, .08),
inset 0 0 40px rgba(99, 70, 255, .04);
}

.tg-ring-2 {
width: 500px;
height: 500px;

border: 1px dashed rgba(34, 211, 238, .15);

box-shadow:
0 0 60px rgba(34, 211, 238, .04);

animation: tgOrbitRotate 35s linear infinite;
}

@keyframes tgOrbitRotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}

to {
transform: translate(-50%, -50%) rotate(360deg);
}
}

/* ═══════════════════════════════════════
CENTER CORE
═══════════════════════════════════════ */

.tg-core {
position: absolute;

left: 50%;
top: 50%;

width: 175px;
height: 175px;

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

border-radius: 50%;

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

background:
radial-gradient(
circle at 30% 25%,
rgba(167, 139, 250, .38),
rgba(37, 25, 95, .85) 38%,
rgba(6, 12, 31, .98) 72%
);

border: 1px solid rgba(167, 139, 250, .6);

box-shadow:
0 0 25px rgba(124, 92, 255, .35),
0 0 70px rgba(93, 61, 255, .22),
0 0 130px rgba(34, 211, 238, .08),
inset 0 0 45px rgba(130, 100, 255, .18);

z-index: 10;

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

@keyframes tgCoreFloat {
0%,
100% {
transform: translate(-50%, -50%);
}

50% {
transform: translate(-50%, calc(-50% - 7px));
}
}

.tg-core::before {
content: "";

position: absolute;
inset: -11px;

border-radius: 50%;

border: 1px solid rgba(99, 102, 241, .28);

box-shadow:
0 0 25px rgba(99,102,241,.18);

animation: tgCorePulse 2.8s ease-in-out infinite;
}

@keyframes tgCorePulse {

0%,
100% {
transform: scale(1);
opacity: .6;
}

50% {
transform: scale(1.12);
opacity: 0;
}
}

.tg-core-glow {
position: absolute;

width: 90px;
height: 90px;

border-radius: 50%;

background:
radial-gradient(
circle,
rgba(124, 92, 255, .45),
rgba(34, 211, 238, .12),
transparent 70%
);

filter: blur(18px);
}

.tg-core-content {
position: relative;

text-align: center;

display: flex;
flex-direction: column;
}

.tg-core-content span {
font-family: "JetBrains Mono", monospace;

font-size: 9px;
letter-spacing: 3px;

color: #67e8f9;
opacity: .8;
}

.tg-core-content strong {
font-family: "Space Grotesk", sans-serif;

font-size: 25px;
letter-spacing: -1px;

background:
linear-gradient(
90deg,
#ffffff,
#c4b5fd,
#67e8f9
);

-webkit-background-clip: text;
background-clip: text;
color: transparent;

text-shadow:
0 0 25px rgba(139, 92, 246, .25);
}

.tg-core-content small {
margin-top: 4px;

font-family: "JetBrains Mono", monospace;

font-size: 7px;
letter-spacing: 2px;

color: #a5b4fc;
opacity: .55;
}

/* ═══════════════════════════════════════
NODES
═══════════════════════════════════════ */

.tg-node {
position: absolute;

width: 260px;

padding: 20px;

display: flex;
gap: 15px;

border-radius: 17px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.075),
rgba(255,255,255,.025)
);

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

backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);

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

z-index: 8;
}

/* top left */

.tg-node-1 {
left: 0;
top: 55px;

--node-color: #a78bfa;
}

/* top right */

.tg-node-2 {
right: 0;
top: 55px;

--node-color: #22d3ee;
}

/* bottom left */

.tg-node-3 {
left: 0;
bottom: 55px;

--node-color: #60a5fa;
}

/* bottom right */

.tg-node-4 {
right: 0;
bottom: 55px;

--node-color: #c084fc;
}

.tg-node::before {
content: "";

position: absolute;

left: 0;
top: 18px;
bottom: 18px;

width: 2px;

border-radius: 5px;

background: var(--node-color);

box-shadow:
0 0 14px var(--node-color);

opacity: .75;
}

.tg-node:hover {
border-color: color-mix(
in srgb,
var(--node-color) 65%,
transparent
);

background:
linear-gradient(
135deg,
color-mix(
in srgb,
var(--node-color) 12%,
transparent
),
rgba(255,255,255,.025)
);

box-shadow:
0 20px 55px color-mix(
in srgb,
var(--node-color) 18%,
transparent
),
inset 0 0 25px color-mix(
in srgb,
var(--node-color) 5%,
transparent
);

transform: translateY(-8px);
}

/* ───────── NUMBER ───────── */

.tg-node-number {
position: absolute;

top: -8px;
right: 18px;

font-family: "JetBrains Mono", monospace;

font-size: 9px;

color: var(--node-color);

opacity: .8;
}

/* ───────── ICON ───────── */

.tg-node-icon {
flex-shrink: 0;

width: 40px;
height: 40px;

display: grid;
place-items: center;

border-radius: 11px;

border: 1px solid
color-mix(
in srgb,
var(--node-color) 40%,
transparent
);

color: var(--node-color);

font-size: 16px;

background:
color-mix(
in srgb,
var(--node-color) 9%,
transparent
);

box-shadow:
0 0 18px
color-mix(
in srgb,
var(--node-color) 12%,
transparent
);
}

/* ───────── CONTENT ───────── */

.tg-node-content span {
font-family: "JetBrains Mono", monospace;

font-size: 8px;
letter-spacing: 2px;

color: var(--node-color);

opacity: .85;
}

.tg-node-content h3 {
margin: 5px 0 6px;

font-size: 21px;

color: #f4f2ff;
}

.tg-node-content p {
margin: 0;

font-size: 11px;
line-height: 1.65;

color: rgba(230,235,255,.52);
}

/* ═══════════════════════════════════════
PULSING CONNECTION POINTS
═══════════════════════════════════════ */

.tg-pulse {
position: absolute;

width: 6px;
height: 6px;

border-radius: 50%;

background: #67e8f9;

box-shadow:
0 0 8px #67e8f9,
0 0 22px #6366f1;

z-index: 4;

animation:
tgPulse 2s ease-in-out infinite;
}

@keyframes tgPulse {

0%,
100% {
opacity: .3;
transform: scale(.7);
}

50% {
opacity: 1;
transform: scale(1.5);
}
}

.tg-pulse-1 {
left: 34%;
top: 31%;
}

.tg-pulse-2 {
right: 34%;
top: 31%;
animation-delay: .5s;
}

.tg-pulse-3 {
left: 34%;
bottom: 31%;
animation-delay: 1s;
}

.tg-pulse-4 {
right: 34%;
bottom: 31%;
animation-delay: 1.5s;
}

/* ═══════════════════════════════════════
BOTTOM JOURNEY
═══════════════════════════════════════ */

.tg-bottom-text {
display: flex;

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

gap: 15px;

margin-top: -5px;

font-family: "JetBrains Mono", monospace;

font-size: 9px;
letter-spacing: 2px;

color: rgba(220,225,255,.45);
}

.tg-bottom-text span:nth-child(1) {
color: #a78bfa;
}

.tg-bottom-text span:nth-child(3) {
color: #22d3ee;
}

.tg-bottom-text span:nth-child(5) {
color: #60a5fa;
}

.tg-bottom-text span:nth-child(7) {
color: #c084fc;
}

.tg-bottom-text i {
font-style: normal;

color: #64748b;

opacity: .7;
}

/* ═══════════════════════════════════════
MOBILE
═══════════════════════════════════════ */

@media (max-width: 850px) {

.tg-ecosystem {
padding: 70px 0;
}

.tg-orbit {
height: auto;


display: flex;
flex-direction: column;

gap: 16px;

margin-top: 45px;

}

.tg-core {
position: relative;


left: auto;
top: auto;

transform: none;

margin: 0 auto 25px;

width: 145px;
height: 145px;


}

.tg-node {
position: relative;


left: auto;
right: auto;
top: auto;
bottom: auto;

width: 100%;

box-sizing: border-box;


}

.tg-node:hover {
transform: translateY(-4px);
}

.tg-orbit-ring,
.tg-pulse {
display: none;
}

.tg-bottom-text {
flex-wrap: wrap;


margin-top: 30px;

gap: 10px;

}
}

@media (max-width: 500px) {

.tg-eco-header h2 {
font-size: 38px;
}

.tg-eco-header p {
font-size: 13px;
}

.tg-node {
padding: 18px;
}
}


/* ═════════════════════════════════════════════
   WHAT WE DO — PREMIUM PANEL SHOWCASE
   ═════════════════════════════════════════════ */

/* =========================================
   WHAT WE DO
========================================= */

.wwd-section {
  position: relative;
  overflow: hidden;

  padding: 120px 0;

  background: #080912;

  color: #fff;
}


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

.wwd-head {
  display: grid;

  grid-template-columns: 1.25fr .65fr;

  align-items: end;

  gap: 80px;

  margin-bottom: 55px;
}

.wwd-head h2 {
  max-width: 760px;

  margin: 15px 0 0;

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

  line-height: .98;

  letter-spacing: -3px;
}

.wwd-head h2 span {
  background:
    linear-gradient(
      90deg,
      #8c6cff,
      #39dfff
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.wwd-head > p {
  margin: 0;

  color: #85899d;

  font-size: 13px;

  line-height: 1.8;
}


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

.wwd-grid {
  display: grid;

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

  gap: 14px;
}


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

.wwd-card {
  position: relative;

  min-height: 430px;

  overflow: hidden;

  border-radius: 7px;

  background: #101321;

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

  cursor: pointer;

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

.wwd-card:hover {
  transform: translateY(-6px);

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

  box-shadow:
    0 25px 60px
    rgba(0,0,0,.30);
}


/* =========================================
   IMAGE
========================================= */

.wwd-visual {
  position: absolute;

  inset: 0;

  overflow: hidden;
}

.wwd-visual img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .8s ease;
}

.wwd-card:hover
.wwd-visual img {
  transform: scale(1.07);
}


/* image gradient */

.wwd-gradient {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(5,7,15,.08) 20%,
      rgba(5,7,15,.22) 45%,
      rgba(5,7,15,.95) 100%
    );
}


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

.wwd-card-top {
  position: absolute;

  top: 20px;
  left: 20px;
  right: 20px;

  display: flex;

  justify-content: space-between;

  align-items: center;
}

.wwd-card-top span {
  padding: 6px 9px;

  border-radius: 3px;

  color: #fff;

  background:
    rgba(4,6,14,.55);

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

  backdrop-filter: blur(8px);

  font-size: 7px;

  letter-spacing: 1.5px;
}

.wwd-card-top b {
  width: 30px;
  height: 30px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: #fff;

  background:
    rgba(5,7,15,.55);

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

  font-size: 13px;
}


/* =========================================
   TITLE
========================================= */

.wwd-card-title {
  position: absolute;

  left: 22px;
  right: 22px;
  bottom: 25px;
}

.wwd-card-title h3 {
  margin: 0;

  font-size: 24px;

  line-height: 1;

  letter-spacing: -.8px;
}

.wwd-card-title strong {
  font-weight: 700;

  color: #fff;
}


/* =========================================
   EXPANDED CONTENT
========================================= */

.wwd-content {
  position: absolute;

  inset: 0;

  z-index: 5;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 30px;

  opacity: 0;

  transform:
    translateY(25px);

  pointer-events: none;

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


/* active */

.wwd-card.is-active
.wwd-content {
  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;
}

.wwd-card.is-active
.wwd-visual {
  opacity: 0;
}


/* =========================================
   CONTENT COLORS
========================================= */

.wwd-blue .wwd-content {
  background:
    linear-gradient(
      145deg,
      #071b39,
      #101f4b
    );
}

.wwd-purple .wwd-content {
  background:
    linear-gradient(
      145deg,
      #24105c,
      #39206f
    );
}

.wwd-yellow .wwd-content {
  color: #101217;

  background:
    linear-gradient(
      145deg,
      #ffd21c,
      #ffad18
    );
}

.wwd-cyan .wwd-content {
  background:
    linear-gradient(
      145deg,
      #063d55,
      #075d72
    );
}

.wwd-orange .wwd-content {
  color: #111;

  background:
    linear-gradient(
      145deg,
      #ffb67d,
      #ffd0a6
    );
}


/* =========================================
   CONTENT TEXT
========================================= */

.wwd-content-label {
  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2px;

  opacity: .65;
}

.wwd-content h3 {
  margin: auto 0 15px;

  max-width: 290px;

  font-size: 29px;

  line-height: 1;

  letter-spacing: -1px;
}

.wwd-content p {
  max-width: 300px;

  margin: 0;

  font-size: 11px;

  line-height: 1.7;

  opacity: .72;
}


/* bottom */

.wwd-content-bottom {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-top: 20px;

  margin-top: 25px;

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

.wwd-content-bottom span {
  font-size: 9px;

  opacity: .5;
}

.wwd-content-bottom i {
  font-style: normal;

  font-size: 8px;

  letter-spacing: 1.5px;
}


/* =========================================
   LAST CARD
========================================= */

.wwd-last {
  display: flex;

  align-items: center;

  justify-content: center;

  background:
    linear-gradient(
      145deg,
      #f5f2ed,
      #e7e2da
    );

  color: #101118;
}

.wwd-last-inner {
  position: relative;

  z-index: 3;

  width: 100%;

  padding: 30px;
}

.wwd-last-label {
  color: #6c6b71;

  font-size: 8px;

  letter-spacing: 2px;
}

.wwd-last h3 {
  max-width: 240px;

  margin: 20px 0 13px;

  font-size: 31px;

  line-height: 1;

  letter-spacing: -1.5px;
}

.wwd-last h3 strong {
  display: block;

  color: #5b48d8;
}

.wwd-last p {
  max-width: 250px;

  color: #696871;

  font-size: 11px;

  line-height: 1.7;
}


/* button */

.wwd-view-btn {
  display: inline-flex;

  align-items: center;

  gap: 20px;

  margin-top: 25px;

  padding: 12px 15px;

  border-radius: 4px;

  color: #fff;

  background: #111321;

  text-decoration: none;

  font-size: 8px;

  letter-spacing: 1.5px;

  transition: .3s ease;
}

.wwd-view-btn span {
  color: #57ddff;

  font-size: 15px;
}

.wwd-view-btn:hover {
  transform: translateX(4px);
}


/* decorative shape */

.wwd-last-shape {
  position: absolute;

  width: 220px;
  height: 220px;

  right: -90px;
  bottom: -100px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #7458ff,
      #45dfff
    );

  filter: blur(2px);

  opacity: .22;
}


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

@media(max-width: 950px) {

  .wwd-head {
    grid-template-columns: 1fr;

    gap: 25px;
  }

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

}


@media(max-width: 600px) {

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

  .wwd-head h2 {
    font-size: 42px;

    letter-spacing: -2px;
  }

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

  .wwd-card {
    min-height: 390px;
  }

}

/* =========================================
   CAREER BLUEPRINT — COLORFUL VERSION
========================================= */

.career-blueprint {
  position: relative;
  overflow: hidden;

  padding: 120px 0;

  background:
    radial-gradient(
      circle at 10% 15%,
      rgba(123, 74, 255, .20),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 35%,
      rgba(0, 220, 255, .15),
      transparent 28%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(255, 70, 150, .12),
      transparent 35%
    ),
    #070812;

  color: #fff;
}


/* BACKGROUND ORBS */

.cb-bg {
  position: absolute;

  width: 400px;
  height: 400px;

  border-radius: 50%;

  filter: blur(120px);

  opacity: .20;

  pointer-events: none;
}

.cb-purple {
  background: #714cff;

  top: -200px;
  left: -160px;
}

.cb-cyan {
  background: #00d9ff;

  top: 300px;
  right: -200px;
}

.cb-pink {
  background: #ff3f9f;

  bottom: -250px;
  left: 40%;
}


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

.cb-header {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns: 1.3fr .7fr;

  gap: 70px;

  align-items: end;

  margin-bottom: 65px;
}

.cb-label {
  display: flex;

  align-items: center;

  gap: 10px;

  color: #5bdfff;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 3px;
}

.cb-label span {
  width: 28px;
  height: 2px;

  background: linear-gradient(
    90deg,
    #8b5cff,
    #35dcff
  );

  box-shadow:
    0 0 12px rgba(50,220,255,.6);
}

.cb-heading h2 {
  margin: 18px 0 0;

  font-size: clamp(46px, 5vw, 72px);

  line-height: .94;

  letter-spacing: -4px;
}

.cb-heading h2 span {
  background:
    linear-gradient(
      90deg,
      #a56dff,
      #3bdcff,
      #7fffe5
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.cb-intro p {
  margin: 0 0 25px;

  color: #969bb2;

  font-size: 14px;

  line-height: 1.8;
}

.cb-main-btn {
  display: inline-flex;

  align-items: center;

  gap: 20px;

  padding: 13px 18px;

  color: #fff;

  text-decoration: none;

  font-size: 10px;

  letter-spacing: 1.5px;

  border-radius: 50px;

  background:
    linear-gradient(
      100deg,
      #704cff,
      #15cfea
    );

  box-shadow:
    0 12px 35px rgba(65,120,255,.2);

  transition: .3s ease;
}

.cb-main-btn span {
  font-size: 17px;
}

.cb-main-btn:hover {
  transform: translateY(-3px);

  box-shadow:
    0 18px 45px rgba(65,150,255,.35);
}


/* =========================================
   PROGRAM CARDS
========================================= */

.cb-programs {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;
}


/* CARD */

.cb-card {
  position: relative;

  overflow: hidden;

  border-radius: 26px;

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

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

  backdrop-filter: blur(18px);

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

.cb-card:hover {
  transform: translateY(-10px);

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

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


/* IMAGE */

.cb-image {
  position: relative;

  height: 270px;

  overflow: hidden;
}

.cb-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .8s ease;
}

.cb-card:hover .cb-image img {
  transform: scale(1.08);
}


/* overlay */

.cb-image-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(4,6,15,.05),
      rgba(4,6,15,.80)
    );
}


/* different color overlay */

.cb-java .cb-image-overlay {
  background:
    linear-gradient(
      135deg,
      rgba(110,60,255,.30),
      rgba(255,75,120,.30),
      rgba(5,7,15,.90)
    );
}

.cb-python .cb-image-overlay {
  background:
    linear-gradient(
      135deg,
      rgba(0,190,255,.30),
      rgba(80,90,255,.25),
      rgba(5,7,15,.90)
    );
}


/* image label */

.cb-image-label {
  position: absolute;

  left: 24px;
  top: 22px;

  padding: 7px 11px;

  border-radius: 50px;

  color: #fff;

  font-size: 8px;

  letter-spacing: 2px;

  background:
    rgba(5,7,16,.55);

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

  backdrop-filter: blur(10px);
}


/* giant number */

.cb-big-number {
  position: absolute;

  right: 25px;
  bottom: -10px;

  font-size: 110px;

  font-weight: 900;

  line-height: .8;

  color: rgba(255,255,255,.10);

  letter-spacing: -8px;
}


/* =========================================
   CARD CONTENT
========================================= */

.cb-card-content {
  padding: 28px;
}

.cb-card-title {
  display: flex;

  justify-content: space-between;

  align-items: start;
}

.cb-card-title small {
  color: #62687e;

  font-size: 8px;

  letter-spacing: 2px;
}

.cb-card-title h3 {
  margin: 9px 0 0;

  font-size: 32px;

  line-height: .95;

  letter-spacing: -1px;
}

.cb-card-title h3 strong {
  display: block;

  font-weight: 700;

  background:
    linear-gradient(
      90deg,
      #a16cff,
      #e878ff
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.cb-python .cb-card-title h3 strong {
  background:
    linear-gradient(
      90deg,
      #31dfff,
      #7e8cff
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.cb-card-arrow {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #744dff,
      #df4fff
    );

  transition: transform .3s ease;
}

.cb-python .cb-card-arrow {
  background:
    linear-gradient(
      135deg,
      #18cfee,
      #5f68ff
    );
}

.cb-card:hover .cb-card-arrow {
  transform:
    rotate(10deg)
    scale(1.08);
}


.cb-card-content > p {
  max-width: 470px;

  margin: 22px 0;

  color: #858ba2;

  font-size: 12px;

  line-height: 1.7;
}


/* =========================================
   TECHNOLOGIES
========================================= */

.cb-techs {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-bottom: 25px;
}

.cb-techs span {
  padding: 7px 10px;

  border-radius: 7px;

  color: #b1b6c9;

  font-size: 8px;

  letter-spacing: .8px;

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

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


/* FOOTER */

.cb-card-footer {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-top: 20px;

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

.cb-card-footer span {
  color: #c3c7d5;

  font-size: 11px;
}

.cb-card-footer small {
  display: block;

  margin-bottom: 4px;

  color: #5f657a;

  font-size: 7px;

  letter-spacing: 2px;
}

.cb-card-footer a {
  color: #fff;

  text-decoration: none;

  font-size: 8px;

  letter-spacing: 1.5px;
}

.cb-card-footer b {
  margin-left: 8px;

  color: #50ddff;

  font-size: 16px;
}


/* =========================================
   JOURNEY
========================================= */

.cb-journey {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns: .7fr 1.3fr;

  gap: 80px;

  margin-top: 100px;

  padding-top: 45px;

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

.cb-journey-heading h3 {
  margin: 15px 0 0;

  font-size: 28px;

  line-height: 1.05;
}

.cb-journey-heading em {
  font-style: normal;

  color: #6d75ff;
}


/* steps */

.cb-steps {
  position: relative;

  display: grid;

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

  gap: 18px;
}

.cb-steps::before {
  content: "";

  position: absolute;

  top: 22px;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      #784dff,
      #39dcff,
      rgba(255,255,255,.08)
    );
}

.cb-step {
  position: relative;

  padding-top: 48px;
}

.cb-step-number {
  position: absolute;

  top: 0;
  left: 0;

  width: 44px;
  height: 44px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #0b0d18;

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

  color: #70768c;

  font-size: 9px;

  z-index: 2;
}

.cb-step.active .cb-step-number {
  color: #fff;

  border-color: #875cff;

  background:
    linear-gradient(
      135deg,
      #724dff,
      #d34cff
    );

  box-shadow:
    0 0 30px rgba(115,70,255,.35);
}

.cb-step strong {
  font-size: 10px;

  letter-spacing: 2px;
}

.cb-step p {
  margin: 7px 0 0;

  color: #686e84;

  font-size: 9px;

  line-height: 1.5;
}


/* =========================================
   FINAL CTA
========================================= */

.cb-bottom {
  position: relative;
  z-index: 2;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;

  margin-top: 90px;

  padding: 45px;

  overflow: hidden;

  border-radius: 25px;

  background:
    linear-gradient(
      100deg,
      rgba(111,70,255,.22),
      rgba(0,210,255,.13),
      rgba(255,70,155,.12)
    );

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

.cb-bottom::after {
  content: "";

  position: absolute;

  width: 250px;
  height: 250px;

  right: -80px;
  top: -100px;

  border-radius: 50%;

  background: #4ddfff;

  filter: blur(100px);

  opacity: .15;
}

.cb-bottom small {
  color: #7f8499;

  font-size: 8px;

  letter-spacing: 2px;
}

.cb-bottom h3 {
  margin: 9px 0 0;

  font-size: 28px;
}

.cb-bottom h3 span {
  color: #5edfff;
}

.cb-bottom > a {
  position: relative;
  z-index: 2;

  display: flex;

  align-items: center;

  gap: 25px;

  padding: 15px 20px;

  border-radius: 50px;

  color: #fff;

  text-decoration: none;

  font-size: 9px;

  letter-spacing: 1.5px;

  background:
    linear-gradient(
      90deg,
      #734cff,
      #14cfe8
    );

  transition: .3s ease;
}

.cb-bottom > a span {
  font-size: 18px;
}

.cb-bottom > a:hover {
  transform: translateY(-3px);

  box-shadow:
    0 15px 40px rgba(70,150,255,.25);
}


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

@media(max-width: 900px) {

  .cb-header {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .cb-programs {
    grid-template-columns: 1fr;
  }

  .cb-journey {
    grid-template-columns: 1fr;

    gap: 40px;
  }
}


@media(max-width: 600px) {

  .career-blueprint {
    padding: 85px 0;
  }

  .cb-heading h2 {
    font-size: 44px;

    letter-spacing: -2px;
  }

  .cb-image {
    height: 220px;
  }

  .cb-card-title h3 {
    font-size: 28px;
  }

  .cb-steps {
    grid-template-columns: 1fr 1fr;

    gap: 30px 15px;
  }

  .cb-steps::before {
    display: none;
  }

  .cb-bottom {
    flex-direction: column;

    align-items: flex-start;

    padding: 30px;
  }
}

/* <!--What we do updated--> */

/* =====================================================
   WHAT WE DO SECTION
===================================================== */

.wwd-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
}


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

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

.section-head .eyebrow {
    margin-bottom: 18px;
}

.section-head h2 {
    margin: 0;

    max-width: 720px;

    font-size: clamp(36px, 5vw, 64px);

    line-height: 0.98;

    letter-spacing: -2.5px;
}

.section-intro {
    max-width: 620px;

    margin-top: 24px;

    color: rgba(255,255,255,0.58);

    font-size: 15px;

    line-height: 1.8;
}


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

.wwd-grid {

    display: grid;

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

    gap: 18px;
}


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

.wwd-card {

    position: relative;

    height: 430px;

    overflow: hidden;

    border-radius: 18px;

    background: #11131d;

    border:
        1px solid
        rgba(255,255,255,0.10);

    cursor: pointer;

    isolation: isolate;

    transition:
        transform 0.45s
        cubic-bezier(.2,.8,.2,1),

        box-shadow 0.45s ease,

        border-color 0.45s ease;
}


.wwd-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(255,255,255,0.25);

    box-shadow:
        0 30px 70px
        rgba(0,0,0,0.42);
}


/* =====================================================
   IMAGE
===================================================== */

.wwd-image {

    position: absolute;

    inset: 0;

    overflow: hidden;

    z-index: 1;
}


.wwd-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.8s
        cubic-bezier(.2,.7,.2,1),

        filter 0.6s ease,

        opacity 0.5s ease;
}


.wwd-card:hover
.wwd-image img {

    transform:
        scale(1.09);

    filter:
        brightness(0.55);
}


/* =====================================================
   IMAGE OVERLAY
===================================================== */

.image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.03),
            rgba(0,0,0,0.18) 40%,
            rgba(0,0,0,0.90)
        );

    z-index: 2;

    transition:
        opacity 0.5s ease;
}


/* =====================================================
   NORMAL CONTENT
===================================================== */

.wwd-normal {

    position: absolute;

    left: 28px;

    right: 28px;

    bottom: 28px;

    z-index: 5;

    transition:
        opacity 0.4s ease,

        transform 0.45s ease;
}


.wwd-number {

    margin-bottom: 13px;

    color:
        rgba(255,255,255,0.65);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}


.wwd-normal h3 {

    max-width: 340px;

    margin: 0;

    color: #fff;

    font-size: 29px;

    line-height: 1.05;

    letter-spacing: -1.1px;
}


/* =====================================================
   ARROW
===================================================== */

.wwd-expand {

    position: absolute;

    right: 0;

    bottom: 2px;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,0.30);

    background:
        rgba(0,0,0,0.25);

    color: #fff;

    font-size: 19px;

    cursor: pointer;

    backdrop-filter:
        blur(10px);

    transition:
        transform 0.4s ease,

        background 0.3s ease;
}


.wwd-card:hover
.wwd-expand {

    transform:
        rotate(45deg);

    background:
        rgba(255,255,255,0.15);
}


/* =====================================================
   ACTIVE CONTENT
===================================================== */

.wwd-active {

    position: absolute;

    inset: 0;

    z-index: 10;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 30px;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(25px);

    transition:
        opacity 0.45s ease,

        transform 0.45s ease,

        visibility 0.45s ease;

    color: #fff;
}


/* =====================================================
   ACTIVE STATE
===================================================== */

.wwd-card.is-active
.wwd-active {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


.wwd-card.is-active
.wwd-normal {

    opacity: 0;

    transform:
        translateY(15px);
}


.wwd-card.is-active
.wwd-image img {

    transform:
        scale(1.10);

    opacity: 0.08;

}


.wwd-card.is-active
.image-overlay {

    opacity: 0;
}


/* =====================================================
   CARD COLORS
===================================================== */

/* WEBSITE */

.wwd-card:nth-child(1)
.wwd-active {

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(0,190,255,0.38),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #061d3c,
            #07568a
        );
}


/* MOBILE */

.wwd-card:nth-child(2)
.wwd-active {

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(190,70,255,0.40),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #25104f,
            #59218b
        );
}


/* ECOMMERCE */

.wwd-card:nth-child(3)
.wwd-active {

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,180,40,0.38),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #612d08,
            #ad500b
        );
}


/* SOFTWARE */

.wwd-card:nth-child(4)
.wwd-active {

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(0,240,220,0.35),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #06383f,
            #08777b
        );
}


/* ACADEMIC */

.wwd-card:nth-child(5)
.wwd-active {

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,255,255,0.40),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #e7a900,
            #ffd94b
        );

    color: #171717;
}


/* Academic text */

.wwd-card:nth-child(5)
.wwd-active h3 {

    color: #171717;
}


.wwd-card:nth-child(5)
.wwd-active p {

    color:
        rgba(20,20,20,0.68);
}


/* =====================================================
   ACTIVE TOP
===================================================== */

.active-top {

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.active-top > span {

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2.4px;

    color:
        rgba(255,255,255,0.65);
}


/* Academic */

.wwd-card:nth-child(5)
.active-top > span {

    color:
        rgba(20,20,20,0.60);
}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.wwd-close {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,0.25);

    background:
        rgba(0,0,0,0.15);

    color: #fff;

    font-size: 23px;

    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.3s ease;
}


.wwd-close:hover {

    transform:
        rotate(90deg);
}


/* =====================================================
   ACTIVE MAIN
===================================================== */

.active-content {

    margin-top: auto;

    margin-bottom: auto;
}


.active-content h3 {

    max-width: 360px;

    margin: 0 0 20px;

    color: #fff;

    font-size: 31px;

    line-height: 1.05;

    letter-spacing: -1.2px;
}


.active-content p {

    max-width: 380px;

    margin: 0;

    color:
        rgba(255,255,255,0.60);

    font-size: 12px;

    line-height: 1.8;
}


/* =====================================================
   ACTIVE BOTTOM
===================================================== */

.active-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(255,255,255,0.18);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,0.65);
}


.active-bottom b {

    margin-left: 5px;

    font-size: 14px;

    transition:
        transform 0.3s ease;
}


.wwd-card:hover
.active-bottom b {

    display: inline-block;

    transform:
        translateX(5px);
}


/* =====================================================
   HOW WE WORK CARD
===================================================== */

.wwd-work-card {

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(70,100,255,0.25),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            #0e1020,
            #181b35
        );

    cursor: default;

    display: flex;

    align-items: center;
}


.wwd-work-card:hover {

    transform:
        translateY(-8px);
}


.work-card-content {

    padding: 32px;
}


.work-card-content h3 {

    max-width: 300px;

    margin: 0 0 20px;

    color: #fff;

    font-size: 35px;

    line-height: 1.0;

    letter-spacing: -1.5px;
}


.work-card-content p {

    max-width: 320px;

    margin-bottom: 25px;

    color:
        rgba(255,255,255,0.55);

    font-size: 12px;

    line-height: 1.8;
}


.work-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 13px 18px;

    border:
        1px solid
        rgba(255,255,255,0.20);

    border-radius: 50px;

    color: #fff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.work-button:hover {

    background:
        rgba(255,255,255,0.10);

    transform:
        translateX(4px);
}


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

@media (max-width: 1000px) {

    .wwd-grid {

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

}


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

@media (max-width: 650px) {

    .wwd-section {

        padding: 75px 0;
    }


    .section-head {

        margin-bottom: 35px;
    }


    .section-head h2 {

        font-size: 40px;

        letter-spacing: -1.8px;
    }


    .wwd-grid {

        grid-template-columns:
            1fr;

        gap: 15px;
    }


    .wwd-card {

        height: 390px;

        border-radius: 15px;
    }


    .wwd-normal h3 {

        font-size: 27px;
    }


    .active-content h3 {

        font-size: 29px;
    }


    .wwd-active {

        padding: 25px;
    }

}

/* =========================================
   CARD HOVER EFFECT
========================================= */

.wwd-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;

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


/* CARD LIFT */

.wwd-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(255,255,255,0.25);

    box-shadow:
        0 30px 70px rgba(0,0,0,0.42);
}


/* IMAGE */

.wwd-card:hover .wwd-image img {
    transform: scale(1.10);

    opacity: 0.08;

    filter: brightness(0.55);
}


/* NORMAL CONTENT DISAPPEARS */

.wwd-card:hover .wwd-normal {
    opacity: 0;

    transform:
        translateY(15px);
}


/* ACTIVE CONTENT APPEARS */

.wwd-card:hover .wwd-active {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


/* IMAGE OVERLAY */

.wwd-card:hover .image-overlay {
    opacity: 0;
}


/* ACTIVE CARD ALSO WORKS */

.wwd-card.is-active .wwd-active {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


.wwd-card.is-active .wwd-normal {
    opacity: 0;

    transform:
        translateY(15px);
}


/* ACTIVE IMAGE */

.wwd-card.is-active .wwd-image img {
    transform: scale(1.10);

    opacity: 0.08;
}


/* ACTIVE ARROW */

.wwd-card:hover .wwd-expand {
    transform: rotate(45deg);
}

/* =========================================
   ECOSYSTEM FLOATING ANIMATION
   DOES NOT AFFECT EXISTING ALIGNMENT
   ========================================= */

/* ---------- HOMEPAGE ECOSYSTEM ---------- */

/* Outer orbit */


/* Four ecosystem cards */
.tg-ecosystem .tg-node-1 {
    animation: tgNodeFloat1 4s ease-in-out infinite;
}

.tg-ecosystem .tg-node-2 {
    animation: tgNodeFloat2 5s ease-in-out infinite;
}

.tg-ecosystem .tg-node-3 {
    animation: tgNodeFloat3 4.5s ease-in-out infinite;
}

.tg-ecosystem .tg-node-4 {
    animation: tgNodeFloat4 5.5s ease-in-out infinite;
}


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

.career-ecosystem .orbit-outer {
    animation: careerOrbit 25s linear infinite;
}

.career-ecosystem .orbit-inner {
    animation: careerOrbitReverse 18s linear infinite;
}

.career-ecosystem .ecosystem-center {
    animation: careerCenterFloat 4s ease-in-out infinite;
}

.career-ecosystem .ecosystem-card-1 {
    animation: careerCardFloat1 4s ease-in-out infinite;
}

.career-ecosystem .ecosystem-card-2 {
    animation: careerCardFloat2 5s ease-in-out infinite;
}

.career-ecosystem .ecosystem-card-3 {
    animation: careerCardFloat3 4.5s ease-in-out infinite;
}

.career-ecosystem .ecosystem-card-4 {
    animation: careerCardFloat4 5.5s ease-in-out infinite;
}



/* =========================================
   HOMEPAGE NODES
   ========================================= */

@keyframes tgNodeFloat1 {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -8px;
    }

}

@keyframes tgNodeFloat2 {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 8px;
    }

}

@keyframes tgNodeFloat3 {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 7px;
    }

}

@keyframes tgNodeFloat4 {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -7px;
    }

}


/* =========================================
   CAREERS ORBIT
   ========================================= */

@keyframes careerOrbit {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }

}

@keyframes careerOrbitReverse {

    from {
        rotate: 360deg;
    }

    to {
        rotate: 0deg;
    }

}


/* =========================================
   CAREERS CENTER
   ========================================= */

@keyframes careerCenterFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -10px;
    }

}



/* =========================================
   CAREERS HERO IMAGE
   ========================================= */

.careers-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}





/* Keep overlay above image */

.careers-hero-overlay {
    z-index: 1;
}


/* Keep hero content above everything */

.careers-hero .wrap {
    position: relative;
    z-index: 2;
}


/* Scroll indicator above image */

.careers-hero-scroll {
    position: relative;
    z-index: 3;
}



/*Home page hero image*/

/* =========================================================
   FINAL TECHGALAXY ECOSYSTEM MOBILE OVERRIDE
   ========================================================= */

@media screen and (max-width: 768px) {

    .tg-ecosystem {
        position: relative !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        overflow: hidden !important;
        padding: 70px 16px 60px !important;
        box-sizing: border-box !important;
    }

    .tg-ecosystem .wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* HEADER */

    .tg-eco-header {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 55px !important;
        text-align: center !important;
        z-index: 10 !important;
    }

    .tg-eco-label {
        display: block !important;
        width: 100% !important;
        font-size: 10px !important;
        letter-spacing: 4px !important;
        line-height: 1.6 !important;
        margin-bottom: 25px !important;
        white-space: normal !important;
    }

    .tg-eco-header h2 {
        width: 100% !important;
        margin: 0 auto !important;
        font-size: 48px !important;
        line-height: 1.05 !important;
        letter-spacing: -2px !important;
    }

    .tg-eco-header p {
        width: 100% !important;
        max-width: 390px !important;
        margin: 30px auto 0 !important;
        font-size: 17px !important;
        line-height: 1.65 !important;
        text-align: center !important;
    }


    /* ORBIT CONTAINER */

    .tg-orbit {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }


    /* REMOVE DESKTOP ORBITS */

    .tg-orbit-ring,
    .tg-ring-1,
    .tg-ring-2,
    .tg-pulse {
        display: none !important;
    }


    /* CENTER */

    .tg-core {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 230px !important;
        height: 230px !important;

        margin: 0 auto 75px !important;

        transform: none !important;

        flex-shrink: 0 !important;

        z-index: 5 !important;
    }

    .tg-core-content {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;

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

        width: 100% !important;
        height: 100% !important;

        text-align: center !important;
    }

    .tg-core-content span {
        font-size: 12px !important;
        letter-spacing: 5px !important;
    }

    .tg-core-content strong {
    font-size: 34px !important;
}

    .tg-core-content small {
        font-size: 9px !important;
        letter-spacing: 4px !important;
    }


    /* ALL CARDS */

    .tg-node,
    .tg-node-1,
    .tg-node-2,
    .tg-node-3,
    .tg-node-4 {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        width: 100% !important;
        max-width: 600px !important;

        height: auto !important;
        min-height: 200px !important;

        margin: 0 auto 28px !important;

        padding: 25px 20px !important;

        box-sizing: border-box !important;

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

        column-gap: 18px !important;

        align-items: center !important;

        z-index: 5 !important;
    }


    /* NUMBER */

    .tg-node-number {
        position: absolute !important;

        top: -10px !important;
        right: 18px !important;

        font-size: 13px !important;
    }


    /* ICON */

    .tg-node-icon {
        position: relative !important;

        width: 58px !important;
        height: 58px !important;

        margin: 0 !important;

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

        grid-column: 1 !important;
    }


    /* CONTENT */

    /* .tg-node-content {
        min-width: 0 !important;

        grid-column: 2 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .tg-node-content span {
        display: block !important;

        font-size: 11px !important;
        letter-spacing: 4px !important;

        margin-bottom: 8px !important;
    }

    .tg-node-content h3 {
        font-size: 28px !important;
        line-height: 1.1 !important;

        margin: 0 0 10px !important;
    }

    .tg-node-content p {
        font-size: 15px !important;
        line-height: 1.55 !important;

        margin: 0 !important;
    } */


    /* BOTTOM FLOW */

    .tg-bottom-text {
        width: 100% !important;

        display: flex !important;

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

        flex-wrap: wrap !important;

        gap: 9px !important;

        margin: 20px auto 0 !important;

        font-size: 10px !important;
        letter-spacing: 2px !important;
    }

}


/* SMALL PHONES */

@media screen and (max-width: 480px) {

    .tg-ecosystem {
        padding: 60px 14px 50px !important;
    }

    .tg-eco-header {
        margin-bottom: 45px !important;
    }

    .tg-eco-label {
        font-size: 9px !important;
        letter-spacing: 3px !important;
    }

    .tg-eco-header h2 {
        font-size: 44px !important;
    }

    .tg-eco-header p {
        max-width: 350px !important;
        font-size: 16px !important;
    }

  .tg-core {
    width: 205px !important;
    height: 205px !important;
    margin: 0 auto 45px !important;
}
    .tg-core-content strong {
        font-size: 36px !important;
    }

    .tg-node {
        min-height: 185px !important;

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

        column-gap: 16px !important;

        padding: 22px 18px !important;
    }

    .tg-node-icon {
        width: 54px !important;
        height: 54px !important;
    }

    .tg-node-content h3 {
        font-size: 26px !important;
    }

    .tg-node-content p {
        font-size: 14px !important;
    }
}