* {margin: 0;padding: 0;box-sizing: border-box;}
:root {--blue-600: #2563eb;--indigo-600: #4f46e5;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--red-500: #ef4444;--green-500: #22c55e;--green-600: #16a34a;}
body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;color: var(--slate-700);line-height: 1.6;background: #0a1628;}
.container {max-width: 1200px;margin: 0 auto;padding: 0 2rem;}
.header {position: fixed;top: 2rem;left: 50%;transform: translateX(-50%);z-index: 1000;width: calc(100% - 4rem);max-width: 1100px;}
.nav {display: flex;align-items: center;justify-content: space-between;padding: 1rem 2rem;background: rgba(15, 23, 42, 0.8);backdrop-filter: blur(20px);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 50px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);}
.logo {display: flex;align-items: center;gap: 0.625rem;text-decoration: none;cursor: pointer;}
.logo-icon {width: 2.25rem;height: 2.25rem;background: linear-gradient(135deg, #3b82f6, #8b5cf6);border-radius: 0.75rem;display: flex;align-items: center;justify-content: center;color: white;box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);}
.logo-text {display: flex;flex-direction: column;}
.logo-name {font-weight: 700;color: white;line-height: 1.2;font-size: 1.1rem;}
.logo-sub {font-size: 0.625rem;color: rgba(255, 255, 255, 0.6);line-height: 1.2;}
.btn {display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;padding: 0.75rem 2rem;border: none;border-radius: 50px;font-weight: 600;font-size: 0.875rem;cursor: pointer;transition: all 0.3s;}
.btn-primary {background: linear-gradient(135deg, #3b82f6, #8b5cf6);color: white;box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);}
.btn-primary:hover {box-shadow: 0 8px 30px rgba(59, 130, 246, 0.6);transform: translateY(-2px);}
.btn-lg {padding: 1rem 2.5rem;font-size: 1rem;border-radius: 50px;}
.btn-outline {background: transparent;border: 2px solid rgba(255, 255, 255, 0.2);color: white;}
.btn-outline:hover {border-color: rgba(255, 255, 255, 0.4);background: rgba(255, 255, 255, 0.05);}
.btn-block {width: 100%;}
.btn-icon {background: rgba(255, 255, 255, 0.1);border: 1px solid rgba(255, 255, 255, 0.2);padding: 0.5rem;border-radius: 0.5rem;cursor: pointer;transition: all 0.2s;flex-shrink: 0;color: white;}
.btn-icon:hover {background: rgba(255, 255, 255, 0.15);}
.btn-visit {background: linear-gradient(135deg, #3b82f6, #8b5cf6);color: white;padding: 0.5rem 1rem;border-radius: 0.5rem;cursor: pointer;border: none;font-size: 0.875rem;font-weight: 600;}
.btn-visit:hover {background: linear-gradient(135deg, #2563eb, #7c3aed);}
.hero {min-height: 100vh;display: flex;align-items: center;justify-content: center;padding: 10rem 2rem 5rem;position: relative;overflow: hidden;background: linear-gradient(135deg, #0a1628 0%, #1e293b 50%, #0f172a 100%);}
.hero::before {content: '';position: absolute;top: -10%;left: -5%;width: 500px;height: 500px;background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent);border-radius: 50%;filter: blur(80px);}
.hero::after {content: '';position: absolute;bottom: -10%;right: -5%;width: 600px;height: 600px;background: radial-gradient(circle, rgba(139, 92, 246, 0.15), transparent);border-radius: 50%;filter: blur(100px);}
.abstract-pattern {position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: 0.03;background-image: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.3) 1px, transparent 1px), radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.3) 1px, transparent 1px);background-size: 50px 50px;}
.hero .container {position: relative;z-index: 10;text-align: center;max-width: 900px;}
.hero-badge {display: inline-flex;align-items: center;gap: 0.5rem;padding: 0.5rem 1.25rem;background: rgba(59, 130, 246, 0.1);border: 1px solid rgba(59, 130, 246, 0.3);border-radius: 50px;font-size: 0.875rem;color: #93c5fd;font-weight: 500;margin-bottom: 2rem;}
.hero-title {font-size: 4rem;font-weight: 900;color: white;line-height: 1.1;margin-bottom: 1.5rem;letter-spacing: -0.02em;}
.gradient-text {background: linear-gradient(135deg, #60a5fa, #a78bfa);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}
.hero-subtitle {font-size: 1.25rem;color: rgba(255, 255, 255, 0.7);max-width: 600px;margin: 0 auto 3rem;line-height: 1.7;font-weight: 400;}
.tool-card {background: rgba(15, 23, 42, 0.6);backdrop-filter: blur(20px);padding: 2.5rem;border-radius: 24px;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);margin-bottom: 2rem;border: 1px solid rgba(255, 255, 255, 0.1);}
.tool-view {display: none;}
.tool-view.active {display: block;}
.input-row {display: flex;gap: 1rem;flex-wrap: wrap;}
.input-wrapper {flex: 1;position: relative;min-width: 250px;}
.input-icon {position: absolute;left: 1.25rem;top: 50%;transform: translateY(-50%);color: rgba(255, 255, 255, 0.4);pointer-events: none;}
.input-wrapper input {width: 100%;padding: 1.25rem 1.25rem 1.25rem 3.5rem;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 16px;font-size: 1rem;transition: all 0.2s;background: rgba(255, 255, 255, 0.05);color: white;}
.input-wrapper input::placeholder {color: rgba(255, 255, 255, 0.5);}
.input-wrapper input:focus {outline: none;border-color: rgba(59, 130, 246, 0.5);box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);background: rgba(255, 255, 255, 0.08);}
.custom-alias-toggle {padding-top: 1rem;text-align: center;}
.custom-alias-toggle button {background: none;border: none;color: rgba(255, 255, 255, 0.6);font-size: 0.875rem;cursor: pointer;display: inline-flex;align-items: center;gap: 0.25rem;}
.custom-alias-toggle button:hover {color: rgba(255, 255, 255, 0.9);}
.custom-alias-toggle svg {transition: transform 0.3s;}
.custom-alias-toggle button.active svg {transform: rotate(180deg);}
.custom-alias-input {display: none;align-items: center;justify-content: center;gap: 0.5rem;margin-top: 1rem;flex-wrap: wrap;}
.custom-alias-input.active {display: flex;}
.alias-prefix {color: rgba(255, 255, 255, 0.6);font-size: 0.875rem;}
.custom-alias-input input {width: 12rem;padding: 0.75rem 1rem;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 12px;font-size: 0.875rem;background: rgba(255, 255, 255, 0.05);color: white;}
.custom-alias-input input::placeholder {color: rgba(255, 255, 255, 0.4);}
.error-message {color: #fca5a5;font-size: 0.875rem;margin-top: 1rem;display: none;}
.error-message.active {display: block;}
.success-header {display: flex;align-items: center;justify-content: center;gap: 0.5rem;color: #86efac;font-weight: 600;font-size: 1.125rem;margin-bottom: 1.5rem;}
.result-box {background: rgba(59, 130, 246, 0.1);border: 1px solid rgba(59, 130, 246, 0.3);border-radius: 16px;padding: 1.5rem;margin-bottom: 1rem;}
.result-label {font-size: 0.875rem;color: rgba(255, 255, 255, 0.6);margin-bottom: 0.75rem;}
.result-url-wrapper {display: flex;align-items: center;gap: 1rem;justify-content: center;flex-wrap: wrap;}
.result-url {font-size: 1.25rem;font-weight: 600;color: #60a5fa;word-break: break-all;}
.cleaned-notice {background: rgba(139, 92, 246, 0.1);border-radius: 12px;padding: 1rem;font-size: 0.875rem;color: rgba(255, 255, 255, 0.7);margin-bottom: 1rem;display: none;border: 1px solid rgba(139, 92, 246, 0.2);}
.cleaned-notice.active {display: block;}
.original-url {font-size: 0.75rem;color: rgba(255, 255, 255, 0.5);word-break: break-all;margin-top: 0.5rem;}
.hero-trust {font-size: 0.875rem;color: rgba(255, 255, 255, 0.5);margin-top: 2rem;}
@media (max-width: 768px) {.hero-title {font-size: 2.5rem;}.hero-subtitle {font-size: 1rem;}.input-row {flex-direction: column;}.btn-lg {width: 100%;}.header {top: 1rem;width: calc(100% - 2rem);}.nav {padding: 0.75rem 1.5rem;}.container {padding: 0 1rem;}.tool-card {padding: 1.5rem;}}
.section {padding: 6rem 2rem;position: relative;}
.section-alt {background: rgba(15, 23, 42, 0.5);}
.section-header {text-align: center;margin-bottom: 4rem;max-width: 700px;margin-left: auto;margin-right: auto;}
.section-title {font-size: 2.5rem;font-weight: 900;color: white;margin-bottom: 1rem;letter-spacing: -0.02em;}
.section-subtitle {font-size: 1.125rem;color: rgba(255, 255, 255, 0.6);line-height: 1.7;}
.steps-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2.5rem;max-width: 1100px;margin: 0 auto;}
.step-card {background: rgba(15, 23, 42, 0.6);backdrop-filter: blur(20px);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 20px;padding: 2.5rem;text-align: center;transition: all 0.3s;position: relative;}
.step-card:hover {transform: translateY(-8px);border-color: rgba(59, 130, 246, 0.4);box-shadow: 0 20px 60px rgba(59, 130, 246, 0.2);}
.step-number {position: absolute;top: -1rem;right: 2rem;width: 2.5rem;height: 2.5rem;background: linear-gradient(135deg, #3b82f6, #8b5cf6);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 900;color: white;font-size: 1.125rem;box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);}
.step-icon {width: 4rem;height: 4rem;background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));border-radius: 16px;display: flex;align-items: center;justify-content: center;margin: 0 auto 1.5rem;color: #60a5fa;}
.step-title {font-size: 1.5rem;font-weight: 700;color: white;margin-bottom: 0.75rem;}
.step-desc {color: rgba(255, 255, 255, 0.6);line-height: 1.7;font-size: 0.95rem;}
.comparison-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 2rem;max-width: 1100px;margin: 0 auto;}
.comparison-card {background: rgba(15, 23, 42, 0.6);backdrop-filter: blur(20px);border-radius: 20px;padding: 2rem;position: relative;border: 2px solid transparent;transition: all 0.3s;}
.comparison-before {border-color: rgba(239, 68, 68, 0.3);}
.comparison-after {border-color: rgba(34, 197, 94, 0.3);}
.comparison-badge {position: absolute;top: -0.75rem;left: 1.5rem;padding: 0.375rem 1rem;border-radius: 50px;font-weight: 700;font-size: 0.875rem;text-transform: uppercase;letter-spacing: 0.05em;}
.badge-before {background: linear-gradient(135deg, #ef4444, #dc2626);color: white;}
.badge-after {background: linear-gradient(135deg, #22c55e, #16a34a);color: white;}
.url-preview {background: rgba(255, 255, 255, 0.05);border-radius: 12px;padding: 1.25rem;margin: 1.5rem 0;border: 1px solid rgba(255, 255, 255, 0.1);}
.url-label {font-size: 0.75rem;color: rgba(255, 255, 255, 0.5);text-transform: uppercase;letter-spacing: 0.05em;margin-bottom: 0.5rem;}
.url-text {color: rgba(255, 255, 255, 0.8);word-break: break-all;line-height: 1.6;font-size: 0.9rem;font-family: 'Courier New', monospace;}
.comparison-before .url-text {color: #fca5a5;}
.comparison-after .url-text {color: #86efac;font-weight: 600;}
.feature-list {list-style: none;margin-top: 1.5rem;}
.feature-item {display: flex;align-items: flex-start;gap: 0.75rem;margin-bottom: 1rem;color: rgba(255, 255, 255, 0.7);font-size: 0.95rem;}
.feature-icon-sm {width: 1.5rem;height: 1.5rem;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-shrink: 0;font-size: 0.75rem;}
.icon-bad {background: rgba(239, 68, 68, 0.2);color: #fca5a5;}
.icon-good {background: rgba(34, 197, 94, 0.2);color: #86efac;}
.features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 1.5rem;max-width: 1100px;margin: 0 auto;}
.feature-card {background: rgba(15, 23, 42, 0.6);backdrop-filter: blur(20px);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 16px;padding: 2rem;transition: all 0.3s;}
.feature-card:hover {border-color: rgba(59, 130, 246, 0.3);box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15);}
.feature-icon-box {width: 3.5rem;height: 3.5rem;background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));border-radius: 12px;display: flex;align-items: center;justify-content: center;margin-bottom: 1.25rem;font-size: 1.5rem;}
.feature-title {font-size: 1.25rem;font-weight: 700;color: white;margin-bottom: 0.625rem;}
.feature-desc {color: rgba(255, 255, 255, 0.6);line-height: 1.7;font-size: 0.95rem;}
.platforms-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 1.5rem;max-width: 900px;margin: 0 auto 3rem;}
.platform-card {background: rgba(15, 23, 42, 0.6);backdrop-filter: blur(20px);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 16px;padding: 2rem;text-align: center;transition: all 0.3s;}
.platform-card:hover {transform: translateY(-4px);border-color: rgba(59, 130, 246, 0.3);}
.platform-icon {width: 4rem;height: 4rem;background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));border-radius: 12px;display: flex;align-items: center;justify-content: center;margin: 0 auto 1rem;font-size: 2rem;}
.platform-name {font-weight: 700;color: white;margin-bottom: 0.5rem;font-size: 1.125rem;}
.platform-desc {font-size: 0.875rem;color: rgba(255, 255, 255, 0.5);}
.trust-line {display: flex;align-items: center;justify-content: center;gap: 2rem;color: rgba(255, 255, 255, 0.5);font-size: 0.95rem;flex-wrap: wrap;}
.trust-line .dot {width: 4px;height: 4px;background: rgba(255, 255, 255, 0.3);border-radius: 50%;}
.faq-container {max-width: 800px;margin: 0 auto;}
.faq-item {background: rgba(15, 23, 42, 0.6);backdrop-filter: blur(20px);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 16px;margin-bottom: 1rem;overflow: hidden;transition: all 0.3s;}
.faq-item.active {border-color: rgba(59, 130, 246, 0.3);}
.faq-question {width: 100%;display: flex;align-items: center;justify-content: space-between;padding: 1.5rem;background: none;border: none;text-align: left;cursor: pointer;font-weight: 600;color: white;font-size: 1.05rem;transition: all 0.2s;}
.faq-question:hover {color: #60a5fa;}
.faq-icon {flex-shrink: 0;color: rgba(255, 255, 255, 0.5);transition: transform 0.3s;}
.faq-item.active .faq-icon {transform: rotate(180deg);color: #60a5fa;}
.faq-answer {max-height: 0;overflow: hidden;transition: max-height 0.3s ease;}
.faq-item.active .faq-answer {max-height: 300px;}
.faq-answer-content {padding: 0 1.5rem 1.5rem;color: rgba(255, 255, 255, 0.6);line-height: 1.7;}
.footer {background: rgba(10, 22, 40, 0.8);border-top: 1px solid rgba(255, 255, 255, 0.1);padding: 3rem 2rem;}
.footer-content {max-width: 1100px;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;gap: 2rem;flex-wrap: wrap;}
.footer-brand {display: flex;align-items: center;gap: 0.75rem;}
.footer-text {color: rgba(255, 255, 255, 0.5);font-size: 0.95rem;}
.footer-links {display: flex;gap: 2rem;flex-wrap: wrap;}
.footer-link {color: rgba(255, 255, 255, 0.6);text-decoration: none;font-size: 0.875rem;transition: color 0.2s;}
.footer-link:hover {color: white;}
.footer-divider {height: 1px;background: rgba(255, 255, 255, 0.1);margin: 2rem 0;}
.footer-bottom {text-align: center;color: rgba(255, 255, 255, 0.4);font-size: 0.875rem;}
@media (max-width: 768px) {.section {padding: 4rem 1rem;}.section-title {font-size: 2rem;}.steps-grid,.comparison-grid,.features-grid,.platforms-grid {grid-template-columns: 1fr;}.footer-content {flex-direction: column;align-items: flex-start;}}



/* WHY CHOOSE SECTION */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.why-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.why-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.12);
  color: #8b8df8;
}

.why-icon svg {
  width: 26px;
  height: 26px;
}

.why-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}

.why-card p {
  font-size: 14px;
  color: #b8c1ff;
  line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}


.platform-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    border-radius: 14px;
    background: linear-gradient(135deg, #111, #333);
    color: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.platform-card:hover .platform-icon {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.platform-card:nth-child(1) .platform-icon { background: #E1306C; } /* Instagram */
.platform-card:nth-child(2) .platform-icon { background: #FF0000; } /* YouTube */
.platform-card:nth-child(3) .platform-icon { background: #0d6efd; } /* Website */
.platform-card:nth-child(4) .platform-icon { background: #20c997; } /* Social */

.platform-icon.snapchat {
    background: #fffc00;
    color: #000;
}

.platform-icon.tiktok {
    background: linear-gradient(135deg, #000000, #25F4EE);
}


.feature-icon-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 26px;
    color: #fff;
    background: linear-gradient(135deg, #0d6efd, #6610f2);
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon-box {
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 22px 45px rgba(0,0,0,0.35);
}

.navbar-logo {
  height: 55px;
  width: auto;
}


/* Support Button */
.support-btn {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-decoration: none;
  margin-left: 12px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.support-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}


/* Support Soon Box */
.support-soon-box {
  display: none;
  margin: 40px auto;
  text-align: center;
  font-size: 14px;
  color: red;
  font-weight: bold;
}



/* NAV BASE */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LEFT */
.nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* RIGHT */
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* SUPPORT BUTTON */
.support-btn {
  text-decoration: none;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* HAMBURGER */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger span {
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
}

/* 🔴 MOBILE SUPPORT SLOT (NORMAL FLOW) */
.mobile-support-slot {
  display: none;
}

/* MOBILE MENU */
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  margin: 10px;
  border-radius: 16px;
  background: rgba(10, 18, 40, 0.95);
}

.mobile-menu a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  opacity: 0.9;
}

.mobile-menu a:hover {
  opacity: 1;
}

/* MOBILE ONLY */
@media (max-width: 768px) {

  /* hide desktop buttons */
  .nav-right {
    display: none;
  }

  /* show hamburger */
  .hamburger {
    display: flex;
  }

  /* show support button BELOW header */
  .mobile-support-slot {
    display: flex;
    justify-content: center;
    margin: 14px 0;
  }

  .mobile-support-slot .support-btn {
    padding: 10px 18px;
    font-size: 14px;
  }

  /* hamburger open */
  .mobile-menu.active {
    display: flex;
  }
}