:root {
    --fizz-green: #25f4d2; 
    --dark: #111;
    --light-bg: #f8f9fa;
    --faq-bg: #fcfdfd;
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: var(--dark);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

header { padding: 30px 0; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }

.logo { font-weight: 900; font-size: 24px; letter-spacing: -1px; margin: 0; }
.logo span { color: #888; font-weight: 400; }

.lang-switch button {
    background: none; border: none; color: #888; font-size: 14px;
    font-weight: 700; cursor: pointer; padding: 5px 10px; border-radius: 4px;
}
.lang-switch button.active { color: var(--dark); background: #f0f0f0; text-decoration: underline; }

.hero { text-align: center; padding: 40px 0; }
.hero h2 { font-size: clamp(32px, 8vw, 55px); font-weight: 900; margin-bottom: 15px; letter-spacing: -2px; }
.hero h2 span { background: var(--fizz-green); padding: 0 12px; border-radius: 6px; display: inline-block; }

.code-box {
    display: flex; justify-content: center; align-items: stretch;
    margin: 30px auto 15px; max-width: 400px;
}

input#referralCode {
    padding: 15px; font-size: 28px; font-weight: 900; border: 3px solid var(--dark);
    border-right: none; text-align: center; width: 100%; max-width: 160px;
    border-radius: 12px 0 0 12px; outline: none; font-family: inherit;
}

button#copyBtn {
    padding: 0 25px; background: var(--dark); color: white; border: 3px solid var(--dark);
    font-weight: 800; cursor: pointer; font-size: 18px; border-radius: 0 12px 12px 0;
    transition: 0.2s; white-space: nowrap;
}

.status { color: #27ae60; font-weight: 700; font-size: 14px; margin-top: 10px; text-align: center; }

.how-to { background: var(--light-bg); padding: 35px; border-radius: 24px; margin: 40px 0; }
.step { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; text-align: left; }
.number {
    background: var(--dark); color: white; min-width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-weight: 700; flex-shrink: 0;
}

.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; }
.benefit-card { border: 1px solid #eee; padding: 25px; border-radius: 16px; text-align: left; }
.benefit-card .icon { font-size: 32px; display: block; margin-bottom: 10px; }

.faq { background-color: var(--faq-bg); padding: 40px; border-radius: 24px; margin: 40px 0; border: 1px solid #f0f0f0; }
.faq h3 { margin-top: 0; margin-bottom: 25px; font-weight: 800; text-align: left; }
.faq-item { margin-bottom: 25px; text-align: left; }
.faq-item h4 { margin: 0 0 8px 0; font-size: 18px; }
.faq-item p { margin: 0; color: #555; }

.bonus-alert { border-left: 8px solid var(--fizz-green); padding: 20px; background: #eafffb; font-weight: 600; border-radius: 0 10px 10px 0; text-align: left; margin-bottom: 40px; }

footer { text-align: center; padding: 60px 0; border-top: 1px solid #eee; }
.disclaimer { font-size: 12px; color: #999; margin-top: 15px; }

@media (max-width: 500px) {
    .code-box { flex-direction: column; align-items: center; }
    input#referralCode { border-right: 3px solid var(--dark); border-bottom: none; border-radius: 12px 12px 0 0; max-width: 100%; }
    button#copyBtn { width: 100%; border-radius: 0 0 12px 12px; padding: 15px; }
    .header-flex { flex-direction: column; gap: 10px; }
}