/* Modern Neobrutalism theme */

/* Neobrutalism theme variables */
:root{
  --neo-bg: #fefefe;
  --neo-black: #0b0b0b;
  --neo-yellow: #ffe27a;
  --neo-blue: #2d6cdf;
  --neo-red: #ff5c7a;
  --neo-green: #2ecc71;
}

body{
  /* Neobrutalism: readable body font, flat background */
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background-color: var(--neo-bg);
  background-image: none;
}

/* Headings: Space Grotesk for neobrutalist feel */
.pop-heading, #features h2, #waitlist h2, #how h2, #faq h2{
  font-family: 'Space Grotesk', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Header: flat, thick border and slight offset shadow */
.header-soft{
  background: #ffffff;
  border-bottom: 4px solid var(--neo-black);
  box-shadow: 6px 6px 0 rgba(11,11,11,0.08);
}
.header-soft a{ color: var(--neo-black); transition: transform .12s ease; }
.header-soft a:hover{ transform: translate(-1px,-1px); }

/* Navbar links: neobrutalist hover underline + offset shadow */
.header-soft nav a{
  position: relative;
  display: inline-block;
  padding: .25rem .1rem;
  color: var(--neo-black);
  text-decoration: none;
  transition: transform .14s cubic-bezier(.2,.9,.2,1), color .14s ease;
}
.header-soft nav a::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.28rem;
  height: .22rem;
  background: var(--neo-blue);
  border: 3px solid var(--neo-black);
  box-shadow: 4px 4px 0 var(--neo-black);
  border-radius: .2rem;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s cubic-bezier(.2,.9,.2,1);
}
.header-soft nav a:hover{ transform: translate(-2px,-2px); }
.header-soft nav a:hover::after, .header-soft nav a:focus-visible::after{ transform: scaleX(1); }
.header-soft nav a:focus-visible{ outline: none; }

/* Hero heading: blocky badge with thick border and offset shadow */
.pop-heading{
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: -0.02em;
  display: inline-block;
  padding: .5rem .9rem;
  color: var(--neo-black);
  background: var(--neo-yellow);
  border: 4px solid var(--neo-black);
  box-shadow: 8px 8px 0 var(--neo-black);
}
/* Remove previous pop-art layered effects */
.pop-heading::before, .pop-heading::after{ content: none; }

/* Accent word: simple underline bar for emphasis */
.pop-accent{
  font-family: inherit;
  position: relative;
}
.pop-accent::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.15em; height: .28em;
  background: var(--neo-red);
  border: 3px solid var(--neo-black);
  box-shadow: 4px 4px 0 var(--neo-black);
}

/* Buttons: flat colors, thick borders, offset shadows */
.pop-btn{
  background: var(--neo-blue);
  color: #fff;
  padding: .7rem 1.2rem;
  border-radius: .4rem;
  border: 3px solid var(--neo-black);
  box-shadow: 6px 6px 0 var(--neo-black);
  font-weight: 800;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pop-btn:hover{ transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--neo-black); }

/* Cards: flat white with thick border and offset shadow */
.pop-card{
  background: #ffffff;
  border: 4px solid var(--neo-black);
  border-radius: .6rem;
  padding: 1rem;
  box-shadow: 8px 8px 0 var(--neo-black);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pop-card:hover{ transform: translate(-2px,-2px); box-shadow: 10px 10px 0 var(--neo-black); }
.pop-card svg{ filter: none; color: var(--neo-black); }

/* Neobrutalism: subtle card color tints for sections (override earlier styles) */
#features .pop-card,
#how .pop-card,
#waitlist .grid > .pop-card{
  background-image: none; /* kill gradients from earlier styles */
  border: 4px solid var(--neo-black);
  box-shadow: 8px 8px 0 var(--neo-black);
}

