/* =============================================================================
   FALI LABS — MAIN STYLES
   @import tokens.css before this file.
   ============================================================================= */

/* =============================================================================
   1. RESET & BASE
   ============================================================================= */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fali-font-body);
  font-size: var(--fali-text-base);
  font-weight: 400;
  line-height: var(--fali-leading-normal);
  color: var(--fali-color-text-body);
  background-color: var(--fali-color-bg-page);
  overflow-x: hidden;
  min-height: 100vh;
  max-width: 100%;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--fali-color-text-link); text-decoration: none; transition: color var(--fali-transition-base); }
a:hover { color: var(--fali-color-text-link-hover); }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fali-font-display);
  color: var(--fali-color-text-heading);
  line-height: var(--fali-leading-tight);
  letter-spacing: var(--fali-tracking-tight);
  font-weight: 700;
}

h1 { font-size: clamp(var(--fali-text-4xl), 6vw, var(--fali-text-7xl)); font-weight: 800; letter-spacing: var(--fali-tracking-tightest); }
h2 { font-size: clamp(var(--fali-text-3xl), 4vw, var(--fali-text-5xl)); font-weight: 700; }
h3 { font-size: clamp(var(--fali-text-xl), 2.5vw, var(--fali-text-3xl)); font-weight: 600; }
h4 { font-size: var(--fali-text-xl); font-weight: 600; }
h5 { font-size: var(--fali-text-lg); font-weight: 600; }

p { line-height: var(--fali-leading-normal); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }


/* =============================================================================
   2. LAYOUT UTILITIES
   ============================================================================= */

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--fali-space-6);
}

.container--narrow { max-width: 900px; }
.container--wide   { max-width: 1440px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fali-space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fali-space-8); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fali-space-6); }

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.gap-2  { gap: var(--fali-space-2); }
.gap-3  { gap: var(--fali-space-3); }
.gap-4  { gap: var(--fali-space-4); }
.gap-6  { gap: var(--fali-space-6); }
.gap-8  { gap: var(--fali-space-8); }

section { position: relative; }


/* =============================================================================
   3. BACKGROUND EFFECTS — Stars, Orbs, Grid
   ============================================================================= */

#starfield {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: var(--fali-z-below);
}

.bg-orbs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  will-change: transform;
}

.bg-orb--blue {
  width: 800px; height: 800px;
  background: radial-gradient(ellipse, hsla(212, 100%, 54%, 0.13) 0%, transparent 65%);
  top: -250px; right: -150px;
  animation: orb-drift-1 34s ease-in-out infinite;
}

.bg-orb--violet {
  width: 650px; height: 650px;
  background: radial-gradient(ellipse, hsla(260, 68%, 58%, 0.11) 0%, transparent 65%);
  bottom: -200px; left: -130px;
  animation: orb-drift-2 42s ease-in-out infinite;
}

.bg-orb--cyan {
  width: 450px; height: 450px;
  background: radial-gradient(ellipse, hsla(187, 88%, 53%, 0.07) 0%, transparent 65%);
  top: 35%; left: 45%;
  animation: orb-drift-3 28s ease-in-out infinite;
}

@keyframes orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%       { transform: translate(50px, -60px) scale(1.06); }
  50%       { transform: translate(-30px, 40px) scale(0.95); }
  75%       { transform: translate(60px, 30px) scale(1.03); }
}
@keyframes orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  20%       { transform: translate(-40px, -50px) scale(1.04); }
  55%       { transform: translate(50px, 35px) scale(0.97); }
  80%       { transform: translate(-25px, 55px) scale(1.02); }
}
@keyframes orb-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -40px) scale(1.08); }
  66%       { transform: translate(-50px, 20px) scale(0.94); }
}

.hero__grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, hsla(212, 100%, 60%, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(212, 100%, 60%, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, black 30%, transparent 80%);
  pointer-events: none;
}


/* =============================================================================
   4. NAVIGATION
   ============================================================================= */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--fali-z-nav);
  background: var(--fali-color-nav-bg);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--fali-color-nav-border);
  transition: background var(--fali-transition-base), border-color var(--fali-transition-base), box-shadow var(--fali-transition-base);
}

.nav.is-scrolled {
  background: var(--fali-color-nav-bg-scrolled);
  border-bottom-color: var(--fali-color-border);
  box-shadow: 0 4px 24px hsla(234, 30%, 0%, 0.50);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  padding: 0 var(--fali-space-6);
  max-width: 1280px;
  margin: 0 auto;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--fali-space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.nav__logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--fali-radius-md);
  background: var(--fali-gradient-brand);
  box-shadow: 0 0 18px hsla(212, 100%, 54%, 0.35);
  flex-shrink: 0;
}

.nav__logo-icon svg { width: 22px; height: 22px; }

.nav__logo-text {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-xl);
  font-weight: 800;
  color: var(--fali-color-text-heading);
  letter-spacing: var(--fali-tracking-snug);
}

.nav__logo-text span {
  background: var(--fali-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--fali-space-1);
}

.nav__link {
  padding: var(--fali-space-2) var(--fali-space-4);
  font-size: var(--fali-text-sm);
  font-weight: 500;
  color: var(--fali-color-nav-link);
  border-radius: var(--fali-radius-md);
  transition: color var(--fali-transition-base), background var(--fali-transition-base);
  text-decoration: none;
  letter-spacing: var(--fali-tracking-snug);
}

.nav__link:hover {
  color: var(--fali-color-nav-link-hover);
  background: hsla(234, 40%, 100%, 0.05);
}

