/* =====================================================================
   مؤسسة إعلام الإنجاز — Design Tokens & Base
   ===================================================================== */

:root{
  /* Color — Primary (Saudi official green) */
  --color-primary-900:#052e1c;
  --color-primary-800:#07402a;
  --color-primary-700:#0a5936;
  --color-primary-600:#0f7a45;
  --color-primary-500:#159c58;
  --color-primary-400:#3ab475;
  --color-primary-100:#e3f6ec;
  --color-primary-50:#f3fbf7;

  /* Neutrals (slightly green-tinted for cohesion) */
  --color-ink-900:#12211a;
  --color-ink-700:#3f4b46;
  --color-ink-600:#576259;
  --color-ink-500:#647169;
  --color-ink-300:#c3ccc6;
  --color-ink-200:#dfe6e1;
  --color-ink-100:#eef3f0;
  --color-white:#ffffff;
  --color-bg:#fbfdfc;

  /* Semantic (eligibility results + alerts) */
  --color-success-bg:#eafaf0;
  --color-success-border:#16a34a;
  --color-success-text:#0f6b32;
  --color-warning-bg:#fff8e6;
  --color-warning-border:#d97706;
  --color-warning-text:#8a5a00;
  --color-danger-bg:#fdecec;
  --color-danger-border:#dc2626;
  --color-danger-text:#a31515;
  --color-info-bg:#eef6fb;
  --color-info-border:#2563a8;
  --color-info-text:#1c4870;

  /* Typography */
  --font-arabic:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif;
  --fs-xs:.8125rem;
  --fs-sm:.9375rem;
  --fs-base:1rem;
  --fs-md:1.125rem;
  --fs-lg:1.25rem;
  --fs-xl:1.5rem;
  --fs-2xl:1.875rem;
  --fs-3xl:2.25rem;
  --fs-4xl:2.75rem;

  /* Spacing */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;

  /* Radius */
  --radius-sm:.5rem;
  --radius-md:.75rem;
  --radius-lg:1rem;
  --radius-xl:1.5rem;
  --radius-full:999px;

  /* Shadow */
  --shadow-sm:0 1px 3px rgba(18,33,26,.06),0 1px 2px rgba(18,33,26,.04);
  --shadow-md:0 6px 20px rgba(18,33,26,.08);
  --shadow-lg:0 20px 48px rgba(18,33,26,.14);
  --shadow-button:0 6px 16px rgba(10,89,54,.28);
  --shadow-button-hover:0 12px 26px rgba(10,89,54,.38);

  /* Motion */
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --duration-fast:150ms;
  --duration-base:250ms;
  --duration-slow:420ms;

  --container-max:1200px;
  --header-h:76px;
}

/* =====================================================================
   Reset & Base
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
body{
  margin:0;
  font-family:var(--font-arabic);
  font-size:var(--fs-base);
  line-height:1.75;
  color:var(--color-ink-900);
  background:var(--color-bg);
  min-height:100dvh;
}
[hidden]{display:none !important;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p,figure{margin:0;}
input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:3px solid var(--color-primary-500);outline-offset:2px;border-radius:4px;}

.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:1.25rem;
}
@media (min-width:768px){ .container{padding-inline:2rem;} }

main{display:block;}
[id]{scroll-margin-top:calc(var(--header-h) + 1rem);}

/* Skip link */
.skip-link{
  position:fixed;
  inset-inline-start:1rem;
  top:-4rem;
  z-index:1000;
  background:var(--color-primary-700);
  color:#fff;
  padding:.75rem 1.25rem;
  border-radius:var(--radius-md);
  transition:top var(--duration-base) var(--ease-standard);
}
.skip-link:focus{top:1rem;}

/* =====================================================================
   Disclaimer bar
   ===================================================================== */
