@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;900&family=Space+Mono:wght@400;700&display=swap");

:root {
  /* Color tokens */
  --primary: #ff6b00;
  --bg: #000000;
  --surface: #0a0a0a;
  --white: #ffffff;
  --font: "Jost", sans-serif;
  --mono: "Space Mono", "JetBrains Mono", monospace;
  --w: var(--white);
  --s: #080808;
  --s2: #0e0e0e;
  --dim: rgba(255, 255, 255, 0.7); /* Home aliases */
  --color-bg: #000000;
  --color-surface: #111111;
  --color-white: #ffffff;
  --color-primary: #ff6b00;
  --color-on-primary: #ffffff; /* text on orange buttons (both themes) */
  --font-main: "Jost", sans-serif;

  /* Opacity / utility palette */
  --w70: rgba(255, 255, 255, 0.7);
  --w50: rgba(255, 255, 255, 0.5);
  --w38: rgba(255, 255, 255, 0.38);
  --w22: rgba(255, 255, 255, 0.22);
  --w12: rgba(255, 255, 255, 0.12);
  --w08: rgba(255, 255, 255, 0.08);
  --w05: rgba(255, 255, 255, 0.05);
  --w03: rgba(255, 255, 255, 0.03);
  --w80: rgba(255, 255, 255, 0.8);
  --o06: rgba(255, 107, 0, 0.06);
  --o10: rgba(255, 107, 0, 0.1);
  --o12: rgba(255, 107, 0, 0.12);
  --o20: rgba(255, 107, 0, 0.2);
  --o35: rgba(255, 107, 0, 0.35);
  --o60: rgba(255, 107, 0, 0.6);

  /* Derived aliases used in home */
  --color-primary-10: rgba(255, 107, 0, 0.1);
  --color-primary-20: rgba(255, 107, 0, 0.2);
  --color-primary-85: rgba(255, 107, 0, 0.85);
  --color-white-8: rgba(255, 255, 255, 0.08);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-80: rgba(255, 255, 255, 0.8);
  --color-white-38: rgba(255, 255, 255, 0.38);
  --color-white-25: rgba(255, 255, 255, 0.25);
  --color-white-22: rgba(255, 255, 255, 0.22);

  /* Easing function */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Additional opacity utilities */
  --w60: rgba(255, 255, 255, 0.6);
  --w75: rgba(255, 255, 255, 0.75);

  /* Radius / sizing */
  --nav-h: 5rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --ss-r: 4px;
  --p: #ff6b00;

  /* Typography scale */
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-large: 1.125rem;
  --font-size-h1: 3rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 2rem;
  --font-size-h4: 1.5rem;
  --font-size-h5: 1.25rem;
  --font-size-h6: 1.125rem;

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.7;

  /* Job page specific variables */
  --bg-surface: #0d1117;
  --bg-card: #111820;
  --bg-card-hover: #141e28;
  --border: rgba(255, 255, 255, 0.07);
  --border-bright: rgba(255, 255, 255, 0.13);
  --neon: #ff6b00;
  --neon-dim: rgba(255, 107, 0, 0.12);
  --neon-glow: rgba(255, 107, 0, 0.25);
  --accent2: #7c3aed;
  --text-primary: rgba(255, 255, 255, 0.8);
  --text-secondary: rgba(255, 255, 255, 0.8);
  --text-muted: rgba(255, 255, 255, 0.8);
  --radius-lg: 20px;
  --font-display: "Syne", sans-serif;
  --font-body: var(--font-main);
  --font-mono: "DM Mono", monospace;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Nav theme-aware (dark default) */
  --nav-bg: rgba(6, 6, 10, 0.48);
  --nav-border: rgba(255, 255, 255, 0.07);
  --nav-accent-gradient: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 107, 0, 0.4) 30%,
    rgba(255, 160, 60, 0.6) 50%,
    rgba(255, 107, 0, 0.4) 70%,
    transparent 100%
  );
}

