/* Neo-Brutalist Design System for DOGEFATHER 2.0 */

@import url('https://fonts.googleapis.com/css2?family=Impact&family=Bungee:wght@400&family=Bungee+Shade&family=Permanent+Marker&family=Comic+Neue:wght@400;700&family=Courier+New&display=swap');

/* Global Resets & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Comic Neue', cursive; line-height: 1.6; color: #000; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

/* Color Palette */
:root {
  --black: #000000;
  --white: #FFFFFF;
  --gold: #FFD700;
  --orange: #FF8C00;
}

/* Typography */
.hero-headline {
  font-family: 'Impact', sans-serif;
  font-size: clamp(80px, 15vw, 200px);
  text-transform: uppercase;
  color: var(--white);
  -webkit-text-stroke: 4px var(--black);
  text-shadow: 6px 6px 0 var(--black), 12px 12px 0 var(--gold), 18px 18px 0 var(--orange);
  text-align: center;
  margin-bottom: 1rem;
  animation: glitch 0.3s steps(1) infinite;
}

.subheading {
  font-family: 'Bungee Shade', cursive;
  font-size: clamp(48px, 8vw, 72px);
  text-transform: uppercase;
  background: linear-gradient(var(--gold), var(--orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin-bottom: 2rem;
  transform: rotate(-1deg);
}

.body-text {
  font-family: 'Comic Neue', cursive;
  font-size: 18px;
  color: #000;
  line-height: 1.6;
}

.accent-text {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
}

/* Neo-Brutalist Elements */
.brut-card {
  background: var(--white);
  border: 6px solid var(--black);
  box-shadow: 8px 8px 0 var(--black);
  padding: 24px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  position: relative;
}
.brut-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 var(--black);
}

.brut-btn {
  display: inline-block;
  padding: 16px 32px;
  border: 4px solid var(--black);
  box-shadow: 6px 6px 0 var(--black);
  font-family: 'Bungee', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--black);
  cursor: pointer;
  transition: all 0.1s ease;
  text-decoration: none;
  border-radius: 0;
}
.brut-btn:hover {
  transform: translate(-4px, -4px);
  box-shadow: 10px 10px 0 var(--black);
}
.brut-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 var(--black);
}

.speech-bubble {
  position: relative;
  background: var(--white);
  border: 4px solid var(--black);
  padding: 12px 20px;
  font-family: 'Permanent Marker', cursive;
  font-size: 18px;
  margin: 1rem 0;
  max-width: 300px;
}
.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 30px;
  border: 10px solid transparent;
  border-top-color: var(--black);
}
.speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 32px;
  border: 8px solid transparent;
  border-top-color: var(--white);
}

/* Halftone Background */
.halftone-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--black) 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
@keyframes bounce-in {
  0% { transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@keyframes glitch {
  0% { text-shadow: 4px 0 var(--orange), -4px 0 var(--gold); }
  25% { text-shadow: -4px 0 var(--orange), 4px 0 var(--gold); }
  50% { text-shadow: 4px 2px var(--orange), -4px -2px var(--gold); }
  75% { text-shadow: 0 0 var(--orange), 0 0 var(--gold); }
  100% { text-shadow: 4px 0 var(--orange), -4px 0 var(--gold); }
}
@keyframes coin-fall {
  0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 0 0 var(--gold); }
  50% { box-shadow: 0 0 0 12px transparent; }
}
@keyframes press {
  0% { transform: translate(0,0); box-shadow: 6px 6px 0 var(--black); }
  100% { transform: translate(4px,4px); box-shadow: 2px 2px 0 var(--black); }
}

/* Scroll Bounce */
.visible { animation: scrollBounce 0.6s ease-out forwards; opacity: 0; transform: translateY(30px); }
@keyframes scrollBounce {
  to { opacity: 1; transform: translateY(0); }
}

/* Section Backgrounds */
#hero { background: var(--gold); min-height: 100vh; position: relative; }
#about { background: var(--white); }
#tokenomics { background: var(--black); color: var(--white); }
#tokenomics .body-text, #tokenomics .brut-card { color: var(--white); background: var(--black); border-color: var(--white); }
#roadmap { background: var(--white); position: relative; }
#howtobuy { background: var(--orange); color: var(--white); }
#howtobuy .body-text, #howtobuy .brut-card { color: var(--white); background: var(--black); border-color: var(--white); }
#features { background: var(--white); }
#faq { background: var(--black); color: var(--white); }
#community { background: var(--gold); }
#footer { background: var(--black); color: var(--white); }

/* Nav */
#nav { 
  position: sticky; top: 0; background: var(--black); color: var(--white); 
  display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; 
  z-index: 1000; border-bottom: 4px solid var(--gold); 
}
#nav .logo { font-family: 'Bungee', sans-serif; font-size: 24px; color: var(--gold); }
#nav ul { display: flex; list-style: none; gap: 2rem; }
#nav ul li a { font-family: 'Bungee', sans-serif; font-size: 14px; color: var(--white); transition: color 0.3s; }
#nav ul li a:hover { color: var(--gold); }
#nav .cta { background: var(--orange); color: var(--black); }

