/* buttons (.p11-btn …) and the fluid gradient (data-p11-fluid) come from the design system, defined once in web/ds */
@import url("../ds/p11-ds.css");
/*
 * Project Eleven website kit for Webflow: styles.
 * Served from GitHub Pages and linked once in Webflow's site settings (see README.md), so changes pushed to
 * main reach the Webflow site without re-pasting. Every class is prefixed p11- so nothing clashes with Webflow classes.
 * Mirrors web/p11-home/index.html: the ASCII backdrop, the three threat visuals and the Strongpoint console;
 * and contact.html: the particle backdrop.
 */
:root {
  --p11-accent: #BCF5FF; --p11-lime: var(--p11-accent); /* old name, kept for styles already built in Webflow */ --p11-ink: #0E0F12; --p11-navy: #02111D; --p11-on-dark: #F2F4F8; --p11-on-dark-soft: #B7BFCE;
  --p11-sans: "P11 Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* smooth wheel scrolling (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* the ASCII backdrop: a fixed canvas behind the page (the script adds it). Sections over it need no background,
   and the page wrapper needs position: relative; z-index: 1 so it sits above. */
.p11-ascii { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
/* the contact page's particle backdrop fades out under the nav bar, so the logo and links stay clean */
.p11-ascii--particles { -webkit-mask: linear-gradient(180deg, transparent 40px, #000 140px); mask: linear-gradient(180deg, transparent 40px, #000 140px); }

/* ---- threat visuals ---------------------------------------------------------------------------------------- */
/* drawn light on navy; each embed is one .p11-viz element. The script adds .p11-in once it's been seen
   (one-off draw-in) and .p11-play while it's on screen (loops). */
.p11-viz { display: block; width: 100%; font: 400 16px/1.5 var(--p11-sans); color: var(--p11-on-dark-soft); }
svg.p11-viz { height: auto; overflow: visible; }
/* 1, exposed today: the supply field */
.p11-supply { position: relative; overflow: hidden; }
.p11-sf-grid { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 4px; }
.p11-sf-grid i { display: block; aspect-ratio: 1; border-radius: 3px; background: rgba(242,244,248,.07); box-shadow: inset 0 0 0 1px rgba(242,244,248,.05); }
.p11-sf-grid i.p11-x { background: var(--p11-accent); opacity: .74; box-shadow: 0 0 12px rgba(188,245,255,.22); }
.p11-sf-beam { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; background: linear-gradient(90deg, rgba(188,245,255,0), rgba(188,245,255,.12) 50%, rgba(188,245,255,0)); transform: translateX(-100%); pointer-events: none; }
.p11-viz.p11-play .p11-sf-beam { animation: p11-sf-beam 5.2s linear infinite; }
.p11-viz.p11-play .p11-sf-grid i.p11-x { animation: p11-sf-ping 5.2s ease-out infinite; }
@keyframes p11-sf-beam { to { transform: translateX(500%); } }
@keyframes p11-sf-ping { 0% { opacity: .74; transform: none; } 4% { opacity: 1; transform: scale(1.16); box-shadow: 0 0 20px rgba(188,245,255,.65); } 22%, 100% { opacity: .74; transform: none; box-shadow: 0 0 12px rgba(188,245,255,.22); } }
.p11-sf-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 14px; font-size: 12px; line-height: 1.4; }
.p11-sf-key span { display: inline-flex; align-items: center; gap: 8px; }
.p11-sf-key i { display: block; width: 10px; height: 10px; border-radius: 3px; background: rgba(242,244,248,.16); }
.p11-sf-key i.p11-x { background: var(--p11-accent); box-shadow: 0 0 8px rgba(188,245,255,.4); }
.p11-sf-key .p11-sf-unit { margin-left: auto; }
/* 2 and 3, the charts */
.p11-ch text { font: 400 11px var(--p11-sans); fill: var(--p11-on-dark-soft); letter-spacing: .01em; }
.p11-ch text.p11-hi { font-weight: 500; fill: var(--p11-accent); }
.p11-ch text.p11-dim { fill-opacity: .7; }
.p11-cv-ping, .p11-gt-bar { transform-box: fill-box; }
.p11-cv-ping { transform-origin: center; opacity: 0; }
.p11-viz.p11-play .p11-cv-ping { animation: p11-cv-ping 2.4s ease-out infinite; }
@keyframes p11-cv-ping { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.p11-js .p11-conv .p11-cv-need, .p11-js .p11-conv .p11-cv-have { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1) .25s; }
.p11-js .p11-conv .p11-cv-gap, .p11-js .p11-conv .p11-cv-proj, .p11-js .p11-conv .p11-cv-dots { opacity: 0; transition: opacity .8s ease 1.1s; }
.p11-js .p11-conv.p11-in .p11-cv-need, .p11-js .p11-conv.p11-in .p11-cv-have { stroke-dashoffset: 0; }
.p11-js .p11-conv.p11-in .p11-cv-gap, .p11-js .p11-conv.p11-in .p11-cv-proj, .p11-js .p11-conv.p11-in .p11-cv-dots { opacity: 1; }
.p11-gt-bar { transform-origin: left center; }
.p11-js .p11-gantt .p11-gt-bar { transform: scaleX(0); transition: transform 1.3s cubic-bezier(.3,.7,.2,1) .3s; }
.p11-js .p11-gantt .p11-gt-bar.p11-b2 { transition-delay: .5s; }
.p11-js .p11-gantt .p11-gt-hit { opacity: 0; transition: opacity .5s ease 1.1s; }
.p11-js .p11-gantt.p11-in .p11-gt-bar { transform: none; }
.p11-js .p11-gantt.p11-in .p11-gt-hit { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .p11-viz.p11-play .p11-sf-beam, .p11-viz.p11-play .p11-sf-grid i.p11-x, .p11-viz.p11-play .p11-cv-ping { animation: none; }
  .p11-js .p11-conv *, .p11-js .p11-gantt * { transition: none !important; stroke-dashoffset: 0 !important; opacity: 1; transform: none !important; }
  .p11-cv-ping { opacity: 0 !important; }
}

/* ---- Strongpoint console ----------------------------------------------------------------------------------- */
/* keep Webflow's default body and link styles out of the console */
.p11-sp-stage { font-size: 16px; line-height: 1.55; color: var(--p11-ink); }
.p11-sp-stage a { text-decoration: none; }
.p11-sp-stage img { max-width: none; vertical-align: baseline; }
.p11-sp-stage { --navy-50: #F8FBFD; --navy-100: #EDF5FB; --navy-200: #D8EDFC; --navy-900: #022235; --navy-950: #02111D;
  --cyan-100: #DDFAFF; --cyan-200: #BCF5FF; --grey-50: #F7F7F7; --grey-100: #F0F0F0; --grey-200: #E9E9EC; --base-white: #FFFFFF;
  --ink: var(--navy-900); --ink-2: rgb(2 34 53 / .62); --mute: rgb(2 34 53 / .38);   /* Strongpoint's own navy and cyan: it's their product */
  position: relative; height: clamp(520px, 66vh, 700px);
  font-family: var(--p11-sans); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
/* a soft Strongpoint-cyan glow behind the console */
.p11-sp-stage::before { content: ""; position: absolute; inset: 0 -10% 0 -6%; background: radial-gradient(48% 52% at 52% 50%, rgba(188,245,255,.75), rgba(188,245,255,.28) 50%, rgba(188,245,255,0) 75%); pointer-events: none; }
/* Hero console: Strongpoint "Assets" screen (pillar-wireframe v1 portfolio, simplified), 980×660 design px on a tilted plane.
JS scales .p11-hc to the hero; the plane eases in from flat and then drifts slowly (dynamic angle). */
.p11-hc { position: absolute; z-index: 1; left: 50%; top: 90px; width: 980px; height: 660px; transform-origin: 0 0; transform: scale(var(--k, .7)); perspective: 2200px; color: var(--ink); pointer-events: none; }
.p11-hc .p11-pl { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 30% 50%;
transform: rotateX(var(--rx, 16deg)) rotateY(var(--ry, -20deg)) rotateZ(var(--rz, 7deg)); }
.p11-hc .p11-hw { position: absolute; inset: 0; display: grid; grid-template-columns: 210px 1fr; gap: 10px; padding: 10px; background: var(--grey-100); border-radius: 26px;
box-shadow: 0 2px 0 rgb(255 255 255 / .6) inset, -40px 60px 90px -30px rgb(2 17 29 / .75); overflow: hidden; }
.p11-hc .p11-sb { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; background: var(--base-white); border-radius: 18px; }
.p11-hc .p11-sb .p11-lg { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 18px; }
.p11-hc .p11-sb .p11-lg img { width: 24px; height: 24px; } .p11-hc .p11-sb .p11-lg span { width: 22px; height: 22px; border-radius: 6px; background: var(--grey-100); }
.p11-hc .p11-sb a { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 12px; font-size: 14px; color: var(--ink-2); }
.p11-hc .p11-sb a svg { width: 18px; height: 18px; } .p11-hc .p11-sb a b { margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--grey-100); font-size: 12.5px; font-weight: 500; display: grid; place-items: center; color: var(--ink); }
.p11-hc .p11-sb a.p11-on { background: var(--grey-100); color: var(--ink); font-weight: 500; }
.p11-hc .p11-sb .p11-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: var(--grey-50); font-size: 13.5px; font-weight: 500; }
.p11-hc .p11-sb .p11-me i { width: 32px; height: 32px; border-radius: 50%; background: var(--cyan-200); display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 600; }
.p11-hc .p11-sb .p11-me small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-2); }
.p11-hc .p11-mn { background: var(--base-white); border-radius: 18px; padding: 26px 30px 0; min-width: 0; }
.p11-hc .p11-tp { display: flex; justify-content: space-between; align-items: center; }
.p11-hc .p11-tp b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.p11-hc .p11-tp span { width: 220px; height: 34px; border-radius: 99px; background: var(--grey-100); display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 13px; color: var(--mute); }
.p11-hc .p11-bl { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 20px; }
.p11-hc .p11-num { font-size: 52px; font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.p11-hc .p11-num i { font-style: normal; color: var(--mute); }
.p11-hc .p11-up { margin-top: 8px; font-size: 13.5px; font-weight: 500; } .p11-hc .p11-up span { color: var(--ink-2); font-weight: 400; }
.p11-hc .p11-sbtn { height: 40px; padding: 0 18px; border-radius: 99px; background: var(--navy-900); color: var(--base-white); font-size: 13.5px; font-weight: 500; display: grid; place-items: center; }
.p11-hc .p11-cov { display: flex; gap: 4px; height: 8px; margin-top: 18px; } .p11-hc .p11-cov i { border-radius: 99px; }
.p11-hc .p11-cov i:first-child { flex: 0 0 0%; background: var(--navy-900); transition: flex-basis 1.6s cubic-bezier(.3,.7,.2,1) .7s; } .p11-hc .p11-cov i:last-child { flex: 1; background: var(--grey-200); }
.p11-hc.p11-live .p11-cov i:first-child { flex-basis: 82%; }
.p11-hc .p11-lgd { display: flex; justify-content: space-between; margin-top: 9px; font-size: 13px; color: var(--ink-2); }
.p11-hc .p11-lgd span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--grey-200); } .p11-hc .p11-lgd span.p11-pq::before { background: var(--navy-900); }
.p11-hc .p11-chips { display: flex; gap: 8px; margin-top: 16px; }
.p11-hc .p11-chips > span { height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--grey-200); display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.p11-hc .p11-chips b { color: var(--ink); font-weight: 600; } .p11-hc .p11-chips .p11-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-200); box-shadow: 0 0 0 3px var(--cyan-100); }
.p11-hc .p11-tabs { display: flex; align-items: center; gap: 22px; margin-top: 22px; border-bottom: 1px solid var(--grey-100); font-size: 14px; color: var(--ink-2); }
.p11-hc .p11-tabs span { padding-bottom: 10px; } .p11-hc .p11-tabs span.p11-on { color: var(--ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--navy-900); }
.p11-hc .p11-tabs em { font-style: normal; color: var(--mute); margin-left: 4px; } .p11-hc .p11-tabs .p11-add { margin-left: auto; margin-bottom: 8px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--grey-200); display: grid; place-items: center; font-size: 13px; color: var(--ink); }
.p11-hc .p11-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.p11-hc .p11-ac { border: 1px solid var(--grey-100); border-radius: 16px; padding: 14px 16px; box-shadow: 0 8px 20px -16px rgb(2 17 29 / .35); }
.p11-hc .p11-ac .p11-h { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; } .p11-hc .p11-ac .p11-h i { width: 30px; height: 30px; border-radius: 9px; background: var(--grey-100); }
.p11-hc .p11-ac .p11-h u { margin-left: auto; text-decoration: none; color: var(--mute); }
.p11-hc .p11-ac .p11-v { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 22px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.p11-hc .p11-ac .p11-coins { display: flex; } .p11-hc .p11-ac .p11-coins img { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--base-white); margin-left: -7px; background: var(--base-white); object-fit: cover; }
.p11-hc .p11-ac .p11-coins i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--base-white); margin-left: -6px; font-style: normal; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.p11-hc .p11-ac .p11-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 12.5px; font-weight: 500; background: var(--grey-100); color: var(--ink-2); }
.p11-hc .p11-ac .p11-tag.p11-pq { background: var(--cyan-100); color: var(--ink); } .p11-hc .p11-ac .p11-tag.p11-pp { background: var(--navy-100); color: var(--ink); }
.p11-hc .p11-toast { position: absolute; left: 70px; top: 470px; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 22px 0 10px; border-radius: 99px; background: var(--base-white); box-shadow: 0 30px 50px -24px rgb(2 17 29 / .6); font-size: 16px; font-weight: 500; white-space: nowrap; }
.p11-hc .p11-toast > i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--cyan-200); }
.p11-hc .p11-toast svg { width: 20px; height: 20px; } .p11-hc .p11-toast small { display: block; font-size: 14px; font-weight: 400; color: var(--ink-2); }
/* entrance + live loop (JS adds .p11-live; reduced motion shows the final state) */
.p11-hc .p11-pl { opacity: 0; transition: opacity 1s ease; } .p11-hc.p11-live .p11-pl { opacity: 1; }
.p11-hc .p11-ac { opacity: 0; translate: 0 14px; transition: opacity .6s ease, translate .7s cubic-bezier(.2,.7,.2,1); }
.p11-hc.p11-live .p11-ac { opacity: 1; translate: 0 0; } .p11-hc.p11-live .p11-ac:nth-child(2) { transition-delay: .1s; } .p11-hc.p11-live .p11-ac:nth-child(3) { transition-delay: .2s; } .p11-hc.p11-live .p11-ac:nth-child(4) { transition-delay: .3s; }
.p11-hc .p11-toast { opacity: 0; translate: -16px 0; transition: opacity .5s ease, translate .6s cubic-bezier(.2,.7,.2,1); } .p11-hc .p11-toast.p11-show { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .p11-hc .p11-pl, .p11-hc .p11-ac, .p11-hc .p11-toast { transition: none; opacity: 1; translate: none; } .p11-hc .p11-cov i:first-child { transition: none; flex-basis: 82%; } }
.p11-sp-stage .p11-hc { left: 4%; top: calc(50% - 330px * var(--k, .7)); z-index: 1; will-change: translate; }
/* a soft shadow on the page below the console; it stays put while the console slides, so the console reads as raised */
.p11-sp-stage::after { content: ""; position: absolute; left: 6%; right: -8%; top: 62%; height: 34%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgb(2 17 29 / .2), rgb(2 17 29 / .08) 55%, rgb(2 17 29 / 0)); filter: blur(18px); transform: rotate(6deg); }
/* the console as frosted glass in three layers so the depth reads: a navy-tinted back plane, brighter panels,
   and near-solid white cards with soft drop shadows */
