/* AI for Families Page Styles */

/* Hero Section */
.families-hero{
  position:relative;
  padding:calc(var(--spacing-xl) * 2.5) 0 calc(var(--spacing-xl) * 2);
  background:linear-gradient(135deg,rgba(199,154,58,0.03) 0%,rgba(1,37,29,0.05) 100%);
  overflow:hidden;
}

.families-hero::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle at 20% 30%,rgba(199,154,58,0.08) 0%,transparent 50%);
  pointer-events:none;
}

.families-hero .container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(var(--spacing-xl) * 2);
  align-items:center;
}

.families-hero .hero-content{
  position:relative;
  z-index:1;
}

.families-hero h1{
  font-size:3.5rem;
  font-weight:800;
  color:#01251d;
  line-height:1.1;
  margin-bottom:var(--spacing-lg);
}

.families-hero .hero-subtitle{
  font-size:1.25rem;
  color:#2c4a42;
  line-height:1.7;
  margin-bottom:calc(var(--spacing-xl) * 1.5);
  max-width:90%;
  font-weight:500;
}

.families-hero .cta-button{
  display:inline-flex;
  align-items:center;
  gap:var(--spacing-sm);
  padding:1.25rem 2.75rem;
  background:linear-gradient(135deg,#c79a3a 0%,#b88a2a 100%);
  color:#fff;
  text-decoration:none;
  border-radius:var(--radius-lg);
  font-weight:700;
  font-size:1.125rem;
  box-shadow:0 10px 30px rgba(199,154,58,0.45),0 4px 12px rgba(199,154,58,0.3);
  transition:all 0.3s ease;
  border:2px solid rgba(255,255,255,0.2);
}

.families-hero .cta-button:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 40px rgba(199,154,58,0.55),0 6px 16px rgba(199,154,58,0.35);
  background:linear-gradient(135deg,#d4a84a 0%,#c79a3a 100%);
}

.families-hero .cta-button svg{
  transition:transform 0.3s ease;
}

.families-hero .cta-button:hover svg{
  transform:translateY(3px);
}

.families-hero .hero-illustration{
  display:flex;
  justify-content:center;
  align-items:center;
}

.families-hero .hero-illustration img{
  width:100%;
  height:450px;
  object-fit:cover;
  border-radius:var(--radius-lg);
  box-shadow:0 20px 60px rgba(199,154,58,0.25),0 8px 24px rgba(0,0,0,0.15);
  border:3px solid rgba(255,255,255,0.3);
}

.families-hero .illustration-card::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:50%;
  padding:2px;
  background:linear-gradient(135deg,var(--primary),transparent,var(--primary));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0.4;
  animation:rotate 4s linear infinite;
}

@keyframes rotate{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

/* Parent Education Section */
.parent-education{
  padding:calc(var(--spacing-xl) * 2) 0;
}

.parent-education h2{
  text-align:center;
  font-size:2.75rem;
  color:var(--text-primary);
  margin-bottom:var(--spacing-md);
}

.parent-education .section-intro{
  text-align:center;
  font-size:1.25rem;
  color:var(--text-secondary);
  max-width:700px;
  margin:0 auto calc(var(--spacing-xl) * 1.5);
}

.education-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:calc(var(--spacing-xl) * 1.25);
}

.education-card{
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(20px);
  border-radius:var(--radius-lg);
  padding:calc(var(--spacing-xl) * 1.25);
  border:1px solid rgba(199,154,58,0.15);
  box-shadow:0 8px 32px rgba(0,0,0,0.08);
  transition:all 0.4s ease;
  position:relative;
  overflow:hidden;
}

.education-card::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:var(--radius-lg);
  padding:2px;
  background:linear-gradient(135deg,var(--primary),transparent);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity 0.4s ease;
}

.education-card::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:200px;
  height:200px;
  background:radial-gradient(circle,rgba(199,154,58,0.15) 0%,transparent 70%);
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity 0.4s ease;
}

