/* =============================================================
   OTM Solutions Starter — main.css
   Full plain-CSS stylesheet: layout, components, sections.
   All Tailwind utilities are converted to vanilla CSS.
   ============================================================= */

/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--clr-text);
  background: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── CSS Variables ── */
:root {
  /* Brand */
  --clr-green  : #1DC8A8;
  --clr-navy   : #1B2B4B;
  --clr-blue   : #3B5BDB;
  --clr-purple : #7C3AED;
  --clr-orange : #F97316;

  /* Neutrals */
  --clr-bg     : #FFFFFF;
  --clr-bg-alt : #F8FAFC;
  --clr-border  : #E2E8F0;
  --clr-text    : #1A2233;
  --clr-muted   : #64748B;

  /* Typography */
  --fs-xs   : .75rem;
  --fs-sm   : .875rem;
  --fs-base : 1rem;
  --fs-lg   : 1.125rem;
  --fs-xl   : 1.25rem;
  --fs-2xl  : 1.5rem;
  --fs-3xl  : 1.875rem;
  --fs-4xl  : 2.25rem;
  --fs-5xl  : 3rem;
  --fs-6xl  : 3.75rem;

  /* Spacing */
  --section-py  : 5rem;
  --container-max: 1280px;
  --container-px : 1.5rem;

  /* Radius */
  --radius-sm : .375rem;
  --radius    : .75rem;
  --radius-lg : 1.25rem;
  --radius-xl : 1.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card  : 0 4px 24px rgba(0,0,0,.07);
  --shadow-hover : 0 12px 40px rgba(0,0,0,.13);

  /* Header */
  --header-h: 72px;

  /* Transitions */
  --t-fast   : 150ms ease;
  --t-normal : 250ms ease;
  --t-slow   : 400ms ease;
}

/* ── Container ── */
.otm-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* ── Section shared ── */
.otm-section {
  padding-block: var(--section-py);
}
.otm-section--sm { padding-block: 3rem; }
.otm-section--lg { padding-block: 7rem; }

.otm-section-header {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: 3.5rem;
}
.otm-section-header h2 {
  font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl));
  font-weight: 800;
  line-height: 1.15;
  color: var(--clr-navy);
}
.otm-section-header p {
  margin-top: 1rem;
  font-size: var(--fs-lg);
  color: var(--clr-muted);
}

/* ── Eyebrow ── */
.otm-eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .75rem;
  padding: .25rem .75rem;
  border-radius: var(--radius-full);
}
.otm-eyebrow--green  { color: var(--clr-green); background: rgba(29,200,168,.1); }
.otm-eyebrow--blue   { color: var(--clr-blue);  background: rgba(59,91,219,.1); }
.otm-eyebrow--navy   { color: #fff; background: rgba(255,255,255,.15); }

/* ── Grids ── */
.otm-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.otm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.otm-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* ── Buttons ── */
.otm-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  transition: background var(--t-normal), color var(--t-normal), transform var(--t-fast), box-shadow var(--t-normal);
  white-space: nowrap;
  cursor: pointer;
}
.otm-btn:hover { transform: translateY(-2px); }
.otm-btn:active { transform: translateY(0); }

