@import url('https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/css/flag-icons.min.css');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;1,700&family=Barlow:wght@300;400;500;600&display=swap');

:root {
  --red:      #CC1E24;
  --red-dk:   #a8181d;
  --red-dim:  rgba(204,30,36,0.15);
  --red-brd:  rgba(204,30,36,0.4);
  --blue:     #2B4EA6;
  --blue-dk:  #1e3a82;
  --blue-dim: rgba(43,78,166,0.18);
  --blue-brd: rgba(43,78,166,0.45);
  --card:     #1e2240;
  --card2:    #252b52;
  --bg:       #141830;
  --white:    #FFFFFF;
  --off:      #d0d8f0;
  --muted:    #7a85b0;
  --border:   rgba(255,255,255,0.1);
  --border2:  rgba(204,30,36,0.3);
  --gold:     #CC1E24;
  --gold-dk:  #a8181d;
  --gold-dim: rgba(204,30,36,0.12);
  --gold-brd: rgba(204,30,36,0.35);
  --radius:   12px;
  --radius-lg:18px;
  --shadow:   0 4px 24px rgba(0,0,0,0.4);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body {
  background: linear-gradient(160deg, #1a1f45 0%, #141830 40%, #1a1030 100%);
  color: var(--white);
  font-family: 'Barlow', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Grid texture */
body::before {
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:60px 60px;
}

/* Host flags watermark */
.host-watermark{position:fixed;z-index:0;pointer-events:none;font-size:120px;opacity:.03;user-select:none;line-height:1;letter-spacing:-10px;}
.hw-tl{top:-20px;left:-20px;}
.hw-br{bottom:-20px;right:-20px;transform:rotate(180deg);}

/* NAV */
.qnav {
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;gap:.75rem;
  padding:0 clamp(1rem,4vw,2rem);height:60px;
  background:rgba(18,22,55,0.97);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 20px rgba(0,0,0,.5);
}
.qnav::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red) 0%,var(--blue) 50%,var(--red) 100%);
}

/* Logo */
.logo {
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem;letter-spacing:.06em;
  text-decoration:none;line-height:1;color:var(--white);
  display:flex;align-items:center;gap:.5rem;
}
.logo-brand { color:var(--red); }
.logo-tv { color:var(--blue); }
.logo img { height:36px;width:auto; }

.nav-flags{font-size:.95rem;letter-spacing:2px;opacity:.7;}

.nav-pill {
  padding:.4rem 1.1rem;border-radius:100px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.85rem;font-weight:700;letter-spacing:.05em;
  cursor:pointer;transition:all .2s;text-decoration:none;
  border:1.5px solid var(--red);color:var(--red);background:transparent;
}
.nav-pill:hover{background:var(--red);color:#fff;}
.nav-pill.solid{background:var(--red);color:#fff;}
.nav-pill.solid:hover{background:var(--red-dk);}
.nav-pill.ghost{border-color:var(--border);color:var(--muted);}
.nav-pill.ghost:hover{border-color:rgba(255,255,255,.3);color:var(--white);}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;transition:all .2s;box-shadow:var(--shadow);}
.card:hover{background:var(--card2);border-color:rgba(255,255,255,.18);transform:translateY(-2px);}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 2rem;border-radius:8px;font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:800;letter-spacing:.06em;cursor:pointer;transition:all .2s;border:none;text-decoration:none;}
.btn-gold{background:var(--red);color:#fff;box-shadow:0 4px 20px rgba(204,30,36,.4);}
.btn-gold:hover{background:var(--red-dk);transform:translateY(-2px);box-shadow:0 8px 32px rgba(204,30,36,.5);}
.btn-white{background:#fff;color:var(--bg);}
.btn-white:hover{background:#e8e8ff;transform:translateY(-2px);}
.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:var(--white);}
.btn-outline:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;}

/* Section label */
.slabel{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:.875rem;display:flex;align-items:center;gap:.75rem;}
.slabel::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border2),transparent);}

/* Form */
.fg{margin-bottom:.875rem;}
.fl{display:block;font-size:.72rem;color:var(--muted);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.35rem;font-family:'Barlow Condensed',sans-serif;}
.fi{width:100%;padding:.8rem 1rem;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:8px;color:var(--white);font-family:'Barlow',sans-serif;font-size:.95rem;outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;}
.fi:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(204,30,36,.15);}
.fi::placeholder{color:var(--muted);}

