/*
 * Marketing/landing pages styling — a faithful recreation of the deepseer.ai
 * design. Everything is scoped under `.landing` so it never leaks into the
 * dashboard UI. These pages still extend base.html (dashboard navbar + footer).
 */

.landing {
  --lp-purple: #2d2366;
  --lp-blue: #073ae0;
  --lp-violet: #6c62ff;
  --lp-orange: #fdb850;
  --lp-red: #ff6666;
  --lp-coral: #f26f63;
  --lp-pink: #ffd6da;
  --lp-gray: #f2f2f2;
  --lp-ink: #2d2366;

  font-family: "Qualion", sans-serif;
  color: var(--lp-ink);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.65;
  /* close the empty breadcrumb gap above and the container padding below */
  margin-top: -1.5rem;
  margin-bottom: -1.5rem;
}

.landing p {
  margin: 0 0 1rem;
}

/* ---- full-bleed bands -------------------------------------------------- */
.lp-full {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.lp-band {
  padding: 5.5rem 0;
}

.lp-band--gray {
  background: var(--lp-gray);
}

.lp-band--white {
  background: #fff;
}

.lp-band--pink {
  background: var(--lp-pink);
}

.lp-band--purple {
  background: #402cbf;
  color: #fff;
}

.lp-band--gradient {
  background: linear-gradient(115deg, #2146e6 0%, #6a37d6 52%, #ff8fae 100%);
  color: #fff;
}

.lp-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ---- grainy, multi-colour, animated backgrounds ----------------------- */
.lp-anim {
  position: relative;
  overflow: hidden;
}

.lp-anim > .lp-inner,
.lp-anim > .lp-hero__inner {
  position: relative;
  z-index: 2;
}

/* drifting colour blobs */
.lp-anim::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(108, 98, 255, 0.55),
      transparent 45%
    ),
    radial-gradient(
      circle at 82% 14%,
      rgba(253, 184, 80, 0.45),
      transparent 45%
    ),
    radial-gradient(
      circle at 78% 86%,
      rgba(255, 102, 102, 0.5),
      transparent 45%
    ),
    radial-gradient(circle at 22% 82%, rgba(7, 58, 224, 0.5), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(64, 44, 191, 0.35), transparent 55%);
  background-size: 160% 160%;
  animation: lp-drift 22s ease-in-out infinite alternate;
}