.nav__link.is-active { color: var(--fali-color-nav-link-active); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--fali-space-3);
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--fali-space-2);
  border-radius: var(--fali-radius-sm);
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--fali-palette-space-200);
  border-radius: 2px;
  transition: transform var(--fali-transition-base), opacity var(--fali-transition-base);
}

.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* =============================================================================
   5. BUTTONS
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fali-space-2);
  padding: 0.7rem 1.6rem;
  border-radius: var(--fali-radius-full);
  font-family: var(--fali-font-body);
  font-size: var(--fali-text-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--fali-tracking-snug);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--fali-transition-base), box-shadow var(--fali-transition-base), background var(--fali-transition-base), border-color var(--fali-transition-base), color var(--fali-transition-base);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primary */
.btn--primary {
  background: var(--fali-gradient-brand);
  color: var(--fali-color-btn-primary-text);
  box-shadow: var(--fali-color-btn-primary-shadow);
}
.btn--primary:hover {
  box-shadow: var(--fali-color-btn-primary-shadow-hover);
  color: var(--fali-color-btn-primary-text);
}

/* Secondary */
.btn--secondary {
  background: var(--fali-color-btn-secondary-bg);
  color: var(--fali-color-btn-secondary-text);
  border-color: var(--fali-color-btn-secondary-border);
}
.btn--secondary:hover {
  background: var(--fali-color-btn-secondary-bg-hover);
  color: var(--fali-color-btn-secondary-text-hover);
  border-color: var(--fali-color-btn-secondary-border-hover);
}

/* Ghost */
.btn--ghost {
  color: var(--fali-color-btn-ghost-text);
  padding: 0.7rem 1.2rem;
}
.btn--ghost:hover { color: var(--fali-color-btn-ghost-text-hover); background: hsla(234, 40%, 100%, 0.05); }

/* Sizes */
.btn--sm { padding: 0.5rem 1.1rem; font-size: var(--fali-text-xs); }
.btn--lg { padding: 0.9rem 2.2rem; font-size: var(--fali-text-base); }
.btn--xl { padding: 1.1rem 2.6rem; font-size: var(--fali-text-lg); }


/* =============================================================================
   6. BADGES
   ============================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fali-space-1);
  padding: 0.3rem 0.85rem;
  border-radius: var(--fali-radius-full);
  font-size: var(--fali-text-xs);
  font-weight: 600;
  letter-spacing: var(--fali-tracking-wide);
  text-transform: uppercase;
  border: 1px solid;
}

.badge--blue {
  background: var(--fali-color-badge-blue-bg);
  color: var(--fali-color-badge-blue-text);
  border-color: var(--fali-color-badge-blue-border);
}
.badge--violet {
  background: var(--fali-color-badge-violet-bg);
  color: var(--fali-color-badge-violet-text);
  border-color: var(--fali-color-badge-violet-border);
}
.badge--cyan {
  background: var(--fali-color-badge-cyan-bg);
  color: var(--fali-color-badge-cyan-text);
  border-color: var(--fali-color-badge-cyan-border);
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--fali-space-2);
  padding: 0.4rem 1rem;
  background: var(--fali-color-badge-blue-bg);
  color: var(--fali-color-badge-blue-text);
  border: 1px solid var(--fali-color-badge-blue-border);
  border-radius: var(--fali-radius-full);
  font-size: var(--fali-text-xs);
  font-weight: 600;
  letter-spacing: var(--fali-tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--fali-space-6);
}

.section-label::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fali-palette-blue-400);
  box-shadow: 0 0 8px var(--fali-palette-blue-400);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}


/* =============================================================================
   7. CARDS
   ============================================================================= */

.card {
  position: relative;
  background: var(--fali-color-bg-card);
  border: 1px solid var(--fali-color-border);
  border-radius: var(--fali-radius-xl);
  padding: var(--fali-space-8);
  transition:
    border-color var(--fali-transition-base),
    box-shadow var(--fali-transition-base),
    transform var(--fali-transition-base),
    background var(--fali-transition-base);
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fali-gradient-card-border);
  opacity: 0;
  transition: opacity var(--fali-transition-slow);
  pointer-events: none;
}

.card:hover {
  border-color: hsla(212, 100%, 54%, 0.28);
  box-shadow: var(--fali-shadow-card-hover);
  transform: translateY(-4px);
  background: var(--fali-color-bg-card-hover);
}

.card:hover::before { opacity: 0.06; }

.card--flat { border-radius: var(--fali-radius-lg); padding: var(--fali-space-6); }

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--fali-radius-lg);
  margin-bottom: var(--fali-space-6);
  flex-shrink: 0;
}

.card__icon--blue   { background: hsla(212, 100%, 54%, 0.15); color: var(--fali-palette-blue-400); }
.card__icon--violet { background: hsla(260, 68%, 58%, 0.15); color: var(--fali-palette-violet-400); }
.card__icon--cyan   { background: hsla(187, 88%, 53%, 0.12); color: var(--fali-palette-cyan-400); }

.card__icon svg { width: 26px; height: 26px; stroke-width: 1.6; }

.card__title {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-xl);
  font-weight: 700;
  color: var(--fali-color-text-heading);
  margin-bottom: var(--fali-space-3);
  letter-spacing: var(--fali-tracking-snug);
}

.card__body {
  font-size: var(--fali-text-sm);
  color: var(--fali-color-text-muted);
  line-height: var(--fali-leading-normal);
  margin-bottom: var(--fali-space-6);
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fali-space-2);
  margin-bottom: var(--fali-space-6);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--fali-space-2);
  font-size: var(--fali-text-sm);
  font-weight: 600;
  color: var(--fali-color-text-accent);
  transition: gap var(--fali-transition-base), color var(--fali-transition-base);
}
.card__link:hover { gap: var(--fali-space-3); color: var(--fali-palette-cyan-400); }
.card__link svg   { width: 16px; height: 16px; transition: transform var(--fali-transition-base); }
.card__link:hover svg { transform: translateX(3px); }


