/* HimaTech · Sanctuary light
   Chosen production direction: architectural lightness, restrained green accents. */

html[data-design="sanctuary"] {
  --ink0: #f7f6f2;
  --ink1: #eff3ef;
  --ink2: #e7eee8;
  --bone: #17233f;
  --bone-dim: rgba(23, 35, 63, 0.64);
  --bone-faint: rgba(23, 35, 63, 0.4);
  --emerald: #1f7a5a;
  --emerald-deep: #155a42;
  --mint: #2d966f;
  --brass: #927744;
  --hair: rgba(23, 35, 63, 0.13);
  --hair-brass: rgba(146, 119, 68, 0.3);
  --tick: rgba(146, 119, 68, 0.7);
  --sanctuary-navy: #17233f;
  --sanctuary-green: #1f7a5a;
}

html[data-design="sanctuary"],
html[data-design="sanctuary"] body {
  background: var(--ink0);
}

html[data-design="sanctuary"] body { color: var(--bone); }
html[data-design="sanctuary"] body::after { opacity: 0.018; }

html[data-design="sanctuary"] .nav {
  background: rgba(247, 246, 242, 0.9);
  border-block-end: 1px solid var(--hair);
  box-shadow: 0 8px 30px rgba(23, 35, 63, 0.035);
}

