/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root{
  --ink:#12131a;
  --ink-soft:#1d1f29;
  --gold:#b6863c;
  --gold-light:#e4c98a;
  --cream:#f7f3ea;
  --paper:#fbf9f4;
  --surface:#ffffff;
  --line:#e7e1d2;
  --text:#1c1b18;
  --muted:#6f6a5f;
  --success:#3f7a5c;

  --radius-sm:6px;
  --radius-md:14px;
  --radius-lg:28px;
  --shadow-soft:0 1px 2px rgba(18,19,26,.04), 0 12px 32px -16px rgba(18,19,26,.18);
  --shadow-lift:0 20px 60px -20px rgba(18,19,26,.35);

  --font-display:'Tajawal', -apple-system, sans-serif;
  --font-body:'Tajawal', -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

/* ==========================================================================
   2. GLOBAL
   ========================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{text-decoration:none;color:inherit;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.container-xl{  --bs-gutter-x: 3.5rem; max-width:1240px; width:100%; margin-left:auto; margin-right:auto;}
section{position:relative;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1rem;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4,.font-display{font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; color:var(--ink);}
.display-hero{font-size:clamp(2.3rem, 4.6vw, 4.1rem); line-height:1.05; font-weight:600;}
.display-hero em{font-style:italic; font-weight:450; color:var(--gold);}
.section-title{font-size:clamp(1.7rem, 3vw, 2.5rem); line-height:1.15; margin-bottom:.75rem;}
.section-lede{color:var(--muted); font-size:1.05rem; max-width:560px;}
.section-head{margin-bottom:3rem;}
.text-display-italic{font-family:var(--font-display); font-style:italic; font-weight:450;}
.mono-tag{font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; color:var(--muted);}

/* Arch motif — the signature shape of the page, echoing hall doorways */
.arch{border-radius:120px 120px 12px 12px;}
.arch-lg{border-radius:200px 200px 16px 16px;}
.arch-frame{position:relative;}
.arch-frame::before{
  content:"";position:absolute;inset:-14px;
  border:1px solid var(--line);
  border-radius:134px 134px 20px 20px;
  pointer-events:none;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn{border-radius:100px; font-weight:600; font-size:.92rem; padding:.72rem 1.5rem; transition:.2s ease;}
.btn-gold{background:var(--ink); color:#fff; border:1px solid rgba(255, 255, 255, .2);}
.btn-gold:hover{background:var(--gold); border-color:var(--gold); color:var(--ink); transform:translateY(-1px);}
.btn-outline-line{background:transparent; border:1px solid var(--line); color:var(--ink);}
.btn-outline-line:hover{border-color:var(--ink); background:var(--ink); color:#fff;}
.btn-ghost-light{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff;}
.btn-ghost-light:hover{background:#fff; color:var(--ink);}
.btn-lg{padding:.9rem 1.9rem; font-size:.98rem;}
.btn-sm-pill{padding:.45rem 1rem; font-size:.82rem; border-radius:100px;}

/* ==========================================================================
   5. NAVBAR
   ========================================================================== */
.navbar-qaa{
  padding:.9rem 0; background:rgba(251,249,244,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:.25s;
}
.navbar-qaa.is-scrolled{border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(0,0,0,.02);}
.brand-mark{
  width:38px; height:38px; background:var(--ink); border-radius:60px 60px 6px 6px;
  display:inline-flex; align-items:center; justify-content:center; color:var(--gold-light); font-family:var(--font-display); font-weight:700; font-size:1.05rem;
}
.brand-name{font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--ink);}
.nav-link-qaa{font-size:.92rem; font-weight:500; color:var(--text); padding:.5rem 1rem !important;}
.nav-link-qaa:hover{color:var(--gold);}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero{padding:7.5rem 0 5rem; background:var(--paper); position:relative;}
.hero-decor{
  position:absolute; top:6rem; left:-6rem; width:420px; height:420px; z-index:0;
  background:radial-gradient(circle, rgba(182,134,60,.14), transparent 70%);
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--line);
  padding:.4rem .9rem; border-radius:100px; font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:1.5rem;
}
.hero-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--success);}
.hero-visual{
  background:var(--ink); border-radius:180px 180px 24px 24px; padding:1.4rem; position:relative;
  box-shadow:var(--shadow-lift);
}
.hero-mock{
  background:var(--surface);
  border-radius:150px 150px 14px 14px;
  overflow:hidden;
  display:flex;
  min-height:420px;
}
.hero-mock-sidebar{
  width:52px;
  background:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1.2rem 0;
  gap:.9rem;
  flex-shrink:0;
}
.hero-mock-sidebar .m-icon{
  width:28px; height:28px; border-radius:8px;
  background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55); font-size:.8rem;
  transition:.2s ease;
}
.hero-mock-sidebar .m-icon.active{
  background:var(--gold); color:var(--ink);
}
.hero-mock-content{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.hero-mock-main{
  padding:1.1rem 1.2rem;
  flex:1;
}
.mock-stats{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.6rem;
  margin-bottom:.9rem;
}
.mock-stat{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:.6rem .7rem;
}
.mock-stat .label{
  font-size:.55rem;
  color:var(--muted);
  margin-bottom:.15rem;
}
.mock-stat .value{
  font-family:var(--font-mono);
  font-size:.85rem;
  font-weight:600;
  color:var(--ink);
}
.mock-stat .change{
  font-size:.55rem;
  color:var(--success);
  margin-top:.1rem;
}
.mock-table{
  width:100%;
  border-collapse:collapse;
}
.mock-table th{
  font-size:.55rem;
  color:var(--muted);
  text-align:right;
  padding:.3rem .4rem;
  border-bottom:1px solid var(--line);
  font-weight:600;
}
.mock-table td{
  font-size:.65rem;
  color:var(--ink);
  padding:.35rem .4rem;
  border-bottom:1px solid var(--line);
}
.mock-table tr:last-child td{border-bottom:none;}
.mock-badge{
  display:inline-block;
  padding:.15rem .4rem;
  border-radius:100px;
  font-size:.55rem;
  font-weight:600;
}
.mock-badge.confirmed{background:rgba(63,122,92,.1); color:var(--success);}
.mock-badge.pending{background:rgba(182,134,60,.1); color:var(--gold);}
.mock-badge.cancelled{background:rgba(180,82,63,.1); color:#b4523f;}

@media (max-width:991.98px){
  .hero-mock-sidebar{display:none;}
}

.hero-float{position:absolute; background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-lift); padding:.8rem 1rem; border:1px solid var(--line); font-size:.82rem;}
.hero-float-1{top:-18px; right:-24px;}
.hero-float-2{bottom:14px; left:-26px;}

/* ==========================================================================
   7. TRUST STATS
   ========================================================================== */
.stats-strip{background:var(--ink); padding:2.6rem 0;}
.stat-num{font-family:var(--font-display); font-size:2.2rem; color:var(--gold-light); font-weight:600;}
.stat-label{color:rgba(255,255,255,.62); font-size:.85rem; letter-spacing:.02em;}

/* ==========================================================================
   8. PROBLEM / SOLUTION
   ========================================================================== */
.problem-section{padding:6rem 0; background:var(--paper);}
.problem-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.6rem; height:100%; transition:.2s;}
.problem-card:hover{border-color:#e0b26b; transform:translateY(-3px);}
.problem-card i{font-size:1.4rem; color:#b4523f;}
.solution-panel{background:var(--ink); border-radius:32px 32px 20px 20px; padding:3rem; color:#fff;}
.solution-panel .check-item{display:flex; gap:.75rem; align-items:flex-start; margin-bottom:1.1rem;}
.solution-panel .check-item i{color:var(--gold-light); margin-top:.2rem;}

/* ==========================================================================
   9. FEATURES
   ========================================================================== */
.features-section{padding:6rem 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.feature-card{padding:2rem 1.6rem; border-radius:var(--radius-md); height:100%; background:var(--paper); border:1px solid transparent; transition:.2s;}
.feature-card:hover{background:var(--surface); border-color:var(--line); box-shadow:var(--shadow-soft); transform:translateY(-2px);}
.feature-icon{
  width:46px; height:46px; border-radius:14px 14px 8px 8px; background:var(--ink); color:var(--gold-light);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:1.2rem;
}
.feature-card h5{font-size:1.02rem; margin-bottom:.5rem; font-weight:700; font-family:var(--font-body); color:var(--ink);}
.feature-card p{font-size:.88rem; color:var(--muted); margin:0;}

/* ==========================================================================
   10. WHY CHOOSE US
   ========================================================================== */
.why-section{padding:6rem 0;}
.why-row{display:flex; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line); align-items:flex-start;}
.why-row:first-child{border-top:1px solid var(--line);}
.why-num{font-family:var(--font-mono); color:var(--gold); font-size:.8rem; padding-top:.2rem;}

/* ==========================================================================
   11. HOW IT WORKS
   ========================================================================== */
.how-section{padding:6rem 0; background:var(--cream);}
.how-step{position:relative; padding:1.6rem 1.4rem 1.4rem; background:var(--surface); border-radius:var(--radius-md); height:100%; border:1px solid var(--line);}
.how-step .step-index{font-family:var(--font-display); font-size:2.1rem; color:var(--gold); font-weight:600; line-height:1;}
.how-connector{position:absolute; top:2.3rem; right:100%; width:2rem; height:1px; background:var(--line);}

/* ==========================================================================
   12. PRODUCT SHOWCASE
   ========================================================================== */
.showcase-section{padding:6rem 0; background:var(--paper);}
.showcase-tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin-bottom:2rem;
  padding:0 .5rem;
}
.showcase-tabs .nav-link{
  border:none; border-radius:100px; padding:.55rem 1.1rem; font-size:.85rem; font-weight:600; color:var(--muted);
}
.showcase-tabs .nav-link.active{background:var(--ink); color:#fff;}
.showcase-frame{
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--paper); box-shadow:var(--shadow-soft);
}
.showcase-frame .bar{background:var(--cream); padding:.7rem 1rem; border-bottom:1px solid var(--line); display:flex; gap:6px;}
.showcase-frame .bar span{width:9px; height:9px; border-radius:50%; background:#d8d2c2;}
.showcase-body{padding:2rem; min-height:280px;}
.screenshot-placeholder{
  background:var(--paper); border-radius:var(--radius-sm); border:2px dashed var(--line);
  overflow:hidden; min-height:200px; display:flex; align-items:center; justify-content:center;
  position:relative; transition:.2s ease;
}
.screenshot-placeholder:hover{border-color:var(--gold); background:var(--surface);}
.screenshot-img{max-width:100%; max-height:320px; width:auto; height:auto; display:block;}
.screenshot-placeholder-text{
  position:absolute; color:var(--muted); font-size:.8rem; text-align:center; padding:1rem;
}

/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */
.testimonials-section{padding:6rem 0; background:var(--surface);}
.testimonial-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.8rem; height:100%;}
.avatar-ring{width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--gold-light); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600;}
.stars i{color:var(--gold); font-size:.8rem;}

/* ==========================================================================
   14. FAQ
   ========================================================================== */
.faq-section{padding:6rem 0; background:var(--paper);}
.faq-section .section-head{text-align:center;}
.faq-section .section-head .section-title{font-size:clamp(1.8rem, 3.5vw, 2.6rem);}
.accordion-qaa .accordion-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  margin-bottom:1rem; box-shadow:var(--shadow-soft); overflow:hidden; transition:.25s ease;
}
.accordion-qaa .accordion-item:hover{box-shadow:var(--shadow-lift); transform:translateY(-2px);}
.accordion-qaa .accordion-item:last-child{margin-bottom:0;}
.accordion-qaa .accordion-button{
  background:transparent; font-weight:600; color:var(--ink); padding:1.2rem 1.5rem;
  box-shadow:none; font-family:var(--font-display); font-size:1.05rem;
  border-radius:0; position:relative; padding-right:3.5rem;
}
.faq-num{
  position:absolute; right:1.25rem; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:.75rem; font-weight:700;
  color:var(--muted); opacity:.5; transition:.25s ease;
}
.accordion-qaa .accordion-button:not(.collapsed){
  color:var(--gold); background:var(--paper);
  border-left:3px solid var(--gold); padding-right:3.25rem;
}
.accordion-qaa .accordion-button:not(.collapsed) .faq-num{
  opacity:1; color:var(--gold);
}
.accordion-qaa .accordion-button::before{
  content:"\f059"; font-family:"Bootstrap-icons"; position:absolute; right:1.25rem; top:50%;
  transform:translateY(-50%); color:var(--muted); font-size:1rem; transition:.25s ease;
}
.accordion-qaa .accordion-button:not(.collapsed)::before{
  content:"\f058"; color:var(--gold);
}
.accordion-qaa .accordion-button::after{
  display:none;
}
.accordion-qaa .accordion-body{
  padding:0 1.5rem 1.4rem; color:var(--muted); font-size:.92rem; line-height:1.65;
}
.accordion-qaa .accordion-body p{margin-bottom:0;}

/* ==========================================================================
   15. FINAL CTA
   ========================================================================== */
.final-cta{padding:5rem 0; background:var(--ink); position:relative; overflow:hidden;}
.final-cta::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 20%, rgba(182,134,60,.18), transparent 60%);}
.final-cta h2{color:#fff;}

/* ==========================================================================
   16. CONTACT (WhatsApp)
   ========================================================================== */
.contact-section{padding:6rem 0; background:var(--paper);}
.contact-section .section-head{text-align:center;}
.contact-info-item{display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.4rem;}
.contact-info-item .icon-box{width:42px; height:42px; border-radius:12px 12px 6px 6px; background:var(--ink); color:var(--gold-light); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.form-control-qaa, .form-select-qaa{border:1px solid var(--line); border-radius:var(--radius-lg); padding:.65rem .9rem; font-size:.9rem; appearance:none; -webkit-appearance:none;  background-repeat:no-repeat; background-position:left .9rem center; padding-left:2.4rem;}
.form-control-qaa:focus, .form-select-qaa:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(182,134,60,.15);}
.form-select-qaa option{font-size:.9rem; padding:.5rem;}

[dir="rtl"] .form-select-qaa{background-position:right .9rem center; padding-left:.9rem; padding-right:2.4rem;}
.form-label-qaa{font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:.35rem;}
.social-links{display:flex; gap:.6rem; margin-top:1.5rem; flex-wrap:wrap; justify-content:center;}

/* ==========================================================================
   17. REGISTRATION
   ========================================================================== */
.register-section{padding:6rem 0; background:var(--surface); border-top:1px solid var(--line);}
.register-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.6rem;}
.reg-step-label{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin:1.6rem 0 1rem; display:flex; align-items:center; gap:.6rem;}
.reg-step-label::after{content:""; flex:1; height:1px; background:var(--line);}
.plan-pick{border:1px solid var(--line); border-radius:var(--radius-sm); padding:.9rem; cursor:pointer;}
.plan-pick input:checked ~ .plan-pick-inner, .plan-pick.checked{border-color:var(--gold);}
.form-check-input:checked{background-color:var(--ink); border-color:var(--ink);}
.input-group-modern{
  position:relative; display:flex; align-items:stretch;
}
.input-group-modern .form-control-qaa{padding-left:3rem;}
.btn-password-toggle{
  position:absolute; left:.5rem; top : 6px ; background:transparent; border:none; color:var(--muted);
  cursor:pointer; padding:.25rem; display:flex; align-items:center; justify-content:center;
  transition:.2s ease; width:34px; height:34px; border-radius:50%; z-index:10;
}
.btn-password-toggle:hover{color:var(--ink); background:rgba(0,0,0,.06);}
.btn-password-toggle i{font-size:1.2rem;}

