/* ==============================================================================
   TrueAssay™ Verified - Brand Identity & Design System Layer
   Bio Global Compounds B.V., Amsterdam
   Palettes: TrueAssay Navy, Radiant Gold/Orange, Warm Alabaster Cream, Emerald Pass
   ============================================================================== */

:root {
  /* Brand Core Colors */
  --ta-navy:        #003148;
  --ta-navy-deep:   #012758;
  --ta-navy-surface:#072535;
  --ta-navy-tint:   #0A3850;

  --ta-orange:      #F0A44B;
  --ta-orange-deep: #E08A2B;
  --ta-orange-light:#F6C98A;
  --ta-orange-glow: rgba(240, 164, 75, 0.18);

  --ta-cream:       #F7F5F0;
  --ta-cream-warm:  #F4F2EC;
  --ta-cream-deep:  #EBE7DF;

  --ta-green:       #1F8A4C;
  --ta-green-deep:  #15803d;
  --ta-green-light: #f0fdf4;
  --ta-green-border:#bbf7d0;

  --ta-grad-gold:   linear-gradient(100deg, var(--ta-orange-deep) 0%, var(--ta-orange) 45%, var(--ta-orange-light) 100%);
  --ta-grad-navy:   linear-gradient(135deg, var(--ta-navy) 0%, var(--ta-navy-deep) 100%);
  --ta-grad-surface:linear-gradient(180deg, #FFFFFF 0%, var(--ta-cream) 100%);

  /* System token mappings */
  --p-bg:           #ffffff;
  --p-surface:      var(--ta-cream);
  --p-ink:          var(--ta-navy);
  --p-muted:        #4E697C;
  --p-accent:       var(--ta-orange);
  --p-accent-ink:   var(--ta-navy);
  --p-action:       var(--ta-orange);
  --p-action-ink:   var(--ta-navy);

  --p-inv-bg:       var(--ta-navy);
  --p-inv-surface:  var(--ta-navy-tint);
  --p-inv-ink:      #ffffff;
  --p-inv-muted:    #A3B8C7;
  --p-inv-accent:   var(--ta-orange);
  --p-inv-accent-ink:var(--ta-navy);
  --p-inv-action:   var(--ta-orange);
  --p-inv-action-ink:var(--ta-navy);

  --font-display:   "Work Sans", system-ui, -apple-system, sans-serif;
  --font-text:      "Work Sans", system-ui, -apple-system, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.025em;

  /* Custom cubic-bezier easings from Emil Kowalski design-eng */
  --ease-out:       cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring:    cubic-bezier(0.32, 0.72, 0, 1);
}

/* --------------------------------------------------------------------------
   Navigation Bar
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(0, 49, 72, 0.08);
  box-shadow: 0 2px 12px -2px rgba(0, 49, 72, 0.04);
}

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav__logo img {
  height: 42px;
  width: auto;
  display: block;
  transition: transform 0.2s ease;
}

.nav__logo:hover img {
  transform: scale(1.02);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-1, 4px);
}

.nav__link {
  font-size: 15px;
  font-weight: 500;
  color: var(--ta-navy);
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.18s var(--ease-out);
}

.nav__link:hover {
  background: rgba(0, 49, 72, 0.05);
  color: var(--ta-orange-deep);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Buttons Polish (Emil Kowalski feedback principle) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out;
}

.btn:active {
  transform: scale(0.97) !important;
}

.btn--primary {
  background: var(--ta-grad-gold);
  color: var(--ta-navy);
  box-shadow: 0 4px 14px -2px rgba(224, 138, 43, 0.35);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(224, 138, 43, 0.45);
}

.btn--secondary {
  background: rgba(0, 49, 72, 0.06);
  color: var(--ta-navy);
  border: 1px solid rgba(0, 49, 72, 0.15);
}

.btn--secondary:hover {
  background: rgba(0, 49, 72, 0.12);
  transform: translateY(-2px);
}

.btn--inv-primary {
  background: var(--ta-orange);
  color: var(--ta-navy);
  box-shadow: 0 4px 16px rgba(240, 164, 75, 0.4);
}

.btn--inv-primary:hover {
  transform: translateY(-2px);
  background: #ffb866;
  box-shadow: 0 8px 24px rgba(240, 164, 75, 0.55);
}

/* --------------------------------------------------------------------------
   Section Backgrounds & Visual Rhythm
   -------------------------------------------------------------------------- */
.hero--split {
  background:
    radial-gradient(circle at 85% 25%, rgba(240, 164, 75, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 12% 80%, rgba(0, 49, 72, 0.04) 0%, transparent 40%),
    linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%);
  padding-top: calc(var(--s-8, 32px) + 16px);
  padding-bottom: var(--s-10, 48px);
}

.section-head > h2::after, .hero-copy h1::after {
  content: "";
  display: block;
  width: 68px;
  height: 4px;
  border-radius: 2px;
  margin-top: 14px;
  background: var(--ta-grad-gold);
}

.hero-copy h1::after {
  width: 96px;
}

/* Brand Ribbon */
.ta-band {
  background: linear-gradient(90deg, #00273A 0%, #003148 50%, #012758 100%);
  border-top: 1px solid rgba(240, 164, 75, 0.35);
  border-bottom: 1px solid rgba(240, 164, 75, 0.35);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 16px 0;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* The Standard Section (Warm Alabaster) */
#standard {
  background: var(--ta-cream);
  border-top: 1px solid rgba(0, 49, 72, 0.06);
  border-bottom: 1px solid rgba(0, 49, 72, 0.06);
}

/* How It Works Section */
#how {
  background: linear-gradient(180deg, #FAF8F4 0%, #F1EEE6 100%);
}

/* Verify a Lot Section (Deep Midnight Navy with glowing aura) */
#verify.section.ground-inverse {
  background:
    radial-gradient(90rem 44rem at 82% 16%, rgba(240, 164, 75, 0.22) 0%, transparent 55%),
    radial-gradient(60rem 30rem at 10% 85%, rgba(1, 39, 88, 0.45) 0%, transparent 50%),
    var(--ta-navy);
  border-top: 1px solid rgba(240, 164, 75, 0.2);
  border-bottom: 1px solid rgba(240, 164, 75, 0.2);
}

/* Programs Section */
#programs {
  background: #FAF8F4;
}

/* Suppliers Section */
#suppliers {
  background: #FFFFFF;
}

/* About Section */
#about {
  background: var(--ta-cream);
  border-top: 1px solid rgba(0, 49, 72, 0.06);
}

/* Proposal Section */
#enquiry {
  background: linear-gradient(180deg, #FAF8F4 0%, #F4F1EA 100%);
  border-top: 1px solid rgba(0, 49, 72, 0.06);
}

/* Seal Frame float animation and halo */
.seal-frame {
  position: relative;
  display: grid;
  place-items: center;
}

.seal-frame::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(240, 164, 75, 0.28) 0%, transparent 68%);
  z-index: 0;
  pointer-events: none;
}

.seal-frame > * {
  position: relative;
  z-index: 1;
}

.seal-frame img {
  animation: ta-float 7s ease-in-out infinite;
  filter: drop-shadow(0 16px 32px rgba(0, 20, 32, 0.35));
}

@keyframes ta-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes ta-draw {
  to { stroke-dashoffset: 0; }
}

.trace path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: ta-draw 2.4s cubic-bezier(0.23, 1, 0.32, 1) 0.3s forwards;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .seal-frame img, .trace path { animation: none !important; }
  .trace path { stroke-dashoffset: 0; }
}