/* ========================================
   DESIGN TOKENS
======================================== */

:root {

  /* ========================================
     COLORS
  ======================================== */

  /* Brand */
  --color-primary: #3652E3;
  --color-primary-hover: #4C67F0;
  --color-primary-light: #5C75F5;

  /* Backgrounds */
  --color-bg-canvas: #0B1020;
  --color-bg-elevated: #101628;
  --color-surface: #12172A;
  --color-surface-hover: #171D35;

  /* Text */
  --color-heading: #F8FAFC;
  --color-body: #CBD5E1;
  --color-text-muted: #94A3B8;

  /* Borders */
  --color-border: rgba(255, 255, 255, .08);
  --color-border-hover: rgba(255, 255, 255, .12);



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

  /* Font Families */
  --font-family-heading: "Sora", sans-serif;
  --font-family-body: "Inter", sans-serif;

  /* Font Sizes */
  --font-size-display: 64px;
  --font-size-section-title: 48px;
  --font-size-subsection-title: 36px;
  --font-size-card-title: 30px;
  --font-size-button:16px;

  --font-size-body-large: 20px;
  --font-size-body-medium: 18px;
  --font-size-body: 17px;
  --font-size-small: 14px;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-heading: 1.1;
  --line-height-body: 1.7;



  /* ========================================
     SPACING SCALE
  ======================================== */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;



  /* ========================================
   SEMANTIC SPACING
======================================== */

  --section-spacing: var(--space-24);
  
  --section-grid-spacing: var(--space-20);
  
  --section-content-spacing: var(--space-20);
  
  --content-spacing: var(--space-16);
  
  --content-gap-medium: var(--space-10);
  
  --card-gap: var(--space-6); 

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

  --container-width: 1280px;
  --header-height: 96px;

  /* ========================================
     RADIUS
  ======================================== */

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

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

  --transition-fast: .25s ease;
  --transition-normal: .35s ease;
  --transition-slow: .5s ease;
}

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

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

html {

  scroll-behavior: smooth;

}

body {

  background: var(--color-bg-canvas);

  color: var(--color-heading);

  font-family: var(--font-family-body);

  line-height: var(--line-height-body);

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

img {

  max-width: 100%;

  display: block;

}

section {

  scroll-margin-top: var(--header-height);

}

::selection {

  background: var(--color-primary);

  color: var(--color-heading);

}

/* ========================================
LAYOUT - CONTAINER
======================================== */

.container {

  width: min(var(--container-width), 90%);

  margin-inline: auto;

}


/* ========================================
LAYOUT - STACK
======================================== */

.stack {

  display: flex;

  flex-direction: column;

  gap: var(--section-grid-spacing);

}


/* ========================================
LAYOUT - SPLIT
======================================== */

.split {

  display: grid;

  align-items: center;

  gap: var(--content-spacing);

}

/* ========================================
SECTION UTILITIES
======================================== */

.section-elevated {

  background: var(--color-bg-elevated);

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

}

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

@media (max-width: 1024px) {

  :root {

    /* Typography */
    --font-size-display: 56px;
    --font-size-section-title: 42px;
    --font-size-subsection-title: 32px;
    --font-size-card-title: 26px;

    --font-size-body-large: 19px;
    --font-size-body-medium: 17px;


    /* Spacing */
    --section-spacing: var(--space-20);

    --section-grid-spacing: var(--space-16);

    --section-content-spacing: var(--space-16);

    --content-spacing: var(--space-12);

    /* Layout */
    --header-height: 80px;

  }

}

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

@media (max-width: 600px) {

  :root {

    /* Typography */
    --font-size-display: 42px;
    --font-size-section-title: 34px;
    --font-size-subsection-title: 28px;
    --font-size-card-title: 22px;
    --font-size-button:15px;

    --font-size-body-large: 18px;
    --font-size-body-medium: 16px;
    --font-size-body: 16px;


    /* Spacing */
    --section-spacing: 72px;

    --section-grid-spacing: var(--space-12);

    --section-content-spacing: var(--space-12);

    --content-spacing: var(--space-10);

    --content-gap-medium: var(--space-6);

    --card-gap: var(--space-5);


    /* Layout */
    --header-height: 72px;

  }

}

/* ========================================
SECTION - HEADER
======================================== */

.site-header {

  position: sticky;

  top: 0;

  z-index: 1000;

  width: 100%;

  padding: var(--space-6) 0;


   transition:
    background var(--transition-normal),
    backdrop-filter var(--transition-normal),
    border-color var(--transition-normal);

}

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

.header-layout {

  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 48px;

}

/* ========================================
HEADER - SCROLLED
======================================== */

.site-header.scrolled {

  background:
    linear-gradient(180deg,
      rgba(20, 27, 51, .98),
      rgba(16, 22, 44, .96));

  backdrop-filter: blur(24px);

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

  border-bottom: 1px solid rgba(255, 255, 255, .05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

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

.site-logo {

  display: flex;

  align-items: center;

  text-decoration: none;

  flex-shrink: 0;

}

.site-logo-image {

  display: block;

  height: 62px;

  width: auto;

}



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

.header-nav {
  display: flex;
  align-items: center;
  gap: 12px;

  position: relative;
  overflow: hidden;

  padding: 10px 16px;

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

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .10),
      rgba(255, 255, 255, .02));

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

  backdrop-filter: blur(24px);

  transition:
  background var(--transition-normal),
  border-color var(--transition-normal),
  box-shadow var(--transition-normal);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    inset 0 -1px 0 rgba(255, 255, 255, .03),
    0 20px 40px rgba(0, 0, 0, .35),
    0 0 24px rgba(54, 82, 227, .08);
}

/* ========================================
HEADER NAV LINKS
======================================== */

.header-nav a {

  text-decoration: none;

  color: var(--color-text-muted);

  padding: 9px 20px;

  font-size: 16px;

  font-weight: var(--font-weight-medium);

  transition:
    color var(--transition-normal),
    text-shadow var(--transition-normal);
}

.header-nav:hover {

  border-color: rgba(76, 103, 240, .40);

  background:
    linear-gradient(135deg,
      rgba(54, 82, 227, .12),
      rgba(76, 103, 240, .05));

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 20px 40px rgba(0, 0, 0, .35),
    0 0 60px rgba(76, 103, 240, .30);
}


/* NAVIGATION LINKS HOVER */

.header-nav a:hover {
  color: var(--color-heading);

  text-shadow:
    0 0 10px rgba(76, 103, 240, .8);
}

/* NAVIGATION SHINE EFFECT */

.header-nav::before {
  content: "";

  position: absolute;

  top: 0;
  left: -100%;

  width: 50%;
  height: 100%;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .08),
      transparent);

  pointer-events: none;
}

