@font-face{font-family:Almoni;src:url("assets/almoni-regular.otf") format("opentype");font-display:swap}
@font-face{font-family:Aspaklarya;src:url("assets/aspaklarya-bold.otf") format("opentype");font-weight:700;font-display:swap}
:root{--page-width:500px;--ratio:10.95802099;--navy:#07316f;--sky:#67b9dc;--burgundy:#87002d}
*{box-sizing:border-box}
html{background:#e8ecef}
body{margin:0;min-width:280px;font-family:Almoni,Arial,sans-serif}
.landing{width:min(100%,var(--page-width));margin:0 auto;background:white;overflow:hidden;box-shadow:0 0 24px #0002}
.desktop-layout{display:none}
.desktop-campaign-video{display:none}
.design-stage{position:relative;width:100%;aspect-ratio:667/7309}
.design{display:block;width:100%;height:100%;object-fit:fill}
.join-form{position:absolute;inset:0;pointer-events:none}
.join-form label,.join-form button{position:absolute;display:block;pointer-events:auto}
.field{left:19.65%;width:61.9%;height:.6032%;z-index:2}
.field.name{top:28.8668%}.field.residence{top:29.7622%;z-index:30}.field.phone{top:30.7141%}
.form-two .field{left:20.85%;width:61.8%}
.form-two .field.name{top:92.6953%}.form-two .field.residence{top:93.5813%}.form-two .field.phone{top:94.5427%}
.field span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.field input{width:100%;height:100%;border:0;border-radius:3px;background:#efefef;color:#073776;padding:0 4%;font:clamp(15px,4.2vw,21px)/1.15 Almoni,Arial,sans-serif;direction:rtl;text-align:right;outline:none}
.field input::placeholder{color:#737783;opacity:.82}
.field input:focus{background:#fff;box-shadow:0 0 0 2px #65b9dc}
.field.phone input{direction:ltr;text-align:right}
.city-dropdown{position:absolute;z-index:50;top:calc(100% + 4px);right:0;left:0;display:none;max-height:220px;margin:0;padding:4px;overflow-y:auto;list-style:none;border:1px solid #65b9dc;border-radius:7px;background:#fff;color:#073776;box-shadow:0 8px 20px #001b4b38;font:18px/1.2 Almoni,Arial,sans-serif;pointer-events:auto}
.city-dropdown.is-open{display:block}
.city-dropdown li{padding:8px 10px;border-radius:5px;cursor:pointer;text-align:right}
.city-dropdown li:hover,.city-dropdown li.is-active{background:#dff3fb}
.join-form button{left:18.5%;width:63.8%;height:1.197%;top:31.7132%;border:0;background:transparent;cursor:pointer}
.form-two button{top:95.4947%}
.tick{right:16%;width:70%;min-height:28px;height:auto;z-index:5;display:flex;align-items:flex-start;gap:10px;direction:rtl;background:#ededee;padding:2px 0;box-sizing:border-box}
.tick input{appearance:none;position:relative;flex:0 0 15px;width:15px;height:15px;margin:2px 0 0 8px;border:1.5px solid #65b9dc;border-radius:2px;background:#fff;cursor:pointer;box-sizing:border-box}
.tick input:checked{background:#65b9dc;border-color:#073776;box-shadow:inset 0 0 0 2px #fff}
.tick .tick-label{flex:1;min-width:0;margin:0;padding-inline-start:2px;color:#2a2a2a;font:clamp(12px,3.1vw,14px)/1.35 Almoni,Arial,sans-serif;direction:rtl;text-align:right;cursor:pointer}
.terms-link{color:#07316f;text-decoration:underline;text-underline-offset:2px;font-weight:700;cursor:pointer}
.terms-link:hover{color:#0a4a9e}
.terms-link:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.form-one .terms{top:33.22%}.form-one .updates{top:33.78%}
.form-two .tick{right:15.5%}
.form-two .terms{top:97.03%}.form-two .updates{top:97.58%}
.social-section{position:absolute;z-index:20;top:5.7495%;right:5.5%;left:5.5%;margin:0;padding:0;text-align:center}
.social-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin:0}
.social-button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:42px;padding:6px 7px;border-radius:999px;color:#fff;text-decoration:none;font:700 clamp(14px,3.8vw,17px) Almoni,Arial,sans-serif;white-space:nowrap;transition:transform .15s ease,filter .15s ease;box-shadow:0 3px 0 #0002}
.social-button:hover{transform:translateY(-2px);filter:brightness(1.06)}
.social-button:focus-visible{outline:3px solid #fff;outline-offset:4px}
.social-button svg{width:21px;height:21px;flex:0 0 auto;fill:#fff;color:#fff}
.whatsapp{background:#20aa5a}
.instagram{background:var(--burgundy)}
.campaign-video{position:absolute;z-index:15;top:7.3882%;right:5.5%;left:5.5%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#000;box-shadow:0 5px 18px #001b4b4d}
.campaign-video iframe{display:block;width:100%;height:100%;border:0}
.sticky-whatsapp{position:fixed;z-index:900;top:max(18px,calc(env(safe-area-inset-top) + 12px));left:max(18px,calc((100vw - var(--page-width))/2 + 18px));display:flex;width:58px;height:58px;align-items:center;justify-content:center;border-radius:50%;background:#20aa5a;color:#fff;text-decoration:none;box-shadow:0 6px 22px #0005;opacity:0;visibility:hidden;transform:translateY(-16px) scale(.85);pointer-events:none;transition:opacity .2s ease,visibility .2s,transform .2s ease,filter .15s}
.sticky-whatsapp.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto}
.sticky-whatsapp:hover{filter:brightness(1.06)}
.sticky-whatsapp:focus-visible{outline:3px solid #fff;outline-offset:3px}
.sticky-whatsapp svg{width:32px;height:32px;fill:currentColor}
@media(min-width:700px){body{padding:24px 0}.landing{box-shadow:0 8px 35px #0003}}
@media(max-width:340px){.field input{font-size:14px}.social-section{right:4%;left:4%}.social-links{gap:7px}.social-button{font-size:13px;padding-inline:5px}.social-button svg{width:19px;height:19px}.sticky-whatsapp{left:14px;width:54px;height:54px}.sticky-whatsapp svg{width:29px;height:29px}}
.join-form[aria-busy="true"]{cursor:wait}
.join-form button:disabled{cursor:wait;pointer-events:none}
.form-toast{position:fixed;z-index:1000;right:50%;bottom:max(18px,env(safe-area-inset-bottom));width:min(calc(100% - 32px),460px);padding:13px 18px;border-radius:10px;direction:rtl;text-align:center;color:#fff;font:700 19px Almoni,Arial,sans-serif;box-shadow:0 6px 24px #0004;opacity:0;visibility:hidden;transform:translate(50%,16px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.form-toast.is-visible{opacity:1;visibility:visible;transform:translate(50%,0)}
.form-toast.is-success{background:#08713d}
.form-toast.is-error{background:#87002d}
.form-success-state[hidden]{display:none}
.form-success-state{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:32px 16px 64px;overflow-y:auto;background:#f4f6fb;color:#0f172a;font-family:"IBM Plex Sans",Arial,sans-serif;direction:rtl}
.form-success-card{width:100%;max-width:640px;padding:40px 36px;border-radius:16px;background:#fff;box-shadow:0 8px 32px rgba(0,0,0,.1)}
.success-inner{display:flex;flex-direction:column;align-items:center;padding:48px 24px 56px;text-align:center}
.success-circle{width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:28px;background:linear-gradient(135deg,#003366 0%,#1a5db8 100%);box-shadow:0 8px 32px rgba(0,51,102,.25);animation:success-pop .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes success-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.success-check{width:44px;height:44px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw-check .4s .3s ease forwards}
@keyframes draw-check{to{stroke-dashoffset:0}}
.success-title{margin:0 0 10px;color:#003366;font-size:1.8rem;font-weight:700;line-height:1.2}
.success-title:focus{outline:none}
.success-divider{width:48px;height:3px;margin:0 auto 18px;border-radius:2px;background:linear-gradient(90deg,#003366,#3b82f6)}
.success-message{max-width:340px;margin:0;color:#475569;font-size:1rem;line-height:1.7}
.flag-emoji{display:inline-block;width:auto;height:1.05em;margin-inline-start:.1em;vertical-align:-.18em}
@media(max-width:600px){.form-success-state{align-items:stretch;padding:0}.form-success-card{width:100%;max-width:none;height:100%;padding:28px 20px max(64px,calc(48px + env(safe-area-inset-bottom)));overflow-y:auto;border-radius:0;box-shadow:none}}
@media(min-width:850px){
  body{padding:0;background:#fff}
  .landing{width:970px;max-width:100%;box-shadow:none;overflow:visible}
  .mobile-only{display:none!important}
  .desktop-layout{display:flex;direction:ltr;align-items:stretch;width:970px;max-width:100%;margin:auto}
  .desktop-sidebar{width:335px;flex:0 0 335px;min-height:100%;background-color:#fff;background-image:linear-gradient(45deg,#ededed 25%,transparent 25%),linear-gradient(-45deg,#ededed 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ededed 75%),linear-gradient(-45deg,transparent 75%,#ededed 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
  .desktop-content{position:relative;width:635px;flex:0 0 635px}
  .desktop-content>img{display:block;width:635px;height:auto}
  .desktop-campaign-video{position:absolute;z-index:2;top:417px;right:48px;left:48px;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#000}
  .desktop-campaign-video iframe{display:block;width:100%;height:100%;border:0}
  .sticky-panel{position:sticky;top:24px;width:280px;margin:24px auto}
  .desktop-card{position:relative;width:250px;height:430px;margin:auto}
  .desktop-card>img{display:block;width:250px;height:430px}
  .desktop-join-form{position:absolute;inset:0;pointer-events:none}
  .desktop-field,.desktop-join-form button{position:absolute;display:block;pointer-events:auto}
  .desktop-tick{position:absolute;pointer-events:auto}
  .desktop-field{left:10%;width:86%;height:7%;z-index:2}
  .desktop-name{top:42.5%}.desktop-residence{top:50%;z-index:30}.desktop-phone{top:57.5%}
  .desktop-field span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .desktop-field input{position:relative;z-index:1;width:100%;height:100%;border:0;background:transparent;color:#073776;padding:0 8px;font:18px Almoni,Arial,sans-serif;text-align:right;outline:none}
  .desktop-field input:focus{background:#fff9;box-shadow:0 0 0 2px #65b9dc;border-radius:3px}
  .desktop-residence:before{content:"";position:absolute;z-index:0;top:2px;right:2px;bottom:2px;width:92px;background:#efefef}
  .desktop-residence input::placeholder{color:#67b9dc;opacity:1}
  .desktop-phone input{direction:ltr;text-align:right}
  .desktop-field .city-dropdown{max-height:220px;font-size:17px}
  .desktop-join-form button{left:10%;top:69%;width:86%;height:9.5%;border:0;background:transparent;cursor:pointer}
  .desktop-tick{right:7%;width:86%;height:auto;min-height:0;z-index:5;display:flex;align-items:flex-start;gap:10px;direction:rtl;background:#eeeeef;padding:1px 0;box-sizing:border-box}
  .desktop-terms{top:80.5%}.desktop-updates{top:85.8%}
  .desktop-tick input{appearance:none;position:relative;flex:0 0 14px;width:14px;height:14px;margin:1px 0 0 8px;border:1.5px solid #65b9dc;border-radius:2px;background:#fff;cursor:pointer;box-sizing:border-box}
  .desktop-tick input:checked{background:#65b9dc;border-color:#073776;box-shadow:inset 0 0 0 2px #fff}
  .desktop-tick .tick-label{flex:1;min-width:0;margin:0;padding-inline-start:2px;color:#2a2a2a;font:10.5px/1.35 Almoni,Arial,sans-serif;direction:rtl;text-align:right;cursor:pointer}
  .desktop-social{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(280px,100%);margin:14px auto 0}
  .desktop-social a{display:flex;align-items:center;justify-content:center;gap:5px;height:40px;border-radius:999px;color:#fff;text-decoration:none;font:700 15px Almoni,Arial,sans-serif;white-space:nowrap;box-shadow:0 2px 0 #0002}
  .desktop-social a:first-child{background:#20aa5a}.desktop-social a:last-child{background:#87002d}
  .desktop-social svg{width:20px;height:20px;fill:#fff}
  .sticky-whatsapp{display:none}
}