/* ========================================================================== 
   KINGDOM SPIRIT TECHNOLOGY — SHARED DESIGN SYSTEM
   Version 1.0 | Mobile-first | Vanilla HTML + CSS
   Visual direction: Midnight Bronze + Dark Gold + Champagne Gold
   Secondary accent: restrained electric blue
   Designed for the new Kingdom Spirit Technology website.
   ========================================================================== */

/* 01. BRAND TOKENS ------------------------------------------------------- */
:root {
  color-scheme: dark;
  --bg: #100d08;
  --bg-deep: #090705;
  --bg-deeper: #060503;
  --bg-soft: #171108;
  --surface: #1d180f;
  --surface-2: #261f12;
  --surface-3: #302513;
  --surface-glass: rgba(28, 22, 12, 0.82);
  --surface-light: rgba(247, 220, 153, 0.055);
  --text: #fffaf0;
  --text-soft: #e8dfcb;
  --muted: #b7aa91;
  --muted-2: #8f826b;
  --gold: #d4af37;
  --gold-bright: #f3d77b;
  --gold-soft: #b88f2e;
  --gold-deep: #80611b;
  --gold-wash: rgba(212, 175, 55, 0.12);
  --blue: #168bff;
  --blue-bright: #58b4ff;
  --line: rgba(231, 203, 136, 0.14);
  --line-strong: rgba(212, 175, 55, 0.36);
  --shadow-gold: 0 18px 55px rgba(212, 175, 55, 0.13);
  --shadow-blue: 0 18px 55px rgba(22, 139, 255, 0.12);
  --shadow-card: 0 24px 70px rgba(0, 0, 0, 0.34);
  --radius-xs: 9px;
  --radius-sm: 14px;
  --radius-md: 21px;
  --radius-lg: 30px;
  --radius-xl: 40px;
  --pill: 999px;
  --container: 1220px;
  --section-space: clamp(76px, 9vw, 126px);
  --font-body: "DM Sans", sans-serif;
  --font-heading: "Manrope", sans-serif;
  --ease: 220ms ease;
}

/* 02. RESET AND GLOBAL ELEMENTS ----------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 105px;
  background: var(--bg-deep);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 8% 5%, rgba(168, 125, 28, 0.16), transparent 34rem),
    radial-gradient(ellipse at 96% 23%, rgba(212, 175, 55, 0.075), transparent 31rem),
    radial-gradient(ellipse at 45% 70%, rgba(77, 52, 13, 0.10), transparent 38rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-is-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
::selection { color: #171006; background: var(--gold-bright); }
:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 4px; }

.svg-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.16em;
}
.container { width: min(var(--container), calc(100% - 52px)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-space); }
.section-title {
  margin: 0 0 22px;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 4.3vw, 3.45rem);
  font-weight: 800;
  letter-spacing: -0.058em;
  line-height: 1.13;
}
.section-title span,
.hero-content h1 span,
.commitment-inner h2 span,
.final-cta-content h2 span { color: var(--gold-bright); }
p { margin-top: 0; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 19px;
  color: var(--gold-bright);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  line-height: 1.45;
  text-transform: uppercase;
}
.eyebrow-line {
  display: inline-block;
  width: 28px;
  height: 2px;
  flex: 0 0 28px;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}

/* 03. BUTTONS AND TEXT LINKS -------------------------------------------- */
.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 21px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease), color var(--ease);
}
.button:hover { transform: translateY(-3px); }
.button-primary {
  color: #1a1204;
  background: linear-gradient(135deg, #f5df91 0%, var(--gold) 52%, #b88b25 100%);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.button-primary:hover { box-shadow: 0 16px 38px rgba(212, 175, 55, 0.29); }
.button-secondary {
  color: var(--text);
  border-color: rgba(243, 215, 123, 0.42);
  background: rgba(255, 255, 255, 0.025);
}
.button-secondary:hover { border-color: var(--gold-bright); background: rgba(212, 175, 55, 0.09); }
.button-outline {
  color: var(--gold-bright);
  border-color: var(--line-strong);
  background: transparent;
}
.button-outline:hover { color: #170f03; background: var(--gold-bright); }
.button-large { min-height: 58px; padding: 16px 25px; }
.text-link, .card-link, .subtle-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-bright);
  font-size: 0.9rem;
  font-weight: 800;
  transition: gap var(--ease), color var(--ease);
}
.text-link:hover, .card-link:hover, .subtle-link:hover { gap: 15px; color: #fff0b7; }
.card-link { font-size: 0.82rem; }
.subtle-link { margin-top: 13px; color: var(--muted); font-size: 0.8rem; }
.section-bottom-link { display: flex; justify-content: center; margin-top: 42px; }

/* 04. ANNOUNCEMENT BAR --------------------------------------------------- */
.announcement-bar {
  position: relative;
  z-index: 30;
  color: #261a05;
  background: linear-gradient(90deg, #b48a28, #ead078 47%, #b48a28);
  font-size: 0.77rem;
  font-weight: 700;
}
.announcement-inner { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 18px; }
.announcement-inner p { display: flex; align-items: center; gap: 9px; margin: 0; }
.announcement-star { font-size: 0.95rem; }
.announcement-inner > a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.announcement-inner > a:hover { text-decoration: underline; }

/* 05. BRAND AND STICKY HEADER ------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 25;
  border-bottom: 1px solid rgba(231, 203, 136, 0.10);
  background: rgba(12, 10, 6, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: box-shadow var(--ease), background var(--ease);
}
.site-header.is-scrolled { background: rgba(10, 8, 5, 0.96); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.24); }
.header-inner { display: flex; min-height: 86px; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; min-width: max-content; align-items: center; gap: 12px; }
.brand-mark {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(243, 215, 123, 0.62);
  border-radius: 15px;
  color: var(--gold-bright);
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.035));
  box-shadow: inset 0 0 22px rgba(212, 175, 55, 0.08), 0 8px 25px rgba(0, 0, 0, 0.2);
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: -0.08em;
}
.brand-mark > span { position: absolute; top: 5px; right: 6px; color: #fff2b5; font-size: 0.6rem; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { color: var(--text); font-family: var(--font-heading); font-size: 0.99rem; font-weight: 800; letter-spacing: -0.035em; }
.brand-copy > span { margin-top: 5px; color: var(--gold-bright); font-size: 0.59rem; font-weight: 800; letter-spacing: 0.27em; }
.primary-nav { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 22px); }
.nav-link, .nav-login, .nav-dropdown-toggle {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border: 0;
  color: var(--text-soft);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--ease);
}
.nav-link:hover, .nav-login:hover, .nav-dropdown-toggle:hover { color: var(--gold-bright); }
.nav-login { color: var(--gold-bright); }
.nav-cta { min-height: 43px; padding: 11px 16px; font-size: 0.74rem; }
.nav-dropdown { position: relative; }
.nav-dropdown-toggle .chevron { width: 0.9em; transition: transform var(--ease); }
.nav-dropdown.is-open .nav-dropdown-toggle .chevron { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 15px);
  left: -20px;
  display: grid;
  width: 310px;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: rgba(19, 15, 8, 0.98);
  box-shadow: var(--shadow-card), var(--shadow-gold);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.nav-dropdown.is-open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a { display: flex; min-height: 42px; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--text-soft); font-size: 0.77rem; font-weight: 650; transition: color var(--ease), background var(--ease); }
.nav-dropdown-menu a:hover { color: var(--gold-bright); background: rgba(212, 175, 55, 0.09); }
.nav-dropdown-menu a > .icon { margin-left: auto; }
.dropdown-index { color: var(--gold); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 800; }
.dropdown-divider { height: 1px; margin: 6px 5px; background: var(--line); }
.menu-toggle { display: none; }

/* 06. HERO SECTION ------------------------------------------------------- */
.hero-section {
  position: relative;
  display: flex;
  min-height: min(790px, calc(100svh - 124px));
  align-items: center;
  padding: clamp(78px, 9vw, 120px) 0 112px;
  isolation: isolate;
}
.hero-ambient { position: absolute; z-index: -1; border-radius: 50%; filter: blur(3px); pointer-events: none; }
.hero-ambient-one { top: 1%; left: -12%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(175, 127, 25, 0.17), transparent 67%); }
.hero-ambient-two { right: -9%; bottom: -14%; width: 580px; height: 580px; background: radial-gradient(circle, rgba(212, 175, 55, 0.10), transparent 68%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(390px, 0.96fr); align-items: center; gap: clamp(45px, 7vw, 95px); }
.hero-content { position: relative; z-index: 2; }
.hero-content h1 { max-width: 730px; margin: 0 0 25px; color: var(--text); font-family: var(--font-heading); font-size: clamp(3.1rem, 6.3vw, 5.45rem); font-weight: 800; letter-spacing: -0.075em; line-height: 1.015; }
.hero-content h1 span { text-shadow: 0 0 42px rgba(212, 175, 55, 0.16); }
.hero-description { max-width: 600px; margin: 0; color: var(--text-soft); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.85; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.hero-assurance { display: flex; align-items: center; gap: 13px; margin-top: 35px; }
.assurance-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 1px solid var(--line-strong); border-radius: 13px; color: var(--gold-bright); background: rgba(212, 175, 55, 0.08); }
.assurance-icon .icon { width: 20px; height: 20px; }
.hero-assurance p { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.6; }
.hero-assurance strong { color: var(--text-soft); font-size: 0.83rem; }
.hero-visual { position: relative; min-height: 480px; padding: 18px 16px 18px 25px; }
.hero-image-frame { position: relative; height: 440px; overflow: hidden; border: 1px solid rgba(243, 215, 123, 0.34); border-radius: 34px 34px 34px 95px; background: var(--surface); box-shadow: 0 38px 85px rgba(0, 0, 0, 0.42), 0 0 55px rgba(212, 175, 55, 0.10); }
.hero-image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.77) sepia(0.18) brightness(0.76); }
.hero-image-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(9, 7, 4, 0.84) 100%), linear-gradient(115deg, rgba(212, 175, 55, 0.12), transparent 48%); }
.hero-image-caption { position: absolute; right: 25px; bottom: 25px; left: 27px; display: flex; align-items: center; gap: 10px; color: #fff6df; font-size: 0.78rem; font-weight: 700; }
.status-dot, .visual-label-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 14px rgba(243, 215, 123, 0.8); }
.floating-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; min-width: 218px; padding: 14px 17px; border: 1px solid rgba(243, 215, 123, 0.28); border-radius: 16px; background: rgba(22, 17, 9, 0.91); box-shadow: 0 19px 45px rgba(0, 0, 0, 0.3); backdrop-filter: blur(12px); }
.floating-card-top { top: 56px; left: -23px; }
.floating-card-bottom { right: -15px; bottom: 65px; }
.floating-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 12px; color: #211704; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); }
.floating-icon .icon { width: 20px; height: 20px; }
.floating-card strong, .floating-card small { display: block; }
.floating-card strong { color: var(--text); font-size: 0.78rem; }
.floating-card small { margin-top: 2px; color: var(--muted); font-size: 0.65rem; }
.hero-orbit { position: absolute; z-index: -1; border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 50%; pointer-events: none; }
.hero-orbit-one { top: -25px; right: -25px; width: 230px; height: 230px; }
.hero-orbit-two { right: 10px; bottom: -5px; width: 130px; height: 130px; border-color: rgba(22, 139, 255, 0.24); }
.hero-visual-corner { position: absolute; right: 27px; top: 0; color: rgba(243, 215, 123, 0.55); font-family: var(--font-heading); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.2em; }
.scroll-cue { position: absolute; bottom: 25px; left: 50%; display: inline-flex; align-items: center; gap: 11px; color: var(--muted-2); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.2em; transform: translateX(-50%); }
.scroll-cue span { position: relative; display: inline-block; width: 19px; height: 28px; border: 1px solid var(--gold-soft); border-radius: 12px; }
.scroll-cue span::after { position: absolute; top: 6px; left: 50%; width: 3px; height: 5px; border-radius: 3px; background: var(--gold-bright); content: ""; transform: translateX(-50%); animation: scrollPulse 1.7s ease-in-out infinite; }

/* 07. VALUE STRIP -------------------------------------------------------- */
.value-strip { position: relative; z-index: 2; border-block: 1px solid var(--line); background: linear-gradient(90deg, rgba(212, 175, 55, 0.065), rgba(255, 255, 255, 0.018), rgba(212, 175, 55, 0.065)); }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.value-item { display: flex; min-height: 112px; align-items: center; gap: 14px; padding: 20px 22px; border-right: 1px solid var(--line); }
.value-item:first-child { border-left: 1px solid var(--line); }
.value-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 1px solid rgba(212, 175, 55, 0.28); border-radius: 14px; color: var(--gold-bright); background: rgba(212, 175, 55, 0.07); }
.value-icon .icon { width: 20px; height: 20px; }
.value-item h2 { margin: 0 0 3px; color: var(--text); font-family: var(--font-heading); font-size: 0.87rem; font-weight: 800; }
.value-item p { margin: 0; color: var(--muted); font-size: 0.69rem; line-height: 1.5; }

/* 08. SECTION HEADINGS --------------------------------------------------- */
.section-heading { max-width: 760px; margin-bottom: 52px; }
.section-heading-centered { margin-inline: auto; text-align: center; }
.section-heading-centered .eyebrow { justify-content: center; }
.section-heading > p:last-child { max-width: 660px; margin: 0; color: var(--muted); font-size: 0.98rem; }
.section-heading-centered > p:last-child { margin-inline: auto; }
.section-heading-split { display: grid; max-width: none; grid-template-columns: 1fr minmax(260px, 0.65fr); align-items: end; gap: 55px; }
.section-heading-split > p { max-width: 485px; margin: 0 0 28px; color: var(--muted); }

/* 09. ABOUT SECTION ------------------------------------------------------ */
.about-section { overflow: hidden; }
.about-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(50px, 8vw, 100px); }
.about-visual { position: relative; min-height: 500px; padding: 0 32px 40px 0; }
.about-image-wrap { height: 460px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 28px 100px 28px 28px; background: var(--surface); box-shadow: var(--shadow-card); }
.about-image-wrap img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.65) sepia(0.24) brightness(0.83); }
.image-index-card { position: absolute; right: -4px; bottom: 0; width: min(245px, 70%); padding: 22px 24px; border: 1px solid rgba(243, 215, 123, 0.35); border-radius: 18px; background: linear-gradient(145deg, #30230d, #171108); box-shadow: var(--shadow-gold); }
.image-index-card span { display: block; margin-bottom: 9px; color: var(--gold-bright); font-size: 0.61rem; font-weight: 800; letter-spacing: 0.18em; }
.image-index-card strong { color: var(--text); font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.about-visual-mark { position: absolute; top: -26px; right: 2px; color: rgba(212, 175, 55, 0.6); font-size: 2.2rem; }
.about-content > p:not(.eyebrow) { color: var(--muted); font-size: 0.96rem; }
.about-content > p strong { color: var(--text-soft); }
.about-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 30px 0 27px; padding-top: 24px; border-top: 1px solid var(--line); }
.principle-label { color: var(--gold-bright); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.17em; }
.about-principles p { margin: 8px 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.7; }

/* 10. SEVEN DEPARTMENT CARDS -------------------------------------------- */
.departments-section { overflow: hidden; background: linear-gradient(180deg, rgba(212, 175, 55, 0.025), transparent 70%); }
.department-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; }
.department-card {
  position: relative;
  display: flex;
  min-height: 325px;
  flex-direction: column;
  padding: 27px 25px 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(39, 30, 15, 0.92), rgba(22, 17, 9, 0.96));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.17);
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}
.department-card::before { position: absolute; top: -80px; right: -80px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(212, 175, 55, 0.12), transparent 70%); content: ""; transition: transform 350ms ease; }
.department-card:hover { transform: translateY(-8px); border-color: rgba(243, 215, 123, 0.45); box-shadow: var(--shadow-card), 0 0 34px rgba(212, 175, 55, 0.075); }
.department-card:hover::before { transform: scale(1.35); }
.department-card-featured { border-color: rgba(212, 175, 55, 0.38); background: linear-gradient(145deg, rgba(61, 44, 16, 0.94), rgba(24, 18, 9, 0.98)); }
.department-card-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; }
.department-number { color: rgba(243, 215, 123, 0.58); font-family: var(--font-heading); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.15em; }
.department-icon { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 16px; color: var(--gold-bright); background: linear-gradient(145deg, rgba(212, 175, 55, 0.17), rgba(212, 175, 55, 0.035)); box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.08); }
.department-icon .icon { width: 24px; height: 24px; }
.card-kicker { margin: 0 0 9px; color: var(--gold); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; }
.department-card h3 { position: relative; z-index: 1; margin: 0 0 12px; color: var(--text); font-family: var(--font-heading); font-size: 1.18rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.28; }
.department-card > p:not(.card-kicker) { position: relative; z-index: 1; margin: 0 0 23px; color: var(--muted); font-size: 0.79rem; line-height: 1.7; }
.department-card .card-link { position: relative; z-index: 1; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line); }

/* 11. DEPARTMENT SPOTLIGHTS --------------------------------------------- */
.spotlight-section { overflow: hidden; }
.spotlight-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(48px, 7.5vw, 95px); }
.spotlight-reverse .spotlight-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.spotlight-content > p:not(.eyebrow) { max-width: 570px; color: var(--muted); font-size: 0.95rem; }
.feature-list { display: grid; gap: 13px; margin: 25px 0 29px; padding: 0; list-style: none; }
.feature-list li { display: flex; align-items: flex-start; gap: 11px; color: var(--text-soft); font-size: 0.82rem; }
.feature-list .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--gold-bright); }
.spotlight-visual { position: relative; min-height: 420px; padding: 0 22px 25px 0; }
.spotlight-visual img { position: relative; z-index: 1; width: 100%; height: 395px; object-fit: cover; border: 1px solid var(--line-strong); border-radius: 24px 85px 24px 24px; filter: saturate(0.68) sepia(0.22) brightness(0.82); box-shadow: var(--shadow-card); }
.spotlight-reverse .spotlight-visual { order: 0; padding: 0 0 25px 22px; }
.spotlight-reverse .spotlight-visual img { border-radius: 85px 24px 24px 24px; }
.spotlight-reverse .spotlight-content { order: 1; }
.visual-outline { position: absolute; right: 0; bottom: 0; width: 72%; height: 78%; border: 1px solid rgba(212, 175, 55, 0.38); border-radius: 24px 80px 24px 24px; }
.spotlight-reverse .visual-outline { right: auto; left: 0; border-radius: 80px 24px 24px 24px; }
.visual-label { position: absolute; z-index: 2; right: 38px; bottom: 48px; display: inline-flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid rgba(243, 215, 123, 0.25); border-radius: var(--pill); color: var(--text-soft); background: rgba(15, 11, 6, 0.88); font-size: 0.59rem; font-weight: 800; letter-spacing: 0.08em; backdrop-filter: blur(10px); }
.spotlight-reverse .visual-label { right: 35px; left: 35px; width: max-content; }

/* 12. AI AUTOMATION VISUAL ---------------------------------------------- */
.spotlight-automation { padding-top: 20px; }
.automation-panel { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 55px; padding: clamp(35px, 6vw, 68px); overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.28); border-radius: var(--radius-xl); background: radial-gradient(ellipse at 85% 30%, rgba(212, 175, 55, 0.14), transparent 37%), linear-gradient(135deg, #2a200e, #171108 62%, #211909); box-shadow: var(--shadow-card); }
.automation-panel::before { position: absolute; top: -160px; right: -160px; width: 430px; height: 430px; border: 1px solid rgba(212, 175, 55, 0.13); border-radius: 50%; content: ""; }
.automation-copy { position: relative; z-index: 1; }
.automation-copy > p:not(.eyebrow) { color: var(--muted); font-size: 0.92rem; }
.automation-copy .button { margin-top: 18px; }
.workflow-visual { position: relative; display: flex; min-height: 290px; align-items: center; justify-content: space-between; gap: 10px; padding: 25px 0 38px; }
.workflow-node { position: relative; z-index: 2; display: flex; width: 29%; min-height: 145px; flex-direction: column; align-items: center; justify-content: center; padding: 15px 10px; border: 1px solid rgba(243, 215, 123, 0.34); border-radius: 17px; background: rgba(14, 11, 6, 0.84); text-align: center; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22); }
.workflow-node-icon { display: grid; width: 43px; height: 43px; margin-bottom: 12px; place-items: center; border-radius: 13px; color: #1b1304; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); }
.workflow-node-icon .icon { width: 21px; height: 21px; }
.workflow-node strong { color: var(--text); font-size: 0.74rem; }
.workflow-node small { margin-top: 3px; color: var(--muted); font-size: 0.61rem; }
.workflow-connector { position: relative; z-index: 1; width: 6%; height: 1px; background: var(--gold); box-shadow: 0 0 13px rgba(212, 175, 55, 0.65); }
.workflow-connector::after { position: absolute; top: -4px; right: -1px; width: 8px; height: 8px; border-top: 1px solid var(--gold-bright); border-right: 1px solid var(--gold-bright); content: ""; transform: rotate(45deg); }
.workflow-caption { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; color: var(--muted-2); font-size: 0.62rem; text-align: center; }

/* 13. CONSULTING AND TRAINING ------------------------------------------- */
.consulting-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; align-items: center; gap: clamp(50px, 8vw, 100px); }
.consulting-visual { position: relative; min-height: 450px; padding: 0 32px 36px 0; }
.consulting-image-main { height: 405px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 90px 25px 25px 25px; box-shadow: var(--shadow-card); }
.consulting-image-main img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.68) sepia(0.25) brightness(0.8); }
.consulting-note { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 13px; width: min(300px, 85%); padding: 17px; border: 1px solid var(--line-strong); border-radius: 17px; background: linear-gradient(135deg, #2c210e, #171108); box-shadow: var(--shadow-gold); }
.note-mark { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; color: #1a1204; background: var(--gold-bright); font-size: 1.2rem; }
.consulting-note strong, .consulting-note small { display: block; }
.consulting-note strong { color: var(--text); font-size: 0.79rem; }
.consulting-note small { margin-top: 3px; color: var(--muted); font-size: 0.68rem; }
.consulting-content > p:not(.eyebrow) { color: var(--muted); font-size: 0.93rem; }
.consulting-points { display: grid; gap: 17px; margin: 25px 0; }
.consulting-points > div { display: flex; gap: 14px; align-items: flex-start; }
.consulting-points > div > span { color: var(--gold); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 900; }
.consulting-points p { margin: 0; }
.consulting-points strong, .consulting-points small { display: block; }
.consulting-points strong { color: var(--text-soft); font-size: 0.81rem; }
.consulting-points small { margin-top: 3px; color: var(--muted); font-size: 0.72rem; }

/* 14. SOFTWARE AND SAAS MOCK INTERFACE ---------------------------------- */
.software-section { overflow: hidden; background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.035), transparent); }
.software-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(50px, 7vw, 90px); }
.software-content > p:not(.eyebrow) { color: var(--muted); font-size: 0.94rem; }
.software-visual { position: relative; padding: 25px 12px 35px 25px; }
.software-window { position: relative; z-index: 1; min-height: 350px; overflow: hidden; border: 1px solid rgba(243, 215, 123, 0.34); border-radius: 21px; background: #16130e; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4), 0 0 45px rgba(212, 175, 55, 0.08); transform: perspective(1100px) rotateY(-5deg) rotateX(2deg); }
.window-top { display: flex; height: 48px; align-items: center; gap: 6px; padding: 0 17px; border-bottom: 1px solid rgba(243, 215, 123, 0.12); background: #211b10; }
.window-top > span { width: 7px; height: 7px; border-radius: 50%; background: #8c6b25; }
.window-top > span:first-child { background: #d5b453; }
.window-top > span:nth-child(2) { background: #94762d; }
.window-top > span:nth-child(3) { background: #6d5627; }
.window-top small { margin-left: auto; color: #bba66f; font-size: 0.53rem; font-weight: 800; letter-spacing: 0.16em; }
.window-layout { display: grid; min-height: 300px; grid-template-columns: 64px 1fr; }
.window-sidebar { display: flex; flex-direction: column; gap: 17px; align-items: center; padding: 22px 10px; border-right: 1px solid rgba(243, 215, 123, 0.1); background: #100e0a; }
.window-sidebar i { display: block; width: 23px; height: 6px; border-radius: 5px; background: rgba(212, 175, 55, 0.23); }
.window-sidebar i:first-child { width: 27px; background: var(--gold); }
.window-main { padding: 25px 25px 20px; }
.window-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.window-heading span { width: 32%; height: 11px; border-radius: 5px; background: rgba(255, 244, 214, 0.65); }
.window-heading b { width: 22%; height: 20px; border: 1px solid rgba(212, 175, 55, 0.5); border-radius: 5px; background: rgba(212, 175, 55, 0.12); }
.window-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 20px; }
.window-stats i { height: 58px; border: 1px solid rgba(212, 175, 55, 0.15); border-radius: 8px; background: linear-gradient(135deg, rgba(212, 175, 55, 0.13), rgba(255, 255, 255, 0.02)); }
.window-chart { display: flex; height: 95px; align-items: end; justify-content: space-around; gap: 10px; padding: 12px; border: 1px solid rgba(212, 175, 55, 0.12); border-radius: 8px; background: rgba(255, 255, 255, 0.018); }
.window-chart span { width: 9%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--gold-bright), #84631e); }
.window-chart span:nth-child(1) { height: 35%; }
.window-chart span:nth-child(2) { height: 60%; }
.window-chart span:nth-child(3) { height: 48%; }
.window-chart span:nth-child(4) { height: 78%; }
.window-chart span:nth-child(5) { height: 57%; }
.window-chart span:nth-child(6) { height: 88%; }
.window-chart span:nth-child(7) { height: 72%; }
.window-rows { display: grid; gap: 8px; margin-top: 17px; }
.window-rows i { height: 6px; border-radius: 5px; background: rgba(255, 244, 214, 0.12); }
.window-rows i:nth-child(2) { width: 82%; }
.window-rows i:nth-child(3) { width: 67%; }
.software-visual::after { position: absolute; right: 0; bottom: 0; width: 80%; height: 78%; border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 20px; content: ""; }
.software-visual-caption { margin: 17px 0 0; color: var(--muted-2); font-size: 0.64rem; text-align: center; }

/* 15. INTEGRATION -------------------------------------------------------- */
.integration-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; align-items: center; gap: clamp(55px, 8vw, 100px); }
.integration-content > p:not(.eyebrow) { color: var(--muted); font-size: 0.94rem; }
.integration-visual { position: relative; display: grid; min-height: 420px; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(circle, rgba(212, 175, 55, 0.11), transparent 62%), linear-gradient(145deg, #20190d, #100d08); }
.integration-core { position: relative; z-index: 3; display: flex; width: 120px; height: 120px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(243, 215, 123, 0.7); border-radius: 50%; color: #1e1606; background: radial-gradient(circle at 35% 25%, #fff1b6, var(--gold) 75%); box-shadow: 0 0 50px rgba(212, 175, 55, 0.22); }
.integration-core .icon { width: 31px; height: 31px; }
.integration-core span { font-size: 0.55rem; font-weight: 900; letter-spacing: 0.16em; }
.integration-orbit { position: absolute; display: grid; place-items: center; border: 1px dashed rgba(212, 175, 55, 0.42); border-radius: 50%; }
.integration-orbit::before { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 14px rgba(243, 215, 123, 0.75); content: ""; }
.orbit-a { width: 230px; height: 230px; animation: orbitRotate 24s linear infinite; }
.orbit-b { width: 315px; height: 315px; border-color: rgba(22, 139, 255, 0.28); animation: orbitRotate 34s linear infinite reverse; }
.orbit-c { width: 230px; height: 230px; border-color: rgba(243, 215, 123, 0.26); transform: rotate(45deg); }
.orbit-d { width: 315px; height: 315px; border-color: rgba(212, 175, 55, 0.17); transform: rotate(45deg); }
.orbit-a::before { top: 28px; left: 35px; }
.orbit-b::before { right: 52px; bottom: 37px; background: var(--blue-bright); }
.orbit-c::before { top: 25px; right: 39px; }
.orbit-d::before { bottom: 33px; left: 45px; }
.orbit-node { position: absolute; z-index: 2; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(243, 215, 123, 0.32); border-radius: 13px; color: var(--gold-bright); background: #20190e; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.08em; }
.orbit-a .orbit-node { top: 4px; left: 50%; transform: translateX(-50%); }
.orbit-b .orbit-node { right: 9px; top: 50%; transform: translateY(-50%); }
.orbit-c .orbit-node { bottom: 3px; left: 50%; transform: translateX(-50%); }
.orbit-d .orbit-node { top: 50%; left: 8px; transform: translateY(-50%); }
.integration-caption { position: absolute; bottom: 17px; margin: 0; color: var(--muted-2); font-size: 0.63rem; }

/* 16. CYBERSECURITY ------------------------------------------------------ */
.security-section { padding-top: 35px; }
.security-panel { position: relative; display: grid; min-height: 430px; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 35px; padding: clamp(35px, 6vw, 68px); overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.31); border-radius: var(--radius-xl); background: radial-gradient(ellipse at 78% 50%, rgba(22, 139, 255, 0.11), transparent 32%), linear-gradient(130deg, #251b0d, #100d08 72%); box-shadow: var(--shadow-card); }
.security-content { position: relative; z-index: 2; }
.security-content > p:not(.eyebrow) { max-width: 600px; color: var(--muted); font-size: 0.93rem; }
.security-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 23px 0 26px; }
.security-tags span { padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--pill); color: var(--text-soft); background: rgba(255, 255, 255, 0.025); font-size: 0.64rem; font-weight: 700; }
.security-art { position: relative; display: grid; min-height: 310px; place-items: center; }
.security-ring { position: absolute; border: 1px solid rgba(212, 175, 55, 0.26); border-radius: 50%; }
.ring-one { width: 165px; height: 165px; box-shadow: 0 0 55px rgba(212, 175, 55, 0.1); }
.ring-two { width: 245px; height: 245px; border-style: dashed; border-color: rgba(22, 139, 255, 0.27); }
.ring-three { width: 305px; height: 305px; border-color: rgba(212, 175, 55, 0.13); }
.security-shield { position: relative; z-index: 2; display: flex; width: 145px; height: 165px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--gold-bright); background: linear-gradient(180deg, rgba(243, 215, 123, 0.16), rgba(212, 175, 55, 0.035)); clip-path: polygon(50% 0, 94% 17%, 88% 68%, 50% 100%, 12% 68%, 6% 17%); filter: drop-shadow(0 0 22px rgba(212, 175, 55, 0.25)); }
.security-shield .icon { width: 48px; height: 48px; stroke-width: 1.35; }
.security-shield span { font-size: 0.56rem; font-weight: 900; letter-spacing: 0.15em; line-height: 1.45; text-align: center; }
.security-spark { position: absolute; color: var(--gold-bright); }
.spark-one { top: 28px; right: 47px; font-size: 1.4rem; }
.spark-two { bottom: 25px; left: 38px; color: var(--blue-bright); font-size: 1.7rem; }

/* 17. INDUSTRIES --------------------------------------------------------- */
.industries-section { background: linear-gradient(180deg, rgba(212, 175, 55, 0.025), transparent 75%); }
.industry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.industry-card { min-height: 190px; padding: 23px 21px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255, 255, 255, 0.022); transition: transform var(--ease), border-color var(--ease), background var(--ease); }
.industry-card:hover { transform: translateY(-5px); border-color: var(--line-strong); background: rgba(212, 175, 55, 0.055); }
.industry-symbol { display: grid; width: 39px; height: 39px; margin-bottom: 17px; place-items: center; border-radius: 12px; color: var(--gold-bright); background: rgba(212, 175, 55, 0.1); font-size: 1.25rem; }
.industry-card h3 { margin: 0 0 7px; color: var(--text); font-family: var(--font-heading); font-size: 0.94rem; font-weight: 800; }
.industry-card p { margin: 0; color: var(--muted); font-size: 0.73rem; line-height: 1.65; }

/* 18. ILLUSTRATIVE CONCEPT CARDS ---------------------------------------- */
.concepts-section { overflow: hidden; }
.concept-grid { display: grid; grid-template-columns: 1.16fr 0.92fr 0.92fr; align-items: stretch; gap: 18px; }
.concept-card { overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: linear-gradient(155deg, rgba(39, 30, 15, 0.83), rgba(17, 13, 7, 0.97)); transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease; }
.concept-card:hover { transform: translateY(-7px); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.concept-image { position: relative; height: 205px; overflow: hidden; background: var(--surface-2); }
.concept-card-large .concept-image { height: 238px; }
.concept-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.65) sepia(0.2) brightness(0.74); transition: transform 500ms ease; }
.concept-card:hover .concept-image img { transform: scale(1.045); }
.concept-image::after { position: absolute; inset: 35% 0 0; background: linear-gradient(180deg, transparent, rgba(9, 7, 4, 0.58)); content: ""; }
.concept-type { position: absolute; z-index: 1; bottom: 15px; left: 17px; padding: 6px 9px; border: 1px solid rgba(243, 215, 123, 0.38); border-radius: var(--pill); color: var(--gold-bright); background: rgba(13, 10, 5, 0.8); font-size: 0.52rem; font-weight: 900; letter-spacing: 0.13em; }
.concept-copy { padding: 22px 21px 23px; }
.concept-number { color: var(--gold); font-size: 0.59rem; font-weight: 900; letter-spacing: 0.17em; }
.concept-copy h3 { margin: 9px 0 9px; color: var(--text); font-family: var(--font-heading); font-size: 1.08rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; }
.concept-copy p { min-height: 72px; margin: 0 0 16px; color: var(--muted); font-size: 0.74rem; line-height: 1.7; }
.concept-disclaimer { margin: 18px 0 0; color: var(--muted-2); font-size: 0.67rem; text-align: center; }

/* 19. WHY CHOOSE US ------------------------------------------------------ */
.why-section { background: linear-gradient(90deg, rgba(212, 175, 55, 0.035), transparent 72%); }
.why-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(55px, 9vw, 115px); }
.why-intro > p:not(.eyebrow) { max-width: 430px; margin-bottom: 28px; color: var(--muted); font-size: 0.94rem; }
.why-points { display: grid; gap: 0; }
.why-point { display: flex; gap: 19px; padding: 21px 0; border-bottom: 1px solid var(--line); }
.why-point:first-child { padding-top: 0; }
.why-point-icon { display: grid; width: 49px; height: 49px; flex: 0 0 49px; place-items: center; border: 1px solid var(--line-strong); border-radius: 15px; color: var(--gold-bright); background: rgba(212, 175, 55, 0.07); }
.why-point-icon .icon { width: 22px; height: 22px; }
.why-point h3 { margin: 1px 0 6px; color: var(--text); font-family: var(--font-heading); font-size: 0.96rem; font-weight: 800; }
.why-point p { max-width: 515px; margin: 0; color: var(--muted); font-size: 0.77rem; line-height: 1.7; }

/* 20. PROCESS STEPS ------------------------------------------------------ */
.process-section { overflow: hidden; }
.process-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.process-step { position: relative; min-height: 255px; padding: 24px 19px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, rgba(39, 30, 15, 0.76), rgba(17, 13, 7, 0.9)); }
.process-number { position: absolute; top: 19px; right: 19px; color: rgba(243, 215, 123, 0.5); font-family: var(--font-heading); font-size: 0.69rem; font-weight: 900; letter-spacing: 0.15em; }
.process-symbol { display: grid; width: 48px; height: 48px; margin: 13px 0 24px; place-items: center; border-radius: 14px; color: var(--gold-bright); background: rgba(212, 175, 55, 0.11); font-size: 1.35rem; }
.process-step h3 { margin: 0 0 9px; color: var(--text); font-family: var(--font-heading); font-size: 0.95rem; font-weight: 800; }
.process-step p { margin: 0; color: var(--muted); font-size: 0.72rem; line-height: 1.65; }
.process-arrow { position: absolute; right: -10px; top: 46%; z-index: 2; display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold-bright); background: var(--bg); font-size: 0.8rem; }
.process-step:last-child .process-arrow { display: none; }

/* 21. DIGITAL FOUNDATIONS ------------------------------------------------ */
.foundations-section { background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.032), transparent); }
.foundation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.foundation-card { position: relative; min-height: 255px; padding: 25px 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.022); }
.foundation-index { position: absolute; top: 22px; right: 20px; color: var(--muted-2); font-size: 0.6rem; font-weight: 900; letter-spacing: 0.12em; }
.foundation-icon { display: grid; width: 47px; height: 47px; margin: 16px 0 23px; place-items: center; border-radius: 14px; color: var(--gold-bright); background: rgba(212, 175, 55, 0.1); }
.foundation-icon .icon { width: 23px; height: 23px; }
.foundation-card h3 { margin: 0 0 9px; color: var(--text); font-family: var(--font-heading); font-size: 0.95rem; font-weight: 800; }
.foundation-card p { margin: 0; color: var(--muted); font-size: 0.73rem; line-height: 1.7; }

