/* ==========================================================================
   ClearByte — clearbyte.au
   Hand-written stylesheet (no framework, no build step).
   Design language: light glassmorphism — frosted cards, soft radial glows,
   electric-blue primary, Outfit headings / Inter body.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --primary: oklch(0.6 0.18 250);
  --primary-soft: oklch(0.6 0.18 250 / 0.2);
  --primary-fg: oklch(0.98 0 0);
  --background: oklch(0.98 0.005 250);
  --foreground: oklch(0.2 0.02 250);
  --muted-fg: oklch(0.5 0.02 250);
  --card: oklch(1 0 0 / 0.7);
  --border-glass: rgb(255 255 255 / 0.4);
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-400: #60a5fa;
  --blue-900: #1e3a8a;
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-600: #4f46e5;
  --purple-50: #faf5ff;
  --purple-600: #9333ea;
  --cyan-50: #ecfeff;
  --cyan-600: #0891b2;
  --green-100: #dcfce7;
  --green-600: #16a34a;
  --red-50: #fef2f2;
  --red-500: #ef4444;
  --radius: 1rem;
  --font-body: "Inter", system-ui, sans-serif;
  --font-heading: "Outfit", system-ui, sans-serif;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.15; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button, input, textarea { font: inherit; color: inherit; }

::selection { background: var(--primary-soft); color: var(--primary); }

/* Fixed ambient background glows (was Layout.tsx radial gradients) */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
}
body::before {
  background: radial-gradient(ellipse at top right, rgb(219 234 254 / 0.4), transparent 60%);
  opacity: 0.5;
}
body::after {
  background: radial-gradient(circle at bottom left, rgb(224 231 255 / 0.4), transparent 60%);
  opacity: 0.5;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px)  { .container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .container { padding-inline: 2rem; max-width: 1280px; } }

main { flex: 1 0 auto; padding-top: 6rem; }

section { position: relative; }

/* ---------- Glass surfaces ---------- */
.glass-card {
  background: var(--card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 0.2);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.glass-panel {
  background: rgb(255 255 255 / 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgb(255 255 255 / 0.2);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: 0 10px 15px -3px var(--primary-soft);
}
.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 25px -3px oklch(0.6 0.18 250 / 0.4);
}

.btn-outline {
  background: rgb(255 255 255 / 0.5);
  backdrop-filter: blur(4px);
  border: 1px solid rgb(255 255 255 / 0.6);
  color: var(--foreground);
}
.btn-outline:hover { background: rgb(255 255 255 / 0.8); }

.btn-outline-primary {
  background: transparent;
  border: 1px solid oklch(0.6 0.18 250 / 0.2);
  color: var(--primary);
}
.btn-outline-primary:hover { background: rgb(30 58 138 / 0.05); }

.btn-white {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15);
}
.btn-white:hover { background: var(--blue-50); }

.btn-lg { padding: 0 2rem; height: 3rem; font-size: 1.125rem; }
.btn-xl { padding: 1.5rem 2.5rem; font-size: 1.125rem; }
.btn-md { padding: 0 1.5rem; height: 2.5rem; font-size: 0.875rem; }

.btn-lift:hover { transform: translateY(-4px); }
.btn-scale:hover { transform: scale(1.05); }

.btn .icon { width: 1.25rem; height: 1.25rem; }

