/* ==========================================================================
   Smart Mission — Life Coach  |  القائد الذكي
   Design system: dark luxury on the official brand palette
   teal #1C888E · navy #1B2336 · slate #415674 (taken from lifecoach.smartmission.sa)
   ========================================================================== */

:root{
  /* Surfaces — white ground, tinted very slightly toward the brand teal */
  --ink:        #ffffff;   /* page ground */
  --ink-2:      #f4f8f9;   /* alternating band */
  --navy:       #eef4f6;   /* raised tint */
  --navy-2:     #1b2336;   /* brand navy, kept for ink + dark accents */
  --navy-line:  #dde5ea;   /* hairlines */
  --panel:      rgba(255, 255, 255, .8);
  --panel-2:    rgba(244, 248, 249, .9);
  --surface:    #ffffff;   /* cards */
  --surface-2:  #f7fafb;
  --shade:      27, 35, 54;  /* ink channel for translucent tints */

  /* Brand teal */
  --brand:       #1c888e;  /* brand teal */
  --brand-hi:    #0f6b70;  /* darker for text/icons on white */
  --brand-lo:    #0e5a5f;
  --brand-grad:  linear-gradient(135deg,#0e5a5f 0%,#137d83 30%,#1fa0a7 52%,#137d83 74%,#0e5a5f 100%);

  /* Type */
  --text:       #14213a;   /* brand navy, darkened for body contrast */
  --text-2:     #415674;   /* brand slate */
  --text-3:     #6b7f9c;

  --radius:     18px;
  --radius-sm:  12px;
  --maxw:       1240px;
  --nav-h:      78px;

  --font-en:    'Cormorant Garamond', 'Times New Roman', serif;
  --font-ui:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ar:    'Tajawal', 'IBM Plex Sans Arabic', -apple-system, sans-serif;

  --ease:       cubic-bezier(.22,.7,.25,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body[data-lang="ar"]{ font-family:var(--font-ar); }

/* Ambient background */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 620px at 78% -8%,  rgba(28,136,142,.10), transparent 62%),
    radial-gradient(760px 560px at 6% 12%,   rgba(28,136,142,.06), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%,rgba(27,35,54,.05),   transparent 65%);
}
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:linear-gradient(var(--brand) 1px,transparent 1px),linear-gradient(90deg,var(--brand) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.14; font-weight:600; letter-spacing:-.015em; }
h1{ font-size:clamp(2.5rem,6.2vw,4.6rem); }
h2{ font-size:clamp(1.9rem,3.9vw,3rem); }
h3{ font-size:clamp(1.15rem,1.7vw,1.45rem); }
p{ margin:0 0 1.1em; color:var(--text-2); }

body[data-lang="en"] h1,
body[data-lang="en"] h2,
body[data-lang="en"] .display{ font-family:var(--font-en); font-weight:600; letter-spacing:-.01em; }

.accent{
  background:var(--brand-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-ui); font-size:.7rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--brand);
  margin-bottom:1.1rem;
}
body[data-lang="ar"] .eyebrow{ letter-spacing:0; font-family:var(--font-ar); }
.eyebrow::before{ content:''; width:34px; height:1px; background:var(--brand-grad); }

.lead{ font-size:clamp(1.02rem,1.35vw,1.18rem); color:var(--text-2); max-width:62ch; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.2rem); }
section{ padding:clamp(4.5rem,9vw,8rem) 0; position:relative; }
.section-head{ max-width:72ch; margin-bottom:clamp(2.2rem,4vw,3.4rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.grid{ display:grid; gap:clamp(1rem,2vw,1.6rem); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.hr-brand{ height:1px; background:linear-gradient(90deg,transparent,rgba(28,136,142,.45),transparent); border:0; margin:0; }

/* ---------- Buttons ---------- */
.btn{
  --bg:transparent;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.9rem; border-radius:999px; border:1px solid rgba(28,136,142,.35);
  font-family:var(--font-ui); font-size:.86rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer; background:var(--bg); color:var(--text);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s,color .35s,background .35s;
  overflow:hidden; white-space:nowrap;
}
body[data-lang="ar"] .btn{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:.95rem; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:2px solid var(--brand-hi); outline-offset:3px; }

.btn-brand{ background:var(--brand-grad); color:#02171a; border-color:transparent; box-shadow:0 10px 30px -12px rgba(28,136,142,.65); }
.btn-brand:hover{ box-shadow:0 18px 44px -14px rgba(28,136,142,.8); }
.btn-brand::after{
  content:''; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
}
.btn-brand:hover::after{ animation:sheen 1s var(--ease); }
@keyframes sheen{ to{ transform:translateX(120%); } }

.btn-ghost{ background:rgba(var(--shade),.03); }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand-hi); background:rgba(28,136,142,.07); }
.btn-sm{ padding:.62rem 1.15rem; font-size:.74rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.42; pointer-events:none; }

/* ---------- Cards ---------- */
.card{
  position:relative; padding:clamp(1.5rem,2.4vw,2.1rem);
  background:linear-gradient(160deg,var(--surface),var(--surface-2));
  border:1px solid var(--navy-line); border-radius:var(--radius);
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;
  overflow:hidden;
}
.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%),rgba(28,136,142,.12),transparent 70%);
  opacity:0; transition:opacity .5s;
}
.card:hover{ transform:translateY(-6px); border-color:rgba(28,136,142,.42); box-shadow:0 24px 50px -34px rgba(27,35,54,.35); }
.card:hover::before{ opacity:1; }
.card h3{ margin-bottom:.5rem; }
.card p{ margin-bottom:0; font-size:.95rem; }
.card-num{ font-family:var(--font-en); font-size:2.6rem; line-height:1; color:rgba(28,136,142,.28); margin-bottom:.8rem; }

