/* ═══════════════════════════════════════════════════
   QUIRK STUDIOS — Global Styles v3
   ═══════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:          #08080d;
  --bg-card:     #0f0f17;
  --bg-subtle:   #14141e;
  --bg-elevated: #1a1a26;
  --text:        #e8e8ed;
  --text-muted:  #7a7a8e;
  --text-dim:    #4a4a5e;
  --accent:      #e8461e;
  --accent-soft: rgba(232, 70, 30, 0.12);
  --accent-glow: rgba(232, 70, 30, 0.18);
  --purple:      #6b21a8;
  --purple-soft:  rgba(107, 33, 168, 0.1);
  --border:      rgba(255,255,255,0.06);
  --border-hover:rgba(255,255,255,0.12);
  --radius:      16px;
  --radius-sm:   10px;
  --max-w:       1140px;
  --nav-h:       72px;
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Light Theme ─── */
:root[data-theme="light"] {
  --bg:          #f5f5f7;
  --bg-card:     #ffffff;
  --bg-subtle:   #ededf0;
  --bg-elevated: #e4e4e8;
  --text:        #1a1a2e;
  --text-muted:  #5a5a6e;
  --text-dim:    #9a9aae;
  --accent:      #d63d14;
  --accent-soft: rgba(214, 61, 20, 0.1);
  --accent-glow: rgba(214, 61, 20, 0.12);
  --purple:      #7c3aed;
  --purple-soft:  rgba(124, 58, 237, 0.08);
  --border:      rgba(0,0,0,0.08);
  --border-hover:rgba(0,0,0,0.14);
}
:root[data-theme="light"] body::before { opacity: 0.015; }
:root[data-theme="light"] .glow-orb.a { opacity: 0.04; }
:root[data-theme="light"] .glow-orb.b { opacity: 0.03; }
:root[data-theme="light"] .glow-orb.c { opacity: 0.02; }
:root[data-theme="light"] nav {
  background: rgba(245, 245, 247, 0.8);
}
:root[data-theme="light"] nav.scrolled {
  background: rgba(245, 245, 247, 0.95);
  box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}
:root[data-theme="light"] .nav-logo-icon path { stroke: #1a1a2e; }
:root[data-theme="light"] .nav-dropdown {
  background: #fff;
  box-shadow: 0 25px 80px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06) inset;
}
:root[data-theme="light"] .hero-video-container {
  box-shadow: 0 30px 80px rgba(0,0,0,0.1);
}
:root[data-theme="light"] .video-placeholder {
  background: linear-gradient(135deg, #fff 0%, #ededf0 50%, #fff 100%);
  background-size: 200% 200%;
}
:root[data-theme="light"] .contact-form {
  background: #fff;
}
:root[data-theme="light"] .form-group input,
:root[data-theme="light"] .form-group select,
:root[data-theme="light"] .form-group textarea {
  background: #f5f5f7;
}
:root[data-theme="light"] .form-group input:focus,
:root[data-theme="light"] .form-group select:focus,
:root[data-theme="light"] .form-group textarea:focus {
  background: #fff;
}
:root[data-theme="light"] .form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235a5a6e' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .form-group select option {
  background: #fff; color: #1a1a2e;
}
:root[data-theme="light"] .card-demo { background: #f5f5f7; }
:root[data-theme="light"] .btn-primary { color: #fff; }
:root[data-theme="light"] .btn-ghost { color: #1a1a2e; }
/* Mobile nav overlay in light mode */
@media (max-width: 720px) {
  :root[data-theme="light"] .nav-links {
    background: rgba(245,245,247,0.97);
  }
}

/* ─── Theme Toggle Button ─── */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-subtle); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted);
  transition: all 0.25s;
  margin-left: 4px; flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: block; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }

/* ─── Ambient Background ─── */
.glow-wrap {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.glow-orb {
  position: absolute; border-radius: 50%; filter: blur(140px);
}
.glow-orb.a { width: 650px; height: 650px; background: var(--accent); top: -250px; right: -200px; opacity: 0.07; animation: orbFloat1 12s ease-in-out infinite; }
.glow-orb.b { width: 500px; height: 500px; background: var(--purple); bottom: 5%; left: -150px; opacity: 0.06; animation: orbFloat2 15s ease-in-out infinite; }
.glow-orb.c { width: 350px; height: 350px; background: var(--accent); bottom: -100px; right: 20%; opacity: 0.04; animation: orbFloat3 10s ease-in-out infinite; }

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, 40px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.08); }
}
@keyframes orbFloat3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-30px, -20px); }
}

/* grain overlay */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════
   FLOATING PARTICLES (JS-injected)
   ═══════════════════════════════════════════════════ */
.particle {
  position: fixed; pointer-events: none; z-index: 0;
  border-radius: 50%; opacity: 0;
  animation: particleDrift linear infinite;
}
@keyframes particleDrift {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-100vh) scale(1); }
}

/* ═══════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════ */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  background: rgba(8, 8, 13, 0.75);
  backdrop-filter: blur(30px) saturate(1.2);
  -webkit-backdrop-filter: blur(30px) saturate(1.2);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s, box-shadow 0.3s;
}
nav.scrolled {
  background: rgba(8, 8, 13, 0.92);
  box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}
nav .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;
}

/* Logo — light background so it pops on dark */
.nav-logo {
  display: flex; align-items: center; gap: 12px;
  position: relative; z-index: 1001;
  transition: transform 0.3s var(--ease);
}
.nav-logo:hover { transform: scale(1.03); }
.nav-logo-icon { width: 36px; height: 36px; flex-shrink: 0; }
.nav-wordmark {
  font-size: 17px; letter-spacing: 0.05em; white-space: nowrap;
}
.nav-wordmark strong { font-weight: 700; letter-spacing: 0.04em; }
.nav-wordmark span   { font-weight: 300; letter-spacing: 0.06em; }

/* Nav links */
.nav-links {
  display: flex; align-items: center; gap: 8px;
}
.nav-link {
  font-size: 14px; font-weight: 400; color: var(--text-muted);
  padding: 8px 16px; border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  position: relative;
}
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-link.active { background: var(--bg-subtle); }

.nav-cta {
  font-size: 14px; font-weight: 500;
  color: var(--accent) !important;
  border: 1px solid rgba(232,70,30,0.25);
  padding: 8px 20px; border-radius: 8px;
  margin-left: 8px;
  transition: all 0.25s;
}
.nav-cta:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ─── Dropdown ─── */
.nav-dropdown-wrap {
  position: relative;
}
/* Invisible hover bridge — fills the gap between trigger and dropdown */
.nav-dropdown-wrap::after {
  content: ''; position: absolute;
  top: 100%; left: 0; right: 0; height: 24px;
  pointer-events: none;
}
.nav-dropdown-wrap:hover::after { pointer-events: auto; }

.nav-dropdown-trigger {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
}
.nav-dropdown-trigger svg {
  width: 14px; height: 14px;
  transition: transform 0.3s var(--ease);
  color: var(--text-muted);
}
.nav-dropdown-wrap:hover .nav-dropdown-trigger svg,
.nav-dropdown-wrap.open .nav-dropdown-trigger svg {
  transform: rotate(180deg); color: var(--text);
}

.nav-dropdown {
  position: absolute; top: calc(100% + 18px); left: 50%;
  width: 620px;
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: 16px;
  padding: 8px;
  display: flex;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(10px) scale(0.96);
  transition: opacity 0.35s var(--ease-out), visibility 0.35s, transform 0.35s var(--ease-out);
  pointer-events: none;
  box-shadow: 0 25px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.nav-dropdown-wrap:hover > .nav-dropdown,
.nav-dropdown-wrap.open > .nav-dropdown {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

.dropdown-links {
  flex: 1; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.dropdown-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--radius-sm);
  transition: background 0.2s, transform 0.2s var(--ease-spring);
}
.dropdown-item:hover {
  background: var(--bg-subtle);
  transform: translateX(4px);
}
.dropdown-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s;
}
.dropdown-item:hover .dropdown-icon {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(232,70,30,0.1);
}
.dropdown-icon svg { width: 20px; height: 20px; }
.dropdown-icon.orange { background: var(--accent-soft); color: var(--accent); }
.dropdown-icon.blue   { background: rgba(59,130,246,0.1); color: #3b82f6; }
.dropdown-icon.green  { background: rgba(34,197,94,0.1); color: #22c55e; }

.dropdown-text h4 {
  font-size: 14px; font-weight: 600; margin-bottom: 2px; color: var(--text);
}
.dropdown-text p {
  font-size: 12px; color: var(--text-muted); line-height: 1.4;
}

.dropdown-preview {
  width: 200px; flex-shrink: 0;
  border-left: 1px solid var(--border);
  padding: 12px 16px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.dropdown-preview-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
}
.dropdown-preview-card .preview-icon {
  margin: 0 auto 12px;
  display: flex; gap: 8px; justify-content: center;
}
.preview-icon .dot {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--text-dim);
  display: flex; align-items: center; justify-content: center;
}
.preview-icon .dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-dim);
}
.preview-icon .dot:nth-child(2) { border-color: var(--accent); }
.preview-icon .dot:nth-child(2)::before { background: var(--accent); }
.dropdown-preview-card .bar {
  height: 3px; border-radius: 2px; background: var(--border);
  margin: 4px auto; width: 60%;
}
.dropdown-preview-card .bar:last-child { width: 40%; }
.dropdown-preview h5 { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.dropdown-preview p { font-size: 11px; color: var(--text-muted); line-height: 1.5; }

/* Mobile Nav */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 32px; height: 32px; position: relative; z-index: 1001;
}
.nav-toggle span {
  display: block; width: 20px; height: 1.5px; background: var(--text-muted);
  position: absolute; left: 6px;
  transition: all 0.35s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 9px; }
