/* Responsive breakpoints for Hafezy Quran */
@media(max-width:1120px){
  .primary-nav{gap:10px}
  .primary-nav>a{font-size:12px}
  .site-header{padding-inline:22px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .hero,.section{padding-inline:7vw}
  .gallery-preview{grid-template-columns:1fr;gap:30px}
}

@media(max-width:900px){
  :root{--header-h:68px}
  .site-header{min-height:68px}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;border:1px solid var(--line);border-radius:10px;
    background:transparent;padding:10px;cursor:pointer;min-width:44px;min-height:44px;flex-shrink:0;z-index:51}
  .menu-toggle span{display:block;width:19px;height:2px;background:var(--heading);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Animated slide-down menu */
  .primary-nav{display:flex;position:absolute;top:100%;left:0;right:0;width:100%;background:var(--surface);border-bottom:1px solid var(--line);
    padding:10px 20px 20px;flex-direction:column;align-items:stretch;gap:0;box-shadow:0 20px 40px rgba(11,41,34,.16);
    max-height:min(80vh,calc(100dvh - 68px));overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:49;
    opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
    transition:opacity .3s ease,transform .35s var(--ease),visibility .3s}
  .primary-nav.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .primary-nav>a{display:block;padding:14px 8px;font-size:15px;border-bottom:1px solid var(--line);
    opacity:0;transform:translateX(-12px);transition:opacity .35s ease,transform .4s var(--ease),color .2s}
  .primary-nav.is-open>a{opacity:1;transform:none}
  .primary-nav.is-open>a:nth-child(2){transition-delay:.04s}.primary-nav.is-open>a:nth-child(3){transition-delay:.08s}
  .primary-nav.is-open>a:nth-child(4){transition-delay:.12s}.primary-nav.is-open>a:nth-child(5){transition-delay:.16s}
  .primary-nav.is-open>a:nth-child(6){transition-delay:.2s}.primary-nav.is-open>a:nth-child(7){transition-delay:.24s}
  .primary-nav.is-open>a:nth-child(8){transition-delay:.28s}
  .primary-nav>a:after{display:none}
  .primary-nav>a[aria-current="page"]{color:var(--gold-ink);border-bottom-color:var(--gold)}
  .primary-nav>a:last-of-type{border-bottom:none}
  .header-tools{gap:8px;margin:14px 0 4px;padding-top:12px;border-top:1px solid var(--line)}
  .header-tools .utility-button{min-height:44px;padding:10px 16px}

  .hero{grid-template-columns:1fr .8fr;gap:25px;min-height:540px}
  .intro-grid,.split-panel{gap:35px}
  .feature-detail-grid{grid-template-columns:repeat(2,1fr)}
  .download-layout{grid-template-columns:1fr 1.15fr}
  .footer-main{gap:25px}
  .gallery-item img{height:320px}
  .dev-card{grid-template-columns:1fr}
  .dev-avatar{width:76px;height:76px;font-size:30px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .button,.utility-button{min-height:44px}
  .feature-grid,.contact-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px){
  .brand strong{font-size:18px}
  .hero{grid-template-columns:1fr;padding:56px 24px 52px;min-height:auto;gap:34px}
  .hero-art{min-height:250px;order:-1}
  .hero-app-logo{width:min(70vw,260px)}
  .hero-rosette{width:115%}
  .section{padding:54px 22px}
  .intro-grid,.split-panel,.download-layout,.prose-layout:has(.fact-card){grid-template-columns:1fr}
  .intro-grid{gap:8px}
  .section h2,.panel-copy h2{font-size:32px}
  .feature-grid,.feature-detail-grid,.contact-grid{grid-template-columns:1fr}
  .feature-card{padding:24px}
  .split-panel{gap:28px}
  .quote-card{padding:48px 20px}
  .faq-teaser{align-items:flex-start;flex-direction:column}
  .faq-teaser h2{font-size:30px}
  .page-hero{padding:56px 22px 52px;min-height:0}
  .note-panel{margin:0 22px 48px;padding:24px}
  .download-card,.instruction-card,.contact-card{padding:25px}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .gallery-item{padding:6px;border-radius:14px}
  .gallery-item img{height:240px}
  .lightbox{padding:55px 10px 20px;gap:5px}
  .lightbox img{max-width:75vw;max-height:75vh}
  .lightbox-nav{width:36px;height:36px;flex-shrink:0}
  .footer-main{grid-template-columns:1fr 1fr;gap:30px 18px}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{gap:6px}
  .footer-links{grid-template-columns:1fr}
  .changelog{align-items:flex-start}
  .hero .actions .button{flex:1}
  .faq-list details{padding-inline:16px}
  .faq-list summary{font-size:14px}
  .prose-layout article h2,.prose h2{font-size:24px}
  .contact-form-card{padding:22px 16px;border-radius:18px}
  .to-top{right:14px;bottom:14px}
}

@media(max-width:600px){
  .site-header{padding:10px 16px}
  .brand small{display:none}
  .hero h1,.page-hero h1{font-size:clamp(34px,10vw,44px)}
  .dev-actions{flex-direction:column}
  .dev-actions .button{width:100%}
  .footer-main{grid-template-columns:1fr;gap:28px}
}

@media(max-width:370px){
  .gallery-grid{grid-template-columns:1fr}
  .gallery-item img{height:300px}
  .footer-brand{grid-column:auto}
}