/* Modal */
.overlay{display:none;position:fixed;inset:0;z-index:500;align-items:flex-end;justify-content:center;}
.overlay.open{display:flex;}
.overlay.open .mbg{animation:bgIn .25s ease both;}
.overlay.open .modal{animation:sheetUp .32s cubic-bezier(.34,1.1,.64,1) both;}
@keyframes bgIn{from{opacity:0}to{opacity:1}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.mbg{position:absolute;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(16px);}
.modal{position:relative;z-index:1;background:#1a1f45;border:1px solid var(--border);border-top:3px solid var(--red);border-radius:20px 20px 0 0;padding:1.75rem 1.5rem 2.5rem;width:100%;max-width:440px;box-shadow:0 -8px 48px rgba(0,0,0,.5);}
.modal::before{content:'';display:block;width:40px;height:4px;background:rgba(255,255,255,.15);border-radius:2px;margin:0 auto 1.5rem;}
@media(min-width:600px){
  .overlay{align-items:center;padding:1.5rem;}
  .overlay.open .modal{animation:cardIn .22s ease both;}
  @keyframes cardIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
  .modal{border-radius:16px;padding:2rem;max-width:420px;}
  .modal::before{display:none;}
}
.modal-x{position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,.1);border:none;color:var(--muted);width:30px;height:30px;border-radius:50%;font-size:1rem;line-height:30px;text-align:center;cursor:pointer;transition:all .15s;}
.modal-x:hover{background:rgba(255,255,255,.2);color:var(--white);}

/* Messages */
.msg{padding:.75rem 1rem;border-radius:8px;font-size:.82rem;margin-top:.875rem;display:none;}
.msg.err{background:rgba(220,38,38,.15);color:#fca5a5;border:1px solid rgba(220,38,38,.3);display:block;}
.msg.ok{background:rgba(43,78,166,.15);color:#93c5fd;border:1px solid rgba(43,78,166,.3);display:block;}

/* Spinner */
.spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:rot .7s linear infinite;display:inline-block;vertical-align:middle;}
.spin-dk{border-color:rgba(0,0,0,.2);border-top-color:var(--bg);}
@keyframes rot{to{transform:rotate(360deg)}}

/* Skeleton */
.sk{background:linear-gradient(90deg,var(--card) 25%,var(--card2) 50%,var(--card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius);}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* Toast */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);background:#1a1f45;border:1px solid var(--border);border-radius:100px;padding:.6rem 1.5rem;font-size:.85rem;font-weight:500;transition:transform .3s ease;z-index:999;white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,.5);}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast.g{color:#93c5fd;border-color:rgba(43,78,166,.4);}
.toast.e{color:#fca5a5;border-color:rgba(220,38,38,.4);}

/* Social buttons */
.social-btns{display:flex;flex-direction:column;gap:.6rem;}
.btn-social{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:.8rem 1rem;border-radius:8px;font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;letter-spacing:.04em;cursor:pointer;border:none;transition:opacity .18s,transform .15s;}
.btn-social:hover{opacity:.88;transform:translateY(-1px);}
.btn-google{background:#fff;color:#1a1a1a;}

.divider{display:flex;align-items:center;gap:.75rem;margin:1.4rem 0;font-size:.72rem;color:var(--muted);font-family:'Barlow Condensed',sans-serif;letter-spacing:.1em;text-transform:uppercase;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}

.step{display:none;} .step.active{display:block;}

.btn-submit{width:100%;padding:.875rem;border-radius:8px;border:none;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;font-weight:800;letter-spacing:.06em;background:var(--red);color:#fff;margin-top:.25rem;transition:all .18s;box-shadow:0 4px 20px rgba(204,30,36,.35);}
.btn-submit:hover{background:var(--red-dk);transform:translateY(-1px);}
.btn-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;}

.back-btn{background:none;border:none;color:var(--muted);font-family:'Barlow',sans-serif;font-size:.82rem;cursor:pointer;margin-top:.75rem;display:block;width:100%;text-align:center;padding:.25rem;transition:color .15s;}
.back-btn:hover{color:var(--white);}

a{color:inherit;text-decoration:none;}

footer{position:relative;z-index:1;text-align:center;padding:2rem 1.5rem;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted);font-family:'Barlow Condensed',sans-serif;letter-spacing:.06em;background:rgba(0,0,0,.2);}

@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}