/* ============================================================
   DEINRIM SOLUTIONSS — Complete Stylesheet v3
   Light body · Dark hero/footer · Orange-Red brand
   All variables self-contained, no inheritance issues
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ══ ROOT VARIABLES ══════════════════════════════════════════ */
:root {
  /* Brand */
  --orange:   #e84118;
  --orange-d: #c0351a;
  --orange-l: #ff5c35;
  --gold:     #f0a500;
  --gold-d:   #d49000;

  /* Dark sections (hero, footer, cta) */
  --dark-bg:  #0d0d1a;
  --dark-2:   #111120;
  --dark-3:   #181828;
  --dark-4:   #1e1e30;
  --dark-5:   #252540;

  /* Light sections (body content) */
  --white:    #ffffff;
  --bg:       #ffffff;
  --bg-2:     #f7f7fb;
  --bg-3:     #efeff7;
  --bg-4:     #e8e8f2;

  /* Borders */
  --border:   #e2e2ee;
  --border-2: #d0d0e4;
  --border-3: #c0c0d8;

  /* Text on LIGHT backgrounds */
  --t-head:   #0d0d1a;
  --t-body:   #2c2c4a;
  --t-mid:    #5a5a7a;
  --t-dim:    #8888aa;
  --t-light:  #b0b0c8;

  /* Text on DARK backgrounds */
  --dt-head:  #ffffff;
  --dt-body:  rgba(255,255,255,0.75);
  --dt-mid:   rgba(255,255,255,0.50);
  --dt-dim:   rgba(255,255,255,0.30);

  /* Typography */
  --font-h:   'Bebas Neue', Impact, sans-serif;
  --font-b:   'Outfit', 'Segoe UI', sans-serif;

  /* Effects */
  --r:        8px;
  --r-lg:     16px;
  --r-xl:     24px;
  --shadow-s: 0 2px 10px rgba(13,13,26,0.06);
  --shadow:   0 4px 20px rgba(13,13,26,0.10);
  --shadow-l: 0 8px 40px rgba(13,13,26,0.14);
  --shadow-o: 0 4px 20px rgba(232,65,24,0.25);
  --tr:       all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ══ RESET ═══════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-b); background:var(--bg); color:var(--t-body); line-height:1.6; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:var(--orange); text-decoration:none; transition:var(--tr); }
a:hover { color:var(--orange-d); }
ul { list-style:none; }
button { cursor:pointer; font-family:var(--font-b); }

/* ══ TYPOGRAPHY ══════════════════════════════════════════════ */
h1,h2,h3,h4,h5 { font-family:var(--font-h); line-height:1.1; letter-spacing:1px; color:var(--t-head); }
h1 { font-size:clamp(2.6rem,6vw,5.5rem); }
h2 { font-size:clamp(1.8rem,3.5vw,3rem); }
h3 { font-size:clamp(1.2rem,2vw,1.7rem); }
h4 { font-size:1.15rem; }
p  { font-size:0.95rem; color:var(--t-mid); line-height:1.78; }

/* ══ LAYOUT ═══════════════════════════════════════════════════ */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.section    { padding:88px 0; }
.section-sm { padding:56px 0; }

/* Section backgrounds */
.section-white   { background:var(--white); }
.section-light   { background:var(--bg-2); }
.section-lighter { background:var(--bg-3); }
.section-dark    { background:var(--dark-bg); }
.section-dark-2  { background:var(--dark-2); }

/* ══ LABELS & ACCENTS ════════════════════════════════════════ */
.section-tag {
  display:inline-block; font-family:var(--font-b); font-size:0.7rem;
  font-weight:700; text-transform:uppercase; letter-spacing:3px;
  color:var(--orange); background:rgba(232,65,24,0.08);
  border:1px solid rgba(232,65,24,0.2); padding:5px 16px;
  border-radius:50px; margin-bottom:12px;
}
.section-title  { margin-bottom:10px; }
.section-subtitle { max-width:600px; margin-bottom:44px; }
.section-header { text-align:center; }
.section-header .section-subtitle { margin-left:auto; margin-right:auto; }
.accent-line { width:48px; height:4px; background:linear-gradient(90deg,var(--orange),var(--gold)); border-radius:2px; margin:12px 0 26px; }
.section-header .accent-line { margin:12px auto 26px; }

/* ══ NAVBAR ═══════════════════════════════════════════════════ */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:0 24px;
  background:rgba(11,11,22,0.94);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.05);
  transition:var(--tr);
}
.navbar.scrolled { background:rgba(11,11,22,0.99); box-shadow:0 4px 28px rgba(0,0,0,0.35); border-bottom-color:rgba(232,65,24,0.18); }
.nav-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:68px; }
.nav-logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
/* Navbar: icon logo — wider format */
.nav-logo-img { height:52px; width:auto; display:block; object-fit:contain; }
/* Footer: full logo */
.footer-logo-img { height:60px; width:auto; filter:brightness(0) invert(1); }
@media(max-width:768px) { .nav-logo-img { height:40px; } .footer-logo-img { height:46px; } }
.nav-menu { display:flex; align-items:center; gap:2px; }
.nav-link { font-size:0.84rem; font-weight:500; color:rgba(255,255,255,0.68); padding:8px 12px; border-radius:6px; transition:var(--tr); }
.nav-link:hover,.nav-link.active { color:#fff; background:rgba(255,255,255,0.07); }
.nav-cta { background:linear-gradient(135deg,var(--orange),var(--orange-d)); color:white !important; padding:9px 18px !important; border-radius:50px; font-weight:700; box-shadow:0 4px 14px rgba(232,65,24,0.3); }
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(232,65,24,0.45); background:linear-gradient(135deg,var(--orange-l),var(--orange)) !important; }
.nav-toggle { display:none; flex-direction:column; gap:5px; padding:8px; cursor:pointer; }
.nav-toggle span { display:block; width:22px; height:2px; background:white; border-radius:2px; transition:var(--tr); }

