:root {
  /* Surface + ink */
  --ink-950: #07111f;
  --ink-900: #0b1323;
  --ink-800: #111d33;
  --panel: rgba(13, 25, 43, 0.86);
  --panel-strong: rgba(11, 19, 35, 0.94);
  --line: rgba(255, 255, 255, 0.10);
  --text: #eef4ff;
  --muted: #aebed6;
  --green: #00b619;
  --green-soft: rgba(0, 182, 25, 0.18);
  --sand: #d9c48f;
  --cyan: #74d7ff;
  --gold: #f4db9a;
  --violet: #7eb9ff;

  /* Geometry */
  --shadow: 0 24px 60px rgba(1, 9, 20, 0.28);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  /* Containers — body and hero share the same width so content aligns. */
  --shell-max: 1180px;
  --shell: min(var(--shell-max), calc(100vw - 2rem));

  /* Spacing scale (4pt) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;

  /* Type scale */
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.88rem);
  --step-0:  clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --step-1:  clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --step-2:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-3:  clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --step-4:  clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --step-5:  clamp(2.5rem, 2rem + 2.2vw, 4rem);

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  background: #0f172a;
  font: 17px/1.8 "Trebuchet MS", "Segoe UI", sans-serif;
  min-height: 100vh;
}

body.ar {
  font-family: Tahoma, "Segoe UI", sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(18px);
  background: rgba(7, 17, 31, 0.72);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand img {
  width: 160px;
  height: 160px;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--muted);
  padding: 0.7rem 0.95rem;
  border-radius: 999px;
  transition: 180ms ease;
}

.site-nav a:hover,
.site-nav a.is-active,
.site-nav .lang-pill {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.site-nav .lang-pill {
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.mega-dropdown {
  position: relative;
}

.stats-shell {
  padding: 4rem 0;
}
.rich-expert-takeaway {
  background: var(--panel-strong);
  border-left: 4px solid var(--green);
  padding: 2rem;
  border-radius: 12px;
  margin: 2rem 0;
  box-shadow: var(--shadow);
}
.rich-expert-takeaway h3 {
  color: var(--green);
  margin-top: 0;
}
.rich-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}
.rich-feature-card {
  background: rgba(255, 255, 255, 0.03);
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.rich-feature-card h4 {
  color: var(--sand);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.rich-process-timeline {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-left: 20px;
  border-left: 2px dashed rgba(255,255,255,0.2);
  margin: 3rem 0;
}
.rich-timeline-step {
  position: relative;
}
.rich-timeline-step::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 8px;
  width: 14px;
  height: 14px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--green);
}
.rich-timeline-step strong {
  color: #fff;
  font-size: 1.15rem;
  display: block;
}
.rich-data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
}
.rich-data-table th, .rich-data-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.rich-data-table th {
  background: rgba(0, 182, 25, 0.08);
  color: var(--sand);
}
body[dir="rtl"] .rich-expert-takeaway {
  border-left: none;
  border-right: 4px solid var(--green);
}
body[dir="rtl"] .rich-process-timeline {
  padding-left: 0;
  padding-right: 20px;
  border-left: none;
  border-right: 2px dashed rgba(255,255,255,0.2);
}
body[dir="rtl"] .rich-timeline-step::before {
  left: auto;
  right: -28px;
}
body[dir="rtl"] .rich-data-table th, body[dir="rtl"] .rich-data-table td {
  text-align: right;
}

.mega-content {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--panel-strong);
  min-width: 650px;
  box-shadow: 0px 14px 28px rgba(0,0,0,0.6);
  z-index: 100;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 1.5rem;
  top: 100%;
  margin-top: 0;
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.mega-column strong {
  display: block;
  color: var(--sand);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mega-column a {
  color: var(--text) !important;
  padding: 8px 4px !important;
  text-decoration: none;
  display: block;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.mega-column a:hover {
  background-color: rgba(255, 255, 255, 0.06);
  padding-left: 10px !important;
}
.mega-dropdown:hover .mega-content {
  display: block;
}
body[dir="rtl"] .mega-content {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}
@media (max-width: 1024px) {
  .mega-content {
    position: static;
    transform: none !important;
    min-width: 100%;
    margin-top: 0;
  }
  .mega-grid {
    grid-template-columns: 1fr;
  }
}
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  left: 30px;
  background-color: #25d366;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  color: #fff;
  text-decoration: none;
}
.whatsapp-float svg {
  width: 34px;
  height: 34px;
}
.whatsapp-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.6);
}
.whatsapp-float .whatsapp-text {
  display: none;
}



.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  padding: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: var(--text);
  border-radius: 999px;
}

.hero-shell,
.breadcrumbs,
.content-layout,
.faq-shell,
.cta-shell {
  padding-block: 1.35rem;
}

.hero-shell {
  padding-top: 2.25rem;
}

.hero-card,
.article-surface,
.info-card,
.cta-banner {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(250px, 0.7fr);
  gap: 1.4rem;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: linear-gradient(155deg, rgba(20, 33, 57, 0.97), rgba(8, 18, 34, 0.96));
}

.hero-copy h1,
.section-heading h2,
.info-card h2,
.cta-banner h2,
.article-surface h1,
.article-surface h2,
.article-surface h3 {
  font-family: Georgia, "Times New Roman", serif;
}

body.ar .hero-copy h1,
body.ar .section-heading h2,
body.ar .info-card h2,
body.ar .cta-banner h2,
body.ar .article-surface h1,
body.ar .article-surface h2,
body.ar .article-surface h3 {
  font-family: Tahoma, "Segoe UI", sans-serif;
}

.eyebrow,
.card-label {
  color: var(--sand);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  margin: 0 0 0.65rem;
}

.hero-copy h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.08;
  margin: 0;
}

.hero-copy .lede {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 62ch;
  margin: 1rem 0 0;
}

.hero-actions,
.cta-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.15rem;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  background: var(--green);
  color: #04100a;
  box-shadow: 0 12px 32px rgba(0, 182, 25, 0.28);
}

.button-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-side {
  display: grid;
  gap: 0.9rem;
}

.metric-card {
  padding: 1rem 1.15rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.metric-card span {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--green);
}

.metric-card small {
  color: var(--muted);
}

.breadcrumbs nav {
  font-size: 0.95rem;
  color: var(--muted);
}

.breadcrumbs a {
  color: var(--sand);
}

