/* ==========================================================================
   VIGOSURGE - ADVANCED STYLESHEET
   Theme: Navy & Ember (matches the supplied pricing-card reference image)
   Font: Poppins / Oswald
   NOTE: Layout, spacing, and responsive rules are product-agnostic and
   reused as-is from the proven structure. Only the color tokens below,
   the ingredient group heading, and the "PRICING TABLES" block further
   down were changed for VigoSurge's own brand palette and new pricing
   card design.
   ========================================================================== */

/* ===== GLOBAL RESETS ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* === BRAND COLORS FOR VIGOSURGE (NAVY & EMBER THEME) === */
  /* A confident, masculine deep navy paired with a warm orange-to-red     */
  /* "ember" accent for pricing/CTA emphasis — pulled directly from the    */
  /* supplied pricing-section reference image.                            */
  --brand-primary:   #16233F; /* Deep Navy for ribbons, headings, borders */
  --brand-secondary: #24365E; /* Lighter Navy for Hovers/Accents */
  --brand-accent:    #121D33; /* Near-Black Navy for CTA Buttons */
  --brand-orange:    #EE7B22; /* Warm Orange for discounted price / CTAs */
  --brand-red:       #E14B4B; /* Ember Red for savings text / badges */
  --brand-yellow:    #FFC107; /* Yellow accent for Stars */
  --brand-green:     #2E8B45; /* Verification / Free-Shipping Green */

  /* Backgrounds & Text */
  --bg-main:         #FFFFFF; /* Clean White Background */
  --bg-light:        #F4F6F9; /* Light Cool Gray for contrast sections */
  --bg-dark:         #0D1526; /* Deep Navy-Black for Footer */
  --card-bg:         #FFFFFF; /* White for cards */
  --card-featured-bg:#FBF6E3; /* Warm cream for the highlighted pricing card */
  --text-main:       #1B2333; /* Dark Navy-Charcoal for main readability */
  --text-muted:      #5C6577; /* Softer muted blue-gray for descriptions */
  --text-dark:       #FFFFFF; /* White text for buttons/badges */
  --border-color:    #E2E6ED; /* Soft cool gray for borders */

  /* Shadows (Subtle Navy Glow) */
  --shadow-sm:       0 2px 8px rgba(22, 35, 63, 0.06);
  --shadow-md:       0 4px 20px rgba(22, 35, 63, 0.09);
  --shadow-lg:       0 12px 35px rgba(22, 35, 63, 0.14);

  /* === OPTIMIZED TYPOGRAPHY SCALES === */
  --f-xs:    1.0rem;
  --f-sm:    1.15rem;
  --f-body:  1.20rem; 
  --f-md:    1.45rem;
  --f-lg:    1.65rem;
  --f-xl:    2.1rem;
  --f-2xl:   2.6rem;
  --f-3xl:   3.2rem;
  --f-price: 3.6rem;
  --lh-body: 1.8;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', sans-serif;
  font-size: var(--f-body);
  line-height: var(--lh-body);
  color: var(--text-main);
  background: var(--bg-main);
  overflow-x: hidden;
  padding-bottom: 0px; 
}

/* Typography Basics */
h1 { font-family: 'Oswald', sans-serif; font-size: var(--f-3xl); font-weight: 700; line-height: 1.2; text-transform: uppercase; }
h2 { font-size: var(--f-2xl); font-weight: 800; line-height: 1.25; }
h3 { font-size: var(--f-xl);  font-weight: 700; line-height: 1.3; }
h4 { font-size: var(--f-lg);  font-weight: 700; line-height: 1.35; }
p, li { font-size: var(--f-body); line-height: var(--lh-body); margin-bottom: 18px; text-align: justify; text-align-last: left; }
a { text-decoration: none; color: var(--brand-secondary); }
strong { font-weight: 800; color: var(--brand-primary); } 

/* ===== UTILITIES ===== */
.section    { padding: 80px 24px; }
.bg-light   { background: var(--bg-light); }
.brand-title { color: var(--brand-primary); }
.sec-title  { text-align: center; font-size: var(--f-2xl); font-weight: 900; color: var(--text-main); margin-bottom: 15px; }
.sec-sub    { text-align: center; font-size: var(--f-md); color: var(--text-muted); margin-bottom: 50px; max-width: 900px; margin-left: auto; margin-right: auto; }
.wrap       { padding: 0 15px; } 