/* ══ BUTTONS ══════════════════════════════════════════════════ */
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:50px; font-weight:700; font-size:0.9rem; transition:var(--tr); border:2px solid transparent; }
.btn-primary        { background:linear-gradient(135deg,var(--orange),var(--orange-d)); color:white; box-shadow:var(--shadow-o); }
.btn-primary:hover  { transform:translateY(-2px); box-shadow:0 8px 28px rgba(232,65,24,0.4); color:white; }
.btn-outline        { background:transparent; border-color:var(--border-2); color:var(--t-body); }
.btn-outline:hover  { border-color:var(--orange); color:var(--orange); background:rgba(232,65,24,0.04); }
.btn-dark           { background:var(--dark-bg); color:white; border-color:var(--dark-bg); }
.btn-dark:hover     { background:var(--dark-3); color:white; transform:translateY(-2px); }
.btn-gold           { background:linear-gradient(135deg,var(--gold),var(--gold-d)); color:var(--dark-bg); }
.btn-gold:hover     { transform:translateY(-2px); box-shadow:0 6px 22px rgba(240,165,0,0.35); color:var(--dark-bg); }
.btn-white          { background:white; color:var(--orange); border-color:white; }
.btn-white:hover    { background:rgba(255,255,255,0.92); color:var(--orange-d); }
.btn-outline-white  { background:transparent; border-color:rgba(255,255,255,0.35); color:white; }
.btn-outline-white:hover { border-color:white; background:rgba(255,255,255,0.08); color:white; }
.btn-sm  { padding:9px 20px; font-size:0.82rem; }
.btn-lg  { padding:15px 38px; font-size:0.98rem; }
.w-100   { width:100%; }

/* ══ HERO — PREMIUM SPLIT LAYOUT ════════════════════════════ */
.hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden; padding-top:68px;
  background:var(--dark-2);
}
/* Animated gradient background */
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 80% at 70% 40%, rgba(232,65,24,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 70%, rgba(240,165,0,0.06) 0%, transparent 50%),
    linear-gradient(135deg, #080812 0%, #0d0d1a 40%, #0f0f22 100%);
}
.hero-grid-bg {
  position:absolute; inset:0; opacity:0.035;
  background-image:linear-gradient(rgba(232,65,24,1) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(232,65,24,1) 1px, transparent 1px);
  background-size:60px 60px;
}
.hero-inner {
  position:relative; z-index:1; width:100%;
  display:grid; grid-template-columns:1.1fr 0.9fr;
  gap:52px; align-items:center; justify-items:center;
}
.hero-left {}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:0.7rem; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--orange); margin-bottom:24px;
  background:rgba(232,65,24,0.08); border:1px solid rgba(232,65,24,0.2);
  padding:7px 16px; border-radius:50px;
}
.hero-eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--orange); animation:blink 1.5s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.hero h1 { color:#ffffff; margin-bottom:6px; }
.hero h1 em { font-style:normal; color:var(--orange); }
.hero-tagline { font-family:var(--font-h); font-size:clamp(0.9rem,1.8vw,1.3rem); color:rgba(255,255,255,0.38); letter-spacing:4px; margin-bottom:20px; }
.hero-desc { font-size:1rem; max-width:520px; margin-bottom:36px; color:rgba(255,255,255,0.58); line-height:1.8; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:48px; }
.hero-stats-bar {
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,0.07);
  padding-top:32px; gap:0;
}
.hero-stat { text-align:center; padding:0 12px; border-right:1px solid rgba(255,255,255,0.07); }
.hero-stat:first-child { padding-left:0; text-align:left; }
.hero-stat:last-child  { border-right:none; }
.hero-stat-num   { font-family:var(--font-h); font-size:2.4rem; color:var(--orange); line-height:1; }
.hero-stat-label { font-size:0.68rem; color:rgba(255,255,255,0.38); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }

/* Hero RIGHT panel — visual card */
.hero-right { 
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}
.hero-card {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--r-xl); padding:32px;
  backdrop-filter:blur(10px);
  position:relative; 
  overflow:hidden;
  width:100%;
  max-width:480px;
}
.hero-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--orange),var(--gold));
}
.hero-card-title { font-family:var(--font-h); font-size:1rem; color:rgba(255,255,255,0.5); letter-spacing:2px; margin-bottom:20px; }
.hero-metrics { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }
.hero-metric {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07);
  border-radius:12px; padding:18px; text-align:center;
}
.hero-metric-num {
  font-family:var(--font-h); font-size:2.4rem; line-height:1;
  background:linear-gradient(135deg,var(--orange),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:5px;
}
.hero-metric-label { font-size:0.7rem; color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:1px; }
.hero-cert-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:16px; }
.hero-cert-chip { font-size:0.65rem; font-weight:700; padding:4px 10px; border-radius:6px; background:rgba(232,65,24,0.1); border:1px solid rgba(232,65,24,0.2); color:var(--orange); letter-spacing:0.5px; }
.hero-marquee { overflow:hidden; position:relative; margin-top:14px; }
.hero-marquee-track { display:flex; gap:10px; animation:marquee 18s linear infinite; width:max-content; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.hero-tag-pill { white-space:nowrap; font-size:0.68rem; font-weight:600; padding:5px 12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:50px; color:rgba(255,255,255,0.45); }

/* Floating badges on hero card */
.hero-badge {
  position:absolute; display:flex; align-items:center; gap:8px;
  background:rgba(13,13,26,0.9); backdrop-filter:blur(12px);
  border:1px solid rgba(232,65,24,0.2); border-radius:50px;
  padding:8px 16px; font-size:0.72rem; font-weight:600; color:rgba(255,255,255,0.8);
  white-space:nowrap; z-index:2;
}
.hero-badge i { color:var(--orange); }
.hero-badge-1 { top:-18px; right:20px; }
.hero-badge-2 { bottom:-18px; left:20px; }

/* ══ TRUST STRIP ══════════════════════════════════════════════ */
.trust-strip { background:var(--dark-3); padding:16px 0; border-top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(255,255,255,0.05); }
.trust-inner { display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; }
.trust-cert { display:flex; align-items:center; gap:7px; font-size:0.75rem; font-weight:600; color:rgba(255,255,255,0.45); }
.trust-cert i { color:var(--orange); font-size:0.8rem; }
.trust-sep { width:1px; height:18px; background:rgba(255,255,255,0.1); }

/* ══ SERVICE CARDS — LIGHT ════════════════════════════════════ */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.service-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:30px 26px; transition:var(--tr); box-shadow:var(--shadow-s); position:relative; overflow:hidden; }
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--orange),var(--gold)); transform:scaleX(0); transform-origin:left; transition:var(--tr); }
.service-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(232,65,24,0.22); }
.service-card:hover::before { transform:scaleX(1); }
.service-icon { width:50px; height:50px; border-radius:12px; background:rgba(232,65,24,0.07); border:1px solid rgba(232,65,24,0.14); display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:var(--orange); margin-bottom:18px; transition:var(--tr); }
.service-card:hover .service-icon { background:var(--orange); color:white; border-color:var(--orange); }
.service-card h3 { font-size:1.35rem; margin-bottom:9px; color:var(--t-head); }
.service-card p  { font-size:0.86rem; color:var(--t-mid); }
.service-card-link { display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; font-weight:700; color:var(--orange); margin-top:16px; transition:var(--tr); }
.service-card:hover .service-card-link { gap:10px; }

