:root{
  --primary:#6D28FF;
  --secondary:#C026FF;
  --accent:#FF00D4;
  --white:#FFFFFF;
  --light:#F8FAFF;
  --soft:#F1F5F9;
  --text:#0F172A;
  --text-light:#64748B;
  --footer:#0F172A;
  --border:#E8EAF3;
  --shadow:0 18px 45px rgba(15,23,42,.08);
  --gradient:linear-gradient(135deg,var(--primary),var(--secondary));
  --cta-gradient:linear-gradient(135deg,var(--primary),#FF2D8D);

  /* ===== DESIGN TOKENS (built from the approved RMH values above --
     resolved final brand colors match the "FINAL RAPID BRAND COLOR FIX"
     block further down this file: primary #6D28FF, secondary/accent
     #FF00D4). No new colors introduced. ===== */
  --rm-primary:#6D28FF;
  --rm-secondary:#FF00D4;
  --rm-gradient:linear-gradient(135deg,#6D28FF,#FF00D4);
  --rm-text-primary:var(--text);
  --rm-text-secondary:var(--text-light);
  --rm-bg:var(--white);
  --rm-bg-soft:var(--light);
  --rm-border:var(--border);

  /* Fluid type scale: clamp(min, preferred, max), min tuned to a 375px
     viewport and max to 1440px so every size in between scales smoothly
     instead of jumping at a single breakpoint. Restrained further for
     the Manrope switch -- H1 now targets ~49-50px at 1366-1440px (was
     ~54-56px under Inter), H2 targets ~35-36px desktop (was ~40px). */
  --fs-h1:clamp(2.25rem, 1.942rem + 1.315vw, 3.125rem);   /* 36px -> 50px */
  --fs-h2:clamp(1.75rem, 1.574rem + 0.751vw, 2.25rem);    /* 28px -> 36px */
  --fs-h3:clamp(1.1875rem, 1.144rem + 0.188vw, 1.3125rem);/* 19px -> 21px */
  --fs-body:clamp(0.96875rem, 0.958rem + 0.0469vw, 1rem); /* 15.5px -> 16px */
  --fs-small:0.875rem;                                    /* 14px */
  --fs-label:0.6875rem;                                   /* 11px (was 12px) */

  --lh-h1:1.08;
  --lh-heading:1.14;
  --lh-h3:1.2;
  --lh-body:1.6;
  --ls-h1:-0.02em;
  --ls-h2:-0.015em;
  --ls-label:.09em;
  --ls-nav:.01em;

  --fw-display:700;
  --fw-heading:700;
  --fw-subheading:600;
  --fw-body:400;
  --fw-label:600;
  --fw-button:700;

  /* Spacing rhythm: one section-padding token instead of the 90/100/110px
     one-offs scattered through the file. */
  --space-section:clamp(4rem, 3.03rem + 4.13vw, 6.75rem); /* ~64px -> 108px */
  --space-container-x:clamp(1.25rem, 0.81rem + 1.88vw, 2.5rem); /* ~20px -> 40px */

  --measure-hero:580px;
  --measure-intro:680px;
  --measure-body:620px;

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:26px;
  --radius-pill:999px;

  --shadow-sm:0 8px 24px rgba(15,23,42,.06);
  --shadow-md:var(--shadow);
  --shadow-lg:0 30px 70px rgba(15,23,42,.14);
}

/* ===== GLOBAL TYPE BASE =====
   Sets the fluid default for every heading site-wide. Existing
   page/section selectors (e.g. .hero-modern h1, .about-container h2)
   have higher specificity via their class, so they keep overriding
   this baseline exactly where a page still wants a specific size --
   this only fills the gap for anything that was inheriting the browser
   default, and gives every clamp()-free legacy rule a consistent
   fallback weight/line-height to inherit unless it says otherwise. */
h1,h2,h3,h4{
  font-weight:var(--fw-heading);
  line-height:var(--lh-heading);
  color:var(--rm-text-primary);
}

h1{font-size:var(--fs-h1);font-weight:var(--fw-display);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);}
h2{font-size:var(--fs-h2);letter-spacing:var(--ls-h2);}
h3{font-size:var(--fs-h3);font-weight:var(--fw-subheading);line-height:var(--lh-h3);}

p{line-height:var(--lh-body);}

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

body{
  font-family:'Manrope',sans-serif;
  background:var(--light);
  color:var(--text);
}

a{text-decoration:none;}
img{max-width:100%;display:block;}

/* Phone/email text made clickable (tel:/mailto:) without changing how
   it looks -- inherits the surrounding element's color/size instead
   of picking up default link-blue. */
.contact-link{color:inherit;}

header{
  position:sticky;
  top:0;
  z-index:1000;
  padding:16px 20px 0;
}

/* Floating glass navbar. The translucent background/blur/border/shadow
   live on ::before (not on .navbar itself) so .navbar stays a plain
   position:relative box -- backdrop-filter on .navbar directly would
   make it the containing block for the mobile drawer's position:fixed
   (#navLinks is nested inside it), trapping the drawer to the navbar's
   own tiny bounds instead of the viewport. */
.navbar{
  position:relative;
  max-width:1220px;
  height:76px;
  margin:0 auto;
  padding:0 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.navbar::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(15,23,42,.08);
  border-radius:20px;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
  transition:background .25s ease,box-shadow .25s ease;
}

.logo img{height:38px;width:auto;}

.nav-links{
  list-style:none;
  display:flex;
  flex:1;
  gap:28px;
  align-items:center;
}

@media(min-width:993px){
  /* Contact Us is now the last <li> in the same list (see markup) so
     the drawer can include it as a normal row on mobile; pushed to the
     far right here so desktop keeps the original CTA-on-the-right look.
     Needs .nav-links itself to be able to grow (flex:1 above) -- a
     shrink-to-fit list has no slack space for the auto margin to push
     into, and the whole list would just float as one block instead of
     spreading from the logo with Contact Us pinned to the far edge. */
  .nav-links li:last-child{
    margin-left:auto;
  }
}

.nav-links a{
  color:var(--footer);
  font-size:13px;
  font-weight:var(--fw-label);
  text-transform:uppercase;
  letter-spacing:var(--ls-nav);
}

.nav-links a:hover{color:var(--primary);}

.cta-btn,
.hero-btn{
  display:inline-flex;
  align-items:center;
  min-height:50px;
  border:none;
  background:var(--cta-gradient);
  color:var(--white);
  padding:15px 30px;
  border-radius:var(--radius-pill);
  font-size:13px;
  font-weight:var(--fw-button);
  text-transform:uppercase;
  letter-spacing:.4px;
  box-shadow:0 18px 35px rgba(255,45,141,.18);
  transition:.25s ease;
}

.cta-btn{
  background:linear-gradient(135deg,var(--primary),#FF00D4);
}

.cta-btn:hover,
.hero-btn:hover{
  transform:translateY(-3px);
}

.dropdown{
  position:relative;
  padding:18px 0;
}

/* Chevron is a separate control from the "Services" link: the link
   navigates normally, the button only opens/closes the submenu. On
   desktop it's purely visual (the menu opens on :hover regardless);
   the click-to-toggle behavior only matters at <=992px. */
.dropdown-toggle{
  background:none;
  border:none;
  padding:0;
  margin-left:4px;
  color:var(--footer);
  font:inherit;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
}

.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  width:330px;
  background:#fff;
  padding:12px 0;
  border-radius:0 0 24px 24px;
  box-shadow:0 25px 60px rgba(15,23,42,.14);
  display:block;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:.25s ease;
  z-index:9999;
  /* Safety net for short laptop viewports: scrolls internally instead
     of growing the panel past the visible window. Inert on any normal
     desktop height since 10 compact rows fit well under this cap. */
  max-height:calc(100vh - 110px);
  overflow-y:auto;
}

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

.dropdown-menu li{
  list-style:none;
}

.dropdown-menu a{
  display:block;
  padding:11px 26px;
  color:#0F172A;
  font-size:12px;
  font-weight:var(--fw-label);
  text-transform:uppercase;
  letter-spacing:var(--ls-nav);
}

.dropdown-menu a:hover{
  background:#F8FAFF;
  color:#6D28FF;
  padding-left:32px;
}

/* NAV TOGGLE (mobile hamburger) */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:46px;
  height:46px;
  border:none;
  background:rgba(109,40,255,.08);
  cursor:pointer;
  border-radius:14px;
  transition:.25s ease;
}

