/* ============================================================
   Dr Ershadi — Maxillofacial Surgery
   Design System · FLAT · cool periwinkle + navy ink + vivid green
   RTL Persian · editorial
   ============================================================ */

@import url('https://v1.fontapi.ir/css/YekanBakh');
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;900&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* cool field (var names kept for compatibility) */
  --cream:      #EEF3FB;   /* light cool near-white (text-on-navy / light surfaces) */
  --cream-deep: #D9E5F4;   /* soft periwinkle */
  --cream-2:    #C8D9EE;   /* deeper periwinkle */
  --paper:      #fff;
  --paper-edge: #fff;
  --surface:    #fff;

  /* navy ink */
  --ink:   #16335E;
  --ink-2: #45618B;
  --ink-3: #8295B5;
  --ink-4: #AEBED5;

  /* hairlines (navy tinted) */
  --line:      rgba(22,51,94,0.16);
  --line-soft: rgba(22,51,94,0.08);
  --line-nav:  rgba(22,51,94,0.12);

  /* signature vivid green accent (was --tan) */
  --tan:   #34C45B;
  --tan-2: #A9ECB8;
  --green:  #34C45B;
  --green-d:#23A847;

  --radius:   14px;
  --radius-l: 20px;
  --radius-s: 8px;
  --radius-btn: 10px;

  --shadow-card: none;
  --shadow-pop:  none;
  --shadow-nav:  0 1px 3px rgba(22,51,94,0.06), 0 8px 24px -10px rgba(22,51,94,0.10);
  --glossy:      none;

  --font-display: 'Yekan Bakh','Vazirmatn',sans-serif;
  --font-body:    'Yekan Bakh','Vazirmatn',sans-serif;
  --font-mono:    'IBM Plex Mono',ui-monospace,monospace;

  --maxw: 1400px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  direction:rtl;
  text-align:right;
  font-weight:400;
  line-height:1.6;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--ink); color:var(--cream); }

/* layout helpers */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,68px); }
.section{ padding-block:clamp(72px,11vw,160px); }
.eyebrow-row{ display:flex; align-items:center; gap:14px; }

/* ---- type ---- */
h1, h2, h3, h4, h5, h6{ -webkit-user-select:none; user-select:none; }
.display{
  font-family:var(--font-display);
  font-weight:900;
  line-height:.92;
  letter-spacing:-.03em;
  margin:0;
}
.d-1{ font-size:clamp(3rem,9.5vw,9.5rem); }
.d-2{ font-size:clamp(2.6rem,6.4vw,5.6rem); line-height:.96; }
.d-3{ font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.02; }
.lead{ font-size:clamp(1.05rem,1.4vw,1.32rem); color:var(--ink-2); font-weight:400; line-height:1.7; max-width:46ch; }
.dot{ color:var(--green); }

/* mono kicker with leading dot */
.kicker{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  direction:ltr;
  font-weight:500;
}
.kicker::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
  flex:none;
}
.kicker--fa{ font-family:var(--font-display); direction:rtl; letter-spacing:.04em; font-weight:700; font-size:.92rem; text-transform:none; color:var(--ink-2); }

.num{ font-family:var(--font-mono); font-weight:500; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  padding:.86em 1.5em;
  border-radius:var(--radius-btn);
  font-weight:700;
  font-size:1rem;
  border:1px solid transparent;
  transition:background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn .arr{
  width:1.85em;height:1.85em;border-radius:var(--radius-s);
  display:grid;place-items:center;
  flex:none;
  transition:transform .45s var(--ease), background .3s;
}
.btn svg{ width:.95em;height:.95em; }
/* primary: navy pill + green circular arrow */
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary .arr{ background:var(--green); color:#fff; }
.btn-primary:hover .arr{ transform:rotate(-45deg); }
/* ghost: flat white pill + green arrow */
.btn-ghost{
  background:var(--surface);
  color:var(--ink); border-color:var(--line);
}
.btn-ghost .arr{ background:var(--green); color:#fff; }
.btn-ghost:hover{ background:#fff; }
.btn-ghost:hover .arr{ transform:rotate(-45deg); }
.btn-sm{ padding:.5em 1.1em; font-size:.86rem; }

/* text link with underline arrow */
.tlink{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); direction:ltr;
  border-bottom:1px solid var(--line);
  padding-bottom:3px;
  transition:gap .3s, border-color .3s, color .3s;
}
.tlink:hover{ gap:.9em; border-color:var(--green); color:var(--green-d); }

/* ---- chrome / surfaces (flat) ---- */
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

/* info card */
.glass{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

/* tiny pill chip */
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.5em 1em; border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line);
  font-size:.82rem; font-weight:500; color:var(--ink-2);
}
.chip--green{ background:rgba(52,196,91,.14); border-color:rgba(52,196,91,.35); color:var(--green-d); }

/* divider */
.hr{ height:1px; background:var(--line); border:0; margin:0; }

/* marquee */
.marquee{ overflow:hidden; border-block:1px solid var(--line); padding-block:18px; background:var(--surface); }
.marquee__track{ display:flex; gap:0; width:max-content; animation:marq 32s linear infinite; }
.marquee__track:hover{ animation-play-state:paused; }
.marquee__item{ display:inline-flex; align-items:center; gap:24px; padding-inline:24px; font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,3vw,2.6rem); color:var(--ink); white-space:nowrap; }
.marquee__item .sep{ color:var(--green); font-size:.7em; }
@keyframes marq{ to{ transform:translateX(50%);} } /* RTL: translate positive */

/* image placeholder — cool striped, with mono caption */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(135deg, var(--cream-deep), var(--cream-deep) 12px, var(--cream-2) 12px, var(--cream-2) 24px);
  display:grid; place-items:center;
  color:var(--ink-3);
  overflow:hidden;
}
.ph::after{ content:none; }
.ph span{
  position:relative; z-index:1;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  background:var(--surface); padding:.5em 1em; border-radius:999px; border:1px solid var(--line);
  direction:ltr; color:var(--ink-2);
}
/* when a real image is present inside a .ph wrapper */
.ph > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.ph.has-img::after{ background:none; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}