/* ══ EXPERTISE / WHY CHOOSE ══════════════════════════════════ */
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.why-features { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.why-feature { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r); padding:20px; box-shadow:var(--shadow-s); transition:var(--tr); }
.why-feature:hover { border-color:rgba(232,65,24,0.22); box-shadow:var(--shadow); transform:translateY(-2px); }
.why-feature-icon { font-size:1.5rem; color:var(--orange); margin-bottom:10px; }
.why-feature h4 { font-family:var(--font-b); font-weight:700; font-size:0.88rem; margin-bottom:5px; color:var(--t-head); }
.why-feature p  { font-size:0.8rem; color:var(--t-mid); }
.exp-feature { background:var(--white); border:1.5px solid var(--border); border-radius:12px; padding:18px 20px; display:flex; align-items:flex-start; gap:14px; box-shadow:var(--shadow-s); transition:var(--tr); }
.exp-feature:hover { border-color:rgba(232,65,24,0.22); box-shadow:var(--shadow); transform:translateX(4px); }
.exp-feature-icon { width:42px; height:42px; border-radius:10px; flex-shrink:0; background:rgba(232,65,24,0.07); border:1px solid rgba(232,65,24,0.14); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--orange); transition:var(--tr); }
.exp-feature:hover .exp-feature-icon { background:var(--orange); color:white; }
.exp-feature h4 { font-family:var(--font-b); font-weight:700; font-size:0.92rem; color:var(--t-head); margin-bottom:4px; }
.exp-feature p  { font-size:0.81rem; color:var(--t-mid); margin:0; }

