/* ProstaFlow – usa--prostaflow.com
   Palette from the label: white bottle, aqua gradient band, teal male symbol, charcoal wordmark */
:root{
  --ink:#10242c;
  --ink-soft:#4a5f67;
  --plum:#128c93;        /* teal (label) */
  --plum-deep:#15303a;   /* charcoal-teal */
  --blush:#d9f1f1;
  --blush-soft:#f1fafa;
  --cream:#fbfdfd;
  --parchment:#e3f3f2;
  --gold:#f0a431;        /* warm accent, like light in an iris */
  --cta:#f0a431;
  --cta-hover:#dc8f16;
  --line:#d6e8e8;
  --ok:#1f8a5b;
  --radius-lg:22px;
  --radius-sm:12px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:"Source Sans 3","Segoe UI",Arial,sans-serif; font-size:18.5px; line-height:1.72; color:var(--ink); background:var(--cream);}
img{max-width:100%; height:auto; display:block;}
a{color:var(--plum); text-underline-offset:3px;}
h1,h2,h3,.logo,.price-card .qty,.price-card .per-num,.seal-text b{font-family:"Outfit","Segoe UI",Arial,sans-serif;}
h1,h2,h3{line-height:1.12; color:var(--plum-deep); font-weight:700; letter-spacing:-.02em;}
h2{font-size:clamp(2rem,3.8vw,2.9rem); margin:0 0 12px;}
h3{font-size:1.45rem; margin:0 0 8px;}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px;}

