:root { --ink: #090a1b; --panel: #12142c; --paper: #f0eee7; --lime: #d7ff2c; --pink: #ff4aa5; --coral: #ff754b; --line: #bdbcb5; --muted: #5d5f68; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "IBM Plex Sans", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.hero { min-height: 780px; padding: 27px clamp(22px, 6vw, 96px) 66px; overflow: hidden; color: #fff; background: radial-gradient(circle at 84% 26%, #4954a6 0, #272c69 21%, transparent 45%), linear-gradient(132deg, #090a1b 14%, #121635 66%, #0a0b20); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.brand { white-space: nowrap; font-size: 1.45rem; font-weight: 700; letter-spacing: -.07em; }
.brand i { display: inline-block; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; background: conic-gradient(var(--lime), var(--pink), #6f70ff, var(--lime)); vertical-align: -1px; }
.nav-links { display: flex; gap: clamp(16px, 2.8vw, 38px); color: #d1d2dc; font-size: .82rem; }
.nav-links a:hover, .text-link:hover { color: var(--lime); }
.nav-cta { padding: 10px 15px; border: 1px solid #ffffff55; border-radius: 999px; font-size: .8rem; font-weight: 600; }.nav-cta span { color: var(--lime); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(335px, 470px); gap: clamp(40px, 7vw, 130px); max-width: 1300px; margin: 0 auto; align-items: center; min-height: 640px; }
.hero-copy { padding-top: 34px; }.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 23px; color: inherit; font: 500 .64rem "IBM Plex Mono", monospace; letter-spacing: .13em; }.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
h1, h2 { margin: 0; letter-spacing: -.07em; line-height: .93; } h1 { max-width: 710px; font-size: clamp(3.45rem, 6.9vw, 6.9rem); } h2 { font-size: clamp(2.55rem, 5vw, 5.25rem); } em { color: var(--lime); font-style: normal; }
.lede { max-width: 540px; margin: 31px 0; color: #c9cad7; font-size: 1rem; line-height: 1.7; }.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 19px; }.button { display: inline-block; padding: 15px 21px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: .88rem; font-weight: 700; box-shadow: 0 8px 26px #d7ff2c33; }.hero-actions span { color: #b4b5c4; font: .6rem "IBM Plex Mono", monospace; }
.deck { width: min(100%, 470px); justify-self: end; padding: 23px; border: 1px solid #ffffff36; border-radius: 20px; background: linear-gradient(145deg, #454b94, #171a42 70%); box-shadow: 17px 22px 0 var(--pink), 34px 44px 0 #586aff55; transform: rotate(2.5deg); font-family: "IBM Plex Mono", monospace; }.deck-top, .deck-track, .deck-stats { display: flex; align-items: center; justify-content: space-between; color: #d9d9ec; font-size: .58rem; }.deck-top b { padding: 4px 7px; border-radius: 4px; background: var(--lime); color: var(--ink); font-size: .53rem; }.deck-track { gap: 10px; margin-top: 21px; padding: 13px; border-radius: 7px; background: #0c0e297d; }.deck-track > i { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 12px var(--coral); }.deck-track.incoming > i { background: var(--lime); box-shadow: 0 0 12px var(--lime); }.deck-track div { flex: 1; }.deck-track strong { display: block; font: 600 .78rem "IBM Plex Sans", sans-serif; }.deck-track small { display: block; margin-top: 4px; color: #aeb0ca; font-size: .54rem; }.wave { display: flex; align-items: center; gap: 3px; height: 32px; padding: 5px 8px; background: #0c0e294d; }.wave i { width: 100%; border-radius: 3px; background: #ff6f83; }.wave i:nth-child(2n) { height: 75%; }.wave i:nth-child(3n) { height: 35%; }.wave i:nth-child(5n) { height: 95%; }.wave-two i { background: var(--lime); }.handoff { display: flex; align-items: center; gap: 8px; padding: 12px 0; color: #e2e2ec; font-size: .52rem; }.handoff span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--pink)); }.handoff span:last-child { background: linear-gradient(90deg, var(--lime), transparent); }.deck-stats { margin-top: 17px; color: #bfc1d4; font-size: .5rem; }
.promise, .workflow, .feature-section, .resources, .faq { padding: clamp(78px, 11vw, 150px) clamp(22px, 10vw, 155px); }.promise { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(45px, 11vw, 165px); background: var(--paper); }.promise .eyebrow, .workflow .eyebrow, .resources .eyebrow, .faq .eyebrow { color: #666770; }.promise .eyebrow i, .workflow .eyebrow i, .resources .eyebrow i, .faq .eyebrow i { background: var(--pink); box-shadow: 0 0 12px var(--pink); }.promise em { color: var(--pink); }.promise > p { align-self: end; max-width: 430px; margin: 0; color: var(--muted); line-height: 1.75; }
.workflow { background: #e2e0d9; }.workflow header, .feature-section header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 55px; }.workflow h2 em { color: var(--coral); }.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.steps article { position: relative; min-height: 255px; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.steps article > b { position: absolute; top: 21px; right: 23px; color: #898993; font: .62rem "IBM Plex Mono", monospace; }.steps article > i { display: grid; width: 47px; height: 47px; place-items: center; margin: 24px 0 27px; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 1.35rem; font-style: normal; }.steps article:nth-child(2) > i { color: var(--pink); font-size: 1rem; }.steps article:nth-child(3) > i { background: var(--pink); color: #fff; }.steps article:nth-child(4) > i { background: var(--coral); color: #fff; }.steps h3, .feature-grid h3, .faq h3 { margin: 0 0 9px; font-size: 1rem; }.steps p, .feature-grid p, .faq p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }.text-link { display: inline-block; margin-top: 31px; color: #1d2041; font-size: .84rem; font-weight: 700; }.text-link span { margin-left: 8px; color: var(--pink); }
.feature-section { color: #fff; background: #10132d; }.feature-section header .eyebrow { color: #adb1cf; }.feature-section header .eyebrow i { background: #7882ff; box-shadow: 0 0 12px #7882ff; }.feature-section h2 em { color: var(--lime); }.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #44496d; border-left: 1px solid #44496d; }.feature-grid article { min-height: 190px; padding: 22px; border-right: 1px solid #44496d; border-bottom: 1px solid #44496d; }.feature-grid article > b { color: #9ca1c8; font: .62rem "IBM Plex Mono", monospace; }.feature-grid h3 { margin-top: 31px; }.feature-grid p { color: #c1c3d4; }.feature-section .text-link { color: #fff; }.feature-section .text-link span { color: var(--lime); }
.privacy { display: grid; grid-template-columns: 1.15fr .85fr; background: #0a0b1d; color: #fff; }.privacy-card { padding: clamp(70px, 9vw, 130px) clamp(22px, 10vw, 150px); background: radial-gradient(circle at 75% 15%, #313a83, transparent 43%), #131634; }.privacy-card .eyebrow { color: #d6d8ed; }.privacy-card h2 em { color: var(--pink); }.privacy-card > p:not(.eyebrow) { max-width: 450px; margin: 25px 0; color: #c6c8d9; line-height: 1.7; }.dark { background: var(--pink); color: #fff; box-shadow: none; }.privacy-notes { display: grid; align-content: center; gap: 1px; background: #34375a; }.privacy-notes article { padding: 29px clamp(28px, 5vw, 66px); background: #181b3b; }.privacy-notes b { color: var(--lime); font: .62rem "IBM Plex Mono", monospace; }.privacy-notes p { max-width: 260px; margin: 12px 0 0; color: #daddf0; font-size: .85rem; line-height: 1.55; }
.resources { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(45px, 9vw, 145px); background: var(--paper); }.resources h2 em { color: var(--pink); }.resource-links { border-top: 1px solid var(--line); }.resource-links a { display: grid; grid-template-columns: 36px 1fr 24px; column-gap: 14px; padding: 21px 0; border-bottom: 1px solid var(--line); }.resource-links a:hover strong { color: var(--pink); }.resource-links span { color: #85858d; font: .6rem "IBM Plex Mono", monospace; }.resource-links strong { font-size: 1rem; }.resource-links small { grid-column: 2; margin-top: 5px; color: var(--muted); font-size: .76rem; line-height: 1.5; }.resource-links b { grid-column: 3; grid-row: 1 / span 2; color: var(--pink); }
.faq { background: #e2e0d9; }.faq h2 { margin-bottom: 47px; }.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.faq-grid article { min-height: 164px; padding: 25px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.faq-grid h3 { font-size: 1.06rem; }.faq-grid p { max-width: 470px; }
.final { padding: clamp(88px, 12vw, 158px) clamp(22px, 10vw, 155px); color: #fff; background: radial-gradient(circle at 80% 36%, #5a408f, transparent 31%), linear-gradient(110deg, #0a0b1e 12%, #161a47); }.final .eyebrow { color: #d8dbef; }.final .eyebrow i { background: var(--pink); box-shadow: none; }.final h2 em { color: var(--pink); }.final > p:not(.eyebrow) { max-width: 450px; margin: 25px 0; color: #c5c8dc; line-height: 1.65; }.final .button { background: var(--lime); }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px clamp(22px, 6vw, 96px); color: #fff; background: #101127; font-size: .75rem; }.footer p { margin: 0; color: #aeb1c8; }.footer > a:last-child { color: var(--lime); border-bottom: 1px solid; }
@media (max-width: 880px) { .hero { min-height: 870px; }.nav-links { display: none; }.hero-grid, .promise, .resources, .privacy { grid-template-columns: 1fr; }.hero-grid { gap: 53px; padding-top: 60px; }.hero-copy { padding: 0; }.deck { justify-self: center; }.steps, .feature-grid { grid-template-columns: repeat(2, 1fr); }.privacy-notes { grid-template-columns: repeat(3, 1fr); }.privacy-notes article { padding: 25px; }.resources { gap: 48px; } }
@media (max-width: 600px) { .hero { min-height: 810px; padding-bottom: 55px; }.nav-cta { font-size: .7rem; }.hero-grid { min-height: 0; padding-top: 85px; }.deck { padding: 17px; box-shadow: 10px 13px 0 var(--pink); transform: none; }.deck-track strong { font-size: .68rem; }.deck-track small { font-size: .48rem; }.deck-stats { font-size: .42rem; }.promise, .workflow, .feature-section, .resources, .faq { padding-block: 75px; }.workflow header, .feature-section header { display: block; margin-bottom: 35px; }.workflow header h2, .feature-section header h2 { margin-top: 14px; }.steps, .feature-grid, .faq-grid, .privacy-notes { grid-template-columns: 1fr; }.steps article { min-height: 192px; }.feature-grid article { min-height: 165px; }.privacy-card { padding-block: 80px; }.privacy-notes article { padding: 27px 30px; }.footer { flex-wrap: wrap; }.footer p { order: 3; width: 100%; } }