/* ==========================================================================
   FasterOps shared design system
   Used by the master hub (/index.html) and every tool page (/tools/<slug>/index.html).
   Page-specific visuals (mockups, charts, illustrations) stay local to each page.
   ========================================================================== */

:root{
  --ink:#0E1620;
  --paper:#F7F8F6;
  --paper-dim:#E7EAE4;
  --blue:#2C679E;
  --blue-deep:#153A5C;
  --orange:#E76518;
  --gold:#E8A93D;
  --gold-deep:#B87F1B;
  --gold-light:#FFE8B3;
  --slate:#3D4A54;
  --line:#C3CBCD;
  --white:#FFFFFF;
  --radius:10px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,.display{
  font-family:'Outfit',sans-serif;
  color:var(--ink);
  margin:0;
  letter-spacing:-0.01em;
  text-wrap:balance;
}
a{color:inherit;}
img{max-width:100%;}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}

a:focus-visible, button:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(217,236,252,0.94) 0%, rgba(247,248,246,0.94) 100%);
  backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--ink);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px;}
.brand{display:flex; align-items:center; text-decoration:none; gap:0;}
.brand-logo{height:46px; width:auto; display:block;}
.brand-logo--footer{height:38px;}
.navlinks{display:flex; align-items:center; gap:32px; font-size:15px; font-weight:500;}
.navlinks a{text-decoration:none; color:var(--slate); transition:color .15s var(--ease-out), text-shadow .15s var(--ease-out);}
.navlinks a:hover{color:var(--orange); text-shadow:0 0 14px rgba(231,101,24,0.65);}

