/* =============================================================================
   FlowSync — global stylesheet
   -----------------------------------------------------------------------------
   Only global concerns live here: resets, typography defaults, keyframes and the
   shared interactive classes. Component-level styling stays on the elements in
   index.html so a single section can be moved or reused without hunting for
   selectors. Design tokens are listed below for reference.

   Palette      #000000 background · #E2EEFA body text · #4DA2FF primary
                #7FC4FF primary light · #F4F6F8 light section
   Type         Geist (UI) · Geist Mono (labels, data)
   Radius       0 on buttons and panels, 4-6px on chips and cards
   ========================================================================== */

:root {
  --fs-bg: #000000;
  --fs-fg: #e2eefa;
  --fs-primary: #4da2ff;
  --fs-primary-light: #7fc4ff;
  --fs-hairline: rgba(255, 255, 255, 0.08);
  --fs-shell: 1240px;
}

/* --- reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  overflow-x: clip;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fs-bg);
  color: var(--fs-fg);
  font-family: 'Geist', 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--fs-primary-light); text-decoration: none; }
a:hover { color: #fff; }

button { font-family: inherit; }

img, svg { display: block; max-width: 100%; }

::selection { background: var(--fs-primary); color: #fff; }

:focus-visible { outline: 2px solid var(--fs-primary); outline-offset: 3px; }

.fs-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- range input (cost calculator) --------------------------------------- */

input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: rgba(255, 255, 255, 0.14); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  cursor: grab;
}
input[type="range"]::-moz-range-track { height: 2px; background: rgba(255, 255, 255, 0.14); }
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border: none; border-radius: 50%;
  background: #fff;
  cursor: grab;
}

/* --- keyframes ----------------------------------------------------------- */

/* hero: squares expanding from the centre node */
@keyframes fs-ring {
  0%   { transform: translate(-50%, -50%) scale(.08) rotate(0deg); opacity: 0; }
  10%  { opacity: .8; }
  100% { transform: translate(-50%, -50%) scale(4.6) rotate(45deg); opacity: 0; }
}
@keyframes fs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes fs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fs-logos { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* --- interactive classes (motion is applied by app.js) ------------------- */

.fs-btn { overflow: hidden; }
.fs-btn .fs-btn-a { position: relative; z-index: 2; display: block; }
.fs-plan { will-change: transform; }

/* hover states that do not need JS */
.fs-badge:hover { color: rgba(226, 238, 250, 0.95); border-color: rgba(255, 255, 255, 0.22); }
.fs-tab:hover { color: #fff; }
.fs-tool:hover { border-color: rgba(255, 255, 255, 0.3); }
.fs-quote:hover { background: rgba(255, 255, 255, 0.025); }
.fs-plan-cta:hover { opacity: .85; }
.fs-faq-q:hover { color: #fff; }
.fs-social:hover { background: rgba(255, 255, 255, 0.22); }
.fs-join:hover { opacity: .86; }
.fs-docs:hover { color: #fff; }
.fs-mobile-link:hover { color: #fff; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
  #fs-links,
  #fs-navcta,
  #fs-navdocs,
  #fs-navdiv { display: none !important; }
  #fs-burger { display: grid !important; }
}

@media (max-width: 900px) {
  [data-chat-col] { display: none !important; }
}

/* hero, mobile only */
@media (max-width: 600px) {
  #top {
    padding-top: 122px !important;
    padding-bottom: 56px !important;
  }
  #top #hero-title {
    font-size: clamp(32px, 9.2vw, 42px) !important;
    max-width: 17ch !important;
    margin-top: 22px !important;
  }
  #top > p:first-of-type {
    font-size: 15.5px !important;
    max-width: 34ch !important;
  }
  /* CTA row: stacked, full-width taps */
  #top > div[data-reveal="hero"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 28px !important;
  }
  #top > div[data-reveal="hero"] .fs-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
  }
  /* background rings read as squares at phone width */
  #top [data-fs-anim] {
    width: min(58vw, 380px) !important;
  }
  /* mockup: task list only, at full width */
  #fs-mockup {
    margin-top: 44px !important;
  }
  #fs-mockup-card > div:last-child {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  #fs-mockup-card > div:last-child > div:first-child {
    display: none !important;
  }
  #fs-mockup-card > div:last-child > div:nth-child(2) {
    border-right: 0 !important;
  }
}

/* --- accessibility ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-fs-anim],
  [style*="animation"] { animation: none !important; }
  * { transition-duration: .01ms !important; }
}