/* ==========================================================================
   Laviano AI Solutions — talking website
   Design language ported from the v0 template: Playfair Display + DM Sans,
   staggered blur-in reveals, six-layer soft shadows, rounded-3xl surfaces,
   floating glass nav, bento grid. Recoloured to the Laviano brand
   (deep marine navy + electric blue).
   ========================================================================== */

:root {
  --navy-1000: #04101f;
  --navy-950:  #071a3d;
  --navy-900:  #0b2354;
  --navy-800:  #0f2a5c;
  --navy-700:  #123a7d;

  --blue-600: #0b57d6;
  --blue-500: #0066ff;
  --blue-400: #3d86ff;
  --blue-300: #7fb2ff;
  --blue-200: #a9ccff;
  --blue-100: #d7e5ff;
  --blue-50:  #eef3ff;

  /* warm-cool paper borrowed from the template's cream, pulled toward the brand */
  --paper:     #f6f6f4;
  --paper-2:   #efeeeb;
  --white:     #ffffff;
  --mint:      #43e0a8;

  --txt-dark: #16202f;
  --txt-mid:  #4b5a70;
  --txt-soft: #78859a;

  --on-dark:      rgba(255,255,255,.95);
  --on-dark-mid:  rgba(207,224,255,.80);
  --on-dark-soft: rgba(183,206,242,.60);

  --line-dark:  rgba(169,204,255,.16);
  --line-light: rgba(22,32,47,.08);

  --font-sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;

  --wrap: 1200px;

  /* template radii: rounded-3xl and friends */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 40px;

  --ease: cubic-bezier(.4, 0, .2, 1);

  /* the template's signature six-layer soft shadow, navy-tinted */
  --shadow-soft:
    rgba(14, 40, 92, .04) 0px 0px 0px 1px,
    rgba(14, 40, 92, .04) 0px 1px 1px -0.5px,
    rgba(14, 40, 92, .04) 0px 3px 3px -1.5px,
    rgba(14, 40, 92, .04) 0px 6px 6px -3px,
    rgba(14, 40, 92, .04) 0px 12px 12px -6px,
    rgba(14, 40, 92, .04) 0px 24px 24px -12px;
  --shadow-lift:
    rgba(14, 40, 92, .05) 0px 0px 0px 1px,
    rgba(14, 40, 92, .06) 0px 8px 16px -6px,
    rgba(14, 40, 92, .08) 0px 24px 40px -16px,
    rgba(14, 40, 92, .06) 0px 40px 64px -32px;
  --shadow-float: rgba(4, 16, 31, .10) 0px 10px 50px;
  --shadow-deep:  rgba(4, 16, 31, .28) 0px 30px 80px -20px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--txt-dark);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-950); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; border-radius: 8px; }

/* ------------------------------------------------- reveal: the blur-in effect */
@keyframes blur-in {
  0%   { opacity: 0; filter: blur(12px); transform: translateY(12px); }
  100% { opacity: 1; filter: blur(0);    transform: translateY(0); }
}
@keyframes scale-fade-in {
  0%   { opacity: 0; transform: scale(.94); }
  100% { opacity: 1; transform: scale(1); }
}

[data-reveal] { opacity: 0; }
[data-reveal].in { animation: blur-in .8s var(--ease) forwards; }

/* cards and panels rise with a scale instead */
[data-reveal="scale"].in { animation: scale-fade-in .7s var(--ease) forwards; }

[data-delay="1"].in { animation-delay: .10s; }
[data-delay="2"].in { animation-delay: .20s; }
[data-delay="3"].in { animation-delay: .30s; }
[data-delay="4"].in { animation-delay: .40s; }
[data-delay="5"].in { animation-delay: .50s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].in { opacity: 1; animation: none; filter: none; transform: none; }
}

/* ------------------------------------------------- type */
.h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(38px, 5.6vw, 72px);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 18px 0 0;
  text-wrap: balance;
}
.lede {
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 300;
  color: var(--txt-mid);
  max-width: 56ch;
  margin: 20px auto 0;
  line-height: 1.65;
}
.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.shead { text-align: center; max-width: 820px; margin: 0 auto 64px; }

