:root{
  --green:#2E5946;
  --pink:#EA596E;
  --bg:#EAF1ED;
  --text:#11181C;
  --muted:#6b7280;
  --white:#fff;
  --highlight:#FF8E53;
  --highlight-light:#FFB366;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:1080px;margin:0 auto;padding:0 20px}

/* Beta Banner */
.beta-banner{background:linear-gradient(135deg, rgba(46,89,70,0.08) 0%, rgba(255,142,83,0.08) 100%);backdrop-filter:blur(20px);border-bottom:2px solid rgba(46,89,70,0.15);padding:16px 0;text-align:center;position:sticky;top:0;z-index:30}
.beta-text{color:var(--green);font-size:15px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;font-family:'Righteous', cursive}

.site-header{position:relative;z-index:20;background:var(--white);border-bottom:1px solid #e5e7eb}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:'Righteous', cursive;font-size:26px;text-decoration:none}
.brand-ash{color:var(--green)}
.brand-app{color:var(--pink)}
.nav{display:flex;gap:18px}
.nav a{color:var(--green);text-decoration:none;font-weight:600;font-size:18px}
.nav a.active{border-bottom:2px solid var(--green)}
.nav-toggle{display:none;background:none;border:none;font-size:22px;color:var(--green)}

.hero{padding:64px 0;background:linear-gradient(180deg,#fff,rgba(255,255,255,0.7)), url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=1600&auto=format&fit=crop') center/cover}
.hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:42px;line-height:1.1;margin:0 0 12px;color:var(--green)}
.hero-subtitle{font-size:20px;color:#374151;max-width:50ch;margin:0 0 16px;font-weight:600}
.hero-main{font-size:18px;color:#374151;max-width:50ch;margin:0 0 24px;line-height:1.6}
.highlight{color:var(--highlight);font-weight:700}
.cta-row{display:flex;gap:12px;margin:18px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none;transition:all 0.3s ease}
.btn-primary{background:var(--green);color:#fff;border:2px solid var(--green)}
.btn-primary:hover{background:var(--highlight);border-color:var(--highlight);transform:translateY(-2px);box-shadow:0 8px 25px rgba(255,142,83,0.3)}
.btn-outline{background:transparent;color:var(--green);border:2px solid var(--green)}
.btn-outline:hover{background:var(--green);color:#fff;transform:translateY(-2px)}
.tiny-note{font-size:12px;color:var(--muted)}

.hero-visual{display:flex;flex-direction:column;align-items:center;gap:30px}
.hero-icons{display:flex;gap:20px;margin-bottom:20px;justify-content:center}
.icon-container{position:relative;display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:linear-gradient(135deg, var(--highlight-light), var(--pink));border-radius:16px;box-shadow:0 6px 20px rgba(255,142,83,0.3);transition:all 0.4s ease;animation:iconEntrance 0.8s ease-out forwards;opacity:0;transform:translateY(20px);cursor:pointer;overflow:hidden}
.icon-container::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, var(--highlight), var(--pink));opacity:0;transition:opacity 0.3s ease;border-radius:16px}
.icon-container:nth-child(1){animation-delay:0.1s}
.icon-container:nth-child(2){animation-delay:0.2s}
.icon-container:hover{transform:translateY(-3px) scale(1.1) rotate(5deg);box-shadow:0 15px 45px rgba(255,142,83,0.6)}
.icon-container:hover::before{opacity:0.3}
.hero-svg{width:32px;height:32px;filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);z-index:1;position:relative}
.icon-container:hover .hero-svg{filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) drop-shadow(0 0 8px var(--highlight)) brightness(1.4)}
.icon-glow{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:16px;background:linear-gradient(135deg, rgba(255,142,83,0.2), rgba(255,107,107,0.2));opacity:0;transition:opacity 0.3s ease}
.icon-container:hover .icon-glow{opacity:0.4}

@keyframes iconEntrance{
  to{opacity:1;transform:translateY(0)}
}

.phone-mockup{background:#fff;border-radius:24px;box-shadow:0 10px 30px rgba(0,0,0,.1);padding:18px;text-align:center;animation:phoneFloat 3s ease-in-out infinite}
.ui-card{width:260px;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden}
.ui-header{background:#fff;padding:12px 14px;border-bottom:1px solid #e5e7eb;font-family:'Righteous';}
.ui-body{padding:14px;background:#f8fafb}
.ui-pill{height:22px;background:#EAF1ED;border:2px solid var(--green);border-radius:999px;margin:8px 0}
.ui-pill.wide{width:80%}

@keyframes phoneFloat{
  0%, 100%{transform:translateY(0px)}
  50%{transform:translateY(-10px)}
}

.section{padding:60px 0;position:relative}
.section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 20% 80%, rgba(255,142,83,0.03) 0%, transparent 50%),radial-gradient(circle at 80% 20%, rgba(255,107,107,0.03) 0%, transparent 50%);pointer-events:none}
.section.alt{background:#fff}

/* Current Features Section - Special background */
#current-features{background:linear-gradient(135deg, rgba(46,89,70,0.03) 0%, rgba(255,142,83,0.03) 100%);text-align:center}
.section.alt.pig-section{padding-top:15px;background:#fff !important}
.section.alt.cta-section .btn{margin-top:20px}
.center{text-align:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border-radius:20px;padding:28px;box-shadow:0 8px 25px rgba(0,0,0,.08);transition:all 0.4s ease;border:2px solid transparent;animation:cardEntrance 0.6s ease-out forwards;opacity:0;transform:translateY(30px);position:relative;overflow:hidden}
.card:nth-child(1){animation-delay:0.1s}
.card:nth-child(2){animation-delay:0.2s}
.card:nth-child(3){animation-delay:0.3s}
.card:nth-child(4){animation-delay:0.4s}
.card:nth-child(5){animation-delay:0.5s}
.card:nth-child(6){animation-delay:0.6s}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.12);border-color:var(--highlight-light)}
.card:hover::before{opacity:1}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--highlight), var(--pink));opacity:0;transition:opacity 0.3s ease}
.card .icon-container{width:50px;height:50px;margin:0 auto 20px;background:linear-gradient(135deg, var(--highlight-light), var(--pink));border-radius:14px;box-shadow:0 4px 15px rgba(255,142,83,0.3);position:relative}
.card .icon-container::after{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg, var(--highlight), var(--pink));border-radius:16px;z-index:-1;opacity:0;transition:opacity 0.3s ease}
.card:hover .icon-container::after{opacity:0.3}
.card-svg{width:28px;height:28px;filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) drop-shadow(0 2px 4px rgba(0,0,0,0.1))}
.card h3{color:var(--green);margin:0 0 16px;font-size:22px;font-weight:700}
.card p{color:#374151;line-height:1.7;margin:0;font-size:16px}

@keyframes cardEntrance{
  to{opacity:1;transform:translateY(0)}
}

@keyframes iconBounce{
  0%, 100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}

/* Creator Story Section */
.creator-story{background:var(--white)}
.creator-content{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:center}
.creator-text h2{font-size:36px;line-height:1.2;margin:0 0 24px;color:var(--green)}
.creator-story-text{font-size:18px;color:#374151;line-height:1.7;margin:0 0 20px}
.creator-visual{display:flex;justify-content:center;align-items:center}
.founder-photo{width:200px;height:200px;border-radius:16px;overflow:hidden;box-shadow:0 20px 40px rgba(46,89,70,0.15);border:4px solid var(--white);background:linear-gradient(135deg, var(--green) 0%, var(--highlight) 100%);display:flex;align-items:center;justify-content:center;position:relative;transition:transform 0.3s ease}
.founder-photo:hover{transform:scale(1.05)}
.founder-img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 0.3s ease}
.founder-photo:hover .founder-img{transform:scale(1.05)}
.founder-photo::before{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg, var(--green) 0%, var(--highlight) 100%);border-radius:18px;z-index:-1;animation:rotate 10s linear infinite}
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Section Subtitles */
.section-subtitle{font-size:18px;color:var(--muted);text-align:center;margin:0 0 40px;font-weight:500}