.disclaimer-bar{
  background:linear-gradient(180deg,#fff8e6,#fef3d6);
  border-bottom:1px solid #f0dfa8;
}
.disclaimer-bar__inner{
  display:flex;
  align-items:flex-start;
  gap:.625rem;
  padding-block:.6rem;
}
.disclaimer-bar__inner svg{flex:none;width:18px;height:18px;color:#92600a;margin-top:.15rem;}
.disclaimer-bar p{
  font-size:.8125rem;
  line-height:1.6;
  color:#6b4a08;
  margin:0;
}
.disclaimer-bar strong{color:#523702;}

/* =====================================================================
   Header
   ===================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(251,253,252,.92);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.site-header.is-scrolled{
  box-shadow:var(--shadow-sm);
  border-bottom-color:var(--color-ink-200);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:var(--header-h);
}
.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex:none;
}
.brand__mark{
  width:40px;height:44px;
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.brand__mark img{width:100%;height:100%;display:block;}
.brand__text{display:flex;flex-direction:column;line-height:1.3;}
.brand__text strong{font-size:1rem;font-weight:800;color:var(--color-ink-900);}
.brand__text small{font-size:.75rem;color:var(--color-ink-500);font-weight:500;}

.main-nav{
  display:flex;
  align-items:center;
  gap:1.75rem;
}
.main-nav a{
  font-weight:600;
  font-size:.9375rem;
  color:var(--color-ink-700);
  position:relative;
  padding-block:.35rem;
  transition:color var(--duration-fast) var(--ease-standard);
}
.main-nav a::after{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:-2px;
  height:2px;
  background:var(--color-primary-600);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform var(--duration-base) var(--ease-standard);
}
.main-nav a:hover{color:var(--color-primary-700);}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after{transform:scaleX(1);}
.main-nav a[aria-current="page"]{color:var(--color-primary-700);}

.header-actions{display:flex;align-items:center;gap:.75rem;}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  border-radius:var(--radius-md);
  border:1px solid var(--color-ink-200);
  color:var(--color-ink-900);
}
.nav-toggle svg{width:22px;height:22px;}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-menu{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

@media (max-width:1023px){
  .main-nav{
    position:fixed;
    inset-inline:0;
    top:var(--header-h);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#fff;
    border-bottom:1px solid var(--color-ink-200);
    box-shadow:var(--shadow-md);
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard),visibility var(--duration-base);
    padding:.5rem 1.25rem 1.25rem;
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
  }
  .main-nav.is-open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
  }
  .main-nav a{
    padding:.9rem .25rem;
    border-bottom:1px solid var(--color-ink-100);
  }
  .main-nav a::after{display:none;}
  .nav-toggle{display:inline-flex;}
  .header-actions .btn-header-wa span.btn-text-full{display:none;}
}
@media (min-width:1024px){
  .nav-toggle{display:none;}
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn{
  --btn-pad-y:.85rem;
  --btn-pad-x:1.5rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--radius-full);
  font-weight:700;
  font-size:.9375rem;
  white-space:nowrap;
  min-height:44px;
  border:1px solid transparent;
  transition:transform var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard),
             background var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard);
}
.btn svg{width:20px;height:20px;flex:none;}
.btn:active{transform:translateY(1px);}

.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--color-primary-600),var(--color-primary-700));
  box-shadow:var(--shadow-button);
}
.btn-primary:hover{
  background:linear-gradient(135deg,var(--color-primary-700),var(--color-primary-800));
  box-shadow:var(--shadow-button-hover);
  transform:translateY(-2px);
}

.btn-glow{ animation:pulseGlow 2.6s var(--ease-standard) infinite; }
@keyframes pulseGlow{
  0%,100%{ box-shadow:var(--shadow-button), 0 0 0 0 rgba(15,122,69,.35); }
  50%{ box-shadow:var(--shadow-button-hover), 0 0 0 9px rgba(15,122,69,0); }
}
@media (prefers-reduced-motion: reduce){ .btn-glow{animation:none;} }

.btn-secondary{
  color:var(--color-primary-700);
  background:var(--color-white);
  border-color:var(--color-primary-200,#bfe3cd);
  box-shadow:var(--shadow-sm);
}
.btn-secondary:hover{
  background:var(--color-primary-50);
  border-color:var(--color-primary-500);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

.btn-ghost{
  color:var(--color-ink-700);
  background:transparent;
  border-color:var(--color-ink-200);
}
.btn-ghost:hover{
  background:var(--color-ink-100);
  color:var(--color-ink-900);
}

.btn-whatsapp{
  color:#fff;
  background:linear-gradient(135deg,#25d366,#128c4a);
  box-shadow:0 6px 16px rgba(18,140,74,.3);
}
.btn-whatsapp:hover{
  background:linear-gradient(135deg,#2fe071,#0f7a40);
  box-shadow:0 12px 26px rgba(18,140,74,.4);
  transform:translateY(-2px);
}

.btn-sm{--btn-pad-y:.6rem;--btn-pad-x:1.1rem;font-size:.875rem;min-height:38px;}
.btn-lg{--btn-pad-y:1.05rem;--btn-pad-x:2rem;font-size:1rem;}
.btn-block{width:100%;}

.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;}

/* =====================================================================
   Layout helpers / Section
   ===================================================================== */
.section{padding-block:var(--space-16);}
@media (min-width:768px){ .section{padding-block:var(--space-24);} }
.section--tinted{background:linear-gradient(180deg,var(--color-primary-50),#fff 60%);}
.section--ink{background:var(--color-ink-100);}

.section-heading{
  max-width:760px;
  margin-inline:auto;
  text-align:center;
  margin-bottom:var(--space-12);
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.8125rem;
  font-weight:700;
  color:var(--color-primary-700);
  background:var(--color-primary-100);
  padding:.4rem 1rem;
  border-radius:var(--radius-full);
  margin-bottom:var(--space-4);
}
.section-heading h2{
  font-size:var(--fs-2xl);
  font-weight:800;
  color:var(--color-ink-900);
  margin-bottom:var(--space-3);
}
.section-heading p{color:var(--color-ink-600);font-size:var(--fs-md);line-height:1.75;}
@media (min-width:768px){ .section-heading h2{font-size:var(--fs-3xl);} }

.breadcrumb{
  display:flex;align-items:center;gap:.5rem;
  font-size:.875rem;color:var(--color-ink-500);
  margin-bottom:var(--space-6);
}
.breadcrumb a{color:var(--color-primary-700);font-weight:600;}
.breadcrumb svg{width:14px;height:14px;color:var(--color-ink-300);}

/* =====================================================================
   Hero
   ===================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  padding-block:var(--space-16) var(--space-20);
}
.hero::before,.hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  z-index:0;
  opacity:.55;
}
.hero::before{
  width:420px;height:420px;
  background:radial-gradient(circle,var(--color-primary-100),transparent 70%);
  top:-140px;
  inset-inline-end:-120px;
}
.hero::after{
  width:320px;height:320px;
  background:radial-gradient(circle,#eaf7ee,transparent 70%);
  bottom:-120px;
  inset-inline-start:-100px;
}
.hero__inner{position:relative;z-index:1;text-align:center;max-width:820px;margin-inline:auto;}
.hero__badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;border:1px solid var(--color-primary-100);
  color:var(--color-primary-700);
  font-size:.8125rem;font-weight:700;
  padding:.5rem 1rem;border-radius:var(--radius-full);
  box-shadow:var(--shadow-sm);
  margin-bottom:var(--space-6);
}
.hero__badge svg{width:16px;height:16px;}
.hero h1{
  font-size:var(--fs-3xl);
  font-weight:800;
  line-height:1.35;
  color:var(--color-ink-900);
  margin-bottom:var(--space-5);
}
.hero h1 span{color:var(--color-primary-600);}
.hero p.lead{
  font-size:var(--fs-md);
  color:var(--color-ink-600);
  max-width:620px;
  margin-inline:auto;
  margin-bottom:var(--space-8);
}
@media (min-width:768px){ .hero h1{font-size:var(--fs-4xl);} }

.hero__actions{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1rem;margin-bottom:var(--space-10);
}
.hero__trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;
}
.trust-chip{
  display:flex;align-items:center;gap:.5rem;
  background:#fff;border:1px solid var(--color-ink-200);
  padding:.55rem .95rem;border-radius:var(--radius-full);
  font-size:.8125rem;font-weight:600;color:var(--color-ink-700);
  box-shadow:var(--shadow-sm);
}
.trust-chip svg{width:16px;height:16px;color:var(--color-primary-600);flex:none;}

/* =====================================================================
   Feature / Why-us cards
   ===================================================================== */
.grid{display:grid;gap:1.5rem;}
.grid-2{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
.grid-4{grid-template-columns:1fr;}
@media (min-width:640px){
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:900px){
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-4{grid-template-columns:repeat(4,1fr);}
}

.card{
  background:#fff;
  border:1px solid var(--color-ink-100);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  box-shadow:var(--shadow-sm);
  transition:transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--color-primary-100);
}
.icon-tile{
  width:52px;height:52px;
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--color-primary-50),var(--color-primary-100));
  color:var(--color-primary-700);
  margin-bottom:var(--space-4);
}
.icon-tile svg{width:26px;height:26px;}
.feature-card h3{font-size:var(--fs-md);font-weight:700;margin-bottom:var(--space-2);color:var(--color-ink-900);}
.feature-card p{color:var(--color-ink-600);font-size:.9375rem;line-height:1.7;}

/* =====================================================================
   Eligibility Tool
   ===================================================================== */
.eligibility-card{
  background:#fff;
  border:1px solid var(--color-ink-100);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  padding:var(--space-6);
  max-width:760px;
  margin-inline:auto;
}
@media (min-width:768px){ .eligibility-card{padding:var(--space-10);} }

.eligibility-progress{margin-bottom:var(--space-8);}
.progress-track{
  height:8px;border-radius:var(--radius-full);
  background:var(--color-ink-100);
  overflow:hidden;
  margin-bottom:.6rem;
}
.progress-fill{
  height:100%;
  border-radius:var(--radius-full);
  background:linear-gradient(90deg,var(--color-primary-500),var(--color-primary-700));
  width:14.28%;
  transition:width var(--duration-slow) var(--ease-standard);
}
.progress-label{display:flex;justify-content:space-between;font-size:.8125rem;font-weight:700;color:var(--color-primary-700);}

.tool-step legend,.tool-step .step-legend{
  font-size:var(--fs-lg);
  font-weight:800;
  color:var(--color-ink-900);
  margin-bottom:var(--space-5);
  padding:0;
}
.step-hint{font-size:.875rem;color:var(--color-ink-500);margin-top:-1rem;margin-bottom:var(--space-5);}

.radio-card-group{display:grid;gap:.75rem;}
@media (min-width:560px){ .radio-card-group.cols-2{grid-template-columns:repeat(2,1fr);} }
@media (min-width:560px){ .radio-card-group.cols-3{grid-template-columns:repeat(3,1fr);} }

.radio-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:.85rem;
  border:1.5px solid var(--color-ink-200);
  border-radius:var(--radius-md);
  padding:1rem 1.1rem;
  cursor:pointer;
  background:#fff;
  transition:border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.radio-card input{
  position:absolute;
  opacity:0;
  width:1px;height:1px;
}
.radio-card__icon{
  flex:none;width:38px;height:38px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--color-ink-100);color:var(--color-ink-500);
  transition:background var(--duration-fast), color var(--duration-fast);
}
.radio-card__icon svg{width:20px;height:20px;}
.radio-card__text{font-weight:700;font-size:.9375rem;color:var(--color-ink-800,#22332a);}
.radio-card__check{
  margin-inline-start:auto;
  width:22px;height:22px;border-radius:50%;
  border:2px solid var(--color-ink-300);
  flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--duration-fast), background var(--duration-fast);
}
.radio-card__check svg{width:13px;height:13px;color:#fff;opacity:0;transition:opacity var(--duration-fast);}
.radio-card:hover{border-color:var(--color-primary-400);}
.radio-card.is-checked{
  border-color:var(--color-primary-600);
  background:var(--color-primary-50);
  box-shadow:0 0 0 3px var(--color-primary-100);
}
.radio-card.is-checked .radio-card__icon{background:var(--color-primary-600);color:#fff;}
.radio-card.is-checked .radio-card__check{background:var(--color-primary-600);border-color:var(--color-primary-600);}
.radio-card.is-checked .radio-card__check svg{opacity:1;}
.radio-card:focus-within{outline:3px solid var(--color-primary-500);outline-offset:2px;}

/* Slider (age) */
.slider-wrap{padding-block:var(--space-4);}
.slider-value{
  text-align:center;
  font-size:2.5rem;
  font-weight:800;
  color:var(--color-primary-700);
  margin-bottom:var(--space-6);
}
.slider-value span{font-size:1.1rem;font-weight:600;color:var(--color-ink-500);}
input[type="range"]{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  height:8px;
  border-radius:var(--radius-full);
  background:linear-gradient(90deg,var(--color-primary-500) var(--range-progress,20%),var(--color-ink-200) var(--range-progress,20%));
  outline-offset:6px;
}
input[type="range"]::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;
  width:28px;height:28px;border-radius:50%;
  background:#fff;
  border:4px solid var(--color-primary-600);
  box-shadow:0 3px 10px rgba(10,89,54,.35);
  cursor:pointer;
  transition:transform var(--duration-fast);
}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.08);}
input[type="range"]::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;
  background:#fff;border:4px solid var(--color-primary-600);
  box-shadow:0 3px 10px rgba(10,89,54,.35);
  cursor:pointer;
}
input[type="range"]::-moz-range-track{
  height:8px;border-radius:var(--radius-full);background:var(--color-ink-200);
}
input[type="range"]::-moz-range-progress{
  height:8px;border-radius:var(--radius-full);background:var(--color-primary-500);
}
.slider-scale{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--color-ink-500);margin-top:.5rem;}

