/* =========================================================
   EVOLVE PEPTIDES — Design tokens (Bright / Modern direction)
   Palette:
     --graphite      #FFFFFF  background (white)
     --graphite-soft #F5F8FD  panels
     --bone          #0F1729  primary text (deep navy ink)
     --bone-dim      #5B6B84  secondary text (slate)
     --copper        #2563EB  primary accent — vivid blue
     --teal          #8FBBDA  secondary accent — a shade lighter than Tar Heel Blue
     --line          #E3E9F3  hairlines
     --gradient      vivid blue → light blue gradient, buttons & header bar
   Type: Sora (display) / Inter (body) / JetBrains Mono (data)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --graphite:#FFFFFF;
  --graphite-soft:#F5F8FD;
  --graphite-softer:#EAF1FC;
  --bone:#0F1729;
  --bone-dim:#5B6B84;
  --copper:#2563EB;
  --copper-soft:#4F8CFF;
  --teal:#8FBBDA;
  --line:#E3E9F3;
  --radius:14px;
  --gradient: linear-gradient(135deg, #2563EB 0%, #8FBBDA 100%);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--graphite);
  color:var(--bone);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
h1,h2,h3,h4{
  font-family:'Sora',sans-serif;
  font-weight:600;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--copper);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal);
}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--graphite-softer);
  border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  color:var(--bone-dim);
  text-align:center;
  padding:8px 20px;
  letter-spacing:.02em;
}
.announce strong{color:var(--copper);}

/* ---------- Header ---------- */
.gradient-bar{height:4px;background:var(--gradient);}