.otm-btn-primary {
  background: var(--clr-green);
  color: #fff;
}
.otm-btn-primary:hover { background: #17b096; box-shadow: 0 6px 20px rgba(29,200,168,.35); }

.otm-btn-secondary {
  background: var(--clr-navy);
  color: #fff;
}
.otm-btn-secondary:hover { background: #16223c; }

.otm-btn-outline {
  background: transparent;
  color: var(--clr-navy);
  border: 1.5px solid var(--clr-border);
}
.otm-btn-outline:hover { border-color: var(--clr-navy); background: var(--clr-navy); color: #fff; }

.otm-btn-white {
  background: #fff;
  color: var(--clr-navy);
}
.otm-btn-white:hover { background: var(--clr-bg-alt); }

.otm-btn--sm { padding: .5rem 1rem; font-size: var(--fs-xs); }
.otm-btn--lg { padding: 1rem 2rem; font-size: var(--fs-base); }

/* ── Tags ── */
.otm-tag {
  display: inline-block;
  padding: .2em .6em;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
}
.otm-tag--green  { background: rgba(29,200,168,.12); color: var(--clr-green); }
.otm-tag--blue   { background: rgba(59,91,219,.12);  color: var(--clr-blue); }
.otm-tag--purple { background: rgba(124,58,237,.12); color: var(--clr-purple); }
.otm-tag--orange { background: rgba(249,115,22,.12); color: var(--clr-orange); }

/* ── Icons ── */
.otm-icon { display: inline-block; vertical-align: middle; }
.otm-icon--xs  { width: 1rem;  height: 1rem; }
.otm-icon--sm  { width: 1.25rem; height: 1.25rem; }
.otm-icon--md  { width: 1.5rem;  height: 1.5rem; }
.otm-icon--lg  { width: 2rem;  height: 2rem; }

/* ── Check list ── */
.otm-check-list { display: flex; flex-direction: column; gap: .5rem; }
.otm-check-list li {
  padding-left: 1.75rem;
  position: relative;
  font-size: var(--fs-sm);
  color: var(--clr-muted);
}
.otm-check-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .15em;
  width: 1.1rem; height: 1.1rem;
  background-color: var(--clr-green);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

/* ── Gradient text ── */
.otm-gradient-text {
  background: linear-gradient(135deg, var(--clr-green) 0%, var(--clr-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ======================================================
   PROMO BANNER
   ====================================================== */
.otm-promo-banner {
  background: var(--clr-navy);
  color: #fff;
  padding: .625rem var(--container-px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  position: relative;
  z-index: 1000;
}
.otm-promo-banner a { color: var(--clr-green); text-decoration: underline; }
.otm-promo-banner a:hover { color: #fff; }
.otm-promo-close {
  position: absolute;
  right: 1rem;
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 1.2rem;
  cursor: pointer;
  padding: .25rem;
  transition: color var(--t-fast);
}
.otm-promo-close:hover { color: #fff; }

/* ======================================================
   HEADER
   ====================================================== */
.otm-site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  height: var(--header-h);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-normal), box-shadow var(--t-normal), transform var(--t-normal);
}
.otm-site-header.is-scrolled {
  border-color: var(--clr-border);
  box-shadow: 0 2px 24px rgba(0,0,0,.06);
}
.otm-site-header.is-hidden { transform: translateY(-100%); }

.otm-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 2rem;
}

/* Logo */
.otm-header__logo {
  flex-shrink: 0;
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--clr-navy);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.otm-header__logo img { height: 36px; width: auto; }
.otm-logo-mark { color: var(--clr-green); }

/* Nav */
.otm-header__nav { display: flex; align-items: center; gap: 0; list-style: none; }

.otm-nav-item { position: relative; }

.otm-nav-link {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--clr-navy);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.otm-nav-link:hover,
.otm-nav-link[aria-expanded="true"] { color: var(--clr-green); background: rgba(29,200,168,.06); }

.otm-nav-chevron {
  width: .85rem; height: .85rem;
  transition: transform var(--t-fast);
}
[aria-expanded="true"] .otm-nav-chevron { transform: rotate(180deg); }

/* Header Actions */
.otm-header__actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.otm-header__login   { font-size: var(--fs-sm); font-weight: 500; color: var(--clr-navy); transition: color var(--t-fast); }
.otm-header__login:hover { color: var(--clr-green); }

/* Mega Panel */
.otm-mega-panel {
  position: absolute;
  top: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 680px;
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  padding: 1.5rem;
  display: none;
  z-index: 600;
}
.otm-mega-panel.is-open { display: block; }

.otm-mega-panel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.otm-mega-item {
  display: flex;
  gap: .75rem;
  padding: .75rem;
  border-radius: var(--radius);
  transition: background var(--t-fast);
}
.otm-mega-item:hover { background: var(--clr-bg-alt); }
.otm-mega-item__icon {
  width: 2.25rem; height: 2.25rem;
  background: rgba(29,200,168,.1);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.otm-mega-item__text strong { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--clr-navy); }
.otm-mega-item__text span   { font-size: var(--fs-xs); color: var(--clr-muted); }

/* Mobile toggle */
.otm-header__mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--clr-border);
  color: var(--clr-navy);
  transition: border-color var(--t-fast);
}
.otm-header__mobile-toggle:hover { border-color: var(--clr-navy); }

/* Mobile Drawer */
.otm-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  justify-content: flex-end;
  background: rgba(27,43,75,.5);
  backdrop-filter: blur(2px);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-normal);
}
.otm-mobile-drawer.is-open { pointer-events: auto; opacity: 1; }

.otm-mobile-drawer__panel {
  width: min(340px, 90vw);
  height: 100%;
  background: #fff;
  padding: 1.5rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t-slow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.otm-mobile-drawer.is-open .otm-mobile-drawer__panel { transform: translateX(0); }

.otm-mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--clr-border);
}

.otm-mobile-nav { display: flex; flex-direction: column; gap: .25rem; }
.otm-mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-weight: 500;
  color: var(--clr-navy);
  transition: background var(--t-fast);
}
.otm-mobile-nav-link:hover { background: var(--clr-bg-alt); }

.otm-mobile-subpanel {
  position: absolute;
  inset: 0;
  background: #fff;
  padding: 1.5rem;
  transform: translateX(100%);
  transition: transform var(--t-normal);
  overflow-y: auto;
}
.otm-mobile-subpanel.is-active { transform: translateX(0); }

/* ======================================================
   FOOTER
   ====================================================== */
.otm-site-footer {
  background: var(--clr-navy);
  color: rgba(255,255,255,.7);
  padding-top: 5rem;
}

