/* ==========================================================
   GOOGLE FONTS
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap');


/* ==========================================================
   CSS VARIABLES
========================================================== */

:root {

  /* Brand */

  --primary: #7C3AED;
  --primary-light: #A78BFA;
  --primary-dark: #5B21B6;

  --secondary: #06B6D4;
  --secondary-light: #67E8F9;

  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;


  /* Backgrounds */

  --bg-primary: #030712;
  --bg-secondary: #0F172A;
  --bg-tertiary: #111827;

  --surface: rgba(255, 255, 255, .04);
  --surface-hover: rgba(255, 255, 255, .08);


  /* Text */

  --text-primary: #FFFFFF;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;


  /* Borders */

  --border: rgba(255, 255, 255, .08);
  --border-light: rgba(255, 255, 255, .12);


  /* Gradients */

  --gradient-primary: linear-gradient(135deg,
      var(--primary),
      var(--secondary));

  --gradient-dark: linear-gradient(180deg,
      #030712,
      #0F172A);


  /* Shadows */

  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .15);

  --shadow-md: 0 15px 40px rgba(0, 0, 0, .25);

  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .45);


  /* Radius */

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;


  /* Layout */

  --container: 1320px;

  --header-height: 88px;


  /* Animation */

  --transition: .35s ease;

}



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

*,
*::before,
*::after {

  margin: 0;
  padding: 0;

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  font-family: 'Inter', sans-serif;

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

  color: var(--text-secondary);

  background: var(--bg-primary);

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;

}


img {

  display: block;

  max-width: 100%;

}


a {

  text-decoration: none;

  color: inherit;

}


button {

  border: none;

  background: none;

  cursor: pointer;

  font: inherit;

}


ul {

  list-style: none;

}


input,
textarea,
select {

  font: inherit;

  outline: none;

}



/* ==========================================================
   GLOBAL STYLES
========================================================== */

.container {

  width: min(100% - 48px, var(--container));

  margin-inline: auto;

}


section {

  position: relative;

  padding: 110px 0;

}


h1,
h2,
h3,
h4 {

  color: var(--text-primary);

  font-family: 'Sora', sans-serif;

  line-height: 1.1;

}


h1 {

  font-size: clamp(3rem, 6vw, 5rem);

  font-weight: 800;

  letter-spacing: -.04em;

}


h2 {

  font-size: clamp(2.25rem, 4vw, 3.5rem);

  font-weight: 700;

  letter-spacing: -.03em;

}


h3 {

  font-size: 1.4rem;

  font-weight: 600;

}


p {

  color: var(--text-secondary);

}


.text-gradient {

  background: var(--gradient-primary);

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

  color: transparent;

}



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

.btn {

  display: inline-flex;

  align-items: center;
  justify-content: center;
  gap: .75rem;

  padding: 15px 28px;

  border-radius: var(--radius-full);

  font-weight: 600;

  transition: var(--transition);

  white-space: nowrap;

}


.btn-primary {

  color: #fff;

  background: var(--gradient-primary);

  box-shadow: 0 15px 35px rgba(124, 58, 237, .35);

}


.btn-primary:hover {

  transform: translateY(-3px);

  box-shadow: 0 25px 50px rgba(124, 58, 237, .45);

}


.btn-secondary {

  color: var(--text-primary);

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

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

  backdrop-filter: blur(16px);

}


.btn-secondary:hover {

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

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

}


.btn-sm {

  padding: 12px 22px;

  font-size: .95rem;

}


.btn-lg {

  padding: 18px 34px;

  font-size: 1rem;

}

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

.site-header {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  transition: var(--transition);

  background: transparent;

}


.site-header.scrolled {

  background: rgba(3, 7, 18, .82);

  backdrop-filter: blur(18px);

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

}


.navbar {

  height: var(--header-height);

  display: flex;

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

  gap: 3rem;

}


/* ==========================================================
   LOGO
========================================================== */

.nav-logo {

  display: flex;

  align-items: center;

  gap: .85rem;

  flex-shrink: 0;

}


.nav-logo-icon {

  width: 46px;
  height: 46px;

  border-radius: 14px;

  display: flex;

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

  color: #fff;

  background: var(--gradient-primary);

  box-shadow: 0 15px 35px rgba(124, 58, 237, .35);

  font-size: 1.05rem;

}


.nav-logo-text {

  font-family: 'Sora', sans-serif;

  font-size: 1.35rem;

  font-weight: 700;

  color: var(--text-primary);

}


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

.nav-links {

  display: flex;

  align-items: center;

  gap: .5rem;

  margin-left: auto;

}


.nav-link {

  display: flex;

  align-items: center;

  gap: .45rem;

  padding: .9rem 1rem;

  color: var(--text-secondary);

  font-size: .95rem;

  font-weight: 500;

  border-radius: var(--radius-full);

  transition: var(--transition);

}


.nav-link:hover {

  color: var(--text-primary);

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

}


.nav-link i {

  font-size: .75rem;

  transition: var(--transition);

}


.nav-dropdown-wrapper:hover .nav-link i {

  transform: rotate(180deg);

}


/* ==========================================================
   DROPDOWN
========================================================== */

.nav-dropdown-wrapper {

  position: relative;

}


.nav-dropdown {

  position: absolute;

  top: calc(100% + 18px);

  left: 0;

  width: 340px;

  padding: 1rem;

  border-radius: 22px;

  background: rgba(15, 23, 42, .96);

  backdrop-filter: blur(24px);

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

  box-shadow: var(--shadow-lg);

  opacity: 0;

  visibility: hidden;

  transform: translateY(20px);

  transition: all .35s ease;

}


.nav-dropdown-wrapper:hover .nav-dropdown {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}


.dropdown-item {

  display: flex;

  align-items: center;

  gap: 1rem;

  padding: 1rem;

  border-radius: 16px;

  transition: var(--transition);

}


.dropdown-item:hover {

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

}


.dd-icon {

  width: 52px;
  height: 52px;

  display: flex;

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

  flex-shrink: 0;

  border-radius: 14px;

  color: #fff;

  background: rgba(124, 58, 237, .12);

  font-size: 1.2rem;

}


.dropdown-item strong {

  display: block;

  margin-bottom: .3rem;

  color: var(--text-primary);

  font-size: .95rem;

}


.dropdown-item small {

  display: block;

  color: var(--text-muted);

  line-height: 1.5;

  font-size: .82rem;

}


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

.nav-actions {

  display: flex;

  align-items: center;

  gap: 1rem;

  flex-shrink: 0;

}


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

.nav-mobile-toggle {

  width: 48px;
  height: 48px;

  display: none;

  flex-direction: column;

  justify-content: center;

  gap: 6px;

  border-radius: 14px;

  color: #fff;

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

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

  transition: var(--transition);

}


.nav-mobile-toggle:hover {

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

}


.nav-mobile-toggle span {

  width: 22px;
  height: 2px;

  margin-inline: auto;

  border-radius: 100px;

  background: #fff;

  transition: var(--transition);

}


.nav-mobile-toggle.active span:nth-child(1) {

  transform: translateY(8px) rotate(45deg);

}


.nav-mobile-toggle.active span:nth-child(2) {

  opacity: 0;

}


.nav-mobile-toggle.active span:nth-child(3) {

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

}

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

@media (max-width:992px) {

  .site-header {

    background: rgba(3, 7, 18, .88);

    backdrop-filter: blur(18px);

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

  }


  .navbar {

    height: 80px;

  }


  .nav-mobile-toggle {

    display: flex;

  }


  .nav-actions .btn {

    display: none;

  }


  .nav-links {

    position: fixed;

    top: 80px;
    left: 0;

    width: 100%;
    height: calc(100vh - 80px);

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

    gap: 0;

    padding: 2rem;

    background: var(--bg-primary);

    transform: translateX(100%);

    opacity: 0;
    visibility: hidden;

    transition: .4s ease;

    overflow-y: auto;

  }


  .nav-links.active {

    transform: translateX(0);

    opacity: 1;

    visibility: visible;

  }


  .nav-link {

    width: 100%;

    justify-content: space-between;

    padding: 1.1rem 0;

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

    border-radius: 0;

    font-size: 1rem;

  }


  .nav-dropdown-wrapper {

    width: 100%;

  }


  .nav-dropdown {

    position: static;

    width: 100%;

    margin-top: 1rem;

    padding: 0;

    background: transparent;

    border: none;

    box-shadow: none;

    opacity: 1;

    visibility: visible;

    transform: none;

    display: none;

  }


  .nav-dropdown-wrapper.active .nav-dropdown {

    display: block;

  }


  .dropdown-item {

    padding: 1rem 0 1rem 1rem;

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

    border-radius: 0;

  }


  .dropdown-item:last-child {

    border-bottom: none;

  }


  .dd-icon {

    width: 44px;
    height: 44px;

    border-radius: 12px;

    font-size: 1rem;

  }

}



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

