/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Climate+Crisis:YEAR@1979&family=Cute+Font&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Indie+Flower&family=Lobster&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Space+Grotesk:wght@300..700&family=Stalinist+One&family=Titan+One&display=swap');
/* ===== ROOT COLORS ===== */
:root{
    --bg-main: #F7F5FF;
    --bg-soft: #EEF4FF;
    --primary: #7C6CFF;
    --primary-dark: #5A4BFF;
    --accent: #6EC5FF;
    --accent-dark: #3AA6FF;
    --text-main: #111;
    --text-light: #555;
}

/* ===== RESET ===== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'DM Sans', sans-serif;
    background:var(--bg-main);
    color:var(--text-main);
}

/* ===== SECTIONS ===== */
.section{
    min-height:100vh;
    padding:80px 10%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* ===== NAVBAR (SHARP) ===== */
.navbar{
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);

    width: 85%;
    max-width: 1100px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 14px 24px;

    background: #fff;
    border: 2px solid #111;

    border-radius: 0;

    box-shadow: 6px 6px 0px var(--primary);

    z-index: 1000;
}

/* LOGO */
.logo{
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 1px;
}

.logo h4{
    font-weight: 300;
    color: #ff5117;
    font-family: 'Climate Crisis', sans-serif;
}

/* LINKS */
.nav-links{
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links a{
    text-decoration: none;
    color: #111;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
    position: relative;
}

/* HARD UNDERLINE */
.nav-links a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0%;
    height: 3px;
    background: var(--primary);
    transition: 0.2s;
}

.nav-links a:hover::after{
    width: 100%;
}

/* BUTTON */
.nav-btn{
    padding: 10px 18px;
    border: 2px solid #111;
    background: var(--primary);
    color: #fff;

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;

    cursor: pointer;

    border-radius: 0;
    box-shadow: 4px 4px 0px #111;

    transition: 0.15s;
}

.nav-btn:hover{
    transform: translate(-3px,-3px);
    box-shadow: 6px 6px 0px #111;
}

/* ===== HERO ===== */
.hero{
    text-align:center;
    align-items:center; 
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml;utf8,%3Csvg height=%22auto%22 viewBox=%220 0 2000 1400%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d=%22M0 1400h177.778v-8.43q0-28-28-28H28q-28 0-28 28ZM222.222 1400H400v-129.578q0-28-28-28H250.222q-28 0-28 28ZM444.444 1400h177.778v-221.243q0-28-28-28H472.444q-28 0-28 28ZM666.667 1400h177.777V923.854q0-28-28-28H694.667q-28 0-28 28ZM888.889 1400h177.778V982.094q0-28-28-28H916.889q-28 0-28 28ZM1111.111 1400h177.778V697.624q0-28-28-28H1139.11q-28 0-28 28ZM1333.333 1400h177.778V590.791q0-28-28-28h-121.778q-28 0-28 28ZM1555.556 1400h177.777V803.754q0-28-28-28h-121.777q-28 0-28 28ZM1777.778 1400h177.778V526.39q0-28-28-28h-121.778q-28 0-28 28Z%22 fill=%22%239ba0ff%22%2F%3E%3C%2Fsvg%3E");
}



/* HERO TEXT */
.hero h1{
    font-family:'climate crisis', sans-serif;
    font-weight: 400;
    font-size:clamp(3rem,6vw,5rem);
    line-height:1.1;
}

/* GRADIENT TEXT */
.highlight{
    color: #6EC5FF;
}

/* TAG */
.hero .tag{
    font-family: 'space grotesk', sans-serif;
    margin-top:15px;
    font-size:1.1rem;
    color:var(--text-light);
    max-width:500px;
}

/* STICKER */
.hero .sticker{
    margin-top:25px;
    background:var(--primary);
    color:white;
    padding:10px 18px;

    font-family:'Cute Font', cursive;
    font-size:22px;

    transform:rotate(-3deg);

    border:2px solid #111;
    box-shadow:4px 4px 0px #111;

    transition:0.2s;
}

.hero .sticker:hover{
    transform:rotate(0deg) scale(1.05);
}

/* CTA BUTTON */
.cta{
    margin-top:25px;
    padding:14px 28px;

    background:var(--primary);
    color:white;

    border:2px solid #111;

    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    letter-spacing:1px;

    cursor:pointer;

    border-radius:0;
    box-shadow:5px 5px 0px #111;

    transition:0.2s;
}

