:root { --bg:#10111a; --surface:#181a25; --text:#f8f7ff; --muted:#c0c4d4; --line:rgba(255,255,255,.11); --orange:#ff9d11; --aqua:#20d3c7; --pink:#ff5974; --violet:#7852ed; --max:1160px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; color:var(--text); background:radial-gradient(circle at 88% -8%,rgba(120,82,237,.31),transparent 31rem),radial-gradient(circle at -4% 31%,rgba(32,211,199,.17),transparent 29rem),var(--bg); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.55; }
a { color:inherit; text-underline-offset:3px; }
a:focus-visible { outline:3px solid var(--aqua); outline-offset:3px; border-radius:5px; }
.shell { width:min(var(--max),calc(100% - 40px)); margin:auto; }
.site-header { position:sticky; top:0; z-index:10; backdrop-filter:blur(16px); background:rgba(16,17,26,.78); border-bottom:1px solid var(--line); }
.nav { height:74px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; font-weight:760; letter-spacing:-.02em; }
.brand img { width:38px; height:38px; border-radius:11px; }
.brand small { display:block; color:var(--muted); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:22px; color:var(--muted); font-size:.92rem; }
.nav-links a { text-decoration:none; }
.language { font-size:.86rem; padding:7px 10px; border:1px solid var(--line); border-radius:10px; color:var(--muted); }
.hero { position:relative; overflow:hidden; padding:80px 0 62px; }
.hero-grid { display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:48px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border:1px solid rgba(32,211,199,.35); border-radius:999px; color:#a5fff5; background:rgba(32,211,199,.09); font-size:.78rem; font-weight:750; letter-spacing:.035em; }
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--aqua); box-shadow:0 0 14px var(--aqua); }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:720px; margin:18px 0 19px; font-size:clamp(2.5rem,5.3vw,4.75rem); line-height:1.02; letter-spacing:-.066em; }
h1 .accent { background:linear-gradient(105deg,#ffe281 4%,var(--orange) 43%,#ff758c 86%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { max-width:630px; color:var(--muted); font-size:1.15rem; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:29px; }
.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:9px; border-radius:13px; padding:11px 18px; text-decoration:none; font-weight:780; transition:transform .18s ease,background .18s ease; }
.button:hover { transform:translateY(-2px); }
.button.primary { color:#17110a; background:linear-gradient(135deg,#ffcc4d,var(--orange)); box-shadow:0 12px 32px rgba(255,157,17,.21); }
.button.secondary { border:1px solid var(--line); background:rgba(255,255,255,.04); }
.fine-print { margin-top:14px; color:#969bae; font-size:.82rem; }
.hero-visual { position:relative; min-height:420px; }
.orb { position:absolute; border-radius:50%; filter:blur(1px); opacity:.92; }
.orb.one { width:195px; height:195px; top:7%; right:9%; background:radial-gradient(circle at 34% 25%,#ffd268,var(--orange) 43%,#ad5800); }
.orb.two { width:150px; height:150px; bottom:4%; left:2%; background:radial-gradient(circle at 35% 28%,#5ff1e6,var(--aqua) 44%,#08736c); }
.orb.three { width:127px; height:127px; bottom:12%; right:4%; background:radial-gradient(circle at 35% 28%,#ff99ab,var(--pink) 47%,#a7254a); }
.device { position:absolute; inset:37px 16px 11px 48px; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:24px; background:#272a37; box-shadow:0 34px 90px rgba(0,0,0,.48); transform:rotate(2.2deg); }
.device img { display:block; width:100%; height:100%; object-fit:cover; object-position:left top; opacity:.98; }
.device::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,rgba(255,255,255,.11),transparent 23%,transparent 78%,rgba(123,83,237,.2)); }
.trust-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:18px auto 0; border:1px solid var(--line); background:var(--line); border-radius:17px; overflow:hidden; }
.trust { padding:18px 20px; background:rgba(24,26,37,.88); color:var(--muted); font-size:.88rem; }
.trust strong { display:block; color:white; font-size:1.05rem; }
section { padding:84px 0; }
.section-kicker { margin-bottom:12px; color:#91fff5; font-size:.8rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
h2 { max-width:680px; margin-bottom:16px; font-size:clamp(2rem,3.7vw,3.25rem); line-height:1.08; letter-spacing:-.046em; }
.section-intro { max-width:690px; color:var(--muted); font-size:1.05rem; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:35px; }
.card { min-height:188px; padding:22px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); }
.icon { display:grid; place-items:center; width:43px; height:43px; margin-bottom:19px; border-radius:13px; background:rgba(120,82,237,.2); color:#dacfff; font-size:1.36rem; }
.card:nth-child(2) .icon,.card:nth-child(5) .icon { background:rgba(32,211,199,.15); color:#8afff4; }
.card:nth-child(3) .icon,.card:nth-child(6) .icon { background:rgba(255,157,17,.15); color:#ffcf72; }
.card h3 { margin-bottom:7px; font-size:1.03rem; }
.card p { margin:0; color:var(--muted); font-size:.92rem; }
.use-case-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:35px; }
.use-case { padding:25px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.02)); }
.use-case h3 { margin-bottom:10px; color:#f7f5ff; font-size:1.11rem; }
.use-case p { margin:0; color:var(--muted); font-size:.95rem; }
.showcase { display:grid; grid-template-columns:.95fr 1.05fr; align-items:center; gap:42px; padding:36px; border:1px solid var(--line); border-radius:26px; background:linear-gradient(125deg,rgba(120,82,237,.18),rgba(24,26,37,.92) 50%,rgba(32,211,199,.1)); }
.showcase-image { display:grid; aspect-ratio:1914 / 923; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:17px; background:#181a25; box-shadow:0 18px 50px rgba(0,0,0,.36); }
.showcase-image img { display:block; width:100%; height:100%; object-fit:contain; }
.check-list { margin:25px 0 0; padding:0; list-style:none; }
.check-list li { display:flex; gap:10px; margin:11px 0; color:#dfe1ea; }
.check-list li::before { content:"✓"; display:grid; flex:0 0 22px; height:22px; place-items:center; border-radius:50%; color:#07110f; background:var(--aqua); font-weight:900; font-size:.76rem; }
.how { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:33px; }
.step { position:relative; padding:24px 21px; border-top:2px solid var(--orange); background:rgba(255,255,255,.035); }
.step-number { color:#ffc65d; font-size:.78rem; font-weight:800; letter-spacing:.1em; }
.step h3 { margin:8px 0; font-size:1.08rem; }
.step p { margin:0; color:var(--muted); font-size:.92rem; }
.faq { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; margin-top:33px; }
details { padding:17px 18px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.03); }
summary { cursor:pointer; font-weight:730; }
details p { margin:12px 0 0; color:var(--muted); font-size:.93rem; }
.cta { text-align:center; padding:68px 26px; border:1px solid rgba(255,157,17,.35); border-radius:25px; background:radial-gradient(circle at 50% 0,rgba(255,157,17,.21),transparent 55%),#181a25; }
.cta h2,.cta p { margin-left:auto; margin-right:auto; }
.cta p { max-width:610px; color:var(--muted); }
.store-badge { display:inline-block; margin-top:22px; }
.store-badge img { width:212px; max-width:100%; height:auto; }
footer { padding:31px 0 39px; color:#8c91a5; font-size:.86rem; }
.footer-row { display:flex; justify-content:space-between; gap:17px; align-items:center; border-top:1px solid var(--line); padding-top:25px; }
.footer-row nav { display:flex; gap:17px; flex-wrap:wrap; }
.footer-action { padding:0; border:0; color:inherit; background:none; cursor:pointer; font:inherit; text-decoration:underline; text-underline-offset:3px; }
.footer-action:focus-visible,.modal-close:focus-visible { outline:3px solid var(--aqua); outline-offset:3px; border-radius:5px; }
.legal-modal { width:min(720px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:22px; color:var(--text); background:linear-gradient(145deg,rgba(35,38,55,.99),rgba(16,17,26,.99)); box-shadow:0 28px 100px rgba(0,0,0,.58); }
.legal-modal::backdrop { background:rgba(4,5,11,.74); backdrop-filter:blur(8px); }
.legal-content { max-height:calc(100dvh - 32px); overflow:auto; padding:27px; }
.legal-head { display:flex; gap:18px; align-items:flex-start; justify-content:space-between; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.legal-head h2 { margin:0; font-size:clamp(1.65rem,4vw,2.35rem); }
.modal-close { display:grid; flex:0 0 38px; width:38px; height:38px; place-items:center; border:1px solid var(--line); border-radius:11px; color:var(--text); background:rgba(255,255,255,.06); cursor:pointer; font-size:1.35rem; line-height:1; }
.legal-section { margin:20px 0; padding:0; }
.legal-section h3 { margin-bottom:7px; font-size:1rem; }
.legal-section p,.legal-section address { margin:0; color:var(--muted); font-size:.92rem; font-style:normal; }
.legal-section a { color:#9cfdf4; }
.legal-section .legal-meta { color:#aeb4c8; font-size:.82rem; }
.legal-section .legal-meta strong { color:var(--text); }
.legal-section code { padding:1px 5px; border-radius:5px; color:#dce0ef; background:rgba(255,255,255,.07); }
.legal-intro { margin:0 0 25px; padding:15px 16px; border:1px solid rgba(69,221,211,.26); border-radius:13px; color:#dce0ef; background:rgba(69,221,211,.07); font-size:.93rem; line-height:1.6; }
.legal-section ul { margin:10px 0 0; padding-left:20px; color:var(--muted); font-size:.92rem; }
.legal-section li { margin:6px 0; }
.legal-updated { margin:26px 0 0; padding-top:14px; border-top:1px solid var(--line); color:#8c91a5; font-size:.78rem; }
.privacy-loading { color:var(--muted); }
.privacy-policy { color:var(--muted); font-size:.92rem; }
.privacy-policy h3 { margin:28px 0 9px; color:var(--text); font-size:1.12rem; }
.privacy-policy p { margin:0 0 13px; }
.privacy-policy ul { margin:0 0 15px; padding-left:20px; }
.privacy-policy li { margin:7px 0; }
.privacy-policy table { width:100%; margin:14px 0 18px; border-collapse:collapse; overflow:hidden; border:1px solid var(--line); border-radius:12px; font-size:.86rem; }
.privacy-policy th,.privacy-policy td { padding:11px 12px; border:1px solid var(--line); text-align:left; vertical-align:top; }
.privacy-policy th { color:var(--text); background:rgba(255,255,255,.065); }
.privacy-policy a { color:#9cfdf4; }
@media (max-width:850px) { .nav-links { display:none; } .hero { padding-top:56px; } .hero-grid,.showcase { grid-template-columns:1fr; } .hero-visual { min-height:350px; order:-1; } .feature-grid { grid-template-columns:repeat(2,1fr); } .how { grid-template-columns:1fr; } .showcase { padding:25px; } }
@media (max-width:530px) { .shell { width:min(100% - 28px,var(--max)); } .nav { height:66px; } .hero-visual { min-height:280px; } .device { inset:30px 3px 9px 22px; border-radius:17px; } .orb.one { width:132px; height:132px; } .orb.two { width:100px; height:100px; } .orb.three { width:90px; height:90px; } .trust-row,.feature-grid,.use-case-grid,.faq { grid-template-columns:1fr; } section { padding:61px 0; } h1 { font-size:2.58rem; } .footer-row { align-items:flex-start; flex-direction:column; } .legal-content { padding:21px; } }