.nav-toggle span:nth-child(2) { top: 15px; }
.nav-toggle span:nth-child(3) { top: 21px; }
.nav-toggle.active span:nth-child(1) { top: 15px; transform: rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { top: 15px; transform: rotate(-45deg); }

/* ═══════════════════════════════════════════════════
   PAGE TRANSITIONS / ANIMATIONS
   ═══════════════════════════════════════════════════ */

.page-content {
  position: relative; z-index: 1;
  animation: pageIn 0.7s var(--ease-out) both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Staggered entrance */
.stagger { opacity: 0; transform: translateY(28px); }
.stagger.visible {
  animation: fadeUp 0.75s var(--ease-out) both;
}
.stagger.d1 { animation-delay: 0.08s; }
.stagger.d2 { animation-delay: 0.18s; }
.stagger.d3 { animation-delay: 0.28s; }
.stagger.d4 { animation-delay: 0.38s; }
.stagger.d5 { animation-delay: 0.48s; }
.stagger.d6 { animation-delay: 0.58s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll reveals */
.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0; transform: translateX(-40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0; transform: translateX(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0; transform: scale(0.92);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ─── Text shimmer on hero heading ─── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.text-shimmer {
  background: linear-gradient(
    90deg,
    var(--text) 0%,
    var(--accent) 25%,
    var(--text) 50%,
    var(--accent) 75%,
    var(--text) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}

/* ─── Gradient border animation ─── */
@keyframes borderRotate {
  0%   { --angle: 0deg; }
  100% { --angle: 360deg; }
}

/* ─── Floating animation for decorative elements ─── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(3deg); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes barGrow {
  from { width: 0; }
  to   { width: 98%; }
}

/* ─── Line draw animation ─── */
.line-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2s var(--ease-out);
}
.line-draw.visible {
  stroke-dashoffset: 0;
}

/* ═══════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer; border: none;
  transition: all 0.3s var(--ease);
  position: relative; overflow: hidden;
}
.btn svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* Ripple effect on button */
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.15) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.4s;
}
.btn:active::after { opacity: 1; }

.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 0 30px var(--accent-glow), 0 2px 8px rgba(0,0,0,0.3);
}
.btn-primary:hover {
  background: #d63d14;
  box-shadow: 0 0 50px rgba(232,70,30,0.3), 0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  border-color: var(--border-hover);
  background: var(--bg-subtle);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════
   SECTION COMMONS
   ═══════════════════════════════════════════════════ */

section { position: relative; z-index: 1; padding: 120px 0; }

.section-label {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.section-label::before {
  content: ''; width: 0; height: 1px; background: var(--accent);
  transition: width 0.8s var(--ease-out);
}
.visible .section-label::before,
.section-label.visible::before { width: 24px; }

.section-title {
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 700; letter-spacing: -0.025em;
  margin-bottom: 20px; line-height: 1.12;
}
.section-desc {
  font-size: 17px; color: var(--text-muted); line-height: 1.75;
  max-width: 560px;
}

.section-divider {
  border: none; border-top: 1px solid var(--border);
  margin: 0;
}

/* ═══════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  transition: all 0.4s var(--ease);
  position: relative; overflow: hidden;
}
/* Animated gradient top border */
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  opacity: 0; transition: opacity 0.4s;
  animation: shimmerLine 3s linear infinite;
}
@keyframes shimmerLine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.card:hover {
  border-color: rgba(232,70,30,0.15);
  transform: translateY(-8px);
  box-shadow: 0 28px 70px rgba(0,0,0,0.4), 0 0 40px var(--accent-glow);
}
.card:hover::before { opacity: 1; }

.card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s;
}
.card:hover .card-icon {
  transform: scale(1.1) rotate(-3deg);
  box-shadow: 0 0 25px rgba(232,70,30,0.15);
}
.card-icon svg { width: 24px; height: 24px; }
.card-icon.orange { background: var(--accent-soft); color: var(--accent); }
.card-icon.blue   { background: rgba(59,130,246,0.1); color: #3b82f6; }
.card-icon.green  { background: rgba(34,197,94,0.1); color: #22c55e; }

.card h3 {
  font-size: 20px; font-weight: 600; margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.card p { font-size: 15px; line-height: 1.7; color: var(--text-muted); }

.card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.card-tags span {
  font-size: 12px; font-weight: 500; color: var(--text-muted);
  background: var(--bg-subtle); padding: 5px 12px; border-radius: 6px;
  transition: color 0.3s, background 0.3s;
}
.card:hover .card-tags span {
  background: var(--bg-elevated); color: var(--text);
}

.card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--accent);
  margin-top: 24px;
}
.card-link svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.card:hover .card-link svg { transform: translateX(6px); }

/* Animated demo inside card */
.card-demo {
  margin: -8px -8px 20px;
  padding: 16px 8px 8px;
  border-radius: 12px 12px 0 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.card-demo svg {
  opacity: 0.85;
  transition: opacity 0.4s;
}
.card:hover .card-demo svg { opacity: 1; }
/* Animated nodes in org chart demo */
.demo-node { transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.demo-line { opacity: 0.5; }

/* ═══════════════════════════════════════════════════
   HERO — with integrated video
   ═══════════════════════════════════════════════════ */

.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 120px 0 80px;
}
.hero .container {
  display: flex; align-items: center; gap: 60px;
}
.hero-inner { flex: 1.2; min-width: 0; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 28px;
  padding: 6px 14px 6px 10px;
  background: var(--accent-soft);
  border: 1px solid rgba(232,70,30,0.15);
  border-radius: 20px;
}
.hero-tag .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.2s ease-in-out infinite;
  box-shadow: 0 0 10px var(--accent-glow);
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px var(--accent-glow); }
  50%      { opacity: 0.4; transform: scale(0.7); box-shadow: 0 0 20px rgba(232,70,30,0.3); }
}

.hero h1 {
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 700; line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.hero h1 .accent { color: var(--accent); }

.hero p.hero-desc {
  font-size: 18px; line-height: 1.75;
  color: var(--text-muted);
  max-width: 540px;
  margin-bottom: 40px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero video — right side */
.hero-video {
  flex: 0.8; min-width: 0;
  position: relative;
}
.hero-video-container {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  transition: box-shadow 0.4s, border-color 0.4s, transform 0.6s var(--ease);
}
.hero-video-container:hover {
  border-color: rgba(232,70,30,0.2);
  box-shadow: 0 35px 100px rgba(0,0,0,0.6), 0 0 80px var(--accent-glow);
  transform: translateY(-4px);
}
.hero-video-container video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.video-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-subtle) 50%, var(--bg-card) 100%);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.video-play-btn {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none;
  box-shadow: 0 0 40px var(--accent-glow);
  transition: all 0.3s var(--ease);
  animation: float 3s ease-in-out infinite;
}
.video-play-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 0 60px rgba(232,70,30,0.35);
}
.video-play-btn svg { width: 28px; height: 28px; color: #fff; margin-left: 3px; }
.video-placeholder span {
  font-size: 13px; color: var(--text-muted); font-weight: 400;
}

/* Decorative ring behind video */
.hero-video::before {
  content: ''; position: absolute;
  inset: -2px; border-radius: 22px;
  background: conic-gradient(from 0deg, transparent, var(--accent), transparent, var(--purple), transparent);
  opacity: 0.12;
  animation: spinSlow 20s linear infinite;
  z-index: -1;
}
/* Floating decorative dots */
.hero-video .deco-dot {
  position: absolute; border-radius: 50%; z-index: 2;
  pointer-events: none;
}
.hero-video .deco-dot.d1 {
  width: 10px; height: 10px; background: var(--accent);
  top: -5px; right: 20%; animation: float 4s ease-in-out infinite;
  box-shadow: 0 0 15px var(--accent-glow);
}
.hero-video .deco-dot.d2 {
  width: 6px; height: 6px; background: var(--purple);
  bottom: 10%; left: -3px; animation: floatSlow 5s ease-in-out infinite;
  box-shadow: 0 0 12px var(--purple-soft);
}
.hero-video .deco-dot.d3 {
  width: 8px; height: 8px; border: 1.5px solid var(--accent);
  top: 30%; right: -4px; animation: float 6s ease-in-out infinite 1s;
}

/* ═══════════════════════════════════════════════════
   SERVICES GRID
   ═══════════════════════════════════════════════════ */

.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 64px;
}

/* ═══════════════════════════════════════════════════
   APPROACH
   ═══════════════════════════════════════════════════ */

.approach-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: start; margin-top: 64px;
}
.approach-item { margin-bottom: 48px; position: relative; }
.approach-item:last-child { margin-bottom: 0; }
.approach-num {
  font-size: 13px; font-weight: 600; color: var(--accent);
  margin-bottom: 12px;
  transition: transform 0.3s var(--ease-spring);
}
.approach-item:hover .approach-num { transform: translateX(4px); }
.approach-item h3 {
  font-size: 18px; font-weight: 600; margin-bottom: 10px;
  transition: color 0.3s;
}
.approach-item:hover h3 { color: var(--accent); }
.approach-item p {
  font-size: 15px; color: var(--text-muted); line-height: 1.75;
}
/* Left accent line on hover */
.approach-item::before {
  content: ''; position: absolute;
  left: -20px; top: 0; bottom: 0; width: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.4s var(--ease-out);
}
.approach-item:hover::before { transform: scaleY(1); }

