From d1939c4a55a07eaa531610a80f1369927c13413d Mon Sep 17 00:00:00 2001
From: jaikaran109 <jaik05581@gmail.com>
Date: Fri, 22 May 2026 15:47:29 +0530
Subject: [PATCH 1/4] Update About.js

---
 client/src/pages/About.js | 486 ++++++++++++++++++++++++++++----------
 1 file changed, 358 insertions(+), 128 deletions(-)

diff --git a/client/src/pages/About.js b/client/src/pages/About.js
index 96891c8..d2d0735 100644
--- a/client/src/pages/About.js
+++ b/client/src/pages/About.js
@@ -1,115 +1,263 @@
-import React, { useState, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import React, { useEffect, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
 import { Link } from 'react-router-dom';
-import { FaArrowUp } from "react-icons/fa";
+import { FaArrowUp } from 'react-icons/fa';
 import './About.css';
 import './ScrollToTop.css';
+
+const sectionViewport = { once: true, margin: '-100px' };
+
+const sectionIntroStyle = {
+  maxWidth: '42rem',
+  margin: '-1.5rem auto 2.5rem',
+  textAlign: 'center',
+  color: 'var(--about-muted)',
+  lineHeight: 1.75,
+  fontSize: 'clamp(0.96rem, 2vw, 1.04rem)',
+};
+
+const missionStats = [
+  { value: '50+', label: 'Universities' },
+  { value: '1000+', label: 'Resources' },
+];
+
+const storyItems = [
+  {
+    icon: '\u{1F4A1}',
+    title: 'The Problem',
+    text: 'Students often lose valuable time searching across scattered sources for reliable syllabi, past papers, and exam insights.',
+  },
+  {
+    icon: '\u{1F680}',
+    title: 'The Solution',
+    text: 'StudyMatePlus brings those essentials together in one trusted space, making preparation simpler, faster, and more collaborative.',
+  },
+  {
+    icon: '\u{1F31F}',
+    title: 'The Vision',
+    text: 'We are building a future where every student can access quality resources, shared guidance, and support without barriers.',
+  },
+];
+
+const featureItems = [
+  {
+    icon: '\u{1F4DA}',
+    title: 'Comprehensive Resource Library',
+    description:
+      'Study materials are organized by university and department, so students can find what they need quickly and study with less friction.',
+    highlights: [
+      'Department-wise organization',
+      'Searchable content database',
+      'Regular updates and verification',
+      'Multiple format support',
+    ],
+  },
+  {
+    icon: '\u{1F4DD}',
+    title: 'Previous Year Papers Archive',
+    description:
+      'Authentic past papers help students understand exam patterns, manage difficulty, and prepare with more confidence.',
+    highlights: [
+      'Multi-year paper collection',
+      'Solution guides available',
+      'Difficulty level indicators',
+      'Topic-wise categorization',
+    ],
+  },
+  {
+    icon: '\u{1F4AC}',
+    title: 'Real Student Feedback',
+    description:
+      'Students can learn from firsthand exam experiences, practical preparation advice, and honest reflections from their peers.',
+    highlights: [
+      'Authentic student reviews',
+      'Exam difficulty ratings',
+      'Important topic highlights',
+      'Preparation time estimates',
+    ],
+  },
+];
+
+const teamStats = [
+  { value: '15+', label: 'Contributors' },
+  { value: '24/7', label: 'Community Support' },
+];
+
+const valueItems = [
+  {
+    icon: '\u{1F513}',
+    title: 'Open Source',
+    text: 'Transparency and collaboration guide how we build and improve the platform.',
+  },
+  {
+    icon: '\u{1F393}',
+    title: 'Quality Education',
+    text: 'We focus on verified, useful, and practical resources that genuinely help students prepare.',
+  },
+  {
+    icon: '\u267F',
+    title: 'Accessibility',
+    text: "Educational support should be easier to reach, no matter a student's location or background.",
+  },
+  {
+    icon: '\u{1F4AA}',
+    title: 'Student Empowerment',
+    text: 'We want students to feel equipped, informed, and confident in their academic journey.',
+  },
+  {
+    icon: '\u{1F331}',
+    title: 'Continuous Growth',
+    text: 'The platform keeps evolving through feedback, contribution, and changing student needs.',
+  },
+  {
+    icon: '\u{1F91D}',
+    title: 'Community',
+    text: 'We believe strong student communities make learning more supportive, practical, and motivating.',
+  },
+];
+
 const About = () => {
-  // Animation Variants from Home.js
   const fadeInUp = {
     hidden: { opacity: 0, y: 40 },
-    visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.6, ease: 'easeOut' },
+    },
   };
 
   const staggerChildren = {
     hidden: { opacity: 0 },
-    visible: { opacity: 1, transition: { staggerChildren: 0.2, delayChildren: 0.1 } },
+    visible: {
+      opacity: 1,
+      transition: { staggerChildren: 0.2, delayChildren: 0.1 },
+    },
   };
 
   const scaleIn = {
     hidden: { opacity: 0, scale: 0.9 },
-    visible: { opacity: 1, scale: 1, transition: { duration: 0.5, ease: "easeOut" } },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: { duration: 0.5, ease: 'easeOut' },
+    },
   };
-  
+
   const slideInLeft = {
     hidden: { opacity: 0, x: -50 },
-    visible: { opacity: 1, x: 0, transition: { duration: 0.6, ease: "easeOut" } }
+    visible: {
+      opacity: 1,
+      x: 0,
+      transition: { duration: 0.6, ease: 'easeOut' },
+    },
   };
 
   const slideInRight = {
     hidden: { opacity: 0, x: 50 },
-    visible: { opacity: 1, x: 0, transition: { duration: 0.6, ease: "easeOut" } }
+    visible: {
+      opacity: 1,
+      x: 0,
+      transition: { duration: 0.6, ease: 'easeOut' },
+    },
   };
 
