/* ==========================================================================
   IndiaFreelancers.com — Design System (v3, tricolor / logo-matched)
   Light ground, NAVY ink + dark sections, SAFFRON primary action, GREEN
   secondary — sampled from the brand logo (#092453 / #f56e06 / #0d8236).
   Same .ifl-* class contract; existing PHP views restyle with no markup
   changes. Animated hero visual, segmented search, scroll reveal.
   ========================================================================== */

:root {
  /* --- Navy ramp: headings, ink, dark sections (logo #092453) --- */
  --ifl-navy-800: #071d45;   /* display ink / headings */
  --ifl-navy-700: #0f2f6b;
  --ifl-navy-600: #123a7f;
  --ifl-navy-500: #1c478f;
  --ifl-navy-200: #b7c2da;
  --ifl-navy-100: #e5eaf3;

  /* --- Saffron ramp: PRIMARY accent / actions (logo #f56e06) --- */
  --ifl-saffron-800: #8f3f00;
  --ifl-saffron-700: #b85200;  /* accessible text/link on white */
  --ifl-saffron-600: #e06305;
  --ifl-saffron-500: #f56e06;  /* brand saffron */
  --ifl-saffron-400: #ff8a2b;
  --ifl-saffron-200: #ffcfa6;
  --ifl-saffron-100: #ffe9d5;

  /* --- Green ramp: PRIMARY accent / actions (logo #0d8236, dominant) --- */
  --ifl-green-800: #064d1f;
  --ifl-green-700: #0a6b2c;  /* accessible text/link on white */
  --ifl-green-600: #0d8236;  /* brand green */
  --ifl-green-500: #12994a;
  --ifl-green-400: #22b364;
  --ifl-green-200: #b7e3c6;
  --ifl-green-100: #dff3e6;

  /* --- Semantic aliases (accent = green) --- */
  --ifl-accent-600: var(--ifl-green-600);
  --ifl-accent-500: var(--ifl-green-500);

  /* legacy blue/cyan/teal names now resolve to navy + green so any
     inline var(--ifl-blue-*) / var(--ifl-cyan-*) in views stays on-brand */
  --ifl-blue-800: var(--ifl-navy-800);
  --ifl-blue-700: var(--ifl-navy-700);
  --ifl-blue-600: var(--ifl-navy-600);
  --ifl-blue-500: var(--ifl-navy-500);
  --ifl-blue-200: var(--ifl-navy-200);
  --ifl-blue-100: var(--ifl-navy-100);
  /* cyan aliases now resolve to saffron (secondary accent) so the
     former secondary slots pick up warm saffron highlights */
  --ifl-cyan-700: var(--ifl-saffron-700);
  --ifl-cyan-600: var(--ifl-saffron-600);
  --ifl-cyan-100: var(--ifl-saffron-100);

  --ifl-navy-950: var(--ifl-navy-800);
  --ifl-navy-900: #0a2352;
  --ifl-teal-700: var(--ifl-saffron-700);
  --ifl-teal-600: var(--ifl-saffron-600);
  --ifl-teal-500: var(--ifl-saffron-500);
  --ifl-teal-400: #ff8a2b;
  --ifl-teal-100: var(--ifl-saffron-100);

  --ifl-cream-50: #f6f8fb;
  --ifl-cream-100: #eef2fb;
  --ifl-white: #ffffff;

  --ifl-ink-900: #071d45;
  --ifl-ink-700: #38414f;
  --ifl-ink-500: #5c6373;
  --ifl-ink-300: #98a0ad;
  --ifl-ink-200: #d5dae1;
  --ifl-ink-100: #eef1f5;

  --ifl-success: #0d8236;
  --ifl-warning: #b8770a;
  --ifl-danger: #c5372e;
  --ifl-info: var(--ifl-green-600);

  /* --- Typography --- */
  --ifl-font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ifl-font-display: 'Space Grotesk', var(--ifl-font-sans);

  /* --- Radii / shadows / spacing --- */
  --ifl-radius-sm: 10px;
  --ifl-radius-md: 14px;
  --ifl-radius-lg: 22px;
  --ifl-radius-pill: 999px;

  --ifl-shadow-sm: 0 1px 2px rgba(7, 29, 69, 0.06), 0 1px 1px rgba(7, 29, 69, 0.04);
  --ifl-shadow-md: 0 18px 44px -28px rgba(7, 29, 69, 0.4), 0 4px 10px rgba(7, 29, 69, 0.05);
  --ifl-shadow-lg: 0 30px 64px -32px rgba(7, 29, 69, 0.42), 0 10px 24px rgba(7, 29, 69, 0.08);
  --ifl-shadow-glow-blue: 0 12px 26px -12px rgba(13, 130, 54, 0.5);

  --ifl-header-height: 88px;
}