/* ═══════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════ */

.contact-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 72px 64px;
  text-align: center;
  position: relative; overflow: hidden;
}
.contact-box::before {
  content: ''; position: absolute; top: -1px; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  animation: shimmerLine 4s linear infinite;
}
.contact-box h2 {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700; letter-spacing: -0.025em;
  margin-bottom: 16px;
}
.contact-box p {
  font-size: 17px; color: var(--text-muted); line-height: 1.75;
  max-width: 480px; margin: 0 auto 36px;
}
.contact-email {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px; color: var(--text-muted);
  transition: color 0.25s, gap 0.3s;
  margin-top: 12px;
}
.contact-email:hover { color: var(--accent); gap: 14px; }
.contact-email svg { width: 18px; height: 18px; color: var(--accent); }

/* ─── Contact Form ─── */
.contact-form-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: start;
}
.contact-info h2 {
  font-size: 32px; font-weight: 700; letter-spacing: -0.025em;
  margin-bottom: 16px; line-height: 1.2;
}
.contact-info p {
  font-size: 16px; color: var(--text-muted); line-height: 1.75;
  margin-bottom: 32px;
}
.contact-detail {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; color: var(--text-muted); font-size: 15px;
  transition: color 0.25s;
}
.contact-detail:hover { color: var(--text); }
.contact-detail-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-detail-icon svg { width: 18px; height: 18px; }

