/* ============ Unfavour enhancements: theming, section colors, motion, 3D ============ */

/* ---- Section accent palette ---- */
:root {
  --c-cyan: oklch(0.58 0.12 220);
  --c-cyan-soft: oklch(0.94 0.04 220);
  --c-emerald: oklch(0.55 0.13 165);
  --c-emerald-soft: oklch(0.94 0.05 165);
  --c-amber: oklch(0.62 0.13 70);
  --c-amber-soft: oklch(0.96 0.05 85);
  --c-blue: oklch(0.55 0.17 262);
  --c-blue-soft: oklch(0.94 0.04 262);
  --c-rose: oklch(0.6 0.19 15);
  --c-rose-soft: oklch(0.95 0.04 15);
  --glass: oklch(1 0 0 / .78);
  --glass-border: oklch(1 0 0 / .9);
  --grid-line: oklch(0.54 0.22 293 / .05);
}

/* ---- Dark theme tokens ---- */
:root[data-theme="dark"] {
  --bg: oklch(0.17 0.025 295);
  --surface: oklch(0.215 0.028 293);
  --fg: oklch(0.94 0.015 300);
  --muted: oklch(0.72 0.02 295);
  --border: oklch(0.31 0.03 293);
  --accent: oklch(0.68 0.19 296);
  --accent-strong: oklch(0.76 0.16 300);
  --accent-soft: oklch(0.27 0.05 293);
  --ink-section: oklch(0.13 0.02 290);
  --shadow-1: 0 1px 2px oklch(0 0 0 / .3), 0 4px 16px oklch(0 0 0 / .3);
  --shadow-2: 0 2px 4px oklch(0 0 0 / .35), 0 12px 40px oklch(0 0 0 / .45);
  --c-cyan: oklch(0.75 0.12 215);
  --c-cyan-soft: oklch(0.28 0.05 220);
  --c-emerald: oklch(0.76 0.14 163);
  --c-emerald-soft: oklch(0.27 0.05 165);
  --c-amber: oklch(0.8 0.13 80);
  --c-amber-soft: oklch(0.29 0.05 80);
  --c-blue: oklch(0.72 0.13 260);
  --c-blue-soft: oklch(0.27 0.05 262);
  --c-rose: oklch(0.74 0.15 15);
  --c-rose-soft: oklch(0.28 0.05 15);
  --glass: oklch(0.24 0.03 293 / .72);
  --glass-border: oklch(0.45 0.04 295 / .5);
  --grid-line: oklch(0.7 0.15 293 / .07);
}
/* Mobile: never let overflowing content widen the layout viewport */
html, body { overflow-x: clip; }
.why, .site-footer, .section { overflow-x: clip; }
@media (max-width: 899px) {
  .nav-row { gap: 12px; }
  .brand-name { font-size: 0.95rem; letter-spacing: 0.14em; }
  .menu-toggle { padding: 8px 12px; }
  .gc-metric .kpi, .gc-metric .kpi-label { display: block; }
  .hero h1 { overflow-wrap: anywhere; }
}

/* Roomier vertical rhythm between sections */
:root { --section-y: clamp(88px, 10vw, 168px); }
.hero { padding-block: clamp(64px, 8vw, 128px) clamp(64px, 8vw, 120px); }
.section-head { margin-bottom: clamp(40px, 5vw, 72px); }

:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Re-point hardcoded surfaces at tokens so both themes work */
.site-header { background: color-mix(in oklab, var(--bg) 84%, transparent); }
.glass-card { background: var(--glass); border-color: var(--glass-border); }
.hero::before {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
}
.only-dark { display: none; }
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: block; }

