:root, [data-theme="light"] { color-scheme:light; --ink:#17171b; --muted:#777780; --line:#e5e4e8; --paper:#fbfbfa; --violet:#6337ff; --violet-dark:#4820d1; --soft:#f0edff; --plum:#24152e; --danger:#a43d55; --header-bg:rgba(251,251,250,.88); --surface:rgba(255,255,255,.82); --surface-solid:#fff; --input-bg:#fff; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
[data-theme="gray"] { color-scheme:light; --ink:#1c1c1f; --muted:#6b6b76; --line:#d0d0d4; --paper:#eaeaeb; --violet:#5b2eff; --violet-dark:#4a1fe6; --soft:#dddde0; --plum:#24152e; --danger:#a43d55; --header-bg:rgba(234,234,235,.9); --surface:rgba(243,243,244,.9); --surface-solid:#f3f3f4; --input-bg:#fff; }
[data-theme="high-contrast"] { color-scheme:light; --ink:#000; --muted:#333; --line:#000; --paper:#fff; --violet:#5b2eff; --violet-dark:#3d0fcc; --soft:#f0f0f0; --plum:#150d20; --danger:#8b203c; --header-bg:rgba(255,255,255,.94); --surface:#fff; --surface-solid:#fff; --input-bg:#fff; }
[data-theme="colorful"] { color-scheme:light; --ink:#1c1c1f; --muted:#5b5b6b; --line:#d8d0f0; --paper:#f7f7f5; --violet:#5b2eff; --violet-dark:#4a1fe6; --soft:#ede8ff; --plum:#24152e; --danger:#a43d55; --header-bg:rgba(247,247,245,.9); --surface:rgba(255,255,255,.88); --surface-solid:#fff; --input-bg:#fff; }
[data-theme="dark"] { color-scheme:dark; --ink:#e4e5e9; --muted:#9394a0; --line:#2a2a33; --paper:#131316; --violet:#8a70ff; --violet-dark:#a18dff; --soft:#232329; --plum:#0d0810; --danger:#ff9bb2; --header-bg:rgba(19,19,22,.88); --surface:rgba(28,28,34,.9); --surface-solid:#1c1c22; --input-bg:#1c1c22; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background-color:var(--paper); background-image:radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) .8px, transparent .8px); background-size:24px 24px; color:var(--ink); }
body::before { content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(circle at 76% 2%, rgba(229,222,255,.75), transparent 32rem), linear-gradient(180deg, rgba(255,255,255,.6), transparent 45rem); }
a { color:inherit; } button, input { font:inherit; } button { border:0; cursor:pointer; } button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid #a899ff; outline-offset:3px; }
.hidden { display:none !important; }
.topbar { position:sticky; z-index:20; top:0; min-height:48px; border-bottom:1px solid var(--line); background:var(--header-bg); backdrop-filter:blur(18px); }
.topbar-inner { max-width:1240px; min-height:48px; margin:auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand-group, .auxera-brand, .footer-brand { display:flex; align-items:center; } .brand-group { gap:14px; } .auxera-brand { gap:9px; text-decoration:none; } .auxera-brand img:first-child { width:24px; height:24px; } .auxera-brand img:last-child { width:112px; height:auto; } .brand-divider { width:1px; height:25px; background:var(--line); } .product-brand { color:var(--ink); font-size:20px; font-weight:800; letter-spacing:-.06em; text-decoration:none; }
.brand-mark { position:relative; display:inline-block; width:26px; height:26px; transform:rotate(45deg); } .brand-mark i { position:absolute; width:13px; height:13px; border:2.5px solid var(--violet); border-radius:7px; } .brand-mark i:nth-child(1) { left:0; top:0; } .brand-mark i:nth-child(2) { right:0; top:0; } .brand-mark i:nth-child(3) { left:0; bottom:0; } .brand-mark i:nth-child(4) { right:0; bottom:0; }
.main-nav { display:flex; align-items:center; gap:24px; color:var(--muted); font-size:14px; } .main-nav a, .mobile-nav a { text-decoration:none; } .main-nav a:hover, .mobile-nav a:hover { color:var(--ink); } .nav-controls { display:flex; align-items:center; gap:1px; border-left:1px solid var(--line); padding-left:14px; } .theme-control { position:relative; } .icon-control { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:32px; padding:6px 9px; border-radius:7px; background:transparent; color:var(--muted); } .icon-control:hover { background:var(--soft); color:var(--ink); } .icon-control svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; } .icon-control circle { fill:currentColor; stroke:none; } .theme-menu { position:absolute; right:0; top:calc(100% + 9px); z-index:50; min-width:164px; padding:5px; border:1px solid var(--line); border-radius:10px; background:var(--surface-solid); box-shadow:0 14px 30px rgba(0,0,0,.12); } .theme-menu button { display:block; width:100%; padding:9px 11px; border-radius:7px; background:transparent; color:var(--ink); text-align:left; font-size:13px; } .theme-menu button:hover { background:var(--soft); color:var(--violet-dark); } .mobile-theme-row { display:none; } .menu-button, .mobile-nav { display:none; }
.quiet { padding:8px 10px; border-radius:9px; background:transparent; color:var(--muted); font-size:13px; } .quiet:hover { background:var(--soft); color:var(--ink); }
.site-shell { max-width:1240px; margin:auto; padding:54px 28px 80px; } .page-view { min-height:calc(100vh - 220px); }
.hero-marketing { min-height:650px; display:grid; grid-template-columns:minmax(0,.8fr) minmax(480px,1.2fr); align-items:center; gap:54px; padding:40px 0 74px; } .hero-copy { max-width:610px; } .eyebrow { margin:0 0 15px; color:var(--violet); font-size:11px; line-height:1.2; letter-spacing:.22em; font-weight:800; text-transform:uppercase; } h1,h2,p { margin-top:0; } h1 { margin-bottom:24px; font-size:clamp(48px,7vw,94px); line-height:.94; letter-spacing:-.075em; } h1 em, .page-intro h1 em { color:var(--violet); font-style:normal; } h2 { margin-bottom:12px; font-size:clamp(24px,3vw,38px); line-height:1; letter-spacing:-.06em; } .lead { max-width:570px; margin-bottom:28px; color:var(--muted); font-size:19px; line-height:1.5; } .micro-copy { margin:14px 0 0; color:var(--muted); font-size:12px; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:48px; padding:13px 20px; border-radius:999px; background:var(--violet); color:#fff; text-decoration:none; font-size:14px; font-weight:750; box-shadow:0 12px 26px rgba(99,55,255,.2); transition:transform .18s ease, background .18s ease; } .button span { font-size:19px; line-height:0; } .button:hover { background:var(--violet-dark); transform:translateY(-2px); } .button-secondary { background:rgba(255,255,255,.75); color:var(--ink); border:1px solid var(--line); box-shadow:none; } .button-secondary:hover { background:#fff; color:var(--violet-dark); } .button-light { background:#fff; color:var(--plum); box-shadow:none; } .button-light:hover { background:#eee9ff; } .full-width { width:100%; }
.hero-visual { min-width:0; } .visual-window { overflow:hidden; min-height:400px; border:1px solid rgba(255,255,255,.88); border-radius:28px; background:rgba(255,255,255,.88); box-shadow:0 28px 90px rgba(53,33,100,.16); transform:rotate(1.2deg); } .window-bar { height:48px; display:flex; align-items:center; gap:6px; padding:0 18px; border-bottom:1px solid var(--line); color:var(--muted); } .window-bar span { width:8px; height:8px; border-radius:50%; background:#d8d6de; } .window-bar b { margin-left:12px; color:var(--ink); font-size:11px; letter-spacing:.08em; text-transform:uppercase; } .window-bar small { margin-left:auto; font-size:10px; } .visual-grid { display:grid; grid-template-columns:130px 1fr; min-height:350px; } .visual-sidebar { display:flex; flex-direction:column; gap:17px; padding:24px 16px; border-right:1px solid var(--line); color:#98979e; font-size:11px; } .visual-sidebar strong { color:var(--ink); font-size:12px; } .visual-sidebar .active { padding:8px 10px; border-radius:7px; background:var(--soft); color:var(--violet-dark); font-weight:700; } .sidebar-line { height:1px; margin:10px 0 2px; background:var(--line); } .visual-canvas { padding:28px; } .canvas-label { margin-bottom:14px; color:var(--violet); font-size:9px; font-weight:800; letter-spacing:.18em; } .canvas-card { overflow:hidden; min-width:0; border:1px solid var(--line); border-radius:14px; background:#fff; } .canvas-card-main { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:18px; padding:12px; } .canvas-card strong, .canvas-card span { display:block; } .canvas-card-main strong { margin-bottom:6px; font-size:15px; letter-spacing:-.04em; } .canvas-card-main span, .canvas-card > span { color:var(--muted); font-size:10px; line-height:1.35; } .canvas-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; } .canvas-card > span { padding:9px 10px 11px; } .canvas-art { min-height:145px; } .canvas-row .canvas-art { min-height:92px; } .art-one { background:linear-gradient(145deg,#a7c4ca 2%,#304f62 49%,#d69e70 50%,#493642 100%); } .art-two { background:linear-gradient(130deg,#edb4b4,#6e365e 55%,#1e1728); } .art-three { background:linear-gradient(130deg,#f4d3a7,#c07851 48%,#263b50 49%,#18232f); }
.section-gap { margin-top:84px; } .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .feature-card, .card, .workflow-card, .pricing-card { border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.82); box-shadow:0 18px 70px rgba(53,33,100,.06); } .feature-card { min-height:190px; padding:25px; } .feature-icon { display:block; margin-bottom:27px; color:var(--violet); font-size:27px; } .feature-card h2 { margin-bottom:10px; font-size:22px; } .feature-card p { margin:0; color:var(--muted); font-size:15px; line-height:1.45; }
.story-section { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } .story-copy { max-width:500px; } .story-copy h2 { font-size:clamp(38px,5vw,64px); line-height:.98; } .story-copy > p:last-child { color:var(--muted); font-size:17px; line-height:1.6; } .workflow-card { padding:30px; } .workflow-card h2 { margin-bottom:28px; font-size:30px; } .workflow-step { display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--line); } .workflow-step b { color:var(--violet); font-size:13px; } .workflow-step strong, .workflow-step small { display:block; } .workflow-step strong { margin-bottom:5px; font-size:15px; } .workflow-step small { color:var(--muted); font-size:13px; line-height:1.4; }
.dark-banner { overflow:hidden; position:relative; padding:72px 8%; border-radius:30px; background:linear-gradient(115deg,#21162a,#172c31 55%,#6d3b34); color:#fff; text-align:center; } .dark-banner::after { content:""; position:absolute; width:340px; height:340px; right:2%; top:-150px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 34px rgba(255,255,255,.04), 0 0 0 68px rgba(255,255,255,.03); } .dark-banner .eyebrow { color:#bca8ff; } .dark-banner h2 { position:relative; z-index:1; max-width:700px; margin:0 auto 13px; font-size:clamp(42px,6vw,74px); } .dark-banner p:not(.eyebrow) { position:relative; z-index:1; color:rgba(255,255,255,.7); } .dark-banner .button { position:relative; z-index:1; margin-top:20px; }
.page-intro { max-width:690px; padding:45px 0 64px; } .page-intro h1 { font-size:clamp(48px,7vw,86px); } .shop-layout { display:grid; grid-template-columns:1fr 420px; gap:70px; align-items:start; } .shop-benefits { padding:34px 0; } .shop-benefits h2 { margin-bottom:32px; font-size:clamp(38px,5vw,62px); } .shop-benefits ul { display:grid; gap:0; max-width:580px; padding:0; margin:0; list-style:none; } .shop-benefits li { display:flex; gap:18px; padding:21px 0; border-top:1px solid var(--line); } .shop-benefits li > span { color:var(--violet); font-size:23px; } .shop-benefits strong, .shop-benefits small { display:block; } .shop-benefits strong { margin-bottom:5px; font-size:16px; } .shop-benefits small { color:var(--muted); font-size:14px; line-height:1.4; } .pricing-card { padding:30px; } .pricing-card h2 { font-size:34px; } .pricing-copy { min-height:48px; color:var(--muted); line-height:1.5; } .price-placeholder { margin:25px 0; padding:16px; border-radius:14px; background:#f7f5fc; color:var(--violet-dark); font-size:13px; font-weight:700; }
.download-card { display:grid; grid-template-columns:1fr 300px; gap:70px; align-items:center; min-height:520px; padding:68px 8%; border:1px solid var(--line); border-radius:31px; background:linear-gradient(115deg,rgba(235,229,255,.9),rgba(255,255,255,.92) 52%,rgba(255,243,227,.78)); box-shadow:0 24px 80px rgba(53,33,100,.08); } .download-card h1 { max-width:660px; } .download-spec { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:260px; padding:30px; border:1px solid rgba(99,55,255,.16); border-radius:25px; background:rgba(255,255,255,.63); text-align:center; } .download-symbol { display:grid; place-items:center; width:72px; height:72px; margin-bottom:24px; border-radius:22px; background:var(--violet); color:white; font-size:39px; box-shadow:0 16px 30px rgba(99,55,255,.2); } .download-spec .eyebrow { margin-bottom:10px; } .download-spec strong { margin-bottom:8px; font-size:19px; } .download-spec > span:last-child { color:var(--muted); font-size:13px; } .download-note { display:flex; justify-content:center; gap:9px; margin-top:26px; color:var(--muted); font-size:13px; } .download-note strong { color:var(--ink); }
.account-intro { padding-bottom:38px; } .account-intro h1 { max-width:700px; } .card { padding:28px; } .auth-card { max-width:580px; margin-bottom:20px; } .auth-card h2 { font-size:30px; } .auth-card p:not(.eyebrow), .checkout-card p:not(.eyebrow):not(.fine-print), .retention p:not(.eyebrow) { color:var(--muted); line-height:1.5; } .form { display:grid; gap:9px; margin-top:24px; } label { font-size:13px; font-weight:700; } input { width:100%; border:1px solid #d9d5df; border-radius:12px; background:white; padding:13px 14px; outline:none; } input:focus { border-color:var(--violet); box-shadow:0 0 0 3px #e9e3ff; } button:not(.quiet):not(.menu-button) { padding:12px 16px; border-radius:12px; background:var(--violet); color:white; font-weight:700; } button:not(.quiet):not(.menu-button):hover { background:var(--violet-dark); } button:disabled { opacity:.55; cursor:wait; }
.account-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .card-heading { display:flex; justify-content:space-between; gap:16px; align-items:start; } .card-heading h2 { overflow-wrap:anywhere; font-size:22px; } .pill { background:var(--soft); color:var(--violet-dark); border-radius:999px; padding:7px 10px; font-size:12px; font-weight:750; white-space:nowrap; } .pill[data-tone="warning"] { background:#fff5de; color:#8d651c; } .pill[data-tone="danger"] { background:#ffe9ee; color:var(--danger); } .plan-summary { display:grid; gap:5px; margin:26px 0; padding:18px; border-radius:16px; background:#f8f6fb; } .plan-summary span { color:var(--muted); font-size:13px; } .plan-summary strong { font-size:21px; } .facts { display:grid; gap:13px; margin:0 0 25px; } .facts div { display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); padding-bottom:12px; } dt,dd { margin:0; font-size:14px; } dt { color:var(--muted); } dd { text-align:right; font-weight:650; } .checkout-host { min-height:160px; margin:22px 0 14px; border:1px dashed #cbc4e5; border-radius:16px; padding:16px; } .checkout-host:empty { display:none; } .fine-print { color:var(--muted); font-size:11px; line-height:1.4; margin:14px 0 0; } .actions { display:flex; flex-wrap:wrap; gap:10px; } .secondary { background:#eeeaf7 !important; color:var(--violet-dark) !important; } .secondary:hover { background:#e2dcf4 !important; } .danger { background:#fff0f2 !important; color:var(--danger) !important; } .danger:hover { background:#ffe0e6 !important; } .retention { margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .retention h2 { font-size:23px; }
.status, .notice { min-height:20px; color:var(--muted); font-size:13px; } .status[data-tone="error"], .notice[data-tone="error"] { color:var(--danger); } .status[data-tone="success"], .notice[data-tone="success"] { color:#3b785d; } .muted { color:var(--muted); font-size:14px; } #global-notice { margin:26px 0 0; }
footer { border-top:1px solid var(--line); background:rgba(255,255,255,.6); } .footer-inner { max-width:1240px; margin:auto; padding:54px 28px 46px; display:flex; justify-content:space-between; gap:50px; } .footer-brand { font-size:24px; font-weight:800; letter-spacing:-.06em; } footer p { margin-top:18px; color:var(--muted); font-size:13px; } .footer-links { display:flex; gap:75px; } .footer-links div { display:grid; align-content:start; gap:10px; min-width:100px; } .footer-links strong { margin-bottom:4px; color:var(--muted); font-size:11px; letter-spacing:.16em; } .footer-links a { color:var(--muted); font-size:13px; text-decoration:none; } .footer-links a:hover { color:var(--ink); } .footer-bottom { max-width:1184px; margin:auto; padding:20px 0 26px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }
@media (max-width:900px) { .hero-marketing { grid-template-columns:1fr; gap:30px; } .hero-copy { max-width:700px; } .hero-visual { max-width:740px; width:100%; margin:0 auto; } .story-section { gap:35px; } .shop-layout, .download-card { gap:35px; } .footer-links { gap:35px; } }
@media (max-width:700px) { .topbar-inner { min-height:48px; padding:0 18px; } .main-nav { display:none; } .menu-button { display:block; padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface-solid); color:var(--ink); font-size:13px; } .mobile-nav { max-height:0; overflow:hidden; padding:0 18px; display:grid; gap:0; background:var(--header-bg); transition:max-height .2s ease, padding .2s ease; } .mobile-nav.open { max-height:390px; padding:8px 18px 18px; } .mobile-nav a { padding:12px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:14px; } .brand-group { gap:10px; } .auxera-brand img:last-child { width:88px; } .product-brand { font-size:18px; } .mobile-theme-row { position:relative; display:flex; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); } .mobile-theme-row .theme-menu { position:static; margin-left:8px; } .mobile-theme-row .icon-control { padding-left:0; } .site-shell { padding:32px 18px 58px; } .hero-marketing { min-height:0; padding:24px 0 40px; } h1 { font-size:clamp(48px,15vw,74px); } .lead { font-size:17px; } .feature-grid, .story-section, .account-grid, .shop-layout, .download-card { grid-template-columns:1fr; } .section-gap { margin-top:54px; } .feature-card { min-height:0; } .story-copy h2 { font-size:44px; } .visual-grid { grid-template-columns:84px 1fr; } .visual-sidebar { padding:18px 10px; font-size:9px; } .visual-canvas { padding:18px 12px; } .canvas-card-main { grid-template-columns:1fr; gap:10px; } .canvas-card-main .canvas-art { min-height:100px; } .download-card { min-height:0; padding:38px 24px; } .download-spec { min-height:220px; } .download-note { display:block; text-align:center; line-height:1.6; } .shop-benefits { padding:0; } .page-intro { padding:24px 0 38px; } .footer-inner { display:block; padding:40px 18px; } .footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px; } .footer-bottom { display:block; margin:0 18px; padding:18px 0 23px; line-height:1.8; } .footer-bottom span { display:block; } .retention { display:block; } .retention .actions { margin-top:20px; } }

[data-theme="dark"] body::before { background:radial-gradient(circle at 76% 2%, rgba(80,57,145,.35), transparent 32rem), linear-gradient(180deg, rgba(40,40,55,.35), transparent 45rem); }
[data-theme="dark"] .feature-card, [data-theme="dark"] .card, [data-theme="dark"] .workflow-card, [data-theme="dark"] .pricing-card, [data-theme="dark"] .visual-window, [data-theme="dark"] .canvas-card { background:var(--surface); }
[data-theme="dark"] .button-secondary { background:var(--surface); color:var(--ink); } [data-theme="dark"] .button-secondary:hover { background:var(--soft); } [data-theme="dark"] .plan-summary, [data-theme="dark"] .price-placeholder { background:var(--soft); } [data-theme="dark"] input { background:var(--input-bg); color:var(--ink); border-color:var(--line); } [data-theme="dark"] footer { background:rgba(19,19,22,.7); } [data-theme="dark"] .menu-button { background:var(--surface-solid); color:var(--ink); }