.otm-footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 3rem;
}

.otm-footer__brand { display: flex; flex-direction: column; gap: 1rem; }
.otm-footer__logo  { font-size: var(--fs-xl); font-weight: 800; color: #fff; display: flex; align-items: center; gap: .5rem; }
.otm-footer__logo img { height: 32px; }
.otm-footer__tagline { font-size: var(--fs-sm); line-height: 1.6; }

.otm-footer__social { display: flex; gap: .75rem; margin-top: .5rem; }
.otm-footer__social a {
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.otm-footer__social a:hover { background: var(--clr-green); color: #fff; border-color: var(--clr-green); }

.otm-footer__col-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #fff;
  margin-bottom: 1rem;
}

.otm-footer__links { display: flex; flex-direction: column; gap: .625rem; }
.otm-footer__links a {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.65);
  transition: color var(--t-fast);
}
.otm-footer__links a:hover { color: var(--clr-green); }

.otm-footer__apps { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.otm-footer__app-badge {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .875rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  color: #fff;
  font-size: var(--fs-xs);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.otm-footer__app-badge:hover { border-color: var(--clr-green); background: rgba(29,200,168,.08); }

.otm-footer__bottom {
  margin-top: 4rem;
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.4);
}
.otm-footer__bottom-links { display: flex; gap: 1.5rem; }
.otm-footer__bottom-links a { color: rgba(255,255,255,.4); transition: color var(--t-fast); }
.otm-footer__bottom-links a:hover { color: #fff; }

/* ======================================================
   HERO SECTION
   ====================================================== */
.otm-hero {
  padding-block: 5rem 4rem;
  background: linear-gradient(170deg, #f0fdf9 0%, #eff6ff 100%);
  overflow: hidden;
  position: relative;
}

.otm-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Review badges */
.otm-hero__badges {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.otm-hero__badge-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--clr-navy);
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.otm-hero__badge-item .otm-stars { color: #F59E0B; font-size: .9em; }

.otm-hero__heading {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--clr-navy);
  margin-bottom: 1.25rem;
}

.otm-hero__sub {
  font-size: var(--fs-lg);
  color: var(--clr-muted);
  margin-bottom: 2rem;
  max-width: 32rem;
  line-height: 1.65;
}

.otm-hero__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }

.otm-hero__bullets {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.otm-hero__bullet {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--clr-muted);
}
.otm-hero__bullet-dot {
  width: .5rem; height: .5rem;
  background: var(--clr-green);
  border-radius: 50%;
  flex-shrink: 0;
}

.otm-hero__stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--clr-border);
}
.otm-hero__stat-value {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--clr-navy);
  line-height: 1;
}
.otm-hero__stat-label {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  margin-top: .25rem;
}

/* Dashboard card */
.otm-hero__visual { position: relative; }

.otm-dashboard-card {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(0,0,0,.12);
  padding: 1.5rem;
  max-width: 420px;
}
.otm-dashboard-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.otm-dashboard-card__title { font-size: var(--fs-sm); font-weight: 700; color: var(--clr-navy); }
.otm-dashboard-card__badge { font-size: var(--fs-xs); background: rgba(29,200,168,.1); color: var(--clr-green); padding: .2em .6em; border-radius: var(--radius-full); font-weight: 600; }

.otm-rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem;
  border-radius: var(--radius);
  transition: background var(--t-fast);
  margin-bottom: .5rem;
}
.otm-rate-row:hover  { background: var(--clr-bg-alt); }
.otm-rate-row--best  { background: rgba(29,200,168,.07); border: 1.5px solid rgba(29,200,168,.2); }

.otm-rate-row__carrier { font-size: var(--fs-sm); font-weight: 600; color: var(--clr-navy); }
.otm-rate-row__days    { font-size: var(--fs-xs); color: var(--clr-muted); }
.otm-rate-row__price   { font-size: var(--fs-base); font-weight: 700; color: var(--clr-green); }
.otm-rate-row__savings { font-size: var(--fs-xs); color: var(--clr-green); }

/* Floating badges */
.otm-hero__badge {
  position: absolute;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-navy);
  white-space: nowrap;
}
.otm-hero__badge--savings { top: -1.5rem; right: -2rem; }
.otm-hero__badge--speed   { bottom: 1rem; left: -2rem; }
.otm-hero__badge__icon    { font-size: 1.25rem; }

/* ======================================================
   BRAND LOGOS
   ====================================================== */
.otm-brand-logos {
  padding-block: 2.5rem;
  border-block: 1px solid var(--clr-border);
  overflow: hidden;
}

.otm-brand-logos__label {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--clr-muted);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.otm-brand-marquee { overflow: hidden; position: relative; }

