* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
overflow: hidden;
color: #1f2123;
flex-direction: column;
}
.wrapper {
position: relative;
width: 100vw;
height: 100vh;
background: #131414;
overflow: hidden;
}
.image-grid {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-auto-rows: 150px;
z-index: 0;
}
.tile {
position: relative;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(0.8);
pointer-events: auto;
}
.hero {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 24px;
pointer-events: none;
}
.hero-card {
pointer-events: auto;
max-width: 520px;
width: 100%;
background: #31313138;
border-radius: 12px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(15, 23, 42, 0.04);
padding: 32px 28px 26px;
backdrop-filter: blur(15px);
display: flex;
flex-direction: column;
align-items: center;
}
@media (min-width: 768px) {
.hero-card {
padding: 36px 32px 28px;
}
}
.hero-title {
font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
font-size: clamp(1.6rem, 2.4vw, 2rem);
font-weight: 600;
letter-spacing: -0.02em;
color: #eceff3;
margin-bottom: 10px;
text-align: center;
}
.hero-subtitle {
font-size: 14px;
line-height: 1.6;
color: #a8b2b8;
margin-bottom: 20px;
text-align: center;
}
.hero-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px 1rem;
}
.hero-badge img {
max-width: 160px;
}
.hero-price {
font-size: 0.95rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 18px;
border: 1px dashed #cccccc42;
padding: 8px 16px;
border-radius: 100px;
text-align: center;
line-height: 140%;
}
.hero-price span {
color: #1991cc;
}
.hero-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 10px;
}
.hero-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 20px;
width: 100%;
border: none;
outline: none;
border-radius: 100px;
background-image: linear-gradient(135deg, #1991cc, #5eb7e1);
color: #ffffff;
font-size: 0.98rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 12px 25px rgba(21, 108, 158, 0.35),
0 1px 0 rgba(255, 255, 255, 0.4) inset;
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.hero-button:hover {
transform: translateY(-1px) scale(1.02);
box-shadow: 0 16px 35px rgba(21, 108, 158, 0.45),
0 1px 0 rgba(255, 255, 255, 0.4) inset;
filter: brightness(1.05);
}
.hero-button:active {
transform: translateY(0) scale(0.99);
box-shadow: 0 8px 18px rgba(21, 108, 158, 0.35),
0 0 0 rgba(255, 255, 255, 0.4) inset;
filter: brightness(0.97);
}
.hero-button-icon svg {
width: 24px;
height: 24px;
}
.hero-button-label {
white-space: nowrap;
}
.hero-note,
.hero-muted {
font-size: 0.78rem;
line-height: 1.5;
color: #b2c1c961;
text-align: center;
}
.hero-note {
margin-top: 2px;
}
.hero-muted {
margin-top: 12px;
}
.unlock-card-title {
font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
font-size: clamp(1.5rem, 2.3vw, 1.9rem);
font-weight: 600;
letter-spacing: -0.02em;
color: #eceff3;
margin-bottom: 12px;
text-align: center;
}
.unlock-card-subtitle {
font-size: 14px;
line-height: 1.7;
color: #a8b2b8;
margin-bottom: 20px;
text-align: center;
}
.unlock-plan-highlight {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 999px;
border: 1px dashed #4b55634d;
background: rgba(15, 23, 42, 0.55);
color: #e5e7eb;
font-size: 0.8rem;
font-weight: 500;
margin-bottom: 18px;
text-align: center;
gap: 6px;
}
.unlock-plan-highlight span {
color: #38bdf8;
font-weight: 600;
}
.unlock-features {
list-style: none;
width: 100%;
margin: 0 0 20px 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.unlock-feature-item {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: #ced4da;
}
.unlock-feature-icon {
width: 22px;
height: 22px;
border-radius: 999px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(34, 197, 94, 0.16);
border: 1px solid rgba(34, 197, 94, 0.35);
color: #bbf7d0;
font-size: 13px;
}
.unlock-feature-icon svg {
width: 14px;
height: 14px;
}
.unlock-cta-button {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
width: 100%;
padding: 12px 20px;
border-radius: 100px;
border: none;
outline: none;
cursor: pointer;
background-image: linear-gradient(135deg, #1991cc, #5eb7e1);
color: #ffffff;
font-size: 0.98rem;
font-weight: 600;
box-shadow: 0 12px 25px rgba(21, 108, 158, 0.35),
0 1px 0 rgba(255, 255, 255, 0.4) inset;
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
margin-top: 4px;
font-family: "Inter";
}
.unlock-cta-button:hover {
transform: translateY(-1px) scale(1.02);
box-shadow: 0 16px 35px rgba(21, 108, 158, 0.45),
0 1px 0 rgba(255, 255, 255, 0.4) inset;
filter: brightness(1.05);
}
.unlock-cta-button:active {
transform: translateY(0) scale(0.99);
box-shadow: 0 8px 18px rgba(21, 108, 158, 0.35),
0 0 0 rgba(255, 255, 255, 0.4) inset;
filter: brightness(0.97);
}
.unlock-cta-main {
font-size: 0.98rem;
font-weight: 600;
}
.unlock-cta-sub {
font-size: 0.78rem;
font-weight: 500;
opacity: 0.9;
}
.unlock-small-note {
margin-top: 16px;
font-size: 0.78rem;
line-height: 1.5;
color: #b2c1c9;
text-align: center;
}
.icon-bg {
position: fixed;
inset: 0;
overflow: hidden;
background: #f8f1e6;
z-index: 0;
}
.icon-drag-wrapper {
position: absolute;
top: 50%;
left: 50%;
will-change: transform;
}
.icon-grid {
display: grid;
gap: 26px;
}
.icon-tile {
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.icon-tile img {
max-width: 96px;
max-height: 96px;
display: block;
transition: transform 0.18s ease-out, filter 0.18s ease-out;
transform-origin: center center;
}
.icon-tile:hover img {
transform: translateY(-3px) scale(1.03);
filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.12));
}
header {
padding: 16px 24px;
border-bottom: 1px solid rgb(148 163 184 / 5%);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
background: #131414;
}
.site-footer {padding: 16px 24px;border-top: 1px solid rgb(148 163 184 / 5%);display: flex;gap: 16px;width: 100%;background: #131414;justify-content: center;}
.site-footer p {
  display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #9ca3af;
}
.logo {
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 14px;
}
.logo img {
max-width: 110px;
}
.header-right {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
color: #9ca3af;
}
.header-right strong {
color: #e5e7eb;
}
.header-right a,
.site-footer a{
color: #5eb7e1;
text-decoration: none;
font-weight: 500;
}

.header-right a:hover,
.site-footer a:hover {
color: #88c6e3;
}
.download-form {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 8px;
}
.download-label {
font-size: 13px;
color: #e5e7eb;
}
.download-input {
width: 100%;
min-width: 450px;
padding: 20px 16px;
border-radius: 10px;
border: 1px solid rgb(148 163 184 / 19%);
background: rgb(34 35 35);
color: #e5e7eb;
font-size: 14px;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease,
background 0.15s ease;
box-shadow: inset 7px 9px 8px -5px rgb(255 255 255 / 4%);
font-size: 18px;
}
.download-input::placeholder {
color: #6b7280;
}
.download-input:focus {
border-color: #1790cb;
box-shadow: 0 0 0 5px #1790cb1a;
}
    .toast-root {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 9999;
      pointer-events: none;
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    .toast {
      min-width: 260px;
      max-width: 360px;
      padding: 10px 14px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: #e5e7eb;
      border: 1px solid rgba(148, 163, 184, 0.6);
      background: radial-gradient(circle at top left, rgba(248, 250, 252, 0.12), #020617);
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.85);
      opacity: 0;
      transform: translateY(8px);
      pointer-events: auto;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .toast--visible {
      opacity: 1;
      transform: translateY(0);
    }
    .toast-icon {
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.9);
      flex-shrink: 0;
    }
    .toast--success {
      border-color: rgba(34, 197, 94, 0.7);
    }
    .toast--success .toast-icon {
      color: #bbf7d0;
      border: 1px solid rgba(34, 197, 94, 0.6);
    }
    .toast--error {
      border-color: rgba(239, 68, 68, 0.7);
    }
    .toast--error .toast-icon {
      color: #fecaca;
      border: 1px solid rgba(239, 68, 68, 0.6);
    }
    .toast--info {
      border-color: rgba(59, 130, 246, 0.7);
      backdrop-filter: blur(10px);
    }
    .toast--info .toast-icon {
      color: #bfdbfe;
      border: 1px solid rgba(59, 130, 246, 0.6);
    }
    .toast-message {
      flex: 1;
    }

    .unlock-cta-button {
      position: relative;
      overflow: hidden;
    }
    .button-label-default,
    .button-label-loading {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .button-label-loading {
      display: none;
      font-size: 13px;
    }
    .unlock-cta-button.is-loading .button-label-default {
      display: none;
    }
    .unlock-cta-button.is-loading .button-label-loading {
      display: inline-flex;
    }
    .loading-dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      border: 2px solid rgba(15, 23, 42, 0.1);
      border-top-color: #0f172a;
      background: rgba(248, 250, 252, 0.9);
      animation: spinDot 0.8s linear infinite;
    }
    @keyframes spinDot {
      to {
        transform: rotate(360deg);
      }
    }