/* =============================================================
   SK Enterprise — site.css
   Plain CSS layer that sits on top of Tailwind (loaded via CDN).
   Only holds what utilities cannot express cleanly: the scroll
   behaviour of the header, button recipes, decorative textures
   and the scroll-reveal animation.
   ============================================================= */

:root {
  --ink-900: #070E1B;
  --ink-800: #0B1729;
  --ink-500: #2A4266;
  --brand-400: #5D8CFF;
  --brand-500: #3D6BFF;
  --brand-600: #2A4FE0;
  --mint-300: #7FF0D8;
  --mint-400: #46E5C8;
  --paper: #FBFAF8;
  --paper-200: #E9E6DF;
}

html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }

/* Newsreader sits a touch heavy at display sizes — pull it back. */
.font-display { font-optical-sizing: auto; font-variation-settings: "opsz" 42; }

/* ---------- Decorative textures ---------------------------------- */

.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(80% 60% at 50% 20%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 20%, #000 20%, transparent 78%);
}

.bg-grid-light {
  background-image:
    linear-gradient(to right, rgba(7,14,27,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(7,14,27,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 10%, transparent 75%);
}

.rule-gradient {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(7,14,27,.14), transparent);
}

/* ---------- Buttons ---------------------------------------------- */

.btn-primary,
.btn-dark,
.btn-outline,
.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border-radius: .65rem;
  padding: .8rem 1.5rem;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  transition: transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.btn-primary:hover, .btn-dark:hover, .btn-outline:hover, .btn-ghost-light:hover { transform: translateY(-2px); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff;
  box-shadow: 0 18px 40px -18px rgba(61,107,255,.9);
}
.btn-primary:hover { box-shadow: 0 24px 52px -18px rgba(61,107,255,1); }

.btn-dark { background: var(--ink-900); color: #fff; }
.btn-dark:hover { background: var(--ink-800); }

.btn-outline { border: 1px solid var(--paper-200); background: #fff; color: var(--ink-900); }
.btn-outline:hover { border-color: var(--brand-400); color: var(--brand-600); }

.btn-ghost-light { border: 1px solid rgba(255,255,255,.22); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.4); }

/* ---------- Header: transparent over the hero, solid on scroll ---- */

#site-header .nav-link { color: rgba(255,255,255,.72); }
#site-header .nav-link:hover { color: #fff; background: rgba(255,255,255,.09); }
#site-header .nav-link-active { color: #fff; background: rgba(255,255,255,.12); }

#site-header.is-scrolled #nav-shell {
  background: rgba(251,250,248,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-color: var(--paper-200);
  box-shadow: 0 10px 30px -18px rgba(7,14,27,.35);
}
#site-header.is-scrolled .nav-brand { color: var(--ink-900); }
#site-header.is-scrolled .nav-brand-sub { color: rgba(42,66,102,.6); }
#site-header.is-scrolled .nav-link { color: var(--ink-500); }
#site-header.is-scrolled .nav-link:hover { color: var(--ink-900); background: rgba(7,14,27,.05); }
#site-header.is-scrolled .nav-link-active { color: var(--brand-600); background: rgba(61,107,255,.09); }
#site-header.is-scrolled .nav-cta { background: var(--ink-900); color: #fff; }
#site-header.is-scrolled .nav-cta:hover { background: var(--brand-600); }

/* ---------- Scroll reveal ---------------------------------------- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .animate-floaty, .animate-drift { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Marquee (trust strip) -------------------------------- */

.marquee { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 4rem; animation: marquee 34s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Misc -------------------------------------------------- */

.prose-spec dt { font-weight: 600; color: var(--ink-900); }
.link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s ease; }
.link-underline:hover { background-size: 100% 1px; }

details.faq[open] .faq-plus { transform: rotate(45deg); }
.faq-plus { transition: transform .25s ease; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary { list-style: none; }

/* ---------- Form controls ---------------------------------------- */

.label {
  display: block;
  margin-bottom: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-900);
}

.field {
  display: block;
  width: 100%;
  border: 1px solid var(--paper-200);
  border-radius: .65rem;
  background: #fff;
  padding: .75rem 1rem;
  font-size: .9375rem;
  color: var(--ink-900);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder { color: #9AA6BA; }
.field:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(93,140,255,.18);
}
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A4266' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; padding-right: 2.75rem; }
textarea.field { min-height: 8rem; resize: vertical; }
.field:user-invalid { border-color: #D14343; }