/* ─────────────────────────────────────────────────────────────
   TrackFlow — landing page styles
   Tokens → Base → Components → Sections → Reveal/Motion → Responsive
   ───────────────────────────────────────────────────────────── */

:root{
  /* Brand — matched to TrackFlow logo */
  --primary:        #220288;
  --primary-700:    #1A016A;
  --primary-800:    #12014A;
  --primary-50:     #EDE9FE;
  --primary-100:    #D8C9F8;

  --secondary:      #9173D5;
  --secondary-700:  #7A5CBB;
  --secondary-50:   #F2EDFC;

  --accent:         #F5E14F;
  --accent-700:     #D9C42E;

  /* Ink / neutrals */
  --ink:            #0B1F33;
  --ink-2:          #1B2C40;
  --ink-soft:       #4A5A6E;
  --ink-faint:      #8A98AB;
  --ink-mute:       #B5C0CE;

  --bg:             #FAFCFE;
  --bg-2:           #F1F6FB;
  --surface:        #FFFFFF;
  --surface-2:      #F7FAFD;

  --border:         #E5ECF3;
  --border-soft:    #EFF3F8;
  --border-strong:  #D6E0EC;

  /* Status */
  --ok:             #1FA66A;
  --warn:           #E0A400;
  --err:            #D9534F;

  /* Effects */
  --shadow-sm:   0 1px 2px rgba(11,31,51,.04), 0 1px 1px rgba(11,31,51,.03);
  --shadow-md:   0 4px 10px -2px rgba(11,31,51,.06), 0 2px 4px rgba(11,31,51,.04);
  --shadow-lg:   0 20px 40px -16px rgba(11,31,51,.15), 0 8px 20px -10px rgba(34,2,136,.18);
  --shadow-xl:   0 40px 80px -24px rgba(11,31,51,.25), 0 16px 32px -16px rgba(34,2,136,.22);

  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   22px;
  --radius-xl:   28px;

  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-bounce: cubic-bezier(.34,1.6,.5,1);

  --container:   1240px;
}

/* ─── Base ─── */
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }
body{
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: "ss01","cv11";
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img{ max-width:100%; display:block }
a{ color: var(--primary); text-decoration:none }
a:hover{ color: var(--primary-700) }
button{ font: inherit; cursor: pointer }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 32px }

