:root {
  color-scheme: dark;
  --bg: #07101d;
  --surface: rgba(15, 28, 47, .72);
  --line: rgba(177, 202, 234, .13);
  --text: #f2f6fc;
  --muted: #a2b1c7;
  --blue: #82dcff;
  --violet: #8c91ff;
  --font-en: "DM Sans", system-ui, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden; position: relative;
  background: radial-gradient(ellipse at 50% -25%, #172c4a 0%, var(--bg) 53%);
  color: var(--text); font-family: var(--font-en); -webkit-font-smoothing: antialiased;
}
body[dir="rtl"] { font-family: var(--font-ar); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.ambient { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(95px); opacity: .19; }
.ambient-one { width: 340px; height: 340px; top: 210px; right: -130px; background: #4259ff; }
.ambient-two { width: 300px; height: 300px; top: 680px; left: -160px; background: #00b8d9; opacity: .10; }
.site-header { max-width: 1180px; margin: 0 auto; padding: 26px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { display: inline-flex; width: 42px; height: 42px; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name { font-size: 23px; font-weight: 700; letter-spacing: -.9px; }
.brand-name span { color: #8bdcff; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: #c3d0e1; font-size: 12px; letter-spacing: .2px; background: rgba(11, 23, 39, .56); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #7fe2bd; box-shadow: 0 0 12px #7fe2bd; }
.language-toggle { color: #dbe7f8; background: transparent; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; cursor: pointer; transition: background .2s, border-color .2s; }
.language-toggle:hover { background: rgba(255,255,255,.06); border-color: rgba(177,202,234,.35); }
main { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.hero { min-height: 590px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 36px; padding: 52px 0 84px; }
.hero-copy { max-width: 600px; position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 11px; color: #9eacc3; text-transform: uppercase; font-size: 11px; letter-spacing: 2px; margin-bottom: 26px; font-weight: 600; }
.eyebrow-line { width: 27px; height: 1px; background: linear-gradient(90deg, #86e1ff, #8e8fff); }
h1 { font-size: clamp(42px, 5vw, 65px); line-height: 1.07; letter-spacing: -2.7px; margin: 0; max-width: 630px; font-weight: 600; }
.gradient-text { background: linear-gradient(100deg, #a2eaff 0%, #91aaff 48%, #b4a0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-description { max-width: 525px; margin: 25px 0 29px; color: var(--muted); line-height: 1.85; font-size: 16px; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.primary-button { display: inline-flex; align-items: center; gap: 20px; padding: 14px 17px 14px 20px; border-radius: 12px; color: #07111f; background: linear-gradient(105deg, #a0e8ff, #a6b0ff); font-size: 14px; font-weight: 700; box-shadow: 0 9px 28px rgba(102, 169, 255, .14); transition: transform .2s, box-shadow .2s; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(102, 169, 255, .24); }
.button-arrow { font-size: 18px; }
.small-note { font-size: 11px; color: #73849c; }
.visual-wrap { min-height: 430px; position: relative; display: grid; place-items: center; isolation: isolate; }
.visual-glow { position: absolute; width: 270px; height: 270px; border-radius: 50%; background: linear-gradient(135deg, rgba(62, 178, 255, .2), rgba(116, 86, 255, .2)); filter: blur(55px); }
.orbit { position: absolute; border: 1px solid rgba(145, 183, 231, .15); border-radius: 50%; transform: rotate(-22deg); }
.orbit-outer { width: 390px; height: 250px; }
.orbit-inner { width: 310px; height: 200px; transform: rotate(45deg); border-color: rgba(145, 183, 231, .10); }
.main-symbol { width: 206px; height: 206px; border-radius: 58px; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; background: linear-gradient(145deg, rgba(43, 71, 108, .95), rgba(20, 32, 63, .98)); border: 1px solid rgba(197, 222, 255, .32); box-shadow: 0 30px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.16); transform: rotate(-7deg); }
.main-symbol::before { content: ""; position: absolute; inset: 10px; border-radius: 48px; border: 1px solid rgba(255,255,255,.07); }
.symbol-shine { position: absolute; width: 120px; height: 80px; top: 0; left: 10px; background: rgba(125, 215, 255, .18); filter: blur(28px); border-radius: 50%; }
.main-symbol svg { width: 103px; height: 103px; filter: drop-shadow(0 6px 15px rgba(0,0,0,.15)); }
.symbol-caption { margin-top: -5px; font-family: var(--font-ar); font-size: 22px; color: #9ce7ff; transform: rotate(7deg); }
.floating-chip { display: flex; align-items: center; gap: 9px; position: absolute; padding: 12px 15px; border: 1px solid rgba(191, 215, 247, .16); border-radius: 13px; background: rgba(10, 22, 39, .8); box-shadow: 0 12px 35px rgba(0,0,0,.18); backdrop-filter: blur(14px); color: #d8e3f4; font-size: 11px; white-space: nowrap; }
.chip-top { top: 64px; right: 0; }
.chip-bottom { bottom: 64px; left: -3px; }
.chip-icon { color: #8be5ff; font-size: 17px; }
.tiny-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: rgba(109, 235, 190, .15); color: #8de9c1; font-size: 12px; }
.visual-label { position: absolute; bottom: 13px; display: flex; align-items: center; gap: 10px; color: #71849e; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; }
.label-line { width: 22px; height: 1px; background: #50617b; }
.principles { border-top: 1px solid var(--line); padding: 77px 0 88px; }
.section-heading { max-width: 670px; margin-bottom: 34px; }
.section-kicker { font-size: 10px; color: #8ba4c5; letter-spacing: 2px; font-weight: 700; }
.section-heading h2, .closing-content h2 { margin: 15px 0 13px; font-size: clamp(30px, 3.4vw, 43px); letter-spacing: -1.4px; line-height: 1.15; font-weight: 600; }
.section-heading p, .closing-content p { margin: 0; color: var(--muted); line-height: 1.85; font-size: 14px; max-width: 640px; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.principle-card { min-height: 225px; position: relative; overflow: hidden; padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(18, 34, 56, .7), rgba(10, 21, 37, .62)); }
.card-number { position: absolute; top: 23px; right: 23px; color: #60738e; font-size: 11px; }
.card-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; font-size: 22px; margin-bottom: 25px; }
.icon-clarity { color: #9de8ff; background: rgba(86, 193, 244, .12); }
.icon-care { color: #b4a7ff; background: rgba(145, 125, 255, .13); }
.icon-progress { color: #92e7c8; background: rgba(104, 223, 177, .11); }
.principle-card h3 { margin: 0 0 9px; font-size: 16px; }
.principle-card p { margin: 0; color: #92a2b9; line-height: 1.75; font-size: 12px; max-width: 280px; }
.closing-panel { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 42px 45px; margin-bottom: 35px; border-radius: 22px; border: 1px solid rgba(160, 190, 235, .17); background: linear-gradient(115deg, rgba(21, 42, 69, .84), rgba(22, 27, 57, .78)); }
.closing-orb { position: absolute; width: 250px; height: 250px; right: 15%; top: -190px; border-radius: 50%; background: #566bff; filter: blur(95px); opacity: .25; }
.closing-content { position: relative; z-index: 1; }
.closing-content h2 { font-size: clamp(28px, 3vw, 37px); margin-top: 12px; }
.closing-content p { font-size: 13px; }
.closing-wordmark { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #91dfff; min-width: 130px; }
.closing-wordmark span { font-family: var(--font-ar); font-size: 27px; }
.closing-wordmark i { font-style: normal; color: #e7effc; font-size: 17px; font-weight: 700; letter-spacing: -.4px; }
.site-footer { max-width: 1180px; margin: 0 auto; padding: 20px 32px 28px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #73849c; font-size: 11px; }
.footer-brand { display: flex; align-items: center; gap: 8px; color: #cbd8e9; font-size: 13px; font-weight: 700; }
.footer-mark { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; color: #07111f; background: linear-gradient(135deg, #9de9ff, #9da9ff); }
.site-footer p { margin: 0; }
.copyright { white-space: nowrap; }
[dir="rtl"] .site-header { direction: rtl; }
[dir="rtl"] .header-actions { flex-direction: row-reverse; }
[dir="rtl"] .eyebrow { letter-spacing: 0; }
[dir="rtl"] h1, [dir="rtl"] .section-heading h2, [dir="rtl"] .closing-content h2 { letter-spacing: 0; line-height: 1.35; }
[dir="rtl"] .hero-copy, [dir="rtl"] .section-heading, [dir="rtl"] .closing-content { text-align: right; }
[dir="rtl"] .hero-actions { align-items: flex-start; }
[dir="rtl"] .primary-button { flex-direction: row-reverse; }
[dir="rtl"] .chip-top { right: auto; left: 0; }
[dir="rtl"] .chip-bottom { left: auto; right: -3px; }
[dir="rtl"] .card-number { right: auto; left: 23px; }
[dir="rtl"] .closing-panel { flex-direction: row-reverse; }
[dir="rtl"] .site-footer { direction: rtl; }
[dir="rtl"] .footer-brand { flex-direction: row-reverse; }
@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; gap: 8px; padding-top: 45px; }
  .hero-copy { max-width: 700px; }
  .visual-wrap { min-height: 390px; }
  .principle-grid { gap: 11px; }
  .principle-card { padding: 20px; }
  .closing-panel { padding: 35px 30px; }
}
@media (max-width: 600px) {
  .site-header { padding: 19px 20px; }
  main { padding: 0 20px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-name { font-size: 21px; }
  .header-actions { gap: 8px; }
  .status-pill { padding: 7px 9px; font-size: 10px; }
  .language-toggle { padding: 8px 10px; font-size: 12px; }
  .hero { padding: 52px 0 58px; }
  h1 { font-size: clamp(40px, 12vw, 54px); letter-spacing: -1.8px; }
  .hero-description { font-size: 14px; margin-top: 20px; }
  .visual-wrap { min-height: 345px; }
  .orbit-outer { width: 310px; height: 205px; }
  .orbit-inner { width: 245px; height: 165px; }
  .main-symbol { width: 165px; height: 165px; border-radius: 48px; }
  .main-symbol svg { width: 85px; height: 85px; }
  .symbol-caption { font-size: 18px; }
  .chip-top { top: 38px; right: -4px; }
  .chip-bottom { bottom: 44px; left: -3px; }
  .floating-chip { font-size: 10px; padding: 10px 11px; }
  .visual-label { bottom: 1px; font-size: 9px; }
  .principles { padding: 57px 0; }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-card { min-height: 180px; }
  .card-icon { margin-bottom: 17px; }
  .closing-panel { flex-direction: column; align-items: flex-start; padding: 30px 25px; }
  .closing-wordmark { flex-direction: row; min-width: 0; gap: 10px; }
  [dir="rtl"] .closing-panel { flex-direction: column; align-items: stretch; }
  [dir="rtl"] .closing-wordmark { align-self: flex-start; }
  .site-footer { padding: 20px; flex-wrap: wrap; }
  .site-footer p { order: 3; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }