html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.bg-grid-pattern {
    background-image:
            linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* =====================================================================
   Scroll-reveal + motion system  (adds "life" across the lander)
   ===================================================================== */

/* Elements marked .reveal fade+slide in when scrolled into view.
   .reveal-stagger animates its direct children in sequence (JS sets delays). */
.reveal,
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
                transform .7s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}
.reveal.reveal-left  { transform: translateX(-40px); }
.reveal.reveal-right { transform: translateX(40px); }
.reveal.reveal-scale { transform: scale(.94); }

.reveal.is-visible,
.reveal-stagger.is-visible > * {
    opacity: 1;
    transform: none;
}

/* Respect users who prefer no motion — show everything instantly, no animation. */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .kenburns, .device-bg, .float-slow, .shimmer::after, .ping-dot::before { animation: none !important; }
}

/* Slow Ken-Burns drift for the device section's office background. */
.device-bg {
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns {
    0%   { transform: scale(1.06) translate3d(0, 0, 0); }
    100% { transform: scale(1.18) translate3d(-2.5%, -2%, 0); }
}

/* Gentle bob for floating accents. */
.float-slow { animation: floatSlow 6s ease-in-out infinite; }
@keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Sheen sweep across a button/badge. */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
    content: ""; position: absolute; top: 0; left: -150%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    animation: sheen 5.5s ease-in-out infinite;
}
@keyframes sheen { 0%, 60% { left: -150%; } 100% { left: 150%; } }

/* =====================================================================
   Unified button system — ONE look for every CTA across the whole lander.
   Every primary button glows + lifts identically; no more per-page variants.
   Usage: class="t7-btn t7-btn-primary"  (+ optional t7-btn-lg / t7-btn-block)
   ===================================================================== */
.t7-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 600; font-size: .95rem; line-height: 1.1;
    padding: .72rem 1.5rem; border-radius: .75rem;
    border: 1px solid transparent;
    cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1),
                box-shadow .25s cubic-bezier(.16, 1, .3, 1),
                background-color .2s ease, border-color .2s ease;
}
.t7-btn:hover  { transform: translateY(-2px); }
.t7-btn:active { transform: translateY(0); }
.t7-btn-lg     { padding: .9rem 2rem; font-size: 1.05rem; }
.t7-btn-block  { width: 100%; }

.t7-btn-primary {
    background: #2D6CF6; color: #fff;
    box-shadow: 0 6px 20px -6px rgba(45, 108, 246, .55);
}
.t7-btn-primary:hover { background: #245ee0; box-shadow: 0 16px 34px -10px rgba(45, 108, 246, .7); }

.t7-btn-secondary {
    background: #fff; color: #0f172a; border-color: #e2e8f0;
    box-shadow: 0 2px 10px -3px rgba(15, 23, 42, .10);
}
.t7-btn-secondary:hover { border-color: #bfdbfe; box-shadow: 0 12px 28px -10px rgba(15, 23, 42, .18); }

/* Ghost/outline for dark sections (device hero). */
.t7-btn-ghost {
    background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .25);
}
.t7-btn-ghost:hover { background: rgba(255, 255, 255, .12); }

/* Consistent "eyebrow" pill above section headings — a small leading dot in the
   accent color, matching the device section's badge. */
.t7-eyebrow { display: inline-flex; align-items: center; gap: .5rem; }
.t7-eyebrow::before {
    content: ""; width: .45rem; height: .45rem; border-radius: 9999px;
    background: currentColor; opacity: .75;
}

/* Pulsing "ready" dot (uses currentColor). */
.ping-dot { position: relative; }
.ping-dot::before {
    content: ""; position: absolute; inset: 0; border-radius: 9999px;
    background: currentColor; opacity: .6;
    animation: pingdot 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes pingdot { 75%, 100% { transform: scale(2.4); opacity: 0; } }