/* ══ RESULTS / PORTFOLIO CARDS ════════════════════════════════ */
.result-card { border:1.5px solid var(--border); border-radius:14px; padding:22px; background:var(--white); box-shadow:var(--shadow-s); transition:var(--tr); position:relative; overflow:hidden; }
.result-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--orange),var(--gold)); }
.result-card:hover { box-shadow:var(--shadow); border-color:rgba(232,65,24,0.2); transform:translateY(-3px); }
.result-card-label   { font-size:0.66rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--t-dim); margin-bottom:4px; }
.result-card-company { font-size:0.7rem; color:var(--orange); font-weight:600; margin-bottom:10px; }
.result-metric-row   { display:flex; align-items:baseline; gap:8px; }
.result-num { font-family:var(--font-h); font-size:2.6rem; line-height:1; background:linear-gradient(135deg,var(--orange),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.result-arrow.down { color:var(--orange); font-size:1rem; }
.result-arrow.up   { color:#1a9e4a;      font-size:1rem; }
.result-desc { font-size:0.79rem; color:var(--t-mid); margin-top:8px; }

/* ── PROOF IMAGE CARD ── */
.proof-img-card { background:linear-gradient(135deg,#0f1535,#1a2754); border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(13,13,26,0.35); border:1px solid rgba(232,65,24,0.2); }
.proof-img-label { display:flex; align-items:center; gap:8px; padding:12px 18px; font-size:0.72rem; font-weight:700; color:rgba(255,255,255,0.55); letter-spacing:0.5px; border-bottom:1px solid rgba(255,255,255,0.06); }
.proof-live-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 8px #22c55e; animation:pulse-dot 2s infinite; flex-shrink:0; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.4} }
.proof-img { width:100%; display:block; max-height:260px; object-fit:cover; object-position:top; }
.proof-img-stats { display:flex; align-items:center; justify-content:space-around; padding:14px 20px; gap:8px; }
.proof-stat { text-align:center; }
.proof-stat-num { font-family:var(--font-h); font-size:1.4rem; color:var(--orange); line-height:1; }
.proof-stat-lbl { font-size:0.58rem; color:rgba(255,255,255,0.35); text-transform:uppercase; letter-spacing:1px; margin-top:2px; }
.proof-stat-div { width:1px; height:32px; background:rgba(255,255,255,0.08); }

/* ── CLIENT SHOWCASE ── */
.section-label-sm { display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--orange); background:rgba(232,65,24,0.1); border:1px solid rgba(232,65,24,0.25); padding:4px 14px; border-radius:50px; margin-bottom:4px; }
.client-showcase-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.client-card { border-radius:16px; overflow:hidden; border:1.5px solid var(--border); background:var(--white); transition:all 0.3s; box-shadow:0 4px 20px rgba(0,0,0,0.07); }
.client-card:hover { transform:translateY(-5px); border-color:var(--orange); box-shadow:0 16px 40px rgba(232,65,24,0.15); }
.client-card-img-wrap { position:relative; overflow:hidden; }
.client-card-img { width:100%; height:220px; object-fit:cover; object-position:top; display:block; transition:transform 0.4s; }
.client-card:hover .client-card-img { transform:scale(1.04); }
.client-card-overlay { position:absolute; bottom:10px; left:12px; }
.client-card-tag { display:inline-flex; align-items:center; gap:5px; background:rgba(13,13,26,0.85); border:1px solid rgba(232,65,24,0.4); color:white; font-size:0.72rem; font-weight:700; padding:4px 10px; border-radius:50px; backdrop-filter:blur(8px); }
.client-card-tag i { color:var(--orange); }
.client-card-body { padding:18px 20px; }
.client-card-name { font-family:var(--font-h); font-size:1.15rem; color:var(--text-h,#0d0d1a); letter-spacing:0.5px; margin-bottom:6px; }
.client-card-desc { font-size:0.82rem; color:var(--t-mid); line-height:1.6; margin-bottom:12px; }
.client-card-metrics { display:flex; gap:14px; flex-wrap:wrap; }
.client-card-metrics span { font-size:0.75rem; font-weight:700; color:var(--text-h,#0d0d1a); display:flex; align-items:center; gap:5px; }
@media(max-width:768px) { .client-showcase-grid{grid-template-columns:1fr} .proof-img{max-height:180px} }

.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.portfolio-card { background:var(--white); border-radius:var(--r-lg); overflow:hidden; border:1.5px solid var(--border); box-shadow:var(--shadow-s); transition:var(--tr); }
.portfolio-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(232,65,24,0.2); }
.portfolio-card-img { height:175px; background:var(--bg-3); display:flex; align-items:center; justify-content:center; position:relative; }
.portfolio-metric { position:absolute; top:12px; right:12px; background:linear-gradient(135deg,var(--orange),var(--gold)); color:white; font-family:var(--font-h); font-size:1.15rem; padding:5px 11px; border-radius:6px; }
.portfolio-card-body  { padding:18px 20px; }
.portfolio-tag        { display:inline-block; font-size:0.66rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); margin-bottom:6px; }
.portfolio-card-body h4 { font-size:1.1rem; margin-bottom:6px; color:var(--t-head); }
.portfolio-card-body p  { font-size:0.81rem; color:var(--t-mid); }

/* ══ CASE STUDY CARDS ════════════════════════════════════════ */
.cs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; }
.cs-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-s); transition:var(--tr); display:flex; flex-direction:column; }
.cs-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(232,65,24,0.25); }
.cs-card-header { padding:26px 26px 20px; background:var(--bg-2); border-bottom:1px solid var(--border); position:relative; overflow:hidden; }
.cs-card-header::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--orange),var(--gold)); }
.cs-category-badge { display:inline-flex; align-items:center; gap:5px; font-size:0.65rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); background:rgba(232,65,24,0.07); border:1px solid rgba(232,65,24,0.15); padding:4px 12px; border-radius:50px; margin-bottom:10px; }
.cs-card-title  { font-size:1.4rem; color:var(--t-head); margin-bottom:4px; }
.cs-client-name { font-size:0.78rem; color:var(--t-dim); display:flex; align-items:center; gap:5px; }
.cs-big-metric  { position:absolute; right:18px; bottom:14px; font-family:var(--font-h); font-size:3rem; background:linear-gradient(135deg,var(--orange),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; opacity:0.45; line-height:1; }
.cs-card-body   { padding:22px 26px; flex:1; }
.cs-section-label { font-size:0.63rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--orange); margin-bottom:6px; display:flex; align-items:center; gap:5px; }
.cs-section-label::before { content:''; width:12px; height:2px; background:var(--orange); }
.cs-card-body h5 { font-family:var(--font-b); font-size:0.9rem; color:var(--t-head); font-weight:700; margin-bottom:5px; }
.cs-card-body p  { font-size:0.83rem; color:var(--t-mid); margin-bottom:14px; line-height:1.7; }
.cs-results-row { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.cs-result-pill { background:rgba(232,65,24,0.07); border:1px solid rgba(232,65,24,0.18); border-radius:50px; padding:5px 11px; font-size:0.74rem; font-weight:700; color:var(--orange); display:flex; align-items:center; gap:4px; }
.cs-result-pill.gold  { background:rgba(240,165,0,0.07); border-color:rgba(240,165,0,0.18); color:#9a6f00; }
.cs-result-pill.green { background:rgba(26,158,74,0.07); border-color:rgba(26,158,74,0.18); color:#1a7a3e; }
.cs-tools-row { display:flex; gap:6px; flex-wrap:wrap; }
.cs-tool-tag { background:var(--bg-3); border:1px solid var(--border-2); border-radius:4px; padding:3px 8px; font-size:0.66rem; color:var(--t-mid); font-weight:500; }
.cs-card-footer { padding:14px 26px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.cs-industry { font-size:0.73rem; color:var(--t-dim); display:flex; align-items:center; gap:5px; }

/* Featured case study */
.cs-featured { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-xl); overflow:hidden; margin-bottom:40px; box-shadow:var(--shadow-s); }
.cs-featured-inner { display:grid; grid-template-columns:1fr 1fr; }
.cs-featured-content { padding:48px 44px; }
.cs-featured-visual { background:linear-gradient(135deg,var(--dark-bg),var(--dark-4)); display:flex; align-items:center; justify-content:center; padding:36px; position:relative; overflow:hidden; }
.cs-featured-visual::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(232,65,24,0.12),transparent 70%); }
.cs-metrics-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative; z-index:1; width:100%; }
.cs-metric-box { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:20px; text-align:center; transition:var(--tr); }
.cs-metric-box:hover { border-color:rgba(232,65,24,0.35); }
.cs-metric-num { font-family:var(--font-h); font-size:2.8rem; line-height:1; background:linear-gradient(135deg,var(--orange),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:5px; }
.cs-metric-label { font-size:0.68rem; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:1px; }

/* Timeline strip */
.timeline-strip { display:flex; gap:0; overflow-x:auto; border-radius:12px; border:1.5px solid var(--border); overflow:hidden; margin:36px 0; scrollbar-width:thin; scrollbar-color:var(--orange) var(--bg-3); }
.timeline-item { flex:0 0 190px; padding:20px 18px; border-right:1px solid var(--border); background:var(--white); transition:var(--tr); }
.timeline-item:hover { background:var(--bg-2); }
.timeline-year    { font-family:var(--font-h); font-size:1.7rem; color:var(--orange); margin-bottom:3px; }
.timeline-company { font-size:0.8rem; font-weight:700; color:var(--t-head); margin-bottom:4px; }
.timeline-role    { font-size:0.72rem; color:var(--t-dim); }

/* Web portfolio showcase */
.portfolio-showcase { background:var(--bg-2); border:1.5px solid var(--border); border-radius:var(--r-xl); overflow:hidden; margin-top:56px; }
.portfolio-showcase-header { padding:44px 44px 28px; background:var(--dark-bg); border-bottom:1px solid rgba(255,255,255,0.05); }
.portfolio-showcase-header::before { content:''; display:block; width:48px; height:4px; background:linear-gradient(90deg,var(--gold),var(--orange)); border-radius:2px; margin-bottom:20px; }
.portfolio-showcase-header h2 { color:white; margin-bottom:10px; }
.portfolio-showcase-header p  { color:rgba(255,255,255,0.5); max-width:600px; }
.web-projects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:0; }
.web-project { padding:30px 32px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--white); transition:var(--tr); }
.web-project:hover { background:var(--bg-2); }
.web-project-icon { width:48px; height:48px; border-radius:12px; background:rgba(240,165,0,0.08); border:1px solid rgba(240,165,0,0.18); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--gold-d); margin-bottom:16px; transition:var(--tr); }
.web-project:hover .web-project-icon { background:var(--gold); color:white; }
.web-project h4       { font-size:1.2rem; color:var(--t-head); margin-bottom:5px; }
.web-project-url      { font-size:0.76rem; color:var(--orange); margin-bottom:12px; display:flex; align-items:center; gap:4px; }
.web-project p        { font-size:0.84rem; color:var(--t-mid); margin-bottom:16px; }
.web-project-tags     { display:flex; gap:5px; flex-wrap:wrap; }
.web-project-tag      { font-size:0.65rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--gold-d); background:rgba(240,165,0,0.07); border:1px solid rgba(240,165,0,0.15); padding:3px 9px; border-radius:4px; }
.portfolio-cta        { padding:36px 44px; text-align:center; background:var(--bg-2); border-top:1px solid var(--border); }
.portfolio-cta h3     { color:var(--t-head); margin-bottom:10px; }
.portfolio-cta p      { color:var(--t-mid); max-width:500px; margin:0 auto 22px; }

