/* ============================================================
   Tofra — base.css
   Design tokens, reset, typography, layout primitives, utilities.
   Load order: base.css → components.css → layout.css
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */
:root {
  /* Brand — teal family */
  --teal:            #0F8B8D;
  --teal-hover:      #0C7576;
  --teal-bright:     #20C7B7;
  --teal-green:      #12A594;
  --teal-soft:       #72d6d8;
  --teal-tint:       #E7F4F4;
  --teal-tint-border:#cfeae9;

  /* Brand — navy / ink family */
  --navy:            #0E2E3F;   /* hero background */
  --navy-deep:       #153B50;   /* headings, footer */
  --ink:             #1F2937;   /* body text */
  --ink-soft:        #3d4949;
  --slate:           #5B6773;   /* muted text */
  --slate-light:     #9aa6ad;

  /* Surfaces */
  --bg:              #F8FAFC;
  --bg-alt:          #F3F6F8;
  --panel:           #EAF0F3;   /* image placeholders */
  --white:           #ffffff;
  --border:          #E5E7EB;
  --border-soft:     #F0F4F4;

  /* On-dark text */
  --on-dark:         rgba(237, 242, 241, 0.82);
  --on-dark-dim:     rgba(237, 242, 241, 0.6);

  /* Typography */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Layout */
  --container: 1320px;
  --gutter: 24px;
  --header-h: 76px;
  --header-h-solid: 68px;

  /* Radii */
  --r-sm: 8px;
  --r:    12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-card:  0 12px 32px rgba(21, 59, 80, 0.10);
  --shadow-soft:  0 8px 20px rgba(21, 59, 80, 0.08);
  --shadow-btn:   0 8px 24px rgba(15, 139, 141, 0.18);
  --shadow-btn-lg:0 8px 24px rgba(15, 139, 141, 0.28);
  --shadow-lift:  0 18px 40px rgba(0, 0, 0, 0.28);
  --shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.30);

  /* Elevation — layered, soft, physically-plausible shadows */
  --shadow-e1: 0 2px 8px rgba(21, 59, 80, .06), 0 1px 2px rgba(21, 59, 80, .05);
  --shadow-e2: 0 10px 28px rgba(21, 59, 80, .09), 0 3px 8px rgba(21, 59, 80, .05);
  --shadow-e3: 0 22px 48px rgba(21, 59, 80, .14), 0 8px 16px rgba(21, 59, 80, .07);

  /* Gradients */
  --grad-primary: linear-gradient(120deg, #0F8B8D 0%, #20C7B7 100%);
  --grad-navy:    linear-gradient(165deg, #0c2836 0%, #123c4f 55%, #0d2b3c 100%);
  --grad-soft:    linear-gradient(180deg, #ffffff 0%, #F5F9FA 100%);

  /* Soft tints */
  --teal-050: #F1F9F9;

  /* Glass */
  --glass-bg: rgba(255, 255, 255, .78);
  --glass-border: rgba(255, 255, 255, .55);

  /* Motion */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-reveal: cubic-bezier(.22, .61, .36, 1); /* gentle, calm ease-out */
  --t-fast: .2s ease;
}

/* ---- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; }

img, svg { display: block; max-width: 100%; }

a {
  color: var(--teal);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--teal-hover); }

button { font-family: inherit; }

input, textarea, select { font-family: inherit; }

/* ---- Layout primitives ------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Section = vertical rhythm wrapper. Modifiers set the surface. */
.section { padding: 96px 0; }
.section--tight  { padding: 64px 0; }
.section--alt {
  background:
    radial-gradient(1100px 420px at 100% -5%, rgba(32, 199, 183, .06), transparent 60%),
    radial-gradient(900px 380px at -5% 105%, rgba(15, 139, 141, .05), transparent 60%),
    var(--bg-alt);
}
.section--white  { background: var(--white); }
.section--navy   { position: relative; overflow: hidden; color: #fff; background: var(--grad-navy); }
/* slow ambient orb for dark sections */
.section--navy::before {
  content: "";
  position: absolute;
  left: -140px; top: -160px;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 139, 141, .30), transparent 70%);
  animation: tofra-drift 26s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.section--navy > .container { position: relative; z-index: 1; }

.tnum { font-variant-numeric: tabular-nums; }

/* Generic responsive grids used across pages */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }

/* Two-column split (text + media). Ratio/gap/align are set per-use via
   CSS custom properties; collapses to a single column on tablet & below. */
.split {
  display: grid;
  gap: var(--split-gap, 40px);
  grid-template-columns: var(--split, 1fr 1fr);
  align-items: var(--split-align, center);
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}

/* ---- Section heading block -------------------------------- */
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head__title {
  font-size: clamp(1.9rem, 1.1rem + 2.1vw, 2.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--navy-deep);
  text-wrap: balance;
}
.section-head__lead {
  margin-top: 14px;
  font-size: 18px;
  color: var(--slate);
  line-height: 1.6;
}
.section--navy .section-head__title { color: #fff; }

/* Row header: title on the left, "view all" link on the right */
.section-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

/* ---- Eyebrow (calibration bars + uppercase label) --------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
}
.eyebrow--center { justify-content: center; }
.eyebrow--light { color: var(--teal-soft); }        /* on dark backgrounds */
.eyebrow__bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 14px;
}
.eyebrow__bars i { width: 1px; display: block; background: var(--teal-bright); }
.eyebrow__bars i:nth-child(1) { height: 8px;  background: var(--teal-bright); }
.eyebrow__bars i:nth-child(2) { height: 14px; background: var(--teal); }
.eyebrow__bars i:nth-child(3) { height: 8px;  background: #bdc9c9; }
.eyebrow--light .eyebrow__bars i:nth-child(2) { background: var(--teal-bright); }
.eyebrow--light .eyebrow__bars i:nth-child(3) { background: rgba(255,255,255,.4); }

/* ---- Utilities -------------------------------------------- */
.u-teal { color: var(--teal-bright); }
.u-center { text-align: center; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }
[hidden] { display: none !important; }

/* ---- Scroll-reveal (progressive enhancement) -------------- */
/* Elements start hidden ONLY when JS has flagged support (.reveal-ready).
   Default motion is a calm fade + rise; opt-in variants via the attribute
   value, e.g. data-reveal="zoom" / "left" / "right" / "fade". */
/* Animation-based (NOT transition-based) so the entrance plays reliably even
   for above-the-fold elements on a fresh load — a keyframe animation runs from
   its own start state regardless of whether the hidden state was painted first.
   A transition would silently skip when the start state hadn't been painted. */
.reveal-ready [data-reveal] { opacity: 0; }
.reveal-ready [data-reveal].is-visible {
  animation: reveal-up 1.15s var(--ease-reveal) both;
}
.reveal-ready [data-reveal="fade"].is-visible  { animation-name: reveal-fade; }
.reveal-ready [data-reveal="zoom"].is-visible  { animation-name: reveal-zoom; }
.reveal-ready [data-reveal="left"].is-visible  { animation-name: reveal-left; }
.reveal-ready [data-reveal="right"].is-visible { animation-name: reveal-right; }

@keyframes reveal-up    { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes reveal-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal-zoom  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes reveal-left  { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes reveal-right { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }

/* ---- Keyframes -------------------------------------------- */
@keyframes tofra-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tofra-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* slow ambient drift for decorative orbs / blobs */
@keyframes tofra-drift   { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(26px,-20px) scale(1.06); } }
@keyframes tofra-drift-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,24px) scale(1.08); } }
/* gentle breathing opacity/scale for glows */
@keyframes tofra-breathe { 0%,100% { opacity: .45; transform: scale(1); } 50% { opacity: .8; transform: scale(1.1); } }
/* slow gradient pan for the CTA band */
@keyframes tofra-pan     { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* ---- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
}