/* Sparrofox Unified Light-Future Brand System
   Global consistency layer for every static page. Last stylesheet wins. */
:root{
  color-scheme:light;
  --sf-ink:#071B31;--sf-ink-2:#284158;--sf-slate:#64748D;--sf-muted:#64748D;
  --sf-line:#E5EDF5;--sf-paper:#FFFFFF;--sf-wash:#F6F9FC;--sf-soft:#EFF7FF;
  --sf-blue:#1D4FD3;--sf-cyan:#5585F0;--sf-violet:#2E63E6;--sf-copper:#F2620F;
  --sf-radius:18px;--sf-radius-lg:30px;
  --sf-shadow:rgba(50,50,93,.18) 0 30px 45px -34px,rgba(0,0,0,.08) 0 18px 36px -24px;
  --sf-shadow-hover:0 34px 80px rgba(35,119,255,.16),0 12px 30px rgba(50,50,93,.12);
}
html{scroll-behavior:smooth;background:#fff!important;min-width:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;background:linear-gradient(180deg,#fff 0%,var(--sf-wash) 42%,#fff 100%)!important;color:var(--sf-ink)!important;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-width:100%}body::before{content:'';position:fixed;inset:-24% -10% auto;height:760px;pointer-events:none;z-index:-1;background:radial-gradient(circle at 18% 22%,rgba(39,200,245,.18),transparent 32%),radial-gradient(circle at 78% 12%,rgba(119,92,255,.16),transparent 30%),radial-gradient(circle at 54% 70%,rgba(200,107,31,.10),transparent 34%);filter:blur(18px);animation:sfAurora 18s ease-in-out infinite alternate}@keyframes sfAurora{from{transform:translate3d(-1.5%,0,0) scale(1)}to{transform:translate3d(1.5%,-2%,0) scale(1.06)}}
nav{height:72px!important;padding:0 48px!important;background:rgba(255,255,255,.80)!important;border-bottom:1px solid rgba(229,237,245,.9)!important;backdrop-filter:saturate(180%) blur(22px)!important;box-shadow:0 1px 0 rgba(255,255,255,.8),0 18px 50px rgba(15,35,55,.055)!important;color:var(--sf-ink)!important}nav .logo,.logo{display:flex!important;align-items:center!important;gap:10px!important;text-decoration:none!important;color:var(--sf-ink)!important}nav .logo img,.logo img{width:34px!important;height:34px!important;border-radius:10px!important;object-fit:contain!important;box-shadow:0 10px 28px rgba(35,119,255,.14)!important}nav .logo .logo-text,nav .logo span,.logo-text{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-weight:760!important;font-size:1.05rem!important;color:var(--sf-ink)!important;letter-spacing:-.045em!important}.nav-links{display:flex;gap:16px!important;list-style:none!important;margin:0!important;padding:0!important;flex-wrap:nowrap!important}.nav-links a,.nav-links li a{font-size:12px!important;font-weight:620!important;color:rgba(7,27,49,.66)!important;text-decoration:none!important;letter-spacing:.01em!important;white-space:nowrap!important;position:relative}.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;background:linear-gradient(90deg,var(--sf-blue),var(--sf-cyan));transform:scaleX(0);transform-origin:left;transition:transform .24s ease}.nav-links a:hover{color:var(--sf-ink)!important}.nav-links a:hover::after{transform:scaleX(1)}
.btn,.btn-fox,.btn-outline,button[type=submit],.fire-gradient{border-radius:8px!important;font-weight:680!important;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease!important}.btn:hover,.btn-fox:hover,.btn-outline:hover,button[type=submit]:hover{transform:translateY(-2px)!important}.btn-fox,.fire-gradient,.bg-purple-600,.bg-purple-500{background:linear-gradient(135deg,var(--sf-blue),var(--sf-violet))!important;color:#fff!important;box-shadow:rgba(35,119,255,.28) 0 18px 38px -18px,rgba(50,50,93,.18) 0 8px 24px -16px!important;border:0!important}.btn-outline{background:rgba(255,255,255,.72)!important;border:1px solid rgba(35,119,255,.28)!important;color:var(--sf-blue)!important;box-shadow:0 10px 30px rgba(50,50,93,.08)!important}.fire-text,.heading-gradient{background:linear-gradient(135deg,var(--sf-blue),var(--sf-violet))!important;background-size:200% auto!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:var(--sf-blue)!important}
section,.sec,.sec-parchment,.sec-full,.compare,.metrics,.intake,footer{background:transparent!important;color:var(--sf-ink-2)!important}.sec-parchment{background:linear-gradient(180deg,#fff,var(--sf-wash))!important;border-color:var(--sf-line)!important}h1,h2,h3,.sec-title{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:var(--sf-ink)!important;letter-spacing:-.052em!important}.sec-title{font-weight:720!important;line-height:.98!important}.sec-sub,.subtitle,p,.t-text-secondary{color:var(--sf-slate)!important}.sec-label,.kicker,.saas-tag,.srv-price,.package-price,.proj-result,.blog-card .cat,.arena-chip{color:var(--sf-blue)!important;background:rgba(35,119,255,.08)!important}.tf-card,.revenue-card,.saas-card,.srv-visual,.package-card,.proj-card,.testimonial-card,.sidebar-card,.intake-form,.blog-card,.arena-item,.featured-tool,.tool-card,.dc-card,.card-hover,.feature-visual,.merge-box,.option-btn{background:rgba(255,255,255,.84)!important;border:1px solid var(--sf-line)!important;color:var(--sf-ink-2)!important;box-shadow:var(--sf-shadow)!important;backdrop-filter:blur(14px)!important}.tf-card:hover,.revenue-card:hover,.saas-card:hover,.proj-card:hover,.package-card:hover,.tool-card:hover,.featured-tool:hover,.card-hover:hover{transform:translateY(-7px)!important;border-color:rgba(35,119,255,.30)!important;box-shadow:var(--sf-shadow-hover)!important}.featured-tool.quiz,.featured-tool.roi{background:rgba(255,255,255,.86)!important;color:var(--sf-ink)!important}.featured-tool .ft-icon img{filter:none!important}
.hero{background:linear-gradient(135deg,#fff 0%,#F6F9FC 54%,#EFF7FF 100%)!important;border-bottom:1px solid var(--sf-line)!important}.hero::before{background:linear-gradient(115deg,rgba(35,119,255,.10),transparent 32%),radial-gradient(circle at 76% 18%,rgba(39,200,245,.20),transparent 24%),radial-gradient(circle at 22% 76%,rgba(200,107,31,.10),transparent 30%)!important}.reveal,.hero-copy.reveal,.flow-stage.reveal,.arena-map.reveal{opacity:1!important;transform:none!important}.flow-stage,.arena-map{background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(246,249,252,.70))!important;border:1px solid rgba(229,237,245,.96)!important;box-shadow:rgba(50,50,93,.16) 0 30px 80px -34px!important;overflow:hidden!important}.flow-stage::before,.arena-map::before{background:radial-gradient(circle at 30% 20%,rgba(35,119,255,.19),transparent 26%),radial-gradient(circle at 78% 72%,rgba(119,92,255,.15),transparent 30%),linear-gradient(90deg,transparent,rgba(35,119,255,.06),transparent)!important;animation:sfSweep 7s ease-in-out infinite}.flow-node,.stack-pill{background:rgba(255,255,255,.88)!important;border:1px solid rgba(35,119,255,.16)!important;color:var(--sf-ink)!important;box-shadow:0 18px 54px rgba(50,50,93,.12)!important}.flow-node small{color:var(--sf-slate)!important}.flow-core,.arena-core{background:radial-gradient(circle at 30% 20%,#fff,#DDF8FF 28%,#8FD9FF 52%,#1D4FD3 100%)!important;box-shadow:0 0 0 1px rgba(35,119,255,.22),0 34px 80px rgba(35,119,255,.28)!important}.flow-core img,.arena-core img{width:64%!important;height:64%!important;object-fit:contain!important;filter:drop-shadow(0 12px 20px rgba(7,27,49,.18))}.flow-line,.arena-line{background:linear-gradient(90deg,transparent,var(--sf-blue),var(--sf-cyan),transparent)!important;background-size:220px 100%;animation:flowLine 2.8s linear infinite!important}@keyframes sfSweep{0%,100%{transform:translateX(-3%)}50%{transform:translateX(3%)}}
/* Replacement for the screenshot's sparse floating pills: an intentional system map. */
.arena-map{position:relative}.arena-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:156px;height:156px;border-radius:36px;display:grid;place-items:center;z-index:3;animation:corePulse 4.8s ease-in-out infinite}.arena-ring{position:absolute;inset:54px;border:1px solid rgba(35,119,255,.12);border-radius:32px;z-index:1}.arena-line{position:absolute;height:2px;z-index:2;opacity:.68}.arena-line.a1{width:210px;left:120px;top:110px;transform:rotate(22deg)}.arena-line.a2{width:190px;right:112px;top:160px;transform:rotate(158deg)}.arena-line.a3{width:210px;left:122px;bottom:150px;transform:rotate(-18deg)}.arena-line.a4{width:178px;right:126px;bottom:114px;transform:rotate(205deg)}.arena-line.a5{width:150px;left:230px;bottom:88px;transform:rotate(25deg)}
@media(max-width:1100px){nav{padding:0 22px!important}.nav-links{gap:9px!important}.nav-links a{font-size:10.5px!important}nav>.btn-fox{padding:9px 14px!important;font-size:12px!important}}@media(max-width:720px){nav{height:58px!important;padding:0 20px!important}.nav-links{display:none!important;position:absolute;top:58px;left:0;right:0;flex-direction:column;background:rgba(255,255,255,.96)!important;padding:18px 20px!important;border-bottom:1px solid var(--sf-line)!important;gap:12px!important}.mobile-menu-btn{display:block!important}nav>.btn-fox{display:none!important}.hero-inner{grid-template-columns:1fr!important}.flow-stage,.arena-map{min-height:380px!important}.arena-core{width:124px;height:124px}.arena-line{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important}}

/* Sparrofox Framer-flow hero upgrade — Copper to Gold logo era */
:root{--sf-gold:#E5A434;--sf-copper-dark:#8A491E;--sf-electric:#1D4FD3;}
nav .logo img,.logo img{object-fit:contain!important;background:transparent!important;border-radius:11px!important;box-shadow:0 14px 30px rgba(229,164,52,.18),0 6px 18px rgba(35,119,255,.10)!important;}
.hero{position:relative!important;overflow:hidden!important;}
.hero::before{background:radial-gradient(circle at 14% 20%,rgba(229,164,52,.18),transparent 26%),radial-gradient(circle at 78% 18%,rgba(0,153,255,.20),transparent 24%),radial-gradient(circle at 58% 72%,rgba(138,73,30,.12),transparent 32%),linear-gradient(135deg,#fff 0%,#f8fbff 52%,#eef7ff 100%)!important;animation:sfHeroAurora 14s cubic-bezier(.45,0,.2,1) infinite alternate!important;}
.hero::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.0) 30%,rgba(255,255,255,.72) 47%,rgba(255,255,255,.0) 64%,transparent 100%),repeating-linear-gradient(90deg,rgba(7,27,49,.032) 0 1px,transparent 1px 116px),linear-gradient(180deg,transparent 62%,#fff 100%)!important;background-size:220% 100%,auto,auto!important;animation:sfHeroSheen 9s ease-in-out infinite!important;}
@keyframes sfHeroAurora{0%{transform:translate3d(-1.5%,1%,0) scale(1);filter:saturate(1)}100%{transform:translate3d(1.7%,-1.4%,0) scale(1.055);filter:saturate(1.18)}}
@keyframes sfHeroSheen{0%,22%{background-position:-140% 0,0 0,0 0}58%,100%{background-position:160% 0,0 0,0 0}}
.sf-hero-wordmark{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:8px 12px 8px 8px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(229,164,52,.28);box-shadow:0 20px 48px rgba(50,50,93,.10);backdrop-filter:blur(18px);font-family:var(--mono,ui-monospace);font-size:11px;font-weight:700;letter-spacing:.04em;color:#36506b;text-transform:uppercase;}
.sf-hero-wordmark img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(138,73,30,.22));animation:sfLogoFloat 4.8s ease-in-out infinite;}
@keyframes sfLogoFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1.5deg)}}
.sf-framer-stage{perspective:1200px;transform-style:preserve-3d;}
.sf-framer-stage::after{content:'';position:absolute;inset:-30%;background:conic-gradient(from 20deg,transparent,rgba(0,153,255,.12),transparent,rgba(229,164,52,.14),transparent);filter:blur(30px);animation:sfSpinGlow 18s linear infinite;opacity:.82;}
@keyframes sfSpinGlow{to{transform:rotate(360deg)}}
.sf-grid-glow{position:absolute;inset:0;background-image:linear-gradient(rgba(35,119,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(35,119,255,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at center,#000 0%,transparent 72%);animation:sfGridFlow 10s linear infinite;z-index:0;}
@keyframes sfGridFlow{to{background-position:44px 44px}}
.sf-flow-ribbon{position:absolute;left:-18%;right:-18%;height:118px;border-radius:999px;filter:blur(.3px);opacity:.74;z-index:1;mix-blend-mode:multiply;transform-origin:center;}
.sf-flow-ribbon.r1{top:16%;background:linear-gradient(90deg,transparent,rgba(0,153,255,.0),rgba(0,153,255,.28),rgba(39,200,245,.38),transparent);transform:rotate(-12deg);animation:sfRibbon 7s ease-in-out infinite;}
.sf-flow-ribbon.r2{top:46%;background:linear-gradient(90deg,transparent,rgba(229,164,52,.0),rgba(229,164,52,.30),rgba(138,73,30,.20),transparent);transform:rotate(10deg);animation:sfRibbon 8.4s ease-in-out infinite reverse;}
.sf-flow-ribbon.r3{bottom:12%;background:linear-gradient(90deg,transparent,rgba(119,92,255,.0),rgba(119,92,255,.20),rgba(0,153,255,.25),transparent);transform:rotate(-5deg);animation:sfRibbon 9.2s ease-in-out infinite;}
@keyframes sfRibbon{0%,100%{translate:-4% 0;opacity:.42}50%{translate:5% -8px;opacity:.92}}
.flow-core,.arena-core{z-index:6!important;background:radial-gradient(circle at 34% 24%,#fff 0%,#fff8e8 20%,#f2c15e 45%,#b36a2c 72%,#183458 100%)!important;box-shadow:0 0 0 1px rgba(229,164,52,.34),0 34px 82px rgba(229,164,52,.30),0 18px 70px rgba(35,119,255,.18)!important;}
.flow-core img,.arena-core img{width:68%!important;height:68%!important;object-fit:contain!important;filter:drop-shadow(0 16px 22px rgba(60,35,15,.18))!important;animation:sfLogoFloat 5.4s ease-in-out infinite!important;}
.flow-node,.stack-pill{z-index:7!important;border-color:rgba(229,164,52,.24)!important;box-shadow:0 24px 68px rgba(50,50,93,.16),0 10px 28px rgba(229,164,52,.10)!important;}
.flow-line,.arena-line{z-index:4!important;background:linear-gradient(90deg,transparent,var(--sf-gold),var(--sf-electric),var(--sf-cyan),transparent)!important;background-size:260px 100%!important;animation:sfEnergyLine 2.25s linear infinite!important;}
@keyframes sfEnergyLine{0%{background-position:-260px 0;opacity:.18}45%{opacity:1}100%{background-position:260px 0;opacity:.22}}
.orbit-2{inset:86px!important;border-radius:38px!important;transform:rotate(12deg);animation:sfOrbitBreathe 6.5s ease-in-out infinite;}
@keyframes sfOrbitBreathe{0%,100%{opacity:.28;transform:scale(.98) rotate(12deg)}50%{opacity:.8;transform:scale(1.025) rotate(15deg)}}
.sf-signal-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--sf-gold);box-shadow:0 0 0 6px rgba(229,164,52,.12),0 0 22px rgba(229,164,52,.72);z-index:8;animation:sfSignal 3.4s ease-in-out infinite;}
.sf-signal-dot.d1{left:23%;top:20%}.sf-signal-dot.d2{right:24%;top:35%;animation-delay:-.8s}.sf-signal-dot.d3{left:28%;bottom:27%;animation-delay:-1.6s}.sf-signal-dot.d4{right:30%;bottom:18%;animation-delay:-2.4s}
@keyframes sfSignal{0%,100%{transform:scale(.7);opacity:.35}45%{transform:scale(1.24);opacity:1}}
.hero-title{filter:drop-shadow(0 24px 42px rgba(50,50,93,.07));}
.hero-title .blue{background:linear-gradient(100deg,#1D4FD3,#00A4FF 38%,#E5A434 78%,#8A491E)!important;background-size:220% auto!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;animation:sfTextFlow 7s ease-in-out infinite!important;}
@keyframes sfTextFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-proof span,.tool-card,.featured-tool,.revenue-card,.saas-card,.package-card,.arena-item{transition:transform .36s cubic-bezier(.2,.8,.2,1),box-shadow .36s cubic-bezier(.2,.8,.2,1),border-color .36s!important;}
.hero-proof span:hover,.tool-card:hover,.featured-tool:hover,.revenue-card:hover,.saas-card:hover,.package-card:hover,.arena-item:hover{transform:translateY(-8px)!important;}
.hero-bg,.project-hero,.result-hero{position:relative;overflow:hidden;}
.hero-bg::before,.project-hero::before,.result-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 16% 18%,rgba(229,164,52,.16),transparent 28%),radial-gradient(circle at 84% 22%,rgba(0,153,255,.16),transparent 26%),linear-gradient(120deg,transparent 30%,rgba(255,255,255,.42) 48%,transparent 66%);background-size:auto,auto,220% 100%;animation:sfHeroSheen 9s ease-in-out infinite;z-index:0;}
.hero-bg>* ,.project-hero>* ,.result-hero>*{position:relative;z-index:1;}
@media(max-width:720px){.sf-flow-ribbon{height:72px}.sf-signal-dot{display:none}.sf-hero-wordmark{font-size:9.5px}.hero::after{animation:none!important}}
@media(prefers-reduced-motion:reduce){.sf-flow-ribbon,.sf-grid-glow,.sf-framer-stage::after,.sf-signal-dot,.hero::before,.hero::after,.sf-hero-wordmark img,.flow-core img,.arena-core img,.hero-title .blue{animation:none!important}}

/* Framer-flow tightening pass: make motion field visible and logo unmistakably copper-gold */
nav .logo img,.logo img{width:40px!important;height:40px!important;padding:2px!important;filter:drop-shadow(0 7px 14px rgba(138,73,30,.22))!important;}
.sf-hero-wordmark img{width:34px!important;height:34px!important;}
.sf-framer-stage{background:radial-gradient(circle at 32% 20%,rgba(255,255,255,.96),rgba(246,249,252,.72) 24%,rgba(234,244,255,.82) 46%,rgba(10,27,52,.94) 100%)!important;border-color:rgba(229,164,52,.34)!important;box-shadow:0 40px 100px rgba(7,27,49,.18),0 22px 90px rgba(0,153,255,.16),inset 0 1px rgba(255,255,255,.9)!important;}
.sf-framer-stage::before{content:''!important;position:absolute!important;inset:-1px!important;background:radial-gradient(circle at 34% 24%,rgba(229,164,52,.28),transparent 22%),radial-gradient(circle at 74% 32%,rgba(0,153,255,.30),transparent 28%),linear-gradient(135deg,rgba(255,255,255,.64),rgba(255,255,255,0) 45%,rgba(0,153,255,.10))!important;z-index:0!important;animation:sfHeroAurora 10s ease-in-out infinite alternate!important;}
.sf-framer-stage::after{z-index:2!important;opacity:.95!important;mix-blend-mode:screen!important;}
.sf-flow-ribbon{height:160px!important;opacity:.92!important;filter:blur(0)!important;mix-blend-mode:screen!important;z-index:3!important;}
.sf-flow-ribbon.r1{top:8%!important;background:linear-gradient(90deg,transparent 0%,rgba(0,153,255,.06) 18%,rgba(0,153,255,.72) 43%,rgba(39,200,245,.80) 55%,transparent 82%)!important;animation-duration:5.8s!important;}
.sf-flow-ribbon.r2{top:41%!important;background:linear-gradient(90deg,transparent 0%,rgba(229,164,52,.02) 14%,rgba(229,164,52,.76) 43%,rgba(138,73,30,.62) 58%,transparent 84%)!important;animation-duration:6.6s!important;}
.sf-flow-ribbon.r3{bottom:5%!important;background:linear-gradient(90deg,transparent 0%,rgba(119,92,255,.06) 16%,rgba(119,92,255,.55) 40%,rgba(0,153,255,.62) 58%,transparent 84%)!important;animation-duration:7.4s!important;}
.sf-grid-glow{z-index:1!important;opacity:.75!important;}
.flow-core{width:214px!important;height:214px!important;border-radius:52px!important;background:rgba(255,255,255,.92)!important;border:1px solid rgba(229,164,52,.30)!important;box-shadow:0 0 0 10px rgba(255,255,255,.22),0 34px 90px rgba(229,164,52,.30),0 22px 86px rgba(0,153,255,.22)!important;backdrop-filter:blur(18px)!important;}
.flow-core img{width:78%!important;height:78%!important;filter:drop-shadow(0 18px 22px rgba(138,73,30,.22)) saturate(1.22) contrast(1.08)!important;}
.arena-core{background:rgba(255,255,255,.92)!important;border:1px solid rgba(229,164,52,.30)!important;}
.arena-core img{filter:drop-shadow(0 18px 22px rgba(138,73,30,.22)) saturate(1.22) contrast(1.08)!important;}
.flow-node,.stack-pill{background:rgba(255,255,255,.88)!important;color:#071B31!important;z-index:8!important;backdrop-filter:blur(18px)!important;}
.flow-node small{color:#516780!important;}
.flow-line{height:3px!important;z-index:5!important;filter:drop-shadow(0 0 12px rgba(0,153,255,.55)) drop-shadow(0 0 10px rgba(229,164,52,.36));}
.sf-signal-dot{z-index:9!important;width:11px!important;height:11px!important;}
.hero-inner{position:relative;z-index:3!important;}
@media(max-width:640px){.flow-core{width:148px!important;height:148px!important}.sf-flow-ribbon{height:92px!important}}

/* ShopKeeper 2026-06-27: keep long desktop nav from clipping before mobile breakpoint. */
@media (max-width: 1280px) and (min-width: 769px) {
  nav { padding-left: 24px !important; padding-right: 24px !important; }
  .nav-links { gap: 14px !important; }
  .nav-links a, .nav-links li a { font-size: 12px !important; letter-spacing: 0 !important; }
  .btn-fox { padding: 9px 14px !important; white-space: nowrap !important; }
}
@media (max-width: 1120px) and (min-width: 769px) {
  .nav-links li:nth-last-child(-n+2) { display: none !important; }
}