/* UtilFarm critical CSS — served directly (no Vite HMR, no FOUC).
   Edit this file for CSS changes; read src/styles/*.css for annotated source. */

/* ─── Self-hosted Inter Variable Font ──────────────────────────────────────
   Served from /public/fonts/ — zero external network requests.
   Variable font covers weight 100–900 in a single file.
   Family name kept as 'Inter' so no other CSS needs changing.          */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url('/fonts/inter-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:italic;font-display:swap;font-weight:100 900;src:url('/fonts/inter-latin-wght-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:root{--font-display:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif;--font-text:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif}
:root{--color-primary:#ff3131;--color-primary-focus:#ff914d;--color-primary-dark:#ff914d;--color-on-primary:#ffffff;--color-ink:#000000;--color-ink-muted:rgba(0,0,0,0.56);--color-canvas:#ffffff;--color-parchment:#f5f5f7;--color-nav-black:#000000;--color-on-dark:#ffffff;--color-hairline:rgba(0,0,0,0.08);--gradient-accent:linear-gradient(135deg,#ff3131,#ff914d);--gradient-accent-hover:linear-gradient(135deg,#d92626,#e67800);--color-primary-text:#d92626}
html[data-theme="dark"]{--color-ink:#ffffff;--color-ink-muted:rgba(255,255,255,0.55);--color-canvas:#000000;--color-parchment:#0c0c0e;--color-nav-black:#ffffff;--color-hairline:rgba(255,255,255,0.08);--color-primary-dark:#ff3131;--color-primary-text:var(--color-primary)}
body,.tile,.mockup-card,.utility-card,.uf-nav,.nav-link,.nav-mobile-panel,.nav-mobile-link{transition:background-color 0.3s ease,border-color 0.3s ease,color 0.3s ease,box-shadow 0.3s ease}
:root{--space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:17px;--space-lg:24px;--space-xl:32px;--space-xxl:48px;--space-section:80px;--space-section-sm:48px}
:root{--radius-none:0px;--radius-xs:5px;--radius-sm:8px;--radius-md:11px;--radius-lg:18px;--radius-pill:9999px}
:root{--shadow-product:rgba(0,0,0,0.22)3px 5px 30px 0}
:root{--page-width:1440px;--page-gutter:var(--space-xxl)}
@media(max-width:640px){:root{--page-gutter:var(--space-lg)}}
html{scroll-behavior:smooth}
body{font-family:var(--font-text);font-size:17px;font-weight:400;line-height:1.47;letter-spacing:-0.374px;color:var(--color-ink);background-color:var(--color-canvas)}
.container{width:100%;max-width:var(--page-width);margin-inline:auto;padding-inline:var(--page-gutter)}
.t-hero{font-family:var(--font-display);font-size:clamp(34px,5.6vw,56px);font-weight:600;line-height:1.07;letter-spacing:-0.28px}
.t-display{font-family:var(--font-display);font-size:clamp(28px,4vw,40px);font-weight:600;line-height:1.1;letter-spacing:0}
.t-display-sm{font-family:var(--font-display);font-size:clamp(24px,3.4vw,34px);font-weight:600;line-height:1.47;letter-spacing:-0.374px}
.t-lead{font-family:var(--font-display);font-size:clamp(19px,2.8vw,28px);font-weight:400;line-height:1.14;letter-spacing:0.196px}
.t-tagline{font-family:var(--font-display);font-size:21px;font-weight:600;line-height:1.19;letter-spacing:0.231px}
.t-body{font-family:var(--font-text);font-size:17px;font-weight:400;line-height:1.47;letter-spacing:-0.374px}
.t-body-strong{font-family:var(--font-text);font-size:17px;font-weight:600;line-height:1.24;letter-spacing:-0.374px}
.t-caption{font-family:var(--font-text);font-size:14px;font-weight:400;line-height:1.43;letter-spacing:-0.224px}
.t-caption-strong{font-family:var(--font-text);font-size:14px;font-weight:600;line-height:1.29;letter-spacing:-0.224px}
.t-nav{font-family:var(--font-text);font-size:12px;font-weight:400;line-height:1;letter-spacing:-0.12px}
.t-fine{font-family:var(--font-text);font-size:12px;font-weight:400;line-height:1;letter-spacing:-0.12px;color:var(--color-ink-muted)}
.t-dense-link{font-family:var(--font-text);font-size:17px;font-weight:400;line-height:2.41;letter-spacing:0}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;background:var(--gradient-accent);color:var(--color-on-primary);font-family:var(--font-text);font-size:17px;font-weight:400;line-height:1.47;letter-spacing:-0.374px;border-radius:var(--radius-pill);white-space:nowrap;transition:all 0.25s cubic-bezier(0.25,0.46,0.45,0.94)}
.btn-primary:hover{background:var(--gradient-accent-hover,#d92626);transform:translateY(-2px);box-shadow:0 6px 16px rgba(255,49,49,0.25)}
.btn-primary:active{transform:translateY(0) scale(0.95);box-shadow:0 2px 8px rgba(255,49,49,0.2)}
.btn-primary:focus-visible{outline:2px solid var(--color-primary-focus);outline-offset:2px}
.btn-ghost{display:inline-flex;align-items:center;gap:4px;padding:0;background:transparent;color:var(--color-primary-text);font-family:var(--font-text);font-size:17px;font-weight:400;line-height:1.47;letter-spacing:-0.374px;white-space:nowrap;transition:all 0.25s cubic-bezier(0.25,0.46,0.45,0.94)}
.btn-ghost:hover{text-decoration:none;transform:translateX(4px);color:var(--color-primary-focus)}
.btn-ghost:active{transform:translateX(2px) scale(0.98)}
.btn-ghost-dark{color:var(--color-primary-dark)}
.btn-ghost-dark:hover{color:#fff}
.tile{width:100%;padding-block:var(--space-section)}
.tile--canvas{background:var(--color-canvas);color:var(--color-ink)}
.tile--parchment{background:var(--color-parchment);color:var(--color-ink)}
.tile--dark{background:#000;color:#fff}
.tile-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-lg)}
.link{color:var(--color-primary)}
.link-dark{color:var(--color-primary-dark)}
.link:hover,.link-dark:hover{text-decoration:underline}
@media(max-width:640px){.tile{padding-block:var(--space-section-sm)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes navDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes barDrift{0%,100%{width:calc(var(--fill-target) * 100%) !important}50%{width:calc((var(--fill-target) - 0.02) * 100%) !important}}
@keyframes popPush{from{opacity:0;transform:scale(0.88)translate(var(--pop-x,0),var(--pop-y,0))}to{opacity:1;transform:scale(1)translate(0,0)}}
@keyframes shimmer{0%{background-position:200%center}100%{background-position:-200%center}}
@keyframes valueRoll{from{letter-spacing:-8px;opacity:0}to{letter-spacing:normal;opacity:1}}
.animate-hero{opacity:0;animation:fadeUp 0.7s cubic-bezier(0.25,0.46,0.45,0.94) both;animation-delay:var(--delay,0ms);animation-play-state:paused}
.animate-hero.is-visible{animation-play-state:running}
.animate-nav{animation:navDrop 0.4s cubic-bezier(0.25,0.46,0.45,0.94) both}
.reveal{opacity:0;transform:translateY(16px);transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94) var(--delay,0ms),transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94) var(--delay,0ms);will-change:opacity,transform}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.satellite-pop{opacity:0;animation:popPush 0.45s cubic-bezier(0.34,1.56,0.64,1) both;animation-delay:var(--delay,0ms);animation-play-state:paused}
.satellite-pop.is-visible{animation-play-state:running}
.value-roll{animation:valueRoll 0.6s cubic-bezier(0.25,0.46,0.45,0.94) both;animation-delay:var(--delay,0ms)}
.shimmer-live{background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-focus) 40%,var(--color-primary) 80%);background-size:200%auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shimmer 2.5s linear infinite}
.fill-up-flex{width:0%!important;transition:width 1s cubic-bezier(0.25,0.46,0.45,0.94) var(--delay,0ms)}
.fill-up-flex.is-filled{width:calc(var(--fill-target) * 100%)!important}
.fill-up-left{left:0%!important;transition:left 1s cubic-bezier(0.25,0.46,0.45,0.94) var(--delay,0ms)}
.fill-up-left.is-filled{left:var(--fill-target)!important}
/* @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}.reveal,.animate-hero,.satellite-pop{opacity:1!important;transform:none!important}.shimmer-live,.value-roll{animation:none!important}} */
:root{--font-display:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;--font-text:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif}
@supports(font:-apple-system-body){:root{--font-display:-apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif;--font-text:-apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif}}
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:tsunami-wipe 0.7s cubic-bezier(0.76,0,0.24,1) both;mix-blend-mode:normal}
@keyframes tsunami-wipe{from{clip-path:polygon(0 0,100% 0,100% 0,0 -15%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 115%)}}