:root {
  --blue:#1B7FC3;
  --blue-bright:#2196D4;
  --blue-light:#62B4E0;
  --blue-pale:#D6EBF7;
  --navy:#1E2555;
  --navy-deep:#141A3D;
  --white:#FFF;
  --off-white:#F7F9FC;
  --gray-50:#F0F3F8;
  --gray-100:#E2E7EF;
  --gray-300:#B0B8C9;
  --gray-500:#6B7490;
  --gray-700:#3D4459;
  --gradient-brand:linear-gradient(135deg,#1B7FC3,#1E2555);
  --gradient-hero:linear-gradient(145deg,#0D1230 0%,#1E2555 35%,#1B3A6B 70%,#1B7FC3 100%);
  --shadow-sm:0 2px 8px rgba(30,37,85,.06);
  --shadow-md:0 8px 30px rgba(30,37,85,.1);
  --shadow-lg:0 20px 60px rgba(30,37,85,.12);
  --shadow-xl:0 30px 80px rgba(30,37,85,.18);
  --radius:16px;
  --radius-sm:10px;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --tr:.35s var(--ease);
  --font:'Canva Sans',system-ui,-apple-system,'Segoe UI',Helvetica,sans-serif
}

*,*::before,*::after {
  box-sizing:border-box;
  margin:0;
  padding:0
}
html {
  scroll-behavior:smooth;
  font-size:16px
}

body {
  font-family:var(--font);
  color:var(--gray-700);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased
}

img {
  max-width:100%;
  height:auto;
  display:block
}
.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 28px
}
.section {
  padding:100px 0
}

.page {
  display:none;
  transform:translateX(24px)
}
.page.active {
  display:block;
  animation:pageSlideRight .5s var(--ease) both
}
body.page-dir-prev .page.active {
  animation:pageSlideLeft .5s var(--ease) both
}
@keyframes pageSlideRight {
  from {
    transform:translateX(24px)
  }
  to {
    transform:translateX(0)
  }
}
@keyframes pageSlideLeft {
  from {
    transform:translateX(-24px)
  }
  to {
    transform:translateX(0)
  }
}

.page-wipe {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1200;
  opacity:0;
  background:linear-gradient(120deg, rgba(27,127,195,0), rgba(27,127,195,0.12), rgba(30,37,85,0.18), rgba(27,127,195,0));
  transform:translateX(-120%)
}
body.is-switching .page-wipe {
  animation:pageWipe .6s var(--ease) both
}
@keyframes pageWipe {
  0% {
    opacity:0;
    transform:translateX(-120%)
  }
  15% {
    opacity:1
  }
  50% {
    opacity:1;
    transform:translateX(0)
  }
  100% {
    opacity:0;
    transform:translateX(120%)
  }
}

/* NAV */
.nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  padding:18px 0;
  transition:var(--tr)
}

.nav.scrolled {
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);
  padding:12px 0;
  box-shadow:var(--shadow-sm)
}

.nav-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
  padding:0 28px
}

.nav-logo {
  display:flex;
  align-items:center;
  text-decoration:none
}
.nav-logo img {
  height:36px;
  width:auto;
  transition:var(--tr);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)) saturate(1.2);
  transform:scale(1.12)
}

.nav.scrolled .nav-logo img {
  height:32px;
  filter:none;
  transform:scale(1)
}

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

.nav-links a {
  color:rgba(255,255,255,.85);
  text-decoration:none;
  font-size:13.5px;
  font-weight:500;
  transition:var(--tr);
  position:relative
}

.nav.scrolled .nav-links a {
  color:var(--gray-700)
}
.nav-links a.active {
  color:var(--blue)
}
.nav-links a:hover {
  color:var(--blue)
}

.nav-links a::after {
  content:'';
  position:absolute;
  bottom:-6px;
  left:0;
  width:0;
  height:2px;
  background:var(--blue);
  transition:var(--tr)
}
.nav-links a:hover::after {
  width:100%
}
.nav-links a.active::after {
  width:100%
}

.nav-cta-btn {
  background:var(--blue)!important;
  color:var(--white)!important;
  padding:9px 22px;
  border-radius:50px;
  font-weight:600!important;
  box-shadow:0 4px 15px rgba(27,127,195,.25)
}

.nav-cta-btn:hover {
  background:#1569A5!important;
  transform:translateY(-2px)
}
.nav-cta-btn::after {
  display:none!important
}

.hamburger {
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  width:30px;
  height:22px;
  position:relative
}

.hamburger span {
  display:block;
  width:100%;
  height:2.5px;
  background:var(--white);
  border-radius:2px;
  position:absolute;
  left:0;
  transition:var(--tr)
}

.nav.scrolled .hamburger span {
  background:var(--navy)
}

.hamburger span:nth-child(1) {
  top:0
}
.hamburger span:nth-child(2) {
  top:10px
}
.hamburger span:nth-child(3) {
  top:20px
}

/* HERO */
.hero {
  min-height:100vh;
  background:var(--gradient-hero);
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden
}

