:root{
    /* Brand palette derived from the alopeptides logo (blue #5082FF -> violet #7E4AF4) */
    --pink-600:#6B5CF6; --pink-700:#5942D6; --pink-50:#F3F2FF; --pink-100:#ECE9FF; --pink-25:#F8F7FF;
    --brand-blue:#5B86FF; --brand-violet:#8257F6; --brand-grad:linear-gradient(135deg,#5B86FF 0%,#8257F6 100%);
    --ink-900:#111118; --ink-700:#2A2A33; --ink-500:#6B7280; --ink-400:#9AA0A6;
    --line:#E5E2F7; --line-2:#ECEAF4;
    --green-50:#E8F7EE; --green-700:#229A56;
    --radius-card:16px; --radius-btn:8px;
    --shadow-sm:0 1px 2px rgba(17,17,24,.04);
    --shadow-card:0 1px 0 rgba(17,17,24,.02), 0 4px 14px rgba(17,17,24,.05);
  }
  .lw-alo{ background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{ font-family:'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--ink-900); background:#fff; -webkit-font-smoothing:antialiased; }
  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }
  button{ font-family:inherit; cursor:pointer; }

  .container{ max-width:1200px; margin:0 auto; padding:0 24px; }

  /* Trust bar */
  .topbar{ background:var(--pink-50); border-bottom:1px solid #E7E3FA; }
  .topbar .row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:10px 0; align-items:center; font-size:13px; color:var(--ink-700); }
  .topbar .item{ display:flex; align-items:center; gap:8px; justify-content:center; }
  .topbar .item:first-child{ justify-content:flex-start; }
  .topbar .item:last-child{ justify-content:flex-end; }
  .topbar svg{ color:var(--pink-600); }

  /* Header */
  .header{ background:#fff; position:sticky; top:0; z-index:50; border-bottom:1px solid #ECEAF6; }
  .header .row{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:24px; }
  .brand{ display:flex; align-items:center; gap:10px; font-size:22px; font-weight:700; color:var(--ink-900); letter-spacing:-.01em; }
  .brand .logo-mark{ width:36px; height:36px; }
  .brand .brand-logo{ height:54px; width:auto; display:block; }
  footer .brand .brand-logo{ height:44px; }
  .nav{ display:flex; align-items:center; gap:32px; font-size:15px; color:var(--ink-700); font-weight:500; }
  .nav a{ display:inline-flex; align-items:center; gap:4px; }
  .nav a:hover, .nav a.active{ color:var(--pink-600); }
  .nav .caret{ width:14px; height:14px; opacity:.6; }
  .header-actions{ display:flex; align-items:center; gap:18px; color:var(--ink-700); }
  .header-actions button, .header-actions .act{ background:transparent; border:0; padding:6px; color:inherit; position:relative; display:inline-flex; align-items:center; }
  .header-actions .act:hover{ color:var(--pink-600); }
  .cart-badge{ position:absolute; top:-2px; right:-2px; background:var(--pink-600); color:#fff; font-size:10px; min-width:16px; height:16px; border-radius:8px; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; font-weight:600; }

  /* Page hero */
  .page-hero{ background:linear-gradient(180deg, #F8F7FF, #ECE9FF); padding:56px 0 48px; border-bottom:1px solid #E7E3FA; position:relative; overflow:hidden; }
  .crumbs{ font-size:13px; color:var(--ink-500); display:inline-flex; gap:8px; align-items:center; margin-bottom:14px; }
  .crumbs a:hover{ color:var(--pink-600); }
  .crumbs svg{ opacity:.5; }
  .page-hero h1{ font-size:48px; line-height:1.05; font-weight:800; letter-spacing:-.02em; margin:0 0 14px; }
  .page-hero h1 em{ font-style:normal; color:var(--pink-600); }
  .page-hero p{ font-size:16px; color:var(--ink-700); max-width:680px; margin:0 0 22px; line-height:1.6; }
  .badge{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); color:var(--ink-900); font-size:13px; font-weight:500; padding:8px 14px; border-radius:999px; box-shadow:var(--shadow-sm); }
  .hero-stats{ display:grid; grid-template-columns:repeat(3,auto); gap:36px; margin-top:32px; max-width:880px; }
  .hero-stats .s{ display:flex; align-items:flex-start; gap:10px; }
  .hero-stats .ic{ width:32px; height:32px; color:var(--pink-600); display:inline-flex; align-items:center; justify-content:center; }
  .hero-stats b{ display:block; font-size:15px; color:var(--ink-900); }
  .hero-stats small{ display:block; font-size:12px; color:var(--ink-500); margin-top:2px; }

  /* Toolbar */
  .toolbar{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 0; flex-wrap:wrap; }
  .toolbar .left{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .search{ position:relative; }
  .search input{ width:320px; padding:11px 16px 11px 40px; border:1px solid var(--line); border-radius:999px; font-family:inherit; font-size:14px; background:#fff; color:var(--ink-900); }
  .search input:focus{ outline:none; border-color:var(--pink-600); }
  .search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-400); }
  .filter-chips{ display:flex; gap:8px; flex-wrap:wrap; }
  .chip{ padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:13px; font-weight:500; color:var(--ink-700); }
  .chip.active{ background:var(--pink-600); border-color:var(--pink-600); color:#fff; }
  .count{ font-size:14px; color:var(--ink-500); }

  /* COA grid */
  .coa-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:8px 0 64px; }
  @media (max-width: 1024px){ .coa-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width: 560px){ .coa-grid{ grid-template-columns:1fr; } }
  .coa-card{ background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-card); padding:20px; display:flex; flex-direction:column; gap:14px; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
  .coa-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:#C9C2F4; }
  .coa-thumb{ background:linear-gradient(180deg,#F8F7FF,#ECE9FF); border-radius:12px; height:160px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .coa-thumb .vial{ width:78px; height:140px; position:relative; filter:drop-shadow(0 8px 14px rgba(107,92,246,.18)); }
  .coa-thumb .vial .cap{ width:62px; height:14px; background:var(--pink-600); border-radius:6px 6px 3px 3px; margin:0 auto; position:relative; z-index:2; }
  .coa-thumb .vial .cap::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:5px; background:linear-gradient(180deg,#bdbdc4,#8b8b94); border-radius:1px; }
  .coa-thumb .vial .neck{ width:46px; height:6px; background:#cfcfd6; margin:0 auto; }
  .coa-thumb .vial .body{ width:72px; height:108px; margin:0 auto; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,235,242,.95)); border:1.5px solid #DCD6F4; border-radius:5px; position:relative; overflow:hidden; }
  .coa-thumb .vial .body::before{ content:""; position:absolute; left:5px; top:6px; width:10px; height:55%; background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0)); border-radius:5px; }
  .coa-thumb .vial .label{ position:absolute; top:14px; left:5px; right:5px; text-align:center; }
  .coa-thumb .vial .pname{ color:var(--pink-600); font-weight:700; font-size:10px; line-height:1.05; margin-top:3px; word-break:break-word; }
  .coa-thumb .vial .pmg{ color:var(--ink-500); font-size:8px; margin-top:2px; }
  .coa-thumb .vial .ruse{ position:absolute; left:-1px; right:-1px; bottom:10px; background:#E8334D; color:#fff; font-size:5.5px; font-weight:700; text-align:center; padding:1.5px 0; letter-spacing:.04em; }
  .coa-thumb .verified{ position:absolute; top:10px; right:10px; background:#fff; color:var(--green-700); font-size:10px; font-weight:700; padding:4px 8px; border-radius:999px; display:inline-flex; align-items:center; gap:4px; border:1px solid var(--green-50); }
  .coa-tag{ display:inline-block; align-self:flex-start; font-size:10px; font-weight:700; padding:3px 8px; border-radius:5px; background:var(--pink-100); color:var(--pink-700); letter-spacing:.04em; }
  .coa-name{ font-size:17px; font-weight:700; margin:0; line-height:1.25; color:var(--ink-900); min-height:42px; }
  .coa-meta{ display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--line-2); padding-top:12px; }
  .coa-meta .mrow{ display:flex; justify-content:space-between; align-items:center; font-size:13px; }
  .coa-meta .mrow .k{ color:var(--ink-500); }
  .coa-meta .mrow .v{ color:var(--ink-900); font-weight:600; }
  .coa-meta .mrow .v.good{ color:var(--green-700); }
  .coa-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 14px; background:var(--pink-600); color:#fff; border:0; border-radius:var(--radius-btn); font-weight:600; font-size:14px; margin-top:auto; transition:background .12s ease; text-decoration:none; }
  .coa-btn:hover{ background:var(--pink-700); }
  .coa-btn.secondary{ background:#fff; color:var(--ink-900); border:1px solid var(--line); }
  .coa-btn.secondary:hover{ background:var(--pink-50); border-color:var(--pink-600); color:var(--pink-700); }

  /* Modal */
  .modal-overlay{ position:fixed; inset:0; background:rgba(17,17,24,.6); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:200; padding:24px; }
  .modal-overlay.open{ display:flex; }
  .modal{ background:#fff; border-radius:16px; width:100%; max-width:900px; max-height:92vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 60px rgba(17,17,24,.3); }
  .modal-head{ padding:18px 22px; border-bottom:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; gap:16px; }
  .modal-head h3{ margin:0; font-size:18px; font-weight:700; }
  .modal-head small{ color:var(--ink-500); font-size:13px; display:block; margin-top:2px; }
  .modal-head .close{ width:36px; height:36px; border-radius:8px; border:0; background:transparent; color:var(--ink-500); display:inline-flex; align-items:center; justify-content:center; }
  .modal-head .close:hover{ background:var(--pink-50); color:var(--pink-700); }
  .modal-body{ flex:1; min-height:520px; background:var(--pink-25); }
  .modal-body iframe{ width:100%; height:100%; min-height:520px; border:0; display:block; }
  .modal-foot{ padding:14px 22px; border-top:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:13px; color:var(--ink-500); }
  .modal-foot .actions{ display:flex; gap:8px; }
  .btn-pill{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; font-weight:600; font-size:13px; border:1px solid var(--line); background:#fff; color:var(--ink-900); }
  .btn-pill.primary{ background:var(--pink-600); border-color:var(--pink-600); color:#fff; }
  .btn-pill:hover{ border-color:var(--pink-600); color:var(--pink-700); }
  .btn-pill.primary:hover{ background:var(--pink-700); color:#fff; }

  /* CTA card */
  .cta-card{ background:linear-gradient(120deg, var(--pink-100), #ECE9FF); border-radius:20px; padding:36px 40px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px; margin-bottom:56px; }
  .cta-card h3{ font-size:24px; margin:0 0 6px; font-weight:700; }
  .cta-card p{ margin:0; color:var(--ink-700); font-size:14px; max-width:560px; line-height:1.55; }

  /* Footer */
  footer{ padding:56px 0 24px; border-top:1px solid var(--line-2); margin-top:24px; }
  .foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid var(--line-2); }
  .foot-brand p{ color:var(--ink-500); font-size:13px; line-height:1.6; max-width:240px; margin:14px 0 18px; }
  .foot-socials{ display:flex; gap:14px; color:var(--ink-700); }
  .foot-col h4{ font-size:14px; margin:0 0 14px; font-weight:700; color:var(--ink-900); }
  .foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
  .foot-col a{ color:var(--ink-500); font-size:13px; }
  .foot-col a:hover{ color:var(--pink-600); }
  .foot-help p{ color:var(--ink-500); font-size:13px; margin:0 0 14px; line-height:1.6; max-width:220px; }
  .link-arrow{ display:inline-flex; align-items:center; gap:8px; color:var(--pink-600); font-weight:600; font-size:14px; }
  .foot-bottom{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--ink-500); padding-top:24px; gap:24px; }
  .foot-bottom .links{ display:flex; gap:18px; }