/* =========================================================
   YouniqAI — Premium AI Startup UI System
========================================================= */

/* GOOGLE FONTS */

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

/* MOBILE MENU FIX */

.menu-toggle{

    position:relative;

    z-index:99999;

}

.theme-toggle{

    position:relative;

    z-index:99998;

}

@media(max-width:768px){

    .nav-container{

        gap:12px;

    }

}

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

:root{

  --bg-primary:#F8FAFC;
  --bg-secondary:#FFFFFF;

  --text-primary:#070B14;
  --text-secondary:#475569;

  --card-bg:rgba(255,255,255,0.7);

  --border-color:rgba(0,0,0,0.08);

  --purple:#8B5CF6;
  --blue:#3B82F6;
  --pink:#EC4899;

  --gradient-primary:
    linear-gradient(
      135deg,
      #8B5CF6,
      #3B82F6,
      #EC4899
    );

  --shadow-glow:
  0 0 40px rgba(139,92,246,0.12);

--glass-border:
  rgba(255,255,255,0.08);

--glass-highlight:
  rgba(255,255,255,0.04);

--neon-purple:
  rgba(139,92,246,0.18);

--neon-blue:
  rgba(59,130,246,0.12);

  --radius:22px;

  --transition:0.35s ease;

}

/* DARK MODE */

body.dark-mode{

  --bg-primary:#070B14;
  --bg-secondary:#0F172A;

  --text-primary:#F8FAFC;
  --text-secondary:#94A3B8;

  --card-bg:rgba(255,255,255,0.06);

  --border-color:rgba(255,255,255,0.08);

  --shadow-glow:
  0 0 50px rgba(139,92,246,0.22);

--glass-border:
  rgba(255,255,255,0.12);

--glass-highlight:
  rgba(255,255,255,0.06);

--neon-purple:
  rgba(139,92,246,0.24);

--neon-blue:
  rgba(59,130,246,0.18);

}

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

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

html{
  scroll-behavior:smooth;
}

body{

  background:var(--bg-primary);

  color:var(--text-primary);

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

  overflow-x:hidden;

  line-height:1.7;

  transition:
    background 0.4s ease,
    color 0.4s ease;

}

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

body::before{

  content:'';

  position:fixed;

  width:600px;
  height:600px;

  background:
    rgba(139,92,246,0.12);

  filter:blur(160px);

  top:-250px;
  left:-150px;

  z-index:-2;

}

body::after{

  content:'';

  position:fixed;

  width:600px;
  height:600px;

  background:
    rgba(59,130,246,0.10);

  filter:blur(160px);

  bottom:-250px;
  right:-150px;

  z-index:-2;

}

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

.container{

  width:90%;
  max-width:1300px;

  margin:auto;

}

section{

  padding:120px 0;

}

h1,h2,h3,h4,h5{

  font-family:'Space Grotesk',sans-serif;

}

p{

  color:var(--text-secondary);

}

img{

  max-width:100%;

}

/* =========================================================
   NAVBAR
========================================================= */

.navbar{

  position:fixed;

  top:0;

  width:100%;

  z-index:999;

  backdrop-filter:blur(20px);

  background:
    rgba(255,255,255,0.75);

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

box-shadow:
  0 0 30px rgba(139,92,246,0.05);

  transition:0.35s ease;

}
section{

  scroll-margin-top:120px;

}
body.dark-mode .navbar{

  background:
    rgba(7,11,20,0.75);

}

.nav-container{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:20px 0;

}

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

.logo{

    text-decoration:none;

    display:flex;

    flex-direction:column;

    line-height:1;

    transition:.3s ease;

}

.logo-main{

    font-size:2rem;

    font-weight:800;

    color:var(--text-primary);

}

