:root { --ivy: #154031; --mint: #b8f4d2; --cream: #f7fbf8; --muted: #6f7773; background: var(--ivy); color: var(--cream); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; overflow-x: hidden; } a { color: inherit; text-decoration: none; }
.liquid { background: #0b3025; inset: 0; overflow: hidden; pointer-events: none; position: fixed; z-index: -2; }.liquid::before, .liquid::after, .liquid i { border-radius: 45% 55% 55% 45%; filter: blur(38px); opacity: .7; position: absolute; }.liquid::before { animation: drift 20s ease-in-out infinite alternate; background: radial-gradient(circle at 40% 35%, #d8f6bd 0, #78c78c 25%, #176352 58%, transparent 72%); height: 62vw; left: -18vw; top: -18vw; width: 62vw; }.liquid::after { animation: drift 18s ease-in-out infinite alternate-reverse; background: radial-gradient(circle at 55% 40%, #bdddb8 0, #4f9b82 23%, #154f44 58%, transparent 73%); height: 70vw; right: -25vw; top: 16vw; width: 70vw; }.liquid i:nth-child(1) { animation: pulse 16s ease-in-out infinite; background: #c4f29b; height: 22vw; left: 43%; opacity: .28; top: 28%; width: 22vw; }.liquid i:nth-child(2) { animation: drift 22s ease-in-out infinite alternate-reverse; background: #0c4138; bottom: -17vw; height: 57vw; left: 17%; opacity: .9; width: 57vw; }.liquid i:nth-child(3) { background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%); height: 130%; left: 18%; opacity: .45; transform: rotate(26deg); width: 20%; }
main { margin: auto; max-width: 1220px; padding: 28px 44px 0; position: relative; } nav, footer { align-items: center; display: flex; justify-content: space-between; }.brand { font-size: 27px; font-weight: 900; letter-spacing: -1.7px; }.brand span, em { color: var(--mint); font-style: normal; }.nav-links { display: flex; gap: 26px; }.nav-links a { border-bottom: 1px solid transparent; color: rgba(247,251,248,.76); font-size: 11px; font-weight: 800; letter-spacing: .08em; padding-bottom: 4px; text-transform: uppercase; transition: color .2s, border-color .2s; }.nav-links a:hover { border-color: var(--mint); color: var(--mint); }
.hero { margin: auto; max-width: 900px; padding: clamp(120px, 17vh, 190px) 0 clamp(105px, 13vh, 150px); text-align: center; }.eyebrow { color: var(--mint); font-size: 11px; font-weight: 800; letter-spacing: .18em; margin: 0 0 22px; text-transform: uppercase; } h1, h2 { font-weight: 850; letter-spacing: -.08em; line-height: .9; margin: 0; text-wrap: balance; } h1 { font-size: clamp(58px, 9.5vw, 124px); }.intro { color: rgba(247,251,248,.86); font-size: clamp(17px, 2vw, 21px); line-height: 1.55; margin: 34px auto 0; max-width: 625px; text-wrap: balance; }.button { backdrop-filter: blur(12px); background: var(--mint); border-radius: 999px; color: var(--ivy); display: inline-flex; font-size: 13px; font-weight: 900; gap: 22px; margin-top: 34px; padding: 15px 21px 15px 25px; transition: transform .2s ease, background .2s ease; }.button:hover { background: #fff; transform: translateY(-3px); }.button span { font-size: 17px; line-height: .75; }
.vision { border-top: 1px solid rgba(234,255,220,.32); display: grid; gap: 40px; grid-template-columns: .7fr 1.3fr; padding: 22px 0 148px; }.vision-label { color: var(--mint); font-size: 12px; font-weight: 800; letter-spacing: .1em; line-height: 1.35; margin: 0; max-width: 170px; text-transform: uppercase; }.glass { backdrop-filter: blur(18px); background: linear-gradient(125deg, rgba(235,255,223,.19), rgba(16,58,49,.24)); border: 1px solid rgba(238,255,223,.28); border-radius: 24px; box-shadow: 0 20px 80px rgba(0,0,0,.16); padding: 30px; }.glass p { font-size: clamp(23px, 3vw, 38px); letter-spacing: -.045em; line-height: 1.04; margin: 0; max-width: 720px; }.glass span { color: rgba(247,251,248,.7); display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; margin-top: 30px; text-transform: uppercase; }.signals { display: flex; gap: 10px; grid-column: 2; margin-top: -23px; }.signals span { background: rgba(7,31,26,.34); border: 1px solid rgba(238,255,223,.21); border-radius: 999px; font-size: 12px; padding: 9px 13px; }
.manifesto { background: var(--cream); color: #101312; margin: 0 -44px; padding: 104px max(44px, calc((100vw - 1132px) / 2)) 100px; }.section-top { align-items: center; display: flex; justify-content: space-between; }.section-top .eyebrow { color: var(--ivy); }.section-top span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; }.manifesto-grid { display: grid; gap: 50px; grid-template-columns: 1.35fr .65fr; padding: 55px 0 68px; }.manifesto h2 { color: var(--ivy); font-size: clamp(38px, 5.5vw, 74px); }.manifesto-grid > p { align-self: end; color: #4e5953; font-size: 17px; line-height: 1.55; margin: 0; }.principles { border-top: 1px solid #dfe8e1; display: grid; grid-template-columns: repeat(3, 1fr); }.principles article { min-height: 220px; padding: 25px 28px 15px 0; }.principles article + article { border-left: 1px solid #dfe8e1; padding-left: 28px; }.principles span { color: var(--ivy); font-size: 12px; font-weight: 900; }.principles h3 { color: var(--ivy); font-size: 26px; letter-spacing: -.055em; margin: 52px 0 8px; }.principles p { color: #66716b; line-height: 1.45; margin: 0; max-width: 230px; }
.app-tease { align-items: center; display: grid; gap: 11vw; grid-template-columns: 1fr .8fr; min-height: 700px; padding: 110px 11vw; }.tease-copy h2, .closing h2 { font-size: clamp(48px, 6.4vw, 86px); }.tease-copy > p:last-child { color: rgba(247,251,248,.72); font-size: 18px; line-height: 1.5; margin: 27px 0 0; max-width: 365px; }.phone { background: linear-gradient(158deg, #f8fbf8, #d9ebe0); border: 8px solid #0d241b; border-radius: 43px; box-shadow: 0 34px 75px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.8); color: var(--ivy); margin: auto; min-height: 500px; overflow: hidden; padding: 17px; position: relative; transform: rotate(6deg); width: min(294px, 70vw); }.phone-top { align-items: center; display: flex; font-size: 10px; font-weight: 900; justify-content: space-between; }.phone-top i { background: #142c22; border-radius: 999px; height: 15px; left: 50%; position: absolute; top: 11px; transform: translateX(-50%); width: 78px; }.orb { background: radial-gradient(circle at 28% 28%, #f2ffd6, #a5d19c 31%, #226850 68%); border-radius: 42% 58% 49% 51%; height: 150px; margin: 52px auto 34px; transform: rotate(-17deg); width: 150px; }.phone > p { font-size: 25px; font-weight: 900; letter-spacing: -.07em; line-height: .94; margin: 0 0 21px; }.mini-card { background: rgba(255,255,255,.65); border: 1px solid rgba(21,64,49,.11); border-radius: 17px; display: grid; gap: 7px; padding: 14px; }.mini-card b { font-size: 11px; }.mini-card span { color: #62736a; font-size: 11px; line-height: 1.35; }.phone-nav { bottom: 19px; display: flex; gap: 20px; justify-content: center; left: 0; position: absolute; right: 0; }.phone-nav i { background: #c4d9ca; border-radius: 50%; height: 7px; width: 7px; }.phone-nav i:nth-child(2) { background: var(--ivy); }
.closing { border-top: 1px solid rgba(234,255,220,.3); padding: 115px 0 145px; text-align: center; }.closing .eyebrow { margin-bottom: 27px; }.text-link { border-bottom: 1px solid var(--mint); color: var(--mint); display: inline-flex; font-size: 14px; font-weight: 900; gap: 26px; margin-top: 38px; padding-bottom: 7px; }.text-link span { font-size: 18px; line-height: .7; } footer { border-top: 1px solid rgba(234,255,220,.27); color: rgba(247,251,248,.65); font-size: 11px; justify-content: space-between; letter-spacing: .04em; margin: 0 44px; padding: 24px 0 30px; } footer a { border-bottom: 1px solid rgba(245,246,238,.45); }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) rotate(-8deg) scale(1); } to { transform: translate3d(12%, 10%, 0) rotate(11deg) scale(1.14); } } @keyframes pulse { 0%, 100% { transform: scale(.8); } 50% { transform: scale(1.28); } }
@media (max-width: 720px) { main { padding: 23px 22px 0; }.nav-links { gap: 14px; }.nav-links a { font-size: 9px; }.hero { padding: 130px 0 105px; text-align: left; }.intro { margin-left: 0; }.vision { display: block; padding-bottom: 95px; }.vision-label { margin-bottom: 18px; max-width: 250px; }.glass { padding: 24px 22px; }.signals { flex-wrap: wrap; margin: 13px 0 0; }.manifesto { margin: 0 -22px; padding: 78px 22px; }.manifesto-grid { display: block; padding: 39px 0 48px; }.manifesto-grid > p { margin-top: 26px; }.principles { display: block; }.principles article { min-height: 175px; }.principles article + article { border-left: 0; border-top: 1px solid #dfe8e1; padding-left: 0; }.principles h3 { margin-top: 33px; }.app-tease { display: block; min-height: auto; padding: 88px 8vw; }.phone { margin-top: 64px; transform: rotate(3deg); }.closing { padding: 95px 0 110px; text-align: left; } footer { gap: 14px; margin: 0 22px; } footer span:nth-child(2) { display: none; }.liquid::before, .liquid::after { filter: blur(27px); } }