/* ══ TESTIMONIALS ════════════════════════════════════════════ */
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.testimonial-card { background:var(--white); border-radius:var(--r-lg); padding:26px; border:1.5px solid var(--border); box-shadow:var(--shadow-s); position:relative; transition:var(--tr); }
.testimonial-card:hover { box-shadow:var(--shadow); border-color:rgba(232,65,24,0.16); }
.testimonial-card::before { content:'\201C'; font-family:Georgia,serif; font-size:4.5rem; color:rgba(232,65,24,0.09); position:absolute; top:2px; left:18px; line-height:1; }
.testimonial-stars { color:var(--gold); font-size:0.8rem; margin-bottom:10px; }
.testimonial-card p { font-size:0.88rem; color:var(--t-mid); position:relative; z-index:1; margin-bottom:18px; }
.testimonial-author { display:flex; align-items:center; gap:11px; }
.testimonial-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--gold)); display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-size:1.15rem; color:white; flex-shrink:0; }
.testimonial-author-info strong { display:block; color:var(--t-head); font-size:0.88rem; }
.testimonial-author-info span   { font-size:0.74rem; color:var(--t-dim); }

/* ══ CTA BANNER ══════════════════════════════════════════════ */
.cta-banner { background:linear-gradient(135deg,var(--dark-bg) 0%,var(--dark-4) 100%); border-radius:var(--r-xl); padding:52px 44px; text-align:center; position:relative; overflow:hidden; }
.cta-banner::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(232,65,24,0.07) 0%,transparent 65%); }
.cta-banner h2 { position:relative; color:white; margin-bottom:12px; }
.cta-banner p  { position:relative; max-width:520px; margin:0 auto 26px; color:rgba(255,255,255,0.55); }
.cta-banner-btns { position:relative; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ══ NEWSLETTER ══════════════════════════════════════════════ */
.newsletter-bar { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:40px 44px; display:flex; align-items:center; gap:44px; box-shadow:var(--shadow-s); }
.newsletter-bar-text  { flex:1; }
.newsletter-bar-text h3 { color:var(--t-head); margin-bottom:5px; }
.newsletter-bar-text p  { color:var(--t-mid); }
.newsletter-form { display:flex; gap:10px; flex:1; }
.newsletter-form input { flex:1; padding:12px 18px; background:var(--bg-2); border:1.5px solid var(--border-2); border-radius:50px; color:var(--t-body); font-family:var(--font-b); font-size:0.9rem; transition:var(--tr); }
.newsletter-form input:focus { outline:none; border-color:var(--orange); }
.newsletter-form input::placeholder { color:var(--t-light); }

/* ══ CONTACT FORM ════════════════════════════════════════════ */
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:start; }
.contact-info-card { background:var(--white); border:1.5px solid var(--border); border-radius:14px; padding:24px; display:flex; gap:16px; align-items:flex-start; box-shadow:var(--shadow-s); transition:var(--tr); }
.contact-info-card:hover { border-color:rgba(232,65,24,0.25); transform:translateX(4px); }
.contact-info-icon { width:46px; height:46px; border-radius:11px; background:rgba(232,65,24,0.07); border:1px solid rgba(232,65,24,0.14); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--orange); flex-shrink:0; }
.contact-info-card h4 { font-family:var(--font-b); font-size:0.82rem; font-weight:700; color:var(--t-head); margin-bottom:5px; text-transform:uppercase; letter-spacing:1px; }
.contact-info-card p,.contact-info-card a { font-size:0.87rem; color:var(--t-mid); }
.contact-info-card a:hover { color:var(--orange); }
.form-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-xl); padding:36px; box-shadow:var(--shadow); }

/* ══ FORMS ═══════════════════════════════════════════════════ */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:0.79rem; font-weight:700; color:var(--t-body); margin-bottom:7px; }
.form-control { width:100%; padding:11px 15px; background:var(--bg); border:1.5px solid var(--border-2); border-radius:var(--r); color:var(--t-body); font-family:var(--font-b); font-size:0.9rem; transition:var(--tr); }
.form-control:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(232,65,24,0.09); }
.form-control::placeholder { color:var(--t-light); }
textarea.form-control { resize:vertical; min-height:120px; }
select.form-control { cursor:pointer; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238888aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; -webkit-appearance:none; }
.form-msg { display:none; padding:11px 16px; border-radius:8px; margin-top:12px; font-weight:600; font-size:0.86rem; }
.form-msg.success { background:rgba(26,158,74,0.08); border:1px solid rgba(26,158,74,0.22); color:#1a6e38; }
.form-msg.error   { background:rgba(232,65,24,0.08); border:1px solid rgba(232,65,24,0.22); color:var(--orange-d); }

/* ══ PAGE HERO (inner pages) ════════════════════════════════ */
.page-hero { padding:128px 0 68px; background:var(--dark-2); position:relative; overflow:hidden; text-align:center; }
.page-hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(232,65,24,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(232,65,24,0.025) 1px,transparent 1px); background-size:52px 52px; }
.page-hero::after  { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(232,65,24,0.35),transparent); }
.page-hero h1 { color:white; margin-bottom:10px; position:relative; }
.page-hero p  { max-width:600px; margin:0 auto; color:rgba(255,255,255,0.5); position:relative; }
.breadcrumb { display:flex; justify-content:center; gap:7px; font-size:0.76rem; color:rgba(255,255,255,0.3); margin-bottom:14px; position:relative; }
.breadcrumb a { color:var(--orange); }

/* ══ PROCESS STEPS ═══════════════════════════════════════════ */
.process-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; margin:36px 0; }
.process-grid::before { content:''; position:absolute; top:33px; left:5%; right:5%; height:2px; background:linear-gradient(90deg,var(--orange),var(--gold)); z-index:0; }
.proc-step { text-align:center; position:relative; z-index:1; }
.proc-num  { width:66px; height:66px; border-radius:50%; margin:0 auto 13px; background:var(--white); border:2.5px solid var(--orange); display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-size:1.6rem; color:var(--orange); box-shadow:0 0 0 4px rgba(232,65,24,0.08); }
.proc-step h5 { font-family:var(--font-b); font-weight:700; font-size:0.83rem; color:var(--t-head); margin-bottom:4px; }
.proc-step p  { font-size:0.75rem; color:var(--t-mid); padding:0 6px; }