.nav-toggle:hover{
  background:rgba(109,40,255,.14);
}

.nav-toggle span{
  display:block;
  width:22px;
  height:2.5px;
  border-radius:2px;
  background:var(--text);
  transition:.3s ease;
}

.nav-toggle.active span:nth-child(1){
  transform:translateY(7.5px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2){
  opacity:0;
}

.nav-toggle.active span:nth-child(3){
  transform:translateY(-7.5px) rotate(-45deg);
}


/* HERO */
.hero-modern{
  min-height:760px;
  padding:90px 7%;
  display:grid;
  grid-template-columns:48% 52%;
  gap:50px;
  align-items:center;
  background:radial-gradient(circle at 75% 25%,#F1E7FF 0%,#F8FAFF 42%,#FFFFFF 100%);
  overflow:hidden;
}

.hero-modern-content{max-width:650px;z-index:10;}

.hero-badge,
.section-tag{
  display:inline-block;
  background:var(--gradient);
  color:var(--white);
  padding:11px 22px;
  border-radius:var(--radius-pill);
  font-size:var(--fs-label);
  font-weight:var(--fw-label);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.section-tag{
  background:transparent;
  color:var(--accent);
  padding:0;
}

.hero-modern h1{
  font-size:var(--fs-h1);
  line-height:var(--lh-h1);
  letter-spacing:var(--ls-h1);
  color:var(--text);
  margin:26px 0 24px;
  font-weight:var(--fw-display);
}

.hero-modern h1 span{
  background:linear-gradient(135deg,var(--primary),#FF00D4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-modern p{
  max-width:var(--measure-hero);
  color:var(--text-light);
  font-size:var(--fs-body);
  line-height:1.8;
  margin-bottom:34px;
}

.hero-modern-buttons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:42px;
}

.hero-outline{
  background:var(--white)!important;
  color:var(--primary)!important;
  border:2px solid var(--primary);
  box-shadow:none;
}

.client-proof{
  display:flex;
  align-items:center;
  gap:18px;
}

.proof-dots span{
  width:42px;
  height:42px;
  border-radius:50%;
  display:inline-block;
  margin-left:-10px;
  background:var(--cta-gradient);
  border:3px solid var(--white);
  box-shadow:0 10px 25px rgba(109,40,255,.18);
}

.client-proof p{
  color:var(--primary);
  font-weight:700;
  margin:0;
}

.hero-right{
  position:relative;
  width:620px;
  height:620px;
  max-width:100%;
  margin:auto;
}

.orbit{
  position:absolute;
  width:620px;
  height:620px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:2px dashed rgba(15,23,42,.22);
  border-radius:50%;
  z-index:1;
}

.main-circle{
  position:absolute;
  width:520px;
  height:520px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),#FF00D4);
  box-shadow:0 35px 80px rgba(109,40,255,.18);
  z-index:2;
}

/* Background circle and model are separate layers; the model is
   clipped to the same circular boundary as main-circle (border-radius
   on the img itself) so the body/blazer can never spill past the
   bottom, while staying independent of the background shape. */
.hero-person{
  position:absolute;
  width:520px;
  height:520px;
  left:50%;
  top:50%;
  border-radius:50%;
  object-fit:cover;
  object-position:center 16%;
  transform:translate(-50%,-50%) scale(1.02);
  transform-origin:center center;
  z-index:5;
}

.float-icon{
  position:absolute;
  width:60px;
  height:60px;
  border-radius:50%;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  z-index:9;
  box-shadow:0 16px 35px rgba(15,23,42,.18);
}

.fb{background:#1877F2;top:95px;left:75px;}
.insta{background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF);right:55px;top:250px;}
.tiktok{background:#000;left:55px;bottom:165px;}
.google{background:var(--accent);right:95px;bottom:85px;}

.float-card{
  position:absolute;
  background:var(--white);
  border-radius:22px;
  padding:18px 26px;
  z-index:8;
  box-shadow:0 20px 55px rgba(109,40,255,.14);
}

.float-card h3{
  font-size:28px;
  color:var(--primary);
  margin-bottom:4px;
}

.float-card p{
  color:#374151;
  font-weight:600;
  margin:0;
}

.card-one{right:20px;top:140px;}
.card-two{left:55px;bottom:70px;}

/* SHARED */
.about-container,
.services-container,
.why-container,
.process-container,
.testimonials-container,
.cta-container,
.footer-container,
.about-premium-container{
  max-width:1300px;
  margin:auto;
}

.about-section,
.services-section,
.why-section,
.testimonials-section{
  padding:var(--space-section) 7%;
  background:var(--white);
}

.services-section,
.testimonials-section{
  background:var(--light);
}

.services-container,
.process-container,
.testimonials-container{
  text-align:center;
}

.about-container h2,
.services-container h2,
.why-left h2,
.process-container h2,
.testimonials-container h2,
.about-premium-content h2{
  font-size:var(--fs-h2);
  line-height:1.14;
  color:var(--text);
  margin:18px 0;
}

/* ABOUT */
.about-premium{
  background:var(--white);
}

.about-premium-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.about-visual{
  position:relative;
  min-height:570px;
}

.about-glow{
  position:absolute;
  width:360px;
  height:360px;
  background:radial-gradient(circle,var(--secondary),transparent 70%);
  opacity:.18;
  filter:blur(20px);
  left:-30px;
  top:40px;
}

.about-image-card{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  box-shadow:none;
  z-index:2;
  background:transparent;
  min-height:500px;
}

.about-image-card img{
  width:100%;
  height:500px;
  object-fit:cover;
}

.about-experience-card{
  position:absolute;
  background:var(--white);
  border-radius:22px;
  padding:22px 28px;
  box-shadow:0 20px 55px rgba(15,23,42,.10);
  z-index:4;
  left:-20px;
  bottom:40px;
}

.about-experience-card h3{
  color:var(--primary);
  font-size:38px;
}

.about-experience-card p{
  font-weight:600;
  color:var(--text-light);
}

.about-premium-content p{
  color:var(--text-light);
  font-size:17px;
  line-height:1.9;
  margin-bottom:34px;
}

.about-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-bottom:36px;
}

.about-feature-grid div{
  background:var(--light);
  border:1px solid var(--border);
  border-radius:16px;
  padding:17px 18px;
  font-weight:600;
  color:#334155;
}

.about-feature-grid i{
  color:var(--primary);
  margin-right:8px;
}

.about-buttons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.about-link-btn{
  border:2px solid var(--primary);
  color:var(--primary);
  padding:14px 28px;
  border-radius:50px;
  font-weight:700;
}

/* SERVICES */
.services-container > p,
.testimonials-container > p{
  max-width:760px;
  margin:0 auto 55px;
  color:var(--text-light);
  line-height:1.8;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.service-card,
.why-card,
.testimonial-card,
.process-step{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:34px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.service-card:hover,
.why-card:hover,
.testimonial-card:hover{
  transform:translateY(-6px);
  border-color:rgba(109,40,255,.30);
  box-shadow:var(--shadow-lg);
}

.service-icon{
  width:60px;
  height:60px;
  margin:0 auto 22px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(109,40,255,.09);
  color:var(--primary);
  font-size:24px;
}

.service-card h3,
.why-card h3{
  color:var(--text);
  margin-bottom:12px;
  font-size:var(--fs-h3);
}

.service-card p,
.why-card p,
.testimonial-card p{
  color:var(--text-light);
  line-height:1.7;
}

/* PORTFOLIO / CASE STUDIES (homepage featured teaser) */
.home-work{
  padding:var(--space-section) 7%;
  background:var(--white);
}

.home-work-container{
  max-width:1300px;
  margin:auto;
  text-align:center;
}

.home-work-container > p{
  max-width:720px;
  margin:0 auto 55px;
  color:var(--text-light);
  line-height:1.8;
}

.home-work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  text-align:left;
}

.home-case-card{
  display:block;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
}

.home-case-card:hover{
  transform:translateY(-8px);
  box-shadow:0 28px 75px rgba(109,40,255,.16);
}

.home-case-image{
  aspect-ratio:2/1;
  overflow:hidden;
  background:var(--soft);
}

.home-case-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}

.home-case-card:hover .home-case-image img{
  transform:scale(1.05);
}

.home-case-body{
  padding:24px 26px 28px;
}

.home-case-category{
  display:inline-block;
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--ls-label);
  margin-bottom:10px;
}

.home-case-body h3{
  color:var(--text);
  font-size:var(--fs-h3);
  line-height:1.35;
  margin-bottom:16px;
}

.home-case-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--primary);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.home-case-link i{transition:transform .25s ease;}
.home-case-card:hover .home-case-link i{transform:translateX(4px);}

@media(prefers-reduced-motion:reduce){
  .home-case-card,
  .home-case-image img,
  .home-case-link i{transition:none;}
}

.home-work-cta{
  margin-top:48px;
}

@media(max-width:992px){
  .home-work-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){
  .home-work-grid{
    grid-template-columns:1fr;
  }
}

/* WHY */
.why-container{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:center;
}

.why-left p{
  color:var(--text-light);
  line-height:1.8;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

.why-card span{
  color:var(--accent);
  font-weight:800;
  font-size:24px;
}

/* PROCESS */
.process-section{
  background:var(--gradient);
  padding:var(--space-section) 7%;
  color:var(--white);
  text-align:center;
}

.process-container h2{
  color:var(--white);
}

.light-tag{
  color:#F7D7FF;
}

/* .section-tag's default color (#FF00D4, set !important further down
   this file) is tuned for light backgrounds. Inside this dark gradient
   section it reads as low-contrast magenta-on-magenta -- this ancestor
   override needs both higher specificity AND !important to win against
   that global rule (importance is compared before specificity, so a
   non-important override here would still lose even at higher
   specificity). */
.process-section .section-tag{
  color:#fff !important;
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:45px;
}

.process-step{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:var(--white);
  box-shadow:none;
}

.process-step span{
  color:#F7D7FF;
  font-size:26px;
  font-weight:800;
}

.process-step h3{
  margin:12px 0;
  color:#fff;
}

.process-step p{
  color:#F8EFFF;
  line-height:1.7;
}

/* TESTIMONIALS */
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.testimonial-card{
  text-align:left;
}

.stars{
  color:var(--accent);
  letter-spacing:2px;
  margin-bottom:18px;
}

.testimonial-card h3{
  color:var(--text);
  margin-bottom:5px;
}

.testimonial-card span{
  color:var(--text-light);
  font-size:14px;
}

/* CTA / FOOTER */
.cta-section{
  background:var(--cta-gradient);
  color:var(--white);
  padding:var(--space-section) 7%;
  text-align:center;
}

.cta-container{
  max-width:850px;
}

.cta-container h2{
  font-size:var(--fs-h2);
  margin-bottom:18px;
  color:#fff;
}

.cta-container p{
  color:#FFF1FA;
  line-height:1.8;
  margin-bottom:32px;
}

.cta-section .hero-btn{
  background:var(--white)!important;
  color:var(--primary)!important;
}

.footer{
  position:relative;
  overflow:hidden;
  color:var(--white);
  padding:90px 7% 35px;
  background:
    radial-gradient(circle at 85% 15%, rgba(109,40,255,.22), transparent 30%),
    radial-gradient(circle at 10% 85%, rgba(255,0,212,.10), transparent 34%),
    linear-gradient(135deg,#0B0A1E 0%,#11102B 45%,#14132F 100%);
}

.footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,#6D28FF,#FF00D4,#FF00D4);
}

.footer::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 80% 70%, rgba(255,255,255,.06), transparent 45%),
    linear-gradient(120deg, transparent 0 45%, rgba(255,255,255,.035) 46%, transparent 47%);
  opacity:.7;
  pointer-events:none;
}

