@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink: #f5f7ff; --muted: #a9b4cb; --navy: #071329; --line: rgba(255,255,255,.13); --cyan: #71e4ff; --coral: #ff9e91; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--navy); font-family: 'DM Sans', sans-serif; }
a { color: inherit; text-decoration: none; }
.shell { width: min(1180px, calc(100% - 48px)); margin: auto; }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 92px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 10px; align-items: center; font: 700 1.25rem 'Space Grotesk', sans-serif; letter-spacing: -.04em; }
.brand-mark { display: grid; width: 30px; height: 30px; place-items: center; color: var(--navy); background: var(--cyan); border-radius: 10px 10px 10px 2px; }
.nav-actions, .language-switcher, .hero-actions, .trust-row { display: flex; align-items: center; }
.nav-actions { gap: 30px; }
.language-switcher { gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; }
.language { border: 0; padding: 6px 9px; color: var(--muted); background: transparent; border-radius: 999px; font: 600 .7rem 'DM Sans', sans-serif; cursor: pointer; }
.language.is-active { color: var(--navy); background: var(--ink); }
.nav-link { color: var(--muted); font-size: .84rem; }
.hero { display: grid; grid-template-columns: .92fr 1.08fr; min-height: 620px; align-items: center; gap: 24px; }
.hero-copy { position: relative; z-index: 1; padding: 72px 0; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; color: var(--cyan); font-size: .73rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pulse { width: 8px; height: 8px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 0 6px rgba(113,228,255,.12); }
.pulse-coral { background: var(--coral); box-shadow: 0 0 0 6px rgba(255,158,145,.12); }
h1, h2 { margin: 0; font-family: 'Space Grotesk', sans-serif; letter-spacing: -.065em; line-height: .98; }
h1 { max-width: 610px; font-size: clamp(3.4rem, 7vw, 6.4rem); }
h1 em, h2 em { color: var(--cyan); font-style: normal; }
.lede { max-width: 470px; margin: 29px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.hero-actions { gap: 27px; margin-top: 37px; }
.button { display: inline-flex; align-items: center; gap: 16px; padding: 14px 19px; border-radius: 6px; font-size: .84rem; font-weight: 700; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--navy); background: var(--cyan); }
.button-light { color: var(--navy); background: var(--ink); }
.text-link { color: var(--muted); font-size: .82rem; }
.trust-row { gap: 24px; margin-top: 78px; color: var(--muted); font-size: .73rem; }
.trust-row span { display: inline-flex; gap: 8px; align-items: center; }
.trust-row strong, .card-number { color: var(--cyan); font-size: .68rem; letter-spacing: .1em; }
.hero-art { min-height: 510px; background: url('hero.png') center/cover no-repeat; mask-image: linear-gradient(90deg, transparent 0%, black 13%, black 100%); }
.value-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 14px; padding: 44px 0 110px; }
.value-card { min-height: 265px; padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.035); }
.value-card-highlight { background: linear-gradient(145deg, rgba(113,228,255,.17), rgba(255,255,255,.035)); }
.card-icon { display: block; color: var(--coral); font-size: 2rem; line-height: 1; }
.value-card h2 { margin: 49px 0 14px; font-size: 1.55rem; letter-spacing: -.05em; }
.value-card p { max-width: 250px; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.join { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 70px 8%; border-radius: 10px; background: linear-gradient(115deg, #10254a, #19204b 60%, #492b62); }
.join h2 { font-size: clamp(2.5rem, 5vw, 4.6rem); }
.footer { display: flex; justify-content: space-between; padding: 28px 0; color: var(--muted); font-size: .75rem; }
html[dir='rtl'] .hero-copy, html[dir='rtl'] .value-card, html[dir='rtl'] .join { text-align: right; }
html[dir='rtl'] .hero-art { transform: scaleX(-1); }
html[dir='rtl'] .hero-actions, html[dir='rtl'] .trust-row { flex-direction: row-reverse; }
@media (max-width: 820px) { .shell { width: min(100% - 32px, 620px); } .nav-link { display: none; } .hero { display: block; min-height: auto; } .hero-copy { padding: 78px 0 18px; } .hero-art { min-height: 320px; mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 100%); } .value-grid { grid-template-columns: 1fr; padding-bottom: 70px; } .value-card { min-height: 210px; } .value-card h2 { margin-top: 35px; } .join { display: block; padding: 42px 28px; } .join .button { margin-top: 30px; } }
@media (max-width: 460px) { h1 { font-size: 3.1rem; } .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; } .trust-row { align-items: flex-start; flex-direction: column; gap: 9px; margin-top: 48px; } .footer { flex-direction: column; gap: 8px; } }