/* header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(251,247,240,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); padding:12px 6%; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.logo{font-weight:800; font-size:1.55rem; color:var(--plum); text-decoration:none; letter-spacing:-.01em; text-transform:uppercase; line-height:1;}
.logo span{display:block; font-family:"Source Sans 3",sans-serif; font-size:.6rem; letter-spacing:.3em; color:var(--plum-deep); margin-top:4px;}
.site-header nav{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.site-header nav a{color:var(--ink-soft); text-decoration:none; font-size:.98rem;}
.site-header nav a:hover{color:var(--plum);}

/* buttons */
.btn{display:inline-block; text-decoration:none; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--cta); color:#10242c!important; border-radius:999px; padding:16px 36px; font-size:1rem; box-shadow:0 10px 24px rgba(240,164,49,.35); transition:background .2s, transform .2s;}
.btn:hover{background:var(--cta-hover); transform:translateY(-2px);}
.btn.ghost{background:transparent; color:var(--plum)!important; border:1.5px solid var(--plum); box-shadow:none;}
.btn.ghost:hover{background:var(--plum); color:#fff!important;}
.btn.ghost{color:var(--plum-deep)!important; border-color:var(--plum-deep);}
.btn.small{padding:10px 22px; font-size:.85rem;}

/* hero – the moon */
.hero{position:relative; overflow:hidden; padding:70px 6% 80px; background:radial-gradient(ellipse at 80% 20%, var(--blush) 0%, transparent 55%), var(--cream);}
.hero-grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;}
.eyebrow{font-size:.82rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:0 0 12px;}
.hero h1{font-size:clamp(2.1rem,3.8vw,3.1rem); margin:0 0 14px; color:var(--plum-deep);}
.hero .tagline{font-family:"Outfit",sans-serif; font-weight:500; font-size:1.35rem; color:var(--plum); margin:0 0 18px; line-height:1.3;}
.hero .lead{color:var(--ink-soft); margin:0 0 20px; max-width:56ch;}
.hero-list{list-style:none; padding:0; margin:0 0 24px;}
.hero-list li{position:relative; padding-left:30px; margin-bottom:8px;}
.hero-list li::before{content:""; position:absolute; left:3px; top:.5em; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle, var(--plum-deep) 0 30%, var(--plum) 31% 100%);} /* tiny iris */
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.hero .from{font-size:.95rem; color:var(--ink-soft); margin-top:14px;}
.hero .from b{color:var(--plum); font-size:1.1rem;}
.moon{position:relative; display:flex; align-items:center; justify-content:center;}
.moon::before{content:""; position:absolute; width:min(100%,560px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 45%, #e9f7f7 0%, #c9ecec 45%, #9fd8d9 66%, rgba(18,140,147,.12) 70%, transparent 71%);}  /* sound ripples */
.moon img{position:relative; max-height:380px; width:auto; filter:drop-shadow(0 26px 30px rgba(12,52,64,.28));}

.answer{background:#fff; border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:var(--radius-sm); padding:16px 20px; margin:0 0 22px; font-size:1rem;}
.answer b.q{display:block; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:4px;}
.answer p{margin:0;}

.badges{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:26px 0 0;}
.badges li{border:1px solid var(--line); background:#fff; border-radius:999px; padding:5px 14px; font-size:.88rem; color:var(--ink-soft);}

/* sections */
.section{padding:84px 6%;}
.section.alt{background:var(--blush-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section.plum{background:var(--plum-deep); color:#f3e6e8;}
.section.plum h2,.section.plum h3{color:#fff;}
.inner{max-width:1140px; margin:0 auto;}
.narrow{max-width:780px; margin:0 auto;}
.sub{color:var(--ink-soft); max-width:64ch; margin:0 0 40px;}
.center{text-align:center;}
.center .sub{margin-left:auto; margin-right:auto;}
.byline{font-size:.88rem; color:var(--ink-soft); margin:0 0 16px;}

.facts{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; overflow:hidden;}
.facts div{padding:22px 20px; border-right:1px solid var(--line);}
.facts div:last-child{border-right:0;}
.facts strong{display:block; color:var(--plum); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;}

.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.pillar{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 28px;}
.pillar .num{font-family:"Outfit",sans-serif; font-size:3rem; color:var(--gold); line-height:1;}
.pillar p{margin:0; color:var(--ink-soft);}

.split{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center;}
.split.rev{grid-template-columns:1.1fr .9fr;}

.steps{counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:18px;}
.steps li{counter-increment:s; position:relative; padding-left:62px;}
.steps li::before{content:counter(s); position:absolute; left:0; top:0; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--plum); color:var(--plum); font-family:"Outfit",sans-serif; font-weight:700; font-size:1.4rem; display:flex; align-items:center; justify-content:center;}

.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:30px 34px;}
.benefit{border-top:1.5px solid var(--plum); padding-top:16px;}
.benefit p{margin:0; color:var(--ink-soft);}

.zero{display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; list-style:none; padding:0; margin:0;}
.zero li{padding-left:34px; position:relative;}
.zero li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700; font-size:1.2rem;}

/* ingredients */
.ing-group{margin-bottom:44px;}
.ing-group > h3{font-size:1.1rem; font-family:"Source Sans 3",sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 16px;}
.ing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.ing{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:22px;}
.ing h4{font-family:"Outfit",sans-serif; font-size:1.35rem; color:var(--plum-deep); margin:0 0 6px;}
.ing p{margin:0; font-size:.98rem; color:var(--ink-soft);}
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; background:#fff; font-size:.98rem;}
th,td{padding:13px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}
th{background:var(--plum-deep); color:#fff; font-weight:500; letter-spacing:.04em;}
.yes{color:var(--ok); font-weight:600;}
.no{color:#a13a3a; font-weight:600;}
.note{font-size:.9rem; color:var(--ink-soft); margin-top:18px;}

/* reviews */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.review{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px;}
.review header{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.review img{width:64px; height:64px; border-radius:50%; object-fit:cover;}
.review .name{font-weight:600; margin:0; line-height:1.2;}
.review .meta{font-size:.82rem; color:var(--ink-soft); margin:0;}
.review .stars{color:var(--gold); letter-spacing:3px;}
.review h3{font-size:1.35rem; margin:6px 0 8px;}
.review p{margin:0; font-size:.98rem; color:var(--ink-soft);}
.feature-photo{border-radius:var(--radius-lg); margin-bottom:34px; box-shadow:0 18px 40px rgba(67,19,31,.12);}

/* bonuses */
.bonus-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
.bonus{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; text-align:center; display:flex; flex-direction:column;}
.bonus img{margin:4px auto 12px; height:190px; width:auto; filter:drop-shadow(0 10px 14px rgba(67,19,31,.18));}
.bonus .val{font-size:.9rem;}
.bonus .val s{color:#a13a3a;}
.bonus .val b{color:var(--ok);}
.bonus h3{font-size:1.2rem; margin:4px 0 6px;}
.bonus p{font-size:.88rem; color:var(--ink-soft); margin:0 0 8px;}
.bonus small{margin-top:auto; font-size:.76rem; color:var(--ink-soft);}
.bonus-total{margin-top:26px; font-family:"Outfit",sans-serif; font-size:1.6rem; color:var(--plum);}

/* pricing */
.price-cards{display:grid; grid-template-columns:1fr 1.12fr 1fr; gap:22px; align-items:end;}
.price-card{background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; text-align:center; display:flex; flex-direction:column;}
.price-card .tier{background:var(--parchment); color:var(--plum-deep); font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:.85rem; padding:12px;}
.price-card.popular{border:2px solid var(--plum); box-shadow:0 24px 50px rgba(67,19,31,.16);}
.price-card.popular .tier{background:var(--plum); color:#fff; padding:15px;}
.price-card .body{padding:22px 20px 26px; display:flex; flex-direction:column; align-items:center; gap:4px; flex:1;}
.price-card .qty{font-size:2rem; font-weight:700; color:var(--plum-deep); margin:0; line-height:1;}
.price-card .days{margin:0 0 6px; color:var(--ink-soft); font-size:.95rem;}
.price-card img{height:190px; width:auto; object-fit:contain;}
.price-card .per{display:flex; align-items:flex-end; justify-content:center; gap:8px; margin:6px 0;}
.price-card .per s{color:#a13a3a; font-size:1.1rem; margin-bottom:10px;}
.price-card .per-num{font-size:3.6rem; font-weight:700; color:var(--plum); line-height:1;}
.price-card .per small{margin-bottom:10px;}
.price-card ul{list-style:none; padding:0; margin:4px 0 14px; font-size:.94rem;}
.price-card ul li::before{content:"✓ "; color:var(--ok); font-weight:700;}
.price-card .total{margin:12px 0 0; font-size:.98rem;}
.price-card .save{color:var(--ok); font-weight:600; font-size:.92rem; margin:0;}

/* guarantee */
.guarantee{display:grid; grid-template-columns:260px 1fr; gap:44px; align-items:center;}

details{border-bottom:1px solid var(--line); padding:18px 0;}
summary{cursor:pointer; font-weight:600; font-size:1.08rem; color:var(--plum-deep); list-style:none; display:flex; justify-content:space-between; gap:16px;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; font-size:1.4rem; line-height:1; color:var(--gold);}
details[open] summary::after{content:"–";}
details p{margin:12px 0 0; color:var(--ink-soft);}

.offer{background:var(--plum-deep); color:#f3e6e8; border-radius:30px; padding:50px; display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:center;}
.offer h2{color:#fff;}
.offer .old{text-decoration:line-through; color:#c9a9b0; font-size:1.4rem; margin-right:12px;}
.offer .new{font-family:"Outfit",sans-serif; color:var(--gold); font-size:3rem; font-weight:700;}


/* articles */
.page-hero{background:radial-gradient(ellipse at 85% 10%, var(--blush) 0%, transparent 60%), var(--cream); padding:60px 6% 44px; border-bottom:1px solid var(--line);}
.page-hero .inner{max-width:820px;}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.2rem); margin:0 0 12px;}
.page-hero p{margin:0 0 6px; color:var(--ink-soft); font-size:1.1rem;}
.crumbs{font-size:.88rem!important;}
.crumbs a{color:var(--gold);}
.page-hero .answer{margin-top:22px;}
.page-hero .answer p{color:var(--ink); font-size:1rem;}
.article{max-width:820px; margin:0 auto; padding:40px 6% 76px;}
.article h2{font-size:2rem; margin:46px 0 10px;}
.article h3{font-size:1.4rem; margin:26px 0 6px;}
.takeaways{background:var(--blush-soft); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 26px; margin:10px 0 28px;}
.takeaways h3{margin:0 0 8px;}
.takeaways ul{margin:0; padding-left:20px;}
.callout{background:#fff; border:1px solid var(--line); border-left:5px solid var(--plum); border-radius:var(--radius-sm); padding:18px 22px; margin:26px 0;}
.sources{font-size:.9rem; color:var(--ink-soft);}
.article-cta{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; display:grid; grid-template-columns:150px 1fr; gap:24px; align-items:center; margin-top:46px;}
.article-cta h3{margin:0 0 6px;}
.article-cta p{margin:0 0 14px; font-size:.98rem;}
.back{margin-top:36px;}

/* footer */
.site-footer{background:var(--plum-deep); color:#e7d6d9; padding:50px 6%; font-size:.9rem;}
.site-footer .inner{max-width:1140px;}
.site-footer nav{display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:22px;}
.site-footer a{color:#7fd3d3;}
.site-footer p{margin:0 0 12px;}

.top-btn{position:fixed; right:20px; bottom:20px; width:50px; height:50px; border-radius:50%; background:var(--plum); color:#fff; text-decoration:none; font-size:1.3rem; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .3s;}
.top-btn.show{opacity:1; pointer-events:auto;}

@media (max-width:1000px){
  .bonus-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:960px){
  .hero-grid,.split,.split.rev,.guarantee,.offer{grid-template-columns:1fr;}
  .moon{order:-1;}
  .moon img{max-height:340px;}
  .pillars,.reviews,.benefits,.ing-grid{grid-template-columns:1fr 1fr;}
  .price-cards{grid-template-columns:1fr; max-width:440px; margin:0 auto;}
  .price-card.popular{order:-1;}
  .facts{grid-template-columns:1fr 1fr;}
  .facts div:nth-child(2){border-right:0;}
  .facts div:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .guarantee img{margin:0 auto;}
}
@media (max-width:640px){
  body{font-size:17.5px;}
  .pillars,.reviews,.benefits,.ing-grid,.zero{grid-template-columns:1fr;}
  .bonus-grid{grid-template-columns:1fr 1fr;}
  .section{padding:60px 6%;}
  .offer{padding:30px 22px;}
  .article-cta{grid-template-columns:1fr; text-align:center;}
  .article-cta img{margin:0 auto;}
  .site-header nav a:not(.btn){display:none;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto!important;}}

/* Opti Core Pro additions */
.seal-ring{width:220px; height:220px; border-radius:50%; margin:0 auto; background:var(--gold); color:var(--plum-deep); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-family:"Outfit",sans-serif; font-weight:800; line-height:1; border:8px solid #fff; outline:3px dashed var(--gold); outline-offset:4px;}
.seal-ring b{font-size:4.2rem;}
.seal-ring span{font-size:1rem; letter-spacing:.12em; margin-top:6px;}
.trust{display:flex; flex-wrap:wrap; gap:12px; list-style:none; padding:0; margin:20px 0 0;}
.trust li{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:6px 14px; font-size:.92rem;}
.facts-panel{background:#fff; border:2px solid var(--ink); border-radius:6px; padding:18px 20px; font-size:.9rem; line-height:1.45;}
.facts-panel h3{font-family:"Outfit",sans-serif; font-size:1.7rem; margin:0; border-bottom:8px solid var(--ink); padding-bottom:4px;}
.facts-panel table{font-size:.88rem; background:none;}
.facts-panel th,.facts-panel td{padding:5px 2px; border-bottom:1px solid #9bb;}
.facts-panel th{background:none; color:var(--ink); font-weight:700;}
.facts-panel .blend{margin-top:10px;}
.price-card .ship{font-size:.9rem; color:var(--ink-soft); margin:0 0 12px;}

.guarantee img.badge{width:230px; height:auto; margin:0 auto;}

.moon::after{content:""; position:absolute; right:0; top:10%; z-index:0; width:180px; height:120px; opacity:.35; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 120' fill='none' stroke='%23128c93' stroke-width='4'%3E%3Cpath d='M10 100 L50 70 L90 100 L130 70 L130 30 L170 10'/%3E%3Ccircle cx='50' cy='70' r='8' fill='%23128c93'/%3E%3Ccircle cx='130' cy='30' r='8' fill='%23128c93'/%3E%3Ccircle cx='170' cy='10' r='6' fill='%23128c93'/%3E%3C/svg%3E") no-repeat center/contain;} /* molecule motif from the label */
.moon img{z-index:1;}
