:root { --ink:#11110f; --coal:#1b1b17; --paper:#e9e5dc; --muted:#aaa69d; --gold:#c7a66a; --line:rgba(233,229,220,.17); --serif:"Noto Serif SC", Georgia, serif; --sans:"Outfit", sans-serif; --mono:"DM Mono", monospace; }
* { box-sizing:border-box; } [hidden] { display:none !important; } html { scroll-behavior:smooth; } body { margin:0; background:var(--ink); color:var(--paper); font-family:var(--sans); line-height:1.5; overflow-x:hidden; } body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 70% -10%,rgba(199,166,106,.15),transparent 26rem),radial-gradient(circle at 5% 35%,rgba(255,255,255,.045),transparent 22rem); } .grain { position:fixed; inset:0; z-index:5; opacity:.13; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.site-header { width:min(1180px,100%); margin:auto; padding:22px 22px 0; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10; } .wordmark { text-decoration:none; color:var(--paper); display:flex; align-items:center; gap:9px; letter-spacing:.04em; } .wordmark span { font-family:var(--serif); font-size:23px; font-weight:900; } .wordmark i { width:1px; height:27px; background:var(--gold); } .wordmark small { font-family:var(--mono); font-size:8px; line-height:1.35; text-transform:uppercase; color:var(--muted); } .language-select { border:1px solid var(--line); color:var(--paper); background:rgba(17,17,15,.75); border-radius:100px; font:500 12px var(--mono); padding:9px 27px 9px 13px; cursor:pointer; }
main { width:min(1180px,100%); margin:auto; padding:0 22px 44px; } .hero { position:relative; text-align:center; max-width:720px; margin:0 auto; padding:68px 0 105px; overflow:visible; } .profile-photo { position:relative; margin:0 auto 24px; display:grid; place-items:center; width:100px; aspect-ratio:1; border-radius:50%; background:linear-gradient(140deg,#6e6558,#2b2924 50%,#c7a66a); padding:2px; box-shadow:0 0 0 10px rgba(199,166,106,.06),0 22px 50px rgba(0,0,0,.35); } .profile-photo::before { content:""; position:absolute; inset:4px; border:1px solid rgba(255,255,255,.25); border-radius:inherit; } .profile-photo span { font:900 32px var(--serif); z-index:1; color:#f9f1df; } .eyebrow { color:var(--gold); font:500 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; margin:0 0 10px; } h1,h2 { font-family:var(--serif); letter-spacing:-.04em; line-height:1.13; margin:0; } h1 { font-size:clamp(40px,9vw,72px); } h2 { font-size:clamp(27px,4.5vw,43px); } .hero-role { margin:9px 0 18px; color:#d1cec5; font-size:15px; } .hero-statement { margin:0 auto 22px; max-width:460px; color:var(--muted); font-size:15px; } .trust-list { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin-bottom:27px; } .trust-tag { border:1px solid var(--line); border-radius:100px; color:#d8d4cc; font:10px var(--mono); padding:6px 9px; } .hero-actions,.contact-actions { display:flex; justify-content:center; align-items:center; gap:9px; flex-wrap:wrap; } .button { min-height:46px; border-radius:2px; display:inline-flex; align-items:center; justify-content:center; gap:13px; padding:11px 16px; font:500 12px var(--sans); text-decoration:none; cursor:pointer; transition:transform .2s,background .2s,border-color .2s; } .button:hover { transform:translateY(-2px); } .button-gold { border:1px solid var(--gold); background:var(--gold); color:#1c1914; } .button-quiet { border:1px solid var(--line); background:rgba(255,255,255,.025); color:var(--paper); } .response-note { margin:19px 0 0; font:10px var(--mono); color:var(--muted); } .pulse { display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:#8ea67b; box-shadow:0 0 0 4px rgba(142,166,123,.12); }
.hero-orbit { pointer-events:none; position:absolute; border:1px solid rgba(199,166,106,.14); border-radius:50%; } .orbit-one { width:390px; height:390px; top:-34px; left:50%; transform:translateX(-50%); border-left-color:transparent; border-bottom-color:transparent; } .orbit-two { width:535px; height:535px; top:-104px; left:50%; transform:translateX(-50%); border-right-color:transparent; border-top-color:transparent; }
.section { border-top:1px solid var(--line); padding:55px 0; } .section-number { color:var(--gold); font:10px var(--mono); margin-bottom:26px; } .intro { max-width:820px; } .section-copy { max-width:680px; color:#c4c0b7; font-size:16px; margin:16px 0 26px; } .company-facts { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); } .fact { padding:18px; min-height:92px; border-right:1px solid var(--line); } .fact:last-child { border:0; } .fact b { display:block; color:var(--gold); font:600 21px var(--serif); } .fact span { color:var(--muted); font-size:11px; } .section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; } .line-mark { color:var(--gold); font:60px var(--serif); line-height:.7; } .section-sidecopy { max-width:240px; margin:0 0 5px; color:var(--muted); font-size:13px; } .process-list { list-style:none; padding:0; margin:29px 0 0; counter-reset:process; } .process-list li { counter-increment:process; display:grid; grid-template-columns:34px 1fr; gap:17px; padding:17px 0; border-top:1px solid var(--line); } .process-list li::before { content:"0" counter(process); color:var(--gold); font:10px var(--mono); padding-top:4px; } .process-list b { display:block; font-size:15px; margin-bottom:3px; } .process-list p { margin:0; color:var(--muted); font-size:13px; }
.vehicle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:29px; } .vehicle-card { min-width:0; background:var(--coal); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; } .vehicle-visual { position:relative; aspect-ratio:1.36; background:#2a2925; overflow:hidden; } .vehicle-visual img { width:100%; height:100%; object-fit:cover; filter:saturate(.7) contrast(1.05); transition:transform .6s; } .vehicle-card:hover img { transform:scale(1.05); } .vehicle-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(16,16,14,.72)); pointer-events:none; } .stock { position:absolute; z-index:1; top:12px; left:12px; border:1px solid rgba(255,255,255,.25); background:rgba(17,17,15,.58); backdrop-filter:blur(8px); padding:5px 7px; color:var(--paper); font:9px var(--mono); } .vehicle-content { padding:18px; display:flex; flex-direction:column; flex:1; } .vehicle-content h3 { margin:0 0 11px; font:600 19px var(--serif); line-height:1.2; } .specs { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:17px; } .spec { color:#bdb8ad; font:9px var(--mono); padding-right:6px; border-right:1px solid var(--line); } .spec:last-child { border:0; } .features { list-style:none; margin:0 0 19px; padding:0; color:var(--muted); font-size:12px; line-height:1.75; } .features li::before { content:"—"; color:var(--gold); padding-right:6px; } .vehicle-button { margin-top:auto; width:100%; }
.contact-card { position:relative; overflow:hidden; margin-top:15px; padding:54px 22px; text-align:center; background:linear-gradient(130deg,#24221d,#171714 55%,#2d2921); border:1px solid rgba(199,166,106,.35); } .contact-card::before { content:""; position:absolute; width:320px; height:320px; top:-230px; left:-80px; border:1px solid rgba(199,166,106,.19); border-radius:50%; } .contact-card h2 { max-width:570px; margin:0 auto 12px; } .contact-card > p:not(.eyebrow) { max-width:540px; margin:0 auto 25px; color:#bdb8ad; font-size:14px; } .contact-rule { width:32px; height:1px; margin:0 auto 22px; background:var(--gold); } footer { position:relative; z-index:1; width:min(1180px,100%); margin:auto; padding:17px 22px 27px; display:flex; justify-content:space-between; gap:8px; color:#817d74; font:9px var(--mono); text-transform:uppercase; letter-spacing:.04em; } .footer-dot { color:var(--gold); }
.qr-modal { width:min(440px,calc(100vw - 32px)); border:1px solid rgba(199,166,106,.45); color:var(--paper); background:#1b1b17; padding:0; box-shadow:0 22px 70px #000; } .qr-modal::backdrop { background:rgba(0,0,0,.76); backdrop-filter:blur(4px); } .qr-modal-content { text-align:center; padding:43px 31px 32px; } .qr-modal-content h2 { font-size:29px; } .qr-modal-content p:not(.eyebrow) { color:var(--muted); font-size:13px; margin:11px auto 19px; max-width:310px; } .qr-image { display:block; width:188px; aspect-ratio:1; margin:0 auto 13px; background:#fff; image-rendering:pixelated; } .qr-modal small { display:block; color:#8f8b82; font:10px var(--mono); margin-bottom:19px; } .modal-close { position:absolute; top:10px; right:12px; background:none; color:var(--paper); border:0; cursor:pointer; font-size:28px; line-height:1; } .modal-close:focus-visible,.button:focus-visible,.language-select:focus-visible { outline:2px solid #f6d891; outline-offset:3px; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[dir="rtl"] .wordmark,.language-wrap { direction:ltr; } [dir="rtl"] .process-list li { grid-template-columns:1fr 34px; } [dir="rtl"] .process-list li::before { grid-column:2; } [dir="rtl"] .process-list li > div { grid-column:1; grid-row:1; } [dir="rtl"] .fact { border-right:0; border-left:1px solid var(--line); } [dir="rtl"] .fact:last-child { border:0; }
.reveal { animation:rise .7s both; } .hero.reveal { animation-delay:.05s; } .intro.reveal { animation-delay:.1s; } @keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@media(max-width:700px) { .hero { padding:55px 0 72px; } .orbit-one { width:320px;height:320px;top:-30px; } .orbit-two { width:420px;height:420px;top:-80px; } .section { padding:42px 0; } .vehicle-grid { grid-template-columns:1fr; } .vehicle-card { display:grid; grid-template-columns:42% 58%; } .vehicle-visual { aspect-ratio:auto; height:100%; } .vehicle-content { padding:14px; } .vehicle-content h3 { font-size:18px; } .features { display:none; } .vehicle-button { min-height:39px; font-size:11px; } .contact-card { margin:5px -8px 0; padding:42px 17px; } }
@media(max-width:390px) { .site-header,main { padding-left:16px;padding-right:16px; } .wordmark small { display:none; } .company-facts { grid-template-columns:1fr; } .fact { min-height:auto;border-right:0;border-bottom:1px solid var(--line); } .fact:last-child { border-bottom:0; } .section-heading { display:block; } .line-mark,.section-sidecopy { display:none; } footer { padding-left:16px;padding-right:16px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }