@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap");

:root {
--bg-0: #080a0f;
--bg-1: #121a27;
--line: rgba(120, 180, 255, 0.15);
--card: rgba(16, 22, 35, 0.74);
--card-border: rgba(131, 191, 255, 0.24);
--text-main: #eaf2ff;
--text-soft: #95a9cb;
--accent: #65a6ff;
--accent-2: #93dcff;
}

* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: "Space Grotesk", sans-serif;
color: var(--text-main);
min-height: 100dvh;
background: linear-gradient(140deg, var(--bg-0), var(--bg-1));
overflow-x: hidden;
}

.landing-page {
position: relative;
padding: 18px;
}

.bg-grid {
position: fixed;
inset: 0;
background-image:
linear-gradient(to right, var(--line) 1px, transparent 1px),
linear-gradient(to bottom, var(--line) 1px, transparent 1px);
background-size: 44px 44px;
opacity: 0.27;
mask-image: radial-gradient(circle at center, black 38%, transparent 90%);
pointer-events: none;
z-index: 0;
}

.bg-spot {
position: fixed;
width: min(58vw, 560px);
height: min(58vw, 560px);
border-radius: 50%;
filter: blur(46px);
opacity: 0.36;
pointer-events: none;
z-index: 0;
}

.bg-spot-a {
left: -14%;
top: -18%;
background: rgba(101, 166, 255, 0.55);
}

.bg-spot-b {
right: -18%;
bottom: -22%;
background: rgba(147, 220, 255, 0.45);
}

.site-header,
.hero {
position: relative;
z-index: 1;
width: min(1080px, 100%);
margin-inline: auto;
}

.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 0;
}

.brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text-main);
text-decoration: none;
font-family: "Sora", sans-serif;
font-weight: 600;
letter-spacing: 0.2px;
}

.brand img {
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(3, 5, 10, 0.7);
border: 1px solid rgba(131, 191, 255, 0.28);
padding: 4px;
}

.header-actions {
display: flex;
align-items: center;
gap: 8px;
}

.ghost-link,
.primary-link,
#pricing-scroll-btn {
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 14px;
border-radius: 999px;
text-decoration: none;
font-weight: 500;
}

.ghost-link,
#pricing-scroll-btn {
color: var(--text-soft);
border: 1px solid rgba(131, 191, 255, 0.2);
background: rgba(16, 22, 35, 0.45);
cursor: pointer;
transition: all 0.2s ease;
}

.ghost-link:hover,
#pricing-scroll-btn:hover {
border-color: rgba(131, 191, 255, 0.4);
background: rgba(16, 22, 35, 0.6);
color: var(--text-main);
}

#pricing-scroll-btn {
font-family: inherit;
font-size: inherit;
}

.primary-link {
color: #07101b;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
border: 1px solid rgba(131, 191, 255, 0.42);
}

.hero {
padding: clamp(46px, 9vh, 110px) 0 50px;
}

.eyebrow {
margin: 0;
color: var(--accent-2);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}

h1 {
margin: 14px 0 12px;
font-family: "Sora", sans-serif;
font-size: clamp(2rem, 8vw, 4.9rem);
line-height: 0.98;
letter-spacing: -0.02em;
max-width: 14ch;
}

.hero-copy {
margin: 0;
max-width: 60ch;
font-size: clamp(1rem, 2.1vw, 1.2rem);
line-height: 1.55;
color: var(--text-soft);
}

.hero-actions {
margin-top: 24px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

.cta-main,
.cta-sub {
height: 44px;
padding: 0 18px;
border-radius: 12px;
font: inherit;
font-weight: 600;
cursor: pointer;
}

.cta-main {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #081222;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
border: 1px solid rgba(147, 220, 255, 0.5);
}

.cta-sub {
color: var(--text-main);
background: rgba(16, 22, 35, 0.58);
border: 1px solid rgba(131, 191, 255, 0.28);
}

.feature-grid {
margin-top: clamp(26px, 6vh, 58px);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}

.feature-card {
padding: 16px;
border-radius: 14px;
background: var(--card);
border: 1px solid var(--card-border);
backdrop-filter: blur(4px);
}

.feature-card h2 {
margin: 0 0 8px;
font-family: "Sora", sans-serif;
font-size: 1rem;
}

.feature-card p {
margin: 0;
line-height: 1.45;
color: var(--text-soft);
font-size: 0.96rem;
}

@media (max-width: 900px) {
.feature-grid {
grid-template-columns: 1fr;
}
}

.dialog-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(2px);
z-index: 999;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}

.dialog-backdrop.active {
opacity: 1;
pointer-events: auto;
}

.unlock-dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
z-index: 1000;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}

.unlock-dialog.active {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
pointer-events: auto;
}

.unlock-dialog-content {
position: relative;
padding: 36px;
min-width: 360px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(18, 26, 39, 0.95), rgba(8, 10, 15, 0.95));
border: 1px solid rgba(131, 191, 255, 0.3);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.unlock-dialog-content h2 {
margin: 0;
font-family: "Sora", sans-serif;
font-size: 1.3rem;
color: var(--text-main);
line-height: 1.4;
}