.logo-main span{

    background:var(--gradient-primary);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.logo-sub{

    font-size:.55rem;

    letter-spacing:2px;

    margin-top:4px;

    color:var(--text-secondary);

    text-transform:uppercase;

}

.logo:hover{

    transform:scale(1.03);

}
[data-theme="dark"] .logo-main{

    color:#ffffff;

}

[data-theme="dark"] .logo-sub{

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

}@media(max-width:768px){

    .logo-main{

        font-size:1.6rem;

    }

    .logo-sub{

        font-size:.45rem;

        letter-spacing:1px;

    }

}
/* NAV LINKS */

.nav-links{

  display:flex;

  gap:40px;

}

.nav-links a{

  color:var(--text-secondary);

  text-decoration:none;

  font-size:15px;

  transition:0.35s ease;

}

.nav-links a:hover{

    color:var(--purple);

    transform:translateY(-2px);

}

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

.btn-primary{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:16px 34px;

  border-radius:999px;

  background:var(--gradient-primary);

  color:white;

  text-decoration:none;

  font-weight:600;

  border:none;

  cursor:pointer;

  transition:0.35s ease;

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

}

.btn-primary:hover{

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

}

.btn-secondary{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:16px 34px;

  border-radius:999px;

  text-decoration:none;

  color:var(--text-primary);

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

  transition:0.35s ease;
  backdrop-filter:blur(20px);

background:var(--card-bg);

box-shadow:

  inset 0 1px 1px
  rgba(255,255,255,0.04),

  0 0 20px rgba(139,92,246,0.06);

}

.btn-secondary:hover{

  background:var(--card-bg);

}

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

.hero{

  min-height:100vh;

  display:flex;

  align-items:center;

}

.hero-wrapper{

  display:grid;

  grid-template-columns:1fr 1.15fr;

  gap:90px;

  align-items:center;

}

.hero-tag{

  display:inline-block;

  padding:12px 22px;

  border-radius:999px;

  background:
    rgba(139,92,246,0.12);

  border:
    1px solid rgba(139,92,246,0.18);

  color:var(--purple);

  font-size:14px;

  margin-bottom:28px;

}

.hero h1{

  font-size:78px;

  line-height:1.02;

  margin-bottom:28px;

  letter-spacing:-3px;

}

.hero h1 span{

  background:var(--gradient-primary);

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;

}

.hero p{

  font-size:22px;

  max-width:620px;

  margin-bottom:40px;

}

.hero-buttons{

  display:flex;

  gap:20px;

  margin-bottom:55px;

}

.hero-stats{

  display:flex;

  gap:50px;

}

.hero-stat h3{

  font-size:34px;

  margin-bottom:4px;

}

.hero-stat p{

  font-size:15px;

}

/* =========================================================
   HERO AI ECOSYSTEM
========================================================= */

.hero-ecosystem{

  position:relative;

  width:100%;
  height:720px;

  display:flex;

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

  margin-left:0px;

}

/* AI CORE */

.ai-core{

  position:relative;

  width:190px;
  height:190px;

  border-radius:50%;

  display:flex;

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

  background:
    radial-gradient(
      circle,
      rgba(139,92,246,0.22),
      rgba(59,130,246,0.06)
    );

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

  backdrop-filter:blur(30px);

  box-shadow:

  inset 0 1px 1px
  rgba(255,255,255,0.05),

  0 10px 50px rgba(0,0,0,0.25),

  0 0 40px rgba(139,92,246,0.16),

  0 0 80px rgba(59,130,246,0.08);

  z-index:10;

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

}

/* CORE GLOW */

.core-glow{

  position:absolute;

  width:340px;
  height:340px;

  background:
    radial-gradient(
      circle,
      rgba(139,92,246,0.25),
      transparent 70%
    );

  filter:blur(70px);

  z-index:-1;

}

/* CORE TEXT */

.core-text{

  font-size:40px;

  font-weight:800;

  font-family:'Space Grotesk',sans-serif;

  color:var(--text-primary);

  letter-spacing:-2px;

}

.core-text span{

  background:
    linear-gradient(
      135deg,
      #8B5CF6,
      #3B82F6,
      #EC4899
    );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;

}

/* SERVICE ORBITS */

.service-orbit{

  position:absolute;

  width:85%;
  height:85%;

}

/* SERVICE CHIPS */

.service-chip{

  position:absolute;

  padding:16px 28px;

  border-radius:999px;

  background:var(--card-bg);

  color:var(--text-primary);

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

  backdrop-filter:blur(24px);

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

  font-size:15px;

  font-weight:600;

  white-space:nowrap;

  overflow:hidden;

  transition:0.35s ease;

  box-shadow:

    0 0 0 1px rgba(255,255,255,0.02),

    inset 0 1px 1px
    rgba(255,255,255,0.04),

    0 10px 40px rgba(0,0,0,0.18),

    0 0 25px var(--neon-purple),

    0 0 60px rgba(59,130,246,0.06);

}

/* HOVER */

.service-chip:hover{

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

  border-color:
    rgba(139,92,246,0.35);

  box-shadow:

    0 0 0 1px rgba(139,92,246,0.15),

    inset 0 1px 1px
    rgba(255,255,255,0.08),

    0 10px 40px rgba(0,0,0,0.22),

    0 0 35px rgba(139,92,246,0.22),

    0 0 70px rgba(59,130,246,0.10);

}

/* ORBIT ONE */

.orbit-one .service-chip:nth-child(1){

  top:-2%;
  left:4%;

}

.orbit-one .service-chip:nth-child(2){

  top:2%;
  right:0%;

}

.orbit-one .service-chip:nth-child(3){

  bottom:2%;
  left:0%;

}

.orbit-one .service-chip:nth-child(4){

  bottom:0%;
  right:4%;

}

/* ORBIT TWO */

.orbit-two .service-chip:nth-child(1){

  top:38%;
  left:-8%;

}

.orbit-two .service-chip:nth-child(2){

  top:38%;
  right:-8%;

}

.orbit-two .service-chip:nth-child(3){

  bottom:24%;
  left:8%;

}

.orbit-two .service-chip:nth-child(4){

  bottom:24%;
  right:8%;

}

/* ANIMATIONS */

.orbit-one{

  animation:
    rotateOrbit 34s linear infinite;

}

.orbit-two{

  animation:
    rotateOrbitReverse 42s linear infinite;

}

.service-chip{

  animation:
    counterRotate 34s linear infinite;

}

.orbit-two .service-chip{

  animation:
    counterRotateReverse 42s linear infinite;

}

@keyframes rotateOrbit{

  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }

}

@keyframes rotateOrbitReverse{

  from{
    transform:rotate(360deg);
  }

  to{
    transform:rotate(0deg);
  }

}

@keyframes counterRotate{

  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(-360deg);
  }

}

@keyframes counterRotateReverse{

  from{
    transform:rotate(-360deg);
  }

  to{
    transform:rotate(0deg);
  }

}

@keyframes coreFloat{

  0%{
    transform:translateY(0px);
  }

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

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

}

/* =========================================================
   THEME TOGGLE
========================================================= */

.theme-toggle{

  width:52px;
  height:52px;

  border-radius:50%;

  border:none;

  background:var(--card-bg);

  color:var(--text-primary);

  cursor:pointer;

  display:flex;

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

  backdrop-filter:blur(20px);

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

  transition:0.35s ease;

}

.theme-toggle:hover{

  transform:scale(1.08);

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

}

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

