/* =========================================================
   PRIORITYFIXA AGENCY
   =========================================================

   TYPOGRAPHY
   ─────────────────────────────────────────────────────────
   Syne    → Brand / headings / display typography
   DM Sans → Body / navigation / buttons / UI

   IMPORTANT:
   Fonts are loaded here so typography remains consistent
   even if another stylesheet or cached CSS is interfering.

   BRAND
   ─────────────────────────────────────────────────────────
   Deep Navy
   Electric Blue
   Orange
   Gold

   FEATURED PROJECTS
   ─────────────────────────────────────────────────────────
   Empowered Teachers Forum → Green / Gold
   Sakwa Wangara            → Charcoal / Brass
========================================================= */


/* =========================================================
   FONT LOADING
   ========================================================= */

/*
   Load the fonts directly from this stylesheet.

   display=swap prevents invisible text while the font loads.
*/

/*@import url(
  "https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Syne:wght@400;500;600;700;800&display=swap"
);


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

:root {

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

  --bg: #020817;
  --bg-two: #071127;
  --bg-three: #0b1730;


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

  --white: #ffffff;

  --text: #f3f5f8;

  --muted: rgba(243,245,248,.66);

  --muted-soft: rgba(243,245,248,.45);


  /* =======================================================
     LINES / CARDS
  ======================================================= */

  --line: rgba(255,255,255,.09);

  --card: rgba(255,255,255,.035);

  --card-hover: rgba(255,255,255,.06);


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

  --blue: #00b7ff;

  --blue-light: #63d8ff;

  --orange: #ff7a18;

  --orange-light: #ff9b4a;

  --gold: #c9a84c;

  --gold-light: #e8c97a;


  /* =======================================================
     PROJECT COLOURS
  ======================================================= */

  --green: #1b6b58;


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

  --container: 1180px;

  --radius: 24px;


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

  --font-head:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif;

  --font-body:
    "DM Sans",
    Arial,
    sans-serif;
}


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

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  margin: 0;

  background: var(--bg);

  color: var(--text);

  /*
     FORCE THE BODY TO USE DM SANS.
     This prevents an older body font declaration
     from taking over.
  */

  font-family:
    "DM Sans",
    Arial,
    sans-serif !important;

  font-size: 16px;

  line-height: 1.6;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;
}


img {
  display: block;

  max-width: 100%;
}


a {
  color: inherit;

  text-decoration: none;
}


button,
input,
textarea,
select {
  font: inherit;
}


button {
  cursor: pointer;
}


::selection {
  background: var(--orange);

  color: #fff;
}


/* =========================================================
   GLOBAL FONT PROTECTION
========================================================= */

/*
   These rules deliberately use !important.

   If an old stylesheet, browser cache, template rule,
   or component CSS attempts to change the typography,
   these declarations win.
*/

body,
p,
li,
span,
small,
label,
input,
textarea,
select,
button,
a,
nav {

  font-family:
    "DM Sans",
    Arial,
    sans-serif !important;
}


/*
   ALL DISPLAY / HEADING TYPOGRAPHY
*/

h1,
h2,
h3,
h4,
h5,
h6 {

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

  font-weight: 800;

  letter-spacing: -.035em;

  margin-top: 0;
}


/*
   Brand-specific elements
*/

.brand,
.brand *,
.logo,
.logo *,
.footer-logo,
.footer-logo *,
.service-card h3,
.process-step h3,
.project-information h3,
.project-brand-badge strong,
.placeholder-content strong,
.pricing-top h3,
.cta-box h2,
.dash-content h3 {

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;
}


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

.container {

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

  margin-inline: auto;
}


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

.section {

  position: relative;

  padding: 110px 0;
}

.section-sm {

  position: relative;

  padding: 55px 0;
}


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

body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: -3;

  opacity: .16;

  background-image:

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

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

  background-size: 70px 70px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 75%
    );
}


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

.page-glow {

  position: fixed;

  width: 520px;

  height: 520px;

  border-radius: 50%;

  pointer-events: none;

  z-index: -2;

  filter: blur(110px);

  opacity: .11;
}

.glow-one {

  top: -220px;

  left: -180px;

  background: #005eff;
}

.glow-two {

  right: -220px;

  bottom: -250px;

  background: #ff6b00;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {

  outline: 3px solid var(--orange);

  outline-offset: 4px;
}


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

.site-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  background:
    rgba(2,8,23,.76);

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

  backdrop-filter:
    blur(18px);

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

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