/* Field / select / text input */
.field{margin-bottom:var(--space-5);}
.field-label{display:block;font-weight:700;font-size:.9375rem;color:var(--color-ink-900);margin-bottom:.6rem;}
.field-control{
  width:100%;
  border:1.5px solid var(--color-ink-200);
  border-radius:var(--radius-md);
  padding:.9rem 1.1rem;
  background:#fff;
  min-height:52px;
  transition:border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.field-control:focus{border-color:var(--color-primary-600);box-shadow:0 0 0 3px var(--color-primary-100);outline:none;}
select.field-control{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23576259' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat:no-repeat;
  background-position:left 1rem center;
  padding-inline-start:2.75rem;
}
.field-hint{font-size:.8125rem;color:var(--color-ink-500);margin-top:.5rem;}
.field-error{
  display:flex;align-items:center;gap:.4rem;
  font-size:.8125rem;font-weight:700;color:var(--color-danger-text);
  margin-top:.6rem;
}
.field-error svg{width:16px;height:16px;flex:none;}
.field-control.is-invalid{border-color:var(--color-danger-border);}
.field-control[dir="ltr"]{text-align:left;letter-spacing:.06em;font-variant-numeric:tabular-nums;}

.step-error{
  display:none;
  align-items:center;gap:.5rem;
  background:var(--color-danger-bg);
  color:var(--color-danger-text);
  border:1px solid #f6c9c9;
  padding:.75rem 1rem;
  border-radius:var(--radius-md);
  font-size:.875rem;font-weight:600;
  margin-top:var(--space-4);
}
.step-error.is-visible{display:flex;}
.step-error svg{width:18px;height:18px;flex:none;}

/* checklist */
.checklist{display:grid;gap:.7rem;}
.checkbox-row{
  display:flex;align-items:center;gap:.85rem;
  border:1.5px solid var(--color-ink-200);
  border-radius:var(--radius-md);
  padding:.9rem 1.1rem;
  cursor:pointer;
  transition:border-color var(--duration-fast), background var(--duration-fast);
}
.checkbox-row:hover{border-color:var(--color-primary-400);}
.checkbox-row input{
  width:20px;height:20px;flex:none;
  accent-color:var(--color-primary-600);
}
.checkbox-row.is-checked{border-color:var(--color-primary-600);background:var(--color-primary-50);}
.checkbox-row span{font-weight:600;font-size:.9375rem;color:var(--color-ink-800,#22332a);}

/* Tool nav buttons */
.tool-nav{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-top:var(--space-8);
  padding-top:var(--space-6);
  border-top:1px solid var(--color-ink-100);
}
.tool-nav .btn{min-width:120px;}

/* Result panel */
.tool-result{
  text-align:center;
  padding-block:var(--space-4);
}
.result-icon{
  width:76px;height:76px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-inline:auto;margin-bottom:var(--space-5);
}
.result-icon svg{width:38px;height:38px;}
.tool-result h3{font-size:var(--fs-xl);font-weight:800;margin-bottom:var(--space-3);}
.tool-result p.result-text{
  color:var(--color-ink-700);
  font-size:1rem;
  max-width:520px;
  margin-inline:auto;
  margin-bottom:var(--space-8);
  line-height:1.8;
}
.tool-result.is-success .result-icon{background:var(--color-success-bg);color:var(--color-success-border);}
.tool-result.is-success h3{color:var(--color-success-text);}
.tool-result.is-warning .result-icon{background:var(--color-warning-bg);color:var(--color-warning-border);}
.tool-result.is-warning h3{color:var(--color-warning-text);}
.tool-result.is-danger .result-icon{background:var(--color-danger-bg);color:var(--color-danger-border);}
.tool-result.is-danger h3{color:var(--color-danger-text);}

.result-summary{
  text-align:start;
  background:var(--color-ink-100);
  border-radius:var(--radius-md);
  padding:1.1rem 1.25rem;
  margin-bottom:var(--space-8);
  font-size:.875rem;
  color:var(--color-ink-700);
}
.result-summary dt{font-weight:700;color:var(--color-ink-900);display:inline;}
.result-summary dd{display:inline;margin:0;}
.result-summary .summary-row{margin-bottom:.4rem;}
.result-summary .summary-row:last-child{margin-bottom:0;}

.result-actions{display:flex;flex-direction:column;gap:.75rem;align-items:center;}

/* =====================================================================
   Timeline (service steps)
   ===================================================================== */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;}
.timeline li{
  display:flex;gap:1rem;
  background:#fff;border:1px solid var(--color-ink-100);
  border-radius:var(--radius-lg);
  padding:1.25rem;
  box-shadow:var(--shadow-sm);
}
.timeline .step-num{
  flex:none;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(145deg,var(--color-primary-500),var(--color-primary-700));
  color:#fff;font-weight:800;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
}
.timeline h3{font-size:1.0625rem;font-weight:700;margin-bottom:.35rem;color:var(--color-ink-900);}
.timeline p{color:var(--color-ink-600);font-size:.9375rem;line-height:1.7;}

/* Requirement / doc lists */
.check-list{display:grid;gap:.85rem;}
.check-list li{
  display:flex;align-items:flex-start;gap:.75rem;
  background:#fff;border:1px solid var(--color-ink-100);
  border-radius:var(--radius-md);
  padding:.9rem 1.1rem;
  font-size:.9375rem;color:var(--color-ink-700);
  box-shadow:var(--shadow-sm);
}
.check-list svg{flex:none;width:22px;height:22px;color:var(--color-primary-600);margin-top:.05rem;}

/* Callout */
.callout{
  display:flex;gap:.85rem;
  border-radius:var(--radius-md);
  padding:1.1rem 1.25rem;
  font-size:.9375rem;line-height:1.75;
}
.callout svg{flex:none;width:22px;height:22px;margin-top:.1rem;}
.callout--info{background:var(--color-info-bg);color:var(--color-info-text);border:1px solid #cfe3f3;}
.callout--warning{background:var(--color-warning-bg);color:var(--color-warning-text);border:1px solid #f0dfa8;}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-list{max-width:820px;margin-inline:auto;display:grid;gap:.85rem;}
.faq-item{
  background:#fff;border:1px solid var(--color-ink-100);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:1.15rem 1.35rem;
  font-weight:700;
  font-size:.9375rem;
  color:var(--color-ink-900);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .chev{
  flex:none;width:22px;height:22px;color:var(--color-primary-600);
  transition:transform var(--duration-base) var(--ease-standard);
}
.faq-item[open] summary .chev{transform:rotate(180deg);}
.faq-item .faq-answer{
  padding:0 1.35rem 1.25rem;
  color:var(--color-ink-600);
  font-size:.9375rem;
  line-height:1.8;
}

/* =====================================================================
   CTA band
   ===================================================================== */
.cta-band{
  background:linear-gradient(135deg,var(--color-primary-700),var(--color-primary-900));
  border-radius:var(--radius-xl);
  padding:var(--space-10) var(--space-6);
  text-align:center;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.cta-band h2{font-size:var(--fs-2xl);font-weight:800;margin-bottom:var(--space-3);}
.cta-band p{color:rgba(255,255,255,.85);margin-bottom:var(--space-7,1.75rem);font-size:1rem;}
.cta-band .hero__actions{margin-bottom:0;}
.cta-band .btn-secondary{background:#fff;border-color:#fff;}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer{background:var(--color-ink-900);color:#dfe6e1;margin-top:var(--space-20);}
.footer-grid{
  display:grid;gap:2.5rem;
  padding-block:var(--space-16);
  grid-template-columns:1fr;
}
@media (min-width:768px){ .footer-grid{grid-template-columns:2fr 1fr 1fr;} }
.footer-about .brand__text strong{color:#fff;}
.footer-about .brand__text small{color:#9fb0a6;}
.footer-about p{margin-top:1rem;color:#b7c4bc;font-size:.9375rem;line-height:1.8;max-width:360px;}
.site-footer h3{color:#fff;font-size:1rem;font-weight:700;margin-bottom:1.1rem;}
.footer-links{display:flex;flex-direction:column;gap:.75rem;}
.footer-links a{color:#b7c4bc;font-size:.9375rem;transition:color var(--duration-fast);}
.footer-links a:hover{color:#fff;}
.footer-contact a.btn{margin-top:.25rem;}
.footer-contact p{color:#b7c4bc;font-size:.875rem;margin-top:.75rem;}

.footer-disclaimer{
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:1.5rem;
  font-size:.8125rem;
  line-height:1.8;
  color:#9fb0a6;
}
.footer-disclaimer strong{color:#d7ddd9;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:1.25rem;
  text-align:center;
  font-size:.8125rem;
  color:#8a9a90;
}

/* =====================================================================
   Floating WhatsApp button (mobile)
   ===================================================================== */
.whatsapp-float{
  position:fixed;
  bottom:1.25rem;
  right:1.25rem;
  z-index:90;
  width:60px;height:60px;
  border-radius:50%;
  background:linear-gradient(145deg,#25d366,#128c4a);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(18,140,74,.4);
  animation:pulseGlowWa 2.6s var(--ease-standard) infinite;
}
.whatsapp-float svg{width:30px;height:30px;}
@keyframes pulseGlowWa{
  0%,100%{ box-shadow:0 10px 24px rgba(18,140,74,.4), 0 0 0 0 rgba(37,211,102,.45); }
  50%{ box-shadow:0 10px 24px rgba(18,140,74,.4), 0 0 0 12px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce){ .whatsapp-float{animation:none;} }
@media (min-width:1024px){ .whatsapp-float{display:none;} }

/* =====================================================================
   Utilities
   ===================================================================== */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.stack{display:flex;flex-direction:column;}
.ltr-nums{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;display:inline-block;}

@media (max-width:480px){
  .hero__actions .btn,.result-actions .btn{width:100%;}
}

/* =====================================================================
   Articles
   ===================================================================== */
.article-card{
  background:#fff;
  border:1px solid var(--color-ink-100);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  transition:transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.article-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--color-primary-100);
}
.article-card__thumb{
  height:160px;
  flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--color-primary-500),var(--color-primary-800));
}
.article-card__thumb svg{width:52px;height:52px;color:#fff;}
.article-card__thumb img{width:100%;height:100%;object-fit:cover;}
.article-card__body{
  padding:var(--space-6);
  display:flex;
  flex-direction:column;
  flex:1;
}
.article-card__date{
  display:flex;align-items:center;gap:.4rem;
  font-size:.8125rem;color:var(--color-ink-500);
  margin-bottom:.6rem;
}
.article-card__date svg{width:15px;height:15px;flex:none;}
.article-card__title{
  font-size:1.125rem;
  font-weight:800;
  color:var(--color-ink-900);
  margin-bottom:.6rem;
  line-height:1.5;
}
.article-card__excerpt{
  color:var(--color-ink-600);
  font-size:.9375rem;
  line-height:1.7;
  margin-bottom:var(--space-5);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1;
}
.article-card__body .btn{align-self:flex-start;margin-top:auto;}

/* Article detail */
.article-detail__banner{
  height:200px;
  border-radius:var(--radius-xl);
  background:linear-gradient(145deg,var(--color-primary-500),var(--color-primary-800));
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--space-8);
  overflow:hidden;
}
@media (min-width:768px){ .article-detail__banner{height:280px;} }
.article-detail__banner svg{width:64px;height:64px;color:#fff;}
.article-detail__banner img{width:100%;height:100%;object-fit:cover;}
.article-detail__meta{
  display:flex;align-items:center;gap:.5rem;
  font-size:.875rem;color:var(--color-ink-500);
  margin-bottom:var(--space-4);
}
.article-detail__meta svg{width:16px;height:16px;}
.article-detail h1{
  font-size:var(--fs-2xl);
  font-weight:800;
  color:var(--color-ink-900);
  margin-bottom:var(--space-6);
  line-height:1.5;
}
@media (min-width:768px){ .article-detail h1{font-size:var(--fs-3xl);} }
.article-body{
  max-width:720px;
  margin-inline:auto;
}
.article-body p{
  color:var(--color-ink-700);
  font-size:1.0625rem;
  line-height:1.9;
  margin-bottom:1.4rem;
}
.article-body h2{
  font-size:1.25rem;
  font-weight:800;
  color:var(--color-ink-900);
  margin:2rem 0 1rem;
}
.article-body ul{
  margin-bottom:1.4rem;
  display:grid;
  gap:.6rem;
}
.article-body ul li{
  display:flex;align-items:flex-start;gap:.6rem;
  color:var(--color-ink-700);
  font-size:1.0625rem;
  line-height:1.8;
}
.article-body ul li svg{flex:none;width:20px;height:20px;color:var(--color-primary-600);margin-top:.25rem;}

.article-back-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;color:var(--color-primary-700);
  margin-bottom:var(--space-6);
}
.article-back-link svg{width:18px;height:18px;}
.article-back-link:hover{color:var(--color-primary-800);}

.article-not-found{
  text-align:center;
  padding-block:var(--space-16);
}

/* =====================================================================
   Office gallery (homepage)
   ===================================================================== */
.office-gallery{
  display:grid;
  gap:1.25rem;
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .office-gallery{grid-template-columns:1.4fr 1fr;}
}
.office-gallery__item{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  aspect-ratio:4/3;
}
.office-gallery__item img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}