/* ============================================================
   PARIJUSTE — PUBLIC HOME V4
   ============================================================ */

.pj-home-v4{
  --pj4-bg:#090d0f;
  --pj4-bg-soft:#0c1114;
  --pj4-panel:#10161a;
  --pj4-panel-soft:#131a1e;
  --pj4-border:rgba(255,255,255,.085);
  --pj4-border-strong:rgba(255,255,255,.13);

  --pj4-text:#f2f4f3;
  --pj4-text-soft:#c6cdca;
  --pj4-muted:#7f8b87;
  --pj4-muted-2:#58635f;

  --pj4-green:#39d98a;
  --pj4-green-soft:rgba(57,217,138,.10);
  --pj4-blue:#67bde0;

  margin:0;
  background:
    radial-gradient(
      circle at 74% 16%,
      rgba(47,107,91,.09),
      transparent 31rem
    ),
    var(--pj4-bg);
  color:var(--pj4-text);
  font-family:Inter,Arial,Helvetica,sans-serif;
}

.pj-home-v4 main{
  overflow:hidden;
}

.pj4-wrap{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
}

.pj4-hero{
  position:relative;
  min-height:calc(100vh - 74px);
  padding:94px 0 110px;
}

.pj4-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(540px,1.16fr);
  gap:82px;
  align-items:center;
}

.pj4-hero-copy{
  position:relative;
  z-index:2;
}

.pj4-eyebrow{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:28px;
  color:#788581;
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.17em;
}

.pj4-eyebrow span{
  width:27px;
  height:1px;
  background:#687570;
}

.pj4-hero h1{
  max-width:590px;
  margin:0;
  color:var(--pj4-text);
  font-family:Inter,Arial,Helvetica,sans-serif;
  font-size:clamp(52px,4.4vw,72px);
  font-weight:820;
  line-height:.99;
  letter-spacing:-.06em;
}

.pj4-hero h1 span{
  display:block;
  color:#aab4b0;
}

.pj4-hero-question{
  max-width:520px;
  margin:31px 0 0;
  color:#a5afab;
  font-size:16px;
  line-height:1.65;
}

.pj4-hero-question strong{
  display:block;
  margin-top:2px;
  color:#e8ebe9;
  font-weight:650;
}

.pj4-hero-text{
  max-width:515px;
  margin:20px 0 0;
  color:#75817d;
  font-size:14px;
  line-height:1.72;
}

.pj4-actions{
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:33px;
}

.pj4-primary{
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:0 20px;
  border:1px solid #42df92;
  border-radius:9px;
  background:#39d98a;
  color:#07100c !important;
  font-size:12px;
  font-weight:800;
  text-decoration:none !important;
  box-shadow:0 12px 32px rgba(57,217,138,.10);
  transition:
    transform .18s ease,
    background .18s ease;
}

.pj4-primary:hover{
  transform:translateY(-1px);
  background:#4ae39a;
}

.pj4-primary span{
  font-size:15px;
}

.pj4-secondary{
  color:#9aa5a0 !important;
  font-size:11px;
  font-weight:650;
  text-decoration:none !important;
}

.pj4-secondary:hover{
  color:#eef1ef !important;
}

.pj4-offer{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:17px;
  color:#5f6b66;
  font-size:9px;
}

.pj4-offer strong{
  color:#9aa49f;
  font-weight:700;
}

.pj4-offer > span{
  width:3px;
  height:3px;
  border-radius:50%;
  background:#49534f;
}

/* ============================================================
   PRODUCT ANALYSIS
   ============================================================ */

.pj4-analysis{
  position:relative;
  overflow:hidden;
  border:1px solid var(--pj4-border-strong);
  border-radius:16px;
  background:
    linear-gradient(
      145deg,
      rgba(18,25,29,.98),
      rgba(11,16,19,.98)
    );
  box-shadow:
    0 38px 90px rgba(0,0,0,.35),
    0 0 0 1px rgba(0,0,0,.18);
}

.pj4-analysis::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:110px;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(57,217,138,.055),
      transparent 48%
    );
}

