*{

margin:0;

padding:0;

box-sizing:border-box;

}



body{


font-family:

-apple-system,

BlinkMacSystemFont,

"Segoe UI",

Arial,

sans-serif;


background:#ffffff;


color:#0f172a;


line-height:1.6;


}





a{


text-decoration:none;


color:inherit;


}





button{


font-size:15px;


border:none;


cursor:pointer;


padding:12px 24px;


border-radius:10px;


background:#f1f5f9;


transition:.2s;


}





button:hover{


transform:translateY(-2px);


}







/* ================================
 NAVIGATION
================================ */


.nav{


height:80px;


display:flex;


align-items:center;


justify-content:space-between;


padding:0 8%;


border-bottom:1px solid #e5e7eb;


background:white;


}





.logo{

font-size:32px;

font-weight:800;

letter-spacing:-1px;

color:#315b20;

}







.nav nav{


display:flex;


gap:32px;


align-items:center;


}



.nav nav a{


font-size:15px;


color:#475569;


}



.nav nav a:hover{


color:#10b981;


}





.primary{


background:#10b981;


color:white;


font-weight:600;


}



.primary:hover{


background:#059669;


}


/* ================================
 FOUNDER DECISIONS BUTTON
================================ */


.founder-btn{


background:#10b981;


color:white;


font-weight:600;


}


.founder-btn:hover{


background:#059669;


}





/* ================================
 HERO
================================ */



.hero{


display:flex;


align-items:center;


justify-content:space-between;


gap:50px;


padding:90px 8%;


}





.hero-content{


width:45%;


}





.hero-content h1{


font-size:54px;


line-height:1.12;


letter-spacing:-2px;


font-weight:800;


margin-bottom:30px;


/* =====================
高级绿色渐变标题
===================== */


background:

linear-gradient(
90deg,
#111827 0%,
#315b20 35%,
#65a30d 70%,
#A6E22E 100%
);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;


}





.hero-buttons{


display:flex;


gap:18px;


margin-top:35px;


}





.hero-preview{


width:55%;


display:flex;


gap:20px;


}





.preview{


background:white;


border:1px solid #e5e7eb;


border-radius:18px;


padding:25px;


box-shadow:


0 20px 50px rgba(15,23,42,.08);


}








.preview h3{


font-size:18px;


margin-bottom:20px;


}



/* ================================
 HERO MESSAGE CARD
================================ */


.hero-message{


background:rgba(52,211,153,0.06);


border-left:4px solid #34d399;


padding:22px 25px;


border-radius:16px;


margin-top:25px;


box-shadow:


0 15px 40px rgba(15,23,42,.06);


}





.hero-message p{


font-size:18px;


line-height:1.8;


margin:12px 0;


color:#334155;


}





.highlight{


color:#10b981;


font-weight:800;


}





.source-text{


font-size:15px !important;


color:#94a3b8 !important;


margin-top:18px !important;


letter-spacing:.4px;


}









/* ================================
 AI RADAR CARD
================================ */


.metric{


padding-top:10px;


}





.metric p{


color:#64748b;


font-size:14px;


}





.metric h2{


font-size:28px;


margin:10px 0;


font-weight:800;


}





.metric h3{


font-size:20px;


}





#opportunity-score{


color:#10b981;


font-weight:800;


}







#opportunity-reason{


margin-top:15px;


color:#475569;


font-size:15px;


line-height:1.7;


}









/* ================================
 REAL DATA IMAGE
================================ */


.signal-data-image{


width:100%;


height:180px;


object-fit:cover;


object-position:top;


border-radius:12px;


margin-top:15px;


cursor:pointer;


transition:.25s;


}





.signal-data-image:hover{


transform:scale(1.04);


}









/* ================================
 IMAGE MODAL
================================ */


.image-modal{


display:none;


position:fixed;


z-index:9999;


left:0;


top:0;


width:100%;


height:100%;


background:rgba(0,0,0,.85);


align-items:center;


justify-content:center;


padding:40px;


}





.image-modal img{


max-width:95%;


max-height:90vh;


border-radius:16px;


}





.image-modal-close{


position:absolute;


top:25px;


right:40px;


font-size:45px;


color:white;


cursor:pointer;


}









/* ================================
 STATS
================================ */


.stats{


display:grid;


grid-template-columns:repeat(3,1fr);


gap:30px;


padding:70px 8%;


background:#f8fafc;


text-align:center;


}





.stats div{


background:white;


padding:35px 20px;


border-radius:16px;


border:1px solid #e2e8f0;


}





.stats h2{


font-size:40px;


font-weight:800;


color:#0f172a;


}





.stats p{


margin-top:8px;


color:#64748b;


}



/* ================================
 DATA PROOF
================================ */


.data-proof{


padding:90px 8%;


text-align:center;


}





.data-proof h2{


font-size:36px;


font-weight:800;


margin-bottom:20px;


letter-spacing:-1px;


}





.data-proof>p{


color:#64748b;


font-size:18px;


line-height:1.8;


margin-bottom:45px;


}







.grid{


display:grid;


grid-template-columns:repeat(3,1fr);


gap:25px;


}







.box{


background:white;


border:1px solid #e5e7eb;


border-radius:18px;


padding:30px;


box-shadow:


0 15px 40px rgba(15,23,42,.05);


transition:.25s;


}





.box:hover{


transform:translateY(-5px);


box-shadow:


0 25px 60px rgba(15,23,42,.1);


}





.box h3{


font-size:22px;


margin-bottom:15px;


}





.box p{


color:#64748b;


line-height:1.7;


}







.box a{


display:inline-block;


margin-top:20px;


color:#10b981;


font-weight:700;


}





.box a:hover{


color:#059669;


}









/* ================================
 TREND CHART
================================ */


.trend{


padding:90px 8%;


text-align:center;


background:#f8fafc;


}





.trend h2{


font-size:38px;


font-weight:800;


margin-bottom:15px;


}





.trend p{


color:#64748b;


margin-bottom:40px;


}





#trendChart{


max-height:400px;


background:white;


padding:25px;


border-radius:18px;


border:1px solid #e2e8f0;


}









/* ================================
 REPORT SECTION
================================ */


.report{


padding:90px 8%;


text-align:center;


}





.report h2{


font-size:38px;


font-weight:800;


margin-bottom:15px;


}





.report>p{


color:#64748b;


font-size:18px;


margin-bottom:45px;


}





.report .grid{


grid-template-columns:repeat(3,1fr);


}





.report .box{


text-align:left;


}





.report .box h3{


font-size:24px;


}





.report .box p{


line-height:1.9;


}





/* ================================
 EMAIL SIGNUP
================================ */


.signup{


padding:90px 8%;


text-align:center;


background:#f8fafc;


}





.signup h2{


font-size:38px;


font-weight:800;


margin-bottom:15px;


}





.signup p{


color:#64748b;


font-size:18px;


margin-bottom:25px;


}





.signup input{


width:320px;


max-width:90%;


padding:14px 18px;


border-radius:10px;


border:1px solid #cbd5e1;


font-size:16px;


outline:none;


margin-right:10px;


}





.signup input:focus{


border-color:#10b981;


}





.signup button{


background:#10b981;


color:white;


font-weight:700;


}





.signup button:hover{


background:#059669;


}









/* ================================
 FOOTER
================================ */


footer{


padding:40px 8%;


text-align:center;


border-top:1px solid #e5e7eb;


color:#64748b;


font-size:14px;


}









/* ================================
 MOBILE RESPONSIVE
================================ */


@media(max-width:1000px){





.nav{


padding:0 5%;


}





.hero{


padding:60px 5%;


flex-direction:column;


}





.hero-content{


width:100%;


}





.hero-preview{


width:100%;


}





.grid{


grid-template-columns:1fr;


}





.stats{


grid-template-columns:1fr;


padding:50px 5%;


}





.report .grid{


grid-template-columns:1fr;


}





}









@media(max-width:700px){





.nav{


height:auto;


padding:20px;


flex-direction:column;


gap:20px;


}





.nav nav{


flex-wrap:wrap;


justify-content:center;


gap:18px;


}





.hero-content h1{


font-size:38px;


}





.hero-preview{


flex-direction:column;


}





.hero-preview .preview{


width:100%;


}





.hero-message{


padding:18px;


}





.hero-message p{


font-size:16px;


}





.signal-data-image{


height:200px;


}





.signup input{


width:100%;


margin-bottom:15px;


}





.signup button{


width:100%;


}



}

/* ================================
 INTELLIGENCE LOOP
================================ */


.intelligence-loop{


margin-top:80px;

padding:60px 40px;

background:

linear-gradient(

135deg,

rgba(16,185,129,0.06),

rgba(15,23,42,0.03)

);


border-radius:24px;


text-align:center;


box-shadow:

0 20px 50px rgba(0,0,0,0.06);


}





.intelligence-loop h2{


font-size:36px;


margin-bottom:15px;


color:#0f172a;


}





.intelligence-loop > p{


font-size:18px;


color:#64748b;


margin-bottom:45px;


}






/* LOOP CARD */


.loop-card{


max-width:720px;


margin:auto;


display:flex;


flex-direction:column;


align-items:center;


gap:14px;


}




.loop-card div{


width:320px;


padding:18px 25px;


background:white;


border-radius:16px;


font-size:18px;


font-weight:700;


color:#0f172a;


border:1px solid rgba(16,185,129,0.15);


box-shadow:


0 10px 25px rgba(0,0,0,0.06);


transition:.25s;


}







.loop-card div:hover{


transform:translateY(-4px);


border-color:#10b981;


box-shadow:


0 15px 35px rgba(16,185,129,0.18);


}








.loop-card span{


font-size:28px;


font-weight:700;


color:#10b981;


line-height:1;


}









/* ================================
 MOBILE LOOP
================================ */


@media(max-width:600px){



.intelligence-loop{


padding:40px 20px;


}



.intelligence-loop h2{


font-size:28px;


}




.loop-card div{


width:90%;


font-size:16px;


}



}