.hero-bg {
  position:absolute;
  inset:0;
  background:url('https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=1800&q=80') center/cover;
  opacity:.1
}

.hero-overlay {
  position:absolute;
  inset:0;
  background:var(--gradient-hero);
  opacity:.92
}

.hero-orbit {
  position:absolute;
  right:-8%;
  top:5%;
  width:700px;
  height:700px;
  pointer-events:none
}

.orbit-ring {
  position:absolute;
  inset:0;
  border:1.5px solid rgba(27,127,195,.12);
  border-radius:50%;
  animation:spin 80s linear infinite
}

.orbit-ring:nth-child(2) {
  inset:80px;
  border-color:rgba(27,127,195,.08);
  animation-duration:60s;
  animation-direction:reverse
}

.orbit-ring:nth-child(3) {
  inset:180px;
  border-color:rgba(27,127,195,.15);
  animation-duration:40s
}

.orbit-dot {
  position:absolute;
  width:10px;
  height:10px;
  background:var(--blue);
  border-radius:50%;
  box-shadow:0 0 20px rgba(27,127,195,.5)
}

.orbit-dot.d1 {
  top:0;
  left:50%
}
.orbit-dot.d2 {
  bottom:15%;
  right:5%;
  width:6px;
  height:6px;
  opacity:.6
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }

}

.hero-photos {
  position:absolute;
  right:5%;
  top:50%;
  transform:translateY(-50%);
  width:440px;
  height:480px
}

.hero-photo {
  position:absolute;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.3);
  transition:var(--tr)
}

.hero-photo img {
  width:100%;
  height:100%;
  object-fit:cover
}

.hero-photo.p1 {
  width:260px;
  height:180px;
  top:0;
  left:0;
  z-index:3;
  animation:fA 8s ease-in-out infinite
}

.hero-photo.p2 {
  width:220px;
  height:280px;
  top:100px;
  right:0;
  z-index:2;
  animation:fB 10s ease-in-out infinite
}

.hero-photo.p3 {
  width:200px;
  height:150px;
  bottom:0;
  left:40px;
  z-index:1;
  animation:fC 9s ease-in-out infinite
}

.hero-photo-label {
  position:absolute;
  bottom:12px;
  left:12px;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(10px);
  padding:6px 14px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  color:var(--white)
}

@keyframes fA {
  0%,100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-14px)
  }

}

@keyframes fB {
  0%,100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(10px)
  }

}

@keyframes fC {
  0%,100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-10px)
  }

}

.hero-content {
  position:relative;
  z-index:5;
  max-width:620px
}

.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(27,127,195,.12);
  border:1px solid rgba(27,127,195,.25);
  border-radius:50px;
  padding:8px 22px;
  margin-bottom:28px;
  animation:fadeUp .7s ease-out
}

.hero-badge-dot {
  width:8px;
  height:8px;
  background:#3FD4A2;
  border-radius:50%;
  animation:pulse 2.5s ease-in-out infinite
}

@keyframes pulse {
  0%,100% {
    opacity:1;
    transform:scale(1)
  }
  50% {
    opacity:.4;
    transform:scale(1.5)
  }

}

.hero-badge span {
  font-size:12.5px;
  font-weight:600;
  color:var(--blue-light);
  letter-spacing:1.5px;
  text-transform:uppercase
}

.hero h1 {
  font-size:clamp(38px,5.5vw,66px);
  font-weight:800;
  line-height:1.08;
  color:var(--white);
  margin-bottom:24px;
  animation:fadeUp .7s ease-out .1s both
}

.gradient-text {
  background:linear-gradient(135deg,#62B4E0,#2196D4,#62B4E0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}

.hero-sub {
  font-size:17px;
  line-height:1.75;
  color:rgba(255,255,255,.6);
  margin-bottom:40px;
  animation:fadeUp .7s ease-out .2s both
}

.hero-actions {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  animation:fadeUp .7s ease-out .3s both
}

.btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 30px;
  border-radius:50px;
  font-family:var(--font);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  border:none;
  transition:var(--tr)
}

.btn-primary {
  background:var(--blue);
  color:var(--white);
  box-shadow:0 6px 25px rgba(27,127,195,.3)
}

.btn-primary:hover {
  background:#1569A5;
  transform:translateY(-3px);
  box-shadow:0 12px 35px rgba(27,127,195,.4)
}

.btn-outline {
  background:rgba(255,255,255,.08);
  color:var(--white);
  border:1.5px solid rgba(255,255,255,.2)
}

.btn-outline:hover {
  background:rgba(255,255,255,.12);
  border-color:var(--blue-light);
  transform:translateY(-3px)
}

.btn-white {
  background:var(--white);
  color:var(--navy);
  box-shadow:var(--shadow-md)
}
.btn-white:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg)
}

.btn svg {
  width:18px;
  height:18px
}

.hero-stats {
  display:flex;
  gap:44px;
  margin-top:56px;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.08);
  animation:fadeUp .7s ease-out .45s both
}

.stat-num {
  font-size:36px;
  font-weight:800;
  color:var(--white)
}
.stat-num .blue {
  color:var(--blue-light)
}