.icon-badge{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.15rem;
  background:linear-gradient(150deg,rgba(28,136,142,.2),rgba(28,136,142,.04));
  border:1px solid rgba(28,136,142,.3); color:var(--brand-hi);
}
.icon-badge svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.5; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset-inline:0; top:0; height:var(--nav-h); z-index:900;
  display:flex; align-items:center;
  transition:background .45s var(--ease),backdrop-filter .45s,border-color .45s,height .45s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  height:66px; background:rgba(255,255,255,.88); backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%); border-bottom-color:rgba(28,136,142,.16);
}
.site-header>.wrap{ flex:1 1 auto; min-width:0; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.4rem; width:100%; min-width:0; }
.brand{ display:flex; align-items:center; gap:.75rem; flex-shrink:0; min-width:0; }
.brand .brand-txt{ min-width:0; }
.brand-name,.brand-sub{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand img{ width:42px; height:42px; border-radius:11px; }
.brand-txt{ display:flex; flex-direction:column; line-height:1.12; }
.brand-name{ font-size:.94rem; font-weight:700; letter-spacing:.02em; }
.brand-sub{ font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--brand); font-family:var(--font-ui); }
body[data-lang="ar"] .brand-sub{ letter-spacing:.06em; }

.nav-links{ display:flex; align-items:center; gap:.15rem; }
.nav-links a{
  position:relative; padding:.55rem .82rem; border-radius:9px; font-size:.87rem; color:var(--text-2);
  transition:color .3s;
}
.nav-links a::after{
  content:''; position:absolute; inset-inline:.82rem; bottom:.28rem; height:1px;
  background:var(--brand-grad); transform:scaleX(0); transform-origin:inline-start; transition:transform .4s var(--ease);
}
.nav-links a:hover,.nav-links a.active{ color:var(--text); }
.nav-links a:hover::after,.nav-links a.active::after{ transform:scaleX(1); }
.nav-actions{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }

.lang-switch{
  display:flex; align-items:center; padding:3px; border-radius:999px;
  border:1px solid var(--navy-line); background:rgba(var(--shade),.04);
}
.lang-switch button{
  border:0; background:transparent; cursor:pointer; padding:.32rem .7rem; border-radius:999px;
  font-size:.74rem; font-weight:600; letter-spacing:.05em; color:var(--text-3); transition:.3s;
}
.lang-switch button.on{ background:var(--brand-grad); color:#02171a; }

.burger{ display:none; width:44px; height:44px; border:1px solid var(--navy-line); border-radius:11px; background:rgba(var(--shade),.04); cursor:pointer; }
.burger span{ display:block; width:18px; height:1.5px; margin:3.5px auto; background:var(--text); transition:.35s var(--ease); }
.burger.on span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger.on span:nth-child(2){ opacity:0; }
.burger.on span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ min-height:100svh; display:flex; align-items:center; padding-top:var(--nav-h); position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.hero h1{ margin-bottom:1.3rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.2rem; }
.hero-stats{ display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,3rem); margin-top:3.2rem; padding-top:2rem; border-top:1px solid var(--navy-line); }
.stat-n{ font-family:var(--font-en); font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1; font-weight:600; }
body[data-lang="ar"] .stat-n{ font-family:var(--font-ar); }
.stat-l{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-top:.45rem; }
body[data-lang="ar"] .stat-l{ letter-spacing:0; text-transform:none; font-size:.85rem; }

