/* ==========================================================================
   OnlineRetatrutide — shared site stylesheet
   Single source of truth for design tokens and base styles.
   Linked from every page: <link rel="stylesheet" href="./assets/css/main.css">
   ========================================================================== */

:root{
  --blue:#0F4C81; --blue-d:#0B3A63; --teal:#14B8A6; --teal-d:#0E8C7E; --indigo:#4F46E5; --emerald:#16A34A;
  --bg:#F8FAFC; --card:#FFFFFF; --text:#1E293B; --muted:#5B6472; --faint:#8A94A3;
  --border:#E5EAF0; --border-2:#D5DEE8; --tint:#EEF3FA; --tint-teal:#E4F7F4;
  --radius:16px; --radius-lg:24px; --maxw:1280px;
  --shadow-sm:0 1px 2px rgba(15,42,74,.06), 0 1px 3px rgba(15,42,74,.05);
  --shadow:0 4px 16px rgba(15,42,74,.08), 0 1px 3px rgba(15,42,74,.05);
  --shadow-lg:0 18px 48px rgba(15,42,74,.14), 0 4px 12px rgba(15,42,74,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-d)}
h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.02em;font-weight:800}
p{margin:0}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select{font-family:inherit}
::selection{background:rgba(20,184,166,.22)}

/* Scroll-reveal animation (used on Home) */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(14px,-10px) rotate(6deg)}}
@keyframes spinslow{to{transform:rotate(360deg)}}
.reveal{animation:fadeUp .7s cubic-bezier(.22,.61,.36,1) both;animation-timeline:view();animation-range:entry 2% cover 26%}