| :root { |
| --bg0: #070a12; |
| --bg: #0a0e1a; |
| --surface: #0f1421; |
| --surface2: #11192b; |
| --border: rgba(245, 240, 232, 0.12); |
| --border2: rgba(245, 240, 232, 0.18); |
| --text: rgba(245, 240, 232, 0.85); |
| --textStrong: #f5f0e8; |
| --muted: rgba(245, 240, 232, 0.60); |
| --muted2: rgba(245, 240, 232, 0.60); |
| --ok: #5dd49b; |
| --danger: #e85d5d; |
| --warn: #f2c94c; |
| --amd: #ff7a00; |
| --shadow: 0 12px 28px rgba(0, 0, 0, 0.35); |
| --radius: 18px; |
| --radius2: 14px; |
| } |
|
|
| * { box-sizing: border-box; } |
| html, body { height: 100%; } |
| body { |
| margin: 0; |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; |
| background: linear-gradient(180deg, var(--bg), rgba(0, 0, 0, 0.04)); |
| color: var(--text); |
| text-rendering: geometricPrecision; |
| } |
|
|
| .container { |
| max-width: 1180px; |
| margin: 0 auto; |
| padding: 22px 18px; |
| } |
|
|
| .skipLink { |
| position: absolute; |
| left: 10px; |
| top: 10px; |
| padding: 10px 12px; |
| border-radius: 999px; |
| border: 1px solid var(--border); |
| background: rgba(10, 14, 26, 0.9); |
| color: var(--text); |
| transform: translateY(-140%); |
| transition: transform 160ms ease; |
| z-index: 50; |
| text-decoration: none; |
| } |
| .skipLink:focus { transform: translateY(0); outline: none; border-color: var(--border2); } |
|
|
| .header { |
| position: sticky; |
| top: 0; |
| z-index: 20; |
| border-bottom: 1px solid rgba(245, 240, 232, 0.08); |
| background: rgba(10, 14, 26, 0.78); |
| backdrop-filter: blur(10px); |
| } |
| .header__inner { |
| display: grid; |
| grid-template-columns: auto 1fr auto; |
| align-items: center; |
| gap: 14px; |
| padding-top: 12px; |
| padding-bottom: 12px; |
| } |
| .nav { display: flex; gap: 14px; justify-content: center; } |
| .nav__link { |
| color: var(--muted); |
| text-decoration: none; |
| font-size: 13px; |
| padding: 8px 10px; |
| border-radius: 999px; |
| border: 1px solid transparent; |
| } |
| .nav__link:hover { color: var(--text); border-color: rgba(245, 240, 232, 0.12); background: rgba(245, 240, 232, 0.03); } |
| .nav__link:focus-visible { outline: 2px solid rgba(93, 212, 155, 0.55); outline-offset: 2px; } |
|
|
| .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } |
| .logo { |
| width: 40px; |
| height: 40px; |
| border-radius: 14px; |
| border: 1px solid rgba(245, 240, 232, 0.14); |
| background: var(--surface); |
| position: relative; |
| box-shadow: none; |
| overflow: hidden; |
| } |
| .logo__dot { |
| position: absolute; |
| width: 7px; |
| height: 7px; |
| border-radius: 999px; |
| left: 12px; |
| top: 12px; |
| background: rgba(245, 240, 232, 0.95); |
| filter: drop-shadow(0 0 10px rgba(245, 240, 232, 0.35)); |
| } |
| .logo__dot--2 { left: 19px; top: 20px; opacity: 0.8; } |
| .logo__dot--3 { left: 26px; top: 14px; opacity: 0.65; } |
| .brand__text { display: grid; } |
| .brand__name { font-weight: 760; letter-spacing: -0.2px; line-height: 1.05; } |
| .brand__tag { font-size: 12px; color: var(--muted2); margin-top: 2px; } |
| .header__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } |
|
|
| .danger { color: var(--danger); } |
| .ok { color: var(--ok); } |
|
|
| h1 { |
| font-size: clamp(30px, 4.1vw, 52px); |
| line-height: 1.05; |
| margin: 16px 0 10px; |
| letter-spacing: -0.9px; |
| color: var(--textStrong); |
| } |
| h2 { |
| margin: 0 0 8px; |
| font-size: clamp(20px, 2.4vw, 28px); |
| letter-spacing: -0.4px; |
| color: var(--textStrong); |
| } |
| h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.25px; color: var(--textStrong); } |
|
|
| .eyebrow { |
| color: var(--muted2); |
| font-size: 12px; |
| text-transform: uppercase; |
| letter-spacing: 0.16em; |
| } |
| .hero__sub { margin: 0 0 18px; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 68ch; } |
| .muted { color: var(--muted); } |
|
|
| .section { padding: 96px 0 0; } |
| .section__head { max-width: 76ch; margin-bottom: 16px; } |
| .section--hero { padding-top: 56px; } |
|
|
| .hero__grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 26px; |
| align-items: start; |
| } |
|
|
| .ctaRow { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 14px; } |
| .btn { |
| border: 1px solid var(--border); |
| background: transparent; |
| color: var(--text); |
| padding: 11px 14px; |
| border-radius: 12px; |
| font-weight: 700; |
| cursor: pointer; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| letter-spacing: -0.1px; |
| transition: transform 120ms ease, border-color 140ms ease, background 140ms ease; |
| } |
| .btn:hover { border-color: rgba(245, 240, 232, 0.20); background: rgba(245, 240, 232, 0.03); transform: translateY(-1px); } |
| .btn:active { transform: translateY(0); } |
| .btn:focus-visible { outline: 2px solid rgba(93, 212, 155, 0.60); outline-offset: 2px; } |
| .btn--primary { |
| background: rgba(245, 240, 232, 0.94); |
| border-color: rgba(245, 240, 232, 0.94); |
| color: #0a0e1a; |
| } |
| .btn--primary:hover { background: #fff8ef; border-color: #fff8ef; } |
| .btn--secondary { background: transparent; } |
|
|
| .amdBadge { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| border: 1px solid rgba(245, 240, 232, 0.10); |
| border-radius: 999px; |
| padding: 10px 12px; |
| background: var(--surface); |
| max-width: 560px; |
| } |
| .amdBadge__pill { |
| font-weight: 900; |
| font-size: 12px; |
| letter-spacing: 0.08em; |
| color: #1a0f04; |
| background: var(--amd); |
| padding: 6px 10px; |
| border-radius: 999px; |
| } |
| .amdBadge__text { color: var(--muted); font-size: 13px; line-height: 1.35; } |
|
|
| .card { |
| border: 1px solid rgba(245, 240, 232, 0.10); |
| background: var(--surface); |
| border-radius: var(--radius); |
| padding: 18px 18px; |
| box-shadow: none; |
| } |
|
|
| .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } |
| .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } |
|
|
| .emphasis { |
| margin: 16px 0 0; |
| padding: 14px 16px; |
| border-radius: var(--radius2); |
| border: 1px dashed rgba(245, 240, 232, 0.15); |
| background: var(--surface); |
| color: var(--text); |
| letter-spacing: -0.1px; |
| } |
|
|
| .reveal { opacity: 0; transform: translateY(10px); transition: opacity 520ms ease, transform 520ms ease; } |
| .reveal.inView { opacity: 1; transform: translateY(0); } |
|
|
| |
| .heroAnim { |
| margin: 0; |
| border-radius: 22px; |
| border: 1px solid rgba(245, 240, 232, 0.10); |
| background: var(--surface); |
| padding: 14px 14px 12px; |
| box-shadow: none; |
| max-width: 600px; |
| } |
| .heroAnim__svg { width: 100%; height: auto; display: block; } |
| .heroAnim__cap { margin: 10px 4px 0; font-size: 12px; color: var(--muted2); line-height: 1.45; } |
|
|
| .trail__path { |
| stroke: rgba(245, 240, 232, 0.16); |
| stroke-width: 2.2; |
| fill: none; |
| stroke-dasharray: 5 6; |
| } |
| .trail__path--soft { stroke: rgba(245, 240, 232, 0.12); stroke-width: 2; stroke-dasharray: 4 7; } |
|
|
| .node__ring { fill: none; stroke: rgba(245, 240, 232, 0.16); stroke-width: 2; } |
| .node__fill { fill: rgba(245, 240, 232, 0.04); stroke: rgba(245, 240, 232, 0.08); stroke-width: 1.5; } |
| .node--danger .node__ring { stroke: rgba(232, 93, 93, 0.65); } |
| .icon { fill: rgba(245, 240, 232, 0.78); stroke: rgba(245, 240, 232, 0.78); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } |
| .icon__roof { fill: none; } |
| .icon__win { fill: none; opacity: 0.7; } |
| .icon__stem { fill: none; opacity: 0.7; } |
| .node__label { fill: rgba(245, 240, 232, 0.70); font-size: 12px; font-weight: 650; letter-spacing: -0.1px; } |
|
|
| .pheromone__ring { fill: rgba(245, 240, 232, 0.03); stroke: rgba(245, 240, 232, 0.18); stroke-width: 2; } |
| .pheromone__core { fill: rgba(245, 240, 232, 0.08); stroke: rgba(245, 240, 232, 0.14); stroke-width: 1.5; } |
| .pheromone__label { fill: rgba(245, 240, 232, 0.68); font-size: 12px; font-weight: 700; letter-spacing: -0.1px; } |
|
|
| .callout rect { |
| fill: rgba(232, 93, 93, 0.12); |
| stroke: rgba(232, 93, 93, 0.60); |
| stroke-width: 1.2; |
| } |
| .callout text { fill: rgba(245, 240, 232, 0.92); font-size: 12px; font-weight: 800; letter-spacing: -0.1px; } |
|
|
| .dot { filter: url(#softGlow); } |
| .dot--danger { fill: rgba(232, 93, 93, 0.95); } |
| .dot--ok { fill: rgba(93, 212, 155, 0.95); } |
| .dot--neutral { fill: rgba(245, 240, 232, 0.82); } |
|
|
| .cust__head, .cust__body { fill: none; stroke: rgba(245, 240, 232, 0.58); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } |
| .cust__head { fill: rgba(245, 240, 232, 0.48); stroke: rgba(245, 240, 232, 0.56); } |
| .notif rect { fill: rgba(232, 93, 93, 0.16); stroke: rgba(232, 93, 93, 0.65); stroke-width: 1.2; } |
| .notif path { fill: none; stroke: rgba(245, 240, 232, 0.92); stroke-width: 1.6; stroke-linecap: round; } |
| .notif--ok circle { fill: rgba(93, 212, 155, 0.14); stroke: rgba(93, 212, 155, 0.70); stroke-width: 1.2; } |
| .notif--ok path { fill: none; stroke: rgba(93, 212, 155, 0.95); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } |
|
|
| .phaseLabel rect { fill: rgba(245, 240, 232, 0.05); stroke: rgba(245, 240, 232, 0.16); stroke-width: 1.1; } |
| .phaseLabel text { fill: rgba(245, 240, 232, 0.82); font-size: 12px; font-weight: 700; } |
| .phaseLabel--bad rect { fill: rgba(232, 93, 93, 0.10); stroke: rgba(232, 93, 93, 0.55); } |
| .phaseLabel--ok rect { fill: rgba(93, 212, 155, 0.10); stroke: rgba(93, 212, 155, 0.55); } |
|
|
| .anim { animation-timing-function: cubic-bezier(0.22, 0.8, 0.22, 1); animation-iteration-count: infinite; } |
| .heroAnim:hover .anim { animation-play-state: paused; } |
|
|
| @keyframes contamDot { |
| 0% { opacity: 0; transform: translate(80px, 120px); } |
| 2% { opacity: 1; } |
| 16% { opacity: 1; transform: translate(280px, 120px); } |
| 18% { opacity: 0; transform: translate(280px, 120px); } |
| 100% { opacity: 0; transform: translate(280px, 120px); } |
| } |
| @keyframes flowOkA { |
| 0%, 16% { opacity: 0; transform: translate(180px, 120px); } |
| 18% { opacity: 1; } |
| 32% { opacity: 1; transform: translate(500px, 120px); } |
| 34%, 100% { opacity: 0; transform: translate(500px, 120px); } |
| } |
| @keyframes flowOkB { |
| 0%, 18% { opacity: 0; transform: translate(180px, 120px); } |
| 20% { opacity: 1; } |
| 34% { opacity: 1; transform: translate(500px, 120px); } |
| 36%, 100% { opacity: 0; transform: translate(500px, 120px); } |
| } |
| @keyframes flowBadA { |
| 0%, 16% { opacity: 0; transform: translate(280px, 120px); } |
| 18% { opacity: 1; } |
| 32% { opacity: 1; transform: translate(500px, 120px); } |
| 34%, 100% { opacity: 0; transform: translate(500px, 120px); } |
| } |
| @keyframes flowBadB { |
| 0%, 18% { opacity: 0; transform: translate(280px, 120px); } |
| 20% { opacity: 1; } |
| 34% { opacity: 1; transform: translate(500px, 120px); } |
| 36%, 100% { opacity: 0; transform: translate(500px, 120px); } |
| } |
| @keyframes mixDot1 { |
| 0%, 34% { opacity: 0; transform: translate(500px, 120px); } |
| 36% { opacity: 1; } |
| 50% { opacity: 1; transform: translate(512px, 108px); } |
| 52%, 100% { opacity: 0; transform: translate(500px, 120px); } |
| } |
| @keyframes mixDot2 { |
| 0%, 34% { opacity: 0; transform: translate(500px, 120px); } |
| 36% { opacity: 1; } |
| 50% { opacity: 1; transform: translate(488px, 132px); } |
| 52%, 100% { opacity: 0; transform: translate(500px, 120px); } |
| } |
| @keyframes mixDot3 { |
| 0%, 34% { opacity: 0; transform: translate(500px, 120px); } |
| 36% { opacity: 1; } |
| 50% { opacity: 1; transform: translate(504px, 140px); } |
| 52%, 100% { opacity: 0; transform: translate(500px, 120px); } |
| } |
| @keyframes calloutPop { |
| 0%, 50% { opacity: 0; transform: translate(280px, 56px) translateY(6px); } |
| 52% { opacity: 1; transform: translate(280px, 56px) translateY(0); } |
| 66% { opacity: 1; } |
| 68%, 100% { opacity: 0; } |
| } |
| @keyframes pheromoneGlow { |
| 0%, 50% { opacity: 0.55; transform: translate(380px, 305px) scale(1); } |
| 52% { opacity: 1; transform: translate(380px, 305px) scale(1.03); } |
| 66% { opacity: 1; transform: translate(380px, 305px) scale(1.05); } |
| 68%, 100% { opacity: 0.75; transform: translate(380px, 305px) scale(1); } |
| } |
| @keyframes notifyBad1 { |
| 0%, 66% { opacity: 0; transform: translate(380px, 305px); } |
| 68% { opacity: 1; } |
| 80% { opacity: 1; transform: translate(460px, 260px); } |
| 84%, 100% { opacity: 0; transform: translate(460px, 260px); } |
| } |
| @keyframes notifyBad2 { |
| 0%, 66% { opacity: 0; transform: translate(380px, 305px); } |
| 69% { opacity: 1; } |
| 81% { opacity: 1; transform: translate(520px, 260px); } |
| 85%, 100% { opacity: 0; transform: translate(520px, 260px); } |
| } |
| @keyframes notifyBad3 { |
| 0%, 66% { opacity: 0; transform: translate(380px, 305px); } |
| 70% { opacity: 1; } |
| 82% { opacity: 1; transform: translate(580px, 260px); } |
| 86%, 100% { opacity: 0; transform: translate(580px, 260px); } |
| } |
| @keyframes notifyOk1 { |
| 0%, 66% { opacity: 0; transform: translate(380px, 305px); } |
| 68% { opacity: 1; } |
| 80% { opacity: 1; transform: translate(460px, 330px); } |
| 84%, 100% { opacity: 0; transform: translate(460px, 330px); } |
| } |
| @keyframes notifyOk2 { |
| 0%, 66% { opacity: 0; transform: translate(380px, 305px); } |
| 69% { opacity: 1; } |
| 81% { opacity: 1; transform: translate(520px, 330px); } |
| 85%, 100% { opacity: 0; transform: translate(520px, 330px); } |
| } |
| @keyframes notifyOk3 { |
| 0%, 66% { opacity: 0; transform: translate(380px, 305px); } |
| 70% { opacity: 1; } |
| 82% { opacity: 1; transform: translate(580px, 330px); } |
| 86%, 100% { opacity: 0; transform: translate(580px, 330px); } |
| } |
| @keyframes labelBad { |
| 0%, 82% { opacity: 0; transform: translate(520px, 220px) translateY(4px); } |
| 84% { opacity: 1; transform: translate(520px, 220px) translateY(0); } |
| 98% { opacity: 1; } |
| 100% { opacity: 0; } |
| } |
| @keyframes labelOk { |
| 0%, 82% { opacity: 0; transform: translate(540px, 360px) translateY(4px); } |
| 84% { opacity: 1; transform: translate(540px, 360px) translateY(0); } |
| 98% { opacity: 1; } |
| 100% { opacity: 0; } |
| } |
| @keyframes notifBadgeIn { |
| 0%, 82% { opacity: 0; transform: translateY(4px); } |
| 84% { opacity: 1; transform: translateY(0); } |
| 98% { opacity: 1; } |
| 100% { opacity: 0; } |
| } |
|
|
| .anim--contam { animation: contamDot 12s linear infinite; } |
| .anim--flowOk1 { animation: flowOkA 12s linear infinite; } |
| .anim--flowOk2 { animation: flowOkB 12s linear infinite; } |
| .anim--flowBad1 { animation: flowBadA 12s linear infinite; } |
| .anim--flowBad2 { animation: flowBadB 12s linear infinite; } |
| .anim--mix1 { animation: mixDot1 12s linear infinite; } |
| .anim--mix2 { animation: mixDot2 12s linear infinite; } |
| .anim--mix3 { animation: mixDot3 12s linear infinite; } |
| .anim--callout { animation: calloutPop 12s linear infinite; } |
| .anim--glow { animation: pheromoneGlow 12s linear infinite; } |
| .anim--notifyBad1 { animation: notifyBad1 12s linear infinite; } |
| .anim--notifyBad2 { animation: notifyBad2 12s linear infinite; } |
| .anim--notifyBad3 { animation: notifyBad3 12s linear infinite; } |
| .anim--notifyOk1 { animation: notifyOk1 12s linear infinite; } |
| .anim--notifyOk2 { animation: notifyOk2 12s linear infinite; } |
| .anim--notifyOk3 { animation: notifyOk3 12s linear infinite; } |
| .anim--notifyOk4 { animation: notifyOk1 12s linear infinite; animation-delay: 0.16s; } |
| .anim--notifyOk5 { animation: notifyOk2 12s linear infinite; animation-delay: 0.22s; } |
| .anim--labelBad { animation: labelBad 12s linear infinite; } |
| .anim--labelOk { animation: labelOk 12s linear infinite; } |
| .anim--notifBad1, .anim--notifBad2, .anim--notifBad3, .anim--notifOk1, .anim--notifOk2, .anim--notifOk3, .anim--notifOk4, .anim--notifOk5 { |
| animation: notifBadgeIn 12s linear infinite; |
| } |
| .anim--notifBad1 { animation-delay: 0.00s; } |
| .anim--notifBad2 { animation-delay: 0.05s; } |
| .anim--notifBad3 { animation-delay: 0.10s; } |
| .anim--notifOk1 { animation-delay: 0.02s; } |
| .anim--notifOk2 { animation-delay: 0.06s; } |
| .anim--notifOk3 { animation-delay: 0.10s; } |
| .anim--notifOk4 { animation-delay: 0.14s; } |
| .anim--notifOk5 { animation-delay: 0.18s; } |
|
|
| |
| .agentFlow { |
| border: 1px solid rgba(245, 240, 232, 0.10); |
| border-radius: 22px; |
| background: var(--surface); |
| padding: 18px; |
| box-shadow: none; |
| } |
| .agentFlow__row { |
| position: relative; |
| display: grid; |
| grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; |
| gap: 10px; |
| align-items: stretch; |
| } |
| .agentCard { |
| border: 1px solid rgba(245, 240, 232, 0.10); |
| background: var(--surface2); |
| border-radius: 16px; |
| padding: 14px 14px; |
| min-height: 94px; |
| animation: agentPulse 3s ease-in-out infinite; |
| } |
| .agentCard__name { font-weight: 850; letter-spacing: -0.2px; margin-bottom: 6px; } |
| .agentCard__desc { color: var(--muted); font-size: 13px; line-height: 1.4; } |
| .agentCard[data-agent="1"] { animation-delay: 0s; } |
| .agentCard[data-agent="2"] { animation-delay: 0.6s; } |
| .agentCard[data-agent="3"] { animation-delay: 1.2s; } |
| .agentCard[data-agent="4"] { animation-delay: 1.8s; } |
| .agentCard[data-agent="5"] { animation-delay: 2.4s; } |
| @keyframes agentPulse { |
| 0%, 15%, 100% { border-color: rgba(245, 240, 232, 0.10); box-shadow: none; } |
| 6% { border-color: rgba(245, 240, 232, 0.18); box-shadow: none; } |
| } |
| .agentArrow { |
| width: 28px; |
| position: relative; |
| } |
| .agentArrow::before { |
| content: ""; |
| position: absolute; |
| top: 50%; |
| left: 0; |
| right: 0; |
| height: 1px; |
| border-top: 2px dashed rgba(245, 240, 232, 0.22); |
| transform: translateY(-50%); |
| } |
| .agentArrow::after { |
| content: ""; |
| position: absolute; |
| top: 50%; |
| right: -2px; |
| width: 0; |
| height: 0; |
| border-left: 7px solid rgba(245, 240, 232, 0.40); |
| border-top: 5px solid transparent; |
| border-bottom: 5px solid transparent; |
| transform: translateY(-50%); |
| } |
| .agentPacket { |
| position: absolute; |
| top: 50%; |
| left: 0; |
| width: 10px; |
| height: 10px; |
| border-radius: 999px; |
| background: rgba(245, 240, 232, 0.78); |
| box-shadow: none; |
| transform: translate(-50%, -50%); |
| animation: packet 3s linear infinite; |
| } |
| @keyframes packet { |
| 0% { opacity: 0; left: 0%; } |
| 6% { opacity: 1; } |
| 100% { opacity: 1; left: 100%; } |
| } |
| .agentFlow__footer { margin-top: 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; } |
| .agentFooter__line { height: 1px; border-top: 2px dashed rgba(245, 240, 232, 0.18); } |
| .complianceCard { |
| border: 1px solid rgba(245, 240, 232, 0.10); |
| background: var(--surface2); |
| border-radius: 16px; |
| padding: 12px 14px; |
| min-width: 260px; |
| } |
| .complianceCard__name { font-weight: 850; margin-bottom: 6px; letter-spacing: -0.2px; } |
| .complianceCard__desc { color: var(--muted); font-size: 13px; line-height: 1.4; } |
|
|
| |
| .provenance { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 16px; align-items: start; } |
| .provenance__viz { |
| border: 1px solid rgba(245, 240, 232, 0.10); |
| border-radius: 22px; |
| background: var(--surface); |
| padding: 14px; |
| box-shadow: none; |
| } |
| .provSvg { width: 100%; height: auto; display: block; } |
| .unit rect { fill: rgba(245, 240, 232, 0.03); stroke-width: 2; } |
| .unit--safe rect { stroke: rgba(93, 212, 155, 0.65); } |
| .unit--bad rect { stroke: rgba(232, 93, 93, 0.65); } |
| .unit__label { fill: rgba(245, 240, 232, 0.06); stroke: rgba(245, 240, 232, 0.12); stroke-width: 1.1; } |
| .unit--bad .unit__label { stroke: rgba(232, 93, 93, 0.25); } |
| .unit__txt { fill: rgba(245, 240, 232, 0.82); font-size: 12px; font-weight: 800; letter-spacing: -0.1px; } |
| .unit__txt2 { fill: rgba(245, 240, 232, 0.68); font-size: 13px; font-weight: 700; letter-spacing: -0.1px; } |
| .underLbl { fill: rgba(245, 240, 232, 0.70); font-size: 12px; font-weight: 650; } |
| .underLbl--bad { fill: rgba(232, 93, 93, 0.95); } |
| .cust2 circle { fill: rgba(245, 240, 232, 0.50); } |
| .cust2 path { fill: none; stroke: rgba(245, 240, 232, 0.62); stroke-width: 2.3; stroke-linecap: round; } |
| .custLbl { fill: rgba(245, 240, 232, 0.86); font-size: 12px; font-weight: 850; } |
| .custLbl2 { fill: rgba(245, 240, 232, 0.64); font-size: 12px; font-weight: 650; } |
| .provLines path { fill: none; stroke: rgba(245, 240, 232, 0.20); stroke-width: 2; stroke-dasharray: 5 6; color: rgba(245, 240, 232, 0.30); } |
|
|
| .shelfLabels { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 10px; |
| margin-top: 10px; |
| } |
| .shelfLabel { |
| border: 1px solid rgba(245, 240, 232, 0.10); |
| background: var(--surface2); |
| border-radius: 14px; |
| padding: 10px 10px; |
| text-align: center; |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
| } |
| .shelfLabel__top { font-size: 12px; color: rgba(245, 240, 232, 0.84); letter-spacing: -0.1px; } |
| .shelfLabel__bot { margin-top: 6px; font-size: 12px; font-weight: 900; letter-spacing: 0.08em; } |
| .shelfLabel--ok { border-color: rgba(93, 212, 155, 0.55); } |
| .shelfLabel--ok .shelfLabel__bot { color: var(--ok); } |
| .shelfLabel--bad { border-color: rgba(232, 93, 93, 0.55); } |
| .shelfLabel--bad .shelfLabel__bot { color: var(--danger); } |
|
|
| .analysisCard { |
| border: 1px solid rgba(245, 240, 232, 0.10); |
| border-radius: 16px; |
| padding: 14px 14px; |
| background: var(--surface2); |
| margin-bottom: 12px; |
| } |
| .analysisCard__k { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(245, 240, 232, 0.62); margin-bottom: 8px; } |
| .analysisCard__t { color: rgba(245, 240, 232, 0.88); line-height: 1.5; letter-spacing: -0.1px; } |
| .analysisCard__b { margin-top: 10px; color: var(--muted); line-height: 1.5; } |
| .analysisCard--warn { border-color: rgba(242, 201, 76, 0.35); background: var(--surface2); } |
| .analysisCard--ok { border-color: rgba(93, 212, 155, 0.35); background: var(--surface2); } |
|
|
| .note { |
| margin: 14px 0 0; |
| color: var(--muted); |
| line-height: 1.6; |
| padding: 12px 14px; |
| border-radius: var(--radius2); |
| border: 1px solid rgba(245, 240, 232, 0.10); |
| background: var(--surface); |
| } |
|
|
| |
| .smsCard { |
| border-radius: 22px; |
| border: 1px solid rgba(245, 240, 232, 0.10); |
| background: var(--surface); |
| box-shadow: none; |
| overflow: hidden; |
| } |
| .smsCard--bad { border-color: rgba(232, 93, 93, 0.95); border-width: 2px; } |
| .smsCard--ok { border-color: rgba(93, 212, 155, 0.95); border-width: 2px; } |
| .smsCard__head { padding: 16px 16px 0; } |
| .smsCard__title { font-weight: 950; letter-spacing: 0.06em; font-size: 12px; } |
| .smsCard__sub { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.35; } |
| .sms { |
| margin: 12px 0 0; |
| padding: 16px 16px 16px; |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
| font-size: 12.5px; |
| line-height: 1.55; |
| color: rgba(245, 240, 232, 0.92); |
| background: rgba(10, 14, 26, 0.25); |
| border-top: 1px solid rgba(245, 240, 232, 0.08); |
| white-space: pre-wrap; |
| } |
|
|
| |
| .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } |
| .stat { |
| border: 1px solid rgba(245, 240, 232, 0.10); |
| background: var(--surface); |
| border-radius: 18px; |
| padding: 14px; |
| text-align: left; |
| } |
| .stat__n { font-weight: 950; font-size: 24px; letter-spacing: -0.4px; } |
| .stat__k { color: var(--muted); margin-top: 6px; font-size: 13px; } |
| .stackBadges { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; } |
| .chip { |
| border: 1px solid rgba(245, 240, 232, 0.10); |
| background: var(--surface); |
| padding: 8px 10px; |
| border-radius: 999px; |
| font-size: 12px; |
| color: rgba(245, 240, 232, 0.88); |
| letter-spacing: -0.1px; |
| } |
| .chip--amd { border-color: rgba(255, 122, 0, 0.45); background: rgba(255, 122, 0, 0.06); } |
|
|
| |
| .section--cta { padding-bottom: 44px; } |
| .ctaCard { |
| border-radius: 26px; |
| border: 1px solid rgba(245, 240, 232, 0.10); |
| background: var(--surface); |
| padding: 18px; |
| box-shadow: none; |
| } |
| .ctaCard h2 { margin: 0 0 12px; } |
| .ctaCard__row { display: flex; gap: 10px; flex-wrap: wrap; } |
| .footerNote { margin-top: 12px; color: var(--muted2); font-size: 12px; } |
| .footerNote a { color: rgba(245, 240, 232, 0.92); } |
|
|
| a { color: rgba(245, 240, 232, 0.92); text-decoration: underline; text-decoration-color: rgba(245, 240, 232, 0.22); } |
| a:hover { text-decoration-color: rgba(245, 240, 232, 0.50); } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .anim, .agentCard, .agentPacket { animation: none !important; } |
| .reveal { opacity: 1; transform: none; transition: none; } |
| } |
|
|
| |
| @media (max-width: 980px) { |
| .hero__grid { grid-template-columns: 1fr; } |
| .nav { display: none; } |
| .header__inner { grid-template-columns: auto auto; justify-content: space-between; } |
| .provenance { grid-template-columns: 1fr; } |
| .stats { grid-template-columns: 1fr 1fr; } |
| } |
|
|
| @media (max-width: 640px) { |
| .grid3 { grid-template-columns: 1fr; } |
| .grid2 { grid-template-columns: 1fr; } |
| .stats { grid-template-columns: 1fr; } |
| .agentFlow__row { grid-template-columns: 1fr; } |
| .agentArrow { display: none; } |
| .agentPacket { display: none; } |
| .agentFlow__footer { grid-template-columns: 1fr; } |
| .complianceCard { min-width: 0; } |
| .container { padding: 18px 14px; } |
| } |
|
|
| @media (max-width: 375px) { |
| h1 { font-size: 30px; } |
| .btn { width: 100%; } |
| .ctaCard__row .btn { width: 100%; } |
| } |
|
|
