/* ==========================================================================
   AgencyFix Design System  (afx.css)
   Scoped to .afx — loads site-wide via SEO Rank Publisher.
   Mobile-first; expands to a wide, full-bleed layout on tablet/desktop.
   Every page (home, service, blog, case study) inherits these tokens
   and components, so design decisions live in ONE place.
   ========================================================================== */

.afx{
  /* color */
  --ink:#0a0c10; --ink2:#1a1f29; --paper:#fff; --soft:#f6f8fc; --soft2:#eef1f8;
  --muted:#5d6573; --muted2:#8b94a3; --line:#e7eaf1;
  --ac:#6366f1; --ac-d:#4f46e5; --ac2:#22d3ee; --ac3:#a855f7;
  --glow:rgba(99,102,241,.45); --ok:#059669; --ok2:#34d399;
  /* radius */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px;
  /* layout */
  --container:1320px; --wide:1440px; --narrow:760px;
  --gutter:clamp(20px,5vw,64px);
  /* spacing rhythm */
  --sp-section:clamp(76px,9vw,150px);
  --sp-head-copy:clamp(18px,2.4vw,34px);
  --sp-copy-cta:clamp(18px,2vw,30px);
  --sp-stack:clamp(14px,1.6vw,22px);
  --sp-head-block:clamp(40px,5vw,68px);
  /* elevation */
  --shadow-card:0 22px 50px -28px rgba(13,16,23,.28);
  --shadow-pop:0 40px 80px -28px rgba(13,16,23,.5);

  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.afx *{box-sizing:border-box;margin:0;}
.afx img{max-width:100%;display:block;}
.afx a{text-decoration:none;color:inherit;}

/* ---- container + section rhythm ---- */
.afx .wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter);}
.afx .wrap.wide{max-width:var(--wide);}
.afx .wrap.narrow{max-width:var(--narrow);}
.afx section{position:relative;padding-block:var(--sp-section);}
.afx .sec-soft{background:var(--soft);}
.afx .sec-soft2{background:var(--soft2);}
.afx .sec-line{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.afx .sec-dark{background:linear-gradient(180deg,#0e1219,#0a0c10);color:#fff;}
.afx .sec-dark h1,.afx .sec-dark h2,.afx .sec-dark h3,.afx .sec-dark blockquote{color:#fff;}

/* ---- type ---- */
.afx h1,.afx h2,.afx h3{line-height:1.08;letter-spacing:-.025em;font-weight:800;}
.afx h1{font-size:clamp(2.3rem,5.4vw,3.9rem);}
.afx h2{font-size:clamp(1.9rem,4.2vw,2.85rem);}
.afx h3{font-size:1.12rem;font-weight:700;letter-spacing:-.012em;}
.afx p{font-size:1.0625rem;}
.afx .lead{font-size:clamp(1.06rem,1.6vw,1.28rem);color:var(--ink2);line-height:1.55;}
.afx .sec-dark .lead{color:#aab2c0;}

/* ---- eyebrow ---- */
.afx .eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.75rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ac);}
.afx .eyebrow::before{content:"";width:20px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--ac),var(--ac2));}
.afx .sec-dark .eyebrow{color:var(--ac2);}

/* ---- section head block (eyebrow -> headline -> copy) ---- */
.afx .head{max-width:720px;margin-bottom:var(--sp-head-block);}
.afx .head .eyebrow{margin-bottom:var(--sp-stack);}
.afx .head h2{margin:0;}
.afx .head p{margin-top:var(--sp-head-copy);color:var(--muted);font-size:clamp(1.02rem,1.4vw,1.15rem);}
.afx .sec-dark .head p{color:#aab2c0;}

/* ---- buttons ---- */
.afx .btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;border-radius:12px;
  padding:.85rem 1.45rem;font-size:1rem;line-height:1;cursor:pointer;border:1px solid transparent;
  transition:transform .15s,box-shadow .15s,border-color .15s,background .15s,color .15s;}
.afx .btn:focus-visible{outline:3px solid var(--ac2);outline-offset:2px;}
.afx .btn-primary{background:linear-gradient(135deg,var(--ac),var(--ac-d));color:#fff;
  box-shadow:0 12px 30px -10px var(--glow);}
.afx .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px -10px var(--glow);}
.afx .btn-primary:active{transform:translateY(0);}
.afx .btn-light{border-color:var(--line);background:#fff;color:var(--ink);}
.afx .btn-light:hover{border-color:var(--ac);color:var(--ac);transform:translateY(-2px);}
.afx .sec-dark .btn-light{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff;}
.afx .sec-dark .btn-light:hover{border-color:var(--ac2);color:var(--ac2);}
.afx .btn-white{background:#fff;color:var(--ink);box-shadow:0 14px 40px -10px rgba(0,0,0,.4);}
.afx .btn-white:hover{transform:translateY(-2px);}
.afx .btn-ghost-light{border-color:rgba(255,255,255,.45);color:#fff;background:transparent;}
.afx .btn-ghost-light:hover{background:rgba(255,255,255,.14);transform:translateY(-2px);}
.afx .btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--sp-copy-cta);}

/* ---- pills / tags (interactive) ---- */
.afx .pills{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:clamp(20px,2.5vw,30px);}
.afx .pill{display:inline-flex;align-items:center;font-size:.86rem;font-weight:500;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:.42rem .9rem;background:#fff;cursor:pointer;
  transition:transform .15s,border-color .15s,color .15s,box-shadow .15s,background .15s;}
.afx .pill:hover{color:var(--ac);border-color:var(--ac);transform:translateY(-2px);box-shadow:0 10px 22px -12px var(--glow);}
.afx .pill:focus-visible{outline:3px solid var(--ac2);outline-offset:2px;}
.afx .sec-dark .pill{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#dfe4ee;}
.afx .sec-dark .pill:hover{border-color:var(--ac2);color:#fff;background:rgba(34,211,238,.1);}

/* ---- grids + cards ---- */
.afx .grid{display:grid;gap:clamp(16px,1.7vw,26px);}
.afx .g-2{grid-template-columns:1fr;}
.afx .g-3{grid-template-columns:1fr;}
.afx .g-4{grid-template-columns:1fr;}
@media(min-width:640px){.afx .g-4{grid-template-columns:1fr 1fr;}}
@media(min-width:680px){.afx .g-2{grid-template-columns:1fr 1fr;}.afx .g-3{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.afx .g-3{grid-template-columns:repeat(3,1fr);}.afx .g-4{grid-template-columns:repeat(4,1fr);}}
.afx .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.2rem,2vw,1.6rem);}
.afx .sec-dark .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);}
.afx a.card,.afx .card-link{display:flex;flex-direction:column;
  transition:transform .16s,box-shadow .16s,border-color .16s;}