.hero-visual{ position:relative; aspect-ratio:1/1.06; display:grid; place-items:center; }
.hero-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(28,136,142,.16); }
.hero-ring:nth-child(2){ inset:10%; border-style:dashed; animation:spin 46s linear infinite; }
.hero-ring:nth-child(3){ inset:21%; border-color:rgba(28,136,142,.3); animation:spin 34s linear infinite reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.hero-logo img{ border-radius:16px; }
.brand img,.chat-head img,.doc-head img{ background:#fff; object-fit:contain; }
.hero-logo{
  position:relative; width:56%; border-radius:28px; padding:1.4rem;
  background:radial-gradient(circle at 50% 30%,#ffffff,#eef4f6 70%);
  border:1px solid rgba(28,136,142,.28); box-shadow:0 30px 80px -40px rgba(28,136,142,.55);
  animation:float 7s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(-9px); } 50%{ transform:translateY(9px); } }
.hero-orb{ position:absolute; width:74%; aspect-ratio:1; border-radius:50%; filter:blur(70px); background:radial-gradient(circle,rgba(28,136,142,.22),transparent 68%); }

.scroll-hint{
  position:absolute; bottom:1.8rem; inset-inline-start:50%; transform:translateX(-50%);
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--text-3);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.scroll-hint i{ display:block; width:1px; height:44px; background:linear-gradient(var(--brand),transparent); }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; padding:2.2rem 0; border-block:1px solid var(--navy-line); background:rgba(255,255,255,.6); }
.marquee-track{ display:flex; gap:3.6rem; width:max-content; animation:slide 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee span{ font-size:.94rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); white-space:nowrap; }
body[data-lang="ar"] .marquee span{ letter-spacing:.02em; text-transform:none; }

/* ---------- Split feature ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split.rev>*:first-child{ order:2; }
/* asymmetric variants — class-based so the mobile media query can override them */
.split-wide{ grid-template-columns:1.35fr .65fr; align-items:start; }
.split-lean{ grid-template-columns:1.15fr .85fr; align-items:start; }
.grid-wide{ grid-template-columns:1.35fr .65fr; }
.frame{
  position:relative; border-radius:var(--radius); border:1px solid var(--navy-line); overflow:hidden;
  background:linear-gradient(160deg,var(--surface),var(--surface-2)); padding:2rem;
}
.frame::after{ content:''; position:absolute; inset:0; background:radial-gradient(600px 300px at 20% 0%,rgba(28,136,142,.1),transparent 70%); pointer-events:none; }

.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.checklist li{ display:flex; gap:.8rem; align-items:flex-start; color:var(--text-2); font-size:.96rem; }
.checklist li::before{
  content:'✦'; color:var(--brand); font-size:.8rem; line-height:1.6; flex-shrink:0;
}

/* ---------- Pricing ---------- */
.price-card{ display:flex; flex-direction:column; }
.price-card.featured{
  border-color:rgba(28,136,142,.5);
  background:linear-gradient(165deg,rgba(28,136,142,.09),var(--surface));
  box-shadow:0 40px 90px -50px rgba(28,136,142,.55);
}
.price-tag{ display:flex; align-items:baseline; gap:.4rem; margin:1rem 0 .3rem; }
.price-tag b{ font-family:var(--font-en); font-size:2.9rem; font-weight:600; line-height:1; }
body[data-lang="ar"] .price-tag b{ font-family:var(--font-ar); }
.price-tag small{ color:var(--text-3); font-size:.8rem; }
.badge{
  position:absolute; inset-inline-end:1.2rem; top:1.2rem; padding:.28rem .7rem; border-radius:999px;
  font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:var(--brand-grad); color:#02171a;
}
body[data-lang="ar"] .badge{ letter-spacing:0; text-transform:none; font-size:.7rem; }
.feat-list{ list-style:none; margin:1.4rem 0 1.8rem; padding:0; display:grid; gap:.62rem; flex:1; }
.feat-list li{ display:flex; gap:.65rem; font-size:.9rem; color:var(--text-2); }
.feat-list li svg{ width:16px; height:16px; flex-shrink:0; margin-top:.32rem; stroke:var(--brand); fill:none; stroke-width:2; }
.feat-list li.off{ color:var(--text-3); opacity:.55; }
.feat-list li.off svg{ stroke:var(--text-3); }

.billing-toggle{ display:inline-flex; gap:.3rem; padding:4px; border-radius:999px; border:1px solid var(--navy-line); background:rgba(var(--shade),.04); margin-top:1.4rem; }
.billing-toggle button{ border:0; background:transparent; cursor:pointer; padding:.5rem 1.1rem; border-radius:999px; font-size:.8rem; color:var(--text-3); transition:.3s; }
.billing-toggle button.on{ background:var(--brand-grad); color:#02171a; font-weight:600; }

/* ---------- Coach portrait ---------- */
.coach{ position:relative; display:grid; place-items:center; padding:1rem; }
/* teal block + halftone dots, matching the brand's key visual */
.coach::before{
  content:''; position:absolute; inset:14% 12% 4%; border-radius:26% 26% 22% 22%/18% 18% 14% 14%;
  background:var(--brand); opacity:.92;
}
.coach::after{
  content:''; position:absolute; top:0; inset-inline-end:-1%; width:36%; aspect-ratio:1;
  /* light dots so the halftone reads on the dark theme */
  background-image:radial-gradient(circle,rgba(182,191,218,.85) 32%,transparent 34%);
  background-size:13px 13px;
  mask-image:radial-gradient(circle at 78% 22%,#000 10%,rgba(0,0,0,.5) 44%,transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 78% 22%,#000 10%,rgba(0,0,0,.5) 44%,transparent 70%);
}
.coach img{
  position:relative; z-index:1; width:100%; max-width:400px;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
}
.coach-fallback{
  position:relative; z-index:1; width:100%; max-width:420px; aspect-ratio:1/1.08;
  display:grid; place-items:center; text-align:center; padding:2rem; gap:.6rem;
  border:1px dashed rgba(var(--shade),.3); border-radius:var(--radius);
  background:rgba(255,255,255,.6); color:#fff; font-size:.9rem;
}
.coach-card{ display:flex; flex-direction:column; gap:.4rem; }
.coach-name{ font-size:clamp(1.4rem,2.6vw,2rem); font-weight:700; line-height:1.2; }
.coach-role{ color:var(--brand-hi); font-size:.95rem; }
.coach-quote{
  margin-top:1.4rem; padding-inline-start:1.1rem; border-inline-start:2px solid var(--brand);
  font-size:1.02rem; color:var(--text); font-style:italic;
}
body[data-lang="ar"] .coach-quote{ font-style:normal; }

/* ---------- Partner wall ---------- */
.partners{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.partner{
  display:grid; place-items:center; padding:1.6rem 1.4rem; min-height:118px;
  background:#fff; border-radius:var(--radius); border:1px solid var(--navy-line);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.partner img{ width:100%; max-height:56px; object-fit:contain; }
.partner:hover{ transform:translateY(-6px); box-shadow:0 26px 60px -34px rgba(28,136,142,.9); }
@media(max-width:960px){ .partners{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .partners{ grid-template-columns:1fr; } }

/* ---------- Testimonials ---------- */
.quote{ display:flex; flex-direction:column; gap:1.3rem; }
.quote-mark{ font-family:var(--font-en); font-size:3.4rem; line-height:.6; color:rgba(28,136,142,.35); }
.quote p{ font-size:1rem; color:var(--text); }
.who{ display:flex; align-items:center; gap:.85rem; margin-top:auto; }
.avatar{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background:var(--brand-grad); color:#02171a; font-weight:700; font-size:.9rem;
}
.who b{ display:block; font-size:.9rem; font-weight:600; }
.who span{ font-size:.78rem; color:var(--text-3); }
.stars{ color:var(--brand); font-size:.85rem; letter-spacing:.18em; }

/* ---------- Case studies ---------- */
.case{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; padding:clamp(1.6rem,3vw,2.4rem); }
.metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
.metric{ padding:1rem .8rem; border-radius:var(--radius-sm); border:1px solid var(--navy-line); background:var(--surface-2); text-align:center; }
.metric b{ display:block; font-family:var(--font-en); font-size:1.7rem; line-height:1; color:var(--brand-hi); }
body[data-lang="ar"] .metric b{ font-family:var(--font-ar); }
.metric span{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
body[data-lang="ar"] .metric span{ letter-spacing:0; text-transform:none; font-size:.76rem; }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.1rem; }
.field label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); font-family:var(--font-ui); }
body[data-lang="ar"] .field label{ letter-spacing:0; text-transform:none; font-size:.86rem; font-family:var(--font-ar); }
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border-radius:var(--radius-sm);
  background:#ffffff; border:1px solid var(--navy-line); color:var(--text);
  transition:border-color .3s,box-shadow .3s,background .3s; font-size:.95rem;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:rgba(28,136,142,.6); background:#ffffff;
  box-shadow:0 0 0 4px rgba(28,136,142,.1);
}
.field select{ appearance:none; cursor:pointer; }
.field .hint{ font-size:.76rem; color:var(--text-3); }
.field.err input,.field.err select,.field.err textarea{ border-color:#c9484a; box-shadow:0 0 0 4px rgba(201,72,74,.12); }
.err-msg{ font-size:.76rem; color:#e58386; display:none; }
.field.err .err-msg{ display:block; }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.1rem; }

/* ---------- Steps / Booking ---------- */
.stepper{ display:flex; align-items:center; gap:.5rem; margin-bottom:2.4rem; flex-wrap:wrap; }
.step{ display:flex; align-items:center; gap:.6rem; color:var(--text-3); font-size:.82rem; }
.step i{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-style:normal;
  border:1px solid var(--navy-line); font-size:.78rem; transition:.4s var(--ease); flex-shrink:0;
}
.step.on{ color:var(--text); }
.step.on i{ background:var(--brand-grad); color:#02171a; border-color:transparent; font-weight:700; }
.step.done i{ background:rgba(28,136,142,.16); color:var(--brand-hi); border-color:rgba(28,136,142,.4); }
.step-line{ flex:1; min-width:18px; height:1px; background:var(--navy-line); }

.pane{ display:none; animation:fadeUp .55s var(--ease); }
.pane.on{ display:block; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* Calendar */
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.cal-nav{ display:flex; gap:.4rem; }
.cal-nav button{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--navy-line);
  background:rgba(var(--shade),.04); cursor:pointer; transition:.3s;
}
.cal-nav button:hover{ border-color:var(--brand); color:var(--brand-hi); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; }
.cal-dow{ text-align:center; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); padding-bottom:.4rem; }
body[data-lang="ar"] .cal-dow{ letter-spacing:0; text-transform:none; font-size:.78rem; }
.cal-day{
  aspect-ratio:1; border-radius:11px; border:1px solid transparent; background:rgba(var(--shade),.035);
  color:var(--text-2); cursor:pointer; font-size:.88rem; transition:.28s var(--ease);
  display:grid; place-items:center; position:relative;
}
.cal-day:hover:not(:disabled){ border-color:rgba(28,136,142,.5); color:var(--text); transform:translateY(-2px); }
.cal-day:disabled{ opacity:.22; cursor:not-allowed; }
.cal-day.empty{ background:transparent; pointer-events:none; }
.cal-day.today::after{ content:''; position:absolute; bottom:6px; width:4px; height:4px; border-radius:50%; background:var(--brand); }
.cal-day.sel{ background:var(--brand-grad); color:#02171a; font-weight:700; border-color:transparent; }

.slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:.6rem; }
.slot{
  padding:.72rem .4rem; border-radius:11px; border:1px solid var(--navy-line);
  background:rgba(var(--shade),.035); cursor:pointer; font-size:.88rem; transition:.28s var(--ease); text-align:center;
}
.slot:hover:not(:disabled){ border-color:rgba(28,136,142,.5); transform:translateY(-2px); }
.slot.sel{ background:var(--brand-grad); color:#02171a; font-weight:700; border-color:transparent; }
.slot:disabled{ opacity:.28; cursor:not-allowed; text-decoration:line-through; }

.summary{ position:sticky; top:calc(var(--nav-h) + 1.2rem); }
.sum-row{ display:flex; justify-content:space-between; gap:1rem; padding:.62rem 0; border-bottom:1px dashed var(--navy-line); font-size:.9rem; }
.sum-row:last-child{ border:0; }
.sum-row span{ color:var(--text-3); }
.sum-row b{ font-weight:600; text-align:end; }
.sum-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(28,136,142,.3); }
.sum-total b{ font-size:1.6rem; font-family:var(--font-en); }
body[data-lang="ar"] .sum-total b{ font-family:var(--font-ar); }

.pick{ cursor:pointer; display:block; }
.pick input{ position:absolute; opacity:0; pointer-events:none; }
.pick .card{ height:100%; }
.pick input:checked + .card{ border-color:var(--brand); background:linear-gradient(160deg,rgba(28,136,142,.09),var(--surface)); }
.pick input:focus-visible + .card{ outline:2px solid var(--brand-hi); outline-offset:3px; }

/* Payment */
.card-visual{
  border-radius:var(--radius); padding:1.5rem; aspect-ratio:1.62/1; display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(135deg,#1b2336,#060a12 60%,#06222a);
  border:1px solid rgba(28,136,142,.3); box-shadow:0 24px 50px -34px rgba(27,35,54,.4);
}
.card-visual .cnum{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.15rem; letter-spacing:.16em; }
.card-visual .cmeta{ display:flex; justify-content:space-between; font-size:.74rem; color:var(--text-3); letter-spacing:.08em; }
.pay-methods{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.pay-methods button{
  flex:1; min-width:96px; padding:.7rem; border-radius:11px; border:1px solid var(--navy-line);
  background:rgba(var(--shade),.035); cursor:pointer; font-size:.82rem; transition:.3s;
}
.pay-methods button.on{ border-color:var(--brand); color:var(--brand-hi); background:rgba(28,136,142,.08); }
.secure-note{ display:flex; align-items:center; gap:.5rem; font-size:.76rem; color:var(--text-3); }
.secure-note svg{ width:14px; height:14px; stroke:var(--brand); fill:none; stroke-width:2; }

/* ---------- Dashboard ---------- */
.dash{ display:grid; grid-template-columns:250px 1fr; gap:1.6rem; align-items:start; }
.dash-side{ position:sticky; top:calc(var(--nav-h) + 1.2rem); display:grid; gap:.25rem; padding:1rem; }
.dash-side button{
  display:flex; align-items:center; gap:.7rem; width:100%; padding:.7rem .85rem; border-radius:11px;
  border:0; background:transparent; cursor:pointer; text-align:start; font-size:.9rem; color:var(--text-2); transition:.3s;
}
.dash-side button:hover{ background:rgba(var(--shade),.055); color:var(--text); }
.dash-side button.on{ background:rgba(28,136,142,.1); color:var(--brand-hi); box-shadow:inset 0 0 0 1px rgba(28,136,142,.28); }

.kpi{ padding:1.25rem; }
.kpi .k-l{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
body[data-lang="ar"] .kpi .k-l{ letter-spacing:0; text-transform:none; font-size:.82rem; }
.kpi .k-v{ font-family:var(--font-en); font-size:2.1rem; line-height:1.2; font-weight:600; }
body[data-lang="ar"] .kpi .k-v{ font-family:var(--font-ar); }
.k-delta{ font-size:.76rem; color:#5fd39a; }
.k-delta.down{ color:#e58386; }

.table-wrap{ overflow-x:auto; }
table.tbl{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:640px; }
table.tbl th{
  text-align:start; padding:.75rem 1rem; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-3); border-bottom:1px solid var(--navy-line); font-weight:600; white-space:nowrap;
}
body[data-lang="ar"] table.tbl th{ letter-spacing:0; text-transform:none; font-size:.82rem; }
table.tbl td{ padding:.85rem 1rem; border-bottom:1px solid rgba(35,48,74,.55); color:var(--text-2); }
table.tbl tr:hover td{ background:rgba(var(--shade),.03); color:var(--text); }

.bar{ height:7px; border-radius:99px; background:rgba(var(--shade),.1); overflow:hidden; min-width:96px; }
.bar i{ display:block; height:100%; border-radius:99px; background:var(--brand-grad); width:0; transition:width 1.1s var(--ease); }
.chip{ display:inline-block; padding:.22rem .62rem; border-radius:999px; font-size:.72rem; border:1px solid; white-space:nowrap; }
.chip.ok{ color:#5fd39a; border-color:rgba(95,211,154,.35); background:rgba(95,211,154,.08); }
.chip.warn{ color:#e8c15f; border-color:rgba(232,193,95,.35); background:rgba(232,193,95,.08); }
.chip.mute{ color:var(--text-3); border-color:var(--navy-line); }

.spark{ display:flex; align-items:flex-end; gap:5px; height:90px; }
.spark i{ flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--brand),rgba(28,136,142,.15)); transition:height 1s var(--ease); }
.ring-wrap{ display:grid; place-items:center; gap:.6rem; }
.ring{ position:relative; width:150px; height:150px; }
.ring svg{ transform:rotate(-90deg); width:100%; height:100%; }
.ring .val{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-en); font-size:1.9rem; font-weight:600; }
body[data-lang="ar"] .ring .val{ font-family:var(--font-ar); }

/* ---------- ROI ---------- */
.roi{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.4rem,3vw,2.4rem); }
.range{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:99px; background:var(--navy-line); outline:0; }
.range::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%; cursor:pointer;
  background:var(--brand-grad); border:3px solid var(--ink); box-shadow:0 0 0 1px rgba(28,136,142,.5);
}
.range::-moz-range-thumb{ width:18px; height:18px; border:3px solid var(--ink); border-radius:50%; background:var(--brand); cursor:pointer; }
.range-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.5rem; }
.range-head b{ color:var(--brand-hi); font-size:.95rem; }
.roi-out{ text-align:center; padding:1.4rem; }
.roi-big{ font-family:var(--font-en); font-size:clamp(2.6rem,6vw,4rem); line-height:1; font-weight:600; }
body[data-lang="ar"] .roi-big{ font-family:var(--font-ar); }

/* ---------- FAQ ---------- */
.acc{ border-bottom:1px solid var(--navy-line); }
.acc summary{
  list-style:none; cursor:pointer; padding:1.35rem 0; display:flex; justify-content:space-between;
  gap:1.2rem; align-items:center; font-size:1.02rem; font-weight:500;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{ content:'+'; color:var(--brand); font-size:1.4rem; transition:transform .35s var(--ease); flex-shrink:0; }
.acc[open] summary::after{ transform:rotate(45deg); }
.acc p{ padding-bottom:1.35rem; margin:0; font-size:.94rem; }

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:calc(var(--radius) + 8px); padding:clamp(2.4rem,5vw,4.4rem); text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(150deg,rgba(28,136,142,.10),var(--surface));
  border:1px solid rgba(28,136,142,.28);
}
.cta-band::before{
  content:''; position:absolute; inset:-40%; background:conic-gradient(from 0deg,transparent,rgba(28,136,142,.12),transparent 32%);
  animation:spin 18s linear infinite;
}
.cta-band>*{ position:relative; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--navy-line); background:#ffffff; padding:clamp(3rem,6vw,4.6rem) 0 1.6rem; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:2.2rem; }
.foot-grid h4{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brand); margin-bottom:1.1rem; font-family:var(--font-ui); }
body[data-lang="ar"] .foot-grid h4{ letter-spacing:0; text-transform:none; font-size:.9rem; font-family:var(--font-ar); }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.foot-grid a{ font-size:.9rem; color:var(--text-2); transition:.3s; }
.foot-grid a:hover{ color:var(--brand-hi); }
.foot-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--navy-line); font-size:.8rem; color:var(--text-3); }
.socials{ display:flex; gap:.6rem; }
.socials a{ width:38px; height:38px; border-radius:11px; border:1px solid var(--navy-line); display:grid; place-items:center; transition:.3s; }
.socials a:hover{ border-color:var(--brand); color:var(--brand-hi); transform:translateY(-2px); }
.socials svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.6; }

