Home

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
:root {
 --bg-primary: #080c10;
 --bg-secondary: #0f1419;
 --bg-card: #151b23;
 --accent-green: #00e6b8;
 --accent-teal: #00d4aa;
 --accent-blue: #00a8ff;
 --accent-cyan: #00d9ff;
 --text-primary: #ffffff;
 --text-secondary: #b0c0d0; /* Increased contrast */
 --text-muted: #7a8a9a; /* Increased contrast */
 --border-subtle: rgba(0, 230, 184, 0.15);
}
body {
 background: var(--bg-primary);
 font-family: 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 color: var(--text-primary);
 -webkit-font-smoothing: antialiased;
}
.poster {
 width: 1200px;
 height: 800px;
 position: relative;
 background: var(--bg-primary);
 overflow: hidden;
}
/* Gradient mesh background */
.bg-mesh {
 position: absolute;
 inset: 0;
 background: 
 radial-gradient(ellipse 100% 100% at 0% 0%, rgba(0, 230, 184, 0.12) 0%, transparent 50%),
 radial-gradient(ellipse 80% 80% at 100% 100%, rgba(0, 168, 255, 0.08) 0%, transparent 50%),
 radial-gradient(ellipse 60% 60% at 70% 20%, rgba(0, 217, 255, 0.06) 0%, transparent 40%);
}
/* Noise texture overlay */
.noise-overlay {
 position: absolute;
 inset: 0;
 opacity: 0.03;
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
/* Subtle grid */
.grid-overlay {
 position: absolute;
 inset: 0;
 background-image: 
 linear-gradient(rgba(0, 230, 184, 0.03) 1px, transparent 1px),
 linear-gradient(90deg, rgba(0, 230, 184, 0.03) 1px, transparent 1px);
 background-size: 80px 80px;
}
/* Glow orbs */
.glow-orb {
 position: absolute;
 border-radius: 50%;
 filter: blur(80px);
}
.orb-1 {
 width: 400px;
 height: 400px;
 top: -100px;
 left: -100px;
 background: rgba(0, 230, 184, 0.15);
}
.orb-2 {
 width: 300px;
 height: 300px;
 bottom: -50px;
 right: 100px;
 background: rgba(0, 168, 255, 0.1);
}
.orb-3 {
 width: 200px;
 height: 200px;
 top: 200px;
 right: 300px;
 background: rgba(0, 230, 184, 0.08);
}
/* Main content */
.content {
 position: relative;
 z-index: 10;
 height: 100%;
 padding: 50px 70px;
 display: flex;
 flex-direction: column;
}
/* Header */
.header {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.logo {
 display: flex;
 align-items: center;
 gap: 14px;
}
.logo-icon {
 width: 44px;
 height: 44px;
 background: linear-gradient(135deg, var(--accent-green), var(--accent-blue));
 border-radius: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 4px 20px rgba(0, 230, 184, 0.3);
}
.logo-icon svg {
 width: 24px;
 height: 24px;
}
.logo-text {
 font-size: 26px;
 font-weight: 600;
 letter-spacing: 1px;
}
.logo-text .accent {
 color: var(--accent-green);
}
.header-badge {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 11px;
 letter-spacing: 2px;
 text-transform: uppercase;
 color: var(--text-secondary); /* Increased contrast */
}
.header-badge::before {
 content: '';
 width: 6px;
 height: 6px;
 background: var(--accent-green);
 border-radius: 50%;
}
/* Hero section */
.hero {
 flex: 1;
 display: flex;
 align-items: center;
 gap: 60px;
 padding: 20px 0;
}
.hero-content {
 flex: 1;
 max-width: 520px;
}
.headline {
 font-size: 54px;
 font-weight: 300;
 line-height: 1.1;
 letter-spacing: -2px;
 margin-bottom: 24px;
 color: var(--text-primary); /* Ensure high contrast */
}
.headline strong {
 font-weight: 600;
 display: block;
 background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-cyan) 50%, var(--accent-blue) 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}
.description {
 font-size: 17px;
 line-height: 1.65;
 color: var(--text-secondary); /* Increased contrast */
 margin-bottom: 36px;
 max-width: 420px;
}
/* Trust badges */
.trust-badges {
 display: flex;
 gap: 16px;
}
.trust-badge {
 display: flex;
 align-items: center;
 gap: 10px;
 background: rgba(0, 230, 184, 0.06);
 border: 1px solid var(--border-subtle);
 border-radius: 100px;
 padding: 10px 20px;
 font-size: 12px;
 font-weight: 500;
 letter-spacing: 0.5px;
 color: var(--text-primary); /* Ensure high contrast */
}
.trust-badge .icon {
 width: 18px;
 height: 18px;
 background: var(--accent-green);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}
.trust-badge .icon svg {
 width: 10px;
 height: 10px;
}
.trust-badge.secondary {
 background: rgba(0, 168, 255, 0.06);
 border-color: rgba(0, 168, 255, 0.2);
}
.trust-badge.secondary .icon {
 background: var(--accent-blue);
}
/* Hero visual */
.hero-visual {
 flex: 0 0 500px;
 height: 450px;
 position: relative;
}
/* Central hub */
.central-hub {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 340px;
 height: 340px;
}
/* Orbit rings */
.orbit {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 border-radius: 50%;
}
.orbit-inner {
 width: 160px;
 height: 160px;
 border: 1px solid rgba(0, 230, 184, 0.25);
}
.orbit-middle {
 width: 260px;
 height: 260px;
 border: 1px dashed rgba(0, 230, 184, 0.15);
}
.orbit-outer {
 width: 340px;
 height: 340px;
 border: 1px solid rgba(0, 230, 184, 0.08);
}
/* Hub center */
.hub-core {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 90px;
 height: 90px;
 background: linear-gradient(135deg, rgba(0, 230, 184, 0.2), rgba(0, 168, 255, 0.15));
 border: 1px solid rgba(0, 230, 184, 0.4);
 border-radius: 20px;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 
 0 0 60px rgba(0, 230, 184, 0.2),
 0 0 100px rgba(0, 230, 184, 0.1),
 inset 0 0 30px rgba(0, 230, 184, 0.1);
}
.hub-core svg {
 width: 36px;
 height: 36px;
 color: var(--accent-green);
}
/* Service nodes */
.service-node {
 position: absolute;
 display: flex;
 align-items: center;
 gap: 8px;
 background: var(--bg-card);
 border: 1px solid var(--border-subtle);
 border-radius: 10px;
 padding: 10px 16px;
 font-size: 12px;
 font-weight: 500;
 white-space: nowrap;
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 color: var(--text-primary); /* Ensure high contrast */
}
.service-node .dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--accent-green);
 box-shadow: 0 0 10px var(--accent-green);
}
.service-node.blue .dot { background: var(--accent-blue); box-shadow: 0 0 10px var(--accent-blue); }
.service-node.cyan .dot { background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan); }
/* Node positions */
.node-grid { top: -5px; left: 50%; transform: translateX(-50%); }
.node-vpp { top: 60px; right: -10px; }
.node-market { top: 160px; right: -40px; }
.node-commerce { bottom: 80px; right: 20px; }
.node-device { bottom: 10px; left: 40%; }
.node-physics { top: 120px; left: -20px; }
.node-energy { bottom: 60px; left: -30px; }
/* Connection lines */
.connection {
 position: absolute;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
 opacity: 0.3;
}
.conn-1 { top: 45px; left: 170px; width: 60px; transform: rotate(30deg); }
.conn-2 { top: 130px; right: 80px; width: 50px; transform: rotate(-20deg); }
.conn-3 { bottom: 120px; right: 100px; width: 50px; transform: rotate(25deg); }
.conn-4 { bottom: 80px; left: 130px; width: 60px; transform: rotate(-30deg); }
/* Footer */
.footer {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 padding-top: 24px;
 border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.metrics {
 display: flex;
 gap: 50px;
}
.metric {
 text-align: left;
}
.metric-value {
 font-size: 28px;
 font-weight: 600;
 color: var(--text-primary);
 margin-bottom: 4px;
}
.metric-value .highlight {
 color: var(--accent-green);
}
.metric-label {
 font-size: 10px;
 letter-spacing: 1.5px;
 text-transform: uppercase;
 color: var(--text-muted); /* Increased contrast */
}
.cta {
 display: flex;
 align-items: center;
 gap: 12px;
}
.cta-text {
 font-size: 14px;
 color: var(--accent-green);
 font-weight: 500;
}
.cta-arrow {
 width: 36px;
 height: 36px;
 border: 1px solid var(--accent-green);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(0, 230, 184, 0.05);
}
.cta-arrow svg {
 width: 16px;
 height: 16px;
 color: var(--accent-green);
}
/* Corner decorations */
.corner {
 position: absolute;
 width: 60px;
 height: 60px;
}
.corner-tl {
 top: 20px;
 left: 20px;
 border-left: 1px solid var(--border-subtle);
 border-top: 1px solid var(--border-subtle);
}
.corner-br {
 bottom: 20px;
 right: 20px;
 border-right: 1px solid var(--border-subtle);
 border-bottom: 1px solid var(--border-subtle);
}