/* CloudCodix — custom layer on top of Tailwind CDN */
:root { color-scheme: dark; }
body { background-image: radial-gradient(ellipse at top, #0a1024 0%, #050816 60%); }

.grid-bg {
  background-image:
    linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.text-gradient {
  background: linear-gradient(90deg, #38bdf8, #8b5cf6 60%, #38bdf8);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

.caret { display:inline-block; width:3px; height:.9em; margin-left:4px; background:#38bdf8; vertical-align:-.05em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.hover-lift { transition: transform .3s ease, border-color .3s ease; }
.hover-lift:hover { transform: translateY(-6px); border-color: rgba(56,189,248,.45); }

.card-glow { position: relative; transition: transform .35s ease, border-color .35s ease; }
.card-glow::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s;
  background: radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(56,189,248,.16), transparent 45%);
}
.card-glow:hover { transform: translateY(-6px); border-color: rgba(56,189,248,.45); }
.card-glow:hover::before { opacity: 1; }

.btn-primary, .btn-ghost {
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.875rem;
  padding:.65rem 1.4rem; border-radius:9999px; transition: all .3s ease; cursor:pointer;
}
.btn-primary { color:#fff; background: linear-gradient(135deg,#0ea5e9,#8b5cf6); box-shadow: 0 10px 30px -10px rgba(14,165,233,.7); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(139,92,246,.8); }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.btn-ghost { color:#e2e8f0; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.03); }
.btn-ghost:hover { border-color:#38bdf8; color:#fff; background: rgba(56,189,248,.08); }

.eyebrow { text-transform:uppercase; letter-spacing:.2em; font-size:.75rem; font-weight:700; color:#38bdf8; }
.h2 { margin-top:.75rem; font-size:clamp(1.9rem,4vw,3rem); font-weight:800; line-height:1.15; color:#fff; letter-spacing:-.02em; }

.lbl { display:block; margin-bottom:.4rem; font-size:.8rem; font-weight:600; color:#cbd5e1; }
.field {
  width:100%; padding:.8rem 1rem; border-radius:.75rem; color:#fff;
  background: rgba(5,8,22,.6); border:1px solid rgba(255,255,255,.12); outline:none; transition: all .25s;
}
.field::placeholder { color:#64748b; }
.field:focus { border-color:#38bdf8; box-shadow: 0 0 0 4px rgba(56,189,248,.15); }
.field.invalid { border-color:#f87171; }
select.field option { background:#0a1024; }

/* Scroll reveal */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity:1; transform:none; }

/* Navbar on scroll */
#nav.scrolled { background: rgba(5,8,22,.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom:1px solid rgba(255,255,255,.08); }
#nav a[data-link].active { color:#fff; background: rgba(56,189,248,.12); }

#toTop.show { opacity:1; pointer-events:auto; }
details summary::-webkit-details-marker { display:none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity:1; transform:none; }
}

/* Blog article typography */
.prose-cc { font-size:1.06rem; line-height:1.85; color:#cbd5e1; }
.prose-cc p { margin:1.2rem 0; }
.prose-cc h2 { margin:2.6rem 0 .8rem; font-size:1.65rem; font-weight:800; color:#fff; letter-spacing:-.01em; scroll-margin-top:7rem; }
.prose-cc ul { margin:1.2rem 0; padding:0; list-style:none; }
.prose-cc li { position:relative; padding-left:1.7rem; margin:.65rem 0; }
.prose-cc li::before { content:""; position:absolute; left:0; top:.7em; width:.6rem; height:.6rem; border-radius:50%; background:linear-gradient(135deg,#38bdf8,#8b5cf6); }
.prose-cc blockquote { margin:2rem 0; padding:1.25rem 1.5rem; border-left:4px solid #38bdf8; border-radius:0 .75rem .75rem 0; background:rgba(56,189,248,.07); color:#fff; font-size:1.2rem; font-weight:600; }