:root { --bg: #080e16; --panel: #111d28; --line: #263a48; --text: #eff7f7; --muted: #9badb5; --cyan: #2ccdbb; --purple: #c084fc; --coral: #ff8d72; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
.store-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 max(24px, calc((100vw - 1240px) / 2)); border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(8,14,22,.9); backdrop-filter: blur(18px); }
.store-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; font-weight: 800; }.store-brand img { width: 33px; height: 33px; border-radius: 8px; object-fit: contain; }
.store-header nav { display: flex; gap: 28px; color: var(--muted); font-size: 12px; }.store-header nav a:hover { color: var(--text); }.store-status { padding: 6px 10px; border: 1px solid rgba(44,205,187,.28); border-radius: 999px; color: #a9eee5; font-size: 11px; font-weight: 700; }
.catalog, .purchase-flow, .store-faq { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }.catalog { padding: 82px 0 105px; }.catalog-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }.eyebrow { margin: 0; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.catalog-head h1, .flow-head h2, .store-faq h2 { margin: 8px 0 0; color: var(--text); font-size: 48px; line-height: 1.04; letter-spacing: 0; }.catalog-head > p { max-width: 340px; margin: 0; color: var(--muted); font-size: 14px; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }.store-product { display: flex; min-height: 590px; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); transition: transform .2s, border-color .2s; }.store-product:hover { transform: translateY(-4px); border-color: var(--cyan); }.loovable-product:hover { border-color: var(--purple); }.product-topline { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.product-number { color: var(--cyan); }.loovable-product .product-number { color: var(--purple); }.product-logo { display: grid; width: 88px; height: 88px; place-items: center; margin: 48px 0 27px; border: 1px solid rgba(44,205,187,.24); border-radius: 16px; background: #0b141d; }.product-logo img { width: 68px; height: 68px; object-fit: contain; }.product-logo-loovable { border-color: rgba(192,132,252,.3); }.product-title h2 { margin: 0; font-size: 31px; letter-spacing: 0; }.product-title p { max-width: 470px; margin: 11px 0 0; color: var(--muted); font-size: 14px; }.product-points { display: grid; gap: 9px; padding: 0; margin: 31px 0; list-style: none; color: var(--text); font-size: 13px; }.product-points li::before { content: "✓"; margin-right: 9px; color: var(--cyan); font-weight: 800; }.loovable-product .product-points li::before { color: var(--purple); }.product-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }.product-prices > div { display: grid; gap: 3px; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.025); }.product-prices span { color: var(--muted); font-size: 11px; }.product-prices strong { color: var(--text); font-size: 17px; }.product-cta { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 14px 0 0; border-top: 1px solid var(--line); color: var(--cyan); font-size: 13px; font-weight: 800; }.loovable-product .product-cta { color: var(--purple); }
.purchase-flow { display: grid; grid-template-columns: 280px 1fr; gap: 70px; padding: 70px 0; border-top: 1px solid rgba(255,255,255,.07); }.flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }.flow-steps article { min-height: 190px; padding: 25px; background: #0d1721; }.flow-steps span { color: var(--cyan); font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }.flow-steps h3 { margin: 45px 0 8px; font-size: 17px; }.flow-steps p { margin: 0; color: var(--muted); font-size: 13px; }
.store-faq { display: grid; grid-template-columns: 280px 1fr; gap: 70px; padding: 74px 0 100px; border-top: 1px solid rgba(255,255,255,.07); }.faq-list { max-width: 760px; }.faq-list details { border-top: 1px solid var(--line); }.faq-list details:last-child { border-bottom: 1px solid var(--line); }.faq-list summary { display: flex; justify-content: space-between; gap: 20px; padding: 19px 0; list-style: none; color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { content: "+"; color: var(--cyan); font-size: 20px; }.faq-list details[open] summary::after { content: "−"; }.faq-list p { max-width: 620px; margin: -3px 0 20px; color: var(--muted); font-size: 13px; }
.store-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 35px; border-top: 1px solid rgba(255,255,255,.07); color: var(--muted); font-size: 12px; }.store-footer a:last-child:hover { color: var(--text); }
@media (max-width: 800px) { .catalog-head, .purchase-flow, .store-faq { display: block; }.catalog-head > p { margin-top: 18px; }.purchase-flow, .store-faq { padding: 65px 0; }.flow-steps, .product-grid { grid-template-columns: 1fr; margin-top: 30px; }.store-faq .faq-list { margin-top: 28px; }.store-product { min-height: 510px; } }
@media (max-width: 620px) { .store-header { min-height: 66px; padding: 0 16px; }.store-header nav { display: none; }.store-status { font-size: 10px; }.catalog, .purchase-flow, .store-faq, .store-footer { width: min(100% - 32px, 1240px); }.catalog { padding: 58px 0 70px; }.catalog-head h1, .flow-head h2, .store-faq h2 { font-size: 38px; }.store-product { min-height: 480px; padding: 24px; }.product-logo { width: 76px; height: 76px; margin: 38px 0 24px; }.product-logo img { width: 58px; height: 58px; }.store-footer { display: grid; gap: 12px; }.store-footer .store-brand { grid-column: 1 / -1; } }