.pj4-analysis-top{
  position:relative;
  min-height:53px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 20px;
  border-bottom:1px solid var(--pj4-border);
}

.pj4-analysis-top > div{
  display:flex;
  align-items:center;
  gap:9px;
}

.pj4-analysis-top strong{
  color:#cfd5d2;
  font-size:10px;
  font-weight:700;
}

.pj4-live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--pj4-green);
  box-shadow:0 0 10px rgba(57,217,138,.65);
}

.pj4-demo-label{
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:999px;
  color:#69746f;
  font-size:7px;
  font-weight:800;
  letter-spacing:.12em;
}

.pj4-match{
  display:grid;
  grid-template-columns:1fr auto;
  gap:25px;
  align-items:end;
  padding:23px 22px 20px;
  border-bottom:1px solid var(--pj4-border);
}

.pj4-match > div{
  display:grid;
  gap:6px;
}

.pj4-match small,
.pj4-market small{
  color:#5e6a65;
  font-size:7px;
  font-weight:800;
  letter-spacing:.12em;
}

.pj4-match strong{
  color:#e9ecea;
  font-size:16px;
  font-weight:720;
  letter-spacing:-.025em;
}

.pj4-market{
  min-width:115px;
  text-align:right;
}

.pj4-market strong{
  color:#c2cac6;
  font-size:12px;
}

.pj4-odds{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:14px 22px 0;
}

.pj4-bookmaker{
  min-width:0;
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 14px;
  align-items:center;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(255,255,255,.018);
}

.pj4-bookmaker > div{
  display:flex;
  align-items:center;
  gap:7px;
}

.pj4-bookmaker small{
  color:#7e8a85;
  font-size:8px;
  font-weight:750;
}

.pj4-book-dot{
  width:6px;
  height:6px;
  border-radius:50%;
}

.pj4-book-dot-blue{
  background:var(--pj4-blue);
}

.pj4-book-dot-green{
  background:var(--pj4-green);
}

.pj4-bookmaker > strong{
  grid-row:1 / span 2;
  grid-column:2;
  color:#e9ecea;
  font-size:17px;
  font-weight:750;
}

.pj4-bookmaker del{
  margin-right:4px;
  color:#5f6a66;
  font-size:10px;
  font-weight:500;
}

.pj4-best,
.pj4-change{
  width:max-content;
  padding:4px 6px;
  border-radius:5px;
  font-size:6px;
  font-weight:850;
  letter-spacing:.07em;
}

.pj4-best{
  color:#78c7a2;
  background:rgba(57,217,138,.08);
}

.pj4-change{
  color:#76c99f;
  background:rgba(57,217,138,.07);
}

.pj4-chart{
  padding:24px 22px 20px;
}

.pj4-chart-head{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:20px;
}

.pj4-chart-head > div{
  display:grid;
  gap:5px;
}

.pj4-chart-head small,
.pj4-score small{
  color:#5d6864;
  font-size:7px;
  font-weight:850;
  letter-spacing:.12em;
}

.pj4-chart-head strong{
  color:#d8ddda;
  font-size:12px;
}

.pj4-chart-head > span{
  color:#4f5a55;
  font-size:8px;
}

.pj4-chart-area{
  position:relative;
  height:148px;
  margin-top:18px;
  overflow:hidden;
}

.pj4-grid-line{
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:rgba(255,255,255,.045);
}

.pj4-grid-1{top:20%}
.pj4-grid-2{top:50%}
.pj4-grid-3{top:80%}

.pj4-line-betclic{
  position:absolute;
  left:4%;
  right:4%;
  top:37%;
  height:1px;
  background:rgba(103,189,224,.82);
}

.pj4-line-betclic span{
  position:absolute;
  right:0;
  bottom:6px;
  color:#6e9dad;
  font-size:7px;
}

.pj4-line-unibet{
  position:absolute;
  left:4%;
  right:4%;
  top:68%;
  height:1px;
  background:var(--pj4-green);
}

.pj4-line-unibet i{
  position:absolute;
  left:55%;
  bottom:0;
  width:1px;
  height:46px;
  background:var(--pj4-green);
}

