/* ==========================================================================
   SUNBRIGHT — custom styles (layered on top of Tailwind)
   Palette is derived from sortlist.com: blue #305EF3 / #2649DE / #477FFC,
   blue-50 sections #F0F6FE, warm "stone" neutrals and a sun-yellow accent.
   ========================================================================== */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
section[id] { scroll-margin-top: 84px; }

::selection { background: #DEEAFD; color: #2649DE; }

:focus-visible { outline: 2px solid #305EF3; outline-offset: 3px; border-radius: 6px; }

/* ---------- Hero radar ---------- */
.radar {
  background:
    radial-gradient(circle at 50% 50%, rgba(71,127,252,.16) 0%, rgba(71,127,252,.06) 38%, rgba(240,246,254,0) 70%);
}
.radar-ring { border: 1px solid rgba(71,127,252,.18); }

.pulse-ring { animation: pulse-ring 2.8s cubic-bezier(.2,.6,.3,1) infinite; }
.pulse-ring.delay { animation-delay: 1.4s; }
@keyframes pulse-ring {
  0%   { transform: scale(.6); opacity: .55; }
  100% { transform: scale(2.4); opacity: 0; }
}

.float-card { animation: float 7s ease-in-out infinite; }
.float-card:nth-child(2n) { animation-delay: -2.5s; animation-duration: 8s; }
.float-card:nth-child(3n) { animation-delay: -4s; animation-duration: 9s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---------- Lifecycle tabs (pure CSS, radio driven) ---------- */
.tab-panel { display: none; }
#t-build:checked ~ .tab-panels .p-build,
#t-ship:checked  ~ .tab-panels .p-ship,
#t-run:checked   ~ .tab-panels .p-run { display: block; animation: fade-up .35s ease both; }

#t-build:checked ~ .tab-nav label[for="t-build"],
#t-ship:checked  ~ .tab-nav label[for="t-ship"],
#t-run:checked   ~ .tab-nav label[for="t-run"] {
  background: #fff;
  color: #0F0D0A;
  box-shadow: 0 1px 2px rgba(15,13,10,.06), 0 1px 3px rgba(15,13,10,.1);
}
#t-build:focus-visible ~ .tab-nav label[for="t-build"],
#t-ship:focus-visible  ~ .tab-nav label[for="t-ship"],
#t-run:focus-visible   ~ .tab-nav label[for="t-run"] { outline: 2px solid #305EF3; outline-offset: 2px; }

/* Sidebar highlight inside the mock console follows the active tab */
#t-build:checked ~ .tab-panels .nav-build,
#t-ship:checked  ~ .tab-panels .nav-ship,
#t-run:checked   ~ .tab-panels .nav-run { background: #F0F6FE; color: #2649DE; font-weight: 500; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Mobile menu (details/summary) ---------- */
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] .icon-open { display: none; }
.menu:not([open]) .icon-close { display: none; }

/* ---------- FAQ accordion ---------- */
.faq > summary { list-style: none; cursor: pointer; }
.faq > summary::-webkit-details-marker { display: none; }
.faq .chev { transition: transform .2s ease; }
.faq[open] .chev { transform: rotate(45deg); }

/* ---------- Logo marquee ---------- */
.marquee { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { animation: marquee 32s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Form ---------- */
.field {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #D6D3D1;
  background: #fff;
  padding: .65rem .8rem;
  font-size: .9375rem;
  color: #0F0D0A;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field::placeholder { color: #A8A29E; }
.field:focus { outline: none; border-color: #305EF3; box-shadow: 0 0 0 4px rgba(48,94,243,.15); }
select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.8' stroke='%2378716C'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 1rem;
  padding-right: 2.25rem;
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulse-ring, .float-card, .marquee-track { animation: none !important; }
  .tab-panel { animation: none !important; }
}