@import url("theme-tokens.css");
.landing-page {
    font-family: 'Manrope', 'Inter', sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
html { scroll-padding-top: 110px; }
.landing-page ::selection { background: var(--neo-primary); color: var(--color-white); }
.landing-page :focus-visible { outline: 2px solid var(--neo-primary-400); outline-offset: 5px; }
.landing-page .container { max-width: 1240px; }
.landing-page h1, .landing-page h2, .landing-page h3, .landing-page h4 { letter-spacing: -.035em; line-height: 1.25; }
.landing-page h2 { font-weight: 800; text-wrap: balance; }
.landing-page p { text-wrap: pretty; }
.landing-page .text-gray-300 { color: var(--color-muted); }
.landing-page .text-gray-400, .landing-page .text-gray-500, .landing-page .text-gray-600 { color: var(--color-muted); }
.landing-page section:not(.hero), .landing-page footer { background: var(--neo-bg); border-top: 1px solid var(--color-white-a5); }
.landing-page section:nth-of-type(2n) { background: var(--color-input); }
.landing-page section:not(.hero) { padding-block: 88px; }
.site-header { position: fixed; z-index: 50; top: 16px; left: 24px; right: 24px; max-width: 1192px; margin-inline: auto; padding: 8px; background: var(--color-surface-a93); border: 1px solid var(--color-white-a12); border-radius: 20px; backdrop-filter: blur(18px); box-shadow: 0 12px 40px var(--color-black-a20); }
.header-shell { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 54px; padding-left: 16px; }
.header-brand { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.header-brand img { height: 30px; width: auto; }
.header-nav, .header-actions { display: flex; align-items: center; gap: 6px; }
.header-nav a, .header-login { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 15px; font-size: 13px; font-weight: 600; color: var(--color-muted); border-radius: 12px; transition: background .2s, color .2s; }
.header-nav a:hover, .header-login:hover { color: var(--color-white); background: var(--color-white-a3); }
.header-cta { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 13px 20px; min-height: 48px; background: var(--color-text); color: var(--color-on-paper); border-radius: 13px; font-size: 13px; font-weight: 800; transition: background .2s; }
.header-cta:hover { background: var(--color-accent-soft); }
.landing-page #mobile-menu { background: transparent; border-top: 1px solid var(--color-white-a8); margin-top: 8px; max-height: calc(100dvh - 120px); overflow-y: auto; }
.mobile-nav { padding: 12px 8px 4px; }
.mobile-nav a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 12px 16px; color: var(--color-muted); border-radius: 10px; font-size: 15px; }
.mobile-nav a:hover { background: var(--color-white-a3); color: var(--color-white); }
.mobile-nav i { color: var(--neo-primary-400); font-size: 13px; }
.landing-page #mobile-menu-button { display: none; align-items: center; justify-content: center; width: 48px; border: 1px solid var(--color-white-a10); border-radius: 12px; color: var(--color-text); background: var(--color-white-a2); font-size: 20px; }
.site-footer { padding: 0 24px 28px; }
.footer-intro { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding: 72px 0 60px; border-bottom: 1px solid var(--color-white-a10); }
.landing-page .footer-intro h2 { font-size: clamp(36px, 5vw, 68px); font-weight: 700; line-height: 1.08; letter-spacing: -.055em; }
.footer-start { display: inline-flex; align-items: center; gap: 36px; padding: 12px 0; border-bottom: 1px solid var(--color-accent); font-size: 15px; font-weight: 700; white-space: nowrap; }
.footer-start span { display: grid; place-items: center; width: 52px; height: 52px; background: var(--neo-primary); border-radius: 50%; color: var(--color-white); font-size: 25px; transition: transform .25s; }
.footer-start:hover span { transform: rotate(45deg); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 40px; padding: 48px 0 40px; }
.footer-brand img { height: 32px; width: auto; }
.footer-brand > a:first-child { display: inline-flex; min-height: 44px; align-items: center; }
.footer-brand p { max-width: 255px; margin: 16px 0; font-size: 13px; color: var(--color-muted); }
.footer-telegram { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; color: var(--color-accent); }
.landing-page .footer-grid h3 { font-size: 13px; font-weight: 700; color: var(--color-text); margin-bottom: 16px; letter-spacing: 0; }
.footer-grid nav > a, .footer-contact > a { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 13px; color: var(--color-muted); transition: color .2s; }
.footer-grid a:hover { color: var(--color-accent); }
.footer-contact p { font-size: 12px; color: var(--color-muted); margin-top: 8px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: start; gap: 32px; padding-top: 24px; border-top: 1px solid var(--color-white-a8); color: var(--color-muted); font-size: 11.5px; }
.footer-bottom p:last-child { max-width: 450px; text-align: right; }
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
.landing-page button, .landing-page a { -webkit-tap-highlight-color: transparent; }
.landing-page button { cursor: pointer; min-height: 44px; }
.landing-page #mobile-menu-button { min-width: 44px; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; background: var(--neo-primary); color: var(--color-white); padding: 12px 20px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.landing-page .gradient-text { background: none; color: inherit; animation: none; }
.landing-page .hero { padding: 180px 24px 150px; background: var(--neo-bg); isolation: isolate; }
.hero > .container > div { gap: 48px; align-items: center; }
.hero-copy { animation: none; }
.landing-page .hero h1 { font-size: clamp(40px, 4.3vw, 62px); font-weight: 800; line-height: 1.12; letter-spacing: -.055em; margin: 28px 0; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--color-muted); font-size: 12px; font-weight: 600; }
.hero-eyebrow > span, .mint-dot { width: 6px; height: 6px; background: var(--neo-primary-400); border-radius: 50%; display: inline-block; }
.landing-page .hero p { font-size: 16px; line-height: 1.85; max-width: 470px; color: var(--color-muted); }
.hero-copy > .flex { flex-wrap: nowrap; gap: 12px; }
.hero-copy > .flex > a { flex: none; min-width: 0; padding: 15px 22px; font-size: 13px; border-radius: 10px; font-weight: 700; }
.landing-page .bg-gradient-to-r.glow-effect { background: var(--neo-primary); color: var(--color-white); box-shadow: none; }
.landing-page .glow-effect:hover { background: var(--color-accent); box-shadow: none; }
.hero-copy > .flex > a + a { border: 1px solid var(--color-white-a15); background: var(--color-white-a1); }
.hero-copy > .flex > a + a i { display: none; }
.hero-notes { display: flex; gap: 24px; margin-top: 24px; font-size: 11px; color: var(--color-muted); }
.hero-notes i { color: var(--neo-primary-400); margin-right: 6px; }
.landing-page .hero-visual { max-width: none; padding: 0; min-width: 0; width: 50%; animation: landing-enter .9s .15s both; }
.preview-panel { position: relative; width: 100%; border: 1px solid var(--color-white-a15); border-radius: 16px; background: var(--color-surface); box-shadow: 16px 16px 0 var(--color-brand-a8), 0 30px 80px var(--color-black-a33); transform: perspective(1200px) rotateY(-8deg) rotateX(4deg); transition: transform .5s; }
.hero-visual:hover .preview-panel { transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.preview-top { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--color-white-a5); }
.preview-brand { font-weight: 800; font-size: 13px; white-space: nowrap; }
.preview-brand i { margin-right: 7px; color: var(--neo-primary-400); }
.preview-brand small { font-size: 11px; font-weight: 400; color: var(--color-muted); margin-left: 6px; }
.preview-demo { color: var(--color-muted); font-size: 8px; letter-spacing: .1em; white-space: nowrap; }
.preview-body { padding: 26px; }
.preview-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.landing-page .preview-heading p { font-size: 11px; margin-bottom: 6px; }
.landing-page .preview-heading h2 { font-size: 17px; letter-spacing: -.035em; }
.preview-icon { width: 36px; height: 36px; background: var(--color-brand-a10); border: 1px solid var(--color-brand-a33); border-radius: 10px; display: grid; place-items: center; color: var(--neo-primary-400); flex-shrink: 0; }
.preview-search { display: flex; gap: 10px; align-items: center; padding: 13px 12px; margin-top: 25px; background: var(--color-input); border: 1px solid var(--color-white-a5); border-radius: 8px; font-size: 11px; color: var(--color-muted); }
.preview-search i { color: var(--neo-primary-400); }
.preview-search > span { margin-left: auto; color: var(--color-muted); font-size: 9px; }
.preview-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-block: 24px; }
.preview-stats > div > span { color: var(--color-muted); font-size: 10px; }
.preview-stats strong { display: block; font-size: 30px; letter-spacing: -.05em; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; }
.preview-stats > div + div strong { color: var(--neo-primary-400); }
.mint-dot { margin: 0 0 5px 12px; }
.preview-chart { height: 100px; display: flex; align-items: end; gap: 8px; padding: 8px 0 0; border-bottom: 1px solid var(--color-brand-a33); background: repeating-linear-gradient(to top, transparent 0, transparent 32px, var(--color-white-a2) 32px, var(--color-white-a2) 33px); }
.preview-chart > span { flex: 1; height: var(--bar); background: linear-gradient(0deg, var(--color-brand), var(--color-accent)); border-radius: 4px 4px 0 0; transform-origin: bottom; animation: landing-chart 1.1s .4s both; }
.preview-chart > span:nth-child(2n) { animation-delay: .55s; opacity: .7; }
.preview-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; font-size: 9px; color: var(--color-muted); }
.preview-result i { color: var(--neo-primary-400); margin-right: 5px; }
.landing-page .glass-card { background: linear-gradient(145deg, var(--color-surface-hover), var(--color-input)); border: 1px solid var(--color-white-a7); backdrop-filter: none; box-shadow: none; }
.landing-page .collector-card, .landing-page .filter-toggle, .landing-page .price-card { border-radius: 16px; transition: transform .25s, border-color .25s, box-shadow .25s; }
.landing-page .filter-toggle { position: relative; animation: none; cursor: default; padding: 32px; overflow: hidden; }
.landing-page .collector-card:hover, .landing-page .price-card:hover { transform: translateY(-5px); border-color: var(--color-brand-a60); box-shadow: 0 16px 40px var(--color-black-a20); }
.landing-page .collector-card summary { display: block; list-style: none; cursor: default; }
.collector-card summary::-webkit-details-marker { display: none; }
.landing-page .collector-card summary > div { width: 48px; height: 48px; border-radius: 12px; background: var(--color-brand-a10); border: 1px solid var(--color-brand-a20); margin-inline: 0; animation: none; }
.landing-page .collector-card summary > div i { color: var(--neo-primary-400); font-size: 20px; }
.landing-page .collector-card h3 { font-size: 17px; text-align: left; line-height: 1.45; }
.landing-page .collector-card p { font-size: 13px; text-align: left; line-height: 1.85; }
.landing-page .filter-toggle > .flex { position: relative; align-items: flex-start; justify-content: space-between; gap: 20px; }
.landing-page .filter-toggle > .flex > div { flex-shrink: 0; order: 1; width: 32px; height: 32px; margin: 0; border-radius: 0; background: none; }
.landing-page .filter-toggle > .flex > div i { font-size: 24px; color: var(--neo-primary-400); }
.landing-page .filter-toggle h3 { min-width: 0; font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: -.03em; text-wrap: balance; color: var(--color-text); }
.landing-page .filter-toggle p { position: relative; margin-top: 24px; max-width: 52ch; font-size: 14px; font-weight: 400; line-height: 1.85; color: var(--color-muted); }
.landing-page .filter-toggle:hover { transform: none; box-shadow: none; border-color: var(--color-accent-a33); }
.landing-page .filter-guard { background: var(--color-surface-raised); }
.landing-page .filter-verified { background: var(--color-paper); border-color: var(--color-paper); }
.landing-page .filter-verified h3 { color: var(--color-on-paper); }
.landing-page .filter-verified p { color: var(--color-paper-muted); }
.landing-page .filter-verified > .flex > div i { color: var(--color-brand); }
.landing-page .filter-creator { border-top: 3px solid var(--color-accent); }
.landing-page .filter-email { background: var(--color-surface); }
.landing-page .filter-notify { background: var(--color-surface); }
.filter-mobile-hint { display: none; }
.landing-page section > .container > .text-center > p { font-size: 16px; max-width: 600px; line-height: 1.8; }
.pricing-mobile-hint { display: none; }
.usage-notes { max-width: 768px; margin: 32px auto 0; border-top: 1px solid var(--color-white-a8); }
.usage-notes details { border-bottom: 1px solid var(--color-white-a8); }
.usage-notes summary { padding: 18px 0; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.6; }
.usage-notes details p { margin: 0 0 20px; color: var(--color-muted); font-size: 13px; line-height: 1.85; }
.landing-page .price-card { display: flex; flex-direction: column; padding: 32px 24px; }
.landing-page .price-card > a { margin-top: auto; min-height: 48px; }
.landing-page .price-card > .text-center > .text-gray-400 { min-height: 3.4em; display: grid; place-items: center; }
.landing-page .price-card h3 { font-size: 13px; letter-spacing: .15em; color: var(--color-muted); }
.landing-page .price-card .text-4xl { font-size: clamp(28px, 2.8vw, 38px); letter-spacing: -.05em; }
.landing-page .price-card .text-4xl > .text-lg { font-size: 12px; letter-spacing: 0; }
.landing-page .price-card li { font-size: 13px; }
.landing-page .price-card.border-2 { border: 1px solid var(--color-accent); background: linear-gradient(150deg, var(--color-surface-raised), var(--color-input) 65%); }
.landing-page .price-card > .absolute { background: var(--color-brand); color: var(--color-text); font-size: 9px; letter-spacing: .07em; }
.landing-page #daily-toggle, .landing-page #weekly-toggle { font-size: 13px; min-width: 110px; }
.landing-page #pricing button.bg-blue-600 { background: var(--neo-primary); color: var(--color-white); }
.landing-page #pricing > .container > .flex > div { padding: 5px; border: 1px solid var(--color-white-a10); border-radius: 14px; background: var(--color-surface); gap: 4px; }
.landing-page #pricing :is(#daily-toggle, #weekly-toggle) { border-radius: 10px; padding: 11px 22px; transition: background .2s, color .2s; }
.landing-page .site-footer { background: radial-gradient(ellipse at 0 0, var(--color-brand-a8), transparent 55%), var(--color-input); }
.landing-page .footer-intro { position: relative; }
.landing-page .footer-intro::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100px; height: 1px; background: var(--color-accent); }
.landing-page .bg-gray-800, .landing-page .bg-gray-900 { background-color: var(--color-surface-hover); }
.landing-page [class*="bg-gray-800/"] { background-color: var(--color-surface-hover-a50); }
.landing-page #export-preview .space-y-4 .flex > div:first-child { flex-shrink: 0; }
.landing-page #export-preview .space-y-4 .flex > div:last-child { min-width: 0; overflow-wrap: anywhere; }
.landing-page #export-preview .cursor-pointer { cursor: default; }
.landing-page #export-preview .cursor-pointer:hover { border-color: var(--color-white-a7); }
.landing-page #export-preview .group:hover > div:first-child { background: var(--color-surface-raised); }
.export-caption { display: block; margin-top: 6px; color: var(--color-muted); font-size: 12px; }
.landing-page #export-preview > .hover-scale:hover, .landing-page #developer .hover-scale:hover { transform: none; }
.landing-page .border-gray-700 { border-color: var(--color-white-a7); }
.landing-page .scroll-animate { opacity: 1; transform: none; }
.landing-page .scroll-animate.show { animation: landing-enter .65s both; }
.landing-page .animate-bounce, .landing-page .animate-pulse { animation: none; }
.landing-page .font-mono { font-variant-numeric: tabular-nums; }
.landing-page .social-icon, .landing-page footer .space-x-4 > a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.landing-page .scroll-top-btn { background: var(--neo-primary); color: var(--color-white); }
.landing-page :is(.text-blue-300, .text-blue-400, .text-green-300, .text-green-400, .text-green-500) { color: var(--neo-primary-400); }
.landing-page :is(.text-purple-400, .text-red-400, .text-orange-400) { color: var(--landing-accent); }
.landing-page .text-yellow-400 { color: var(--color-warning); }
.landing-page .bg-green-500 { background-color: var(--neo-primary); }
.landing-page [class*="bg-blue-900"], .landing-page [class*="bg-green-900"], .landing-page [class*="bg-purple-900"] { background: var(--color-surface-raised); }
.landing-page .price-card .rounded-full { background: var(--color-surface-raised); color: var(--color-accent-soft); }
.landing-page .price-card:last-child .rounded-full { background: var(--color-surface-raised); color: var(--color-accent-soft); }
.developer-card { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 4px 18px; max-width: 768px; margin: 0 auto; padding: 24px; border: 1px solid var(--color-white-a8); border-radius: 18px; background: var(--color-surface); }
.developer-avatar { grid-row: 1 / 3; width: 56px; height: 56px; object-fit: cover; border-radius: 16px; }
.developer-identity h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.developer-identity span { font-size: 12px; color: var(--color-accent); }
.landing-page #developer .developer-description { grid-column: 2; margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--color-muted); }
.developer-contact { grid-column: 3; grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--color-accent-a20); border-radius: 10px; color: var(--color-accent-soft); font-size: 13px; transition: background .2s; }
.developer-contact:hover { background: var(--color-accent-a6); }
.landing-page .social-icon:hover { color: var(--neo-primary-400); filter: none; }
.landing-page .bg-gradient-to-r { --tw-gradient-from: var(--color-brand); --tw-gradient-to: var(--color-surface-raised); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.landing-page .text-indigo-400 { color: var(--color-accent-soft); }
.landing-page #mobile-menu a:last-child { background: var(--neo-primary); color: var(--color-white); }
.landing-page .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--color-white-a2) 1px, transparent 1px), linear-gradient(90deg, var(--color-white-a2) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, transparent 25%, var(--color-black)); }
.landing-page .hero::after { content: '#'; position: absolute; top: 35px; right: -20px; font-size: 640px; font-weight: 800; line-height: 1; color: var(--color-brand-a4); transform: rotate(-12deg); z-index: -1; pointer-events: none; }
.hero-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-light { position: absolute; width: 850px; height: 650px; top: -210px; right: -180px; background: radial-gradient(ellipse, var(--color-brand-a22), var(--color-brand-a7) 38%, transparent 68%); animation: light-arrive 4s ease-out both; }
.hero-light-secondary { width: 500px; height: 500px; top: auto; right: auto; bottom: -260px; left: -200px; background: radial-gradient(ellipse, var(--color-accent-a13), transparent 65%); animation-delay: .2s; }
.hero-signal { position: absolute; width: 700px; height: 700px; right: -180px; top: -210px; border: 1px solid var(--color-accent-a11); border-radius: 50%; box-shadow: 0 0 0 70px var(--color-accent-a2), 0 0 0 140px var(--color-accent-a2); animation: signal-arrive 2s .2s both; }
.headline-line:nth-child(3) > span { animation-delay: .32s; }
.hero-copy > p, .hero-copy > .flex, .hero-notes { animation: landing-enter .8s .35s both; }
.hero-copy > .flex { animation-delay: .45s; }
.hero-notes { animation-delay: .55s; }
.landing-page .filter-section, .landing-page #pricing { position: relative; isolation: isolate; }
.landing-page .filter-section::before, .landing-page #pricing::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 5% 0, var(--color-brand-a8), transparent 48%), radial-gradient(var(--color-accent-a8) .8px, transparent .8px); background-size: auto, 22px 22px; mask-image: linear-gradient(var(--color-black), transparent 85%); }
.landing-page #pricing::before { background: radial-gradient(ellipse at 50% 30%, var(--color-brand-a15), transparent 65%); }
@media (hover: hover) and (pointer: fine) {
    .landing-page .filter-toggle:not(.filter-verified):hover { background-image: radial-gradient(ellipse at top right, var(--color-accent-a7), transparent 70%); }
    .landing-page .collector-card:hover summary > div { box-shadow: 0 0 24px var(--color-brand-a15); }
    .hero-copy > .flex > a:first-child:hover { box-shadow: 0 8px 30px var(--color-brand-a22); }
    .discovery-ticket { transition: transform .3s, border-color .3s; }
    .discovery-ticket:hover { transform: translateY(-5px) rotate(0); border-color: var(--color-accent-a40); }
}
@keyframes light-arrive { from { opacity: 0; transform: translate(70px, -30px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes signal-arrive { from { opacity: 0; transform: scale(.85) rotate(-15deg); } to { opacity: 1; transform: none; } }
.headline-line { display: block; overflow: hidden; padding-block: .12em; margin-block: -.12em; }
.headline-line > span { display: block; white-space: nowrap; transform-origin: left bottom; animation: headline-reveal 1s cubic-bezier(.16, 1, .3, 1) both; }
.headline-line + .headline-line > span { animation-delay: .18s; }
.hero-accent { position: relative; display: inline-block; color: var(--neo-primary-400); }
.hero-accent::after { content: ''; position: absolute; bottom: -.04em; left: .04em; right: .01em; height: 3px; background: var(--neo-primary); transform-origin: left; animation: headline-underline .65s .85s both; }
.hero-eyebrow i { color: var(--neo-primary-400); font-size: 16px; }
.landing-page .hero-visual { position: relative; }
.discovery-orbit { position: absolute; width: 115%; aspect-ratio: 1; border: 1px dashed var(--color-brand-a33); border-radius: 50%; left: -7%; top: 50%; transform: translateY(-50%) rotate(-20deg); animation: orbit-enter 3s ease-out both; pointer-events: none; }
.discovery-orbit::before { content: ''; position: absolute; inset: 20px; border: 1px solid var(--color-white-a3); border-radius: inherit; }
.preview-panel { overflow: hidden; }
.preview-panel::after { content: ''; position: absolute; top: 70px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-accent-a60), transparent); animation: discovery-scan 3s .7s both; pointer-events: none; }
.export-note { position: absolute; right: -14px; bottom: -44px; display: flex; align-items: center; gap: 14px; padding: 17px 20px; background: var(--color-text); color: var(--color-surface); border: 1px solid var(--color-white); border-radius: 12px; box-shadow: 0 16px 40px var(--color-black-a27); transform: rotate(-3deg); animation: export-enter .8s .65s both; }
.export-note-icon { width: 38px; height: 42px; display: grid; place-items: center; background: var(--color-brand-a9); color: var(--color-brand); border-radius: 6px; }
.export-note strong, .export-note div > span { display: block; }
.export-note strong { font-size: 13px; }
.export-note div > span { font-size: 10px; color: var(--color-subtle); margin-top: 3px; }
.export-note > i { color: var(--color-brand); font-size: 12px; margin-left: 10px; }
.discovery-ribbon { padding: 32px 24px 52px; background: var(--color-input); overflow: hidden; }
.discovery-tickets { position: relative; display: grid; grid-template-columns: repeat(4, 1fr) 1.2fr; align-items: center; gap: 18px; max-width: 1240px; margin: 0 auto; padding: 16px 0; list-style: none; isolation: isolate; }
.discovery-tickets::before { content: ''; position: absolute; left: 20px; right: 20px; top: 50%; border-top: 1px dashed var(--color-accent-a36); z-index: -1; }
.discovery-ticket { --ticket-angle: -3deg; position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 22px 18px; background: var(--color-surface-hover); border: 1px solid var(--color-white-a10); border-radius: 3px 12px 12px 3px; box-shadow: 0 8px 0 var(--color-black-a13); transform: rotate(var(--ticket-angle)); animation: ticket-arrive .9s .1s both; }
.discovery-ticket::before { content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; border-left: 1px dashed var(--color-white-a15); }
.discovery-ticket:nth-child(2n) { --ticket-angle: 3deg; animation-delay: .2s; }
.discovery-ticket:nth-child(3) { --ticket-angle: -2deg; animation-delay: .3s; }
.discovery-ticket:nth-child(4) { animation-delay: .4s; }
.discovery-ticket > i { color: var(--color-accent); font-size: 22px; flex-shrink: 0; }
.discovery-ticket strong, .discovery-ticket div > span { display: block; }
.discovery-ticket strong { font-size: 15px; letter-spacing: -.025em; color: var(--color-text); }
.discovery-ticket div > span { font-size: 11px; color: var(--color-muted); margin-top: 3px; }
.ticket-output { --ticket-angle: -3deg; background: var(--color-text); border-color: var(--color-text); padding-right: 40px; animation-delay: .5s; }
.ticket-output::before { border-color: var(--color-surface-raised-a27); }
.ticket-output > i, .ticket-output strong { color: var(--color-brand-hover); }
.ticket-output div > span { color: var(--color-subtle); }
.ticket-extension { position: absolute; top: -13px; right: 12px; padding: 2px 8px; border-radius: 3px; background: var(--color-brand); color: var(--color-white); font-size: 10px; font-weight: 700; transform: rotate(7deg); }
.landing-page #features > .container > .text-center { text-align: left; max-width: 660px; }
.landing-page #features > .container > .text-center p { margin-inline: 0; }
.landing-page .collector-card { position: relative; overflow: hidden; }
.landing-page .collector-card::after { content: ''; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: var(--color-brand); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.landing-page .collector-card:hover::after { transform: scaleX(1); }
.landing-page .collector-card:first-child { background: linear-gradient(125deg, var(--color-surface-raised), var(--color-surface)); }
@keyframes ticket-arrive { from { opacity: 0; transform: translateX(35px) rotate(0); } to { opacity: 1; transform: translateX(0) rotate(var(--ticket-angle)); } }
@keyframes headline-reveal { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes headline-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes discovery-scan { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(350px); } }
@keyframes orbit-enter { from { opacity: 0; transform: translateY(-50%) rotate(-65deg) scale(.9); } to { opacity: 1; transform: translateY(-50%) rotate(-20deg) scale(1); } }
@keyframes export-enter { from { opacity: 0; transform: translateY(24px) rotate(0deg); } to { opacity: 1; transform: translateY(0) rotate(-3deg); } }
@keyframes landing-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes landing-chart { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (min-width: 1024px) {
    .filter-grid { gap: 20px; }
    .filter-guard { grid-column: span 2; }
    .landing-page .filter-notify { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
    .landing-page .filter-notify p { margin: 0; }
    .landing-page #features .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .landing-page .collector-card:first-child { grid-column: span 2; padding: 32px; }
    .landing-page .collector-card:first-child h3 { font-size: 25px; }
    .landing-page .collector-card:first-child p { max-width: 470px; }
}
@media (max-width: 1023px) {
    .filter-guard, .filter-notify { grid-column: 1 / -1; }
    .landing-page #pricing .grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
    .landing-page .filter-toggle h3 { min-height: 0; }
    .landing-page .price-card > .text-center > .text-gray-400 { min-height: 0; }
    .discovery-tickets { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .discovery-ticket { padding: 20px 14px; gap: 10px; }
    .ticket-output { grid-column: 2 / 4; justify-content: center; margin-top: 8px; }
    .landing-page .hero { padding-top: 140px; }
    .hero-copy { width: 100%; text-align: center; }
    .landing-page .hero p { margin-inline: auto; }
    .hero-copy > .flex, .hero-notes { justify-content: center; }
    .landing-page .hero-visual { width: min(100%, 560px); }
    .preview-panel, .hero-visual:hover .preview-panel { transform: none; }
    .footer-grid { grid-template-columns: 1.2fr 1fr; gap: 32px 48px; }
}
@media (max-width: 899px) {
    .header-nav, .header-actions { display: none; }
    .landing-page #mobile-menu-button { display: inline-flex; }
}
@media (min-width: 900px) {
    .landing-page #mobile-menu { display: none; }
}
@media (max-width: 767px) {
    .landing-page #export-preview { display: none; }
    .landing-page .demo-preview { display: none; }
    .landing-page .filter-toggle { padding: 22px; border-radius: 18px; }
    .landing-page .filter-toggle h3 { font-size: 20px; line-height: 1.35; }
    .landing-page .filter-toggle p { margin-top: 14px; line-height: 1.75; }
    .landing-page .filter-mobile-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 11px; color: var(--color-muted); }
    .landing-page .filter-mobile-hint { flex-wrap: wrap; justify-content: space-between; }
    .landing-page .filter-grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; max-width: none; margin-inline: -24px; padding: 2px 24px 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: thin; scrollbar-color: var(--color-brand) var(--color-white-a5); }
    .landing-page .filter-grid > .filter-toggle { grid-column: auto; min-width: 0; scroll-snap-align: start; }
    .landing-page .filter-grid .filter-toggle > .flex { flex-direction: column; gap: 16px; }
    .landing-page .filter-grid .filter-toggle > .flex > div { order: 0; }
    .site-header { top: 10px; left: 12px; right: 12px; border-radius: 17px; padding: 6px; }
    .header-shell { padding-left: 12px; min-height: 48px; }
    .header-brand img { height: 27px; }
    .site-footer { padding-inline: 20px; }
    .footer-intro { align-items: start; flex-direction: column; gap: 24px; padding: 48px 0 36px; }
    .footer-start { gap: 24px; font-size: 14px; }
    .footer-start span { width: 44px; height: 44px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-block: 36px; }
    .footer-brand, .footer-contact { grid-column: 1 / -1; }
    .footer-brand p { max-width: 320px; }
    .footer-grid nav > a { font-size: 12px; }
    .footer-bottom { flex-direction: column; gap: 12px; }
    .footer-bottom p:last-child { text-align: left; }
    .landing-page .hero { padding: 118px 24px 44px; }
    .hero > .container > div { gap: 32px; }
    .landing-page .hero h1 { font-size: clamp(28px, 8.2vw, 52px); line-height: 1.15; letter-spacing: -.045em; margin: 0 0 22px; }
    .hero-light { width: 540px; height: 500px; right: -270px; top: -150px; }
    .hero-light-secondary { display: none; }
    .hero-signal { width: 360px; height: 360px; right: -230px; top: -100px; box-shadow: 0 0 0 45px var(--color-accent-a2); }
    .landing-page .hero-copy { margin-bottom: 0; text-align: left; }
    .landing-page .hero p { font-size: 15px; line-height: 1.8; margin: 0 0 24px; }
    .hero-copy > .flex { justify-content: start; gap: 10px; margin-top: 0; }
    .hero-copy > .flex > a { flex: 1; padding: 15px 10px; font-size: 12px; text-align: center; border-radius: 12px; }
    .hero-notes { justify-content: start; gap: 20px; font-size: 11px; margin-top: 20px; }
    .landing-page .hero-visual { width: 100%; }
    .preview-panel { border-radius: 20px; box-shadow: none; }
    .preview-body { padding: 20px; }
    .preview-top { padding: 14px 20px; }
    .preview-brand small { display: none; }
    .preview-search > span { display: none; }
    .preview-demo { font-size: 9px; letter-spacing: 0; }
    .preview-result { font-size: 10px; flex-wrap: wrap; }
    .preview-search { margin-top: 18px; font-size: 12px; }
    .preview-stats { padding-block: 16px; }
    .preview-stats > div > span { font-size: 11px; }
    .preview-chart { height: 64px; }
    .landing-page section:not(.hero) { padding: 48px 24px; }
    .landing-page section h2 { font-size: 32px; line-height: 1.12; letter-spacing: -.045em; }
    .landing-page section > .container > .text-center { text-align: left; margin-bottom: 28px; }
    .landing-page section > .container > .text-center > p { font-size: 14px; line-height: 1.8; margin-top: 16px; }
    .landing-page #features .grid { gap: 12px; }
    .landing-page #features .grid { gap: 10px; }
    .landing-page .collector-card { display: block; padding: 0; border-radius: 14px; }
    .landing-page .collector-card summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 14px 16px; min-height: 64px; cursor: pointer; }
    .landing-page .collector-card summary::after { content: '+'; color: var(--color-accent); font-size: 20px; text-align: center; }
    .landing-page .collector-card[open] summary::after { content: '−'; }
    .landing-page .collector-card summary > div { width: 34px; height: 34px; margin: 0; border-radius: 10px; }
    .landing-page .collector-card summary > div i { font-size: 16px; }
    .landing-page .collector-card h3 { font-size: 15px; margin: 0; letter-spacing: -.02em; }
    .landing-page .collector-card p { font-size: 13px; margin: 0; padding: 0 16px 18px 62px; line-height: 1.8; }
    .landing-page .collector-card:hover, .landing-page .price-card:hover { transform: none; box-shadow: none; }
    .landing-page .price-card { padding: 28px 24px; border-radius: 20px; }
    .landing-page .price-card .text-4xl { font-size: 38px; }
    .landing-page #pricing .pricing-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 88%; gap: 14px; max-width: none; margin-inline: -24px; padding: 2px 24px 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: thin; scrollbar-color: var(--color-brand) var(--color-white-a5); }
    .landing-page .pricing-grid > .price-card { min-width: 0; scroll-snap-align: start; }
    .landing-page .pricing-mobile-hint { display: block; margin-bottom: 16px; font-size: 11px; color: var(--color-muted); }
    .landing-page section:has(#export-preview) p { font-size: 14px; line-height: 1.8; }
    .landing-page #export-preview h3 { font-size: 17px; }
    .developer-card { grid-template-columns: 48px 1fr; padding: 20px; gap: 12px; }
    .developer-avatar { grid-row: 1; width: 48px; height: 48px; border-radius: 14px; }
    .landing-page #developer .developer-description { grid-column: 1 / -1; margin: 0; }
    .developer-contact { grid-column: 1 / -1; grid-row: auto; justify-self: start; padding-inline: 12px; }
    .landing-page .preview-heading h2 { font-size: 16px; }
    .landing-page .hero .preview-heading p { font-size: 11px; line-height: 1.5; margin: 0 0 6px; }
    .landing-page #live-log { overflow-wrap: anywhere; }
    .landing-page section:has(#live-log) .px-6 { flex-wrap: wrap; gap: 12px; }
    .landing-page section:has(#live-log) h3 { font-size: 16px; }
    .landing-page footer .space-x-4 { gap: 0; }
    .export-note { position: relative; right: auto; bottom: auto; margin: 12px 0 0; padding: 12px 16px; gap: 10px; transform: none; animation: none; box-shadow: none; border-radius: 12px; }
    .export-note > i { margin-left: auto; }
    .discovery-orbit { display: none; }
    .discovery-ribbon { padding: 20px 24px 28px; }
    .discovery-tickets { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; }
    .discovery-tickets::before, .discovery-ticket::before { display: none; }
    .discovery-ticket { padding: 16px 12px; gap: 10px; border-radius: 12px; transform: none; animation: none; box-shadow: none; }
    .discovery-ticket > i { font-size: 18px; }
    .discovery-ticket strong { font-size: 13px; }
    .discovery-ticket div > span { font-size: 11px; }
    .ticket-output { grid-column: 1 / -1; justify-self: stretch; width: 100%; margin-top: 0; justify-content: start; }
    .ticket-extension { top: 16px; right: 16px; transform: none; }
    .landing-page section:has(#live-log) .mt-6.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .landing-page section:has(#live-log) .mt-6.grid > div { padding: 12px 8px; }
    .landing-page section:has(#live-log) .mt-6.grid .text-gray-400 { font-size: 10px; }
    .landing-page section:has(#live-log) .text-3xl { font-size: 23px; }
    .landing-page #live-log { font-size: 12px; line-height: 1.8; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .landing-page *, .landing-page *::before, .landing-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .landing-page .scroll-animate { opacity: 1; transform: none; }
    .preview-panel::after { display: none; }
}