/* Fade edges */
.otm-brand-marquee::before,
.otm-brand-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 6rem;
  z-index: 1;
  pointer-events: none;
}
.otm-brand-marquee::before { left: 0;  background: linear-gradient(to right, #fff, transparent); }
.otm-brand-marquee::after  { right: 0; background: linear-gradient(to left,  #fff, transparent); }

.otm-brand-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: otm-marquee 30s linear infinite;
}

.otm-brand-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--clr-muted);
  opacity: .65;
  white-space: nowrap;
  transition: opacity var(--t-fast);
}
.otm-brand-item:hover { opacity: 1; }
.otm-brand-item__logo {
  width: 24px; height: 24px;
  background: var(--clr-border);
  border-radius: 4px;
}

/* ======================================================
   FEATURE CARDS
   ====================================================== */
.otm-feature-cards { background: var(--clr-bg-alt); }

.otm-feature-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.otm-fcard {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-normal), box-shadow var(--t-normal);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.otm-fcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.otm-fcard__icon-wrap {
  width: 3rem; height: 3rem;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.otm-fcard--green  .otm-fcard__icon-wrap { background: rgba(29,200,168,.12); }
.otm-fcard--blue   .otm-fcard__icon-wrap { background: rgba(59,91,219,.12); }
.otm-fcard--purple .otm-fcard__icon-wrap { background: rgba(124,58,237,.12); }
.otm-fcard--orange .otm-fcard__icon-wrap { background: rgba(249,115,22,.12); }

.otm-fcard__title { font-size: var(--fs-lg); font-weight: 700; color: var(--clr-navy); }
.otm-fcard__desc  { font-size: var(--fs-sm); color: var(--clr-muted); line-height: 1.65; flex: 1; }
.otm-fcard__link  { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); font-weight: 600; color: var(--clr-green); }
.otm-fcard__link:hover { gap: .6rem; }

/* ======================================================
   SHIPPING DISCOUNTS
   ====================================================== */
.otm-shipping-discounts {
  background: var(--clr-navy);
  color: #fff;
}

.otm-shipping-discounts .otm-section-header h2 { color: #fff; }
.otm-shipping-discounts .otm-section-header p   { color: rgba(255,255,255,.7); }

.otm-couriers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.otm-courier-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
  transition: background var(--t-normal), border-color var(--t-normal), transform var(--t-normal);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.otm-courier-card:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(29,200,168,.4);
  transform: translateY(-4px);
}

.otm-courier-card__logo {
  width: 3.5rem; height: 3.5rem;
  object-fit: contain;
  border-radius: var(--radius);
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
}
.otm-courier-card__name    { font-size: var(--fs-sm); font-weight: 700; }
.otm-courier-card__savings { font-size: var(--fs-xs); color: var(--clr-green); font-weight: 600; }

/* ======================================================
   INTERNATIONAL SHIPPING
   ====================================================== */
.otm-international__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.otm-globe-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.otm-globe-svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  filter: drop-shadow(0 20px 60px rgba(29,200,168,.2));
}

.otm-ping-dot {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--clr-green);
  border-radius: 50%;
}
.otm-ping-ring {
  position: absolute;
  inset: -4px;
  border: 2px solid var(--clr-green);
  border-radius: 50%;
  opacity: 0;
}

.otm-intl-features { display: flex; flex-direction: column; gap: 1.5rem; }

.otm-intl-feature {
  display: flex;
  gap: 1rem;
}
.otm-intl-feature__icon {
  width: 3rem; height: 3rem;
  background: rgba(29,200,168,.1);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.otm-intl-feature__title { font-size: var(--fs-base); font-weight: 700; color: var(--clr-navy); }
.otm-intl-feature__desc  { font-size: var(--fs-sm); color: var(--clr-muted); }

/* ======================================================
   INTEGRATIONS
   ====================================================== */
.otm-integrations { background: var(--clr-bg-alt); }

.otm-integrations-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.otm-integration-card {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  text-align: center;
  transition: box-shadow var(--t-normal), transform var(--t-normal), border-color var(--t-normal);
}
.otm-integration-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(29,200,168,.3);
}
.otm-integration-card__icon { font-size: 2rem; }
.otm-integration-card__name { font-size: var(--fs-xs); font-weight: 600; color: var(--clr-muted); }

/* ======================================================
   AUTOMATION
   ====================================================== */
.otm-automation__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.otm-automation-ui {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}
.otm-automation-ui__header {
  background: var(--clr-navy);
  color: #fff;
  padding: 1rem 1.5rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.otm-rule-rows { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }

.otm-rule-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  border-radius: var(--radius);
  background: var(--clr-bg-alt);
  border: 1px solid var(--clr-border);
  transition: border-color var(--t-fast);
}
.otm-rule-row:hover { border-color: var(--clr-green); }
.otm-rule-row--active { border-color: var(--clr-green); background: rgba(29,200,168,.05); }

