/* =============================================================
   هندسة التقارير الإلكترونية — Webinar Landing Page
   Design system: black glassmorphism + blue accent, Marhey font
   ============================================================= */

:root{
  --bg: #05070d;
  --bg-soft: #0a0e1a;
  --surface: rgba(255,255,255,0.045);
  --surface-strong: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);

  --text: #f3f6fb;
  --text-muted: #93a0b8;
  --text-faint: #5c6785;

  --accent: #3b82f6;
  --accent-2: #38bdf8;
  --accent-3: #6366f1;
  --accent-soft: rgba(59,130,246,0.14);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --shadow-glow: 0 0 60px rgba(59,130,246,0.25);
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; margin:0; padding:0; }

html{ scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Marhey', 'Tahoma', 'Segoe UI', sans-serif;
  line-height: 1.85;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; }

.container{
  width:100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- background fx ---------- */
.bg-fx{ position:fixed; inset:0; z-index:-1; overflow:hidden; }
.orb{
  position:absolute; border-radius:50%;
  filter: blur(90px);
  opacity:.35;
  animation: drift 22s ease-in-out infinite;
}
.orb-1{ width:520px; height:520px; background: var(--accent); top:-10%; right:-10%; }
.orb-2{ width:460px; height:460px; background: var(--accent-3); bottom:-15%; left:-10%; animation-delay: -7s; }
.orb-3{ width:380px; height:380px; background: var(--accent-2); top:40%; left:35%; animation-delay: -14s; opacity:.2; }

@keyframes drift{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(-40px, 30px) scale(1.08); }
  66%{ transform: translate(30px,-30px) scale(0.95); }
}

.grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 100%);
}

/* ---------- reveal on scroll ---------- */
/* Opacity-only on purpose (no transform): a non-"none" transform on any
   ancestor creates a CSS containing block for position:fixed descendants,
   which broke the mobile country picker (it was positioning itself relative
   to .register-form instead of the real viewport while .reveal was still
   mid-transition or hadn't triggered yet). Keep this transform-free. */
.reveal{ opacity:0; transition: opacity .8s var(--ease); }
.reveal.in-view{ opacity:1; }

