:root {
    --dawn-sky: #e0f2fe;
    --dawn-sun: #fef08a;
    --dawn-cloud: #ffffff;
    --text-dark: #0f172a;
    --text-mid: #475569;
    --btn-blue: #0284c7;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background: linear-gradient(180deg, var(--dawn-sky) 0%, var(--dawn-cloud) 100%);
    color: var(--text-dark);
    font-family: 'Montserrat', -apple-system, sans-serif;
    min-height: 100vh;
}
a { text-decoration: none; color: inherit; transition: 0.3s; }

/* Wrapper - full screen split for hero */
.wrapper { overflow-x: hidden; }

/* Navbar - Floating transparent */
.nav-wrap { position: absolute; top: 0; left: 0; width: 100%; padding: 30px 5%; display: flex; justify-content: space-between; align-items: center; z-index: 10; }
.brand { font-size: 26px; font-weight: 900; color: var(--btn-blue); letter-spacing: -1px; }
.menu { display: flex; gap: 40px; }
.menu a { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.menu a:hover { color: var(--btn-blue); }
.btn-dl { background: var(--btn-blue); color: #fff; padding: 12px 25px; border-radius: 8px; font-weight: bold; }
.btn-dl:hover { background: #0369a1; box-shadow: 0 4px 15px rgba(2, 132, 199, 0.3); }

/* Layout Structure: Hero is massive text, Nodes scroll horizontally, Features in masonry */

.hero-mega {
    padding: 180px 5% 100px;
    text-align: left;
    position: relative;
}
.hero-mega::after {
    content: ''; position: absolute; right: 5%; top: 150px;
    width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, var(--dawn-sun) 0%, transparent 60%);
    z-index: -1;
}
.hero-mega h1 { font-size: 72px; line-height: 1.05; margin-bottom: 30px; letter-spacing: -2px; max-width: 800px;}
.hero-mega p { font-size: 20px; color: var(--text-mid); max-width: 600px; margin-bottom: 40px; }
.hero-acts { display: flex; gap: 20px; }

/* Trust strip below hero */
.trust-bar {
    display: flex; gap: 40px; padding: 20px 5%;
    border-top: 1px solid rgba(0,0,0,0.05); border-bottom: 1px solid rgba(0,0,0,0.05);
    background: rgba(255,255,255,0.5); margin-bottom: 80px;
}
.trust-bar span { font-size: 14px; font-weight: 600; color: var(--text-mid); display: flex; align-items: center; gap: 10px;}
.trust-bar span::before { content: ''; width: 8px; height: 8px; background: var(--dawn-sun); border-radius: 50%; display: inline-block;}

/* Nodes - Horizontal Scroll */
.node-scroller { padding: 0 5% 80px; }
.scroller-inner { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px; scrollbar-width: none;}
.scroller-inner::-webkit-scrollbar { display: none; }
.n-box { min-width: 250px; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.03);}
.n-box h4 { font-size: 24px; color: var(--btn-blue); margin-bottom: 5px; }
.n-box span { font-size: 13px; color: var(--text-mid); }

/* Features - Masonry-like Grid */
.feat-masonry {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 0 5% 80px;
}
.fm-card { background: #fff; padding: 40px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.02);}
.fm-card:nth-child(2) { transform: translateY(40px); } /* offset for masonry look */
.fm-card h3 { font-size: 22px; margin-bottom: 15px; color: var(--text-dark); }
.fm-card p { font-size: 15px; color: var(--text-mid); line-height: 1.6; }

/* Stats integrated with Reviews */
.info-split {
    display: flex; gap: 60px; padding: 40px 5% 100px;
}
.stat-col { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.st-b { background: rgba(255,255,255,0.6); padding: 30px; border-radius: 12px; text-align: center; border: 1px solid rgba(255,255,255,0.8);}
.st-b b { display: block; font-size: 36px; color: var(--btn-blue); }
.st-b span { font-size: 12px; font-weight: bold; color: var(--text-mid); }

.rev-col { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.rc { background: #fff; padding: 25px; border-radius: 12px; position: relative; }
.rc::before { content: ''; position: absolute; left: 0; top: 20%; height: 60%; width: 3px; background: var(--dawn-sun); border-radius: 0 3px 3px 0; }
.rc p { font-size: 15px; color: var(--text-dark); margin-bottom: 15px; }
.rc b { font-size: 12px; color: var(--text-mid); }

/* FAQ */
.faq-sec { padding: 0 5% 100px; max-width: 1000px; margin: 0 auto; }
.fq { border-bottom: 1px solid rgba(0,0,0,0.1); padding: 20px 0; }
.fq-q { font-size: 18px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; }
.fq-a { font-size: 15px; color: var(--text-mid); margin-top: 15px; display: none; line-height: 1.6;}

footer { text-align: center; padding: 40px; font-size: 14px; color: var(--text-mid); background: #fff;}

@media (max-width: 900px) {
    .menu { display: none; }
    .hero-mega h1 { font-size: 48px; }
    .hero-mega::after { display: none; }
    .feat-masonry { grid-template-columns: 1fr; }
    .fm-card:nth-child(2) { transform: none; }
    .info-split { flex-direction: column; }
    .trust-bar { flex-direction: column; gap: 15px; }
}