:root{
  --bg:#f9f9f9;
  --text:#02021e;
  --muted:#989898;

  --blue:#3a64f8;
  --blue-2:#3a64f8;
  --blue-soft:#dae2ff;

  --pink:#e23a8d;
  --pink-soft:rgba(226,58,141,.12);
  --pink-soft2:rgba(226,58,141,.06);

  --white:#ffffff;
  --border:#e5e7eb;

  --radius:16px;
  --radius-sm:8px;

  --shadow:0 12px 28px rgba(0,0,0,.08);
  --shadow-soft:0 10px 22px rgba(0,0,0,.06);

  --container:1440px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-x: none;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Roboto,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
}
html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font-family:inherit}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:72px 82px;
}

.layout{
  display:grid;
  grid-template-columns: 1fr minmax(320px, 40%);
  gap:64px;
  align-items:start;
}

.left{min-width:0}
.right{min-width:0;height: 100%;    display: flex;
    align-items: end;}



/* RIGHT sticky */
.sticky{
  bottom:8px;
  position:sticky;
  flex: 1;
}

/* LEFT */
.hero{display:flex;flex-direction:column;gap:40px}
.logo{width:186px;height:auto}
.hero__title{
  font-size:30px;
  line-height:40px;
  font-weight:600;
  margin:0;
}
.hero-mobile {
  display: none;
  flex-direction: row;
  margin-bottom: 24px;
  align-items: flex-end;
}
.hero-mobile > h1 {
  font-weight: 400;
  font-size: clamp(12px, 3.5vw, 18px);
  line-height: 18px;
}

