@charset "utf-8";

/* =========================================================================
   Calling.Elra2y.com -- public landing page ("مكانك موجود")
   Dark RTL. Self contained: no bootstrap, no AdminLTE.
   Palette: #080B18 bg | #F1C75B / #D9A441 gold | #F7F3EA text | #B8BBC7 muted
   ========================================================================= */


/* ---------- FontAwesome faces (kept: used by the footer socials) ---------- */

@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
    src: url("font/fa-brands-400.eot");
    src: url("font/fa-brands-400.eot?#iefix") format("embedded-opentype"),
        url("font/fa-brands-400.woff2") format("woff2"),
        url("font/fa-brands-400.woff") format("woff"),
        url("font/fa-brands-400.ttf") format("truetype"),
        url("font/fa-brands-400.svg#fontawesome") format("svg");
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    src: url("font/fa-regular-400.eot");
    src: url("font/fa-regular-400.eot?#iefix") format("embedded-opentype"),
        url("font/fa-regular-400.woff2") format("woff2"),
        url("font/fa-regular-400.woff") format("woff"),
        url("font/fa-regular-400.ttf") format("truetype"),
        url("font/fa-regular-400.svg#fontawesome") format("svg");
}

@font-face {
    font-family: 'Font Awesome 5 Solid';
    font-style: normal;
    font-weight: 900;
    src: url("font/fa-solid-900.eot");
    src: url("font/fa-solid-900.eot?#iefix") format("embedded-opentype"),
        url("font/fa-solid-900.woff2") format("woff2"),
        url("font/fa-solid-900.woff") format("woff"),
        url("font/fa-solid-900.ttf") format("truetype"),
        url("font/fa-solid-900.svg#fontawesome") format("svg");
}

.fab { font-family: 'Font Awesome 5 Brands'; font-style: normal; display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; }
.far { font-family: 'Font Awesome 5 Free'; font-weight: 400; font-style: normal; display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; }
.fa, .fas { font-family: 'Font Awesome 5 Solid'; font-weight: 900; font-style: normal; display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; }

.fa-bars::before { content: "\f0c9"; }
.fa-plus::before { content: "\f067"; }
.fa-user-times::before { content: "\f235"; }
.fa-facebook:before { content: "\f39e"; }
.fa-instagram::before { content: "\f16d"; }
.fa-twitter:before { content: "\f099"; }
.fa-linkedin-in:before { content: "\f0e1"; }
.fa-telegram-plane:before { content: "\f3fe"; }
.fa-whatsapp:before { content: "\f232"; }
.fa-tiktok:before { content: "\e07b"; }
.fa-soundcloud:before { content: "\f1be"; }
.fa-snapchat-ghost::before { content: "\f2ac"; }
.fa-youtube-play::before { content: "\f167"; }


/* ---------- Base ---------- */

