* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}



/* NAVBAR */
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 20px 60px;
  align-items: center;
}

.navbar nav a {
  margin-right: 25px;
  text-decoration: none;
  color: #cfd8ff;
}

.logo {
  font-size: 24px;
  font-weight: bold;
    color: #cfd8ff;

}
/* TRANSPARENT HEADER */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  transition: all 0.4s ease;
}

/* When scrolling */
.navbar.scrolled {
  background: transparent;
  backdrop-filter: blur(10px);
}

/* Hide on scroll down */
.navbar.hide {
  transform: translateY(-100%);
}


/* BUTTONS */
button {
  padding: 10px 18px;
  border-radius: 20px;
  border: none;
  background: transparent;
  color: white;
  border: 1px solid #4fd1c5;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, #4fd1c5, #38bdf8);
  color: #000;
  border: none;
}

.outline-btn {
  margin-top: 20px;
}
/* ================= HERO ================= */

/* ================= HERO (FULL IMAGE, NO BG SHOW) ================= */

/* HERO */
.hero {
  position: relative;
  width: 100%;
  min-height: 200vh; /* ✅ FIXED */
  background-image: url("images/bg-img.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  overflow: visible !important;
  z-index: 1;
}


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

.hero-content {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  text-align: center;
  z-index: 10;
  padding: 0 20px;
}

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

.logo-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto 40px;
}

.logo-combined {
  position: absolute;
  inset: 0;
  width: 80%;
  margin: auto;
  z-index: 3;
}

/* ================= PETALS ================= */

.petal {
  position: absolute;
  width: 170px;
  height: 170px;
  object-fit: contain;
  z-index: 2;
  transition: transform 1.2s cubic-bezier(.25,.8,.25,1);
}

/* Initial positions */
.p1 { top: 1%; left: 11%; }
.p2 { top: 12%; right:  1%; }
.p3 { bottom: 10%; left: 1%; }
.p4 { bottom: 1%; right: 11%; }

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

.hero h1 {
  font-size: 4rem;
  color: #fff;
  margin-bottom: 16px;
}

.hero-text {
  color: #cfd8ff;
  max-width: 620px;
  margin: 0 auto;
  font-size: 16px;
}

/* ================= PILLS ================= */

.pill-row {
  position: absolute;
  top: 850px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
  z-index: 5;
  opacity: 0;
  transition: opacity .6s ease;
}

.pill {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  padding: 14px 18px;
  border-radius: 14px;
  width: 200px;
  color: #fff;
}

/* ================= TRIGGERED STATE ================= */

.hero.triggered .pill-row {
  opacity: 1;
}

/* Petal move animation */
.hero.triggered .p1 { transform: translate(-310px, 595px) scale(.5); }
.hero.triggered .p2 { transform: translate(-200px, 550px) scale(.5); }
.hero.triggered .p3 { transform: translate(185px, 485px) scale(.5); }
.hero.triggered .p4 { transform: translate(332px, 470px) scale(.5); }


/* ================= BIG SCREEN FIX ================= */

/* 24–27 inch monitors */
@media (min-width: 1440px){

  .hero{
    min-height: 180vh;
  }

  .hero-content{
    top: 140px;
    max-width: 1100px;
  }

  .hero h1{
    font-size: 4.8rem;
  }

  .hero-text{
    font-size: 18px;
    max-width: 720px;
  }

  .logo-container{
    width: 340px;
    height: 340px;
  }

  /* ================= PILLS ================= */
  .pill-row{
    top: auto;
    bottom: clamp(540px, 14vh, 340px);   /* 🔥 AUTO stays above wave */
    gap: 44px;
    transform: translateX(-50%) scale(1.05);
  }

  /* ================= PETALS (BEFORE) ================= */
  .p1 { top: 2%; left: 14%; }
  .p2 { top: 14%; right: 3%; }
  .p3 { bottom: 12%; left: 3%; }
  .p4 { bottom: 2%; right: 14%; }

  /* ================= PETALS (AFTER ANIMATION) ================= */
  .hero.triggered .p1 { transform: translate(-340px, 640px) scale(.55); }
  .hero.triggered .p2 { transform: translate(-230px, 600px) scale(.55); }
  .hero.triggered .p3 { transform: translate(210px, 540px) scale(.55); }
  .hero.triggered .p4 { transform: translate(210px, 540px) scale(.55); }
}


/* ================= ULTRA WIDE / 2K / 4K ================= */
@media (min-width: 1800px){

  .hero{
    min-height: 170vh;
  }

  .hero h1{
    font-size: 5.2rem;
  }

  .logo-container{
    width: 380px;
    height: 380px;
  }

  /* ================= PILLS ================= */
  .pill-row{
    top: auto;
    bottom: clamp(540px, 14vh, 3400px);   /* 🔥 Auto lock above wave */
    gap: 50px;
    transform: translateX(-50%) scale(1.1);
  }

  /* ================= PETALS (BEFORE) ================= */
  .p1 { top: 3%; left: 16%; }
  .p2 { top: 16%; right: 4%; }
  .p3 { bottom: 14%; left: 4%; }
  .p4 { bottom: 3%; right: 16%; }

  /* ================= PETALS (AFTER ANIMATION) ================= */
  .hero.triggered .p1 { transform: translate(-340px, 650px) scale(.6); }
  .hero.triggered .p2 { transform: translate(-240px, 610px) scale(.6); }
  .hero.triggered .p3 { transform: translate(210px, 500px) scale(.6); }
  .hero.triggered .p4 { transform: translate(350px, 470px) scale(.6); }
}


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

@media (max-width: 1024px) {

.hero{
  min-height: 100vh;
}

  .hero h1 {
    font-size: 3.2rem;
  }

  .logo-container {
    width: 240px;
    height: 240px;
  }

  .petal {
    width: 140px;
  }
}

/* ================= BIG MOBILE HERO ================= */
@media (max-width: 768px){

  /* ❌ Hide pills */
  .hero .pill-row,
  .hero .pill{
    display: none !important;
  }

  /* ❌ Hide petals */
  .petal,
  .p1, .p2, .p3, .p4{
    display: none !important;
  }

  /* ================= HERO ================= */
  .hero{
    min-height: 100svh;   /* works on all phones */
    height: auto;

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

    text-align: center;
    padding: clamp(80px, 12svh, 140px) 18px 0;

    background: url("images/bg-img.png") no-repeat center bottom;
    background-size: cover;
  }

  /* ================= HERO CONTENT ================= */
  .hero-content{
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }

  /* ================= LOGO BIG ================= */
  .logo-container{
    width: clamp(140px, 38vw, 200px);
    height: clamp(140px, 38vw, 200px);
    margin: 0 auto 12px;
  }

  /* ================= TITLE BIG ================= */
  .hero h1{
    font-size: clamp(26px, 7.5vw, 34px);
    margin-bottom: 8px;
    line-height: 1.2;
  }

  /* ================= TAGLINE BIG ================= */
  .hero-text{
    font-size: clamp(15px, 4.2vw, 18px);
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* 🔥 bottom safe space for small phones */
  .hero::after{
    content: "";
    display: block;
    height: clamp(80px, 15svh, 140px);
  }
}










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

.about-modern {
  position: relative;
  min-height: 100%;
  margin-top: -220px; /* ✅ FIXED */
  padding-top: 200px;
  padding-bottom: 140px;
  background: url("images/ng-last.png") no-repeat top center;
  background-size: cover;
}

.about-wrapper {
  max-width: 1200px;
  margin: auto;
  padding: 0 6%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ABOUT TEXT */

.about-tag {
  font-size: xxx-large;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #38bdf8;
  display: inline-block;
  margin-bottom: 80px;
}

.about-title {
  font-size: 44px;
  line-height: 1.2;
  color: #020617;
  margin-bottom: 18px;
}

.about-lead {
  font-size: 16px;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 14px;
}

/* ABOUT ACTIONS */

.about-actions {
  display: flex;
  gap: 16px;
  margin-top: 26px;
}

.btn-primary {
  padding: 12px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4fd1c5, #38bdf8);
  color: #020617;
  text-decoration: none;
  font-weight: 600;
}



/* ABOUT IMAGE */

.about-image img {
  width: 100%;
  max-width: 520px;
}

/* ================= PERFECT MOBILE ABOUT ================= */
@media (max-width:768px){

/* MAIN SECTION */
.about-modern{
  min-height: 100svh;   /* stable full screen */

  /* PERFECT spacing under wave (works on all phones) */
  padding: clamp(145px, 18svh, 170px) 20px 90px;

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

  text-align: center;

  /* FULL WIDTH BACKGROUND */
  background: url("images/ng-last.png") no-repeat center top;
  background-size: cover;
}

/* REMOVE IMAGE COMPLETELY */
.about-image{
  display: none !important;
}

/* WRAPPER — HARD CENTER */
.about-wrapper{
  width: 100%;
  max-width: 420px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* TITLE */
.about-modern h2{
  font-size: clamp(24px, 6vw, 28px);
  margin-bottom: 22px;
  text-align: center;
}

/* CONTENT BOX */
.about-content{
  width: 100%;
  max-width: 390px;
  margin: 0 auto;

  padding: clamp(22px, 4vw, 28px) 20px;
  border-radius: 16px;

  background: rgba(255,255,255,0.97);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);

  text-align: center;
}

/* TEXT */
.about-content h3{
  font-size: clamp(18px, 4.5vw, 22px);
}

.about-content p{
  font-size: clamp(14px, 3.8vw, 16px);
  line-height: 1.7;
}

/* BUTTON GROUP — PERFECT CENTER */
.about-content .btn-group,
.about-content .buttons,
.about-content .cta{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* BUTTON */
.about-content .btn,
.about-content button{
  padding: 12px 18px;
  font-size: 14px;
  border-radius: 24px;
  text-align: center;
}
}







/* ================= SERVICES – ELEGANT ================= */
/* ================= SERVICES (WHITE, PREMIUM) ================= */

.services-clean {
  background: #ffffff;
  padding: 160px 6%;
  color: #020617;
}

.services-container {
  max-width: 1100px;
  margin: auto;
}

/* small tag */
.services-tag {
  display: inline-block;
  font-size: xx-large;
  font-weight: 1000;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #38bdf8;
  font-weight: 600;
  margin-bottom: 41px;
}



/* main heading */
.services-title {
  font-size: 46px;
  line-height: 1.25;
  margin-bottom: 22px;
}

/* intro text */
.services-intro {
  max-width: 620px;
  font-size: 17px;
  line-height: 1.8;
  color: #475569;
  margin-bottom: 90px;
}

/* layout */
.services-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 70px 80px;
}

/* service block (not boxy) */
.service-block h4 {
  font-size: 20px;
  margin-bottom: 12px;
  color: #020617;
}

.service-block p {
  font-size: 15px;
  line-height: 1.8;
  color: #475569;
}

/* subtle hover (optional but classy) */
.service-block {
  position: relative;
}

.service-block::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 6px;
  width: 4px;
  height: 0;
  background: linear-gradient(180deg, #f8bc4e, #ecab30);
  border-radius: 4px;
  transition: height 0.3s ease;
}

.service-block:hover::before {
  height: 60%;
}

/* responsive */
@media (max-width: 768px) {
  .services-title {
    font-size: 34px;
  }

  .services-layout {
    gap: 50px;
  }
}








/* ================= WHAT WE DO ================= */

.what-we-do {
  position: relative;
  background: #fff;
  padding: 140px 6%;
  overflow: hidden;
  color: #000;
}

/* Decorative glow shapes */
.wwd-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
}





/* Container */
.wwd-container {
  position: relative;
  max-width: 1100px;
  margin: auto;
  z-index: 2;
}

/* Header */
.wwd-tag {
  display: inline-block;
  font-size: xx-large;
  font-weight: 650;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: 50px;
}

.what-we-do h2 {
  font-size: 46px;
  line-height: 1.2;
  margin-bottom: 24px;
}

.what-we-do h2 span {
  background: linear-gradient(135deg, #000, #000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wwd-intro {
  max-width: 680px;
  font-size: 20px;
  color: #000;
  line-height: 1.8;
  margin-bottom: 80px;
}

/* Points */
.wwd-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 70px 100px;
}

.wwd-point h4 {
  font-size: 22px;
  margin-bottom: 12px;
  position: relative;
}

.wwd-point h4::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f8bc4e, #ecab30);
}

.wwd-point p {
  font-size: 15px;
  line-height: 1.8;
  color: #000;
  max-width: 420px;
}

/* Responsive */
@media (max-width: 900px) {
  .wwd-points {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .what-we-do h2 {
    font-size: 36px;
  }
}


/* ================= WHY US (IMAGE + STATEMENT) ================= */

.why-statement {
  background: #0c043d;
  padding: 140px 6%;
}

.why-layout {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 80px;
}

/* LEFT IMAGE */
.why-visual img {
  width: 100%;
  max-width: 480px;
  opacity: 0.95;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.08));
}

/* RIGHT CONTENT */
.why-content h2 {
  font-size: 48px;
  line-height: 1.25;
  margin-bottom: 26px;
  color: #fff;
}

.why-main {
  font-size: 18px;
  line-height: 1.9;
  color: #60799c;
  margin-bottom: 28px;
}

.why-emphasis {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  position: relative;
  padding-left: 24px;
}

.why-emphasis::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 2px;
  background: linear-gradient(135deg, #4fd1c5, #38bdf8);
}

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

@media (max-width: 900px) {
  .why-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .why-visual img {
    margin: 0 auto 40px;
  }

  .why-emphasis {
    padding-left: 0;
  }

  .why-emphasis::before {
    display: none;
  }
}


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

.contact-avm {
  background: #0c043d; /* solid purple */
  padding: 120px 20px;
  color: #fff;
}

