:root {
  color-scheme: light;
  --ink: #243243;
  --muted: #79838e;
  --font: "Manrope", "Noto Sans Arabic", sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: #f2f4f6; }
body { margin: 0; color: var(--ink); background: radial-gradient(ellipse at 50% 0, #e3edf3 0, #f2f4f6 630px); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 12px; left: 12px; padding: 12px 18px; z-index: 10; border-radius: 8px; background: white; outline: 3px solid #2168ef; }
.page { width: min(100%, 680px); margin-inline: auto; padding: 0 30px; }
.header { display: flex; align-items: center; justify-content: center; padding: 28px 0 24px; }
.language-switch { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid #dce3e9; border-radius: 30px; background: #e7edf1; }
.language-button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 15px; border-radius: 24px; color: #6d7b88; font-size: 11px; font-weight: 600; }
.language-button img { width: 21px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px #0000000a; }
.language-button.is-active { color: var(--ink); background: white; box-shadow: 0 1px 5px #18344c0b; }
.profile { text-align: center; padding-bottom: 30px; }
.brand { display: inline-grid; place-items: center; width: 98px; height: 98px; border-radius: 50%; background: white; border: 1px solid #dce5ec; box-shadow: 0 8px 30px #17354f08; }
.brand img { display: block; width: 72px; height: 72px; object-fit: contain; }
.profile h1 { margin: 16px 0 7px; color: #20374d; font-size: 27px; font-weight: 800; line-height: 1.4; letter-spacing: -.9px; }
.profile p { margin: 0; color: #748291; font: 400 13px/1.8 "DM Sans", "Noto Sans Arabic", sans-serif; }
.links-panel { min-width: 0; }
.social-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.whatsapp-link, .social-card, .website-link { position: relative; width: 100%; min-height: 78px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: 14px; padding: 14px 18px; border: 1px solid #00000005; border-radius: 16px; text-align: center; box-shadow: 0 3px 10px #233a4f06; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.whatsapp-link:hover, .social-card:hover, .website-link:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 6px 18px #233a4f13; }
.social-card-top { display: contents; }
.social-icon, .whatsapp-icon, .website-icon { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #ffffff21; color: currentColor; }
.social-icon svg, .website-icon svg { width: 24px; height: 24px; fill: currentColor; }
.card-arrow, .whatsapp-arrow, .website-arrow { grid-column: 3; grid-row: 1 / 3; justify-self: center; font-size: 21px; font-weight: 400; color: currentColor; opacity: .7; }
.social-card > strong { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 700; line-height: 1.5; }
.card-description { grid-column: 2; grid-row: 2; margin-top: 3px; font: 400 11px/1.5 "DM Sans", "Noto Sans Arabic", sans-serif; color: currentColor; opacity: .85; overflow-wrap: anywhere; }
.whatsapp-copy, .website-link > span:nth-child(2) { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.whatsapp-copy strong, .website-link strong { font-size: 15px; font-weight: 700; line-height: 1.5; }
.whatsapp-copy > span, .website-domain { color: currentColor; opacity: .85; font: 400 11px/1.5 "DM Sans", "Noto Sans Arabic", sans-serif; overflow-wrap: anywhere; }
.whatsapp-link { color: white; background: #15865a; }
.whatsapp-icon svg { width: 27px; height: 27px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.instagram { color: white; background: linear-gradient(110deg, #6935bc 0%, #ae2778 53%, #c64b3a 100%); }
.instagram svg { stroke: currentColor; stroke-width: 1.8; fill: none; }
.instagram .fill-dot { fill: currentColor; stroke: none; }
.tiktok { color: white; background: #1b1d24; }
.tiktok .social-icon svg { filter: drop-shadow(-1px 0 0 #2be2da) drop-shadow(1px .5px 0 #ff628a); }
.youtube { color: white; background: #d92b33; }
.youtube .play { fill: #d92b33; }
.facebook { color: white; background: #1769d6; }
.facebook .social-icon svg { width: 28px; height: 28px; }
.messenger { color: white; background: linear-gradient(110deg, #3467d3, #7950c6); }
.messenger-bolt { fill: #624dcc; }
.telegram { color: white; background: #147ba6; }
.email { color: #fff; border-color: #44355f; background: #44355f; }
.email .card-description { opacity: 1; }
.email .social-icon { background: #ffffff21; }
.email .social-icon svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.website-link { margin-top: 12px; color: white; background: #27476b; }
.website-icon svg { fill: none; stroke: currentColor; stroke-width: 1.2; }
.footer { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 27px 0 30px; color: #8a96a1; font: 400 10px/1.6 "DM Sans", "Noto Sans Arabic", sans-serif; text-align: center; }
.footer-separator { margin-inline: 6px; color: #b2bcc4; }
.footer a { display: flex; align-items: center; gap: 5px; color: #758897; }
.footer a:hover { color: #215a87; }
.footer svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.5; fill: none; }
a:focus-visible { outline: 3px solid #2168ef; outline-offset: 4px; }
html[dir="rtl"] { --font: "Noto Sans Arabic", "Manrope", sans-serif; }
html[dir="rtl"] .profile h1 { letter-spacing: 0; font-weight: 700; }
html[dir="rtl"] .card-arrow, html[dir="rtl"] .whatsapp-arrow, html[dir="rtl"] .website-arrow { transform: scaleX(-1); }
@media (max-width: 600px) {
  .page { padding-inline: 20px; }
  .header { padding: 20px 0 21px; }
  .profile { padding-bottom: 25px; }
  .brand { width: 88px; height: 88px; }
  .brand img { width: 65px; height: 65px; }
  .profile h1 { margin-top: 12px; font-size: 25px; }
  .profile p { font-size: 12px; }
  .whatsapp-link, .social-card, .website-link { min-height: 77px; grid-template-columns: 39px minmax(0, 1fr) 19px; padding: 13px 14px; column-gap: 10px; border-radius: 14px; }
  .social-icon, .whatsapp-icon, .website-icon { width: 39px; height: 39px; border-radius: 10px; }
  .social-card > strong, .whatsapp-copy strong, .website-link strong { font-size: 14px; }
  .card-description, .whatsapp-copy > span, .website-domain { font-size: 10px; }
  .social-grid { gap: 11px; margin-top: 11px; }
  .website-link { margin-top: 11px; }
}
@media (max-width: 359px) { .page { padding-inline: 14px; }.whatsapp-link, .social-card, .website-link { column-gap: 7px; padding-inline: 11px; }.card-description, .whatsapp-copy > span, .website-domain { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }