/* Swift Things Management — Apple-style system: system font, size-specific tracking,
   translucent chrome, soft tiles, critically damped motion. Logo is monochrome and
   drawn with a CSS mask so it follows the text colour in light and dark mode. */

:root {
  --bg: #FBFBFD;
  --surface: #FFFFFF;
  --ink: #1D1D1F;
  --muted: #6E6E73;
  --hairline: rgba(0, 0, 0, 0.1);
  --accent: #0E6E6A;
  --accent-press: #0A5653;
  --accent-text: #0B6460;
  --dark-bg: #000000;
  --dark-surface: #1C1C1E;
  --dark-ink: #F5F5F7;
  --dark-muted: #A1A1A6;
  --dark-accent: #4CC2BC;
  --bar: rgba(251, 251, 253, 0.72);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: max(16px, env(safe-area-inset-left), min(5vw, 48px));
  --max: 1080px;
  --radius-tile: 22px;
  /* Approximates a critically damped spring (damping 1.0, response ~0.4s): fast start, no overshoot. */
  --spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bar-h: 52px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1C1C1E;
    --ink: #F5F5F7;
    --muted: #A1A1A6;
    --hairline: rgba(255, 255, 255, 0.14);
    --accent: #2FA39E;
    --accent-press: #27908B;
    --accent-text: #4CC2BC;
    --dark-bg: #1C1C1E;
    --dark-surface: #2C2C2E;
    --bar: rgba(0, 0, 0, 0.66);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.47;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
section, article { scroll-margin-top: calc(var(--bar-h) + 12px); }
.sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Logo (monochrome, follows text colour) ---------- */
.logo {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.logo-lockup { --logo: url("logo-lockup.svg"); aspect-ratio: 518 / 122; }
.logo-mark { --logo: url("logo-mark.svg"); aspect-ratio: 518 / 122; }

/* ---------- Translucent top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow 0.3s ease;
}
.is-scrolled .topbar, .legal-page .topbar { box-shadow: 0 1px 0 var(--hairline); }
.topbar-inner {
  max-width: var(--max); margin: 0 auto; height: var(--bar-h);
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.brand .logo { height: 34px; }
nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); }
nav a { font-size: 0.8125rem; letter-spacing: 0; text-decoration: none; color: var(--muted); transition: color 0.2s ease; }
nav a:hover { color: var(--ink); }

/* ---------- Buttons ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border-radius: 980px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em;
  transition: background-color 0.2s ease, transform 0.35s var(--spring);
  -webkit-tap-highlight-color: transparent;
}
nav a.pill { color: #fff; }
.pill:hover { background: var(--accent-press); }
.pill:active { transform: scale(0.97); transition: transform 0.1s ease-out; }
.pill-small { min-height: 30px; padding: 0 14px; font-size: 0.8125rem; }
.pill-large { min-height: 56px; padding: 0 32px; font-size: 1.1875rem; }
.link-more {
  color: var(--accent-text); text-decoration: none; font-size: 1.0625rem;
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
}
.link-more span { transition: transform 0.35s var(--spring); }
.link-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-more:hover span { transform: translateX(3px); }

/* ---------- Type scale (tracking tightens as size grows) ---------- */
.eyebrow {
  margin: 0 0 12px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0;
  color: var(--accent-text);
}
h1, h2, h3 { margin: 0; font-weight: 600; }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.07; letter-spacing: -0.03em; }
h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12; letter-spacing: -0.025em; }
.soft { color: var(--muted); }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(64px, 12vw, 144px) var(--gutter) clamp(72px, 11vw, 128px);
  text-align: center;
}
.hero h1 { margin: 8px auto 0; }
/* Animated logo: a current runs from the plug through the name and charges the ticket.
   Every element's resting style is the finished logo, so if animations are off or
   unsupported the logo simply appears complete. */