.education-card:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 48px rgba(199,154,58,0.2),0 8px 24px rgba(0,0,0,0.1);
  border-color:rgba(199,154,58,0.3);
}

.education-card:hover::before,
.education-card:hover::after{
  opacity:1;
}

.education-card .card-icon{
  width:80px;
  height:80px;
  background:linear-gradient(135deg,rgba(199,154,58,0.15),rgba(199,154,58,0.05));
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
  margin-bottom:var(--spacing-lg);
  position:relative;
  z-index:1;
}

.education-card h3{
  font-size:1.5rem;
  color:var(--text-primary);
  margin-bottom:var(--spacing-md);
  position:relative;
  z-index:1;
}

.education-card p{
  color:var(--text-secondary);
  line-height:1.7;
  margin-bottom:var(--spacing-lg);
  position:relative;
  z-index:1;
}

.education-card .benefit-list{
  list-style:none;
  padding:0;
  margin:0;
  position:relative;
  z-index:1;
}

.education-card .benefit-list li{
  padding:var(--spacing-xs) 0;
  padding-left:calc(var(--spacing-md) + 0.25rem);
  color:var(--text-secondary);
  position:relative;
  font-size:0.95rem;
}

.education-card .benefit-list li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--primary);
  font-weight:700;
}

/* Safe AI for Kids Section */
.safe-ai-kids{
  padding:calc(var(--spacing-xl) * 2) 0;
  background:linear-gradient(180deg,rgba(199,154,58,0.02) 0%,transparent 100%);
}

.safe-ai-kids h2{
  text-align:center;
  font-size:2.75rem;
  color:var(--text-primary);
  margin-bottom:var(--spacing-md);
}

.safe-ai-kids .section-intro{
  text-align:center;
  font-size:1.25rem;
  color:var(--text-secondary);
  max-width:750px;
  margin:0 auto calc(var(--spacing-xl) * 1.5);
}

.age-groups{
  display:grid;
  gap:calc(var(--spacing-xl) * 1.5);
}

.age-group{
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(20px);
  border-radius:var(--radius-lg);
  padding:calc(var(--spacing-xl) * 1.5);
  border:1px solid rgba(199,154,58,0.15);
  box-shadow:0 8px 32px rgba(0,0,0,0.08);
  position:relative;
  overflow:hidden;
}

.age-group::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,var(--primary),#d4a84a);
}

.age-badge{
  display:inline-block;
  padding:0.5rem 1.25rem;
  background:linear-gradient(135deg,#c79a3a,#b88a2a);
  color:#fff;
  border-radius:var(--radius);
  font-weight:700;
  font-size:0.875rem;
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:var(--spacing-md);
  box-shadow:0 4px 12px rgba(199,154,58,0.4);
}

.age-group h3{
  font-size:1.75rem;
  color:#01251d;
  font-weight:600;
  margin-bottom:calc(var(--spacing-lg) * 1.25);
}

.activity-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--spacing-lg);
}

.activity-item{
  background:rgba(255,255,255,0.7);
  padding:var(--spacing-lg);
  border-radius:var(--radius);
  border:1px solid rgba(199,154,58,0.1);
  transition:all 0.3s ease;
}

.activity-item:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(199,154,58,0.15);
  border-color:rgba(199,154,58,0.3);
}

.activity-item strong{
  display:block;
  color:var(--text-primary);
  font-size:1.125rem;
  margin-bottom:var(--spacing-xs);
}

.activity-item p{
  color:var(--text-secondary);
  font-size:0.95rem;
  margin:0;
}

/* Digital Wellness Section */
.digital-wellness{
  background:linear-gradient(135deg,rgba(1,37,29,0.03) 0%,rgba(199,154,58,0.03) 100%);
}

.digital-wellness h2{
  text-align:center;
  font-size:2.75rem;
  color:var(--text-primary);
  margin-bottom:var(--spacing-md);
}