.section { padding: clamp(84px, 11vw, 150px) 0; }

/* the nav floats over the page, so anchored sections stop clear of it */
section[id], #main { scroll-margin-top: 104px; }

/* ------------------------------------------------- buttons */
.btn {
  --btn-bg: transparent;
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 15px 26px;
  font-size: 15px; font-weight: 500; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: all .4s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .ico {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Every action button is the brand blue. The one exception is .btn--ghost,
   used only by "Book a Call" in the nav, which stays quiet against the glass. */
.btn--primary,
.btn--glass,
.btn--soft {
  --btn-bg: var(--blue-500); --btn-fg: #fff;
  box-shadow: 0 10px 30px -10px rgba(0,102,255,.65);
}
.btn--primary:hover,
.btn--glass:hover,
.btn--soft:hover {
  --btn-bg: #1a76ff;
  box-shadow: 0 18px 44px -12px rgba(0,102,255,.75);
}

.btn--ghost { --btn-fg: var(--txt-mid); }
.btn--ghost:hover { --btn-bg: rgba(22,32,47,.05); --btn-fg: var(--txt-dark); }

.btn--sm { padding: 11px 20px; font-size: 14px; }
.btn--lg { padding: 17px 32px; font-size: 16px; }
.btn--full { width: 100%; margin-top: 22px; }

/* ------------------------------------------------- floating glass nav */
.nav {
  position: fixed; inset: 16px 0 auto 0; z-index: 90;
  padding-inline: 16px;
}
.nav__shell {
  max-width: var(--wrap); margin-inline: auto;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--r-md);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: var(--shadow-float);
  animation: scale-fade-in .6s var(--ease);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
  overflow: hidden;
}
.nav.stuck .nav__shell {
  background: rgba(255,255,255,.86);
  box-shadow: rgba(4,16,31,.14) 0px 12px 44px;
}
.nav__inner {
  display: flex; align-items: center; gap: 28px;
  height: 68px; padding-inline: 22px;
}

/* hamburger — only below the desktop breakpoint */
.nav__toggle {
  display: none;
  width: 42px; height: 42px; flex: none;
  align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 12px; cursor: pointer;
  transition: background .4s var(--ease);
}
.nav__toggle:hover { background: rgba(22,32,47,.06); }
.nav__bars { display: block; width: 18px; }
.nav__bars i {
  display: block; height: 1.6px; border-radius: 2px; background: var(--txt-dark);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.nav__bars i + i { margin-top: 4.5px; }
.nav.open .nav__bars i:nth-child(1) { transform: translateY(6.1px) rotate(45deg); }
.nav.open .nav__bars i:nth-child(2) { opacity: 0; }
.nav.open .nav__bars i:nth-child(3) { transform: translateY(-6.1px) rotate(-45deg); }

.nav__mobile {
  display: grid;
  max-height: 0; overflow: hidden;
  padding-inline: 22px;
  transition: max-height .45s var(--ease), padding .45s var(--ease);
}
.nav.open .nav__mobile { max-height: 420px; padding-bottom: 14px; }

/* the glass is too see-through to read a menu against a busy hero */
.nav.open .nav__shell {
  background: rgba(255,255,255,.97);
  box-shadow: rgba(4,16,31,.22) 0px 18px 50px;
}
.nav__mobile a {
  padding: 13px 2px;
  font-size: 16px; font-weight: 400; color: var(--txt-mid); text-decoration: none;
  border-top: 1px solid var(--line-light);
  transition: color .3s var(--ease);
}
.nav__mobile a:hover { color: var(--blue-600); }
.nav__mobile a:last-child { color: var(--blue-600); font-weight: 500; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--txt-dark); }
.brand__mark { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.brand__name {
  font-family: var(--font-serif); font-size: 21px; font-weight: 600;
  letter-spacing: -.01em; white-space: nowrap;
}
.brand__thin { font-weight: 400; color: var(--blue-600); }

.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a {
  color: var(--txt-mid); text-decoration: none; font-size: 14.5px; font-weight: 400;
  letter-spacing: .01em; transition: color .4s var(--ease);
}
.nav__links a:hover { color: var(--txt-dark); }

.nav__cta { display: flex; align-items: center; gap: 8px; }

/* ------------------------------------------------- hero */
.hero {
  position: relative;
  background: var(--navy-950);
  color: var(--on-dark);
  padding: clamp(150px, 18vw, 220px) 0 clamp(96px, 10vw, 130px);
  overflow: hidden;
  isolation: isolate;
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
}
.hero__bg {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(58% 52% at 78% 6%,  rgba(0,102,255,.45) 0%, transparent 62%),
    radial-gradient(52% 48% at 8% 94%,  rgba(61,134,255,.28) 0%, transparent 64%),
    radial-gradient(92% 70% at 50% 0%,  rgba(18,58,125,.55) 0%, transparent 72%),
    linear-gradient(168deg, #071a3d 0%, #06152f 55%, #04101f 100%);
}
.hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 122%, rgba(4,16,31,.88) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}
.hero__wave {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -2;
  height: clamp(160px, 23vw, 280px);
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(5px, 1.1vw, 12px);
  padding: 0 12px;
  opacity: .45;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.hero__wave span {
  flex: 1 1 0; max-width: 16px; min-width: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--blue-200) 0%, var(--blue-500) 45%, rgba(0,102,255,0) 100%);
  height: 22%;
  animation: bar 2.6s var(--ease) infinite alternate;
}
.hero__wave span:nth-child(4n+1) { animation-duration: 3.4s; animation-delay: -.2s; }
.hero__wave span:nth-child(4n+2) { animation-duration: 2.2s; animation-delay: -1.1s; }
.hero__wave span:nth-child(4n+3) { animation-duration: 3.9s; animation-delay: -.7s; }
.hero__wave span:nth-child(4n)   { animation-duration: 2.8s; animation-delay: -1.6s; }
.hero__wave span:nth-child(3n)   { opacity: .62; }
@keyframes bar { from { height: 12%; } to { height: 78%; } }
@media (prefers-reduced-motion: reduce) { .hero__wave span { animation: none; height: 42%; } }

.hero__inner { position: relative; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin: 0 0 30px;
}
.live {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--blue-100);
  background: rgba(67,224,168,.08);
  border: 1px solid rgba(67,224,168,.24);
  border-radius: 999px; padding: 7px 15px 7px 12px;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.live__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none;
  box-shadow: 0 0 0 0 rgba(67,224,168,.55);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(67,224,168,0); }
  100% { box-shadow: 0 0 0 0 rgba(67,224,168,0); }
}
@media (prefers-reduced-motion: reduce) { .live__dot { animation: none; } }

