.active{
    color:#b38b2d;
}
.title{font-size:56px;text-align:center;margin:40px 0;font-family:'Bebas Neue',sans-serif}
.grid{display:flex;justify-content:center;gap:20px;max-width:1600px;margin:0 auto}
.second{margin-top:50px;margin-bottom:60px}
.card{width:300px;background:#0d1215;border:1px solid rgba(255,255,255,.05);padding:28px 22px;text-align:center}
.card h2{font-size:28px;margin:0 0 20px}
.price{font-size:74px;font-weight:800;color:#31c7ba;line-height:1}
.old{text-decoration:line-through;font-size:26px;margin:8px 0 20px}
ul{list-style:none;padding:0;margin:0}
li{
    padding:10px 0;
    border-top:1px solid var(--gold-line);
    font-size:15px;
    line-height:1.4;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:18px;
    padding:0 20px;

    border-radius:6px;
    text-decoration:none;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn:hover{
    transform:translateY(-2px);
}

.red{
    background:#101518;
    color:#edf7f4;
    border:1px solid rgba(2,166,180,.45);
}

.red:hover{
    border-color:rgba(2,166,180,.75);
}

.teal{
    background:#101518;
    color:#edf7f4;
    border:1px solid rgba(2,166,180,.45);
}

.teal:hover{
    border-color:rgba(2,166,180,.75);
}
.link{display:block;color:#23b5c7;text-decoration:none;margin-top:18px;font-size:14px}
@media(max-width:1300px){.grid{flex-wrap:wrap}.card{width:340px}}
@media(max-width:700px){.title{font-size:42px}.logo{height:48px}.card{width:100%;max-width:360px}}

.shop-btn:hover{
    filter:brightness(1.05);
}

.card{
    width:300px;
    background:#0d1215;
    border:1px solid var(--gold-border);
    padding:28px 22px;
    text-align:center;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.card:hover{
    transform:translateY(-4px);
    border-color:rgba(179,139,45,.75);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.card:hover{
    background:linear-gradient(
        145deg,
        rgba(179,139,45,.05),
        rgba(255,255,255,.01)
    );
}

.card.recommended {
  border-color: rgba(179, 139, 45, 0.35);
}

.card.recommended:hover {
  border-color: rgba(179, 139, 45, 0.65);
}

.price {
  min-height: 90px;
}

.old {
  opacity: 0.75;
  text-decoration-thickness: 2px;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(2,166,180,0.55);
  background: linear-gradient(
    145deg,
    rgba(2,166,180,0.10),
    rgba(255,255,255,0.02)
  );
  box-shadow: 0 18px 42px rgba(0,0,0,0.24);
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:18px;
    padding:0 20px;

    border-radius:6px;
    text-decoration:none;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.btn:hover{
    transform:translateY(-2px);
}

.link {
  display: block;
  color: #23b5c7;
  text-decoration: none;
  margin-top: 18px;
  font-size: 14px;
  transition: color 160ms ease;
}

.link:hover {
  color: #52d6e5;
}

.logo {
  transition: opacity 180ms ease;
}

.logo:hover {
  opacity: 0.9;
}

.notice {
  max-width: 900px;
  margin: 60px auto;
  padding: 30px;
  border: 1px solid rgba(179,139,45,0.2);
  background: rgba(179,139,45,0.04);
  border-radius: 8px;
}

.card h2{
    font-family:"Barlow Condensed", sans-serif;
    font-size:1.5rem;
    font-weight:300;
    letter-spacing:0.3px;
    margin:0 0 20px;
    color:#b38b2d;
}

.card h2{
    position:relative;
    padding-bottom:12px;
}

.card h2::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:40px;
    height:1px;
    background:rgba(179,139,45,.25);
    transform:translateX(-50%);
}

.card.year::before{
    content:"1 YEAR LICENSE";
    display:block;
    margin:-28px -22px 20px;
    padding:6px 0;
    font-size:10px;
    letter-spacing:2px;
    text-align:center;
    color:#050708;
    background:#9a7725;
}

.card.month::before{
    content:"3 MONTH LICENSE";
    display:block;
    margin:-28px -22px 20px;
    padding:6px 0;
    font-size:10px;
    letter-spacing:2px;
    text-align:center;
    color:#050708;
    background:#9a7725;
}

/* =====================================================
   HOMEPAGE STYLE BUTTONS
===================================================== */

/* =====================================================
   HOMEPAGE MATCHING BUTTONS
===================================================== */

.download-btn{
    min-width:140px;
    min-height:48px;

    font-size:.8rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;

    color:#edf7f4;
    background:transparent;

    border:1px solid #1cc8b7;
}

.download-btn:hover{
    transform:translateY(-2px);
    border-color:#31c7ba;
}

.shop-btn{
    min-width:140px;
    min-height:48px;

    font-size:.8rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;

    color:#edf7f4;
    background:transparent;

    border:1px solid #d63352;
}

.shop-btn:hover{
    transform:translateY(-2px);
    border-color:#e04866;
}

.contact-btn{
    min-width:140px;
    min-height:48px;

    font-size:.8rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;

    color:#000;
    background:#d9b33a;

    border:none;
}

.contact-btn:hover{
    transform:translateY(-2px);
    background:#e0bc4c;
}

h1.title{
    max-width: none;
    width: 100%;
    text-align: center;
    margin: 40px auto;

    font-size: clamp(2rem, 4vw, 1rem);
}

/* ==========================================
   SELECTIVE TOOL PRICING POPUP
========================================== */

.pricing-modal{
    position:fixed;
    inset:0;

    display:none;

    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.82);

    z-index:99999;
}

.pricing-modal.show{
    display:flex;
}

.pricing-modal-content{
    width:min(900px,92vw);

    max-height:85vh;

    overflow:auto;

    background:#0d1215;

    border:1px solid var(--gold-border);

    border-radius:12px;

    padding:2rem;
}

.pricing-close{
    float:right;

    border:none;
    background:none;

    color:#fff;

    font-size:2rem;

    cursor:pointer;
}

.pricing-table{
    width:100%;
    border-collapse:collapse;
}

.pricing-table th,
.pricing-table td{
    padding:12px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.pricing-table th{
    color:#b38b2d;
    text-align:left;
}



#pricingTitle{
    font-size:1rem;
    font-weight:700;

    color:#b38b2d;

    margin-bottom:1.5rem;

    text-align:center;
}