/* ---------- Chatbot ---------- */
.chat-fab{
  position:fixed; inset-inline-end:22px; bottom:22px; z-index:950;
  width:60px; height:60px; border-radius:50%; border:0; cursor:pointer;
  background:var(--brand-grad); color:#02171a; display:grid; place-items:center;
  box-shadow:0 16px 40px -12px rgba(28,136,142,.75); transition:transform .4s var(--ease);
}
.chat-fab:hover{ transform:scale(1.08) translateY(-2px); }
.chat-fab svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.7; }
.chat-fab::after{
  content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(28,136,142,.5); animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(.9); opacity:.9; } 100%{ transform:scale(1.35); opacity:0; } }

.chat-win{
  position:fixed; inset-inline-end:22px; bottom:96px; z-index:951; width:min(380px,calc(100vw - 32px));
  height:min(560px,calc(100svh - 140px)); border-radius:20px; overflow:hidden; display:none; flex-direction:column;
  background:linear-gradient(170deg,#ffffff,var(--surface-2));
  border:1px solid rgba(28,136,142,.28); box-shadow:0 30px 70px -30px rgba(27,35,54,.35);
}
.chat-win.on{ display:flex; animation:fadeUp .35s var(--ease); }
.chat-head{ display:flex; align-items:center; gap:.75rem; padding:1rem 1.1rem; border-bottom:1px solid var(--navy-line); }
.chat-head img{ width:36px; height:36px; border-radius:10px; }
.chat-head b{ font-size:.92rem; display:block; }
.chat-head span{ font-size:.72rem; color:#5fd39a; display:flex; align-items:center; gap:.35rem; }
.chat-head span::before{ content:''; width:6px; height:6px; border-radius:50%; background:#5fd39a; }
.chat-close{ margin-inline-start:auto; background:transparent; border:0; cursor:pointer; color:var(--text-3); font-size:1.4rem; line-height:1; }
.chat-body{ flex:1; overflow-y:auto; padding:1.1rem; display:flex; flex-direction:column; gap:.8rem; }
.msg{ max-width:84%; padding:.7rem .95rem; border-radius:14px; font-size:.89rem; line-height:1.6; white-space:pre-wrap; }
.msg.bot{ align-self:flex-start; background:rgba(var(--shade),.05); border:1px solid var(--navy-line); border-start-start-radius:4px; }
.msg.me{ align-self:flex-end; background:var(--brand-grad); color:#02171a; border-end-end-radius:4px; }
.chat-quick{ display:flex; gap:.4rem; flex-wrap:wrap; padding:0 1.1rem .7rem; }
.chat-quick button{
  padding:.4rem .75rem; border-radius:999px; border:1px solid var(--navy-line);
  background:rgba(var(--shade),.04); cursor:pointer; font-size:.76rem; color:var(--text-2); transition:.3s;
}
.chat-quick button:hover{ border-color:var(--brand); color:var(--brand-hi); }
.chat-foot{ display:flex; gap:.5rem; padding:.85rem 1.1rem 1.1rem; border-top:1px solid var(--navy-line); }
.chat-foot input{ flex:1; padding:.7rem .9rem; border-radius:999px; background:#ffffff; border:1px solid var(--navy-line); }
.chat-foot input:focus{ outline:0; border-color:rgba(28,136,142,.6); }
.chat-foot button{ width:42px; height:42px; border-radius:50%; border:0; background:var(--brand-grad); color:#02171a; cursor:pointer; flex-shrink:0; }
.typing{ display:flex; gap:4px; align-items:center; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--text-3); animation:blink 1.3s infinite; }
.typing i:nth-child(2){ animation-delay:.18s; } .typing i:nth-child(3){ animation-delay:.36s; }
@keyframes blink{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

/* ---------- Toast ---------- */
.toast{
  position:fixed; inset-inline-start:50%; bottom:28px; transform:translate(-50%,140%); z-index:999;
  padding:.9rem 1.4rem; border-radius:999px; font-size:.9rem;
  background:#ffffff; border:1px solid rgba(28,136,142,.4); box-shadow:0 18px 40px -18px rgba(27,35,54,.3);
  transition:transform .5s var(--ease);
}
.toast.on{ transform:translate(-50%,0); }

/* ---------- Reveal animation ---------- */
[data-rv]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
[data-rv].in{ opacity:1; transform:none; }
[data-rv="l"]{ transform:translateX(-30px); } [data-rv="r"]{ transform:translateX(30px); }
[data-rv="s"]{ transform:scale(.95); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ padding-top:calc(var(--nav-h) + clamp(3.4rem,7vw,6rem)); padding-bottom:clamp(2rem,4vw,3.4rem); }
.crumb{ font-size:.76rem; color:var(--text-3); letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem; }
body[data-lang="ar"] .crumb{ letter-spacing:0; text-transform:none; }

/* ---------- Utilities ---------- */
.center{ text-align:center; }
.mt-0{ margin-top:0 } .mt-1{ margin-top:.6rem } .mt-2{ margin-top:1.2rem } .mt-3{ margin-top:2rem } .mt-4{ margin-top:3rem }
.mb-0{ margin-bottom:0 } .mb-2{ margin-bottom:1.2rem } .mb-3{ margin-bottom:2rem }
.flex{ display:flex } .wrapf{ flex-wrap:wrap } .gap-1{ gap:.6rem } .gap-2{ gap:1.2rem }
.items-center{ align-items:center } .between{ justify-content:space-between } .jcenter{ justify-content:center }
.small{ font-size:.86rem } .muted{ color:var(--text-3) } .nowrap{ white-space:nowrap }
.hide{ display:none !important; }
[dir="rtl"] .flip{ transform:scaleX(-1); }

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .dash{ grid-template-columns:1fr; }
  .dash-side{ position:static; display:flex; overflow-x:auto; gap:.4rem; }
  .dash-side button{ white-space:nowrap; width:auto; }
}
@media(max-width:960px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto; flex-direction:column; align-items:stretch; gap:.2rem;
    padding:1.2rem clamp(1.1rem,4vw,2.2rem) 1.8rem; background:#ffffff;
    backdrop-filter:blur(20px); border-bottom:1px solid var(--navy-line);
    transform:translateY(-120%); transition:transform .5s var(--ease); visibility:hidden;
  }
  .nav-links.open{ transform:none; visibility:visible; }
  .nav-links a{ padding:.85rem .3rem; font-size:1rem; border-bottom:1px solid rgba(35,48,74,.5); }
  .burger{ display:block; }
  .hero-grid,.split,.split-wide,.split-lean,.grid-wide,.roi,.case{ grid-template-columns:1fr; }
  .split.rev>*:first-child{ order:0; }
  .hero-visual{ max-width:420px; margin-inline:auto; }
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .g-3{ grid-template-columns:repeat(2,1fr); }
  .nav-actions .btn{ display:none; }
}
@media(max-width:640px){
  .g-2,.g-3,.g-4,.row-2,.metrics{ grid-template-columns:1fr; }
  .metrics{ grid-template-columns:repeat(3,1fr); }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:1.5rem 2rem; }
  .chat-win{ inset-inline:12px; width:auto; bottom:88px; }
  /* no sideways reveal on narrow screens — it can nudge the page wider mid-animation */
  [data-rv="l"],[data-rv="r"]{ transform:translateY(26px); }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-rv]{ opacity:1; transform:none; }
}

/* ---------- Print (contract → PDF) ---------- */
@media print{
  @page{ size:A4; margin:18mm 16mm; }
  body{ background:#fff !important; color:#111 !important; font-size:11.5pt; }
  body::before,body::after{ display:none !important; }
  .site-header,.site-footer,.chat-fab,.chat-win,.no-print,.toast{ display:none !important; }
  .doc{ box-shadow:none !important; border:0 !important; background:#fff !important; padding:0 !important; max-width:none !important; }
  .doc *{ color:#111 !important; }
  .doc h1,.doc h2,.doc h3{ color:#0a1526 !important; }
  .doc .accent{ -webkit-text-fill-color:#0e5a5f !important; color:#0e5a5f !important; background:none !important; }
  .doc table{ border-color:#bbb !important; }
  .doc td,.doc th{ border-color:#bbb !important; }
  .page-break{ break-before:page; }
}

/* Contract document styling (screen) */
.doc{
  max-width:900px; margin-inline:auto; padding:clamp(1.6rem,4vw,3.2rem);
  background:linear-gradient(170deg,var(--surface),var(--surface-2));
  border:1px solid var(--navy-line); border-radius:var(--radius);
}
.doc h2{ font-size:1.35rem; margin-top:2rem; padding-bottom:.5rem; border-bottom:1px solid rgba(28,136,142,.25); }
.doc ol{ padding-inline-start:1.3rem; }
.doc ol li{ margin-bottom:.6rem; color:var(--text-2); }
.doc table{ width:100%; border-collapse:collapse; margin:1rem 0; font-size:.92rem; }
.doc td,.doc th{ border:1px solid var(--navy-line); padding:.6rem .8rem; text-align:start; }
.doc th{ background:rgba(28,136,142,.07); font-weight:600; width:34%; }
.sign-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; margin-top:3rem; }
.sign-box{ border-top:1px solid var(--text-3); padding-top:.6rem; font-size:.85rem; }
.doc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1.4rem; flex-wrap:wrap; padding-bottom:1.4rem; border-bottom:2px solid rgba(28,136,142,.4); }
.doc-head img{ width:64px; height:64px; border-radius:12px; }