.hero__h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(54px, 10vw, 132px);
  line-height: .96;
  letter-spacing: -.03em;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.hero__lede {
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--on-dark-mid);
  max-width: 52ch;
  margin: 28px auto 0;
  text-wrap: pretty;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 13px; justify-content: center;
  margin-top: 40px;
}
.hero__hint { font-size: 13px; font-weight: 300; color: var(--on-dark-soft); margin: 20px 0 0; }

.hero__trust {
  list-style: none; margin: clamp(60px, 7vw, 92px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.hero__trust li {
  background: rgba(7,26,61,.5);
  padding: 26px 16px;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.hero__trust strong {
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(24px, 2.8vw, 34px);
  color: #fff; letter-spacing: -.02em; line-height: 1;
}
.hero__trust strong em { font-style: normal; font-size: .5em; color: var(--blue-300); }
.hero__trust span { font-size: 12.5px; font-weight: 300; color: var(--on-dark-soft); text-align: center; }

/* scroll cue, straight from the template */
.hero__scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--on-dark-soft); z-index: 2;
}
.hero__scroll span { font-size: 10px; letter-spacing: .32em; text-transform: uppercase; font-weight: 500; }
.hero__scroll i { display: block; width: 1px; height: 46px; background: rgba(169,204,255,.22); position: relative; overflow: hidden; }
.hero__scroll i::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 50%;
  background: rgba(169,204,255,.75);
  animation: cue 2.1s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll i::after { animation: none; } }

