/* PitSync Theme */
:root {
    --primary: #30B3AE;
    --primary-dark: #278F8B;
    --primary-light: #E6F7F5;
    --secondary: #4FD1C5;
    --dark: #1F2937;
    --light: #F8FFFD;
    --success: #10B981;
    --warning: #F59E0B;

    /* Aliases for modern-styles.css tokens (keeps color palette consistent) */
    --primary-color: var(--primary);
    --primary-dark: var(--primary-dark);
    --accent-color: var(--secondary);
    --text-dark: var(--dark);
    --text-light: #6b7280; /* neutral muted text */
    --background-light: var(--light);
    --navbar-height-mobile: 56px;
    --navbar-height-desktop: 80px;
}

/* Skip link for keyboard navigation */
.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    background: var(--primary);
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    z-index: 1100;
}

/* Visible focus styles */
:where(a, button, [role="button"], .nav-link, .btn, input, textarea):focus-visible {
    outline: 3px solid rgba(48, 179, 174, 0.5);
    outline-offset: 2px;
    border-radius: 8px;
}
/* Dark theme variables */
html[data-theme="dark"] {
    --light: #0b0f12;
    --background-light: #0b0f12;
    --dark: #E5E7EB;
    --text-dark: #E5E7EB;
    --text-light: #9CA3AF;
    --primary: #30B3AE;
    --primary-dark: #2aa29e;
    --secondary: #4FD1C5;
}

/* Brand logo sizing */
.navbar-brand { display: flex; align-items: center; line-height: 0; }
.navbar-brand img {
    height: 32px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* Themed brand logo swapping (light/dark) */
.navbar-brand img.brand-logo { height: 32px; width: auto; display: block; }

/* default: light shows, dark hidden */
.navbar-brand .brand-logo--light { display: block; }
.navbar-brand .brand-logo--dark { display: none; }

/* explicit dark via toggle */
html[data-theme="dark"] .navbar-brand .brand-logo--light { display: none; }
html[data-theme="dark"] .navbar-brand .brand-logo--dark { display: block; }

/* explicit light via toggle */
html[data-theme="light"] .navbar-brand .brand-logo--light { display: block; }
html[data-theme="light"] .navbar-brand .brand-logo--dark { display: none; }

/* system dark when no explicit toggle */

/* Base nav list layout */
.navbar-nav {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
}
.navbar-nav li { list-style: none; }
@media (min-width: 992px) {
  .navbar-nav { margin-left: auto; } /* push links to the right on desktop */
}

.navbar .nav-link {
    text-decoration: none;
    color: #1f2937; /* strong contrast on light */
    font-weight: 500; /* comfortable, not too bold */
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
}
/* Regular link hover/focus: force brand color and no underline */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--primary) !important;
    text-decoration: none;
    background: transparent;
}
html[data-theme="dark"] .navbar .nav-link { color: var(--text-dark); }

/* Contact link behaves like other links (no button styling) */
.navbar .nav-link.cta-link {
    color: #1f2937;
    font-weight: 500;
}
html[data-theme="dark"] .navbar .nav-link.cta-link { color: var(--text-dark); }


/* Theme toggle button styles */
.theme-toggle {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.05);
    color: var(--dark);
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
    margin-left: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle:hover { border-color: rgba(0,0,0,0.12); color: var(--primary-dark); }
html[data-theme="dark"] .theme-toggle { border-color: rgba(255,255,255,0.08); color: var(--text-dark); }
html[data-theme="dark"] .theme-toggle:hover { border-color: rgba(255,255,255,0.18); }

/* Dark background sections */
html[data-theme="dark"] body { background: var(--background-light); color: var(--text-dark); }
html[data-theme="dark"] .custom-gradient-background { background: linear-gradient(135deg, #172026 0%, #0f1418 100%); }
html[data-theme="dark"] .bg-dark, html[data-theme="dark"] .cta { background-color: #0f1418 !important; }
html[data-theme="dark"] footer.bg-black { background-color: #0b0f12 !important; }

/* Base Styles */
body {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    color: var(--dark);
    -webkit-font-smoothing: antialiased;
    padding-top: var(--navbar-height-mobile);
}

/* Navbar */
.navbar {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 15px rgba(48, 179, 174, 0.08);
    width: 100%;
    z-index: 1000;
    margin-bottom: 0;
}
html[data-theme="dark"] .navbar {
    background: rgba(12, 16, 20, 0.85);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.45);
}

/* Visible hamburger icon for the mobile navbar toggler */
.navbar-toggler {
    border: none;
}

.navbar .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
    transition: all 0.3s ease;
}

.navbar .btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-1px);
}

/* Hero Section */
.hero {
    background: linear-gradient(160deg, var(--light) 0%, white 100%);
    position: relative;
    overflow: hidden;
    padding: 6rem 0;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(135deg, 
        rgba(48, 179, 174, 0.08) 0%,
        rgba(79, 209, 197, 0.04) 100%);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-title {
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Feature Tags */
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--primary);
    color: white;
    border-radius: 100px;
    font-weight: 500;
    font-size: 0.9rem;
}

.feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(48, 179, 174, 0.1);
    color: var(--primary);
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.feature-tag:hover {
    background: rgba(48, 179, 174, 0.15);
    transform: translateY(-1px);
}

/* Store Badges */
.store-badge {
    transition: all 0.3s ease;
    display: inline-block;
}

.store-badge img {
    height: 48px;
    width: auto;
}

.store-badge:hover {
    transform: translateY(-2px);
}

/* Features Section */
.ai-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.feature-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(48, 179, 174, 0.1);
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(48, 179, 174, 0.1);
    border-color: var(--primary);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Hero Image & Cards */
.hero-image {
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(48, 179, 174, 0.15);
    transition: all 0.5s ease;
}

.floating-card {
    position: absolute;
    z-index: 2;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.fc-1 {
    top: 10%;
    right: 75%;
}

.fc-2 {
    bottom: 15%;
    right: -5%;
}

/* AI Chat Card */
.ai-chat-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(48, 179, 174, 0.1);
    max-width: 300px;
}

/* Responsive Design */
@media (max-width: 991.98px) {
    .hero {
        padding: 4rem 0;
        text-align: center;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .tag-chip {
        margin: 0 auto;
    }

    .ai-features {
        justify-content: center;
    }

    .floating-card {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .hero-title {
        font-size: 2rem;
    }

    .store-badge img {
        height: 40px;
    }

    .feature-tag {
        width: 100%;
        justify-content: center;
    }
}


/* Testimonials gradient override */
.custom-gradient-background{
  background: linear-gradient(
    128deg,
    #0E6F75 0%,
    #1BBFBA 22%,
    #0F3A46 72%,
    #031E33 100%
  ) !important;
}
html[data-theme="dark"] .custom-gradient-background{
  background: linear-gradient(
    128deg,
    #0B1216 0%,
    #0E2B3F 55%,
    #031E33 100%
  ) !important;
}
.custom-gradient-background{ position:relative; }
.custom-gradient-background::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.12), transparent 40%);
  pointer-events:none;
}

/* Final light-only lock */
html.force-light { color-scheme: light !important; }
html.force-light, html.force-light body { background:#ffffff !important; color:#1F2937 !important; }

/* Ensure correct logo in light */
html.force-light .navbar-brand .brand-logo--light { display:block !important; }
html.force-light .navbar-brand .brand-logo--dark  { display:none  !important; }


/* ===== Force LIGHT always, ignore OS dark ===== */
:root { color-scheme: light !important; }

html.force-light { color-scheme: light !important; }
html.force-light, html.force-light body {
  background: #ffffff !important;
  color: #1F2937 !important;
}

/* Make hero permanently light */
html.force-light .hero {
  background: linear-gradient(160deg, #F8FFFD 0%, #ffffff 100%) !important;
}

/* If any stylesheet uses prefers-color-scheme:dark, override it here */
@media (prefers-color-scheme: dark) {
  html.force-light { color-scheme: light !important; }
  html.force-light, html.force-light body {
    background: #ffffff !important;
    color: #1F2937 !important;
  }
  html.force-light .hero {
    background: linear-gradient(160deg, #F8FFFD 0%, #ffffff 100%) !important;
  }
}

/* Keep brand variables stable under any dark CSS */
html.force-light, html.force-light :root {
  --light: #F8FFFD !important;
  --background-light: #F8FFFD !important;
  --dark: #1F2937 !important;
  --text-dark: #1F2937 !important;
  --text-light: #6b7280 !important;
  --primary: #30B3AE !important;
  --primary-dark: #278F8B !important;
  --secondary: #4FD1C5 !important;
}

/* Force light navbar always */
html.force-light .navbar {
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 2px 15px rgba(48,179,174,0.08) !important;
}
html.force-light .navbar .nav-link,
html.force-light .navbar .navbar-brand,
html.force-light .navbar .nav-link.cta-link {
  color: #1f2937 !important;
}



/* Force correct logo on LIGHT navbar */
html.force-light .navbar-brand .brand-logo--light { display: none !important; }
html.force-light .navbar-brand .brand-logo--dark  { display: inline-block !important; }

/* Clean any accidental filters/opacity */
html.force-light .navbar-brand .brand-logo--light,
html.force-light .navbar-brand .brand-logo--dark { opacity: 1 !important; filter: none !important; }

/* Teal gradient for testimonials, always */
html.force-light .custom-gradient-background {
  background: linear-gradient(
    128deg,
    #0E6F75 0%,
    #1BBFBA 22%,
    #0F3A46 72%,
    #031E33 100%
  ) !important;
}

/* Soften the dark overlay on top of the gradient */
html.force-light .custom-gradient-background::before {
  background: linear-gradient(90deg, rgba(0,0,0,.06), transparent 40%) !important;
}

/* ensure badges are above */
.hero, .hero-row, .hero-left { position: relative; }
.hero-left { z-index: 3; }
.hero-badges a { pointer-events: auto; }

/* stop the right-side image/overlay from stealing clicks */
.hero-right, .hero-image,
.hero .overlay, .hero::before, .hero::after, .hero .bg {
  pointer-events: none !important;
}

/* === Navbar layout fix === */
.navbar { width:100%; background:#fff; }
.navbar-container{
  max-width:1200px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.navbar-brand img{display:block;height:32px}
@media (min-width:992px){ .navbar-container{padding:16px 24px} }

/* === CTA section cut-off fix === */
.cta, .cta-content{height:auto; min-height:0; overflow:visible}
.cta{padding:48px 0}
.cta .hero-badges{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
@media (max-width:576px){
  .cta .display-1{font-size:2rem}
  .cta .fs-4{font-size:1.125rem}
}


.hero-badges--footer { font-size: 0 !important; line-height: 0 !important; }


footer .hero-badges--footer img {
  height: 64px !important;   /* desktop */
  width: auto !important;
  max-width: none !important;
}
@media (max-width:576px){
  footer .hero-badges--footer img { height: 56px !important; }
}

/* Footer badges = hero badges */
footer .hero-badges--footer { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

footer .hero-badges--footer img{
  width: 44vw !important;      /* same logic as hero */
  max-width: 220px !important;
  min-width: 90px !important;
  height: auto !important;
  display: block;
}

/* Footer badges = hero badges */
.hero-badges--footer{
  display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
}
.hero-badges--footer img{
  width:44vw !important;
  max-width:220px !important;
  min-width:90px !important;
  height:auto !important;
  display:block;
}

/* Bottom badges only (footer or bottom CTA) */
.hero-badges--footer img,
footer .hero-badges img,
.cta .hero-badges--footer img{
  width:44vw !important;      /* match hero logic */
  max-width:220px !important;
  min-width:90px !important;
  height:auto !important;
  display:block;
}

/* layout */
.hero-badges--footer{
  display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
}

/* Bottom badges (footer + bottom CTAs) = hero size */
footer .hero-badges img,
.hero-badges--footer img,
.cta .hero-badges img{
  width:44vw !important;
  max-width:220px !important;
  min-width:90px !important;
  height:auto !important;
  display:block;
}
/* Desktop: show nav */
@media (min-width:992px){
  .navbar-toggler{display:none}
  .navbar-collapse{display:flex !important}
  .navbar-nav{margin-left:auto;display:flex;gap:24px;align-items:center}
}

/* Mobile: collapse behavior without Bootstrap CSS */
@media (max-width:991.98px){
  .navbar-collapse{display:none}
  .navbar-collapse.show{display:block}
}




/* Replace SVG hamburger with pure CSS to avoid ghost line */
.navbar-toggler { border:0; background:none; }
.navbar-toggler-icon {
  background: #30B3AE;           /* middle bar */
  width: 28px; height: 2px;
  border-radius: 2px;
  box-shadow:
    0 -8px 0 0 #30B3AE,          /* top bar */
    0  8px 0 0 #30B3AE;          /* bottom bar */
  background-image: none !important;
  background-repeat: no-repeat;
  background-size: initial;
}

/* Clean 3-line hamburger */
.navbar-toggler{ border:0; background:transparent; padding:.25rem .5rem }
.navbar-toggler:focus{ outline:none; box-shadow:none }

:root{ --hamburger-base:#0B2239; --hamburger-hover:#30B3AE; }

.navbar-toggler-icon{
  position:relative; display:inline-block; width:28px; height:2px;
  background:var(--hamburger-base); border-radius:2px;
  transition:background .15s ease;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
  content:""; position:absolute; left:0; width:28px; height:2px; border-radius:2px;
  background:var(--hamburger-base); transition:background .15s ease;
}
.navbar-toggler-icon::before{ top:-8px }
.navbar-toggler-icon::after { top: 8px }

/* Hover/focus = teal */
.navbar-toggler:hover .navbar-toggler-icon,
.navbar-toggler:focus-visible .navbar-toggler-icon,
.navbar-toggler:hover .navbar-toggler-icon::before,
.navbar-toggler:focus-visible .navbar-toggler-icon::before,
.navbar-toggler:hover .navbar-toggler-icon::after,
.navbar-toggler:focus-visible .navbar-toggler-icon::after{
  background:var(--hamburger-hover);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .navbar-toggler-icon,
  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after{ transition:none }
}

/* Stop horizontal scroll on mobile (badge rules untouched) */
html, body { max-width: 100%; overflow-x: hidden; }

/* Contain absolute decorations */
.hero, .cta, footer { overflow-x: clip; }

/* The culprit: off-screen floaters. Keep them inside. */
.fc-1 { left: -6%; right: auto; }     /* was right:75% */
.fc-2 { right: 0; }                    /* was right:-5% */

/* Guard the navbar from causing overflow on small screens */
.navbar { width: 100%; }
.navbar-collapse { max-width: 100vw; overflow-x: hidden; }

html,body{overflow-x:hidden}
@media (max-width:991px){
  .navbar-nav{width:100%} /* replace any 100vw */
}
.navbar-collapse{max-width:100%}
img,svg{max-width:100%;height:auto;display:block}