/* ---- Theme tokens -------------------------------------------------- */
:root {
  --accent: #5b53e0;        /* on light backgrounds */
  --accent-light: #8b83f5;  /* on dark backgrounds — keeps AA contrast */
}

html { scroll-behavior: smooth; }
body { margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
::selection { background: rgba(91,83,224,0.22); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #4338ca; }
img { max-width: 100%; }

/* ---- Animation ------------------------------------------------------ */
@keyframes ci_ken { 0% { transform: scale(1.04); } 100% { transform: scale(1.14); } }
@keyframes ci_up  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.ci-in { opacity: 0; animation: ci_up 0.9s cubic-bezier(0.22,1,0.36,1) forwards; }
.ci-ken { animation: ci_ken 24s ease-in-out infinite alternate; }

/* ---- Hover states (were `style-hover` attrs in the design source) ---- */
.ci-zoom { transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.ci-zoomwrap:hover .ci-zoom { transform: scale(1.06); }

.ci-navlink { transition: opacity 0.35s ease, color 0.35s ease; opacity: 0.88; }
.ci-navlink:hover { opacity: 1; color: var(--nav-fg); }

.ci-btn { transition: filter 0.18s ease, transform 0.15s ease; }
.ci-btn:hover { filter: brightness(1.06); transform: translateY(-2px); color: #fff; }
.ci-btn--flat:hover { transform: none; }

.ci-ghost:hover { color: var(--accent-light); }

.ci-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.ci-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(17,24,39,0.45); }

.ci-footlink { color: #d4d4d8; transition: color 0.18s ease; }
.ci-footlink:hover { color: #f4f4f5; }
.ci-social { color: #a1a1aa; display: grid; place-items: center; transition: color 0.18s ease; }
.ci-social:hover { color: var(--accent-light); }

/* ---- Form controls --------------------------------------------------- */
.ci-field { width: 100%; padding: 13px 14px; border: 1px solid #2f3037; border-radius: 10px; background: #1b1c21; font-size: 15px; font-family: inherit; color: #f4f4f5; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.ci-field::placeholder { color: #71717a; }
.ci-field:focus { outline: none; border-color: var(--accent-light); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

.ci-rc { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border: 1px solid #2f3037; border-radius: 12px; background: #1b1c21; cursor: pointer; font-size: 15px; font-weight: 600; color: #e4e4e7; transition: border-color 0.15s ease, background 0.15s ease; }
.ci-rc:hover { border-color: #43454e; }
.ci-rc:has(input:checked) { border-color: var(--accent-light); background: color-mix(in srgb, var(--accent) 15%, #1b1c21); color: #fafafa; }
.ci-rc:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.ci-rc input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }

button:focus-visible, a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
  .ci-hero-h1 { font-size: 46px !important; }
  .ci-nav-links { display: none !important; }
  .ci-2col, .ci-value-grid, .ci-price-grid, .ci-apply-grid, .ci-about-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .ci-value-sticky { position: static !important; }
  .ci-form-2 { grid-template-columns: 1fr !important; }
}

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ci-in { opacity: 1; animation: none; }
  .ci-ken { animation: none; }
  .ci-zoom, .ci-card, .ci-btn { transition: none; }
}