/* =====================================================================
   Influence Lab — Redesign Layer v2 (2026)
   Pure brand-blue palette. Sharp angular geometry. Modern motion.
   No gold, no yellow. Every section has its own treatment.
   Does not touch JS / backend / structure.
   ===================================================================== */

/* ---------- BRAND TYPOGRAPHY (Guidelines: TT Commons + Inter) ---- */
@import url('https://fonts.cdnfonts.com/css/tt-commons');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Brand palette (from guidelines) */
  --il-blue:        #002247;   /* primary deep */
  --il-blue-mid:    #034AA6;   /* bridge */
  --il-blue-soft:   #2977E2;   /* bright accent */
  --il-white:       #FFFFFF;
  --il-black:       #000000;

  /* Extended scale */
  --il-blue-950: #001A36;
  --il-blue-900: #002247;
  --il-blue-800: #002F60;
  --il-blue-700: #034AA6;
  --il-blue-600: #1660C7;
  --il-blue-500: #2977E2;
  --il-blue-400: #5895EE;
  --il-blue-300: #8AB4F4;
  --il-blue-100: #E2EDFB;
  --il-blue-50:  #F4F8FE;

  /* Neutral grayscale (replaces cream tones) */
  --il-paper:    #FFFFFF;
  --il-paper-2:  #FAFBFC;
  --il-gray-50:  #F4F5F7;
  --il-gray-100: #E5E7EB;
  --il-gray-200: #D1D5DB;
  --il-gray-300: #9CA3AF;
  --il-gray-500: #6B7280;
  --il-gray-700: #374151;
  --il-gray-800: #1F2937;
  --il-gray-900: #111827;
  --il-ink:      #0A0F1F;
  --il-muted:    #4A5670;
  --il-line:     rgba(0,34,71,0.10);

  --il-ease:     cubic-bezier(.22,.61,.36,1);
  --il-ease-out: cubic-bezier(.16,1,.3,1);
  --il-ease-in-out: cubic-bezier(.65,.05,.36,1);
}

/* ---------- 1. KILL CIRCULAR / ROUNDED GEOMETRY ----------------- */
.rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl,
.rounded-2xl, .rounded-3xl, .rounded-full,
[class*="rounded-t-"], [class*="rounded-b-"],
[class*="rounded-l-"], [class*="rounded-r-"] {
  border-radius: 0 !important;
}

.shape, .floating-shapes .shape {
  border-radius: 0 !important;
  transform: rotate(45deg);
  opacity: 0.08 !important;
  filter: blur(0) !important;
  background: linear-gradient(135deg, var(--il-blue-700), var(--il-blue-900)) !important;
}

[style*="border-radius:50%"]:not(img):not(video) { border-radius: 0 !important; }

/* ---------- 2. BRAND COLOR REMAP -------------------------------- */
.bg-brand-blue          { background-color: var(--il-blue-900) !important; }
.bg-brand-blue-medium   { background-color: var(--il-blue-700) !important; }
.bg-brand-blue-soft     { background-color: var(--il-blue-500) !important; }

.text-brand-blue        { color: var(--il-blue-900) !important; }
.text-brand-blue-medium { color: var(--il-blue-700) !important; }
.text-brand-blue-soft   { color: var(--il-blue-500) !important; }

.border-brand-blue        { border-color: var(--il-blue-900) !important; }
.border-brand-blue-medium { border-color: var(--il-blue-700) !important; }
.border-brand-blue-soft   { border-color: var(--il-blue-500) !important; }

.hover\:bg-brand-blue:hover          { background-color: var(--il-blue-950) !important; }
.hover\:bg-brand-blue-medium:hover   { background-color: var(--il-blue-900) !important; }
.hover\:bg-brand-blue-soft:hover     { background-color: var(--il-blue-700) !important; }
.hover\:text-brand-blue-medium:hover { color: var(--il-blue-700) !important; }
.hover\:text-brand-blue-soft:hover   { color: var(--il-blue-500) !important; }

.bg-brand-blue-soft\/10  { background-color: rgba(41,119,226,0.08) !important; }
.bg-brand-blue-soft\/20  { background-color: rgba(41,119,226,0.16) !important; }
.bg-brand-blue\/10       { background-color: rgba(0,34,71,0.08) !important; }

/* Gradient text — pure blue cascade */
.gradient-text {
  background: linear-gradient(135deg, var(--il-blue-900) 0%, var(--il-blue-700) 50%, var(--il-blue-500) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Hero gradient backdrop */
.hero-gradient {
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(41,119,226,0.20) 0%, transparent 60%),
    radial-gradient(50% 70% at 10% 90%, rgba(3,74,166,0.12) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F8FE 100%) !important;
}

/* ---------- 3. TYPOGRAPHY -------------------------------------- */
/* Brand fonts (per guidelines):
   - Primary  (Основной шрифт):       TT Commons
   - Secondary (Дополнительный шрифт): Inter                                 */
body {
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  color: var(--il-ink);
  background: var(--il-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  letter-spacing: -0.025em;
  font-feature-settings: "ss01", "ss02";
  text-wrap: balance;
}

h1 { letter-spacing: -0.035em; }

.il-serif {
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-style: normal;
}

/* ---------- 4. BUTTONS ---------------------------------------- */
button, .btn,
a[class*="bg-brand-blue"], button[class*="bg-brand-blue"] {
  border-radius: 0 !important;
  letter-spacing: 0.02em;
  transition: all .35s var(--il-ease) !important;
}

a.bg-brand-blue-soft, button.bg-brand-blue-soft,
a.bg-brand-blue, button.bg-brand-blue {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--il-blue-900) !important;
  background: var(--il-blue-700) !important;
  color: #fff !important;
}
a.bg-brand-blue-soft::before, button.bg-brand-blue-soft::before,
a.bg-brand-blue::before, button.bg-brand-blue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--il-ease-out);
  pointer-events: none;
}
a.bg-brand-blue-soft:hover, button.bg-brand-blue-soft:hover,
a.bg-brand-blue:hover, button.bg-brand-blue:hover {
  background: var(--il-blue-900) !important;
}
a.bg-brand-blue-soft:hover::before, button.bg-brand-blue-soft:hover::before,
a.bg-brand-blue:hover::before, button.bg-brand-blue:hover::before {
  transform: translateX(120%);
}

.border-2.border-brand-blue-soft,
.border-2.border-brand-blue {
  border-width: 1px !important;
  border-color: var(--il-blue-900) !important;
  color: var(--il-blue-900) !important;
  background: transparent !important;
  position: relative;
}
.border-2.border-brand-blue-soft::after,
.border-2.border-brand-blue::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--il-blue-500);
  opacity: 0;
  transition: opacity .35s var(--il-ease), inset .35s var(--il-ease);
  pointer-events: none;
}
.border-2.border-brand-blue-soft:hover::after,
.border-2.border-brand-blue:hover::after {
  opacity: 0.8;
  inset: 7px;
}
.border-2.border-brand-blue-soft:hover,
.border-2.border-brand-blue:hover {
  background: var(--il-blue-900) !important;
  color: #fff !important;
}

.transform.hover\:scale-105:hover, .hover\:scale-105:hover { transform: translateY(-2px) !important; }
.transform.hover\:scale-110:hover, .hover\:scale-110:hover { transform: translateY(-3px) !important; }

/* ---------- 5. CARDS ----------------------------------------- */
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
  box-shadow: none !important;
}

.bg-white {
  border: 1px solid rgba(0,34,71,0.10);
  transition: border-color .4s var(--il-ease), transform .55s var(--il-ease-out), box-shadow .55s var(--il-ease);
}
section .bg-white:hover {
  border-color: var(--il-blue-700);
  box-shadow: 14px 14px 0 -2px rgba(3,74,166,0.16) !important;
  transform: translateY(-4px);
}

.glass-effect {
  background: rgba(0,34,71,0.65) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(41,119,226,0.28) !important;
}

/* ---------- 6. NAV (header) -------------------------------- */
@keyframes ilNavSlideDown {
  from { transform: translateY(-110%); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes ilNavGlow {
  0%, 100% { box-shadow: 0 2px 0 0 rgba(41,119,226,0.18), 0 8px 32px rgba(0,34,71,0.18); }
  50%      { box-shadow: 0 2px 0 0 rgba(41,119,226,0.35), 0 8px 32px rgba(0,34,71,0.28); }
}
@keyframes ilNavLogoFade {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ilNavLinkFade {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

nav.fixed.il-nav-blue {
  background: linear-gradient(180deg, var(--il-blue-900) 0%, var(--il-blue-950) 100%) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  position: relative;
  animation:
    ilNavSlideDown .85s var(--il-ease-out) both,
    ilNavGlow 5s ease-in-out 1.2s infinite;
  will-change: transform;
}
nav.fixed.il-nav-blue::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.5;
}
nav.fixed.il-nav-blue::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--il-blue-500), transparent);
  opacity: 0.7;
}

/* Sequenced reveal of nav children */
nav.fixed.il-nav-blue a img {
  animation: ilNavLogoFade .9s .35s var(--il-ease-out) both;
}
nav.fixed.il-nav-blue .hidden.md\:block a {
  animation: ilNavLinkFade .55s var(--il-ease-out) both;
}
nav.fixed.il-nav-blue .hidden.md\:block a:nth-child(1) { animation-delay: .45s; }
nav.fixed.il-nav-blue .hidden.md\:block a:nth-child(2) { animation-delay: .52s; }
nav.fixed.il-nav-blue .hidden.md\:block a:nth-child(3) { animation-delay: .59s; }
nav.fixed.il-nav-blue .hidden.md\:block a:nth-child(4) { animation-delay: .66s; }
nav.fixed.il-nav-blue .hidden.md\:block a:nth-child(5) { animation-delay: .73s; }
nav.fixed.il-nav-blue .hidden.md\:block a:nth-child(6) { animation-delay: .80s; }
nav.fixed.il-nav-blue .hidden.md\:block a:nth-child(7) { animation-delay: .87s; }
nav.fixed.il-nav-blue .hidden.md\:block .relative { animation: ilNavLinkFade .55s .94s var(--il-ease-out) both; }