header.site{
  border-bottom:1px solid var(--line);
  position:sticky;top:0;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  z-index:50;
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;
}
.wordmark{display:flex;align-items:center;gap:10px;}
.word-text{display:flex;flex-direction:column;line-height:0.95;}
.wordmark .name{
  font-family:'Sora';font-weight:800;font-size:32px;letter-spacing:-0.02em;
  background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.wordmark .tag{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.28em;color:var(--bone-dim);text-transform:uppercase;margin-top:2px;}
.navlinks{display:flex;gap:34px;align-items:center;}
.navlinks a{font-size:14.5px;color:var(--bone-dim);transition:color .15s;}
.navlinks a:hover, .navlinks a.active{color:var(--bone);}
.cart-link{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono';font-size:13px;border:1px solid var(--line);padding:8px 13px;border-radius:var(--radius);}
.cart-link:hover{border-color:var(--copper);}
.navtoggle{display:none;background:none;border:0;color:var(--bone);font-size:22px;}

@media (max-width:820px){
  .navlinks{position:fixed;top:0;right:0;height:100vh;width:78%;max-width:320px;
    background:var(--graphite-soft);border-left:1px solid var(--line);
    flex-direction:column;justify-content:flex-start;align-items:flex-start;
    padding:90px 28px;gap:22px;transform:translateX(100%);transition:transform .25s ease;}
  .navlinks.open{transform:translateX(0);}
  .navtoggle{display:block;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:var(--radius);
  font-family:'Inter';font-weight:600;font-size:14px;letter-spacing:0;
  border:1px solid transparent;transition:all .18s;
}
.btn-primary{background:var(--gradient);color:#fff;border-color:transparent;box-shadow:0 8px 20px -8px rgba(37,99,235,.5);}
.btn-primary:hover{box-shadow:0 12px 28px -8px rgba(37,99,235,.65);transform:translateY(-1px);}
.btn-outline{border-color:var(--line);color:var(--bone);background:#fff;}
.btn-outline:hover{border-color:var(--copper);color:var(--copper);}
.btn:disabled{opacity:.4;cursor:not-allowed;}

/* ---------- Hero ---------- */
.hero{padding:100px 0 76px;position:relative;overflow:hidden;background:#070B14;}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center;position:relative;z-index:1;}
.hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.05;margin-bottom:22px;color:#F3F7FF;}
.hero h1 em{
  font-style:normal;font-weight:800;
  background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lead{font-size:17.5px;color:#AEBBD4;max-width:46ch;margin-bottom:32px;}
.hero-actions{display:flex;gap:14px;margin-bottom:36px;flex-wrap:wrap;}
.hero .eyebrow{color:#7DD3FC;}
.hero .btn-outline{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff;}
.hero .btn-outline:hover{border-color:rgba(255,255,255,.5);color:#fff;}
.trust-row{display:flex;gap:26px;flex-wrap:wrap;}
.trust-row .item{font-family:'JetBrains Mono';font-size:12px;color:#AEBBD4;display:flex;align-items:center;gap:7px;}
.trust-row .dot{width:5px;height:5px;background:var(--teal);border-radius:50%;}

/* ---------- COA card (signature element) ---------- */
.coa{
  background:#fff;
  border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);
  padding:28px 28px 24px;
  position:relative;
  overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(15,23,41,.25);
}
.coa::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--gradient);
}
.logo-icon{display:block;flex-shrink:0;}
.coa-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;}
.coa-head .label{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.14em;color:var(--bone-dim);text-transform:uppercase;}
.coa-head .pname{font-family:'Sora';font-size:25px;font-weight:700;margin-top:4px;}
.coa-stamp{
  font-family:'JetBrains Mono';font-size:11px;letter-spacing:.1em;color:#fff;
  background:var(--gradient);padding:5px 11px;border-radius:20px;
  transform:rotate(3deg);white-space:nowrap;
}
.coa-rows{border-top:1px solid var(--line);padding-top:14px;}
.coa-row{
  display:flex;justify-content:space-between;padding:8px 0;
  font-family:'JetBrains Mono';font-size:12.5px;
  border-bottom:1px solid var(--graphite-soft);
}
.coa-row:last-child{border-bottom:0;}
.coa-row .k{color:var(--bone-dim);}
.coa-row .v{color:var(--bone);font-weight:500;}

/* ---------- Sections ---------- */
section{padding:76px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:20px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(26px,3vw,34px);}
.section-head p{color:var(--bone-dim);max-width:48ch;}

/* ---------- Product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid{grid-template-columns:1fr;}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s, transform .2s, box-shadow .2s;
  box-shadow:0 4px 16px -8px rgba(15,23,41,.08);
}
.card:hover{border-color:var(--copper-soft);transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(37,99,235,.28);}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;}
.card-cat{font-family:'JetBrains Mono';font-size:10.5px;color:var(--teal);text-transform:uppercase;letter-spacing:.1em;}
.card-badge{font-family:'JetBrains Mono';font-size:10px;background:var(--gradient);color:#fff;padding:3px 9px;border-radius:20px;letter-spacing:.05em;text-transform:uppercase;}
.vial{
  height:196px;display:flex;align-items:center;justify-content:center;
}
.card h3{font-size:19px;margin-bottom:2px;}
.card .full{font-size:12.5px;color:var(--bone-dim);margin-bottom:6px;}
.card .meta{display:flex;gap:14px;font-family:'JetBrains Mono';font-size:11.5px;color:var(--bone-dim);}
.card .price-row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);}
.card .price{font-family:'Sora';font-size:21px;font-weight:500;}
.card .btn{padding:9px 16px;font-size:11.5px;}

/* ---------- Feature strip ---------- */
.strip{background:var(--graphite-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.strip-item{padding:40px 32px;border-right:1px solid var(--line);}
.strip-item:last-child{border-right:0;}
.strip-item .k{font-family:'JetBrains Mono';font-size:11px;color:var(--copper);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;}
.strip-item h4{font-size:17px;margin-bottom:8px;}
.strip-item p{font-size:14px;color:var(--bone-dim);margin:0;}
@media(max-width:820px){.strip-grid{grid-template-columns:1fr;}.strip-item{border-right:0;border-bottom:1px solid var(--line);}}

/* ---------- RUO banner ---------- */
.ruo-banner{
  background:var(--graphite);border:1px solid var(--teal);border-radius:var(--radius);
  padding:22px 26px;display:flex;gap:16px;align-items:flex-start;
}
.ruo-banner .tag{font-family:'JetBrains Mono';font-size:11px;background:var(--teal);color:var(--bone);padding:4px 9px;border-radius:2px;letter-spacing:.06em;white-space:nowrap;margin-top:2px;}
.ruo-banner p{margin:0;font-size:13.5px;color:var(--bone-dim);}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:56px 0 30px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;}
.foot-col h5{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:14px;}
.foot-col a{display:block;font-size:14px;color:var(--bone-dim);margin-bottom:10px;}
.foot-col a:hover{color:var(--bone);}
.foot-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.foot-bottom p{font-size:12px;color:var(--bone-dim);margin:0;max-width:70ch;}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;}}

/* ---------- Generic page header ---------- */
.page-hero{padding:60px 0 40px;border-bottom:1px solid var(--line);}
.page-hero h1{font-size:clamp(28px,4vw,40px);}
.page-hero p{color:var(--bone-dim);max-width:60ch;}

/* ---------- Filters (shop page) ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px;}
.filter-btn{
  font-family:'JetBrains Mono';font-size:12px;padding:8px 14px;border:1px solid var(--line);
  border-radius:var(--radius);color:var(--bone-dim);background:none;
}
.filter-btn.active,.filter-btn:hover{border-color:var(--copper);color:var(--bone);}

/* ---------- Product detail ---------- */
.pd-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;padding:60px 0;}
@media(max-width:900px){.pd-grid{grid-template-columns:1fr;gap:40px;}}
.pd-visual{position:sticky;top:100px;align-self:start;}
.qty-row{display:flex;align-items:center;gap:14px;margin:24px 0;}
.batch-select-row{margin:18px 0 6px;}
.batch-select-label{
  display:block;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bone-dim);margin-bottom:8px;
}
#batch-select{
  width:100%;max-width:360px;padding:12px 14px;border-radius:var(--radius);border:1px solid var(--line);
  background:#fff;color:var(--bone);font-family:'Inter';font-size:14.5px;font-weight:500;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%235B6B84' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  cursor:pointer;transition:border-color .15s;
}
#batch-select:hover{border-color:var(--copper-soft);}
#batch-select:focus{outline:2px solid var(--copper);outline-offset:1px;}
.qty-box{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);}
.qty-box button{background:none;border:0;color:var(--bone);width:38px;height:40px;font-size:16px;}
.qty-box input{width:44px;text-align:center;background:none;border:0;color:var(--bone);font-family:'JetBrains Mono';}
.desc{color:var(--bone-dim);font-size:15px;margin:22px 0;}

/* ---------- Cart page ---------- */
.cart-table{width:100%;border-collapse:collapse;margin-bottom:30px;}
.cart-table th{text-align:left;font-family:'JetBrains Mono';font-size:11px;color:var(--bone-dim);text-transform:uppercase;letter-spacing:.08em;padding-bottom:12px;border-bottom:1px solid var(--line);}
.cart-table td{padding:16px 0;border-bottom:1px solid var(--line);vertical-align:middle;}
.cart-item-name{font-family:'Sora';font-weight:500;}
.cart-item-meta{font-size:12px;color:var(--bone-dim);}
.remove-btn{font-family:'JetBrains Mono';font-size:11px;color:var(--bone-dim);border:0;background:none;text-decoration:underline;}
.remove-btn:hover{color:var(--copper);}
.cart-summary{max-width:380px;margin-left:auto;}
.sum-row{display:flex;justify-content:space-between;padding:9px 0;font-size:14px;color:var(--bone-dim);}
.sum-row.total{color:var(--bone);font-size:18px;font-family:'Sora';font-weight:500;border-top:1px solid var(--line);margin-top:8px;padding-top:16px;}
.agree{display:flex;gap:10px;align-items:flex-start;margin:22px 0;font-size:13px;color:var(--bone-dim);}
.pay-buttons{display:flex;flex-direction:column;gap:16px;}
.pay-option{border:1px solid var(--line);border-radius:var(--radius);padding:14px;}
.pay-label{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:10px;}
#paypal-venmo-container, #cash-app-pay-button{min-height:45px;}
.agree input{margin-top:3px;}
.empty-cart{text-align:center;padding:80px 0;color:var(--bone-dim);}

/* ---------- Legal pages ---------- */
.legal-body{max-width:74ch;padding-bottom:80px;}
.legal-body h2{margin-top:44px;font-size:20px;}
.legal-body p, .legal-body li{color:var(--bone-dim);font-size:15px;}
.legal-body ul{padding-left:20px;}
.updated{font-family:'JetBrains Mono';font-size:12px;color:var(--bone-dim);}