.stat-label {
  font-size:13px;
  color:rgba(255,255,255,.45);
  margin-top:6px;
  font-weight:500
}

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

}

/* SOCIAL BAR */
.social-bar {
  background:var(--navy-deep);
  padding:20px 0;
  border-bottom:1px solid rgba(255,255,255,.05)
}

.social-bar-inner {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap
}

.social-bar-label {
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,.4);
  letter-spacing:1px;
  text-transform:uppercase;
  margin-right:12px
}

.social-icon {
  width:40px;
  height:40px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--tr);
  text-decoration:none
}

.social-icon:hover {
  transform:translateY(-3px)
}
.social-icon svg {
  width:18px;
  height:18px;
  fill:rgba(255,255,255,.5);
  transition:var(--tr)
}
.social-icon:hover svg {
  fill:var(--white)
}

.si-fb:hover {
  background:#1877F2
}
.si-ig:hover {
  background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF)
}
.si-li:hover {
  background:#0A66C2
}
.si-x:hover {
  background:#000
}
.si-yt:hover {
  background:#FF0000
}
.si-tt:hover {
  background:#000
}
.si-sc:hover {
  background:#FFFC00
}
.si-sc:hover svg {
  fill:#000
}
.si-wa:hover {
  background:#25D366
}
.si-tg:hover {
  background:#0088CC
}
.si-pin:hover {
  background:#E60023
}

/* TRUST */
.trust-bar {
  background:var(--off-white);
  padding:28px 0;
  border-bottom:1px solid var(--gray-100)
}

.trust-items {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap
}

.trust-item {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  color:var(--gray-500)
}

.trust-item svg {
  width:20px;
  height:20px;
  color:var(--blue);
  opacity:.7
}

/* SECTION HEADERS */
.section-header {
  text-align:center;
  margin-bottom:60px
}

.section-tag {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  color:var(--blue);
  letter-spacing:2.5px;
  text-transform:uppercase;
  margin-bottom:16px
}

.section-tag::before,.section-tag::after {
  content:'';
  width:24px;
  height:2px;
  background:var(--blue);
  opacity:.4
}

.section-title {
  font-size:clamp(28px,4vw,44px);
  font-weight:800;
  color:var(--navy);
  line-height:1.15
}

.section-title .blue {
  color:var(--blue)
}

.section-desc {
  font-size:17px;
  color:var(--gray-500);
  max-width:580px;
  margin:16px auto 0;
  line-height:1.7
}

/* SERVICES GRID */
.services-section {
  background:var(--off-white)
}

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

.srv-card {
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  transition:var(--tr);
  border:1px solid var(--gray-100);
  cursor:pointer;
  text-decoration:none;
  display:block
}

.srv-card:hover {
  transform:translateY(-8px);
  box-shadow:var(--shadow-xl);
  border-color:transparent
}

.srv-card-img {
  height:190px;
  overflow:hidden;
  position:relative
}

.srv-card-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease)
}

.srv-card:hover .srv-card-img img {
  transform:scale(1.08)
}

.srv-card-img-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(30,37,85,.6) 100%)
}

.srv-card-badge {
  position:absolute;
  top:14px;
  left:14px;
  background:var(--blue);
  color:var(--white);
  padding:4px 12px;
  border-radius:20px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase
}

.srv-card-body {
  padding:24px 24px 28px
}

.srv-card-icon {
  width:48px;
  height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  margin-top:-40px;
  position:relative;
  z-index:2;
  box-shadow:var(--shadow-md)
}

.srv-card-icon svg {
  width:22px;
  height:22px;
  color:var(--white)
}