/* =============================================================================
   8. FORMS
   ============================================================================= */

.form-group { display: flex; flex-direction: column; gap: var(--fali-space-2); }

.form-label {
  font-size: var(--fali-text-sm);
  font-weight: 500;
  color: var(--fali-color-field-label);
  letter-spacing: var(--fali-tracking-snug);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--fali-color-field-bg);
  border: 1px solid var(--fali-color-field-border);
  border-radius: var(--fali-radius-md);
  color: var(--fali-color-field-text);
  font-family: var(--fali-font-body);
  font-size: var(--fali-text-base);
  transition: border-color var(--fali-transition-base), box-shadow var(--fali-transition-base), background var(--fali-transition-base);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--fali-color-field-placeholder); }

.form-input:hover,
.form-textarea:hover,
.form-select:hover { border-color: var(--fali-color-field-border-hover); }

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  background: var(--fali-color-field-bg-focus);
  border-color: var(--fali-color-field-border-focus);
  box-shadow: 0 0 0 3px hsla(212, 100%, 54%, 0.14);
}

.form-textarea { resize: vertical; min-height: 130px; line-height: var(--fali-leading-normal); }

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23556099'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-select option { background: var(--fali-palette-space-900); color: var(--fali-palette-neutral-0); }


/* =============================================================================
   9. SECTION LAYOUT
   ============================================================================= */

.section {
  padding: var(--fali-space-24) 0;
  position: relative;
  z-index: var(--fali-z-raised);
}

.section--sm  { padding: var(--fali-space-16) 0; }
.section--lg  { padding: var(--fali-space-32) 0; }
.section--alt { background: var(--fali-color-bg-section-alt); }

.section__header {
  text-align: center;
  margin-bottom: var(--fali-space-16);
}

.section__headline {
  font-family: var(--fali-font-display);
  font-weight: 800;
  color: var(--fali-color-text-heading);
  margin-bottom: var(--fali-space-5);
  letter-spacing: var(--fali-tracking-tightest);
}

.section__sub {
  font-size: var(--fali-text-lg);
  color: var(--fali-color-text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: var(--fali-leading-normal);
}

.gradient-text {
  background: var(--fali-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text--alt {
  background: var(--fali-gradient-text-alt);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }


/* =============================================================================
   10. HERO
   ============================================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(68px + var(--fali-space-20)) var(--fali-space-6) var(--fali-space-20);
  overflow: hidden;
  z-index: var(--fali-z-raised);
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 240px;
  background: linear-gradient(to bottom, transparent, var(--fali-palette-space-950));
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fali-space-2);
  padding: 0.4rem 1.1rem;
  background: hsla(212, 100%, 54%, 0.10);
  border: 1px solid hsla(212, 100%, 54%, 0.22);
  border-radius: var(--fali-radius-full);
  font-size: var(--fali-text-xs);
  font-weight: 600;
  letter-spacing: var(--fali-tracking-wider);
  text-transform: uppercase;
  color: var(--fali-palette-blue-300);
  margin-bottom: var(--fali-space-8);
  animation: badge-enter 0.6s ease both;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
}

.hero__badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fali-palette-cyan-400);
  box-shadow: 0 0 10px var(--fali-palette-cyan-400);
  animation: pulse-dot 2s ease-in-out infinite;
}

.hero__headline {
  font-family: var(--fali-font-display);
  font-size: clamp(var(--fali-text-4xl), 8vw, var(--fali-text-8xl));
  font-weight: 800;
  line-height: var(--fali-leading-tight);
  letter-spacing: var(--fali-tracking-tightest);
  color: var(--fali-color-text-heading);
  margin-bottom: var(--fali-space-8);
  animation: hero-enter 0.8s ease 0.15s both;
  word-break: break-word;
  overflow-wrap: break-word;
}

.hero__sub {
  font-size: clamp(var(--fali-text-base), 2vw, var(--fali-text-xl));
  color: var(--fali-color-text-muted);
  max-width: 580px;
  margin: 0 auto var(--fali-space-10);
  line-height: var(--fali-leading-normal);
  animation: hero-enter 0.8s ease 0.3s both;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fali-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--fali-space-16);
  animation: hero-enter 0.8s ease 0.45s both;
}

.hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fali-space-12);
  flex-wrap: wrap;
  animation: hero-enter 0.8s ease 0.6s both;
}

.hero__stat { text-align: center; }

.hero__stat-value {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-3xl);
  font-weight: 800;
  color: var(--fali-color-text-heading);
  letter-spacing: var(--fali-tracking-tight);
  line-height: 1;
  margin-bottom: var(--fali-space-1);
}

.hero__stat-value span { background: var(--fali-gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.hero__stat-label {
  font-size: var(--fali-text-xs);
  color: var(--fali-color-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--fali-tracking-wider);
  font-weight: 500;
}

.hero__stat-divider {
  width: 1px;
  height: 40px;
  background: var(--fali-color-border-strong);
}

.hero__scroll {
  position: absolute;
  bottom: var(--fali-space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fali-space-2);
  z-index: 2;
  animation: hero-enter 1s ease 1s both;
}

.hero__scroll-text {
  font-size: var(--fali-text-xs);
  color: var(--fali-color-text-subtle);
  letter-spacing: var(--fali-tracking-wider);
  text-transform: uppercase;
}

.hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--fali-color-border-strong), transparent);
  animation: scroll-line 2s ease-in-out infinite;
}

@keyframes scroll-line {
  0%   { opacity: 1; transform: scaleY(1) translateY(0); }
  100% { opacity: 0; transform: scaleY(0.4) translateY(20px); }
}

@keyframes badge-enter {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* =============================================================================
   11. SERVICES SECTION (Home preview)
   ============================================================================= */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fali-space-6);
}


/* =============================================================================
   12. PROCESS SECTION
   ============================================================================= */

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fali-space-6);
  position: relative;
}

