girenit/Argus
0
1:root {2 color-scheme: dark;3 --bg: #07111e;4 --bg-deep: #040b14;5 --bg-raised: #0a1828;6 --surface: #0d1d2f;7 --surface-strong: #10243a;8 --surface-soft: #0b1726;9 --glass: rgb(12 29 47 / 72%);10 --line: rgb(156 190 220 / 14%);11 --line-strong: rgb(156 190 220 / 26%);12 --text: #f4f8fc;13 --text-soft: #9db0c4;14 --text-muted: #71869b;15 --blue: #32a7ff;16 --blue-bright: #74c6ff;17 --blue-deep: #0877c9;18 --blue-soft: rgb(50 167 255 / 12%);19 --green: #3dd6a0;20 --green-soft: rgb(61 214 160 / 12%);21 --amber: #f2b84b;22 --amber-soft: rgb(242 184 75 / 12%);23 --red: #ff6b7a;24 --red-soft: rgb(255 107 122 / 12%);25 --shadow-lg: 0 34px 90px rgb(0 0 0 / 42%);26 --shadow-blue: 0 24px 72px rgb(0 112 206 / 24%);27 --radius-sm: 0.55rem;28 --radius-md: 0.9rem;29 --radius-lg: 1.35rem;30 --radius-xl: 1.75rem;31 --content: 78rem;32 --ease-out: cubic-bezier(0.16, 1, 0.3, 1);33 --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);34 font-family: Inter, Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;35}36 37* {38 box-sizing: border-box;39}40 41html {42 min-width: 20rem;43 background: var(--bg);44 color: var(--text);45 line-height: 1.5;46 scroll-behavior: smooth;47 scrollbar-color: #28445f var(--bg-deep);48}49 50body {51 min-width: 20rem;52 min-height: 100dvh;53 margin: 0;54 overflow-x: hidden;55 background: var(--bg);56 font-size: 1rem;57}58 59body::selection {60 background: rgb(50 167 255 / 32%);61 color: #fff;62}63 64a,65button {66 color: inherit;67 font: inherit;68 touch-action: manipulation;69}70 71button {72 border: 0;73 cursor: pointer;74}75 76svg {77 display: block;78 fill: none;79 stroke: currentColor;80 stroke-linecap: round;81 stroke-linejoin: round;82 stroke-width: 1.75;83}84 85h1,86h2,87h3,88p {89 overflow-wrap: break-word;90}91 92:focus-visible {93 outline: 3px solid var(--blue-bright);94 outline-offset: 4px;95}96 97.svg-sprite {98 position: absolute;99 width: 0;100 height: 0;101 overflow: hidden;102}103 104.skip-link {105 position: fixed;106 z-index: 1000;107 top: -5rem;108 left: 1rem;109 padding: 0.75rem 1rem;110 border-radius: var(--radius-sm);111 background: #fff;112 color: var(--bg-deep);113 font-weight: 800;114 text-decoration: none;115}116 117.skip-link:focus {118 top: 0.75rem;119}120 121.noise {122 position: fixed;123 z-index: 90;124 inset: 0;125 opacity: 0.022;126 pointer-events: none;127 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");128}129 130.page-progress {131 position: fixed;132 z-index: 110;133 top: 0;134 right: 0;135 left: 0;136 height: 2px;137 pointer-events: none;138}139 140.page-progress span {141 display: block;142 width: 100%;143 height: 100%;144 background: var(--blue);145 box-shadow: 0 0 18px rgb(50 167 255 / 72%);146 transform: scaleX(var(--page-progress, 0));147 transform-origin: left center;148}149 150.public-ribbon {151 position: relative;152 z-index: 40;153 display: flex;154 min-height: 2rem;155 align-items: center;156 justify-content: center;157 gap: 0.6rem;158 padding: 0.38rem 1rem;159 border-bottom: 1px solid rgb(116 198 255 / 10%);160 background: #061725;161 color: #b9d4e8;162 font-size: 0.68rem;163 font-weight: 750;164 letter-spacing: 0.055em;165 text-align: center;166 text-transform: uppercase;167}168 169.public-ribbon svg {170 width: 0.9rem;171 height: 0.9rem;172 color: var(--blue-bright);173}174 175.public-ribbon i {176 width: 3px;177 height: 3px;178 border-radius: 50%;179 background: var(--blue);180}181 182.site-header {183 position: sticky;184 z-index: 100;185 top: 0;186 border-bottom: 1px solid var(--line);187 background: rgb(7 17 30 / 76%);188 backdrop-filter: blur(20px) saturate(140%);189 transition: background-color 240ms ease, box-shadow 240ms ease;190}191 192.site-header.is-scrolled {193 background: rgb(7 17 30 / 94%);194 box-shadow: 0 12px 34px rgb(0 0 0 / 18%);195}196 197.header-inner,198.footer-inner {199 display: flex;200 width: min(calc(100% - 3rem), var(--content));201 min-height: 4.75rem;202 align-items: center;203 justify-content: space-between;204 gap: 2rem;205 margin: 0 auto;206}207 208.brand,209.footer-brand {210 display: inline-flex;211 align-items: center;212 gap: 0.75rem;213 text-decoration: none;214}215 216.brand-mark {217 display: inline-grid;218 width: 2.6rem;219 height: 2.6rem;220 flex: 0 0 auto;221 place-items: center;222 border: 1px solid rgb(116 198 255 / 35%);223 border-radius: 0.8rem;224 background: #0a72be;225 box-shadow: 0 10px 28px rgb(0 112 206 / 28%), inset 0 1px rgb(255 255 255 / 20%);226 color: #fff;227}228 229.brand-mark svg {230 width: 1.4rem;231 height: 1.4rem;232}233 234.brand-copy,235.footer-brand > span:last-child {236 display: grid;237 line-height: 1.05;238}239 240.brand-copy strong {241 font-size: 1rem;242 letter-spacing: 0.18em;243}244 245.brand-copy small,246.footer-brand small {247 margin-top: 0.32rem;248 color: var(--text-muted);249 font-size: 0.67rem;250 font-weight: 700;251}252 253nav {254 display: flex;255 align-items: center;256 gap: 0.25rem;257}258 259nav a {260 display: inline-flex;261 min-height: 2.75rem;262 align-items: center;263 justify-content: center;264 gap: 0.45rem;265 padding: 0.6rem 0.85rem;266 border-radius: var(--radius-sm);267 color: var(--text-soft);268 font-size: 0.82rem;269 font-weight: 700;270 text-decoration: none;271 transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;272}273 274nav a:hover {275 background: rgb(255 255 255 / 5%);276 color: #fff;277}278 279nav .nav-demo {280 margin-left: 0.55rem;281 border: 1px solid rgb(116 198 255 / 24%);282 background: rgb(50 167 255 / 11%);283 color: #d9efff;284}285 286nav .nav-demo:hover {287 border-color: rgb(116 198 255 / 50%);288 background: rgb(50 167 255 / 18%);289}290 291nav .nav-demo svg {292 width: 0.95rem;293 height: 0.95rem;294}295 296main {297 overflow: clip;298}299 300.hero {301 position: relative;302 min-height: calc(100svh - 6.75rem);303 overflow: hidden;304 border-bottom: 1px solid var(--line);305 isolation: isolate;306}307 308.hero::after {309 position: absolute;310 z-index: -1;311 right: 0;312 bottom: 0;313 left: 0;314 height: 14rem;315 background: linear-gradient(to bottom, transparent, var(--bg));316 content: "";317 pointer-events: none;318}319 320.hero-atmosphere {321 position: absolute;322 z-index: -2;323 inset: 0;324 overflow: hidden;325 pointer-events: none;326 background: #07111e;327}328 329.hero-atmosphere::before {330 position: absolute;331 inset: 0;332 background:333 radial-gradient(circle at 72% 42%, rgb(13 118 197 / 17%), transparent 35%),334 radial-gradient(circle at 20% 6%, rgb(52 98 154 / 12%), transparent 28%);335 content: "";336}337 338.orb {339 position: absolute;340 border-radius: 50%;341 filter: blur(1px);342 opacity: 0.5;343 will-change: transform;344}345 346.orb-one {347 top: 18%;348 right: 8%;349 width: 28rem;350 height: 28rem;351 border: 1px solid rgb(80 176 241 / 14%);352 box-shadow: inset 0 0 80px rgb(28 139 218 / 7%), 0 0 90px rgb(28 139 218 / 5%);353 animation: orb-drift 14s ease-in-out infinite alternate;354}355 356.orb-two {357 top: 27%;358 right: 17%;359 width: 15rem;360 height: 15rem;361 border: 1px solid rgb(116 198 255 / 12%);362 animation: orb-drift-reverse 12s ease-in-out infinite alternate;363}364 365.grid-plane {366 position: absolute;367 right: -15%;368 bottom: -44%;369 width: 75%;370 height: 80%;371 opacity: 0.15;372 background-image: linear-gradient(var(--line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--line-strong) 1px, transparent 1px);373 background-size: 52px 52px;374 mask-image: linear-gradient(to top, #000, transparent 75%);375 transform: perspective(600px) rotateX(61deg) rotateZ(-10deg);376 transform-origin: center;377 animation: grid-drift 18s linear infinite;378}379 380.hero-inner {381 display: grid;382 width: min(calc(100% - 3rem), var(--content));383 min-height: calc(100svh - 6.75rem);384 grid-template-columns: minmax(0, 0.88fr) minmax(34rem, 1.12fr);385 align-items: center;386 gap: clamp(3rem, 6vw, 6rem);387 margin: 0 auto;388 padding: clamp(4rem, 8vh, 7rem) 0 clamp(5rem, 9vh, 8rem);389}390 391.hero-copy {392 position: relative;393 z-index: 2;394}395 396.eyebrow {397 display: flex;398 align-items: center;399 gap: 0.65rem;400 margin: 0 0 1rem;401 color: var(--blue-bright);402 font-size: 0.7rem;403 font-weight: 850;404 letter-spacing: 0.13em;405 text-transform: uppercase;406}407 408.eyebrow > span {409 width: 1.65rem;410 height: 1px;411 background: var(--blue);412 box-shadow: 0 0 12px rgb(50 167 255 / 55%);413}414 415h1,416h2,417h3 {418 margin: 0;419 color: var(--text);420 line-height: 1.04;421}422 423h1 {424 max-width: 10.5ch;425 font-size: clamp(3.5rem, 6.1vw, 6.7rem);426 font-weight: 720;427 letter-spacing: -0.065em;428}429 430h1 span,431.section-intro h2 span,432.security-boundary h2 span,433.final-cta h2 span {434 color: #7e95aa;435}436 437.hero-lead {438 max-width: 39rem;439 margin: 1.65rem 0 0;440 color: var(--text-soft);441 font-size: clamp(1rem, 1.4vw, 1.14rem);442 line-height: 1.75;443}444 445.hero-actions {446 display: flex;447 flex-wrap: wrap;448 gap: 0.75rem;449 margin-top: 2rem;450}451 452.button {453 position: relative;454 display: inline-flex;455 min-height: 3.15rem;456 align-items: center;457 justify-content: center;458 gap: 0.7rem;459 overflow: hidden;460 padding: 0.78rem 1.1rem;461 border: 1px solid transparent;462 border-radius: 0.7rem;463 font-size: 0.88rem;464 font-weight: 780;465 text-decoration: none;466 transition: transform 220ms var(--ease-out), background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;467}468 469.button::before {470 position: absolute;471 inset: 0;472 background: linear-gradient(110deg, transparent 15%, rgb(255 255 255 / 16%) 48%, transparent 78%);473 content: "";474 transform: translateX(-130%);475 transition: transform 650ms var(--ease-out);476}477 478.button:hover::before {479 transform: translateX(130%);480}481 482.button:hover {483 transform: translateY(-2px);484}485 486.button:active {487 transform: translateY(0) scale(0.98);488}489 490.button > * {491 position: relative;492 z-index: 1;493}494 495.button svg {496 width: 1.1rem;497 height: 1.1rem;498 transition: transform 220ms var(--ease-out);499}500 501.button:hover svg {502 transform: translateX(3px);503}504 505.button-primary {506 border-color: rgb(116 198 255 / 32%);507 background: #087dcc;508 box-shadow: 0 14px 32px rgb(0 103 184 / 27%), inset 0 1px rgb(255 255 255 / 20%);509 color: #fff;510}511 512.button-primary:hover {513 background: #0a8adc;514 box-shadow: 0 18px 40px rgb(0 103 184 / 34%), inset 0 1px rgb(255 255 255 / 24%);515}516 517.button-ghost {518 border-color: var(--line-strong);519 background: rgb(255 255 255 / 3%);520 color: #d7e4ef;521}522 523.button-ghost:hover {524 border-color: rgb(116 198 255 / 38%);525 background: rgb(50 167 255 / 8%);526}527 528.hero-assurance {529 display: flex;530 flex-wrap: wrap;531 gap: 0.75rem 1.1rem;532 margin-top: 1.6rem;533}534 535.hero-assurance span {536 display: inline-flex;537 align-items: center;538 gap: 0.38rem;539 color: var(--text-muted);540 font-size: 0.7rem;541 font-weight: 700;542}543 544.hero-assurance svg {545 width: 0.9rem;546 height: 0.9rem;547 color: var(--green);548 stroke-width: 2.3;549}550 551.hero-enter {552 opacity: 0;553 animation: hero-rise 900ms var(--ease-out) forwards;554}555 556.hero-enter-1 { animation-delay: 80ms; }557.hero-enter-2 { animation-delay: 150ms; }558.hero-enter-3 { animation-delay: 240ms; }559.hero-enter-4 { animation-delay: 330ms; }560.hero-enter-5 { animation-delay: 420ms; }561 562.hero-visual {563 position: relative;564 z-index: 1;565 width: 110%;566 margin-left: -2%;567 perspective: 1200px;568}569 570.visual-halo {571 position: absolute;572 z-index: -1;573 inset: 14% 10% -3%;574 border-radius: 50%;575 background: rgb(9 126 210 / 22%);576 filter: blur(70px);577}578 579.console-window,580.tour-console {581 position: relative;582 overflow: hidden;583 border: 1px solid rgb(149 198 235 / 18%);584 border-radius: var(--radius-lg);585 background: #0c1b2c;586 box-shadow: var(--shadow-lg), var(--shadow-blue), inset 0 1px rgb(255 255 255 / 5%);587}588 589.hero-console {590 transform: rotateY(-5deg) rotateX(2deg) translateZ(0);591 transform-style: preserve-3d;592 transition: transform 300ms var(--ease-out), border-color 250ms ease;593 will-change: transform;594}595 596.hero-console:hover {597 border-color: rgb(116 198 255 / 32%);598}599 600.console-titlebar {601 display: grid;602 min-height: 3.6rem;603 grid-template-columns: 1fr auto 1fr;604 align-items: center;605 gap: 1rem;606 padding: 0 1rem;607 border-bottom: 1px solid var(--line);608 background: #10243a;609}610 611.console-brand {612 display: inline-flex;613 align-items: center;614 gap: 0.55rem;615 color: #ddebfa;616}617 618.console-brand > span {619 display: grid;620 width: 1.85rem;621 height: 1.85rem;622 place-items: center;623 border-radius: 0.5rem;624 background: #0a80d2;625 color: #fff;626}627 628.console-brand svg {629 width: 1rem;630 height: 1rem;631}632 633.console-brand strong {634 font-size: 0.72rem;635 letter-spacing: 0.12em;636}637 638.console-title {639 color: #7f95a9;640 font-size: 0.66rem;641 font-weight: 700;642}643 644.window-status {645 display: inline-flex;646 align-items: center;647 justify-self: end;648 gap: 0.4rem;649 color: #8fa6ba;650 font-size: 0.62rem;651 font-weight: 750;652}653 654.window-status i,655.tour-synthetic i {656 width: 0.42rem;657 height: 0.42rem;658 border-radius: 50%;659 background: var(--green);660 box-shadow: 0 0 0 3px rgb(61 214 160 / 10%), 0 0 12px rgb(61 214 160 / 35%);661}662 663.console-layout {664 display: grid;665 grid-template-columns: 7.7rem minmax(0, 1fr);666 min-height: 29rem;667}668 669.console-sidebar {670 display: grid;671 align-content: start;672 gap: 0.25rem;673 padding: 1rem 0.65rem;674 border-right: 1px solid var(--line);675 background: #0a1726;676}677 678.console-sidebar span {679 display: flex;680 min-height: 2.4rem;681 align-items: center;682 gap: 0.55rem;683 padding: 0.55rem 0.65rem;684 border-radius: 0.45rem;685 color: #637d94;686 font-size: 0.58rem;687}688 689.console-sidebar span.is-active {690 background: rgb(50 167 255 / 12%);691 color: #dceefe;692 box-shadow: inset 2px 0 var(--blue);693}694 695.console-sidebar svg {696 width: 0.85rem;697 height: 0.85rem;698}699 700.console-sidebar b {701 font-weight: 700;702}703 704.console-content {705 min-width: 0;706 padding: 1.05rem;707 background: #0c1a2a;708}709 710.console-heading,711.scene-heading {712 display: flex;713 align-items: flex-end;714 justify-content: space-between;715 gap: 1rem;716}717 718.console-heading > div,719.scene-heading > div {720 display: grid;721 gap: 0.2rem;722}723 724.console-heading small,725.scene-heading small {726 color: var(--blue-bright);727 font-size: 0.54rem;728 font-weight: 820;729 letter-spacing: 0.11em;730}731 732.console-heading strong {733 color: #f2f7fb;734 font-size: 1rem;735}736 737.console-heading > span,738.scene-heading > span {739 display: inline-flex;740 align-items: center;741 gap: 0.35rem;742 color: #7990a4;743 font-size: 0.52rem;744 font-weight: 650;745}746 747.console-heading > span svg {748 width: 0.75rem;749 height: 0.75rem;750}751 752.metric-row {753 display: grid;754 grid-template-columns: repeat(3, minmax(0, 1fr));755 gap: 0.55rem;756 margin-top: 0.85rem;757}758 759.metric-row article,760.scene-metrics article {761 display: grid;762 min-width: 0;763 padding: 0.72rem;764 border: 1px solid var(--line);765 border-radius: 0.6rem;766 background: #102136;767}768 769.metric-row small,770.scene-metrics small {771 overflow: hidden;772 color: #849aae;773 font-size: 0.52rem;774 font-weight: 700;775 text-overflow: ellipsis;776 white-space: nowrap;777}778 779.metric-row strong,780.scene-metrics strong {781 margin: 0.22rem 0;782 color: #f1f6fb;783 font-size: 1.35rem;784 line-height: 1;785}786 787.metric-row span,788.scene-metrics span {789 overflow: hidden;790 color: #6f879b;791 font-size: 0.48rem;792 text-overflow: ellipsis;793 white-space: nowrap;794}795 796.metric-row .metric-alert {797 box-shadow: inset 2px 0 var(--red);798}799 800.console-lower {801 display: grid;802 grid-template-columns: minmax(0, 1.5fr) minmax(7rem, 0.75fr);803 gap: 0.55rem;804 margin-top: 0.55rem;805}806 807.chart-card,808.queue-card {809 min-width: 0;810 padding: 0.8rem;811 border: 1px solid var(--line);812 border-radius: 0.6rem;813 background: #0f2135;814}815 816.card-title {817 display: flex;818 align-items: center;819 justify-content: space-between;820 gap: 0.5rem;821}822 823.card-title strong {824 color: #dfeaf4;825 font-size: 0.58rem;826}827 828.card-title span {829 color: #71899e;830 font-size: 0.47rem;831}832 833.chart-visual {834 position: relative;835 height: 8.8rem;836 margin-top: 0.55rem;837 overflow: hidden;838}839 840.chart-visual .line {841 position: absolute;842 right: 0;843 left: 0;844 height: 1px;845 background: rgb(151 184 212 / 9%);846}847 848.line-one { top: 25%; }849.line-two { top: 50%; }850.line-three { top: 75%; }851 852.chart-visual svg {853 position: absolute;854 inset: 0;855 width: 100%;856 height: 100%;857 overflow: visible;858}859 860.chart-visual .area {861 fill: rgb(50 167 255 / 7%);862 stroke: none;863}864 865.chart-visual .trend,866.chart-visual .attention {867 fill: none;868 stroke-dasharray: 560;869 stroke-dashoffset: 560;870 animation: chart-draw 1.8s var(--ease-out) 700ms forwards;871}872 873.chart-visual .trend {874 stroke: var(--blue);875 stroke-width: 2.2;876}877 878.chart-visual .attention {879 stroke: var(--amber);880 stroke-dasharray: 4 4;881 stroke-dashoffset: 0;882 stroke-width: 1.6;883}884 885.queue-card {886 display: grid;887 align-content: start;888 gap: 0.48rem;889}890 891.queue-item {892 display: flex;893 min-width: 0;894 align-items: center;895 gap: 0.45rem;896 padding: 0.55rem;897 border: 1px solid var(--line);898 border-radius: 0.4rem;899 background: rgb(255 255 255 / 2%);900 color: #9cafc0;901 font-size: 0.48rem;902 line-height: 1.35;903}904 905.queue-item i,906.state {907 width: 0.4rem;908 height: 0.4rem;909 flex: 0 0 auto;910 border-radius: 50%;911}912 913.danger,914.offline { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }915.warning,916.stale { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }917.online { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }918.unknown { background: #7890a6; box-shadow: 0 0 0 3px rgb(120 144 166 / 12%); }919 920.console-scan {921 position: absolute;922 z-index: 4;923 right: 0;924 left: 0;925 height: 1px;926 background: linear-gradient(90deg, transparent, rgb(50 167 255 / 38%), transparent);927 opacity: 0;928 pointer-events: none;929 animation: console-scan 7s ease-in-out 2s infinite;930}931 932.floating-proof {933 position: absolute;934 z-index: 5;935 display: flex;936 align-items: center;937 gap: 0.65rem;938 padding: 0.75rem 0.85rem;939 border: 1px solid rgb(151 202 237 / 19%);940 border-radius: 0.75rem;941 background: rgb(13 31 50 / 88%);942 box-shadow: 0 18px 40px rgb(0 0 0 / 30%);943 backdrop-filter: blur(16px);944 animation: proof-float 5s ease-in-out infinite;945}946 947.proof-one {948 top: 14%;949 right: -5%;950}951 952.proof-two {953 right: 3%;954 bottom: 7%;955 animation-delay: -2.2s;956}957 958.proof-icon {959 display: grid;960 width: 2rem;961 height: 2rem;962 place-items: center;963 border-radius: 0.55rem;964 background: var(--blue-soft);965 color: var(--blue-bright);966}967 968.proof-icon svg {969 width: 1.05rem;970 height: 1.05rem;971}972 973.floating-proof > span:last-child {974 display: grid;975 gap: 0.08rem;976}977 978.floating-proof small {979 color: #6f879b;980 font-size: 0.52rem;981}982 983.floating-proof strong {984 color: #dce8f2;985 font-size: 0.66rem;986}987 988.proof-two > i {989 width: 0.55rem;990 height: 0.55rem;991 border-radius: 50%;992 background: var(--green);993 box-shadow: 0 0 0 5px var(--green-soft), 0 0 18px rgb(61 214 160 / 42%);994}995 996.scroll-cue {997 position: absolute;998 z-index: 4;999 bottom: 1.25rem;1000 left: 50%;1001 display: grid;1002 justify-items: center;1003 gap: 0.45rem;1004 color: #617991;1005 font-size: 0.58rem;1006 font-weight: 750;1007 letter-spacing: 0.12em;1008 text-decoration: none;1009 text-transform: uppercase;1010 transform: translateX(-50%);1011}1012 1013.scroll-cue i {1014 position: relative;1015 display: block;1016 width: 1.25rem;1017 height: 2rem;1018 border: 1px solid var(--line-strong);1019 border-radius: 999px;1020}1021 1022.scroll-cue i::after {1023 position: absolute;1024 top: 0.35rem;1025 left: 50%;1026 width: 2px;1027 height: 0.4rem;1028 border-radius: 99px;1029 background: var(--blue);1030 content: "";1031 transform: translateX(-50%);1032 animation: scroll-dot 1.7s ease-in-out infinite;1033}1034 1035.signal-rail {1036 overflow: hidden;1037 border-bottom: 1px solid var(--line);1038 background: var(--bg-deep);1039}1040 1041.signal-track {1042 display: flex;1043 width: max-content;1044 animation: marquee 34s linear infinite;1045}1046 1047.signal-track:hover {1048 animation-play-state: paused;1049}1050 1051.signal-track > div {1052 display: flex;1053 min-height: 4.5rem;1054 align-items: center;1055 gap: 1.6rem;1056 padding-right: 1.6rem;1057}1058 1059.signal-track span {1060 color: #71869a;1061 font-size: 0.68rem;1062 font-weight: 770;1063 letter-spacing: 0.11em;1064 text-transform: uppercase;1065 white-space: nowrap;1066}1067 1068.signal-track i {1069 width: 4px;1070 height: 4px;1071 border-radius: 50%;1072 background: var(--blue);1073 box-shadow: 0 0 10px rgb(50 167 255 / 55%);1074}1075 1076.product-story,1077.capabilities,1078.security-boundary {1079 width: min(calc(100% - 3rem), var(--content));1080 margin: 0 auto;1081}1082 1083.product-story {1084 padding: clamp(6rem, 10vw, 10rem) 0;1085}1086 1087.section-intro {1088 max-width: 58rem;1089 margin-bottom: clamp(3rem, 6vw, 5rem);1090}1091 1092.section-intro.compact {1093 max-width: 47rem;1094}1095 1096.section-intro h2,1097.security-boundary h2,1098.final-cta h2 {1099 font-size: clamp(2.8rem, 5.6vw, 5.6rem);1100 font-weight: 690;1101 letter-spacing: -0.06em;1102}1103 1104.section-intro > p:last-child,1105.boundary-copy > p:last-child,1106.final-cta .cta-inner > p {1107 max-width: 43rem;1108 margin: 1.35rem 0 0;1109 color: var(--text-soft);1110 font-size: 1rem;1111 line-height: 1.75;1112}1113 1114.story-layout {1115 display: grid;1116 grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);1117 align-items: start;1118 gap: clamp(2.5rem, 5vw, 5rem);1119}1120 1121.tour-wrap {1122 position: sticky;1123 top: 7.25rem;1124 min-width: 0;1125}1126 1127.tour-glow {1128 position: absolute;1129 z-index: -1;1130 inset: 10% 8% -5%;1131 border-radius: 50%;1132 background: rgb(21 132 211 / 17%);1133 filter: blur(70px);1134}1135 1136.tour-console {1137 min-height: 38rem;1138}1139 1140.tour-topbar {1141 display: grid;1142 min-height: 4rem;1143 grid-template-columns: auto 1fr auto;1144 align-items: center;1145 gap: 1rem;1146 padding: 0 1rem;1147 border-bottom: 1px solid var(--line);1148 background: #10243a;1149}1150 1151.tour-tabs {1152 display: flex;1153 align-items: center;1154 justify-content: center;1155 gap: 0.2rem;1156}1157 1158.tour-tabs button {1159 min-height: 2.4rem;1160 padding: 0.5rem 0.7rem;1161 border-radius: 0.45rem;1162 background: transparent;1163 color: #72899e;1164 font-size: 0.63rem;1165 font-weight: 720;1166 transition: background-color 180ms ease, color 180ms ease;1167}1168 1169.tour-tabs button:hover {1170 color: #c7d9e8;1171}1172 1173.tour-tabs button[aria-selected="true"] {1174 background: var(--blue-soft);1175 color: #dbeeff;1176 box-shadow: inset 0 0 0 1px rgb(116 198 255 / 14%);1177}1178 1179.tour-synthetic {1180 display: inline-flex;1181 align-items: center;1182 gap: 0.38rem;1183 color: #7690a5;1184 font-size: 0.56rem;1185 font-weight: 750;1186}1187 1188.scene-stack {1189 position: relative;1190 min-height: 34rem;1191 background: #0b1929;1192}1193 1194.tour-scene {1195 position: absolute;1196 inset: 0;1197 padding: clamp(1.25rem, 3vw, 2rem);1198 opacity: 0;1199 visibility: hidden;1200 transform: translateY(16px) scale(0.99);