:root {       --bg:       #080b14;       --surface:  #0e1424;       --card:     #111827;       --border:   #1e2d47;       --cyan:     #00e5c8;       --violet:   #7c3aed;       --fuchsia:  #c026d3;       --glow:     rgba(0,229,200,.18);       --text:     #e2eaf5;       --muted:    #8fa3c0;     }     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }     html { scroll-behavior: smooth; }     body {       background: var(--bg);       color: var(--text);       font-family: 'DM Sans', sans-serif;       font-size: 1rem;       line-height: 1.7;       overflow-x: hidden;     }     ::-webkit-scrollbar { width: 6px; }     ::-webkit-scrollbar-track { background: var(--bg); }     ::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 3px; }     body::before {       content: '';       position: fixed; inset: 0; z-index: 0;       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");       pointer-events: none;     }     .orb {       position: absolute; border-radius: 50%; filter: blur(90px);       pointer-events: none; z-index: 0;     }     .orb-cyan  { background: rgba(0,229,200,.25); }     .orb-violet{ background: rgba(124,58,237,.3); }     .orb-fuch  { background: rgba(192,38,211,.2); }     .grad-text {       background: linear-gradient(135deg, var(--cyan) 0%, var(--violet) 60%, var(--fuchsia) 100%);       -webkit-background-clip: text;       -webkit-text-fill-color: transparent;       background-clip: text;     }     .btn-primary {       display: inline-flex; align-items: center; gap: .45rem;       padding: .75rem 2rem;       background: linear-gradient(135deg, var(--cyan), var(--violet));       color: #fff; font-family: 'Syne', sans-serif; font-weight: 700;       font-size: .95rem; letter-spacing: .04em;       border-radius: 9999px; border: none; cursor: pointer;       position: relative; overflow: hidden;       transition: transform .25s, box-shadow .25s;       text-decoration: none;     }     .btn-primary::after {       content: '';       position: absolute; inset: 0;       background: rgba(255,255,255,.12);       opacity: 0; transition: opacity .2s;     }     .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,229,200,.35); }     .btn-primary:hover::after { opacity: 1; }     .btn-outline {       display: inline-flex; align-items: center; gap: .45rem;       padding: .7rem 1.8rem;       background: transparent;       color: var(--cyan); font-family: 'Syne', sans-serif; font-weight: 700;       font-size: .95rem; letter-spacing: .04em;       border-radius: 9999px; border: 1.5px solid var(--cyan); cursor: pointer;       transition: background .2s, color .2s;       text-decoration: none;     }     .btn-outline:hover { background: var(--cyan); color: var(--bg); }     #navbar {       position: fixed; top: 0; left: 0; right: 0; z-index: 100;       background: rgba(8,11,20,.78);       backdrop-filter: blur(18px);       border-bottom: 1px solid var(--border);       transition: background .3s;     }     .nav-link {       color: var(--muted); font-weight: 500; font-size: .9rem;       text-decoration: none; letter-spacing: .03em;       transition: color .2s;     }     .nav-link:hover { color: var(--cyan); }     #mobile-menu {       display: none; flex-direction: column; gap: 1.25rem;       padding: 1.5rem 1.5rem 2rem;       background: var(--surface);       border-top: 1px solid var(--border);     }     #mobile-menu.open { display: flex; }     .burger span {       display: block; width: 24px; height: 2px;       background: var(--text); border-radius: 2px;       transition: transform .3s, opacity .3s;     }     .burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }     .burger.open span:nth-child(2) { opacity: 0; }     .burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }     .phone-shell {       width: 260px; height: 520px;       background: linear-gradient(160deg, #1a2540 0%, #0e1424 100%);       border-radius: 38px;       border: 2px solid var(--border);       box-shadow: 0 0 0 6px rgba(0,229,200,.07), 0 40px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);       position: relative; overflow: hidden;       display: flex; flex-direction: column; align-items: stretch;     }     .phone-notch {       width: 80px; height: 22px;       background: #080b14;       border-radius: 0 0 16px 16px;       margin: 0 auto 8px; flex-shrink: 0;     }     .phone-screen {       flex: 1; overflow: hidden; margin: 0 8px 8px;       border-radius: 20px;     }     .phone-screen img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }     .benefit-card {       background: var(--card);       border: 1px solid var(--border);       border-radius: 18px;       padding: 1.75rem;       position: relative; overflow: hidden;       transition: transform .3s, border-color .3s, box-shadow .3s;     }     .benefit-card::before {       content: ''; position: absolute; inset: 0;       background: linear-gradient(135deg, rgba(0,229,200,.06) 0%, transparent 60%);       opacity: 0; transition: opacity .3s;     }     .benefit-card:hover { transform: translateY(-5px); border-color: rgba(0,229,200,.4); box-shadow: 0 20px 60px rgba(0,229,200,.1); }     .benefit-card:hover::before { opacity: 1; }     .team-card {       background: var(--card);       border: 1px solid var(--border);       border-radius: 18px;       padding: 2rem;       display: flex; flex-direction: column; align-items: center; gap: 1rem;       text-align: center;       transition: transform .3s, border-color .3s;     }     .team-card:hover { transform: translateY(-4px); border-color: rgba(124,58,237,.5); }     .avatar {       width: 72px; height: 72px;       border-radius: 50%;       background: linear-gradient(135deg, var(--violet), var(--fuchsia));       display: flex; align-items: center; justify-content: center;       font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 800;       color: #fff; flex-shrink: 0;       box-shadow: 0 0 20px rgba(124,58,237,.4);     }     .section-divider {       height: 1px;       background: linear-gradient(90deg, transparent, var(--border), transparent);       margin: 0;     }     .content-body h1 { font-family:'Syne',sans-serif; font-size:2rem; font-weight:800; color:#fff; margin-bottom:1rem; }     .content-body h2 { font-family:'Syne',sans-serif; font-size:1.5rem; font-weight:700; color:var(--cyan); margin:2rem 0 .75rem; }     .content-body h3 { font-family:'Syne',sans-serif; font-size:1.2rem; font-weight:700; color:var(--text); margin:1.5rem 0 .5rem; }     .content-body h4 { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin:1.25rem 0 .4rem; }     .content-body p  { color:var(--muted); margin-bottom:1rem; }     .content-body ul, .content-body ol { padding-left:1.4rem; margin-bottom:1rem; color:var(--muted); }     .content-body ul { list-style:none; }     .content-body ul li::before { content:'▹'; color:var(--cyan); margin-right:.5rem; }     .content-body ol { list-style:decimal; }     .content-body ol li { padding-left:.25rem; }     .content-body li  { margin-bottom:.4rem; }     .content-body a   { color:var(--cyan); text-decoration:underline; text-underline-offset:3px; transition:color .2s; }     .content-body a:hover { color:#fff; }     .content-body strong { color:#fff; font-weight:600; }     .content-body em  { color:var(--fuchsia); font-style:italic; }     .content-body blockquote {       border-left: 3px solid var(--cyan);       margin: 1.5rem 0; padding: .75rem 1.25rem;       background: rgba(0,229,200,.05); border-radius: 0 10px 10px 0;       color: var(--text); font-style: italic;     }     .content-body img { max-width:100%; border-radius:12px; margin:1.25rem 0; border:1px solid var(--border); }     .content-body table { width:100%; border-collapse:collapse; margin:1.5rem 0; }     .content-body th { background:var(--surface); color:var(--cyan); font-family:'Syne',sans-serif; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; padding:.75rem 1rem; border:1px solid var(--border); text-align:left; }     .content-body td { padding:.75rem 1rem; border:1px solid var(--border); color:var(--muted); }     .content-body tr:nth-child(even) td { background:rgba(255,255,255,.02); }     .section-tag {       display: inline-block;       padding: .25rem .85rem;       border: 1px solid rgba(0,229,200,.35);       border-radius: 9999px;       font-size: .75rem; font-weight: 700; letter-spacing: .1em;       text-transform: uppercase; color: var(--cyan);       margin-bottom: 1rem;     }     footer a { color: var(--muted); text-decoration: none; transition: color .2s; }     footer a:hover { color: var(--cyan); }     .particle {       position: absolute; border-radius: 50%;       background: var(--cyan);       animation: floatUp linear infinite;       pointer-events: none;       opacity: 0;     }     @keyframes floatUp {       0%   { transform: translateY(0) scale(1); opacity: .6; }       100% { transform: translateY(-120px) scale(.2); opacity: 0; }     }     .icon-wrap {       width: 52px; height: 52px; border-radius: 14px;       background: linear-gradient(135deg, rgba(0,229,200,.15), rgba(124,58,237,.15));       border: 1px solid rgba(0,229,200,.2);       display: flex; align-items: center; justify-content: center;       margin-bottom: 1.25rem;       flex-shrink: 0;     }     .badge {       display: inline-flex; align-items: center; gap: .35rem;       padding: .3rem .85rem;       border-radius: 9999px;       background: rgba(0,229,200,.1);       border: 1px solid rgba(0,229,200,.25);       color: var(--cyan); font-size: .78rem; font-weight: 600;     }     .stat-number {       font-family: 'Syne', sans-serif; font-size: 2.5rem; font-weight: 800;       background: linear-gradient(135deg, var(--cyan), var(--violet));       -webkit-background-clip: text; -webkit-text-fill-color: transparent;       background-clip: text;     }@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }   @keyframes phoneFloat { 0%,100%{transform:translateY(0) rotate(-1deg);} 50%{transform:translateY(-14px) rotate(1deg);} }   @keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(6px);} }