.flatpickr-calendar {
  border: 1px solid rgb(226 232 240) !important;
  border-radius: 1rem !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18) !important;
  font-family: inherit !important;
  overflow: hidden !important;
}

.flatpickr-months {
  background: white !important;
}

.flatpickr-current-month {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: rgb(15 23 42) !important;
  padding-top: 0.35rem !important;
}

.flatpickr-weekdays {
  background: white !important;
}

span.flatpickr-weekday {
  color: rgb(100 116 139) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
}

.flatpickr-day {
  border-radius: 0.75rem !important;
  color: rgb(30 41 59) !important;
}

.flatpickr-day:hover {
  background: rgb(248 250 252) !important;
  border-color: rgb(248 250 252) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: rgb(15 23 42) !important;
  border-color: rgb(15 23 42) !important;
  color: white !important;
}

.flatpickr-day.today {
  border-color: rgb(148 163 184) !important;
}

.flatpickr-time {
  border-top: 1px solid rgb(241 245 249) !important;
  background: white !important;
  height: 52px !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  color: rgb(30 41 59) !important;
  font-weight: 600 !important;
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: rgb(248 250 252) !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  fill: rgb(100 116 139) !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  fill: rgb(15 23 42) !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  display: none !important;
}
.of-auth-page {
    font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .of-auth-display {
    font-family: "Sora", system-ui, sans-serif;
  }

  .of-auth-mono {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }

  .of-auth-grid {
    background-image:
      linear-gradient(rgba(37, 99, 235, .06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(37, 99, 235, .06) 1px, transparent 1px);
    background-size: 38px 38px;
  }

  .of-auth-input {
    width: 100%;
    border-radius: 1rem;
    border: 1px solid rgb(226 232 240);
    background: rgba(248, 250, 252, .8);
    padding: .85rem 1rem;
    font-size: .95rem;
    font-weight: 500;
    color: rgb(15 23 42);
    outline: none;
    transition: all .2s ease;
  }

  .of-auth-input:focus {
    border-color: rgb(37 99 235);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
  }

  .of-auth-btn {
    background: linear-gradient(135deg, #2563eb 0%, #0891b2 100%);
    box-shadow: 0 18px 36px -18px rgba(37, 99, 235, .75);
    transition: all .2s ease;
  }

  .of-auth-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 24px 44px -20px rgba(37, 99, 235, .9);
  }

  .of-live-dot {
    box-shadow: 0 0 0 rgba(16, 185, 129, .45);
    animation: ofPulse 1.8s infinite;
  }

  @keyframes ofPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
  }
/* Mobile application shell. These rules also improve the narrow browser layout;
   display-mode overrides add native safe-area behavior when installed. */
:root { --app-safe-top: env(safe-area-inset-top, 0px); --app-safe-bottom: env(safe-area-inset-bottom, 0px); }

.mobile-app-header {
  position: relative;
  z-index: 45;
  flex-shrink: 0;

  min-height: calc(3.5rem + var(--app-safe-top));
  padding: var(--app-safe-top) .75rem 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
}

.mobile-bottom-nav {
  position: relative;
  z-index: 45;
  flex-shrink: 0;

  padding-bottom: var(--app-safe-bottom);
  border-top: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -8px 28px rgba(15, 23, 42, .06);
  backdrop-filter: blur(18px);
}
.mobile-app-brand { display:flex; align-items:center; gap:.55rem; color:#0f172a; font-weight:800; letter-spacing:-.02em; }
.mobile-header-action { width:2.5rem; height:2.5rem; display:flex; align-items:center; justify-content:center; border-radius:.8rem; color:#475569; cursor:pointer; list-style:none; }
.mobile-header-action::-webkit-details-marker { display:none; }
.mobile-header-action:active { background:#f1f5f9; transform:scale(.96); }
.mobile-header-action:focus-visible, .mobile-app-brand:focus-visible, .mobile-nav-link:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
.mobile-more-menu { position:relative; }
.mobile-more-panel { position:absolute; right:0; top:3rem; width:14rem; padding:.5rem; border:1px solid #e2e8f0; border-radius:1rem; background:white; box-shadow:0 18px 45px rgba(15,23,42,.16); }
.mobile-more-panel a { display:flex; align-items:center; gap:.75rem; padding:.7rem .75rem; border-radius:.7rem; color:#334155; font-size:.875rem; font-weight:600; }
.mobile-more-panel a:active { background:#f1f5f9; }
.mobile-more-panel i { width:1.25rem; text-align:center; color:#64748b; }
.mobile-more-title { padding:.45rem .75rem; color:#94a3b8; font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.mobile-nav-link { min-height:4rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; color:#94a3b8; font-size:.6875rem; font-weight:700; transition:color .15s ease; }
.mobile-nav-icon { width:2.75rem; height:1.9rem; display:flex; align-items:center; justify-content:center; border-radius:999px; font-size:1.15rem; }
.mobile-nav-link.is-active { color:#2563eb; }
.mobile-nav-link.is-active .mobile-nav-icon { background:#dbeafe; }

@media (max-width: 639px) {
  html, body { max-width:100%; overflow-x:hidden; }
  .desktop-app-topbar { display:none; }
  #app-content > section { min-width:0; }
  #app-content section.rounded-2xl { border-radius:1rem; }
  #app-content h1 { font-size:1.125rem; line-height:1.5rem; }
  #app-content input, #app-content select, #app-content button, #app-content a { max-width:100%; }
  #app-content form .md\:w-\[190px\], #app-content form .md\:w-\[300px\] { width:100%; }
  #app-content .overflow-x-auto { overscroll-behavior-inline:contain; scrollbar-width:thin; }
}

@media (max-width: 1023px) {
  #app-content:has(.mobile-map-screen) { padding:0; overflow:hidden; }
  .mobile-map-screen { height:100%; min-height:0; }
}

@media (min-width: 1024px) { .mobile-app-header { display:none; } }

@media (display-mode: standalone) {
  body.app-shell { min-height:100dvh; user-select:none; -webkit-tap-highlight-color:transparent; }
  input, textarea { user-select:text; }
  #app-content { overscroll-behavior-y:contain; }
}
.mobile-row-action { min-height:2.75rem; display:flex; align-items:center; justify-content:center; gap:.4rem; border-radius:.65rem; background:#f8fafc; color:#475569; font-size:.75rem; font-weight:600; }
.mobile-row-action:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
:root{
  --indigo: 99,102,241;
  --sky: 56,189,248;
  --emerald: 52,211,153;
}

/* ---------- HERO BACKGROUND (dark tech) ---------- */
.aurora{
  background:
    radial-gradient(60% 60% at 10% 10%, rgba(var(--indigo),.35) 0%, transparent 55%),
    radial-gradient(55% 55% at 90% 15%, rgba(var(--sky),.25) 0%, transparent 60%),
    radial-gradient(50% 50% at 60% 90%, rgba(var(--emerald),.18) 0%, transparent 60%);
  filter: blur(22px);
  transform: scale(1.1);
  animation: auroraMove 10s ease-in-out infinite alternate;
}
@keyframes auroraMove{
  0%{ transform: translate3d(-1%, -1%, 0) scale(1.1); opacity:.9;}
  100%{ transform: translate3d(1%, 1%, 0) scale(1.15); opacity:1;}
}

.grid-overlay{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 60%);
  opacity:.35;
  animation: gridMove 14s linear infinite;
}
@keyframes gridMove{
  0%{ background-position: 0 0, 0 0;}
  100%{ background-position: 128px 64px, 128px 64px;}
}

/* floating particles (tech dust) */
.particles{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.20) 1px, transparent 1px),
    radial-gradient(circle, rgba(56,189,248,.18) 1px, transparent 1px),
    radial-gradient(circle, rgba(99,102,241,.18) 1px, transparent 1px);
  background-size: 140px 140px, 220px 220px, 320px 320px;
  mix-blend-mode: screen;
  opacity:.25;
  animation: particlesDrift 26s linear infinite;
}
@keyframes particlesDrift{
  0%{ background-position: 0 0, 40px 80px, -80px 40px; }
  100%{ background-position: 240px 180px, 320px -40px, 120px 240px; }
}

/* moving routes */
.route, .route2{
  stroke: rgba(148,163,184,.7);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 10 10;
  animation: dash 5s linear infinite;
}
.route2{ stroke: rgba(56,189,248,.55); animation-duration: 7s; }
@keyframes dash{ to { stroke-dashoffset: -240; } }

/* shimmer/progress */
.progress{
  background: linear-gradient(90deg, rgba(var(--indigo),.95), rgba(var(--sky),.9), rgba(var(--emerald),.8));
  animation: shimmer 1.8s linear infinite;
  transform: translateX(-20%);
}
@keyframes shimmer{
  0%{ transform: translateX(-35%); }
  100%{ transform: translateX(35%); }
}

.floaty{ animation: floaty 3.5s ease-in-out infinite; }
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* ---------- LIGHT SECTIONS TECH PATTERN ---------- */
.soft-grid{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15,23,42,.10) 1px, transparent 0);
  background-size: 18px 18px;
}

/* ---------- ICON MICRO-ANIMS ---------- */
.pulseDot{ animation: pulseDot 1.4s ease-in-out infinite; transform-origin: center; }
@keyframes pulseDot { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.8); opacity: 1; } }

.pulseRing{
  position: relative;
}
.pulseRing::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  border:1px solid rgba(var(--sky),.55);
  opacity:.0;
  transform: scale(.65);
  animation: ring 1.7s ease-out infinite;
}
@keyframes ring{
  0%{ opacity:.0; transform: scale(.65); }
  30%{ opacity:.55; }
  100%{ opacity:0; transform: scale(1.25); }
}

.radarSweep{ animation: radar 2.6s linear infinite; transform-origin: 50% 50%; }
@keyframes radar { from { transform: rotate(0deg); opacity: .95; } to { transform: rotate(360deg); opacity: .95; } }

.barShine{ animation: bar 1.4s ease-in-out infinite; }
@keyframes bar { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* pricing highlight glow */
.glowBorder{
  box-shadow:
    0 0 0 1px rgba(var(--indigo),.35),
    0 0 0 1px rgba(34,211,238,.12) inset,
    0 18px 60px rgba(var(--indigo),.18);
}

/* card hover polish */
.cardHover{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cardHover:hover{
  transform: translateY(-3px);
  border-color: rgba(99,102,241,.35);
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
}

/* animated road + truck (CSS motion path with fallback) */
.roadLine{
  stroke: rgba(148,163,184,.55);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  animation: dash 6s linear infinite;
}
.truck{
  width: 46px;
  height: 46px;
  position: absolute;
  left: 6%;
  top: 66%;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  animation: driveFallback 9s linear infinite;
}
@keyframes driveFallback{
  0%{ transform: translateX(0) translateY(0) rotate(-3deg); opacity:.95; }
  45%{ transform: translateX(260px) translateY(-42px) rotate(1deg); }
  100%{ transform: translateX(560px) translateY(-110px) rotate(3deg); opacity:.95; }
}
@supports (offset-path: path("M0 0 L10 10")){
  .truck{
    left: auto; top: auto;
    offset-path: path("M 70 290 C 210 180, 330 330, 470 230 S 680 120, 840 160");
    -webkit-offset-path: path("M 70 290 C 210 180, 330 330, 470 230 S 680 120, 840 160");
    offset-rotate: auto;
    -webkit-offset-rotate: auto;
    animation: drive 9.5s linear infinite;
  }
  @keyframes drive{
    0%{ offset-distance: 0%; opacity:.96; }
    100%{ offset-distance: 100%; opacity:.96; }
  }
}

/* reveal on scroll */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* tiny sparkline anim */
.spark path{ stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 1.8s ease forwards; }
@keyframes draw{ to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce){
  .aurora,.grid-overlay,.particles,.route,.route2,.progress,.floaty,
  .pulseDot,.pulseRing::after,.radarSweep,.barShine,.truck,.reveal,.spark path{
    animation: none !important;
    transition: none !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* --- Control tower section enhancements --- */
.ctChip{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid rgba(226,232,240,1);
  background: rgba(255,255,255,.85);
  padding:.45rem .75rem;
  border-radius: 9999px;
  font-size:.875rem;
  color: rgb(51,65,85);
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.ctChip:hover{ transform: translateY(-1px); box-shadow: 0 10px 30px rgba(15,23,42,.10); border-color: rgba(203,213,225,1); }
.ctChip.isActive{ border-color: rgba(var(--indigo),.35); box-shadow: 0 0 0 3px rgba(var(--indigo),.10), 0 18px 40px rgba(15,23,42,.10); background: rgba(255,255,255,.98); }
.ctChipDot{ width:.5rem; height:.5rem; border-radius:9999px; display:inline-block; }
.ctChipCount{ margin-left:.25rem; font-size:.75rem; color: rgb(100,116,139); background: rgba(226,232,240,.6); border: 1px solid rgba(226,232,240,1); padding: .05rem .4rem; border-radius: 9999px; }
.pulseDot{
  width:.55rem; height:.55rem; border-radius:9999px;
  background: rgba(16,185,129,1);
  position: relative;
}
.pulseDot:after{
  content:""; position:absolute; inset:-7px;
  border-radius:9999px;
  border: 2px solid rgba(16,185,129,.45);
  animation: ctPing 1.4s ease-out infinite;
}
.liveBadge{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.25rem .55rem;
  border-radius:9999px;
  border:1px solid rgba(226,232,240,1);
  background: rgba(255,255,255,.85);
}
.liveBadge:before{
  content:""; width:.4rem; height:.4rem; border-radius:9999px;
  background: rgba(16,185,129,1);
  margin-right:.4rem;
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}
.ctBar{ display:block; width:100%; border-radius: 9999px; background: rgba(99,102,241,.28); }
.ctRoute{ stroke-dasharray: 10 14; animation: ctDash 7s linear infinite; }
.ctRoute2{ stroke-dasharray: 6 14; animation-duration: 9s; opacity:.75; }
.ctCluster{ animation: ctPulse 2.6s ease-in-out infinite; transform-origin: center; }
.ctCluster2{ animation-delay: .55s; }
.ctNode{ animation: ctNodePulse 2.2s ease-in-out infinite; }
.ctSignal{ opacity:.0; }
.ctSignalA{ animation: ctSignalMoveA 6.8s linear infinite; }
.ctSignalB{ animation: ctSignalMoveB 7.6s linear infinite; }

@keyframes ctPing{ 0%{ transform: scale(.6); opacity:.85 } 70%{ transform: scale(1.15); opacity:0 } 100%{ opacity:0 } }
@keyframes ctDash{ to { stroke-dashoffset: -200; } }
@keyframes ctPulse{ 0%,100%{ opacity:.7 } 50%{ opacity:1 } }
@keyframes ctNodePulse{ 0%,100%{ transform: scale(1); opacity:.95 } 50%{ transform: scale(1.08); opacity:1 } }
@keyframes ctSignalMoveA{
  0%{ opacity:0; transform: translate(0px,0px); }
  8%{ opacity:1 }
  100%{ opacity:0; transform: translate(640px,-25px); }
}
@keyframes ctSignalMoveB{
  0%{ opacity:0; transform: translate(0px,0px); }
  10%{ opacity:1 }
  100%{ opacity:0; transform: translate(600px,45px); }
}

/* filtering */
.ctHide{ opacity:.08 !important; filter: grayscale(1); }
/* =========================================================
   OctaFleet Marketing Theme
   Scoped under .of-page to avoid affecting the main app UI
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  background: #f5f8ff;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================
   Theme scope
   ========================= */

.of-page {
  --of-ink: #0a1124;
  --of-ink-2: #0c1733;
  --of-primary: #2563eb;
  --of-primary-700: #1d4ed8;
  --of-cyan: #22d3ee;
  --of-live: #34d399;
  --of-amber: #f59e0b;
  --of-slate-ink: #0a1426;
  --of-line: #e6ecf7;
  --of-page-bg: #f5f8ff;

  color: #27324a;
}

/* =========================
   Typography
   ========================= */

.of-page .of-display {
}

.of-page .of-mono {
  font-feature-settings: "tnum" 1;
}

/* =========================
   Layout
   ========================= */

.of-page .of-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 1024px) {
  .of-page .of-container {
    padding-inline: 2rem;
  }
}

/* =========================
   Header
   ========================= */

.of-page .of-header {
  background: rgba(247, 249, 252, 0.88);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
}

/* =========================
   Buttons
   ========================= */

.of-page .of-btn-primary {
  position: relative;
  background: linear-gradient(
    180deg,
    #2f6bff 0%,
    var(--of-primary) 55%,
    var(--of-primary-700) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 12px 28px -8px rgba(37, 99, 235, 0.6);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.of-page .of-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 18px 36px -10px rgba(37, 99, 235, 0.7);
  filter: saturate(1.05);
}

.of-page .of-btn-ghost {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.of-page .of-btn-ghost:hover {
  transform: translateY(-2px);
}

/* =========================
   Labels
   ========================= */

.of-page .of-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #d9e3f8;
  background: #eef3ff;
  color: var(--of-primary-700);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.of-page .of-section-label::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--of-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* =========================
   Cards
   ========================= */

.of-page .of-card {
  transition:
    transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 300ms ease,
    border-color 300ms ease;
}

.of-page .of-card-hover:hover {
  transform: translateY(-6px);
  border-color: #c9d8f7;
}

/* =========================
   Form inputs
   ========================= */

.of-page .of-input {
  width: 100%;
  border: 1px solid #d7e0f2;
  background: #fbfcff;
  border-radius: 0.9rem;
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  color: #0a1426;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.of-page .of-input:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--of-primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.of-page select.of-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* =========================
   Textures / grids
   ========================= */

.of-page .of-grid-texture,
.of-page .of-grid-texture {
  background-image:
    linear-gradient(to right, rgba(37, 99, 235, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 99, 235, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
}

.of-page .of-grid-dark,
.of-grid-dark {
  background-image:
    linear-gradient(to right, rgba(148, 184, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 184, 255, 0.08) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* =========================
   Live dot
   ========================= */

.of-page .of-live-dot {
  position: relative;
}

.of-page .of-live-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 2px solid currentColor;
  opacity: 0.6;
  animation: of-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes of-ping {
  0% {
    transform: scale(0.7);
    opacity: 0.7;
  }

  80%,
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

/* =========================
   Hero route animation
   ========================= */

.of-page .of-route-flow {
  stroke-dasharray: 6 10;
  animation: of-dash 5s linear infinite;
}

@keyframes of-dash {
  to {
    stroke-dashoffset: -320;
  }
}

/* =========================
   Reveal animation
   ========================= */

.of-page .of-reveal {
  opacity: 0;
  animation: of-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.of-page .of-d1 {
  animation-delay: 50ms;
}

.of-page .of-d2 {
  animation-delay: 150ms;
}

.of-page .of-d3 {
  animation-delay: 250ms;
}

.of-page .of-d4 {
  animation-delay: 350ms;
}

.of-page .of-d5 {
  animation-delay: 450ms;
}

@keyframes of-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   Accessibility
   ========================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .of-page *,
  .of-page *::before,
  .of-page *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .of-page .of-reveal {
    opacity: 1;
    transform: none;
  }
}



/* Layout container used by header, main sections and footer */
.of-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 1024px) {
  .of-container {
    padding-inline: 2rem;
  }
}

/* Header is outside .of-page, so keep this unscoped */
.of-header {
  background: rgba(247, 249, 252, 0.88);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.speed-badge {
  display: block;
  min-width: 78px;
  text-align: center;
}


.mb-15{
  margin-bottom: 15px;
}