/* --- Reset / base --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--ifl-font-sans);
  color: var(--ifl-ink-700);
  background: var(--ifl-cream-50);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ifl-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ifl-navy-800);
  line-height: 1.1;
}

a { color: var(--ifl-green-700); text-decoration: none; }
a:hover { color: var(--ifl-navy-700); }

::selection { background: var(--ifl-green-100); color: var(--ifl-navy-800); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
.ifl-card:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ifl-green-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.ifl-skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ifl-blue-800); color: #fff;
  padding: 12px 20px; z-index: 2000; border-radius: 0 0 var(--ifl-radius-sm) 0;
}
.ifl-skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Layout shell
   ========================================================================== */
.ifl-shell { display: flex; flex-direction: column; min-height: 100vh; }
.ifl-container { width: 100%; max-width: 1220px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 992px) { .ifl-container { padding-inline: 28px; } }

/* --- Top navigation (light) --- */
.ifl-nav {
  position: sticky; top: 0; z-index: 1000; height: var(--ifl-header-height);
  background: rgba(246, 248, 251, 0.85);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--ifl-ink-200);
}
.ifl-nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.ifl-brand { display: flex; align-items: center; gap: 10px; font-family: var(--ifl-font-display); font-weight: 700; font-size: 1.18rem; color: var(--ifl-blue-800); letter-spacing: -0.02em; }
/* Brand lockup: crisp symbol image + live tricolor wordmark */
.ifl-brand { display: flex; align-items: center; gap: 12px; }
.ifl-brand__symbol { height: 56px; width: auto; display: block; }
.ifl-brand__wordmark { display: flex; flex-direction: column; line-height: 1; }
.ifl-brand__name { font-family: var(--ifl-font-display); font-weight: 700; font-size: 1.62rem; letter-spacing: -0.02em; line-height: 1; }
.ifl-brand__name .g { color: var(--ifl-green-600); }
.ifl-brand__name .n { color: var(--ifl-navy-700); }
.ifl-brand__name .o { color: var(--ifl-saffron-500); font-size: 0.66em; letter-spacing: 0; }
.ifl-brand__slogan { margin-top: 5px; font-family: var(--ifl-font-sans); font-weight: 700; font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ifl-ink-500); }
.ifl-brand:hover { color: inherit; }

/* size variants */
.ifl-footer .ifl-brand__symbol { height: 60px; }
.ifl-footer .ifl-brand__name { font-size: 1.7rem; }
.ifl-auth__logo .ifl-brand { justify-content: center; gap: 14px; }
.ifl-auth__logo .ifl-brand__symbol { height: 72px; }
.ifl-auth__logo .ifl-brand__name { font-size: 2rem; }
.ifl-auth__logo .ifl-brand__slogan { font-size: 0.62rem; }

.ifl-nav__links { display: none; align-items: center; gap: 2px; flex-wrap: nowrap; }
.ifl-nav__links a {
  color: var(--ifl-ink-700); padding: 9px 12px; border-radius: var(--ifl-radius-pill);
  font-size: 0.9rem; font-weight: 500; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease;
}
.ifl-nav__links a:hover, .ifl-nav__links a.is-active { color: var(--ifl-green-700); background: var(--ifl-green-100); }
@media (min-width: 992px) { .ifl-nav__links { display: flex; } }

.ifl-nav__actions { display: flex; align-items: center; gap: 10px; }
.ifl-nav__toggle {
  display: inline-flex; border: 1px solid var(--ifl-ink-200); background: #fff;
  color: var(--ifl-blue-800); border-radius: var(--ifl-radius-sm); padding: 8px 10px;
}
@media (min-width: 992px) { .ifl-nav__toggle { display: none; } }

/* Mobile drawer (light) */
.ifl-drawer { position: fixed; inset: 0; z-index: 1100; background: rgba(27, 42, 107, 0.4); display: none; }
.ifl-drawer.is-open { display: block; }
.ifl-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(320px, 86vw);
  background: #fff; color: var(--ifl-ink-900); padding: 24px; box-shadow: var(--ifl-shadow-lg);
  display: flex; flex-direction: column; gap: 6px;
}
.ifl-drawer__panel a { color: var(--ifl-ink-700); padding: 14px 6px; border-bottom: 1px solid var(--ifl-ink-100); font-weight: 600; }
.ifl-drawer__close { align-self: flex-end; background: none; border: none; color: var(--ifl-ink-500); font-size: 1.4rem; padding: 4px 8px; }

/* --- Footer (light) --- */
.ifl-footer { margin-top: auto; background: var(--ifl-cream-50); color: var(--ifl-ink-500); padding: 64px 0 40px; border-top: 1px solid var(--ifl-ink-200); }
.ifl-footer h6 { color: var(--ifl-blue-800); font-family: var(--ifl-font-display); font-size: 0.9rem; letter-spacing: 0; text-transform: none; margin-bottom: 14px; }
.ifl-footer a { color: var(--ifl-ink-500); font-size: 0.92rem; }
.ifl-footer a:hover { color: var(--ifl-green-700); }
.ifl-footer .ifl-brand { color: var(--ifl-navy-800); }
.ifl-footer .ifl-brand small { color: var(--ifl-saffron-600); }
.ifl-footer__grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ifl-footer__grid { grid-template-columns: 1.5fr repeat(3, 1fr); } }
.ifl-footer__bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--ifl-ink-200); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 0.84rem; color: var(--ifl-ink-300); }

/* ==========================================================================
   Hero (light, two-column with animated visual)
   ========================================================================== */
.ifl-hero { position: relative; background: var(--ifl-cream-50); padding: 0; overflow: hidden; }
/* Hero breaks out of the centered container to span the full viewport width */
.ifl-hero > .ifl-container { max-width: none; padding-inline: 0; }

/* Video hero card with text overlay (full-bleed) */
.ifl-hero__video-card { position: relative; border-radius: 0; overflow: hidden; min-height: clamp(480px, 64vh, 720px); display: flex; box-shadow: none; }
.ifl-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ifl-hero__scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(9,20,10,0.92) 0%, rgba(9,20,10,0.7) 42%, rgba(9,20,10,0.28) 72%, rgba(9,20,10,0.12) 100%),
  linear-gradient(0deg, rgba(9,20,10,0.55) 0%, transparent 40%); }
/* Overlay content stays aligned to the page's content track, not the raw viewport edge */
.ifl-hero__overlay { position: relative; z-index: 2; align-self: center; width: 100%; max-width: 1220px; margin-inline: auto; padding: clamp(40px, 6vw, 72px) 20px; box-sizing: border-box; }
@media (min-width: 992px) { .ifl-hero__overlay { padding-inline: 28px; } }