.afx a.card:hover,.afx .card-link:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:#dde0ea;}
.afx a.card:focus-visible{outline:3px solid var(--ac2);outline-offset:3px;}

/* ---- split (two-column) ---- */
.afx .split{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center;}
@media(min-width:920px){
  .afx .split{grid-template-columns:1fr 1fr;}
  .afx .split.rev>*:first-child{order:2;}
  .afx .split.hero-split{grid-template-columns:1.05fr .95fr;}
}

/* ---- CTA block ---- */
.afx .ctablock{position:relative;border-radius:var(--r-xl);overflow:hidden;color:#fff;text-align:center;
  background:linear-gradient(120deg,var(--ac-d),var(--ac) 42%,var(--ac2) 130%);background-size:200% 200%;
  animation:afxGrad 9s linear infinite alternate;padding:clamp(2.6rem,5vw,4.4rem) clamp(1.4rem,4vw,3rem);}
.afx .ctablock h2{color:#fff;max-width:780px;margin:0 auto;}
.afx .ctablock p{color:rgba(255,255,255,.94);margin:var(--sp-head-copy) auto 0;max-width:600px;font-size:clamp(1.05rem,1.5vw,1.2rem);}
.afx .ctablock .btn-row{justify-content:center;margin-top:var(--sp-copy-cta);}
@media(prefers-reduced-motion:reduce){.afx .ctablock{animation:none;}}

/* ---- header / nav ---- */
.afx .hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.afx .hdr .row{display:flex;align-items:center;gap:1.1rem;padding:.65rem 0;}
.afx .brand img{height:32px;width:auto;}
.afx .nav{display:none;align-items:center;gap:1.3rem;margin-left:.4rem;}
@media(min-width:1000px){.afx .nav{display:flex;}}
.afx .nav>a{color:var(--ink2);font-weight:500;font-size:.95rem;padding:.3rem 0;transition:color .15s;}
.afx .nav>a:hover{color:var(--ac);}
.afx .has-menu{position:relative;}
.afx .has-menu>button{display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;
  font:inherit;font-weight:500;font-size:.95rem;color:var(--ink2);cursor:pointer;padding:.3rem 0;}
.afx .has-menu>button:hover{color:var(--ac);}
.afx .has-menu>button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;}
.afx .menu{position:absolute;top:calc(100% + .55rem);left:0;min-width:236px;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.16s;}
.afx .has-menu:hover .menu,.afx .has-menu:focus-within .menu{opacity:1;visibility:visible;transform:none;}
.afx .menu a{display:block;padding:.55rem .7rem;border-radius:9px;font-size:.92rem;color:var(--ink2);}
.afx .menu a:hover{background:var(--soft);color:var(--ac);}
.afx .hdr .spacer{margin-left:auto;}
.afx .hdr .cta-btn{display:none;}
@media(min-width:560px){.afx .hdr .cta-btn{display:inline-flex;}}
.afx .burger{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;}
@media(min-width:1000px){.afx .burger{display:none;}}
.afx .burger svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2;fill:none;}
.afx .mobnav{display:none;border-top:1px solid var(--line);background:#fff;padding:.4rem var(--gutter) 1.1rem;}
.afx .mobnav.open{display:block;}
.afx .mobnav a{display:block;padding:.75rem .2rem;border-bottom:1px solid var(--line);color:var(--ink2);font-weight:500;}
.afx .mobnav a:last-of-type{border-bottom:0;}
.afx .mobnav .btn{margin-top:.9rem;width:100%;justify-content:center;}

/* ---- footer ---- */
.afx .ftr{background:linear-gradient(180deg,#0b0e14,#070809);color:#9aa3b2;}
.afx .ftr .row{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;
  padding-block:clamp(1.9rem,3vw,2.7rem);}
.afx .ftr img{height:26px;width:auto;}
.afx .ftr .sep{color:#5d6573;}
.afx .ftr .right{margin-left:auto;font-size:.86rem;letter-spacing:.02em;}
.afx .ftr a:hover{color:#fff;}

/* ---- floating Jessica ---- */
.afx .jfab{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(135deg,var(--ac),var(--ac-d));color:#fff;font-weight:600;font-size:.92rem;
  padding:.72rem 1.1rem;border-radius:999px;box-shadow:0 16px 36px -8px var(--glow);transition:transform .15s;}
.afx .jfab:hover{transform:translateY(-2px);}
.afx .jfab .d{width:8px;height:8px;border-radius:50%;background:var(--ok2);animation:afxBlink 1.4s infinite;}

/* ---- reveal on scroll (safe: visible if JS/anim unavailable) ---- */
.afx.afx-anim .reveal{opacity:0;transform:translateY(24px);}
.afx.afx-anim .reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease;}
@media(prefers-reduced-motion:reduce){.afx.afx-anim .reveal{opacity:1;transform:none;}}

/* ---- shared keyframes ---- */
@keyframes afxGrad{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
@keyframes afxBlink{50%{opacity:.4;}}