/* Coming Soon Section */
.coming-soon{background:linear-gradient(135deg, rgba(46,89,70,0.05) 0%, rgba(255,142,83,0.05) 100%);text-align:center}
.coming-soon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px}
.coming-soon-item{background:#fff;border-radius:20px;padding:28px;box-shadow:0 8px 25px rgba(0,0,0,.08);border:2px solid transparent;transition:all 0.4s ease;position:relative;overflow:hidden;text-align:center}
.coming-soon-item:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.12);border-color:var(--highlight-light)}
.coming-soon-item:hover::before{opacity:1}
.coming-soon-item::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--highlight), var(--pink));opacity:0;transition:opacity 0.3s ease}
.coming-soon-icon{font-size:48px;margin:0 auto 20px;display:block;animation:iconBounce 2s ease-in-out infinite}
.coming-soon-item h3{color:var(--green);margin:0 0 16px;font-size:22px;font-weight:700}
.coming-soon-item p{color:#374151;line-height:1.7;margin:0;font-size:16px}

/* Feedback Section */
.feedback-section{background:linear-gradient(135deg, rgba(255,142,83,0.08) 0%, rgba(255,107,107,0.08) 100%)}
.feedback-text{font-size:20px;color:#374151;max-width:70ch;margin:0 auto 32px;line-height:1.6}
.feedback-features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0}
.feedback-item{text-align:center;padding:24px;background:rgba(255,255,255,0.7);border-radius:16px;backdrop-filter:blur(10px)}
.feedback-item h3{color:var(--green);margin:0 0 12px;font-size:20px;font-weight:700}
.feedback-item p{color:#374151;line-height:1.6;margin:0;font-size:16px}
.feedback-cta{font-size:18px;color:var(--green);margin:32px 0 0;font-weight:600}

/* Beta Notice */
.beta-notice{background:rgba(255,142,83,0.1);border:2px solid var(--highlight-light);border-radius:16px;padding:16px;margin:24px 0;display:inline-block}
.beta-notice p{margin:0;color:var(--green);font-weight:600}

.checklist{list-style:none;padding:0;margin:12px 0 0}
.checklist li{margin:12px 0;padding-left:28px;position:relative;font-size:16px;line-height:1.5;animation:listItemEntrance 0.5s ease-out forwards;opacity:0;transform:translateX(-20px)}
.checklist li:nth-child(1){animation-delay:0.1s}
.checklist li:nth-child(2){animation-delay:0.2s}
.checklist li:nth-child(3){animation-delay:0.3s}
.checklist li:nth-child(4){animation-delay:0.4s}
.checklist li:before{content:'✓';position:absolute;left:0;top:0;color:var(--highlight);font-weight:700;font-size:18px}
.feature-visual{height:220px;border-radius:16px;background:linear-gradient(135deg, rgba(46,89,70,.15), rgba(255,107,107,.15));border:1px solid #d1d5db;position:relative;overflow:hidden}

@keyframes listItemEntrance{
  to{opacity:1;transform:translateY(0)}
}

.floating-icons{position:relative;width:100%;height:100%}
.floating-icon{position:absolute;width:40px;height:40px;filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) drop-shadow(0 4px 8px rgba(0,0,0,0.1))}
.brain-float{top:50%;left:50%;transform:translate(-50%, -50%);animation:float 6s ease-in-out infinite}

@keyframes float{
  0%, 100%{transform:translateY(0px)}
  50%{transform:translateY(-15px)}
}

.page-hero{padding:80px 0;background:linear-gradient(135deg, #fff 0%, rgba(255,142,83,0.05) 100%);text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 25% 25%, rgba(255,142,83,0.08) 0%, transparent 50%),radial-gradient(circle at 75% 75%, rgba(255,107,107,0.08) 0%, transparent 50%);pointer-events:none}
.page-hero h1{font-size:48px;line-height:1.2;margin:0 0 20px;color:var(--green);position:relative;z-index:1}
.page-hero p{font-size:20px;color:#374151;max-width:60ch;margin:0 auto;line-height:1.6;position:relative;z-index:1}
.doc{background:#fff;border-radius:16px;padding:24px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.mt-24{margin-top:24px}

.site-footer{background:#EAF1ED !important;border-top:none;padding:22px 0;margin-top:0;color:var(--green)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer-brand .brand{text-decoration:none}
.footer-brand .brand:hover{opacity:0.9}
.footer-nav{display:flex;gap:16px}
.footer-nav a{color:var(--green) !important;text-decoration:none;font-weight:600;font-size:16px}
.footer-nav a:hover{opacity:0.8}
.footer-copy{color:var(--green) !important;font-weight:500}

.pig-animation-container{display:flex;justify-content:center;align-items:center;margin:5px 0}
.pig-note{font-size:18px;color:var(--muted);margin-top:8px;font-style:italic}

.features-list{display:flex;flex-direction:column;gap:24px;margin-top:40px}
.feature-item{background:#fff;border-radius:20px;padding:28px;box-shadow:0 8px 25px rgba(0,0,0,.08);border:2px solid transparent;transition:all 0.4s ease;position:relative;overflow:hidden}
.feature-item:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.12);border-color:var(--highlight-light)}
.feature-item:hover::before{opacity:1}
.feature-item::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--highlight), var(--pink));opacity:0;transition:opacity 0.3s ease}
.feature-item h3{color:var(--green);margin:0 0 16px;font-size:22px;font-weight:700}
.feature-item p{color:#374151;line-height:1.7;margin:0;font-size:16px}
.feature-icon{width:60px;height:60px;margin:0 0 20px;background:linear-gradient(135deg, var(--highlight-light), var(--pink));border-radius:16px;box-shadow:0 6px 20px rgba(255,142,83,0.3);position:relative;display:flex;align-items:center;justify-content:center}
.feature-icon::after{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg, var(--highlight), var(--pink));border-radius:18px;z-index:-1;opacity:0;transition:opacity 0.3s ease}
.feature-item:hover .feature-icon::after{opacity:0.3}
.feature-svg{width:35px;height:35px;filter:brightness(0) saturate(100%) invert(27%) sepia(51%) hue-rotate(346deg) brightness(104%) contrast(97%) drop-shadow(0 2px 4px rgba(0,0,0,0.1))}

.play-store-cta{text-align:center;margin:24px 0;padding:16px}
.play-store-text{font-size:18px;font-weight:600;color:var(--green);margin:0;text-transform:uppercase;letter-spacing:0.5px}

/* Page-specific hero backgrounds */
.mnemonics-hero {
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.7)), 
              url('./assets/images/learning.jpg') center/cover;
}

.terms-hero {
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.7)), 
              url('./assets/images/terms-of-service.jpg') center/cover;
}