/* Body content shares the hero's horizontal width so hero and article
   edges line up on every page. The inner article is capped on very wide
   screens for reading comfort, but never narrower than the side padding. */
.content-layout {
  display: block;
  max-width: none;
  padding-inline: 0;
}

.content-layout .article-surface {
  max-width: min(100%, 960px);
  margin-inline: auto;
}

.content-layout.has-sidepanel {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 1.2rem;
}

.article-surface,
.info-card {
  border-radius: var(--radius-xl);
  background: var(--panel);
}

.article-surface {
  padding: clamp(1.3rem, 2.5vw, 2rem);
}

.info-card {
  padding: 1.15rem 1.15rem 1.25rem;
}

.side-panel {
  display: grid;
  gap: 1rem;
  align-self: start;
  position: sticky;
  top: 96px;
}

.article-surface > :first-child {
  margin-top: 0;
}

.article-surface h1,
.article-surface h2,
.article-surface h3 {
  color: var(--text);
  line-height: 1.16;
  margin: 1.6rem 0 0.8rem;
}

.article-surface p,
.article-surface li,
.article-surface td,
.article-surface th,
.article-surface figcaption,
.article-surface blockquote {
  color: #d8e2f0;
}

.article-surface p,
.article-surface ul,
.article-surface ol,
.article-surface table,
.article-surface figure,
.article-surface blockquote {
  margin: 0 0 1rem;
}

.article-surface ul,
.article-surface ol {
  padding-inline-start: 1.25rem;
}

.article-surface img {
  border-radius: 18px;
  margin-block: 1rem;
  width: 100%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.article-surface table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.article-surface th,
.article-surface td {
  padding: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: start;
}

.article-surface blockquote {
  padding: 1rem 1.15rem;
  border-inline-start: 4px solid var(--green);
  background: rgba(0, 182, 25, 0.08);
  border-radius: 0 16px 16px 0;
}

.article-surface a {
  color: #9ed8ff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.fact-list,
.footer-grid ul,
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fact-list li,
.footer-grid li,
.related-list li {
  position: relative;
  padding-inline-start: 1rem;
  margin-top: 0.6rem;
  color: var(--muted);
}

.fact-list li::before,
.footer-grid li::before,
.related-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--green);
  position: absolute;
  inset-inline-start: 0;
  top: 0.75rem;
}

.faq-grid {
  display: grid;
  gap: 0.85rem;
}

.faq-item {
  padding: 1rem 1.15rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-item h3 {
  margin: 0 0 0.45rem;
  font-size: 1.1rem;
}

.faq-item p {
  margin: 0;
  color: var(--muted);
}

.cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.4rem clamp(1.2rem, 2.8vw, 2rem);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(14, 28, 48, 0.97), rgba(7, 17, 31, 0.96));
}

.section-heading {
  margin-bottom: 1rem;
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.mini-card {
  border-radius: var(--radius-lg);
  padding: 1rem 1.05rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.mini-card h3 {
  margin: 0 0 0.55rem;
  font-size: 1.1rem;
}

.mini-card p {
  margin: 0;
  color: var(--muted);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.service-card p {
  flex: 1 1 auto;
}

.service-card-link {
  color: var(--green);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  margin-top: 0.35rem;
}

.service-card-link:hover {
  text-decoration: underline;
}

.service-group + .service-group {
  margin-top: 2.5rem;
}

/* Listing grid — strict 3 / 2 / 1 column responsive layout for
   universities, language institutes, trips, and any future collection. */
.study-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-5) 0 0;
}
@media (max-width: 1024px) {
  .study-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .study-card-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

.study-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 220ms var(--ease),
              border-color 220ms var(--ease),
              box-shadow 220ms var(--ease);
}
.study-card:hover,
.study-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 24px 48px rgba(2, 8, 18, 0.32);
}
.study-card__media {
  display: block;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}
.study-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.4rem;
  background: #fff;
  transition: transform 400ms var(--ease);
}
.study-card:hover .study-card__media img {
  transform: scale(1.04);
}
.study-card__body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1 1 auto;
}
.study-card__badge {
  align-self: flex-start;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
  background: rgba(217, 196, 143, 0.12);
  border: 1px solid rgba(217, 196, 143, 0.25);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.study-card__body h3 {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.25;
}
.study-card__body h3 a {
  color: var(--text);
  text-decoration: none;
}
.study-card__body h3 a:hover {
  color: var(--green);
}
.study-card__body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  flex: 1 1 auto;
}
.study-card__cta {
  margin-top: 0.4rem;
  color: var(--green);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  align-self: flex-start;
}
.study-card__cta:hover,
.study-card__cta:focus-visible {
  text-decoration: underline;
}

.site-footer {
  padding: 2rem 0 2.8rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.9fr;
  gap: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.footer-brand {
  margin-bottom: 0.9rem;
}

.footer-title {
  margin: 0 0 0.65rem;
  font-weight: 700;
  color: var(--sand);
}

body.page-general,
body.page-contact,
body.page-social,
body.page-content,
body.page-video {
  --green: #43dd86;
  --green-soft: rgba(67, 221, 134, 0.18);
  --sand: #f0d18f;
}

body.page-seo {
  --green: #41db87;
  --green-soft: rgba(65, 219, 135, 0.18);
  --sand: #b8f3ce;
}

body.page-web {
  --green: #54d4ff;
  --green-soft: rgba(84, 212, 255, 0.18);
  --sand: #b6efff;
}

body.page-software,
body.page-article {
  --green: #7db8ff;
  --green-soft: rgba(125, 184, 255, 0.18);
  --sand: #cfe2ff;
}

body.page-study {
  --green: #ffc857;
  --green-soft: rgba(255, 200, 87, 0.18);
  --sand: #ffe5ad;
}

/* Root homepage: slightly warmer accent so the agency/root home feels
   distinct from the study vertical without changing the design system. */
body.page-home {
  --green: #21d87a;
  --green-soft: rgba(33, 216, 122, 0.20);
  --sand: #e7d6a1;
}
body.page-home .hero-copy h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
}
@media (min-width: 961px) {
  body.page-home .hero-card {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
  body.page-home .hero-visual img {
    max-width: 380px;
    max-height: 300px;
  }
}

body.page-app {
  --green: #f3c870;
  --green-soft: rgba(243, 200, 112, 0.18);
  --sand: #ffe6af;
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
  filter: blur(22px);
  opacity: 0.65;
}

body::before {
  width: min(38vw, 420px);
  height: min(38vw, 420px);
  top: 8vh;
  inset-inline-start: -5vw;
  background: radial-gradient(circle, var(--green-soft) 0%, transparent 70%);
}

body::after {
  width: min(32vw, 360px);
  height: min(32vw, 360px);
  bottom: 7vh;
  inset-inline-end: -4vw;
  background: radial-gradient(circle, rgba(116, 215, 255, 0.15) 0%, transparent 72%);
}

.site-header {
  box-shadow: 0 18px 40px rgba(3, 8, 18, 0.22);
}

.site-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}

.brand span {
  font-size: 0.98rem;
}

.site-nav a {
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 18px;
  bottom: 10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--sand));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a.is-active::after,
.site-nav .lang-pill::after {
  transform: scaleX(1);
}

.hero-card {
  position: relative;
  overflow: hidden;
  gap: 1.7rem;
  padding: clamp(1.5rem, 3vw, 2.7rem);
  background:
    linear-gradient(135deg, rgba(10, 22, 39, 0.98) 0%, rgba(17, 31, 53, 0.96) 54%, rgba(7, 15, 27, 0.98) 100%);
}

.hero-card::before,
.hero-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}

.hero-card::before {
  width: 280px;
  height: 280px;
  top: -80px;
  inset-inline-end: -50px;
  background: none;
}

.hero-card::after {
  width: 220px;
  height: 220px;
  bottom: -70px;
  inset-inline-start: 42%;
  background: radial-gradient(circle, rgba(244, 219, 154, 0.13) 0%, transparent 72%);
}

.hero-copy,
.hero-side,
.hero-visual {
  position: relative;
  z-index: 1;
}

.hero-copy .lede {
  font-size: 1.08rem;
}

.hero-visual {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-visual img {
  width: 100%;
  height: auto;
  max-width: 440px;
  max-height: 340px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(2, 8, 18, 0.5);
}

.hero-card {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
}

@media (max-width: 960px) {
  .hero-card--with-image .hero-visual {
    order: -1;
    margin-bottom: 0.5rem;
  }
  .hero-visual img {
    max-height: 240px;
  }
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1rem;
}

.hero-points span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--text);
  font-size: 0.92rem;
}

.hero-side {
  grid-template-rows: auto 1fr;
  gap: 0.95rem;
}

.spotlight-card {
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
}

.spotlight-card h2 {
  margin: 0 0 0.45rem;
  font-size: 1.4rem;
  line-height: 1.1;
}

.spotlight-card p:last-child {
  margin: 0;
  color: var(--muted);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.metrics-grid .metric-card:last-child {
  grid-column: 1 / -1;
}

.metric-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(10px);
}

.breadcrumbs nav {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.content-layout {
  gap: 1.35rem;
}

.article-surface,
.info-card,
.faq-item,
.mini-card,
.cta-banner {
  position: relative;
  overflow: hidden;
}

.article-surface {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    linear-gradient(160deg, rgba(16, 30, 52, 0.94), rgba(10, 21, 38, 0.96));
}

.article-surface::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}

.article-surface > section {
  padding: 1.15rem 0 1.05rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.article-surface > section:last-child {
  border-bottom: 0;
}

.article-surface h2 {
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
}

.article-surface h3 {
  font-size: 1.22rem;
}

.article-surface h2::after,
.article-surface h3::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 999px;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  background: linear-gradient(90deg, var(--green), var(--sand));
}

.article-surface img {
  box-shadow: 0 18px 40px rgba(2, 8, 18, 0.22);
}

.article-surface table {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.article-surface blockquote {
  border-inline-start-color: var(--green);
  background: linear-gradient(135deg, var(--green-soft), rgba(255, 255, 255, 0.02));
}

.info-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03)),
    linear-gradient(155deg, rgba(16, 28, 48, 0.95), rgba(9, 19, 33, 0.96));
}

.related-list a {
  display: inline-flex;
  padding-block: 0.15rem;
  color: var(--text);
}

.faq-item,
.mini-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
    linear-gradient(155deg, rgba(14, 27, 47, 0.95), rgba(8, 17, 31, 0.96));
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.faq-item:hover,
.mini-card:hover,
.info-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 20px 48px rgba(2, 8, 18, 0.18);
}

.mini-card h3 a {
  text-decoration: none;
}

.mini-card::after,
.faq-item::after,
.info-card::after {
  content: "";
  position: absolute;
  inset-inline-end: -24px;
  top: -24px;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--green-soft) 0%, transparent 74%);
  pointer-events: none;
}

.cta-banner {
  border-color: rgba(255, 255, 255, 0.12);
}

.site-footer {
  margin-top: 0.8rem;
}

.footer-grid {
  padding-top: 1.5rem;
}

.reveal {
  animation: rise 500ms ease both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 960px) {
  .hero-card,
  .content-layout,
  .footer-grid,
  .cta-banner {
    grid-template-columns: 1fr !important;
    display: grid;
  }
  .hero-visual { order: -1; }
  .hero-visual img { max-height: 240px; width: 100%; }

  .side-panel {
    position: static;
  }

  .metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .metrics-grid .metric-card:last-child {
    grid-column: auto;
  }
}

@media (max-width: 1024px) {
  .nav-toggle {
    display: block;
  }

  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 1rem;
    top: calc(100% + 0.75rem);
    flex-direction: column;
    align-items: stretch;
    padding: 0.85rem;
    border-radius: 18px;
    background: rgba(8, 18, 33, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow);
    max-height: 80vh;
    overflow-y: auto;
  }

  .site-nav.is-open {
    display: flex;
  }

  .hero-copy h1 {
    font-size: clamp(1.9rem, 9vw, 3rem);
  }

  .article-surface,
  .info-card,
  .hero-card,
  .cta-banner {
    border-radius: 22px;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .hero-points span {
    width: 100%;
    justify-content: center;
  }

  .breadcrumbs nav {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .grid-cards {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .article-surface,
  .info-card {
    padding: 1.1rem;
  }

  .article-surface table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .whatsapp-float {
    width: 52px;
    height: 52px;
    bottom: 20px;
    left: 16px;
  }

  .hero-points span {
    font-size: 0.86rem;
  }

  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    animation: none;
  }
}

/* =========================================================================
   AEO / SEO blocks: TL;DR summary, semantic FAQ, body images
   ========================================================================= */

.tldr {
  margin: 0 auto var(--space-5);
  max-width: min(100%, 960px);
  padding: var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(145deg, rgba(0, 182, 25, 0.10), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tldr .tldr__label {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
  margin: 0 0 var(--space-2);
}
.tldr p {
  margin: 0 0 var(--space-3);
  color: var(--text);
  font-size: var(--step-0);
  line-height: 1.7;
}
.tldr ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}
.tldr li {
  position: relative;
  padding-inline-start: 1.2rem;
  color: var(--muted);
}
.tldr li::before {
  content: "";
  position: absolute;
  top: 0.65rem;
  inset-inline-start: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green);
}

/* Content-image helper: lazy, rounded, captioned body figures */
.content-image {
  margin: var(--space-5) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 18px 40px rgba(2, 8, 18, 0.22);
}
.content-image img,
.content-image picture {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.content-image figcaption {
  padding: var(--space-3) var(--space-4);
  color: var(--muted);
  font-size: 0.9rem;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.15);
}

/* Semantic FAQ using <details>/<summary> — AI engines extract these
   reliably and users get progressive disclosure on small screens. */
.faq-grid {
  display: grid;
  gap: var(--space-3);
}
.faq-item[open] {
  border-color: rgba(255, 255, 255, 0.18);
}
.faq-item > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text);
}
body.ar .faq-item > summary {
  font-family: Tahoma, "Segoe UI", sans-serif;
}
.faq-item > summary::-webkit-details-marker {
  display: none;
}
.faq-item > summary::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--green);
  transition: transform 220ms var(--ease);
  flex: 0 0 auto;
}
.faq-item[open] > summary::after {
  content: "–";
}
.faq-item > p,
.faq-item > div {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  line-height: 1.75;
}

/* Hero variants: `split` is the default two-column; `centered` is
   hero-title above a visual; `banner` is a wide image behind the copy. */
.hero-shell--centered .hero-card {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
}
.hero-shell--centered .hero-copy,
.hero-shell--centered .hero-visual {
  margin-inline: auto;
}
.hero-shell--centered .hero-actions,
.hero-shell--centered .hero-points {
  justify-content: center;
}
.hero-shell--banner .hero-card {
  grid-template-columns: minmax(0, 1fr);
  min-height: 320px;
  padding: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
  background:
    linear-gradient(135deg, rgba(7, 17, 31, 0.78), rgba(7, 17, 31, 0.55)),
    var(--hero-image, linear-gradient(135deg, rgba(10, 22, 39, 0.98), rgba(7, 15, 27, 0.98)));
  background-size: cover;
  background-position: center;
}
.hero-shell--banner .hero-visual {
  display: none;
}
.hero-shell--stacked .hero-card {
  grid-template-columns: minmax(0, 1fr);
}
.hero-shell--stacked .hero-visual {
  order: -1;
}

/* Listing intro — summary + stat ribbon shown above the card grid. */
.listing-intro {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.listing-intro .listing-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.listing-intro .listing-stat {
  padding: var(--space-3) var(--space-4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}
.listing-intro .listing-stat strong {
  color: var(--text);
  margin-inline-end: 0.35rem;
}

/* Timeline: now semantic <ol> with reset counters so CSS counters render
   the step number in the accent colour instead of the default numeral. */
ol.rich-process-timeline {
  list-style: none;
  counter-reset: step;
  padding-inline-start: 20px;
}
ol.rich-process-timeline .rich-timeline-step {
  counter-increment: step;
}
ol.rich-process-timeline .rich-timeline-step::before {
  content: counter(step);
  font-weight: 800;
  color: #04100a;
  background: var(--green);
  border-radius: 999px;
  width: 22px;
  height: 22px;
  left: -33px;
  top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  box-shadow: none;
}

/* Contact form (previously inlined as style attrs) */
.contact-form-container {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--panel);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.contact-form-container h3 {
  margin-top: 0;
  font-size: 1.4rem;
}
.contact-form-container form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.contact-form-container input,
.contact-form-container textarea {
  padding: var(--space-4);
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
}
.contact-form-container textarea {
  min-height: 140px;
  resize: vertical;
}
.contact-form-container button {
  align-self: flex-start;
}

/* Video embed — replaces the inline-style wrapper */
.video-embed {
  position: relative;
  padding-top: 56.25%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--space-5) 0;
  border: 1px solid var(--line);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Listing "all N entities →" link wrapper */
.listing-more {
  margin-top: var(--space-5);
}

/* Study CTA wraps the cta-banner in section context; top spacing lives here
   so the banner itself stays geometrically identical across routes. */
.study-cta {
  margin-top: var(--space-6);
}

/* Fee-table note */
.fees-note {
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: 0.95rem;
}
.fees-note em {
  font-style: italic;
}

/* Focus visibility — essential for keyboard + accessibility scores */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================================
   Landing-page sections: feature icons, steps, benefits, testimonials, pair
   ========================================================================= */

/* Icon/number feature grid (Why Malaysia, Student Benefits) */
.feature-icons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (max-width: 1024px) { .feature-icons { grid-template-columns: 1fr; } }
@media (max-width: 640px)  { .feature-icons { gap: var(--space-4); } }

.feature-icons .feature {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(155deg, rgba(14,27,47,0.94), rgba(8,17,31,0.96));
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
  overflow: hidden;
}
.feature-icons .feature:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: 0 24px 48px rgba(2, 8, 18, 0.32);
}
.feature-icons .feature__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--green-soft), transparent 70%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: var(--space-4);
  color: var(--green);
}
.feature-icons .feature h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--step-1);
  line-height: 1.25;
}
.feature-icons .feature p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* Stat ribbon right under the Why block */
.stat-ribbon {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
}
@media (max-width: 760px) { .stat-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-ribbon .stat {
  text-align: center;
}
.stat-ribbon .stat strong {
  display: block;
  font-size: var(--step-3);
  line-height: 1.05;
  color: var(--green);
  font-weight: 800;
}
.stat-ribbon .stat span {
  color: var(--muted);
  font-size: 0.88rem;
}

/* How It Works — numbered vertical rail (mobile) → horizontal 4-column (desktop) */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
  counter-reset: step-counter;
}
@media (max-width: 1024px) { .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .steps-grid { grid-template-columns: 1fr; } }

