/* ═══ SYNTHIYA DESIGN SYSTEM ═══ */ /* Dark/Light mode via [data-theme] on */ :root, [data-theme="dark"] { --bg:#07090c;--bg2:#0c0f15;--sf:#11151e;--cd:#161c28;--cd2:#1c2436; --bd:rgba(255,255,255,.04);--bd2:rgba(255,255,255,.07); --tx:#eff2f7;--tx2:#b3bcc8;--sc:#6a7585;--mt:#3c4856; --pr:#635bff;--pr2:#8b85ff;--prB:rgba(99,91,255,.055);--prS:rgba(99,91,255,.18); --cy:#00d4aa;--am:#ff9f43;--rs:#ff6b6b;--bl:#4dabf7;--gn:#51cf66; --nav-bg:rgba(7,9,12,.75);--glass:rgba(255,255,255,.03); --shadow:rgba(0,0,0,.3);--card-hover:rgba(255,255,255,.02); } [data-theme="light"] { --bg:#f7f8fa;--bg2:#ffffff;--sf:#f0f2f5;--cd:#ffffff;--cd2:#f5f6f8; --bd:rgba(0,0,0,.06);--bd2:rgba(0,0,0,.1); --tx:#111827;--tx2:#374151;--sc:#6b7280;--mt:#9ca3af; --pr:#635bff;--pr2:#4f46e5;--prB:rgba(99,91,255,.06);--prS:rgba(99,91,255,.12); --cy:#059669;--am:#d97706;--rs:#dc2626;--bl:#2563eb;--gn:#16a34a; --nav-bg:rgba(255,255,255,.8);--glass:rgba(0,0,0,.02); --shadow:rgba(0,0,0,.08);--card-hover:rgba(0,0,0,.02); } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box } html { scroll-behavior:smooth; background:var(--bg); transition:background .4s, color .4s } body { background:var(--bg); color:var(--tx); font-family:'Instrument Sans','Sora',system-ui,-apple-system,sans-serif; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background .4s, color .4s; } a { color:var(--pr2); text-decoration:none; transition:.2s } a:hover { color:var(--pr) } button { font-family:inherit; cursor:pointer } img { max-width:100%; display:block } /* Grain */ body::after { content:''; position:fixed; inset:0; opacity:.2; pointer-events:none; z-index:9999; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.015'/%3E%3C/svg%3E"); } [data-theme="light"] body::after { opacity:.08 } /* ═══ ANIMATIONS ═══ */ .rv { opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1) } .rv.v { opacity:1; transform:translateY(0) } .d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}.d5{transition-delay:.3s} @keyframes glow { 0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(1)} 50%{opacity:.65;transform:translate(-50%,-50%) scale(1.04)} } @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} } @keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} } @keyframes pls { 0%,100%{opacity:1} 50%{opacity:.2} } @keyframes tilt3d { 0%,100%{transform:perspective(600px) rotateY(0)} 50%{transform:perspective(600px) rotateY(2deg)} } @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} } @keyframes slideIn { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} } @keyframes scaleIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} } @keyframes barGrow { from{width:0} } @keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} } /* 3D card hover */ .card-3d { transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; transform-style:preserve-3d } .card-3d:hover { transform:perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-4px); box-shadow:0 20px 50px var(--shadow) } /* ═══ LAYOUT ═══ */ .mx { max-width:1100px; margin:0 auto; padding:0 22px } .sec { padding:96px 0 } .cn { text-align:center; display:flex; flex-direction:column; align-items:center } .tag { font-size:11px; font-weight:700; color:var(--pr2); letter-spacing:5px; text-transform:uppercase; margin-bottom:14px } .sh { font-size:clamp(28px,5.5vw,48px); font-weight:800; letter-spacing:-1.2px; line-height:1.05; margin-bottom:18px; font-family:'Sora',sans-serif } .sp { font-size:17px; color:var(--sc); max-width:540px; line-height:1.7; margin-bottom:50px } .gr { background:linear-gradient(135deg,var(--pr),var(--pr2),var(--cy)); -webkit-background-clip:text; -webkit-text-fill-color:transparent } /* ═══ BUTTONS ═══ */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 32px; border-radius:13px; font-size:15px; font-weight:700; border:none; transition:all .3s cubic-bezier(.16,1,.3,1); text-decoration:none; font-family:'Sora',sans-serif; letter-spacing:-.2px; } .btn:active { transform:scale(.97) } .bt { background:linear-gradient(135deg,var(--pr),var(--pr2)); color:#fff; box-shadow:0 6px 24px var(--prS) } .bt:hover { transform:translateY(-2px); box-shadow:0 12px 38px var(--prS); color:#fff } .bg { background:var(--glass); color:var(--tx); border:1.5px solid var(--bd2) } .bg:hover { background:var(--card-hover); border-color:var(--pr) } /* ═══ NAV ═══ */ nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:10px 22px; background:var(--nav-bg); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); border-bottom:1px solid var(--bd); transition:background .4s; } .ni { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between } .nlo { display:flex; align-items:center; gap:8px; font-size:19px; font-weight:800; color:var(--tx); font-family:'Sora',sans-serif; text-decoration:none } .nic { width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--pr),var(--pr2)); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px var(--prS); } .nlk { display:flex; gap:20px; align-items:center } .nlk a { font-size:13px; font-weight:600; color:var(--sc); transition:.2s } .nlk a:hover, .nlk a.active { color:var(--tx) } .nct { padding:8px 18px!important; font-size:12px!important; border-radius:10px!important } /* Theme toggle */ .theme-toggle { width:36px; height:36px; border-radius:10px; background:var(--glass); border:1px solid var(--bd); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; color:var(--sc); } .theme-toggle:hover { background:var(--card-hover); border-color:var(--pr) } @media(max-width:768px) { .nlk .hl { display:none } .nlk { gap:10px } } /* ═══ CARDS ═══ */ .card { background:var(--cd); border:1px solid var(--bd); border-radius:20px; padding:28px 22px; transition:all .35s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden; } .card:hover { border-color:var(--bd2); transform:translateY(-4px); box-shadow:0 16px 44px var(--shadow) } .card-glow { position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:180px; height:180px; border-radius:50%; opacity:.04; pointer-events:none; } .card-line { position:absolute; top:0; left:0; right:0; height:1.5px; border-radius:2px; opacity:.25; } /* Social media logos */ .social-logos { display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap } .social-logo { width:36px; height:36px; border-radius:10px; background:var(--glass); border:1px solid var(--bd); display:flex; align-items:center; justify-content:center; transition:all .2s; } .social-logo:hover { border-color:var(--pr); transform:scale(1.1) } .social-logo svg { width:18px; height:18px } /* Factor card */ .fc { background:var(--cd); border:1px solid var(--bd); border-radius:16px; padding:20px 16px; transition:all .3s; position:relative; overflow:hidden } .fc:hover { border-color:var(--bd2); transform:translateY(-2px) } .fc-line { position:absolute; top:0; left:0; right:0; height:1.5px; border-radius:2px; opacity:.25 } .fc-top { display:flex; align-items:center; gap:6px; margin-bottom:10px } .fc-nm { font-size:14px; font-weight:700; font-family:'Sora',sans-serif } .fc-wt { margin-left:auto; font-size:9px; color:var(--mt); font-weight:600; background:var(--glass); padding:2px 7px; border-radius:5px } .fc-new { font-size:7px; font-weight:800; background:rgba(0,212,170,.08); color:var(--cy); padding:2px 5px; border-radius:3px; margin-left:3px } .fc-list { font-size:11px; color:var(--sc); line-height:1.55 } /* Pricing */ .pr { background:var(--cd); border:1px solid var(--bd); border-radius:22px; padding:32px 20px; text-align:center; transition:all .3s; position:relative } .pr.pop { border-color:var(--pr); box-shadow:0 6px 32px var(--prS) } .prbd { position:absolute; top:-11px; left:50%; transform:translateX(-50%); color:#fff; font-size:8px; font-weight:800; padding:4px 14px; border-radius:20px; letter-spacing:.8px; white-space:nowrap } .pr h4 { font-size:16px; font-weight:700; margin-bottom:3px; font-family:'Sora',sans-serif } .pr .amt { font-size:32px; font-weight:800; color:var(--pr); margin:6px 0; font-family:'Sora',sans-serif } .pr .per { font-size:11px; color:var(--mt) } .pr ul { list-style:none; margin:16px 0; text-align:left } .pr li { font-size:12px; color:var(--sc); padding:7px 0; border-bottom:1px solid var(--bd); display:flex; align-items:center; gap:7px } .pr li::before { content:''; width:16px; height:16px; flex-shrink:0; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12l5 5L20 7' stroke='%2300d4aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat } /* FAQ */ .fq { border-bottom:1px solid var(--bd) } .fqq { display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:16px; font-weight:700; color:var(--tx); background:none; border:none; width:100%; text-align:left; font-family:inherit; cursor:pointer; transition:.2s } .fqq:hover { color:var(--pr2) } .fqq svg { transition:transform .3s; flex-shrink:0; margin-left:12px } .fqq.open svg { transform:rotate(180deg) } .fqa { max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.16,1,.3,1) } .fqa.open { max-height:240px } .fqa p { padding:0 0 22px; font-size:14.5px; color:var(--sc); line-height:1.7 } /* Score bars */ .bar { display:flex; align-items:center; gap:8px; margin-bottom:5px } .bar-n { font-size:10px; color:var(--sc); width:60px; font-weight:600 } .bar-b { flex:1; height:5px; border-radius:3px; background:var(--glass); overflow:hidden } .bar-f { height:100%; border-radius:3px; animation:barGrow .8s cubic-bezier(.16,1,.3,1) } .bar-v { font-size:9px; font-weight:700; width:34px; text-align:right } /* Truth badge */ .truth { display:inline-flex; align-items:center; gap:5px; background:rgba(255,107,107,.04); border:1px solid rgba(255,107,107,.08); border-radius:9px; padding:7px 14px; font-size:10px; color:var(--rs); font-weight:600 } [data-theme="light"] .truth { background:rgba(220,38,38,.04); border-color:rgba(220,38,38,.1) } /* Testimonial */ .tm { background:var(--cd); border:1px solid var(--bd); border-radius:20px; padding:26px 22px; position:relative } .tm::before { content:'\201C'; position:absolute; top:12px; left:16px; font-size:42px; font-weight:800; color:var(--pr); opacity:.05; line-height:1 } .tm p { font-size:13.5px; line-height:1.6; margin-bottom:14px; color:var(--tx2) } /* Footer */ footer { border-top:1px solid var(--bd); padding:44px 22px; text-align:center; transition:background .4s } footer p { font-size:12px; color:var(--mt) } .flk { display:flex; gap:20px; justify-content:center; margin-top:12px; flex-wrap:wrap } .flk a { font-size:12px; color:var(--sc); font-weight:500 } .flk a:hover { color:var(--pr2) } /* Waitlist */ .wl { display:flex; gap:10px; max-width:400px; margin:0 auto; width:100% } .wl input { flex:1; padding:14px 18px; background:var(--glass); border:1.5px solid var(--bd2); border-radius:12px; color:var(--tx); font-size:14px; font-family:inherit; outline:none; transition:.2s } .wl input:focus { border-color:var(--pr) } .wl input::placeholder { color:var(--mt) } .wl button { padding:14px 24px; background:linear-gradient(135deg,var(--pr),var(--pr2)); border:none; border-radius:12px; color:#fff; font-size:14px; font-weight:700; font-family:'Sora',sans-serif; white-space:nowrap; box-shadow:0 4px 12px var(--prS) } /* Page header */ .page-header { padding:120px 22px 60px; text-align:center; position:relative; overflow:hidden; } .page-header .pg { position:absolute; width:500px; height:500px; top:50%; left:50%; background:radial-gradient(circle,rgba(99,91,255,.06),transparent 55%); animation:glow 6s ease-in-out infinite; pointer-events:none } /* Responsive */ @media(max-width:640px) { .sec { padding:70px 0 } .page-header { padding:100px 16px 50px } .wl { flex-direction:column } }