/* SFDIFY — Product + Technology Studio
   Design system: Geist type, aurora gradients, glassmorphism, animated bento.
   Most layout styling is authored inline per the design comps; this file holds
   the global base, keyframes, and motion helpers the runtime depends on. */

:root {
  color-scheme: light;
  /* Spacing tokens injected by build.py into large padding/gap values. */
  --px: 32px; --p140: 140px; --p128: 128px; --p120: 120px; --p112: 112px; --p96: 96px; --p88: 88px;
  --g96: 96px; --g64: 64px;
}
@media (max-width: 640px) {
  :root { --px: 20px; --p140: 88px; --p128: 80px; --p120: 80px; --p112: 72px; --p96: 64px; --p88: 56px; --g96: 56px; --g64: 40px; }
}
html, body { overflow-x: clip; }

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

body {
  margin: 0;
  background: #F8FAFC;
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #0A0A0A;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: #0A0A0A; }
a:hover { color: #4F46FF; }
h1,h2,h3,p { margin: 0; }
img { display: block; max-width: 100%; }
input, textarea, button { font: inherit; }
:focus-visible { outline: 2px solid #4F46FF; outline-offset: 2px; }

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

/* ---------- Keyframes (aurora, floats, gradients, product motion) ---------- */
@keyframes auroraA { from{transform:translate(0,0) scale(1)} to{transform:translate(70px,36px) scale(1.06)} }
@keyframes auroraB { from{transform:translate(0,0)} to{transform:translate(-30px,-64px)} }
@keyframes auroraC { from{transform:scale(1) translate(0,0)} to{transform:scale(1.12) translate(36px,-20px)} }
@keyframes floatA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes driftB { 0%,100%{transform:translateX(0)} 50%{transform:translateX(9px)} }
@keyframes rotC { 0%,100%{transform:rotate(-.6deg) translateY(0)} 50%{transform:rotate(.8deg) translateY(-6px)} }
@keyframes gradShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes routeDash { to{stroke-dashoffset:-56} }
@keyframes scan { 0%{transform:translateX(-140%)} 35%{transform:translateX(260%)} 100%{transform:translateX(260%)} }
@keyframes pulse { 0%,100%{opacity:.45;transform:scale(1)} 50%{opacity:1;transform:scale(1.35)} }
@keyframes glowMove { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-120px,40px)} }
@keyframes gridDrift { from{background-position:0 0} to{background-position:64px 64px} }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,0); box-shadow: none; transition: border-color .3s, background .3s, box-shadow .3s; }
.nav.scrolled { background: rgba(255,255,255,.86); border-bottom-color: rgba(37,55,110,.10); box-shadow: 0 8px 30px -20px rgba(37,55,110,.25); }
.nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.03em; font-size: 19px; color: #0A0A0A; text-decoration: none; }
.brand-icon { width: 26px; height: 26px; border-radius: 6px; display: block; flex: none; }
.nav-links { display: flex; gap: 2px; }
.nav-links a { position: relative; padding: 8px 12px; font-size: 14px; font-weight: 500; color: #5B616B; text-decoration: none; border-radius: 10px; transition: color .2s, background .2s; }
.nav-links a:hover { background: #F2F4F7; color: #0A0A0A; }
.nav-links a .ind { position: absolute; left: 12px; right: 12px; bottom: 1px; height: 2px; border-radius: 2px; background: #4F46FF; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.nav-links a:hover .ind { transform: scaleX(1); }
.nav-links a.active { color: #0A0A0A; }
.nav-links a.active .ind { transform: scaleX(1); }
.nav-cta { display: inline-flex; align-items: center; white-space: nowrap; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; background: #0A0A0A; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; transition: gap .2s, background .2s; }
.nav-cta:hover { gap: 12px; background: #4F46FF; color: #fff; }
.nav-toggle { display: none; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid #E5E7EB; background: #fff; font-size: 14px; font-weight: 500; cursor: pointer; color: #0A0A0A; }
.nav-mobile { display: none; border-top: 1px solid #E5E7EB; background: #fff; padding: 12px 32px 20px; }
.nav-mobile a { display: block; padding: 12px 8px; font-size: 17px; font-weight: 500; color: #5B616B; text-decoration: none; border-radius: 10px; }
.nav-mobile a:hover { background: #F2F4F7; color: #0A0A0A; }
.nav-mobile a.active { color: #0A0A0A; }
@media (max-width: 899px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav.menu-open .nav-mobile { display: grid; gap: 2px; }
}
@media (max-width: 640px) {
  .nav-inner { padding: 0 16px; gap: 12px; }
  .nav-mobile { padding: 8px 16px 20px; max-height: calc(100vh - 64px); overflow-y: auto; }
  .nav-mobile a { padding: 14px 8px; }
  .nav-inner .nav-cta { height: 38px; padding: 0 12px; font-size: 13px; }
  .nav-toggle { height: 38px; padding: 0 12px; font-size: 13px; }
}
@media (max-width: 400px) {
  .nav-inner .nav-cta svg { display: none; }
}

/* About: two-column-span blocks collapse to one column on narrow screens */
.span2 { grid-column: span 2; }
@media (max-width: 720px) { .span2 { grid-column: auto; } }

/* ---------- 12-col bento grid + responsive spans ---------- */
.grid12 { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 20px; }
.grid12 .c4 { grid-column: span 4; }
.grid12 .c5 { grid-column: span 5; }
.grid12 .c6 { grid-column: span 6; }
.grid12 .c7 { grid-column: span 7; }
.grid12 .c12 { grid-column: 1 / -1; }
@media (max-width: 1099px) { .grid12 .c4 { grid-column: span 6; } }
@media (max-width: 899px) { .grid12 > * { grid-column: 1 / -1 !important; } }

/* ---------- Product cards (Home) ---------- */
.prodcard { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s cubic-bezier(.2,.7,.2,1); }
.prodcard:hover { transform: translateY(-6px); box-shadow: 0 32px 70px -28px var(--sc, rgba(37,55,110,.3)); }
.prodcard .pc-glow { opacity: .55; transition: opacity .45s cubic-bezier(.2,.7,.2,1); }
.prodcard:hover .pc-glow { opacity: 1; }
.prodcard .pc-deco { opacity: .6; transition: opacity .45s; }
.prodcard:hover .pc-deco { opacity: 1; }
.prodcard .pc-img { transform: translateY(0); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.prodcard:hover .pc-img { transform: translateY(-10px); }
.prodcard .pc-cta { gap: 8px; transition: gap .25s; }
.prodcard:hover .pc-cta { gap: 12px; }

/* ---------- Service cards ---------- */
.svc { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s cubic-bezier(.2,.7,.2,1); }
.svc:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -28px var(--sc, rgba(79,70,255,.3)); }
.svc .mob-screen2 { transform: translateX(105%); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.svc:hover .mob-screen2 { transform: translateX(0); }

/* ---------- Official partner badges ---------- */
.badge { flex: none; width: 188px; height: 108px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid #E5E7EB; display: grid; place-items: center; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset; transition: border-color .2s, transform .25s cubic-bezier(.2,.7,.2,1); }
.badge img { max-width: 150px; max-height: 72px; width: auto; height: auto; display: block; }
.badge-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.badge-track { display: flex; gap: 16px; width: max-content; animation: badgeScroll 48s linear infinite; }
.badge-marquee:hover .badge-track { animation-play-state: paused; }
@keyframes badgeScroll { to { transform: translateX(calc(-50% - 8px)); } }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.badge-grid .badge { width: auto; }
.badge-grid .badge:hover { border-color: #0A0A0A; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .badge-marquee { -webkit-mask-image: none; mask-image: none; }
  .badge-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .badge-dup { display: none; }
}

/* generic lift used by simple cards/chips */
.lift { transition: border-color .2s, transform .25s cubic-bezier(.2,.7,.2,1); }
.lift:hover { border-color: #0A0A0A; transform: translateY(-2px); }

/* ---------- Reveal (JS adds .is-in; hidden state only applied when JS runs) ---------- */
.reveal-ready [data-reveal] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-anim] { animation: none !important; }
  .reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}
html { scroll-behavior: smooth; }

/* ---------- Mobile layout helpers ---------- */
/* Article: inline screenshot bleeds past the text column only where there is room */
.breakout { margin: 8px calc(-1 * clamp(0px, 6vw, 80px)); }
@media (max-width: 760px) { .breakout { margin: 8px 0; } }
/* Yolda: narrower route rail on phones; dots stay centred on the rail */
@media (max-width: 640px) {
  .route-grid { grid-template-columns: 20px minmax(0,1fr) !important; gap: 16px !important; }
  .route-dot { left: -34px !important; }
  .route-grid svg { width: 20px !important; }
}
/* Home hero: on phones show only the main product screenshot, full width */
@media (max-width: 640px) {
  .hero-scene { aspect-ratio: 4 / 3 !important; }
  .hero-float { display: none !important; }
  .hero-main { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
}
/* Segeo graph, phone layout (top-to-bottom; set by site.js) */
.g-narrow [data-glabel="brand"], .g-narrow [data-glabel="sources"], .g-narrow [data-glabel="models"] { display: none; }
.g-narrow [data-node], .g-narrow [data-gpos="brand"] { font-size: 13px !important; padding: 8px 12px !important; cursor: pointer !important; }
.g-narrow [data-gpos="vis"] { width: 72px !important; height: 72px !important; font-size: 24px !important; }
.g-narrow [data-glabel="vis"] { transform: translate(-50%, 44px) !important; }