/* MapRankd site styles. Brand: separate from Uptick Co. Light page, two Steel Night dark bands. */
:root{
  --steel-night:#0f1923;
  --steel-700:#1c2c38;
  --ocean-slate:#4a7a8a;
  --ocean-deep:#3a6373;
  --sky-slate:#8ecae6;
  --signal:#FF6B35;
  --signal-hover:#e55a28;
  --deep-slate:#2a4a5a;
  --mist:#b8ccd4;
  --ice:#e8f4f8;
  --paper:#f7fafb;
  --white:#ffffff;
  --ink:#0f1923;
  --body:#3c4d57;          /* softened steel for long-form body */
  --muted:#6a828d;
  --line:#e4ecef;
  --line-strong:#d3e0e5;
  --maxw:1140px;
  --pad:26px;
  --radius:8px;
  --radius-lg:16px;
  /* layered, low-opacity steel shadows, quiet and premium, never glowy */
  --shadow-card:0 1px 1px rgba(15,25,35,.03), 0 4px 14px rgba(15,25,35,.045);
  --shadow-lift:0 2px 6px rgba(15,25,35,.05), 0 20px 50px -12px rgba(15,25,35,.16);
  --font:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  /* map dot-grid motif */
  --dot:rgba(74,122,138,.13);
  --dot-dark:rgba(142,202,230,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--body);
  background:var(--white);line-height:1.7;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;font-feature-settings:"kern","liga","cv11";
}
img{display:block;max-width:100%}
a{color:var(--ocean-slate);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--steel-night)}
h1,h2,h3{color:var(--steel-night);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.025em}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* map dot-grid background motif */
.dotgrid{background-image:radial-gradient(var(--dot) 1.1px,transparent 1.1px);background-size:22px 22px}
.dark .dotgrid,.dotgrid.on-dark{background-image:radial-gradient(var(--dot-dark) 1.1px,transparent 1.1px)}

/* ---------- sections ---------- */
section{padding:104px 0;position:relative}
@media(max-width:760px){section{padding:64px 0}}
.dark{background:var(--steel-night);color:#cddde4}
.dark h1,.dark h2,.dark h3{color:#fff}
.tint{background:var(--paper)}
.ice-bg{background:var(--ice)}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ocean-slate);margin:0 0 20px;display:inline-flex;align-items:center;gap:10px;
}
.dark .eyebrow{color:var(--sky-slate)}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--signal);border-radius:2px}
h1{font-size:clamp(38px,5.4vw,58px);font-weight:800;letter-spacing:-.034em;line-height:1.04}
h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.lead{font-size:clamp(16.5px,1.6vw,19px);max-width:58ch;line-height:1.6}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;border:none;
  background:var(--signal);color:#fff;font-family:inherit;font-weight:700;
  font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:15px 26px;border-radius:var(--radius);position:relative;
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
  box-shadow:0 1px 2px rgba(15,25,35,.12);
}
.btn:hover{background:var(--signal-hover);color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px -6px rgba(255,107,53,.55)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn-lg{padding:18px 34px;font-size:14.5px}
.btn-ghost{background:transparent;color:var(--steel-night);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-ghost:hover{background:var(--paper);color:var(--steel-night);box-shadow:inset 0 0 0 1.5px var(--mist)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease;
}
.site-head.scrolled{border-bottom-color:var(--line);box-shadow:0 1px 20px rgba(15,25,35,.04)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:80px}
.site-head .logo{height:40px;width:auto}
.head-cta{padding:11px 20px;font-size:12px}
@media(max-width:560px){.head-cta{display:none}}

/* ---------- footer ---------- */
.site-foot{background:var(--steel-night);color:#9fb4bd;padding:72px 0 44px;position:relative;overflow:hidden}
.site-foot::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(var(--dot-dark) 1.1px,transparent 1.1px);background-size:24px 24px;pointer-events:none}
.site-foot .wrap{position:relative}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;
  padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:28px}
.site-foot .logo{height:40px;margin-bottom:16px}
.site-foot .tag{color:var(--sky-slate);font-weight:600;font-size:15px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;font-size:14.5px}
.foot-links a{color:#9fb4bd}
.foot-links a:hover{color:#fff}
.foot-sep{color:var(--deep-slate)}
.foot-fine{font-size:12.5px;color:#5d7682}
.foot-fine a{color:var(--ocean-slate)}

/* utilities */
.center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* footer social (v1.3) */
.foot-social{ display:flex; gap:18px; align-items:center; margin:14px 0; }
.foot-social a{ display:inline-flex; align-items:center; color:#b8ccd4; transition:color .15s ease; text-decoration:none; }
.foot-social a:hover{ color:#FF6B35; }
.foot-social svg{ width:20px; height:20px; fill:currentColor; }
.foot-social img.clutch-ico{ width:22px; height:22px; border-radius:5px; display:block; }
.foot-social a:hover img.clutch-ico{ opacity:.82; }