:root{
  --ob-green:#0B3B2E;
  --ob-green-2:#0F4D3B;
  --ob-red:#C1121F;
  --ob-pink:#F7D6D9;
  --ob-cream:#FFF7F2;
  --ob-gold:#F2C14E;
  --ob-ink:#0B1220;
}

html{scroll-behavior:smooth}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  color:#0f172a;
  background:linear-gradient(180deg, rgba(255,247,242,1) 0%, rgba(255,255,255,1) 60%, rgba(247,214,217,0.35) 100%);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

img{
  max-width:100%;
  height:auto;
}

a{
  color:inherit;
  text-decoration-color:rgba(148,163,184,.7);
  text-underline-offset:3px;
}

a:hover{
  text-decoration-color:rgba(71,85,105,.85);
}

:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(242,193,78,.35),0 0 0 6px rgba(11,59,46,.25);
  border-radius:.75rem;
}

[x-cloak]{display:none !important}

.focus-ring:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(242,193,78,.35),0 0 0 6px rgba(11,59,46,.25);
}

.card-lift{
  transition:transform .2s ease, box-shadow .2s ease;
  will-change:transform;
}

.card-lift:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(11,18,32,.12);
}

.glass{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.hero-grid{
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(242,193,78,.16), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(193,18,31,.14), transparent 55%),
    radial-gradient(900px 520px at 70% 90%, rgba(11,59,46,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,247,242,1) 0%, rgba(255,255,255,1) 55%, rgba(247,214,217,0.25) 100%);
}

::selection{
  background:rgba(242,193,78,.35);
}