/* ------------------------------------------------- services */
.services { background: var(--paper); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }

.card {
  position: relative;
  background: var(--white);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover { transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-lift); }
.card--feature { box-shadow: var(--shadow-lift), 0 0 0 1.5px rgba(0,102,255,.22); }

/* gold badge — sits on the navy card art, so it reads as a real medal */
.card__flag {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  background: linear-gradient(145deg, #fdf3d0 0%, #f4d98d 32%, #dfb457 58%, #f8e6ae 82%, #e6cd76 100%);
  color: #5b400f;
  border: 1px solid rgba(176,133,38,.6);
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
  box-shadow:
    0 2px 10px rgba(176,133,38,.38),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(140,102,24,.28);
}
.card__art { height: 168px; background: var(--navy-950); position: relative; overflow: hidden; }
.card__art svg { width: 100%; height: 100%; }

.card__body { padding: 30px 28px 30px; display: flex; flex-direction: column; flex: 1; }
/* Title, then price, then the meta line — stacked the same way on every card so
   the descriptions below line up regardless of how long the title is. */
.card__top { display: flex; flex-direction: column; align-items: flex-start; }
.card__title {
  font-family: var(--font-serif); font-size: 25px; font-weight: 600;
  letter-spacing: -.01em; margin: 0; line-height: 1.15;
}
.card__price { margin: 14px 0 0; white-space: nowrap; text-align: left; }
.card__price .n { font-family: var(--font-serif); font-size: 30px; font-weight: 600; color: var(--navy-900); }
.card__price .per { font-size: 13px; font-weight: 300; color: var(--txt-soft); margin-left: 2px; }
.card__meta {
  display: block; text-align: left;
  font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--blue-600); margin-top: 5px;
  /* fixed line box so an empty meta occupies exactly the same height as a filled
     one, keeping the three cards level */
  line-height: 16px; min-height: 16px;
}
.card__desc { color: var(--txt-mid); margin: 14px 0 0; font-size: 15.5px; font-weight: 300; }

.ticks { list-style: none; margin: 22px 0 24px; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 29px; font-size: 15px; font-weight: 300; color: var(--txt-mid); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--blue-50);
}
.ticks li::after {
  content: ""; position: absolute; left: 5px; top: 10px;
  width: 7px; height: 4px;
  border-left: 1.8px solid var(--blue-600); border-bottom: 1.8px solid var(--blue-600);
  transform: rotate(-45deg);
}
.card .btn--full { margin-top: auto; }

.services__note {
  text-align: center; margin: 44px 0 0; font-size: 14.5px; font-weight: 300; color: var(--txt-soft);
}