.otm-rule-row__dot {
  width: .625rem; height: .625rem;
  border-radius: 50%;
  background: var(--clr-border);
  flex-shrink: 0;
}
.otm-rule-row--active .otm-rule-row__dot { background: var(--clr-green); }
.otm-rule-row__label { font-size: var(--fs-sm); color: var(--clr-navy); flex: 1; }
.otm-rule-row__badge { font-size: var(--fs-xs); background: rgba(29,200,168,.1); color: var(--clr-green); padding: .15em .5em; border-radius: var(--radius-full); font-weight: 600; }

/* ======================================================
   FULFILLMENT
   ====================================================== */
.otm-fulfillment { background: linear-gradient(170deg, var(--clr-navy) 0%, #243b6e 100%); color: #fff; }
.otm-fulfillment .otm-section-header h2 { color: #fff; }
.otm-fulfillment .otm-section-header p  { color: rgba(255,255,255,.7); }

.otm-fulfillment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.otm-ff-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: background var(--t-normal), border-color var(--t-normal);
}
.otm-ff-card:hover { background: rgba(255,255,255,.1); border-color: rgba(29,200,168,.3); }
.otm-ff-card__flag  { font-size: 2rem; }
.otm-ff-card__country { font-size: var(--fs-base); font-weight: 700; }
.otm-ff-card__city    { font-size: var(--fs-sm); color: rgba(255,255,255,.6); }
.otm-ff-card__badge   { display: inline-block; font-size: var(--fs-xs); background: rgba(29,200,168,.15); color: var(--clr-green); padding: .2em .5em; border-radius: var(--radius-full); font-weight: 600; }

/* ======================================================
   BRANDED TRACKING
   ====================================================== */
.otm-tracking__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.otm-tracking-mockup {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}
.otm-tracking-mockup__header {
  padding: 1.25rem 1.5rem;
  background: var(--clr-bg-alt);
  border-bottom: 1px solid var(--clr-border);
  display: flex; align-items: center; gap: 1rem;
}
.otm-tracking-mockup__dots { display: flex; gap: .375rem; }
.otm-tracking-mockup__dot {
  width: .75rem; height: .75rem;
  border-radius: 50%;
}
.otm-tracking-mockup__dot:nth-child(1) { background: #F87171; }
.otm-tracking-mockup__dot:nth-child(2) { background: #FBBF24; }
.otm-tracking-mockup__dot:nth-child(3) { background: #4ADE80; }

.otm-tracking-mockup__body { padding: 1.5rem; }

.otm-tracking-progress { display: flex; gap: 0; margin-bottom: 1.5rem; }
.otm-tracking-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; position: relative; }
.otm-tracking-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: .625rem;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--clr-border);
}
.otm-tracking-step--done::after  { background: var(--clr-green); }
.otm-tracking-step__dot {
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--clr-border);
  background: #fff;
  z-index: 1;
}
.otm-tracking-step--done  .otm-tracking-step__dot { border-color: var(--clr-green); background: var(--clr-green); }
.otm-tracking-step--active .otm-tracking-step__dot { border-color: var(--clr-green); background: #fff; box-shadow: 0 0 0 3px rgba(29,200,168,.2); }
.otm-tracking-step__label { font-size: .625rem; text-align: center; color: var(--clr-muted); }

/* ======================================================
   BUSINESS CARDS
   ====================================================== */
.otm-business-cards { background: var(--clr-bg-alt); }

.otm-bcard {
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform var(--t-normal), box-shadow var(--t-normal);
}
.otm-bcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.otm-bcard--green  { background: linear-gradient(135deg, rgba(29,200,168,.1), rgba(29,200,168,.05)); border: 1px solid rgba(29,200,168,.2); }
.otm-bcard--blue   { background: linear-gradient(135deg, rgba(59,91,219,.1),  rgba(59,91,219,.05));  border: 1px solid rgba(59,91,219,.2); }
.otm-bcard--purple { background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(124,58,237,.05)); border: 1px solid rgba(124,58,237,.2); }
.otm-bcard--orange { background: linear-gradient(135deg, rgba(249,115,22,.1), rgba(249,115,22,.05)); border: 1px solid rgba(249,115,22,.2); }

.otm-bcard__emoji  { font-size: 2.5rem; }
.otm-bcard__title  { font-size: var(--fs-xl); font-weight: 800; color: var(--clr-navy); }
.otm-bcard__desc   { font-size: var(--fs-sm); color: var(--clr-muted); line-height: 1.65; }
.otm-bcard__features { flex: 1; }
.otm-bcard__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--clr-navy);
  transition: gap var(--t-fast);
}
.otm-bcard__link:hover { gap: .65rem; color: var(--clr-green); }

/* ======================================================
   TESTIMONIALS
   ====================================================== */
