/* =========================================================
   Nawa HR — design tokens
   ========================================================= */
:root{
  --bg:#F5F7F5;
  --bg-alt:#EBEFEA;
  --surface:#FFFFFF;
  --surface-raised:#FFFFFF;
  --text:#152420;
  --text-muted:#516059;
  --primary:#1F4B4B;
  --primary-light:#2F6363;
  --primary-tint:#E4EEEC;
  --accent:#D9822B;
  --accent-dark:#B96A1E;
  --accent-tint:#FBEAD5;
  --border:#DBE3DD;
  --success:#3F8F6B;
  --danger:#C4523B;
  --shadow: 0 1px 2px rgba(21,36,32,.04), 0 8px 24px -12px rgba(21,36,32,.18);
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:22px;
  --font-en:'Inter',sans-serif;
  --font-ar:'Tajawal',sans-serif;
  --max-w:1180px;
}
html.dark{
  --bg:#0F1815;
  --bg-alt:#131F1B;
  --surface:#16221E;
  --surface-raised:#1B2A25;
  --text:#EAF2EE;
  --text-muted:#93A69E;
  --primary:#57ACA1;
  --primary-light:#6DC1B5;
  --primary-tint:#16302C;
  --accent:#EFA45C;
  --accent-dark:#F0B274;
  --accent-tint:#2B2015;
  --border:#233530;
  --success:#5CB78E;
  --danger:#E07C64;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px -12px rgba(0,0,0,.55);
}

/* =========================================================
   Base
   ========================================================= */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-en);
  transition:background .25s ease,color .25s ease;
  -webkit-font-smoothing:antialiased;
}
html[lang="ar"] body{ font-family:var(--font-ar); }

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

h1,h2,h3,h4{
  margin:0 0 .5em;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.01em;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{
  font-weight:900; letter-spacing:0;
}
p{ line-height:1.7; color:var(--text-muted); margin:0 0 1em; max-width:62ch;}

.container{
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:24px;
}

.eyebrow-free{ } /* intentionally no eyebrow labels, see design notes */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.85em 1.5em;
  border-radius:var(--radius-sm);
  font-weight:700;
  font-size:.96rem;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-light); }
.btn-accent{ background:var(--accent); color:#1a1206; }
.btn-accent:hover{ background:var(--accent-dark); }
.btn-outline{ background:transparent; border-color:var(--border); color:var(--text); }
.btn-outline:hover{ border-color:var(--primary); color:var(--primary); }
.btn-sm{ padding:.55em 1.1em; font-size:.85rem; }
.btn-block{ width:100%; }

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-block-end:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:16px; gap:20px;
}
.brand{ display:flex; align-items:center; gap:.6em; font-weight:800; font-size:1.15rem; }
.brand-mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(155deg, var(--primary) 0%, var(--primary-light) 100%);
  display:flex;align-items:center;justify-content:center;
  color:#fff; font-weight:900; font-size:1.05rem; flex:none;
}
.brand-logo{ width:34px;height:34px;border-radius:9px; overflow:hidden; flex:none; }
.brand-logo img{ width:100%;height:100%; object-fit:cover; display:block; }
.brand-logo .logo-dark{ display:none; }
html.dark .brand-logo .logo-light{ display:none; }
html.dark .brand-logo .logo-dark{ display:block; }
.brand-name span{ color:var(--accent); }

.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{
  font-size:.94rem; font-weight:600; color:var(--text-muted);
  padding-block:6px; border-block-end:2px solid transparent;
}
.main-nav a:hover, .main-nav a.active{ color:var(--text); border-color:var(--accent); }

.header-actions{ display:flex; align-items:center; gap:10px; }

.icon-btn{
  width:38px;height:38px; border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  cursor:pointer;
}
.icon-btn:hover{ border-color:var(--primary); }
.icon-btn svg{ width:18px;height:18px; }
.icon-btn .icon-moon{ display:none; }
html.dark .icon-btn .icon-sun{ display:none; }
html.dark .icon-btn .icon-moon{ display:block; }