html[data-design="sanctuary"] .nav.scrolled { background: rgba(247, 246, 242, 0.97); }
html[data-design="sanctuary"] .nav-logo { display: inline-flex; align-items: center; }
html[data-design="sanctuary"] .logo-lockup { display: inline-flex; align-items: center; gap: 0.7rem; width: 188px; height: 58px; direction: ltr; }
html[data-design="sanctuary"] .nav-logo-mark { width: 58px; height: 48px; object-fit: contain; filter: brightness(0) saturate(100%) invert(13%) sepia(17%) saturate(1436%) hue-rotate(182deg) brightness(91%) contrast(95%); }
html[data-design="sanctuary"] .nav-logo-word { width: 122px; height: 38px; object-fit: cover; object-position: bottom; filter: brightness(0) saturate(100%) invert(13%) sepia(17%) saturate(1436%) hue-rotate(182deg) brightness(91%) contrast(95%); }
html[data-design="sanctuary"] .nav-links a,
html[data-design="sanctuary"] .lang-toggle { color: rgba(23, 35, 63, 0.68); }
html[data-design="sanctuary"] .nav-links a:hover,
html[data-design="sanctuary"] .nav-links a.active { color: var(--sanctuary-navy); }
html[data-design="sanctuary"] .nav-links a::after { background: var(--sanctuary-green); }
html[data-design="sanctuary"] .nav-cta { border-color: rgba(31, 122, 90, 0.34); color: var(--sanctuary-green); }
html[data-design="sanctuary"] .nav-cta:hover { border-color: var(--sanctuary-green); color: #fff; background: var(--sanctuary-green); }
html[data-design="sanctuary"] .nav-burger span { background: var(--sanctuary-navy); }
html[data-design="sanctuary"] .mobile-menu { background: rgba(247, 246, 242, 0.98); }

html[data-design="sanctuary"] .hero {
  min-height: calc(100svh - 72px);
  display: grid;
  align-items: stretch;
  border-block-end: 1px solid var(--hair);
  background-color: #faf9f6;
  background-image:
    linear-gradient(rgba(23, 35, 63, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 35, 63, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 28% 43%, rgba(31, 122, 90, 0.08), transparent 28%);
  background-size: 72px 72px, 72px 72px, auto;
  isolation: isolate;
}

html[data-design="sanctuary"] .hero::before {
  inset: 0;
  width: auto;
  height: auto;
  background: linear-gradient(90deg, rgba(250, 249, 246, 0) 0 45%, rgba(250, 249, 246, 0.76) 64%, #faf9f6 78%);
  z-index: -1;
}

html[data-design="sanctuary"] .hero-inner {
  z-index: 4;
  width: min(1520px, 100%);
  min-height: calc(100svh - 72px);
  padding-block: clamp(4rem, 8vh, 7rem);
  padding-inline-end: clamp(31rem, 45vw, 43rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

html[data-design="sanctuary"] .hero h1 {
  max-width: 100%;
  margin-block-end: 1.8rem;
  color: var(--sanctuary-navy);
  font-size: clamp(2.9rem, 4.3vw, 4.9rem);
  line-height: 1.26;
  letter-spacing: -0.025em;
}

html[data-design="sanctuary"] .hero h1 em { color: var(--sanctuary-green); }
html[lang="ar"][data-design="sanctuary"] .hero h1 { letter-spacing: 0; line-height: 1.34; }
html[data-design="sanctuary"] .hero-sub { max-width: 46rem; color: rgba(23, 35, 63, 0.58); font-size: clamp(1rem, 1.35vw, 1.14rem); line-height: 1.9; }
html[data-design="sanctuary"] .btn-solid { background: var(--sanctuary-green); color: #fff; box-shadow: 0 14px 35px rgba(31, 122, 90, 0.18); }
html[data-design="sanctuary"] .btn-solid:hover { background: #176448; }
html[data-design="sanctuary"] .btn-ghost { border-color: rgba(23, 35, 63, 0.2); color: var(--sanctuary-navy); }

html[data-design="sanctuary"] .concept-visual,
html[data-design="sanctuary"] .concept-rail { pointer-events: none; user-select: none; }
html[data-design="sanctuary"] .concept-visual { position: absolute; z-index: 1; inset-inline-end: 6.5rem; inset-block: 10% 8%; width: min(42vw, 600px); }
html[data-design="sanctuary"] .visual-shell { position: relative; width: 100%; height: 100%; }
html[data-design="sanctuary"] .visual-vault { position: absolute; z-index: 2; inset: 9% 0 auto; width: 100%; filter: hue-rotate(-58deg) saturate(0.78) contrast(1.02); mix-blend-mode: multiply; opacity: 0.88; }
html[data-design="sanctuary"] .visual-axis { position: absolute; z-index: 3; background: rgba(31, 122, 90, 0.2); }
html[data-design="sanctuary"] .axis-x { inset-inline: 5%; top: 50%; height: 1px; }
html[data-design="sanctuary"] .axis-y { inset-block: 8%; left: 50%; width: 1px; }
html[data-design="sanctuary"] .concept-rail { position: absolute; z-index: 5; left: 1.4rem; inset-block-start: 50%; display: grid; gap: 1.45rem; direction: ltr; transform: translateY(-50%); }
html[data-design="sanctuary"] .concept-rail span { position: relative; min-width: 86px; padding-inline-start: 1rem; color: rgba(23, 35, 63, 0.66); font-family: var(--mono); font-size: 0.7rem; }
html[data-design="sanctuary"] .concept-rail span::before { position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: #3be0a6; content: ""; box-shadow: 0 0 0 4px rgba(59, 224, 166, 0.12); }
html[data-design="sanctuary"] .concept-rail b { display: block; color: var(--sanctuary-green); font-size: 0.6rem; font-weight: 500; }

html[data-design="sanctuary"] .ticker { background: #edf4ef; }
html[data-design="sanctuary"] .ti { color: rgba(23, 35, 63, 0.48); }
html[data-design="sanctuary"] .tsep { color: var(--sanctuary-green); }
html[data-design="sanctuary"] .stack-ticker { background: #eef3f0; }
html[data-design="sanctuary"] .stack-track { animation-duration: 54s; }
html[data-design="sanctuary"] .stack-half { gap: 0; padding-block: 0.72rem; }
html[data-design="sanctuary"] .stack-item {
  min-width: 82px;
  padding-inline: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: rgba(23, 35, 63, 0.42);
  border-inline-end: 1px solid rgba(23, 35, 63, 0.08);
}
html[data-design="sanctuary"] .stack-item img {
  width: 31px;
  height: 31px;
  object-fit: contain;
  opacity: 0.62;
}
html[data-design="sanctuary"] .stack-hima img {
  filter: grayscale(1) contrast(0.72);
}
html[data-design="sanctuary"] .sec { background: var(--ink0); }
html[data-design="sanctuary"] .suite-head { padding-block-end: 2rem; border-block-end: 1px solid var(--hair); }
html[data-design="sanctuary"] .suite-head h2,
html[data-design="sanctuary"] .sec h2 { color: var(--sanctuary-navy); }
html[data-design="sanctuary"] .prow { padding-block: 2.3rem; }
html[data-design="sanctuary"] .prow:hover,
html[data-design="sanctuary"] .prow:focus-within { background: linear-gradient(to left, rgba(31, 122, 90, 0.08), transparent 72%); }
html[data-design="sanctuary"] .pnum,
html[data-design="sanctuary"] .par,
html[data-design="sanctuary"] .kicker,
html[data-design="sanctuary"] .doctrine-num,
html[data-design="sanctuary"] .pl-num,
html[data-design="sanctuary"] .pname b,
html[data-design="sanctuary"] .plink,
html[data-design="sanctuary"] .pdesc em,
html[data-design="sanctuary"] .lacr,
html[data-design="sanctuary"] .vision a,
html[data-design="sanctuary"] .faq-item[open] .faq-num { color: var(--sanctuary-green); }
html[data-design="sanctuary"] .manifesto { background: #eff3ef; border-block: 1px solid var(--hair); }
html[data-design="sanctuary"] .manifesto .ghost { color: rgba(31, 122, 90, 0.045); }
html[data-design="sanctuary"] .manifesto h2 mark { color: var(--sanctuary-green); border-color: rgba(31, 122, 90, 0.28); }
html[data-design="sanctuary"] .ledger { background: #fff; box-shadow: 0 26px 80px rgba(23, 35, 63, 0.06); }
html[data-design="sanctuary"] .lrow:hover,
html[data-design="sanctuary"] .faq-item summary:hover { background: rgba(31, 122, 90, 0.04); }
html[data-design="sanctuary"] .vision { border-color: rgba(31, 122, 90, 0.2); background: rgba(31, 122, 90, 0.045); }
html[data-design="sanctuary"] .faq { background: #f1f4f1; border-block-start: 1px solid var(--hair); }
html[data-design="sanctuary"] .contact { background: radial-gradient(90% 130% at 85% 0%, rgba(59, 224, 166, 0.14), transparent 54%), #17233f; color: #fff; }
html[data-design="sanctuary"] .contact h2,
html[data-design="sanctuary"] .contact .btn-solid { color: #fff; }
html[data-design="sanctuary"] .contact h2 em { color: #3be0a6; }
html[data-design="sanctuary"] .contact-sub { color: rgba(255, 255, 255, 0.7); }
html[data-design="sanctuary"] .contact .btn-solid { background: var(--sanctuary-green); border-color: var(--sanctuary-green); }
html[data-design="sanctuary"] .footer { background: #0d1426; color: #fff; }
html[data-design="sanctuary"] .footer .footer-h { color: #3be0a6; }
html[data-design="sanctuary"] .footer-brand p,
html[data-design="sanctuary"] .footer-col a,
html[data-design="sanctuary"] .footer-col span,
html[data-design="sanctuary"] .footer-base > span { color: rgba(255, 255, 255, 0.56); }

@media (max-width: 980px) {
  html[data-design="sanctuary"] .hero-inner { padding-inline-end: var(--gutter); }
  html[data-design="sanctuary"] .concept-visual { width: 58%; opacity: 0.17; }
  html[data-design="sanctuary"] .concept-rail { display: none; }
  html[data-design="sanctuary"] .hero::before { background: rgba(250, 249, 246, 0.5); }
  html[data-design="sanctuary"] .stack-item { min-width: 76px; padding-inline: 0.95rem; }
}

@media (max-width: 760px) {
  html[data-design="sanctuary"] .logo-lockup { width: 150px; height: 48px; gap: 0.48rem; }
  html[data-design="sanctuary"] .nav-logo-mark { width: 45px; height: 38px; }
  html[data-design="sanctuary"] .nav-logo-word { width: 98px; height: 30px; }
  html[data-design="sanctuary"] .hero,
  html[data-design="sanctuary"] .hero-inner { min-height: calc(100svh - 72px); }
  html[data-design="sanctuary"] .hero-inner { padding-block: 5rem 2.5rem; justify-content: flex-start; }
  html[data-design="sanctuary"] .hero h1 { font-size: clamp(2.35rem, 10.5vw, 3.5rem); }
  html[data-design="sanctuary"] .hero-sub { font-size: 0.96rem; line-height: 1.82; margin-block-end: 1.8rem; }
  html[data-design="sanctuary"] .hero-cta { gap: 0.75rem; }
  html[data-design="sanctuary"] .concept-visual { inset-inline-end: auto; inset-inline-start: -20%; inset-block: 10% 8%; width: 92%; opacity: 0.12; }
  html[data-design="sanctuary"] .stack-half { padding-block: 0.58rem; }
  html[data-design="sanctuary"] .stack-item { min-width: 64px; padding-inline: 0.78rem; }
  html[data-design="sanctuary"] .stack-item img { width: 25px; height: 25px; }
}