/* Hover refinement: links grow brighter */
nav.fixed.il-nav-blue .hidden.md\:block a:not([id="nav-contact"]) {
  position: relative;
  transition: color .35s var(--il-ease) !important;
}
nav.fixed.il-nav-blue .hidden.md\:block a:not([id="nav-contact"])::before {
  content: "";
  position: absolute;
  left: 50%; right: 50%;
  bottom: 4px;
  height: 2px;
  background: var(--il-blue-500);
  transition: left .4s var(--il-ease-out), right .4s var(--il-ease-out);
}
nav.fixed.il-nav-blue .hidden.md\:block a:not([id="nav-contact"]):hover::before {
  left: 16px; right: 16px;
}

/* Contact CTA in nav — sharper, bolder */
nav.fixed.il-nav-blue #nav-contact {
  position: relative;
  overflow: hidden;
  transition: all .4s var(--il-ease) !important;
}
nav.fixed.il-nav-blue #nav-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(41,119,226,0.5) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--il-ease-out);
  pointer-events: none;
}
nav.fixed.il-nav-blue #nav-contact:hover::before {
  transform: translateX(120%);
}
nav.fixed.il-nav-blue #nav-contact:hover {
  background: var(--il-blue-500) !important;
  color: #fff !important;
  border-color: var(--il-blue-500) !important;
}

nav a { position: relative; letter-spacing: 0.01em; }

nav.il-nav-blue a:not([class*="bg-white"]):not([id*="lang"])::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 1px;
  background: var(--il-blue-300);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--il-ease-out);
}
nav.il-nav-blue a:not([class*="bg-white"]):not([id*="lang"]):hover::after {
  transform: scaleX(1);
}

#lang-toggle {
  border-radius: 0 !important;
  letter-spacing: 0.06em;
  font-weight: 600;
}
#lang-toggle-mobile {
  border-radius: 0 !important;
  border-color: var(--il-blue-900) !important;
  color: var(--il-blue-900) !important;
  letter-spacing: 0.06em;
  font-weight: 600;
}
#lang-toggle-mobile:hover {
  background: var(--il-blue-700) !important;
  color: #fff !important;
  border-color: var(--il-blue-700) !important;
}

#mobile-menu {
  background: linear-gradient(160deg, var(--il-blue-900) 0%, var(--il-blue-950) 100%) !important;
  border-left: 1px solid var(--il-blue-500) !important;
}
#mobile-menu a {
  color: rgba(240,240,240,0.85) !important;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 14px 0;
  position: relative;
}
#mobile-menu a:hover { color: var(--il-blue-300) !important; }
#mobile-menu .sticky {
  background: var(--il-blue-950) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* ---------- 7. FOOTER --------------------------------------- */
footer.bg-brand-blue {
  background:
    linear-gradient(180deg, var(--il-blue-900) 0%, var(--il-blue-950) 100%) !important;
  border-top: 1px solid var(--il-blue-500) !important;
  position: relative;
}
footer.bg-brand-blue::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--il-blue-500), var(--il-blue-700), transparent);
  opacity: 0.85;
}
footer .pointer-events-none { display: none; }
footer h3 {
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: 12px;
}
footer h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 36px; height: 2px;
  background: var(--il-blue-500);
}
footer a:hover { color: var(--il-blue-300) !important; text-decoration: none !important; }

/* ---------- 8. DIVIDERS / EYEBROW --------------------------- */
.il-divider {
  display: block;
  width: 60px;
  height: 2px;
  background: var(--il-blue-700);
  margin: 12px 0;
}
.il-divider--accent { background: var(--il-blue-500); }
.il-divider--center { margin-left: auto; margin-right: auto; }
.il-divider--lg { width: 100px; height: 3px; }

.il-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--il-blue-700);
}
.il-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

/* ---------- 9. ANIMATIONS ---------------------------------- */
@keyframes ilFadeUp     { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes ilFadeIn     { from{opacity:0} to{opacity:1} }
@keyframes ilSlideLeft  { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes ilSlideRight { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes ilZoomIn     { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
@keyframes ilLineGrow   { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes ilMarquee    { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes ilPulse      { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.4} }
@keyframes ilFloatY     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes ilShimmer    { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes ilRotate     { from{transform:rotate(0)} to{transform:rotate(360deg)} }

.il-reveal       { opacity: 0; }
.il-reveal.is-in { animation: ilFadeUp .9s var(--il-ease-out) forwards; }
.il-reveal-left.is-in  { animation: ilSlideLeft  .9s var(--il-ease-out) forwards; }
.il-reveal-right.is-in { animation: ilSlideRight .9s var(--il-ease-out) forwards; }
.il-reveal-zoom.is-in  { animation: ilZoomIn     .8s var(--il-ease-out) forwards; }

.animate-fade-in  { animation: ilFadeIn 1.2s var(--il-ease-out) both !important; }
.animate-slide-up { animation: ilFadeUp 1s var(--il-ease-out) both !important; }
.animate-float    { animation: ilFloatY 6s ease-in-out infinite !important; }

.il-stagger > * { opacity: 0; }
.il-stagger.is-in > *               { animation: ilFadeUp .8s var(--il-ease-out) forwards; }
.il-stagger.is-in > *:nth-child(1) { animation-delay: .05s; }
.il-stagger.is-in > *:nth-child(2) { animation-delay: .15s; }
.il-stagger.is-in > *:nth-child(3) { animation-delay: .25s; }
.il-stagger.is-in > *:nth-child(4) { animation-delay: .35s; }
.il-stagger.is-in > *:nth-child(5) { animation-delay: .45s; }
.il-stagger.is-in > *:nth-child(6) { animation-delay: .55s; }
.il-stagger.is-in > *:nth-child(7) { animation-delay: .65s; }
.il-stagger.is-in > *:nth-child(8) { animation-delay: .75s; }
.il-stagger.is-in > *:nth-child(n+9) { animation-delay: .85s; }

.il-title-underline {
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 22px;
}
.il-title-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 2px;
  background: var(--il-blue-700);
  transform-origin: left center;
}
.il-title-underline.is-in::after { animation: ilLineGrow .9s var(--il-ease-out) forwards; }
.il-title-underline.center { padding-bottom: 22px; }
.il-title-underline.center::after { left: 50%; transform: translateX(-50%); }

/* ---------- 10. IMAGE FRAMES ------------------------------- */
.il-img-frame {
  position: relative;
  overflow: hidden;
}
.il-img-frame img,
.il-img-frame video {
  transition: transform 1s var(--il-ease-out), filter .8s var(--il-ease-out);
  display: block;
  width: 100%;
}
.il-img-frame:hover img,
.il-img-frame:hover video { transform: scale(1.05); }
.il-img-frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,255,255,0.7);
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--il-ease), inset .5s var(--il-ease-out);
}
.il-img-frame:hover::after { opacity: 1; inset: 18px; }

img, video { border-radius: 0 !important; }
.il-keep-round { border-radius: 9999px !important; }

/* ---------- 11. FORMS -------------------------------------- */
input, textarea, select {
  border-radius: 0 !important;
  border: 1px solid rgba(0,34,71,0.20) !important;
  background: #FFFFFF !important;
  transition: border-color .3s var(--il-ease), box-shadow .3s var(--il-ease) !important;
  letter-spacing: 0.01em;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--il-blue-700) !important;
  box-shadow: 0 0 0 3px rgba(41,119,226,0.16) !important;
}

/* ---------- 12. SCROLLBAR + SELECTION ----------------------- */
html { scroll-behavior: smooth; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--il-blue-100); }
body::-webkit-scrollbar-thumb { background: var(--il-blue-700); }
body::-webkit-scrollbar-thumb:hover { background: var(--il-blue-900); }
::selection { background: var(--il-blue-700); color: #fff; }

/* ---------- 13. SHARP ORNAMENTS ----------------------------- */
.il-corner-frame {
  position: relative;
  padding: 28px;
}
.il-corner-frame::before,
.il-corner-frame::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--il-blue-700);
  border-style: solid;
  border-width: 0;
  transition: width .4s var(--il-ease), height .4s var(--il-ease), border-color .4s var(--il-ease);
}
.il-corner-frame::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.il-corner-frame::after  { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.il-corner-frame:hover::before,
.il-corner-frame:hover::after { width: 36px; height: 36px; border-color: var(--il-blue-500); }

.il-stage { position: relative; }
.il-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(transparent 55%, rgba(0,26,54,0.30) 100%);
}

