/* ══════════════════════════════════════
       PEPTIDE CALCULATOR PAGE
    ══════════════════════════════════════ */
    .calc-page { position: relative; z-index: 1; padding: 120px 5% 80px; max-width: 1080px; margin: 0 auto; }

    .calc-head { text-align: center; margin-bottom: 40px; }
    .calc-head .section-title { margin-bottom: 12px; }
    .calc-head .section-sub { margin: 0 auto; }

    /* in-page tabs */
    .calc-tabs {
      display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
      margin-bottom: 36px;
    }
    .calc-tab {
      padding: 11px 22px; border-radius: 100px; cursor: pointer;
      border: 1px solid var(--border); background: var(--card); backdrop-filter: blur(20px);
      color: var(--text-muted); font-size: 14px; font-weight: 600; font-family: 'Inter', sans-serif;
      transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px;
    }
    .calc-tab:hover { color: var(--text); border-color: rgba(201, 162, 74,0.3); }
    .calc-tab.active { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #0a0a0a; border-color: transparent; box-shadow: 0 6px 20px rgba(201, 162, 74,0.3); }

    .calc-panel { display: none; }
    .calc-panel.active { display: block; animation: fadeInUp 0.5s ease both; }

    .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }

    .calc-card {
      border: 1px solid var(--border); border-radius: 22px;
      background: var(--card); backdrop-filter: blur(20px); padding: 28px;
    }
    .calc-card h3 {
      font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 700;
      margin-bottom: 6px; display: flex; align-items: center; gap: 9px;
    }
    .calc-card .calc-card-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 22px; line-height: 1.6; }

    .calc-field { margin-bottom: 18px; }
    .calc-field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
    .calc-input-row { display: flex; gap: 10px; }
    .calc-input-row .form-input { flex: 1; }
    .calc-input-row .form-select { flex: 0 0 110px; }

    .calc-hint { font-size: 12px; color: var(--text-muted); margin-top: 7px; line-height: 1.5; }

    /* result panel */
    .calc-result {
      border: 1px solid rgba(201, 162, 74,0.25);
      background: linear-gradient(160deg, rgba(201, 162, 74,0.06), rgba(166, 127, 61,0.05));
      border-radius: 22px; padding: 28px;
    }
    .calc-result h3 { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 9px; }

    .calc-readout { display: flex; flex-direction: column; gap: 14px; }
    .calc-readrow {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px; border-radius: 14px;
      background: rgba(0,0,0,0.045); border: 1px solid var(--border);
    }
    .calc-readlabel { font-size: 13px; color: var(--text-muted); font-weight: 500; }
    .calc-readval { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 800; color: var(--accent); }
    .calc-readrow.hero { background: rgba(201, 162, 74,0.08); border-color: rgba(201, 162, 74,0.35); }
    .calc-readrow.hero .calc-readval { font-size: 28px; }
    .calc-readrow.hero .calc-readlabel { color: var(--text); font-weight: 600; }
    .calc-readval small { font-size: 13px; font-weight: 600; color: var(--text-muted); }

    /* syringe visual */
    .syringe-visual { margin-top: 22px; }
    .syringe-bar {
      position: relative; height: 34px; border-radius: 100px;
      background: rgba(0,0,0,0.09); border: 1px solid var(--border); overflow: hidden;
    }
    .syringe-fill {
      position: absolute; left: 0; top: 0; bottom: 0;
      background: linear-gradient(90deg, var(--accent), var(--accent3));
      border-radius: 100px; width: 0%; transition: width 0.5s cubic-bezier(.22,1,.36,1);
    }
    .syringe-scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--text-muted); }
    .syringe-cap { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 8px; }

    /* blend rows */
    .blend-row {
      display: grid; grid-template-columns: 1fr 120px 40px; gap: 10px; align-items: center;
      margin-bottom: 12px;
    }
    .blend-row .form-input { width: 100%; }
    .blend-remove {
      width: 40px; height: 44px; border-radius: 10px; cursor: pointer;
      background: transparent; border: 1px solid rgba(248,113,113,0.25); color: rgba(248,113,113,0.8);
      font-size: 17px; transition: all 0.2s;
    }
    .blend-remove:hover { background: rgba(248,113,113,0.08); border-color: #f87171; color: #f87171; }
    .blend-add {
      width: 100%; padding: 12px; margin-top: 4px; border-radius: 12px;
      background: rgba(201, 162, 74,0.06); border: 1px dashed rgba(201, 162, 74,0.35);
      color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer; font-family: 'Inter', sans-serif;
      transition: all 0.2s;
    }
    .blend-add:hover { background: rgba(201, 162, 74,0.12); }

    .blend-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
    .blend-preset {
      padding: 8px 14px; border-radius: 100px; cursor: pointer;
      background: transparent; border: 1px solid var(--border); color: var(--text);
      font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; transition: all 0.18s;
    }
    .blend-preset:hover { border-color: var(--accent); color: var(--accent); }
    .blend-preset.active { background: rgba(201, 162, 74,0.12); border-color: var(--accent); color: var(--accent); }
    .blend-preset.soon { opacity: 0.55; cursor: not-allowed; }
    .blend-preset.soon span { font-size: 10px; font-weight: 600; opacity: 0.8; margin-left: 4px; }
    .blend-preset.soon:hover { border-color: var(--border); color: var(--text); }

    .blend-result-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 13px 16px; border-radius: 12px; margin-bottom: 10px;
      background: rgba(0,0,0,0.045); border: 1px solid var(--border);
    }
    .blend-result-name { font-size: 14px; font-weight: 700; }
    .blend-result-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .blend-result-dose { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 800; color: var(--accent3); }

    .calc-note {
      margin-top: 26px; padding: 15px 18px; border-radius: 14px;
      background: rgba(248,113,113,0.05); border: 1px solid rgba(248,113,113,0.18);
      font-size: 12.5px; line-height: 1.7; color: var(--text-muted);
    }
    .calc-note strong { color: #f87171; }

    /* pens coming soon */
    .pens-soon {
      text-align: center; padding: 70px 36px;
      border: 1px solid var(--border); border-radius: 28px;
      background: linear-gradient(160deg, rgba(166, 127, 61,0.07), rgba(201, 162, 74,0.04));
      backdrop-filter: blur(20px); position: relative; overflow: hidden;
    }
    .pens-soon::before {
      content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
      background: conic-gradient(from 0deg, transparent, rgba(166, 127, 61,0.05), transparent, rgba(201, 162, 74,0.05), transparent);
      animation: rotate 18s linear infinite;
    }
    .pens-soon > * { position: relative; z-index: 1; }
    .pens-badge {
      display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
      background: rgba(166, 127, 61,0.12); border: 1px solid rgba(166, 127, 61,0.3);
      border-radius: 100px; padding: 7px 18px; font-size: 13px; font-weight: 700; color: #d9bb72;
    }
    .pens-icon { font-size: 64px; margin-bottom: 18px; filter: drop-shadow(0 0 24px rgba(166, 127, 61,0.4)); }
    .pens-soon h2 { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 800; margin-bottom: 14px; }
    .pens-soon p { color: var(--text-muted); font-size: 16px; line-height: 1.7; max-width: 480px; margin: 0 auto 28px; }
    .pens-features { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
    .pens-feature {
      display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text);
      background: rgba(0,0,0,0.045); border: 1px solid var(--border); border-radius: 100px; padding: 9px 16px;
    }
    .pens-notify { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; }
    .pens-notify .email-input { flex: 1; }

    @media (max-width: 760px) {
      .calc-grid { grid-template-columns: 1fr; }
      .blend-row { grid-template-columns: 1fr 100px 40px; }
      .pens-notify { flex-direction: column; }
    }