@media (max-width:576px) {

  .container {

    width: min(100% - 28px, var(--container));

  }


  .navbar {

    height: 74px;

  }


  .nav-logo-icon {

    width: 40px;
    height: 40px;

    border-radius: 12px;

  }


  .nav-logo-text {

    font-size: 1.15rem;

  }


  .nav-links {

    top: 74px;

    height: calc(100vh - 74px);

    padding: 1.5rem;

  }


  .nav-link {

    font-size: .95rem;

    padding: 1rem 0;

  }

}

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

.hero {

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  min-height: 100vh;

  padding: 170px 0 120px;

  background: var(--bg-primary);

}


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

.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background:

    radial-gradient(700px circle at 15% 20%,
      rgba(124, 58, 237, .18),
      transparent 70%),

    radial-gradient(650px circle at 90% 75%,
      rgba(6, 182, 212, .14),
      transparent 70%),

    radial-gradient(500px circle at 50% 100%,
      rgba(16, 185, 129, .08),
      transparent 65%);

  pointer-events: none;

}


.hero::after {

  content: "";

  position: absolute;

  inset: 0;

  background:

    linear-gradient(180deg,
      transparent,
      rgba(2, 6, 23, .45));

  pointer-events: none;

}


.hero .container {

  position: relative;

  z-index: 2;

}



/* ==========================================================
   LAYOUT
========================================================== */

.hero-content {

  display: grid;

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

  align-items: center;

  gap: 7rem;

}



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

.hero-left {

  max-width: 690px;

}



/* ==========================================================
   BADGE
========================================================== */

.hero-badge {

  display: inline-flex;

  align-items: center;

  gap: .85rem;

  padding: 12px 20px;

  margin-bottom: 2rem;

  border-radius: 100px;

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

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

  backdrop-filter: blur(18px);

}


.badge-dot {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: var(--success);

  box-shadow: 0 0 18px var(--success);

}



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

.hero-title {

  margin-bottom: 2rem;

  font-family: 'Sora', sans-serif;

  font-size: clamp(4rem, 7vw, 6.7rem);

  font-weight: 700;

  line-height: .95;

  letter-spacing: -.06em;

  color: var(--text-primary);

}


.hero-title .text-gradient {

  display: inline-block;

}



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

.hero-description {

  max-width: 560px;

  margin-bottom: 3rem;

  font-size: 1.15rem;

  line-height: 1.9;

  color: var(--text-secondary);

}



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

.hero-actions {

  display: flex;

  align-items: center;

  gap: 1rem;

  margin-bottom: 3rem;

}



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

.hero-trust {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

}


.trust-item {

  display: flex;

  align-items: center;

  gap: .65rem;

  padding: .85rem 1.2rem;

  border-radius: 999px;

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

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

  color: var(--text-secondary);

  font-size: .9rem;

}


.trust-item i {

  color: var(--primary);

}



/* ==========================================================
   RIGHT SIDE
========================================================== */

.hero-right {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

}

/* ==========================================================
   AI WORKSPACE
========================================================== */

.workspace {

  position: relative;

  width: 100%;

  max-width: 620px;

  min-height: 650px;

  overflow: hidden;

  border-radius: 30px;

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .08),
      rgba(255, 255, 255, .03));

  backdrop-filter: blur(35px);

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

  box-shadow:
    0 40px 90px rgba(0, 0, 0, .45),
    0 0 80px rgba(124, 58, 237, .15);

}



/* subtle glow */

.workspace::before {

  content: "";

  position: absolute;

  inset: 0;

  background:

    radial-gradient(circle at top right,
      rgba(124, 58, 237, .18),
      transparent 45%),

    radial-gradient(circle at bottom left,
      rgba(6, 182, 212, .14),
      transparent 50%);

  pointer-events: none;

}



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

.workspace-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 24px 28px;

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

}



.workspace-dots {

  display: flex;

  gap: .55rem;

}



.workspace-dots span {

  width: 11px;

  height: 11px;

  border-radius: 50%;

}



.workspace-dots span:nth-child(1) {

  background: #ff5f57;

}



.workspace-dots span:nth-child(2) {

  background: #febc2e;

}



.workspace-dots span:nth-child(3) {

  background: #28c840;

}



.workspace-title {

  font-size: .82rem;

  font-weight: 600;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--text-muted);

}



/* ==========================================================
   SIDEBAR
========================================================== */

.workspace-sidebar {

  position: absolute;

  top: 78px;

  left: 0;

  width: 185px;

  height: calc(100% - 78px);

  padding: 22px;

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

}



.sidebar-item {

  display: flex;

  align-items: center;

  gap: .85rem;

  padding: 14px 16px;

  margin-bottom: .75rem;

  border-radius: 14px;

  color: var(--text-secondary);

  cursor: pointer;

  transition: .35s;

}



.sidebar-item i {

  width: 20px;

  text-align: center;

}



.sidebar-item:hover {

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

  color: #fff;

}



.sidebar-item.active {

  background: linear-gradient(135deg,
      rgba(124, 58, 237, .18),
      rgba(6, 182, 212, .12));

  color: #fff;

}



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

.workspace-main {

  margin-left: 185px;

  padding: 30px;

}



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

.workspace-top {

  display: grid;

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

  gap: 16px;

  margin-bottom: 28px;

}



.workspace-card {

  padding: 20px;

  border-radius: 20px;

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

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

  transition: .35s;

}



.workspace-card:hover {

  transform: translateY(-6px);

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

}



.workspace-card span {

  display: block;

  margin-bottom: 10px;

  font-size: .75rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--text-muted);

}



.workspace-card strong {

  display: block;

  font-family: 'Sora', sans-serif;

  font-size: 2rem;

  font-weight: 700;

  color: #fff;

}

/* ==========================================================
   KNOWLEDGE PANEL
========================================================== */

.knowledge-panel {

  margin-bottom: 24px;

  padding: 24px;

  border-radius: 24px;

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

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

}


.panel-header {

  margin-bottom: 22px;

  font-size: .82rem;

  font-weight: 600;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--text-muted);

}



/* ==========================================================
   KNOWLEDGE GRAPH
========================================================== */

.knowledge-grid {

  position: relative;

  display: grid;

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

  gap: 34px;

  align-items: center;

  justify-items: center;

  padding: 35px 10px;

}



/* connecting lines */

.knowledge-grid::before {

  content: "";

  position: absolute;

  inset: 50% 8% auto 8%;

  height: 1px;

  background: linear-gradient(90deg,

      transparent,

      rgba(124, 58, 237, .45),

      rgba(6, 182, 212, .45),

      transparent);

  transform: translateY(-50%);

}



.knowledge-grid::after {

  content: "";

  position: absolute;

  left: 50%;

  top: 8%;

  bottom: 8%;

  width: 1px;

  transform: translateX(-50%);

  background: linear-gradient(transparent,

      rgba(124, 58, 237, .4),

      rgba(6, 182, 212, .4),

      transparent);

}



/* ==========================================================
   GRAPH NODES
========================================================== */

.knowledge-grid span {

  position: relative;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: linear-gradient(135deg,

      var(--primary),

      var(--secondary));

  box-shadow:

    0 0 25px rgba(124, 58, 237, .55),

    0 0 55px rgba(6, 182, 212, .25);

  animation: knowledgePulse 3.5s ease-in-out infinite;

  z-index: 2;

}



.knowledge-grid span:nth-child(2) {

  animation-delay: .4s;

}

.knowledge-grid span:nth-child(3) {

  animation-delay: .8s;

}

.knowledge-grid span:nth-child(4) {

  animation-delay: 1.2s;

}

.knowledge-grid span:nth-child(5) {

  animation-delay: 1.6s;

}

.knowledge-grid span:nth-child(6) {

  animation-delay: 2s;

}

.knowledge-grid span:nth-child(7) {

  animation-delay: 2.4s;

}

.knowledge-grid span:nth-child(8) {

  animation-delay: 2.8s;

}



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

.activity-panel {

  padding: 24px;

  border-radius: 24px;

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

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

}



.activity-item {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 14px 0;

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

}



.activity-item:last-child {

  border-bottom: none;

}



