:root {
--charcoal: #12131c;
--midnight: #1a1c29;
--indigo: #6058f0;
--indigo-soft: #8b85f5;
--indigo-deep: #4040a0;
--cream: #fff5eb;
--slate: #9e9eb0;
--bg: var(--charcoal);
--surface: var(--midnight);
--text: var(--cream);
--muted: var(--slate);
--accent: var(--indigo);
--accent-soft: var(--indigo-soft);
--border: rgba(158, 158, 176, 0.16);
--glow: rgba(96, 88, 240, 0.32);
--shell: clamp(1.1rem, 4vw, 4rem);
--max: 1120px;
--nav-h: 4.25rem;
--font-display: "Syne", system-ui, sans-serif;
--font-body: "Figtree", system-ui, sans-serif;
}
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
min-height: 100%;
font-family: var(--font-body);
color: var(--text);
background: var(--bg);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }
.atmosphere {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse 80% 50% at 15% -10%, rgba(96, 88, 240, 0.22), transparent 55%),
radial-gradient(ellipse 60% 40% at 90% 10%, rgba(139, 133, 245, 0.12), transparent 50%),
radial-gradient(ellipse 50% 35% at 70% 90%, rgba(64, 64, 160, 0.16), transparent 55%),
linear-gradient(180deg, #12131c 0%, #141522 45%, #12131c 100%);
}
.atmosphere::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.35;
background-image:
linear-gradient(rgba(158, 158, 176, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(158, 158, 176, 0.05) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
animation: grid-drift 28s linear infinite;
}
@keyframes grid-drift {
from { transform: translateY(0); }
to { transform: translateY(64px); }
}
.site-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
height: var(--nav-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0 var(--shell);
background: rgba(18, 19, 28, 0.72);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid transparent;
transition: border-color 0.25s, background 0.25s;
}
.site-nav.is-scrolled {
border-bottom-color: var(--border);
background: rgba(18, 19, 28, 0.92);
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.65rem;
min-width: 0;
}
.brand-mark {
width: 1.85rem;
height: 1.85rem;
flex-shrink: 0;
}
.brand-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: -0.03em;
color: var(--cream);
}
.nav-links {
display: flex;
align-items: center;
gap: 1.5rem;
}
.nav-links a {
color: var(--muted);
font-size: 0.92rem;
font-weight: 550;
transition: color 0.15s;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
color: var(--cream);
}
.nav-actions {
display: flex;
align-items: center;
gap: 0.6rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.72rem 1.15rem;
border-radius: 0.55rem;
border: 1px solid transparent;
font-weight: 700;
font-size: 0.92rem;
letter-spacing: -0.01em;
cursor: pointer;
transition: transform 0.15s ease, background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
background: linear-gradient(135deg, var(--indigo-soft), var(--indigo-deep));
color: #fff;
box-shadow: 0 0 28px var(--glow);
}
.btn-primary:hover {
box-shadow: 0 0 36px rgba(96, 88, 240, 0.48);
}
.btn-ghost {
background: transparent;
color: var(--cream);
border-color: var(--border);
}
.btn-ghost:hover {
border-color: rgba(139, 133, 245, 0.5);
color: var(--indigo-soft);
}
.nav-toggle {
display: none;
width: 2.5rem;
height: 2.5rem;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--border);
border-radius: 0.5rem;
color: var(--cream);
cursor: pointer;
}
.mobile-menu {
display: none;
position: fixed;
top: var(--nav-h);
left: 0; right: 0;
z-index: 49;
padding: 1.25rem var(--shell) 1.75rem;
background: rgba(18, 19, 28, 0.97);
border-bottom: 1px solid var(--border);
flex-direction: column;
gap: 1rem;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
color: var(--cream);
font-size: 1.05rem;
font-weight: 600;
}
.hero {
min-height: 100dvh;
display: grid;
align-content: center;
padding: calc(var(--nav-h) + 2.5rem) var(--shell) 4rem;
position: relative;
overflow: hidden;
}
.hero-inner {
max-width: var(--max);
margin: 0 auto;
width: 100%;
}
.hero-brand {
font-family: var(--font-display);
font-size: clamp(2.6rem, 7vw, 5.2rem);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 0.95;
margin: 0 0 1.1rem;
background: linear-gradient(120deg, var(--cream) 15%, var(--indigo-soft) 55%, var(--indigo) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rise 0.8s ease both;
}
.hero-title {
max-width: 18ch;
margin: 0 0 1rem;
font-family: var(--font-display);
font-size: clamp(1.35rem, 2.8vw, 2rem);
font-weight: 650;
letter-spacing: -0.03em;
line-height: 1.2;
color: var(--cream);
animation: rise 0.8s ease 0.08s both;
}
.hero-sub {
max-width: 38rem;
margin: 0 0 1.75rem;
color: var(--muted);
font-size: clamp(1rem, 1.6vw, 1.15rem);
animation: rise 0.8s ease 0.16s both;
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
animation: rise 0.8s ease 0.24s both;
}
.hero-proof {
display: flex;
flex-wrap: wrap;
gap: 0.55rem 1.1rem;
margin-top: 1.75rem;
color: var(--muted);
font-size: 0.88rem;
animation: rise 0.8s ease 0.32s both;
}
.hero-proof span {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.hero-proof span::before {
content: "";
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: var(--indigo);
box-shadow: 0 0 10px var(--glow);
}
.hero-orb {
position: absolute;
right: -8%;
top: 18%;
width: min(42vw, 420px);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, rgba(139, 133, 245, 0.4), rgba(96, 88, 240, 0.16) 45%, transparent 70%);
filter: blur(8px);
animation: pulse-orb 5.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes pulse-orb {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.08); opacity: 1; }
}
@keyframes rise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.section {
padding: 5rem var(--shell);
max-width: var(--max);
margin: 0 auto;
}
.section-label {
display: inline-block;
margin-bottom: 0.75rem;
color: var(--indigo-soft);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.section h2 {
margin: 0 0 0.75rem;
font-family: var(--font-display);
font-size: clamp(1.6rem, 3.2vw, 2.35rem);
font-weight: 750;
letter-spacing: -0.03em;
line-height: 1.15;
}
.section-intro {
margin: 0 0 2rem;
max-width: 40rem;
color: var(--muted);
font-size: 1.05rem;
}
.feature-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.9rem;
}
.feature-list li {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.85rem;
align-items: start;
padding: 0.15rem 0;
color: var(--cream);
font-size: 1.02rem;
}
.feature-list li::before {
content: "";
width: 0.55rem;
height: 0.55rem;
margin-top: 0.45rem;
border-radius: 2px;
background: var(--indigo);
box-shadow: 0 0 12px var(--glow);
}
.use-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem 2rem;
}
.use-item h3 {
margin: 0 0 0.45rem;
font-family: var(--font-display);
font-size: 1.15rem;
letter-spacing: -0.02em;
}
.use-item p {
margin: 0;
color: var(--muted);
font-size: 0.98rem;
}
.faq-list {
display: grid;
gap: 0.65rem;
}
.faq-item {
border-bottom: 1px solid var(--border);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 1rem 0;
font-weight: 650;
font-size: 1.02rem;
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
color: var(--indigo);
font-size: 1.25rem;
font-weight: 500;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p {
margin: 0 0 1.1rem;
color: var(--muted);
max-width: 42rem;
}
.compare-wrap { overflow-x: auto; }
.compare {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
min-width: 520px;
}
.compare th,
.compare td {
padding: 0.85rem 0.75rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
.compare th {
color: var(--indigo-soft);
font-family: var(--font-display);
font-weight: 700;
}
.compare td:nth-child(2) { color: var(--cream); }
.compare td:nth-child(3) { color: var(--muted); }
.choose-list {
margin: 1.5rem 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.65rem;
}
.choose-list li {
padding-left: 1.1rem;
position: relative;
color: var(--cream);
}
.choose-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55rem;
width: 0.4rem;
height: 0.4rem;
background: var(--indigo);
border-radius: 50%;
}
.disclaimer {
margin-top: 1.25rem;
color: var(--muted);
font-size: 0.82rem;
}
.alt-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.alt-card {
display: block;
padding: 1.25rem 1.35rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.75rem;
transition: border-color 0.15s, transform 0.15s;
}
.alt-card:hover {
border-color: rgba(96, 88, 240, 0.5);
transform: translateY(-2px);
}
.tool-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1rem;
}
.tool-card {
display: block;
padding: 1.25rem 1.35rem;
background: linear-gradient(160deg, rgba(96, 88, 240, 0.12), rgba(26, 28, 41, 0.9));
border: 1px solid var(--border);
border-radius: 0.9rem;
transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.tool-card:hover {
border-color: rgba(96, 88, 240, 0.55);
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.tool-card .eyebrow {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--indigo-soft);
font-weight: 650;
margin-bottom: 0.45rem;
}
.tool-card h3 {
margin: 0 0 0.45rem;
font-family: var(--font-display);
font-size: 1.15rem;
letter-spacing: -0.02em;
}
.tool-card p {
margin: 0;
color: var(--muted);
font-size: 0.92rem;
}
.alt-card .eyebrow {
color: var(--indigo-soft);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.4rem;
}
.alt-card h3 {
margin: 0 0 0.4rem;
font-family: var(--font-display);
font-size: 1.15rem;
}
.alt-card p {
margin: 0;
color: var(--muted);
font-size: 0.95rem;
}
.closing {
padding: 5rem var(--shell) 4rem;
text-align: center;
position: relative;
}
.closing::before {
content: "";
position: absolute;
inset: 20% 10% auto;
height: 40%;
background: radial-gradient(ellipse at center, rgba(96, 88, 240, 0.2), transparent 70%);
pointer-events: none;
}
.closing h2 {
position: relative;
margin: 0 0 0.75rem;
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 2.8rem);
letter-spacing: -0.035em;
}
.closing p {
position: relative;
margin: 0 auto 1.5rem;
max-width: 32rem;
color: var(--muted);
}
.closing .hero-ctas {
position: relative;
justify-content: center;
}
.site-footer {
padding: 2.5rem var(--shell) 3rem;
border-top: 1px solid var(--border);
max-width: var(--max);
margin: 0 auto;
}
.footer-brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.footer-copy {
color: var(--muted);
font-size: 0.9rem;
max-width: 28rem;
margin: 0 0 1.5rem;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
}
.footer-links a {
color: var(--muted);
font-size: 0.88rem;
}
.footer-links a:hover { color: var(--indigo-soft); }
.footer-meta {
margin-top: 2rem;
color: var(--muted);
font-size: 0.8rem;
}
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-in {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 900px) {
.use-grid { grid-template-columns: 1fr; }
.alt-grid { grid-template-columns: 1fr; }
.nav-links { display: none; }
.nav-toggle { display: inline-flex; }
.nav-actions .btn-ghost { display: none; }
}
@media (max-width: 520px) {
.brand-name { display: none; }
.hero-ctas .btn { width: 100%; }
}