*, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Quickstand", Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.5; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; } img { max-width: 100%; display: block; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--accent); } :root { --wh: #fff; --bk: #000; --accent: #F68B1F; --accent-contrast: #111; --success-color: #27ae60; --radius: 14px; --shadow-1: 0 10px 30px rgba(0, 0, 0, .25); --shadow-2: 0 20px 60px rgba(0, 0, 0, .35); --scrollbar-track: #000; } body.dark { --bg: #000; --surface: #000; --muted: #0B1221; --text: #E7ECF2; --text-2: #A8B2C6; --border: #ffffff31; --link: #A8B2C6; } body.light { --bg: #FFFFFF; --surface: #F6F8FE; --muted: #EEF2FF; --text: #0B1020; --text-2: #4B5568; --border: #0000003f; --link: #334155; --hero-grad: radial-gradient(1200px 600px at 10% -10%, rgba(246, 139, 31, .18), transparent 60%), radial-gradient(900px 500px at 90% 10%, rgba(77, 208, 225, .10), transparent 60%), radial-gradient(700px 400px at 50% 0%, rgba(12, 18, 32, .06), transparent 60%), #FFFFFF; } .container { width: 100%; max-width: 1200px; padding: 0 10px; margin: 0 auto; } .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); background: color-mix(in hsl, var(--bg) 86%, transparent); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; height: 60px; } .nav-left { display: flex; align-items: center; gap: 16px; } .logo { display: inline-flex; align-items: center; gap: 10px; } .brand { font-weight: 800; letter-spacing: -0.02em; font-size: 0.95rem; color: var(--text); } .nav-center ul { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; } .nav-center a { color: var(--text-2); font-weight: 500; padding: 10px 2px; font-size: 0.9rem; } .nav-center a.active { color: var(--text); } .nav-right { display: flex; align-items: center; gap: 10px; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 3px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; font-size: 0.85rem; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; } .btn-primary { background: linear-gradient(180deg, color-mix(in hsl, var(--accent) 88%, #fff 0%), var(--accent)); border-color: color-mix(in hsl, var(--accent) 60%, transparent); color: #fff; } .btn.btn-primary:hover { color: #000; } .btn-ghost { background: transparent; } html, body, a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a:active, button:active { background-color: transparent; } ::selection { background-color: var(--accent); color: var(--bk); } html { scrollbar-width: thin; scrollbar-color: var(--accent) var(--scrollbar-track); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background-color: var(--accent); border-radius: 10px; border: 2px solid var(--scrollbar-track); } ::-webkit-scrollbar-thumb:hover { filter: brightness(90%); } .hero { background: var(--hero-grad); position: relative; overflow: hidden; border-bottom: 1px solid var(--border); } .hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 24px 24px; opacity: 0.06; color: #FFF; pointer-events: none; } .hero-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; padding: clamp(36px, 5vw, 68px) 0; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 999px; background: color-mix(in hsl, var(--accent) 16%, transparent); color: var(--text); border: 1px solid color-mix(in hsl, var(--accent) 30%, transparent); font-weight: 600; font-size: 0.75rem; } .hero h1 { font-size: clamp(1.6rem, 3.4vw, 2.9rem); line-height: 1.05; letter-spacing: -0.02em; margin: 12px 0 10px; background: linear-gradient(120deg, var(--text), color-mix(in hsl, var(--text-2) 60%, var(--text) 40%)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; } .hero p.lead { color: var(--text-2); font-size: clamp(0.9rem, 1.1vw, 1rem); max-width: 640px; margin: 0 0 20px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .trust { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; color: var(--text-2); } .trust .badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--muted); color: var(--text-2); font-weight: 600; font-size: 0.75rem; } .device-icons { display: inline-flex; gap: 10px; color: var(--text-2); } .device-icons i { opacity: .9; } .hero-media { position: relative; } .frame { border: 1px solid var(--border); border-radius: 5px; overflow: hidden; } .frame-top { display: flex; gap: 6px; padding: 10px 12px; align-items: center; } .dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; } .frame-body { display: block; max-height: 400px; overflow: hidden; } .frame-body img { width: 100%; height: auto; display: block; } .section { padding: clamp(36px, 5vw, 68px) 0; border-bottom: 1px solid var(--border); } .section h2 { font-size: clamp(1.25rem, 2.6vw, 1.75rem); margin: 0 0 8px; letter-spacing: -0.01em; color: var(--text); } .section p.sub { margin: 0 0 22px; color: var(--text-2); max-width: 760px; font-size: 0.9rem; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 980px) { .hero-wrap { grid-template-columns: 1fr; padding: 12px; padding-top: 20px; } .grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } } .card { border: 1px solid var(--border); border-radius: 3px; padding: 18px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .icon { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in hsl, var(--accent) 16%, transparent); color: var(--accent); border: 1px solid color-mix(in hsl, var(--accent) 30%, transparent); margin-bottom: 10px; font-size: 1.1rem; } .card h3 { margin: 6px 0 6px; font-size: 1rem; } .card p { margin: 0; color: var(--text-2); font-size: 0.85rem; } .steps { counter-reset: step; } .step { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--border); border-radius: 3px; } .step+.step { margin-top: 10px; } .faq { max-width: 900px; } details { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px 16px; transition: border-color .2s ease, background .2s ease; } details+details { margin-top: 8px; } details[open] { border-color: color-mix(in hsl, var(--accent) 30%, var(--border)); } summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.9rem; } summary::-webkit-details-marker { display: none; } .faq p { color: var(--text-2); margin: 8px 0 0; font-size: 0.85rem; } footer { padding: 24px 0; } .foot-wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .dev { display: flex; align-items: center; gap: 12px; } .dev img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); } .dev .name { font-weight: 700; font-size: 0.9rem; } .social { display: inline-flex; gap: 10px; } .social a { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); color: var(--text-2); } .social a:hover { color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow-1); } .center { text-align: center; } .muted { color: var(--text-2); } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } .pad { padding: 12px 14px; border-radius: 12px; background: var(--muted); border: 1px solid var(--border); display: inline-flex; gap: 10px; align-items: center; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } @media (prefers-reduced-motion: no-preference) { .card, .btn, .theme-toggle { will-change: transform; } } .list-check { list-style: none; margin: 8px 0 0; padding: 0; } .list-check li { position: relative; padding-left: 24px; margin: 6px 0; color: var(--text-2); font-size: 0.85rem; } .list-check li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 2px; color: var(--success-color); } .menu-footer { flex-shrink: 0; background: var(--main-bg-color); padding: 16px 12px; } .developer-info { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; } .developer-avatar { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; overflow: hidden; } .developer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .developer-content { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .developer-name { font-size: 1rem; font-weight: 700; color: var(--text-color); margin: 0; text-align: left; } .social-links { display: flex; gap: 7px; } .social-link { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary-color); text-decoration: none; font-size: 13px; transition: all var(--transition-speed); } .social-link:hover { color: var(--wh); text-decoration: none; } .footer-copyright { font-size: 0.7em; color: var(--text-secondary-color); text-align: center; border-top: 1px solid var(--border); padding: 2px 5px; margin: 0; } @media (min-width: 768px) { body { font-size: 14px; } h1 { font-size: 2rem; } h2 { font-size: 1.35rem; } } .site-header { padding: 0 10px; border-bottom: 1px solid var(--border-color); background-color: var(--accent); flex-shrink: 0; } .site-header .container { display: flex; justify-content: space-between; align-items: center; } .site-header a:hover { color: var(--bk); } img { display: block; margin: 0; padding: 0; } .logo img { height: 36px; } .header-right { display: flex; align-items: center; gap: 1rem; } nav ul { list-style: none; display: flex; gap: 1rem; } nav a { color: var(--wh); font-weight: 500; font-size: 0.85rem; } .theme-toggle-btn { background: none; border: none; cursor: pointer; padding: 5px; border-radius: 50%; display: flex; color: var(--bk); } .theme-toggle-btn .icon { width: 26px; height: 26px; color: var(--bk); margin: 0; } .sun-icon { display: none; } body.dark-mode .moon-icon { display: none; } body.dark-mode .sun-icon { display: block; } .privacy-summary-list { list-style-type: none; padding-left: 0; margin: 1.2rem 0 1.6rem 0; } .privacy-summary-list li { position: relative; padding-left: 26px; margin-bottom: 0.6rem; font-size: 0.9rem; line-height: 1.5; } .privacy-summary-list .fa-check-circle { position: absolute; left: 0; top: 4px; color: var(--success-color); font-size: 1rem; } .permissions-list { list-style-type: none; padding-left: 0; margin: 1.2rem 0 1.6rem 0; } .permissions-list li { background-color: var(--card-bg, rgba(255, 255, 255, 0.05)); border-left: 4px solid var(--accent); padding: 0.8rem 1.2rem; margin-bottom: 0.8rem; border-radius: 0 8px 8px 0; } .permissions-list strong { display: block; font-size: 0.95rem; margin-bottom: 0.25rem; color: var(--text-color-strong); } .permissions-list code { background-color: var(--code-bg); padding: 0.15em 0.4em; border-radius: 4px; font-family: 'Courier New', Courier, monospace; color: var(--code-color); font-size: 0.8rem; } @media (max-width: 768px) { .site-header { padding-right: 3px; font-size: 12px; } .logo img { height: 28px !important; } .theme-toggle-btn { padding-right: 0; padding-left: 0; } .site-header .container { padding: 0; } .header-right { gap: 0.4rem; } .trust { gap: 6px; } }