/* ============================================================
   DIGITAL AGENCY — PREMIUM EDITORIAL REDESIGN
   Aesthetic: Warm Cream + Ink Black + Signal Orange + Gold
   Fonts: Cormorant Garamond (display) + Manrope (UI)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Manrope', system-ui, sans-serif; background: #FEFDFB; color: #0B0A09; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { border: none; cursor: pointer; font-family: inherit; }

/* ── VARIABLES ── */
:root {
  --ink:           #0B0A09;
  --ink-mid:       #1E1C1A;
  --ink-soft:      #2E2B28;
  --cream:         #F8F4EE;
  --warm-white:    #FEFDFB;
  --orange:        #E84A1A;
  --orange-dark:   #C03B12;
  --orange-glow:   rgba(232,74,26,0.10);
  --gold:          #C9923A;
  --slate:         #4A4740;
  --muted:         #9A948C;
  --border:        #E8E2D9;
  --green:         #22A35A;
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-ui:       'Manrope', system-ui, sans-serif;
  --radius-sm:     6px;
  --radius:        12px;
  --radius-lg:     20px;
  --radius-xl:     32px;
  --shadow-sm:     0 2px 10px rgba(11,10,9,0.06);
  --shadow-md:     0 8px 32px rgba(11,10,9,0.10);
  --shadow-lg:     0 20px 60px rgba(11,10,9,0.14);
  --shadow-orange: 0 8px 28px rgba(232,74,26,0.28);
  --ease:          cubic-bezier(0.4,0,0.2,1);
  --ease-spring:   cubic-bezier(0.34,1.56,0.64,1);
  --transition:    all 0.30s var(--ease);
}

/* ── SCROLL PROGRESS ── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--orange), var(--gold));
  transform-origin: left; transform: scaleX(0);
  z-index: 10000; transition: transform 0.08s linear;
}

/* ── REVEAL ANIMATIONS ── */
.reveal       { opacity:0; transform:translateY(32px); transition:opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.reveal-left  { opacity:0; transform:translateX(-32px); transition:opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.reveal-right { opacity:0; transform:translateX(32px);  transition:opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity:1; transform:none; }

/* ── LAYOUT ── */
.section-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* ── TYPOGRAPHY ── */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--orange); margin-bottom: 14px;
}
.section-eyebrow::before { content:''; width:24px; height:2px; background:var(--orange); border-radius:2px; }
.section-headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700; color: var(--ink); line-height: 1.05;
  letter-spacing: -0.5px; margin-bottom: 16px;
}
.section-headline em { color: var(--orange); font-style: italic; }
.section-sub { font-size: 15px; color: var(--muted); line-height: 1.8; max-width: 560px; }
.section-center { text-align: center; }
.section-center .section-sub { margin: 0 auto; }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; background: var(--orange); color: #fff;
  font-size: 13px; font-weight: 700; border-radius: var(--radius-sm);
  transition: var(--transition); box-shadow: var(--shadow-orange);
}
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 14px 42px rgba(232,74,26,0.38); color:#fff; }
.btn-outline-dark {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border: 1.5px solid var(--ink); color: var(--ink);
  font-size: 13px; font-weight: 700; border-radius: var(--radius-sm); transition: var(--transition);
}
.btn-outline-dark:hover { background: var(--ink); color: #fff; }
.btn-ghost-light {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border: 1.5px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600;
  border-radius: var(--radius-sm); transition: var(--transition);
}
.btn-ghost-light:hover { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.08); color:#fff; }
.btn-white {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; background: #fff; color: var(--ink);
  font-size: 13px; font-weight: 700; border-radius: var(--radius-sm); transition: var(--transition);
}
.btn-white:hover { background: var(--cream); }
.btn-outline-light {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border: 1.5px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.82); font-size: 13px; font-weight: 600;
  border-radius: var(--radius-sm); transition: var(--transition);
}
.btn-outline-light:hover { border-color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.07); color:#fff; }
.btn-full { width: 100%; justify-content: center; }

/* ============================================================
   HERO
   ============================================================ */
