:root{
  --color-white: #ffffff;
  --color-black: #000000;
  --color-black-80: #333333;
  --color-black-60: #666666;
  --color-black-40: #999999;
  --color-black-20: #cccccc;
  --color-primary: #dd0060; /* Active Red */
  --color-secondary: #37a58c; /* Smart Green */
  --color-footer-gray: #4d4d4d;
  --color-footer-black: #000;
  --bg: var(--color-black);
  --accent: var(--color-secondary);
  --text: var(--color-white);
  --muted:#bfbfbf;
  --footer-bg:var(--color-footer-black);
  --btn-min-width: 160px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Arial, Helvetica, sans-serif;background:var(--color-white);color:var(--color-black)}

/* Header */
.site-header{background:var(--color-white);padding:10px 24px;border-bottom:1px solid var(--color-black-60)}
.header-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:160px 1fr 160px;align-items:center}
.logo img{display:block;justify-self:start}
.site-title{justify-self:center;text-align:center;color:var(--color-black);font-size:20px;margin:0}
.lang-switch{display:flex;gap:8px;justify-self:end}
.lang-btn{background:#fff;border:1px solid var(--color-secondary);padding:6px 8px;border-radius:4px;cursor:pointer}
.lang-btn[aria-pressed="true"]{
  background:var(--color-secondary);
  color:var(--color-white);
  border-color:var(--color-secondary);
}
.lang-btn:focus{outline:2px solid #85d0bd;outline-offset:2px}

/* Main Hero */
.hero{background:var(--color-white);padding:48px 16px;color:var(--color-black);min-height:520px;flex:1}
.container{max-width:1200px;margin:0 auto}
.hero-title{font-size:36px;text-align:center;margin:6px 0 24px}
.options{display:flex;gap:36px}
.card{flex:1;padding:6px}
.card-title{text-align:center;margin:4px 0;font-size:20px}
.preview{height:340px;border:2px solid var(--accent);margin:18px 24px;background:transparent}
.preview{display:flex;align-items:center;justify-content:center;overflow:hidden}
.preview img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.desc{font-size:14px;line-height:1.3;color:var(--color-black-60);margin:10px 24px}
.cta,
button.cta{
  display:inline-block;
  margin:18px auto;
  padding:10px 24px;
  min-width:120px;
  border-radius:0;
  cursor:pointer;
  font-weight:600;
  text-align:center;
  text-decoration:none;
  line-height:1;
  box-sizing:border-box;
  border-style:solid;
  border-width:2px;
}
.card-register-wrapper{display:flex;justify-content:center;margin-top:18px}
.secondary-cta{display:flex;justify-content:center;margin-top:28px}

.card-cta-wrapper{display:flex;justify-content:center;margin:0 24px;margin-top:18px}
.cta.cta-alt,
button.cta.cta-alt{
  background:var(--accent);
  color:var(--color-white);
  border-color:var(--accent);
}
.cta.open{
  background:var(--color-white);
  color:var(--accent);
  border-color:var(--accent);
}

.cta:hover, .cta:focus { filter:brightness(0.98); transform:translateY(-1px); }
.cta.cta-alt:hover, .cta.cta-alt:focus { filter:brightness(0.95); }

/* Footer */
.site-footer{background:var(--footer-bg);padding:24px 16px;color:#fff;position:fixed;bottom:0;left:0;width:100%;}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;gap:24px;align-items:center;justify-content:space-between;padding:0 12px}

.site-footer{z-index:40}
/* ensure main content isn't covered by fixed footer — height set dynamically via JS */
main.hero{padding-bottom:var(--footer-height,160px)}
.footer-link{color:#eaeaea;text-decoration:underline}

.footer-contact{color:#fff;font-size:14px;line-height:1.4;text-align:left}
.footer-contact a.footer-link{color:#eaeaea}

/* remove default italic style for address elements in footer */
.footer-contact address{font-style:normal}

.footer-col{flex:1;min-width:0}
.footer-contacts{text-align:center}
.footer-links{text-align:right}
.footer-links nav a{display:block;margin-bottom:6px;color:#eaeaea}
.footer-links .sep{display:none}

.preview::after{content:'';display:block;width:100%;height:100%;background-image:url('../assets/preview-placeholder.png');background-size:cover;background-position:center;opacity:0.03}

@media (max-width:900px){
  .options{flex-direction:column}
  .preview{height:220px}
  .hero-title{text-align:center;font-size:24px}
  .header-inner{padding:0}
  /* stack footer columns on small screens */
  .footer-inner{flex-direction:column;align-items:flex-start;height:auto;position:relative;padding:16px}
  .site-footer{position:relative;height:auto}
  .footer-links{text-align:left;margin-top:12px}
}

@media (max-width:480px) {
  :root { --btn-min-width: 120px; }
  .cta, .cta.cta-alt { padding: 8px 14px; }
}

/* Accessibility focus styles */
:focus{outline:3px solid #85d0bd;outline-offset:2px}