:root { --ink:#172033; --muted:#667085; --blue:#2767d6; --purple:#7246dc; --line:#e8edf5; --paper:#fff; --background:#f7f9fc; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--background); font:16px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; } a { color:inherit; } .wrap { width:min(1120px,calc(100% - 40px)); margin:auto; }
.site-header { position:relative; z-index:2; background:rgba(255,255,255,.84); border-bottom:1px solid rgba(227,234,245,.8); backdrop-filter:blur(16px); } .header-inner { width:min(1120px,calc(100% - 40px)); min-height:72px; margin:auto; display:flex; gap:20px; align-items:center; justify-content:space-between; } .brand { display:flex; gap:9px; align-items:center; color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:-.03em; } .app-icon { width:28px; height:28px; border-radius:8px; box-shadow:0 3px 8px rgba(33,65,113,.18); }.header-actions { display:flex; align-items:center; gap:24px; }.nav { display:flex; gap:22px; align-items:center; color:#536075; font-size:.94rem; }.nav a { text-decoration:none; }.nav a:hover { color:var(--blue); }.language-switcher { display:flex; padding:3px; border:1px solid #dbe3f1; border-radius:10px; background:#f3f6fb; }.language-switcher button { min-width:34px; padding:5px 7px; border:0; border-radius:7px; color:#69758a; background:transparent; font:800 .72rem/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:.05em; cursor:pointer; }.language-switcher button.active { color:#fff; background:#2c65cf; box-shadow:0 2px 5px rgba(35,79,160,.25); }
.hero { overflow:hidden; position:relative; color:#fff; background:radial-gradient(circle at 73% 25%,#7c65ef 0,transparent 29%),radial-gradient(circle at 18% 86%,#0b91c4 0,transparent 34%),linear-gradient(135deg,#183f8c,#315fc8 55%,#6536be); }.hero:before { content:""; position:absolute; inset:0; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,black,transparent); }.hero-grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; min-height:610px; align-items:center; gap:32px; }.hero-copy { padding:70px 0; }.eyebrow { margin:0 0 16px; color:#a7dfff; font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }.hero h1 { margin:0; max-width:680px; font-size:clamp(2.7rem,6vw,4.8rem); line-height:1.02; letter-spacing:-.065em; }.hero p:not(.eyebrow) { margin:24px 0 0; max-width:570px; color:#dce9ff; font-size:1.14rem; }.store-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }.store-badge { display:block; width:188px; height:63px; padding:0; border-radius:9px; overflow:hidden; background:#111; transition:transform .18s ease,box-shadow .18s ease; }.store-badge:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(4,20,67,.28); }.store-badge img { display:block; width:100%; height:100%; object-fit:contain; }
.hero-visual { position:relative; align-self:end; height:550px; }.phone { position:absolute; bottom:-125px; width:242px; padding:8px; border:8px solid #111824; border-radius:34px; background:#111824; box-shadow:0 38px 80px rgba(6,20,66,.42); transform:rotate(7deg); }.phone img { display:block; width:100%; border-radius:23px; }.phone.back { left:35px; bottom:-106px; opacity:.62; transform:rotate(-9deg) scale(.86); filter:blur(.2px); }.phone.front { right:40px; z-index:1; }.phone-glow { position:absolute; right:0; bottom:50px; width:330px; height:330px; border-radius:50%; background:#92d8ff; opacity:.22; filter:blur(45px); }
.section { padding:96px 0; }.section.tint { background:#eff4ff; }.section-head { max-width:650px; margin-bottom:42px; }.section-head .eyebrow { color:var(--blue); }.section h2 { margin:0; font-size:clamp(2rem,4vw,3.1rem); line-height:1.08; letter-spacing:-.05em; }.section-lead { margin:17px 0 0; color:var(--muted); font-size:1.08rem; }.features { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.feature { padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--paper); }.feature-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:18px; border-radius:13px; color:#fff; font-weight:800; background:linear-gradient(135deg,#2e72e4,#7142d1); }.feature h3 { margin:0 0 9px; font-size:1.12rem; }.feature p { margin:0; color:var(--muted); font-size:.96rem; }
.intro { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(220px,.7fr); gap:34px; align-items:center; }.intro-copy { font-size:1.11rem; color:#4e5b70; }.intro-copy p { margin:0 0 18px; }.intro-note { padding:30px; border-radius:22px; color:#f7fbff; background:linear-gradient(145deg,#2455ae,#552fa9); box-shadow:0 20px 40px rgba(45,67,132,.2); }.intro-note strong { display:block; margin-bottom:10px; font-size:1.2rem; }.intro-note p { margin:0; color:#dbe9ff; }.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }.feature-line { display:flex; gap:14px; padding:20px; border:1px solid var(--line); border-radius:17px; background:#fff; }.feature-line b { flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; border-radius:10px; color:#fff; background:#3d6fd4; font-size:.78rem; }.feature-line div { color:var(--muted); font-size:.92rem; }.feature-line strong { display:block; margin-bottom:3px; color:var(--ink); font-size:1rem; }.audience { display:grid; grid-template-columns:1.05fr .95fr; overflow:hidden; border-radius:26px; background:#fff; border:1px solid var(--line); }.audience-copy { padding:48px; }.audience-copy h2 { margin:0 0 16px; }.audience-copy p { color:var(--muted); }.audience-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:38px; align-content:center; color:#fff; background:linear-gradient(145deg,#214a9c,#7443c7); }.audience-list span { padding:14px; border:1px solid rgba(255,255,255,.22); border-radius:13px; background:rgba(255,255,255,.08); font-size:.93rem; }
.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }.shot { min-width:0; overflow:hidden; border:7px solid #172033; border-radius:22px; background:#172033; box-shadow:0 16px 40px rgba(19,45,91,.15); }.shot img { display:block; width:100%; height:auto; transition:transform .35s ease; }.shot:hover img { transform:scale(1.035); }.gallery-caption { margin:20px 0 0; color:var(--muted); font-size:.92rem; }
.notice { display:grid; grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr); gap:50px; align-items:start; padding:42px 48px; border:1px solid var(--line); border-radius:26px; background:#fff; }.notice .eyebrow { color:var(--blue); }.notice h2 { margin:0; }.notice ul { display:grid; gap:15px; margin:0; padding:0; list-style:none; color:#4e5b70; }.notice li { position:relative; padding-left:27px; }.notice li:before { content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg,#2e72e4,#7142d1); }
.download { display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; padding:48px; border-radius:28px; color:#fff; background:linear-gradient(135deg,#263b76,#673bc7); }.download .eyebrow { color:#b4e6ff; }.download h2 { max-width:590px; }.download .store-row { margin-top:24px; }.download-mark { display:grid; place-items:center; width:130px; height:130px; padding:13px; border:1px solid rgba(255,255,255,.24); border-radius:38px; background:rgba(255,255,255,.1); transform:rotate(-7deg); }.download-mark img { display:block; width:100%; height:100%; border-radius:27px; }
footer { color:#59657a; background:#fff; border-top:1px solid var(--line); }.footer-inner { width:min(1120px,calc(100% - 40px)); margin:auto; padding:38px 0; display:grid; grid-template-columns:1fr auto auto; gap:24px; align-items:center; font-size:.92rem; }.footer-title { color:var(--ink); font-weight:800; }.footer-links { display:flex; gap:17px; flex-wrap:wrap; }.footer-links a { color:#536075; text-decoration:none; }.footer-links a:hover { color:var(--blue); }
/* Legal documents */ main:has(.document) { width:min(100% - 40px,820px); margin:auto; padding:56px 0 72px; }.document { padding:48px; background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 30px rgba(31,45,70,.05); }.document h1 { margin:0 0 16px; font-size:clamp(2rem,6vw,3rem); line-height:1.13; letter-spacing:-.03em; }.document h2 { margin:42px 0 12px; font-size:1.35rem; line-height:1.25; letter-spacing:normal; }.document h3 { margin:28px 0 8px; font-size:1.08rem; }.document p,.document ul { margin:0 0 18px; }.document ul { padding-left:24px; }.meta { color:var(--muted); font-size:.95rem; }
@media (max-width:850px) { .hero-grid { grid-template-columns:1fr; min-height:auto; }.hero-copy { padding:70px 0 20px; }.hero-visual { height:390px; width:min(430px,100%); justify-self:center; }.phone { width:190px; }.phone.front { right:25px; }.features,.intro,.audience,.notice { grid-template-columns:1fr; }.feature-grid { grid-template-columns:1fr; }.audience-copy { padding-bottom:28px; }.audience-list { padding:28px; }.gallery { grid-template-columns:repeat(2,1fr); }.notice { gap:24px; }.download { grid-template-columns:1fr; }.download-mark { display:none; } }
@media (max-width:600px) { .wrap,.header-inner,.footer-inner,main:has(.document) { width:min(100% - 28px,1120px); }.header-inner { min-height:62px; }.header-actions { gap:12px; }.nav { gap:13px; font-size:.82rem; }.nav a:nth-child(2) { display:none; }.hero h1 { font-size:2.75rem; }.hero p:not(.eyebrow) { font-size:1rem; }.store-row { gap:10px; }.store-badge { width:138px; height:46px; }.hero-visual { height:330px; }.phone { width:155px; border-width:6px; border-radius:28px; }.phone img { border-radius:18px; }.phone.front { right:8px; }.phone.back { left:8px; }.section { padding:67px 0; }.gallery { display:flex; overflow:auto; margin-right:-14px; padding-right:14px; scroll-snap-type:x mandatory; }.shot { flex:0 0 180px; scroll-snap-align:start; }.notice { padding:30px 24px; border-radius:20px; }.download { padding:30px 24px; border-radius:20px; }.document { padding:28px 22px; }.footer-inner { grid-template-columns:1fr; gap:13px; } }