.menu-toggle{

  display:none;

  flex-direction:column;

  gap:6px;

  cursor:pointer;

}

.menu-toggle span{

  width:28px;
  height:3px;

  background:var(--text-primary);

  border-radius:10px;

   position:relative;

    z-index:99999;

}

.mobile-menu{

  position:fixed;

  top:0;
  right:-100%;

  width:300px;
  height:100vh;

  background:var(--bg-secondary);

  backdrop-filter:blur(20px);

  display:flex;

  flex-direction:column;

  padding:120px 40px;

  gap:30px;

  transition:0.4s ease;

  z-index:1000;

  border-left:
    1px solid var(--border-color);
    
  overflow-y:auto;

}

.mobile-menu.active{

  right:0;

}

.mobile-menu a{

  color:var(--text-primary);

  text-decoration:none;

  font-size:20px;
   padding:10px 0;

}

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

.whatsapp-float{

  position:fixed;

  bottom:90px;
  right:15px;

  width:56px;
  height:56px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #25D366,
      #128C7E
    );

  display:flex;

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

  color:white;

  font-size:24px;

  text-decoration:none;

  z-index:9999;

  animation:
    whatsappPulse 2s infinite;

}

@keyframes whatsappPulse{

  0%{
    box-shadow:
      0 0 0 0 rgba(37,211,102,0.5);
  }

  70%{
    box-shadow:
      0 0 0 20px rgba(37,211,102,0);
  }

  100%{
    box-shadow:
      0 0 0 0 rgba(37,211,102,0);
  }

}

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

@media(max-width:1100px){

  .hero-wrapper{

    grid-template-columns:1fr;

    text-align:center;

  }

  .hero-buttons{

    justify-content:center;

  }

  .hero-stats{

    justify-content:center;

  }

}

@media(max-width:768px){

  section{

    padding:90px 0;

  }

  .nav-links{

    display:none;

  }

  .nav-btn{

    display:none;

  }

  .menu-toggle{

    display:flex;

  }

  .hero h1{

    font-size:48px;

  }

  .hero p{

    font-size:18px;

  }

  .hero-ecosystem{

    height:520px;

    margin-top:50px;

  }

  .ai-core{

    width:150px;
    height:150px;

  }

  .core-text{

    font-size:28px;

  }

  .service-chip{

    font-size:12px;

    padding:12px 18px;

  }

  .hero-stats{

    flex-wrap:wrap;

    gap:30px;

  }

}
/* =========================================================
   PREMIUM OFFER STRIP
========================================================= */

.premium-offer{

  position:relative;

  padding:40px 0 10px;

  overflow:hidden;

}

/* GLOW */

.offer-glow{

  position:absolute;

  width:500px;
  height:500px;

  background:
    radial-gradient(
      circle,
      rgba(139,92,246,0.14),
      transparent 70%
    );

  filter:blur(100px);

  top:-250px;
  left:50%;

  transform:translateX(-50%);

  z-index:-1;

}

/* WRAPPER */

.offer-wrapper{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:40px;

  padding:38px 42px;

  border-radius:34px;

  background:var(--card-bg);

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

  backdrop-filter:blur(24px);

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

  overflow:hidden;

  box-shadow:

    inset 0 1px 1px
    rgba(255,255,255,0.04),

    0 10px 40px rgba(0,0,0,0.12),

    0 0 40px rgba(139,92,246,0.08);
    transition:0.45s ease;

}
.offer-wrapper:hover{

  transform:
    translateY(-4px);

  border-color:
    rgba(139,92,246,0.22);

  box-shadow:

    inset 0 1px 1px
    rgba(255,255,255,0.06),

    0 20px 60px rgba(0,0,0,0.18),

    0 0 60px rgba(139,92,246,0.12);

}

/* LIGHT SWEEP */

.offer-wrapper::before{

  content:'';

  position:absolute;

  top:0;
  left:-120%;

  width:50%;
  height:100%;

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

  transform:skewX(-20deg);

  animation:
    sweepLight 8s linear infinite;

}

/* LEFT */

.offer-left{

  display:flex;

  flex-direction:column;

  gap:18px;

  max-width:620px;

}

/* BADGE */

.offer-badge{

  display:inline-flex;

  align-items:center;

  width:max-content;

  padding:10px 18px;

  border-radius:999px;

  background:
    rgba(139,92,246,0.12);

  border:
    1px solid rgba(139,92,246,0.18);

  color:var(--purple);

  font-size:13px;

  font-weight:600;

  letter-spacing:0.5px;

}

/* TEXT */

.offer-content h3{

  font-size:34px;

  line-height:1.15;

  margin-bottom:10px;

  font-family:'Space Grotesk',sans-serif;

}

.offer-content p{

  font-size:16px;

  color:var(--text-secondary);

  max-width:560px;

}

/* CENTER */

.offer-center{

  display:flex;

  align-items:center;

  justify-content:center;

}

/* STATUS PILL */

.status-pill{

  padding:16px 26px;

  border-radius:999px;

  background:
    rgba(139,92,246,0.10);

  border:
    1px solid rgba(139,92,246,0.16);

  color:var(--text-primary);

  font-size:13px;

  font-weight:700;

  letter-spacing:1px;

  animation:
    pulseGlow 3s ease-in-out infinite;

}

/* RIGHT */

.offer-right{

  display:flex;

  align-items:center;

  justify-content:flex-end;

}

/* BUTTON */