.hero-logo {
  display: block; width: min(820px, 100%); height: auto; margin: 0 auto;
  color: var(--ink); overflow: visible;
  --spark: #FFC400;                      /* electric yellow */
  --spark-glow: rgba(255, 196, 0, 0.85);
}
.hero-logo .st-base, .hero-logo .st-mgmt { fill: currentColor; }
.hero-logo .st-current, .hero-logo .st-ticket, .hero-logo .st-i { fill: var(--spark); }
.hero-logo .st-current { filter: drop-shadow(0 0 3px var(--spark-glow)); }
.hero-logo .st-ticket, .hero-logo .st-i { filter: drop-shadow(0 0 5px var(--spark-glow)); }
.st-wipe-rect, .st-band-rect { transform: translateX(700px); }
.st-ticket, .st-i, .st-impact, .st-strike { opacity: 0; }
.st-impact { transform-origin: 305px 40px; }
.st-bolt, .st-bolt-glow { fill: none; stroke-linejoin: miter; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: 0; }
.st-bolt-glow { stroke: var(--spark); stroke-width: 4.5; filter: drop-shadow(0 0 6px var(--spark-glow)); }
.st-bolt { stroke: #FFF6C7; stroke-width: 1.6; }

/* Timeline: current starts at the plug (0.25s), a bolt strikes the lightning "i"
   exactly as the current passes under it (0.89s), the ticket charges at the end. */
.st-wipe-rect { animation: st-flow 1.5s cubic-bezier(0.55, 0, 0.25, 1) 0.25s backwards; }
.st-band-rect { animation: st-flow 1.5s cubic-bezier(0.55, 0, 0.25, 1) 0.25s backwards; }
.st-strike { animation: st-flicker 0.55s linear 0.79s backwards; }
.st-bolt, .st-bolt-glow { animation: st-draw 0.1s ease-in 0.79s backwards; }
.st-impact { animation: st-impact 0.7s ease-out 0.89s backwards; }
.st-i { animation: st-charge 0.7s ease-out 0.89s backwards; }
.st-ticket { animation: st-charge 0.75s ease-out 1.6s backwards; }
.st-mgmt { animation: st-rise 0.9s var(--spring) 1.25s backwards; }

/* Hover: the current and the bolt run again over the finished logo */
.hero-logo.is-charging .st-band-rect { animation: st-flow-again 1s cubic-bezier(0.55, 0, 0.25, 1) both; }
.hero-logo.is-charging .st-strike { animation: st-flicker-again 0.55s linear 0.33s backwards; }
.hero-logo.is-charging .st-bolt,
.hero-logo.is-charging .st-bolt-glow { animation: st-draw-again 0.1s ease-in 0.33s backwards; }
.hero-logo.is-charging .st-impact { animation: st-impact-again 0.7s ease-out 0.43s backwards; }
.hero-logo.is-charging .st-i { animation: st-charge-again 0.7s ease-out 0.43s backwards; }
.hero-logo.is-charging .st-ticket { animation: st-charge-again 0.75s ease-out 0.75s backwards; }

@keyframes st-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes st-draw-again { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes st-flicker {
  0% { opacity: 0; } 1% { opacity: 1; } 35% { opacity: 1; } 45% { opacity: 0.15; } 55% { opacity: 1; } 75% { opacity: 0.5; } 100% { opacity: 0; }
}
@keyframes st-flicker-again {
  0% { opacity: 0; } 1% { opacity: 1; } 35% { opacity: 1; } 45% { opacity: 0.15; } 55% { opacity: 1; } 75% { opacity: 0.5; } 100% { opacity: 0; }
}
@keyframes st-impact { 0% { opacity: 0; transform: scale(0.3); } 1% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes st-impact-again { 0% { opacity: 0; transform: scale(0.3); } 1% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.8); } }

@keyframes st-flow { from { transform: translateX(0); } to { transform: translateX(700px); } }
@keyframes st-flow-again { from { transform: translateX(0); } to { transform: translateX(700px); } }
@keyframes st-charge {
  0% { opacity: 0; } 15% { opacity: 1; } 35% { opacity: 0.2; } 55% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes st-charge-again {
  0% { opacity: 0; } 15% { opacity: 1; } 35% { opacity: 0.2; } 55% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes st-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lede {
  margin: clamp(28px, 4vw, 44px) auto 0; max-width: 36rem;
  font-size: clamp(1.1875rem, 2.2vw, 1.5rem); line-height: 1.38; letter-spacing: -0.015em;
  color: var(--muted);
}
.actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }

/* ---------- Services ---------- */
.services { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 8vw, 96px) var(--gutter) clamp(72px, 10vw, 128px); }
.section-head { margin-bottom: clamp(32px, 5vw, 56px); }
.feature {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px);
  align-items: end;
  background: var(--surface);
  border-radius: var(--radius-tile);
  padding: clamp(28px, 5vw, 56px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.05);
}
.feature + .feature { margin-top: 20px; }
.icon {
  width: 36px; height: 36px; margin-bottom: 28px;
  fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.feature-num {
  margin: 0 0 6px; font-size: 0.875rem; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.feature h3 { margin-bottom: 14px; }
.feature-main p:last-child { margin: 0; color: var(--muted); font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); max-width: 30rem; }
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li {
  padding: 14px 0; border-top: 1px solid var(--hairline);
  font-size: 1rem; line-height: 1.4;
}
.feature-list li:last-child { border-bottom: 1px solid var(--hairline); }
.feature-dark { background: var(--dark-bg); color: var(--dark-ink); box-shadow: none; }
.feature-dark .icon { stroke: var(--dark-accent); }
.feature-dark .feature-num, .feature-dark .feature-main p:last-child { color: var(--dark-muted); }
.feature-dark .feature-list li { border-color: rgba(255, 255, 255, 0.16); }

/* ---------- About ---------- */
.about { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.about-inner { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 12vw, 144px) var(--gutter); }
.about-body { max-width: 44rem; }
.about-body p { margin: 0 0 1em; font-size: clamp(1.125rem, 1.8vw, 1.3125rem); line-height: 1.5; color: var(--muted); }
.about-body p:first-child { color: var(--ink); }
.facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin: clamp(40px, 6vw, 64px) 0 0;
}
.facts div { border-top: 1px solid var(--hairline); padding-top: 18px; }
.facts dt { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.facts dd { margin: 8px 0 0; color: var(--muted); font-size: 0.9375rem; }

/* ---------- Contact ---------- */
.contact {
  max-width: 52rem; margin: 0 auto; text-align: center;
  padding: clamp(96px, 14vw, 168px) var(--gutter);
}
.contact > p { margin: 20px auto 0; max-width: 40rem; color: var(--muted); font-size: clamp(1.1875rem, 2vw, 1.3125rem); line-height: 1.4; }
.contact .actions { margin-top: 32px; }
.contact-cards {
  margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; text-align: left;
}
.contact-card { background: var(--surface); border-radius: 18px; padding: 24px 24px 26px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.05); }
.contact-card p, .contact-card address { margin: 0; font-style: normal; font-size: 1.0625rem; line-height: 1.45; overflow-wrap: anywhere; }
.contact-card .contact-label { font-size: 0.875rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.contact-card a { color: var(--accent-text); text-decoration: none; }
.contact-card a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--hairline); font-size: 0.75rem; line-height: 1.4; letter-spacing: 0; color: var(--muted); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) max(28px, env(safe-area-inset-bottom)); }
.footer dl { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 16px; margin: 0 0 20px; }
.footer dt { color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.footer dd { margin: 0; overflow-wrap: anywhere; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.copy p { margin: 0; }
.copy a { color: var(--ink); }

/* ---------- Privacy page ---------- */
.legal { max-width: 44rem; margin: 0 auto; padding: clamp(56px, 9vw, 104px) var(--gutter) clamp(72px, 10vw, 120px); }
.legal h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.07; letter-spacing: -0.03em; }
.legal-date { margin: 12px 0 40px; color: var(--muted); font-size: 0.9375rem; }
.legal h2 { font-size: 1.3125rem; line-height: 1.25; letter-spacing: -0.02em; margin: 40px 0 10px; }
.legal p { margin: 0 0 1em; }
.legal a { color: var(--accent-text); }
.legal-back { margin-top: 48px !important; }
.legal-back a { text-decoration: none; }

/* ---------- 404 ---------- */
.logo-404 { width: min(320px, 70vw); margin: 0 auto 40px; color: var(--ink); }

/* ---------- Reveal on scroll (only when JS is running) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.9s var(--spring);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  nav a:not(.pill) { display: none; }
  .brand .logo { height: 28px; }
  .feature { grid-template-columns: 1fr; align-items: start; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts div { padding: 16px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .facts dd { margin: 0; }
  .contact-cards { grid-template-columns: 1fr; }
  .footer dl { grid-template-columns: 1fr; }
}

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: opacity 0.3s ease; transition-delay: 0s; }
  .pill, .pill:active, .link-more span { transform: none !important; transition: background-color 0.2s ease; }
  .st-wipe-rect, .st-band-rect, .st-ticket, .st-mgmt,
  .st-strike, .st-bolt, .st-bolt-glow, .st-impact, .st-i { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --muted: var(--ink); --hairline: currentColor; }
  .topbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 var(--ink); }
  .feature, .contact-card { box-shadow: none; outline: 1px solid currentColor; }
}