/* ========================================================================== 
   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}}