.process-steps::before {
  content: '';
  position: absolute;
  top: 36px; left: 16%;
  width: 68%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--fali-color-border-strong), var(--fali-palette-blue-500), var(--fali-color-border-strong), transparent);
  z-index: 0;
}

.process-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--fali-space-8) var(--fali-space-6);
}

.process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--fali-gradient-brand);
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-2xl);
  font-weight: 800;
  color: white;
  margin: 0 auto var(--fali-space-6);
  box-shadow: var(--fali-shadow-glow-blue);
  position: relative;
}

.process-step__num::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--fali-gradient-brand);
  opacity: 0.25;
  filter: blur(8px);
  z-index: -1;
}

.process-step__title {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-xl);
  font-weight: 700;
  color: var(--fali-color-text-heading);
  margin-bottom: var(--fali-space-3);
}

.process-step__body {
  font-size: var(--fali-text-sm);
  color: var(--fali-color-text-muted);
  line-height: var(--fali-leading-normal);
}


/* =============================================================================
   13. TESTIMONIALS
   ============================================================================= */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fali-space-6);
}

.testimonial-card {
  padding: var(--fali-space-8);
  background: var(--fali-color-bg-card);
  border: 1px solid var(--fali-color-border);
  border-radius: var(--fali-radius-xl);
  position: relative;
  overflow: hidden;
  transition: border-color var(--fali-transition-base), box-shadow var(--fali-transition-base);
}

.testimonial-card:hover {
  border-color: hsla(212, 100%, 54%, 0.22);
  box-shadow: var(--fali-shadow-glow-blue);
}

.testimonial-card__quote-mark {
  font-family: var(--fali-font-display);
  font-size: 5rem;
  line-height: 0.6;
  font-weight: 800;
  background: var(--fali-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--fali-space-4);
  display: block;
}

.testimonial-card__text {
  font-size: var(--fali-text-base);
  color: var(--fali-color-text-body);
  line-height: var(--fali-leading-normal);
  margin-bottom: var(--fali-space-8);
  font-style: italic;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--fali-space-3);
}

.testimonial-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--fali-gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fali-font-display);
  font-weight: 700;
  color: white;
  font-size: var(--fali-text-base);
  flex-shrink: 0;
}

.testimonial-card__name {
  font-weight: 600;
  color: var(--fali-color-text-heading);
  font-size: var(--fali-text-sm);
  margin-bottom: 2px;
}

.testimonial-card__role {
  font-size: var(--fali-text-xs);
  color: var(--fali-color-text-subtle);
}


/* =============================================================================
   14. BLOG CARDS
   ============================================================================= */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fali-space-6);
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--fali-color-bg-card);
  border: 1px solid var(--fali-color-border);
  border-radius: var(--fali-radius-xl);
  overflow: hidden;
  transition: border-color var(--fali-transition-base), box-shadow var(--fali-transition-base), transform var(--fali-transition-base);
  text-decoration: none;
}

.blog-card:hover {
  border-color: hsla(212, 100%, 54%, 0.24);
  box-shadow: var(--fali-shadow-card-hover);
  transform: translateY(-4px);
}

.blog-card__image {
  height: 190px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.blog-card__image-bg {
  width: 100%; height: 100%;
  background: var(--fali-gradient-brand);
  opacity: 0.18;
  transition: opacity var(--fali-transition-slow);
}

.blog-card:hover .blog-card__image-bg { opacity: 0.28; }

.blog-card__image-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, hsla(212, 100%, 60%, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(212, 100%, 60%, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}

.blog-card__cat {
  position: absolute;
  top: var(--fali-space-4);
  left: var(--fali-space-4);
}

.blog-card__body {
  padding: var(--fali-space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__title {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-lg);
  font-weight: 700;
  color: var(--fali-color-text-heading);
  line-height: var(--fali-leading-snug);
  margin-bottom: var(--fali-space-3);
  letter-spacing: var(--fali-tracking-snug);
}

.blog-card__excerpt {
  font-size: var(--fali-text-sm);
  color: var(--fali-color-text-muted);
  line-height: var(--fali-leading-normal);
  margin-bottom: var(--fali-space-6);
  flex: 1;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fali-text-xs);
  color: var(--fali-color-text-subtle);
  border-top: 1px solid var(--fali-color-border);
  padding-top: var(--fali-space-4);
}

.blog-card__meta-date { display: flex; align-items: center; gap: var(--fali-space-2); }
.blog-card__read { color: var(--fali-color-text-accent); font-weight: 600; }

.blog-card--featured {
  grid-column: span 3;
  flex-direction: row;
}

.blog-card--featured .blog-card__image {
  width: 42%;
  height: auto;
  flex-shrink: 0;
}

.blog-card--featured .blog-card__body { padding: var(--fali-space-10); }

.blog-card--featured .blog-card__title {
  font-size: var(--fali-text-2xl);
  margin-bottom: var(--fali-space-4);
}


/* =============================================================================
   15. CTA SECTION
   ============================================================================= */

.cta-section {
  position: relative;
  padding: var(--fali-space-24) 0;
  overflow: hidden;
  z-index: var(--fali-z-raised);
}

.cta-section__inner {
  position: relative;
  background: linear-gradient(135deg, hsla(212, 100%, 54%, 0.10), hsla(260, 68%, 58%, 0.08));
  border: 1px solid hsla(212, 100%, 54%, 0.20);
  border-radius: var(--fali-radius-2xl);
  padding: var(--fali-space-20) var(--fali-space-12);
  text-align: center;
  overflow: hidden;
}

.cta-section__inner::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--fali-gradient-brand);
  border-radius: var(--fali-radius-2xl) var(--fali-radius-2xl) 0 0;
}

