/* THEME */
:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #111;
  --muted: #777;
  --border: #e5e7eb;
  --hover: #f7f7f9;
  --icon: #b5b7bb;
}

[data-theme="dark"] {
  --bg: #0e0f11;
  --card: #15161a;
  --text: #fff;
  --muted: #aaa;
  --border: #2a2b30;
  --hover: #1b1c21;
  --icon: #6f737b;
}

* {
  margin:0; padding:0;
  box-sizing:border-box;
  font-family:'Inter', sans-serif;
}

body {
  background:var(--bg);
  color:var(--text);
  transition:background .3s, color .3s;
}

/* NAV */
nav {
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:92%;
  max-width:1100px;
  padding:14px 24px;
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(18px) saturate(160%);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1000;
}
[data-theme="dark"] nav {
  background:rgba(21,22,26,0.6);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}

.logo {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  text-transform: lowercase;   /* makes AttoZip → attozip */
  cursor: pointer;
}
.logo:hover {
  color:#001B94;
}
.nav-right { display:flex; gap:18px; align-items:center; }
.nav-link { text-decoration:none; font-size:.85rem; color:var(--text); opacity:.7; transition:.2s; }
.nav-link:hover { opacity:1; }
.toggle { cursor:pointer; opacity:.7; }
.toggle:hover { opacity:1; }

/* WRAPPER */
.wrapper {
  width:92%;
  max-width:950px;
  margin:110px auto 60px;
  display:flex;
  gap:32px;
  padding:0 20px;
}

/* CARD */
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  padding:40px 36px;
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:760px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

h2 {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 60px;
}

/* PRICE BLOCK PERFECT LIKE SCREENSHOT */
.price-block {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
}

.price-left {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.price-rupee {
    font-size: 22px;
    font-weight: 400;
    transform: translateY(-4px); /* move UP */
    color: var(--muted); /* light grey */
    opacity: .7;
}

.price-main {
    font-size: 50px;
    font-weight: 400;  /* THIN */
    line-height: 0.9;
    color: var(--text); /* dark */
}

.price-info {
    font-size: 14px;
    opacity: .7;
    margin-bottom: 6px; /* align bottom */
}

.price-info div {
    margin: 1px 0;
}

.price-right {
  font-size:13px;
  line-height:1.15;
  text-align:right;
  opacity:.7;
}
.price-right-top { margin-bottom:2px; }

/* BUTTON */
.btn {
    background: var(--text);
    color: var(--bg);
    border-radius: 50px;
    height: 48px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 18px 0 80px; /* increased bottom space */
    cursor: pointer;
    transition: .2s;
}
.btn:hover { opacity:.85; }
.download-wrapper {
  width:92%;
  max-width:950px;
  margin: 20px auto 30px;  /* whatever spacing you want */
  padding: 0 20px;         /* same left-right as wrapper */
}
/* FEATURES */
.features {
  display:flex;
  flex-direction:column;
  gap:16px;
  font-size:15px;
}
.feature-row {
  display:flex;
  align-items:center;
  gap:12px;
}
.feature-row svg {
  width:18px;
  height:18px;
  stroke:var(--text);
  fill:none;
  stroke-width:2;
}
.footer-note {
  margin-top: auto;
  font-size:13px;
  opacity:.5;
  padding-top:30px;
  text-align: center;
}

/* GREY DISABLED FEATURES */
.grey { opacity:.45; }
.grey svg { stroke:var(--muted); }

/* MOBILE */
@media(max-width:900px) {
  .wrapper { flex-direction:column; }
}
* {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
/* PAYMENT POPUP */
.pay-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backdrop-filter: blur(12px);
  background: rgba(0,0,0,0.35);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.pay-box {
  width: 340px;
  background: var(--card);
  padding: 28px 26px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.pay-box h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.pay-box input {
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

#payNowBtn {
  margin-top: 6px;
  height: 46px;
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  cursor: pointer;
}

.close-btn {
  position: absolute;
  right: 14px;
  top: 12px;
  cursor: pointer;
  opacity: .6;
}
.close-btn:hover { opacity: 1; }

/* FREE TRIAL DOWNLOAD BOX */
.free-trial-box {
  width: 100%;           /* <--- FIX */
  padding: 18px 28px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  margin-bottom: 48px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* LEFT TEXT */
.free-left {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

/* CENTER TEXT */
.free-sub {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  flex: 1;                 /* pushes it to center */
}

/* RIGHT BUTTON */
.free-btn {
  background: transparent;
  border: 1.5px solid var(--border);   /* grey outline */
  color: var(--muted);                 /* grey text */
  padding: 9px 24px;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: .25s;
  white-space: nowrap;
}

.free-btn:hover {
  border-color: var(--text);           /* black outline */
  color: var(--text);                  /* black text */
}
/* STAR TOOLTIP */
.star-tooltip {
  position: relative;
  cursor: pointer;
  margin-left: 2px;
}

/* Tooltip box – RIGHT side */
.star-tooltip::after {
  content: "Trial lasts for up to 1 week";
  position: absolute;
  top: 50%;
  left: 130%;                         /* move tooltip to the right */
  transform: translateY(-50%);
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 999;
}

/* Arrow pointing LEFT */
.star-tooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 120%;                       /* arrow sits between star + tooltip */
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent var(--card) transparent transparent;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 998;
}

/* SHOW tooltip on hover */
.star-tooltip:hover::after,
.star-tooltip:hover::before {
  opacity: 1;
}
@media (max-width: 750px) {
  .free-trial-box {
    flex-direction: column;       /* stack vertically */
    gap: 14px;                    /* space between items */
    text-align: center;           /* center all text */
    padding: 20px;                /* reduce padding */
  }

  .free-left {
    font-size: 17px;
  }

  .free-sub {
    flex: none;                   /* allow it to shrink normally */
    width: 100%;
  }

  .free-btn {
    width: 100%;                  /* full-width button */
    text-align: center;
    padding: 12px 0;
  }
}
@media (max-width: 750px) {
  .star-tooltip::after,
  .star-tooltip::before {
    display: none !important;
  }
  .star-tooltip {
    pointer-events: none;
  }
}

.standard-card {
    border: 1.5px solid var(--text) !important;   /* auto white in dark mode */
}
.rec-box {
    margin: 30px auto 0 auto;
    padding: 6px 18px;
    border: 1px solid var(--text);  /* theme aware */
    border-radius: 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);             /* theme aware */
    text-align: center;
    display: inline-block;
    background: transparent;
}
.card {
    transition: transform .25s ease, box-shadow .25s ease;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}


.pay-amount {
  margin-top: 6px;
  font-size: 14px;
  opacity: .7;
  text-align: center;
}

.err {
  font-size: 12px;
  color: #e53935;
  display: none;       /* hidden by default */
  margin-top: 4px;
}