/* ============================================
   HERO SECTIONS
   ============================================ */
.hero {
  position: relative;
  background: #fafafa;
  padding-top: var(--space-6);
  padding-bottom: var(--space-4);
  overflow: hidden;
}

/* ── Animated background layers ── */
.hero-bg-shape {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}

/* Large soft orb — top right */
.hero-bg-shape::before {
  content: '';
  position: absolute; top: -15%; right: -8%;
  width: 720px; height: 720px;
  background: radial-gradient(circle at 40% 40%,
    rgba(232,35,42,.11) 0%,
    rgba(232,35,42,.04) 45%,
    transparent 70%);
  border-radius: 50%;
  animation: hero-orb-drift 14s ease-in-out infinite alternate;
}

/* Smaller orb — bottom left */
.hero-bg-shape::after {
  content: '';
  position: absolute; bottom: -12%; left: -6%;
  width: 480px; height: 480px;
  background: radial-gradient(circle,
    rgba(26,26,26,.045) 0%,
    transparent 70%);
  border-radius: 50%;
  animation: hero-orb-drift 18s ease-in-out infinite alternate-reverse;
}

/* Dot-grid texture */
.hero-bg-shape .hero-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(0,0,0,.055) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 50%, black 20%, transparent 80%);
}

@keyframes hero-orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, 20px) scale(1.08); }
}

/* ── Layout ── */
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
}
/* Extra breathing room on the hero specifically — the visual panel on the
   right was crowding the viewport edge with the site's normal .container
   gutter. Higher specificity (.hero-content.container) beats the plain
   .container media-query rules in responsive.css regardless of load order. */
.hero-content.container {
  padding-inline: 48px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  /* Fill the viewport below the sticky header (minus hero's own vertical
     padding and the services ticker's height) so the ticker strip lands
     right at the bottom of the first screen instead of floating mid-page. */
  min-height: calc(100vh - var(--header-height) - 100px);
}

/* ── Left copy ── */
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 16px 6px 10px;
  background: var(--color-primary-bg);
  border: 1px solid rgba(232,35,42,.22);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-5);
  animation: fadeInDown .5s ease both;
  box-shadow: 0 2px 12px rgba(232,35,42,.10);
}
.hero-badge .dot {
  width: 8px; height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

.hero-title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: var(--fw-extrabold);
  color: var(--color-dark);
  line-height: 1.18;
  margin-bottom: var(--space-5);
  letter-spacing: -.025em;
  animation: fadeInUp .55s .1s ease both;
}
.hero-title .highlight {
  color: var(--color-primary);
  position: relative;
  display: inline-block;
}
/* Animated underline on highlight */
.hero-title .highlight::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--color-primary), rgba(232,35,42,.3));
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  animation: underline-grow .6s .7s ease forwards;
}
@keyframes underline-grow {
  to { transform: scaleX(1); }
}

.hero-desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-6);
  max-width: 460px;
  animation: fadeInUp .55s .2s ease both;
}

.hero-actions {
  display: flex; align-items: center;
  gap: var(--space-4); flex-wrap: wrap;
  animation: fadeInUp .55s .3s ease both;
}

.hero-trust {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--text-sm); color: var(--color-text-muted);
  animation: fadeInUp .55s .4s ease both;
}
.hero-trust .avatars { display: flex; }
.hero-trust .avatars img {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2.5px solid white; margin-left: -10px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.hero-trust .avatars img:first-child { margin-left: 0; }

/* ── Right visual panel ── */
.hero-visual {
  position: relative;
  height: 100%;
  max-height: 460px;
  display: flex;
  align-items: stretch;
  animation: scaleIn .7s .15s ease both;
  overflow: visible;
  gap: 8px;
}

/* Main image card */
.hero-main-img {
  flex: 1;
  min-width: 0;
  height: 100%;
  border-radius: var(--radius-2xl);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  display: block;
  object-fit: cover;
  position: relative;
  z-index: 2;
}

/* Floating image grid — two smaller images stacked right */
.hero-img-grid {
  position: relative;
  width: 36%;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
}
.hero-img-grid img {
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius-xl);
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
  object-fit: cover;
  object-position: center top;
  display: block;
  border: 3px solid #fff;
  transition: transform .4s ease, box-shadow .4s ease;
}
.hero-img-grid img:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.hero-img-grid img:nth-child(1) { animation: float-card-a 6s ease-in-out infinite; }
.hero-img-grid img:nth-child(2) { animation: float-card-b 7s ease-in-out infinite; }

@keyframes float-card-a {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
@keyframes float-card-b {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(8px); }
}

/* ── Floating stat cards ── */
.hero-stat-card {
  position: absolute;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--radius-xl);
  padding: 10px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.10), 0 2px 8px rgba(232,35,42,.08);
  display: flex; align-items: center; gap: 8px;
  z-index: 10;
  white-space: nowrap;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-duration: .6s;
  animation-name: fadeInUp;
}
.hero-stat-card .stat-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: var(--color-primary-bg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hero-stat-card .stat-icon svg { width: 20px; height: 20px; }
.hero-stat-card .stat-val {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: var(--fw-extrabold);
  color: var(--color-dark);
  line-height: 1;
}
.hero-stat-card .stat-lbl {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Positions — inside main image bounds */
.hero-stat-card.card-projects {
  bottom: 20px; left: 20px;
  animation: fadeInUp .6s .5s ease both, float-card-a 7s 1s ease-in-out infinite;
}
.hero-stat-card.card-clients {
  top: 20px; left: 50%;
  transform: translateX(-50%);
  animation: fadeInUp .6s .65s ease both, float-card-b 8s 1.2s ease-in-out infinite;
}
.hero-stat-card.card-rating {
  bottom: 20px; left: calc(20px + 180px + 12px);
  animation: fadeInUp .6s .8s ease both, float-card-a 6s 1.4s ease-in-out infinite;
}

/* ── Floating code snippet card ── */
.hero-code-card {
  position: absolute;
  bottom: 90px; left: 20px;
  background: rgba(20,20,40,.93);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-xl);
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 10;
  min-width: 180px;
  animation: fadeInUp .6s .6s ease both, float-card-b 9s 1s ease-in-out infinite;
  border: 1px solid rgba(255,255,255,.08);
}
.hero-code-card .code-dots {
  display: flex; gap: 5px; margin-bottom: 10px;
}
.hero-code-card .code-dots span {
  width: 9px; height: 9px; border-radius: 50%;
}
.hero-code-card .code-dots span:nth-child(1) { background: #ff5f57; }
.hero-code-card .code-dots span:nth-child(2) { background: #febc2e; }
.hero-code-card .code-dots span:nth-child(3) { background: #28c840; }
.hero-code-card .code-line {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.7;
  white-space: nowrap;
}
.hero-code-card .cl-kw  { color: #ff79c6; }
.hero-code-card .cl-fn  { color: #50fa7b; }
.hero-code-card .cl-str { color: #f1fa8c; }
.hero-code-card .cl-num { color: #bd93f9; }
.hero-code-card .cl-cm  { color: #6272a4; }

/* ── Image label badges ── */
.hero-img-label {
  position: absolute;
  z-index: 5;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(232,35,42,.35);
}
.hero-img-label--seo    { top: 8px;  right: 4px; }
.hero-img-label--design { top: calc(50% + 12px); right: 4px; }

/* Responsive breakpoints moved to responsive.css */

.hero-image {
  width: 100%; border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

/* Page hero (inner pages) */
.page-hero {
  position: relative;
  padding-top: 35px;
  padding-bottom: var(--space-16);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(232,35,42,.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(232,35,42,.10) 0%, transparent 55%),
    linear-gradient(160deg, #0e0e0e 0%, #1a0a0b 45%, #111 100%);
}

/* dot grid */
.page-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
}

/* glowing orb top-left */
.page-hero::after {
  content: '';
  position: absolute;
  top: -80px; left: -80px;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(232,35,42,.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: ph-orb 8s ease-in-out infinite alternate;
}

@keyframes ph-orb {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.15); }
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

/* decorative ring */
.page-hero .container::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 520px; height: 520px;
  border: 1px solid rgba(232,35,42,.08);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.page-hero .container::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 320px; height: 320px;
  border: 1px solid rgba(232,35,42,.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.page-hero h1 {
  color: var(--color-white);
  font-size: clamp(1.9rem, 4.5vw, 3.25rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  margin-bottom: var(--space-2);
  letter-spacing: -.02em;
  animation: ph-fadein .6s ease both;
}

/* red underline accent on h1 */
.page-hero h1::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), rgba(232,35,42,.3));
  border-radius: 999px;
  margin: var(--space-4) auto 0;
}

.page-hero p {
  color: rgba(255,255,255,.65);
  font-size: clamp(var(--text-base), 1.8vw, var(--text-lg));
  max-width: 580px;
  margin-inline: auto;
  line-height: var(--lh-relaxed);
  margin-top: var(--space-5);
  animation: ph-fadein .7s .1s ease both;
}

@keyframes ph-fadein {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: rgba(255,255,255,.5);
  justify-content: center; margin-bottom: var(--space-4);
}
.breadcrumb a { color: rgba(255,255,255,.5); transition: color var(--transition-fast); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb .sep { color: rgba(255,255,255,.3); }
.breadcrumb .current { color: var(--color-primary); }

/* Breadcrumb pill — service detail pages: left-aligned, glass pill, modern hover effects */
.breadcrumb.svc-breadcrumb-pill {
  display: flex;
  width: fit-content;
  justify-content: flex-start;
  gap: 6px;
  padding: 7px 16px 7px 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.breadcrumb.svc-breadcrumb-pill:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}
.breadcrumb.svc-breadcrumb-pill a {
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: var(--fw-medium);
}
.breadcrumb.svc-breadcrumb-pill a:hover { color: #fff; }
.breadcrumb.svc-breadcrumb-pill .sep { color: rgba(255,255,255,.3); font-size: 11px; }
.breadcrumb.svc-breadcrumb-pill .current { color: #fff; font-size: 12px; font-weight: var(--fw-semibold); }

/* Responsive breakpoints moved to responsive.css */