.steps-grid .step {
  position: relative;
  padding: var(--space-5);
  padding-top: calc(var(--space-5) + 18px);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  counter-increment: step-counter;
}
.steps-grid .step::before {
  content: counter(step-counter);
  position: absolute;
  top: -14px;
  inset-inline-start: var(--space-5);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #04100a;
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 10px 24px rgba(0, 182, 25, 0.35);
}
.steps-grid .step h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--step-1);
  line-height: 1.25;
}
.steps-grid .step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Benefits — 2-col with checkmark bullets */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (max-width: 760px) { .benefits-grid { grid-template-columns: 1fr; } }
.benefits-grid .benefit {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
}
.benefits-grid .benefit__mark {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--green);
  color: #04100a;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.benefits-grid .benefit h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--step-0);
  font-weight: 700;
}
.benefits-grid .benefit p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Testimonial cards — 3-col on desktop */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (max-width: 1024px) { .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial-grid .quote {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(2, 8, 18, 0.18);
}
.testimonial-grid .quote::before {
  content: "C";
  position: absolute;
  top: -10px;
  inset-inline-start: var(--space-4);
  font-size: 4rem;
  line-height: 1;
  font-family: Georgia, serif;
  color: var(--green);
  opacity: 0.4;
}
.testimonial-grid .quote p {
  margin: 0 0 var(--space-4);
  color: var(--text);
  font-style: italic;
  line-height: 1.7;
}
.testimonial-grid .quote footer {
  color: var(--muted);
  font-size: 0.88rem;
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}
.testimonial-grid .quote footer strong {
  color: var(--text);
  display: block;
  font-style: normal;
}

/* Section-level intro paragraph directly under an h2 heading */
.section-intro {
  margin: 0 0 var(--space-5);
  color: var(--muted);
  font-size: var(--step-1);
  line-height: 1.7;
  max-width: 68ch;
}

/* Three-pillar grid (Web&App / Software&Hosting / Search&Growth) used on
   the root homepage's "What we build" section. */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (max-width: 1024px) { .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .pillar-grid { grid-template-columns: 1fr; } }

.pillar {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    linear-gradient(160deg, rgba(16, 30, 52, 0.95), rgba(10, 21, 38, 0.96));
  box-shadow: var(--shadow);
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.pillar:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 28px 56px rgba(2, 8, 18, 0.32);
}
.pillar__label {
  margin: 0 0 var(--space-2);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
}
.pillar__headline {
  margin: 0 0 var(--space-4);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-2);
  line-height: 1.2;
}
body.ar .pillar__headline {
  font-family: Tahoma, "Segoe UI", sans-serif;
}
.pillar__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pillar__list li {
  margin: 0;
  padding: 0;
}
.pillar__list li::before {
  content: none;
}
.pillar__list a {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
  text-decoration: none;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}
.pillar__list a:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(0, 182, 25, 0.35);
  transform: translateX(2px);
}
body.ar .pillar__list a:hover {
  transform: translateX(-2px);
}
.pillar__list a strong {
  color: var(--text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}
.pillar__list a span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}
.pillar__list a em {
  color: var(--green);
  font-style: normal;
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

/* Spotlight row — image-led service highlight cards (3-up on desktop) */
.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (max-width: 1024px) { .spotlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .spotlight-grid { grid-template-columns: 1fr; } }

.spotlight {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(16, 30, 52, 0.95), rgba(10, 21, 38, 0.96));
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.spotlight:hover,
.spotlight:focus-within {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 28px 56px rgba(2, 8, 18, 0.32);
}
.spotlight__media-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 12 / 7;
  background: rgba(255, 255, 255, 0.03);
}
.spotlight__media-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--ease);
}
.spotlight:hover .spotlight__media-link img {
  transform: scale(1.05);
}
.spotlight__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
}
.spotlight__badge {
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--green-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--green);
  border-radius: 999px;
  font-weight: 700;
}
.spotlight__body h3 {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.25;
}
.spotlight__body h3 a {
  color: var(--text);
  text-decoration: none;
}
.spotlight__body h3 a:hover {
  color: var(--green);
}
.spotlight__body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.6;
  flex: 1 1 auto;
}
.spotlight__cta {
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
  align-self: flex-start;
  font-size: 0.92rem;
}
.spotlight__cta:hover {
  text-decoration: underline;
}

/* Secondary vertical teaser (Study in Malaysia) — compact, deliberately
   styled to feel like a separate sub-brand, not another agency service. */
.secondary-vertical {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-5);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 88% 30%, rgba(255, 200, 87, 0.18), transparent 60%),
    linear-gradient(160deg, rgba(16, 30, 52, 0.95), rgba(10, 21, 38, 0.96));
}
@media (max-width: 900px) { .secondary-vertical { grid-template-columns: 1fr; } }
.secondary-vertical__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.secondary-vertical__copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}
.secondary-vertical__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  color: var(--muted);
  font-size: 0.9rem;
}
.secondary-vertical__stats strong {
  color: var(--text);
  margin-inline-end: 0.25rem;
  font-size: 1.1rem;
}
.secondary-vertical__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(2, 8, 18, 0.22);
}
.secondary-vertical__visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Testimonial variant: vertical stack when paired with a side image */
.testimonial-grid--stack {
  grid-template-columns: 1fr;
  margin-top: 0;
}

/* Two-up section-pair: copy + image side-by-side for content-rich sections */
.section-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  margin: var(--space-6) 0;
}
@media (max-width: 900px) { .section-pair { grid-template-columns: 1fr; } }
.section-pair--reverse .section-pair__copy { order: 2; }
.section-pair--reverse .section-pair__visual { order: 1; }
.section-pair__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(2, 8, 18, 0.22);
  background: rgba(255, 255, 255, 0.03);
}
.section-pair__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.section-pair__copy h2 {
  margin-top: 0;
}

/* Final CTA banner — full-bleed feel inside shell */
.cta-final {
  margin-top: var(--space-7);
  padding: clamp(1.8rem, 4vw, 3rem);
  border-radius: var(--radius-xl);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 30% 20%, var(--green-soft), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(217, 196, 143, 0.18), transparent 55%),
    linear-gradient(145deg, rgba(14, 28, 48, 0.97), rgba(7, 17, 31, 0.96));
  box-shadow: var(--shadow);
}
.cta-final h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-4);
  margin: 0 0 var(--space-3);
  line-height: 1.1;
}
body.ar .cta-final h2 {
  font-family: Tahoma, "Segoe UI", sans-serif;
}
.cta-final p {
  margin: 0 auto var(--space-5);
  max-width: 56ch;
  color: var(--muted);
}
.cta-final .cta-actions {
  justify-content: center;
}

