/* Quran Italia 2.0 — platform layer */
:root { --platform-max: 1330px; --violet: #7067a8; --violet-soft: #efedfa; }
body { background: #f7f3ec; }
.site-header { z-index: 40; }
.platform-hero { padding: 42px clamp(20px, 6vw, 90px) 54px; background: linear-gradient(180deg, #fbf8f2, #f7f3ec); }
.hero-breadcrumb { max-width: var(--platform-max); margin: 0 auto 36px; display:flex; gap:10px; align-items:center; color:var(--muted); font-size:.68rem; letter-spacing:.13em; font-weight:800; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#7ea285; box-shadow:0 0 0 4px rgba(126,162,133,.14); }
.platform-hero-grid { max-width:var(--platform-max); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 360px; align-items:center; gap:70px; }
.platform-hero h1 { margin:10px 0 18px; color:var(--ink); font:600 clamp(3.3rem,6vw,6.2rem)/.93 "Fraunces",Georgia,serif; letter-spacing:-.07em; }
.platform-hero h1 em, .learning-intro h2 em { color:var(--accent-deep); font-style:normal; }
.platform-hero .hero-description { max-width:550px; margin:0 0 24px; font-size:.95rem; line-height:1.7; }
.hero-actions { display:flex; align-items:center; gap:22px; }.hero-actions .primary-button { text-decoration:none; }.hero-text-link { color:var(--ink); font-size:.76rem; font-weight:800; }.hero-text-link span { margin-left:5px; color:var(--accent); font-size:1rem; }
.live-stats { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:27px; color:var(--muted); font-size:.68rem; }.live-stats strong { color:var(--ink); font-size:.82rem; }
.hero-dashboard { position:relative; min-height:350px; }.hero-dashboard .hero-orbit { height:300px; }.hero-streak { width:205px; position:absolute; right:4px; bottom:12px; display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--line); border-radius:15px; background:rgba(255,253,248,.86); box-shadow:0 12px 30px rgba(30,42,35,.08); }.streak-flame { width:29px; height:29px; display:grid; place-items:center; border-radius:9px; color:#fff; background:var(--accent); font-size:1rem; }.hero-streak small,.hero-streak strong { display:block; }.hero-streak small { color:var(--muted); font-size:.52rem; font-weight:800; letter-spacing:.11em; }.hero-streak strong { margin-top:3px; font-size:.76rem; }.streak-arrow { margin-left:auto; color:var(--accent); }
.bot-bar { max-width:var(--platform-max); margin:-5px auto 0; position:relative; z-index:2; display:flex; align-items:center; gap:14px; padding:14px 17px; border:1px solid var(--line); border-radius:17px; background:var(--card); box-shadow:0 14px 34px rgba(40,45,35,.08); }.bot-avatar { width:35px; height:35px; display:grid; place-items:center; border-radius:11px; color:#fff; background:var(--sage-deep); }.bot-copy { min-width:170px; }.bot-copy strong,.bot-copy span { display:block; }.bot-copy strong { font-size:.75rem; }.bot-copy span { margin-top:2px; color:var(--muted); font-size:.61rem; }.bot-input-wrap { flex:1; display:flex; align-items:center; gap:9px; height:38px; padding:0 8px 0 12px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--muted); }.bot-input-wrap input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:.74rem; }.bot-input-wrap button { padding:7px 12px; border:0; border-radius:7px; color:#fff; background:var(--ink); font-size:.66rem; font-weight:800; }.bot-status { color:var(--sage-deep); font-size:.59rem; font-weight:800; }.bot-status::before { content:""; display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:#81a98a; }
.catalog-section { max-width:var(--platform-max); margin:0 auto; padding:78px 0 70px; }.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; }.section-heading h2 { margin:8px 0 0; font:500 2.1rem/1 "Fraunces",Georgia,serif; letter-spacing:-.045em; }.catalog-tools { display:flex; align-items:center; gap:9px; }.select-label { color:var(--muted); font-size:.61rem; font-weight:800; text-transform:uppercase; }.select-label select { margin-left:7px; padding:9px 25px 9px 10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--card); font-size:.68rem; text-transform:none; }
.catalog-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:22px; align-items:start; }.surah-drawer,.reader-panel { border:1px solid var(--line); border-radius:20px; background:rgba(255,253,248,.75); }.surah-drawer { overflow:hidden; position:sticky; top:100px; }.drawer-top { display:flex; justify-content:space-between; align-items:flex-start; padding:19px 17px 13px; }.drawer-top h3 { margin:6px 0 0; font:500 1.08rem "Fraunces",Georgia,serif; }.drawer-count { color:var(--muted); font-size:.65rem; }.drawer-search { display:flex; align-items:center; gap:8px; margin:0 12px 10px; padding:0 9px; height:34px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--paper); }.drawer-search input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:.68rem; }.chapter-list { max-height:540px; padding:0 8px 9px; overflow:auto; }.chapter-item { width:100%; display:grid; grid-template-columns:29px 1fr auto; gap:9px; align-items:center; padding:10px 8px; border:0; border-radius:10px; color:var(--ink); background:transparent; text-align:left; }.chapter-item:hover { background:var(--paper-deep); }.chapter-item.active { color:var(--accent-deep); background:#f8eae4; }.chapter-item-number { width:26px; height:26px; display:grid; place-items:center; border-radius:8px; color:var(--muted-dark); background:var(--paper-deep); font-size:.61rem; font-weight:800; }.chapter-item.active .chapter-item-number { color:#fff; background:var(--accent); }.chapter-item strong,.chapter-item small { display:block; }.chapter-item strong { font-size:.7rem; }.chapter-item small { margin-top:2px; color:var(--muted); font-size:.57rem; }.chapter-item-count { color:var(--muted); font-size:.59rem; }
.reader-panel { min-width:0; padding:25px 28px 33px; }.reader-top { display:flex; justify-content:space-between; gap:20px; padding-bottom:21px; border-bottom:1px solid var(--line); }.reader-top h2 { margin:8px 0 0; font:500 2.55rem/.98 "Fraunces",Georgia,serif; letter-spacing:-.055em; }.reader-arabic-title { margin:4px 0 0; color:var(--sage-deep); font:1.45rem "Noto Naskh Arabic",serif; }.reader-meta { margin-top:12px; color:var(--muted); font-size:.66rem; }.reader-number { width:56px; height:56px; display:grid; place-items:center; flex:none; border-radius:15px; color:#fff; background:var(--ink); font:500 1.5rem "Fraunces",Georgia,serif; }.reader-controls { display:flex; justify-content:space-between; gap:18px; padding:18px 0 17px; border-bottom:1px solid var(--line); }.control-pair { display:flex; gap:8px; }.control-pair label { color:var(--muted); font-size:.59rem; font-weight:800; text-transform:uppercase; }.control-pair select { display:block; max-width:200px; margin-top:5px; padding:8px 24px 8px 9px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--paper); font-size:.67rem; font-weight:600; }.reader-actions { display:flex; align-items:end; gap:7px; }.reader-actions .primary-button,.reader-actions .secondary-button { padding:10px 13px; }.verse-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:18px 0 4px; color:var(--muted); font-size:.64rem; }.small-action { border:0; padding:6px 8px; border-radius:7px; color:var(--muted); background:transparent; font-size:.61rem; font-weight:700; }.small-action.active { color:var(--ink); background:var(--paper-deep); }.reader-panel .verses { margin-top:5px; }.reader-panel .verse { padding:23px 0 28px; }.reader-panel .verse.active { padding-left:15px; margin-left:-15px; border-radius:10px; background:#fffaf5; box-shadow:0 10px 25px rgba(40,45,35,.04); }.reader-panel .verse::before { left:-5px; }.reader-panel .verse-translation { max-width:none; }
.learning-section { max-width:var(--platform-max); margin:0 auto; display:grid; grid-template-columns:minmax(0, .85fr) minmax(440px,1.15fr); gap:60px; align-items:center; padding:82px 0; border-top:1px solid var(--line); }.learning-intro h2 { margin:10px 0 15px; font:500 clamp(2.1rem,4vw,3.4rem)/1 "Fraunces",Georgia,serif; letter-spacing:-.06em; }.learning-intro > p { max-width:430px; color:var(--muted-dark); font-size:.82rem; line-height:1.7; }.learning-stats { display:flex; gap:28px; margin-top:25px; }.learning-stats strong,.learning-stats span { display:block; }.learning-stats strong { font:500 1.7rem "Fraunces",Georgia,serif; }.learning-stats span { margin-top:3px; color:var(--muted); font-size:.62rem; }.lesson-card { padding:24px; border-radius:21px; color:#f6f4ee; background:var(--sage-deep); box-shadow:0 20px 45px rgba(69,100,83,.2); }.lesson-card-top { display:flex; justify-content:space-between; gap:15px; }.lesson-kicker { color:#c5d8c5; font-size:.6rem; font-weight:800; letter-spacing:.12em; }.lesson-card h3 { margin:9px 0 0; font:500 1.7rem "Fraunces",Georgia,serif; }.lesson-badge { align-self:flex-start; padding:7px 9px; border-radius:7px; color:#493b1c; background:#f5c684; font-size:.61rem; font-weight:800; }.lesson-progress { height:4px; margin-top:25px; border-radius:99px; background:rgba(255,255,255,.2); }.lesson-progress span { display:block; width:33%; height:100%; border-radius:inherit; background:#f5c684; transition:.25s; }.lesson-progress-copy { display:flex; justify-content:space-between; margin-top:7px; color:#c5d8c5; font-size:.6rem; }.lesson-exercise { display:grid; grid-template-columns:35px 1fr; gap:9px; margin-top:22px; padding:14px; border-radius:13px; color:var(--ink); background:#fffdf8; }.exercise-icon { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; color:#fff; background:var(--accent); }.lesson-exercise strong,.lesson-exercise p { display:block; }.lesson-exercise strong { font-size:.72rem; }.lesson-exercise p { margin:4px 0 0; color:var(--muted); font-size:.64rem; }.quiz-options { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:4px; }.quiz-options button { padding:9px 6px; border:1px solid var(--line); border-radius:7px; color:var(--muted-dark); background:var(--paper); font-size:.59rem; }.quiz-options button:hover { border-color:var(--accent); color:var(--accent-deep); }.quiz-options button.correct { color:#fff; border-color:#4f9670; background:#4f9670; }.quiz-options button.wrong { color:#fff; border-color:#ba6251; background:#ba6251; }.lesson-continue { width:100%; display:flex; justify-content:space-between; margin-top:13px; padding:11px 0 0; border:0; border-top:1px solid rgba(255,255,255,.2); color:#f5c684; background:transparent; font-size:.67rem; font-weight:800; }.lesson-continue:disabled { color:#89a491; }
.library-strip { max-width:var(--platform-max); margin:0 auto; display:grid; grid-template-columns:1fr 1.2fr; gap:60px; padding:82px 0 120px; border-top:1px solid var(--line); }.library-strip h2 { margin:10px 0 0; font:500 2.6rem/.98 "Fraunces",Georgia,serif; letter-spacing:-.055em; }.reciter-showcase { display:flex; flex-direction:column; gap:8px; }.reciter-card { display:flex; align-items:center; gap:12px; padding:14px 15px; border:1px solid var(--line); border-radius:13px; background:rgba(255,253,248,.7); }.reciter-card.featured { border-color:#c9d7c9; background:#eef4ee; }.reciter-play { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--accent); font-size:.52rem; }.reciter-card strong,.reciter-card small { display:block; }.reciter-card strong { font-size:.71rem; }.reciter-card small { margin-top:3px; color:var(--muted); font-size:.59rem; }.reciter-wave { margin-left:auto; color:var(--sage-deep); font-size:1.5rem; }.reciter-card > span:last-child { margin-left:auto; color:var(--accent); }
.audio-dock { width:min(1160px,calc(100% - 40px)); min-height:73px; position:fixed; z-index:45; left:50%; bottom:17px; transform:translateX(-50%); display:grid; grid-template-columns:1.15fr 1.5fr 1fr; align-items:center; gap:20px; padding:11px 17px; border-radius:17px; color:#eef5ed; background:rgba(30,42,35,.97); box-shadow:0 18px 45px rgba(30,42,35,.3); }.audio-dock.closed { opacity:0; pointer-events:none; transform:translate(-50%,22px); }.audio-now { display:flex; align-items:center; gap:10px; min-width:0; }.audio-art { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(245,198,132,.45); border-radius:9px; color:#f5c684; font:500 .82rem "Fraunces",Georgia,serif; }.audio-now span,.audio-now strong { display:block; }.audio-now span { color:#a6baaa; font-size:.55rem; font-weight:800; letter-spacing:.11em; }.audio-now strong { overflow:hidden; margin-top:3px; text-overflow:ellipsis; white-space:nowrap; font-size:.69rem; }.audio-center { display:grid; grid-template-columns:25px 35px 25px 1fr auto; align-items:center; gap:8px; }.audio-center > button,.audio-actions button { border:0; color:#a6baaa; background:transparent; }.audio-center > button:hover,.audio-actions button:hover { color:#fff; }.audio-main { width:35px; height:35px; display:grid; place-items:center; border-radius:50%; color:var(--ink)!important; background:#f5eee2!important; font-size:.64rem; }.audio-seek { height:3px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.18); }.audio-seek span { display:block; width:0; height:100%; background:#f5c684; }.audio-time { color:#a6baaa; font-size:.57rem; white-space:nowrap; }.audio-actions { display:flex; justify-content:flex-end; gap:13px; }.bot-modal { width:min(620px,100%); max-height:80vh; overflow:auto; position:relative; padding:31px; border-radius:23px; background:var(--card); box-shadow:0 28px 80px rgba(27,35,28,.3); }.bot-modal h2 { margin:11px 0 7px; font:500 2.45rem/.96 "Fraunces",Georgia,serif; letter-spacing:-.06em; }.bot-modal-intro { margin:0 0 19px; color:var(--muted); font-size:.78rem; }.bot-result { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); }.bot-result-number { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:#fff; background:var(--accent); font-size:.65rem; }.bot-result strong,.bot-result small { display:block; }.bot-result strong { font-size:.74rem; }.bot-result small { margin-top:3px; color:var(--muted); font-size:.62rem; }.bot-result button { margin-left:auto; padding:7px 10px; border:0; border-radius:7px; color:#fff; background:var(--ink); font-size:.6rem; font-weight:800; }
@media (max-width:1120px) { .platform-hero-grid { gap:20px; }.catalog-section,.learning-section,.library-strip,.bot-bar { margin-left:30px; margin-right:30px; }.learning-section { grid-template-columns:1fr 1fr; gap:30px; }.library-strip { gap:30px; } }
@media (max-width:760px) { .top-nav,.language-switcher,.header-cta { display:none; }.mobile-menu-toggle { display:grid; }.mobile-nav:not([hidden]) { display:grid; }.platform-hero { padding:31px 20px 45px; }.platform-hero-grid { display:block; }.platform-hero h1 { font-size:clamp(3.1rem,15vw,5rem); }.hero-dashboard { min-height:250px; margin-top:15px; }.hero-dashboard .hero-orbit { transform:scale(.75); transform-origin:center; }.hero-streak { right:0; bottom:0; }.bot-bar { margin:0 20px; flex-wrap:wrap; }.bot-copy { flex:1; min-width:0; }.bot-input-wrap { flex-basis:100%; order:4; }.catalog-section,.learning-section,.library-strip { margin-left:20px; margin-right:20px; padding-top:55px; }.section-heading { display:block; }.catalog-tools { margin-top:17px; justify-content:space-between; }.catalog-layout { display:block; }.surah-drawer { position:static; margin-bottom:17px; }.chapter-list { max-height:270px; }.reader-panel { padding:20px 17px 27px; }.reader-top h2 { font-size:2rem; }.reader-controls { display:block; }.control-pair { display:grid; grid-template-columns:1fr 1fr; }.control-pair select { max-width:none; width:100%; }.reader-actions { margin-top:12px; }.reader-actions .secondary-button,.reader-actions .primary-button { flex:1; }.learning-section,.library-strip { display:block; }.learning-intro { margin-bottom:28px; }.library-strip h2 { font-size:2.2rem; margin-bottom:25px; }.audio-dock { width:calc(100% - 20px); grid-template-columns:1fr auto; gap:10px; bottom:10px; }.audio-now { grid-column:1/-1; }.audio-center { grid-template-columns:24px 33px 24px 1fr; }.audio-time { display:none; }.audio-actions { display:none; }.site-footer { padding-bottom:100px; } }
@media (max-width:430px) { .hero-actions { align-items:stretch; flex-direction:column; gap:12px; }.hero-actions .primary-button { width:max-content; }.live-stats { gap:8px; }.quiz-options { grid-template-columns:1fr; }.reader-top { gap:8px; }.reader-number { width:45px; height:45px; font-size:1.1rem; } }