.footer-container{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:55px;
  align-items:start;
}

.footer-col h2,
.footer-col h3{
  margin-bottom:22px;
  color:#FFFFFF;
  font-size:19px;
  font-weight:700;
}

.footer-col p,
.footer-col a:not(.map-placeholder){
  color:#D7DBFF;
  line-height:1.8;
  font-size:15px;
}

/* :not(.map-placeholder) matters here, not just cosmetically -- this
   selector's specificity (class+tag) otherwise beats .map-placeholder's
   own (class-only) display:flex, silently turning the Maps button back
   into a block link. That's the actual root cause of the icon/text/
   arrow ending up cramped together with no gap: once it's plain block
   content, justify-content/align-items/gap on .map-placeholder do
   nothing, and the inherited text-align:center centers the whole
   icon+text+arrow run as one inline unit instead of spreading it. */
.footer-col a:not(.map-placeholder){
  display:block;
  margin-bottom:13px;
  transition:.25s ease;
}

.footer-col a:hover,
.footer-legal a:hover{
  color:#FF00D4;
  transform:translateX(4px);
}

/* Footer "Contact Info" rows -- premium icon container replacing the
   old raw emoji characters (📧📞📍🕒), which rendered as inconsistent
   OS-level emoji glyphs instead of a proper vector icon. */
.footer-contact-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  margin-bottom:16px;
}

/* Address is the only row with wrapped multi-line text -- top-aligning
   the icon against it (rather than center) is the standard pattern for
   an icon beside a multi-line block. */
.footer-contact-row--address{
  align-items:flex-start;
}

.footer-contact-icon{
  width:44px;
  height:44px;
  min-width:44px;
  flex:0 0 44px;
  border-radius:11px;
  background:rgba(109,40,255,.18);
  border:1px solid rgba(255,0,212,.35);
  box-shadow:0 0 14px rgba(109,40,255,.15);
  display:flex;
  align-items:center;
  justify-content:center;
}

.footer-contact-icon i{
  font-size:17px;
  color:#FFFFFF;
}

.footer-contact-row p{
  margin:0;
  flex:1;
  min-width:0;
}

.footer-contact-row a{
  display:inline;
  margin-bottom:0;
}

.social-icons{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:24px;
  flex-wrap:nowrap;
}

.social-icons a{
  width:46px;
  height:46px;
  flex:0 0 auto;
  border-radius:50%;
  background:linear-gradient(135deg,#6D28FF,#FF00D4);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 30px rgba(255,0,212,.18);
  transition:.25s ease;
}

/* Brand icon glyphs (Font Awesome) aren't all drawn with identical
   vertical metrics inside their own em-box -- line-height:1 removes
   any inherited line-height as a second source of per-glyph vertical
   drift on top of that, so every icon centers on the same baseline
   regardless of its own glyph's natural proportions. */
.social-icons a i{
  line-height:1;
}

.social-icons a:hover{
  transform:translateY(-4px);
}

.map-placeholder{
  min-height:52px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,0,212,.35);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:10px;
  text-align:left;
  margin-top:10px;
  padding:0 16px;
  color:#FFFFFF!important;
  font-size:14px;
  font-weight:600;
  transition:.25s ease;
}

.map-placeholder:hover{
  background:rgba(255,255,255,.14);
}

/* Icons stay fixed-size at the two ends; the label is the only item
   allowed to shrink, so the trailing arrow can never get pushed onto a
   second line. */
.map-placeholder i{
  flex-shrink:0;
}

.map-placeholder-text{
  flex:1;
  min-width:0;
}

.footer-bottom{
  position:relative;
  z-index:2;
  max-width:1300px;
  margin:40px auto 0;
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}

.footer-copyright{
  color:#D7DBFF;
  font-size:14px;
  line-height:1.6;
  margin:0;
}

.footer-legal{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}

.footer-legal a{
  color:#D7DBFF;
  font-size:14px;
}

.footer-legal a:not(:first-child){
  position:relative;
  padding-left:16px;
}

.footer-legal a:not(:first-child)::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:12px;
  background:rgba(255,255,255,.25);
}

/* =====================================================================
   DESKTOP PREMIUM TIER (>=1200px)
   Root cause this block fixes: every section container was hard-capped
   at max-width:1200px AND used 7% side padding. Below ~1535px viewport
   the 7% padding -- not the 1200px cap -- was the actual bottleneck
   (e.g. at 1366px, 7% padding alone left only ~1175px of content, well
   under the cap), so widening the cap alone (now 1300px, see the base
   rules above) would not have fixed anything at 1366/1440px. This tier
   switches side padding to a fixed 40px so the 1300px cap actually
   binds starting around 1380px, and scales up the fixed-pixel visual
   elements (hero circle, card padding, gaps) that don't grow on their
   own, so the wider frame doesn't just leave content looking sparse.
   Nothing below 1200px is touched by this block. ===================== */