.pj4-line-unibet b{
  position:absolute;
  right:-2px;
  top:-2px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--pj4-green);
  box-shadow:0 0 10px rgba(57,217,138,.6);
}

.pj4-line-unibet span{
  position:absolute;
  right:0;
  top:7px;
  color:#65a986;
  font-size:7px;
}

.pj4-chart-times{
  position:absolute;
  left:4%;
  right:4%;
  bottom:0;
  display:flex;
  justify-content:space-between;
  color:#46504c;
  font-size:7px;
}

.pj4-signal{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:20px;
  margin:0 22px;
  padding:18px 0;
  border-top:1px solid var(--pj4-border);
}

.pj4-score{
  display:grid;
  gap:8px;
  align-content:start;
}

.pj4-score > div{
  display:flex;
  align-items:baseline;
}

.pj4-score strong{
  color:#e8ecea;
  font-size:38px;
  font-weight:780;
  line-height:1;
  letter-spacing:-.06em;
}

.pj4-score span{
  margin-left:4px;
  color:#65716c;
  font-size:11px;
}

.pj4-signal-copy{
  display:grid;
  align-content:start;
  gap:5px;
  padding-left:20px;
  border-left:1px solid var(--pj4-border);
}

.pj4-signal-copy > span{
  color:#658072;
  font-size:7px;
  font-weight:850;
  letter-spacing:.11em;
}

.pj4-signal-copy strong{
  color:#b9d8c8;
  font-size:11px;
}

.pj4-signal-copy p{
  max-width:330px;
  margin:1px 0 0;
  color:#68746f;
  font-size:9px;
  line-height:1.55;
}

.pj4-analysis-foot{
  padding:11px 22px;
  border-top:1px solid var(--pj4-border);
  color:#4e5954;
  font-size:7px;
  line-height:1.5;
}

.pj4-next{
  min-height:180px;
  display:grid;
  place-items:center;
  border-top:1px solid rgba(255,255,255,.05);
  background:#0a0f11;
}

.pj4-next span{
  color:#3f4945;
  font-size:8px;
  font-weight:800;
  letter-spacing:.16em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1050px){
  .pj4-hero-grid{
    grid-template-columns:1fr;
    gap:65px;
  }

  .pj4-hero-copy{
    max-width:720px;
  }

  .pj4-analysis{
    max-width:760px;
  }
}

@media(max-width:700px){
  .pj4-wrap{
    width:calc(100% - 30px);
  }

  .pj4-hero{
    padding:65px 0 80px;
  }

  .pj4-hero h1{
    font-size:clamp(44px,13vw,62px);
  }

  .pj4-actions{
    align-items:flex-start;
    flex-direction:column;
    gap:16px;
  }

  .pj4-match{
    grid-template-columns:1fr;
  }

  .pj4-market{
    text-align:left;
  }

  .pj4-odds{
    grid-template-columns:1fr;
  }

  .pj4-signal{
    grid-template-columns:1fr;
  }

  .pj4-signal-copy{
    padding:15px 0 0;
    border-left:0;
    border-top:1px solid var(--pj4-border);
  }
}

/* ============================================================
   PUBLIC NAVIGATION V4
   ============================================================ */

.pj-nav,
.pj-nav *{
  box-sizing:border-box;
}

.pj-nav{
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(8,12,14,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.pj-nav__inner{
  width:min(1180px,calc(100% - 48px));
  min-height:72px;
  margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:34px;
}

.pj-nav__brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#f0f2f1 !important;
  text-decoration:none !important;
}

.pj-nav__mark{
  position:relative;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(57,217,138,.25);
  border-radius:9px;
  background:rgba(57,217,138,.055);
}

.pj-nav__mark::before{
  content:"";
  width:12px;
  height:6px;
  border-left:2px solid #39d98a;
  border-bottom:2px solid #39d98a;
  transform:translateY(-2px) rotate(-45deg);
}

.pj-nav__mark span{
  display:none;
}

.pj-nav__brand-copy{
  display:block;
}

.pj-nav__brand-copy strong{
  color:#eef1ef;
  font-size:15px;
  font-weight:750;
  letter-spacing:-.025em;
}

.pj-nav__brand-copy small{
  display:none;
}

.pj-nav__links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
}

