/* Lotto2Win — minimal single-accent design system */

:root{
  --l2w-ink: #10241e;
  --l2w-body: #3f5750;
  --l2w-muted: #6b8078;
  --l2w-line: #e3ece8;
  --l2w-surface: #f6f9f7;
  --l2w-white: #ffffff;
  --l2w-accent: #0a8f5b;
  --l2w-accent-dark: #076b45;
  --l2w-accent-light: #e5f5ed;
  --l2w-accent-contrast: #ffffff;
  --l2w-warn: #b4720a;
  --l2w-warn-bg: #fdf1de;

  --l2w-radius-sm: 10px;
  --l2w-radius: 16px;
  --l2w-radius-lg: 24px;
  --l2w-shadow: 0 1px 2px rgba(16,36,30,.04), 0 8px 24px rgba(16,36,30,.06);
  --l2w-container: 1120px;
  --l2w-font: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--l2w-font);
  color: var(--l2w-body);
  background: var(--l2w-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{ color: var(--l2w-ink); margin:0; line-height:1.15; letter-spacing:-0.02em; font-weight:800; }
p{ margin:0; }

.container{ max-width: var(--l2w-container); margin:0 auto; padding:0 24px; }
.section{ padding: 88px 0; }
.section--tight{ padding: 56px 0; }
.section--surface{ background: var(--l2w-surface); }
.section--ink{ background: var(--l2w-ink); color: #cfe3da; }
.section--ink h1, .section--ink h2, .section--ink h3{ color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color: var(--l2w-accent-dark);
  background: var(--l2w-accent-light);
  padding:6px 14px; border-radius:999px;
}

.h1{ font-size: clamp(2.1rem, 4vw, 3.4rem); }
.h2{ font-size: clamp(1.6rem, 2.6vw, 2.35rem); }
.h3{ font-size: 1.2rem; }
.lede{ font-size: 1.15rem; color: var(--l2w-body); max-width: 640px; }
.accent{ color: var(--l2w-accent); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:15px; border-radius: 999px;
  padding: 14px 26px; border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{ background: var(--l2w-accent); color:#fff; box-shadow: 0 6px 18px rgba(10,143,91,.28); }
.btn--primary:hover{ background: var(--l2w-accent-dark); }
.btn--ghost{ background: transparent; color: var(--l2w-ink); border-color: var(--l2w-line); }
.btn--ghost:hover{ border-color: var(--l2w-accent); color: var(--l2w-accent-dark); }
.btn--on-ink{ background: #fff; color: var(--l2w-ink); }
.btn--on-ink:hover{ background: var(--l2w-accent-light); }
.btn--block{ width:100%; }
.btn--sm{ padding:10px 18px; font-size:14px; }

/* Header */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--l2w-line);
}
.site-header__row{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width: var(--l2w-container); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; color: var(--l2w-ink); }
.brand__mark{
  width:34px; height:34px; border-radius:10px; background: var(--l2w-accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.nav{ display:flex; align-items:center; gap:32px; }
.nav a{ font-size:15px; font-weight:600; color: var(--l2w-body); }
.nav a:hover{ color: var(--l2w-accent-dark); }
.header-actions{ display:flex; align-items:center; gap:12px; }
.nav-toggle{ display:none; background:none; border:none; padding:8px; }
.nav-toggle span{ display:block; width:22px; height:2px; background: var(--l2w-ink); margin:5px 0; border-radius:2px; }

@media (max-width: 860px){
  .nav{
    position:fixed; inset: 68px 16px auto 16px; flex-direction:column; align-items:flex-start;
    background:#fff; border:1px solid var(--l2w-line); border-radius: var(--l2w-radius);
    padding:20px; box-shadow: var(--l2w-shadow); gap:16px;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .header-actions .btn--ghost{ display:none; }
  .nav-toggle{ display:block; }
}

@media (max-width: 440px){
  .site-header__row{ padding:14px 16px; }
  .brand{ font-size:15px; gap:8px; }
  .brand__mark{ width:28px; height:28px; }
  .brand__mark svg{ width:16px; height:16px; }
  .header-actions{ gap:6px; }
  .btn--sm{ padding:9px 14px; font-size:13px; }
  .nav-toggle{ padding:6px; }
}

/* Hero */
.hero{ text-align:center; padding: 72px 0 40px; }
.hero__lede{ margin: 22px auto 0; }
.hero__actions{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:32px; }
.trust-row{ display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-top:36px; font-size:14px; font-weight:600; color: var(--l2w-muted); }
.trust-row span{ display:inline-flex; align-items:center; gap:8px; }
.trust-row .dot{ width:6px; height:6px; border-radius:50%; background: var(--l2w-accent); }

.ball-row{ display:flex; justify-content:center; gap:10px; margin: 40px 0 8px; flex-wrap:wrap; }
.ball{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; background:#fff; border:2px solid var(--l2w-line); color: var(--l2w-ink);
}
.ball--accent{ background: var(--l2w-accent-light); border-color: var(--l2w-accent); color: var(--l2w-accent-dark); }

.stat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; margin-top:16px; }
.stat{ text-align:center; }
.stat b{ display:block; font-size: clamp(1.5rem,2.4vw,2rem); color: var(--l2w-ink); font-weight:800; }
.stat span{ font-size:13px; color: var(--l2w-muted); }
@media (max-width:700px){ .stat-grid{ grid-template-columns: repeat(2,1fr); gap:28px; } }

/* Offer banner */
.offer-banner{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background: var(--l2w-ink); color:#eaf5ef; border-radius: var(--l2w-radius-lg);
  padding: 22px 30px; margin: 56px auto 0; max-width: var(--l2w-container);
}
.offer-banner strong{ color:#fff; }

/* Grid / cards */
.grid{ display:grid; gap:24px; }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px){ .grid--3, .grid--4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .grid--3, .grid--4, .grid--2{ grid-template-columns: 1fr; } }

.card{
  background:#fff; border:1px solid var(--l2w-line); border-radius: var(--l2w-radius);
  padding: 28px; text-align:left;
}
.card__icon{
  width:44px; height:44px; border-radius:12px; background: var(--l2w-accent-light); color: var(--l2w-accent-dark);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.card h3{ margin-bottom:8px; }
.card p{ font-size:14.5px; }

.section-head{ text-align:center; max-width: 620px; margin: 0 auto 48px; }
.section-head .lede{ margin: 12px auto 0; }

/* Steps */
.step{ position:relative; padding: 30px 26px; background:#fff; border:1px solid var(--l2w-line); border-radius: var(--l2w-radius); }
.step__num{ font-size:13px; font-weight:800; color: var(--l2w-accent); letter-spacing:.06em; }
.step h3{ margin: 10px 0 8px; }
.step ul{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.step li{ font-size:13.5px; color: var(--l2w-body); display:flex; gap:8px; align-items:flex-start; }
.step li::before{ content:"✓"; color: var(--l2w-accent); font-weight:800; }

/* Pricing */
.price-card{
  max-width: 480px; margin: 0 auto; background:#fff; border:2px solid var(--l2w-accent);
  border-radius: var(--l2w-radius-lg); padding: 40px; box-shadow: var(--l2w-shadow); text-align:left;
}
.price-card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.price-card h3{ margin-top:14px; }
.price-card .price{ margin: 22px 0; }
.price .num{ font-size: 3rem; font-weight:800; color: var(--l2w-ink); }
.price .per{ font-size: 15px; color: var(--l2w-muted); font-weight:600; }
.price .then{ font-size: 13.5px; color: var(--l2w-muted); margin-top:4px; }
.price-card ul{ display:flex; flex-direction:column; gap:10px; margin: 22px 0 26px; }
.price-card li{ font-size:14px; display:flex; gap:10px; align-items:flex-start; color: var(--l2w-body); }
.price-card li::before{ content:"—"; color: var(--l2w-accent); font-weight:800; }
.price-fineprint{ text-align:center; font-size:13px; color: var(--l2w-muted); margin-top:14px; }

/* Testimonials */
.testi{ background:#fff; border:1px solid var(--l2w-line); border-radius: var(--l2w-radius); padding:26px; }
.testi p{ font-style: italic; color: var(--l2w-ink); font-size:15px; }
.testi__who{ display:flex; align-items:center; gap:10px; margin-top:18px; }
.testi__avatar{ width:36px; height:36px; border-radius:50%; background: var(--l2w-accent-light); color: var(--l2w-accent-dark); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; }
.testi__who b{ display:block; font-size:14px; color: var(--l2w-ink); }
.testi__who span{ font-size:12.5px; color: var(--l2w-muted); }

/* FAQ accordion */
.faq{ max-width: 760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ border:1px solid var(--l2w-line); border-radius: var(--l2w-radius); background:#fff; overflow:hidden; }
.faq-item__q{
  width:100%; background:none; border:none; text-align:left; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-weight:700; font-size:15.5px; color: var(--l2w-ink);
}
.faq-item__q .icon{ flex-shrink:0; width:20px; height:20px; position:relative; }
.faq-item__q .icon::before, .faq-item__q .icon::after{ content:""; position:absolute; background: var(--l2w-accent); border-radius:2px; }
.faq-item__q .icon::before{ width:14px; height:2px; top:9px; left:3px; }
.faq-item__q .icon::after{ width:2px; height:14px; top:3px; left:9px; transition: transform .2s ease; }
.faq-item.is-open .faq-item__q .icon::after{ transform: rotate(90deg); }
.faq-item__a{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-item__a p{ padding: 0 24px 20px; font-size:14.5px; color: var(--l2w-body); }

/* CTA band */
.cta-band{ text-align:center; }
.cta-band .btn-row{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:28px; }

/* Footer */
.site-footer{ background: var(--l2w-ink); color:#b9cdc3; padding: 64px 0 28px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand p{ font-size:14px; color:#9fb6ab; margin-top:12px; max-width:260px; }
.footer-brand .brand{ color:#fff; }
.footer-brand .brand__mark{ background:#fff; color: var(--l2w-accent); }
.footer-brand a{ font-size:14px; color:#dff0e7; display:inline-block; margin-top:14px; }
.site-footer h4{ color:#fff; font-size:13.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px; }
.site-footer ul{ display:flex; flex-direction:column; gap:11px; }
.site-footer a{ font-size:14px; color:#b9cdc3; }
.site-footer a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding-top:24px; font-size:13px; color:#7f9border; color:#8fa89d; }
@media (max-width: 860px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }

/* Simple content pages (legal etc.) */
.page-hero{ text-align:center; padding: 64px 0 24px; }
.prose{ max-width: 760px; margin: 0 auto; }
.prose h2{ font-size:1.3rem; margin: 40px 0 12px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ margin-bottom:14px; font-size:15px; }
.prose ul{ margin: 0 0 14px; padding-left: 0; display:flex; flex-direction:column; gap:8px; }
.prose li{ font-size:15px; padding-left:22px; position:relative; }
.prose li::before{ content:"•"; color: var(--l2w-accent); position:absolute; left:4px; font-weight:800; }
.prose a{ color: var(--l2w-accent-dark); text-decoration:underline; }

.info-card{ background: var(--l2w-surface); border:1px solid var(--l2w-line); border-radius: var(--l2w-radius); padding:24px; margin: 20px 0; }
.info-card b{ color: var(--l2w-ink); }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:40px; align-items:start; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:13.5px; font-weight:700; color: var(--l2w-ink); margin-bottom:6px; }
.form-field input, .form-field textarea{
  width:100%; border:1px solid var(--l2w-line); border-radius: var(--l2w-radius-sm);
  padding:12px 14px; font-family:inherit; font-size:14.5px; background:#fff; color: var(--l2w-ink);
}
.form-field input:focus, .form-field textarea:focus{ outline:2px solid var(--l2w-accent); outline-offset:1px; border-color: var(--l2w-accent); }
.contact-info .card{ margin-bottom:16px; }

/* 404 */
.error-page{ text-align:center; padding: 120px 0; }
.error-page .code{ font-size: 5rem; font-weight:800; color: var(--l2w-accent-light); -webkit-text-stroke: 2px var(--l2w-accent); }

/* Chat bubble */
.chat-bubble{
  position:fixed; right:24px; bottom:24px; width:52px; height:52px; border-radius:50%;
  background: var(--l2w-accent); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px rgba(10,143,91,.35); border:none; z-index:40;
}

.help-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; }
@media (max-width:700px){ .help-grid{ grid-template-columns:1fr; } }

/* Login page */
.login-wrap{ max-width: 420px; margin: 64px auto; }
.login-card{ background:#fff; border:1px solid var(--l2w-line); border-radius: var(--l2w-radius-lg); padding: 40px; box-shadow: var(--l2w-shadow); }
.login-card .h3{ text-align:center; margin-bottom:6px; }
.login-card .login-sub{ text-align:center; font-size:14px; color: var(--l2w-muted); margin-bottom:28px; }
.login-card .form-field:last-of-type{ margin-bottom:24px; }
.login-foot{ text-align:center; font-size:14px; color: var(--l2w-muted); margin-top:20px; }
.login-foot a{ color: var(--l2w-accent-dark); font-weight:700; text-decoration:underline; }

/* Modal */
.modal-overlay{
  position:fixed; inset:0; background: rgba(16,36,30,.55);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:100;
  opacity:0; pointer-events:none; transition: opacity .2s ease;
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal{
  background:#fff; border-radius: var(--l2w-radius-lg); max-width:440px; width:100%;
  overflow:hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  transform: translateY(12px) scale(.98); transition: transform .2s ease;
}
.modal-overlay.is-open .modal{ transform: translateY(0) scale(1); }
.modal__banner{
  background: var(--l2w-warn-bg); color: var(--l2w-warn);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; font-weight:800; font-size:13px; letter-spacing:.03em; text-transform:uppercase;
}
.modal__close{ background:none; border:none; color: var(--l2w-warn); font-size:20px; line-height:1; padding:2px 6px; border-radius:8px; }
.modal__close:hover{ background: rgba(180,114,10,.12); }
.modal__body{ padding: 30px 32px 32px; text-align:center; }
.modal__icon{
  width:64px; height:64px; border-radius:50%; background: var(--l2w-warn-bg);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 18px;
}
.modal__body h3{ font-size:1.25rem; margin-bottom:6px; }
.modal__body .modal__lede{ font-size:14.5px; color: var(--l2w-body); font-weight:600; margin-bottom:18px; }
.modal__body p{ font-size:14px; color: var(--l2w-body); margin-bottom:18px; }
.modal__email-box{ background: var(--l2w-surface); border:1px solid var(--l2w-line); border-radius: var(--l2w-radius); padding:18px; margin-bottom:18px; }
.modal__email-box p{ margin-bottom:8px; }
.modal__email-box a{ font-size:16px; font-weight:800; color: var(--l2w-accent-dark); }
.modal__email-box small{ display:block; font-size:12.5px; color: var(--l2w-muted); margin-top:8px; }