/* Form */
.contact-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  position: relative; overflow: hidden;
}
.contact-form::before {
  content: ''; position: absolute; top: -1px; left: 15%; right: 15%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  animation: shimmerLine 4s linear infinite;
}
.form-group {
  margin-bottom: 20px;
}
.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.form-group label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--text-muted); margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit; font-size: 15px;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  outline: none;
  -webkit-appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-dim);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--bg-elevated);
}
.form-group textarea {
  resize: vertical; min-height: 120px;
}
.form-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%237a7a8e' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.form-group select option {
  background: var(--bg-card); color: var(--text);
}
.form-submit {
  margin-top: 8px;
}
.form-submit .btn { width: 100%; justify-content: center; }

/* ═══════════════════════════════════════════════════
   PAGE HEADER (inner pages) — with animated illustration
   ═══════════════════════════════════════════════════ */

.page-header { padding: 160px 0 80px; }
.page-header .container {
  display: flex; align-items: center; gap: 60px;
}
.page-header-text { flex: 1; min-width: 0; }
.page-header .section-label { margin-bottom: 20px; }
.page-header h1 {
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.1; margin-bottom: 20px;
}
.page-header p {
  font-size: 18px; color: var(--text-muted); line-height: 1.75;
  max-width: 580px;
}

/* Animated illustration panel */
.page-header-visual {
  flex: 0.85; min-width: 0;
  position: relative;
}
.header-illustration {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  position: relative; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.header-illustration::before {
  content: ''; position: absolute; top: -1px; left: 15%; right: 15%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  animation: shimmerLine 4s linear infinite;
}
/* Staggered animation for illustration children */
.header-illustration .anim-row {
  opacity: 0; transform: translateY(12px);
  animation: fadeUp 0.5s var(--ease-out) both;
}
.header-illustration .anim-row:nth-child(1) { animation-delay: 0.3s; }
.header-illustration .anim-row:nth-child(2) { animation-delay: 0.5s; }
.header-illustration .anim-row:nth-child(3) { animation-delay: 0.7s; }
.header-illustration .anim-row:nth-child(4) { animation-delay: 0.9s; }
.header-illustration .anim-row:nth-child(5) { animation-delay: 1.1s; }
.header-illustration .anim-row:nth-child(6) { animation-delay: 1.3s; }

/* Illustration dot decorations */
.page-header-visual .deco-dot {
  position: absolute; border-radius: 50%; z-index: 2; pointer-events: none;
}
.page-header-visual .deco-dot.d1 {
  width: 10px; height: 10px; background: var(--accent);
  top: -5px; right: 15%; animation: float 4s ease-in-out infinite;
  box-shadow: 0 0 15px var(--accent-glow);
}
.page-header-visual .deco-dot.d2 {
  width: 6px; height: 6px; background: var(--purple);
  bottom: 8%; left: -3px; animation: floatSlow 5s ease-in-out infinite;
  box-shadow: 0 0 12px var(--purple-soft);
}

/* Spinning border ring */
.page-header-visual::before {
  content: ''; position: absolute;
  inset: -2px; border-radius: 22px;
  background: conic-gradient(from 0deg, transparent, var(--accent), transparent, var(--purple), transparent);
  opacity: 0.1;
  animation: spinSlow 20s linear infinite;
  z-index: -1;
}

/* ─── Illustration internals ─── */
.illus-bar {
  height: 8px; border-radius: 4px; background: var(--bg-subtle);
}
.illus-bar.accent { background: var(--accent-soft); }
.illus-bar.short { width: 40%; }
.illus-bar.med   { width: 65%; }
.illus-bar.long  { width: 85%; }
.illus-bar.full  { width: 100%; }

.illus-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-subtle); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.illus-dot.accent { background: var(--accent-soft); border-color: rgba(232,70,30,0.2); }
.illus-dot svg { width: 14px; height: 14px; color: var(--text-dim); }
.illus-dot.accent svg { color: var(--accent); }

