@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plate Arial Narrow';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/plate-arial-narrow-subset.woff2') format('woff2');
  unicode-range:U+0020,U+0030-0039,U+0041-005A;
}
@font-face{
  font-family:'Plate Arial Narrow';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/plate-arial-narrow-bold-subset.woff2') format('woff2');
  unicode-range:U+0020,U+0030-0039,U+0041-005A;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

body{
  margin:0;
  padding:0;
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  overflow-x:hidden;
}

/* ===== HERO SECTION ===== */
.hero{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:linear-gradient(180deg, #9c9c9c 0 50%, #2f2f30 50% 100%);
  --mobile-two-grid-width: calc((13.78cqw * 2) + 0.24rem);
}
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero::before{
  background:url('../background-img-dubai-number-plate-value.jpg') center/cover no-repeat;
  z-index:0;
}
.hero::after{
  background:rgba(70,70,70,0.34);
  z-index:1;
}

.hero-img-layer{
  position:absolute;
  aspect-ratio:16/9;
  min-width:100%;
  min-height:100%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  pointer-events:none;
  container-type:size;
  transition:transform 0.18s ease;
}
.hero-bg-layer{
  position:absolute;
  inset:0;
  z-index:0;
  display:none;
  pointer-events:none;
  background:
    linear-gradient(rgba(70,70,70,0.34), rgba(70,70,70,0.34)),
    url('../background-img-dubai-number-plate-value.jpg') center/cover no-repeat;
}
.hero-img-layer > *{
  pointer-events:auto;
}

.hero-copy{
  position:absolute;
  inset:0;
  z-index:10;
  perspective:1400px;
  transform-style:preserve-3d;
}
.hero-copy h1,
.hero-copy h2{
  left:38.4%;
  max-width:38%;
  text-align:left;
  transform-origin:center center;
  backface-visibility:hidden;
}

.hero-copy h1{
  position:absolute;
  top:20%;
  font-family:'Inter',sans-serif;
  font-size:2.01cqw;
  font-weight:900;
  -webkit-text-stroke:0.022cqw currentColor;
  color:#fff;
  white-space:nowrap;
  line-height:1.02;
  transform:perspective(1400px) rotateX(18deg) scaleY(0.94);
}

.hero-copy h2{
  position:absolute;
  top:28.9%;
  font-family:'Inter',sans-serif;
  font-size:0.97cqw;
  font-weight:400;
  color:rgba(255,255,255,0.7);
  line-height:1.24;
  transform:perspective(1400px) rotateX(14deg) scaleY(0.96);
}

@supports not (font-size:1cqw){
  .hero-copy h1{
    font-size:2.68rem;
    -webkit-text-stroke:0.5px currentColor;
  }
  .hero-copy h2{
    font-size:1.29rem;
  }
}

.emirate-grid{
  position:absolute;
  left:4.8%;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:0;
  z-index:10;
  max-height:92vh;
  padding:0;
  border-radius:0;
  background:none;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
}
.emirate-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:0;
  background:transparent;
  border:none;
  cursor:pointer;
  transition:transform 0.15s, opacity 0.2s;
  opacity:1;
  gap:0;
}
.emirate-card + .emirate-card{
  margin-top:-5.6vh;
}
.emirate-card:hover{
  transform:scale(1.05);
  opacity:1;
}
.emirate-card.selected{
  opacity:1;
  transform:scale(1.3);
}
.emirate-card img{
  display:block;
  width:16.7cqw;
  max-height:none;
  object-fit:contain;
}
.emirate-mobile-picker{
  display:none;
}

.plate-clone{
  position:fixed;
  z-index:20;
  pointer-events:none;
  object-fit:contain;
  filter:drop-shadow(0 0 0px transparent);
  transform:rotate(0deg) scale(1);
  transition:
    top 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    left 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.8s ease;
}
.plate-clone.flying{
  filter:drop-shadow(0 8px 25px rgba(255,255,255,0.4));
  transform:rotate(-3deg) scale(1.05);
}
.plate-clone.landing{
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3));
  transform:rotate(0deg) scale(1);
}
.plate-landed{
  position:absolute;
  z-index:1;
  object-fit:contain;
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:land-bounce 0.4s ease-out;
}
.plate-landed-static{
  position:absolute;
  z-index:1;
  object-fit:contain;
  pointer-events:none;
  transform:translate(-50%,-50%);
}
@keyframes land-bounce{
  0%{transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 4px 15px rgba(255,255,255,0.3))}
  50%{transform:translate(-50%,-50%) scale(0.96)}
  75%{transform:translate(-50%,-50%) scale(1.02)}
  100%{transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 0 0 transparent)}
}