/* 22. WAYS TO BEGIN ------------------------------------------------------ */
.engagement-section { background: linear-gradient(180deg, rgba(212, 175, 55, 0.03), transparent 72%); }
.engagement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.engagement-card { display: flex; min-height: 295px; flex-direction: column; padding: 27px 25px 24px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(37, 29, 15, 0.82), rgba(17, 13, 7, 0.96)); transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease); }
.engagement-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.engagement-card-featured { border-color: rgba(212, 175, 55, 0.4); background: linear-gradient(145deg, rgba(69, 49, 16, 0.68), rgba(20, 15, 7, 0.97)); }
.engagement-icon { display: grid; width: 49px; height: 49px; margin-bottom: 20px; place-items: center; border: 1px solid var(--line-strong); border-radius: 15px; color: var(--gold-bright); background: rgba(212, 175, 55, 0.1); }
.engagement-icon .icon { width: 22px; height: 22px; }
.engagement-step { margin-bottom: 7px; color: var(--gold); font-size: 0.6rem; font-weight: 900; letter-spacing: 0.16em; }
.engagement-card h3 { margin: 0 0 9px; color: var(--text); font-family: var(--font-heading); font-size: 1.14rem; font-weight: 800; }
.engagement-card > p { margin: 0 0 22px; color: var(--muted); font-size: 0.78rem; line-height: 1.7; }
.engagement-card .card-link { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line); }

/* 23. FAQ PREVIEW -------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(55px, 9vw, 115px); }
.faq-intro > p:not(.eyebrow) { margin-bottom: 25px; color: var(--muted); font-size: 0.93rem; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { position: relative; display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 3px; color: var(--text-soft); font-family: var(--font-heading); font-size: 0.91rem; font-weight: 800; line-height: 1.45; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold-bright); }
.faq-plus::before, .faq-plus::after { position: absolute; width: 10px; height: 1px; background: currentColor; content: ""; transition: transform var(--ease); }
.faq-plus::after { transform: rotate(90deg); }
.faq-item[open] .faq-plus::after { transform: rotate(0); }
.faq-item > p { max-width: 650px; margin: -2px 45px 20px 3px; color: var(--muted); font-size: 0.8rem; line-height: 1.75; }

/* 24. COMMITMENT BAND ---------------------------------------------------- */
.commitment-section { position: relative; padding-block: 65px; border-block: 1px solid rgba(212, 175, 55, 0.2); background: linear-gradient(100deg, #32240d, #171108 60%, #211808); }
.commitment-inner { display: grid; grid-template-columns: 1fr 0.85fr; align-items: center; gap: 70px; }
.commitment-inner h2 { margin: 0; color: var(--text); font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.055em; line-height: 1.12; }
.commitment-inner > p { margin: 0; color: var(--text-soft); font-size: 0.9rem; line-height: 1.8; }

/* 25. FINAL CALL TO ACTION ---------------------------------------------- */
.final-cta-section { position: relative; padding-block: clamp(80px, 10vw, 132px); overflow: hidden; text-align: center; isolation: isolate; }
.cta-glow { position: absolute; z-index: -1; top: 50%; left: 50%; width: min(900px, 90vw); height: 490px; border-radius: 50%; background: radial-gradient(ellipse, rgba(180, 133, 27, 0.17), rgba(212, 175, 55, 0.04) 45%, transparent 72%); transform: translate(-50%, -50%); }
.final-cta-content { max-width: 850px; }
.final-cta-content .eyebrow { justify-content: center; }
.final-cta-content h2 { margin: 0 0 20px; color: var(--text); font-family: var(--font-heading); font-size: clamp(2.3rem, 5vw, 4.35rem); font-weight: 800; letter-spacing: -0.065em; line-height: 1.1; }
.final-cta-content > p:not(.eyebrow) { max-width: 660px; margin: 0 auto; color: var(--muted); font-size: 0.99rem; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; margin-top: 32px; }

/* 26. FOOTER ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: #090704; }
.footer-main { display: grid; grid-template-columns: 1.3fr 0.72fr 1.2fr 0.95fr; gap: 48px; padding-block: 67px 54px; }
.footer-brand { margin-bottom: 21px; }
.footer-brand-column > p { max-width: 270px; color: var(--muted); font-size: 0.77rem; }
.footer-brand-column .footer-tagline { color: var(--text-soft); font-size: 0.83rem; font-weight: 700; }
.footer-brand-column .parent-company { margin-top: 13px; font-size: 0.7rem; }
.parent-company strong { color: var(--text-soft); }
.footer-email { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--gold-bright); font-size: 0.75rem; font-weight: 700; }
.footer-email .icon { width: 16px; height: 16px; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-column h2 { margin: 4px 0 9px; color: var(--text); font-family: var(--font-heading); font-size: 0.88rem; font-weight: 800; }
.footer-column > a { color: var(--muted); font-size: 0.72rem; line-height: 1.5; transition: color var(--ease); }
.footer-column > a:hover, .footer-legal-row a:hover { color: var(--gold-bright); }
.footer-contact > p { margin: 0 0 5px; color: var(--muted); font-size: 0.73rem; }
.footer-contact .footer-contact-link { display: inline-flex; align-items: center; gap: 8px; margin: 3px 0 6px; color: var(--gold-bright); font-weight: 800; }
.footer-legal-row { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); }
.footer-legal-row > div { display: flex; flex-wrap: wrap; gap: 17px; }
.footer-legal-row a, .footer-legal-row p { margin: 0; color: var(--muted-2); font-size: 0.64rem; }
.back-to-top { color: var(--gold-bright) !important; white-space: nowrap; }

/* 27. SCROLL REVEAL AND SMALL ANIMATIONS -------------------------------- */
.js-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity 650ms ease, transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.js-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 90ms !important; }
.reveal-delay-2 { transition-delay: 170ms !important; }
.reveal-delay-3 { transition-delay: 250ms !important; }
@keyframes scrollPulse { 0%, 100% { opacity: 0.35; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, 7px); } }
@keyframes orbitRotate { from { rotate: 0deg; } to { rotate: 360deg; } }

/* 28. RESPONSIVE TABLET LAYOUT ------------------------------------------ */
@media (max-width: 1120px) {
  .primary-nav { gap: 13px; }
  .nav-link, .nav-login, .nav-dropdown-toggle { font-size: 0.72rem; }
  .nav-cta { padding-inline: 13px; font-size: 0.69rem; }
  .hero-grid { gap: 45px; }
  .hero-content h1 { font-size: clamp(3rem, 5.8vw, 4.8rem); }
  .value-item { padding-inline: 14px; }
  .footer-main { gap: 30px; }
}

@media (max-width: 980px) {
  .header-inner { min-height: 78px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--gold-bright); background: rgba(212, 175, 55, 0.055); cursor: pointer; }
  .menu-lines { display: grid; width: 19px; gap: 4px; }
  .menu-lines span { display: block; height: 2px; border-radius: 3px; background: currentColor; transition: transform var(--ease), opacity var(--ease); }
  .menu-toggle[aria-expanded="true"] .menu-lines span:first-child { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-lines span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] .menu-lines span:last-child { transform: translateY(-6px) rotate(-45deg); }
  .menu-label { font-size: 0.65rem; font-weight: 900; letter-spacing: 0.14em; }
  .primary-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: flex; max-height: calc(100svh - 115px); flex-direction: column; align-items: stretch; gap: 3px; padding: 18px max(26px, calc((100vw - var(--container)) / 2)); overflow-y: auto; border-bottom: 1px solid var(--line-strong); background: rgba(12, 10, 6, 0.985); box-shadow: 0 24px 45px rgba(0, 0, 0, 0.42); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--ease), transform var(--ease), visibility var(--ease); }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-link, .nav-login, .nav-dropdown-toggle { display: flex; width: 100%; min-height: 47px; justify-content: space-between; padding: 10px 5px; border-bottom: 1px solid rgba(231, 203, 136, 0.09); font-size: 0.88rem; }
  .nav-dropdown-menu { position: static; display: none; width: 100%; margin: 4px 0 8px; padding: 8px; border-radius: 12px; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .nav-dropdown.is-open .nav-dropdown-menu { display: grid; }
  .nav-dropdown-menu a { min-height: 40px; font-size: 0.78rem; }
  .nav-cta { align-self: flex-start; margin-top: 13px; }
  .hero-section { min-height: auto; padding-block: 80px 95px; }
  .hero-grid { grid-template-columns: 1fr 0.9fr; gap: 32px; }
  .hero-visual { min-height: 405px; }
  .hero-image-frame { height: 380px; }
  .floating-card { min-width: 190px; padding: 11px 12px; }
  .floating-card-top { left: -15px; }
  .floating-card-bottom { right: -7px; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .value-item:nth-child(3) { border-left: 1px solid var(--line); }
  .value-item:nth-child(1), .value-item:nth-child(2) { border-bottom: 1px solid var(--line); }
  .about-grid, .consulting-grid, .integration-grid { gap: 50px; }
  .department-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .concept-grid { grid-template-columns: repeat(2, 1fr); }
  .concept-card-large { grid-column: span 2; }
  .concept-card-large .concept-image { height: 250px; }
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .process-step { min-height: 225px; }
  .process-step:nth-child(3) .process-arrow { display: none; }
  .foundation-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1.2fr 0.8fr 1fr; }
  .footer-contact { grid-column: 2 / 4; }
}

