:root{
  --navy:#201b62;
  --blue:#18a3df;
  --bg:#f8f4e9;
  --text:#1f2440;
  --shadow:0 18px 48px rgba(32,27,98,.16);
  --radius:24px;
}

*{box-sizing:border-box}
html,body{min-height:100%}
html{font-size:16px}

body{
  margin:0;
  font-family:"Heebo",Arial,sans-serif;
  direction:rtl;
  color:var(--text);
  background:
    radial-gradient(circle at top, rgba(24,163,223,.13), transparent 34%),
    linear-gradient(180deg,#ffffff 0%,var(--bg) 100%);
}

button,input,textarea,select{font:inherit}

body::before{
  content:"";
  position:fixed;
  inset:12px;
  border:2px solid rgba(32,27,98,.08);
  border-radius:30px;
  pointer-events:none;
}

.app{
  min-height:100dvh;
  width:min(100%, 1440px);
  margin:0 auto;
  padding:clamp(10px,2vh,18px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.shell{
  width:100%;
  min-height:600px;
  height:min(calc(100dvh - 20px), 940px);
  background:rgba(255,255,255,.88);
  border:1px solid rgba(32,27,98,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(16px,2vh,24px);
  display:grid;
  grid-template-columns:minmax(220px,.92fr) minmax(340px,1.15fr) minmax(220px,.92fr);
  gap:clamp(12px,1.8vw,24px);
  overflow:hidden;
}

.figure{
  position:relative;
  min-height:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 25%, rgba(24,163,223,.12), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(248,244,233,.35));
  border-radius:22px;
  overflow:hidden;
}

.figure::after{
  content:"";
  position:absolute;
  inset:auto 12% 0 12%;
  height:15%;
  background:radial-gradient(ellipse at center, rgba(32,27,98,.12), transparent 70%);
  filter:blur(10px);
  z-index:0;
}

.character{
  position:relative;
  z-index:1;
  width:auto;
  max-width:100%;
  max-height:92%;
  object-fit:contain;
  object-position:center bottom;
  display:block;
}

.character-male{
  transform:translateX(-1.2%);
}

.character-female{
  transform:translateX(1.2%);
}

.content{
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:clamp(10px,1.7vh,15px);
  padding-inline:clamp(8px,1vw,18px);
}

.logo{
  width:min(100%, 420px);
  height:auto;
  display:block;
}

h1{
  margin:0;
  font-size:clamp(2.35rem, 4.8vw, 5.1rem);
  line-height:.92;
  font-weight:900;
  letter-spacing:-.04em;
  color:#b8120e;
  text-wrap:balance;
}

.sub{
  margin:0;
  font-size:clamp(1rem,1.6vw,1.18rem);
  line-height:1.42;
  font-weight:500;
  color:#36405f;
  max-width:28ch;
}

.buttons{
  width:100%;
  display:grid;
  gap:12px;
  margin-top:4px;
}

.btn{
  text-decoration:none;
  border-radius:18px;
  padding:16px 18px;
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:800;
  line-height:1.28;
  box-shadow:0 12px 26px rgba(32,27,98,.14);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(32,27,98,.19);
  filter:brightness(1.02);
}

.btn:focus-visible{
  outline:4px solid rgba(24,163,223,.28);
  outline-offset:3px;
}

.btn.primary{background:var(--navy); color:#fff}
.btn.secondary{background:var(--blue); color:#051a2a}

.underline-word{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

.note{
  margin:0;
  font-size:clamp(.82rem,1.2vw,.94rem);
  line-height:1.45;
  font-weight:500;
  color:#606883;
  max-width:34ch;
}

.ballot-wrap{
  display:flex;
  justify-content:center;
  margin-top:2px;
}

.ballot-slip{
  width:clamp(88px, 9vw, 132px);
  height:auto;
  filter:drop-shadow(0 10px 16px rgba(24,28,49,.16));
  transform:rotate(-2deg);
}

@media (max-width: 980px){
  .shell{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    height:min(calc(100dvh - 16px), 980px);
    min-height:auto;
    gap:10px;
    padding:12px;
  }

  .content{
    order:1;
    justify-content:flex-start;
    gap:10px;
  }

  .logo{
    width:min(100%, 320px);
  }

  h1{
    font-size:clamp(2rem, 9vw, 3.5rem);
  }

  .sub{
    max-width:33ch;
    font-size:.96rem;
  }

  .buttons{
    max-width:680px;
  }

  .btn{
    min-height:60px;
    padding:14px 15px;
    font-size:clamp(.95rem, 2.5vw, 1.05rem);
  }

  .note{
    font-size:.79rem;
  }

  .ballot-slip{
    width:88px;
  }

  .figure-left,
  .figure-right{
    background:none;
    border-radius:0;
  }

  .figure-left::after,
  .figure-right::after{
    display:none;
  }

  .figure-left{grid-row:2}
  .figure-right{grid-row:2}

  .shell{
    position:relative;
  }

  .figure{
    display:none;
  }

  .mobile-figures{
    display:flex;
  }
}

@media (max-width: 980px){
  .shell::after{
    content:"";
    position:absolute;
    inset:auto 14px 12px 14px;
    height:36%;
    border-radius:20px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(248,244,233,.3) 12%, rgba(248,244,233,.55) 100%);
    pointer-events:none;
    z-index:0;
  }

  .content{
    position:relative;
    z-index:2;
    padding-bottom:0;
  }

  .mobile-figures-holder{
    display:block;
  }
}

.mobile-figures-holder{
  display:none;
}

@media (max-width: 980px){
  .mobile-figures-holder{
    display:block;
    position:relative;
    min-height:250px;
    z-index:1;
    margin-top:auto;
  }

  .mobile-figures{
    position:absolute;
    inset:0 0 0 0;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:6px;
    padding-inline:2px;
  }

  .mobile-figures .mobile-figure{
    flex:1 1 0;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    min-width:0;
  }

  .mobile-figures .mobile-figure img{
    width:auto;
    height:min(42vh, 300px);
    max-width:100%;
    object-fit:contain;
    object-position:center bottom;
    display:block;
  }

  .mobile-figures .mobile-figure.left img{
    transform:translateX(-4%);
  }

  .mobile-figures .mobile-figure.right img{
    transform:translateX(4%);
  }
}

@media (max-width: 640px){
  body::before{
    inset:8px;
    border-radius:22px;
  }

  .app{
    padding:8px;
  }

  .shell{
    border-radius:20px;
    padding:12px;
  }

  .logo{
    width:min(100%, 286px);
  }

  h1{
    font-size:clamp(1.95rem, 9vw, 3.2rem);
  }

  .sub{
    font-size:.93rem;
    line-height:1.35;
  }

  .btn{
    border-radius:16px;
    min-height:56px;
    padding:12px 14px;
    font-size:.93rem;
  }

  .ballot-slip{
    width:78px;
  }

  .mobile-figures-holder{
    min-height:215px;
  }

  .mobile-figures .mobile-figure img{
    height:min(35vh, 245px);
  }
}

@media (max-width: 430px){
  .shell{
    overflow:auto;
  }

  .mobile-figures-holder{
    min-height:190px;
  }

  .mobile-figures .mobile-figure img{
    height:min(31vh, 210px);
  }
}

@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
}