/* ════════════════════════════════════════
   LIGHT THEME (orange + white)
════════════════════════════════════════ */
html[data-theme="light"] {
  --primary: #ff6b00;
  --bg: #fafafa;
  --surface: #ffffff;
  --white: #111111;
  --w: #111111;
  --s: #f0f0f0;
  --s2: #eeeeee;
  --dim: #292828;

  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-white: #111111;
  --color-primary: #ff6b00;

  --w70: rgba(17, 17, 17, 0.7);
  --w50: rgba(17, 17, 17, 0.5);
  --w38: rgba(17, 17, 17, 0.38);
  --w22: rgba(17, 17, 17, 0.22);
  --w12: rgba(17, 17, 17, 0.12);
  --w08: rgba(17, 17, 17, 0.08);
  --w05: rgba(17, 17, 17, 0.05);
  --w03: rgba(17, 17, 17, 0.03);
  --w80: rgba(17, 17, 17, 0.8);
  --o06: rgba(255, 107, 0, 0.06);
  --o10: rgba(255, 107, 0, 0.1);
  --o12: rgba(255, 107, 0, 0.12);
  --o20: rgba(255, 107, 0, 0.2);
  --o35: rgba(255, 107, 0, 0.35);
  --o60: rgba(255, 107, 0, 0.6);

  --color-primary-10: rgba(255, 107, 0, 0.1);
  --color-primary-20: rgba(255, 107, 0, 0.2);
  --color-primary-85: rgba(255, 107, 0, 0.85);
  --color-white-8: rgba(17, 17, 17, 0.08);
  --color-white-50: rgba(17, 17, 17, 0.5);
  --color-white-80: rgba(17, 17, 17, 0.8);
  --color-white-38: rgba(17, 17, 17, 0.38);
  --color-white-25: rgba(17, 17, 17, 0.25);
  --color-white-22: rgba(17, 17, 17, 0.22);

  --w60: rgba(17, 17, 17, 0.6);
  --w75: rgba(17, 17, 17, 0.75);

  --bg-surface: #f5f5f5;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f8f8;
  --border: rgba(0, 0, 0, 0.08);
  --border-bright: rgba(0, 0, 0, 0.14);
  --neon: #ff6b00;
  --neon-dim: rgba(255, 107, 0, 0.12);
  --neon-glow: rgba(255, 107, 0, 0.25);
  --text-primary: rgba(17, 17, 17, 0.9);
  --text-secondary: rgba(17, 17, 17, 0.8);
  --text-muted: rgba(17, 17, 17, 0.6);
  --color-on-primary: #ffffff;

  --nav-bg: rgba(255, 255, 255, 0.45);
  --nav-border: rgba(0, 0, 0, 0.08);
  --nav-accent-gradient: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 107, 0, 0.35) 30%,
    rgba(255, 160, 60, 0.55) 50%,
    rgba(255, 107, 0, 0.35) 70%,
    transparent 100%
  );
}

/* ════════════════════════════════════════
   GLOBAL RESET
════════════════════════════════════════ */
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  font-family: var(--font);
  background: var(--bg);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    background-color 0.3s var(--ease),
    color 0.3s var(--ease);
}

/* White text on all primary (orange) buttons in both themes */
.btn-primary,
.btn-nav,
.mob-btn,
.faq-cta,
.cta-btn-primary,
.careers-btn-primary,
.dropdown-footer-btn:hover,
.view-all-blogs,
.newsletter-button,
.newsletter-wrap button,
.newsletter-form button,
.hero-actions a:first-child,
.btn-submit,
.apply-btn,
.btn-p,
a.btn-primary {
  color: var(--color-on-primary) !important;
}
.faq-item.is-open .faq-icon,
.faq-item.open .faq-icon {
  color: var(--color-on-primary) !important;
  background: var(--primary) !important;
}

/* Light mode: buttons with NO orange background → dark text (readable on light bg) */
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .work-buttons .btn-secondary,
html[data-theme="light"] .cta-btn-secondary,
html[data-theme="light"] .hero-actions a:last-child,
html[data-theme="light"] .dropdown-footer-btn,
html[data-theme="light"] .text a,
html[data-theme="light"] a[href].btn-ghost,
html[data-theme="light"] .modal-footer button:last-child,
html[data-theme="light"] .btn-start {
  color: var(--color-white) !important;
}
html[data-theme="light"] a[href].btn-ghost:hover,
html[data-theme="light"] .btn-ghost:hover,
html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] .work-buttons .btn-secondary:hover,
html[data-theme="light"] .cta-btn-secondary:hover,
html[data-theme="light"] .hero-actions a:last-child:hover,
html[data-theme="light"] .text a:hover,
html[data-theme="light"] a[href].btn-ghost:hover,
html[data-theme="light"] .modal-footer button:last-child:hover,
html[data-theme="light"] .btn-start:hover {
  color: var(--primary) !important;
}
html[data-theme="light"] .dropdown-footer-btn:hover {
  color: var(--s) !important;
}

