:root { --paper:#f6f5f0; --paper-bright:#fbfaf7; --ink:#0a0c10; --muted:#666b74; --line:rgba(10,12,16,.14); --blue:#0867f8; --white:#fff; --max:1160px; --sans:Inter,"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --serif:"Iowan Old Style",Baskerville,"Times New Roman",serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); text-rendering:optimizeLegibility; } a { color:inherit; text-decoration:none; } img { display:block; }
.site-header { position:relative; z-index:30; width:min(calc(100% - 36px),1340px); height:68px; display:flex; align-items:center; justify-content:space-between; margin:18px auto 0; padding:0 14px 0 18px; background:rgba(251,250,247,.88); border:1px solid var(--line); border-radius:8px; box-shadow:0 14px 34px rgba(22,24,29,.06); backdrop-filter:blur(18px); }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:24px; font-weight:780; }.brand img { width:38px; height:38px; border-radius:7px; box-shadow:0 6px 15px rgba(0,0,0,.12); }.nav-links { display:flex; align-items:center; gap:20px; font-size:14px; font-weight:620; white-space:nowrap; }.nav-links > a:not(.nav-download) { color:#34373e; }.nav-links > a:not(.nav-download):hover,.nav-links > a[aria-current="page"] { color:var(--blue); }.nav-language { position:relative; display:inline-flex; align-items:center; gap:6px; height:38px; flex:0 0 auto; padding:0 27px 0 11px; color:#34373e; border:1px solid rgba(10,12,16,.12); border-radius:8px; background:rgba(255,255,255,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.8); cursor:pointer; transition:color .16s ease,border-color .16s ease,background .16s ease; }.nav-language::after { position:absolute; right:11px; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; content:""; transform:translateY(-2px) rotate(45deg); pointer-events:none; }.nav-language svg { width:16px; height:16px; flex:0 0 auto; }.nav-language select { width:88px; height:36px; padding:0; overflow:hidden; color:inherit; border:0; outline:0; background:transparent; appearance:none; font:inherit; font-weight:650; line-height:1; text-overflow:ellipsis; cursor:pointer; }.nav-language:hover { color:var(--blue); border-color:rgba(8,103,248,.28); background:#fff; }.nav-language:focus-within { color:var(--blue); outline:2px solid var(--blue); outline-offset:2px; }.nav-download { flex:0 0 auto; padding:14px 19px; color:white; background:var(--ink); border-radius:6px; transition:transform 180ms ease,background 180ms ease; }.nav-download:hover { transform:translateY(-2px); background:var(--blue); }.menu-button { display:none; width:42px; height:42px; padding:0; border:0; background:none; }.menu-button span { display:block; width:20px; height:2px; margin:5px auto; background:var(--ink); }
main { width:min(calc(100% - 48px),var(--max)); margin:auto; }.hero { max-width:840px; padding:96px 0 34px; }.eyebrow { margin:0 0 17px; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.16em; }.hero h1,.usage h2,.topups h2 { margin:0; font-size:clamp(50px,7vw,92px); line-height:.93; letter-spacing:-.055em; }.hero h1 em,.usage h2 em { font-family:var(--serif); font-weight:400; }.hero-copy { max-width:620px; margin:30px 0 0; color:var(--muted); font-size:18px; line-height:1.6; }.pricing-controls { display:flex; justify-content:center; margin:0 auto 42px; }.billing-tabs { display:inline-flex; align-items:center; gap:3px; padding:4px; border:1px solid rgba(10,12,16,.12); border-radius:10px; background:rgba(255,255,255,.58); box-shadow:inset 0 1px 0 rgba(255,255,255,.82); }.billing-tabs button { display:flex; align-items:center; gap:8px; min-height:34px; border:0; padding:0 11px; color:#656a73; background:transparent; border-radius:7px; font:700 13px var(--sans); cursor:pointer; transition:color .16s ease, background .16s ease, box-shadow .16s ease; }.billing-tabs button[aria-selected="true"] { color:var(--ink); background:#fff; box-shadow:0 1px 5px rgba(10,12,16,.13); }.billing-tabs button:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }.billing-tabs small { padding:3px 6px; color:#0757d5; background:#e4efff; border-radius:4px; font-size:10px; font-weight:800; letter-spacing:.01em; }.billing-tabs button:not([aria-selected="true"]) small { display:none; }
.plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:820px; margin:0 auto; align-items:stretch; }.plan { position:relative; display:flex; flex-direction:column; min-height:560px; padding:30px; background:rgba(255,255,255,.48); border:1px solid var(--line); border-radius:12px; }.plan.pro { color:white; background:var(--ink); border-color:var(--ink); box-shadow:0 25px 56px rgba(10,12,16,.2); }.recommendation { position:absolute; top:18px; right:18px; padding:6px 8px; color:var(--ink); background:#b6d2ff; border-radius:4px; font-size:9px; font-weight:820; letter-spacing:.1em; }.plan-label { margin:0; color:var(--blue); font-size:12px; font-weight:780; letter-spacing:.08em; text-transform:uppercase; }.pro .plan-label { color:#8eb8ff; }.plan h2 { margin:15px 0 26px; font-size:28px; letter-spacing:-.035em; }.price { display:flex; align-items:baseline; gap:8px; margin:0; }.price strong { font-size:44px; letter-spacing:-.06em; }.price span { color:var(--muted); font-size:13px; font-weight:650; }.pro .price span { color:#aab1bc; }.price-note { min-height:19px; margin:6px 0 0; color:var(--muted); font-size:12px; font-weight:620; }.pro .price-note { color:#aab1bc; }.credits { min-height:69px; margin:24px 0 25px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:15px; font-weight:650; }.credits strong { font-size:24px; }.credits small { display:block; margin-top:5px; color:var(--muted); font-size:12px; font-weight:500; }.pro .credits { border-color:#2c313a; }.pro .credits small { color:#aab1bc; }.plan ul { display:grid; gap:13px; margin:0; padding:0; list-style:none; color:#464b54; font-size:14px; line-height:1.35; }.plan li { padding-left:19px; position:relative; }.plan li::before { position:absolute; left:0; content:"✓"; color:var(--blue); font-weight:800; }.pro ul { color:#d4d8de; }.button { min-height:48px; display:flex; align-items:center; justify-content:center; margin-top:auto; padding:0 15px; border:1px solid var(--line); border-radius:6px; font-size:14px; font-weight:720; }.button.primary { color:var(--ink); border-color:#c5dcff; background:#c5dcff; }.button.secondary:hover { color:white; border-color:var(--blue); background:var(--blue); }
.topups { display:grid; grid-template-columns:1fr 1.4fr; gap:36px; align-items:center; margin:104px 0; padding:42px; color:white; background:var(--blue); border-radius:12px; }.topups .eyebrow { color:#d6e6ff; }.topups h2 { font-size:clamp(34px,4vw,54px); }.topup-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.topup-options span { display:grid; gap:5px; padding:16px; color:#14233a; background:#f3f7ff; border-radius:7px; }.topup-options strong { font-size:24px; }.topup-options b { font-size:14px; }.topup-note { grid-column:1/-1; margin:0; color:#dbe9ff; font-size:13px; }
.usage { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start; padding:30px 0 112px; }.usage h2 { font-size:clamp(42px,5vw,66px); }.usage-list { border-top:1px solid var(--line); }.usage-list p { display:grid; grid-template-columns:160px 1fr; gap:20px; margin:0; padding:21px 0; border-bottom:1px solid var(--line); }.usage-list strong { font-size:15px; }.usage-list span { color:var(--muted); font-size:14px; line-height:1.45; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:96px; }.principles article { min-height:235px; padding:24px; background:#ebeae5; border-radius:10px; }.principles span { color:var(--blue); font-size:12px; font-weight:800; }.principles h2 { margin:45px 0 12px; font-size:20px; letter-spacing:-.025em; }.principles p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
footer { width:min(calc(100% - 48px),var(--max)); display:flex; align-items:center; gap:22px; margin:auto; padding:24px 0 38px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; } footer .brand { color:var(--ink); font-size:18px; } footer .brand img { width:28px; height:28px; } footer p { margin:0 auto 0 0; }
@media (max-width:1120px) { .site-header { width:calc(100% - 20px); height:60px; margin-top:10px; }.brand { font-size:21px; }.brand img { width:34px; height:34px; }.menu-button { display:block; }.nav-links { position:absolute; top:66px; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:10px; white-space:normal; background:var(--paper-bright); border:1px solid var(--line); border-radius:8px; box-shadow:0 18px 36px rgba(10,12,16,.12); }.nav-links.is-open { display:flex; }.nav-links a { padding:14px; }.nav-language { width:calc(100% - 8px); margin:5px 4px; }.nav-language select { width:100%; }.nav-download { margin-top:5px; text-align:center; }.plans,.principles { grid-template-columns:1fr; }.plan { min-height:auto; }.topups,.usage { grid-template-columns:1fr; }.topups { padding:28px; margin:64px 0; }.usage { gap:38px; padding-bottom:64px; }.principles { margin-bottom:64px; }.principles article { min-height:auto; }.principles h2 { margin-top:28px; }.hero { padding-top:78px; } }
@media (max-width:600px) { main { width:calc(100% - 32px); }.hero h1 { font-size:50px; }.hero-copy { font-size:16px; }.pricing-controls { margin-bottom:28px; }.topup-options { grid-template-columns:1fr; }.usage-list p { grid-template-columns:1fr; gap:7px; }.topups { gap:24px; } footer { flex-wrap:wrap; gap:12px; } footer p { width:100%; order:3; } }