.digital-wellness .section-intro{
  text-align:center;
  font-size:1.25rem;
  color:var(--text-secondary);
  max-width:700px;
  margin:0 auto calc(var(--spacing-xl) * 1.5);
}

.wellness-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:calc(var(--spacing-xl) * 1.25);
}

.wellness-card{
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(20px);
  border-radius:var(--radius-lg);
  padding:calc(var(--spacing-xl) * 1.25);
  border:1px solid rgba(199,154,58,0.15);
  box-shadow:0 8px 32px rgba(0,0,0,0.08);
  transition:all 0.4s ease;
  position:relative;
  overflow:hidden;
}

.wellness-card::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:150px;
  height:150px;
  background:radial-gradient(circle,rgba(199,154,58,0.1) 0%,transparent 70%);
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity 0.4s ease;
}

.wellness-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 48px rgba(199,154,58,0.2);
  border-color:rgba(199,154,58,0.3);
}

.wellness-card:hover::after{
  opacity:1;
}

.wellness-card h3{
  font-size:1.5rem;
  color:var(--text-primary);
  margin-bottom:var(--spacing-md);
  position:relative;
  z-index:1;
}

.wellness-card > p{
  color:var(--text-secondary);
  line-height:1.7;
  margin-bottom:var(--spacing-lg);
  position:relative;
  z-index:1;
}

.wellness-card .tip-box{
  background:rgba(199,154,58,0.08);
  padding:var(--spacing-md);
  border-radius:var(--radius);
  border-left:4px solid var(--primary);
  position:relative;
  z-index:1;
}

.wellness-card .tip-box strong{
  color:var(--primary);
  display:block;
  margin-bottom:var(--spacing-xs);
  font-weight:600;
}

/* Case Studies Section */
.case-studies{
  padding:calc(var(--spacing-xl) * 2) 0;
}

.case-studies h2{
  text-align:center;
  font-size:2.75rem;
  color:var(--text-primary);
  margin-bottom:var(--spacing-md);
}

.case-studies .section-intro{
  text-align:center;
  font-size:1.25rem;
  color:var(--text-secondary);
  max-width:750px;
  margin:0 auto calc(var(--spacing-xl) * 1.5);
}

.case-study-grid{
  display:grid;
  gap:calc(var(--spacing-xl) * 1.25);
}

.case-study{
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(20px);
  border-radius:var(--radius-lg);
  padding:calc(var(--spacing-xl) * 1.5);
  border:1px solid rgba(199,154,58,0.15);
  box-shadow:0 8px 32px rgba(0,0,0,0.08);
  transition:all 0.4s ease;
  position:relative;
  overflow:hidden;
}

.case-study::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:5px;
  height:100%;
  background:linear-gradient(180deg,var(--primary),#d4a84a);
}

.case-study:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(199,154,58,0.15);
  border-color:rgba(199,154,58,0.3);
}

.case-header{
  margin-bottom:calc(var(--spacing-lg) * 1.25);
  padding-left:var(--spacing-md);
}

.case-header h3{
  font-size:1.75rem;
  color:var(--text-primary);
  margin-bottom:var(--spacing-xs);
}

.family-meta{
  color:var(--text-muted);
  font-size:0.95rem;
  font-style:italic;
}

.case-content{
  padding-left:var(--spacing-md);
}

.case-content p{
  color:var(--text-secondary);
  line-height:1.8;
  margin-bottom:var(--spacing-md);
}

.case-content strong{
  color:var(--text-primary);
  font-weight:600;
}

.case-content .challenge strong{
  color:#d97706;
}

.case-content .solution strong{
  color:#0891b2;
}

.case-content .result strong{
  color:#059669;
}

/* Free Resources Section */
.free-resources{
  padding:calc(var(--spacing-xl) * 2) 0;
  background:linear-gradient(180deg,rgba(199,154,58,0.03) 0%,rgba(1,37,29,0.02) 100%);
}

.free-resources h2{
  text-align:center;
  font-size:2.75rem;
  color:var(--text-primary);
  margin-bottom:var(--spacing-md);
}