.unlock-dialog-close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(131, 191, 255, 0.1);
border: 1px solid rgba(131, 191, 255, 0.2);
border-radius: 8px;
color: var(--text-soft);
font-size: 1.4rem;
cursor: pointer;
transition: all 0.2s ease;
line-height: 1;
padding: 0;
font-weight: 400;
}

.unlock-dialog-close:hover {
background: rgba(131, 191, 255, 0.2);
color: var(--text-main);
border-color: rgba(131, 191, 255, 0.4);
}

@media (max-width: 620px) {
.landing-page {
padding: 12px;
}

.site-header {
gap: 10px;
align-items: flex-start;
flex-direction: column;
}

.unlock-dialog-content {
min-width: 280px;
padding: 28px;
}

.unlock-dialog-content h2 {
font-size: 1.1rem;
}
}

/* Pricing Section */
.pricing-section {
position: relative;
z-index: 1;
width: min(1080px, 100%);
margin: 120px auto 0;
padding: 80px 0;
}

.pricing-header {
text-align: center;
margin-bottom: 60px;
}

.pricing-header h2 {
margin: 0 0 16px;
font-family: "Sora", sans-serif;
font-size: clamp(2rem, 6vw, 3rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-main);
}

.pricing-subtitle {
margin: 0 0 8px;
font-size: 1.1rem;
color: var(--text-soft);
}

.pricing-tagline {
margin: 0;
font-size: 0.95rem;
color: var(--accent);
font-style: italic;
max-width: 70ch;
margin-left: auto;
margin-right: auto;
}

.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-bottom: 60px;
}

.pricing-card {
position: relative;
padding: 36px;
border-radius: 16px;
background: rgba(19, 23, 32, 0.8);
border: 1px solid rgba(123, 152, 200, 0.15);
backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
transition: all 0.3s ease;
}

.pricing-card:hover {
border-color: rgba(123, 152, 200, 0.35);
transform: translateY(-2px);
}

.pricing-card.featured {
background: rgba(30, 37, 53, 0.95);
border: 2px solid var(--accent);
transform: scale(1.04);
}

.pricing-card.featured:hover {
transform: scale(1.04) translateY(-2px);
}

.pricing-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 6px 16px;
background: var(--accent);
color: var(--bg-0);
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}

.pricing-card.featured .pricing-badge {
background: #ffdb57;
}

.pricing-card.ultra .pricing-badge {
background: #ffdb57;
}

.pricing-tier {
margin-top: 8px;
margin-bottom: 12px;
font-family: "Sora", sans-serif;
font-size: 1.3rem;
font-weight: 700;
}

.pricing-price {
font-size: 2.8rem;
font-family: "Sora", sans-serif;
font-weight: 700;
margin: 0 0 4px;
color: var(--text-main);
}

.pricing-price .currency {
font-size: 1.6rem;
}

.pricing-price .period {
font-size: 1.5rem;
}

.pricing-period {
font-size: 0.9rem;
color: var(--text-soft);
margin: 0 0 20px;
}

.pricing-description {
font-size: 0.95rem;
color: var(--text-soft);
margin: 0 0 28px;
line-height: 1.5;
flex-grow: 1;
}

.pricing-cta {
width: 100%;
padding: 12px 20px;
margin-bottom: 28px;
border: none;
border-radius: 12px;
font-family: "Space Grotesk", sans-serif;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}

.pricing-cta.primary {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: var(--bg-0);
}

.pricing-cta.primary:hover {
opacity: 0.9;
transform: translateY(-1px);
}

.pricing-cta.secondary {
background: rgba(123, 152, 200, 0.15);
color: var(--text-soft);
border: 1px solid rgba(123, 152, 200, 0.3);
}

.pricing-cta.secondary:hover {
background: rgba(123, 152, 200, 0.25);
}

.features-list {
list-style: none;
padding: 0;
margin: 0;
}

.features-list li {
padding: 10px 0;
font-size: 0.9rem;
color: var(--text-soft);
display: flex;
align-items: flex-start;
gap: 10px;
}

.features-list li::before {
content: "✓";
display: inline-block;
width: 20px;
min-width: 20px;
text-align: center;
font-weight: 700;
flex-shrink: 0;
}

.pricing-card.under .features-list li::before {
color: #5a6b7f;
}

.pricing-card.featured .features-list li::before {
color: var(--accent);
}

.pricing-card.ultra .features-list li::before {
color: #ffdb57;
}

.pricing-footer {
text-align: center;
padding: 32px 24px;
border-top: 1px solid rgba(123, 152, 200, 0.1);
margin-top: 48px;
}

.pricing-footer p {
margin: 0;
font-size: 0.85rem;
color: var(--text-soft);
line-height: 1.6;
max-width: 90ch;
margin-left: auto;
margin-right: auto;
}

@media (max-width: 1024px) {
.pricing-grid {
grid-template-columns: 1fr;
gap: 24px;
}

.pricing-card.featured {
transform: scale(1);
}

.pricing-card.featured:hover {
transform: translateY(-2px);
}

.pricing-section {
margin: 80px auto 0;
padding: 60px 0;
}
}