/* ========================================
BUTTON - BASE
======================================== */


.button-primary,
.button-secondary {

  display: inline-flex;

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

  text-align: center;

  line-height: 1;
  font-weight: var(--font-weight-semibold);

  touch-action: manipulation;

}

/* ========================================
BUTTON - PRIMARY
======================================== */

.button-primary {

  position: relative;

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

  text-decoration: none;

  cursor: pointer;

  color: var(--color-heading);

  padding: 15px 34px;

  font-size: var(--font-size-button);

 font-weight: var(--font-weight-semibold);

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

  background:
    linear-gradient(180deg,
      var(--color-primary-hover),
      var(--color-primary));

  border: 1px solid rgba(76, 103, 240, .45);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 16px 36px rgba(54, 82, 227, .35);

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    background var(--transition-normal);
}

/* ========================================
BUTTON - PRIMARY HOVER
======================================== */

@media (hover:hover){

.button-primary:hover {

  color: var(--color-heading);

  transform:
    translateY(-3px);

  background:
    linear-gradient(
      180deg,
      var(--color-primary-light),
      var(--color-primary-hover)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 20px 45px rgba(54,82,227,.45),
    0 0 40px rgba(76,103,240,.30);

}

}

/* ========================================
BUTTON - PRIMARY FOCUS
======================================== */

.button-primary:focus-visible {

  outline: 2px solid var(--color-primary-hover);

  outline-offset: 4px;

}



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

.header-controls {

  display: flex;
  align-items: center;
  gap: var(--space-6);

}

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

.mobile-menu-toggle {

  display: none;

  flex-direction: column;
  justify-content: center;
  align-items:center;
  gap: 7px;

  padding: 0;

  width: 44px;
  height: 44px;

  border: none;
  background: transparent;

  cursor: pointer;

}

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

.mobile-menu-toggle span {

  height: 2px;

  background: var(--color-heading);

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

  transition:
    transform .3s ease,
    width .3s ease,
    opacity .3s ease;

}

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

  width: 22px;

}

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

  width: 18px;

}

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

.mobile-nav {

  position: fixed;

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

  z-index: 999;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  gap: 0;

 padding:
20px
24px
calc(24px + env(safe-area-inset-bottom));

  box-sizing: border-box;

  background:
    linear-gradient(180deg,
      #081024,
      #040918);

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

  backdrop-filter: blur(20px);

  transform: translateY(100%);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;

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

}

.mobile-nav a {

  display: block;

  padding: 18px 0;

  font-size: 1.125rem;

  font-weight: 500;

  letter-spacing: -0.02em;

  color: var(--color-heading);

  text-decoration: none;

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

}

@media(hover:hover){

.mobile-nav a:hover {

  color: var(--color-heading);

  text-shadow:
    0 0 12px rgba(255,255,255,.2);

}

}

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

.mobile-nav-cta {

  margin-top: 20px;

  width: fit-content;

  min-width: 120px;

  align-self: flex-start;

}

/* ========================================
MENU ACTIVE STATE
======================================== */

.mobile-nav.active {

  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  opacity: 1;

}


/* ========================================
HEADER - TABLET
======================================== */

@media (max-width:1024px){

  .site-header{
    padding:18px 0;
  }

  .site-logo img{
    height:54px;
  }

  .header-nav,
  .header-controls .open-project-modal{
    display:none;
  }

  .mobile-menu-toggle{
    display:flex;
  }

}

/* ========================================
HEADER - MOBILE
======================================== */

@media (max-width:600px){

  .site-header{
    padding:14px 0;
  }

  .site-logo img{
    height:46px;
  }

}

/* ========================================
BODY MENU STATE
======================================== */

body.menu-open {

  overflow: hidden;

}

.mobile-menu-toggle.active {

  gap: 0;

}

.mobile-menu-toggle.active span {

  width: 22px;

}

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

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

}

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

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

}

/* ========================================
SECTION - HERO
======================================== */

.section-hero {

padding-top: var(--space-8);
padding-bottom: var(--section-spacing);

}

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

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

 gap:var(--content-spacing);

  align-items: center;
}

.hero-content {
  max-width: 580px;
}

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

.hero-badge {
  display: inline-block;

  padding: 10px 18px;
  margin-bottom: 20px;

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

  color: var(--color-heading);

  font-size: var(--font-size-small);
  font-weight: 500;

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

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

/* ========================================
HERO TITLE
======================================== */
.hero-title {
  margin-top: 0;

  font-family:var(--font-family-heading);

  font-size: var(--font-size-display);
  line-height: 1.02;
  font-weight: 700;
}

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

.hero-description {
  margin-top: 32px;
  max-width: 500px;
  font-size: var(--font-size-body-large);
  line-height: 1.7;

  color: var(--color-text-muted);
}

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

.hero-actions {
  display: flex;
  gap: 16px;

  margin-top: 48px;
}

.button-secondary {
  text-decoration: none;

  color: var(--color-heading);

  padding: 15px 34px;

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

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

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

  backdrop-filter: blur(24px);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 10px 30px rgba(0, 0, 0, .25);

  transition:
 transform var(--transition-normal),
 box-shadow var(--transition-normal),
 border-color var(--transition-normal);
}

@media(hover:hover){

.button-secondary:hover {

  color:white;

  transform:
    translateY(-2px) scale(1.03);

  border-color:rgba(76,103,240,.35);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 15px 35px rgba(0,0,0,.35),
    0 0 35px rgba(76,103,240,.20);

}

}

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

.hero-canvas {

  position: relative;

  min-height: 540px;

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

}

/* ========================================
HERO AMBIENT GLOW
======================================== */

.hero-glow {

  position: absolute;

  top: 58%;

  left: 56%;

  width: 620px;

  height: 620px;

  border-radius: 50%;

  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle,
      rgba(76, 103, 240, .06),
      transparent 70%);

  filter: blur(90px);

  z-index: -1;

  pointer-events: none;

}

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

.hero-showcase {

  width: 100%;

  max-width: 980px;

  height: auto;

  display: block;

  transform: none;

  filter:
    drop-shadow(0 40px 80px rgba(0, 0, 0, .22)) drop-shadow(0 0 45px rgba(76, 103, 240, .10));

  transition:
    transform .4s ease;

}



/* ========================================
HERO - RESPONSIVE
======================================== */


/* ========================================
HERO - DESKTOP
1200px and Below
======================================== */

@media (max-width:1200px) {


  .hero-layout {

    gap: 40px;

  }


  .hero-content {

    max-width: 560px;

  }


  .hero-description {

    max-width: 460px;

  }


  .hero-canvas {

    min-height: 560px;

  }


  .hero-showcase {

    max-width: 820px;

  }


}


/* ========================================
HERO - STACK
900px and Below
======================================== */

@media (max-width:900px) {


  .hero-layout {

    grid-template-columns: 1fr;

    gap: 56px;

  }


  .hero-content {

    max-width: 700px;

    margin-inline: auto;

    text-align: center;

  }


  .hero-badge,
  .hero-title,
  .hero-description {

    margin-inline: auto;

  }


  .hero-actions {

    justify-content: center;

  }


  .hero-canvas {

    min-height: 460px;

    padding-right: 0;

  }


  .hero-showcase {

    width: 96%;

    max-width: 820px;

    margin-inline: auto;

  }


}


/* ========================================
HERO - MOBILE
480px and Below
======================================== */

@media (max-width:480px) {


  .section-hero {

    padding-top: 48px;

    padding-bottom: 56px;

  }


  .hero-layout {

    gap: var(--space-8);

  }


  .hero-badge {

    margin-bottom: 16px;

  }


  .hero-title {

    margin-top: 16px;

    max-width: 320px;

    letter-spacing: -1.5px;

  }


  .hero-description {

    margin-top: 24px;

    max-width: 100%;

  }


  .hero-actions {

    margin-top: 32px;

    gap: 12px;

    flex-wrap: wrap;

  }


  .button-primary,
  .button-secondary {

    padding: 14px 28px;

  }


  .hero-canvas {

    min-height: 260px;

  }


  .hero-showcase {

    width: 100%;

    max-width: 420px;

  }


}


/* ========================================
HERO - SMALL MOBILE
360px and Below
======================================== */

@media (max-width:360px) {


  .hero-actions {

    flex-direction: column;

    align-items: stretch;

    width: 100%;

  }


  .hero-actions .button-primary,
  .hero-actions .button-secondary {

    width: 100%;

    justify-content: center;

  }


}

/* ========================================
SECTION - SERVICES
======================================== */

.section-services {
  padding-block: var(--section-spacing);
}

/* ========================================
GLOBAL - SECTION HEADER
======================================== */

.section-header {
  max-width: 700px;
  margin: 0 auto var(--section-grid-spacing);
  text-align: center;
}

.section-label {
  display: inline-block;

  padding: 10px 18px;

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

  font-size: var(--font-size-small);
  font-weight: 500;

  color: var(--color-heading);

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

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

.section-title {
  margin-top: var(--space-6);

  font-family:var(--font-family-heading);
  font-size: var(--font-size-section-title);
  line-height: 1.1;
  font-weight: 700;

  max-width: 900px;
  margin-inline: auto;
}

.section-description {
  margin-top: var(--space-6);

  font-size: var(--font-size-body-medium);
  line-height: 1.8;

  color: var(--color-body);
}

/* SERVICES GRID */

.services-grid {
  display: grid;

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

  gap: var(--card-gap);

}

/* SERVICE CARD */

.service-card {


  position: relative;

  padding: var(--space-12);

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

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .06),
      rgba(255, 255, 255, .02));

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

  backdrop-filter: blur(24px);

  transition:
transform var(--transition-normal),
border-color var(--transition-normal),
box-shadow var(--transition-normal),
background var(--transition-normal);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 20px 40px rgba(0, 0, 0, .20);
}

/* CARD HOVER */

@media (hover:hover) {

  .service-card:hover {

    transform:
      translateY(-8px);

    border-color:
      rgba(76, 103, 240, .35);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .10),
      0 30px 50px rgba(0, 0, 0, .30),
      0 0 40px rgba(76, 103, 240, .20);

  }


  .service-card:hover .service-card-title {

    transform: translateY(-2px);

    color: var(--color-heading);

  }

}


/* TITLE */

.service-card-title {
  font-family:var(--font-family-heading);
  font-size: var(--font-size-card-title);
  line-height: 1.3;
  font-weight: 600;

  transition:
transform var(--transition-normal),
color var(--transition-normal);



}

/* DESCRIPTION */

.service-card-description {

  margin-top: var(--space-6);

  color: var(--color-body);

  font-size: var(--font-size-body);
  line-height: 1.8;
}

/* ========================================
SERVICES - 1024px
======================================== */

@media(max-width:1024px){

.service-card{

padding:var(--space-10);

}

}

/* ========================================
SERVICES - MOBILE
======================================== */

@media (max-width: 600px) {

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

  .service-card {
    padding:var(--space-10);

  }

}

/* ========================================
SERVICES - SMALL MOBILE
======================================== */

@media (max-width: 360px) {

  .service-card {
    padding:var(--space-8);
  }

}

/* ========================================
SECTION - FEATURED PROJECT
======================================== */

.section-featured-project {
  padding: var(--section-spacing) 0;
}

.project-layout {

  display: grid;

  grid-template-columns: 1.25fr .75fr;

  gap: var(--section-grid-spacing);


  align-items: stretch;

  margin-top: var(--section-content-spacing);

}

/* ========================================
PROJECT MEDIA
======================================== */

.project-media {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

}

.project-media img {

  width: 100%;

  height: auto;

  display: block;

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

  transition: transform var(--transition-slow);

  box-shadow:
    0 24px 60px rgba(0,0,0,.20);

}

.project-media a {

  display: block;

  overflow: hidden;

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

}

@media (hover:hover){

.project-media:hover img {

transform:scale(1.02);

}

}
/* ========================================
PROJECT CONTENT
======================================== */

.project-content {

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: var(--card-gap);

  max-width: 520px;

}

.project-content .button-primary {

  align-self: flex-start;

}

/* ========================================
PROJECT LABEL
======================================== */

.project-label {

  color: var(--color-primary);

  font-size: var(--font-size-small);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1px;

}

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

.project-name {

font-family: var(--font-family-heading);

font-size: var(--font-size-subsection-title);

line-height: var(--line-height-heading);

font-weight: var(--font-weight-bold);

}

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

.project-description {

  color: var(--color-body);

  line-height: 1.8;

  max-width: 470px;

  font-size:var(--font-size-body);

}

/* ========================================
PROJECT TAGS
======================================== */

.project-tags {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-3);

}

.project-tags span {

  padding: 9px 16px;
 border-radius: var(--radius-pill);

  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--color-body);

  font-size: var(--font-size-small);
  font-weight: 500;

  backdrop-filter: blur(24px);

}

.button-project {

  display: inline-flex;

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

  width: fit-content;

  padding: 14px 28px;

  gap: var(--space-2);

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

  text-decoration: none;

  background: rgba(54,82,227,.10);

  border: 1px solid rgba(54,82,227,.25);

  color: var(--color-heading);

  font-size: var(--font-size-small);

  font-weight: var(--font-weight-semibold);

  transition:
  transform var(--transition-normal),
  background var(--transition-normal),
  border-color var(--transition-normal),
  box-shadow var(--transition-normal);

}


.button-project span {

  transition:
    transform var(--transition-normal);


}

@media(hover:hover){


.button-project:hover {

transform: translateY(-2px);

background: var(--color-primary);

border-color: var(--color-primary);

box-shadow:
0 12px 30px rgba(54,82,227,.28);

}


.button-project:hover span {

transform: translateX(4px);

}


}

/* ========================================
FEATURED PROJECT - TABLET LANDSCAPE
======================================== */

@media (max-width:1024px) {

  .project-layout {

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

    align-items:center;

  }

}

/* ========================================
FEATURED PROJECT - TABLET
======================================== */

@media (max-width:900px) {

  .project-layout {

    grid-template-columns: 1fr;

    gap:var(--section-content-spacing);

  }

  .project-media {

    margin-inline: auto;

     max-width: 100%;
  }

  .project-content {

    max-width: 700px;

    margin-inline: auto;

    align-items: center;

    text-align: center;

    gap:var(--card-gap);

  }

  .project-description {

    max-width: 600px;

  }

  .project-content .button-primary {

    align-self: center;

  }

  .project-tags {

    justify-content: center;

    gap: var(--space-3);

  }

}

/* ========================================
FEATURED PROJECT - MOBILE
======================================== */

@media(max-width:600px){


.project-tags {

justify-content:center;

gap:var(--space-3);

}


.project-tags span {

padding:9px 16px;

}


}

/* ========================================
SECTION - PROCESS
======================================== */

.section-process {

  padding: var(--section-spacing) 0;
}


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

.process-grid {

  display: grid;

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

  gap: var(--card-gap);

  margin-top: var(--section-content-spacing);

}

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

.process-card {

  min-height: auto;

  padding: var(--space-12);

  display: flex;

  flex-direction: column;

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

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .06),
      rgba(255, 255, 255, .02));

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

  backdrop-filter: blur(24px);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 20px 40px rgba(0, 0, 0, .20);

  transition:
  transform var(--transition-normal),
  border-color var(--transition-normal),
  box-shadow var(--transition-normal);
}


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

.process-card-title {

  font-family: var(--font-family-heading);

  font-size: var(--font-size-card-title);

  line-height: 1.3;

  font-weight: 600;

 margin-bottom: var(--space-6);

  transition:
  color var(--transition-normal),
  transform var(--transition-normal);

}

/* ========================================
PROCESS CARD HOVER
======================================== */

@media (hover:hover){

.process-card:hover {

  transform:translateY(-10px);

  border-color:
  rgba(76,103,240,.3);

  box-shadow:
  0 30px 60px rgba(0,0,0,.35),
  0 0 50px rgba(76,103,240,.15);

}


.process-card:hover .process-card-title {

  transform:translateY(-3px);

}


.process-card:hover .process-card-description {

  transform:translateY(-1px);

}

}

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

.process-card-description {

  margin-top: auto;

  color: var(--color-body);

  line-height: 1.8;

  font-size: var(--font-size-body);

  transition:
  transform var(--transition-normal);

}

/* ========================================
PROCESS - TABLET
======================================== */

@media (max-width:1024px) {

  .process-grid {

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

  .process-card{

   padding:var(--space-10);

}

}


/* ========================================
PROCESS - MOBILE
======================================== */

@media(max-width:600px){


.process-grid{

grid-template-columns:1fr;

gap:var(--card-gap);

}


.process-card{

padding:var(--space-10);

}


}

/* ========================================
SECTION - WHY US
======================================== */

.section-why-choose {
 padding: var(--section-spacing) 0;
}

.why-choose-layout {

  display: grid;

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

  gap: var(--section-grid-spacing);

  align-items: start;

}

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

.why-choose-intro {

  position: sticky;

  top: calc(var(--header-height) + var(--space-10));

}

/* ========================================
RIGHT STACK
======================================== */

.why-choose-stack {

  display: flex;

  flex-direction: column;

  gap:var(--content-gap-medium);

}

/* ========================================
WHY CHOOSE CARD
======================================== */

.why-choose-card {

  position: sticky;

  top: calc(var(--header-height) + var(--space-10));

  gap: var(--space-5);

  padding:
  var(--space-12)
  var(--space-16);

  min-height: 340px;

  display: flex;

  flex-direction: column;

  justify-content: center;

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

  background:
    linear-gradient(135deg,
      #1A2038,
      #11182F);

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

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 20px 40px rgba(0, 0, 0, .20);

  transition:
  transform var(--transition-normal),
  border-color var(--transition-normal),
  box-shadow var(--transition-normal);

}

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

.why-choose-card .why-choose-title {

  font-size: var(--font-size-subsection-title);

  line-height: 1.15;

  max-width: 650px;

  font-weight:var(--font-weight-bold);

}

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

.why-choose-card .why-choose-description {

  max-width: 650px;

  font-size: var(--font-size-body-medium);

  line-height: var(--line-height-body);

}



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

@media (hover:hover){

.why-choose-card:hover {

  transform: translateY(-6px);

  border-color: rgba(76, 103, 240, .35);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 30px 60px rgba(0, 0, 0, .30),
    0 0 40px rgba(76, 103, 240, .20);

}
}

/* ========================================
TAG
======================================== */

.why-choose-tag {

  display: inline-flex;

  align-items: center;

  width: max-content;

  padding:
  var(--space-2)
  var(--space-5);

  margin-bottom: var(--space-2);

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

  background: rgba(76,103,240,.10);

  border: 1px solid rgba(76,103,240,.35);

  color: var(--color-primary-hover);

  font-size: var(--font-size-small);

  font-weight: var(--font-weight-semibold);

  letter-spacing:1px;

  text-transform:uppercase;

}

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

.why-choose-title {

  font-family:var(--font-family-heading);

  font-size: var(--font-size-section-title);

  line-height: 1.08;

  font-weight: var(--font-weight-bold);

  max-width: 620px;

}

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

.why-choose-description {
  max-width: 600px;

  color: var(--color-body);

  font-size: var(--font-size-body-large);

  line-height: var(--line-height-body);
}

/* ========================================
SUBTLE HIGHLIGHT
======================================== */

.why-choose-card::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: inherit;

  background:

    radial-gradient(ellipse at top,

      rgba(255, 255, 255, .04),

      transparent 70%);

  pointer-events: none;

}


/* ========================================
WHY CHOOSE - TABLET
======================================== */

@media (max-width: 900px) {

  .why-choose-layout {

    grid-template-columns: 1fr;

    gap: var(--section-grid-spacing);

}

  .why-choose-intro,
  .why-choose-card {
    position: static;
  }

  .why-choose-stack {
   gap: var(--card-gap);
  }

  .why-choose-card{

   padding:var(--space-12);
  }

}

/* ========================================
WHY CHOOSE - MOBILE
======================================== */

@media(max-width:600px){


.why-choose-card{

padding:var(--space-10);

min-height:auto;

}


.why-choose-title{

max-width:100%;

}


.why-choose-description{

max-width:100%;

}


}

/* ========================================
SECTION - FAQ
======================================== */

.section-faq {

  padding: var(--section-spacing) 0;

  background: var(--color-bg-elevated);

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

}

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

.faq-layout {

  display: grid;

  grid-template-columns: 1fr 1.1fr;

  gap: var(--section-grid-spacing);

  align-items: start;

}


/* ========================================
FAQ INTRO
======================================== */

.faq-intro {

  position: sticky;

   top: calc(var(--header-height) + var(--space-10));

}


.faq-intro .button-primary {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: max-content;

  margin-top: var(--space-12);

}


/* ========================================
FAQ ACCORDION
======================================== */

.faq-accordion {

  display: flex;

  flex-direction: column;

  gap: var(--card-gap);

}


/* ========================================
FAQ ITEM
======================================== */

.faq-item {

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

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.02));

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

  overflow: hidden;

  transition:
  border-color var(--transition-normal);

}


@media (hover:hover){

  .faq-item:hover {

    border-color: rgba(76,103,240,.35);

  }

}


/* ========================================
FAQ QUESTION
======================================== */

.faq-question {

  width: 100%;

  padding: var(--space-6) var(--space-8);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-6);

  background: transparent;

  border: none;

  cursor: pointer;

  text-align: left;

  color: var(--color-heading);

  font-family: var(--font-family-heading);

  font-size: var(--font-size-body-large);

  font-weight: var(--font-weight-semibold);

}


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

.faq-icon {

  font-size: 28px;

  transition:
  transform var(--transition-normal);

}


/* ========================================
FAQ ANSWER
======================================== */

.faq-answer {

  max-height: 0;

  overflow: hidden;

  transition:
  max-height var(--transition-normal);
}


.faq-answer p {

  padding:

    0 var(--space-8)

    var(--space-8);

  color:var(--color-body);

  line-height: var(--line-height-body);

  font-size: var(--font-size-body);

}


/* ACTIVE STATE */

.faq-item.active .faq-answer {

  max-height: 200px;

}


.faq-item.active .faq-icon {

  transform: rotate(45deg);

}

/* ========================================
FAQ - TABLET
======================================== */

@media (max-width: 900px) {

  .faq-layout {

    grid-template-columns: 1fr;

    gap: var(--section-grid-spacing);

  }


  .faq-intro {

    position: static;

    text-align: center;

  }


  .faq-intro .button-primary {

    margin-inline: auto;

  }

}

/* ========================================
FAQ - MOBILE
======================================== */

@media(max-width:600px){


.faq-question {

padding:
  var(--space-5)
  var(--space-6);

gap:var(--space-4);

}


.faq-answer p {

padding:
  0
  var(--space-6)
  var(--space-6);

}

.faq-icon{

font-size:24px;

}


}

/* ========================================
PROJECT MODAL
======================================== */

.project-overlay {

  position: fixed;
  inset: 0;

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

  padding: 32px;

  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(12px);

  overflow-y: auto;

  z-index: 9999;

}

.project-overlay.active {

  display: flex;

}

/* ========================================
MODAL WRAPPER
======================================== */

.project-modal {

  position: relative;

   width: min(620px, 92vw);

  max-height: 88vh;

  display: flex;

  flex-direction: column;

  background:
    linear-gradient(135deg,
      #141B33,
      #0F152B);

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

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

  overflow: hidden;
  overscroll-behavior: contain;

  box-shadow:
    0 40px 80px rgba(0, 0, 0, .45);

  transition:
transform var(--transition-normal),
opacity var(--transition-normal);

}

/* ========================================
MODAL TOP BAR
======================================== */

.modal-top {

  display: flex;

  align-items: center;

  gap:var(--space-3);

  padding:
var(--space-5)
var(--space-8);

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

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .04),
      rgba(255, 255, 255, .02));

}

/* ========================================
MODAL BODY
======================================== */

.modal-body {

  display: flex;

  flex-direction: column;

   gap: 16px;

  padding: 32px;

}

/* ========================================
MODAL ROW
======================================== */

.modal-row {

  display: grid;

  grid-template-columns: 120px 1fr;

  align-items: center;

  gap: var(--space-5);

  padding-bottom:12px;

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

}

/* ========================================
LABEL
======================================== */

.modal-row label {

  color: var(--color-heading);

  font-size: var(--font-size-body-large);

  font-weight: var(--font-weight-semibold);

  line-height: 1;

}

/* ========================================
INPUTS
======================================== */

.modal-row input,
.modal-row select{

    width:100%;

    min-height:46px;

    border:none;

    background:transparent;

    outline:none;

    color:var(--color-heading);

    font-size:var(--font-size-body-large);

    font-family:inherit;

}

.modal-row input::placeholder {
  color: var(--color-body);
  opacity: .9;
}


.modal-row input:focus,
.modal-message textarea:focus,
.modal-select select:focus {

  color: var(--color-heading);

}

.modal-row:has(input:focus),
.modal-row:has(select:focus) {

  border-bottom-color: rgba(76, 103, 240, .30);

}

.modal-message textarea:focus {

  border-color: rgba(76, 103, 240, .30);

  box-shadow: 0 0 0 3px rgba(76, 103, 240, .08);

}

/* ========================================
MAC DOTS
======================================== */

.modal-dot{

  width:14px;
  height:14px;

  border-radius:50%;

  border:none;
  padding:0;
  margin:0;

  appearance:none;
  -webkit-appearance:none;

  background:none;

  display:block;

  cursor:default;

  flex-shrink:0;

}

.modal-dot.red {
  background: #FF5F57;
}

.modal-dot.yellow {
  background: #FEBC2E;
}

.modal-dot.green {
  background: #6EE7A2;
}

