/* ============================================================================
   CR AI Labs — Landing page styles
   Design tokens ported from the Cartsy design system (colors_and_type.css).
   Black & white canvas, one electric-lime accent (#DBF801), real product photos.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  /* ===== Ink — black & white brand core ===== */
  --ink:            #000000;
  --ink-900:        #0B0B0B;
  --ink-800:        #121111;
  --white:          #FFFFFF;

  /* ===== Electric Yellow — the signature accent ===== */
  --electric:       #DBF801;
  --electric-soft:  #F6F9BE;
  --electric-ink:   #30320A;

  /* ===== Gray ramp ===== */
  --gray-50:        #FAFAFA;
  --gray-100:       #F5F5F5;
  --gray-150:       #ECECEC;
  --gray-200:       #E6E6E6;
  --gray-300:       #CDCDCD;
  --gray-400:       #9B9B9B;
  --gray-500:       #878787;
  --gray-600:       #7A7A7A;
  --gray-700:       #454545;
  --gray-900:       #171717;

  /* ===== Semantic ===== */
  --hairline:       rgba(0,0,0,0.10);

  /* ===== Type families ===== */
  --font-display: 'Lemon', 'DM Sans', system-ui, sans-serif;
  --font-head:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif:   'DM Serif Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ===== Radii ===== */
  --r-sm:    6px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    16px;
  --r-2xl:   24px;
  --r-full:  9999px;

  /* ===== Shadows ===== */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.12);
  --shadow-xl:  0 20px 50px rgba(0,0,0,0.18);

  /* ===== Motion ===== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-sine:   cubic-bezier(0.37, 0, 0.63, 1);
}

/* ===== Base ===== */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gray-500); }
::selection { background: var(--electric); color: var(--ink); }
img { max-width: 100%; }

/* ===== Keyframes ===== */
@keyframes crfloat {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-22px) rotate(var(--rot, 0deg)); }
}
@keyframes crmarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes crspin { to { transform: rotate(360deg); } }

/* ===== Floating product art ===== */
.cr-float { animation: crfloat var(--dur, 6s) var(--ease-sine, ease-in-out) infinite; }
.cr-float img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.28));
}
@media (max-width: 940px) { .cr-float { display: none !important; } }

/* ===== Nav links ===== */
.cr-navlinks { display: flex; gap: 30px; }
@media (max-width: 720px) { .cr-navlinks { display: none !important; } }

/* ===== Card lift on hover ===== */
.cr-lift { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.cr-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* ===== Buttons (base + hover, kept out of inline styles so :hover wins) ===== */
.btn-dark {
  background: var(--ink);
  color: #fff;
  transition: background .2s var(--ease-out);
}
.btn-dark:hover { background: rgba(0,0,0,0.85); color: #fff; }

.btn-outline {
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--gray-200);
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.btn-outline:hover { background: var(--gray-50); border-color: var(--gray-300); }

.btn-electric {
  background: var(--electric);
  color: var(--ink);
  transition: transform .2s var(--ease-out);
}
.btn-electric:hover { transform: translateY(-2px); color: var(--ink); }

/* ===== Footer links ===== */
.footer-link {
  color: var(--gray-400);
  transition: color .2s var(--ease-out);
}
.footer-link:hover { color: #fff; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cr-float, [style*="crmarquee"] { animation: none !important; }
  * { transition-duration: .01ms !important; }
}