.cta:hover{
    transform:translate(-4px,-4px);
    box-shadow:7px 7px 0px #111;
}

/* ===== HEADINGS ===== */
h2{
    font-family:'Archivo Black', sans-serif;
    font-size:2.5rem;
    margin-bottom:30px;
}

/* ===== GRID ===== */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

/* ===== CARDS (SHARP) ===== */
.card{
    background:#fff;
    padding:25px;

    border:2px solid #111;
    border-radius:0;

    box-shadow:5px 5px 0px var(--accent);

    transition:0.2s;
}

.card i{
    font-size:22px;
    margin-bottom:10px;
    color:var(--primary);
}

.card h3{
    margin-bottom:10px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
}

.card p{
    color:var(--text-light);
    font-size:0.95rem;
}

.card:hover{
    transform:translate(-5px,-5px);
    box-shadow:8px 8px 0px var(--primary);
}

/* ===== SECTION VARIATIONS ===== */
.alt{
    background:var(--bg-soft);
}

/* ===== AI BOX ===== */
.ai-box{
    background:#fff;
    padding:20px;

    border:2px solid #111;
    border-left:6px solid var(--primary);

    box-shadow:5px 5px 0px var(--accent);

    font-style:italic;
    margin-top:10px;
}
/* ===== AI SECTION ===== */
.ai-section{
    background: linear-gradient(180deg, #F7F5FF, #EEF4FF);
}

.ai-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    flex-wrap: wrap;
}

/* LEFT */
.ai-left{
    flex: 1;
    min-width: 280px;
}

.ai-left h2{
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-family: 'climate crisis', sans-serif;
    font-weight: 400;
}
.ai-left p{
    margin-top: 15px;
    color: var(--text-light);
    line-height: 1.6;
    font-family: 'space grotesk', sans-serif;
}
.ai-desc{
    margin-top: 15px;
    color: #555;
    line-height: 1.6;
    max-width: 500px;
}

/* RIGHT */
.ai-right{
    flex: 1;
    min-width: 280px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* CARDS */
.ai-card{
    background: white;
    padding: 20px;
    border-radius: 14px;
    width: 220px;

    border: 2px solid #e5e5ff;
    box-shadow: 0 10px 25px rgba(124,108,255,0.15);

    transition: 0.25s;
}

.ai-card p{
    font-size: 0.95rem;
    color: #333;
}

/* LABEL */
.label{
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 8px;
    padding: 3px 8px;
    border-radius: 6px;
}

/* BEFORE */
.before{
    transform: rotate(-3deg);
}
.before .label{
    background: #eee;
    color: #555;
}

/* AFTER */
.after{
    transform: rotate(3deg);
    border-color: var(--primary);
}
.after .label{
    background: var(--primary);
    color: white;
}

/* ARROW */
.arrow{
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary);
}

/* HOVER EFFECT */
.ai-card:hover{
    transform: translateY(-6px) scale(1.03);
}