/* ========================================
CLOSE BUTTON
======================================== */

.modal-close{

  cursor:pointer;

  transition:opacity .25s ease;

}


@media (hover:hover){

.modal-close:hover {

  transform:scale(1.15);
  opacity:.8;

}

}

.modal-close:focus-visible{

  outline:2px solid rgba(255,255,255,.45);

  outline-offset:4px;

}


/* ========================================
BODY MODAL STATE
======================================== */

body.modal-open {

  overflow: hidden;

}



/* ========================================
RECIPIENT
======================================== */

.modal-recipient{

  display:flex;

  align-items:center;

  color:var(--color-heading);

  font-size:18px;

  font-weight:var(--font-weight-medium);

  line-height:1.4;

}

/* ========================================
PROJECT DETAILS
======================================== */

.modal-message{

display:flex;

flex-direction:column;

gap: var(--space-4);

 padding-top: var(--space-1);

}

.modal-message label {

  color: var(--color-heading);

  font-size: var(--font-size-body-large);

  font-weight: var(--font-weight-semibold);

  line-height: 1;

}

.modal-message textarea {

  width: 100%;

  min-height: 100px;

  margin-top: 0;

  padding: 18px 20px;

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

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

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

  resize: none;

  outline: none;

  color: var(--color-heading);

  font-size: var(--font-size-body-medium);

  line-height: 1.6;

  font-family: inherit;

}

.modal-message textarea::placeholder {

  color: var(--color-body);

  opacity: 1;

}

/* ========================================
SUBMIT BUTTON
======================================== */

.modal-body .button-primary {

  align-self: flex-end;

  margin-top:8px;

}

#submit-button {

  position: relative;

  z-index: 2;

}

.modal-row select {

  appearance: none;

  -webkit-appearance: none;

  background: transparent;

  color: var(--color-heading);

  cursor: pointer;

}

.modal-select {
  position: relative;
  width: fit-content;
}

.modal-select select {

  width: auto;

  min-height: 52px;

  padding: 0 48px 0 24px;

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

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

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

  color: var(--color-heading);

  font-size: var(--font-size-body-medium);

}

.modal-select option {

  background: #12172A;

  color: white;

}

.modal-select::after {

  content: "▾";

  position: absolute;

  right: 20px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--color-heading);

  pointer-events: none;

  font-size: 18px;
}


/* ========================================
FORM STATES
======================================== */

.modal-state {

  display: none;

  padding: 60px 40px;

  text-align: center;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 28px;

  min-height: 480px;

}

.modal-state.active {

  display: flex;

}

.hidden {
  display: none;
}


.honeypot {

  position: absolute;

  left: -9999px;

  opacity: 0;

  pointer-events: none;

}

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

.state-icon {

  width: 88px;

  height: 88px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  font-size: 42px;

  font-weight: 700;

}

.state-icon.success {

  color: #65E28A;

  background:

    rgba(101, 226, 138, .12);

  border:

    1px solid rgba(101, 226, 138, .25);

}

.state-icon.error {

  color: #FF8A8A;

  background:

    rgba(255, 138, 138, .12);

  border:

    1px solid rgba(255, 138, 138, .25);

}

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

.modal-state h3 {

  font-family:var(--font-family-heading);

  font-size:var(--font-size-subsection-title);

  font-weight:var(--font-weight-bold);

}

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

.modal-state p {

  max-width: 520px;

  color: var(--color-body);

  font-size:var(--font-size-body-large);

  line-height: 1.8;

}

/* ========================================
BUTTON LOADING
======================================== */

.button-primary.loading {

  pointer-events: none;

  opacity: .75;

}

/* ========================================
INPUT ERROR
======================================== */

.modal-row input.error,

.modal-message textarea.error {

  border-bottom:

    1px solid rgba(255, 90, 90, .6);

}

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

.modal-state.active {

  animation:

    modalFade .45s ease;

}

