:root {
--c-acc: #a855f7;
--c-acc-dark: #7e22ce;
--c-dark: #0a0612;
--c-bg: #110a1c;
--c-bg-soft: #1a1029;
--c-border: rgba(168,85,247,.18);
--c-text: #f0e9ff;
--c-muted: rgba(255,255,255,.6);
--rhythm: 80px;
--radius: 14px;
--shadow: 0 0 32px rgba(168,85,247,.18);
--ff-h: 'Manrope', system-ui, -apple-system, sans-serif;
--ff-b: 'Manrope', system-ui, -apple-system, sans-serif;
--hue-shift: 0deg;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--ff-b);
background: var(--c-bg);
color: var(--c-text);
line-height: 1.6;
font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--ff-h);
color: var(--c-text);
margin: 20px 0 10px 0;
}
h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
p { margin-bottom: 15px; }
a {
color: var(--c-acc);
text-decoration: none;
transition: opacity 0.2s;
}
a:hover { opacity: 0.8; }
.wrap {
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
}
.section {
padding: var(--rhythm) 0;
background: var(--c-bg);
}
.section:nth-child(even) {
background: var(--c-bg-soft);
}
.button {
display: inline-block;
padding: 12px 24px;
border: none;
border-radius: var(--radius);
cursor: pointer;
text-decoration: none;
font-size: 1em;
transition: all 0.3s;
font-family: var(--ff-b);
}
.button-acc {
background: var(--c-acc);
color: #fff;
}
.button-acc:hover {
background: var(--c-acc-dark);
}
.button-outline {
border: 1px solid var(--c-acc);
color: var(--c-acc);
background: transparent;
}
.button-outline:hover {
background: rgba(168,85,247,.1);
}
header {
background: var(--c-dark);
padding: 20px 0;
border-bottom: 1px solid var(--c-border);
}
.header-logo {
font-family: var(--ff-h);
font-size: 1.3em;
font-weight: 700;
color: var(--c-acc);
}
.header-nav {
display: flex;
gap: 30px;
justify-content: center;
margin-top: 15px;
}
.header-link {
color: var(--c-muted);
transition: color 0.2s;
}
.header-link:hover {
color: var(--c-acc);
}
.header-burger {
display: none;
background: none;
border: none;
color: var(--c-acc);
font-size: 1.5em;
cursor: pointer;
}
@media (max-width: 768px) {
.header-nav { display: none; }
.header-nav.active { display: flex; flex-direction: column; gap: 15px; }
.header-burger { display: block; }
}
.hero {
text-align: center;
background: linear-gradient(135deg, var(--c-acc-dark), var(--c-acc));
}
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero p { color: rgba(255,255,255,.9); font-size: 1.1em; margin-bottom: 30px; }
.hero-cta {
margin: 30px 0;
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.hero-chips {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-top: 30px;
}
.chip {
background: rgba(255,255,255,.2);
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9em;
color: #fff;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin: 20px 0;
}
.stat {
text-align: center;
padding: 20px;
background: var(--c-bg-soft);
border-radius: var(--radius);
}
.stat-n {
display: block;
font-size: 2em;
font-weight: 700;
color: var(--c-acc);
margin-bottom: 10px;
}
.stat-l {
display: block;
font-size: 0.95em;
color: var(--c-muted);
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background: var(--c-bg);
border-radius: var(--radius);
overflow: hidden;
}
.comparison-table th {
background: var(--c-dark);
padding: 15px;
text-align: left;
border-bottom: 2px solid var(--c-border);
}
.comparison-table td {
padding: 15px;
border-bottom: 1px solid var(--c-border);
}
.comparison-table tbody tr:hover {
background: var(--c-bg-soft);
}
.top-badge {
display: inline-block;
background: var(--c-acc);
color: #fff;
padding: 4px 10px;
border-radius: 4px;
font-size: 0.8em;
margin-left: 10px;
}
.featured {
background: var(--c-bg-soft);
padding: 30px;
border-radius: var(--radius);
border: 1px solid var(--c-border);
}
.featured-badge {
display: inline-block;
background: var(--c-acc);
color: #fff;
padding: 6px 12px;
border-radius: 4px;
font-size: 0.85em;
margin-bottom: 15px;
}
.featured h3 {
margin-top: 10px;
}
.featured ul {
margin: 15px 0;
list-style: none;
padding-left: 0;
}
.featured li {
margin: 8px 0;
padding-left: 25px;
position: relative;
}
.featured li:before {
content: "✓";
position: absolute;
left: 0;
color: var(--c-acc);
}
.method-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 20px 0;
}
.method-card {
background: var(--c-bg-soft);
padding: 20px;
border-radius: var(--radius);
border:1px solid var(--c-border);
text-align: center;
}
.method-num {
display: inline-block;
width: 40px;
height: 40px;
background: var(--c-acc);
color: #fff;
border-radius: 50%;
line-height: 40px;
font-weight: 700;
margin-bottom: 10px;
}
.faq-list {
max-width: 700px;
margin: 20px auto;
}
.faq-item {
background: var(--c-bg-soft);
margin-bottom: 10px;
border-radius: var(--radius);
border: 1px solid var(--c-border);
}
.faq-q {
padding: 15px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
}
.faq-q:hover {
background: var(--c-bg);
}
.faq-a {
max-height: 0;
overflow: hidden;
padding: 0 15px;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.active .faq-a {
max-height: 500px;
padding: 15px;
}
.guide-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin: 20px 0;
}
.guide-card {
background: var(--c-bg-soft);
padding: 20px;
border-radius: var(--radius);
border: 1px solid var(--c-border);
}
.guide-card h3 {
margin-top: 0;
}
.guide-card a {
color: var(--c-text);
text-decoration: none;
}
.guide-card a:hover {
color: var(--c-acc);
}
.byline {
font-size: 0.9em;
color: var(--c-muted);
margin: 10px 0 20px 0;
}
.byline i {
margin-right: 5px;
}
.brand-header {
text-align: center;
padding: 20px;
background: var(--c-bg-soft);
border-radius: var(--radius);
margin: 20px 0;
border: 1px solid var(--c-border);
}
.brand-header-logo {
width: 64px;
height: 64px;
display: inline-block;
margin-bottom: 10px;
}
.brand-header-cap {
font-size: 0.95em;
color: var(--c-muted);
margin: 10px 0;
}
.inline-logo {
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: middle;
}
.rating-section {
text-align: center;
margin: 30px 0;
}
.large-rating {
font-size: 1.8em;
color: var(--c-acc);
margin: 15px 0;
}
.details-table, .scoring-table {
width: 100%;
margin: 20px 0;
border-collapse: collapse;
background: var(--c-bg-soft);
border-radius: var(--radius);
overflow: hidden;
}
.details-table th, .details-table td,
.scoring-table th, .scoring-table td {
padding: 12px 15px;
border-bottom: 1px solid var(--c-border);
text-align: left;
}
.details-table tr:last-child td,
.scoring-table tr:last-child td {
border-bottom: none;
}
.alternatives-section {
margin-top: 30px;
}
.alt-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 20px 0;
}
.alt-card {
background: var(--c-bg-soft);
padding: 20px;
border-radius: var(--radius);
border: 1px solid var(--c-border);
}
.alt-card h4 {
margin-top: 0;
}
.risk-strip {
background: var(--c-dark);
padding: 20px;
border-left: 4px solid var(--c-acc);
border-radius: var(--radius);
color: var(--c-text);
}
footer {
background: var(--c-dark);
padding: 40px 0 20px 0;
border-top: 1px solid var(--c-border);
margin-top: 60px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.footer-grid h4, .footer-grid h5 {
margin-top: 0;
color: var(--c-acc);
}
.footer-grid ul li {
margin: 8px 0;
}
.footer-grid ul a {
color: var(--c-muted);
}
.footer-grid ul a:hover {
color: var(--c-acc);
}
.footer-bottom {
border-top: 1px solid var(--c-border);
padding-top: 20px;
margin-top: 20px;
text-align: center;
font-size: 0.9em;
color: var(--c-muted);
}
.cookie-banner {
position: fixed;
bottom: 20px;
right: 20px;
background: var(--c-bg-soft);
border: 1px solid var(--c-border);
border-radius: var(--radius);
padding: 20px;
max-width: 360px;
box-shadow: var(--shadow);
z-index: 1000;
}
.cookie-banner h3 {
margin: 0 0 10px 0;
font-size: 1.1em;
}
.cookie-banner p {
margin: 10px 0;
font-size: 0.9em;
}
.cookie-buttons {
display: flex;
gap: 10px;
margin-top: 15px;
flex-wrap: wrap;
}
.button-accept, .button-reject, .button-settings, .button-save {
padding: 10px 15px;
font-size: 0.9em;
border: none;
border-radius: var(--radius);
cursor: pointer;
transition: all 0.2s;
}
.button-accept {
background: var(--c-acc);
color: #fff;
flex: 1;
}
.button-accept:hover {
background: var(--c-acc-dark);
}
.button-reject {
background: transparent;
border: 1px solid var(--c-border);
color: var(--c-text);
flex: 1;
}
.button-reject:hover {
background: var(--c-dark);
}
.button-settings, .button-save {
background: var(--c-dark);
border: 1px solid var(--c-border);
color: var(--c-text);
}
.button-settings:hover, .button-save:hover {
background: var(--c-bg-soft);
}
.cookie-reopen {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background: var(--c-acc);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 1.2em;
display: none;
z-index: 999;
}
.cookie-reopen:hover {
background: var(--c-acc-dark);
}
.cookie-prefs label {
display: block;
margin: 10px 0;
color: var(--c-text);
}
.cookie-prefs input {
margin-right: 10px;
cursor: pointer;
}
@media (max-width: 768px) {
h1 { font-size: 1.8em; }
h2 { font-size: 1.4em; }
.hero { padding: 40px 20px; }
.hero-cta { flex-direction: column; }
.button { width: 100%; text-align: center; }
.comparison-table { font-size: 0.9em; }
.comparison-table th, .comparison-table td { padding: 10px 8px; }
.footer-grid { grid-template-columns: 1fr; }
.cookie-banner { max-width: 90%; left: 5%; right: 5%; }
}