/* 29. RESPONSIVE MOBILE LAYOUT ------------------------------------------ */
@media (max-width: 720px) {
  html { scroll-padding-top: 82px; }
  .container { width: min(100% - 36px, var(--container)); }
  .section { padding-block: 76px; }
  .announcement-inner { min-height: 36px; gap: 10px; font-size: 0.65rem; }
  .announcement-inner p { max-width: 76%; line-height: 1.35; }
  .announcement-inner > a { font-size: 0.65rem; }
  .header-inner { min-height: 72px; }
  .brand-mark { width: 42px; height: 42px; border-radius: 13px; font-size: 1rem; }
  .brand-copy strong { font-size: 0.91rem; }
  .brand-copy > span { font-size: 0.53rem; }
  .primary-nav { padding-inline: 18px; }
  .hero-section { padding-block: 67px 75px; }
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-content h1 { max-width: 600px; font-size: clamp(2.65rem, 11vw, 4.1rem); }
  .hero-description { max-width: 620px; font-size: 0.94rem; }
  .hero-actions { gap: 10px; margin-top: 26px; }
  .hero-actions .button { flex: 1 1 205px; }
  .hero-assurance { margin-top: 25px; }
  .hero-visual { width: min(100%, 530px); min-height: 360px; margin-inline: auto; padding: 13px 9px 12px 16px; }
  .hero-image-frame { height: 340px; border-radius: 25px 25px 25px 70px; }
  .floating-card { min-width: 178px; padding: 9px 10px; }
  .floating-card-top { top: 42px; left: -2px; }
  .floating-card-bottom { right: -3px; bottom: 37px; }
  .floating-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .floating-card strong { font-size: 0.71rem; }
  .floating-card small { font-size: 0.59rem; }
  .scroll-cue { bottom: 16px; white-space: nowrap; }
  .value-item { min-height: 96px; padding: 15px 10px; gap: 10px; }
  .value-icon { width: 37px; height: 37px; flex-basis: 37px; border-radius: 11px; }
  .value-item h2 { font-size: 0.77rem; }
  .value-item p { font-size: 0.63rem; }
  .section-title { font-size: clamp(1.9rem, 8vw, 2.8rem); }
  .section-heading { margin-bottom: 35px; }
  .section-heading > p:last-child { font-size: 0.87rem; }
  .about-grid, .spotlight-grid, .consulting-grid, .software-grid, .integration-grid, .why-grid, .faq-grid { grid-template-columns: 1fr; gap: 39px; }
  .about-visual { min-height: 385px; padding-right: 23px; }
  .about-image-wrap { height: 350px; border-radius: 23px 70px 23px 23px; }
  .about-content > p:not(.eyebrow) { font-size: 0.87rem; }
  .about-principles { gap: 16px; }
  .about-principles p { font-size: 0.71rem; }
  .department-grid { grid-template-columns: 1fr; gap: 13px; }
  .department-card { min-height: 285px; padding: 23px 21px; }
  .department-card-top { margin-bottom: 20px; }
  .department-card h3 { font-size: 1.15rem; }
  .department-card > p:not(.card-kicker) { font-size: 0.77rem; }
  .spotlight-grid { gap: 32px; }
  .spotlight-visual { min-height: 320px; padding-right: 13px; }
  .spotlight-visual img { height: 300px; border-radius: 20px 65px 20px 20px; }
  .spotlight-reverse .spotlight-visual { order: 0; padding-left: 13px; }
  .spotlight-reverse .spotlight-visual img { border-radius: 65px 20px 20px 20px; }
  .spotlight-reverse .spotlight-content { order: 1; }
  .visual-label { right: 22px; bottom: 39px; left: 17px; width: max-content; max-width: calc(100% - 36px); font-size: 0.5rem; }
  .spotlight-reverse .visual-label { right: 22px; left: 22px; }
  .automation-panel { grid-template-columns: 1fr; gap: 23px; padding: 29px 20px; border-radius: 26px; }
  .automation-copy > p:not(.eyebrow) { font-size: 0.85rem; }
  .workflow-visual { min-height: 220px; gap: 5px; }
  .workflow-node { min-height: 125px; padding: 10px 5px; }
  .workflow-node-icon { width: 35px; height: 35px; margin-bottom: 8px; }
  .workflow-node strong { font-size: 0.65rem; }
  .workflow-node small { font-size: 0.52rem; }
  .workflow-connector { width: 4%; }
  .consulting-visual { min-height: 365px; padding-right: 18px; }
  .consulting-image-main { height: 335px; border-radius: 65px 20px 20px 20px; }
  .consulting-content > p:not(.eyebrow) { font-size: 0.87rem; }
  .software-visual { padding: 10px 5px 28px 11px; }
  .software-window { min-height: 300px; }
  .window-layout { min-height: 250px; grid-template-columns: 48px 1fr; }
  .window-sidebar { padding-inline: 7px; }
  .window-main { padding: 19px 13px; }
  .window-chart { height: 82px; }
  .integration-visual { min-height: 350px; }
  .orbit-a { width: 185px; height: 185px; }
  .orbit-b { width: 255px; height: 255px; }
  .orbit-c { width: 185px; height: 185px; }
  .orbit-d { width: 255px; height: 255px; }
  .integration-core { width: 105px; height: 105px; }
  .integration-core .icon { width: 27px; height: 27px; }
  .security-panel { grid-template-columns: 1fr; gap: 5px; padding: 30px 22px 20px; border-radius: 26px; }
  .security-content > p:not(.eyebrow) { font-size: 0.86rem; }
  .security-art { min-height: 260px; }
  .ring-one { width: 140px; height: 140px; }
  .ring-two { width: 210px; height: 210px; }
  .ring-three { width: 260px; height: 260px; }
  .security-shield { width: 125px; height: 143px; }
  .industry-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .industry-card { min-height: 180px; padding: 18px 15px; }
  .industry-card h3 { font-size: 0.83rem; }
  .industry-card p { font-size: 0.68rem; }
  .section-heading-split { grid-template-columns: 1fr; gap: 5px; }
  .section-heading-split > p { margin: 0; font-size: 0.87rem; }
  .concept-grid { grid-template-columns: 1fr; gap: 15px; }
  .concept-card-large { grid-column: auto; }
  .concept-image, .concept-card-large .concept-image { height: 210px; }
  .concept-copy p { min-height: auto; }
  .why-grid { gap: 36px; }
  .why-point { gap: 13px; }
  .why-point h3 { font-size: 0.87rem; }
  .why-point p { font-size: 0.73rem; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .process-step { min-height: 215px; padding: 20px 15px; }
  .process-step:nth-child(2) .process-arrow, .process-step:nth-child(4) .process-arrow { display: none; }
  .process-step:nth-child(3) .process-arrow { display: grid; }
  .process-step h3 { font-size: 0.86rem; }
  .process-step p { font-size: 0.68rem; }
  .foundation-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .foundation-card { min-height: 245px; padding: 20px 15px; }
  .foundation-card h3 { font-size: 0.85rem; }
  .foundation-card p { font-size: 0.68rem; }
  .engagement-grid { grid-template-columns: 1fr; gap: 12px; }
  .engagement-card { min-height: 260px; padding: 23px 21px; }
  .faq-grid { gap: 33px; }
  .faq-item summary { min-height: 65px; font-size: 0.83rem; }
  .faq-item > p { font-size: 0.75rem; }
  .commitment-inner { grid-template-columns: 1fr; gap: 22px; }
  .commitment-section { padding-block: 52px; }
  .commitment-inner > p { font-size: 0.83rem; }
  .final-cta-content h2 { font-size: clamp(2.1rem, 9vw, 3.2rem); }
  .final-cta-content > p:not(.eyebrow) { font-size: 0.88rem; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 34px 24px; padding-block: 51px 39px; }
  .footer-brand-column { grid-column: span 2; }
  .footer-contact { grid-column: auto; }
  .footer-legal-row { flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 18px; }
  .footer-legal-row > div { gap: 11px 15px; }
}

@media (max-width: 420px) {
  .container { width: calc(100% - 30px); }
  .announcement-inner p { font-size: 0.59rem; }
  .announcement-inner > a { font-size: 0.6rem; }
  .brand { gap: 9px; }
  .brand-mark { width: 39px; height: 39px; }
  .brand-copy strong { font-size: 0.85rem; }
  .menu-toggle { padding: 9px 10px; }
  .hero-content h1 { font-size: 2.55rem; }
  .hero-visual { min-height: 320px; }
  .hero-image-frame { height: 300px; }
  .floating-card { min-width: 158px; gap: 8px; }
  .floating-card-top { left: -3px; }
  .floating-card-bottom { right: -3px; }
  .floating-card small { font-size: 0.53rem; }
  .value-item { align-items: flex-start; flex-direction: column; }
  .value-item p { font-size: 0.62rem; }
  .about-principles { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: 1fr 1fr; }
  .industry-card { min-height: 190px; }
  .process-grid { grid-template-columns: 1fr; }
  .process-step { min-height: 190px; }
  .process-arrow { display: none !important; }
  .foundation-grid { grid-template-columns: 1fr; }
  .foundation-card { min-height: 210px; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-brand-column { grid-column: auto; }
  .footer-contact { grid-column: auto; }
}

/* 30. ACCESSIBILITY AND REDUCED MOTION ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js-ready .reveal { opacity: 1; transform: none; }
}

/* ======================================================================
   30. FULL-VIEWPORT WIDTH CORRECTION
   Explicitly keep the document canvas and major page bands at full width.
   This is a sizing correction only; it does not change the visual theme.
   ====================================================================== */
html,
body {
  width: 100%;
  max-width: 100%;
  min-width: 320px;
}

body,
.announcement-bar,
.site-header,
main,
.site-footer {
  width: 100%;
  max-width: none;
}

main,
section,
footer,
header {
  box-sizing: border-box;
}

.container {
  width: min(var(--container), calc(100% - 52px));
  max-width: var(--container);
  margin-inline: auto;
}

@media (max-width: 720px) {
  html,
  body {
    width: 100%;
    min-width: 320px;
    max-width: 100%;
  }

  .announcement-bar,
  .site-header,
  main,
  .site-footer,
  main > section {
    width: 100%;
    max-width: 100%;
  }

  .container {
    width: calc(100% - 36px);
    max-width: 100%;
    margin-inline: auto;
  }

  .header-inner,
  .announcement-inner,
  .footer-main,
  .footer-legal-row,
  .hero-grid,
  .value-grid,
  .about-grid,
  .department-grid,
  .spotlight-grid,
  .industry-grid,
  .concept-grid,
  .why-grid,
  .process-grid,
  .foundation-grid,
  .engagement-grid,
  .faq-grid {
    min-width: 0;
    max-width: 100%;
  }

  img,
  video,
  iframe,
  svg {
    max-width: 100%;
  }
  
/* =========================================
   KINGDOM SPIRIT TECHNOLOGY
   MOBILE FULL-WIDTH DISPLAY FIX
   ========================================= */

html {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: clip !important;
    }

    body > *,
    header,
    main,
    footer,
    nav,
    section,
    .container,
    .main-container,
    .content-wrapper,
    .page-wrapper,
    .site-wrapper,
    .section-inner,
    .header-inner,
    .footer-inner,
    .hero,
    .hero-content,
    .hero-inner,
    [class*="container"],
    [class*="wrapper"] {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body > *,
    main,
    header,
    footer,
    section {
        width: 100% !important;
    }

    img,
    video,
    iframe,
    canvas,
    svg {
        max-width: 100% !important;
    }

    .container,
    .main-container,
    .content-wrapper,
    .page-wrapper,
    .site-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .hero,
    .hero-section,
    .hero-inner,
    .hero-content {
        width: 100% !important;
    }

    .services-grid,
    .service-grid,
    .features-grid,
    .industries-grid,
    .portfolio-grid {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================
   FOUNDER SECTION IMAGE FIX
   KINGDOM SPIRIT TECHNOLOGY
========================================= */

#founder .about-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 45px;
}

#founder .about-visual {
    width: 100%;
    max-width: 390px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
}

#founder .about-visual > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center 25%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
}

#founder .about-image-note {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    z-index: 2;
}

/* TABLET */
@media (max-width: 900px) {
    #founder .about-grid {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: 25px;
    }

    #founder .about-visual {
        max-width: 320px;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    #founder .about-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    #founder .about-visual {
        width: 100%;
        max-width: 280px;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }

    #founder .about-visual > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 25%;
    }

    #founder .about-content {
        width: 100%;
    }
}


/* ==========================================
   FOUNDER SECTION - FINAL LAYOUT CORRECTION
========================================== */

/* Keep the image and caption within their own space */
#founder .about-visual {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 390px;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    position: relative;
    margin: 0 auto;
}

/* Founder photograph */
#founder .about-visual > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 18px;
}

/* Small horizontal identity caption */
#founder .about-image-note {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 10px 13px !important;
    background: rgba(16, 26, 45, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 10px;
    box-sizing: border-box;
    transform: none !important;
    z-index: 1;
}

/* Smaller CEO icon */
#founder .about-image-note > span {
    width: 35px;
    height: 35px;
    min-width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(212, 175, 55, 0.12);
    color: #d4af37;
    font-size: 12px;
    font-weight: 800;
}

/* Founder name and title */
#founder .about-image-note p {
    margin: 0 !important;
    font-size: 11px;
    line-height: 1.5;
    color: #ffffff;
}

#founder .about-image-note p strong {
    display: block;
    font-size: 13px;
    color: #e5c76b;
    margin-bottom: 2px;
}

/* Prevent image column from interfering with heading */
#founder .about-content {
    position: relative;
    min-width: 0;
    align-self: center;
}

/* Mobile */
@media (max-width: 600px) {
    #founder .about-visual {
        width: 100%;
        max-width: 280px;
        margin: 0 auto 15px;
    }

    #founder .about-image-note {
        padding: 8px 10px !important;
    }

    #founder .about-image-note p strong {
        font-size: 12px;
    }
}


  
  
}


