:root {
  color-scheme: dark;
  --orange: #ff6a00;
  --blue: #1e3a5f;
  --bg: #0d0f13;
  --panel: rgba(17, 20, 25, 0.88);
  --panel-strong: rgba(19, 22, 28, 0.95);
  --text: #f7f7f7;
  --muted: #a9b0ba;
  --line: rgba(255, 255, 255, 0.105);
  --radius: 28px;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
  --bg-opacity: .44;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}
body.intro-open { overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
a, button, input { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.svg-icon { width: 21px; height: 21px; display: inline-grid; place-items: center; }
.svg-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Intro: logo + start only */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #090b0f;
  transition: opacity .55s ease, visibility .55s ease;
}
.intro.is-leaving { opacity: 0; visibility: hidden; }
.intro__ambient {
  position: absolute;
  inset: -7%;
  background:
    linear-gradient(180deg, rgba(4,6,9,.42), rgba(4,6,9,.7)),
    url("./assets/background-v17.webp") center / cover no-repeat;
  opacity: .72;
  transform: scale(1.05);
}
.intro__ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 43%, rgba(255,106,0,.15), transparent 26%),
    radial-gradient(circle at 50% 55%, rgba(30,58,95,.13), transparent 42%),
    linear-gradient(90deg, rgba(5,7,10,.6), transparent 30%, transparent 70%, rgba(5,7,10,.6));
}
.intro__content {
  position: relative;
  z-index: 1;
  width: min(430px, calc(100% - 34px));
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 31px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(13,15,19,.84));
  box-shadow: 0 38px 110px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(24px);
}
.intro__content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(130deg, rgba(255,106,0,.13), transparent 24%, transparent 74%, rgba(30,58,95,.12));
}
.intro__logo {
  direction: ltr;
  font-family: "Tajawal", sans-serif;
  font-size: clamp(62px, 13vw, 94px);
  font-weight: 900;
  letter-spacing: -8px;
  line-height: .88;
  transform: skewX(-8deg);
  filter: drop-shadow(0 20px 35px rgba(0,0,0,.4));
}
.intro__logo span { color: var(--orange); text-shadow: 0 0 35px rgba(255,106,0,.28); }
.intro__logo b { color: #f4f5f7; }
.intro__start {
  position: relative;
  z-index: 1;
  min-width: 190px;
  min-height: 56px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, var(--orange), #d84a00);
  box-shadow: 0 16px 34px rgba(255,106,0,.24), inset 0 1px 0 rgba(255,255,255,.18);
  font-family: "Tajawal", sans-serif;
  font-size: 19px;
  font-weight: 900;
  transition: filter .18s ease, box-shadow .18s ease;
}
.intro__start:hover { filter: brightness(1.08); box-shadow: 0 20px 42px rgba(255,106,0,.32), inset 0 1px 0 rgba(255,255,255,.2); }
.intro__start:active { filter: brightness(.96); }

/* Always-visible background with JS enhancement */
.background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #090b0f;
}
.background__image {
  position: absolute;
  inset: -3%;
  background-image: url("./assets/background-v17.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: var(--bg-opacity);
  filter: saturate(.86) contrast(1.08) brightness(.83);
  transform: scale(1.045);
  transition: opacity .25s ease;
}
.background__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 15%, rgba(255,106,0,.09), transparent 29%),
    radial-gradient(circle at 84% 75%, rgba(30,58,95,.18), transparent 34%),
    linear-gradient(90deg, rgba(7,9,12,.72), rgba(7,9,12,.38) 48%, rgba(7,9,12,.68));
}
.background__grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  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: 58px 58px;
  mask-image: radial-gradient(circle at center, black, transparent 84%);
}
.background__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,106,0,.1), rgba(30,58,95,.055) 38%, transparent 72%);
  filter: blur(18px);
  transform: translate(-50%, -50%);
  opacity: .7;
}
#backgroundCanvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }

.site-header {
  position: relative;
  z-index: 5;
  width: min(1180px, calc(100% - 34px));
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 2px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; }
.brand__mark { direction: ltr; font-family: "Tajawal", sans-serif; font-size: 38px; font-weight: 900; letter-spacing: -3px; transform: skewX(-8deg); }
.brand__mark i { color: var(--orange); font-style: italic; text-shadow: 0 0 24px rgba(255,106,0,.24); }
.brand__mark b { color: #f3f4f6; }
.brand__subtitle { margin-top: 7px; color: #b4bbc5; font-size: 8px; font-weight: 700; letter-spacing: 4px; direction: ltr; }
.site-header__actions { display: flex; gap: 9px; }
.round-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: #f6f7f8;
  background: rgba(17,20,25,.73);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  backdrop-filter: blur(16px);
  transition: border-color .18s ease, background .18s ease;
}
.round-button:hover { border-color: rgba(255,106,0,.46); background: rgba(255,106,0,.09); }
.round-button.is-playing { color: var(--orange); border-color: rgba(255,106,0,.38); }

.layout {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 34px));
  min-height: calc(100dvh - 84px);
  margin: 0 auto;
  padding: 18px 0 max(28px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(330px, .82fr) minmax(510px, 1.18fr);
  gap: 18px;
  align-items: start;
}
.surface {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), transparent 28%),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(25px) saturate(1.1);
}
.profile-card {
  min-height: calc(100dvh - 118px);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.profile-card__line {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--orange) 35%, #f7f7f7 50%, var(--blue) 68%, transparent);
  opacity: .65;
}
.avatar-wrap { position: relative; width: min(252px, 62vw); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 22px; }
.avatar-wrap__ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 30%, rgba(255,106,0,.9) 34%, transparent 38% 67%, rgba(74,137,203,.8) 71%, transparent 75%);
  -webkit-mask: radial-gradient(circle, transparent 68%, black 69% 72%, transparent 73%);
  mask: radial-gradient(circle, transparent 68%, black 69% 72%, transparent 73%);
  animation: ring-spin 17s linear infinite;
}
.avatar-wrap__photo {
  width: 82%;
  height: 82%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.17);
  border-radius: 50%;
  background: #11151a;
  box-shadow: 0 24px 55px rgba(0,0,0,.46), 0 0 0 7px rgba(255,106,0,.035), 0 0 42px rgba(255,106,0,.11);
}
.avatar-wrap__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.avatar-wrap__online {
  position: absolute;
  right: 13%;
  bottom: 15%;
  width: 19px;
  height: 19px;
  border: 4px solid #15181d;
  border-radius: 50%;
  background: #34e68a;
  box-shadow: 0 0 16px rgba(52,230,138,.66);
}
.profile-copy { width: 100%; }
.availability {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(52,230,138,.16);
  border-radius: 999px;
  color: #9cf2be;
  background: rgba(52,230,138,.055);
  font-size: 12px;
}
.availability i { width: 7px; height: 7px; border-radius: 50%; background: #34e68a; box-shadow: 0 0 9px #34e68a; }
.profile-name { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 13px; }
.profile-name h1 { margin: 0; font-family: "Tajawal", sans-serif; font-size: clamp(31px, 4vw, 42px); font-weight: 900; letter-spacing: -.8px; }
.verified { position: relative; width: 21px; height: 21px; flex: 0 0 auto; background: #2e8cff; clip-path: polygon(50% 0,61% 8%,74% 6%,82% 17%,94% 22%,94% 36%,100% 50%,92% 61%,94% 74%,82% 82%,76% 94%,62% 93%,50% 100%,39% 92%,25% 94%,18% 82%,6% 76%,7% 61%,0 50%,8% 38%,6% 24%,19% 17%,24% 6%,39% 8%); }
.verified::after { content: ""; position: absolute; left: 6px; top: 7px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.profile-handle { margin: 3px 0 0; color: var(--orange); font-weight: 800; direction: ltr; }
.profile-role { margin: 13px 0 0; color: #eceef1; font-size: 17px; font-weight: 700; }
.profile-bio { max-width: 390px; margin: 9px auto 0; color: var(--muted); line-height: 1.85; font-size: 14px; }
.profile-tags { margin-top: 18px; display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; direction: ltr; }
.profile-tags span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; color: #b2b9c3; background: rgba(255,255,255,.03); font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.stats { width: 100%; display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 26px; }
.stat { padding: 14px 8px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.03); }
.stat strong { display: block; font-family: "Tajawal", sans-serif; font-size: 21px; direction: ltr; }
.stat span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }

.content-card { padding: 24px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; margin-bottom: 17px; }
.section-heading p { margin: 0 0 3px; color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: 2.4px; direction: ltr; }
.section-heading h2, .section-heading h3 { margin: 0; font-family: "Tajawal", sans-serif; font-weight: 900; }
.section-heading h2 { font-size: clamp(24px,3vw,32px); }
.section-heading h3 { font-size: 21px; }
.section-heading--small { margin: 17px 0 10px; }
.official-pill { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 8px 10px; border: 1px solid rgba(52,230,138,.14); border-radius: 999px; color: #a9efc3; background: rgba(52,230,138,.045); font-size: 11px; }
.official-pill i { width: 7px; height: 7px; border-radius: 50%; background: #34e68a; box-shadow: 0 0 8px rgba(52,230,138,.7); }

.featured {
  position: relative;
  min-height: 140px;
  display: grid;
  grid-template-columns: 62px minmax(0,1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 19px;
  overflow: hidden;
  border: 1px solid rgba(255,106,0,.31);
  border-radius: 22px;
  text-decoration: none;
  background: linear-gradient(115deg, rgba(255,106,0,.16), rgba(255,106,0,.045) 56%, rgba(30,58,95,.11));
  transition: border-color .18s ease, box-shadow .18s ease;
}
.featured::before { content:""; position:absolute; width:190px; height:190px; left:-90px; top:-105px; border-radius:50%; background:var(--orange); filter:blur(75px); opacity:.16; }
.featured:hover { border-color: rgba(255,106,0,.6); box-shadow: 0 18px 42px rgba(0,0,0,.2), 0 0 28px rgba(255,106,0,.06); }
.featured__icon { position: relative; z-index: 1; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 19px; color:#fff; background:var(--orange); box-shadow:0 12px 28px rgba(255,106,0,.23); }
.featured__icon .svg-icon { width: 28px; height: 28px; }
.featured__copy { position: relative; z-index:1; min-width:0; }
.featured__copy small { color:#ffb07a; font-weight:700; }
.featured__copy strong { display:block; margin-top:3px; font-family:"Tajawal", sans-serif; font-size:23px; }
.featured__copy p { margin:4px 0 0; color:var(--muted); line-height:1.65; font-size:12px; }
.featured__button { position:relative; z-index:1; min-width:92px; padding:10px 13px; border-radius:13px; background:#f6f7f8; color:#14171b; text-align:center; font-size:12px; font-weight:900; }

.links-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.link-card {
  --tone: var(--orange);
  min-width:0;
  min-height:76px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 18px;
  align-items:center;
  gap:11px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:18px;
  text-decoration:none;
  background:rgba(255,255,255,.028);
  transition:border-color .18s ease, background .18s ease;
}
.link-card:hover { border-color: color-mix(in srgb, var(--tone) 42%, var(--line)); background: color-mix(in srgb, var(--tone) 6%, rgba(255,255,255,.025)); }
.link-card[data-tone="red"] { --tone:#ff4d57; }
.link-card[data-tone="blue"] { --tone:#55a4f0; }
.link-card[data-tone="green"] { --tone:#39d98a; }
.link-card__icon { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; color:var(--tone); background:color-mix(in srgb, var(--tone) 11%, transparent); border:1px solid color-mix(in srgb, var(--tone) 18%, transparent); }
.link-card__copy { min-width:0; }
.link-card__copy strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; direction:ltr; text-align:right; }
.link-card__copy p { margin:3px 0 0; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10px; }
.link-card__arrow { color:#6f7884; display:grid; place-items:center; }
.link-card__arrow .svg-icon { width:17px; height:17px; }

.business {
  min-height:75px;
  display:grid;
  grid-template-columns:50px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(70,137,205,.22);
  border-radius:19px;
  text-decoration:none;
  background:linear-gradient(100deg, rgba(30,58,95,.23), rgba(255,255,255,.025));
  transition:border-color .18s ease, background .18s ease;
}
.business:hover { border-color:rgba(91,166,239,.44); background:linear-gradient(100deg, rgba(30,58,95,.3), rgba(255,255,255,.035)); }
.business__icon { width:50px; height:50px; display:grid; place-items:center; border-radius:15px; color:#78b8f3; background:rgba(73,146,219,.12); }
.business__copy { min-width:0; }
.business__copy strong { display:block; }
.business__copy p { margin:3px 0 0; color:var(--muted); font-size:11px; }
.business__button { padding:9px 11px; border-radius:11px; background:#f3f5f7; color:#121418; font-size:11px; font-weight:900; white-space:nowrap; }

.support { margin-top:4px; }
.support-card {
  position:relative;
  overflow:hidden;
  min-height:218px;
  padding:19px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:
    linear-gradient(125deg, rgba(255,255,255,.075), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(255,106,0,.2), transparent 30%),
    radial-gradient(circle at 5% 100%, rgba(30,58,95,.26), transparent 34%),
    linear-gradient(145deg, #181c22, #0c0f14 75%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.24);
}
.support-card::after {
  content:"";
  position:absolute;
  inset:-45% auto auto -25%;
  width:220px;
  height:220px;
  border-radius:50%;
  background:rgba(255,255,255,.065);
  filter:blur(45px);
  animation:card-light 7s ease-in-out infinite alternate;
}
.support-card__top, .support-card__bottom { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:15px; }
.support-card__top small, .support-card__bottom small { display:block; color:#9fa7b2; font-size:9px; letter-spacing:1.7px; }
.support-card__top strong { display:block; margin-top:3px; font-size:21px; letter-spacing:1px; }
.support-card__circles { display:flex; align-items:center; direction:ltr; }
.support-card__circles i { width:35px; height:35px; border-radius:50%; }
.support-card__circles i:first-child { background:rgba(255,106,0,.9); }
.support-card__circles i:last-child { margin-left:-10px; background:rgba(247,247,247,.75); mix-blend-mode:screen; }
.support-card__chip { position:relative; z-index:1; width:55px; height:41px; margin-top:20px; overflow:hidden; border-radius:11px; background:linear-gradient(135deg,#e2c47b,#8b692f); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.support-card__chip::before, .support-card__chip::after { content:""; position:absolute; background:rgba(66,48,17,.34); }
.support-card__chip::before { left:17px; top:0; bottom:0; width:2px; }
.support-card__chip::after { left:0; right:0; top:13px; height:2px; }
.support-card__number { position:relative; z-index:1; margin-top:22px; direction:ltr; text-align:left; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:clamp(22px,4vw,30px); letter-spacing:3px; }
.support-card__bottom { margin-top:25px; }
.support-card__bottom strong { display:block; margin-top:3px; font-size:14px; }
.support-copy { width:100%; min-height:49px; margin-top:10px; border:1px solid rgba(255,106,0,.31); border-radius:15px; color:#fff; background:linear-gradient(145deg, rgba(255,106,0,.98), #d84b00); box-shadow:0 12px 28px rgba(255,106,0,.18); font-weight:900; }
.support-copy:hover { filter:brightness(1.06); }

.music-player {
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin-top:14px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:19px;
  background:rgba(0,0,0,.14);
}
.music-player__play { width:48px; height:48px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; color:#fff; background:linear-gradient(145deg,var(--orange),#d84b00); box-shadow:0 12px 27px rgba(255,106,0,.22); }
.music-player__play .svg-icon { width:19px; height:19px; }
.music-player__body { min-width:0; }
.music-player__heading { display:flex; justify-content:space-between; align-items:flex-start; gap:9px; }
.music-player__heading span { min-width:0; }
.music-player__heading strong, .music-player__heading small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; direction:ltr; text-align:right; }
.music-player__heading strong { font-size:12px; }
.music-player__heading small { margin-top:2px; color:var(--muted); font-size:9px; }
.music-player__heading time { color:#7c8590; font-size:9px; direction:ltr; white-space:nowrap; }
.music-player__progress { width:100%; height:4px; margin:9px 0 0; appearance:none; border-radius:999px; outline:none; direction:ltr; background:linear-gradient(to right,var(--orange) var(--progress,0%),rgba(255,255,255,.11) var(--progress,0%)); }
.music-player__progress::-webkit-slider-thumb { width:12px; height:12px; appearance:none; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,106,0,.23); }
.music-player__footer { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; }
.music-player__state { display:inline-flex; align-items:center; gap:6px; color:#8e97a2; font-size:9px; }
.music-player__state i { width:6px; height:6px; border-radius:50%; background:#7c8590; }
.music-player__state i.is-playing { background:#34e68a; box-shadow:0 0 8px rgba(52,230,138,.7); }
.music-player__volume { display:flex; align-items:center; gap:7px; color:#7d8590; font-size:8px; direction:ltr; }
.music-player__volume input { width:78px; height:3px; appearance:none; border-radius:999px; outline:none; background:linear-gradient(to right,#9da5af var(--volume,38%),rgba(255,255,255,.1) var(--volume,38%)); }
.music-player__volume input::-webkit-slider-thumb { width:10px; height:10px; appearance:none; border-radius:50%; background:#d9dde2; }
.equalizer { height:25px; display:flex; align-items:flex-end; gap:2px; opacity:.28; }
.equalizer i { display:block; width:3px; height:7px; border-radius:2px; background:var(--orange); }
.equalizer.is-playing { opacity:1; }
.equalizer.is-playing i:nth-child(1) { animation:eq .55s ease-in-out infinite alternate; }
.equalizer.is-playing i:nth-child(2) { animation:eq .38s ease-in-out .08s infinite alternate; }
.equalizer.is-playing i:nth-child(3) { animation:eq .68s ease-in-out .04s infinite alternate; }
.equalizer.is-playing i:nth-child(4) { animation:eq .47s ease-in-out .13s infinite alternate; }

.footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:15px; padding-top:14px; border-top:1px solid var(--line); }
.footer p { margin:0; color:#747d87; font-size:9px; }
.footer button { padding:0; border:0; background:transparent; color:#9ca4ae; font-size:9px; }
.footer button:hover { color:var(--orange); }
.toast { position:fixed; top:max(18px,env(safe-area-inset-top)); left:50%; z-index:120; transform:translate(-50%,-28px); max-width:calc(100% - 28px); padding:10px 15px; border:1px solid var(--line); border-radius:13px; background:rgba(14,17,21,.96); color:#fff; box-shadow:0 14px 38px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:.22s ease; font-size:12px; text-align:center; }
.toast.show { transform:translate(-50%,0); opacity:1; }

@keyframes ring-spin { to { transform:rotate(360deg); } }
@keyframes card-light { to { transform:translate(90px,55px); opacity:.8; } }
@keyframes eq { from { height:5px; } to { height:24px; } }

@media (max-width: 930px) {
  .site-header, .layout { width:min(720px,calc(100% - 24px)); }
  .layout { grid-template-columns:1fr; min-height:auto; }
  .profile-card { min-height:auto; padding:22px; }
  .content-card { padding:22px; }
}
@media (max-width: 620px) {
  :root { --radius:23px; --bg-opacity:.36; }
  .site-header { padding-top:max(11px,env(safe-area-inset-top)); }
  .brand__mark { font-size:32px; }
  .round-button { width:41px; height:41px; border-radius:13px; }
  .layout { width:min(100% - 18px,720px); gap:10px; padding-top:10px; }
  .profile-card, .content-card { padding:16px; }
  .avatar-wrap { width:215px; }
  .profile-name h1 { font-size:30px; }
  .stats { gap:7px; margin-top:22px; }
  .stat { padding:12px 6px; }
  .stat strong { font-size:18px; }
  .section-heading h2 { font-size:24px; }
  .official-pill { display:none; }
  .featured { grid-template-columns:54px minmax(0,1fr); gap:12px; min-height:132px; padding:15px; }
  .featured__icon { width:54px; height:54px; border-radius:16px; }
  .featured__copy strong { font-size:20px; }
  .featured__button { grid-column:1/-1; width:100%; }
  .links-grid { grid-template-columns:1fr; }
  .business { grid-template-columns:47px minmax(0,1fr); }
  .business__icon { width:47px; height:47px; }
  .business__button { grid-column:1/-1; text-align:center; }
  .support-card { min-height:205px; padding:16px; }
  .support-card__number { font-size:20px; letter-spacing:2px; }
  .music-player { grid-template-columns:46px minmax(0,1fr); }
  .equalizer { display:none; }
  .music-player__play { width:46px; height:46px; }
  .music-player__volume input { width:64px; }
  .footer { flex-direction:column; }
  .intro__content { min-height:280px; border-radius:28px; }
  .intro__start { min-width:175px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* ===== V4 RESPONSIVE MOTION INTRO ===== */
.intro-v14{
  position:fixed;inset:0;z-index:100;display:block;overflow:auto;
  min-height:100svh;background:#06080b;transition:opacity .58s ease,visibility .58s ease;
  overscroll-behavior:none;
}
.intro-v14.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.intro__backdrop{position:absolute;inset:0;overflow:hidden;background:#06080b;pointer-events:none}
.intro__backdrop-image{position:absolute;inset:-3%;background-image:image-set(url("./assets/intro-bg-v15.webp") type("image/webp"),url("./assets/intro-bg-v15.jpg") type("image/jpeg"));background-position:center;background-size:cover;filter:saturate(1.04) contrast(1.08) brightness(.82);transform:scale(1.04);animation:intro-v4-bg 12s ease-in-out infinite alternate;will-change:transform}
.intro__mesh{position:absolute;inset:0;opacity:.22;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:radial-gradient(circle at 50% 55%,black 0 42%,transparent 82%)}
.intro__energy{position:absolute;width:44rem;height:44rem;border-radius:50%;filter:blur(90px);opacity:.16;mix-blend-mode:screen}
.intro__energy--orange{right:-18rem;top:-18rem;background:var(--orange);animation:intro-v4-orb-a 9s ease-in-out infinite alternate}
.intro__energy--blue{left:-20rem;bottom:-20rem;background:var(--blue);animation:intro-v4-orb-b 11s ease-in-out infinite alternate}
.intro__vignette{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,transparent 24%,rgba(2,4,7,.28) 60%,rgba(2,4,7,.82) 100%),linear-gradient(90deg,rgba(2,4,7,.58),transparent 32%,transparent 68%,rgba(2,4,7,.58))}
#introCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.intro__topbar{position:relative;z-index:2;width:min(1180px,calc(100% - 38px));margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 0 0;display:flex;align-items:center;justify-content:space-between;gap:16px;direction:ltr}
.intro__topbar img{height:42px;width:auto;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.36))}
.intro__topbar span{color:rgba(255,255,255,.68);font-size:10px;font-weight:800;letter-spacing:4px;white-space:nowrap}
.intro__hero{position:relative;z-index:2;width:min(1180px,calc(100% - 38px));min-height:calc(100svh - 112px);margin:0 auto;padding:30px 0 72px;display:grid;grid-template-columns:minmax(300px,.85fr) minmax(430px,1.15fr);align-items:center;gap:clamp(28px,5vw,76px);direction:ltr}
.intro__visual{position:relative;display:grid;place-items:center;min-height:430px;animation:intro-v4-visual-in .9s cubic-bezier(.16,1,.3,1) both}
.intro__logo{position:relative;z-index:3;width:min(380px,32vw);aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 28px 50px rgba(0,0,0,.48));animation:intro-v4-float 5s ease-in-out 1s infinite}
.intro__logo-glow{position:absolute;width:65%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,106,0,.28),rgba(255,106,0,.06) 42%,transparent 72%);filter:blur(22px);animation:intro-v4-pulse 3.8s ease-in-out infinite}
.intro__logo-orbit{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.13)}
.intro__logo-orbit--one{width:78%;aspect-ratio:1;border-top-color:rgba(255,106,0,.88);border-right-color:rgba(255,106,0,.35);animation:intro-v4-spin 18s linear infinite}
.intro__logo-orbit--two{width:92%;aspect-ratio:1;border-left-color:rgba(255,255,255,.38);border-bottom-color:rgba(255,106,0,.42);animation:intro-v4-spin-reverse 24s linear infinite}
.intro__copy{direction:rtl;text-align:right;max-width:650px;animation:intro-v4-copy-in .85s cubic-bezier(.16,1,.3,1) .12s both}
.intro__kicker{margin:0 0 13px;color:var(--orange);font-size:12px;font-weight:900;letter-spacing:4px;direction:ltr;text-align:right}
.intro__copy h1{margin:0;font-family:"Tajawal",sans-serif;font-size:clamp(45px,5vw,76px);font-weight:900;line-height:1.02;letter-spacing:-1.6px;text-wrap:balance}
.intro__copy h1 b{color:var(--orange);font-weight:900;text-shadow:0 0 28px rgba(255,106,0,.25)}
.intro__text{max-width:610px;margin:18px 0 0;color:#e8ebef;font-size:clamp(17px,1.7vw,24px);font-weight:600;line-height:1.75;text-wrap:balance}
.intro__keywords{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.intro__keywords span{--delay:0ms;display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.095);border-radius:13px;background:rgba(12,15,20,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.035);backdrop-filter:blur(12px);font-size:13px;font-weight:800;opacity:0;transform:translateY(12px);animation:intro-v4-keyword .52s ease calc(.55s + var(--delay)) forwards}
.intro__keywords span:before{content:"";width:8px;height:8px;border-radius:2px;background:var(--orange);box-shadow:0 0 13px rgba(255,106,0,.7);transform:rotate(45deg)}
.intro-v14 .intro__start{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:15px;min-width:210px;min-height:60px;margin-top:30px;padding:0 28px;border:1px solid rgba(255,255,255,.16);border-radius:17px;color:#fff;background:linear-gradient(145deg,var(--orange),#d94d00);box-shadow:0 18px 42px rgba(255,106,0,.26),inset 0 1px 0 rgba(255,255,255,.19);font-family:"Tajawal",sans-serif;font-size:20px;font-weight:900;overflow:hidden;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.intro-v14 .intro__start:before{content:"";position:absolute;top:-60%;left:-35%;width:45%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transform:rotate(18deg);animation:intro-v4-shine 3.4s ease-in-out infinite}
.intro-v14 .intro__start span,.intro-v14 .intro__start i{position:relative;z-index:1}
.intro-v14 .intro__start i{font-style:normal;font-size:19px;letter-spacing:-7px;transform:translateX(-4px);animation:intro-v4-arrow 1.3s ease-in-out infinite}
.intro-v14 .intro__start:hover{transform:translateY(-3px);filter:brightness(1.07);box-shadow:0 23px 52px rgba(255,106,0,.33),inset 0 1px 0 rgba(255,255,255,.22)}
.intro__scroll{position:absolute;z-index:2;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.48);font-size:8px;font-weight:800;letter-spacing:3px;direction:ltr}
.intro__scroll i{width:19px;height:30px;border:1px solid rgba(255,255,255,.28);border-radius:999px;position:relative}
.intro__scroll i:after{content:"";position:absolute;top:6px;left:50%;width:3px;height:6px;border-radius:999px;background:var(--orange);transform:translateX(-50%);animation:intro-v4-scroll 1.5s ease-in-out infinite}
@keyframes intro-v4-bg{from{transform:scale(1.04) translate3d(-.5%,0,0)}to{transform:scale(1.075) translate3d(.65%,-.55%,0)}}
@keyframes intro-v4-orb-a{to{transform:translate(-80px,65px) scale(1.14)}}
@keyframes intro-v4-orb-b{to{transform:translate(75px,-55px) scale(.92)}}
@keyframes intro-v4-visual-in{from{opacity:0;transform:translateX(-34px) scale(.94)}to{opacity:1;transform:none}}
@keyframes intro-v4-copy-in{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes intro-v4-keyword{to{opacity:1;transform:none}}
@keyframes intro-v4-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes intro-v4-pulse{0%,100%{opacity:.58;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes intro-v4-spin{to{transform:rotate(360deg)}}
@keyframes intro-v4-spin-reverse{to{transform:rotate(-360deg)}}
@keyframes intro-v4-shine{0%,58%{transform:translateX(-280%) rotate(18deg)}82%,100%{transform:translateX(760%) rotate(18deg)}}
@keyframes intro-v4-arrow{0%,100%{transform:translateX(-4px)}50%{transform:translateX(-10px)}}
@keyframes intro-v4-scroll{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}

@media(max-width:900px){
  .intro__topbar{width:min(100% - 28px,1180px)}
  .intro__hero{width:min(100% - 28px,760px);grid-template-columns:1fr;gap:4px;min-height:auto;padding:30px 0 70px;text-align:center}
  .intro__visual{min-height:250px;order:0}
  .intro__logo{width:min(230px,46vw)}
  .intro__logo-orbit--one{width:min(270px,56vw)}
  .intro__logo-orbit--two{width:min(310px,64vw)}
  .intro__copy{max-width:700px;margin:0 auto;text-align:center}
  .intro__kicker{text-align:center;margin-bottom:10px}
  .intro__copy h1{font-size:clamp(37px,8vw,58px)}
  .intro__text{margin:14px auto 0;font-size:clamp(16px,3.4vw,21px)}
  .intro__keywords{justify-content:center;margin-top:19px}
  .intro-v14 .intro__start{margin-top:24px}
}
@media(max-width:560px){
  .intro__topbar{padding-top:max(14px,env(safe-area-inset-top))}
  .intro__topbar img{height:34px}
  .intro__topbar span{font-size:7px;letter-spacing:2px}
  .intro__hero{width:min(100% - 22px,520px);padding:10px 0 54px;gap:1px}
  .intro__visual{min-height:205px}
  .intro__logo{width:min(180px,48vw)}
  .intro__logo-orbit--one{width:min(210px,58vw)}
  .intro__logo-orbit--two{width:min(245px,68vw)}
  .intro__copy h1{font-size:clamp(31px,10vw,43px);letter-spacing:-.7px}
  .intro__text{font-size:15px;line-height:1.65;max-width:330px}
  .intro__keywords{gap:7px;margin-top:15px}
  .intro__keywords span{min-height:36px;padding:0 10px;border-radius:11px;font-size:11px;gap:7px}
  .intro__keywords span:before{width:6px;height:6px}
  .intro-v14 .intro__start{min-width:170px;min-height:52px;margin-top:20px;border-radius:15px;font-size:18px}
  .intro__scroll{display:none}
}
@media(max-height:670px) and (max-width:900px){
  .intro__topbar{padding-top:10px}
  .intro__hero{padding-top:0;padding-bottom:18px}
  .intro__visual{min-height:150px}
  .intro__logo{width:135px}
  .intro__logo-orbit--one{width:160px}.intro__logo-orbit--two{width:185px}
  .intro__copy h1{font-size:30px}.intro__text{font-size:13px;margin-top:8px}.intro__keywords{margin-top:10px}.intro-v14 .intro__start{margin-top:12px;min-height:46px}
}
@media(prefers-reduced-motion:reduce){
  .intro__backdrop-image,.intro__energy,.intro__logo,.intro__logo-orbit,.intro__logo-glow,.intro-v14 .intro__start:before,.intro-v14 .intro__start i,.intro__scroll i:after{animation:none!important}
  .intro__visual,.intro__copy,.intro__keywords span{opacity:1!important;transform:none!important;animation:none!important}
}



/* Personal portrait visual overrides */
.intro-v14 .intro__visual{min-height:500px;align-self:stretch}
.intro-v14 .intro__portrait{position:relative;z-index:3;width:min(500px,40vw);height:auto;max-height:72vh;object-fit:contain;object-position:center bottom;align-self:end;filter:drop-shadow(0 28px 54px rgba(0,0,0,.55));animation:intro-v4-float 5.5s ease-in-out 1s infinite}
.intro-v14 .intro__portrait-glow{position:absolute;width:68%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,106,0,.25),rgba(30,58,95,.12) 42%,transparent 72%);filter:blur(22px);animation:intro-v4-pulse 3.8s ease-in-out infinite}
.intro-v14 .intro__portrait-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.intro-v14 .intro__portrait-ring--one{width:min(420px,33vw);aspect-ratio:1;border-top-color:rgba(255,106,0,.85);border-right-color:rgba(255,106,0,.3);animation:intro-v4-spin 18s linear infinite}
.intro-v14 .intro__portrait-ring--two{width:min(500px,39vw);aspect-ratio:1;border-left-color:rgba(83,147,214,.62);border-bottom-color:rgba(255,255,255,.25);animation:intro-v4-spin-reverse 24s linear infinite}
.intro-v14 .intro__badge{position:absolute;z-index:4;right:10%;bottom:9%;width:105px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 16px 30px rgba(0,0,0,.45));animation:i27-badge-float 4.2s ease-in-out infinite}
@keyframes i27-badge-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@media(max-width:900px){.intro-v14 .intro__visual{min-height:270px}.intro-v14 .intro__portrait{width:min(260px,48vw);max-height:300px}.intro-v14 .intro__portrait-ring--one{width:min(270px,56vw)}.intro-v14 .intro__portrait-ring--two{width:min(315px,65vw)}.intro-v14 .intro__badge{width:80px;right:24%;bottom:5%}}
@media(max-width:560px){.intro-v14 .intro__visual{min-height:205px}.intro-v14 .intro__portrait{width:min(200px,52vw);max-height:220px}.intro-v14 .intro__portrait-ring--one{width:min(220px,60vw)}.intro-v14 .intro__portrait-ring--two{width:min(255px,70vw)}.intro-v14 .intro__badge{width:64px;right:19%;bottom:3%}}
@media(max-height:690px) and (max-width:900px){.intro-v14 .intro__visual{min-height:145px}.intro-v14 .intro__portrait{width:135px;max-height:150px}.intro-v14 .intro__portrait-ring--one{width:160px}.intro-v14 .intro__portrait-ring--two{width:185px}.intro-v14 .intro__badge{width:48px}}
@media(prefers-reduced-motion:reduce){.intro-v14 .intro__portrait,.intro-v14 .intro__portrait-ring,.intro-v14 .intro__portrait-glow,.intro-v14 .intro__badge{animation:none!important}}


/* V15 clean intro: logo only, centered and responsive */
.intro-v15{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;background:#080a0e;
  transition:opacity .55s ease,visibility .55s ease;
}
.intro-v15.is-leaving{opacity:0;visibility:hidden}
.intro-v15 .intro__backdrop{position:absolute;inset:0;overflow:hidden}
.intro-v15 .intro__backdrop-image{position:absolute;inset:-3%;background:url("./assets/intro-bg-v15.webp") center/cover no-repeat;filter:saturate(1.03) contrast(1.06) brightness(.91);transform:scale(1.04);animation:intro-v15-bg 14s ease-in-out infinite alternate}
.intro-v15 .intro__backdrop:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,rgba(255,106,0,.08),transparent 23%),linear-gradient(180deg,rgba(5,7,10,.08),rgba(5,7,10,.25) 55%,rgba(5,7,10,.58));pointer-events:none}
.intro-v15 .intro__energy{position:absolute;border-radius:50%;filter:blur(115px);opacity:.17;pointer-events:none}
.intro-v15 .intro__energy--orange{width:38rem;height:38rem;top:-20rem;left:-13rem;background:var(--orange);animation:intro-v15-orb-a 12s ease-in-out infinite alternate}
.intro-v15 .intro__energy--blue{width:42rem;height:42rem;right:-22rem;bottom:-20rem;background:var(--blue);animation:intro-v15-orb-b 15s ease-in-out infinite alternate}
.intro-v15 .intro__mesh{position:absolute;inset:0;opacity:.10;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(circle at center,black,transparent 82%)}
.intro-v15 #introCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.78}
.intro-v15 .intro__vignette{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 40%,rgba(2,4,7,.58) 100%);pointer-events:none}
.intro-v15 .intro__center{position:relative;z-index:2;width:min(1000px,calc(100% - 40px));min-height:min(820px,calc(100dvh - 46px));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 22px 66px}
.intro-v15 .intro__logo-stage{position:relative;width:min(620px,72vw);min-height:230px;display:grid;place-items:center;margin-bottom:8px;animation:intro-v15-logo-in .85s cubic-bezier(.16,1,.3,1) both}
.intro-v15 .intro__main-logo{position:relative;z-index:3;width:min(540px,68vw);height:auto;object-fit:contain;filter:drop-shadow(0 24px 46px rgba(0,0,0,.48));animation:intro-v15-float 5.7s ease-in-out .9s infinite}
.intro-v15 .intro__logo-glow{position:absolute;width:72%;height:55%;border-radius:50%;background:radial-gradient(circle,rgba(255,106,0,.20),rgba(30,58,95,.08) 48%,transparent 72%);filter:blur(26px);animation:intro-v15-pulse 4s ease-in-out infinite}
.intro-v15 .intro__logo-orbit{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.10)}
.intro-v15 .intro__logo-orbit--one{width:min(590px,70vw);height:min(250px,30vw);border-top-color:rgba(255,106,0,.70);border-right-color:rgba(255,106,0,.26);animation:intro-v15-spin 22s linear infinite}
.intro-v15 .intro__logo-orbit--two{width:min(660px,78vw);height:min(300px,35vw);border-left-color:rgba(87,145,205,.42);border-bottom-color:rgba(255,255,255,.18);animation:intro-v15-spin-reverse 28s linear infinite}
.intro-v15 .intro__copy{max-width:760px;text-align:center;direction:rtl;animation:intro-v15-copy-in .8s cubic-bezier(.16,1,.3,1) .12s both}
.intro-v15 .intro__kicker{margin:0 0 10px;color:var(--orange);font-size:12px;font-weight:900;letter-spacing:4px;direction:ltr;text-align:center}
.intro-v15 .intro__copy h1{margin:0;font-family:"Tajawal",sans-serif;font-size:clamp(42px,5.2vw,72px);font-weight:900;line-height:1.04;letter-spacing:-1.4px;text-wrap:balance}
.intro-v15 .intro__copy h1 b{color:var(--orange);font-weight:900;text-shadow:0 0 28px rgba(255,106,0,.25)}
.intro-v15 .intro__text{max-width:680px;margin:15px auto 0;color:#e8ebef;font-size:clamp(16px,1.6vw,22px);font-weight:600;line-height:1.78;text-wrap:balance}
.intro-v15 .intro__keywords{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:20px}
.intro-v15 .intro__keywords span{--delay:0ms;display:inline-flex;align-items:center;gap:8px;min-height:39px;padding:0 13px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(10,13,18,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.035);backdrop-filter:blur(11px);font-size:12px;font-weight:800;opacity:0;transform:translateY(10px);animation:intro-v15-keyword .5s ease calc(.48s + var(--delay)) forwards}
.intro-v15 .intro__keywords span:before{content:"";width:7px;height:7px;border-radius:2px;background:var(--orange);box-shadow:0 0 12px rgba(255,106,0,.65);transform:rotate(45deg)}
.intro-v15 .intro__start{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:15px;min-width:200px;min-height:56px;margin-top:25px;padding:0 28px;border:1px solid rgba(255,255,255,.15);border-radius:17px;color:#fff;background:linear-gradient(145deg,var(--orange),#d94d00);box-shadow:0 18px 40px rgba(255,106,0,.25),inset 0 1px 0 rgba(255,255,255,.18);font-family:"Tajawal",sans-serif;font-size:19px;font-weight:900;overflow:hidden;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.intro-v15 .intro__start:before{content:"";position:absolute;top:-60%;left:-35%;width:45%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transform:rotate(18deg);animation:intro-v15-shine 3.5s ease-in-out infinite}
.intro-v15 .intro__start span,.intro-v15 .intro__start i{position:relative;z-index:1}
.intro-v15 .intro__start i{font-style:normal;font-size:19px;letter-spacing:-7px;transform:translateX(-4px);animation:intro-v15-arrow 1.3s ease-in-out infinite}
.intro-v15 .intro__start:hover{transform:translateY(-3px);filter:brightness(1.08);box-shadow:0 23px 50px rgba(255,106,0,.33),inset 0 1px 0 rgba(255,255,255,.21)}
.intro-v15 .intro__scroll{position:absolute;z-index:2;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.43);font-size:8px;font-weight:800;letter-spacing:3px;direction:ltr}
.intro-v15 .intro__scroll i{width:19px;height:30px;border:1px solid rgba(255,255,255,.25);border-radius:999px;position:relative}
.intro-v15 .intro__scroll i:after{content:"";position:absolute;top:6px;left:50%;width:3px;height:6px;border-radius:999px;background:var(--orange);transform:translateX(-50%);animation:intro-v15-scroll 1.5s ease-in-out infinite}
@keyframes intro-v15-bg{from{transform:scale(1.04) translate3d(-.35%,0,0)}to{transform:scale(1.07) translate3d(.45%,-.4%,0)}}
@keyframes intro-v15-orb-a{to{transform:translate(70px,60px) scale(1.08)}}
@keyframes intro-v15-orb-b{to{transform:translate(-70px,-55px) scale(.94)}}
@keyframes intro-v15-logo-in{from{opacity:0;transform:translateY(-22px) scale(.96)}to{opacity:1;transform:none}}
@keyframes intro-v15-copy-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes intro-v15-keyword{to{opacity:1;transform:none}}
@keyframes intro-v15-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes intro-v15-pulse{0%,100%{opacity:.62;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
@keyframes intro-v15-spin{to{transform:rotate(360deg)}}
@keyframes intro-v15-spin-reverse{to{transform:rotate(-360deg)}}
@keyframes intro-v15-shine{0%,58%{transform:translateX(-280%) rotate(18deg)}82%,100%{transform:translateX(760%) rotate(18deg)}}
@keyframes intro-v15-arrow{0%,100%{transform:translateX(-4px)}50%{transform:translateX(-10px)}}
@keyframes intro-v15-scroll{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}
@media(max-width:900px){
  .intro-v15 .intro__center{width:min(100% - 24px,760px);min-height:100dvh;padding:18px 14px 44px}
  .intro-v15 .intro__logo-stage{width:min(520px,82vw);min-height:190px;margin-bottom:4px}
  .intro-v15 .intro__main-logo{width:min(470px,78vw)}
  .intro-v15 .intro__logo-orbit--one{width:min(500px,82vw);height:min(210px,34vw)}
  .intro-v15 .intro__logo-orbit--two{width:min(560px,88vw);height:min(250px,39vw)}
  .intro-v15 .intro__copy h1{font-size:clamp(36px,8vw,56px)}
  .intro-v15 .intro__text{font-size:clamp(15px,3.3vw,20px)}
}
@media(max-width:560px){
  .intro-v15 .intro__center{width:calc(100% - 18px);padding:16px 10px 28px;justify-content:center}
  .intro-v15 .intro__logo-stage{width:92vw;min-height:145px;margin-bottom:2px}
  .intro-v15 .intro__main-logo{width:min(380px,86vw)}
  .intro-v15 .intro__logo-orbit--one{width:90vw;height:38vw}
  .intro-v15 .intro__logo-orbit--two{width:98vw;height:43vw}
  .intro-v15 .intro__kicker{font-size:10px;letter-spacing:2.5px;margin-bottom:8px}
  .intro-v15 .intro__copy h1{font-size:clamp(31px,10vw,43px);letter-spacing:-.6px}
  .intro-v15 .intro__text{font-size:14px;line-height:1.68;max-width:340px;margin-top:11px}
  .intro-v15 .intro__keywords{gap:6px;margin-top:14px}
  .intro-v15 .intro__keywords span{min-height:34px;padding:0 9px;border-radius:10px;font-size:10px;gap:6px}
  .intro-v15 .intro__keywords span:before{width:6px;height:6px}
  .intro-v15 .intro__start{min-width:168px;min-height:50px;margin-top:18px;border-radius:15px;font-size:17px}
  .intro-v15 .intro__scroll{display:none}
}
@media(max-height:700px) and (max-width:900px){
  .intro-v15 .intro__center{padding-top:6px;padding-bottom:8px}
  .intro-v15 .intro__logo-stage{min-height:105px;margin-bottom:0}
  .intro-v15 .intro__main-logo{width:300px;max-width:68vw}
  .intro-v15 .intro__logo-orbit--one{width:320px;height:110px}.intro-v15 .intro__logo-orbit--two{width:360px;height:135px}
  .intro-v15 .intro__kicker{margin-bottom:5px}.intro-v15 .intro__copy h1{font-size:30px}.intro-v15 .intro__text{font-size:13px;margin-top:7px}.intro-v15 .intro__keywords{margin-top:8px}.intro-v15 .intro__keywords span{min-height:30px}.intro-v15 .intro__start{margin-top:10px;min-height:45px}
}
@media(prefers-reduced-motion:reduce){
  .intro-v15 .intro__backdrop-image,.intro-v15 .intro__energy,.intro-v15 .intro__main-logo,.intro-v15 .intro__logo-orbit,.intro-v15 .intro__logo-glow,.intro-v15 .intro__start:before,.intro-v15 .intro__start i,.intro-v15 .intro__scroll i:after{animation:none!important}
  .intro-v15 .intro__logo-stage,.intro-v15 .intro__copy,.intro-v15 .intro__keywords span{opacity:1!important;transform:none!important;animation:none!important}
}

/* V15.1 logo cleanup */
.intro-v15 .intro__main-logo{width:min(515px,64vw)}
@media(max-width:900px){.intro-v15 .intro__main-logo{width:min(430px,72vw)}}
@media(max-width:560px){.intro-v15 .intro__main-logo{width:min(330px,78vw)}.intro-v15 .intro__logo-stage{min-height:132px}}


/* V17 performance safeguards — visual design preserved */
.surface { backdrop-filter: blur(16px) saturate(1.06); -webkit-backdrop-filter: blur(16px) saturate(1.06); contain: paint; }
.background__glow { filter: blur(12px); }
.background__image, .intro__backdrop-image { backface-visibility: hidden; transform-origin: center; }
#backgroundCanvas, #introCanvas { contain: strict; }
.perf-paused *, .perf-paused *::before, .perf-paused *::after { animation-play-state: paused !important; }
@media (max-width: 700px) {
  .surface { backdrop-filter: blur(10px) saturate(1.03); -webkit-backdrop-filter: blur(10px) saturate(1.03); }
  .background__glow { filter: blur(8px); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  #backgroundCanvas, #introCanvas { display: none !important; }
  .background__image, .intro__backdrop-image { transform: none !important; }
}