.scroll-hint{
  margin-top:440px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.scroll-hint__link{
  font-size:24px;
  line-height:32px;
  font-weight:600;
  text-decoration:none;
}
.scroll-hint__icon{display:inline-flex}

.features{
  margin-top:200px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 20px;
}

.card{
  border-radius:8px;
  padding:16px;
  min-height:200px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
}
.card--soft{background:var(--pink-soft2)}
.card--soft-strong{background:var(--pink-soft)}
.card--grad{
  background:linear-gradient(106.7deg, rgba(226,58,141,1) 5.8%, rgba(245,188,216,1) 92.6%);
  color:#fff;
}
.card__text{margin:0;font-size:16px;line-height:24px;font-weight:400}
.card__text--white{color:#fff}
.card__divider{
  height:1px;
  width:100%;
  background:rgba(0,0,0,.12);
  margin:48px 0 12px 0;
}
.card__divider--white{background:rgba(255,255,255,.6)}

.mini-squares{
  position:absolute;
  top:16px;
  left:16px;
  display:flex;
  gap:8px;
}
.sq{width:14px;height:14px;border-radius:2px}
.sq--pink{background:var(--pink)}
.sq--white{background:#fff}
.sq--white-border{background:transparent;border:1px solid #fff}
.sq--pink-solid{background:var(--pink)}

/* Role intro */
.role-intro{margin-top:72px; scroll-margin-top: 24px;}
.section-title{
  font-size:24px;
  line-height:32px;
  font-weight:500;
  margin:0 0 32px 0;
}
.steps{display:flex;flex-direction:column;}
.step{display:flex;
    gap:16px;align-items:flex-start;
    align-items: center;}
.step__num{
  font-size:48px;
  line-height:120%;
  font-weight:700;
  color:rgba(226, 58, 141, 0.2);
  width:88px;
  flex:0 0 auto;
  font-weight: bold;
}
.step__text{font-size:16px;line-height:24px}
.hr{height:1px;
    background:rgba(226, 58, 141, 0.2);
    margin-block: 24px;
    width:100%}

.callout{
  margin-top:32px;
  display:grid;
  grid-template-columns: 70% 30%;
overflow: hidden;
}
.callout__left{
  padding:16px;
  font-size:16px;
  line-height:24px;
    text-align: center;
    display: flex;
    align-items: center;
  border: 1px solid rgba(226, 58, 141, 1);
  border-radius: 8px 0 0 8px;
}
.callout__right{
  background-color:rgba(226, 58, 141, 1);
  padding:16px;
  font-size:16px;
  line-height:24px;
  color:#fff;
    text-align: center;
    display: flex;
    align-items: center;
  border: 1px solid rgba(226, 58, 141, 1);
  border-radius: 0 8px 8px 0; 
}

/* Role blocks */
.role-block{margin-top:72px;scroll-margin-top:24px}
.role-title{
  font-size:30px;
  line-height:40px;
  font-weight:600;
  margin:0 0 32px 0;
}
.role-title__accent--blue{color:rgba(30, 64, 175, 1)}
.role-title__accent--pink{color:var(--pink)}

.role-subtitle{
  font-size:24px;
  line-height:32px;
  font-weight:600;
  margin:0 0 32px 0;
}
.muted{color:var(--muted);font-weight:600}

.tiles{    display: flex;
    gap: 16px;
    align-items: flex-start;}
.tile{
  border-radius:8px;
  padding:16px;
  color:#fff;
  position:relative;
  overflow:hidden;
  display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.tile--blue{background:rgba(58, 100, 248, 0.6)}
.tile__num{
  font-size:48px;
  line-height:120%;
  font-weight:700;

  color: rgba(30, 64, 175, 1)
}
.tile__text{
    margin-top:16px;
    font-size:14px;
    font-weight: 400;
    font-style: normal;
    line-height:22px}
.h200{min-height:200px}
.h240{min-height:240px}
.h280{min-height:280px}
.h320{min-height:320px}

.tiles--2x2{
    grid-template-columns:repeat(2,minmax(0,1fr));
        display: grid;
}
.tiles--2wide{
    grid-template-columns:repeat(2,minmax(0,1fr));
        display: grid;
}
.tiles--3{
    grid-template-columns:repeat(3,minmax(0,1fr));
display: grid;
    height: 250px;
}

.info-card{
  border-radius:8px;
  padding:16px;
  min-height:200px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:12px;
  height: 100%;
}
.info-card p{margin:0;font-size:16px;line-height:24px}
.info-card__icon{width:36px;height:36px}
.info-card--pink{
  background:linear-gradient(106.7deg, rgba(226,58,141,1) 5.8%, rgba(245,188,216,1) 92.6%);
  color:#fff;
}
.info-card--pink-soft{background:var(--pink-soft2)}
.info-card--blue-soft{background:rgba(58,100,248,.12)}
.info-card--blue{background:var(--blue);color:#fff;grid-column: 1 / -1;}

.promo{
  border-radius:8px;
  padding:16px;
  height: 100%;
  display:flex;
  align-items:flex-end;
}
.promo p{margin:0;font-size:16px;line-height:24px}
.promo--solid{
    background:var(--pink);
    align-items: center;
    color:#fff}
.promo--grad-top{
  background:linear-gradient(0deg, rgba(226, 58, 141, 1) 0%, rgb(245 188 216 / 0%) 100%);
  color:#fff;
}
.promo--grad-bottom{
  background:linear-gradient(180deg, rgba(226, 58, 141, 1) 0%, rgb(245 188 216 / 0%) 100%);
  color:#fff;
      align-items: flex-start;
}

.more{
  display:inline-flex;
  gap:8px;
  width: 100%;
  align-items:center;
  margin-top:40px;
  color:var(--muted);
  text-decoration:underline;
  font-size:14px;
  justify-content: flex-end;
}
.more:hover{
  color: rgba(226, 58, 141, 1);
}
.more:hover > svg{
  stroke: rgba(226, 58, 141, 1);
}
.more:active{
  color: rgba(184, 13, 97, 1);
  text-decoration: underline;
}
.more:active > svg{
  stroke: rgba(184, 13, 97, 1);
}

/* Agency list */
.list{display:flex;flex-direction:column;gap:24px}
.list__row{display:grid;
    grid-template-columns:88px 1fr;
        align-items: center;
    gap:20px;
}
.list__icon{
  width:88px;height:48px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.list__icon img{width:24px;height:24px}
.list__text p{margin:0;font-size:16px;line-height:24px}
.list__text{height: 100%;
        padding-bottom: 16px;
    border-bottom: 1px solid rgba(58, 100, 248, 0.6);}

.final{
      margin-top: 72px;
    padding: 24px 50px;
    background: rgba(226, 58, 141, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: 500;
    font-size: 16px;
    line-height: 180%;
    text-align: center;
    border-radius: 8px;
}

.reg{
  background:var(--blue);
  border-radius:var(--radius);
  padding:32px 64px;
  box-shadow:var(--shadow);
  position:relative;
}

.reg__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:32px;
}
.reg__title{
  color:#f7f7f7;
  font-size:24px;
  line-height:32px;
  font-weight:600;
}

/* ===== Language Select ===== */

.lang{
  display: flex;
  align-items: center;
  gap: 8px;

  background: #fff;
  border-radius: 8px;
  position: relative;

  border: 1px solid rgba(30, 64, 175, 0.15);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.lang:hover{
  border-color: rgba(30, 64, 175, 0.35);
}

/* Select itself */
.lang select{
  border: none;
  width: 96px;
  padding-left: 16px;
  padding-right: 40px; /* space for chevron */
  height: 40px;

  outline: none;
  background: transparent;

  font-size: 14px;
  color: #1E40AF;

  appearance: none;
  cursor: pointer;

  transition: transform .05s ease;
}

/* Pressed effect */
.lang select:active{
  /* transform: translateY(1px); */
}

/* Keyboard focus */
.lang select:focus-visible{
  /* box-shadow: 0 0 0 3px rgba(58, 100, 248, 0.25); */
  border-radius: 8px;
}

/* Dropdown options (limited browser support) */
.lang select option{
  font-size: 14px;
  color: #1E40AF;
  background: #ffffff;
}

/* Selected option (works in some browsers) */
.lang select option:checked{
  font-weight: 600;
}

/* Option hover/active (NOT reliable across all browsers) */
.lang select option:hover{
  background: rgba(58, 100, 248, 0.12);
}

.lang select option:active{
  background: rgba(58, 100, 248, 0.18);
}

/* Chevron positioning */
.lang__chev{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.lang__chev svg{
  width: 16px;
  height: 10px;
  display: block;
}


.field{margin-bottom:24px;
position: relative;}
.field__label{
  display:block;
  color:#f7f7f7;
  font-size:14px;
  line-height:22px;
  font-weight:600;
  margin-bottom:8px;
}
.field__checkbox {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.input{
  width:100%;
  height:40px;
  border-radius:8px;
  border:1px solid rgba(58, 100, 248, 1);
  padding:0 12px;
  outline:none;
  box-shadow: 0px 0px 0px 2px rgba(24, 144, 255, 0.2) inset;
}
.input[type="email"]:hover {
  border-color: rgba(22, 119, 255, 1);
}
.checkbox{    margin-top: 8px;}
.is-hidden{
  display: none !important;
}



.field__error{
  font-size:14px;
  line-height:22px;
  color:rgba(145, 0, 0, 1);
  display:none;
  position: absolute;
}

.roles{margin-block:40px;     position: relative;}
.roles__head{
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap:12px;
  margin-bottom:16px;
}
.roles__head > svg{
  cursor: pointer;
  transition: transform .08s ease, opacity .15s ease, filter .15s ease;
}

/* hover */
.roles__head > svg:hover{
  opacity: 0.9;
  filter: drop-shadow(0 0 6px rgba(58, 100, 248, 0.35));
}

/* pressed */
.roles__head > svg:active{
  transform: scale(0.92);
  opacity: 0.75;
  filter: drop-shadow(0 0 3px rgba(58, 100, 248, 0.25));
}

.roles__label{
  color:#f7f7f7;
  font-size:14px;
  line-height:22px;
  font-weight:600;
}
.roles__help{width:14px;height:14px}

.roles__list{display:flex;flex-direction:column;gap:16px}
.role-btn{
  height:40px;
  border-radius:8px;
  border:2px solid transparent;
  background:rgba(218, 226, 255, 1);
  padding:0 16px;
  text-align:left;
  cursor:pointer;
  font-size:14px;
  color:rgba(0,0,0,.88);
}
.role-btn:hover:not(.is-active) {
  background-color: transparent;
  border-color: rgba(30, 64, 175, 0.3);
  color: rgba(247, 247, 247, 1);
}
.role-btn.is-active{
  background-color: rgba(30, 64, 175, 1);
  border-color: rgba(30, 64, 175, 1);
  color: rgba(247, 247, 247, 1);
  position: relative;
}
.role-btn.is-active::after{
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);

  width: 15px;
  height: 12px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2212%22%20viewBox%3D%220%200%2015%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M14.4289%200H13.1806C13.0056%200%2012.8396%200.0803571%2012.7324%200.217857L5.36993%209.54464L1.83957%205.07143C1.78617%205.00362%201.7181%204.9488%201.64047%204.91106C1.56284%204.87333%201.47767%204.85368%201.39136%204.85357H0.143146C0.0235032%204.85357%20-0.0425683%204.99107%200.030646%205.08393L4.92172%2011.2804C5.15029%2011.5696%205.58958%2011.5696%205.81993%2011.2804L14.5414%200.228571C14.6146%200.1375%2014.5485%200%2014.4289%200Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
}
/* pressed (inactive) */
.role-btn:active:not(.is-active){
  background-color: rgba(30, 64, 175, 0.12);
  border-color: rgba(30, 64, 175, 0.45);
  color: rgba(0, 0, 0, 0.88);
  transform: translateY(1px);
}
.role-btn.is-active:active{
  background-color: rgba(23, 50, 140, 1);
  border-color: rgba(23, 50, 140, 1);
  color: rgba(247, 247, 247, 1);
  transform: translateY(1px);
}

.cta{
  width:100%;
  height:40px;
  border:none;
  border-radius:6px;
  background:var(--pink);
  color:rgba(255, 255, 255, 1);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.cta:disabled{
  background-color: rgba(152, 152, 152, 1);
  border-color: rgba(38, 38, 51, 1);
  color: rgba(38, 38, 51, 1);
  cursor: not-allowed;
}
.cta:hover:not(:disabled){
  background-color: rgba(184, 13, 97, 1);
}
.cta:active:not(:disabled){
  background-color: rgba(150, 10, 80, 1);
  transform: translateY(1px);
  box-shadow: none;
}
.account_link{
  color: rgba(212, 212, 212, 1);
  text-align: center;
  margin-top: 16px;
  display: block;
}

.alt{margin-top:24px;text-align:center}
.alt__title{font-size:14px;line-height:22px;color:rgba(0,0,0,.88);margin-bottom:12px}
.alt__icons{display:flex;justify-content:center;gap:20px}
.icon-btn{width:24px;height:24px;display:inline-flex}

.sticky-dots{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
  padding-top:24px;
  position: absolute;
right: calc(100% + 64px + 16px);
bottom: 0;
}
.dot{
  width:4px;height:40px;border-radius:4px;
  background:rgba(58,100,248,.6);
}
.dot--active{background:var(--blue)}

#mobileTopBar{
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 9999;
  width: calc(100% - 24px);
  max-width: 520px;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 180ms;
}
#mobileTopBar > .mobile-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    background: rgba(58, 100, 248, 1);
    color: rgb(255, 255, 255);
    cursor: pointer;
    user-select: none;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 1);
    border-radius: 0 0 16px 16px;
    min-height: 70px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    flex-direction: column-reverse;
}

/* QUIZ */
.quiz__intro{
  margin-bottom: 24px;
}

.quiz__intro-steps{
  position: relative;
  width: 100%;
  height: 18px;
  display: flex;
  align-items: center;
  margin-block: 16px;
}

.quiz__step-line{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(226, 58, 141, 1);
  border-radius: 999px;
}

.quiz__step-dot{
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background: rgba(226, 58, 141, 1);
  border-radius: 50%;
}

.quiz__step-dot--left{ left: 0; }
.quiz__step-dot--center{ left: 50%; transform: translate(-50%, -50%); }
.quiz__step-dot--right{ right: 0; }

.quiz__error{
  margin: 14px 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.35;
  background: rgba(255, 59, 48, 0.08);
  border: 1px solid rgba(255, 59, 48, 0.35);
  color: #b42318;
}


/* Responsive */
@media (max-width:1200px){
  .container{padding:48px 32px}
  .reg{padding:24px}
  .layout{grid-template-columns: 1fr minmax(320px, 30%);}
  .sticky-dots{right: calc(100% + 24px + 16px);}
}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .left{order: 2;}
  .right{order: 1;}
  .sticky{position:relative;top:auto;grid-template-columns:1fr}
  .sticky-dots{display:none}
  .tiles--3{grid-template-columns:1fr 1fr;height:unset;}
  .promo--grad-top{order: 1;min-height: 150px;}
  .promo--solid{order: 3;}
  .promo--grad-bottom{order: 2; grid-column: 2;grid-row: 1 / 3;}
  .tiles--4{display: grid;grid-template-columns: 1fr 1fr;}
  .h200, .h240, .h280, .h320{min-height: unset;}
  .sticky-dots{display: none;}
  .hero-mobile{display: flex;}
  .hero-desctop{display: none;}
  .scroll-hint{margin-top: 0px;}
  .layout{gap: 16px;}
  .features{margin-top: 64px;}
  .container{padding: 16px;}
  .callout{grid-template-columns:1fr;}
  .callout__right{justify-content: center;border-radius: 0 0 8px 8px;}
  .callout__left{text-align: center;border-radius: 8px 8px 0 0;}
}

@media (max-width:640px){
  .features{grid-template-columns:1fr 1fr;}
  .tiles--2x2,.tiles--2wide{grid-template-columns:1fr 1fr;}
  .hero__title{font-size:26px;line-height:34px}
  .container{padding: 8px;}
}