:root{--primary: #6366f1;--primary-dark: #4f46e5;--secondary: #ec4899;--dark: #0f172a;--light: #f8fafc;--gray: #64748b;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--dark);color:var(--light);line-height:1.6;min-height:100vh;transition:background .3s ease,color .3s ease}[data-theme=light] body{background:transparent;color:#1a1a1a}#root,main,footer,.section,.tool-section,.hero{position:relative;z-index:2}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}img{display:block}.top-bar{position:fixed;top:0;left:0;right:0;padding:0 40px;height:calc(64px + var(--safe-top));padding-top:var(--safe-top);display:flex;align-items:center;gap:24px;z-index:1000;background:#0f172a99;border-bottom:.5px solid rgba(255,255,255,.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:background .3s ease,border-color .3s ease}[data-theme=light] .top-bar{background:#ffffffd9;border-bottom-color:#00000014}.top-bar .logo{height:36px;width:auto;flex-shrink:0}.top-bar .logo img{height:100%;width:auto}.top-bar ul.nav-desktop{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}.top-bar ul.nav-desktop li a{color:inherit;font-weight:500;font-size:.95rem;opacity:.7;transition:opacity .2s ease;padding:.4rem 0}.top-bar ul.nav-desktop li a:hover{opacity:1}.nav-right-group{display:flex;align-items:center;gap:.75rem;margin-left:auto}#userButtonContainer{display:inline-flex!important;align-items:center}.nav-cta-btn{display:inline-flex;align-items:center;padding:0 16px;height:36px;border-radius:18px;font-weight:500;font-size:.85rem;text-decoration:none;white-space:nowrap;background:#fde0471f;border:1px solid rgba(245,158,11,.5);color:#fbbf24;transition:all .2s ease}.nav-cta-btn:hover{background:#fde04733;border-color:#f59e0bcc;color:#fcd34d}[data-theme=light] .nav-cta-btn{background:#f59e0b1a;color:#b45309;border-color:#f59e0b80}[data-theme=light] .nav-cta-btn:hover{background:#f59e0b2e;color:#92400e}.opilot-trigger{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:18px;background:#ffffff0d;border:1px solid rgba(255,255,255,.12);color:inherit;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.opilot-trigger:hover{background:#ffffff1a;border-color:#00e5ff66;color:var(--secondary)}[data-theme=light] .opilot-trigger{background:#0000000a;border-color:#0000001f}[data-theme=light] .opilot-trigger:hover{background:#00000014;border-color:#00e5ff99}.opilot-trigger-icon{font-size:1rem}.opilot-trigger-kbd{font-size:.7rem;font-family:ui-monospace,monospace;padding:1px 5px;border-radius:4px;background:#ffffff14;color:inherit;opacity:.7}[data-theme=light] .opilot-trigger-kbd{background:#0000000f}.lang-dropdown{position:relative}.lang-toggle{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:18px;background:#ffffff0d;border:1px solid rgba(255,255,255,.12);color:inherit;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease}.lang-toggle:hover{background:#ffffff1a;border-color:#00e5ff66}[data-theme=light] .lang-toggle{background:#0000000a;border-color:#0000001f}[data-theme=light] .lang-toggle:hover{background:#00000014;border-color:#00e5ff99}.lang-toggle:after{content:"▼";font-size:.55rem;margin-left:6px;opacity:.6;transition:transform .2s}.lang-dropdown.open .lang-toggle:after{transform:rotate(180deg)}.lang-menu{position:absolute;top:calc(100% + 6px);right:0;list-style:none;padding:6px;margin:0;min-width:140px;border-radius:12px;background:#0f172af2;border:1px solid rgba(255,255,255,.15);box-shadow:0 8px 24px #0006;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;z-index:1001}.lang-dropdown.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}[data-theme=light] .lang-menu{background:#fffffffa;border-color:#0000001f;box-shadow:0 8px 24px #0000001f}.lang-menu li button{display:block;width:100%;text-align:left;padding:8px 12px;border-radius:8px;color:inherit;font-size:.9rem;transition:background .15s}.lang-menu li button:hover{background:#ffffff14}[data-theme=light] .lang-menu li button:hover{background:#0000000f}.lang-menu li button.active{background:#6366f12e;color:var(--primary);font-weight:600}.icon-button{display:inline-flex;align-items:center;justify-content:center;height:36px;min-width:36px;padding:0 12px;border:1px solid rgba(255,255,255,.12);background:#ffffff0a;color:inherit;border-radius:10px;font-size:1.05rem;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .2s ease}.icon-button:hover{background:#ffffff14;border-color:#00e5ff66}.theme-toggle{min-width:56px;border-radius:18px;font-size:1.1rem}[data-theme=light] .icon-button{background:#0000000a;border-color:#0000001f}[data-theme=light] .icon-button:hover{background:#00000014;border-color:#00e5ff80}#userButtonContainer .login-register-btn,.login-register-btn{display:inline-flex!important;align-items:center;justify-content:center;padding:0 16px!important;height:36px!important;border-radius:18px!important;font-weight:500!important;font-size:.85rem!important;text-decoration:none;white-space:nowrap;background:#ffffff0a!important;border:1px solid rgba(255,255,255,.12)!important;color:inherit!important;transition:all .2s ease!important}.login-register-btn:hover{background:#ffffff14!important;border-color:#00e5ff66!important}[data-theme=light] .login-register-btn{background:#0000000a!important;border-color:#0000001f!important}[data-theme=light] .login-register-btn:hover{background:#00000014!important;border-color:#00e5ff80!important}#userButtonContainer .user-avatar-btn,#userButtonContainer button{background:#ffffff0a!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important}#userButtonContainer .user-avatar-btn:hover{background:#ffffff14!important;border-color:#00e5ff66!important}[data-theme=light] #userButtonContainer .user-avatar-btn,[data-theme=light] #userButtonContainer button{background:#0000000a!important;border-color:#0000001f!important}.nav-hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.12);color:inherit;cursor:pointer}[data-theme=light] .nav-hamburger{background:#0000000a;border-color:#0000001f}.hero{position:relative;padding-top:calc(140px + var(--safe-top));padding-bottom:100px;text-align:center;background:linear-gradient(180deg,#2a5caa26,#010409);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.hero-block{display:flex;flex-direction:column;align-items:center;max-width:800px;padding:0 24px}#hero h1{font-size:4.5rem;font-weight:800;margin-bottom:24px;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}#hero p{max-width:700px;margin:0 auto 32px;font-size:1.2rem;color:#ffffffbf;line-height:1.9}[data-theme=light] .hero{background:linear-gradient(180deg,#ffffff0d,#fff3)}[data-theme=light] #hero p{color:#2d3748}.hero-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;padding:0 28px;height:48px;border-radius:24px;font-weight:600;font-size:1rem;text-decoration:none;transition:all .2s ease;white-space:nowrap}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 4px 16px #6366f166}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px #6366f18c}.btn-ghost{background:#ffffff0f;border:1px solid rgba(255,255,255,.18);color:inherit}.btn-ghost:hover{background:#ffffff1f;border-color:#ffffff59}[data-theme=light] .btn-ghost{background:#ffffffd9;border-color:#00000026;color:#1a1a1a}[data-theme=light] .btn-ghost:hover{background:#00000014;border-color:#00000040}.tool-section{padding:6rem 2rem;display:flex;justify-content:center}.tool-card{width:100%;max-width:1100px;background:#141820a6;color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:48px 56px;display:grid;grid-template-columns:80px 1fr auto;grid-template-rows:auto auto auto;gap:8px 28px;align-items:center;box-shadow:0 4px 16px #00000040;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}.tool-card:hover{border-color:#00e5ff59;transform:translateY(-3px);box-shadow:0 8px 28px #0006}[data-theme=light] .tool-card{background:#ffffffbf;color:#1a1a1a;border-color:#00000014;box-shadow:0 2px 6px #0000000f,0 8px 24px #00000014}[data-theme=light] .tool-card:hover{background:#ffffffe6;border-color:#2a5caa66;box-shadow:0 4px 12px #00000014,0 12px 32px #0000001f}.tool-icon{grid-column:1;grid-row:1 / 3;font-size:4rem;line-height:1}.tool-card h2{grid-column:2;grid-row:1;font-size:1.85rem;font-weight:700;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tool-card p{grid-column:2;grid-row:2;color:#ffffffbf;font-size:1rem;line-height:1.8;max-width:700px}[data-theme=light] .tool-card p{color:#2d3748}.tool-card .btn{grid-column:3;grid-row:1 / 3;align-self:center;height:44px;padding:0 24px;border-radius:22px;font-size:.95rem}footer{text-align:center;padding:3rem 2rem 4rem;color:#fff9;font-size:.9rem}footer a{color:inherit;text-decoration:underline;text-decoration-color:#ffffff4d}[data-theme=light] footer{color:#6b7280}[data-theme=light] footer a{text-decoration-color:#0000004d}.back-to-top{position:fixed;right:2rem;bottom:calc(2rem + var(--safe-bottom));width:48px;height:48px;border-radius:50%;background:#6366f1d9;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,transform .3s,visibility .3s,background .2s ease;z-index:50}.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}.back-to-top:hover{background:#6366f1}[data-theme=light] .back-to-top{background:#6366f1e6;color:#fff}.mobile-drawer-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;z-index:1100}.mobile-drawer-mask.open{opacity:1;visibility:visible}.mobile-drawer{position:fixed;top:0;right:0;bottom:0;width:min(86vw,320px);background:#0f172afa;border-left:1px solid rgba(255,255,255,.12);box-shadow:-10px 0 30px #0006;z-index:1200;display:flex;flex-direction:column;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);overflow-y:auto}.mobile-drawer.open{transform:translate(0)}[data-theme=light] .mobile-drawer{background:#fffffffa;border-left-color:#0000001a}.mobile-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.1)}[data-theme=light] .mobile-drawer-header{border-bottom-color:#00000014}.mobile-drawer-title{font-size:1rem;font-weight:600;opacity:.7}.mobile-drawer-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,.15);color:inherit;cursor:pointer;font-size:1rem}[data-theme=light] .mobile-drawer-close{border-color:#00000026}.mobile-drawer-nav{padding:.75rem 0;flex:1}.mobile-drawer-nav ul{list-style:none;padding:0;margin:0}.mobile-drawer-nav li{border-bottom:1px solid rgba(255,255,255,.06)}[data-theme=light] .mobile-drawer-nav li{border-bottom-color:#0000000f}.mobile-drawer-nav a{display:flex;align-items:center;padding:1rem 1.25rem;color:inherit;text-decoration:none;font-size:1rem;font-weight:500;min-height:48px}.mobile-drawer-lang{display:flex;gap:.5rem;padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.1)}[data-theme=light] .mobile-drawer-lang{border-top-color:#00000014}.mobile-drawer-lang button{flex:1;min-height:44px;padding:.6rem 1rem;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:transparent;color:inherit;font-size:.95rem;cursor:pointer}[data-theme=light] .mobile-drawer-lang button{border-color:#00000026}.mobile-drawer-lang button.active{background:#6366f12e;border-color:#6366f180;color:var(--primary);font-weight:600}@media(max-width:1024px){.tool-card{padding:36px 32px}.tool-card h2{font-size:1.6rem}#hero h1{font-size:3.5rem}}@media(max-width:768px){.top-bar{padding:0 16px;gap:12px}.top-bar ul.nav-desktop{display:none}.nav-hamburger{display:inline-flex}.nav-docs-link,.opilot-trigger-text,.opilot-trigger-kbd,.lang-toggle-text,.nav-cta-btn{display:none}#hero h1{font-size:2.75rem}#hero p{font-size:1.05rem}.hero-buttons{flex-direction:column;width:100%;max-width:280px}.hero-buttons .btn{width:100%}.tool-section{padding:4rem 1.25rem}.tool-card{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;padding:28px 24px;text-align:left}.tool-icon{grid-column:1;grid-row:1;font-size:3rem}.tool-card h2{grid-column:1;grid-row:2;font-size:1.5rem}.tool-card p{grid-column:1;grid-row:3;font-size:.95rem}.tool-card .btn{grid-column:1;grid-row:4;justify-self:start}.back-to-top{right:1rem;bottom:calc(1rem + var(--safe-bottom));width:44px;height:44px}footer{padding:2rem 1.25rem 2.5rem}}@media(max-width:480px){.top-bar .logo{height:30px}#hero h1{font-size:2.25rem;line-height:1.15}#hero p{font-size:.95rem}.tool-section{padding:3rem 1rem}.tool-card h2{font-size:1.35rem}}@media(hover:none){.btn-primary:hover,.tool-card:hover,.nav-cta-btn:hover{transform:none;box-shadow:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}html{scroll-behavior:auto}}body.drawer-open{overflow:hidden}