.lang-switch{
  display:flex; border:1px solid var(--border); border-radius:20px; overflow:hidden;
}
.lang-switch button{
  border:none; background:transparent; color:var(--text-muted);
  padding:.45em 1em; font-size:.82rem; font-weight:700; cursor:pointer;
}
.lang-switch button.active{ background:var(--primary); color:#fff; }

.nav-toggle{ display:none; }

@media (max-width:920px){
  .main-nav{
    position:fixed; inset-inline:0; top:70px; bottom:0;
    background:var(--bg); flex-direction:column; align-items:flex-start;
    padding:28px 24px; gap:6px; transform:translateY(-8px);
    opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
    overflow-y:auto;
  }
  .main-nav.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .main-nav a{ width:100%; padding-block:12px; border-block-end:1px solid var(--border); }
  .nav-toggle{
    display:flex; width:38px;height:38px; border-radius:8px; align-items:center;justify-content:center;
    border:1px solid var(--border); background:var(--surface); cursor:pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:''; display:block; width:18px; height:2px; background:var(--text); position:relative;
  }
  .nav-toggle span::before{ position:absolute; top:-6px; }
  .nav-toggle span::after{ position:absolute; top:6px; }
  .header-actions .btn-primary.nav-cta-desktop{ display:none; }
}
@media (min-width:921px){ .nav-toggle{ display:none; } }

/* =========================================================
   Hero
   ========================================================= */
.hero{ padding-block:72px 96px; overflow:hidden; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.hero h1{ font-size:clamp(2.1rem, 4vw, 3.15rem); }
.hero p.lead{ font-size:1.1rem; max-width:46ch; }
.hero-ctas{ display:flex; gap:14px; margin-block-start:28px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:32px; margin-block-start:44px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-size:1.4rem; font-weight:800; color:var(--primary); }
html.dark .hero-stat b{ color:var(--primary-light); }
.hero-stat span{ font-size:.82rem; color:var(--text-muted); }

/* mock check-in card */
.mock-wrap{ position:relative; }
.mock-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:26px; max-width:380px; margin-inline:auto;
}
.mock-card-head{ display:flex; align-items:center; justify-content:space-between; margin-block-end:18px; }
.mock-card-head b{ font-size:.95rem; }
.mock-pill{
  font-size:.72rem; font-weight:700; padding:.3em .8em; border-radius:20px;
  background:var(--success); color:#fff;
  display:inline-flex; align-items:center; gap:6px;
}
.mock-pill::before{ content:''; width:6px;height:6px;border-radius:50%; background:#fff; }
.mock-map{
  height:150px; border-radius:14px; margin-block-end:18px; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, var(--primary-tint) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 22px, var(--border) 23px),
    repeating-linear-gradient(90deg, transparent, transparent 22px, var(--border) 23px);
  background-color:var(--bg-alt);
}
.mock-pin{
  position:absolute; inset-inline-start:50%; inset-block-start:50%;
  transform:translate(-50%,-100%);
  width:26px;height:26px;border-radius:50% 50% 50% 0; rotate:-45deg;
  background:var(--accent); box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.mock-pin::after{ content:''; position:absolute; inset:6px; background:#fff; border-radius:50%; }
.mock-radius{
  position:absolute; inset-inline-start:50%; inset-block-start:calc(50% - 26px);
  width:80px;height:80px; border-radius:50%; transform:translate(-50%,-50%);
  border:2px dashed var(--accent); opacity:.5;
}
.mock-row{ display:flex; align-items:center; justify-content:space-between; padding-block:10px; border-block-start:1px solid var(--border); font-size:.86rem; color:var(--text-muted); }
.mock-row b{ color:var(--text); font-weight:700; }
.mock-card .btn{ margin-block-start:16px; }

@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero{ padding-block:48px 60px; }
  .hero-ctas, .hero-stats{ justify-content:center; text-align:center; }
  .hero p.lead{ margin-inline:auto; }
}

/* =========================================================
   Sections / general
   ========================================================= */
section{ padding-block:88px; }
.section-alt{ background:var(--bg-alt); }
.section-head{ max-width:640px; margin-block-end:48px; }
.section-head p{ font-size:1.02rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center p{ margin-inline:auto; }

.badge{
  display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700;
  color:var(--primary); background:var(--primary-tint); padding:.4em .9em; border-radius:20px;
  margin-block-end:16px;
}
html.dark .badge{ color:var(--primary-light); }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:920px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:28px; height:100%;
}
.feat-icon{
  width:46px;height:46px;border-radius:12px; background:var(--primary-tint); color:var(--primary);
  display:flex;align-items:center;justify-content:center; margin-block-end:16px;
}
html.dark .feat-icon{ color:var(--primary-light); }
.feat-icon svg{ width:22px;height:22px; }
.card h3{ font-size:1.08rem; }
.card p{ font-size:.92rem; margin-block-end:0; }

/* steps */
.steps{ counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:920px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-inline-start:0; }
.step-num{
  width:38px;height:38px; border-radius:10px; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; margin-block-end:14px;
}
.step h3{ font-size:1rem; }
.step p{ font-size:.88rem; }

/* CTA band */
.cta-band{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius:var(--radius-lg); padding:56px; color:#fff; text-align:center;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.85); margin-inline:auto; }
.cta-band .btn-accent{ margin-block-start:20px; }

/* =========================================================
   Pricing
   ========================================================= */
.pricing-toggle{
  display:inline-flex; background:var(--surface); border:1px solid var(--border); border-radius:30px;
  padding:5px; margin-block-end:8px;
}
.pricing-toggle button{
  border:none; background:transparent; padding:.7em 1.4em; border-radius:24px; font-weight:700;
  font-size:.9rem; cursor:pointer; color:var(--text-muted);
}
.pricing-toggle button.active{ background:var(--primary); color:#fff; }

.calc-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:40px; box-shadow:var(--shadow);
}
.calc-top{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-block-end:28px; }
.calc-price{ font-size:2.6rem; font-weight:800; color:var(--primary); }
html.dark .calc-price{ color:var(--primary-light); }
.calc-price small{ font-size:1rem; font-weight:600; color:var(--text-muted); }
.calc-sub{ font-size:.85rem; color:var(--text-muted); }

.range-wrap{ margin-block:20px; }
.range-label{ display:flex; justify-content:space-between; font-size:.85rem; color:var(--text-muted); margin-block-end:10px; }
.range-label b{ color:var(--text); font-size:1rem; }
input[type="range"]{
  -webkit-appearance:none; width:100%; height:6px; border-radius:6px; background:var(--border); outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px;height:22px; border-radius:50%; background:var(--accent);
  border:4px solid var(--surface); box-shadow:0 0 0 1.5px var(--accent); cursor:pointer; margin-block-start:-8px;
}
input[type="range"]::-moz-range-thumb{
  width:22px;height:22px; border-radius:50%; background:var(--accent); border:4px solid var(--surface);
  box-shadow:0 0 0 1.5px var(--accent); cursor:pointer;
}
.range-ticks{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--text-muted); margin-block-start:6px; }

.calc-list{ list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.calc-list li{ display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--text-muted); }
.calc-list li svg{ width:16px;height:16px; color:var(--success); flex:none; }
@media (max-width:560px){ .calc-list{ grid-template-columns:1fr; } }

.compare-table{ width:100%; border-collapse:collapse; margin-block-start:20px; font-size:.9rem; }
.compare-table th, .compare-table td{ padding:14px 16px; border-block-end:1px solid var(--border); text-align:start; }
.compare-table th{ color:var(--text-muted); font-size:.78rem; text-transform:none; font-weight:700; }
.compare-table td.check{ text-align:center; }
.compare-table td.check svg{ width:16px;height:16px; color:var(--success); }

.tier-note{
  display:flex; gap:12px; align-items:flex-start; background:var(--accent-tint); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:18px 20px; margin-block-start:24px; font-size:.87rem; color:var(--text-muted);
}
.tier-note svg{ width:20px;height:20px; color:var(--accent-dark); flex:none; margin-block-start:2px; }

/* FAQ */
.faq-item{ border-block-end:1px solid var(--border); padding-block:18px; }
.faq-q{
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  font-weight:700; font-size:.98rem; gap:16px;
}
.faq-q svg{ width:18px;height:18px; flex:none; transition:transform .2s ease; color:var(--text-muted); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ display:none; margin-block-start:10px; font-size:.9rem; }
.faq-item.open .faq-a{ display:block; }

/* =========================================================
   About / Contact
   ========================================================= */
.value-list{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:680px){ .value-list{ grid-template-columns:1fr; } }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:920px){ .split{ grid-template-columns:1fr; } }

.stat-block{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
@media (max-width:680px){ .stat-block{ grid-template-columns:1fr 1fr; } }
.stat-block b{ display:block; font-size:2rem; font-weight:800; color:var(--primary); }
html.dark .stat-block b{ color:var(--primary-light); }
.stat-block span{ font-size:.85rem; color:var(--text-muted); }

.contact-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:flex-start; }
@media (max-width:920px){ .contact-wrap{ grid-template-columns:1fr; } }
.info-row{ display:flex; gap:14px; align-items:flex-start; margin-block-end:22px; }
.info-row .feat-icon{ margin-block-end:0; }
.info-row h4{ font-size:.95rem; margin-block-end:4px; }
.info-row p{ font-size:.88rem; margin:0; }

.form-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-block-end:18px; }
.field label{ display:block; font-size:.85rem; font-weight:700; margin-block-end:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:.85em 1em; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg); color:var(--text); font:inherit; font-size:.92rem;
}
.field textarea{ resize:vertical; min-height:110px; }
.form-note{ font-size:.8rem; color:var(--text-muted); margin-block-start:14px; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:var(--bg-alt); border-block-start:1px solid var(--border); padding-block:56px 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-block-end:40px; }
@media (max-width:780px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ font-size:.82rem; margin-block-end:14px; color:var(--text-muted); font-weight:700; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-grid a{ font-size:.9rem; color:var(--text-muted); }
.footer-grid a:hover{ color:var(--primary); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-block-start:24px; border-block-start:1px solid var(--border); font-size:.82rem; color:var(--text-muted); }

/* payment badges */
.pay-badges{ display:flex; gap:10px; align-items:center; margin-block-start:10px; }
.pay-badge{ border:1px solid var(--border); border-radius:8px; padding:.4em .8em; font-size:.72rem; font-weight:700; color:var(--text-muted); background:var(--surface); }

/* =========================================================
   Admin dashboard preview (homepage)
   ========================================================= */
.dash-mock{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); overflow:hidden;
}
.dash-topbar{
  display:flex; align-items:center; gap:16px; padding:14px 20px;
  background:var(--bg-alt); border-block-end:1px solid var(--border);
}
.dash-dots{ display:flex; gap:6px; flex:none; }
.dash-dots span{ width:10px;height:10px;border-radius:50%; }
.dash-dots span:nth-child(1){ background:#E5645C; }
.dash-dots span:nth-child(2){ background:#E6B34F; }
.dash-dots span:nth-child(3){ background:#4FB374; }
.dash-url{
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:.4em 1.1em; font-size:.8rem; color:var(--text-muted); margin-inline:auto;
}
.dash-url b{ color:var(--text); font-weight:700; }
.dash-body{ display:flex; align-items:stretch; }
.dash-sidebar{
  flex:none; width:180px; padding:20px 14px; border-inline-end:1px solid var(--border);
  background:var(--bg-alt);
}
.dash-side-brand{ display:flex; align-items:center; gap:.6em; font-weight:800; font-size:.92rem; margin-block-end:22px; padding-inline-start:8px; }
.dash-sidebar nav{ display:grid; gap:4px; }
.dash-sidebar nav a{
  display:block; padding:.6em .8em; border-radius:var(--radius-sm); font-size:.85rem;
  font-weight:600; color:var(--text-muted);
}
.dash-sidebar nav a.active{ background:var(--primary); color:#fff; }
.dash-main{ flex:1; padding:24px; min-width:0; }
.dash-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-block-end:20px; }
.dash-stat{
  border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; background:var(--surface);
}
.dash-stat span{ display:block; font-size:.76rem; color:var(--text-muted); margin-block-end:6px; }
.dash-stat b{ font-size:1.35rem; font-weight:800; color:var(--text); }
.dash-stat b.up{ color:var(--success); }
.dash-stat b.warn{ color:var(--accent-dark); }
.dash-table-wrap{ overflow-x:auto; }
.dash-table{ min-width:480px; }
.dash-row{
  display:grid; grid-template-columns:1.6fr 1fr .9fr; gap:12px; align-items:center;
  padding-block:12px; border-block-end:1px solid var(--border); font-size:.86rem;
}
.dash-row:last-child{ border-block-end:none; }
.dash-row-head{ color:var(--text-muted); font-size:.74rem; font-weight:700; padding-block:0 10px; }
.dash-emp{ display:flex; align-items:center; gap:10px; font-weight:700; }
.dash-emp i{
  flex:none; width:30px;height:30px;border-radius:50%; background:var(--primary-tint); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-style:normal; font-size:.74rem; font-weight:800;
}
html.dark .dash-emp i{ color:var(--primary-light); }
.dash-status{
  display:inline-flex; width:fit-content; padding:.3em .8em; border-radius:20px; font-size:.74rem; font-weight:700;
}
.dash-status.present{ background:color-mix(in srgb, var(--success) 16%, transparent); color:var(--success); }
.dash-status.leave{ background:var(--accent-tint); color:var(--accent-dark); }
.dash-status.absent{ background:color-mix(in srgb, var(--danger) 16%, transparent); color:var(--danger); }

@media (max-width:780px){
  .dash-sidebar{ display:none; }
  .dash-stats{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .dash-url{ display:none; }
}

/* page hero (inner pages) */
.page-hero{ padding-block:56px 40px; text-align:center; }
.page-hero .badge{ margin-inline:auto; }
.page-hero h1{ font-size:clamp(1.8rem,3.4vw,2.6rem); }
.page-hero p{ margin-inline:auto; font-size:1.02rem; }

/* utility */
.text-center{ text-align:center; }
.mt-lg{ margin-block-start:48px; }