:root[data-theme="dark"] .hero-bg::before, :root[data-theme="dark"] .hero-bg::after { opacity: 0.4; }
:root[data-theme="dark"] .shift-card.after {
  background: linear-gradient(180deg, oklch(0.25 0.045 293), oklch(0.2 0.035 300));
  border-color: oklch(0.42 0.08 296);
}
:root[data-theme="dark"] .why { background: linear-gradient(180deg, var(--bg) 0%, oklch(0.2 0.04 298) 100%); }
:root[data-theme="dark"] .pill { background: oklch(0.3 0.06 160); color: oklch(0.82 0.11 160); }
:root[data-theme="dark"] .trust { background: oklch(0.19 0.026 294); }
:root[data-theme="dark"] .trust-names li { color: oklch(0.7 0.02 295); }
:root[data-theme="dark"] .trust-names li img { background: #fff; padding: 6px 12px; border-radius: 10px; opacity: 0.92; }
:root[data-theme="dark"] .trust-names li img.sq { padding: 6px; }
:root[data-theme="dark"] .service-icon { background: linear-gradient(135deg, var(--accent-soft), oklch(0.3 0.06 330)); }
:root[data-theme="dark"] .wa-nav { background: rgb(37 211 102 / .14); border-color: rgb(37 211 102 / .4); color: #4be381; }
:root[data-theme="dark"] .field input, :root[data-theme="dark"] .field textarea { background: oklch(0.18 0.025 293); }

/* ---- Theme toggle (sun ⇄ moon) ---- */
.theme-toggle {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 1px solid var(--border); background: var(--surface); color: var(--fg);
  display: grid; place-items: center; cursor: pointer; overflow: hidden;
  transition: border-color 200ms, transform 200ms ease-out, box-shadow 200ms;
}
.theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.theme-toggle svg { grid-area: 1 / 1; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 250ms ease-out; }
.icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
:root[data-theme="dark"] .icon-moon { opacity: 1; transform: none; }
:root[data-theme="dark"] .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }

/* ---- Per-section color accents ---- */
#services .eyebrow { color: var(--c-cyan); background: var(--c-cyan-soft); }
#approach .eyebrow { color: var(--c-amber); background: var(--c-amber-soft); }
#why .eyebrow { color: var(--c-emerald); background: var(--c-emerald-soft); }
#faq .eyebrow { color: var(--c-blue); background: var(--c-blue-soft); }
#contact .eyebrow { color: var(--fuchsia); background: var(--c-rose-soft); }

.service { --sa: var(--accent-strong); --sa-soft: var(--accent-soft); }
.bento .service:nth-child(2) { --sa: var(--c-cyan); --sa-soft: var(--c-cyan-soft); }
.bento .service:nth-child(3) { --sa: var(--c-amber); --sa-soft: var(--c-amber-soft); }
.bento .service:nth-child(4) { --sa: var(--fuchsia); --sa-soft: var(--c-rose-soft); }
.bento .service:nth-child(5) { --sa: var(--c-emerald); --sa-soft: var(--c-emerald-soft); }
.bento .service:nth-child(6) { --sa: var(--c-blue); --sa-soft: var(--c-blue-soft); }
.service .service-icon { background: var(--sa-soft); color: var(--sa); }
.service .tagline { color: var(--sa); }

.steps .step:nth-child(2) .step-num { background: linear-gradient(115deg, var(--c-cyan), var(--c-blue)); }
.steps .step:nth-child(3) .step-num { background: linear-gradient(115deg, var(--c-amber), var(--pink)); }

.stats .stat:nth-child(2) b { background: linear-gradient(115deg, var(--c-cyan), var(--c-blue)); -webkit-background-clip: text; background-clip: text; }
.stats .stat:nth-child(3) b { background: linear-gradient(115deg, var(--c-amber), var(--c-rose)); -webkit-background-clip: text; background-clip: text; }
.stats .stat:nth-child(4) b { background: linear-gradient(115deg, var(--c-emerald), var(--c-cyan)); -webkit-background-clip: text; background-clip: text; }

.shift-card.before li svg { color: var(--c-rose); }
.shift-card.before { background: linear-gradient(180deg, var(--surface), var(--c-rose-soft)); }
:root[data-theme="dark"] .shift-card.before { background: linear-gradient(180deg, var(--surface), oklch(0.22 0.04 15)); }

/* Soft color washes behind sections */
.services { position: relative; overflow: clip; }
.services::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 44% at 8% 12%, var(--c-cyan-soft) 0%, transparent 100%),
    radial-gradient(46% 40% at 94% 88%, var(--c-rose-soft) 0%, transparent 100%);
  opacity: 0.55;
}
.services .container { position: relative; }
.contact { position: relative; overflow: clip; }
.contact::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 50% at 92% 8%, var(--accent-soft) 0%, transparent 100%);
  opacity: 0.7;
}
.contact .container { position: relative; }