.activity-item i {

  width: 34px;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: #fff;

  background: linear-gradient(135deg,

      var(--primary),

      var(--secondary));

  flex-shrink: 0;

}



.activity-item {

  color: var(--text-secondary);

  font-size: .92rem;

}



/* ==========================================================
   FLOATING CARDS
========================================================== */

.floating-card {

  position: absolute;

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 18px 20px;

  min-width: 220px;

  border-radius: 22px;

  background:

    linear-gradient(180deg,

      rgba(255, 255, 255, .08),

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

  backdrop-filter: blur(28px);

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

  box-shadow:

    0 20px 45px rgba(0, 0, 0, .35);

  animation: floatCard 6s ease-in-out infinite;

}



.floating-card i {

  width: 52px;

  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 16px;

  color: #fff;

  background: linear-gradient(135deg,

      var(--primary),

      var(--secondary));

  font-size: 1.1rem;

}



.floating-card span {

  display: block;

  margin-bottom: 6px;

  font-size: .78rem;

  text-transform: uppercase;

  letter-spacing: .08em;

  color: var(--text-muted);

}



.floating-card strong {

  display: block;

  font-family: 'Sora', sans-serif;

  font-size: 1.25rem;

  color: #fff;

}



.floating-card-one {

  top: 70px;

  left: -60px;

}



.floating-card-two {

  right: -60px;

  bottom: 50px;

  animation-delay: 3s;

}



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

@keyframes knowledgePulse {

  0%,
  100% {

    transform: scale(1);

    opacity: 1;

  }

  50% {

    transform: scale(1.45);

    opacity: .75;

  }

}



@keyframes floatCard {

  0%,
  100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-14px);

  }

}

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

.hero-scroll {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  margin-top: 80px;

  color: var(--text-muted);

  font-size: .85rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  animation: scrollFloat 2.8s ease-in-out infinite;

}


.hero-scroll i {

  font-size: 1rem;

  color: var(--primary);

}



/* ==========================================================
   HERO ENTRANCE ANIMATIONS
========================================================== */

.hero-badge {

  animation: fadeUp .8s ease both;

}

.hero-title {

  animation: fadeUp .9s ease .15s both;

}

.hero-description {

  animation: fadeUp .9s ease .3s both;

}

.hero-actions {

  animation: fadeUp .9s ease .45s both;

}

.hero-trust {

  animation: fadeUp .9s ease .6s both;

}

.workspace {

  animation: slideLeft 1.1s ease .25s both;

}

.floating-card {

  animation:
    fadeScale .8s ease both,
    floatCard 6s ease-in-out infinite;

}



/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(45px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes slideLeft {

  from {

    opacity: 0;

    transform: translateX(80px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes fadeScale {

  from {

    opacity: 0;

    transform: scale(.85);

  }

  to {

    opacity: 1;

    transform: scale(1);

  }

}



@keyframes scrollFloat {

  0%,
  100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(8px);

  }

}



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

@media (max-width:1200px) {

  .hero-content {

    gap: 5rem;

  }

  .workspace {

    max-width: 560px;

  }

}



@media (max-width:1024px) {

  .hero {

    padding: 150px 0 90px;

    min-height: auto;

  }

  .hero-content {

    grid-template-columns: 1fr;

    gap: 5rem;

  }

  .hero-left {

    max-width: 100%;

    text-align: center;

  }

  .hero-description {

    margin-left: auto;

    margin-right: auto;

  }

  .hero-actions {

    justify-content: center;

  }

  .hero-trust {

    justify-content: center;

  }

  .hero-right {

    width: 100%;

  }

  .workspace {

    max-width: 720px;

    margin: 0 auto;

  }

}



@media (max-width:768px) {

  .hero {

    padding: 130px 0 70px;

  }

  .hero-title {

    font-size: clamp(3rem, 12vw, 4.5rem);

  }

  .hero-actions {

    flex-direction: column;

    align-items: stretch;

  }

  .hero-actions .btn {

    width: 100%;

  }

  .hero-trust {

    flex-direction: column;

    align-items: stretch;

  }

  .trust-item {

    justify-content: center;

  }

  .workspace {

    min-height: auto;

  }

  .workspace-sidebar {

    display: none;

  }

  .workspace-main {

    margin-left: 0;

    padding: 24px;

  }

  .workspace-top {

    grid-template-columns: 1fr;

  }

  .floating-card {

    display: none;

  }

  .knowledge-grid {

    gap: 22px;

  }

  .hero-scroll {

    display: none;

  }

}



@media (max-width:576px) {

  .hero {

    padding: 120px 0 60px;

  }

  .hero-badge {

    width: 100%;

    justify-content: center;

    text-align: center;

  }

  .workspace {

    border-radius: 22px;

  }

  .workspace-header {

    padding: 18px 20px;

  }

  .workspace-main {

    padding: 20px;

  }

  .knowledge-panel,

  .activity-panel {

    padding: 18px;

  }

}

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

.integrations {

  position: relative;

  padding: 90px 0;

  overflow: hidden;

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

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

  background:

    radial-gradient(circle at center,
      rgba(124, 58, 237, .08),
      transparent 55%),

    var(--bg-secondary);

}


.section-heading {

  max-width: 760px;

  margin: 0 auto 4rem;

  text-align: center;

}


.section-tag {

  display: inline-flex;

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

  padding: .65rem 1.2rem;

  margin-bottom: 1.25rem;

  border-radius: var(--radius-full);

  background: rgba(124, 58, 237, .10);

  border: 1px solid rgba(124, 58, 237, .20);

  color: var(--primary-light);

  font-size: .85rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: .08em;

}


.section-heading h2 {

  margin-bottom: 1.25rem;

}


.section-heading p {

  max-width: 620px;

  margin: 0 auto;

  font-size: 1.05rem;

  line-height: 1.8;

}



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

.integration-marquee {

  position: relative;

  overflow: hidden;

  mask-image: linear-gradient(to right,
      transparent,
      #000 8%,
      #000 92%,
      transparent);

  -webkit-mask-image: linear-gradient(to right,
      transparent,
      #000 8%,
      #000 92%,
      transparent);

}


.marquee-track {

  display: flex;

  align-items: center;

  gap: 1.25rem;

  width: max-content;

  animation: marquee 35s linear infinite;

}


.integration-marquee:hover .marquee-track {

  animation-play-state: paused;

}



/* ==========================================================
   INTEGRATION CARD
========================================================== */

.integration-item {

  display: flex;

  align-items: center;

  gap: .85rem;

  flex-shrink: 0;

  padding: 1rem 1.5rem;

  border-radius: 18px;

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

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

  backdrop-filter: blur(18px);

  transition: var(--transition);

}


.integration-item:hover {

  transform: translateY(-5px);

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

  border-color: rgba(124, 58, 237, .35);

}


.integration-item i {

  font-size: 1.35rem;

  color: var(--primary-light);

}


.integration-item span {

  color: var(--text-primary);

  font-weight: 600;

  white-space: nowrap;

}



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

@keyframes marquee {

  from {

    transform: translateX(0);

  }

  to {

    transform: translateX(-50%);

  }

}



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

@media (max-width:768px) {

  .integrations {

    padding: 70px 0;

  }

  .section-heading {

    margin-bottom: 3rem;

  }

  .section-heading p {

    font-size: 1rem;

  }

  .integration-item {

    padding: .9rem 1.25rem;

  }

  .integration-item span {

    font-size: .9rem;

  }

}

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

.site-footer {

  position: relative;

  overflow: hidden;

  padding: 90px 0 35px;

  background: var(--bg-primary);

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

}


.site-footer::before {

  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  transform: translateX(-50%);

  width: 900px;
  height: 300px;

  background: radial-gradient(circle,
      rgba(124, 58, 237, .12),
      transparent 70%);

  pointer-events: none;

}



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

.footer-top {

  position: relative;

  z-index: 2;

  display: grid;

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

  gap: 4rem;

  padding-bottom: 4rem;

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

}



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

.footer-brand {

  max-width: 360px;

}


.footer-logo {

  display: inline-flex;

  align-items: center;

  gap: .85rem;

  margin-bottom: 1.5rem;

}


.footer-logo-icon {

  width: 46px;
  height: 46px;

  display: flex;

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

  border-radius: 14px;

  color: #fff;

  background: var(--gradient-primary);

  box-shadow: 0 15px 35px rgba(124, 58, 237, .30);

}


.footer-logo span:last-child {

  font-family: 'Sora', sans-serif;

  font-size: 1.4rem;

  font-weight: 700;

  color: var(--text-primary);

}


.footer-brand p {

  margin-bottom: 2rem;

  line-height: 1.8;

}



/* ==========================================================
   SOCIAL
========================================================== */

.footer-social {

  display: flex;

  align-items: center;

  gap: .85rem;

}


.footer-social a {

  width: 44px;
  height: 44px;

  display: flex;

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

  border-radius: 50%;

  color: var(--text-secondary);

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

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

  transition: var(--transition);

}


.footer-social a:hover {

  color: #fff;

  background: var(--primary);

  border-color: var(--primary);

  transform: translateY(-4px);

}



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

.footer-column h3 {

  margin-bottom: 1.4rem;

  font-size: 1rem;

  color: var(--text-primary);

}


.footer-column ul {

  display: flex;

  flex-direction: column;

  gap: .9rem;

}


.footer-column a {

  color: var(--text-muted);

  transition: var(--transition);

}


.footer-column a:hover {

  color: var(--text-primary);

  padding-left: 6px;

}



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

.footer-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 2rem;

  padding-top: 2rem;

}


.footer-bottom p {

  color: var(--text-muted);

  font-size: .9rem;

}


.footer-bottom-links {

  display: flex;

  align-items: center;

  gap: 2rem;

}


.footer-bottom-links a {

  color: var(--text-muted);

  font-size: .9rem;

  transition: var(--transition);

}


.footer-bottom-links a:hover {

  color: var(--text-primary);

}



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

@media (max-width:1100px) {

  .footer-top {

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

    gap: 3rem;

  }

  .footer-brand {

    grid-column: 1 / -1;

    max-width: 100%;

  }

}


@media (max-width:768px) {

  .site-footer {

    padding: 70px 0 30px;

  }

  .footer-top {

    grid-template-columns: 1fr;

    gap: 2.75rem;

  }

  .footer-bottom {

    flex-direction: column;

    align-items: flex-start;

  }

  .footer-bottom-links {

    flex-wrap: wrap;

    gap: 1.25rem;

  }

}


@media (max-width:576px) {

  .footer-social {

    flex-wrap: wrap;

  }

  .footer-bottom {

    text-align: left;

  }

}


/* ==========================================================
   SOLUTIONS
========================================================== */

.solutions {

  padding: 140px 0;

  position: relative;

}



.section-heading {

  max-width: 760px;

  margin: 0 auto 80px;

  text-align: center;

}



.section-tag {

  display: inline-flex;

  align-items: center;

  padding: 10px 18px;

  border-radius: 100px;

  margin-bottom: 22px;

  background: rgba(124, 58, 237, .08);

  color: var(--primary);

  font-weight: 600;

}



.section-heading h2 {

  margin-bottom: 22px;

}



.section-heading p {

  max-width: 620px;

  margin: auto;

}



.solutions-grid {

  display: grid;

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

  gap: 30px;

}



.solution-card {

  position: relative;

  overflow: hidden;

  padding: 40px;

  border-radius: 28px;

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

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

  transition: .45s;

}



.solution-card:hover {

  transform: translateY(-10px);

  border-color: rgba(124, 58, 237, .4);

  box-shadow: 0 30px 60px rgba(124, 58, 237, .15);

}



.solution-icon {

  width: 72px;

  height: 72px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 22px;

  margin-bottom: 28px;

  background: linear-gradient(135deg,
      var(--primary),
      var(--secondary));

  color: #fff;

  font-size: 1.7rem;

}



.solution-card h3 {

  margin-bottom: 16px;

}



.solution-card p {

  margin-bottom: 28px;

}



.solution-card a {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--primary);

  font-weight: 600;

}



.solution-card:hover .solution-icon {

  transform: rotate(-8deg) scale(1.05);

}



@media(max-width:900px) {

  .solutions-grid {

    grid-template-columns: 1fr;

  }

}

/* ==========================================================
   PLATFORM
========================================================== */

.platform {

  padding: 140px 0;

}

.platform-grid {

  display: grid;

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

  gap: 80px;

  align-items: center;

}

.platform-window {

  border-radius: 30px;

  overflow: hidden;

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

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

  box-shadow: var(--shadow-lg);

}

.window-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 18px 24px;

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

}