/* Light mode: primary buttons on hover (transparent bg) → orange text so still visible */
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn-nav:hover,
html[data-theme="light"] .view-all-blogs:hover,
html[data-theme="light"] .faq-cta:hover,
html[data-theme="light"] .newsletter-form button:hover,
html[data-theme="light"] .cta-btn-primary:hover,
html[data-theme="light"] .btn-p:hover,
html[data-theme="light"] .hero-actions a:first-child:hover,
html[data-theme="light"] .careers-btn-primary:hover,
html[data-theme="light"] .btn-submit:hover {
  color: var(--color-primary) !important;
}

/* ═══════════════════════════════════════
   LIGHT MODE — GALLERY: NO SHADOW
═══════════════════════════════════════ */
html[data-theme="light"] .g-card,
html[data-theme="light"] .g-card:hover {
  box-shadow: none;
}

/* ═══════════════════════════════════════
   LIGHT MODE — UNIFORM MEDIUM SHADOWS
   Same shadow on every card/box across all pages
═══════════════════════════════════════ */
html[data-theme="light"] .stat-card,
html[data-theme="light"] .mpill,
html[data-theme="light"] .tl-content,
html[data-theme="light"] .tl-exp-metrics,
html[data-theme="light"] .terminal,
html[data-theme="light"] .hbadge,
html[data-theme="light"] .m-float-badge,
html[data-theme="light"] .m-img-wrap,
html[data-theme="light"] .cbox,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .other-card,
html[data-theme="light"] .detail-card,
html[data-theme="light"] .sc-inner,
html[data-theme="light"] .detail-image-frame,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .hero-stat-card,
html[data-theme="light"] .bsh-right,
html[data-theme="light"] .bsh-stat,
html[data-theme="light"] .stat-box,
html[data-theme="light"] .company-card,
html[data-theme="light"] .emerging-card,
html[data-theme="light"] .outlook-card,
html[data-theme="light"] .related-card,
html[data-theme="light"] .share-panel,
html[data-theme="light"] .newsletter-cta,
html[data-theme="light"] .author-bio,
html[data-theme="light"] .value-card,
html[data-theme="light"] .benefit-card,
html[data-theme="light"] .job-card,
html[data-theme="light"] .talent-card,
html[data-theme="light"] .info-card,
html[data-theme="light"] .form-card,
html[data-theme="light"] .branch-card,
html[data-theme="light"] .offices-intro,
html[data-theme="light"] .faq-stat-card,
html[data-theme="light"] .faq-bottom-cta,
html[data-theme="light"] .card,
html[data-theme="light"] .hero-float-card,
html[data-theme="light"] .work-content,
html[data-theme="light"] .bubble,
html[data-theme="light"] .arch-diagram,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .thinking-card,
html[data-theme="light"] .thinking-principles,
html[data-theme="light"] .principle-item,
html[data-theme="light"] .tech-chip,
html[data-theme="light"] .badge,
html[data-theme="light"] .outcome-badge,
html[data-theme="light"] .arch-layer,
html[data-theme="light"] .integration-card,
html[data-theme="light"] .integration-node,
html[data-theme="light"] .step-card,
html[data-theme="light"] .handover-card,
html[data-theme="light"] .result-card,
html[data-theme="light"] .achievement-card,
html[data-theme="light"] .testimonial-card,
html[data-theme="light"] .comparison-side,
html[data-theme="light"] .arch-node,
html[data-theme="light"] .arch-node-wide,
html[data-theme="light"] .problem-quote {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .stat-card:hover,
html[data-theme="light"] .mpill:hover,
html[data-theme="light"] .tl-content:hover,
html[data-theme="light"] .cbox:hover,
html[data-theme="light"] .feature-card:hover,
html[data-theme="light"] .other-card:hover,
html[data-theme="light"] .detail-card:hover,
html[data-theme="light"] .sc-inner:hover,
html[data-theme="light"] .blog-card:hover,
html[data-theme="light"] .hero-stat-card:hover,
html[data-theme="light"] .stat-box:hover,
html[data-theme="light"] .company-card:hover,
html[data-theme="light"] .emerging-card:hover,
html[data-theme="light"] .outlook-card:hover,
html[data-theme="light"] .related-card:hover,
html[data-theme="light"] .value-card:hover,
html[data-theme="light"] .benefit-card:hover,
html[data-theme="light"] .job-card:hover,
html[data-theme="light"] .talent-card:hover,
html[data-theme="light"] .info-card:hover,
html[data-theme="light"] .form-card:hover,
html[data-theme="light"] .branch-card:hover,
html[data-theme="light"] .faq-stat-card:hover,
html[data-theme="light"] .card:hover,
html[data-theme="light"] .hero-float-card:hover,
html[data-theme="light"] .work-content:hover,
html[data-theme="light"] .bubble:hover,
html[data-theme="light"] .arch-diagram:hover,
html[data-theme="light"] .metric-card:hover,
html[data-theme="light"] .thinking-card:hover,
html[data-theme="light"] .principle-item:hover,
html[data-theme="light"] .tech-chip:hover,
html[data-theme="light"] .arch-layer:hover,
html[data-theme="light"] .integration-card:hover,
html[data-theme="light"] .step-card:hover,
html[data-theme="light"] .handover-card:hover,
html[data-theme="light"] .result-card:hover,
html[data-theme="light"] .achievement-card:hover,
html[data-theme="light"] .testimonial-card:hover,
html[data-theme="light"] .comparison-side:hover,
/* html[data-theme="light"] .timeline-item:hover, */
html[data-theme="light"] .arch-node:hover,
html[data-theme="light"] .arch-node-wide:hover {
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.13),
    0 2px 8px rgba(0, 0, 0, 0.07);
}