/* ===== BUTTONS ===== */
.btn-cta {
  display: inline-block; 
  background: var(--brand-accent); 
  color: var(--text-dark) !important; 
  padding: 18px 45px; 
  border-radius: 6px;
  font-weight: 800; 
  font-size: var(--f-lg);
  margin-top: 25px;
  box-shadow: 0 6px 20px rgba(91, 44, 111, 0.3);
  transition: all 0.3s ease;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.btn-cta:hover { 
  background: var(--brand-secondary); 
  transform: translateY(-3px); 
  box-shadow: 0 8px 25px rgba(156, 63, 194, 0.4); 
}
.btn-cta-xl { 
  font-size: 1.4rem;  
  padding: 18px 50px;
}

/* ===== NAVIGATION ===== */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--bg-main);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  border-bottom: 1px solid var(--border-color);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 24px;
}
.nav-logo { font-size: 2rem; font-weight: 900; color: var(--brand-primary); letter-spacing: 1px; filter: drop-shadow(0 0 2px rgba(91,44,111,0.2)); }
.nav-links { 
  display: flex; 
  gap: 35px; 
  list-style: none;
  margin-top: 15px; 
}
.nav-links a { color: var(--text-main); font-weight: 700; font-size: var(--f-sm); transition: color .2s; }
.nav-links a:hover { color: var(--brand-primary); }
.btn-nav {
  background: var(--brand-primary); color: var(--text-dark) !important;
  padding: 12px 30px; border-radius: 6px;
  font-weight: 800; font-size: var(--f-sm);
  transition: all .2s;
}
.btn-nav:hover { background: var(--brand-secondary); }
.hamburger { display: none; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; padding: 5px; }
.hamburger span { display: block; width: 30px; height: 3px; background: var(--brand-primary); border-radius: 2px; }
.mob-menu { display: none; flex-direction: column; gap: 18px; padding: 20px 24px; background: var(--bg-main); border-top: 1px solid var(--border-color); }
.mob-menu.open { display: flex; }
.mob-menu a { color: var(--text-main); font-weight: 700; font-size: var(--f-md); }
.mob-menu a:hover { color: var(--brand-primary); }

/* ===== HERO SECTION ===== */
.hero { 
  padding: 80px 24px; 
  background: linear-gradient(135deg, #ffffff 0%, #f3e6f7 100%);
  border-bottom: 1px solid var(--border-color);
}
.hero-grid {
  max-width: 1150px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 50px; align-items: center;
}
.hero-content h1 { color: var(--text-main); margin-bottom: 20px; letter-spacing: -1px;}
.hero-content h1 span { color: var(--brand-primary); }
.hero-content p { color: var(--text-muted); margin-bottom: 20px; font-size: var(--f-lg); text-align: left; font-weight: 500;}
.hero-img img { width: 100%; max-width: 450px; margin: 0 auto; display: block; filter: drop-shadow(0px 15px 35px rgba(91,44,111,0.15)); }

/* ===== ADDITIONAL HERO CSS ===== */
.trust-stars { 
    font-size: 1.4rem; 
    font-weight: 700; 
    color: var(--brand-yellow); 
    margin-bottom: 15px; 
}
.trust-stars span { 
    font-size: 1rem; 
    color: var(--text-muted); 
    margin-left: 8px; 
    font-weight: 500; 
}
.hero-divider { 
    border: none; 
    border-top: 2px solid var(--border-color); 
    margin: 25px 0; 
}
.reg-price { 
    font-size: var(--f-md); 
    color: var(--text-muted); 
}
.sale-price { 
    font-size: var(--f-xl); 
    font-weight: 900; 
    color: var(--brand-primary); 
    margin: 8px 0; 
}
.hurry-badge { 
    display: inline-block; 
    background: #FDECDD; 
    color: var(--brand-orange); 
    padding: 8px 22px; 
    font-size: var(--f-sm); 
    font-weight: 800; 
    border-radius: 5px; 
    margin-top: 10px; 
    margin-bottom: 15px;
    border: 1px solid #FFCC80;
}

/* ===== BENEFITS BADGES ===== */
.badges-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px;
}
.badge-card { text-align: center; padding: 35px 20px; border: 2px solid var(--border-color); border-radius: 12px; background: var(--card-bg); transition: all .3s; }
.badge-card:hover { border-color: var(--brand-secondary); box-shadow: var(--shadow-md); transform: translateY(-5px); }
.badge-card img { width: 85px; height: 85px; object-fit: contain; margin: 0 auto 15px; display: block; filter: drop-shadow(0 0 5px rgba(91,44,111,0.2)); }
.badge-card h4 { color: var(--brand-primary); margin-bottom: 12px; }
.badge-card p { font-size: 1.05rem; text-align: center; text-align-last: center; color: var(--text-muted);}

/* ===== TWO COLUMNS (ABOUT) ===== */
.two-col { max-width: 1150px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 50px; align-items: center; }
.two-col img { width: 100%; border-radius: 15px; box-shadow: var(--shadow-md); border: 2px solid var(--border-color); }
.two-col h2 { color: var(--brand-primary); margin-bottom: 25px; }

/* ===== INGREDIENTS ===== */
/* Category sub-heading above each ingredient group. Added because the    */
/* VigoSurge formula has 13 named ingredients across 5 focus areas,       */
/* versus the flat single-list layout this template originally shipped   */
/* with. Reuses brand tokens/fonts already defined above. */
.ing-group-title {
    max-width: 950px;
    margin: 40px auto 18px;
    text-align: left;
    color: var(--brand-primary);
    font-family: 'Oswald', sans-serif;
    font-size: var(--f-lg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
}
.ing-group-title:first-of-type { margin-top: 10px; }
.ing-list { max-width: 950px; margin: 0 auto; list-style: none; }
/* Positioned relative so .ing-num can anchor to each card; card styling
   (background/border/padding) supports the hover state and mobile
   breakpoint below. */
.ing-item { display: grid; grid-template-columns: 110px 1fr; gap: 22px; align-items: center; position: relative; padding: 22px 30px 22px 80px; margin-bottom: 20px; background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 12px; transition: all .3s; }
.ing-item:hover { box-shadow: var(--shadow-md); border-color: var(--brand-secondary); }
.ing-num { width: 55px; height: 55px; background: var(--brand-primary); color: var(--text-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--f-lg); font-weight: 900; position: absolute; left: -15px; top: -15px; box-shadow: var(--shadow-sm); }
.ing-img { width: 110px; height: 110px; object-fit: cover; border-radius: 12px; border: 2px solid var(--border-color); }
.ing-content h4 { color: var(--brand-secondary); margin-bottom: 12px; font-size: var(--f-xl); }

/* ===== TESTIMONIALS ===== */
.testi-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.testi-card { background: var(--card-bg); border-radius: 15px; padding: 35px 35px; text-align: center; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); }
.testi-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin: 0 auto 15px; border: 3px solid var(--brand-primary); }
.stars { font-size: 1.8rem; color: var(--brand-yellow); margin-bottom: 10px; }
.verified { color: var(--brand-green); font-weight: 800; font-size: var(--f-sm); margin-bottom: 15px; }
.testi-text { font-style: italic; color: var(--text-muted); margin-bottom: 20px; text-align: center; text-align-last: center; }
.testi-name { font-weight: 900; color: var(--brand-primary); font-size: 1.1rem; }

/* ===== PRICING TABLES (Ribbon-Banner Card Design) ===== */
/* Rebuilt to match the supplied reference image: an angled ribbon        */
/* banner header, a bordered "supply" box, a hexagon corner badge         */
/* overlapping the product photo, a struck-through price, and a          */
/* slightly larger, highlighted center ("featured") card.                 */
/* To change copy: edit the HTML inside the #pricing section only.       */
/* To change the look, this is the only CSS block you need to touch.     */
.pricing-grid {
    max-width: 1150px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: start;
    text-align: center;
}
.p-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 34px 22px 34px;
    border: 2px solid var(--border-color);
    position: relative;
    overflow: hidden;
    transition: all .3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.p-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-secondary);
}
.p-card.featured {
    border-color: var(--brand-orange);
    border-width: 2px;
    box-shadow: var(--shadow-md);
    background: var(--card-featured-bg);
    padding-top: 40px;
    transform: translateY(-10px);
}
.p-card.featured:hover { transform: translateY(-16px); }