.i-trans {
  background:linear-gradient(135deg,#1B7FC3,#2196D4)
}
.i-soft {
  background:linear-gradient(135deg,#6366F1,#818CF8)
}
.i-pr {
  background:linear-gradient(135deg,#E11D73,#F472B6)
}
.i-mkt {
  background:linear-gradient(135deg,#F59E0B,#FBBF24)
}
.i-learn {
  background:linear-gradient(135deg,#059669,#34D399)
}
.i-arabic {
  background:linear-gradient(135deg,#8B5CF6,#A78BFA)
}

.srv-card h3 {
  font-size:18px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:8px
}

.srv-card p {
  font-size:14px;
  color:var(--gray-500);
  line-height:1.6;
  margin-bottom:16px
}

.srv-card-tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:16px
}

.srv-tag {
  font-size:11px;
  font-weight:600;
  padding:3px 10px;
  border-radius:20px;
  background:var(--gray-50);
  color:var(--gray-700)
}

.srv-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:600;
  color:var(--blue);
  text-decoration:none;
  transition:var(--tr)
}

.srv-link:hover {
  gap:12px
}
.srv-link svg {
  width:16px;
  height:16px
}

/* SERVICE HERO WITH ILLUSTRATION */
.srv-hero {
  min-height:52vh;
  background:var(--gradient-hero);
  display:flex;
  align-items:center;
  padding:120px 0 60px;
  position:relative;
  overflow:hidden
}

.srv-hero-bg {
  position:absolute;
  inset:0;
  opacity:.08
}
.srv-hero-bg img {
  width:100%;
  height:100%;
  object-fit:cover
}

.srv-hero-overlay {
  position:absolute;
  inset:0;
  background:var(--gradient-hero);
  opacity:.9
}

.srv-hero-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
  position:relative;
  z-index:2
}

.srv-hero-content {
  max-width:600px;
  flex:1
}

.breadcrumb {
  font-size:13px;
  color:rgba(255,255,255,.4);
  margin-bottom:16px
}
.breadcrumb a {
  color:rgba(255,255,255,.4);
  text-decoration:none;
  transition:var(--tr)
}
.breadcrumb a:hover {
  color:var(--blue-light)
}

.srv-hero h1 {
  font-size:clamp(32px,4.5vw,50px);
  font-weight:800;
  color:var(--white);
  line-height:1.1;
  margin-bottom:18px
}

.srv-hero p {
  font-size:17px;
  line-height:1.7;
  color:rgba(255,255,255,.55);
  margin-bottom:28px
}

.srv-hero-illust {
  flex-shrink:0;
  width:360px;
  height:300px;
  display:flex;
  align-items:center;
  justify-content:center
}

.srv-hero-illust svg {
  width:100%;
  height:100%;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.2))
}

/* SERVICE BODY */
.srv-body {
  padding:80px 0
}

.srv-body-grid {
  display:grid;
  grid-template-columns:1fr 360px;
  gap:56px
}

.srv-main h2 {
  font-size:28px;
  font-weight:800;
  color:var(--navy);
  margin-bottom:18px
}

.srv-main h3 {
  font-size:20px;
  font-weight:700;
  color:var(--navy);
  margin:32px 0 14px
}

.srv-main p {
  font-size:15.5px;
  line-height:1.8;
  color:var(--gray-700);
  margin-bottom:14px
}

.srv-main ul {
  list-style:none;
  margin:18px 0 28px
}

.srv-main li {
  padding:10px 0 10px 28px;
  position:relative;
  font-size:15px;
  color:var(--gray-700);
  line-height:1.65
}

.srv-main li::before {
  content:'';
  position:absolute;
  left:0;
  top:18px;
  width:10px;
  height:10px;
  background:var(--blue);
  border-radius:50%;
  opacity:.5
}

.srv-main li strong {
  color:var(--navy)
}

.srv-inline-photo {
  width:100%;
  height:280px;
  border-radius:var(--radius);
  overflow:hidden;
  margin:24px 0
}

.srv-inline-photo img {
  width:100%;
  height:100%;
  object-fit:cover
}

.srv-sidebar {
  position:sticky;
  top:90px;
  align-self:start
}

.sidebar-card {
  background:var(--off-white);
  border:1px solid var(--gray-100);
  border-radius:var(--radius);
  padding:28px;
  margin-bottom:20px
}

.sidebar-card h4 {
  font-size:16px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:12px
}

.sidebar-card p {
  font-size:14px;
  color:var(--gray-500);
  line-height:1.65;
  margin-bottom:14px
}

.sidebar-cta {
  display:block;
  width:100%;
  text-align:center;
  padding:13px 20px;
  background:var(--blue);
  color:var(--white);
  font-weight:600;
  font-size:14px;
  border-radius:50px;
  text-decoration:none;
  transition:var(--tr);
  box-shadow:0 4px 15px rgba(27,127,195,.2)
}

.sidebar-cta:hover {
  background:#1569A5;
  transform:translateY(-2px)
}

/* SUB-SERVICES */
.sub-services {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin:24px 0 32px
}

.sub-srv {
  background:var(--off-white);
  border:1px solid var(--gray-100);
  border-radius:var(--radius-sm);
  padding:22px;
  transition:var(--tr)
}

.sub-srv:hover {
  border-color:var(--blue);
  box-shadow:var(--shadow-sm)
}

.sub-srv h4 {
  font-size:14.5px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:5px;
  display:flex;
  align-items:center;
  gap:8px
}

.sub-srv h4 svg {
  width:18px;
  height:18px;
  color:var(--blue);
  min-width:18px
}

.sub-srv p {
  font-size:13px;
  color:var(--gray-500);
  line-height:1.55
}

/* TESTIMONIALS */
.testimonials-band {
  background:var(--gradient-hero);
  padding:80px 0;
  position:relative;
  overflow:hidden
}

.testimonials-band .section-tag {
  color:var(--blue-light)
}
.testimonials-band .section-tag::before,.testimonials-band .section-tag::after {
  background:var(--blue-light)
}

.testimonials-band .section-title {
  color:var(--white)
}
.testimonials-band .section-title .blue {
  color:var(--blue-light)
}

.test-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:48px
}

.test-card {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:28px;
  backdrop-filter:blur(10px);
  transition:var(--tr)
}

.test-card:hover {
  background:rgba(255,255,255,.1);
  transform:translateY(-4px)
}