@media(min-width:1200px){
  /* Navbar intentionally does NOT get bigger here -- one consistent
     slim glass navbar across every desktop width (see the shared
     .navbar/.logo/.nav-links rules above). The obsolete oversized
     values that used to live in this block (76px logo, wider header/
     navbar padding, larger nav-link font, larger CTA) have been
     removed as part of the navbar redesign. .hero-btn keeps its
     existing >=1200px size bump below (unrelated to the navbar --
     it's the hero/CTA buttons used throughout the rest of every page). */
  .hero-btn{
    padding:17px 36px;
    font-size:14px;
  }

  /* HERO -- the outer grid was never capped (it already spanned up to
     86% of the viewport), so the fix here is raising the two INNER caps
     that were the real bottleneck: hero-modern-content's 650px text cap
     and hero-right's fixed 620px visual, both of which left visible
     unused space inside their own (already generous) grid columns.
     padding/min-height trimmed back down from the first pass (104px/
     800px) once the H1 and visual below were also brought down in size
     -- the smaller content no longer needs that much vertical room, and
     the goal is eyebrow+H1+description+both CTAs fitting inside a
     normal 1366/1440px first viewport. */
  .hero-modern{
    padding:84px 40px;
    grid-template-columns:44% 56%;
    gap:56px;
    min-height:720px;
  }

  .hero-modern-content{
    max-width:760px;
  }

  /* No component-level H1 override needed here anymore -- the global
     --fs-h1 token itself now targets ~52-54px at 1366px and ~54-56px
     by 1440px+, so .hero-modern h1's base rule (font-size:var(--fs-h1))
     already lands in the requested range without a redundant override. */

  /* Visual ceiling trimmed from 740px to 680px (~8% back down) to stay
     balanced against the smaller H1; floor stays 620px (unchanged,
     still safe at the 1200px boundary). */
  .hero-right{
    width:clamp(620px, 520px + 8.333vw, 680px);
    height:clamp(620px, 520px + 8.333vw, 680px);
  }

  /* Orbit/circle/person switch from fixed px to percentages of the now-
     fluid .hero-right box, so they scale with it automatically instead
     of needing their own clamp() formulas. Ratios match the original
     620px/520px relationship exactly (520/620 = 83.871%), so nothing
     shifts at the 1200px floor where hero-right is still exactly 620px. */
  .orbit{
    width:100%;
    height:100%;
  }

  .main-circle,
  .hero-person{
    width:83.871%;
    height:83.871%;
  }

  .fb{top:15.323%;left:12.097%;}
  .insta{right:8.871%;top:40.323%;}
  .tiktok{left:8.871%;bottom:26.613%;}
  .google{right:15.323%;bottom:13.710%;}
  .card-one{right:3.226%;top:22.581%;}
  .card-two{left:8.871%;bottom:11.290%;}

  .about-section,
  .services-section,
  .why-section,
  .testimonials-section,
  .home-work,
  .process-section,
  .cta-section{
    padding-inline:40px;
  }

  .footer{
    padding-inline:40px;
  }

  /* Why/Process specifically flagged as too tall -- only these two get
     a reduced vertical padding; every other section keeps the shared
     --space-section rhythm (~105-108px at this range) untouched. */
  .why-section,
  .process-section{
    padding-block:64px;
  }

  .about-premium-container{
    gap:100px;
  }

  .about-visual{
    min-height:620px;
  }

  .about-image-card{
    min-height:560px;
  }

  .about-image-card img{
    height:560px;
  }

  .about-feature-grid{
    gap:20px;
  }

  .about-feature-grid div{
    padding:20px 22px;
  }

  .services-grid{
    gap:32px;
  }

  .service-card,
  .why-card,
  .testimonial-card,
  .process-step{
    padding:40px;
  }

  .service-icon{
    width:68px;
    height:68px;
    font-size:27px;
  }

  .home-work-grid{
    gap:32px;
  }

  .home-case-body{
    padding:28px 30px 32px;
  }

  .why-container{
    gap:80px;
  }

  .why-grid{
    gap:26px;
  }

  .process-grid{
    gap:28px;
  }

  .testimonials-grid{
    gap:32px;
  }

  .cta-container{
    max-width:920px;
  }

  .footer-container{
    gap:64px;
  }
}

@media(max-width:992px){
  /* Mobile/hamburger navigation activates here (not 768px) so tablet
     widths such as 784-820px never show a squeezed desktop navbar. */
  header{padding:12px 16px 0;}

  .navbar{
    height:68px;
    padding:0 18px;
  }

  .navbar::before{
    border-radius:19px;
  }

  .logo img{height:auto;width:150px;}

  .nav-toggle{display:flex;}

  /* Fixed slide-in drawer instead of an in-flow accordion: #navLinks
     is still the element script.js toggles via .open/body.nav-open,
     it just slides in from the right now instead of expanding
     max-height inside the navbar. Contact Us lives inside this same
     list (see markup) so it slides in as part of the drawer too. */
  .nav-links{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    height:100dvh;
    width:min(82vw,320px);
    margin:0;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:96px 24px 24px;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:-20px 0 60px rgba(15,23,42,.18);
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.22,1,.36,1);
    z-index:1001;
  }

  body.nav-open .nav-links{
    transform:translateX(0);
  }

  /* Dims the page behind the open drawer. Closing is already wired up
     in script.js (tap outside, tap a nav link, resize past 992px) via
     its existing click-outside handler, which treats anything outside
     #navLinks/#navToggle -- this scrim included -- as "outside". */
  body.nav-open::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    z-index:999;
  }

  body.nav-open{
    overflow:hidden;
  }

  .nav-links li{width:100%;}

  .nav-links a{
    display:block;
    padding:13px 6px;
    border-bottom:1px solid var(--border);
  }

  /* Contact Us keeps its gradient pill look as the drawer's last row
     instead of picking up the plain-link row styling above -- including
     restating display:flex, since ".nav-links a{display:block}" above
     otherwise wins over .cta-btn's own display:inline-flex by
     specificity and would silently break its centering. */
  .nav-links a.cta-btn{
    display:flex;
    width:100%;
    margin-top:10px;
    padding:0 18px;
    border-bottom:none;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .dropdown{
    padding:0;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--border);
  }

  .dropdown > a{
    padding:13px 6px;
    border-bottom:none;
  }

  .dropdown-toggle{
    padding:13px 6px;
    margin-left:0;
  }

  .dropdown-menu{
    position:static;
    width:100%;
    opacity:0;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border-radius:0;
    padding:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s cubic-bezier(.22,1,.36,1),opacity .25s ease;
  }

  .dropdown:hover .dropdown-menu{
    max-height:0;
  }

  .dropdown.open .dropdown-menu{
    max-height:600px;
    opacity:1;
    padding:6px 0 10px;
  }

  @media(prefers-reduced-motion:reduce){
    .dropdown-menu{transition:max-height .01s linear;}
  }

  .dropdown-menu a{
    padding:12px 16px;
    font-size:11px;
  }

  .dropdown-menu a:hover{
    padding-left:22px;
  }

  .hero-modern,
  .about-premium-container,
  .why-container{
    grid-template-columns:1fr;
    text-align:center;
  }

  .hero-modern{
    min-height:auto;
  }

  .hero-modern-content{
    margin:auto;
  }

  .hero-modern-buttons,
  .client-proof,
  .about-buttons{
    justify-content:center;
  }

  .services-grid,
  .testimonials-grid,
  .process-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .footer-container{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:768px){
  /* Compact mobile hero scale (site-wide): every hero/banner h1 across
     every page sources its size from --fs-h1, so redefining it here
     once caps all of them to a single restrained mobile range instead
     of the desktop fluid clamp (which still reaches ~41-44px in this
     viewport band) -- see the mobile hero compression pass. */
  :root{
    --fs-h1:clamp(2.125rem, 8.5vw, 2.5rem); /* 34px -> 40px */
  }

  .hero-modern{
    padding:34px 22px;
    gap:20px;
  }

  .hero-modern-content{
    max-width:390px;
    margin-left:auto;
    margin-right:auto;
  }

  .hero-badge{
    font-size:10px;
    padding:8px 14px;
    line-height:1.15;
    margin-bottom:15px;
  }

  /* Home hero only -- overrides the shared --fs-h1 mobile token (kept
     untouched above) with a tighter, home-specific scale so the long
     "Helping Businesses Grow Through Digital Marketing & AI Automation"
     heading clears in fewer lines without shrinking every other page's
     hero H1. */
  .hero-modern h1{
    font-size:clamp(28px, 7.5vw, 30px);
    line-height:1.04;
    letter-spacing:-0.02em;
    font-weight:700;
    margin:0 0 15px;
  }

  .hero-modern p{
    font-size:14px;
    line-height:1.5;
    max-width:370px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:18px;
  }

  .hero-modern-buttons{
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
  }

  /* Scoped to .hero-modern-buttons so the shared .hero-btn class used
     by every other page's hero/CTA is left exactly as-is. */
  .hero-modern-buttons .hero-btn{
    width:100%;
    max-width:330px;
    min-height:44px;
    height:auto;
    padding:0 16px;
    font-size:12px;
    font-weight:700;
    justify-content:center;
  }

  .hero-right{
    width:330px;
    height:330px;
  }

  .orbit{
    width:330px;
    height:330px;
  }

  .main-circle{
    width:280px;
    height:280px;
  }

  .hero-person{
    width:280px;
    height:280px;
  }

  .float-icon{
    width:42px;
    height:42px;
    font-size:18px;
  }

  .float-card{
    padding:10px 14px;
    border-radius:16px;
  }

  .float-card h3{
    font-size:20px;
  }

  .float-card p{
    font-size:11px;
  }

  .fb{top:45px;left:30px;}
  .insta{right:22px;top:130px;}
  /* bottom raised from 80px -> 148px: at 80px the icon's box (top edge
     at roughly bottom-of-box minus 122px) landed inside .card-two's own
     box (anchored bottom:30px, ~80px tall), so the icon sat on top of
     the "98%" figure instead of beside the card. 148px clears the card
     with room to spare while still sitting below .insta, in the gap
     between the two -- this is the one mobile rule for this icon. */
  .tiktok{left:25px;bottom:148px;}
  .google{right:45px;bottom:38px;}
  .card-one{right:0;top:75px;}
  .card-two{left:5px;bottom:30px;}

  .about-section,
  .services-section,
  .why-section,
  .testimonials-section{
    padding:var(--space-section) 22px;
  }

  .about-feature-grid,
  .services-grid,
  .why-grid,
  .process-grid,
  .testimonials-grid{
    grid-template-columns:1fr;
  }

  .about-visual{
    min-height:auto;
  }

  .about-image-card{
    min-height:auto;
  }

  .about-image-card img{
    height:300px;
  }

  .about-experience-card{
    position:static;
    margin-top:16px;
  }

  /* Footer's own mobile layout (grid + text alignment) lives in the
     consolidated block further down this file, alongside the rest of
     the mobile footer rules -- kept together instead of split across
     two separate @media(max-width:768px) blocks. */
  .social-icons{
    justify-content:center;
  }
}

