/* ============================================================================ StorageSSD — style.css 3D / glassmorphism / mesh-gradient layer on top of Tailwind (CDN). THEMING: light is the default (:root). Dark mode is opt-in via the `.dark` class on (toggled by script.js, persisted in localStorage, applied pre-paint by a tiny inline script in to avoid FOUC). All theme-sensitive colors are CSS variables. The semantic tokens (base/content/strong/muted/line/accent) are also exposed to Tailwind via the config so utilities like `text-content` / `bg-base` follow the theme too. Performance: animated layers use transform/opacity only (GPU-composited); the backdrop is position:fixed + pointer-events:none → zero CLS. ========================================================================== */ :root { /* Brand accents (mostly theme-independent) */ --c-electric: #2e7dff; --c-violet: #8b5cf6; --c-neon: #22d3ee; --c-magenta: #e94bd0; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ---------- LIGHT THEME (default) ---------- */ /* RGB triplets consumed by Tailwind: rgb(var(--x) / ) */ --bg-rgb: 238 242 251; --content-rgb: 51 65 85; /* body text (slate-700) */ --strong-rgb: 11 16 32; /* headings (near-black) */ --muted-rgb: 100 116 139; /* muted text (slate-500) */ --line-rgb: 15 23 42; /* borders (used at low alpha) */ --accent-rgb: 124 58 237; /* links/accents (violet-600) */ --text: rgb(51 65 85); --text-strong: rgb(11 16 32); --text-muted: rgb(100 116 139); --accent-text: rgb(124 58 237); --surface: rgba(255, 255, 255, 0.70); --surface-2: rgba(255, 255, 255, 0.92); --border: rgba(15, 23, 42, 0.10); --border-strong: rgba(15, 23, 42, 0.14); --header-bg: rgba(255, 255, 255, 0.72); --footer-bg: rgba(255, 255, 255, 0.66); --card-frame: linear-gradient(160deg, rgba(15,23,42,0.12), rgba(15,23,42,0.02)); --card-bg: linear-gradient(180deg, #ffffff, #f4f6fd); --card-bg-feat: linear-gradient(180deg, #ffffff, #f1ecff); --shadow-card: 0 20px 50px -28px rgba(30, 41, 90, 0.35); --shadow-card-hover: 0 30px 70px -30px rgba(124, 58, 237, 0.40); --shimmer: rgba(15, 23, 42, 0.05); --chip-bg: rgba(124, 58, 237, 0.10); --chip-text: rgb(109, 40, 217); --chip-border: rgba(124, 58, 237, 0.25); --cta-panel-bg: radial-gradient(600px 300px at 50% -20%, rgba(139,92,246,0.22), transparent 70%), linear-gradient(180deg, #ffffff, #f3f1fb); --shadow-3d: 0 1px 0 rgba(255,255,255,0.6), 0 2px 6px rgba(30,41,90,0.12), 0 12px 30px rgba(46,125,255,0.10); --grad-a: #2563eb; /* text-gradient stops (deeper for light-bg contrast) */ --grad-b: #7c3aed; --grad-c: #9333ea; --grad-d: #db2777; --mesh-bg: radial-gradient(1200px 800px at 15% -10%, rgba(46,125,255,0.10), transparent 60%), radial-gradient(1000px 700px at 100% 0%, rgba(139,92,246,0.11), transparent 55%), radial-gradient(900px 700px at 50% 120%, rgba(34,211,238,0.08), transparent 60%), rgb(238 242 251); --grid-line: rgba(15, 23, 42, 0.045); --orb-op: 0.28; --orb-op-3: 0.20; } html.dark { /* ---------- DARK THEME ---------- */ --bg-rgb: 6 7 15; --content-rgb: 203 213 225; --strong-rgb: 255 255 255; --muted-rgb: 148 163 184; --line-rgb: 255 255 255; --accent-rgb: 34 211 238; --text: rgb(203 213 225); --text-strong: #ffffff; --text-muted: rgb(148 163 184); --accent-text: rgb(34 211 238); --surface: rgba(255, 255, 255, 0.045); --surface-2: rgba(255, 255, 255, 0.10); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --header-bg: rgba(6, 7, 15, 0.60); --footer-bg: rgba(6, 7, 15, 0.70); --card-frame: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)); --card-bg: linear-gradient(180deg, rgba(13,17,33,0.92), rgba(8,10,22,0.96)); --card-bg-feat: linear-gradient(180deg, rgba(23,18,46,0.96), rgba(10,10,26,0.97)); --shadow-card: 0 20px 50px -24px rgba(0, 0, 0, 0.9); --shadow-card-hover: 0 30px 70px -28px rgba(139, 92, 246, 0.65); --shimmer: rgba(255, 255, 255, 0.10); --chip-bg: rgba(139, 92, 246, 0.12); --chip-text: rgb(199, 210, 254); --chip-border: rgba(139, 92, 246, 0.25); --cta-panel-bg: radial-gradient(600px 300px at 50% -20%, rgba(139,92,246,0.35), transparent 70%), linear-gradient(180deg, rgba(16,18,38,0.9), rgba(8,10,22,0.95)); --shadow-3d: 0 1px 0 rgba(255,255,255,0.10), 0 2px 4px rgba(0,0,0,0.5), 0 8px 30px rgba(46,125,255,0.25); --grad-a: var(--c-neon); --grad-b: var(--c-electric); --grad-c: var(--c-violet); --grad-d: var(--c-magenta); --mesh-bg: radial-gradient(1200px 800px at 15% -10%, rgba(46, 125, 255, 0.18), transparent 60%), radial-gradient(1000px 700px at 100% 0%, rgba(139, 92, 246, 0.20), transparent 55%), radial-gradient(900px 700px at 50% 120%, rgba(34, 211, 238, 0.12), transparent 60%), rgb(6 7 15); --grid-line: rgba(255, 255, 255, 0.035); --orb-op: 0.55; --orb-op-3: 0.40; } html { background-color: rgb(var(--bg-rgb)); } body { position: relative; z-index: 0; transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out); } /* Accessible skip link */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; padding: 0.6rem 1rem; border-radius: 0 0 0.6rem 0; background: var(--c-violet); color: #fff; font-weight: 600; } .skip-link:focus { left: 0; } /* ============================ ANIMATED MESH BACKDROP ============================ */ .bg-mesh { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--mesh-bg); transition: background 0.4s var(--ease-out); } .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--orb-op); will-change: transform; } .orb-1 { width: 46vw; height: 46vw; top: -8vw; left: -6vw; background: radial-gradient(circle at 30% 30%, var(--c-electric), transparent 70%); animation: drift-1 22s var(--ease-out) infinite alternate; } .orb-2 { width: 40vw; height: 40vw; top: 5vw; right: -10vw; background: radial-gradient(circle at 70% 30%, var(--c-violet), transparent 70%); animation: drift-2 26s var(--ease-out) infinite alternate; } .orb-3 { width: 38vw; height: 38vw; bottom: -14vw; left: 30%; background: radial-gradient(circle at 50% 50%, var(--c-neon), transparent 72%); opacity: var(--orb-op-3); animation: drift-3 30s var(--ease-out) infinite alternate; } @keyframes drift-1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw, 5vw, 0) scale(1.12); } } @keyframes drift-2 { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-5vw, 7vw, 0) scale(0.95); } } @keyframes drift-3 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4vw, -6vw, 0) scale(1.1); } } .grid-overlay { position: absolute; inset: -2px; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%); } /* ============================ STRUCTURAL CHROME ============================ */ .site-header { background: var(--header-bg); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out); } .site-footer { background: var(--footer-bg); border-top: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Frosted pill / notice surface (replaces inline bg-white/5 + border utilities) */ .chip-surface { background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ============================ THEME TOGGLE ============================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 0.7rem; font-size: 1rem; line-height: 1; cursor: pointer; background: var(--surface); border: 1px solid var(--border-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out); } .theme-toggle:hover { transform: translateY(-1px); background: var(--surface-2); box-shadow: 0 10px 24px -12px rgba(124, 58, 237, 0.5); } .theme-toggle::before { content: "🌙"; } /* light mode → offer dark */ html.dark .theme-toggle::before { content: "☀️"; } /* dark mode → offer light */ /* ============================ TEXT & BRAND TREATMENTS ============================ */ .text-gradient { background: linear-gradient(100deg, var(--grad-a), var(--grad-b) 45%, var(--grad-c) 80%, var(--grad-d)); -webkit-background-clip: text; background-clip: text; color: transparent; } .text-3d { color: var(--text-strong); text-shadow: var(--shadow-3d); } .logo-cube { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--c-neon), var(--c-violet)); box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 6px 18px -4px rgba(139,92,246,0.7); transform: rotate(8deg); flex: none; } .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-neon); box-shadow: 0 0 0 0 rgba(34,211,238,0.6); animation: pulse 2.4s ease-out infinite; flex: none; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,211,238,0.6); } 70% { box-shadow: 0 0 0 10px rgba(34,211,238,0); } 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); } } /* ============================ BUTTONS ============================ */ .btn-primary, .btn-glass { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.85rem; transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.25s var(--ease-out); text-decoration: none; white-space: nowrap; } .btn-primary { color: #fff; background: linear-gradient(100deg, var(--c-electric), var(--c-violet)); box-shadow: 0 10px 30px -8px rgba(46,125,255,0.6), 0 0 0 1px rgba(255,255,255,0.08) inset; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(139,92,246,0.75), 0 0 0 1px rgba(255,255,255,0.16) inset; } .btn-glass { color: var(--text-strong); background: var(--surface); border: 1px solid var(--border-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .btn-glass:hover { transform: translateY(-2px); background: var(--surface-2); box-shadow: 0 12px 30px -10px rgba(34,211,238,0.5); } /* ============================ HERO STAT CARDS ============================ */ .stat-card { border-radius: 1rem; padding: 1.1rem 1rem; background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .stat-label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .stat-value { margin-top: 0.25rem; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.6rem; line-height: 1; background: linear-gradient(120deg, var(--text-strong), var(--c-electric)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================ SERVICE CARDS (3D FLOATING) ============================ */ .service-card { position: relative; border-radius: 1.25rem; padding: 1px; background: var(--card-frame); transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); will-change: transform; } .service-card .card-inner { position: relative; height: 100%; border-radius: calc(1.25rem - 1px); padding: 1.6rem 1.5rem 1.7rem; background: var(--card-bg); box-shadow: var(--shadow-card); overflow: hidden; } .service-card::after { content: ""; position: absolute; inset: 0; border-radius: 1.25rem; padding: 1px; background: linear-gradient(130deg, var(--c-neon), var(--c-electric), var(--c-violet), var(--c-magenta)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s var(--ease-out); pointer-events: none; } .service-card:hover { box-shadow: var(--shadow-card-hover); } .service-card:hover::after { opacity: 1; } .service-card .card-inner::before { content: ""; position: absolute; top: -40%; left: -60%; width: 50%; height: 180%; background: linear-gradient(115deg, transparent, var(--shimmer), transparent); transform: skewX(-18deg); transition: left 0.7s var(--ease-out); pointer-events: none; } .service-card:hover .card-inner::before { left: 130%; } .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; font-size: 1.5rem; border-radius: 0.85rem; background: var(--surface-2); border: 1px solid var(--border); box-shadow: 0 8px 24px -10px rgba(34,211,238,0.5); } .card-title { margin-top: 1rem; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.18rem; color: var(--text-strong); } .card-desc { margin-top: 0.55rem; font-size: 0.93rem; line-height: 1.6; color: var(--text); } .card-meta { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; } .card-meta li { list-style: none; font-size: 0.72rem; font-weight: 500; padding: 0.28rem 0.6rem; border-radius: 999px; color: var(--chip-text); background: var(--chip-bg); border: 1px solid var(--chip-border); } .card-cta { margin-top: 1.4rem; display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0.7rem 1rem; border-radius: 0.7rem; font-weight: 600; font-size: 0.92rem; color: #fff; text-decoration: none; background: linear-gradient(100deg, rgba(46,125,255,0.9), rgba(139,92,246,0.9)); box-shadow: 0 10px 26px -12px rgba(46,125,255,0.7), 0 0 0 1px rgba(255,255,255,0.08) inset; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .card-cta:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgba(139,92,246,0.9), 0 0 0 1px rgba(255,255,255,0.18) inset; } /* Featured (NVMe) card */ .service-card--featured .card-inner { background: var(--card-bg-feat); } .service-card--featured::after { opacity: 0.6; } .card-badge { position: absolute; top: 1.1rem; right: 1.1rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; color: #06070f; background: linear-gradient(100deg, var(--c-neon), var(--c-magenta)); box-shadow: 0 6px 18px -6px rgba(233,75,208,0.7); } /* ============================ FEATURE & SPEC CARDS ============================ */ .feature-card, .spec-card { border-radius: 1.1rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); } .feature-card:hover, .spec-card:hover { transform: translateY(-4px); border-color: rgba(34,211,238,0.4); box-shadow: 0 20px 44px -20px rgba(34,211,238,0.45); } .feature-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; font-size: 1.35rem; border-radius: 0.75rem; background: rgba(34,211,238,0.10); border: 1px solid rgba(34,211,238,0.25); } .feature-title, .spec-title { margin-top: 0.9rem; font-family: 'Sora', sans-serif; font-weight: 700; color: var(--text-strong); font-size: 1.05rem; } .spec-title { margin-top: 0; color: var(--accent-text); } .feature-desc, .spec-line { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.6; color: var(--text); } /* ============================ FAQ ============================ */ .faq-item { border-radius: 0.9rem; border: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; } .faq-q { cursor: pointer; list-style: none; padding: 1.1rem 1.3rem; font-family: 'Sora', sans-serif; font-weight: 600; color: var(--text-strong); display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq-q::-webkit-details-marker { display: none; } .faq-q::after { content: "+"; font-size: 1.4rem; color: var(--accent-text); transition: transform 0.25s var(--ease-out); } .faq-item[open] .faq-q::after { transform: rotate(45deg); } .faq-a { padding: 0 1.3rem 1.2rem; color: var(--text); font-size: 0.95rem; line-height: 1.7; } /* ============================ LONG-FORM CONTENT (category pages) ============================ */ .cat-info { color: var(--text); } .cat-info h2 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.9rem; letter-spacing: -0.01em; color: var(--text-strong); } .cat-info h3 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--text-strong); margin-top: 2rem; } .cat-info p { margin-top: 1rem; line-height: 1.75; font-size: 1.02rem; } .cat-info .use-list { margin-top: 1.2rem; display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .cat-info .use-list li { list-style: none; display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.85rem 1rem; border-radius: 0.8rem; background: var(--surface); border: 1px solid var(--border); font-size: 0.92rem; line-height: 1.5; } .cat-info .use-list li::before { content: ""; flex: none; margin-top: 0.2rem; width: 16px; height: 16px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2 2 5-5.2' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat, linear-gradient(120deg, var(--c-neon), var(--c-violet)); } /* ============================ CTA PANEL ============================ */ .cta-panel { position: relative; border-radius: 1.5rem; padding: 3.5rem 2rem; background: var(--cta-panel-bg); border: 1px solid var(--border-strong); box-shadow: 0 40px 90px -40px rgba(139,92,246,0.45); overflow: hidden; } /* ============================ FOOTER ============================ */ .footer-h { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-strong); margin-bottom: 0.9rem; } .footer-list { display: flex; flex-direction: column; gap: 0.55rem; } .footer-list a { font-size: 0.9rem; color: var(--text-muted); text-decoration: none; transition: color 0.2s var(--ease-out); } .footer-list a:hover { color: var(--accent-text); } /* ============================ ACCESSIBILITY / MOTION ============================ */ @media (prefers-reduced-motion: reduce) { .orb, .pulse-dot, .service-card, .service-card .card-inner::before { animation: none !important; transition: none !important; } .service-card { transform: none !important; } html { scroll-behavior: auto; } } a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 0.4rem; } /* ============================================================================ PRICING PAGES (per-category plan tables) ========================================================================== */ .breadcrumb { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.8rem; color: var(--text-muted); } .breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 0.2s var(--ease-out); } .breadcrumb a:hover { color: var(--accent-text); } .breadcrumb span[aria-current] { color: var(--text); } .breadcrumb .sep { color: var(--text-muted); opacity: 0.5; } .pricing-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); } .price-card { position: relative; border-radius: 1.25rem; padding: 1px; background: var(--card-frame); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); display: flex; } .price-card > .price-inner { position: relative; width: 100%; display: flex; flex-direction: column; border-radius: calc(1.25rem - 1px); padding: 1.8rem 1.5rem 1.7rem; background: var(--card-bg); box-shadow: var(--shadow-card); overflow: hidden; } .price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); } .price-card::after { content: ""; position: absolute; inset: 0; border-radius: 1.25rem; padding: 1px; background: linear-gradient(130deg, var(--c-neon), var(--c-electric), var(--c-violet), var(--c-magenta)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s var(--ease-out); pointer-events: none; } .price-card:hover::after { opacity: 1; } .price-card--popular { padding: 1.5px; } .price-card--popular > .price-inner { background: var(--card-bg-feat); } .price-card--popular::after { opacity: 0.7; } .plan-badge { position: absolute; top: 1rem; right: 1rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; color: #06070f; background: linear-gradient(100deg, var(--c-neon), var(--c-magenta)); box-shadow: 0 6px 18px -6px rgba(233,75,208,0.7); } .price-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--text-strong); } .price-blurb { margin-top: 0.35rem; font-size: 0.85rem; color: var(--text-muted); min-height: 2.4em; } .price-amount { margin-top: 1.1rem; display: flex; align-items: baseline; gap: 0.25rem; } .price-amount .currency { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--text); align-self: flex-start; margin-top: 0.35rem; } .price-amount .value { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 2.6rem; line-height: 1; background: linear-gradient(120deg, var(--text-strong), var(--c-electric)); -webkit-background-clip: text; background-clip: text; color: transparent; } .price-amount .period { font-size: 0.85rem; color: var(--text-muted); } .price-features { margin-top: 1.3rem; display: flex; flex-direction: column; gap: 0.65rem; flex: 1; } .price-features li { list-style: none; display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; line-height: 1.45; color: var(--text); } .price-features li::before { content: ""; flex: none; margin-top: 0.28rem; width: 14px; height: 14px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2 2 5-5.2' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat, linear-gradient(120deg, var(--c-neon), var(--c-violet)); box-shadow: 0 0 10px -2px rgba(34,211,238,0.6); } .price-features li .muted { color: var(--text-muted); } .price-cta { margin-top: 1.6rem; display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0.8rem 1rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.95rem; color: var(--text-strong); text-decoration: none; background: var(--surface); border: 1px solid var(--border-strong); transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out); } .price-cta:hover { transform: translateY(-1px); background: var(--surface-2); box-shadow: 0 12px 28px -12px rgba(34,211,238,0.5); } .price-card--popular .price-cta { color: #fff; background: linear-gradient(100deg, var(--c-electric), var(--c-violet)); border-color: transparent; box-shadow: 0 12px 30px -12px rgba(46,125,255,0.7), 0 0 0 1px rgba(255,255,255,0.08) inset; } .price-card--popular .price-cta:hover { box-shadow: 0 18px 38px -12px rgba(139,92,246,0.9), 0 0 0 1px rgba(255,255,255,0.18) inset; } /* "View plans" CTA on the homepage service cards (accessible in both themes) */ .card-cta--plans { color: var(--text-strong); background: var(--surface-2); border: 1px solid var(--border-strong); box-shadow: none; } .card-cta--plans:hover { box-shadow: 0 14px 30px -14px rgba(124, 58, 237, 0.55); } @media (prefers-reduced-motion: reduce) { .price-card { transition: none !important; } body { transition: none !important; } }