.test-stars {
  display:flex;
  gap:3px;
  margin-bottom:14px
}
.test-stars svg {
  width:15px;
  height:15px;
  fill:#FBBF24
}

.test-quote {
  font-size:14.5px;
  color:rgba(255,255,255,.7);
  line-height:1.7;
  margin-bottom:18px;
  font-style:italic
}

.test-author {
  display:flex;
  align-items:center;
  gap:12px
}

.test-avatar {
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(27,127,195,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  color:var(--blue-light)
}

.test-name {
  font-size:14px;
  font-weight:700;
  color:var(--white)
}
.test-role {
  font-size:12px;
  color:rgba(255,255,255,.4)
}

.star {
  fill:#FBBF24
}

/* CASE STUDIES */
.case-studies-section {
  background:var(--off-white);
  padding:80px 0
}

.case-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
  margin-top:48px
}

.case-card {
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--gray-100);
  transition:var(--tr)
}

.case-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:transparent
}

.case-card-img {
  height:190px;
  overflow:hidden;
  position:relative
}

.case-card-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease)
}

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

.case-card-category {
  position:absolute;
  top:14px;
  left:14px;
  padding:4px 14px;
  border-radius:20px;
  font-size:11px;
  font-weight:700;
  background:var(--blue);
  color:var(--white);
  text-transform:uppercase
}

.case-card-body {
  padding:24px
}

.case-card h3 {
  font-size:18px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:10px;
  line-height:1.3
}

.case-card p {
  font-size:14px;
  color:var(--gray-500);
  line-height:1.6;
  margin-bottom:14px
}

.case-stats {
  display:flex;
  gap:24px
}

.case-stat-num {
  font-size:20px;
  font-weight:800;
  color:var(--blue)
}

.case-stat-label {
  font-size:11px;
  color:var(--gray-500);
  font-weight:600;
  text-transform:uppercase
}

/* NEWS */
.news-section {
  background:var(--off-white)
}

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

.news-card {
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--gray-100);
  transition:var(--tr)
}

.news-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:transparent
}

.news-card-img {
  height:190px;
  overflow:hidden;
  position:relative
}

.news-card-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease)
}

.news-card:hover .news-card-img img {
  transform:scale(1.06)
}

.news-card-type {
  position:absolute;
  top:14px;
  left:14px;
  padding:4px 14px;
  border-radius:20px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase
}

.t-news {
  background:var(--blue);
  color:var(--white)
}
.t-gallery {
  background:#059669;
  color:var(--white)
}
.t-vlog {
  background:#DC2626;
  color:var(--white)
}

.news-card-body {
  padding:22px
}

.news-card-date {
  font-size:12px;
  font-weight:600;
  color:var(--gray-300);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:8px
}

.news-card h3 {
  font-size:17px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:8px;
  line-height:1.35
}

.news-card p {
  font-size:13.5px;
  color:var(--gray-500);
  line-height:1.55;
  margin-bottom:12px
}

.vlog-play {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:56px;
  height:56px;
  background:rgba(220,38,38,.9);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--tr);
  box-shadow:0 6px 25px rgba(220,38,38,.35)
}

.news-card:hover .vlog-play {
  transform:translate(-50%,-50%) scale(1.1)
}
.vlog-play svg {
  width:22px;
  height:22px;
  color:var(--white);
  margin-left:2px
}

/* PROCESS */
.process-section {
  background:var(--gradient-hero);
  position:relative;
  overflow:hidden
}

.process-bg {
  position:absolute;
  inset:0;
  background:url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1800&q=80') center/cover;
  opacity:.06
}

.process-overlay {
  position:absolute;
  inset:0;
  background:var(--gradient-hero);
  opacity:.92
}

.process-section .section-tag {
  color:var(--blue-light)
}
.process-section .section-tag::before,.process-section .section-tag::after {
  background:var(--blue-light)
}
.process-section .section-title {
  color:var(--white)
}
.process-section .section-title .blue {
  color:var(--blue-light)
}
.process-section .section-desc {
  color:rgba(255,255,255,.55)
}

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

.process-card {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:32px 24px;
  text-align:center;
  backdrop-filter:blur(10px);
  transition:var(--tr)
}

.process-card:hover {
  background:rgba(255,255,255,.1);
  transform:translateY(-6px)
}

.process-num {
  width:56px;
  height:56px;
  background:rgba(27,127,195,.15);
  border:2px solid rgba(27,127,195,.4);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  font-size:20px;
  font-weight:800;
  color:var(--blue-light)
}

.process-card h4 {
  font-size:16px;
  font-weight:700;
  color:var(--white);
  margin-bottom:8px
}

.process-card p {
  font-size:13.5px;
  color:rgba(255,255,255,.5);
  line-height:1.55
}

/* WHY */
.why-section {
  background:var(--white)
}

.why-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center
}

.why-photo-stack {
  position:relative;
  height:520px
}

.why-img-main {
  position:absolute;
  top:0;
  left:0;
  width:75%;
  height:400px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow-lg)
}