.ifl-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.14); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-weight: 600; font-size: 0.8rem; letter-spacing: 0.01em;
  padding: 7px 14px; border-radius: var(--ifl-radius-pill); margin-bottom: 22px;
}
.ifl-hero__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ifl-green-400); animation: ifl-pulse 2s infinite; }
.ifl-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); color: #fff; max-width: 20ch; margin-bottom: 20px; line-height: 1.02; }
.ifl-hero__accent { background: linear-gradient(120deg, var(--ifl-green-400), var(--ifl-saffron-400)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ifl-hero p.lead { font-size: 1.15rem; color: rgba(255,255,255,0.9); max-width: 52ch; margin-bottom: 30px; }

/* Segmented search toggle */
.ifl-seg { display: flex; gap: 6px; margin-bottom: 12px; max-width: 540px; }
.ifl-seg__opt { flex: 1; text-align: center; padding: 11px 12px; border-radius: 10px; font-family: var(--ifl-font-display); font-weight: 600; font-size: 0.92rem; cursor: pointer; border: none; background: transparent; color: var(--ifl-ink-500); transition: color 0.18s ease, background 0.18s ease; }
.ifl-seg__opt:hover { color: var(--ifl-green-700); }
.ifl-seg__opt.is-active { background: linear-gradient(135deg, var(--ifl-green-500), var(--ifl-green-600)); color: #fff; }

.ifl-search { position: relative; z-index: 2; background: #fff; border: 1px solid var(--ifl-ink-200); border-radius: 16px; padding: 8px; box-shadow: var(--ifl-shadow-md); display: flex; flex-direction: column; flex-wrap: wrap; gap: 8px; max-width: 540px; }
@media (min-width: 640px) { .ifl-search { flex-direction: row; } }
.ifl-search select, .ifl-search input { border: none; background: var(--ifl-cream-50); padding: 14px 16px; font-size: 0.98rem; color: var(--ifl-navy-800); border-radius: 11px; flex: 1 1 120px; min-width: 0; font-family: var(--ifl-font-sans); }
.ifl-search select:focus, .ifl-search input:focus { outline: none; background: var(--ifl-ink-100); }
.ifl-search__divider { width: 1px; background: var(--ifl-ink-200); margin: 8px 0; display: none; }
/* The submit button must never shrink below its own text (which would
   push it outside the rounded white search container) and, if the row
   is too narrow to fit alongside the select+input, flex-wrap above
   drops it to its own line inside the same box instead of overflowing
   past it. */
.ifl-search .ifl-btn { flex: 0 0 auto; }
@media (max-width: 639px) { .ifl-search .ifl-btn { width: 100%; } }

.ifl-hero__stats { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 36px; }
.ifl-hero__stats div { color: rgba(255,255,255,0.75); font-size: 0.85rem; max-width: 22ch; }
.ifl-hero__stats strong { display: block; color: #fff; font-family: var(--ifl-font-display); font-size: 1.5rem; line-height: 1.1; margin-bottom: 4px; }

/* Animated visual */
.ifl-hero__visual { position: relative; min-height: 460px; display: none; }
@media (min-width: 992px) { .ifl-hero__visual { display: block; } }
.ifl-hero__visual-bg { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,130,54,0.08), rgba(245,110,6,0.06)); border-radius: 28px; border: 1px solid var(--ifl-ink-200); }
.ifl-profile-card { position: absolute; background: #fff; border: 1px solid #eaedf4; border-radius: 18px; padding: 18px; box-shadow: var(--ifl-shadow-lg); }
.ifl-profile-card--a { top: 34px; left: 24px; width: 262px; animation: ifl-float 6s ease-in-out infinite; }
.ifl-profile-card--b { bottom: 40px; right: 20px; width: 244px; animation: ifl-float2 7s ease-in-out infinite; }
.ifl-pc__row { display: flex; align-items: center; gap: 12px; }
.ifl-pc__avatar { width: 46px; height: 46px; border-radius: 12px; background-image: repeating-linear-gradient(135deg, #eef1f8 0 7px, #e3e8f2 7px 14px); flex: none; }
.ifl-pc__name { font-family: var(--ifl-font-display); font-weight: 600; font-size: 0.95rem; color: var(--ifl-navy-800); }
.ifl-pc__role { font-size: 0.82rem; color: var(--ifl-ink-500); }
.ifl-pc__tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 12px; }
.ifl-pc__tag { font-size: 0.72rem; font-weight: 600; padding: 4px 9px; border-radius: 7px; background: var(--ifl-green-100); color: var(--ifl-green-700); }
.ifl-pc__tag--cyan { background: var(--ifl-saffron-100); color: var(--ifl-saffron-700); }
.ifl-pc__tag--muted { background: var(--ifl-ink-100); color: var(--ifl-ink-500); }
.ifl-pc__foot { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; }
.ifl-pc__rate { font-family: var(--ifl-font-display); font-weight: 600; color: var(--ifl-navy-800); }
.ifl-pc__star { color: var(--ifl-saffron-500); font-weight: 700; }
.ifl-pc__bar { height: 8px; border-radius: 6px; background: #eef1f8; overflow: hidden; margin: 14px 0 8px; }
.ifl-pc__bar > span { display: block; height: 100%; width: 86%; background: linear-gradient(90deg, var(--ifl-green-500), var(--ifl-green-700)); }
.ifl-chip { position: absolute; top: 208px; right: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; color: #fff; padding: 9px 14px; border-radius: var(--ifl-radius-pill); background: linear-gradient(135deg, var(--ifl-green-500), var(--ifl-green-600)); box-shadow: var(--ifl-shadow-glow-blue); animation: ifl-float 5s ease-in-out infinite; }
.ifl-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ifl-saffron-400); animation: ifl-pulse 1.8s infinite; }

@keyframes ifl-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
@keyframes ifl-float2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes ifl-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes ifl-spin { to { transform: rotate(360deg); } }

/* Scroll reveal */
[data-reveal] { will-change: opacity, transform; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.ifl-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ifl-font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.005em;
  padding: 12px 22px; border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.16s cubic-bezier(.2,.7,.3,1), box-shadow 0.2s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
  white-space: nowrap;
}
/* soft top sheen shared by all filled variants */
.ifl-btn--primary::before, .ifl-btn--secondary::before, .ifl-btn--teal::before, .ifl-btn--accent::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 46%);
}
.ifl-btn--primary, .ifl-btn--secondary, .ifl-btn--teal, .ifl-btn--accent { box-shadow: inset 0 1px 0 rgba(255,255,255,0.22); }
.ifl-btn:active { transform: translateY(1px); }
.ifl-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.ifl-btn--primary { background: linear-gradient(160deg, var(--ifl-green-400) 0%, var(--ifl-green-600) 55%, var(--ifl-green-700) 100%); color: #fff; border-color: rgba(6,77,31,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 2px 4px rgba(6,77,31,0.2), 0 10px 22px -10px rgba(13,130,54,0.6); }
.ifl-btn--primary:hover { color: #fff; transform: translateY(-1.5px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 8px rgba(6,77,31,0.22), 0 16px 30px -10px rgba(13,130,54,0.68); }
.ifl-btn--primary:active { transform: translateY(0); box-shadow: inset 0 1px 3px rgba(6,77,31,0.4), 0 2px 6px -2px rgba(13,130,54,0.5); }

.ifl-btn--secondary { background: linear-gradient(160deg, var(--ifl-navy-600) 0%, var(--ifl-navy-700) 60%, var(--ifl-navy-800) 100%); color: #fff; border-color: rgba(7,29,69,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 4px rgba(7,29,69,0.22), 0 10px 22px -10px rgba(18,58,127,0.55); }
.ifl-btn--secondary:hover { color: #fff; transform: translateY(-1.5px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 8px rgba(7,29,69,0.24), 0 16px 30px -10px rgba(18,58,127,0.62); }
.ifl-btn--secondary:active { transform: translateY(0); box-shadow: inset 0 1px 3px rgba(7,29,69,0.45), 0 2px 6px -2px rgba(18,58,127,0.5); }

.ifl-btn--teal { background: linear-gradient(160deg, var(--ifl-saffron-400) 0%, var(--ifl-saffron-500) 55%, var(--ifl-saffron-600) 100%); color: #fff; border-color: rgba(143,63,0,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(143,63,0,0.2), 0 10px 22px -10px rgba(245,110,6,0.6); }
.ifl-btn--teal:hover { color: #fff; transform: translateY(-1.5px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 4px 8px rgba(143,63,0,0.22), 0 16px 30px -10px rgba(245,110,6,0.68); }
.ifl-btn--teal:active { transform: translateY(0); box-shadow: inset 0 1px 3px rgba(143,63,0,0.4), 0 2px 6px -2px rgba(245,110,6,0.5); }

/* Saffron/orange action — use for a complementary CTA alongside green primary */
.ifl-btn--accent { background: linear-gradient(160deg, var(--ifl-saffron-400) 0%, var(--ifl-saffron-500) 55%, var(--ifl-saffron-600) 100%); color: #fff; border-color: rgba(143,63,0,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(143,63,0,0.2), 0 10px 22px -10px rgba(245,110,6,0.6); }
.ifl-btn--accent:hover { color: #fff; transform: translateY(-1.5px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 4px 8px rgba(143,63,0,0.22), 0 16px 30px -10px rgba(245,110,6,0.68); }
.ifl-btn--accent:active { transform: translateY(0); box-shadow: inset 0 1px 3px rgba(143,63,0,0.4), 0 2px 6px -2px rgba(245,110,6,0.5); }
.ifl-btn--accent-outline { background: transparent; color: var(--ifl-saffron-700); border-color: var(--ifl-saffron-400); }
.ifl-btn--accent-outline:hover { color: var(--ifl-saffron-700); background: var(--ifl-saffron-100); border-color: var(--ifl-saffron-500); transform: translateY(-1px); }

.ifl-btn--outline { background: transparent; color: var(--ifl-navy-700); border-color: var(--ifl-ink-200); }
.ifl-btn--outline:hover { color: var(--ifl-green-700); border-color: var(--ifl-green-400); background: var(--ifl-green-100); }

/* legacy dark-ghost -> light ghost so it stays visible on the light hero */
.ifl-btn--ghost-light { background: #fff; color: var(--ifl-navy-700); border-color: var(--ifl-ink-200); box-shadow: 0 1px 2px rgba(7,29,69,0.06), 0 4px 10px -6px rgba(7,29,69,0.18); }
.ifl-btn--ghost-light:hover { color: var(--ifl-green-700); background: var(--ifl-green-100); border-color: var(--ifl-green-400); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(7,29,69,0.08), 0 8px 18px -8px rgba(13,130,54,0.28); }

.ifl-btn--sm { padding: 8px 16px; font-size: 0.85rem; }
.ifl-btn--lg { padding: 15px 30px; font-size: 1.02rem; }
.ifl-btn--block { width: 100%; }

/* ==========================================================================
   Cards / surfaces
   ========================================================================== */
.ifl-card { background: #fff; border-radius: var(--ifl-radius-lg); box-shadow: var(--ifl-shadow-md); border: 1px solid #eaedf4; padding: 28px; }
.ifl-card--flush { padding: 0; overflow: hidden; }
.ifl-card--hover { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.ifl-card--hover:hover { transform: translateY(-4px); box-shadow: var(--ifl-shadow-lg); }

.ifl-panel { background: #fff; border-radius: var(--ifl-radius-md); border: 1px solid #eaedf4; padding: 24px; }

.ifl-section { padding: 76px 0; }
.ifl-section--tight { padding: 48px 0; }
.ifl-section--navy { position: relative; overflow: hidden; background: radial-gradient(120% 160% at 15% 0%, #123a7f, #0f2f6b 55%, #071d45); color: #fff; }
.ifl-section--cream { background: var(--ifl-cream-100); }

.ifl-eyebrow { color: var(--ifl-green-700); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ifl-section-title { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 10px 0 14px; }
.ifl-section-lead { color: var(--ifl-ink-500); max-width: 60ch; font-size: 1.05rem; }

/* ==========================================================================
   Category / feature tiles
   ========================================================================== */
.ifl-grid { display: grid; gap: 16px; grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .ifl-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .ifl-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .ifl-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.ifl-tile { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid #eaedf4; border-radius: var(--ifl-radius-md); padding: 22px; transition: border-color 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.ifl-tile:hover { border-color: #d6dcea; transform: translateY(-4px); box-shadow: var(--ifl-shadow-md); }
.ifl-tile__icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--ifl-green-100); color: var(--ifl-green-700); font-size: 1.2rem; }
.ifl-tile__icon svg { width: 24px; height: 24px; display: block; }
.ifl-tile h3 { font-size: 1.05rem; margin: 6px 0 0; }
.ifl-tile p { color: var(--ifl-ink-500); font-size: 0.9rem; margin: 0; }

/* Numbered steps */
.ifl-step { display: flex; gap: 16px; }
.ifl-step__num { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--ifl-green-500), var(--ifl-green-600)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--ifl-font-display); }
.ifl-step h4 { font-size: 1.05rem; margin: 4px 0 6px; }
.ifl-step p { color: var(--ifl-ink-500); font-size: 0.92rem; margin: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
.ifl-field { margin-bottom: 20px; }
.ifl-label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 7px; color: var(--ifl-navy-800); }
.ifl-label .ifl-optional { font-weight: 500; color: var(--ifl-ink-300); }

.ifl-input, .ifl-select, .ifl-textarea { width: 100%; padding: 12px 14px; border-radius: var(--ifl-radius-sm); border: 1.5px solid var(--ifl-ink-200); background: #fff; font-size: 0.96rem; color: var(--ifl-navy-800); font-family: var(--ifl-font-sans); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.ifl-input:focus, .ifl-select:focus, .ifl-textarea:focus { outline: none; border-color: var(--ifl-green-500); box-shadow: 0 0 0 4px rgba(13, 130, 54, 0.16); }
.ifl-input.is-invalid, .ifl-select.is-invalid, .ifl-textarea.is-invalid { border-color: var(--ifl-danger); }
.ifl-textarea { resize: vertical; min-height: 110px; }

.ifl-help-text { font-size: 0.82rem; color: var(--ifl-ink-500); margin-top: 6px; }
.ifl-error-text { font-size: 0.82rem; color: var(--ifl-danger); margin-top: 6px; font-weight: 600; }

.ifl-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: var(--ifl-ink-700); }
.ifl-checkbox input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--ifl-green-600); flex-shrink: 0; }

.ifl-error-summary { background: #fdf1ef; border: 1px solid #f3c9c3; color: #8a2a22; border-radius: var(--ifl-radius-sm); padding: 14px 18px; margin-bottom: 20px; font-size: 0.9rem; }
.ifl-error-summary strong { display: block; margin-bottom: 4px; }

/* Auth pages (light-blue) */
.ifl-auth { min-height: calc(100vh - var(--ifl-header-height)); display: flex; align-items: center; justify-content: center; padding: 56px 20px; background: var(--ifl-cream-50); background-image: radial-gradient(circle at 15% 20%, rgba(13,130,54,0.11) 0%, transparent 45%), radial-gradient(circle at 85% 85%, rgba(245,110,6,0.09) 0%, transparent 45%); }
.ifl-auth__card { width: 100%; max-width: 440px; }
.ifl-auth__card .ifl-card { padding: 36px; box-shadow: var(--ifl-shadow-lg); }
.ifl-auth__logo { display: flex; justify-content: center; margin-bottom: 22px; }
.ifl-auth h1 { font-size: 1.6rem; text-align: center; margin-bottom: 6px; }
.ifl-auth p.ifl-auth__sub { text-align: center; color: var(--ifl-ink-500); margin-bottom: 28px; font-size: 0.92rem; }
.ifl-auth__footer { text-align: center; margin-top: 20px; font-size: 0.9rem; color: var(--ifl-ink-500); }

/* ==========================================================================
   Badges / alerts / toasts
   ========================================================================== */
.ifl-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 11px; border-radius: var(--ifl-radius-pill); }
.ifl-badge--success { background: #e5f6ee; color: var(--ifl-success); }
.ifl-badge--warning { background: var(--ifl-saffron-100); color: var(--ifl-warning); }
.ifl-badge--danger { background: #fbe9e7; color: var(--ifl-danger); }
.ifl-badge--info { background: var(--ifl-green-100); color: var(--ifl-green-700); }
.ifl-badge--neutral { background: var(--ifl-ink-100); color: var(--ifl-ink-700); }

.ifl-alert { border-radius: var(--ifl-radius-sm); padding: 16px 20px; font-size: 0.92rem; margin-bottom: 18px; border: 1px solid transparent; line-height: 1.55; }
.ifl-alert--success { background: #e5f6ee; border-color: #b9e6cf; color: #14523a; }
.ifl-alert--danger { background: #fdf1ef; border-color: #f3c9c3; color: #8a2a22; }
.ifl-alert--info { background: var(--ifl-green-100); border-color: var(--ifl-green-200); color: #094d20; }
.ifl-alert--warning { background: var(--ifl-saffron-100); border-color: #f3d9a8; color: #6b530a; }

.ifl-toast-region { position: fixed; bottom: 20px; right: 20px; z-index: 1500; display: flex; flex-direction: column; gap: 10px; max-width: min(360px, 90vw); }
.ifl-toast { background: var(--ifl-navy-800); color: #fff; padding: 14px 18px; border-radius: var(--ifl-radius-sm); box-shadow: var(--ifl-shadow-lg); font-size: 0.88rem; display: flex; align-items: flex-start; gap: 10px; animation: ifl-toast-in 0.18s ease-out; }
.ifl-toast--success { border-left: 4px solid var(--ifl-green-500); }.ifl-toast--error { border-left: 4px solid #e2685c; }
@keyframes ifl-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   Skeletons / empty states
   ========================================================================== */
.ifl-skeleton { background: linear-gradient(90deg, var(--ifl-ink-100) 25%, var(--ifl-ink-200) 37%, var(--ifl-ink-100) 63%); background-size: 400% 100%; animation: ifl-skeleton 1.4s ease infinite; border-radius: var(--ifl-radius-sm); }
@keyframes ifl-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.ifl-skeleton--text { height: 14px; margin-bottom: 8px; }
.ifl-skeleton--title { height: 22px; width: 60%; margin-bottom: 14px; }
.ifl-skeleton--avatar { width: 48px; height: 48px; border-radius: 50%; }

.ifl-empty { text-align: center; padding: 56px 24px; color: var(--ifl-ink-500); }
.ifl-empty__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--ifl-green-100); color: var(--ifl-green-600); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.4rem; }
.ifl-empty h3 { font-size: 1.05rem; color: var(--ifl-navy-800); margin-bottom: 6px; }

/* ==========================================================================
   Messaging
   ========================================================================== */
.ifl-message-thread { display: flex; flex-direction: column; gap: 12px; padding: 20px; max-height: 480px; overflow-y: auto; background: var(--ifl-cream-100); border-radius: var(--ifl-radius-lg); }
.ifl-message { max-width: 72%; align-self: flex-start; background: #fff; border: 1px solid #eaedf4; border-radius: 14px 14px 14px 4px; padding: 10px 14px; }
.ifl-message--own { align-self: flex-end; background: var(--ifl-navy-700); color: #fff; border-color: var(--ifl-navy-700); border-radius: 14px 14px 4px 14px; }
.ifl-message__meta { font-size: 0.75rem; opacity: 0.65; margin-bottom: 2px; }
.ifl-message__body { font-size: 0.92rem; white-space: pre-wrap; word-break: break-word; }
.ifl-conversation-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px; }
.ifl-conversation-row.is-unread { background: var(--ifl-green-100); }

/* ==========================================================================
   Dashboard shell
   ========================================================================== */
.ifl-dash { display: flex; min-height: calc(100vh - var(--ifl-header-height)); background: var(--ifl-cream-100); }
.ifl-dash__sidebar { display: none; width: 260px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--ifl-ink-100); padding: 24px 16px; }
@media (min-width: 992px) { .ifl-dash__sidebar { display: block; } }
.ifl-dash__sidebar a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--ifl-radius-sm); color: var(--ifl-ink-700); font-weight: 600; font-size: 0.92rem; }
.ifl-dash__sidebar a:hover, .ifl-dash__sidebar a.is-active { background: var(--ifl-green-100); color: var(--ifl-green-700); }
.ifl-dash__main { flex: 1; padding: 32px 20px; min-width: 0; }
@media (min-width: 992px) { .ifl-dash__main { padding: 40px; } }

/* ==========================================================================
   Utilities
   ========================================================================== */
.ifl-text-muted { color: var(--ifl-ink-500); }
.ifl-text-center { text-align: center; }
.ifl-mt-0 { margin-top: 0; }
.ifl-flex { display: flex; }
.ifl-items-center { align-items: center; }
.ifl-justify-between { justify-content: space-between; }
.ifl-gap-2 { gap: 8px; }
.ifl-gap-3 { gap: 16px; }
.ifl-hidden { display: none !important; }
.ifl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }