/* From balloon_autocashout_article.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
line-height: 1.8;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.9);
text-decoration: none;
}
.breadcrumbs {
padding: 30px 0 20px;
font-size: 14px;
color: rgba(255,255,255,0.6);
}
.breadcrumbs a {
color: rgba(255,255,255,0.6);
text-decoration: none;
}
.article-header {
padding: 40px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.article-category {
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
padding: 5px 15px;
border-radius: 15px;
font-size: 13px;
font-weight: bold;
display: inline-block;
margin-bottom: 20px;
}
.article-title {
font-size: 48px;
margin-bottom: 20px;
line-height: 1.2;
}
.article-meta {
display: flex;
gap: 30px;
color: rgba(255,255,255,0.6);
font-size: 15px;
}
.article-content {
padding: 60px 0;
}
.article-content h2 {
font-size: 32px;
margin: 50px 0 25px;
color: #fff;
}
.article-content h3 {
font-size: 24px;
margin: 40px 0 20px;
color: var(--accent);
}
.article-content p {
margin-bottom: 25px;
color: rgba(255,255,255,0.85);
font-size: 18px;
}
.article-content ul {
margin-bottom: 25px;
padding-left: 30px;
}
.article-content li {
margin-bottom: 12px;
color: rgba(255,255,255,0.85);
}
.highlight-box {
background: rgba(78, 205, 196, 0.1);
border-left: 4px solid var(--secondary);
padding: 25px;
margin: 35px 0;
border-radius: 10px;
}
.highlight-box h4 {
color: var(--secondary);
margin-bottom: 15px;
font-size: 20px;
}
.warning-box {
background: rgba(255, 107, 107, 0.1);
border-left: 4px solid var(--primary);
padding: 25px;
margin: 35px 0;
border-radius: 10px;
}
.warning-box h4 {
color: var(--primary);
margin-bottom: 15px;
font-size: 20px;
}
.strategy-card {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 30px;
margin: 30px 0;
border-left: 4px solid var(--accent);
}
.strategy-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.strategy-title {
font-size: 24px;
color: var(--accent);
}
.risk-badge {
padding: 8px 15px;
border-radius: 15px;
font-size: 13px;
font-weight: bold;
}
.risk-low {
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
}
.risk-medium {
background: rgba(255, 230, 109, 0.2);
color: var(--accent);
}
.risk-high {
background: rgba(255, 107, 107, 0.2);
color: var(--primary);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin: 20px 0;
}
.stat-box {
background: rgba(255,255,255,0.03);
padding: 15px;
border-radius: 12px;
text-align: center;
}
.stat-label {
font-size: 13px;
color: rgba(255,255,255,0.6);
margin-bottom: 5px;
}
.stat-value {
font-size: 24px;
font-weight: bold;
color: var(--secondary);
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
background: rgba(255,255,255,0.03);
border-radius: 15px;
overflow: hidden;
}
.comparison-table th,
.comparison-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.comparison-table th {
background: rgba(255,255,255,0.08);
font-weight: bold;
color: var(--accent);
}
.scenario-box {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 25px;
margin: 25px 0;
}
.scenario-box h4 {
color: var(--secondary);
margin-bottom: 15px;
}
.vs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 30px 0;
}
.vs-card {
background: rgba(255,255,255,0.03);
padding: 25px;
border-radius: 15px;
}
.vs-card.manual {
border-left: 3px solid var(--primary);
}
.vs-card.auto {
border-left: 3px solid var(--secondary);
}
.vs-card h4 {
margin-bottom: 15px;
}
.vs-card.manual h4 {
color: var(--primary);
}
.vs-card.auto h4 {
color: var(--secondary);
}
.related-articles {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 40px;
margin: 60px 0;
}
.related-articles h3 {
margin-bottom: 25px;
font-size: 28px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.related-card {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 15px;
text-decoration: none;
color: #fff;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s;
}
.related-card:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-3px);
}
.related-card h4 {
margin-bottom: 10px;
font-size: 18px;
}
.related-card p {
font-size: 14px;
color: rgba(255,255,255,0.6);
margin: 0;
}
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 80px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 768px) {
.article-title {
font-size: 32px;
}
.vs-grid,
.stats-grid {
grid-template-columns: 1fr;
}
}
/* From balloon_bankroll_article.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
line-height: 1.8;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.9);
text-decoration: none;
}
.breadcrumbs {
padding: 30px 0 20px;
font-size: 14px;
color: rgba(255,255,255,0.6);
}
.breadcrumbs a {
color: rgba(255,255,255,0.6);
text-decoration: none;
}
.article-header {
padding: 40px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.article-category {
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
padding: 5px 15px;
border-radius: 15px;
font-size: 13px;
font-weight: bold;
display: inline-block;
margin-bottom: 20px;
}
.article-title {
font-size: 48px;
margin-bottom: 20px;
line-height: 1.2;
}
.article-meta {
display: flex;
gap: 30px;
color: rgba(255,255,255,0.6);
font-size: 15px;
}
.article-content {
padding: 60px 0;
}
.article-content h2 {
font-size: 32px;
margin: 50px 0 25px;
color: #fff;
}
.article-content h3 {
font-size: 24px;
margin: 40px 0 20px;
color: var(--accent);
}
.article-content p {
margin-bottom: 25px;
color: rgba(255,255,255,0.85);
font-size: 18px;
}
.article-content ul, .article-content ol {
margin-bottom: 25px;
padding-left: 30px;
}
.article-content li {
margin-bottom: 12px;
color: rgba(255,255,255,0.85);
}
.highlight-box {
background: rgba(78, 205, 196, 0.1);
border-left: 4px solid var(--secondary);
padding: 25px;
margin: 35px 0;
border-radius: 10px;
}
.highlight-box h4 {
color: var(--secondary);
margin-bottom: 15px;
font-size: 20px;
}
.warning-box {
background: rgba(255, 107, 107, 0.1);
border-left: 4px solid var(--primary);
padding: 25px;
margin: 35px 0;
border-radius: 10px;
}
.warning-box h4 {
color: var(--primary);
margin-bottom: 15px;
font-size: 20px;
}
.calculator-box {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 30px;
margin: 40px 0;
}
.calculator-box h4 {
color: var(--accent);
margin-bottom: 20px;
font-size: 22px;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 8px;
color: rgba(255,255,255,0.8);
font-weight: 600;
}
.input-group input, .input-group select {
width: 100%;
padding: 12px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.05);
color: #fff;
font-size: 16px;
}
.results-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 25px;
}
.result-box {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 15px;
text-align: center;
}
.result-label {
font-size: 14px;
color: rgba(255,255,255,0.6);
margin-bottom: 8px;
}
.result-value {
font-size: 28px;
font-weight: bold;
color: var(--accent);
}
.example-box {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 25px;
margin: 30px 0;
}
.example-box h4 {
color: var(--accent);
margin-bottom: 15px;
}
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
background: rgba(255,255,255,0.03);
border-radius: 15px;
overflow: hidden;
}
th, td {
padding: 15px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
th {
background: rgba(255,255,255,0.05);
font-weight: bold;
color: var(--accent);
}
.checklist {
background: rgba(78, 205, 196, 0.05);
border-radius: 15px;
padding: 25px;
margin: 30px 0;
}
.checklist h4 {
color: var(--secondary);
margin-bottom: 20px;
}
.checklist-item {
display: flex;
gap: 15px;
margin-bottom: 15px;
padding: 15px;
background: rgba(255,255,255,0.03);
border-radius: 10px;
}
.check-icon {
color: var(--secondary);
font-size: 24px;
flex-shrink: 0;
}
.related-articles {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 40px;
margin: 60px 0;
}
.related-articles h3 {
margin-bottom: 25px;
font-size: 28px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.related-card {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 15px;
text-decoration: none;
color: #fff;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s;
}
.related-card:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-3px);
}
.related-card h4 {
margin-bottom: 10px;
font-size: 18px;
}
.related-card p {
font-size: 14px;
color: rgba(255,255,255,0.6);
margin: 0;
}
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 80px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 768px) {
.article-title {
font-size: 32px;
}
.results-grid {
grid-template-columns: 1fr;
}
}
/* From balloon_blog_page (1).html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--dark: #1A1A2E;
--light: #F7F7F7;
--gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-3: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
min-height: 100vh;
}
/* Header */
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.9);
text-decoration: none;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--accent);
}
/* Hero */
.hero {
padding: 80px 0 40px;
text-align: center;
}
.hero h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero p {
font-size: 20px;
color: rgba(255,255,255,0.8);
max-width: 600px;
margin: 0 auto 40px;
}
/* Category Filter */
.category-filter {
padding: 30px 0;
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.category-btn {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.8);
padding: 10px 25px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s;
}
.category-btn:hover,
.category-btn.active {
background: var(--gradient-2);
color: #fff;
border-color: transparent;
}
/* Featured Article */
.featured-article {
margin: 40px 0;
background: rgba(255,255,255,0.05);
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.featured-image {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
font-size: 120px;
}
.featured-content {
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.featured-badge {
background: var(--gradient-2);
color: #fff;
padding: 5px 15px;
border-radius: 15px;
font-size: 12px;
font-weight: bold;
display: inline-block;
margin-bottom: 20px;
width: fit-content;
}
.featured-content h2 {
font-size: 32px;
margin-bottom: 15px;
}
.featured-excerpt {
color: rgba(255,255,255,0.8);
line-height: 1.6;
margin-bottom: 20px;
}
.article-meta {
display: flex;
gap: 20px;
color: rgba(255,255,255,0.6);
font-size: 14px;
margin-bottom: 20px;
}
.read-more-btn {
background: var(--gradient-2);
color: #fff;
padding: 12px 30px;
border-radius: 25px;
text-decoration: none;
display: inline-block;
width: fit-content;
transition: transform 0.3s;
}
.read-more-btn:hover {
transform: translateY(-2px);
}
/* Blog Grid */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
padding: 40px 0;
}
.blog-card {
background: rgba(255,255,255,0.05);
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
transition: transform 0.3s;
}
.blog-card:hover {
transform: translateY(-5px);
background: rgba(255,255,255,0.08);
}
.blog-image {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
height: 200px;
display: flex;
align-items: center;
justify-content: center;
font-size: 64px;
}
.blog-content {
padding: 25px;
}
.blog-category {
background: rgba(78, 205, 196, 0.2);
color: #4ECDC4;
padding: 5px 12px;
border-radius: 12px;
font-size: 12px;
display: inline-block;
margin-bottom: 15px;
}
.blog-title {
font-size: 22px;
margin-bottom: 10px;
color: #fff;
}
.blog-excerpt {
color: rgba(255,255,255,0.7);
line-height: 1.6;
margin-bottom: 15px;
font-size: 15px;
}
.blog-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.blog-date {
color: rgba(255,255,255,0.5);
font-size: 14px;
}
.blog-read-time {
color: rgba(255,255,255,0.5);
font-size: 14px;
}
/* Sidebar */
.content-wrapper {
display: grid;
grid-template-columns: 1fr 350px;
gap: 40px;
padding: 40px 0;
}
.sidebar {
position: sticky;
top: 100px;
height: fit-content;
}
.sidebar-widget {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 25px;
border: 1px solid rgba(255,255,255,0.1);
margin-bottom: 20px;
}
.sidebar-widget h3 {
font-size: 20px;
margin-bottom: 20px;
color: var(--accent);
}
.popular-post {
padding: 15px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.popular-post:last-child {
border-bottom: none;
}
.popular-post h4 {
font-size: 16px;
margin-bottom: 5px;
color: #fff;
}
.popular-post p {
font-size: 13px;
color: rgba(255,255,255,0.6);
}
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag {
background: rgba(255,255,255,0.05);
padding: 5px 15px;
border-radius: 15px;
font-size: 13px;
color: rgba(255,255,255,0.8);
text-decoration: none;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s;
}
.tag:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
/* Newsletter */
.newsletter-widget {
background: var(--gradient-2);
text-align: center;
}
.newsletter-widget input {
width: 100%;
padding: 12px;
border-radius: 10px;
border: none;
margin-bottom: 10px;
background: rgba(255,255,255,0.2);
color: #fff;
}
.newsletter-widget input::placeholder {
color: rgba(255,255,255,0.7);
}
.newsletter-widget button {
width: 100%;
padding: 12px;
border-radius: 10px;
border: none;
background: rgba(255,255,255,0.3);
color: #fff;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
}
.newsletter-widget button:hover {
background: rgba(255,255,255,0.4);
}
/* Responsible Gaming Warning */
.warning-banner {
background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(255, 142, 83, 0.1) 100%);
border: 2px solid rgba(255, 107, 107, 0.3);
border-radius: 15px;
padding: 20px;
margin: 40px 0;
text-align: center;
}
.warning-banner h3 {
color: #FF6B6B;
margin-bottom: 10px;
}
.warning-banner p {
color: rgba(255,255,255,0.8);
line-height: 1.6;
}
/* Footer */
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 80px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 968px) {
.content-wrapper {
grid-template-columns: 1fr;
}
.sidebar {
position: static;
}
.featured-article {
grid-template-columns: 1fr;
}
.blog-grid {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 32px;
}
}
/* From balloon_blog_page.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--dark: #1A1A2E;
--light: #F7F7F7;
--gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-3: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
min-height: 100vh;
}
/* Header */
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.9);
text-decoration: none;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--accent);
}
/* Hero */
.hero {
padding: 80px 0 40px;
text-align: center;
}
.hero h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero p {
font-size: 20px;
color: rgba(255,255,255,0.8);
max-width: 600px;
margin: 0 auto 40px;
}
/* Category Filter */
.category-filter {
padding: 30px 0;
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.category-btn {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.8);
padding: 10px 25px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s;
}
.category-btn:hover,
.category-btn.active {
background: var(--gradient-2);
color: #fff;
border-color: transparent;
}
/* Featured Article */
.featured-article {
margin: 40px 0;
background: rgba(255,255,255,0.05);
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.featured-image {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
font-size: 120px;
}
.featured-content {
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.featured-badge {
background: var(--gradient-2);
color: #fff;
padding: 5px 15px;
border-radius: 15px;
font-size: 12px;
font-weight: bold;
display: inline-block;
margin-bottom: 20px;
width: fit-content;
}
.featured-content h2 {
font-size: 32px;
margin-bottom: 15px;
}
.featured-excerpt {
color: rgba(255,255,255,0.8);
line-height: 1.6;
margin-bottom: 20px;
}
.article-meta {
display: flex;
gap: 20px;
color: rgba(255,255,255,0.6);
font-size: 14px;
margin-bottom: 20px;
}
.read-more-btn {
background: var(--gradient-2);
color: #fff;
padding: 12px 30px;
border-radius: 25px;
text-decoration: none;
display: inline-block;
width: fit-content;
transition: transform 0.3s;
}
.read-more-btn:hover {
transform: translateY(-2px);
}
/* Blog Grid */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
padding: 40px 0;
}
.blog-card {
background: rgba(255,255,255,0.05);
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
transition: transform 0.3s;
}
.blog-card:hover {
transform: translateY(-5px);
background: rgba(255,255,255,0.08);
}
.blog-image {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
height: 200px;
display: flex;
align-items: center;
justify-content: center;
font-size: 64px;
}
.blog-content {
padding: 25px;
}
.blog-category {
background: rgba(78, 205, 196, 0.2);
color: #4ECDC4;
padding: 5px 12px;
border-radius: 12px;
font-size: 12px;
display: inline-block;
margin-bottom: 15px;
}
.blog-title {
font-size: 22px;
margin-bottom: 10px;
color: #fff;
}
.blog-excerpt {
color: rgba(255,255,255,0.7);
line-height: 1.6;
margin-bottom: 15px;
font-size: 15px;
}
.blog-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.blog-date {
color: rgba(255,255,255,0.5);
font-size: 14px;
}
.blog-read-time {
color: rgba(255,255,255,0.5);
font-size: 14px;
}
/* Sidebar */
.content-wrapper {
display: grid;
grid-template-columns: 1fr 350px;
gap: 40px;
padding: 40px 0;
}
.sidebar {
position: sticky;
top: 100px;
height: fit-content;
}
.sidebar-widget {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 25px;
border: 1px solid rgba(255,255,255,0.1);
margin-bottom: 20px;
}
.sidebar-widget h3 {
font-size: 20px;
margin-bottom: 20px;
color: var(--accent);
}
.popular-post {
padding: 15px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.popular-post:last-child {
border-bottom: none;
}
.popular-post h4 {
font-size: 16px;
margin-bottom: 5px;
color: #fff;
}
.popular-post p {
font-size: 13px;
color: rgba(255,255,255,0.6);
}
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag {
background: rgba(255,255,255,0.05);
padding: 5px 15px;
border-radius: 15px;
font-size: 13px;
color: rgba(255,255,255,0.8);
text-decoration: none;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s;
}
.tag:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
/* Newsletter */
.newsletter-widget {
background: var(--gradient-2);
text-align: center;
}
.newsletter-widget input {
width: 100%;
padding: 12px;
border-radius: 10px;
border: none;
margin-bottom: 10px;
background: rgba(255,255,255,0.2);
color: #fff;
}
.newsletter-widget input::placeholder {
color: rgba(255,255,255,0.7);
}
.newsletter-widget button {
width: 100%;
padding: 12px;
border-radius: 10px;
border: none;
background: rgba(255,255,255,0.3);
color: #fff;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
}
.newsletter-widget button:hover {
background: rgba(255,255,255,0.4);
}
/* Responsible Gaming Warning */
.warning-banner {
background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(255, 142, 83, 0.1) 100%);
border: 2px solid rgba(255, 107, 107, 0.3);
border-radius: 15px;
padding: 20px;
margin: 40px 0;
text-align: center;
}
.warning-banner h3 {
color: #FF6B6B;
margin-bottom: 10px;
}
.warning-banner p {
color: rgba(255,255,255,0.8);
line-height: 1.6;
}
/* Footer */
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 80px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 968px) {
.content-wrapper {
grid-template-columns: 1fr;
}
.sidebar {
position: static;
}
.featured-article {
grid-template-columns: 1fr;
}
.blog-grid {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 32px;
}
}
/* From balloon_casinos_page.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--dark: #1A1A2E;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-3: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.9);
text-decoration: none;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--accent);
}
/* Hero */
.hero {
padding: 80px 0 40px;
text-align: center;
}
.hero h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero .subtitle {
font-size: 20px;
color: rgba(255,255,255,0.8);
max-width: 700px;
margin: 0 auto 30px;
}
/* Filter Bar */
.filter-bar {
background: rgba(255,255,255,0.05);
border-radius: 15px;
padding: 20px;
margin: 30px 0;
display: flex;
gap: 20px;
flex-wrap: wrap;
align-items: center;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.filter-label {
font-size: 14px;
color: rgba(255,255,255,0.7);
}
.filter-select {
padding: 10px 15px;
border-radius: 10px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 14px;
}
/* Casino Card */
.casino-list {
display: flex;
flex-direction: column;
gap: 30px;
padding: 40px 0;
}
.casino-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 25px;
overflow: hidden;
transition: all 0.3s;
}
.casino-card:hover {
transform: translateY(-5px);
background: rgba(255,255,255,0.08);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.casino-header {
background: rgba(255,255,255,0.03);
padding: 25px 30px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.casino-rank {
background: var(--gradient-2);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
}
.casino-name-section {
flex: 1;
margin-left: 20px;
}
.casino-name {
font-size: 28px;
margin-bottom: 5px;
}
.casino-tagline {
color: rgba(255,255,255,0.6);
font-size: 14px;
}
.casino-rating {
text-align: right;
}
.rating-stars {
font-size: 20px;
color: #FFD700;
margin-bottom: 5px;
}
.rating-text {
font-size: 14px;
color: rgba(255,255,255,0.6);
}
.casino-body {
padding: 30px;
}
.casino-grid {
display: grid;
grid-template-columns: 200px 1fr 250px;
gap: 30px;
align-items: start;
}
.casino-logo-area {
background: #fff;
border-radius: 15px;
padding: 30px;
text-align: center;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
}
.casino-logo-text {
font-size: 24px;
font-weight: bold;
color: var(--dark);
}
.casino-details {
display: flex;
flex-direction: column;
gap: 20px;
}
.bonus-highlight {
background: var(--gradient-2);
border-radius: 15px;
padding: 20px;
text-align: center;
}
.bonus-amount {
font-size: 36px;
font-weight: bold;
margin-bottom: 5px;
}
.bonus-description {
font-size: 14px;
opacity: 0.9;
}
.casino-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.feature-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
background: rgba(255,255,255,0.03);
border-radius: 10px;
}
.feature-icon {
font-size: 20px;
}
.feature-text {
font-size: 14px;
color: rgba(255,255,255,0.8);
}
.casino-action {
display: flex;
flex-direction: column;
gap: 15px;
}
.cta-button {
background: var(--gradient-2);
color: #fff;
padding: 15px 30px;
border-radius: 15px;
text-decoration: none;
text-align: center;
font-weight: bold;
font-size: 16px;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(245, 87, 108, 0.3);
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(245, 87, 108, 0.4);
}
.review-button {
background: rgba(255,255,255,0.05);
color: #fff;
padding: 12px 30px;
border-radius: 15px;
text-decoration: none;
text-align: center;
font-weight: 500;
border: 1px solid rgba(255,255,255,0.2);
transition: all 0.3s;
}
.review-button:hover {
background: rgba(255,255,255,0.1);
}
.trust-badges {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.badge {
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
padding: 5px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
/* Detailed Review Section */
.detailed-review {
background: rgba(255,255,255,0.03);
border-top: 1px solid rgba(255,255,255,0.1);
padding: 30px;
display: none;
}
.detailed-review.active {
display: block;
}
.review-tabs {
display: flex;
gap: 15px;
margin-bottom: 25px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.review-tab {
padding: 10px 20px;
cursor: pointer;
color: rgba(255,255,255,0.6);
border-bottom: 2px solid transparent;
transition: all 0.3s;
}
.review-tab.active {
color: #fff;
border-bottom-color: var(--accent);
}
.review-content {
display: none;
}
.review-content.active {
display: block;
}
.pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
.pros, .cons {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 20px;
}
.pros {
border-left: 3px solid var(--secondary);
}
.cons {
border-left: 3px solid var(--primary);
}
.pros h4 {
color: var(--secondary);
margin-bottom: 15px;
}
.cons h4 {
color: var(--primary);
margin-bottom: 15px;
}
.pros ul, .cons ul {
list-style: none;
}
.pros li, .cons li {
padding: 8px 0;
padding-left: 25px;
position: relative;
color: rgba(255,255,255,0.8);
}
.pros li:before {
content: "✓";
position: absolute;
left: 0;
color: var(--secondary);
}
.cons li:before {
content: "✗";
position: absolute;
left: 0;
color: var(--primary);
}
.payment-methods {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
}
.payment-method {
background: rgba(255,255,255,0.05);
padding: 15px;
border-radius: 10px;
text-align: center;
border: 1px solid rgba(255,255,255,0.1);
}
.payment-icon {
font-size: 32px;
margin-bottom: 8px;
}
.payment-name {
font-size: 13px;
color: rgba(255,255,255,0.8);
}
.toggle-review {
margin-top: 20px;
text-align: center;
padding: 15px;
background: rgba(255,255,255,0.03);
border-radius: 10px;
cursor: pointer;
color: var(--accent);
font-weight: 500;
transition: all 0.3s;
}
.toggle-review:hover {
background: rgba(255,255,255,0.05);
}
/* Comparison Table */
.comparison-section {
padding: 60px 0;
background: rgba(0,0,0,0.2);
}
.section-header {
text-align: center;
margin-bottom: 40px;
}
.section-header h2 {
font-size: 36px;
margin-bottom: 15px;
}
.comparison-table {
background: rgba(255,255,255,0.05);
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
}
.comparison-table table {
width: 100%;
border-collapse: collapse;
}
.comparison-table th,
.comparison-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.comparison-table thead {
background: rgba(255,255,255,0.08);
}
.comparison-table th {
font-weight: bold;
color: #fff;
text-transform: uppercase;
font-size: 13px;
}
.comparison-table td {
color: rgba(255,255,255,0.8);
}
/* Disclaimer */
.disclaimer {
background: rgba(255, 107, 107, 0.1);
border: 2px solid rgba(255, 107, 107, 0.3);
border-radius: 20px;
padding: 30px;
margin: 40px 0;
}
.disclaimer h3 {
color: #FF6B6B;
margin-bottom: 15px;
}
.disclaimer p {
color: rgba(255,255,255,0.9);
line-height: 1.8;
margin-bottom: 10px;
}
/* Footer */
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 80px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 968px) {
.casino-grid {
grid-template-columns: 1fr;
}
.pros-cons {
grid-template-columns: 1fr;
}
.casino-features {
grid-template-columns: 1fr;
}
}
/* From balloon_comparison_article (1).html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
line-height: 1.8;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.9);
text-decoration: none;
}
.breadcrumbs {
padding: 30px 0 20px;
font-size: 14px;
color: rgba(255,255,255,0.6);
}
.breadcrumbs a {
color: rgba(255,255,255,0.6);
text-decoration: none;
}
.article-header {
padding: 40px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.article-category {
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
padding: 5px 15px;
border-radius: 15px;
font-size: 13px;
font-weight: bold;
display: inline-block;
margin-bottom: 20px;
}
.article-title {
font-size: 48px;
margin-bottom: 20px;
line-height: 1.2;
}
.article-meta {
display: flex;
gap: 30px;
color: rgba(255,255,255,0.6);
font-size: 15px;
}
.article-content {
padding: 60px 0;
}
.article-content h2 {
font-size: 32px;
margin: 50px 0 25px;
color: #fff;
}
.article-content h3 {
font-size: 24px;
margin: 40px 0 20px;
color: var(--accent);
}
.article-content p {
margin-bottom: 25px;
color: rgba(255,255,255,0.85);
font-size: 18px;
}
.article-content ul {
margin-bottom: 25px;
padding-left: 30px;
}
.article-content li {
margin-bottom: 12px;
color: rgba(255,255,255,0.85);
}
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin: 40px 0;
}
.game-card {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 30px;
border: 2px solid rgba(255,255,255,0.1);
}
.game-card.balloon {
border-color: rgba(240, 147, 251, 0.4);
}
.game-card.aviator {
border-color: rgba(78, 205, 196, 0.4);
}
.game-title {
font-size: 28px;
margin-bottom: 20px;
text-align: center;
}
.game-icon {
font-size: 64px;
text-align: center;
margin-bottom: 20px;
}
.stat-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.stat-label {
color: rgba(255,255,255,0.7);
}
.stat-value {
font-weight: bold;
color: #fff;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 40px 0;
background: rgba(255,255,255,0.03);
border-radius: 15px;
overflow: hidden;
}
.comparison-table th,
.comparison-table td {
padding: 18px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.comparison-table thead {
background: rgba(255,255,255,0.08);
}
.comparison-table th {
font-weight: bold;
color: var(--accent);
font-size: 15px;
}
.comparison-table td {
color: rgba(255,255,255,0.85);
}
.winner-badge {
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
margin-left: 8px;
}
.highlight-box {
background: rgba(78, 205, 196, 0.1);
border-left: 4px solid var(--secondary);
padding: 25px;
margin: 35px 0;
border-radius: 10px;
}
.highlight-box h4 {
color: var(--secondary);
margin-bottom: 15px;
font-size: 20px;
}
.pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 30px 0;
}
.pros, .cons {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 25px;
}
.pros {
border-left: 3px solid var(--secondary);
}
.cons {
border-left: 3px solid var(--primary);
}
.pros h4 {
color: var(--secondary);
margin-bottom: 15px;
}
.cons h4 {
color: var(--primary);
margin-bottom: 15px;
}
.pros ul, .cons ul {
list-style: none;
padding-left: 0;
}
.pros li, .cons li {
padding: 8px 0;
padding-left: 25px;
position: relative;
}
.pros li:before {
content: "✓";
position: absolute;
left: 0;
color: var(--secondary);
font-weight: bold;
}
.cons li:before {
content: "✗";
position: absolute;
left: 0;
color: var(--primary);
font-weight: bold;
}
.verdict-box {
background: var(--gradient-2);
border-radius: 20px;
padding: 35px;
margin: 40px 0;
text-align: center;
}
.verdict-box h3 {
font-size: 28px;
margin-bottom: 20px;
margin-top: 0;
}
.verdict-box p {
font-size: 18px;
line-height: 1.7;
}
.score-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin: 40px 0;
}
.score-card {
background: rgba(255,255,255,0.05);
border-radius: 15px;
padding: 20px;
text-align: center;
}
.score-category {
font-size: 14px;
color: rgba(255,255,255,0.7);
margin-bottom: 10px;
}
.score-value {
font-size: 32px;
font-weight: bold;
color: var(--accent);
}
.related-articles {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 40px;
margin: 60px 0;
}
.related-articles h3 {
margin-bottom: 25px;
font-size: 28px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.related-card {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 15px;
text-decoration: none;
color: #fff;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s;
}
.related-card:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-3px);
}
.related-card h4 {
margin-bottom: 10px;
font-size: 18px;
}
.related-card p {
font-size: 14px;
color: rgba(255,255,255,0.6);
margin: 0;
}
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 80px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 768px) {
.article-title {
font-size: 32px;
}
.comparison-grid,
.pros-cons {
grid-template-columns: 1fr;
}
}
/* From balloon_comparison_article.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
line-height: 1.8;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.9);
text-decoration: none;
}
.breadcrumbs {
padding: 30px 0 20px;
font-size: 14px;
color: rgba(255,255,255,0.6);
}
.breadcrumbs a {
color: rgba(255,255,255,0.6);
text-decoration: none;
}
.article-header {
padding: 40px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.article-category {
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
padding: 5px 15px;
border-radius: 15px;
font-size: 13px;
font-weight: bold;
display: inline-block;
margin-bottom: 20px;
}
.article-title {
font-size: 48px;
margin-bottom: 20px;
line-height: 1.2;
}
.article-meta {
display: flex;
gap: 30px;
color: rgba(255,255,255,0.6);
font-size: 15px;
}
.article-content {
padding: 60px 0;
}
.article-content h2 {
font-size: 32px;
margin: 50px 0 25px;
color: #fff;
}
.article-content h3 {
font-size: 24px;
margin: 40px 0 20px;
color: var(--accent);
}
.article-content p {
margin-bottom: 25px;
color: rgba(255,255,255,0.85);
font-size: 18px;
}
.article-content ul {
margin-bottom: 25px;
padding-left: 30px;
}
.article-content li {
margin-bottom: 12px;
color: rgba(255,255,255,0.85);
}
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin: 40px 0;
}
.game-card {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 30px;
border: 2px solid rgba(255,255,255,0.1);
}
.game-card.balloon {
border-color: rgba(240, 147, 251, 0.4);
}
.game-card.aviator {
border-color: rgba(78, 205, 196, 0.4);
}
.game-title {
font-size: 28px;
margin-bottom: 20px;
text-align: center;
}
.game-icon {
font-size: 64px;
text-align: center;
margin-bottom: 20px;
}
.stat-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.stat-label {
color: rgba(255,255,255,0.7);
}
.stat-value {
font-weight: bold;
color: #fff;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 40px 0;
background: rgba(255,255,255,0.03);
border-radius: 15px;
overflow: hidden;
}
.comparison-table th,
.comparison-table td {
padding: 18px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.comparison-table thead {
background: rgba(255,255,255,0.08);
}
.comparison-table th {
font-weight: bold;
color: var(--accent);
font-size: 15px;
}
.comparison-table td {
color: rgba(255,255,255,0.85);
}
.winner-badge {
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
margin-left: 8px;
}
.highlight-box {
background: rgba(78, 205, 196, 0.1);
border-left: 4px solid var(--secondary);
padding: 25px;
margin: 35px 0;
border-radius: 10px;
}
.highlight-box h4 {
color: var(--secondary);
margin-bottom: 15px;
font-size: 20px;
}
.pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 30px 0;
}
.pros, .cons {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 25px;
}
.pros {
border-left: 3px solid var(--secondary);
}
.cons {
border-left: 3px solid var(--primary);
}
.pros h4 {
color: var(--secondary);
margin-bottom: 15px;
}
.cons h4 {
color: var(--primary);
margin-bottom: 15px;
}
.pros ul, .cons ul {
list-style: none;
padding-left: 0;
}
.pros li, .cons li {
padding: 8px 0;
padding-left: 25px;
position: relative;
}
.pros li:before {
content: "✓";
position: absolute;
left: 0;
color: var(--secondary);
font-weight: bold;
}
.cons li:before {
content: "✗";
position: absolute;
left: 0;
color: var(--primary);
font-weight: bold;
}
.verdict-box {
background: var(--gradient-2);
border-radius: 20px;
padding: 35px;
margin: 40px 0;
text-align: center;
}
.verdict-box h3 {
font-size: 28px;
margin-bottom: 20px;
margin-top: 0;
}
.verdict-box p {
font-size: 18px;
line-height: 1.7;
}
.score-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin: 40px 0;
}
.score-card {
background: rgba(255,255,255,0.05);
border-radius: 15px;
padding: 20px;
text-align: center;
}
.score-category {
font-size: 14px;
color: rgba(255,255,255,0.7);
margin-bottom: 10px;
}
.score-value {
font-size: 32px;
font-weight: bold;
color: var(--accent);
}
.related-articles {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 40px;
margin: 60px 0;
}
.related-articles h3 {
margin-bottom: 25px;
font-size: 28px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.related-card {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 15px;
text-decoration: none;
color: #fff;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s;
}
.related-card:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-3px);
}
.related-card h4 {
margin-bottom: 10px;
font-size: 18px;
}
.related-card p {
font-size: 14px;
color: rgba(255,255,255,0.6);
margin: 0;
}
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 80px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 768px) {
.article-title {
font-size: 32px;
}
.comparison-grid,
.pros-cons {
grid-template-columns: 1fr;
}
}
/* From balloon_demo_page.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
line-height: 1.8;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.9);
text-decoration: none;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--accent);
}
.play-real-btn {
background: var(--gradient-2);
color: #fff;
padding: 10px 25px;
border-radius: 25px;
font-weight: bold;
text-decoration: none;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
}
.play-real-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
}
.hero {
padding: 60px 0 40px;
text-align: center;
}
.hero h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero p {
font-size: 20px;
color: rgba(255,255,255,0.8);
max-width: 700px;
margin: 0 auto 30px;
}
.demo-badge {
display: inline-block;
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
padding: 8px 20px;
border-radius: 20px;
font-weight: bold;
margin-bottom: 20px;
font-size: 14px;
}
.warning-banner {
background: linear-gradient(135deg, rgba(255, 107, 107, 0.15) 0%, rgba(255, 142, 83, 0.15) 100%);
border: 2px solid rgba(255, 107, 107, 0.4);
border-radius: 20px;
padding: 25px;
margin: 30px auto;
max-width: 900px;
}
.warning-banner h3 {
color: #FF6B6B;
margin-bottom: 10px;
font-size: 20px;
}
.warning-banner p {
color: rgba(255,255,255,0.9);
line-height: 1.6;
margin: 0;
}
.demo-container {
background: rgba(255,255,255,0.05);
border-radius: 25px;
padding: 30px;
border: 1px solid rgba(255,255,255,0.1);
margin: 40px 0;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.demo-header {
text-align: center;
margin-bottom: 25px;
}
.demo-header h2 {
font-size: 32px;
margin-bottom: 10px;
}
.demo-note {
color: rgba(255,255,255,0.7);
font-size: 16px;
}
.freedemo-game-widget {
width: 100%;
min-height: 600px;
border-radius: 15px;
overflow: hidden;
background: rgba(0,0,0,0.3);
}
.demo-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 40px 0;
}
.feature-card {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 30px;
border: 1px solid rgba(255,255,255,0.1);
text-align: center;
transition: all 0.3s;
}
.feature-card:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-5px);
}
.feature-icon {
font-size: 48px;
margin-bottom: 15px;
}
.feature-title {
font-size: 20px;
margin-bottom: 10px;
color: var(--accent);
}
.feature-description {
color: rgba(255,255,255,0.7);
font-size: 15px;
}
.practice-tips {
background: rgba(78, 205, 196, 0.1);
border-left: 4px solid var(--secondary);
border-radius: 15px;
padding: 30px;
margin: 40px 0;
}
.practice-tips h3 {
color: var(--secondary);
margin-bottom: 20px;
font-size: 26px;
}
.tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.tip-item {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 12px;
}
.tip-item h4 {
color: #fff;
margin-bottom: 10px;
font-size: 18px;
}
.tip-item p {
color: rgba(255,255,255,0.8);
font-size: 15px;
margin: 0;
}
.cta-section {
background: var(--gradient-2);
border-radius: 25px;
padding: 50px;
text-align: center;
margin: 60px 0;
}
.cta-section h2 {
font-size: 36px;
margin-bottom: 15px;
}
.cta-section p {
font-size: 18px;
margin-bottom: 30px;
opacity: 0.9;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn-primary {
background: #fff;
color: #f5576c;
padding: 15px 40px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
font-size: 18px;
transition: all 0.3s;
display: inline-block;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.btn-secondary {
background: rgba(255,255,255,0.2);
color: #fff;
padding: 15px 40px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
font-size: 18px;
transition: all 0.3s;
border: 2px solid rgba(255,255,255,0.3);
display: inline-block;
}
.btn-secondary:hover {
background: rgba(255,255,255,0.3);
border-color: rgba(255,255,255,0.5);
}
.comparison-section {
padding: 60px 0;
}
.section-header {
text-align: center;
margin-bottom: 40px;
}
.section-header h2 {
font-size: 36px;
margin-bottom: 15px;
}
.section-header p {
font-size: 18px;
color: rgba(255,255,255,0.7);
}
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
max-width: 1000px;
margin: 0 auto;
}
.comparison-card {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 40px;
border: 2px solid rgba(255,255,255,0.1);
}
.comparison-card.demo {
border-color: rgba(78, 205, 196, 0.4);
}
.comparison-card.real {
border-color: rgba(240, 147, 251, 0.4);
}
.comparison-title {
font-size: 28px;
margin-bottom: 25px;
text-align: center;
color: var(--accent);
}
.comparison-list {
list-style: none;
padding: 0;
}
.comparison-list li {
padding: 12px 0;
padding-left: 30px;
position: relative;
color: rgba(255,255,255,0.85);
margin-bottom: 10px;
}
.comparison-list li:before {
content: "✓";
position: absolute;
left: 0;
color: var(--secondary);
font-weight: bold;
font-size: 18px;
}
.comparison-card.real .comparison-list li:before {
content: "⚠";
color: var(--accent);
}
.faq-section {
padding: 60px 0;
max-width: 900px;
margin: 0 auto;
}
.faq-item {
background: rgba(255,255,255,0.05);
border-radius: 15px;
margin-bottom: 15px;
border: 1px solid rgba(255,255,255,0.1);
overflow: hidden;
}
.faq-question {
padding: 20px 25px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s;
}
.faq-question:hover {
background: rgba(255,255,255,0.03);
}
.faq-question h4 {
font-size: 18px;
color: #fff;
margin: 0;
}
.faq-toggle {
font-size: 24px;
color: var(--accent);
font-weight: 300;
transition: transform 0.3s;
}
.faq-item.active .faq-toggle {
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.active .faq-answer {
max-height: 300px;
padding: 0 25px 20px 25px;
}
.faq-answer p {
color: rgba(255,255,255,0.8);
line-height: 1.6;
margin: 0;
}
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 80px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 968px) {
.hero h1 {
font-size: 32px;
}
.comparison-grid {
grid-template-columns: 1fr;
}
.cta-section {
padding: 30px 20px;
}
.demo-container {
padding: 15px;
}
.nav-links {
display: none;
}
}
/* From balloon_how_to_play.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
line-height: 1.6;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
/* Header */
.page-header {
text-align: center;
padding: 60px 0 40px;
}
.page-header h1 {
font-size: 48px;
margin-bottom: 15px;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.page-header .subtitle {
font-size: 20px;
color: rgba(255,255,255,0.7);
margin-bottom: 30px;
}
.difficulty-badge {
display: inline-block;
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
padding: 8px 20px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
}
/* Quick Overview */
.quick-overview {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 40px;
margin-bottom: 40px;
}
.overview-title {
font-size: 28px;
margin-bottom: 20px;
text-align: center;
}
.overview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 30px;
}
.overview-item {
text-align: center;
padding: 20px;
background: rgba(255,255,255,0.03);
border-radius: 15px;
}
.overview-icon {
font-size: 36px;
margin-bottom: 10px;
}
.overview-label {
font-size: 14px;
color: rgba(255,255,255,0.6);
margin-bottom: 5px;
}
.overview-value {
font-size: 20px;
font-weight: bold;
color: var(--accent);
}
/* Steps Timeline */
.steps-section {
margin-bottom: 60px;
}
.section-title {
font-size: 32px;
margin-bottom: 40px;
text-align: center;
}
.steps-timeline {
position: relative;
padding-left: 80px;
}
.steps-timeline::before {
content: '';
position: absolute;
left: 40px;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--secondary), var(--primary));
}
.step-item {
position: relative;
margin-bottom: 50px;
}
.step-number {
position: absolute;
left: -80px;
width: 80px;
height: 80px;
background: var(--gradient-2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: bold;
box-shadow: 0 10px 30px rgba(245, 87, 108, 0.3);
}
.step-content {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 30px;
margin-left: 20px;
}
.step-title {
font-size: 24px;
margin-bottom: 15px;
color: #fff;
}
.step-description {
color: rgba(255,255,255,0.8);
margin-bottom: 15px;
font-size: 16px;
}
.step-tip {
background: rgba(78, 205, 196, 0.1);
border-left: 3px solid var(--secondary);
padding: 12px 15px;
border-radius: 5px;
font-size: 14px;
color: rgba(255,255,255,0.9);
margin-top: 15px;
}
.step-tip strong {
color: var(--secondary);
}
.step-warning {
background: rgba(255, 107, 107, 0.1);
border-left: 3px solid var(--primary);
padding: 12px 15px;
border-radius: 5px;
font-size: 14px;
color: rgba(255,255,255,0.9);
margin-top: 15px;
}
.step-warning strong {
color: var(--primary);
}
/* Interface Guide */
.interface-section {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 40px;
margin-bottom: 40px;
}
.interface-mockup {
background: rgba(0,0,0,0.3);
border-radius: 15px;
padding: 30px;
margin: 30px 0;
position: relative;
min-height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mockup-balloon {
font-size: 120px;
animation: floatBalloon 3s ease-in-out infinite;
}
@keyframes floatBalloon {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.mockup-multiplier {
font-size: 48px;
font-weight: bold;
margin: 20px 0;
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.interface-elements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.interface-element {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 20px;
border-left: 3px solid var(--accent);
}
.element-title {
font-weight: 600;
margin-bottom: 8px;
color: var(--accent);
}
.element-description {
font-size: 14px;
color: rgba(255,255,255,0.7);
}
/* Rules Section */
.rules-section {
margin-bottom: 40px;
}
.rules-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
.rule-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 30px;
}
.rule-icon {
font-size: 40px;
margin-bottom: 15px;
}
.rule-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
}
.rule-text {
color: rgba(255,255,255,0.8);
font-size: 15px;
line-height: 1.6;
}
/* Tips Section */
.tips-section {
background: rgba(78, 205, 196, 0.05);
border: 1px solid rgba(78, 205, 196, 0.2);
border-radius: 20px;
padding: 40px;
margin-bottom: 40px;
}
.tips-grid {
display: grid;
gap: 15px;
margin-top: 25px;
}
.tip-item {
display: flex;
gap: 15px;
padding: 20px;
background: rgba(255,255,255,0.03);
border-radius: 15px;
align-items: flex-start;
}
.tip-icon {
font-size: 24px;
flex-shrink: 0;
}
.tip-text {
color: rgba(255,255,255,0.85);
}
/* Common Mistakes */
.mistakes-section {
background: rgba(255, 107, 107, 0.05);
border: 1px solid rgba(255, 107, 107, 0.2);
border-radius: 20px;
padding: 40px;
margin-bottom: 40px;
}
.mistake-item {
display: flex;
gap: 15px;
padding: 20px;
background: rgba(255,255,255,0.03);
border-radius: 15px;
margin-bottom: 15px;
}
.mistake-icon {
font-size: 24px;
flex-shrink: 0;
}
.mistake-content h4 {
color: var(--primary);
margin-bottom: 8px;
}
.mistake-content p {
color: rgba(255,255,255,0.8);
font-size: 15px;
}
/* FAQ */
.faq-section {
margin-bottom: 40px;
}
.faq-item {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 15px;
margin-bottom: 15px;
overflow: hidden;
}
.faq-question {
padding: 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
transition: all 0.3s;
}
.faq-question:hover {
background: rgba(255,255,255,0.03);
}
.faq-toggle {
font-size: 24px;
color: var(--accent);
transition: transform 0.3s;
}
.faq-item.active .faq-toggle {
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 20px;
}
.faq-item.active .faq-answer {
max-height: 500px;
padding: 0 20px 20px 20px;
}
.faq-answer p {
color: rgba(255,255,255,0.8);
line-height: 1.6;
}
/* Responsible Gaming */
.responsible-gaming {
background: rgba(255, 107, 107, 0.1);
border: 2px solid rgba(255, 107, 107, 0.3);
border-radius: 20px;
padding: 40px;
}
.responsible-gaming h3 {
color: var(--primary);
margin-bottom: 20px;
font-size: 24px;
}
.responsible-gaming p {
color: rgba(255,255,255,0.9);
line-height: 1.8;
margin-bottom: 15px;
}
.responsible-gaming ul {
margin: 20px 0 20px 20px;
}
.responsible-gaming li {
color: rgba(255,255,255,0.9);
margin-bottom: 10px;
}
/* CTA Button */
.cta-section {
text-align: center;
padding: 60px 0;
}
.cta-button {
display: inline-block;
background: var(--gradient-2);
color: #fff;
padding: 18px 40px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
font-size: 18px;
transition: all 0.3s;
box-shadow: 0 10px 30px rgba(245, 87, 108, 0.3);
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(245, 87, 108, 0.4);
}
/* Responsive */
@media (max-width: 768px) {
.page-header h1 {
font-size: 32px;
}
.steps-timeline {
padding-left: 60px;
}
.step-number {
width: 60px;
height: 60px;
left: -60px;
font-size: 24px;
}
.steps-timeline::before {
left: 30px;
}
.overview-grid,
.rules-grid,
.interface-elements {
grid-template-columns: 1fr;
}
}
/* From balloon_live_stats.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--dark: #1A1A2E;
--gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
/* Header */
.page-header {
text-align: center;
padding: 40px 0 60px;
}
.page-header h1 {
font-size: 48px;
margin-bottom: 15px;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.page-header p {
font-size: 18px;
color: rgba(255,255,255,0.7);
}
.live-indicator {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.05);
padding: 8px 20px;
border-radius: 20px;
margin-top: 20px;
}
.live-dot {
width: 10px;
height: 10px;
background: #ff4757;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.2); }
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.stat-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 30px;
text-align: center;
transition: all 0.3s;
}
.stat-card:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-5px);
}
.stat-icon {
font-size: 40px;
margin-bottom: 15px;
}
.stat-value {
font-size: 36px;
font-weight: bold;
margin-bottom: 8px;
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-label {
font-size: 14px;
color: rgba(255,255,255,0.6);
text-transform: uppercase;
letter-spacing: 1px;
}
/* Main Content Grid */
.content-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
margin-bottom: 40px;
}
.live-wins-section {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 30px;
margin-bottom: 40px;
}
.wins-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.wins-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 15px;
max-height: 400px;
overflow-y: auto;
}
.wins-container::-webkit-scrollbar {
width: 8px;
}
.wins-container::-webkit-scrollbar-track {
background: rgba(255,255,255,0.05);
border-radius: 4px;
}
.wins-container::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 4px;
}
.win-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 15px;
padding: 20px;
display: flex;
align-items: center;
gap: 15px;
transition: all 0.3s;
animation: slideInWin 0.5s ease;
}
@keyframes slideInWin {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.win-card:hover {
background: rgba(255,255,255,0.06);
transform: translateY(-2px);
}
.win-card.big-win {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 107, 107, 0.15) 100%);
border-color: rgba(255, 215, 0, 0.4);
}
.player-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--gradient-2);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 20px;
flex-shrink: 0;
}
.win-details {
flex: 1;
min-width: 0;
}
.player-name {
font-weight: 600;
font-size: 15px;
margin-bottom: 5px;
color: #fff;
}
.win-info {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: rgba(255,255,255,0.7);
}
.win-amount {
color: #4ECDC4;
font-weight: 600;
}
.win-multiplier {
background: rgba(255, 230, 109, 0.2);
color: #FFE66D;
padding: 3px 8px;
border-radius: 8px;
font-weight: 600;
font-size: 13px;
}
.win-time {
font-size: 12px;
color: rgba(255,255,255,0.5);
}
/* Chart Container */
.chart-container {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 30px;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.chart-title {
font-size: 24px;
font-weight: 600;
}
.time-filter {
display: flex;
gap: 10px;
}
.time-btn {
padding: 8px 16px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
color: rgba(255,255,255,0.7);
cursor: pointer;
transition: all 0.3s;
}
.time-btn:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
.time-btn.active {
background: var(--gradient-2);
border-color: transparent;
color: #fff;
}
/* Distribution Chart */
.distribution-chart {
display: flex;
align-items: flex-end;
height: 300px;
gap: 8px;
padding: 20px 0;
}
.bar-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
}
.bar {
width: 100%;
background: var(--gradient-2);
border-radius: 5px 5px 0 0;
transition: all 0.3s;
position: relative;
}
.bar:hover {
opacity: 0.8;
}
.bar-label {
margin-top: 10px;
font-size: 12px;
color: rgba(255,255,255,0.6);
}
.bar-value {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,0.8);
white-space: nowrap;
}
/* Recent Rounds */
.recent-rounds {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 30px;
}
.rounds-header {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
}
.rounds-list {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 400px;
overflow-y: auto;
}
.rounds-list::-webkit-scrollbar {
width: 6px;
}
.rounds-list::-webkit-scrollbar-track {
background: rgba(255,255,255,0.05);
border-radius: 3px;
}
.rounds-list::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 3px;
}
.round-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background: rgba(255,255,255,0.03);
border-radius: 12px;
border-left: 3px solid transparent;
transition: all 0.3s;
}
.round-item:hover {
background: rgba(255,255,255,0.06);
transform: translateX(5px);
}
.round-item.low { border-left-color: #4ECDC4; }
.round-item.medium { border-left-color: #FFE66D; }
.round-item.high { border-left-color: #FF6B6B; }
.round-multiplier {
font-size: 20px;
font-weight: bold;
}
.round-time {
font-size: 12px;
color: rgba(255,255,255,0.5);
}
/* Heatmap Section */
.heatmap-section {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 30px;
margin-bottom: 40px;
}
.heatmap-title {
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
}
.heatmap-grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 8px;
}
.heatmap-cell {
aspect-ratio: 1;
background: rgba(255,255,255,0.05);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
transition: all 0.3s;
cursor: pointer;
}
.heatmap-cell:hover {
transform: scale(1.1);
z-index: 10;
}
.heatmap-cell.intensity-1 { background: rgba(78, 205, 196, 0.2); color: #4ECDC4; }
.heatmap-cell.intensity-2 { background: rgba(78, 205, 196, 0.4); color: #4ECDC4; }
.heatmap-cell.intensity-3 { background: rgba(255, 230, 109, 0.4); color: #FFE66D; }
.heatmap-cell.intensity-4 { background: rgba(255, 107, 107, 0.4); color: #FF6B6B; }
.heatmap-cell.intensity-5 { background: rgba(255, 107, 107, 0.8); color: #fff; }
/* Probability Table */
.probability-section {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 30px;
}
.probability-table {
width: 100%;
border-collapse: collapse;
}
.probability-table th,
.probability-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.probability-table th {
background: rgba(255,255,255,0.05);
font-weight: 600;
color: rgba(255,255,255,0.9);
}
.probability-table td {
color: rgba(255,255,255,0.7);
}
.probability-bar {
height: 8px;
background: var(--gradient-2);
border-radius: 4px;
transition: width 0.5s ease;
}
/* Disclaimer */
.disclaimer {
background: rgba(255, 107, 107, 0.1);
border: 2px solid rgba(255, 107, 107, 0.3);
border-radius: 20px;
padding: 30px;
margin-top: 40px;
}
.disclaimer h3 {
color: #FF6B6B;
margin-bottom: 15px;
}
.disclaimer p {
color: rgba(255,255,255,0.9);
line-height: 1.8;
margin-bottom: 10px;
}
/* Responsive */
@media (max-width: 1024px) {
.content-grid {
grid-template-columns: 1fr;
}
.heatmap-grid {
grid-template-columns: repeat(5, 1fr);
}
}
@media (max-width: 768px) {
.page-header h1 {
font-size: 32px;
}
.stats-grid {
grid-template-columns: 1fr;
}
.time-filter {
flex-wrap: wrap;
}
}
/* From balloon_mobile_gaming_article.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
line-height: 1.8;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.9);
text-decoration: none;
}
.breadcrumbs {
padding: 30px 0 20px;
font-size: 14px;
color: rgba(255,255,255,0.6);
}
.breadcrumbs a {
color: rgba(255,255,255,0.6);
text-decoration: none;
}
.article-header {
padding: 40px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.article-category {
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
padding: 5px 15px;
border-radius: 15px;
font-size: 13px;
font-weight: bold;
display: inline-block;
margin-bottom: 20px;
}
.article-title {
font-size: 48px;
margin-bottom: 20px;
line-height: 1.2;
}
.article-meta {
display: flex;
gap: 30px;
color: rgba(255,255,255,0.6);
font-size: 15px;
}
.article-content {
padding: 60px 0;
}
.article-content h2 {
font-size: 32px;
margin: 50px 0 25px;
color: #fff;
}
.article-content h3 {
font-size: 24px;
margin: 40px 0 20px;
color: var(--accent);
}
.article-content p {
margin-bottom: 25px;
color: rgba(255,255,255,0.85);
font-size: 18px;
}
.article-content ul {
margin-bottom: 25px;
padding-left: 30px;
}
.article-content li {
margin-bottom: 12px;
color: rgba(255,255,255,0.85);
}
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin: 40px 0;
}
.comparison-card {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 30px;
border: 2px solid rgba(255,255,255,0.1);
}
.comparison-card.app {
border-color: rgba(78, 205, 196, 0.4);
}
.comparison-card.browser {
border-color: rgba(255, 230, 109, 0.4);
}
.card-title {
font-size: 24px;
margin-bottom: 20px;
text-align: center;
color: var(--accent);
}
.pros-list {
list-style: none;
padding: 0;
margin-bottom: 20px;
}
.pros-list li {
padding: 10px 0;
padding-left: 25px;
position: relative;
color: rgba(255,255,255,0.85);
}
.pros-list li:before {
content: "✓";
position: absolute;
left: 0;
color: var(--secondary);
font-weight: bold;
}
.cons-list {
list-style: none;
padding: 0;
}
.cons-list li {
padding: 10px 0;
padding-left: 25px;
position: relative;
color: rgba(255,255,255,0.85);
}
.cons-list li:before {
content: "✗";
position: absolute;
left: 0;
color: var(--primary);
font-weight: bold;
}
.highlight-box {
background: rgba(78, 205, 196, 0.1);
border-left: 4px solid var(--secondary);
padding: 25px;
margin: 35px 0;
border-radius: 10px;
}
.highlight-box h4 {
color: var(--secondary);
margin-bottom: 15px;
font-size: 20px;
}
.warning-box {
background: rgba(255, 107, 107, 0.1);
border-left: 4px solid var(--primary);
padding: 25px;
margin: 35px 0;
border-radius: 10px;
}
.warning-box h4 {
color: var(--primary);
margin-bottom: 15px;
font-size: 20px;
}
.device-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 30px 0;
}
.device-card {
background: rgba(255,255,255,0.05);
border-radius: 15px;
padding: 25px;
text-align: center;
}
.device-icon {
font-size: 48px;
margin-bottom: 15px;
}
.device-name {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.device-rating {
color: var(--accent);
font-size: 14px;
}
.settings-box {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 25px;
margin: 25px 0;
}
.settings-box h4 {
color: var(--accent);
margin-bottom: 15px;
}
.setting-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.setting-item:last-child {
border-bottom: none;
}
.setting-label {
color: rgba(255,255,255,0.8);
}
.setting-value {
font-weight: bold;
color: var(--secondary);
}
.troubleshooting-item {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 25px;
margin: 20px 0;
}
.issue-title {
color: var(--primary);
font-weight: bold;
margin-bottom: 10px;
font-size: 18px;
}
.solution-title {
color: var(--secondary);
font-weight: bold;
margin-top: 15px;
margin-bottom: 10px;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
background: rgba(255,255,255,0.03);
border-radius: 15px;
overflow: hidden;
}
.comparison-table th,
.comparison-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.comparison-table th {
background: rgba(255,255,255,0.08);
font-weight: bold;
color: var(--accent);
}
.related-articles {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 40px;
margin: 60px 0;
}
.related-articles h3 {
margin-bottom: 25px;
font-size: 28px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.related-card {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 15px;
text-decoration: none;
color: #fff;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s;
}
.related-card:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-3px);
}
.related-card h4 {
margin-bottom: 10px;
font-size: 18px;
}
.related-card p {
font-size: 14px;
color: rgba(255,255,255,0.6);
margin: 0;
}
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 80px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 768px) {
.article-title {
font-size: 32px;
}
.comparison-grid {
grid-template-columns: 1fr;
}
}
/* From balloon_myths_page.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
line-height: 1.8;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.9);
text-decoration: none;
}
.hero {
padding: 80px 0 40px;
text-align: center;
}
.hero h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero p {
font-size: 20px;
color: rgba(255,255,255,0.8);
max-width: 700px;
margin: 0 auto;
}
.intro-box {
background: rgba(78, 205, 196, 0.1);
border-left: 4px solid var(--secondary);
border-radius: 15px;
padding: 30px;
margin: 40px 0;
}
.intro-box h3 {
color: var(--secondary);
margin-bottom: 15px;
font-size: 24px;
}
.intro-box p {
color: rgba(255,255,255,0.9);
font-size: 17px;
}
.myth-card {
background: rgba(255,255,255,0.03);
border-radius: 20px;
padding: 40px;
margin: 40px 0;
border: 2px solid rgba(255, 107, 107, 0.3);
position: relative;
}
.myth-badge {
position: absolute;
top: -15px;
left: 30px;
background: var(--gradient-2);
color: #fff;
padding: 8px 20px;
border-radius: 20px;
font-weight: bold;
font-size: 14px;
}
.myth-header {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 25px;
margin-top: 10px;
}
.myth-icon {
font-size: 48px;
flex-shrink: 0;
}
.myth-title {
font-size: 26px;
color: var(--primary);
margin-bottom: 10px;
}
.myth-description {
color: rgba(255,255,255,0.7);
font-size: 16px;
font-style: italic;
}
.truth-section {
background: rgba(78, 205, 196, 0.1);
border-radius: 15px;
padding: 25px;
margin-top: 25px;
}
.truth-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.truth-icon {
font-size: 32px;
}
.truth-title {
font-size: 22px;
color: var(--secondary);
}
.truth-content {
color: rgba(255,255,255,0.9);
font-size: 17px;
line-height: 1.8;
}
.truth-content p {
margin-bottom: 15px;
}
.truth-content ul {
margin: 15px 0;
padding-left: 25px;
}
.truth-content li {
margin-bottom: 10px;
}
.evidence-box {
background: rgba(0,0,0,0.3);
border-radius: 10px;
padding: 20px;
margin: 20px 0;
}
.evidence-box h4 {
color: var(--accent);
margin-bottom: 12px;
font-size: 18px;
}
.quick-facts {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 40px;
margin: 60px 0;
}
.quick-facts h2 {
text-align: center;
font-size: 36px;
margin-bottom: 40px;
}
.facts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.fact-card {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 25px;
border: 1px solid rgba(78, 205, 196, 0.3);
}
.fact-number {
font-size: 48px;
font-weight: bold;
color: var(--secondary);
margin-bottom: 10px;
}
.fact-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: #fff;
}
.fact-description {
color: rgba(255,255,255,0.7);
font-size: 15px;
}
.warning-section {
background: linear-gradient(135deg, rgba(255, 107, 107, 0.15) 0%, rgba(255, 142, 83, 0.15) 100%);
border: 2px solid rgba(255, 107, 107, 0.4);
border-radius: 20px;
padding: 40px;
margin: 60px 0;
}
.warning-section h2 {
color: var(--primary);
font-size: 32px;
margin-bottom: 20px;
}
.warning-section p {
color: rgba(255,255,255,0.9);
font-size: 17px;
line-height: 1.8;
margin-bottom: 15px;
}
.cta-section {
background: var(--gradient-2);
border-radius: 25px;
padding: 50px;
text-align: center;
margin: 60px 0;
}
.cta-section h2 {
font-size: 36px;
margin-bottom: 15px;
}
.cta-section p {
font-size: 18px;
margin-bottom: 30px;
}
.cta-button {
background: #fff;
color: #f5576c;
padding: 15px 40px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
font-size: 18px;
display: inline-block;
transition: all 0.3s;
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 80px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 768px) {
.hero h1 {
font-size: 32px;
}
.myth-card {
padding: 25px 20px;
}
.myth-header {
flex-direction: column;
}
}
/* From balloon_privacy_policy.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
line-height: 1.8;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
}
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content {
padding: 60px 0;
}
.page-header {
text-align: center;
margin-bottom: 50px;
}
.page-header h1 {
font-size: 42px;
margin-bottom: 15px;
}
.last-updated {
color: rgba(255,255,255,0.6);
font-size: 16px;
}
.intro-box {
background: rgba(78, 205, 196, 0.1);
border-left: 4px solid var(--secondary);
border-radius: 15px;
padding: 25px;
margin-bottom: 40px;
}
.intro-box p {
color: rgba(255,255,255,0.9);
font-size: 17px;
margin-bottom: 10px;
}
.section {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 35px;
margin-bottom: 30px;
border: 1px solid rgba(255,255,255,0.1);
}
.section h2 {
font-size: 28px;
color: var(--accent);
margin-bottom: 20px;
}
.section h3 {
font-size: 22px;
color: #fff;
margin-top: 25px;
margin-bottom: 15px;
}
.section p {
color: rgba(255,255,255,0.85);
margin-bottom: 15px;
font-size: 16px;
}
.section ul {
margin: 15px 0;
padding-left: 25px;
}
.section li {
color: rgba(255,255,255,0.85);
margin-bottom: 10px;
}
.highlight-box {
background: rgba(255, 230, 109, 0.1);
border-left: 3px solid var(--accent);
padding: 20px;
margin: 20px 0;
border-radius: 8px;
}
.highlight-box strong {
color: var(--accent);
}
.contact-box {
background: rgba(78, 205, 196, 0.1);
border-radius: 15px;
padding: 30px;
margin-top: 40px;
text-align: center;
}
.contact-box h2 {
font-size: 28px;
margin-bottom: 15px;
color: var(--secondary);
}
.contact-box p {
font-size: 17px;
color: rgba(255,255,255,0.9);
margin-bottom: 10px;
}
.contact-box a {
color: var(--secondary);
text-decoration: none;
font-weight: bold;
}
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 60px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 768px) {
.page-header h1 {
font-size: 32px;
}
.section {
padding: 25px 20px;
}
}
/* From balloon_provably_fair_article.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
line-height: 1.8;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.9);
text-decoration: none;
}
.breadcrumbs {
padding: 30px 0 20px;
font-size: 14px;
color: rgba(255,255,255,0.6);
}
.breadcrumbs a {
color: rgba(255,255,255,0.6);
text-decoration: none;
}
.article-header {
padding: 40px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.article-category {
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
padding: 5px 15px;
border-radius: 15px;
font-size: 13px;
font-weight: bold;
display: inline-block;
margin-bottom: 20px;
}
.article-title {
font-size: 48px;
margin-bottom: 20px;
line-height: 1.2;
}
.article-meta {
display: flex;
gap: 30px;
color: rgba(255,255,255,0.6);
font-size: 15px;
}
.article-content {
padding: 60px 0;
}
.article-content h2 {
font-size: 32px;
margin: 50px 0 25px;
color: #fff;
}
.article-content h3 {
font-size: 24px;
margin: 40px 0 20px;
color: var(--accent);
}
.article-content p {
margin-bottom: 25px;
color: rgba(255,255,255,0.85);
font-size: 18px;
}
.article-content ul, .article-content ol {
margin-bottom: 25px;
padding-left: 30px;
}
.article-content li {
margin-bottom: 12px;
color: rgba(255,255,255,0.85);
}
.highlight-box {
background: rgba(78, 205, 196, 0.1);
border-left: 4px solid var(--secondary);
padding: 25px;
margin: 35px 0;
border-radius: 10px;
}
.highlight-box h4 {
color: var(--secondary);
margin-bottom: 15px;
font-size: 20px;
}
.code-box {
background: rgba(0,0,0,0.3);
border-radius: 10px;
padding: 20px;
margin: 25px 0;
font-family: 'Courier New', monospace;
overflow-x: auto;
}
.code-box code {
color: var(--accent);
font-size: 14px;
line-height: 1.6;
}
.step-box {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 25px;
margin: 25px 0;
border-left: 4px solid var(--accent);
}
.step-number {
background: var(--gradient-2);
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 15px;
font-size: 18px;
}
.step-box h4 {
display: flex;
align-items: center;
margin-bottom: 15px;
color: var(--accent);
}
.diagram-box {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 30px;
margin: 35px 0;
text-align: center;
}
.diagram-step {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 12px;
margin: 15px 0;
border: 2px solid rgba(78, 205, 196, 0.3);
}
.arrow {
font-size: 32px;
color: var(--accent);
margin: 10px 0;
}
.warning-box {
background: rgba(255, 107, 107, 0.1);
border-left: 4px solid var(--primary);
padding: 25px;
margin: 35px 0;
border-radius: 10px;
}
.warning-box h4 {
color: var(--primary);
margin-bottom: 15px;
font-size: 20px;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
background: rgba(255,255,255,0.03);
border-radius: 15px;
overflow: hidden;
}
.comparison-table th,
.comparison-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.comparison-table th {
background: rgba(255,255,255,0.08);
font-weight: bold;
color: var(--accent);
}
.related-articles {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 40px;
margin: 60px 0;
}
.related-articles h3 {
margin-bottom: 25px;
font-size: 28px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.related-card {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 15px;
text-decoration: none;
color: #fff;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s;
}
.related-card:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-3px);
}
.related-card h4 {
margin-bottom: 10px;
font-size: 18px;
}
.related-card p {
font-size: 14px;
color: rgba(255,255,255,0.6);
margin: 0;
}
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 80px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 768px) {
.article-title {
font-size: 32px;
}
}
/* From balloon_psychology_article.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
line-height: 1.8;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.9);
text-decoration: none;
}
.breadcrumbs {
padding: 30px 0 20px;
font-size: 14px;
color: rgba(255,255,255,0.6);
}
.breadcrumbs a {
color: rgba(255,255,255,0.6);
text-decoration: none;
}
.article-header {
padding: 40px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.article-category {
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
padding: 5px 15px;
border-radius: 15px;
font-size: 13px;
font-weight: bold;
display: inline-block;
margin-bottom: 20px;
}
.article-title {
font-size: 48px;
margin-bottom: 20px;
line-height: 1.2;
}
.article-meta {
display: flex;
gap: 30px;
color: rgba(255,255,255,0.6);
font-size: 15px;
}
.article-content {
padding: 60px 0;
}
.article-content h2 {
font-size: 32px;
margin: 50px 0 25px;
color: #fff;
}
.article-content h3 {
font-size: 24px;
margin: 40px 0 20px;
color: var(--accent);
}
.article-content p {
margin-bottom: 25px;
color: rgba(255,255,255,0.85);
font-size: 18px;
}
.article-content ul, .article-content ol {
margin-bottom: 25px;
padding-left: 30px;
}
.article-content li {
margin-bottom: 12px;
color: rgba(255,255,255,0.85);
}
.highlight-box {
background: rgba(78, 205, 196, 0.1);
border-left: 4px solid var(--secondary);
padding: 25px;
margin: 35px 0;
border-radius: 10px;
}
.highlight-box h4 {
color: var(--secondary);
margin-bottom: 15px;
font-size: 20px;
}
.warning-box {
background: rgba(255, 107, 107, 0.1);
border-left: 4px solid var(--primary);
padding: 25px;
margin: 35px 0;
border-radius: 10px;
}
.warning-box h4 {
color: var(--primary);
margin-bottom: 15px;
font-size: 20px;
}
.bias-card {
background: rgba(255,255,255,0.05);
border-radius: 15px;
padding: 30px;
margin: 30px 0;
border-left: 4px solid var(--accent);
}
.bias-card h3 {
color: var(--accent);
margin-bottom: 15px;
margin-top: 0;
}
.scenario-box {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 25px;
margin: 20px 0;
}
.scenario-box h4 {
color: var(--secondary);
margin-bottom: 15px;
}
.vs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 25px 0;
}
.vs-card {
background: rgba(255,255,255,0.03);
padding: 20px;
border-radius: 12px;
}
.vs-card.wrong {
border-left: 3px solid var(--primary);
}
.vs-card.right {
border-left: 3px solid var(--secondary);
}
.vs-card h5 {
margin-bottom: 12px;
font-size: 16px;
}
.vs-card.wrong h5 {
color: var(--primary);
}
.vs-card.right h5 {
color: var(--secondary);
}
.quote-box {
background: rgba(255,255,255,0.03);
border-left: 4px solid var(--accent);
padding: 25px;
margin: 30px 0;
font-style: italic;
font-size: 19px;
}
.checklist {
background: rgba(78, 205, 196, 0.05);
border-radius: 15px;
padding: 25px;
margin: 30px 0;
}
.checklist h4 {
color: var(--secondary);
margin-bottom: 20px;
}
.checklist-item {
display: flex;
gap: 15px;
margin-bottom: 15px;
padding: 15px;
background: rgba(255,255,255,0.03);
border-radius: 10px;
}
.check-icon {
color: var(--secondary);
font-size: 24px;
flex-shrink: 0;
}
.related-articles {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 40px;
margin: 60px 0;
}
.related-articles h3 {
margin-bottom: 25px;
font-size: 28px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.related-card {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 15px;
text-decoration: none;
color: #fff;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s;
}
.related-card:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-3px);
}
.related-card h4 {
margin-bottom: 10px;
font-size: 18px;
}
.related-card p {
font-size: 14px;
color: rgba(255,255,255,0.6);
margin: 0;
}
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 80px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 768px) {
.article-title {
font-size: 32px;
}
.vs-grid {
grid-template-columns: 1fr;
}
}
/* From balloon_rtp_article.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
line-height: 1.8;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.9);
text-decoration: none;
transition: color 0.3s;
}
/* Breadcrumbs */
.breadcrumbs {
padding: 30px 0 20px;
font-size: 14px;
color: rgba(255,255,255,0.6);
}
.breadcrumbs a {
color: rgba(255,255,255,0.6);
text-decoration: none;
}
.breadcrumbs a:hover {
color: var(--accent);
}
/* Article Header */
.article-header {
padding: 40px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.article-category {
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
padding: 5px 15px;
border-radius: 15px;
font-size: 13px;
font-weight: bold;
display: inline-block;
margin-bottom: 20px;
}
.article-title {
font-size: 48px;
margin-bottom: 20px;
line-height: 1.2;
}
.article-meta {
display: flex;
gap: 30px;
color: rgba(255,255,255,0.6);
font-size: 15px;
}
/* Article Content */
.article-content {
padding: 60px 0;
}
.article-content h2 {
font-size: 32px;
margin: 50px 0 25px;
color: #fff;
}
.article-content h3 {
font-size: 24px;
margin: 40px 0 20px;
color: var(--accent);
}
.article-content p {
margin-bottom: 25px;
color: rgba(255,255,255,0.85);
font-size: 18px;
}
.article-content ul, .article-content ol {
margin-bottom: 25px;
padding-left: 30px;
}
.article-content li {
margin-bottom: 12px;
color: rgba(255,255,255,0.85);
}
.highlight-box {
background: rgba(78, 205, 196, 0.1);
border-left: 4px solid var(--secondary);
padding: 25px;
margin: 35px 0;
border-radius: 10px;
}
.highlight-box h4 {
color: var(--secondary);
margin-bottom: 15px;
font-size: 20px;
}
.warning-box {
background: rgba(255, 107, 107, 0.1);
border-left: 4px solid var(--primary);
padding: 25px;
margin: 35px 0;
border-radius: 10px;
}
.warning-box h4 {
color: var(--primary);
margin-bottom: 15px;
font-size: 20px;
}
.stat-box {
background: rgba(255,255,255,0.05);
border-radius: 15px;
padding: 30px;
margin: 30px 0;
text-align: center;
}
.stat-value {
font-size: 56px;
font-weight: bold;
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.stat-label {
font-size: 18px;
color: rgba(255,255,255,0.7);
}
.example-box {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 25px;
margin: 30px 0;
}
.example-box h4 {
color: var(--accent);
margin-bottom: 15px;
}
/* Table */
table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
background: rgba(255,255,255,0.03);
border-radius: 15px;
overflow: hidden;
}
th, td {
padding: 15px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
th {
background: rgba(255,255,255,0.05);
font-weight: bold;
color: var(--accent);
}
/* Related Articles */
.related-articles {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 40px;
margin: 60px 0;
}
.related-articles h3 {
margin-bottom: 25px;
font-size: 28px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.related-card {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 15px;
text-decoration: none;
color: #fff;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s;
}
.related-card:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-3px);
}
.related-card h4 {
margin-bottom: 10px;
font-size: 18px;
}
.related-card p {
font-size: 14px;
color: rgba(255,255,255,0.6);
margin: 0;
}
/* Footer */
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 80px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 768px) {
.article-title {
font-size: 32px;
}
.article-content h2 {
font-size: 28px;
}
}
/* From balloon_strategies.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Header */
.page-header {
text-align: center;
padding: 60px 0 40px;
}
.page-header h1 {
font-size: 48px;
margin-bottom: 15px;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.page-header .subtitle {
font-size: 20px;
color: rgba(255,255,255,0.7);
max-width: 700px;
margin: 0 auto;
}
/* Critical Warning */
.critical-warning {
background: rgba(255, 107, 107, 0.15);
border: 3px solid rgba(255, 107, 107, 0.5);
border-radius: 20px;
padding: 40px;
margin-bottom: 50px;
}
.critical-warning h2 {
color: var(--primary);
margin-bottom: 20px;
font-size: 28px;
}
.critical-warning p {
color: rgba(255,255,255,0.95);
font-size: 18px;
line-height: 1.8;
margin-bottom: 15px;
}
.critical-warning strong {
color: #fff;
font-weight: 700;
}
/* Strategy Cards */
.strategies-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.strategy-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 35px;
transition: all 0.3s;
}
.strategy-card:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-5px);
}
.strategy-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 25px;
}
.strategy-icon {
font-size: 48px;
}
.risk-badge {
padding: 6px 15px;
border-radius: 15px;
font-size: 13px;
font-weight: 600;
}
.risk-badge.low {
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
}
.risk-badge.medium {
background: rgba(255, 230, 109, 0.2);
color: var(--accent);
}
.risk-badge.high {
background: rgba(255, 107, 107, 0.2);
color: var(--primary);
}
.strategy-title {
font-size: 28px;
margin-bottom: 15px;
}
.strategy-description {
color: rgba(255,255,255,0.8);
margin-bottom: 25px;
line-height: 1.6;
}
.strategy-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 25px;
}
.stat-item {
background: rgba(255,255,255,0.03);
padding: 15px;
border-radius: 10px;
}
.stat-label {
font-size: 12px;
color: rgba(255,255,255,0.6);
text-transform: uppercase;
margin-bottom: 5px;
}
.stat-value {
font-size: 20px;
font-weight: bold;
color: var(--accent);
}
.strategy-steps {
margin-bottom: 25px;
}
.strategy-steps h4 {
margin-bottom: 15px;
color: rgba(255,255,255,0.9);
}
.strategy-steps ol {
margin-left: 20px;
}
.strategy-steps li {
margin-bottom: 10px;
color: rgba(255,255,255,0.8);
}
.pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.pros, .cons {
padding: 15px;
border-radius: 10px;
}
.pros {
background: rgba(78, 205, 196, 0.05);
border-left: 3px solid var(--secondary);
}
.cons {
background: rgba(255, 107, 107, 0.05);
border-left: 3px solid var(--primary);
}
.pros h5, .cons h5 {
margin-bottom: 10px;
font-size: 14px;
}
.pros h5 { color: var(--secondary); }
.cons h5 { color: var(--primary); }
.pros ul, .cons ul {
list-style: none;
font-size: 13px;
}
.pros li, .cons li {
margin-bottom: 6px;
padding-left: 20px;
position: relative;
color: rgba(255,255,255,0.7);
}
.pros li:before {
content: "✓";
position: absolute;
left: 0;
color: var(--secondary);
}
.cons li:before {
content: "✗";
position: absolute;
left: 0;
color: var(--primary);
}
/* Scam Warning */
.scam-section {
background: rgba(255, 107, 107, 0.1);
border: 2px solid rgba(255, 107, 107, 0.3);
border-radius: 20px;
padding: 40px;
margin-bottom: 50px;
}
.scam-section h2 {
color: var(--primary);
margin-bottom: 25px;
font-size: 32px;
}
.scam-list {
display: grid;
gap: 20px;
}
.scam-item {
background: rgba(255,255,255,0.05);
padding: 25px;
border-radius: 15px;
border-left: 4px solid var(--primary);
}
.scam-item h3 {
color: var(--primary);
margin-bottom: 10px;
font-size: 20px;
}
.scam-item p {
color: rgba(255,255,255,0.85);
line-height: 1.6;
}
/* Bankroll Management */
.bankroll-section {
background: rgba(78, 205, 196, 0.05);
border: 1px solid rgba(78, 205, 196, 0.2);
border-radius: 20px;
padding: 40px;
margin-bottom: 50px;
}
.bankroll-section h2 {
color: var(--secondary);
margin-bottom: 25px;
font-size: 32px;
}
.bankroll-rules {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 30px;
}
.bankroll-rule {
background: rgba(255,255,255,0.05);
padding: 25px;
border-radius: 15px;
}
.bankroll-rule h4 {
color: var(--secondary);
margin-bottom: 10px;
}
.bankroll-rule p {
color: rgba(255,255,255,0.8);
font-size: 15px;
}
/* Truth Table */
.truth-section {
margin-bottom: 50px;
}
.section-title {
font-size: 32px;
margin-bottom: 30px;
text-align: center;
}
.truth-table {
background: rgba(255,255,255,0.05);
border-radius: 20px;
overflow: hidden;
}
.truth-table table {
width: 100%;
border-collapse: collapse;
}
.truth-table th,
.truth-table td {
padding: 20px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.truth-table th {
background: rgba(255,255,255,0.08);
font-weight: 600;
}
.myth {
color: rgba(255, 107, 107, 0.9);
}
.truth {
color: rgba(78, 205, 196, 0.9);
}
/* Calculator */
.calculator-section {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 40px;
margin-bottom: 50px;
}
.calculator-inputs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.input-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.input-group label {
font-size: 14px;
color: rgba(255,255,255,0.7);
font-weight: 600;
}
.input-group input,
.input-group select {
padding: 12px;
border-radius: 10px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 16px;
}
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.result-card {
background: rgba(255,255,255,0.03);
padding: 20px;
border-radius: 15px;
text-align: center;
}
.result-label {
font-size: 13px;
color: rgba(255,255,255,0.6);
margin-bottom: 10px;
}
.result-value {
font-size: 28px;
font-weight: bold;
color: var(--accent);
}
/* Responsive */
@media (max-width: 768px) {
.page-header h1 {
font-size: 32px;
}
.strategies-grid {
grid-template-columns: 1fr;
}
.pros-cons {
grid-template-columns: 1fr;
}
}
/* From balloon_strategies_page.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--dark: #1A1A2E;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-3: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.9);
text-decoration: none;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--accent);
}
/* Hero */
.hero {
padding: 80px 0 40px;
text-align: center;
}
.hero h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero .subtitle {
font-size: 20px;
color: rgba(255,255,255,0.8);
max-width: 700px;
margin: 0 auto;
}
/* Warning Banner */
.warning-banner {
background: linear-gradient(135deg, rgba(255, 107, 107, 0.15) 0%, rgba(255, 142, 83, 0.15) 100%);
border: 2px solid rgba(255, 107, 107, 0.4);
border-radius: 20px;
padding: 30px;
margin: 40px 0;
}
.warning-content {
display: flex;
gap: 20px;
align-items: start;
}
.warning-icon {
font-size: 48px;
flex-shrink: 0;
}
.warning-text h3 {
color: #FF6B6B;
margin-bottom: 15px;
font-size: 24px;
}
.warning-text p {
color: rgba(255,255,255,0.9);
line-height: 1.8;
margin-bottom: 10px;
}
.warning-text ul {
margin-top: 15px;
padding-left: 20px;
}
.warning-text li {
color: rgba(255,255,255,0.8);
margin-bottom: 8px;
line-height: 1.6;
}
/* Strategy Cards */
.strategies-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
padding: 60px 0;
}
.strategy-card {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 35px;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s;
}
.strategy-card:hover {
transform: translateY(-5px);
background: rgba(255,255,255,0.08);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.strategy-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.strategy-icon {
font-size: 48px;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.05);
border-radius: 15px;
}
.strategy-title h3 {
font-size: 26px;
margin-bottom: 5px;
}
.strategy-subtitle {
color: rgba(255,255,255,0.6);
font-size: 14px;
}
.strategy-stats {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 20px;
margin-bottom: 25px;
}
.stat-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.stat-row:last-child {
border-bottom: none;
}
.stat-label {
color: rgba(255,255,255,0.7);
}
.stat-value {
font-weight: bold;
color: var(--secondary);
}
.strategy-description {
color: rgba(255,255,255,0.8);
line-height: 1.7;
margin-bottom: 25px;
}
.strategy-tips {
background: rgba(78, 205, 196, 0.1);
border-left: 3px solid var(--secondary);
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
}
.strategy-tips h4 {
color: var(--secondary);
margin-bottom: 15px;
font-size: 18px;
}
.strategy-tips ul {
list-style: none;
}
.strategy-tips li {
padding: 8px 0;
padding-left: 25px;
position: relative;
color: rgba(255,255,255,0.8);
line-height: 1.6;
}
.strategy-tips li:before {
content: "✓";
position: absolute;
left: 0;
color: var(--secondary);
font-weight: bold;
}
.risk-indicator {
display: inline-block;
padding: 8px 15px;
border-radius: 20px;
font-size: 13px;
font-weight: bold;
}
.risk-low {
background: rgba(78, 205, 196, 0.2);
color: #4ECDC4;
}
.risk-medium {
background: rgba(255, 230, 109, 0.2);
color: #FFE66D;
}
.risk-high {
background: rgba(255, 107, 107, 0.2);
color: #FF6B6B;
}
/* Bankroll Section */
.bankroll-section {
padding: 60px 0;
background: rgba(0,0,0,0.2);
}
.section-header {
text-align: center;
margin-bottom: 50px;
}
.section-header h2 {
font-size: 36px;
margin-bottom: 15px;
}
.section-header p {
font-size: 18px;
color: rgba(255,255,255,0.7);
max-width: 600px;
margin: 0 auto;
}
.bankroll-calculator {
max-width: 800px;
margin: 0 auto;
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 40px;
border: 1px solid rgba(255,255,255,0.1);
}
.calculator-input {
margin-bottom: 30px;
}
.calculator-input label {
display: block;
margin-bottom: 10px;
color: rgba(255,255,255,0.9);
font-weight: 600;
}
.calculator-input input {
width: 100%;
padding: 15px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.05);
color: #fff;
font-size: 18px;
}
.calculator-results {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 30px;
}
.result-box {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 15px;
text-align: center;
}
.result-label {
color: rgba(255,255,255,0.6);
font-size: 14px;
margin-bottom: 10px;
}
.result-value {
font-size: 28px;
font-weight: bold;
color: var(--accent);
}
/* Myths Section */
.myths-section {
padding: 60px 0;
}
.myths-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
.myth-card {
background: rgba(255, 107, 107, 0.1);
border: 1px solid rgba(255, 107, 107, 0.3);
border-radius: 15px;
padding: 25px;
}
.myth-header {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.myth-icon {
font-size: 32px;
}
.myth-card h4 {
color: #FF6B6B;
margin-bottom: 10px;
}
.myth-card p {
color: rgba(255,255,255,0.8);
line-height: 1.6;
}
.truth-badge {
background: rgba(78, 205, 196, 0.2);
color: var(--secondary);
padding: 5px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
display: inline-block;
margin-top: 10px;
}
/* Footer */
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 80px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 768px) {
.strategies-grid {
grid-template-columns: 1fr;
}
.calculator-results {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 32px;
}
}
/* From balloon_terms_of_service.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
line-height: 1.8;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
}
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content {
padding: 60px 0;
}
.page-header {
text-align: center;
margin-bottom: 50px;
}
.page-header h1 {
font-size: 42px;
margin-bottom: 15px;
}
.last-updated {
color: rgba(255,255,255,0.6);
font-size: 16px;
}
.intro-box {
background: rgba(255, 107, 107, 0.1);
border-left: 4px solid var(--primary);
border-radius: 15px;
padding: 25px;
margin-bottom: 40px;
}
.intro-box p {
color: rgba(255,255,255,0.9);
font-size: 17px;
margin-bottom: 10px;
}
.section {
background: rgba(255,255,255,0.03);
border-radius: 15px;
padding: 35px;
margin-bottom: 30px;
border: 1px solid rgba(255,255,255,0.1);
}
.section h2 {
font-size: 28px;
color: var(--accent);
margin-bottom: 20px;
}
.section h3 {
font-size: 22px;
color: #fff;
margin-top: 25px;
margin-bottom: 15px;
}
.section p {
color: rgba(255,255,255,0.85);
margin-bottom: 15px;
font-size: 16px;
}
.section ul {
margin: 15px 0;
padding-left: 25px;
}
.section li {
color: rgba(255,255,255,0.85);
margin-bottom: 10px;
}
.warning-box {
background: rgba(255, 107, 107, 0.15);
border: 2px solid rgba(255, 107, 107, 0.4);
padding: 20px;
margin: 20px 0;
border-radius: 10px;
}
.warning-box strong {
color: var(--primary);
}
.highlight-box {
background: rgba(78, 205, 196, 0.1);
border-left: 3px solid var(--secondary);
padding: 20px;
margin: 20px 0;
border-radius: 8px;
}
.contact-box {
background: rgba(78, 205, 196, 0.1);
border-radius: 15px;
padding: 30px;
margin-top: 40px;
text-align: center;
}
.contact-box h2 {
font-size: 28px;
margin-bottom: 15px;
color: var(--secondary);
}
.contact-box p {
font-size: 17px;
color: rgba(255,255,255,0.9);
margin-bottom: 10px;
}
.contact-box a {
color: var(--secondary);
text-decoration: none;
font-weight: bold;
}
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0 20px;
margin-top: 60px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
@media (max-width: 768px) {
.page-header h1 {
font-size: 32px;
}
.section {
padding: 25px 20px;
}
}
/* From index.html */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #FFE66D;
--dark: #1A1A2E;
--light: #F7F7F7;
--gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-3: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243e 100%);
color: #fff;
overflow-x: hidden;
min-height: 100vh;
}
/* Floating Balloons Background */
.balloons-bg {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
top: 0;
left: 0;
}
.floating-balloon {
position: absolute;
width: 50px;
height: 65px;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 50%),
linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
opacity: 0.1;
animation: floatUp 15s infinite linear;
}
.floating-balloon:nth-child(2) {
left: 20%;
animation-delay: 3s;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 50%),
linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
}
.floating-balloon:nth-child(3) {
left: 40%;
animation-delay: 5s;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 50%),
linear-gradient(135deg, #FFE66D 0%, #FFA502 100%);
}
.floating-balloon:nth-child(4) {
left: 60%;
animation-delay: 8s;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 50%),
linear-gradient(135deg, #A8E6CF 0%, #7FD1AE 100%);
}
.floating-balloon:nth-child(5) {
left: 80%;
animation-delay: 11s;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 50%),
linear-gradient(135deg, #C06C84 0%, #6C5B7B 100%);
}
@keyframes floatUp {
0% {
bottom: -100px;
transform: translateX(0) rotate(-5deg);
}
25% {
transform: translateX(20px) rotate(5deg);
}
50% {
transform: translateX(-10px) rotate(-3deg);
}
75% {
transform: translateX(15px) rotate(7deg);
}
100% {
bottom: 110%;
transform: translateX(0) rotate(-5deg);
}
}
/* Header */
.header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
padding: 15px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s ease;
}
.header.scrolled {
padding: 10px 0;
background: rgba(26, 26, 46, 0.98);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 24px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.logo-icon {
width: 40px;
height: 40px;
background: var(--gradient-2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.nav-menu {
display: flex;
gap: 30px;
list-style: none;
align-items: center;
}
.nav-menu a {
color: rgba(255,255,255,0.9);
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
position: relative;
}
.nav-menu a:hover {
color: var(--accent);
}
.play-now-btn {
background: var(--gradient-2);
color: #fff;
padding: 10px 25px;
border-radius: 25px;
font-weight: bold;
text-decoration: none;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
}
.play-now-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
}
/* Page Navigation Section */
.page-navigation {
padding: 40px 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-top: 70px;
}
.nav-wrapper {
background: rgba(255,255,255,0.03);
border-radius: 30px;
padding: 40px;
border: 1px solid rgba(255,255,255,0.1);
}
.nav-header {
text-align: center;
margin-bottom: 30px;
}
.nav-header h2 {
font-size: 32px;
margin-bottom: 10px;
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-header p {
color: rgba(255,255,255,0.7);
font-size: 16px;
}
.nav-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 30px;
}
.nav-item {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 15px;
padding: 15px;
display: flex;
align-items: center;
gap: 15px;
text-decoration: none;
color: #fff;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.nav-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left 0.5s;
}
.nav-item:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-3px);
border-color: var(--accent);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.nav-item:hover::before {
left: 100%;
}
.nav-icon {
font-size: 28px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.05);
border-radius: 12px;
flex-shrink: 0;
}
.nav-content {
flex: 1;
}
.nav-title {
font-weight: 600;
font-size: 16px;
margin-bottom: 3px;
}
.nav-desc {
font-size: 13px;
color: rgba(255,255,255,0.6);
}
.nav-summary {
display: flex;
justify-content: center;
gap: 40px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.summary-item {
display: flex;
align-items: center;
gap: 10px;
}
.summary-label {
color: rgba(255,255,255,0.5);
font-size: 14px;
}
.summary-value {
font-weight: bold;
color: var(--accent);
font-size: 16px;
}
/* Hero Section */
.hero {
padding: 60px 0;
position: relative;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.hero-text h1 {
font-size: 48px;
margin-bottom: 20px;
line-height: 1.2;
font-weight: 700;
}
.gradient-text {
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-text .subtitle {
font-size: 20px;
color: rgba(255,255,255,0.8);
margin-bottom: 30px;
line-height: 1.5;
}
.hero-buttons {
display: flex;
gap: 20px;
margin-bottom: 40px;
}
.btn-demo {
background: var(--gradient-2);
color: #fff;
padding: 15px 35px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s;
box-shadow: 0 10px 30px rgba(245, 87, 108, 0.3);
}
.btn-demo:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(245, 87, 108, 0.4);
}
.btn-guide {
background: transparent;
color: #fff;
padding: 15px 35px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
border: 2px solid rgba(255,255,255,0.3);
transition: all 0.3s;
}
.btn-guide:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.5);
}
/* Game Demo Area */
.game-demo-container {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 20px;
border: 1px solid rgba(255,255,255,0.1);
position: relative;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
min-height: 500px;
}
.game-demo-container::before {
content: '🎮 DEMO MODE';
position: absolute;
top: 30px;
right: -30px;
background: var(--gradient-2);
color: #fff;
padding: 5px 40px;
font-size: 12px;
font-weight: bold;
transform: rotate(45deg);
z-index: 10;
letter-spacing: 1px;
}
/* Freedemo widget styling */
.freedemo-game-widget {
width: 100%;
min-height: 450px;
border-radius: 15px;
overflow: hidden;
}
.freedemo-game-widget iframe {
border-radius: 15px !important;
}
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(-2deg);
}
50% {
transform: translateY(-20px) rotate(2deg);
}
}
/* Stats Cards */
.stats-section {
padding: 40px 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.stat-card {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 25px;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s;
}
.stat-card:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-5px);
}
.stat-card.green {
background: linear-gradient(135deg, rgba(78, 205, 196, 0.1), rgba(68, 160, 141, 0.1));
border-color: rgba(78, 205, 196, 0.3);
}
.stat-card.red {
background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 142, 83, 0.1));
border-color: rgba(255, 107, 107, 0.3);
}
.stat-card.purple {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
border-color: rgba(102, 126, 234, 0.3);
}
.stat-label {
font-size: 14px;
color: rgba(255,255,255,0.6);
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.stat-value {
font-size: 32px;
font-weight: bold;
margin-bottom: 5px;
}
.stat-subtext {
font-size: 14px;
color: rgba(255,255,255,0.7);
}
/* Casino List */
.casinos-section {
padding: 60px 0;
}
.section-header {
text-align: center;
margin-bottom: 50px;
}
.section-header h2 {
font-size: 36px;
margin-bottom: 15px;
}
.section-header p {
font-size: 18px;
color: rgba(255,255,255,0.7);
}
.casino-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.casino-item {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 25px;
display: grid;
grid-template-columns: 150px 1fr 200px;
gap: 30px;
align-items: center;
transition: all 0.3s;
}
.casino-item:hover {
background: rgba(255,255,255,0.06);
transform: translateX(5px);
border-color: rgba(255,255,255,0.2);
}
.casino-logo-area {
background: #fff;
border-radius: 15px;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
height: 80px;
}
.casino-logo-text {
font-size: 20px;
font-weight: bold;
color: var(--dark);
}
.casino-info h3 {
font-size: 24px;
margin-bottom: 10px;
}
.casino-bonus {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.bonus-badge {
background: var(--gradient-2);
padding: 8px 15px;
border-radius: 20px;
font-weight: bold;
font-size: 18px;
}
.bonus-text {
color: rgba(255,255,255,0.8);
}
.casino-features {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.feature-tag {
background: rgba(255,255,255,0.1);
padding: 5px 12px;
border-radius: 15px;
font-size: 14px;
color: rgba(255,255,255,0.8);
}
.casino-action {
display: flex;
flex-direction: column;
gap: 10px;
}
.btn-play {
background: var(--gradient-2);
color: #fff;
padding: 12px 30px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
text-align: center;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
}
.btn-play:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
}
.rating {
display: flex;
justify-content: center;
gap: 5px;
}
.star {
color: #FFD700;
}
/* Game Info Tabs */
.game-info {
padding: 60px 0;
background: rgba(0,0,0,0.2);
}
.tabs {
display: flex;
gap: 10px;
justify-content: center;
margin-bottom: 40px;
flex-wrap: wrap;
}
.tab-btn {
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.7);
padding: 12px 30px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 25px;
cursor: pointer;
transition: all 0.3s;
font-size: 16px;
}
.tab-btn.active {
background: var(--gradient-2);
color: #fff;
border-color: transparent;
}
.tab-btn:hover:not(.active) {
background: rgba(255,255,255,0.1);
color: #fff;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.content-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.info-card {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 30px;
border: 1px solid rgba(255,255,255,0.1);
}
.info-card h3 {
font-size: 22px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.info-card p {
color: rgba(255,255,255,0.8);
line-height: 1.6;
margin-bottom: 15px;
}
.info-list {
list-style: none;
padding: 0;
}
.info-list li {
padding: 10px 0;
color: rgba(255,255,255,0.8);
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.info-list li:last-child {
border-bottom: none;
}
/* Live Wins Ticker */
.live-wins-section {
padding: 30px 0;
background: linear-gradient(135deg, rgba(240, 147, 251, 0.05) 0%, rgba(245, 87, 108, 0.05) 100%);
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.wins-ticker {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.ticker-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.ticker-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
font-weight: bold;
}
.ticker-label .live-dot {
width: 12px;
height: 12px;
background: #ff4757;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
}
.ticker-stats {
display: flex;
gap: 30px;
font-size: 14px;
color: rgba(255,255,255,0.7);
}
.ticker-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 15px;
max-height: 200px;
overflow-y: auto;
padding-right: 10px;
}
.ticker-content::-webkit-scrollbar {
width: 6px;
}
.ticker-content::-webkit-scrollbar-track {
background: rgba(255,255,255,0.05);
border-radius: 3px;
}
.ticker-content::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 3px;
}
.ticker-item {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 15px;
padding: 15px;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s;
animation: slideIn 0.5s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.ticker-item:hover {
background: rgba(255,255,255,0.08);
transform: translateX(5px);
}
.ticker-item.big-win {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 107, 107, 0.1) 100%);
border-color: rgba(255, 215, 0, 0.3);
}
.win-info {
display: flex;
align-items: center;
gap: 12px;
}
.player-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--gradient-2);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 18px;
}
.win-details {
display: flex;
flex-direction: column;
gap: 3px;
}
.player-name {
font-weight: 600;
color: #fff;
font-size: 14px;
}
.win-time {
font-size: 12px;
color: rgba(255,255,255,0.5);
}
.win-amount {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
.amount-value {
font-size: 18px;
font-weight: bold;
color: #4ECDC4;
}
.multiplier-badge {
background: rgba(255, 230, 109, 0.2);
color: #FFE66D;
padding: 3px 8px;
border-radius: 10px;
font-size: 12px;
font-weight: bold;
}
/* Calculator Section */
.calculator-section {
padding: 60px 0;
background: rgba(0,0,0,0.3);
}
.calculator-container {
max-width: 800px;
margin: 0 auto;
background: rgba(255,255,255,0.05);
border-radius: 30px;
padding: 40px;
border: 1px solid rgba(255,255,255,0.1);
}
.calc-inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 40px;
}
.input-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.input-group label {
font-size: 14px;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
letter-spacing: 1px;
}
.input-group input[type="number"] {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 15px;
padding: 15px;
color: #fff;
font-size: 20px;
font-weight: bold;
}
.input-group input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 8px;
border-radius: 5px;
background: rgba(255,255,255,0.1);
outline: none;
}
.input-group input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: var(--gradient-2);
cursor: pointer;
}
.multiplier-value {
font-size: 32px;
font-weight: bold;
color: var(--accent);
text-align: center;
margin-top: 10px;
}
.calc-results {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.result-card {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 20px;
text-align: center;
border: 1px solid rgba(255,255,255,0.1);
}
.result-label {
font-size: 14px;
color: rgba(255,255,255,0.7);
margin-bottom: 10px;
}
.result-value {
font-size: 28px;
font-weight: bold;
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.strategy-suggestion {
background: rgba(78, 205, 196, 0.1);
border: 1px solid rgba(78, 205, 196, 0.3);
border-radius: 20px;
padding: 25px;
}
.strategy-suggestion h3 {
margin-bottom: 15px;
color: #4ECDC4;
}
.strategy-suggestion p {
color: rgba(255,255,255,0.8);
line-height: 1.6;
}
/* Statistics Section */
.statistics-section {
padding: 60px 0;
}
.live-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.live-stat-card {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 25px;
text-align: center;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s;
}
.live-stat-card:hover {
transform: translateY(-5px);
background: rgba(255,255,255,0.08);
}
.live-stat-icon {
font-size: 36px;
margin-bottom: 15px;
}
.live-stat-value {
font-size: 32px;
font-weight: bold;
margin-bottom: 10px;
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.live-stat-label {
font-size: 14px;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
letter-spacing: 1px;
}
.recent-rounds {
background: rgba(255,255,255,0.03);
border-radius: 20px;
padding: 30px;
border: 1px solid rgba(255,255,255,0.1);
}
.recent-rounds h3 {
margin-bottom: 20px;
font-size: 24px;
}
.rounds-list {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.round-item {
background: rgba(255,255,255,0.05);
padding: 10px 15px;
border-radius: 15px;
font-weight: bold;
transition: all 0.3s;
}
.round-item:hover {
transform: scale(1.1);
}
.round-item.high {
background: rgba(255, 107, 107, 0.2);
color: #FF6B6B;
}
.round-item.medium {
background: rgba(255, 230, 109, 0.2);
color: #FFE66D;
}
.round-item.low {
background: rgba(78, 205, 196, 0.2);
color: #4ECDC4;
}
/* Reviews Section */
.reviews-section {
padding: 60px 0;
background: rgba(0,0,0,0.2);
}
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.review-card {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 30px;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s;
}
.review-card:hover {
transform: translateY(-5px);
background: rgba(255,255,255,0.08);
}
.review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.reviewer-info {
display: flex;
align-items: center;
gap: 15px;
}
.reviewer-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--gradient-2);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
}
.reviewer-name {
font-weight: bold;
font-size: 18px;
}
.review-date {
font-size: 14px;
color: rgba(255,255,255,0.5);
}
.review-rating {
display: flex;
gap: 3px;
}
.review-content {
color: rgba(255,255,255,0.8);
line-height: 1.6;
margin-bottom: 15px;
}
.review-win {
display: inline-block;
background: rgba(78, 205, 196, 0.2);
color: #4ECDC4;
padding: 5px 15px;
border-radius: 15px;
font-weight: bold;
}
.review-summary {
text-align: center;
margin-top: 40px;
}
.summary-card {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 30px;
display: inline-block;
border: 1px solid rgba(255,255,255,0.1);
}
.summary-rating {
font-size: 48px;
font-weight: bold;
margin-bottom: 10px;
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.summary-stars {
margin-bottom: 10px;
}
.summary-text {
color: rgba(255,255,255,0.7);
}
/* Strategy Helper */
.strategy-helper {
padding: 60px 0;
}
.risk-levels {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 40px;
}
.risk-btn {
background: rgba(255,255,255,0.05);
border: 2px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 30px;
cursor: pointer;
transition: all 0.3s;
color: #fff;
text-align: center;
}
.risk-btn:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-3px);
}
.risk-btn.active {
background: rgba(255,255,255,0.1);
border-color: var(--accent);
}
.risk-icon {
font-size: 48px;
margin-bottom: 15px;
}
.risk-name {
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
}
.risk-desc {
color: rgba(255,255,255,0.7);
}
.strategy-details {
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 40px;
border: 1px solid rgba(255,255,255,0.1);
}
.strategy-details h3 {
font-size: 28px;
margin-bottom: 30px;
color: var(--accent);
}
.strategy-stat {
display: flex;
justify-content: space-between;
padding: 15px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.stat-name {
color: rgba(255,255,255,0.7);
}
.stat-value {
font-weight: bold;
color: #4ECDC4;
}
.strategy-tips {
margin-top: 30px;
background: rgba(78, 205, 196, 0.1);
border-radius: 15px;
padding: 25px;
}
.strategy-tips h4 {
margin-bottom: 15px;
color: #4ECDC4;
}
.strategy-tips ul {
list-style: none;
}
.strategy-tips li {
padding: 8px 0;
color: rgba(255,255,255,0.8);
position: relative;
padding-left: 25px;
}
.strategy-tips li:before {
content: "✓";
position: absolute;
left: 0;
color: #4ECDC4;
font-weight: bold;
}
/* How to Play Section */
.how-to-play {
padding: 60px 0;
background: linear-gradient(135deg, rgba(78, 205, 196, 0.05) 0%, rgba(68, 160, 141, 0.05) 100%);
}
.steps-timeline {
max-width: 900px;
margin: 0 auto;
position: relative;
}
.steps-timeline::before {
content: '';
position: absolute;
left: 40px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--gradient-2), var(--gradient-3));
}
.step-item {
display: flex;
gap: 30px;
margin-bottom: 40px;
position: relative;
}
.step-number {
width: 80px;
height: 80px;
background: var(--gradient-2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: bold;
flex-shrink: 0;
position: relative;
z-index: 2;
box-shadow: 0 10px 30px rgba(245, 87, 108, 0.3);
}
.step-content {
flex: 1;
background: rgba(255,255,255,0.05);
border-radius: 20px;
padding: 25px;
border: 1px solid rgba(255,255,255,0.1);
}
.step-content h3 {
font-size: 24px;
margin-bottom: 10px;
color: #fff;
}
.step-content p {
color: rgba(255,255,255,0.8);
margin-bottom: 15px;
line-height: 1.6;
}
.step-tip {
background: rgba(78, 205, 196, 0.1);
border-left: 3px solid #4ECDC4;
padding: 10px 15px;
border-radius: 5px;
font-size: 14px;
color: #4ECDC4;
}
/* Comparison Table Section */
.comparison-section {
padding: 60px 0;
background: rgba(0,0,0,0.3);
}
.comparison-table-wrapper {
overflow-x: auto;
margin-bottom: 30px;
}
.comparison-table {
width: 100%;
background: rgba(255,255,255,0.05);
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
}
.comparison-table th,
.comparison-table td {
padding: 15px;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.comparison-table thead {
background: rgba(255,255,255,0.08);
}
.comparison-table th {
font-weight: bold;
color: #fff;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}
.comparison-table th.highlight,
.comparison-table td.highlight {
background: rgba(240, 147, 251, 0.1);
color: #fff;
font-weight: bold;
}
.comparison-table tbody tr:hover {
background: rgba(255,255,255,0.03);
}
.comparison-table tbody td {
color: rgba(255,255,255,0.8);
}
.comparison-summary {
display: flex;
justify-content: center;
}
.summary-box {
background: rgba(78, 205, 196, 0.1);
border: 1px solid rgba(78, 205, 196, 0.3);
border-radius: 20px;
padding: 30px;
max-width: 600px;
}
.summary-box h3 {
color: #4ECDC4;
margin-bottom: 20px;
font-size: 24px;
}
.summary-box ul {
list-style: none;
}
.summary-box li {
padding: 10px 0;
color: rgba(255,255,255,0.8);
position: relative;
padding-left: 30px;
}
.summary-box li::before {
content: '✓';
position: absolute;
left: 0;
color: #4ECDC4;
font-weight: bold;
font-size: 18px;
}
/* Bonus Offers Section */
.bonus-offers {
padding: 60px 0;
}
.bonus-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.bonus-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 30px;
position: relative;
transition: all 0.3s;
}
.bonus-card:hover {
transform: translateY(-10px);
background: rgba(255,255,255,0.08);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.bonus-card.featured {
background: linear-gradient(135deg, rgba(240, 147, 251, 0.1) 0%, rgba(245, 87, 108, 0.1) 100%);
border: 2px solid rgba(240, 147, 251, 0.3);
}
.bonus-badge {
position: absolute;
top: -10px;
right: 20px;
background: var(--gradient-2);
color: #fff;
padding: 5px 15px;
border-radius: 15px;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
}
.bonus-casino {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
color: #fff;
}
.bonus-amount {
margin-bottom: 20px;
}
.bonus-amount .percentage {
font-size: 48px;
font-weight: bold;
background: var(--gradient-2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.bonus-amount .description {
display: block;
font-size: 16px;
color: rgba(255,255,255,0.7);
margin-top: 5px;
}
.bonus-code {
background: rgba(255,255,255,0.05);
border: 1px dashed rgba(255,255,255,0.3);
border-radius: 10px;
padding: 15px;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.code-label {
font-size: 14px;
color: rgba(255,255,255,0.6);
}
.code-value {
font-size: 18px;
font-weight: bold;
color: var(--accent);
letter-spacing: 2px;
}
.bonus-features {
list-style: none;
margin-bottom: 20px;
}
.bonus-features li {
padding: 8px 0;
color: rgba(255,255,255,0.8);
font-size: 14px;
}
.bonus-claim-btn {
display: block;
width: 100%;
background: var(--gradient-2);
color: #fff;
padding: 15px;
border-radius: 15px;
text-align: center;
text-decoration: none;
font-weight: bold;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(245, 87, 108, 0.3);
}
.bonus-claim-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(245, 87, 108, 0.4);
}
/* Tips & Tricks Section */
.tips-tricks {
padding: 60px 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}
.tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
.tip-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 30px;
transition: all 0.3s;
}
.tip-card:hover {
transform: translateY(-5px);
background: rgba(255,255,255,0.08);
}
.tip-icon {
font-size: 48px;
margin-bottom: 20px;
display: inline-block;
}
.tip-card h3 {
font-size: 22px;
margin-bottom: 15px;
color: #fff;
}
.tip-card p {
color: rgba(255,255,255,0.8);
line-height: 1.6;
margin-bottom: 20px;
}
.tip-effectiveness {
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
font-size: 14px;
color: rgba(255,255,255,0.6);
}
.tip-effectiveness span {
font-weight: bold;
padding: 3px 10px;
border-radius: 10px;
margin-left: 10px;
}
.tip-effectiveness .high {
background: rgba(78, 205, 196, 0.2);
color: #4ECDC4;
}
.tip-effectiveness .medium {
background: rgba(255, 230, 109, 0.2);
color: #FFE66D;
}
.tip-effectiveness .low {
background: rgba(255, 107, 107, 0.2);
color: #FF6B6B;
}
/* FAQ Section */
.faq-section {
padding: 60px 0;
background: rgba(0,0,0,0.2);
}
.faq-grid {
max-width: 900px;
margin: 0 auto;
}
.faq-item {
background: rgba(255,255,255,0.05);
border-radius: 20px;
margin-bottom: 15px;
border: 1px solid rgba(255,255,255,0.1);
overflow: hidden;
transition: all 0.3s;
}
.faq-item:hover {
background: rgba(255,255,255,0.07);
}
.faq-item.active {
background: rgba(255,255,255,0.08);
border-color: var(--accent);
}
.faq-question {
padding: 25px 30px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
}
.faq-question h3 {
font-size: 18px;
margin: 0;
color: #fff;
}
.faq-toggle {
font-size: 28px;
font-weight: 300;
color: var(--accent);
transition: transform 0.3s;
}
.faq-item.active .faq-toggle {
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.active .faq-answer {
max-height: 300px;
padding: 0 30px 25px 30px;
}
.faq-answer p {
color: rgba(255,255,255,0.8);
line-height: 1.6;
margin: 0;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.page-navigation {
padding: 30px 0;
}
.nav-wrapper {
padding: 25px 15px;
}
.nav-grid {
grid-template-columns: 1fr;
}
.nav-summary {
flex-direction: column;
gap: 10px;
align-items: center;
}
}
/* Footer */
.footer {
background: rgba(26, 26, 46, 0.95);
padding: 40px 0;
margin-top: 80px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 30px;
}
.footer-column h4 {
font-size: 18px;
margin-bottom: 20px;
color: var(--accent);
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 12px;
}
.footer-column ul li a {
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: all 0.3s;
}
.footer-column ul li a:hover {
color: #fff;
}
.footer-bottom {
text-align: center;
padding-top: 30px;
border-top: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.5);
}
/* Responsive */
@media (max-width: 768px) {
.hero-content {
grid-template-columns: 1fr;
}
.hero-text h1 {
font-size: 36px;
}
.casino-item {
grid-template-columns: 1fr;
text-align: center;
}
.nav-menu {
display: none;
}
.stats-grid {
grid-template-columns: 1fr;
}
}
/* === Common header/footer (auto-injected) === */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:#fff;padding:8px;border:1px solid #ccc;z-index:1000}
.site-header{display:flex;gap:24px;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.06)}
.site-brand a{text-decoration:none;font-weight:600;font-size:1.05rem}
.site-nav ul{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:0;padding:0}
.site-nav a{text-decoration:none;padding:6px 8px;border-radius:8px}
.site-nav a.active{outline:1px dotted currentColor}
.site-footer{margin-top:48px;padding:24px 16px;border-top:1px solid rgba(0,0,0,.06);font-size:.95rem}
.site-footer .footer-nav{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:12px 0 0;padding:0}
.site-meta{margin-top:8px;opacity:.9}
@media (prefers-color-scheme: dark){
.site-header{border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer{border-top:1px solid rgba(255,255,255,.12)}
}
/* === Header submenu for Blog === */
.site-nav li{position:relative}
.site-nav li.has-submenu > a:after{content:"▾";margin-left:.25em;font-size:.8em}
.site-nav li .submenu{display:none;position:absolute;top:100%;left:0;min-width:220px;padding:8px 0;margin:8px 0 0 0;list-style:none;background:var(--menu-bg, #fff);border:1px solid rgba(0,0,0,.08);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.08);z-index:100}
.site-nav li:hover > .submenu, .site-nav li:focus-within > .submenu{display:block}
.site-nav li .submenu a{display:block;padding:8px 12px;white-space:nowrap}
@media (prefers-color-scheme: dark){
.site-nav li .submenu{background:var(--menu-bg, #111);border-color:rgba(255,255,255,.12)}
}
/* === Buttons (auto-injected) === */
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;border:1px solid rgba(0,0,0,.1)}
.btn-primary{font-weight:600}
.btn-primary:hover{transform:translateY(-1px)}
@media (prefers-color-scheme: dark){
.btn{border-color:rgba(255,255,255,.15)}
}
.error-wrap{padding:48px 16px;max-width:960px;margin:0 auto;text-align:center}
.error-code{font-size:4rem;font-weight:800;letter-spacing:.03em;margin:0 0 8px}
.error-title{font-size:1.75rem;margin:0 0 16px;font-weight:700}
.error-text{opacity:.9;max-width:720px;margin:0 auto 24px;line-height:1.6}
/* === AC Header/Footer v2 === */
:root{
--ac-bg:#ffffff; --ac-fg:#111111; --ac-muted:#666666; --ac-line:rgba(0,0,0,.08);
--ac-brand:#6b46c1; --ac-brand-contrast:#ffffff;
}
@media (prefers-color-scheme: dark){
:root{ --ac-bg:#0f1115; --ac-fg:#eaeaea; --ac-muted:#a0a0a0; --ac-line:rgba(255,255,255,.12) }
}
.ac-container{max-width:1200px;margin:0 auto;padding:12px 16px}
.ac-header{position:sticky;top:0;z-index:100;background:var(--ac-bg);border-bottom:1px solid var(--ac-line)}
.ac-header .ac-container{display:flex;align-items:center;gap:16px}
.ac-brand{font-weight:800;letter-spacing:.2px;text-decoration:none;color:var(--ac-fg)}
.ac-brand:hover{opacity:.9}
.ac-burger{display:none;position:relative;width:40px;height:40px;border:1px solid var(--ac-line);border-radius:12px;background:transparent}
.ac-burger span{position:absolute;left:9px;right:9px;height:2px;background:var(--ac-fg);transition:.2s}
.ac-burger span:nth-child(1){top:12px}
.ac-burger span:nth-child(2){top:19px}
.ac-burger span:nth-child(3){top:26px}
.ac-nav{margin-left:auto}
.ac-nav__list{display:flex;flex-wrap:wrap;gap:8px 12px;list-style:none;margin:0;padding:0}
.ac-nav__list > li > a{display:inline-block;text-decoration:none;padding:8px 10px;border-radius:10px}
.ac-nav__list > li > a.active{outline:1px dotted currentColor}
.ac-nav__list li.has-submenu{position:relative}
.ac-submenu{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:var(--ac-bg);border:1px solid var(--ac-line);border-radius:12px;list-style:none;padding:8px 0;margin:0;box-shadow:0 10px 30px rgba(0,0,0,.08);z-index:1000}
.ac-submenu a{display:block;padding:8px 12px;text-decoration:none}
.ac-nav__list li.has-submenu:hover > .ac-submenu,
.ac-nav__list li.has-submenu:focus-within > .ac-submenu{display:block}
.ac-more > a::after{content:"▾";margin-left:.25em;font-size:.8em}
@media (max-width: 920px){
.ac-burger{display:block}
.ac-nav{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:saturate(120%) blur(2px);display:none}
.ac-nav.open{display:block}
.ac-nav__panel{position:absolute;top:0;right:0;bottom:0;width:min(86%,360px);background:var(--ac-bg);border-left:1px solid var(--ac-line);padding:16px;overflow:auto}
.ac-nav__list{display:block}
.ac-nav__list li{margin:2px 0}
.ac-submenu{position:static;display:block;border:none;box-shadow:none;padding:0;margin:4px 0 8px 12px}
}
.ac-footer{margin-top:56px;border-top:1px solid var(--ac-line);background:var(--ac-bg)}
.ac-footer .ac-container{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;padding:24px 16px}
.ac-footer__brand{font-weight:600}
.ac-footer__muted{color:var(--ac-muted);font-size:.95rem}
.ac-footer h2{font-size:1rem;margin:0 0 8px 0}
.ac-footer ul{list-style:none;margin:0;padding:0}
.ac-footer li{margin:6px 0}
.ac-footer a{text-decoration:none}
.ac-footer__meta{grid-column:1/-1;margin-top:8px;color:var(--ac-muted)}
@media (max-width: 840px){
.ac-footer .ac-container{grid-template-columns:1fr}
}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
/* === UX Header/Footer v3 === */
:root{
--ux-bg:#ffffff; --ux-fg:#0f1115; --ux-muted:#60646c; --ux-line:rgba(0,0,0,.08);
--ux-brand:#6b46c1; --ux-brand-contrast:#ffffff;
--ux-grad:linear-gradient(135deg, #ff7ab6 0%, #6b46c1 50%, #2ec5ff 100%);
--ux-radius:14px;
--ux-shadow:0 8px 28px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
:root{ --ux-bg:#0f1115; --ux-fg:#eaeaea; --ux-muted:#a0a0a0; --ux-line:rgba(255,255,255,.12) }
}
.ux-container{max-width:1240px;margin:0 auto;padding:12px 16px}
.ux-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.65);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--ux-line)}
@media (prefers-color-scheme: dark){
.ux-header{background:rgba(15,17,21,.65)}
}
.ux-header.is-scrolled{backdrop-filter:saturate(160%) blur(16px)}
.ux-header .ux-bar{display:flex;align-items:center;gap:16px}
.ux-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ux-fg);font-weight:800;letter-spacing:.2px}
.ux-brand .dot{width:10px;height:10px;border-radius:999px;background:var(--ux-grad)}
.ux-nav{margin-left:auto}
.ux-nav__list{display:flex;flex-wrap:wrap;gap:8px 12px;list-style:none;margin:0;padding:0}
.ux-nav__list > li > a{display:inline-block;text-decoration:none;padding:8px 12px;border-radius:999px}
.ux-nav__list > li > a:hover{background:rgba(0,0,0,.04)}
.ux-nav__list > li > a.active{outline:1px dashed currentColor}
.ux-cta{margin-left:8px}
.ux-btn{display:inline-block;text-decoration:none;padding:10px 14px;border-radius:999px;font-weight:600;box-shadow:var(--ux-shadow);background:var(--ux-grad);color:#fff}
.ux-burger{display:none;width:42px;height:42px;border:1px solid var(--ux-line);border-radius:12px;background:transparent;position:relative}
.ux-burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--ux-fg);transition:.2s}
.ux-burger span:nth-child(1){top:12px}
.ux-burger span:nth-child(2){top:20px}
.ux-burger span:nth-child(3){top:28px}
@media (max-width: 900px){
.ux-burger{display:block}
.ux-nav{position:fixed;inset:0;background:rgba(0,0,0,.25);display:none}
.ux-nav.open{display:block}
.ux-nav__panel{position:absolute;top:0;right:0;bottom:0;width:min(86%,360px);background:var(--ux-bg);border-left:1px solid var(--ux-line);padding:16px;overflow:auto}
.ux-nav__list{display:block}
.ux-nav__list li{margin:6px 0}
}
.ux-footer{margin-top:64px;background:var(--ux-bg);border-top:1px solid var(--ux-line)}
.ux-footer .ux-container{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:24px;padding:28px 16px}
.ux-footer__brand{font-weight:700}
.ux-muted{color:var(--ux-muted);font-size:.95rem}
.ux-footer h2{font-size:1rem;margin:0 0 8px}
.ux-footer ul{list-style:none;margin:0;padding:0}
.ux-footer li{margin:6px 0}
.ux-footer a{text-decoration:none}
.ux-footer__meta{grid-column:1/-1;margin-top:8px}
@media (max-width: 860px){
.ux-footer .ux-container{grid-template-columns:1fr}
}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:var(--ux-bg);padding:8px;border:1px solid var(--ux-line);z-index:10000}
/* === CT-style Header/Footer === */
:root{
--ct-bg: #0f1115; --ct-fg: #e9e9ef; --ct-muted: #a3a7b0; --ct-line: rgba(255,255,255,.12);
--ct-accent: #ff3b8e; --ct-accent-2:#4cc9f0;
--ct-radius: 14px;
}
@media (prefers-color-scheme: light){
:root{ --ct-bg:#ffffff; --ct-fg:#0f1115; --ct-muted:#656b74; --ct-line:rgba(0,0,0,.08) }
}
/* header */
.ct-header{position:sticky;top:0;z-index:1000;background:rgba(15,17,21,.72);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--ct-line)}
@media (prefers-color-scheme: light){ .ct-header{background:rgba(255,255,255,.75)} }
.ct-container{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px}
.ct-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ct-fg);font-weight:800}
.ct-brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--ct-accent),var(--ct-accent-2))}
.ct-nav{margin-left:auto}
.ct-nav__list{display:flex;gap:8px 12px;list-style:none;margin:0;padding:0;align-items:center}
.ct-nav__list > li > a{display:inline-block;padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--ct-fg)}
.ct-nav__list > li > a:hover{background:rgba(255,255,255,.08)}
.ct-nav__list > li > a.active{outline:1px dashed currentColor}
.ct-has-sub{position:relative}
.ct-sub{display:none;position:absolute;top:calc(100% + 10px);left:0;min-width:240px;background:var(--ct-bg);border:1px solid var(--ct-line);border-radius:12px;list-style:none;padding:8px;margin:0;box-shadow:0 12px 32px rgba(0,0,0,.2)}
.ct-sub a{display:block;padding:8px 12px;text-decoration:none}
.ct-has-sub:hover .ct-sub, .ct-has-sub:focus-within .ct-sub{display:block}
.ct-cta{display:flex;gap:8px;margin-left:8px}
.ct-btn{display:inline-block;padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:600}
.ct-btn--pri{background:linear-gradient(135deg,var(--ct-accent),var(--ct-accent-2));color:#fff}
.ct-btn--sec{border:1px solid var(--ct-line);color:var(--ct-fg)}
.ct-burger{display:none;width:42px;height:42px;border:1px solid var(--ct-line);border-radius:12px;background:transparent;position:relative}
.ct-burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--ct-fg)}
.ct-burger span:nth-child(1){top:12px}.ct-burger span:nth-child(2){top:20px}.ct-burger span:nth-child(3){top:28px}
@media (max-width: 900px){
.ct-burger{display:block}
.ct-nav{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none}
.ct-nav.open{display:block}
.ct-nav__panel{position:absolute;top:0;right:0;bottom:0;width:min(86%,360px);background:var(--ct-bg);border-left:1px solid var(--ct-line);padding:16px;overflow:auto}
.ct-nav__list{display:block}
.ct-nav__list li{margin:6px 0}
.ct-sub{position:static;display:block;border:none;box-shadow:none;padding:0;margin:6px 0 6px 12px}
}
/* footer */
.ct-footer{margin-top:48px;border-top:1px solid var(--ct-line);background:var(--ct-bg);color:var(--ct-fg)}
.ct-footer .ct-container{display:block;padding:24px 16px}
.ct-foot-title{margin:0 0 12px 0;font-size:1rem;font-weight:800;letter-spacing:.2px}
.ct-foot-links{display:flex;flex-wrap:wrap;gap:10px 16px;list-style:none;margin:0 0 8px 0;padding:0}
.ct-badges{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px 0}
.ct-badge{border:1px solid var(--ct-line);border-radius:999px;padding:6px 10px;font-size:.95rem;color:var(--ct-muted)}
.ct-copy{color:var(--ct-muted);font-size:.95rem}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:var(--ct-bg);padding:8px;border:1px solid var(--ct-line);z-index:10000}
/* === LG Header/Footer (logical IA) === */
:root{
--lg-bg:#ffffff; --lg-fg:#0f1115; --lg-muted:#5f6470; --lg-line:rgba(0,0,0,.08);
--lg-accent:#6b46c1; --lg-radius:14px;
}
@media (prefers-color-scheme: dark){
:root{ --lg-bg:#0f1115; --lg-fg:#eaeaea; --lg-muted:#a0a0a0; --lg-line:rgba(255,255,255,.12) }
}
.lg-container{max-width:1240px;margin:0 auto;padding:12px 16px}
.lg-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.75);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--lg-line)}
@media (prefers-color-scheme: dark){ .lg-header{background:rgba(15,17,21,.7)} }
.lg-row{display:flex;align-items:center;gap:16px}
.lg-brand{font-weight:800;text-decoration:none;color:var(--lg-fg)}
.lg-nav{margin-left:auto}
.lg-list{display:flex;gap:8px 12px;list-style:none;margin:0;padding:0;align-items:center}
.lg-list > li > a{display:inline-block;padding:8px 12px;border-radius:999px;text-decoration:none}
.lg-list > li > a.active{outline:1px dashed currentColor}
.lg-has-sub{position:relative}
.lg-sub{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:240px;background:var(--lg-bg);border:1px solid var(--lg-line);border-radius:12px;list-style:none;padding:8px;margin:0;box-shadow:0 12px 32px rgba(0,0,0,.08)}
.lg-sub a{display:block;padding:8px 12px}
.lg-has-sub:hover .lg-sub, .lg-has-sub:focus-within .lg-sub{display:block}
.lg-cta{margin-left:8px}
.lg-btn{display:inline-block;padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:600;border:1px solid var(--lg-line)}
.lg-btn--pri{background:var(--lg-accent);color:#fff;border-color:transparent}
.lg-footer{margin-top:56px;border-top:1px solid var(--lg-line);background:var(--lg-bg)}
.lg-footer .lg-container{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:28px 16px}
.lg-foot-col h2{font-size:1rem;margin:0 0 8px}
.lg-foot-col ul{list-style:none;margin:0;padding:0}
.lg-foot-col li{margin:6px 0}
.lg-muted{color:var(--lg-muted);font-size:.95rem}
.lg-foot-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--lg-line);padding-top:12px}
.lg-actions{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width: 860px){
.lg-footer .lg-container{grid-template-columns:1fr}
}
.lg-burger{display:none;width:42px;height:42px;border:1px solid var(--lg-line);border-radius:12px;background:transparent;position:relative}
.lg-burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--lg-fg)}
.lg-burger span:nth-child(1){top:12px}.lg-burger span:nth-child(2){top:20px}.lg-burger span:nth-child(3){top:28px}
@media (max-width: 900px){
.lg-burger{display:block}
.lg-nav{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none}
.lg-nav.open{display:block}
.lg-panel{position:absolute;top:0;right:0;bottom:0;width:min(86%,360px);background:var(--lg-bg);border-left:1px solid var(--lg-line);padding:16px;overflow:auto}
.lg-list{display:block}
.lg-list li{margin:6px 0}
.lg-sub{position:static;display:block;border:none;box-shadow:none;padding:0;margin:6px 0 6px 12px}
}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:var(--lg-bg);padding:8px;border:1px solid var(--lg-line);z-index:10000}
/* === CT-pattern Header & Footer (structure-based) === */
.header-container{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:16px}
header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.8);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(0,0,0,.08)}
@media (prefers-color-scheme: dark){
header{background:rgba(15,17,21,.7);border-color:rgba(255,255,255,.12)}
}
.logo{text-decoration:none;font-weight:800;letter-spacing:.2px}
.menu-toggle{display:none;width:42px;height:42px;border:1px solid rgba(0,0,0,.1);border-radius:12px;background:transparent}
@media (prefers-color-scheme: dark){
.menu-toggle{border-color:rgba(255,255,255,.15)}
}
#nav{margin-left:auto}
#nav ul{list-style:none;margin:0;padding:0;display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap}
#nav a{display:inline-block;text-decoration:none;padding:8px 12px;border-radius:999px}
#nav a.active{outline:1px dashed currentColor}
@media (max-width: 900px){
.menu-toggle{display:block}
#nav{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none}
#nav.open{display:block}
#nav .panel{position:absolute;top:0;right:0;bottom:0;width:min(86%,360px);background:inherit;background:var(--bg, #fff);padding:16px;border-left:1px solid rgba(0,0,0,.08);overflow:auto}
@media (prefers-color-scheme: dark){
#nav .panel{background:#0f1115;border-color:rgba(255,255,255,.12)}
}
#nav ul{display:block}
#nav li{margin:6px 0}
}
footer{margin-top:56px}
.footer-content{max-width:1200px;margin:0 auto;padding:28px 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid rgba(0,0,0,.08)}
.footer-section h3{margin:0 0 8px;font-size:1rem}
.footer-section ul{list-style:none;margin:0;padding:0}
.footer-section li{margin:6px 0}
.footer-bottom{max-width:1200px;margin:0 auto;padding:12px 16px;color:rgba(0,0,0,.65);border-top:1px solid rgba(0,0,0,.08)}
@media (prefers-color-scheme: dark){
.footer-content, .footer-bottom{border-color:rgba(255,255,255,.12)}
.footer-bottom{color:rgba(255,255,255,.7)}
}
@media (max-width: 860px){
.footer-content{grid-template-columns:1fr}
}
.back-to-top{position:fixed;right:16px;bottom:16px;width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.15);cursor:pointer;opacity:0;pointer-events:none;transition:.2s;background:#fff}
@media (prefers-color-scheme: dark){
.back-to-top{background:#0f1115;border-color:rgba(255,255,255,.2);color:#eaeaea}
}
.back-to-top.show{opacity:1;pointer-events:auto}