.hero-v2 {
  position: relative; overflow: hidden;
  background: var(--ink); min-height: 100vh;
  display: flex; align-items: center;
}
.hero-v2::after {
  content: ''; position: absolute; bottom: -200px; right: -100px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(232,74,26,0.15) 0%, transparent 65%);
  pointer-events: none; z-index: 1;
}
.hv2-bg-media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.hv2-bg-media::after { content:''; position:absolute; inset:0; background:rgba(11,10,9,0.72); }
.hv2-bg-clip { position: absolute; inset: -8%; overflow: hidden; z-index: 0; }
.hv2-bg-video { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); min-width:100%; min-height:100%; object-fit:cover; pointer-events:none; }
.hv2-bg-iframe { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100vw; height:calc(56.25vw + 120px); min-height:100%; min-width:calc(177.78vh + 120px); pointer-events:none; border:0; }
.hv2-overlay { position:absolute; inset:0; background:rgba(11,10,9,0.60); z-index:1; }
.hv2-carousel { position:absolute; inset:0; z-index:0; }
.hv2-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease-in-out; }
.hv2-slide.active { opacity:1; }
.hv2-carousel-overlay { position:absolute; inset:0; background:rgba(11,10,9,0.65); z-index:1; }

.hv2-inner {
  position: relative; z-index: 3;
  max-width: 1280px; margin: 0 auto; padding: 160px 40px 100px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px;
  align-items: center; width: 100%;
}
.hv2-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(232,74,26,0.14); border: 1px solid rgba(232,74,26,0.28);
  color: #ff8a72; font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 7px 16px; border-radius: 99px; margin-bottom: 32px;
}
.hv2-pulse { width:7px; height:7px; background:var(--orange); border-radius:50%; animation:hv2pulse 2s infinite; flex-shrink:0; }
@keyframes hv2pulse { 0%,100%{box-shadow:0 0 0 0 rgba(232,74,26,0.5)} 50%{box-shadow:0 0 0 8px rgba(232,74,26,0)} }
.hv2-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.5vw, 5.2rem);
  font-weight: 700; color: #fff; line-height: 1.0;
  letter-spacing: -1px; margin-bottom: 24px;
}
.hv2-title em { color: var(--orange); font-style: italic; }
.hv2-desc { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.85; margin-bottom: 40px; max-width: 480px; }
.hv2-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 52px; }
.hv2-trust { display: flex; align-items: center; gap: 14px; }
.hv2-avatars { display: flex; }
.hv2-avatars span {
  width:38px; height:38px; border-radius:50%; background:var(--orange);
  color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  border:2.5px solid var(--ink-mid); margin-left:-10px;
}
.hv2-avatars span:first-child { margin-left:0; }
.hv2-avatars span:nth-child(2) { background:#2563eb; }
.hv2-avatars span:nth-child(3) { background:#7c3aed; }
.hv2-avatars span:nth-child(4) { background:var(--ink-soft); color:rgba(255,255,255,0.5); }
.hv2-trust p { font-size:12px; color:rgba(255,255,255,0.45); line-height:1.5; }

.hv2-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-xl); padding: 36px; backdrop-filter: blur(16px);
  animation: hv2float 7s ease-in-out infinite;
}
@keyframes hv2float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.hv2-card-label { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-bottom:24px; display:flex; align-items:center; gap:8px; }
.hv2-card-label::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); flex-shrink:0; }
.hv2-stats-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:24px; }
.hv2-stat { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius); padding:18px; }
.hv2-stat-n { font-family:var(--font-display); font-size:2.4rem; font-weight:700; color:#fff; letter-spacing:-1.5px; line-height:1; margin-bottom:4px; }
.hv2-stat-l { font-size:11px; color:rgba(255,255,255,0.4); margin-bottom:8px; }
.hv2-stat-up { font-size:11px; font-weight:700; color:var(--green); }
.hv2-prog-list { display:flex; flex-direction:column; gap:14px; }
.hv2-prog-header { display:flex; justify-content:space-between; margin-bottom:6px; font-size:11px; color:rgba(255,255,255,0.55); font-weight:500; }
.hv2-prog-val { color:#fff; font-weight:700; }
.hv2-prog-track { height:4px; background:rgba(255,255,255,0.08); border-radius:99px; overflow:hidden; }
.hv2-prog-fill { height:100%; width:0; background:linear-gradient(90deg,var(--orange),var(--gold)); border-radius:99px; transition:width 1.8s var(--ease-spring); }

/* ============================================================
   CLIENTS STRIP
   ============================================================ */
.clients-strip {
  background: var(--cream);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 26px 0; overflow: hidden;
}
.clients-label { text-align:center; font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.marquee-wrap {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display:flex; align-items:center; white-space:nowrap; animation:marquee 32s linear infinite; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.client-name { font-size:12.5px; font-weight:700; color:var(--slate); padding:0 32px; letter-spacing:0.5px; }
.client-sep { width:5px; height:5px; border-radius:50%; background:var(--orange); opacity:0.35; flex-shrink:0; }

/* ============================================================
   CATEGORIES FEATURED SECTION
   ============================================================ */
.featured-hot-v2 {
  padding: 64px 0;
  background: var(--warm-white);
  border-bottom: 1px solid var(--border);
}
.fh-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: flex-start;
}

/* Section Header */
.cat-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.cat-section-header .section-headline { margin-bottom: 0; }

/* Featured Big Card */
.fh-featured-card {
  display: block; text-decoration: none; color: inherit;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--cream);
  transition: var(--transition); margin-bottom: 20px;
}
.fh-featured-card:hover { border-color:transparent; box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.fh-featured-img { position:relative; width:100%; height:300px; overflow:hidden; background:var(--cream); }
.fh-featured-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.55s var(--ease); }
.fh-featured-card:hover .fh-featured-img img { transform:scale(1.05); }
.fh-featured-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, transparent 40%, rgba(11,10,9,0.6) 100%); }
.fh-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--cream),var(--border)); }
.fh-cat-badge { position:absolute; top:16px; left:16px; z-index:2; background:var(--orange); color:#fff; font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:4px 12px; border-radius:99px; }
.fh-featured-body { padding:24px 26px 28px; }
.fh-featured-body h3 { font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--ink); line-height:1.2; letter-spacing:-0.3px; margin-bottom:10px; }
.fh-featured-body p { font-size:13.5px; color:var(--muted); line-height:1.75; margin-bottom:14px; }
.fh-read-link { font-size:12px; font-weight:700; color:var(--orange); display:inline-flex; align-items:center; gap:4px; transition:gap 0.2s; }
.fh-featured-card:hover .fh-read-link,
.fh-small-card:hover .fh-read-link { gap:9px; }

