:root { --accent: #FFFFFF; --ink: #0A0A0A; }
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: #0A0A0A; color: #F2F2F0; font-family: 'Onest', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #F2F2F0; text-decoration: none; }
a:hover { color: #FFFFFF; }
::selection { background: rgba(255,255,255,.92); color: #0A0A0A; }
::-webkit-scrollbar { width: 10px; background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; }
input, textarea, select, button { font-family: inherit; }
input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(255,255,255,.45) !important; }

[data-editing="true"] [data-block] { outline: 1px dashed rgba(255,255,255,.35); outline-offset: 6px; cursor: text; }
[data-editing="true"] [data-block]:hover, [data-editing="true"] [data-block]:focus { outline: 1px dashed var(--accent); }
[data-editing="true"] [data-media] { cursor: pointer; }
[data-editing="true"] [data-media]:hover { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* case preview hover overlay (pure-CSS replacement for JS hover state) */
.case-hover-overlay { opacity: 0; transition: opacity .2s; pointer-events: none; }
.case-media:hover .case-hover-overlay { opacity: 1; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pan { to { background-position: 640px 0; } }
@keyframes panY { to { background-position: 0 420px; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes drawerIn { from { transform: translateX(46px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow { from { width: 0; } to { width: 100%; } }
@keyframes breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes shrinkBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes popIn { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 60% { transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: none; } }
@keyframes floatUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wipeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes blurUp { from { opacity: 0; filter: blur(8px); transform: translateY(16px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes floatBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* admin leads table: scroll horizontally instead of squeezing columns unreadable, at any width */
.lead-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lead-row { min-width: 640px; }

@media (max-width: 700px) {
  /* header: the palette (⌘K) is the mobile nav — section links and the search label don't fit */
  .nav-link, .nav-search-label { display: none; }
  .logo-sub { display: none; }

  /* sections: the desktop paddings (130–172px) are tuned for a fixed 64px header on a tall viewport */
  #sec-hero { padding-top: 104px !important; }
  #sec-works, #sec-reviews, #sec-pricing { padding-top: 72px !important; }
  #sec-contact { padding-top: 72px !important; padding-bottom: 72px !important; }

  /* admin: stack the sidebar above the content instead of squeezing a 224px column beside it */
  .admin-shell { flex-direction: column; }
  .admin-sidebar {
    width: 100% !important; height: auto !important; position: static !important;
    border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .admin-stack-note { display: none; }
  .admin-main { padding: 18px 16px 40px !important; }
}