/* ---------- 14. PARTNERS BAR -------------------------------- */
.animate-partners-scroll img {
  filter: grayscale(1) contrast(0.85) brightness(0.65) !important;
  opacity: 0.55;
  transition: all .5s var(--il-ease) !important;
}
.animate-partners-scroll img:hover {
  filter: grayscale(0) contrast(1) brightness(1) !important;
  opacity: 1;
  transform: scale(1.05);
}
.animate-partners-scroll {
  animation: ilMarquee 30s linear infinite;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Replace bg-gray-50 (which is light gray in Tailwind) for sections with our cleaner version */
section.bg-gray-50 {
  background: var(--il-gray-50) !important;
}

/* ---------- 15. SECTION VARIANTS ---------------------------- */

/* DARK navy section — used for stats, CTA */
.il-section-dark {
  background: linear-gradient(135deg, var(--il-blue-900) 0%, var(--il-blue-950) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.il-section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: 0.6;
}
.il-section-dark::after {
  content: "";
  position: absolute;
  top: -200px; right: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(41,119,226,0.30) 0%, transparent 65%);
  pointer-events: none;
  filter: blur(20px);
}
.il-section-dark h2, .il-section-dark h3 { color: #fff; }
.il-section-dark .il-eyebrow { color: var(--il-blue-300); }
.il-section-dark .il-divider { background: var(--il-blue-500); }

/* ACCENT bright-blue section */
.il-section-accent {
  background: linear-gradient(135deg, var(--il-blue-500) 0%, var(--il-blue-700) 60%, var(--il-blue-900) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.il-section-accent .il-eyebrow { color: rgba(255,255,255,0.85); }
.il-section-accent h2, .il-section-accent h3 { color: #fff; }

/* PAPER (clean white) section */
.il-section-paper {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--il-blue-50) 100%);
  position: relative;
}

/* GRAY section */
.il-section-gray {
  background: var(--il-gray-50);
  position: relative;
}

/* SPLIT — half navy half white */
.il-section-split {
  position: relative;
  overflow: hidden;
}
.il-section-split::before {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  background: linear-gradient(135deg, var(--il-blue-900), var(--il-blue-700));
  z-index: 0;
}
@media (max-width: 768px) {
  .il-section-split::before { inset: 0 0 50% 0; }
}

/* DIAGONAL skewed top edge */
.il-section-skew-top {
  position: relative;
  margin-top: -1px;
}
.il-section-skew-top::before {
  content: "";
  position: absolute;
  top: -60px; left: 0; right: 0; height: 80px;
  background: inherit;
  transform: skewY(-2deg);
  transform-origin: top left;
  z-index: 0;
}

/* Marquee text strip — endless WAU strip */
.il-marquee {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  border-block: 1px solid var(--il-blue-700);
  background: var(--il-blue-50);
  padding: 18px 0;
}
.il-marquee__track {
  display: inline-flex;
  gap: 64px;
  animation: ilMarquee 36s linear infinite;
  white-space: nowrap;
  flex-shrink: 0;
}
.il-marquee__item {
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 3rem);
  color: var(--il-blue-900);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 64px;
}
.il-marquee__item::after {
  content: "✦";
  color: var(--il-blue-500);
  font-size: 0.6em;
  font-style: normal;
}
.il-marquee--dark { background: var(--il-blue-900); border-color: var(--il-blue-500); }
.il-marquee--dark .il-marquee__item { color: var(--il-blue-100); }
.il-marquee--dark .il-marquee__item::after { color: var(--il-blue-500); }

/* Stat numbers — gigantic outline + filled */
.il-stat {
  position: relative;
  padding: 32px 24px;
  border: 1px solid rgba(255,255,255,0.16);
  transition: background .5s var(--il-ease), border-color .5s var(--il-ease);
}
.il-stat:hover {
  background: rgba(41,119,226,0.18);
  border-color: var(--il-blue-500);
}
.il-stat__num {
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  font-size: clamp(3.6rem, 8vw, 6.4rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, #fff 0%, var(--il-blue-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.il-stat__label {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}

/* Service / project card with diagonal hover */
.il-card {
  position: relative;
  background: #fff;
  padding: 40px 32px;
  border: 1px solid rgba(0,34,71,0.10);
  overflow: hidden;
  transition: transform .55s var(--il-ease-out), border-color .4s var(--il-ease);
}
.il-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--il-blue-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--il-ease-out);
}
.il-card::after {
  content: "";
  position: absolute;
  bottom: -50%; right: -50%;
  width: 100%; height: 100%;
  background: radial-gradient(circle, var(--il-blue-100) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .55s var(--il-ease);
  pointer-events: none;
}
.il-card:hover {
  transform: translateY(-6px);
  border-color: var(--il-blue-700);
}
.il-card:hover::before { transform: scaleX(1); }
.il-card:hover::after  { opacity: 1; }
.il-card__num {
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: 14px;
  color: var(--il-blue-500);
  letter-spacing: 0.16em;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.il-card__num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0,34,71,0.16);
}

/* Big sticky title (column hero treatment) */
.il-stick-title {
  position: sticky;
  top: 120px;
}

/* Cursor-follow blob (filled by JS) */
.il-cursor-blob {
  position: fixed;
  top: 0; left: 0;
  width: 480px; height: 480px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(41,119,226,0.18) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0;
  transition: opacity .5s var(--il-ease);
  mix-blend-mode: multiply;
  will-change: transform;
}
.il-cursor-blob.is-active { opacity: 1; }
@media (hover: none) { .il-cursor-blob { display: none; } }

/* ---------- 15.5. CARD ENHANCEMENTS (project / blog / led) ----- */
/* Polishing the existing white cards rendered by JS */
section [class*="bg-white"][class*="rounded-2xl"],
section [class*="bg-white"][class*="rounded-xl"] {
  position: relative;
  overflow: hidden;
  transition: transform .55s var(--il-ease-out), border-color .4s var(--il-ease) !important;
}
section [class*="bg-white"][class*="rounded-2xl"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--il-blue-500), var(--il-blue-700));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--il-ease-out);
  z-index: 1;
}
section [class*="bg-white"][class*="rounded-2xl"]:hover::before {
  transform: scaleX(1);
}

/* Hover scale-fix for card images */
section [class*="bg-white"] img {
  transition: transform .8s var(--il-ease-out) !important;
}
section [class*="bg-white"]:hover img {
  transform: scale(1.04);
}

/* Section eyebrow numbering helper */
.il-section-num {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  font-style: italic;
  color: var(--il-blue-500);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.il-section-num::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--il-blue-500);
}

/* ---------- 15.7. PROJECT CARD (il-pcard) ------------------- */
.il-projects-section {
  background: linear-gradient(180deg, var(--il-blue-50) 0%, #FFFFFF 100%);
  position: relative;
}
.il-projects-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(0,34,71,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,34,71,0.05) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.4;
}

/* Blue framed inner shell */
.il-projects-frame {
  background: linear-gradient(135deg, #002247 0%, #001A36 50%, #001027 100%);
  border: 1px solid var(--il-blue-500);
  position: relative;
  box-shadow:
    14px 14px 0 -2px rgba(41,119,226,0.18),
    0 30px 80px -20px rgba(0,34,71,0.45);
}
.il-projects-frame::after {
  content: "";
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px solid rgba(41,119,226,0.30);
  pointer-events: none;
  z-index: 1;
}

.il-projects-frame__corner {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: 4;
  pointer-events: none;
}
.il-projects-frame__corner::before,
.il-projects-frame__corner::after {
  content: "";
  position: absolute;
  background: var(--il-blue-500);
}
.il-projects-frame__corner::before { width: 30px; height: 2px; }
.il-projects-frame__corner::after  { width: 2px; height: 30px; }

.il-projects-frame__corner--tl { top: -1px; left: -1px; }
.il-projects-frame__corner--tl::before { top: 0; left: 0; }
.il-projects-frame__corner--tl::after  { top: 0; left: 0; }

.il-projects-frame__corner--tr { top: -1px; right: -1px; }
.il-projects-frame__corner--tr::before { top: 0; right: 0; }
.il-projects-frame__corner--tr::after  { top: 0; right: 0; }

.il-projects-frame__corner--bl { bottom: -1px; left: -1px; }
.il-projects-frame__corner--bl::before { bottom: 0; left: 0; }
.il-projects-frame__corner--bl::after  { bottom: 0; left: 0; }

.il-projects-frame__corner--br { bottom: -1px; right: -1px; }
.il-projects-frame__corner--br::before { bottom: 0; right: 0; }
.il-projects-frame__corner--br::after  { bottom: 0; right: 0; }

@media (max-width: 640px) {
  .il-projects-frame__corner { width: 20px; height: 20px; }
  .il-projects-frame__corner::before { width: 20px; }
  .il-projects-frame__corner::after  { height: 20px; }
}

.il-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0,34,71,0.10);
  overflow: hidden;
  transition: transform .55s var(--il-ease-out), border-color .4s var(--il-ease), box-shadow .55s var(--il-ease) !important;
  height: 100%;
}
.il-pcard:hover {
  transform: translateY(-6px);
  border-color: var(--il-blue-700);
  box-shadow: 18px 18px 0 -2px rgba(3,74,166,0.18);
}
.il-pcard::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--il-blue-500), var(--il-blue-700));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--il-ease-out);
  z-index: 5;
}
.il-pcard:hover::before { transform: scaleX(1); }

.il-pcard__media {
  position: relative;
  width: 100%;
  padding-top: 75%;
  background: linear-gradient(135deg, var(--il-blue-50), var(--il-blue-100));
  overflow: hidden;
}
.il-pcard__media > canvas,
.il-pcard__media > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  background: #fff;
  transition: transform 1s var(--il-ease-out), filter .8s var(--il-ease);
  display: block;
  z-index: 2;
}
.il-pcard:hover .il-pcard__media > canvas,
.il-pcard:hover .il-pcard__media > img {
  transform: scale(1.06);
}

.il-pcard__loader {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--il-blue-50), var(--il-blue-100)),
    repeating-linear-gradient(45deg, rgba(0,34,71,0.04) 0 8px, transparent 8px 16px);
  background-blend-mode: multiply;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: opacity .4s var(--il-ease);
}
.il-pcard__loader::after {
  content: "";
  width: 28px; height: 28px;
  border: 2px solid rgba(0,34,71,0.18);
  border-top-color: var(--il-blue-700);
  animation: ilSpin 1s linear infinite;
  border-radius: 50% !important;
}
.il-pcard--loaded .il-pcard__loader { opacity: 0; pointer-events: none; }

@keyframes ilSpin {
  to { transform: rotate(360deg); }
}

.il-pcard__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--il-blue-700) 0%, var(--il-blue-900) 100%);
}
.il-pcard__placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.il-pcard__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,34,71,0.55) 100%);
  opacity: 0;
  transition: opacity .55s var(--il-ease);
  pointer-events: none;
  z-index: 2;
}
.il-pcard:hover .il-pcard__overlay { opacity: 1; }

.il-pcard__num {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 4;
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--il-blue-700);
  background: #fff;
  padding: 4px 10px;
  border: 1px solid var(--il-blue-700);
  font-weight: 600;
}

