/* =====================================================================
   DataSquare design system v2 — shared tokens + public website
   Built on Bootstrap 5.3. Portals extend this in portal.css.
   ===================================================================== */
:root {
  --ds-primary: #2447d5;
  --ds-primary-600: #1b37ad;
  --ds-primary-700: #162c8a;
  --ds-primary-50: #eef2ff;
  --ds-primary-100: #dfe6ff;
  --ds-primary-rgb: 36, 71, 213;
  --ds-indigo: #5b5bf6;
  --ds-teal: #0d9488;
  --ds-teal-50: #e6f7f5;
  --ds-warm: #c2410c;
  --ds-warm-50: #fff4ec;
  --ds-green: #15803d;
  --ds-green-50: #eaf8ef;
  --ds-red: #b91c1c;
  --ds-red-50: #fdecec;
  --ds-violet: #6d28d9;
  --ds-violet-50: #f3efff;
  --ds-ink: #0b1224;
  --ds-body: #334155;
  --ds-muted: #64748b;
  --ds-line: #e6eaf2;
  --ds-line-strong: #d5dcea;
  --ds-bg: #ffffff;
  --ds-bg-alt: #f5f7fc;
  --ds-navy: #0a1233;
  --ds-grad: linear-gradient(135deg, #2447d5 0%, #3a4ff0 55%, #5b5bf6 100%);
  --ds-grad-dark: linear-gradient(135deg, #0a1233 0%, #13206b 60%, #2447d5 130%);
  --ds-radius: 16px;
  --ds-radius-sm: 12px;
  --ds-radius-lg: 24px;
  --ds-shadow-sm: 0 1px 2px rgba(11, 18, 36, .05);
  --ds-shadow: 0 1px 2px rgba(11, 18, 36, .04), 0 10px 30px -14px rgba(11, 18, 36, .16);
  --ds-shadow-lg: 0 24px 60px -24px rgba(11, 18, 36, .32);
  --ds-shadow-primary: 0 10px 24px -10px rgba(var(--ds-primary-rgb), .55);
  --ds-ease: cubic-bezier(.2, .7, .2, 1);

  --bs-primary: var(--ds-primary);
  --bs-primary-rgb: var(--ds-primary-rgb);
  --bs-link-color: var(--ds-primary);
  --bs-link-color-rgb: var(--ds-primary-rgb);
  --bs-link-hover-color: var(--ds-primary-600);
  --bs-link-hover-color-rgb: 27, 55, 173;
  --bs-body-font-family: var(--ds-font-body, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --bs-body-color: var(--ds-body);
  --bs-body-bg: var(--ds-bg);
  --bs-border-color: var(--ds-line);
  --bs-border-radius: .7rem;
  --bs-focus-ring-color: rgba(var(--ds-primary-rgb), .25);
}

html { scroll-behavior: smooth; }
body { font-size: .95rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ds-ink); letter-spacing: -.02em; line-height: 1.2; }
a { text-underline-offset: 3px; }
img { max-width: 100%; }
::selection { background: rgba(var(--ds-primary-rgb), .18); }
.ds-skip { position: absolute; top: 8px; left: 8px; z-index: 2000; background: #fff; padding: 8px 12px; border-radius: 8px; }
.text-gradient { background: var(--ds-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ds-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: .75rem; padding: .6rem 1.1rem; transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s var(--ds-ease); }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .8rem 1.45rem; font-size: 1rem; border-radius: .9rem; }
.btn-sm { padding: .38rem .8rem; font-size: .82rem; border-radius: .6rem; }
.btn-primary { --bs-btn-bg: var(--ds-primary); --bs-btn-border-color: var(--ds-primary); --bs-btn-hover-bg: var(--ds-primary-600);
  --bs-btn-hover-border-color: var(--ds-primary-600); --bs-btn-active-bg: var(--ds-primary-700); --bs-btn-active-border-color: var(--ds-primary-700);
  --bs-btn-disabled-bg: var(--ds-primary); --bs-btn-disabled-border-color: var(--ds-primary);
  background-image: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)); box-shadow: var(--ds-shadow-primary); }
.btn-primary:hover { box-shadow: 0 14px 28px -12px rgba(var(--ds-primary-rgb), .7); }
.btn-outline-primary { --bs-btn-color: var(--ds-primary); --bs-btn-border-color: rgba(var(--ds-primary-rgb), .3); --bs-btn-hover-bg: var(--ds-primary);
  --bs-btn-hover-border-color: var(--ds-primary); --bs-btn-active-bg: var(--ds-primary-600); --bs-btn-active-border-color: var(--ds-primary-600); }
.btn-outline-dark { --bs-btn-border-color: var(--ds-line-strong); --bs-btn-color: var(--ds-ink); --bs-btn-hover-bg: var(--ds-ink); --bs-btn-hover-border-color: var(--ds-ink); background: #fff; }
.btn-light { --bs-btn-bg: #f1f4fa; --bs-btn-border-color: #f1f4fa; --bs-btn-hover-bg: #e5eaf5; --bs-btn-hover-border-color: #e5eaf5; --bs-btn-color: var(--ds-ink); }
.btn-white { background: #fff; color: var(--ds-ink); border: 1px solid #fff; }
.btn-white:hover { background: #f1f4fa; color: var(--ds-primary); }
.btn-icon { border: 0; background: transparent; padding: .25rem .5rem; color: var(--ds-ink); }
.btn-link { text-decoration: none; }
.form-control, .form-select { border-radius: .7rem; padding: .62rem .9rem; border-color: #d7dde9; background-color: #fff; transition: border-color .2s, box-shadow .2s; }
.form-control::placeholder { color: #98a2b6; }
.form-control:hover, .form-select:hover { border-color: #c3cbdb; }
.form-control:focus, .form-select:focus { border-color: rgba(var(--ds-primary-rgb), .6); box-shadow: 0 0 0 .22rem rgba(var(--ds-primary-rgb), .14); }
.form-label { font-weight: 600; color: var(--ds-ink); font-size: .85rem; margin-bottom: .35rem; }
.form-check-input { border-color: #c3cbdb; }
.form-check-input:checked { background-color: var(--ds-primary); border-color: var(--ds-primary); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(var(--ds-primary-rgb), .15); }
.alert { border-radius: var(--ds-radius-sm); border-width: 1px; }
.pagination { --bs-pagination-border-radius: .6rem; --bs-pagination-active-bg: var(--ds-primary); --bs-pagination-active-border-color: var(--ds-primary); gap: .3rem; }
.pagination .page-link { border-radius: .6rem !important; min-width: 2.3rem; text-align: center; }

/* ---------- Utility bar + header ---------- */
.ds-utility { background: var(--ds-navy); color: rgba(255, 255, 255, .72); font-size: .8rem; }
.ds-utility .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.ds-utility a { color: rgba(255, 255, 255, .8); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.ds-utility a:hover { color: #fff; }
.ds-utility .ds-utility-links { display: flex; gap: 1.25rem; }
/* no backdrop-filter: it would trap the fixed offcanvas menu inside the header */
.ds-header { background: #fff; border-bottom: 1px solid var(--ds-line); transition: box-shadow .25s; }
.ds-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(11, 18, 36, .35); border-bottom-color: transparent; }
.ds-header .navbar { padding: .7rem 0; }
.ds-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.18rem; color: var(--ds-ink); text-decoration: none; letter-spacing: -.02em; white-space: nowrap; }
.ds-brand img { border-radius: 9px; }
.ds-brand:hover { color: var(--ds-ink); }
.ds-brand-light, .ds-brand-light:hover { color: #fff; }
.ds-header .ds-brand { margin-right: 1.5rem; }
.ds-header .nav-link { font-weight: 600; font-size: .9rem; color: var(--ds-body); padding: .5rem .75rem !important; border-radius: .6rem; white-space: nowrap; position: relative; }
.ds-header .nav-link:hover, .ds-header .nav-link:focus-visible, .ds-header .nav-link.show { color: var(--ds-primary); background: var(--ds-primary-50); }
.ds-header .nav-link.active { color: var(--ds-primary); }
.ds-header .dropdown-toggle::after { border: 0; content: "\F282"; font-family: "bootstrap-icons"; vertical-align: -.1em; font-size: .7rem; margin-left: .3rem; transition: transform .2s; display: inline-block; }
.ds-header .dropdown-toggle.show::after { transform: rotate(180deg); }
.ds-header-actions .btn { white-space: nowrap; }
@media (min-width: 1200px) {
  .ds-header .nav-link.active::before { content: ""; position: absolute; left: 50%; bottom: -.1rem; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background: var(--ds-grad); }
  .ds-nav-home { display: none; }                   /* the logo already links home on desktop */
  .ds-nav-verify { display: none; }                 /* shown in the utility bar on desktop */
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .ds-header .nav-link { padding: .5rem .42rem !important; font-size: .84rem; }
  .ds-header .dropdown-toggle::after { margin-left: .2rem; }
  .ds-header .ds-brand { margin-right: .6rem; font-size: 1.02rem; gap: .45rem; }
  .ds-header .ds-brand img { width: 30px; height: 30px; }
  .ds-header-actions { gap: .4rem !important; }
  .ds-header-actions .btn { padding: .45rem .7rem; font-size: .88rem; }
  .ds-header-actions .ds-hide-mid { display: none; }
}
.ds-dropdown { border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-lg); padding: .45rem; min-width: 14rem; }
.ds-dropdown .dropdown-item { border-radius: .55rem; padding: .55rem .75rem; font-weight: 500; font-size: .9rem; color: var(--ds-body); }
.ds-dropdown .dropdown-item .bi { color: var(--ds-muted); }
.ds-dropdown .dropdown-item:hover, .ds-dropdown .dropdown-item:focus { background: var(--ds-primary-50); color: var(--ds-primary); }
.ds-dropdown .dropdown-item:hover .bi { color: var(--ds-primary); }
@media (min-width: 1200px) { .ds-header .dropdown-menu.show:not(.ds-mega-menu) { animation: dsDropIn .16s var(--ds-ease); } }
@keyframes dsDropIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1199.98px) {
  .ds-header .offcanvas { max-width: 340px; }
  .ds-header .offcanvas-body { display: flex; flex-direction: column; }
  .ds-header .nav-link { padding: .75rem .85rem !important; font-size: .95rem; }
  .ds-dropdown { box-shadow: none; border: 0; padding: 0 0 .5rem .75rem; }
  .ds-header-actions { border-top: 1px solid var(--ds-line); padding-top: 1rem; margin-top: auto; }
}
.ds-breadcrumb-bar { background: var(--ds-bg-alt); border-bottom: 1px solid var(--ds-line); padding: .6rem 0; font-size: .83rem; }
.ds-breadcrumb-bar a { text-decoration: none; color: var(--ds-muted); }
.ds-breadcrumb-bar a:hover { color: var(--ds-primary); }
.ds-breadcrumb-bar .breadcrumb-item.active { color: var(--ds-ink); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { content: "\F285"; font-family: "bootstrap-icons"; font-size: .65rem; color: #a0aabf; padding-top: .2rem; }

/* ---------- Mega menu ---------- */
.ds-mega-menu { padding: 0; }
.ds-mega-inner { padding: 1.35rem; }
.ds-mega-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-muted); margin: 0 0 .6rem; }
.ds-mega-link { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: .6rem; color: var(--ds-ink); text-decoration: none; font-weight: 500; font-size: .9rem; line-height: 1.3; }
.ds-mega-link:hover, .ds-mega-link:focus { background: var(--ds-primary-50); color: var(--ds-primary); }
.ds-mega-link .ds-mega-count { margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--ds-muted); background: var(--ds-bg-alt); border-radius: 50rem; padding: .1rem .5rem; }
.ds-mega-link:hover .ds-mega-count { background: #fff; }
.ds-mega-ico { flex: 0 0 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ds-primary-50); color: var(--ds-primary); font-size: 1rem; transition: background .2s, color .2s; }
.ds-mega-link:hover .ds-mega-ico { background: var(--ds-primary); color: #fff; }
.ds-mega-tile { align-items: flex-start; padding: .65rem; }
.ds-mega-tile small { display: block; color: var(--ds-muted); font-weight: 400; font-size: .78rem; margin-top: .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ds-mega-side { background: var(--ds-bg-alt); border-radius: .85rem; padding: 1rem; height: 100%; }
.ds-mega-cert { display: block; padding: .5rem .6rem; border-radius: .55rem; text-decoration: none; color: var(--ds-ink); }
.ds-mega-cert:hover { background: #fff; color: var(--ds-primary); box-shadow: var(--ds-shadow-sm); }
.ds-mega-cert strong { display: block; font-size: .88rem; font-weight: 600; line-height: 1.3; }
.ds-mega-cert span { font-size: .75rem; color: var(--ds-muted); }
.ds-mega-foot { border-top: 1px solid var(--ds-line); padding: .8rem 1.35rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: center; font-size: .85rem; background: #fbfcff; border-radius: 0 0 var(--ds-radius) var(--ds-radius); }
.ds-mega-foot a { font-weight: 600; text-decoration: none; }
@media (min-width: 1200px) {
  .ds-header .navbar > .container { position: relative; }
  .ds-header .nav-item.ds-mega { position: static; }
  .ds-header .ds-mega > .dropdown-menu.ds-mega-menu { left: .75rem; right: .75rem; top: 100%; margin-top: .45rem; border-radius: var(--ds-radius); max-height: calc(100vh - 120px); overflow-y: auto; }
  .ds-header .ds-mega > .dropdown-menu.ds-mega-menu.show { animation: dsDropIn .16s var(--ds-ease); }
  .ds-mega-groups { column-count: 2; column-gap: 1.25rem; }
  .ds-mega-group { break-inside: avoid; margin-bottom: 1rem; }
}
@media (max-width: 1199.98px) {
  .ds-mega-inner { padding: .5rem 0 .25rem; }
  .ds-mega-foot { padding: .6rem 0; border-top: 0; background: none; }
  .ds-mega-side { padding: .75rem; margin-top: .5rem; }
  .ds-mega-tile small { display: none; }
  .ds-mega-group { margin-bottom: .75rem; }
}

/* ---------- Homepage image slider ---------- */
.ds-slider { background: var(--ds-bg-alt); padding: 1.25rem 0 0; }
.ds-slider.is-full { padding: 0; }
.ds-slider .carousel { overflow: hidden; background: #e9edf5; }
.ds-slider:not(.is-full) .carousel { border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow); }
.ds-slide { position: relative; display: block; color: #fff; }
.ds-slide picture, .ds-slide img { display: block; width: 100%; }
.ds-slide img { height: auto; }
.ds-slider.is-fixed .ds-slide img { height: clamp(220px, 36vw, 520px); object-fit: cover; }
.ds-slide-text { position: absolute; inset: 0; display: flex; align-items: center; padding: 2rem clamp(1.5rem, 6vw, 4.5rem);
  background: linear-gradient(90deg, rgba(10,18,51,.75) 0%, rgba(10,18,51,.35) 50%, rgba(10,18,51,0) 100%); }
.ds-slide-text.pos-center { justify-content: center; text-align: center; background: rgba(10,18,51,.45); }
.ds-slide-text.pos-right { justify-content: flex-end; text-align: right; background: linear-gradient(270deg, rgba(10,18,51,.75) 0%, rgba(10,18,51,.35) 50%, rgba(10,18,51,0) 100%); }
.ds-slide-text > div { max-width: 620px; }
.ds-slide-title { color: #fff; font-size: clamp(1.25rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.15; margin: 0 0 .6rem; letter-spacing: -.02em; }
.ds-slide-sub { font-size: clamp(.85rem, 1.4vw, 1.1rem); opacity: .92; margin: 0 0 1.25rem; }
.ds-slider .carousel-indicators { margin-bottom: .8rem; }
.ds-slider .carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 50rem; border: 0; opacity: .55; transition: width .3s var(--ds-ease), opacity .3s; }
.ds-slider .carousel-indicators .active { width: 26px; opacity: 1; }
.ds-slider .carousel-control-prev, .ds-slider .carousel-control-next { width: 4rem; opacity: 0; transition: opacity .2s; }
.ds-slider .carousel:hover .carousel-control-prev, .ds-slider .carousel:hover .carousel-control-next,
.ds-slider .carousel-control-prev:focus-visible, .ds-slider .carousel-control-next:focus-visible { opacity: 1; }
.ds-slider .carousel-control-prev-icon, .ds-slider .carousel-control-next-icon { width: 2.6rem; height: 2.6rem; border-radius: 50%; background-color: rgba(255,255,255,.2); background-size: 42%; border: 1px solid rgba(255,255,255,.35); }
@media (max-width: 767.98px) {
  .ds-slider:not(.is-full) { padding-top: .75rem; }
  .ds-slider:not(.is-full) .carousel { border-radius: var(--ds-radius); }
  .ds-slide-text { padding: 1rem 1.25rem 2rem; }
  .ds-slide-sub { display: none; }
  .ds-slider .carousel-control-prev, .ds-slider .carousel-control-next { display: none; }
}

/* ---------- Sections ---------- */
.ds-section { padding: 3rem 0; }
.ds-section-alt { background: var(--ds-bg-alt); }
.ds-section-head { margin-bottom: 2.25rem; max-width: 100%; }
.ds-section-head.text-center { max-width: 680px; }
.ds-section-title { font-size: clamp(1.55rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 800; margin-bottom: .5rem; }
.ds-section-head.text-center .ds-section-title::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--ds-grad); margin: 0 auto 1rem; }
.ds-section-sub { color: var(--ds-muted); margin-bottom: 0; font-size: 1.02rem; }
.ds-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; color: var(--ds-primary);
  background: #fff; border: 1px solid var(--ds-primary-100); padding: .38rem .85rem; border-radius: 999px; margin-bottom: 1.1rem; box-shadow: var(--ds-shadow-sm); }
.ds-eyebrow-light { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); box-shadow: none; }
.ds-page-hero { position: relative; overflow: hidden; background: var(--ds-grad-dark); padding: 3.5rem 0 3rem; color: rgba(255,255,255,.8); }
.ds-page-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 36px 36px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); pointer-events: none; }
.ds-page-hero::after { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(91,91,246,.55), transparent 65%); pointer-events: none; }
.ds-page-hero .container { position: relative; z-index: 1; }
.ds-page-hero h1 { font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.7rem); color: #fff; margin-bottom: .5rem; }
.ds-page-hero p { color: rgba(255,255,255,.75); max-width: 680px; margin: 0; font-size: 1.02rem; }
.ds-page-hero a:not(.btn) { color: #c7d2fe; }

/* ---------- Hero ---------- */
.ds-hero { position: relative; overflow: hidden; padding: 4.5rem 0 5rem; background:
  radial-gradient(800px 380px at 90% 0%, rgba(91, 91, 246, .12), transparent 60%),
  radial-gradient(600px 320px at 0% 100%, rgba(13, 148, 136, .09), transparent 60%), #fff; }
.ds-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(36,71,213,.12) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 20%, #000 0%, transparent 55%); mask-image: radial-gradient(ellipse at 80% 20%, #000 0%, transparent 55%); pointer-events: none; }
.ds-hero .container { position: relative; }
.ds-slider + .ds-hero { padding-top: 3.5rem; }
.ds-hero-title { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; margin-bottom: 1.1rem; }
.ds-hero-sub { font-size: 1.12rem; color: var(--ds-muted); max-width: 560px; margin-bottom: 1.75rem; }
.ds-hero-search { position: relative; display: flex; gap: .5rem; max-width: 580px; background: #fff; border: 1px solid var(--ds-line);
  border-radius: 1rem; padding: .45rem; box-shadow: var(--ds-shadow); transition: box-shadow .2s, border-color .2s; }
.ds-hero-search:focus-within { border-color: rgba(var(--ds-primary-rgb), .45); box-shadow: 0 0 0 .25rem rgba(var(--ds-primary-rgb), .1), var(--ds-shadow); }
.ds-hero-search > .bi { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--ds-muted); }
.ds-hero-search .form-control { border: 0; box-shadow: none; padding-left: 2.3rem; background: transparent; }
.ds-hero-trust { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; font-size: .88rem; color: var(--ds-body); font-weight: 600; }
.ds-hero-trust li { display: inline-flex; align-items: center; gap: .45rem; }
.ds-hero-trust .bi { color: var(--ds-teal); font-size: 1.05rem; }
.ds-hero-visual { position: relative; padding: 2rem 1rem; }
.ds-hero-visual::before { content: ""; position: absolute; inset: 8% 4% 6% 10%; border-radius: 32px; background: var(--ds-grad); transform: rotate(4deg); opacity: .95; box-shadow: var(--ds-shadow-lg); }
.ds-cert-mock { background: #fff; border: 1px solid var(--ds-line); border-radius: 20px; padding: 1.75rem; box-shadow: var(--ds-shadow-lg);
  position: relative; transform: rotate(-2deg); }
.ds-cert-mock::before { content: ""; position: absolute; inset: 8px; border: 1.5px dashed rgba(var(--ds-primary-rgb), .25); border-radius: 14px; pointer-events: none; }
.ds-cert-mock-top { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--ds-primary); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.ds-cert-mock-name { font-size: 1.75rem; font-weight: 800; color: var(--ds-ink); margin-top: 1.25rem; }
.ds-cert-mock-line { color: var(--ds-muted); font-size: .85rem; }
.ds-cert-mock-course { font-weight: 700; color: var(--ds-ink); margin-top: .25rem; }
.ds-cert-mock-foot { display: flex; justify-content: space-between; align-items: end; margin-top: 1.5rem; }
.ds-cert-mock-foot small { display: block; color: var(--ds-muted); font-size: .7rem; }
.ds-cert-mock-foot strong { font-size: .85rem; font-family: ui-monospace, monospace; }
.ds-qr { width: 56px; height: 56px; border-radius: 10px; background: var(--ds-bg-alt); display: grid; place-items: center; font-size: 2rem; color: var(--ds-ink); }
.ds-float { position: absolute; z-index: 2; background: #fff; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); border-radius: 999px;
  padding: .5rem .95rem; font-size: .8rem; font-weight: 600; display: flex; gap: .4rem; align-items: center; color: var(--ds-ink); animation: dsFloat 6s ease-in-out infinite; }
.ds-float .bi { color: var(--ds-teal); }
.ds-float-1 { top: 0; right: 0; }
.ds-float-2 { bottom: 0; left: -.5rem; animation-delay: -3s; }
@keyframes dsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- Cards ---------- */
.ds-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-sm); overflow: hidden; transition: box-shadow .25s var(--ds-ease), transform .25s var(--ds-ease), border-color .25s; }
.ds-card:hover { box-shadow: var(--ds-shadow); border-color: var(--ds-line-strong); transform: translateY(-3px); }
.ds-card-thumb { position: relative; display: block; aspect-ratio: 16/8; background: var(--ds-bg-alt); overflow: hidden; text-decoration: none; }
.ds-card-thumb img:not(.ds-college-logo) { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ds-ease); }
.ds-card:hover .ds-card-thumb img:not(.ds-college-logo) { transform: scale(1.04); }
.ds-card-thumb-fallback { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: .7rem;
  background: var(--ds-grad); color: #fff; font-size: 2.1rem; overflow: hidden; }
.ds-card-thumb-fallback::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 16px 16px; }
.ds-card-thumb-fallback::after { content: ""; position: absolute; width: 180px; height: 180px; right: -50px; bottom: -80px; border-radius: 50%; background: rgba(255,255,255,.12); }
.ds-card-thumb-fallback > * { position: relative; z-index: 1; }
.ds-card-thumb-fallback span { font-weight: 800; font-size: 1.05rem; letter-spacing: .08em; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); padding: .2rem .6rem; border-radius: .5rem; }
.ds-tone-0 { background: linear-gradient(135deg, #2447d5, #5b5bf6); }
.ds-tone-1 { background: linear-gradient(135deg, #0d9488, #22b8a7); }
.ds-tone-2 { background: linear-gradient(135deg, #6d28d9, #a855f7); }
.ds-tone-3 { background: linear-gradient(135deg, #c2410c, #f59e0b); }
.ds-tone-4 { background: linear-gradient(135deg, #0369a1, #06b6d4); }
.ds-tone-5 { background: linear-gradient(135deg, #be185d, #f43f5e); }
.ds-tone-6 { background: linear-gradient(135deg, #15803d, #65a30d); }
.ds-tone-7 { background: linear-gradient(135deg, #1e293b, #475569); }
.ds-fallback-college { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.ds-fallback-blog { background: linear-gradient(135deg, #6d28d9, #8b5cf6); }
.ds-college-logo { position: absolute; left: 1rem; bottom: -1px; width: 54px; height: 54px; object-fit: contain; background: #fff; z-index: 2;
  border-radius: 12px 12px 0 0; padding: 6px; border: 1px solid var(--ds-line); border-bottom: 0; }
.ds-card-body { padding: 1.2rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.ds-card-title { font-size: 1.04rem; font-weight: 700; margin-bottom: .4rem; line-height: 1.35; }
.ds-card-title a { color: var(--ds-ink); text-decoration: none; }
.ds-card-title a:hover { color: var(--ds-primary); }
.ds-card-text { color: var(--ds-muted); font-size: .88rem; margin-bottom: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ds-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 1.25rem; border-top: 1px solid var(--ds-line); background: #fbfcfe; }
.ds-card-foot .btn { white-space: nowrap; }
.ds-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .8rem; color: var(--ds-muted); }
.ds-meta .bi { margin-right: .3rem; color: #94a0b8; }
.ds-price { font-weight: 800; color: var(--ds-ink); font-size: 1.1rem; letter-spacing: -.01em; }
.ds-price-tba { font-size: .8rem; color: var(--ds-muted); font-weight: 600; }
.ds-price del, .ds-card-foot del { color: #98a2b6; font-weight: 500; font-size: .82rem; margin-left: .25rem; }

/* ---------- Badges / pills / chips ---------- */
.ds-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .26rem .6rem; border-radius: 999px;
  background: #f1f4fa; color: #475569; line-height: 1.3; white-space: nowrap; }
.ds-badge .bi-circle-fill { font-size: .45rem; }
.ds-badge-blue { background: var(--ds-primary-50); color: var(--ds-primary); }
.ds-badge-teal { background: var(--ds-teal-50); color: var(--ds-teal); }
.ds-badge-warm { background: var(--ds-warm-50); color: var(--ds-warm); }
.ds-badge-green { background: var(--ds-green-50); color: var(--ds-green); }
.ds-badge-red { background: var(--ds-red-50); color: var(--ds-red); }
.ds-chip { font-size: .75rem; padding: .2rem .6rem; border: 1px solid var(--ds-line); border-radius: 999px; color: var(--ds-body); background: #fff; white-space: nowrap; }
.ds-pill { display: inline-block; font-size: .72rem; font-weight: 700; padding: .24rem .65rem; border-radius: 999px; white-space: nowrap; }
.ds-pill-success { background: var(--ds-green-50); color: var(--ds-green); }
.ds-pill-primary { background: var(--ds-primary-50); color: var(--ds-primary); }
.ds-pill-info { background: #e8f4fd; color: #0369a1; }
.ds-pill-warning { background: #fff7e0; color: #a16207; }
.ds-pill-danger { background: var(--ds-red-50); color: var(--ds-red); }
.ds-pill-secondary { background: #f1f4fa; color: #475569; }

/* ---------- Category tiles ---------- */
.ds-cat-tile { display: flex; align-items: center; gap: .9rem; padding: 1.05rem; border: 1px solid var(--ds-line); border-radius: var(--ds-radius);
  background: #fff; text-decoration: none; height: 100%; transition: border-color .2s, box-shadow .25s var(--ds-ease), transform .25s var(--ds-ease); }
.ds-cat-tile:hover { border-color: rgba(var(--ds-primary-rgb), .35); box-shadow: var(--ds-shadow); transform: translateY(-2px); }
.ds-cat-icon { flex: 0 0 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--ds-primary-50); color: var(--ds-primary); font-size: 1.25rem; transition: background .2s, color .2s; }
.ds-cat-tile:hover .ds-cat-icon { background: var(--ds-grad); color: #fff; }
.ds-cat-name { display: block; font-weight: 700; color: var(--ds-ink); font-size: .93rem; line-height: 1.25; }
.ds-cat-count { display: block; font-size: .78rem; color: var(--ds-muted); }

/* ---------- Trending list ---------- */
.ds-trend-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.ds-trend { display: flex; align-items: center; gap: .9rem; padding: .95rem 1.05rem; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm);
  text-decoration: none; color: var(--ds-body); background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s var(--ds-ease); }
.ds-trend:hover { border-color: rgba(var(--ds-primary-rgb), .35); color: var(--ds-primary); box-shadow: var(--ds-shadow); transform: translateY(-2px); }
.ds-trend-n { font-weight: 800; font-size: 1.05rem; min-width: 1.8rem; background: var(--ds-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Features / steps / timeline ---------- */
.ds-feature { padding: 1.5rem; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); background: #fff; height: 100%; transition: box-shadow .25s, transform .25s var(--ds-ease); }
.ds-feature:hover { box-shadow: var(--ds-shadow); transform: translateY(-2px); }
.ds-feature-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem;
  background: var(--ds-primary-50); color: var(--ds-primary); margin-bottom: 1rem; flex-shrink: 0; }
.ds-step { position: relative; padding: 1.5rem; background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); height: 100%; overflow: hidden; }
.ds-step-n { position: absolute; top: .6rem; right: 1rem; font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--ds-primary-50); }
.ds-step-icon { position: relative; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--ds-grad); color: #fff; font-size: 1.2rem; box-shadow: var(--ds-shadow-primary); }
.ds-timeline { list-style: none; counter-reset: s; padding: 0; margin: 0; }
.ds-timeline li { counter-increment: s; position: relative; padding: 0 0 1.5rem 3.3rem; }
.ds-timeline li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--ds-grad); color: #fff; font-weight: 800; font-size: .9rem; box-shadow: var(--ds-shadow-primary); }
.ds-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 1.1rem; top: 2.5rem; bottom: .2rem; width: 2px; background: var(--ds-primary-100); }
.ds-check-list { list-style: none; padding: 0; margin: 0; }
.ds-check-list li { position: relative; padding-left: 1.8rem; margin-bottom: .6rem; }
.ds-check-list li::before { content: "\F26B"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .05rem; color: var(--ds-teal); }
.ds-check-light li { color: rgba(255, 255, 255, .9); }
.ds-check-light li::before { color: #5eead4; }

/* ---------- Promo / CTA / verify ---------- */
.ds-promo { position: relative; overflow: hidden; background: var(--ds-grad-dark); border-radius: var(--ds-radius-lg); padding: clamp(1.5rem, 1rem + 3vw, 3.25rem); color: #fff; }
.ds-promo::before, .ds-cta::before { content: ""; position: absolute; width: 460px; height: 460px; right: -140px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 65%); pointer-events: none; }
.ds-promo > *, .ds-cta > * { position: relative; }
.ds-promo h2 { color: #fff; }
.ds-find-college { background: #fff; color: var(--ds-body); border-radius: var(--ds-radius); padding: 1.6rem; box-shadow: var(--ds-shadow-lg); }
.ds-cta { position: relative; overflow: hidden; background: var(--ds-grad); color: #fff; border-radius: var(--ds-radius-lg); padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; box-shadow: var(--ds-shadow-lg); }
.ds-cta h2 { color: #fff; }
.ds-cta .btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: var(--ds-primary); }
.ds-verify-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.6rem 1.85rem;
  border: 1px solid var(--ds-line); border-radius: var(--ds-radius); background: linear-gradient(135deg, #fff 55%, var(--ds-primary-50)); box-shadow: var(--ds-shadow); }
.ds-verify-inline { display: flex; gap: .5rem; flex: 1 1 360px; max-width: 480px; }

/* ---------- Testimonials ---------- */
.ds-testimonial blockquote { font-size: .95rem; color: var(--ds-body); position: relative; }
.ds-testimonial .ds-card-body::before { content: "\201C"; position: absolute; top: .2rem; right: 1.1rem; font-size: 4.5rem; line-height: 1; font-family: Georgia, serif; color: var(--ds-primary-50); }
.ds-stars { color: #f59e0b; margin-bottom: .75rem; font-size: .85rem; letter-spacing: .1em; }
.ds-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ds-avatar-initials { display: grid; place-items: center; background: var(--ds-primary-50); color: var(--ds-primary); font-weight: 700; font-size: .85rem; }

/* ---------- Accordion ---------- */
.ds-accordion .accordion-item { border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm) !important; margin-bottom: .65rem; overflow: hidden; background: #fff; }
.ds-accordion .accordion-button { font-weight: 600; color: var(--ds-ink); font-size: .95rem; padding: 1rem 1.2rem; }
.ds-accordion .accordion-button:not(.collapsed) { background: var(--ds-primary-50); color: var(--ds-primary); box-shadow: none; }
.ds-accordion .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(var(--ds-primary-rgb), .15); }
.ds-accordion .accordion-body { padding: 1rem 1.2rem 1.2rem; }
.ds-accordion .accordion-body p:last-child { margin-bottom: 0; }

/* ---------- Detail pages ---------- */
.ds-detail-hero { position: relative; overflow: hidden; background: var(--ds-grad-dark); padding: 3rem 0 2.5rem; color: rgba(255,255,255,.8); }
.ds-detail-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 36px 36px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); pointer-events: none; }
.ds-detail-hero .container { position: relative; }
.ds-detail-hero h1 { font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); color: #fff; }
.ds-detail-hero .lead, .ds-detail-hero p { color: rgba(255,255,255,.78); }
.ds-detail-hero .text-muted { color: rgba(255,255,255,.65) !important; }
.ds-detail-hero a:not(.btn) { color: #c7d2fe; }
.ds-detail-hero .ds-badge { background: rgba(255,255,255,.12); color: #fff; }
.ds-detail-hero .ds-badge-warm { background: rgba(251,146,60,.2); color: #fed7aa; }
.ds-detail-hero .ds-badge-teal, .ds-detail-hero .ds-badge-green { background: rgba(45,212,191,.18); color: #99f6e4; }
.ds-detail-hero .ds-badge-blue { background: rgba(165,180,252,.2); color: #e0e7ff; }
.ds-detail-hero .ds-badge-red { background: rgba(248,113,113,.2); color: #fecaca; }
.ds-detail-hero .ds-chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.ds-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.ds-fact { background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); padding: .85rem 1rem; }
.ds-detail-hero .ds-fact { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.ds-detail-hero .ds-fact small { color: rgba(255,255,255,.6); }
.ds-detail-hero .ds-fact strong { color: #fff; }
.ds-fact small { display: block; color: var(--ds-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ds-fact strong { color: var(--ds-ink); font-size: 1.02rem; }
.ds-sticky-card { position: sticky; top: 96px; }
.ds-panel { background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 1.6rem; box-shadow: var(--ds-shadow); }
.ds-content { color: var(--ds-body); }
.ds-content h2 { font-size: 1.3rem; font-weight: 800; margin: 2.25rem 0 .85rem; }
.ds-content h2:first-child { margin-top: 0; }
.ds-content h3 { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.ds-content img { border-radius: var(--ds-radius-sm); height: auto; }
.ds-content table { width: 100%; margin-bottom: 1rem; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); overflow: hidden; }
.ds-content th, .ds-content td { border-bottom: 1px solid var(--ds-line); padding: .65rem .9rem; }
.ds-content tr:last-child th, .ds-content tr:last-child td { border-bottom: 0; }
.ds-content th { background: var(--ds-bg-alt); color: var(--ds-ink); font-weight: 600; width: 45%; }
.ds-content blockquote { border-left: 4px solid var(--ds-primary); padding: .5rem 1rem; background: var(--ds-bg-alt); border-radius: 0 .6rem .6rem 0; }
.ds-section-nav { position: sticky; top: 72px; z-index: 5; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--ds-line); }
.ds-section-nav .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ds-section-nav .nav-link { white-space: nowrap; font-weight: 600; font-size: .88rem; color: var(--ds-muted); border-bottom: 2px solid transparent; border-radius: 0; padding: .95rem .95rem; }
.ds-section-nav .nav-link:hover, .ds-section-nav .nav-link.active { color: var(--ds-primary); border-bottom-color: var(--ds-primary); }
.ds-anchor { scroll-margin-top: 140px; }

/* ---------- Filters ---------- */
.ds-filter-bar { background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 1.1rem; box-shadow: var(--ds-shadow); }
.ds-filter-pills { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .35rem; scrollbar-width: thin; }
.ds-filter-pills a { white-space: nowrap; text-decoration: none; font-weight: 600; font-size: .85rem; padding: .48rem 1rem; border-radius: 999px;
  border: 1px solid var(--ds-line); color: var(--ds-body); background: #fff; transition: all .2s; }
.ds-filter-pills a:hover { border-color: rgba(var(--ds-primary-rgb), .4); color: var(--ds-primary); }
.ds-filter-pills a.active { background: var(--ds-primary); border-color: var(--ds-primary); color: #fff; box-shadow: var(--ds-shadow-primary); }

/* ---------- Empty state ---------- */
.ds-empty { text-align: center; padding: 3rem 1rem; border: 1px dashed #cfd7e6; border-radius: var(--ds-radius); background: #fcfdff; }
.ds-empty-icon { width: 60px; height: 60px; margin: 0 auto 1rem; border-radius: 18px; display: grid; place-items: center; background: var(--ds-primary-50); color: var(--ds-primary); font-size: 1.55rem; }

/* ---------- Auth pages ---------- */
.ds-auth { position: relative; min-height: calc(100vh - 72px); display: flex; align-items: center; padding: 3.5rem 0; background:
  radial-gradient(700px 320px at 90% 0%, rgba(91,91,246,.12), transparent 60%), radial-gradient(600px 300px at 0% 100%, rgba(13,148,136,.08), transparent 60%), var(--ds-bg-alt); }
.ds-auth-card { background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.6rem); }
.ds-auth-card h1 { font-size: 1.6rem; font-weight: 800; }
.ds-auth-split { display: grid; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg); overflow: hidden; }
.ds-auth-split .ds-auth-card { border: 0; box-shadow: none; border-radius: 0; }
.ds-auth-aside { position: relative; overflow: hidden; background: var(--ds-grad-dark); color: rgba(255,255,255,.82); padding: 2.5rem; display: none; flex-direction: column; }
.ds-auth-aside::before { content: ""; position: absolute; width: 360px; height: 360px; right: -140px; bottom: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(91,91,246,.6), transparent 65%); }
.ds-auth-aside > * { position: relative; }
.ds-auth-aside h2 { color: #fff; font-size: 1.55rem; font-weight: 800; margin: 2rem 0 .75rem; }
.ds-auth-aside .ds-check-list li { margin-bottom: .85rem; }
@media (min-width: 992px) { .ds-auth-split { grid-template-columns: 5fr 6fr; } .ds-auth-aside { display: flex; } }
.ds-pw-toggle { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--ds-muted); padding: .25rem .5rem; }
.ds-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Verify result ---------- */
.ds-verify-result { border-radius: var(--ds-radius); padding: 1.6rem; border: 1px solid; }
.ds-verify-valid { background: var(--ds-green-50); border-color: #b7e4c7; }
.ds-verify-revoked { background: var(--ds-red-50); border-color: #f5c2c2; }
.ds-verify-none { background: #fff7e0; border-color: #f3dca0; }
.ds-verify-result dl { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: .45rem 1rem; margin: 1rem 0 0; }
.ds-verify-result dt { color: var(--ds-muted); font-weight: 600; font-size: .85rem; }
.ds-verify-result dd { margin: 0; color: var(--ds-ink); font-weight: 600; word-break: break-word; }

/* ---------- Announcement banners ---------- */
.ds-banner { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.15rem; border-radius: var(--ds-radius); background: var(--ds-grad-dark); color: #fff; flex-wrap: wrap; box-shadow: var(--ds-shadow); }
.ds-banner img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }
.ds-banner-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.14); }

/* ---------- Footer ---------- */
.ds-footer { position: relative; background: var(--ds-navy); color: rgba(255, 255, 255, .72); padding: 4.5rem 0 1.5rem; margin-top: 0; overflow: hidden; }
.ds-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #2447d5, #5b5bf6, #0d9488); }
.ds-footer::after { content: ""; position: absolute; width: 520px; height: 520px; left: -200px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(36,71,213,.28), transparent 65%); pointer-events: none; }
.ds-footer .container { position: relative; z-index: 1; }
.ds-footer-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #fff; margin-bottom: 1.1rem; }
.ds-footer-text { font-size: .88rem; color: rgba(255, 255, 255, .62); }
.ds-footer-links li { margin-bottom: .6rem; font-size: .88rem; }
.ds-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; transition: color .2s; }
.ds-footer a:hover { color: #fff; }
.ds-social { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .08); transition: background .2s, transform .2s; }
.ds-social:hover { background: var(--ds-primary); transform: translateY(-2px); }
.ds-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 3rem; padding-top: 1.35rem; font-size: .82rem; }
.ds-back-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--ds-grad); color: #fff;
  display: grid; place-items: center; box-shadow: var(--ds-shadow-primary); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s var(--ds-ease); }
.ds-back-top.show { opacity: 1; visibility: visible; transform: none; }

/* ---------- Scroll reveal (progressive: content is visible without JS) ---------- */
.ds-js .ds-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ds-ease), transform .6s var(--ds-ease); }
.ds-js .ds-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 575.98px) {
  .ds-section { padding: 3.25rem 0; }
  .ds-hero { padding: 2.5rem 0 3rem; }
  .ds-slider + .ds-hero { padding-top: 2.25rem; }
  .ds-hero-search { flex-wrap: nowrap; }
  .ds-hero-search .btn { padding-inline: .8rem; }
  .ds-verify-inline { flex-direction: column; }
  .ds-verify-result dl { grid-template-columns: 1fr; }
  .ds-verify-result dd { margin-bottom: .5rem; }
  .ds-card-foot { flex-wrap: wrap; }
  .ds-page-hero { padding: 2.5rem 0 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .ds-js .ds-reveal { opacity: 1; transform: none; }
}

/* spacing fixes */
.ds-content .ds-anchor + .ds-anchor { margin-top: 2.5rem; }
/* keep absolutely-positioned children (e.g. .visually-hidden labels) inside scroll containers */
.table-responsive { position: relative; }
@media (max-width: 991.98px) { .ds-auth-split { max-width: 560px; margin: 0 auto; } }
.ds-card .link-secondary { text-decoration: none; }
.ds-card .link-secondary:hover { color: var(--ds-primary) !important; }
.ds-detail-hero .lead { font-size: 1.1rem; }
.ds-find-college h3, .ds-find-college .h5 { font-weight: 800; }
@media (max-width: 575.98px) {
  .ds-header .navbar > .container { flex-wrap: nowrap; }
  .ds-header .ds-brand { font-size: 1.05rem; margin-right: .5rem; min-width: 0; }
  .ds-header .ds-brand span { overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Ratings ---------- */
.ds-rating-stars { color: #f59e0b; letter-spacing: .05em; white-space: nowrap; }
.ds-rating-stars.small { font-size: .8rem; }
.ds-rating-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 700; color: #92400e; background: #fff7e0; border-radius: 999px; padding: .2rem .55rem; white-space: nowrap; }
.ds-rating-badge .bi { color: #f59e0b; }
.ds-rating-badge span { font-weight: 500; color: #a16207; }
.ds-detail-hero .ds-rating-badge { background: rgba(251,191,36,.18); color: #fde68a; }
.ds-detail-hero .ds-rating-badge span { color: #fcd34d; }
.ds-rating-big { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--ds-ink); }
.ds-review { border-top: 1px solid var(--ds-line); padding: 1rem 0; }
.ds-star-input { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.ds-star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ds-star-input label { font-size: 1.7rem; line-height: 1; color: #d6dbe6; cursor: pointer; transition: color .15s, transform .15s; }
.ds-star-input label::before { content: "\F586"; font-family: "bootstrap-icons"; }
.ds-star-input input:checked ~ label, .ds-star-input label:hover, .ds-star-input label:hover ~ label { color: #f59e0b; }
.ds-star-input label:hover { transform: scale(1.1); }
.ds-star-input input:focus-visible + label { outline: 2px solid var(--ds-primary); outline-offset: 2px; border-radius: 4px; }

/* ---------- Apply / gate panels ---------- */
.ds-gate { border: 1px solid var(--ds-line); border-radius: var(--ds-radius); background: linear-gradient(135deg, #fff 50%, var(--ds-primary-50)); padding: 1.5rem; }
.ds-gate-steps { list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: grid; gap: .6rem; }
.ds-gate-steps li { display: flex; gap: .7rem; align-items: center; font-weight: 600; color: var(--ds-ink); }
.ds-gate-steps li span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-grad); color: #fff; font-size: .8rem; flex-shrink: 0; }
.ds-gate-steps li.done span { background: var(--ds-green); }
.ds-gate-steps li.done { color: var(--ds-muted); text-decoration: line-through; }
.btn.ds-waiting { opacity: .85; cursor: progress; }
/* Location field columns sit inside the parent .row through a display:contents wrapper — give them the row's gutters */
.row > .ds-loc-group > * { flex-shrink: 0; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y); }
:where(.row > .ds-loc-group > *) { width: 100%; }

/* ===================================================================== Sales & offers */
.ds-promo-bar { background: var(--promo-bg, #2447D5); color: var(--promo-fg, #fff); font-size: .875rem; position: relative; z-index: 1031; }
.ds-promo-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; padding: .5rem 2.5rem .5rem 1rem; position: relative; text-align: center; }
.ds-promo-text { font-weight: 600; }
.ds-promo-code { border: 1px dashed currentColor; background: rgba(255,255,255,.14); color: inherit; border-radius: 999px; padding: .15rem .7rem; font-size: .8rem; letter-spacing: .02em; cursor: pointer; }
.ds-promo-code strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }
.ds-promo-code:hover, .ds-promo-code.copied { background: rgba(255,255,255,.28); }
.ds-promo-timer { font-variant-numeric: tabular-nums; opacity: .95; font-size: .8rem; }
.ds-promo-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ds-promo-link:hover { color: inherit; opacity: .85; }
.ds-promo-close { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: inherit; opacity: .8; padding: .25rem .4rem; line-height: 1; }
.ds-promo-close:hover { opacity: 1; }
@media (max-width: 575.98px) { .ds-promo-bar { font-size: .8rem; } .ds-promo-inner { gap: .35rem .6rem; } }
.ds-badge-sale { background: #FFF1E6; color: #C2410C; border-color: #FED7AA; font-weight: 700; }
.ds-save { display: inline-block; font-size: .72rem; font-weight: 700; color: #047857; background: #ECFDF5; border-radius: 999px; padding: .1rem .5rem; vertical-align: middle; }
.ds-sale-note { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .55rem .7rem; border-radius: 10px; background: #FFF7ED; color: #9A3412; }
.ds-coupon-offer { border: 1px dashed #93C5FD; background: #EFF6FF; border-radius: 10px; padding: .65rem .75rem; color: #1E3A8A; }
.ds-coupon-code { font-size: .95rem; font-weight: 700; letter-spacing: .06em; color: #1D4ED8; background: #fff; border: 1px solid #BFDBFE; border-radius: 6px; padding: .15rem .5rem; }

/* ===================================================================== Auto-load popup */
.ds-popup .modal-content { border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(15, 23, 42, .35); }
.ds-popup .ds-popup-close { position: absolute; top: .75rem; right: .75rem; z-index: 3; background-color: #fff; border-radius: 50%; padding: .55rem; opacity: .95; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.ds-popup-img { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: contain; background: #F8FAFC; }
.ds-popup-body { padding: 1.75rem 1.75rem 1.9rem; text-align: center; }
.ds-popup-title { font-size: 1.45rem; font-weight: 800; color: #0B1B4D; margin-bottom: .6rem; }
.ds-popup-text { color: #475569; }
.ds-popup-text p:last-child { margin-bottom: 0; }
.ds-popup-text ul, .ds-popup-text ol { text-align: left; display: inline-block; }
.ds-popup-image-only { background: transparent; box-shadow: none; }

/* Tables inside CMS / policy content */
.ds-content table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .95rem; }
.ds-content th, .ds-content td { border: 1px solid #E2E8F0; padding: .6rem .8rem; vertical-align: top; text-align: left; }
.ds-content thead th { background: #F1F5F9; font-weight: 700; }
@media (max-width: 575.98px) { .ds-content table { display: block; overflow-x: auto; } }

/* ===================================================================== Course details page */
.ds-learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .65rem 1.25rem; }
.ds-learn-grid > div { display: flex; gap: .6rem; align-items: flex-start; }
.ds-learn-grid i { color: var(--ds-teal, #0d9488); margin-top: .2rem; }
.ds-module-acc .accordion-button { gap: .9rem; align-items: center; }
.ds-module-no { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; background: var(--ds-grad, linear-gradient(135deg,#2447d5,#5b5bf6)); }
.ds-topic-list li { margin-bottom: .35rem; }
.ds-how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: how; }
.ds-how-step { position: relative; background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 1.1rem 1rem 1rem; }
.ds-how-step h3 { font-size: 1rem; font-weight: 700; margin: .7rem 0 .35rem; }
.ds-how-step p { font-size: .85rem; color: #64748B; margin: 0; }
.ds-how-icon { position: relative; display: inline-flex; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; font-size: 1.25rem; color: #2447D5; background: #EEF2FF; }
.ds-how-icon b { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: #0B1B4D; color: #fff; font-size: .7rem; display: flex; align-items: center; justify-content: center; }
@media (max-width: 991.98px) { .ds-how { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .ds-how { grid-template-columns: 1fr; } }
.ds-rules th { background: #F8FAFC; font-weight: 600; }

/* Sample certificate (HTML replica of the PDF design, scales with its container) */
.ds-cert-sample { container-type: inline-size; max-width: 760px; }
.ds-cs-paper { position: relative; aspect-ratio: 842 / 595; background: #fff; border: 1px solid #E2E8F0; border-radius: 1.6cqw; overflow: hidden; box-shadow: 0 18px 50px rgba(15,23,42,.12);
  text-align: center; color: #0F172A; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; user-select: none; }
.ds-cs-paper::after { content: ""; position: absolute; inset: 3.2%; border: .15cqw solid #C7D2FE; border-radius: 1.4cqw; pointer-events: none; }
.ds-cs-mark { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-20deg); font-size: 15cqw; font-weight: 800; color: rgba(36,71,213,.07); letter-spacing: .05em; z-index: 0; }
.ds-cs-deco1 { position: absolute; right: -6%; top: -18%; width: 22%; aspect-ratio: 1; border-radius: 22%; background: #2447D5; box-shadow: -4cqw 2cqw 0 1cqw #EEF2FF; }
.ds-cs-deco2 { position: absolute; left: -5%; bottom: -12%; width: 14%; aspect-ratio: 1; border-radius: 22%; background: #0B1B4D; }
.ds-cs-paper > div { position: relative; z-index: 1; }
.ds-cs-head { position: absolute !important; left: 8%; top: 9%; display: flex; align-items: center; gap: 1cqw; font-size: 2.2cqw; }
.ds-cs-head img { height: 4.6cqw; width: auto; }
.ds-cs-title { padding-top: 13%; font-size: 5.2cqw; font-weight: 800; letter-spacing: .8cqw; color: #0B1B4D; line-height: 1.1; }
.ds-cs-sub { font-size: 1.6cqw; font-weight: 700; letter-spacing: .55cqw; color: #C08A2E; margin-top: .4cqw; }
.ds-cs-certify { font-family: Georgia, 'Times New Roman', serif; font-style: italic; color: #64748B; font-size: 1.9cqw; margin-top: 2.6cqw; }
.ds-cs-name { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 4.8cqw; line-height: 1.15; margin-top: .6cqw; }
.ds-cs-line { color: #64748B; font-size: 1.55cqw; margin-top: 1.6cqw; }
.ds-cs-course { color: #2447D5; font-weight: 700; font-size: 3cqw; margin-top: .6cqw; line-height: 1.2; padding: 0 10%; }
.ds-cs-pill { display: inline-block; margin-top: 1cqw; padding: .5cqw 2cqw; border-radius: 99px; background: #EEF2FF; border: .12cqw solid #C7D2FE; color: #2447D5; font-weight: 700; font-size: 1.4cqw; }
.ds-cs-foot { position: absolute !important; left: 8%; right: 8%; bottom: 13%; display: flex; align-items: flex-end; justify-content: space-between; gap: 2cqw; text-align: left; }
.ds-cs-cards { display: grid; gap: .8cqw; }
.ds-cs-cards span { display: block; background: #F8FAFC; border: .12cqw solid #E2E8F0; border-radius: .9cqw; padding: .7cqw 1.4cqw; font-weight: 700; font-size: 1.3cqw; }
.ds-cs-cards small, .ds-cs-issuer small, .ds-cs-qr small { display: block; font-size: .85cqw; letter-spacing: .1cqw; color: #64748B; font-weight: 700; }
.ds-cs-issuer { text-align: center; font-size: 1.2cqw; }
.ds-cs-issuer b { display: block; font-size: 1.6cqw; margin-top: .4cqw; }
.ds-cs-issuer span { color: #64748B; }
.ds-cs-qr { text-align: center; background: #fff; border: .12cqw solid #E2E8F0; border-radius: 1cqw; padding: 1cqw 1.4cqw; }
.ds-cs-qr i { font-size: 7cqw; line-height: 1; display: block; }
.ds-cs-note { position: absolute !important; left: 0; right: 0; bottom: 5.5%; font-size: 1.1cqw; font-weight: 700; color: #0B1B4D; }

/* Enroll card + duration options */
.ds-dur-options { display: grid; gap: .5rem; }
.ds-dur-opt { display: flex; align-items: center; gap: .6rem; border: 1.5px solid #E2E8F0; border-radius: 12px; padding: .65rem .8rem; cursor: pointer; transition: border-color .15s, background .15s; }
.ds-dur-opt:hover { border-color: #A5B4FC; }
.ds-dur-opt.is-active { border-color: #2447D5; background: #F5F7FF; box-shadow: 0 0 0 3px rgba(36,71,213,.08); }
.ds-dur-opt input { accent-color: #2447D5; }
.ds-dur-name { font-weight: 600; flex: 1; }
.ds-dur-price { font-weight: 800; color: #0B1B4D; }
.ds-dur-price s { font-weight: 400; color: #94A3B8; font-size: .8rem; }
.ds-mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; background: #fff; border-top: 1px solid #E2E8F0; box-shadow: 0 -8px 24px rgba(15,23,42,.08); }
@media (max-width: 991.98px) { .ds-course-page { padding-bottom: 72px; } .ds-course-page .ds-back-top { bottom: 84px; } }

/* Checkout duration cards */
.ds-duration-card { display: flex; flex-direction: column; gap: .25rem; border: 1.5px solid #E2E8F0; border-radius: 14px; padding: .9rem 1rem; cursor: pointer; height: 100%; transition: border-color .15s, background .15s; }
.ds-duration-card:hover { border-color: #A5B4FC; }
.ds-duration-card.is-active { border-color: #2447D5; background: #F5F7FF; box-shadow: 0 0 0 3px rgba(36,71,213,.08); }
.ds-duration-name { font-weight: 700; }
.ds-duration-price { font-size: 1.25rem; font-weight: 800; color: #0B1B4D; }

/* Homepage hero — student image (Admin → Content → Homepage → Hero → Hero image) */
.ds-hero-student { padding: 0; }
.ds-hero-student::before { display: none; }
.ds-hero-student img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; position: relative; z-index: 1; border-radius: 24px; }
.ds-hero-student .ds-float-1 { top: 12%; right: 2%; }
.ds-hero-student .ds-float-2 { bottom: 10%; left: 0; }

/* ===================================================================== Live search */
.ds-search-btn { width: 42px; height: 42px; justify-content: center; }
.ds-search-modal .modal-content { border: 0; border-radius: 18px; overflow: hidden; }
.ds-search-modal .modal-dialog { margin-top: 6vh; }
.ds-search-form { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid #E2E8F0; }
.ds-search-form > i { color: #64748B; font-size: 1.15rem; }
.ds-search-form input { flex: 1; border: 0; outline: 0; font-size: 1.1rem; background: transparent; min-width: 0; }
.ds-search-results { max-height: 60vh; overflow-y: auto; }
.ds-search-results.is-loading { opacity: .6; }
.ds-search-hint { padding: 1.25rem; color: #64748B; font-size: .9rem; }
.ds-sr-group { padding: .5rem 0; border-bottom: 1px solid #F1F5F9; }
.ds-sr-label { padding: .35rem 1.1rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748B; }
.ds-sr-label i { margin-right: .4rem; color: #2447D5; }
.ds-sr-item { display: block; padding: .5rem 1.1rem; color: #0F172A; text-decoration: none; }
.ds-sr-item:hover, .ds-sr-item.is-active { background: #EEF2FF; color: #0F172A; }
.ds-sr-title { display: block; font-weight: 600; }
.ds-sr-title mark { padding: 0; background: #FEF08A; }
.ds-sr-sub { display: block; font-size: .8rem; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-sr-all { display: block; padding: .8rem 1.1rem; font-weight: 600; text-decoration: none; background: #F8FAFC; }
.ds-live-wrap { position: relative; }
.ds-search-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1040; background: #fff; border: 1px solid #E2E8F0; border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15,23,42,.16); text-align: left; }
.ds-search-row:hover { background: #F8FAFC; }

/* ===================================================================== Services & products */
.ds-service-card .ds-card-body { padding-top: 1.5rem; }
.ds-service-icon, .ds-product-logo { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px;
  font-size: 1.5rem; color: #fff; background: var(--ds-grad, linear-gradient(135deg,#2447d5,#5b5bf6)); box-shadow: 0 8px 20px rgba(36,71,213,.25); margin-bottom: 1rem; }
.ds-product-logo { margin-bottom: 0; flex: 0 0 auto; background: linear-gradient(135deg, #0d9488, #14b8a6); box-shadow: 0 8px 20px rgba(13,148,136,.25); overflow: hidden; }
.ds-product-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ds-service-points { list-style: none; padding: 0; margin: .75rem 0 0; font-size: .875rem; }
.ds-service-points li { display: flex; gap: .4rem; margin-bottom: .3rem; color: #334155; }
.ds-service-points i { color: #0d9488; }
.ds-link-arrow { font-weight: 700; text-decoration: none; }
.ds-link-arrow i { transition: transform .15s; }
.ds-link-arrow:hover i { transform: translateX(3px); }
.ds-service-card:hover, .ds-product-card:hover { transform: translateY(-3px); }
.ds-service-hero-icon { width: 180px; height: 180px; margin-left: auto; border-radius: 40px; display: flex; align-items: center; justify-content: center;
  font-size: 5rem; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.ds-service-link { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem; border-radius: 10px; text-decoration: none; color: #0F172A; font-weight: 600; }
.ds-service-link:hover { background: #EEF2FF; color: #2447D5; }
.ds-service-link i { color: #2447D5; }
.ds-cta-band { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between; padding: 2rem 2.25rem; border-radius: 22px;
  background: var(--ds-grad-dark, linear-gradient(135deg,#0a1233,#2447d5)); color: rgba(255,255,255,.85); }
.ds-cta-band h2 { color: #fff; font-weight: 800; font-size: 1.5rem; margin-bottom: .25rem; }
.ds-mega-services { min-width: 640px; }
.ds-product-menu { min-width: 300px; }
.ds-product-menu .dropdown-item { padding: .6rem 1rem; }
.ds-product-menu .bi:first-child { color: #0d9488; font-size: 1.1rem; }
@media (max-width: 1199.98px) { .ds-mega-services { min-width: 0; } }

/* ---------- Service pages (v18) ---------- */
.ds-svc-hero { padding: 3.5rem 0 3rem; }
.ds-svc-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ds-svc-chips span { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; background: rgba(255,255,255,.1); color: #e2e8f0; font-size: .85rem; font-weight: 600; }
.ds-svc-chips i { color: #5eead4; }
.ds-svc-visual { position: relative; margin-left: auto; max-width: 400px; padding: 1.5rem; border-radius: 24px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.ds-svc-visual-icon { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; color: #fff; background: linear-gradient(135deg, #2447D5, #14B8A6); margin-bottom: 1rem; box-shadow: 0 10px 30px rgba(20,184,166,.3); }
.ds-svc-visual-row { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; margin-top: .5rem; border-radius: 12px; background: rgba(255,255,255,.95); color: #0F172A !important; font-weight: 600; font-size: .9rem; text-decoration: none; transition: transform .15s; }
.ds-svc-visual-row i { color: #0d9488; font-size: 1.05rem; }
a.ds-svc-visual-row:hover { background: #fff; transform: translateX(3px); }

.ds-svc-ideal { display: flex; flex-wrap: wrap; gap: .5rem; }
.ds-svc-ideal span { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 10px; background: #F1F5F9; font-size: .88rem; font-weight: 500; color: #1E293B; }
.ds-svc-ideal i { color: #2447D5; }

.ds-svc-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ds-svc-feature { display: flex; gap: .9rem; padding: 1.1rem; border: 1px solid #E2E8F0; border-radius: 16px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.ds-svc-feature:hover { border-color: #C7D2FE; box-shadow: 0 8px 24px rgba(15,23,42,.06); }
.ds-svc-feature > span { flex: 0 0 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #2447D5; background: #EEF2FF; }
.ds-svc-feature h3 { font-size: .98rem; font-weight: 700; margin: .1rem 0 .3rem; }
.ds-svc-feature p { font-size: .87rem; color: #64748B; margin: 0; }
@media (max-width: 767.98px) { .ds-svc-features { grid-template-columns: 1fr; } }

.ds-svc-stack { border: 1px solid #E2E8F0; border-radius: 16px; overflow: hidden; background: #fff; }
.ds-svc-stack-row { display: grid; grid-template-columns: 210px 1fr; gap: 1rem; padding: .9rem 1.1rem; align-items: center; }
.ds-svc-stack-row + .ds-svc-stack-row { border-top: 1px solid #EEF2F7; }
.ds-svc-stack-group { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .9rem; color: #0F172A; }
.ds-svc-stack-group i { color: #0d9488; font-size: 1.1rem; }
.ds-svc-stack-items { display: flex; flex-wrap: wrap; gap: .4rem; }
.ds-svc-stack-items span, .ds-svc-tech-cloud span { padding: .3rem .7rem; border-radius: 8px; background: #F1F5F9; border: 1px solid #E2E8F0; font-size: .83rem; font-weight: 600; color: #334155; }
@media (max-width: 575.98px) { .ds-svc-stack-row { grid-template-columns: 1fr; gap: .5rem; } }

.ds-svc-process { list-style: none; padding: 0; margin: 0; position: relative; }
.ds-svc-process::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(#2447D5, #14B8A6); opacity: .25; }
.ds-svc-process li { position: relative; display: flex; gap: 1rem; padding-bottom: 1.25rem; }
.ds-svc-process li:last-child { padding-bottom: 0; }
.ds-svc-step { flex: 0 0 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2447D5, #14B8A6); box-shadow: 0 0 0 5px #fff; position: relative; }
.ds-svc-process h3 { font-size: 1rem; font-weight: 700; margin: .5rem 0 .25rem; }
.ds-svc-process p { font-size: .9rem; color: #64748B; margin: 0; }
.ds-svc-deliver { columns: 2; column-gap: 2rem; }
.ds-svc-deliver li { break-inside: avoid; }
@media (max-width: 575.98px) { .ds-svc-deliver { columns: 1; } }

.ds-svc-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.ds-svc-flow li { position: relative; text-align: center; padding: 1.2rem .8rem; border: 1px solid #E2E8F0; border-radius: 16px; background: #fff; }
.ds-svc-flow li > span { position: relative; display: inline-flex; width: 50px; height: 50px; border-radius: 14px; align-items: center; justify-content: center; font-size: 1.35rem; color: #2447D5; background: #EEF2FF; }
.ds-svc-flow b { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: #0B1B4D; color: #fff; font-size: .72rem; display: flex; align-items: center; justify-content: center; }
.ds-svc-flow h3 { font-size: .98rem; font-weight: 700; margin: .75rem 0 .25rem; }
.ds-svc-flow p { font-size: .82rem; color: #64748B; margin: 0; }
@media (max-width: 1199.98px) { .ds-svc-flow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .ds-svc-flow { grid-template-columns: repeat(2, 1fr); } }

.ds-svc-why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ds-svc-why > div { padding: 1.1rem; border-radius: 16px; background: #F8FAFC; border: 1px solid #EEF2F7; }
.ds-svc-why i { font-size: 1.4rem; color: #0d9488; }
.ds-svc-why h3 { font-size: .98rem; font-weight: 700; margin: .5rem 0 .25rem; }
.ds-svc-why p { font-size: .86rem; color: #64748B; margin: 0; }
@media (max-width: 575.98px) { .ds-svc-why { grid-template-columns: 1fr; } }
.ds-svc-tech-cloud { display: flex; flex-wrap: wrap; gap: .5rem; }

.ds-svc-enquiry { scroll-margin-top: 90px; }
.ds-svc-contact { padding: 2rem; border-radius: 20px; color: rgba(255,255,255,.82); background: var(--ds-grad-dark, linear-gradient(135deg, #0B1B4D, #1E3A8A)); }
.ds-svc-contact h2 { color: #fff; font-weight: 800; font-size: 1.6rem; }
.ds-svc-contact .ds-badge { background: rgba(255,255,255,.12); color: #fff; }
.ds-svc-contact-list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1rem; }
.ds-svc-contact-list li { display: flex; gap: .85rem; align-items: flex-start; }
.ds-svc-contact-list i { flex: 0 0 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); color: #5eead4; font-size: 1.1rem; }
.ds-svc-contact-list small { display: block; color: rgba(255,255,255,.6); font-size: .75rem; }
.ds-svc-contact-list a { color: #fff; font-weight: 600; text-decoration: none; }
.ds-svc-steps-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ds-svc-steps-mini div { padding: .7rem .5rem; border-radius: 12px; background: rgba(255,255,255,.08); font-size: .78rem; text-align: center; color: #e2e8f0; }
.ds-svc-steps-mini b { display: block; font-size: 1rem; color: #5eead4; }
.ds-svc-done { display: inline-flex; width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; align-items: center; justify-content: center; font-size: 2.2rem; color: #0d9488; background: #CCFBF1; }
.ds-svc-about { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff !important; font-weight: 600; font-size: .9rem; }
.ds-svc-about i { color: #5eead4; }

/* ---------- Branding: logos & fonts (v19) ---------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .ds-brand, .ds-section-title, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--ds-font-heading, var(--bs-body-font-family)); }
.ds-brand img.ds-brand-logo, .ds-header .ds-brand img.ds-brand-logo { border-radius: 0; width: auto !important; max-width: 220px; object-fit: contain; }
@media (max-width: 1399.98px) { .ds-header .ds-brand img.ds-brand-logo { max-height: 40px; max-width: 170px; } }
.ds-footer .ds-brand-footer-img img.ds-brand-logo { max-width: 240px; }

/* ---------- Homepage section backgrounds (Admin → Content → Homepage → Background) ---------- */
.ds-bg-white { background: #fff; }
.ds-bg-light { background: #F8FAFC; }
.ds-bg-blue { background: linear-gradient(180deg, #EEF2FF 0%, #F5F7FF 100%); }
.ds-bg-teal { background: linear-gradient(180deg, #ECFDF8 0%, #F3FBF9 100%); }
.ds-bg-warm { background: linear-gradient(180deg, #FFF7ED 0%, #FFFBF5 100%); }
.ds-bg-lavender { background: linear-gradient(180deg, #F5F3FF 0%, #FAF8FF 100%); }
.ds-bg-rose { background: linear-gradient(180deg, #FFF1F2 0%, #FFF8F8 100%); }
.ds-bg-sky { background: linear-gradient(180deg, #F0F9FF 0%, #F7FCFF 100%); }
.ds-bg-dark, .ds-bg-brand { color: rgba(255,255,255,.82); position: relative; }
.ds-bg-dark { background: radial-gradient(1200px 400px at 10% 0%, rgba(36,71,213,.35), transparent 60%), linear-gradient(135deg, #0B1B4D 0%, #111C44 60%, #0F2A5F 100%); }
.ds-bg-brand { background: linear-gradient(120deg, #2447D5 0%, #1E40AF 45%, #0D9488 100%); }
.ds-bg-dark .ds-section-title, .ds-bg-brand .ds-section-title, .ds-bg-dark > .container > h2, .ds-bg-brand > .container > h2 { color: #fff; }
.ds-bg-dark .ds-section-sub, .ds-bg-brand .ds-section-sub { color: rgba(255,255,255,.75); }
.ds-bg-dark .ds-section-head .ds-link-arrow, .ds-bg-brand .ds-section-head .ds-link-arrow,
.ds-bg-dark .ds-section-head a, .ds-bg-brand .ds-section-head a { color: #fff; }
.ds-bg-dark .ds-steps h3, .ds-bg-brand .ds-steps h3, .ds-bg-dark .ds-steps p, .ds-bg-brand .ds-steps p { color: inherit; }
.ds-bg-blue, .ds-bg-teal, .ds-bg-warm, .ds-bg-lavender, .ds-bg-rose, .ds-bg-sky { border-top: 1px solid rgba(15,23,42,.04); border-bottom: 1px solid rgba(15,23,42,.04); }

/* ---------- Internship programs page (v19) ---------- */
.ds-intern-levels { display: grid; gap: .6rem; }
.ds-intern-level { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff !important; text-decoration: none; transition: background .15s, transform .15s; }
.ds-intern-level:hover { background: rgba(255,255,255,.14); transform: translateX(3px); }
.ds-intern-level > i { font-size: 1.6rem; color: #5eead4; }
.ds-intern-level strong { display: block; font-size: 1rem; }
.ds-intern-level span { display: block; font-size: .82rem; color: rgba(255,255,255,.7); }
.ds-intern-level > div { flex: 1; }
.ds-intern-level b { min-width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fff; color: #0B1B4D; font-size: .95rem; }
.ds-level-tabs { display: flex; flex-wrap: wrap; gap: .4rem; padding: .3rem; border-radius: 14px; background: #F1F5F9; }
.ds-level-tabs a { padding: .45rem .9rem; border-radius: 10px; font-weight: 600; font-size: .88rem; color: #334155; text-decoration: none; }
.ds-level-tabs a span { display: inline-block; margin-left: .25rem; padding: 0 .4rem; border-radius: 999px; background: #E2E8F0; font-size: .75rem; }
.ds-level-tabs a.active { background: #fff; color: #2447D5; box-shadow: 0 2px 8px rgba(15,23,42,.08); }
.ds-level-tabs a.active span { background: #EEF2FF; color: #2447D5; }

/* ---------- Services page — agency layout (v20) ---------- */
.ds-sx-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #2447D5; margin-bottom: .75rem; }
.ds-sx-eyebrow-light { color: #5eead4; }
.ds-sx-title { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #0B1B4D; margin-bottom: 1rem; }
.ds-sx-text { color: #64748B; font-size: 1.03rem; line-height: 1.7; }

.ds-sx-hero { position: relative; overflow: hidden; padding: 5.5rem 0 5rem; color: rgba(255,255,255,.8);
  background: radial-gradient(900px 420px at 85% 10%, rgba(20,184,166,.22), transparent 60%), radial-gradient(800px 500px at 0% 100%, rgba(36,71,213,.45), transparent 60%), linear-gradient(135deg, #070F2E 0%, #0B1B4D 55%, #102A6B 100%); }
.ds-sx-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000 30%, transparent); }
.ds-sx-hero .container { position: relative; }
.ds-sx-hero h1 { color: #fff; font-weight: 800; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 1.2rem; }
.ds-sx-hero .lead { color: rgba(255,255,255,.75); max-width: 620px; }
.ds-sx-code { position: relative; border-radius: 20px; background: rgba(15,23,42,.75); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px rgba(0,0,0,.35); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; }
.ds-sx-code-bar { display: flex; align-items: center; gap: .4rem; padding: .8rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.ds-sx-code-bar span { width: 11px; height: 11px; border-radius: 50%; background: #F87171; } .ds-sx-code-bar span:nth-child(2) { background: #FBBF24; } .ds-sx-code-bar span:nth-child(3) { background: #34D399; }
.ds-sx-code-bar b { margin-left: .6rem; font-weight: 500; color: rgba(255,255,255,.55); font-size: .8rem; }
.ds-sx-code-body { padding: 1.2rem 1.3rem 1.6rem; color: #E2E8F0; line-height: 2; }
.ds-sx-code-body i { font-style: normal; color: rgba(255,255,255,.3); margin-right: 1rem; user-select: none; }
.ds-sx-code-body em { font-style: normal; color: #C084FC; } .ds-sx-code-body s { text-decoration: none; color: #5EEAD4; } .ds-sx-code-body u { text-decoration: none; color: #FBBF24; }
.ds-sx-float { position: absolute; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 14px; background: #fff; color: #0F172A; box-shadow: 0 16px 40px rgba(0,0,0,.25); font-family: var(--bs-body-font-family); }
.ds-sx-float i { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #EEF2FF; color: #2447D5; font-size: 1.1rem; }
.ds-sx-float b { display: block; font-size: .9rem; } .ds-sx-float small { color: #64748B; font-size: .75rem; }
.ds-sx-float-1 { right: -18px; top: -22px; } .ds-sx-float-2 { left: -26px; bottom: -24px; } .ds-sx-float-2 i { background: #CCFBF1; color: #0d9488; }

.ds-sx-why { background: #fff; }
.ds-sx-why-visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.5rem; border-radius: 28px; background: linear-gradient(135deg, #EEF2FF, #ECFDF8); }
.ds-sx-why-card { aspect-ratio: 1 / .85; border-radius: 20px; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.1rem; color: #fff; font-weight: 700; }
.ds-sx-why-card i { font-size: 2rem; margin-bottom: auto; opacity: .95; }
.ds-sx-why-card-1 { background: linear-gradient(135deg, #2447D5, #4F6EF7); } .ds-sx-why-card-2 { background: linear-gradient(135deg, #0d9488, #14B8A6); transform: translateY(18px); }
.ds-sx-why-card-3 { background: linear-gradient(135deg, #7C3AED, #A78BFA); } .ds-sx-why-card-4 { background: linear-gradient(135deg, #EA580C, #F59E0B); transform: translateY(18px); }
.ds-sx-call { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); display: flex; align-items: center; gap: .75rem; padding: .8rem 1.2rem; border-radius: 16px; background: #0B1B4D; color: #fff !important; text-decoration: none; white-space: nowrap; box-shadow: 0 16px 40px rgba(11,27,77,.35); }
.ds-sx-call i { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #14B8A6; font-size: 1.1rem; }
.ds-sx-call small { display: block; color: #5eead4; font-weight: 700; } .ds-sx-call b { font-size: 1.05rem; }
.ds-sx-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; }
.ds-sx-stats > div { padding: 1.2rem 1.2rem 1.1rem; border-radius: 18px; border: 1px solid #E2E8F0; background: #F8FAFC; }
.ds-sx-stats strong { display: block; font-family: var(--ds-font-heading, inherit); font-size: 2.1rem; font-weight: 800; line-height: 1; background: linear-gradient(90deg, #2447D5, #0d9488); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ds-sx-stats span { display: block; font-weight: 700; color: #0F172A; margin-top: .4rem; }
.ds-sx-stats p { margin: .3rem 0 0; font-size: .85rem; color: #64748B; }
.ds-sx-call-inline { display: inline-flex; align-items: center; gap: .6rem; color: #0F172A !important; text-decoration: none; font-weight: 700; }
.ds-sx-call-inline i { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #EEF2FF; color: #2447D5; }
.ds-sx-call-inline small { display: block; font-size: .75rem; color: #64748B; font-weight: 600; }
.ds-sx-why-list li { margin-bottom: .5rem; }

.ds-sx-services { background: #F8FAFC; }
.ds-sx-list { border-top: 1px solid #E2E8F0; }
.ds-sx-row { display: grid; grid-template-columns: 56px 56px minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; padding: 1.6rem 1rem; border-bottom: 1px solid #E2E8F0; border-radius: 0; transition: background .2s, padding .2s; }
.ds-sx-row:hover { background: #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.ds-sx-num { font-family: var(--ds-font-heading, inherit); font-size: 1.6rem; font-weight: 800; color: #CBD5E1; transition: color .2s; }
.ds-sx-row:hover .ds-sx-num { color: #2447D5; }
.ds-sx-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #2447D5; background: #EEF2FF; transition: background .2s, color .2s; }
.ds-sx-row:hover .ds-sx-icon { background: #2447D5; color: #fff; }
.ds-sx-main h3 { font-size: 1.2rem; font-weight: 800; margin: 0 0 .35rem; } .ds-sx-main h3 a { color: #0B1B4D; text-decoration: none; }
.ds-sx-main h3 a:hover { color: #2447D5; }
.ds-sx-main p { margin: 0; color: #64748B; font-size: .93rem; }
.ds-sx-price { display: inline-flex; gap: .35rem; align-items: center; margin-top: .5rem; font-size: .82rem; font-weight: 700; color: #0d9488; }
.ds-sx-points { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; font-size: .86rem; color: #334155; }
.ds-sx-points li { display: flex; gap: .4rem; } .ds-sx-points i { color: #0d9488; }
.ds-sx-more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .9rem; color: #2447D5; text-decoration: none; white-space: nowrap; }
.ds-sx-more i { transition: transform .2s; } .ds-sx-more:hover i { transform: translate(2px, -2px); }
.ds-sx-row .ds-sx-more { padding: .55rem 1rem; border-radius: 999px; border: 1px solid #C7D2FE; background: #fff; }
.ds-sx-row:hover .ds-sx-more { background: #2447D5; color: #fff; border-color: #2447D5; }
@media (max-width: 1199.98px) { .ds-sx-row { grid-template-columns: 44px 52px minmax(0, 1fr) auto; } .ds-sx-points { grid-column: 3 / 4; } .ds-sx-row .ds-sx-more { grid-column: 4; grid-row: 1; } }
@media (max-width: 767.98px) { .ds-sx-row { grid-template-columns: 52px minmax(0, 1fr); gap: .9rem; padding: 1.3rem .5rem; } .ds-sx-num { display: none; }
  .ds-sx-points, .ds-sx-row .ds-sx-more { grid-column: 1 / -1; grid-row: auto; justify-self: start; } }

.ds-sx-core { color: rgba(255,255,255,.78); background: radial-gradient(700px 400px at 100% 0%, rgba(20,184,166,.25), transparent 60%), linear-gradient(135deg, #0B1B4D, #172554 60%, #1E3A8A); }
.ds-sx-core .ds-sx-text { color: rgba(255,255,255,.72); }
.ds-sx-core-list { display: grid; gap: 1rem; }
.ds-sx-core-item { position: relative; display: flex; gap: 1.1rem; padding: 1.4rem 1.4rem; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background .2s, transform .2s; }
.ds-sx-core-item:hover { background: rgba(255,255,255,.1); transform: translateX(4px); }
.ds-sx-core-item > span { flex: 0 0 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #0B1B4D; background: linear-gradient(135deg, #5EEAD4, #A5B4FC); }
.ds-sx-core-item h3 { color: #fff; font-size: 1.1rem; font-weight: 700; margin: .2rem 0 .35rem; }
.ds-sx-core-item p { margin: 0; font-size: .92rem; color: rgba(255,255,255,.7); }
.ds-sx-core-item b { position: absolute; right: 1.2rem; top: 1rem; font-size: 1.6rem; font-weight: 800; color: rgba(255,255,255,.12); }

.ds-sx-platforms { background: #fff; }
.ds-sx-platform { position: relative; display: flex; flex-direction: column; padding: 1.6rem; border-radius: 22px; border: 1px solid #E2E8F0; background: #fff; transition: transform .2s, box-shadow .2s, border-color .2s; overflow: hidden; }
.ds-sx-platform::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #2447D5, #14B8A6); opacity: 0; transition: opacity .2s; }
.ds-sx-platform:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,23,42,.08); border-color: #C7D2FE; }
.ds-sx-platform:hover::after { opacity: 1; }
.ds-sx-platform-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; background: linear-gradient(135deg, #2447D5, #14B8A6); margin-bottom: 1rem; }
.ds-sx-platform h3 { font-size: 1.15rem; font-weight: 800; color: #0B1B4D; margin-bottom: .5rem; }
.ds-sx-platform p { color: #64748B; font-size: .92rem; flex-grow: 1; }
.ds-sx-spec { margin: 0 0 1rem; padding: .8rem; border-radius: 12px; background: #F8FAFC; display: grid; gap: .35rem; font-size: .82rem; }
.ds-sx-spec div { display: flex; justify-content: space-between; gap: .5rem; } .ds-sx-spec dt { font-weight: 600; color: #64748B; } .ds-sx-spec dd { margin: 0; font-weight: 700; color: #0F172A; text-align: right; }

.ds-sx-tech { background: linear-gradient(180deg, #EEF2FF, #F5F7FF); }
.ds-sx-tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.ds-sx-tech-grid span { display: flex; align-items: center; gap: .55rem; padding: .8rem .9rem; border-radius: 14px; background: #fff; border: 1px solid #E0E7FF; font-weight: 700; font-size: .9rem; color: #0F172A; transition: transform .15s, box-shadow .15s; }
.ds-sx-tech-grid span:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(36,71,213,.1); }
.ds-sx-tech-grid i { font-size: 1.15rem; color: #2447D5; }
.ds-sx-process { background: #fff; }
.ds-sx-products { background: #F8FAFC; }
.ds-sx-testimonials { background: linear-gradient(180deg, #ECFDF8, #F6FDFB); }
.ds-sx-contact { background: #fff; }
.ds-sx-spec { grid-template-columns: 1fr 1fr; gap: .6rem; }
.ds-sx-spec div { flex-direction: column; justify-content: flex-start; gap: .1rem; }
.ds-sx-spec dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.ds-sx-spec dd { text-align: left; }
.ds-sx-float-2 { bottom: -40px; left: -30px; }
.ds-sx-code-body { padding-bottom: 2.4rem; }
@media (max-width: 991.98px) { .ds-sx-why-visual { margin-bottom: 1.5rem; } }
@media (max-width: 575.98px) { .ds-sx-core-item b { display: none; } .ds-sx-row { align-items: start; } }

/* ==========================================================================
   Service pages — dark agency design (v21): services.php + service.php
   Palette: ink #0B0B10 · card #16161D · orange #F97316 · indigo #4F46E5 · cream #F6F1EA · navy #0E1530
   ========================================================================== */
.ap-page { --ap-ink: #0B0B10; --ap-card: #15151C; --ap-line: #262631; --ap-orange: #F97316; --ap-orange-2: #FB923C; --ap-blue: #3B5BFD;
  --ap-cream: #F6F1EA; --ap-navy: #0E1530; --ap-muted: #9CA3AF; color: #E5E7EB; }
.ap-page section { padding: 5.5rem 0; position: relative; }
.ap-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ap-orange); margin-bottom: .9rem; }
.ap-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--ap-orange); border-radius: 2px; }
.ap-head { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.ap-head .ap-eyebrow { justify-content: center; }
.ap-h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: #fff; margin-bottom: 1rem; }
.ap-h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 800; line-height: 1.2; color: #fff; margin-bottom: .8rem; }
.ap-muted { color: var(--ap-muted); font-size: 1rem; line-height: 1.7; }
.ap-muted-dark { color: #57534E; font-size: 1rem; line-height: 1.7; }

/* buttons */
.ap-page .btn { border-radius: 10px; font-weight: 700; padding: .8rem 1.5rem; }
.ap-btn-primary { background: linear-gradient(135deg, #3B5BFD, #4F46E5); color: #fff; border: 0; box-shadow: 0 10px 30px rgba(59,91,253,.35); }
.ap-btn-primary:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.ap-btn-dark { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.ap-btn-dark:hover { background: rgba(255,255,255,.12); color: #fff; }
.ap-btn-orange { background: var(--ap-orange); color: #fff; border: 0; border-radius: 999px !important; box-shadow: 0 10px 28px rgba(249,115,22,.35); }
.ap-btn-orange:hover { background: #EA580C; color: #fff; }

/* hero */
.ap-hero { overflow: hidden; padding: 6.5rem 0 6rem !important; background: radial-gradient(900px 380px at 50% -10%, rgba(79,70,229,.35), transparent 70%), linear-gradient(180deg, #0B0B14 0%, #0B0B10 100%); }
.ap-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.ap-hero .container { position: relative; }
.ap-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #E5E7EB; font-size: .82rem; font-weight: 600; margin-bottom: 1.4rem; }
.ap-pill i { color: var(--ap-orange); }
.ap-hero h1 { color: #fff; font-weight: 800; font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4rem); line-height: 1.08; letter-spacing: -.035em; margin: 0 auto 1.3rem; max-width: 960px; }
.ap-grad { background: linear-gradient(90deg, #60A5FA 0%, #818CF8 45%, #C084FC 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ap-lead { color: #A1A1AA; font-size: 1.08rem; line-height: 1.7; max-width: 680px; margin: 0 auto 2rem; }
.ap-hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 2rem; }
.ap-hero-chips span { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font-size: .82rem; color: #D4D4D8; }
.ap-hero-chips i { color: var(--ap-orange); }

/* cream section */
.ap-cream { background: var(--ap-cream); color: #1C1917; }
.ap-cream .ap-h2 { color: #0C0A09; }
.ap-rich { color: #57534E; line-height: 1.75; }
.ap-rich p { margin-bottom: .9rem; } .ap-rich h2, .ap-rich h3 { color: #0C0A09; font-size: 1.15rem; margin-top: 1.2rem; } .ap-rich ul { padding-left: 1.2rem; }
.ap-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; }
.ap-stats > div { padding: 1.2rem; border-radius: 16px; background: #fff; border: 1px solid #ECE5DA; box-shadow: 0 6px 20px rgba(28,25,23,.04); }
.ap-stats i { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; align-items: center; justify-content: center; background: #FFF1E6; color: var(--ap-orange); font-size: 1.1rem; margin-bottom: .6rem; }
.ap-stats strong { display: block; color: #1C1917; font-weight: 700; font-size: .98rem; line-height: 1.35; }
.ap-stats-num strong { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.ap-stats-num em { display: block; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #78716C; margin-top: .25rem; }
.ap-stats-num p { margin: .6rem 0 0; font-size: .82rem; color: #A8A29E; line-height: 1.5; }
.ap-call { display: inline-flex; align-items: center; gap: .6rem; color: #1C1917 !important; text-decoration: none; font-weight: 700; }
.ap-call > span { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1C1917; color: #fff; }
.ap-call small { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #78716C; }
.ap-photo { width: 100%; border-radius: 24px; object-fit: cover; aspect-ratio: 9 / 10; box-shadow: 0 30px 60px rgba(28,25,23,.18); }
.ap-art { position: relative; aspect-ratio: 9 / 10; border-radius: 24px; padding: 2rem; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .7rem;
  background: radial-gradient(500px 300px at 80% 10%, rgba(249,115,22,.45), transparent 60%), radial-gradient(500px 400px at 0% 100%, rgba(79,70,229,.55), transparent 60%), #111118; box-shadow: 0 30px 60px rgba(28,25,23,.18); }
.ap-art-icon { position: absolute; top: 2rem; left: 2rem; width: 84px; height: 84px; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: #fff; background: linear-gradient(135deg, var(--ap-orange), #F43F5E); box-shadow: 0 16px 40px rgba(249,115,22,.4); }
.ap-art-chip { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; font-weight: 600; backdrop-filter: blur(6px); margin-left: calc(var(--i, 0) * 6%); }
.ap-art-chip i { color: var(--ap-orange-2); }

/* dark sections & cards */
.ap-dark { background: var(--ap-ink); }
.ap-dark-2 { background: linear-gradient(180deg, #0B0B10 0%, #101018 100%); }
.ap-card { position: relative; display: flex; flex-direction: column; padding: 1.75rem; border-radius: 18px; background: var(--ap-card); border: 1px solid var(--ap-line); transition: transform .2s, border-color .2s, box-shadow .2s; }
.ap-card:hover { transform: translateY(-4px); border-color: rgba(249,115,22,.45); box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.ap-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--ap-orange); color: #fff; font-size: 1.15rem; margin-bottom: 1.2rem; box-shadow: 0 8px 20px rgba(249,115,22,.35); }
.ap-card h3 { font-size: 1.08rem; font-weight: 700; color: #fff; margin-bottom: .55rem; }
.ap-card h3 a { color: #fff; text-decoration: none; }
.ap-card h3 a::after { content: ""; position: absolute; inset: 0; }
.ap-card p { color: var(--ap-muted); font-size: .9rem; line-height: 1.65; margin-bottom: 1.2rem; flex-grow: 1; }
.ap-more { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; font-size: .85rem; font-weight: 600; color: #D4D4D8; text-decoration: none; }
.ap-card:hover .ap-more, .ap-more:hover { color: var(--ap-orange); }
.ap-spec { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem .8rem; padding-top: .9rem; margin-bottom: 1rem; border-top: 1px solid var(--ap-line); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #71717A; }
.ap-spec b { color: #D4D4D8; font-weight: 700; }
.ap-deliver { display: flex; gap: .7rem; align-items: flex-start; height: 100%; padding: 1.1rem 1.2rem; border-radius: 14px; background: var(--ap-card); border: 1px solid var(--ap-line); color: #E5E7EB; font-weight: 500; }
.ap-deliver i { color: var(--ap-orange); font-size: 1.15rem; margin-top: .05rem; }
.ap-ideal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-top: 2.5rem; }
.ap-ideal span { padding: .45rem .9rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--ap-line); color: #D4D4D8; font-size: .86rem; }
.ap-ideal .ap-ideal-label { background: var(--ap-orange); border-color: var(--ap-orange); color: #fff; font-weight: 700; }

/* photo band with overlay card */
.ap-photo-band { background: linear-gradient(180deg, var(--ap-cream) 50%, var(--ap-ink) 50%); }
.ap-band { --ap-bg: none; position: relative; border-radius: 28px; overflow: hidden; min-height: 520px; padding: 2.5rem; display: flex; justify-content: flex-end; align-items: center;
  background: var(--ap-bg) center / cover no-repeat, radial-gradient(600px 400px at 15% 30%, rgba(249,115,22,.55), transparent 60%), radial-gradient(700px 500px at 30% 100%, rgba(79,70,229,.6), transparent 60%), #1A1A24;
  box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.ap-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.45)); }
.ap-band-card { position: relative; width: min(520px, 100%); padding: 2rem; border-radius: 22px; background: rgba(20,20,26,.82); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); }
.ap-steps, .ap-core { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 1rem; }
.ap-steps li, .ap-core li { display: flex; gap: .9rem; align-items: flex-start; }
.ap-steps li > span, .ap-core li > span { flex: 0 0 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ap-orange); color: #fff; font-weight: 800; font-size: .9rem; }
.ap-steps h3, .ap-core h3 { color: #fff; font-size: .98rem; font-weight: 700; margin: .1rem 0 .2rem; }
.ap-steps p, .ap-core p { color: var(--ap-muted); font-size: .85rem; margin: 0; line-height: 1.55; }

/* technical ecosystem */
.ap-navy { background: radial-gradient(800px 300px at 50% 0%, rgba(59,91,253,.25), transparent 70%), var(--ap-navy); }
.ap-tech { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.ap-tech > div { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1.2rem .6rem; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: background .2s, transform .2s, border-color .2s; text-align: center; }
.ap-tech > div:hover { background: rgba(255,255,255,.08); border-color: rgba(96,165,250,.45); transform: translateY(-3px); }
.ap-tech i { font-size: 1.6rem; color: #93C5FD; }
.ap-tech span { font-size: .8rem; font-weight: 600; color: #CBD5E1; }
@media (max-width: 991.98px) { .ap-tech { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575.98px) { .ap-tech { grid-template-columns: repeat(3, 1fr); } }

/* light sections (FAQs, testimonials, process) */
.ap-light { background: #F8F8FA; color: #18181B; }
.ap-light-2 { background: #fff; }
.ap-light .ap-h2 { color: #0B0B10; } .ap-light .ap-muted { color: #71717A; }
.ap-faq { max-width: 860px; }
.ap-faq .accordion-item { border-radius: 14px !important; border: 1px solid #E4E4E7; margin-bottom: .7rem; overflow: hidden; }
.ap-faq .accordion-button { font-weight: 700; color: #0B0B10; }
.ap-faq .accordion-button:not(.collapsed) { background: #FFF7ED; color: #C2410C; box-shadow: none; }
.ap-light .ds-testimonial { border-radius: 18px; text-align: center; }
.ap-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.ap-flow li { text-align: center; padding: 1.4rem .9rem; border-radius: 18px; background: #fff; border: 1px solid #E4E4E7; }
.ap-flow li > span { position: relative; display: inline-flex; width: 52px; height: 52px; border-radius: 14px; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; background: var(--ap-orange); }
.ap-flow b { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: #0B0B10; color: #fff; font-size: .72rem; display: flex; align-items: center; justify-content: center; }
.ap-flow h3 { font-size: .98rem; font-weight: 700; margin: .8rem 0 .25rem; color: #0B0B10; } .ap-flow p { font-size: .82rem; color: #71717A; margin: 0; }
@media (max-width: 1199.98px) { .ap-flow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .ap-flow { grid-template-columns: repeat(2, 1fr); } }

/* contact (dark navy, form re-skinned) */
.ap-contact { background: linear-gradient(180deg, #0C1330 0%, #0A1028 100%); }
.ap-contact .ds-svc-contact { background: transparent; padding: .5rem 0; }
.ap-contact .ds-svc-contact .ds-badge { background: transparent; color: var(--ap-orange); padding: 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.ap-contact .ds-svc-contact .ds-badge i { display: none; }
.ap-contact .ds-svc-contact h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.ap-contact .ds-svc-contact-list i { background: rgba(249,115,22,.14); color: var(--ap-orange); }
.ap-contact .ds-svc-steps-mini div { background: rgba(255,255,255,.05); }
.ap-contact .ds-svc-steps-mini b { color: var(--ap-orange); }
.ap-contact .ds-panel { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); color: #E5E7EB; box-shadow: none; }
.ap-contact .ds-panel h3, .ap-contact .form-label { color: #E5E7EB; }
.ap-contact .ds-panel .text-muted { color: #9CA3AF !important; }
.ap-contact .form-control, .ap-contact .form-select { background-color: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: #fff; }
.ap-contact .form-control::placeholder { color: #6B7280; }
.ap-contact .form-control:focus, .ap-contact .form-select:focus { background-color: rgba(255,255,255,.07); border-color: #3B5BFD; color: #fff; box-shadow: 0 0 0 .2rem rgba(59,91,253,.25); }
.ap-contact .form-select option { color: #111; }
.ap-contact .form-control[readonly] { color: #CBD5E1; }
.ap-contact .ds-panel .btn-primary { background: linear-gradient(135deg, #3B5BFD, #4F46E5); border: 0; border-radius: 10px; width: 100%; }
.ap-contact .ds-panel .col-12.d-flex { flex-direction: column; align-items: stretch !important; }
.ap-contact .ds-panel a { color: #93C5FD; }
.ap-contact .ds-svc-done { background: rgba(20,184,166,.15); }
.ap-contact .ds-panel .btn-outline-primary { color: #93C5FD; border-color: #93C5FD; }

@media (max-width: 991.98px) { .ap-page section { padding: 4rem 0; } .ap-band { min-height: 0; padding: 1rem; } .ap-band-card { padding: 1.5rem; } .ap-photo-band { background: var(--ap-ink); } }
@media (max-width: 575.98px) { .ap-stats { grid-template-columns: 1fr; } .ap-art { aspect-ratio: auto; min-height: 380px; } .ap-art-chip { margin-left: 0; } }
.ap-band-art { position: absolute; left: 2.5rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1.2rem; max-width: 40%; }
.ap-band-icon { width: 110px; height: 110px; border-radius: 30px; display: flex; align-items: center; justify-content: center; font-size: 3.2rem; color: #fff; background: linear-gradient(135deg, #F97316, #F43F5E); box-shadow: 0 20px 50px rgba(249,115,22,.45); }
.ap-band-tags { display: grid; gap: .6rem; }
.ap-band-tags span { display: inline-flex; align-items: center; gap: .55rem; width: fit-content; padding: .65rem 1rem; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #fff; font-weight: 600; font-size: .9rem; backdrop-filter: blur(6px); }
.ap-band-tags i { color: #FDBA74; }
@media (max-width: 991.98px) { .ap-band-art { display: none; } }
@media (max-width: 575.98px) { .ap-art-icon { position: static; margin-bottom: auto; width: 64px; height: 64px; font-size: 1.8rem; } .ap-card { padding: 1.4rem; } }
.ap-price { display: inline-flex; align-items: center; gap: .35rem; margin: -.4rem 0 1rem; font-size: .82rem; font-weight: 700; color: #FDBA74; }