/* ============================================================
   ENDCAP — beautification layer
   Loaded after endcap.css + components.css. Additive only.
   Everything here respects prefers-reduced-motion.
   ============================================================ */

/* ============================================================
   01 · BRACKET MARK  — replaces the letter tile everywhere
   ============================================================ */
.mark .mk {
  width: 64%; height: 64%;
  fill: none; stroke: #fff; stroke-width: 7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   06 · DIVIDER SIGNATURE  — fade the rule, set a bracket glyph
   ============================================================ */
.divider { border-top: none; }
.divider::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-hi) 22%, var(--border-hi) 78%, transparent);
  pointer-events: none;
}
.divider::after {
  content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 15px; background: var(--canvas);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M12 16 H68 V64 H50 M12 16 V64 H30' fill='none' stroke='%23059669' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
  pointer-events: none;
}
.band-paper.divider::after { background-color: var(--paper); }

/* ============================================================
   02 · HERO ROUTE  — an SVG path that draws the rep's day
   ============================================================ */
.hero-inner { position: relative; z-index: 2; }
.hero-route {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none; overflow: visible;
  -webkit-mask-image: linear-gradient(105deg, #000 38%, transparent 64%);
  mask-image: linear-gradient(105deg, #000 38%, transparent 64%);
}
.hero-route .route-ghost { fill: none; stroke: var(--emerald); stroke-width: 1.4; opacity: .10; }
.hero-route .route-live {
  fill: none; stroke: var(--emerald); stroke-width: 1.6; opacity: .42;
  stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: routeDraw 2.8s cubic-bezier(.4,0,.2,1) .35s forwards;
}
.hero-route .route-dot { fill: var(--emerald); }
@keyframes routeDraw { to { stroke-dashoffset: 0; } }
.hero-pin { position: absolute; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; }
.hero-pin .pip {
  display: block; width: 9px; height: 9px; border-radius: 999px;
  background: var(--emerald); border: 2px solid var(--canvas);
  box-shadow: 0 0 0 4px var(--emerald-glow), var(--shadow-sm);
}
.hero-pin .tag {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font: 500 10.5px/1 var(--mono);
  background: var(--paper); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 9px; color: var(--ink-2); box-shadow: var(--shadow-sm);
  opacity: 0; animation: pinIn .5s ease forwards;
}
.hero-pin:nth-of-type(1) .tag { animation-delay: 1.3s; }
.hero-pin:nth-of-type(2) .tag { animation-delay: 2.0s; }
.hero-pin:nth-of-type(3) .tag { animation-delay: 2.7s; }
@keyframes pinIn { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@media (max-width: 980px) { .hero-route, .hero-pin { display: none; } }

/* ============================================================
   03 · VIEWFINDER FRAMING  — bracket corners around product shots
   ============================================================ */
.viewfinder { position: relative; }
.viewfinder::before {
  content: ""; position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: 86%; height: 78%; z-index: -1;
  background: radial-gradient(ellipse, var(--emerald-glow), transparent 70%);
  filter: blur(26px);
}
.vf-c { position: absolute; width: 24px; height: 24px; border: 2.5px solid var(--emerald); opacity: .8; z-index: 3; pointer-events: none; }
.vf-c.tl { top: -10px; left: -10px; border-right: none; border-bottom: none; border-top-left-radius: 7px; }
.vf-c.tr { top: -10px; right: -10px; border-left: none; border-bottom: none; border-top-right-radius: 7px; }
.vf-c.bl { bottom: -10px; left: -10px; border-right: none; border-top: none; border-bottom-left-radius: 7px; }
.vf-c.br { bottom: -10px; right: -10px; border-left: none; border-top: none; border-bottom-right-radius: 7px; }
.vf-label {
  position: absolute; top: -10px; left: 50%; transform: translate(-50%, -50%); z-index: 4;
  font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--emerald-ink); background: var(--canvas); padding: 3px 10px; white-space: nowrap;
}
.band-paper .vf-label { background: var(--paper); }
.phone-stage .viewfinder { display: inline-block; }

/* ============================================================
   04 · LIVING FLOW CONNECTOR  — dashed path drifting between steps
   ============================================================ */
.flow-grid { position: relative; }
.flow-connector { display: none; }       /* retire the old flat line */
.flow-path-svg {
  position: absolute; top: 42px; left: 8%; right: 8%; width: 84%; height: 64px; z-index: 0;
  pointer-events: none; overflow: visible;
}
.flow-path-svg .fp {
  fill: none; stroke: var(--emerald); stroke-width: 1.5; opacity: .42;
  stroke-dasharray: 5 7; stroke-linecap: round;
  animation: flowDrift 24s linear infinite;
}
@keyframes flowDrift { to { stroke-dashoffset: -600; } }
.flow-step { position: relative; z-index: 1; }
.flow-ic { box-shadow: 0 0 0 7px var(--paper), var(--shadow-sm); }
@media (max-width: 980px) { .flow-path-svg { display: none; } }

/* ============================================================
   05 · DARK-BAND ATMOSPHERE  — aurora, dot grid, grain, keyline
   ============================================================ */
.atmo { position: relative; overflow: hidden; }
.atmo > .wrap, .atmo > .bracket-bg { position: relative; z-index: 2; }
.atmo .bracket-bg { z-index: 1; }
.atmo-layer { position: absolute; pointer-events: none; }
.atmo-keyline { top: 0; left: 16%; right: 16%; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(52,211,153,.5), transparent); }
.atmo-aurora-a { top: -32%; left: -6%; width: 560px; height: 460px; z-index: 0;
  background: radial-gradient(ellipse, rgba(5,150,105,.20), transparent 64%); filter: blur(34px); }
.atmo-aurora-b { bottom: -42%; right: -6%; width: 600px; height: 480px; z-index: 0;
  background: radial-gradient(ellipse, rgba(37,99,235,.12), transparent 64%); filter: blur(40px); }
.atmo-dots { inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(148,163,184,.14) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 72% 88% at 50% 0%, #000, transparent 76%);
  mask-image: radial-gradient(ellipse 72% 88% at 50% 0%, #000, transparent 76%); }
.atmo-grain { inset: 0; z-index: 1; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"); }
/* gradient-clipped headline on atmospheric dark bands */
.atmo .h1.atmo-title, .atmo .h2.atmo-title {
  background: linear-gradient(180deg, #fff 34%, #9AA6B8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================
   07 · LOGO MARQUEE  — drifting strip with typographic variety
   ============================================================ */
.logo-marquee {
  margin-top: 30px; display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logo-track {
  display: flex; align-items: center; gap: 56px; padding-right: 56px;
  flex-shrink: 0; animation: marq 30s linear infinite;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-100%); } }
.logo-marquee .logo-word { white-space: nowrap; opacity: .58; }
.logo-word.lw-serif { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 600; }
.logo-word.lw-mono { font-family: var(--mono); font-weight: 600; letter-spacing: .04em; }
.logo-word.lw-tight { letter-spacing: -.04em; }
.logo-word.lw-wide { letter-spacing: .12em; font-weight: 600; }

/* ============================================================
   08 · NUMBERS THAT MOVE
   ============================================================ */
.stat-num [data-count] { font-variant-numeric: tabular-nums; }
/* report bars animate width from 0 on reveal */
.report .rb-fill { width: 0; transition: width 1.3s cubic-bezier(.4,0,.2,1); }
.report.nums-go .rb-fill { width: var(--w, 0); }
/* sparkline inside the report cover */
.report-spark { margin-top: 18px; }
.report-spark-head { display: flex; justify-content: space-between; align-items: baseline; }
.report-spark-t { font: 600 12px/1 var(--sans); color: var(--ink); }
.report-spark-m { font: 500 9.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.report-spark svg { width: 100%; height: 56px; margin-top: 10px; overflow: visible; }
.report-spark .sp-fill { fill: url(#ec_sparkgrad); opacity: 0; transition: opacity .9s ease .9s; }
.report-spark .sp-line {
  fill: none; stroke: var(--emerald); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.report.nums-go .report-spark .sp-line { animation: routeDraw 1.7s cubic-bezier(.4,0,.2,1) forwards; }
.report.nums-go .report-spark .sp-fill { opacity: 1; }

/* ============================================================
   09 · LIGHT ON BUTTONS & CARDS
   ============================================================ */
.btn-primary { position: relative; overflow: hidden; box-shadow:
  0 1px 2px rgba(5,150,105,.3), 0 6px 16px -6px var(--emerald-glow), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -75%; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.btn-primary:hover::after { animation: btnShine .7s ease; }
@keyframes btnShine { to { left: 145%; } }

/* gradient-border lift for the problem cards */
.card-hover.card-glow {
  border: none; padding: 1px;
  background: linear-gradient(160deg, var(--border) 42%, var(--emerald-bd));
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
}
.card-hover.card-glow > .card-glow-in {
  background: var(--paper); border-radius: calc(var(--r-lg) - 1px); height: 100%; padding: 27px;
}
.card-hover.card-glow:hover {
  transform: translateY(-3px);
  background: linear-gradient(160deg, var(--border-hi) 18%, var(--emerald));
  box-shadow: 0 18px 36px -16px var(--emerald-glow), var(--shadow-md);
}

/* ============================================================
   10 · GHOST WORDMARK FOOTER
   ============================================================ */
.footer { padding-bottom: 0; }
.footer-ghost {
  position: relative; z-index: 1; margin-top: 48px; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 18%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 18%, transparent 92%);
}
.footer-ghost text {
  font: 700 200px/1 var(--sans); letter-spacing: -.04em;
  fill: none; stroke: rgba(52,211,153,.26); stroke-width: 1.1;
}
@media (max-width: 640px) { .footer-ghost text { font-size: 120px; } }

/* ============================================================
   SMALL FIXES
   ============================================================ */
.nav-link { white-space: nowrap; }
/* hold the full nav a little wider before collapsing */
@media (min-width: 921px) and (max-width: 1120px) {
  .nav-inner { gap: 20px; }
  .nav-links { gap: 0; margin-left: 0; }
  .nav-link { padding: 9px 9px; font-size: 14px; }
}
@media (max-width: 1080px) {
  .hero-visual .browser { transform: perspective(2200px) rotateY(-5deg) rotateX(1deg); }
}

/* ============================================================
   REDUCED MOTION  — freeze everything new in its end-state
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-route .route-live { animation: none; stroke-dashoffset: 0; }
  .hero-route .route-dot { display: none; }
  .hero-pin .tag { animation: none; opacity: 1; }
  .flow-path-svg .fp { animation: none; }
  .logo-track { animation: none; }
  .btn-primary:hover::after { animation: none; }
  .report .rb-fill { transition: none; }
  .report.nums-go .report-spark .sp-line { animation: none; stroke-dashoffset: 0; }
  .report-spark .sp-fill { transition: none; }
}