/* ===========================================================
   PipeValue — shared site styles
   =========================================================== */
:root{
  --blue-50:#eef4ff;--blue-100:#d9e6ff;--blue-500:#3b6cff;--blue-600:#2f55d6;--blue-700:#2543ad;
  --violet-500:#7c3aed;--value-400:#10e7a8;--value-500:#06d6a0;--value-600:#03a87c;
  --ink:#0b1020;--s900:#0f172a;--s700:#334155;--s500:#64748b;--s300:#cbd5e1;--s200:#e2e8f0;--s100:#f1f5f9;--s50:#f8fafc;
  --g-brand:linear-gradient(135deg,#3b6cff 0%,#7c3aed 100%);
  --g-value:linear-gradient(135deg,#3b6cff 0%,#06d6a0 100%);
  --g-ink:linear-gradient(160deg,#0b1020 0%,#15214d 100%);
  --fd:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --fb:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--fb);color:var(--s900);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--fd);margin:0;letter-spacing:-.02em;line-height:1.08}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap-sm{max-width:820px;margin:0 auto;padding:0 24px}
.grad-text{background:var(--g-value);-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fb);font-weight:600;font-size:15px;border-radius:12px;padding:13px 24px;border:none;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--g-brand);color:#fff;box-shadow:0 14px 30px -12px rgba(59,108,255,.85)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-dark{background:var(--ink);color:#fff}
.btn-outline{background:#fff;color:var(--s900);border:1px solid var(--s200)}
.btn-lg{padding:16px 30px;font-size:16px}

/* nav */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease}
header.nav.scrolled{background:rgba(11,16,32,.72);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:11px;color:#fff}
.mark{width:34px;height:34px;border-radius:10px;background:var(--g-brand);display:grid;place-items:center;font-family:var(--fd);font-weight:800;color:#fff;font-size:18px}
.brand b{font-family:var(--fd);font-weight:800;font-size:19px}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:#c7d2fe;font-size:14px;font-weight:500}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;margin:4px 0;transition:.2s}
@media(max-width:820px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(11,16,32,.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.1);
    padding:10px 18px 18px;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 4px;color:#dbe4ff;border-bottom:1px solid rgba(255,255,255,.06)}
  .nav-links a.btn{margin-top:12px;justify-content:center;border-bottom:0}
}

/* hero (home + page heroes) */
.hero{background:var(--g-ink);color:#fff;position:relative;overflow:hidden;padding:142px 0 110px;text-align:center}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% -5%,rgba(59,108,255,.5),rgba(124,58,237,.14) 48%,transparent 72%);pointer-events:none}
.hero::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(6,214,160,.18),transparent 70%);bottom:-220px;right:-120px;pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero.compact{padding:138px 0 78px}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#c7d2fe;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:7px 15px;border-radius:999px;margin-bottom:26px}
.tag .dot{width:7px;height:7px;border-radius:50%;background:var(--value-400);box-shadow:0 0 12px var(--value-400)}
.hero h1{font-size:60px;font-weight:800;max-width:16ch;margin:0 auto}
.hero.compact h1{font-size:48px;max-width:20ch}
.hero p.sub{font-size:20px;color:#c7d2fe;max-width:60ch;margin:24px auto 0}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero .micro{margin-top:18px;font-size:13px;color:#94a3b8}
@media(max-width:760px){.hero h1{font-size:40px}.hero.compact h1{font-size:34px}.hero p.sub{font-size:17px}}

/* hero visual card */
.dash{max-width:880px;margin:54px auto -150px;background:#fff;color:var(--s900);border-radius:20px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);border:1px solid var(--s200);overflow:hidden;position:relative;z-index:3;text-align:left}
.dash .bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--s200);background:var(--s50)}
.dash .bar i{width:11px;height:11px;border-radius:50%;background:var(--s300);display:inline-block}
.dash .body{padding:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kpi{border:1px solid var(--s200);border-radius:14px;padding:16px;background:#fff}
.kpi .l{font-size:12px;color:var(--s500);font-weight:500}
.kpi .v{font-family:var(--fd);font-weight:800;font-size:30px;margin-top:6px}
.kpi.hot{background:var(--g-ink);border:none;color:#fff}
.kpi.hot .l{color:#c7d2fe}
.flow{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px dashed var(--s200);padding-top:18px;font-size:13px;color:var(--s700)}
.flow .node{display:flex;align-items:center;gap:8px;font-weight:600;background:var(--s100);padding:8px 13px;border-radius:10px}
.flow .arrow{color:var(--blue-500);font-weight:800}
.flow .node.val{background:rgba(6,214,160,.12);color:var(--value-600)}
@media(max-width:680px){.dash .body{grid-template-columns:1fr}.dash{margin-bottom:-90px}}

/* logos strip */
.logos{padding:120px 0 56px;text-align:center}
.logos.tight{padding:64px 0 10px}
.logos p{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--s500);font-weight:600;margin:0 0 22px}
.logos .row{display:flex;gap:42px;justify-content:center;flex-wrap:wrap;align-items:center;font-family:var(--fd);font-weight:700;font-size:19px;color:var(--s300)}

/* section primitives */
section.block{padding:84px 0}
.eyebrow{font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-600)}
.h2{font-size:40px;font-weight:800;margin:12px 0 0;max-width:20ch}
.lead{font-size:18px;color:var(--s500);max-width:62ch;margin:16px 0 0}
.center{text-align:center}.center .h2,.center .lead{margin-left:auto;margin-right:auto}

/* problem / two-up */
.prob{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.prob ul{list-style:none;padding:0;margin:24px 0 0}
.prob li{display:flex;gap:13px;padding:11px 0;font-size:16px;color:var(--s700)}
.prob li .x{flex:none;width:24px;height:24px;border-radius:7px;background:rgba(244,63,94,.1);color:#e11d48;display:grid;place-items:center;font-weight:700;font-size:14px}
.solve{background:var(--g-ink);border-radius:22px;padding:34px;color:#fff}
.solve h3{font-size:24px;font-weight:800}
.solve li{color:#dbe4ff}
.solve li .x{background:rgba(6,214,160,.16);color:var(--value-400)}
@media(max-width:760px){.prob{grid-template-columns:1fr;gap:28px}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.step{background:#fff;border:1px solid var(--s200);border-radius:18px;padding:26px;position:relative}
.step .n{width:40px;height:40px;border-radius:11px;background:var(--g-brand);color:#fff;font-family:var(--fd);font-weight:800;display:grid;place-items:center;font-size:18px;margin-bottom:16px}
.step h3{font-size:19px;font-weight:700}
.step p{font-size:15px;color:var(--s500);margin:9px 0 0}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* feature cards */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.fcard{border:1px solid var(--s200);border-radius:16px;padding:24px;background:var(--s50)}
.fcard .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;background:var(--blue-50);color:var(--blue-600);font-size:20px}
.fcard.v .ic{background:rgba(6,214,160,.12);color:var(--value-600)}
.fcard h3{font-size:17px;font-weight:700}
.fcard p{font-size:14.5px;color:var(--s500);margin:8px 0 0}
@media(max-width:760px){.feat{grid-template-columns:1fr}}

/* alternating split row (text + visual) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;padding:46px 0}
.split.rev .split-text{order:2}
.split .pill{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-700);background:var(--blue-50);padding:6px 12px;border-radius:999px}
.split h3{font-size:28px;font-weight:800;margin:14px 0 0}
.split p{font-size:16px;color:var(--s500);margin:12px 0 0}
.split ul{list-style:none;padding:0;margin:16px 0 0}
.split li{display:flex;gap:10px;padding:6px 0;font-size:15px;color:var(--s700)}
.split li .c{flex:none;color:var(--value-600);font-weight:800}
.visual{border:1px solid var(--s200);border-radius:18px;background:var(--s50);padding:22px;box-shadow:0 24px 50px -30px rgba(15,23,42,.4)}
.visual.dark{background:var(--g-ink);border:none;color:#fff}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:26px;padding:30px 0}.split.rev .split-text{order:0}}

/* mini code / chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:8px;background:var(--s100);color:var(--s700)}
.chip.b{background:var(--blue-50);color:var(--blue-700)}
.chip.v{background:rgba(6,214,160,.12);color:var(--value-600)}
.codeline{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:#dbe4ff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 14px;margin-top:8px;overflow:auto}

/* metric band */
.band{background:var(--g-value);padding:64px 0}
.band .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;color:#04221a}
.band .big{font-family:var(--fd);font-weight:800;font-size:50px;line-height:1}
.band .cap{font-size:15px;font-weight:600;margin-top:8px;opacity:.85}
@media(max-width:680px){.band .wrap{grid-template-columns:1fr;gap:30px}.band .big{font-size:40px}}

/* pricing */
.price{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;max-width:900px;margin-left:auto;margin-right:auto}
.plan{border:1px solid var(--s200);border-radius:22px;padding:32px;background:#fff;display:flex;flex-direction:column}
.plan.pop{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--g-brand) border-box;box-shadow:0 30px 60px -30px rgba(59,108,255,.5)}
.plan .badge{align-self:flex-start;font-size:12px;font-weight:700;color:#fff;background:var(--g-brand);padding:5px 12px;border-radius:999px;margin-bottom:14px}
.plan h3{font-size:21px;font-weight:800}
.plan .amt{font-family:var(--fd);font-weight:800;font-size:46px;margin:14px 0 2px}
.plan .amt span{font-size:16px;font-weight:600;color:var(--s500);font-family:var(--fb)}
.plan .add{font-size:14px;color:var(--blue-600);font-weight:600;margin-bottom:18px}
.plan .incl{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--value-600);background:rgba(6,214,160,.1);padding:5px 11px;border-radius:999px;margin-bottom:16px}
.plan ul{list-style:none;padding:0;margin:6px 0 24px;flex:1}
.plan li{display:flex;gap:10px;padding:7px 0;font-size:15px;color:var(--s700)}
.plan li .c{flex:none;color:var(--value-600);font-weight:800}
.plan .btn{width:100%;justify-content:center}
@media(max-width:760px){.price{grid-template-columns:1fr}}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;margin-top:40px;font-size:15px}
.cmp th,.cmp td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--s200)}
.cmp thead th{font-family:var(--fd);font-weight:800;font-size:16px}
.cmp tbody td:not(:first-child),.cmp thead th:not(:first-child){text-align:center;width:170px}
.cmp td:first-child{color:var(--s700)}
.cmp .yes{color:var(--value-600);font-weight:800}
.cmp .no{color:var(--s300)}
.cmp tr:hover td{background:var(--s50)}
@media(max-width:760px){.cmp{font-size:13px}.cmp th,.cmp td{padding:11px 10px}.cmp tbody td:not(:first-child),.cmp thead th:not(:first-child){width:auto}}

/* FAQ accordion */
.faq{max-width:820px;margin:40px auto 0}
.faq details{border:1px solid var(--s200);border-radius:14px;padding:4px 20px;margin-bottom:12px;background:#fff;transition:border-color .2s}
.faq details[open]{border-color:var(--blue-500);box-shadow:0 14px 30px -22px rgba(59,108,255,.5)}
.faq summary{list-style:none;cursor:pointer;font-family:var(--fd);font-weight:700;font-size:16.5px;padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:26px;height:26px;border-radius:8px;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;font-weight:800;transition:.2s}
.faq details[open] summary .pm{background:var(--g-brand);color:#fff;transform:rotate(45deg)}
.faq p{margin:0 0 18px;color:var(--s500);font-size:15px}
.faq .cat{font-family:var(--fd);font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-600);margin:34px 0 14px}

/* guides grid */
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.guide{display:block;border:1px solid var(--s200);border-radius:16px;overflow:hidden;background:#fff;transition:transform .15s ease,box-shadow .15s ease}
.guide:hover{transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(15,23,42,.5)}
.guide .top{height:96px;background:var(--g-brand);position:relative}
.guide .top.v{background:var(--g-value)}.guide .top.k{background:var(--g-ink)}
.guide .top span{position:absolute;left:18px;bottom:14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.guide .b{padding:20px}
.guide h3{font-size:17px;font-weight:700}
.guide p{font-size:14px;color:var(--s500);margin:8px 0 0}
.guide .more{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--blue-600)}
@media(max-width:820px){.guide-grid{grid-template-columns:1fr}}

/* values / about */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.value{border:1px solid var(--s200);border-radius:16px;padding:24px;background:var(--s50)}
.value h3{font-size:18px;font-weight:700;margin-bottom:8px}
.value p{font-size:14.5px;color:var(--s500);margin:0}
.prose{max-width:720px;margin:0 auto}
.prose p{font-size:17px;color:var(--s700);margin:0 0 18px}
@media(max-width:820px){.values{grid-template-columns:1fr}}

/* final cta */
.final{background:var(--g-ink);color:#fff;text-align:center;padding:90px 0;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 70% at 50% 120%,rgba(6,214,160,.25),transparent 60%)}
.final .wrap{position:relative}
.final h2{font-size:44px;font-weight:800;max-width:18ch;margin:0 auto}
.final p{color:#c7d2fe;font-size:18px;margin:18px auto 32px;max-width:50ch}
@media(max-width:760px){.final h2{font-size:32px}}

/* dense footer */
.site-footer{background:var(--ink);color:#94a3b8;padding:64px 0 30px;border-top:1px solid rgba(255,255,255,.08)}
.site-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:30px}
.site-footer .col h4{font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#e2e8f0;margin:0 0 14px}
.site-footer .col a{display:block;color:#94a3b8;font-size:14.5px;padding:5px 0}
.site-footer .col a:hover{color:#fff}
.site-footer .about p{font-size:14px;max-width:30ch;margin:14px 0 0;color:#94a3b8}
.site-footer .brand b{color:#fff}
.site-footer .bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-size:13.5px}
.site-footer .bottom a{color:#94a3b8}.site-footer .bottom a:hover{color:#fff}
@media(max-width:900px){.site-footer .cols{grid-template-columns:1fr 1fr}.site-footer .about{grid-column:1/-1}}
@media(max-width:520px){.site-footer .cols{grid-template-columns:1fr 1fr}}

/* cookie consent (opt-out) */
.pv-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:580px;margin:0 auto;
  background:var(--ink);color:#cbd5e1;border:1px solid rgba(255,255,255,.12);border-radius:16px;
  padding:16px 20px;box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:13.5px;line-height:1.5}
.pv-consent p{margin:0;flex:1 1 280px}
.pv-consent a{color:#fff;text-decoration:underline}
.pv-consent .actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.pv-consent button{font-family:var(--fb);font-size:14px;cursor:pointer}
.pv-consent .decline{background:none;border:0;color:#94a3b8;padding:9px 12px;border-radius:10px}
.pv-consent .decline:hover{color:#fff}
.pv-consent .accept{background:var(--g-brand);color:#fff;border:0;border-radius:10px;padding:10px 20px;font-weight:600}
@media(max-width:520px){.pv-consent{align-items:stretch}.pv-consent .actions{margin-left:0;justify-content:flex-end}}