.privacy-hero {
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.7)), 
              url('./assets/images/private.jpg') center/cover;
}

/* Modern Mnemonics Page Styling */
.modern-hero {
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.9)), 
              url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=1600&auto=format&fit=crop') center/cover;
  position: relative;
}

.modern-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(255,142,83,0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255,107,107,0.1) 0%, transparent 50%);
  pointer-events: none;
}

.modern-content {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.content-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  border: 1px solid rgba(46,89,70,0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.content-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--highlight), var(--pink));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.content-card:hover::before {
  opacity: 1;
}

.content-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}

.highlight-card {
  background: linear-gradient(135deg, rgba(255,142,83,0.05) 0%, rgba(255,107,107,0.05) 100%);
  border: 2px solid rgba(255,142,83,0.2);
}

.highlight-card::before {
  opacity: 1;
}

.lead-text {
  font-size: 20px;
  line-height: 1.6;
  color: #374151;
  margin: 0;
}

/* Stats Box */
.stats-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 32px 0;
  padding: 24px;
  background: rgba(255,255,255,0.8);
  border-radius: 16px;
  border: 1px solid rgba(46,89,70,0.1);
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 48px;
  font-weight: 700;
  color: var(--highlight);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-divider {
  font-size: 18px;
  font-weight: 600;
  color: #9ca3af;
  padding: 0 16px;
}

