/*
  CØDE N/ME homepage — "Panel" light design.
  Ported from the Claude Design project (CODE NAME Landing Panel.html).
  Every selector is scoped under .cnp so it never collides with globals.css
  (the dark inner-page theme) which is loaded site-wide.
*/

.cnp {
  --paper:#efefea; --paper-2:#e9e9e3; --ink:#161614; --ink-2:#43433c; --muted:#75756b; --line:#dbdbd3;
  --dark:#161615; --dark-2:#1d1d1b; --dark-line:#33332f;
  --lime:#d8fa0f; --lime-deep:#7e9400; --lime-ink:#161614;
  /* Acid Lime scale (hue 69) — generated via color-palette, brand pinned at 500. Additive. */
  --lime-50:#fcfef1; --lime-100:#f8fdde; --lime-200:#f2fbbb; --lime-300:#ebfb8d;
  --lime-400:#e1fb4b; --lime-500:#d8fa0f; --lime-600:#c1e203; --lime-700:#a0bc01;
  --lime-800:#829900; --lime-900:#5f7000; --lime-950:#343d00;
  --accent:var(--lime-500); --accent-ink:#161614; --accent-on-light:var(--lime-900);
  --accent-hover:var(--lime-600); --focus-ring:rgba(216,250,15,.5); --accent-tint:rgba(216,250,15,.12);
  --on-dark:#f2f2ec; --on-dark-2:rgba(242,242,236,.62); --on-dark-3:rgba(242,242,236,.4);
  --sans:'Inter',system-ui,sans-serif; --disp:'Rajdhani','Inter',sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,3.5vw,40px); --maxw:1320px;
}
.cnp * { box-sizing:border-box; }
.cnp { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
.cnp { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; }
.cnp a { color:inherit; text-decoration:none; }
.cnp img, .cnp svg { display:block; max-width:100%; }
.cnp ::selection { background:var(--lime); color:var(--lime-ink); }
.cnp .mono { font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.cnp .mono.sm { font-size:10px; letter-spacing:.18em; }
.cnp .disp { font-family:var(--disp); font-weight:700; line-height:1.02; letter-spacing:-.005em; }
.cnp .wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.cnp .btn { font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; display:inline-flex; align-items:center; gap:11px; padding:15px 24px; cursor:pointer; border:1px solid var(--ink); color:var(--ink); background:transparent; transition:.22s ease; }
.cnp .btn .arr { transition:transform .22s ease; }
.cnp .btn:hover { background:var(--ink); color:var(--paper); }
.cnp .btn:hover .arr { transform:translateX(4px); }
.cnp .btn.primary { background:var(--lime); border-color:var(--lime); color:var(--lime-ink); }
.cnp .btn.primary:hover { background:#e6ff3a; border-color:#e6ff3a; color:var(--lime-ink); transform:translateY(-1px); }
.cnp .btn.on-dark { border-color:var(--dark-line); color:var(--on-dark); }
.cnp .btn.on-dark:hover { background:var(--lime); border-color:var(--lime); color:var(--lime-ink); }
.cnp .nav { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter:blur(12px); }
.cnp .nav .wrap { display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }
.cnp .nav .logo { width:180px; color:var(--ink); }
.cnp .nav .logo svg { width:180px; height:auto; }
.cnp .nav .logo svg path { fill:currentColor; }
.cnp .navlinks { display:flex; gap:6px; }
.cnp .navlinks a { font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); padding:9px 14px; transition:color .2s; }
.cnp .navlinks a:hover { color:var(--ink); }
@media(max-width:900px) {
.cnp .navlinks, .cnp .nav .btn { display:none; }
}
.cnp .shell { padding:0 var(--gutter) clamp(16px,3vw,28px); }
.cnp .container-dark { background:var(--dark); color:var(--on-dark); border-radius:28px; position:relative; overflow:hidden; max-width:var(--maxw); margin-inline:auto; }
.cnp .cd-pad { padding:clamp(28px,4vw,56px); }
.cnp .hero-grid { display:grid; grid-template-columns:1.04fr 0.96fr; min-height:min(76vh,640px); }
.cnp .hero-left { padding:clamp(34px,4vw,62px); display:flex; flex-direction:column; justify-content:center; }
.cnp .hero-right { position:relative; border-left:1px solid var(--dark-line); overflow:hidden; min-height:340px; }
.cnp .hero-eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.cnp .hero-eyebrow .ln { height:1px; width:42px; background:var(--dark-line); }
.cnp .hero-eyebrow .t { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); }
.cnp .hero h1 { margin:0; font-family:var(--disp); font-weight:700; font-size:clamp(38px,4.6vw,68px); line-height:1.0; letter-spacing:-.015em; max-width:13ch; }
.cnp .hero h1 .lime { color:var(--lime); }
.cnp .hero .sub { font-size:clamp(15px,1.2vw,17px); color:var(--on-dark-2); max-width:46ch; margin:30px 0 0; line-height:1.65; }
.cnp .hero .ctarow { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:34px; }
.cnp .hero .micro { font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--on-dark-3); font-style:normal; max-width:24ch; }
.cnp .anim-meta { position:absolute; z-index:3; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-3); }
.cnp .crop { position:absolute; width:13px; height:13px; pointer-events:none; z-index:4; }
.cnp .crop::before, .cnp .crop::after { content:""; position:absolute; background:var(--lime); }
.cnp .crop::before { width:13px; height:1.5px; top:0; left:0; }
.cnp .crop::after { width:1.5px; height:13px; top:0; left:0; }
.cnp .crop.tr { right:0; top:0; transform:scaleX(-1); }
.cnp .crop.bl { left:0; bottom:0; transform:scaleY(-1); }
.cnp .crop.br { right:0; bottom:0; transform:scale(-1,-1); }
@media(max-width:860px) {
.cnp .hero-grid { grid-template-columns:1fr; }
.cnp .hero-right { border-left:0; border-top:1px solid var(--dark-line); min-height:300px; }
}
.cnp .cd-strip { display:flex; justify-content:space-between; align-items:center; padding:0 clamp(34px,4vw,62px); height:46px; border-bottom:1px solid var(--dark-line); }
.cnp .cd-strip .live { color:var(--lime); display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.cnp .cd-strip .live .d { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.cnp .sec { padding-block:clamp(56px,8vw,104px); }
.cnp .shead { max-width:720px; margin-bottom:clamp(30px,4vw,52px); }
.cnp .kick { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.cnp .kick .sq { width:7px; height:7px; background:var(--lime); }
.cnp .kick span { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.cnp .h2 { font-family:var(--disp); font-weight:700; font-size:clamp(28px,3.6vw,46px); line-height:1.05; margin:0; letter-spacing:-.01em; }
.cnp .caps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cnp .capcard { border:1px solid var(--line); border-radius:18px; padding:30px 28px; background:#fbfbf8; transition:.25s; }
.cnp .capcard:hover { border-color:var(--ink); transform:translateY(-3px); }
.cnp .capcard .n { font-family:var(--mono); font-size:12px; color:var(--lime-deep); margin-bottom:32px; display:flex; justify-content:space-between; }
.cnp .capcard h3 { font-family:var(--disp); font-weight:700; font-size:23px; letter-spacing:.01em; margin:0 0 10px; }
.cnp .capcard p { margin:0; font-size:14px; color:var(--ink-2); line-height:1.65; }
@media(max-width:820px) {
.cnp .caps { grid-template-columns:1fr; }
}
.cnp .cta-dark { position:relative; overflow:hidden; }
.cnp .cta-dark .ast { position:absolute; right:-3vw; top:50%; transform:translateY(-50%); font-size:48vh; line-height:0; color:rgba(255,255,255,.03); pointer-events:none; }
.cnp .cta-dark .inner { position:relative; z-index:2; padding:clamp(44px,6vw,82px) clamp(34px,5vw,72px); display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cnp .cta-dark h2 { font-family:var(--disp); font-weight:700; font-size:clamp(30px,4.4vw,58px); line-height:1; margin:0; max-width:16ch; color:var(--on-dark); }
.cnp .cta-dark .r { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.cnp .foot { padding:clamp(40px,5vw,64px) 0 30px; }
.cnp .foot .top { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px; }
.cnp .foot .logo { width:210px; color:var(--ink); }
.cnp .foot .logo svg { width:210px; height:auto; }
.cnp .foot .logo svg path { fill:currentColor; }
.cnp .foot .blurb { color:var(--muted); font-size:13px; line-height:1.7; max-width:34ch; margin:18px 0 0; }
.cnp .foot h5 { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; }
.cnp .foot ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.cnp .foot a { font-family:var(--mono); font-size:12.5px; color:var(--ink-2); }
.cnp .foot a:hover { color:var(--lime-deep); }
.cnp .foot .bottom { border-top:1px solid var(--line); margin-top:40px; padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cnp .foot .bottom span { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
@media(max-width:720px) {
.cnp .foot .top { grid-template-columns:1fr 1fr; }
}
.cnp .trustband { display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(16px,2.4vw,26px); padding-block:clamp(20px,3vw,36px) clamp(14px,2vw,24px); }
.cnp .trust .h2 { font-size:clamp(24px,2.8vw,34px); }
.cnp .trustband-l { max-width:64ch; }
.cnp .trustband-l .kick { justify-content:center; margin-bottom:14px; }
.cnp .trustband-l .h2 { font-size:clamp(34px,4.8vw,58px); }
.cnp .trustband-l .lead { margin:16px auto 0; font-size:clamp(17px,1.6vw,21px); }
.cnp .trustband-r { display:flex; flex-direction:column; gap:18px; align-items:center; }
.cnp .trustfigs { display:flex; gap:clamp(32px,5vw,56px); justify-content:center; }
.cnp .tfig { display:flex; flex-direction:column; gap:4px; align-items:center; }
.cnp .tfig .v { font-family:var(--disp); font-weight:700; font-size:clamp(28px,3vw,40px); line-height:1; color:var(--ink); letter-spacing:-.01em; }
.cnp .tfig .k { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.cnp .trustcta { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
@media(max-width:860px) {
.cnp .trustfigs { gap:48px; }
}
.cnp .lead { font-size:17px; color:var(--ink-2); line-height:1.7; margin:18px 0 0; max-width:62ch; }
.cnp .lead.on { color:var(--on-dark-2); }
.cnp .kick.on span { color:var(--on-dark-2) !important; }
.cnp .triggers { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-top:38px; background:#fbfbf8; }
.cnp .trig { display:flex; gap:16px; padding:24px 26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.cnp .trig:nth-child(2n) { border-right:0; }
.cnp .trig .mk { width:9px; height:9px; background:var(--lime-deep); transform:rotate(45deg); flex:none; margin-top:6px; }
.cnp .trig p { margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.55; }
.cnp .trig strong { color:var(--ink); font-weight:600; }
.cnp .trig.full { grid-column:1/-1; border-right:0; border-bottom:0; }
@media(max-width:760px) {
.cnp .triggers { grid-template-columns:1fr; }
.cnp .trig { border-right:0; }
}
.cnp .statgrid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--dark-line); }
.cnp .statc { padding:34px 30px; border-right:1px solid var(--dark-line); }
.cnp .statc:last-child { border-right:0; }
.cnp .statc .fig { font-family:var(--disp); font-weight:700; font-size:clamp(30px,3.4vw,46px); line-height:1; color:var(--lime); }
.cnp .statc .desc { font-size:13px; color:var(--on-dark-2); margin-top:13px; line-height:1.55; }
.cnp .src { font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--on-dark-3); }
@media(max-width:820px) {
.cnp .statgrid { grid-template-columns:1fr 1fr; }
.cnp .statc:nth-child(2n) { border-right:0; }
}
.cnp .steps { margin-top:34px; border-top:1px solid var(--line); }
.cnp .step { display:grid; grid-template-columns:80px 1fr; gap:24px; padding:30px 0; border-bottom:1px solid var(--line); }
.cnp .step .n { font-family:var(--disp); font-weight:700; font-size:38px; color:var(--lime-deep); line-height:1; }
.cnp .step h3 { font-family:var(--disp); font-weight:700; font-size:21px; margin:0 0 8px; }
.cnp .step h3 .free { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--lime-deep); margin-left:10px; }
.cnp .step p { margin:0; color:var(--ink-2); font-size:15px; line-height:1.7; max-width:72ch; }
@media(max-width:620px) {
.cnp .step { grid-template-columns:1fr; gap:8px; }
}
.cnp .cases { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--dark-line); }
.cnp .case { padding:32px 30px; border-right:1px solid var(--dark-line); display:flex; flex-direction:column; }
.cnp .case:last-child { border-right:0; }
.cnp .case .nm { font-family:var(--disp); font-weight:700; font-size:21px; margin:0 0 12px; color:var(--on-dark); }
.cnp .case p { margin:0 0 18px; color:var(--on-dark-2); font-size:14px; line-height:1.6; }
.cnp .case .res { margin-top:auto; padding-top:16px; border-top:1px solid var(--dark-line); }
.cnp .case .res .k { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-3); margin-bottom:6px; }
.cnp .case .res .v { font-family:var(--disp); font-weight:600; font-size:16px; color:var(--lime); line-height:1.2; }
@media(max-width:820px) {
.cnp .cases { grid-template-columns:1fr; }
.cnp .case { border-right:0; border-bottom:1px solid var(--dark-line); }
.cnp .case:last-child { border-bottom:0; }
}
.cnp .proofx { display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(24px,3.5vw,54px); align-items:start; }
.cnp .proof-tabs { display:flex; flex-direction:column; gap:4px; }
.cnp .proof-tab { display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:12px; text-align:left; background:transparent; border:1px solid transparent; border-radius:15px; padding:20px 22px; cursor:pointer; transition:background .22s ease, border-color .22s ease; }
.cnp .proof-tab .lbl { grid-column:1; font-family:var(--disp); font-weight:700; font-size:clamp(19px,1.9vw,25px); line-height:1.1; color:var(--on-dark-2); transition:color .2s; }
.cnp .proof-tab .meta { grid-column:1; grid-row:2; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-3); margin-top:7px; }
.cnp .proof-tab .chev { grid-column:2; grid-row:1 / span 2; font-family:var(--mono); font-size:15px; color:var(--lime); opacity:0; transform:translateX(-6px); transition:opacity .22s ease, transform .22s ease; }
.cnp .proof-tab:hover .lbl { color:var(--on-dark); }
.cnp .proof-tab.active { border-color:var(--dark-line); background:rgba(242,242,236,.035); }
.cnp .proof-tab.active .lbl { color:var(--on-dark); }
.cnp .proof-tab.active .chev { opacity:1; transform:none; }
.cnp .proof-stage { display:flex; flex-direction:column; }
.cnp .bwin { border:1px solid var(--dark-line); border-radius:14px; overflow:hidden; background:#0e0e0d; box-shadow:0 34px 70px -28px rgba(0,0,0,.7); }
.cnp .bwin-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--dark-line); background:#161614; }
.cnp .bwin-bar .tl { width:11px; height:11px; border-radius:50%; background:#2c2c28; flex:none; }
.cnp .bwin-url { margin-left:14px; flex:1; font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--on-dark-3); background:#0e0e0d; border:1px solid var(--dark-line); border-radius:7px; padding:6px 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cnp .bwin-body { aspect-ratio:16 / 10; background:#0a0a09; }
.cnp .bwin-body image-slot { width:100%; height:100%; display:block; }
.cnp .proof-cap { padding-top:28px; }
.cnp .proof-cap h3 { font-family:var(--disp); font-weight:700; font-size:clamp(26px,3vw,40px); line-height:1; margin:0 0 14px; color:var(--on-dark); }
.cnp .proof-cap p { margin:0; color:var(--on-dark-2); font-size:15px; line-height:1.7; max-width:58ch; }
.cnp .proof-res { display:flex; flex-direction:column; gap:7px; margin-top:20px; padding-top:18px; border-top:1px solid var(--dark-line); }
.cnp .proof-res .k { font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--on-dark-3); }
.cnp .proof-res .v { font-family:var(--disp); font-weight:600; font-size:17px; color:var(--lime); line-height:1.3; max-width:48ch; }
.cnp .proof-panel { display:none; }
.cnp .proof-panel.active { display:block; }
@media(max-width:860px) {
.cnp .proofx { grid-template-columns:1fr; }
}
.cnp .chips { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.cnp .chip { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:11px 16px; }
.cnp .chip.on { background:var(--lime); border-color:var(--lime); color:var(--lime-ink); }

/* WHY US — team */
.cnp .team { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:46px; }
.cnp .team-card { border:1px solid var(--line); border-radius:18px; background:#fbfbf8; overflow:hidden; display:flex; flex-direction:column; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.cnp .team-card:hover { border-color:var(--ink); transform:translateY(-3px); box-shadow:0 18px 40px -28px rgba(22,22,20,.5); }
.cnp .team-photo { position:relative; aspect-ratio:1/1; background:var(--paper-2); }
.cnp .team-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 18%; filter:grayscale(1) contrast(1.02); transition:filter .3s ease; }
.cnp .team-card:hover .team-photo img { filter:grayscale(0); }
.cnp .team-photo::after { content:""; position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(to top, rgba(22,22,20,.34), transparent); pointer-events:none; }
.cnp .team-meta { padding:20px 22px 24px; }
.cnp .team-meta h3 { font-family:var(--disp); font-weight:700; font-size:21px; line-height:1.1; letter-spacing:.005em; margin:0 0 7px; color:var(--ink); }
.cnp .team-role { display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--lime-deep); margin-bottom:13px; }
.cnp .team-meta p { margin:0; font-size:13.5px; line-height:1.62; color:var(--ink-2); }
@media (max-width:760px){ .cnp .team { grid-template-columns:1fr; gap:14px; max-width:380px; margin-inline:auto; } }
.cnp .prices { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
.cnp .price { border:1px solid var(--line); border-radius:18px; background:#fbfbf8; padding:32px 28px; display:flex; flex-direction:column; }
.cnp .price.feat { border-color:var(--lime-deep); }
.cnp .price .tag { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--lime-deep); margin-bottom:14px; }
.cnp .price h3 { font-family:var(--disp); font-weight:700; font-size:22px; margin:0 0 6px; }
.cnp .price .amt { font-family:var(--disp); font-weight:700; font-size:32px; color:var(--ink); margin:6px 0 16px; }
.cnp .price p { margin:0; color:var(--ink-2); font-size:14px; line-height:1.7; }
.cnp .price .em { color:var(--muted); font-size:12.5px; font-style:italic; margin-top:12px; display:block; }
@media(max-width:820px) {
.cnp .prices { grid-template-columns:1fr; }
}
.cnp .guar h2 { font-family:var(--disp); font-weight:700; font-size:clamp(26px,3.2vw,40px); margin:0 0 16px; color:var(--on-dark); }
.cnp .guar p { margin:0; color:var(--on-dark-2); font-size:16px; line-height:1.75; max-width:74ch; }
.cnp .guar p strong { color:var(--lime); font-weight:600; }
.cnp .faq { margin-top:34px; border-top:1px solid var(--line); }
.cnp .q { border-bottom:1px solid var(--line); }
.cnp .q button { width:100%; background:none; border:0; color:var(--ink); font-family:var(--disp); font-weight:600; font-size:clamp(17px,2vw,21px); text-align:left; padding:22px 40px 22px 0; cursor:pointer; position:relative; }
.cnp .q button::after { content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:22px; color:var(--lime-deep); transition:transform .25s; }
.cnp .q.open button::after { transform:translateY(-50%) rotate(45deg); }
.cnp .q .a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.cnp .q.open .a { max-height:260px; }
.cnp .q .a p { margin:0; padding:0 0 24px; color:var(--ink-2); font-size:15px; line-height:1.75; max-width:78ch; }
.cnp .book { display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(28px,5vw,60px); align-items:start; }
.cnp .form { border:1px solid var(--line); border-radius:18px; background:#fbfbf8; padding:clamp(24px,3vw,38px); }
.cnp .field { margin-bottom:16px; }
.cnp .field label { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.cnp .field input, .cnp .field select, .cnp .field textarea { width:100%; background:#fff; border:1px solid var(--line); border-radius:8px; color:var(--ink); font-family:var(--sans); font-size:14px; padding:12px 13px; outline:none; transition:border-color .2s; }
.cnp .field input:focus, .cnp .field select:focus, .cnp .field textarea:focus { border-color:var(--lime-deep); box-shadow:0 0 0 3px rgba(126,148,0,.22); }
/* accessible keyboard focus ring on all interactive elements (a11y) */
.cnp a:focus-visible, .cnp button:focus-visible, .cnp .proof-tab:focus-visible, .cnp .pchip:focus-visible { outline:2px solid var(--lime-deep); outline-offset:2px; border-radius:6px; }
.cnp .container-dark a:focus-visible, .cnp .container-dark button:focus-visible, .cnp .ha-navbar a:focus-visible, .cnp .ha-navbar .ha-contact:focus-visible, .cnp .shell a:focus-visible, .cnp .shell button:focus-visible { outline-color:var(--lime); }
.cnp .field.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.cnp .chiprow { display:flex; gap:8px; flex-wrap:wrap; }
.cnp .pchip { font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line); border-radius:999px; padding:8px 12px; cursor:pointer; user-select:none; }
.cnp .pchip.sel { background:var(--lime); border-color:var(--lime); color:var(--lime-ink); }
@media(max-width:820px) {
.cnp .book { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: no-preference) {
.cnp .rv { opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.cnp .rv.in { opacity:1; transform:none; }
.cnp .rv.d1 { transition-delay:.07s }
.cnp .rv.d2 { transition-delay:.14s }
.cnp .rv.d3 { transition-delay:.21s }
}
.cnp .hero-atlas { position:relative; background:var(--paper); padding:clamp(10px,1.4vw,16px) var(--gutter) clamp(40px,5vw,64px); }
.cnp .ha-nav { position:absolute; top:0; left:0; right:0; z-index:6; max-width:var(--maxw); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; height:clamp(66px,9vh,82px); padding:0 0 0 calc(var(--gutter) + clamp(10px,1.6vw,26px)); }
.cnp .ha-nav .logo { width:176px; color:#fff; }
.cnp .ha-nav .logo svg { width:176px; height:auto; }
.cnp .ha-navright { display:flex; align-items:center; gap:4px; height:100%; padding:0 var(--gutter) 0 30px; background:var(--paper); border-bottom-left-radius:clamp(18px,2vw,30px); }
.cnp .ha-navlinks { display:flex; gap:4px; }
.cnp .ha-navlinks a { font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); padding:9px 14px; display:inline-flex; align-items:center; min-height:44px; transition:color .2s; }
.cnp .ha-navlinks a:hover { color:var(--ink); }
.cnp .ha-contact { font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; background:var(--lime); color:var(--lime-ink); padding:13px 22px; border:1px solid var(--lime); transition:.2s ease; }
.cnp .ha-contact:hover { background:#e6ff3a; border-color:#e6ff3a; transform:translateY(-1px); }
.cnp .ha-panel { position:relative; overflow:hidden; min-height:clamp(620px,82vh,848px); background:#0e0f0e; max-width:var(--maxw); margin-inline:auto;
  border-radius:clamp(22px,2.6vw,40px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(120px,17vh,188px) var(--gutter) clamp(40px,5vw,68px); }
.cnp .ha-bg { position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.cnp .ha-ov { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(96deg, rgba(8,9,8,.92), rgba(8,9,8,.62) 46%, rgba(8,9,8,.34)),
             linear-gradient(0deg, rgba(8,9,8,.82), rgba(8,9,8,.08) 56%); }
.cnp .ha-content { position:relative; z-index:2; width:100%; }
.cnp .ha-mark { position:absolute; z-index:1; right:-7%; top:50%; transform:translateY(-50%); width:min(58%,680px); color:var(--lime); opacity:.07; pointer-events:none; }
.cnp .ha-mark svg { width:100%; height:auto; display:block; transform-origin:50% 50%; filter:drop-shadow(0 0 60px rgba(216,250,15,.25)); }
@keyframes haSpin { to{ transform:rotate(360deg); } }
@keyframes haPulse { 0%,100%{ opacity:.055; } 50%{ opacity:.105; } }
@keyframes haGlow { 0%,100%{ filter:drop-shadow(0 0 40px rgba(216,250,15,.18)); } 50%{ filter:drop-shadow(0 0 80px rgba(216,250,15,.4)); } }
@media (prefers-reduced-motion: no-preference) {
.cnp .ha-mark { animation:haPulse 8s ease-in-out infinite; }
.cnp .ha-mark svg { animation:haGlow 8s ease-in-out infinite; }
}
@media(max-width:860px) {
.cnp .ha-mark { right:-18%; width:min(82%,460px); opacity:.06; }
}
.cnp .ha-eyebrow { display:flex; align-items:center; gap:14px; margin:0 0 22px; }
.cnp .ha-eyebrow .ln { height:1px; width:42px; background:var(--lime); }
.cnp .ha-eyebrow .t { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); }
.cnp .ha-title { font-family:var(--disp); font-weight:600; font-size:clamp(34px,5vw,72px); line-height:1.04; letter-spacing:-.01em; color:#fff; margin:0 0 clamp(34px,5vh,58px); max-width:17ch; }
.cnp .ha-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:780px; }
.cnp .ha-card { display:flex; flex-direction:column; justify-content:space-between; gap:30px; min-height:150px;
  background:rgba(18,20,18,.4); border:1px solid rgba(242,242,236,.16); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-radius:15px; padding:20px 20px 18px; transition:transform .22s ease, border-color .22s ease, background .22s ease; }
.cnp .ha-card:hover { border-color:var(--lime); background:rgba(18,20,18,.55); transform:translateY(-3px); }
.cnp .ha-card .ct { font-family:var(--disp); font-weight:700; font-size:clamp(15px,1.4vw,18px); letter-spacing:.05em; text-transform:uppercase; color:#fff; line-height:1.15; }
.cnp .ha-card .cb { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.cnp .ha-card .cm { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-2); max-width:16ch; line-height:1.5; }
.cnp .ha-card .ar { font-size:22px; line-height:1; color:var(--lime); transition:transform .22s ease; }
.cnp .ha-card:hover .ar { transform:translate(3px,-3px); }
@media(max-width:860px) {
.cnp .ha-panel { border-radius:20px; min-height:auto; margin-top:clamp(62px,9vh,76px); padding:clamp(32px,6vw,46px); }
.cnp .ha-nav .logo, .cnp .ha-nav .logo svg { color:var(--ink); }
.cnp .ha-navright { background:transparent; border-bottom-left-radius:0; padding-left:0; padding-right:0; }
.cnp .ha-navlinks { display:none; }
.cnp .ha-cards { grid-template-columns:1fr; max-width:none; }
}
.cnp .wwd { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cnp .wwd-card { border:1px solid var(--line); border-radius:18px; padding:26px 24px; background:#fbfbf8; display:flex; flex-direction:column; transition:transform .25s ease, border-color .25s ease; }
.cnp .wwd-card:hover { border-color:var(--ink); transform:translateY(-3px); }
.cnp .wwd-card .n { font-family:var(--mono); font-size:12px; color:var(--lime-deep); margin-bottom:28px; }
.cnp .wwd-card h3 { font-family:var(--disp); font-weight:700; font-size:19px; line-height:1.12; letter-spacing:.005em; margin:0 0 9px; color:var(--ink); }
.cnp .wwd-card p { margin:0 0 18px; font-size:13.5px; line-height:1.6; color:var(--ink-2); }
.cnp .wwd-card .tag { margin-top:auto; align-self:flex-start; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--lime-ink); background:var(--lime); border-radius:999px; padding:6px 11px; }
@media(max-width:980px) {
.cnp .wwd { grid-template-columns:1fr 1fr; }
}
@media(max-width:560px) {
.cnp .wwd { grid-template-columns:1fr; }
}
.cnp .build-x .cd-pad { padding:clamp(40px,6vw,82px) clamp(28px,5vw,64px); }
.cnp .bx-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.cnp .bx-row + .bx-row { margin-top:clamp(54px,9vw,118px); }
.cnp .bx-row.reverse .bx-vis { order:-1; }
.cnp .bx-pill { display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2); border:1px solid rgba(242,242,236,.16); border-radius:999px; padding:7px 14px 7px 11px; margin-bottom:22px; }
.cnp .bx-pill .pi { width:13px; height:13px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; }
.cnp .bx-pill .pi i { background:var(--lime); border-radius:1px; }
.cnp .bx-text h2 { font-family:var(--disp); font-weight:700; font-size:clamp(26px,3.3vw,42px); line-height:1.06; letter-spacing:-.01em; color:#fff; margin:0 0 20px; max-width:16ch; }
.cnp .bx-text p { color:var(--on-dark-2); font-size:15px; line-height:1.72; margin:0 0 14px; max-width:46ch; }
.cnp .bx-text p:last-child { margin-bottom:0; }
.cnp .bx-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.cnp .bx-chips span { font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--on-dark-2); border:1px solid var(--dark-line); border-radius:999px; padding:7px 12px; }
.cnp .bx-head { text-align:center; max-width:640px; margin:0 auto clamp(34px,5vw,62px); }
.cnp .bx-head .kick { justify-content:center; margin-bottom:14px; }
.cnp .bx-head .lead { margin-inline:auto; }
.cnp .bx-vis { position:relative; }
/* "How we work" — compact 3-step row (no visuals) */
.cnp .hww { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); }
.cnp .hww-step { border-top:1px solid var(--dark-line); padding-top:20px; }
.cnp .hww-n { font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--lime); }
.cnp .hww-step h3 { font-family:var(--disp); font-weight:700; font-size:clamp(22px,2.4vw,30px); line-height:1.04; letter-spacing:-.01em; color:#fff; margin:9px 0 11px; }
.cnp .hww-step p { color:var(--on-dark-2); font-size:14.5px; line-height:1.66; margin:0; max-width:34ch; }
.cnp .hww-step .bx-chips { margin-top:16px; }
@media (max-width:820px){ .cnp .hww { grid-template-columns:1fr; gap:6px; } .cnp .hww-step { padding-top:18px; } }
.cnp .mk-card { background:#1a1b18; border:1px solid rgba(242,242,236,.09); border-radius:14px; overflow:hidden; }
.cnp .mk-shadow { box-shadow:0 34px 66px -26px rgba(0,0,0,.72); }
.cnp .mk-top { display:flex; gap:6px; padding:13px 16px; border-bottom:1px solid rgba(242,242,236,.07); }
.cnp .mk-top span { width:9px; height:9px; border-radius:50%; background:rgba(242,242,236,.16); }
.cnp .mk-pad { padding:16px; display:flex; flex-direction:column; gap:13px; }
.cnp .mk-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.cnp .mk-tile { background:#212220; border:1px solid rgba(242,242,236,.06); border-radius:9px; padding:11px 11px 13px; }
.cnp .mk-tile .b1 { height:6px; width:62%; background:rgba(242,242,236,.18); border-radius:3px; }
.cnp .mk-tile .b2 { height:11px; width:82%; background:rgba(242,242,236,.32); border-radius:3px; margin-top:8px; }
.cnp .mk-tile.on .b2 { background:var(--lime); }
.cnp .mk-two { display:grid; grid-template-columns:1.45fr 1fr; gap:9px; }
.cnp .mk-panel { background:#212220; border:1px solid rgba(242,242,236,.06); border-radius:9px; padding:14px; }
.cnp .mk-line svg { width:100%; height:clamp(72px,8vw,104px); display:block; }
.cnp .mk-donutwrap { display:flex; align-items:center; gap:14px; }
.cnp .mk-donutwrap .dn { width:70px; height:70px; flex:none; }
.cnp .mk-list { flex:1; display:flex; flex-direction:column; gap:8px; }
.cnp .mk-list.wide { margin-top:2px; }
.cnp .mk-list i { display:block; height:6px; background:rgba(242,242,236,.14); border-radius:3px; }
.cnp .mk-list i:nth-child(2) { width:82%; }
.cnp .mk-list i:nth-child(3) { width:64%; }
.cnp .mk-stack { position:relative; min-height:clamp(300px,32vw,392px); }
.cnp .mk-stack .s-back { position:absolute; left:0; top:4%; width:76%; }
.cnp .mk-stack .s-front { position:absolute; right:0; bottom:2%; width:54%; }
.cnp .mk-fan { position:relative; min-height:clamp(260px,28vw,344px); }
.cnp .mk-fan .fc { position:absolute; top:50%; left:50%; width:33%; aspect-ratio:3/4; background:#1a1b18; border:1px solid rgba(242,242,236,.1); border-radius:16px; box-shadow:0 26px 52px -22px rgba(0,0,0,.72); }
.cnp .mk-fan .fc::before { content:""; position:absolute; top:15px; right:15px; width:8px; height:8px; border-radius:50%; background:var(--lime); }
.cnp .mk-fan .fc::after { content:""; position:absolute; left:16px; right:34px; bottom:22px; height:2px; border-radius:2px; background:linear-gradient(90deg, rgba(216,250,15,0), var(--lime)); }
.cnp .mk-fan .f1 { transform:translate(-50%,-50%) rotate(-12deg) translateX(-66%); }
.cnp .mk-fan .f2 { transform:translate(-50%,-50%); z-index:3; }
.cnp .mk-fan .f3 { transform:translate(-50%,-50%) rotate(12deg) translateX(66%); z-index:2; }
.cnp .mk-hub { position:relative; min-height:clamp(260px,28vw,330px); }
.cnp .mk-hub .hub-lines { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.cnp .mk-hub .hub-lines line { stroke:rgba(216,250,15,.5); stroke-width:1; }
.cnp .mk-hub .hub-tool { position:absolute; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--on-dark); background:#1a1b18; border:1px solid rgba(242,242,236,.14); border-radius:9px; padding:9px 12px; box-shadow:0 10px 22px -10px rgba(0,0,0,.6); z-index:2; }
.cnp .mk-hub .hub-tool i { width:7px; height:7px; border-radius:50%; background:var(--lime); flex:none; }
.cnp .mk-hub .hub-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.02em; color:var(--lime-ink); background:var(--lime); border-radius:11px; padding:13px 18px; z-index:3; box-shadow:0 0 0 6px rgba(216,250,15,.12), 0 16px 30px -12px rgba(0,0,0,.6); white-space:nowrap; }
@keyframes mkFlowH { to{ stroke-dashoffset:-16; } }
@media (prefers-reduced-motion: no-preference) {
.cnp .mk-hub .hub-lines line { stroke-dasharray:4 4; animation:mkFlowH 1s linear infinite; }
.cnp .mk-hub .hub-center { animation:muaLime 2.8s ease-in-out infinite; }
.cnp .mk-hub .hub-tool i { animation:mkDot 2.2s ease-in-out infinite; }
.cnp .mk-hub .hub-tool:nth-child(3) i { animation-delay:.4s; }
.cnp .mk-hub .hub-tool:nth-child(4) i { animation-delay:.8s; }
.cnp .mk-hub .hub-tool:nth-child(5) i { animation-delay:1.2s; }
}
@media(max-width:820px) {
.cnp .bx-row { grid-template-columns:1fr; gap:26px; }
.cnp .bx-row.reverse .bx-vis { order:0; }
.cnp .bx-text h2, .cnp .bx-text p { max-width:none; }
}
.cnp .mua { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cnp .mua-card { border:1px solid var(--line); border-radius:18px; background:#fbfbf8; overflow:hidden; display:flex; flex-direction:column; transition:transform .25s ease, border-color .25s ease; }
.cnp .mua-card:hover { border-color:var(--ink); transform:translateY(-3px); }
.cnp .mua-vis { position:relative; height:206px; background:linear-gradient(155deg,#ededE6,#fbfbf8 72%); border-bottom:1px solid var(--line); overflow:hidden; }
.cnp .mua-body { padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.cnp .mua-body h3 { font-family:var(--disp); font-weight:700; font-size:21px; letter-spacing:.005em; margin:0 0 9px; color:var(--ink); }
.cnp .mua-body h3 .num { color:var(--lime-deep); margin-right:5px; }
.cnp .mua-body p { margin:0 0 16px; font-size:14px; line-height:1.65; color:var(--ink-2); }
.cnp .mua-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.cnp .mua-chips span { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line); background:#fff; border-radius:999px; padding:7px 12px; }
.cnp .mk2 { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:26px; }
.cnp .mk2 .pin { position:absolute; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; background:var(--ink); color:#fff; border-radius:999px; padding:6px 11px; box-shadow:0 8px 18px rgba(0,0,0,.18); }
.cnp .mk2 .pin::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--lime); margin-right:7px; vertical-align:middle; }
.cnp .mk2-map .grid { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr); gap:9px; width:100%; }
.cnp .mk2-map .t { background:#fff; border:1px solid var(--line); border-radius:7px; padding:10px 9px; display:flex; flex-direction:column; gap:5px; }
.cnp .mk2-map .t i { height:4px; border-radius:2px; background:#d6d6ce; }
.cnp .mk2-map .t i:first-child { width:70%; }
.cnp .mk2-map .t.on { border-color:var(--lime-deep); box-shadow:0 0 0 2px rgba(126,148,0,.18); }
.cnp .mk2-map .t.on i:first-child { background:var(--lime-deep); }
.cnp .mk2-map .scan { position:absolute; left:50%; top:20px; bottom:20px; width:2px; background:linear-gradient(var(--ink),transparent); opacity:.45; }
.cnp .mk2-map .pin { right:24px; bottom:24px; }
.cnp .mk2-map, .cnp .mk2-auto { padding:18px; }
.cnp .mk2-eq { flex-wrap:wrap; gap:8px; }
.cnp .mk2-eq .eqc { font-family:var(--mono); font-size:11px; letter-spacing:.03em; text-transform:uppercase; background:#fff; border:1px solid var(--line); border-radius:9px; padding:11px 12px; color:var(--ink); }
.cnp .mk2-eq .eqc.lime { background:var(--lime); border-color:var(--lime); color:var(--lime-ink); font-weight:600; }
.cnp .mk2-eq .op { font-family:var(--mono); font-size:13px; color:var(--muted); }
.cnp .mk2-auto .darkcard { width:100%; background:var(--dark); border:1px solid var(--dark-line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:9px; box-shadow:0 16px 34px -16px rgba(0,0,0,.4); }
.cnp .mk2-auto .hl { height:11px; border-radius:4px; background:linear-gradient(90deg,var(--lime),rgba(216,250,15,.18)); width:78%; }
.cnp .mk2-auto .darkcard .ln { height:8px; border-radius:4px; background:rgba(242,242,236,.14); }
.cnp .mk2-auto .darkcard .ln:nth-child(3) { width:64%; }
.cnp .mk2-auto .pin { right:22px; top:22px; }
@media(max-width:880px) {
.cnp .mua { grid-template-columns:1fr; }
}
.cnp .mk2-auto .mermaid, .cnp .mk2-scan .mermaid { width:100%; margin:0; display:flex; align-items:center; justify-content:center; }
.cnp .mk2-auto .mermaid svg { max-width:100%; height:auto; max-height:168px; }
.cnp .mk2-scan { padding:18px; }
.cnp .mk2-scan .doc { position:relative; width:122px; height:152px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:15px; display:flex; flex-direction:column; gap:8px; overflow:hidden; box-shadow:0 16px 34px -18px rgba(0,0,0,.3); }
.cnp .mk2-scan .doc-h { height:9px; width:52%; background:var(--ink); opacity:.82; border-radius:3px; margin-bottom:3px; }
.cnp .mk2-scan .doc-l { height:6px; border-radius:3px; background:#d8d8d0; }
.cnp .mk2-scan .scanline { position:absolute; left:8px; right:8px; top:8%; height:16px; border-radius:4px; background:linear-gradient(180deg, rgba(216,250,15,0), rgba(216,250,15,.3), rgba(216,250,15,0)); box-shadow:0 0 14px rgba(216,250,15,.5); pointer-events:none; }
.cnp .mk2-scan .scanline::after { content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:2px; background:var(--lime-deep); border-radius:2px; box-shadow:0 0 8px rgba(216,250,15,.7); }
.cnp .mk2-scan .corner { position:absolute; width:11px; height:11px; border:2px solid var(--lime-deep); }
.cnp .mk2-scan .corner.tl { left:7px; top:7px; border-right:0; border-bottom:0; }
.cnp .mk2-scan .corner.tr { right:7px; top:7px; border-left:0; border-bottom:0; }
.cnp .mk2-scan .corner.bl { left:7px; bottom:7px; border-right:0; border-top:0; }
.cnp .mk2-scan .corner.br { right:7px; bottom:7px; border-left:0; border-top:0; }
.cnp .mk2-scan .pin { right:24px; top:24px; }
@keyframes scanMove { 0%,100%{ top:8%; } 50%{ top:78%; } }
@media (prefers-reduced-motion: no-preference) {
.cnp .mk2-scan .scanline { animation:scanMove 2.8s ease-in-out infinite; }
.cnp .mk2-scan .pin::before { animation:mkDot 1.8s ease-in-out infinite; }
}
@keyframes mkDraw { to{ stroke-dashoffset:0; } }
@keyframes mkFade { to{ opacity:1; } }
@keyframes mkDonut { to{ stroke-dashoffset:75; } }
@keyframes mkPulse { 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
@keyframes mkFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes mkFloatR { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }
@keyframes mkDot { 0%,100%{ box-shadow:0 0 0 0 rgba(216,250,15,.45); } 50%{ box-shadow:0 0 0 6px rgba(216,250,15,0); } }
@keyframes muaLime { 0%,100%{ box-shadow:0 0 0 0 rgba(216,250,15,0); } 50%{ box-shadow:0 0 18px 0 rgba(216,250,15,.55); } }
@keyframes muaHl { 0%,100%{ width:78%; } 50%{ width:60%; } }
@media (prefers-reduced-motion: no-preference) {
.cnp .mk-line polyline { stroke-dasharray:820; stroke-dashoffset:820; }
.cnp .mk-line svg path { opacity:0; }
.cnp .dn circle + circle { stroke-dasharray:188; stroke-dashoffset:188; }
.cnp .rv.in .mk-line polyline { animation:mkDraw 1.7s ease forwards; }
.cnp .rv.in .mk-line svg path { animation:mkFade 1.1s .45s ease forwards; }
.cnp .rv.in .dn circle + circle { animation:mkDonut 1.5s .35s cubic-bezier(.3,.8,.3,1) forwards; }
.cnp .mk-tile.on .b2 { animation:mkPulse 2.6s ease-in-out infinite; }
.cnp .bx-vis > .mk-card { animation:mkFloat 6.5s ease-in-out infinite; }
.cnp .mk-stack .s-front { animation:mkFloat 5.4s ease-in-out infinite; }
.cnp .mk-stack .s-back { animation:mkFloatR 6.2s ease-in-out infinite; }
.cnp .mk-fan .fc::before { animation:mkDot 2.4s ease-in-out infinite; }
.cnp .mk-fan .f2::before { animation-delay:.5s; }
.cnp .mk-fan .f3::before { animation-delay:1s; }
.cnp .mk2-eq .eqc.lime { animation:muaLime 2.8s ease-in-out infinite; }
.cnp .mk2-auto .hl { animation:muaHl 2.6s ease-in-out infinite; }
}
@keyframes mkFlow { to{ stroke-dashoffset:-22; } }
@keyframes muaPop { 0%,72%,100%{ transform:translateY(0); } 12%{ transform:translateY(-4px); } }
@keyframes muaScan { 0%{ transform:translateY(-110%); } 62%,100%{ transform:translateY(110%); } }
@media (prefers-reduced-motion: no-preference) {
.cnp .mk2-map .mermaid path.flowchart-link, .cnp .mk2-map .mermaid .edgePaths path, .cnp .mk2-auto .mermaid path.flowchart-link, .cnp .mk2-auto .mermaid .edgePaths path { stroke-dasharray:6 5 !important; animation:mkFlow 1s linear infinite; }
.cnp .mk2-eq .eqc, .cnp .mk2-eq .op { animation:muaPop 3.4s ease-in-out infinite; }
.cnp .mk2-eq > :nth-child(2) { animation-delay:.12s; }
.cnp .mk2-eq > :nth-child(3) { animation-delay:.24s; }
.cnp .mk2-eq > :nth-child(4) { animation-delay:.36s; }
.cnp .mk2-eq > :nth-child(5) { animation-delay:.48s; }
.cnp .mk2-eq > :nth-child(6) { animation-delay:.6s; }
.cnp .mk2-eq > :nth-child(7) { animation-delay:.72s; }
.cnp .mk2-auto .darkcard { position:relative; overflow:hidden; }
.cnp .mk2-auto .darkcard::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(216,250,15,.09), transparent); transform:translateY(-110%); animation:muaScan 3.4s ease-in-out infinite; }
.cnp .mk2-auto .pin::before { animation:mkDot 1.8s ease-in-out infinite; }
}

/* --- next/font wiring + light surface (overrides the generated :root->.cnp) --- */
.cnp{
  --sans: var(--font-inter), system-ui, sans-serif;
  --disp: var(--font-rajdhani), 'Inter', sans-serif;
  --mono: var(--font-jetbrains), ui-monospace, Menlo, monospace;
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
}
/* proof-window placeholder (replaces the design-tool <image-slot>) */
.cnp .bwin-ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 120% at 70% 0%, rgba(216,250,15,.06), transparent 60%),
    repeating-linear-gradient(135deg, rgba(242,242,236,.03) 0 2px, transparent 2px 11px),
    #0a0a09;
  color: var(--on-dark-3); font-family: var(--mono); font-size: 11px;
  letter-spacing:.14em; text-transform:uppercase;
}

/* --- "Automate" card: mini n8n-style workflow canvas --- */
.cnp .mk2-flow{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; padding:18px;
  background:
    radial-gradient(circle at 1px 1px, rgba(22,22,20,.06) 1px, transparent 1.4px) 0 0/15px 15px,
    linear-gradient(155deg,#ededE6,#fbfbf8 72%);
}
.cnp .mk2-flow .nrow{ display:flex; align-items:center; }
.cnp .mk2-flow .nnode{
  width:33px; height:33px; flex:none; border-radius:9px;
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
  display:grid; place-items:center; position:relative; z-index:2;
  box-shadow:0 5px 12px -5px rgba(0,0,0,.22);
}
.cnp .mk2-flow .nnode svg{ width:18px; height:18px; }
.cnp .mk2-flow .nnode.trig{ border-color:var(--lime-deep); color:var(--lime-deep); }
.cnp .mk2-flow .nnode.agent{ border-color:var(--ink); color:var(--ink); }
.cnp .mk2-flow .nwire{
  width:30px; height:2px; flex:none; position:relative; overflow:hidden;
  background:var(--line);
}
.cnp .mk2-flow .nwire::after{
  content:""; position:absolute; top:0; left:0; height:100%; width:13px;
  background:linear-gradient(90deg, transparent, var(--lime-deep), transparent);
}
.cnp .mk2-flow .nwrap{ position:relative; display:flex; align-items:center; }
.cnp .mk2-flow .nstem{
  position:absolute; left:50%; top:100%; transform:translateX(-50%);
  width:2px; height:15px; background:var(--line);
}
.cnp .mk2-flow .nsub{
  position:absolute; left:50%; top:calc(100% + 15px); transform:translateX(-50%);
  width:26px; height:26px; border-radius:50%; background:#fff;
  border:1px solid var(--line); color:var(--lime-deep);
  display:grid; place-items:center; box-shadow:0 5px 12px -5px rgba(0,0,0,.2);
}
.cnp .mk2-flow .nsub svg{ width:15px; height:15px; }
.cnp .mk2-flow .pin{ right:16px; top:16px; }
@media (prefers-reduced-motion: no-preference){
  .cnp .mk2-flow .nwire::after{ animation:nflow 2.4s linear infinite; }
  .cnp .mk2-flow .nrow .nwrap .nwire::after{ animation-delay:.3s; }
  .cnp .mk2-flow .nstem{ background:linear-gradient(180deg, var(--lime-deep), var(--line)); }
  .cnp .mk2-flow .nnode.agent{ animation:muaLime 2.8s ease-in-out infinite; }
}
@keyframes nflow{ from{ transform:translateX(-15px); } to{ transform:translateX(45px); } }

/* --- "Unify" card: four platforms flowing into one system --- */
.cnp .mk2-hub{
  position:relative; width:100%; height:100%;
  background:
    radial-gradient(circle at 1px 1px, rgba(22,22,20,.06) 1px, transparent 1.4px) 0 0/15px 15px,
    linear-gradient(155deg,#ededE6,#fbfbf8 72%);
}
.cnp .hub2-lines{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.cnp .hub2-lines line{ stroke:rgba(126,148,0,.55); stroke-width:1; }
.cnp .hub2-node{
  position:absolute; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:11px; background:#fff;
  border:1px solid var(--line); box-shadow:0 6px 14px -6px rgba(0,0,0,.25);
  display:grid; place-items:center; z-index:2;
}
.cnp .hub2-node svg{ width:22px; height:22px; display:block; }
.cnp .hub2-node img{ width:24px; height:24px; object-fit:contain; display:block; }
.cnp .hub2-node .lt{ font-family:var(--disp); font-weight:700; font-size:16px; line-height:1; }
.cnp .hub2-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--lime); color:var(--lime-ink); border-radius:10px; padding:8px 12px;
  font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.01em;
  white-space:nowrap; z-index:3;
  box-shadow:0 0 0 5px rgba(216,250,15,.14), 0 12px 24px -10px rgba(0,0,0,.4);
}
@media (prefers-reduced-motion: no-preference){
  .cnp .hub2-lines line{ stroke-dasharray:4 5; animation:hub2flow 1.1s linear infinite; }
  .cnp .hub2-center{ animation:muaLime 2.8s ease-in-out infinite; }
}
@keyframes hub2flow{ to{ stroke-dashoffset:18; } }

/* --- "Unify" v2: icons fly into a black Codename core (no connector lines) --- */
.cnp .lt.pd{ color:#1A7A4C; }
.cnp .lt.sm{ color:#1C8FD6; font-size:.8em; letter-spacing:-.02em; }

.cnp .hub2-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:#161614; border-radius:12px; padding:12px 15px;
  display:grid; place-items:center; z-index:5;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.55);
}
.cnp .hub2-core img{ width:86px; height:auto; display:block; }

.cnp .hub2-flow{
  position:absolute; transform:translate(-50%,-50%) scale(.85);
  width:28px; height:28px; border-radius:8px; background:#fff;
  border:1px solid var(--line); box-shadow:0 5px 12px -5px rgba(0,0,0,.25);
  display:grid; place-items:center; z-index:1; opacity:0; pointer-events:none;
}
.cnp .hub2-flow svg{ width:16px; height:16px; }
.cnp .hub2-flow .lt{ font-family:var(--disp); font-weight:700; font-size:12px; line-height:1; }

@media (prefers-reduced-motion: no-preference){
  .cnp .hub2-core{ animation:muaLime 2.6s ease-in-out infinite; }
  .cnp .hub2-flow.f-tl{ animation:flowTL 2.8s ease-in infinite; }
  .cnp .hub2-flow.f-tr{ animation:flowTR 2.8s ease-in .7s infinite; }
  .cnp .hub2-flow.f-bl{ animation:flowBL 2.8s ease-in 1.4s infinite; }
  .cnp .hub2-flow.f-br{ animation:flowBR 2.8s ease-in 2.1s infinite; }
}
@keyframes flowTL{
  0%{ left:15%; top:20%; opacity:0; transform:translate(-50%,-50%) scale(.9); }
  14%{ opacity:1; } 68%{ opacity:1; }
  100%{ left:50%; top:50%; opacity:0; transform:translate(-50%,-50%) scale(.3); }
}
@keyframes flowTR{
  0%{ left:85%; top:20%; opacity:0; transform:translate(-50%,-50%) scale(.9); }
  14%{ opacity:1; } 68%{ opacity:1; }
  100%{ left:50%; top:50%; opacity:0; transform:translate(-50%,-50%) scale(.3); }
}
@keyframes flowBL{
  0%{ left:15%; top:80%; opacity:0; transform:translate(-50%,-50%) scale(.9); }
  14%{ opacity:1; } 68%{ opacity:1; }
  100%{ left:50%; top:50%; opacity:0; transform:translate(-50%,-50%) scale(.3); }
}
@keyframes flowBR{
  0%{ left:85%; top:80%; opacity:0; transform:translate(-50%,-50%) scale(.9); }
  14%{ opacity:1; } 68%{ opacity:1; }
  100%{ left:50%; top:50%; opacity:0; transform:translate(-50%,-50%) scale(.3); }
}

/* --- "Unify" v3: the cubes themselves drift inward and back out --- */
@media (prefers-reduced-motion: no-preference){
  .cnp .hub2-node.n-tl{ animation:cubeTL 3.4s ease-in-out infinite; }
  .cnp .hub2-node.n-tr{ animation:cubeTR 3.4s ease-in-out infinite; }
  .cnp .hub2-node.n-bl{ animation:cubeBL 3.4s ease-in-out infinite; }
  .cnp .hub2-node.n-br{ animation:cubeBR 3.4s ease-in-out infinite; }
  .cnp .hub2-core{ animation:muaLime 3.4s ease-in-out infinite; }
}
@keyframes cubeTL{
  0%,100%{ left:15%; top:20%; transform:translate(-50%,-50%) scale(1); }
  50%{ left:40%; top:41%; transform:translate(-50%,-50%) scale(.84); }
}
@keyframes cubeTR{
  0%,100%{ left:85%; top:20%; transform:translate(-50%,-50%) scale(1); }
  50%{ left:60%; top:41%; transform:translate(-50%,-50%) scale(.84); }
}
@keyframes cubeBL{
  0%,100%{ left:15%; top:80%; transform:translate(-50%,-50%) scale(1); }
  50%{ left:40%; top:59%; transform:translate(-50%,-50%) scale(.84); }
}
@keyframes cubeBR{
  0%,100%{ left:85%; top:80%; transform:translate(-50%,-50%) scale(1); }
  50%{ left:60%; top:59%; transform:translate(-50%,-50%) scale(.84); }
}

/* taller Codename core box */
.cnp .hub2-core{ min-height:106px; padding-top:30px; padding-bottom:30px; border-radius:14px; }

/* === Hero: full-bleed clean black section (no rounded panel) === */
.cnp .hero-atlas{ padding:0; background:#0c0d0c; }
.cnp .ha-nav{
  position:relative; inset:auto; width:100%;
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--gutter); height:clamp(70px,9vh,88px);
}
.cnp .ha-navright{ background:transparent; border-bottom-left-radius:0; padding:0; }
.cnp .ha-panel{
  position:relative; overflow:hidden; background:#0c0d0c; color:var(--on-dark);
  border-radius:0; max-width:none; margin:0;
  min-height:clamp(520px,72vh,720px);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(30px,6vh,70px) 0 clamp(46px,8vh,92px);
}
.cnp .ha-content{
  position:relative; z-index:2; width:100%;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
}
.cnp .ha-ov{ display:none; }
.cnp .ha-mark{ right:-3%; opacity:.06; }
@media(max-width:860px){
  .cnp .ha-panel{ min-height:auto; margin-top:0; border-radius:0;
    padding:clamp(24px,6vh,48px) 0 clamp(40px,8vh,64px); }
  .cnp .ha-mark{ right:-16%; opacity:.05; }
}

/* hero nav legibility + rounded contact button */
.cnp .ha-navlinks a{ color:rgba(242,242,236,.82); font-weight:500; }
.cnp .ha-navlinks a:hover{ color:#fff; }
.cnp .ha-contact{ border-radius:10px; }

/* sticky persistent header (lifted out of the hero) — same solid hero black */
.cnp .ha-navbar{ position:sticky; top:0; z-index:50; background:#0c0d0c; border-bottom:1px solid rgba(255,255,255,.07); }
/* anchor targets clear the sticky bar */
.cnp [id]{ scroll-margin-top:clamp(74px,10vh,96px); }

/* hero subheadline + primary/secondary CTA */
.cnp .ha-title{ margin-bottom:clamp(18px,2.6vh,28px); }
.cnp .ha-sub{ max-width:56ch; margin:0 0 clamp(24px,3.4vh,34px); font-size:clamp(15px,1.5vw,19px); line-height:1.55; color:var(--on-dark-2); }
.cnp .ha-actions{ display:flex; flex-wrap:wrap; gap:13px; margin:0 0 clamp(30px,4.5vh,46px); }
.cnp .ha-cta{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; background:var(--lime); color:var(--lime-ink); padding:15px 26px; border-radius:11px; border:1px solid var(--lime); transition:.2s ease; }
.cnp .ha-cta:hover{ background:#e6ff3a; border-color:#e6ff3a; transform:translateY(-1px); }
.cnp .ha-cta .arr, .cnp .ha-cta-ghost .arr{ transition:transform .2s ease; }
.cnp .ha-cta:hover .arr, .cnp .ha-cta-ghost:hover .arr{ transform:translateX(3px); }
.cnp .ha-cta-ghost{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--on-dark); padding:15px 22px; border-radius:11px; border:1px solid var(--dark-line); transition:.2s ease; }
.cnp .ha-cta-ghost:hover{ border-color:rgba(242,242,236,.5); transform:translateY(-1px); }

/* trust band: named "recent builds" proof teaser */
.cnp .trust-builds{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 16px; margin-top:clamp(6px,1.2vw,14px); text-align:center; }
.cnp .tb-lab{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.cnp .tb-logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(16px,2.6vw,34px); }
.cnp .tb-logos img{ height:clamp(20px,2.2vw,26px); width:auto; max-width:132px; object-fit:contain; display:block; }
.cnp .tb-logos .tb-word{ font-family:var(--disp); font-weight:800; font-size:clamp(17px,1.9vw,23px); letter-spacing:.04em; color:var(--ink-2); }
.cnp .tb-logos .tb-dark{ display:inline-flex; align-items:center; background:#0b1b2e; border-radius:8px; padding:6px 12px; }
.cnp .tb-logos .tb-dark img{ height:clamp(15px,1.7vw,19px); width:auto; display:block; }
.cnp .tb-link{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--lime-deep); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.cnp .tb-link:hover{ color:var(--ink); }

/* proof window screenshot fill */
.cnp .bwin-img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }

/* === Proof mockups (AFG console + Provet BI report) === */
.cnp .pm{
  position:absolute; inset:0; overflow:hidden; text-align:left;
  background:#f6f6f2; color:#1b1b18; font-family:var(--sans); line-height:1.3;
}
.cnp .pm-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 13px; background:#fff; border-bottom:1px solid #e7e7e0;
}
.cnp .pm-brand{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:12px; }
.cnp .pm-shield{ display:grid; place-items:center; width:19px; height:19px; border-radius:5px; background:#13B5EA; color:#fff; font-size:11px; }
.cnp .pm-bi{ display:grid; place-items:center; width:19px; height:19px; border-radius:5px; background:#F2C811; color:#161614; font-size:11px; }
.cnp .pm-pill{ font-family:var(--mono); font-size:9px; letter-spacing:.03em; padding:3px 9px; border-radius:999px; }
.cnp .pm-pill.ok{ background:#e7f7ec; color:#1a7a4c; }
.cnp .pm-chip{ font-family:var(--mono); font-size:9px; color:#86857b; border:1px solid #e7e7e0; border-radius:6px; padding:3px 8px; }
/* Rapid console: dark header bar — logo left, "Xero Syncer" centered, status right */
.cnp .afgm .pm-top{ background:#0b1b2e; border-bottom-color:#16314a; position:relative; padding:14px 13px; }
.cnp .afgm .rapid-wordmark{ height:24px; width:auto; display:block; }
.cnp .afgm .pm-sub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#fff; white-space:nowrap; }
.cnp .afgm .pm-pill{ position:absolute; right:13px; top:50%; transform:translateY(-50%); }
.cnp .afgm .pm-pill.ok{ background:rgba(35,181,234,.16); color:#5cc8f0; }

.cnp .pm-tabs{ display:flex; gap:16px; padding:9px 13px 0; font-size:10.5px; color:#86857b; border-bottom:1px solid #e7e7e0; background:#fff; }
.cnp .pm-tabs span{ padding-bottom:9px; }
.cnp .pm-tabs span.on{ color:#161614; font-weight:600; box-shadow:inset 0 -2px 0 #13B5EA; }

.cnp .pm-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:13px; }
.cnp .pm-tile{ background:#fff; border:1px solid #e7e7e0; border-radius:9px; padding:10px 11px; }
.cnp .pm-tile .k{ font-family:var(--mono); font-size:8px; letter-spacing:.1em; color:#9a9a90; }
.cnp .pm-tile .v{ font-weight:700; font-size:16px; margin-top:4px; letter-spacing:-.01em; }
.cnp .pm-tile .s{ font-size:9px; color:#86857b; margin-top:3px; }

.cnp .pm-tablewrap{ padding:0 13px; }
.cnp .pm-table{ width:100%; border-collapse:collapse; }
.cnp .pm-table th{ text-align:left; font-family:var(--mono); font-weight:500; font-size:8px; letter-spacing:.07em; color:#9a9a90; padding:5px 6px; border-bottom:1px solid #e7e7e0; }
.cnp .pm-table td{ font-size:10px; padding:6px; border-bottom:1px solid #efefe9; color:#3a3a33; }
.cnp .pm-badge{ font-family:var(--mono); font-size:8px; padding:2px 7px; border-radius:999px; }
.cnp .pm-badge.ok{ background:#e7f7ec; color:#1a7a4c; }
.cnp .pm-badge.err{ background:#fdecea; color:#c0392b; }

/* Provet BI */
.cnp .pb-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; padding:13px 13px 8px; }
.cnp .pb-kpi{ background:#fff; border:1px solid #e7e7e0; border-radius:9px; padding:9px 10px; }
.cnp .pb-kpi .k{ font-family:var(--mono); font-size:7.5px; letter-spacing:.08em; color:#9a9a90; }
.cnp .pb-kpi .v{ font-weight:700; font-size:17px; margin-top:3px; letter-spacing:-.01em; }
.cnp .pb-grid{ display:grid; grid-template-columns:1.45fr 1fr; gap:9px; padding:0 13px 13px; }
.cnp .pb-tile{ background:#fff; border:1px solid #e7e7e0; border-radius:9px; padding:11px; }
.cnp .pb-tile .t{ font-size:10.5px; font-weight:600; margin-bottom:9px; }
.cnp .pb-bars{ display:flex; align-items:flex-end; gap:7px; height:84px; }
.cnp .pb-bars i{ flex:1; background:linear-gradient(180deg,#13B5EA,#bfeefb); border-radius:3px 3px 0 0; }
.cnp .pb-donut{ display:flex; align-items:center; gap:12px; height:84px; }
.cnp .pb-donut svg{ width:74px; height:74px; flex:none; }
.cnp .pb-legend{ display:flex; flex-direction:column; gap:6px; font-size:9px; color:#3a3a33; }
.cnp .pb-legend span{ display:flex; align-items:center; gap:6px; }
.cnp .pb-legend i{ width:9px; height:9px; border-radius:2px; flex:none; }
@media(max-width:560px){
  .cnp .pb-kpis{ grid-template-columns:repeat(2,1fr); }
}

/* contain absolute proof mockups inside the browser-window body */
.cnp .bwin-body{ position:relative; overflow:hidden; }

/* === Proof mockup — GSC Marketing Dashboard === */
.cnp .gscm{ overflow:hidden; display:flex; flex-direction:column; }
.cnp .gscm > *{ flex:none; }
.cnp .gsc-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px 8px; background:#fff; border-bottom:1px solid #e7e7e0;
}
.cnp .gsc-h-l{ display:flex; flex-direction:column; gap:2px; }
.cnp .gsc-title{ font-weight:700; font-size:11px; letter-spacing:-.01em; }
.cnp .gsc-sub{ font-family:var(--mono); font-size:7.5px; color:#9a9a90; letter-spacing:.02em; }
.cnp .gsc-h-r{ display:flex; align-items:center; gap:7px; }
.cnp .gsc-view{ font-size:8px; color:#46463f; border:1px solid #e2e2da; border-radius:6px; padding:3px 7px; background:#fafaf7; }
.cnp .gsc-date{ font-family:var(--mono); font-size:8px; color:#46463f; border:1px solid #e2e2da; border-radius:6px; padding:3px 7px; }

.cnp .gsc-tabs{ display:flex; gap:13px; padding:7px 12px 0; font-size:8.5px; color:#9a9a90; border-bottom:1px solid #e7e7e0; background:#fff; }
.cnp .gsc-tabs span{ padding-bottom:7px; white-space:nowrap; }
.cnp .gsc-tabs span.on{ color:#161614; font-weight:600; box-shadow:inset 0 -2px 0 #161614; }
.cnp .gsc-tabs span.dim{ color:#c2c2b8; }

.cnp .gsc-hero{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:10px 12px 0; }
.cnp .gsc-hcard{ background:#fff; border:1px solid #e7e7e0; border-radius:8px; padding:9px 10px; }
.cnp .gsc-hcard .k{ font-family:var(--mono); font-size:7px; letter-spacing:.09em; color:#9a9a90; }
.cnp .gsc-hcard .v{ font-weight:800; font-size:19px; letter-spacing:-.02em; margin-top:3px; }
.cnp .gsc-hcard .v.red{ color:#c0392b; }
.cnp .gsc-hcard .s{ font-size:7px; color:#a6a69c; margin-top:3px; }

.cnp .gsc-kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding:8px 12px 0; }
.cnp .gsc-kpi{ background:#fff; border:1px solid #e7e7e0; border-radius:8px; padding:8px 9px; }
.cnp .gsc-kpi .k{ font-size:7.5px; color:#86857b; }
.cnp .gsc-kpi .v{ font-weight:700; font-size:14px; letter-spacing:-.01em; margin-top:3px; }
.cnp .gsc-kpi .d{ font-size:6.5px; margin-top:3px; }
.cnp .gsc-kpi .d.up{ color:#1a8a4a; }
.cnp .gsc-kpi .s{ font-size:6.5px; color:#a6a69c; margin-top:3px; }

.cnp .gsc-tables{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px 12px 0; }
.cnp .gsc-spend{ padding:8px 12px 12px; }
.cnp .gsc-panel{ background:#fff; border:1px solid #e7e7e0; border-radius:8px; padding:9px 10px; }
.cnp .gsc-pt{ font-weight:700; font-size:9px; margin-bottom:6px; }
.cnp .gsc-tbl{ width:100%; border-collapse:collapse; }
.cnp .gsc-tbl th{ text-align:left; font-family:var(--mono); font-weight:500; font-size:6.5px; letter-spacing:.05em; color:#a6a69c; padding:3px 4px; border-bottom:1px solid #ececdf; }
.cnp .gsc-tbl th.n, .cnp .gsc-tbl td.n{ text-align:right; }
.cnp .gsc-tbl td{ font-size:8px; padding:4px; border-bottom:1px solid #f3f3ec; color:#3a3a33; }
.cnp .gsc-tbl td.muted{ color:#b7b7ad; font-style:italic; }
.cnp .gsc-tbl tr.tot td{ font-weight:700; color:#161614; border-bottom:none; border-top:1px solid #e2e2da; }
.cnp .gsc-fx{ font-family:var(--mono); font-size:6.5px; color:#a6a69c; margin-top:5px; }

.cnp .gsc-plats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cnp .gsc-plat{ border:1px solid #eee; border-radius:7px; padding:8px 9px; background:#fcfcf9; }
.cnp .gsc-plat .p-h{ display:flex; align-items:center; gap:5px; font-weight:700; font-size:8.5px; margin-bottom:5px; }
.cnp .gsc-plat .dot{ width:7px; height:7px; border-radius:2px; flex:none; }
.cnp .gsc-plat .dot.meta{ background:#1877F2; }
.cnp .gsc-plat .dot.ggl{ background:#34A853; }
.cnp .gsc-plat .dot.amz{ background:#FF9900; }
.cnp .gsc-plat .p-row{ display:flex; justify-content:space-between; font-size:7.5px; color:#86857b; padding:2px 0; }
.cnp .gsc-plat .p-row b{ color:#1b1b18; font-size:8px; }
.cnp .gsc-plat .p-row b.grn{ color:#1a8a4a; }
.cnp .gsc-plat .p-row b.red{ color:#c0392b; }

/* === Proof mockup — Provet Sales Data Explorer === */
.cnp .sde{ background:#fff; color:#2b2f47; overflow:hidden; display:flex; flex-direction:column; }
.cnp .sde-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 13px 8px; }
.cnp .sde-title{ font-weight:800; font-size:16px; letter-spacing:-.01em; color:#1f2350; }
.cnp .sde-chips{ display:flex; gap:7px; }
.cnp .sde-chip{ display:inline-flex; align-items:center; gap:5px; font-size:8px; color:#6a4f93; border:1px solid #c9b6e2; border-radius:999px; padding:3px 9px; }
.cnp .sde-chip b{ display:grid; place-items:center; width:13px; height:13px; border-radius:50%; background:#7b5aa6; color:#fff; font-size:7.5px; font-weight:700; }
.cnp .sde-rule{ height:2px; background:#7b5aa6; opacity:.55; margin:0 0 0; }
.cnp .sde-body{ position:relative; flex:1; padding:8px 0 0; overflow:hidden; }
.cnp .sde-tbl{ width:100%; border-collapse:collapse; font-size:7.5px; }
.cnp .sde-tbl th, .cnp .sde-tbl td{ padding:2.5px 7px; border-bottom:1px solid #eef0f4; white-space:nowrap; }
.cnp .sde-tbl .lab, .cnp .sde-tbl td:first-child{ text-align:left; color:#2b2f47; }
.cnp .sde-tbl .n{ text-align:right; }
.cnp .sde-tbl thead th{ color:#54607e; font-weight:600; border-bottom:1px solid #d9deea; background:#f7f8fb; }
.cnp .sde-tbl thead .yr th, .cnp .sde-tbl thead .qt th{ text-align:center; }
.cnp .sde-tbl tbody td.n{ color:#2e54a3; }
.cnp .sde-tbl tbody td.n.neg{ color:#c0392b; }
.cnp .sde-tbl .grp td{ font-weight:700; color:#1f2350; }
.cnp .sde-tbl .grp td.n{ color:#1f2350; }
.cnp .sde-tbl .ex{ display:inline-grid; place-items:center; width:9px; height:9px; margin-right:5px; border:1px solid #b9c0d4; border-radius:2px; font-size:8px; line-height:1; color:#54607e; }
.cnp .sde-tbl .leaf td.ind{ padding-left:24px; color:#3f4868; }
.cnp .sde-tbl .tot td{ font-weight:800; color:#1f2350; border-top:1.5px solid #c3cadb; border-bottom:none; background:#f7f8fb; }
.cnp .sde-tbl .tot td.n{ color:#1f2350; }
/* filter pane overlay */
.cnp .sde-pane{ position:absolute; top:6px; right:8px; width:62%; max-height:88%; overflow:hidden; background:#fbfcfe; border:1px solid #e4e8f1; border-radius:14px; box-shadow:0 18px 40px rgba(31,35,80,.16); padding:11px 13px; }
.cnp .sde-pane-h{ text-align:center; font-size:11px; font-weight:600; color:#1f2350; margin-bottom:9px; }
.cnp .sde-pane-h .i{ color:#8a93ad; font-size:9px; }
.cnp .sde-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px 10px; }
.cnp .sde-f{ display:flex; flex-direction:column; gap:3px; }
.cnp .sde-f .fl, .cnp .sde-date .fl{ font-size:7px; color:#3f4868; font-weight:600; }
.cnp .sde-f .fi{ display:flex; align-items:center; justify-content:space-between; font-size:7.5px; color:#54607e; background:#fff; border:1px solid #dde2ee; border-radius:5px; padding:4px 7px; }
.cnp .sde-f .fi i{ color:#9aa3bc; font-style:normal; }
.cnp .sde-date{ margin-top:9px; display:flex; flex-direction:column; gap:3px; }
.cnp .sde-dates{ display:flex; gap:9px; }
.cnp .sde-dates .dt{ font-size:7.5px; color:#2b2f47; background:#fff; border:1px solid #dde2ee; border-radius:5px; padding:4px 9px; }
.cnp .sde-slider{ margin:11px 2px 0; height:3px; background:#cfd5e4; border-radius:999px; position:relative; }
.cnp .sde-slider i{ position:absolute; right:-2px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:#54607e; }
.cnp .sde-actions{ display:flex; justify-content:center; gap:34px; margin-top:11px; font-size:9px; font-weight:600; }
.cnp .sde-actions .clr{ color:#d2503e; }
.cnp .sde-actions .cls{ color:#1f2350; }

/* === Proof mockup — AFG Budget Matrix === */
.cnp .bmx{ background:#f7f8f9; color:#1f2937; overflow:hidden; display:flex; flex-direction:column; }
.cnp .bmx-head{ display:flex; align-items:flex-start; justify-content:space-between; padding:10px 13px 6px; background:#fff; border-bottom:1px solid #e7e9ee; }
.cnp .bmx-crumb{ font-weight:700; font-size:12px; color:#111827; }
.cnp .bmx-crumb span{ color:#9aa1ad; margin:0 4px; }
.cnp .bmx-desc{ font-size:8px; color:#6b7280; margin-top:2px; }
.cnp .bmx-refresh{ font-size:8px; color:#374151; border:1px solid #d6dae1; border-radius:6px; padding:4px 9px; background:#fafbfc; }
.cnp .bmx-tabs{ display:flex; gap:16px; padding:9px 13px 0; background:#fff; }
.cnp .bmx-glab{ display:flex; align-items:center; gap:5px; font-size:6.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.cnp .bmx-glab::before, .cnp .bmx-glab::after{ content:""; height:1.5px; flex:1; min-width:8px; border-radius:999px; }
.cnp .bmx-glab.blue{ color:#1d4ed8; } .cnp .bmx-glab.blue::before, .cnp .bmx-glab.blue::after{ background:#3b82f6; }
.cnp .bmx-glab.green{ color:#047857; } .cnp .bmx-glab.green::before, .cnp .bmx-glab.green::after{ background:#10b981; }
.cnp .bmx-glab.gray{ color:#475569; } .cnp .bmx-glab.gray::before, .cnp .bmx-glab.gray::after{ background:#94a3b8; }
.cnp .bmx-pills{ display:flex; gap:2px; background:#e9ebef; border-radius:999px; padding:2px; }
.cnp .bmx-pills span{ font-size:8px; color:#475569; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.cnp .bmx-pills span.on{ background:#fff; color:#111827; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.cnp .bmx-period{ display:flex; align-items:center; gap:9px; padding:9px 13px; background:#fff; border-bottom:1px solid #e7e9ee; }
.cnp .bmx-period .seg{ font-size:8px; color:#475569; padding:3px 9px; border:1px solid #dde1e8; border-radius:6px; background:#fafbfc; }
.cnp .bmx-period .seg.on{ background:#111827; color:#fff; border-color:#111827; }
.cnp .bmx-period .fychip{ font-size:8px; color:#1d4ed8; background:#eef4ff; border:1px solid #cfe0ff; border-radius:999px; padding:3px 9px; }
.cnp .bmx-tablewrap{ flex:1; overflow:hidden; padding:0 0; background:#fff; }
.cnp .bmx-tbl{ width:100%; border-collapse:collapse; font-size:7.5px; }
.cnp .bmx-tbl th, .cnp .bmx-tbl td{ padding:3px 7px; border-bottom:1px solid #eef0f3; white-space:nowrap; }
.cnp .bmx-tbl .acc{ text-align:left; color:#1f2937; }
.cnp .bmx-tbl .n{ text-align:right; font-variant-numeric:tabular-nums; }
.cnp .bmx-tbl thead th{ background:#f3f4f6; color:#6b7280; font-weight:600; border-bottom:1px solid #dfe2e8; }
.cnp .bmx-tbl thead .mh{ text-align:center; color:#374151; }
.cnp .bmx-tbl thead .bcol{ text-align:right; }
.cnp .bmx-tbl thead .acol{ text-align:right; }
.cnp .bmx-tbl thead .acol.hist{ background:#e9f7ef; color:#047857; }
.cnp .bmx-tbl thead .vcol{ text-align:right; background:#eef4ff; color:#1d4ed8; }
.cnp .bmx-tbl td.acol.hist{ background:#f1faf5; }
.cnp .bmx-tbl td.vcol{ background:#f5f8ff; color:#64748b; font-size:7px; }
.cnp .bmx-tbl td.vcol.neg{ color:#c0392b; }
.cnp .bmx-tbl td.vcol.pos{ color:#0f8a4d; }
.cnp .bmx-tbl tr.sec td{ background:#f3f4f6; font-weight:700; font-size:6.5px; letter-spacing:.05em; color:#6b7280; text-transform:uppercase; }
.cnp .bmx-tbl tr.net td, .cnp .bmx-tbl tr.bal td{ font-weight:700; color:#111827; border-top:1px solid #d6dae1; }
.cnp .bmx-tbl tr.net td{ background:#fbfbe9; }
.cnp .bmx-foot{ display:flex; align-items:center; gap:14px; padding:7px 13px; background:#fff; border-top:1px solid #e7e9ee; font-size:7px; color:#6b7280; }
.cnp .bmx-foot .sw{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px; vertical-align:-1px; }
.cnp .bmx-foot .sw.hist{ background:#10b981; }
.cnp .bmx-foot .sw.bud{ background:#94a3b8; }

/* === SourceFlow — data sources flowing down into a dashboard === */
.cnp .flowsrc{ display:flex; flex-direction:column; align-items:center; padding-top:4px; }
.cnp .fsrc-row{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(10px,3vw,40px); flex-wrap:wrap; }
.cnp .fsrc-node{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.cnp .fsrc-ico{ width:46px; height:46px; border-radius:13px; background:#fff; border:1px solid var(--dark-line); box-shadow:0 6px 16px -8px rgba(0,0,0,.6); display:grid; place-items:center; }
.cnp .fsrc-ico svg{ width:26px; height:26px; display:block; }
.cnp .fsrc-ico img{ width:26px; height:26px; object-fit:contain; display:block; }
/* Rapid square logo fills its chip edge-to-edge */
.cnp .fsrc-ico img[src*="rapid.webp"]{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
.cnp .fsrc-ico .fdb{ width:24px; height:24px; }
.cnp .fsrc-ico .fmono{ font-family:var(--disp); font-weight:800; font-size:17px; line-height:1; color:#161614; }
.cnp .fsrc-ico .fmono.ghl{ color:#2ea3a3; }
.cnp .fsrc-ico .fmono.rp{ color:#1f6feb; }
.cnp .fsrc-ico .fmono.aw{ color:#3a8a3a; }
.cnp .fsrc-ico .fmono.erp{ color:#6a5acd; font-size:12px; letter-spacing:.02em; }
.cnp .fsrc-ico .fmono.fab{ color:#117865; }
.cnp .fsrc-lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--on-dark-2); white-space:nowrap; }
.cnp .fsrc-wire{ position:relative; width:2px; height:26px; background:linear-gradient(180deg,var(--dark-line),rgba(51,51,47,.12)); border-radius:2px; }
.cnp .fsrc-dot{ position:absolute; left:50%; top:-2px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--lime); box-shadow:0 0 6px var(--lime); opacity:0; }
.cnp .fsrc-rail{ width:min(88%,820px); height:2px; background:var(--dark-line); border-radius:2px; }
.cnp .fsrc-feed{ position:relative; width:2px; height:22px; background:linear-gradient(180deg,var(--dark-line),rgba(51,51,47,.08)); border-radius:2px; }
.cnp .fsrc-dot2{ position:absolute; left:50%; top:-2px; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime); opacity:0; }
.cnp .fsrc-note{ margin-top:9px; font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--lime); opacity:.85; }

@media (prefers-reduced-motion: no-preference){
  .cnp .fsrc-dot{ animation:flowDown 1.9s linear infinite; }
  .cnp .fsrc-node:nth-child(2) .fsrc-dot{ animation-delay:.30s; }
  .cnp .fsrc-node:nth-child(3) .fsrc-dot{ animation-delay:.60s; }
  .cnp .fsrc-node:nth-child(4) .fsrc-dot{ animation-delay:.90s; }
  .cnp .fsrc-node:nth-child(5) .fsrc-dot{ animation-delay:1.20s; }
  .cnp .fsrc-node:nth-child(6) .fsrc-dot{ animation-delay:1.50s; }
  .cnp .fsrc-dot2{ animation:flowFeed 1.4s linear infinite; }
}
@keyframes flowDown{
  0%{ top:-2px; opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ top:26px; opacity:0; }
}
@keyframes flowFeed{
  0%{ top:-2px; opacity:0; }
  20%{ opacity:1; }
  100%{ top:24px; opacity:0; }
}

/* === Proof mockup — Torsion Developments feasibility (navy + sage) === */
.cnp .tdv{ background:#f4f7f9; color:#1b2a36; overflow:hidden; display:flex; flex-direction:column; }
.cnp .tdv-head{ display:flex; align-items:flex-start; justify-content:space-between; padding:10px 13px 8px; background:#fff; border-bottom:1px solid #e2e8ed; }
.cnp .tdv-logo{ height:16px; width:auto; display:block; }
.cnp .tdv-crumb{ display:block; font-size:8px; color:#6b7c89; margin-top:5px; }
.cnp .tdv-status{ font-family:var(--mono); font-size:8px; color:#2f7d52; background:#e7f3ec; border:1px solid #bfe2cd; border-radius:999px; padding:3px 9px; }
.cnp .tdv-tabs{ display:flex; gap:15px; padding:8px 13px 0; background:#fff; border-bottom:1px solid #e2e8ed; font-size:8.5px; color:#6b7c89; }
.cnp .tdv-tabs span{ padding-bottom:7px; white-space:nowrap; }
.cnp .tdv-tabs span.on{ color:#11202c; font-weight:600; box-shadow:inset 0 -2px 0 #163851; }
.cnp .tdv-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:10px 13px 0; }
.cnp .tdv-kpi{ background:#fff; border:1px solid #e2e8ed; border-radius:8px; padding:8px 10px; }
.cnp .tdv-kpi .k{ font-family:var(--mono); font-size:7px; letter-spacing:.08em; color:#8b9aa6; }
.cnp .tdv-kpi .v{ font-weight:800; font-size:16px; letter-spacing:-.01em; color:#11202c; margin-top:3px; }
.cnp .tdv-kpi .s{ font-size:7px; color:#9aa7b2; margin-top:3px; }
.cnp .tdv-phase{ display:flex; gap:4px; padding:9px 13px 0; }
.cnp .tdv-phase .ph{ font-size:7px; font-weight:600; color:#33485a; padding:4px 8px; border-radius:5px; white-space:nowrap; }
.cnp .tdv-phase .ph.land{ flex:4; background:#dde8ef; }
.cnp .tdv-phase .ph.build{ flex:11; background:#163851; color:#eaf1f5; }
.cnp .tdv-phase .ph.sale{ flex:2; background:#96c7a0; color:#163851; }
.cnp .tdv-panel{ margin:9px 13px 12px; background:#fff; border:1px solid #e2e8ed; border-radius:8px; padding:9px 10px; }
.cnp .tdv-pt{ font-weight:700; font-size:9px; color:#11202c; margin-bottom:6px; }
.cnp .tdv-tbl{ width:100%; border-collapse:collapse; font-size:7.5px; }
.cnp .tdv-tbl th, .cnp .tdv-tbl td{ padding:4px 7px; border-bottom:1px solid #eef2f5; white-space:nowrap; }
.cnp .tdv-tbl .lab{ text-align:left; color:#33485a; }
.cnp .tdv-tbl .n{ text-align:right; font-variant-numeric:tabular-nums; color:#1b2a36; }
.cnp .tdv-tbl thead th{ background:#f0f4f7; color:#6b7c89; font-weight:600; border-bottom:1px solid #d9e2e9; }
.cnp .tdv-tbl thead th.best, .cnp .tdv-tbl td.best{ background:#eef6f0; }
.cnp .tdv-tbl thead th.best{ color:#2f7d52; }
.cnp .tdv-tbl tr.np td{ font-weight:800; color:#11202c; border-top:1px solid #d9e2e9; }
.cnp .tdv-tbl tr.np td.best{ color:#2f7d52; }
.cnp .tdv-tbl tr.mgn td{ font-weight:600; color:#33485a; }
.cnp .tdv-foot{ font-family:var(--mono); font-size:6.5px; color:#9aa7b2; margin-top:6px; }

/* === Proof mockup — TTN Control Centre (charity donations · indigo + gold) === */
.cnp .ttn{ background:#f5f5fb; color:#221f3a; overflow:hidden; display:flex; flex-direction:column; }
.cnp .ttn-head{ display:flex; align-items:center; justify-content:space-between; padding:9px 13px; background:#1e1b3a; }
.cnp .ttn-h-l{ display:flex; align-items:center; gap:9px; }
.cnp .ttn-logo{ height:22px; width:auto; display:block; }
.cnp .ttn-h-t{ display:flex; flex-direction:column; line-height:1.25; }
.cnp .ttn-h-t strong{ font-size:9.5px; font-weight:700; color:#fff; }
.cnp .ttn-h-t span{ font-size:7.5px; color:#a7a3c8; }
.cnp .ttn-status{ font-family:var(--mono); font-size:7.5px; color:#7ee0a8; background:rgba(126,224,168,.12); border:1px solid rgba(126,224,168,.35); border-radius:999px; padding:3px 9px; }
.cnp .ttn-tabs{ display:flex; gap:15px; padding:8px 13px 0; background:#fff; border-bottom:1px solid #e6e4f0; font-size:8.5px; color:#74708f; }
.cnp .ttn-tabs span{ padding-bottom:7px; white-space:nowrap; }
.cnp .ttn-tabs span.on{ color:#1e1b3a; font-weight:600; box-shadow:inset 0 -2px 0 #5b4bd6; }
.cnp .ttn-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:10px 13px 0; }
.cnp .ttn-kpi{ background:#fff; border:1px solid #e6e4f0; border-radius:8px; padding:8px 10px; }
.cnp .ttn-kpi .k{ font-family:var(--mono); font-size:7px; letter-spacing:.07em; color:#8a86a8; }
.cnp .ttn-kpi .v{ font-weight:800; font-size:16px; letter-spacing:-.01em; color:#1e1b3a; margin-top:3px; }
.cnp .ttn-kpi .v.ok{ color:#1f9d57; }
.cnp .ttn-kpi .v .muted{ font-size:9px; font-weight:600; color:#b3afca; }
.cnp .ttn-kpi .s{ font-size:7px; color:#a3a0bd; margin-top:3px; }
.cnp .ttn-split{ display:flex; align-items:center; gap:9px; padding:10px 13px 0; }
.cnp .ttn-split .lab{ font-family:var(--mono); font-size:7px; letter-spacing:.07em; color:#8a86a8; white-space:nowrap; }
.cnp .ttn-split .bar{ flex:1; display:flex; height:14px; border-radius:5px; overflow:hidden; border:1px solid #e6e4f0; }
.cnp .ttn-split .seg{ display:flex; align-items:center; padding-left:7px; font-size:7px; font-weight:600; color:#fff; white-space:nowrap; }
.cnp .ttn-split .seg.stripe{ background:#635bff; }
.cnp .ttn-split .seg.paypal{ background:#0070ba; }
.cnp .ttn-panel{ margin:9px 13px 12px; background:#fff; border:1px solid #e6e4f0; border-radius:8px; padding:9px 10px; }
.cnp .ttn-pt{ display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:9px; color:#1e1b3a; margin-bottom:6px; }
.cnp .ttn-live{ font-family:var(--mono); font-size:6.5px; color:#1f9d57; font-weight:500; }
.cnp .ttn-tbl{ width:100%; border-collapse:collapse; font-size:7.5px; }
.cnp .ttn-tbl th, .cnp .ttn-tbl td{ padding:4px 7px; border-bottom:1px solid #f0eef6; white-space:nowrap; }
.cnp .ttn-tbl thead th{ background:#f4f3fa; color:#74708f; font-weight:600; text-align:left; border-bottom:1px solid #e3e0ee; }
.cnp .ttn-tbl th.r, .cnp .ttn-tbl td.r{ text-align:right; }
.cnp .ttn-tbl th.c, .cnp .ttn-tbl td.c{ text-align:center; }
.cnp .ttn-tbl .lab{ color:#1e1b3a; font-weight:600; }
.cnp .ttn-tbl td.num{ font-variant-numeric:tabular-nums; font-weight:700; color:#1e1b3a; }
.cnp .ttn-tag{ font-family:var(--mono); font-size:6px; color:#5b4bd6; background:#ece9fb; border-radius:3px; padding:1px 4px; margin-left:5px; vertical-align:middle; }
.cnp .ttn-meth{ font-size:7px; font-weight:600; padding:2px 6px; border-radius:999px; }
.cnp .ttn-meth.stripe{ color:#4b44c7; background:#ecebfd; }
.cnp .ttn-meth.paypal{ color:#005c99; background:#e3f0fa; }
.cnp .ttn-badge{ font-family:var(--mono); font-size:6.5px; padding:2px 6px; border-radius:999px; }
.cnp .ttn-badge.good{ color:#1f9d57; background:#e6f6ed; border:1px solid #bce6cd; }
.cnp .ttn-badge.warn{ color:#b07d1a; background:#fbf2dd; border:1px solid #ecd9a6; }
.cnp .ttn-foot{ font-family:var(--mono); font-size:6.5px; color:#a3a0bd; margin-top:6px; }

/* === Trust + Integrations: self-contained lime glow behind each heading === */
/* (sections are no longer adjacent, so each glow stands alone instead of meeting at a seam) */
.cnp .sec.trust{ position:relative; background:radial-gradient(118% 128% at 50% 34%, rgba(216,250,15,.13), rgba(216,250,15,.035) 46%, transparent 70%), var(--paper); }
/* Integrations = dark band (logos pop on dark, breaks the light run) */
.cnp .sec.intg{ position:relative; padding-block:clamp(48px,7vw,96px); background:radial-gradient(120% 130% at 50% 28%, rgba(216,250,15,.15), rgba(216,250,15,.03) 48%, transparent 72%), var(--dark); }
.cnp .sec.intg .kick span{ color:var(--on-dark-2); }
.cnp .sec.intg .h2{ color:var(--on-dark); }
.cnp .sec.intg .lead{ color:var(--on-dark-2); }
/* soft accent on the kicker squares so the headings glow in the same key */
.cnp .sec.trust .kick .sq, .cnp .sec.intg .kick .sq{ box-shadow:0 0 10px 1px rgba(216,250,15,.6); }
/* light sections share one clean tone — rhythm comes from the dark bands
   (Hero / Integrations / Proof / CTA), not from tinted backgrounds. */

/* === Integration wall — "we connect, not replace" marquee === */
.cnp .intg-wall{ margin-top:clamp(22px,3vw,38px); display:flex; flex-direction:column; gap:clamp(12px,1.4vw,18px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.cnp .intg-row{ overflow:hidden; }
.cnp .intg-track{ display:flex; gap:clamp(12px,1.4vw,18px); width:max-content; will-change:transform; }
.cnp .intg-chip{ flex:none; width:clamp(82px,9vw,116px); height:clamp(62px,6.5vw,82px);
  display:grid; place-items:center; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 6px 18px -12px rgba(0,0,0,.3); }
.cnp .intg-chip img{ max-width:clamp(34px,3.6vw,46px); max-height:clamp(26px,2.8vw,34px); width:auto; height:auto; object-fit:contain; display:block; }

@media (prefers-reduced-motion: no-preference){
  .cnp .intg-track{ animation:intgScroll 42s linear infinite; }
  .cnp .intg-track.rev{ animation-direction:reverse; animation-duration:50s; }
  .cnp .intg-wall:hover .intg-track{ animation-play-state:paused; }
}
@keyframes intgScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* "Four ways" ladder + "What we ship" visuals read as ONE section (menu → demo) */
.cnp #services{ padding-bottom:clamp(20px,3vw,34px); }