/* ─── Typography ─── */
.h1{
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 0 24px;
  color: var(--ink);
}
.h1__accent{
  background: linear-gradient(95deg, var(--primary) 10%, var(--secondary) 80%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 600;
}
.h2{
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--ink);
}
.h2--light{ color: #fff }
.h2 .muted{ color: var(--ink-faint); font-weight: 500 }

.lede{
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 56ch;
}

.kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-50);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--primary-100);
}
.kicker--teal{ color: var(--secondary-700); background: var(--secondary-50); border-color:#CDEEF2 }
.kicker--on-dark{ background: rgba(255,255,255,.08); color: #B6E9EF; border-color: rgba(255,255,255,.1) }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}
.eyebrow__dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 0 4px rgba(22,179,198,.18);
  animation: pulse 2.2s var(--ease-out) infinite;
}
@keyframes pulse{
  0%, 100% { box-shadow: 0 0 0 4px rgba(22,179,198,.18) }
  50%      { box-shadow: 0 0 0 8px rgba(22,179,198,0) }
}

/* ─── Buttons ─── */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-weight: 500;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: transform .2s var(--ease-out), background .2s, color .2s, box-shadow .2s, border-color .2s;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn--sm{ padding: 8px 14px; font-size: 14px; border-radius: 8px }
.btn--lg{ padding: 15px 24px; font-size: 16px; border-radius: 12px }

.btn--primary{
  background: var(--primary);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -8px rgba(34,2,136,.55);
}
.btn--primary:hover{ background: var(--primary-700); color:#fff; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 14px 30px -8px rgba(34,2,136,.55) }

.btn--ghost{
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
.btn--ghost:hover{ background: var(--surface-2); border-color: var(--border-strong); color: var(--ink) }
.btn--ghost-light{ background: rgba(255,255,255,.06); color:#fff; border-color: rgba(255,255,255,.18) }
.btn--ghost-light:hover{ background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.3) }

.btn--accent{
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 22px -8px rgba(245,225,79,.55);
}
.btn--accent:hover{ background: var(--accent-700); color: var(--ink); transform: translateY(-1px) }

.btn--outline-primary{
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  text-decoration: none;
}
.btn--outline-primary:hover{ background: var(--primary-50); color: var(--primary-700); border-color: var(--primary-700) }

/* ────────────────────────────────────────  NAV  ──────────────────────────────────────── */
.nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s, background .25s, border-color .25s;
}
.nav.is-scrolled{
  background: rgba(255,255,255,.94);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.nav__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
}
.nav__logo svg{ display: block }
.nav__panel{ display: contents; }
.nav__links{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav__links a{
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: color .2s, background .2s;
}
.nav__links a:hover{
  color: var(--ink);
  background: var(--surface-2);
}
.nav__cta{ flex: 0 0 auto }

/* Hamburger (mobile only) */
.nav__burger{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.nav__burger span{
  display: block; height: 2px; width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s var(--ease-out), opacity .2s;
}
.nav.is-open .nav__burger span:nth-child(1){ transform: translateY(7px) rotate(45deg) }
.nav.is-open .nav__burger span:nth-child(2){ opacity: 0 }
.nav.is-open .nav__burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg) }

/* Offset fixed header so the hero isn't hidden underneath */
main#top{ padding-top: 62px }

/* ─── Footer ─── */
.footer{ background: #1E0A2E; color: rgba(255,255,255,.72) }
.footer__inner{
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 64px;
  padding-top: 72px;
  padding-bottom: 56px;
}
.footer__logo{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 600; letter-spacing: -.02em;
  color: #fff; text-decoration: none; margin-bottom: 16px;
}
.footer__tag{ font-size: 15px; line-height: 1.6; max-width: 42ch; margin: 0 0 20px }
.footer__badges{ display: flex; flex-wrap: wrap; gap: 8px }
.footer__badges span{
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .04em;
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 5px 12px;
}
.footer__cols{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px }
.footer__col h4{
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; margin: 0 0 16px; font-weight: 700;
}
.footer__col a{
  display: block; color: rgba(255,255,255,.65); text-decoration: none;
  font-size: 14px; padding: 6px 0; transition: color .2s;
}
.footer__col a:hover{ color: #fff }
.footer__bar{ border-top: 1px solid rgba(255,255,255,.1) }
.footer__bar-inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 22px; padding-bottom: 22px;
  font-size: 13.5px; color: rgba(255,255,255,.55);
}
.footer__legal{ display: flex; gap: 20px }
.footer__legal a{ color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s }
.footer__legal a:hover{ color: #fff }

/* ─── Go to top ─── */
.gotop{
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 8;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 24px -6px rgba(34,2,136,.6);
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), background .2s;
}
.gotop.is-show{ opacity: 1; transform: none }
.gotop:hover{ background: var(--primary-700) }
.gotop[hidden]{ display: none }

/* ────────────────────────────────────────  HERO  ──────────────────────────────────────── */
.hero{
  position: relative;
  padding: 40px 0 60px;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg{ position: absolute; inset: 0; z-index: -1; pointer-events: none }
.hero__bg-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(34,2,136,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(34,2,136,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 40%, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 40%, #000 35%, transparent 75%);
}
.hero__bg-glow{
  position: absolute;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
}
.hero__bg-glow--a{ top:-20%; left:-15%; background: radial-gradient(circle, rgba(34,2,136,.25), transparent 60%) }
.hero__bg-glow--b{ top: 30%; right:-20%; background: radial-gradient(circle, rgba(22,179,198,.22), transparent 60%) }

.hero__inner{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr);
  gap: 60px;
  align-items: center;
}
.hero__copy{ max-width: 620px }

.hero__cta{ display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px }

.hero__trust{ display: flex; flex-direction: column; gap: 14px }
.hero__trust-label{
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.logo-row{ display: flex; align-items: center; flex-wrap: wrap; gap: 28px; opacity: .65 }
.logo-row__item{
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  filter: grayscale(1);
}

/* ────────────────  Hero image element  ──────────────── */
.hero__visual{ position: relative; perspective: 1800px; width: 100% }
.hero__image{
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 720px;
  margin-left: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
/* Placeholder shown when no image is set (WordPress builds) */
.trackflow-imgph{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-faint);
  text-align: center;
  padding: 24px;
}
.trackflow-imgph svg{ opacity: .5 }
.trackflow-imgph span{ font-size: 13px; font-weight: 500; max-width: 80% }
.cta__image.trackflow-imgph{ color: rgba(255,255,255,.7) }
.dash{
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  overflow: hidden;
  transform: rotateY(-6deg) rotateX(4deg) rotate(.5deg);
  transform-origin: center center;
  position: relative;
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  transition: transform .6s var(--ease-out);
}
.hero__visual:hover .dash{ transform: rotateY(-3deg) rotateX(2deg) rotate(0) }

.dash__chrome{
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.dash__dot{ width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong) }
.dash__dot:nth-child(1){ background: #FF5F57 }
.dash__dot:nth-child(2){ background: #FEBC2E }
.dash__dot:nth-child(3){ background: #28C840 }
.dash__url{
  margin-left: 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-faint);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  flex: 1;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dash__body{ display: grid; grid-template-columns: 158px 1fr; min-height: 420px }

.dash__side{
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  padding: 14px 12px;
  display: flex; flex-direction: column;
  gap: 14px;
  font-size: 12.5px;
}
.dash__side-logo{
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--ink);
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--border);
}
.dash__nav{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px }
.dash__nav li{
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-weight: 450;
}
.dash__nav li.is-active{
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.ic{ width: 14px; height: 14px; border-radius: 4px; background: var(--ink-mute); display: inline-block; flex: 0 0 14px }
.ic--board{ background: linear-gradient(135deg, var(--primary), var(--secondary)) }
.ic--roadmap{ background: linear-gradient(135deg, var(--secondary), var(--accent)) }
.ic--pipe{ background: linear-gradient(135deg, var(--primary-700), var(--primary)) }
.ic--report{ background: linear-gradient(135deg, var(--accent), var(--secondary)) }
.ic--people{ background: linear-gradient(135deg, var(--ink-soft), var(--ink)) }

.dash__side-foot{ margin-top: auto }
.dash__sprint{ background: var(--surface); border: 1px solid var(--border); padding: 10px 12px; border-radius: 10px }
.dash__sprint small{ display: block; color: var(--ink-faint); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px }
.dash__sprint strong{ font-size: 13px; color: var(--ink); display: block; margin-bottom: 8px }
.bar{ height: 4px; background: var(--border); border-radius: 99px; overflow: hidden }
.bar span{ display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 99px }

.dash__main{ padding: 16px; display: flex; flex-direction: column; gap: 14px }
.dash__topbar{ display: flex; align-items: center; justify-content: space-between }
.dash__crumbs{ font-size: 12.5px; color: var(--ink-faint) }
.dash__crumbs b{ color: var(--ink); font-weight: 500 }
.dash__crumbs span{ margin: 0 6px; color: var(--ink-mute) }
.dash__chips{ display: flex; gap: 6px }

.chip{
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.chip--solid{ background: var(--primary); color: #fff; border-color: var(--primary) }
.chip--ok{ background: #E8F6EE; color: var(--ok); border-color: #C9EAD6 }
.chip.mono{ font-family: 'Geist Mono', monospace; font-size: 11px }

/* Sprint board cards */
.board{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; flex: 1 }
.col{
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 0;
}
.col header{
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 500;
  padding: 2px 4px 6px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 2px;
}
.col header em{ font-style: normal; color: var(--ink-faint); background: var(--surface); padding: 0 6px; border-radius: 99px; border: 1px solid var(--border); font-size: 10.5px }
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 9px;
  box-shadow: var(--shadow-sm);
  font-size: 11.5px;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.card--lift{
  box-shadow: 0 14px 28px -10px rgba(34,2,136,.35), 0 6px 12px -6px rgba(11,31,51,.12);
  border-color: var(--primary-100);
  transform: translateY(-2px) rotate(-1.2deg);
  animation: cardFloat 4s ease-in-out infinite;
}
@keyframes cardFloat{
  0%, 100% { transform: translateY(-2px) rotate(-1.2deg) }
  50%      { transform: translateY(-6px) rotate(-0.6deg) }
}
.card--ghost{ opacity: .55 }
.card--done{ background: #F1F8F4; border-color: #D9ECDE }
.card p{ margin: 0; color: var(--ink); line-height: 1.35; font-weight: 450 }
.card footer{ display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--ink-faint) }
.card footer small{ margin-left: auto; font-size: 10.5px }

.tag{
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  align-self: flex-start;
}
.tag--blue{ background: var(--primary-50); color: var(--primary-700) }
.tag--teal{ background: var(--secondary-50); color: var(--secondary-700) }
.tag--yellow{ background: #FDF6CC; color: #8C7A0F }
.tag--green{ background: #E8F6EE; color: #1F7F4F }

.dot{ width: 14px; height: 14px; border-radius: 50%; background: var(--ink-mute); border: 1.5px solid var(--surface); margin-left: -4px }
.dot:first-child{ margin-left: 0 }
.dot--a{ background: #4A6FE3 }
.dot--b{ background: #16B3C6 }
.dot--c{ background: #F0A14B }
.dot--d{ background: #B85FE6 }
.dot--risk{ background: #D9534F; border: none; width: 8px; height: 8px; margin: 0 }
.dot--risk.dot--low{ background: var(--warn) }

/* mini pipeline at bottom of dashboard */
.dash__pipe{
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
}
.pipe-step{
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.pipe-step--ok{ background: #E8F6EE; border-color: #C9EAD6; color: var(--ok) }
.pipe-step--run{ background: var(--primary-50); border-color: var(--primary-100); color: var(--primary); position: relative }
.pipe-step--run::after{
  content:""; position: absolute; right: -2px; top: -2px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--secondary);
  box-shadow: 0 0 0 3px rgba(22,179,198,.25);
  animation: pulse 1.5s var(--ease-out) infinite;
}
.pipe-bar{ flex: 1; height: 2px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 99px; position: relative; overflow: hidden }
.pipe-bar i{
  position: absolute; top: -1px; left: -8px; width: 8px; height: 4px;
  background: var(--accent); border-radius: 99px;
  animation: flow 2.4s linear infinite;
}
@keyframes flow{ to { left: calc(100% + 8px) } }
.pipe-bar--idle{ background: var(--border) }
.pipe-bar--idle i{ display: none }

/* metric tiles floating around dashboard */
.metric-tile{
  position: absolute;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--shadow-lg);
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 160px;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 2;
}
.metric-tile small{
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.metric-tile strong{
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.metric-tile strong i{ color: var(--ok); font-style: normal; font-size: 14px }
.metric-tile strong i.down{ color: var(--ok) } /* lower = better */
.metric-tile__sub{ font-size: 11px; color: var(--ink-faint) }
.metric-tile--a{ top: 8%; left: -3%; animation: floatA 6s ease-in-out infinite }
.metric-tile--b{ bottom: 14%; left: -6%; animation: floatB 7s ease-in-out infinite }
.metric-tile--c{ top: 38%; right: -4%; animation: floatA 8s ease-in-out infinite reverse }
@keyframes floatA{ 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-8px)} }
@keyframes floatB{ 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(6px)} }

.spark{ width: 100%; height: 24px; margin-top: 4px }
.spark--lg{ height: 50px; margin-top: 8px }

/* ────────────────────────────────────  SECTIONS  ──────────────────────────────────── */
.section{ padding: 60px 0; position: relative }
.section__head{ max-width: 760px; margin-bottom: 32px }
.section__head--center{ margin-inline: auto; text-align: center }
.section__head .kicker{ margin-bottom: 18px }
.section__sub{
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--ink-soft);
  margin: 8px 0 0;
  line-height: 1.55;
}
.section__sub--light{ color: rgba(255,255,255,.72) }

/* ─── Problem ─── */
.problem{ background: var(--surface) }
.pain-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px }
.pain{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.pain:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong) }
.pain__ic{
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-50);
  color: var(--primary);
  margin-bottom: 20px;
}
.pain h3{ font-size: 18px; font-weight: 600; margin: 0 0 8px; letter-spacing: -.015em }
.pain p{ margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55 }

/* ─── Solution ─── */
.solution{
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(22,179,198,.06), transparent 60%),
    var(--bg);
}
.solution__viz{
  position: relative;
  margin-top: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
}

/* New three-stage flow presentation (Capture → Core → Deliver) */
.flow2{
  display: grid;
  grid-template-columns: 1fr auto 1.05fr auto 1fr;
  align-items: center;
  gap: 0;
}
.flow2__col{ display: flex; flex-direction: column; gap: 12px; }
.flow2__label{
  font-family: var(--mono, 'Geist Mono', monospace);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 2px;
}
.flow2__col--out{ text-align: left }
.flow2__chip{
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s;
}
.flow2__chip:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.flow2__chip strong{ display: block; font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.flow2__chip small{ display: block; font-size: 12px; color: var(--ink-faint); }
.flow2__ic{
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.flow2__ic--blue{ background: var(--primary-50); color: var(--primary); }
.flow2__ic--teal{ background: var(--secondary-50); color: var(--secondary-700); }

/* Connector rails with a travelling pulse */
.flow2__rail{
  position: relative;
  height: 3px;
  width: 100%;
  min-width: 48px;
  margin: 0 14px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(34,2,136,.25), rgba(22,179,198,.55));
  overflow: hidden;
}
.flow2__rail--out{ background: linear-gradient(90deg, rgba(22,179,198,.55), rgba(34,2,136,.25)); }
.flow2__pulse{
  position: absolute; top: -2.5px; left: -16px;
  width: 16px; height: 8px; border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 10px 1px rgba(245,225,79,.6);
  animation: flow2move 2.6s linear infinite;
}
.flow2__pulse--alt{ background: var(--secondary); box-shadow: 0 0 10px 1px rgba(22,179,198,.6); animation-delay: 1.1s; }
@keyframes flow2move{ from{ left: -16px } to{ left: calc(100% + 16px) } }
@keyframes flow2moveV{ from{ top: -16px } to{ top: calc(100% + 16px) } }

/* Central hub */
.flow2__hub{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px;
  padding: 24px 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff, #f4f9fe);
  border: 1px solid var(--primary-100);
  box-shadow: 0 20px 44px -16px rgba(34,2,136,.3), 0 8px 18px -8px rgba(22,179,198,.2);
}
.flow2__hub-mark{ margin-bottom: 6px; display: inline-flex; }
.flow2__hub strong{ font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.flow2__hub small{ font-size: 12.5px; color: var(--ink-faint); }
.flow2__hub-tag{
  margin-top: 8px;
  font-family: var(--mono, 'Geist Mono', monospace);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--secondary-700);
  background: var(--secondary-50); border: 1px solid #CDEEF2;
  padding: 4px 10px; border-radius: 99px;
}

@media (prefers-reduced-motion: reduce){
  .flow2__pulse{ animation: none; }
}

/* ─── Capabilities ─── */
.capabilities{ background: var(--surface) }
.cap-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px }
.cap{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  overflow: hidden;
}
.cap::before{
  content:""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.cap:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-100) }
.cap:hover::before{ transform: scaleX(1) }
.cap__ic{
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.cap__ic--blue{ background: var(--primary-50); color: var(--primary) }
.cap__ic--teal{ background: var(--secondary-50); color: var(--secondary-700) }
.cap h3{ font-size: 19px; font-weight: 600; margin: 0; letter-spacing: -.015em }
.cap > p{ margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55 }
.cap__bul{ list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px }
.cap__bul li{
  font-size: 13.5px;
  color: var(--ink-2);
  padding-left: 20px;
  position: relative;
}
.cap__bul li::before{
  content:""; position: absolute; left: 0; top: 7px;
  width: 12px; height: 6px;
  border-left: 1.5px solid var(--secondary); border-bottom: 1.5px solid var(--secondary);
  transform: rotate(-45deg);
  border-radius: 1px;
}

/* ─── Deep / interactive mocks ─── */
.deep{ background: var(--bg) }
.deep__tabs{
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  margin: 0 auto 36px;
  box-shadow: var(--shadow-sm);
  display: flex;
  width: max-content;
}
.deep .container > .deep__tabs{ margin-left: auto; margin-right: auto }
.tab{
  padding: 10px 18px;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: 999px;
  transition: background .2s, color .2s;
}
.tab.is-active{ background: var(--primary); color: #fff; box-shadow: 0 4px 10px -3px rgba(34,2,136,.45) }
.tab:hover:not(.is-active){ color: var(--ink) }

.deep__stage{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  min-height: 540px;
  position: relative;
}
.tab-panel{ display: none; padding: 28px }
.tab-panel.is-active{ display: block; animation: fadeIn .35s var(--ease-out) }
@keyframes fadeIn{ from{ opacity: 0; transform: translateY(8px) } to{ opacity: 1; transform: none } }

.deep__mock{ display: flex; flex-direction: column; gap: 18px }

/* Board mock */
.board-mock__head, .pipe-mock__head, .report-mock__head{
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.board-mock__head strong, .pipe-mock__head strong, .report-mock__head strong{ font-size: 16px; font-weight: 600 }
.chips{ display: flex; gap: 6px }

.board-mock__cols{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px }
.board-mock__cols .col{ padding: 12px; gap: 10px; min-height: 380px }
.board-mock__cols .card{ padding: 11px 12px; font-size: 13px }
.board-mock__cols .card p{ font-size: 13px }
.board-mock__cols .col header{ font-size: 12.5px }
.card--moving{ animation: shimmer 3.4s ease-in-out infinite }
@keyframes shimmer{
  0%,100% { box-shadow: var(--shadow-sm); border-color: var(--border) }
  50%     { box-shadow: 0 12px 28px -10px rgba(22,179,198,.45); border-color: var(--secondary) }
}

/* Pipe mock */
.pipeline{ position: relative; padding: 8px 0 }
.pipeline__svg{ width: 100%; height: auto; display: block }
.pipeline__stations{
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-top: -34px;
  position: relative; z-index: 1;
}
.station{
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 12.5px;
  position: relative;
}
.station span{ font-weight: 600; color: var(--ink) }
.station small{ color: var(--ink-faint); font-size: 11.5px }
.station--done span{ color: var(--ok) }
.station--run span{ color: var(--primary) }
.station--idle span{ color: var(--ink-faint) }

.pipe-mock__cards{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 12px;
}
.kpi{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.kpi small{
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint);
}
.kpi strong{
  font-size: 28px; font-weight: 600; letter-spacing: -.02em;
  display: inline-flex; align-items: baseline; gap: 3px;
}
.kpi strong i{ font-style: normal; font-size: 14px; color: var(--ink-faint); font-weight: 400 }
.trend{ font-size: 12px; color: var(--ink-soft) }
.trend.up{ color: var(--ok) }

/* Report mock */
.report-mock__grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: 16px;
}
.bigkpi, .bars, .donut, .risks{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.bigkpi small, .bars small, .donut small, .risks small{
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint);
}
.bigkpi strong{
  font-size: 48px; font-weight: 600; letter-spacing: -.03em; line-height: 1;
  display: inline-flex; align-items: baseline; gap: 2px;
  color: var(--ink);
}
.bigkpi strong i{ font-style: normal; font-size: 22px; color: var(--ink-soft); font-weight: 500 }
.bars ul{ list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px }
.bars li{ display: grid; grid-template-columns: 60px 1fr 28px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2) }
.bars li i{
  height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  width: var(--w, 50%);
  transition: width 1.2s var(--ease-out);
}
.bars li b{ font-weight: 500; color: var(--ink-faint); font-size: 12px; text-align: right }
.donut{ align-items: center }
.donut svg{ width: 130px; height: 130px }
.donut .legend{ list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); width: 100% }
.donut .legend li{ display: flex; align-items: center; gap: 8px }
.donut .legend i{ width: 10px; height: 10px; border-radius: 3px }
.risks ul{ list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px }
.risks li{ display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid var(--border-soft) }
.risks li:last-child{ border-bottom: 0 }
.risks li em{ font-style: normal; color: var(--err); font-weight: 500 }
.risks li .dot--low + em{ color: var(--warn) }

/* ─── AI section ─── */
.ai{ background: var(--bg) }
.ai .section__head{ margin-bottom: 64px }

.ai-spot{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 56px;
  align-items: center;
  margin-bottom: 72px;
}
.ai-spot--rev .ai-spot__media{ order: 2 }
.ai-spot__copy{ max-width: 520px }
.ai-badge{
  display: inline-flex; align-items: center;
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--secondary-700);
  background: var(--secondary-50);
  border: 1px solid #CDEEF2;
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 18px;
}
.ai-spot__title{
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.1; letter-spacing: -.025em; font-weight: 600;
  margin: 0 0 14px; color: var(--ink);
}
.ai-spot__lede{ font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 22px }
.ai-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px }
.ai-list li{ position: relative; padding-left: 30px; font-size: 15px; color: var(--ink-2); line-height: 1.5 }
.ai-list li::before{
  content: ""; position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
}
.ai-list li::after{
  content: ""; position: absolute; left: 6px; top: 8px;
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--primary); border-bottom: 1.5px solid var(--primary);
  transform: rotate(-45deg);
}
.ai-list li em{ font-style: italic; color: var(--ink) }

/* screenshot framing */
.ai-shot{
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}
.ai-shot--wide{ border-radius: var(--radius-lg) }
.ai-shot-stack{ position: relative; padding-bottom: 46px; padding-right: 40px }
.ai-shot--main{ max-width: 420px; margin-left: auto; }
.ai-shot--float{
  position: absolute; left: 0; bottom: 0;
  width: 66%; max-width: 320px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  background: var(--surface);
}

/* feature grid */
.ai-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.ai-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.ai-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary-100) }
.ai-card__ic{
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.ai-card__ic--blue{ background: var(--primary-50); color: var(--primary) }
.ai-card__ic--teal{ background: var(--secondary-50); color: var(--secondary-700) }
.ai-card h3{ font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -.015em }
.ai-card p{ margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55 }
.ai-card--cta{
  background: linear-gradient(160deg, #12014A, #220288 165%);
  border-color: transparent;
  justify-content: center; gap: 14px;
}
.ai-card--cta h3{ color: #fff; font-size: 19px }
.ai-card--cta p{ color: rgba(255,255,255,.75) }
.ai-card--cta .btn{ align-self: flex-start; margin-top: 4px }
.ai-card--cta:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg) }

/* ─── Why TrackFlow ─── */
.why{
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(22,179,198,.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(245,225,79,.07), transparent 60%),
    linear-gradient(180deg, #1E0A2E 0%, #12014A 100%);
  color: #fff;
}
.compare{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
}
.compare__col{
  border-radius: var(--radius-lg);
  padding: 32px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.compare__col--new{
  background: linear-gradient(135deg, rgba(34,2,136,.35), rgba(22,179,198,.18));
  border-color: rgba(22,179,198,.35);
  position: relative;
}
.compare__col--new::after{
  content:""; position: absolute; inset:0; border-radius: var(--radius-lg);
  border: 1px solid rgba(245,225,79,.3); pointer-events: none;
  box-shadow: 0 20px 60px -20px rgba(22,179,198,.45);
}
.compare__col header{ margin-bottom: 20px }
.compare__label{
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  padding: 4px 10px; border-radius: 99px;
  display: inline-block;
}
.compare__label--on{ color: var(--ink); background: var(--accent); border-color: var(--accent) }
.compare__col h3{ font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin: 12px 0 0; color: #fff }
.compare__col ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px }
.compare__col li{
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center;
  font-size: 15px;
  color: rgba(255,255,255,.85);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.compare__col li:last-child{ border-bottom: 0 }
.compare__col .x{ color: rgba(255,255,255,.4); font-weight: 600; text-align: center }
.compare__col .v{
  color: var(--accent); font-weight: 600; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: rgba(245,225,79,.12); border-radius: 50%;
}

.why__stats{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.stat{ display: flex; flex-direction: column; gap: 6px }
.stat strong{
  font-size: 34px;
  font-weight: 600; letter-spacing: -.03em; line-height: 1.05;
  display: inline-flex; align-items: baseline;
  white-space: nowrap;
  background: linear-gradient(135deg, #fff, #B6E9EF 60%, var(--secondary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span{ font-size: 14px; color: rgba(255,255,255,.6) }

/* ─── Industries ─── */
.industries{ background: var(--surface) }
.ind-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.ind{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--ink);
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
  position: relative;
  overflow: hidden;
}
.ind::after{
  content:""; position: absolute; top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle at top right, rgba(22,179,198,.12), transparent 70%);
  pointer-events: none; opacity: 0;
  transition: opacity .3s;
}
.ind:hover{ transform: translateY(-4px); border-color: var(--primary-100); box-shadow: var(--shadow-md); color: var(--ink) }
.ind:hover::after{ opacity: 1 }
.ind__ic{
  font-size: 22px; line-height: 1;
  width: 44px; height: 44px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.ind h3{ font-size: 18px; font-weight: 600; margin: 0; letter-spacing: -.015em }
.ind p{ margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5 }
.ind__link{ color: var(--primary); font-size: 13.5px; font-weight: 500; margin-top: 4px }

.teams{
  margin-top: 56px;
  padding: 28px 32px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  justify-content: space-between;
}
.teams__label{
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft);
}
.teams__chips{ display: flex; flex-wrap: wrap; gap: 8px }
.teams__chips span{
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 450;
}

/* ─── Quote ─── */
.quote-section{ background: var(--bg); padding: 60px 0 80px }
.quote-section__inner{ max-width: 880px; text-align: center; margin: 0 auto }
.quote-mark{ margin: 0 auto 16px }
.quote{
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 28px;
}
.quote__by{ display: inline-flex; align-items: center; gap: 14px; text-align: left }
.quote__avatar{
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.quote__by strong{ display: block; font-size: 15px; font-weight: 600 }
.quote__by span{ font-size: 13.5px; color: var(--ink-faint) }

/* ─── CTA ─── */
.cta{
  background:
    radial-gradient(ellipse 50% 50% at 80% 30%, rgba(22,179,198,.35), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(34,2,136,.35), transparent 60%),
    linear-gradient(135deg, #1E0A2E, #220288 140%);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.cta--animated{
  min-height: 620px;
  display: flex;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 80px;
}
.cta__inner{
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
  width: 100%;
}
.cta__copy .kicker{ margin-bottom: 18px }
.cta__buttons{ display: flex; gap: 12px; margin: 28px 0 24px; flex-wrap: wrap }
.cta__bul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px }
.cta__bul li{ font-size: 14px; color: rgba(255,255,255,.75) }

.cta__visual{
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 560px;
  margin-left: auto;
  width: 100%;
}
.cta__image{
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
}

/* Book-demo infographic */
.demo-card{
  position: absolute;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.35), 0 8px 20px -8px rgba(11,31,51,.25);
  color: var(--ink);
  width: 250px;
}
.demo-card--cal{
  top: 12px; left: 0;
  transform: rotate(-3deg);
  animation: floatA 7s ease-in-out infinite;
  z-index: 2;
}
.demo-card--slots{
  bottom: 12px; right: 0;
  transform: rotate(2.5deg);
  width: 224px;
  animation: floatB 6s ease-in-out infinite;
  z-index: 2;
}
.demo-card__head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.demo-card__title{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  letter-spacing: -.01em;
}
.demo-card__ic{
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-50);
  color: var(--primary);
  border-radius: 6px;
}
.demo-card__nav{
  display: inline-flex; gap: 2px;
}
.demo-card__nav span{
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-soft);
  font-size: 14px; line-height: 1;
}
.demo-card__tz{
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-faint);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 99px;
}

.demo-cal__dow{
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-faint);
  text-align: center;
  margin-bottom: 4px;
}
.demo-cal__grid{
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: 11.5px;
  font-weight: 500;
}
.demo-cal__grid span{
  aspect-ratio: 1;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  border-radius: 6px;
}
.demo-cal__grid .out{ color: var(--ink-mute) }
.demo-cal__grid .is-today{
  color: var(--primary);
  font-weight: 600;
  position: relative;
}
.demo-cal__grid .is-today::after{
  content:""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--primary);
}
.demo-cal__grid .is-selected{
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 10px -3px rgba(34,2,136,.55);
}

.demo-slots{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.demo-slots li{
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.demo-slots li.is-selected{
  background: var(--secondary-50);
  border-color: var(--secondary);
  color: var(--secondary-700);
  box-shadow: 0 4px 10px -3px rgba(22,179,198,.35);
}
.demo-slots__check{
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--secondary); color: #fff;
  border-radius: 50%; font-size: 10px;
}

.demo-confirm{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: flex; align-items: center; gap: 10px;
}
.demo-confirm__avatars{ display: inline-flex }
.av{
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 9.5px; font-weight: 600;
  border: 2px solid #fff;
  margin-left: -6px;
}
.av:first-child{ margin-left: 0 }
.av--1{ background: linear-gradient(135deg, #4A6FE3, #220288) }
.av--2{ background: linear-gradient(135deg, #16B3C6, #0E8C9C) }
.av--3{ background: var(--ink-soft); font-size: 8.5px }
.demo-confirm__txt{
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.3;
}

.demo-orb{
  position: absolute;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  padding: 10px 14px;
  color: #fff;
  display: inline-flex; flex-direction: column;
  font-size: 12px;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.4);
  z-index: 1;
}
.demo-orb--a{
  /* Empty bottom-left zone (calendar is top-left, slots is bottom-right) */
  bottom: 8px; left: 8px;
  transform: rotate(-2deg);
  animation: floatA 9s ease-in-out infinite reverse;
}
.demo-orb--a small{
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.demo-orb--a strong{
  font-size: 18px; font-weight: 600;
  background: linear-gradient(135deg, #fff, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.demo-orb--b{
  /* Empty top-right zone */
  top: 16px; right: 0;
  flex-direction: row; align-items: center; gap: 8px;
  font-size: 11.5px;
  transform: rotate(3deg);
  animation: floatB 8s ease-in-out infinite;
  white-space: nowrap;
}
.demo-orb__live{
  width: 7px; height: 7px; border-radius: 50%;
  background: #4AE391;
  box-shadow: 0 0 0 3px rgba(74,227,145,.22);
  animation: pulse 2s var(--ease-out) infinite;
}

/* ─── Footer ─── */
.footer{ background: var(--surface); padding: 80px 0 32px; border-top: 1px solid var(--border) }
.footer__inner{
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: 60px;
}
.footer__tag{ color: var(--ink-soft); font-size: 14px; margin: 16px 0 20px; max-width: 280px }
.footer__badges{ display: flex; flex-wrap: wrap; gap: 8px }
.footer__badges span{
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-soft);
}
.footer__cols{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px }
.footer__cols h4{ font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; color: #fff }
.footer__cols a{ display: block; color: rgba(255,255,255,.65); text-decoration: none; font-size: 14px; padding: 5px 0; transition: color .2s }
.footer__cols a:hover{ color: #fff }

.footer__rule{ height: 1px; background: var(--border); margin: 48px 0 20px }
.footer__legal{
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--ink-faint);
}

/* ─── Reveal motion ───
   Content is VISIBLE BY DEFAULT. The hidden-then-animate state is only applied
   when JS adds `.js-anim` to <html> — which it does ONLY on the real frontend,
   never inside the Elementor editor. This guarantees:
   • Elementor editor always shows section content (no blank widgets while editing)
   • If JS fails to load, content still shows
   • Frontend still gets the scroll-reveal animation                                */
.reveal{ opacity: 1; transform: none; }
.js-anim .reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: transform, opacity;
}
.js-anim .reveal.is-in{ opacity: 1; transform: none }
.reveal--delay{ transition-delay: .15s }
@media (prefers-reduced-motion: reduce){
  .js-anim .reveal{ opacity: 1; transform: none; transition: none }
  .card--lift, .card--moving, .cta__ring--a, .cta__ring--b, .cta__pulse, .metric-tile--a, .metric-tile--b, .metric-tile--c, .eyebrow__dot{ animation: none }
}

/* ───────── Elementor compatibility ─────────
   Each TrackFlow widget renders its own full-bleed <section> with an inner
   `.container` that handles max-width + centering. Neutralise Elementor's
   column/widget padding so our sections span full width and stay aligned,
   and force editor visibility as a belt-and-braces safety net.                 */
[class*="elementor-widget-trackflow-"] > .elementor-widget-container{
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-widget[class*="elementor-widget-trackflow-"]{
  width: 100% !important;
  max-width: 100% !important;
}
/* The columns/containers wrapping our widgets shouldn't add their own padding/gaps. */
.elementor-element:has(> .elementor-widget-container [class*="trackflow"]) ,
.elementor-column:has([class*="elementor-widget-trackflow-"]) > .elementor-widget-wrap,
.elementor-column:has([class*="elementor-widget-trackflow-"]){
  padding: 0 !important;
}
/* Editor: never leave a reveal element hidden while editing. */
body.elementor-editor-active .reveal,
.elementor-editor-active .reveal{
  opacity: 1 !important;
  transform: none !important;
}


/* ─── Responsive ─── */
@media (max-width: 1100px){
  .hero__inner{ grid-template-columns: 1fr; gap: 40px }
  .hero__visual{ max-width: 720px; margin: 0 auto }
  .dash{ margin: 0 auto; transform: none }
  .pain-grid{ grid-template-columns: repeat(2, 1fr) }
  .cap-grid{ grid-template-columns: repeat(2, 1fr) }
  .ind-grid{ grid-template-columns: repeat(2, 1fr) }
  .pipe-mock__cards{ grid-template-columns: repeat(2, 1fr) }
  .report-mock__grid{ grid-template-columns: repeat(2, 1fr) }

  .cta__inner{ grid-template-columns: 1fr; gap: 40px }
  .cta__visual{ margin: 0 auto; max-width: 100%; min-height: auto; width: 100% }
  .cta--animated{ min-height: auto; padding-top: 56px; padding-bottom: 56px }

  .ai-spot{ grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px }
  .ai-spot--rev .ai-spot__media{ order: 0 }
  .ai-spot__copy{ max-width: none }
  .ai-shot--main{ margin: 0 auto }
  .ai-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 820px){
  .section{ padding: 40px 0 }
  .container{ padding: 0 22px }

  .nav__inner{ padding: 10px 22px }
  .nav__burger{ display: flex }
  .nav__panel{
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(255,255,255,.98);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 12px 22px 20px;
    display: none;
  }
  .nav.is-open .nav__panel{ display: block }
  .nav__links{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .nav__links a{ padding: 12px 12px; font-size: 15.5px; border-radius: 10px }
  .nav__cta{ display: flex; margin-top: 12px; width: 100%; justify-content: center; padding: 13px }
  main#top{ padding-top: 58px }

  .hero{ padding: 30px 0 40px }
  .dash{ max-width: 100% }
  .metric-tile{ display: none }
  .metric-tile--a, .metric-tile--c{ display: flex; position: static; margin: 8px auto; min-width: 0; width: 48% }

  .compare{ grid-template-columns: 1fr }
  .why__stats{ grid-template-columns: repeat(2, 1fr) }

  .cta__visual{ height: auto; max-width: 100% }
  .demo-card{ width: 230px }
  .demo-card--slots{ width: 208px }

  .flow2{ grid-template-columns: 1fr; gap: 0; }
  .flow2__rail{
    width: 3px; height: 32px; min-width: 0;
    margin: 4px auto;
    justify-self: center;
    background: linear-gradient(180deg, rgba(34,2,136,.25), rgba(22,179,198,.55));
  }
  .flow2__rail--out{ background: linear-gradient(180deg, rgba(22,179,198,.55), rgba(34,2,136,.25)); }
  .flow2__pulse{
    top: -16px; left: 50%; transform: translateX(-50%);
    width: 8px; height: 16px;
    animation: flow2moveV 2.6s linear infinite;
  }
  .flow2__hub{ width: 100%; }

  .board, .board-mock__cols{ grid-template-columns: repeat(2, 1fr) }
  .pipe-mock__cards{ grid-template-columns: 1fr 1fr }
  .pipeline__stations{ font-size: 11px }
}
@media (max-width: 560px){
  .pain-grid, .cap-grid, .ind-grid{ grid-template-columns: 1fr }
  .ai-grid{ grid-template-columns: 1fr }
  .ai-shot-stack{ padding-bottom: 0; padding-right: 0 }
  .ai-shot--float{ position: static; width: 78%; margin: -18px 0 0 auto; }
  .h1{ font-size: 40px }
  .h2{ font-size: 28px }
  .why__stats{ grid-template-columns: 1fr 1fr }
  .board, .board-mock__cols{ grid-template-columns: 1fr }
  .demo-card{ width: 220px }
  .demo-card--slots{ width: 200px }
  .footer__inner{ grid-template-columns: 1fr; gap: 40px }
  .footer__bar-inner{ flex-direction: column; gap: 10px; text-align: center }
}

/* ─────────────────────────────────────────────────────────────
   Legal Pages — Asana-inspired clean documentation layout
   ───────────────────────────────────────────────────────────── */

.legal-page{
  padding-top: 62px;
  background: var(--bg);
}

/* Hero / title area */
.legal-hero{
  padding: 72px 0 48px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}
.legal-hero__kicker{
  display: block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 16px;
}
.legal-hero__title{
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 20px;
}
.legal-hero__dates{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.legal-hero__dates span{
  display: inline-flex;
  align-items: center;
}
.legal-hero__dates span + span::before{
  content: "·";
  margin-right: 20px;
  color: var(--ink-mute);
}
.legal-hero__pdf{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
}

/* Two-column body */
.legal-body{
  padding: 56px 0 80px;
}
.legal-body__grid{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

/* Sidebar */
.legal-body__sidebar{
  position: sticky;
  top: 86px;
}
.legal-sidebar{
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.legal-sidebar__group{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-sidebar__label{
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.legal-sidebar__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.legal-sidebar__link{
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 450;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.legal-sidebar__link:hover{
  color: var(--ink);
  background: var(--surface-2);
}
.legal-sidebar__link.is-active{
  color: var(--primary);
  font-weight: 600;
  background: var(--primary-50);
}

/* Content area — clean documentation style */
.legal-body__content{
  max-width: 760px;
  min-width: 0;
}
.legal-body__content > p{
  color: #374151;
  line-height: 1.75;
  margin: 0 0 20px;
  font-size: 16px;
}
.legal-body__content section{
  margin-bottom: 40px;
}
.legal-body__content h2{
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.legal-body__content h3{
  font-size: 19px;
  font-weight: 600;
  color: #0f172a;
  margin: 24px 0 12px;
}
.legal-body__content p{
  color: #374151;
  line-height: 1.75;
  margin: 0 0 16px;
  font-size: 16px;
}
.legal-body__content ul,
.legal-body__content ol{
  color: #374151;
  line-height: 1.75;
  padding-left: 24px;
  margin: 0 0 20px;
  font-size: 16px;
}
.legal-body__content li{
  margin-bottom: 8px;
}
.legal-body__content a{
  color: var(--primary);
  text-decoration: underline;
}
.legal-body__content a:hover{
  color: var(--primary-700);
}
.legal-body__content a.btn,
.legal-body__content .legal-back a{
  text-decoration: none;
}
.legal-body__content strong{
  color: #0f172a;
  font-weight: 600;
}

/* Related documents box */
/* Support Services by Plan */
.support-table{
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.support-table thead{
  background: var(--primary-50);
}
.support-table th{
  text-align: left;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--primary-100);
}
.support-table td{
  padding: 14px 18px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border-soft);
}
.support-table td:first-child{
  font-weight: 600;
  color: var(--ink);
  width: 35%;
}
.support-table tbody tr:last-child td{
  border-bottom: none;
}
.support-table__row--active td{
  background: var(--primary-50);
}
.support-table__row--active td:first-child{
  color: var(--primary);
}

.legal-related{
  margin-top: 48px;
  padding: 28px;
  background: linear-gradient(180deg, var(--primary-50) 0%, var(--surface) 100%);
  border: 1px solid var(--primary-100);
  border-radius: 16px;
}
.legal-related h3{
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 18px;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.legal-related h3::before{
  content: "";
  width: 4px;
  height: 14px;
  background: var(--primary);
  border-radius: 2px;
}
.legal-related__links{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.legal-related__links a{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
}
.legal-related__links a:hover{
  background: var(--surface);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 2, 136, .08);
}
.legal-related__links a svg{
  width: 32px;
  height: 32px;
  padding: 7px;
  background: var(--primary-50);
  border-radius: 8px;
  color: var(--primary);
  flex-shrink: 0;
  box-sizing: border-box;
}
.legal-related__links a:hover svg{
  background: var(--primary);
  color: #fff;
}
@media (max-width: 640px){
  .legal-related__links{
    grid-template-columns: 1fr;
  }
}

/* Back link */
.legal-back{
  margin-top: 40px;
  text-align: center;
}

/* FAQ specific */
.legal-faq__category{
  margin-bottom: 40px;
}
.legal-faq__category h2{
  font-size: 22px;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-soft);
}
.legal-faq__item{
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.legal-faq__question{
  background: var(--surface-2);
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 15.5px;
  color: #0f172a;
  transition: background .2s;
}
.legal-faq__question:hover{
  background: var(--border-soft);
}
.legal-faq__question::after{
  content: "+";
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  transition: transform .25s var(--ease-out);
}
.legal-faq__item.is-open .legal-faq__question::after{
  transform: rotate(45deg);
}
.legal-faq__answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease-out, padding .3s ease-out;
  padding: 0 20px;
  background: var(--surface);
}
.legal-faq__item.is-open .legal-faq__answer{
  max-height: 600px;
  padding: 18px 20px;
}
.legal-faq__answer p{
  margin: 0 0 10px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.legal-faq__answer ul{
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--ink-soft);
}
.legal-faq__answer li{
  margin-bottom: 6px;
}
.legal-faq__cta{
  margin-top: 40px;
  padding: 28px;
  background: linear-gradient(135deg, var(--primary), var(--primary-700) 140%);
  border-radius: 12px;
  text-align: center;
  color: #fff;
}
.legal-faq__cta h3{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: #fff !important;
}
.legal-faq__cta p{
  margin: 0 0 18px;
  opacity: 0.9;
  color: #fff !important;
}
.legal-faq__cta a{
  display: inline-block;
  background: #fff;
  color: var(--primary);
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: transform .2s, box-shadow .2s;
}
.legal-faq__cta a:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Responsive — legal pages */
@media (max-width: 1024px){
  .legal-body__grid{
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 40px;
  }
}
@media (max-width: 820px){
  .legal-hero{
    padding: 56px 0 36px;
  }
  .legal-body{
    padding: 40px 0 60px;
  }
  .legal-body__grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .legal-body__sidebar{
    position: static;
  }
  .legal-sidebar{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .legal-sidebar__group{
    flex: 1 1 200px;
  }
}
@media (max-width: 560px){
  .legal-hero{
    padding: 44px 0 28px;
  }
  .legal-hero__title{
    font-size: 32px;
  }
  .legal-hero__dates{
    flex-direction: column;
    gap: 6px;
  }
  .legal-hero__dates span + span::before{
    display: none;
  }
  .legal-body__content h2{
    font-size: 20px;
  }
  .legal-sidebar{
    flex-direction: column;
  }
}

/* ─────────────────────────────────────────────────────────────
   Contact Page — clean form layout matching legal design system
   ───────────────────────────────────────────────────────────── */

.contact-page{
  padding-top: 62px;
  background: var(--bg);
}

.contact-hero{
  padding: 72px 0 48px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}
.contact-hero__kicker{
  display: block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 16px;
}
.contact-hero__title{
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 20px;
}
.contact-hero__sub{
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}

.contact-body{
  padding: 56px 0 80px;
}
.contact-body__grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}

/* Left info column */
.contact-info{
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.contact-info__item{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-info__label{
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact-info__value{
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.5;
}
.contact-info__value a{
  color: var(--primary);
  text-decoration: none;
}
.contact-info__value a:hover{
  text-decoration: underline;
}
.contact-info__note{
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 8px;
}

/* Right form column */
.contact-form{
  max-width: 560px;
}

/* Alerts */
.contact-alert{
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 15px;
  font-weight: 500;
}
.contact-alert--success{
  background: #E8F6EE;
  border: 1px solid #C9EAD6;
  color: var(--ok);
}
.contact-alert--error{
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}
.contact-alert--error ul{
  margin: 0;
  padding-left: 20px;
}

/* Form fields */
.contact-field{
  margin-bottom: 22px;
}
.contact-field__label{
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.contact-field__input,
.contact-field__textarea{
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.contact-field__input:focus,
.contact-field__textarea:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.contact-field__textarea{
  resize: vertical;
  min-height: 140px;
}
.contact-field__error{
  color: var(--err);
  font-size: 14px;
  margin-top: 6px;
}

/* Submit button */
.contact-submit{
  width: 100%;
  background: var(--primary);
  color: #fff;
  padding: 14px 32px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .2s;
  box-shadow: 0 8px 20px -8px rgba(34, 2, 136, .55);
}
.contact-submit:hover{
  background: var(--primary-700);
  transform: translateY(-1px);
}

/* Responsive — contact page */
@media (max-width: 1024px){
  .contact-body__grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 820px){
  .contact-hero{
    padding: 56px 0 36px;
  }
  .contact-body{
    padding: 40px 0 60px;
  }
}
@media (max-width: 560px){
  .contact-hero{
    padding: 44px 0 28px;
  }
  .contact-hero__title{
    font-size: 32px;
  }
}

/* ─────────────────────────  Public Footer  ───────────────────────── */
.footer{
  margin-top: 60px;
  background:
    radial-gradient(ellipse 50% 50% at 80% 30%, rgba(34, 2, 136, .08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(22, 179, 198, .05), transparent 60%),
    linear-gradient(135deg, #2D1B4E, #3D2563 140%);
  color: #fff;
  overflow: hidden;
  position: relative;
  padding: 48px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer__inner{
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 48px;
  padding-top: 8px;
  padding-bottom: 32px;
}
.footer__brand{
  min-width: 0;
}
.footer__logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff;
  text-decoration: none;
  margin-bottom: 12px;
}
.footer__tag{
  font-size: 14px;
  line-height: 1.55;
  max-width: 42ch;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, .65);
}
.footer__badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.footer__badge{
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 4px 10px;
  background: transparent;
  white-space: nowrap;
}
.footer__cols{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer__col{
  min-width: 0;
}
.footer__col-title{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
  font-weight: 700;
}
.footer__link{
  display: block;
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
  font-size: 14px;
  padding: 5px 0;
  transition: color .2s;
}
.footer__link:hover{
  color: #fff;
}
.footer__bar{
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer__bar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .5);
  flex-wrap: wrap;
}
.footer__copy{
  line-height: 1.5;
}
.footer__copy-link{
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  transition: color .2s;
}
.footer__copy-link:hover{
  color: #fff;
}

/* ── Footer responsive ── */
@media (max-width: 900px){
  .footer__inner{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer__cols{
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
@media (max-width: 640px){
  .footer{
    padding: 36px 0 20px;
  }
  .footer__inner{
    gap: 28px;
    padding-bottom: 24px;
  }
  .footer__cols{
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .footer__col:last-child{
    grid-column: 1 / -1;
  }
}
@media (max-width: 420px){
  .footer__cols{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .footer__col:last-child{
    grid-column: auto;
  }
  .footer__bar-inner{
    justify-content: center;
    text-align: center;
  }
}

/* ─────────────────────────  Jira Import Section  ───────────────────────── */
.jira-import{
  background:
    radial-gradient(ellipse 50% 50% at 80% 30%, rgba(22,179,198,.35), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(34,2,136,.35), transparent 60%),
    linear-gradient(135deg, #1E0A2E, #220288 140%);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.jira-import .section__head--center .h2,
.jira-import .h2{
  color: #fff;
}
.jira-import .h2 .muted{
  color: rgba(255, 255, 255, .5);
}
.jira-import .section__sub{
  color: rgba(255, 255, 255, .6);
}
.jira-import__visual{
  max-width: 960px;
  margin: 0 auto 36px;
}
.jira-migration-card{
  width: 100%;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
}
.jira-migration-title{
  text-align: center;
  margin-bottom: 28px;
}
.jira-migration-title h3{
  font-size: 24px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -.02em;
  margin: 0;
}
.jira-migration-title h3 .jira-arrow{
  color: rgba(255, 255, 255, .3);
  margin: 0 6px;
}
.jira-migration-title h3 .jira-tf-brand{
  background: linear-gradient(135deg, #a78bfa, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.jira-migration-title p{
  color: #94a3b8;
  font-size: 14px;
  margin-top: 6px;
}

/* Workflow grid */
.jira-workflow{
  display: flex;
  align-items: stretch;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 24px;
}
.jira-stage{
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 16px;
  flex: 1;
  min-width: 0;
}
.jira-stage-header{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 12px;
}
.jira-stage-header svg{
  color: #a78bfa;
}

.jira-board{
  background: rgba(0, 0, 0, .3);
  border-radius: 12px;
  overflow: hidden;
}
.jira-board-header{
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .03);
  color: #94a3b8;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.jira-board-list{
  padding: 10px;
  position: relative;
}

/* Jira items */
.jira-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13px;
  color: #cbd5e1;
  margin-bottom: 4px;
  transition: all .4s ease;
}
.jira-item:hover{
  background: rgba(255, 255, 255, .04);
}
.jira-item.selected{
  background: rgba(139, 92, 246, .12);
  border-color: rgba(139, 92, 246, .4);
  transform: translateX(6px);
}
.jira-item.migrated{
  opacity: 0;
  transform: translateX(-30px);
}

.jira-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.jira-dot--epic{ background: #8b5cf6; }
.jira-dot--story{ background: #06b6d4; }
.jira-dot--task{ background: #10b981; }
.jira-dot--subtask{ background: #f59e0b; }
.jira-dot--bug{ background: #f43f5e; }

.jira-item-key{
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: #64748b;
}
.jira-item-name{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jira-item-check{
  color: #a78bfa;
  opacity: 0;
  transform: scale(.4);
  transition: all .3s;
}
.jira-item.selected .jira-item-check{
  opacity: 1;
  transform: scale(1);
}

/* CSV stage */
.jira-csv-stage{
  text-align: center;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.jira-csv-file{
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 12px;
  text-align: left;
  opacity: 0;
  transform: scale(.7);
  transition: all .5s cubic-bezier(.22, 1, .36, 1);
  margin: auto;
  max-width: 200px;
  flex: 0 0 auto;
}
.jira-csv-file.visible{
  opacity: 1;
  transform: scale(1);
}
.jira-csv-file.pulsing{
  border-color: rgba(167, 139, 250, .6);
  box-shadow: 0 0 20px rgba(139, 92, 246, .3);
}
.jira-csv-icon{
  background: rgba(139, 92, 246, .2);
  border-radius: 8px;
  padding: 6px;
  color: #a78bfa;
}
.jira-csv-name{
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: #e2e8f0;
}
.jira-csv-meta{
  font-size: 10px;
  color: #64748b;
}

/* TrackFlow items */
.jira-tf-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .04);
  background: rgba(255, 255, 255, .02);
  font-size: 13px;
  color: #cbd5e1;
  margin-bottom: 4px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .4s, transform .4s;
}
.jira-tf-item.visible{
  opacity: 1;
  transform: translateX(0);
}
.jira-tf-item[data-type="story"]{ margin-left: 8px; }
.jira-tf-item[data-type="task"]{ margin-left: 12px; }
.jira-tf-item[data-type="subtask"]{ margin-left: 16px; }
.jira-tf-item[data-type="bug"]{ margin-left: 8px; }

/* Connector arrows */
.jira-connector{
  font-size: 22px;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .4s;
  flex-shrink: 0;
  opacity: .4;
}
.jira-connector.active{
  color: #a78bfa;
  opacity: 1;
}

/* Success overlay */
.jira-tf-wrap{
  position: relative;
  min-height: 180px;
}
.jira-success-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 15, .85);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
}
.jira-success-overlay.visible{
  opacity: 1;
}
.jira-success-icon{
  color: #10b981;
  font-size: 36px;
  margin-bottom: 8px;
  opacity: 0;
  transform: scale(.3);
  transition: all .5s;
}
.jira-success-overlay.visible .jira-success-icon{
  opacity: 1;
  transform: scale(1);
}
.jira-success-overlay p{
  color: #10b981;
  font-weight: 600;
  font-size: 14px;
  opacity: 0;
  transition: opacity .5s .3s;
}
.jira-success-overlay.visible p{
  opacity: 1;
}

/* Controls */
.jira-controls{
  text-align: center;
  margin-top: 20px;
}
.jira-start-btn{
  border: none;
  cursor: pointer;
  padding: 8px 20px;
  font-size: 13px;
  border-radius: 10px;
  transition: transform .2s, box-shadow .2s;
}
.jira-start-btn:hover{
  transform: translateY(-1px);
}
.jira-start-btn:disabled{
  opacity: .5;
  cursor: not-allowed;
}
.jira-progress-text{
  color: #94a3b8;
  font-size: 12px;
  margin-top: 10px;
  min-height: 18px;
}

/* CTA */
.jira-import__cta{
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.jira-cta-btn{
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .8);
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s, color .2s;
}
.jira-cta-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

/* ── Jira Import responsive ── */
@media (max-width: 820px){
  .jira-migration-card{
    padding: 24px 20px;
  }
  .jira-workflow{
    flex-direction: column;
    gap: 16px;
  }
  .jira-stage{
    width: 100%;
  }
  .jira-connector{
    transform: rotate(90deg);
    padding: 4px 0;
  }
  .jira-migration-title h3{
    font-size: 20px;
  }
}
@media (max-width: 480px){
  .jira-migration-card{
    padding: 20px 16px;
    border-radius: 18px;
  }
  .jira-migration-title h3{
    font-size: 18px;
  }
  .jira-item, .jira-tf-item{
    font-size: 12px;
  }
}

/* ─────────────────────────  CTA Dashboard Animation  ───────────────────────── */
.tf-dashboard{
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 22px;
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}
.tf-dash-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 10px;
}
.tf-dash-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
}
.tf-logo-mark{
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: #a78bfa;
  box-shadow: 0 0 8px #a78bfa;
}
.tf-notification-badge{
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: scale(0);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.tf-notification-badge.visible{
  opacity: 1;
  transform: scale(1);
}
.tf-progress-wrap{
  margin-bottom: 18px;
}
.tf-progress-track{
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.tf-progress-fill{
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #9173d5, #a78bfa);
  border-radius: 3px;
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.tf-board{
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.tf-column{
  flex: 1;
  min-width: 120px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 14px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.tf-col-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 4px 8px;
}
.tf-col-count{
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 2px 8px;
}
.tf-card-list{
  min-height: 100px;
  position: relative;
}
.tf-card{
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 9px 10px;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0;
  transform: translateY(10px);
  position: relative;
}
.tf-card.enter{
  opacity: 1;
  transform: translateY(0);
}
.tf-card.leave{
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
}
.tf-priority-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.prio-purple{ background: #8b5cf6; }
.prio-cyan{ background: #06b6d4; }
.prio-green{ background: #10b981; }
.prio-amber{ background: #fbbf24; }
.prio-red{ background: #f43f5e; }
.tf-card-text{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-card-id{
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.35);
}
.tf-ai-sparkle{
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  background: rgba(167, 139, 250, 0.6);
  border-radius: 50%;
  filter: blur(4px);
  opacity: 0;
  animation: none;
  transition: opacity 0.4s;
}
.tf-card.ai-active .tf-ai-sparkle{
  opacity: 1;
  animation: tf-pulse 2s ease-in-out infinite;
}
@keyframes tf-pulse{
  0%{ transform: scale(0.8); box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.7); }
  50%{ transform: scale(1.4); box-shadow: 0 0 20px 4px rgba(167, 139, 250, 0.5); }
  100%{ transform: scale(0.8); box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); }
}
.tf-chart-wrap{
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 8px;
  margin-top: 12px;
  opacity: 1;
  transition: opacity 0.5s;
}
.tf-chart-wrap svg{
  width: 100%;
  height: 60px;
  display: block;
}
.tf-chart-line{
  fill: none;
  stroke: #a78bfa;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.tf-chart-wrap.chart-done .tf-chart-line{
  stroke-dashoffset: 0;
}
.tf-chart-labels{
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 4px;
}
@media (max-width: 600px){
  .tf-board{
    flex-direction: column;
  }
  .tf-column{
    min-width: 100%;
  }
  .tf-dashboard{
    padding: 16px;
    max-width: 100%;
  }
  .tf-card-list{
    min-height: 70px;
  }
  .tf-card{
    font-size: 0.7rem;
    padding: 8px 9px;
  }
  .tf-dash-header{
    flex-wrap: wrap;
    gap: 8px;
  }
  .tf-notification-badge{
    font-size: 0.6rem;
    padding: 3px 8px;
  }
  .tf-chart-wrap svg{
    height: 48px;
  }
}
@media (max-width: 380px){
  .tf-dashboard{
    padding: 12px;
  }
  .tf-board{
    gap: 8px;
  }
  .tf-column{
    padding: 8px;
  }
  .tf-card{
    font-size: 0.65rem;
    padding: 7px 8px;
    gap: 6px;
  }
  .tf-priority-dot{
    width: 6px;
    height: 6px;
  }
}

/* ─────────────────────────  Hero Animated Scene  ───────────────────────── */
.hero-scene{
  position: relative;
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  height: 520px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.hero-scene__grid{
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 72%);
  opacity: .35;
}
.hero-scene__orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  box-shadow: inset 10px 10px 22px rgba(255,255,255,.18), 0 15px 35px rgba(0,0,0,.35);
}
.hero-scene__orb--1{ width: 46px; height: 46px; left: 6%; top: 12%; background: linear-gradient(135deg, #6f6cff, #293b9d); }
.hero-scene__orb--2{ width: 30px; height: 30px; right: 5%; top: 23%; background: linear-gradient(135deg, #7c79ff, #2743b9); }
.hero-scene__orb--3{ width: 24px; height: 24px; left: 7%; bottom: 20%; background: linear-gradient(135deg, #53d2b2, #155b6b); }
.hero-scene__orb--4{ width: 28px; height: 28px; right: 7%; bottom: 16%; background: linear-gradient(135deg, #ffc568, #b96520); }

.hero-scene__platform{
  position: absolute;
  width: 90%; height: 200px;
  left: 5%; bottom: 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(52,97,255,.25), rgba(95,62,255,.12) 38%, transparent 68%);
  border-bottom: 2px solid rgba(99,119,255,.7);
  filter: drop-shadow(0 0 24px rgba(95,80,255,.35));
}
.hero-scene__platform:after{
  content: ""; position: absolute; inset: 40px 45px;
  border-radius: 50%;
  border: 2px solid rgba(123,102,255,.45);
  box-shadow: 0 0 30px rgba(89,95,255,.35);
}

.hero-scene__laptop-wrap{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  perspective: 1200px;
}
.hero-scene__laptop{ width: 460px; max-width: 90%; }
.hero-scene__screen{
  height: 280px;
  border: 5px solid #293550;
  border-bottom-width: 6px;
  border-radius: 16px 16px 10px 10px;
  background: #07101f;
  box-shadow: 0 28px 60px rgba(0,0,0,.5), 0 0 40px rgba(74,93,255,.18);
  overflow: hidden;
  position: relative;
}
.hero-scene__camera{ position: absolute; width: 5px; height: 5px; background: #0b1220; border-radius: 50%; top: 6px; left: 50%; z-index: 5; }
.hero-scene__app{ height: 100%; background: linear-gradient(135deg, #0b1530, #071120); }
.hero-scene__app-top{
  height: 38px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center;
  padding: 0 12px; gap: 16px;
}
.hero-scene__app-brand{ font-weight: 800; font-size: 11px; color: #fff; }
.hero-scene__app-brand b{ color: #7987ff; }
.hero-scene__nav{ display: flex; gap: 12px; color: #8190ab; font-size: 8px; }
.hero-scene__nav-active{ color: #fff; }
.hero-scene__top-right{ margin-left: auto; display: flex; gap: 8px; align-items: center; color: #9ba8c1; font-size: 10px; }
.hero-scene__mini-avatar{ width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #f2b58b, #824a3b); font-size: 8px; }
.hero-scene__content{ padding: 10px 11px; }
.hero-scene__project-head{ display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 9px; }
.hero-scene__eyebrow{ font-size: 7px; color: #8390aa; margin-bottom: 2px; }
.hero-scene__project-title{ font-size: 12px; font-weight: 700; color: #fff; }
.hero-scene__on-track{ color: #35c987; font-size: 7px; margin-left: 5px; }
.hero-scene__project-meta{ font-size: 7px; color: #8593ae; margin-top: 3px; }
.hero-scene__stats{ display: flex; gap: 5px; }
.hero-scene__stat{ min-width: 50px; padding: 5px 6px; border: 1px solid rgba(255,255,255,.09); border-radius: 6px; background: rgba(255,255,255,.025); }
.hero-scene__stat b{ display: block; font-size: 10px; color: #fff; }
.hero-scene__stat span{ font-size: 6px; color: #8592ab; }
.hero-scene__board{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.hero-scene__column{ min-height: 180px; border: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.025); border-radius: 7px; padding: 5px; }
.hero-scene__col-head{ display: flex; justify-content: space-between; align-items: center; font-size: 7px; font-weight: 700; margin-bottom: 5px; }
.hero-scene__count{ background: rgba(255,255,255,.07); color: #aeb9ce; border-radius: 4px; padding: 1px 4px; }
.hero-scene__col--todo .hero-scene__col-head{ color: #c8b6ff; }
.hero-scene__col--progress .hero-scene__col-head{ color: #7db2ff; }
.hero-scene__col--review .hero-scene__col-head{ color: #ffc86c; }
.hero-scene__col--done .hero-scene__col-head{ color: #55d89c; }
.hero-scene__task{
  background: linear-gradient(145deg, rgba(28,43,75,.95), rgba(15,27,50,.95));
  border: 1px solid rgba(255,255,255,.055);
  padding: 5px; border-radius: 6px; margin-bottom: 4px;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.hero-scene__task-id{ font-size: 6px; color: #71809c; }
.hero-scene__task-title{ font-size: 7px; font-weight: 600; line-height: 1.4; margin: 2px 0 4px; color: #fff; }
.hero-scene__task-foot{ display: flex; align-items: center; justify-content: space-between; color: #8290aa; font-size: 6px; }
.hero-scene__badge{ font-size: 6px; padding: 2px 4px; border-radius: 3px; background: rgba(91,108,255,.15); color: #9ca7ff; }
.hero-scene__badge--high{ background: rgba(242,103,122,.14); color: #ff9cab; }
.hero-scene__badge--design{ background: rgba(139,92,246,.15); color: #c4a6ff; }
.hero-scene__assignee{ width: 11px; height: 11px; border-radius: 50%; background: linear-gradient(135deg, #f0b08c, #704536); }
.hero-scene__base{
  width: 510px; max-width: 100%; height: 34px;
  margin-left: -25px;
  background: linear-gradient(170deg, #3b4662, #1a243c 30%, #111a2d);
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 18px 28px rgba(0,0,0,.4);
}

.hero-scene__card{
  position: absolute;
  background: linear-gradient(145deg, rgba(29,42,72,.88), rgba(13,23,44,.92));
  border: 1px solid rgba(174,190,255,.17);
  border-radius: 14px;
  padding: 13px;
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
  backdrop-filter: blur(14px);
  z-index: 7;
  width: 180px;
}
.hero-scene__card h3{ font-size: 11px; margin: 0; color: #fff; }
.hero-scene__sub{ font-size: 8px; color: #8491aa; margin-top: 3px; }
.hero-scene__card--sprint{ left: 10px; top: 20px; width: 200px; }
.hero-scene__card--analytics{ right: 10px; top: 10px; width: 210px; }
.hero-scene__card--roadmap{ left: 5px; bottom: 80px; width: 195px; }
.hero-scene__card--collab{ right: 5px; bottom: 100px; width: 200px; }
.hero-scene__card--launch{ right: 30%; bottom: 10px; width: 210px; }
.hero-scene__top{ display: flex; justify-content: space-between; align-items: center; }
.hero-scene__pill{ font-size: 7px; color: #83d8ad; background: rgba(53,201,135,.12); padding: 3px 6px; border-radius: 12px; }
.hero-scene__calendar{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 10px; }
.hero-scene__day{ height: 26px; background: rgba(255,255,255,.045); border-radius: 5px; padding: 3px; font-size: 6px; color: #8b98b0; }
.hero-scene__event{ height: 6px; border-radius: 3px; margin-top: 5px; background: #6676ff; }
.hero-scene__event--g{ background: #36c986; }
.hero-scene__event--a{ background: #f5ad45; }
.hero-scene__metrics{ display: flex; gap: 6px; margin-top: 10px; }
.hero-scene__metric{ flex: 1; background: rgba(255,255,255,.035); border-radius: 7px; padding: 6px; }
.hero-scene__metric b{ font-size: 12px; color: #fff; }
.hero-scene__metric span{ font-size: 6px; color: #8491aa; display: block; margin-top: 2px; }
.hero-scene__bars{ height: 60px; display: flex; align-items: end; gap: 7px; margin-top: 10px; border-bottom: 1px solid rgba(255,255,255,.09); }
.hero-scene__bar{ width: 18px; border-radius: 5px 5px 2px 2px; background: linear-gradient(#8895ff, #4756db); }
.hero-scene__bar:nth-child(1){ height: 38%; }
.hero-scene__bar:nth-child(2){ height: 56%; }
.hero-scene__bar:nth-child(3){ height: 48%; }
.hero-scene__bar:nth-child(4){ height: 78%; }
.hero-scene__bar:nth-child(5){ height: 68%; }
.hero-scene__bar--green{ background: linear-gradient(#5ad4a1, #209b6b); }
.hero-scene__chart-labels{ display: flex; justify-content: space-between; color: #73819c; font-size: 6px; margin-top: 5px; }
.hero-scene__road-item{ display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: center; margin-top: 8px; font-size: 8px; color: #cbd5e1; }
.hero-scene__check{ width: 16px; height: 16px; border-radius: 5px; border: 1px solid #53617c; display: grid; place-items: center; color: #77e3ae; font-size: 8px; }
.hero-scene__check--done{ background: rgba(53,201,135,.13); border-color: #35c987; }
.hero-scene__pct{ font-size: 7px; color: #9ba8bd; }
.hero-scene__mini-progress{ height: 4px; background: rgba(255,255,255,.07); border-radius: 6px; margin-top: 3px; }
.hero-scene__mini-progress i{ display: block; height: 100%; border-radius: inherit; background: #35c987; width: 100%; }
.hero-scene__mini-progress--w i{ width: 85%; background: #7787ff; }
.hero-scene__mini-progress--a i{ width: 40%; background: #f5ad45; }
.hero-scene__people{ display: flex; margin-top: 8px; }
.hero-scene__person{
  width: 28px; height: 28px; border-radius: 50%;
  margin-right: -6px; border: 2px solid #111b33;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #f0b18b, #7d4b44);
}
.hero-scene__person:nth-child(2){ background: linear-gradient(135deg, #a5c7ff, #4658aa); }
.hero-scene__person:nth-child(3){ background: linear-gradient(135deg, #e4a9b8, #713e75); }
.hero-scene__message{ margin-top: 8px; padding: 6px 7px; background: rgba(255,255,255,.045); border-radius: 8px; border: 1px solid rgba(255,255,255,.04); font-size: 7px; line-height: 1.45; color: #cbd5e1; }
.hero-scene__message b{ font-size: 7px; color: #aebaff; }
.hero-scene__typing{ color: #7e8aa3; font-size: 7px; margin-top: 7px; }
.hero-scene__typing i{ display: inline-block; width: 3px; height: 3px; background: #7e8aa3; border-radius: 50%; margin: 0 1px; animation: heroBlink 1.2s infinite; }
.hero-scene__typing i:nth-child(2){ animation-delay: .2s; }
.hero-scene__typing i:nth-child(3){ animation-delay: .4s; }
@keyframes heroBlink{ 50%{ opacity: .2; transform: translateY(-2px); } }
.hero-scene__launch-row{ display: flex; justify-content: space-between; align-items: end; margin-top: 10px; }
.hero-scene__launch-num{ font-size: 22px; font-weight: 800; color: #fff; }
.hero-scene__launch-progress{ height: 9px; background: rgba(255,255,255,.07); border-radius: 14px; overflow: hidden; margin-top: 8px; }
.hero-scene__launch-progress i{ display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #36c986, #73e4ad); transition: width 1.5s ease; }

.hero-scene__rocket{ position: absolute; left: 100px; bottom: 60px; z-index: 8; width: 60px; height: 100px; transform: rotate(32deg); }
.hero-scene__rocket-body{ position: absolute; width: 42px; height: 75px; left: 9px; top: 3px; background: linear-gradient(110deg, #e6e9f7, #9aa7d5 55%, #707db5); border-radius: 50% 50% 42% 42%; box-shadow: 0 14px 22px rgba(0,0,0,.3); }
.hero-scene__rocket-window{ position: absolute; z-index: 2; left: 21px; top: 19px; width: 18px; height: 18px; border-radius: 50%; background: #132c69; border: 3px solid #9ca9d7; }
.hero-scene__fin{ position: absolute; bottom: 16px; width: 22px; height: 30px; background: #6576ff; }
.hero-scene__fin--l{ left: 0; border-radius: 20px 0 5px 14px; }
.hero-scene__fin--r{ right: 0; border-radius: 0 20px 14px 5px; }
.hero-scene__flame{ position: absolute; bottom: -18px; left: 20px; width: 22px; height: 36px; border-radius: 50%; background: radial-gradient(ellipse at top, #fff7a5, #ffbd42 35%, #ff5b35 65%, transparent 72%); filter: blur(1px); animation: heroFlamePulse .45s ease-in-out infinite alternate; transform-origin: top center; }
@keyframes heroFlamePulse{ 0%,100%{ transform: scaleY(.9) scaleX(.92); opacity: .82; } 50%{ transform: scaleY(1.18) scaleX(1.08); opacity: 1; } }

.hero-scene__mug{ position: absolute; left: 68%; bottom: 44px; width: 80px; height: 70px; background: linear-gradient(135deg, #4f59d9, #272f83); border-radius: 13px 13px 24px 24px; z-index: 5; box-shadow: 0 14px 25px rgba(0,0,0,.3); }
.hero-scene__mug:before{ content: ""; position: absolute; right: -25px; top: 16px; width: 32px; height: 36px; border: 10px solid #313a9d; border-left: 0; border-radius: 0 22px 22px 0; }
.hero-scene__coffee{ position: absolute; top: 6px; left: 7px; width: 66px; height: 16px; border-radius: 50%; background: #25160e; border: 4px solid #6671e4; }
.hero-scene__steam{ position: absolute; width: 4px; height: 32px; border-radius: 50%; border-left: 2px solid rgba(255,255,255,.3); top: -34px; left: 28px; animation: heroSteamRise 2.8s ease-out infinite; }
.hero-scene__steam--2{ left: 48px; top: -28px; animation-delay: 1.15s; }
@keyframes heroSteamRise{ 0%{ transform: translateY(8px) scale(.75); opacity: 0; } 25%{ opacity: .42; } 100%{ transform: translateY(-26px) translateX(6px) scale(1.25); opacity: 0; } }

.hero-scene__cube{ position: absolute; width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #6375ff, #303da2); box-shadow: 14px 14px 28px rgba(0,0,0,.25); z-index: 4; }
.hero-scene__cube--1{ left: 30px; bottom: 90px; }
.hero-scene__cube--2{ right: 220px; bottom: 150px; width: 24px; height: 24px; }

@media (max-width: 1050px){
  .hero-scene__card{ transform: scale(.82) !important; }
  .hero-scene__card--sprint{ left: -2px; }
  .hero-scene__card--roadmap{ left: -5px; }
  .hero-scene__card--analytics{ right: -2px; }
  .hero-scene__card--collab{ right: -5px; }
  .hero-scene__card--launch{ right: 25px; }
  .hero-scene__laptop{ transform: scale(.88); }
}
@media (max-width: 760px){
  .hero-scene{ height: 420px; }
  .hero-scene__card--analytics,
  .hero-scene__card--collab,
  .hero-scene__card--roadmap,
  .hero-scene__mug,
  .hero-scene__cube,
  .hero-scene__orb{ display: none; }
  .hero-scene__card--sprint{ left: 5px; top: 5px; }
  .hero-scene__card--launch{ right: 5px; bottom: 5px; }
  .hero-scene__laptop{ transform: scale(.72); }
  .hero-scene__platform{ bottom: -10px; }
}
@media (max-width: 480px){
  .hero-scene{ height: 360px; }
  .hero-scene__laptop{ transform: scale(.6); }
  .hero-scene__card--sprint{ width: 160px; }
  .hero-scene__card--launch{ width: 170px; }
  .hero-scene__rocket{ display: none; }
}


/* ═══════════════════════════════════════════════════════════
   HERO — dark theme + animated scene (fit-engine based)
   ═══════════════════════════════════════════════════════════ */
.hero--dark{
  background: radial-gradient(circle at 50% 42%, #132755 0%, #0a1530 35%, #050b18 74%);
  overflow: hidden;
}
.hero--dark .container.hero__inner{
  max-width: 1440px;
  padding: 0 32px;
}
.hero--dark .hero__inner{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 48px;
}
.hero--dark .hero__bg{ opacity: .4 }
.hero--dark .hero__bg-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: radial-gradient(circle at 50% 42%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, black, transparent 72%);
  opacity: .35;
}
.hero--dark .hero__bg-glow--a{ background: radial-gradient(circle, rgba(52,97,255,.15), transparent 60%) }
.hero--dark .hero__bg-glow--b{ background: radial-gradient(circle, rgba(95,62,255,.12), transparent 60%) }

.h1--light{ color: #f5f7ff }
.h1__accent--light{
  background: linear-gradient(95deg, #5b6cff 10%, #8b5cf6 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
.lede--light{ color: #94a3b8 }
.eyebrow--on-dark{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: #aab7cf;
}
.hero__trial-pill{ margin-top: 16px; text-align: center; }
.hero__trial-pill--mobile{ display: none; }
.hero__trial-pill--desktop{ display: block; text-align: left; }
.hero__trial-pill span{
  background: rgba(91,108,255,.12);
  color: #aebaff;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}
.btn--ghost-light{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.15);
  color: #f5f7ff;
}
.btn--ghost-light:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.25);
}

/* Hero visual — scene container */
.hero--dark .hero__visual{
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1100px){
  .hero--dark .hero__inner{ grid-template-columns: 1fr; gap: 32px }
  .hero--dark .hero__visual{ min-height: unset; max-width: 100%; width: 100%; }
  .hero--dark .hero__copy{ max-width: 100%; text-align: left; }
  .hero--dark .hero__cta{ justify-content: flex-start; margin-bottom: 0; }
  .hero--dark .h1--light{ font-size: clamp(42px, 8vw, 64px); line-height: 1.05; }
  .hero--dark .lede--light{ font-size: clamp(16px, 2.5vw, 19px); }
  .hero--dark .hero__trial-pill--desktop{ display: none; }
  .hero--dark .hero__trial-pill--mobile{ display: block; margin-top: 28px; text-align: center; }
  .hero--dark .hero__trial-pill--mobile span{
    display: inline;
    font-size: 10px;
    padding: 5px 12px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
  }
}
@media (max-width: 768px){
  .hero--dark .hero__inner{ gap: 24px }
  .hero--dark .hero__visual{ min-height: unset; }
  .hero--dark .h1--light{ font-size: 60px; line-height: 1.02; }
  .hero--dark .lede--light{ font-size: 18px; }
  .hero--dark .eyebrow--on-dark{ font-size: 13px; }
  .hero--dark .hero__trial-pill span{ font-size: 13px; }
}
@media (max-width: 600px){
  .hero--dark .hero__inner{ gap: 20px }
  .hero--dark .hero__visual{ min-height: unset; }
  .hero--dark .h1--light{ font-size: 60px; line-height: 1.02; }
  .hero--dark .lede--light{ font-size: 18px; }
  .hero--dark .hero__cta{ flex-wrap: nowrap; gap: 12px; }
  .hero--dark .hero__cta .btn{ flex: 1 1 auto; min-width: 0; }
  .hero--dark .hero__trial-pill span{ font-size: 12px; padding: 5px 12px; }
}
@media (max-width: 460px){
  .hero--dark .hero__inner{ gap: 16px }
  .hero--dark .hero__visual{ min-height: unset; }
  .hero--dark .h1--light{ font-size: 42px; line-height: 1.05; }
  .hero--dark .lede--light{ font-size: 16px; }
  .hero--dark .hero__trial-pill--mobile span{ font-size: 9px; padding: 4px 10px; }
}