.result-text {
  font-size: 18px;
  color: var(--green);
  font-weight: 600;
  text-align: center;
  margin: 0;
}

/* Research Grid */
.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.research-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: rgba(255,255,255,0.8);
  border-radius: 12px;
  border: 1px solid rgba(46,89,70,0.1);
  transition: all 0.3s ease;
}

.research-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.research-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.research-content h4 {
  margin: 0 0 8px 0;
  color: var(--green);
  font-size: 18px;
}

.research-content p {
  margin: 0;
  color: #6b7280;
  line-height: 1.5;
}

/* Brain Grid */
.brain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.brain-item {
  text-align: center;
  padding: 24px 16px;
  background: rgba(255,255,255,0.8);
  border-radius: 16px;
  border: 1px solid rgba(46,89,70,0.1);
  transition: all 0.3s ease;
}

.brain-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.brain-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.brain-item h4 {
  margin: 0 0 12px 0;
  color: var(--green);
  font-size: 18px;
}

.brain-item p {
  margin: 0;
  color: #6b7280;
  line-height: 1.5;
  font-size: 14px;
}

/* Applications Grid */
.applications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.app-item {
  text-align: center;
  padding: 24px 20px;
  background: rgba(255,255,255,0.8);
  border-radius: 16px;
  border: 1px solid rgba(46,89,70,0.1);
  transition: all 0.3s ease;
}

