/* VeltoCare landing — effects not covered by Tailwind utilities */
html { scroll-behavior: smooth; }
body { background:#070b12; font-family:'Manrope',sans-serif; -webkit-font-smoothing:antialiased; }
::selection { background: rgba(45,212,191,.3); color:#fff; }
.font-display { font-family:'Bricolage Grotesque','Poppins',sans-serif; }

/* Gradient text with slow shimmer */
.grad-text {
  background:linear-gradient(100deg,#5eead4 0%,#2dd4bf 30%,#22d3ee 55%,#5eead4 80%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer { to { background-position:200% center; } }

.grid-bg {
  background-image: linear-gradient(rgba(45,212,191,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(45,212,191,.055) 1px, transparent 1px);
  background-size: 54px 54px;
  animation: gridpan 22s linear infinite;
}
@keyframes gridpan { from{ background-position:0 0,0 0; } to{ background-position:54px 54px,54px 54px; } }

/* Hero atmosphere */
.aurora {
  position:absolute; inset:-25% -10%; pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 24%, rgba(45,212,191,.20), transparent 62%),
    radial-gradient(32% 36% at 82% 16%, rgba(34,211,238,.15), transparent 60%),
    radial-gradient(42% 46% at 58% 82%, rgba(94,234,212,.08), transparent 65%);
  filter: blur(60px);
  animation: auroradrift 19s ease-in-out infinite alternate;
}
@keyframes auroradrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2.5%, 2%, 0) scale(1.07); }
}
.noise {
  position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

@keyframes floaty { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }
@keyframes floaty2 { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(12px); } }
@keyframes orbdrift { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(40px,-30px) scale(1.12); } }
@keyframes bannerpulse { 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:.85; transform:scale(1.03); } }
.custom-banner-glow {
  position:absolute; inset:-20% -10%; pointer-events:none;
  background: radial-gradient(ellipse 55% 80% at 50% 50%, rgba(45,212,191,.22), transparent 70%);
  animation: bannerpulse 5s ease-in-out infinite;
}
.custom-marquee { display:flex; width:max-content; animation: marqueeslide 28s linear infinite; }
.custom-marquee:hover { animation-play-state: paused; }
@keyframes marqueeslide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Hero headline: per-word rise */
.hw { display:inline-block; opacity:0; transform:translateY(.65em) rotate(1.5deg); animation: wordin .75s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes wordin { to { opacity:1; transform:none; } }

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* Cards: lift + glow + cursor spotlight */
.card-glow { position:relative; transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s; }
.card-glow:hover { transform:translateY(-6px); border-color:rgba(45,212,191,.35); }
.card-glow::after { content:''; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .35s; box-shadow:0 24px 60px -20px rgba(45,212,191,.5); pointer-events:none; }
.card-glow:hover::after { opacity:1; }
.spot::before {
  content:''; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .4s; pointer-events:none;
  background: radial-gradient(340px circle at var(--sx,50%) var(--sy,50%), rgba(45,212,191,.12), transparent 65%);
}
.spot:hover::before { opacity:1; }

/* Buttons */
.btn-mint { position:relative; overflow:hidden; background:linear-gradient(180deg,#5eead4,#2dd4bf); color:#04241f; box-shadow:0 10px 30px -8px rgba(45,212,191,.6); transition:transform .2s, box-shadow .3s, filter .2s; }
.btn-mint:hover { transform:translateY(-2px); box-shadow:0 16px 40px -8px rgba(45,212,191,.75); filter:brightness(1.05); }
.btn-mint::after { content:''; position:absolute; top:-10%; bottom:-10%; left:-35%; width:26%; background:linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-20deg); transition:left .55s ease; pointer-events:none; }
.btn-mint:hover::after { left:135%; }
.btn-ghost { transition:background .2s, border-color .2s, color .2s; }
.btn-ghost:hover { background:rgba(45,212,191,.08); border-color:rgba(45,212,191,.4); color:#e9f0f8; }

.frame-shadow { box-shadow:0 50px 120px -30px rgba(0,0,0,.85), 0 0 70px -20px rgba(45,212,191,.28); }
.hero-spot { background:radial-gradient(620px circle at var(--mx,50%) var(--my,30%), rgba(45,212,191,.10), transparent 60%); transition:background .15s; }
.tick { animation:pulsedot 1.8s ease-in-out infinite; }

/* Nav links: animated underline + active state */
.navlink { position:relative; padding-bottom:2px; }
.navlink::after { content:''; position:absolute; left:0; bottom:-3px; height:2px; width:100%; border-radius:2px; background:linear-gradient(90deg,#5eead4,#22d3ee); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.navlink:hover::after, .navlink.active::after { transform:scaleX(1); }
.navlink.active { color:#e9f0f8; }

/* Featured pricing card: rotating conic border */
@property --ang { syntax:'<angle>'; initial-value:0deg; inherits:false; }
.conic-frame {
  position:relative; border-radius:1.5rem; padding:1.5px;
  background:
    conic-gradient(from var(--ang),
      rgba(45,212,191,.05), rgba(94,234,212,.95) 12%, rgba(34,211,238,.55) 22%,
      rgba(45,212,191,.06) 38%, rgba(45,212,191,.06) 60%,
      rgba(45,212,191,.55) 78%, rgba(45,212,191,.05) 95%);
  animation: spinborder 7s linear infinite;
}
@keyframes spinborder { to { --ang: 360deg; } }
@supports not (background: conic-gradient(from var(--ang), red, blue)) {
  .conic-frame { background: linear-gradient(140deg, rgba(94,234,212,.7), rgba(34,211,238,.25), rgba(45,212,191,.5)); animation:none; }
}

/* Hairline section divider */
.hairline { height:1px; background:linear-gradient(90deg, transparent, rgba(45,212,191,.35), transparent); }

/* FAQ accordion */
.faq-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s cubic-bezier(.2,.7,.2,1); }
.faq-body.open { grid-template-rows:1fr; }
.faq-body > div { overflow:hidden; }
.faq-chev { transition:transform .3s; }
.faq-chev.open { transform:rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition:none; opacity:1; transform:none; }
  .hw { animation:none; opacity:1; transform:none; }
  .grid-bg, .tick, .aurora, .grad-text, .conic-frame, .ribbon-glow { animation:none !important; }
}
@media (pointer: coarse) {
  .hero-spot { background:none !important; }
  .spot::before { display:none; }
}