/* ===== CUSTOM FONTS ===== */
@font-face {
  font-family: 'Zain';
  src: url('fonts/Zain-Regular.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Omar';
  src: url('fonts/Omar-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BricolageGrotesque';
  src: url('fonts/BricolageGrotesque-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DINNextLT';
  src: url('fonts/DINNextLT-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TTFirsNeue';
  src: url('fonts/TTFirsNeue-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ===== VARIABLES ===== */
:root {
  --dark: #0d0d0d;
  --dark-2: #1a1a1a;
  --dark-3: #2a2a2a;
  --light: #ffffff;
  --light-2: #f9fafb;
  --light-3: #f1f5f9;
  --gray: #6b7280;
  --gray-light: #9ca3af;
  --accent: #1a1a1a;
  --accent-dark: #000000;
  --accent-light: rgba(0, 0, 0, 0.06);
  --border: rgba(0, 0, 0, 0.08);
  --border-dark: rgba(255, 255, 255, 0.1);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.16);
  --radius: 16px;
  --radius-sm: 10px;
  --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Flip accent to white inside dark contexts */
.section-dark,
.hero,
.page-header,
.cta-banner,
.footer,
.navbar,
.counters-section {
  --accent: #ffffff;
  --accent-dark: #e5e5e5;
  --accent-light: rgba(255, 255, 255, 0.08);
}

/* Ensure counter numbers and symbols are pure white */
.counters-section,
.counters-section *,
.counters-section .counter-num,
.counters-section .counter-num .accent-c,
.counters-section .counter,
.counters-section .counter-item,
.counters-section .counter-label {
  color: #ffffff !important;
}
.counters-section .counter-num { color: #ffffff !important; }
.counters-section span { color: #ffffff !important; }

/* ===== SVG ICON SIZING ===== */
.service-icon svg { width: 28px; height: 28px; color: var(--dark); }
.service-card:hover .service-icon svg { color: var(--light); }
.feature-icon-wrap svg { width: 30px; height: 30px; color: var(--light); }
.feature-card:hover .feature-icon-wrap svg { color: var(--dark); }
.contact-icon svg { width: 24px; height: 24px; color: var(--dark); }
.v-icon svg { width: 48px; height: 48px; color: var(--dark); }
.mv-icon svg { color: inherit; margin-bottom: 20px; }
.mv-icon { color: var(--light); margin-bottom: 20px; }
.mv-icon svg { color: inherit; }
.team-icon { display: flex; justify-content: center; margin-bottom: 18px; color: var(--light); }
.about-visual svg { opacity: 0.92; }
.service-visual svg { color: var(--dark); opacity: 0.8; }
.map-icon svg { color: var(--gray); }

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  font-family: 'DINNextLT', 'Cairo', sans-serif;
  direction: rtl;
  color: var(--dark);
  background: var(--light);
  line-height: 1.7;
  overflow-x: hidden;
  width: 100%;
  position: relative;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: pointer; border: none; }
/* ===== FONT ASSIGNMENTS ===== */

/* Numbers — TT Firs Neue Bold (Latin-only) */
.stat-bar-num,
.counter-num,
.counter,
.pricing-amount,
.pricing-currency,
.step-circle,
[data-target] {
  font-family: 'TTFirsNeue', 'Cairo', sans-serif !important;
  font-weight: 700;
}

/* Main Arabic headings — Zain (TT Firs Neue handles Latin chars/numbers automatically) */
h1, h2,
.hero-title,
.section-title,
.page-header h1 {
  font-family: 'TTFirsNeue', 'Zain', 'Cairo', sans-serif !important;
  font-weight: 700;
}

/* Bricolage Grotesque — UI: navbar, buttons, labels, footer */
.navbar,
.nav-links,
.nav-links a,
.nav-logo,
.nav-cta,
.btn,
.hero-tag,
.section-label,
.breadcrumb,
.breadcrumb a,
.breadcrumb span,
.footer,
.footer h5,
.footer-col,
.footer-col a,
.footer-col h5,
.footer-brand p,
.footer-bottom,
.footer-bottom span,
.f-social-btn,
.social-btn,
.socials-row a,
.pricing-period,
.tag,
.badge,
label,
.stat-bar-label,
.counter-label {
  font-family: 'BricolageGrotesque', 'Cairo', sans-serif !important;
}

/* DIN Next LT Arabic — subheadings (h3, h4, h5, h6) */
h3, h4, h5, h6 {
  font-family: 'DINNextLT', 'Cairo', sans-serif !important;
  font-weight: 700;
}

/* DIN Next LT Arabic — body text, paragraphs, forms, contact info */
body,
p,
.hero-desc,
.section-sub,
.checklist-item,
.checklist,
input,
textarea,
select,
.form-group,
.contact-item,
.ci-label,
.ci-value,
.faq-q,
.faq-a,
.hour-day,
.hour-time,
.feature-card p,
.value-card p,
.mv-card p,
.process-card p,
.pricing-feature,
.pricing-features li,
.about-text p,
.service-detail-text p {
  font-family: 'DINNextLT', 'Cairo', sans-serif !important;
}

/* Form placeholders use DIN as well */
input::placeholder,
textarea::placeholder {
  font-family: 'DINNextLT', 'Cairo', sans-serif !important;
}
/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes blink {
  0%, 100% { border-right-color: transparent; }
  50% { border-right-color: var(--light); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.3); }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* ===== UTILITY ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.section { padding: 110px 0; }
.section-dark { background: var(--dark); color: var(--light); }
.section-gray { background: var(--light-2); }
.text-center { text-align: center; }

.section-label {
  display: inline-block;
  padding: 6px 18px;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.section-dark .section-label {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
}
.section-title {
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 18px;
}
.section-sub {
  font-size: 17px;
  color: var(--gray);
  max-width: 580px;
  margin: 0 auto 64px;
  line-height: 1.8;
}
.section-dark .section-sub { color: rgba(255,255,255,0.95); }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--dark);
  color: var(--light);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.btn-primary:hover {
  background: #000;
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
/* Flip to white button on dark contexts */
.section-dark .btn-primary,
.pricing-card.featured .btn-primary,
.hero .btn-primary,
.cta-banner .btn-primary {
  background: var(--light);
  color: var(--dark);
}
.section-dark .btn-primary:hover,
.pricing-card.featured .btn-primary:hover,
.hero .btn-primary:hover,
.cta-banner .btn-primary:hover {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 32px rgba(255,255,255,0.15);
}
.btn-outline-light {
  background: transparent;
  color: var(--light);
  border: 2px solid rgba(255,255,255,0.35);
}
.btn-outline-light:hover {
  border-color: var(--light);
  background: rgba(255,255,255,0.08);
  transform: translateY(-3px);
}
.btn-dark {
  background: var(--dark);
  color: var(--light);
  border: 1px solid rgba(255,255,255,0.1);
}
.btn-dark:hover {
  background: var(--dark-2);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
.btn-light {
  background: var(--light);
  color: var(--dark);
}
.btn-light:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(255,255,255,0.15);
}
.btn-outline-dark {
  background: transparent;
  color: var(--dark);
  border: 2px solid var(--border);
}
.btn-outline-dark:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 1000;
  padding: 22px 0;
  transition: var(--transition);
}
.navbar.scrolled {
  background: rgba(13, 13, 13, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 14px 0;
  box-shadow: 0 1px 32px rgba(0,0,0,0.4);
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: flex;
  align-items: center;
}
.logo-img {
  height: 34px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: opacity 0.3s ease;
}
.logo-img:hover { opacity: 0.85; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  padding: 9px 18px;
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  transition: var(--transition);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--light);
  background: rgba(255,255,255,0.08);
}
.nav-cta {
  background: var(--light) !important;
  color: var(--dark) !important;
  border-radius: 100px !important;
  padding: 10px 22px !important;
}
.nav-cta:hover {
  background: rgba(255,255,255,0.88) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,255,255,0.15);
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--light);
  border-radius: 2px;
  transition: var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  background: var(--dark);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 120px 0 80px;
}

/* ===== FALLING PATTERN BACKGROUND ===== */
.falling-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--dark);
  background-image:
    radial-gradient(4px 100px at 0px 235px, #ffffff, transparent),
    radial-gradient(4px 100px at 300px 235px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 150px 117.5px, #ffffff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 252px, #ffffff, transparent),
    radial-gradient(4px 100px at 300px 252px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 150px 126px, #ffffff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 150px, #ffffff, transparent),
    radial-gradient(4px 100px at 300px 150px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 150px 75px, #ffffff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 253px, #ffffff, transparent),
    radial-gradient(4px 100px at 300px 253px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 150px 126.5px, #ffffff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 204px, #ffffff, transparent),
    radial-gradient(4px 100px at 300px 204px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 150px 102px, #ffffff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 134px, #ffffff, transparent),
    radial-gradient(4px 100px at 300px 134px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 150px 67px, #ffffff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 179px, #ffffff, transparent),
    radial-gradient(4px 100px at 300px 179px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 150px 89.5px, #ffffff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 299px, #ffffff, transparent),
    radial-gradient(4px 100px at 300px 299px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 150px 149.5px, #ffffff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 215px, #ffffff, transparent),
    radial-gradient(4px 100px at 300px 215px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 150px 107.5px, #ffffff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 281px, #ffffff, transparent),
    radial-gradient(4px 100px at 300px 281px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 150px 140.5px, #ffffff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 158px, #ffffff, transparent),
    radial-gradient(4px 100px at 300px 158px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 150px 79px, #ffffff 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 210px, #ffffff, transparent),
    radial-gradient(4px 100px at 300px 210px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 150px 105px, #ffffff 100%, transparent 150%);
  background-size:
    300px 235px, 300px 235px, 300px 235px,
    300px 252px, 300px 252px, 300px 252px,
    300px 150px, 300px 150px, 300px 150px,
    300px 253px, 300px 253px, 300px 253px,
    300px 204px, 300px 204px, 300px 204px,
    300px 134px, 300px 134px, 300px 134px,
    300px 179px, 300px 179px, 300px 179px,
    300px 299px, 300px 299px, 300px 299px,
    300px 215px, 300px 215px, 300px 215px,
    300px 281px, 300px 281px, 300px 281px,
    300px 158px, 300px 158px, 300px 158px,
    300px 210px, 300px 210px, 300px 210px;
  animation: fallingPattern 100s linear infinite;
}

@keyframes fallingPattern {
  from {
    background-position: 0px 220px, 3px 220px, 151.5px 337.5px, 25px 24px, 28px 24px, 176.5px 150px, 50px 16px, 53px 16px, 201.5px 91px, 75px 224px, 78px 224px, 226.5px 230.5px, 100px 19px, 103px 19px, 251.5px 121px, 125px 120px, 128px 120px, 276.5px 187px, 150px 31px, 153px 31px, 301.5px 120.5px, 175px 235px, 178px 235px, 326.5px 384.5px, 200px 121px, 203px 121px, 351.5px 228.5px, 225px 224px, 228px 224px, 376.5px 364.5px, 250px 26px, 253px 26px, 401.5px 105px, 275px 75px, 278px 75px, 426.5px 180px;
  }
  to {
    background-position: 0px 6800px, 3px 6800px, 151.5px 6917.5px, 25px 13632px, 28px 13632px, 176.5px 13758px, 50px 5416px, 53px 5416px, 201.5px 5491px, 75px 17175px, 78px 17175px, 226.5px 17301.5px, 100px 5119px, 103px 5119px, 251.5px 5221px, 125px 8428px, 128px 8428px, 276.5px 8495px, 150px 9876px, 153px 9876px, 301.5px 9965.5px, 175px 13391px, 178px 13391px, 326.5px 13540.5px, 200px 14741px, 203px 14741px, 351.5px 14848.5px, 225px 18770px, 228px 18770px, 376.5px 18910.5px, 250px 5082px, 253px 5082px, 401.5px 5161px, 275px 6375px, 278px 6375px, 426.5px 6480px;
  }
}

.falling-pattern-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 1.5px, rgba(13,13,13,0.6) 2px);
  background-size: 10px 10px;
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
  .falling-pattern-overlay {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 1.5px, rgba(13,13,13,0.85) 2px);
  }
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero-blob-1 {
  width: 700px; height: 700px;
  top: -200px; right: -150px;
  background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, transparent 65%);
  animation: floatY 8s ease-in-out infinite;
}
.hero-blob-2 {
  width: 500px; height: 500px;
  bottom: -200px; left: -100px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 65%);
  animation: floatY 10s ease-in-out infinite reverse;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero .container {
  position: relative;
  z-index: 2;
}
.hero-scroll-line {
  z-index: 2;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 22px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  color: rgba(255,255,255,0.95);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 48px;
  animation: fadeIn 0.7s ease forwards;
}
.hero-tag-dot {
  width: 8px; height: 8px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.15);
  animation: pulse 2s ease infinite;
}
.hero-tag-en {
  color: rgba(255,255,255,0.95);
  margin-right: 4px;
}
.hero-en {
  font-family: 'TTFirsNeue', sans-serif !important;
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 24px;
  animation: fadeUp 0.8s ease 0.1s both;
  direction: ltr;
}
.hero-en-1 {
  display: block;
  color: var(--light);
}
.hero-en-2 {
  display: block;
  color: rgba(255,255,255,0.22);
  margin-top: -2px;
}
.hero h1 {
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 500;
  color: var(--light);
  line-height: 1.2;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  animation: fadeUp 0.8s ease 0.2s both;
}
.hero-h1-line {
  display: inline-block;
  width: 90px;
  height: 0;
  border-top: 2px dashed rgba(255,255,255,0.45);
  flex-shrink: 0;
}
.typed-text {
  color: var(--light);
  border-right: 3px solid var(--light);
  padding-right: 6px;
  margin-right: 4px;
  animation: blink 0.9s step-end infinite;
  display: inline-block;
  min-width: 6ch;
  text-align: right;
  vertical-align: bottom;
}
.hero-desc {
  font-size: 19px;
  color: rgba(255,255,255,0.95);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.85;
  animation: fadeUp 0.8s ease 0.3s both;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeUp 0.8s ease 0.45s both;
}
.hero-scroll-line {
  position: absolute;
  bottom: 0; left: 50%;
  width: 1px; height: 80px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
  transform: translateX(-50%);
}

/* ===== STATS BAR ===== */
.stats-bar {
  background: var(--light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 36px 0;
}
.stats-bar-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.stat-bar-item {
  text-align: center;
}
.stat-bar-num {
  font-size: 42px;
  font-weight: 900;
  color: var(--dark);
  line-height: 1;
}
.stat-bar-num .accent-c { color: var(--accent); }
.stat-bar-label {
  font-size: 14px;
  color: var(--gray);
  margin-top: 4px;
}

/* ===== SERVICES CARDS ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
}
.service-card {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  cursor: default;
}
.service-card-accent {
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: var(--transition);
}
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(255,255,255,0.1);
}
.service-card:hover .service-card-accent { transform: scaleX(1); }
.service-num-bg {
  position: absolute;
  top: 16px; left: 24px;
  font-size: 72px;
  font-weight: 900;
  color: rgba(0,0,0,0.04);
  line-height: 1;
  pointer-events: none;
}
.service-icon {
  width: 60px; height: 60px;
  background: var(--accent-light);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 22px;
  transition: var(--transition);
}
.service-card:hover .service-icon {
  background: var(--accent);
  transform: scale(1.1) rotate(-5deg);
}
.service-card h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
}
.service-card p {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.75;
}
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  margin-top: 22px;
  transition: var(--transition);
}
.service-link:hover { gap: 12px; }

/* ===== WHY US ===== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.feature-card {
  padding: 36px 32px;
  background: var(--dark-2);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  transition: var(--transition);
}
.feature-card:hover {
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-6px);
  background: var(--dark-3);
}
.feature-icon-wrap {
  width: 64px; height: 64px;
  background: rgba(255,255,255,0.1);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 22px;
  transition: var(--transition);
}
.feature-card:hover .feature-icon-wrap {
  background: var(--accent);
  transform: rotate(-5deg) scale(1.1);
}
.feature-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--light);
  margin-bottom: 12px;
}
.feature-card p {
  color: rgba(255,255,255,0.95);
  font-size: 15px;
  line-height: 1.8;
}

/* ===== PROCESS ===== */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
}
.process-card {
  text-align: center;
  padding: 40px 28px;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  transition: var(--transition);
}
.process-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}
.step-circle {
  width: 60px; height: 60px;
  background: var(--dark);
  color: var(--light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  margin: 0 auto 24px;
  transition: var(--transition);
}
.process-card:hover .step-circle {
  background: var(--accent);
  transform: scale(1.12);
}
.process-card h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
}
.process-card p { color: var(--gray); font-size: 14px; }

/* ===== COUNTERS ===== */
.counters-section {
  background: var(--dark);
  padding: 80px 0;
}
.counters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  text-align: center;
}
.counter-item .counter-num {
  font-size: 60px;
  font-weight: 900;
  color: var(--light);
  line-height: 1;
}
.counter-item .counter-num .accent-c { color: var(--accent); }
.counter-item .counter-label {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin-top: 10px;
  letter-spacing: 0.3px;
}

/* ===== CTA BANNER ===== */
.cta-banner {
  background: linear-gradient(135deg, var(--dark-2) 0%, var(--dark-3) 50%, var(--dark) 100%);
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
  padding: 90px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  border: 80px solid rgba(255,255,255,0.06);
  border-radius: 50%;
}
.cta-banner::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -40px;
  width: 250px; height: 250px;
  border: 60px solid rgba(255,255,255,0.06);
  border-radius: 50%;
}
.cta-banner h2 {
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 900;
  color: var(--light);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.cta-banner p {
  font-size: 18px;
  color: rgba(255,255,255,0.95);
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}
.cta-banner .btn-dark:hover {
  background: var(--dark-2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* ===== PAGE HEADER ===== */
.page-header {
  background: var(--dark);
  padding: 170px 0 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header .container {
  position: relative;
  z-index: 2;
}
.page-header::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  margin-bottom: 20px;
}
.breadcrumb a { color: var(--accent); }
.breadcrumb span { color: rgba(255,255,255,0.95); }
.page-header-en {
  font-family: 'TTFirsNeue', sans-serif !important;
  font-size: clamp(48px, 7.5vw, 88px);
  font-weight: 700;
  color: var(--light);
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 10px;
  text-transform: capitalize;
}
.page-header h1 {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  margin-bottom: 18px;
}
.page-header p {
  font-size: 18px;
  color: rgba(255,255,255,0.95);
  max-width: 540px;
  margin: 0 auto;
}

/* ===== SERVICES DETAIL ===== */
.service-detail-section {
  padding: 90px 0;
  border-bottom: 1px solid var(--border);
}
.service-detail-section:last-of-type { border-bottom: none; }
.service-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.service-detail-grid.flip { direction: ltr; }
.service-detail-grid.flip .service-detail-text { direction: rtl; }
.service-visual {
  background: linear-gradient(135deg, var(--light-2) 0%, var(--light-3) 100%);
  border-radius: 24px;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 120px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.service-visual::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--accent-light) 0%, transparent 70%);
}
.service-detail-text .section-label { margin-bottom: 14px; }
.service-detail-text h2 {
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 900;
  margin-bottom: 16px;
}
.service-detail-text p {
  color: var(--gray);
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 28px;
}
.checklist { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--dark);
}
.checklist-item::before {
  content: '✓';
  color: var(--accent);
  font-weight: 900;
  font-size: 14px;
  background: var(--accent-light);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ===== PRICING ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 24px;
  align-items: start;
}
.pricing-card {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 44px 36px;
  transition: var(--transition);
  position: relative;
}
.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}
.pricing-card.featured {
  background: var(--dark);
  border: 2px solid var(--accent);
  transform: scale(1.04);
}
.pricing-card.featured:hover { transform: scale(1.04) translateY(-8px); }
.featured-badge {
  position: absolute;
  top: -16px; right: 50%;
  transform: translateX(50%);
  background: var(--accent);
  color: var(--light);
  padding: 5px 22px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.pricing-tier {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin-bottom: 14px;
}
.pricing-card.featured .pricing-tier { color: rgba(255,255,255,0.92); }
.pricing-price {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 6px;
}
.pricing-currency {
  font-size: 22px;
  font-weight: 700;
  color: var(--dark);
  margin-top: 14px;
}
.pricing-card.featured .pricing-currency { color: var(--light); }
.pricing-amount {
  font-size: 60px;
  font-weight: 900;
  line-height: 1;
  color: var(--dark);
}
.pricing-card.featured .pricing-amount { color: var(--light); }
.pricing-note {
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 32px;
}
.pricing-card.featured .pricing-note { color: rgba(255,255,255,0.92); }
.pricing-divider {
  height: 1px;
  background: var(--border);
  margin: 28px 0;
}
.pricing-card.featured .pricing-divider { background: rgba(255,255,255,0.08); }
.pricing-features { margin-bottom: 36px; }
.pf-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  font-size: 15px;
  color: var(--dark);
  border-bottom: 1px solid var(--border);
}
.pricing-card.featured .pf-item {
  color: rgba(255,255,255,0.95);
  border-bottom-color: rgba(255,255,255,0.07);
}
.pf-item:last-child { border-bottom: none; }
.pf-check { color: var(--gray); font-size: 17px; flex-shrink: 0; }
.pf-cross { color: var(--gray-light); font-size: 17px; flex-shrink: 0; }

/* ===== FAQ ===== */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
  transition: var(--transition);
}
.faq-item.open { border-color: rgba(0,0,0,0.15); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  transition: var(--transition);
  user-select: none;
}
.faq-q:hover { background: var(--light-2); }
.faq-icon {
  width: 30px; height: 30px;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 300;
  transition: var(--transition);
  flex-shrink: 0;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--accent);
  color: white;
}
.faq-a {
  padding: 0 26px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  font-size: 15px;
  color: var(--gray);
  line-height: 1.85;
}
.faq-item.open .faq-a {
  max-height: 400px;
  padding: 0 26px 22px;
}

/* ===== CONTACT ===== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 70px;
  align-items: start;
}
.contact-side h2 {
  font-size: 34px;
  font-weight: 900;
  margin-bottom: 14px;
}
.contact-side > p {
  color: var(--gray);
  font-size: 16px;
  margin-bottom: 40px;
  line-height: 1.8;
}
.contact-item {
  display: flex;
  gap: 18px;
  margin-bottom: 28px;
  align-items: flex-start;
}
.contact-icon {
  width: 52px; height: 52px;
  background: var(--accent-light);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.ci-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-light);
  margin-bottom: 4px;
}
.ci-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
}
.socials-row {
  display: flex;
  gap: 12px;
  margin-top: 36px;
}
.social-btn {
  width: 44px; height: 44px;
  background: var(--light-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: var(--transition);
}
.social-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  transform: translateY(-3px);
}

/* Contact Form */
.contact-form-wrap {
  background: var(--light-2);
  border-radius: 24px;
  padding: 48px;
  border: 1px solid var(--border);
}
.contact-form-wrap h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 28px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dark);
  margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--dark);
  background: var(--light);
  transition: var(--transition);
  outline: none;
  direction: rtl;
  appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-light);
}
.form-group textarea { height: 140px; resize: vertical; }

/* ===== ABOUT PAGE ===== */
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-visual {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-3) 100%);
  border-radius: 24px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100px;
  position: relative;
  overflow: hidden;
}
.about-visual::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,0,0,0.15) 0%, transparent 65%);
}
.about-text .section-label { margin-bottom: 14px; }
.about-text h2 {
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 900;
  margin-bottom: 20px;
}
.about-text p {
  color: var(--gray);
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 18px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.value-card {
  text-align: center;
  padding: 40px 28px;
  background: var(--light-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: var(--transition);
}
.value-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(255,255,255,0.1);
}
.value-card .v-icon { font-size: 52px; margin-bottom: 18px; }
.value-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.value-card p { color: var(--gray); font-size: 14px; line-height: 1.75; }

.mission-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.mv-card {
  padding: 40px 36px;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.mv-card-mission {
  background: var(--dark);
  color: var(--light);
}
.mv-card-vision {
  background: var(--accent);
  color: var(--light);
}
.mv-card::before {
  content: '';
  position: absolute;
  bottom: -50px; left: -50px;
  width: 200px; height: 200px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
}
.mv-card h3 {
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 14px;
}
.mv-card p {
  font-size: 16px;
  opacity: 0.75;
  line-height: 1.85;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--dark);
  color: var(--light);
  padding: 90px 0 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr repeat(3, 1fr);
  gap: 56px;
  margin-bottom: 64px;
}
.footer-brand .nav-logo { font-size: 18px; }
.footer-brand p {
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  margin-top: 14px;
  max-width: 260px;
  line-height: 1.8;
}
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.f-social-btn {
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: var(--transition);
  color: rgba(255,255,255,0.95);
}
.f-social-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  transform: translateY(-3px);
}
.footer-col h5 {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.92);
  margin-bottom: 22px;
}
.footer-col a {
  display: block;
  color: rgba(255,255,255,0.95);
  font-size: 14px;
  margin-bottom: 11px;
  transition: var(--transition);
}
.footer-col a:hover {
  color: var(--light);
  padding-right: 6px;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
}

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

