:root {
  --brand-blue: #0ea5e9; /* sky-500 */
  --brand-blue-dark: #0284c7; /* sky-600 */
  --accent-yellow: #ffcc00;
}
html, body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
.section { padding: 4rem 0; }
@media (min-width: 768px) { .section { padding: 6rem 0; } }

/* Global blue background gradient: strong top-right to bottom-left */
.shine{}

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; border-radius:0.75rem; padding:0.75rem 1.25rem; font-weight:700; text-decoration:none; transition:transform .05s ease, filter .15s ease, box-shadow .2s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-blue); color:#fff; box-shadow: 0 10px 20px rgba(14,165,233,.25); }
.btn-primary:hover { filter: brightness(.95); }
.btn-quote { background: var(--accent-yellow); color:#111827; box-shadow: 0 10px 20px rgba(255, 204, 0, .35); }
.btn-quote:hover { filter: brightness(.98); }
.btn-ghost { background:#fff; color:#334155; border:1px solid #CBD5E1; }

/* Badge */
.badge { display:inline-flex; align-items:center; border:1px solid #BAE6FD; background:#ECFEFF; color:#0369A1; border-radius:999px; padding:.25rem .6rem; font-size:.75rem; font-weight:700; }

/* Cards & grids */
.card { background:#fff; border-radius:1rem; box-shadow:0 10px 25px rgba(2,6,23,.06); border:1px solid rgba(2,6,23,.06); }
.grid-auto-fit { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.25rem; }

/* Review rotator slide transitions */
.review-rotator{position:relative;min-height:56px;overflow:hidden}
.review-quote{position:absolute;inset:0;display:flex;align-items:center;transition:transform .45s ease,opacity .45s ease;will-change:transform,opacity}
.review-quote.out{transform:translateY(-16px);opacity:0}
.review-quote.in{transform:translateY(16px);opacity:0}
.review-quote.active{transform:translateY(0);opacity:1}

/* Hero: bold blue band with angled white cut */


/* Reviews card styling to better match site */
.reviews-card{
  background:#fff;
  border:1px solid rgba(2,6,23,.06);
  box-shadow:0 18px 40px rgba(2,6,23,.10);
  border-radius:1rem;
}

/* Slide rotator */
.review-rotator{position:relative;min-height:64px;overflow:hidden}
.review-quote{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transform:translateY(12px);transition:transform .45s ease,opacity .45s ease}
.review-quote.active{opacity:1;transform:translateY(0)}
.review-quote.out{opacity:0;transform:translateY(-12px)}
.review-quote.in{opacity:0;transform:translateY(12px)}

/* Soft hero background with subtle blue accent */
.hero-soft{
  position:relative;
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(14,165,233,.12), transparent 60%);
}
.hero-soft .headline{color:#0f172a}
.hero-soft .subtle{color:#334155}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media (min-width: 768px){ .hero-grid{grid-template-columns:minmax(0,1fr) 360px} }
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}


/* --- Bubbles Top Half --- */
.hero-soft { position: relative; overflow: hidden; }
.bubbles-top {
  position: absolute;
  top: 0; height: 50%;
  left: 0; width: 100%;
  pointer-events: none;
  z-index: 0;
}
.bubbles-top .bubble {
  position: absolute;
  top: 100%;
  width: var(--size, 24px);
  height: var(--size, 24px);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(173,216,255,.95), rgba(100,180,255,.65) 40%, rgba(50,150,255,.45) 65%, rgba(50,150,255,0) 72%);
  border: 1px solid rgba(30,100,255,.6);
  box-shadow: inset 0 0 10px rgba(255,255,255,.25), 0 8px 18px rgba(2,6,23,.12);
  animation: bubble-rise-top var(--duration, 12s) ease-in infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes bubble-rise-top {
  0%   { transform: translateY(0) translateX(0) scale(.95); opacity: 0; }
  10%  { opacity: 0.85; }
  100% { transform: translateY(-120%) translateX(var(--drift, 0px)) scale(1.05); opacity: 0; }
}
.hero-soft > *:not(.bubbles-top) {
  position: relative;
  z-index: 1;
}



.bubbles-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bubbles-top .bubble {
  position: absolute;
  bottom: 0;
  width: var(--size, 24px);
  height: var(--size, 24px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(173,216,255,0.95), rgba(100,180,255,0.65) 40%, rgba(50,150,255,0.45) 65%, rgba(50,150,255,0) 72%);
  border: 1px solid rgba(30,100,255,0.6);
  animation: bubble-rise 12s ease-in infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes bubble-rise {
  0% {
    transform: translateY(100%) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateY(-50%) translateX(calc(var(--drift, 20px) * 0.5));
    opacity: 0.9;
  }
  100% {
    transform: translateY(-200%) translateX(var(--drift, 20px));
    opacity: 0;
  }
}



:root {
  --bubble-blue: 34, 130, 255;
  --max-bubbles: 80;
}
.hero-soft {
  position: relative;
}
.hero-soft #bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.hero-soft > *:not(#bubbles) {
  position: relative;
  z-index: 1;
}