/* Arabic fallback spans on English pages — author-original content shown
   when no English translation is available. Render in the Arabic font,
   flip to RTL inside its own inline box, and add a tiny unobtrusive tag
   so the reader can tell it is untranslated copy. */
.lang-fallback {
  font-family: Tahoma, "Segoe UI", sans-serif;
  unicode-bidi: isolate;
  direction: rtl;
  color: var(--text);
}
.lang-fallback::before {
  content: "AR";
  display: inline-block;
  margin-inline-end: 0.45rem;
  padding: 0.05rem 0.35rem;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: var(--sand);
  background: rgba(217, 196, 143, 0.12);
  border: 1px solid rgba(217, 196, 143, 0.30);
  border-radius: 999px;
  vertical-align: 0.12em;
  unicode-bidi: isolate;
  direction: ltr;
}
body.ar .lang-fallback::before {
  content: none;
}

/* Skip-link: visually hidden until focused */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.visually-hidden:focus,
.visually-hidden:focus-visible {
  position: fixed;
  top: var(--space-4);
  inset-inline-start: var(--space-4);
  width: auto;
  height: auto;
  padding: var(--space-3) var(--space-4);
  background: var(--green);
  color: #04100a;
  border-radius: var(--radius-md);
  font-weight: 700;
  z-index: 1000;
  clip: auto;
}

/* Stats ribbon — replaces the inline style attrs on the old hero-side block */
.stats-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 760px) {
  .stats-layout { grid-template-columns: 1fr; }
}
.stats-layout .spotlight-card {
  margin-bottom: 0;
}

/* Section wrapper defaults — let shell control width on every section */
.shell.content-layout,
.shell.related-shell,
.shell.faq-shell,
.shell.cta-shell,
.shell.stats-shell {
  width: var(--shell);
  max-width: var(--shell-max);
  margin-inline: auto;
}

/* Article images default to lazy; hero is handled separately */
.article-surface img {
  loading: lazy;
}

/* ── Mobile: rich-feature-grid single column on very small screens ── */
@media (max-width: 480px) {
  .rich-feature-grid {
    grid-template-columns: 1fr;
  }
  .rich-feature-card {
    padding: 1.2rem;
  }
  /* Prevent overflow of data tables on phones */
  .rich-data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  /* Process timeline legibility on small screens */
  .rich-process-timeline {
    padding-left: 16px;
    border-left-width: 2px;
  }
  .rich-timeline-step::before {
    left: -23px;
    width: 11px;
    height: 11px;
  }
  body[dir="rtl"] .rich-timeline-step::before {
    right: -23px;
  }
}

/* ── Content-image figcaption colour fix ── */
.content-image figcaption {
  color: var(--muted);
}

/* ── Prevent horizontal scroll bleed from article images ── */
.article-surface {
  overflow-x: hidden;
}

/* ── Stats layout (used on article pages below the article body) ── */
.stats-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 760px) {
  .stats-layout {
    grid-template-columns: 1fr;
  }
}

/* Blog showcase — replaces the old inline-styled block. 3/2/1 grid to
   match the rest of the design system. */
