/* =========================================================================
   Uplink Ventures — design system
   Display: Big Shoulders Display (condensed, industrial, matches wordmark)
   Body: IBM Plex Sans
   Utility/mono: IBM Plex Mono (stats, labels, pricing)
   ========================================================================= */

:root{
  --ink:        #14100F;
  --ink-soft:   #1E1917;
  --paper:      #FAF7F1;
  --paper-dim:  #F1ECE2;
  --slate:      #4A4642;
  --mist:       #8F897F;
  --steel:      #DDD5C7;
  --red:        #E63B1E;
  --red-deep:   #B92C13;
  --red-glow:   rgba(230,59,30,.18);
  --cream-line: rgba(250,247,241,.14);

  --display: "Big Shoulders Display", sans-serif;
  --body:    "IBM Plex Sans", sans-serif;
  --mono:    "IBM Plex Mono", monospace;

  --wrap: 1180px;
  --gap-xs: .5rem;
  --gap-sm: 1rem;
  --gap-md: 1.5rem;
  --gap-lg: 3rem;
  --gap-xl: 5rem;

  --radius: 3px;
  --ease: cubic-bezier(.22,.68,.35,1);
}

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

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{ font-family: var(--display); margin:0; letter-spacing: .01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }

.wrap{ max-width: var(--wrap); margin-inline:auto; padding-inline: 1.5rem; }
@media (min-width: 640px){ .wrap{ padding-inline: 2.5rem; } }

:focus-visible{ outline: 3px solid var(--red); outline-offset: 3px; }