/* ---------- Navbar ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 1rem;
}

.navbar-inner {
  border-radius: 1rem;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.brand-mark {
  width: 2rem;
  height: 2rem;
  background: var(--primary);
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
}
.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 2rem;
}
.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-fg);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--primary); }
.nav-links a[aria-current="page"] { color: var(--primary); font-weight: 600; }

.nav-cta { display: none; }

.nav-toggle {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.nav-toggle svg { width: 1.5rem; height: 1.5rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0 1rem 1rem;
}
.mobile-menu.open { display: block; animation: menu-in 0.2s ease both; }
.mobile-menu-inner {
  border-radius: 1rem;
  padding: 1.5rem;
  background: rgb(255 255 255 / 0.95);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mobile-menu-inner a:not(.btn) {
  font-size: 1.125rem;
  font-weight: 500;
  padding: 0.5rem 0;
  color: var(--muted-fg);
}
.mobile-menu-inner a[aria-current="page"] { color: var(--primary); }

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-1.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-cta { display: block; }
  .nav-toggle, .mobile-menu { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { padding: 5rem 0 8rem; overflow: hidden; }

.hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .hero-grid { flex-direction: row; }
  .hero-copy, .hero-visual { width: 50%; }
}

.hero-copy { z-index: 10; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.5);
  border: 1px solid rgb(255 255 255 / 0.6);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  margin-bottom: 1.5rem;
}
.eyebrow-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--primary);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.eyebrow span:last-child {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@keyframes pulse { 50% { opacity: 0.5; } }

.hero h1 {
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.text-gradient {
  background: linear-gradient(to right, var(--primary), var(--blue-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: 1.25rem;
  color: var(--muted-fg);
  margin-bottom: 2rem;
  max-width: 32rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) { .hero-actions { flex-direction: row; } }

.hero-visual { position: relative; width: 100%; }

.hero-frame {
  position: relative;
  z-index: 10;
  border-radius: 1.5rem;
  padding: 0.5rem;
  box-shadow: 0 25px 50px -12px rgb(30 58 138 / 0.1);
}
.hero-frame > img { border-radius: 1rem; width: 100%; height: auto; object-fit: cover; }

.hero-float {
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  padding: 1rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: float-in 1s ease 0.3s both;
}
@keyframes float-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 639px) {
  .hero-float { left: 0.5rem; bottom: -1rem; }
}
.hero-float-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--green-100);
  color: var(--green-600);
  display: grid;
  place-items: center;
}
.hero-float p:first-of-type { font-size: 0.75rem; color: var(--muted-fg); font-weight: 500; }
.hero-float p:last-of-type { font-size: 0.875rem; font-weight: 700; }

.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: rgb(96 165 250 / 0.2);
  filter: blur(100px);
  border-radius: 9999px;
  z-index: -1;
  pointer-events: none;
}

/* ---------- Sections ---------- */
.section { padding: 6rem 0; }
.section-tint { background: rgb(255 255 255 / 0.3); backdrop-filter: blur(4px); }

.section-head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 4rem;
}
.section-head h2 {
  font-size: clamp(1.875rem, 4vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.section-head p { font-size: 1.125rem; color: var(--muted-fg); }

.page-head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 4rem;
}
.page-head h1 {
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.page-head p { font-size: 1.25rem; color: var(--muted-fg); }

/* ---------- Feature cards (Home) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

.feature-card {
  padding: 2rem;
  border-radius: 1.5rem;
  transition: transform 0.3s ease;
}
.feature-card:hover { transform: translateY(-5px); }

.feature-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}
.feature-card:hover .feature-icon { transform: scale(1.1); }
.feature-icon svg { width: 1.75rem; height: 1.75rem; }

.feature-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; }
.feature-card > p { color: var(--muted-fg); line-height: 1.6; margin-bottom: 1.5rem; }

.feature-media {
  border-radius: 0.75rem;
  overflow: hidden;
  height: 10rem;
  position: relative;
}
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(255 255 255 / 0.8), transparent);
}

.tint-blue   { background: var(--blue-50);   color: var(--primary); }
.tint-indigo { background: var(--indigo-50); color: var(--indigo-600); }
.tint-purple { background: var(--purple-50); color: var(--purple-600); }
.tint-cyan   { background: var(--cyan-50);   color: var(--cyan-600); }

/* ---------- CTA panels ---------- */
.cta-section { padding: 6rem 0; overflow: hidden; }

.cta-panel {
  border-radius: 2.5rem;
  padding: 3rem;
  text-align: center;
  border: 1px solid rgb(255 255 255 / 0.4);
  background: rgb(255 255 255 / 0.4);
  backdrop-filter: blur(24px);
  box-shadow: 0 25px 50px -12px rgb(30 58 138 / 0.05);
}
@media (min-width: 768px) { .cta-panel { padding: 5rem; } }

.cta-panel h2 {
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.cta-panel p {
  font-size: 1.25rem;
  color: var(--muted-fg);
  max-width: 42rem;
  margin: 0 auto 2.5rem;
}

.cta-panel-dark {
  border-radius: 2.5rem;
  padding: 3rem;
  text-align: center;
  background: var(--blue-900);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-panel-dark h2 {
  font-size: clamp(1.875rem, 4vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 10;
}
.cta-panel-dark p {
  font-size: 1.125rem;
  color: rgb(255 255 255 / 0.9);
  max-width: 42rem;
  margin: 0 auto 2.5rem;
  position: relative;
  z-index: 10;
}
.cta-panel-dark .btn { position: relative; z-index: 10; }
.cta-panel-dark::before,
.cta-panel-dark::after {
  content: "";
  position: absolute;
  width: 16rem;
  height: 16rem;
  background: rgb(255 255 255 / 0.1);
  border-radius: 9999px;
  filter: blur(48px);
}
.cta-panel-dark::before { top: 0; left: 0; transform: translate(-50%, -50%); }
.cta-panel-dark::after  { bottom: 0; right: 0; transform: translate(50%, 50%); }

/* Decorative blurred blobs */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(120px);
  z-index: -1;
  pointer-events: none;
}
.blob-blue   { top: 25%; left: 0; width: 24rem; height: 24rem; background: rgb(147 197 253 / 0.2); }
.blob-indigo { bottom: 0; right: 0; width: 30rem; height: 30rem; background: rgb(165 180 252 / 0.2); }

/* ---------- Solutions page ---------- */
.solutions-list { display: flex; flex-direction: column; gap: 6rem; }

.solution-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .solution-row { flex-direction: row; gap: 5rem; }
  .solution-row.reverse { flex-direction: row-reverse; }
  .solution-row > * { width: 50%; }
}

.solution-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.solution-icon svg { width: 2rem; height: 2rem; }

.solution-copy h2 { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; }
.solution-copy > p {
  font-size: 1.125rem;
  color: var(--muted-fg);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.solution-features {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 640px) { .solution-features { grid-template-columns: 1fr 1fr; } }

.solution-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
  color: rgb(from var(--foreground) r g b / 0.8);
}
.check-dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--green-100);
  color: var(--green-600);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.check-dot svg { width: 0.875rem; height: 0.875rem; }

.solution-media { width: 100%; }
.solution-media-frame {
  padding: 0.5rem;
  border-radius: 1.5rem;
  border: 1px solid rgb(255 255 255 / 0.4);
  background: rgb(255 255 255 / 0.4);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
  overflow: hidden;
}
.solution-media-frame img {
  border-radius: 1rem;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.solution-media-frame:hover img { transform: scale(1.05); }

/* ---------- Prose / legal pages ---------- */
.prose-card {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 1.5rem;
}
@media (min-width: 768px) { .prose-card { padding: 3rem; } }

.prose-card h1 { font-size: clamp(1.875rem, 4vw, 2.25rem); font-weight: 700; margin-bottom: 2rem; }
.prose-card .updated { color: var(--muted-fg); margin-bottom: 1rem; }
.prose-card h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2rem 0 1rem;
  font-family: var(--font-body);
}
.prose-card p { color: var(--muted-fg); margin-bottom: 0.5rem; line-height: 1.7; }
.prose-card ul { padding-left: 1.5rem; margin-top: 1rem; color: var(--muted-fg); }
.prose-card li { margin-bottom: 0.5rem; }

/* ---------- About page ---------- */
.about-wrap { max-width: 56rem; margin: 0 auto; }

.story-card {
  padding: 2rem;
  border-radius: 1.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) { .story-card { padding: 3rem; } }
.story-card h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.story-card p { color: var(--muted-fg); line-height: 1.7; }
.story-card p + p { margin-top: 1rem; }

.mv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
}
@media (min-width: 768px) { .mv-grid { grid-template-columns: 1fr 1fr; } }
.mv-grid .glass-card { padding: 2rem; border-radius: 1.5rem; }
.mv-grid h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.mv-grid p { color: var(--muted-fg); }

.about-cta { text-align: center; }
.about-cta h2 { font-size: 1.875rem; font-weight: 700; margin-bottom: 2rem; }

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-info { display: flex; flex-direction: column; gap: 2rem; }
.contact-info .glass-card { padding: 2rem; border-radius: 1.5rem; }
.contact-info h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }

.contact-line { display: flex; align-items: flex-start; gap: 1rem; }
.contact-line + .contact-line { margin-top: 1.5rem; }
.contact-line-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--blue-50);
  color: var(--primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.contact-line-icon svg { width: 1.25rem; height: 1.25rem; }
.contact-line p:first-child, .contact-line .label { font-weight: 500; }
.contact-line a, .contact-line .value { color: var(--muted-fg); transition: color 0.2s; }
.contact-line a:hover { color: var(--primary); }

.why-card {
  background: oklch(0.6 0.18 250 / 0.05) !important;
  border-color: oklch(0.6 0.18 250 / 0.1) !important;
}
.why-card h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.why-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.why-card li { display: flex; align-items: center; gap: 0.75rem; color: var(--muted-fg); }
.why-card li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--primary);
  flex-shrink: 0;
}

.contact-form-panel {
  padding: 2rem;
  border-radius: 2rem;
  border: 1px solid rgb(255 255 255 / 0.4);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}
@media (min-width: 768px) { .contact-form-panel { padding: 2.5rem; } }
.contact-form-panel h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }

.form-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.form-grid .field { margin-bottom: 0; }
.form-grid { margin-bottom: 1.5rem; }

.field label { font-size: 0.875rem; font-weight: 500; }

.field input, .field textarea {
  background: rgb(255 255 255 / 0.5);
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 0.75rem;
  padding: 0 1rem;
  height: 3rem;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  outline: none;
  width: 100%;
}
.field textarea { min-height: 120px; padding: 0.75rem 1rem; resize: none; }
.field input:focus, .field textarea:focus {
  background: #fff;
  border-color: oklch(0.6 0.18 250 / 0.5);
  box-shadow: 0 0 0 3px oklch(0.6 0.18 250 / 0.15);
}
.field ::placeholder { color: oklch(0.65 0.02 250); }

/* Honeypot — visually removed but still submitted by naive bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit {
  width: 100%;
  height: 3rem;
  border-radius: 0.75rem;
  font-size: 1.125rem;
}
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translate(-50%, -150%);
  z-index: 100;
  min-width: 300px;
  max-width: 90vw;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(0 0 0 / 0.06);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.35s, visibility 0.35s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast .toast-title { font-weight: 600; font-size: 0.9375rem; }
.toast .toast-desc { font-size: 0.875rem; color: var(--muted-fg); margin-top: 0.125rem; }
.toast.success { border-left: 4px solid var(--green-600); }
.toast.error { border-left: 4px solid var(--red-500); }

/* ---------- 404 ---------- */
.notfound {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem 1rem;
}
.notfound-icon {
  width: 5rem;
  height: 5rem;
  background: var(--red-50);
  color: var(--red-500);
  border-radius: 9999px;
  display: grid;
  place-items: center;
  margin: 0 auto 1.5rem;
}
.notfound-icon svg { width: 2.5rem; height: 2.5rem; }
.notfound h1 { font-size: 2.25rem; font-weight: 700; margin-bottom: 1rem; }
.notfound p { color: var(--muted-fg); margin-bottom: 2rem; max-width: 28rem; margin-inline: auto; }

/* ---------- Footer ---------- */
footer {
  background: rgb(255 255 255 / 0.5);
  border-top: 1px solid rgb(255 255 255 / 0.2);
  backdrop-filter: blur(4px);
  padding: 4rem 0 2rem;
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }

.footer-about p {
  color: var(--muted-fg);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-top: 1rem;
}

.footer-col h4 {
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col a, .footer-col li {
  color: var(--muted-fg);
  font-size: 0.875rem;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--primary); }

.footer-bottom {
  border-top: 1px solid rgb(0 0 0 / 0.05);
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-bottom p { color: var(--muted-fg); font-size: 0.75rem; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}