/* Angled ribbon/flag banner pinned flush to the top of the card */
.p-ribbon {
    display: block;
    width: calc(100% + 44px);
    margin: -34px -22px 22px;
    padding: 16px 20px 16px 26px;
    background: var(--brand-primary);
    color: var(--text-dark);
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: left;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}
.p-ribbon.p-ribbon-accent {
    margin: -40px -22px 22px;
    background: linear-gradient(120deg, var(--brand-orange), var(--brand-red));
}

.p-supply-box {
    display: inline-block;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 24px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-main);
    margin-bottom: 22px;
}

.p-card-img-wrap { position: relative; width: 100%; margin-bottom: 16px; }
.p-card-img-wrap img {
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    display: block;
    transition: transform .3s;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.12));
}
.p-card-img-wrap img:hover { transform: scale(1.05); }

/* Hexagon corner badge ("Best Value" / "Most Popular") overlapping the   */
/* top-right of the product photo — anchored to .p-card-img-wrap so it    */
/* always lines up with the image regardless of ribbon height above it.  */
.p-hex-badge {
    position: absolute;
    top: -14px;
    right: -8px;
    width: 76px;
    height: 66px;
    background: var(--brand-red);
    color: var(--text-dark);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    padding: 4px 6px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.p-hex-badge-alt { background: var(--brand-primary); }

.p-price-row { margin-bottom: 6px; }
.p-price-old { font-size: var(--f-md); color: var(--text-main); text-decoration: line-through; opacity: 0.5; margin-right: 8px; }
.p-price-new { font-size: var(--f-price); font-weight: 900; color: var(--brand-orange); line-height: 1; }
.p-price-new span { font-size: var(--f-sm); font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.p-ebook-note { font-weight: 700; color: var(--text-main); margin-bottom: 6px; font-size: 0.95rem; }

.p-divider { border: none; border-top: 1px solid var(--border-color); margin: 16px 0; width: 100%; }
.p-total { font-size: var(--f-lg); font-weight: 800; color: var(--text-main); margin-bottom: 4px; }

.p-shipnote { font-weight: 700; font-size: 0.95rem; margin-top: 16px; }
.p-shipnote.ship-free { color: var(--brand-green); }
.p-shipnote.ship-paid { color: var(--text-main); }
.p-savings { font-weight: 800; color: var(--brand-red); margin-top: 6px; font-size: 1.05rem; }

/* ===== GUARANTEE ===== */
.mb-inner { max-width: 1050px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: 50px; align-items: center; }
.mb-inner img { width: 100%; max-width: 280px; filter: drop-shadow(0 0 15px rgba(91,44,111,0.15)); }
.mb-inner h3 { color: var(--brand-primary); margin-bottom: 20px; font-size: var(--f-xl);}

/* ===== FAQ ===== */
.faq-list { max-width: 950px; margin: 0 auto; }
.faq-item { background: var(--card-bg); border-radius: 12px; margin-bottom: 15px; border: 1px solid var(--border-color); overflow: hidden; box-shadow: var(--shadow-sm); }
.faq-q { width: 100%; background: none; border: none; padding: 25px 30px; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: var(--f-lg); font-weight: 800; color: var(--text-main); font-family: inherit; }
.faq-arrow { color: var(--brand-primary); transition: transform .3s; font-size: 1.2rem; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-ans { max-height: 0; overflow: hidden; transition: all .4s ease; padding: 0 30px; color: var(--text-muted); }
.faq-item.open .faq-ans { max-height: 800px; padding: 0 30px 25px; }

/* ===== FOOTER ===== */
footer { background: var(--bg-dark); color: #A897B0; padding: 70px 24px 40px; text-align: center; border-top: 1px solid var(--border-color); }
.foot-disc { max-width: 1100px; margin: 0 auto; font-size: 0.95rem; line-height: 1.7; text-align: justify; text-align-last: center; }
.foot-disc p { margin-bottom: 12px; }
.foot-links { display: flex; justify-content: center; gap: 30px; margin: 40px 0 25px; flex-wrap: wrap; }
.foot-links a { color: #DD8FE0; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.5px; }
.foot-links a:hover { color: #FFFFFF; }
.foot-copy { font-size: 0.9rem; opacity: 0.7; margin-top: 15px;}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
  :root {
    --f-body: 1.15rem; --f-md: 1.3rem; --f-lg: 1.45rem;
    --f-xl: 1.8rem; --f-2xl: 2.2rem; --f-3xl: 2.8rem; --f-price: 3rem;
  }
  .hero-grid { grid-template-columns: 1fr; text-align: center;}
  .hero-content p { text-align: center; }
  .hero-grid, .two-col, .mb-inner, .testi-grid { grid-template-columns: 1fr; text-align: center; }
  .pricing-grid, .badges-grid { grid-template-columns: 1fr; max-width: 550px; margin: 0 auto; }
  .badges-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-links, .btn-nav { display: none; }
  .hamburger { display: flex; }
  .p-card.featured { padding-top: 34px; transform: none; order: -1; }
  .p-card.featured:hover { transform: translateY(-8px); }
  .p-ribbon.p-ribbon-accent { margin-top: -34px; }
  .ing-item { grid-template-columns: 1fr; text-align: center; padding: 50px 25px 30px; }
  .ing-num { left: 50%; transform: translateX(-50%); top: -25px; }
  .ing-img { margin: 0 auto; }
  p, li { text-align: left; }
}

@media (max-width: 600px) {
  :root {
    --f-body: 1.05rem; --f-md: 1.15rem; --f-lg: 1.3rem;
    --f-xl: 1.6rem; --f-2xl: 1.9rem; --f-3xl: 2.2rem; --f-price: 2.5rem;
  }
  .badges-grid { grid-template-columns: 1fr; }
  .btn-cta, .btn-cta-xl { padding: 18px 20px; font-size: var(--f-md); width: 100%; }
  .section { padding: 50px 20px; }
  .foot-disc { text-align: left; text-align-last: left; }
}
/* ==========================================================================
   SIMPLE PAGES (Contact / Privacy / Terms / Returns)
   Minimal header+footer variant — reuses colors/fonts from :root above.
   ========================================================================== */
.simple-header { background: var(--bg-main); border-bottom: 1px solid var(--border-color); padding: 20px 24px; }
.simple-header-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.simple-header .nav-logo { font-size: 1.7rem; font-weight: 900; color: var(--brand-primary); }
.simple-header .back-home { font-weight: 700; font-size: var(--f-sm); color: var(--text-muted); }
.simple-header .back-home:hover { color: var(--brand-primary); }

.legal-wrap { max-width: 820px; margin: 0 auto; padding: 60px 24px 90px; }
.legal-wrap h1 { font-size: var(--f-2xl); text-transform: none; margin-bottom: 8px; color: var(--text-main); }
.legal-updated { color: var(--text-muted); font-size: var(--f-sm); margin-bottom: 35px; }
.legal-wrap h2 { font-size: var(--f-lg); color: var(--brand-primary); margin-top: 40px; margin-bottom: 12px; }
.legal-wrap h3 { font-size: var(--f-md); color: var(--text-main); margin-top: 22px; margin-bottom: 10px; }
.legal-wrap p, .legal-wrap li { text-align: left; }
.legal-wrap ul, .legal-wrap ol { margin: 0 0 18px 22px; }
.legal-wrap a { text-decoration: underline; }

.simple-footer { background: var(--bg-dark); color: var(--text-dark); padding: 40px 24px; text-align: center; margin-top: 40px; }
.simple-footer .foot-links { display: flex; justify-content: center; gap: 25px; margin-bottom: 18px; flex-wrap: wrap; }
.simple-footer .foot-links a { color: #DD8FE0; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; }
.simple-footer .foot-links a:hover { color: #FFFFFF; }
.simple-footer .foot-copy { font-size: 0.85rem; opacity: 0.7; }

@media (max-width: 600px) {
  .legal-wrap { padding: 40px 20px 60px; }
}