.offer-btn{

  display:inline-flex;

  align-items:center;

  gap:12px;

  padding:18px 30px;

  border-radius:999px;

  text-decoration:none;

  color:white;

  background:var(--gradient-primary);

  font-weight:600;

  transition:0.35s ease;

  box-shadow:

    0 10px 30px rgba(139,92,246,0.25);

}

.offer-btn span{

  transition:0.35s ease;

}

.offer-btn:hover{

  transform:

    translateY(-4px)

    scale(1.03);

  box-shadow:

    0 16px 50px rgba(139,92,246,0.35),

    0 0 80px rgba(59,130,246,0.12);

}

.offer-btn:hover span{

  transform:
    translateX(4px);

}

/* ANIMATIONS */

@keyframes pulseGlow{

  0%{

    box-shadow:
      0 0 0 rgba(139,92,246,0);

  }

  50%{

    box-shadow:
      0 0 25px rgba(139,92,246,0.18);

  }

  100%{

    box-shadow:
      0 0 0 rgba(139,92,246,0);

  }

}

@keyframes sweepLight{

  from{

    left:-120%;

  }

  to{

    left:120%;

  }

}

/* RESPONSIVE */

@media(max-width:1100px){

  .offer-wrapper{

    flex-direction:column;

    align-items:flex-start;

  }

  .offer-right{

    width:100%;

  }

}

@media(max-width:768px){

  .premium-offer{

    padding:30px 0 0;

  }

  .offer-wrapper{

    padding:28px 24px;

    border-radius:26px;

    gap:28px;

  }

  .offer-content h3{

    font-size:26px;

  }

  .offer-content p{

    font-size:15px;

  }

  .offer-btn{

    width:100%;

    justify-content:center;

  }

}
/* =========================================================
   PREMIUM SERVICES ECOSYSTEM
========================================================= */

.services-ecosystem{

  position:relative;

  padding:130px 0;

}

/* HEADER */

.services-header{

  text-align:center;

  max-width:760px;

  margin:0 auto 80px;

}

.section-tag{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:10px 18px;

  border-radius:999px;

  background:
    rgba(139,92,246,0.10);

  border:
    1px solid rgba(139,92,246,0.16);

  color:var(--purple);

  font-size:13px;

  font-weight:700;

  letter-spacing:1px;

  margin-bottom:24px;

}

.services-header h2{

  font-size:58px;

  line-height:1.08;

  margin-bottom:24px;

  letter-spacing:-2px;

}

.services-header p{

  font-size:18px;

  color:var(--text-secondary);

}

/* GRID */

.services-grid{

  display:grid;

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

  gap:26px;

}

/* CARD */

.service-card{

  position:relative;

  min-height:260px;

  padding:34px;

  border-radius:34px;

  background:var(--card-bg);

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

  backdrop-filter:blur(24px);

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

  overflow:hidden;

  transition:0.4s ease;

  box-shadow:

    inset 0 1px 1px
    rgba(255,255,255,0.04),

    0 10px 40px rgba(0,0,0,0.12),

    0 0 30px rgba(139,92,246,0.06);
    cursor:pointer;

transform-style:preserve-3d;

}

/* HOVER */

.service-card:hover{

  transform:

    translateY(-10px)

    scale(1.02)

    rotateX(2deg)

    rotateY(-2deg);

  border-color:
    rgba(139,92,246,0.28);

  box-shadow:

    inset 0 1px 1px
    rgba(255,255,255,0.08),

    0 25px 80px rgba(0,0,0,0.22),

    0 0 60px rgba(139,92,246,0.16),

    0 0 100px rgba(59,130,246,0.08);

}
.service-card:hover .service-icon{

  transform:

    scale(1.12)

    rotate(-6deg);

  box-shadow:

    0 0 35px rgba(139,92,246,0.20);

}
/* FEATURED */

.featured-card{

  grid-row:
    span 2;

  min-height:520px;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

}
.featured-card img{
    height:55%;
}
.featured-card:hover .service-glow{

  transform:
    scale(1.25);

  opacity:1;

}

/* GLOW */

.service-glow{

  position:absolute;

  width:300px;
  height:300px;

  background:
    radial-gradient(
      circle,
      rgba(139,92,246,0.18),
      transparent 70%
    );

  filter:blur(80px);

  top:-120px;
  right:-100px;
  transition:0.5s ease;

}

/* TOP */

.service-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

}

/* ICON */

.service-icon{

  width:58px;
  height:58px;

  border-radius:18px;

  display:flex;

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

  background:
    rgba(139,92,246,0.12);

  border:
    1px solid rgba(139,92,246,0.14);

  font-size:24px;

  margin-bottom:24px;
  transition:0.4s ease;

}

/* BADGE */

.service-badge{

  padding:10px 16px;

  border-radius:999px;

  background:
    rgba(139,92,246,0.10);

  border:
    1px solid rgba(139,92,246,0.16);

  color:var(--purple);

  font-size:12px;

  font-weight:700;

  letter-spacing:1px;

}

/* TITLES */

.service-card h3{

  font-size:42px;

  line-height:1.1;

  margin-bottom:24px;

  letter-spacing:-2px;

}

.service-card h4{

  font-size:28px;

  margin-bottom:18px;

  line-height:1.2;

}

/* TEXT */

.service-card p{

  font-size:16px;

  color:var(--text-secondary);

  line-height:1.7;

}

/* METRIC */

.service-metric{

  margin-top:30px;

  padding:18px 22px;

  border-radius:20px;

  background:
    rgba(139,92,246,0.08);

  border:
    1px solid rgba(139,92,246,0.12);

  color:var(--text-primary);

  font-weight:600;

}

/* LINK */

