Spaces:
Running
Running
| :root { | |
| color-scheme: dark; | |
| --bg: #06060f; | |
| --bg-elevated: #0c0c18; | |
| --border: rgba(255, 255, 255, 0.08); | |
| --text: #f0f0f5; | |
| --muted: #9b9bb0; | |
| --accent: #8b5cf6; | |
| --accent-2: #22d3ee; | |
| --gradient: linear-gradient(135deg, #8b5cf6 0%, #6366f1 45%, #22d3ee 100%); | |
| font-family: | |
| 'Inter', | |
| system-ui, | |
| -apple-system, | |
| sans-serif; | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| margin: 0; | |
| background: var(--bg); | |
| color: var(--text); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background: | |
| radial-gradient(ellipse 80% 50% at 50% -20%, rgba(139, 92, 246, 0.18), transparent), | |
| radial-gradient(ellipse 60% 40% at 100% 0%, rgba(34, 211, 238, 0.08), transparent); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| .container { | |
| width: min(1120px, calc(100% - 48px)); | |
| margin-inline: auto; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* Header */ | |
| .site-header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| padding: 16px 0; | |
| backdrop-filter: blur(12px); | |
| background: rgba(6, 6, 15, 0.75); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .site-header .container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 24px; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-weight: 700; | |
| font-size: 1.05rem; | |
| letter-spacing: -0.02em; | |
| } | |
| .logo-mark { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 8px; | |
| background: var(--gradient); | |
| display: grid; | |
| place-items: center; | |
| font-size: 14px; | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .nav-links a { | |
| padding: 8px 14px; | |
| font-size: 14px; | |
| color: var(--muted); | |
| border-radius: 8px; | |
| transition: color 0.15s, background 0.15s; | |
| } | |
| .nav-links a:hover { | |
| color: var(--text); | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| /* Buttons */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 12px 22px; | |
| font: 600 15px/1 inherit; | |
| border-radius: 10px; | |
| border: none; | |
| cursor: pointer; | |
| transition: | |
| transform 0.15s, | |
| box-shadow 0.15s, | |
| opacity 0.15s; | |
| } | |
| .btn:hover { | |
| transform: translateY(-1px); | |
| } | |
| .btn-primary { | |
| background: var(--gradient); | |
| color: #fff; | |
| box-shadow: 0 4px 24px rgba(139, 92, 246, 0.35); | |
| } | |
| .btn-primary:hover { | |
| box-shadow: 0 6px 32px rgba(139, 92, 246, 0.45); | |
| } | |
| .btn-secondary { | |
| background: rgba(255, 255, 255, 0.06); | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .btn-sm { | |
| padding: 8px 16px; | |
| font-size: 14px; | |
| } | |
| /* Hero */ | |
| .hero { | |
| padding: 80px 0 100px; | |
| text-align: center; | |
| } | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 14px; | |
| margin-bottom: 28px; | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--accent-2); | |
| background: rgba(34, 211, 238, 0.08); | |
| border: 1px solid rgba(34, 211, 238, 0.2); | |
| border-radius: 999px; | |
| } | |
| .badge-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--accent-2); | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.4; | |
| } | |
| } | |
| .hero h1 { | |
| margin: 0 0 20px; | |
| font-size: clamp(2.25rem, 5vw, 3.5rem); | |
| font-weight: 800; | |
| line-height: 1.1; | |
| letter-spacing: -0.03em; | |
| } | |
| .hero h1 .gradient-text { | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hero-lead { | |
| max-width: 640px; | |
| margin: 0 auto 36px; | |
| font-size: 1.125rem; | |
| color: var(--muted); | |
| } | |
| .hero-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 14px; | |
| justify-content: center; | |
| margin-bottom: 48px; | |
| } | |
| .hero-trust { | |
| font-size: 13px; | |
| color: var(--muted); | |
| letter-spacing: 0.02em; | |
| } | |
| .hero-trust strong { | |
| color: var(--text); | |
| font-weight: 600; | |
| } | |
| /* Live stats strip */ | |
| .live-stats { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 32px; | |
| padding: 24px 32px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| } | |
| .live-stat { | |
| text-align: center; | |
| } | |
| .live-stat-value { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .live-stat-value.online { | |
| color: #34d399; | |
| } | |
| .live-stat-label { | |
| font-size: 12px; | |
| color: var(--muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| margin-top: 4px; | |
| } | |
| /* Sections */ | |
| section { | |
| padding: 80px 0; | |
| } | |
| .section-label { | |
| display: inline-block; | |
| margin-bottom: 12px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--accent); | |
| } | |
| .section-title { | |
| margin: 0 0 16px; | |
| font-size: clamp(1.75rem, 3vw, 2.25rem); | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| } | |
| .section-desc { | |
| max-width: 560px; | |
| margin: 0 0 48px; | |
| color: var(--muted); | |
| font-size: 1.05rem; | |
| } | |
| /* Feature cards */ | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 24px; | |
| } | |
| .feature-card { | |
| padding: 28px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| transition: border-color 0.2s; | |
| } | |
| .feature-card:hover { | |
| border-color: rgba(139, 92, 246, 0.3); | |
| } | |
| .feature-icon { | |
| width: 44px; | |
| height: 44px; | |
| margin-bottom: 20px; | |
| border-radius: 12px; | |
| background: rgba(139, 92, 246, 0.15); | |
| display: grid; | |
| place-items: center; | |
| font-size: 20px; | |
| } | |
| .feature-card h3 { | |
| margin: 0 0 10px; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| } | |
| .feature-card p { | |
| margin: 0; | |
| font-size: 15px; | |
| color: var(--muted); | |
| line-height: 1.55; | |
| } | |
| /* How it works */ | |
| .steps { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| gap: 32px; | |
| counter-reset: step; | |
| } | |
| .step { | |
| position: relative; | |
| padding-top: 8px; | |
| } | |
| .step::before { | |
| counter-increment: step; | |
| content: counter(step); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 36px; | |
| height: 36px; | |
| margin-bottom: 16px; | |
| font-weight: 700; | |
| font-size: 14px; | |
| border-radius: 10px; | |
| background: var(--gradient); | |
| color: #fff; | |
| } | |
| .step h3 { | |
| margin: 0 0 8px; | |
| font-size: 1.05rem; | |
| } | |
| .step p { | |
| margin: 0; | |
| font-size: 14px; | |
| color: var(--muted); | |
| } | |
| /* Architecture diagram */ | |
| .arch-diagram { | |
| padding: 32px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| overflow-x: auto; | |
| } | |
| .arch-flow { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px 8px; | |
| font: 14px/1.4 ui-monospace, monospace; | |
| color: var(--muted); | |
| } | |
| .arch-node { | |
| padding: 14px 20px; | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| text-align: center; | |
| } | |
| .arch-node strong { | |
| display: block; | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 15px; | |
| margin-bottom: 4px; | |
| } | |
| .arch-node.highlight { | |
| border-color: rgba(139, 92, 246, 0.4); | |
| background: rgba(139, 92, 246, 0.1); | |
| } | |
| .arch-arrow { | |
| color: var(--accent); | |
| font-size: 18px; | |
| } | |
| /* Code block */ | |
| .code-panel { | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| background: #010409; | |
| } | |
| .code-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 12px 16px; | |
| background: var(--bg-elevated); | |
| border-bottom: 1px solid var(--border); | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .code-panel pre { | |
| margin: 0; | |
| padding: 20px; | |
| overflow-x: auto; | |
| font: 13px/1.6 ui-monospace, SFMono-Regular, monospace; | |
| color: #c9d1d9; | |
| } | |
| .code-panel .kw { | |
| color: #ff7b72; | |
| } | |
| .code-panel .str { | |
| color: #a5d6ff; | |
| } | |
| .code-panel .fn { | |
| color: #d2a8ff; | |
| } | |
| /* Models */ | |
| .models-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |
| gap: 20px; | |
| } | |
| .model-card { | |
| padding: 24px; | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| background: var(--bg-elevated); | |
| } | |
| .model-card h3 { | |
| margin: 0 0 8px; | |
| font-size: 1rem; | |
| } | |
| .model-card p { | |
| margin: 0 0 12px; | |
| font-size: 14px; | |
| color: var(--muted); | |
| } | |
| .model-tag { | |
| display: inline-block; | |
| padding: 4px 10px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| border-radius: 6px; | |
| background: rgba(52, 211, 153, 0.12); | |
| color: #34d399; | |
| } | |
| /* CTA footer */ | |
| .cta-section { | |
| text-align: center; | |
| padding: 100px 0 120px; | |
| } | |
| .cta-section h2 { | |
| margin: 0 0 12px; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| } | |
| .cta-section p { | |
| margin: 0 0 32px; | |
| color: var(--muted); | |
| font-size: 1.05rem; | |
| } | |
| .cta-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 14px; | |
| justify-content: center; | |
| } | |
| .site-footer { | |
| padding: 32px 0; | |
| border-top: 1px solid var(--border); | |
| text-align: center; | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .site-footer a { | |
| color: var(--accent-2); | |
| } | |
| .site-footer a:hover { | |
| text-decoration: underline; | |
| } | |
| @media (max-width: 640px) { | |
| .nav-links .nav-hide-mobile { | |
| display: none; | |
| } | |
| .hero { | |
| padding: 48px 0 64px; | |
| } | |
| section { | |
| padding: 56px 0; | |
| } | |
| } | |