/* lilAgents brand layer over the ported template.
   Light only for now: the template's own light design stays intact and only the
   accent, the typefaces and the logo are brand-swapped. */
:root {
  /* Clash Display carries the headings: geometric, slightly technical, and the
     one display face already signed off on. Figtree runs body copy, a brand
     family with a real weight range. Neither is Inter. */
  --brand-font-heading: "Clash Display", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand-font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --brand-primary: #536ee5;
  --brand-primary-dark: #1B44C8;
  --brand-ink: #232323;
}

/* The template's display face was a 300-weight serif. A grotesque needs more
   weight and tighter tracking to hold the same hierarchy. */
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.02em; }

/* The brand mark is an SVG with only a viewBox, so it has no intrinsic size:
   width:auto collapses it to zero. Give each lockup an explicit width. */
.home-nav-logo, .download-1-logo { width: 124px; height: auto; max-height: none; }
/* The mark's own left edge sits tighter than its vertical breathing room, so
   the lockup reads as though it is crowding the nav's left edge. Nudge it in
   until the optical left gap matches the perceived top and bottom gap. */
.home-nav-logo { margin-left: 8px; }
.footer-logo { width: 150px; height: auto; max-height: none; }

/* The gold the template used had more contrast against its dark panels than
   periwinkle does (4.4:1). Lift the accent where it sits on the dark footer so
   it clears AA. */
.footer-content-holder a,
.footer-content-holder .footer-link.w--current { color: #92A5F6; }
/* hello@ under the footer tagline (scripts/footer-mail-0929.mjs): white like the other footer links, periwinkle on hover */
.footer-content-holder .footer-mail { display: inline-flex; margin-top: 20px; color: #fff; transition: color .3s; }
.footer-content-holder .footer-mail:hover { color: #92A5F6; }

/* ---------------------------------------------------------------------------
   Decorative grounds.
   The template baked its warm gradient into WEBP files, so no palette change
   could cool them down. These replace the raster artwork with a CSS-only
   treatment: a faint periwinkle wash plus a fine dot grid. Nothing to download,
   and it recolours with the brand instead of being fixed in a bitmap. */

.section.hero-1, .section.hero-02, .section.hero-3,
.section.feature-a, .section.feature-c, .section.about-a,
.section.preview, .section.agent, .section.pricing,
.section.career, .section.terms, .section.contact, .section.cms {
  background-image:
    radial-gradient(70% 55% at 50% -10%, rgba(83, 110, 229, 0.10), rgba(83, 110, 229, 0) 70%),
    radial-gradient(circle at 1px 1px, rgba(35, 35, 35, 0.055) 1px, transparent 0),
    linear-gradient(180deg, #F8FAFD 0%, #FFFFFF 62%);
  background-size: 100% 100%, 26px 26px, 100% 100%;
  background-position: center top, center top, center top;
  background-repeat: no-repeat, repeat, no-repeat;
}

.feature-1-card-wrapper, .cta-3-wrapper {
  background-image:
    radial-gradient(90% 120% at 15% 0%, rgba(83, 110, 229, 0.12), rgba(83, 110, 229, 0) 68%),
    linear-gradient(180deg, #F3F6FC 0%, #FFFFFF 100%);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}

/* The marker behind a highlighted word was a peach bitmap. */
.text-bg-01-small, .text-bg-01-medium, .text-bg-01-large,
.text-bg-02-small, .text-bg-02-medium, .text-bg-02-large {
  background-image: linear-gradient(180deg, rgba(83, 110, 229, 0.16), rgba(83, 110, 229, 0.16));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 6px;
}

/* Banned globally: no scale or grow on hover. */
a:hover, button:hover, .w-inline-block:hover { transform: none !important; }

.home-nav-logo { margin-top: -2px !important; display: block !important; }