/* ===== PREMIUM FOOTER LOGO ===== */
.footer-logo{
  margin-bottom:28px;
}

.footer-logo-img,
.footer-logo img{
  width:300px;
  max-width:100%;
  height:auto;
  display:block;
  margin-left:-10px;
}

.footer-col:first-child p{
  max-width:390px;
}

@media(max-width:768px){
  .footer{
    padding:70px 20px 30px;
  }

  /* Root cause of the 4 columns collapsing into one long centered
     stack: .footer-container previously fell into the same
     grid-template-columns:1fr rule used by the card grids, and a
     separate blanket .footer{text-align:center} centered every link
     list inside it. Neither is appropriate for a footer specifically --
     replaced with a 2-column grid (brand and contact info each span
     both tracks full-width; Quick Links/Our Services sit side by side
     in the two tracks) and left-aligned text everywhere except the
     centered brand block. */
  .footer-container{
    grid-template-columns:1fr 1fr;
    column-gap:20px;
    row-gap:32px;
  }

  .footer-col{
    text-align:left;
  }

  .footer-col:first-child{
    grid-column:1 / -1;
    text-align:center;
  }

  .footer-col:last-child{
    grid-column:1 / -1;
  }

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

  .footer-logo-img,
  .footer-logo img{
    width:260px;
    margin-left:0;
  }

  .footer-col:first-child p{
    max-width:100%;
    margin:auto;
  }

  .footer-col a:hover,
  .footer-legal a:hover{
    transform:none;
  }

  .footer-bottom{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:12px;
    padding:20px 22px;
  }

  /* Copyright stays on its own line above (flex-direction:column on
     .footer-bottom already does that); this keeps all three legal
     links on that second line instead of each wrapping onto its own
     row. Existing separator (the ::before bar) is kept, just tightened
     alongside the gap so three links + two separators fit at narrow
     widths without introducing a second separator style. */
  .footer-legal{
    justify-content:center;
    flex-wrap:nowrap;
    gap:8px;
  }

  .footer-legal a{
    font-size:11px;
    white-space:nowrap;
  }

  .footer-legal a:not(:first-child){
    padding-left:9px;
  }
}

@media(max-width:380px){
  .footer-legal{
    gap:6px;
  }

  .footer-legal a{
    font-size:10.5px;
  }

  .footer-legal a:not(:first-child){
    padding-left:7px;
  }
}