/* Tablet — 1024px */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
  .section { padding: 90px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .service-detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .service-detail-grid.flip { direction: rtl; }
  .about-story-grid { grid-template-columns: 1fr; gap: 40px; }
  .mission-vision-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .counters-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .stats-bar-inner { flex-wrap: wrap; gap: 32px; justify-content: center; }
  .service-visual { height: 280px; }
  .service-visual svg { width: 140px; height: 140px; }
  .about-visual { height: 320px; }
  .about-visual svg { width: 120px; height: 120px; }
}

/* Mobile landscape & smaller tablets — 768px */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }

  /* Navbar — solid black on mobile to fully cover background */
  .navbar.scrolled,
  .navbar {
    background: #0d0d0d !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .nav-links {
    display: none;
    position: fixed;
    top: 0; right: 0; left: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #0d0d0d;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 80px 24px 40px;
    z-index: 50;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    font-size: 22px;
    padding: 14px 28px;
    color: #ffffff;
    font-weight: 700;
  }
  .nav-links .nav-cta {
    margin-top: 12px;
    font-size: 18px;
  }
  .nav-toggle { display: flex; position: relative; z-index: 100; }
  .nav-logo { position: relative; z-index: 100; }
  .navbar { padding: 14px 0; }
  .logo-img { height: 26px; }
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* Hero */
  .hero { min-height: auto; padding: 110px 0 60px; }
  .hero-content { width: 100%; max-width: 100%; }
  .hero-tag {
    font-size: 11px;
    padding: 7px 14px;
    margin-bottom: 28px;
    text-align: center;
    line-height: 1.4;
  }
  .hero-en {
    font-size: clamp(36px, 11vw, 56px);
    letter-spacing: -1px;
    margin-bottom: 16px;
    word-break: keep-all;
  }
  .hero h1 {
    font-size: clamp(18px, 5vw, 26px);
    gap: 10px;
    margin-bottom: 22px;
    flex-wrap: wrap;
  }
  .hero-h1-line { display: none; }
  .hero-desc { font-size: 15px; margin-bottom: 32px; line-height: 1.75; padding: 0 8px; }
  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    max-width: 320px;
    margin: 0 auto;
  }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-scroll-line { display: none; }

  /* Page header */
  .page-header { padding: 100px 0 50px; min-height: auto; }
  .page-header .container { padding: 0 20px; }
  .page-header-en {
    font-size: clamp(36px, 9vw, 56px);
    letter-spacing: -1px;
    margin-bottom: 6px;
    line-height: 1;
  }
  .page-header h1 {
    font-size: clamp(20px, 5vw, 28px);
    margin-bottom: 14px;
    line-height: 1.3;
  }
  .page-header p {
    font-size: 14px;
    line-height: 1.7;
    padding: 0 8px;
    margin: 0 auto;
  }
  .breadcrumb { font-size: 12px; margin-bottom: 20px; }

  /* Section titles */
  .section-title { font-size: clamp(24px, 5.5vw, 34px); }
  .section-sub { font-size: 15px; margin-bottom: 44px; padding: 0 8px; }

  /* Grids */
  .services-grid,
  .features-grid,
  .values-grid,
  .process-grid,
  .pricing-grid,
  .counters-grid { grid-template-columns: 1fr; gap: 20px; }
  .features-grid { gap: 18px; }
  .counters-grid { gap: 32px; }

  /* Service / Feature cards */
  .service-card { padding: 28px 22px; }
  .feature-card { padding: 28px 22px; }
  .value-card { padding: 28px 22px; }
  .process-card { padding: 32px 22px 26px; }
  .service-card h3, .feature-card h3, .value-card h3 { font-size: 18px; }
  .service-num-bg { font-size: 90px; }

  /* Mission Vision */
  .mv-card { padding: 32px 26px; }
  .mv-card h3 { font-size: 22px; }

  /* About */
  .about-story-grid { gap: 32px !important; }
  .about-visual { height: 220px; border-radius: 18px; }
  .about-visual svg { width: 90px; height: 90px; }
  .about-text h2 { font-size: clamp(22px, 5.5vw, 30px); margin-bottom: 16px; }
  .about-text p { font-size: 14px; line-height: 1.85; margin-bottom: 16px; }
  .about-text > div[style*="display:flex"] {
    gap: 16px !important;
    margin-top: 24px !important;
    justify-content: space-between;
  }
  .about-text > div[style*="display:flex"] > div {
    flex: 1 1 calc(33% - 12px);
    min-width: 90px;
    text-align: center;
  }
  .about-text div[style*="font-size:40px"] { font-size: 28px !important; }
  .about-text div[style*="font-size:14px"] { font-size: 12px !important; }

  /* Stats bar */
  .stats-bar { padding: 36px 0; }
  .stats-bar-inner { gap: 28px 20px; }
  .stat-bar-num { font-size: 32px; }
  .stat-bar-label { font-size: 12px; }
  .stat-bar-item { flex: 1 1 calc(50% - 10px); min-width: 130px; }

  /* Counters */
  .counter-num { font-size: 50px; }
  .counter-label { font-size: 13px; }

  /* Service detail (services.html) */
  .service-detail-section { padding: 56px 0; }
  .service-detail-grid {
    gap: 28px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .service-detail-grid .service-visual { order: -1; }
  .service-visual {
    height: 200px;
    border-radius: 18px;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
  }
  .service-visual svg { width: 100px; height: 100px; }
  .service-detail-text h2 {
    font-size: clamp(22px, 5vw, 30px);
    margin-bottom: 14px;
  }
  .service-detail-text p {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 20px;
  }
  .checklist-item {
    font-size: 14px;
    padding: 8px 0 8px 24px;
    line-height: 1.55;
  }
  .checklist-item::before {
    width: 16px;
    height: 16px;
    font-size: 10px;
  }

  /* Pricing */
  .pricing-section { padding: 56px 0; }
  .pricing-section + .pricing-section { padding-top: 0; }
  .pricing-grid { max-width: 100%; margin: 0; }
  .pricing-card { padding: 28px 22px; }
  .pricing-card.featured {
    transform: none;
    margin: 12px 0;
  }
  .pricing-card.featured:hover { transform: translateY(-6px); }
  .pricing-tier { font-size: 14px; }
  .pricing-amount { font-size: 42px; }
  .pricing-currency { font-size: 15px; margin-top: 8px; }
  .pricing-note { font-size: 13px; }
  .pricing-features { margin-bottom: 24px; }
  .pf-item {
    font-size: 13.5px;
    padding: 8px 0;
    gap: 10px;
  }
  .featured-badge {
    font-size: 11px;
    padding: 5px 18px;
    top: -14px;
  }

  /* FAQ */
  .faq-list { max-width: 100%; }
  .faq-q {
    font-size: 14.5px;
    padding: 16px 18px;
    line-height: 1.5;
    gap: 12px;
  }
  .faq-a { padding: 0 18px 16px; font-size: 13.5px; line-height: 1.7; }

  /* Pricing custom card (inline-styled in pricing.html) */
  div[style*="text-align:center"][style*="padding:32px"] {
    padding: 24px 20px !important;
    margin-top: 32px !important;
  }
  div[style*="font-size:22px"][style*="font-weight:800"] {
    font-size: 18px !important;
  }

  /* Team / feature cards on dark sections */
  .feature-card[style*="text-align:center"] { padding: 28px 20px; }
  .team-icon svg { width: 44px !important; height: 44px !important; }

  /* Contact */
  .contact-layout { gap: 32px !important; }
  .contact-side { width: 100%; }
  .contact-side h2 { font-size: clamp(22px, 5vw, 28px); margin-bottom: 14px; }
  .contact-side > p { font-size: 14px; margin-bottom: 24px; }
  .form-row { grid-template-columns: 1fr !important; gap: 16px; }
  .contact-form-wrap { padding: 28px 22px; border-radius: 18px; }
  .contact-form-wrap h3 { font-size: 22px; margin-bottom: 20px; }
  .contact-item { gap: 14px; margin-bottom: 18px; }
  .contact-icon { width: 44px; height: 44px; flex-shrink: 0; }
  .ci-label { font-size: 12px; margin-bottom: 2px; }
  .ci-value { font-size: 14px; word-break: break-word; }
  .socials-row { gap: 10px; margin-top: 20px; }
  .social-btn { width: 38px; height: 38px; font-size: 13px; }
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px 14px;
    font-size: 15px;
  }
  .form-group label { font-size: 13px; margin-bottom: 6px; }

  /* CTA banner */
  .cta-banner { padding: 64px 0; }
  .cta-banner h2 { font-size: clamp(22px, 5.5vw, 32px); }
  .cta-banner p { font-size: 15px; }
  .cta-banner::before, .cta-banner::after { display: none; }

  /* Footer */
  .footer { padding: 60px 0 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; padding-top: 24px; }
  .footer-brand p { font-size: 14px; }

  /* Buttons */
  .btn { padding: 13px 28px; font-size: 15px; }
}