.service-link{

  display:inline-flex;

  align-items:center;

  gap:12px;

  margin-top:34px;

  color:var(--text-primary);

  text-decoration:none;

  font-weight:600;

  transition:0.35s ease;

}

.service-link span{

  transition:0.35s ease;

}

.service-link:hover{

  color:var(--purple);

}

.service-link:hover span{

  transform:
    translateX(8px);

}

/* RESPONSIVE */

@media(max-width:1100px){

  .services-grid{

    grid-template-columns:1fr;

  }

  .featured-card{

    min-height:420px;

    grid-row:auto;

  }

}

@media(max-width:768px){

  .services-header h2{

    font-size:40px;

  }

  .service-card{

    min-height:auto;

    padding:28px;

  }

  .service-card h3{

    font-size:34px;

  }

  .service-card h4{

    font-size:24px;

  }

}
/* =========================================================
   TRUST STRIP
========================================================= */

.trust-strip{

  padding:120px 0;

  position:relative;

  overflow:hidden;

}

/* HEADER */

.trust-header{

  text-align:center;

  max-width:850px;

  margin:0 auto 60px;

}

.trust-badge{

  display:inline-flex;

  padding:10px 18px;

  border-radius:999px;

  background:
    rgba(139,92,246,0.10);

  border:
    1px solid rgba(139,92,246,0.18);

  color:var(--purple);

  font-size:13px;

  font-weight:700;

  letter-spacing:1px;

  margin-bottom:24px;

}

.trust-header h2{

  font-size:52px;

  line-height:1.1;

  letter-spacing:-2px;

}

/* MARQUEE */

.trust-marquee{

  position:relative;

  overflow:hidden;

  width:100%;

  mask-image:
    linear-gradient(
      to right,
      transparent,
      white 10%,
      white 90%,
      transparent
    );

}

/* TRACK */

.trust-track{

  display:flex;

  align-items:center;

  gap:28px;

  width:max-content;

  animation:
    trustScroll 24s linear infinite;

}

/* ITEMS */

.trust-track span{

  display:flex;

  align-items:center;

  justify-content:center;

  min-width:220px;

  height:90px;

  border-radius:24px;

  background:var(--card-bg);

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

  backdrop-filter:blur(20px);

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

  color:var(--text-primary);

  font-weight:700;

  letter-spacing:1px;

  transition:0.35s ease;

  box-shadow:

    inset 0 1px 1px
    rgba(255,255,255,0.04),

    0 10px 30px rgba(0,0,0,0.10);

}

/* HOVER */

.trust-track span:hover{

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

  border-color:
    rgba(139,92,246,0.25);

  box-shadow:

    0 0 40px rgba(139,92,246,0.15),

    0 12px 40px rgba(0,0,0,0.15);

}

/* PAUSE ON HOVER */

.trust-marquee:hover .trust-track{

  animation-play-state:paused;

}

/* ANIMATION */

@keyframes trustScroll{

  from{

    transform:translateX(0);

  }

  to{

    transform:translateX(-50%);

  }

}

/* RESPONSIVE */

@media(max-width:768px){

  .trust-strip{

    padding:90px 0;

  }

  .trust-header h2{

    font-size:36px;

  }

  .trust-track span{

    min-width:170px;

    height:75px;

    font-size:14px;

  }

}
/* =========================================================
   PORTFOLIO SHOWCASE
========================================================= */

/*.portfolio-showcase{

  padding:140px 0;

}

.portfolio-header{

  text-align:center;

  max-width:760px;

  margin:0 auto 80px;

}

.portfolio-header h2{

  font-size:58px;

  line-height:1.1;

  margin-bottom:24px;

}

.portfolio-header p{

  font-size:18px;

  color:var(--text-secondary);

}

.portfolio-grid{

  display:grid;

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

  gap:26px;

}

.portfolio-card{

  position:relative;

  min-height:500px;

  padding:34px;

  border-radius:34px;

  background:var(--card-bg);

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

  backdrop-filter:blur(24px);

  overflow:hidden;

  transition:0.45s ease;

  cursor:pointer;

}
.portfolio-card img{

  width:100%;

  height:280px;

  object-fit:cover;

  border-radius:22px;

}
.portfolio-card:hover{

  transform:
    translateY(-10px)
    scale(1.02);

  box-shadow:

    0 20px 60px rgba(0,0,0,0.18),

    0 0 50px rgba(139,92,246,0.12);

}



.portfolio-overlay{

  position:absolute;

  inset:0;

  background:

    radial-gradient(
      circle at top right,
      rgba(139,92,246,0.20),
      transparent 60%
    );

}

.portfolio-content{

  position:relative;

  z-index:2;

}



.featured-project h3{

  font-size:48px;

  line-height:1.1;

  margin-bottom:18px;

}



.project-metrics div{

  display:flex;

  flex-direction:column;

}

.project-metrics strong{

  font-size:24px;

}

.project-metrics span{

  color:var(--text-secondary);

  font-size:13px;

}


.case-study-btn:hover{

  color:var(--purple);

}

.portfolio-grid{

    display:grid;

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

    gap:24px;

}
.portfolio-card h4{

  font-size:28px;

  margin-bottom:18px;

}

@media(max-width:1100px){

  .portfolio-grid{

    grid-template-columns:1fr;

  }

  .featured-project{

    grid-row:auto;

    min-height:450px;

  }

}

@media(max-width:768px){

  .portfolio-header h2{

    font-size:40px;

  }

  .featured-project h3{

    font-size:34px;

  }

}*/
/* =========================================================
   PORTFOLIO V3
========================================================= */

