/* Gia site — shared base styles, animations, and hover-state helpers.
   Page-specific layout stays inline in each page's HTML (matches the
   original single-file design 1:1); only truly shared rules live here. */

html, body { margin:0; padding:0; background:#fbfdff; }
* { box-sizing: border-box; }
img { max-width: 100%; }
a { color:#1565d8; text-decoration: none; }
a:hover { color:#0b2545; }
::selection { background:#bfe0ff; color:#08213d; }

@keyframes floatA { 0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)} 35%{transform:translate3d(20px,-30px,0) rotate(3deg) scale(1.05)} 70%{transform:translate3d(-8px,-10px,0) rotate(-2deg) scale(.99)} 100%{transform:translate3d(0,0,0) rotate(0deg) scale(1)} }
@keyframes floatB { 0%{transform:translate3d(0,0,0) scale(1,1)} 30%{transform:translate3d(-24px,18px,0) scale(1.05,.96)} 65%{transform:translate3d(9px,-12px,0) scale(.98,1.03)} 100%{transform:translate3d(0,0,0) scale(1,1)} }
@keyframes jello { 0%{transform:scale(1,1)} 25%{transform:scale(1.06,.9)} 45%{transform:scale(.95,1.07)} 65%{transform:scale(1.03,.97)} 100%{transform:scale(1,1)} }
@keyframes rise { from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:translateY(0)} }
@keyframes wobble { 0%{transform:scale(1,1) rotate(0deg) translateY(0)} 25%{transform:scale(1.022,.978) rotate(-.5deg) translateY(2px)} 50%{transform:scale(.988,1.014) rotate(0deg) translateY(-3px)} 75%{transform:scale(1.014,.986) rotate(.5deg) translateY(1px)} 100%{transform:scale(1,1) rotate(0deg) translateY(0)} }

/* Sticky nav + footer shells */
.site-nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px clamp(16px,4vw,48px); backdrop-filter:blur(14px); background:rgba(255,255,255,.66); border-bottom:1px solid rgba(11,37,69,.08); }
.site-nav-links { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.site-nav-link { padding:10px 16px; border-radius:999px; border:0; cursor:pointer; font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600; letter-spacing:.01em; background:transparent; color:#3a5f8c; }
.site-nav-link[aria-current="page"] { background:#e3f0ff; color:#0b2545; }
.site-footer { padding:clamp(34px,5vw,60px) clamp(16px,4vw,48px); background:#fff; border-top:1px solid rgba(11,37,69,.1); display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; }
.site-footer-links { display:flex; flex-wrap:wrap; gap:18px; font-size:15px; color:#3a5f8c; }
.site-footer-links a { color:#1565d8; }

/* Wobbling / squishy logo */
.logo-wrap { position:relative; display:block; width:max-content; margin:0 auto; cursor:pointer; transform-origin:50% 80%; animation:wobble 5s ease-in-out infinite; }

/* Hover helpers, replacing the old inline style-hover system with real CSS */
.btn-press { transition: transform .18s cubic-bezier(.3,.8,.3,1), box-shadow .18s ease, background-color .18s ease, color .18s ease; }
.btn-press:hover { transform: translateY(3px); box-shadow: 0 5px 0 var(--hs, currentColor); color: var(--hc, inherit); }
.btn-press-sm:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--hs, currentColor); }
.btn-fill { transition: background-color .18s ease, color .18s ease; }
.btn-fill:hover { background: var(--hb, inherit); color: var(--hc, inherit); }
.pill-scale { transition: transform .3s cubic-bezier(.2,1.5,.35,1); }
.pill-scale:hover { transform: scale(1.02,.95); }

/* Social icon links (Instagram/TikTok, etc.) */
.social-icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; transition:transform .25s cubic-bezier(.2,1.4,.35,1), box-shadow .25s ease; }
.social-icon:hover { transform:translateY(-3px) scale(1.06); }
.social-icon svg { width:22px; height:22px; display:block; }

/* Story page before/after gallery: tretinoin card (2 photos) is 2x the
   width of the accutane card (1 photo), so all three photos render at
   the same size. Stacks to one column on narrow screens where a 2:1
   split would squeeze the photos too small. */
.story-gallery { grid-template-columns: 2fr 1fr; }
@media (max-width: 640px) {
  .story-gallery { grid-template-columns: 1fr; }
}

/* "How it works" step picker */
.step-tab { flex:1 1 160px; min-width:130px; display:flex; flex-direction:column; align-items:center; gap:12px; padding:0 6px; border:0; background:none; cursor:pointer; transition:color .25s ease; font:inherit; }
.step-dot { position:relative; width:clamp(46px,5vw,72px); height:clamp(46px,5vw,72px); border-radius:50%; display:grid; place-items:center; font-family:'Baloo 2',cursive; font-weight:800; font-size:clamp(20px,2.2vw,30px); transition:transform .3s cubic-bezier(.2,1.4,.35,1), background .3s ease, color .3s ease; }