.why-img-main img {
  width:100%;
  height:100%;
  object-fit:cover
}

.why-img-small {
  position:absolute;
  bottom:0;
  right:0;
  width:55%;
  height:260px;
  border-radius:20px;
  overflow:hidden;
  border:6px solid var(--white);
  box-shadow:var(--shadow-lg)
}

.why-img-small img {
  width:100%;
  height:100%;
  object-fit:cover
}

.why-badge-float {
  position:absolute;
  bottom:180px;
  left:-10px;
  background:var(--white);
  border-radius:var(--radius);
  padding:16px 24px;
  box-shadow:var(--shadow-lg);
  display:flex;
  align-items:center;
  gap:14px;
  z-index:5;
  animation:fA 7s ease-in-out infinite
}

.why-badge-icon {
  width:44px;
  height:44px;
  background:var(--gradient-brand);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center
}

.why-badge-icon svg {
  width:22px;
  height:22px;
  color:var(--white)
}

.why-badge-text {
  font-size:14px;
  font-weight:700;
  color:var(--navy)
}
.why-badge-sub {
  font-size:12px;
  color:var(--gray-500)
}

.why-content .section-tag {
  display:flex;
  justify-content:flex-start
}
.why-content .section-title {
  text-align:left
}
.why-content .section-desc {
  text-align:left;
  margin:16px 0 32px
}

.why-list {
  list-style:none
}

.why-item {
  display:flex;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid var(--gray-100)
}
.why-item:last-child {
  border-bottom:none
}

.why-item-icon {
  width:44px;
  height:44px;
  min-width:44px;
  background:var(--blue-pale);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center
}

.why-item-icon svg {
  width:20px;
  height:20px;
  color:var(--blue)
}

.why-item h4 {
  font-size:16px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:4px
}

.why-item p {
  font-size:14px;
  color:var(--gray-500);
  line-height:1.6
}

/* CTA */
.cta-section {
  background:var(--off-white)
}

.cta-box {
  background:var(--gradient-brand);
  border-radius:24px;
  padding:72px 60px;
  text-align:center;
  position:relative;
  overflow:hidden
}

.cta-box::before {
  content:'';
  position:absolute;
  inset:0;
  background:url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1400&q=80') center/cover;
  opacity:.08
}

.cta-box h2 {
  font-size:clamp(28px,3.5vw,44px);
  font-weight:800;
  color:var(--white);
  margin-bottom:16px;
  position:relative;
  z-index:2
}

.cta-box p {
  font-size:17px;
  color:rgba(255,255,255,.6);
  max-width:480px;
  margin:0 auto 32px;
  line-height:1.7;
  position:relative;
  z-index:2
}

.cta-actions {
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  position:relative;
  z-index:2
}

/* CONTACT */
.contact-section {
  background:var(--white)
}

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:60px;
  align-items:start
}

.contact-info-item {
  display:flex;
  gap:16px;
  margin-bottom:24px
}

.contact-icon-box {
  width:48px;
  height:48px;
  min-width:48px;
  background:var(--blue-pale);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center
}

.contact-icon-box svg {
  width:20px;
  height:20px;
  color:var(--blue)
}

.contact-info-item h4 {
  font-size:15px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:3px
}

.contact-info-item p {
  font-size:14px;
  color:var(--gray-500);
  line-height:1.5
}

.contact-map {
  width:100%;
  height:180px;
  border-radius:var(--radius);
  overflow:hidden;
  margin-top:20px;
  border:1px solid var(--gray-100)
}

.contact-map img {
  width:100%;
  height:100%;
  object-fit:cover
}

.contact-form-card {
  background:var(--white);
  border:1px solid var(--gray-100);
  border-radius:20px;
  padding:36px;
  box-shadow:var(--shadow-lg)
}

.contact-form-card h3 {
  font-size:22px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:6px
}

.form-sub {
  font-size:14px;
  color:var(--gray-500);
  margin-bottom:24px
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.form-group {
  margin-bottom:16px
}

.form-group label {
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--navy);
  margin-bottom:6px
}

.form-group input,.form-group textarea,.form-group select {
  width:100%;
  padding:12px 16px;
  border:1.5px solid var(--gray-100);
  border-radius:var(--radius-sm);
  font-family:var(--font);
  font-size:14px;
  color:var(--gray-700);
  background:var(--off-white);
  transition:var(--tr);
  outline:none
}

.form-group input:focus,.form-group textarea:focus,.form-group select:focus {
  border-color:var(--blue);
  background:var(--white);
  box-shadow:0 0 0 4px rgba(27,127,195,.08)
}

.form-group textarea {
  min-height:100px;
  resize:vertical
}

.form-submit {
  width:100%;
  padding:14px;
  background:var(--blue);
  color:var(--white);
  font-family:var(--font);
  font-size:15px;
  font-weight:700;
  border:none;
  border-radius:50px;
  cursor:pointer;
  transition:var(--tr);
  box-shadow:0 6px 25px rgba(27,127,195,.25)
}

.form-submit:hover {
  background:#1569A5;
  transform:translateY(-2px)
}