/* ---------- header ---------- */
.site-header{
  position: fixed; inset-inline:0; top:0; z-index:50;
  padding: 18px 0;
  transition: background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled{
  padding: 12px 0;
  background: rgba(5,7,13,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; flex-direction:column; line-height:1.3; }
.brand-name{ font-weight:700; font-size:1.05rem; }
.brand-role{ font-size:.8rem; color: var(--text-muted); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 999px; font-weight:600; white-space:nowrap;
  cursor:pointer; border:1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn:active{ transform: scale(.97); }

.btn-primary{
  background: linear-gradient(135deg, var(--accent-2), var(--accent), var(--accent-3));
  background-size: 160% 160%;
  color:#fff;
  box-shadow: 0 8px 24px rgba(59,130,246,0.35);
}
.btn-primary:hover{ background-position: 100% 0; box-shadow: 0 10px 32px rgba(59,130,246,0.5); transform: translateY(-2px); }

.btn-ghost{
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover{ background: var(--surface-strong); border-color: var(--accent); }

.btn-sm{ padding: 10px 20px; font-size:.85rem; }
.btn-lg{ padding: 16px 30px; font-size:1rem; }
.btn-block{ width:100%; }

.btn-spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  display:none; animation: spin .7s linear infinite;
}
.is-loading .btn-spinner{ display:inline-block; }
.is-loading .btn-label{ opacity:.7; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- hero ---------- */
.hero{ position:relative; padding: 168px 0 96px; }
.hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center;
}

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 18px; border-radius:999px;
  background: var(--accent-soft); border:1px solid rgba(59,130,246,0.35);
  color:#bcd6ff; font-size:.85rem; font-weight:600;
  margin-bottom:24px;
}

.hero-title{
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight:800; line-height:1.35; margin-bottom:22px;
}
.text-gradient{
  background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.text-accent{ color: var(--accent-2); font-weight:600; }

.hero-text{
  color: var(--text-muted); font-size: 1.08rem; max-width: 560px; margin-bottom: 34px;
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:44px; }
.hero-cta svg{ transform: scaleX(-1); } /* arrow points right in RTL flow */

.info-chips{ display:flex; flex-wrap:wrap; gap:14px; }
.chip{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius: var(--radius-sm);
  background: var(--surface); border:1px solid var(--border);
  backdrop-filter: blur(10px);
}
.chip-icon{ font-size:1.3rem; }
.chip b{ display:block; font-size:.92rem; font-weight:700; }
.chip small{ display:block; font-size:.72rem; color: var(--text-faint); }

/* ---------- hero visual ---------- */
.hero-visual{
  position:relative; display:flex; flex-direction:column; align-items:center;
  padding-top: 20px;
}
.visual-glow{
  position:absolute; width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(59,130,246,0.45), rgba(56,189,248,0.15) 55%, transparent 75%);
  filter: blur(10px); top:6%; z-index:0;
  animation: pulseGlow 5s ease-in-out infinite;
}
@keyframes pulseGlow{ 0%,100%{ transform: scale(1); opacity:1; } 50%{ transform: scale(1.08); opacity:.85; } }

.orbit-ring{
  position:absolute; border:1px dashed var(--border-strong); border-radius:50%;
  top:50%; left:50%; transform: translate(-50%,-50%);
}
.ring-1{ width:400px; height:400px; animation: spinSlow 40s linear infinite; }
.ring-2{ width:470px; height:470px; animation: spinSlow 60s linear infinite reverse; opacity:.6; }
@keyframes spinSlow{ to{ transform: translate(-50%,-50%) rotate(360deg); } }

.orbit-dot{
  position:absolute; color: var(--accent-2);
  background: var(--surface-strong); border:1px solid var(--border-strong);
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(8px);
  animation: floaty 6s ease-in-out infinite;
}
.orbit-dot svg{ width:22px; height:22px; }
.dot-a{ top:6%; left:2%; animation-delay:0s; }
.dot-b{ top:14%; right:0; animation-delay:1.4s; }
.dot-c{ bottom:22%; left:-2%; animation-delay:2.8s; }
@keyframes floaty{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } }

.presenter-photo{
  position:relative; z-index:1;
  width: min(360px, 80%);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
  transition: transform .15s ease-out;
  will-change: transform;
}

.presenter-tag{
  position:relative; z-index:1; margin-top: -8px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding: 14px 26px; border-radius: var(--radius-md);
  background: var(--surface); border:1px solid var(--border);
  backdrop-filter: blur(12px);
}
.presenter-tag-name{ font-weight:700; font-size:1.05rem; }
.presenter-tag-role{ font-size:.82rem; color: var(--text-muted); margin-top:2px; }

.social-row{ display:flex; gap:12px; margin-top:18px; }
.social-btn{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface); border:1px solid var(--border);
  color: var(--text-muted);
  transition: all .25s var(--ease);
}
.social-btn:hover{ color:#fff; border-color: var(--accent); background: var(--accent-soft); transform: translateY(-3px); }

.scroll-hint{ display:flex; justify-content:center; margin-top:60px; }
.scroll-hint span{
  width:26px; height:42px; border-radius:14px; border:2px solid var(--border-strong);
  position:relative; display:block;
}
.scroll-hint span::before{
  content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; border-radius:2px; background: var(--accent-2);
  animation: scrollDown 1.8s ease-in-out infinite;
}
@keyframes scrollDown{ 0%{ opacity:1; top:8px;} 70%{opacity:0; top:20px;} 100%{opacity:0; top:8px;} }

/* ---------- section shared ---------- */
section{ position:relative; padding: 110px 0; }
.section-head{ text-align:center; max-width:680px; margin:0 auto 64px; }
.section-head.align-start{ text-align: start; margin-inline: 0; }
.eyebrow{
  display:inline-block; color: var(--accent-2); font-weight:700; font-size:.85rem;
  letter-spacing:.02em; margin-bottom:14px;
}
.section-title{ font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight:800; margin-bottom:16px; }
.section-sub{ color: var(--text-muted); font-size:1.05rem; }

/* ---------- topics ---------- */
.topics-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.topic-card{
  position:relative;
  padding: 36px 30px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), rgba(255,255,255,0.02));
  border:1px solid var(--border);
  backdrop-filter: blur(14px);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
}
.topic-card:hover{ border-color: rgba(59,130,246,0.45); box-shadow: 0 24px 48px rgba(0,0,0,0.4), var(--shadow-glow); }
.topic-index{
  position:absolute; top:22px; left:26px;
  font-size:.85rem; font-weight:700; color: var(--text-faint);
}
.topic-icon{
  width:58px; height:58px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border:1px solid rgba(59,130,246,0.3);
  display:flex; align-items:center; justify-content:center;
  color: var(--accent-2);
  margin-bottom:22px;
}
.topic-icon svg{ width:28px; height:28px; }
.topic-card h3{ font-size:1.2rem; font-weight:700; margin-bottom:14px; line-height:1.6; }
.topic-card p{ color: var(--text-muted); font-size:.96rem; line-height:1.9; }