.window-dots {

  display: flex;

  gap: 8px;

}

.window-dots span {

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #666;

}

.platform-body {

  display: flex;

  min-height: 480px;

}

.platform-sidebar {

  width: 220px;

  padding: 25px;

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

}

.sidebar-item {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px;

  margin-bottom: 12px;

  border-radius: 14px;

  transition: .3s;

}

.sidebar-item.active {

  background: rgba(124, 58, 237, .12);

  color: var(--primary);

}

.platform-content {

  flex: 1;

  padding: 25px;

}

.platform-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin: 20px 0;

}

.platform-card {

  height: 130px;

  border-radius: 20px;

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

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

}

.platform-card.large {

  height: 180px;

}

.platform-features {

  margin: 40px 0;

}

.platform-feature {

  display: flex;

  gap: 18px;

  margin-bottom: 28px;

}

.platform-feature i {

  width: 46px;

  height: 46px;

  border-radius: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  background: var(--gradient-primary);

}

@media(max-width:1000px) {

  .platform-grid {

    grid-template-columns: 1fr;

  }

}

/* ==========================================================
   PLATFORM SHOWCASE
========================================================== */

.platform-showcase {

  padding: 150px 0;

}

.platform-showcase-grid {

  display: grid;

  grid-template-columns: 1.05fr .95fr;

  gap: 90px;

  align-items: center;

}

.platform-image {

  position: relative;

}

.platform-image img {

  width: 100%;

  display: block;

  border-radius: 32px;

  box-shadow: var(--shadow-lg);

}

.image-card {

  position: absolute;

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 18px 22px;

  border-radius: 20px;

  background: rgba(12, 18, 30, .75);

  backdrop-filter: blur(20px);

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

  box-shadow: var(--shadow-md);

}

.image-card i {

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 14px;

  background: var(--gradient-primary);

  color: #fff;

}

.card-one {

  top: 40px;

  left: -30px;

}

.card-two {

  right: -25px;

  bottom: 50px;

}

.platform-content h2 {

  margin: 20px 0;

}

.platform-list {

  margin: 40px 0;

  display: flex;

  flex-direction: column;

  gap: 28px;

}

.platform-item {

  display: flex;

  gap: 18px;

}

.platform-item i {

  color: var(--success);

  font-size: 1.3rem;

  margin-top: 4px;

}

.platform-item h4 {

  margin-bottom: 8px;

}

@media(max-width:1000px) {

  .platform-showcase-grid {

    grid-template-columns: 1fr;

  }

  .platform-image {

    order: 2;

  }

  .platform-content {

    order: 1;

  }

  .card-one,
  .card-two {

    display: none;

  }

}

/* ==========================================================
   CTA
========================================================== */

.cta-section {

  padding: 160px 0;

}

.cta-box {

  position: relative;

  overflow: hidden;

  text-align: center;

  padding: 90px 70px;

  border-radius: 40px;

  background: linear-gradient(135deg, #071321, #0b1627);

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

}

.cta-background {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(circle at 20% 20%,
      rgba(16, 185, 129, .20),
      transparent 35%),

    radial-gradient(circle at 80% 80%,
      rgba(59, 130, 246, .18),
      transparent 40%),

    radial-gradient(circle at center,
      rgba(124, 58, 237, .12),
      transparent 55%);

  pointer-events: none;

}

.cta-box>* {

  position: relative;

  z-index: 2;

}

.cta-box h2 {

  max-width: 760px;

  margin: 25px auto;

}

.cta-box p {

  max-width: 720px;

  margin: 0 auto;

  font-size: 1.1rem;

}

.cta-buttons {

  display: flex;

  justify-content: center;

  gap: 20px;

  margin-top: 45px;

  flex-wrap: wrap;

}

@media(max-width:768px) {

  .cta-box {

    padding: 60px 30px;

  }

  .cta-buttons {

    flex-direction: column;

  }

  .cta-buttons .btn {

    width: 100%;

  }

}

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

.products-hero {

  padding: 145px 0 70px;

  position: relative;

  overflow: hidden;

}

.products-hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background:

    radial-gradient(circle at top right,
      rgba(16, 185, 129, .08),
      transparent 35%),

    radial-gradient(circle at bottom left,
      rgba(59, 130, 246, .06),
      transparent 40%);

  pointer-events: none;

}

.products-hero .container {

  position: relative;

  z-index: 2;

}

