/* ClarityBots v3.3.2 — Stable, complete stylesheet
   - Bright background (no page-wide overlay)
   - Centered translucent card
   - Large, responsive logo
   - Orange pill buttons with premium hover
   - Smooth load animations (respects reduced motion)
*/

:root{
  --orange:#FF7900;
  --red-orange:#F04E23;
  --navy:#142233;
  --text:#ffffff;
  --muted:#e0e0e0;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --radius:18px;
}

/* Reset/structure */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--navy);
  min-height:100vh;
  display:flex;
  align-items:center;           /* vertical center */
  justify-content:center;       /* horizontal center */
  text-align:center;
  overflow-x:hidden;
}

/* Kill ANY leftover page-wide overlays from older CSS */
body::before, body::after,
.background::before, .background::after {
  content:none !important;
  display:none !important;
}

/* Fullscreen background — bright & clean */
.background{
  position:fixed;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:-1;
  filter:none !important;
  opacity:1 !important;
}

/* Card — the only translucent layer */
.content{
  position:relative;
  width:min(92vw, 900px);
  margin:auto;
  padding:28px 22px;
  background:rgba(20,34,51,.82);
  border:1px solid rgba(229,232,235,.14);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:none; /* keep bg sharp */
  animation: fadeUp .45s ease-out both; /* entrance */
}

/* Logo — large, responsive, animated in */
.logo{
  width:220px;                 /* desktop default */
  height:auto;
  margin:6px auto 14px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
  animation: fadeIn .6s ease-out .08s both;
}

/* Heading & blurb */
h1{
  margin:8px 0 8px;
  font-size:clamp(22px,4vw,34px);
  line-height:1.15;
  animation: fadeIn .5s ease-out .12s both;
}
#blurb{
  margin:6px auto 18px;
  max-width:760px;
  color:var(--muted);
  font-size:clamp(14px,2.2vw,16px);
  animation: fadeIn .5s ease-out .16s both;
}

/* Buttons layout */
.buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:10px;
}

/* Anchor buttons (rendered by app.js) */
.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none;
  background:linear-gradient(180deg, var(--orange), var(--red-orange));
  color:#fff;
  font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.28);
  transition:
    transform .14s ease,
    box-shadow .2s ease,
    filter .14s ease,
    opacity .2s ease;
  white-space:nowrap;
  min-width:148px;            /* easier taps on mobile */
  line-height:1.1;
  animation: fadeIn .5s ease-out .2s both; /* stagger base */
}

/* Premium hover/active feedback */
.btn:hover{
  transform:scale(1.05) translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  filter:brightness(1.07);
}
.btn:active{
  transform:scale(0.98);
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}

/* Stagger button entrance slightly */
.buttons .btn:nth-child(2){ animation-delay:.24s; }
.buttons .btn:nth-child(3){ animation-delay:.28s; }
.buttons .btn:nth-child(4){ animation-delay:.32s; }
.buttons .btn:nth-child(5){ animation-delay:.36s; }
.buttons .btn:nth-child(6){ animation-delay:.40s; }

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* Responsive tweaks */
@media (max-width:1024px){
  .logo{ width:200px; }
}
@media (max-width:768px){
  .content{ padding:22px 16px; }
  .logo{ width:170px; }
  .btn{ min-width:140px; padding:11px 16px; }
}
@media (max-width:480px){
  .content{ width:94vw; border-radius:16px; }
  .logo{ width:150px; }
  .buttons{ gap:10px; }
  .btn{ padding:10px 14px; font-size:.95rem; min-width:132px; }
}

/* Keyframes */
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(0); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:translateY(0); }
}