/* MOBILE */
@media(max-width:768px){
    .ai-container{
        flex-direction: column;
        text-align: center;
    }

    .ai-right{
        flex-direction: column;
    }

    .arrow{
        transform: rotate(90deg);
    }
}
.features{ 
  width: 100%;
  height: 100%;
  background-color: #F7F5FF;
opacity: 0.8;
background: radial-gradient(circle, transparent 20%, #F7F5FF 20%, #F7F5FF 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #F7F5FF 20%, #F7F5FF 80%, transparent 80%, transparent) 17.5px 17.5px, linear-gradient(#d393ff 1.4000000000000001px, transparent 1.4000000000000001px) 0 -0.7000000000000001px, linear-gradient(90deg, #d393ff 1.4000000000000001px, #F7F5FF 1.4000000000000001px) -0.7000000000000001px 0;
background-size: 35px 35px, 35px 35px, 17.5px 17.5px, 17.5px 17.5px;
}
h2{
    font-family: 'climate crisis', sans-serif;
    font-weight: 300;
}
.container{
    max-width:1100px;
    margin:auto;
}

/* BIG HEADING */
.big-heading{
    font-family:'Space Grotesk', sans-serif;
    font-size:clamp(2.5rem,5vw,4rem);
    line-height:1.2;
    margin-bottom:20px;
}

/* SUBTEXT */
.subtext{
    color:#555;
    max-width:600px;
    margin-bottom:30px;
}

/* STORY BOX */
.story-box{
    background:#fff;
    padding:25px;
    border-radius:14px;
    border:2px solid #ddd;
    box-shadow:6px 6px 0px var(--primary);
    transition:0.2s;
}

.story-box:hover{
    transform:translate(-4px,-4px);
}

.story-box .mini{
    margin-top:10px;
    font-size:0.9rem;
    color:#777;
}

/* VISION */
.vision{
    margin-top:25px;
    font-size:1.2rem;
    font-weight:600;
}

/* TAGS */
.tags{
    margin-top:20px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.tags span{
    background:var(--bg-soft);
    padding:6px 12px;
    border-radius:20px;
    font-size:0.85rem;
}

/* AI DEMO */
.ai-demo{
    margin:30px 0;
    padding:20px;
    background:#fff;
    border-left:5px solid var(--primary);
}

.ai-demo .old{
    color:#999;
    text-decoration:line-through;
}

.ai-demo .arrow{
    margin:8px 0;
    font-weight:bold;
}

.ai-demo .new{
    font-weight:600;
    color:var(--primary);
}

/* FEATURES */
.feature{
    background:#fff;
    padding:20px;
    border-radius:12px;
    border:2px solid #eee;
    transition:0.2s;
}

.feature i{
    font-size:20px;
    margin-bottom:10px;
    color:var(--primary);
}

.feature h3{
    margin-bottom:8px;
}

.feature p{
    font-size:0.9rem;
    color:#666;
}

.feature:hover{
    transform:translateY(-6px);
    border-color:var(--primary);
}

/* FOOTER LINE */
.ai-footer{
    margin-top:40px;
    font-size:1.1rem;
}

.ai-footer span{
    font-weight:600;
    color:var(--primary);
}

/* HIGHLIGHT */
.highlight{
    background: linear-gradient(120deg,#7C6CFF,#6EC5FF);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
/* ===== FOOTER ===== */
.footer{
    background: linear-gradient(120deg, #F7F5FF, #EEF4FF);
    padding: 60px 10% 20px;
    border-top: 1px solid rgba(124,108,255,0.2);
}

/* layout */
.footer-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

/* brand */
.footer-brand h2{
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
}

.footer-brand span{
    background: linear-gradient(120deg, #7C6CFF, #6EC5FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-brand p{
    margin-top: 10px;
    color: #555;
    font-size: 0.95rem;
}

/* genz tag */
.footer-tag{
    margin-top: 15px;
    display: inline-block;
    background: #7C6CFF;
    color: white;
    padding: 6px 12px;
    font-family: 'Cute Font', cursive;
    transform: rotate(-3deg);
    box-shadow: 3px 3px 0px #6EC5FF;
    font-size: 18px;
}

/* links */
.footer-links h4{
    margin-bottom: 12px;
    font-size: 1rem;
}

.footer-links a{
    display: block;
    text-decoration: none;
    color: #555;
    margin-bottom: 8px;
    font-size: 0.9rem;
    transition: 0.2s;
}

.footer-links a:hover{
    color: #7C6CFF;
    transform: translateX(4px);
}

/* social */
.footer-social .icons{
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.footer-social i{
    font-size: 18px;
    background: white;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 3px 3px 0px #7C6CFF;
    transition: 0.2s;
}

.footer-social i:hover{
    transform: translate(-3px,-3px);
}

/* bottom */
.footer-bottom{
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(124,108,255,0.2);
    font-size: 0.85rem;
    color: #777;
}
/* ===== FAQ SECTION ===== */
.faq{
    background: linear-gradient(120deg, #EEF4FF, #F7F5FF);
}

.faq h2{
    text-align:center;
}

.faq-sub{
    text-align:center;
    color:#666;
    margin-bottom:40px;
}

/* container */
.faq-container{
    max-width:800px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* item */
.faq-item{
    background:white;
    border-radius:12px;
    border:2px solid #ddd;
    overflow:hidden;
    transition:0.3s;
}

/* hover glow */
.faq-item:hover{
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(124,108,255,0.15);
}

/* question */
.faq-question{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 20px;
    cursor:pointer;
    font-weight:600;
}

/* icon */
.faq-question i{
    transition:0.3s;
}

/* answer */
.faq-answer{
    max-height:0;
    overflow:hidden;
    padding:0 20px;
    color:#555;
    transition:0.35s ease;
}

/* active */
.faq-item.active .faq-answer{
    max-height:150px;
    padding:15px 20px 20px;
}

.faq-item.active .faq-question i{
    transform: rotate(45deg);
    color: var(--primary);
}