.illus-card {
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.illus-metric {
  font-size: 20px; font-weight: 700; color: var(--accent);
  letter-spacing: -0.02em;
}
.illus-metric-label {
  font-size: 11px; color: var(--text-dim); margin-top: 2px;
}
.illus-chat-bubble {
  max-width: 85%; padding: 12px 16px;
  border-radius: 14px; font-size: 13px; line-height: 1.5;
}
.illus-chat-bubble.sent {
  background: var(--accent); color: #fff;
  margin-left: auto; border-bottom-right-radius: 4px;
}
.illus-chat-bubble.received {
  background: var(--bg-subtle); color: var(--text-muted);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

@media (max-width: 960px) {
  .page-header .container { flex-direction: column; gap: 40px; }
  .page-header-visual { width: 100%; max-width: 420px; }
}
@media (max-width: 720px) {
  .page-header-visual { display: none; }
}

/* ═══════════════════════════════════════════════════
   DETAIL SECTIONS (service pages)
   ═══════════════════════════════════════════════════ */

.detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: start;
}
.detail-grid h2 {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 16px; line-height: 1.2;
}
.detail-grid p { font-size: 16px; color: var(--text-muted); line-height: 1.75; }

.detail-list { list-style: none; margin-top: 28px; }
.detail-list li {
  padding: 14px 0; border-bottom: 1px solid var(--border);
  font-size: 15px; display: flex; align-items: center; gap: 12px;
  transition: transform 0.25s var(--ease), padding-left 0.25s;
}
.detail-list li:hover {
  transform: translateX(6px);
  padding-left: 4px;
}
.detail-list li:last-child { border-bottom: none; }
.detail-list .check {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-spring), background 0.3s;
}
.detail-list li:hover .check {
  transform: scale(1.15);
  background: rgba(232,70,30,0.2);
}
.detail-list .check svg { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */

footer {
  position: relative; z-index: 1;
  padding: 40px 0;
  border-top: 1px solid var(--border);
}
footer .container {
  display: flex; align-items: center; justify-content: space-between;
}
footer p { font-size: 13px; color: var(--text-muted); }
.footer-links { display: flex; gap: 24px; }
.footer-links a {
  font-size: 13px; color: var(--text-muted);
  transition: color 0.25s;
}
.footer-links a:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .hero .container { flex-direction: column; gap: 48px; }
  .hero-inner { max-width: 100%; }
  .hero-video { width: 100%; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .approach-grid { grid-template-columns: 1fr; gap: 40px; }
  .detail-grid   { grid-template-columns: 1fr; gap: 48px; }
  .contact-form-wrap { grid-template-columns: 1fr; gap: 48px; }
  .dropdown-preview { display: none; }
  .nav-dropdown { width: 340px; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .services-grid { grid-template-columns: 1fr; }
  section { padding: 80px 0; }
  .hero { padding: 100px 0 60px; min-height: auto; }
  .page-header { padding: 120px 0 60px; }
  .contact-box { padding: 48px 24px; }

  .nav-links {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(8,8,13,0.97);
    backdrop-filter: blur(24px);
    flex-direction: column; justify-content: center; align-items: center;
    gap: 8px; padding: 24px;
    opacity: 0; visibility: hidden;
    transition: all 0.4s var(--ease-out);
  }
  .nav-links.open { opacity: 1; visibility: visible; }
  .nav-links .nav-link,
  .nav-links .nav-cta { font-size: 20px; padding: 12px 24px; }
  .nav-dropdown-wrap .nav-dropdown {
    position: static; transform: none;
    width: 100%; margin-top: 8px;
    box-shadow: none; border: none;
    background: var(--bg-subtle); border-radius: 12px;
  }
  .nav-dropdown-wrap:hover .nav-dropdown,
  .nav-dropdown-wrap.open .nav-dropdown { transform: none; }
  .nav-toggle { display: block; }
  .approach-item::before { display: none; }
}