/* Small Cards Row */
.fh-small-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fh-small-card {
  display:flex; gap:14px; text-decoration:none; color:inherit;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); background:var(--cream);
  padding:14px; transition:var(--transition); align-items:flex-start;
}
.fh-small-card:hover { border-color:transparent; box-shadow:var(--shadow-md); transform:translateY(-3px); }
.fh-small-img { width:80px; min-width:80px; height:70px; border-radius:var(--radius-sm); overflow:hidden; background:var(--border); }
.fh-small-img img { width:100%; height:100%; object-fit:cover; }
.fh-small-body { flex:1; }
.fh-cat-tag { display:inline-block; font-size:9px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--orange); background:var(--orange-glow); border:1px solid rgba(232,74,26,0.15); padding:2px 8px; border-radius:99px; margin-bottom:6px; }
.fh-small-body h4 { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--ink); line-height:1.3; margin-bottom:6px; letter-spacing:-0.2px; }
.fh-small-desc { font-size:12px; color:var(--muted); line-height:1.6; margin-bottom:6px; }

/* ── Categories Sidebar ── */
.fh-sidebar {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.cat-sidebar {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 140px);
}
.fh-sidebar-header {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 22px;
  background: var(--ink);
  font-size: 11px; font-weight: 800; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--orange);
  flex-shrink: 0;
}

/* Scrollable list */
.cat-sidebar-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--orange) var(--border);
  padding: 4px 0 !important;
  max-height: 380px;
  list-style: none;
  margin: 0;
}
.cat-sidebar-list::-webkit-scrollbar { width: 4px; }
.cat-sidebar-list::-webkit-scrollbar-track { background: var(--border); }
.cat-sidebar-list::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 99px; }

.cat-sidebar-item {
  border-bottom: 1px solid var(--border);
  animation: fadeSlideIn 0.4s var(--ease) both;
}
.cat-sidebar-item:last-child { border-bottom: none; }

.cat-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  text-decoration: none;
  transition: all 0.2s var(--ease);
  color: var(--slate);
}
.cat-sidebar-link:hover {
  background: var(--warm-white);
  color: var(--orange);
  padding-left: 24px;
}

.cat-sidebar-num {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  opacity: 0.55;
  flex-shrink: 0;
  min-width: 22px;
  transition: opacity 0.2s;
}
.cat-sidebar-link:hover .cat-sidebar-num { opacity: 1; }

.cat-sidebar-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  flex: 1;
}

.cat-sidebar-arrow {
  font-size: 18px;
  color: var(--orange);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  flex-shrink: 0;
  line-height: 1;
}
.cat-sidebar-link:hover .cat-sidebar-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* Scroll hint */
.cat-sidebar-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.3px;
  border-top: 1px solid var(--border);
  background: var(--cream);
  flex-shrink: 0;
  animation: bounceDown 2s ease-in-out infinite;
}
@keyframes bounceDown {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50%       { opacity: 1;   transform: translateY(2px); }
}

.fh-view-all-btn {
  display:block; text-align:center; padding:14px 22px;
  background:var(--ink); color:var(--orange);
  font-size:11.5px; font-weight:700; letter-spacing:0.5px;
  text-decoration:none; transition:var(--transition);
  border-top:1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.fh-view-all-btn:hover { background:var(--orange); color:#fff; }

/* Animation */
@keyframes fadeSlideIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:none} }

/* View All link */
.view-all-v2 { font-size:12.5px; font-weight:700; color:var(--orange); display:inline-flex; align-items:center; gap:6px; transition:gap 0.2s; white-space:nowrap; }
.view-all-v2:hover { gap:10px; }

/* ============================================================
   SERVICES
   ============================================================ */
.services-v2 { padding: 110px 0; background: var(--warm-white); }
.svc-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:60px; flex-wrap:wrap; gap:24px; }
.svc-header .section-sub { max-width:420px; }
.svc-grid-v2 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.svc-card-v2 { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; position:relative; background:#fff; transition:var(--transition); cursor:pointer; }
.svc-card-v2:hover { border-color:transparent; box-shadow:var(--shadow-lg); transform:translateY(-7px); }
.svc-card-v2-img { width:100%; height:175px; overflow:hidden; position:relative; }
.svc-card-v2-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 40%, rgba(11,10,9,0.5) 100%); }
.svc-card-v2-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.55s var(--ease); }
.svc-card-v2:hover .svc-card-v2-img img { transform:scale(1.07); }
.svc-card-v2-num { position:absolute; bottom:14px; left:18px; z-index:2; font-family:var(--font-display); font-size:13px; font-weight:600; color:rgba(255,255,255,0.65); letter-spacing:1px; }
.svc-card-v2-body { padding:22px 22px 26px; }
.svc-card-v2-body h3 { font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--ink); margin-bottom:8px; line-height:1.25; letter-spacing:-0.3px; }
.svc-card-v2-body p { font-size:13px; color:var(--muted); line-height:1.75; margin-bottom:18px; }
.svc-link-v2 { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--orange); transition:gap 0.2s; }
.svc-link-v2:hover { gap:10px; }
.svc-no-img { display:flex; flex-direction:column; border-left:3px solid var(--orange); }
.svc-no-img-num { font-family:var(--font-display); font-size:2.2rem; font-weight:700; color:var(--border); letter-spacing:-2px; line-height:1; display:block; margin-bottom:12px; }
.svc-no-img .svc-card-v2-body { display:flex; flex-direction:column; flex:1; padding:26px 22px; }
.svc-no-img .svc-card-v2-body p { flex:1; }
.svc-view-all-wrap { text-align:center; margin-top:48px; }

/* ============================================================
   WHY US
   ============================================================ */