.products-hero-content {

  display: grid;

  grid-template-columns: 1fr 520px;

  gap: 70px;

  align-items: center;

}

.page-label {

  display: inline-block;

  margin-bottom: 18px;

  font-size: .78rem;

  font-weight: 700;

  letter-spacing: .35em;

  color: var(--primary);

}

.products-hero-text h1 {

  max-width: 620px;

  margin-bottom: 25px;

}

.products-hero-text p {

  max-width: 580px;

  font-size: 1.05rem;

  line-height: 1.9;

}

.products-hero-image {

  display: flex;

  justify-content: flex-end;

}

.products-hero-image img {

  width: 100%;

  max-width: 520px;

  display: block;

}

/*================================*/

@media(max-width:1000px) {

  .products-hero-content {

    grid-template-columns: 1fr;

    gap: 50px;

    text-align: center;

  }

  .products-hero-text h1,

  .products-hero-text p {

    margin-left: auto;

    margin-right: auto;

  }

  .products-hero-image {

    justify-content: center;

  }

}

@media(max-width:768px) {

  .products-hero {

    padding: 120px 0 50px;

  }

  .products-hero-image img {

    max-width: 100%;

  }

}


/* ==========================================================
   PRODUCT NAVIGATOR
========================================================== */

.product-navigator {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  background: var(--bg-primary);
}

.product-navigator::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right,
      rgba(6, 182, 212, .08),
      transparent 35%),

    radial-gradient(circle at bottom left,
      rgba(16, 185, 129, .08),
      transparent 40%);
  pointer-events: none;
}

.navigator-grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 5rem;
  align-items: start;
}

/* ========================================= */

.navigator-content {
  position: sticky;
  top: 130px;
}

.navigator-content h2 {
  margin: 20px 0;
  max-width: 360px;
}

.navigator-content p {
  margin-bottom: 35px;
  line-height: 1.9;
  color: var(--text-secondary);
}

/* ========================================= */

.navigator-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ========================================= */

.navigator-card {

  position: relative;

  display: flex;
  flex-direction: column;

  padding: 35px;

  border-radius: 28px;

  text-decoration: none;

  overflow: hidden;

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

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

  backdrop-filter: blur(18px);

  transition: all .45s ease;

}

.navigator-card::before {

  content: "";

  position: absolute;
  inset: 0;

  opacity: 0;

  transition: .45s;

  background:

    radial-gradient(circle at top right,
      rgba(6, 181, 212, 0.97),
      transparent 45%),

    radial-gradient(circle at bottom left,
      rgba(16, 185, 129, 0.97),
      transparent 45%);

}

.navigator-card:hover {

  transform: translateY(-10px);

  border-color: rgba(6, 182, 212, .25);

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

}

.navigator-card:hover::before {
  opacity: 1;
}

/* ========================================= */

.navigator-icon {

  width: 68px;
  height: 68px;

  border-radius: 20px;

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

  margin-bottom: 28px;

  background: linear-gradient(135deg,
      rgba(16, 185, 129, .15),
      rgba(6, 182, 212, .15));

  color: var(--accent);

  font-size: 1.5rem;

}

.navigator-card h3 {

  margin-bottom: 14px;

  color: var(--text-primary);

}

.navigator-card p {

  color: var(--text-secondary);

  line-height: 1.8;

  margin-bottom: 32px;

  flex: 1;

}

.navigator-card span {

  display: flex;

  align-items: center;

  gap: 10px;

  font-weight: 600;

  color: var(--accent);

  transition: .3s;

}

.navigator-card:hover span {

  gap: 18px;

}

/* ========================================= */

@media(max-width:1100px) {

  .navigator-grid {

    grid-template-columns: 1fr;

    gap: 60px;

  }

  .navigator-content {

    position: static;

  }

}

@media(max-width:768px) {

  .product-navigator {

    padding: 90px 0;

  }

  .navigator-cards {

    grid-template-columns: 1fr;

  }

  .navigator-card {

    padding: 28px;

  }

}


/* ==========================================================
   SMARTTRAIN
========================================================== */

.smarttrain-section {

  padding: 140px 0;

  background: var(--bg-secondary);

}

.smarttrain-header {

  max-width: 760px;

  margin: 0 auto 70px;

  text-align: center;

}

.smarttrain-header h2 {

  margin-bottom: 22px;

}

.smarttrain-header p {

  color: var(--text-secondary);

  line-height: 1.9;

  font-size: 1.05rem;

}

.smarttrain-image {

  margin-bottom: 70px;

  border-radius: 32px;

  overflow: hidden;

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

  box-shadow: var(--shadow-lg);

  transform: translateY(60px);

  opacity: 0;

  transition: 1s ease;

}

.smarttrain-image.show {

  opacity: 1;

  transform: none;

}

.smarttrain-image img {

  width: 100%;

  display: block;

}

.smarttrain-features {

  display: grid;

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

  gap: 28px;

}

.training-card {

  padding: 35px;

  border-radius: 24px;

  background: var(--bg-card);

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

  transition: .35s ease;

}

.training-card:hover {

  transform: translateY(-10px);

  border-color: rgba(6, 182, 212, .25);

}

.training-icon {

  width: 62px;

  height: 62px;

  margin-bottom: 24px;

  border-radius: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(6, 182, 212, .08);

  color: var(--accent);

  font-size: 1.4rem;

}

.training-card h3 {

  margin-bottom: 14px;

}

.training-card p {

  color: var(--text-secondary);

  line-height: 1.8;

}

.smarttrain-action {

  margin-top: 70px;

  text-align: center;

}

@media(max-width:1100px) {

  .smarttrain-features {

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

  }

}

@media(max-width:768px) {

  .smarttrain-section {

    padding: 90px 0;

  }

  .smarttrain-header {

    margin-bottom: 50px;

  }

  .smarttrain-image {

    margin-bottom: 50px;

  }

  .smarttrain-features {

    grid-template-columns: 1fr;

  }

}

/* ==========================================================
   AR VISION AI
========================================================== */

.product-section {

  padding: 140px 0;

  position: relative;

}

.product-layout {

  display: grid;

  grid-template-columns: 1fr 1.05fr;

  gap: 90px;

  align-items: center;

}

.product-label {

  display: inline-flex;

  align-items: center;

  padding: 8px 18px;

  margin-bottom: 22px;

  border-radius: 100px;

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

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

  color: var(--accent);

  font-size: .78rem;

  letter-spacing: .18em;

  font-weight: 700;

}

.product-description {

  max-width: 620px;

  margin: 28px 0 45px;

  color: var(--text-secondary);

  line-height: 1.9;

  font-size: 1.06rem;

}

.product-feature-grid {

  display: grid;

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

  gap: 22px;

  margin-bottom: 50px;

}

.product-feature {

  display: flex;

  gap: 18px;

  padding: 24px;

  border-radius: 22px;

  background: var(--bg-card);

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

  transition: .35s;

}

.product-feature:hover {

  transform: translateY(-8px);

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

}

.product-feature i {

  width: 56px;

  height: 56px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 16px;

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

  color: var(--accent);

  font-size: 1.2rem;

}

.product-feature h4 {

  margin-bottom: 8px;

  font-size: 1rem;

}

.product-feature p {

  color: var(--text-secondary);

  line-height: 1.7;

  font-size: .94rem;

}

.product-image {

  border-radius: 30px;

  overflow: hidden;

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

  box-shadow: var(--shadow-lg);

  transform: translateY(80px);

  opacity: 0;

  transition: 1s ease;

}

.product-image.show {

  transform: none;

  opacity: 1;

}

.product-image img {

  width: 100%;

  display: block;

}

@media(max-width:1100px) {

  .product-layout {

    grid-template-columns: 1fr;

    gap: 60px;

  }

}

@media(max-width:768px) {

  .product-section {

    padding: 90px 0;

  }

  .product-feature-grid {

    grid-template-columns: 1fr;

  }

}

/* ==========================================================
   ANALYTICS ENGINE
========================================================== */

.analytics-section {

  padding: 140px 0;

  background: var(--bg-secondary);

}

.analytics-grid {

  display: grid;

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

  gap: 90px;

  align-items: center;

}

.analytics-image {

  overflow: hidden;

  border-radius: 28px;

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

  box-shadow: var(--shadow-lg);

}

.analytics-image img {

  width: 100%;

  display: block;

}

.section-number {

  display: block;

  margin-bottom: 18px;

  font-size: 5rem;

  font-weight: 700;

  font-family: "Sora", sans-serif;

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

  line-height: 1;

}

