:root{--primary:#1E2D3D;--primary-light:#2A3D50;--accent:#B89A6A;--accent-hover:#A08558;--accent-light:#E8C970;--accent-glow:rgba(184,154,106,.18);--accent-bg:#F7F3ED;--gradient-accent:linear-gradient(135deg,#B89A6A 0%,#E8C970 100%);--gradient-dark:linear-gradient(180deg,#1E2D3D 0%,#0F0C08 100%);--white:#FFF;--off-white:#FAFAF8;--light-gray:#F5F2ED;--mid-gray:#E5DDD5;--text-dark:#1E2D3D;--text-body:#444;--text-muted:#888;--success:#22C55E;--gold:#F59E0B;--shadow-sm:0 2px 12px rgba(30,45,61,.06);--shadow-md:0 6px 24px rgba(30,45,61,.10);--shadow-lg:0 12px 48px rgba(30,45,61,.16);--shadow-card:0 4px 28px rgba(184,154,106,.12);--radius:14px;--radius-lg:20px;--transition:all .3s ease}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:400;color:var(--text-body);background:var(--white);line-height:1.8;font-size:18px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:var(--text-dark);line-height:1.25}
img{max-width:100%;height:auto;display:block}a{text-decoration:none;color:inherit}ul{list-style:none}
section h2{text-align:center;font-size:34px;font-weight:800;margin-bottom:18px}

/* ═══════════════════════════════════════════════════════════════
   HEADER (.hdr)
   ═══════════════════════════════════════════════════════════════ */
.hdr{position:sticky;top:0;z-index:1000;background:rgba(30,45,61,.96);backdrop-filter:blur(16px);border-bottom:1px solid rgba(184,154,106,.1);transition:background .3s ease,box-shadow .3s ease}
.hdr.scrolled{background:rgba(30,45,61,.98);box-shadow:0 2px 16px rgba(0,0,0,.18)}
.hdr-inner{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between}
.hdr-logo{font-size:24px;font-weight:800;color:var(--white);text-decoration:none;letter-spacing:-.5px}
.hdr-logo span{color:var(--accent)}
.hdr-nav{display:flex;align-items:center;gap:28px}
.hdr-nav a{font-size:15px;font-weight:600;color:rgba(255,255,255,.6);transition:var(--transition);text-decoration:none}
.hdr-nav a:hover{color:var(--accent)}
.hdr-btn{background:var(--accent)!important;color:var(--primary)!important;padding:11px 30px;border-radius:50px;font-weight:700!important;font-size:14px!important;transition:var(--transition)}
.hdr-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(184,154,106,.3)}
.hdr-mob{display:none;background:none;border:none;font-size:28px;cursor:pointer;color:var(--white);padding:4px}

/* ═══════════════════════════════════════════════════════════════
   HERO (.hero)
   ═══════════════════════════════════════════════════════════════ */
.hero{padding:64px 24px}
.hero-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:56px}
.hero-inner>div:first-child{flex:1}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(184,154,106,.15);color:var(--accent);padding:8px 20px;border-radius:50px;font-size:13px;font-weight:700;margin-bottom:24px}
.hero h1{font-size:34px;font-weight:800;margin-bottom:18px;line-height:1.15}
.hero-desc{font-size:17px;line-height:1.8;margin-bottom:14px}
.hero-stats{display:flex;gap:32px;margin:28px 0}
.h-stat{display:flex;flex-direction:column}
.h-stat b{font-size:28px;font-weight:800;color:var(--primary)}
.h-stat span{font-size:14px;color:var(--text-muted)}
.hero-btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
.hero-img{flex:0 0 420px;text-align:center}
.hero-img img{max-width:100%;filter:drop-shadow(0 24px 48px rgba(0,0,0,.12));transition:transform .5s ease}
.hero-img img:hover{transform:scale(1.04)}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS (.btn-main, .btn-sec)
   ═══════════════════════════════════════════════════════════════ */
