/* ==========================================================================
   KH Invest — Health Investment
   Design system: forest green + warm ivory + gold, mihrab arch motif
   ========================================================================== */

:root {
  --cream:   #F4F0E6;
  --cream-2: #EBE5D6;
  --cream-3: #E2DAC6;
  --forest:  #1E4D38;
  --pine:    #2C5E46;
  --deep:    #143025;
  --gold:    #BE9233;
  --gold-2:  #D8B662;
  --ink:     #17241D;
  --muted:   #5C6A61;
  --line:    rgba(30, 77, 56, 0.14);
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-feature-settings: "ss01";
}

/* Display headings: serif in English, Vazir in Farsi -------------------- */
.display { font-family: 'Vazirmatn', sans-serif; font-weight: 700; letter-spacing: -0.01em; }
[lang="en"] .display { font-family: 'Spectral', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; }
[lang="en"] body, [lang="en"] { letter-spacing: 0; }

/* Persian numerals look better a touch lighter */
[lang="fa"] .nums { font-feature-settings: "ss01"; }

/* ---- Mihrab arch shape (reusable clip) -------------------------------- */
.arch {
  clip-path: path('M0,500 L0,175 C0,78 90,18 200,18 C310,18 400,78 400,175 L400,500 Z');
}
/* responsive arch via aspect box + svg clip uses objectBoundingBox below */
.arch-clip { clip-path: url(#archClip); }

/* ---- Ray / radiating line texture (hero) ----------------------------- */
.rays {
  background-image: repeating-conic-gradient(
    from 232deg at 6% 116%,
    rgba(30,77,56,0.00) 0deg 0.85deg,
    rgba(30,77,56,0.055) 0.85deg 1.0deg
  );
}
.rays-gold {
  background-image: repeating-conic-gradient(
    from 232deg at 6% 116%,
    rgba(190,146,51,0.00) 0deg 0.85deg,
    rgba(190,146,51,0.10) 0.85deg 1.0deg
  );
}

/* fine paper grain for cream surfaces */
.grain { position: relative; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(30,77,56,0.05) 0.5px, transparent 0.6px);
  background-size: 5px 5px;
}

/* ---- Gold hairline rule ---------------------------------------------- */
.hr-gold { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.rule-gold { border-color: var(--gold); }

/* ---- Angular green block (concept corner motif) ---------------------- */
.facet-br { clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.facet-tr { clip-path: polygon(100% 0, 100% 100%, 0 0); }
.notch    { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }

/* ---- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; font-size: .95rem; line-height: 1; cursor: pointer;
  padding: .95rem 1.6rem; border-radius: 2px; transition: .25s ease;
  white-space: nowrap;
}
.btn-gold { background: var(--gold); color: #2a2008; }
.btn-gold:hover { background: var(--gold-2); transform: translateY(-1px); }
.btn-forest { background: var(--forest); color: var(--cream); }
.btn-forest:hover { background: var(--pine); transform: translateY(-1px); }
.btn-ghost { border: 1px solid var(--line); color: var(--forest); }
.btn-ghost:hover { border-color: var(--forest); background: rgba(30,77,56,0.04); }
.btn-ghost-light { border: 1px solid rgba(244,240,230,.35); color: var(--cream); }
.btn-ghost-light:hover { border-color: var(--gold-2); color: var(--gold-2); }

/* arrow that mirrors with direction */
.dir-arrow { display: inline-block; transition: transform .25s; }
[dir="rtl"] .dir-arrow { transform: scaleX(-1); }
.btn:hover .dir-arrow { transform: translateX(3px); }
[dir="rtl"] .btn:hover .dir-arrow { transform: scaleX(-1) translateX(3px); }

/* ---- Cards ----------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--line);
  transition: .3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -28px rgba(20,48,37,.45); border-color: rgba(190,146,51,.5); }

/* ---- Slider ---------------------------------------------------------- */
.slide { opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.slide.active { opacity: 1; pointer-events: auto; }
.slide.active .reveal { animation: rise .9s .1s both cubic-bezier(.2,.7,.2,1); }
.slide.active .reveal-2 { animation: rise .9s .24s both cubic-bezier(.2,.7,.2,1); }
.slide.active .reveal-3 { animation: rise .9s .38s both cubic-bezier(.2,.7,.2,1); }
@keyframes rise { from { opacity:0; transform: translateY(22px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .slide .reveal,.slide .reveal-2,.slide .reveal-3{animation:none!important;} }

.dot { width: 30px; height: 3px; background: rgba(244,240,230,.35); cursor: pointer; transition: .3s; }
.dot.active { background: var(--gold-2); }

/* ---- Nav underline --------------------------------------------------- */
.navlink { position: relative; padding: .35rem 0; transition: color .2s; }
.navlink::after {
  content: ""; position: absolute; bottom: -2px; inset-inline: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transition: transform .25s;
  transform-origin: var(--ul-origin, right);
}
.navlink:hover { color: var(--forest); }
.navlink:hover::after, .navlink.active::after { transform: scaleX(1); }

/* reveal on scroll */
.io { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.io.in { opacity: 1; transform: none; }

/* lang fade */
.lang-fade { transition: opacity .2s; }

/* utility: tabular numerals */
.tnum { font-variant-numeric: tabular-nums; }

/* hide scrollbar for chips row */
.no-sb::-webkit-scrollbar { display: none; }
.no-sb { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Header ---------------------------------------------------------- */
.site-header { transition: box-shadow .3s, background .3s, padding .3s; }
.site-header.scrolled {
  background: rgba(244,240,230,0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line), 0 14px 40px -34px rgba(20,48,37,.6);
}
.topbar { background: var(--deep); color: rgba(244,240,230,.85); }

/* logo mark */
.logo-mark { width: 38px; height: 46px; flex: none; }

/* ---- Mobile menu ----------------------------------------------------- */
.menu-panel {
  position: fixed; inset: 0; z-index: 60; background: var(--deep);
  display: flex; flex-direction: column; justify-content: center;
  padding: 2rem; gap: .25rem;
  clip-path: circle(0% at var(--mx, 90%) 6%);
  transition: clip-path .5s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.menu-panel.open { clip-path: circle(150% at var(--mx, 90%) 6%); pointer-events: auto; }
.menu-panel a { color: var(--cream); font-size: 1.5rem; font-weight: 600; padding: .7rem 0; border-bottom: 1px solid rgba(244,240,230,.1); }
.menu-panel a:hover { color: var(--gold-2); }

.burger { width: 26px; height: 16px; position: relative; }
.burger span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: .3s; }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:7px; } .burger span:nth-child(3){ top:14px; }
.burger.is-open span:nth-child(1){ top:7px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ top:7px; transform: rotate(-45deg); }

/* arch icon (feature) */
.arch-ico { width: 46px; height: 56px; flex: none; }

/* tag chip */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; padding: .35rem .7rem;
  background: rgba(190,146,51,.14); color: #8a6a1e; border: 1px solid rgba(190,146,51,.32);
}
.chip-light { background: rgba(244,240,230,.12); color: var(--gold-2); border-color: rgba(216,182,98,.4); }

/* status dot */
.sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); display: inline-block; }
.sdot.live { background: #3fa06a; box-shadow: 0 0 0 3px rgba(63,160,106,.18); }

/* eyebrow */
.eyebrow { display:inline-flex; align-items:center; gap:.6rem; font-size:.82rem; font-weight:700; letter-spacing:.04em; color: var(--gold); text-transform: none; }
.eyebrow::before { content:""; width: 26px; height:1px; background: var(--gold); display:inline-block; }
[lang="en"] .eyebrow { letter-spacing: .12em; text-transform: uppercase; }

/* section number */
.secnum { font-family: 'Spectral', serif; color: rgba(30,77,56,.16); font-weight:600; }

/* ====================================================================== */
/*  DESKTOP DROPDOWN NAV (2 levels)                                        */
/* ====================================================================== */
.hd-nav { display: flex; align-items: center; gap: .1rem; }
.hd-item { position: relative; }
.hd-top {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .7rem; font-weight: 500; font-size: 15px;
  color: rgba(23,36,29,.85); cursor: pointer; background: none; border: 0;
  font-family: inherit; transition: color .2s; white-space: nowrap;
}
.hd-item > .hd-top .caret { font-size: .6em; opacity: .55; transition: transform .25s; }
.hd-item:hover > .hd-top { color: var(--forest); }
.hd-item:hover > .hd-top .caret { transform: rotate(180deg); }
.hd-top.is-active { color: var(--forest); }
.hd-top.is-active::after {
  content:""; position:absolute; bottom:-1px; inset-inline:.7rem; height:2px; background:var(--gold);
}

.dropdown {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0;
  min-width: 246px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 24px 50px -26px rgba(20,48,37,.5); padding: .45rem; z-index: 70;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: .22s ease;
  border-top: 2px solid var(--gold);
}
.hd-item:hover > .dropdown { opacity: 1; visibility: visible; transform: none; }

.dd-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .62rem .8rem; font-size: 14.5px; color: rgba(23,36,29,.82);
  transition: .18s; white-space: nowrap; cursor: pointer;
}
.dd-link:hover { background: var(--cream); color: var(--forest); padding-inline-start: 1.05rem; }
.dd-link .fly-caret { color: var(--gold); font-size: .85em; }

.has-flyout { position: relative; }
.flyout {
  position: absolute; top: -.45rem; inset-inline-start: 100%;
  min-width: 220px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 24px 50px -26px rgba(20,48,37,.5); padding: .45rem; z-index: 80;
  opacity: 0; visibility: hidden; transition: .2s ease; margin-inline-start: 2px;
  border-top: 2px solid var(--gold);
}
.has-flyout:hover > .flyout { opacity: 1; visibility: visible; }

/* ====================================================================== */
/*  MOBILE MENU (accordion via <details>)                                 */
/* ====================================================================== */
.menu-panel {
  position: fixed; inset: 0; z-index: 60; background: var(--deep);
  display: block; padding: 5.5rem 1.6rem 2.5rem; overflow-y: auto;
  clip-path: circle(0% at var(--mx, 90%) 5%);
  transition: clip-path .5s cubic-bezier(.2,.7,.2,1); pointer-events: none;
}
.menu-panel.open { clip-path: circle(160% at var(--mx, 90%) 5%); pointer-events: auto; }

.m-group { border-bottom: 1px solid rgba(244,240,230,.12); }
.m-group > summary, .m-link {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  color: var(--cream); font-size: 1.15rem; font-weight: 600; padding: .95rem .2rem;
}
.m-group > summary::-webkit-details-marker { display: none; }
.m-group > summary .caret { color: var(--gold2); transition: transform .25s; font-size: .8em; }
.m-group[open] > summary .caret { transform: rotate(180deg); }
.m-sub { padding-inline-start: .9rem; margin-block-end: .4rem; }
.m-sub .m-link { font-size: 1rem; font-weight: 500; color: rgba(244,240,230,.82); padding: .7rem .2rem; border-bottom: 1px solid rgba(244,240,230,.07); }
.m-sub .m-group > summary { font-size: 1rem; font-weight: 500; color: rgba(244,240,230,.82); padding: .7rem .2rem; border-bottom: 1px solid rgba(244,240,230,.07); }
.m-deep { padding-inline-start: .9rem; }
.m-deep .m-link { font-size: .95rem; color: var(--gold2); padding: .58rem .2rem; }
.m-link:hover, .m-group > summary:hover { color: var(--gold2); }

/* ====================================================================== */
/*  INVESTMENT WIZARD                                                      */
/* ====================================================================== */
.wz-steps { display: flex; align-items: center; gap: .5rem; }
.wz-step { display: flex; align-items: center; gap: .6rem; flex: 1; }
.wz-num {
  width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; border: 2px solid var(--line); color: var(--muted); background: #fff; transition: .3s;
}
.wz-step.active .wz-num { border-color: var(--gold); background: var(--gold); color: #2a2008; }
.wz-step.done .wz-num { border-color: var(--forest); background: var(--forest); color: var(--cream); }
.wz-label { font-size: 14px; font-weight: 600; color: var(--muted); }
.wz-step.active .wz-label, .wz-step.done .wz-label { color: var(--forest); }
.wz-bar { flex: 1; height: 2px; background: var(--line); }
.wz-step.done .wz-bar { background: var(--forest); }

.wz-panel { display: none; }
.wz-panel.active { display: block; animation: rise .5s both; }

.wz-select {
  width: 100%; appearance: none; background: #fff; border: 1px solid var(--line);
  padding: 1rem 1.1rem; font-family: inherit; font-size: 16px; color: var(--ink);
  cursor: pointer; transition: .2s; border-radius: 2px;
}
.wz-select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(190,146,51,.15); }
.wz-field { position: relative; }
.wz-field .chev { position: absolute; inset-inline-end: 1.1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--gold); }

.wz-opt {
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; border: 1px solid var(--line);
  background: #fff; cursor: pointer; transition: .2s; border-radius: 2px;
}
.wz-opt:hover { border-color: rgba(190,146,51,.5); }
.wz-opt.sel { border-color: var(--gold); background: rgba(190,146,51,.07); box-shadow: 0 0 0 1px var(--gold); }
.wz-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: grid; place-items: center; }
.wz-opt.sel .wz-radio { border-color: var(--gold); }
.wz-opt.sel .wz-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }

/* allocation bars */
.alloc-row { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; align-items: center; }
.alloc-track { grid-column: 1 / -1; height: 10px; background: var(--cream3); overflow: hidden; }
.alloc-fill { height: 100%; background: linear-gradient(90deg, var(--pine), var(--forest)); width: 0; transition: width .8s cubic-bezier(.2,.7,.2,1); }
.alloc-fill.gold { background: linear-gradient(90deg, var(--gold2), var(--gold)); }

/* generic page hero */
.page-hero { position: relative; overflow: hidden; }

/* table responsive */
@media (max-width: 640px) {
  .stack-sm td, .stack-sm th { padding-left: 1rem !important; padding-right: 1rem !important; }
}