.cta-section__headline {
  font-family: var(--fali-font-display);
  font-size: clamp(var(--fali-text-3xl), 5vw, var(--fali-text-5xl));
  font-weight: 800;
  color: var(--fali-color-text-heading);
  letter-spacing: var(--fali-tracking-tightest);
  margin-bottom: var(--fali-space-5);
}

.cta-section__sub {
  font-size: var(--fali-text-lg);
  color: var(--fali-color-text-muted);
  max-width: 520px;
  margin: 0 auto var(--fali-space-10);
  line-height: var(--fali-leading-normal);
}

.cta-section__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fali-space-4);
  flex-wrap: wrap;
}


/* =============================================================================
   16. FOOTER
   ============================================================================= */

.footer {
  position: relative;
  z-index: var(--fali-z-raised);
  background: var(--fali-palette-space-950);
  border-top: 1px solid var(--fali-color-border);
  padding-top: var(--fali-space-20);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--fali-space-12);
  padding-bottom: var(--fali-space-16);
}

.footer__brand-logo { display: flex; align-items: center; gap: var(--fali-space-3); margin-bottom: var(--fali-space-5); }
.footer__brand-logo-icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--fali-radius-md);
  background: var(--fali-gradient-brand);
}
.footer__brand-logo-icon svg { width: 18px; height: 18px; }
.footer__brand-name {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-lg);
  font-weight: 800;
  color: var(--fali-color-text-heading);
}
.footer__brand-name span { background: var(--fali-gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.footer__desc {
  font-size: var(--fali-text-sm);
  color: var(--fali-color-text-muted);
  line-height: var(--fali-leading-normal);
  margin-bottom: var(--fali-space-8);
  max-width: 280px;
}

.footer__social {
  display: flex;
  gap: var(--fali-space-3);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--fali-radius-md);
  background: var(--fali-color-bg-card);
  border: 1px solid var(--fali-color-border);
  color: var(--fali-color-text-muted);
  transition: border-color var(--fali-transition-base), color var(--fali-transition-base), box-shadow var(--fali-transition-base);
}
.footer__social-link:hover {
  border-color: var(--fali-color-border-accent);
  color: var(--fali-color-text-accent);
  box-shadow: 0 0 12px hsla(212, 100%, 54%, 0.18);
}
.footer__social-link svg { width: 17px; height: 17px; }

.footer__col-title {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-sm);
  font-weight: 700;
  color: var(--fali-color-text-heading);
  letter-spacing: var(--fali-tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--fali-space-6);
}

.footer__links { display: flex; flex-direction: column; gap: var(--fali-space-3); }
.footer__link {
  font-size: var(--fali-text-sm);
  color: var(--fali-color-text-muted);
  transition: color var(--fali-transition-base);
}
.footer__link:hover { color: var(--fali-color-text-heading); }

.footer__bottom {
  border-top: 1px solid var(--fali-color-border);
  padding: var(--fali-space-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fali-space-4);
}

.footer__copy {
  font-size: var(--fali-text-xs);
  color: var(--fali-color-text-subtle);
}

.footer__legal {
  display: flex;
  gap: var(--fali-space-6);
}

.footer__legal-link {
  font-size: var(--fali-text-xs);
  color: var(--fali-color-text-subtle);
  transition: color var(--fali-transition-base);
}
.footer__legal-link:hover { color: var(--fali-color-text-muted); }


/* =============================================================================
   17. PAGE HEADER (inner pages)
   ============================================================================= */

.page-header {
  position: relative;
  padding: calc(68px + var(--fali-space-20)) var(--fali-space-6) var(--fali-space-20);
  text-align: center;
  overflow: hidden;
  z-index: var(--fali-z-raised);
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, var(--fali-palette-space-950));
  pointer-events: none;
}

.page-header__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, hsla(212, 100%, 60%, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(212, 100%, 60%, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black, transparent);
  pointer-events: none;
}

.page-header__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fali-space-2);
  font-size: var(--fali-text-sm);
  color: var(--fali-color-text-muted);
  margin-bottom: var(--fali-space-6);
}

.page-header__breadcrumb a { color: var(--fali-color-text-accent); }
.page-header__breadcrumb a:hover { color: var(--fali-color-text-link-hover); }
.page-header__breadcrumb-sep { color: var(--fali-color-text-subtle); }

.page-header__content { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }

.page-header__title {
  font-family: var(--fali-font-display);
  font-size: clamp(var(--fali-text-4xl), 6vw, var(--fali-text-7xl));
  font-weight: 800;
  color: var(--fali-color-text-heading);
  letter-spacing: var(--fali-tracking-tightest);
  margin-bottom: var(--fali-space-6);
}

.page-header__sub {
  font-size: var(--fali-text-xl);
  color: var(--fali-color-text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: var(--fali-leading-normal);
}


/* =============================================================================
   18. SERVICES ARCHIVE PAGE
   ============================================================================= */

.services-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fali-space-6);
}

.service-card-full {
  display: flex;
  flex-direction: column;
}

.service-card-full .card__body { flex: 1; }


/* =============================================================================
   19. SERVICE SINGLE PAGE
   ============================================================================= */