/* Alternate gentle tints for variety */
#features .pop-card:nth-child(3n+1),
#how .pop-card:nth-child(3n+1),
#waitlist .grid > .pop-card:nth-child(3n+1){
  background-color: #FFF7C2; /* soft yellow */
}
#features .pop-card:nth-child(3n+2),
#how .pop-card:nth-child(3n+2),
#waitlist .grid > .pop-card:nth-child(3n+2){
  background-color: #EAF1FF; /* light blue */
}
#features .pop-card:nth-child(3n),
#how .pop-card:nth-child(3n),
#waitlist .grid > .pop-card:nth-child(3n){
  background-color: #FFE6EE; /* soft pink */
}

/* Distinct tints for HOW section (light mode) */
#how .pop-card:nth-child(3n+1){ background-color:#E7FCEE; } /* mint */
#how .pop-card:nth-child(3n+2){ background-color:#FFF0D6; } /* peach */
#how .pop-card:nth-child(3n){   background-color:#EEE9FF; } /* lavender */

/* Keep text readable on tints */
#features .pop-card h3, #how .pop-card h3, #waitlist .grid > .pop-card h3{ color: var(--neo-black); }
#features .pop-card p,  #how .pop-card p,  #waitlist .grid > .pop-card p{ color: rgba(11,11,11,0.85); }

/* Section-specific tweaks: keep reveal behavior */
#features .pop-card, #how .pop-card{ opacity: 0; transform: translateY(10px); }
#features .pop-card.revealed, #how .pop-card.revealed{ opacity: 1; transform: none; }
#features h3, #how h3{ color: var(--neo-black); }
#features p, #how p{ color: rgba(11,11,11,0.8); }

/* Inputs: bold outline and flat fill */
.pop-input{
  background: #fff;
  border: 4px solid var(--neo-black);
  border-radius: .5rem;
  padding: .6rem .8rem;
}
.pop-input:focus{ outline: none; box-shadow: 6px 6px 0 var(--neo-black); }