/* ===== FINAL RAPID BRAND COLOR FIX ===== */
:root{
  --primary:#6D28FF;
  --secondary:#FF00D4;
  --accent:#FF00D4;
  --footer:#0F172A;
  --gradient:linear-gradient(135deg,#6D28FF,#FF00D4);
  --cta-gradient:linear-gradient(135deg,#6D28FF,#FF00D4);
}

.cta-btn,
.hero-btn{
  background:linear-gradient(135deg,#6D28FF,#FF00D4) !important;
  color:#FFFFFF !important;
}

.hero-outline{
  background:#FFFFFF !important;
  color:#6D28FF !important;
  border:2px solid #6D28FF !important;
}

.section-tag{
  color:#FF00D4 !important;
}

.nav-links a,
.dropdown-menu a{
  color:#0F172A;
}

.nav-links a:hover,
.dropdown-menu a:hover{
  color:#6D28FF;
}

.footer::before{
  background:linear-gradient(90deg,#6D28FF,#FF00D4,#6D28FF) !important;
}

.google{
  background:linear-gradient(135deg,#6D28FF,#FF00D4) !important;
}

.stars{
  color:#FF00D4 !important;
}

/* ===== SCROLL / MOTION SYSTEM =====
   Navbar's own background/blur/shadow transition already lives on
   .navbar::before (see base rule); this just swaps in a slightly less
   transparent, more defined glass state once the page has scrolled. */
header.scrolled .navbar::before{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 40px rgba(15,23,42,.12);
}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,.8,.34,1),transform .7s cubic-bezier(.16,.8,.34,1);
  will-change:opacity,transform;
}

.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

@media(prefers-reduced-motion:reduce){
  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

@keyframes fadeUpIn{
  from{opacity:0;transform:translateY(26px);}
  to{opacity:1;transform:translateY(0);}
}

/* Hero intro sequence: label -> heading -> description -> buttons ->
   stats, each direct child of the hero content block fades/lifts in
   with a small incremental delay instead of the whole block
   appearing at once. */
.hero-modern-content > *,
.ss-hero-content > *,
.contact-hero-content > *,
.team-hero-content > *,
.rm-banner-content > *,
.srv-hero-content > *{
  animation:fadeUpIn .6s cubic-bezier(.22,1,.36,1) both;
}

.hero-modern-content > *:nth-child(2),
.ss-hero-content > *:nth-child(2),
.contact-hero-content > *:nth-child(2),
.team-hero-content > *:nth-child(2),
.rm-banner-content > *:nth-child(2),
.srv-hero-content > *:nth-child(2){animation-delay:.08s;}

.hero-modern-content > *:nth-child(3),
.ss-hero-content > *:nth-child(3),
.contact-hero-content > *:nth-child(3),
.team-hero-content > *:nth-child(3),
.rm-banner-content > *:nth-child(3),
.srv-hero-content > *:nth-child(3){animation-delay:.16s;}

.hero-modern-content > *:nth-child(4),
.ss-hero-content > *:nth-child(4),
.contact-hero-content > *:nth-child(4),
.team-hero-content > *:nth-child(4),
.rm-banner-content > *:nth-child(4),
.srv-hero-content > *:nth-child(4){animation-delay:.24s;}

.hero-modern-content > *:nth-child(5),
.ss-hero-content > *:nth-child(5),
.contact-hero-content > *:nth-child(5),
.team-hero-content > *:nth-child(5),
.rm-banner-content > *:nth-child(5),
.srv-hero-content > *:nth-child(5){animation-delay:.32s;}

.hero-modern-content > *:nth-child(6),
.ss-hero-content > *:nth-child(6),
.contact-hero-content > *:nth-child(6),
.team-hero-content > *:nth-child(6),
.rm-banner-content > *:nth-child(6),
.srv-hero-content > *:nth-child(6){animation-delay:.4s;}

@keyframes heroVisualIn{
  from{opacity:0;transform:scale(.97);}
  to{opacity:1;transform:scale(1);}
}

.hero-right,
.ss-hero-visual{
  animation:heroVisualIn .8s .2s cubic-bezier(.22,1,.36,1) both;
}

@media(prefers-reduced-motion:reduce){
  .hero-modern-content > *,
  .ss-hero-content > *,
  .contact-hero-content > *,
  .team-hero-content > *,
  .rm-banner-content > *,
  .srv-hero-content > *,
  .hero-right,
  .ss-hero-visual{
    animation:none;
  }
}

/* ===== BUTTON MICRO-INTERACTIONS ===== */
.cta-btn,
.hero-btn,
.about-link-btn,
.ss-outline,
.hero-outline{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.cta-btn::before,
.hero-btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,#7C3AFF,#FF2DB8);
  opacity:0;
  transition:opacity .3s ease;
}

.cta-btn:hover::before,
.hero-btn:hover::before{
  opacity:1;
}

.cta-btn:hover,
.hero-btn:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 22px 45px rgba(109,40,255,.28);
}

.cta-btn:active,
.hero-btn:active{
  transform:translateY(-1px) scale(.99);
}

.hero-outline:hover,
.about-link-btn:hover,
.ss-outline:hover{
  background:var(--primary)!important;
  color:var(--white)!important;
  transform:translateY(-3px);
  box-shadow:0 18px 35px rgba(109,40,255,.22);
}

.service-card,
.why-card,
.testimonial-card,
.process-step,
.portfolio-card,
.srv-card,
.contact-info-card,
.leader-card,
.professional-card{
  transition:transform .35s cubic-bezier(.16,.8,.34,1),box-shadow .35s ease;
}

.social-icons a,
.contact-social a,
.team-social a,
.srv-social-mini a{
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;
}

.social-icons a:hover,
.contact-social a:hover,
.team-social a:hover,
.srv-social-mini a:hover{
  transform:translateY(-4px) scale(1.08) rotate(-4deg);
}

/* ===== FLOATING WHATSAPP BUTTON =====
   Sits in the primary bottom-right corner; back-to-top (below) stacks
   directly above it so the two never overlap at any scroll position. */
.whatsapp-float{
  position:fixed;
  right:26px;
  bottom:26px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  color:var(--white);
  font-size:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 40px rgba(37,211,102,.35);
  transition:.3s ease;
  z-index:950;
}

.whatsapp-float:hover{
  transform:translateY(-4px) scale(1.06);
  color:var(--white);
}

/* One soft pulse every ~8s rather than a constant/continuous pulse:
   the keyframe sits still for the first ~88% of the cycle and only
   pulses briefly near the end. Paused on hover so it never fights
   the hover transform above. */
@keyframes waSoftPulse{
  0%,88%{box-shadow:0 18px 40px rgba(37,211,102,.35);}
  94%{box-shadow:0 18px 40px rgba(37,211,102,.35),0 0 0 10px rgba(37,211,102,.18);}
  100%{box-shadow:0 18px 40px rgba(37,211,102,.35),0 0 0 0 rgba(37,211,102,0);}
}

@media(min-width:769px){
  .whatsapp-float{
    animation:waSoftPulse 8s ease-out infinite;
  }

  .whatsapp-float:hover{
    animation-play-state:paused;
  }
}

.whatsapp-float-tip{
  position:absolute;
  right:calc(100% + 14px);
  top:50%;
  transform:translateY(-50%);
  background:#0F172A;
  color:var(--white);
  padding:8px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transition:.25s ease;
  pointer-events:none;
}

.whatsapp-float-tip::after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-left-color:#0F172A;
}

.whatsapp-float:hover .whatsapp-float-tip{
  opacity:1;
  visibility:visible;
}

@media(max-width:768px){
  .whatsapp-float{
    right:16px;
    bottom:16px;
    width:54px;
    height:54px;
    font-size:25px;
  }

  .whatsapp-float-tip{display:none;}
}

/* ===== FORM SUBMIT STATUS (Web3Forms AJAX) ===== */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.form-status{
  margin-top:14px;
  font-size:14px;
  font-weight:700;
  line-height:1.6;
  min-height:0;
}

.form-status:empty{
  margin-top:0;
}

.form-status-success{
  color:#16A34A;
}

.form-status-error{
  color:#DC2626;
}

form button[type="submit"]:disabled{
  opacity:.7;
  cursor:not-allowed;
}

/* ===== BACK TO TOP ===== */
.back-to-top{
  position:fixed;
  right:26px;
  bottom:98px;
  width:50px;
  height:50px;
  border:none;
  border-radius:50%;
  background:var(--cta-gradient);
  color:var(--white);
  font-size:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 18px 40px rgba(109,40,255,.32);
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.85);
  transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1),visibility .3s;
  z-index:900;
}

