:root { --red:#0794d2; --red-bright:#22b7f2; --ink:#090a0c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:#fff; font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.site-shell { min-height:100vh; overflow:hidden; background:#090a0c; }
.topbar { position:fixed; z-index:50; inset:0 0 auto; height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,76px); background:rgba(9,10,12,.78); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; }
.brand img { display:block; width:174px; height:auto; }
.nav-links { display:flex; align-items:center; gap:clamp(24px,3vw,48px); color:#d6d7da; font-size:14px; }
.nav-links a { transition:color .2s; }.nav-links a:hover { color:#fff; }
.header-actions { display:flex; align-items:center; gap:22px; }
.language-switch { display:flex; gap:5px; align-items:center; color:#686b72; font-size:12px; font-weight:800; }
.language-switch button { border:0; background:none; color:#72757c; padding:7px 2px; cursor:pointer; }.language-switch button.active { color:#fff; }
.phone-pill { display:flex; gap:8px; align-items:center; border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:10px 15px; font-size:13px; font-weight:700; }
.menu-button { display:none; color:white; background:transparent; border:0; cursor:pointer; }
.hero { position:relative; min-height:820px; height:100vh; display:grid; align-items:center; padding:112px clamp(24px,8vw,126px) 60px; isolation:isolate; background:#090a0c; }
.hero-grid { position:absolute; inset:0; z-index:-3; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(90deg,black,transparent 82%); }
.hero::before { content:""; position:absolute; z-index:0; inset:0; background:linear-gradient(90deg,#090a0c 0%,rgba(9,10,12,.91) 43%,rgba(9,10,12,.13) 77%,rgba(9,10,12,.35) 100%); }
.hero-image { position:absolute; z-index:-2; inset:82px 0 0 31%; background:url('dorjet-ev-hero.png') center right/cover no-repeat; opacity:.92; }
.hero::after { content:""; position:absolute; z-index:1; right:-18vw; bottom:-40vw; width:80vw; height:80vw; border:1px solid rgba(7,148,210,.12); border-radius:50%; box-shadow:0 0 90px rgba(7,148,210,.08); pointer-events:none; }
.hero-copy { position:relative; z-index:3; max-width:720px; }
.eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 24px; color:#d5d5d7; font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }.eyebrow span { width:34px; height:2px; background:var(--red); }
h1 { margin:0; max-width:680px; font-size:clamp(58px,6.4vw,104px); line-height:.96; letter-spacing:-.055em; font-weight:800; text-wrap:balance; }
.hero-lead { max-width:600px; margin:30px 0 0; color:#b9bbc0; font-size:clamp(17px,1.35vw,21px); line-height:1.65; }
.hero-actions { display:flex; gap:13px; margin-top:36px; flex-wrap:wrap; }
.button { min-height:54px; padding:0 23px; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-size:14px; font-weight:800; border:1px solid transparent; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-2px); }.button.primary { background:var(--red); box-shadow:0 16px 40px rgba(7,148,210,.22); }.button.primary:hover { background:var(--red-bright); }.button.secondary { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.04); }
.quick-contact { margin-top:42px; display:flex; align-items:center; gap:13px; }.contact-icon { display:grid; place-items:center; width:39px; height:39px; border:1px solid rgba(255,255,255,.15); border-radius:50%; color:var(--red-bright); }.quick-contact div { display:flex; flex-direction:column; gap:3px; }.quick-contact small { color:#777a80; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.quick-contact a { font-size:16px; font-weight:800; letter-spacing:.04em; }
.hero-visual { position:absolute; z-index:4; right:4vw; bottom:11vh; width:min(36vw,520px); height:min(60vh,560px); pointer-events:none; }
.floating-chip { position:absolute; min-width:145px; padding:15px 18px; background:rgba(15,17,21,.82); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(16px); box-shadow:0 18px 42px rgba(0,0,0,.4); }.floating-chip span { display:block; color:var(--red-bright); font-size:11px; font-weight:900; letter-spacing:.18em; }.floating-chip strong { font-size:29px; letter-spacing:-.04em; }.floating-chip small { margin-left:5px; color:#92949a; font-size:9px; }.chip-ac { left:0; top:12%; }.chip-dc { right:0; bottom:8%; }
.energy-orbit { position:absolute; z-index:2; border-radius:50%; border:1px solid rgba(255,255,255,.06); pointer-events:none; }.orbit-one { width:460px; height:460px; right:7%; top:21%; }.orbit-two { width:620px; height:620px; right:1%; top:11%; border-color:rgba(7,148,210,.08); }
.scroll-cue { position:absolute; z-index:5; left:50%; bottom:28px; display:flex; flex-direction:column; align-items:center; gap:6px; color:#a0a2a8; font-size:9px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.pricing-section { padding:110px clamp(24px,8vw,126px); background:#f3f2ef; color:#111216; display:grid; grid-template-columns:1fr 1.15fr; gap:8vw; align-items:center; }
.section-kicker { margin:0 0 17px; color:var(--red); font-size:11px; font-weight:900; letter-spacing:.19em; }.section-heading h2 { margin:0; font-size:clamp(38px,4vw,62px); line-height:1; letter-spacing:-.045em; }.section-heading>p:last-child { color:#6f7074; font-size:17px; margin:22px 0 0; }
.price-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.price-card { min-height:250px; padding:26px; display:flex; flex-direction:column; justify-content:space-between; background:#fff; border:1px solid #deddd9; box-shadow:0 16px 40px rgba(20,20,20,.05); }.dc-card { background:#121317; color:#fff; border-color:#121317; }.price-icon { width:46px; height:46px; display:grid; place-items:center; background:#eee; color:#18191c; }.dc-card .price-icon { background:var(--red); color:white; }.price-card p { margin:0 0 10px; color:#6e7075; font-weight:700; }.dc-card p { color:#a3a5aa; }.price-card strong { font-size:52px; letter-spacing:-.06em; }.price-card span { margin-left:8px; color:#73757a; font-size:10px; font-weight:800; text-transform:uppercase; }
.app-section { position:relative; min-height:720px; padding:100px clamp(24px,9vw,145px); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8vw; background:radial-gradient(circle at 27% 48%,rgba(7,148,210,.14),transparent 28%),#0d0e11; }
.phone-stage { position:relative; min-height:520px; display:grid; place-items:center; }.phone-halo { position:absolute; width:440px; height:440px; border-radius:50%; border:1px solid rgba(7,148,210,.18); box-shadow:0 0 90px rgba(7,148,210,.12),inset 0 0 70px rgba(7,148,210,.06); }.phone-halo::before,.phone-halo::after { content:""; position:absolute; inset:35px; border-radius:50%; border:1px solid rgba(255,255,255,.06); }.phone-halo::after { inset:85px; border-color:rgba(7,148,210,.12); }
.phone-frame { position:relative; z-index:2; width:258px; height:515px; padding:9px; background:linear-gradient(145deg,#444851,#111318 30%,#383c44); border-radius:43px; box-shadow:0 34px 70px rgba(0,0,0,.58); transform:rotate(-4deg); }.phone-island { position:absolute; z-index:3; top:17px; left:50%; transform:translateX(-50%); width:76px; height:20px; border-radius:20px; background:#030405; }.phone-screen { height:100%; padding:52px 20px 22px; border-radius:35px; overflow:hidden; background:radial-gradient(circle at 80% 20%,rgba(7,148,210,.16),transparent 29%),linear-gradient(160deg,#181a20,#08090b 70%); }.mini-brand { display:flex; align-items:center; height:22px; }.mini-brand img { display:block; width:105px; height:auto; }.phone-screen>p { margin:50px 0 18px; color:#8f9299; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.mini-rate { margin-bottom:10px; padding:14px; display:grid; grid-template-columns:1fr auto; align-items:end; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); }.mini-rate span { grid-row:1/3; align-self:center; width:36px; height:36px; display:grid; place-items:center; color:#d7d8dc; background:#282b31; font-size:10px; font-weight:900; }.mini-rate strong { font-size:25px; line-height:1; }.mini-rate small { color:#777a81; font-size:8px; text-align:right; }.mini-rate.accent { border-color:rgba(7,148,210,.35); }.mini-rate.accent span { background:var(--red); color:white; }.mini-support { margin-top:55px; padding:13px; display:flex; align-items:center; gap:9px; border-top:1px solid rgba(255,255,255,.08); color:#a9abb0; font-size:10px; }.mini-support svg { color:var(--red); }
.app-copy { max-width:610px; }.app-copy h2 { margin:0; font-size:clamp(42px,4.7vw,70px); line-height:.98; letter-spacing:-.05em; }.app-copy>p:not(.section-kicker) { max-width:570px; margin:27px 0 0; color:#a8abb1; font-size:18px; line-height:1.7; }.store-buttons { display:flex; gap:12px; margin-top:38px; flex-wrap:wrap; }.store-buttons>a { min-width:190px; min-height:64px; padding:10px 18px; display:flex; align-items:center; gap:12px; border:1px solid rgba(255,255,255,.16); background:#16181c; transition:border-color .2s,transform .2s; }.store-buttons>a:hover { border-color:var(--red); transform:translateY(-2px); }.store-buttons svg { width:28px; height:28px; }.store-buttons span { display:flex; flex-direction:column; gap:2px; }.store-buttons small { color:#8f9298; font-size:9px; }.store-buttons strong { font-size:17px; }
.store-buttons .store-symbol { width:28px; display:block; color:var(--red-bright); font-size:23px; line-height:1; text-align:center; }
.support-section { padding:85px clamp(24px,9vw,145px); display:flex; justify-content:space-between; align-items:center; gap:40px; background:linear-gradient(105deg,#0794d2,#036b9d); }.support-section h2 { margin:0; max-width:720px; font-size:clamp(38px,4.2vw,64px); line-height:1; letter-spacing:-.045em; }.support-section .section-kicker { color:#fff; opacity:.72; }.support-section>div>p:last-child { max-width:660px; margin:20px 0 0; color:rgba(255,255,255,.78); font-size:16px; line-height:1.6; }.support-call { min-width:300px; padding:20px 24px; display:flex; align-items:center; gap:16px; background:#fff; color:#121317; box-shadow:0 18px 40px rgba(0,58,86,.22); }.support-call>span { width:48px; height:48px; display:grid; place-items:center; background:#16171b; color:#fff; }.support-call>div { display:flex; flex-direction:column; gap:3px; }.support-call small { color:#777980; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }.support-call strong { font-size:18px; }
footer { min-height:120px; padding:28px clamp(24px,5vw,76px); display:flex; justify-content:space-between; align-items:center; gap:25px; border-top:1px solid #292a2e; color:#8c8e94; font-size:12px; }footer>p { margin:0; }footer>a:last-child { color:#fff; font-size:14px; font-weight:800; }.footer-brand img { width:142px; }
@media(max-width:960px) { .nav-links { position:fixed; inset:82px 0 auto; padding:26px; background:#0c0d10; flex-direction:column; align-items:flex-start; transform:translateY(-150%); transition:.25s; }.nav-links.open { transform:translateY(0); }.menu-button { display:block; }.phone-pill { display:none; }.hero { height:auto; min-height:860px; align-items:start; padding-top:165px; }.hero-copy { max-width:620px; }.hero-image { inset:82px -12% 0 15%; opacity:.65; }.hero-visual { opacity:.8; right:-2%; bottom:2%; transform:scale(.8); }.pricing-section { grid-template-columns:1fr; gap:50px; }.app-section { grid-template-columns:1fr; gap:50px; padding-top:80px; }.phone-stage { order:2; }.app-copy { text-align:center; margin:auto; }.app-copy .section-kicker { text-align:center; }.store-buttons { justify-content:center; }.support-section { align-items:flex-start; flex-direction:column; }.support-call { min-width:0; } }
@media(max-width:620px) { .topbar { height:70px; padding:0 20px; }.brand img { width:138px; }.header-actions { gap:12px; }.nav-links { inset:70px 0 auto; }.hero { padding:130px 20px 55px; min-height:790px; }.hero-copy { z-index:5; } h1 { font-size:55px; }.hero-lead { font-size:16px; }.hero-image { inset:70px -48% 0 2%; opacity:.43; }.hero-visual { right:-110px; bottom:-35px; transform:scale(.6); transform-origin:bottom right; }.quick-contact { margin-top:30px; }.scroll-cue { display:none; }.pricing-section { padding:80px 20px; }.price-grid { grid-template-columns:1fr; }.price-card { min-height:210px; }.app-section { padding:75px 20px; }.phone-stage { min-height:500px; transform:scale(.88); margin:-20px 0; }.store-buttons { flex-direction:column; }.store-buttons>a { justify-content:center; }.support-section { padding:70px 20px; }.support-call { width:100%; }.support-call strong { font-size:16px; } footer { flex-direction:column; text-align:center; padding:38px 20px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button { transition:none; } }