.service-single__hero { text-align: left; }
.service-single__hero .page-header__content { margin: 0; max-width: none; }
.service-single__hero .page-header__title { font-size: clamp(var(--fali-text-4xl), 5vw, var(--fali-text-6xl)); }

.service-overview {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--fali-space-16);
  align-items: start;
}

.service-overview__body {
  font-size: var(--fali-text-lg);
  color: var(--fali-color-text-body);
  line-height: var(--fali-leading-loose);
}

.service-overview__body p + p { margin-top: var(--fali-space-5); }

.service-overview__sidebar {
  background: var(--fali-color-bg-card);
  border: 1px solid var(--fali-color-border);
  border-radius: var(--fali-radius-xl);
  padding: var(--fali-space-8);
  position: sticky;
  top: calc(68px + var(--fali-space-8));
}

.service-overview__sidebar-title {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-lg);
  font-weight: 700;
  color: var(--fali-color-text-heading);
  margin-bottom: var(--fali-space-6);
}

.service-overview__list {
  display: flex;
  flex-direction: column;
  gap: var(--fali-space-4);
  margin-bottom: var(--fali-space-8);
}

.service-overview__list-item {
  display: flex;
  align-items: center;
  gap: var(--fali-space-3);
  font-size: var(--fali-text-sm);
  color: var(--fali-color-text-body);
}

.service-overview__list-item::before {
  content: '';
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fali-gradient-brand);
  flex-shrink: 0;
}

.service-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fali-space-6);
}

.feature-card {
  padding: var(--fali-space-7) var(--fali-space-7);
  background: var(--fali-color-bg-card);
  border: 1px solid var(--fali-color-border);
  border-radius: var(--fali-radius-xl);
  transition: border-color var(--fali-transition-base), box-shadow var(--fali-transition-base);
}

.feature-card:hover {
  border-color: hsla(212, 100%, 54%, 0.24);
  box-shadow: var(--fali-shadow-card-hover);
}

.feature-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--fali-radius-md);
  background: hsla(212, 100%, 54%, 0.12);
  color: var(--fali-palette-blue-400);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--fali-space-4);
}

.feature-card__icon svg { width: 22px; height: 22px; }

.feature-card__title {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-lg);
  font-weight: 700;
  color: var(--fali-color-text-heading);
  margin-bottom: var(--fali-space-3);
}

.feature-card__body {
  font-size: var(--fali-text-sm);
  color: var(--fali-color-text-muted);
  line-height: var(--fali-leading-normal);
}

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fali-space-5);
}

.use-case-card {
  background: linear-gradient(135deg, hsla(212, 100%, 54%, 0.08), hsla(260, 68%, 58%, 0.05));
  border: 1px solid hsla(212, 100%, 54%, 0.15);
  border-radius: var(--fali-radius-lg);
  padding: var(--fali-space-6);
  text-align: center;
  transition: border-color var(--fali-transition-base), box-shadow var(--fali-transition-base);
}

.use-case-card:hover {
  border-color: hsla(212, 100%, 54%, 0.28);
  box-shadow: 0 0 24px hsla(212, 100%, 54%, 0.10);
}

.use-case-card__title {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-base);
  font-weight: 700;
  color: var(--fali-color-text-heading);
  margin-bottom: var(--fali-space-2);
}

.use-case-card__body {
  font-size: var(--fali-text-xs);
  color: var(--fali-color-text-muted);
}


/* =============================================================================
   20. BLOG ARCHIVE
   ============================================================================= */

.blog-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fali-space-6);
}


/* =============================================================================
   21. BLOG SINGLE
   ============================================================================= */

.blog-single {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--fali-space-16);
  align-items: start;
}

.blog-single__article {
  font-size: var(--fali-text-base);
  color: var(--fali-color-text-body);
  line-height: var(--fali-leading-loose);
}

.blog-single__article h2 {
  font-size: var(--fali-text-2xl);
  margin: var(--fali-space-12) 0 var(--fali-space-5);
  color: var(--fali-color-text-heading);
}

.blog-single__article h3 {
  font-size: var(--fali-text-xl);
  margin: var(--fali-space-8) 0 var(--fali-space-4);
  color: var(--fali-color-text-heading);
}

.blog-single__article p + p { margin-top: var(--fali-space-5); }

.blog-single__article ul,
.blog-single__article ol {
  padding-left: var(--fali-space-6);
  margin: var(--fali-space-5) 0;
  display: flex; flex-direction: column; gap: var(--fali-space-2);
}

.blog-single__article ul { list-style: none; padding-left: 0; }
.blog-single__article ul li { padding-left: var(--fali-space-6); position: relative; }
.blog-single__article ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fali-gradient-brand);
}

.blog-single__article blockquote {
  border-left: 3px solid var(--fali-palette-blue-500);
  padding: var(--fali-space-5) var(--fali-space-8);
  margin: var(--fali-space-8) 0;
  background: hsla(212, 100%, 54%, 0.06);
  border-radius: 0 var(--fali-radius-lg) var(--fali-radius-lg) 0;
  font-style: italic;
  color: var(--fali-color-text-body);
}

.blog-single__article code {
  font-family: var(--fali-font-mono);
  font-size: 0.9em;
  background: hsla(234, 40%, 100%, 0.06);
  padding: 0.15em 0.45em;
  border-radius: var(--fali-radius-xs);
  color: var(--fali-palette-cyan-400);
}

.blog-single__sidebar {
  position: sticky;
  top: calc(68px + var(--fali-space-8));
  display: flex;
  flex-direction: column;
  gap: var(--fali-space-6);
}

.sidebar-widget {
  background: var(--fali-color-bg-card);
  border: 1px solid var(--fali-color-border);
  border-radius: var(--fali-radius-xl);
  padding: var(--fali-space-6);
}