/* Kingdom Spirit Technology inner-page design system */
.ks-inner{background:radial-gradient(circle at 85% 0%,rgba(22,139,255,.13),transparent 30%),radial-gradient(circle at 5% 30%,rgba(212,175,55,.08),transparent 25%),#080d19;color:#edf3ff}
.ks-page{width:min(1120px,92%);margin:auto;padding:45px 0 76px}.ks-breadcrumb{color:#aab7d0;font-size:.88rem;margin-bottom:22px}.ks-breadcrumb a{color:#168bff;text-decoration:none}
.ks-hero{padding:36px 0;max-width:850px}.ks-kicker{color:#d4af37;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.ks-hero h1{font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.06;letter-spacing:-.04em;margin:14px 0 20px}.ks-hero p,.ks-lead{color:#aab7d0;font-size:1.06rem;line-height:1.8;max-width:760px}
.ks-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:25px}.ks-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 21px;border-radius:9px;text-decoration:none!important;font-weight:800;background:linear-gradient(110deg,#168bff,#2863d9);color:#fff!important;border:1px solid rgba(255,255,255,.13)}.ks-btn.alt{background:transparent;border-color:rgba(212,175,55,.65);color:#d4af37!important}
.ks-section{margin:44px 0}.ks-section h2{font-size:clamp(1.5rem,3vw,2.2rem);margin:0 0 12px}.ks-section-intro{color:#aab7d0;line-height:1.75;max-width:760px;margin-bottom:22px}.ks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));gap:17px}.ks-card{background:linear-gradient(145deg,rgba(21,33,59,.96),rgba(13,21,39,.96));border:1px solid rgba(95,142,205,.22);border-radius:15px;padding:22px;box-shadow:0 12px 36px rgba(0,0,0,.14)}.ks-card h3{font-size:1.12rem;margin:0 0 10px}.ks-card p,.ks-card li{color:#aab7d0;line-height:1.7}.ks-price{font-size:1.35rem;font-weight:900;color:#d4af37;margin:15px 0 6px}.ks-price small{font-size:.76rem;font-weight:500;color:#aab7d0}.ks-list{padding-left:20px;color:#aab7d0;line-height:1.9}.ks-note{border-left:3px solid #d4af37;background:rgba(212,175,55,.07);padding:16px 19px;border-radius:0 10px 10px 0;color:#aab7d0;line-height:1.7}.ks-form{display:grid;gap:13px;max-width:720px}.ks-form label{display:grid;gap:7px;color:#dce7fb;font-weight:700}.ks-form input,.ks-form select,.ks-form textarea{width:100%;padding:13px 14px;border-radius:8px;border:1px solid rgba(150,175,220,.3);background:#0b1428;color:#fff;font:inherit}.ks-form textarea{min-height:130px;resize:vertical}.ks-footer{border-top:1px solid rgba(150,175,220,.16);padding:25px 4%;text-align:center;color:#aab7d0;font-size:.9rem}.ks-faq details{background:#111a30;border:1px solid rgba(150,175,220,.16);padding:16px 18px;border-radius:10px;margin:10px 0}.ks-faq summary{font-weight:800;cursor:pointer}.ks-faq details p{color:#aab7d0;line-height:1.7}
@media(max-width:640px){.ks-page{padding-top:28px}.ks-hero{padding-top:20px}.ks-card{padding:18px}}


/* =====================================================================
   KINGDOM SPIRIT TECHNOLOGY — AUTHENTICATION + PORTAL ADDITIONS
   ===================================================================== */
.account-topbar{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.account-top-link{display:inline-flex;align-items:center;gap:7px;color:#e7edf8;background:transparent;border:1px solid rgba(190,205,232,.22);border-radius:999px;padding:8px 13px;font:600 .78rem "DM Sans",sans-serif;text-decoration:none;cursor:pointer;transition:.2s ease}
.account-top-link:hover{border-color:#d4af37;color:#f0d477;transform:translateY(-1px)}
.account-top-register{background:linear-gradient(135deg,#d4af37,#f0d477);color:#101726;border-color:transparent}
.account-top-register:hover{color:#101726;filter:brightness(1.06)}
.notification-count{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:50%;background:#168bff;color:#fff;font-size:.68rem;padding:0 4px}
[hidden]{display:none!important}

.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);background:radial-gradient(circle at 18% 12%,rgba(22,139,255,.2),transparent 32%),radial-gradient(circle at 82% 82%,rgba(212,175,55,.12),transparent 28%),#07142f;color:#edf3ff}
.auth-showcase{padding:clamp(28px,6vw,86px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-showcase:after{content:"";position:absolute;width:460px;height:460px;border:1px solid rgba(88,180,255,.18);border-radius:50%;right:-150px;bottom:-170px;box-shadow:0 0 0 45px rgba(88,180,255,.025),0 0 0 90px rgba(88,180,255,.02)}
.auth-brand{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:900;letter-spacing:.04em}
.auth-brand-mark{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#d4af37,#f0d477);color:#08152d;font-weight:900;font-size:1rem;box-shadow:0 10px 35px rgba(212,175,55,.2)}
.auth-brand small{display:block;color:#58b4ff;font-size:.68rem;letter-spacing:.18em;margin-top:3px}
.auth-copy{max-width:640px;position:relative;z-index:1;margin:65px 0}
.auth-kicker{color:#f0d477;text-transform:uppercase;letter-spacing:.19em;font-size:.72rem;font-weight:800}
.auth-copy h1{font:800 clamp(2.5rem,5vw,5.3rem)/1.05 Manrope,sans-serif;letter-spacing:-.055em;margin:22px 0}
.auth-copy h1 span{color:#58b4ff}
.auth-copy p{max-width:560px;color:#b9c8df;font-size:1.05rem;line-height:1.8}
.auth-highlights{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.auth-highlights span{border:1px solid rgba(190,205,232,.2);border-radius:30px;padding:9px 13px;color:#dce7f7;font-size:.78rem}
.auth-footnote{position:relative;z-index:1;color:#8194b3;font-size:.78rem}
.auth-panel-wrap{display:grid;place-items:center;padding:34px;background:rgba(5,12,27,.62);border-left:1px solid rgba(190,205,232,.1)}
.auth-panel{width:min(100%,460px);padding:clamp(25px,4vw,42px);background:rgba(13,28,55,.9);border:1px solid rgba(120,157,210,.2);border-radius:26px;box-shadow:0 28px 90px rgba(0,0,0,.3)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:5px;background:#08172f;border-radius:13px;margin:0 0 30px}
.auth-tab{border:0;border-radius:10px;background:transparent;color:#99abc8;padding:12px;font:700 .9rem "DM Sans",sans-serif;cursor:pointer}
.auth-tab[aria-selected="true"]{background:linear-gradient(135deg,#d4af37,#f0d477);color:#0a1730;box-shadow:0 5px 18px rgba(212,175,55,.17)}
.auth-panel h2{font:800 1.8rem Manrope,sans-serif;margin:0 0 8px}
.auth-panel .auth-subtitle{color:#9fb0ca;line-height:1.65;margin:0 0 24px;font-size:.9rem}
.auth-form{display:grid;gap:15px}
.auth-form label{display:grid;gap:7px;color:#dce6f7;font-weight:600;font-size:.82rem}
.auth-form input{width:100%;padding:14px 15px;border:1px solid rgba(154,179,219,.23);border-radius:11px;background:#07152c;color:#fff;font:500 .95rem "DM Sans",sans-serif;outline:none}
.auth-form input:focus{border-color:#58b4ff;box-shadow:0 0 0 3px rgba(22,139,255,.13)}
.auth-primary{border:0;border-radius:12px;padding:15px;background:linear-gradient(115deg,#d4af37,#f0d477);color:#0b1730;font:800 .95rem Manrope,sans-serif;cursor:pointer;margin-top:5px}
.auth-primary:disabled{opacity:.65;cursor:wait}
.auth-status{min-height:22px;color:#f0d477;font-size:.82rem;line-height:1.5;margin:2px 0 0}
.auth-help-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:.82rem}
.auth-help-row a{color:#70bdff;text-decoration:none}
.auth-divider{display:flex;align-items:center;gap:12px;color:#7286a7;font-size:.72rem;margin:22px 0}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:rgba(154,179,219,.16);flex:1}
.auth-legal{font-size:.7rem;color:#7184a2;line-height:1.6;margin-top:22px}

.portal-shell{max-width:1280px;margin:0 auto;padding:34px 22px 70px;color:#e8effb}
.portal-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:8px 0 26px}
.portal-eyebrow{color:#d4af37;letter-spacing:.16em;font-size:.7rem;font-weight:800;text-transform:uppercase}
.portal-heading h1{font:800 clamp(2rem,4vw,3rem) Manrope,sans-serif;margin:9px 0 7px;color:#fff}
.portal-heading p{color:#9fb0ca;margin:0;line-height:1.6}
.portal-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:22px;align-items:start}
.portal-sidebar,.portal-card{background:linear-gradient(145deg,rgba(15,31,59,.96),rgba(8,21,43,.96));border:1px solid rgba(128,161,210,.16);border-radius:18px}
.portal-sidebar{padding:14px;position:sticky;top:28px}
.portal-nav{display:grid;gap:6px}
.portal-nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:#aebed5;padding:12px;border-radius:10px;font:650 .88rem "DM Sans",sans-serif;cursor:pointer}
.portal-nav button.active,.portal-nav button:hover{background:rgba(22,139,255,.13);color:#fff}
.portal-nav button span{color:#d4af37;width:19px;text-align:center}
.portal-main{min-width:0;display:grid;gap:18px}
.portal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.portal-card{padding:20px;min-width:0}
.portal-card h2,.portal-card h3{font:750 1rem Manrope,sans-serif;color:#fff;margin:0 0 13px}
.portal-card p{color:#aebed5;line-height:1.65;margin:0}
.portal-stat-label{font-size:.75rem;color:#9fb0ca}.portal-stat-value{font:800 1.8rem Manrope;color:#fff;margin-top:8px}
.portal-section-title{font:800 1.2rem Manrope;color:#fff;margin:5px 0 0}
.portal-table-wrap{overflow:auto}
.portal-table{border-collapse:collapse;width:100%;min-width:560px;font-size:.82rem}
.portal-table th,.portal-table td{padding:13px 11px;border-bottom:1px solid rgba(128,161,210,.13);text-align:left;color:#c8d5e8}
.portal-table th{color:#849ab9;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.portal-empty{border:1px dashed rgba(140,170,215,.3);border-radius:14px;padding:26px;text-align:center;color:#9fb0ca}
.portal-empty strong{display:block;color:#edf4ff;font:750 1rem Manrope;margin-bottom:7px}
.portal-button{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid rgba(212,175,55,.5);background:rgba(212,175,55,.12);color:#f2d77c;border-radius:9px;padding:10px 14px;font:700 .8rem "DM Sans",sans-serif;text-decoration:none;cursor:pointer}
.portal-button.primary{background:linear-gradient(120deg,#d4af37,#f0d477);color:#101a2c;border:0}
.portal-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.portal-form label{display:grid;gap:6px;color:#b8c8de;font-size:.8rem;font-weight:600}
.portal-form input,.portal-form select,.portal-form textarea{background:#07152c;color:#fff;border:1px solid rgba(154,179,219,.2);border-radius:9px;padding:11px;font:500 .86rem "DM Sans",sans-serif;width:100%}
.portal-form textarea{min-height:100px;grid-column:1/-1}
.portal-status{color:#f0d477;font-size:.8rem;min-height:20px}
.portal-hidden{display:none!important}
.portal-badge{display:inline-block;border-radius:30px;padding:5px 9px;background:rgba(22,139,255,.14);color:#83c6ff;font-size:.7rem;font-weight:700;text-transform:capitalize}

.contact-hero{padding:74px 0 50px;background:radial-gradient(circle at 85% 0,rgba(22,139,255,.16),transparent 36%),#07142f}
.contact-hero h1{font:800 clamp(2.8rem,6vw,5rem)/1.05 Manrope,sans-serif;letter-spacing:-.05em;color:#fff;margin:12px 0}
.contact-hero p{max-width:680px;color:#b8c7df;line-height:1.8}
.contact-methods{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:28px 0 46px}
.contact-method{display:flex;min-height:175px;flex-direction:column;align-items:flex-start;justify-content:space-between;text-decoration:none;background:linear-gradient(145deg,#102749,#091b37);border:1px solid rgba(125,165,220,.19);border-radius:17px;padding:19px;color:#fff;transition:.22s ease}
.contact-method:hover{transform:translateY(-5px);border-color:rgba(212,175,55,.65);box-shadow:0 16px 40px rgba(0,0,0,.22)}
.contact-method-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.08);color:#f0d477}
.contact-method-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-method strong{font:750 .98rem Manrope}.contact-method small{display:block;color:#9fb2cf;font-size:.75rem;margin-top:5px;overflow-wrap:anywhere}
.contact-body{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:start;padding:0 0 72px}
.contact-info-panel,.contact-form-panel{background:linear-gradient(145deg,#102749,#091b37);border:1px solid rgba(125,165,220,.18);border-radius:20px;padding:clamp(22px,3vw,34px);color:#fff}
.contact-info-panel h2,.contact-form-panel h2{font:800 1.45rem Manrope;margin:0 0 13px}.contact-info-panel p{color:#aebed5;line-height:1.75}.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form-grid label{display:grid;gap:7px;color:#cbd8ea;font-size:.82rem;font-weight:600}.contact-form-grid label.full{grid-column:1/-1}.contact-form-grid input,.contact-form-grid select,.contact-form-grid textarea{width:100%;background:#07152c;color:#fff;border:1px solid rgba(154,179,219,.2);border-radius:10px;padding:13px;font:500 .9rem "DM Sans",sans-serif}.contact-form-grid textarea{min-height:130px;resize:vertical}.contact-submit{border:0;border-radius:10px;padding:14px 20px;background:linear-gradient(115deg,#d4af37,#f0d477);color:#09162e;font:800 .9rem Manrope;cursor:pointer}
@media(max-width:1000px){.contact-methods{grid-template-columns:repeat(3,minmax(0,1fr))}.portal-layout{grid-template-columns:1fr}.portal-sidebar{position:static}.portal-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.auth-page{grid-template-columns:1fr}.auth-showcase{min-height:300px;padding:28px}.auth-copy{margin:42px 0 25px}.auth-copy h1{font-size:2.7rem}.auth-panel-wrap{padding:20px;border-left:0}.auth-footnote{display:none}.account-topbar{gap:6px}.account-top-link{font-size:.7rem;padding:7px 9px}.contact-methods{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-body{grid-template-columns:1fr}.portal-grid{grid-template-columns:1fr 1fr}.portal-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.contact-methods{grid-template-columns:1fr 1fr;gap:9px}.contact-method{min-height:145px;padding:14px}.contact-method strong{font-size:.85rem}.portal-grid{grid-template-columns:1fr}.portal-nav{grid-template-columns:1fr 1fr}.portal-form,.contact-form-grid{grid-template-columns:1fr}.contact-form-grid label.full{grid-column:auto}.portal-shell{padding:24px 14px 50px}}

.contact-method-instagram .contact-method-icon{color:#dc62ae;background:rgba(220,98,174,.12)}
.contact-method-youtube .contact-method-icon{color:#ff5555;background:rgba(255,85,85,.12)}
.contact-method-whatsapp .contact-method-icon{color:#25d366;background:rgba(37,211,102,.12)}
.contact-method-phone .contact-method-icon{color:#58b4ff;background:rgba(88,180,255,.12)}
.contact-method-email .contact-method-icon{color:#f0d477;background:rgba(240,212,119,.12)}


/* Dedicated account screen link back to the public website */
.auth-back-link{margin:0 0 16px;text-align:right;font-size:.82rem}.auth-back-link a{color:#9fcaff;text-decoration:none}.auth-back-link a:hover{color:#f0d477;text-decoration:underline}

/* Cloudflare checkout and warm dark-gold client authentication palette */
.kst-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.auth-page{background:radial-gradient(circle at 16% 14%,rgba(184,134,11,.17),transparent 34%),radial-gradient(circle at 84% 78%,rgba(212,175,55,.12),transparent 31%),#100d07;color:#f7f0df}
.auth-showcase:after{border-color:rgba(212,175,55,.18);box-shadow:0 0 0 45px rgba(212,175,55,.025),0 0 0 90px rgba(212,175,55,.02)}
.auth-brand-mark{background:linear-gradient(145deg,#8e6814,#d4af37 55%,#f0d477);color:#1b1407;box-shadow:0 10px 35px rgba(184,134,11,.23)}
.auth-brand small,.auth-kicker,.auth-status{color:#e6c76b}
.auth-copy h1 span{color:#d4af37}
.auth-copy p{color:#c7bda5}
.auth-highlights span{border-color:rgba(212,175,55,.25);color:#eadfbd}
.auth-footnote{color:#a99b7b}
.auth-panel-wrap{background:rgba(13,10,5,.72);border-left-color:rgba(212,175,55,.15)}
.auth-panel{background:linear-gradient(145deg,rgba(35,27,12,.97),rgba(21,16,7,.98));border-color:rgba(212,175,55,.25);box-shadow:0 28px 90px rgba(0,0,0,.42)}
.auth-tabs{background:#110d06}
.auth-tab{color:#b9a77b}
.auth-tab[aria-selected="true"]{background:linear-gradient(135deg,#8e6814,#c49a2c 55%,#ead17c);color:#171105;box-shadow:0 5px 18px rgba(184,134,11,.2)}
.auth-panel .auth-subtitle{color:#c6b990}
.auth-form label{color:#e8ddbd}
.auth-form input{border-color:rgba(212,175,55,.25);background:#100c05;color:#fff8e6}
.auth-form input:focus{border-color:#d4af37;box-shadow:0 0 0 3px rgba(212,175,55,.15)}
.auth-primary{background:linear-gradient(115deg,#8e6814,#c49a2c 55%,#ead17c);color:#171105}
.auth-help-row a,.auth-back-link a,.auth-legal a{color:#e3c363}
.auth-divider{color:#a9945d}
.auth-divider:before,.auth-divider:after{background:rgba(212,175,55,.18)}
.auth-legal{color:#a99b7b}
.kst-checkout-page{min-height:100vh;background:radial-gradient(circle at 50% 5%,rgba(184,134,11,.16),transparent 36%),#0e0b06;color:#f5efdf}
.kst-checkout-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 5%;border-bottom:1px solid rgba(212,175,55,.18);background:rgba(12,9,4,.9)}
.kst-checkout-brand{color:#fff8e6;text-decoration:none;font-weight:900;letter-spacing:.04em}
.kst-checkout-brand span{color:#d4af37}.kst-checkout-brand b{color:#c49a2c}
.kst-checkout-header nav{display:flex;gap:18px;flex-wrap:wrap;font-size:.85rem}.kst-checkout-header nav a{color:#d3c59f;text-decoration:none}
.kst-checkout-shell{width:min(100% - 32px,780px);margin:0 auto;padding:58px 0 80px}
.kst-checkout-intro{text-align:center;margin-bottom:26px}.kst-checkout-intro h1{font:800 clamp(2rem,5vw,3rem) Manrope,sans-serif;color:#fff8e6;margin:12px 0}.kst-checkout-intro p{color:#bfb18a;line-height:1.7}
.kst-checkout-card{background:linear-gradient(145deg,rgba(35,27,12,.97),rgba(19,15,7,.98));border:1px solid rgba(212,175,55,.25);border-radius:24px;padding:clamp(24px,5vw,42px);box-shadow:0 24px 75px rgba(0,0,0,.38);text-align:center}
.kst-checkout-icon{width:54px;height:54px;margin:0 auto 18px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#8e6814,#d4af37,#f0d477);color:#171105;font-size:1.35rem;font-weight:900}
.kst-checkout-card h2{font:800 1.45rem Manrope,sans-serif;color:#fff8e6;margin:0 0 12px}.kst-checkout-message{color:#c9bd9d;line-height:1.8;margin:0 auto;max-width:620px;white-space:normal}
.kst-invoice-details{margin:26px auto;max-width:500px;text-align:left;border:1px solid rgba(212,175,55,.2);border-radius:14px;overflow:hidden}.kst-invoice-details div{display:flex;justify-content:space-between;gap:15px;padding:14px 16px;border-bottom:1px solid rgba(212,175,55,.12)}.kst-invoice-details div:last-child{border:0}.kst-invoice-details span{color:#ae9d74}.kst-invoice-details strong{color:#f2dfaa;text-align:right}
.kst-checkout-error{color:#ffb0a4;min-height:1.2em;margin:12px 0}
.kst-checkout-button{border:0;border-radius:11px;padding:15px 22px;background:linear-gradient(115deg,#8e6814,#c49a2c 55%,#ead17c);color:#171105;font:800 .94rem Manrope,sans-serif;cursor:pointer}.kst-checkout-button:disabled{opacity:.65;cursor:wait}
.kst-checkout-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin:24px 0 10px}.kst-checkout-actions a{color:#e3c363;text-decoration:none;font-weight:700;font-size:.88rem}.kst-checkout-footnote{border-top:1px solid rgba(212,175,55,.13);padding-top:18px;margin:22px 0 0;color:#948765;font-size:.76rem;line-height:1.7}
@media(max-width:650px){.kst-checkout-header{align-items:flex-start;flex-direction:column}.kst-checkout-header nav{gap:12px}.kst-checkout-shell{padding-top:38px}.kst-invoice-details div{align-items:flex-start;flex-direction:column}.kst-invoice-details strong{text-align:left}}


/* ========================================================================
   KST VISUAL REFRESH — DARK NEBULA EDITION
   Presentation-only layer. All existing layouts, content, links, forms,
   scripts, API routes, payment/auth integrations and page structure remain.
   Direction: obsidian / midnight slate, electric violet and cool cyan.
   ======================================================================== */
:root {
  color-scheme: dark;
  --bg: #080b12;
  --bg-deep: #06080e;
  --bg-deeper: #03050a;
  --bg-soft: #0d1320;
  --surface: #111827;
  --surface-2: #151f30;
  --surface-3: #1b2940;
  --surface-glass: rgba(12, 18, 30, .88);
  --surface-light: rgba(167, 139, 250, .075);
  --text: #f3f6fc;
  --text-soft: #d5deed;
  --muted: #9aa9bf;
  --muted-2: #73839b;
  --gold: #a78bfa;
  --gold-bright: #c4b5fd;
  --gold-soft: #8b5cf6;
  --gold-deep: #6d28d9;
  --gold-wash: rgba(167, 139, 250, .13);
  --blue: #22d3ee;
  --blue-bright: #67e8f9;
  --line: rgba(174, 190, 220, .13);
  --line-strong: rgba(167, 139, 250, .42);
  --shadow-gold: 0 18px 55px rgba(139, 92, 246, .16);
  --shadow-blue: 0 18px 55px rgba(34, 211, 238, .12);
  --shadow-card: 0 24px 70px rgba(0, 0, 0, .42);
  --radius-xs: 9px;
  --radius-sm: 14px;
  --radius-md: 21px;
  --radius-lg: 28px;
  --radius-xl: 36px;
}

html { color-scheme: dark; background: var(--bg-deep); }
body {
  color: var(--text);
  background:
    radial-gradient(ellipse at 8% 3%, rgba(124, 85, 235, .17), transparent 34rem),
    radial-gradient(ellipse at 94% 18%, rgba(34, 211, 238, .085), transparent 32rem),
    radial-gradient(ellipse at 48% 78%, rgba(34, 47, 78, .22), transparent 42rem),
    linear-gradient(180deg, #090d17 0%, #070a12 58%, #06080e 100%);
}
::selection { color: #070a12; background: #a5f3fc; }
:focus-visible { outline-color: #67e8f9; }

/* Typography and brand accents */
.section-title,.hero-content h1,.brand-copy strong,.department-card h3,
.industry-card h3,.concept-copy h3,.process-step h3,.foundation-card h3,
.engagement-card h3,.why-point h3,.faq-item summary,.commitment-inner h2,
.final-cta-content h2 { color: var(--text); }
.section-title span,.hero-content h1 span,.commitment-inner h2 span,
.final-cta-content h2 span,.eyebrow,.text-link,.card-link,.nav-login,
.nav-link:hover,.nav-login:hover,.nav-dropdown-toggle:hover,
.principle-label,.feature-list .icon,.department-card .card-link,
.brand-copy > span,.dropdown-index { color: var(--gold-bright); }
.eyebrow { color: #c4b5fd; }
.eyebrow-line,.status-dot,.visual-label-dot { background: linear-gradient(90deg,#a78bfa,#22d3ee); }
.hero-content h1 span,.section-title span { text-shadow: 0 0 34px rgba(167,139,250,.16); }
.hero-description,.section-heading > p:last-child,.section-heading-split > p,
.about-content > p:not(.eyebrow),.spotlight-content > p:not(.eyebrow),
.automation-copy > p:not(.eyebrow),.consulting-content > p:not(.eyebrow),
.software-content > p:not(.eyebrow),.integration-content > p:not(.eyebrow),
.security-content > p:not(.eyebrow),.why-intro > p:not(.eyebrow),
.faq-intro > p:not(.eyebrow) { color: var(--muted); }

/* Buttons and links */
.button-primary,.auth-primary,.kst-checkout-button,.contact-submit {
  color: #090b14;
  background: linear-gradient(115deg,#a78bfa 0%,#8b5cf6 48%,#22d3ee 100%);
  box-shadow: 0 12px 30px rgba(139,92,246,.2);
}
.button-primary:hover,.auth-primary:hover,.kst-checkout-button:hover,.contact-submit:hover {
  box-shadow: 0 16px 38px rgba(139,92,246,.27); filter: brightness(1.06);
}
.button-secondary { color: #e4eaf6; border-color: rgba(174,190,220,.22); background: rgba(17,24,39,.72); }
.button-secondary:hover { color: #c4b5fd; border-color: rgba(167,139,250,.55); background: #151f30; }
.button-outline { color: #c4b5fd; border-color: rgba(167,139,250,.48); background: rgba(17,24,39,.55); }
.button-outline:hover { color: #090b14; background: #a78bfa; }
.text-link,.card-link,.subtle-link { color: #a5f3fc; }
.text-link:hover,.card-link:hover,.subtle-link:hover { color: #c4b5fd; }

/* Announcement, header and navigation */
.announcement-bar { color: #f6f7ff; background: linear-gradient(90deg,#39206e,#4c2b8c 52%,#075b70); }
.site-header,.site-header.is-scrolled {
  border-bottom: 1px solid rgba(174,190,220,.12);
  background: rgba(7,10,18,.88);
  box-shadow: 0 10px 32px rgba(0,0,0,.22);
  backdrop-filter: blur(20px);
}
.brand-mark { color: #c4b5fd; border-color: rgba(167,139,250,.38); background: linear-gradient(145deg,#211a39,#111a2b); box-shadow: 0 8px 22px rgba(139,92,246,.13); }
.brand-mark > span { color: #67e8f9; }
.nav-link,.nav-login,.nav-dropdown-toggle { color: #c4cede; }
.nav-login { color: #c4b5fd; }
.nav-dropdown-menu { border-color: rgba(174,190,220,.16); background: rgba(12,18,30,.98); box-shadow: 0 22px 48px rgba(0,0,0,.45); }
.nav-dropdown-menu a { color: #cbd5e4; }
.nav-dropdown-menu a:hover { color: #c4b5fd; background: rgba(167,139,250,.1); }
.menu-toggle { color: #f3f6fc; }
.primary-nav { background: rgba(8,12,21,.98); }

/* Home hero and imagery */
.hero-section { background: transparent; }
.hero-ambient-one { background: radial-gradient(circle,rgba(139,92,246,.19),transparent 67%); }
.hero-ambient-two { background: radial-gradient(circle,rgba(34,211,238,.12),transparent 68%); }
.hero-image-frame,.about-image-wrap,.spotlight-visual img { border-color: rgba(174,190,220,.18); box-shadow: 0 28px 66px rgba(0,0,0,.42); }
.hero-image-frame img,.about-image-wrap img,.spotlight-visual img { filter: saturate(.84) contrast(1.07); }
.hero-image-shade { background: linear-gradient(180deg,transparent 38%,rgba(5,8,16,.82) 100%),linear-gradient(115deg,rgba(139,92,246,.14),transparent 48%); }
.floating-card,.workflow-node { color: var(--text); border-color: rgba(174,190,220,.17); background: rgba(15,23,38,.94); box-shadow: 0 16px 40px rgba(0,0,0,.38); }
.floating-card strong,.workflow-node strong { color: #f3f6fc; }
.floating-card small,.workflow-node small { color: #9aa9bf; }
.floating-icon,.workflow-node-icon { color: #090b14; background: linear-gradient(135deg,#a78bfa,#22d3ee); }
.value-strip { border-color: var(--line); background: linear-gradient(90deg,rgba(139,92,246,.07),rgba(14,21,35,.82),rgba(34,211,238,.045)); }
.value-item,.value-item:first-child { border-color: var(--line); }
.value-item h2 { color: var(--text); }
.value-item p,.hero-assurance p,.about-principles p { color: var(--muted); }
.assurance-icon,.value-icon,.department-icon,.why-point-icon,.foundation-icon,.engagement-icon {
  color: #c4b5fd; border-color: rgba(167,139,250,.28); background: linear-gradient(145deg,rgba(139,92,246,.17),rgba(34,211,238,.07)); box-shadow: none;
}

/* Cards, panels and content sections */
.department-card,.industry-card,.concept-card,.process-step,.foundation-card,
.engagement-card,.faq-item,.consulting-note,.image-index-card {
  color: var(--text); border: 1px solid rgba(174,190,220,.14);
  background: linear-gradient(145deg,rgba(20,29,46,.96),rgba(11,17,29,.98));
  box-shadow: 0 14px 38px rgba(0,0,0,.22);
}
.department-card-featured,.engagement-card-featured {
  border-color: rgba(167,139,250,.48);
  background: linear-gradient(145deg,rgba(55,37,91,.48),rgba(13,22,36,.98) 72%);
}
.department-card:hover,.industry-card:hover,.concept-card:hover,.engagement-card:hover {
  border-color: rgba(103,232,249,.45); box-shadow: 0 22px 48px rgba(0,0,0,.34),0 0 30px rgba(139,92,246,.08);
}
.department-card h3,.industry-card h3,.concept-copy h3,.process-step h3,
.foundation-card h3,.engagement-card h3,.why-point h3 { color: #f0f4fb; }
.department-card > p:not(.card-kicker),.industry-card p,.concept-copy p,
.process-step p,.foundation-card p,.engagement-card > p,.why-point p { color: #a7b5c9; }
.department-number,.card-kicker,.concept-number,.foundation-index,.engagement-step { color: #c4b5fd; }
.department-card::before { background: radial-gradient(circle,rgba(139,92,246,.15),transparent 70%); }
.department-card-featured .department-icon { background: rgba(167,139,250,.17); }
.image-index-card { background: linear-gradient(145deg,#1b2540,#101827); }
.image-index-card strong { color: #f3f6fc; }
.spotlight-content > p:not(.eyebrow),.feature-list li { color: #a7b5c9; }
.visual-outline { border-color: rgba(167,139,250,.42); }
.visual-label { color: #eef4ff; border-color: rgba(103,232,249,.25); background: rgba(7,12,22,.88); }
.automation-panel,.security-panel,.commitment-section,.final-cta-section {
  border: 1px solid rgba(167,139,250,.2); border-radius: 28px;
  background: radial-gradient(circle at 92% 5%,rgba(34,211,238,.09),transparent 34%),linear-gradient(135deg,#151c31 0%,#101827 58%,#111d2c 100%);
  box-shadow: 0 22px 58px rgba(0,0,0,.28);
}
.automation-copy > p:not(.eyebrow),.security-content > p:not(.eyebrow),
.commitment-inner > p,.final-cta-content > p:not(.eyebrow) { color: #a7b5c9; }
.automation-panel .section-title,.security-panel .section-title,
.commitment-inner h2,.final-cta-content h2 { color: #f3f6fc; }
.workflow-node { color: #f3f6fc; }
.workflow-connector { background: rgba(167,139,250,.28); }
.workflow-connector::after { background: #67e8f9; }
.security-tags span { color: #c4b5fd; border-color: rgba(167,139,250,.26); background: rgba(139,92,246,.1); }
.security-ring { border-color: rgba(103,232,249,.2); }
.security-shield { color: #080b12; background: linear-gradient(135deg,#a78bfa,#22d3ee); box-shadow: 0 16px 36px rgba(139,92,246,.22); }
.concept-image::after { background: linear-gradient(180deg,transparent 45%,rgba(5,8,16,.76)); }
.faq-item summary { color: #edf2fb; }
.faq-item > p { color: #a7b5c9; }
.faq-plus { color: #67e8f9; }

/* Footer */
.site-footer { color: #dbe5f5; background: #060a12; border-top: 1px solid rgba(174,190,220,.12); }
.footer-brand-column > p,.footer-brand-column .footer-tagline,
.footer-contact > p,.footer-legal-row a,.footer-legal-row p { color: #91a0b8; }
.footer-column h2 { color: #f3f6fc; }
.footer-column > a { color: #c0cadd; }
.footer-column > a:hover,.footer-legal-row a:hover { color: #67e8f9; }
.footer-email { color: #c4b5fd; }
.back-to-top { color: #080b12; background: linear-gradient(135deg,#a78bfa,#22d3ee); }

/* Inner service, legal and informational pages */
.ks-inner { color: #eaf0fa; background: radial-gradient(circle at 86% 0,rgba(34,211,238,.09),transparent 30%),radial-gradient(circle at 6% 26%,rgba(139,92,246,.12),transparent 28%),#080b12; }
.ks-breadcrumb { color: #8292ab; }
.ks-breadcrumb a { color: #67e8f9; }
.ks-kicker { color: #c4b5fd; }
.ks-hero p,.ks-lead,.ks-section-intro,.ks-card p,.ks-card li,.ks-list { color: #a2b0c4; }
.ks-btn { background: linear-gradient(110deg,#8b5cf6,#6d5ce7 55%,#0891b2); color: #fff!important; border-color: rgba(196,181,253,.25); }
.ks-btn.alt { background: rgba(139,92,246,.06); border-color: rgba(167,139,250,.5); color: #c4b5fd!important; }
.ks-card { background: linear-gradient(145deg,rgba(22,31,49,.97),rgba(11,17,29,.98)); border-color: rgba(174,190,220,.15); box-shadow: 0 14px 36px rgba(0,0,0,.26); }
.ks-card h3 { color: #f0f4fb; }
.ks-price { color: #67e8f9; }
.ks-price small { color: #8595ad; }
.ks-note { border-left-color: #a78bfa; background: rgba(139,92,246,.09); color: #aab8cc; }
.ks-form label { color: #dbe5f4; }
.ks-form input,.ks-form select,.ks-form textarea { background: #0a1120; border-color: rgba(174,190,220,.2); color: #f3f6fc; }
.ks-faq details { background: #101929; border-color: rgba(174,190,220,.15); }
.ks-faq summary { color: #edf2fb; }
.ks-faq details p { color: #a4b1c5; }
.ks-footer { border-top-color: rgba(174,190,220,.13); color: #8e9db4; }

/* Authentication */
.auth-page {
  color: #edf2fb;
  background: radial-gradient(circle at 14% 12%,rgba(139,92,246,.2),transparent 35%),radial-gradient(circle at 88% 82%,rgba(34,211,238,.1),transparent 30%),#080b12;
}
.auth-showcase { color: #fff; }
.auth-showcase:after { border-color: rgba(103,232,249,.16); box-shadow: 0 0 0 45px rgba(139,92,246,.025),0 0 0 90px rgba(34,211,238,.018); }
.auth-brand { color: #f7f8ff; }
.auth-brand-mark { color: #090b14; background: linear-gradient(145deg,#a78bfa,#22d3ee); box-shadow: 0 10px 32px rgba(139,92,246,.24); }
.auth-brand small,.auth-kicker,.auth-status { color: #c4b5fd; }
.auth-copy h1 { color: #fff; }
.auth-copy h1 span { color: #67e8f9; }
.auth-copy p { color: #b7c4d8; }
.auth-highlights span { border-color: rgba(174,190,220,.2); color: #dce5f3; }
.auth-footnote { color: #8494ad; }
.auth-panel-wrap { background: rgba(7,11,19,.72); border-left-color: rgba(174,190,220,.13); }
.auth-panel { color: #edf2fb; border-color: rgba(167,139,250,.22); background: linear-gradient(145deg,rgba(22,29,47,.98),rgba(11,17,29,.99)); box-shadow: 0 24px 72px rgba(0,0,0,.42); }
.auth-panel h2 { color: #f3f6fc; }
.auth-tabs { background: #0a1120; }
.auth-tab { color: #97a7bf; }
.auth-tab[aria-selected="true"] { color: #090b14; background: linear-gradient(120deg,#a78bfa,#22d3ee); box-shadow: 0 6px 18px rgba(139,92,246,.2); }
.auth-panel .auth-subtitle { color: #a7b5c9; }
.auth-form label,.contact-form-grid label,.portal-form label { color: #d5deed; }
.auth-form input,.portal-form input,.portal-form select,.portal-form textarea,
.contact-form-grid input,.contact-form-grid select,.contact-form-grid textarea {
  color: #f3f6fc; border-color: rgba(174,190,220,.2); background: #0a1120;
}
.auth-form input::placeholder,.portal-form input::placeholder,
.contact-form-grid input::placeholder,.contact-form-grid textarea::placeholder { color: #72829a; }
.auth-form input:focus,.portal-form input:focus,.portal-form select:focus,
.portal-form textarea:focus,.contact-form-grid input:focus,
.contact-form-grid select:focus,.contact-form-grid textarea:focus {
  border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.15);
}
.auth-help-row a,.auth-back-link a,.auth-legal a { color: #67e8f9; }
.auth-divider { color: #7f8ea5; }
.auth-divider:before,.auth-divider:after { background: rgba(174,190,220,.16); }
.auth-legal { color: #7f8ea5; }
.auth-back-link a:hover { color: #c4b5fd; }

/* Customer and administrator portals */
.portal-shell { color: #dfe7f4; }
.portal-heading h1,.portal-section-title { color: #f3f6fc; }
.portal-heading p,.portal-card p,.portal-stat-label { color: #9aa9bf; }
.portal-eyebrow,.portal-status { color: #67e8f9; }
.portal-sidebar,.portal-card { color: #dfe7f4; border-color: rgba(174,190,220,.15); background: linear-gradient(145deg,#141e30,#0d1422); box-shadow: 0 12px 32px rgba(0,0,0,.28); }
.portal-nav button { color: #a7b5c9; }
.portal-nav button.active,.portal-nav button:hover { color: #c4b5fd; background: rgba(139,92,246,.14); }
.portal-nav button span { color: #67e8f9; }
.portal-card h2,.portal-card h3,.portal-stat-value,.portal-empty strong { color: #f0f4fb; }
.portal-table th,.portal-table td { color: #c1ccdd; border-bottom-color: rgba(174,190,220,.12); }
.portal-table th { color: #8191aa; }
.portal-empty { color: #9aa9bf; border-color: rgba(174,190,220,.24); }
.portal-button { color: #c4b5fd; border-color: rgba(167,139,250,.35); background: rgba(139,92,246,.1); }
.portal-button.primary { color: #090b14; background: linear-gradient(120deg,#a78bfa,#22d3ee); }
.portal-badge { color: #a5f3fc; background: rgba(34,211,238,.1); }

/* Contact and checkout */
.contact-hero { background: radial-gradient(circle at 85% 0,rgba(139,92,246,.16),transparent 36%),linear-gradient(135deg,#111a2c,#090e19); }
.contact-hero h1 { color: #f3f6fc; }
.contact-hero p { color: #a7b5c9; }
.contact-method,.contact-info-panel,.contact-form-panel {
  color: #edf2fb; border-color: rgba(174,190,220,.15); background: linear-gradient(145deg,#151f31,#0c1422);
  box-shadow: 0 14px 36px rgba(0,0,0,.25);
}
.contact-method:hover { border-color: rgba(103,232,249,.4); box-shadow: 0 18px 40px rgba(0,0,0,.34); }
.contact-method-icon { color: #c4b5fd; background: rgba(139,92,246,.14); }
.contact-method strong,.contact-info-panel h2,.contact-form-panel h2 { color: #f3f6fc; }
.contact-method small,.contact-info-panel p { color: #a2b0c4; }
.contact-submit { color: #090b14; }
.kst-checkout-page { color: #edf2fb; background: radial-gradient(circle at 50% 4%,rgba(139,92,246,.15),transparent 36%),#080b12; }
.kst-checkout-header { border-bottom-color: rgba(174,190,220,.14); background: rgba(7,10,18,.92); }
.kst-checkout-brand { color: #f3f6fc; }
.kst-checkout-brand span,.kst-checkout-brand b { color: #c4b5fd; }
.kst-checkout-header nav a,.kst-checkout-actions a { color: #67e8f9; }
.kst-checkout-intro h1,.kst-checkout-card h2 { color: #f3f6fc; }
.kst-checkout-intro p,.kst-checkout-message { color: #a7b5c9; }
.kst-checkout-card { color: #eaf0fa; border-color: rgba(167,139,250,.22); background: linear-gradient(145deg,rgba(22,29,47,.98),rgba(10,16,27,.99)); box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.kst-checkout-icon { color: #090b14; background: linear-gradient(135deg,#a78bfa,#22d3ee); }
.kst-invoice-details { border-color: rgba(174,190,220,.17); }
.kst-invoice-details div { border-bottom-color: rgba(174,190,220,.12); }
.kst-invoice-details span { color: #91a0b6; }
.kst-invoice-details strong { color: #e8eef8; }
.kst-checkout-footnote { border-top-color: rgba(174,190,220,.14); color: #8594aa; }

/* Static HTML headers and shared small-screen navigation */
.ks-inner > header { background: rgba(7,10,18,.94)!important; border-bottom-color: rgba(174,190,220,.14)!important; }
.ks-inner > header a span:first-child { color: #c4b5fd!important; }
.ks-inner > header a span:last-child { color: #67e8f9!important; }
.ks-inner > header nav a { color: #c6d1e1!important; }
@media (max-width:980px) {
  .primary-nav { background: rgba(8,12,21,.985); box-shadow: 0 18px 42px rgba(0,0,0,.4); }
  .primary-nav .nav-link,.primary-nav .nav-login,.primary-nav .nav-dropdown-toggle { color: #d4deed; }
  .nav-dropdown-menu { background: #101827; }
}
@media (max-width:760px) {
  .auth-panel-wrap { background: rgba(7,11,19,.82); }
  .contact-hero { padding-top: 52px; }
  .site-footer { background: #060a12; }
}


/* ======================================================================
   KST PREMIUM REFRESH — OBSIDIAN BLACK + CHAMPAGNE GOLD
   Shared visual system for every page in this project.
   ====================================================================== */
:root {
  color-scheme: dark;
  --bg: #090909;
  --bg-deep: #050505;
  --bg-deeper: #030303;
  --bg-soft: #111111;
  --surface: #171717;
  --surface-2: #202020;
  --surface-3: #292929;
  --surface-glass: rgba(16,16,16,.90);
  --surface-light: rgba(197,164,109,.055);
  --text: #F5F2EB;
  --text-soft: #E8D8B5;
  --muted: #A8A29E;
  --muted-2: #78716C;
  --gold: #C5A46D;
  --gold-bright: #E8D8B5;
  --gold-soft: #B18B54;
  --gold-deep: #80613F;
  --gold-wash: rgba(197,164,109,.12);
  --blue: #C5A46D;
  --blue-bright: #E8D8B5;
  --line: rgba(232,216,181,.13);
  --line-strong: rgba(197,164,109,.38);
  --shadow-gold: 0 18px 55px rgba(197,164,109,.10);
  --shadow-blue: 0 18px 55px rgba(197,164,109,.08);
  --shadow-card: 0 24px 70px rgba(0,0,0,.42);
  --font-body: "DM Sans", Arial, sans-serif;
  --font-heading: "Playfair Display", Georgia, serif;
}
html { color-scheme: dark; background: var(--bg-deep); }
body {
  color: var(--text);
  background:
    radial-gradient(ellipse at 8% 3%, rgba(197,164,109,.075), transparent 34rem),
    radial-gradient(ellipse at 94% 18%, rgba(197,164,109,.045), transparent 32rem),
    linear-gradient(180deg,#0B0B0B 0%,#090909 60%,#050505 100%);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.72;
}
::selection { color: #090909; background: #E8D8B5; }
:focus-visible { outline-color: #E8D8B5; }
.section-title,.hero-content h1,.brand-copy strong,.department-card h3,
.industry-card h3,.concept-copy h3,.process-step h3,.foundation-card h3,
.engagement-card h3,.why-point h3,.faq-item summary,.commitment-inner h2,
.final-cta-content h2,.kst-checkout-intro h1,.kst-checkout-card h2 {
  font-family: var(--font-heading);
}
.section-title { font-size: clamp(2.25rem,4.5vw,3.75rem); letter-spacing:-.035em; line-height:1.12; }
.section-title span,.hero-content h1 span,.commitment-inner h2 span,
.final-cta-content h2 span,.eyebrow,.text-link,.card-link,.nav-login,
.nav-link:hover,.nav-dropdown-toggle:hover,.principle-label,.feature-list .icon,
.department-card .card-link,.brand-copy > span,.dropdown-index { color:var(--gold-bright); }
.eyebrow { color:var(--gold); }
.eyebrow-line,.status-dot,.visual-label-dot { background:linear-gradient(90deg,#C5A46D,#E8D8B5); }
.hero-content h1 {
  max-width:760px; margin:0 0 24px; font-size:clamp(3.35rem,6.3vw,6.05rem);
  font-weight:700; letter-spacing:-.045em; line-height:1.015;
}
.hero-content h1 span,.section-title span { text-shadow:0 0 32px rgba(197,164,109,.10); }
.hero-description { max-width:590px; color:#C4BDB4; font-size:1.04rem; line-height:1.85; }
.section-heading > p:last-child,.section-heading-split > p,
.about-content > p:not(.eyebrow),.spotlight-content > p:not(.eyebrow),
.automation-copy > p:not(.eyebrow),.consulting-content > p:not(.eyebrow),
.software-content > p:not(.eyebrow),.integration-content > p:not(.eyebrow),
.security-content > p:not(.eyebrow),.why-intro > p:not(.eyebrow),
.faq-intro > p:not(.eyebrow) { color:var(--muted); }
.button-primary,.auth-primary,.kst-checkout-button,.contact-submit,.portal-button.primary {
  color:#090909; background:linear-gradient(135deg,#E8D8B5 0%,#C5A46D 100%);
  box-shadow:0 10px 28px rgba(197,164,109,.16);
}
.button-primary:hover,.auth-primary:hover,.kst-checkout-button:hover,.contact-submit:hover {
  box-shadow:0 15px 34px rgba(197,164,109,.24); filter:brightness(1.04);
}
.button-secondary { color:var(--text-soft); border-color:rgba(232,216,181,.24); background:rgba(23,23,23,.78); }
.button-secondary:hover { color:var(--gold-bright); border-color:var(--gold); background:#202020; }
.button-outline { color:var(--gold-bright); border-color:rgba(197,164,109,.48); background:rgba(23,23,23,.68); }
.button-outline:hover { color:#090909; background:var(--gold-bright); }
.text-link,.card-link,.subtle-link { color:var(--gold-bright); }
.text-link:hover,.card-link:hover,.subtle-link:hover { color:#F5E8CF; }

/* Announcement strip: account actions read as two intentional buttons. */
.announcement-bar { color:var(--text-soft); background:#171717; border-bottom:1px solid rgba(197,164,109,.20); font-size:.76rem; }
.announcement-inner { min-height:46px; }
.announcement-inner p { color:#C4BDB4; }
.announcement-star { color:var(--gold); }
.account-topbar { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.account-top-link {
  min-height:32px; padding:7px 13px; border:1px solid rgba(232,216,181,.26);
  border-radius:999px; color:#E8D8B5; background:rgba(255,255,255,.025);
  font:700 .72rem/1.15 "DM Sans",sans-serif; letter-spacing:.015em;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease;
}
.account-top-link:hover { transform:translateY(-1px); border-color:var(--gold); color:#F5F2EB; background:rgba(197,164,109,.08); }
.account-top-register { color:#090909; border-color:transparent; background:linear-gradient(135deg,#E8D8B5,#C5A46D); box-shadow:0 5px 16px rgba(197,164,109,.13); }
.account-top-register:hover { color:#090909; background:linear-gradient(135deg,#F1E6CE,#D2B582); }
.account-contact-link { border-color:rgba(197,164,109,.34); color:var(--gold-bright); }
.site-header,.site-header.is-scrolled {
  border-bottom:1px solid rgba(232,216,181,.11); background:rgba(9,9,9,.91);
  box-shadow:0 10px 32px rgba(0,0,0,.22); backdrop-filter:blur(20px);
}
.brand-mark { color:var(--gold-bright); border-color:rgba(197,164,109,.50); border-radius:50%; background:linear-gradient(145deg,#202020,#111111); box-shadow:0 8px 22px rgba(197,164,109,.08); }
.brand-mark > span { color:var(--gold); }
.nav-link,.nav-login,.nav-dropdown-toggle { color:#D3CDC3; }
.nav-login { color:var(--gold-bright); }
.nav-dropdown-menu { border-color:rgba(232,216,181,.15); background:rgba(17,17,17,.985); box-shadow:0 22px 48px rgba(0,0,0,.5); }
.nav-dropdown-menu a { color:#D3CDC3; }
.nav-dropdown-menu a:hover { color:var(--gold-bright); background:rgba(197,164,109,.09); }
.menu-toggle { color:var(--text); }
.primary-nav { background:rgba(9,9,9,.985); }
.hero-section { background:transparent; }
.hero-ambient-one { background:radial-gradient(circle,rgba(197,164,109,.13),transparent 67%); }
.hero-ambient-two { background:radial-gradient(circle,rgba(232,216,181,.07),transparent 68%); }
.hero-image-frame,.about-image-wrap,.spotlight-visual img { border-color:rgba(197,164,109,.22); box-shadow:0 28px 66px rgba(0,0,0,.45); }
.hero-image-frame img,.about-image-wrap img,.spotlight-visual img { filter:saturate(.72) contrast(1.07); }
.hero-image-shade { background:linear-gradient(180deg,transparent 38%,rgba(5,5,5,.85) 100%),linear-gradient(115deg,rgba(197,164,109,.09),transparent 48%); }
.floating-card,.workflow-node { color:var(--text); border-color:rgba(232,216,181,.17); background:rgba(23,23,23,.96); box-shadow:0 16px 40px rgba(0,0,0,.42); }
.floating-card strong,.workflow-node strong { color:var(--text); }
.floating-card small,.workflow-node small { color:var(--muted); }
.floating-icon,.value-icon,.department-icon,.why-point-icon,.foundation-icon,.engagement-icon { color:#090909; background:linear-gradient(135deg,#E8D8B5,#C5A46D); }
.value-strip { border-color:var(--line); background:linear-gradient(90deg,rgba(197,164,109,.065),rgba(255,255,255,.012),rgba(197,164,109,.065)); }
.value-item { border-color:var(--line); }
.department-card,.concept-card,.industry-card,.foundation-card,.engagement-card,.process-step,
.why-point,.faq-item,.automation-panel,.security-panel {
  color:var(--text); border-color:var(--line); background:linear-gradient(145deg,rgba(32,32,32,.96),rgba(17,17,17,.98));
}
.department-card::before { background:radial-gradient(circle,rgba(197,164,109,.13),transparent 70%); }
.department-card:hover { border-color:rgba(232,216,181,.42); box-shadow:var(--shadow-card),0 0 28px rgba(197,164,109,.06); }
.department-card-featured { border-color:rgba(197,164,109,.34); background:linear-gradient(145deg,#262117,#171717); }
.image-index-card { border-color:rgba(197,164,109,.32); background:linear-gradient(145deg,#252017,#171717); }
.image-index-card span,.principle-label,.department-number,.concept-number,.foundation-index { color:var(--gold); }
.automation-panel,.security-panel,.commitment-section,.final-cta-section { border-color:rgba(197,164,109,.16); }
.automation-panel,.security-panel { background:linear-gradient(145deg,#202020,#111111); }
.process-step,.foundation-card,.engagement-card,.faq-item { border-color:var(--line); }
.faq-item summary { color:var(--text-soft); }
.faq-item p { color:var(--muted); }
.final-cta-section { background:linear-gradient(115deg,#171717,#090909 68%,#211b12); }
.cta-glow { background:radial-gradient(circle,rgba(197,164,109,.13),transparent 68%); }
.site-footer { background:#050505; border-top:1px solid rgba(197,164,109,.16); }
.footer-column h2 { color:var(--gold-bright); }
.footer-column a,.footer-tagline,.parent-company { color:var(--muted); }
.footer-column a:hover,.footer-contact-link,.footer-email { color:var(--gold-bright); }

/* Forms, auth pages and customer/admin portal share the same finish. */
.auth-page,.contact-hero { color:var(--text); background:radial-gradient(circle at 14% 12%,rgba(197,164,109,.11),transparent 35%),#090909; }
.auth-brand,.auth-copy h1,.auth-panel h2,.contact-hero h1 { color:var(--text); }
.auth-brand-mark { color:#090909; background:linear-gradient(145deg,#E8D8B5,#C5A46D); box-shadow:0 10px 28px rgba(197,164,109,.15); }
.auth-brand small,.auth-kicker,.auth-status,.auth-copy h1 span { color:var(--gold-bright); }
.auth-copy p,.auth-panel .auth-subtitle,.contact-hero p { color:var(--muted); }
.auth-highlights span { border-color:rgba(232,216,181,.2); color:var(--text-soft); }
.auth-panel-wrap { background:rgba(9,9,9,.78); border-left-color:rgba(197,164,109,.14); }
.auth-panel,.contact-method,.contact-info-panel,.contact-form-panel,.portal-sidebar,.portal-card {
  color:var(--text); border-color:rgba(197,164,109,.18); background:linear-gradient(145deg,#202020,#111111); box-shadow:0 20px 55px rgba(0,0,0,.35);
}
.auth-tabs { background:#111111; }
.auth-tab { color:var(--muted); }
.auth-tab[aria-selected="true"] { color:#090909; background:linear-gradient(120deg,#E8D8B5,#C5A46D); box-shadow:0 6px 18px rgba(197,164,109,.14); }
.auth-form label,.contact-form-grid label,.portal-form label { color:var(--text-soft); }
.auth-form input,.portal-form input,.portal-form select,.portal-form textarea,
.contact-form-grid input,.contact-form-grid select,.contact-form-grid textarea {
  color:var(--text); border-color:rgba(232,216,181,.19); background:#0D0D0D;
}
.auth-form input::placeholder,.portal-form input::placeholder,.contact-form-grid input::placeholder,.contact-form-grid textarea::placeholder { color:#77716A; }
.auth-form input:focus,.portal-form input:focus,.portal-form select:focus,.portal-form textarea:focus,
.contact-form-grid input:focus,.contact-form-grid select:focus,.contact-form-grid textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(197,164,109,.13); }
.auth-help-row a,.auth-back-link a,.auth-legal a,.auth-back-link a:hover { color:var(--gold-bright); }
.auth-divider { color:var(--muted); }
.auth-divider:before,.auth-divider:after { background:rgba(232,216,181,.16); }
.auth-legal,.auth-footnote { color:var(--muted-2); }
.portal-shell { color:var(--text-soft); }
.portal-heading h1,.portal-section-title,.portal-card h2,.portal-card h3,.portal-stat-value,.portal-empty strong { color:var(--text); }
.portal-heading p,.portal-card p,.portal-stat-label,.portal-empty { color:var(--muted); }
.portal-eyebrow,.portal-status,.portal-nav button span { color:var(--gold-bright); }
.portal-nav button { color:#BDB6AC; }
.portal-nav button.active,.portal-nav button:hover { color:var(--gold-bright); background:rgba(197,164,109,.11); }
.portal-table th,.portal-table td { color:#D3CDC3; border-bottom-color:rgba(232,216,181,.12); }
.portal-table th { color:#A8A29E; }
.portal-button { color:var(--gold-bright); border-color:rgba(197,164,109,.35); background:rgba(197,164,109,.08); }
.portal-button.primary { color:#090909; }
.portal-badge { color:var(--gold-bright); background:rgba(197,164,109,.12); }
.contact-method-icon { color:#090909; background:linear-gradient(135deg,#E8D8B5,#C5A46D); }
.contact-method strong,.contact-info-panel h2,.contact-form-panel h2 { color:var(--text); }
.contact-method small,.contact-info-panel p { color:var(--muted); }
.contact-method:hover { border-color:rgba(232,216,181,.42); box-shadow:0 18px 40px rgba(0,0,0,.4); }

/* Checkout — clear invoice details and guided payment information. */
.kst-checkout-page { min-height:100vh; color:var(--text); background:radial-gradient(circle at 50% 2%,rgba(197,164,109,.09),transparent 36%),#090909; }
.kst-checkout-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:17px 5%; border-bottom:1px solid rgba(197,164,109,.17); background:rgba(9,9,9,.94); }
.kst-checkout-brand { color:var(--text); text-decoration:none; font:800 .82rem "DM Sans",sans-serif; letter-spacing:.055em; }
.kst-checkout-brand span { display:inline-grid; width:32px; height:32px; margin-right:8px; place-items:center; border:1px solid var(--gold); border-radius:50%; color:var(--gold-bright); }
.kst-checkout-brand b { color:var(--gold); }
.kst-checkout-header nav { display:flex; gap:18px; flex-wrap:wrap; font-size:.82rem; }
.kst-checkout-header nav a { color:var(--text-soft); text-decoration:none; }
.kst-checkout-header nav a:hover { color:var(--gold-bright); }
.kst-checkout-shell { width:min(1160px,calc(100% - 34px)); margin:0 auto; padding:55px 0 76px; }
.kst-checkout-intro { text-align:center; margin-bottom:30px; }
.kst-checkout-intro h1 { font:700 clamp(2.45rem,5vw,3.7rem) "Playfair Display",Georgia,serif; color:var(--text); margin:12px 0; letter-spacing:-.035em; }
.kst-checkout-intro p { color:var(--muted); line-height:1.7; }
.kst-checkout-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr); align-items:start; gap:22px; }
.kst-checkout-card { text-align:center; padding:clamp(24px,4vw,42px); color:var(--text); border:1px solid rgba(197,164,109,.24); border-radius:24px; background:linear-gradient(145deg,#1A1A1A,#101010); box-shadow:0 24px 75px rgba(0,0,0,.4); }
.kst-checkout-state-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:26px; }
.kst-checkout-state { display:inline-flex; padding:7px 11px; border:1px solid rgba(197,164,109,.35); border-radius:999px; color:var(--gold-bright); background:rgba(197,164,109,.08); font-size:.63rem; font-weight:800; letter-spacing:.11em; }
.kst-checkout-reference-label { color:var(--muted-2); font-size:.68rem; }
.kst-checkout-icon { display:grid; width:54px; height:54px; margin:0 auto 18px; place-items:center; border:1px solid rgba(232,216,181,.45); border-radius:50%; color:#090909; background:linear-gradient(145deg,#E8D8B5,#C5A46D); font-size:1.3rem; font-weight:900; }
.kst-checkout-card h2 { color:var(--text); margin:0 0 12px; font-size:1.5rem; }
.kst-checkout-message { max-width:620px; margin:0 auto; color:#C4BDB4; line-height:1.8; }
.kst-invoice-details { max-width:540px; margin:26px auto; overflow:hidden; border:1px solid rgba(197,164,109,.24); border-radius:15px; text-align:left; background:#111; }
.kst-invoice-details div { display:flex; justify-content:space-between; gap:15px; padding:14px 16px; border-bottom:1px solid rgba(232,216,181,.10); }
.kst-invoice-details div:last-child { border:0; }
.kst-invoice-details span { color:var(--muted); font-size:.84rem; }
.kst-invoice-details strong { color:var(--text-soft); text-align:right; font-size:.9rem; }
.kst-checkout-error { min-height:1.2em; margin:12px 0; color:#FCA5A5; }
.kst-checkout-button { display:inline-flex; min-height:50px; align-items:center; justify-content:center; gap:10px; padding:14px 22px; border:0; border-radius:999px; cursor:pointer; font:800 .9rem "DM Sans",sans-serif; }
.kst-checkout-button:disabled { opacity:.65; cursor:wait; }
.kst-checkout-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:18px; margin:24px 0 10px; }
.kst-checkout-actions a { color:var(--gold-bright); text-decoration:none; font-size:.86rem; font-weight:700; }
.kst-checkout-actions a:hover { color:#F5E8CF; }
.kst-checkout-footnote { margin:22px 0 0; padding-top:18px; border-top:1px solid rgba(197,164,109,.16); color:var(--muted-2); font-size:.74rem; line-height:1.7; }
.kst-checkout-sidebar { display:grid; gap:16px; }
.kst-checkout-info-card { padding:23px; border:1px solid rgba(197,164,109,.18); border-radius:20px; background:linear-gradient(145deg,#1A1A1A,#111); }
.kst-info-kicker,.kst-checkout-support > span { color:var(--gold); font-size:.64rem; font-weight:800; letter-spacing:.16em; }
.kst-checkout-info-card h2,.kst-checkout-info-card h3 { margin:9px 0 18px; color:var(--text); font:700 1.3rem "Playfair Display",Georgia,serif; }
.kst-checkout-steps { display:grid; gap:17px; margin:0; padding:0; list-style:none; }
.kst-checkout-steps li { display:grid; grid-template-columns:33px 1fr; gap:12px; }
.kst-checkout-steps li > span { display:grid; width:31px; height:31px; place-items:center; border:1px solid rgba(197,164,109,.32); border-radius:50%; color:var(--gold-bright); font-size:.66rem; font-weight:800; }
.kst-checkout-steps strong { color:var(--text-soft); font-size:.84rem; }
.kst-checkout-steps p { margin:3px 0 0; color:var(--muted); font-size:.76rem; line-height:1.6; }
.kst-checkout-security ul { display:grid; gap:10px; margin:0; padding-left:18px; color:var(--muted); font-size:.78rem; line-height:1.65; }
.kst-checkout-security li::marker { color:var(--gold); }
.kst-checkout-support { padding:21px 23px; border:1px solid rgba(197,164,109,.26); border-radius:18px; background:rgba(197,164,109,.055); }
.kst-checkout-support p { margin:8px 0 12px; color:var(--muted); font-size:.8rem; line-height:1.65; }
.kst-checkout-support a { color:var(--gold-bright); font-size:.82rem; font-weight:800; }
.ks-footer { padding:22px; border-top:1px solid rgba(197,164,109,.13); color:var(--muted-2); text-align:center; font-size:.75rem; }
@media(max-width:820px) { .kst-checkout-layout { grid-template-columns:1fr; } .kst-checkout-sidebar { grid-template-columns:1fr 1fr; } .kst-checkout-support { grid-column:1/-1; } }
@media(max-width:650px) {
  .announcement-inner { align-items:flex-start; flex-direction:column; padding-block:8px; }
  .announcement-inner p { max-width:100%; font-size:.62rem; }
  .account-topbar { width:100%; justify-content:flex-start; }
  .account-top-link { min-height:30px; padding:7px 11px; font-size:.68rem; }
  .hero-content h1 { max-width:600px; font-size:clamp(2.7rem,11.5vw,4.25rem); line-height:1.04; }
  .section-title { font-size:clamp(2rem,8vw,3rem); }
  .kst-checkout-header { align-items:flex-start; flex-direction:column; padding:15px 18px; }
  .kst-checkout-header nav { gap:13px; font-size:.76rem; }
  .kst-checkout-shell { padding-top:38px; }
  .kst-checkout-sidebar { grid-template-columns:1fr; }
  .kst-checkout-support { grid-column:auto; }
  .kst-checkout-state-row { align-items:flex-start; flex-direction:column; }
  .kst-invoice-details div { align-items:flex-start; flex-direction:column; gap:4px; }
  .kst-invoice-details strong { text-align:left; }
}
@media(max-width:380px) { .kst-checkout-shell { width:calc(100% - 24px); } .kst-checkout-card { padding:21px 16px; } }
@media (max-width:980px) {
  .primary-nav { background:rgba(9,9,9,.99); box-shadow:0 18px 42px rgba(0,0,0,.48); }
  .primary-nav .nav-link,.primary-nav .nav-login,.primary-nav .nav-dropdown-toggle { color:#E8D8B5; }
  .nav-dropdown-menu { background:#171717; }
}
@media (max-width:760px) { .site-footer { background:#050505; } }

/* Final subpage header override (keeps the earlier legacy !important layer neutral). */
.ks-inner > header {
  background:rgba(9,9,9,.94)!important;
  border-bottom-color:rgba(197,164,109,.17)!important;
}
.ks-inner > header a span:first-child { color:#C5A46D!important; }
.ks-inner > header a span:last-child { color:#E8D8B5!important; }
.ks-inner > header nav a { color:#E8D8B5!important; }
.ks-inner > .kst-checkout-header { background:rgba(9,9,9,.94)!important; border-bottom-color:rgba(197,164,109,.17)!important; }
.ks-inner > .kst-checkout-header .kst-checkout-brand span { color:#E8D8B5!important; }
.ks-inner > .kst-checkout-header nav a { color:#E8D8B5!important; }


/* Password visibility controls */
.auth-form .password-input-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.auth-form .password-input-wrap input {
  display: block;
  width: 100%;
  padding-right: 76px;
}
.auth-form .password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 1;
  transform: translateY(-50%);
  border: 0;
  border-radius: 7px;
  padding: 6px 7px;
  background: transparent;
  color: #E8D8B5;
  font: 700 .78rem "DM Sans",sans-serif;
  cursor: pointer;
}
.auth-form .password-toggle:hover { color: #F5F2EB; }
.auth-form .password-toggle:focus-visible {
  outline: 2px solid #E8D8B5;
  outline-offset: 2px;
}