.il-pcard__tag {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 4;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background: var(--il-blue-700);
  padding: 5px 12px;
}

.il-pcard__corner {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid #fff;
  z-index: 3;
  opacity: 0;
  transition: opacity .4s var(--il-ease), inset .4s var(--il-ease);
}
.il-pcard__corner--tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.il-pcard__corner--tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.il-pcard__corner--bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.il-pcard__corner--br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.il-pcard:hover .il-pcard__corner { opacity: 0.9; }
.il-pcard:hover .il-pcard__corner--tl { top: 14px; left: 14px; }
.il-pcard:hover .il-pcard__corner--tr { top: 14px; right: 14px; }
.il-pcard:hover .il-pcard__corner--bl { bottom: 14px; left: 14px; }
.il-pcard:hover .il-pcard__corner--br { bottom: 14px; right: 14px; }

.il-pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px 22px;
  background: #fff;
  position: relative;
  z-index: 1;
}
.il-pcard__title {
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--il-blue-900);
  margin: 0 0 18px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}
.il-pcard__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 12px 0;
  border-top: 1px solid rgba(0,34,71,0.10);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--il-blue-900);
  transition: color .35s var(--il-ease);
}
.il-pcard__arrow {
  display: inline-block;
  font-size: 16px;
  color: var(--il-blue-500);
  transition: transform .35s var(--il-ease-out);
}
.il-pcard:hover .il-pcard__cta { color: var(--il-blue-700); }
.il-pcard:hover .il-pcard__arrow { transform: translateX(8px); }

/* Override generic card hover for these */
section .il-pcard.il-pcard {
  border-radius: 0 !important;
}
section .il-pcard::before { transform: scaleX(0); }
section .il-pcard:hover::before { transform: scaleX(1); }

/* ---------- 15.8. ADVANTAGES CINEMATIC GRID --------------- */
.il-adv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 768px) {
  .il-adv-grid { grid-template-columns: 1fr; gap: 12px; }
}

.il-adv-card {
  position: relative;
  height: 320px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.10);
  transition: border-color .55s var(--il-ease), transform .55s var(--il-ease-out);
}
.il-adv-card:hover {
  border-color: var(--il-blue-500);
  transform: translateY(-4px);
}

.il-adv-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(0.3) brightness(0.55);
  transition: transform 1.4s var(--il-ease-out), filter .8s var(--il-ease);
  z-index: 0;
}
.il-adv-card:hover .il-adv-card__bg {
  transform: scale(1.08);
  filter: grayscale(0) brightness(0.7);
}

.il-adv-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,18,38,0.45) 0%, rgba(0,18,38,0.55) 50%, rgba(0,18,38,0.92) 100%),
    radial-gradient(circle at 80% 20%, rgba(41,119,226,0.20), transparent 60%);
  z-index: 1;
  transition: background .55s var(--il-ease);
}
.il-adv-card:hover .il-adv-card__overlay {
  background:
    linear-gradient(180deg, rgba(0,18,38,0.30) 0%, rgba(0,18,38,0.40) 50%, rgba(0,18,38,0.85) 100%),
    radial-gradient(circle at 80% 20%, rgba(41,119,226,0.32), transparent 60%);
}

.il-adv-card__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 24px;
}

.il-adv-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform .5s var(--il-ease-out);
}
.il-adv-card__num {
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: 36px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  position: relative;
  padding-left: 14px;
}
.il-adv-card__num::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 1px;
  background: var(--il-blue-500);
  transform: translateY(-50%);
  transition: width .5s var(--il-ease-out);
}
.il-adv-card:hover .il-adv-card__num::before { width: 18px; }

.il-adv-card__icon {
  width: 32px;
  height: 32px;
  color: var(--il-blue-300);
  transition: transform .6s var(--il-ease-out), color .35s var(--il-ease);
}
.il-adv-card:hover .il-adv-card__icon {
  transform: rotate(8deg) scale(1.1);
  color: #fff;
}

.il-adv-card__bottom {
  position: relative;
  transform: translateY(36px);
  transition: transform .5s var(--il-ease-out);
}
.il-adv-card:hover .il-adv-card__bottom {
  transform: translateY(0);
}

.il-adv-card__title {
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.05;
}
.il-adv-card__desc {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  margin-bottom: 14px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s var(--il-ease-out), opacity .5s var(--il-ease), margin-bottom .5s var(--il-ease);
}
.il-adv-card:hover .il-adv-card__desc {
  max-height: 120px;
  opacity: 1;
}

.il-adv-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.18);
  width: 100%;
  justify-content: space-between;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  border-top-width: 0;
  padding-top: 0;
  transition: max-height .5s var(--il-ease-out), opacity .5s var(--il-ease), padding-top .5s var(--il-ease), border-top-width .5s var(--il-ease);
}
.il-adv-card:hover .il-adv-card__cta {
  max-height: 60px;
  opacity: 1;
  padding-top: 12px;
  border-top-width: 1px;
}
.il-adv-card__arrow {
  font-size: 16px;
  color: var(--il-blue-300);
  transition: transform .35s var(--il-ease-out);
}
.il-adv-card:hover .il-adv-card__arrow { transform: translateX(8px); color: #fff; }

/* Top corner accent — sharp blue tick */
.il-adv-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--il-blue-500);
  z-index: 5;
  transition: width .55s var(--il-ease-out);
}
.il-adv-card:hover::before { width: 60%; }

.il-adv-card::after {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 8px; height: 8px;
  background: var(--il-blue-500);
  z-index: 5;
  opacity: 0;
  transition: opacity .4s var(--il-ease) .15s, transform .4s var(--il-ease-out) .15s;
}
.il-adv-card:hover::after {
  opacity: 1;
  transform: scale(1.2);
}

/* Tighten the section */
.il-advantages.il-section-dark::before { background-size: 80px 80px; }

/* ---------- 15.9. LED CINEMATIC SECTION ------------------- */
.il-led-section {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--il-blue-50) 100%);
  position: relative;
}

.il-led-card {
  position: relative;
  display: block;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid rgba(0,34,71,0.12);
  background: #001A36;
  height: 100%;
  transition: border-color .55s var(--il-ease), transform .55s var(--il-ease-out);
}
.il-led-card:hover {
  border-color: var(--il-blue-500);
  transform: translateY(-5px);
}

.il-led-card__media {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .il-led-card__media { height: 320px; }
}

.il-led-card__img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  filter: brightness(0.78) saturate(1.1);
  transition: transform 1.4s var(--il-ease-out), filter .8s var(--il-ease);
  z-index: 0;
}
.il-led-card:hover .il-led-card__img {
  transform: scale(1.08);
  filter: brightness(0.9) saturate(1.2);
}

.il-led-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 30%, rgba(0,18,38,0.45) 65%, rgba(0,18,38,0.96) 100%),
    linear-gradient(135deg, rgba(0,34,71,0.35) 0%, transparent 60%);
  z-index: 1;
  transition: opacity .5s var(--il-ease);
}

.il-led-card__chips {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.il-led-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
}
.il-led-card__chip--live {
  background: var(--il-blue-500);
  color: #fff;
}
.il-led-card__chip--num {
  background: rgba(255,255,255,0.92);
  color: var(--il-blue-900);
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border: 1px solid rgba(0,34,71,0.18);
}
.il-led-card__pulse {
  width: 6px; height: 6px;
  background: #fff;
  animation: ilPulse 1.6s ease-in-out infinite;
  border-radius: 50% !important;
}

.il-led-card__corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--il-blue-300);
  z-index: 4;
  opacity: 0;
  transition: opacity .45s var(--il-ease), inset .45s var(--il-ease-out);
}
.il-led-card__corner--tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.il-led-card__corner--tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.il-led-card__corner--bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.il-led-card__corner--br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.il-led-card:hover .il-led-card__corner { opacity: 1; }
.il-led-card:hover .il-led-card__corner--tl { top: 14px; left: 14px; }
.il-led-card:hover .il-led-card__corner--tr { top: 14px; right: 14px; }
.il-led-card:hover .il-led-card__corner--bl { bottom: 14px; left: 14px; }
.il-led-card:hover .il-led-card__corner--br { bottom: 14px; right: 14px; }

.il-led-card__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 20px 20px 20px;
  z-index: 3;
  color: #fff;
  transform: translateY(0);
  transition: transform .55s var(--il-ease-out);
}

.il-led-card__pin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--il-blue-300);
  margin-bottom: 8px;
}
.il-led-card__pin svg {
  width: 12px;
  height: 12px;
}
.il-led-card:hover .il-led-card__pin { color: #fff; }

.il-led-card__title {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 4px 0;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.il-led-card__desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s var(--il-ease-out), opacity .5s var(--il-ease), margin-top .5s var(--il-ease);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.il-led-card:hover .il-led-card__desc {
  max-height: 80px;
  opacity: 1;
  margin-top: 6px;
}

.il-led-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  padding-top: 0;
  border-top: 1px solid rgba(255,255,255,0);
  width: 100%;
  justify-content: space-between;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s var(--il-ease-out), opacity .5s var(--il-ease), padding-top .5s var(--il-ease), border-top-color .5s var(--il-ease), margin-top .5s var(--il-ease);
}
.il-led-card:hover .il-led-card__cta {
  max-height: 50px;
  opacity: 1;
  padding-top: 10px;
  margin-top: 12px;
  border-top-color: rgba(255,255,255,0.18);
}
.il-led-card__arrow {
  font-size: 16px;
  color: var(--il-blue-300);
  transition: transform .35s var(--il-ease-out);
}
.il-led-card:hover .il-led-card__arrow {
  transform: translateX(8px);
  color: #fff;
}

/* Top accent line on hover */
.il-led-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--il-blue-500);
  z-index: 5;
  transition: width .55s var(--il-ease-out);
}
.il-led-card:hover::before { width: 100%; }