.sidebar-widget__title {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-base);
  font-weight: 700;
  color: var(--fali-color-text-heading);
  margin-bottom: var(--fali-space-5);
  padding-bottom: var(--fali-space-4);
  border-bottom: 1px solid var(--fali-color-border);
}

.author-widget {
  text-align: center;
}

.author-widget__avatar {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--fali-gradient-brand);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fali-font-display);
  font-weight: 800;
  font-size: var(--fali-text-2xl);
  color: white;
  margin: 0 auto var(--fali-space-4);
  box-shadow: var(--fali-shadow-glow-blue);
}

.author-widget__name {
  font-family: var(--fali-font-display);
  font-weight: 700;
  color: var(--fali-color-text-heading);
  margin-bottom: var(--fali-space-1);
}

.author-widget__role {
  font-size: var(--fali-text-xs);
  color: var(--fali-color-text-subtle);
  margin-bottom: var(--fali-space-4);
}

.author-widget__bio {
  font-size: var(--fali-text-sm);
  color: var(--fali-color-text-muted);
  line-height: var(--fali-leading-normal);
}

.related-post {
  display: flex;
  flex-direction: column;
  gap: var(--fali-space-2);
  padding: var(--fali-space-4) 0;
  border-bottom: 1px solid var(--fali-color-border);
  text-decoration: none;
}
.related-post:last-child { border-bottom: none; }

.related-post__title {
  font-size: var(--fali-text-sm);
  font-weight: 600;
  color: var(--fali-color-text-heading);
  line-height: var(--fali-leading-snug);
  transition: color var(--fali-transition-base);
}
.related-post:hover .related-post__title { color: var(--fali-color-text-accent); }

.related-post__date {
  font-size: var(--fali-text-xs);
  color: var(--fali-color-text-subtle);
}


/* =============================================================================
   22. CONTACT PAGE
   ============================================================================= */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fali-space-16);
  align-items: start;
}

.contact-info__title {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-3xl);
  font-weight: 800;
  color: var(--fali-color-text-heading);
  letter-spacing: var(--fali-tracking-tight);
  margin-bottom: var(--fali-space-5);
}

.contact-info__body {
  font-size: var(--fali-text-lg);
  color: var(--fali-color-text-muted);
  line-height: var(--fali-leading-normal);
  margin-bottom: var(--fali-space-10);
}

.contact-info-cards {
  display: flex;
  flex-direction: column;
  gap: var(--fali-space-4);
}

.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: var(--fali-space-4);
  padding: var(--fali-space-5) var(--fali-space-6);
  background: var(--fali-color-bg-card);
  border: 1px solid var(--fali-color-border);
  border-radius: var(--fali-radius-lg);
  transition: border-color var(--fali-transition-base);
}

.contact-info-card:hover { border-color: hsla(212, 100%, 54%, 0.22); }

.contact-info-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--fali-radius-md);
  background: hsla(212, 100%, 54%, 0.12);
  color: var(--fali-palette-blue-400);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.contact-info-card__icon svg { width: 20px; height: 20px; }

.contact-info-card__label {
  font-size: var(--fali-text-xs);
  color: var(--fali-color-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--fali-tracking-wide);
  margin-bottom: var(--fali-space-1);
  font-weight: 600;
}

.contact-info-card__value {
  font-size: var(--fali-text-sm);
  font-weight: 600;
  color: var(--fali-color-text-heading);
}

.contact-form-card {
  background: var(--fali-color-bg-card);
  border: 1px solid var(--fali-color-border);
  border-radius: var(--fali-radius-2xl);
  padding: var(--fali-space-10);
}

.contact-form-card__title {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-2xl);
  font-weight: 800;
  color: var(--fali-color-text-heading);
  margin-bottom: var(--fali-space-2);
}

.contact-form-card__sub {
  font-size: var(--fali-text-sm);
  color: var(--fali-color-text-muted);
  margin-bottom: var(--fali-space-8);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--fali-space-5);
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fali-space-4);
}


/* =============================================================================
   23. ABOUT PAGE
   ============================================================================= */

.about-mission {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fali-space-16);
  align-items: center;
}

.about-mission__content h2 {
  font-family: var(--fali-font-display);
  font-size: clamp(var(--fali-text-3xl), 4vw, var(--fali-text-5xl));
  font-weight: 800;
  color: var(--fali-color-text-heading);
  letter-spacing: var(--fali-tracking-tightest);
  margin-bottom: var(--fali-space-6);
}

.about-mission__content p {
  font-size: var(--fali-text-lg);
  color: var(--fali-color-text-body);
  line-height: var(--fali-leading-loose);
  margin-bottom: var(--fali-space-5);
}

.about-visual {
  position: relative;
  height: 480px;
  background: var(--fali-color-bg-card);
  border: 1px solid var(--fali-color-border);
  border-radius: var(--fali-radius-2xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-visual__bg {
  position: absolute;
  inset: 0;
  background: var(--fali-gradient-brand);
  opacity: 0.06;
}

.about-visual__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, hsla(212, 100%, 60%, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(212, 100%, 60%, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

.about-visual__center {
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-visual__icon {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--fali-gradient-brand);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--fali-space-4);
  box-shadow: var(--fali-shadow-glow-blue);
}
.about-visual__icon svg { width: 50px; height: 50px; }

.about-visual__label {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-2xl);
  font-weight: 800;
  color: var(--fali-color-text-heading);
}

.about-visual__sub {
  font-size: var(--fali-text-sm);
  color: var(--fali-color-text-muted);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fali-space-6);
}

.team-card {
  background: var(--fali-color-bg-card);
  border: 1px solid var(--fali-color-border);
  border-radius: var(--fali-radius-xl);
  padding: var(--fali-space-8) var(--fali-space-6);
  text-align: center;
  transition: border-color var(--fali-transition-base), box-shadow var(--fali-transition-base), transform var(--fali-transition-base);
}

.team-card:hover {
  border-color: hsla(212, 100%, 54%, 0.22);
  box-shadow: var(--fali-shadow-card-hover);
  transform: translateY(-4px);
}

.team-card__avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  margin: 0 auto var(--fali-space-5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-2xl);
  font-weight: 800;
  color: white;
}