html, body {
    margin: 0;
    padding: 0;
    background: #080B18;
    color: #F7F3EA;
    font-family: Tajawal, system-ui, sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

a { color: #F1C75B; text-decoration: none; }
a:hover { color: #E8B84A; }

::selection { background: rgba(217,164,65,.3); color: #fff; }

input, textarea, select, button { font-family: Tajawal, sans-serif; }
::placeholder { color: #5b6076; }

h1, h2, h3, h4 { font-family: Cairo, sans-serif; }

.Wrap { max-width: 1200px; margin: 0 auto; }
.Gold { color: #F1C75B; }
.White { color: #F7F3EA; }
.Center { text-align: center; }
.Ltr { direction: ltr; text-align: right; }

.H1 { font-family: Cairo, sans-serif; font-weight: 900; font-size: clamp(34px,7vw,58px); line-height: 1.1; margin: 0 0 22px; color: #fff; }
.H2 { font-family: Cairo, sans-serif; font-weight: 900; font-size: clamp(28px,5vw,40px); line-height: 1.2; margin: 0 0 14px; color: #F7F3EA; }
.Muted { font-size: 17px; color: #B8BBC7; line-height: 1.8; margin: 0; }
.Narrow { max-width: 560px; margin-left: auto; margin-right: auto; }

.SecHead { text-align: center; margin-bottom: 46px; }


/* ---------- Animations ---------- */

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes softIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes floatGlow {
    0%, 100% { opacity: .55; transform: translate(-50%,-50%) scale(1); }
    50% { opacity: .85; transform: translate(-50%,-50%) scale(1.08); }
}
@keyframes ping {
    0% { box-shadow: 0 0 0 0 rgba(217,164,65,.45); }
    70%, 100% { box-shadow: 0 0 0 22px rgba(217,164,65,0); }
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }


/* ---------- Buttons ---------- */

.BtnGold {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    background: linear-gradient(180deg,#F1C75B,#D9A441);
    color: #080B18; font-family: Cairo, sans-serif; font-weight: 800;
    border: none; border-radius: 13px; padding: 11px 24px; font-size: 15px;
    cursor: pointer; box-shadow: 0 8px 26px rgba(217,164,65,.28);
}
.BtnGold:hover { color: #080B18; }
.BtnGhost {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    background: transparent; color: #F1C75B;
    font-family: Cairo, sans-serif; font-weight: 700;
    border: 1px solid rgba(217,164,65,.5); border-radius: 13px;
    padding: 14px 26px; font-size: 16px; cursor: pointer; transition: background .2s;
}
.BtnGhost:hover { background: rgba(217,164,65,.1); }
.BtnLg { border-radius: 15px; padding: 16px 32px; font-size: 17px; box-shadow: 0 12px 34px rgba(217,164,65,.32); }
.Grow { flex: 1; }
.Full { width: 100%; }
.IsBusy { opacity: .6; pointer-events: none; }


/* ---------- Nav ---------- */

.SiteNav {
    position: fixed; top: 0; right: 0; left: 0; z-index: 60;
    background: rgba(6,9,22,0); border-bottom: 1px solid rgba(217,164,65,0);
    backdrop-filter: blur(10px);
    transition: background .35s ease, border-color .35s ease;
}
.SiteNav.Scrolled { background: rgba(6,9,22,.94); border-bottom-color: rgba(217,164,65,.15); }

.NavInner {
    max-width: 1200px; margin: 0 auto; padding: 0 22px; height: 66px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.NavBrand { display: flex; align-items: center; }
.NavBrand img { height: 44px; width: auto; display: block; }

.NavLinks { align-items: center; gap: 30px; }
.NavLink { font-weight: 500; font-size: 15.5px; color: #C7CAD6; transition: color .2s; }
.NavLink:hover { color: #F1C75B; }

.NavBurger {
    background: rgba(217,164,65,.12); border: 1px solid rgba(217,164,65,.3);
    border-radius: 12px; width: 44px; height: 44px; cursor: pointer;
    align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.NavBurger span { display: block; width: 18px; height: 2px; background: #F1C75B; border-radius: 2px; }

.NavMobile { display: none; padding: 10px 22px 20px; background: rgba(6,9,22,.98); border-top: 1px solid rgba(217,164,65,.15); }
.NavMobile.Open { display: block; animation: softIn .2s ease; }
.NavMobileInner { display: flex; flex-direction: column; }
.NavMobileLink { padding: 14px 6px; font-weight: 600; font-size: 17px; color: #F7F3EA; border-bottom: 1px solid rgba(255,255,255,.06); }
.NavMobileCta { margin-top: 16px; padding: 14px; font-size: 16px; }


/* ---------- Hero ---------- */

.Hero {
    position: relative; min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center; overflow: hidden;
    background: radial-gradient(130% 90% at 78% 18%,#1a2244 0%,#0b1024 42%,#060916 100%);
}
.HeroArt {
    position: absolute; top: 0; bottom: 0; left: 0; width: 52%;
    background: linear-gradient(200deg,#0f1430,#0a0e20);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.HeroArtLines { position: absolute; inset: 0; background: repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 12px,transparent 12px 24px); }
.HeroArtMark { position: relative; font-size: 88px; line-height: 1; opacity: .5; color: #3a4266; }
.HeroArtGlow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 230px; height: 340px; filter: blur(30px);
    background: radial-gradient(closest-side,rgba(241,199,91,.5),transparent);
    animation: floatGlow 6s ease-in-out infinite;
}
.HeroVeil { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(6,9,22,.35) 0%,rgba(6,9,22,.85) 48%,rgba(6,9,22,.98) 100%); }
.HeroBody { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 96px 24px 60px; width: 100%; }
.HeroText { max-width: 640px; }

.Pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(217,164,65,.1); border: 1px solid rgba(217,164,65,.28);
    border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 700;
    color: #F1C75B; margin-bottom: 22px;
}
.HeroTitle { font-family: Cairo, sans-serif; font-weight: 900; font-size: clamp(46px,9vw,84px); line-height: 1.02; margin: 0 0 18px; }
.HeroLead { font-family: Cairo, sans-serif; font-weight: 700; font-size: clamp(19px,3.4vw,26px); color: #F7F3EA; line-height: 1.5; margin: 0 0 14px; }
.HeroSub { font-size: clamp(15px,2.6vw,18px); color: #B8BBC7; line-height: 1.8; margin: 0 0 34px; max-width: 520px; }
.HeroBtns { display: flex; flex-wrap: wrap; gap: 14px; }
.HeroScroll { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #5b6076; font-size: 22px; animation: bob 2.4s ease-in-out infinite; }


/* ---------- About ---------- */

.SecAbout { padding: 88px 24px; background: #080B18; }
.AboutGrid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 48px; align-items: center; }
.AboutGrid .Muted { margin-bottom: 26px; }
.QuoteBox {
    background: linear-gradient(180deg,rgba(217,164,65,.1),rgba(217,164,65,.02));
    border: 1px solid rgba(217,164,65,.28); border-right: 4px solid #D9A441;
    border-radius: 18px; padding: 22px 24px;
}
.QuoteBox p { font-family: Cairo, sans-serif; font-weight: 800; font-size: 20px; color: #F1C75B; margin: 0; line-height: 1.6; }

.VideoBox { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(217,164,65,.22); aspect-ratio: 16/9; background: linear-gradient(140deg,#151b38,#0a0e1e); }
.VideoLines { position: absolute; inset: 0; background: repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 14px,transparent 14px 28px); }
.VideoPlayWrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.VideoPlay {
    width: 78px; height: 78px; border-radius: 50%;
    background: linear-gradient(180deg,#F1C75B,#D9A441);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 30px rgba(217,164,65,.4); animation: ping 2.5s ease-out infinite;
}
.VideoPlay span { color: #080B18; font-size: 26px; margin-right: -3px; }


/* ---------- Videos ---------- */

.SecVideos { padding: 80px 24px; background: linear-gradient(180deg,#080B18,#0a0e20); }
.VideoGrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 22px; }
.VideoCard { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(217,164,65,.18); background: #10152A; transition: transform .3s, border-color .3s; }
.VideoCard:hover { transform: translateY(-6px); border-color: rgba(217,164,65,.55); }
.VideoCardArt { position: relative; aspect-ratio: 16/10; background: radial-gradient(120% 120% at 50% 0%,#1a2140,#0a0e1e); display: flex; align-items: center; justify-content: center; }
.VideoCardGhost { font-size: 52px; opacity: .16; filter: grayscale(1); }
.VideoCardPlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 54px; height: 54px; border-radius: 50%; background: rgba(217,164,65,.92);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,.4);
}
.VideoCardPlay span { color: #080B18; font-size: 18px; margin-right: -2px; }
.VideoCardBody { padding: 18px 18px 20px; }
.VideoCardBody h3 { font-weight: 800; font-size: 19px; margin: 0 0 6px; color: #F7F3EA; }
.VideoCardBody p { font-size: 14px; color: #B8BBC7; margin: 0; line-height: 1.6; }


/* ---------- Services ---------- */

.SecServices { padding: 88px 24px; background: #080B18; }
.SecServices .Wrap { max-width: 1240px; }
.Kicker { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.KickerLine { width: 40px; height: 1px; background: rgba(217,164,65,.5); }
.KickerText { color: #F1C75B; font-weight: 700; font-size: 14px; letter-spacing: 2px; }

.SvcGrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(255px,1fr)); gap: 22px; }
.SvcCard {
    position: relative; background: linear-gradient(180deg,#10152A,#0b0f20);
    border: 1px solid rgba(217,164,65,.16); border-radius: 22px; overflow: hidden;
    cursor: pointer; transition: transform .3s, border-color .3s, box-shadow .3s;
}
.SvcCard:hover { transform: translateY(-6px); border-color: rgba(217,164,65,.55); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.SvcArt { position: relative; height: 160px; background: radial-gradient(120% 130% at 50% 0%,#1c2444,#0a0e1e); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.SvcImg { width: 100%; height: 100%; object-fit: cover; display: block; }
.SvcLines { position: absolute; inset: 0; background: repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 12px,transparent 12px 24px); }
.SvcGhost { font-size: 60px; opacity: .14; filter: grayscale(1); }
.SvcBadge {
    position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(180deg,#F1C75B,#D9A441);
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    box-shadow: 0 6px 18px rgba(217,164,65,.4);
}
.SvcBody { padding: 20px; }
.SvcBody h3 { font-weight: 800; font-size: 20px; margin: 0 0 8px; color: #F7F3EA; }
.SvcBody p { font-size: 14.5px; color: #B8BBC7; margin: 0 0 16px; line-height: 1.65; min-height: 42px; }
.SvcMore { display: inline-flex; align-items: center; gap: 6px; color: #F1C75B; font-family: Cairo, sans-serif; font-weight: 700; font-size: 14.5px; }


/* ---------- CTA band ---------- */

.SecNotPro { position: relative; padding: 110px 24px; overflow: hidden; background: linear-gradient(160deg,#0d1330,#080B18); }
.NotProVeil { position: absolute; inset: 0; opacity: .9; background: linear-gradient(180deg,rgba(8,11,24,.55),rgba(8,11,24,.92)), radial-gradient(80% 60% at 50% 120%,rgba(217,164,65,.22),transparent 60%); }
.NotProLines { position: absolute; inset: 0; background: repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 16px,transparent 16px 32px); }
.NotProBody { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; }
.NotProLead { font-family: Cairo, sans-serif; font-weight: 700; font-size: clamp(18px,3.4vw,24px); color: #F7F3EA; margin: 0 0 12px; }
.NotProBody .Muted { font-size: clamp(16px,2.8vw,19px); margin-bottom: 38px; }


/* ---------- Steps ---------- */

.SecSteps { padding: 88px 24px; background: #080B18; }
.SecSteps .H2 { margin-bottom: 50px; }
.SecSteps .Wrap { max-width: 1080px; }
.StepGrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 22px; }
.StepCard { background: linear-gradient(180deg,#10152A,#0b0f20); border: 1px solid rgba(217,164,65,.16); border-radius: 22px; padding: 32px 26px; }
.StepNum { font-family: Cairo, sans-serif; font-weight: 900; font-size: 46px; color: rgba(217,164,65,.28); line-height: 1; margin-bottom: 14px; }
.StepCard h3 { font-weight: 800; font-size: 21px; margin: 0 0 10px; color: #F1C75B; }
.StepCard p { font-size: 15.5px; color: #B8BBC7; margin: 0; line-height: 1.7; }


/* ---------- Testimonials ---------- */

.SecQuotes { padding: 80px 24px; background: linear-gradient(180deg,#080B18,#0a0e20); }
.SecQuotes .Wrap { max-width: 1120px; }
.SecQuotes .H2 { margin-bottom: 46px; }
.QuoteGrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 22px; }
.QuoteCard { background: linear-gradient(180deg,#10152A,#0b0f20); border: 1px solid rgba(217,164,65,.16); border-radius: 22px; padding: 28px 26px; display: flex; flex-direction: column; }
.QuoteMark { font-family: Cairo, sans-serif; font-size: 48px; color: rgba(217,164,65,.35); line-height: .6; margin-bottom: 6px; }
.QuoteText { font-size: 16px; color: #F7F3EA; line-height: 1.8; margin: 0 0 22px; flex: 1; }
.QuoteWho { display: flex; align-items: center; gap: 12px; }
.QuoteAvatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(140deg,#2a3358,#1a2140); border: 1px solid rgba(217,164,65,.3);
    display: flex; align-items: center; justify-content: center;
    font-family: Cairo, sans-serif; font-weight: 800; color: #F1C75B;
}
.QuoteName { font-family: Cairo, sans-serif; font-weight: 700; font-size: 15px; color: #F7F3EA; }
.QuoteRole { font-size: 13px; color: #B8BBC7; }


/* ---------- FAQ ---------- */

.SecFaq { padding: 88px 24px; background: #080B18; }
.FaqWrap { max-width: 820px; margin: 0 auto; }
.SecFaq .H2 { margin-bottom: 44px; }
.FaqList { display: flex; flex-direction: column; gap: 14px; }
.FaqItem { background: linear-gradient(180deg,#10152A,#0b0f20); border: 1px solid rgba(217,164,65,.16); border-radius: 16px; overflow: hidden; }
.FaqQ {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: transparent; border: none; cursor: pointer; padding: 20px 22px;
    text-align: right; color: #F7F3EA; font-family: Cairo, sans-serif; font-weight: 700; font-size: 17px;
}
.FaqSign {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(217,164,65,.12); color: #F1C75B;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    transition: transform .25s;
}
.FaqItem.Open .FaqSign { transform: rotate(45deg); }
.FaqA { display: none; }
.FaqItem.Open .FaqA { display: block; animation: softIn .2s ease; }
.FaqAInner { padding: 0 22px 22px; color: #B8BBC7; font-size: 15.5px; line-height: 1.8; }


/* ---------- Register wizard ---------- */

.SecRegister { padding: 88px 24px 120px; background: linear-gradient(180deg,#0a0e20,#060916); }
.RegWrap { max-width: 720px; margin: 0 auto; }
.SecRegister .SecHead { margin-bottom: 36px; }
.RegCard { background: linear-gradient(180deg,#10152A,#0b0f20); border: 1px solid rgba(217,164,65,.22); border-radius: 26px; padding: clamp(24px,5vw,40px); }

.RegBar { margin-bottom: 28px; }
.RegBarTop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.RegStep { font-family: Cairo, sans-serif; font-weight: 700; font-size: 14px; color: #F1C75B; }
.RegStepTitle { font-size: 13px; color: #B8BBC7; }
.RegBarTrack { height: 6px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.RegBarFill { height: 100%; width: 25%; border-radius: 99px; background: linear-gradient(90deg,#D9A441,#F1C75B); transition: width .35s ease; }

.RegStepPane { display: none; }
.RegStepPane.Active { display: block; animation: softIn .25s ease; }
.RegH3 { font-weight: 800; font-size: 22px; margin: 0 0 18px; color: #F7F3EA; }
.RegNote { font-size: 14px; color: #B8BBC7; margin: -10px 0 18px; }

.Fld { margin-bottom: 18px; }
.Fld label { display: block; font-size: 14px; color: #B8BBC7; margin-bottom: 8px; }
.Fld input[type=text], .Fld textarea {
    width: 100%; background: #0b0f20; border: 1px solid rgba(217,164,65,.25);
    border-radius: 12px; padding: 14px 16px; color: #F7F3EA; font-size: 16px; outline: none;
}
.Fld textarea { resize: vertical; }
.Fld input[type=text]:focus, .Fld textarea:focus { border-color: #F1C75B; }
.FldErr { color: #e88a7d; font-size: 13px; margin-top: 6px; display: none; }
.FldErr.Show { display: block; }
.Fld.Bad input[type=text], .Fld.Bad textarea { border-color: #e88a7d; }

.ChipGrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 12px; }
.Chip {
    display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: right;
    border-radius: 14px; padding: 14px; font-family: Cairo, sans-serif; font-weight: 700; font-size: 15px;
    background: #0b0f20; border: 1px solid rgba(217,164,65,.25); color: #F7F3EA; transition: all .2s;
}
.Chip.On { background: linear-gradient(180deg,#F1C75B,#D9A441); border-color: transparent; color: #080B18; }
.ChipIcon { font-size: 20px; }

.YesNo { display: flex; gap: 12px; margin-bottom: 18px; }
.YNBtn {
    flex: 1; cursor: pointer; border-radius: 14px; padding: 16px;
    font-family: Cairo, sans-serif; font-weight: 800; font-size: 17px; transition: all .2s;
    background: #0b0f20; border: 1px solid rgba(217,164,65,.25); color: #F7F3EA;
}
.YNBtn.On { background: linear-gradient(180deg,#F1C75B,#D9A441); border-color: transparent; color: #080B18; }
#ExpWrap { display: none; }
#ExpWrap.Show { display: block; animation: softIn .2s ease; }

.Consent {
    display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
    background: rgba(217,164,65,.06); border: 1px solid rgba(217,164,65,.2);
    border-radius: 14px; padding: 16px;
}
.Consent input { width: 20px; height: 20px; accent-color: #D9A441; margin-top: 2px; flex-shrink: 0; }
.Consent span { font-size: 15px; color: #F7F3EA; line-height: 1.6; }

.RegErr { color: #e88a7d; font-size: 14px; margin-top: 16px; display: none; }
.RegErr.Show { display: block; }
.RegNav { display: flex; gap: 12px; margin-top: 30px; }
.RegNav .BtnGhost { color: #B8BBC7; border-color: rgba(255,255,255,.15); }
.RegNav button { padding: 15px 24px; }
#StepPrev { display: none; }
#StepSubmit { display: none; }


/* ---------- Modals ---------- */

.Modal {
    position: fixed; inset: 0; z-index: 80; display: none;
    background: rgba(4,6,14,.8); backdrop-filter: blur(6px);
    overflow-y: auto;
}
.Modal.Open { display: flex; animation: softIn .2s ease; }
body.NoScroll { overflow: hidden; }

.SvcModal.Open { align-items: flex-end; justify-content: center; }
.ModalSheet {
    width: 100%; max-width: 640px; position: relative; margin-top: 40px;
    background: linear-gradient(180deg,#12172e,#0a0e1e);
    border: 1px solid rgba(217,164,65,.28); border-radius: 24px 24px 0 0;
    animation: fadeUp .3s ease;
}
.ModalClose {
    position: absolute; top: 16px; left: 16px; z-index: 3;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.15);
    color: #fff; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ModalArt {
    position: relative; height: 190px; overflow: hidden;
    background: radial-gradient(120% 130% at 50% 0%,#1c2444,#0a0e1e);
    border-radius: 24px 24px 0 0; display: flex; align-items: center; justify-content: center;
}
.ModalArt .SvcImg { width: 100%; height: 100%; object-fit: cover; }
.ModalArt .SvcGhost { font-size: 80px; opacity: .16; }
.ModalBadge {
    position: absolute; bottom: 16px; right: 20px; width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(180deg,#F1C75B,#D9A441);
    display: flex; align-items: center; justify-content: center; font-size: 26px;
    box-shadow: 0 8px 20px rgba(217,164,65,.4);
}
.ModalBody { padding: 26px 26px 32px; }
.ModalBody h3 { font-weight: 900; font-size: 26px; margin: 0 0 8px; color: #F7F3EA; }
.ModalBody > .Muted { font-size: 16px; margin-bottom: 24px; line-height: 1.7; }
.ModalSec { margin-bottom: 22px; }
.ModalSec h4 { font-family: Cairo, sans-serif; font-weight: 800; font-size: 17px; color: #F1C75B; margin: 0 0 12px; }
.ModalListChips { display: flex; flex-wrap: wrap; gap: 8px; }
.ModalChip { background: rgba(217,164,65,.08); border: 1px solid rgba(217,164,65,.22); border-radius: 99px; padding: 7px 14px; font-size: 14px; color: #F7F3EA; }
.ModalListTicks { display: flex; flex-direction: column; gap: 10px; }
.ModalTick { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #F7F3EA; }
.ModalTick span { color: #F1C75B; font-weight: 800; }
.ModalNote { background: rgba(217,164,65,.08); border: 1px solid rgba(217,164,65,.22); border-radius: 16px; padding: 18px 20px; margin-bottom: 26px; }
.ModalNote h4 { font-family: Cairo, sans-serif; font-weight: 800; font-size: 16px; color: #F1C75B; margin: 0 0 6px; }
.ModalNote p { font-size: 15px; color: #F7F3EA; margin: 0; line-height: 1.7; }
.ModalJoin { padding: 16px; font-size: 17px; border-radius: 15px; }

.OkModal.Open { align-items: center; justify-content: center; padding: 20px; }
.OkCard {
    background: linear-gradient(180deg,#10152A,#0b0f20); border: 1px solid rgba(217,164,65,.3);
    border-radius: 26px; padding: 56px 32px; text-align: center; max-width: 520px; width: 100%;
    animation: fadeUp .4s ease;
}
.OkTick {
    width: 88px; height: 88px; border-radius: 50%;
    background: linear-gradient(180deg,#F1C75B,#D9A441);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 26px; box-shadow: 0 14px 40px rgba(217,164,65,.4);
}
.OkTick span { font-size: 42px; color: #080B18; }
.OkCard h3 { font-weight: 900; font-size: 32px; margin: 0 0 14px; color: #F7F3EA; }
.OkLead { font-family: Cairo, sans-serif; font-weight: 700; font-size: 20px; color: #F1C75B; margin: 0 0 8px; }
.OkCard .Muted { margin-bottom: 30px; font-size: 16px; }


/* ---------- Sticky CTA ---------- */

.StickyWrap {
    display: none; position: fixed; bottom: 0; right: 0; left: 0; z-index: 55;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(0deg,#060916 70%,transparent); pointer-events: none;
}
.StickyBtn { pointer-events: auto; width: 100%; padding: 16px; font-size: 17px; border-radius: 15px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }


/* ---------- Footer ---------- */

.SiteFooter { display: block; background: #060916; border-top: 1px solid rgba(217,164,65,.15); padding: 56px 24px 30px; }
.FooterInner { max-width: 1120px; margin: 0 auto; }
.FooterGrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 36px; margin-bottom: 40px; }
.FooterLogo { height: 64px; width: auto; display: block; margin-bottom: 12px; }
.FooterAbout { font-size: 15px; color: #B8BBC7; line-height: 1.8; max-width: 300px; margin: 0; }
.FooterTitle { font-family: Cairo, sans-serif; font-weight: 700; font-size: 16px; color: #F7F3EA; margin-bottom: 16px; }
.FooterLinks { display: flex; flex-direction: column; gap: 12px; }
.FooterLinks a { font-size: 15px; color: #B8BBC7; transition: color .2s; }
.FooterLinks a:hover { color: #F1C75B; }
.FooterSocial { display: flex; flex-wrap: wrap; gap: 12px; }
.SocialCircle {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(217,164,65,.1); border: 1px solid rgba(217,164,65,.25);
    display: flex; align-items: center; justify-content: center;
    color: #F1C75B; font-size: 15px; transition: all .2s;
}
.SocialCircle:hover { background: rgba(217,164,65,.2); }
.FooterBottom { border-top: 1px solid rgba(255,255,255,.06); padding-top: 22px; text-align: center; color: #6b7089; font-size: 13px; }


/* ---------- Responsive ---------- */

.desk-only { display: flex; }
.mob-only { display: none; }

@media (max-width: 880px) {
    .desk-only { display: none !important; }
    .mob-only { display: flex !important; }
    .StickyWrap { display: block; }
    .HeroArt { width: 100%; opacity: .5; }
    .SecRegister { padding-bottom: 150px; }
    .ModalSheet { margin-top: 60px; }
}