.portfolio-showcase{

  padding:140px 0;

}

.portfolio-header{

  text-align:center;

  max-width:800px;

  margin:0 auto 80px;

}

.portfolio-header h2{

  font-size:58px;

  line-height:1.1;

  margin-bottom:24px;

}

.portfolio-header p{

  font-size:18px;

  color:var(--text-secondary);

}

/* GRID */

.portfolio-grid{

  display:grid;

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

  gap:32px;

}

/* CARD */

.portfolio-card{

  position:relative;

  height: 630px;

  overflow:hidden;

  border-radius:32px;

  background:var(--card-bg);

  border:
  1px solid rgba(139,92,246,.15);

  backdrop-filter:blur(20px);

  cursor:pointer;

  transition:.45s ease;

  box-shadow:

  0 10px 30px rgba(0,0,0,.08),

  0 0 0 rgba(139,92,246,0);

}

/* IMAGE */

.portfolio-card img{

  width:100%;

  height:300px;

  object-fit:cover;

  display:block;

  transition:.6s ease;

}
.portfolio-card::after{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:320px;

    background:

    linear-gradient(
      to top,
      rgba(0,0,0,.25),
      transparent
    );

    pointer-events:none;

}

/* CONTENT */

.portfolio-content{

    padding:24px;

    display:flex;

    flex-direction:column;

}

.portfolio-content h4{

    font-size:20px;

    line-height:1.3;

    min-height:56px;

    margin-bottom:12px;

}

.portfolio-content p{

    font-size:15px;

    line-height:1.8;

    margin-bottom:20px;

    flex-grow:1;
    
    min-height:110px;

}

/* CTA */

.portfolio-content a{

  display:inline-block;

  align-items:center;

  gap:8px;

  color:var(--purple);

  text-decoration:none;

  font-weight:600;

  transition:.35s ease;

  margin-top:auto;

}

.portfolio-content a:hover{

  gap:14px;

}
/* HOVER */

.portfolio-card:hover{

  transform:
  translateY(-12px);

  border-color:
  rgba(139,92,246,.40);

  box-shadow:

  0 0 40px rgba(139,92,246,.25),

  0 0 80px rgba(59,130,246,.15),

  0 25px 70px rgba(0,0,0,.25);

}

.portfolio-card:hover img{

  transform:
  scale(1.08);

}

/* RESPONSIVE */

@media(max-width:1400px){

  .portfolio-grid{

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

  }

}

@media(max-width:900px){

  .portfolio-grid{

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

  }

}

@media(max-width:768px){

  .portfolio-header h2{

    font-size:40px;

  }

  .portfolio-grid{

    grid-template-columns:1fr;

  }

  .portfolio-card{

    height:auto;

  }

}/* RESULT BADGE */

.result-badge{

  display:inline-flex;

  align-items:center;

  padding:8px 14px;

  border-radius:999px;

  background:
  rgba(139,92,246,.12);

  border:
  1px solid rgba(139,92,246,.18);

  color:var(--purple);

  font-size:12px;

  font-weight:700;

   margin-top:8px;

   margin-bottom:18px;

}
/* CTA BELOW PORTFOLIO */

.portfolio-bottom-cta{

  text-align:center;

  margin-top:70px;

}

.portfolio-bottom-cta p{

  font-size:20px;

  margin-bottom:24px;

}
.portfolio-bottom-cta .btn-primary{

    box-shadow:

    0 0 35px rgba(139,92,246,.20);

}
/* ==========================================
   PROCESS SECTION
========================================== */

.process-section{

    padding:140px 0;

}

.process-header{

    text-align:center;

    max-width:800px;

    margin:0 auto 100px;

}

.process-header h2{

    font-size:58px;

    margin-bottom:20px;

}

.process-header p{

    color:var(--text-secondary);

}

/* TIMELINE */

.process-timeline{

    position:relative;

    display:grid;

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

    gap:30px;

}

.timeline-line{

    position:absolute;

    top:48px;

    left:8%;

    width:84%;

    height:2px;

    background:
    linear-gradient(
      90deg,
      #8B5CF6,
      #3B82F6,
      #EC4899
    );

    opacity:.4;

}

/* CARD */

.process-card{

    position:relative;

    z-index:2;

    padding:40px 30px;

    border-radius:30px;

    background:var(--card-bg);

    border:
    1px solid rgba(139,92,246,.15);

    backdrop-filter:blur(20px);

    transition:.4s ease;

}

.process-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(139,92,246,.35);

    box-shadow:

    0 0 40px rgba(139,92,246,.15),

    0 20px 60px rgba(0,0,0,.15);

}

/* STEP NUMBER */

.step-number{

    width:70px;
    height:70px;

    display:flex;

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

    border-radius:50%;

    margin-bottom:25px;

    font-size:24px;
    font-weight:700;

    background:
    linear-gradient(
      135deg,
      #8B5CF6,
      #3B82F6,
      #EC4899
    );

    color:white;

}

.process-card h3{

    font-size:24px;

    margin-bottom:16px;

}

.process-card p{

    line-height:1.8;

    color:var(--text-secondary);

}

/* RESPONSIVE */

@media(max-width:1000px){

    .process-timeline{

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

    }

    .timeline-line{

        display:none;

    }

}

@media(max-width:768px){

    .process-timeline{

        grid-template-columns:1fr;

    }

    .process-header h2{

        font-size:40px;

    }

}/* ==========================================
   SOLUTIONS SECTION
========================================== */

.solutions-section{

    padding:140px 0;

}

.solutions-header{

    text-align:center;

    max-width:850px;

    margin:0 auto 90px;

}