.site-header.scrolled {

  background:
    rgba(2,8,23,.94);

  border-bottom-color:
    rgba(255,255,255,.08);
}

.nav-wrap {

  min-height: 82px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;
}


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

.brand {

  display: inline-flex;

  align-items: center;

  flex-shrink: 0;

  text-decoration: none;

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;
}

.brand-logo {

  width: 145px;

  height: auto;

  display: block;

  object-fit: contain;

  transition:
    transform .3s ease;
}

.brand-logo:hover {

  transform:
    scale(1.03);
}


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

.main-nav {

  display: flex;

  align-items: center;

  gap: 25px;
}

.main-nav > a {

  position: relative;

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

  font-family:
    "DM Sans",
    Arial,
    sans-serif !important;

  font-size: 13px;

  font-weight: 600;

  transition:
    color .25s ease;
}

.main-nav > a:not(.nav-cta)::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -8px;

  width: 0;

  height: 1px;

  background:
    var(--orange);

  transition:
    width .25s ease;
}

.main-nav > a:hover {

  color: #fff;
}

.main-nav > a:hover::after {

  width: 100%;
}


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

.nav-cta {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding:
    11px 17px;

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

  border-radius:
    50px;

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

  color:
    #fff !important;

  font-family:
    "DM Sans",
    Arial,
    sans-serif !important;

  font-size:
    12px !important;

  font-weight:
    700 !important;

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

.nav-cta:hover {

  background:
    var(--orange);

  border-color:
    var(--orange);

  transform:
    translateY(-1px);
}


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

.menu-toggle {

  display: none;

  width: 44px;

  height: 44px;

  align-items: center;

  justify-content: center;

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

  border-radius: 10px;

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

  color:
    #fff;
}


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

.eyebrow {

  margin-bottom: 15px;

  color:
    var(--gold);

  font-family:
    "DM Sans",
    Arial,
    sans-serif !important;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .18em;

  line-height: 1.4;

  text-transform: uppercase;
}

.orange-text {

  color:
    var(--orange);
}

.section-heading h2 {

  margin-bottom: 20px;

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

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

  font-weight: 800;

  line-height: 1;

  letter-spacing: -.045em;
}

.section-heading h2 span {

  display: block;

  color:
    var(--orange);
}

.section-heading > p:last-child {

  max-width: 720px;

  margin-inline: auto;

  color:
    var(--muted);

  font-family:
    "DM Sans",
    Arial,
    sans-serif !important;

  font-size: 15px;

  line-height: 1.8;
}

.section-heading.center {

  text-align: center;
}


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

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 11px;

  min-height: 50px;

  padding:
    0 21px;

  border:
    1px solid transparent;

  border-radius: 8px;

  font-family:
    "DM Sans",
    Arial,
    sans-serif !important;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: .02em;

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

.btn:hover {

  transform:
    translateY(-2px);
}

.btn i {

  transition:
    transform .25s ease;
}

.btn:hover i {

  transform:
    translateX(4px);
}

.btn-primary {

  background:
    linear-gradient(
      135deg,
      var(--orange),
      #ff5a00
    );

  color:
    #fff;

  box-shadow:
    0 12px 30px rgba(255,100,0,.16);
}

.btn-primary:hover {

  box-shadow:
    0 18px 38px rgba(255,100,0,.28);
}

.btn-outline {

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

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

  color:
    #fff;
}

.btn-outline:hover {

  border-color:
    var(--orange);

  background:
    rgba(255,122,24,.08);
}


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

.hero {

  min-height:
    850px;

  display:
    flex;

  align-items:
    center;

  padding-top:
    155px;

  overflow:
    hidden;
}

.hero-grid {

  display:
    grid;

  grid-template-columns:
    minmax(0,.95fr)
    minmax(0,1.05fr);

  gap:
    60px;

  align-items:
    center;
}

.hero-copy {

  position:
    relative;

  z-index:
    3;
}


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

.hero h1 {

  max-width:
    780px;

  margin-bottom:
    25px;

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

  font-size:
    clamp(48px,6vw,82px);

  font-weight:
    800;

  line-height:
    .94;

  letter-spacing:
    -.055em;
}

.hero h1 span {

  color:
    #fff;
}

.hero h1 b {

  color:
    var(--orange);

  font-weight:
    800;
}

.hero-text {

  max-width:
    640px;

  color:
    var(--muted);

  font-family:
    "DM Sans",
    Arial,
    sans-serif !important;

  font-size:
    17px;

  line-height:
    1.8;

  margin-bottom:
    32px;
}

.hero-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-bottom:
    38px;
}


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