.back-to-top.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.back-to-top:hover{
  transform:translateY(-4px) scale(1.06);
}

@media(max-width:768px){
  .back-to-top{
    right:16px;
    bottom:82px;
    width:44px;
    height:44px;
    font-size:15px;
  }
}

/* ===== PREMIUM MOTION SYSTEM (v2 additions) =====
   Extends the .reveal/IntersectionObserver system above (driven by
   initScrollReveal() in script.js) rather than replacing it -- same
   shared easing, same "add a class, observe, add .in-view once"
   approach. New pieces: directional reveal variants, nav-link
   indicator, smooth-scroll, ambient decorative motion (desktop only,
   verified against every animated element's own positioning rules so
   nothing here can un-center anything), and one consolidated
   reduced-motion block covering all of it. */

/* html.js is added synchronously as the first statement in script.js.
   Anything below that must never be permanently invisible if JS
   fails/races is scoped under it, so without the class these rules
   simply don't apply and content renders normally -- progressive
   enhancement, not FOIT. */
html.js .reveal-left,
html.js .reveal-right,
html.js .reveal-scale{
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}

html.js .reveal-left{opacity:0;transform:translateX(-32px);}
html.js .reveal-right{opacity:0;transform:translateX(32px);}
html.js .reveal-scale{opacity:0;transform:scale(.94);}

html.js .reveal-left.in-view,
html.js .reveal-right.in-view,
html.js .reveal-scale.in-view{
  opacity:1;
  transform:none;
}

/* Left/right reveal only makes sense for a genuine side-by-side
   layout. Every page using .reveal-left/.reveal-right stacks that
   layout to a single, full-width column at <=992px (matching
   .rm-intro-grid's own breakpoint), and a full-width block shifted
   sideways by 32px has nowhere to go without its transform painting
   past the viewport edge -- causing real horizontal overflow, not
   just an off-screen-then-in effect. Falls back to the same small
   vertical lift as the base .reveal at that point instead. */
@media(max-width:992px){
  html.js .reveal-left,
  html.js .reveal-right{
    transform:translateY(24px);
  }

  html.js .reveal-left.in-view,
  html.js .reveal-right.in-view{
    transform:none;
  }
}

/* Nav-link underline indicator (desktop only -- the mobile menu's
   full-width rows use a bottom border instead, already in place).
   Excludes .cta-btn: that item is the gradient pill CTA, not a plain
   text link, and already has its own hover treatment. */
.nav-links > li > a:not(.cta-btn){
  position:relative;
}

.nav-links > li > a:not(.cta-btn)::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-4px;
  height:2px;
  background:var(--cta-gradient);
  border-radius:2px;
  transition:right .3s cubic-bezier(.22,1,.36,1);
}

.nav-links > li > a:not(.cta-btn):hover::after,
.nav-links > li > a:not(.cta-btn):focus-visible::after{
  right:0;
}

@media(max-width:992px){
  .nav-links > li > a:not(.cta-btn)::after{
    display:none;
  }
}

/* Same-page anchor scrolling. initSmoothScroll() in script.js already
   drives the buttons/links it binds explicitly; this covers any
   native anchor jump it doesn't (browser back/forward, etc). */
html{
  scroll-behavior:smooth;
}

/* Ambient decorative motion -- desktop only (disabled below 769px for
   mobile performance/battery per spec) and fully removed under
   reduced-motion below. Elements that use a static transform for
   positioning (.orbit/.main-circle/.rm-purple-circle) get that
   transform baked into their own keyframes so the animation can never
   drift them off-center; .ss-circle/.team-hero-shape/
   .portfolio-hero-shape have no positioning transform at this
   breakpoint so they animate directly. */
@keyframes floatSoft{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

@keyframes blobPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.025);}
}

@keyframes orbitSpin{
  from{transform:translate(-50%,-50%) rotate(0deg);}
  to{transform:translate(-50%,-50%) rotate(360deg);}
}

@keyframes circlePulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);}
  50%{transform:translate(-50%,-50%) scale(1.015);}
}

@keyframes purpleCirclePulse{
  0%,100%{transform:translateX(-50%) scale(1);}
  50%{transform:translateX(-50%) scale(1.02);}
}

@media(min-width:769px){
  .float-icon,
  .float-card,
  .rm-floating-card,
  .ss-float{
    animation:floatSoft 5s cubic-bezier(.22,1,.36,1) infinite;
  }

  .float-icon.insta,.ss-float-two{animation-delay:.5s;}
  .float-icon.tiktok,.ss-float-three{animation-delay:1s;}
  .float-icon.google{animation-delay:1.5s;}
  .card-two,.rm-floating-card.rm-exp{animation-delay:.8s;}

  .team-hero-shape,
  .portfolio-hero-shape,
  .ss-circle{
    animation:blobPulse 8s cubic-bezier(.22,1,.36,1) infinite;
  }

  .orbit{
    animation:orbitSpin 42s linear infinite;
  }

  .main-circle{
    animation:circlePulse 7s cubic-bezier(.22,1,.36,1) infinite;
  }

  .rm-purple-circle{
    animation:purpleCirclePulse 7s cubic-bezier(.22,1,.36,1) infinite;
  }
}

/* ===== CONSOLIDATED REDUCED-MOTION OVERRIDE =====
   Covers every animation/transition-driven effect added in this file
   (base .reveal + hero intro + button/card micro-interactions were
   already covered above where they're defined; this adds the rest:
   directional reveals, ambient motion, WhatsApp pulse, back-to-top,
   smooth-scroll). Content stays fully visible either way -- nothing
   here ever depends on JS to become visible in the first place. */
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  html.js .reveal-left,
  html.js .reveal-right,
  html.js .reveal-scale{
    opacity:1;
    transform:none;
    transition:none;
  }

  .float-icon,
  .float-card,
  .rm-floating-card,
  .ss-float,
  .team-hero-shape,
  .portfolio-hero-shape,
  .ss-circle,
  .orbit,
  .main-circle,
  .rm-purple-circle,
  .whatsapp-float{
    animation:none;
  }

  .back-to-top{
    transition:opacity .15s linear,visibility .15s linear;
  }

  .nav-links,
  .cta-btn,
  .dropdown-menu{
    transition-duration:.01s;
  }
}

/* ===== UNIVERSAL REDUCED-MOTION SAFETY NET =====
   Belt-and-suspenders on top of the targeted overrides above: this
   catches every transition/animation on the site (including
   per-component hover states in about.css/contact.css/services.css/
   team.css/portfolio.css) in case any were missed individually.
   Content itself is never gated behind JS/animation completing, so
   collapsing every duration to near-zero here just removes motion,
   never content. */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}