.why-us-v2 { background:var(--ink-mid); padding:110px 0; position:relative; overflow:hidden; }
.why-us-v2::before { content:''; position:absolute; top:-150px; left:-150px; width:550px; height:550px; background:radial-gradient(circle,rgba(232,74,26,0.10) 0%,transparent 65%); pointer-events:none; }
.why-us-v2::after { content:''; position:absolute; bottom:-100px; right:-100px; width:400px; height:400px; background:radial-gradient(circle,rgba(201,146,58,0.08) 0%,transparent 65%); pointer-events:none; }
.why-grid-v2 { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; position:relative; z-index:2; }
.why-visual-v2 { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-xl); padding:48px; }
.why-big { font-family:var(--font-display); font-size:clamp(4.5rem,8vw,7rem); font-weight:700; color:var(--orange); letter-spacing:-4px; line-height:1; margin-bottom:6px; }
.why-big-sub { font-size:13px; color:rgba(255,255,255,0.45); margin-bottom:32px; font-weight:500; }
.why-divider { height:1px; background:rgba(255,255,255,0.07); margin-bottom:32px; }
.why-stats-v2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.why-stat-v2 .n { font-family:var(--font-display); font-size:2.2rem; font-weight:700; color:#fff; letter-spacing:-1px; line-height:1; margin-bottom:5px; }
.why-stat-v2 .l { font-size:11.5px; color:rgba(255,255,255,0.4); font-weight:500; }
.why-content-v2 h2 { font-family:var(--font-display); font-size:clamp(2rem,3.5vw,3rem); font-weight:700; color:#fff; line-height:1.08; letter-spacing:-0.5px; margin-bottom:18px; }
.why-content-v2 h2 em { color:var(--orange); font-style:italic; }
.why-content-v2 > p { font-size:14.5px; color:rgba(255,255,255,0.55); line-height:1.85; margin-bottom:28px; }
.why-list-v2 { margin-bottom:36px; display:flex; flex-direction:column; gap:11px; }
.why-list-v2 li { display:flex; align-items:flex-start; gap:12px; font-size:14px; color:rgba(255,255,255,0.65); line-height:1.55; }
.why-check { width:22px; height:22px; border-radius:50%; background:rgba(34,163,90,0.15); border:1px solid rgba(34,163,90,0.3); color:var(--green); font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }

/* ============================================================
   CONTENT MARKETING
   ============================================================ */
.features-v2 { padding:110px 0; background:var(--cream); }
.features-grid-v2 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:60px; }
.feat-card-v2 { background:var(--warm-white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); }
.feat-card-v2:hover { border-color:transparent; box-shadow:var(--shadow-lg); transform:translateY(-6px); }
.feat-img-v2 { width:100%; height:158px; overflow:hidden; }
.feat-img-v2 img { width:100%; height:100%; object-fit:cover; transition:transform 0.55s var(--ease); }
.feat-card-v2:hover .feat-img-v2 img { transform:scale(1.07); }
.feat-body-v2 { padding:24px; }
.feat-icon-v2 { width:44px; height:44px; border-radius:var(--radius-sm); background:var(--orange-glow); border:1px solid rgba(232,74,26,0.15); display:flex; align-items:center; justify-content:center; color:var(--orange); margin-bottom:16px; }
.feat-card-v2 h3 { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--ink); margin-bottom:8px; letter-spacing:-0.3px; }
.feat-card-v2 p { font-size:13px; color:var(--muted); line-height:1.75; }

/* ============================================================
   SEO STRATEGY
   ============================================================ */
.seo-v2 { padding:110px 0; background:var(--warm-white); }
.seo-grid-v2 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:60px; }
.seo-card-v2 { padding:30px 26px; background:var(--cream); border:1px solid var(--border); border-radius:var(--radius-lg); transition:var(--transition); position:relative; overflow:hidden; }
.seo-card-v2::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--orange),var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform 0.35s var(--ease); }
.seo-card-v2:hover { background:#fff; border-color:transparent; box-shadow:var(--shadow-md); transform:translateY(-5px); }
.seo-card-v2:hover::after { transform:scaleX(1); }
.seo-num-v2 { font-family:var(--font-display); font-size:3.8rem; font-weight:700; color:var(--border); letter-spacing:-3px; line-height:1; margin-bottom:18px; }
.seo-card-v2 h4 { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--ink); margin-bottom:10px; letter-spacing:-0.3px; }
.seo-card-v2 p { font-size:13px; color:var(--muted); line-height:1.7; }

/* ============================================================
   INDUSTRIES
   ============================================================ */
.industries-v2 { padding:110px 0; background:var(--ink); }
.industries-v2 .section-headline { color:#fff; }
.industries-v2 .section-sub { color:rgba(255,255,255,0.45); }
.industry-cloud { display:flex; flex-wrap:wrap; gap:12px; margin-top:50px; }
.ind-pill { padding:11px 22px; border-radius:99px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); font-size:13px; font-weight:600; color:rgba(255,255,255,0.60); transition:var(--transition); cursor:default; }
.ind-pill:hover { background:rgba(232,74,26,0.15); border-color:rgba(232,74,26,0.35); color:#fff; transform:translateY(-3px); }

/* ============================================================
   PROCESS
   ============================================================ */
.process-v2 { padding:110px 0; background:var(--cream); }
.process-grid-v2 { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:60px; position:relative; }
.process-grid-v2::before { content:''; position:absolute; top:40px; left:calc(50%/4); right:calc(50%/4); height:1px; background:linear-gradient(90deg,var(--orange),var(--gold),var(--orange)); opacity:0.25; pointer-events:none; z-index:0; }
.proc-card-v2 { text-align:center; padding:32px 24px 36px; position:relative; z-index:1; background:transparent; transition:var(--transition); }
.proc-card-v2:hover { transform:translateY(-6px); }
.proc-circle { width:58px; height:58px; border-radius:50%; background:var(--ink); color:#fff; font-family:var(--font-display); font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 22px; transition:var(--transition); box-shadow:0 4px 16px rgba(11,10,9,0.2); }
.proc-card-v2:hover .proc-circle { background:var(--orange); box-shadow:var(--shadow-orange); }
.proc-card-v2 h4 { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.proc-card-v2 p { font-size:13px; color:var(--muted); line-height:1.75; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-v2 { padding:110px 0; background:var(--warm-white); }
.testi-grid-v2 { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:20px; margin-top:56px; }
.testi-card-v2 { background:var(--cream); border:1px solid var(--border); border-radius:var(--radius-xl); padding:34px; transition:var(--transition); }
.testi-card-v2.featured { background:var(--ink-mid); border-color:transparent; }
.testi-card-v2:hover { border-color:transparent; box-shadow:var(--shadow-lg); transform:translateY(-5px); }
.testi-stars { color:var(--gold); font-size:14px; letter-spacing:3px; margin-bottom:18px; }
.testi-quote { font-family:var(--font-display); font-size:15.5px; font-style:italic; color:var(--slate); line-height:1.85; margin-bottom:26px; }
.testi-card-v2.featured .testi-quote { color:rgba(255,255,255,0.72); }
.testi-author-v2 { display:flex; align-items:center; gap:12px; }
.testi-avatar { width:42px; height:42px; border-radius:50%; background:var(--orange); color:#fff; font-size:12px; font-weight:800; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.testi-avatar.b { background:#2563eb; }
.testi-avatar.c { background:#7c3aed; }
.testi-avatar.d { background:var(--gold); }
.testi-avatar.e { background:#0ea5e9; }
.testi-name { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:2px; }
.testi-card-v2.featured .testi-name { color:#fff; }
.testi-role { font-size:11.5px; color:var(--muted); }
.testi-card-v2.featured .testi-role { color:rgba(255,255,255,0.38); }

/* ============================================================
   CONSULTATION
   ============================================================ */
.consult-v2 { padding:110px 0; background:var(--cream); }
.consult-grid-v2 { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.consult-left-v2 h2 { font-family:var(--font-display); font-size:clamp(2rem,3.5vw,3rem); font-weight:700; color:var(--ink); line-height:1.08; letter-spacing:-0.5px; margin-bottom:16px; }
.consult-left-v2 h2 em { color:var(--orange); font-style:italic; }
.consult-left-v2 > p { font-size:14.5px; color:var(--muted); line-height:1.8; margin-bottom:26px; }
.consult-perks-v2 { display:flex; flex-direction:column; gap:11px; margin-bottom:34px; }
.consult-perks-v2 li { display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--slate); }
.consult-phone-v2 { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--ink); letter-spacing:-0.5px; transition:color 0.2s; }
.consult-phone-v2:hover { color:var(--orange); }
.consult-phone-v2 svg { color:var(--orange); }
.consult-phone-hint { font-size:12px; color:var(--muted); margin-top:6px; }
.consult-form-card-v2 { background:#fff; border:1px solid var(--border); border-radius:var(--radius-xl); padding:38px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.consult-form-card-v2::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--orange),var(--gold)); }
.form-group-v2 { margin-bottom:18px; }
.form-group-v2 label { display:block; font-size:11px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:var(--slate); margin-bottom:7px; }
.form-group-v2 input,
.form-group-v2 select,
.form-group-v2 textarea { width:100%; padding:11px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:13.5px; color:var(--ink); font-family:var(--font-ui); background:var(--cream); transition:border-color 0.2s,background 0.2s; outline:none; -webkit-appearance:none; }
.form-group-v2 input:focus,
.form-group-v2 select:focus,
.form-group-v2 textarea:focus { border-color:var(--orange); background:#fff; }
.form-group-v2 textarea { resize:vertical; min-height:92px; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-v2 { background:var(--ink-mid); padding:100px 0; text-align:center; position:relative; overflow:hidden; }
.cta-v2::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:900px; height:600px; background:radial-gradient(ellipse,rgba(232,74,26,0.12) 0%,transparent 65%); pointer-events:none; }
.cta-inner-v2 { max-width:700px; margin:0 auto; padding:0 40px; position:relative; z-index:2; }
.cta-inner-v2 h2 { font-family:var(--font-display); font-size:clamp(2.4rem,5vw,4rem); font-weight:700; color:#fff; line-height:1.05; letter-spacing:-0.5px; margin-bottom:18px; }
.cta-inner-v2 h2 em { color:var(--orange); font-style:italic; }
.cta-inner-v2 p { font-size:15px; color:rgba(255,255,255,0.5); margin-bottom:14px; }
.cta-phone-v2 { font-family:var(--font-display); font-size:2.8rem; font-weight:700; color:var(--orange); letter-spacing:-1px; margin-bottom:38px; display:block; }
.cta-btns-v2 { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-v2 { padding:110px 0; background:var(--warm-white); }
.blog-header-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:52px; flex-wrap:wrap; gap:20px; }
.blog-grid-v2 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.blog-card-v2 { background:var(--cream); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); }
.blog-card-v2:hover { border-color:transparent; box-shadow:var(--shadow-lg); transform:translateY(-6px); }
.blog-img-v2 { width:100%; height:178px; overflow:hidden; }
.blog-img-v2 img { width:100%; height:100%; object-fit:cover; transition:transform 0.55s var(--ease); }
.blog-card-v2:hover .blog-img-v2 img { transform:scale(1.08); }
.blog-cat-v2 { display:inline-flex; margin:18px 20px 10px; font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); background:var(--orange-glow); border:1px solid rgba(232,74,26,0.15); padding:4px 10px; border-radius:99px; }
.blog-card-v2 h3 { padding:0 20px; font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--ink); margin-bottom:8px; line-height:1.3; letter-spacing:-0.2px; }
.blog-card-v2 p { padding:0 20px; font-size:12.5px; color:var(--muted); line-height:1.7; }
.blog-link-v2 { display:inline-flex; margin:14px 20px 22px; font-size:12px; font-weight:700; color:var(--orange); align-items:center; gap:5px; transition:gap 0.2s; }
.blog-link-v2:hover { gap:9px; }

/* ============================================================
   TEAM
   ============================================================ */
.team-v2 { padding:110px 0; background:var(--cream); }
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px; }
.team-card { background:var(--warm-white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; text-align:center; transition:var(--transition); padding-bottom:24px; }
.team-card:hover { border-color:transparent; box-shadow:var(--shadow-lg); transform:translateY(-6px); }
.team-photo-wrap { position:relative; width:100%; height:210px; background:var(--cream); overflow:hidden; }
.team-photo { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform 0.55s var(--ease); }
.team-card:hover .team-photo { transform:scale(1.05); }
.team-initials { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:3rem; font-weight:700; color:var(--orange); background:var(--orange-glow); }
.team-linkedin { position:absolute; bottom:12px; right:12px; width:32px; height:32px; border-radius:50%; background:#0A66C2; color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.25s; box-shadow:var(--shadow-sm); }
.team-card:hover .team-linkedin { opacity:1; }
.team-info { padding:18px 16px 0; }
.team-name { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--ink); margin-bottom:4px; letter-spacing:-0.2px; }
.team-role { font-size:11.5px; color:var(--muted); font-weight:500; }

/* ============================================================
   PROMO VIDEO
   ============================================================ */
.promo-video-v2 { padding:110px 0; background:var(--ink); position:relative; overflow:hidden; }
.promo-video-v2::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:800px; height:600px; background:radial-gradient(ellipse,rgba(232,74,26,0.10) 0%,transparent 65%); pointer-events:none; }
.promo-video-v2 .section-headline { color:#fff; }
.promo-video-v2 .section-sub { color:rgba(255,255,255,0.45); margin:0 auto; }
.promo-video-v2 .section-eyebrow { color:var(--orange); justify-content:center; }
.promo-video-v2 .section-eyebrow::before { background:var(--orange); }
.promo-video-frame { border-radius:var(--radius-xl); overflow:hidden; box-shadow:0 32px 80px rgba(0,0,0,0.55); position:relative; max-width:900px; margin:0 auto; }
.pv-thumbnail { width:100%; aspect-ratio:16/9; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; }
.pv-thumbnail::before { content:''; position:absolute; inset:0; background:rgba(11,10,9,0.35); }
.pv-play-btn { width:82px; height:82px; border-radius:50%; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; position:relative; z-index:2; transition:var(--transition); box-shadow:var(--shadow-orange),0 0 0 16px rgba(232,74,26,0.15); }
.pv-play-btn:hover { transform:scale(1.12); background:var(--orange-dark); }
.pv-iframe-wrap { width:100%; aspect-ratio:16/9; position:relative; }
.pv-iframe-wrap iframe { width:100%; height:100%; border:0; display:block; }
.pv-native-video { width:100%; height:100%; display:block; }

/* ============================================================
   WHATSAPP BUTTON
   ============================================================ */
.wa-float { position:fixed; bottom:28px; right:28px; z-index:9999; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 28px rgba(37,211,102,0.45); transition:var(--transition); text-decoration:none; }
.wa-float:hover { transform:scale(1.12); background:#20ba5a; color:#fff; }
.wa-tooltip { position:absolute; right:70px; top:50%; transform:translateY(-50%); background:var(--ink); color:#fff; font-size:12px; font-weight:600; white-space:nowrap; padding:7px 14px; border-radius:var(--radius-sm); opacity:0; pointer-events:none; transition:opacity 0.2s; box-shadow:var(--shadow-md); }
.wa-tooltip::after { content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left-color:var(--ink); border-right:0; }
.wa-float:hover .wa-tooltip { opacity:1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .fh-layout           { grid-template-columns: 1fr 260px; gap:24px; }
  .svc-grid-v2         { grid-template-columns: repeat(3,1fr); }
  .seo-grid-v2         { grid-template-columns: repeat(2,1fr); }
  .blog-grid-v2        { grid-template-columns: repeat(3,1fr); }
  .team-grid           { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 1024px) {
  .hv2-inner           { grid-template-columns:1fr; gap:50px; padding-top:120px; padding-bottom:70px; }
  .hv2-card            { display:none; }
  .fh-layout           { grid-template-columns:1fr; }
  .cat-sidebar         { position:static; max-height:none; }
  .cat-sidebar-list    { max-height:none; overflow-y:visible; display:grid; grid-template-columns:1fr 1fr; }
  .cat-sidebar-scroll-hint { display:none; }
  .cat-section-header  { flex-direction:column; align-items:flex-start; }
  .svc-header          { flex-direction:column; align-items:flex-start; }
  .svc-grid-v2         { grid-template-columns:repeat(2,1fr); }
  .why-grid-v2         { grid-template-columns:1fr; gap:50px; }
  .testi-grid-v2       { grid-template-columns:1fr; }
  .consult-grid-v2     { grid-template-columns:1fr; gap:50px; }
  .features-grid-v2    { grid-template-columns:repeat(2,1fr); }
  .process-grid-v2     { grid-template-columns:repeat(2,1fr); }
  .process-grid-v2::before { display:none; }
  .blog-grid-v2        { grid-template-columns:repeat(2,1fr); }
  .team-grid           { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 768px) {
  .section-wrap        { padding:0 20px; }
  .featured-hot-v2     { padding:40px 0; }
  .fh-small-row        { grid-template-columns:1fr; }
  .cat-sidebar-list    { grid-template-columns:1fr; }
  .fh-featured-img     { height:220px; }
  .svc-grid-v2         { grid-template-columns:1fr; }
  .features-grid-v2    { grid-template-columns:1fr; }
  .seo-grid-v2         { grid-template-columns:1fr; }
  .process-grid-v2     { grid-template-columns:1fr 1fr; }
  .blog-grid-v2        { grid-template-columns:1fr; }
  .hv2-inner           { padding:100px 20px 60px; }
  .why-visual-v2       { padding:30px; }
  .team-grid           { grid-template-columns:repeat(2,1fr); gap:16px; }
  .promo-video-frame   { border-radius:var(--radius-lg); }
  .cat-section-header  { margin-bottom:16px; }
}

@media (max-width: 480px) {
  .hv2-title           { letter-spacing:-0.5px; }
  .hv2-actions         { flex-direction:column; }
  .process-grid-v2     { grid-template-columns:1fr; }
  .cta-phone-v2        { font-size:2rem; }
  .cta-btns-v2         { flex-direction:column; align-items:center; }
  .why-stats-v2        { grid-template-columns:1fr 1fr; }
  .consult-form-card-v2 { padding:24px 18px; }
  .team-grid           { grid-template-columns:1fr 1fr; }
  .wa-float            { bottom:18px; right:18px; width:50px; height:50px; }
  .fh-featured-img     { height:180px; }
}