/* ══ FOOTER — DARK ═══════════════════════════════════════════ */
.footer { background:var(--dark-2); border-top:1px solid rgba(255,255,255,0.04); padding-top:68px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:40px; margin-bottom:48px; }
.footer-brand p { font-size:0.84rem; margin:12px 0 18px; color:rgba(255,255,255,0.38); }
.footer-social { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.footer-social a { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:white; font-size:0.85rem; transition:all 0.3s; text-decoration:none; }
.footer-social a:hover { transform:translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,0.3); opacity:0.9; }
.footer-col h5 { font-family:var(--font-b); font-weight:700; font-size:0.78rem; color:rgba(255,255,255,0.8); text-transform:uppercase; letter-spacing:2px; margin-bottom:16px; padding-bottom:9px; border-bottom:2px solid rgba(232,65,24,0.22); }
.footer-links { display:flex; flex-direction:column; gap:8px; }
.footer-links a { font-size:0.82rem; color:rgba(255,255,255,0.38); display:flex; align-items:center; gap:6px; }
.footer-links a::before { content:'›'; color:var(--orange); font-size:0.95rem; }
.footer-links a:hover  { color:var(--orange); padding-left:3px; }
.footer-contact-item { display:flex; gap:9px; margin-bottom:11px; align-items:flex-start; }
.footer-contact-icon  { color:var(--orange); font-size:0.82rem; margin-top:2px; flex-shrink:0; }
.footer-contact-item p,.footer-contact-item a { font-size:0.8rem; margin:0; color:rgba(255,255,255,0.38); }
.footer-contact-item a:hover { color:var(--orange); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.05); padding:18px 0; display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:0.76rem; color:rgba(255,255,255,0.22); margin:0; }
.footer-bottom a { color:var(--orange); }
.footer-certifications { display:flex; gap:7px; flex-wrap:wrap; }
.footer-cert { font-size:0.62rem; font-weight:600; color:rgba(255,255,255,0.28); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); padding:3px 7px; border-radius:4px; }

/* ══ FLOATING ELEMENTS ═══════════════════════════════════════ */
.wa-float { position:fixed; bottom:26px; right:26px; z-index:999; width:52px; height:52px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; color:white; font-size:1.45rem; box-shadow:0 4px 16px rgba(37,211,102,0.4); transition:var(--tr); animation:wapulse 2.5s ease-in-out infinite; }
.wa-float:hover { transform:scale(1.1); color:white; }
@keyframes wapulse { 0%,100%{box-shadow:0 4px 16px rgba(37,211,102,0.4)} 50%{box-shadow:0 4px 26px rgba(37,211,102,0.6),0 0 0 6px rgba(37,211,102,0.07)} }
.scroll-top { position:fixed; bottom:90px; right:26px; z-index:999; width:40px; height:40px; border-radius:50%; background:var(--orange); color:white; display:flex; align-items:center; justify-content:center; font-size:0.95rem; box-shadow:0 4px 12px rgba(232,65,24,0.3); opacity:0; pointer-events:none; transition:var(--tr); border:none; }
.scroll-top.visible { opacity:1; pointer-events:all; }
.scroll-top:hover { transform:translateY(-3px); }

/* ══ BLOG CARDS ══════════════════════════════════════════════ */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.blog-card { background:var(--white); border-radius:var(--r-lg); overflow:hidden; border:1.5px solid var(--border); box-shadow:var(--shadow-s); transition:var(--tr); }
.blog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(232,65,24,0.2); }
.blog-card-cat { display:inline-block; background:var(--orange); color:white; font-size:0.63rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:50px; margin-bottom:12px; }
.blog-card-body { padding:20px 22px; }
.blog-meta { display:flex; gap:13px; font-size:0.73rem; color:var(--t-dim); margin-bottom:9px; }
.blog-meta i { color:var(--orange); margin-right:3px; }
.blog-card-body h4 { font-size:1.1rem; margin-bottom:7px; line-height:1.3; }
.blog-card-body h4 a { color:var(--t-head); }
.blog-card-body h4 a:hover { color:var(--orange); }
.blog-card-body p { font-size:0.83rem; color:var(--t-mid); margin-bottom:12px; }
.blog-read-more { font-size:0.8rem; font-weight:700; color:var(--orange); display:inline-flex; align-items:center; gap:5px; }
.blog-read-more:hover { gap:9px; }

/* ══ SIDEBAR ═════════════════════════════════════════════════ */
.blog-layout { display:grid; grid-template-columns:1fr 300px; gap:40px; align-items:start; }
.sidebar-widget { background:var(--white); border:1.5px solid var(--border); border-radius:14px; padding:24px; margin-bottom:20px; box-shadow:var(--shadow-s); }
.sidebar-widget h4 { font-family:var(--font-b); font-weight:700; font-size:0.84rem; color:var(--t-head); text-transform:uppercase; letter-spacing:2px; margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid rgba(232,65,24,0.22); }
.cat-link { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-radius:7px; background:var(--bg-2); color:var(--t-mid); font-size:0.86rem; transition:var(--tr); text-decoration:none; margin-bottom:6px; }
.cat-link:hover,.cat-link.active { background:rgba(232,65,24,0.07); color:var(--orange); border-left:3px solid var(--orange); }
.cat-count { background:rgba(232,65,24,0.1); color:var(--orange); font-size:0.68rem; font-weight:700; padding:2px 7px; border-radius:50px; }

/* ══ TOOL CHIPS ══════════════════════════════════════════════ */
.tools-grid { display:flex; flex-wrap:wrap; gap:7px; }
.tool-chip { background:rgba(232,65,24,0.07); border:1px solid rgba(232,65,24,0.15); border-radius:50px; padding:5px 13px; font-size:0.76rem; font-weight:600; color:var(--orange); }

/* ══ FILTER BAR ══════════════════════════════════════════════ */
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:40px; }
.filter-btn { padding:8px 20px; border-radius:50px; background:var(--white); border:1.5px solid var(--border-2); color:var(--t-mid); font-family:var(--font-b); font-size:0.83rem; font-weight:600; cursor:pointer; transition:var(--tr); }
.filter-btn:hover,.filter-btn.active { background:var(--orange); border-color:var(--orange); color:white; }

