.ref-page { --ref-ink:#071328; --ref-blue:#2563eb; --ref-cyan:#61d7fb; --ref-line:#e5ebf4; overflow:hidden; background:#fff; color:#101b32; font-family:"Manrope",Arial,sans-serif; }
.ref-page * { box-sizing:border-box; }
.ref-container { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.ref-hero { position:relative; min-height:690px; display:flex; align-items:center; overflow:hidden; background:#071328; color:#fff; }
.ref-hero::before { content:""; position:absolute; inset:0; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:68px 68px; mask-image:linear-gradient(90deg,#000,transparent 75%); }
.ref-hero::after { content:""; position:absolute; width:760px; height:760px; right:-170px; top:-250px; border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.3),rgba(37,99,235,0) 69%); }
.ref-orbit { position:absolute; z-index:1; border:1px solid rgba(96,216,251,.14); border-radius:50%; pointer-events:none; }
.ref-orbit-one { width:670px; height:670px; right:-60px; top:-130px; animation:ref-rotate 24s linear infinite; }
.ref-orbit-one::before,.ref-orbit-two::after { content:""; position:absolute; width:9px; height:9px; border-radius:50%; background:var(--ref-cyan); box-shadow:0 0 22px var(--ref-cyan); }
.ref-orbit-one::before { left:86px; top:86px; }.ref-orbit-two { width:480px; height:480px; right:35px; top:-34px; }.ref-orbit-two::after { right:45px; bottom:92px; }
.ref-hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:.94fr 1.06fr; align-items:center; gap:66px; padding-block:88px; }
.ref-eyebrow,.ref-kicker { display:inline-flex; align-items:center; gap:10px; color:var(--ref-cyan); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; }
.ref-eyebrow span { width:28px; height:1px; background:currentColor; }.ref-hero-copy h1 { margin:26px 0 25px; font-size:clamp(52px,6vw,78px); line-height:.98; letter-spacing:-.065em; }.ref-hero-copy h1 em { color:var(--ref-cyan); font-style:normal; }.ref-hero-copy>p { max-width:580px; margin:0; color:#a9b8d4; font-size:16px; line-height:1.8; }.ref-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:33px; }
.ref-primary-button,.ref-ghost-button { min-height:54px; padding:0 21px; display:inline-flex; align-items:center; justify-content:center; gap:11px; border-radius:13px; color:#fff!important; font-size:12px; font-weight:800; text-decoration:none!important; transition:.25s ease; }.ref-primary-button { background:var(--ref-blue); box-shadow:0 14px 35px rgba(37,99,235,.28); }.ref-primary-button:hover { background:#1748b7; transform:translateY(-2px); }.ref-ghost-button { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); }.ref-ghost-button:hover { background:rgba(255,255,255,.12); }
.ref-hero-visual { position:relative; min-height:500px; }.ref-connections { position:absolute; inset:0; width:100%; height:100%; }.ref-connections path { stroke:rgba(96,216,251,.28); stroke-width:1.2; stroke-dasharray:5 8; animation:ref-dash 18s linear infinite; }.ref-signal-card { position:absolute; z-index:2; border:1px solid rgba(255,255,255,.15); background:rgba(11,31,67,.8); box-shadow:0 28px 70px rgba(0,0,0,.26); backdrop-filter:blur(14px); }.ref-signal-main { left:18%; top:22%; width:330px; padding:31px; border-radius:26px; transform:rotate(-3deg); }.ref-signal-label { display:block; color:#6ddafb; font-size:9px; font-weight:800; letter-spacing:.17em; }.ref-signal-main>strong { display:block; margin:23px 0 0; font-size:92px; line-height:.9; letter-spacing:-.08em; }.ref-signal-main>small { display:block; margin-top:10px; color:#9eb0d0; font-size:12px; }.ref-signal-line { height:68px; margin-top:28px; display:flex; align-items:flex-end; gap:10px; }.ref-signal-line i { flex:1; border-radius:8px 8px 2px 2px; background:linear-gradient(#65dafb,#2467e6); }.ref-signal-line i:nth-child(1){height:32%}.ref-signal-line i:nth-child(2){height:75%}.ref-signal-line i:nth-child(3){height:48%}.ref-signal-line i:nth-child(4){height:92%}.ref-signal-line i:nth-child(5){height:65%}.ref-signal-small { right:2%; bottom:13%; width:154px; padding:18px; border-radius:17px; transform:rotate(5deg); }.ref-signal-small span,.ref-signal-small strong { display:block; }.ref-signal-small span { color:#8fa5c8; font-size:9px; }.ref-signal-small strong { margin-top:4px; font-size:17px; }.ref-signal-small i { position:absolute; right:17px; top:21px; width:8px; height:8px; border-radius:50%; background:#44d89a; box-shadow:0 0 14px #44d89a; }.ref-signal-node { position:absolute; z-index:3; width:14px; height:14px; border:3px solid #071328; border-radius:50%; background:var(--ref-cyan); box-shadow:0 0 18px var(--ref-cyan); }.ref-node-a{left:10%;top:21%}.ref-node-b{right:6%;top:13%}.ref-node-c{left:49%;bottom:0}
.ref-wall-section { padding:110px 0 125px; background:#f5f8fc; }.ref-section-heading { display:grid; grid-template-columns:1.15fr .85fr; align-items:end; gap:70px; margin-bottom:45px; }.ref-kicker { color:var(--ref-blue); }.ref-kicker::before { content:""; width:22px; height:2px; background:currentColor; }.ref-section-heading h2,.ref-story h2,.ref-cta h2 { margin:15px 0 0; font-size:clamp(36px,4.7vw,60px); line-height:1.06; letter-spacing:-.055em; }.ref-section-heading>p { max-width:510px; margin:0; color:#65728a; font-size:14px; line-height:1.8; }
.ref-toolbar { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:20px; padding:12px; border:1px solid var(--ref-line); border-radius:18px; background:#fff; box-shadow:0 10px 35px rgba(20,42,80,.05); }.ref-search { min-width:320px; display:flex; align-items:center; gap:12px; padding:0 11px; color:#8490a6; }.ref-search input { width:100%; height:42px; border:0; outline:0; background:transparent; color:#1d2940; font:600 13px "Manrope",sans-serif; }.ref-search kbd { padding:5px 7px; border:1px solid #dce3ee; border-radius:6px; background:#f7f9fc; color:#8490a6; font:700 9px "Manrope",sans-serif; }.ref-toolbar-meta { display:flex; align-items:center; gap:18px; }.ref-toolbar-meta>span { color:#7c889c; font-size:11px; white-space:nowrap; }.ref-toolbar-meta strong { color:#17233b; font-size:14px; }.ref-toolbar button { min-height:42px; padding:0 15px; border:1px solid #dbe3ef; border-radius:11px; background:#f8faff; color:#2f4160; font:700 10px "Manrope",sans-serif; cursor:pointer; transition:.2s ease; }.ref-toolbar button:hover { border-color:#b8c9e3; color:var(--ref-blue); }.ref-toolbar button i { margin-right:7px; }
.ref-wall { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; perspective:1200px; }.ref-logo-card { --rx:0deg; --ry:0deg; --mx:50%; --my:50%; position:relative; min-width:0; height:228px; padding:18px; overflow:hidden; border:1px solid var(--ref-line); border-radius:20px; background:#fff; color:#15213a; text-align:left; cursor:pointer; box-shadow:0 8px 25px rgba(16,37,73,.04); transform:rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d; opacity:0; translate:0 18px; transition:transform .12s ease,translate .5s ease calc(var(--card-index)*25ms),opacity .5s ease calc(var(--card-index)*25ms),box-shadow .3s ease,border-color .3s ease; }.ref-logo-card::before { content:""; position:absolute; inset:0; opacity:0; background:radial-gradient(circle at var(--mx) var(--my),rgba(37,99,235,.13),transparent 44%); transition:opacity .25s ease; }.ref-logo-card:hover,.ref-logo-card.is-selected { z-index:2; border-color:#b6c8e7; box-shadow:0 24px 55px rgba(17,45,94,.13); }.ref-logo-card:hover::before,.ref-logo-card.is-selected::before { opacity:1; }.ref-logo-card.is-visible { opacity:1; translate:0 0; }.ref-logo-card[hidden]{display:none}.ref-card-index { position:absolute; z-index:2; top:15px; left:17px; color:#a0aabc; font-size:9px; font-weight:800; letter-spacing:.08em; }.ref-logo-frame { position:relative; min-width:0; width:100%; height:150px; display:grid; place-items:center; padding:24px; overflow:hidden; border-radius:14px; background:#f8fafc; }.ref-logo-frame img { display:block!important; width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; margin:0!important; object-fit:contain!important; object-position:center!important; filter:grayscale(1); opacity:.72; transition:.3s ease; }.ref-logo-card:hover img,.ref-logo-card.is-selected img { filter:grayscale(0); opacity:1; transform:scale(1.04); }.ref-card-caption { position:relative; z-index:2; min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-inline:-2px; padding:13px 5px 7px; overflow:hidden; background:#fff; font-size:10px; font-weight:800; white-space:nowrap; text-overflow:ellipsis; }.ref-card-caption i { flex:0 0 auto; font-size:9px; transform:rotate(45deg); }.ref-wall.is-shuffling .ref-logo-card { animation:ref-shuffle .48s ease both; }.ref-empty { padding:55px 20px; color:#7a869b; text-align:center; }.ref-empty-static { display:grid; justify-items:center; gap:10px; border:1px dashed #ced8e8; border-radius:20px; }.ref-empty-static i { color:var(--ref-blue); font-size:24px; }.ref-empty-static strong { color:#1d2940; }
.ref-story { padding:120px 0; background:#fff; }.ref-story-grid { display:grid; grid-template-columns:100px 1.05fr .95fr; gap:55px; align-items:start; }.ref-story-number { padding-top:8px; color:#b8c4d6; font-size:11px; font-weight:800; letter-spacing:.15em; }.ref-story-copy p { max-width:620px; margin:26px 0 0; color:#65728a; font-size:14px; line-height:1.85; }.ref-story-points { display:grid; border-top:1px solid var(--ref-line); }.ref-story-points>div { display:grid; grid-template-columns:35px 1fr; gap:4px 12px; padding:21px 0; border-bottom:1px solid var(--ref-line); opacity:0; transform:translateX(16px); transition:.45s ease; }.ref-story-points>div.is-visible { opacity:1; transform:none; }.ref-story-points span { grid-row:1/3; color:var(--ref-blue); font-size:9px; font-weight:800; }.ref-story-points strong { font-size:13px; }.ref-story-points small { color:#818da0; font-size:10px; line-height:1.6; }
.ref-cta { padding:0 0 110px; }.ref-cta-card { position:relative; min-height:330px; padding:58px; display:flex; align-items:center; justify-content:space-between; gap:45px; overflow:hidden; border-radius:28px; background:linear-gradient(135deg,#091a38,#133d82); color:#fff; }.ref-cta-card::after { content:""; position:absolute; width:420px; height:420px; right:-170px; top:-130px; border:65px solid rgba(255,255,255,.045); border-radius:50%; }.ref-cta-card>div,.ref-cta-card>a { position:relative; z-index:2; }.ref-cta h2 { color:#fff; font-size:clamp(34px,4vw,52px); }.ref-cta-mark { position:absolute; left:-28px; bottom:-125px; color:rgba(255,255,255,.035); font-size:430px; font-weight:800; line-height:1; }
.ref-detail { position:fixed; z-index:10020; right:24px; bottom:24px; width:min(420px,calc(100% - 48px)); padding:31px; border:1px solid rgba(255,255,255,.13); border-radius:22px; background:rgba(8,24,53,.96); color:#fff; box-shadow:0 30px 90px rgba(0,0,0,.34); backdrop-filter:blur(18px); opacity:0; visibility:hidden; transform:translateY(20px); transition:.3s ease; }.ref-detail.is-open { opacity:1; visibility:visible; transform:none; }.ref-detail-close { position:absolute; right:15px; top:15px; width:34px; height:34px; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:rgba(255,255,255,.06); color:#fff; cursor:pointer; }.ref-detail-kicker { color:var(--ref-cyan); font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.ref-detail h2 { margin:15px 38px 12px 0; font-size:25px; letter-spacing:-.035em; }.ref-detail p { margin:0 0 20px; color:#aab9d4; font-size:12px; line-height:1.75; }.ref-detail a { display:inline-flex; align-items:center; gap:9px; color:#fff; font-size:10px; font-weight:800; text-decoration:none; }.ref-detail a i { transform:rotate(45deg); }
@keyframes ref-rotate{to{transform:rotate(360deg)}} @keyframes ref-dash{to{stroke-dashoffset:-200}} @keyframes ref-shuffle{0%{opacity:.25;transform:scale(.94)}100%{opacity:1;transform:scale(1)}}
.ref-logo-card { transition-delay:0s!important; }
@media(max-width:900px){.ref-container{width:min(100% - 36px,760px)}.ref-hero-grid{grid-template-columns:1fr;padding-block:75px}.ref-hero-visual{min-height:430px}.ref-section-heading{grid-template-columns:1fr;gap:22px}.ref-wall{grid-template-columns:repeat(3,1fr)}.ref-story-grid{grid-template-columns:55px 1fr}.ref-story-points{grid-column:2}.ref-cta-card{align-items:flex-start;flex-direction:column}.ref-cta-card>a{align-self:flex-start}}
@media(max-width:620px){.ref-container{width:calc(100% - 28px)}.ref-hero{min-height:auto}.ref-hero-grid{gap:28px;padding-block:62px}.ref-hero-copy h1{font-size:47px}.ref-hero-visual{min-height:360px}.ref-signal-main{left:4%;width:82%;padding:24px}.ref-signal-main>strong{font-size:70px}.ref-signal-small{right:0;bottom:4%}.ref-wall-section,.ref-story{padding:78px 0}.ref-section-heading h2,.ref-story h2{font-size:37px}.ref-toolbar{align-items:stretch;flex-direction:column}.ref-search{min-width:0}.ref-toolbar-meta{justify-content:space-between}.ref-wall{grid-template-columns:repeat(2,1fr);gap:9px}.ref-logo-card{height:185px;padding:11px;border-radius:16px}.ref-logo-frame{height:122px;padding:17px}.ref-card-caption{font-size:9px}.ref-story-grid{grid-template-columns:1fr;gap:24px}.ref-story-number{display:none}.ref-story-points{grid-column:auto}.ref-cta{padding-bottom:78px}.ref-cta-card{min-height:380px;padding:35px 28px}.ref-cta-card>a{width:100%}.ref-detail{right:14px;bottom:14px;width:calc(100% - 28px)}}
@media(prefers-reduced-motion:reduce){.ref-page *{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}.ref-logo-card,.ref-story-points>div{opacity:1;translate:0 0;transform:none}}