/* --- Fonts (host locally or swap to system stack if preferred) --- */ @font-face { font-family: "InterVar"; src: local("Inter"), local("InterVariable"); font-display: swap; } :root { --bg: #0a0a0b; --surface: rgba(255,255,255,0.04); --border: rgba(255,255,255,0.08); --text: #e8e8ee; --muted: #a6a6b0; --container: 1200px; /* Brand (theme-red default) */ --brand: #ff2a2a; --brand-2: #ff5b5b; --glow: 0 0 12px rgba(255,42,42,.6), 0 0 36px rgba(255,42,42,.25); /* Radii / blur */ --r-lg: 16px; --r-md: 12px; --blur: 12px; --shadow-1: 0 10px 30px rgba(0,0,0,.35); --shadow-2: 0 20px 60px rgba(0,0,0,.45); } /* Optional brand themes (switch by adding .theme-blue to ) */ body.theme-blue { --brand:#34c6ff; --brand-2:#6ad6ff; --glow:0 0 12px rgba(52,198,255,.6),0 0 36px rgba(52,198,255,.25); } body.theme-green { --brand:#00ffa3; --brand-2:#60ffca; --glow:0 0 12px rgba(0,255,163,.6),0 0 36px rgba(0,255,163,.25); } body.theme-purple{ --brand:#b86bff; --brand-2:#d3a2ff; --glow:0 0 12px rgba(184,107,255,.6),0 0 36px rgba(184,107,255,.25); } *{box-sizing:border-box} html,body{height:100%} body{ font-family: InterVar, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; background: radial-gradient(1200px 600px at 70% -10%, rgba(255,255,255,0.05), transparent), var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Utility */ .container{max-width:var(--container); margin:0 auto; padding:0 24px} .glass{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--border); backdrop-filter: blur(var(--blur)); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .section{padding:96px 0} .section--alt{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0))} .lead{color:#d8d8df} .badge{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--border); padding:8px 12px; border-radius:999px; color:var(--muted); background: rgba(255,255,255,.02); } .pill{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; height:44px; padding:0 20px; border-radius:999px; text-decoration:none; font-weight:700; letter-spacing:.2px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; border:1px solid transparent; } .pill--primary{ background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#0a0a0a; box-shadow: var(--glow); } .pill--primary:hover{ transform: translateY(-1px) scale(1.01); box-shadow: 0 0 22px rgba(255,255,255,.08), var(--glow); } .pill--secondary{ background: rgba(255,255,255,.04); border-color: var(--border); color:var(--text); } .pill--secondary:hover{ border-color: var(--brand); box-shadow: var(--glow); } .pill--ghost{ background: transparent; border-color: var(--border); color: var(--text); } .pill--ghost:hover{ border-color: var(--brand); box-shadow: var(--glow); } .section-title{ font-size: clamp(28px, 3vw, 40px); margin: 0 0 28px; letter-spacing: .3px; color: #fff; text-shadow: var(--glow); } .section-title::after{ content:""; display:block; width:84px; height:3px; margin:16px 0 0; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 999px; box-shadow: var(--glow); } /* NAV */ .topbar{ position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); background: rgba(10,10,11,.35); border-bottom:1px solid var(--border);} .nav{ display:flex; align-items:center; justify-content:space-between; height:72px;} .brand{ font-weight:900; letter-spacing:.2px; color:#fff; text-shadow: var(--glow); } .menu{ display:flex; gap:22px; align-items:center; } .menu a{ color:var(--muted); text-decoration:none; font-weight:600; padding:8px 0; } .menu a:hover{ color:#fff; text-shadow: var(--glow); } .hamburger{ display:none; width:44px; height:44px; border:1px solid var(--border); background:transparent; border-radius:12px; position:relative; } .hamburger span{ position:absolute; left:10px; right:10px; height:2px; background:#ddd; transform-origin: center; transition:.2s } .hamburger span:nth-child(1){ top:13px } .hamburger span:nth-child(2){ top:21px } .hamburger span:nth-child(3){ top:29px } /* HERO */ .hero{ padding: 72px 0 40px; position: relative; } .headline{ padding: 36px; } .headline h1{ font-size: clamp(32px, 5.2vw, 64px); line-height: 1.06; margin: 0 0 16px; color:#fff; text-shadow: var(--glow); } .headline .actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:18px } .trust{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px } .metrics{ margin-top: 28px; display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; } .stat{ text-align:center; padding:22px } .stat-number{ font-weight:900; font-size: clamp(22px,3vw,32px); color:#fff; text-shadow: var(--glow); } .stat-label{ color:var(--muted); font-weight:600 } /* STEPS */ .steps{ list-style:none; display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin: 12px 0 0; padding:0; } .step{ padding:22px } .step-index{ width:42px; height:42px; border-radius:10px; display:grid; place-items:center; font-weight:800; color:#0a0a0a; background: linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow: var(--glow); margin-bottom:10px; } .step h3{ margin:8px 0 6px; color:#fff; text-shadow: var(--glow) } .step p{ color:var(--muted) } /* FEATURES */ .grid{ display:grid; gap:16px } .features{ grid-template-columns: repeat(3,1fr) } .card{ padding:20px; transition: transform .2s ease, box-shadow .2s ease; border-radius: var(--r-lg); } .card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); } .card-icon{ font-size:22px; margin-bottom:8px } /* INDUSTRIES */ .industries{ grid-template-columns: repeat(4,1fr) } .tile{ padding:20px; transition:.2s; } .tile h3{ margin:6px 0 6px; color:#fff; text-shadow: var(--glow) } .tile p{ color:var(--muted) } .tile:hover{ transform: translateY(-3px); box-shadow: var(--shadow-2) } /* RESULTS */ .results{ grid-template-columns: repeat(3,1fr) } .result{ padding:22px } .result h3{ margin:6px 0 6px; color:#fff; text-shadow: var(--glow) } .result p{ color:var(--muted) } .cta-center{ display:flex; gap:12px; justify-content:center; margin-top:22px } .disclaimer{ text-align:center; color:var(--muted); margin-top:14px } /* CONTACT */ .section--contact{ padding-bottom: 110px } .contact{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px; border:1px solid var(--border); } .contact .section-title{ margin:0 0 10px } .contact .lead{ margin:0 } /* FOOTER */ .footer{ border-top:1px solid var(--border); padding:26px 0; margin-top:-40px; background: rgba(255,255,255,.02) } .footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px } .brand--footer{ font-weight:900; text-shadow: var(--glow) } .foot-right{ display:flex; gap:16px; align-items:center } .foot-right a{ color:var(--muted); text-decoration:none } .foot-right a:hover{ color:#fff } /* AMBIENT CANVAS sits under everything */ #ambient{ position: fixed; inset: 0; z-index: -1; } /* RESPONSIVE */ @media (max-width: 1100px){ .metrics{ grid-template-columns: 1fr 1fr } .steps{ grid-template-columns: repeat(2,1fr) } .features{ grid-template-columns: repeat(2,1fr) } .industries{ grid-template-columns: repeat(2,1fr) } .results{ grid-template-columns: repeat(2,1fr) } } @media (max-width: 760px){ .menu{ display:none; position: absolute; right:20px; top:72px; flex-direction:column; background: rgba(20,20,22,.9); padding:14px; border:1px solid var(--border); border-radius:12px; width:min(280px, 88vw) } .menu a{ padding:10px 6px } .hamburger{ display:block } .metrics{ grid-template-columns: 1fr } .steps{ grid-template-columns: 1fr } .features{ grid-template-columns: 1fr } .industries{ grid-template-columns: 1fr } .results{ grid-template-columns: 1fr } .contact{ flex-direction:column; align-items:flex-start } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *{ animation: none!important; transition: none!important } }