.otm-testimonials { background: var(--clr-navy); color: #fff; overflow: hidden; }
.otm-testimonials .otm-section-header h2 { color: #fff; }
.otm-testimonials .otm-section-header p  { color: rgba(255,255,255,.7); }

/* Featured carousel */
.otm-testimonials__carousel { margin-bottom: 3rem; position: relative; }
.otm-testimonials__track { position: relative; min-height: 200px; }

.otm-testimonial-card--featured {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease, transform .4s ease;
  transform: translateX(20px);
  pointer-events: none;
}
.otm-testimonial-card--featured.is-active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.otm-testimonial-card__quote { font-size: var(--fs-lg); line-height: 1.7; color: rgba(255,255,255,.9); margin-bottom: 1.5rem; }
.otm-testimonial-card__quote::before { content: '\201C'; font-size: 3rem; color: var(--clr-green); line-height: 0; vertical-align: -.4em; margin-right: .2em; }

.otm-testimonial-card__author { display: flex; align-items: center; gap: 1rem; }
.otm-testimonial-card__avatar {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.otm-testimonial-card__name    { font-weight: 700; }
.otm-testimonial-card__company { font-size: var(--fs-xs); color: rgba(255,255,255,.6); }

.otm-carousel-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.5rem; }
.otm-carousel-dot {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  transition: width var(--t-normal), background var(--t-normal);
  border: none;
  cursor: pointer;
  padding: 0;
}
.otm-carousel-dot.is-active { width: 1.5rem; border-radius: var(--radius-full); background: var(--clr-green); }

/* Small grid */
.otm-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.otm-testimonial-card--mini {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background var(--t-normal), border-color var(--t-normal);
}
.otm-testimonial-card--mini:hover { background: rgba(255,255,255,.08); border-color: rgba(29,200,168,.25); }

.otm-stars { color: #F59E0B; }
.otm-star  { font-size: .9em; }

/* ======================================================
   ROI / RESOURCES
   ====================================================== */
.otm-roi { background: var(--clr-bg-alt); }

.otm-support-stats {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}
.otm-support-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: 1.5rem 2rem;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  min-width: 10rem;
  text-align: center;
}
.otm-support-stat__icon  { font-size: 1.75rem; }
.otm-support-stat__value { font-size: var(--fs-3xl); font-weight: 800; color: var(--clr-navy); }
.otm-support-stat__label { font-size: var(--fs-sm); color: var(--clr-muted); }

.otm-resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.otm-resource-card {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-normal), box-shadow var(--t-normal), border-color var(--t-normal);
  text-decoration: none;
}
.otm-resource-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(29,200,168,.3);
}

.otm-resource-card__top   { display: flex; align-items: center; justify-content: space-between; }
.otm-resource-card__icon  { font-size: 2rem; }
.otm-resource-card__title { font-size: var(--fs-base); font-weight: 700; color: var(--clr-navy); line-height: 1.3; }
.otm-resource-card__desc  { font-size: var(--fs-sm); color: var(--clr-muted); flex: 1; }
.otm-resource-card__cta   { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); font-weight: 600; color: var(--clr-green); margin-top: auto; }

/* ======================================================
   FINAL CTA
   ====================================================== */
.otm-final-cta {
  background: linear-gradient(135deg, var(--clr-navy) 0%, #1a3a6e 100%);
  color: #fff;
  text-align: center;
}
.otm-final-cta h2 { color: #fff; font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl)); font-weight: 800; margin-bottom: 1rem; }
.otm-final-cta p  { color: rgba(255,255,255,.75); font-size: var(--fs-lg); margin-bottom: 2.5rem; }
.otm-final-cta__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ======================================================
   NEWSLETTER
   ====================================================== */
.otm-newsletter { background: var(--clr-bg-alt); }

.otm-newsletter__inner {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.otm-newsletter__icon    { font-size: 3rem; }
.otm-newsletter__heading { font-size: var(--fs-2xl); font-weight: 800; color: var(--clr-navy); }
.otm-newsletter__desc    { color: var(--clr-muted); }

.otm-newsletter__form { width: 100%; }
.otm-newsletter__input-wrap {
  display: flex;
  background: #fff;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: .375rem .375rem .375rem 1.25rem;
  transition: border-color var(--t-fast);
}
.otm-newsletter__input-wrap:focus-within { border-color: var(--clr-green); box-shadow: 0 0 0 3px rgba(29,200,168,.15); }

.otm-newsletter__input {
  flex: 1;
  border: none;
  outline: none;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--clr-text);
  background: transparent;
}
.otm-newsletter__input::placeholder { color: var(--clr-muted); }

.otm-newsletter__feedback { font-size: var(--fs-sm); padding: .5rem 0; }
.otm-newsletter__feedback--error   { color: #EF4444; }
.otm-newsletter__feedback--success { color: var(--clr-green); }
.otm-newsletter__success { color: var(--clr-green); font-weight: 600; }

/* ======================================================
   STAR RATING (shared)
   ====================================================== */
.otm-testimonial-stars,
.otm-testimonial-stars { display: flex; gap: .2rem; color: #F59E0B; }

.otm-star { display: inline-flex; }
.otm-star svg { width: 1rem; height: 1rem; display: block; }

/* ======================================================
   INTEGRATIONS — actual template class names
   ====================================================== */
.otm-platforms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .875rem;
}

.otm-platform-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1rem .75rem;
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: box-shadow var(--t-normal), transform var(--t-normal), border-color var(--t-normal);
  cursor: default;
}
.otm-platform-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(29,200,168,.3);
}

.otm-platform-tile__icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}