.analytics-content p {

  margin: 28px 0 40px;

  color: var(--text-secondary);

  line-height: 1.9;

}

.analytics-list {

  display: flex;

  flex-direction: column;

  gap: 28px;

}

.analytics-item {

  display: flex;

  gap: 20px;

}

.analytics-icon {

  width: 62px;

  height: 62px;

  border-radius: 18px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

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

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

  color: var(--accent);

  font-size: 1.2rem;

}

.analytics-item h4 {

  margin-bottom: 8px;

}

.analytics-item p {

  margin: 0;

  font-size: .95rem;

}

.analytics-metrics {

  display: grid;

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

  gap: 20px;

  margin-top: 60px;

  padding-top: 35px;

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

}

.analytics-metrics strong {

  display: block;

  margin-bottom: 8px;

  font-size: 2rem;

  font-family: "Sora", sans-serif;

}

.analytics-metrics span {

  color: var(--text-secondary);

  font-size: .9rem;

}

@media(max-width:1100px) {

  .analytics-grid {

    grid-template-columns: 1fr;

  }

}

@media(max-width:768px) {

  .analytics-section {

    padding: 90px 0;

  }

  .analytics-metrics {

    grid-template-columns: 1fr;

  }

}

/* ==========================================================
   HOLLOMIND STUDIO
========================================================== */

.studio-section {

  padding: 140px 0;

  background: var(--bg-primary);

}

.studio-header {

  max-width: 760px;

  margin: 0 auto 70px;

  text-align: center;

}

.studio-header p {

  margin-top: 24px;

  color: var(--text-secondary);

}

.studio-layout {

  display: grid;

  grid-template-columns: 1.05fr .95fr;

  gap: 70px;

  align-items: center;

}

.studio-left {

  border-radius: 28px;

  overflow: hidden;

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

  box-shadow: var(--shadow-lg);

}

.studio-left img {

  display: block;

  width: 100%;

}

.studio-right {

  display: grid;

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

  gap: 24px;

}

.studio-card {

  padding: 34px;

  border-radius: 24px;

  background: var(--bg-card);

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

  transition: .35s;

}

.studio-card:hover {

  transform: translateY(-8px);

}

.studio-card i {

  font-size: 1.5rem;

  color: var(--accent);

  margin-bottom: 24px;

}

.studio-card h3 {

  margin-bottom: 14px;

}

.studio-card p {

  color: var(--text-secondary);

  line-height: 1.8;

}

@media(max-width:1100px) {

  .studio-layout {

    grid-template-columns: 1fr;

  }

}

@media(max-width:768px) {

  .studio-section {

    padding: 90px 0;

  }

  .studio-right {

    grid-template-columns: 1fr;

  }

}

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

.integrations-section {

  padding: 140px 0;

  background: var(--bg-secondary);

}

.integration-grid {

  display: grid;

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

  gap: 30px;

  margin-top: 70px;

}

.integration-card {

  padding: 38px;

  border-radius: 24px;

  background: var(--bg-card);

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

  transition: .35s ease;

}

.integration-card:hover {

  transform: translateY(-8px);

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

}

.integration-card i {

  font-size: 2rem;

  color: var(--accent);

  margin-bottom: 26px;

}

.integration-card h3 {

  margin-bottom: 16px;

}

.integration-card p {

  color: var(--text-secondary);

  line-height: 1.9;

}

.integration-banner {

  margin-top: 80px;

  display: grid;

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

  gap: 25px;

}

.integration-banner div {

  padding: 30px;

  text-align: center;

  border-radius: 22px;

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

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

}

.integration-banner small {

  display: block;

  margin-bottom: 10px;

  font-family: "Sora", sans-serif;

  font-size: 2.2rem;

  font-weight: 700;

  color: var(--text-primary);

}

.integration-banner span {

  color: var(--text-secondary);

}

@media(max-width:1100px) {

  .integration-grid {

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

  }

}

@media(max-width:768px) {

  .integrations-section {

    padding: 90px 0;

  }

  .integration-grid {

    grid-template-columns: 1fr;

  }

  .integration-banner {

    grid-template-columns: 1fr;

  }

}

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

.platform-hero {

  padding: 170px 0 90px;

  background: var(--bg-primary);

  position: relative;

  overflow: hidden;

}

.platform-hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(circle at top left, rgba(16, 185, 129, .08), transparent 35%),
    radial-gradient(circle at bottom right, rgba(59, 130, 246, .08), transparent 35%);

}

.platform-hero .container {

  position: relative;

  z-index: 2;

}

.platform-hero-content {

  max-width: 760px;

  margin: 0 auto;

  text-align: center;

}

.platform-hero-content p {

  max-width: 650px;

  margin: 30px auto 40px;

}

.platform-hero-actions {

  display: flex;

  justify-content: center;

  gap: 18px;

  flex-wrap: wrap;

}

.platform-overview {

  position: relative;

  width: 720px;

  height: 520px;

  margin: 90px auto 0;

}

.platform-overview::before {

  content: "";

  position: absolute;

  inset: 90px;

  border: 1px dashed rgba(255, 255, 255, .08);

  border-radius: 50%;

}

.platform-overview::after {

  content: "";

  position: absolute;

  inset: 170px;

  border: 1px dashed rgba(255, 255, 255, .05);

  border-radius: 50%;

}

.platform-node {

  position: absolute;

  width: 160px;

  height: 160px;

  background: var(--bg-card);

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

  border-radius: 28px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 12px;

  transition: .35s;

}

.platform-node:hover {

  transform: translateY(-8px);

}

.platform-node i {

  font-size: 1.8rem;

  color: var(--accent);

}

.platform-node span {

  color: var(--text-secondary);

  font-size: .9rem;

}

.platform-node-center {

  left: 50%;

  top: 50%;

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

  width: 190px;

  height: 190px;

}

.platform-node-center:hover {

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

}

.platform-node.top {

  left: 50%;

  top: 0;

  transform: translateX(-50%);

}

.platform-node.right {

  right: 0;

  top: 50%;

  transform: translateY(-50%);

}

.platform-node.left {

  left: 0;

  top: 50%;

  transform: translateY(-50%);

}

.platform-node.bottom-right {

  right: 70px;

  bottom: 0;

}

.platform-node.bottom-left {

  left: 70px;

  bottom: 0;

}

@media(max-width:991px) {

  .platform-overview {

    display: none;

  }

  .platform-hero {

    padding: 150px 0 80px;

  }

}

/* ==========================================================
   PLATFORM OVERVIEW
========================================================== */

.platform-overview-section {

  padding: 140px 0;

  background: var(--bg-secondary);

}

.platform-grid {

  display: grid;

  grid-template-columns: 1.05fr .95fr;

  gap: 80px;

  align-items: center;

}

.platform-image {

  overflow: hidden;

  border-radius: 28px;

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

  box-shadow: var(--shadow-lg);

}

.platform-image img {

  display: block;

  width: 100%;

}

.platform-content p {

  margin: 28px 0 40px;

  color: var(--text-secondary);

  line-height: 1.9;

}

.platform-features {

  display: flex;

  flex-direction: column;

  gap: 28px;

}

.platform-feature {

  display: flex;

  gap: 20px;

}

.platform-feature i {

  width: 60px;

  height: 60px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 18px;

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

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

  color: var(--accent);

  font-size: 1.2rem;

  flex-shrink: 0;

}

.platform-feature h4 {

  margin-bottom: 8px;

}

.platform-feature p {

  margin: 0;

  font-size: .95rem;

}

@media(max-width:1100px) {

  .platform-grid {

    grid-template-columns: 1fr;

  }

}

@media(max-width:768px) {

  .platform-overview-section {

    padding: 90px 0;

  }

}

/* ==========================================================
   HOW IT WORKS HERO
========================================================== */

.how-hero {

  position: relative;

  padding: 170px 0 90px;

  overflow: hidden;

  background:
    radial-gradient(circle at top left,
      rgba(16, 185, 129, .08),
      transparent 35%),

    radial-gradient(circle at bottom right,
      rgba(59, 130, 246, .08),
      transparent 35%),

    var(--bg-primary);

}

.how-hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);

  background-size: 80px 80px;

  opacity: .18;

}

.how-hero .container {

  position: relative;

  z-index: 2;

}

.how-hero-content {

  max-width: 760px;

  margin: 0 auto;

  text-align: center;

}

.how-hero-content h1 {

  margin: 24px 0;

}

.how-hero-content p {

  max-width: 650px;

  margin: auto;

  font-size: 1.08rem;

}

@media(max-width:768px) {

  .how-hero {

    padding: 150px 0 70px;

  }

}