.free-resources .section-intro{
  text-align:center;
  font-size:1.25rem;
  color:var(--text-secondary);
  max-width:750px;
  margin:0 auto calc(var(--spacing-xl) * 1.5);
}

.resource-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:calc(var(--spacing-xl) * 1.25);
  margin-bottom:calc(var(--spacing-xl) * 2);
}

.resource-download{
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(20px);
  border-radius:var(--radius-lg);
  padding:calc(var(--spacing-xl) * 1.25);
  border:1px solid rgba(199,154,58,0.15);
  box-shadow:0 8px 32px rgba(0,0,0,0.08);
  text-align:center;
  transition:all 0.4s ease;
  position:relative;
  overflow:hidden;
}

.resource-download::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:180px;
  height:180px;
  background:radial-gradient(circle,rgba(199,154,58,0.12) 0%,transparent 70%);
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity 0.4s ease;
}

.resource-download:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 48px rgba(199,154,58,0.2);
  border-color:rgba(199,154,58,0.3);
}

.resource-download:hover::after{
  opacity:1;
}

.download-icon{
  width:96px;
  height:96px;
  margin:0 auto var(--spacing-lg);
  background:linear-gradient(135deg,rgba(199,154,58,0.15),rgba(199,154,58,0.05));
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
  position:relative;
  z-index:1;
}

.resource-download h3{
  font-size:1.375rem;
  color:var(--text-primary);
  margin-bottom:var(--spacing-md);
  position:relative;
  z-index:1;
}

.resource-download p{
  color:var(--text-secondary);
  line-height:1.7;
  margin-bottom:calc(var(--spacing-lg) * 1.25);
  position:relative;
  z-index:1;
}

.download-btn{
  display:inline-block;
  padding:1rem 2.25rem;
  background:linear-gradient(135deg,#c79a3a 0%,#b88a2a 100%);
  color:#fff;
  border:2px solid rgba(255,255,255,0.2);
  border-radius:var(--radius);
  font-weight:700;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow:0 8px 24px rgba(199,154,58,0.4);
  position:relative;
  z-index:1;
}

.download-btn:hover{
  transform:scale(1.05) translateY(-2px);
  box-shadow:0 12px 32px rgba(199,154,58,0.5);
  background:linear-gradient(135deg,#d4a84a 0%,#c79a3a 100%);
}

/* Newsletter CTA */
.newsletter-cta{
  max-width:700px;
  margin:0 auto;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(20px);
  border-radius:var(--radius-lg);
  padding:calc(var(--spacing-xl) * 1.5);
  border:1px solid rgba(199,154,58,0.2);
  box-shadow:0 12px 40px rgba(199,154,58,0.15);
  text-align:center;
}

.newsletter-cta h3{
  font-size:1.875rem;
  color:var(--text-primary);
  margin-bottom:var(--spacing-md);
}

.newsletter-cta p{
  color:var(--text-secondary);
  line-height:1.7;
  margin-bottom:calc(var(--spacing-lg) * 1.25);
}

.newsletter-form{
  display:flex;
  gap:var(--spacing-md);
  max-width:500px;
  margin:0 auto;
}

.newsletter-form input{
  flex:1;
  padding:1rem 1.25rem;
  border:2px solid rgba(199,154,58,0.2);
  border-radius:var(--radius);
  background:rgba(255,255,255,0.8);
  font-size:1rem;
  transition:all 0.3s ease;
}

.newsletter-form input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(199,154,58,0.1);
}

.newsletter-form button{
  padding:1rem 2.25rem;
  background:linear-gradient(135deg,#c79a3a 0%,#b88a2a 100%);
  color:#fff;
  border:2px solid rgba(255,255,255,0.2);
  border-radius:var(--radius);
  font-weight:700;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow:0 8px 24px rgba(199,154,58,0.4);
}

.newsletter-form button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(199,154,58,0.5);
  background:linear-gradient(135deg,#d4a84a 0%,#c79a3a 100%);
}