:root { --bg:#05070c; --surface:rgba(20,24,33,.78); --surface-strong:#171c26; --line:rgba(255,255,255,.12); --text:#f8fbff; --muted:#9da6b6; --blue:#3095ff; --cyan:#b6e7ff; --radius:28px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--text); background:var(--bg); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif; letter-spacing:-.018em; overflow-x:hidden; } a { color:inherit; text-decoration:none; } .shell { width:min(1140px,calc(100% - 40px)); margin-inline:auto; position:relative; } .glow { position:fixed; pointer-events:none; filter:blur(70px); opacity:.22; border-radius:999px; z-index:-1; } .glow-one { width:460px; height:460px; background:#1268ff; left:-250px; top:340px; } .glow-two { width:360px; height:360px; background:#40d7ff; right:-220px; top:100px; }
.site-header { height:92px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .brand { display:inline-flex; align-items:center; gap:10px; font-size:20px; font-weight:760; letter-spacing:-.04em; } .brand-mark { display:grid; place-items:center; width:30px; height:30px; color:#06101d; background:linear-gradient(135deg,#2492ff,#cfedff); border-radius:10px; font-size:17px; font-weight:900; box-shadow:0 4px 24px rgba(48,149,255,.3); } nav { display:flex; align-items:center; gap:27px; font-size:14px; color:#c6cfdd; } nav a:hover,.footer-links a:hover { color:#77bdff; } .language-button { border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--text); padding:9px 12px; border-radius:99px; font:600 12px inherit; cursor:pointer; }
.hero { padding:96px 0 80px; text-align:center; } .eyebrow { display:inline-flex; align-items:center; gap:9px; margin:0 0 20px; color:#79bcff; font-size:12px; font-weight:760; letter-spacing:.11em; text-transform:uppercase; } .pulse { width:7px; height:7px; border-radius:99px; background:#59b0ff; box-shadow:0 0 0 5px rgba(89,176,255,.13); } h1,h2,h3,p { margin-top:0; } h1 { max-width:800px; margin:0 auto; font-size:clamp(48px,8vw,94px); line-height:.98; letter-spacing:-.068em; } h1 span,h2 span { background:linear-gradient(105deg,#3395ff 13%,#d9f3ff 94%); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-copy { max-width:540px; margin:26px auto 0; color:#a9b3c3; font-size:17px; line-height:1.7; letter-spacing:-.02em; } .hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:31px; } .button { display:inline-flex; justify-content:center; align-items:center; gap:11px; min-height:52px; padding:0 21px; border-radius:17px; font-size:15px; font-weight:720; transition:transform .2s,box-shadow .2s; } .button:hover { transform:translateY(-2px); } .button-primary { background:linear-gradient(110deg,#218bfa,#c7eeff); color:#07111f; box-shadow:0 10px 38px rgba(36,142,255,.25); } .button-secondary { border:1px solid var(--line); background:rgba(255,255,255,.055); color:#f1f7ff; } .microcopy { margin:18px 0 0; color:#7e8999; font-size:13px; }
.product-stage { position:relative; height:670px; max-width:720px; margin:76px auto 0; display:flex; justify-content:center; align-items:center; } .product-stage:before { content:""; position:absolute; width:540px; height:420px; border-radius:50%; background:radial-gradient(ellipse,rgba(25,127,255,.26),transparent 68%); filter:blur(10px); } .phone { position:relative; z-index:1; width:292px; height:610px; padding:14px; background:linear-gradient(155deg,#2b313b,#070a0f 24%,#202630); border-radius:45px; box-shadow:0 34px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.17); } .phone:after { content:""; position:absolute; inset:6px; border:1px solid rgba(255,255,255,.1); border-radius:40px; pointer-events:none; } .dynamic-island { position:absolute; z-index:3; top:25px; left:50%; width:99px; height:27px; background:#030405; border-radius:30px; transform:translateX(-50%); } .screen-top { position:relative; z-index:2; display:flex; justify-content:space-between; padding:10px 10px 18px; font-size:10px; font-weight:700; } .preview-canvas { height:438px; overflow:hidden; position:relative; background:linear-gradient(#8acfff 0 53%,#f5c89e 53%); border-radius:31px; } .sun { position:absolute; top:60px; right:40px; width:64px; height:64px; border-radius:50%; background:#fff8cc; box-shadow:0 0 45px 17px rgba(255,245,180,.55); } .horizon { position:absolute; height:130px; right:0; bottom:0; left:0; background:linear-gradient(10deg,#112c3b,#1d6672); } .mountain { position:absolute; bottom:105px; clip-path:polygon(50% 0,100% 100%,0 100%); } .mountain-a { left:-35px; width:210px; height:178px; background:#466b80; }.mountain-b { right:-45px; width:230px; height:205px; background:#294a5d; } .subject { position:absolute; z-index:2; left:108px; bottom:50px; width:84px; height:210px; filter:drop-shadow(0 12px 10px rgba(0,0,0,.25)); } .subject-head { position:absolute; left:27px; width:31px; height:33px; background:#111d2b; border-radius:46% 45% 38% 39%; }.subject-body { position:absolute; top:31px; left:16px; width:55px; height:128px; background:linear-gradient(100deg,#5caafa,#185fe1); border-radius:35px 35px 16px 16px; }.subject-arm { position:absolute; top:50px; width:25px; height:105px; background:#397fde; border-radius:30px; }.arm-left { left:2px; transform:rotate(16deg); }.arm-right { right:0; transform:rotate(-16deg); }.cutout-label { position:absolute; z-index:3; bottom:18px; left:15px; padding:7px 9px; border:1px solid rgba(255,255,255,.28); border-radius:9px; background:rgba(8,14,26,.55); backdrop-filter:blur(8px); font-size:10px; font-weight:700; }.timeline { display:flex; gap:4px; position:relative; margin:12px 5px; height:43px; }.timeline span { flex:1; border-radius:5px; background:linear-gradient(145deg,#578296,#d9d3bf 42%,#1d3748 43%); }.timeline span:nth-child(2) { background:linear-gradient(145deg,#e5b38a,#7b4634 42%,#1d2635 43%); }.timeline span:nth-child(3) { background:linear-gradient(145deg,#1d465c,#84c8e4 48%,#345e62 49%); }.timeline i { position:absolute; left:46%; height:100%; width:2px; background:#76c2ff; box-shadow:0 0 9px #76c2ff; }.tool-row { display:flex; justify-content:space-around; align-items:center; font-size:17px; color:#8490a0; }.tool-row .active { display:grid; place-items:center; width:31px; height:27px; border-radius:8px; background:#268ffb; color:#06111f; }.float-card { position:absolute; z-index:2; width:172px; padding:17px; text-align:left; border:1px solid rgba(255,255,255,.14); border-radius:20px; background:rgba(20,27,38,.76); box-shadow:0 20px 45px rgba(0,0,0,.24); backdrop-filter:blur(18px); }.float-card strong,.float-card small { display:block; }.float-card strong { margin-top:10px; font-size:14px; }.float-card small { margin-top:4px; color:#aab5c3; font-size:11px; line-height:1.3; }.card-icon { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; color:#0e243d; background:linear-gradient(130deg,#4ca5ff,#ddf6ff); }.card-left { top:35%; left:0; }.card-right { right:0; bottom:17%; }
.section { padding:112px 0; }.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:37px; }.section-heading .eyebrow { margin-bottom:0; }.section h2,.privacy-band h2,.cta h2 { margin:0; font-size:clamp(37px,5.2vw,64px); line-height:1.01; letter-spacing:-.06em; }.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }.feature-card { min-height:295px; position:relative; overflow:hidden; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(30,36,49,.9),rgba(15,18,25,.94)); }.feature-card.large { min-height:400px; grid-row:span 2; }.feature-card.wide { min-height:300px; grid-column:span 2; display:flex; justify-content:space-between; }.feature-symbol { display:grid; place-items:center; width:48px; height:48px; margin-bottom:42px; color:#80c1ff; border-radius:15px; background:rgba(72,157,255,.12); font-size:24px; }.symbol-cutout { color:#182334; background:linear-gradient(135deg,#3196ff,#d5f3ff); }.feature-index { color:#6787a9; font-size:12px; font-weight:700; }.feature-card h3 { margin-bottom:10px; font-size:21px; letter-spacing:-.045em; }.feature-card p:not(.feature-index) { max-width:330px; margin-bottom:0; color:#aeb7c6; line-height:1.55; font-size:14px; }.mini-canvas { position:absolute; width:225px; height:145px; right:-25px; bottom:-10px; overflow:hidden; opacity:.84; border:1px solid rgba(255,255,255,.13); border-radius:20px; background:#1d2632; transform:rotate(-7deg); }.mini-grid { position:absolute; inset:0; background:linear-gradient(45deg,rgba(255,255,255,.055) 25%,transparent 25% 75%,rgba(255,255,255,.055) 75%),linear-gradient(45deg,rgba(255,255,255,.055) 25%,transparent 25% 75%,rgba(255,255,255,.055) 75%); background-size:20px 20px; background-position:0 0,10px 10px; }.mini-subject { position:absolute; z-index:1; left:82px; top:25px; width:55px; height:100px; border-radius:36px 36px 15px 15px; background:linear-gradient(#ccecff 0 22%,#348dfa 23%); }.ratio-art { align-self:center; display:flex; align-items:center; gap:15px; padding-right:35px; color:#cceaff; font-size:17px; }.ratio-art i { display:block; width:55px; height:77px; border:2px solid #4aa8ff; border-radius:7px; box-shadow:0 0 24px rgba(55,148,255,.3); }
.privacy-band { margin-top:25px; padding:100px 0; border-block:1px solid var(--line); background:linear-gradient(105deg,rgba(11,47,93,.64),rgba(13,19,29,.74) 48%,rgba(39,61,84,.55)); }.privacy-inner { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:80px; }.privacy-inner .eyebrow { margin-bottom:17px; }.privacy-inner > div:last-child { color:#c4cedb; font-size:17px; line-height:1.68; }.text-link { display:inline-block; margin-top:19px; color:#86c8ff; font-size:15px; font-weight:700; }.cta { overflow:hidden; margin-top:110px; margin-bottom:100px; padding:96px 30px; text-align:center; border:1px solid rgba(126,193,255,.28); border-radius:38px; background:radial-gradient(circle at 50% 5%,rgba(47,144,255,.42),transparent 48%),linear-gradient(140deg,#0e2747,#0d131f 70%); }.cta .eyebrow { margin-bottom:18px; }.cta h2 { margin-bottom:33px; }.cta-orbit { position:absolute; width:500px; height:220px; border:1px solid rgba(158,218,255,.22); border-radius:50%; pointer-events:none; }.orbit-a { left:-280px; top:30px; transform:rotate(-20deg); }.orbit-b { right:-260px; bottom:5px; transform:rotate(21deg); }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:110px; border-top:1px solid var(--line); color:#9aa5b4; font-size:13px; }.footer-links { display:flex; gap:22px; }.site-footer .brand { color:var(--text); font-size:17px; }.site-footer .brand-mark { width:26px; height:26px; border-radius:8px; font-size:14px; }
.legal-page { background:radial-gradient(circle at 65% -5%,rgba(29,107,202,.2),transparent 32%),var(--bg); }.legal { max-width:780px; padding-top:90px; padding-bottom:95px; }.legal-heading { padding-bottom:48px; margin-bottom:50px; border-bottom:1px solid var(--line); }.legal-heading .eyebrow { margin-bottom:19px; }.legal-heading h1 { margin:0; text-align:left; font-size:clamp(43px,7vw,68px); }.legal-heading p { margin:20px 0 0; color:var(--muted); font-size:14px; }.language-content { color:#bdc6d3; font-size:16px; line-height:1.82; }.language-content .lead { margin-bottom:42px; color:#e0e9f4; font-size:20px; line-height:1.65; }.language-content h2 { margin:39px 0 11px; color:var(--text); font-size:23px; line-height:1.3; letter-spacing:-.04em; }.language-content p { margin-bottom:0; }.language-content a { color:#79bdff; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:700px) { .shell { width:min(100% - 32px,600px); }.site-header { height:76px; }.site-header nav { display:none; }.hero { padding-top:66px; }.hero-copy { font-size:16px; }.product-stage { height:588px; margin-top:54px; transform:scale(.88); transform-origin:top center; margin-bottom:-70px; }.card-left { left:-30px; }.card-right { right:-30px; }.section { padding:76px 0; }.section-heading { display:block; }.section-heading .eyebrow { margin-bottom:18px; }.feature-grid { grid-template-columns:1fr; }.feature-card.large { min-height:340px; grid-row:auto; }.feature-card.wide { grid-column:auto; min-height:270px; }.ratio-art { padding:0; transform:scale(.8); transform-origin:right center; }.privacy-band { padding:69px 0; }.privacy-inner { grid-template-columns:1fr; gap:26px; }.privacy-inner > div:last-child { font-size:16px; }.cta { margin-top:76px; margin-bottom:65px; padding:70px 22px; border-radius:28px; }.site-footer { flex-wrap:wrap; padding:25px 0; min-height:0; }.site-footer small { width:100%; }.legal { padding-top:57px; padding-bottom:65px; }.legal-heading { padding-bottom:34px; margin-bottom:35px; }.language-content { font-size:15px; }.language-content .lead { font-size:18px; }.language-content h2 { margin-top:34px; font-size:21px; } }
@media (max-width:390px) { .product-stage { transform:scale(.79); margin-bottom:-125px; }.feature-card { padding:23px; }.feature-card.wide { display:block; }.ratio-art { position:absolute; right:13px; bottom:14px; }.feature-card.wide p { max-width:255px; } }