@import url('/responsive-mobile.css');
:root{
    --bg:#05060a;
    --card:#0b0f17;
    --text:#ffffff;
    --muted:#98a2b3;

    --purple:#a855f7;
    --blue:#3b82f6;
    --cyan:#38bdf8;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    color:var(--text);
    background:
      radial-gradient(circle at 20% 20%, rgba(168,85,247,.20), transparent 35%),
      radial-gradient(circle at 80% 15%, rgba(59,130,246,.15), transparent 35%),
      #05060a;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:54px 54px;
    mask-image:radial-gradient(circle at center, black, transparent 75%);
    opacity:.35;
}

/* ---------- NAV ---------- */

.nav-ribbon{
    position:sticky;
    top:0;
    z-index:999;
    padding:0 !important;
    background:rgba(6,10,18,.75);
    backdrop-filter:blur(24px);
    border-bottom:1px solid rgba(255,255,255,.05);
}

.nav-pill{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    border-radius:20px;
    color:#cbd5e1;
    text-decoration:none;
    transition:.3s;
}

.nav-pill:hover{
    color:white;
}

.nav-pill.active{
    color:white;
    border:2px solid transparent;
    background:
      linear-gradient(#0b0f17,#0b0f17) padding-box,
      linear-gradient(90deg,#a855f7,#3b82f6) border-box;
    box-shadow:
      0 0 20px rgba(168,85,247,.4),
      0 0 35px rgba(59,130,246,.25);
}

/* ---------- HERO ---------- */

.hero{
    text-align:center;
    padding:75px 20px 60px;
    position:relative;
}

.hero::before{
    content:"";
    position:absolute;
    left:50%;
    top:-360px;
    width:900px;
    height:900px;
    transform:translateX(-50%);
    background:radial-gradient(circle, rgba(168,85,247,.35), transparent 65%);
    filter:blur(50px);
    z-index:-1;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 20px;
    border-radius:999px;
    color:#d8b4fe;
    background:rgba(168,85,247,.12);
    border:1px solid rgba(168,85,247,.4);
    margin-bottom:30px;
    letter-spacing:.14em;
    font-size:12px;
    font-weight:700;
}

.hero h1{
    font-size:72px;
    font-weight:800;
    line-height:1.05;
    margin-bottom:24px;
    letter-spacing:-.06em;
    text-shadow:0 0 55px rgba(168,85,247,.22);
}

.hero p{
    color:#9ca3af;
    font-size:20px;
    max-width:800px;
    margin:auto;
}



/* ---------- PAGE TEMPLATE PRIMITIVES ---------- */

.page-shell{
    position:relative;
    padding:72px 0 90px;
    background:transparent;
}

.page-shell::before{
    content:"";
    position:absolute;
    left:50%;
    top:-360px;
    width:900px;
    height:900px;
    transform:translateX(-50%);
    background:radial-gradient(circle, rgba(168,85,247,.35), transparent 65%);
    filter:blur(50px);
    z-index:-1;
    pointer-events:none;
}

.page-container{
    max-width:80rem;
    margin:0 auto;
    padding:0 2rem;
}

.page-hero{
    text-align:center;
    margin-bottom:36px;
}

.page-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 20px;
    border-radius:999px;
    color:#d8b4fe;
    background:rgba(168,85,247,.12);
    border:1px solid rgba(168,85,247,.4);
    margin-bottom:28px;
    letter-spacing:.14em;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}

.page-title{
    color:#fff;
    font-size:68px;
    font-weight:900;
    line-height:1.02;
    letter-spacing:-.06em;
    text-shadow:0 0 55px rgba(168,85,247,.22);
}

.page-title span{
    color:var(--cyan);
}

.page-subtitle{
    color:#9ca3af;
    font-size:20px;
    line-height:1.55;
    max-width:860px;
    margin:22px auto 0;
}

.section-card{
    position:relative;
    overflow:hidden;
    margin-top:28px;
    padding:28px;
    border-radius:30px;
    background:rgba(10,15,25,.82);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(22px);
    box-shadow:0 20px 70px rgba(0,0,0,.18);
}

.section-card::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:3px;
    background:linear-gradient(90deg,var(--purple),var(--blue),var(--cyan));
}

@media (max-width:768px){
    .page-shell{
        padding:56px 0 72px;
    }

    .page-container{
        padding:0 1.25rem;
    }

    .page-title{
        font-size:52px;
    }

    .page-subtitle{
        font-size:17px;
    }
}

@media (max-width:520px){
    .page-shell{
        padding:42px 0 58px;
    }

    .page-container{
        padding:0 .9rem;
    }

    .page-title{
        font-size:42px;
    }

    .page-badge{
        max-width:100%;
        white-space:normal;
        line-height:1.35;
    }

    .section-card{
        padding:22px 18px;
        border-radius:24px;
    }
}