.pj-nav__links a{
  color:#77837e !important;
  font-size:10px;
  font-weight:650;
  text-decoration:none !important;
  transition:color .15s ease;
}

.pj-nav__links a:hover{
  color:#e3e7e4 !important;
}

.pj-nav__actions{
  display:flex;
  align-items:center;
  gap:18px;
}

.pj-nav__login{
  color:#87938e !important;
  font-size:10px;
  font-weight:650;
  text-decoration:none !important;
}

.pj-nav__primary{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:0 15px;
  border:1px solid rgba(57,217,138,.7);
  border-radius:8px;
  background:#39d98a;
  color:#07100c !important;
  font-size:10px;
  font-weight:800;
  text-decoration:none !important;
}

.pj-nav__primary span{
  font-size:12px;
}

.pj-nav__menu{
  display:none;
}

.pj-nav__mobile{
  display:none;
}

@media(max-width:820px){
  .pj-nav__inner{
    width:calc(100% - 30px);
    min-height:66px;
    grid-template-columns:auto 1fr auto;
  }

  .pj-nav__links,
  .pj-nav__actions{
    display:none;
  }

  .pj-nav__menu{
    grid-column:3;
    width:36px;
    height:36px;
    display:grid;
    place-content:center;
    gap:5px;
    padding:0;
    border:1px solid rgba(255,255,255,.09);
    border-radius:8px;
    background:transparent;
  }

  .pj-nav__menu span{
    width:15px;
    height:1px;
    display:block;
    background:#aab3af;
  }

  .pj-nav.is-open .pj-nav__mobile{
    display:grid;
  }

  .pj-nav__mobile{
    padding:10px 15px 18px;
    border-top:1px solid rgba(255,255,255,.06);
    background:#090e10;
  }

  .pj-nav__mobile a{
    padding:12px 4px;
    color:#9aa5a0 !important;
    font-size:12px;
    text-decoration:none !important;
  }

  .pj-nav__mobile-primary{
    margin-top:7px;
    border-top:1px solid rgba(255,255,255,.06);
    color:#39d98a !important;
    font-weight:750;
  }
}

/* ============================================================
   PARIJUSTE — NAVBAR V5
   ============================================================ */

.pj5-nav,
.pj5-nav *{
  box-sizing:border-box;
}

.pj5-nav{
  position:relative;
  z-index:1000;
  width:100%;
  background:#ffffff;
  border-bottom:1px solid #e8ebe9;
  font-family:Inter,Arial,Helvetica,sans-serif;
}

.pj5-nav__inner{
  width:min(1180px,calc(100% - 48px));
  height:68px;
  margin:0 auto;

  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:42px;
}


/* BRAND */

.pj5-brand{
  display:inline-flex;
  align-items:center;
  gap:11px;

  color:#101817 !important;
  text-decoration:none !important;
}

.pj5-brand__symbol{
  width:42px;
  height:42px;
  flex:0 0 42px;

  display:grid;
  place-items:center;
}

.pj5-brand__symbol svg{
  width:42px;
  height:42px;
  display:block;
  overflow:visible;
}

.pj5-logo-p,
.pj5-logo-j{
  fill:none;
  stroke:#101817;
  stroke-width:4.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.pj5-logo-market{
  fill:none;
  stroke:#18b875;
  stroke-width:4.8;
  stroke-linecap:square;
  stroke-linejoin:miter;
}

.pj5-brand__name{
  color:#101817;
  font-size:21px;
  font-weight:850;
  line-height:1;
  letter-spacing:-.045em;
}


/* LINKS */

.pj5-nav__links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:31px;
}

.pj5-nav__links a{
  color:#59625f !important;
  font-size:13px;
  font-weight:600;
  text-decoration:none !important;
  transition:color .15s ease;
}

.pj5-nav__links a:hover{
  color:#101817 !important;
}


/* ACTIONS */

