:root { --ink:#11162e; --indigo:#3632c8; --deep:#151a88; --blue:#1740d2; --violet:#6744f4; --mist:#f1f2ff; --line:#dfe2f5; --muted:#626983; --shell:min(1180px, calc(100vw - 48px)); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:#fff; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","YuGothic",sans-serif; line-height:1.7; } a { color:inherit; text-decoration:none; } button { font:inherit; } .section-shell { width:var(--shell); margin:0 auto; } .sr-only { clip:rect(0 0 0 0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }
.site-header { height:88px; display:flex; align-items:center; justify-content:space-between; width:var(--shell); margin:auto; position:relative; z-index:10; } .brand { display:flex; align-items:center; gap:12px; font-weight:800; font-size:20px; letter-spacing:-.05em; } .brand img { width:43px; height:43px; border-radius:11px; box-shadow:0 7px 18px #1d25aa26; } .site-nav { display:flex; align-items:center; gap:34px; font-size:14px; font-weight:700; } .site-nav > a:not(.header-cta) { transition:color .2s; } .site-nav > a:not(.header-cta):hover,.text-link:hover { color:var(--indigo); } .header-cta { background:var(--indigo); color:#fff; border-radius:9px; padding:12px 17px; margin-left:4px; box-shadow:0 7px 15px #3732c828; transition:transform .2s,background .2s; } .header-cta:hover { background:#2522ae; transform:translateY(-1px); } .header-cta span { font-size:18px; margin-right:8px; } .menu-button { display:none; }
.hero { min-height:650px; display:grid; grid-template-columns:47% 53%; align-items:center; padding:60px 0 72px; overflow:hidden; } .hero-lead { font-size:clamp(42px,4.5vw,66px); font-weight:800; letter-spacing:-.08em; line-height:1.26; margin:0; } .hero-lead em { font-style:normal; color:var(--indigo); } .hero-summary { font-size:18px; line-height:1.9; margin:31px 0 29px; color:#454b62; font-weight:500; } .app-store-badge { background:#050506; color:white; display:inline-flex; align-items:center; gap:10px; min-width:208px; height:59px; border-radius:10px; padding:9px 17px 8px; line-height:1; box-shadow:0 10px 20px #12122320; transition:transform .2s,box-shadow .2s; } .app-store-badge:hover { transform:translateY(-2px); box-shadow:0 13px 24px #12122335; } .app-store-badge .apple { font-size:34px; } .app-store-badge span:last-child { font-size:23px; letter-spacing:-.04em; } .app-store-badge small { display:block; font-size:10px; letter-spacing:.02em; margin-bottom:3px; } .availability { color:#747b91; font-size:13px; margin:13px 0; }
.phone-stage { height:570px; position:relative; margin-left:10px; } .phone { position:absolute; width:258px; height:535px; padding:7px; background:#121421; border:2px solid #565966; border-radius:37px; box-shadow:0 23px 42px #0e124345; overflow:hidden; transform:rotate(-5deg); } .phone-detail { width:245px; height:512px; top:39px; right:0; transform:rotate(5deg); z-index:2; box-shadow:0 24px 50px #0e12435c; } .phone-question { top:8px; left:34px; z-index:3; } .phone-hardware { position:absolute; height:23px; width:93px; background:#121421; border-radius:15px; left:calc(50% - 46px); top:10px; z-index:2; } .phone-hardware span { height:6px; width:25px; background:#313546; display:block; border-radius:9px; margin:8px auto; } .screen { height:100%; overflow:hidden; border-radius:29px; background:#fff; padding:21px 14px 9px; color:#161a2d; font-size:8px; line-height:1.4; } .mobile-status { display:flex; align-items:center; justify-content:space-between; font-size:8px; margin:0 3px 19px; } .screen-label { color:var(--violet); font-weight:800; margin:0 0 5px; } .screen h2 { margin:0; font-size:17px; line-height:1.3; letter-spacing:-.05em; } .screen-note { color:#73788c; margin:6px 0 10px; font-size:8px; } .question-list { padding:0; margin:0; list-style:none; } .question-list li { border:1px solid #e4e5ed; border-radius:9px; margin-bottom:7px; padding:8px 7px; display:grid; grid-template-columns:23px 1fr 8px; gap:5px; align-items:center; box-shadow:0 3px 8px #2935ab0a; } .question-list small { display:block; color:#8a8e9d; margin-top:2px; font-size:7px; } .question-list strong { color:#868a9b; font-size:16px; font-weight:400; } .q-icon { color:var(--indigo); font-size:18px; text-align:center; } .phone button { width:100%; border:0; color:#fff; background:linear-gradient(105deg,var(--indigo),var(--violet)); height:33px; border-radius:9px; font-size:9px; font-weight:700; margin-top:4px; } .tab-bar { border-top:1px solid #edeef3; display:flex; justify-content:space-between; text-align:center; padding:9px 3px 0; color:#777c92; margin-top:6px; } .tab-bar span { font-size:15px; line-height:1; } .tab-bar small { font-size:6px; display:block; margin-top:3px; } .tab-bar .active { color:var(--violet); } .detail-top { display:flex; justify-content:space-between; font-size:13px; margin:-1px 0 17px; } .detail-top b { font-size:9px; } .tag-row { display:flex; flex-wrap:wrap; gap:3px; margin:9px 0; } .tag-row span { background:#e8e9ff; color:#2f34bd; border-radius:4px; font-size:6px; padding:3px 4px; font-weight:700; } .university { font-size:10px; font-weight:800; margin:11px 0 0; } .department { color:#767a8b; font-size:7px; margin:1px 0 9px; } .detail-block { border-top:1px solid #e8e9ef; padding:8px 0 2px; } .detail-block b { font-size:8px; } .detail-block p,.detail-block li { font-size:7px; color:#596075; margin:4px 0; } .detail-block ul { margin:4px 0 0; padding-left:14px; } .phone-detail .screen h2 { font-size:13px; } .phone-detail .screen { padding-top:21px; } .phone-detail button { margin-top:6px; }
.orbit { position:absolute; border:1px solid #9eabff66; border-radius:50%; } .orbit-one { height:460px; width:460px; top:51px; left:8px; } .orbit-two { width:342px; height:342px; right:-67px; top:82px; border-color:#c1c5ff; } .problem-band { background:var(--mist); padding:30px 0; } .problem-inner p { text-align:center; color:#4b5168; margin:0; font-size:16px; line-height:1.8; } .problem-inner strong { color:var(--indigo); }
.flow-section { padding:130px 0 118px; } .section-heading { max-width:610px; } .section-heading h2,.feature-copy h2 { font-size:clamp(32px,3.3vw,48px); line-height:1.3; margin:0; letter-spacing:-.065em; } .section-heading p,.feature-copy > p { font-size:16px; color:#60677c; margin:19px 0 0; } .flow-rail { display:grid; grid-template-columns:repeat(3,1fr); gap:42px; position:relative; margin-top:72px; } .flow-rail::before { background:var(--indigo); content:""; height:1px; position:absolute; left:8%; right:8%; top:23px; } .flow-step { position:relative; } .step-number { background:var(--indigo); color:#fff; border:5px solid #fff; border-radius:50%; display:grid; place-items:center; width:52px; height:52px; font-weight:800; font-size:19px; position:relative; z-index:1; } .flow-art { height:177px; margin:30px 0 23px; background:linear-gradient(145deg,#fafaff,#eff0ff); border-radius:18px; border:1px solid #e3e5f7; position:relative; overflow:hidden; } .flow-step h3 { font-size:25px; margin:0 0 9px; letter-spacing:-.05em; color:var(--indigo); } .flow-step p { margin:0; color:#60677c; font-size:14px; } .find-art { display:grid; grid-template-columns:1fr 1fr; padding:21px; gap:9px; } .find-art span { display:grid; place-items:center; border:1px solid #d9dafe; background:#fff; color:#4845cb; border-radius:10px; font-size:12px; font-weight:700; } .find-art span:first-child { border-color:#514bdd; background:#f2f1ff; } .compare-art { display:flex; padding:24px 25px; gap:17px; } .compare-art div:first-child { display:grid; gap:4px; flex:1; } .compare-art b { color:#575d78; font-size:9px; border-bottom:1px solid #d8daee; padding:4px 0; } .compare-art div:last-child { display:grid; gap:11px; padding-top:3px; } .compare-art i { width:34px; height:34px; border-radius:50%; border:3px solid var(--indigo); position:relative; } .compare-art i:nth-child(2) { border-color:#35b9ea; } .compare-art i:nth-child(3) { border-color:#8d8eab; } .idea-art { padding:23px; } .idea-art span { display:block; color:#2a2c96; font-weight:800; font-size:14px; margin-bottom:13px; } .idea-art i { display:block; height:13px; border-radius:4px; background:#d9dbf5; margin:7px 0; width:100%; } .idea-art i:nth-of-type(2) { width:78%; } .idea-art i:nth-of-type(3) { width:55%; background:#c8c4ff; }
.feature-section { background:#f5f6ff; padding:125px 0; } .feature-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:95px; align-items:start; } .text-link { display:inline-flex; gap:14px; align-items:center; color:var(--indigo); font-size:14px; font-weight:800; margin-top:34px; } .text-link span { font-size:20px; } .feature-list { border-top:1px solid #d8daef; } .feature-row { display:grid; grid-template-columns:64px 1fr; gap:21px; border-bottom:1px solid #d8daef; padding:27px 0; } .line-icon { display:grid; place-items:center; height:49px; width:49px; border:1px solid #cacdf5; border-radius:50%; color:var(--indigo); font-size:25px; line-height:1; } .feature-row h3 { margin:0 0 6px; font-size:19px; letter-spacing:-.045em; } .feature-row p { color:#656c80; font-size:14px; margin:0; }
.trust-section { padding:128px 0 136px; } .trust-grid { margin-top:65px; display:grid; grid-template-columns:repeat(3,1fr); gap:0; } .trust-item { padding:5px 42px 0 0; } .trust-item + .trust-item { border-left:1px solid var(--line); padding-left:42px; } .trust-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--mist); color:var(--indigo); font-size:29px; font-weight:700; } .trust-item h3 { font-size:18px; margin:21px 0 9px; letter-spacing:-.045em; color:#292e92; } .trust-item p { color:#656c80; font-size:14px; margin:0; }
.download-section { background:var(--deep); min-height:390px; position:relative; overflow:hidden; color:#fff; } .network-art { position:absolute; inset:0 0 0 auto; width:100%; height:100%; object-fit:cover; object-position:right center; opacity:.84; } .download-inner { min-height:390px; position:relative; display:flex; align-items:center; justify-content:space-between; gap:40px; } .download-inner h2 { font-size:clamp(38px,4vw,60px); letter-spacing:-.07em; line-height:1.25; margin:0; } .download-inner p { color:#dee1ff; font-size:15px; margin:17px 0 0; } .download-action { min-width:260px; text-align:left; padding-left:46px; border-left:1px solid #a1a9ff; } .download-action p { font-size:13px; margin-top:12px; }.download-section .app-store-badge { box-shadow:none; }
.site-footer { display:flex; justify-content:space-between; align-items:center; min-height:92px; color:#737a90; font-size:12px; } .site-footer nav { display:flex; gap:30px; font-weight:700; color:#3e42a8; } .site-footer a:hover { text-decoration:underline; }
.reveal { opacity:1; transform:none; } .delay-one { transition-delay:.12s; } .delay-two { transition-delay:.24s; }
@media (max-width:800px) { :root { --shell:min(100% - 40px, 600px); } .site-header { height:74px; }.brand { font-size:17px; }.brand img { height:39px; width:39px; }.menu-button { display:block; appearance:none; background:none; border:0; padding:8px; }.menu-button i { display:block; height:2px; width:21px; background:#14182b; margin:5px 0; transition:transform .2s; }.site-nav { background:#fff; border-bottom:1px solid #e2e3f0; display:none; left:0; padding:16px 20px 23px; position:absolute; top:74px; width:100%; align-items:stretch; gap:15px; box-shadow:0 12px 22px #20275212; }.site-nav.is-open { display:flex; }.header-cta { text-align:center; margin:2px 0 0; }.hero { grid-template-columns:1fr; padding:54px 0 0; }.hero-lead { font-size:45px; }.hero-summary { font-size:16px; margin:23px 0; }.phone-stage { margin:32px -20px 0; height:483px; }.phone { width:218px; height:454px; border-radius:32px; }.phone-question { left:10%; }.phone-detail { width:207px; height:431px; top:35px; right:5%; }.screen { border-radius:25px; transform-origin:top left; }.phone-detail .screen h2 { font-size:11px; }.phone-hardware { transform:scale(.83); }.phone-stage .question-list li { margin-bottom:5px; padding:6px; }.phone-stage .screen h2 { font-size:14px; }.phone-stage .screen { font-size:7px; }.phone-stage .question-list small { font-size:6px; }.phone-stage .phone button { height:27px; }.orbit-one { width:370px; height:370px; left:12%; top:36px; }.orbit-two { width:260px; height:260px; top:80px; }.problem-band { padding:24px 0; }.problem-inner p { font-size:14px; text-align:left; }.flow-section,.trust-section { padding:88px 0; }.section-heading h2,.feature-copy h2 { font-size:34px; }.section-heading p,.feature-copy > p { font-size:15px; }.flow-rail { display:block; margin-top:44px; }.flow-rail::before { bottom:7%; height:auto; left:23px; right:auto; top:23px; width:1px; }.flow-step { padding-left:75px; margin-bottom:49px; }.step-number { left:0; position:absolute; top:0; }.flow-art { margin:0 0 19px; height:150px; }.flow-step h3 { font-size:24px; }.feature-section { padding:87px 0; }.feature-layout { display:block; }.feature-list { margin-top:43px; }.feature-row { grid-template-columns:51px 1fr; gap:13px; }.line-icon { height:42px; width:42px; font-size:21px; }.feature-row h3 { font-size:17px; }.trust-grid { display:block; margin-top:40px; }.trust-item { padding:0 0 31px; }.trust-item + .trust-item { border-left:0; border-top:1px solid var(--line); padding:31px 0; }.trust-item h3 { margin-top:15px; }.download-inner { display:block; min-height:490px; padding:78px 0 54px; }.download-inner h2 { font-size:45px; }.download-inner > div:first-child { max-width:300px; }.download-action { border-left:0; border-top:1px solid #a1a9ff; margin-top:48px; padding:29px 0 0; }.network-art { width:150%; max-width:none; object-position:63% center; opacity:.65; }.site-footer { align-items:flex-start; flex-direction:column; gap:11px; padding:26px 0; }.site-footer nav { gap:20px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { transition:none; } }