.plate-code-wrapper{
  position:absolute;
  z-index:10;
  background:transparent;
  border:none;
  padding:0;
  display:none;
}
.plate-code-wrapper.visible{display:block}
.plate-code-wrapper.pos-dubai{
  top:60.98%;
  left:40.86%;
}
.plate-code-wrapper.pos-dubai .plate-code{
  font-size:3.36cqw;
}
.plate-code-wrapper.pos-abudhabi .plate-code{
  font-size:2.48cqw;
}
.plate-code-wrapper.pos-rest .plate-code{
  font-size:3.36cqw;
}
.plate-code-wrapper.pos-abudhabi{
  top:60.84%;
  left:41.105%;
}
.plate-code-wrapper.pos-rest{
  top:60.98%;
  left:41.06%;
}

.plate-number-wrapper{
  position:absolute;
  z-index:10;
  top:61.03%;
  left:50%;
  background:transparent;
  border:none;
  padding:0;
  display:none;
}
.plate-number-wrapper.visible{display:block}

.plate-bg-overlay{
  position:absolute;
  inset:0;
  z-index:40;
  pointer-events:none;
}
.plate-field-bg{
  position:absolute;
  display:none;
  background:#fff;
  transform:translate(-50%,-50%) scale(1.2);
  transform-origin:center center;
}
.plate-field-bg.visible{display:block}
.plate-code-bg.pos-dubai{
  top:calc(61.48% + 1.42cqw);
  left:calc(42.06% + 1.05cqw);
  width:3.7473975%;
  height:3.04164cqw;
}
.plate-code-bg.pos-abudhabi{
  top:calc(61.54% + 0.92cqw);
  left:calc(42.105% + 0.58cqw);
  width:1.87369875%;
  height:1.97064cqw;
}
.plate-code-bg.pos-rest{
  top:calc(61.48% + 1.42cqw);
  left:calc(42.06% + 1.05cqw);
  width:3.7473975%;
  height:3.04164cqw;
}
.plate-code-bg.size-narrow{
  width:2.5482303%;
}
.plate-number-bg{
  top:64.2%;
  left:54.5%;
  width:7.847cqw;
  height:3.195cqw;
}

.plate-input-overlay{
  position:absolute;
  inset:0;
  z-index:50;
  pointer-events:none;
}
.plate-input-overlay > *{
  pointer-events:auto;
}

.plate-visual-layer{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.plate-input{
  position:relative;
  z-index:1;
  background:transparent;
  border:none;
  outline:none;
  font-family:'Plate Arial Narrow','Arial Narrow','Roboto Condensed','Helvetica Neue Condensed','Arial',sans-serif;
  font-weight:700;
  color:#111;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:0.05em;
  padding:0;
  line-height:1;
  height:1.03em;
  min-height:0;
  vertical-align:middle;
}
.plate-code{
  width:3ch;
  font-size:1.55cqw;
  font-weight:400;
  transform:scale(1.08, 1.2);
  transform-origin:center center;
}
.plate-number{
  width:6ch;
  font-size:3.36cqw;
  letter-spacing:0.006561em;
  font-weight:400;
  transform:scale(1.2);
  transform-origin:center center;
}
.plate-input::placeholder{
  color:rgba(17,17,17,0.32);
  font-weight:400;
}
.plate-input.placeholder-hidden::placeholder{
  color:transparent;
}
.plate-input:focus{
  background:transparent;
}

@supports not (font-size:1cqw){
  .plate-input{
    padding:6px 4px;
  }
  .plate-code{
    font-size:clamp(20px, 2.8vw, 28px);
  }
  .plate-number{
    font-size:clamp(35px, 5.9vw, 55px);
  }
}

.btn-estimate{
  position:absolute;
  top:71%;
  left:50.2%;
  transform:translateX(-50%);
  width:19.764cqw;
  min-height:4.6cqw;
  padding:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.43rem;
  font-weight:700;
  letter-spacing:0.04em;
  line-height:1;
  white-space:nowrap;
  border:none;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(135,24,24,0.96) 0%, rgba(92,14,14,0.96) 100%);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.72);
  box-shadow:0 10px 24px rgba(45,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
  color:#fff;
  cursor:pointer;
  display:none;
  z-index:10;
  text-shadow:0 1px 0 rgba(0,0,0,0.22);
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-estimate.visible{
  display:flex;
}
.btn-estimate.is-loading{
  color:rgba(255,255,255,0.62);
  cursor:default;
}
.btn-estimate:hover{
  background:linear-gradient(180deg, rgba(150,28,28,0.98) 0%, rgba(105,18,18,0.98) 100%);
  box-shadow:0 14px 28px rgba(45,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.26);
  transform:translateX(-50%) translateY(-1px);
}
.btn-estimate.is-loading:hover{
  background:linear-gradient(180deg, rgba(135,24,24,0.96) 0%, rgba(92,14,14,0.96) 100%);
  box-shadow:0 10px 24px rgba(45,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
  transform:translateX(-50%);
}

.result{
  position:absolute;
  top:0;
  left:50.2%;
  transform:translate(-50%, -50%);
  z-index:10;
  display:none;
  text-align:center;
  width:22.8cqw;
  min-width:320px;
  max-width:460px;
  padding:20px 20px 18px;
  background:#ececec;
  backdrop-filter:none;
  border-radius:24px;
  border:4px solid #55575b;
  box-shadow:0 14px 28px rgba(0,0,0,0.12);
  color:#17181b;
  overflow:hidden;
}
.result.active{display:block}
.result-close{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:999px;
  background:rgba(40,42,46,0.08);
  color:#33363a;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  transition:background 0.18s ease, transform 0.18s ease;
}
.result-close:hover{
  background:rgba(40,42,46,0.14);
  transform:scale(1.04);
}
.result-price{
  font-size:clamp(2rem, 3.1cqw, 2.9rem);
  font-weight:700;
  color:#101114;
  letter-spacing:-0.04em;
  margin-bottom:4px;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:0.28rem;
}
.result-currency{
  font-size:0.56em;
  color:#101114;
  margin-bottom:8px;
}
.result-badge{
  display:inline-block;
  font-size:0.72rem;
  padding:5px 12px;
  border-radius:20px;
  background:rgba(60,62,66,0.08);
  color:#1f2226;
  margin:2px 0 3px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:700;
}
.result-info{
  font-size:0.88rem;
  line-height:1.55;
  color:#4c4741;
  width:100%;
  max-width:none;
  margin:0;
}

.loading{position:absolute;bottom:18%;left:50%;transform:translateX(-50%);z-index:10;display:none;text-align:center}
.loading.active{display:block}
.spinner{
  width:28px;height:28px;margin:0 auto 8px;
  border:3px solid rgba(255,255,255,0.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:0.85rem;color:rgba(255,255,255,0.7)}

.error{position:absolute;bottom:15%;left:50%;transform:translateX(-50%);z-index:10;display:none;text-align:center;color:#ff6b6b;font-size:0.9rem}
.error.active{display:block}

.rate-limited{position:absolute;bottom:18%;left:50%;transform:translateX(-50%);z-index:10;display:none;text-align:center;padding:20px;background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);border-radius:8px;border:1px solid rgba(255,255,255,0.2);min-width:280px}
.rate-limited.active{display:block}
.rate-limit-title{font-size:1.1rem;margin-bottom:4px}
.rate-limit-copy{font-size:0.85rem;color:rgba(255,255,255,0.6)}

.remaining{position:absolute;top:77.2%;left:50.2%;transform:translateX(-50%);z-index:10;display:none;text-align:center;font-size:0.8rem;color:rgba(255,255,255,0.6)}

/* ===== SEO CONTENT ===== */
.seo-content{
  background:#f4f1eb;
  color:#17181b;
  padding:88px 24px 96px;
}
.seo-content a{
  color:inherit;
  text-decoration:none;
}
.seo-shell{
  max-width:1120px;
  margin:0 auto;
}
.seo-intro{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap:32px;
  align-items:start;
  margin-bottom:56px;
}
.seo-copy h2,
.seo-grid article h3,
.seo-faq h2,
.seo-faq-item h3{
  font-family:'Inter',sans-serif;
  letter-spacing:-0.03em;
  color:#111214;
}
.seo-copy h2{
  font-size:clamp(2rem, 4vw, 3.4rem);
  line-height:0.96;
  margin-bottom:18px;
}
.seo-copy p,
.seo-grid article p,
.seo-faq-lead p,
.seo-faq-item p{
  font-size:1.02rem;
  line-height:1.72;
  color:#403d38;
}
.seo-note{
  padding:22px 24px;
  border:1px solid rgba(31,31,34,0.12);
  background:linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(231,225,216,0.84) 100%);
  border-radius:22px;
  box-shadow:0 14px 30px rgba(30,23,15,0.08);
}
.seo-note strong{
  display:block;
  margin-bottom:10px;
  font-family:'Inter',sans-serif;
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#6a1515;
}
.seo-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
  margin-bottom:56px;
}
.seo-grid article,
.seo-faq-item{
  background:rgba(255,255,255,0.74);
  border:1px solid rgba(31,31,34,0.1);
  border-radius:22px;
  padding:24px;
  box-shadow:0 10px 26px rgba(30,23,15,0.06);
}
.seo-grid article h3{
  font-size:1.22rem;
  margin-bottom:12px;
}
.seo-faq{
  display:grid;
  grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap:24px;
}
.seo-faq h2{
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  line-height:1;
  margin-bottom:12px;
}
.seo-faq-list{
  display:grid;
  gap:16px;
}
.seo-faq-item h3{
  font-size:1.05rem;
  margin-bottom:10px;
}

/* ===== MOBILE ===== */
@media(max-width:1180px){
  .emirate-grid{
    display:none;
  }
  .emirate-mobile-picker{
    position:absolute;
    left:50%;
    top:80.2%;
    transform:translateX(-50%);
    z-index:11;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.18rem;
    width:max-content;
    max-width:94vw;
  }
  .emirate-mobile-selected{
    display:none;
  }
  .emirate-mobile-grid{
    line-height:0;
    display:grid;
    grid-template-columns:repeat(3, max-content);
    column-gap:0.12rem;
    row-gap:0.28rem;
    justify-content:center;
  }
  .emirate-mobile-card{
    display:block;
    padding:0;
    margin:0;
    border:none;
    background:transparent;
    line-height:0;
    cursor:pointer;
    appearance:none;
  }
  .emirate-mobile-card img{
    display:block;
    width:12.72cqw;
    height:auto;
    max-height:none;
    object-fit:contain;
  }
}

@media(max-width:768px){
  .emirate-mobile-picker{
    top:80.6%;
    gap:0.14rem;
  }
  .emirate-mobile-grid{
    column-gap:0.1rem;
    row-gap:0.06rem;
  }
  .btn-estimate{
    width:19.764cqw;
    max-width:none;
    top:72%;
    bottom:auto;
    left:50.2%;
    padding:22px 16px;
    font-size:1.18rem;
  }
  .loading, .rate-limited{
    bottom:12%;
    min-width:240px;
    max-width:90%;
  }
  .result{
    top:0;
    left:50.2%;
    bottom:auto;
    width:30cqw;
    min-width:260px;
    max-width:86vw;
    padding:16px 16px 14px;
  }
  .remaining{
    top:76.2%;
  }
}

@media(max-width:480px){
  .hero::before,
  .hero::after{
    display:none;
  }
  .hero-img-layer{
    transform:translate(-50%,-56%) scale(0.88);
  }
  .hero-bg-layer{
    display:block;
  }
  .emirate-mobile-picker{
    top:84.2%;
    gap:0.24rem;
  }
  .emirate-mobile-grid{
    grid-template-columns:repeat(2, max-content);
    column-gap:0.24rem;
    row-gap:0.4rem;
  }
  .emirate-mobile-card img{
    width:13.78cqw;
  }
  .btn-estimate{
    width:var(--mobile-two-grid-width);
    max-width:none;
    top:72.2%;
    left:50.2%;
    bottom:auto;
    padding:16px 16px;
    font-size:1.14rem;
  }
  .result{
    top:0;
    left:50.2%;
    bottom:auto;
    width:var(--mobile-two-grid-width);
    min-width:0;
    max-width:none;
    padding:14px 14px 12px;
  }
  .remaining{
    top:80.6%;
  }
  .result-close{
    top:8px;
    right:8px;
    width:30px;
    height:30px;
  }
  .seo-content{
    padding:72px 18px 80px;
  }
  .seo-intro,
  .seo-grid,
  .seo-faq{
    grid-template-columns:1fr;
  }
}

/* Landscape mobile — keep same layout as portrait */
@media(max-height:500px) and (orientation:landscape){
  .hero-img-layer{
    transform:translate(-50%,-56%) scale(0.88);
  }
  .hero-bg-layer{
    display:block;
  }
  .hero::before,
  .hero::after{
    display:none;
  }
  .emirate-grid{
    display:none;
  }
  .emirate-mobile-picker{
    position:absolute;
    left:50%;
    top:84.2%;
    transform:translateX(-50%);
    z-index:11;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.24rem;
    width:max-content;
    max-width:94vw;
  }
  .emirate-mobile-selected{
    display:none;
  }
  .emirate-mobile-grid{
    line-height:0;
    display:grid;
    grid-template-columns:repeat(3, max-content);
    column-gap:0.12rem;
    row-gap:0.28rem;
    justify-content:center;
  }
  .emirate-mobile-card{
    display:block;
    padding:0;
    margin:0;
    border:none;
    background:transparent;
    line-height:0;
    cursor:pointer;
    appearance:none;
  }
  .emirate-mobile-card img{
    display:block;
    width:12.72cqw;
    height:auto;
    max-height:none;
    object-fit:contain;
  }
  .btn-estimate{
    width:var(--mobile-two-grid-width);
    max-width:none;
    top:72.2%;
    left:50.2%;
    bottom:auto;
    padding:16px 16px;
    font-size:1.14rem;
  }
  .remaining{
    top:80.6%;
  }
  .result{
    top:0;
    left:50.2%;
    bottom:auto;
    width:var(--mobile-two-grid-width);
    min-width:0;
    max-width:none;
    padding:14px 14px 12px;
  }
}