+  const storyHover = { y: -8, scale: 1.03 };
+  const featureHover = { y: -8, scale: 1.02 };
+  const valueHover = { y: -8, scale: 1.05 };
+  const buttonHover = { scale: 1.05 };
+  const buttonTap = { scale: 0.95 };
+
   const [showScroll, setShowScroll] = useState(false);
 
   useEffect(() => {
-    const checkScrollTop = () => {
-      if (!showScroll && window.scrollY > 300) {
-        setShowScroll(true);
-      } else if (showScroll && window.scrollY <= 300) {
-        setShowScroll(false);
-      }
+    const handleScroll = () => {
+      setShowScroll(window.scrollY > 300);
     };
 
-    window.addEventListener('scroll', checkScrollTop);
+    handleScroll();
+    window.addEventListener('scroll', handleScroll);
+
     return () => {
-      window.removeEventListener('scroll', checkScrollTop);
+      window.removeEventListener('scroll', handleScroll);
     };
-  }, [showScroll]);
+  }, []);
 
   const scrollToTop = () => {
     window.scrollTo({
       top: 0,
-      behavior: 'smooth'
+      behavior: 'smooth',
     });
   };
 
   return (
-    <div className="about">
+    <main className="about" aria-labelledby="about-page-title">
       {/* Hero Section */}
-      <motion.section 
+      <motion.section
         className="about-hero"
         initial="hidden"
         animate="visible"
         variants={staggerChildren}
+        aria-labelledby="about-page-title"
       >
         <div className="container">
-          <motion.div className="about-hero-content" variants={fadeInUp}>
-            <motion.h1 variants={fadeInUp}>About StudyMatePlus</motion.h1>
+          <motion.header className="about-hero-content" variants={fadeInUp}>
+            <motion.h1 id="about-page-title" variants={fadeInUp}>
+              About StudyMatePlus
+            </motion.h1>
             <motion.p className="hero-subtitle" variants={fadeInUp}>
-              Empowering students with comprehensive academic resources and fostering 
-              a collaborative learning environment for exam preparation success.
+              Helping students prepare smarter with trusted study resources,
+              shared exam insights, and a supportive learning community.
             </motion.p>
-          </motion.div>
+          </motion.header>
         </div>
       </motion.section>
 
       {/* Mission Section */}
-      <motion.section 
+      <motion.section
         className="mission"
         initial="hidden"
         whileInView="visible"
-        viewport={{ once: true, margin: "-100px" }}
+        viewport={sectionViewport}
         variants={staggerChildren}
+        aria-labelledby="mission-heading"
       >
         <div className="container">
           <div className="mission-content">
             <motion.div className="mission-text" variants={slideInLeft}>
-              <h2>Our Mission</h2>
+              <h2 id="mission-heading">Our Mission</h2>
               <p>
-                At StudyMatePlus, we believe that every student deserves access to quality 
-                educational resources. Our mission is to democratize exam preparation by 
-                creating an open-source platform that brings together syllabus materials, 
-                previous year questions, exam feedback, and peer-to-peer learning opportunities.
+                StudyMatePlus makes exam preparation more open, organized, and
+                accessible. We bring syllabus guides, previous year papers,
+                feedback, and peer learning into one reliable place.
               </p>
               <p>
-                We're committed to breaking down barriers in education and ensuring that 
-                geographical limitations or resource constraints don't hinder a student's 
-                academic success.
+                We want students to spend less time searching for materials and
+                more time learning with clarity, confidence, and community
+                support.
               </p>
             </motion.div>
+
             <motion.div className="mission-visual" variants={slideInRight}>
-              <div className="mission-icon">🎯</div>
-              <motion.div className="mission-stats" variants={staggerChildren}>
-                <motion.div className="mini-stat" variants={scaleIn}>
-                  <span className="stat-num">50+</span>
-                  <span className="stat-text">Universities</span>
-                </motion.div>
-                <motion.div className="mini-stat" variants={scaleIn}>
-                  <span className="stat-num">1000+</span>
-                  <span className="stat-text">Resources</span>
-                </motion.div>
+              <div className="mission-icon" aria-hidden="true">
+                {'\u{1F3AF}'}
+              </div>
+              <motion.div
+                className="mission-stats"
+                variants={staggerChildren}
+                role="list"
+                aria-label="StudyMatePlus reach"
+              >
+                {missionStats.map((stat) => (
+                  <motion.div
+                    key={stat.label}
+                    className="mini-stat"
+                    variants={scaleIn}
+                    role="listitem"
+                  >
+                    <span className="stat-num">{stat.value}</span>
+                    <span className="stat-text">{stat.label}</span>
+                  </motion.div>
+                ))}
               </motion.div>
             </motion.div>
           </div>
@@ -117,141 +265,221 @@ const About = () => {
       </motion.section>
 
       {/* Story Section */}
-      <motion.section 
+      <motion.section
         className="story"
         initial="hidden"
         whileInView="visible"
-        viewport={{ once: true, margin: "-100px" }}
+        viewport={sectionViewport}
         variants={staggerChildren}
+        aria-labelledby="story-heading"
+        aria-describedby="story-intro"
       >
         <div className="container">
-          <motion.h2 variants={fadeInUp}>Our Story</motion.h2>
+          <header>
+            <motion.h2 id="story-heading" variants={fadeInUp}>
+              Our Story
+            </motion.h2>
+            <motion.p id="story-intro" variants={fadeInUp} style={sectionIntroStyle}>
+              StudyMatePlus started with a simple goal: make important academic
+              resources easier to find, trust, and share.
+            </motion.p>
+          </header>
+
           <motion.div className="story-content" variants={staggerChildren}>
-            <motion.div className="story-card" variants={scaleIn} whileHover={{ y: -8, scale: 1.03 }}>
-              <div className="story-icon">💡</div>
-              <h3>The Problem</h3>
-              <p>
-                Students often struggle to find authentic academic materials scattered across 
-                different sources. Critical resources like syllabus PDFs, previous year papers, 
-                and exam insights are either unavailable or difficult to access when needed most.
-              </p>
-            </motion.div>
-            <motion.div className="story-card" variants={scaleIn} whileHover={{ y: -8, scale: 1.03 }}>
-              <div className="story-icon">🚀</div>
-              <h3>The Solution</h3>
-              <p>
-                StudyMatePlus was born from the idea of creating a centralized, reliable platform 
-                where students can access all their academic needs. We've built a community-driven 
-                ecosystem that grows stronger with each contribution.
-              </p>
-            </motion.div>
-            <motion.div className="story-card" variants={scaleIn} whileHover={{ y: -8, scale: 1.03 }}>
-              <div className="story-icon">🌟</div>
-              <h3>The Vision</h3>
-              <p>
-                We envision a future where every student, regardless of their background, has 
-                equal access to quality educational resources and mentorship opportunities. 
-                Our open-source approach ensures transparency and continuous improvement.
-              </p>
-            </motion.div>
+            {storyItems.map((item) => (
+              <motion.article
+                key={item.title}
+                className="story-card"
+                variants={scaleIn}
+                whileHover={storyHover}
+              >
+                <div className="story-icon" aria-hidden="true">
+                  {item.icon}
+                </div>
+                <h3>{item.title}</h3>
+                <p>{item.text}</p>
+              </motion.article>
+            ))}
           </motion.div>
         </div>
       </motion.section>
 
       {/* Features Deep Dive */}
-      <motion.section 
+      <motion.section
         className="features-deep"
         initial="hidden"
         whileInView="visible"
-        viewport={{ once: true, margin: "-100px" }}
+        viewport={sectionViewport}
         variants={staggerChildren}
+        aria-labelledby="features-heading"
+        aria-describedby="features-intro"
       >
         <div className="container">
-          <motion.h2 variants={fadeInUp}>What Makes Us Different</motion.h2>
+          <header>
+            <motion.h2 id="features-heading" variants={fadeInUp}>
+              What Makes Us Different
+            </motion.h2>
+            <motion.p
+              id="features-intro"
+              variants={fadeInUp}
+              style={sectionIntroStyle}
+            >
+              Everything we build is designed to reduce prep time, improve
+              clarity, and help students study with more confidence.
+            </motion.p>
+          </header>
+
           <motion.div className="features-deep-grid" variants={staggerChildren}>
-            <motion.div className="feature-deep" variants={fadeInUp} whileHover={{ y: -8, scale: 1.02 }}>
-              <div className="feature-deep-header"><div className="feature-deep-icon">📚</div><h3>Comprehensive Resource Library</h3></div>
-              <p>Our platform hosts an extensive collection of study materials organized by university and department. From detailed syllabi to comprehensive notes, we ensure students have everything they need in one place.</p>
-              <ul><li>Department-wise organization</li><li>Searchable content database</li><li>Regular updates and verification</li><li>Multiple format support</li></ul>
-            </motion.div>
-            <motion.div className="feature-deep" variants={fadeInUp} whileHover={{ y: -8, scale: 1.02 }}>
-              <div className="feature-deep-header"><div className="feature-deep-icon">📝</div><h3>Previous Year Papers Archive</h3></div>
-              <p>Access to authentic previous year question papers is crucial for exam preparation. Our curated collection spans multiple years and universities, giving students the practice they need to excel.</p>
-              <ul><li>Multi-year paper collection</li><li>Solution guides available</li><li>Difficulty level indicators</li><li>Topic-wise categorization</li></ul>
-            </motion.div>
-            <motion.div className="feature-deep" variants={fadeInUp} whileHover={{ y: -8, scale: 1.02 }}>
-              <div className="feature-deep-header"><div className="feature-deep-icon">💬</div><h3>Real Student Feedback</h3></div>
-              <p>Learn from the experiences of students who have already taken the exams. Our feedback system provides insights into exam patterns, difficulty levels, and preparation strategies.</p>
-              <ul><li>Authentic student reviews</li><li>Exam difficulty ratings</li><li>Important topic highlights</li><li>Preparation time estimates</li></ul>
-            </motion.div>
+            {featureItems.map((feature) => (
+              <motion.article
+                key={feature.title}
+                className="feature-deep"
+                variants={fadeInUp}
+                whileHover={featureHover}
+              >
+                <div className="feature-deep-header">
+                  <div className="feature-deep-icon" aria-hidden="true">
+                    {feature.icon}
+                  </div>
+                  <h3>{feature.title}</h3>
+                </div>
+                <p>{feature.description}</p>
+                <ul>
+                  {feature.highlights.map((highlight) => (
+                    <li key={highlight}>{highlight}</li>
+                  ))}
+                </ul>
+              </motion.article>
+            ))}
           </motion.div>
         </div>
       </motion.section>
 
       {/* Team Section */}
-      <motion.section 
+      <motion.section
         className="team"
         initial="hidden"
         whileInView="visible"
-        viewport={{ once: true, margin: "-100px" }}
+        viewport={sectionViewport}
         variants={staggerChildren}
+        aria-labelledby="team-heading"
+        aria-describedby="team-intro"
       >
         <div className="container">
-          <motion.h2 variants={fadeInUp}>Built by Students, for Students</motion.h2>
           <motion.div className="team-content" variants={fadeInUp}>
-            <p className="team-description">
-              StudyMatePlus is developed and maintained by a passionate team of students and 
-              recent graduates who understand the challenges of exam preparation. Our diverse 
-              team brings together expertise in technology, education, and user experience 
-              to create the best possible platform for academic success.
-            </p>
-            <motion.div className="team-stats" variants={staggerChildren}>
-              <motion.div className="team-stat" variants={scaleIn}><span className="team-stat-number">15+</span><span className="team-stat-label">Contributors</span></motion.div>
-              <motion.div className="team-stat" variants={scaleIn}><span className="team-stat-number">24/7</span><span className="team-stat-label">Community Support</span></motion.div>
+            <header>
+              <motion.h2 id="team-heading" variants={fadeInUp}>
+                Built by Students, for Students
+              </motion.h2>
+              <p id="team-intro" className="team-description">
+                StudyMatePlus is shaped by students and recent graduates who
+                understand the pressure of exam season. That perspective helps
+                us build a platform that feels practical, supportive, and easy
+                to use.
+              </p>
+            </header>
+
+            <motion.div
+              className="team-stats"
+              variants={staggerChildren}
+              role="list"
+              aria-label="StudyMatePlus team highlights"
+            >
+              {teamStats.map((stat) => (
+                <motion.div
+                  key={stat.label}
+                  className="team-stat"
+                  variants={scaleIn}
+                  role="listitem"
+                >
+                  <span className="team-stat-number">{stat.value}</span>
+                  <span className="team-stat-label">{stat.label}</span>
+                </motion.div>
+              ))}
             </motion.div>
           </motion.div>
         </div>
       </motion.section>
 
       {/* Values Section */}
-      <motion.section 
+      <motion.section
         className="values"
         initial="hidden"
         whileInView="visible"
-        viewport={{ once: true, margin: "-100px" }}
+        viewport={sectionViewport}
         variants={staggerChildren}
+        aria-labelledby="values-heading"
+        aria-describedby="values-intro"
       >
         <div className="container">
-          <motion.h2 variants={fadeInUp}>Our Core Values</motion.h2>
-          <motion.div className="values-grid" variants={staggerChildren}>
-            <motion.div className="value-item" variants={scaleIn} whileHover={{ y: -8, scale: 1.05 }}><div className="value-icon">🔓</div><h3>Open Source</h3><p>Transparency and community collaboration drive our development.</p></motion.div>
-            <motion.div className="value-item" variants={scaleIn} whileHover={{ y: -8, scale: 1.05 }}><div className="value-icon">🎓</div><h3>Quality Education</h3><p>We're committed to providing accurate, verified, and high-quality resources.</p></motion.div>
-            <motion.div className="value-item" variants={scaleIn} whileHover={{ y: -8, scale: 1.05 }}><div className="value-icon">🤲</div><h3>Accessibility</h3><p>Education should be accessible to everyone, regardless of their circumstances.</p></motion.div>
-            <motion.div className="value-item" variants={scaleIn} whileHover={{ y: -8, scale: 1.05 }}><div className="value-icon">💪</div><h3>Student Empowerment</h3><p>We believe in empowering students with the tools they need to succeed.</p></motion.div>
-            <motion.div className="value-item" variants={scaleIn} whileHover={{ y: -8, scale: 1.05 }}><div className="value-icon">🌱</div><h3>Continuous Growth</h3><p>Our platform evolves based on student feedback and emerging needs.</p></motion.div>
-            <motion.div className="value-item" variants={scaleIn} whileHover={{ y: -8, scale: 1.05 }}><div className="value-icon">🤝</div><h3>Community</h3><p>Building a supportive network where students help each other succeed.</p></motion.div>
+          <header>
+            <motion.h2 id="values-heading" variants={fadeInUp}>
+              Our Core Values
+            </motion.h2>
+            <motion.p id="values-intro" variants={fadeInUp} style={sectionIntroStyle}>
+              These principles shape how we build the product, support the
+              community, and grow alongside students.
+            </motion.p>
+          </header>
+
+          <motion.div className="values-grid" variants={staggerChildren} role="list">
+            {valueItems.map((value) => (
+              <motion.article
+                key={value.title}
+                className="value-item"
+                variants={scaleIn}
+                whileHover={valueHover}
+                role="listitem"
+              >
+                <div className="value-icon" aria-hidden="true">
+                  {value.icon}
+                </div>
+                <h3>{value.title}</h3>
+                <p>{value.text}</p>
+              </motion.article>
+            ))}
           </motion.div>
         </div>
       </motion.section>
 
       {/* CTA Section */}
-      <motion.section 
+      <motion.section
         className="about-cta"
         initial="hidden"
         whileInView="visible"
-        viewport={{ once: true, margin: "-100px" }}
+        viewport={sectionViewport}
         variants={fadeInUp}
+        aria-labelledby="cta-heading"
+        aria-describedby="cta-copy"
       >
         <div className="container">
           <motion.div className="cta-content" variants={staggerChildren}>
-            <motion.h2 variants={fadeInUp}>Ready to Transform Your Study Experience?</motion.h2>
-            <motion.p variants={fadeInUp}>
-              Join thousands of students who are already using StudyMatePlus to ace their exams. 
-              Start exploring our resources today and connect with a supportive community of learners.
+            <motion.h2 id="cta-heading" variants={fadeInUp}>
+              Ready to Transform Your Study Experience?
+            </motion.h2>
+            <motion.p id="cta-copy" variants={fadeInUp}>
+              Explore curated resources, learn from real student insights, and
+              study alongside a community that wants you to succeed.
             </motion.p>
             <motion.div className="cta-buttons" variants={fadeInUp}>
-              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
-                <Link to="/syllabus" className="btn btn-primary">Explore Resources</Link>
+              <motion.div whileHover={buttonHover} whileTap={buttonTap}>
+                <Link
+                  to="/syllabus"
+                  className="btn btn-primary"
+                  aria-label="Explore study resources on StudyMatePlus"
+                >
+                  Explore Study Resources
+                </Link>
+              </motion.div>
+
+              <motion.div whileHover={buttonHover} whileTap={buttonTap}>
+                <Link
+                  to="/contribute"
+                  className="btn btn-secondary"
+                  aria-label="Join the StudyMatePlus contributor community"
+                >
+                  Join the Community
+                </Link>
               </motion.div>
             </motion.div>
           </motion.div>
@@ -270,13 +498,15 @@ const About = () => {
             exit={{ opacity: 0, scale: 0.5 }}
             whileHover={{ scale: 1.15, rotate: 5 }}
             whileTap={{ scale: 0.95 }}
+            aria-label="Scroll back to top"
+            title="Back to top"
           >
-            <FaArrowUp />
+            <FaArrowUp aria-hidden="true" />
           </motion.button>
         )}
       </AnimatePresence>
-    </div>
+    </main>
   );
 };
 
-export default About;
\ No newline at end of file
+export default About;

From ece3de8c27701b02c0bad5bcf9653c9c9ac9233b Mon Sep 17 00:00:00 2001
From: jaikaran109 <jaik05581@gmail.com>
Date: Fri, 22 May 2026 15:50:31 +0530
Subject: [PATCH 2/4] Update Analytics.css

---
 client/src/pages/Analytics.css | 1122 ++++++++++++++++++++++++++------
 1 file changed, 918 insertions(+), 204 deletions(-)

diff --git a/client/src/pages/Analytics.css b/client/src/pages/Analytics.css
index e55e514..0d0530f 100644
--- a/client/src/pages/Analytics.css
+++ b/client/src/pages/Analytics.css
@@ -1,332 +1,1046 @@
-/* Base Reset */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
+/* About.css - StudyMatePlus - Polished responsive styling */
 
-.home {
-  min-height: 100vh;
+.about {
+  --about-text: #1f2937;
+  --about-heading: #111827;
+  --about-muted: #5b6474;
+  --about-soft-bg: #f8fafc;
+  --about-section-bg: #ffffff;
+  --about-surface: #ffffff;
+  --about-surface-alt: #f8fafc;
+  --about-border: rgba(148, 163, 184, 0.18);
+  --about-border-strong: rgba(102, 126, 234, 0.26);
+  --about-shadow-sm: 0 10px 28px rgba(15, 23, 42, 0.06);
+  --about-shadow-md: 0 16px 38px rgba(15, 23, 42, 0.1);
+  --about-shadow-lg: 0 24px 48px rgba(79, 70, 229, 0.16);
+  --about-transition: 0.28s ease;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   line-height: 1.6;
-  color: #333;
+  color: var(--about-text);
+  background: var(--bg, #ffffff);
+}
+
+html[data-theme="dark"] .about {
+  --about-text: #e5edf7;
+  --about-heading: #ffffff;
+  --about-muted: #c9d3e0;
+  --about-soft-bg: #111827;
+  --about-section-bg: #0f172a;
+  --about-surface: #182436;
+  --about-surface-alt: #1b293c;
+  --about-border: rgba(255, 255, 255, 0.08);
+  --about-border-strong: rgba(129, 140, 248, 0.34);
+  --about-shadow-sm: 0 14px 32px rgba(2, 6, 23, 0.24);
+  --about-shadow-md: 0 18px 38px rgba(2, 6, 23, 0.3);
+  --about-shadow-lg: 0 26px 52px rgba(2, 6, 23, 0.4);
 }
 
-.container {
+.about *,
+.about *::before,
+.about *::after {
+  box-sizing: border-box;
+}
+
+.about .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 2rem;
 }
 
-.hero {
+/* Shared typography */
+.about .mission-text h2,
+.about .story h2,
+.about .features-deep h2,
+.about .values h2,
+.about .team h2,
+.about .cta-content h2 {
+  font-size: 2.5rem;
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+}
+
+.about .story h2,
+.about .features-deep h2,
+.about .values h2,
+.about .team h2 {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.about .mission-text h2 {
+  margin-bottom: 1.5rem;
+  color: var(--about-heading);
+}
+
+.about .cta-content h2 {
+  margin-bottom: 1.5rem;
+  color: #ffffff;
+}
+
+/* About Hero Section */
+.about .about-hero {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  min-height: 60vh;
-  display: flex;
-  align-items: center;
+  padding: 6rem 0 4rem;
+  color: #ffffff;
+  text-align: center;
   position: relative;
   overflow: hidden;
 }
 
-.hero::before {
+.about .about-hero::before {
   content: '';
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><pattern id='grid' width='10' height='10' patternUnits='userSpaceOnUse'><path d='M 10 0 L 0 0 0 10' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/></pattern></defs><rect width='100' height='100' fill='url(%23grid)'/></svg>");
+  inset: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
   opacity: 0.3;
 }
 
-.hero-container {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 2rem;
-  align-items: center;
-  padding: 2rem;
-  position: relative;
-  z-index: 1;
+.about .about-hero::after {
+  content: '';
+  position: absolute;
+  width: 420px;
+  height: 420px;
+  top: -170px;
+  right: -130px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 72%);
+  pointer-events: none;
 }
 
-.hero-content {
-  color: white;
-  text-align: center;
+.about .about-hero-content {
+  position: relative;
+  z-index: 1;
+  max-width: 760px;
+  margin: 0 auto;
 }
 
-.hero-title {
-  font-size: 3rem;
+.about .about-hero h1 {
+  font-size: 3.5rem;
   font-weight: 800;
-  margin-bottom: 1.5rem;
-  line-height: 1.2;
-}
-
-.brand-highlight {
+  line-height: 1.05;
+  letter-spacing: -0.035em;
+  margin-bottom: 1.25rem;
   background: linear-gradient(45deg, #ffd700, #ffed4a);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
-.hero-subtitle {
+.about .hero-subtitle {
   font-size: 1.3rem;
-  opacity: 0.9;
-  max-width: 600px;
+  max-width: 640px;
   margin: 0 auto;
+  color: rgba(255, 255, 255, 0.9);
+  line-height: 1.75;
+}
+
+/* Mission Section */
+.about .mission {
+  padding: 6rem 0;
+  background: var(--about-soft-bg);
+}
+
+.about .mission-content {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 4rem;
+  align-items: center;
 }
 
-.analytics-section {
-  padding: 4rem 2rem;
+.about .mission-text p {
+  font-size: 1.05rem;
+  color: var(--about-muted);
+  margin: 0 0 1.35rem;
+  line-height: 1.85;
+}
+
+.about .mission-text p:last-child {
+  margin-bottom: 0;
+}
+
+.about .mission-visual {
+  text-align: center;
+}
+
+.about .mission-icon {
+  font-size: 5rem;
+  margin-bottom: 1.75rem;
+  display: block;
+  filter: drop-shadow(0 10px 22px rgba(79, 70, 229, 0.16));
+}
+
+.about .mission-stats {
   display: flex;
-  flex-wrap: wrap;
   gap: 2rem;
   justify-content: center;
-  background-color: #f9f9f9;
+  flex-wrap: wrap;
+}
+
+.about .mini-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 110px;
 }
 
-.chart-container {
-  background: white;
-  padding: 2rem;
-  border-radius: 16px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
-  width: 100%;
-  max-width: 500px;
+.about .stat-num {
+  font-size: 2rem;
+  font-weight: 800;
+  line-height: 1.1;
+  color: #667eea;
+  margin-bottom: 0.45rem;
 }
 
-.chart-container h2 {
-  margin-bottom: 1rem;
-  font-size: 1.4rem;
-  color: #333;
+.about .stat-text {
+  font-size: 0.92rem;
+  color: var(--about-muted);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+/* Shared card styling */
+.about .story-card,
+.about .feature-deep,
+.about .value-item {
+  position: relative;
+  overflow: hidden;
+  border-radius: 18px;
+  border: 1px solid var(--about-border);
+  box-shadow: var(--about-shadow-sm);
+  transition: transform var(--about-transition), box-shadow var(--about-transition), border-color var(--about-transition), background-color var(--about-transition), color var(--about-transition);
+}
+
+.about .story-card::before,
+.about .feature-deep::before,
+.about .value-item::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(102, 126, 234, 0.08) 0%, transparent 36%);
+  opacity: 0;
+  transition: opacity var(--about-transition);
+  pointer-events: none;
+}
+
+.about .story-card:hover,
+.about .feature-deep:hover,
+.about .value-item:hover {
+  transform: translateY(-6px);
+  border-color: var(--about-border-strong);
+  box-shadow: var(--about-shadow-lg);
+}
+
+.about .story-card:hover::before,
+.about .feature-deep:hover::before,
+.about .value-item:hover::before {
+  opacity: 1;
+}
+
+.about .story-card h3,
+.about .feature-deep h3,
+.about .value-item h3 {
+  color: var(--about-heading);
+}
+
+.about .story-card p,
+.about .feature-deep p,
+.about .value-item p {
+  color: var(--about-muted);
+  font-size: 0.98rem;
+  line-height: 1.75;
+}
+
+/* Story Section */
+.about .story {
+  padding: 4rem 0;
+  background: var(--about-section-bg);
+}
+
+.about .story h2 {
+  color: var(--about-heading);
+}
+
+.about .story-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  align-items: stretch;
+}
+
+.about .story-card {
+  background: var(--about-surface-alt);
+  padding: 2.4rem 2.25rem;
   text-align: center;
 }
-select {
-  border: 2px solid #667eea;
-  border-radius: 6px;
-  background-color: white;
-  color: #333;
+
+.about .story-icon {
+  font-size: 3rem;
+  margin-bottom: 1.25rem;
+  display: block;
+  line-height: 1;
 }
 
-button:hover {
-  background-color: #5a3e91;
+.about .story-card h3 {
+  font-size: 1.45rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin: 0 0 0.95rem;
 }
-.insights-section, .filter-section, .download-section {
-  margin-top: 3rem;
-  padding: 1rem 2rem;
-  background-color: #f9f9f9;
-  border-radius: 12px;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+
+.about .story-card p {
+  margin: 0;
 }
 
-.insights-section h2,
-.filter-section h2 {
-  margin-bottom: 1rem;
-  color: #444;
+/* Features Deep Dive */
+.about .features-deep {
+  padding: 6rem 0;
+  background: var(--about-soft-bg);
 }
 
-.insights-section ul {
-  list-style: disc;
-  padding-left: 1.5rem;
-  font-size: 1.1rem;
+.about .features-deep h2 {
+  color: var(--about-heading);
 }
 
-.filter-section select {
-  padding: 0.6rem 1rem;
-  font-size: 1rem;
-  border: 1px solid #ccc;
-  border-radius: 6px;
+.about .features-deep-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 2rem;
+  align-items: stretch;
 }
 
-.download-btn {
-  margin-top: 1rem;
-  padding: 0.8rem 1.5rem;
-  font-size: 1rem;
-  background-color: #ffd700;
-  color: #333;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
+.about .feature-deep {
+  background: var(--about-surface);
+  padding: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--about-shadow-md);
 }
 
-.download-btn:hover {
-  background-color: #ffc400;
+.about .feature-deep-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.35rem;
 }
-/* Section Wrappers */
-.insights-section,
-.filter-section,
-.download-section {
-  margin-top: 3rem;
-  padding: 1.5rem 2rem;
-  background: linear-gradient(135deg, #fefcea, #dfeaf7);
-  border-radius: 16px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+.about .feature-deep-icon {
+  font-size: 2.4rem;
+  line-height: 1;
+  flex-shrink: 0;
 }
 
-.insights-section:hover,
-.filter-section:hover,
-.download-section:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+.about .feature-deep h3 {
+  font-size: 1.35rem;
+  font-weight: 700;
+  line-height: 1.3;
+  margin: 0;
 }
 
-/* Headings */
-.insights-section h2,
-.filter-section h2 {
-  margin-bottom: 1rem;
-  color: #333;
-  font-size: 1.6rem;
-  font-weight: 600;
-  border-left: 6px solid #ffda00;
-  padding-left: 12px;
+.about .feature-deep p {
+  margin: 0 0 1.35rem;
 }
 
-/* Insights List */
-.insights-section ul {
+.about .feature-deep ul {
   list-style: none;
-  padding-left: 0;
-  font-size: 1.1rem;
-  color: #444;
+  padding: 0;
+  margin: auto 0 0;
+  display: grid;
+  gap: 0.75rem;
 }
 
-.insights-section ul li {
-  margin-bottom: 0.8rem;
-  padding-left: 1.5rem;
+.about .feature-deep ul li {
+  color: var(--about-text);
   position: relative;
+  padding-left: 1.65rem;
+  line-height: 1.65;
 }
 
-.insights-section ul li::before {
-  content: "⭐";
+.about .feature-deep ul li::before {
+  content: '\2713';
   position: absolute;
+  top: 0.05rem;
   left: 0;
-  top: 0;
+  color: #667eea;
+  font-weight: 700;
+}
+
+/* Values Section */
+.about .values {
+  padding: 6rem 0;
+  background: var(--about-section-bg);
+}
+
+.about .values h2 {
+  color: var(--about-heading);
+}
+
+.about .values-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  align-items: stretch;
+}
+
+.about .value-item {
+  background: var(--about-surface-alt);
+  padding: 2rem 1.75rem;
+  text-align: center;
+}
+
+.about .value-item:hover {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  box-shadow: 0 22px 46px rgba(118, 75, 162, 0.24);
+}
+
+html[data-theme="dark"] .about .value-item:hover {
+  box-shadow: 0 26px 52px rgba(2, 6, 23, 0.42);
+}
+
+.about .value-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  display: block;
+  line-height: 1;
+}
+
+.about .value-item h3 {
+  font-size: 1.3rem;
+  font-weight: 700;
+  margin: 0 0 0.8rem;
+}
+
+.about .value-item p {
+  margin: 0;
+}
+
+.about .value-item:hover h3,
+.about .value-item:hover p {
+  color: #ffffff;
 }
 
-/* Filter Dropdown */
-.filter-section select {
-  padding: 0.7rem 1rem;
+/* Team Section */
+.about .team {
+  padding: 6rem 0;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #ffffff;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.about .team::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.11) 1px, transparent 1px);
+  background-size: 28px 28px;
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+.about .team::after {
+  content: '';
+  position: absolute;
+  inset: auto -10% -45% auto;
+  width: 320px;
+  height: 320px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, transparent 72%);
+  pointer-events: none;
+}
+
+.about .team .container {
+  position: relative;
+  z-index: 1;
+}
+
+.about .team h2 {
+  color: #ffffff;
+  margin-bottom: 1.5rem;
+}
+
+.about .team-content {
+  max-width: 860px;
+  margin: 0 auto;
+}
+
+.about .team-description {
+  font-size: 1.16rem;
+  max-width: 760px;
+  margin: 0 auto 3rem;
+  color: rgba(255, 255, 255, 0.9);
+  line-height: 1.85;
+}
+
+.about .team-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1.5rem;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.about .team-stat {
+  padding: 1.5rem;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 18px;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.16);
+  transition: transform var(--about-transition), box-shadow var(--about-transition), background-color var(--about-transition);
+}
+
+.about .team-stat:hover {
+  transform: translateY(-4px);
+  background: rgba(255, 255, 255, 0.16);
+  box-shadow: 0 20px 38px rgba(17, 24, 39, 0.22);
+}
+
+.about .team-stat-number {
+  display: block;
+  font-size: 2.5rem;
+  font-weight: 800;
+  line-height: 1.05;
+  margin-bottom: 0.5rem;
+  background: linear-gradient(45deg, #ffd700, #ffed4a);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.about .team-stat-label {
   font-size: 1rem;
-  background-color: #fff8d6;
-  border: 1px solid #e0c000;
-  border-radius: 8px;
-  color: #333;
-  outline: none;
-  transition: border-color 0.3s ease;
-}
-
-.filter-section select:focus {
-  border-color: #c9a900;
-}
-
-/* Download Button */
-.download-btn {
-  display: inline-block;
-  margin-top: 1.2rem;
-  padding: 0.9rem 1.8rem;
-  font-size: 1.1rem;
-  background: linear-gradient(to right, #ffd700, #ffb300);
-  color: #222;
-  font-weight: 600;
-  border: none;
-  border-radius: 12px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* About CTA Section */
+.about .about-cta {
+  padding: 6rem 0;
+  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 55%, #8b5cf6 100%);
+  color: #ffffff;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.about .about-cta::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+  background-size: 28px 28px;
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.about .cta-content {
+  position: relative;
+  z-index: 1;
+  max-width: 760px;
+  margin: 0 auto;
+}
+
+.about .cta-content p {
+  font-size: 1.16rem;
+  max-width: 620px;
+  margin: 0 auto 2.5rem;
+  color: rgba(255, 255, 255, 0.9);
+  line-height: 1.75;
+}
+
+.about .cta-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.about .btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 52px;
+  padding: 1rem 2rem;
+  text-decoration: none;
+  border-radius: 999px;
+  font-weight: 700;
+  font-size: 1.05rem;
+  line-height: 1.2;
+  text-align: center;
+  border: 2px solid transparent;
   cursor: pointer;
-  transition: background 0.3s ease, transform 0.2s ease;
+  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
+}
+
+.about .btn:focus-visible {
+  outline: 3px solid rgba(255, 255, 255, 0.45);
+  outline-offset: 3px;
+}
+
+.about .btn-primary {
+  background: linear-gradient(135deg, #ffffff 0%, #fff7fb 100%);
+  color: #be185d;
+  box-shadow: 0 10px 24px rgba(157, 23, 77, 0.2);
 }
 
-.download-btn:hover {
-  background: linear-gradient(to right, #ffc400, #ffa000);
-  transform: scale(1.03);
+.about .btn-primary:hover {
+  transform: translateY(-3px);
+  color: #9d174d;
+  box-shadow: 0 16px 32px rgba(157, 23, 77, 0.28);
 }
 
+.about .btn-secondary {
+  background: rgba(255, 255, 255, 0.08);
+  color: #ffffff;
+  border-color: rgba(255, 255, 255, 0.88);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
 
-/* --- NEW: RESPONSIVE STYLES --- */
+.about .btn-secondary:hover {
+  background: #ffffff;
+  color: #f5576c;
+  transform: translateY(-3px);
+  box-shadow: 0 14px 30px rgba(17, 24, 39, 0.18);
+}
 
-/* For Tablets and smaller devices */
-@media (max-width: 768px) {
-  .container {
+/* Responsive Design */
+
+/* Large tablets and small desktops */
+@media (max-width: 1024px) {
+  .about .container {
     padding: 0 1.5rem;
   }
 
-  .hero {
-    min-height: 50vh;
+  .about .mission-content {
+    gap: 3rem;
+  }
+
+  .about .about-hero h1 {
+    font-size: 3rem;
+  }
+
+  .about .hero-subtitle {
+    font-size: 1.2rem;
+  }
+
+  .about .mission-text h2,
+  .about .story h2,
+  .about .features-deep h2,
+  .about .values h2,
+  .about .team h2,
+  .about .cta-content h2 {
+    font-size: 2.2rem;
+  }
+
+  .about .features-deep-grid {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  }
+
+  .about .story-content {
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  }
+
+  .about .mission-icon {
+    font-size: 4rem;
+  }
+
+  .about .story-card,
+  .about .feature-deep {
+    padding: 2.2rem;
+  }
+
+  .about .team-description,
+  .about .cta-content p {
+    font-size: 1.1rem;
+  }
+
+}
+
+/* Tablets */
+@media (max-width: 768px) {
+  .about .container {
+    padding: 0 1rem;
+  }
+
+  .about .about-hero {
+    padding: 4rem 0 3rem;
   }
 
-  .hero-title {
+  .about .about-hero h1 {
     font-size: 2.5rem;
   }
 
-  .hero-subtitle {
+  .about .hero-subtitle {
     font-size: 1.1rem;
+    padding: 0 1rem;
   }
-  
-  .analytics-section {
-    padding: 3rem 1.5rem;
+
+  .about .mission,
+  .about .features-deep,
+  .about .values,
+  .about .team,
+  .about .about-cta {
+    padding: 4rem 0;
   }
 
-  .chart-container {
-    padding: 1.5rem;
+  .about .story {
+    padding: 4rem 0;
+  }
+
+  .about .mission-content {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    text-align: center;
+  }
+
+  .about .mission-text {
+    order: 2;
+  }
+
+  .about .mission-visual {
+    order: 1;
+  }
+
+  .about .mission-text h2,
+  .about .story h2,
+  .about .features-deep h2,
+  .about .values h2,
+  .about .team h2,
+  .about .cta-content h2 {
+    font-size: 2rem;
+  }
+
+  .about .story h2,
+  .about .features-deep h2,
+  .about .values h2,
+  .about .team h2 {
+    margin-bottom: 2rem;
+  }
+
+  .about .mission-text p {
+    font-size: 1rem;
+    line-height: 1.75;
+  }
+
+  .about .mission-icon {
+    font-size: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .about .mission-stats {
+    gap: 1.5rem;
+  }
+
+  .about .stat-num {
+    font-size: 1.8rem;
+  }
+
+  .about .story-content,
+  .about .features-deep-grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  .about .story-card,
+  .about .feature-deep,
+  .about .value-item {
+    margin: 0 0.5rem;
   }
-  
-  .insights-section h2,
-  .filter-section h2 {
-    font-size: 1.4rem;
+
+  .about .story-card,
+  .about .feature-deep {
+    padding: 2rem;
+  }
+
+  .about .story-icon {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .about .story-card h3 {
+    font-size: 1.3rem;
+  }
+
+  .about .feature-deep-header {
+    flex-direction: column;
+    text-align: center;
+    gap: 0.65rem;
+  }
+
+  .about .feature-deep-icon {
+    font-size: 2rem;
+  }
+
+  .about .values-grid {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+  }
+
+  .about .value-item {
+    padding: 1.75rem 1.5rem;
+  }
+
+  .about .value-icon {
+    font-size: 2.5rem;
+  }
+
+  .about .value-item h3 {
+    font-size: 1.2rem;
+  }
+
+  .about .team-description {
+    font-size: 1.05rem;
+    padding: 0 1rem;
+  }
+
+  .about .team-stats {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+    max-width: 400px;
+  }
+
+  .about .team-stat {
+    padding: 1.25rem;
+  }
+
+  .about .team-stat-number {
+    font-size: 2rem;
+  }
+
+  .about .cta-content p {
+    font-size: 1.05rem;
+    padding: 0 1rem;
+  }
+
+  .about .cta-buttons {
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .about .btn {
+    min-width: 200px;
+    padding: 0.875rem 1.5rem;
   }
 }
 
-/* For Mobile Phones */
+/* Mobile phones */
 @media (max-width: 480px) {
-  .container {
+  .about .container {
     padding: 0 1rem;
   }
 
-  .hero {
-    min-height: 40vh;
-    padding: 2rem 0;
+  .about .about-hero {
+    padding: 3rem 0 2rem;
   }
 
-  .hero-title {
+  .about .about-hero h1 {
     font-size: 2rem;
+    line-height: 1.08;
     margin-bottom: 1rem;
   }
 
-  .hero-subtitle {
+  .about .hero-subtitle {
     font-size: 1rem;
+    padding: 0 0.5rem;
   }
-  
-  .analytics-section {
-    padding: 2rem 1rem;
+
+  .about .mission,
+  .about .story,
+  .about .features-deep,
+  .about .values,
+  .about .team,
+  .about .about-cta {
+    padding: 3rem 0;
   }
 
-  .chart-container {
-    padding: 1rem;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  .about .mission-text h2,
+  .about .story h2,
+  .about .features-deep h2,
+  .about .values h2,
+  .about .team h2,
+  .about .cta-content h2 {
+    font-size: 1.8rem;
   }
 
-  .chart-container h2 {
-    font-size: 1.2rem;
+  .about .story h2,
+  .about .features-deep h2,
+  .about .values h2,
+  .about .team h2 {
+    margin-bottom: 1.5rem;
+  }
+
+  .about .mission-text p {
+    font-size: 0.95rem;
+    margin-bottom: 1rem;
+  }
+
+  .about .mission-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
   }
 
-  .insights-section, .filter-section, .download-section {
-    margin-top: 2rem;
-    padding: 1rem 1.5rem;
+  .about .mission-stats {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  .about .mini-stat {
+    width: 100%;
+    max-width: 200px;
+  }
+
+  .about .stat-num {
+    font-size: 1.6rem;
+  }
+
+  .about .stat-text {
+    font-size: 0.86rem;
+  }
+
+  .about .story-card,
+  .about .feature-deep,
+  .about .value-item {
+    padding: 1.5rem;
+    margin: 0 0.25rem;
+  }
+
+  .about .story-icon,
+  .about .value-icon {
+    font-size: 2rem;
+    margin-bottom: 0.75rem;
   }
 
-  .insights-section h2,
-  .filter-section h2 {
+  .about .story-card h3,
+  .about .value-item h3 {
     font-size: 1.2rem;
-    padding-left: 10px;
-    border-left-width: 4px;
+    margin-bottom: 0.75rem;
   }
 
-  .insights-section ul {
+  .about .story-card p,
+  .about .feature-deep p,
+  .about .value-item p,
+  .about .feature-deep ul li {
+    font-size: 0.92rem;
+    line-height: 1.65;
+  }
+
+  .about .feature-deep-header {
+    gap: 0.75rem;
+  }
+
+  .about .feature-deep-icon {
+    font-size: 1.8rem;
+  }
+
+  .about .feature-deep h3 {
+    font-size: 1.1rem;
+  }
+
+  .about .team-description {
+    font-size: 1rem;
+    padding: 0 0.5rem;
+    margin-bottom: 2rem;
+  }
+
+  .about .team-stat {
+    padding: 1rem;
+  }
+
+  .about .team-stat-number {
+    font-size: 1.8rem;
+  }
+
+  .about .team-stat-label {
+    font-size: 0.9rem;
+  }
+
+  .about .cta-content p {
+    font-size: 1rem;
+    padding: 0 0.5rem;
+    margin-bottom: 2rem;
+  }
+
+  .about .btn {
+    min-width: 180px;
+    padding: 0.75rem 1.25rem;
     font-size: 1rem;
   }
+}
 
-  .filter-section select {
-    width: 100%; /* Make dropdown full-width for easier tapping */
+/* Extra small phones */
+@media (max-width: 360px) {
+  .about .container {
+    padding: 0 0.75rem;
   }
 
-  .download-btn {
-    width: 100%; /* Make button full-width */
-    padding: 0.8rem 1rem;
+  .about .about-hero h1 {
+    font-size: 1.8rem;
+  }
+
+  .about .hero-subtitle {
+    font-size: 0.95rem;
+  }
+
+  .about .mission-text h2,
+  .about .story h2,
+  .about .features-deep h2,
+  .about .values h2,
+  .about .team h2,
+  .about .cta-content h2 {
+    font-size: 1.6rem;
+  }
+
+  .about .story-card,
+  .about .feature-deep,
+  .about .value-item {
+    padding: 1.25rem;
+    margin: 0;
+  }
+
+  .about .mission-stats {
+    gap: 0.75rem;
+  }
+
+  .about .team-description {
+    padding: 0 0.25rem;
+  }
+
+  .about .cta-content p {
+    padding: 0 0.25rem;
+  }
+
+  .about .btn {
+    min-width: 160px;
+    padding: 0.625rem 1rem;
+    font-size: 0.95rem;
+  }
+
+  .about .feature-deep-header {
+    gap: 0.5rem;
+  }
+
+  .about .mission-icon {
+    font-size: 2.5rem;
+  }
+
+  .about .story-icon,
+  .about .value-icon {
+    font-size: 1.8rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .about .story-card,
+  .about .feature-deep,
+  .about .value-item,
+  .about .team-stat,
+  .about .btn {
+    transition: none;
   }
 }

From 6a6f3f831e97151889ae385176ae34a7906a6773 Mon Sep 17 00:00:00 2001
From: jaikaran109 <jaik05581@gmail.com>
Date: Sat, 23 May 2026 00:43:14 +0530
Subject: [PATCH 3/4] Update About.css

---
 client/src/pages/About.css | 1057 +++++++++++++++++++++---------------
 1 file changed, 615 insertions(+), 442 deletions(-)

diff --git a/client/src/pages/About.css b/client/src/pages/About.css
index 2da398d..0d0530f 100644
--- a/client/src/pages/About.css
+++ b/client/src/pages/About.css
@@ -1,373 +1,508 @@
-/* About.css - StudyMatePlus - Enhanced Mobile Responsive */
+/* About.css - StudyMatePlus - Polished responsive styling */
 
 .about {
+  --about-text: #1f2937;
+  --about-heading: #111827;
+  --about-muted: #5b6474;
+  --about-soft-bg: #f8fafc;
+  --about-section-bg: #ffffff;
+  --about-surface: #ffffff;
+  --about-surface-alt: #f8fafc;
+  --about-border: rgba(148, 163, 184, 0.18);
+  --about-border-strong: rgba(102, 126, 234, 0.26);
+  --about-shadow-sm: 0 10px 28px rgba(15, 23, 42, 0.06);
+  --about-shadow-md: 0 16px 38px rgba(15, 23, 42, 0.1);
+  --about-shadow-lg: 0 24px 48px rgba(79, 70, 229, 0.16);
+  --about-transition: 0.28s ease;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   line-height: 1.6;
-  color: #333;
+  color: var(--about-text);
+  background: var(--bg, #ffffff);
 }
 
-.container {
+html[data-theme="dark"] .about {
+  --about-text: #e5edf7;
+  --about-heading: #ffffff;
+  --about-muted: #c9d3e0;
+  --about-soft-bg: #111827;
+  --about-section-bg: #0f172a;
+  --about-surface: #182436;
+  --about-surface-alt: #1b293c;
+  --about-border: rgba(255, 255, 255, 0.08);
+  --about-border-strong: rgba(129, 140, 248, 0.34);
+  --about-shadow-sm: 0 14px 32px rgba(2, 6, 23, 0.24);
+  --about-shadow-md: 0 18px 38px rgba(2, 6, 23, 0.3);
+  --about-shadow-lg: 0 26px 52px rgba(2, 6, 23, 0.4);
+}
+
+.about *,
+.about *::before,
+.about *::after {
+  box-sizing: border-box;
+}
+
+.about .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 2rem;
 }
 
+/* Shared typography */
+.about .mission-text h2,
+.about .story h2,
+.about .features-deep h2,
+.about .values h2,
+.about .team h2,
+.about .cta-content h2 {
+  font-size: 2.5rem;
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+}
+
+.about .story h2,
+.about .features-deep h2,
+.about .values h2,
+.about .team h2 {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.about .mission-text h2 {
+  margin-bottom: 1.5rem;
+  color: var(--about-heading);
+}
+
+.about .cta-content h2 {
+  margin-bottom: 1.5rem;
+  color: #ffffff;
+}
+
 /* About Hero Section */
-.about-hero {
+.about .about-hero {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   padding: 6rem 0 4rem;
-  color: white;
+  color: #ffffff;
   text-align: center;
   position: relative;
   overflow: hidden;
 }
 
-.about-hero::before {
+.about .about-hero::before {
   content: '';
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
   opacity: 0.3;
 }
 
-.about-hero-content {
+.about .about-hero::after {
+  content: '';
+  position: absolute;
+  width: 420px;
+  height: 420px;
+  top: -170px;
+  right: -130px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 72%);
+  pointer-events: none;
+}
+
+.about .about-hero-content {
   position: relative;
   z-index: 1;
+  max-width: 760px;
+  margin: 0 auto;
 }
 
-.about-hero h1 {
+.about .about-hero h1 {
   font-size: 3.5rem;
   font-weight: 800;
-  margin-bottom: 1.5rem;
+  line-height: 1.05;
+  letter-spacing: -0.035em;
+  margin-bottom: 1.25rem;
   background: linear-gradient(45deg, #ffd700, #ffed4a);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
-.hero-subtitle {
+.about .hero-subtitle {
   font-size: 1.3rem;
-  max-width: 600px;
+  max-width: 640px;
   margin: 0 auto;
-  opacity: 0.9;
+  color: rgba(255, 255, 255, 0.9);
+  line-height: 1.75;
 }
 
 /* Mission Section */
-.mission {
+.about .mission {
   padding: 6rem 0;
-  background: #f8fafc;
+  background: var(--about-soft-bg);
 }
 
-.mission-content {
+.about .mission-content {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 4rem;
   align-items: center;
 }
 
-.mission-text h2 {
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin-bottom: 2rem;
-  color: #333;
+.about .mission-text p {
+  font-size: 1.05rem;
+  color: var(--about-muted);
+  margin: 0 0 1.35rem;
+  line-height: 1.85;
 }
 
-.mission-text p {
-  font-size: 1.1rem;
-  color: #666;
-  margin-bottom: 1.5rem;
-  line-height: 1.8;
+.about .mission-text p:last-child {
+  margin-bottom: 0;
 }
 
-.mission-visual {
+.about .mission-visual {
   text-align: center;
 }
 
-.mission-icon {
+.about .mission-icon {
   font-size: 5rem;
-  margin-bottom: 2rem;
+  margin-bottom: 1.75rem;
   display: block;
+  filter: drop-shadow(0 10px 22px rgba(79, 70, 229, 0.16));
 }
 
-.mission-stats {
+.about .mission-stats {
   display: flex;
   gap: 2rem;
   justify-content: center;
+  flex-wrap: wrap;
 }
 
-.mini-stat {
+.about .mini-stat {
   display: flex;
   flex-direction: column;
   align-items: center;
+  min-width: 110px;
 }
 
-.stat-num {
+.about .stat-num {
   font-size: 2rem;
   font-weight: 800;
+  line-height: 1.1;
   color: #667eea;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.45rem;
 }
 
-.stat-text {
-  font-size: 0.9rem;
-  color: #666;
-  font-weight: 500;
+.about .stat-text {
+  font-size: 0.92rem;
+  color: var(--about-muted);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+/* Shared card styling */
+.about .story-card,
+.about .feature-deep,
+.about .value-item {
+  position: relative;
+  overflow: hidden;
+  border-radius: 18px;
+  border: 1px solid var(--about-border);
+  box-shadow: var(--about-shadow-sm);
+  transition: transform var(--about-transition), box-shadow var(--about-transition), border-color var(--about-transition), background-color var(--about-transition), color var(--about-transition);
+}
+
+.about .story-card::before,
+.about .feature-deep::before,
+.about .value-item::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(102, 126, 234, 0.08) 0%, transparent 36%);
+  opacity: 0;
+  transition: opacity var(--about-transition);
+  pointer-events: none;
+}
+
+.about .story-card:hover,
+.about .feature-deep:hover,
+.about .value-item:hover {
+  transform: translateY(-6px);
+  border-color: var(--about-border-strong);
+  box-shadow: var(--about-shadow-lg);
+}
+
+.about .story-card:hover::before,
+.about .feature-deep:hover::before,
+.about .value-item:hover::before {
+  opacity: 1;
+}
+
+.about .story-card h3,
+.about .feature-deep h3,
+.about .value-item h3 {
+  color: var(--about-heading);
+}
+
+.about .story-card p,
+.about .feature-deep p,
+.about .value-item p {
+  color: var(--about-muted);
+  font-size: 0.98rem;
+  line-height: 1.75;
 }
 
 /* Story Section */
-.story {
+.about .story {
   padding: 4rem 0;
-  background: white;
+  background: var(--about-section-bg);
 }
 
-.story h2 {
-  text-align: center;
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin-bottom: 3rem;
-  color: #333;
+.about .story h2 {
+  color: var(--about-heading);
 }
 
-.story-content {
+.about .story-content {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 2rem;
+  align-items: stretch;
 }
 
-.story-card {
-  background: #f8fafc;
-  padding: 2.5rem;
-  border-radius: 15px;
+.about .story-card {
+  background: var(--about-surface-alt);
+  padding: 2.4rem 2.25rem;
   text-align: center;
-  transition: all 0.3s ease;
-  border: 2px solid transparent;
-}
-
-
-[data-theme="dark"] .story-card {
-  background-color: #1e2a3a; /* A nice dark blue-gray */
-  color: #f0f0f0;            /* Light text color for contrast */
-  border: 1px solid #4a4a4a;    /* Optional: a subtle border for dark mode */
-}
-
-.story-card:hover {
-  transform: translateY(-5px);
-  border-color: #667eea;
-  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.1);
 }
 
-.story-icon {
+.about .story-icon {
   font-size: 3rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.25rem;
   display: block;
+  line-height: 1;
 }
 
-.story-card h3 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 1rem;
-  color: #333;
+.about .story-card h3 {
+  font-size: 1.45rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin: 0 0 0.95rem;
 }
 
-.story-card p {
-  color: #666;
-  line-height: 1.7;
+.about .story-card p {
+  margin: 0;
 }
 
 /* Features Deep Dive */
-.features-deep {
+.about .features-deep {
   padding: 6rem 0;
-  background: #f8fafc;
+  background: var(--about-soft-bg);
 }
 
-.features-deep h2 {
-  text-align: center;
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin-bottom: 3rem;
-  color: #333;
+.about .features-deep h2 {
+  color: var(--about-heading);
 }
 
-.features-deep-grid {
+.about .features-deep-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 2rem;
+  align-items: stretch;
 }
 
-.feature-deep {
-  background: white;
+.about .feature-deep {
+  background: var(--about-surface);
   padding: 2.5rem;
-  border-radius: 15px;
-  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
-}
-
-.feature-deep:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--about-shadow-md);
 }
 
-.feature-deep-header {
+.about .feature-deep-header {
   display: flex;
   align-items: center;
   gap: 1rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.35rem;
 }
 
-.feature-deep-icon {
-  font-size: 2.5rem;
+.about .feature-deep-icon {
+  font-size: 2.4rem;
+  line-height: 1;
   flex-shrink: 0;
 }
 
-.feature-deep h3 {
-  font-size: 1.3rem;
-  font-weight: 600;
-  color: #333;
+.about .feature-deep h3 {
+  font-size: 1.35rem;
+  font-weight: 700;
+  line-height: 1.3;
   margin: 0;
 }
 
-.feature-deep p {
-  color: #666;
-  margin-bottom: 1.5rem;
-  line-height: 1.7;
+.about .feature-deep p {
+  margin: 0 0 1.35rem;
 }
 
-.feature-deep ul {
+.about .feature-deep ul {
   list-style: none;
   padding: 0;
+  margin: auto 0 0;
+  display: grid;
+  gap: 0.75rem;
 }
 
-.feature-deep ul li {
-  color: #555;
-  margin-bottom: 0.5rem;
+.about .feature-deep ul li {
+  color: var(--about-text);
   position: relative;
-  padding-left: 1.5rem;
+  padding-left: 1.65rem;
+  line-height: 1.65;
 }
 
-.feature-deep ul li::before {
-  content: '✓';
+.about .feature-deep ul li::before {
+  content: '\2713';
   position: absolute;
+  top: 0.05rem;
   left: 0;
   color: #667eea;
-  font-weight: bold;
-}
-
-/* Add this to your About.css file */
-
-[data-theme="dark"] .feature-deep {
-  background-color: #1e2a3a; /* A nice dark blue-gray */
-  color: #f0f0f0;            /* Light text color for contrast */
-  border: 1px solid #4a4a4a;    /* Optional: a subtle border for dark mode */
+  font-weight: 700;
 }
 
 /* Values Section */
-.values {
+.about .values {
   padding: 6rem 0;
-  background: white;
+  background: var(--about-section-bg);
 }
 
-.values h2 {
-  text-align: center;
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin-bottom: 3rem;
-  color: #333;
+.about .values h2 {
+  color: var(--about-heading);
 }
 
-.values-grid {
+.about .values-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 2rem;
+  align-items: stretch;
 }
 
-.value-item {
+.about .value-item {
+  background: var(--about-surface-alt);
+  padding: 2rem 1.75rem;
   text-align: center;
-  padding: 2rem;
-  background: #f8fafc;
-  border-radius: 15px;
-  transition: all 0.3s ease;
 }
 
-.value-item:hover {
-  transform: translateY(-5px);
+.about .value-item:hover {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
+  box-shadow: 0 22px 46px rgba(118, 75, 162, 0.24);
+}
+
+html[data-theme="dark"] .about .value-item:hover {
+  box-shadow: 0 26px 52px rgba(2, 6, 23, 0.42);
 }
 
-.value-icon {
+.about .value-icon {
   font-size: 3rem;
   margin-bottom: 1rem;
   display: block;
+  line-height: 1;
 }
 
-.value-item h3 {
+.about .value-item h3 {
   font-size: 1.3rem;
-  font-weight: 600;
-  margin-bottom: 0.8rem;
-}
-
-.value-item p {
-  color: inherit;
-  opacity: 0.8;
-  line-height: 1.6;
+  font-weight: 700;
+  margin: 0 0 0.8rem;
 }
 
-.value-item:hover p {
-  opacity: 0.9;
+.about .value-item p {
+  margin: 0;
 }
 
-/* Add this to your About.css file */
-
-[data-theme="dark"] .value-item {
-  background-color: #1e2a3a; /* A nice dark blue-gray */
-  color: #f0f0f0;            /* Light text color for contrast */
-  border: 1px solid #4a4a4a;    /* Optional: a subtle border for dark mode */
+.about .value-item:hover h3,
+.about .value-item:hover p {
+  color: #ffffff;
 }
 
 /* Team Section */
-.team {
+.about .team {
   padding: 6rem 0;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
+  color: #ffffff;
   text-align: center;
+  position: relative;
+  overflow: hidden;
 }
 
-.team h2 {
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin-bottom: 2rem;
+.about .team::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.11) 1px, transparent 1px);
+  background-size: 28px 28px;
+  opacity: 0.35;
+  pointer-events: none;
 }
 
-.team-description {
-  font-size: 1.2rem;
-  max-width: 800px;
+.about .team::after {
+  content: '';
+  position: absolute;
+  inset: auto -10% -45% auto;
+  width: 320px;
+  height: 320px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, transparent 72%);
+  pointer-events: none;
+}
+
+.about .team .container {
+  position: relative;
+  z-index: 1;
+}
+
+.about .team h2 {
+  color: #ffffff;
+  margin-bottom: 1.5rem;
+}
+
+.about .team-content {
+  max-width: 860px;
+  margin: 0 auto;
+}
+
+.about .team-description {
+  font-size: 1.16rem;
+  max-width: 760px;
   margin: 0 auto 3rem;
-  opacity: 0.9;
-  line-height: 1.8;
+  color: rgba(255, 255, 255, 0.9);
+  line-height: 1.85;
 }
 
-.team-stats {
+.about .team-stats {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 2rem;
+  gap: 1.5rem;
   max-width: 600px;
   margin: 0 auto;
 }
 
-.team-stat {
+.about .team-stat {
   padding: 1.5rem;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 15px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 18px;
   backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.16);
+  transition: transform var(--about-transition), box-shadow var(--about-transition), background-color var(--about-transition);
+}
+
+.about .team-stat:hover {
+  transform: translateY(-4px);
+  background: rgba(255, 255, 255, 0.16);
+  box-shadow: 0 20px 38px rgba(17, 24, 39, 0.22);
 }
 
-.team-stat-number {
+.about .team-stat-number {
   display: block;
   font-size: 2.5rem;
   font-weight: 800;
+  line-height: 1.05;
   margin-bottom: 0.5rem;
   background: linear-gradient(45deg, #ffd700, #ffed4a);
   -webkit-background-clip: text;
@@ -375,291 +510,319 @@
   background-clip: text;
 }
 
-.team-stat-label {
+.about .team-stat-label {
   font-size: 1rem;
-  opacity: 0.9;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
 }
 
 /* About CTA Section */
-.about-cta {
+.about .about-cta {
   padding: 6rem 0;
-  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-  color: white;
+  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 55%, #8b5cf6 100%);
+  color: #ffffff;
   text-align: center;
+  position: relative;
+  overflow: hidden;
 }
 
-.cta-content h2 {
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin-bottom: 1.5rem;
+.about .about-cta::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+  background-size: 28px 28px;
+  opacity: 0.3;
+  pointer-events: none;
 }
 
-.cta-content p {
-  font-size: 1.2rem;
-  max-width: 600px;
+.about .cta-content {
+  position: relative;
+  z-index: 1;
+  max-width: 760px;
+  margin: 0 auto;
+}
+
+.about .cta-content p {
+  font-size: 1.16rem;
+  max-width: 620px;
   margin: 0 auto 2.5rem;
-  opacity: 0.9;
-  line-height: 1.7;
+  color: rgba(255, 255, 255, 0.9);
+  line-height: 1.75;
 }
 
-.cta-buttons {
+.about .cta-buttons {
   display: flex;
   gap: 1rem;
   justify-content: center;
   flex-wrap: wrap;
 }
 
-.btn {
-  display: inline-block;
+.about .btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 52px;
   padding: 1rem 2rem;
   text-decoration: none;
-  border-radius: 50px;
-  font-weight: 600;
-  font-size: 1.1rem;
-  transition: all 0.3s ease;
+  border-radius: 999px;
+  font-weight: 700;
+  font-size: 1.05rem;
+  line-height: 1.2;
   text-align: center;
   border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
 }
 
-.btn-primary {
-  background: linear-gradient(45deg, #ffd700, #ffed4a);
-  color: #333;
-  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
+.about .btn:focus-visible {
+  outline: 3px solid rgba(255, 255, 255, 0.45);
+  outline-offset: 3px;
 }
 
-.btn-primary:hover {
+.about .btn-primary {
+  background: linear-gradient(135deg, #ffffff 0%, #fff7fb 100%);
+  color: #be185d;
+  box-shadow: 0 10px 24px rgba(157, 23, 77, 0.2);
+}
+
+.about .btn-primary:hover {
   transform: translateY(-3px);
-  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
+  color: #9d174d;
+  box-shadow: 0 16px 32px rgba(157, 23, 77, 0.28);
 }
 
-.btn-secondary {
-  background: transparent;
-  color: white;
-  border: 2px solid white;
+.about .btn-secondary {
+  background: rgba(255, 255, 255, 0.08);
+  color: #ffffff;
+  border-color: rgba(255, 255, 255, 0.88);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
 }
 
-.btn-secondary:hover {
-  background: white;
+.about .btn-secondary:hover {
+  background: #ffffff;
   color: #f5576c;
   transform: translateY(-3px);
+  box-shadow: 0 14px 30px rgba(17, 24, 39, 0.18);
 }
 
-/* Enhanced Responsive Design */
+/* Responsive Design */
 
 /* Large tablets and small desktops */
 @media (max-width: 1024px) {
-  .container {
+  .about .container {
     padding: 0 1.5rem;
   }
-  
-  .mission-content {
+
+  .about .mission-content {
     gap: 3rem;
   }
-  
-  .about-hero h1 {
+
+  .about .about-hero h1 {
     font-size: 3rem;
   }
-  
-  .hero-subtitle {
+
+  .about .hero-subtitle {
     font-size: 1.2rem;
   }
-  
-  .mission-text h2,
-  .story h2,
-  .features-deep h2,
-  .values h2,
-  .team h2 {
+
+  .about .mission-text h2,
+  .about .story h2,
+  .about .features-deep h2,
+  .about .values h2,
+  .about .team h2,
+  .about .cta-content h2 {
     font-size: 2.2rem;
   }
-  
-  .features-deep-grid {
+
+  .about .features-deep-grid {
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   }
-  
-  .mission-icon {
+
+  .about .story-content {
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  }
+
+  .about .mission-icon {
     font-size: 4rem;
   }
-  
-  .story-content {
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+
+  .about .story-card,
+  .about .feature-deep {
+    padding: 2.2rem;
   }
+
+  .about .team-description,
+  .about .cta-content p {
+    font-size: 1.1rem;
+  }
+
 }
 
 /* Tablets */
 @media (max-width: 768px) {
-  .container {
+  .about .container {
     padding: 0 1rem;
   }
-  
-  .about-hero {
+
+  .about .about-hero {
     padding: 4rem 0 3rem;
   }
-  
-  .about-hero h1 {
+
+  .about .about-hero h1 {
     font-size: 2.5rem;
   }
-  
-  .hero-subtitle {
+
+  .about .hero-subtitle {
     font-size: 1.1rem;
     padding: 0 1rem;
   }
-  
-  .mission {
+
+  .about .mission,
+  .about .features-deep,
+  .about .values,
+  .about .team,
+  .about .about-cta {
+    padding: 4rem 0;
+  }
+
+  .about .story {
     padding: 4rem 0;
   }
-  
-  .mission-content {
+
+  .about .mission-content {
     grid-template-columns: 1fr;
     gap: 2rem;
     text-align: center;
   }
-  
-  .mission-text {
+
+  .about .mission-text {
     order: 2;
   }
-  
-  .mission-visual {
+
+  .about .mission-visual {
     order: 1;
   }
-  
-  .mission-text h2,
-  .story h2,
-  .features-deep h2,
-  .values h2,
-  .team h2 {
+
+  .about .mission-text h2,
+  .about .story h2,
+  .about .features-deep h2,
+  .about .values h2,
+  .about .team h2,
+  .about .cta-content h2 {
     font-size: 2rem;
+  }
+
+  .about .story h2,
+  .about .features-deep h2,
+  .about .values h2,
+  .about .team h2 {
     margin-bottom: 2rem;
   }
-  
-  .mission-text p {
+
+  .about .mission-text p {
     font-size: 1rem;
+    line-height: 1.75;
   }
-  
-  .mission-icon {
+
+  .about .mission-icon {
     font-size: 3.5rem;
     margin-bottom: 1.5rem;
   }
-  
-  .mission-stats {
+
+  .about .mission-stats {
     gap: 1.5rem;
   }
-  
-  .stat-num {
+
+  .about .stat-num {
     font-size: 1.8rem;
   }
-  
-  .story {
-    padding: 4rem 0;
-  }
-  
-  .story-content {
+
+  .about .story-content,
+  .about .features-deep-grid {
     grid-template-columns: 1fr;
     gap: 1.5rem;
   }
-  
-  .story-card {
-    padding: 2rem;
+
+  .about .story-card,
+  .about .feature-deep,
+  .about .value-item {
     margin: 0 0.5rem;
   }
-  
-  .story-icon {
+
+  .about .story-card,
+  .about .feature-deep {
+    padding: 2rem;
+  }
+
+  .about .story-icon {
     font-size: 2.5rem;
     margin-bottom: 1rem;
   }
-  
-  .story-card h3 {
+
+  .about .story-card h3 {
     font-size: 1.3rem;
   }
-  
-  .features-deep {
-    padding: 4rem 0;
-  }
-  
-  .features-deep-grid {
-    grid-template-columns: 1fr;
-    gap: 1.5rem;
-  }
-  
-  .feature-deep {
-    padding: 2rem;
-    margin: 0 0.5rem;
-  }
-  
-  .feature-deep-header {
+
+  .about .feature-deep-header {
     flex-direction: column;
     text-align: center;
-    gap: 0.5rem;
+    gap: 0.65rem;
   }
-  
-  .feature-deep-icon {
+
+  .about .feature-deep-icon {
     font-size: 2rem;
   }
-  
-  .values {
-    padding: 4rem 0;
-  }
-  
-  .values-grid {
+
+  .about .values-grid {
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 1.5rem;
   }
-  
-  .value-item {
-    padding: 1.5rem;
-    margin: 0 0.5rem;
+
+  .about .value-item {
+    padding: 1.75rem 1.5rem;
   }
-  
-  .value-icon {
+
+  .about .value-icon {
     font-size: 2.5rem;
   }
-  
-  .value-item h3 {
+
+  .about .value-item h3 {
     font-size: 1.2rem;
   }
-  
-  .team {
-    padding: 4rem 0;
-  }
-  
-  .team-description {
-    font-size: 1.1rem;
+
+  .about .team-description {
+    font-size: 1.05rem;
     padding: 0 1rem;
   }
-  
-  .team-stats {
+
+  .about .team-stats {
     grid-template-columns: 1fr;
     gap: 1.5rem;
     max-width: 400px;
   }
-  
-  .team-stat {
+
+  .about .team-stat {
     padding: 1.25rem;
   }
-  
-  .team-stat-number {
+
+  .about .team-stat-number {
     font-size: 2rem;
   }
-  
-  .about-cta {
-    padding: 4rem 0;
-  }
-  
-  .cta-content h2 {
-    font-size: 2.2rem;
-  }
-  
-  .cta-content p {
-    font-size: 1.1rem;
+
+  .about .cta-content p {
+    font-size: 1.05rem;
     padding: 0 1rem;
   }
-  
-  .cta-buttons {
+
+  .about .cta-buttons {
     flex-direction: column;
     align-items: center;
     gap: 0.75rem;
   }
-  
-  .btn {
+
+  .about .btn {
     min-width: 200px;
     padding: 0.875rem 1.5rem;
   }
@@ -667,144 +830,143 @@
 
 /* Mobile phones */
 @media (max-width: 480px) {
-  .container {
+  .about .container {
     padding: 0 1rem;
   }
-  
-  .about-hero {
+
+  .about .about-hero {
     padding: 3rem 0 2rem;
   }
-  
-  .about-hero h1 {
+
+  .about .about-hero h1 {
     font-size: 2rem;
-    line-height: 1.1;
+    line-height: 1.08;
     margin-bottom: 1rem;
   }
-  
-  .hero-subtitle {
+
+  .about .hero-subtitle {
     font-size: 1rem;
     padding: 0 0.5rem;
   }
-  
-  .mission,
-  .story,
-  .features-deep,
-  .values,
-  .team,
-  .about-cta {
+
+  .about .mission,
+  .about .story,
+  .about .features-deep,
+  .about .values,
+  .about .team,
+  .about .about-cta {
     padding: 3rem 0;
   }
-  
-  .mission-text h2,
-  .story h2,
-  .features-deep h2,
-  .values h2,
-  .team h2 {
+
+  .about .mission-text h2,
+  .about .story h2,
+  .about .features-deep h2,
+  .about .values h2,
+  .about .team h2,
+  .about .cta-content h2 {
     font-size: 1.8rem;
+  }
+
+  .about .story h2,
+  .about .features-deep h2,
+  .about .values h2,
+  .about .team h2 {
     margin-bottom: 1.5rem;
   }
-  
-  .mission-text p {
+
+  .about .mission-text p {
     font-size: 0.95rem;
     margin-bottom: 1rem;
   }
-  
-  .mission-icon {
+
+  .about .mission-icon {
     font-size: 3rem;
     margin-bottom: 1rem;
   }
-  
-  .mission-stats {
+
+  .about .mission-stats {
     flex-direction: column;
     gap: 1rem;
     align-items: center;
   }
-  
-  .mini-stat {
+
+  .about .mini-stat {
     width: 100%;
     max-width: 200px;
   }
-  
-  .stat-num {
+
+  .about .stat-num {
     font-size: 1.6rem;
   }
-  
-  .stat-text {
-    font-size: 0.85rem;
+
+  .about .stat-text {
+    font-size: 0.86rem;
   }
-  
-  .story-card,
-  .feature-deep,
-  .value-item {
+
+  .about .story-card,
+  .about .feature-deep,
+  .about .value-item {
     padding: 1.5rem;
     margin: 0 0.25rem;
   }
-  
-  .story-icon,
-  .value-icon {
+
+  .about .story-icon,
+  .about .value-icon {
     font-size: 2rem;
     margin-bottom: 0.75rem;
   }
-  
-  .story-card h3,
-  .value-item h3 {
+
+  .about .story-card h3,
+  .about .value-item h3 {
     font-size: 1.2rem;
     margin-bottom: 0.75rem;
   }
-  
-  .story-card p,
-  .value-item p,
-  .feature-deep p {
-    font-size: 0.9rem;
-    line-height: 1.5;
+
+  .about .story-card p,
+  .about .feature-deep p,
+  .about .value-item p,
+  .about .feature-deep ul li {
+    font-size: 0.92rem;
+    line-height: 1.65;
   }
-  
-  .feature-deep-header {
+
+  .about .feature-deep-header {
     gap: 0.75rem;
   }
-  
-  .feature-deep-icon {
+
+  .about .feature-deep-icon {
     font-size: 1.8rem;
   }
-  
-  .feature-deep h3 {
+
+  .about .feature-deep h3 {
     font-size: 1.1rem;
   }
-  
-  .feature-deep ul li {
-    font-size: 0.9rem;
-    margin-bottom: 0.4rem;
-  }
-  
-  .team-description {
+
+  .about .team-description {
     font-size: 1rem;
     padding: 0 0.5rem;
     margin-bottom: 2rem;
   }
-  
-  .team-stat {
+
+  .about .team-stat {
     padding: 1rem;
   }
-  
-  .team-stat-number {
+
+  .about .team-stat-number {
     font-size: 1.8rem;
   }
-  
-  .team-stat-label {
+
+  .about .team-stat-label {
     font-size: 0.9rem;
   }
-  
-  .cta-content h2 {
-    font-size: 2rem;
-  }
-  
-  .cta-content p {
+
+  .about .cta-content p {
     font-size: 1rem;
     padding: 0 0.5rem;
     margin-bottom: 2rem;
   }
-  
-  .btn {
+
+  .about .btn {
     min-width: 180px;
     padding: 0.75rem 1.25rem;
     font-size: 1rem;
@@ -813,61 +975,72 @@
 
 /* Extra small phones */
 @media (max-width: 360px) {
-  .container {
+  .about .container {
     padding: 0 0.75rem;
   }
-  
-  .about-hero h1 {
+
+  .about .about-hero h1 {
     font-size: 1.8rem;
   }
-  
-  .hero-subtitle {
+
+  .about .hero-subtitle {
     font-size: 0.95rem;
   }
-  
-  .mission-text h2,
-  .story h2,
-  .features-deep h2,
-  .values h2,
-  .team h2 {
+
+  .about .mission-text h2,
+  .about .story h2,
+  .about .features-deep h2,
+  .about .values h2,
+  .about .team h2,
+  .about .cta-content h2 {
     font-size: 1.6rem;
   }
-  
-  .story-card,
-  .feature-deep,
-  .value-item {
+
+  .about .story-card,
+  .about .feature-deep,
+  .about .value-item {
     padding: 1.25rem;
     margin: 0;
   }
-  
-  .mission-stats {
+
+  .about .mission-stats {
     gap: 0.75rem;
   }
-  
-  .team-description {
+
+  .about .team-description {
     padding: 0 0.25rem;
   }
-  
-  .cta-content p {
+
+  .about .cta-content p {
     padding: 0 0.25rem;
   }
-  
-  .btn {
+
+  .about .btn {
     min-width: 160px;
     padding: 0.625rem 1rem;
     font-size: 0.95rem;
   }
-  
-  .feature-deep-header {
+
+  .about .feature-deep-header {
     gap: 0.5rem;
   }
-  
-  .mission-icon {
+
+  .about .mission-icon {
     font-size: 2.5rem;
   }
-  
-  .story-icon,
-  .value-icon {
+
+  .about .story-icon,
+  .about .value-icon {
     font-size: 1.8rem;
   }
-}
\ No newline at end of file
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .about .story-card,
+  .about .feature-deep,
+  .about .value-item,
+  .about .team-stat,
+  .about .btn {
+    transition: none;
+  }
+}

From 6ed29e76f9d1fb0a57f06c17be635c0cd982bc7f Mon Sep 17 00:00:00 2001
From: jaikaran109 <jaik05581@gmail.com>
Date: Sat, 23 May 2026 00:43:41 +0530
Subject: [PATCH 4/4] Update Analytics.css

---
 client/src/pages/Analytics.css | 1122 ++++++--------------------------
 1 file changed, 204 insertions(+), 918 deletions(-)

diff --git a/client/src/pages/Analytics.css b/client/src/pages/Analytics.css
index 0d0530f..e55e514 100644
--- a/client/src/pages/Analytics.css
+++ b/client/src/pages/Analytics.css
@@ -1,1046 +1,332 @@
-/* About.css - StudyMatePlus - Polished responsive styling */
+/* Base Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
-.about {
-  --about-text: #1f2937;
-  --about-heading: #111827;
-  --about-muted: #5b6474;
-  --about-soft-bg: #f8fafc;
-  --about-section-bg: #ffffff;
-  --about-surface: #ffffff;
-  --about-surface-alt: #f8fafc;
-  --about-border: rgba(148, 163, 184, 0.18);
-  --about-border-strong: rgba(102, 126, 234, 0.26);
-  --about-shadow-sm: 0 10px 28px rgba(15, 23, 42, 0.06);
-  --about-shadow-md: 0 16px 38px rgba(15, 23, 42, 0.1);
-  --about-shadow-lg: 0 24px 48px rgba(79, 70, 229, 0.16);
-  --about-transition: 0.28s ease;
+.home {
+  min-height: 100vh;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   line-height: 1.6;
-  color: var(--about-text);
-  background: var(--bg, #ffffff);
-}
-
-html[data-theme="dark"] .about {
-  --about-text: #e5edf7;
-  --about-heading: #ffffff;
-  --about-muted: #c9d3e0;
-  --about-soft-bg: #111827;
-  --about-section-bg: #0f172a;
-  --about-surface: #182436;
-  --about-surface-alt: #1b293c;
-  --about-border: rgba(255, 255, 255, 0.08);
-  --about-border-strong: rgba(129, 140, 248, 0.34);
-  --about-shadow-sm: 0 14px 32px rgba(2, 6, 23, 0.24);
-  --about-shadow-md: 0 18px 38px rgba(2, 6, 23, 0.3);
-  --about-shadow-lg: 0 26px 52px rgba(2, 6, 23, 0.4);
+  color: #333;
 }
 
-.about *,
-.about *::before,
-.about *::after {
-  box-sizing: border-box;
-}
-
-.about .container {
+.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 2rem;
 }
 
-/* Shared typography */
-.about .mission-text h2,
-.about .story h2,
-.about .features-deep h2,
-.about .values h2,
-.about .team h2,
-.about .cta-content h2 {
-  font-size: 2.5rem;
-  font-weight: 800;
-  line-height: 1.15;
-  letter-spacing: -0.02em;
-}
-
-.about .story h2,
-.about .features-deep h2,
-.about .values h2,
-.about .team h2 {
-  text-align: center;
-  margin-bottom: 3rem;
-}
-
-.about .mission-text h2 {
-  margin-bottom: 1.5rem;
-  color: var(--about-heading);
-}
-
-.about .cta-content h2 {
-  margin-bottom: 1.5rem;
-  color: #ffffff;
-}
-
-/* About Hero Section */
-.about .about-hero {
+.hero {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 6rem 0 4rem;
-  color: #ffffff;
-  text-align: center;
+  min-height: 60vh;
+  display: flex;
+  align-items: center;
   position: relative;
   overflow: hidden;
 }
 
-.about .about-hero::before {
+.hero::before {
   content: '';
   position: absolute;
-  inset: 0;
-  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><pattern id='grid' width='10' height='10' patternUnits='userSpaceOnUse'><path d='M 10 0 L 0 0 0 10' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/></pattern></defs><rect width='100' height='100' fill='url(%23grid)'/></svg>");
   opacity: 0.3;
 }
 
-.about .about-hero::after {
-  content: '';
-  position: absolute;
-  width: 420px;
-  height: 420px;
-  top: -170px;
-  right: -130px;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 72%);
-  pointer-events: none;
-}
-
-.about .about-hero-content {
+.hero-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+  align-items: center;
+  padding: 2rem;
   position: relative;
   z-index: 1;
-  max-width: 760px;
-  margin: 0 auto;
 }
 
-.about .about-hero h1 {
-  font-size: 3.5rem;
+.hero-content {
+  color: white;
+  text-align: center;
+}
+
+.hero-title {
+  font-size: 3rem;
   font-weight: 800;
-  line-height: 1.05;
-  letter-spacing: -0.035em;
-  margin-bottom: 1.25rem;
+  margin-bottom: 1.5rem;
+  line-height: 1.2;
+}
+
+.brand-highlight {
   background: linear-gradient(45deg, #ffd700, #ffed4a);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
-.about .hero-subtitle {
+.hero-subtitle {
   font-size: 1.3rem;
-  max-width: 640px;
+  opacity: 0.9;
+  max-width: 600px;
   margin: 0 auto;
-  color: rgba(255, 255, 255, 0.9);
-  line-height: 1.75;
-}
-
-/* Mission Section */
-.about .mission {
-  padding: 6rem 0;
-  background: var(--about-soft-bg);
-}
-
-.about .mission-content {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 4rem;
-  align-items: center;
 }
 
-.about .mission-text p {
-  font-size: 1.05rem;
-  color: var(--about-muted);
-  margin: 0 0 1.35rem;
-  line-height: 1.85;
-}
-
-.about .mission-text p:last-child {
-  margin-bottom: 0;
-}
-
-.about .mission-visual {
-  text-align: center;
-}
-
-.about .mission-icon {
-  font-size: 5rem;
-  margin-bottom: 1.75rem;
-  display: block;
-  filter: drop-shadow(0 10px 22px rgba(79, 70, 229, 0.16));
-}
-
-.about .mission-stats {
+.analytics-section {
+  padding: 4rem 2rem;
   display: flex;
+  flex-wrap: wrap;
   gap: 2rem;
   justify-content: center;
-  flex-wrap: wrap;
-}
-
-.about .mini-stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 110px;
-}
-
-.about .stat-num {
-  font-size: 2rem;
-  font-weight: 800;
-  line-height: 1.1;
-  color: #667eea;
-  margin-bottom: 0.45rem;
-}
-
-.about .stat-text {
-  font-size: 0.92rem;
-  color: var(--about-muted);
-  font-weight: 600;
-  letter-spacing: 0.01em;
-}
-
-/* Shared card styling */
-.about .story-card,
-.about .feature-deep,
-.about .value-item {
-  position: relative;
-  overflow: hidden;
-  border-radius: 18px;
-  border: 1px solid var(--about-border);
-  box-shadow: var(--about-shadow-sm);
-  transition: transform var(--about-transition), box-shadow var(--about-transition), border-color var(--about-transition), background-color var(--about-transition), color var(--about-transition);
-}
-
-.about .story-card::before,
-.about .feature-deep::before,
-.about .value-item::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(180deg, rgba(102, 126, 234, 0.08) 0%, transparent 36%);
-  opacity: 0;
-  transition: opacity var(--about-transition);
-  pointer-events: none;
-}
-
-.about .story-card:hover,
-.about .feature-deep:hover,
-.about .value-item:hover {
-  transform: translateY(-6px);
-  border-color: var(--about-border-strong);
-  box-shadow: var(--about-shadow-lg);
-}
-
-.about .story-card:hover::before,
-.about .feature-deep:hover::before,
-.about .value-item:hover::before {
-  opacity: 1;
-}
-
-.about .story-card h3,
-.about .feature-deep h3,
-.about .value-item h3 {
-  color: var(--about-heading);
-}
-
-.about .story-card p,
-.about .feature-deep p,
-.about .value-item p {
-  color: var(--about-muted);
-  font-size: 0.98rem;
-  line-height: 1.75;
-}
-
-/* Story Section */
-.about .story {
-  padding: 4rem 0;
-  background: var(--about-section-bg);
+  background-color: #f9f9f9;
 }
 
-.about .story h2 {
-  color: var(--about-heading);
-}
-
-.about .story-content {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 2rem;
-  align-items: stretch;
+.chart-container {
+  background: white;
+  padding: 2rem;
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
+  width: 100%;
+  max-width: 500px;
 }
 
-.about .story-card {
-  background: var(--about-surface-alt);
-  padding: 2.4rem 2.25rem;
+.chart-container h2 {
+  margin-bottom: 1rem;
+  font-size: 1.4rem;
+  color: #333;
   text-align: center;
 }
-
-.about .story-icon {
-  font-size: 3rem;
-  margin-bottom: 1.25rem;
-  display: block;
-  line-height: 1;
+select {
+  border: 2px solid #667eea;
+  border-radius: 6px;
+  background-color: white;
+  color: #333;
 }
 
-.about .story-card h3 {
-  font-size: 1.45rem;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  margin: 0 0 0.95rem;
+button:hover {
+  background-color: #5a3e91;
 }
-
-.about .story-card p {
-  margin: 0;
+.insights-section, .filter-section, .download-section {
+  margin-top: 3rem;
+  padding: 1rem 2rem;
+  background-color: #f9f9f9;
+  border-radius: 12px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
 }
 
-/* Features Deep Dive */
-.about .features-deep {
-  padding: 6rem 0;
-  background: var(--about-soft-bg);
+.insights-section h2,
+.filter-section h2 {
+  margin-bottom: 1rem;
+  color: #444;
 }
 
-.about .features-deep h2 {
-  color: var(--about-heading);
+.insights-section ul {
+  list-style: disc;
+  padding-left: 1.5rem;
+  font-size: 1.1rem;
 }
 
-.about .features-deep-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-  gap: 2rem;
-  align-items: stretch;
+.filter-section select {
+  padding: 0.6rem 1rem;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 6px;
 }
 
-.about .feature-deep {
-  background: var(--about-surface);
-  padding: 2.5rem;
-  display: flex;
-  flex-direction: column;
-  box-shadow: var(--about-shadow-md);
+.download-btn {
+  margin-top: 1rem;
+  padding: 0.8rem 1.5rem;
+  font-size: 1rem;
+  background-color: #ffd700;
+  color: #333;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
 }
 
-.about .feature-deep-header {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 1.35rem;
+.download-btn:hover {
+  background-color: #ffc400;
 }
-
-.about .feature-deep-icon {
-  font-size: 2.4rem;
-  line-height: 1;
-  flex-shrink: 0;
+/* Section Wrappers */
+.insights-section,
+.filter-section,
+.download-section {
+  margin-top: 3rem;
+  padding: 1.5rem 2rem;
+  background: linear-gradient(135deg, #fefcea, #dfeaf7);
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-.about .feature-deep h3 {
-  font-size: 1.35rem;
-  font-weight: 700;
-  line-height: 1.3;
-  margin: 0;
+.insights-section:hover,
+.filter-section:hover,
+.download-section:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
-.about .feature-deep p {
-  margin: 0 0 1.35rem;
+/* Headings */
+.insights-section h2,
+.filter-section h2 {
+  margin-bottom: 1rem;
+  color: #333;
+  font-size: 1.6rem;
+  font-weight: 600;
+  border-left: 6px solid #ffda00;
+  padding-left: 12px;
 }
 
-.about .feature-deep ul {
+/* Insights List */
+.insights-section ul {
   list-style: none;
-  padding: 0;
-  margin: auto 0 0;
-  display: grid;
-  gap: 0.75rem;
+  padding-left: 0;
+  font-size: 1.1rem;
+  color: #444;
 }
 
-.about .feature-deep ul li {
-  color: var(--about-text);
+.insights-section ul li {
+  margin-bottom: 0.8rem;
+  padding-left: 1.5rem;
   position: relative;
-  padding-left: 1.65rem;
-  line-height: 1.65;
 }
 
-.about .feature-deep ul li::before {
-  content: '\2713';
+.insights-section ul li::before {
+  content: "⭐";
   position: absolute;
-  top: 0.05rem;
   left: 0;
-  color: #667eea;
-  font-weight: 700;
-}
-
-/* Values Section */
-.about .values {
-  padding: 6rem 0;
-  background: var(--about-section-bg);
-}
-
-.about .values h2 {
-  color: var(--about-heading);
-}
-
-.about .values-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 2rem;
-  align-items: stretch;
-}
-
-.about .value-item {
-  background: var(--about-surface-alt);
-  padding: 2rem 1.75rem;
-  text-align: center;
-}
-
-.about .value-item:hover {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  box-shadow: 0 22px 46px rgba(118, 75, 162, 0.24);
-}
-
-html[data-theme="dark"] .about .value-item:hover {
-  box-shadow: 0 26px 52px rgba(2, 6, 23, 0.42);
-}
-
-.about .value-icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  display: block;
-  line-height: 1;
-}
-
-.about .value-item h3 {
-  font-size: 1.3rem;
-  font-weight: 700;
-  margin: 0 0 0.8rem;
-}
-
-.about .value-item p {
-  margin: 0;
-}
-
-.about .value-item:hover h3,
-.about .value-item:hover p {
-  color: #ffffff;
+  top: 0;
 }
 
-/* Team Section */
-.about .team {
-  padding: 6rem 0;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #ffffff;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.about .team::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.11) 1px, transparent 1px);
-  background-size: 28px 28px;
-  opacity: 0.35;
-  pointer-events: none;
-}
-
-.about .team::after {
-  content: '';
-  position: absolute;
-  inset: auto -10% -45% auto;
-  width: 320px;
-  height: 320px;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, transparent 72%);
-  pointer-events: none;
-}
-
-.about .team .container {
-  position: relative;
-  z-index: 1;
-}
-
-.about .team h2 {
-  color: #ffffff;
-  margin-bottom: 1.5rem;
-}
-
-.about .team-content {
-  max-width: 860px;
-  margin: 0 auto;
-}
-
-.about .team-description {
-  font-size: 1.16rem;
-  max-width: 760px;
-  margin: 0 auto 3rem;
-  color: rgba(255, 255, 255, 0.9);
-  line-height: 1.85;
-}
-
-.about .team-stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1.5rem;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.about .team-stat {
-  padding: 1.5rem;
-  background: rgba(255, 255, 255, 0.12);
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 18px;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.16);
-  transition: transform var(--about-transition), box-shadow var(--about-transition), background-color var(--about-transition);
-}
-
-.about .team-stat:hover {
-  transform: translateY(-4px);
-  background: rgba(255, 255, 255, 0.16);
-  box-shadow: 0 20px 38px rgba(17, 24, 39, 0.22);
-}
-
-.about .team-stat-number {
-  display: block;
-  font-size: 2.5rem;
-  font-weight: 800;
-  line-height: 1.05;
-  margin-bottom: 0.5rem;
-  background: linear-gradient(45deg, #ffd700, #ffed4a);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.about .team-stat-label {
+/* Filter Dropdown */
+.filter-section select {
+  padding: 0.7rem 1rem;
   font-size: 1rem;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.9);
-}
-
-/* About CTA Section */
-.about .about-cta {
-  padding: 6rem 0;
-  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 55%, #8b5cf6 100%);
-  color: #ffffff;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.about .about-cta::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
-  background-size: 28px 28px;
-  opacity: 0.3;
-  pointer-events: none;
-}
-
-.about .cta-content {
-  position: relative;
-  z-index: 1;
-  max-width: 760px;
-  margin: 0 auto;
-}
-
-.about .cta-content p {
-  font-size: 1.16rem;
-  max-width: 620px;
-  margin: 0 auto 2.5rem;
-  color: rgba(255, 255, 255, 0.9);
-  line-height: 1.75;
-}
-
-.about .cta-buttons {
-  display: flex;
-  gap: 1rem;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.about .btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 52px;
-  padding: 1rem 2rem;
-  text-decoration: none;
-  border-radius: 999px;
-  font-weight: 700;
-  font-size: 1.05rem;
-  line-height: 1.2;
-  text-align: center;
-  border: 2px solid transparent;
+  background-color: #fff8d6;
+  border: 1px solid #e0c000;
+  border-radius: 8px;
+  color: #333;
+  outline: none;
+  transition: border-color 0.3s ease;
+}
+
+.filter-section select:focus {
+  border-color: #c9a900;
+}
+
+/* Download Button */
+.download-btn {
+  display: inline-block;
+  margin-top: 1.2rem;
+  padding: 0.9rem 1.8rem;
+  font-size: 1.1rem;
+  background: linear-gradient(to right, #ffd700, #ffb300);
+  color: #222;
+  font-weight: 600;
+  border: none;
+  border-radius: 12px;
   cursor: pointer;
-  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
-}
-
-.about .btn:focus-visible {
-  outline: 3px solid rgba(255, 255, 255, 0.45);
-  outline-offset: 3px;
-}
-
-.about .btn-primary {
-  background: linear-gradient(135deg, #ffffff 0%, #fff7fb 100%);
-  color: #be185d;
-  box-shadow: 0 10px 24px rgba(157, 23, 77, 0.2);
-}
-
-.about .btn-primary:hover {
-  transform: translateY(-3px);
-  color: #9d174d;
-  box-shadow: 0 16px 32px rgba(157, 23, 77, 0.28);
-}
-
-.about .btn-secondary {
-  background: rgba(255, 255, 255, 0.08);
-  color: #ffffff;
-  border-color: rgba(255, 255, 255, 0.88);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
+  transition: background 0.3s ease, transform 0.2s ease;
 }
 
-.about .btn-secondary:hover {
-  background: #ffffff;
-  color: #f5576c;
-  transform: translateY(-3px);
-  box-shadow: 0 14px 30px rgba(17, 24, 39, 0.18);
+.download-btn:hover {
+  background: linear-gradient(to right, #ffc400, #ffa000);
+  transform: scale(1.03);
 }
 
-/* Responsive Design */
-
-/* Large tablets and small desktops */
-@media (max-width: 1024px) {
-  .about .container {
-    padding: 0 1.5rem;
-  }
-
-  .about .mission-content {
-    gap: 3rem;
-  }
-
-  .about .about-hero h1 {
-    font-size: 3rem;
-  }
-
-  .about .hero-subtitle {
-    font-size: 1.2rem;
-  }
-
-  .about .mission-text h2,
-  .about .story h2,
-  .about .features-deep h2,
-  .about .values h2,
-  .about .team h2,
-  .about .cta-content h2 {
-    font-size: 2.2rem;
-  }
-
-  .about .features-deep-grid {
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  }
-
-  .about .story-content {
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  }
-
-  .about .mission-icon {
-    font-size: 4rem;
-  }
-
-  .about .story-card,
-  .about .feature-deep {
-    padding: 2.2rem;
-  }
-
-  .about .team-description,
-  .about .cta-content p {
-    font-size: 1.1rem;
-  }
 
-}
+/* --- NEW: RESPONSIVE STYLES --- */
 
-/* Tablets */
+/* For Tablets and smaller devices */
 @media (max-width: 768px) {
-  .about .container {
-    padding: 0 1rem;
+  .container {
+    padding: 0 1.5rem;
   }
 
-  .about .about-hero {
-    padding: 4rem 0 3rem;
+  .hero {
+    min-height: 50vh;
   }
 
-  .about .about-hero h1 {
+  .hero-title {
     font-size: 2.5rem;
   }
 
-  .about .hero-subtitle {
+  .hero-subtitle {
     font-size: 1.1rem;
-    padding: 0 1rem;
-  }
-
-  .about .mission,
-  .about .features-deep,
-  .about .values,
-  .about .team,
-  .about .about-cta {
-    padding: 4rem 0;
-  }
-
-  .about .story {
-    padding: 4rem 0;
-  }
-
-  .about .mission-content {
-    grid-template-columns: 1fr;
-    gap: 2rem;
-    text-align: center;
-  }
-
-  .about .mission-text {
-    order: 2;
-  }
-
-  .about .mission-visual {
-    order: 1;
-  }
-
-  .about .mission-text h2,
-  .about .story h2,
-  .about .features-deep h2,
-  .about .values h2,
-  .about .team h2,
-  .about .cta-content h2 {
-    font-size: 2rem;
-  }
-
-  .about .story h2,
-  .about .features-deep h2,
-  .about .values h2,
-  .about .team h2 {
-    margin-bottom: 2rem;
-  }
-
-  .about .mission-text p {
-    font-size: 1rem;
-    line-height: 1.75;
-  }
-
-  .about .mission-icon {
-    font-size: 3.5rem;
-    margin-bottom: 1.5rem;
-  }
-
-  .about .mission-stats {
-    gap: 1.5rem;
-  }
-
-  .about .stat-num {
-    font-size: 1.8rem;
-  }
-
-  .about .story-content,
-  .about .features-deep-grid {
-    grid-template-columns: 1fr;
-    gap: 1.5rem;
   }
-
-  .about .story-card,
-  .about .feature-deep,
-  .about .value-item {
-    margin: 0 0.5rem;
-  }
-
-  .about .story-card,
-  .about .feature-deep {
-    padding: 2rem;
-  }
-
-  .about .story-icon {
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-  }
-
-  .about .story-card h3 {
-    font-size: 1.3rem;
+  
+  .analytics-section {
+    padding: 3rem 1.5rem;
   }
 
-  .about .feature-deep-header {
-    flex-direction: column;
-    text-align: center;
-    gap: 0.65rem;
-  }
-
-  .about .feature-deep-icon {
-    font-size: 2rem;
-  }
-
-  .about .values-grid {
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1.5rem;
-  }
-
-  .about .value-item {
-    padding: 1.75rem 1.5rem;
-  }
-
-  .about .value-icon {
-    font-size: 2.5rem;
-  }
-
-  .about .value-item h3 {
-    font-size: 1.2rem;
-  }
-
-  .about .team-description {
-    font-size: 1.05rem;
-    padding: 0 1rem;
-  }
-
-  .about .team-stats {
-    grid-template-columns: 1fr;
-    gap: 1.5rem;
-    max-width: 400px;
-  }
-
-  .about .team-stat {
-    padding: 1.25rem;
-  }
-
-  .about .team-stat-number {
-    font-size: 2rem;
-  }
-
-  .about .cta-content p {
-    font-size: 1.05rem;
-    padding: 0 1rem;
-  }
-
-  .about .cta-buttons {
-    flex-direction: column;
-    align-items: center;
-    gap: 0.75rem;
+  .chart-container {
+    padding: 1.5rem;
   }
-
-  .about .btn {
-    min-width: 200px;
-    padding: 0.875rem 1.5rem;
+  
+  .insights-section h2,
+  .filter-section h2 {
+    font-size: 1.4rem;
   }
 }
 
-/* Mobile phones */
+/* For Mobile Phones */
 @media (max-width: 480px) {
-  .about .container {
+  .container {
     padding: 0 1rem;
   }
 
-  .about .about-hero {
-    padding: 3rem 0 2rem;
+  .hero {
+    min-height: 40vh;
+    padding: 2rem 0;
   }
 
-  .about .about-hero h1 {
+  .hero-title {
     font-size: 2rem;
-    line-height: 1.08;
     margin-bottom: 1rem;
   }
 
-  .about .hero-subtitle {
+  .hero-subtitle {
     font-size: 1rem;
-    padding: 0 0.5rem;
-  }
-
-  .about .mission,
-  .about .story,
-  .about .features-deep,
-  .about .values,
-  .about .team,
-  .about .about-cta {
-    padding: 3rem 0;
-  }
-
-  .about .mission-text h2,
-  .about .story h2,
-  .about .features-deep h2,
-  .about .values h2,
-  .about .team h2,
-  .about .cta-content h2 {
-    font-size: 1.8rem;
-  }
-
-  .about .story h2,
-  .about .features-deep h2,
-  .about .values h2,
-  .about .team h2 {
-    margin-bottom: 1.5rem;
-  }
-
-  .about .mission-text p {
-    font-size: 0.95rem;
-    margin-bottom: 1rem;
   }
-
-  .about .mission-icon {
-    font-size: 3rem;
-    margin-bottom: 1rem;
-  }
-
-  .about .mission-stats {
-    flex-direction: column;
-    gap: 1rem;
-    align-items: center;
-  }
-
-  .about .mini-stat {
-    width: 100%;
-    max-width: 200px;
+  
+  .analytics-section {
+    padding: 2rem 1rem;
   }
 
-  .about .stat-num {
-    font-size: 1.6rem;
-  }
-
-  .about .stat-text {
-    font-size: 0.86rem;
-  }
-
-  .about .story-card,
-  .about .feature-deep,
-  .about .value-item {
-    padding: 1.5rem;
-    margin: 0 0.25rem;
-  }
-
-  .about .story-icon,
-  .about .value-icon {
-    font-size: 2rem;
-    margin-bottom: 0.75rem;
-  }
-
-  .about .story-card h3,
-  .about .value-item h3 {
-    font-size: 1.2rem;
-    margin-bottom: 0.75rem;
-  }
-
-  .about .story-card p,
-  .about .feature-deep p,
-  .about .value-item p,
-  .about .feature-deep ul li {
-    font-size: 0.92rem;
-    line-height: 1.65;
-  }
-
-  .about .feature-deep-header {
-    gap: 0.75rem;
-  }
-
-  .about .feature-deep-icon {
-    font-size: 1.8rem;
-  }
-
-  .about .feature-deep h3 {
-    font-size: 1.1rem;
-  }
-
-  .about .team-description {
-    font-size: 1rem;
-    padding: 0 0.5rem;
-    margin-bottom: 2rem;
-  }
-
-  .about .team-stat {
+  .chart-container {
     padding: 1rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   }
 
-  .about .team-stat-number {
-    font-size: 1.8rem;
+  .chart-container h2 {
+    font-size: 1.2rem;
   }
 
-  .about .team-stat-label {
-    font-size: 0.9rem;
+  .insights-section, .filter-section, .download-section {
+    margin-top: 2rem;
+    padding: 1rem 1.5rem;
   }
 
-  .about .cta-content p {
-    font-size: 1rem;
-    padding: 0 0.5rem;
-    margin-bottom: 2rem;
+  .insights-section h2,
+  .filter-section h2 {
+    font-size: 1.2rem;
+    padding-left: 10px;
+    border-left-width: 4px;
   }
 
-  .about .btn {
-    min-width: 180px;
-    padding: 0.75rem 1.25rem;
+  .insights-section ul {
     font-size: 1rem;
   }
-}
 
-/* Extra small phones */
-@media (max-width: 360px) {
-  .about .container {
-    padding: 0 0.75rem;
+  .filter-section select {
+    width: 100%; /* Make dropdown full-width for easier tapping */
   }
 
-  .about .about-hero h1 {
-    font-size: 1.8rem;
-  }
-
-  .about .hero-subtitle {
-    font-size: 0.95rem;
-  }
-
-  .about .mission-text h2,
-  .about .story h2,
-  .about .features-deep h2,
-  .about .values h2,
-  .about .team h2,
-  .about .cta-content h2 {
-    font-size: 1.6rem;
-  }
-
-  .about .story-card,
-  .about .feature-deep,
-  .about .value-item {
-    padding: 1.25rem;
-    margin: 0;
-  }
-
-  .about .mission-stats {
-    gap: 0.75rem;
-  }
-
-  .about .team-description {
-    padding: 0 0.25rem;
-  }
-
-  .about .cta-content p {
-    padding: 0 0.25rem;
-  }
-
-  .about .btn {
-    min-width: 160px;
-    padding: 0.625rem 1rem;
-    font-size: 0.95rem;
-  }
-
-  .about .feature-deep-header {
-    gap: 0.5rem;
-  }
-
-  .about .mission-icon {
-    font-size: 2.5rem;
-  }
-
-  .about .story-icon,
-  .about .value-icon {
-    font-size: 1.8rem;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .about .story-card,
-  .about .feature-deep,
-  .about .value-item,
-  .about .team-stat,
-  .about .btn {
-    transition: none;
+  .download-btn {
+    width: 100%; /* Make button full-width */
+    padding: 0.8rem 1rem;
   }
 }