/* ══ DIVIDER ═════════════════════════════════════════════════ */
.divider      { height:1px; background:var(--border); }
.divider-dark { height:1px; background:rgba(255,255,255,0.05); }

/* ══ ABOUT PAGE ══════════════════════════════════════════════ */
.about-photo { width:100%; aspect-ratio:3/4; background:var(--bg-3); border-radius:var(--r-xl); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; box-shadow:var(--shadow-l); }
.about-badge { position:absolute; bottom:-16px; right:-16px; background:var(--orange); color:white; border-radius:14px; padding:18px 22px; text-align:center; box-shadow:0 8px 28px rgba(232,65,24,0.4); }
.about-badge-num   { font-family:var(--font-h); font-size:2.4rem; line-height:1; }
.about-badge-label { font-size:0.68rem; text-transform:uppercase; letter-spacing:1px; margin-top:2px; opacity:0.85; }
.cert-card { background:var(--white); border:1.5px solid var(--border); border-radius:13px; padding:22px; text-align:center; box-shadow:var(--shadow-s); transition:var(--tr); position:relative; overflow:hidden; }
.cert-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--orange),var(--gold)); }
.cert-card:hover { border-color:rgba(232,65,24,0.25); box-shadow:var(--shadow); transform:translateY(-3px); }
.cert-icon { font-size:1.8rem; color:var(--orange); margin-bottom:10px; }
.cert-card h5 { font-family:var(--font-b); font-size:0.83rem; font-weight:700; color:var(--t-head); margin-bottom:3px; }
.cert-card p  { font-size:0.7rem; color:var(--t-dim); }
.cert-img-placeholder { width:72px; height:72px; background:rgba(232,65,24,0.05); border:1.5px dashed rgba(232,65,24,0.25); border-radius:9px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; font-size:0.65rem; color:var(--t-dim); text-align:center; line-height:1.4; }
.timeline-full { position:relative; padding-left:30px; }
.timeline-full::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(var(--orange),rgba(232,65,24,0.08)); }
.tl-item { position:relative; padding-bottom:30px; }
.tl-dot  { position:absolute; left:-37px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--orange); border:3px solid var(--bg); box-shadow:0 0 0 2px var(--orange); }
.tl-item.current .tl-dot { background:var(--gold-d); box-shadow:0 0 0 2px var(--gold-d),0 0 10px rgba(240,165,0,0.4); }
.tl-year    { font-family:var(--font-h); font-size:0.88rem; color:var(--orange); letter-spacing:1px; margin-bottom:3px; }
.tl-item.current .tl-year { color:var(--gold-d); }
.tl-company { font-weight:700; color:var(--t-head); font-size:0.97rem; margin-bottom:2px; }
.tl-role    { font-size:0.8rem; color:var(--t-dim); margin-bottom:7px; font-style:italic; }
.tl-desc    { font-size:0.83rem; color:var(--t-mid); line-height:1.65; }
.tl-tags    { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.tl-tag     { font-size:0.65rem; font-weight:600; padding:2px 8px; border-radius:4px; background:rgba(232,65,24,0.07); border:1px solid rgba(232,65,24,0.14); color:var(--orange); }
.value-card { background:var(--white); border:1.5px solid var(--border); border-radius:14px; padding:26px; text-align:center; box-shadow:var(--shadow-s); transition:var(--tr); }
.value-card:hover { border-color:rgba(232,65,24,0.25); box-shadow:var(--shadow); transform:translateY(-3px); }
.value-icon { font-size:2rem; color:var(--orange); margin-bottom:13px; }
.value-card h4 { font-size:1.1rem; color:var(--t-head); margin-bottom:7px; }
.value-card p  { font-size:0.83rem; color:var(--t-mid); }

/* ══ CAMPAIGN / AD PAGES ════════════════════════════════════ */
.tab-nav  { display:flex; gap:0; background:var(--bg-2); border-radius:14px; padding:5px; margin-bottom:40px; border:1.5px solid var(--border); }
.tab-btn  { flex:1; padding:13px 22px; border:none; background:transparent; color:var(--t-mid); font-family:var(--font-b); font-size:0.9rem; font-weight:600; border-radius:10px; cursor:pointer; transition:var(--tr); display:flex; align-items:center; justify-content:center; gap:9px; }
.tab-btn.active  { background:linear-gradient(135deg,var(--orange),var(--orange-d)); color:white; box-shadow:0 4px 16px rgba(232,65,24,0.3); }
.tab-btn:hover:not(.active) { background:rgba(232,65,24,0.06); color:var(--orange); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.campaign-hero { background:var(--bg-2); border:1.5px solid var(--border); border-radius:18px; padding:40px; margin-bottom:40px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.chero-stat { background:var(--white); border:1.5px solid var(--border); border-radius:12px; padding:20px; text-align:center; box-shadow:var(--shadow-s); }
.chero-stat-num { font-family:var(--font-h); font-size:2.6rem; background:linear-gradient(135deg,var(--orange),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin-bottom:5px; }
.chero-stat-label { font-size:0.68rem; color:var(--t-dim); text-transform:uppercase; letter-spacing:1px; }
.campaign-type-card { background:var(--white); border:1.5px solid var(--border); border-radius:14px; padding:24px; box-shadow:var(--shadow-s); transition:var(--tr); }
.campaign-type-card:hover { border-color:rgba(232,65,24,0.25); box-shadow:var(--shadow); transform:translateY(-3px); }
.campaign-type-card h4 { color:var(--t-head); margin-bottom:7px; }
.campaign-type-card p  { color:var(--t-mid); font-size:0.84rem; margin-bottom:14px; }
.ct-icon { width:48px; height:48px; border-radius:11px; background:rgba(232,65,24,0.07); border:1px solid rgba(232,65,24,0.14); display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:var(--orange); margin-bottom:16px; transition:var(--tr); }
.campaign-type-card:hover .ct-icon { background:var(--orange); color:white; }
.ct-tags { display:flex; flex-wrap:wrap; gap:5px; }
.ct-tag  { font-size:0.68rem; font-weight:600; padding:3px 9px; border-radius:4px; background:rgba(232,65,24,0.07); border:1px solid rgba(232,65,24,0.14); color:var(--orange); }
.result-showcase { background:linear-gradient(135deg,var(--orange),var(--orange-d)); border-radius:var(--r-lg); padding:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; margin:40px 0; }
.rs-num   { font-family:var(--font-h); font-size:3.2rem; color:white; line-height:1; margin-bottom:5px; }
.rs-label { font-size:0.72rem; color:rgba(255,255,255,0.75); text-transform:uppercase; letter-spacing:1px; }
.audience-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0; }
.audience-card { background:var(--white); border:1.5px solid var(--border); border-radius:12px; padding:22px; border-top:3px solid var(--orange); box-shadow:var(--shadow-s); }
.audience-card h5 { font-family:var(--font-b); font-weight:700; color:var(--t-head); margin-bottom:7px; }
.audience-card p  { font-size:0.82rem; color:var(--t-mid); }
.funnel-visual { background:var(--bg-2); border:1.5px solid var(--border); border-radius:14px; padding:28px; margin:24px 0; }
.funnel-stage { display:flex; align-items:center; gap:18px; padding:12px 16px; border-radius:8px; margin-bottom:6px; transition:var(--tr); }
.funnel-stage:hover { background:rgba(232,65,24,0.03); }
.funnel-bar { height:44px; border-radius:7px; background:linear-gradient(90deg,var(--orange),var(--gold)); display:flex; align-items:center; padding:0 14px; font-weight:700; color:white; font-size:0.84rem; flex-shrink:0; }
.funnel-info h6 { font-family:var(--font-b); font-weight:700; color:var(--t-head); font-size:0.88rem; margin-bottom:2px; }
.funnel-info p  { font-size:0.78rem; color:var(--t-mid); }
.process-step-v { display:flex; gap:14px; align-items:flex-start; position:relative; padding-bottom:14px; }
.process-step-v::before { content:''; position:absolute; left:17px; top:38px; bottom:-14px; width:2px; background:linear-gradient(var(--orange),rgba(232,65,24,0.1)); }
.process-step-v:last-child::before { display:none; }
.process-dot { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--orange-d)); display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-size:1.1rem; color:white; flex-shrink:0; box-shadow:0 0 0 4px rgba(232,65,24,0.1); }
.process-step-v h5 { font-family:var(--font-b); font-weight:700; font-size:0.9rem; color:var(--t-head); margin-bottom:3px; }
.process-step-v p  { font-size:0.81rem; color:var(--t-mid); }
.service-detail { padding:76px 0; border-bottom:1px solid var(--border); }
.service-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.service-detail-grid.reverse { direction:rtl; }
.service-detail-grid.reverse > * { direction:ltr; }
.service-num { font-family:var(--font-h); font-size:7rem; color:rgba(232,65,24,0.05); line-height:1; position:absolute; top:-20px; left:-10px; pointer-events:none; }
.service-detail-content { position:relative; }
.service-feature-list { display:flex; flex-direction:column; gap:10px; margin:20px 0 26px; }
.service-feature-item { display:flex; align-items:flex-start; gap:10px; font-size:0.9rem; color:var(--t-mid); }
.service-feature-item i { color:var(--orange); margin-top:3px; flex-shrink:0; font-size:0.82rem; }
.service-visual { background:var(--bg-2); border:1.5px solid var(--border); border-radius:18px; padding:32px; display:flex; flex-direction:column; gap:18px; }
.service-visual-icon { width:68px; height:68px; border-radius:16px; background:rgba(232,65,24,0.07); border:1px solid rgba(232,65,24,0.14); display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--orange); }
.service-stats-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.service-stat { background:var(--white); border-radius:10px; padding:16px; text-align:center; border:1.5px solid var(--border); }
.service-stat-num { font-family:var(--font-h); font-size:2.2rem; background:linear-gradient(135deg,var(--orange),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.service-stat-label { font-size:0.68rem; color:var(--t-dim); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }

/* ══ ANIMATIONS ═══════════════════════════════════════════════ */
.fade-in { opacity:0; transform:translateY(22px); transition:opacity 0.65s ease, transform 0.65s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }
.fade-in-delay-1 { transition-delay:0.1s; }
.fade-in-delay-2 { transition-delay:0.2s; }
.fade-in-delay-3 { transition-delay:0.3s; }
.fade-in-delay-4 { transition-delay:0.4s; }

/* ══ UTILITIES ════════════════════════════════════════════════ */
.text-orange { color:var(--orange) !important; }
.text-gold   { color:var(--gold-d) !important; }
.text-white  { color:#ffffff !important; }
.text-dark   { color:var(--t-head) !important; }
.text-center { text-align:center; }
.bg-light    { background:var(--bg-2) !important; }
.bg-white    { background:var(--bg) !important; }
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mt-5{margin-top:48px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}
.d-flex{display:flex}.align-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:16px}.gap-3{gap:24px}

/* ══ RESPONSIVE ═══════════════════════════════════════════════ */
@media(max-width:1024px){
  .hero-inner { grid-template-columns:1fr; gap:0; }
  .hero-right { display:none; }
  .hero-stats-bar { grid-template-columns:repeat(4,1fr); }
  .stats-grid,.footer-grid { grid-template-columns:1fr 1fr; }
  .why-grid,.expertise-grid { grid-template-columns:1fr; }
  .process-grid { grid-template-columns:repeat(3,1fr); }
  .process-grid::before { display:none; }
  .service-detail-grid,.service-detail-grid.reverse { grid-template-columns:1fr; direction:ltr; }
  .campaign-hero { grid-template-columns:1fr; }
  .audience-grid { grid-template-columns:1fr 1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .cs-featured-inner { grid-template-columns:1fr; }
  .result-showcase { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  .nav-menu { display:none; flex-direction:column; position:absolute; top:68px; left:0; right:0; background:rgba(11,11,22,0.98); border-bottom:1px solid rgba(232,65,24,0.15); padding:12px; gap:2px; }
  .nav-menu.open { display:flex; }
  .nav-toggle { display:flex; }
  .hero-stats-bar { grid-template-columns:repeat(2,1fr); gap:12px 0; }
  .hero-stat { border-right:none; border-bottom:1px solid rgba(255,255,255,0.07); padding-bottom:12px; text-align:left; padding-left:0; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; gap:10px; text-align:center; }
  .newsletter-bar { flex-direction:column; padding:28px; gap:24px; }
  .newsletter-form { flex-direction:column; }
  .why-features { grid-template-columns:1fr; }
  .cta-banner { padding:36px 22px; }
  .results-grid,.process-grid { grid-template-columns:1fr; }
  .audience-grid { grid-template-columns:1fr; }
  .section { padding:60px 0; }
  .tab-btn span { display:none; }
}
@media(max-width:480px){
  .hero-btns { flex-direction:column; }
  .btn-lg { padding:13px 26px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
}