/* =========================================================
   ArabianPASSION Design System
   Hero showcase with on-demand glass access panel
   ========================================================= */
 
:root {
    color-scheme: dark;
    --ap-black: #07080d;
    --ap-black-soft: #0c0e14;
    --ap-gold: #d4af37;
    --ap-gold-dark: #ad8122;
    --ap-gold-light: #edcf70;
    --ap-ivory: #f6f1e8;
    --ap-text: #f8f5ee;
    --ap-text-muted: #c4c0b7;
    --ap-glass-border: rgba(212,175,55,.34);
    --ap-line: rgba(255,255,255,.11);
    --ap-blur: blur(24px);
    --shadow-soft: 0 22px 80px rgba(0,0,0,.48);
    --shadow-gold: 0 18px 50px rgba(212,175,55,.22);
    --radius-sm: 12px;
    --radius-md: 17px;
    --radius-lg: 26px;
    --max-content-width: 1520px;
    --page-padding: clamp(22px,5vw,76px);
}
 
*,*::before,*::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--ap-black); }
body { min-width:320px; min-height:100vh; margin:0; overflow-x:hidden; color:var(--ap-text); background:var(--ap-black); font-family:"Inter",system-ui,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; }
body,button,input,select,textarea { font:inherit; }
button { border:0; }
a { color:inherit; }
h1,h2,h3,h4,p { margin-top:0; }
h1,h2,h3,h4 { color:var(--ap-ivory); font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; }
::selection { color:var(--ap-black); background:var(--ap-gold-light); }
 
.glass-card { border:1px solid var(--ap-glass-border); border-radius:var(--radius-lg); background:linear-gradient(145deg,rgba(18,19,25,.82),rgba(7,8,13,.72)); box-shadow:var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:var(--ap-blur); -webkit-backdrop-filter:var(--ap-blur); }
.ap-button { min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 22px; border:1px solid transparent; border-radius:var(--radius-md); color:var(--ap-black); background:linear-gradient(135deg,var(--ap-gold-light),var(--ap-gold-dark)); box-shadow:0 10px 25px rgba(212,175,55,.14); text-decoration:none; font-weight:800; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }
.ap-button:hover { transform:translateY(-2px); filter:brightness(1.06); box-shadow:var(--shadow-gold); }
.ap-button-secondary { color:var(--ap-ivory); border-color:rgba(255,255,255,.24); background:rgba(7,8,13,.40); box-shadow:none; backdrop-filter:blur(12px); }
.ap-button-secondary:hover { color:var(--ap-gold-light); border-color:var(--ap-glass-border); }
.ap-button:focus-visible,.landing-language button:focus-visible,.access-close:focus-visible,.access-tabs button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:2px solid var(--ap-gold-light); outline-offset:3px; }
 