/* Hero Specific */
#hero .mascot { width: 400px; height: auto; position: absolute; right: 5%; top: 50%; transform: translateY(-50%); animation: float 3s ease-in-out infinite, bounce-in 1s ease-out; }
#hero .ticker { display: flex; justify-content: center; gap: 2rem; margin: 1rem 0; }
#hero .ticker div { background: var(--black); color: var(--white); padding: 1rem; border: 4px solid var(--white); font-family: 'Courier New', monospace; font-size: 18px; }
#hero .buttons { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; }
#hero .social-strip { display: flex; justify-content: center; gap: 2rem; }
#hero .social-strip a { font-size: 48px; transition: transform 0.3s; }
#hero .social-strip a:hover { transform: scale(1.2); }

/* About Comic Panels */
#about .comic-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 2rem; }
#about .comic-panel { position: relative; }
#about .comic-panel img { width: 100%; border: 6px solid var(--black); box-shadow: 8px 8px 0 var(--black); }
#about .comic-panel .speech { position: absolute; top: 10%; left: 10%; }

/* Tokenomics Pie */
#tokenomics .pie { width: 300px; height: 300px; border-radius: 50%; border: 8px solid var(--white); 
  background: conic-gradient(var(--gold) 0% 50%, var(--orange) 50% 80%, var(--white) 80% 100%); 
  margin: 2rem auto; position: relative; }
#tokenomics .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }

/* Roadmap */
#roadmap .path { /* Simplified wavy line with SVG or CSS */ height: 400px; position: relative; display: flex; align-items: center; justify-content: space-between; }
#roadmap .phase { text-align: center; }
#roadmap .phase-dot { width: 60px; height: 60px; background: var(--gold); border: 4px solid var(--black); border-radius: 50%; margin: 0 auto 1rem; animation: pulse-border 2s infinite; }

/* How to Buy Steps */
#howtobuy .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }

/* Features Grid */
#features .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }

/* FAQ Accordion */
#faq .accordion { margin-bottom: 1rem; }
#faq .accordion-item { border-bottom: 4px solid var(--white); }
#faq .accordion-header { cursor: pointer; padding: 1rem; background: var(--orange); color: var(--black); font-family: 'Bungee', sans-serif; display: flex; justify-content: space-between; align-items: center; }
#faq .accordion-content { display: none; padding: 1rem; }
#faq .accordion-content.active { display: block; }

/* Community */
#community .holder-count { font-family: 'Impact', sans-serif; font-size: 80px; color: var(--black); text-align: center; animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
#community .social-buttons { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; }
#community .social-buttons .brut-btn { width: 300px; height: 80px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
#community .meme-gallery { display: flex; overflow-x: auto; gap: 1rem; padding: 1rem; }

/* Footer */
#footer { padding: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
#footer .disclaimer { font-size: 12px; color: #ccc; }

/* Mobile */
@media (max-width: 768px) {
  #nav ul { display: none; }
  #nav .mobile-menu { display: block; }
  #hero .buttons { flex-direction: column; align-items: center; }
  /* Add more responsive adjustments */
}

/* Ripped Edge Example */
.ripped-edge { clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 85% 88%, 75% 100%, 65% 85%, 50% 100%, 35% 88%, 25% 100%, 10% 85%, 0 100%); }