/* ═══════════════════════════════════════
   LIGHT MODE — HERO SECTIONS: WHITE BG
   Remove all gradients, glows, noise, grids
   from every hero across all pages
═══════════════════════════════════════ */

/* Hero wrapper backgrounds */
html[data-theme="light"] .hero,
html[data-theme="light"] .careers-hero,
/* html[data-theme="light"] .contact-hero, */
html[data-theme="light"] .article-hero,
html[data-theme="light"] .hero-section {
  background: #ffffff !important;
}

/* Animated grid overlay on .hero::before (teams, projects) */
html[data-theme="light"] .hero::before {
  display: none !important;
}

/* Canvas / noise / vignette layers */
html[data-theme="light"] .hero-canvas,
html[data-theme="light"] .hero-noise,
html[data-theme="light"] .hero-vignette,
html[data-theme="light"] .article-hero .hero-canvas,
html[data-theme="light"] .article-hero .hero-noise,
html[data-theme="light"] .article-hero .hero-vignette {
  display: none !important;
}

/* Orange glow blobs */
html[data-theme="light"] .hero-glow,
html[data-theme="light"] .hero-glow2,
html[data-theme="light"] .hero-glow-left,
html[data-theme="light"] .glow,
html[data-theme="light"] .glow-1,
html[data-theme="light"] .glow-2 {
  display: none !important;
}

/* Fixed background grid (projectdetail) */
html[data-theme="light"] .hero-bg-grid {
  display: none !important;
}

/* Careers hero solid bg */
html[data-theme="light"] .careers-hero-bg {
  background: #ffffff !important;
}

/* FAQ page — body::before/after fixed gradients */
html[data-theme="light"] body::before,
html[data-theme="light"] body::after {
  display: none !important;
}

/* ═══════════════════════════════════════
   LIGHT MODE — SERVICE DETAIL PAGE
   1. Uniform hover shadow on all cards
   2. White backgrounds on all sections
═══════════════════════════════════════ */

/* Uniform hover shadow — same medium lift for every card */
html[data-theme="light"] .feature-card:hover,
html[data-theme="light"] .skill-card:hover,
html[data-theme="light"] .skill-tech-card:hover,
html[data-theme="light"] .other-card:hover,
html[data-theme="light"] .sc-inner:hover,
html[data-theme="light"] .detail-card:hover {
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.13),
    0 2px 8px rgba(0, 0, 0, 0.07) !important;
}

/* Section backgrounds — force white */
html[data-theme="light"] .detail-section,
html[data-theme="light"] .features-section,
html[data-theme="light"] .flow-section,
html[data-theme="light"] .other-section,
html[data-theme="light"] .skills-section,
html[data-theme="light"] .cta-strip,
html[data-theme="light"] .section {
  background: #ffffff !important;
}

/* CTA band — hardcoded dark gradient override */
html[data-theme="light"] .cta-band {
  background: #ffffff !important;
}
html[data-theme="light"] .cta-band::before {
  display: none !important;
}
html[data-theme="light"] .cta-noise {
  display: none !important;
}
html[data-theme="light"] .cta-glow {
  display: none !important;
}

/* Card backgrounds inside sections */
html[data-theme="light"] .feature-card,
html[data-theme="light"] .skill-card,
html[data-theme="light"] .skill-tech-card,
html[data-theme="light"] .other-card,
html[data-theme="light"] .detail-card,
html[data-theme="light"] .sc-inner {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] .feature-card:hover,
html[data-theme="light"] .skill-card:hover,
html[data-theme="light"] .other-card:hover,
html[data-theme="light"] .detail-card:hover {
  background: #fafafa !important;
}

/* Detail grid separator lines */
html[data-theme="light"] .detail-grid {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Text colors for readability */
html[data-theme="light"] .detail-card-num,
html[data-theme="light"] .sc-title,
html[data-theme="light"] .fc-title,
html[data-theme="light"] .skill-card-title,
html[data-theme="light"] .skill-tech-card-title,
html[data-theme="light"] .oc-title,
html[data-theme="light"] .cta-band-title,
html[data-theme="light"] .cta-body {
  color: #111111 !important;
}

html[data-theme="light"] .detail-card-desc,
html[data-theme="light"] .fc-desc,
html[data-theme="light"] .skill-card-desc,
html[data-theme="light"] .skill-tech-item-tags,
html[data-theme="light"] .oc-desc,
html[data-theme="light"] .sc-desc,
html[data-theme="light"] .cta-band-sub,
html[data-theme="light"] .section-sub {
  color: rgba(17, 17, 17, 0.6) !important;
}

/* Stepper node circles */
html[data-theme="light"] .sn-circle {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}
html[data-theme="light"] .sn-circle:hover {
  background: #f5f5f5 !important;
}
html[data-theme="light"] .stepper-node.active .sn-circle {
  background: #fff7f0 !important;
  border-color: var(--primary) !important;
}

/* Stepper line rail */
html[data-theme="light"] .stepper-line {
  background: rgba(0, 0, 0, 0.1) !important;
}

/* Skills tab nav */
html[data-theme="light"] .skills-tabs-nav {
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="light"] .skills-tab-btn {
  color: rgba(17, 17, 17, 0.5) !important;
}
html[data-theme="light"] .skills-tab-btn:hover {
  color: rgba(17, 17, 17, 0.8) !important;
  background: rgba(0, 0, 0, 0.03) !important;
}
html[data-theme="light"] .skills-tab-btn.active {
  color: var(--primary) !important;
}
html[data-theme="light"] .skill-tech-divider {
  background: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .skill-tech-item-label {
  color: #111111 !important;
}

/* ═══════════════════════════════════════
   LIGHT MODE — HOME HERO SCROLL OVERLAY
   Replace black overlay with white overlay
═══════════════════════════════════════ */
html[data-theme="light"] #hero-dark {
  background:
    radial-gradient(
      ellipse at 50% 50%,
      transparent 5%,
      rgba(255, 255, 255, 0.94) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.85) 100%
    );
}

/* ═══════════════════════════════════════
   LIGHT MODE — SINGLE SERVICE HERO
   Softer white overlay so bg image stays visible
═══════════════════════════════════════ */
html[data-theme="light"] .sd-hero-bg {
  filter: brightness(0.75) saturate(0.85) !important;
}

html[data-theme="light"] .sd-hero-ov1 {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 40%,
    rgba(255, 255, 255, 0.03) 100%
  ) !important;
}

html[data-theme="light"] .sd-hero-ov2 {
  display: none !important;
}

html[data-theme="light"] .sd-hero-grid {
  display: none !important;
}

/* ═══════════════════════════════════════
   LIGHT MODE — HOME PAGE
   Clean, uniform, white-based UI
═══════════════════════════════════════ */

/* ── Page base ── */
html[data-theme="light"] #page {
  background: #fafafa !important;
  box-shadow: 0 -60px 80px 40px #fafafa !important;
}

/* ── Hero grain — hide in light ── */
html[data-theme="light"] #hero-grain {
  display: none !important;
}

/* ── Hero text ── */
html[data-theme="light"] #hero-content .sub {
  color: rgba(17, 17, 17, 0.45) !important;
}
html[data-theme="light"] #hero-content h1 {
  color: #111111 !important;
}
html[data-theme="light"] .btn-ghost {
  color: rgba(17, 17, 17, 0.7) !important;
  border-color: rgba(17, 17, 17, 0.25) !important;
}
html[data-theme="light"] .btn-ghost:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* ── Carousel panel ── */
html[data-theme="light"] .carousel-inner {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.85) 0%,
    transparent 100%
  ) !important;
}
html[data-theme="light"] .marquee-wrap::before {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.6),
    transparent
  ) !important;
}
html[data-theme="light"] .marquee-wrap::after {
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0.6),
    transparent
  ) !important;
}
html[data-theme="light"] .logo-mark img {
  filter: brightness(0) opacity(0.7) !important;
}
html[data-theme="light"] .marquee-item:hover .logo-mark img {
  filter: brightness(0) opacity(1) !important;
}
html[data-theme="light"] .marquee-name {
  color: rgba(17, 17, 17, 0.75) !important;
  text-shadow: none !important;
}

/* ── Stats section ── */
html[data-theme="light"] .stats-headline h2 {
  color: #111111 !important;
}
html[data-theme="light"] .stats-desc {
  color: rgba(17, 17, 17, 0.7) !important;
}
html[data-theme="light"] .stat-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .stat-card:hover {
  background: #fff7f0 !important;
  border-color: rgba(255, 107, 0, 0.2) !important;
}
html[data-theme="light"] .stat-text {
  color: rgba(17, 17, 17, 0.7) !important;
}
html[data-theme="light"] .stat-source {
  color: rgba(17, 17, 17, 0.45) !important;
}
html[data-theme="light"] .stat-source strong {
  color: rgba(17, 17, 17, 0.5) !important;
}

/* ── Text reveal section ── */
html[data-theme="light"] .fade-text {
  color: #111111 !important;
}

/* ── What We Do section ── */
html[data-theme="light"] .what-we-do {
  background: #f5f5f5 !important;
}
html[data-theme="light"] .service-image .img-overlay {
  background:
    linear-gradient(
      90deg,
      #f5f5f5 0%,
      rgba(245, 245, 245, 0.88) 10%,
      rgba(245, 245, 245, 0.5) 26%,
      rgba(245, 245, 245, 0.1) 50%,
      transparent 68%
    ),
    linear-gradient(180deg, rgba(245, 245, 245, 0.4) 0%, transparent 28%),
    linear-gradient(0deg, rgba(245, 245, 245, 0.5) 0%, transparent 32%) !important;
}
html[data-theme="light"] #serviceImage {
  filter: brightness(0.9) saturate(0.95) !important;
}
html[data-theme="light"] .what-we-do-header h2 {
  color: #111111 !important;
}
html[data-theme="light"] .what-we-do-header p {
  color: rgba(17, 17, 17, 0.65) !important;
}
html[data-theme="light"] .service-name {
  color: rgba(17, 17, 17, 0.35) !important;
}
html[data-theme="light"] .service-item.active .service-name {
  color: rgba(17, 17, 17, 0.9) !important;
}
html[data-theme="light"] .service-item .material-symbols-outlined {
  color: rgba(17, 17, 17, 0.2) !important;
}
html[data-theme="light"] .service-detail h3 {
  color: #111111 !important;
}
html[data-theme="light"] .service-detail p {
  color: rgba(17, 17, 17, 0.65) !important;
}
html[data-theme="light"] .detail-subtitle {
  color: rgba(17, 17, 17, 0.4) !important;
}
html[data-theme="light"] .wwd-dot {
  background: rgba(17, 17, 17, 0.15) !important;
}

/* ── FAQ section ── */
html[data-theme="light"] .faq-section {
  /* background: #ffffff !important; */
}
html[data-theme="light"] .faq-section::before {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px) !important;
}
html[data-theme="light"] .faq-section::after {
  background: radial-gradient(
    ellipse at 50% 10%,
    rgba(255, 107, 0, 0.05) 0%,
    transparent 68%
  ) !important;
}
html[data-theme="light"] .faq-header h2 {
  color: #111111 !important;
}
html[data-theme="light"] .faq-header p {
  color: rgba(17, 17, 17, 0.65) !important;
}
html[data-theme="light"] .faq-item {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .faq-item:first-child {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .faq-q-text {
  color: #111111 !important;
}
html[data-theme="light"] .faq-icon {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: rgba(17, 17, 17, 0.5) !important;
}
html[data-theme="light"] .faq-answer p {
  color: rgba(17, 17, 17, 0.65) !important;
}
/* html[data-theme="light"] .faq-question:hover {
  background: rgba(255, 107, 0, 0.03) !important;
} */
html[data-theme="light"] .faq-item.is-open > .faq-question {
  background: rgba(255, 107, 0, 0.04) !important;
}

/* ── Testimonials section ── */
html[data-theme="light"] .t-section {
  background: #f5f5f5 !important;
}
html[data-theme="light"] .t-section::before {
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    rgba(255, 107, 0, 0.05) 0%,
    transparent 68%
  ) !important;
}
html[data-theme="light"] .t-title {
  color: #111111 !important;
}
html[data-theme="light"] .t-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .t-card.active {
  border-color: rgba(255, 107, 0, 0.2) !important;
  /* box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important; */
}
html[data-theme="light"] blockquote {
  color: rgba(17, 17, 17, 0.7) !important;
}
html[data-theme="light"] blockquote strong {
  color: #111111 !important;
}
html[data-theme="light"] .card-footer {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .author-name {
  color: rgba(17, 17, 17, 0.8) !important;
}
html[data-theme="light"] .author-role {
  color: rgba(17, 17, 17, 0.55) !important;
}
html[data-theme="light"] .card-right {
  border-left-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .sdesc {
  color: rgba(17, 17, 17, 0.55) !important;
}
html[data-theme="light"] .sbar {
  background: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .tag {
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: rgba(17, 17, 17, 0.6) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}
html[data-theme="light"] .nav-btn {
  border-color: rgba(0, 0, 0, 0.1) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  color: rgba(17, 17, 17, 0.5) !important;
}
html[data-theme="light"] .t-dot {
  background: rgba(17, 17, 17, 0.15) !important;
}
html[data-theme="light"] .hint-text {
  color: rgba(17, 17, 17, 0.3) !important;
}
html[data-theme="light"] .t-counter-total {
  color: rgba(17, 17, 17, 0.3) !important;
}

/* ── Work With Us section ── */
html[data-theme="light"] .work-section {
  background: #ffffff !important;
}
html[data-theme="light"] .work-content {
  background: #ffffff !important;
  border-color: rgba(255, 107, 0, 0.2) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.07),
    0 2px 8px rgba(255, 107, 0, 0.06) !important;
}
html[data-theme="light"] .work-content::before {
  display: none !important;
}
html[data-theme="light"] .work-content h2 {
  color: #111111 !important;
}
html[data-theme="light"] .work-content p {
  color: rgba(17, 17, 17, 0.65) !important;
}
html[data-theme="light"] .work-buttons .btn-secondary {
  border-color: rgba(17, 17, 17, 0.2) !important;
}

/* ── Newsletter section ── */
html[data-theme="light"] .newsletter-section {
  background: #f5f5f5 !important;
}
html[data-theme="light"] .newsletter-section::before {
  background-image:
    linear-gradient(
      0deg,
      transparent 0,
      transparent calc(100% - 1px),
      rgba(0, 0, 0, 0.05) calc(100% - 1px),
      rgba(0, 0, 0, 0.05) 100%
    ),
    linear-gradient(
      90deg,
      transparent 0,
      transparent calc(100% - 1px),
      rgba(0, 0, 0, 0.05) calc(100% - 1px),
      rgba(0, 0, 0, 0.05) 100%
    ) !important;
}
html[data-theme="light"] .newsletter-section::after {
  background: radial-gradient(
    circle,
    rgba(255, 107, 0, 0.12),
    transparent 72%
  ) !important;
}
html[data-theme="light"] .newsletter-container {
  background: #ffffff !important;
  border-color: rgba(255, 107, 0, 0.18) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07) !important;
}
html[data-theme="light"] .newsletter-container h2 {
  color: #111111 !important;
}
html[data-theme="light"] .newsletter-container p {
  color: rgba(17, 17, 17, 0.65) !important;
}
html[data-theme="light"] .newsletter-eyebrow {
  color: rgba(17, 17, 17, 0.6) !important;
}
html[data-theme="light"] .newsletter-input {
  background: #fafafa !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #111111 !important;
}
html[data-theme="light"] .newsletter-input::placeholder {
  color: rgba(17, 17, 17, 0.4) !important;
}
html[data-theme="light"] .newsletter-input:focus {
  background: #ffffff !important;
  border-color: var(--primary) !important;
}

/* ── Blog section ── */
html[data-theme="light"] .blog-section {
  background: #fafafa !important;
}
html[data-theme="light"] .blog-header h2 {
  color: #111111 !important;
}
html[data-theme="light"] .blog-header p {
  color: rgba(17, 17, 17, 0.65) !important;
}
html[data-theme="light"] .blog-card {
  border-color: rgba(0, 0, 0, 0.1) !important;
  /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07) !important; */
}
html[data-theme="light"] .blog-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}

/* ═══════════════════════════════════════════════
   UNIFIED HERO SCROLL CUE — all pages except home
   Position: absolute bottom-right of hero section
═══════════════════════════════════════════════ */
.hero-scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  right: 3rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  z-index: 10;
  pointer-events: none;
}

.hero-scroll-cue__text {
  font-family: var(--mono, "Space Mono", monospace);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.hero-scroll-cue__line {
  width: 52px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}

.hero-scroll-cue__line::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 107, 0, 0.9) 50%,
    transparent 100%
  );
  animation: scrollDrip 1.8s ease-in-out infinite;
}

@keyframes scrollDrip {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Light mode adjustments */
html[data-theme="light"] .hero-scroll-cue__text {
  color: var(--primary);
}
html[data-theme="light"] .hero-scroll-cue__line {
  background: rgba(10, 10, 10, 0.12);
}

/* Responsive */
@media (max-width: 768px) {
  .hero-scroll-cue {
    display: none;
  }
}

/* ═══════════════════════════════════════
   TIMELINE — TL-HINT (mobile expand cue)
   "Tap to expand  ⌄" — only on mobile
═══════════════════════════════════════ */
.tl-hint {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  pointer-events: none;
}

.tl-hint-text {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  opacity: 0.8;
}

.tl-hint-icon {
  width: 14px;
  height: 14px;
  color: var(--primary);
  opacity: 0.8;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.tl-content[aria-expanded="true"] .tl-hint-icon {
  transform: rotate(180deg);
}

html[data-theme="light"] .tl-hint-text,
html[data-theme="light"] .tl-hint-icon {
  color: var(--primary);
  opacity: 0.9;
}

/* ═══════════════════════════════════════
   ARCH DIAGRAM — MOBILE ONLY
   Stack nodes vertically, fit viewport
═══════════════════════════════════════ */
@media (max-width: 768px) {
  .tl-hint {
    display: flex;
  }

  .arch-diagram-wrap {
    grid-template-columns: 1fr !important;
  }

  .arch-diagram {
    border-radius: 0.75rem;
    overflow-x: hidden;
  }

  .arch-diagram-body {
    padding: 1rem 0.875rem;
  }

  .arch-layer {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 1.25rem;
    gap: 0.5rem;
  }

  .arch-layer-content {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
  }

  .arch-node,
  .arch-node-wide {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .arch-node:hover {
    transform: none !important;
  }

  .arch-node-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 0.5rem;
  }

  .arch-node-icon svg {
    width: 16px;
    height: 16px;
  }
}