html { scroll-behavior: auto; }
body { margin: 0; background: #F1F4F3; color: #4A4E4C; font-family: Barlow, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #064F45; text-decoration: none; }
a:hover { color: #0B8F7A; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #0B8F7A; outline-offset: 3px; }
::selection { background: #E3F0ED; color: #0A0A0A; }
input::placeholder, textarea::placeholder { color: #5E6361; }
@media (pointer: fine) and (hover: hover) { html[data-cursor="on"], html[data-cursor="on"] * { cursor: none !important; } }

.route { display: none; }
.route.is-active { display: block; }

/* Fixed-count responsive grids: column counts are chosen so item totals
   always divide evenly per breakpoint, so a grid never ends with a lone
   trailing card and a block of empty track space beside it. */
.sg-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sg-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sg-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sg-grid-6 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .sg-grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .sg-grid-3 { grid-template-columns: 1fr; }
  .sg-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sg-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .sg-grid-6 { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .sg-grid-4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Motion / depth system
   --------------------------------------------------------------------- */

#sg-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: #14B594; z-index: 100; pointer-events: none; box-shadow: 0 0 8px rgba(20,181,148,.6); }

/* Sheen sweep for primary CTAs */
.sg-sheen { position: relative; overflow: hidden; isolation: isolate; }
.sg-sheen::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-16deg); transition: left 620ms cubic-bezier(.2,.7,.2,1); pointer-events: none; z-index: 1;
}
.sg-sheen:hover::after { left: 130%; }

/* 3D tilt surface for cards (rotation applied via JS transform, this just sets up the stage) */
[data-card] { transform-style: preserve-3d; will-change: transform; transition: border-color 240ms cubic-bezier(.2,.7,.2,1), box-shadow 320ms cubic-bezier(.2,.7,.2,1); }
[data-card]:hover { box-shadow: 0 22px 44px -20px rgba(10,10,10,.35); }

/* Ambient drifting gradient orbs (decorative, hero + invert sections) */
.sg-orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; opacity: .5; animation: sg-drift 22s ease-in-out infinite; will-change: transform; }
.sg-orb--a { width: 420px; height: 420px; background: radial-gradient(circle at 30% 30%, rgba(20,181,148,.55), transparent 70%); top: -140px; right: -80px; animation-duration: 26s; }
.sg-orb--b { width: 320px; height: 320px; background: radial-gradient(circle at 60% 40%, rgba(11,143,122,.5), transparent 70%); bottom: -120px; left: -60px; animation-duration: 19s; animation-delay: -6s; }
@keyframes sg-drift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33% { transform: translate3d(24px,-18px,0) scale(1.08); }
  66% { transform: translate3d(-18px,14px,0) scale(0.95); }
}

/* Marquee ticker */
.sg-marquee { display: flex; overflow: hidden; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sg-marquee__track { display: flex; align-items: center; flex: none; gap: 40px; padding-right: 40px; animation: sg-marquee 32s linear infinite; }
@keyframes sg-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* Footer nav links with a sliding arrow (footer runs on the light surface) */
.sg-flink { position: relative; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #4A4E4C; text-decoration: none; width: fit-content; transition: color 220ms cubic-bezier(.2,.7,.2,1); }
.sg-flink svg { flex: none; opacity: 0; transform: translate3d(-6px,0,0); transition: opacity 220ms cubic-bezier(.2,.7,.2,1), transform 220ms cubic-bezier(.2,.7,.2,1); }
.sg-flink:hover { color: #0A0A0A; }
.sg-flink:hover svg { opacity: 1; transform: translate3d(0,0,0); }

/* Footer social / icon buttons */
.sg-social { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #C6CECB; color: #4A4E4C; overflow: hidden; z-index: 0; transition: color 260ms cubic-bezier(.2,.7,.2,1), border-color 260ms cubic-bezier(.2,.7,.2,1); }
.sg-social::before { content: ""; position: absolute; inset: 0; background: #14B594; border-radius: 50%; transform: scale(0); transition: transform 320ms cubic-bezier(.2,.7,.2,1); z-index: -1; }
.sg-social:hover { color: #0A0A0A; border-color: #14B594; }
.sg-social:hover::before { transform: scale(1); }

/* Back-to-top control */
.sg-totop { position: relative; display: inline-flex; align-items: center; gap: 10px; border: 1px solid #C6CECB; color: #4A4E4C; padding: 10px 8px 10px 16px; background: transparent; font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: border-color 220ms cubic-bezier(.2,.7,.2,1), color 220ms cubic-bezier(.2,.7,.2,1); }
.sg-totop:hover { border-color: #0B8F7A; color: #0A0A0A; }
.sg-totop span.sg-totop-ring { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid currentColor; transition: transform 320ms cubic-bezier(.2,.7,.2,1); }
.sg-totop:hover span.sg-totop-ring { transform: translate3d(0,-3px,0); }

/* Ghost wordmark watermark */
.sg-ghostmark { position: absolute; left: 50%; bottom: -4%; transform: translate3d(-50%,0,0); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(90px,17vw,300px); line-height: 1; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(10,10,10,.055); white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; }

/* Dark marquee band that crosses the footer full-bleed */
.sg-fmarquee { position: relative; left: 50%; width: 100vw; transform: translate3d(-50%,0,0); background: #0A0A0A; border-top: 1px solid #2A2E2C; border-bottom: 1px solid #2A2E2C; overflow: hidden; }
.sg-fmarquee__item { display: inline-flex; align-items: center; gap: 10px; font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: #C6CECB; }
.sg-fmarquee__dot { width: 6px; height: 6px; flex: none; background: #14B594; border-radius: 1px; }

/* Reveal enhancement: slight blur-in alongside existing opacity/transform (set inline, this just enables GPU compositing) */
[data-reveal] { will-change: opacity, transform, filter; }

@media (prefers-reduced-motion: reduce) {
  .sg-orb, .sg-marquee__track { animation: none !important; }
  .sg-sheen::after { display: none; }
}

@media (max-width: 720px) {
  .sg-orb { display: none; }
}

.sg-footgrid { grid-template-columns: 1.3fr repeat(3, 1fr); }
@media (max-width: 900px) {
  .sg-footgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sg-footgrid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Boot / scan intro
   --------------------------------------------------------------------- */

[data-boot] { transition: opacity 520ms cubic-bezier(.2,.7,.2,1), visibility 520ms; }
[data-boot].sg-boot-hide { opacity: 0; visibility: hidden; pointer-events: none; }
.sg-boot-line { opacity: 0; transform: translate3d(0,6px,0); animation: sg-boot-in 460ms cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes sg-boot-in { to { opacity: 1; transform: translate3d(0,0,0); } }
.sg-boot-bar { animation: sg-boot-fill 1.5s cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes sg-boot-fill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  [data-boot] { display: none !important; }
}

/* ---------------------------------------------------------------------
   Cursor spotlight (dark sections only)
   --------------------------------------------------------------------- */

[data-spotlight] { position: fixed; top: 0; left: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; background: radial-gradient(circle, rgba(20,181,148,.16), transparent 68%); pointer-events: none; z-index: 45; opacity: 0; transition: opacity 340ms cubic-bezier(.2,.7,.2,1); mix-blend-mode: screen; will-change: transform; }

/* ---------------------------------------------------------------------
   Sticky header shrink
   --------------------------------------------------------------------- */

[data-header] { transition: background-color 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms cubic-bezier(.2,.7,.2,1), backdrop-filter 260ms cubic-bezier(.2,.7,.2,1); }
[data-header-inner] { transition: padding 260ms cubic-bezier(.2,.7,.2,1); }

/* ---------------------------------------------------------------------
   Section dot-nav rail
   --------------------------------------------------------------------- */

[data-secnav] { position: fixed; right: 26px; top: 50%; transform: translate3d(0,-50%,0); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 0; }
[data-secnav] .sg-secdot { width: 8px; height: 8px; flex: none; border-radius: 1px; border: 1px solid #8A8F8C; background: transparent; padding: 0; margin: 5px 0; cursor: pointer; transition: background-color 220ms cubic-bezier(.2,.7,.2,1), border-color 220ms cubic-bezier(.2,.7,.2,1), transform 220ms cubic-bezier(.2,.7,.2,1); }
[data-secnav] .sg-secdot:hover { border-color: #0A0A0A; transform: scale(1.3); }
[data-secnav] .sg-secdot.is-active { background: #0B8F7A; border-color: #0B8F7A; transform: scale(1.35); }
[data-secnav] .sg-secline { width: 1px; height: 18px; flex: none; background: #C6CECB; }
[data-secnav].on-dark .sg-secdot { border-color: #5E6361; }
[data-secnav].on-dark .sg-secdot:hover { border-color: #F1F4F3; }
[data-secnav].on-dark .sg-secdot.is-active { background: #14B594; border-color: #14B594; }
[data-secnav].on-dark .sg-secline { background: #2A2E2C; }
@media (max-width: 1100px) {
  [data-secnav] { display: none !important; }
}