:root{
  --bg:#f6f7fb;
  --bg-2:#eef1f8;
  --surface:#ffffff;
  --surface-2:#f1f3f9;
  --ink:#0b1020;
  --ink-2:#1a2138;
  --muted:#000000;
  --line:rgba(11,16,32,.08);
  --brand:#5b6cff;
  --brand-2:#8a5bff;
  --accent:#22c1c3;
  --pink:#ff6ea1;
  --grad:linear-gradient(135deg,#5b6cff 0%,#8a5bff 50%,#22c1c3 100%);
  --grad-soft:linear-gradient(135deg,rgba(91,108,255,.12),rgba(138,91,255,.10),rgba(34,193,195,.10));
  --shadow-1:0 10px 30px -12px rgba(11,16,32,.12);
  --shadow-2:0 30px 80px -30px rgba(91,108,255,.35);
  --radius:18px;
  --brand-gradient: linear-gradient(
    90deg,
    #111827,
    #4c1d95,
    #8b5cf6
  );
    --font-primary: "Inter", "Segoe UI", Arial, sans-serif;
	
	/* =========================
     TYPOGRAPHY SCALE
  ========================== */

  /* HERO */
  --text-hero: clamp(38px, 5vw, 72px);

  /* HEADINGS */
  --text-h1: clamp(30px, 3.5vw, 56px);
  --text-h2: clamp(24px, 2.8vw, 40px);
  --text-h3: clamp(20px, 2vw, 30px);
  --text-h4: clamp(18px, 1.5vw, 24px);

  /* BODY */
    --text-xl: clamp(18px, 1.4vw, 20px);
  --text-lg: clamp(16px, 1.2vw, 18px);
  --text-md: clamp(15px, 1vw, 16px);
  --text-sm: clamp(13px, 0.9vw, 14px);
  --text-xs: clamp(11px, 0.8vw, 12px);
  
  /* SPECIAL */
  --text-platforms: clamp(22px, 2vw, 30px);

  /* =========================
     LINE HEIGHT
  ========================== */

  --lh-tight: 0.92;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html{
  font-size:16px;
}

body{
  font-family:var(--font-primary);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
}

/* h1,h2,h3,h4,h5,h6{ */
  /* font-family:var(--font-primary); */
  /* color:var(--ink); */
  /* font-weight:700; */
  /* letter-spacing:-0.02em; */
  /* line-height:1.15; */
  /* margin:0; */
/* } */

/* h1{ */
  /* font-size:clamp(3rem,6vw,4rem); /* 48-64px */ */
/* } */

/* h2{ */
  /* font-size:clamp(2.4rem,4vw,3rem); /* 38-48px */ */
/* } */

/* h3{ */
  /* font-size:1.75rem; /* 28px */ */
/* } */

/* h4{ */
  /* font-size:1.375rem; /* 22px */ */
/* } */

/* p{ */
  /* font-size:1rem; /* 16px */ */
  /* color:var(--muted); */
/* } */

/* hero heading colors */
.grad-text{
  background:var(--brand-gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.nav-links >a.active::after{
  background:var(--brand-gradient);
}

.btn-primary{
  background:var(--brand-gradient)!important;
}
/* =========================
   NAVBAR
========================= */

.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  display:flex;
  justify-content:center;
}

.nav-inner{
  width:100%;
  height:86px;

  display:flex;
  align-items:center;

  padding:0 28px;

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

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

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

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

.brand{
  display:flex;
  align-items:center;
  z-index:102;
}

.brand-link{
  display:flex;
  align-items:center;
}

.brand-logo{
  width:180px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.brand-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

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

.nav-links{
  display:flex;
  align-items:center;
  gap:28px;
  margin-left:auto;
}

.nav-links a,
.dropdown-toggle{
  color:rgba(255,255,255,.75);
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  transition:.25s ease;
}
.dropdown-toggle.active{
  color:#fff;
  position:relative;
}

.dropdown-toggle.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:100%;
  height:3px;
  background:var(--brand-gradient);
  border-radius:999px;
}
.nav-links a:hover,
.dropdown-toggle:hover,
.nav-links a.active{
  color:#fff;
}

/* Active link */

.nav-links a.active{
  position:relative;
}

.nav-links >a.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;

  width:100%;
  height:3px;

  background:var(--brand-gradient);

  border-radius:999px;
}
/* =========================
   CTA BUTTON
========================= */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 20px;
  border-radius: 14px;

  font-size: 0.95rem;
  font-weight: 500;

  text-decoration: none;   /* IMPORTANT */
  cursor: pointer;

  border: none;
  outline: none;

  transition: all 0.25s ease;

  white-space: nowrap;
}
.btn-primary{
  display:flex;
  align-items:center;
  justify-content:center;

  height:48px;
  padding:0 24px;

  border-radius:999px;
  background:var(--brand-gradient);

  color:#fff;
  font-size:14px;
  font-weight:700;
  text-align:center;

  transition:.25s ease;
}

.btn-primary:hover{
  transform:translateY(-2px);
}

.desktop-cta{
  margin-left:24px;
}

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

.nav-dropdown{
  position:relative;
}

.dropdown-toggle{
  background:none;
  border:none;
  cursor:pointer;

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

  color:rgba(255,255,255,.75);
  font-size:15px;
  font-weight:500;
  font-family:inherit;

  transition:.25s ease;
}

.dropdown-arrow{
  font-size:.7rem;
  transition:.25s ease;
}

.dropdown-menu{
  position:absolute;
  top:220%;
  left:0;

  min-width:240px;

  padding:10px;

  display:flex;
  flex-direction:column;
  gap:6px;

  border-radius:18px;

  background:#111827;

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

  backdrop-filter:blur(18px);

  box-shadow:
    0 20px 50px rgba(0,0,0,.45);

  opacity:0;
  visibility:hidden;

  transform:translateY(10px);

  transition:.28s ease;

  z-index:9999;
}

.dropdown-menu a{
  display:block;

  padding:12px 16px;

  border-radius:12px;

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

  text-decoration:none;

  transition:.25s ease;
}

.dropdown-menu a:hover{
  background:rgba(139,92,246,.10);
  color:#8b5cf6;

  transform:translateX(4px);
}
.dropdown-menu a.active{
  background:rgba(139,92,246,.10);
  color:#8b5cf6;
  transform:translateX(4px); /* optional, matches hover feel */
}
@media (min-width:981px){

  .nav-dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .nav-dropdown:hover .dropdown-arrow{
    transform:rotate(180deg);
  }
}
/* .nav::after{ */
  /* content:""; */
  /* position:absolute; */
  /* bottom:0; */
  /* left:0; */

  /* width:100%; */
  /* height:2px; */

  /* background:var(--brand-gradient); */
/* } */
/* =========================
   HAMBURGER
========================= */

#menu-toggle{
  display:none;
}

.hamburger-btn{
  display:none;

  margin-left:auto;

  flex-direction:column;
  gap:6px;

  cursor:pointer;

  z-index:102;
}

.hamburger-btn span{
  width:26px;
  height:2px;

  background:#fff;

  transition:.3s ease;
}

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

.mobile-contact-btn{
  display:none !important;
}

@media (max-width:980px){

  .nav-inner{
    height:76px;
    padding:0 18px;
  }

  .brand-logo{
    width:145px;
    height:50px;
  }

  .desktop-cta{
    display:none !important;
  }

  .hamburger-btn{
    display:flex;
  }

  .nav-links{
    position:fixed;

    top:0;
    left:0;
    right:0;

    height:100vh;

    background:#000;

    flex-direction:column;
    align-items:flex-start;

    gap:20px;

    padding:100px 24px 40px;

    overflow-y:auto;

    opacity:0;
    visibility:hidden;

    transform:translateY(-20px);

    transition:.3s ease;

    z-index:101;
  }

  #menu-toggle:checked ~ .nav-links{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .nav-links a,
  .dropdown-toggle{
    width:100%;
    padding:10px 0;

    font-size:20px;

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

  .mobile-contact-btn{
    display:flex !important;
    width:100%;
    margin-top:10px;
    justify-content:center;
  }

  .nav-dropdown{
    width:100%;
  }

  .dropdown-toggle{
    justify-content:space-between;
  }

  .dropdown-menu{
    position:relative;

    top:0;
    left:0;

    width:100%;

    margin-top:8px;

    border:none;
    box-shadow:none;

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

    max-height:0;

    overflow:hidden;

    opacity:0;
    visibility:hidden;
  }

  .nav-dropdown:hover .dropdown-menu,
  .nav-dropdown:focus-within .dropdown-menu{
    max-height:500px;
    opacity:1;
    visibility:visible;
  }

  .nav-dropdown:hover .dropdown-arrow,
  .nav-dropdown:focus-within .dropdown-arrow{
    transform:rotate(180deg);
  }

  /* Hamburger Animation */

  #menu-toggle:checked
  ~ .hamburger-btn span:nth-child(1){
    transform:
      translateY(8px)
      rotate(45deg);
  }

  #menu-toggle:checked
  ~ .hamburger-btn span:nth-child(2){
    opacity:0;
  }

  #menu-toggle:checked
  ~ .hamburger-btn span:nth-child(3){
    transform:
      translateY(-8px)
      rotate(-45deg);
  }
  /* =========================
   MOBILE SUB DROPDOWN
========================= */

.subdropdown-menu{
  position:relative;

  left:0;
  top:0;

  width:100%;
  min-width:100%;

  margin-top:8px;
  margin-left:16px;

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

  border:none;
  box-shadow:none;

  max-height:0;

  overflow:hidden;

  opacity:0;
  visibility:hidden;

  transform:none;
}

.nav-subdropdown:hover .subdropdown-menu,
.nav-subdropdown:focus-within .subdropdown-menu{
  max-height:500px;

  opacity:1;
  visibility:visible;
}

.nav-subdropdown:hover .dropdown-arrow,
.nav-subdropdown:focus-within .dropdown-arrow{
  transform:rotate(180deg);
}
}
}
.dropdown-menu{
  overflow:visible;
}
/* =========================
   SUB DROPDOWN
========================= */

.nav-subdropdown{
  position:relative;
}

.subdropdown-menu{
  position:relative;

  left:0;
  top:0;

  min-width:100%;

  margin-top:6px;
  margin-left:16px;

  padding-left:12px;

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

  opacity:0;
  visibility:hidden;
  max-height:0;

  overflow:hidden;

  transform:none;

  transition:.25s ease;
}

.nav-subdropdown:hover .subdropdown-menu{
  opacity:1;
  visibility:visible;
  max-height:300px;
}

/* Desktop */
@media (min-width: 992px) {
    .nav-dropdown:hover .dropdown-menu {
        display: block;
    }
}
/* =========================================
   FOOTER
========================================= */

footer{
  background:#06090d;
  border-top:1px solid rgba(255,255,255,.08);
  padding:60px 0 40px;
  color:#fff;
}

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

.foot-grid{
  display:grid;
  grid-template-columns:1.3fr .9fr .7fr .8fr;
  gap:50px;
  margin-bottom:34px;
}

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

.brand-wrap{
  margin-bottom:16px;
}

.brand-name{
  font-family:'Inter',sans-serif;
  font-size:24px;
  font-weight:700;
  color:#4ACAF7;
  line-height:1.2;
}

.foot-about{
  max-width:320px;
  margin-top:14px;

  color:rgba(255,255,255,.85);
  font-size:14px;
  line-height:1.8;
}

.foot-address{
  margin-top:18px;

  color:rgba(255,255,255,.72);
  font-size:13px;
  line-height:1.8;
}

/* =========================================
   TITLES
========================================= */

.foot-col h5{
  margin-bottom:18px;

  color:#4ACAF7;
  font-size:12px;
  font-weight:600;

  text-transform:uppercase;
  letter-spacing:.18em;
}

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

.foot-col ul{
  list-style:none;
  margin:0;
  padding:0;

  display:flex;
  flex-direction:column;
  gap:12px;
}

.foot-col a{
  color:rgba(255,255,255,.85);
  font-size:14px;
  text-decoration:none;

  transition:.25s ease;
}

.foot-col a:hover{
  color:#4ACAF7;
}

/* =========================================
   DIVIDER
========================================= */

.footer-platform-divider{
  width:100%;
  height:1px;

  margin:10px 0 34px;

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

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

.footer-platform-section{
  display:flex;
  justify-content:center;
}

.platform-box-grid{
  width:100%;

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

  gap:16px;
}

.platform-combo-box{
  min-height:72px;

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

  padding:12px 20px;

  text-align:center;
  text-decoration:none;

  border-radius:16px;

  background:
    linear-gradient(
      180deg,
      rgba(74,202,247,.10),
      rgba(74,202,247,.04)
    );

  border:
    1px solid rgba(74,202,247,.18);

  transition:.3s ease;
}

.platform-combo-box span{
  color:#fff;

  font-size:14px;
  font-weight:600;
  line-height:1.4;
}

.platform-combo-box:hover{
  transform:translateY(-2px);

  border-color:
    rgba(74,202,247,.35);

  background:
    linear-gradient(
      180deg,
      rgba(74,202,247,.18),
      rgba(74,202,247,.08)
    );

  box-shadow:
    0 0 24px rgba(74,202,247,.12);
}

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

.foot-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;

  gap:16px;

  margin-top:40px;
  padding-top:28px;

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

  color:rgba(255,255,255,.75);
  font-size:13px;
}

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

@media(max-width:1024px){

  .foot-grid{
    grid-template-columns:1fr 1fr;
    gap:40px;
  }

  .platform-box-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}

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

@media(max-width:768px){

  footer{
    padding:50px 0 30px;
  }

  .foot-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .brand-name{
    font-size:24px;
  }

  .foot-about{
    max-width:100%;
  }

  .foot-col h5{
    font-size:15px;
    color:#fff;

    letter-spacing:0;
    text-transform:none;
  }

  .platform-box-grid{
    grid-template-columns:1fr;
  }

  .platform-combo-box{
    min-height:64px;

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

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

    backdrop-filter:blur(12px);
  }

  .platform-combo-box:hover{
    transform:none;
  }

  .foot-bottom{
    flex-direction:column;

    align-items:center;
    text-align:center;
  }

}