/* ---- Word-by-word heading reveal on scroll ---- */
/* Section heads must not double-fade, or the word animation plays hidden underneath */
.section-head.reveal, .contact-grid > .reveal { opacity: 1; transform: none; }
.split .w {
  display: inline-block; opacity: 0; filter: blur(6px);
  transform: translateY(0.9em) rotate(2.5deg);
  transition: opacity 600ms ease-out, transform 650ms cubic-bezier(0.22, 1, 0.36, 1), filter 600ms ease-out;
  transition-delay: calc(var(--wi) * 80ms);
}
.split.in .w { opacity: 1; transform: none; filter: none; }

/* ---- 3D gradient orbs (ported from 21st.dev Siri Orb, pure CSS) ---- */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 31% 26%, oklch(1 0 0 / .85) 0%, oklch(1 0 0 / 0) 34%),
    conic-gradient(from var(--spin),
      oklch(0.72 0.18 296), oklch(0.74 0.2 328), oklch(0.78 0.12 220),
      oklch(0.82 0.12 80), oklch(0.74 0.2 15), oklch(0.72 0.18 296));
  box-shadow:
    inset -22px -18px 44px oklch(0.3 0.08 300 / .45),
    0 18px 50px oklch(0.6 0.2 310 / .3);
  animation: orb-spin 16s linear infinite, orb-drift 9s ease-in-out infinite alternate;
  opacity: 0.8;
}
@keyframes orb-spin { to { --spin: 360deg; } }
@keyframes orb-drift { from { translate: 0 0; } to { translate: 0 -18px; } }
.orb-a { width: 110px; height: 110px; top: 12%; right: 40%; }
.orb-b { width: 150px; height: 150px; top: -50px; right: -34px; opacity: 0.6; }
.orb-c { width: 120px; height: 120px; bottom: -30px; left: -26px; opacity: 0.55; }
:root[data-theme="dark"] .orb { opacity: 0.9; box-shadow: inset -22px -18px 44px oklch(0 0 0 / .5), 0 18px 60px oklch(0.65 0.22 310 / .45); }
@media (max-width: 900px) { .orb-a { display: none; } }

/* ---- Interactive globe card (ported from 21st.dev Interactive Globe, pure canvas) ---- */
.why-right { display: grid; gap: 20px; align-content: start; }
.globe-wrap { margin-top: clamp(40px, 5vw, 64px); }
.globe-card {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: radial-gradient(120% 130% at 50% 0%, oklch(0.24 0.05 295) 0%, oklch(0.15 0.03 290) 70%);
  border: 1px solid oklch(0.35 0.05 295); box-shadow: var(--shadow-2);
}
#globe { width: 100%; height: 280px; display: block; cursor: grab; touch-action: pan-y; }
#globe:active { cursor: grabbing; }
.globe-tag {
  position: absolute; left: 16px; bottom: 14px;
  font: 600 0.78rem var(--font-display); letter-spacing: 0.07em;
  color: oklch(0.87 0.04 300); background: oklch(1 0 0 / .1);
  border: 1px solid oklch(1 0 0 / .14); padding: 6px 13px; border-radius: var(--radius-full);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
  .split .w { opacity: 1; transform: none; transition: none; }
  .orb { animation: none; }
}