/* film grain overlay */
.lp-anim::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes lp-drift {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

/* ---- colour ribbon (solid product-colour strip under the navbar) ------- */
.lp-ribbon {
  display: block;
  height: 8px;
  border: 0;
  background-color: var(--lp-orange);
}

.lp-ribbon--orange {
  background-color: #fdb850;
}

.lp-ribbon--blue {
  background-color: #2748ea;
}

.lp-ribbon--coral {
  background-color: #ff6666;
}

/* ---- typography (Qualion DemiBold headings) --------------------------- */
.lp-section-title,
.lp-band__head {
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 2.75rem;
  color: inherit;
}

.lp-section-title {
  text-align: center;
}

.lp-band--purple .lp-section-title,
.lp-band--purple .lp-band__head,
.lp-band--gradient .lp-section-title,
.lp-band--gradient .lp-band__head {
  color: #fff;
}

/* `.landing .lp-lede` (not just `.lp-lede`) so it beats `.landing p`'s margin */
.landing .lp-lede {
  text-align: center;
  max-width: 760px;
  margin: -1.75rem auto 2.75rem;
  opacity: 0.9;
}

/* left-aligned lede (e.g. "Our Clients"), aligned with the band heading */
.landing .lp-lede--start {
  text-align: left;
  margin: -1.5rem 0 2.5rem;
}

/* lede sitting under a CTA heading */
.landing .lp-lede--cta {
  margin: 1.25rem auto 0;
}

/* ---- hero -------------------------------------------------------------- */
.lp-hero {
  background: linear-gradient(115deg, #2146e6 0%, #5a32d6 55%, #2d2366 100%);
  color: #fff;
  min-height: 600px;
  display: flex;
  align-items: center;
}

.lp-hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 4rem 2rem;
  width: 100%;
}

.lp-hero__brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.lp-hero__brand img {
  height: 44px;
  width: auto;
  display: block;
}

.lp-hero__brand span {
  font-weight: 600;
  font-size: 1.85rem;
  letter-spacing: -0.01em;
  color: #fff;
}

.lp-hero h1 {
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
}

/* sub-hero tagline strip */
.lp-tagline {
  text-align: center;
  /* trimmed from the default band padding so the hero can grow without the
     pair overflowing the viewport */
  padding: 3.75rem 0;
}

.lp-tagline .lp-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-tagline__big {
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.35;
  color: var(--lp-purple);
  margin: 0 auto 0.85rem;
  max-width: 900px;
  text-align: center;
}

/* product-page statement tagline: a touch smaller + wider so it sits on one line */
.lp-tagline__big--lead {
  font-size: 1.55rem;
  max-width: 1140px;
}

.lp-tagline p {
  text-align: center;
  max-width: 820px;
}

/* ---- buttons ----------------------------------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #3a2bd6;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.6rem 1.6rem;
  border-radius: 0.6rem;
  text-decoration: none;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.15s ease;
}

.lp-btn:hover {
  background: #1aeeae;
  color: #211a4d;
  transform: translateY(-2px);
}

.lp-btn .icon {
  font-size: 0.85rem;
}

/* ---- service rows (home) ---------------------------------------------- */
.lp-service {
  display: grid;
  /* symmetric columns so the product image is the same width on every row
     (the zig-zag puts the visual in alternating columns) */
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
  margin-bottom: 5.5rem;
}

.lp-service:last-child {
  margin-bottom: 0;
}

/* image side is whichever column the visual lands in (DOM order drives zig-zag) */
/* service-page hero: little text on the left, so give the product image more room */
.lp-service--hero {
  grid-template-columns: 0.74fr 1.26fr;
  gap: 3.5rem;
}

.lp-appicon {
  width: 76px;
  height: 76px;
  display: block;
  margin-bottom: 1.25rem;
}

/* service-page hero uses <h1>, home rows use <h3>; style both the same */
.lp-service h1,
.lp-service h3 {
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.08;
  color: var(--lp-purple);
  margin: 0 0 1.1rem;
}

/* the hero title is the page's headline, so size it up */
.lp-service--hero h1 {
  font-weight: 400;
  font-size: clamp(2.6rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* product visuals: subtle zoom on hover */
.lp-visual {
  transition: transform 0.4s ease;
}

.lp-visual:hover {
  transform: scale(1.03);
}

/* white frame applied to the image itself (like .lp-member__photo): one
   element, so the picture is clipped to a concentric inner radius and the
   border stays uniform all the way around */
.lp-shot {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  background: #fff;
  padding: 0.75rem;
  border-radius: 1.5rem;
  box-shadow: 0 28px 60px rgba(45, 35, 102, 0.22);
}

/* ---- generic card grid ------------------------------------------------- */
.lp-grid {
  display: grid;
  gap: 1.5rem;
}

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

.lp-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.lp-card {
  background: #fff;
  border-radius: 2rem;
  padding: 2rem;
  color: var(--lp-purple);
  box-shadow: 0 12px 30px rgba(45, 35, 102, 0.1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.lp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(45, 35, 102, 0.18);
}

.lp-card--center {
  text-align: center;
}

.lp-card--center .lp-glyph {
  margin-left: auto;
  margin-right: auto;
}

.lp-glyph {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
  margin-bottom: 1rem;
}

.lp-card h4 {
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 0.6rem;
  color: var(--lp-purple);
}

.lp-card p {
  margin: 0;
  font-size: 0.98rem;
  opacity: 0.85;
}

/* numbered step cards on gradient bands */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.lp-step {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 1.5rem;
  padding: 2rem;
  color: #fff;
  box-shadow:
    0 10px 32px rgba(17, 13, 45, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* hover lift uses `translate` (not `transform`) so it stays independent of
   the scroll-reveal's transform — otherwise the .in-view transform:none
   would cancel the lift once the card has revealed */
.lp-step:hover {
  translate: 0 -6px;
  background: rgba(255, 255, 255, 0.18);
}

.lp-step__num {
  font-weight: 600;
  font-size: 2.75rem;
  line-height: 1;
  opacity: 0.9;
  display: block;
  margin-bottom: 0.75rem;
}

.lp-step h4 {
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
}

.lp-step p {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.92;
}

/* ---- logo strips ------------------------------------------------------- */
.lp-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 3.5rem;
}

.lp-logos img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

/* clients: span the full inner width so the row lines up with the heading's left edge */
.lp-logos--clients {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 2rem;
}

.lp-logos--clients img {
  height: 116px;
  max-width: 23%;
  filter: brightness(0) invert(1);
}

/* ---- contact ----------------------------------------------------------- */
.lp-contact {
  position: relative;
  background: var(--lp-purple);
  color: #fff;
}

.lp-contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, #ff8a3d, #ff5a5f 40%, #2748ea);
}

.lp-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.lp-contact h2 {
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 1.5rem;
  color: #fff;
}

.lp-contact a {
  color: #fff;
  text-decoration: underline;
}

.lp-form label {
  display: block;
  font-size: 0.95rem;
  margin: 0 0 0.4rem;
}

.lp-form .field {
  margin-bottom: 1.1rem;
}

.lp-form input,
.lp-form textarea {
  width: 100%;
  border: none;
  border-radius: 0.6rem;
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--lp-purple);
}

/* honeypot — visually hidden, off-screen */
.lp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- CTA band ---------------------------------------------------------- */
.lp-cta {
  background: linear-gradient(115deg, #fdb850 0%, #6a37d6 52%, #2146e6 100%);
  color: #fff;
  text-align: center;
}

.lp-cta h2 {
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin: 0;
  color: #fff;
}

/* ---- about / team ------------------------------------------------------ */
.lp-team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.lp-member__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1rem;
  background: #fff;
  padding: 8px;
  box-shadow: 0 18px 40px rgba(45, 35, 102, 0.18);
}

.lp-member__name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--lp-purple);
  margin: 1rem 0 0.75rem;
}

.lp-member__name a {
  margin-left: auto;
}

.lp-member__name .fa-linkedin {
  color: var(--lp-blue);
}

.lp-member p {
  font-size: 0.98rem;
  opacity: 0.85;
}

/* ---- scroll-reveal ----------------------------------------------------- */
.landing [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing [data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* steps: slow reveal (transform/opacity) but a snappy hover lift (translate);
   defined here so it beats the generic [data-reveal] transition */
.landing .lp-step {
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.2s ease,
    background 0.2s ease;
}

/* logo strips pop up one after another, left to right */
.lp-logos [data-reveal] {
  transform: translateY(34px) scale(0.8);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lp-logos [data-reveal]:nth-child(2) {
  transition-delay: 0.12s;
}

.lp-logos [data-reveal]:nth-child(3) {
  transition-delay: 0.24s;
}

.lp-logos [data-reveal]:nth-child(4) {
  transition-delay: 0.36s;
}

.lp-logos [data-reveal]:nth-child(5) {
  transition-delay: 0.48s;
}

.lp-logos [data-reveal]:nth-child(6) {
  transition-delay: 0.6s;
}

/* ---- smooth anchor scrolling ------------------------------------------- */
html {
  scroll-behavior: smooth;
}

:target {
  scroll-margin-top: 1.5rem;
}

/* ---- marketing footer columns (landing only) -------------------------- */
/* footer is outside `.landing`, so use literal colours (no --lp vars here).
   The shared bottom bar lives in project.css (.footer-bottom). */
.lp-footer {
  background: #211a4d;
  color: #fff;
  font-family: "Qualion", sans-serif;
}

.lp-footer__top {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3.5rem 2rem 2.25rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
}

.lp-footer__brand-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.lp-footer__brand-row img {
  height: 30px;
}

.lp-footer__brand-name {
  font-weight: 600;
  font-size: 1.4rem;
}

.lp-footer__tag {
  opacity: 0.75;
  font-size: 0.95rem;
  max-width: 26ch;
}

.lp-footer h4 {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.65;
  margin: 0 0 1rem;
}

.lp-footer__top a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  display: block;
  margin-bottom: 0.55rem;
}

.lp-footer__top a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 880px) {
  .lp-band {
    padding: 3.5rem 0;
  }

  .lp-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .lp-service,
  .lp-contact__grid,
  .lp-grid--2,
  .lp-grid--3,
  .lp-steps,
  .lp-team {
    grid-template-columns: 1fr;
  }

  /* on mobile: image first, then the text block (icon → text → button),
     regardless of the desktop zig-zag DOM order */
  .lp-service__visual {
    order: 0;
  }

  .lp-service__text {
    order: 1;
  }

  .lp-logos--clients {
    flex-wrap: wrap;
    justify-content: center;
  }

  .lp-logos--clients img {
    max-width: 40%;
  }

  .lp-hero {
    min-height: 380px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-anim::before {
    animation: none;
  }

  .landing [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ---- photographic gradient backgrounds -------------------------------- */
.lp-imgbg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* the supplied artwork already carries grain and colour, so hide the
   animated colour blobs and let the image read through (grain stays) */
.lp-imgbg.lp-anim::before {
  display: none;
}

/* each image gets a dark scrim layered on top so white text stays legible */
.lp-bg-home {
  background-image:
    linear-gradient(115deg, rgba(17, 13, 45, 0.4), rgba(17, 13, 45, 0) 62%),
    url("../images/landing/bg-home.e0af03e0b8ba.webp");
}

.lp-bg-audience {
  background-image:
    linear-gradient(180deg, rgba(17, 13, 45, 0.34), rgba(17, 13, 45, 0.24)),
    url("../images/landing/bg-audience.91b7d2a801bb.webp");
}

.lp-bg-media {
  background-image:
    linear-gradient(180deg, rgba(17, 13, 45, 0.34), rgba(17, 13, 45, 0.24)),
    url("../images/landing/bg-media.cebf8748e127.webp");
}

.lp-bg-llm {
  background-image:
    linear-gradient(180deg, rgba(17, 13, 45, 0.34), rgba(17, 13, 45, 0.24)),
    url("../images/landing/bg-llm.d24914cbd903.webp");
}