.app-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.app-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.app-item h4 {
  margin: 0 0 12px 0;
  color: var(--green);
  font-size: 18px;
}

.app-item p {
  margin: 0;
  color: #6b7280;
  line-height: 1.5;
  font-size: 14px;
}

/* Numbers Grid */
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.number-item {
  text-align: center;
  padding: 24px 16px;
  background: rgba(255,255,255,0.9);
  border-radius: 16px;
  border: 2px solid rgba(255,142,83,0.2);
  transition: all 0.3s ease;
}

.number-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(255,142,83,0.2);
}

.number-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--highlight);
  line-height: 1;
  margin-bottom: 8px;
}

.number-description {
  font-size: 14px;
  color: #6b7280;
  font-weight: 600;
  line-height: 1.4;
}

/* Limitations Grid */
.limitations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.limitation-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: rgba(255,255,255,0.8);
  border-radius: 12px;
  border: 1px solid rgba(239,68,68,0.2);
  transition: all 0.3s ease;
}

.limitation-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(239,68,68,0.1);
}

.limitation-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.limitation-item h4 {
  margin: 0 0 8px 0;
  color: #dc2626;
  font-size: 16px;
}

.limitation-item p {
  margin: 0;
  color: #6b7280;
  line-height: 1.5;
  font-size: 14px;
}

/* Conclusion Card */
.conclusion-card {
  background: linear-gradient(135deg, rgba(46,89,70,0.05) 0%, rgba(255,142,83,0.05) 100%);
  border: 2px solid rgba(46,89,70,0.2);
}

.conclusion-card::before {
  background: linear-gradient(90deg, var(--green), var(--highlight));
}

/* Sources Card */
.sources-card {
  background: linear-gradient(135deg, rgba(107,114,128,0.05) 0%, rgba(156,163,175,0.05) 100%);
  border: 2px solid rgba(107,114,128,0.2);
}

