/* ============================================================ MAROBRAIN — MAIN STYLESHEET Variables defined in critical inline CSS in ============================================================ */ h2{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--navy);margin-bottom:18px;line-height:1.2;font-weight:800} h2.center{text-align:center} h2.white-h2{color:#fff;text-align:center;margin-bottom:30px} h3{font-family:'Inter',sans-serif;font-size:18px;color:var(--navy);margin-bottom:10px;font-weight:700} h4{font-family:'Inter',sans-serif;font-size:15px;font-weight:700;color:var(--navy);margin-bottom:14px;text-transform:uppercase;letter-spacing:.5px} p{margin-bottom:14px;color:var(--ink)} .section{padding:70px 0} .section-grey{background:#f5f3eb} .section-lead{font-size:17px;color:var(--muted);max-width:780px;margin:0 auto 32px;text-align:left;line-height:1.6} .section-lead.center{text-align:center} /* ----- Trust strip ----- */ .trust-strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0} .trust-row{display:flex;gap:36px;justify-content:center;flex-wrap:wrap;align-items:center} .trust-item{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--navy);font-size:14px} .trust-item strong{font-size:22px;color:var(--gold-dark)} /* ----- Two-column ----- */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .check-list{list-style:none;margin:20px 0} .check-list li{padding:10px 0 10px 32px;position:relative;font-size:15px;color:var(--ink)} .check-list li::before{content:"";position:absolute;left:0;top:14px;width:20px;height:20px;background:url("data:image/svg+xml;utf8,") no-repeat center/contain} /* ----- AI Answer blocks ----- */ .ai-answer{background:linear-gradient(135deg,#eef2ff 0%,#f3e9ff 100%);border-left:5px solid var(--purple);padding:22px 26px;border-radius:10px;margin:28px 0;max-width:880px;margin-left:auto;margin-right:auto} .ai-answer strong{display:block;color:var(--navy);font-size:17px;margin-bottom:10px;font-weight:800} .ai-answer p{margin:0;color:#2a2d4a;font-size:15.5px;line-height:1.6} .ai-answer.dark{background:rgba(255,255,255,.08);border-left-color:var(--gold);color:#fff} .ai-answer.dark strong{color:var(--gold)} .ai-answer.dark p{color:#e8e8f5} /* ----- Problem section ----- */ .problem-section{background:linear-gradient(135deg,var(--navy) 0%,var(--purple) 100%);color:#fff;padding:70px 0} .problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:32px} .pain-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);padding:24px;border-radius:14px;backdrop-filter:blur(4px)} .pain-num{font-family:'Playfair Display',serif;font-size:34px;color:var(--gold);font-weight:800;margin-bottom:8px} .pain-card h3{color:#fff;margin-bottom:10px;font-size:17px} .pain-card p{color:#d0d2e8;font-size:14px;margin:0;line-height:1.55} /* ----- Mechanism grid ----- */ .mechanism-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .mech-card{background:#fff;padding:26px;border-radius:14px;box-shadow:0 4px 16px rgba(26,31,92,.06);border:1px solid var(--line);position:relative} .mech-num{position:absolute;top:-14px;left:24px;background:var(--gold);color:var(--navy);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px} .mech-card h3{margin-top:6px} .mech-card p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.6} /* ----- Unique label ----- */ .unique-label{display:inline-block;background:var(--gold);color:var(--navy);padding:5px 14px;border-radius:6px;font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:12px} /* ----- Diagram ----- */ .diagram-wrap{background:#fff;padding:28px;border-radius:14px;box-shadow:0 4px 20px rgba(26,31,92,.08);overflow-x:auto;margin-top:20px} .diagram-wrap svg{width:100%;height:auto;min-width:700px} .diagram-caption{text-align:center;font-size:13px;color:var(--muted);margin-top:18px;font-style:italic} /* ----- Pricing ----- */ .section-pricing{background:linear-gradient(180deg,#f5f3eb 0%,#faf7f2 100%)} .pricing-grid{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:24px;align-items:stretch;margin-top:30px} .price-card{background:#fff;border:2px solid var(--line);border-radius:18px;padding:30px 26px;text-align:center;position:relative;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column} .price-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(26,31,92,.12)} .price-best{border-color:var(--gold);transform:scale(1.05);box-shadow:0 16px 40px rgba(212,160,23,.25);background:linear-gradient(180deg,#fffbf0 0%,#fff 70%)} .price-best:hover{transform:scale(1.05) translateY(-4px)} .ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--navy);padding:6px 18px;border-radius:20px;font-weight:800;font-size:12px;letter-spacing:.5px;white-space:nowrap} .ribbon-popular{background:var(--purple);color:#fff} .price-head{font-weight:800;font-size:22px;color:var(--navy);margin-top:8px} .price-sub{font-size:13px;color:var(--muted);margin-bottom:14px;text-transform:uppercase;letter-spacing:.4px} .price-card img{margin:0 auto 14px;object-fit:contain} .price-perbottle{margin-bottom:10px} .price-perbottle .big{font-family:'Playfair Display',serif;font-size:48px;font-weight:800;color:var(--navy)} .price-perbottle .small{font-size:14px;color:var(--muted);font-weight:500} .price-total{font-size:14px;color:var(--ink);margin-bottom:18px} .price-total strong{color:var(--navy);font-size:16px} .btn-block{width:100%;display:block;padding:14px} .price-guar{font-size:12px;color:var(--muted);margin-top:12px;margin-bottom:0} /* ----- Bonuses ----- */ .bonuses-title{margin-top:56px;font-size:24px} .bonus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:24px} .bonus-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center;transition:transform .15s} .bonus-card:hover{transform:translateY(-2px)} .bonus-card img{margin:0 auto 12px;width:100%;max-width:200px;object-fit:contain} .bonus-card h4{font-size:14px;color:var(--navy);margin-bottom:8px;text-transform:none;letter-spacing:0} .bonus-card p{font-size:13px;color:var(--muted);margin-bottom:10px;line-height:1.5} .bonus-val{display:inline-block;background:var(--gold);color:var(--navy);padding:4px 12px;border-radius:5px;font-weight:700;font-size:12px} /* ----- Ingredients ----- */ .ingredient-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px} .ing-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;transition:transform .15s,box-shadow .15s} .ing-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(26,31,92,.08)} .ing-icon{font-size:32px;margin-bottom:8px} .ing-tag{display:inline-block;background:#eef2ff;color:var(--purple);padding:3px 10px;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px} .ing-card h3{font-size:17px;margin-bottom:8px} .ing-card p{font-size:14px;color:var(--muted);margin:0;line-height:1.55} /* ----- Benefits ----- */ .benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px} .benefit-card{background:#fff;border-radius:12px;padding:22px;border:1px solid var(--line)} .benefit-card h3{font-size:16px;margin-bottom:8px} .benefit-card p{font-size:14px;color:var(--muted);margin:0;line-height:1.55} /* ----- Timeline ----- */ .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:32px;position:relative} .tl-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;position:relative} .tl-item::before{content:"";position:absolute;top:30px;left:-12px;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:12px solid var(--gold);display:none} .tl-item:not(:first-child)::before{display:block} .tl-phase{display:inline-block;background:linear-gradient(90deg,var(--gold),var(--gold-dark));color:#fff;padding:5px 14px;border-radius:20px;font-weight:700;font-size:12px;margin-bottom:12px;letter-spacing:.3px} .tl-item h3{font-size:16px;margin-bottom:8px} .tl-item p{font-size:14px;color:var(--muted);margin:0;line-height:1.55} /* ----- Comparison table ----- */ .compare-wrap{overflow-x:auto;margin-top:24px;background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(26,31,92,.06)} .compare-table{width:100%;border-collapse:collapse;min-width:680px} .compare-table th,.compare-table td{padding:16px 18px;text-align:center;border-bottom:1px solid var(--line);font-size:14.5px} .compare-table th{background:var(--navy);color:#fff;font-weight:700;text-align:center} .compare-table th.th-us{background:var(--gold);color:var(--navy)} .compare-table td:first-child{text-align:left;font-weight:600;color:var(--navy);background:#f5f3eb} .compare-table tr:last-child td{border-bottom:none} .compare-table .y{color:#0a8c4a;font-weight:700} /* ----- Reviews ----- */ .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px} .review-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column} .stars{color:var(--gold);font-size:17px;margin-bottom:12px;letter-spacing:1px} .review-card p{flex:1;font-size:14.5px;color:var(--ink);line-height:1.6;font-style:italic;margin-bottom:18px} .reviewer{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:14px} .reviewer img{width:48px;height:48px;border-radius:50%;object-fit:cover} .reviewer strong{display:block;font-size:14px;color:var(--navy)} .reviewer span{display:block;font-size:12px;color:var(--muted)} /* ----- Guarantee block ----- */ .guarantee-section{background:linear-gradient(135deg,#fffbf0 0%,#faf7f2 100%);padding:80px 0} .guar-grid{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:center} .guar-seal{width:240px;height:240px;border-radius:50%;background:conic-gradient(from 0deg,var(--gold) 0%,var(--gold-dark) 50%,var(--gold) 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 16px 40px rgba(212,160,23,.35);margin:0 auto} .seal-inner{width:200px;height:200px;background:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:4px solid var(--gold-dark)} .seal-top{font-family:'Playfair Display',serif;font-size:58px;font-weight:800;color:var(--navy);line-height:1} .seal-mid{font-size:18px;font-weight:800;color:var(--navy);letter-spacing:2px;margin:2px 0} .seal-bot{font-size:11px;font-weight:700;color:var(--gold-dark);letter-spacing:2px} /* ----- Contraindications ----- */ .contra-list{list-style:none;background:#fff;padding:26px 30px;border-radius:14px;border-left:5px solid #c73e3e;box-shadow:0 4px 16px rgba(0,0,0,.05)} .contra-list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.6} .contra-list li:last-child{border-bottom:none} .contra-note{margin-top:18px;font-size:14px;color:var(--muted);font-style:italic} /* ----- FAQ ----- */ .faq-list{max-width:880px;margin:30px auto 0} .faq-item{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden} .faq-q{width:100%;padding:18px 22px;background:none;border:none;text-align:left;font-size:16px;font-weight:600;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:inherit} .faq-q:hover{background:#f5f3eb} .faq-icon{font-size:22px;color:var(--gold-dark);font-weight:800} .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease} .faq-a p{padding:0 22px 18px;color:var(--muted);font-size:14.5px;line-height:1.6;margin:0} .faq-item.open .faq-a{max-height:400px} /* ----- Medical reviewer ----- */ .reviewer-card{display:grid;grid-template-columns:160px 1fr;gap:30px;background:#fff;padding:32px;border-radius:14px;border:1px solid var(--line);align-items:center;max-width:880px;margin:30px auto 0} .reviewer-avatar{width:140px;height:140px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--purple));color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:54px;font-weight:800} .reviewer-card h3{font-size:22px;margin-bottom:6px} .reviewer-role{color:var(--gold-dark);font-weight:700;font-size:14px;margin-bottom:14px;text-transform:uppercase;letter-spacing:.5px} .reviewer-card p{font-size:14.5px;color:var(--ink);line-height:1.6} .reviewer-disclaimer{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:10px} /* ----- References ----- */ .ref-list{padding-left:24px;max-width:880px;font-size:14.5px;color:var(--ink);line-height:1.7} .ref-list li{margin-bottom:10px} .ref-list em{color:var(--purple);font-style:italic} .ref-list a{color:var(--purple);font-weight:600;text-decoration:underline} /* ----- Final CTA ----- */ .final-cta{background:linear-gradient(135deg,var(--navy) 0%,var(--purple) 100%);color:#fff;padding:70px 0;text-align:center} .final-cta h2{color:#fff} .final-cta p{color:#e0e2f0;font-size:17px;max-width:640px;margin:0 auto 24px} .final-cta-img{margin:24px auto 28px;max-width:380px} .final-cta-img img{margin:0 auto;filter:drop-shadow(0 16px 32px rgba(0,0,0,.35));max-width:100%;height:auto} .cta-note{font-size:13px;color:#b6b8d6;margin-top:18px} /* ----- Footer ----- */ footer{background:#0f1340;color:#c0c2dc;padding:50px 0 24px} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px} .footer-logo{color:#fff;margin-bottom:14px} .footer-logo .logo-mark{background:var(--gold);color:var(--navy)} .foot-desc{font-size:14px;color:#9ea0bf;line-height:1.55} footer h4{color:#fff;margin-bottom:14px;font-size:13px} footer ul{list-style:none} footer ul li{padding:5px 0;font-size:14px} footer ul li a{color:#c0c2dc;transition:color .15s} footer ul li a:hover{color:var(--gold)} .foot-disclaimer{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;font-size:12.5px;color:#8a8cb0;line-height:1.55} .foot-disclaimer p{margin-bottom:10px;color:#8a8cb0} /* ----- Mobile sticky CTA bar ----- */ .mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;padding:10px 14px;box-shadow:0 -4px 16px rgba(0,0,0,.12);z-index:80;border-top:1px solid var(--line)} /* ----- Social proof popup ----- */ .sp-popup{position:fixed;bottom:80px;left:18px;background:#fff;border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 28px rgba(0,0,0,.18);max-width:320px;border:1px solid var(--line);transform:translateX(-380px);transition:transform .35s ease;z-index:85} .sp-popup.show{transform:translateX(0)} .sp-popup img{border-radius:6px;flex-shrink:0} .sp-body{font-size:13px;color:var(--ink);line-height:1.4} .sp-body strong{color:var(--navy);font-weight:700} .sp-body small{color:var(--muted);font-size:11px} .sp-close{position:absolute;top:6px;right:8px;background:none;border:none;font-size:18px;color:var(--muted);cursor:pointer;padding:0;line-height:1} /* ================ RESPONSIVE — 900px ================ */ @media(max-width:900px){ .container{padding:0 16px} .section{padding:50px 0} .two-col{grid-template-columns:1fr;gap:30px} .two-col img{max-width:380px;margin:0 auto} .problem-grid{grid-template-columns:repeat(2,1fr)} .mechanism-grid{grid-template-columns:1fr 1fr} .pricing-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto} .price-best{transform:scale(1)} .price-best:hover{transform:translateY(-4px)} .bonus-grid{grid-template-columns:1fr 1fr} .ingredient-grid{grid-template-columns:1fr 1fr} .benefit-grid{grid-template-columns:1fr 1fr} .timeline{grid-template-columns:1fr 1fr} .reviews-grid{grid-template-columns:1fr} .guar-grid{grid-template-columns:1fr;text-align:center} .reviewer-card{grid-template-columns:1fr;text-align:center} .reviewer-avatar{margin:0 auto} .footer-grid{grid-template-columns:1fr 1fr;gap:24px} .mobile-cta{display:block} body{padding-bottom:80px} .sp-popup{left:10px;right:10px;max-width:none} .sp-popup.show{transform:translateY(0)} .sp-popup{transform:translateY(200px)} .compare-table th,.compare-table td{padding:12px 10px;font-size:13.5px} } /* ================ RESPONSIVE — 560px ================ */ @media(max-width:560px){ .announce{font-size:12.5px;padding:8px 12px} .nav{padding:12px 0} .logo{font-size:18px} .logo-mark{width:32px;height:32px;font-size:18px} .hero{padding:24px 0 30px} .trust-row{gap:16px} .trust-item{font-size:12.5px} .trust-item strong{font-size:18px} .problem-grid{grid-template-columns:1fr} .mechanism-grid{grid-template-columns:1fr} .bonus-grid{grid-template-columns:1fr} .ingredient-grid{grid-template-columns:1fr} .benefit-grid{grid-template-columns:1fr} .timeline{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} h2{font-size:1.4rem} .section{padding:40px 0} .price-perbottle .big{font-size:42px} .seal-top{font-size:48px} .guar-seal{width:200px;height:200px} .seal-inner{width:170px;height:170px} }