.hero-mini-stats {

  display:
    flex;

  gap:
    38px;
}

.hero-mini-stats div {

  display:
    flex;

  align-items:
    baseline;

  gap:
    9px;
}

.hero-mini-stats strong {

  color:
    var(--orange);

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

  font-size:
    21px;

  font-weight:
    800;
}

.hero-mini-stats span {

  color:
    var(--muted-soft);

  font-family:
    "DM Sans",
    Arial,
    sans-serif !important;

  font-size:
    11px;

  text-transform:
    uppercase;

  letter-spacing:
    .12em;
}


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

.hero-visual {

  position:
    relative;

  min-height:
    600px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}

.dashboard-glow {

  position:
    absolute;

  width:
    360px;

  height:
    360px;

  border-radius:
    50%;

  background:
    #0077ff;

  opacity:
    .15;

  filter:
    blur(70px);
}

.orbit {

  position:
    absolute;

  border:
    1px solid rgba(0,183,255,.18);

  border-radius:
    50%;

  transform:
    rotate(-20deg);
}

.orbit-one {

  width:
    570px;

  height:
    270px;
}

.orbit-two {

  width:
    460px;

  height:
    220px;

  transform:
    rotate(30deg);

  border-color:
    rgba(255,122,24,.13);
}

.dashboard {

  position:
    relative;

  z-index:
    2;

  width:
    min(620px,100%);

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

  border-radius:
    18px;

  background:
    #0a1223;

  overflow:
    hidden;

  box-shadow:
    0 40px 90px rgba(0,0,0,.48);

  transform:
    perspective(1200px)
    rotateY(-7deg)
    rotateX(3deg);
}

.dash-top {

  height:
    44px;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  padding:
    0 15px;

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

  background:
    #0d172b;

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

  font-size:
    10px;
}

.dash-top > span {

  flex:
    1;
}

.dash-dots {

  display:
    flex;

  gap:
    5px;
}

.dash-dots i {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #555;
}

.dash-body {

  display:
    grid;

  grid-template-columns:
    55px 1fr;

  min-height:
    390px;
}