/* TEAM */
.team-hero {
  background:var(--gradient-hero);
  padding:140px 0 80px;
  text-align:center;
  position:relative;
  overflow:hidden
}

.team-hero-bg {
  position:absolute;
  inset:0;
  background:url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1600&q=80') center/cover;
  opacity:.08
}

.team-hero-overlay {
  position:absolute;
  inset:0;
  background:var(--gradient-hero);
  opacity:.9
}

.team-hero-content {
  position:relative;
  z-index:2
}

.team-hero h1 {
  font-size:clamp(36px,5vw,56px);
  font-weight:800;
  color:var(--white);
  margin-bottom:16px
}

.team-hero p {
  font-size:18px;
  color:rgba(255,255,255,.55);
  max-width:560px;
  margin:0 auto;
  line-height:1.7
}

.founder-section {
  padding:100px 0;
  background:var(--white)
}

.founder-layout {
  display:grid;
  grid-template-columns:380px 1fr;
  gap:64px;
  align-items:start
}

.founder-photo {
  width:100%;
  aspect-ratio:3/4;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow-xl);
  position:relative
}

.founder-photo img {
  width:100%;
  height:100%;
  object-fit:cover
}

.founder-photo-accent {
  position:absolute;
  bottom:-16px;
  right:-16px;
  width:120px;
  height:120px;
  background:var(--gradient-brand);
  border-radius:16px;
  z-index:-1
}

.founder-name-badge {
  position:absolute;
  bottom:24px;
  left:24px;
  right:24px;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(15px);
  border-radius:14px;
  padding:14px 18px
}

.founder-name-badge h3 {
  font-size:18px;
  font-weight:800;
  color:var(--white);
  margin-bottom:2px
}

.founder-name-badge span {
  font-size:13px;
  color:var(--blue-light);
  font-weight:600
}

.founder-content h2 {
  font-size:30px;
  font-weight:800;
  color:var(--navy);
  margin-bottom:8px
}

.founder-content .founder-title {
  font-size:15px;
  color:var(--blue);
  font-weight:600;
  margin-bottom:24px
}

.founder-content p {
  font-size:15px;
  line-height:1.8;
  color:var(--gray-700);
  margin-bottom:16px
}

.founder-highlights {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin:28px 0
}

.fh-item {
  background:var(--off-white);
  border:1px solid var(--gray-100);
  border-radius:var(--radius-sm);
  padding:18px;
  transition:var(--tr)
}

.fh-item:hover {
  border-color:var(--blue)
}
.fh-item h4 {
  font-size:14px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:4px
}
.fh-item p {
  font-size:13px;
  color:var(--gray-500);
  line-height:1.5
}

.founder-publications {
  margin-top:28px
}
.founder-publications h3 {
  font-size:18px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:14px
}

.pub-list {
  list-style:none
}
.pub-list li {
  padding:8px 0 8px 24px;
  position:relative;
  font-size:14px;
  color:var(--gray-700);
  border-bottom:1px solid var(--gray-100)
}

.pub-list li::before {
  content:'📖';
  position:absolute;
  left:0;
  top:8px;
  font-size:13px
}
.pub-list li:last-child {
  border-bottom:none
}

.team-members-section {
  padding:80px 0;
  background:var(--off-white)
}

.team-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:48px
}

.team-card {
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--gray-100);
  text-align:center;
  transition:var(--tr)
}

.team-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg)
}

.team-card-photo {
  height:240px;
  overflow:hidden;
  background:var(--gray-50)
}
.team-card-photo img {
  width:100%;
  height:100%;
  object-fit:cover
}

.team-card-body {
  padding:18px
}
.team-card h4 {
  font-size:16px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:2px
}
.team-card span {
  font-size:13px;
  color:var(--blue);
  font-weight:500
}

/* FOOTER */
.footer {
  background:var(--navy-deep);
  padding:60px 0 28px
}

.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.3fr;
  gap:40px;
  margin-bottom:40px
}

.footer-brand-text {
  font-size:13.5px;
  line-height:1.7;
  color:rgba(255,255,255,.4);
  margin-top:16px
}

.footer-logo img {
  height:34px;
  width:auto;
  filter:brightness(1.2) drop-shadow(0 2px 6px rgba(0,0,0,.35)) saturate(1.1)
}

.footer h4 {
  font-size:13px;
  font-weight:700;
  color:var(--white);
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:18px
}

.footer ul {
  list-style:none
}
.footer li {
  margin-bottom:10px
}

.footer a {
  color:rgba(255,255,255,.4);
  text-decoration:none;
  font-size:13.5px;
  transition:var(--tr)
}
.footer a:hover {
  color:var(--blue-light)
}

.footer-social {
  display:flex;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap
}

.footer-social a {
  width:34px;
  height:34px;
  background:rgba(255,255,255,.06);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--tr)
}

.footer-social a:hover {
  background:var(--blue)
}
.footer-social svg {
  width:15px;
  height:15px;
  fill:rgba(255,255,255,.5)
}

.footer-bottom {
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px
}