/* ---------- CTA banner ---------- */
.cta-banner{ padding: 40px 0 110px; }
.cta-panel{
  text-align:center; padding: 64px 32px;
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 140% at 50% 0%, rgba(59,130,246,0.16), transparent 60%), var(--surface);
  border:1px solid var(--border-strong);
  backdrop-filter: blur(16px);
}
.cta-panel h2{ font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight:800; margin-bottom:36px; }
.interested-count{ color: var(--accent-2); }

.countdown{ display:flex; justify-content:center; gap:16px; margin-bottom:40px; flex-wrap:wrap; }
.cd-item{
  min-width:82px; padding:16px 10px; border-radius: var(--radius-sm);
  background: var(--surface-strong); border:1px solid var(--border);
}
.cd-num{
  display:block; font-size:1.8rem; font-weight:800;
  background: linear-gradient(180deg, #fff, var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric: tabular-nums;
}
.cd-label{ display:block; font-size:.78rem; color: var(--text-muted); margin-top:4px; }

/* ---------- register ---------- */
.register-grid{
  display:grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items:start;
}

.register-form{
  padding: 36px; border-radius: var(--radius-lg);
  background: var(--surface); border:1px solid var(--border);
  backdrop-filter: blur(16px);
  display:flex; flex-direction:column; gap:22px;
}

.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:.92rem; font-weight:700; color: var(--text); }
.field input{
  width:100%; padding:14px 16px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04); border:1px solid var(--border);
  color: var(--text); font-family:inherit; font-size:16px;
  transition: border-color .2s ease, background .2s ease;
}
.field input::placeholder{ color: var(--text-faint); }
.field input:focus{
  outline:none; border-color: var(--accent); background: rgba(59,130,246,0.06);
}
.field input.invalid{ border-color:#f87171; }

/* ---------- country searchable combobox ---------- */
.country-field{ position:relative; }
.country-trigger{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04); border:1px solid var(--border);
  color: var(--text); font-family:inherit; font-size:16px;
  cursor:pointer; text-align:start;
  transition: border-color .2s ease, background .2s ease;
}
.country-trigger:hover{ border-color: var(--border-strong); }
.country-field.open .country-trigger{ border-color: var(--accent); background: rgba(59,130,246,0.06); }
.country-trigger.invalid{ border-color:#f87171; }
.country-trigger-flag{
  width:24px; height:18px; border-radius:4px; flex-shrink:0;
  background: rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.country-trigger-flag img{ width:24px; height:18px; border-radius:4px; object-fit:cover; box-shadow: 0 0 0 1px rgba(255,255,255,0.1); }
.country-trigger-label{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.country-trigger-label.placeholder{ color: var(--text-faint); }
.country-chevron{ flex-shrink:0; color: var(--text-muted); transition: transform .2s ease; }
.country-field.open .country-chevron{ transform: rotate(180deg); }

.country-dropdown{
  position:absolute; z-index:30; inset-inline:0; top: calc(100% + 8px);
  background: #0a0e1c; border:1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  display:flex; flex-direction:column; height:320px; max-height:320px; overflow:hidden;
}
/* the [hidden] attribute alone loses to the ".country-dropdown{display:flex}" rule above
   (author CSS beats the UA default [hidden]{display:none} at equal/no !important), so the
   panel would stay visually open forever regardless of the JS toggling the attribute.
   This rule wins on specificity and forces it closed whenever [hidden] is present. */
.country-dropdown[hidden]{ display:none; }
.country-search-wrap{
  padding:10px; border-bottom:1px solid var(--border); flex-shrink:0;
  display:flex; align-items:center; gap:8px;
}
.country-search-wrap input{
  flex:1; min-width:0; padding:11px 14px; border-radius:10px; font-size:16px;
  background: rgba(255,255,255,0.05); border:1px solid var(--border);
  color: var(--text); font-family:inherit;
}
.country-search-wrap input:focus{ outline:none; border-color: var(--accent); }
.country-close-btn{
  flex-shrink:0; width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.05); border:1px solid var(--border);
  color: var(--text-muted); cursor:pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.country-close-btn:hover{ background: rgba(248,113,113,0.15); border-color: rgba(248,113,113,0.4); color:#f87171; }
.country-list{ flex: 1 1 auto; min-height: 0; overflow-y:auto; padding:6px; }
.country-option{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; cursor:pointer; font-size:.95rem;
}
.country-option img{ width:22px; height:16px; border-radius:3px; flex-shrink:0; object-fit:cover; box-shadow: 0 0 0 1px rgba(255,255,255,0.1); }
.country-option:hover, .country-option.active{ background: var(--accent-soft); }
.country-empty{ padding:18px; text-align:center; color: var(--text-faint); font-size:.9rem; }

/* This backdrop is not used at all anymore — kept as a no-op element in the
   HTML only so it doesn't error out. On mobile the dropdown itself now takes
   over the full screen (below), which needs no separate dimming layer and
   avoids an entire class of position:fixed-vs-position:absolute mismatch
   bugs (backdrop staying visible with nothing underneath after scrolling,
   blur rendering artifacts on iOS Safari when the on-screen keyboard opens). */
.country-backdrop{ display:none !important; }

/* On small screens the dropdown becomes a full-screen takeover instead of a
   small anchored panel — simplest, most robust pattern for a mobile picker:
   one element, no separate backdrop, no partial positioning that can end up
   off-screen or interact badly with the virtual keyboard resizing the
   viewport. The close (✕) button is always at a fixed spot at the top. */
@media (max-width: 640px){
  .country-dropdown{
    position:fixed;
    inset:0;
    height:100%;
    max-height:100%;
    border-radius:0;
    z-index:60;
  }
  .country-list{ padding:10px; }
  .country-option{ padding:14px 12px; font-size:1rem; }
}

.hint{ font-size:.78rem; color: var(--text-faint); }
.error-msg{ font-size:.8rem; color:#f87171; min-height:1em; display:block; }

.form-status{
  text-align:center; font-size:.92rem; min-height: 1.4em; font-weight:600;
}
.form-status.success{ color:#4ade80; }
.form-status.error{ color:#f87171; }

/* ================= responsive ================= */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-content{ order:2; text-align:center; }
  .hero-visual{ order:1; }
  .hero-text{ margin-inline:auto; }
  .hero-cta{ justify-content:center; }
  .info-chips{ justify-content:center; }
  .topics-grid{ grid-template-columns: 1fr; }
  .register-grid{ grid-template-columns: 1fr; gap:36px; }
  .section-head.align-start{ text-align:center; margin-inline:auto; }
}

@media (max-width: 560px){
  .hero{ padding-top:140px; }
  section{ padding: 76px 0; }
  .register-form{ padding: 26px 20px; }
  .cta-panel{ padding: 44px 20px; }
  .countdown{ gap:10px; }
  .cd-item{ min-width:68px; padding:12px 6px; }
  .container{ padding-inline: 16px; }
  .brand-role{ display:none; }
  .brand-name{ font-size:.92rem; }
  .btn-sm{ padding: 9px 16px; font-size:.78rem; }
}

@media (hover:none){
  .tilt{ transform:none !important; }
}