:root { --ink:#101828; --muted:#667085; --line:#e4e7ec; --brand:#6d5dfc; --brand-dark:#5446d8; --code-bg:#121a2b; --shadow:0 16px 48px rgba(16,24,40,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { color:var(--ink); background:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.7; }
a { color:var(--brand-dark); text-decoration:none; } a:hover { color:var(--brand); text-decoration:underline; }
code,pre { font-family:SFMono-Regular,Consolas,"Liberation Mono",monospace; } code { color:#b42318; background:#fff1f0; border-radius:4px; padding:.08em .3em; font-size:.9em; }
.skip-link { position:absolute; left:-9999px; top:8px; z-index:100; padding:8px 14px; background:#fff; border-radius:8px; } .skip-link:focus { left:8px; }
.container { width:min(1160px,calc(100% - 40px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.94); border-bottom:1px solid rgba(228,231,236,.8); backdrop-filter:blur(16px); }
.header-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-weight:800; font-size:1.15rem; letter-spacing:-.04em; } .brand:hover { color:var(--ink); text-decoration:none; }
.brand-mark { display:inline-grid; width:29px; height:29px; place-items:center; border-radius:8px; color:#fff; background:var(--brand); font-family:"JetBrains Mono",monospace; font-size:1rem; } .brand-suffix { color:var(--brand); }
.main-nav { display:flex; align-items:center; gap:25px; font-size:.86rem; font-weight:600; } .main-nav a { color:#475467; } .main-nav a:hover { color:var(--brand-dark); text-decoration:none; } .main-nav .nav-cta { color:#fff; background:var(--ink); border-radius:7px; padding:8px 13px; }
.language-switch { display:inline-flex; align-items:center; gap:5px; color:#98a2b3; font-size:.75rem; } .language-switch a { color:#98a2b3; } .language-switch a.active { color:var(--brand-dark); font-weight:800; } .language-switch a:hover { color:var(--brand-dark); }
.menu-toggle { display:none; border:1px solid var(--line); color:var(--ink); background:#fff; border-radius:7px; padding:7px 11px; }
.hero-section { overflow:hidden; background:linear-gradient(135deg,#f4f2ff 0%,#f6fbff 55%,#fff 100%); padding:105px 0 92px; } .hero-grid { display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:72px; }
.eyebrow { margin:0 0 13px; color:var(--brand-dark); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3 { color:var(--ink); font-weight:800; letter-spacing:-.045em; line-height:1.16; } h1 { max-width:650px; margin:0; font-size:clamp(2.7rem,5vw,4.55rem); } h2 { margin:0 0 18px; font-size:clamp(1.85rem,3vw,2.55rem); } h3 { margin:34px 0 8px; font-size:1.28rem; }
.hero-lead { max-width:600px; margin:26px 0 30px; color:#475467; font-size:1.15rem; } .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:11px; }
.button { display:inline-flex; align-items:center; gap:9px; border-radius:8px; padding:12px 17px; font-size:.9rem; font-weight:700; transition:transform .2s ease,box-shadow .2s ease; } .button:hover { text-decoration:none; transform:translateY(-1px); } .button-primary { color:#fff; background:var(--brand); box-shadow:0 8px 18px rgba(109,93,252,.22); } .button-primary:hover { color:#fff; background:var(--brand-dark); } .button-secondary { color:var(--ink); border:1px solid var(--line); background:#fff; } .button-secondary:hover { color:var(--ink); border-color:#b7baca; }
.trust-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:34px; color:#98a2b3; font-size:.8rem; } .trust-row strong { color:#667085; }
.code-card { overflow:hidden; margin:24px 0; border:1px solid rgba(255,255,255,.1); border-radius:11px; color:#e6e8ef; background:var(--code-bg); box-shadow:0 20px 50px rgba(16,24,40,.18); } .hero-code { transform:rotate(1.5deg); }
.code-card-top { display:flex; align-items:center; gap:7px; min-height:43px; padding:0 16px; color:#98a2b3; border-bottom:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); font-size:.72rem; } .window-dot { width:8px; height:8px; border-radius:50%; } .window-dot.red { background:#ff6b6b; } .window-dot.yellow { background:#ffd166; } .window-dot.green { background:#6ee7b7; } .code-label { margin-left:4px; font-weight:600; letter-spacing:.02em; }
.code-card pre { margin:0; padding:27px 25px; overflow-x:auto; color:#e6e8ef; font-size:.9rem; line-height:1.85; -webkit-overflow-scrolling:touch; } .code-card pre code { display:block; padding:0; color:inherit; background:transparent; font-size:inherit; line-height:inherit; white-space:pre; word-break:normal; } .code-card.compact pre { padding:18px 21px; } .code-card.compact pre code { white-space:pre-wrap; } .code-keyword { color:#c4b5fd; font-weight:600; } .code-type { color:#67e8f9; } .code-string { color:#86efac; } .code-number { color:#f9a8d4; } .code-comment { color:#9aa8bd; }
.copy-button { margin-left:auto; border:1px solid rgba(255,255,255,.2); border-radius:5px; padding:3px 8px; color:#cbd5e1; background:transparent; font-size:.7rem; cursor:pointer; } .copy-button:hover { color:#fff; border-color:rgba(255,255,255,.5); }
.notice-section { padding:20px 0 0; } .security-notice,.compatibility-note,.password-choice { display:flex; align-items:flex-start; gap:15px; border-radius:9px; padding:20px 22px; background:#fffaf0; border:1px solid #fbe2a5; color:#7a4a00; } .security-notice p,.password-choice p { margin:4px 0 0; font-size:.92rem; line-height:1.7; } .security-notice a { color:#7a4a00; font-weight:700; text-decoration:underline; } .notice-icon { display:grid; flex:0 0 23px; height:23px; place-items:center; border-radius:50%; color:#fff; background:#d98b16; font-weight:800; font-size:.85rem; }
.docs-layout { display:grid; grid-template-columns:190px 1fr; align-items:start; gap:72px; padding-top:70px; } .docs-sidebar { position:sticky; top:97px; padding-bottom:30px; } .sidebar-title { margin:0 0 12px; color:#98a2b3; font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; } .docs-sidebar nav { display:grid; gap:8px; border-left:1px solid var(--line); padding-left:15px; } .docs-sidebar a { color:#667085; font-size:.78rem; line-height:1.4; } .docs-sidebar a:hover { color:var(--brand-dark); text-decoration:none; }
.doc-section,.method-section { scroll-margin-top:100px; } .doc-section { padding:34px 0 62px; border-bottom:1px solid var(--line); } .documentation>section:first-child { padding-top:0; } .doc-section>p:not(.eyebrow),.method-section>p { color:#475467; } .doc-section>p { max-width:780px; }
.use-case-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:27px; } .use-case { padding:22px; border:1px solid var(--line); border-radius:10px; background:#fff; } .use-case h3 { margin:14px 0 6px; font-size:1.15rem; } .use-case p { min-height:52px; margin:0 0 10px; color:var(--muted); font-size:.86rem; line-height:1.55; } .use-case a { font-size:.82rem; font-weight:700; } .use-case-tag { display:inline-block; border-radius:99px; padding:4px 9px; font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .legacy { color:#925b10; background:#fff3cd; } .integrity { color:#027a66; background:#dff7f3; } .auth { color:#175cd3; background:#e9f2ff; } .password { color:#6941c6; background:#f0eaff; }
.method-section { padding:62px 0 20px; } .method-heading { display:flex; align-items:flex-start; gap:16px; } .method-heading h2 { margin-bottom:4px; } .method-heading p { margin:0; color:var(--muted); } .method-number { display:grid; flex:0 0 37px; height:37px; place-items:center; border-radius:9px; color:var(--brand-dark); background:#eeecff; font-family:"JetBrains Mono",monospace; font-size:.75rem; font-weight:600; } .method-section .code-card { margin:25px 0 23px; }
.compatibility-note { display:block; margin:24px 0; padding:15px 18px; border-color:#d9d6ff; color:#5146a8; background:#f6f5ff; font-size:.88rem; } .compatibility-note code { color:#5146a8; background:#e9e7ff; }
.password-section { padding-top:68px; } .password-choice { align-items:center; justify-content:space-between; margin:27px 0 34px; color:#5146a8; border-color:#d9d6ff; background:#f6f5ff; } .password-choice p { color:#667085; } .recommendation-badge { flex:0 0 auto; border-radius:99px; padding:7px 12px; color:#fff; background:var(--brand); font-size:.72rem; font-weight:700; } .password-section h3 { margin-top:40px; }
.table-wrap { overflow-x:auto; margin:25px 0 15px; border:1px solid var(--line); border-radius:9px; } .table-wrap table { width:100%; min-width:620px; border-collapse:collapse; font-size:.82rem; } .table-wrap caption { padding:14px 17px; color:#667085; background:#f8fafc; text-align:left; font-weight:600; } .table-wrap th,.table-wrap td { padding:13px 16px; border-top:1px solid var(--line); text-align:left; vertical-align:top; } .table-wrap th { color:#344054; background:#fcfcfd; font-size:.73rem; letter-spacing:.04em; text-transform:uppercase; } .table-wrap td { color:#475467; } .table-wrap td:first-child { color:var(--ink); font-weight:600; }
.faq-section details { border-top:1px solid var(--line); padding:17px 0; } .faq-section details:last-child { border-bottom:1px solid var(--line); } .faq-section summary { cursor:pointer; color:var(--ink); font-weight:700; } .faq-section details p { max-width:690px; margin:10px 0 0; color:#667085; font-size:.9rem; }
.next-step { display:flex; align-items:center; justify-content:space-between; gap:30px; margin:72px 0; padding:35px; border-radius:12px; background:var(--ink); } .next-step h2 { max-width:490px; margin-bottom:10px; color:#fff; font-size:1.8rem; } .next-step p:not(.eyebrow) { margin:0; color:#98a2b3; } .next-step .button-secondary { color:#fff; border-color:#475467; background:transparent; } .next-step .button-secondary:hover { border-color:#98a2b3; }
.site-footer { padding:45px 0 22px; color:#98a2b3; background:#f8fafc; } .footer-grid { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; } .site-footer .brand { color:var(--ink); } .site-footer p { margin:12px 0 0; font-size:.8rem; } .footer-links { display:flex; gap:22px; font-size:.8rem; font-weight:600; } .footer-links a { color:#667085; } .footer-bottom { display:flex; justify-content:space-between; margin-top:40px; padding-top:17px; border-top:1px solid var(--line); font-size:.72rem; }
@media (max-width:900px) { .hero-grid { grid-template-columns:1fr; gap:42px; } .hero-copy { max-width:730px; } .hero-code { max-width:650px; transform:none; } .docs-layout { grid-template-columns:1fr; gap:15px; padding-top:48px; } .docs-sidebar { position:static; padding-bottom:15px; } .docs-sidebar nav { display:flex; flex-wrap:wrap; gap:8px 15px; border:0; padding:0; } .docs-sidebar a { padding-bottom:3px; border-bottom:1px solid var(--line); } }
@media (max-width:680px) { .container { width:min(100% - 30px,1160px); } .header-inner { min-height:63px; } .menu-toggle { display:block; } .main-nav { display:none; position:absolute; left:15px; right:15px; top:62px; flex-direction:column; align-items:stretch; gap:0; padding:10px; border:1px solid var(--line); border-radius:9px; background:#fff; box-shadow:var(--shadow); } .main-nav.is-open { display:flex; } .main-nav a { padding:9px; } .main-nav .nav-cta { text-align:center; } .hero-section { padding:68px 0 64px; } .hero-lead { font-size:1rem; } .trust-row { gap:7px; } .use-case-grid { grid-template-columns:1fr; } .use-case p { min-height:0; } .security-notice,.password-choice { padding:16px; } .password-choice { display:block; } .recommendation-badge { display:inline-block; margin-top:10px; } .next-step { display:block; margin:52px 0; padding:25px; } .next-step .hero-actions { margin-top:24px; } .footer-grid,.footer-bottom { display:block; } .footer-links { margin-top:25px; } .footer-bottom span { display:block; margin-top:5px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } .button:hover { transform:none; } }