@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700;900&display=swap');
:root{
  --font-family: 'Exo 2', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.75rem;
  --font-size-hero: 3.5rem;
  --line-height-tight: 1.2;
  --line-height-base: 1.6;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --radius: 12px;
  --radius-sm: 6px;
  --radius-lg: 18px;
  --container-width: 1100px;
  --section-padding: 4rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --color-primary: #d81818;
  --color-secondary: #7a0f0f;
  --color-accent: #f8c800;
  --color-bg: #0e0c08;
  --color-bg-alt: #17130d;
  --color-bg-card: #16110c;
  --color-text: #ffeedd;
  --color-text-muted: #b89870;
  --color-text-on-primary: #ffffff;
  --color-border: #3a2c1b;
  --color-shadow: #000000;
}
*, *::before, *::after{ box-sizing:border-box; }
html, body{ margin:0; padding:0; max-width:100%; overflow-x:hidden; }
body{ font-family:var(--font-family); font-size:var(--font-size-base); line-height:var(--line-height-base); color:var(--color-text); background:var(--color-bg); font-weight:var(--font-weight-normal); }
img, video, iframe{ max-width:100%; height:auto; display:block; }
h1, h2, h3, h4, h5, h6{ margin:0 0 var(--space-4); line-height:var(--line-height-tight); color:var(--color-text); font-weight:var(--font-weight-bold); }
h1{ font-size:var(--font-size-3xl); }
h2, .section-title{ font-size:var(--font-size-2xl); }
h3{ font-size:var(--font-size-xl); }
h4{ font-size:var(--font-size-lg); }
p{ margin:0 0 var(--space-4); color:var(--color-text); }
a{ color:var(--color-accent); text-decoration:none; transition:color 0.2s ease, filter 0.2s ease, transform 0.2s ease; }
a:hover{ color:var(--color-accent); text-decoration:underline; }
strong{ font-weight:var(--font-weight-bold); color:inherit; }
em{ font-style:italic; color:inherit; }
ul, ol{ margin:0 0 var(--space-4); padding-left:1.25rem; color:var(--color-text); }
li{ margin-bottom:var(--space-2); }
.container{ width:100%; max-width:var(--container-width); margin:0 auto; padding:0 1rem; box-sizing:border-box; }
.section, .faq-section{ position:relative; padding:2rem 0; }
.section-title{ margin-bottom:var(--space-6); word-break:break-word; }
.site-header{ position:sticky; top:0; min-height:64px; overflow:visible; z-index:100; background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); border-bottom:1px solid var(--color-border); backdrop-filter:blur(10px); }
.site-header .container{ display:flex; align-items:center; gap:0.75rem; padding:0.5rem 1rem; overflow:visible; }
.site-logo{ display:flex; align-items:center; flex-shrink:0; overflow:hidden; max-height:52px; text-decoration:none; }
.site-logo img{ height:40px; width:auto; max-width:140px; object-fit:contain; display:block; }
.nav-toggle-input{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.nav-toggle-label{ display:flex; flex-direction:column; justify-content:center; gap:5px; cursor:pointer; margin-left:auto; padding:0.4rem 0.6rem; z-index:200; border-radius:6px; background:rgba(0,0,0,0.45); border:1.5px solid rgba(255,255,255,0.7); }
.nav-toggle-label span{ display:block; width:24px; height:2px; background-color:#ffffff; border-radius:2px; transition:0.2s ease; }
.site-nav{ display:none; position:absolute; top:100%; left:0; width:100%; z-index:500; background:var(--color-bg); border-top:1px solid var(--color-border); box-shadow:0 4px 16px var(--color-shadow); overflow:visible; }
.nav-toggle-input:checked ~ .site-nav{ display:block; }
.nav-list{ display:flex; flex-direction:column; gap:0; padding:0.5rem 0; margin:0; list-style:none; overflow:visible; }
.nav-item{ position:relative; }
.nav-link{ display:block; padding:0.75rem 1rem; border-bottom:1px solid var(--color-border); font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); color:var(--color-text-on-primary); text-decoration:none; position:relative; }
.nav-link::after{ content:""; position:absolute; left:1rem; right:1rem; bottom:0.45rem; height:1px; background:var(--color-accent); transform:scaleX(0); transform-origin:left; transition:transform 0.2s ease; }
.nav-link:hover::after, .nav-link:focus-visible::after{ transform:scaleX(1); }
.nav-link:hover, .nav-link:focus-visible{ color:var(--color-text-on-primary); }
.nav-dropdown{ position:relative; overflow:visible; }
.nav-dropdown-toggle{ cursor:pointer; user-select:none; white-space:nowrap; }
.nav-dropdown-menu{ display:none; position:static; list-style:none; margin:0; padding:0.5rem 0 0.5rem 1rem; background:var(--color-bg); border:none; border-radius:0; box-shadow:none; white-space:nowrap; overflow:visible; }
.nav-dropdown:hover > .nav-dropdown-menu, .nav-dropdown:focus-within > .nav-dropdown-menu{ display:block; }
.nav-dropdown-menu .nav-link{ display:block; padding:0.5rem 1.25rem; width:100%; border-bottom:none; color:var(--color-text-on-primary); }
.nav-dropdown-menu .nav-link:hover, .nav-dropdown-menu .nav-link:focus-visible{ background:var(--color-bg-alt); }
.hero{ min-height:50vh; padding:2rem 1rem; display:flex; align-items:center; justify-content:center; text-align:center; color:#ffffff; background:linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 52%, var(--color-bg) 100%); position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at top left, rgba(248,200,0,0.14), transparent 36%), radial-gradient(circle at bottom right, rgba(216,24,24,0.22), transparent 40%); pointer-events:none; }
.hero > *{ position:relative; z-index:1; }
.hero h1{ font-size:var(--font-size-2xl); word-break:break-word; color:inherit; }
.hero p{ font-size:var(--font-size-base); color:inherit; }
.hero-big-title{ font-size:clamp(2.5rem, 10vw, 4rem); font-weight:900; line-height:0.95; letter-spacing:-0.03em; margin:0 0 1.5rem; text-transform:uppercase; }
.hero-sub-row{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.hero-subtitle{ flex:1 1 300px; font-size:1.1rem; }
.hero-cta{ display:flex; gap:1rem; flex-shrink:0; flex-wrap:wrap; justify-content:center; }
.card-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
.card{ display:flex; flex-direction:column; width:100%; max-width:100%; border-radius:var(--radius); overflow:hidden; background:var(--color-bg-card); border:1px solid var(--color-border); box-shadow:0 12px 30px var(--color-shadow); position:relative; transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px var(--color-shadow); border-color:var(--color-primary); }
.card::before{ content:"FEATURED"; position:absolute; top:0.85rem; left:0.85rem; z-index:1; font-size:var(--font-size-xs); letter-spacing:0.14em; padding:0.35rem 0.6rem; color:var(--color-text-on-primary); background:var(--color-primary); clip-path:polygon(0 0, 100% 0, 94% 100%, 0 100%); text-transform:uppercase; }
.card img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:var(--radius) var(--radius) 0 0; }
.card-body{ padding:1rem 1.25rem; color:var(--color-text); }
.card > :not(img):not(.card-body){ padding:1rem 1.25rem; }
.card h3, .card h4{ margin-top:0; margin-bottom:0.5rem; color:var(--color-text); }
.card p{ margin:0; line-height:var(--line-height-base); color:var(--color-text-muted); }
.btn, button, button[type="submit"]{ display:inline-block; padding:0.8rem 1.25rem; border-radius:var(--radius); border:1px solid transparent; font-family:var(--font-family); font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); line-height:1.2; text-decoration:none; cursor:pointer; max-width:100%; word-break:break-word; white-space:normal; transition:0.2s ease; }
.btn-primary{ background:var(--color-primary); color:var(--color-text-on-primary); border-color:var(--color-primary); box-shadow:0 8px 20px rgba(0,0,0,0.22); }
.btn-primary:hover, .btn-primary:focus-visible{ filter:brightness(0.9); color:var(--color-text-on-primary); }
.btn-secondary{ background:transparent; color:var(--color-primary); border-color:var(--color-primary); }
.btn-secondary:hover, .btn-secondary:focus-visible{ background:var(--color-primary); color: var(--color-primary); }
.site-footer{ background:var(--color-bg-alt); padding:2rem 0; border-top:1px solid var(--color-border); color:var(--color-text); }
.footer-inner{ display:flex; flex-direction:column; text-align:center; gap:1rem; align-items:center; }
.footer-inner a{ color:var(--color-accent); }
.footer-inner .btn-primary{ color:var(--color-text-on-primary) !important; }
.footer-inner .btn-secondary{ color:var(--color-primary) !important; }
.faq-section{ padding:2rem 0; }
.faq-item{ border:1px solid var(--color-border); border-radius:var(--radius); margin-bottom:0.75rem; background:var(--color-bg-card); overflow:hidden; transition:0.2s ease; }
.faq-item[open]{ border-color:var(--color-primary); box-shadow:0 2px 12px var(--color-shadow); }
.faq-question{ display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; cursor:pointer; font-weight:var(--font-weight-bold); font-size:var(--font-size-md); list-style:none; position:relative; padding-right:2rem; color:var(--color-text); user-select:none; }
.faq-question::-webkit-details-marker{ display:none; }
.faq-question::after{ content:"+"; font-size:1.5rem; font-weight:300; color: #E8E8E8; flex-shrink:0; transition:transform 0.2s ease; }
.faq-item[open] > .faq-question::after{ content:"−"; }
.faq-answer{ padding:0 1.25rem 1.25rem; border-top:1px solid var(--color-border); color:var(--color-text); }
.faq-answer p{ margin:0.75rem 0 0; color:var(--color-text-muted); line-height:var(--line-height-base); }
input, textarea, select, label, button[type="submit"]{ font:inherit; }
label{ display:block; margin-bottom:0.5rem; font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--color-text); }
input, textarea, select{ width:100%; padding:0.85rem 1rem; border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-bg-card); color:var(--color-text); box-shadow:none; transition:0.2s ease; }
input::placeholder, textarea::placeholder{ color:var(--color-text-muted); }
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(216,24,24,0.18); }
textarea{ min-height:8rem; resize:vertical; }
button[type="submit"]{ background:var(--color-primary); color:var(--color-text-on-primary); border-color:var(--color-primary); }
button[type="submit"]:hover, button[type="submit"]:focus-visible{ filter:brightness(0.9); }
table{ width:100%; border-collapse:collapse; color:var(--color-text); }
th, td{ padding:0.85rem 1rem; border:1px solid var(--color-border); text-align:left; }
tr:nth-child(odd){ background:var(--color-bg); }
tr:nth-child(even){ background:var(--color-bg-alt); }
th{ background:var(--color-bg-card); color:var(--color-text); font-weight:var(--font-weight-bold); }
.text-center{ text-align:center; }
.mt-1{ margin-top:var(--space-1); }
.mt-2{ margin-top:var(--space-2); }
.mt-3{ margin-top:var(--space-3); }
.mt-4{ margin-top:var(--space-4); }
.hidden{ display:none !important; }
main{ counter-reset:section-counter; }
.section::before{ content:none; }
@media (min-width: 768px){
  .container{ max-width:960px; padding:0 1.5rem; margin:0 auto; }
  .section, .faq-section{ padding:var(--section-padding) 0; }
  .section{ padding-left:2rem; }
  .section::before{ content:counter(section-counter, decimal-leading-zero); counter-increment:section-counter; position:absolute; left:0; top:1rem; font-size:0.75rem; color: #E8E8E8; letter-spacing:0.15em; display:block; }
  .site-header .container{ justify-content:center; gap:1rem; }
  .nav-toggle-label{ display:none !important; }
  .site-nav{ display:flex !important; align-items:center; position:static; background:transparent; border-top:none; box-shadow:none; flex:0 0 auto; justify-content:center; width:auto; }
  .nav-list{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center; justify-content:center; gap:0.85rem; padding:0; margin:0; list-style:none; }
  .nav-link{ display:inline-block; font-size:var(--font-size-sm); padding:0.4rem 0.75rem; border-bottom:none; white-space:nowrap; }
  .nav-dropdown-menu{ position:absolute !important; top:100%; left:0; z-index:9999; box-shadow:0 8px 24px var(--color-shadow); border:1px solid var(--color-border); background:var(--color-bg-card); }
  .hero{ min-height:60vh; }
  .hero h1{ font-size:var(--font-size-3xl); }
  .card-grid{ grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
  .footer-inner{ flex-direction:row; text-align:left; justify-content:space-between; align-items:center; }
  .hero-big-title{ font-size:clamp(3rem, 8vw, 7rem); }
  .hero-sub-row{ align-items:center; }
}
@media (min-width: 1024px){
  .container{ max-width:1200px; padding:0 2rem; margin:0 auto; }
  .hero{ min-height:70vh; }
  .hero h1{ font-size:var(--font-size-hero); }
  .section{ padding:4rem 0; }
}
@media (max-width: 767px){
  .hero-sub-row{ flex-direction:column; align-items:flex-start; }
  .hero-big-title{ font-size:clamp(2.5rem, 10vw, 4rem); }
  .nav-dropdown-menu{ position:static; display:none; box-shadow:none; border:none; padding-left:1rem; }
  .nav-dropdown:focus-within > .nav-dropdown-menu{ display:block; }
  table{ display:block; overflow-x:auto; }
}
.hero .btn-secondary{color:var(--color-text-on-primary);border-color:var(--color-text-on-primary);}