.btn-main{background:var(--accent);color:var(--primary)!important;padding:18px 40px;border-radius:50px;font-weight:700;font-size:17px;text-align:center;transition:var(--transition);display:inline-flex;align-items:center;gap:10px;box-shadow:0 6px 20px rgba(184,154,106,.3);text-decoration:none;border:none;cursor:pointer}
.btn-main:hover{transform:translateY(-3px);box-shadow:0 10px 35px rgba(184,154,106,.45)}
.btn-sec{background:transparent;color:var(--accent)!important;padding:18px 40px;border-radius:50px;font-weight:700;font-size:17px;border:2.5px solid var(--accent);transition:var(--transition);text-align:center;display:inline-block;text-decoration:none}
.btn-sec:hover{background:var(--accent);color:var(--primary)!important;transform:translateY(-3px)}

/* ═══════════════════════════════════════════════════════════════
   WHY CHOOSE (.why)
   ═══════════════════════════════════════════════════════════════ */
.why{background:var(--off-white);padding:80px 24px;text-align:center}
.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;max-width:1200px;margin:32px auto 0}
.why-item{background:var(--white);border-radius:var(--radius-lg);padding:36px 20px;box-shadow:var(--shadow-sm);transition:var(--transition);border:1.5px solid transparent}
.why-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:rgba(184,154,106,.15)}
.why-icon{width:60px;height:60px;background:var(--accent-bg);color:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 16px}
.why-item h4{font-size:16px;margin-bottom:8px}
.why-item p{font-size:15px;color:var(--text-muted);line-height:1.65}

/* ═══════════════════════════════════════════════════════════════
   QUALITY / CERTIFICATIONS (.quality)
   ═══════════════════════════════════════════════════════════════ */
.quality{padding:72px 24px;text-align:center;border-top:1px solid var(--mid-gray);border-bottom:1px solid var(--mid-gray)}
.qual-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1100px;margin:32px auto 0}
.qual-item{background:var(--off-white);border-radius:var(--radius-lg);padding:36px 24px;text-align:center;box-shadow:var(--shadow-sm);transition:var(--transition);border:1.5px solid transparent}
.qual-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:rgba(184,154,106,.2)}
.qual-item img{width:72px;height:72px;margin:0 auto 18px;object-fit:contain}
.qual-item h4{font-size:15px;font-weight:800;color:var(--primary);margin-bottom:10px;letter-spacing:.5px;text-transform:uppercase}
.qual-item p{font-size:15px;color:var(--text-muted);line-height:1.65}

/* ═══════════════════════════════════════════════════════════════
   WHAT IS (.what)
   ═══════════════════════════════════════════════════════════════ */
.what{padding:80px 24px}
.what-inner{max-width:1200px;margin:0 auto;display:flex;gap:56px;align-items:center}
.what-img{flex:0 0 380px;text-align:center}
.what-img img{border-radius:var(--radius-lg);filter:drop-shadow(0 20px 40px rgba(0,0,0,.1));max-width:100%}
.what-inner>div:last-child{flex:1}
.what h2{text-align:left;margin-bottom:18px}
.what p{font-size:17px;line-height:1.85;margin-bottom:18px}

/* ═══════════════════════════════════════════════════════════════
   HOW IT WORKS — RADIAL (.how)
   ═══════════════════════════════════════════════════════════════ */
.how{background:var(--gradient-dark);color:var(--white);padding:88px 24px;overflow:hidden}
.how h2{color:var(--white)}
.how-sub{text-align:center;font-size:18px;color:rgba(255,255,255,.65);margin-bottom:52px;max-width:700px;margin-left:auto;margin-right:auto}
.how-radial{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 200px 1fr;grid-template-rows:repeat(3,auto);gap:24px;align-items:center}
.how-center{grid-column:2;grid-row:1/4;text-align:center}
.how-center img{max-width:160px;margin:0 auto 12px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.3))}
.how-center p{color:var(--accent-light);font-weight:700;font-size:14px}
.how-point{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:24px;transition:var(--transition)}
.how-point:hover{background:rgba(184,154,106,.06);border-color:rgba(184,154,106,.2)}
.how-point h4{font-size:17px;font-weight:700;color:var(--white);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.how-point p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.7)}
.dot{width:8px;height:8px;background:var(--accent);border-radius:50%;display:inline-block;flex-shrink:0}
.hp1{grid-column:1;grid-row:1}.hp2{grid-column:3;grid-row:1}
.hp3{grid-column:1;grid-row:2}.hp4{grid-column:3;grid-row:2}
.hp5{grid-column:1;grid-row:3}.hp6{grid-column:3;grid-row:3}