.otm-platform-tile__name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--clr-muted);
}

.otm-platform-tile--more {
  border-style: dashed;
  color: var(--clr-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}

.otm-btn-group {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* ======================================================
   TESTIMONIALS — actual template class names
   ====================================================== */

/* Carousel wrapper */
.otm-testimonial-carousel {
  position: relative;
  margin-bottom: 3rem;
}

/* Track */
.otm-testimonial-carousel__track {
  position: relative;
  min-height: 260px;
}

/* Each slide */
.otm-testimonial-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px);
  transition: opacity .45s ease, transform .45s ease;
}
.otm-testimonial-slide--active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* Card */
.otm-testimonial-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Quote */
.otm-testimonial-quote {
  font-style: normal;
}
.otm-testimonial-quote p {
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: rgba(255,255,255,.9);
}

/* Author row */
.otm-testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.otm-testimonial-avatar {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.otm-testimonial-avatar--sm { width: 2.25rem; height: 2.25rem; font-size: .75rem; }

.otm-testimonial-info { display: flex; flex-direction: column; gap: .1rem; }
.otm-testimonial-name { font-style: normal; font-weight: 700; color: #fff; font-size: var(--fs-sm); }
.otm-testimonial-role { font-size: var(--fs-xs); color: rgba(255,255,255,.6); }

.otm-testimonial-platform {
  margin-left: auto;
  font-size: var(--fs-xs);
  background: rgba(255,255,255,.1);
  padding: .2em .6em;
  border-radius: var(--radius-full);
  color: rgba(255,255,255,.7);
  white-space: nowrap;
}

/* Dots */
.otm-testimonial-dots {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.otm-testimonial-dot {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width var(--t-normal), background var(--t-normal), border-radius var(--t-normal);
}
.otm-testimonial-dot--active {
  width: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--clr-green);
}

/* Mini grid */
.otm-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.otm-testimonial-mini {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  transition: background var(--t-normal), border-color var(--t-normal);
}
.otm-testimonial-mini:hover,
.otm-testimonial-mini.is-active {
  background: rgba(255,255,255,.09);
  border-color: rgba(29,200,168,.3);
}

.otm-testimonial-mini__text {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: rgba(255,255,255,.8);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.otm-testimonial-mini__author {
  display: flex;
  align-items: center;
  gap: .625rem;
}
.otm-testimonial-mini__author cite {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-xs);
  color: #fff;
}
.otm-testimonial-mini__author span {
  display: block;
  font-size: .7rem;
  color: rgba(255,255,255,.55);
}

/* The testimonials section background override */
.otm-testimonials.otm-section--light {
  background: var(--clr-navy);
  color: #fff;
}
.otm-testimonials.otm-section--light .otm-section-header h2 { color: #fff; }
.otm-testimonials.otm-section--light .otm-eyebrow--green { color: var(--clr-green); }

/* ======================================================
   BLOG / ARCHIVE LAYOUTS
   ====================================================== */
.otm-blog-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
}

.otm-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.otm-post-card {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--t-normal), transform var(--t-normal);
}
.otm-post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

.otm-post-card__thumb img { width: 100%; height: 200px; object-fit: cover; }
.otm-post-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.otm-post-card__title a { color: var(--clr-navy); font-size: var(--fs-lg); font-weight: 700; transition: color var(--t-fast); }
.otm-post-card__title a:hover { color: var(--clr-green); }
.otm-post-card__excerpt { font-size: var(--fs-sm); color: var(--clr-muted); line-height: 1.65; }

.otm-post-meta { font-size: var(--fs-xs); color: var(--clr-muted); display: flex; align-items: center; gap: .5rem; }
.otm-post-meta a:hover { color: var(--clr-green); }
.otm-post-meta__sep { opacity: .4; }

/* Pagination */
.otm-pagination {
  display: flex;
  gap: .5rem;
  justify-content: center;
  padding-top: 3rem;
  flex-wrap: wrap;
}
.otm-pagination a,
.otm-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1.5px solid var(--clr-border);
  color: var(--clr-navy);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.otm-pagination a:hover,
.otm-pagination .current { background: var(--clr-green); color: #fff; border-color: var(--clr-green); }

/* Single post */
.otm-entry-title { font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl)); font-weight: 800; color: var(--clr-navy); line-height: 1.15; }
.otm-entry-thumb img { border-radius: var(--radius-lg); margin-bottom: 2rem; }
.otm-entry-content { font-size: var(--fs-lg); line-height: 1.75; color: var(--clr-text); }
.otm-entry-content h2,
.otm-entry-content h3 { color: var(--clr-navy); font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; }
.otm-entry-content p   { margin-bottom: 1.25rem; }
.otm-entry-content a   { color: var(--clr-green); text-decoration: underline; }
.otm-entry-content ul,
.otm-entry-content ol  { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.otm-entry-content li  { margin-bottom: .5rem; }
.otm-entry-content img { border-radius: var(--radius); }
.otm-entry-content blockquote {
  border-left: 4px solid var(--clr-green);
  padding: 1rem 1.5rem;
  background: var(--clr-bg-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  margin: 1.5rem 0;
}

/* ======================================================
   404
   ====================================================== */
.otm-404 { padding-block: 8rem; text-align: center; }
.otm-404__inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.otm-404__code {
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 900;
  color: var(--clr-border);
  line-height: 1;
}
.otm-404 h1      { font-size: var(--fs-4xl); font-weight: 800; color: var(--clr-navy); }
.otm-404__desc   { color: var(--clr-muted); max-width: 30rem; }
.otm-404__actions { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.otm-404__search { width: 100%; max-width: 360px; }

/* ======================================================
   RESPONSIVE
   ====================================================== */

/* ─ 1200px ─ */
@media (max-width: 1200px) {
  .otm-feature-cards__grid { grid-template-columns: repeat(2, 1fr); }
  .otm-couriers-grid { grid-template-columns: repeat(4, 1fr); }
  .otm-fulfillment-grid { grid-template-columns: repeat(2, 1fr); }
  .otm-integrations-grid { grid-template-columns: repeat(4, 1fr); }
  .otm-footer__grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* ─ 1024px ─ */
@media (max-width: 1024px) {
  .otm-header__nav  { display: none; }
  .otm-header__mobile-toggle { display: flex; }
  .otm-hero__inner  { grid-template-columns: 1fr; text-align: center; }
  .otm-hero__actions { justify-content: center; }
  .otm-hero__bullets { align-items: center; }
  .otm-hero__stats   { justify-content: center; }
  .otm-hero__visual  { display: flex; justify-content: center; }
  .otm-international__inner { grid-template-columns: 1fr; }
  .otm-automation__inner    { grid-template-columns: 1fr; }
  .otm-tracking__inner      { grid-template-columns: 1fr; }
  .otm-resources-grid { grid-template-columns: repeat(2, 1fr); }
  .otm-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .otm-blog-layout { grid-template-columns: 1fr; }
}

/* ─ 768px ─ */
@media (max-width: 768px) {
  :root { --section-py: 3.5rem; }
  .otm-grid-2,
  .otm-grid-3,
  .otm-grid-4 { grid-template-columns: 1fr; }
  .otm-feature-cards__grid { grid-template-columns: 1fr; }
  .otm-couriers-grid { grid-template-columns: repeat(2, 1fr); }
  .otm-fulfillment-grid { grid-template-columns: 1fr; }
  .otm-integrations-grid { grid-template-columns: repeat(3, 1fr); }
  .otm-platforms-grid { grid-template-columns: repeat(3, 1fr); }
  .otm-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .otm-posts-grid { grid-template-columns: 1fr; }
  .otm-resources-grid { grid-template-columns: 1fr; }
  .otm-testimonials-grid { grid-template-columns: 1fr; }
  .otm-hero__badge--savings,
  .otm-hero__badge--speed { display: none; }
  .otm-section-header h2 { font-size: var(--fs-3xl); }
  .otm-newsletter__input-wrap { flex-direction: column; border-radius: var(--radius-lg); padding: .75rem; gap: .5rem; }
  .otm-newsletter__submit { border-radius: var(--radius-full); }
}

/* ─ 480px ─ */
@media (max-width: 480px) {
  .otm-hero__heading { font-size: var(--fs-3xl); }
  .otm-footer__grid  { grid-template-columns: 1fr; }
  .otm-couriers-grid { grid-template-columns: repeat(2, 1fr); }
  .otm-integrations-grid { grid-template-columns: repeat(2, 1fr); }
  .otm-support-stats { flex-direction: column; align-items: stretch; }
  .otm-header__actions .otm-btn-primary { display: none; }
}

/* ======================================================
   UTILITIES
   ====================================================== */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.otm-text-center { text-align: center; }
.otm-mt-1 { margin-top: .25rem; }
.otm-mt-2 { margin-top: .5rem; }
.otm-mt-4 { margin-top: 1rem; }
.otm-mb-4 { margin-bottom: 1rem; }
.otm-hidden { display: none !important; }
.otm-flex { display: flex; }
.otm-items-center { align-items: center; }
.otm-gap-2 { gap: .5rem; }
.otm-gap-4 { gap: 1rem; }

/* Print */
@media print {
  .otm-site-header,
  .otm-promo-banner,
  .otm-mobile-drawer { display: none !important; }
}