.sources-card::before {
  background: linear-gradient(90deg, #6b7280, #9ca3af);
}

.sources-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.source-item {
  padding: 16px;
  background: rgba(255,255,255,0.8);
  border-radius: 8px;
  border: 1px solid rgba(107,114,128,0.1);
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
}

/* Responsive Design */
@media (max-width: 768px) {
  .modern-content {
    gap: 24px;
  }
  
  .content-card {
    padding: 24px;
    border-radius: 16px;
  }
  
  .stats-box {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }
  
  .stat-number {
    font-size: 36px;
  }
  
  .research-grid,
  .brain-grid,
  .applications-grid,
  .numbers-grid,
  .limitations-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .brain-item,
  .app-item,
  .number-item {
    padding: 20px 16px;
  }
  
  .brain-icon,
  .app-icon {
    font-size: 36px;
  }
  
  .number-value {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .content-card {
    padding: 20px;
  }
  
  .lead-text {
    font-size: 18px;
  }
  
  .stat-number {
    font-size: 32px;
  }
  
  .number-value {
    font-size: 24px;
  }
}

/* Original responsive styles that were replaced */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr;gap:20px}
  .coming-soon-grid{grid-template-columns:1fr;gap:20px}
  .feedback-features{grid-template-columns:1fr;gap:20px}
  .creator-content{grid-template-columns:1fr;gap:30px;text-align:center}
  .hero-icons{gap:15px}
  .icon-container{width:50px;height:50px}
  .hero-svg{width:28px;height:28px;filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) drop-shadow(0 2px 4px rgba(0,0,0,0.1))}
  .card{padding:24px}
  .card .icon-container{width:45px;height:45px}
  .card-svg{width:24px;height:24px;filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) drop-shadow(0 2px 4px rgba(0,0,0,0.1))}
}
@media (max-width:600px){
  .nav{display:none}
  .nav-toggle{display:block}
  .grid-3{grid-template-columns:1fr;gap:18px}
  .coming-soon-grid{grid-template-columns:1fr;gap:18px}
  .feedback-features{grid-template-columns:1fr;gap:18px}
  .hero-icons{gap:12px}
  .icon-container{width:45px;height:45px}
  .hero-svg{width:24px;height:24px;filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) drop-shadow(0 2px 4px rgba(0,0,0,0.1))}
  .floating-icon{width:35px;height:35px;filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) drop-shadow(0 4px 8px rgba(0,0,0,0.1))}
  .page-hero h1{font-size:36px}
  .page-hero p{font-size:18px}
  .card{padding:20px}
  .coming-soon-item{padding:20px}
  .feedback-item{padding:20px}
  .creator-text h2{font-size:28px}
  .creator-story-text{font-size:16px}
  .founder-photo{width:150px;height:150px}
}

/* Documentation Styles */
.doc{
  max-width: 800px;
  margin: 0 auto;
}

.doc-updated{
  text-align: center;
  color: #666;
  font-style: italic;
  margin-bottom: 2rem;
  font-size: 14px;
}

.doc-section{
  background: var(--white);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
}

.doc-section h2{
  color: var(--green);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}

.doc-section h3{
  color: var(--green);
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0 12px 0;
}

.doc-section p{
  line-height: 1.6;
  margin: 0 0 12px 0;
  color: #374151;
}

.doc-section ul{
  margin: 0 0 16px 0;
  padding-left: 20px;
}

.doc-section li{
  line-height: 1.6;
  margin-bottom: 8px;
  color: #374151;
}

.doc-section strong{
  color: var(--green);
  font-weight: 600;
}

.doc-section a{
  color: var(--highlight);
  text-decoration: none;
  font-weight: 600;
}

.doc-section a:hover{
  text-decoration: underline;
}

@media (max-width: 768px){
  .doc-section{
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .doc-section h2{
    font-size: 18px;
  }
  
  .doc-section h3{
    font-size: 15px;
  }
}