/* ==========================================================
   WORKFLOW
========================================================== */

.workflow-section {

  padding: 140px 0;

  background: var(--bg-secondary);

}

.workflow-header {

  max-width: 760px;

  margin: 0 auto 70px;

  text-align: center;

}

.workflow-image {

  overflow: hidden;

  border-radius: 28px;

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

  box-shadow: var(--shadow-lg);

  margin-bottom: 70px;

}

.workflow-image img {

  display: block;

  width: 100%;

}

.workflow-steps {

  display: grid;

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

  gap: 24px;

}

.workflow-step {

  padding: 35px 28px;

  border-radius: 24px;

  background: var(--bg-card);

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

  transition: .35s;

}

.workflow-step:hover {

  transform: translateY(-8px);

}

.workflow-step span {

  display: block;

  margin-bottom: 20px;

  font-family: "Sora", sans-serif;

  font-size: 2rem;

  font-weight: 700;

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

}

.workflow-step h3 {

  margin-bottom: 16px;

}

.workflow-step p {

  color: var(--text-secondary);

  line-height: 1.8;

}

@media(max-width:1200px) {

  .workflow-steps {

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

  }

}

@media(max-width:768px) {

  .workflow-section {

    padding: 90px 0;

  }

  .workflow-steps {

    grid-template-columns: 1fr;

  }

}

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

.resources-hero {

  position: relative;

  padding: 170px 0 90px;

  overflow: hidden;

  background:
    radial-gradient(circle at top right,
      rgba(16, 185, 129, .08),
      transparent 35%),

    radial-gradient(circle at bottom left,
      rgba(59, 130, 246, .08),
      transparent 35%),

    var(--bg-primary);

}

.resources-hero::before {

  content: "";

  position: absolute;

  inset: 0;

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

  background-size: 80px 80px;

  opacity: .15;

}

.resources-hero .container {

  position: relative;

  z-index: 2;

}

.resources-hero-content {

  max-width: 760px;

  margin: auto;

  text-align: center;

}

.resources-hero-content h1 {

  margin: 24px 0;

}

.resources-hero-content p {

  max-width: 650px;

  margin: auto;

}

/* ==========================================================
   FEATURED RESOURCES
========================================================== */

.featured-resources {

  padding: 140px 0;

  background: var(--bg-secondary);

}

.resource-grid {

  display: grid;

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

  gap: 30px;

  margin-top: 70px;

}

.resource-card {

  padding: 40px;

  border-radius: 24px;

  background: var(--bg-card);

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

  transition: .35s;

}

.resource-card:hover {

  transform: translateY(-8px);

}

.resource-card i {

  font-size: 2rem;

  color: var(--accent);

  margin-bottom: 25px;

}

.resource-type {

  display: inline-block;

  margin-bottom: 18px;

  color: var(--accent);

  font-size: .85rem;

  font-weight: 600;

}

.resource-card h3 {

  margin-bottom: 18px;

}

.resource-card p {

  color: var(--text-secondary);

  line-height: 1.8;

}

@media(max-width:991px) {

  .resource-grid {

    grid-template-columns: 1fr;

  }

}

/* ==========================================================
   KNOWLEDGE CENTER
========================================================== */

.knowledge-center {

  padding: 140px 0;

  background: var(--bg-primary);

}

.knowledge-grid {

  display: grid;

  grid-template-columns: .95fr 1.05fr;

  gap: 80px;

  align-items: center;

}

.knowledge-image {

  overflow: hidden;

  border-radius: 28px;

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

}

.knowledge-image img {

  width: 100%;

  display: block;

}

.knowledge-content p {

  margin: 28px 0 35px;

}

.knowledge-list {

  display: flex;

  flex-direction: column;

  gap: 18px;

}

.knowledge-list li {

  display: flex;

  align-items: center;

  gap: 15px;

  color: var(--text-secondary);

}

.knowledge-list i {

  color: var(--accent);

}

@media(max-width:991px) {

  .knowledge-grid {

    grid-template-columns: 1fr;

  }

}

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

.about-hero {

  position: relative;

  overflow: hidden;

  padding: 170px 0 95px;

  background:
    radial-gradient(circle at top right,
      rgba(16, 185, 129, .08),
      transparent 35%),

    radial-gradient(circle at bottom left,
      rgba(59, 130, 246, .08),
      transparent 40%),

    var(--bg-primary);

}

.about-hero::before {

  content: "";

  position: absolute;

  inset: 0;

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

  background-size: 80px 80px;

  opacity: .15;

}

.about-hero .container {

  position: relative;

  z-index: 2;

}

.about-hero-content {

  max-width: 760px;

  margin: auto;

  text-align: center;

}

.about-hero-content h1 {

  margin: 24px 0;

}

.about-hero-content p {

  max-width: 650px;

  margin: auto;

}

@media(max-width:768px) {

  .about-hero {

    padding: 150px 0 80px;

  }

}

/* ==========================================================
   OUR STORY
========================================================== */

.our-story {

  padding: 140px 0;

  background: var(--bg-primary);

}

.story-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: center;

}

.story-image {

  border-radius: 28px;

  overflow: hidden;

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

}

.story-image img {

  width: 100%;

  display: block;

}

.story-content p {

  margin: 25px 0;

}

@media(max-width:991px) {

  .story-grid {

    grid-template-columns: 1fr;

  }

}

/* ==========================================================
   OUR PRINCIPLES
========================================================== */

.principles-section {

  padding: 140px 0;

  background: var(--bg-secondary);

}

.principles-section .section-header {

  max-width: 760px;

  margin: 0 auto 70px;

  text-align: center;

}

.principles-grid {

  display: grid;

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

  gap: 30px;

}

.principle-card {

  position: relative;

  padding: 42px;

  border-radius: 28px;

  background: var(--bg-card);

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

  transition: .35s;

}

.principle-card:hover {

  transform: translateY(-10px);

  border-color: rgba(16, 185, 129, .25);

}

.principle-number {

  font-family: 'Sora', sans-serif;

  font-size: 3rem;

  font-weight: 700;

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

  margin-bottom: 24px;

}

.principle-card h3 {

  margin-bottom: 18px;

}

.principle-card p {

  color: var(--text-secondary);

  line-height: 1.9;

}

@media(max-width:991px) {

  .principles-grid {

    grid-template-columns: 1fr;

  }

}

@media(max-width:768px) {

  .principles-section {

    padding: 90px 0;

  }

  .principle-card {

    padding: 32px;

  }

  .principle-number {

    font-size: 2.4rem;

  }

}

/* ==========================================================
   LEADERSHIP & VISION
========================================================== */

.leadership-section {

  padding: 140px 0;

  background: var(--bg-primary);

}

.leadership-grid {

  display: grid;

  grid-template-columns: 1.05fr .95fr;

  gap: 80px;

  align-items: center;

}

.leadership-content p {

  margin: 24px 0;

}

.vision-highlights {

  display: grid;

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

  gap: 24px;

  margin-top: 45px;

}

.vision-item {

  padding: 28px;

  border-radius: 22px;

  background: var(--bg-card);

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

  transition: .35s;

}

.vision-item:hover {

  transform: translateY(-8px);

}

.vision-item h4 {

  margin-bottom: 14px;

}

.vision-item p {

  margin: 0;

  color: var(--text-secondary);

  line-height: 1.8;

}

.leadership-image {

  overflow: hidden;

  border-radius: 28px;

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

  box-shadow: var(--shadow-lg);

}

.leadership-image img {

  width: 100%;

  display: block;

}

@media(max-width:991px) {

  .leadership-grid {

    grid-template-columns: 1fr;

  }

  .leadership-image {

    order: -1;

  }

  .vision-highlights {

    grid-template-columns: 1fr;

  }

}

@media(max-width:768px) {

  .leadership-section {

    padding: 90px 0;

  }

}

/* ==========================================================
   CONNECT WITH HOLLOMIND
========================================================== */

.connect-section {

  padding: 140px 0;

  background: var(--bg-secondary);

}

.connect-section .section-header {

  max-width: 760px;

  margin: 0 auto 70px;

  text-align: center;

}

.connect-grid {

  display: grid;

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

  gap: 30px;

}

.connect-card {

  padding: 42px;

  border-radius: 28px;

  background: var(--bg-card);

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

  transition: .35s;

}

.connect-card:hover {

  transform: translateY(-10px);

  border-color: rgba(16, 185, 129, .25);

  box-shadow: var(--shadow-lg);

}