.contact-wrapper {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* LEFT */
.contact-tag {
  display: inline-block;
  color: #2dd4bf;
  font-weight: 700;
  margin-bottom: 150px;
  font-size: xx-large;
}

.contact-info h2 {
  font-size: 44px;
  line-height: 1.15;
  margin-bottom: 40px;
}

.contact-info p {
  color: #c7d2fe;
  max-width: 580px;
  margin-bottom: 20px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-item {
  display: flex;
  gap: 14px;
  align-items: top;
  font-size: 15px;
  color: #e0e7ff;
}

/* FORM */
.contact-form {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
  border-radius: 22px;
  padding: 40px;
  
}

.contact-form h3 {
  font-size: 26px;
  margin-bottom: 24px;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-row {
  display: flex;
  gap: 16px;
}

.contact-form input,
.contact-form textarea {
  background: rgba(255,255,255,0.08);
  border: none;
  padding: 14px 16px;
  border-radius: 12px;
  color: #fff;
  outline: none;
  font-size: 14px;
}

.contact-form textarea {
  min-height: 120px;
  resize: none;
}

.contact-form button {
  margin-top: 10px;
  padding: 14px;
  border-radius: 999px;
  border: none;
  background: #2dd4bf;
  color: #020617;
  font-weight: 600;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(45,212,191,.35);
}

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

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all .9s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

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

@media (max-width: 900px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .contact-info h2 {
    font-size: 34px;
  }

  .form-row {
    flex-direction: column;
  }
}





/* ================= ROADMAP ================= */



/* ================= ROADMAP SECTION ================= */
.roadmap-soft {
  padding: 50px 6%;
  background: #0c043d ;
}

.roadmap-soft h2 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 150px;
  color: #3fb9b3;
}

/* ================= ROADMAP AREA ================= */
.roadmap-area {
  position: relative;
  max-width: 1100px;
  min-height: 900px;
  margin: auto;
}

/* ================= SVG PATH ================= */
.roadmap-path {
  position: absolute;
  top: 50%;
  left: 47%;
  width: 1100px;
  height: 700px;
  transform: translate(-50%, -50%) rotate(62deg);
  z-index: 1;
}

.roadmap-path path {
  fill: none;
  stroke: #f8bc4e;
  stroke-width: 2;
  stroke-dasharray: 4 10;
}

/* ================= STEP ================= */
.step {
  position: absolute;
  z-index: 2;
}

/* ================= DOT ================= */
.step .dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #3fb9b3;
  border-radius: 50%;
  z-index: 3;
  box-shadow: 0 0 8px rgba(63,185,179,0.8);
}

/* ================= PILL ================= */
.step .pill {
  position: absolute;
  padding: 22px 28px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.pill h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.pill p {
  margin: 4px 0 0;
  font-size: 18px;
  color: #cbd3ff;
}

.step .dot,
.step .pill {
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* ================= POSITIONS (UNCHANGED) ================= */

.s1 { top: 0%; left: 42%; }
.s1 .dot { top: 30px; left: 60px; }
.s1 .pill { top: -20px; left: -160px; }

.s2 { top: 15%; left: 55%; }
.s2 .dot { top: 0; left: 14px; }
.s2 .pill { top: -40px; left: 35px; }

.s3 { top: 30%; left: 48%; }
.s3 .dot { top: 0; left: -14px; }
.s3 .pill { top: -35px; left: -225px; }

.s4 { top: 45%; left: 55%; }
.s4 .dot { top: 0; left: 14px; }
.s4 .pill { top: -40px; left: 35px; }

.s5 { top: 60%; left: 49%; }
.s5 .dot { top: 0; left: -14px; }
.s5 .pill { top: -37px; left: -230px; }

.s6 { top: 85%; left: 56%; }
.s6 .dot { top: -15px; }
.s6 .pill { top: -60px; left: 20px; }

/* ================= RESPONSIVE FIXES (NO DESIGN CHANGE) ================= */

@media (max-width: 1440px) {
  .roadmap-area { min-height: 820px; }
}

@media (max-width: 1200px) {
  .roadmap-area { min-height: 760px; }
}

@media (max-width: 1024px) {
  .roadmap-area { min-height: 700px; }
}

@media (max-width: 900px) {
  .roadmap-area { min-height: 650px; }
}

/* MOBILE STACK (REQUIRED – SAME CONTENT) */
@media (max-width: 768px) {
  .roadmap-path { display: none; }

  .roadmap-area {
    min-height: auto;
    padding-top: 20px;
  }

  .step {
    position: relative;
    top: auto !important;
    left: auto !important;
    margin: 30px 0;
    text-align: center;
  }

  .step .dot {
    position: static;
    margin: 0 auto 10px;
  }

  .step .pill {
    position: static;
    margin: auto;
    max-width: 90%;
  }
}
        


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

/* FOOTER MAIN */
.footer-main {
  position: relative;
  width: 100%;
  padding: 220px 20px 40px;
  overflow: hidden;
  background-color: #0c043d ;
}

/* BLURRED BACKGROUND IMAGE ONLY */
.footer-bg {
  position: absolute;
  inset: 0;
  background: url("images/ng-last.png") no-repeat top center / cover;
  filter: blur(0.6px);
  transform: scale(1.1);
  z-index: 1;
}

/* CONTENT ABOVE BG */
.footer-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

/* BRAND */
.footer-brand h2 {
  font-size: 36px;
  font-weight: 800;
  color: #0b1c4d;
}

.footer-brand p {
  max-width: 520px;
  margin: 14px auto 60px;
  font-size: 15px;
  color: #475569;
}

/* GRID */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  margin-bottom: 40px;
}

/* COLUMN */
.footer-col h4 {
  font-size: 16px;
  font-weight: 700;
  color: #2dd4bf;
  margin-bottom: 10px;
  position: relative;
}

/* UNDERLINE */
.footer-col h4::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  background: #f8bc4e;
  margin: 8px auto 0;
  border-radius: 4px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.footer-col li,
.footer-col p {
  font-size: 14px;
  color: #475569;
  margin-bottom: 10px;
}

.footer-col a {
  text-decoration: none;
  color: #475569;
}

.footer-col a:hover {
  color: #0b1c4d;
}

/* COPYRIGHT */
.footer-bottom {
  font-size: 13px;
  color: #64748b;
  margin-top: 20px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

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

.menu-toggle {
  display: none;
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 9999;
  width: 30px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  height: 3px;
  margin: 6px 0;
  background: #4fd1c5;
  border-radius: 4px;
}

/* MENU PANEL */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 240px;
  height: 100vh;
  background: linear-gradient(180deg, #0b0626, #160b3a);
  padding: 100px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: right 0.35s ease;
  z-index: 9998;
}

.mobile-menu a {
  color: #ffffff;
  font-size: 18px;
  text-decoration: none;
}

/* ACTIVE */
.mobile-menu.active {
  right: 0;
}

/* ================= MOBILE ONLY ================= */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .navbar nav {
    display: none; /* hide desktop menu */
  }
}