.landing-page { min-height:100vh; overflow:hidden; background:var(--ap-black); }
.hero-section { position:relative; min-height:100svh; display:grid; align-items:center; padding:100px var(--page-padding) 58px; isolation:isolate; overflow:hidden; background-color:var(--ap-black); background-image:linear-gradient(90deg,rgba(3,4,8,.78) 0%,rgba(3,4,8,.46) 34%,rgba(3,4,8,.12) 65%,rgba(3,4,8,.34) 100%),linear-gradient(180deg,rgba(7,8,13,.05) 0%,rgba(7,8,13,.10) 62%,rgba(7,8,13,.72) 100%),url("/static/images/hero/hero-dubai-arabian-horse.webp"); background-size:cover; background-position:center; background-repeat:no-repeat; }
.hero-section::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(circle at 58% 52%,rgba(212,175,55,.08),transparent 38%),linear-gradient(180deg,transparent 76%,var(--ap-black) 100%); }
.hero-shade { position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,rgba(7,8,13,.18),transparent 50%); }
.landing-topbar { position:absolute; inset:0 0 auto; z-index:3; min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:21px var(--page-padding); }
.landing-brand { display:inline-flex; align-items:center; gap:14px; text-decoration:none; }
.landing-brand-mark { width:55px; height:55px; display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--ap-glass-border); border-radius:50%; color:var(--ap-gold); background:rgba(7,8,13,.68); box-shadow:var(--shadow-gold); }
.landing-brand-copy { display:grid; gap:2px; }
.landing-brand-copy strong { color:var(--ap-gold-light); font-family:"Cormorant Garamond",serif; font-size:1.42rem; line-height:1; letter-spacing:.075em; }
.landing-brand-copy small { color:var(--ap-text-muted); font-size:.61rem; letter-spacing:.13em; }
.landing-language { display:flex; gap:6px; padding:5px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(7,8,13,.50); backdrop-filter:blur(16px); }
.landing-language button { min-width:42px; min-height:38px; padding:7px 11px; border-radius:999px; color:var(--ap-text-muted); background:transparent; cursor:pointer; }
.landing-language button:hover,.landing-language button.active { color:var(--ap-black); background:linear-gradient(135deg,var(--ap-gold-light),var(--ap-gold-dark)); }
.hero-content { width:min(100%,var(--max-content-width)); min-height:calc(100svh - 158px); margin:0 auto; display:grid; align-items:center; }
.hero-content-showcase { grid-template-columns:minmax(0,780px) 1fr; }
.hero-message { max-width:760px; padding-block:44px; }
.hero-kicker,.section-heading>p,.access-brand p { margin:0 0 14px; color:var(--ap-gold-light); font-size:.74rem; font-weight:800; letter-spacing:.22em; }
.hero-message h1 { display:grid; margin:0; font-size:clamp(4rem,7.2vw,7.35rem); line-height:.83; letter-spacing:-.027em; text-shadow:0 20px 55px rgba(0,0,0,.58); }
.hero-message h1 span:nth-child(2) { color:var(--ap-gold-light); }
.hero-subtitle { margin:28px 0 9px; font-family:"Cormorant Garamond",serif; font-size:clamp(1.6rem,2.35vw,2.28rem); }
.hero-description { max-width:690px; margin:0; color:rgba(246,241,232,.88); font-size:clamp(.98rem,1.2vw,1.13rem); line-height:1.72; text-shadow:0 2px 16px rgba(0,0,0,.8); }
.hero-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:29px; }
.hero-signals { display:flex; flex-wrap:wrap; gap:18px; margin-top:26px; color:rgba(246,241,232,.82); font-size:.8rem; }
.hero-signals span { display:inline-flex; align-items:center; gap:7px; }
.hero-signals i { color:var(--ap-gold); }
.scroll-cue { position:absolute; left:50%; bottom:18px; z-index:2; display:grid; justify-items:center; gap:4px; color:rgba(246,241,232,.72); font-size:.68rem; letter-spacing:.16em; text-decoration:none; transform:translateX(-50%); }
.scroll-cue i { color:var(--ap-gold); }
 
.platform-section { position:relative; padding:96px var(--page-padding) 110px; background:radial-gradient(circle at 82% 14%,rgba(212,175,55,.09),transparent 30%),linear-gradient(180deg,var(--ap-black),#090b10); }
.section-heading,.feature-grid { width:min(100%,var(--max-content-width)); margin-inline:auto; }
.section-heading { max-width:880px; margin-bottom:43px; text-align:center; }
.section-heading h2 { margin:0; font-size:clamp(2.45rem,4.4vw,4.7rem); line-height:1; }
.section-heading>span { display:block; margin-top:15px; color:var(--ap-text-muted); line-height:1.65; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.feature-card { position:relative; min-height:238px; padding:29px; overflow:hidden; transition:transform .24s ease,border-color .24s ease; }
.feature-card:hover { transform:translateY(-4px); border-color:rgba(212,175,55,.50); }
.feature-card>i { margin-bottom:28px; color:var(--ap-gold); font-size:1.72rem; }
.feature-card h3 { margin-bottom:12px; font-size:1.67rem; }
.feature-card p { max-width:94%; margin-bottom:0; color:var(--ap-text-muted); line-height:1.62; }
.feature-card>span { position:absolute; right:19px; bottom:9px; color:rgba(212,175,55,.12); font-family:"Cormorant Garamond",serif; font-size:4.3rem; font-weight:700; line-height:1; }
.feature-card-highlight { background:linear-gradient(145deg,rgba(65,49,18,.72),rgba(11,12,17,.80)); }
.landing-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px var(--page-padding); border-top:1px solid rgba(255,255,255,.08); color:var(--ap-text-muted); background:#05060a; }
.landing-footer div { display:grid; gap:3px; }
.landing-footer strong { color:var(--ap-gold-light); font-family:"Cormorant Garamond",serif; letter-spacing:.08em; }
.landing-footer span,.landing-footer p { margin:0; font-size:.76rem; }
 
/* Access interaction */
body.access-open { overflow:hidden; }
body.access-open .landing-page { filter:blur(12px) saturate(.85) brightness(.72); transform:scale(1.012); }
.landing-page { transition:filter .32s ease,transform .32s ease; }
.access-layer[hidden] { display:none; }
.access-layer { position:fixed; inset:0; z-index:1000; display:grid; align-items:center; justify-items:end; padding:clamp(18px,4vw,56px); opacity:0; visibility:hidden; transition:opacity .26s ease,visibility .26s ease; }
.access-layer.visible { opacity:1; visibility:visible; }
.access-backdrop { position:absolute; inset:0; width:100%; height:100%; cursor:default; background:rgba(3,4,8,.28); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.access-panel { position:relative; z-index:1; width:min(100%,510px); max-height:calc(100svh - 36px); overflow:auto; padding:clamp(26px,3vw,40px); opacity:0; transform:translateX(34px) scale(.985); transition:opacity .3s ease,transform .3s ease; background:linear-gradient(145deg,rgba(14,15,21,.88),rgba(7,8,13,.80)); }
.access-layer.visible .access-panel { opacity:1; transform:translateX(0) scale(1); }
.access-close { position:absolute; top:16px; right:16px; width:39px; height:39px; display:grid; place-items:center; border:1px solid var(--ap-line); border-radius:50%; color:var(--ap-text-muted); background:rgba(255,255,255,.05); cursor:pointer; }
.access-close:hover { color:var(--ap-gold-light); border-color:var(--ap-glass-border); }
.access-brand { display:flex; align-items:center; gap:15px; padding-right:45px; }
.access-brand>span { width:50px; height:50px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:var(--ap-black); background:linear-gradient(135deg,var(--ap-gold-light),var(--ap-gold-dark)); }
.access-brand p { margin-bottom:3px; font-size:.64rem; }
.access-brand h2 { margin:0; font-size:2.1rem; }
.access-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:26px 0 22px; padding:5px; border:1px solid var(--ap-line); border-radius:14px; background:rgba(255,255,255,.035); }
.access-tabs button { min-height:43px; border-radius:10px; color:var(--ap-text-muted); background:transparent; font-weight:800; cursor:pointer; }
.access-tabs button.active { color:var(--ap-black); background:linear-gradient(135deg,var(--ap-gold-light),var(--ap-gold-dark)); }
.access-tab-panel { opacity:0; transform:translateY(7px); }
.access-tab-panel.active { opacity:1; transform:translateY(0); transition:opacity .2s ease,transform .2s ease; }
.access-intro { margin:0 0 21px; color:var(--ap-text-muted); line-height:1.55; }
.login-form { display:grid; gap:11px; }
.login-form>label,.password-label-row { color:var(--ap-ivory); font-size:.82rem; font-weight:700; }
.password-label-row { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:5px; }
.password-label-row label { margin:0; }
.password-label-row a { color:var(--ap-gold-light); text-decoration:none; }
.input-shell { min-height:53px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; padding:0 15px; border:1px solid rgba(255,255,255,.13); border-radius:var(--radius-sm); background:rgba(255,255,255,.055); transition:border-color .2s ease,box-shadow .2s ease; }
.input-shell:focus-within { border-color:var(--ap-gold); box-shadow:0 0 0 3px rgba(212,175,55,.14); }
.input-shell>i { color:var(--ap-gold); }
.input-shell input,.input-shell select { width:100%; min-width:0; padding:15px 0; border:0; outline:0; color:var(--ap-ivory); background:transparent; }
.input-shell select option { color:var(--ap-text); background:var(--ap-black-soft); }
.input-shell input::placeholder { color:rgba(196,192,183,.52); }
.password-toggle { width:35px; height:35px; display:grid; place-items:center; color:var(--ap-text-muted); background:transparent; cursor:pointer; }
.password-toggle:hover { color:var(--ap-gold-light); }
.login-submit { width:100%; min-height:54px; margin-top:10px; }
.access-note { margin:20px 0 0; color:rgba(196,192,183,.58); font-size:.74rem; line-height:1.5; text-align:center; }
 
/* ---------- RTL: fixed hero composition, RTL forms ---------- */
 
html[dir="rtl"] body {
    font-family: "Noto Kufi Arabic", "Inter", sans-serif;
}
 
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .landing-brand-copy strong,
html[dir="rtl"] .hero-subtitle {
    font-family: "Noto Kufi Arabic", "Cormorant Garamond", serif;
}
 
/* The background composition never moves. */
html[dir="rtl"] .landing-topbar,
html[dir="rtl"] .hero-content,
html[dir="rtl"] .hero-content-showcase {
    direction: ltr;
}
 
html[dir="rtl"] .landing-brand,
html[dir="rtl"] .landing-language {
    direction: ltr;
}
 
/* Arabic content remains on the left, but Arabic text flows correctly. */
html[dir="rtl"] .hero-message {
    justify-self: start;
    direction: rtl;
    text-align: left;
}
 
html[dir="rtl"] .hero-message h1,
html[dir="rtl"] .hero-kicker,
html[dir="rtl"] .hero-subtitle,
html[dir="rtl"] .hero-description {
    width: 100%;
    text-align: left;
}
 
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .hero-signals {
    direction: rtl;
    justify-content: flex-end;
}
 
html[dir="rtl"] .feature-card {
    direction: rtl;
    text-align: right;
}
 
html[dir="rtl"] .feature-card > span {
    right: auto;
    left: 19px;
}
 
/* Only the access window uses an RTL interface. */
html[dir="rtl"] .access-panel {
    direction: rtl;
    text-align: right;
}
 
/* The access panel stays on the right for every language. */
html[dir="rtl"] .access-layer {
    justify-items: end;
}
 
html[dir="rtl"] .access-panel {
    transform: translateX(34px) scale(.985);
}
 
html[dir="rtl"] .access-layer.visible .access-panel {
    transform: translateX(0) scale(1);
}
 
html[dir="rtl"] .access-close {
    right: 16px;
    left: auto;
}
 
html[dir="rtl"] .access-brand {
    padding-right: 45px;
    padding-left: 0;
}
 
html[dir="rtl"] .login-submit i {
    transform: scaleX(-1);
}
 
@media (max-width:900px) {
    .hero-section { background-position:45% center; }
    .hero-content-showcase { grid-template-columns:1fr; }
    .hero-message { max-width:760px; padding-top:70px; }
    .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
    :root { --page-padding:20px; }
    .hero-section { min-height:100svh; padding-top:112px; padding-bottom:74px; background-position:43% center; background-image:linear-gradient(180deg,rgba(4,5,9,.42),rgba(4,5,9,.60) 54%,rgba(4,5,9,.92)),url("/static/images/hero/hero-dubai-arabian-horse.webp"); }
    .landing-topbar { align-items:flex-start; padding-top:18px; }
    .landing-brand-mark { width:46px; height:46px; }
    .landing-brand-copy strong { font-size:1.06rem; }
    .landing-brand-copy small { display:none; }
    .landing-language button { min-width:35px; min-height:34px; padding:6px 8px; font-size:.72rem; }
    .hero-content { min-height:0; }
    .hero-message { padding-top:20px; }
    .hero-message h1 { font-size:clamp(3rem,16vw,5rem); line-height:.88; }
    .hero-actions { display:grid; }
    .hero-actions .ap-button { width:100%; }
    .scroll-cue { display:none; }
    .feature-grid { grid-template-columns:1fr; }
    .landing-footer { align-items:flex-start; flex-direction:column; }
    .access-layer,html[dir="rtl"] .access-layer { align-items:end; justify-items:stretch; padding:0; }
    .access-panel,html[dir="rtl"] .access-panel { width:100%; max-height:92svh; border-radius:24px 24px 0 0; transform:translateY(40px); }
    .access-layer.visible .access-panel,html[dir="rtl"] .access-layer.visible .access-panel { transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}