.connect-icon {

  width: 68px;

  height: 68px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 18px;

  margin-bottom: 30px;

  background: var(--gradient-primary);

  color: #fff;

  font-size: 1.5rem;

}

.connect-card h3 {

  margin-bottom: 18px;

}

.connect-card p {

  color: var(--text-secondary);

  line-height: 1.9;

  margin-bottom: 28px;

}

.connect-card ul {

  display: flex;

  flex-direction: column;

  gap: 14px;

}

.connect-card li {

  position: relative;

  padding-left: 22px;

  color: var(--text-secondary);

}

.connect-card li::before {

  content: "";

  position: absolute;

  left: 0;

  top: 10px;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--accent);

}

@media(max-width:991px) {

  .connect-grid {

    grid-template-columns: 1fr;

  }

}

@media(max-width:768px) {

  .connect-section {

    padding: 90px 0;

  }

  .connect-card {

    padding: 34px;

  }

}

/* ==========================================================
   GLOBAL PRESENCE
========================================================== */

.global-presence {

  padding: 140px 0;

  background: var(--bg-primary);

}

.presence-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: center;

}

.presence-content p {

  margin: 24px 0;

}

.presence-image {

  overflow: hidden;

  border-radius: 28px;

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

  box-shadow: var(--shadow-lg);

}

.presence-image img {

  display: block;

  width: 100%;

}

.presence-stats {

  display: grid;

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

  gap: 22px;

  margin-top: 45px;

}

.presence-stats div {

  padding: 24px;

  border-radius: 20px;

  background: var(--bg-card);

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

}

.presence-stats strong {

  display: block;

  margin-bottom: 8px;

  font-family: 'Sora', sans-serif;

  font-size: 1.8rem;

}

.presence-stats span {

  color: var(--text-secondary);

}

@media(max-width:991px) {

  .presence-grid {

    grid-template-columns: 1fr;

  }

  .presence-image {

    order: -1;

  }

  .presence-stats {

    grid-template-columns: 1fr;

  }

}

@media(max-width:768px) {

  .global-presence {

    padding: 90px 0;

  }

}


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

.legal-hero {

  position: relative;

  overflow: hidden;

  padding: 170px 0 90px;

  background:

    radial-gradient(circle at top right,
      rgba(16, 185, 129, .08),
      transparent 35%),

    radial-gradient(circle at bottom left,
      rgba(59, 130, 246, .08),
      transparent 35%),

    var(--bg-primary);

}

.legal-hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);

  background-size: 80px 80px;

  opacity: .15;

}

.legal-hero .container {

  position: relative;

  z-index: 2;

}

.legal-hero-content {

  max-width: 760px;

  margin: auto;

  text-align: center;

}

.legal-hero-content h1 {

  margin: 24px 0;

}

.legal-hero-content p {

  max-width: 640px;

  margin: auto;

}

@media(max-width:768px) {

  .legal-hero {

    padding: 150px 0 80px;

  }

}

/* ==========================================================
   LEGAL NAVIGATION
========================================================== */

.legal-navigation {


  top: 78px;

  z-index: 50;

  background: rgba(6, 10, 20, .92);

  backdrop-filter: blur(16px);

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

}

.legal-nav-wrapper {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 12px;

  padding: 10px 0;

  flex-wrap: wrap;

}

.legal-nav-wrapper a {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 8px 16px;

  border-radius: 999px;

  font-size: .88rem;

  font-weight: 500;

  color: var(--text-secondary);

  transition: .3s;

}

.legal-nav-wrapper a:hover {

  color: var(--text-primary);

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

}

.legal-nav-wrapper i {

  font-size: .82rem;

  color: var(--accent);

}

@media(max-width:768px) {

  .legal-navigation {

    top: 72px;

  }

  .legal-nav-wrapper {

    justify-content: flex-start;

    flex-wrap: nowrap;

    overflow-x: auto;

    padding: 10px 0;

    scrollbar-width: none;

  }

  .legal-nav-wrapper::-webkit-scrollbar {

    display: none;

  }

}

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

.legal-section {

  padding: 120px 0;

}

.legal-content {

  max-width: 900px;

  margin: auto;

}

.legal-content>p {

  margin: 30px 0 60px;

}

.legal-list {

  display: flex;

  flex-direction: column;

  gap: 30px;

}

.legal-item {

  padding: 35px;

  border-radius: 24px;

  background: var(--bg-card);

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

}

.legal-item h3 {

  margin-bottom: 18px;

}

.legal-item p {

  color: var(--text-secondary);

  line-height: 1.9;

}

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

.contact-hero {

  position: relative;

  overflow: hidden;

  padding: 170px 0 90px;

  background:

    radial-gradient(circle at top right,
      rgba(16, 185, 129, .08),
      transparent 35%),

    radial-gradient(circle at bottom left,
      rgba(59, 130, 246, .08),
      transparent 35%),

    var(--bg-primary);

}

.contact-hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);

  background-size: 80px 80px;

  opacity: .15;

}

.contact-hero .container {

  position: relative;

  z-index: 2;

}

.contact-hero-content {

  max-width: 760px;

  margin: auto;

  text-align: center;

}

.contact-hero-content h1 {

  margin: 24px 0;

}

.contact-hero-content p {

  max-width: 650px;

  margin: auto;

}

@media(max-width:768px) {

  .contact-hero {

    padding: 150px 0 80px;

  }

}

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

.contact-section {

  padding: 140px 0;

  background: var(--bg-primary);

}

.contact-grid {

  display: grid;

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

  gap: 60px;

  align-items: start;

}

.contact-form-wrapper {

  padding: 50px;

  border-radius: 30px;

  background: var(--bg-card);

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

}

.contact-form-wrapper h2 {

  margin: 22px 0;

}

.contact-form-wrapper>p {

  margin-bottom: 40px;

}

.contact-form {

  display: flex;

  flex-direction: column;

  gap: 24px;

}

.form-row {

  display: grid;

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

  gap: 20px;

}

.form-group {

  display: flex;

  flex-direction: column;

}

.form-group label {

  margin-bottom: 10px;

  font-size: .92rem;

  color: var(--text-secondary);

}

.form-group input,

.form-group textarea {

  width: 100%;

  padding: 18px 20px;

  border-radius: 16px;

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

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

  color: var(--text-primary);

  font-size: 1rem;

  transition: .3s;

  resize: vertical;

}

.form-group input:focus,

.form-group textarea:focus {

  outline: none;

  border-color: var(--accent);

}

.contact-sidebar {

  display: flex;

  flex-direction: column;

  gap: 24px;

}

.contact-card {

  padding: 35px;

  border-radius: 24px;

  background: var(--bg-card);

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

}

.contact-card i {

  width: 60px;

  height: 60px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 16px;

  margin-bottom: 24px;

  background: var(--gradient-primary);

  color: #fff;

  font-size: 1.3rem;

}

.contact-card h3 {

  margin-bottom: 12px;

}

.contact-card p {

  color: var(--text-secondary);

  line-height: 1.8;

}

@media(max-width:991px) {

  .contact-grid {

    grid-template-columns: 1fr;

  }

  .contact-form-wrapper {

    padding: 40px;

  }

}

@media(max-width:768px) {

  .contact-section {

    padding: 90px 0;

  }

  .form-row {

    grid-template-columns: 1fr;

  }

  .contact-form-wrapper {

    padding: 30px;

  }

}

/* ==========================================================
   LEADERSHIP TEAM
========================================================== */

.team-section {

  padding: 140px 0;

  background: var(--bg-secondary);

}

.team-section .section-header {

  max-width: 760px;

  margin: 0 auto 70px;

  text-align: center;

}

.team-grid {

  display: grid;

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

  gap: 32px;

}

.team-card {

  overflow: hidden;

  border-radius: 28px;

  background: var(--bg-card);

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

  transition: .35s;

}

.team-card:hover {

  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);

}

.team-image {

  aspect-ratio: 4/5;

  overflow: hidden;

}

.team-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: .5s;

}

.team-card:hover img {

  transform: scale(1.05);

}

.team-content {

  padding: 34px;

}

.team-content h3 {

  margin-bottom: 8px;

}

.team-content span {

  display: block;

  margin-bottom: 20px;

  color: var(--accent);

  font-size: .92rem;

  font-weight: 600;

}

.team-content p {

  color: var(--text-secondary);

  line-height: 1.9;

}

@media(max-width:991px) {

  .team-grid {

    grid-template-columns: 1fr;

  }

}

@media(max-width:768px) {

  .team-section {

    padding: 90px 0;

  }

}