/* ---------- 15.95. BLOG CARD (il-bcard) -------------------- */
.il-blog-section {
  background: linear-gradient(180deg, var(--il-blue-50) 0%, #FFFFFF 100%);
  position: relative;
}

.il-bcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0,34,71,0.10);
  overflow: hidden;
  transition: transform .55s var(--il-ease-out), border-color .4s var(--il-ease), box-shadow .55s var(--il-ease) !important;
  height: 100%;
  cursor: pointer;
}
.il-bcard:hover {
  transform: translateY(-6px);
  border-color: var(--il-blue-700);
  box-shadow: 18px 18px 0 -2px rgba(3,74,166,0.18);
}
.il-bcard::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--il-blue-500), var(--il-blue-700));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--il-ease-out);
  z-index: 5;
}
.il-bcard:hover::before { transform: scaleX(1); }

.il-bcard__media {
  position: relative;
  width: 100%;
  padding-top: 62%;
  overflow: hidden;
  background: #001A36;
}

.il-bcard__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  filter: brightness(0.92) saturate(1.05);
  transition: transform 1.4s var(--il-ease-out), filter .8s var(--il-ease) !important;
  z-index: 1;
}
.il-bcard:hover .il-bcard__img {
  transform: scale(1.07);
  filter: brightness(1) saturate(1.15);
}

.il-bcard__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,18,38,0.22) 100%);
  z-index: 2;
  opacity: 0;
  transition: opacity .5s var(--il-ease);
}
.il-bcard:hover .il-bcard__overlay { opacity: 1; }

.il-bcard__num {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 4;
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--il-blue-700);
  background: #fff;
  padding: 4px 10px;
  border: 1px solid var(--il-blue-700);
  font-weight: 600;
}

.il-bcard__date {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 4;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background: var(--il-blue-500);
  padding: 5px 12px;
}

.il-bcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 20px 22px;
  background: #fff;
  position: relative;
  z-index: 1;
}

.il-bcard__title {
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--il-blue-900);
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  transition: color .35s var(--il-ease);
}
.il-bcard:hover .il-bcard__title { color: var(--il-blue-700); }

.il-bcard__desc {
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: var(--il-gray-500);
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.il-bcard__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 12px 0 0 0;
  border-top: 1px solid rgba(0,34,71,0.10);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--il-blue-900);
  transition: color .35s var(--il-ease);
}
.il-bcard__arrow {
  display: inline-block;
  font-size: 16px;
  color: var(--il-blue-500);
  transition: transform .35s var(--il-ease-out);
}
.il-bcard:hover .il-bcard__cta { color: var(--il-blue-700); }
.il-bcard:hover .il-bcard__arrow { transform: translateX(8px); }

/* Override */
section .il-bcard.il-bcard { border-radius: 0 !important; }

/* ---------- 15.96. ABOUT PAGE COMPONENTS ------------------ */
/* Feature row in About Company section */
.il-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(0,34,71,0.10);
  font-size: 14px;
  color: var(--il-blue-900);
  font-weight: 500;
  letter-spacing: 0;
  transition: padding-left .35s var(--il-ease);
}
.il-feature-row:hover { padding-left: 6px; }
.il-feature-row__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--il-blue-500);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.il-section-num--center {
  display: inline-flex;
  justify-content: center;
}
.il-section-num--center::after {
  display: none;
}
.il-section-num--center::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--il-blue-500);
  margin-right: 14px;
}

/* About visual block */
.il-about-visual {
  position: relative;
}

/* Problems & Solutions */
.il-ps-section {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--il-blue-50) 100%);
}
.il-ps-solutions {
  background: linear-gradient(135deg, var(--il-blue-900) 0%, var(--il-blue-950) 100%);
  position: relative;
  overflow: hidden;
}
.il-ps-solutions::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.il-ps-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
  padding: 4px 0;
  position: relative;
  z-index: 1;
}
.il-ps-item__bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(0,34,71,0.10);
  color: var(--il-blue-900);
}
.il-ps-item--solution .il-ps-item__bullet {
  background: var(--il-blue-500);
  color: #fff;
}

/* Roadmap horizontal timeline */
.il-timeline {
  position: relative;
  padding-top: 20px;
}
.il-timeline__line {
  position: absolute;
  top: 35px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--il-blue-500), var(--il-blue-700), var(--il-blue-500), transparent);
  display: none;
}
@media (min-width: 1024px) {
  .il-timeline__line { display: block; }
}

.il-tstep {
  position: relative;
  padding: 28px 18px 20px 18px;
  border-top: 2px solid var(--il-blue-500);
  background: rgba(255,255,255,0.04);
  transition: background .45s var(--il-ease), transform .45s var(--il-ease-out);
}
.il-tstep::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 18px;
  width: 12px;
  height: 12px;
  background: var(--il-blue-500);
  z-index: 2;
  transition: transform .45s var(--il-ease-out), background .45s var(--il-ease);
}
.il-tstep:hover {
  background: rgba(41,119,226,0.10);
  transform: translateY(-3px);
}
.il-tstep:hover::before {
  background: #fff;
  transform: scale(1.25);
}
.il-tstep__num {
  font-family: 'TT Commons', 'Inter', 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: 28px;
  color: var(--il-blue-300);
  margin-bottom: 12px;
  line-height: 1;
}
.il-tstep__title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 6px;
}
.il-tstep__desc {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.65);
}

/* ---------- 15.10. CTA ARROW BUTTONS ----------------------- */
.il-cta-arrow {
  position: relative;
}
.il-cta-arrow .il-cta-arrow__icon {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  transition: transform .35s var(--il-ease-out);
}
.il-cta-arrow:hover .il-cta-arrow__icon {
  transform: translateX(8px);
}

/* ---------- 15.11. HEADER ACTIVE PAGE INDICATOR ------------ */
nav.fixed.il-nav-blue a.il-nav-active:not(#nav-contact) {
  color: #fff !important;
}
nav.fixed.il-nav-blue a.il-nav-active:not(#nav-contact)::before {
  left: 16px !important;
  right: 16px !important;
  height: 2px !important;
  background: var(--il-blue-500) !important;
}

/* Mobile menu active state — left accent bar */
#mobile-menu a.il-nav-active {
  color: #fff !important;
  position: relative;
}
#mobile-menu a.il-nav-active::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 1px;
  background: var(--il-blue-500);
}

/* Footer credit link to 404dev.uz */
.il-credit-link {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 700;
  position: relative;
}
.il-credit-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: rgba(255,255,255,0.4);
  transition: background .35s var(--il-ease);
}
.il-credit-link:hover::after { background: var(--il-blue-300); }

/* ---------- 16. WAU MICRO TREATMENTS ----------------------- */
.il-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--il-blue-900);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
  padding-bottom: 4px;
}
.il-link-arrow::after {
  content: "→";
  display: inline-block;
  transition: transform .35s var(--il-ease-out);
}
.il-link-arrow:hover::after { transform: translateX(8px); }

.il-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--il-blue-50);
  border: 1px solid var(--il-blue-700);
  color: var(--il-blue-900);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.il-chip__dot {
  width: 6px; height: 6px;
  background: var(--il-blue-500);
  animation: ilPulse 2s ease-in-out infinite;
}

.il-tag-floating {
  position: absolute;
  background: var(--il-blue-900);
  color: #fff;
  padding: 14px 22px;
  border-left: 3px solid var(--il-blue-500);
}
.il-tag-floating__top {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 4px;
}

/* ---------- 16.5. HERO LAYOUT (rock-solid grid) -------------- */
.il-hero {
  display: grid;
  grid-template-rows: 80px 1fr;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
}
.il-hero__spacer { grid-row: 1; }
.il-hero__main {
  grid-row: 2;
  display: flex;
  align-items: stretch;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 12px;
  overflow: hidden;
}
.il-hero__main > .max-w-7xl { display: flex; align-items: stretch; }
.il-hero__main .grid { width: 100%; align-items: stretch; }
.il-hero__main .grid > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 4px;
}

/* Visual: portrait card aligned to top of row */
.il-hero__visual {
  width: 100%;
  max-width: 460px;
  height: clamp(440px, 70vh, 640px);
  margin-left: auto;
  margin-right: auto;
  margin-top: 4px;
  align-self: flex-start;
}

/* Colored client lenta */
.il-partners-bar {
  position: relative;
  overflow: hidden;
  padding: 14px 0;
  border-top: 1px solid rgba(0,34,71,0.12);
  border-bottom: 1px solid rgba(0,34,71,0.12);
  background: linear-gradient(90deg, rgba(255,255,255,0.7) 0%, rgba(244,248,254,0.85) 50%, rgba(255,255,255,0.7) 100%);
  backdrop-filter: blur(4px);
}
.il-partners-bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--il-blue-500);
}
.il-partners-bar__fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 10;
  pointer-events: none;
}
.il-partners-bar__fade--left {
  left: 4px;
  background: linear-gradient(90deg, rgba(244,248,254,1) 0%, rgba(255,255,255,0) 100%);
}
.il-partners-bar__fade--right {
  right: 0;
  background: linear-gradient(-90deg, rgba(244,248,254,1) 0%, rgba(255,255,255,0) 100%);
}
.il-partners-bar img {
  filter: none !important;
  opacity: 1 !important;
  transition: transform .4s var(--il-ease) !important;
}
.il-partners-bar img:hover {
  transform: scale(1.08);
}

@media (max-height: 760px) {
  .il-hero__main { padding-top: 8px; padding-bottom: 16px; }
  .il-partners-bar { padding: 12px 0; }
  .il-partners-bar img { height: 32px !important; }
}

/* =====================================================================
   Hero video carousel — soft cinematic crossfade (GPU-friendly)
   Pure opacity + transform (no clip-path, no heavy filters)
   ===================================================================== */
.il-vid-stack {
  isolation: isolate;
}

