:root {
    --sea-dark: #001220;
    --sea-deep: #002240;
    --sea-blue: #0088ff;
    --sea-cyan: #00e5ff;
    --sea-foam: #e0ffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--sea-dark);
    color: var(--sea-foam);
    font-family: 'Open Sans', Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Fluid Background */
.fluid-bg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1;
    background: linear-gradient(135deg, var(--sea-dark) 0%, var(--sea-deep) 50%, var(--sea-dark) 100%);
}
.fluid-blob {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.3;
}
.blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--sea-blue); animation: float 20s ease-in-out infinite alternate;}
.blob-2 { bottom: -20%; right: -10%; width: 60vw; height: 60vw; background: var(--sea-cyan); animation: float 25s ease-in-out infinite alternate-reverse;}

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, 50px) scale(1.1); }
}

a { text-decoration: none; color: inherit; }

/* Structural Layout: Off-canvas nav on left, main content shifts */
.layout-wrapper { display: flex; min-height: 100vh; }

.side-panel {
    width: 300px; background: rgba(0, 34, 64, 0.6); backdrop-filter: blur(20px);
    border-right: 1px solid rgba(0, 229, 255, 0.2);
    padding: 40px 30px; position: fixed; height: 100vh; overflow-y: auto;
}
.sp-brand { font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 50px; text-shadow: 0 0 10px var(--sea-cyan);}
.sp-brand span { color: var(--sea-cyan); }

.sp-menu { display: flex; flex-direction: column; gap: 20px; margin-bottom: 50px; }
.sp-menu a { font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: rgba(224, 255, 255, 0.7); border-left: 2px solid transparent; padding-left: 10px; transition: 0.3s;}
.sp-menu a:hover { color: var(--sea-cyan); border-left-color: var(--sea-cyan); }

.sp-dl {
    background: linear-gradient(90deg, var(--sea-blue), var(--sea-cyan));
    color: var(--sea-dark); padding: 15px; text-align: center; border-radius: 8px; font-weight: bold;
    display: block; box-shadow: 0 5px 20px rgba(0, 229, 255, 0.3);
}

.main-view {
    margin-left: 300px; flex-grow: 1; padding: 0;
}

/* Sections */
.section { padding: 80px; border-bottom: 1px solid rgba(224,255,255,0.05); }

/* Hero section */
.hero-sec { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; }
.hero-sec h1 { font-size: 60px; line-height: 1.1; margin-bottom: 30px; color: #fff; text-shadow: 0 5px 15px rgba(0,0,0,0.5);}
.hero-sec p { font-size: 20px; color: rgba(224, 255, 255, 0.8); max-width: 700px; margin-bottom: 40px;}
.hero-acts { display: flex; gap: 20px; }
.btn-ghost { border: 2px solid var(--sea-cyan); color: var(--sea-cyan); padding: 12px 30px; border-radius: 8px; font-weight: bold; }
.btn-ghost:hover { background: rgba(0, 229, 255, 0.1); }

/* Stats integrated into Trust */
.trust-data-sec { display: flex; gap: 50px; background: rgba(0,0,0,0.2); }
.td-half { flex: 1; }
.td-half h3 { color: var(--sea-cyan); margin-bottom: 30px; font-size: 24px; }
.t-list { display: flex; flex-direction: column; gap: 20px; }
.t-item { display: flex; align-items: center; gap: 15px; font-size: 16px;}
.t-item::before { content: '🌊'; }
.d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.d-box { background: rgba(0, 136, 255, 0.1); padding: 25px; border-radius: 12px; border: 1px solid rgba(0, 229, 255, 0.1);}
.d-box b { display: block; font-size: 32px; color: #fff; margin-bottom: 5px;}
.d-box span { font-size: 12px; color: var(--sea-cyan); text-transform: uppercase; }

/* Features (Cards with image-like top borders) */
.feat-sec h2 { font-size: 36px; margin-bottom: 50px; color: #fff; }
.f-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.f-card { background: rgba(0, 34, 64, 0.8); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.f-top { height: 8px; background: linear-gradient(90deg, var(--sea-blue), var(--sea-cyan)); }
.f-body { padding: 40px; }
.f-body h3 { font-size: 22px; margin-bottom: 20px; color: var(--sea-foam); }
.f-body p { font-size: 15px; color: rgba(224, 255, 255, 0.7); }

/* Nodes as a continuous scroll or list */
.nodes-sec { background: rgba(0, 136, 255, 0.05); }
.nodes-sec h2 { font-size: 36px; margin-bottom: 50px; color: #fff; text-align: center;}
.n-flex { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.n-tag { background: var(--sea-deep); border: 1px solid var(--sea-blue); padding: 15px 25px; border-radius: 30px; display: flex; align-items: center; gap: 15px; }
.n-tag strong { font-size: 18px; color: #fff; }
.n-tag span { font-size: 12px; color: var(--sea-cyan); }

/* FAQ & Reviews combined */
.info-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.i-title { font-size: 28px; margin-bottom: 40px; color: var(--sea-cyan); }

.rev-wrap { display: flex; flex-direction: column; gap: 30px; }
.r-bl { background: rgba(255,255,255,0.02); padding: 25px; border-radius: 12px; position: relative;}
.r-bl::before { content: '"'; font-size: 60px; position: absolute; top: -10px; left: 10px; color: rgba(0, 229, 255, 0.1); font-family: serif;}
.r-bl p { font-size: 15px; margin-bottom: 15px; position: relative; z-index: 1;}
.r-bl .rt { color: #fbbf24; font-size: 12px; margin-bottom: 10px; }
.r-bl b { font-size: 12px; color: rgba(224, 255, 255, 0.5); }

.faq-wrap { display: flex; flex-direction: column; gap: 20px; }
.q-box { border: 1px solid rgba(224, 255, 255, 0.1); border-radius: 8px; padding: 20px; }
.q-box .q { font-weight: bold; color: #fff; cursor: pointer; display: flex; justify-content: space-between;}
.q-box .a { margin-top: 15px; font-size: 14px; color: rgba(224, 255, 255, 0.7); display: none; }

.foot-sec { padding: 40px 80px; text-align: center; color: rgba(224, 255, 255, 0.5); font-size: 14px; }

@media (max-width: 1000px) {
    .layout-wrapper { flex-direction: column; }
    .side-panel { width: 100%; height: auto; position: static; padding: 20px; display: flex; justify-content: space-between; align-items: center; }
    .sp-brand { margin: 0; }
    .sp-menu, .sp-dl { display: none; }
    .main-view { margin-left: 0; }
    .section { padding: 40px 20px; }
    .trust-data-sec, .info-sec { flex-direction: column; display: flex; }
}