.team-card__name {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-lg);
  font-weight: 700;
  color: var(--fali-color-text-heading);
  margin-bottom: var(--fali-space-1);
}

.team-card__role {
  font-size: var(--fali-text-sm);
  color: var(--fali-color-text-accent);
  margin-bottom: var(--fali-space-4);
  font-weight: 500;
}

.team-card__bio {
  font-size: var(--fali-text-xs);
  color: var(--fali-color-text-muted);
  line-height: var(--fali-leading-normal);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fali-space-6);
}

.value-card {
  display: flex;
  gap: var(--fali-space-5);
  align-items: flex-start;
  padding: var(--fali-space-7);
  background: var(--fali-color-bg-card);
  border: 1px solid var(--fali-color-border);
  border-radius: var(--fali-radius-xl);
  transition: border-color var(--fali-transition-base);
}

.value-card:hover { border-color: hsla(212, 100%, 54%, 0.20); }

.value-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--fali-radius-md);
  background: var(--fali-gradient-brand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.value-card__icon svg { width: 24px; height: 24px; }

.value-card__title {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-lg);
  font-weight: 700;
  color: var(--fali-color-text-heading);
  margin-bottom: var(--fali-space-2);
}

.value-card__body {
  font-size: var(--fali-text-sm);
  color: var(--fali-color-text-muted);
  line-height: var(--fali-leading-normal);
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fali-space-6);
}

.about-stat {
  text-align: center;
  padding: var(--fali-space-8) var(--fali-space-6);
  background: var(--fali-color-bg-card);
  border: 1px solid var(--fali-color-border);
  border-radius: var(--fali-radius-xl);
}

.about-stat__value {
  font-family: var(--fali-font-display);
  font-size: var(--fali-text-4xl);
  font-weight: 800;
  letter-spacing: var(--fali-tracking-tight);
  margin-bottom: var(--fali-space-2);
}

.about-stat__label {
  font-size: var(--fali-text-sm);
  color: var(--fali-color-text-muted);
}


/* =============================================================================
   24. DIVIDERS & MISC
   ============================================================================= */

.divider {
  border: none;
  height: 1px;
  background: var(--fali-color-border);
  margin: var(--fali-space-8) 0;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.mt-auto { margin-top: auto; }
.mb-4    { margin-bottom: var(--fali-space-4); }
.mb-6    { margin-bottom: var(--fali-space-6); }
.mb-8    { margin-bottom: var(--fali-space-8); }

.w-full { width: 100%; }


/* =============================================================================
   25. RESPONSIVE
   ============================================================================= */

@media (max-width: 1100px) {
  .services-grid,
  .services-archive-grid,
  .blog-grid,
  .blog-archive-grid,
  .use-cases-grid { grid-template-columns: repeat(2, 1fr); }

  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--fali-space-8); }

  .team-grid { grid-template-columns: repeat(2, 1fr); }

  .about-stats { grid-template-columns: repeat(2, 1fr); }

  .service-overview { grid-template-columns: 1fr; }
  .service-overview__sidebar { position: static; }
  .service-features { grid-template-columns: 1fr; }

  .blog-single { grid-template-columns: 1fr; }
  .blog-single__sidebar { position: static; }

  .process-steps::before { display: none; }
}

@media (max-width: 900px) {
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  .about-mission { grid-template-columns: 1fr; }
  .about-visual  { height: 320px; }

  .contact-layout { grid-template-columns: 1fr; }

  .blog-card--featured { flex-direction: column; }
  .blog-card--featured .blog-card__image { width: 100%; height: 220px; }

  .values-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .services-grid,
  .services-archive-grid,
  .blog-grid,
  .blog-archive-grid,
  .testimonials-grid,
  .use-cases-grid { grid-template-columns: 1fr; }

  .process-steps { grid-template-columns: 1fr; }

  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav__cta-desktop { display: none; }

  .nav__links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--fali-color-nav-bg-scrolled);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--fali-color-border);
    padding: var(--fali-space-4) var(--fali-space-6) var(--fali-space-6);
    gap: var(--fali-space-1);
  }

  .nav__link { padding: var(--fali-space-3) var(--fali-space-4); width: 100%; }

  .hero__stats { gap: var(--fali-space-6); }
  .hero__stat-divider { display: none; }

  .footer__grid { grid-template-columns: 1fr; }

  .team-grid { grid-template-columns: 1fr; }

  .contact-form .form-row { grid-template-columns: 1fr; }

  .about-stats { grid-template-columns: 1fr 1fr; }

  .cta-section__inner { padding: var(--fali-space-12) var(--fali-space-6); }

  .section { padding: var(--fali-space-16) 0; }
  .section--lg { padding: var(--fali-space-20) 0; }

  .container { padding: 0 var(--fali-space-5); }
}

@media (max-width: 480px) {
  .hero { padding-left: var(--fali-space-5); padding-right: var(--fali-space-5); }
  .hero__content { width: 100%; }
  .hero__headline { font-size: clamp(var(--fali-text-3xl), 9.5vw, var(--fali-text-5xl)); }
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .about-stats { grid-template-columns: 1fr; }
}