.il-vid-slide {
  transition:
    opacity 1.6s cubic-bezier(.4, 0, .2, 1),
    transform 1.8s cubic-bezier(.16, 1, .3, 1) !important;
  transform: scale(1.025);
  z-index: 1;
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.il-vid-slide.opacity-100 {
  transform: scale(1);
  z-index: 2;
}

/* Outgoing — gentle pull-back fade */
.il-vid-slide.is-leaving {
  animation: ilVidLeave 1600ms cubic-bezier(.4, 0, .2, 1) forwards;
  z-index: 1 !important;
}
@keyframes ilVidLeave {
  0%   { transform: scale(1);     opacity: 1; }
  100% { transform: scale(1.04);  opacity: 0; }
}

/* Incoming — gentle scale-in fade */
.il-vid-slide.is-entering {
  animation: ilVidEnter 1800ms cubic-bezier(.16, 1, .3, 1) forwards;
  z-index: 3 !important;
}
@keyframes ilVidEnter {
  0%   { opacity: 0; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* FX layer container */
.il-vid-fx {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 14;
  overflow: hidden;
}

/* Diagonal brand sweep — main hero of the transition */
.il-vid-fx__sweep {
  position: absolute;
  top: -20%;
  left: -60%;
  width: 55%;
  height: 140%;
  transform: skewX(-20deg) translateX(-200%);
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(41,119,226,0)        18%,
    rgba(41,119,226,0.55)     38%,
    rgba(255,255,255,0.95)    48%,
    rgba(226,237,251,1)       50%,
    rgba(255,255,255,0.95)    52%,
    rgba(41,119,226,0.55)     62%,
    rgba(41,119,226,0)        82%,
    transparent 100%);
  filter: blur(2px) drop-shadow(0 0 24px rgba(88,149,238,0.8));
  opacity: 0;
  mix-blend-mode: screen;
}
.il-vid-fx__sweep.is-active {
  animation: ilVidSweep 1100ms cubic-bezier(.55,.05,.4,1) both;
}
@keyframes ilVidSweep {
  0%   { transform: skewX(-20deg) translateX(-200%); opacity: 0; }
  18%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: skewX(-20deg) translateX(420%);  opacity: 0; }
}

/* Bloom flash */
.il-vid-fx__flash {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255,255,255,0.55) 0%, rgba(88,149,238,0.32) 35%, rgba(0,34,71,0) 72%);
  opacity: 0;
  mix-blend-mode: screen;
}
.il-vid-fx__flash.is-active {
  animation: ilVidFlash 850ms cubic-bezier(.4,0,.2,1) both;
}
@keyframes ilVidFlash {
  0%   { opacity: 0; transform: scale(.85); }
  18%  { opacity: 1; transform: scale(1.05); }
  55%  { opacity: .35; }
  100% { opacity: 0; transform: scale(1.15); }
}

/* CRT-style scan lines that wash over briefly */
.il-vid-fx__scanlines {
  position: absolute; inset: -2px 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.18) 0 1px,
    rgba(255,255,255,0.04) 1px 2px,
    transparent 2px 4px);
  opacity: 0;
  mix-blend-mode: overlay;
  transform: translateY(-100%);
}
.il-vid-fx__scanlines.is-active {
  animation: ilVidScan 800ms linear both;
}
@keyframes ilVidScan {
  0%   { transform: translateY(-100%); opacity: 0; }
  18%  { opacity: .9; }
  60%  { opacity: .55; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* Glitch slice — quick double-shift bar */
.il-vid-fx__glitch {
  position: absolute;
  left: -3%; right: -3%;
  top: 38%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(41,119,226,0.9) 30%, #fff 50%, rgba(41,119,226,0.9) 70%, transparent 100%);
  box-shadow:
    0 -22px 0 -2px rgba(41,119,226,0.55),
    0  18px 0 -2px rgba(255,255,255,0.45);
  opacity: 0;
  filter: blur(.4px);
}
.il-vid-fx__glitch.is-active {
  animation: ilVidGlitch 700ms steps(8, end) both;
}
@keyframes ilVidGlitch {
  0%   { opacity: 0; transform: translateX(0)   scaleY(1); }
  10%  { opacity: 1; transform: translateX(-6px) scaleY(2); }
  25%  { opacity: 1; transform: translateX(8px)  scaleY(.6); }
  45%  { opacity: 1; transform: translateX(-3px) scaleY(1.4); }
  70%  { opacity: .8; transform: translateX(2px) scaleY(.8); }
  100% { opacity: 0; transform: translateX(0)   scaleY(1); }
}

/* Top + bottom edge accents that flash on transition */
.il-vid-fx__edge {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(88,149,238,0.95), #fff, rgba(88,149,238,0.95), transparent);
  opacity: 0;
  box-shadow: 0 0 18px rgba(88,149,238,0.85);
}
.il-vid-fx__edge--top    { top: 0; }
.il-vid-fx__edge--bottom { bottom: 0; }
.il-vid-fx__edge.is-active {
  animation: ilVidEdge 900ms cubic-bezier(.4,0,.2,1) both;
}
@keyframes ilVidEdge {
  0%   { opacity: 0; transform: scaleX(.2); }
  20%  { opacity: 1; transform: scaleX(1); }
  80%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(.2); }
}

/* Carousel dots — punchy active state */
#video-carousel .carousel-dot {
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--il-ease-out), background-color .35s var(--il-ease-out), width .35s var(--il-ease-out) !important;
}
#video-carousel .carousel-dot.ring-2 {
  width: 36px !important;
  background: #fff !important;
  box-shadow: 0 0 12px rgba(255,255,255,0.65), 0 0 22px rgba(88,149,238,0.65);
}
#video-carousel .carousel-dot.ring-2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(41,119,226,0.95) 50%, transparent 100%);
  animation: ilDotShine 5000ms linear infinite;
}
@keyframes ilDotShine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.dot-pop {
  animation: ilDotPop 700ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes ilDotPop {
  0%   { transform: scaleY(1)   scaleX(1); }
  35%  { transform: scaleY(2.2) scaleX(1.4); }
  100% { transform: scaleY(1)   scaleX(1); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .il-vid-slide,
  .il-vid-slide.is-leaving,
  .il-vid-slide.is-entering,
  .il-vid-fx__sweep,
  .il-vid-fx__flash,
  .il-vid-fx__scanlines,
  .il-vid-fx__glitch,
  .il-vid-fx__edge,
  .dot-pop {
    animation: none !important;
    transition: opacity .3s ease !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* Body offset — make sure first <section> sits flush under the fixed header */
body > br:first-of-type { display: none; }

/* Section title sizing — keep h2 standardized across the site */
section h2.text-4xl,
section h2.text-5xl,
section h2.text-6xl {
  font-size: clamp(1.85rem, 3.6vw, 2.95rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em;
}
section h1.text-5xl,
section h1.text-6xl,
section h1.text-7xl {
  font-size: clamp(2rem, 4.4vw, 3.6rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em;
}

/* Section padding — tame oversized vertical rhythm */
section.py-24 { padding-top: 56px !important; padding-bottom: 56px !important; }
section.py-28 { padding-top: 64px !important; padding-bottom: 64px !important; }
section.py-32 { padding-top: 72px !important; padding-bottom: 72px !important; }
section.py-20 { padding-top: 48px !important; padding-bottom: 48px !important; }
@media (min-width: 1024px) {
  section.py-24 { padding-top: 72px !important; padding-bottom: 72px !important; }
  section.py-28 { padding-top: 80px !important; padding-bottom: 80px !important; }
  section.py-32 { padding-top: 96px !important; padding-bottom: 96px !important; }
  section.py-20 { padding-top: 64px !important; padding-bottom: 64px !important; }
}

/* Body text right-sized */
section p.text-xl { font-size: 1rem !important; line-height: 1.6 !important; }
section p.text-lg { font-size: 0.95rem !important; line-height: 1.6 !important; }
@media (min-width: 1024px) {
  section p.text-xl { font-size: 1.075rem !important; }
  section p.text-lg { font-size: 1rem !important; }
}

/* Block titles inside cards (h3) keep tight */
section h3.text-3xl, section h3.text-4xl {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem) !important;
  line-height: 1.15 !important;
}

/* ---------- 17. RESPONSIVE TIGHTENING --------------------- */
@media (max-width: 1024px) {
  .il-cursor-blob { display: none; }
}
@media (max-width: 768px) {
  h1 { letter-spacing: -0.025em; }
  .il-corner-frame { padding: 16px; }
  .il-stick-title { position: static; }
  .il-card { padding: 28px 22px; }
  .il-stat { padding: 24px 18px; }
}
@media (max-width: 480px) {
  .il-eyebrow { font-size: 10px; letter-spacing: 0.24em; }
  .il-eyebrow::before { width: 18px; }
}

/* =====================================================================
   Wider main containers on large screens (halves the side padding
   on big monitors compared to the default max-w-7xl = 1280px).
   ===================================================================== */
@media (min-width: 1440px) {
  .max-w-7xl { max-width: 1600px !important; }
}
@media (min-width: 1800px) {
  .max-w-7xl { max-width: 1720px !important; }
}

/* =====================================================================
   IT SERVICES PAGE — brand-blue redesign
   ===================================================================== */

/* ---- Hero visual: code-style card ---- */
.il-it-visual {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-left: auto;
  aspect-ratio: 4 / 4.6;
}
.il-it-visual__frame-a {
  position: absolute; inset: -14px -14px auto auto;
  width: 100%; height: 100%;
  border: 1px solid rgba(41,119,226,0.55);
  pointer-events: none; z-index: 0;
}
.il-it-visual__frame-b {
  position: absolute; inset: -28px -28px auto auto;
  width: 100%; height: 100%;
  border: 1px solid rgba(3,74,166,0.30);
  pointer-events: none; z-index: 0;
}
.il-it-visual__chip-tl {
  position: absolute; top: -6px; left: -6px;
  width: 56px; height: 56px;
  border: 2px solid var(--il-blue-700);
  z-index: 0;
}
.il-it-visual__chip-br {
  position: absolute; bottom: -6px; right: -6px;
  width: 56px; height: 56px;
  background: var(--il-blue-500);
  z-index: 0;
}
.il-it-visual__card {
  position: relative;
  z-index: 10;
  width: 100%; height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--il-blue-900) 0%, var(--il-blue-950) 100%);
  box-shadow: 18px 18px 0 -2px rgba(3,74,166,0.22);
}
.il-it-visual__card::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.6;
}
.il-it-visual__card::after {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(138,180,244,0.40), transparent 65%);
  filter: blur(12px);
  pointer-events: none;
}
.il-it-visual__corner {
  position: absolute;
  width: 24px; height: 24px;
  border-color: rgba(255,255,255,0.85);
  border-style: solid;
  border-width: 0;
  z-index: 3;
}
.il-it-visual__corner.tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.il-it-visual__corner.tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.il-it-visual__corner.bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.il-it-visual__corner.br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }

.il-it-visual__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 36px 30px 28px;
  color: #fff;
}
.il-it-visual__dock {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 18px;
}
.il-it-visual__dot { width: 9px; height: 9px; border-radius: 50% !important; display: inline-block; }
.il-it-visual__dot--red { background: #FF5F57; }
.il-it-visual__dot--yellow { background: #FFBD2E; }
.il-it-visual__dot--green { background: #28C840; }
.il-it-visual__dock-label {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-family: 'TT Commons', 'Inter', monospace;
}
.il-it-visual__code {
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(255,255,255,0.92);
  flex: 1;
}
.il-it-visual__line {
  white-space: nowrap;
  overflow: hidden;
}
.il-it-visual__num {
  display: inline-block;
  width: 26px;
  color: rgba(255,255,255,0.30);
  font-size: 11px;
  user-select: none;
}
.il-it-visual__token--key   { color: #8AB4F4; font-style: italic; }
.il-it-visual__token--var   { color: #fff; font-weight: 600; }
.il-it-visual__token--prop  { color: #5895EE; }
.il-it-visual__token--str   { color: #B8E0FF; }
.il-it-visual__cursor {
  display: inline-block;
  width: 8px; height: 14px;
  background: var(--il-blue-300);
  vertical-align: -2px;
  margin-left: 4px;
  animation: ilCaret 1.05s steps(2) infinite;
}
@keyframes ilCaret { 50% { opacity: 0; } }

.il-it-visual__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 16px;
}
.il-it-visual__pill {
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  background: rgba(41,119,226,0.18);
  border: 1px solid rgba(138,180,244,0.40);
  color: #B8E0FF;
}
@media (max-width: 1024px) { .il-it-visual { display: none; } }

/* ---- Service cards (il-svc-card) ---- */
.il-svc-card {
  position: relative;
  background: #fff;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  transition: background .45s var(--il-ease), border-color .4s var(--il-ease), transform .55s var(--il-ease-out);
}
.il-svc-card:hover {
  background: var(--il-blue-50);
  transform: translateY(-2px);
}
.il-svc-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: linear-gradient(90deg, var(--il-blue-500), var(--il-blue-700));
  transition: width .55s var(--il-ease-out);
}
.il-svc-card:hover::before { width: 60%; }
.il-svc-card__num {
  font-family: 'TT Commons', 'Inter', sans-serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--il-blue-500);
  font-weight: 600;
  margin-bottom: 18px;
  position: relative;
  padding-left: 18px;
}
.il-svc-card__num::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 12px; height: 1px;
  background: var(--il-blue-500);
  transform: translateY(-50%);
  transition: width .4s var(--il-ease-out);
}
.il-svc-card:hover .il-svc-card__num::before { width: 22px; }

.il-svc-card__icon {
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--il-blue-900);
  color: #fff;
  margin-bottom: 22px;
  transition: background .4s var(--il-ease), transform .5s var(--il-ease-out);
}
.il-svc-card__icon svg { width: 24px; height: 24px; }
.il-svc-card:hover .il-svc-card__icon {
  background: var(--il-blue-500);
  transform: rotate(-4deg) scale(1.04);
}

.il-svc-card__title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--il-blue-900);
  margin-bottom: 12px;
  line-height: 1.2;
}
.il-svc-card__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--il-gray-700);
  margin-bottom: 18px;
}
.il-svc-card__list {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(0,34,71,0.10);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.il-svc-card__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--il-gray-700);
}
.il-svc-card__check {
  color: var(--il-blue-700);
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  line-height: 1.25;
  flex-shrink: 0;
}

/* CTA tile inside services grid */
.il-svc-cta {
  position: relative;
  background: linear-gradient(135deg, var(--il-blue-900) 0%, var(--il-blue-700) 60%, var(--il-blue-500) 100%);
  padding: 36px 28px 32px;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.il-svc-cta::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.6;
  pointer-events: none;
}
.il-svc-cta::after {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 65%);
  filter: blur(8px);
  pointer-events: none;
}
.il-svc-cta__num {
  position: relative;
  z-index: 1;
  font-family: 'TT Commons', 'Inter', sans-serif;
  font-style: italic;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,0.85);
  margin-bottom: 18px;
}
.il-svc-cta__title {
  position: relative;
  z-index: 1;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 12px;
}
.il-svc-cta__desc {
  position: relative;
  z-index: 1;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin-bottom: 22px;
}
.il-svc-cta__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 14px 18px;
  background: #fff;
  color: var(--il-blue-900) !important;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid #fff;
  transition: all .35s var(--il-ease) !important;
}
.il-svc-cta__btn:hover { background: var(--il-blue-900); color: #fff !important; border-color: var(--il-blue-900); }
.il-svc-cta__arrow {
  font-size: 16px;
  transition: transform .35s var(--il-ease-out);
}
.il-svc-cta__btn:hover .il-svc-cta__arrow { transform: translateX(8px); }

/* ---- IT Project tabs ---- */
.il-it-tabs {
  display: inline-flex;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px;
}
.il-it-tab {
  padding: 12px 24px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: all .35s var(--il-ease) !important;
}
.il-it-tab:hover { color: #fff; background: rgba(255,255,255,0.06); }
.il-it-tab.active {
  background: #fff;
  color: var(--il-blue-900);
}

/* il-pcard variant for dark sections */
.il-pcard.il-pcard--dark {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.il-pcard.il-pcard--dark:hover { border-color: var(--il-blue-500); }
.il-pcard.il-pcard--dark .il-pcard__body { background: rgba(255,255,255,0.04); }
.il-pcard.il-pcard--dark .il-pcard__title { color: #fff; }
.il-pcard.il-pcard--dark .il-pcard__sub {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.70);
  margin-bottom: 14px;
}
.il-pcard.il-pcard--dark .il-pcard__cta {
  border-top-color: rgba(255,255,255,0.15);
  color: #fff;
}
.il-pcard.il-pcard--dark .il-pcard__cta:hover { color: var(--il-blue-300); }

/* Apps "coming soon" tile */
.il-it-soon {
  position: relative;
  padding: 56px 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  text-align: center;
  overflow: hidden;
}
.il-it-soon__corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--il-blue-500);
  border-style: solid;
  border-width: 0;
}
.il-it-soon__corner.tl { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.il-it-soon__corner.tr { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.il-it-soon__corner.bl { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.il-it-soon__corner.br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }
.il-it-soon__icon {
  width: 64px; height: 64px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--il-blue-700);
  color: #fff;
}
.il-it-soon__icon svg { width: 28px; height: 28px; }
.il-it-soon__title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 12px;
}
.il-it-soon__desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.70);
  max-width: 520px;
  margin: 0 auto;
}

/* ---- Why-choose-us card ---- */
.il-why-card {
  position: relative;
  background: #fff;
  padding: 32px 26px 30px;
  display: flex;
  flex-direction: column;
  transition: background .45s var(--il-ease), transform .55s var(--il-ease-out);
}
.il-why-card:hover {
  background: var(--il-blue-50);
  transform: translateY(-2px);
}
.il-why-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--il-blue-500);
  transition: width .55s var(--il-ease-out);
}
.il-why-card:hover::before { width: 50%; }
.il-why-card__num {
  font-family: 'TT Commons', 'Inter', sans-serif;
  font-style: italic;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--il-blue-900) 0%, var(--il-blue-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 18px;
}
.il-why-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--il-blue-900);
  margin-bottom: 10px;
  line-height: 1.2;
}
.il-why-card__desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--il-gray-700);
}

/* ---- IT Contact section ---- */
.il-it-contact {
  background: linear-gradient(135deg, var(--il-blue-900) 0%, var(--il-blue-950) 100%);
  position: relative;
  overflow: hidden;
}
.il-it-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: 0.5;
  pointer-events: none;
}
.il-it-contact::after {
  content: "";
  position: absolute;
  top: -200px; right: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(41,119,226,0.30) 0%, transparent 65%);
  filter: blur(20px);
  pointer-events: none;
}
.il-it-contact__giant {
  font-family: 'TT Commons', 'Inter', sans-serif;
  position: absolute;
  bottom: -30px;
  right: 30px;
  font-size: clamp(8rem, 18vw, 16rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: rgba(255,255,255,0.05);
  pointer-events: none;
  user-select: none;
  font-style: italic;
}
.il-it-contact__bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-size: 13.5px;
  color: rgba(255,255,255,0.85);
  line-height: 1.55;
  transition: padding-left .35s var(--il-ease);
}
.il-it-contact__bullet:hover { padding-left: 8px; }
.il-it-contact__bullet-num {
  font-family: 'TT Commons', 'Inter', sans-serif;
  font-style: italic;
  font-size: 18px;
  color: var(--il-blue-300);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

/* Contact form shell */
.il-it-form-shell {
  position: relative;
  background: #fff;
  padding: 36px 32px 32px;
  box-shadow: 22px 22px 0 -2px rgba(255,255,255,0.06);
}
.il-it-form-shell__corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--il-blue-500);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.il-it-form-shell__corner.tl { top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; }
.il-it-form-shell__corner.tr { top: 10px; right: 10px; border-top-width: 1px; border-right-width: 1px; }
.il-it-form-shell__corner.bl { bottom: 10px; left: 10px; border-bottom-width: 1px; border-left-width: 1px; }
.il-it-form-shell__corner.br { bottom: 10px; right: 10px; border-bottom-width: 1px; border-right-width: 1px; }

