/* Design is 1920px wide; --u is one design pixel. */
:root {
  --u: calc(min(100vw, 1920px) / 1920);
  --bg: #030b11;
  --cyan: #5affff;
  --cyan-soft: #49bdc8;
  --navy: #1c244d;
  --navy-border: #357499;
  --text: #ffffff;
  --muted: #d9dde0;
  --font: "Cairo", "Segoe UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon.solid { fill: currentColor; stroke: none; }

.page { position: relative; isolation: isolate; overflow-x: clip; }
.swirl {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: calc(3750 * var(--u));
  width: calc(2690 * var(--u)); height: calc(1508 * var(--u));
  margin-left: calc(-1345 * var(--u)); margin-top: calc(-754 * var(--u));
  background: url("../assets/photo/swirl.jpg") center / cover no-repeat;
  opacity: .5; transform: rotate(-26.71deg);
}
.glow {
  position: absolute; z-index: -1; pointer-events: none; left: 0; right: 0;
  top: calc(1500 * var(--u)); height: calc(1500 * var(--u));
  background:
    radial-gradient(ellipse 45% 30% at 50% 30%, rgba(8, 10, 80, .75), transparent 70%),
    radial-gradient(ellipse 40% 22% at 40% 62%, rgba(60, 10, 70, .45), transparent 70%);
}

/* ---------- Buttons / shared ---------- */
.btn {
  display: flex; align-items: center; justify-content: center;
  height: calc(70 * var(--u)); border-radius: 999px;
  background: var(--cyan); color: #0a1530;
  font-weight: 700; font-size: calc(24 * var(--u));
  box-shadow: 0 0 calc(24 * var(--u)) rgba(90, 255, 255, .45);
  transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 calc(36 * var(--u)) rgba(90, 255, 255, .7); }
.cyan { color: var(--cyan); }
.container { width: calc(1440 * var(--u)); margin-inline: auto; }

/* ---------- Header (same as webinar.maflam.com) ---------- */
header {
  position: fixed; top: 0; right: 0; left: 0; z-index: 100;
  padding: 1.5rem 2rem; transition: all .3s ease; font-family: 'Almarai', 'Segoe UI', Tahoma, sans-serif;
}
header.scrolled { background: rgba(3, 11, 17, .9); backdrop-filter: blur(12px); padding: 1rem 2rem; box-shadow: 0 8px 30px rgba(0, 0, 0, .4); }
.header-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.logo img { height: 34px; width: auto; }
.nav-links { display: flex; gap: 2.5rem; }
.nav-links a { opacity: .8; transition: opacity .2s; font-size: .95rem; }
.nav-links a:hover { opacity: 1; color: #5affea; }
.nav-actions { display: flex; align-items: center; gap: 1.5rem; }
.btn-login { padding: .6rem 1.5rem; border: 1px solid #5affea; border-radius: 999px; color: #5affea; font-size: .9rem; transition: all .2s; }
.btn-login:hover { background: #5affea; color: var(--bg); }

/* ---------- Hero ---------- */
.hero {
  position: relative; height: calc(1205 * var(--u)); text-align: center; overflow: clip;
  padding-top: calc(238 * var(--u));
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(to bottom, rgba(3, 11, 17, .15) 0%, rgba(3, 11, 17, .25) 45%, rgba(3, 11, 17, .85) 75%, var(--bg) 100%),
    url("../assets/photo/hero-bg.jpg") center top / cover no-repeat;
}
.hero__text { position: relative; z-index: 1; }
.hero .l1, .hero .l2 { font-size: calc(56 * var(--u)); line-height: calc(84 * var(--u)); font-weight: 700; }
.hero .l2 { color: var(--cyan); }
.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(14 * var(--u));
  margin-top: calc(33 * var(--u)); height: calc(46 * var(--u)); padding-inline: calc(24 * var(--u));
  border-radius: 999px; border: 1px solid #373c8d; background: rgba(39, 44, 106, .85);
  color: var(--cyan); font-weight: 700; font-size: calc(20 * var(--u));
}
.badge .dot { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: var(--cyan); }
.hero h1 { margin-top: calc(6 * var(--u)); font-size: calc(112 * var(--u)); line-height: calc(130 * var(--u)); font-weight: 700; }
.hero .sub { margin-top: calc(46 * var(--u)); font-size: calc(28 * var(--u)); line-height: calc(44 * var(--u)); font-weight: 300; color: #e2e4e6; }
.pills { margin-top: calc(49 * var(--u)); display: flex; justify-content: center; gap: calc(14 * var(--u)); }
.pill {
  width: calc(270 * var(--u)); height: calc(48 * var(--u)); border-radius: 999px;
  border: 1px solid var(--cyan-soft); background: rgba(30, 35, 74, .92);
  display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
  font-weight: 600; font-size: calc(20 * var(--u));
}
.pill .icon { color: var(--cyan); font-size: calc(20 * var(--u)); }
.hero .btn { width: calc(838 * var(--u)); margin: calc(32 * var(--u)) auto 0; }

/* ---------- Story ---------- */
.story { margin-top: calc(-112 * var(--u)); position: relative; }
.story-grid { display: grid; grid-template-columns: calc(704 * var(--u)) calc(640 * var(--u)); justify-content: space-between; align-items: center; height: calc(382 * var(--u)); }
.story h2 { font-size: calc(44 * var(--u)); line-height: calc(66 * var(--u)); font-weight: 700; }
.story p { margin-top: calc(22 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(41 * var(--u)); font-weight: 300; color: var(--muted); }
.story p.hl { margin-top: calc(22 * var(--u)); color: var(--cyan); font-weight: 600; font-size: calc(22 * var(--u)); }
.story .rule { margin-top: calc(24 * var(--u)); height: 2px; width: calc(560 * var(--u)); background: linear-gradient(to left, var(--cyan-soft), transparent); }
.qs { display: grid; gap: calc(20 * var(--u)); }
.q {
  height: calc(102 * var(--u)); border-radius: calc(16 * var(--u)); border: 1px solid var(--navy-border);
  background: var(--navy); display: flex; align-items: center; gap: calc(24 * var(--u)); padding-inline: calc(34 * var(--u));
  font-size: calc(30 * var(--u)); font-weight: 500;
}
.q b { color: var(--cyan); font-size: calc(40 * var(--u)); font-weight: 600; }

/* ---------- Learn ---------- */
.learn { margin-top: calc(246 * var(--u)); text-align: center; }
.learn h2 { font-size: calc(54 * var(--u)); line-height: calc(80 * var(--u)); font-weight: 700; }
.features { margin: calc(70 * var(--u)) auto 0; width: calc(1300 * var(--u)); display: flex; flex-wrap: wrap; justify-content: center; gap: calc(56 * var(--u)) calc(80 * var(--u)); }
.feature { width: calc(380 * var(--u)); }
.feature .icon { width: calc(48 * var(--u)); height: calc(48 * var(--u)); color: var(--cyan); margin-inline: auto; }
.feature p { margin-top: calc(27 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(38.5 * var(--u)); font-weight: 300; }
.learn .btn { width: calc(720 * var(--u)); margin: calc(95 * var(--u)) auto 0; }

/* ---------- Speaker ---------- */
.speaker-wrap { margin-top: calc(173 * var(--u)); }
.speaker {
  width: calc(1600 * var(--u)); margin-inline: auto; height: calc(760 * var(--u));
  border: 1px solid #1fc8c0; border-radius: calc(24 * var(--u)); background: rgba(4, 14, 22, .92);
  padding-inline: calc(80 * var(--u)); display: flex; align-items: center; justify-content: space-between;
}
.speaker img { width: calc(480 * var(--u)); height: calc(560 * var(--u)); object-fit: cover; flex: none; }
.s-body { width: calc(864 * var(--u)); }
.s-body h2 { font-size: calc(44 * var(--u)); line-height: calc(59 * var(--u)); font-weight: 700; }
.s-body h3 { margin-top: calc(18 * var(--u)); color: var(--cyan); font-size: calc(30 * var(--u)); line-height: calc(40 * var(--u)); font-weight: 700; }
.s-body h3 span { margin-inline: calc(8 * var(--u)); font-weight: 300; }
.s-body .bio { margin-top: calc(28 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(41 * var(--u)); font-weight: 300; color: var(--muted); }
.chips { margin-top: calc(26 * var(--u)); display: flex; gap: calc(10.5 * var(--u)); }
.chip {
  height: calc(43 * var(--u)); padding-inline: calc(26 * var(--u)); border-radius: 999px; border: 1px solid var(--cyan-soft);
  display: flex; align-items: center; color: var(--cyan); font-size: calc(19 * var(--u)); font-weight: 600; white-space: nowrap;
}
.s-body .lead { margin-top: calc(30 * var(--u)); font-size: calc(26 * var(--u)); line-height: calc(42 * var(--u)); font-weight: 700; }
.s-body .btn { width: calc(262 * var(--u)); margin-top: calc(28 * var(--u)); }

/* ---------- For you ---------- */
.foryou { margin-top: calc(274 * var(--u)); text-align: center; }
.foryou h2 { font-size: calc(54 * var(--u)); line-height: calc(66 * var(--u)); font-weight: 700; }
.cards { margin-top: calc(33 * var(--u)); display: grid; grid-template-columns: repeat(4, calc(345 * var(--u))); gap: calc(20 * var(--u)); justify-content: center; }
.card {
  position: relative; height: calc(480 * var(--u)); border-radius: calc(16 * var(--u)); overflow: hidden; text-align: start;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0 calc(30 * var(--u)) calc(39 * var(--u));
  background-size: cover; background-position: center;
}
.card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(33, 38, 112, .96) 0%, rgba(33, 38, 112, .78) 28%, rgba(33, 38, 112, 0) 62%); }
.card > * { position: relative; }
.card i { display: block; width: calc(48 * var(--u)); height: 3px; background: var(--cyan); margin-bottom: calc(22 * var(--u)); }
.card p { font-size: calc(26 * var(--u)); line-height: calc(36.5 * var(--u)); font-weight: 600; }
.foryou .note { margin-top: calc(67 * var(--u)); color: var(--cyan); font-size: calc(28 * var(--u)); line-height: calc(31 * var(--u)); font-weight: 500; }
.foryou .btn { width: calc(561 * var(--u)); margin: calc(18 * var(--u)) auto 0; }

/* ---------- CTA ---------- */
.cta-wrap { margin-top: calc(238 * var(--u)); }
.cta {
  width: calc(1440 * var(--u)); height: calc(544 * var(--u)); margin-inline: auto; border-radius: calc(24 * var(--u));
  background: url("../assets/photo/cta-bg.png") center / 100% 100% no-repeat; text-align: center; padding-top: calc(96 * var(--u));
}
.cta h2 { font-size: calc(50 * var(--u)); line-height: calc(80 * var(--u)); font-weight: 700; }
.cta .p { margin-top: calc(24 * var(--u)); font-size: calc(26 * var(--u)); line-height: calc(35 * var(--u)); font-weight: 300; }
.meta { margin-top: calc(30 * var(--u)); display: flex; justify-content: center; align-items: center; font-size: calc(22 * var(--u)); font-weight: 600; }
.meta span { display: flex; align-items: center; gap: calc(10 * var(--u)); padding-inline: calc(30 * var(--u)); height: calc(28 * var(--u)); }
.meta span + span { border-inline-start: 1px solid rgba(255, 255, 255, .25); }
.meta .icon { color: var(--cyan); font-size: calc(20 * var(--u)); }
.cta .gift { margin-top: calc(26 * var(--u)); display: flex; justify-content: center; align-items: center; gap: calc(10 * var(--u)); color: var(--cyan); font-size: calc(22 * var(--u)); font-weight: 600; line-height: calc(33 * var(--u)); }
.cta .btn { width: calc(262 * var(--u)); margin: calc(26 * var(--u)) auto 0; }

/* ---------- Footer (same as webinar.maflam.com) ---------- */
footer { position: relative; padding: 6rem 2rem 3rem; margin-top: 4rem; overflow: hidden; font-family: 'Almarai', 'Segoe UI', Tahoma, sans-serif; }
.footer-bg { position: absolute; inset: 0; z-index: 0; }
.footer-bg img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.footer-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 0%, #000000b3 25%, #000000ab 70%, var(--bg) 100%); }
footer .container { position: relative; z-index: 1; width: auto; max-width: 1400px; margin: 0 auto; }
.footer-big { text-align: center; font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; margin-bottom: 4rem; line-height: 1.2; }
.footer-big span { color: #5affea; }
.footer-big .sub { display: block; color: #fff; font-weight: 700; font-size: 51px; margin: 19px 0; }
.footer-divider { height: 1px; background: rgba(255, 255, 255, .1); margin: 2rem 0; }
.footer-row { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.socials { display: flex; gap: .6rem; }
.socials a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; transition: all .2s; color: #5affea; }
.socials a:hover { background: rgba(90, 255, 234, .2); border-color: rgba(90, 255, 234, .5); }
.footer-logo img { height: 52px; width: auto; }
.copyright { text-align: center; color: rgba(255, 255, 255, .4); margin-top: 2rem; font-size: .85rem; }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 1100px) {
  :root { --u: calc(100vw / 760); }
  .container { width: calc(100vw - 32px); }
  .nav-links { display: none; }
  .footer-big .sub { font-size: 27px; }
  .hero { height: auto; padding-top: 140px; padding-bottom: calc(160 * var(--u)); }
  .hero h1 { padding-inline: 16px; }
  .pills { flex-direction: column; align-items: center; }
  .pill { width: calc(520 * var(--u)); }
  .hero .btn, .learn .btn, .foryou .btn { width: calc(100vw - 32px); }
  .story { margin-top: calc(-60 * var(--u)); }
  .story-grid { grid-template-columns: 1fr; height: auto; gap: calc(60 * var(--u)); }
  .story .rule { width: 100%; }
  .features { width: calc(100vw - 32px); gap: calc(48 * var(--u)); }
  .feature { width: calc(340 * var(--u)); }
  .speaker { width: calc(100vw - 32px); height: auto; flex-direction: column; padding: calc(40 * var(--u)) calc(24 * var(--u)); gap: calc(40 * var(--u)); }
  .speaker img { width: 100%; height: auto; aspect-ratio: 480 / 560; }
  .s-body { width: 100%; }
  .chips { flex-wrap: wrap; }
  .s-body .btn { width: 100%; }
  .cards { grid-template-columns: repeat(2, 1fr); width: calc(100vw - 32px); margin-inline: auto; }
  .card { height: calc(560 * var(--u)); }
  .cta { width: calc(100vw - 32px); height: auto; padding: calc(80 * var(--u)) 16px; background-size: cover; }
  .meta { flex-wrap: wrap; row-gap: 12px; }
  .cta .btn { width: calc(100vw - 80px); }
}

/* ---------- Phones: real px type sizes ---------- */
@media (max-width: 640px) {
  header { padding: .8rem 1rem; }
  header.scrolled { padding: .7rem 1rem; }
  .header-inner { justify-content: center; }
  .nav-actions { display: none; }
  .logo img { height: 44px; }

  .btn { height: 56px; font-size: 18px; }
  .hero { padding-top: 120px; padding-bottom: 130px; }
  .hero .l1, .hero .l2 { font-size: 26px; line-height: 1.5; }
  .badge { height: auto; min-height: 40px; padding: 8px 16px; font-size: 14px; margin-top: 18px; flex-wrap: wrap; line-height: 1.5; }
  .hero h1 { font-size: 38px; line-height: 1.3; margin-top: 18px; }
  .hero .sub { font-size: 16px; line-height: 1.8; margin-top: 16px; padding-inline: 16px; }
  .pills { margin-top: 24px; gap: 10px; }
  .pill { width: calc(100vw - 48px); height: 46px; font-size: 16px; }
  .hero .btn { margin-top: 24px; }

  .story h2 { font-size: 26px; line-height: 1.5; }
  .story p { font-size: 16px; line-height: 1.9; margin-top: 12px; }
  .story p.hl { font-size: 16px; }
  .story-grid { gap: 36px; }
  .q { height: auto; min-height: 72px; font-size: 19px; padding: 14px 20px; border-radius: 14px; gap: 16px; }
  .q b { font-size: 28px; }

  .learn { margin-top: 90px; padding-inline: 16px; }
  .learn h2, .foryou h2 { font-size: 28px; line-height: 1.5; }
  .features { margin-top: 36px; gap: 32px; }
  .feature { width: 100%; }
  .feature .icon { width: 40px; height: 40px; }
  .feature p { font-size: 17px; line-height: 1.8; margin: 12px auto 0; max-width: 300px; text-wrap: balance; }
  .learn .btn { margin-top: 40px; }

  .speaker-wrap { margin-top: 90px; }
  .speaker { padding: 20px 16px; gap: 24px; border-radius: 20px; }
  .s-body h2 { font-size: 24px; line-height: 1.5; }
  .s-body h3 { font-size: 17px; line-height: 1.6; margin-top: 8px; }
  .s-body .bio { font-size: 15px; line-height: 1.9; margin-top: 14px; }
  .chips { gap: 8px; margin-top: 16px; }
  .chip { height: 36px; font-size: 14px; padding-inline: 14px; }
  .s-body .lead { font-size: 17px; line-height: 1.8; margin-top: 18px; }
  .s-body .btn { margin-top: 20px; }

  .foryou { margin-top: 90px; padding-inline: 16px; }
  .cards { grid-template-columns: 1fr; width: 100%; gap: 14px; margin-top: 24px; }
  .card { height: 360px; padding: 0 20px 24px; }
  .card p { font-size: 20px; line-height: 1.6; }
  .foryou .note { font-size: 18px; line-height: 1.6; margin-top: 32px; }
  .foryou .btn { margin-top: 14px; }

  .cta-wrap { margin-top: 90px; }
  .cta { padding: 48px 16px; border-radius: 20px; }
  .cta h2 { font-size: 26px; line-height: 1.5; }
  .cta .p { font-size: 16px; line-height: 1.8; margin-top: 12px; }
  .meta { flex-direction: column; align-items: flex-start; padding-inline: 24px; gap: 10px; margin-top: 20px; font-size: 16px; }
  .meta span { height: auto; padding: 0; border: 0 !important; justify-content: flex-start; gap: 10px; }
  .meta .icon, .pill .icon, .cta .gift .icon { width: 22px; height: 22px; font-size: 22px; }
  .cta .gift { gap: 8px; }
  .cta .gift { font-size: 15px; line-height: 1.7; margin-top: 18px; }
  .cta .btn { margin-top: 22px; }

  footer { padding: 4rem 1rem 2rem; margin-top: 2rem; }
  .footer-big { font-size: 26px; margin-bottom: 2rem; }
  .footer-big .sub { font-size: 19px; margin: 10px 0; }
  .footer-logo img { height: 42px; }
}