/* ═══════════════════════════════════════════════════════════════
   REVIEWS (.rev)
   ═══════════════════════════════════════════════════════════════ */
.rev{padding:80px 24px;background:var(--off-white)}
.rev-sub{text-align:center;font-size:17px;color:var(--text-muted);margin-bottom:40px;max-width:700px;margin-left:auto;margin-right:auto}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto}
.rev-card{background:var(--white);border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-sm);border:1.5px solid transparent;transition:var(--transition)}
.rev-card:hover{box-shadow:var(--shadow-card);transform:translateY(-4px);border-color:rgba(184,154,106,.15)}
.rev-stars{color:var(--gold);font-size:18px;margin-bottom:16px;letter-spacing:2px}
.rev-card>p{font-size:16px;line-height:1.75;font-style:italic;margin-bottom:20px}
.rev-author{display:flex;align-items:center;gap:14px}
.rev-author img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2.5px solid var(--accent)}
.rev-author strong{display:block;font-size:15px;color:var(--primary)}
.rev-author span{font-size:13px;color:var(--text-muted)}

/* ═══════════════════════════════════════════════════════════════
   STATS BAR (.stats-bar)
   ═══════════════════════════════════════════════════════════════ */
.stats-bar{background:var(--gradient-dark);color:var(--white);padding:56px 24px;text-align:center}
.stats-row{display:flex;justify-content:center;gap:64px;margin-bottom:28px}
.sb-item{text-align:center}
.sb-item b{display:block;font-size:36px;font-weight:900;color:var(--accent-light)}
.sb-item span{font-size:15px;color:rgba(255,255,255,.6)}
.stats-bar>p{font-size:20px;font-weight:600;margin-bottom:24px}

/* ═══════════════════════════════════════════════════════════════
   PRICING (.pricing)
   ═══════════════════════════════════════════════════════════════ */
.pricing{padding:80px 24px;text-align:center}
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:40px auto 0;align-items:start}
.pr-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:2px solid var(--mid-gray);transition:var(--transition)}
.pr-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.pr-card.pop{border-color:var(--accent);transform:scale(1.06);box-shadow:var(--shadow-card)}
.pr-card.pop:hover{transform:scale(1.08) translateY(-6px)}
.pr-top{background:var(--primary);padding:20px;font-size:17px;font-weight:800;color:var(--white);text-align:center;letter-spacing:1px}
.pr-card.pop .pr-top{background:var(--accent);color:var(--primary)}
.pr-body{padding:30px 22px 36px;text-align:center}
.pr-img{max-height:170px;width:auto;margin:0 auto 22px;object-fit:contain;display:block}
.pr-price{font-size:52px;font-weight:900;color:var(--primary)}
.pr-per{font-size:16px;color:var(--text-muted)}
.pr-save{background:var(--accent-bg);color:var(--accent);padding:8px 20px;border-radius:50px;display:inline-block;font-size:16px;font-weight:800;margin:14px 0}
.pr-btn{display:block;background:var(--accent);color:var(--primary)!important;padding:16px;border-radius:50px;font-weight:800;font-size:18px;transition:var(--transition);margin-bottom:18px;text-decoration:none}
.pr-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(184,154,106,.3)}
.pr-total{font-size:16px;color:var(--text-muted);margin-bottom:14px}
.pr-total del{color:#ccc}
.pr-total b{color:var(--accent);font-weight:700;font-size:19px}
.pr-cc{max-height:32px;margin:0 auto;display:block}

/* ═══════════════════════════════════════════════════════════════
   GUARANTEE (.guar-box)
   ═══════════════════════════════════════════════════════════════ */
.guar-box{max-width:900px;margin:48px auto;padding:44px;display:flex;align-items:center;gap:40px;background:linear-gradient(135deg,#F7F3ED,#F5F0E4);border-radius:var(--radius-lg);border:2px solid rgba(184,154,106,.15);position:relative;overflow:hidden}
.guar-box::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent)}
.guar-box img{width:140px;flex-shrink:0;filter:drop-shadow(0 6px 16px rgba(0,0,0,.1))}
.guar-box h3{font-size:24px;margin-bottom:14px}
.guar-box p{font-size:17px;line-height:1.75}

/* ═══════════════════════════════════════════════════════════════
   INGREDIENTS GRID — homepage (.ing)
   ═══════════════════════════════════════════════════════════════ */
.ing{padding:80px 24px;text-align:center}
.ing-sub{max-width:750px;margin:0 auto 44px;font-size:17px;color:var(--text-muted);text-align:center}
.ing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto}
.ing-card{background:var(--off-white);border-radius:var(--radius);padding:28px;text-align:left;border-left:5px solid var(--accent);transition:var(--transition)}
.ing-card:hover{background:var(--accent-bg);transform:translateX(6px);box-shadow:var(--shadow-sm)}
.ing-card h4{font-size:18px;font-weight:700;color:var(--primary);margin-bottom:6px}
.ing-card .role{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.ing-card p{font-size:15px;line-height:1.7;text-align:left}

/* ═══════════════════════════════════════════════════════════════
   BENEFITS GRID — homepage (.ben)
   ═══════════════════════════════════════════════════════════════ */
.ben{padding:80px 24px}
.ben-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1000px;margin:32px auto 0}
.ben-item{display:flex;gap:18px;padding:22px 26px;background:var(--off-white);border-radius:var(--radius);transition:var(--transition);border:1.5px solid transparent}
.ben-item:hover{background:var(--accent-bg);transform:translateX(6px);border-color:rgba(184,154,106,.15)}
.ben-check{width:30px;height:30px;background:var(--accent);color:var(--primary);border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;margin-top:2px}
.ben-item h4{font-size:17px;font-weight:700;color:var(--primary);margin-bottom:5px}
.ben-item p{font-size:15px;line-height:1.65}