/* ---------- nav tools dropdown ---------- */
.nav-dropdown{position:relative;}
.nav-dropdown-trigger{display:inline-flex; align-items:center; gap:5px;}
.nav-dropdown-trigger svg{width:11px; height:11px; transition:transform .15s var(--ease-out);}
.nav-dropdown:hover .nav-dropdown-trigger svg,
.nav-dropdown:focus-within .nav-dropdown-trigger svg{transform:rotate(180deg);}
.nav-dropdown-panel{
  position:absolute; top:100%; left:50%; margin-top:14px;
  transform:translateX(-50%) translateY(4px);
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 20px 40px -16px rgba(14,22,32,0.3);
  padding:8px; min-width:250px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s var(--ease-out), transform .15s var(--ease-out), visibility .15s;
  z-index:60;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav-dropdown-panel a{
  display:block; padding:10px 12px; border-radius:7px;
  font-size:14.5px; font-weight:500; color:var(--slate); text-decoration:none;
  transition:background .12s var(--ease-out), color .12s var(--ease-out);
}
.nav-dropdown-panel a:hover{background:var(--paper-dim); color:var(--orange); text-shadow:none;}
.navcta{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(155deg, #F5C563 0%, var(--gold) 46%, var(--gold-deep) 100%);
  color:var(--ink);
  padding:10px 18px; border-radius:8px; font-size:14px; font-weight:700;
  text-decoration:none; border:none; cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 8px 18px -8px rgba(184,127,27,0.55);
  transition:transform .15s var(--ease-out), filter .15s var(--ease-out);
}
.navcta:hover{filter:brightness(1.05); transform:translateY(-1px);}
@media(max-width:760px){ .navlinks{display:none;} }

/* ---------- HERO (dark band shared by every page) ---------- */
.hero{
  padding:96px 0 0;
  background:
    radial-gradient(ellipse 900px 500px at 78% -10%, rgba(232,169,61,0.22), transparent 60%),
    linear-gradient(180deg, #0E1620 0%, #101B27 100%);
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(231,101,24,0.55), transparent);
}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center; padding-bottom:96px;}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:48px;} }
.hero-logo{height:64px; width:auto; display:block; margin-bottom:28px;}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:#BFE0FF;
  background:rgba(59,158,255,0.16); border:1px solid rgba(59,158,255,0.45);
  padding:7px 14px; border-radius:20px; margin-bottom:26px;
  letter-spacing:0.01em;
}
.kicker svg{width:20px; height:20px; flex:none;}
.hero h1{font-size:54px; line-height:1.08; font-weight:700; max-width:13ch; color:var(--white);}
@media(max-width:640px){ .hero h1{font-size:34px;} }
.hero .sub{margin-top:24px; font-size:18px; color:#AAB6BE; max-width:46ch;}
.hero-ctas{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
.hero .btn-secondary{border-color:rgba(255,255,255,0.28); color:var(--white);}
.hero .btn-secondary:hover{background:rgba(255,255,255,0.08); color:var(--white); border-color:rgba(255,255,255,0.5);}
.proof-line{margin-top:36px; font-size:13.5px; color:#8B98A3;}
.proof-line b{color:var(--white); font-weight:600;}

.trust-bar{
  border-top:1px solid rgba(255,255,255,0.08); padding:26px 0;
  background:linear-gradient(180deg, rgba(231,101,24,0.14) 0%, rgba(231,101,24,0.03) 100%);
}
.trust-row{display:grid; grid-template-columns:repeat(3,1fr); align-items:center;}
.trust-item{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:0 32px; border-right:1px solid rgba(255,255,255,0.12); text-align:center;}
.trust-item:first-child{padding-left:0;}
.trust-item:last-child{border-right:none;}
.trust-item b{color:#FF9257; font-weight:600; font-family:'Outfit',sans-serif; font-size:14.5px;}
.trust-icon{width:34px; height:34px; flex:none; color:var(--white);}
@media(max-width:700px){ .trust-row{grid-template-columns:1fr;} .trust-item{border-right:none; padding:14px 0;} }

/* ---------- hero variant: centered, no side visual (used by the hub and lighter tool pages) ---------- */
.hero-center{max-width:740px; margin:0 auto; text-align:center; padding-bottom:88px;}
.hero-center .kicker{margin-left:auto; margin-right:auto;}
.hero-center h1{max-width:none; margin:0 auto;}
.hero-center .sub{margin-left:auto; margin-right:auto;}
.hero-center .hero-ctas{justify-content:center;}
.hero-center .proof-line{max-width:52ch; margin-left:auto; margin-right:auto;}

/* ---------- BUTTONS ---------- */
.btn-primary{
  position:relative;
  background:linear-gradient(155deg, #F5C563 0%, var(--gold) 46%, var(--gold-deep) 100%);
  color:var(--ink); font-weight:700; font-size:15.5px;
  padding:14px 26px; border-radius:9px; text-decoration:none; border:none; cursor:pointer;
  display:inline-block;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 10px 24px -10px rgba(184,127,27,0.65);
  transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-out), filter .15s var(--ease-out);
}
.btn-primary:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 14px 30px -10px rgba(184,127,27,0.75);
}
.btn-primary:active{transform:translateY(0);}
.btn-secondary{
  background:transparent; color:var(--ink); font-weight:700; font-size:15.5px;
  padding:13.5px 21.5px; border-radius:9px; text-decoration:none;
  border:1.5px solid var(--ink); display:inline-block;
  transition:background .15s var(--ease-out), color .15s var(--ease-out), transform .15s var(--ease-out);
}
.btn-secondary:hover{background:var(--ink); color:var(--white); transform:translateY(-1px);}

/* ---------- SECTION SHARED ---------- */
section{padding:108px 0;}
.section-head{max-width:56ch; margin-bottom:56px;}
.eyebrow{font-size:14px; font-weight:700; color:var(--orange); margin-bottom:12px;}
.section-head h2{font-size:34px; font-weight:800; line-height:1.15;}
@media(max-width:640px){ .section-head h2{font-size:27px;} }
.section-head p{margin-top:14px; font-size:16.5px; color:var(--slate);}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------- dark section wrapper (used for problem/pain sections across pages) ---------- */
.problem{background:var(--ink); color:var(--paper);}
.problem .eyebrow{color:#FF9257;}
.problem .section-head h2{color:var(--white);}
.problem .section-head p{color:#AEB9C2;}

/* ---------- 3-col strip (problem / outcomes / who-it's-for) ---------- */
.strip{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media(max-width:800px){ .strip{grid-template-columns:1fr;} }
.strip-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px;}
.strip-card .num{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--orange); font-weight:600; margin-bottom:12px; display:block;}
.strip-card h3{font-size:18px; margin-bottom:8px;}
.strip-card p{font-size:15px; color:var(--slate); margin:0;}
.strip.dark .strip-card{background:#16212D; border-color:#2B3947;}
.strip.dark .strip-card h3{color:var(--white);}
.strip.dark .strip-card p{color:#AEB9C2;}

/* ---------- HOW IT WORKS (numbered steps) ---------- */
.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-radius:14px; overflow:hidden; background:var(--white);
  box-shadow:
    0 0 0 1.5px var(--ink),
    0 0 0 7px var(--paper),
    0 0 0 8px var(--line),
    0 16px 36px -18px rgba(14,22,32,0.25);
}
.steps.cols-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:800px){ .steps{grid-template-columns:1fr;} }
.step{padding:34px 30px; position:relative;}
.step + .step{border-left:1px solid var(--line);}
@media(max-width:800px){ .step + .step{border-left:none; border-top:1px solid var(--line);} }
.step-num{
  font-family:'Outfit',sans-serif; font-weight:800; font-size:14px;
  color:var(--blue); border:1.5px solid #C7D8E4; background:#EEF4F9;
  width:28px; height:28px; border-radius:7px;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.step h3{font-size:18.5px; margin-bottom:10px;}
.step p{font-size:15px; color:var(--slate); margin:0;}
.step-arrow{
  display:none; position:absolute; right:-13px; top:38px; z-index:2;
  width:26px; height:26px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line);
  align-items:center; justify-content:center;
}
@media(min-width:801px){ .step-arrow{display:flex;} }
.step-arrow--brand{background:var(--paper-dim); border-color:var(--orange); box-shadow:0 0 10px rgba(231,101,24,0.35); top:50%; transform:translateY(-50%);}

/* ---------- CHECKLIST ---------- */
.checklist{display:flex; flex-direction:column; gap:14px;}
.checklist li{list-style:none; display:flex; gap:12px; align-items:flex-start; font-size:15px;}
.checklist svg{flex:none; margin-top:2px; width:18px; height:18px; color:var(--blue);}

/* ---------- OUTCOME CARDS (hub outcomes section: big-stat or bar-chart proof) ---------- */
.outcome-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
@media(max-width:800px){ .outcome-grid{grid-template-columns:1fr;} }
.outcome-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px 26px 24px; display:flex; flex-direction:column; justify-content:center; gap:18px; text-align:center;}
.outcome-card .tool-tag{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--blue); text-transform:uppercase; letter-spacing:0.03em; display:block;}

.big-stat{display:flex; flex-direction:column; gap:4px;}
.big-stat-num{font-family:'Outfit',sans-serif; font-weight:900; font-size:58px; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-0.01em;}
.big-stat-num .unit{font-size:20px; font-weight:700; color:var(--slate); margin-left:2px;}
.big-stat-label{font-size:14.5px; color:var(--slate); margin:0;}

.bar-compare-label{font-size:14.5px; color:var(--slate); margin:0;}
.bar-compare-vertical{display:flex; align-items:flex-end; justify-content:center; gap:28px; padding-top:8px;}
.bar-compare-footer{display:flex; flex-direction:column; gap:6px;}
.vbar-col{display:flex; flex-direction:column; align-items:center; gap:8px; flex:1;}
.vbar-value{font-family:'Outfit',sans-serif; font-weight:900; font-size:20px; color:var(--ink);}
.vbar-track{width:100%; max-width:56px; height:90px; background:var(--paper-dim); border-radius:6px 6px 0 0; display:flex; align-items:flex-end; overflow:hidden; position:relative;}
.vbar-value--inside{position:absolute; top:8px; left:50%; transform:translateX(-50%); font-size:15px;}
.vbar-value--on-fill{position:absolute; top:8px; left:50%; transform:translateX(-50%); font-size:15px; color:var(--white);}
.vbar-fill{width:100%; border-radius:6px 6px 0 0; position:relative;}
.vbar-fill.after{background:var(--orange);}
.vbar-fill.before{background:#AEB9C2;}
.vbar-logo{position:absolute; top:48px; left:50%; transform:translateX(-50%); width:22.1px; height:auto;}
.vbar-label{font-size:12.5px; color:var(--slate); font-weight:600;}

.outcome-caption{font-size:14px; color:var(--slate); margin:0; line-height:1.5;}
.outcome-caption a.source-info,
.big-stat-label a.source-info,
.bar-compare-label a.source-info{
  display:inline-flex; vertical-align:-3px; margin-left:4px;
  color:var(--blue); transition:color .15s var(--ease-out);
}
.outcome-caption a.source-info svg,
.big-stat-label a.source-info svg,
.bar-compare-label a.source-info svg{width:16px; height:16px;}
.outcome-caption a.source-info:hover,
.big-stat-label a.source-info:hover,
.bar-compare-label a.source-info:hover{color:var(--blue-deep);}

/* ---------- PROOF CALLOUT (outcome section, real cited stat) ---------- */
.proof-callout{
  background:var(--paper-dim); border-left:3px solid var(--orange); border-radius:8px;
  padding:22px 26px; margin-top:8px;
}
.proof-callout p{font-size:15px; color:var(--slate); margin:0; line-height:1.55;}
.proof-callout a{color:var(--blue); font-weight:600; text-decoration:underline; white-space:nowrap;}

/* ---------- PRICING CARD ---------- */
.pricing-card{
  background:var(--white); border:1.5px solid var(--ink); border-radius:14px;
  padding:32px 30px;
  box-shadow:0 20px 44px -24px rgba(14,22,32,0.35);
}
.pricing-card .plan-name{font-size:13px; font-weight:700; color:var(--orange); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px;}
.pricing-row{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--line);}
.pricing-row:first-of-type{border-top:none;}
.pricing-row .label{font-size:15px; color:var(--slate);}
.pricing-row .amount{font-family:'Outfit',sans-serif; font-weight:700; font-size:18px; white-space:nowrap;}
.pricing-note{font-size:13px; color:var(--slate); margin-top:16px;}

/* ---------- CTA BAND ---------- */
.cta-band{
  background:linear-gradient(155deg, #16212D 0%, var(--ink) 60%); color:var(--white); border-radius:20px;
  padding:56px 48px; display:flex; justify-content:space-between; align-items:center; gap:40px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 0 0 7px rgba(0,0,0,0.15),
    inset 0 0 0 8px rgba(255,255,255,0.04),
    0 30px 60px -30px rgba(0,0,0,0.5);
}
@media(max-width:760px){ .cta-band{flex-direction:column; align-items:flex-start; padding:40px 28px;} }
.cta-band h2{font-size:28px; font-weight:700; color:var(--white); max-width:18ch; line-height:1.2;}
.cta-band .sub2{color:#AEB9C2; margin-top:10px; font-size:15px;}
/* ---------- FOOTER ---------- */
footer{padding:52px 0 40px; border-top:1px solid var(--line); background:linear-gradient(180deg, var(--paper) 0%, #EAF4FF 100%);}
.foot-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.foot-links{display:flex; gap:26px; font-size:14px; color:var(--slate); flex-wrap:wrap;}
.foot-links a{text-decoration:none; transition:color .15s var(--ease-out), text-shadow .15s var(--ease-out);}
.foot-links a:hover{color:var(--orange); text-shadow:0 0 14px rgba(231,101,24,0.65);}
.foot-note{font-size:13px; color:#96A2AB; margin-top:18px;}

/* ---------- TOOL GRID (hub page: cards linking to each tool) ---------- */
.tool-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media(max-width:980px){ .tool-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .tool-grid{grid-template-columns:1fr;} }
.tool-card{
  background:linear-gradient(155deg, rgba(231,101,24,0.22) 0%, var(--white) 58%); border:1px solid var(--line); border-radius:var(--radius);
  border-top:3px solid var(--orange);
  padding:26px 24px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px;
  transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-out), border-color .15s var(--ease-out);
}
.tool-card:hover{transform:translateY(-2px); box-shadow:0 16px 32px -18px rgba(14,22,32,0.3); border-color:var(--orange);}
.tool-name-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.tool-card .tool-name{font-family:'Outfit',sans-serif; font-weight:800; font-size:19px;}
.tool-card p{font-size:14.5px; color:var(--slate); margin:0; flex-grow:1;}
.tool-more-icon{width:18.4px; height:auto; flex:none; transition:transform .15s var(--ease-out);}
.tool-card:hover .tool-more-icon{transform:translateX(3px);}

/* ---------- MOTION (on-load / on-scroll reveal, added by assets/motion.js) ---------- */
.reveal{opacity:0; transform:translateY(16px); transition-delay:0ms;}
.reveal.is-visible{animation:revealUp .7s var(--ease-out) both;}
@keyframes revealUp{
  0%{opacity:0; transform:translateY(16px); filter:drop-shadow(0 0 0 rgba(232,169,61,0));}
  55%{filter:drop-shadow(0 0 14px rgba(232,169,61,0.22));}
  100%{opacity:1; transform:translateY(0); filter:drop-shadow(0 0 0 rgba(232,169,61,0));}
}