.solutions-header h2{

    font-size:58px;

    line-height:1.1;

    margin-bottom:20px;

}

.solutions-header p{

    color:var(--text-secondary);

    font-size:18px;

}

/* GRID */

.solutions-grid{

    display:grid;

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

    gap:32px;

}

/* CARD */

.solution-card{

    position:relative;

    padding:40px;

    border-radius:32px;

    background:var(--card-bg);

    border:
    1px solid rgba(139,92,246,.15);

    backdrop-filter:blur(20px);

    transition:.45s ease;

}

.solution-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(139,92,246,.35);

    box-shadow:

    0 0 40px rgba(139,92,246,.15),

    0 20px 60px rgba(0,0,0,.15);

}

.solution-card h3{

    font-size:34px;

    margin-bottom:10px;

}

.solution-subtitle{

    display:block;

    color:var(--purple);

    margin-bottom:25px;

    font-weight:600;

}

.solution-card ul{

    list-style:none;

    padding:0;

    margin:0 0 35px;

}

.solution-card li{

    margin-bottom:14px;

    line-height:1.8;

}

/* FEATURED CARD */

.featured-solution{

    transform:scale(1.05);

    border:
    1px solid rgba(139,92,246,.35);

}

.popular-badge{

    position:absolute;

    top:-14px;

    left:50%;

    transform:translateX(-50%);

    padding:10px 20px;

    border-radius:999px;

    background:
    linear-gradient(
      135deg,
      #8B5CF6,
      #3B82F6
    );

    color:white;

    font-size:12px;

    font-weight:700;

}

/* BUTTON */

.solution-btn{

    display:inline-flex;

    text-decoration:none;

    font-weight:600;

    color:var(--purple);

}

/* FOOTER */

.solutions-footer{

    text-align:center;

    margin-top:90px;

}

.solutions-footer p{

    font-size:22px;

    margin-bottom:24px;

}

/* TRUST FEATURES */

.trust-features{

    display:flex;

    justify-content:center;

    gap:28px;

    flex-wrap:wrap;

    margin-top:60px;

    color:var(--text-secondary);

}

/* RESPONSIVE */

@media(max-width:1100px){

    .solutions-grid{

        grid-template-columns:1fr;

    }

    .featured-solution{

        transform:none;

    }

}

@media(max-width:768px){

    .solutions-header h2{

        font-size:40px;

    }

}
/* ==========================================
   TESTIMONIALS SECTION
========================================== */

.testimonials-section{

    padding:140px 0;

    overflow:hidden;

}

.testimonials-header{

    text-align:center;

    max-width:850px;

    margin:0 auto 80px;

}

.testimonials-header h2{

    font-size:58px;

    margin-bottom:20px;

}

.testimonials-header p{

    color:var(--text-secondary);

}

/* MARQUEE */

.testimonial-marquee{

    overflow:hidden;

    position:relative;

}

.testimonial-track{

    display:flex;

    gap:30px;

    width:max-content;

    animation:
    scrollTestimonials
    45s linear infinite;

}

.testimonial-marquee:hover
.testimonial-track{

    animation-play-state:
    paused;

}

/* CARD */

.testimonial-card{

    width:420px;

    min-height:340px;

    padding:35px;

    border-radius:30px;

    background:var(--card-bg);

    border:
    1px solid rgba(139,92,246,.15);

    backdrop-filter:blur(20px);

    transition:.4s ease;

}

.testimonial-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(139,92,246,.35);

    box-shadow:

    0 0 40px rgba(139,92,246,.15),

    0 20px 60px rgba(0,0,0,.15);

}

.rating{

    color:#FFD700;

    font-weight:700;

    margin-bottom:20px;

}

.testimonial-card h4{

    font-size:24px;

    margin-bottom:6px;

}

.testimonial-card span{

    display:block;

    color:var(--purple);

    margin-bottom:20px;

}

.testimonial-card p{

    line-height:1.9;

    color:var(--text-secondary);

}

.recommend{

    margin-top:25px;

    color:#8B5CF6;

    font-weight:700;

}

/* AUTO SCROLL */

@keyframes scrollTestimonials{

    0%{

        transform:
        translateX(0);

    }

    100%{

        transform:
        translateX(-50%);

    }

}

/* MOBILE */

@media(max-width:768px){

    .testimonial-card{

        width:320px;

    }

    .testimonials-header h2{

        font-size:40px;

    }

}/* ==========================================
   FINAL CTA SECTION
========================================== */

.final-cta-section{

    padding:140px 0;

}

.final-cta-card{

    position:relative;

    overflow:hidden;

    border-radius:40px;

    padding:90px 60px;

    text-align:center;

    background:var(--card-bg);

    border:
    1px solid rgba(139,92,246,.18);

    backdrop-filter:blur(20px);

}

.cta-glow{

    position:absolute;

    top:-200px;
    left:50%;

    transform:translateX(-50%);

    width:500px;
    height:500px;

    background:
    radial-gradient(
      circle,
      rgba(139,92,246,.18),
      transparent 70%
    );

    pointer-events:none;

}

.final-cta-content{

    position:relative;

    z-index:2;

}

.final-cta-content h2{

    font-size:64px;

    line-height:1.1;

    max-width:900px;

    margin:25px auto;

}

.final-cta-content p{

    max-width:750px;

    margin:0 auto 40px;

    color:var(--text-secondary);

    font-size:20px;

    line-height:1.8;

}

.final-cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-bottom:40px;

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 28px;

    border-radius:14px;

    text-decoration:none;

    border:
    1px solid rgba(139,92,246,.20);

    color:var(--text-primary);

    transition:.35s ease;

}