/* ------------------------------------------------- why: bento grid */
.why { background: var(--paper-2); }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.tile {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 32px 30px;
  box-shadow: var(--shadow-soft);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 210px;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.tile__num {
  font-family: var(--font-serif); font-size: 13px; font-weight: 500;
  letter-spacing: .2em; color: var(--blue-400); margin-bottom: auto;
}
.tile h3 {
  font-family: var(--font-serif); font-size: 22px; font-weight: 600;
  letter-spacing: -.01em; margin: 20px 0 0; line-height: 1.2;
}
.tile p { margin: 10px 0 0; font-size: 15px; font-weight: 300; color: var(--txt-mid); }

/* bento spans */
.tile--a { grid-column: span 2; grid-row: span 2; min-height: 440px; }
.tile--b { grid-column: span 2; }
.tile--c, .tile--d { grid-column: span 1; }
.tile--e, .tile--f { grid-column: span 2; }

/* the hero tile of the bento, filled navy */
.tile--a {
  background: linear-gradient(155deg, var(--navy-800) 0%, var(--navy-950) 65%, var(--navy-1000) 100%);
  color: var(--on-dark);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.tile--a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 85% 8%, rgba(0,102,255,.42) 0%, transparent 62%);
}
/* keep copy above the gradient overlay and the animated bars */
.tile--a .tile__num, .tile--a h3, .tile--a p { position: relative; z-index: 1; }
.tile--a .tile__num { color: var(--blue-300); }
.tile--a h3 { color: #fff; font-size: clamp(28px, 3vw, 38px); }
.tile--a p { color: var(--on-dark-mid); font-size: 16px; max-width: 34ch; }
.tile__pulse {
  position: absolute; left: 30px; top: 64px; right: 30px; height: 120px;
  display: flex; align-items: flex-end; gap: 6px; opacity: .55;
}
.tile__pulse span {
  flex: 1 1 0; border-radius: 999px 999px 0 0; height: 30%;
  background: linear-gradient(180deg, var(--blue-200), rgba(0,102,255,0));
  animation: bar 3s var(--ease) infinite alternate;
}
.tile__pulse span:nth-child(3n)   { animation-duration: 2.2s; animation-delay: -.9s; }
.tile__pulse span:nth-child(3n+1) { animation-duration: 3.6s; animation-delay: -1.7s; }
@media (prefers-reduced-motion: reduce) { .tile__pulse span { animation: none; height: 45%; } }

.integ {
  margin-top: 22px; text-align: center;
  padding: 30px; border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}
.integ__label {
  margin: 0 0 16px; font-size: 11px; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--txt-soft);
}
.integ__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.integ__list li {
  font-size: 14px; font-weight: 400; color: var(--navy-800);
  background: var(--paper); border-radius: 999px;
  padding: 9px 17px;
  transition: all .4s var(--ease);
}
.integ__list li:hover { background: var(--blue-50); color: var(--blue-600); }

/* ------------------------------------------------- proof */
.proof { background: var(--navy-950); color: var(--on-dark); position: relative; overflow: hidden; border-radius: var(--r-2xl); margin-inline: 16px; }
.proof::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(65% 60% at 12% 8%, rgba(0,102,255,.30) 0%, transparent 62%);
  pointer-events: none;
}
.proof__inner { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }

.quote { margin: 0; }
.quote__stars { display: flex; gap: 6px; margin-bottom: 26px; }
.quote__stars svg { width: 18px; height: 18px; fill: #f5b971; }
.quote__text {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(28px, 3.7vw, 46px);
  line-height: 1.2; letter-spacing: -.02em;
  color: #fff; margin: 0; text-wrap: balance;
}
.quote__by { display: flex; align-items: center; gap: 15px; margin-top: 34px; }
.quote__avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--blue-500), var(--navy-700));
  color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .04em;
}
.quote__name { display: block; font-weight: 500; color: #fff; font-size: 15.5px; }
.quote__role { display: block; font-size: 13.5px; font-weight: 300; color: var(--on-dark-soft); }

.proof__stats {
  display: grid; gap: 1px; background: var(--line-dark);
  border: 1px solid var(--line-dark); border-radius: var(--r-lg); overflow: hidden;
}
.stat { background: rgba(7,26,61,.55); padding: 26px 28px; }
.stat__n {
  display: block; font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1; color: #fff; letter-spacing: -.02em;
}
.stat__n em { font-style: normal; font-size: .6em; color: var(--blue-300); }
.stat__l { display: block; margin-top: 10px; font-size: 14px; font-weight: 300; color: var(--on-dark-mid); }
.proof__foot {
  margin: 0; background: rgba(0,102,255,.14); padding: 20px 28px;
  font-size: 14px; font-weight: 300; color: var(--blue-100);
}

/* ------------------------------------------------- review wall (marquee) */
.wall { background: var(--paper-2); overflow: hidden; }
.wall__stage {
  position: relative;
  max-width: var(--wrap); margin-inline: auto; padding-inline: 24px;
}
/* top and bottom fades, as in the template */
.wall__stage::before,
.wall__stage::after {
  content: ""; position: absolute; left: 0; right: 0; height: 120px; z-index: 2; pointer-events: none;
}
.wall__stage::before { top: 0; background: linear-gradient(to bottom, var(--paper-2), transparent); }
.wall__stage::after { bottom: 0; background: linear-gradient(to top, var(--paper-2), transparent); }

.wall__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; height: 620px; }
.wall__col { position: relative; overflow: hidden; }
.wall__track {
  display: flex; flex-direction: column; gap: 16px;
  animation: scroll-down 38s linear infinite;
}
.wall__col--up .wall__track { animation-name: scroll-up; }
.wall__col:hover .wall__track { animation-play-state: paused; }

