.hero-layout { padding-top: 12px; padding-bottom: 42px; align-items:start; }
.home-lead { padding-top: 54px; }
.hero-visual { padding-top: 20px; }
.quran-explainer { display:grid; grid-template-columns:1fr 1fr; gap:20px 70px; border-top:1px solid var(--line); padding:58px 12px 48px; }
.explain-intro h2 { font-size:clamp(32px,3.4vw,46px); line-height:1.12; letter-spacing:-.045em; font-weight:500; margin:16px 0 20px; }
.explain-intro h2 em { color:#a46e35; font-style:normal; }
.explain-intro > p:last-child { color:var(--muted); max-width:440px; line-height:1.75; font-size:15px; }
.explain-points { display:grid; gap:22px; }
.explain-points > div { display:flex; gap:18px; }
.explain-points > div > span { color:#a18159; font-size:11px; padding-top:3px; }
.explain-points h3 { font-size:15px; margin:0 0 7px; }
.explain-points p { color:var(--muted); font-size:13px; line-height:1.65; margin:0; }
.explain-note { grid-column:1/-1; border-radius:12px; background:#f0e6d8; color:#665749; font-size:12px; line-height:1.6; padding:14px 18px; margin:8px 0 0; }
.explain-points > div > span { display:grid; place-items:center; flex:none; width:34px; height:34px; padding:0; border:1px solid #e2cfb2; border-radius:50%; background:#f8f0e5; transition:background .3s ease, transform .3s ease; }
.explain-points > div:hover > span { background:#ead6b8; transform:scale(1.1); }
.quran-explainer.is-visible .explain-intro { animation: proposal-rise .8s cubic-bezier(.2,.8,.2,1) both; }
.quran-explainer.is-visible .explain-points > div { animation: proposal-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.quran-explainer.is-visible .explain-points > div:nth-child(1) { animation-delay:.12s; }
.quran-explainer.is-visible .explain-points > div:nth-child(2) { animation-delay:.24s; }
.quran-explainer.is-visible .explain-points > div:nth-child(3) { animation-delay:.36s; }
.quran-explainer.is-visible .explain-note { animation: proposal-rise .7s .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes proposal-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.motion-paused .quran-explainer.is-visible .explain-intro, .motion-paused .quran-explainer.is-visible .explain-points > div, .motion-paused .quran-explainer.is-visible .explain-note { animation:none; }
@media (min-width:1450px) { .hero-layout { padding-top:12px; padding-bottom:42px; } }
@media(max-width:740px) { .hero-layout { padding:14px 4px 35px; } .home-lead { padding-top:12px; } .hero-visual { padding-top:24px; } .quran-explainer { grid-template-columns:1fr; gap:20px; padding:38px 4px; } .explain-note { grid-column:auto; } }

/* A looping visual demonstration, using the same floating-card language as the hero. */
.quran-explainer { align-items:center; gap:30px 60px; padding-top:65px; overflow:clip; }
.detection-visual { position:relative; isolation:isolate; min-width:0; padding:12px 14px 38px 8px; }
.detection-glow { position:absolute; z-index:-1; inset:-30px -10px; background:radial-gradient(ellipse,#e8cfaa77,transparent 70%); animation:halo-drift 12s ease-in-out infinite alternate; }
.detection-card { background:#fffaf4f2; border:1px solid #fff; border-radius:23px; padding:25px; box-shadow:0 30px 60px -25px #66503935; transform:rotate(2deg); animation:detection-float 8s ease-in-out infinite; }
.detection-input { position:relative; overflow:hidden; border:1px solid #ecdfcd; background:#f8f1e7; border-radius:13px; margin-top:25px; padding:18px; }
.detection-input p { font-family:'Noto Naskh Arabic','Traditional Arabic',serif; font-size:36px; line-height:1.7; margin:10px 0 0; text-align:center; color:var(--ink); }
.scan-light { position:absolute; top:0; bottom:0; width:35%; background:linear-gradient(90deg,transparent,#d6ab6330,transparent); border-right:1px solid #c3964e50; animation:scan-verse 9s ease-in-out infinite; pointer-events:none; }
.matching-path { display:flex; align-items:center; gap:8px; margin:0 0 0 24px; padding:18px 0 18px 20px; border-left:1px solid #d9c4a5; color:#88745f; font-size:10px; position:relative; }
.path-dot { position:absolute; left:-4px; top:0; width:7px; height:7px; border-radius:50%; background:#bb914f; box-shadow:0 0 0 4px #d6ab6312; animation:path-travel 9s ease-in-out infinite; }
.checking-dots { display:flex; gap:3px; }
.checking-dots i { width:3px; height:3px; border-radius:50%; background:#b58b4c; animation:checking 1.3s ease-in-out infinite; }
.checking-dots i:nth-child(2) { animation-delay:.2s; }.checking-dots i:nth-child(3) { animation-delay:.4s; }
.verse-match { display:flex; align-items:center; gap:13px; border:1px solid #dfc49a; background:#f4e9d8; border-radius:13px; padding:17px; animation:match-arrives 9s ease-in-out infinite; }
.verse-check { display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%; background:#253b5b; color:#f8e5c6; font-size:16px; animation:check-arrives 9s ease-in-out infinite; }
.verse-match strong { display:block; margin-top:6px; font-size:14px; font-weight:500; }.verse-match strong span { color:#9a733e; margin-left:7px; font-size:12px; }
.match-book { width:27px; height:27px; margin-left:auto; flex:none; color:#a4804b; }
.detection-translation { padding:20px 4px 16px; margin-top:4px; animation:translation-arrives 9s ease-in-out infinite; }
.detection-translation p { font-size:20px; font-weight:500; line-height:1.5; margin:12px 0 10px; color:var(--ink); }
.reference-tag { font-size:9px; color:#88745f; }
.detection-footer { display:flex; align-items:center; gap:5px; border-top:1px solid #ecdfcd; padding-top:16px; color:var(--muted); font-size:9px; }
.detection-badge { position:absolute; bottom:0; right:0; display:flex; gap:12px; align-items:center; padding:14px 19px; border-radius:14px; border:1px solid white; background:#fffaf4f2; box-shadow:0 14px 40px #453a3217; font-size:12px; font-weight:600; animation:badge-float 8s ease-in-out infinite; }
.detection-badge small { display:block; margin-top:4px; font-size:9px; font-weight:400; color:var(--muted); }
@keyframes detection-float { 0%,100% { transform:translateY(0) rotate(2deg); } 50% { transform:translateY(-8px) rotate(1deg); } }
@keyframes scan-verse { 0% { transform:translateX(-150%); opacity:0; } 5% { opacity:1; } 32% { transform:translateX(320%); opacity:1; } 37%,100% { transform:translateX(320%); opacity:0; } }
@keyframes path-travel { 0%,25% { transform:translateY(0); opacity:0; } 30% { opacity:1; } 43% { transform:translateY(44px); opacity:1; } 48%,100% { transform:translateY(44px); opacity:0; } }
@keyframes checking { 0%,100% { opacity:.25; } 50% { opacity:1; } }
@keyframes match-arrives { 0%,35% { opacity:.35; transform:translateY(5px); } 48%,90% { opacity:1; transform:translateY(0); } 100% { opacity:.35; transform:translateY(5px); } }
@keyframes check-arrives { 0%,35% { transform:scale(.75); opacity:.3; } 47% { transform:scale(1.12); opacity:1; } 53%,90% { transform:scale(1); opacity:1; } 100% { transform:scale(.75); opacity:.3; } }
@keyframes translation-arrives { 0%,48% { opacity:0; transform:translateY(8px); } 61%,90% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(8px); } }
.motion-paused .detection-translation, .motion-paused .verse-match, .motion-paused .verse-check { animation:none !important; opacity:1; transform:none; }
@media(max-width:740px) { .quran-explainer { gap:24px; padding-top:38px; }.detection-visual { padding:12px 12px 38px; }.detection-card { padding:20px; }.detection-input p { font-size:32px; } }
@media(prefers-reduced-motion:reduce) { .scan-light,.path-dot { display:none; }.detection-translation,.verse-match,.verse-check { opacity:1; transform:none; } }

.mobile-care-copy, .mobile-care-details { display:none; }
@media(max-width:740px) {
  #quran-care { scroll-margin-top:16px; padding:28px 0; gap:18px; }
  .quran-explainer .desktop-care-copy, .quran-explainer .panel-label, .quran-explainer .explain-note { display:none; }
  .quran-explainer .mobile-care-copy { display:block; }
  .explain-intro { padding:0 4px; }
  .explain-intro h2 { font-size:30px; line-height:1.12; margin:0 0 12px; letter-spacing:-.045em; }
  .explain-intro > p:last-child { font-size:13px; line-height:1.65; margin:0; max-width:330px; }
  .detection-visual { padding:8px 4px 6px; }
  .detection-card { padding:19px; border-radius:20px; }
  .detection-input { margin-top:18px; padding:12px 15px; }
  .detection-input p { font-size:32px; line-height:1.5; margin:5px 0 0; }
  .matching-path { padding-block:13px; font-size:9px; }
  .verse-match { padding:13px 12px; gap:10px; }
  .verse-match strong { font-size:13px; }
  .verse-match strong span { font-size:11px; }
  .match-book { width:22px; height:22px; }
  .detection-translation { padding:16px 2px 12px; }
  .detection-translation p { font-size:18px; margin:8px 0; }
  .detection-footer { padding-top:12px; }
  .detection-badge { display:none; }
  .mobile-care-details { display:block; margin:4px 4px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .mobile-care-details summary { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; font-size:12px; font-weight:500; color:var(--ink); }
  .mobile-care-details summary::-webkit-details-marker { display:none; }
  .mobile-care-details summary > span { color:#a46e35; font-size:21px; transition:transform .25s ease; }
  .mobile-care-details[open] summary > span { transform:rotate(45deg); }
  .mobile-care-details > div { font-size:12px; line-height:1.7; color:var(--muted); padding-bottom:12px; }
  .mobile-care-details p { margin:0 0 12px; }.mobile-care-details strong { color:var(--ink); }
  .mobile-care-details .care-detail-note { background:#f0e6d8; border-radius:10px; padding:12px; margin-bottom:0; }
}