/* ==========================================================================
   18. FOOTER
   ========================================================================== */
.footer{background:var(--ink); color:rgba(255,255,255,.7); padding:4.5rem 0 2rem;}
.footer h6{color:#fff; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; margin-bottom:1.1rem;}
.footer a{color:rgba(255,255,255,.62); font-size:.9rem; line-height:2.1;}
.footer a:hover{color:var(--gold-light);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:3rem; padding-top:1.6rem; font-size:.82rem; color:rgba(255,255,255,.5); text-align:center;}
.social-icon{background: var(--ink);width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:inline-flex; align-items:center; justify-content:center; color:#fff; margin-inline-end:.5rem;}
.social-icon:last-child{margin-inline-end:0;}
.social-icon:hover{background:var(--gold); border-color:var(--gold); color:var(--ink);}

/* ==========================================================================
   19. MODAL (Terms & Privacy)
   ========================================================================== */
.modal-content{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);}
.modal-header{border-bottom:1px solid var(--line); padding:1.25rem 1.5rem;}
.modal-header .btn-close{
  margin-top:calc(-.5 * var(--bs-btn-close-padding-y, .25rem));
  margin-bottom:calc(-.5 * var(--bs-btn-close-padding-y, .25rem));
  margin-inline-start:auto;
  margin-inline-end:calc(-.5 * var(--bs-btn-close-padding-x, .25rem));
}
.modal-title{font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:1.25rem;}
.modal-body{padding:1.5rem;}
.modal-footer{border-top:1px solid var(--line); padding:1rem 1.5rem;}
.terms-content{max-height:500px; overflow-y:auto;}
.terms-section{margin-bottom:1.5rem;}
.terms-section:last-child{margin-bottom:0;}
.terms-section-title{
  font-family:var(--font-display); font-size:1rem; font-weight:600; color:var(--ink);
  margin-bottom:1rem; padding-bottom:.5rem; border-bottom:1px solid var(--line);
}
.terms-list{list-style:none; padding:0; margin:0;}
.terms-list li{
  padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.88rem; color:var(--text); line-height:1.5;
}
.terms-list li:last-child{border-bottom:none;}
.terms-list li strong{color:var(--gold);}

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */
@media (max-width:991.98px){
  .hero{padding:6.5rem 0 3rem; text-align:center;}
  .hero-decor{display:none;}
  .hero-visual{margin-top:2.5rem;}
  .solution-panel{margin-top:2rem;}
  .how-connector{display:none;}
  .register-card{padding:1.6rem;}
  .showcase-tabs{padding:0;}
  .contact-section .row{gap:2rem;}
}
@media (max-width:575.98px){
  .display-hero{font-size:2rem;}
  .hero{padding-top:6rem;}
  .stat-num{font-size:1.6rem;}
  .section-title{font-size:1.6rem;}
  .footer{text-align:center;}
  .footer h6{margin-top:1.5rem;}
  .footer .row{gap:1.5rem;}
  .footer .col-lg-4{text-align:center;}
  .footer .input-group{justify-content:center;}
  .contact-info-item{justify-content:center; text-align:center;}
  .contact-info-item .icon-box{margin-inline-end:0;}
}
body{overflow-x:hidden;}