/* Placeholder color: black in light mode */
.pop-input::placeholder{ color:#000 !important; opacity:1; }
.pop-input::-webkit-input-placeholder{ color:#000 !important; opacity:1; }

/* Dark mode: placeholder white */
@media (prefers-color-scheme: dark){
  .pop-input::placeholder{ color:#fff !important; opacity:1; }
  .pop-input::-webkit-input-placeholder{ color:#fff !important; opacity:1; }
}

/* FAQ: blocky questions and answers */
#faq{ background: transparent; }
.faq-question{
  background: #fff;
  color: var(--neo-black);
  font-weight: 800;
  border-radius: .6rem;
  padding: .75rem 1rem;
  border: 4px solid var(--neo-black);
  box-shadow: 8px 8px 0 var(--neo-black);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
.faq-question:hover{ transform: translate(-2px,-2px); box-shadow: 10px 10px 0 var(--neo-black); }
.faq-answer{ margin-top:.5rem; color: var(--neo-black); background: #fff; border:4px solid var(--neo-black); padding: .85rem 1rem; border-radius:.5rem; box-shadow: 6px 6px 0 var(--neo-black); }
.faq-answer.hidden{ display:none; }
.rotate-180{ transform: rotate(180deg); }

/* Neobrutalism: subtle coloring for FAQ items */
#faqAccordion .faq-item{ background: transparent; }
/* Unify FAQ colors: same subtle tint for all items */
#faqAccordion .faq-item .faq-question{ background-color: #FFF7C2; }
#faqAccordion .faq-item .faq-answer{ background-color: #FFFBE3; }

#faqAccordion .faq-question,
#faqAccordion .faq-answer{
  border-color: var(--neo-black);
  box-shadow: 6px 6px 0 var(--neo-black);
  color: var(--neo-black);
}

/* Waitlist section cards keep the same neobrutalism look */
#waitlist .pop-card{ background:#fff; }
#waitlist .grid > .pop-card{ align-items:center; text-align:center; }
#waitlist .grid > .pop-card svg{ width: 44px; height:44px; color: var(--neo-black); }
#waitlist p.text-xs{ color: rgba(11,11,11,0.7); }

/* Entrance animation for hero: simple slide-in */
.pop-heading{ opacity:0; transform: translateY(10px); }
.pop-heading.revealed{ opacity:1; transform:none; transition: opacity .4s ease, transform .4s ease; }

/* Fixed subtle neobrutalism background */
#neo-bg{
  position: fixed;
  inset: 0;
  z-index: -1; /* sits behind all content */
  pointer-events: none;
}
.neo-shape{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 4px solid var(--neo-black);
  box-shadow: 12px 12px 0 var(--neo-black);
  border-radius: .6rem;
  opacity: 0.24; /* slightly more colorful but still subtle */
  transition: background-color .25s ease, box-shadow .25s ease;
}
.neo-yellow{ background: var(--neo-yellow); }
.neo-blue{ background: #A7C4FF; }
.neo-red{ background: #FF9EB3; }

@media (max-width: 640px){
  .neo-shape{ opacity: 0.16; box-shadow: 10px 10px 0 var(--neo-black); }
}

/* Dark mode (modern neobrutalism) */
@media (prefers-color-scheme: dark){
  :root{
    /* Vibrant but restrained neobrutalistic dark palette */
    --neo-bg: #0a0f1c;         /* deep cool navy */
    --neo-black: #f8faff;      /* brighter near-white for text/borders */
    --neo-yellow: #ffcf4d;     /* vibrant amber hero badge */
    --neo-blue: #5e8dff;       /* lively blue for buttons */
    --neo-red: #4ec9b0;        /* teal accent underline (less harsh than magenta) */
    --neo-green: #58d3a5;
  }

  /* Base */
  body{ background-color: var(--neo-bg); color: var(--neo-black); }

  /* Header */
  .header-soft{ background:#0d1527; border-bottom-color: var(--neo-black); box-shadow: 6px 6px 0 rgba(248,250,255,0.14); }
  .header-soft a{ color: var(--neo-black); }

  /* Navbar links: neobrutalist hover underline + offset shadow */
  .header-soft nav a{ color: var(--neo-black); }
  .header-soft nav a::after{ background: var(--neo-red); box-shadow: 4px 4px 0 var(--neo-black); }

  /* Hero */
  .pop-heading{ color: var(--neo-black); background: var(--neo-yellow); border-color: var(--neo-black); box-shadow: 10px 10px 0 rgba(248,250,255,0.12); }
  .pop-accent::after{ background: var(--neo-red); border-color: var(--neo-black); box-shadow: 4px 4px 0 rgba(248,250,255,0.12); }

  /* Buttons */
  .pop-btn{ background:#2952e3; color:#fff; border-color: var(--neo-black); box-shadow: 6px 6px 0 rgba(248,250,255,0.12); }
  .pop-btn:hover{ box-shadow: 8px 8px 0 rgba(248,250,255,0.18); }

  /* Cards */
  .pop-card{ background:#0f1826; border-color: var(--neo-black); box-shadow: 8px 8px 0 rgba(248,250,255,0.12); }
  #features .pop-card,
  #how .pop-card,
  #waitlist .grid > .pop-card{ background-image:none; }

  /* Dark mode brighter grid tints */
  /* Default (before reveal) brighter but tasteful */
  #features .pop-card:nth-child(3n+1),
  #how .pop-card:nth-child(3n+1),
  #waitlist .grid > .pop-card:nth-child(3n+1){ background-color:#2a5faa; }
  #features .pop-card:nth-child(3n+2),
  #how .pop-card:nth-child(3n+2),
  #waitlist .grid > .pop-card:nth-child(3n+2){ background-color:#2f79c2; }
  #features .pop-card:nth-child(3n),
  #how .pop-card:nth-child(3n),
  #waitlist .grid > .pop-card:nth-child(3n){ background-color:#4059d6; }

  /* After reveal: step up vibrancy slightly */
  #features .pop-card:nth-child(3n+1).revealed,
  #how .pop-card:nth-child(3n+1).revealed{ background-color:#3a7bd5; }
  #features .pop-card:nth-child(3n+2).revealed,
  #how .pop-card:nth-child(3n+2).revealed{ background-color:#4a8fe6; }
  #features .pop-card:nth-child(3n).revealed,
  #how .pop-card:nth-child(3n).revealed{ background-color:#6176f0; }

  /* Ensure text stays bright */
  #features .pop-card h3, #how .pop-card h3, #waitlist .pop-card h3{ color: var(--neo-black); }
  #features .pop-card p,  #how .pop-card p,  #waitlist .pop-card p{ color: rgba(248,250,255,0.95); }

  /* Inputs */
  .pop-input{ background:#0a1424; color: var(--neo-black); border-color: var(--neo-black); }
  .pop-input::placeholder{ color: rgba(248,250,255,0.78); }

  /* FAQ unified subtle coloring for dark */
  #faq{ background: transparent; }
  #faqAccordion .faq-item .faq-question{ background-color:#111d33; color: var(--neo-black); border-color: var(--neo-black); box-shadow: 8px 8px 0 rgba(248,250,255,0.12); }
  #faqAccordion .faq-item .faq-answer{ background-color:#0b1426; color: var(--neo-black); border-color: var(--neo-black); box-shadow: 6px 6px 0 rgba(248,250,255,0.10); }

  /* Background shapes (slightly more vibrant, still subtle) */
  .neo-shape{ border-color: var(--neo-black); box-shadow: 12px 12px 0 rgba(248,250,255,0.12); }
  .neo-yellow{ background: rgba(255,207,77,0.24); }
  .neo-blue{ background: rgba(94,141,255,0.24); }
  .neo-red{ background: rgba(78,201,176,0.24); }

  /* Make common Tailwind gray utility classes brighter in dark mode for readability */
  .text-gray-600{ color: rgba(248,250,255,0.92) !important; }
  .text-gray-500{ color: rgba(226,232,240,0.90) !important; }

  /* Dark-mode specific request: make How It Works heading black */
  #how h2{ color: #000 !important; }

  /* Instagram icon white in dark mode */
  footer a[aria-label="Instagram"] svg{ color:#fff !important; }
}

/* Distinct tints for HOW section (dark mode) */
@media (prefers-color-scheme: dark){
  #how .pop-card:nth-child(3n+1){ background-color:#1b3d35; } /* deep teal */
  #how .pop-card:nth-child(3n+2){ background-color:#463219; } /* warm amber/brown */
  #how .pop-card:nth-child(3n){   background-color:#2c2856; } /* indigo */
  /* revealed step-up */
  #how .pop-card:nth-child(3n+1).revealed{ background-color:#215b4e; }
  #how .pop-card:nth-child(3n+2).revealed{ background-color:#6a4b1f; }
  #how .pop-card:nth-child(3n).revealed{   background-color:#3a3575; }
  /* ensure readability */
  #how .pop-card h3{ color: var(--neo-black); }
  #how .pop-card p{ color: rgba(248,250,255,0.95); }
}

/* Dark mode: extra vibrant grid palette */
@media (prefers-color-scheme: dark){
  /* Base vibrant hues */
  #features .pop-card:nth-child(3n+1),
  #how .pop-card:nth-child(3n+1),
  #waitlist .grid > .pop-card:nth-child(3n+1){ background-color:#0FB6FF !important; }
  #features .pop-card:nth-child(3n+2),
  #how .pop-card:nth-child(3n+2),
  #waitlist .grid > .pop-card:nth-child(3n+2){ background-color:#7B61FF !important; }
  #features .pop-card:nth-child(3n),
  #how .pop-card:nth-child(3n),
  #waitlist .grid > .pop-card:nth-child(3n){ background-color:#19E2C1 !important; }

  /* Step-up on reveal */
  #features .pop-card:nth-child(3n+1).revealed,
  #how .pop-card:nth-child(3n+1).revealed,
  #waitlist .grid > .pop-card:nth-child(3n+1).revealed{ background-color:#25C7FF !important; box-shadow: 10px 10px 0 rgba(248,250,255,0.2); }
  #features .pop-card:nth-child(3n+2).revealed,
  #how .pop-card:nth-child(3n+2).revealed,
  #waitlist .grid > .pop-card:nth-child(3n+2).revealed{ background-color:#8B72FF !important; box-shadow: 10px 10px 0 rgba(248,250,255,0.2); }
  #features .pop-card:nth-child(3n).revealed,
  #how .pop-card:nth-child(3n).revealed,
  #waitlist .grid > .pop-card:nth-child(3n).revealed{ background-color:#19F2C6 !important; box-shadow: 10px 10px 0 rgba(248,250,255,0.2); }

  /* Maintain readability */
  #features .pop-card h3, #how .pop-card h3, #waitlist .pop-card h3{ color: var(--neo-black); }
  #features .pop-card p,  #how .pop-card p,  #waitlist .pop-card p{ color: rgba(248,250,255,0.96); }
}

/* Neobrutalism alerts (success/error) */
#success-message,
#error-message{
  position: relative;
  padding: .85rem 1rem .85rem 1.25rem;
  border: 4px solid var(--neo-black);
  border-radius: .6rem;
  box-shadow: 6px 6px 0 var(--neo-black);
  font-weight: 800;
  color: var(--neo-black) !important; /* override utility classes */
}
#success-message{ background-color:#E7FCEE; }
#error-message{ background-color:#FFE6EE; }

#success-message::before,
#error-message::before{
  content: '';
  position: absolute;
  left: .5rem; top: 50%; transform: translateY(-50%);
  width: .45rem; height: 70%;
  border: 3px solid var(--neo-black);
  box-shadow: 3px 3px 0 var(--neo-black);
  border-radius: .25rem;
}
#success-message::before{ background: var(--neo-green); }
#error-message::before{ background: var(--neo-red); }

/* Dark mode variants for alerts */
@media (prefers-color-scheme: dark){
  #success-message, #error-message{ box-shadow: 6px 6px 0 #000 !important; }
  #success-message{ background-color:#0f2a22; }
  #error-message{ background-color:#2a1520; }
  #success-message::before{ background:#58d3a5; border-color: var(--neo-black); box-shadow: 3px 3px 0 rgba(248,250,255,0.14); }
  #error-message::before{ background:#ff86a0; border-color: var(--neo-black); box-shadow: 3px 3px 0 rgba(248,250,255,0.14); }
}

/* Dark mode: force black box-shadows for neobrutalism */
@media (prefers-color-scheme: dark){
  .header-soft{ box-shadow: 6px 6px 0 #000 !important; }
  .pop-card{ box-shadow: 8px 8px 0 #000 !important; }
  .pop-btn{ box-shadow: 6px 6px 0 #000 !important; }
  .pop-heading{ box-shadow: 10px 10px 0 #000 !important; }
  .neo-shape{ box-shadow: 12px 12px 0 #000 !important; }
  #success-message, #error-message{ box-shadow: 6px 6px 0 #000 !important; }
  .faq-question{ box-shadow: 8px 8px 0 #000 !important; }
  .faq-answer{ box-shadow: 6px 6px 0 #000 !important; }
  .header-soft nav a::after{ box-shadow: 4px 4px 0 #000 !important; }
  /* revealed state shadows */
  #features .pop-card.revealed,
  #how .pop-card.revealed,
  #waitlist .grid > .pop-card.revealed{ box-shadow: 10px 10px 0 #000 !important; }
}