.dash-sidebar {

  padding:
    20px 0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    17px;

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

.dash-sidebar span {

  width:
    30px;

  height:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    7px;
}

.dash-sidebar .active {

  background:
    rgba(0,183,255,.12);

  color:
    var(--blue-light);
}

.dash-content {

  padding:
    30px;
}

.dash-content > p {

  margin-bottom:
    8px;

  color:
    var(--blue);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .15em;
}

.dash-content h3 {

  margin-bottom:
    24px;

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

  font-size:
    clamp(25px,3vw,38px);

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    -.04em;
}

.dash-content h3 span {

  color:
    var(--orange);
}

.dash-cards {

  display:
    grid;

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

  gap:
    12px;
}

.dash-cards > div {

  padding:
    16px;

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

  border-radius:
    10px;

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

.dash-cards small {

  display:
    block;

  margin-bottom:
    8px;

  color:
    var(--muted-soft);

  font-size:
    8px;

  letter-spacing:
    .1em;
}

.dash-cards strong {

  display:
    block;

  margin-bottom:
    5px;

  font-size:
    12px;
}

.dash-cards em {

  color:
    #63d9a0;

  font-size:
    10px;

  font-style:
    normal;
}


/* =========================================================
   DASHBOARD CHART
========================================================= */

.chart {

  position:
    relative;

  height:
    125px;

  margin-top:
    25px;

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

  background:
    repeating-linear-gradient(
      to top,
      transparent 0,
      transparent 30px,
      rgba(255,255,255,.035) 31px
    );
}

.chart span {

  position:
    absolute;

  bottom:
    0;

  width:
    10px;

  border-radius:
    4px 4px 0 0;

  background:
    linear-gradient(
      to top,
      #008eff,
      #52d8ff
    );

  opacity:
    .75;
}

.chart-line {

  position:
    absolute;

  left:
    5%;

  right:
    5%;

  bottom:
    25%;

  height:
    2px;

  background:
    var(--orange);

  transform:
    rotate(-8deg);

  opacity:
    .65;
}


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

.floating-card {

  position:
    absolute;

  z-index:
    5;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  min-width:
    205px;

  padding:
    12px;

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

  border-radius:
    12px;

  background:
    rgba(10,18,35,.9);

  box-shadow:
    0 20px 40px rgba(0,0,0,.35);

  backdrop-filter:
    blur(15px);
}

.payment-card {

  left:
    -20px;

  bottom:
    80px;
}

.automation-card {

  right:
    -25px;

  top:
    90px;
}

.float-icon {

  width:
    38px;

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    9px;
}

.float-icon.orange {

  background:
    rgba(255,122,24,.13);

  color:
    var(--orange);
}

.float-icon.blue {

  background:
    rgba(0,183,255,.13);

  color:
    var(--blue);
}

.floating-card small {

  display:
    block;

  margin-bottom:
    2px;

  color:
    var(--muted-soft);

  font-size:
    8px;

  letter-spacing:
    .08em;
}

.floating-card strong {

  display:
    block;

  font-size:
    11px;
}

.floating-card b {

  color:
    #65dca4;

  font-size:
    9px;
}


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

.visual-badge {

  position:
    absolute;

  z-index:
    5;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    9px 12px;

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

  border-radius:
    50px;

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

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

  font-size:
    10px;

  backdrop-filter:
    blur(10px);
}

.badge-cart {

  top:
    20px;

  left:
    5px;
}

.badge-shield {

  right:
    10px;

  bottom:
    20px;
}

.badge-cart i {

  color:
    var(--orange);
}

.badge-shield i {

  color:
    var(--blue-light);
}


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

.trust {

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

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

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

.trust-label {

  margin-bottom:
    25px;

  text-align:
    center;

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

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;
}

.logo-row {

  display:
    grid;

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

  gap:
    15px;
}

.logo-row span {

  min-height:
    70px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  text-align:
    center;

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

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

  font-size:
    11px;

  font-weight:
    700;

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

  border-radius:
    12px;

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

.logo-row i {

  color:
    var(--orange);
}


/* =========================================================
   SERVICES
========================================================= */

.services-grid {

  display:
    grid;

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

  gap:
    18px;

  margin-top:
    55px;
}

.service-card {

  position:
    relative;

  min-height:
    330px;

  padding:
    30px;

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

  border-radius:
    var(--radius);

  background:
    var(--card);

  overflow:
    hidden;

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

.service-card::after {

  content:
    "";

  position:
    absolute;

  right:
    -70px;

  bottom:
    -80px;

  width:
    180px;

  height:
    180px;

  border-radius:
    50%;

  background:
    var(--blue);

  filter:
    blur(70px);

  opacity:
    0;

  transition:
    opacity .35s ease;
}

.service-card:hover {

  transform:
    translateY(-7px);

  background:
    var(--card-hover);

  border-color:
    rgba(0,183,255,.3);
}

.service-card:hover::after {

  opacity:
    .12;
}

.service-card.featured {

  border-color:
    rgba(255,122,24,.35);

  background:
    linear-gradient(
      145deg,
      rgba(255,122,24,.08),
      rgba(255,255,255,.025)
    );
}

.service-icon {

  width:
    52px;

  height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    28px;

  border-radius:
    13px;

  background:
    rgba(0,183,255,.09);

  color:
    var(--blue-light);

  font-size:
    20px;
}

.orange-icon {

  background:
    rgba(255,122,24,.1);

  color:
    var(--orange);
}

.service-number {

  position:
    absolute;

  top:
    28px;

  right:
    28px;

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

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

  font-size:
    22px;

  font-weight:
    800;
}

.service-card h3 {

  margin-bottom:
    15px;

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

  font-size:
    24px;

  font-weight:
    700;

  line-height:
    1.05;

  letter-spacing:
    -.035em;
}

.service-card p {

  margin-bottom:
    24px;

  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    1.7;
}

.service-card a {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--orange);

  font-size:
    12px;

  font-weight:
    700;
}


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

.process-section {

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(255,255,255,.015),
      transparent
    );
}

.process-line {

  position:
    relative;

  display:
    grid;

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

  gap:
    15px;

  margin-top:
    65px;
}

.process-line::before {

  content:
    "";

  position:
    absolute;

  top:
    32px;

  left:
    9%;

  right:
    9%;

  height:
    1px;

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

.process-step {

  position:
    relative;

  z-index:
    2;

  text-align:
    center;
}

.process-icon {

  width:
    64px;

  height:
    64px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin:
    0 auto 18px;

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

  border-radius:
    50%;

  background:
    #081329;

  color:
    var(--blue-light);

  font-size:
    18px;
}

.process-step.active .process-icon {

  background:
    var(--orange);

  border-color:
    var(--orange);

  color:
    #fff;

  box-shadow:
    0 0 35px rgba(255,122,24,.25);
}

.process-step > strong {

  color:
    var(--orange);

  font-size:
    10px;

  letter-spacing:
    .1em;
}

.process-step h3 {

  margin:
    7px 0 8px;

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

  font-size:
    19px;

  font-weight:
    700;
}

.process-step p {

  margin:
    0 auto;

  max-width:
    190px;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.6;
}


/* =========================================================
   FEATURED PROJECTS
========================================================= */

.featured-projects {

  position:
    relative;

  overflow:
    hidden;
}

.featured-projects .section-heading {

  max-width:
    850px;

  margin-inline:
    auto;
}

.featured-project {

  display:
    grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(360px,.85fr);

  gap:
    70px;

  align-items:
    center;

  margin-top:
    80px;

  padding:
    42px;

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

  border-radius:
    28px;

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

  position:
    relative;

  overflow:
    hidden;
}

.featured-project + .featured-project {

  margin-top:
    40px;
}


/* =========================================================
   PROJECT BRAND VARIABLES
========================================================= */

.project-etf {

  --project-primary:
    #1b6b58;

  --project-secondary:
    #d7a84a;

  --project-dark:
    #123f35;
}

.project-sakwa {

  --project-primary:
    #17140f;

  --project-secondary:
    #b89452;

  --project-dark:
    #33291d;
}


/* =========================================================
   PROJECT SHOWCASE
========================================================= */

.project-showcase {

  position:
    relative;

  min-width:
    0;

  padding-bottom:
    20px;
}

.project-browser {

  width:
    100%;

  overflow:
    hidden;

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

  border-radius:
    16px;

  background:
    #111;

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

.browser-top {

  height:
    44px;

  display:
    flex;

  align-items:
    center;

  gap:
    16px;

  padding:
    0 16px;

  background:
    #111;

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

.browser-dots {

  display:
    flex;

  gap:
    6px;

  flex-shrink:
    0;
}

.browser-dots span {

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    #555;
}

.browser-url {

  flex:
    1;

  min-width:
    0;

  padding:
    7px 12px;

  border-radius:
    7px;

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

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

  font-size:
    11px;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}


/* =========================================================
   SCREENSHOT PLACEHOLDER
========================================================= */

.project-screenshot-placeholder {

  position:
    relative;

  width:
    100%;

  min-height:
    390px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  background:
    linear-gradient(
      135deg,
      var(--project-dark),
      var(--project-primary)
    );
}

.project-screenshot-placeholder::before {

  content:
    "";

  position:
    absolute;

  width:
    360px;

  height:
    360px;

  border-radius:
    50%;

  background:
    var(--project-secondary);

  opacity:
    .12;

  filter:
    blur(10px);

  top:
    -160px;

  right:
    -100px;
}

.project-screenshot-placeholder::after {

  content:
    "";

  position:
    absolute;

  inset:
    0;

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

  background-size:
    30px 30px;

  opacity:
    .35;
}

.placeholder-content {

  position:
    relative;

  z-index:
    2;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  padding:
    40px;

  text-align:
    center;
}

.placeholder-icon {

  width:
    68px;

  height:
    68px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    18px;

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

  border-radius:
    16px;

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

  color:
    var(--project-secondary);

  font-size:
    24px;
}

.placeholder-content span {

  margin-bottom:
    8px;

  color:
    var(--project-secondary);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .18em;
}

.placeholder-content strong {

  margin-bottom:
    8px;

  color:
    #fff;

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

  font-size:
    clamp(22px,3vw,34px);

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    -.04em;
}

.placeholder-content small {

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

  font-size:
    12px;
}


/* =========================================================
   PROJECT BRAND BADGE
========================================================= */

.project-brand-badge {

  position:
    absolute;

  left:
    22px;

  bottom:
    0;

  z-index:
    5;

  padding:
    15px 20px;

  background:
    var(--project-primary);

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

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

.project-brand-badge span {

  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--project-secondary);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    .16em;
}

.project-brand-badge strong {

  display:
    block;

  color:
    #fff;

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

  font-size:
    14px;

  font-weight:
    700;

  line-height:
    1.05;
}


/* =========================================================
   PROJECT INFORMATION
========================================================= */

.project-information {

  padding:
    20px 0;
}

.project-eyebrow {

  color:
    var(--project-secondary);
}

.project-information h3 {

  margin:
    10px 0 20px;

  color:
    #fff;

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

  font-size:
    clamp(36px,4vw,56px);

  font-weight:
    800;

  line-height:
    .96;

  letter-spacing:
    -.045em;
}

.project-information h3 span {

  display:
    block;

  color:
    var(--project-secondary);
}

.project-description {

  margin-bottom:
    25px;

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

  line-height:
    1.8;
}


/* =========================================================
   PROJECT SERVICES
========================================================= */

.project-services {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-bottom:
    28px;
}

.project-services span {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    8px 11px;

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

  border-radius:
    50px;

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

  font-size:
    11px;
}

.project-services i {

  color:
    var(--project-secondary);
}


/* =========================================================
   PROJECT HIGHLIGHTS
========================================================= */

.project-highlights {

  display:
    grid;

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

  margin-bottom:
    28px;

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

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

.project-highlights div {

  padding:
    16px 12px;

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

.project-highlights div:last-child {

  border-right:
    none;
}

.project-highlights strong {

  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--project-secondary);

  font-size:
    10px;

  text-transform:
    uppercase;

  letter-spacing:
    .08em;
}

.project-highlights span {

  display:
    block;

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

  font-size:
    11px;

  line-height:
    1.4;
}

.project-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;
}


/* =========================================================
   PACKAGES
========================================================= */

.packages-section {

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

.pricing-grid {

  display:
    grid;

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

  gap:
    18px;

  margin-top:
    55px;
}

.pricing-card {

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  padding:
    32px;

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

  border-radius:
    var(--radius);

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

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

.pricing-card:hover {

  transform:
    translateY(-6px);

  border-color:
    rgba(255,255,255,.16);
}

.pricing-featured {

  border-color:
    rgba(255,122,24,.4);

  background:
    linear-gradient(
      145deg,
      rgba(255,122,24,.08),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 25px 70px rgba(255,90,0,.07);
}

.popular-badge {

  position:
    absolute;

  top:
    0;

  right:
    25px;

  transform:
    translateY(-50%);

  padding:
    6px 10px;

  border-radius:
    50px;

  background:
    var(--orange);

  color:
    #fff;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    .1em;
}

.package-label {

  color:
    var(--orange);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}

.pricing-top h3 {

  margin-bottom:
    14px;

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

  font-size:
    28px;

  font-weight:
    700;

  line-height:
    1.05;

  letter-spacing:
    -.035em;
}

.package-description {

  min-height:
    85px;

  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    1.65;
}

.package-price {

  margin-top:
    20px;

  color:
    #fff;

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

  font-size:
    28px;

  font-weight:
    800;

  letter-spacing:
    -.035em;
}

.package-note {

  color:
    var(--muted-soft);

  font-size:
    10px;
}

.package-features {

  list-style:
    none;

  margin:
    25px 0;

  padding:
    25px 0;

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

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

  flex:
    1;
}

.package-features li {

  display:
    flex;

  gap:
    10px;

  margin-bottom:
    12px;

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

  font-size:
    12px;

  line-height:
    1.5;
}

.package-features li:last-child {

  margin-bottom:
    0;
}

.package-features i {

  margin-top:
    3px;

  color:
    #60d9a0;

  font-size:
    10px;
}

.package-btn {

  width:
    100%;
}

.packages-note {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  margin-top:
    22px;

  padding:
    18px 20px;

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

  border-radius:
    12px;

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

  color:
    var(--muted);

  font-size:
    11px;

  line-height:
    1.6;
}

.packages-note i {

  margin-top:
    3px;

  color:
    var(--gold);
}


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

.about-grid {

  display:
    grid;

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

  gap:
    90px;

  align-items:
    start;
}

.about-grid .section-heading h2 {

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

.about-grid .section-heading h2 span {

  color:
    var(--orange);
}

.about-copy > p {

  color:
    var(--muted);

  font-size:
    17px;

  line-height:
    1.8;
}

.about-points {

  margin-top:
    35px;
}

.about-points > div {

  display:
    flex;

  gap:
    14px;

  padding:
    17px 0;

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

  color:
    var(--muted);

  font-size:
    13px;
}

.about-points i {

  color:
    var(--orange);

  margin-top:
    4px;
}

.about-points b {

  color:
    #fff;
}


/* =========================================================
   CLIENT SYSTEMS
========================================================= */

.client-logos {

  display:
    grid;

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

  gap:
    12px;
}

.client-logos span {

  min-height:
    65px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  padding:
    10px;

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

  border-radius:
    10px;

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

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

  font-size:
    11px;

  font-weight:
    700;

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

.client-logos span:hover {

  color:
    #fff;

  border-color:
    rgba(255,255,255,.16);
}


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

.cta-section {

  padding-top:
    70px;

  padding-bottom:
    100px;
}

.cta-box {

  display:
    grid;

  grid-template-columns:
    1fr auto;

  gap:
    50px;

  align-items:
    center;

  padding:
    55px;

  border:
    1px solid rgba(255,122,24,.22);

  border-radius:
    28px;

  background:
    linear-gradient(
      135deg,
      rgba(255,122,24,.08),
      rgba(0,183,255,.035)
    );
}

.cta-box h2 {

  margin-bottom:
    18px;

  font-family:
    "Syne",
    "Arial Black",
    Arial,
    sans-serif !important;

  font-size:
    clamp(38px,4vw,60px);

  font-weight:
    800;

  line-height:
    .98;

  letter-spacing:
    -.045em;
}

.cta-box h2 span {

  color:
    var(--orange);
}

.cta-box p:last-child {

  margin-bottom:
    0;

  color:
    var(--muted);
}

.cta-contact {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    15px;
}

.cta-contact > a:last-child {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

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

  font-size:
    12px;
}

.cta-contact > a:last-child:hover {

  color:
    #fff;
}


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

.footer {

  padding:
    35px 0 20px;

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

  background:
    #010611;
}

.footer-main {

  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  gap:
    40px;

  align-items:
    center;
}

.footer-logo {

  width:
    125px;

  height:
    auto;
}

.footer-links {

  display:
    flex;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    22px;
}

.footer-links a {

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

  font-size:
    11px;
}

.footer-links a:hover {

  color:
    #fff;
}

.socials {

  display:
    flex;

  gap:
    8px;
}

.socials a {

  width:
    36px;

  height:
    36px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    50%;

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

  font-size:
    12px;

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

.socials a:hover {

  background:
    var(--orange);

  border-color:
    var(--orange);

  color:
    #fff;
}

.copyright {

  margin-top:
    30px;

  padding-top:
    18px;

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

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

  font-size:
    10px;

  text-align:
    center;
}


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

.reveal {

  opacity:
    1;

  transform:
    translateY(0);
}

.js .reveal {

  opacity:
    0;

  transform:
    translateY(24px);

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

.js .reveal.visible {

  opacity:
    1;

  transform:
    translateY(0);
}

.delay {

  transition-delay:
    .15s !important;
}

.delay-1 {

  transition-delay:
    .1s !important;
}

.delay-2 {

  transition-delay:
    .2s !important;
}

.delay-3 {

  transition-delay:
    .3s !important;
}

.delay-4 {

  transition-delay:
    .4s !important;
}


/* =========================================================
   RESPONSIVE — 1100px
========================================================= */

@media (max-width: 1100px) {

  .main-nav {

    gap:
      15px;
  }

  .hero-grid {

    grid-template-columns:
      1fr;

    text-align:
      center;
  }

  .hero-copy {

    max-width:
      850px;

    margin-inline:
      auto;
  }

  .hero-text {

    margin-inline:
      auto;
  }

  .hero-actions,
  .hero-mini-stats {

    justify-content:
      center;
  }

  .hero-visual {

    max-width:
      760px;

    width:
      100%;

    margin-inline:
      auto;
  }

  .services-grid {

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

  .pricing-grid {

    grid-template-columns:
      1fr;
  }

  .pricing-card {

    max-width:
      700px;

    width:
      100%;

    margin-inline:
      auto;
  }

  .client-logos {

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


/* =========================================================
   RESPONSIVE — 900px
========================================================= */

@media (max-width: 900px) {

  .section {

    padding:
      85px 0;
  }

  .menu-toggle {

    display:
      flex;
  }

  .main-nav {

    position:
      absolute;

    top:
      calc(100% + 1px);

    left:
      20px;

    right:
      20px;

    display:
      none;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      0;

    padding:
      12px;

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

    border-radius:
      16px;

    background:
      rgba(5,12,27,.97);

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

  .main-nav.open {

    display:
      flex;
  }

  .main-nav > a {

    padding:
      13px 12px;
  }

  .main-nav > a:not(.nav-cta)::after {

    display:
      none;
  }

  .nav-cta {

    margin-top:
      8px;

    justify-content:
      center;
  }

  .featured-project {

    grid-template-columns:
      1fr;

    gap:
      45px;

    padding:
      25px;
  }

  .project-screenshot-placeholder {

    min-height:
      320px;
  }

  .process-line {

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

    gap:
      35px;
  }

  .process-line::before {

    display:
      none;
  }

  .about-grid {

    grid-template-columns:
      1fr;

    gap:
      40px;
  }

  .cta-box {

    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   RESPONSIVE — 600px
========================================================= */

@media (max-width: 600px) {

  .container {

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

  .section {

    padding:
      70px 0;
  }

  .section-sm {

    padding:
      40px 0;
  }

  .nav-wrap {

    min-height:
      70px;
  }

  .brand-logo {

    width:
      120px;
  }

  .hero {

    min-height:
      auto;

    padding-top:
      125px;

    padding-bottom:
      70px;
  }

  .hero h1 {

    font-size:
      clamp(42px,11vw,62px);

    line-height:
      .96;

    letter-spacing:
      -.05em;
  }

  .hero-text {

    font-size:
      15px;
  }

  .hero-actions {

    flex-direction:
      column;
  }

  .hero-actions .btn {

    width:
      100%;
  }

  .hero-mini-stats {

    gap:
      25px;

    flex-wrap:
      wrap;
  }

  .hero-visual {

    min-height:
      390px;

    transform:
      scale(.86);

    transform-origin:
      center top;

    margin-bottom:
      -55px;
  }

  .dashboard {

    transform:
      none;
  }

  .floating-card {

    min-width:
      170px;

    padding:
      9px;
  }

  .payment-card {

    left:
      -5px;

    bottom:
      40px;
  }

  .automation-card {

    right:
      -5px;

    top:
      40px;
  }

  .visual-badge {

    display:
      none;
  }

  .logo-row {

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

  .services-grid {

    grid-template-columns:
      1fr;
  }

  .service-card {

    min-height:
      auto;
  }

  .process-line {

    grid-template-columns:
      1fr;
  }

  .project-browser .browser-top {

    height:
      38px;

    padding:
      0 10px;
  }

  .browser-url {

    font-size:
      9px;
  }

  .project-screenshot-placeholder {

    min-height:
      250px;
  }

  .placeholder-content {

    padding:
      25px;
  }

  .placeholder-icon {

    width:
      54px;

    height:
      54px;

    font-size:
      19px;
  }

  .placeholder-content strong {

    font-size:
      22px;
  }

  .project-brand-badge {

    left:
      12px;

    padding:
      11px 14px;
  }

  .project-brand-badge strong {

    font-size:
      11px;
  }

  .project-highlights {

    grid-template-columns:
      1fr;
  }

  .project-highlights div {

    border-right:
      none;

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

  .project-highlights div:last-child {

    border-bottom:
      none;
  }

  .project-actions {

    flex-direction:
      column;
  }

  .project-actions .btn {

    width:
      100%;
  }

  .pricing-card {

    padding:
      25px;
  }

  .package-description {

    min-height:
      auto;
  }

  .client-logos {

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

  .cta-box {

    padding:
      30px 24px;
  }

  .cta-contact .btn {

    width:
      100%;
  }

  .footer-main {

    grid-template-columns:
      1fr;

    justify-items:
      center;

    text-align:
      center;

    gap:
      25px;
  }

  .footer-links {

    gap:
      15px;
  }
}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media (max-width: 420px) {

  .hero h1 {

    font-size:
      41px;
  }

  .section-heading h2 {

    font-size:
      39px;
  }

  .hero-mini-stats {

    flex-direction:
      column;

    align-items:
      center;

    gap:
      12px;
  }

  .dashboard {

    width:
      100%;
  }

  .dash-content {

    padding:
      20px;
  }

  .dash-content h3 {

    font-size:
      23px;
  }

  .dash-cards {

    gap:
      7px;
  }

  .floating-card {

    min-width:
      145px;

    transform:
      scale(.9);
  }
}


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

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

  html {

    scroll-behavior:
      auto;
  }

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

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

  .js .reveal {

    opacity:
      1;

    transform:
      none;
  }
   .brand-logo {
  width: 145px;
  height: auto;
  display: block;
  object-fit: contain;

  transform-origin: center center;

  animation:
    logo-enter .9s cubic-bezier(.22, 1, .36, 1) both,
    logo-float 5s ease-in-out 1s infinite;

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

.brand-logo:hover {
  animation-play-state: paused;

  transform:
    translateY(-3px)
    scale(1.04);

  filter:
    drop-shadow(0 7px 18px rgba(0,183,255,.22));
}

@keyframes logo-enter {

  0% {
    opacity: 0;
    transform:
      translateY(-12px)
      scale(.92);
  }

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

}

@keyframes logo-float {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-3px);
  }

}
}