: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:
    radial-gradient(circle at top left, rgba(0, 182, 25, 0.14), transparent 34%),
    radial-gradient(circle at 85% 20%, rgba(217, 196, 143, 0.12), transparent 24%),
    linear-gradient(145deg, #091221 0%, #0a1527 48%, #07111f 100%);
  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.9rem 0;
}

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

.brand img {
  width: 48px;
  height: 48px;
  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: 800px) {
  .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:
    radial-gradient(circle at top right, rgba(0, 182, 25, 0.22), transparent 33%),
    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:
    radial-gradient(circle at left center, rgba(0, 182, 25, 0.2), transparent 26%),
    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);
}
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: radial-gradient(circle, var(--green-soft) 0%, transparent 72%);
}

.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;
    display: grid;
  }

  .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: 760px) {
  .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);
  }

  .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;
  }

  body.ar .whatsapp-float {
    left: auto;
    right: 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;
}

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