.il-it-form { display: flex; flex-direction: column; gap: 20px; }
.il-it-form__field { display: flex; flex-direction: column; gap: 8px; }
.il-it-form__label {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--il-blue-700);
}
.il-it-form__input {
  width: 100%;
  padding: 14px 16px;
  background: var(--il-blue-50) !important;
  border: 1px solid rgba(0,34,71,0.18) !important;
  color: var(--il-blue-900);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .3s var(--il-ease), background .3s var(--il-ease), box-shadow .3s var(--il-ease) !important;
}
.il-it-form__input::placeholder { color: rgba(0,34,71,0.40); }
.il-it-form__input:focus {
  background: #fff !important;
  border-color: var(--il-blue-700) !important;
  box-shadow: 0 0 0 3px rgba(41,119,226,0.16) !important;
}
.il-it-form__submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--il-blue-900) !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--il-blue-900) !important;
  cursor: pointer;
  overflow: hidden;
  transition: all .35s var(--il-ease) !important;
}
.il-it-form__submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.20) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--il-ease-out);
  pointer-events: none;
}
.il-it-form__submit:hover { background: var(--il-blue-700) !important; border-color: var(--il-blue-700) !important; }
.il-it-form__submit:hover::before { transform: translateX(120%); }
.il-it-form__submit-arrow {
  font-size: 16px;
  transition: transform .35s var(--il-ease-out);
}
.il-it-form__submit:hover .il-it-form__submit-arrow { transform: translateX(6px); }
.il-it-form__alert {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 12px 14px;
  border: 1px solid;
}
.il-it-form__alert--success { color: #047857; background: #ECFDF5; border-color: #6EE7B7; }
.il-it-form__alert--error { color: #B91C1C; background: #FEF2F2; border-color: #FCA5A5; }

/* =====================================================================
   PROJECTS PAGE — premium card link chips + branded modal
   ===================================================================== */

/* ---- Link chip row inside project cards ---- */
.il-pcard__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.il-pcard__linkchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid rgba(0,34,71,0.18);
  background: rgba(244,248,254,0.6);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--il-blue-700);
  transition: background .3s var(--il-ease), border-color .3s var(--il-ease), color .3s var(--il-ease), transform .3s var(--il-ease-out);
  line-height: 1.2;
}
.il-pcard__linkchip:hover {
  background: var(--il-blue-700);
  border-color: var(--il-blue-700);
  color: #fff;
  transform: translateY(-1px);
}
.il-pcard__linkchip-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ---- Project Modal (il-pmodal) ---- */
.il-pmodal { padding: 16px; }
.il-pmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 26, 54, 0.85);
  backdrop-filter: blur(12px) saturate(120%);
  z-index: 0;
}
.il-pmodal__shell {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 28px 28px 0 -2px rgba(3,74,166,0.30), 0 60px 120px -20px rgba(0,0,0,0.55);
}

/* Decorative corner brackets on the shell */
.il-pmodal__corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--il-blue-500);
  border-style: solid;
  border-width: 0;
  z-index: 5;
  pointer-events: none;
}
.il-pmodal__corner.tl { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; }
.il-pmodal__corner.tr { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; }
.il-pmodal__corner.bl { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; }
.il-pmodal__corner.br { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; }

/* Header */
.il-pmodal__header {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.il-pmodal__header-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--il-blue-900) 0%, var(--il-blue-700) 60%, var(--il-blue-500) 100%);
  z-index: 0;
}
.il-pmodal__header-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.65;
}
.il-pmodal__header-bg::after {
  content: "";
  position: absolute;
  top: -120px; right: -100px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(138,180,244,0.45), transparent 65%);
  filter: blur(16px);
}
.il-pmodal__tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.32);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.il-pmodal__title {
  font-family: 'TT Commons', 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(1.2rem, 2.4vw, 1.85rem);
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.15;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.il-pmodal__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.30);
  color: #fff;
  cursor: pointer;
  transition: all .3s var(--il-ease);
}
.il-pmodal__close:hover {
  background: #fff;
  color: var(--il-blue-900);
  transform: rotate(90deg);
}

/* Body */
.il-pmodal__body {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--il-blue-50) 100%);
}
.il-pmodal__body::-webkit-scrollbar { width: 8px; }
.il-pmodal__body::-webkit-scrollbar-track { background: var(--il-blue-50); }
.il-pmodal__body::-webkit-scrollbar-thumb { background: var(--il-blue-700); }

/* Main cover image */
.il-pmodal__cover {
  border: 1px solid rgba(0,34,71,0.10);
  background: var(--il-blue-50);
}
.il-pmodal__cover img {
  display: block;
}
.il-pmodal__cover-corner {
  position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(255,255,255,0.85);
  border-style: solid;
  border-width: 0;
  z-index: 3;
  pointer-events: none;
}
.il-pmodal__cover-corner.tl { top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; }
.il-pmodal__cover-corner.tr { top: 10px; right: 10px; border-top-width: 1px; border-right-width: 1px; }
.il-pmodal__cover-corner.bl { bottom: 10px; left: 10px; border-bottom-width: 1px; border-left-width: 1px; }
.il-pmodal__cover-corner.br { bottom: 10px; right: 10px; border-bottom-width: 1px; border-right-width: 1px; }

/* Thumbs */
.il-pmodal__thumb {
  border: 2px solid transparent;
  transition: border-color .3s var(--il-ease), transform .3s var(--il-ease-out);
}
.il-pmodal__thumb:hover {
  border-color: var(--il-blue-500);
  transform: scale(1.04);
}
.il-pmodal__thumb--active {
  border-color: var(--il-blue-700);
}

/* Link buttons */
.il-pmodal__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--il-blue-700);
  color: #fff;
  border: 1px solid var(--il-blue-700);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  transition: all .35s var(--il-ease) !important;
}
.il-pmodal__link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--il-ease-out);
  pointer-events: none;
}
.il-pmodal__link:hover {
  background: var(--il-blue-900);
  border-color: var(--il-blue-900);
  color: #fff !important;
}
.il-pmodal__link:hover::before { transform: translateX(120%); }
.il-pmodal__link-icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.il-pmodal__link-arrow {
  font-size: 14px;
  color: var(--il-blue-300);
  transition: transform .3s var(--il-ease-out), color .3s var(--il-ease);
}
.il-pmodal__link:hover .il-pmodal__link-arrow {
  transform: translateX(6px);
  color: #fff;
}

@media (max-width: 640px) {
  .il-pmodal { padding: 8px; }
  .il-pmodal__shell { box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6); }
  .il-pmodal__corner { width: 16px; height: 16px; }
}

/* =====================================================================
   ABOUT PAGE — refined polish for existing sections
   ===================================================================== */

/* ---- About section number badge (replaces basic eyebrow on About) ---- */
.il-section-num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--il-blue-700);
}
.il-section-num::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
}
.il-section-num--center {
  display: inline-flex;
}

/* ---- Feature row + Problems/Solutions item refinement ---- */
.il-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,34,71,0.08);
  font-size: 13.5px;
  color: var(--il-gray-700);
  transition: padding-left .35s var(--il-ease), border-color .35s var(--il-ease);
}
.il-feature-row:hover {
  padding-left: 8px;
  border-bottom-color: var(--il-blue-500);
}
.il-feature-row__num {
  font-family: 'TT Commons', 'Inter', sans-serif;
  font-style: italic;
  font-size: 14px;
  color: var(--il-blue-500);
  font-weight: 600;
  flex-shrink: 0;
  width: 18px;
}

.il-ps-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,34,71,0.08);
  font-size: 13.5px;
  line-height: 1.55;
  transition: padding-left .35s var(--il-ease);
}
.il-ps-item:hover { padding-left: 8px; }
.il-ps-item__bullet {
  font-family: 'TT Commons', 'Inter', sans-serif;
  font-style: italic;
  font-size: 18px;
  color: var(--il-blue-700);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.il-ps-item--solution { border-bottom-color: rgba(255,255,255,0.12); }
.il-ps-item--solution .il-ps-item__bullet { color: #fff; }
.il-ps-solutions {
  background: linear-gradient(135deg, var(--il-blue-900) 0%, var(--il-blue-700) 100%);
  position: relative;
  overflow: hidden;
}
.il-ps-solutions::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.6;
  pointer-events: none;
}

/* ---- Roadmap timeline polishing ---- */
.il-timeline { position: relative; }
.il-timeline__line {
  position: absolute;
  left: 0; right: 0; top: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), rgba(255,255,255,0.18), transparent);
  z-index: 0;
}
@media (max-width: 1024px) {
  .il-timeline__line { display: none; }
}
.il-tstep {
  position: relative;
  padding: 22px 18px 22px 22px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform .45s var(--il-ease-out), border-color .4s var(--il-ease), background .4s var(--il-ease);
}
.il-tstep::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 0; height: 2px;
  background: var(--il-blue-500);
  transition: width .5s var(--il-ease-out);
}
.il-tstep:hover {
  transform: translateY(-4px);
  border-color: var(--il-blue-500);
  background: rgba(41,119,226,0.10);
}
.il-tstep:hover::before { width: 60%; }
.il-tstep__num {
  font-family: 'TT Commons', 'Inter', sans-serif;
  font-style: italic;
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(180deg, #fff 0%, var(--il-blue-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
  line-height: 1;
}
.il-tstep__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 8px;
}
.il-tstep__desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.65);
}

/* ---- About visual frame ---- */
.il-about-visual {
  position: relative;
}

/* ---------- 18. MOTION-REDUCED ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .il-marquee__track { animation: none !important; }
}