/* ---------- DASHBOARD TILES ---------- */

.dashboard-tile{
    display:flex;
    align-items:center;
    gap:16px;
    min-height:118px;
    padding:24px;
    border-radius:28px;
    text-decoration:none;
    background:rgba(10,15,25,.72);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 70px rgba(0,0,0,.18);
    backdrop-filter:blur(20px);
    transition:.3s ease;
}

.dashboard-link:hover,
.dashboard-tile:hover{
    transform:translateY(-4px);
    border-color:rgba(168,85,247,.42);
    box-shadow:
      0 0 38px rgba(168,85,247,.14),
      0 0 60px rgba(59,130,246,.10);
}

.tile-icon{
    width:48px;
    height:48px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#d8b4fe;
    background:rgba(168,85,247,.12);
    border:1px solid rgba(168,85,247,.24);
}

.tile-label{
    color:#98a2b3;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.tile-number{
    color:white;
    font-size:28px;
    font-weight:800;
    line-height:1.1;
    margin-top:4px;
}

/* ---------- SEARCH ---------- */

.glass-toolbar{
    background:rgba(10,15,25,.75);
    backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:30px;
    padding:30px;
}

.glass-input{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    color:white;
    border-radius:18px;
}

.glass-input:focus{
    outline:none;
    border-color:#3b82f6;
    box-shadow:
      0 0 0 2px rgba(59,130,246,.2),
      0 0 25px rgba(59,130,246,.25);
}

.glass-input::placeholder{
    color:#64748b;
}

select.glass-input{
    background-color:rgba(255,255,255,.03);
}

/* ---------- CARDS ---------- */

.peptide-card{
    position:relative;
    isolation:isolate;
    background:rgba(10,15,25,.85);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:30px;
    overflow:hidden;
    transition:.35s;
}

.peptide-card::before{
    content:"";
    position:absolute;
    inset:-1px;
    z-index:-1;
    opacity:0;
    border-radius:30px;
    background:linear-gradient(135deg, rgba(168,85,247,.35), rgba(59,130,246,.25), rgba(56,189,248,.18));
    transition:.35s ease;
}

.peptide-card:hover{
    transform:translateY(-8px);
    border-color:rgba(59,130,246,.45);
    box-shadow:
      0 0 40px rgba(59,130,246,.18),
      0 0 80px rgba(168,85,247,.12);
}

.peptide-card:hover::before{
    opacity:1;
}

.card-title{
    font-size:1.5rem;
    font-weight:700;
}

.method-icon{
    position:relative;
    cursor:help;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(255,255,255,.05);
}

.method-icon i{
    color:#38bdf8;
}

.method-icon:hover::after{
    content:attr(data-tooltip);
    position:absolute;
    bottom:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);
    background:#111827;
    color:white;
    font-size:12px;
    padding:6px 9px;
    border-radius:10px;
    white-space:nowrap;
    z-index:20;
    box-shadow:0 12px 30px rgba(0,0,0,.28);
}

/* ---------- GLOW BAR ---------- */

.card-glow{
    height:3px;
    width:100%;
    background:linear-gradient(90deg,#a855f7,#3b82f6,#38bdf8);
}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{
    background:#202838;
    border-radius:20px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width:768px){
    .hero{
        padding:72px 20px 42px;
    }

    .hero h1{
        font-size:52px;
    }

    .hero p{
        font-size:17px;
    }

    .nav-pill{
        padding:12px 16px;
        border-radius:18px;
    }
}

@media (max-width:520px){
    .hero h1{
        font-size:42px;
    }

    .glass-toolbar,
    .dashboard-tile{
        border-radius:22px;
    }
}

/* ---------- BACK TO TOP ---------- */

.back-to-top{
    position:fixed;
    right:24px;
    bottom:24px;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    color:white;
    background:linear-gradient(135deg,#a855f7,#3b82f6);
    box-shadow:
      0 14px 36px rgba(59,130,246,.28),
      0 0 28px rgba(168,85,247,.22);
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(14px);
    transition:
      opacity .25s ease,
      visibility .25s ease,
      transform .25s ease,
      box-shadow .25s ease;
    z-index:1200;
    -webkit-tap-highlight-color:transparent;
}

.back-to-top.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible{
    transform:translateY(-2px);
    box-shadow:
      0 18px 42px rgba(59,130,246,.34),
      0 0 34px rgba(168,85,247,.30);
    outline:none;
}

.back-to-top i{
    font-size:18px;
}

@media(max-width:520px){
    .back-to-top{
        right:14px;
        bottom:14px;
        width:48px;
        height:48px;
        border-radius:16px;
    }
}
/* Match peptide and price-index pages to the homepage width */
.protocol-shell .max-w-6xl,
.vendor-shell .max-w-6xl,
.price-shell .max-w-6xl {
  max-width: 80rem !important; /* Tailwind max-w-7xl */
}