/* GP Inventory Solutions marketing site, section-level layout CSS.
   "Navy & Silver." Primitives come from the design-system bundle; this file
   holds the page shells and bespoke section layouts. */

.wrap { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad); position: relative; }
section { scroll-margin-top: 90px; position: relative; }

/* ---------- NAV ---------- */
header.nav { position: sticky; top: 0; z-index: 60; background: rgba(0,11,61,.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--silver-line); }
.nav .row { display:flex; align-items:center; justify-content:space-between; gap:18px; height:70px; }
.nav .brand img { height: 40px; display:block; }
.lockup { display:flex; align-items:center; gap:11px; }
.lockup .mono { height:38px; width:auto; display:block; }
.lockup .wm { display:flex; flex-direction:column; line-height:1; }
.lockup .wm b { font-family:var(--font-display); font-size:1.15rem; letter-spacing:.01em; color:#fff; text-transform:uppercase; }
.lockup .wm i { font-family:var(--font-body); font-style:normal; font-weight:700; font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--on-navy-dim); margin-top:3px; }
footer.foot .lockup .mono { height:42px; }
footer.foot .lockup .wm b { font-size:1.25rem; }
.nav nav { display:flex; align-items:center; gap:26px; }
.nav nav a { font-family:var(--font-body); font-size:.84rem; font-weight:600; letter-spacing:.02em; color:var(--on-navy-dim); transition:color .2s; position:relative; cursor:pointer; }
.nav nav a:hover, .nav nav a.active { color:#fff; }
.nav nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--blue-bright); transition:right .25s var(--ease); }
.nav nav a:hover::after, .nav nav a.active::after { right:0; }
.nav .right { display:flex; align-items:center; gap:16px; }
.phone { font-family:var(--font-body); font-weight:700; font-size:.9rem; white-space:nowrap; color:#fff; letter-spacing:.01em; }
.phone span { color:var(--on-navy-dim); font-weight:600; font-size:.7rem; letter-spacing:.1em; }

/* ticker tape */
.tape { background:var(--navy-ink); color:var(--on-navy); overflow:hidden; border-bottom:1px solid var(--silver-line); }
.tape .track { display:flex; gap:44px; white-space:nowrap; width:max-content; padding:10px 0; animation:slide 42s linear infinite; }
.tape .it { font-family:var(--font-body); font-weight:600; font-size:.74rem; letter-spacing:.03em; color:var(--on-navy-dim); }
.tape .it b { color:#fff; font-weight:700; }
.tape .up { color:var(--pos-on-navy); } .tape .dn { color:var(--neg-on-navy); } .tape .star { color:var(--blue-bright); }
@keyframes slide { to { transform:translateX(-50%); } }

/* ---------- HERO ---------- */
.hero { background:var(--navy); color:var(--on-navy); border-bottom:1px solid var(--silver-line); position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; right:-12%; top:-30%; width:60%; height:160%;
  background:radial-gradient(closest-side, rgba(10,86,250,.22), transparent 70%); pointer-events:none; }
.hero .wrap { display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(30px,4.5vw,68px); align-items:center;
  padding-top:clamp(50px,6.5vw,96px); padding-bottom:clamp(56px,7vw,104px); position:relative; z-index:1; }
.eyebrow { display:inline-flex; align-items:center; gap:12px; margin-bottom:24px; }
.eyebrow .no { font-family:var(--font-body); font-weight:600; font-size:.72rem; color:var(--on-navy-dim); letter-spacing:.08em; }
.h1 { font-family:var(--font-display); font-size:var(--fs-hero); line-height:.94; letter-spacing:.005em; text-transform:uppercase; color:#fff; }
.h1 .em { display:block; color:var(--blue-bright); }
.hero p.sub { font-size:var(--fs-lead); font-weight:500; color:var(--on-navy); max-width:36ch; margin:24px 0 32px; }
.hero .cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero .trust { margin-top:28px; font-family:var(--font-body); font-size:.84rem; color:var(--on-navy-dim); display:flex; align-items:center; gap:9px; }
.hero .trust b { color:#fff; font-weight:700; }
.hero .trust svg { width:18px; height:18px; color:var(--blue-bright); }

/* ---------- TRUST STRIP ---------- */
.strip { background:var(--mist); border-bottom:1px solid var(--border-default); }
.strip .wrap { display:flex; align-items:center; gap:clamp(18px,4vw,52px); padding-block:20px; flex-wrap:wrap; justify-content:center; }
.strip .lbl { font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.1em; color:var(--ink-mut); text-transform:uppercase; }
.logos { display:flex; gap:12px; flex-wrap:wrap; }
.logoslot { width:100px; height:34px; border:1px solid var(--silver-2); border-radius:var(--radius-sm); display:grid; place-items:center;
  font-family:var(--font-body); font-weight:700; font-size:.56rem; letter-spacing:.14em; color:var(--silver-3); background:var(--white); }

/* ---------- SECTION SHELL ---------- */
.sec { padding-block:var(--section-y); }
.ondark { background:var(--navy); color:var(--on-navy); }
.ink-sec { background:var(--mist); }
.ondark p { color:var(--on-navy-dim); }
.lead { max-width:64ch; }
.ey { display:flex; align-items:center; gap:12px; }
.ey .ln { height:3px; width:38px; background:var(--blue); border-radius:2px; }
.ondark .ey .ln { background:var(--blue-bright); }
.sec h2 { font-family:var(--font-display); font-size:var(--fs-h2); text-transform:uppercase; letter-spacing:.005em; line-height:1; margin-top:18px; }
.ondark h2, .ondark h3, .ondark h4 { color:#fff; }
.sec .lead > p { font-size:1.1rem; color:var(--ink-mut); margin-top:18px; }
.ondark .lead > p { color:var(--on-navy-dim); }

/* ---------- PROBLEM ---------- */
.prob .stmt { margin-top:46px; display:grid; gap:16px; }
.stmt .row { display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; padding:24px 26px;
  background:var(--navy-2); border:1px solid var(--silver-line); border-left:4px solid var(--blue-bright); border-radius:var(--radius-lg); }
.stmt .figure { font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.4rem); letter-spacing:.01em; color:var(--blue-bright); line-height:.9; font-variant-numeric:tabular-nums; }
.stmt .figure.neg { color:var(--neg-on-navy); }
.stmt .figure .u { font-size:.32em; color:var(--on-navy-dim); font-family:var(--font-body); font-weight:700; letter-spacing:.05em; margin-left:6px; text-transform:uppercase; }
.stmt .desc b { font-family:var(--font-body); font-weight:700; font-size:1.08rem; color:#fff; }
.stmt .desc span { display:block; font-family:var(--font-body); font-size:.82rem; color:var(--on-navy-dim); margin-top:6px; }
.stmt .tag { font-family:var(--font-body); font-weight:700; font-size:.62rem; letter-spacing:.12em; color:var(--on-navy-dim); text-transform:uppercase; writing-mode:vertical-rl; transform:rotate(180deg); opacity:.8; }

.aging { margin-top:44px; }
.aging .top { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.aging .top h3 { font-family:var(--font-display); text-transform:uppercase; font-size:1.4rem; color:#fff; letter-spacing:.005em; }
.aging .top .note { font-family:var(--font-body); font-size:.72rem; color:var(--on-navy-dim); }
.bar { display:flex; height:48px; border:1px solid var(--silver-line); border-radius:var(--radius-md); overflow:hidden; background:var(--navy-2); }
.bar .seg { height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-size:.7rem; font-weight:700; letter-spacing:.02em; transition:width 1.1s var(--ease); overflow:hidden; white-space:nowrap; }
.bar .s0 { background:var(--blue); color:#fff; } .bar .s1 { background:#2f7fd6; color:#fff; }
.bar .s2 { background:#8a93b5; color:#0b1020; } .bar .s3 { background:var(--neg); color:#fff; }
.legend { display:flex; gap:18px; flex-wrap:wrap; margin-top:15px; }
.legend span { font-family:var(--font-body); font-size:.74rem; color:var(--on-navy-dim); display:flex; align-items:center; gap:7px; }
.legend i { width:11px; height:11px; border-radius:3px; }

/* ---------- STEPS ---------- */
.steps { margin-top:48px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

/* ---------- CALCULATOR ---------- */
.calc { display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(18px,2.6vw,28px); margin-top:46px; align-items:stretch; }
.sheet { background:var(--white); border:1px solid var(--border-default); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; }
.sheet .sh { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid var(--border-default); background:var(--mist); }
.sheet .sh .t { font-family:var(--font-body); font-weight:700; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; }
.sheet .sh .d { font-family:var(--font-body); font-weight:700; font-size:.62rem; color:var(--blue); letter-spacing:.1em; }
.sheet .bd { padding:26px; }
.assume { font-family:var(--font-body); font-size:.74rem; color:var(--ink-mut); line-height:1.6; border-top:1px solid var(--border-default); padding-top:16px; margin-top:22px; }
.assume b { color:var(--ink); }
.sheet.results { display:flex; flex-direction:column; background:var(--navy); border-color:var(--silver-line); }
.sheet.results .sh { background:rgba(232,240,243,.04); border-color:var(--silver-line); }
.sheet.results .sh .t { color:#fff; } .sheet.results .sh .d { color:var(--blue-bright); }
.results .bd { display:flex; flex-direction:column; flex:1; }
.res-lab { font-family:var(--font-body); font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-navy-dim); }
.res-hero { font-family:var(--font-display); font-size:var(--fs-figure); letter-spacing:.01em; color:var(--blue-bright); line-height:.92; margin:8px 0; font-variant-numeric:tabular-nums; }
.savebar { height:8px; background:var(--navy-2); border:1px solid var(--silver-line); border-radius:999px; overflow:hidden; margin:18px 0 6px; }
.savebar i { display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--blue-bright)); transition:width .5s var(--ease); }
.res-sub { color:var(--on-navy-dim); font-size:.94rem; }
.res-list { margin:20px 0 0; }
.res-list .li { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--silver-line); }
.res-list .li .l { font-family:var(--font-body); font-weight:600; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--on-navy-dim); }
.res-list .li .v { font-family:var(--font-display); font-size:1.4rem; color:#fff; font-variant-numeric:tabular-nums; }
.res-list .li.tot { border-bottom:none; border-top:2px solid var(--silver-line); margin-top:4px; padding-top:15px; }
.res-list .li.tot .l { color:#fff; } .res-list .li.tot .v { color:var(--pos-on-navy); }
.res-foot { margin-top:auto; padding-top:20px; }
.res-foot .meth { font-family:var(--font-body); font-size:.7rem; color:var(--on-navy-dim); line-height:1.6; margin-bottom:16px; }

/* ---------- SERVICES grid ---------- */
.svc { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:48px; }

/* ---------- DIFFERENTIATOR + FOUNDER ---------- */
.diff { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,60px); align-items:center; }
.diff .quote { font-family:var(--font-display); font-size:clamp(2rem,3.9vw,3rem); line-height:1; letter-spacing:.005em; text-transform:uppercase; color:#fff; }
.diff .quote .em { color:var(--blue-bright); }
.diff p { margin-top:22px; }
.founder { background:var(--navy-2); border:1px solid var(--silver-line); border-radius:var(--radius-lg); padding:24px; display:flex; gap:20px; align-items:center; box-shadow:var(--shadow-lg); }
.portrait { flex:0 0 auto; width:118px; height:142px; border-radius:var(--radius-md); border:1px dashed var(--on-navy-dim); display:grid; place-items:center; text-align:center; background:rgba(0,0,0,.2); color:var(--on-navy-dim); font-family:var(--font-body); font-weight:600; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.6; }
.portrait svg { width:46px; height:46px; opacity:.5; margin-bottom:6px; }
.portrait.has-photo { border-style:solid; border-color:var(--silver-line); overflow:hidden; padding:0; background:var(--navy-ink); }
.portrait.has-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; }
.founder .who h3 { font-family:var(--font-display); text-transform:uppercase; font-size:1.5rem; color:#fff; letter-spacing:.005em; }
.founder .who .role { font-family:var(--font-body); font-weight:700; font-size:.7rem; letter-spacing:.1em; color:var(--blue-bright); text-transform:uppercase; margin-top:6px; }
.founder .who p { font-size:.9rem; color:var(--on-navy-dim); margin-top:13px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.chip { font-family:var(--font-body); font-weight:600; font-size:.62rem; letter-spacing:.04em; text-transform:uppercase; color:var(--on-navy-dim); border:1px solid var(--silver-line); border-radius:999px; padding:5px 11px; }

/* ---------- PROOF ---------- */
.proofnote { font-family:var(--font-body); font-weight:600; font-size:.7rem; letter-spacing:.04em; color:var(--ink-mut); border:1px dashed var(--silver-3); border-radius:var(--radius-sm); padding:8px 12px; display:inline-block; margin-top:18px; text-transform:uppercase; }
.quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
.kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }

/* ---------- CTA BAND ---------- */
.band { background:var(--navy); color:var(--on-navy); position:relative; overflow:hidden; }
.band::before { content:""; position:absolute; left:50%; top:-40%; width:70%; height:180%; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(10,86,250,.2), transparent 70%); pointer-events:none; }
.band .wrap { text-align:center; padding-block:clamp(64px,8vw,108px); position:relative; z-index:1; }
.band h2 { font-family:var(--font-display); font-size:var(--fs-h1); text-transform:uppercase; letter-spacing:.005em; color:#fff; line-height:.96; }
.band h2 .em { color:var(--blue-bright); }
.band p { margin:20px auto 32px; max-width:48ch; }
.band .cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.band .re { margin-top:24px; font-family:var(--font-body); font-size:.84rem; color:var(--on-navy-dim); }

/* ---------- FOOTER ---------- */
footer.foot { background:var(--navy-ink); color:var(--on-navy-dim); border-top:1px solid var(--silver-line); }
footer.foot .wrap { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:30px; padding-block:56px; }
footer.foot .brand img { height:42px; }
footer.foot p { font-size:.86rem; max-width:34ch; margin:16px 0 0; }
footer.foot h4 { font-family:var(--font-body); font-weight:700; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--blue-bright); margin-bottom:14px; }
footer.foot a { display:block; font-size:.9rem; color:var(--on-navy-dim); padding:5px 0; transition:color .2s; cursor:pointer; }
footer.foot a:hover { color:#fff; }
.foot-b { border-top:1px solid var(--silver-line); }
.foot-b .wrap { display:flex; justify-content:space-between; gap:14px; padding-block:20px; font-family:var(--font-body); font-size:.68rem; letter-spacing:.02em; flex-wrap:wrap; }
.placeholder-tag { color:var(--blue-bright); }

/* ---------- reveal ---------- */
.reveal { opacity:0; transform:translateY(16px); animation:rise .85s var(--ease) forwards; }
@keyframes rise { to { opacity:1; transform:none; } }
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.28s}.d4{animation-delay:.4s}.d5{animation-delay:.52s}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .hero .wrap, .calc, .diff, .svc, .quotes, .steps { grid-template-columns:1fr; }
  .kpis { grid-template-columns:1fr; }
  .nav nav, .phone { display:none; }
  .stmt .row { grid-template-columns:auto 1fr; gap:16px; }
  .stmt .tag { display:none; }
  footer.foot .wrap { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .reveal{opacity:1; transform:none;} .tape .track{animation:none;}
}