/* ============================================================================
   DepotIQ marketing site — shared stylesheet.
   Brand tokens, components and responsive rules are reproduced verbatim from
   the approved design mockup (depotiq_pages.html). Do NOT re-theme: this is a
   locked brand (navy / amber / teal, Poppins). The single-file mockup's SPA
   page-toggle CSS is intentionally dropped — these are real separate pages.
   ============================================================================ */
:root{
  --ink:#0C1626; --navy:#102542; --navy2:#13243B; --navy3:#1C3354;
  --amber:#FF8A1E; --amber2:#FFB454; --amber3:#FF6F00;
  --teal:#15B8A6; --teal2:#0E8E80;
  --paper:#FBF8F2; --paper2:#F6F2EB; --card:#FFFFFF;
  --t1:#0C1626; --t2:#39495B; --t3:#76869A; --line:#E7E0D4;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Poppins',sans-serif;color:var(--t1);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
a{text-decoration:none;color:inherit;}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;border-radius:11px;padding:13px 22px;transition:transform .15s ease, box-shadow .15s ease;cursor:pointer;border:none;}
.btn-amber{background:linear-gradient(150deg,var(--amber),var(--amber3));color:#fff;box-shadow:0 12px 26px -12px rgba(255,138,30,.7);}
.btn-amber:hover{transform:translateY(-1px);box-shadow:0 16px 30px -12px rgba(255,138,30,.8);}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.18);}
.btn-ghost:hover{background:rgba(255,255,255,.12);}
.btn-ink{background:var(--ink);color:#fff;}
.btn-line{background:#fff;color:var(--ink);border:1.5px solid var(--line);}
.eyebrow{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;color:var(--amber);}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:10px 16px;border-radius:8px;z-index:100;}
.skip-link:focus{left:12px;top:12px;}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(12,22,38,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.07);}
.nav{display:flex;align-items:center;height:72px;}
.brand{display:flex;align-items:center;gap:11px;cursor:pointer;}
.mark{width:38px;height:38px;}
.wm{font-size:21px;font-weight:700;letter-spacing:-.4px;color:#fff;}
.wm b{color:var(--amber);}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:34px;}
.nav-links a{color:#c8d5e4;font-size:14.5px;font-weight:500;transition:color .15s;cursor:pointer;}
.nav-links a:hover{color:#fff;}
.nav-links a.np.active{color:#fff;font-weight:600;}
.nav-login{background:linear-gradient(150deg,var(--amber),var(--amber3));color:#fff!important;padding:9px 18px;border-radius:9px;font-weight:600;box-shadow:0 10px 22px -12px rgba(255,138,30,.7);}

/* ---------- hero ---------- */
.hero{background:
   radial-gradient(620px 420px at 88% -10%, rgba(255,138,30,.20), transparent 60%),
   radial-gradient(520px 420px at 0% 120%, rgba(21,184,166,.14), transparent 60%),
   linear-gradient(160deg,#0C1626 0%,#102542 55%,#0C1F3A 100%);
   color:#fff;padding:72px 0 0;position:relative;overflow:hidden;}
.hero-inner{text-align:center;max-width:840px;margin:0 auto;}
.pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:8px 17px;border-radius:100px;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;color:#ffd9af;margin-bottom:28px;}
.pill .d{width:6px;height:6px;border-radius:50%;background:var(--amber);}
h1{font-size:58px;line-height:1.04;font-weight:700;letter-spacing:-1.6px;}
h1 .hl{color:var(--amber);}
.hero p.sub{font-size:18px;color:#c8d5e4;font-weight:300;margin:26px auto 0;max-width:660px;line-height:1.6;}
.hero p.sub b{color:#fff;font-weight:600;}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:36px;}

/* dashboard mock */
.shot{margin:60px auto -90px;max-width:1000px;border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1);border-bottom:none;}
.shot .bar{height:40px;background:#0a1320;display:flex;align-items:center;padding:0 16px;gap:8px;}
.shot .bar .c{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18);}
.shot .bar .url{margin-left:14px;background:rgba(255,255,255,.07);border-radius:7px;height:21px;flex:1;max-width:280px;display:flex;align-items:center;padding:0 13px;font-size:11.5px;color:#7d8ea3;}
.dash{display:flex;background:#fff;height:330px;}
.side{width:210px;background:#0C1626;padding:16px 0;flex:none;}
.side .slogo{display:flex;align-items:center;gap:9px;padding:0 16px 16px;border-bottom:1px solid rgba(255,255,255,.08);}
.side .slogo .nm{font-size:11.5px;font-weight:700;color:#fff;line-height:1.2;}
.side .slogo .nm span{display:block;font-size:8px;letter-spacing:1.5px;color:var(--amber);font-weight:600;margin-top:2px;}
.side .cat{font-size:9px;letter-spacing:1.5px;color:#5a6a7d;text-transform:uppercase;padding:16px 16px 8px;}
.side .item{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:13px;color:#9fb0c4;}
.side .item.active{background:linear-gradient(90deg,var(--amber),var(--amber3));color:#fff;font-weight:600;}
.side .item .ic{width:15px;height:15px;}
.main{flex:1;padding:22px 24px;background:#FBF9F5;}
.main .topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.main h3{font-size:19px;font-weight:700;color:var(--ink);}
.main .live{font-size:10px;color:var(--t3);}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.kpi{background:#fff;border:1px solid #ece6db;border-radius:11px;padding:14px;}
.kpi .lab{font-size:11px;color:var(--t3);margin-bottom:7px;}
.kpi .val{font-size:23px;font-weight:700;letter-spacing:-.5px;}
.kpi .val.t{color:var(--teal2);} .kpi .val.b{color:#2563c9;} .kpi .val.n{color:var(--ink);} .kpi .val.a{color:var(--amber3);}
.kpi .sub{font-size:10px;color:var(--t3);margin-top:5px;}

/* ---------- home overview band ---------- */
.home-extra{background:var(--paper);padding:130px 0 96px;}
.sec-head{max-width:720px;}
.sec-head.center{margin:0 auto;text-align:center;}
.sec-head h1,.sec-head h2{font-size:38px;font-weight:700;letter-spacing:-1.1px;line-height:1.1;margin-top:10px;color:var(--ink);}
.sec-head p{font-size:16px;color:var(--t2);margin-top:18px;line-height:1.6;}
.hcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px;}
.hcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;}
.hcard .fi{width:42px;height:42px;border-radius:11px;background:var(--navy2);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.hcard h4{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.hcard p{font-size:13.5px;color:var(--t2);line-height:1.55;}
.home-cta{display:flex;gap:14px;justify-content:center;margin-top:46px;}

/* ---------- sections ---------- */
section{position:relative;}
.features{background:var(--paper);padding:104px 0 96px;}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px;}
.fcol .ftag{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--teal2);font-weight:700;margin-bottom:18px;}
.fcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:16px;}
.fcard .fi{width:38px;height:38px;border-radius:10px;background:var(--navy2);display:flex;align-items:center;justify-content:center;margin-bottom:13px;}
.fcard h4{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:7px;}
.fcard p{font-size:13px;color:var(--t2);line-height:1.55;}

/* sourcing highlight */
.spot{margin-top:30px;border-radius:16px;border:1.5px solid #FFCF9E;background:linear-gradient(120deg,#FFF6EC,#FBF8F2);padding:28px 30px;display:flex;gap:20px;align-items:center;}
.spot .si{width:52px;height:52px;flex:none;border-radius:13px;background:linear-gradient(150deg,var(--amber),var(--amber3));display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px -10px rgba(255,138,30,.6);}
.spot .stag{display:inline-block;background:var(--teal);color:#fff;font-size:9px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;padding:3px 10px;border-radius:100px;margin-bottom:7px;}
.spot h4{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:5px;letter-spacing:-.3px;}
.spot p{font-size:14px;color:var(--t2);line-height:1.55;}
.spot b{color:var(--ink);}

/* pricing */
.pricing{color:#fff;padding:104px 0;
   background:radial-gradient(600px 300px at 100% 0%, rgba(255,138,30,.14), transparent 60%), linear-gradient(160deg,#0C1626,#13243B);}
.pricing .sec-head{text-align:center;margin:0 auto;}
.pricing .sec-head h1,.pricing .sec-head h2{color:#fff;}
.pricing .eyebrow{color:var(--amber2);}
.pricing .sec-head p{color:#c8d5e4;}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:760px;margin:50px auto 0;}
.tier{border:1.5px solid rgba(255,255,255,.16);border-radius:18px;padding:30px;background:rgba(255,255,255,.03);}
.tier.found{border-color:var(--amber);background:rgba(255,138,30,.09);}
.tier .tn{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#9fb0c4;font-weight:700;}
.tier.found .tn{color:var(--amber2);}
.tier .price{font-size:48px;font-weight:700;letter-spacing:-1px;margin-top:14px;line-height:1;}
.tier .unit{font-size:13px;color:#9fb0c4;margin-top:6px;}
.tier .note{font-size:12px;margin-top:9px;font-weight:600;}
.tier .note.g{color:#9fb0c4;} .tier .note.a{color:var(--amber2);}
.tier ul{list-style:none;margin-top:22px;border-top:1px solid rgba(255,255,255,.1);padding-top:20px;}
.tier li{display:flex;gap:10px;font-size:13.5px;color:#dce6f1;margin-bottom:11px;line-height:1.4;}
.tier li .ck{color:var(--teal);font-weight:700;}
.tier .tbtn{display:block;text-align:center;margin-top:22px;border-radius:11px;padding:13px;font-weight:600;font-size:14.5px;cursor:pointer;}
.tier .tbtn.amber{background:linear-gradient(150deg,var(--amber),var(--amber3));color:#fff;}
.tier .tbtn.ghost{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.16);}
.fineprint{text-align:center;font-size:12px;color:#76869a;margin-top:30px;}

/* contact */
.contact{background:var(--paper2);padding:120px 0;text-align:center;}
.contact h1,.contact h2{font-size:36px;font-weight:700;letter-spacing:-1px;color:var(--ink);}
.contact p{font-size:16px;color:var(--t2);margin:16px auto 0;max-width:540px;line-height:1.6;}
.contact .cbtns{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap;}
.contact .mail{margin-top:22px;font-size:14px;color:var(--t2);}
.contact .mail b{color:var(--ink);}

/* ---------- legal pages (terms / privacy) ---------- */
.legal-hero{background:linear-gradient(160deg,#0C1626,#102542);color:#fff;padding:70px 0 56px;}
.legal-hero .eyebrow{color:var(--amber2);}
.legal-hero h1{font-size:40px;letter-spacing:-1px;margin-top:12px;}
.legal-hero .meta{color:#c8d5e4;font-size:14px;margin-top:14px;}
.draft-banner{background:rgba(255,138,30,.12);border:1px solid rgba(255,138,30,.45);color:#ffd9af;display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:100px;font-size:12.5px;font-weight:600;margin-top:20px;}
.draft-banner .d{width:7px;height:7px;border-radius:50%;background:var(--amber);}
.legal{background:var(--paper);padding:60px 0 90px;}
.legal .doc{max-width:820px;margin:0 auto;}
.legal h2{font-size:22px;font-weight:700;color:var(--ink);margin:38px 0 12px;letter-spacing:-.3px;}
.legal h2:first-child{margin-top:0;}
.legal h3{font-size:16px;font-weight:700;color:var(--ink);margin:22px 0 8px;}
.legal p{font-size:14.5px;color:var(--t2);line-height:1.7;margin-bottom:12px;}
.legal ul{margin:0 0 14px 20px;}
.legal li{font-size:14.5px;color:var(--t2);line-height:1.7;margin-bottom:7px;}
.legal a{color:var(--teal2);font-weight:600;}
.legal .toc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-bottom:34px;}
.legal .toc h4{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);margin-bottom:12px;}
.legal .toc a{display:block;font-size:14px;margin-bottom:8px;}

/* footer */
footer{background:var(--ink);color:#9fb0c4;padding:48px 0 38px;}
.foot{display:flex;align-items:flex-start;gap:40px;flex-wrap:wrap;}
.foot .fbrand{flex:1;min-width:240px;}
.foot .fbrand .wm{margin-bottom:10px;}
.foot .fbrand p{font-size:13px;line-height:1.6;max-width:320px;}
.foot .fcol h5{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#5a6a7d;margin-bottom:14px;}
.foot .fcol a{display:block;font-size:13.5px;color:#9fb0c4;margin-bottom:9px;transition:color .15s;cursor:pointer;}
.foot .fcol a:hover{color:#fff;}
.foot-base{border-top:1px solid rgba(255,255,255,.08);margin-top:36px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:#5a6a7d;}

@media(max-width:880px){
  h1{font-size:40px;}
  .legal-hero h1{font-size:31px;}
  .nav-links{gap:18px;}
  .nav-links a:not(.nav-login){display:none;}
  .fgrid,.hcards{grid-template-columns:1fr;}
  .tiers{grid-template-columns:1fr;}
  .dash .side{display:none;}
  .kpis{grid-template-columns:repeat(2,1fr);}
  .spot{flex-direction:column;align-items:flex-start;}
}