/* Hostinger Responsive + Font UI — Inspired by https://www.hostinger.com/in
    Font: DM Sans (Hostinger Host Grotesk clone) — 400/500/600/700 + Inter fallback
    Size: fluid clamp() — Hostinger scale, 8px spacing, 1280px container
    Breakpoints: 320 / 360 / 480 / 640 / 768 / 1024 / 1280 — mobile-first, fully responsive
    Theme: Ecomers Luna — Tailwind CDN + WooCommerce
*/
/* SR-ONLY global fallback - must be first to hide labels */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.text-white{color:#fff!important}
.text-white\/75{color:rgba(255,255,255,.75)!important}
.text-white\/55{color:rgba(255,255,255,.55)!important}
.bg-white\/10{background:rgba(255,255,255,.1)!important}
.bg-white\/12{background:rgba(255,255,255,.12)!important}
.border-white\/20{border-color:rgba(255,255,255,.2)!important}

/* ===== 1. HOSTINGER TOKENS & FONT SYSTEM - COMPACT (font chota + kam jagah) ===== */
:root{
  --hostinger-font:'DM Sans', Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --hostinger-font-display:'DM Sans', Inter, system-ui, -apple-system, sans-serif;
  --hostinger-purple:#673DE6;
  --hostinger-purple-dark:#4a2bb3;
  --hostinger-purple-light:#f0edff;
  --hostinger-dark:#12121F;
  --hostinger-muted:#5B5B6B;
  --hostinger-border:#E5E7EB;
  --hostinger-border-light:#F1F5F9;
  --hostinger-radius-sm:8px;
  --hostinger-radius-md:12px;
  --hostinger-radius-lg:16px;
  --hostinger-radius-xl:20px;
  --hostinger-radius-full:999px;
  --hostinger-shadow-sm:0 1px 8px rgba(18,18,31,.04);
  --hostinger-shadow-md:0 4px 24px rgba(18,18,31,.06);
  --hostinger-shadow-lg:0 12px 32px rgba(18,18,31,.08);
  --hostinger-shadow-purple:0 8px 24px rgba(103,61,230,.15);
  /* Fluid type — Compact & Professional */
  --fs-xs:clamp(10px,1.3vw,11.5px);
  --fs-sm:clamp(11.5px,1.4vw,12.5px);
  --fs-base:clamp(12.5px,1.6vw,14px);
  --fs-md:clamp(13.5px,1.6vw,14.5px);
  --fs-lg:clamp(17px,2.2vw,21px);
  --fs-xl:clamp(19px,2.7vw,25px);
  --fs-2xl:clamp(21px,3vw,30px);
  --fs-hero:clamp(24px,3.8vw,38px);
  --sp-2:6px; --sp-4:12px; --sp-6:18px; --sp-8:24px; --sp-10:32px; --sp-12:40px;
  --container-max:1280px;
  --container-pad:20px;
}
html,body{font-family:var(--hostinger-font)!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-variant-ligatures:common-ligatures;font-feature-settings:'ss01' 1}
h1,h2,h3,h4,h5,h6,.font-display,.font-extrabold,.font-bold{font-family:var(--hostinger-font-display)!important;letter-spacing:-0.03em}
h1{letter-spacing:-0.04em!important;font-weight:800!important;line-height:1.02!important}
h2{letter-spacing:-0.03em!important;font-weight:700!important;line-height:1.1!important}
h3{letter-spacing:-0.02em!important;font-weight:700!important;line-height:1.2!important}
body{font-size:var(--fs-md)!important;line-height:1.58!important;color:var(--hostinger-muted)!important;letter-spacing:-0.011em!important}
p{font-family:var(--hostinger-font)!important;color:var(--hostinger-muted);line-height:1.65}
small{font-size:var(--fs-xs)!important;letter-spacing:.02em}
.lead{font-size:clamp(15px,2vw,18px)!important;line-height:1.6!important}

/* ===== 2. FLUID TYPE SCALE — Compact ===== */
html{font-size:15px}
@media(max-width:380px){html{font-size:14.5px}}
@media(max-width:480px){html{font-size:15px}}
@media(min-width:1536px){html{font-size:15.5px}}
h1,.hero-title{font-size:var(--fs-hero)!important;line-height:1.02!important}
h2{font-size:var(--fs-2xl)!important}
h3{font-size:var(--fs-lg)!important}
h4{font-size:clamp(14px,2vw,18px)!important}
@media(max-width:380px){
  h1,.hero-title{font-size:clamp(22px,7vw,26px)!important}
  h2{font-size:clamp(18px,6vw,22px)!important}
  h3{font-size:clamp(15px,5vw,18px)!important}
}
@media(max-width:480px){
  body{font-size:14px!important;line-height:1.58!important}
  h1,.hero-title{letter-spacing:-0.02em!important}
  h2{letter-spacing:-0.015em!important}
  p{font-size:13.5px!important;line-height:1.62!important}
}

/* ===== 3. CONTAINER — Hostinger 1280 max + responsive padding ===== */
.max-w-\[1280px\]{max-width:1280px!important;margin-left:auto!important;margin-right:auto!important;padding-left:var(--container-pad)!important;padding-right:var(--container-pad)!important}
.max-w-\[1100px\]{max-width:1100px!important;margin-left:auto!important;margin-right:auto!important;padding-left:var(--container-pad)!important;padding-right:var(--container-pad)!important}
.max-w-\[860px\]{max-width:860px!important;margin-left:auto!important;margin-right:auto!important;padding-left:var(--container-pad)!important;padding-right:var(--container-pad)!important}
.max-w-\[720px\]{max-width:720px!important;margin-left:auto!important;margin-right:auto!important;padding-left:var(--container-pad)!important;padding-right:var(--container-pad)!important}
.container{max-width:1280px!important;margin-inline:auto!important;padding-inline:var(--container-pad)!important}
@media(min-width:640px){.max-w-\[1280px\],.max-w-\[1100px\],.max-w-\[860px\],.max-w-\[720px\],.container{padding-left:20px!important;padding-right:20px!important}}
@media(min-width:1024px){.max-w-\[1280px\],.max-w-\[1100px\],.max-w-\[860px\],.max-w-\[720px\],.container{padding-left:24px!important;padding-right:24px!important}}
@media(max-width:768px){.max-w-\[1280px\],.max-w-\[1100px\],.max-w-\[860px\],.max-w-\[720px\],.container{padding-left:16px!important;padding-right:16px!important}}
@media(max-width:480px){.max-w-\[1280px\],.max-w-\[1100px\],.max-w-\[860px\],.max-w-\[720px\],.container{padding-left:12px!important;padding-right:12px!important}}
@media(max-width:360px){.max-w-\[1280px\],.max-w-\[1100px\],.max-w-\[860px\],.max-w-\[720px\],.container{padding-left:10px!important;padding-right:10px!important}}

/* ===== 4. HEADER — Hostinger sticky, responsive height ===== */
.luna-header, header.sticky{backdrop-filter:blur(8px)}
header.sticky{position:sticky!important;top:0!important;z-index:50!important}
@media(max-width:1023px){
  header .hidden.lg\:flex{display:none!important}
  #luna-menu-toggle{display:flex!important}
}
@media(min-width:1024px){
  #luna-mobile-nav{display:none!important}
}
@media(max-width:640px){
  header .h-\[64px\]{height:64px!important;min-height:64px!important}
  header .max-w-\[1280px\]{gap:12px!important;padding-left:12px!important;padding-right:12px!important}
  header .text-\[18px\]{font-size:16px!important}
  header.sticky{overflow:visible!important}
  header .w-9.h-9{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
}
@media(max-width:380px){
  header .h-\[64px\]{height:60px!important;min-height:60px!important}
  header .w-8.h-8{width:32px!important;height:32px!important;font-size:12px!important}
  header .w-9.h-9{width:36px!important;height:36px!important}
}

/* Header nav links — Hostinger 14px medium */
.luna-nav a, nav a{font-family:var(--hostinger-font)!important;font-size:14px!important}
@media(max-width:480px){
  #luna-mobile-nav a{font-size:14px!important;padding:10px 0!important;min-height:44px!important;display:flex!important;align-items:center!important}
}

/* ===== 5. HERO — MOBILE BADA (14-15px) ===== */
@media(max-width:640px){
  section[style*="radial-gradient"]{padding-top:22px!important;padding-bottom:22px!important}
  section h1{margin-top:10px!important;font-size:var(--fs-hero)!important;line-height:1.08!important}
  section p{font-size:15px!important;line-height:1.6!important;padding-left:4px!important;padding-right:4px!important}
  /* Hero search - single line, no wrap */
  section[style*="radial-gradient"] form[role="search"]{flex-wrap:nowrap!important;gap:6px!important;padding:5px!important;max-width:100%!important}
  section[style*="radial-gradient"] form[role="search"] input{font-size:15px!important;min-height:40px!important;min-width:0!important;flex:1 1 auto!important}
  section[style*="radial-gradient"] form[role="search"] button{width:auto!important;min-width:80px!important;height:40px!important;font-size:14px!important;padding:0 18px!important;flex:0 0 auto!important}
  /* keep explore buttons */
  section[style*="radial-gradient"] .mt-3.flex{flex-direction:column!important;gap:10px!important}
  section[style*="radial-gradient"] .mt-3.flex a{font-size:15px!important;height:44px!important}
}
@media(max-width:360px){
  section[style*="radial-gradient"] form[role="search"] input{font-size:14px!important}
  section[style*="radial-gradient"] form[role="search"] button{font-size:13px!important;padding:0 14px!important;min-width:72px!important}
}
@media(min-width:641px) and (max-width:1023px){
  h1{font-size:clamp(26px,4vw,36px)!important}
}
@media(min-width:1024px){
  section .max-w-\[640px\]{max-width:640px!important}
  section .max-w-\[760px\]{max-width:640px!important}
}
/* Hero badge — Hostinger pill */
.hero-badge{font-family:var(--hostinger-font)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.06em!important;border-radius:var(--hostinger-radius-full)!important;padding:6px 12px!important}

/* ===== 6. GRID — Hostinger 1-2-3-4 ===== */
.grid{ gap:16px }
@media(max-width:480px){.grid{gap:12px}}
@media(min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.lg\:grid-cols-6{grid-template-columns:repeat(6,1fr)}.lg\:grid-cols-2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .grid-cols-2{grid-template-columns:1fr}
  .grid-cols-1.sm\:grid-cols-2{grid-template-columns:1fr}
}
/* Shop product grid — 4 Columns on Laptops & Desktops */
ul.products, .woocommerce ul.products, body.woocommerce ul.products{gap:16px!important}
@media(max-width:439px){
  ul.products, .woocommerce ul.products, body.woocommerce ul.products{grid-template-columns:1fr!important;gap:12px!important}
}
@media(min-width:440px) and (max-width:679px){
  ul.products, .woocommerce ul.products, body.woocommerce ul.products{grid-template-columns:repeat(2,1fr)!important;gap:14px!important}
}
@media(min-width:680px) and (max-width:859px){
  ul.products, .woocommerce ul.products, body.woocommerce ul.products{grid-template-columns:repeat(3,1fr)!important;gap:16px!important}
}
@media(min-width:860px){
  ul.products, .woocommerce ul.products, body.woocommerce ul.products{grid-template-columns:repeat(4,1fr)!important;gap:18px!important}
}
@media(min-width:1180px){
  ul.products, .woocommerce ul.products, body.woocommerce ul.products{grid-template-columns:repeat(4,1fr)!important;gap:22px!important}
}
.woocommerce div.product .product_title{font-size:clamp(18px,2.6vw,26px)!important;line-height:1.25!important;font-family:var(--hostinger-font-display)!important}
.woocommerce div.product p.price{font-size:clamp(18px,2vw,22px)!important;font-family:var(--hostinger-font)!important}

/* ===== 7. CARDS — Hostinger rounded, responsive padding ===== */
.project-card,.service-card,.testimonial-card{border-radius:var(--hostinger-radius-lg)!important;transition:transform .2s,box-shadow .2s!important}
.project-card:hover{transform:translateY(-4px);box-shadow:var(--hostinger-shadow-lg)!important}
@media(max-width:480px){
  .project-card,.service-card,.testimonial-card{border-radius:12px!important}
  .service-card{padding:16px 12px!important}
  .testimonial-card{padding:14px!important}
  .p-4{padding:12px!important}
  .p-6{padding:16px!important}
  article{border-radius:12px!important}
}
@media(min-width:768px){
  .project-card{border-radius:20px!important}
}
/* Product cards — hostinger border + shadow */
article.bg-white{border-radius:16px!important;box-shadow:var(--hostinger-shadow-sm)!important;border:1px solid var(--hostinger-border)!important;transition:transform .2s,box-shadow .2s,border-color .2s!important}
article.bg-white:hover{transform:translateY(-2px)!important;box-shadow:var(--hostinger-shadow-md)!important;border-color:#E8E6FF!important}
@media(max-width:640px){
  article .p-4{padding:12px!important}
  article h3{font-size:13px!important;line-height:1.35!important}
  article .text-xs{font-size:11px!important}
}

/* ===== 8. PRICING — Hostinger 1 col mobile 2 col desktop ===== */
.wt-pricing__cards{gap:16px!important}
@media(max-width:899px){
  .wt-pricing__cards{grid-template-columns:1fr!important;max-width:420px!important;margin-inline:auto!important}
  .wt-card{padding:16px!important}
  .wt-card__current{font-size:28px!important}
}
@media(max-width:380px){
  .wt-card{padding:14px!important;border-radius:16px!important}
  .wt-card__current{font-size:24px!important}
  .wt-pricing__title{font-size:22px!important}
}
@media(min-width:900px){
  .wt-card{padding:20px!important}
}

/* ===== 9. BUTTONS — COMPACT chota (36-40px) ===== */
.btn-primary,.btn-peach,.btn-secondary,.wt-card__cta,a[class*="rounded-full"]{
  font-family:var(--hostinger-font-display)!important;
  letter-spacing:-0.01em!important;
  font-weight:700!important;
}
.btn-primary,.btn-peach{
  font-size:clamp(12px,1.4vw,13px)!important;
  padding:clamp(7px,1.2vw,9px) clamp(14px,1.8vw,18px)!important;
  border-radius:var(--hostinger-radius-full)!important;
  background:var(--hostinger-purple)!important;
  box-shadow:var(--hostinger-shadow-purple)!important;
  min-height:36px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
}
.btn-primary:hover,.btn-peach:hover{background:var(--hostinger-purple-dark)!important;transform:translateY(-1px)!important}
.btn-secondary{border-radius:var(--hostinger-radius-full)!important;min-height:36px!important}
@media(max-width:640px){
  .btn-primary,.btn-peach{width:100%!important;justify-content:center!important;min-height:44px!important}
  a.bg-white.text-\[\#673DE6\]{width:100%;justify-content:center}
  .flex.gap-3{flex-direction:column}
  .flex.gap-3 a{width:100%;justify-content:center}
}
@media(min-width:641px){
  .btn-primary,.btn-peach{min-height:40px!important}
}

/* View more buttons — hostinger style */
a[class*="hover:bg-"].rounded-full{border-radius:var(--hostinger-radius-full)!important;font-family:var(--hostinger-font)!important;font-weight:600!important;min-height:40px!important}
@media(max-width:480px){
  a.rounded-full{font-size:12.5px!important;padding:8px 16px!important;min-height:36px!important}
}

/* ===== 10. TRUST / FAQ — MOBILE BADA ===== */
@media(max-width:640px){
  .wt-trust{grid-template-columns:1fr!important;gap:10px!important}
  .wt-trust li{font-size:13px!important}
  .wt-trust li strong{font-size:13px!important}
  .wt-trust li span{font-size:12px!important}
  #faq-list .faq-item button{padding:16px!important;font-size:15px!important}
  #faq-list .faq-answer{padding:0 16px 16px!important;font-size:14px!important}
  .faq-item button{font-size:14px!important;padding:14px 16px!important}
  .faq-answer{font-size:14px!important;line-height:1.65!important}
}
.faq-item{border-radius:12px!important;border:1px solid var(--hostinger-border)!important;transition:border-color .15s,box-shadow .15s!important}
.faq-item.is-open{border-color:var(--hostinger-purple)!important;box-shadow:0 4px 16px rgba(103,61,230,.08)!important}
.faq-item button{font-family:var(--hostinger-font)!important;font-weight:600!important;color:var(--hostinger-dark)!important}
.faq-item button:hover{color:var(--hostinger-purple)!important}
.faq-answer{font-family:var(--hostinger-font)!important;line-height:1.7!important;color:var(--hostinger-muted)!important}

/* ===== 11. FOOTER — MOBILE BADA ===== */
footer .grid{gap:24px!important}
@media(max-width:640px){
  footer .grid{grid-template-columns:1fr 1fr!important;gap:20px 16px!important}
  footer .grid > div:first-child{grid-column:1/-1!important}
  footer .flex.gap-2{flex-wrap:wrap!important}
  footer .text-xs{font-size:12.5px!important}
  footer a{font-size:14px!important}
  footer p{font-size:14px!important}
}
@media(max-width:380px){
  footer .grid{grid-template-columns:1fr!important}
  footer .flex.gap-2 span{font-size:10px!important;padding:7px 10px!important}
}
footer a{font-family:var(--hostinger-font)!important}
footer .font-semibold{font-family:var(--hostinger-font-display)!important;letter-spacing:-0.01em!important}

/* ===== 12. SLIDER — Hostinger touch swipe ===== */
.slider-track{ gap:16px!important }
@media(max-width:640px){
  .slider-track{gap:12px!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch!important}
  .slider-card{scroll-snap-align:start!important}
  .slider-arrow{display:none!important}
}
@media(max-width:480px){
  .slider-card{flex:0 0 90%!important;min-width:90%!important}
}
#custom-slider-track{gap:16px!important}
@media(max-width:640px){
  #custom-slider-track{gap:12px!important}
}
/* Force 3 per view on big device & laptop - pakka 3 dikhe */
#custom-slider-track > div{flex:0 0 85%!important;max-width:85%!important}
@media(min-width:640px){
  #custom-slider-track > div{flex:0 0 calc((100% - 16px)/2)!important;max-width:calc((100% - 16px)/2)!important}
}
@media(min-width:1024px){
  #custom-slider-track > div{flex:0 0 calc((100% - 32px)/3)!important;max-width:calc((100% - 32px)/3)!important}
}

/* ===== 13. SEARCH — Hostinger rounded ===== */
form[role="search"] input{font-family:var(--hostinger-font)!important}
form[role="search"] input::placeholder{color:#94a3b8!important}
form[role="search"] button{font-family:var(--hostinger-font)!important;font-weight:600!important}
@media(max-width:480px){
  form[role="search"] input{font-size:15px!important}
}

/* ===== 14. GENERAL RESPONSIVE HELPERS — Hostinger ===== */
.hidden.lg\:flex{display:none}
@media(min-width:1024px){.lg\:flex{display:flex!important}.lg\:hidden{display:none!important}.lg\:grid{display:grid!important}.lg\:px-6{padding-left:24px!important;padding-right:24px!important}}
.hidden{ display:none }
.block{ display:block }
.flex{ display:flex }
@media(max-width:640px){
  .text-center{ text-align:center!important }
  .px-4{ padding-left:12px!important; padding-right:12px!important }
}
@media(max-width:768px){
  .overflow-hidden{ overflow:hidden }
  body{ overflow-x:hidden!important; max-width:100vw!important }
  html{overflow-x:hidden!important}
}
img{max-width:100%!important;height:auto!important;display:block!important}
@media(max-width:640px){
  img{image-rendering:-webkit-optimize-contrast}
}

/* ===== 15. FONT SIZE UTILITIES — MOBILE BADA ===== */
.text-xs{font-size:12.5px!important;letter-spacing:.03em!important;font-family:var(--hostinger-font)!important}
.text-sm{font-size:14px!important;font-family:var(--hostinger-font)!important}
.text-\[12px\]{font-size:12.5px!important}
.text-\[13px\]{font-size:13.5px!important}
.text-\[14px\]{font-size:14.5px!important}
.text-\[15px\]{font-size:15px!important}
@media(max-width:480px){
  .text-xs{font-size:12.5px!important}
  .text-sm{font-size:13.5px!important}
  .text-\[12px\]{font-size:12.5px!important}
  .text-\[13px\]{font-size:13.5px!important}
  .text-\[14px\]{font-size:14.5px!important}
  .text-\[15px\]{font-size:15px!important}
  .text-\[16px\]{font-size:16px!important}
  .text-\[18px\]{font-size:17px!important}
}

/* ===== 16. ACCESSIBILITY — Hostinger touch targets 44px ===== */
@media(max-width:640px){
  a,button{min-height:20px}
  button#luna-menu-toggle{width:44px!important;height:44px!important}
  #header-search-toggle,#profile-menu-btn{width:44px!important;height:44px!important}
  input[type="search"],input[type="text"],input[type="email"]{font-size:16px!important} /* iOS zoom fix */
}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--hostinger-purple)!important;outline-offset:2px!important}
*{-webkit-tap-highlight-color:transparent}

/* ===== 17. TRUST / BADGE PILLS ===== */
.hero-badge,.inline-flex.bg-\[\#F3F5FF\],.bg-white.border{font-family:var(--hostinger-font)!important}
@media(max-width:480px){
  .hero-badge{font-size:11.5px!important;padding:6px 12px!important}
  .inline-flex{font-size:12.5px!important}
}

/* ===== 18. SECTION SPACING — COMPACT kam jagah ===== */
section{width:100%;box-sizing:border-box}
@media(max-width:768px){
  section{padding-top:24px!important;padding-bottom:24px!important}
  .py-14{padding-top:24px!important;padding-bottom:24px!important}
  .py-10{padding-top:20px!important;padding-bottom:20px!important}
  .py-12{padding-top:20px!important;padding-bottom:20px!important}
}
@media(max-width:480px){
  section{padding-top:18px!important;padding-bottom:18px!important}
  .py-14,.py-12,.py-10{padding-top:18px!important;padding-bottom:18px!important}
}

/* ===== 19. SCROLLING TRACK — hostinger partners auto-scroll ===== */
.scrolling-track{animation:scrolling 22s linear infinite}
.scrolling-track:hover{animation-play-state:paused}
@keyframes scrolling{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(max-width:640px){.scrolling-track{animation-duration:18s}}

/* ===== 20. PRINT ===== */
@media print{
  .luna-header, header.sticky, footer, .slider-arrow{display:none!important}
  body{font-size:12pt!important;line-height:1.5!important;color:#000!important;background:#fff!important}
}

/* ===== 21. REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}

/* ===== 22. BREADCRUMB ===== */
.woocommerce-breadcrumb{font-size:12.5px!important;font-family:var(--hostinger-font)!important}

/* ===== 23. HOSTINGER TYPOGRAPHY OVERRIDES — ensure DM Sans everywhere ===== */
.luna-logo{font-family:var(--hostinger-font-display)!important}
.luna-nav a{font-family:var(--hostinger-font)!important}
.btn-primary,.btn-peach,.btn-secondary{font-family:var(--hostinger-font)!important}
h1,h2,h3,h4,h5,h6{font-family:var(--hostinger-font-display)!important}