/* ---------- eyebrow / mono labels ---------- */
.eyebrow{
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  display:flex; align-items:center; gap:.6em;
}
.eyebrow::before{
  content:""; width: 22px; height: 2px; background: var(--red); display:inline-block;
}
.eyebrow.on-dark{ color:#FF7757; background:none; }

/* ---------- type scale ---------- */
.h-display{
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .94;
  letter-spacing: .005em;
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
}
.h-xl{ font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .98; font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.h-lg{ font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: 1; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.h-md{ font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; letter-spacing:.01em; }
.lede{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--slate); max-width: 46ch; }
.on-dark .lede, .on-dark p{ color: #C9C2B6; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration:none;
  padding: .95em 1.5em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.btn-primary{ background: var(--red); color:#fff; }
.btn-primary:hover{ background: var(--red-deep); transform: translateY(-2px); }
.btn-ghost{ background:transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn-ghost.on-dark{ color:#fff; border-color: rgba(255,255,255,.4); }
.btn-ghost.on-dark:hover{ background:#fff; color: var(--ink); }
.btn:active{ transform: translateY(0); }
.btn svg{ width:1em; height:1em; }

.btn-row{ display:flex; flex-wrap:wrap; gap: 1rem; align-items:center; }

/* ---------- header / nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(250,247,241,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--steel);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height: 76px; }
.brand{ display:flex; align-items:flex-start; gap:.65rem; text-decoration:none; }
.brand img{ height: 52px; width:auto; display:block; }
.brand-word{ font-family: var(--display); font-weight:800; text-transform:uppercase; font-size:1.55rem; line-height:1; margin-top:12px; letter-spacing:.08rem; }
.brand-word > span{ display:inline-block; transform-origin:left center; transform:scaleX(1.108); }
.brand-word small{ display:block; font-family:var(--mono); font-weight:500; font-size:.74rem; line-height:1; letter-spacing:.2em; color:var(--red); text-transform:uppercase; margin-top:3px; }

.nav-links{ display:none; align-items:center; gap: 2rem; }
.nav-links a{ text-decoration:none; font-size:.92rem; font-weight:500; position:relative; padding: .3rem 0; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--red); transition: right .22s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ right:0; }
.nav-links a[aria-current="page"]{ color: var(--red); }
.nav-cta{ display:none; }
@media (min-width: 900px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
}

.nav-toggle{
  display:flex; flex-direction:column; gap:5px; background:none; border:none; padding:8px; cursor:pointer;
}
.nav-toggle span{ width:24px; height:2px; background:var(--ink); transition: transform .2s var(--ease), opacity .2s var(--ease); }
@media (min-width:900px){ .nav-toggle{ display:none; } }

.mobile-menu{
  display:none; flex-direction:column; gap:0; background: var(--paper); border-bottom:1px solid var(--steel);
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding: 1rem 1.5rem; text-decoration:none; border-top:1px solid var(--steel); font-family:var(--mono); text-transform:uppercase; font-size:.85rem; letter-spacing:.06em; }
.mobile-menu .btn{ margin: 1rem 1.5rem; }
@media (min-width:900px){ .mobile-menu{ display:none !important; } }

/* ---------- sections ---------- */
section{ padding-block: var(--gap-xl); position:relative; }
.section-tight{ padding-block: var(--gap-lg); }
.on-dark{ background: var(--ink); color:#fff; }
.parallax-dark{
  background-image: linear-gradient(rgba(20,16,15,.93), rgba(20,16,15,.93)), url('../images/local-glow.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 700px){
  .parallax-dark{ background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce){
  .parallax-dark{ background-attachment: scroll; }
}
.section-head{ max-width: 640px; margin-bottom: var(--gap-lg); }
.section-head .eyebrow{ margin-bottom: .9rem; }
.section-head h2{ margin-bottom: .9rem; }

.divider{
  height:1px; background: var(--steel); border:none; margin:0;
}
.on-dark .divider{ background: var(--cream-line); }

/* signature streak divider */
.streak{
  position:relative; height: 46px; overflow:hidden; margin-block: 0;
}
.streak::before{
  content:""; position:absolute; inset: -60% -10%;
  background: linear-gradient(105deg, transparent 46%, var(--red) 48%, var(--red) 50%, transparent 52%);
  opacity:.9;
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background: var(--ink) url('../images/hero-signal.png') center 30%/cover no-repeat;
  color:#fff;
  padding-block: 6rem 5rem;
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(100deg,
    var(--ink) 0%,
    var(--ink) 24%,
    rgba(20,16,15,.92) 34%,
    rgba(20,16,15,.68) 46%,
    rgba(20,16,15,.38) 58%,
    rgba(20,16,15,.14) 72%,
    rgba(20,16,15,0) 88%
  );
}
.hero .wrap{ position:relative; z-index:1; }
.hero-grid{ max-width: 640px; }
.hero h1{ margin-block: 1rem 1.2rem; color:#fff; }
.hero h1 span{ color: var(--red); }
.hero .lede{ color: #EDE9E1; }
.stat-strip{
  margin-top: 3rem; display:flex; flex-wrap:wrap; gap: 2.2rem;
  font-family: var(--mono); font-size:.78rem; color:#C9C2B6;
}
.stat-strip strong{ display:block; color:#fff; font-family:var(--display); font-size:1.7rem; font-weight:800; }

/* ---------- cards ---------- */
.grid{ display:grid; gap: 1.5rem; }
.grid-3{ grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.grid-2{ grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }

.card{
  background:#fff; border:1px solid var(--steel); border-radius: var(--radius);
  padding: 2rem; display:flex; flex-direction:column; gap: 1rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 18px 34px -20px rgba(20,16,15,.35); border-color: var(--ink); }
.card .num{ font-family: var(--mono); color: var(--red); font-size:.8rem; }
.card h3{ font-size:1.25rem; }
.card ul{ display:flex; flex-direction:column; gap:.5rem; margin-top:.25rem; }
.card ul li{ padding-left: 1.3em; position:relative; font-size:.95rem; color: var(--slate); }
.card ul li::before{ content:"→"; position:absolute; left:0; color:var(--red); font-family:var(--mono); }

.provide-benefit{ display:grid; gap:1.5rem; grid-template-columns:1fr 1fr; margin-top:.5rem; }
@media (max-width: 640px){
  .provide-benefit{ grid-template-columns:1fr; }
}

.price-tag{ font-family: var(--mono); font-size:1.5rem; font-weight:600; }
.price-tag small{ font-size:.7rem; color: var(--slate); text-transform:uppercase; letter-spacing:.06em; }

/* reveal on scroll */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color:#C9C2B6; padding-block: var(--gap-lg) var(--gap-md); }
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns: 1.4fr 1fr 1fr; margin-bottom: 2.5rem; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ color:#fff; font-size:1rem; margin-bottom:1rem; }
.footer-grid a{ text-decoration:none; }
.footer-grid ul li{ margin-bottom:.6rem; font-size:.92rem; }
.footer-grid ul li a:hover{ color:#fff; }
.footer-brand .brand-word{ color:#fff; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-family:var(--mono); font-size:.75rem; color: var(--mist); padding-top:1.5rem; border-top:1px solid var(--cream-line); }

/* ---------- before/after compare slider ---------- */
.compare{
  position:relative; aspect-ratio: 16/10; border-radius: var(--radius); overflow:hidden;
  border:1px solid var(--steel); background:#111; --pos:50%;
}
.compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: top center; }
.compare [data-compare-after]{ clip-path: inset(0 50% 0 0); }
.compare-label{
  position:absolute; top:14px; font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.4em .7em; background: rgba(20,16,15,.75); color:#fff; border-radius:2px; z-index:2; pointer-events:none;
}
.compare-label.before{ left:14px; }
.compare-label.after{ left: calc(var(--pos) + 14px); }
.compare-handle{
  position:absolute; top:0; bottom:0; left: var(--pos); width:3px; background:#fff; z-index:3; pointer-events:none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.compare-handle::after{
  content:"←→"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; letter-spacing:-.05em;
  border: 1.5px solid var(--ink);
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
  animation: compare-pulse 2.4s ease-in-out infinite;
}
@keyframes compare-pulse{
  0%, 100%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-50%) scale(1.1); }
}
.compare input[type="range"]{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor: ew-resize; z-index:4;
  -webkit-appearance:none; appearance:none; background:transparent;
}

/* ---------- utility ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.08em; padding:.35em .8em; border:1px solid var(--steel); border-radius:99px;
  color: var(--slate);
}
.on-dark .pill{ border-color: rgba(255,255,255,.25); color:#C9C2B6; }
.center{ text-align:center; margin-inline:auto; }