@keyframes modalFade {

  from {

    opacity: 0;

    transform: translateY(18px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

/* ========================================
PROJECT MODAL - SHORT VIEWPORT
======================================== */

@media (max-height: 850px) {

  .project-overlay {

    align-items: center;
    justify-content: center;
    padding: 16px;

  }

  .project-modal {

     max-height:calc(100dvh - 32px);

  }

}

/* ========================================
PROJECT MODAL - TABLET
======================================== */

@media (max-width:900px){

.project-modal{

  width:min(560px,92vw);

}

.modal-body{

  padding:24px;

  gap:12px;

}

.modal-row{

  grid-template-columns:90px 1fr;

  gap:var(--space-4);

  padding-bottom:10px;

}

.modal-message{

  gap:var(--space-2);

}

.modal-message textarea{

  min-height:90px;

}

.modal-body .button-primary{

  align-self:flex-end;

}

}

/* ========================================
PROJECT MODAL - MOBILE
======================================== */

@media (max-width:600px){

.project-modal{

    width: calc(100vw - 56px);

   max-height:calc(100dvh - 24px);

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

}

.modal-top{

  padding:16px 18px;

}

.modal-body{

  padding:
    var(--space-5)
    var(--space-5);

  gap:12px;

}

.modal-row{

  grid-template-columns:1fr;

  gap:var(--space-3);

  padding-bottom:var(--space-3);

}

.modal-row:first-child{

    grid-template-columns:auto 1fr;

    align-items:center;

}

.modal-row label{

  font-size:16px;

}

.modal-row input,
.modal-row select{

  min-height:46px;

  font-size:16px;

}

.modal-message textarea{

  min-height:72px;

  padding:14px 18px;

  font-size:16px;

}

.modal-select,
.modal-select select{

  width:100%;

}

.modal-body .button-primary{

  width:100%;

}

}

/* ========================================
PROJECT MODAL - SHORT MOBILE DEVICES
======================================== */

@media (max-width:600px) and (max-height:700px){

  .project-modal{

    max-height:88dvh;

  }

  .modal-body{

  padding:
    var(--space-4)
    var(--space-5);

  gap:var(--space-2);

}

  .modal-row{

  gap:var(--space-2);

  padding-bottom:var(--space-2);

}

  .modal-message textarea{

    min-height:64px;

  }

}

/* ========================================
SECTION - CTA
======================================== */

.section-cta {

 padding: var(--section-spacing) 0;

 background: var(--color-bg-canvas);

}


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

.cta-content {

  max-width: 1000px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: var(--content-gap-medium);

}


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

.cta-content .section-title {

  max-width: 800px;

  text-align: center;

  margin: 0 auto;

}


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

.cta-content .section-description {

  max-width: 720px;

  margin: 0;

  text-align: center;

  font-size: var(--font-size-body-large);

  line-height: var(--line-height-body);

}

/* ========================================
SECTION - FOOTER
======================================== */

.site-footer {

  padding: var(--space-24) 0 var(--space-6);

  background: var(--color-bg-elevated);

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

}

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

.footer-top {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--section-grid-spacing);

  margin-bottom: var(--space-12);

  align-items:start;

}

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

.footer-brand {

  max-width: 520px;

}

.footer-logo {

  display: inline-flex;

  align-items: center;

  text-decoration: none;

  margin-bottom: var(--space-6);

}

.footer-logo-image {

  display: block;

  height: 62px;

  width: auto;

}

.footer-description {

  color: var(--color-body);

  font-size: var(--font-size-body-medium);

  line-height:var(--line-height-body);


}

/* ========================================
LINKS
======================================== */

.footer-links {

  display: grid;

  grid-template-columns: auto auto;

  justify-content: start;

  gap: var(--section-grid-spacing);

}

.footer-column {

 display:flex;

 flex-direction:column;

 gap:var(--space-4);

}

.footer-heading {

 color:var(--color-heading);

 font-size:var(--font-size-body-large);


 font-weight:var(--font-weight-bold);

 margin-bottom:var(--space-2);

}

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

.footer-column a,
.footer-column span {

  color: var(--color-text-muted);

  font-size: var(--font-size-body);

  font-weight: var(--font-weight-regular);

  text-decoration: none;

  transition:
color var(--transition-normal),
transform var(--transition-normal);

}

@media (hover:hover){

.footer-column a:hover {

  color: var(--color-heading);

  transform: translateX(4px);

}

}

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

.footer-bottom {

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

  padding-top: var(--space-8);

  text-align:center;

}

.footer-bottom p {

  color: var(--color-body);

  font-size:var(--font-size-small);

}


/* Tablet */

@media (max-width:1024px) {

  .footer-top {

    grid-template-columns: 1fr;

     gap: var(--section-grid-spacing);

  }

  .footer-brand {

    max-width: 520px;

  }

  .footer-logo-image{

  height:54px;

}

  .footer-links {

    width: 100%;

    grid-template-columns: 1fr 1fr;

    gap: var(--card-gap);

  }

  .site-footer {

    padding: var(--section-spacing) 0 var(--space-8);

  }

}

/* ========================================
FOOTER - MOBILE
======================================== */

@media(max-width:600px){


.footer-links{

grid-template-columns:1fr;

gap:var(--space-6);

}

.footer-top{

margin-bottom:var(--space-8);

}

.footer-logo-image{

  height:46px;

}

.footer-contact{

margin-top:var(--space-2);

padding-top:var(--space-6);

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

gap:var(--space-4);

}


}

/* ========================================
WHATSAPP FLOAT
======================================== */

.whatsapp-float {

  position: fixed;

  right: 32px;
  bottom: 32px;

  width: 68px;
  height: 68px;

  display: flex;
  align-items: center;

  overflow: hidden;

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

  text-decoration: none;

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

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

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

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 18px 40px rgba(0, 0, 0, .35);

  transition:
    width .35s ease,
    transform .35s ease,
    box-shadow .35s ease;

  z-index: 9999;

}

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

.whatsapp-icon {

  width: 68px;
  height: 68px;

  flex-shrink: 0;

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

}

.whatsapp-icon svg {

  width: 28px;
  height: 28px;

 fill: var(--color-heading);

}

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

.whatsapp-text {

  font-size: 18px;

  font-weight: var(--font-weight-semibold);

  color: var(--color-heading);

  white-space: nowrap;

  opacity: 0;

  transform: translateX(10px);

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

}

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

@media (hover:hover) {

  .whatsapp-float:hover {

    width: 185px;

    transform: translateY(-4px);

  }


  .whatsapp-float:hover .whatsapp-text {

    opacity: 1;

    transform: translateX(0);

  }

}

/* ========================================
WHATSAPP - MOBILE
======================================== */

@media(max-width:600px){


.whatsapp-float{

width:60px;

height:60px;

right:var(--space-5);

bottom:
calc(var(--space-5) + env(safe-area-inset-bottom));

}


.whatsapp-icon{

width:60px;

height:60px;

}


.whatsapp-icon svg{

width:26px;

height:26px;

}


.whatsapp-text{

display:none;

}


}