/* 365Trac static export - shared styles
   Brand tokens mirrored from the original Horizons/Tailwind theme. */
:root {
  --primary: 0 100% 44%;          /* #DF0000 red */
  --primary-foreground: 0 0% 100%;
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --muted-foreground: 0 0% 20%;  /* #333333 — matches original theme */
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --border: 0 0% 90%;
  --features-bg: 0 0% 98%;
  --features-heading: 0 0% 10%;
  --features-body: 0 0% 20%;  /* #333333 — matches original theme */
  --section-devices-bg: 0 0% 100%;
  --teal: #2280a8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
}

.text-primary { color: hsl(var(--primary)); }
.bg-primary { background-color: hsl(var(--primary)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.bg-background { background-color: hsl(var(--background)); }
.bg-card { background-color: hsl(var(--card)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.border-border { border-color: hsl(var(--border)); }
.bg-features { background-color: hsl(var(--features-bg)); }
.text-teal { color: var(--teal); }
.bg-teal { background-color: var(--teal); }

.hero-text-shadow { text-shadow: 0 2px 20px rgba(0,0,0,0.35); }

.glass-card-light {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.04);
}
.card-hover { transition: transform .3s ease, box-shadow .3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.10); }

/* Image scale-on-hover utilities (static export equivalents of Tailwind group-hover) */
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.duration-500 { transition-duration: 500ms; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:scale-110 { transform: scale(1.10); }

/* Looping carousel used for vehicle types + industries */
@keyframes carousel {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.animate-carousel { animation: carousel 45s linear infinite; }
.animate-carousel:hover { animation-play-state: paused; }

/* Vehicle types gallery: quicker motion (cell sizing + hover handled by Tailwind classes in markup) */
.vehicle-gallery .animate-carousel { animation-duration: 40s; }

/* Fade/slide reveal on scroll (progressive enhancement) */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Benefits accordion (smooth expand/collapse) ---------- */
.benefit-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .45s cubic-bezier(.4, 0, .2, 1),
              opacity .35s ease,
              padding .45s cubic-bezier(.4, 0, .2, 1);
}
.benefit-panel.open { opacity: 1; }
/* Arrow icon: smooth rotate + easing */
.benefit-icon svg { transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.benefit-icon { transition: background-color .35s ease, color .35s ease; }
/* Subtle zoom on the section image for a smooth, living feel */
#why-365trac .reveal img.object-cover { transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
#why-365trac .reveal:hover img.object-cover { transform: scale(1.05); }

/* ---------- Rotating phrase (fade + move bottom-to-top) ---------- */
#animated-phrase {
  display: inline-block;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
/* Outgoing: fade out while sliding up and off the top */
#animated-phrase.phrase-out { opacity: 0; transform: translateY(-0.5em); }
/* Incoming start: positioned below, invisible (before it eases into place) */
#animated-phrase.phrase-in { opacity: 0; transform: translateY(0.5em); }
/* Used to snap to the start position instantly (no tween) before easing in */
#animated-phrase.no-transition { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .benefit-panel { transition: none; }
  .benefit-icon svg { transition: none; }
  #why-365trac .reveal img.object-cover { transition: none; }
  #animated-phrase { transition: none; }
}

.container-7xl { max-width: 80rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px){ .container-7xl { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px){ .container-7xl { padding-left: 2rem; padding-right: 2rem; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; font-weight: 500; padding: 0.75rem 1.75rem;
  cursor: pointer; text-decoration: none; border: none; transition: all .2s ease;
  font-size: 1rem; line-height: 1;
}
.btn-primary { background: hsl(var(--primary)); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.btn-primary:hover { box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.btn-white { background:#fff; color: hsl(var(--primary)); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.btn-teal { background: var(--teal); color:#fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); transition: box-shadow .2s ease; }
.btn-teal:hover { box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.btn-outline-white { background: rgba(255,255,255,.1); color:#fff; border:1px solid #fff; }
.btn-footer-outline { border:1px solid hsl(var(--border)); color:#000; background:#fff; transition: background-color .2s ease, border-color .2s ease; }
.btn-footer-outline:hover { background:#f3f4f6; border-color:#f3f4f6; }
.btn:active { transform: scale(.98); }

/* ===== Ecosystem orbit (animated) ===== */
.eco-orbit {
  position: relative;
  width: 900px;
  height: 900px;
  flex-shrink: 0;
  transform-origin: center center;
  transform: scale(0.39);
}
/* soft light-blue radial glow fanning out from the centre to the edges */
.eco-orbit::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center,
              rgba(34,128,168,0.06) 0%,
              rgba(34,128,168,0.03) 40%,
              rgba(34,128,168,0.012) 62%,
              rgba(34,128,168,0) 80%);
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 480px)  { .eco-orbit { transform: scale(0.56); } }
@media (min-width: 640px)  { .eco-orbit { transform: scale(0.73); } }
@media (min-width: 768px)  { .eco-orbit { transform: scale(0.86); } }
@media (min-width: 1024px) { .eco-orbit { transform: scale(1.03); } }
@media (min-width: 1280px) { .eco-orbit { transform: scale(1.10); } }

/* A CSS transform does NOT shrink the layout box, so the WRAPPER must reserve the
   *scaled* height (900 * scale), otherwise the stage clips top/bottom or leaves gaps.
   The wrapper centers the scaled stage and lets it overflow visibly. */
.eco-orbit-wrap {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
  height: 351px;                 /* 900 * 0.39 */
  margin-top: 40px;
}
@media (min-width: 768px)  { .eco-orbit-wrap { margin-top: 72px; } }
@media (min-width: 1024px) { .eco-orbit-wrap { margin-top: 96px; } }
@media (min-width: 480px)  { .eco-orbit-wrap { height: 504px; } }  /* 900 * 0.56 */
@media (min-width: 640px)  { .eco-orbit-wrap { height: 657px; } }  /* 900 * 0.73 */
@media (min-width: 768px)  { .eco-orbit-wrap { height: 774px; } }  /* 900 * 0.86 */
@media (min-width: 1024px) { .eco-orbit-wrap { height: 927px; } }  /* 900 * 1.03 */
@media (min-width: 1280px) { .eco-orbit-wrap { height: 990px; } }  /* 900 * 1.10 */

.eco-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

@keyframes ecoRingPulse { 0%,100% { opacity: .08; } 50% { opacity: .16; } }
@keyframes ecoMarch { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -28; } }
@keyframes ecoHubPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.04); } }
@keyframes ecoFloat { 0%,100% { transform: translateY(0); } 25% { transform: translateY(-6px); } 75% { transform: translateY(4px); } }
@keyframes ecoBeat { 0%,100% { transform: scale(0.94); } 50% { transform: scale(1.06); } }

.eco-hub {
  position: absolute; top: 50%; left: 50%;
  width: 150px; height: 150px;
  transform: translate(-50%,-50%);
  border-radius: 50%; background: #fff;
  box-shadow: 0 8px 48px rgba(34,128,168,.22), 0 2px 12px rgba(0,0,0,.10);
  display: flex; align-items: center; justify-content: center;
  z-index: 20; overflow: hidden;
  animation: ecoHubPulse 3.5s ease-in-out infinite;
}
.eco-hub img { width: 88%; height: 88%; object-fit: contain; }

.eco-hub-label {
  position: absolute; top: 50%; left: 0; right: 0;
  margin-top: 84px; z-index: 30;
  display: flex; justify-content: center; pointer-events: none;
}
.eco-hub-label span {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600; color: #fff; background: #df0000;
  padding: 6px 12px; border-radius: 50px; line-height: 1.2; white-space: nowrap;
}
.eco-hub-label img { height: .9em; width: auto; margin-right: 3px; }

.eco-node {
  position: absolute; top: 0; left: 0;
  z-index: 10; will-change: transform;
}
.eco-node .eco-ico {
  border-radius: 50%; background: #fff;
  box-shadow: 0 4px 20px rgba(34,128,168,.18), 0 1px 6px rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  animation: ecoFloat 4s ease-in-out infinite;
  margin: 0 auto;
}
.eco-node .eco-ico img { width: 72%; height: 72%; object-fit: contain; animation: ecoBeat 2.6s ease-in-out infinite; }
/* label floats just below the icon, centered on the node, kept on a single line */
.eco-node .eco-label {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 6px;
  font-size: 11px; font-weight: 500; color: #fff;
  background: #2280a8; padding: 4px 10px; border-radius: 50px;
  text-align: center; line-height: 1.2; width: max-content; max-width: none;
  white-space: nowrap;
}

/* ===== Real-life applications carousel ===== */
.apps-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: clamp(480px, 68vh, 660px);
}

.apps-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
  transform: translateX(0);
  will-change: transform;
  backface-visibility: hidden;
}

.apps-slide-bg { position: absolute; inset: 0; }
.apps-slide-bg img { width: 100%; height: 100%; object-fit: cover; }

.apps-slide-inner {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 2.5rem 1.5rem;
}
@media (min-width: 640px) { .apps-slide-inner { padding: 3.5rem 4rem; } }
@media (min-width: 1024px) { .apps-slide-inner { padding: 5rem 6rem; } }

.apps-card {
  width: 100%;
  max-width: 64rem;
  border-radius: 1rem;
  padding: 1.75rem;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 8px 32px rgba(15,40,60,0.10);
}
@media (min-width: 640px) { .apps-card { padding: 2.25rem; } }
@media (min-width: 1024px) { .apps-card { padding: 3rem; } }

/* Slide transitions: both slides move together, driven by JS-toggled classes */
.apps-from-right { transform: translateX(100%); }
.apps-from-left  { transform: translateX(-100%); }
.apps-to-right   { transform: translateX(100%); }
.apps-to-left    { transform: translateX(-100%); }
.apps-animate    { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

/* Arrows */
.apps-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: transform .2s ease;
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: 0 4px 18px rgba(15,40,60,0.12);
  color: rgb(15,23,42);
}
@media (min-width: 640px) { .apps-arrow { width: 3rem; height: 3rem; } }
.apps-arrow:hover { transform: translateY(-50%) scale(1.1); }
.apps-arrow:active { transform: translateY(-50%) scale(0.95); }
.apps-arrow-left { left: 1rem; }
.apps-arrow-right { right: 1rem; }
@media (min-width: 640px) { .apps-arrow-left { left: 1.5rem; } .apps-arrow-right { right: 1.5rem; } }
@media (min-width: 1024px) { .apps-arrow-left { left: 2.5rem; } .apps-arrow-right { right: 2.5rem; } }

/* Dots */
.apps-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgba(0,0,0,0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .3s ease;
}
.apps-dot-active { width: 28px; background: hsl(var(--primary)); }

/* ---------- Theft prevention video (poster overlay + play button) ---------- */
.theft-video-overlay {
  background: rgba(0, 0, 0, 0.45);
  transition: background-color 0.3s ease;
}
.theft-video-btn:hover .theft-video-overlay { background: rgba(0, 0, 0, 0.35); }

.theft-video-play {
  width: 5rem;
  height: 5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}
.theft-video-btn:hover .theft-video-play { transform: scale(1.1); }
.theft-video-btn:active .theft-video-play { transform: scale(0.95); }

@media (prefers-reduced-motion: reduce) {
  .theft-video-overlay,
  .theft-video-play { transition: none; }
}

/* ---------- App download buttons (365Trac + Shadow) ---------- */
.app-dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.app-dl-btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.app-dl-btn:active { transform: scale(0.98); }

/* Dark variant (on dark CTA background) */
.app-dl-primary-dark { background: #fff; color: hsl(var(--primary)); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2); }
.app-dl-primary-dark:hover { background: #f3f4f6; }
.app-dl-outline-dark { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid #fff; backdrop-filter: blur(2px); }
.app-dl-outline-dark:hover { background: rgba(255,255,255,0.2); }

/* Light variant (on light footer background) */
.app-dl-outline-light { background: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
.app-dl-outline-light:hover { background: #f3f4f6; }

.app-dl-shadow-logo { height: 2.5rem; width: auto; object-fit: contain; }
@media (min-width: 768px) { .app-dl-shadow-logo { height: 3rem; } }