/* -50% minus half the gap keeps the wrap seamless */
@keyframes scroll-down {
  0%   { transform: translateY(0); }
  100% { transform: translateY(calc(-50% - 8px)); }
}
@keyframes scroll-up {
  0%   { transform: translateY(calc(-50% - 8px)); }
  100% { transform: translateY(0); }
}

.tcard {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 26px 26px 24px;
  margin: 0; flex: none;
  box-shadow: var(--shadow-soft);
}
.tcard__text {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 19px; line-height: 1.42; letter-spacing: -.01em;
  color: var(--txt-dark); margin: 0 0 20px; text-wrap: pretty;
}
.tcard__by { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tcard__name { display: block; font-size: 14px; font-weight: 500; color: var(--txt-dark); }
.tcard__role { display: block; font-size: 12.5px; font-weight: 300; color: var(--txt-soft); margin-top: 2px; }
.tcard__tag {
  flex: none; font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-600); background: var(--blue-50);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}

/* an empty slot — deliberately looks unfinished so it can't ship as a real review */
.tcard--empty {
  background: transparent;
  border: 1.5px dashed rgba(22,32,47,.16);
  box-shadow: none;
  min-height: 148px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: 7px;
}
.tcard__slot {
  font-size: 10.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--txt-soft);
}
.tcard__hint { margin: 0; font-size: 14px; font-weight: 300; color: rgba(120,133,154,.75); max-width: 22ch; }

@media (prefers-reduced-motion: reduce) {
  .wall__cols { height: auto; }
  .wall__col { overflow: visible; }
  .wall__track { animation: none; }
  .wall__stage::before, .wall__stage::after { display: none; }
}

/* ------------------------------------------------- contact */
.hours { background: var(--paper); }
.hours__grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 660px; margin-inline: auto; }

.panel {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 36px 34px;
  box-shadow: var(--shadow-soft);
}
.panel__title {
  font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--txt-soft); margin: 0 0 24px;
}
.panel__ai {
  margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--line-light);
  font-size: 14.5px; font-weight: 300; color: var(--txt-mid);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.panel__ai .live { color: var(--navy-900); background: rgba(67,224,168,.12); }

.line {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 16px 16px; border-radius: var(--r-md);
  text-decoration: none; text-align: left;
  border: 1px solid transparent; background: var(--paper);
  margin-bottom: 11px; cursor: pointer;
  transition: all .4s var(--ease);
}
.line:hover { background: var(--white); box-shadow: var(--shadow-soft); transform: translateX(4px); }
.line--btn { font-family: inherit; font-size: inherit; }
.line__ico {
  width: 44px; height: 44px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  background: var(--white); color: var(--blue-600);
  box-shadow: var(--shadow-soft);
}
.line:hover .line__ico { background: var(--blue-50); }
.line__ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.line__l { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--txt-soft); }
.line__v { display: block; font-size: 16.5px; font-weight: 400; color: var(--navy-900); letter-spacing: -.01em; margin-top: 2px; }

.area { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-light); }
.area__l { font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--txt-soft); }
.area__v { margin: 9px 0 0; font-size: 15px; font-weight: 300; color: var(--txt-mid); }