.pj5-nav__actions{
  display:flex;
  align-items:center;
  gap:22px;
}

.pj5-nav__login{
  color:#4e5854 !important;
  font-size:13px;
  font-weight:650;
  text-decoration:none !important;
}

.pj5-nav__cta{
  min-height:42px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;

  padding:0 18px;

  border:1px solid #18b875;
  border-radius:9px;

  background:#18b875;
  color:#ffffff !important;

  font-size:12px;
  font-weight:750;
  text-decoration:none !important;

  transition:
    background .15s ease,
    transform .15s ease;
}

.pj5-nav__cta:hover{
  background:#139c64;
  transform:translateY(-1px);
}

.pj5-nav__cta span{
  font-size:15px;
}


/* MOBILE */

.pj5-nav__menu,
.pj5-nav__mobile{
  display:none;
}

@media(max-width:820px){

  .pj5-nav__inner{
    width:calc(100% - 30px);
    height:64px;
    grid-template-columns:auto 1fr auto;
  }

  .pj5-brand__symbol{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .pj5-brand__symbol svg{
    width:38px;
    height:38px;
  }

  .pj5-brand__name{
    font-size:19px;
  }

  .pj5-nav__links,
  .pj5-nav__actions{
    display:none;
  }

  .pj5-nav__menu{
    grid-column:3;

    width:38px;
    height:38px;

    display:grid;
    place-content:center;
    gap:6px;

    padding:0;

    border:1px solid #dfe4e1;
    border-radius:8px;

    background:#ffffff;
  }

  .pj5-nav__menu span{
    width:17px;
    height:1.5px;
    display:block;
    background:#18201d;
  }

  .pj5-nav.is-open .pj5-nav__mobile{
    display:grid;
  }

  .pj5-nav__mobile{
    padding:8px 15px 18px;
    border-top:1px solid #edf0ee;
    background:#ffffff;
  }

  .pj5-nav__mobile a{
    padding:12px 4px;

    color:#4e5854 !important;

    font-size:14px;
    font-weight:600;
    text-decoration:none !important;
  }

  .pj5-nav__mobile-cta{
    margin-top:5px;
    color:#129a62 !important;
    font-weight:750 !important;
  }
}

/* ============================================================
   PARIJUSTE — LOGO FINAL
   ============================================================ */

.pj5-brand{
  gap:12px;
}

.pj5-brand__symbol{
  width:45px;
  height:45px;
  flex-basis:45px;
}

.pj5-brand__symbol svg{
  width:45px;
  height:45px;
  overflow:visible;
}

.pj5-logo-p{
  fill:none;
  stroke:#111b22;
  stroke-width:7;
  stroke-linecap:square;
  stroke-linejoin:round;
}

.pj5-logo-j{
  fill:none;
  stroke:url(#pj5-j-gradient);
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.pj5-logo-market{
  fill:none;
  stroke:url(#pj5-market-gradient);
  stroke-width:6;
  stroke-linecap:square;
  stroke-linejoin:miter;
}

.pj5-brand__name{
  font-size:22px;
  font-weight:850;
  letter-spacing:-.05em;

  background:linear-gradient(
    100deg,
    #111b22 0%,
    #111b22 48%,
    #16a86c 70%,
    #078e59 100%
  );

  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

@media(max-width:820px){
  .pj5-brand__symbol,
  .pj5-brand__symbol svg{
    width:41px;
    height:41px;
  }

  .pj5-brand__symbol{
    flex-basis:41px;
  }

  .pj5-brand__name{
    font-size:20px;
  }
}

/* ============================================================
   PARIJUSTE — MONOGRAMME A FINAL
   ============================================================ */

.pj5-logo-p{
  fill:#111b22;
  stroke:none;
}

.pj5-logo-j{
  fill:url(#pj5-j-gradient);
  stroke:none;
}

.pj5-logo-market{
  fill:url(#pj5-market-gradient);
  stroke:none;
}

.pj5-brand__symbol{
  width:46px;
  height:46px;
  flex-basis:46px;
}

.pj5-brand__symbol svg{
  width:46px;
  height:46px;
}