html { scroll-behavior: smooth; } body { background: var(--ipad-section-bg); color: var(--text); letter-spacing: 0; } section[id], #top { scroll-margin-top: 6rem; } .brand-gradient { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 62%, #ffffff)); } .app-store-button { background: #050505; color: #ffffff; } .app-store-button:hover { background: #111111; } .language-select { appearance: none; min-width: 6.25rem; padding-right: 2.35rem; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 7.5L10 12L14.5 7.5' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 0.8rem center; background-repeat: no-repeat; background-size: 1rem 1rem; } html[dir="rtl"] .language-select { padding-right: 0.75rem; padding-left: 2.35rem; background-position: left 0.8rem center; } .brand-text { color: var(--brand); } .hairline { border-color: var(--line); } .soft-panel { background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--line); backdrop-filter: blur(22px); } .phone-frame { aspect-ratio: 390 / 844; border-radius: 46px; } .feature-preview { aspect-ratio: 4 / 3; } .feature-preview-shell, .resource-preview-shell { display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at top, color-mix(in srgb, var(--brand) 18%, transparent), transparent 15rem), color-mix(in srgb, var(--surface) 92%, #ffffff); } .feature-preview-shell { aspect-ratio: 1260 / 2736; width: min(76%, 210px); margin-inline: auto; border-radius: 2rem; background: #111827; box-shadow: 0 22px 54px rgba(17, 24, 39, 0.22); } .resource-preview-shell { aspect-ratio: 3 / 4; border-color: rgba(255, 255, 255, 0.1); border-radius: 1rem; background: radial-gradient(circle at top, rgba(152, 159, 255, 0.24), transparent 15rem), rgba(255, 255, 255, 0.06); } .feature-preview-phone, .resource-preview-image { display: block; width: auto; height: auto; border-radius: 1.25rem; object-fit: contain; box-shadow: 0 20px 45px rgba(17, 24, 39, 0.18); } .feature-preview-phone { width: 100%; height: 100%; max-width: none; border-radius: calc(2rem - 1px); object-fit: cover; box-shadow: none; } .resource-preview-image { max-width: 58%; } .seo-tool-preview-shell { display: grid; place-items: center; overflow: hidden; min-height: 320px; background: radial-gradient(circle at top, color-mix(in srgb, var(--brand) 16%, transparent), transparent 16rem), #111827; } .seo-tool-preview-image { display: block; width: 100%; height: 320px; object-fit: contain; } @media (min-width: 1024px) { .seo-tool-preview-shell { height: 100%; } .seo-tool-preview-image { height: 100%; min-height: 320px; } } .ipad-preview-frame { overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 1rem; background: #111827; padding: 0.55rem; box-shadow: var(--ipad-frame-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .ipad-preview-image { display: block; width: 100%; height: auto; border-radius: 0.55rem; } .ipad-support-point { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; border: 1px solid var(--ipad-point-border); border-radius: 1rem; background: var(--ipad-point-bg); padding: 0.75rem 0.9rem; } .lang-button[aria-pressed="true"] { background: var(--brand); color: white; border-color: var(--brand); } @media (prefers-color-scheme: dark) { .app-store-button { background: #ffffff; color: #050505; } .app-store-button:hover { background: #f3f4f6; } .ipad-preview-frame { border-color: rgba(255, 255, 255, 0.14); background: #050505; } } .fade-up { animation: fade-up 0.7s ease both; } @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }