/* ==========================================================================
   Sangam Industries — enhancement layer
   Loaded after the compiled Tailwind bundle. Contains accessibility,
   motion-preference, loading-state and responsive refinements only.
   ========================================================================== */

/* --- Skip link (keyboard users) ----------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--accent, #146c85);
  color: #0f172a;
  font: 700 0.85rem/1 'Manrope', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 16px;
  outline: 3px solid #0f172a;
  outline-offset: 2px;
}

/* --- Visible focus states (WCAG 2.4.7) ---------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent, #146c85);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Reduced motion (WCAG 2.3.3) ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track {
    animation: none !important;
  }
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
  }
  .h-reveal,
  .reveal-img {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* --- Scroll reveal: headings + content images (all sections) -------------
   Classes are added by app.js initReveal(); elements start hidden and
   animate in when scrolled into view. If JS is disabled the classes are
   never added, so content stays fully visible. The preloader masks the
   initial paint, so there is no flash of hidden headings on load. ------- */
.h-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.75s cubic-bezier(0.22, 0.7, 0.24, 1);
  will-change: opacity, transform;
}
.h-reveal.reveal-in {
  opacity: 1;
  transform: none;
}
.reveal-img {
  opacity: 0;
  filter: blur(14px);
  transition: opacity 0.8s ease, filter 0.9s ease;
  will-change: opacity, filter;
}
.reveal-img.reveal-in {
  opacity: 1;
  filter: blur(0);
}

/* --- Loading skeletons ---------------------------------------------------- */
.skeleton-card {
  background: var(--surface, #1a273a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  overflow: hidden;
}
.skeleton-block {
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.05) 25%,
    rgba(15, 23, 42, 0.1) 50%,
    rgba(15, 23, 42, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-img { height: 200px; }
.skeleton-line { height: 14px; margin: 12px 20px; border-radius: 3px; }
.skeleton-line.short { width: 45%; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Form validation states ---------------------------------------------- */
.dark-input[aria-invalid="true"],
.dark-select[aria-invalid="true"],
.dark-textarea[aria-invalid="true"] {
  border-color: var(--danger, #e74c3c) !important;
}
.field-error {
  display: block;
  margin-top: 6px;
  color: var(--danger, #e74c3c);
  font: 500 0.75rem/1.4 'Manrope', sans-serif;
}

/* Honeypot field — visually removed, still in the accessibility tree trap  */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Ticker: pause on hover / focus for readability ----------------------- */
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track {
  animation-play-state: paused;
}

/* --- Back-to-top: ensure it never overlaps the toast stack ---------------- */
#toast-container {
  z-index: 10001;
}

/* ==========================================================================
   Commerce & professional-polish layer
   ========================================================================== */

::selection {
  background: #7ccbe0;
  color: #0f172a;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Product cards: subtle professional hover ----------------------------- */
.product-card {
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(26, 134, 165, 0.55) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}
.product-card-img img {
  transition: transform 0.4s ease;
}
.product-card:hover .product-card-img img {
  transform: scale(1.04);
}

/* --- Shared buttons -------------------------------------------------------- */
.btn-outline-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 18px;
  margin-bottom: 12px;
  background: transparent;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  color: var(--text-primary, #f5f7fa);
  font: 700 0.8rem/1 'Manrope', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.btn-outline-block:hover {
  border-color: var(--accent, #146c85);
  background: rgba(26, 134, 165, 0.1);
}
.btn-outline-block:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Cart page -------------------------------------------------------------- */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  padding-bottom: 60px;
}
@media (min-width: 1000px) {
  .cart-layout {
    grid-template-columns: 1fr 380px;
  }
}

.cart-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--surface, #1a273a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  padding: 22px;
  margin-bottom: 16px;
  transition: border-color 0.25s ease;
}
.cart-item:hover {
  border-color: rgba(26, 134, 165, 0.5);
}
.cart-item-img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.cart-item-body { flex: 1; min-width: 0; }
.cart-item-cat {
  font: 700 0.65rem/1 'Manrope', sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent, #f39c12);
  margin-bottom: 5px;
}
.cart-item-title {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.cart-item-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.spec-chip {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  padding: 3px 10px;
  border-radius: 3px;
  font: 500 0.72rem/1.5 'Manrope', sans-serif;
  color: var(--muted, #a0b0c0);
}
.spec-chip.accent {
  background: rgba(26, 134, 165, 0.12);
  border-color: rgba(20, 108, 133, 0.35);
  color: var(--accent, #146c85);
}
.cart-item-note {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.03);
  border-left: 2px solid var(--accent, #146c85);
  font: 400 0.75rem/1.4 'Manrope', sans-serif;
  color: var(--muted, #a0b0c0);
}
.cart-item-note strong { color: var(--accent, #f39c12); }
.cart-item-meta {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.cart-item-price {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: 1.2rem;
  color: var(--accent, #f39c12);
}
.cart-item-rate {
  font: 500 0.72rem/1 'Manrope', sans-serif;
  color: var(--muted, #a0b0c0);
}
.cart-item-remove {
  background: none;
  border: none;
  color: var(--danger, #e74c3c);
  cursor: pointer;
  font: 500 0.8rem/1 'Manrope', sans-serif;
  padding: 6px 0;
}
.cart-item-remove:hover { text-decoration: underline; }

/* Quantity stepper */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.03);
}
.qty-stepper button {
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  color: var(--text-primary, #f5f7fa);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}
.qty-stepper button:hover:not(:disabled) { background: rgba(26, 134, 165, 0.2); }
.qty-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.qty-stepper input {
  width: 58px;
  height: 34px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-right: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  color: var(--text-primary, #f5f7fa);
  font: 700 0.9rem/1 'Manrope', sans-serif;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-unit {
  padding: 0 12px;
  font: 700 0.68rem/1 'Manrope', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted, #a0b0c0);
}

@media (max-width: 640px) {
  .cart-item { flex-wrap: wrap; }
  .cart-item-meta {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    padding-top: 14px;
  }
}

/* --- Checkout progress steps ----------------------------------------------- */
.checkout-steps {
  display: flex;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  flex-wrap: wrap;
}
.checkout-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 0.75rem/1 'Manrope', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted, #a0b0c0);
  padding: 10px 18px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 100px;
  background: var(--surface, #1a273a);
}
.checkout-steps li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.08);
  font-size: 0.7rem;
}
.checkout-steps li.current {
  color: #ffffff;
  background: var(--accent-glow, #1a86a5);
  border-color: var(--accent-glow, #1a86a5);
}
.checkout-steps li.current span { background: rgba(255, 255, 255, 0.25); }
.checkout-steps li.done {
  color: var(--accent, #146c85);
  border-color: rgba(20, 108, 133, 0.4);
}
.checkout-steps li.done span {
  background: rgba(26, 134, 165, 0.18);
  color: var(--accent, #146c85);
}
.checkout-steps li.pending {
  color: #0f5468;
  border-color: rgba(20, 108, 133, 0.4);
  background: rgba(26, 134, 165, 0.08);
}
.checkout-steps li.pending span {
  background: rgba(26, 134, 165, 0.18);
  color: #0f5468;
}

/* --- Checkout layout --------------------------------------------------------- */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  padding-bottom: 60px;
}
@media (min-width: 1000px) {
  .checkout-layout {
    grid-template-columns: 1fr 400px;
  }
  .order-review {
    position: sticky;
    top: 120px;
  }
}

.checkout-form {
  background: var(--surface, #1a273a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  padding: 36px;
}
.panel-title {
  font: 800 1rem/1 'Syne', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-primary, #f5f7fa);
  margin: 34px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.panel-title:first-of-type { margin-top: 0; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 680px) {
  .form-grid { grid-template-columns: 1fr; }
  .checkout-form { padding: 24px; }
}

/* Payment options */
.pay-options {
  display: grid;
  gap: 12px;
  border: none;
  margin: 0;
  padding: 0;
}
.pay-option {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "radio icon title"
    "radio icon desc";
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  padding: 16px 18px;
  background: rgba(15, 23, 42, 0.02);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pay-option:hover { border-color: rgba(20, 108, 133, 0.45); }
.pay-option.selected {
  border-color: var(--accent, #146c85);
  background: rgba(26, 134, 165, 0.08);
}
.pay-option input { grid-area: radio; accent-color: var(--accent, #146c85); width: 16px; height: 16px; }
.pay-option i {
  grid-area: icon;
  color: var(--accent, #f39c12);
  font-size: 1.1rem;
  width: 28px;
  text-align: center;
}
.pay-option .pay-title {
  grid-area: title;
  font: 700 0.88rem/1.3 'Manrope', sans-serif;
  color: var(--text-primary, #f5f7fa);
}
.pay-option .pay-desc {
  grid-area: desc;
  font: 400 0.75rem/1.4 'Manrope', sans-serif;
  color: var(--muted, #a0b0c0);
}

/* Order review sidebar */
.order-review {
  background: var(--surface, #1a273a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  padding: 30px;
}
.panel-eyebrow {
  font: 700 0.72rem/1 'Manrope', sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent, #f39c12);
  margin-bottom: 20px;
}
.review-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.review-item img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.review-item-body { flex: 1; min-width: 0; }
.review-item-title {
  font: 700 0.85rem/1.3 'Manrope', sans-serif;
  color: var(--text-primary, #f5f7fa);
}
.review-item-spec {
  font: 400 0.72rem/1.4 'Manrope', sans-serif;
  color: var(--muted, #a0b0c0);
}
.review-item-price {
  font: 700 0.85rem/1 'Manrope', sans-serif;
  color: var(--accent, #f39c12);
  white-space: nowrap;
}
.review-totals {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-totals > div {
  display: flex;
  justify-content: space-between;
  font: 400 0.85rem/1.4 'Manrope', sans-serif;
  color: var(--muted, #a0b0c0);
}
.review-totals > div span:last-child { color: var(--text-primary, #f5f7fa); }
.review-totals > .grand {
  padding-top: 14px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-primary, #f5f7fa);
}
.review-totals > .grand span:last-child {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: 1.3rem;
  color: var(--accent, #f39c12);
}
.review-edit-link {
  display: inline-block;
  font: 500 0.8rem/1 'Manrope', sans-serif;
  color: var(--muted, #a0b0c0);
  text-decoration: underline;
  margin-bottom: 22px;
}
.review-edit-link:hover { color: var(--accent, #f39c12); }
.trust-strip {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.trust-strip div {
  font: 500 0.75rem/1.4 'Manrope', sans-serif;
  color: var(--muted, #a0b0c0);
}
.trust-strip i {
  color: var(--accent, #f39c12);
  width: 20px;
  margin-right: 6px;
}

/* --- Order confirmation ------------------------------------------------------ */
.confirm-hero {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.confirm-check {
  width: 84px;
  height: 84px;
  margin: 0 auto 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #0b0f19;
  background: var(--success, #2ecc71);
  box-shadow: 0 0 0 12px rgba(46, 204, 113, 0.12);
}
.confirm-hero h1 {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 18px;
}
.confirm-hero p {
  font: 400 0.95rem/1.7 'Manrope', sans-serif;
  color: var(--muted, #a0b0c0);
}
.confirm-hero .order-id {
  color: var(--accent, #f39c12);
  letter-spacing: 1px;
}
.confirm-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}

.order-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
@media (min-width: 1000px) {
  .order-detail-grid { grid-template-columns: 1.4fr 1fr; }
}
.order-panel {
  background: var(--surface, #1a273a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  padding: 30px;
  overflow-x: auto;
}
.order-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 0.83rem/1.5 'Manrope', sans-serif;
}
.order-table th {
  text-align: left;
  font: 700 0.68rem/1 'Manrope', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted, #a0b0c0);
  padding: 0 10px 12px 0;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.order-table td {
  padding: 14px 10px 14px 0;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  color: var(--text-primary, #f5f7fa);
  vertical-align: top;
}
.order-table tfoot td {
  border-bottom: none;
  padding: 10px 10px 0 0;
  color: var(--muted, #a0b0c0);
}
.order-table tfoot .grand td {
  font: 700 1rem/1 'Manrope', sans-serif;
  color: var(--text-primary, #f5f7fa);
  padding-top: 16px;
}
.order-table tfoot .grand td:last-child {
  font-family: 'Syne', sans-serif; font-weight: 800;
  color: var(--accent, #f39c12);
  font-size: 1.15rem;
}
.order-grade { font-weight: 700; }
.order-sub {
  font-size: 0.7rem;
  color: var(--muted, #a0b0c0);
}
.order-meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.order-meta > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
}
.order-meta dt {
  font: 700 0.68rem/1.8 'Manrope', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted, #a0b0c0);
}
.order-meta dd {
  margin: 0;
  font: 400 0.85rem/1.5 'Manrope', sans-serif;
  color: var(--text-primary, #f5f7fa);
  overflow-wrap: anywhere;
}
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(46, 204, 113, 0.14);
  border: 1px solid rgba(46, 204, 113, 0.35);
  color: var(--success, #2ecc71);
  font: 700 0.68rem/1.4 'Manrope', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.status-badge.pending {
  background: rgba(26, 134, 165, 0.14);
  border-color: rgba(20, 108, 133, 0.4);
  color: #0f5468;
}
.next-steps {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.next-steps ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font: 400 0.83rem/1.6 'Manrope', sans-serif;
  color: var(--muted, #a0b0c0);
}
.next-steps li::marker {
  color: var(--accent, #f39c12);
  font-weight: 700;
}

/* --- My Orders list ----------------------------------------------------------- */
.order-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--surface, #1a273a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  padding: 20px 24px;
  margin-bottom: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.order-row:hover {
  border-color: rgba(20, 108, 133, 0.5);
  transform: translateX(4px);
}
.order-row-main { flex: 1; min-width: 180px; }
.order-row-id {
  font: 700 0.95rem/1.4 'Manrope', sans-serif;
  color: var(--accent, #f39c12);
  letter-spacing: 1px;
}
.order-row-date {
  font: 400 0.75rem/1.4 'Manrope', sans-serif;
  color: var(--muted, #a0b0c0);
}
.order-row-items {
  font: 400 0.8rem/1.4 'Manrope', sans-serif;
  color: var(--muted, #a0b0c0);
}
.order-row-total {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: 1.05rem;
}
.order-row-chev { color: var(--muted, #a0b0c0); }

/* ============================================================
   Light theme scope (About page) — bright editorial redesign.
   Steel-blue accents, cool soft surfaces, pill buttons,
   rounded cards.
   ============================================================ */
main.page-light {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --surface: #ffffff;
  --text-primary: #0f172a;
  --muted: #5b6779;
  --accent: #146c85;
  --accent-glow: #1a86a5;
  --border: #e6e9ef;
  background: #ffffff;
  color: var(--text-primary);
}
main.page-light ::selection { background: #7ccbe0; color: #0f172a; }

/* ---------- Typography: Syne display (distinct headings) + Manrope text ---------- */
main.page-light h1,
main.page-light h2,
main.page-light h3,
main.page-light h4 {
  font-family: 'Syne', sans-serif;
}
main.page-light .page-header h1 {
  font-family: 'Syne', sans-serif;
  text-transform: none;
  letter-spacing: -0.02em;
  font-weight: 800;
  line-height: 1.08;
}
main.page-light .section-title {
  font-family: 'Syne', sans-serif;
  text-transform: none;
  letter-spacing: -0.015em;
  font-weight: 800;
  line-height: 1.15;
}
main.page-light .section-title .italic { font-weight: 600; color: var(--accent); }
main.page-light [style*="Syne"] { font-family: 'Manrope', sans-serif !important; font-weight: 700 !important; }
main.page-light [style*="Space Grotesk"] { font-family: 'Manrope', sans-serif !important; }
main.page-light [style*="Archivo Black"] { font-family: 'Manrope', sans-serif !important; font-weight: 800 !important; }

/* ---------- Eyebrow label as a warm pill chip ---------- */
main.page-light .section-label {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #ea580c;
  font: 800 0.68rem 'Manrope', sans-serif;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

/* ---------- Bright hero ---------- */
main.page-light .page-header {
  background:
    radial-gradient(720px 400px at 92% -15%, rgba(26, 134, 165, 0.16), transparent 65%),
    radial-gradient(540px 320px at -5% 115%, rgba(253, 224, 71, 0.28), transparent 60%),
    linear-gradient(180deg, #fffdf2 0%, #ffffff 100%);
  border-bottom: 1px solid #f2ecd4;
}
main.page-light .page-hero-sub {
  max-width: 700px;
  margin-top: 14px;
  font: 500 1.12rem/1.85 'Manrope', sans-serif;
  color: var(--muted);
}
main.page-light .hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 38px;
}

/* ---------- Buttons: modern rounded pills ---------- */
main.page-light .btn-primary,
main.page-light .btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 36px;
  font: 800 0.85rem 'Manrope', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
  border: none;
  border-radius: 999px;
  clip-path: none;
  box-shadow: 0 12px 26px -10px rgba(249, 115, 22, 0.5);
  transition: transform 0.25s, box-shadow 0.25s, filter 0.25s;
}
main.page-light .btn-primary:hover,
main.page-light .btn-solid:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 18px 34px -10px rgba(234, 88, 12, 0.55);
}
main.page-light .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  font: 800 0.85rem 'Manrope', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-primary);
  background: #ffffff;
  border: 1.5px solid #dbe0e8;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: all 0.25s;
}
main.page-light .btn-ghost:hover {
  border-color: #0f172a;
  background: #0f172a;
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- Prose ---------- */
main.page-light .prose p {
  font: 400 1.02rem/1.9 'Manrope', sans-serif;
  color: var(--muted);
  margin-bottom: 20px;
}
main.page-light .prose p:last-child { margin-bottom: 0; }
main.page-light .prose strong { color: var(--text-primary); font-weight: 700; }
main.page-light .prose em { color: #0f5468; }

/* ---------- Pull quote: golden gradient card ---------- */
main.page-light .pull-quote {
  position: relative;
  background: linear-gradient(140deg, #1a86a5 0%, #146c85 70%, #0f5468 100%);
  color: #ffffff;
  padding: 52px 40px 40px;
  border-radius: 24px;
  box-shadow: 0 24px 48px -18px rgba(20, 108, 133, 0.45);
  overflow: hidden;
}
main.page-light .pull-quote::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  left: 26px;
  font: 900 5.5rem/1 Georgia, serif;
  color: rgba(255, 255, 255, 0.35);
}
main.page-light .pull-quote::after {
  content: '';
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
}
main.page-light .pull-quote p {
  position: relative;
  font: 600 1.25rem/1.7 'Manrope', sans-serif;
  margin-bottom: 22px;
}
main.page-light .pull-quote cite {
  display: block;
  font: 800 0.72rem 'Manrope', sans-serif;
  font-style: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f0f9fc;
}

/* ---------- Stat tiles ---------- */
main.page-light .stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
}
main.page-light .stat-tile {
  background: #eef8fb;
  border: 1px solid #bfe3ee;
  border-radius: 18px;
  padding: 22px;
  transition: transform 0.25s, box-shadow 0.25s;
}
main.page-light .stat-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -12px rgba(20, 108, 133, 0.35);
}
main.page-light .stat-tile .num {
  font: 700 1.8rem 'Syne', sans-serif;
  color: #0f5468;
}
main.page-light .stat-tile .lbl {
  margin-top: 6px;
  font: 800 0.66rem 'Manrope', sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #7c6f3f;
}

/* ---------- Journey milestone cards ---------- */
main.page-light .journey-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #edf0f4;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
main.page-light .journey-card:hover {
  transform: translateY(-5px);
  border-color: #7ccbe0;
  box-shadow: 0 20px 40px -16px rgba(15, 23, 42, 0.16);
}
main.page-light .journey-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2ba3c4, #1a86a5);
  color: #ffffff;
  font: 700 1.05rem 'Syne', sans-serif;
  box-shadow: 0 8px 16px -6px rgba(20, 108, 133, 0.5);
  margin-bottom: 20px;
}
main.page-light .journey-card .yr {
  font: 800 0.68rem 'Manrope', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0f5468;
  margin-bottom: 8px;
}
main.page-light .journey-card h3 {
  font: 700 1.22rem 'Syne', sans-serif;
  margin-bottom: 10px;
}
main.page-light .journey-card p {
  font: 400 0.93rem/1.75 'Manrope', sans-serif;
  color: var(--muted);
}
main.page-light .journey-card.highlight {
  background: linear-gradient(150deg, #0f172a 0%, #1e293b 100%);
  border-color: #0f172a;
}
main.page-light .journey-card.highlight h3 { color: #fff; }
main.page-light .journey-card.highlight p { color: #b8c3d4; }
main.page-light .journey-card.highlight .yr { color: #7ccbe0; }

/* ---------- Discipline / value cards ---------- */
main.page-light .about-card {
  background: var(--surface);
  border: 1px solid #edf0f4;
  border-radius: 20px;
  padding: 36px 30px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
main.page-light .about-card:hover {
  transform: translateY(-5px);
  border-color: #7ccbe0;
  box-shadow: 0 20px 40px -16px rgba(15, 23, 42, 0.16);
}
main.page-light .about-card .card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  font-size: 1.3rem;
  color: #0f5468;
  background: linear-gradient(135deg, #ddf0f6, #bfe3ee);
  border-radius: 16px;
}
main.page-light .about-card h3 {
  font: 700 1.25rem 'Syne', sans-serif;
  margin-bottom: 12px;
}
main.page-light .about-card p {
  font: 400 0.95rem/1.75 'Manrope', sans-serif;
  color: var(--muted);
}
main.page-light .value-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2ba3c4, #1a86a5);
  color: #ffffff;
  font: 700 1.05rem 'Syne', sans-serif;
  box-shadow: 0 8px 16px -6px rgba(20, 108, 133, 0.5);
  margin-bottom: 20px;
}

/* ---------- CTA band: golden gradient panel ---------- */
main.page-light .cta-band {
  position: relative;
  background: linear-gradient(120deg, #1a86a5 0%, #146c85 55%, #0f5468 100%);
  color: #ffffff;
  padding: 72px 48px;
  text-align: center;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(20, 108, 133, 0.5);
}
main.page-light .cta-band::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%);
}
main.page-light .cta-band h2 {
  position: relative;
  font: 700 clamp(1.6rem, 3.4vw, 2.4rem)/1.3 'Syne', sans-serif;
  text-transform: none;
  letter-spacing: -0.01em;
  max-width: 760px;
  margin: 0 auto 34px;
  color: #ffffff;
}
main.page-light .cta-band .hero-cta-row { position: relative; }
main.page-light .cta-band .btn-primary,
main.page-light .cta-band .btn-solid {
  background: linear-gradient(135deg, #fb923c, #f97316);
  color: #ffffff;
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.3);
}
main.page-light .cta-band .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}
main.page-light .cta-band .btn-ghost:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #146c85;
}
@media (max-width: 640px) {
  main.page-light .cta-band { padding: 52px 24px; border-radius: 22px; }
  main.page-light .pull-quote { padding: 44px 26px 32px; }
  main.page-light .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Heading & italic normalization (site-wide)
   No italics anywhere; refreshed page-header + section titles.
   ============================================================ */
.italic,
.section-title .italic,
.page-header h1 span,
em,
cite,
blockquote p {
  font-style: normal !important;
}
.section-title .italic { color: var(--accent); }

/* Page hero headers: cleaner, modern, no shouting caps */
.page-header h1 {
  font-family: 'Syne', sans-serif;
  text-transform: none;
  letter-spacing: -0.02em;
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(2rem, 4.4vw, 3.8rem);
}
.page-header p {
  font-family: 'Manrope', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
}

/* Section titles: distinct but composed */
.section-title {
  font-family: 'Syne', sans-serif;
  text-transform: none;
  letter-spacing: -0.015em;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
}

/* Display headings (home hero, big statements) share the same family */
.hero-title,
.big-statement {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.hero-title .gold { font-style: normal; }

/* Clean display type: no shouting caps, no hollow outline strokes */
.hero-title {
  text-transform: none;
  letter-spacing: -0.025em;
  font-size: clamp(2.3rem, 4.6vw, 4.2rem);
  line-height: 1.12;
  max-width: 880px;
}
.hero-title .gold,
.hero-title .outline-gold {
  color: var(--accent);
  -webkit-text-stroke: 0;
}
.hero-title .stroke,
.section-title .stroke,
.cta-title .stroke {
  -webkit-text-stroke: 0;
  color: inherit;
}
.category-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.05;
}
.category-title .outline {
  -webkit-text-stroke: 0;
  color: var(--accent);
  outline: none; /* kill Tailwind's .outline utility box */
}
.banner-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.015em;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.15;
}
.banner-title .italic {
  color: #7ccbe0;
}
.cta-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.15;
}
.stat-num {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
}

/* ============================================================
   GLOBAL LIGHT THEME — professional, light, elegant.
   Flips the dark brand tokens to a cool light palette with a
   steel-blue accent, then patches every built-CSS rule that
   hard-codes a dark value. Footer stays deep ink for contrast.
   ============================================================ */
:root {
  --bg-primary: #f6f8fb;
  --bg-secondary: #edf1f7;
  --surface: #ffffff;
  --text-primary: #0f172a;
  --muted: #5b6779;
  --accent: #146c85;
  --accent-glow: #1a86a5;
  --accent-dark: #0f5468;
  --border: #e3e8f0;
}
body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* --- Announcement ticker: teal band, white text --- */
.ticker {
  background: linear-gradient(90deg, #146c85, #1a86a5);
  color: #ffffff;
  border-bottom: none;
}

/* --- Utility topbar: location + contact details above the nav --- */
.topbar {
  background: #0f172a;
  color: #cbd5e1;
}
.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 9px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font: 600 0.74rem/1.4 'Manrope', sans-serif;
  letter-spacing: 0.4px;
}
.topbar-group {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
  text-decoration: none;
  white-space: nowrap;
}
.topbar-item i {
  color: #2ba3c4;
  font-size: 0.8rem;
}
a.topbar-item:hover {
  color: #ffffff;
}
.topbar-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(43, 163, 196, 0.14);
  border: 1px solid rgba(43, 163, 196, 0.35);
  color: #2ba3c4;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
@media (max-width: 1120px) {
  /* keep the topbar on one line so the fixed header never outgrows
     the hero's top padding */
  .topbar-hide-sm { display: none; }
}
@media (max-width: 768px) {
  .topbar-inner { justify-content: center; padding: 8px 16px; gap: 14px; }
}

/* --- Header / navigation: white glass --- */
.navbar {
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--border);
}
.main-header.scrolled .navbar {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 30px -18px rgba(15, 23, 42, 0.18);
}
@media (max-width: 768px) {
  .nav-links {
    background: rgba(255, 255, 255, 0.98);
  }
}

/* --- Buttons: clean rounded pills, no angular clip-paths --- */
.btn-primary,
.btn-quote,
.btn-sm {
  clip-path: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb923c, #f97316);
  color: #ffffff;
  box-shadow: 0 12px 26px -12px rgba(249, 115, 22, 0.6);
}
.btn-primary:hover,
.btn-quote:hover,
.btn-sm:hover {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(234, 88, 12, 0.65);
}
.btn-outline {
  border: 2px solid rgba(15, 23, 42, 0.18);
  border-radius: 999px;
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-dark {
  clip-path: none;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
}
.btn-dark:hover {
  background: #1e293b;
  color: #fff;
  transform: translateY(-2px);
}
.back-to-top {
  clip-path: none;
  border-radius: 50%;
  color: #ffffff;
  background: #f97316;
  box-shadow: 0 12px 26px -12px rgba(249, 115, 22, 0.7);
}
.back-to-top:hover {
  background: #ea580c;
}

/* --- Home hero: full-bleed photo and grid-line overlays removed
       (redesigned hero uses a framed visual instead) --- */
.hero-bg,
.hero-grid {
  display: none !important;
}

/* --- Watermark strokes: faint gold instead of orange --- */
.categories:before {
  -webkit-text-stroke: 1px rgba(20, 108, 133, 0.14);
}
.advantages:before {
  -webkit-text-stroke: 1px rgba(20, 108, 133, 0.11);
}

/* --- Category cards: keep dark photo tiles, round them off --- */
.category-card {
  --text-primary: #ffffff;
  --muted: #cbd5e1;
  --accent: #7ccbe0;
  border-radius: 20px;
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 14px 32px -18px rgba(15, 23, 42, 0.35);
}
.category-card:hover {
  border-color: rgba(26, 134, 165, 0.55);
}

/* --- Advantage cards: golden hover wash --- */
.advantage-card:before {
  background: linear-gradient(135deg, rgba(26, 134, 165, 0.1), transparent 60%);
}

/* --- Promise banner: teal gradient band, white text --- */
.banner-inner {
  background: linear-gradient(135deg, #146c85, #1a86a5);
  color: #ffffff;
  border-radius: 24px;
  margin: 0 20px;
}
.banner-inner .banner-title,
.banner-inner h2,
.banner-inner p {
  color: #ffffff;
}
.banner-inner:before {
  color: rgba(255, 255, 255, 0.32);
}
.banner-label {
  color: #ffffff;
}
.banner-label:before {
  background: #ffffff;
}

/* --- Clear section separation: alternating backgrounds --- */
.hero {
  background: linear-gradient(180deg, #eef2f8 0%, #f6f8fb 100%);
}
.categories {
  background: #ffffff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.advantages {
  background: #eef2f8;
  border-bottom: 1px solid #dfe6f0;
}
.banner {
  background: #ffffff;
}
.testimonials {
  background: #ffffff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-section {
  background: #eef2f8;
}

/* --- Testimonials --- */
.testimonial-card {
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.testimonial-num {
  -webkit-text-stroke: 1px rgba(20, 108, 133, 0.4);
}
.author-avatar {
  clip-path: none;
  border-radius: 14px;
  color: #ffffff;
}

/* --- CTA section: whisper of a photo --- */
.cta-bg {
  opacity: 0.1;
  filter: saturate(0.8);
}

/* --- Product catalog --- */
.product-card {
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
.product-card-badge {
  background: rgba(255, 255, 255, 0.9);
}
.product-tag-accent {
  background: rgba(26, 134, 165, 0.12);
  border-color: rgba(20, 108, 133, 0.3);
}
.product-card .btn-sm {
  background: linear-gradient(135deg, #fb923c, #f97316) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
}
.product-card .btn-sm:hover {
  background: #ea580c !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(234, 88, 12, 0.45);
}
.filter-chip input[type="checkbox"]:checked:after {
  color: #ffffff;
}

/* --- Commerce surfaces: soft elevation on white --- */
.cart-item,
.checkout-form,
.order-review,
.order-panel,
.order-row,
.skeleton-card {
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

/* --- Toasts: ink text on white surface --- */
.toast-success,
.toast-error,
.toast-info {
  color: var(--text-primary);
  border-radius: 10px;
  box-shadow: 0 14px 34px -14px rgba(15, 23, 42, 0.25);
}
.toast-close:hover {
  color: var(--text-primary);
}

/* --- Footer: stays deep ink for grounded contrast --- */
footer {
  background: #0b1220;
  --text-primary: #f5f7fa;
  --muted: #94a3b8;
  --border: rgba(255, 255, 255, 0.1);
  --surface: #131c2e;
  --accent: #2ba3c4;
  --accent-glow: #7ccbe0;
  color: #cbd5e1;
}
.social-link:hover {
  color: #0b1220;
}

/* ============================================================
   ONE SANS FAMILY — Manrope everywhere (user preference).
   Overrides Syne / Archivo Black / Space Grotesk / Inter from
   the built CSS, earlier layers, and inline styles. Font
   Awesome <i> icons are untouched (i elements not targeted).
   ============================================================ */
body, p, a, span, div, li, ul, ol, td, th, dt, dd, dl,
blockquote, cite, figcaption, small, strong, em, label, legend,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', sans-serif !important;
}

/* ============================================================
   HEADINGS — Poppins (geometric sans, user-selected).
   Must come after the ONE SANS layer so it wins the cascade;
   heading spans included so accent words match.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
.hero-title, .hero-title span,
.section-title, .section-title span,
.category-title, .category-title span,
.banner-title, .banner-title span,
.cta-title, .cta-title span,
.big-statement, .stat-num, .stat-num span, .stat-tile .num,
.journey-num, .value-num, .advantage-num, .testimonial-num,
.logo-text, .footer-logo-text, .footer-mega-text {
  font-family: 'Poppins', sans-serif !important;
}

/* Lighter headline weight (user request: too heavy / Archivo-Black-like).
   600 keeps presence without the slab-black look; numbers, logo marks and
   the footer/preloader watermarks keep their own weights. */
h1, h2, h3,
h1 span, h2 span, h3 span,
.hero-title, .hero-title span,
.section-title, .section-title span,
.category-title, .category-title span,
.banner-title, .banner-title span,
.cta-title, .cta-title span,
.big-statement {
  font-weight: 600 !important;
}

/* ============================================================
   HERO REDESIGN — clean two-column layout.
   Left: eyebrow chip, headline, copy, CTAs, trust points.
   Right: framed photo with floating metric chips.
   Bottom: white stats card. No grid lines, no washed-out photo.
   ============================================================ */
.hero {
  display: block;
  min-height: 0;
  padding: 168px 0 80px;
  background:
    radial-gradient(640px 420px at 85% 12%, rgba(26, 134, 165, 0.14), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
}
.hero-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

/* Eyebrow chip */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  margin-bottom: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ea580c;
}
.hero-eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f97316;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18);
}

/* Copy */
.hero-sub {
  max-width: 560px;
  margin: 24px 0 32px;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.85;
  color: var(--muted);
}
.hero-sub strong {
  color: #0f172a;
  font-weight: 700;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.hero-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 30px 0 0;
  padding: 0;
}
.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #3f4c61;
}
.hero-trust li i {
  font-size: 0.7rem;
  color: #ffffff;
  background: linear-gradient(135deg, #2ba3c4, #1a86a5);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Visual */
.hero-visual {
  position: relative;
}
.hero-visual img {
  display: block;
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 32px 64px -32px rgba(15, 23, 42, 0.4);
}
.hero-float {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 20px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.35);
}
.hero-float .num {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: #0f172a;
}
.hero-float .num em {
  font-family: 'Poppins', sans-serif !important;
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 700;
  color: #146c85;
}
.hero-float .lbl {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #8b97a9;
}
.hero-float-1 {
  top: 28px;
  left: -28px;
}
.hero-float-2 {
  bottom: 32px;
  right: -18px;
}

/* Stats card */
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 64px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.25);
  overflow: hidden;
}
.metric {
  padding: 28px 30px;
  border-left: 1px solid var(--border);
}
.metric:first-child {
  border-left: none;
}
.metric-num {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  color: #0f172a;
}
.metric-num em {
  font-family: 'Poppins', sans-serif !important;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 700;
  color: #146c85;
  letter-spacing: 0.5px;
}
.metric-lbl {
  margin-top: 5px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8b97a9;
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero-visual img {
    height: 380px;
  }
  .hero-float-1 {
    left: 14px;
  }
  .hero-float-2 {
    right: 14px;
  }
}
@media (max-width: 768px) {
  .hero {
    padding: 188px 0 56px;
  }
  .hero-metrics {
    grid-template-columns: 1fr 1fr;
    margin-top: 48px;
  }
  .metric {
    padding: 22px 24px;
  }
  .metric:nth-child(odd) {
    border-left: none;
  }
  .metric:nth-child(even) {
    border-left: 1px solid var(--border);
  }
  .metric:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
}

/* ============================================================
   NAV — data-num digits removed; active/hover shown with a
   clean golden underline instead.
   ============================================================ */
.nav-links a:before {
  content: none;
}
.nav-links a {
  position: relative;
}
.nav-links a:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2ba3c4, #146c85);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.nav-links a:hover:after,
.nav-links a.active:after {
  transform: scaleX(1);
}
.nav-links a.active {
  color: #0f172a;
  font-weight: 800;
}

/* ============================================================
   HEADINGS COLOR — deep blue (echo of the topbar blue) instead
   of black. Paragraph, list and small text stay black/grey.
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  color: #1b2f5e; /* topbar navy, lifted slightly so it reads blue */
}
.category-card .category-title {
  color: #ffffff; /* photo tiles keep white titles */
}
.footer-col h4 {
  color: #2ba3c4; /* footer column labels stay gold */
}

/* ============================================================
   FOOTER — refreshed bottom bar + animated SANGAM watermark:
   a golden light travels along the letter outlines (like the
   VS Code chat-box border animation).
   ============================================================ */
.footer-mega {
  overflow: hidden;
  margin-bottom: 70px;
}
.footer-mega-svg {
  display: block;
  width: 100%;
  height: auto;
}
.footer-mega-svg text {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 210px;
  letter-spacing: 0.04em;
  fill: none;
}
.mega-base {
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1.5;
}
.mega-trace {
  stroke: #2ba3c4;
  stroke-width: 1.6;
  stroke-dasharray: 110 640;
  animation: megaTrace 8s linear infinite;
  filter: drop-shadow(0 0 6px rgba(43, 163, 196, 0.5));
}
@keyframes megaTrace {
  to {
    stroke-dashoffset: -750;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega-trace {
    animation: none;
    opacity: 0;
  }
}

.footer-bottom {
  text-transform: none;
  letter-spacing: 0.2px;
  font-size: 0.84rem;
  padding: 26px 0 32px;
}
.footer-copy {
  color: #8b97a9;
}
.footer-copy strong {
  color: #e2e8f0;
  font-weight: 700;
}
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.credit-label {
  color: #8b97a9;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.credit-name {
  color: #2ba3c4;
  font-weight: 800;
}
.footer-credit i {
  color: #2ba3c4;
  font-size: 0.68rem;
  transform: rotate(-45deg);
  transition: transform 0.25s ease;
}
.footer-credit:hover {
  border-color: rgba(43, 163, 196, 0.5);
  background: rgba(43, 163, 196, 0.08);
}
.footer-credit:hover i {
  transform: rotate(0);
}

/* ============================================================
   SECTION HEADERS — clean centered style: numbering and the
   little dash lines removed; label is a simple gold kicker,
   title + subtitle centered on the page.
   ============================================================ */
.section-label {
  justify-content: center;
  text-align: center;
  letter-spacing: 3px;
  font-weight: 800;
  font-size: 0.74rem;
  color: #ea580c;
}
.section-label:before {
  content: none;
}
.section-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section-subtitle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.page-header .container {
  text-align: center;
}
.page-header p {
  margin-left: auto;
  margin-right: auto;
}
/* Two-column editorial blocks keep their left alignment */
.responsive-grid-2 .section-label {
  justify-content: flex-start;
  text-align: left;
}
.responsive-grid-2 .section-title,
.responsive-grid-2 .section-subtitle {
  text-align: left;
  margin-left: 0;
}
main.page-light .section-label {
  justify-content: flex-start;
  text-align: left;
}
main.page-light .section-title {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* ============================================================
   CATEGORY CARDS — split layout: photo on top, text below on a
   WHITE panel with a stroke border. 3D tilt on hover; images
   drift with a slow ken-burns animation.
   ============================================================ */
.category-card {
  height: auto;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1.5px solid rgba(15, 23, 42, 0.16);
  border-radius: 20px;
  box-shadow: 0 14px 32px -22px rgba(15, 23, 42, 0.18);
  --text-primary: #0f172a;
  --muted: #5b6779;
  --accent: #146c85;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.65, 0.3, 1),
    box-shadow 0.5s ease, border-color 0.3s ease, opacity 0.6s ease;
}
.category-card:hover {
  border-color: #1a86a5;
  box-shadow: 0 30px 60px -24px rgba(15, 23, 42, 0.3),
    0 16px 28px -18px rgba(20, 108, 133, 0.28);
}
/* A straight lift. The 3D rotation this replaced put the card on a
   composited layer and resampled its text, which showed up as a blur. */
.categories-grid .category-card:hover {
  transform: translateY(-8px);
}
.category-media {
  position: relative;
  height: 250px;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}
.category-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: catDrift 14s ease-in-out infinite alternate;
}
@keyframes catDrift {
  from {
    transform: scale(1.02) translateX(0);
  }
  to {
    transform: scale(1.14) translateX(-3%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .category-media img {
    animation: none;
  }
  .category-card:hover {
    transform: none !important;
  }
}
.category-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: #f97316;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.category-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 28px 30px;
}
.category-body .category-title {
  margin-bottom: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  color: #1b2f5e;
}
.category-body .category-tags {
  margin-bottom: 0;
}
.category-card .tag {
  background: #f4f6fa;
  border: 1px solid #dfe6f0;
  color: #0f172a;
}
.category-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: #146c85;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.category-cta i {
  transition: transform 0.25s ease;
}
.category-card:hover .category-cta i {
  transform: translateX(5px);
}
@media (max-width: 768px) {
  .categories-grid {
    grid-template-columns: 1fr;
  }
  .category-media {
    height: 200px;
  }
}

/* ============================================================
   ADVANTAGE NUMBERS — keep the stock behavior the user likes:
   all outlined (gold stroke) by default; hovering a card
   reverses the stroke into a solid gold fill (built CSS).
   ============================================================ */

/* ============================================================
   ADVANTAGES REDESIGN — replace the old shared-border cell
   grid with spaced white cards: rounded stroke-border tiles,
   gold icon chip, number pinned top-right, lift on hover.
   (!important needed: built CSS uses !important on borders
   inside its media queries.)
   ============================================================ */
.advantages-grid {
  border: none;
  gap: 26px;
  grid-template-columns: repeat(3, 1fr);
}
.advantages-grid .advantage-card {
  background: #ffffff;
  border: 1.5px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 20px;
  padding: 34px 30px 36px;
  box-shadow: 0 16px 34px -26px rgba(15, 23, 42, 0.25);
  transition: transform 0.35s ease, box-shadow 0.35s ease,
    border-color 0.3s ease;
}
.advantages-grid .advantage-card:hover {
  transform: translateY(-6px);
  border-color: #1a86a5 !important;
  box-shadow: 0 26px 48px -26px rgba(15, 23, 42, 0.28),
    0 14px 26px -18px rgba(20, 108, 133, 0.25);
}
.advantage-card .advantage-num {
  position: absolute;
  top: 22px;
  right: 26px;
  margin-bottom: 0;
  font-size: 3.1rem;
}
.advantage-card .advantage-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef8fb;
  border: 1px solid #a8d8e6;
  border-radius: 14px;
  color: #146c85;
  font-size: 1.3rem;
  margin-bottom: 22px;
}
.advantage-card .advantage-title {
  font-size: 1.05rem;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}
.advantage-desc {
  font-size: 0.92rem;
}
@media (max-width: 1024px) {
  .advantages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .advantages-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .advantages-grid .advantage-card:hover {
    transform: none;
  }
}

/* ============================================================
   PRELOADER — full-screen SANGAM outline with the traveling
   golden light (same animation as the footer watermark).
   Hidden by app.js on window load; CSS backstop self-hides
   after 5s even without JS.
   ============================================================ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #0b1220;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  animation: preVanish 0.6s ease 5s forwards;
}
.preloader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-svg {
  width: min(760px, 88vw);
  height: auto;
  display: block;
}
.preloader-svg text {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 210px;
  letter-spacing: 0.04em;
  fill: none;
}
.pre-base {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.5;
}
.pre-trace {
  stroke: #f97316;
  stroke-width: 1.8;
  stroke-dasharray: 110 640;
  animation: megaTrace 3.2s linear infinite;
  filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.55));
}
@keyframes preVanish {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pre-trace {
    animation: none;
    opacity: 0;
  }
  .preloader {
    animation-delay: 0.8s;
  }
}

/* ============================================================
   PROMO POPUP — "buy products" suggestion card (650px).
   Injected by app.js; closing collapses it to a floating icon
   in the bottom-right corner which re-opens it on click.
   ============================================================ */
.promo-overlay {
  position: fixed;
  inset: 0;
  z-index: 9980;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 18, 32, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.promo-overlay.open {
  opacity: 1;
  visibility: visible;
}
.promo-pop {
  position: relative;
  width: min(650px, 92vw);
  max-height: 88vh;
  overflow: auto;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 40px 90px -30px rgba(11, 18, 32, 0.65);
  transform: translateY(26px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.3, 1.2);
}
.promo-overlay.open .promo-pop {
  transform: none;
}
.promo-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.promo-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}
.promo-head {
  position: relative;
  overflow: hidden;
  padding: 40px 44px 32px;
  background: linear-gradient(130deg, #146c85 0%, #1a86a5 70%, #2ba3c4 100%);
  border-radius: 24px 24px 0 0;
  color: #ffffff;
}
.promo-head:before {
  content: '';
  position: absolute;
  top: -90px;
  right: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%);
}
.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #fb923c, #f97316);
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 0 8px 18px -8px rgba(249, 115, 22, 0.8);
}
.promo-pop .promo-head h3 {
  position: relative;
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height: 1.2;
  color: #ffffff;
}
.promo-head h3 span {
  color: #7ccbe0;
}
.promo-head p {
  position: relative;
  margin: 0;
  max-width: 480px;
  font-size: 0.96rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}
.promo-points {
  list-style: none;
  margin: 0;
  padding: 28px 44px 6px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.promo-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.93rem;
  font-weight: 600;
  color: #3f4c61;
}
.promo-points li i {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  color: #ffffff;
  background: linear-gradient(135deg, #2ba3c4, #1a86a5);
  border-radius: 50%;
}
.promo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 24px 44px 36px;
}
.promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(135deg, #fb923c, #f97316);
  border-radius: 999px;
  box-shadow: 0 12px 26px -12px rgba(249, 115, 22, 0.7);
  transition: transform 0.25s, box-shadow 0.25s;
}
.promo-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(234, 88, 12, 0.75);
}
.promo-ghost {
  display: inline-flex;
  align-items: center;
  padding: 14px 30px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: #146c85;
  background: #ffffff;
  border: 1.5px solid rgba(20, 108, 133, 0.35);
  border-radius: 999px;
  transition: all 0.25s;
}
.promo-ghost:hover {
  background: #146c85;
  border-color: #146c85;
  color: #ffffff;
}
.promo-fab {
  position: fixed;
  right: 28px;
  bottom: 104px;
  z-index: 9970;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #ffffff;
  background: linear-gradient(135deg, #fb923c, #f97316);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(249, 115, 22, 0.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.8);
  transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
}
.promo-fab.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.promo-fab:hover {
  transform: translateY(-3px) scale(1.05);
}
.promo-fab-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(249, 115, 22, 0.65);
  animation: promoPulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes promoPulse {
  0% { transform: scale(1); opacity: 1; }
  70% { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}
@media (max-width: 640px) {
  .promo-head { padding: 32px 26px 26px; }
  .promo-points { padding: 22px 26px 4px; }
  .promo-actions { padding: 20px 26px 30px; }
  .promo-fab { right: 18px; bottom: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-fab-ring { animation: none; }
  .promo-pop { transition: none; }
}

/* ============================================================
   AUTH CARD (login.html) — polished, centered, responsive.
   Overrides the inline-styled card: rounded corners, soft
   shadow, branded tab underline, rounded inputs.
   ============================================================ */
section[x-data="authPage()"] .container > div {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px;
  box-shadow: 0 20px 48px -18px rgba(15, 84, 104, 0.18);
}
section[x-data="authPage()"] [role="tablist"] {
  background: #eef4f7 !important;
}
section[x-data="authPage()"] [role="tab"] {
  letter-spacing: 1.5px !important;
  border-bottom: 3px solid transparent !important;
  color: #64748b !important;
}
section[x-data="authPage()"] [role="tab"].active {
  color: #146c85 !important;
  background: #ffffff !important;
  border-bottom: 3px solid #f97316 !important;
}
.dark-input,
.dark-select,
.dark-textarea {
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid var(--border);
}
.dark-input:focus,
.dark-select:focus,
.dark-textarea:focus {
  border-color: #1a86a5;
  box-shadow: 0 0 0 3px rgba(26, 134, 165, 0.14);
}
@media (max-width: 640px) {
  section[x-data="authPage()"] [role="tablist"] + div {
    padding: 28px 20px !important;
  }
  section[x-data="authPage()"] [role="tab"] {
    padding: 15px 8px !important;
    font-size: 0.72rem !important;
    letter-spacing: 1px !important;
  }
}

/* ============================================================
   MODAL CENTERING — bulletproof on every device. `margin:auto`
   centers a flex child on both axes even when the container is
   mispositioned by a transformed ancestor or the content is
   taller than the viewport.
   ============================================================ */
[role="dialog"][aria-modal="true"]:not(.promo-pop):not(.quote-pop) {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex;
}
[role="dialog"][aria-modal="true"]:not(.promo-pop):not(.quote-pop) > div {
  margin: auto !important;
}
.promo-overlay > .promo-pop {
  margin: auto !important;
}
/* Product configurator card: soft corners + comfortable mobile fit */
[role="dialog"][aria-modal="true"] > div[style*="max-width:900px"] {
  border-radius: 18px;
}
@media (max-width: 640px) {
  [role="dialog"][aria-modal="true"]:not(.promo-pop):not(.quote-pop) {
    padding: 14px !important;
  }
  [role="dialog"][aria-modal="true"] > div[style*="max-width:900px"] {
    max-height: 94vh !important;
  }
}

/* ============================================================
   DISCOUNT PARTNER PROGRAMME — annual membership section on the
   home page. Split layout: perks left, pricing card right.
   ============================================================ */
.partner-section {
  background: linear-gradient(180deg, #f0f9fc 0%, #ffffff 100%);
  padding: 100px 0;
  border-top: 1px solid rgba(20, 108, 133, 0.12);
}
.partner-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.partner-info .section-label,
.partner-info .section-title,
.partner-info .section-subtitle {
  text-align: left;
  margin-left: 0;
  justify-content: flex-start;
}
.partner-perks {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.partner-perks li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.partner-perks li i {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #ffffff;
  background: linear-gradient(135deg, #146c85, #1a86a5);
  border-radius: 12px;
  box-shadow: 0 10px 20px -10px rgba(20, 108, 133, 0.55);
}
.partner-perks li strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 3px;
}
.partner-perks li span {
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #5b6779;
}
.partner-card {
  position: relative;
  background: #ffffff;
  border: 1.5px solid rgba(20, 108, 133, 0.22);
  border-radius: 24px;
  padding: 44px 40px 36px;
  text-align: center;
  box-shadow: 0 30px 60px -30px rgba(15, 84, 104, 0.35);
  overflow: hidden;
}
.partner-card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #146c85, #2ba3c4, #f97316);
}
.partner-card-badge {
  display: inline-block;
  padding: 7px 18px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ea580c;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  margin-bottom: 20px;
}
.partner-price {
  font-family: 'Poppins', sans-serif;
  font-size: 3.4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #146c85;
  line-height: 1;
}
.partner-price .cur {
  font-size: 1.6rem;
  vertical-align: super;
  margin-right: 2px;
}
.partner-price .per {
  font-size: 1rem;
  font-weight: 500;
  color: #5b6779;
  letter-spacing: 0;
}
.partner-card-note {
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #5b6779;
  margin: 18px 0 26px;
}
.partner-join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 17px 32px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #fb923c, #f97316);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 14px 28px -12px rgba(249, 115, 22, 0.7);
  transition: transform 0.25s, box-shadow 0.25s;
}
.partner-join-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -12px rgba(234, 88, 12, 0.75);
}
.partner-join-btn:disabled {
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: none;
  cursor: default;
  transform: none;
}
.partner-active-note {
  margin-top: 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #15803d;
}
.partner-active-note i { margin-right: 6px; }
.partner-fineprint {
  margin-top: 18px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  color: #8b96a5;
}
/* Savings nudge row used in cart/checkout summaries */
.partner-nudge {
  display: block;
  margin-bottom: 12px;
  padding: 10px 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #ea580c;
  background: #fff7ed;
  border: 1px dashed #fdba74;
  border-radius: 10px;
}
.partner-nudge:hover { background: #ffedd5; }
/* Discreet owner-dashboard link in the footer bottom bar */
.footer-owner-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 18px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted, #8b96a5);
  opacity: 0.75;
  transition: color 0.25s, opacity 0.25s;
}
.footer-owner-link:hover {
  color: #2ba3c4;
  opacity: 1;
}
@media (max-width: 900px) {
  .partner-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .partner-section { padding: 70px 0; }
}

/* ==========================================================================
   MOBILE HARDENING LAYER (v16)
   Safe, non-destructive guards that only take effect on phone-width screens.
   The layout already fits at 360-414px; these rules prevent edge-case
   clipping (long words / URLs / emails) and keep wide media, tables and
   pre blocks inside the viewport on real devices. They do not change the
   appearance of content that already fits.
   ========================================================================== */
@media (max-width: 640px) {
  /* 1. Long unbroken strings (product codes, emails, pasted URLs) must WRAP,
        not get silently clipped by the html/body `overflow-x: clip` guard. */
  h1, h2, h3, h4, h5, h6,
  p, li, a, dd, dt, span, strong, em, small, label, figcaption, blockquote,
  .hero-title, .section-title, .category-title, .banner-title, .cta-title,
  .product-card-title, .cart-item-title, .testimonial-text,
  .footer-col a, .topbar-item {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* 2. Media never exceeds its column. */
  img, svg, video, iframe, canvas, picture {
    max-width: 100%;
    height: auto;
  }
  iframe { width: 100%; }

  /* 3. Wide data (tables / preformatted) scroll inside their own box
        instead of stretching the page. */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { overflow-wrap: break-word; white-space: pre-wrap; }

  /* 4. Flex/grid children are allowed to shrink below their content size
        (prevents a single long child from forcing horizontal overflow). */
  .hero-actions > *,
  .contact-info,
  .cart-item-body,
  .order-meta > div {
    min-width: 0;
  }
}

/* 5. Smallest phones: keep the utility topbar readable and fully inside the
      screen (location text was hugging the right edge at <=380px). */
@media (max-width: 380px) {
  .topbar-inner { padding-left: 14px; padding-right: 14px; gap: 10px; }
  .topbar-item { font-size: 0.7rem; }
}

/* ==========================================================================
   FLOATING BUTTONS + MOBILE MENU FIXES (v17)
   ========================================================================== */

/* Back-to-top and the promo offer button share one right-aligned column:
   both 56px circles, same right offset, stacked with a consistent gap.
   (Built CSS has back-to-top at right:30px while the promo FAB used
   28px / 18px — they never lined up.) */
.back-to-top {
  right: 28px;
  bottom: 30px;
}
.promo-fab {
  right: 28px;
  bottom: 104px; /* 30 + 56 + 18 gap */
}
@media (max-width: 640px) {
  .back-to-top {
    right: 18px;
    bottom: 22px;
  }
  .promo-fab {
    right: 18px;
    bottom: 96px; /* 22 + 56 + 18 gap */
  }
}

/* Mobile menu repair:
   1) `.main-header.scrolled` translates the header up 38px; that transform
      makes the header the containing block for the fixed `.nav-links` panel,
      so after scrolling the open menu collapsed to the header strip and its
      links painted transparently over the page text. Cancel the transform
      while the menu is open so the panel always covers the full viewport.
   2) The promo FAB (z-index 9970) floated on top of the open menu (the
      header stacking context is z-index 1000). Hide both floating buttons
      while the menu is open. */
.main-header:has(.nav-links.open) {
  transform: none;
}
body:has(.nav-links.open) .promo-fab,
body:has(.nav-links.open) .back-to-top {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

/* ==========================================================================
   MOBILE MENU FORMAT (v18)
   Structure: logo + tagline + two-line about on top, nav links in the
   middle, tappable phone / email pinned at the bottom.
   ========================================================================== */
.mobile-menu-head { display: none; }

@media (max-width: 768px) {
  .nav-links {
    padding: 86px 28px 30px;
    gap: 20px;
    overflow-y: auto;
  }

  /* 1) Brand block: logo, tagline, short about */
  .mobile-menu-head {
    display: block;
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  }
  .mm-logo {
    display: block;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.6rem;
    font-weight: 800 !important;
    letter-spacing: 3px;
    color: #0f172a;
  }
  .mm-tagline {
    display: block;
    margin-top: 4px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent, #146c85);
  }
  .mm-about {
    max-width: 300px;
    margin: 14px auto 0;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.65;
    color: var(--muted, #5b6779);
  }

  /* 2) Nav links — tighter than the built 1.6rem so the format breathes */
  .nav-links > li > a {
    font-size: 1.25rem !important;
    letter-spacing: 1.5px !important;
    font-weight: 700;
  }

  /* 3) Contact block pinned at the bottom (margin-top:auto from built CSS) */
  .mobile-menu-footer {
    width: 100%;
    padding-top: 20px;
    border-top: 1px solid var(--border, rgba(15, 23, 42, 0.08));
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .nav-links .mobile-menu-footer a.mm-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem !important;
    font-weight: 700;
    letter-spacing: 0.3px !important;
    text-transform: none;
    color: var(--text-primary, #0f172a);
    text-decoration: none;
  }
  .mm-contact i {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(26, 134, 165, 0.12);
    color: var(--accent, #146c85);
    font-size: 0.85rem;
  }
  .nav-links .mm-contact:after {
    content: none !important;
  }
}

/* ==========================================================================
   HEADER LOGIN BUTTON + MOBILE MENU LOGIN (v19)
   Desktop: icon + text label. Mobile: icon-only square button matching the
   cart button, with the Login entry moved into the hamburger menu.
   ========================================================================== */
.login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted, #5b6779);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.login-btn i {
  font-size: 0.9rem;
}
.login-btn .auth-label {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}
.login-btn:hover {
  color: var(--accent, #146c85);
}
.login-btn:after {
  content: none !important;
}

/* Login inside the hamburger menu — mobile only */
.mobile-menu-login {
  display: none;
}

@media (max-width: 768px) {
  /* Icon-only login button, styled like the cart button */
  .login-btn {
    width: 44px;
    height: 44px;
    justify-content: center;
    border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
    color: var(--text-primary, #0f172a);
    font-size: 1rem;
    flex: 0 0 auto;
  }
  .login-btn i {
    font-size: 1rem;
  }
  .login-btn .auth-label {
    display: none;
  }
  .mobile-menu-login {
    display: block;
  }
}

@media (max-width: 480px) {
  .nav-actions {
    gap: 10px;
  }
}

/* Short screens: hide the about blurb so all menu items stay visible */
@media (max-width: 768px) and (max-height: 700px) {
  .nav-links {
    padding-top: 74px;
    gap: 14px;
  }
  .mm-about {
    display: none;
  }
}

/* ============================================================
   CARD ENTRANCE (v24) — cards fly in from alternating directions
   (left → up → right → down across each row) and settle into
   place as they scroll into view. Tagged by app.js
   (.card-reveal + .card-dir-* + --reveal-i); .reveal-in releases.
   ============================================================ */
.card-reveal {
  opacity: 0;
  transition:
    opacity 0.6s ease,
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--reveal-i, 0) * 110ms);
  will-change: opacity, transform;
}
.card-reveal.card-dir-left,
.card-reveal.fade-in.card-dir-left {
  transform: translateX(-80px) scale(0.97);
}
.card-reveal.card-dir-right,
.card-reveal.fade-in.card-dir-right {
  transform: translateX(80px) scale(0.97);
}
.card-reveal.card-dir-up,
.card-reveal.fade-in.card-dir-up {
  transform: translateY(-70px) scale(0.97);
}
.card-reveal.card-dir-down,
.card-reveal.fade-in.card-dir-down {
  transform: translateY(70px) scale(0.97);
}
.card-reveal.reveal-in,
.card-reveal.fade-in.reveal-in,
.card-reveal.fade-in.visible.reveal-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s ease,
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .card-reveal {
    opacity: 1;
    transform: none !important;
    transition: none;
  }
}

/* ============================================================
   PROMISE BANNER (v20) — the giant "NO WASTAGE" watermark becomes
   a continuous low-opacity marquee behind the text. The bundle's
   static :before watermark is retired; the moving copy rides on
   :after so the teal band and foreground content stay untouched.
   ============================================================ */
.banner-inner {
  position: relative;
  overflow: hidden;
}
.banner-inner:before {
  content: '';
  display: none;
}
.banner-inner:after {
  content: 'NO WASTAGE \2022 ZERO SCRAP BILLING \2022 NO WASTAGE \2022 ZERO SCRAP BILLING \2022 NO WASTAGE \2022 ZERO SCRAP BILLING \2022 ';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 0;
  white-space: nowrap;
  pointer-events: none;
  font-family: 'Archivo Black', 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(6rem, 15vw, 15rem);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.07);
  animation: bannerMarquee 60s linear infinite;
}
@keyframes bannerMarquee {
  from { transform: translate(0, -50%); }
  to   { transform: translate(-33.333%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .banner-inner:after {
    animation: none;
  }
}

/* ============================================================
   FOUNDER'S MESSAGE (v32) — light, editorial: text left, framed
   portrait right, story continues full-width, stat tiles below.
   No panel background — sits natively on the page.
   ============================================================ */
.fdr-panel {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}
.fdr-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 56px;
  align-items: center;
}
.fdr-photo {
  position: relative;
  margin: 0;
}
/* offset accent ring tucked behind the portrait */
.fdr-photo:before {
  content: '';
  position: absolute;
  top: 14px;
  right: -14px;
  bottom: 46px;
  left: 14px;
  border: 2px solid rgba(249, 115, 22, 0.35);
  border-radius: 24px;
  pointer-events: none;
}
.fdr-photo img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 26px 50px -26px rgba(15, 23, 42, 0.4);
  background: #fff;
}
.fdr-photo figcaption {
  text-align: center;
  margin-top: 16px;
}
.fdr-photo figcaption strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.fdr-photo figcaption span {
  display: block;
  margin-top: 4px;
  font: 700 0.6rem 'Space Grotesk', sans-serif;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #ea580c;
}
.fdr-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  font: 700 0.64rem 'Space Grotesk', sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #c2410c;
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.25);
  padding: 8px 16px;
  border-radius: 999px;
}
.fdr-main h2,
.fdr-copy h2 {
  position: relative;
  z-index: 1;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 16px 0 22px;
}
.fdr-copy h2 .italic {
  font-style: italic;
  color: #ea580c;
}
.fdr-copy p,
.fdr-rest p {
  position: relative;
  z-index: 1;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--muted);
  margin: 0 0 16px;
}
.fdr-copy p strong,
.fdr-rest p strong { color: var(--text-primary); }
.fdr-copy p em,
.fdr-rest p em { color: #0f5468; }
.fdr-rest {
  position: relative;
  z-index: 1;
  margin-top: 30px;
}
.fdr-highlight {
  position: relative;
  z-index: 1;
  margin: 22px 0;
  padding: 20px 24px;
  border-left: 4px solid #f97316;
  border-radius: 0 14px 14px 0;
  background: rgba(249, 115, 22, 0.06);
}
.fdr-highlight p {
  font-family: 'Poppins', sans-serif;
  font-size: 1.04rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.6;
  color: #1e293b;
  margin: 0;
}
.fdr-sign {
  position: relative;
  z-index: 1;
  margin: 28px 0 0;
}
.fdr-sign-name {
  display: inline-block;
  font-family: 'Brush Script MT', 'Segoe Script', 'Lucida Handwriting', cursive !important;
  font-size: 2.4rem;
  line-height: 1;
  color: #ea580c;
  transform: rotate(-3deg);
}
.fdr-sign-role {
  margin-top: 8px;
  font: 700 0.62rem 'Space Grotesk', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.fdr-facts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 44px;
  text-align: center;
}
.fdr-facts > div {
  padding: 22px 14px 24px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.25);
}
.fdr-facts b {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #ea580c;
}
.fdr-facts span {
  display: block;
  margin-top: 4px;
  font: 700 0.58rem 'Space Grotesk', sans-serif;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 940px) {
  .fdr-top { grid-template-columns: 1fr; gap: 32px; }
  .fdr-photo { max-width: 300px; margin: 0 auto; width: 100%; }
  .fdr-copy p, .fdr-rest p { font-size: 0.9rem; }
  .fdr-highlight { padding: 17px 18px; }
  .fdr-highlight p { font-size: 0.98rem; }
  .fdr-facts { grid-template-columns: 1fr 1fr; margin-top: 34px; }
}

/* ============================================================
   THE SANGAM CODE (v33) — philosophy / standing-policy section
   on the About page: editorial index list with ghost numerals,
   category chips, hairline dividers and a hover accent.
   ============================================================ */
.code-sec {
  background:
    radial-gradient(900px 300px at 85% 0%, rgba(249, 115, 22, 0.05), transparent 60%),
    linear-gradient(180deg, #fbf7f1 0%, #fdfcfa 100%);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.code-head {
  max-width: 1120px;
  margin: 0 auto 46px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
}
.code-head p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 6px;
}
.code-list {
  max-width: 1120px;
  margin: 0 auto;
  border-top: 1.5px solid rgba(15, 23, 42, 0.14);
}
.code-row {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1.05fr 1.45fr 40px;
  gap: 30px;
  align-items: center;
  padding: 30px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  transition: background 0.25s ease, padding-left 0.25s ease;
}
.code-row:hover {
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.05), transparent 70%);
  padding-left: 22px;
}
.code-num {
  font-family: 'Poppins', sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(15, 23, 42, 0.22);
  transition: -webkit-text-stroke-color 0.25s ease;
  font-variant-numeric: tabular-nums;
}
.code-row:hover .code-num {
  -webkit-text-stroke-color: #f97316;
}
.code-tag {
  display: inline-block;
  font: 700 0.56rem 'Space Grotesk', sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #0f5468;
  background: rgba(20, 108, 133, 0.08);
  border: 1px solid rgba(20, 108, 133, 0.18);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 9px;
}
.code-title h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.code-row > p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.89rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}
.code-arr {
  justify-self: end;
  font-size: 0.95rem;
  color: #f97316;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.code-row:hover .code-arr {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 940px) {
  .code-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; }
  .code-row { grid-template-columns: 56px 1fr; gap: 8px 18px; padding: 24px 4px; }
  .code-num { font-size: 1.8rem; grid-row: 1 / 3; align-self: start; margin-top: 4px; }
  .code-row > p { grid-column: 2; }
  .code-arr { display: none; }
  .code-row:hover { padding-left: 4px; }
}

/* ============================================================
   LEGAL PAGES (v34) — terms / privacy / refund / shipping docs
   + the policy links row above the footer bottom bar.
   ============================================================ */
.legal-doc {
  max-width: 860px;
  margin: 0 auto;
}
.legal-doc .legal-updated {
  font: 700 0.68rem 'Space Grotesk', sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c2410c;
  background: rgba(249, 115, 22, 0.07);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 10px;
  padding: 12px 16px;
  line-height: 1.7;
  margin: 0 0 34px;
}
.legal-doc h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 34px 0 12px;
  padding-top: 22px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.legal-doc h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal-doc p,
.legal-doc li {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--muted);
}
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul,
.legal-doc ol { margin: 0 0 14px; padding-left: 22px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc li::marker { color: #ea580c; font-weight: 700; }
.legal-doc strong { color: var(--text-primary); }
.legal-doc a { color: #c2410c; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal-doc em { color: #0f5468; font-style: normal; font-weight: 600; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding: 16px 0 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-legal a {
  font: 600 0.72rem 'Space Grotesk', sans-serif;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-legal a:hover { color: #fb923c; }
.checkout-consent {
  margin-top: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--muted);
  text-align: center;
}
.checkout-consent a { color: var(--accent); font-weight: 600; }

/* ============================================================
   PRODUCTS NAV DROPDOWN + FASTENERS PAGE (v35) — the Products
   menu splits into Steel Bars (raw material) and the in-house
   Machine Tools & Fasteners line.
   ============================================================ */
.has-drop { position: relative; }
.drop-caret { font-size: 0.55rem; margin-left: 5px; opacity: 0.6; vertical-align: 2px; }
.drop-menu {
  position: absolute;
  top: 100%;
  left: -12px;
  min-width: 265px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(15, 23, 42, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 400;
}
.has-drop:hover .drop-menu,
.has-drop:focus-within .drop-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.drop-menu li { list-style: none; }
.drop-menu a {
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  text-decoration: none;
  line-height: 1.35;
}
.drop-menu a:hover { background: rgba(249, 115, 22, 0.07); }
.drop-menu a strong {
  display: block;
  font: 600 0.82rem 'Manrope', sans-serif !important;
  color: #0f172a;
  letter-spacing: 0;
  text-transform: none;
}
.drop-menu a span {
  display: block;
  margin-top: 2px;
  font: 500 0.68rem 'Manrope', sans-serif !important;
  color: #64748b;
  letter-spacing: 0;
  text-transform: none;
}
.drop-menu a:hover strong { color: #c2410c; }
@media (max-width: 768px) {
  /* inside the mobile menu the sub-links sit inline under Products */
  .has-drop .drop-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 6px 26px;
    min-width: 0;
  }
  .drop-menu a { padding: 7px 0; }
  .drop-menu a:hover { background: transparent; }
  .drop-menu a strong { color: inherit; font-size: 0.95rem !important; opacity: 0.85; }
  .drop-menu a span { display: none; }
  .drop-caret { display: none; }
}

/* ---------- fasteners page ---------- */
.fast-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 980px;
  margin: 0 auto 54px;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(20, 108, 133, 0.06);
  border: 1px solid rgba(20, 108, 133, 0.18);
}
.fast-note i { color: #146c85; margin-top: 4px; }
.fast-note p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}
.fast-note strong { color: var(--text-primary); }
.fast-group { margin: 54px 0 22px; }
.fast-group:first-of-type { margin-top: 0; }
.fast-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .fast-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .fast-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fast-grid { grid-template-columns: 1fr; } }
.fast-card {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.fast-card:hover {
  border-color: rgba(249, 115, 22, 0.45);
  box-shadow: 0 18px 34px -22px rgba(15, 23, 42, 0.3);
  transform: translateY(-3px);
}
.fast-card > i {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: #ea580c;
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.18);
  margin-bottom: 14px;
}
.fast-card.treat > i {
  color: #0f5468;
  background: rgba(20, 108, 133, 0.07);
  border-color: rgba(20, 108, 133, 0.18);
}
.fast-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 7px;
}
.fast-card p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 14px;
  flex: 1;
}
.fast-card a {
  font: 700 0.66rem 'Space Grotesk', sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c2410c;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.fast-card a i { transition: transform 0.2s ease; }
.fast-card a:hover i { transform: translateX(4px); }

/* ============================================================
   CONFIGURATOR MODAL SCROLL FIX (v36) — Alpine's x-show wipes
   the card's inline display:flex when it re-shows the element
   (and re-serializes the style attribute, so [style*=...]
   selectors stop matching). Assert the layout via a real class
   and let the pane shrink (min-height:0) so overflow-y:auto
   engages and Add to Cart stays reachable.
   ============================================================ */
.config-card {
  display: flex !important;
  flex-direction: column;
  border-radius: 18px;
}
.modal-detail-wrap { min-height: 0; }
@media (max-width: 640px) {
  .config-card { max-height: 94vh !important; }
}

/* ============================================================
   PRELOADER — temporarily disabled (site felt slow to open).
   Delete this one rule to bring the SANGAM trace animation back.
   ============================================================ */
#preloader {
  display: none !important;
}

/* ============================================================
   ORDER PROGRESS TRACKER (v25) — five-stage fulfilment flow on
   the customer's My Orders cards: Placed → Confirmed →
   Preparing → In Transit → Delivered (+ cancelled notice).
   ============================================================ */
.oc-items {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 2px 0 14px;
}
.oc-track {
  display: flex;
  align-items: flex-start;
  margin: 4px 0 14px;
  padding: 14px 6px 12px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
}
.oc-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  min-width: 0;
}
/* The steps are rendered by an Alpine <template x-for>, which stays in the
   DOM as the first child — so use :first-of-type (div) to skip the first
   step's connector, otherwise "Placed" grows a line that exits the card. */
.oc-step:not(:first-of-type):before {
  content: '';
  position: absolute;
  top: 13px;
  right: calc(50% + 16px);
  left: calc(-50% + 16px);
  height: 3px;
  border-radius: 2px;
  background: #dbe3ea;
}
.oc-step.done:not(:first-of-type):before,
.oc-step.current:not(:first-of-type):before {
  background: linear-gradient(90deg, #14b8a6, #0d9488);
}
.oc-step-dot {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  background: #e6ebf0;
  color: #94a3b8;
  border: 2px solid #dbe3ea;
  position: relative;
  z-index: 1;
}
.oc-step.done .oc-step-dot {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
}
.oc-step.current .oc-step-dot {
  background: #fff;
  border-color: #0d9488;
  color: #0d9488;
  animation: ocPulse 2s ease-in-out infinite;
}
@keyframes ocPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.14); }
  50% { box-shadow: 0 0 0 9px rgba(13, 148, 136, 0.05); }
}
.oc-step-label {
  margin-top: 7px;
  font: 700 0.62rem 'Space Grotesk', sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #94a3b8;
}
.oc-step.done .oc-step-label,
.oc-step.current .oc-step-label {
  color: #0f766e;
}
.oc-step-sub {
  margin-top: 2px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.6rem;
  color: var(--muted);
}
.oc-hint {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.74rem;
  color: var(--muted);
  margin: 0 0 14px;
}
.oc-hint i {
  color: #0d9488;
}
.oc-cancel-note {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 4px 0 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.07);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #b91c1c;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.76rem;
}
@media (max-width: 560px) {
  .oc-step-sub { display: none; }
  .oc-step-label { font-size: 0.54rem; letter-spacing: 0.3px; }
  .oc-track { padding: 12px 2px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .oc-step.current .oc-step-dot { animation: none; }
}

/* ============================================================
   QUOTE REQUEST MODAL (v25) — opened by the "Request Free
   Quote" CTA; built and injected by app.js (SangamQuote).
   ============================================================ */
.quote-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 18, 28, 0.62);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.quote-overlay.open {
  opacity: 1;
  visibility: visible;
}
.quote-pop {
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - 40px);
  overflow: auto;
  background: #ffffff;
  border-radius: 22px;
  padding: 30px 30px 26px;
  position: relative;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.5);
  transform: translateY(16px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.quote-overlay.open .quote-pop {
  transform: none;
}
.quote-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  font-size: 1.15rem;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
}
.quote-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.quote-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 0.62rem 'Space Grotesk', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c2410c;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.25);
  padding: 6px 12px;
  border-radius: 999px;
}
.quote-head h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  margin: 12px 0 6px;
  color: #0f172a;
}
.quote-head h3 span {
  color: #f97316;
}
.quote-head p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 18px;
}
.quote-form label {
  display: block;
  font: 700 0.62rem 'Space Grotesk', sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 12px;
}
.quote-form input,
.quote-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #f8fafc;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  color: #0f172a;
  resize: vertical;
}
.quote-form input:focus,
.quote-form textarea:focus {
  outline: none;
  border-color: #f97316;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14);
}
.quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.quote-submit {
  width: 100%;
  margin-top: 4px;
  padding: 14px 20px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  font: 700 0.78rem 'Space Grotesk', sans-serif;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.quote-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -12px rgba(249, 115, 22, 0.6);
}
.quote-alt {
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  color: #64748b;
  margin: 12px 0 0;
}
.quote-alt a {
  color: #f97316;
  font-weight: 700;
}
@media (max-width: 520px) {
  .quote-grid { grid-template-columns: 1fr; }
  .quote-pop { padding: 24px 20px 22px; }
}

/* ============================================================
   MY ORDERS (v22) — status-aware order cards: colored accent
   bar, status + payment badges, grade chips, meta row and a
   prominent grand total with a view-details affordance.
   ============================================================ */
.order-card2 {
  display: block;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 18px;
  padding: 22px 26px 20px 30px;
  margin-bottom: 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.order-card2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #38bdf8;
}
.order-card2.st-processing::before { background: #f59e0b; }
.order-card2.st-dispatched::before { background: #8b5cf6; }
.order-card2.st-delivered::before { background: #22c55e; }
.order-card2.st-cancelled::before { background: #ef4444; }
.order-card2:hover {
  transform: translateY(-3px);
  border-color: rgba(26, 134, 165, 0.45);
  box-shadow: 0 18px 34px -18px rgba(15, 23, 42, 0.3);
}
.oc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.oc-id {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: 0.5px;
  color: #146c85;
}
.oc-date {
  margin-top: 5px;
  font: 500 0.76rem 'Space Grotesk', sans-serif;
  color: #64748b;
}
.oc-date i {
  margin-right: 6px;
  opacity: 0.75;
}
.oc-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.oc-badge {
  padding: 5px 13px;
  border-radius: 999px;
  font: 700 0.64rem 'Space Grotesk', sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   PRODUCT DETAIL PAGE (v38) — product.html?id=N. Dedicated
   per-grade page like the original site's /products/N: full
   uncropped artwork, price/tolerance chips, configurator,
   About + Key Features, technical specs, related products.
   ============================================================ */
.pd-crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 0.68rem 'Space Grotesk', sans-serif;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pd-crumbs a {
  color: var(--accent);
  text-decoration: none;
}
.pd-crumbs a:hover { text-decoration: underline; }
.pd-crumbs span { color: var(--muted); }
.pd-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 34px 0 26px;
  font: 700 0.7rem 'Space Grotesk', sans-serif;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.pd-back:hover { color: var(--accent); }
.pd-grid {
  display: grid;
  grid-template-columns: minmax(0, 460px) 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 56px;
}
.pd-media {
  position: relative;
  aspect-ratio: 4 / 3; /* matches the 800×600 grade artwork — no cropping */
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #0b1220;
  box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.35);
}
.pd-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-media-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
  color: #e2e8f0;
  font: 700 0.64rem 'Space Grotesk', sans-serif;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.pd-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.pd-chip {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 13px 16px;
  box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.2);
}
.pd-chip span {
  display: block;
  font: 700 0.6rem 'Space Grotesk', sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.pd-chip strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
}
.pd-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 30px 32px;
}
.pd-desc {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 18px;
}
.pd-remarks {
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
}
.pd-sec-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.pd-cart-btn {
  flex: 1;
  min-width: 200px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #ffffff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 16px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 999px;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.pd-cart-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pd-quote-btn {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 16px 24px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: 999px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.pd-quote-btn:hover { border-color: var(--accent); color: var(--accent); }
.pd-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 56px;
}
.pd-info-col h2,
.pd-specs-wrap h2,
.pd-similar h2 {
  font-family: 'Syne', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 18px;
}
.pd-info-col p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
}
.pd-feats {
  list-style: none;
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
}
.pd-feats li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
}
.pd-feats li i {
  color: var(--accent);
  margin-top: 3px;
  flex-shrink: 0;
}
.pd-specs-wrap { margin-bottom: 56px; }
.pd-specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.pd-specs > div {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.pd-specs span {
  display: block;
  font: 700 0.6rem 'Space Grotesk', sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.pd-specs strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}
.pd-similar { padding-bottom: 70px; }
@media (max-width: 960px) {
  .pd-grid { grid-template-columns: 1fr; gap: 28px; }
  .pd-info { grid-template-columns: 1fr; gap: 32px; }
  .pd-panel { padding: 24px 20px; }
}
@media (max-width: 560px) {
  .pd-chips { grid-template-columns: 1fr; }
}
.oc-confirmed { background: #e0f2fe; color: #075985; }
.oc-processing { background: #fef3c7; color: #b45309; }
.oc-dispatched { background: #ede9fe; color: #6d28d9; }
.oc-delivered { background: #dcfce7; color: #15803d; }
.oc-cancelled { background: #fee2e2; color: #b91c1c; }
.oc-pay-pending { background: #ffedd5; color: #c2410c; }
.oc-pay-paid { background: #dcfce7; color: #15803d; }
.oc-pay-refunded { background: #e2e8f0; color: #334155; }
.oc-grades {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 2px;
}
.oc-grade {
  padding: 4px 12px;
  border-radius: 8px;
  background: rgba(20, 108, 133, 0.07);
  border: 1px solid rgba(20, 108, 133, 0.16);
  color: #146c85;
  font: 700 0.72rem 'Space Grotesk', sans-serif;
}
.oc-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
}
.oc-meta {
  display: flex;
  gap: 18px;
  font: 600 0.8rem 'Space Grotesk', sans-serif;
  color: #64748b;
}
.oc-meta i {
  margin-right: 7px;
  color: #146c85;
  opacity: 0.65;
}
.oc-total-label {
  display: block;
  font: 700 0.58rem 'Space Grotesk', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 3px;
}
.oc-total {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -0.01em;
  color: #0f172a;
}
.oc-view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 0.7rem 'Space Grotesk', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #146c85;
  padding-bottom: 4px;
}
.oc-view i {
  transition: transform 0.25s ease;
}
.order-card2:hover .oc-view i {
  transform: translateX(5px);
}
@media (max-width: 620px) {
  .order-card2 {
    padding: 18px 18px 16px 22px;
  }
  .oc-total {
    font-size: 1.15rem;
  }
  .oc-view {
    display: none;
  }
}

/* ============================================================
   BIG SCREENS (v23) — fluid scale-up. The layout system is
   rem-based, so raising the root font size makes containers,
   type and spacing grow together with the resolution instead
   of leaving dead whitespace. The px-capped nav/topbar are
   re-tied to the same 96rem track as the content.
   ============================================================ */
@media (min-width: 1800px) {
  html {
    font-size: 17px;
  }
  .container,
  .nav-container,
  .topbar-inner {
    max-width: 96rem;
  }
}
@media (min-width: 2200px) {
  html {
    font-size: 18.5px;
  }
}
@media (min-width: 2800px) {
  html {
    font-size: 20px;
  }
}






/* ============================================================
   BRAND LOGO (v39) — the supplied Sangam Steels India mark
   replaces the previous text wordmark in the navbar and in the
   mobile menu header. Source art is transparent PNG, trimmed of
   its surrounding whitespace and scaled to 900px wide.
   ============================================================ */
.logo {
  align-items: center;
  justify-content: center;
}
.logo-img {
  display: block;
  height: 54px;
  width: auto;
  max-width: 100%;
  transition: height 0.3s ease;
}
/* The header shrinks once the page is scrolled — the logo follows it. */
.main-header.scrolled .logo-img { height: 44px; }

@media (max-width: 1100px) { .logo-img { height: 46px; } }
@media (max-width: 600px)  { .logo-img { height: 40px; } }
@media (max-width: 380px)  { .logo-img { height: 36px; } }

/* Mobile slide-in menu header */
.mm-logo-img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 210px;
  margin-bottom: 14px;
}

/* ---- real logo in blog header / drawer / footer -------------------------
   These three slots carried a text wordmark from the v2 build. They now use
   the actual logo asset (logo-horizontal.png, 1894x400, whitespace trimmed).*/
.mm-logo-img { display: block; width: auto; height: 46px; max-width: 80%; margin: 0 auto; }
.footer-logo-img { display: block; width: auto; height: 54px; max-width: 100%; margin-bottom: 16px; }
@media (max-width: 600px) { .footer-logo-img { height: 44px; } }