/* Base variables and layout (from globals.css + page.css) */
:root {
  --dark-bg: #000;
  --light-bg: #f6f7fb;
  --primary-color: #0361c6;
  --secondary-color: #00caf9;
  --third-color: #54f3a6;
  --fourth-color: #fee590;
  --text-color: #867eb5;
  --text-secondary: #554b92;
  --text-color-dark: #12183f;
  --text-color-light: #fcf3d4;
  --title-color: #221577;
  --border-color: #6a55f8;
  --border-color-dark: #27263a;
  --border-color-light: #6a55f8;
  --shadow: 10px 12px 48px rgba(181, 187, 203, 0.206);
  --email-target-width: 70%;
}
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body {
  margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; color: var(--text-color);
  font-family: "Josefin Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  transition: all 0.4s cubic-bezier(0.57, 0.25, 0.33, 1) 0s;
}
.container { width: 100%; margin: auto; overflow: hidden; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

.app { position: relative; transition: all 0.3s ease-in-out; }
.tag { color: var(--secondary-color); font-size: 1.5rem; font-weight: bold; }
.title { font-size: 2.6rem; color: var(--title-color); font-weight: bold; text-align: center; line-height: 3.5rem; text-transform: capitalize; }
.des { font-size: 1.4rem; color: var(--text-color); line-height: 2rem; }
.sec-title { font-size: 2rem; color: var(--title-color); font-weight: 600; text-align: center; line-height: 3rem; text-transform: capitalize; }
.text { font-size: 1.1rem; color: var(--text-color); line-height: 2rem; }
@media (max-width: 768px) { .title { font-size: 2.2rem; } .des { font-size: 1.2rem; } .sec-title { font-size: 1.8rem; } }
@media (max-width: 640px) { .title { font-size: 1.8rem; } .sec-title { font-size: 1.5rem; } }

/* Navbar (Navbar.css) */
.n-wrapper { background-color: var(--primary-color); width: 100%; position: absolute; z-index: 999; }
.sticky { position: fixed; box-shadow: var(--shadow); background:#fff; top:0; }
.n-container { padding: 1rem 0; color: white; font-size: 0.95rem; display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.sticky .n-container { padding: 1rem 0; color: var(--title-color); }
.n-logo { font-weight: bold; cursor: pointer; }
.n-right { text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 2rem; font-size: 0.9rem; }
.n-menu { display: flex; align-items: center; justify-content: center; gap: 2rem; }
.n-menu a { color: #fff; text-decoration: none; padding: .4rem 0; }
.sticky .n-menu a { color: var(--title-color); text-decoration: none; }
.n-menu span { cursor: pointer; }
.fund-button { color: var(--dark-bg); background-color: var(--third-color); padding: 0.8rem 1.4rem; text-transform: capitalize; border-radius: 999px; text-decoration: none; font-weight: 600; box-shadow: inset 0 0 0 0 rgba(0,0,0,0); transition: box-shadow .2s ease, transform .2s ease; }
.fund-button:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(84,243,166,0.35); }
.nm-container { display: none; }
@media (max-width: 1200px) {
  .n-container { display: none; }
  .nm-container { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; position: relative; color: white; background-color: var(--primary-color); }
  .nm-menu { position: fixed; top: 3.8rem; padding: 3rem 2rem; left: 0; display: flex; background-color: var(--primary-color); flex-direction: column; transform: translateX(-150%); transition: all 0.3s ease-in-out; width: 100%; font-size: 1.2rem; z-index: 99; height: calc(100vh - 4rem); }
  .nm-menu a { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); color: white; text-decoration: none; }
  .m-funded-button { width: 100%; background-color: var(--third-color); display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 1rem 0; border-radius: 999px; color: var(--dark-bg); text-transform: capitalize; }
  .nm-toggle { background:none; border:none; color:#fff; font-size: 1.6rem; cursor: pointer; }
}

/* Hero (Hero.css) */
.h-wrapper { background: var(--primary-color); min-height: 120vh; overflow: hidden; }
.h-wrapper .container { padding-top: 8rem; }
.h-arrow { position: absolute; top: 5rem; width: 100%; max-width: 60rem; z-index: 0; }
.h-container { display: flex; min-height: 80vh; align-items: center; justify-content: space-around; position: relative; }
.h-left { flex: 1; position: relative; display: flex; flex-direction: column; gap: 2rem; align-items: center; padding-top: 5rem; }
.image-row { display: flex; gap: 2rem; }
.image-row > :nth-child(2) { transform: translateY(-4rem); }
.person-pill { height: 15rem; width: 6rem; border-radius: 999px; overflow: hidden; }
.person-pill-bg { border-radius: 999px; height: 100%; width: 100%; overflow: hidden; }
.person-pill-bg > img { width: 100%; object-fit: cover; scale: 2; margin-top: 4rem; }
.h-right { flex: 1.25; display: flex; flex-direction: column; gap: 2rem; }
.h-title { display: flex; flex-direction: column; gap: 2rem; color: var(--third-color); font-size: 4rem; font-weight: bold; text-transform: uppercase; }
.h-title > :nth-child(3) { color: white; }
.h-des { color: white; font-size: 1.4rem; line-height: 2rem; }
@media (max-width: 1024px) {
  .h-wrapper { min-height: auto; }
  .h-container { flex-direction: column; align-items: center; gap: 4rem; padding-bottom: 3rem; }
  .h-arrow{ display: none; }
  .h-right { flex: 1; align-items: center; }
  .h-title { font-size: 2.2rem; align-items: center; }
  .h-des { text-align: center; font-size: 1.2rem; width: 80%; }
}

/* BrandingVideo.css */
.bv-container .container { display: flex; flex-direction: column; align-items: center; overflow: visible; }
.bv-video { width: 95%; border-radius: 4rem; margin-top: -10rem; z-index: 1; transform-origin: center; transition: transform .3s ease; }
@media (max-width: 1024px) { .bv-video { margin-top: 1rem; } }
@media (max-width: 768px) { .bv-video { border-radius: 2rem; } }

/* WhatWeDo.css */
.wwd-wrapper { position: relative; }
.wwd-container { margin-top: 10rem; display: flex; flex-direction: column; gap: 2rem; align-items: center; justify-content: center; }
.wwd-head { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; justify-content: center; width: 75%; }
.wwd-blocks { display: flex; gap: 2rem; width: 100%; }
.wwd-block { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; width: 100%; flex: 1; padding: 2rem; text-align: center; box-shadow: var(--shadow); }
.block-features { margin-top: 1rem; display: flex; gap: 1rem; }
.block-feature { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; border: 1px solid hsla(0,0%,59%,0.17); border-radius: 1rem; padding: 1rem; color: var(--title-color); font-size: 1.1em; line-height: 1.6; font-weight: 500; height: fit-content; opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.wwd-block:nth-child(1) > .block-features > :nth-child(2) { margin-top: 3rem; }
.wwd-block:nth-child(2) > .block-features > :nth-child(1), .wwd-block:nth-child(2) > .block-features > :nth-child(3) { margin-top: 3rem; }
.wwd-support { display: flex; padding: 2rem; box-shadow: var(--shadow); border-radius: 1rem; justify-content: space-between; align-items: center; margin-top: 2.5rem; background: white; }
.wwd-support > div { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.wwd-support>:nth-child(1) { flex: 1; }
.wwd-support>:nth-child(2) { flex: 1.6; }
@media (max-width: 990px) { .wwd-blocks { flex-direction: column; } }
@media (max-width: 768px) { .wwd-support { flex-direction: column; } }
@media (max-width: 576px) { .wwd-block { width: 80%; margin: auto; } .block-features { flex-direction: column; } .block-feature { margin-top: 0rem !important; } }

/* OurDiff.css */
.od-wrapper { padding-top: 15rem; }
.od-container { display: flex; flex-direction: column; gap: 2rem; }
.od-head { display: flex; flex-direction: column; gap: 2rem; align-items: center; }
.od-head .tag { color: white; }
.od-head .test { max-width: 65%; color: white; text-align: center; }
.od-features { display: flex; gap: 2rem; }
.od-feature { flex: 1; background-color: white; display: flex; box-shadow: var(--shadow); flex-direction: column; gap: 1rem; align-items: center; padding: 2rem; border-radius: 1rem; opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.od-feature .text { text-align: center; }
@media (max-width: 768px) { .od-features { flex-direction: column; } }
@media (max-width: 590px) { .od-feature { width: 80%; margin: auto; } }

/* HowItWorks.css */
.hiw-wrapper { padding-top: 13rem; }
.hiw-container { display: flex; flex-direction: column; gap: 3rem; }
.hiw-head { display: flex; flex-direction: column; gap: 2rem; align-items: center; max-width: 35rem; margin: auto; }
.hiw-features { display: flex; flex-direction: column; gap: 2rem; align-items: center; }
.hiw-feature { max-width: 38rem; display: flex; align-items: center; background-color: var(--light-bg); border-radius: 2rem; padding: 0.5rem 1rem; opacity: 0; transform: scale(0.95); transition: opacity .8s ease, transform .8s ease; }
.hiw-feature .detail { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; translate: -18% 0rem; }
.hiw-feature .detail > :nth-child(1) { font-size: 1.1rem; font-weight: bold; }
.hiw-feature:nth-of-type(2) { margin-left: 10rem; }
.hiw-feature:nth-of-type(1), .hiw-feature:nth-of-type(3) { margin-right: 5rem; }
@media (max-width: 768px) { .hiw-feature { max-width: 80%; } .hiw-feature:nth-of-type(2) { margin-left: 0rem; } .hiw-feature:nth-of-type(1), .hiw-feature:nth-of-type(3) { margin-right: 0rem; } .hiw-feature .detail { translate: 0; } .hiw-feature .icon img { translate: 0; } }
@media (max-width: 576px) { .hiw-feature { flex-direction: column-reverse; } }

/* WhoWeInvest.css */
.wwi-wrapper .container { padding-top: 13rem; }
.wwi-container { display: flex; justify-content: space-between; align-items: center; }
.wwi-container > div { flex: 1; }
.wwi-left { display: flex; flex-direction: column; gap: 2rem; }
.wwi-left .head { display: flex; flex-direction: column; gap: 1rem; align-items: flex-end; }
.wwi-left .head .title { text-align: left; color: white; }
.wwi-feature { display: flex; flex-direction: column; gap: 0.5rem; max-width: 28rem; opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.wwi-feature .text { color: white; text-align: justify; }
.wwi-right { display: flex; align-items: center; justify-content: center; align-items: flex-end; }
.wwi-right img { width: 100%; }
@media (max-width: 768px) { .wwi-container { flex-direction: column; padding: 2rem; } .wwi-right { align-self: center; margin-top: 2rem; } .wwi-right img { max-width: 20rem; } }

/* Footer.css */
.f-wrapper .container { margin-top: 5rem; padding-top: 5rem; padding-bottom: 2rem; }
.f-wrapper { background-color: var(--primary-color); }
.f-container { display: flex; flex-direction: column; gap: 2rem; align-items: center; }
.f-container .title { color: white; }
.f-container hr { border-color: var(--border-color-light); width: 100%; }
.f-menu { display: flex; justify-content: space-between; width: 100%; flex-wrap: wrap; }
.f-menu a { color: white; text-decoration: none; }
@media (max-width: 990px) { .f-menu { flex-direction: column; gap: 1rem; align-items: center; } }

/* EmailBox.css */
.emailBox { background-color: white; padding: 1rem 2rem; border-radius: 999px; display: flex; align-items: center; width: var(--email-target-width); position: relative; overflow: hidden; margin: 0 auto; box-shadow: var(--shadow); }
.emailBox > input { border: none; outline: none; flex: 1; margin-left: 1rem; font-size: 1rem; color: rgb(150,150,150); font-family: "Josefin Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.emailBox > input::placeholder { font-size: .95rem; color: #9a9a9a; }
.getFunded { position: absolute; right: 0.5rem; height: 80%; background: linear-gradient(180deg, #18d5ff, #00caf9); display: flex; align-items: center; justify-content: center; padding: 0rem 2rem; border-radius: 999px; color: #fff; cursor: pointer; font-weight: 700; letter-spacing: .3px; box-shadow: inset 0 0 0 3px #ffffff; }
.email-icon { display:flex; align-items:center; justify-content:center; }

/* Viewport expansion animation (mimic framer-motion) */
.email-anim { width: .5rem; border-radius: 100%; transition: width 1s ease, border-radius 1s ease; }
.email-anim:not(.expanded) input { opacity: 0; transform: translateY(10px); }
.email-anim:not(.expanded) .getFunded { opacity: 0; transform: translateX(50px) scale(.95); }
.email-anim.expanded { width: var(--email-target-width); border-radius: 999px; }
.email-anim.expanded input { opacity: 1; transform: translateY(0); transition: opacity .6s ease .2s, transform .6s ease .2s; }
.email-anim.expanded .getFunded { opacity: 1; transform: translateX(0) scale(1); transition: opacity .6s ease .35s, transform .6s ease .35s; }

@media (max-width: 768px) {
  .emailBox { --email-target-width: 90%; }
}

/* Simple reveal animations (replace framer-motion) */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Hero pill animation */
.pill-anim { animation: pillDrop 2s cubic-bezier(0.22,1,0.36,1) forwards; transform: translateY(18rem); }
@keyframes pillDrop { to { transform: translateY(0); } }

/* Toast styles */
.toast { position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%); background: #333; color: #fff; padding: .8rem 1.2rem; border-radius: .5rem; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 1000; }
.toast.show { opacity: 1; }
.toast.success { background: #2e7d32; }
.toast.error { background: #c62828; }

/* Back to Top button */
.back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--secondary-color); color: #fff; font-size: 1.25rem; box-shadow: var(--shadow); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, background .2s ease; z-index: 1000; }
.back-to-top:hover { background: #14c3ef; }
.back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }