:root{
  --bg:#070707;
  --panel:#111111;
  --panel-2:#171717;
  --text:#f4f4f4;
  --muted:#b5b5b5;
  --line:#2a2a2a;
  --gold:#d8b35a;
  --gold-2:#f1d58c;
  --white:#ffffff;
  --shadow:0 30px 80px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Roboto",sans-serif;
  background:
    radial-gradient(circle at top, rgba(216,179,90,.12), transparent 28%),
    linear-gradient(180deg,#090909 0%,#060606 100%);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1160px,calc(100% - 32px));margin:0 auto}

.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(14px);
  background:rgba(7,7,7,.86);
  border-bottom:1px solid rgba(216,179,90,.18);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{
  width:78px;height:78px;object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.24));
}
.site-nav{display:flex;align-items:center;gap:28px}
.site-nav a{
  color:#f0f0f0;font-weight:500;font-size:15px;
  position:relative;
}
.site-nav a:after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transition:.25s ease;
}
.site-nav a:hover:after{width:100%}

.menu-toggle{
  display:none;
  width:48px;height:48px;border-radius:14px;
  border:1px solid rgba(216,179,90,.22);
  background:#141414;cursor:pointer;padding:10px;
}
.menu-toggle span{display:block;height:2px;background:#fff;margin:7px 0;border-radius:999px}

.application-shell{padding:34px 0 22px}
.panel{
  background:linear-gradient(180deg,rgba(19,19,19,.98),rgba(12,12,12,.98));
  border:1px solid rgba(216,179,90,.18);
  border-radius:28px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel-head{padding:32px 32px 12px;border-bottom:1px solid rgba(255,255,255,.05)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(216,179,90,.14);
  color:var(--gold-2);
  border:1px solid rgba(216,179,90,.28);
  padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;
}
.panel-head h1{margin:0;font-size:clamp(30px,5vw,46px);line-height:1.05}
.subtitle{margin:12px 0 0;color:var(--muted);max-width:760px;font-size:16px;line-height:1.65}

.form-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;padding:28px 32px 32px;
}
.field{display:flex;flex-direction:column;gap:10px}
.field-full{grid-column:1/-1}
.field label{font-size:14px;font-weight:700;color:#f3f3f3}
.field input[type="text"], .field input[type="email"], .field input[type="tel"]{
  height:56px;padding:0 18px;border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:#141414;color:#fff;outline:none;
  transition:.22s ease;
}
.field input::placeholder{color:#8b8b8b}
.field input:focus{
  border-color:rgba(216,179,90,.8);
  box-shadow:0 0 0 4px rgba(216,179,90,.12);
}

.section-title h2{margin:0 0 8px;font-size:26px}
.section-title p{margin:0;color:var(--muted);line-height:1.7}
.section-title-centered{text-align:center}

.category-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.category-card{
  position:relative;
  display:block;
  min-height:164px;
  border-radius:24px;
  border:1px solid rgba(216,179,90,.18);
  background:
    radial-gradient(circle at top right, rgba(216,179,90,.10), transparent 35%),
    linear-gradient(180deg,#171717 0%,#111 100%);
  overflow:hidden;
  cursor:pointer;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.category-card:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 36px rgba(0,0,0,.28);
  border-color:rgba(216,179,90,.4);
}
.category-card input{
  position:absolute;opacity:0;pointer-events:none;
}
.check-indicator{
  position:absolute;left:18px;top:18px;width:22px;height:22px;
  border-radius:7px;border:1.6px solid rgba(255,255,255,.28);
  background:#131313;
  transition:.24s ease;
  z-index:3;
}
.category-content{
  display:flex;flex-direction:column;justify-content:space-between;
  gap:18px;height:100%;padding:18px 18px 18px 54px;
}
.category-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.category-top strong{font-size:22px;line-height:1.25;max-width:75%}
.category-top em{
  font-style:normal;font-size:24px;font-weight:900;color:var(--gold-2);white-space:nowrap
}
.category-desc{color:#cbcbcb;line-height:1.65;font-size:15px}
.selected-cover{
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(216,179,90,.95), rgba(241,213,140,.92));
  color:#111;font-size:30px;font-weight:900;letter-spacing:.03em;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(1.05);
  transition:.28s ease;
  z-index:2;
}
.category-card input:checked ~ .check-indicator{
  background:#111;border-color:#111;
  box-shadow:inset 0 0 0 5px var(--gold-2);
}
.category-card input:checked ~ .selected-cover{
  opacity:1;transform:scale(1);
}
.category-card input:checked ~ .category-content{
  filter:blur(1.2px);
}

.total-box{
  position:sticky;bottom:18px;z-index:9;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 18px 18px 22px;border-radius:24px;
  background:rgba(15,15,15,.72);
  border:1px solid rgba(216,179,90,.28);
  backdrop-filter:blur(18px);
  box-shadow:0 20px 55px rgba(0,0,0,.28);
}
.total-label{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#bcbcbc;margin-bottom:6px}
#totalAmount{display:block;font-size:32px;color:var(--gold-2)}
.pay-trigger{
  border:none;border-radius:18px;height:56px;padding:0 26px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#111;font-size:16px;font-weight:900;cursor:pointer;
  box-shadow:0 14px 32px rgba(216,179,90,.22);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pay-trigger:hover,.submit-btn:hover,.copy-btn:hover{transform:translateY(-1px);box-shadow:0 16px 36px rgba(216,179,90,.28)}

.payment-card,.rules-box,.legal-box,.upload-card{
  background:#131313;border:1px solid rgba(255,255,255,.07);
  border-radius:24px;padding:22px;
}
.payment-row{
  display:flex;justify-content:space-between;gap:20px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06)
}
.payment-row:last-child{border-bottom:none}
.payment-row span{color:#a9a9a9}
.payment-row strong{font-size:18px}
.iban-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.copy-btn,.submit-btn{
  border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#111;font-weight:900;border-radius:16px;
}
.copy-btn{height:42px;padding:0 16px}
.payment-note{padding-top:16px;color:#ddd;line-height:1.7}
.payment-note p{margin:8px 0 0;color:#bfbfbf}

.upload-dropzone{
  min-height:180px;border:1.5px dashed rgba(216,179,90,.42);border-radius:24px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  background:
    radial-gradient(circle at top, rgba(216,179,90,.08), transparent 36%),
    #121212;
  text-align:center;padding:28px;cursor:pointer;transition:.25s ease;
}
.upload-dropzone:hover{transform:translateY(-1px);border-color:rgba(241,213,140,.72)}
.upload-icon{
  width:62px;height:62px;border-radius:18px;
  display:grid;place-items:center;font-size:26px;font-weight:900;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#111;
  box-shadow:0 18px 30px rgba(216,179,90,.16)
}
.upload-preview{margin-top:14px;color:#bbb;font-size:14px}

.whatsapp-support{
  display:flex;align-items:center;gap:18px;
  padding:20px 22px;border-radius:22px;
  background:linear-gradient(180deg,#131313,#0f0f0f);
  border:1px solid rgba(216,179,90,.14);
  transition:.24s ease;
}
.whatsapp-support:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.24)}
.wa-icon-wrap{
  flex:0 0 72px;width:72px;height:72px;border-radius:22px;background:linear-gradient(135deg,var(--gold),var(--gold-2));
  display:grid;place-items:center;box-shadow:0 16px 30px rgba(216,179,90,.22)
}
.wa-icon-wrap img{width:34px;height:34px;object-fit:contain}
.wa-text{display:flex;flex-direction:column;gap:6px}
.wa-text strong{font-size:22px}
.wa-text span{color:#c4c4c4;line-height:1.65}
.wa-arrow{margin-left:auto;font-size:26px;color:var(--gold-2)}

.rules-box ol{margin:0;padding-left:22px;color:#cfcfcf;line-height:1.8}
.legal-box{display:grid;gap:14px}
.legal-box label{
  display:flex;align-items:flex-start;gap:12px;line-height:1.65;color:#d3d3d3
}
.legal-box input{margin-top:5px}
.submit-area{display:flex;justify-content:center}
.submit-btn{
  height:58px;padding:0 36px;font-size:16px
}

.about-section{padding:32px 0 44px}
.about-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:22px
}
.profile-card{
  background:linear-gradient(180deg,#141414,#101010);
  border:1px solid rgba(216,179,90,.16);
  border-radius:28px;overflow:hidden;
  box-shadow:var(--shadow)
}
.profile-media{
  padding:28px 28px 8px;display:flex;justify-content:center
}
.profile-media img{
  width:min(100%,380px);
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:50%;
  border:2px solid rgba(216,179,90,.38);
  box-shadow:0 24px 44px rgba(0,0,0,.35);
  background:#0c0c0c;
}
.profile-body{padding:8px 28px 28px;text-align:center}
.profile-role{
  display:inline-flex;padding:8px 14px;border-radius:999px;
  background:rgba(216,179,90,.12);border:1px solid rgba(216,179,90,.22);
  color:var(--gold-2);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em
}
.profile-body h3{margin:14px 0 10px;font-size:32px}
.profile-body p{margin:0;color:#c8c8c8;line-height:1.78}

.site-footer{
  border-top:1px solid rgba(216,179,90,.18);
  background:#090909;padding:32px 0 40px
}
.footer-wrap{
  display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:26px;align-items:flex-start
}
.footer-logos{display:flex;gap:12px;margin-bottom:12px}
.footer-logos img{width:72px;height:72px;object-fit:contain}
.footer-brand p,.footer-contact p{color:#b8b8b8;line-height:1.7}
.footer-links,.footer-contact{display:grid;gap:10px}
.footer-links strong,.footer-contact strong{color:#fff}
.footer-links a{color:#c8c8c8}
.toast-stack{
  position:fixed;right:18px;top:100px;display:grid;gap:10px;z-index:99
}
.toast{
  min-width:260px;padding:14px 16px;border-radius:16px;
  background:#171717;border:1px solid rgba(216,179,90,.25);color:#fff;
  box-shadow:0 16px 30px rgba(0,0,0,.22)
}

@media (max-width: 900px){
  .site-nav{
    position:absolute;left:16px;right:16px;top:88px;
    display:none;flex-direction:column;align-items:stretch;gap:2px;
    background:#111;border:1px solid rgba(216,179,90,.18);border-radius:20px;padding:10px
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:14px 12px;border-radius:14px}
  .site-nav a:hover{background:#171717}
  .menu-toggle{display:block}
  .form-grid,.about-grid,.footer-wrap,.category-grid{grid-template-columns:1fr}
  .panel-head,.form-grid{padding-left:18px;padding-right:18px}
  .total-box{bottom:12px}
  .brand-logo{width:62px;height:62px}
  .brand{gap:10px}
  .wa-arrow{display:none}
  .wa-icon-wrap{width:58px;height:58px;flex-basis:58px}
  .wa-text strong{font-size:19px}
  .profile-media img{width:min(100%,300px)}
}


/* v19 revisions */
body, p, span, a, li, input, button, label, strong, em, h1, h2, h3 {
  font-weight: 400;
}
.panel-head h1 { font-weight: 500; }
.section-title h2, .profile-body h3, .wa-text strong { font-weight: 500; }
.field label, .site-nav a, .submit-btn, .copy-btn, .pay-trigger, .profile-role, .eyebrow { font-weight: 400; }
.category-top strong { font-weight: 500; }
.category-top em, #totalAmount { font-weight: 500; }
.selected-cover { font-weight: 500; }
.total-label { font-weight: 400; }

.legal-docs {
  display: grid;
  gap: 14px;
}
.legal-doc {
  background: #131313;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
  overflow: hidden;
}
.legal-doc summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.legal-doc summary::-webkit-details-marker {
  display: none;
}
.legal-doc summary::after {
  content: '+';
  color: var(--gold-2);
  font-size: 22px;
  line-height: 1;
}
.legal-doc[open] summary::after {
  content: '–';
}
.legal-doc-content {
  padding: 0 22px 20px;
  color: #c9c9c9;
  line-height: 1.8;
}
.legal-doc-content p {
  margin: 0 0 12px;
}

@media (max-width: 900px){
  .menu-toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:0;
  }
  .menu-toggle span{
    margin:3px 0;
    width:22px;
  }
}


/* v20 official/legal refinements */
body, p, span, a, li, input, button, label, strong, em, h1, h2, h3, summary {
  font-weight: 300;
}
.panel-head h1,
.section-title h2,
.profile-body h3,
.wa-text strong,
.category-top strong,
.category-top em,
#totalAmount {
  font-weight: 400;
}
.site-nav a,
.field label,
.submit-btn,
.copy-btn,
.pay-trigger,
.profile-role,
.eyebrow,
.selected-cover,
.total-label {
  font-weight: 300;
}

.legal-doc {
  background: linear-gradient(180deg, #121212, #0f0f0f);
  border: 1px solid rgba(216,179,90,.14);
}
.legal-doc summary {
  padding: 19px 22px;
  font-size: 16px;
  color: #f4f4f4;
}
.legal-doc-content {
  padding: 0 22px 22px;
}
.legal-doc-head {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(216,179,90,.08);
  border: 1px solid rgba(216,179,90,.14);
}
.legal-doc-head strong {
  font-weight: 400;
  color: var(--gold-2);
  letter-spacing: .03em;
}
.legal-doc-head span {
  color: #d0d0d0;
  line-height: 1.6;
}
.legal-doc-content p {
  color: #cccccc;
  line-height: 1.9;
}

.menu-toggle {
  align-items: center;
  justify-content: center;
}
.menu-toggle span {
  transform: translateY(0);
}

@media (max-width: 900px){
  .site-header {
    min-height: 84px;
  }
  .nav-wrap {
    min-height: 84px;
  }
  .menu-toggle {
    display: inline-flex;
    width: 46px;
    height: 46px;
    padding: 0;
    align-self: center;
    margin-top: 0;
  }
  .menu-toggle span {
    width: 22px;
    margin: 2.5px 0;
  }
}


/* v22 footer layout fix */
.footer-wrap{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:40px;
  align-items:flex-start;
}

.footer-brand{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.footer-links{
  align-content:start;
}

.footer-contact{
  align-content:start;
  text-align:left;
}

.footer-contact p{
  margin:4px 0;
}

@media (max-width:900px){
  .footer-wrap{
    grid-template-columns:1fr;
    gap:24px;
    text-align:center;
  }
  .footer-contact{
    text-align:center;
  }
  .footer-links{
    align-items:center;
  }
}


/* v25 success and typography refinement */
body, p, span, a, li, input, button, label, strong, em, h1, h2, h3, h4, h5, h6, summary, small {
  font-weight: 300 !important;
}
.panel-head h1,
.section-title h2,
.profile-body h3,
.wa-text strong,
.category-top strong,
.category-top em,
#totalAmount,
.legal-doc-head strong {
  font-weight: 400 !important;
}


/* Upload success animation */
.upload-success{
  display:flex;
  align-items:center;
  gap:10px;
  color:#8cffb0;
}
.upload-success .check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#1f3;
  color:#111;
  font-weight:600;
  animation:pop 0.4s ease;
}

@keyframes pop{
  0%{transform:scale(0.5);opacity:0;}
  70%{transform:scale(1.2);opacity:1;}
  100%{transform:scale(1);}
}