.blog-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (max-width: 1024px) {
  .blog-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .blog-showcase { grid-template-columns: 1fr; gap: var(--space-4); }
}
.blog-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.blog-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 48px rgba(2, 8, 18, 0.28);
}
.blog-card--featured {
  grid-column: 1 / -1;
  background:
    linear-gradient(135deg, rgba(0, 182, 25, 0.12), rgba(255, 255, 255, 0.03)),
    var(--panel);
}
.blog-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--space-3);
}
.blog-card__badge {
  align-self: flex-start;
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: var(--green-soft);
  color: var(--green);
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.blog-card__title {
  margin: 0;
  font-size: var(--step-2);
  line-height: 1.25;
}
.blog-card__title a {
  color: var(--text);
  text-decoration: none;
}
.blog-card__title a:hover {
  color: var(--green);
}
.blog-card__excerpt {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
  flex-grow: 1;
}
.blog-card__cta {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
}
.blog-card__cta:hover {
  text-decoration: underline;
}

/* =======================================================
   PRICING PAGE  v2.8
   ======================================================= */
.currency-switcher {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2rem auto 3rem;
}
.currency-pill {
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: #aebed6;
  cursor: pointer;
  font: 600 0.9rem Trebuchet MS, sans-serif;
  transition: 180ms ease;
}
.currency-pill:hover { background: rgba(255,255,255,0.06); color: #eef4ff; }
.currency-pill.active { background: #00b619; color: #000; border-color: #00b619; }
.pricing-section { margin-bottom: 4rem; }
.pricing-section__heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.pricing-section__icon { font-size: 1.8rem; width: 52px; height: 52px; display: grid; place-items: center; background: rgba(0,182,25,0.18); border-radius: 14px; flex-shrink: 0; }
.pricing-section__heading h2 { margin: 0; font-size: 1.3rem; }
.pricing-section__heading p { margin: 0.2rem 0 0; color: #aebed6; font-size: 0.88rem; }
.pricing-tier { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 860px) { .pricing-tier { grid-template-columns: 1fr; } }
.price-card { position: relative; background: rgba(13,25,43,0.86); border: 1px solid rgba(255,255,255,0.10); border-radius: 20px; padding: 1.75rem; display: flex; flex-direction: column; gap: 1.1rem; transition: border-color 200ms ease, transform 200ms ease; }
.price-card:hover { border-color: rgba(0,182,25,0.4); transform: translateY(-3px); }
.price-card--popular { border-color: #00b619; background: linear-gradient(160deg, rgba(0,182,25,0.08), rgba(13,25,43,0.86)); }
.price-card__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: #00b619; color: #000; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.25rem 0.85rem; border-radius: 999px; white-space: nowrap; }
.price-card__tier { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #aebed6; }
.price-card__price { display: flex; align-items: baseline; gap: 0.2rem; }
.price-card__symbol { font-size: 1.2rem; color: #d9c48f; font-weight: 600; }
.price-card__amount { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; color: #eef4ff; line-height: 1; }
.price-card__period { color: #aebed6; font-size: 0.85rem; }
.price-card__desc { color: #aebed6; font-size: 0.88rem; line-height: 1.55; margin: 0; }
.price-card__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.price-card__features li { font-size: 0.88rem; color: #aebed6; padding-left: 1.4rem; position: relative; }
.price-card__features li::before { content: "\2713"; position: absolute; left: 0; color: #00b619; font-weight: 700; }
.price-card .button { margin-top: auto; text-align: center; padding: 0.7rem 1rem; font-size: 0.9rem; }
body[dir="rtl"] .price-card__features li { padding-left: 0; padding-right: 1.4rem; }
body[dir="rtl"] .price-card__features li::before { left: auto; right: 0; }
body[dir="rtl"] .price-card__badge { transform: translateX(50%); }

/* =======================================================
   ABOUT PAGE
   ======================================================= */
.about-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2.5rem 0; }
@media (max-width: 640px) { .about-hero-stats { grid-template-columns: repeat(2, 1fr); } }
.about-stat { background: rgba(13,25,43,0.86); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 1.25rem; text-align: center; }
.about-stat strong { display: block; font-size: clamp(1.6rem, 3vw, 2.2rem); color: #00b619; font-weight: 700; }
.about-stat span { font-size: 0.83rem; color: #aebed6; }
.location-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2.5rem 0; }
@media (max-width: 760px) { .location-grid { grid-template-columns: 1fr; } }
.location-card { background: rgba(13,25,43,0.86); border: 1px solid rgba(255,255,255,0.10); border-radius: 20px; overflow: hidden; transition: border-color 200ms ease; }
.location-card:hover { border-color: rgba(0,182,25,0.4); }
.location-card__img { width: 100%; height: 180px; object-fit: cover; display: block; }
.location-card__body { padding: 1.5rem; }
.location-card__flag { font-size: 2rem; display: block; margin-bottom: 0.75rem; }
.location-card__country { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #00b619; margin-bottom: 0.25rem; }
.location-card__city { font-size: 1.3rem; font-weight: 700; color: #eef4ff; margin: 0 0 0.5rem; }
.location-card__role { color: #aebed6; font-size: 0.88rem; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin: 2rem 0; }
@media (max-width: 860px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-card { background: rgba(13,25,43,0.86); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; overflow: hidden; text-align: center; }
.team-card__photo { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.team-card__body { padding: 1rem 0.75rem; }
.team-card__name { font-weight: 700; font-size: 0.95rem; margin: 0 0 0.2rem; }
.team-card__role { color: #aebed6; font-size: 0.8rem; }
.team-card__location { color: #00b619; font-size: 0.75rem; margin-top: 0.3rem; }
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin: 2rem 0; }
@media (max-width: 600px) { .values-grid { grid-template-columns: 1fr; } }
.value-card { background: rgba(13,25,43,0.86); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 1.75rem; }
.value-card__icon { font-size: 2rem; display: block; margin-bottom: 0.75rem; }
.value-card h3 { margin: 0 0 0.5rem; color: #d9c48f; }
.value-card p { margin: 0; color: #aebed6; font-size: 0.9rem; line-height: 1.6; }

/* =======================================================
   PARTNERS PAGE
   ======================================================= */
.partners-section { margin-bottom: 4rem; }
.partners-section__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #00b619; margin-bottom: 0.5rem; }
.partners-section h2 { margin: 0 0 1.75rem; }
.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 760px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .partner-grid { grid-template-columns: 1fr; } }
.partner-card { background: rgba(13,25,43,0.86); border: 1px solid rgba(255,255,255,0.10); border-radius: 20px; padding: 1.75rem; display: flex; flex-direction: column; gap: 0.85rem; transition: border-color 200ms ease, transform 200ms ease; }
.partner-card:hover { border-color: rgba(0,182,25,0.35); transform: translateY(-2px); }
.partner-card--tech { border-color: rgba(126,185,255,0.2); }
.partner-card--tech:hover { border-color: rgba(126,185,255,0.55); }
.partner-card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); flex-shrink: 0; }
.partner-card__type { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.2rem 0.6rem; border-radius: 999px; display: inline-block; align-self: flex-start; }
.partner-card__type--tech { background: rgba(126,185,255,0.15); color: #7eb9ff; }
.partner-card__type--biz { background: rgba(0,182,25,0.18); color: #00b619; }
.partner-card__name { font-size: 1.1rem; font-weight: 700; margin: 0; }
.partner-card__desc { color: #aebed6; font-size: 0.88rem; line-height: 1.55; margin: 0; }
.partner-card__link { color: #00b619; font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.partner-card__link:hover { text-decoration: underline; }
.partnership-benefits { background: rgba(13,25,43,0.86); border: 1px solid rgba(255,255,255,0.10); border-radius: 28px; padding: clamp(2rem, 4vw, 3rem); margin: 3rem 0; }
.partnership-benefits h2 { margin-top: 0; }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
@media (max-width: 700px) { .benefits-grid { grid-template-columns: 1fr; } }
.benefit-item { display: flex; gap: 1rem; }
.benefit-item__icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 0.1rem; }
.benefit-item h3 { margin: 0 0 0.4rem; font-size: 1rem; color: #d9c48f; }
.benefit-item p { margin: 0; color: #aebed6; font-size: 0.87rem; line-height: 1.55; }

/* =======================================================
   PRICING — before/after & country notes  v2.81
   ======================================================= */
.price-card__price-wrap { display: flex; flex-direction: column; gap: 0.3rem; }
.price-card__before { display: flex; align-items: baseline; gap: 0.15rem; text-decoration: line-through; color: #aebed6; font-size: 0.88rem; opacity: 0.6; line-height: 1; }
.price-card__symbol-orig { font-size: 0.78rem; }
.price-card__amount-orig { font-size: 1rem; font-weight: 600; }
.price-card__period-orig { font-size: 0.78rem; margin-left: 0.1rem; }
.price-discount-badge {
  display: inline-block;
  background: #e74c3c;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.2rem;
  align-self: flex-start;
}
.price-card--popular .price-discount-badge { background: #fff; color: #007a0f; }
.country-note {
  margin-top: 1.5rem;
  background: rgba(0,182,25,0.07);
  border: 1px solid rgba(0,182,25,0.18);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.83rem;
  color: #00b619;
  min-height: 2.6rem;
}
.country-note:empty { display: none; }
body[dir="rtl"] .price-card__period-orig { margin-left: 0; margin-right: 0.1rem; }

/* =========================================================================
   v2.82 — Layout responsive fixes
   1. section-pair copy column wider (60/40) so feature-icons cards have room
   2. feature-icons inside section-pair collapses to 1 col earlier
   3. body.page-home .hero-card mobile stack override (specificity fix)
   ========================================================================= */

/* Fix 1 & 3: section-pair — wider copy column (60/40 instead of 50/50) */
.section-pair {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

/* Fix 2: feature-icons nested inside section-pair — collapse to 1 col so
   cards are not squeezed to ~25% container width */
.section-pair__copy .feature-icons {
  grid-template-columns: 1fr;
}

/* Fix 3: homepage hero mobile stack — handled by wrapping the desktop
   body.page-home .hero-card rule in min-width: 961px above. */
@media (max-width: 960px) {
  body.page-home .hero-visual {
    order: -1;
  }
  body.page-home .hero-visual img {
    max-width: 100%;
    max-height: 240px;
    margin: 0 auto;
  }
}

/* =========================================================================
   v2.84 — Multi-fix: logo, scroll-top, layout restructure, pricing buttons
   ========================================================================= */

/* Buttons: never show underline */
.button { text-decoration: none !important; }

/* Brand logo: larger */
.brand img { width: 160px; height: 160px; }

/* Scroll-to-top button */
.scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(13, 25, 43, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease, transform 200ms ease;
  box-shadow: 0 4px 16px rgba(2, 8, 18, 0.32);
}
.scroll-top.visible { opacity: 1; pointer-events: all; }
.scroll-top:hover { transform: translateY(-3px); }
@media (max-width: 1024px) {
  .scroll-top { width: 52px; height: 52px; bottom: 20px; right: 16px; }
}

/* Testimonials 3-col row */
.testimonial-3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-5) 0;
}
@media (max-width: 760px) { .testimonial-3col { grid-template-columns: 1fr; } }

/* Full-width image below testimonials / why-malaysia */
.testimonial-image,
.section-visual-full {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  margin-top: var(--space-4);
}
.testimonial-image img,
.section-visual-full img {
  display: block;
  width: 100%;
  max-height: 340px;
  object-fit: cover;
}

/* Bilingual engineering: 2x2 grid of 4 cards */
.feature-icons.grid-2x2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 600px) {
  .feature-icons.grid-2x2 { grid-template-columns: 1fr !important; }
}

/* Why Malaysia: 3-col row of features */
.feature-icons.why-3col {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 760px) {
  .feature-icons.why-3col { grid-template-columns: 1fr !important; }
}

/* Pricing buttons: better contrast */
.price-card .button-secondary {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--text);
}

/* v2.88: Force section-pair to single column on mobile (overrides the 1.6fr rule) */
@media (max-width: 900px) {
  .section-pair { grid-template-columns: 1fr !important; }
  /* On mobile show copy first, image below for --reverse sections */
  .section-pair--reverse .section-pair__copy { order: 1 !important; }
  .section-pair--reverse .section-pair__visual { order: 2 !important; }
}

/* section-visual-full: allow picture element to stretch */
.section-visual-full picture { display: block; width: 100%; }

/* v2.89: article-surface — transparent full-width, no card box */
.content-layout .article-surface {
  max-width: 100%;
  margin-inline: 0;
}
.article-surface {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* v2.89: Footer mobile */
@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-grid > div {
    padding-block: 1.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .footer-grid > div:last-child {
    border-bottom: none;
  }
  .footer-title {
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.8rem;
    margin-bottom: 0.8rem;
  }
}

/* Footer bottom bar */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  padding-top: 1rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}

/* v2.91: Cookie consent */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(7, 17, 31, 0.97);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 1rem 1.5rem;
  display: none; align-items: center; justify-content: space-between;
  gap: 1rem; z-index: 200; backdrop-filter: blur(16px);
}
.cookie-banner.visible { display: flex; flex-wrap: wrap; }
.cookie-banner p { margin: 0; color: var(--muted); font-size: 0.88rem; flex: 1; min-width: 240px; }
.cookie-banner a { color: var(--text); text-decoration: underline; }
.cookie-actions { display: flex; gap: 0.6rem; }
.cookie-actions .button { min-height: 36px; padding: 0.45rem 1rem; font-size: 0.83rem; }
@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; }
  .cookie-actions { width: 100%; }
  .cookie-actions .button { flex: 1; }
}

/* v2.91: WhatsApp contact form */
.wa-contact-section {
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--line);
  margin-top: 2rem;
}
.wa-form { display: grid; gap: 1.2rem; max-width: 720px; }
.wa-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 640px) { .wa-form__row { grid-template-columns: 1fr; } }
.wa-form__group { display: flex; flex-direction: column; gap: 0.45rem; }
.wa-form__group label { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.wa-form__group input,
.wa-form__group select,
.wa-form__group textarea {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md); color: var(--text);
  font: 15px/1.6 "Trebuchet MS","Segoe UI",sans-serif;
  padding: 0.7rem 0.9rem; outline: none;
  transition: border-color 160ms ease; -webkit-appearance: none;
}
.wa-form__group input:focus,
.wa-form__group select:focus,
.wa-form__group textarea:focus { border-color: var(--green); }
.wa-form__group select option { background: #0b1323; color: var(--text); }
.wa-form__submit { gap: 0.5rem; margin-top: 0.4rem; }

/* v2.91: 404 page */
.page-404 .hero-404 {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  min-height: 60vh; padding: 4rem 1rem;
}
.error-code {
  font-size: clamp(6rem, 20vw, 12rem); font-weight: 900;
  line-height: 1; color: var(--green); opacity: 0.18;
  font-family: Georgia, serif; letter-spacing: -0.04em;
  margin-bottom: -2rem; position: relative; z-index: 0;
}
.error-msg { position: relative; z-index: 1; }
.error-msg h1 { font-size: clamp(1.8rem, 5vw, 3rem); margin: 0 0 1rem; }
.error-msg p { color: var(--muted); max-width: 480px; margin: 0 auto 2rem; }
.error-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* v2.93: footer-bottom links */
.footer-bottom a {
  color: inherit;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 200ms ease;
}
.footer-bottom a:hover { opacity: 1; }