/* ============================================================
   DEVIS · BETA LANDING — page styles
   Ported from the Claude Design source (Devis Beta Landing.dc.html).
   The component framework's `style-hover` / `style-focus`
   attributes are expressed here as real CSS rules, and the
   demo / flow / waterfall keyframes live alongside them.
   ============================================================ */

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--neutral-25); }

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: 8px;
  border: 3px solid var(--neutral-25);
}

/* ---- keyframes ---- */
@keyframes dv-wave { 0%, 100% { transform: scaleY(.24); } 50% { transform: scaleY(1); } }
@keyframes dv-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent-emphasis) 50%, transparent); }
  70%  { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes dv-orb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes dv-orbring {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--violet-500) 36%, transparent); }
  70%  { box-shadow: 0 0 0 18px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes dv-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes dv-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes dv-spin { to { transform: rotate(360deg); } }
@keyframes dv-flow { 0% { transform: translateX(0); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateX(38px); opacity: 0; } }
@keyframes dv-pp {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--blue-600) 42%, transparent); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---- animation classes ---- */
.dv-wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.dv-wave i { display: block; width: 3px; border-radius: 999px; background: var(--neutral-300); height: 30%; transform-origin: center; }
.dv-wave.rec i { background: var(--accent-emphasis); animation: dv-wave 2.4s ease-in-out infinite; }
.dv-mic.rec { animation: dv-pulse 1.6s ease-out infinite; }
.dv-orb { animation: dv-orb 3.2s ease-in-out infinite; display: block; }
.dv-orbring.live { animation: dv-orbring 1.9s ease-out infinite; }
.dv-caret { display: inline-block; width: 3px; height: 18px; border-radius: 2px; background: var(--accent-emphasis); vertical-align: -3px; margin-left: 1px; animation: dv-caret 1s steps(1) infinite; }
.dv-rise { animation: dv-rise .42s cubic-bezier(0.16, 1, 0.3, 1) both; }
.dv-spin { animation: dv-spin .9s linear infinite; }
.dv-card { animation: dv-float 7s ease-in-out infinite; }
.dv-flowdot { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; animation: dv-flow 1.7s ease-in-out infinite; }
.dv-pp { animation: dv-pp 1.8s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .dv-card, .dv-orb, .dv-wave.rec i, .dv-flowdot, .dv-pp { animation: none !important; }
}

/* ============================================================
   Interactive states — these replace the design framework's
   inline `style-hover` / `style-focus` attributes.
   ============================================================ */

/* nav links */
.nav-link { transition: color 120ms ease; }
.nav-link:hover { color: var(--text-strong) !important; }

/* gradient (primary brand) buttons */
.btn-grad { transition: transform 120ms ease, filter 120ms ease; }
.btn-grad:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ghost / secondary button */
.btn-ghost { transition: border-color 120ms ease, background 120ms ease; }
.btn-ghost:hover { background: var(--neutral-50); border-color: var(--neutral-400); }

/* white-on-gradient button (final CTA) */
.btn-white { transition: transform 120ms ease, box-shadow 120ms ease; }
.btn-white:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px color-mix(in oklch, var(--blue-900) 38%, transparent);
}

/* value-prop cards */
.vp-card { transition: border-color 120ms ease; }
.vp-card:hover { border-color: var(--border-strong); }

/* footer mail link */
.link-muted { transition: color 120ms ease; }
.link-muted:hover { color: var(--primary) !important; }

/* form fields */
.field { transition: border-color 120ms ease, box-shadow 120ms ease; }
.field:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 22%, transparent);
}

/* responsive — collapse the 2-col / 4-col grids on narrow viewports */
@media (max-width: 920px) {
  .grid-hero { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .flow-row { flex-direction: column !important; }
  .flow-connector { width: 2px !important; height: 30px !important; align-self: center !important; }
  .nav-links { gap: 16px !important; }
  .nav-secondary { display: none !important; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr !important; }
  .hero-title { font-size: 38px !important; }
}
@media (max-width: 920px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}