.footer-bottom p {
  font-size:12.5px;
  color:rgba(255,255,255,.3)
}

.footer-legal {
  display:flex;
  gap:24px
}
.footer-legal a {
  font-size:12.5px
}

/* FLOATS */
.wa-float {
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:900;
  width:56px;
  height:56px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 25px rgba(37,211,102,.35);
  transition:var(--tr);
  text-decoration:none
}

.wa-float:hover {
  transform:scale(1.1)
}
.wa-float svg {
  width:26px;
  height:26px;
  fill:white
}

.btt {
  position:fixed;
  bottom:90px;
  right:28px;
  z-index:900;
  width:40px;
  height:40px;
  background:var(--navy);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-md);
  opacity:0;
  pointer-events:none;
  transition:var(--tr);
  text-decoration:none
}

.btt.show {
  opacity:1;
  pointer-events:auto
}
.btt:hover {
  background:var(--blue)
}
.btt svg {
  width:16px;
  height:16px;
  color:var(--white)
}

.no-scroll {
  overflow:hidden
}

.mobile-nav {
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(84vw,360px);
  z-index:1201;
  background:rgba(20,26,61,.98);
  display:flex;
  flex-direction:column;
  padding:24px 22px;
  transform:translateX(100%);
  transition:transform .4s var(--ease)
}

.mobile-nav.open {
  transform:translateX(0)
}

.mobile-nav-overlay {
  position:fixed;
  inset:0;
  z-index:1200;
  background:rgba(6,10,30,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s var(--ease)
}
.mobile-nav-overlay.open {
  opacity:1;
  pointer-events:auto
}

.mobile-nav-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--white);
  font-weight:600;
  letter-spacing:.6px;
  margin-bottom:18px
}
.mob-close {
  background:none;
  border:none;
  cursor:pointer;
  font-size:28px;
  color:var(--white)
}

.mobile-nav-links {
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:8px 0
}
.mobile-nav-links a {
  color:var(--white);
  text-decoration:none;
  font-size:16px;
  font-weight:600;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  transition:var(--tr)
}
.mobile-nav-links a:hover {
  background:rgba(255,255,255,.1)
}

.mobile-nav-cta {
  margin-top:auto
}
.mobile-nav-cta .btn {
  width:100%;
  justify-content:center
}

.reveal {
  opacity:0;
  transform:translateY(36px);
  transition:opacity .65s ease-out,transform .65s ease-out
}
.reveal.vis {
  opacity:1;
  transform:translateY(0)
}

@media(max-width:1024px) {
  .hero-photos,.srv-hero-illust {
    display:none
  }
  .services-grid,.news-grid {
    grid-template-columns:1fr 1fr
  }
  .why-layout,.founder-layout {
    grid-template-columns:1fr;
    gap:48px
  }
  .why-photo-stack {
    height:400px
  }
  .process-grid,.team-grid {
    grid-template-columns:1fr 1fr
  }
  .contact-grid,.case-grid {
    grid-template-columns:1fr
  }
  .footer-grid {
    grid-template-columns:1fr 1fr
  }
  .test-grid {
    grid-template-columns:1fr 1fr
  }

}

@media(max-width:768px) {
  .nav-links {
    display:none
  }
  .hamburger {
    display:block
  }
  .nav-inner {
    padding:0 18px
  }
  .nav-logo img {
    height:30px;
    transform:scale(1.06)
  }
  .nav.scrolled .nav-logo img {
    height:28px;
    transform:scale(1)
  }
  .section {
    padding:72px 0
  }
  .container {
    padding:0 18px
  }
  .hero {
    min-height:auto;
    padding:120px 0 60px
  }
  .hero-orbit {
    display:none
  }
  .hero-content {
    text-align:center;
    margin:0 auto
  }
  .hero-actions {
    justify-content:center
  }
  .hero-actions .btn {
    width:100%;
    justify-content:center
  }
  .hero-stats {
    justify-content:center
  }
  .services-grid,.news-grid,.test-grid {
    grid-template-columns:1fr
  }
  .hero-stats {
    flex-wrap:wrap;
    gap:28px
  }
  .process-grid,.team-grid {
    grid-template-columns:1fr
  }
  .footer-grid {
    grid-template-columns:1fr
  }
  .form-row,.sub-services,.founder-highlights {
    grid-template-columns:1fr
  }
  .srv-body-grid {
    grid-template-columns:1fr
  }
  .why-photo-stack {
    height:340px
  }
  .cta-box {
    padding:48px 28px
  }
  .founder-layout {
    grid-template-columns:1fr
  }
  .founder-photo {
    max-width:320px;
    margin:0 auto
  }

}

@media(max-width:480px) {
  .hero h1 {
    font-size:clamp(30px,8vw,40px)
  }
  .hero-sub {
    font-size:15px
  }
  .section-title {
    font-size:clamp(24px,6.5vw,34px)
  }
  .stat-num {
    font-size:28px
  }
  .srv-card-body {
    padding:20px 18px 24px
  }
  .cta-box {
    padding:40px 20px
  }
}