.btn-secondary:hover{

    border-color:
    rgba(139,92,246,.40);

    transform:
    translateY(-3px);

}

.cta-features{

    display:flex;

    justify-content:center;

    gap:28px;

    flex-wrap:wrap;

    color:var(--text-secondary);

}

/* RESPONSIVE */

@media(max-width:768px){

    .final-cta-card{

        padding:60px 30px;

    }

    .final-cta-content h2{

        font-size:40px;

    }

    .final-cta-buttons{

        flex-direction:column;

    }

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

.footer{

    padding:100px 0 40px;

    border-top:
    1px solid rgba(139,92,246,.12);

}

.footer-grid{

    display:grid;

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

    gap:60px;

}

.footer-brand h3{

    font-size:36px;

    margin-bottom:20px;

}

.footer-brand p{

    max-width:400px;

    color:var(--text-secondary);

    line-height:1.8;

}

.footer-column h4{

    margin-bottom:24px;

}

.footer-column{

    display:flex;

    flex-direction:column;

}

.footer-column a{

    margin-bottom:14px;

    color:var(--text-secondary);

    text-decoration:none;

    transition:.3s ease;

}

.footer-column a:hover{

    color:var(--purple);

    transform:
    translateX(5px);

}

.footer-bottom{

    margin-top:70px;

    padding-top:30px;

    border-top:
    1px solid rgba(139,92,246,.08);

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:15px;

    color:var(--text-secondary);

}

@media(max-width:900px){

    .footer-grid{

        grid-template-columns:
        1fr 1fr;

    }

}

@media(max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}html{
    scroll-behavior:smooth;
}

section{
    scroll-margin-top:120px;
}

@media(max-width:768px){

    .hero-wrapper{
        gap:50px;
    }

    .hero-ecosystem{
        margin-left:0;
    }

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

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

    .process-timeline{
        grid-template-columns:1fr;
    }

    .testimonial-card{
        width:320px;
    }

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

.contact-section{

    padding:140px 0;

}

.contact-header{

    text-align:center;

    max-width:700px;

    margin:0 auto 60px;

}

.contact-header h2{

    font-size:58px;

    margin-bottom:20px;

}

.contact-form{

    max-width:850px;

    margin:auto;

    padding:25px;

    border-radius:32px;

    background:var(--card-bg);

    border:
    1px solid rgba(139,92,246,.15);

    backdrop-filter:blur(20px);

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:18px 22px;

    border-radius:18px;

    border:
    1px solid rgba(139,92,246,.15);

    background:transparent;

    color:var(--text-primary);

    outline:none;

    transition:.35s ease;

}

.contact-form textarea{

    min-height:180px;

    resize:none;

}

.contact-form input:focus,
.contact-form textarea:focus{

    border-color:
    rgba(139,92,246,.45);

    box-shadow:
    0 0 20px rgba(139,92,246,.12);

}

.contact-form button{

    align-self:center;

}

@media(max-width:768px){

    .contact-form{

        padding:30px 20px;

    }

    .contact-header h2{

        font-size:40px;

    }

.contact-wrapper{

    padding:25px;
}

.contact-form{

    width:100%;
}

.contact-form input,
.contact-form textarea{

    width:100%;
}

}


@media(max-width:768px){

    .hero{

        min-height:auto;

        padding-top:120px;

    }

    .hero-wrapper{

        gap:40px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons a{

        width:100%;

    }

}@media(max-width:768px){

.whatsapp-float{

    width:55px;
    height:55px;

    right:12px;
    bottom:12px;

}

}@media (max-width:768px){

  .navbar .btn-primary{
      display:none;
  }

  .nav-container{
      justify-content:space-between;
      gap:10px;
  }

  .logo{
      font-size:24px;
      flex-shrink:0;
  }

  .theme-toggle{
      width:42px;
      height:42px;
  }

  .menu-toggle{
      display:flex;
      margin-left:10px;
  }

}/* ==========================
   POPUPS
========================== */

.popup{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.6);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:99999;

}

.popup.show{

    display:flex;

}

.popup-content{

    width:90%;

    max-width:500px;

    padding:40px;

    border-radius:24px;

    text-align:center;

    background:white;

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

}

.popup-content h3{

    margin-bottom:15px;

}

.popup-content button{

    margin-top:20px;

    padding:12px 24px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    background:linear-gradient(
        135deg,
        #6366f1,
        #ec4899
    );

    color:white;

}/* =========================================
   CONTACT FORM
========================================= */

.contactform{

  max-width:800px;

  margin:50px auto 0;

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:20px;

}

.contactform input,
.contactform select,
.contactform textarea{

  width:100%;

  padding:18px 20px;

  border-radius:16px;

  border:1px solid rgba(139,92,246,.15);

  background:var(--card-bg);

  color:var(--text-primary);

  font-size:15px;

  outline:none;

  transition:.3s ease;

}

.contactform input:focus,
.contactform select:focus,
.contactform textarea:focus{

  border-color:#8B5CF6;

  box-shadow:
  0 0 20px rgba(139,92,246,.15);

}

.contactform textarea{

  min-height:160px;

  resize:vertical;

  grid-column:1/-1;

}

.contactform button{

  grid-column:1/-1;

  justify-self:center;

}

@media(max-width:768px){

  .contactform{

    grid-template-columns:1fr;

  }

}@media (max-width:768px){

    .hero-wrapper{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
    }

    .hero-content{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .hero p{
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
    }

    .hero-buttons{
        width:100%;
        align-items:center;
    }

}