/* ═══════════════════════════════════════════════════════════════
   FAQ (.faq)
   ═══════════════════════════════════════════════════════════════ */
.faq{padding:80px 24px;background:var(--off-white)}
.faq h2{margin-bottom:40px}
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.fq{background:var(--white);border-radius:var(--radius);border:1.5px solid var(--mid-gray);overflow:hidden;cursor:pointer;transition:var(--transition)}
.fq:hover{border-color:var(--accent)}
.fq-q{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;font-weight:700;font-size:18px}
.fq-q::after{content:'+';font-size:26px;font-weight:300;color:var(--accent);transition:transform .3s ease}
.fq.open .fq-q::after{content:'\2212';transform:rotate(180deg)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease;padding:0 26px;font-size:17px;line-height:1.75}
.fq.open .fq-a{max-height:500px;padding:0 26px 22px}

/* ═══════════════════════════════════════════════════════════════
   FINAL CTA (.final)
   ═══════════════════════════════════════════════════════════════ */
.final{text-align:center;padding:80px 24px;background:var(--gradient-dark);color:var(--white);overflow:hidden}
.final h2{color:var(--white);margin-bottom:18px}
.final>p{color:rgba(255,255,255,.65);font-size:18px;margin-bottom:28px}
.final>img{max-width:350px;margin:0 auto 26px;filter:drop-shadow(0 12px 36px rgba(0,0,0,.3))}
.fp{font-size:24px;color:var(--accent-light);margin-bottom:22px;font-weight:700}
.final small{display:block;margin-top:18px;font-size:14px;color:rgba(255,255,255,.5)}

/* ═══════════════════════════════════════════════════════════════
   FOOTER (.ftr)
   ═══════════════════════════════════════════════════════════════ */
.ftr{background:var(--primary);color:rgba(255,255,255,.55);padding:52px 24px 36px;text-align:center;font-size:14px;line-height:1.75}
.ftr p{margin-bottom:12px}
.ftr b{color:rgba(255,255,255,.8)}
.ftr-links{margin:20px 0 14px;font-size:14px}
.ftr-links a{color:rgba(255,255,255,.4);margin:0 12px;transition:var(--transition);text-decoration:none}
.ftr-links a:hover{color:var(--accent)}

/* ═══════════════════════════════════════════════════════════════
   REFERENCES (.refs)
   ═══════════════════════════════════════════════════════════════ */
.refs{padding:56px 24px;background:var(--off-white)}
.refs h2{text-align:center;font-size:22px;margin-bottom:28px}
.refs-list{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.ref-item{font-size:14px;color:var(--text-muted);line-height:1.7;padding:12px 16px;background:var(--white);border-radius:8px;border-left:3px solid var(--accent)}

/* ═══════════════════════════════════════════════════════════════
   CTA BANNER (bottom sticky)
   ═══════════════════════════════════════════════════════════════ */
.bottom-cta-banner{position:fixed;bottom:0;left:0;width:100%;z-index:900;background:var(--primary);box-shadow:0 -6px 24px rgba(0,0,0,.25);transition:transform .4s ease;border-top:3px solid var(--accent)}.bottom-cta-banner.hidden{transform:translateY(100%)}
.cta-banner-content{max-width:1100px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.cta-banner-text h4{color:var(--white);font-size:16px}.cta-banner-text p{color:rgba(255,255,255,.5);font-size:13px}
.cta-price{color:var(--accent-light);font-size:21px;font-weight:800}.cta-original-price{color:rgba(255,255,255,.3);text-decoration:line-through;font-size:13px;display:block}
.cta-banner-button{background:var(--accent);color:var(--primary)!important;padding:13px 30px;border-radius:50px;font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;transition:var(--transition);white-space:nowrap;text-decoration:none}
.cta-banner-button:hover{transform:scale(1.04);box-shadow:0 6px 20px rgba(184,154,106,.3)}
.cta-banner-close{background:none;border:none;color:rgba(255,255,255,.3);font-size:24px;cursor:pointer;padding:4px 8px}.cta-banner-close:hover{color:var(--white)}

/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES (.legal-page)
   ═══════════════════════════════════════════════════════════════ */
.legal-page{font-family:'Plus Jakarta Sans','Roboto Condensed',sans-serif;color:var(--text-body);line-height:1.8}
.legal-page-header{background:var(--gradient-dark);color:var(--white);padding:64px 24px;text-align:center}
.legal-page-header h1{color:var(--white);font-size:36px}
.legal-content{padding:56px 24px}
.legal-container{max-width:800px;margin:0 auto;font-size:16px;line-height:1.8}
.legal-container h2{font-size:22px;margin:32px 0 14px;text-align:left}
.legal-container h3{font-size:19px;margin:28px 0 12px;color:var(--primary)}
.legal-container p{margin-bottom:16px}
.legal-container a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.legal-container a:hover{color:var(--accent-hover)}
.legal-navigation{margin-top:48px;padding-top:28px;border-top:2px solid var(--mid-gray)}
.legal-back-link{display:inline-block;font-weight:700;color:var(--accent);margin-bottom:20px;font-size:16px}
.legal-back-link:hover{color:var(--accent-hover)}
.legal-nav-links{display:flex;gap:16px;flex-wrap:wrap}
.legal-nav-link{padding:10px 24px;border-radius:50px;font-size:14px;font-weight:600;border:1.5px solid var(--mid-gray);color:var(--text-body);transition:var(--transition)}
.legal-nav-link:hover,.legal-nav-link.active{background:var(--accent);color:var(--primary);border-color:var(--accent)}
.legal-divider{border:none;border-top:2px solid var(--mid-gray);margin:32px 0}
.legal-section{margin-bottom:32px}
.legal-subsection{margin-bottom:20px}
.legal-container h4{font-size:17px;margin:20px 0 10px;color:var(--primary)}
.legal-container ul{margin:14px 0 18px 24px;list-style:disc}
.legal-container li{font-size:16px;line-height:1.75;margin-bottom:8px;padding-left:4px}
.legal-notice{background:var(--accent-bg);border-left:4px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;margin:16px 0}
.legal-highlight{background:var(--off-white);border-radius:var(--radius);padding:20px 24px;margin:16px 0}
.contact-info{background:var(--off-white);border-radius:var(--radius);padding:24px;margin-top:24px;border:1.5px solid var(--mid-gray)}

/* ═══════════════════════════════════════════════════════════════
   PAGE HERO (Ingredients & Benefits pages)
   ═══════════════════════════════════════════════════════════════ */
.page-hero{background:var(--gradient-dark);color:var(--white);padding:80px 24px 64px;text-align:center}
.page-hero-inner{max-width:750px;margin:0 auto}
.page-hero h1{color:var(--white);font-size:40px;margin-bottom:18px}
.page-hero p{font-size:18px;color:rgba(255,255,255,.65);line-height:1.8}
.sec-tag{display:inline-block;background:rgba(184,154,106,.2);color:var(--accent-light);padding:6px 20px;border-radius:50px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px}
.page-cta{text-align:center;padding:72px 24px;background:var(--off-white)}
.page-cta h2{margin-bottom:14px}.page-cta p{font-size:17px;color:var(--text-muted);margin-bottom:28px}

/* ═══════════════════════════════════════════════════════════════
   INGREDIENTS DETAIL PAGE (.ing-detail)
   ═══════════════════════════════════════════════════════════════ */
.ing-detail{padding:72px 24px}
.ing-detail-inner{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.ing-detail-card{display:flex;gap:28px;background:var(--off-white);border-radius:var(--radius-lg);padding:36px;border:1.5px solid transparent;transition:var(--transition)}
.ing-detail-card:hover{border-color:rgba(184,154,106,.2);box-shadow:var(--shadow-card);transform:translateY(-4px)}
.ing-detail-icon{width:64px;height:64px;background:var(--accent);color:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.ing-detail-content h2{font-size:24px;margin-bottom:6px}
.ing-detail-role{font-size:13px;font-weight:700;color:var(--accent);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}
.ing-detail-content p{font-size:16px;line-height:1.75;margin-bottom:14px}
.ing-detail-content a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ing-detail-content a:hover{color:var(--accent-hover)}
.ing-detail-tag{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--success);margin-top:8px}
@media(max-width:768px){.ing-detail-card{flex-direction:column;padding:28px 22px}.ing-detail-icon{width:52px;height:52px;font-size:20px}}

/* ═══════════════════════════════════════════════════════════════
   BENEFITS DETAIL PAGE (.ben-detail)
   ═══════════════════════════════════════════════════════════════ */
.ben-detail{padding:72px 24px}
.ben-detail-inner{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.ben-detail-card{display:flex;gap:28px;background:var(--off-white);border-radius:var(--radius-lg);padding:36px;border:1.5px solid transparent;transition:var(--transition)}
.ben-detail-card:hover{border-color:rgba(184,154,106,.2);box-shadow:var(--shadow-card);transform:translateY(-4px)}
.ben-detail-number{font-size:48px;font-weight:900;color:var(--accent);opacity:.35;line-height:1;flex-shrink:0;min-width:52px}
.ben-detail-content h2{font-size:22px;margin-bottom:10px}
.ben-detail-content p{font-size:16px;line-height:1.75;margin-bottom:12px}
.ben-detail-content a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ben-detail-content a:hover{color:var(--accent-hover)}
@media(max-width:768px){.ben-detail-card{flex-direction:column;padding:28px 22px}.ben-detail-number{font-size:36px}}

/* ═══════════════════════════════════════════════════════════════
   WHO BENEFITS GRID
   ═══════════════════════════════════════════════════════════════ */
.who-benefits{padding:72px 24px;background:var(--off-white)}
.who-benefits-inner{max-width:1000px;margin:0 auto;text-align:center}
.who-benefits h2{margin-bottom:44px}
.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.who-item{background:var(--white);padding:36px 24px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:var(--transition)}
.who-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.who-icon{width:60px;height:60px;background:var(--accent-bg);color:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 18px}
.who-item h4{font-size:17px;margin-bottom:8px}
.who-item p{font-size:15px;color:var(--text-muted);line-height:1.65}
@media(max-width:768px){.who-grid{grid-template-columns:1fr 1fr;gap:16px}}
@media(max-width:480px){.who-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   ARTICLE PAGES
   ═══════════════════════════════════════════════════════════════ */
.article-hero{background:var(--gradient-dark);color:var(--white);padding:72px 24px 56px;text-align:center}
.article-hero-inner{max-width:750px;margin:0 auto}
.article-tag{display:inline-block;background:rgba(184,154,106,.2);color:var(--accent-light);padding:5px 18px;border-radius:50px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px}
.article-hero h1{color:var(--white);font-size:36px;margin-bottom:14px;line-height:1.2}
.article-meta{font-size:14px;color:rgba(255,255,255,.5)}
.article-content{padding:56px 24px}
.article-inner{max-width:760px;margin:0 auto;font-size:17px;line-height:1.85}
.article-inner h2{font-size:26px;margin:44px 0 18px;padding-bottom:10px;border-bottom:3px solid var(--accent);display:inline-block}
.article-inner h3{font-size:21px;margin:32px 0 14px;color:var(--primary)}
.article-inner p{margin-bottom:18px}
.article-inner a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.article-inner a:hover{color:var(--accent-hover)}
.article-inner strong{color:var(--text-dark)}
.article-inner em{color:var(--text-muted)}
@media(max-width:768px){.article-hero h1{font-size:28px}.article-hero{padding:56px 20px 40px}.article-content{padding:40px 18px}}

/* ───── Quick Answer Box ───── */
.quick-answer{background:linear-gradient(135deg,#F7F3ED,#F5F0E4);border-left:5px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;padding:24px 28px;margin-bottom:36px;font-size:16px;line-height:1.8}
.quick-answer strong{color:var(--accent);font-size:14px;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:8px}

/* ───── Author Box ───── */
.author-box{display:flex;gap:20px;align-items:flex-start;background:var(--off-white);border-radius:var(--radius-lg);padding:28px;margin-top:48px;border:1.5px solid var(--mid-gray)}
.author-avatar{width:56px;height:56px;background:var(--accent);color:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex-shrink:0}
.author-name{font-size:17px;font-weight:700;color:var(--primary);margin-bottom:6px}
.author-bio{font-size:15px;line-height:1.7;color:var(--text-muted)}
@media(max-width:768px){.author-box{flex-direction:column;text-align:center;align-items:center;padding:22px}}

/* ───── Related Posts ───── */
.related-posts{max-width:900px;margin:0 auto;padding:56px 24px}
.related-posts h3{text-align:center;font-size:26px;margin-bottom:32px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related-card{display:block;background:var(--off-white);border-radius:var(--radius);padding:28px;border:1.5px solid transparent;transition:var(--transition);text-decoration:none}
.related-card:hover{border-color:rgba(184,154,106,.2);box-shadow:var(--shadow-card);transform:translateY(-4px)}
.related-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.related-card h4{font-size:16px;font-weight:700;color:var(--primary);margin-bottom:12px;line-height:1.35}
.related-link{font-size:14px;font-weight:600;color:var(--accent)}
@media(max-width:768px){.related-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   BLOG SECTION (homepage + article footer)
   ═══════════════════════════════════════════════════════════════ */
.blog-section{padding:80px 24px;background:var(--off-white)}
.blog-section-inner{max-width:1100px;margin:0 auto;text-align:center}
.blog-section-tag{display:inline-block;background:rgba(184,154,106,.15);color:var(--accent);padding:6px 20px;border-radius:50px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}
.blog-section h2{margin-bottom:36px}
.blog-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:left}
.blog-card-item{display:block;background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1.5px solid transparent;transition:var(--transition);text-decoration:none;color:inherit}
.blog-card-item:hover{border-color:rgba(184,154,106,.2);box-shadow:var(--shadow-card);transform:translateY(-6px)}
.blog-card-body{padding:28px 24px}
.blog-card-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.blog-card-body h3{font-size:18px;font-weight:700;color:var(--primary);margin-bottom:10px;line-height:1.35}
.blog-card-body p{font-size:15px;color:var(--text-muted);line-height:1.65;margin-bottom:14px}
.blog-card-link{font-size:14px;font-weight:700;color:var(--accent)}
.blog-browse{margin-top:36px}
.blog-browse-link{font-size:16px;font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.blog-browse-link:hover{color:var(--accent-hover)}
@media(max-width:768px){.blog-card-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   BLOG LISTING PAGE
   ═══════════════════════════════════════════════════════════════ */
.blog-hero{background:var(--gradient-dark);color:var(--white);padding:80px 24px 60px;text-align:center}
.blog-hero-inner{max-width:700px;margin:0 auto}
.blog-hero h1{color:var(--white);font-size:40px;margin-bottom:16px}
.blog-hero p{font-size:17px;color:rgba(255,255,255,.6);line-height:1.8}
.blog-listing{padding:56px 24px;max-width:1100px;margin:0 auto}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{display:block;background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1.5px solid var(--mid-gray);transition:var(--transition);text-decoration:none;color:inherit}
.blog-card:hover{border-color:rgba(184,154,106,.2);box-shadow:var(--shadow-card);transform:translateY(-6px)}
.blog-card-inner{padding:28px 24px}
.blog-card-cat{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.blog-card-inner h3{font-size:18px;font-weight:700;color:var(--primary);margin-bottom:10px;line-height:1.35}
.blog-card-inner p{font-size:15px;color:var(--text-muted);line-height:1.65;margin-bottom:16px}
.blog-card-footer{display:flex;justify-content:space-between;align-items:center}
.blog-card-date{font-size:13px;color:var(--text-muted)}
.blog-card-read{font-size:14px;font-weight:700;color:var(--accent)}
@media(max-width:768px){.blog-grid{grid-template-columns:1fr}}
@media(max-width:480px){.page-hero h1,.blog-hero h1{font-size:30px}}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — HOMEPAGE
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
    .hero-inner{gap:32px}
    .hero-img{flex:0 0 320px}
    .hero-img img{max-width:300px;margin:0 auto}
    .what-inner{flex-direction:column;text-align:center}
    .what-img{flex:none}
    .what-img img{max-width:300px;margin:0 auto}
    .what h2{text-align:center}
    .pr-grid{grid-template-columns:repeat(2,1fr)}
    .pr-card.pop{grid-column:1/-1;max-width:400px;margin:0 auto;transform:scale(1.02)}
    .why-grid{grid-template-columns:repeat(3,1fr)}
    .qual-grid{grid-template-columns:repeat(2,1fr)}
    .how-radial{grid-template-columns:1fr;grid-template-rows:auto}
    .how-center{grid-column:1;grid-row:1}
    .hp1{grid-column:1;grid-row:2}.hp2{grid-column:1;grid-row:3}
    .hp3{grid-column:1;grid-row:4}.hp4{grid-column:1;grid-row:5}
    .hp5{grid-column:1;grid-row:6}.hp6{grid-column:1;grid-row:7}
}

@media(max-width:768px){
    body{font-size:17px}
    section h2{font-size:28px}

    /* Header mobile */
    .hdr-nav{display:none;position:fixed;top:56px;right:0;width:280px;bottom:0;background:var(--primary);flex-direction:column;padding:24px;gap:4px;box-shadow:-4px 0 24px rgba(0,0,0,.3);z-index:999;overflow-y:auto}
    .hdr-nav.show{display:flex}
    .hdr-nav a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:17px;color:rgba(255,255,255,.7)}
    .hdr-btn{margin-top:12px;text-align:center;padding:14px 30px!important}
    .hdr-mob{display:block}

    /* Hero */
    .hero{padding:36px 16px}
    .hero h1{font-size:26px}
    .hero-img{flex:none}
    .hero-img img{max-width:260px;margin:0 auto}
    .hero-btns{justify-content:center}
    .hero-stats{justify-content:center;flex-wrap:wrap;gap:20px}

    /* Sections */
    .why-grid{grid-template-columns:1fr 1fr}
    .qual-grid{grid-template-columns:1fr 1fr;gap:16px}
    .rev-grid{grid-template-columns:1fr}
    .pr-grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}
    .pr-card.pop{transform:none;order:-1}
    .ing-grid{grid-template-columns:1fr}
    .ben-grid{grid-template-columns:1fr}
    .guar-box{flex-direction:column;text-align:center;padding:28px;margin:36px 16px}
    .stats-row{flex-direction:column;gap:20px}

    /* CTA banner */
    .cta-banner-content{flex-wrap:wrap;justify-content:center;text-align:center;padding:10px 16px}
    .cta-banner-text,.cta-banner-price{display:none}
    .cta-banner-button{flex:1;justify-content:center}
}

@media(max-width:480px){
    .hero-img img{max-width:220px}
    .why-grid{grid-template-columns:1fr}
    .qual-grid{grid-template-columns:1fr}
    .pr-price{font-size:42px}
}