/* ------------------------------------------------- closer */
.closer {
  background: linear-gradient(155deg, var(--navy-800) 0%, var(--navy-950) 58%, var(--navy-1000) 100%);
  color: var(--on-dark);
  padding: clamp(84px, 10vw, 140px) 40px;
  text-align: center;
  position: relative; overflow: hidden;
  border-radius: var(--r-2xl);
  margin: 0 16px 16px;
}
.closer::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(50% 70% at 50% 0%, rgba(0,102,255,.35) 0%, transparent 66%);
}
.closer__inner { position: relative; }
.closer__h {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(38px, 6vw, 76px); line-height: 1.04; letter-spacing: -.025em;
  margin: 0; color: #fff; text-wrap: balance;
}
.closer__p { color: var(--on-dark-mid); margin: 20px auto 0; max-width: 46ch; font-size: 17px; font-weight: 300; }
.closer__actions { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }

/* ------------------------------------------------- footer */
.foot { background: var(--paper); color: var(--txt-mid); padding: 64px 0 0; }
.foot__inner {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap;
  padding-bottom: 40px;
}
.foot__brand { display: flex; gap: 15px; align-items: flex-start; }
.foot__brand .brand__mark { width: 40px; height: 40px; }
.foot__name { margin: 0; color: var(--txt-dark); font-family: var(--font-serif); font-weight: 600; font-size: 19px; }
.foot__tag { margin: 6px 0 0; font-size: 14px; font-weight: 300; color: var(--txt-soft); max-width: 34ch; }
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot__links a { color: var(--txt-mid); text-decoration: none; font-size: 14.5px; font-weight: 300; transition: color .4s var(--ease); }
.foot__links a:hover { color: var(--blue-600); }
.foot__base {
  border-top: 1px solid var(--line-light);
  padding: 24px 24px 34px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.foot__base p { margin: 0; font-size: 13px; font-weight: 300; color: var(--txt-soft); }

/* ------------------------------------------------- reCAPTCHA badge
   Hidden because it sits bottom-right, exactly where the voice launcher lives.
   Google permits hiding it only if the attribution text is shown instead —
   that text is in the footer (.foot__legal). Do not remove one without the other. */
.grecaptcha-badge { visibility: hidden !important; }

.foot__legal {
  margin: 14px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6;
  color: var(--txt-soft); max-width: 46ch;
}
.foot__legal a { color: var(--txt-mid); text-decoration: underline; text-underline-offset: 2px; }
.foot__legal a:hover { color: var(--blue-600); }

/* ------------------------------------------------- mic toast */
.toast {
  position: fixed; z-index: 120;
  left: 20px; bottom: 20px; max-width: min(430px, calc(100vw - 40px));
  display: flex; align-items: center; gap: 14px;
  background: var(--white); color: var(--txt-dark);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--shadow-deep);
  transform: translateY(14px); opacity: 0;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.toast.show { opacity: 1; transform: none; }
.toast__ico { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; background: #fdf3e6; color: #b96a06; }
.toast__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.toast__title { display: block; font-weight: 500; font-size: 14.5px; }
.toast__msg { display: block; font-size: 13.5px; font-weight: 300; color: var(--txt-mid); margin-top: 3px; }
.toast__call {
  flex: none; text-decoration: none; font-size: 13.5px; font-weight: 500; color: var(--blue-600);
  background: var(--blue-50); border-radius: 999px; padding: 9px 16px;
}
.toast__x {
  flex: none; background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--txt-soft); padding: 4px 6px;
}
.toast__x:hover { color: var(--txt-dark); }

/* ------------------------------------------------- responsive */
@media (max-width: 1040px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .card--feature { grid-column: span 2; }
  .card--feature .card__art { height: 150px; }
  .proof__inner { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--a { grid-column: span 2; grid-row: auto; min-height: 340px; }
  .tile--b, .tile--e, .tile--f { grid-column: span 2; }
  .tile--c, .tile--d { grid-column: span 1; }
}

@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__toggle { display: inline-flex; }
}
@media (min-width: 881px) {
  /* desktop has the full link row, so the panel must never open */
  .nav__mobile { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 20px; }
  .cards { grid-template-columns: 1fr; }
  .card--feature { grid-column: auto; }
  .bento { grid-template-columns: 1fr; }
  .tile--a, .tile--b, .tile--c, .tile--d, .tile--e, .tile--f { grid-column: span 1; }
  .tile { min-height: 0; }
  .tile--a { min-height: 300px; }
  .hero__trust { grid-template-columns: 1fr 1fr; }
  .hero__actions .btn, .closer__actions .btn { flex: 1 1 100%; }
  .hero__scroll { display: none; }
  .wall__cols { grid-template-columns: 1fr; height: 560px; }
  .wall__col:nth-child(n+2) { display: none; }
  .proof, .closer { margin-inline: 12px; }
  .closer { padding-inline: 24px; }
  .toast { left: 12px; right: 12px; bottom: 96px; max-width: none; }
}

/* ==========================================================================
   iOS / small-screen refinements
   The page uses viewport-fit=cover, so anything pinned to an edge has to
   respect the notch and the home indicator or it sits underneath them.
   ========================================================================== */

/* kill the grey flash iOS paints over tapped elements */
html { -webkit-tap-highlight-color: rgba(0,102,255,.12); }
a, button, .line, [data-talk] { touch-action: manipulation; }

/* iOS needs the prefix or the blur is simply dropped */
.btn--glass { -webkit-backdrop-filter: blur(10px); }
.hero__trust { -webkit-backdrop-filter: blur(8px); }

@supports (padding: max(0px)) {
  .nav {
    top: max(16px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .cc {
    bottom: max(22px, env(safe-area-inset-bottom));
    right: max(22px, env(safe-area-inset-right));
  }
  .foot__base { padding-bottom: max(34px, env(safe-area-inset-bottom)); }
}

/* Apple's minimum comfortable tap target is 44px. Footer and legal links
   were 16–23px, which is a miss on a phone. */
@media (max-width: 880px) {
  .foot__links { gap: 2px 22px; }
  .foot__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot__legal { line-height: 1.9; }
  .foot__legal a { display: inline-block; padding: 6px 0; }
  .nav__mobile a { min-height: 48px; display: flex; align-items: center; }
  .nav__toggle { width: 44px; height: 44px; }
  .brand { min-height: 44px; }
}

/* Landscape phones: the hero's vertical padding wastes most of a short screen */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding-top: 110px; padding-bottom: 56px; }
  .hero__trust { margin-top: 36px; }
  .hero__scroll { display: none; }
  .cc__panel { max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 520px) {
  @supports (padding: max(0px)) {
    .cc {
      left: max(12px, env(safe-area-inset-left));
      right: max(12px, env(safe-area-inset-right));
      bottom: max(12px, env(safe-area-inset-bottom));
    }
  }
  /* the call panel must never exceed the screen on a small phone */
  .cc__panel { max-height: 76vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .cc__viz { height: 68px; }
  .cc__body { padding: 24px 18px 20px; }
  .cc__actions { flex-wrap: wrap; }
  .cc__btn { flex: 1 1 auto; min-height: 46px; }
}

/* Below this the brand + CTA + hamburger no longer fit, and .nav__shell's
   overflow:hidden was clipping the hamburger off the edge — leaving no way to
   open the menu at all. The floating "Talk to us" launcher already carries
   that CTA on every screen, so the nav drops it and keeps the menu. */
@media (max-width: 560px) {
  .nav__cta .btn--primary { display: none; }
  .nav__inner { gap: 10px; }
  .nav__cta { margin-left: auto; }
}

@media (max-width: 480px) {
  .nav__inner { height: 62px; padding-inline: 16px; gap: 12px; }
  .nav__cta .btn--ghost { display: none; }
  .brand__name { font-size: 19px; }
  .card__body, .panel { padding: 26px 22px; }
  .tile { padding: 28px 24px; }
  .hero__lede { max-width: none; }
  .toast { flex-wrap: wrap; }
  .toast__call { margin-left: 52px; }
}