.p11-sp-stage .p11-hc .p11-pl { transform-style: flat; }
.p11-sp-stage .p11-hc .p11-hw { background: rgba(196,214,228,.5); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), -50px 90px 140px -50px rgb(2 17 29 / .5), 0 30px 60px -30px rgb(2 17 29 / .28); }
.p11-sp-stage .p11-hc .p11-sb, .p11-sp-stage .p11-hc .p11-mn { background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 1px 2px rgb(2 17 29 / .05), 0 12px 30px -18px rgb(2 17 29 / .28); }
.p11-sp-stage .p11-hc .p11-sb a.p11-on, .p11-sp-stage .p11-hc .p11-tp span, .p11-sp-stage .p11-hc .p11-sb .p11-me { background: rgb(2 34 53 / .06); }
.p11-sp-stage .p11-hc .p11-ac { background: rgba(255,255,255,.96); border-color: rgb(2 34 53 / .07); box-shadow: 0 1px 2px rgb(2 17 29 / .06), 0 16px 30px -16px rgb(2 17 29 / .34); }
.p11-sp-stage .p11-hc .p11-chips > span, .p11-sp-stage .p11-hc .p11-tabs .p11-add { background: rgba(255,255,255,.9); border-color: rgb(2 34 53 / .09); box-shadow: 0 6px 14px -10px rgb(2 17 29 / .3); }
.p11-sp-stage .p11-hc .p11-toast { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (max-width: 991px) {
  .p11-sp-stage { height: calc(660px * var(--k, .4) + 40px); }
  .p11-sp-stage .p11-hc { left: calc((100% - 980px * var(--k, .4)) / 2); top: 20px; }
}