/* Small phones — 480px */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section { padding: 52px 0; }

  /* Hero */
  .hero { padding: 100px 0 50px; }
  .hero-tag { font-size: 11px; padding: 6px 14px; }
  .hero-en { font-size: clamp(32px, 12vw, 48px); }
  .hero h1 { font-size: 17px; gap: 10px; }
  .hero-h1-line { width: 36px; }
  .hero-desc { font-size: 14px; }

  /* Page header */
  .page-header { padding: 110px 0 50px; }
  .page-header-en { font-size: clamp(34px, 11vw, 48px); }
  .page-header h1 { font-size: 22px; }

  /* Stats bar — full single column for very small screens */
  .stats-bar { padding: 28px 0; }
  .stat-bar-item { flex: 1 1 100%; }
  .stat-bar-num { font-size: 38px; }

  /* Cards padding tighter */
  .service-card, .feature-card, .value-card, .process-card,
  .mv-card, .pricing-card { padding: 26px 20px; }

  /* Form */
  .contact-form-wrap { padding: 24px 18px; }
  input, textarea, select { font-size: 15px; padding: 12px 14px; }
  textarea { min-height: 110px; }

  /* About story stats */
  .about-text [style*="display:flex"] { gap: 16px !important; }
  .about-text [style*="font-size:40px"] { font-size: 28px !important; }
  .about-text [style*="font-size:14px"] { font-size: 12px !important; }

  /* Section titles */
  .section-title { font-size: 24px; line-height: 1.25; }
  .section-label { font-size: 11px; padding: 5px 14px; }

  /* Falling pattern: reduce blur cost on small devices */
  .falling-pattern-overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

  /* Buttons */
  .btn { width: 100%; justify-content: center; padding: 13px 24px; }
  .hero-actions .btn { width: 100%; }
}