: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 7%;
  background:rgba(248,250,255,.90);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(109,40,255,.08);
}

.navbar{
  max-width:1300px;
  margin:auto;
  background:var(--white);
  border-radius:18px;
  padding:12px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:var(--shadow);
}

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

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

.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:42px;
  height:42px;
  border:none;
  background:transparent;
  cursor:pointer;
  border-radius:10px;
  transition:.25s ease;
}

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

.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{
  color:#D7DBFF;
  line-height:1.8;
  font-size:15px;
}

.footer-col a{
  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;
  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;
  gap:12px;
  margin-top:24px;
  flex-wrap:wrap;
}

.social-icons a{
  width:46px;
  height:46px;
  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;
}

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

.map-placeholder{
  height:58px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:8px;
  text-align:center;
  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){
  header{
    padding:12px 7%;
  }

  .navbar{
    padding:10px 32px;
  }

  .logo img{
    height:76px;
  }

  .nav-links{
    gap:40px;
  }

  .nav-links a{
    font-size:14px;
  }

  .cta-btn,
  .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:14px 20px;}
  .navbar{padding:12px 18px;flex-wrap:wrap;}
  .logo img{height:48px;}

  .nav-toggle{display:flex;order:2;margin-left:auto;}

  .nav-links{
    order:4;
    flex-basis:100%;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .35s cubic-bezier(.22,1,.36,1),opacity .3s ease,margin .35s cubic-bezier(.22,1,.36,1);
    margin-top:0;
  }

  .cta-btn{
    order:5;
    flex-basis:100%;
    width:100%;
    max-height:0;
    overflow:hidden;
    opacity:0;
    text-align:center;
    box-sizing:border-box;
    transition:max-height .35s cubic-bezier(.22,1,.36,1),opacity .3s ease,margin .35s cubic-bezier(.22,1,.36,1);
    margin-top:0;
  }

  body.nav-open .nav-links{
    max-height:70vh;
    overflow-y:auto;
    opacity:1;
    margin-top:14px;
    padding-bottom:6px;
  }

  body.nav-open .cta-btn{
    max-height:70px;
    opacity:1;
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

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

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

  .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){
  .hero-modern{
    padding:75px 22px;
  }

  .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;}
  .tiktok{left:25px;bottom:80px;}
  .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,
  .footer-container{
    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{
    text-align:center;
  }

  .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{
    text-align:center;
    padding:70px 22px 30px;
  }

  .footer-container{
    gap:36px;
  }

  .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 ===== */
header{
  transition:box-shadow .3s ease,background .3s ease;
}

header.scrolled .navbar{
  box-shadow:0 22px 50px rgba(15,23,42,.14);
}

.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). */
.nav-links > li > a{
  position:relative;
}

.nav-links > li > a::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:hover::after,
.nav-links > li > a:focus-visible::after{
  right:0;
}

@media(max-width:992px){
  .nav-links > li > a::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;
  }
}