@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:16px;line-height:1.7;color:#0d0d1a;background:#f8f7ff;overflow-x:hidden}
a{color:#7c3aed;text-decoration:none}
a:hover{text-decoration:underline}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#f1f0ff}
::-webkit-scrollbar-thumb{background:linear-gradient(#7c3aed,#f43f5e);border-radius:10px}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes floatR{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(5deg)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.6)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(124,58,237,0.3)}50%{box-shadow:0 0 40px rgba(124,58,237,0.6),0 0 80px rgba(124,58,237,0.2)}}
@keyframes borderGlow{0%,100%{border-color:rgba(124,58,237,0.3)}50%{border-color:rgba(124,58,237,0.8)}}
@keyframes countUp{from{opacity:0;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}
@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.animate-fade-up{animation:fadeUp 0.6s ease forwards}
.animate-fade-in{animation:fadeIn 0.5s ease forwards}
.delay-1{animation-delay:0.1s}.delay-2{animation-delay:0.2s}.delay-3{animation-delay:0.3s}
.delay-4{animation-delay:0.4s}.delay-5{animation-delay:0.5s}.delay-6{animation-delay:0.6s}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal-right.visible{opacity:1;transform:translateX(0)}

/* ===== HEADER ===== */
header{background:rgba(255,255,255,0.8);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(124,58,237,0.1);position:sticky;top:0;z-index:1000;transition:all 0.3s}
header.scrolled{background:rgba(255,255,255,0.95);box-shadow:0 4px 30px rgba(124,58,237,0.1)}
.header-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-1px;display:flex;align-items:center;transition:transform 0.2s}
.logo:hover{transform:scale(1.03);text-decoration:none}
.logo-touch{color:#7c3aed}.logo-this{color:#0d0d1a}.logo-co{color:#f43f5e}
nav ul{list-style:none;display:flex;gap:2px}
nav ul li a{font-weight:600;color:#555;font-size:0.84rem;transition:all 0.2s;padding:7px 13px;border-radius:10px;display:block;position:relative}
nav ul li a:hover,nav ul li a.active{color:#7c3aed;background:linear-gradient(135deg,#f0eeff,#faf5ff);text-decoration:none}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{width:25px;height:3px;background:#333;border-radius:3px;transition:0.3s}

/* ===== HERO ===== */
.hero{background:#0d0d1a;color:#fff;padding:110px 24px 100px;text-align:center;position:relative;overflow:hidden;min-height:640px;display:flex;align-items:center;justify-content:center}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(124,58,237,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,0.07) 1px,transparent 1px);background-size:50px 50px;animation:fadeIn 2s ease}
.hero-orb{position:absolute;border-radius:50%;filter:blur(90px);animation:float 10s ease-in-out infinite}
.hero-orb-1{width:550px;height:550px;background:radial-gradient(circle,rgba(124,58,237,0.5),transparent);top:-150px;left:-150px;animation-delay:0s}
.hero-orb-2{width:450px;height:450px;background:radial-gradient(circle,rgba(79,70,229,0.4),transparent);bottom:-100px;right:-100px;animation-delay:-4s}
.hero-orb-3{width:350px;height:350px;background:radial-gradient(circle,rgba(244,63,94,0.3),transparent);top:40%;left:40%;animation-delay:-7s}
.hero-inner{position:relative;z-index:2;max-width:820px;margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(124,58,237,0.15);border:1px solid rgba(124,58,237,0.35);color:#c4b5fd;font-size:0.75rem;font-weight:700;padding:7px 20px;border-radius:50px;margin-bottom:28px;letter-spacing:1.5px;text-transform:uppercase;backdrop-filter:blur(10px);animation:fadeUp 0.6s ease forwards,borderGlow 3s ease infinite}
.hero-badge-dot{width:7px;height:7px;background:#7c3aed;border-radius:50%;animation:pulse 2s infinite;flex-shrink:0}
.hero h1{font-family:'Space Grotesk',sans-serif;font-size:4.2rem;font-weight:700;line-height:1.08;margin-bottom:22px;letter-spacing:-2.5px;animation:fadeUp 0.7s 0.1s ease both}
.hero h1 .grad{background:linear-gradient(135deg,#a78bfa 0%,#f43f5e 50%,#fbbf24 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 4s linear infinite}
.hero-sub{font-size:1.15rem;color:rgba(255,255,255,0.6);max-width:580px;margin:0 auto 40px;line-height:1.75;animation:fadeUp 0.7s 0.2s ease both}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:64px;animation:fadeUp 0.7s 0.3s ease both}
.btn-hero-primary{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;padding:16px 36px;border-radius:14px;font-weight:800;font-size:1rem;transition:all 0.3s;box-shadow:0 8px 32px rgba(124,58,237,0.4);border:1px solid rgba(255,255,255,0.1);position:relative;overflow:hidden}
.btn-hero-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);opacity:0;transition:opacity 0.3s}
.btn-hero-primary:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 48px rgba(124,58,237,0.5);text-decoration:none}
.btn-hero-primary:hover::before{opacity:1}
.btn-hero-ghost{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.8);border:1px solid rgba(255,255,255,0.15);padding:16px 36px;border-radius:14px;font-weight:700;font-size:1rem;transition:all 0.3s;backdrop-filter:blur(10px)}
.btn-hero-ghost:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.3);text-decoration:none;transform:translateY(-3px)}
.hero-stats{display:flex;gap:0;justify-content:center;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:22px;padding:28px 48px;backdrop-filter:blur(20px);flex-wrap:wrap;animation:fadeUp 0.7s 0.4s ease both}
.hero-stat{text-align:center;padding:0 36px;position:relative}
.hero-stat+.hero-stat::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);height:44px;width:1px;background:rgba(255,255,255,0.08)}
.hero-stat-num{font-family:'Space Grotesk',sans-serif;font-size:2.2rem;font-weight:700;background:linear-gradient(135deg,#a78bfa,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.hero-stat-label{font-size:0.7rem;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:1.5px;margin-top:5px;font-weight:600}

/* ===== LAYOUT ===== */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:90px 0}
.section-tag{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#f0eeff,#faf5ff);color:#7c3aed;font-size:0.72rem;font-weight:800;padding:6px 16px;border-radius:50px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px;border:1px solid #e9d5ff}
.section-title{font-family:'Space Grotesk',sans-serif;font-size:2.6rem;font-weight:700;color:#0d0d1a;margin-bottom:14px;letter-spacing:-1.5px;line-height:1.15}
.section-sub{font-size:1rem;color:#888;max-width:500px;line-height:1.75}

/* ===== TOOL CARDS (Homepage) ===== */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.tool-card{background:#fff;border-radius:22px;padding:30px;box-shadow:0 2px 20px rgba(0,0,0,0.04);transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);border:1.5px solid #f0eeff;display:block;color:inherit;position:relative;overflow:hidden}
.tool-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,58,237,0.04),rgba(79,70,229,0.02));opacity:0;transition:opacity 0.3s}
.tool-card:hover{transform:translateY(-10px) scale(1.01);box-shadow:0 28px 64px rgba(124,58,237,0.16);border-color:#c4b5fd;text-decoration:none}
.tool-card:hover::after{opacity:1}
.tool-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.tool-icon-box{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;flex-shrink:0;transition:transform 0.3s}
.tool-card:hover .tool-icon-box{transform:scale(1.1) rotate(-5deg)}
.tool-free-tag{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803d;font-size:0.65rem;font-weight:800;padding:4px 12px;border-radius:50px;text-transform:uppercase;letter-spacing:0.5px;height:fit-content;border:1px solid #86efac}
.tool-card h3{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:700;color:#0d0d1a;margin-bottom:8px;letter-spacing:-0.5px}
.tool-card p{font-size:0.84rem;color:#888;line-height:1.7;margin-bottom:20px}
.tool-card-footer{display:flex;align-items:center;justify-content:space-between}
.tool-arrow{display:inline-flex;align-items:center;gap:6px;font-size:0.84rem;font-weight:800;color:#7c3aed;transition:all 0.3s}
.tool-card:hover .tool-arrow{gap:14px;color:#4f46e5}
.tool-tag-small{font-size:0.72rem;color:#bbb;font-weight:600;background:#f8f7ff;padding:3px 10px;border-radius:20px}

/* ===== WHY SECTION ===== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why-card{background:#fff;border-radius:22px;padding:36px;border:1.5px solid #f0eeff;text-align:center;transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);position:relative;overflow:hidden}
.why-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#7c3aed,#4f46e5,#f43f5e);transform:scaleX(0);transition:transform 0.3s;transform-origin:left}
.why-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(124,58,237,0.12);border-color:#c4b5fd}
.why-card:hover::before{transform:scaleX(1)}
.why-icon{width:68px;height:68px;border-radius:22px;background:linear-gradient(135deg,#7c3aed,#4f46e5);display:flex;align-items:center;justify-content:center;font-size:1.9rem;margin:0 auto 20px;box-shadow:0 8px 24px rgba(124,58,237,0.3);transition:transform 0.3s}
.why-card:hover .why-icon{transform:scale(1.1) rotate(-5deg)}
.why-card h3{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:700;color:#0d0d1a;margin-bottom:10px;letter-spacing:-0.3px}
.why-card p{font-size:0.85rem;color:#888;line-height:1.75}

/* ===== AD BANNER ===== */
.ad-banner{background:#fff;border:1.5px dashed #e0d9ff;text-align:center;padding:12px;margin:24px auto;max-width:1200px;font-size:0.75rem;color:#bbb;border-radius:16px}

/* ===== FOOTER ===== */
footer {
  background: #0a0812;
  color: #bbb;
  padding: 0;
  margin-top: 0;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #7c3aed 30%, #4f46e5 55%, #f43f5e 80%, transparent 100%);
  width: 100%;
  position: relative;
  z-index: 2;
}
.footer-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.footer-glow {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse at top, rgba(124,58,237,0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.footer-body {
  padding: 64px 24px 52px;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 52px;
  position: relative;
  z-index: 1;
}
.footer-brand-col { display: block; }
.footer-logo-mark { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.footer-logo { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: -1.5px; line-height: 1; }
.fl-touch { color: #a78bfa; }
.fl-this { color: #fff; }
.fl-co { color: #f43f5e; }
.footer-tagline { font-size: 0.86rem; color: #4b5563; line-height: 1.9; max-width: 240px; margin-bottom: 24px; }
.footer-tools-mini { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-tool-chip {
  background: rgba(124,58,237,0.1);
  border: 1px solid rgba(124,58,237,0.2);
  color: #a78bfa;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 50px;
  transition: all 0.2s;
  white-space: nowrap;
  display: inline-block;
}
.footer-tool-chip:hover {
  background: rgba(124,58,237,0.22);
  border-color: rgba(124,58,237,0.45);
  color: #c4b5fd;
  text-decoration: none;
  transform: translateY(-2px);
}
.footer-nav-col { display: block; }
.footer-nav-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-nav-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(124,58,237,0.4), transparent);
}
.footer-nav-col ul { list-style: none; padding: 0; margin: 0; }
.footer-nav-col ul li { margin-bottom: 12px; }
.footer-nav-col ul li a {
  color: #4b5563;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.25s;
  display: block;
  padding: 2px 0;
}
.footer-nav-col ul li a:hover {
  color: #a78bfa;
  text-decoration: none;
  padding-left: 8px;
}
.footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,0.25), rgba(79,70,229,0.25), transparent);
  margin: 0 24px;
  position: relative;
  z-index: 1;
}
.footer-bottom-bar {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.footer-copy { font-size: 0.78rem; color: #374151; display: flex; align-items: center; gap: 8px; }
.footer-copy-dot {
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #7c3aed, #f43f5e);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.footer-legal-links { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.footer-legal-links a {
  font-size: 0.78rem;
  color: #374151;
  transition: all 0.2s;
  padding: 5px 12px;
  border-radius: 8px;
  font-weight: 500;
}
.footer-legal-links a:hover { color: #a78bfa; background: rgba(124,58,237,0.1); text-decoration: none; }
.footer-legal-sep { color: #1f2937; font-size: 0.7rem; user-select: none; }

/* ===== PAGE CONTENT ===== */
.page-hero{background:linear-gradient(135deg,#0d0d1a 0%,#1a0a3e 100%);color:#fff;text-align:center;padding:72px 20px;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:600px;height:500px;background:radial-gradient(circle,rgba(124,58,237,0.25),transparent);pointer-events:none}
.page-hero h1{font-family:'Space Grotesk',sans-serif;font-size:2.4rem;font-weight:700;margin-bottom:10px;position:relative;letter-spacing:-1px}
.page-hero p{opacity:0.55;font-size:0.95rem;position:relative}
.page-content{max-width:820px;margin:44px auto;padding:48px;background:#fff;border-radius:24px;box-shadow:0 4px 40px rgba(0,0,0,0.07);border:1.5px solid #f0eeff}
.page-content h2{font-family:'Space Grotesk',sans-serif;font-size:1.15rem;font-weight:700;color:#0d0d1a;margin:30px 0 12px;padding-left:16px;border-left:4px solid #7c3aed;letter-spacing:-0.3px}
.page-content p{color:#555;margin-bottom:14px;line-height:1.9;font-size:0.95rem}
.page-content ul{margin:10px 0 16px 20px;color:#555}
.page-content li{margin-bottom:9px;line-height:1.75;font-size:0.95rem}
.page-content a{color:#7c3aed;font-weight:600}
.btn-submit{background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border:none;padding:15px 38px;border-radius:14px;font-size:1rem;font-weight:700;cursor:pointer;transition:all 0.3s;margin-top:8px;box-shadow:0 6px 24px rgba(124,58,237,0.3);font-family:inherit;position:relative;overflow:hidden}
.btn-submit::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);opacity:0;transition:opacity 0.2s}
.btn-submit:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(124,58,237,0.4)}
.btn-submit:hover::before{opacity:1}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-weight:700;margin-bottom:8px;color:#374151;font-size:0.84rem;letter-spacing:0.3px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:14px 18px;border:2px solid #e8e4f8;border-radius:14px;font-size:0.93rem;font-family:inherit;background:#fafafa;transition:all 0.25s;color:#0d0d1a;outline:none}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:#7c3aed;background:#fff;box-shadow:0 0 0 5px rgba(124,58,237,0.08)}
.form-group textarea{resize:vertical;min-height:120px}

/* ===== TOOL PAGE HERO ===== */
.tool-page-hero{padding:64px 24px 56px;text-align:center;position:relative;overflow:hidden;color:#fff}
.tool-hero-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.12) 1px,transparent 1px);background-size:28px 28px;animation:fadeIn 1s ease}
.tool-hero-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:300px;background:radial-gradient(ellipse,rgba(255,255,255,0.1),transparent);pointer-events:none}
.tool-page-hero-inner{position:relative;z-index:1;max-width:660px;margin:0 auto}
.tool-page-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);color:#fff;font-size:0.72rem;font-weight:700;padding:6px 18px;border-radius:50px;margin-bottom:20px;letter-spacing:1.5px;text-transform:uppercase;backdrop-filter:blur(10px);animation:fadeUp 0.5s ease both}
.tool-page-hero h1{font-family:'Space Grotesk',sans-serif;font-size:2.8rem;font-weight:700;margin-bottom:14px;letter-spacing:-1.5px;line-height:1.1;animation:fadeUp 0.5s 0.1s ease both}
.tool-page-hero p{opacity:0.8;font-size:1rem;line-height:1.75;animation:fadeUp 0.5s 0.2s ease both}

/* ===== TOOL PAGE LAYOUT ===== */
.tool-page-wrap{max-width:1160px;margin:0 auto;padding:44px 24px;display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}

/* ===== TOOL CARDS ===== */
.t-card{background:#fff;border-radius:22px;padding:34px;box-shadow:0 2px 24px rgba(0,0,0,0.05);margin-bottom:22px;border:1.5px solid #f0eeff;transition:box-shadow 0.3s;position:relative;overflow:hidden}
.t-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#7c3aed,#4f46e5,#f43f5e);opacity:0;transition:opacity 0.3s}
.t-card:hover::before{opacity:1}
.t-card-title{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;color:#0d0d1a;margin-bottom:24px;display:flex;align-items:center;gap:12px;letter-spacing:-0.3px}
.t-step{width:30px;height:30px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:0.82rem;font-weight:800;flex-shrink:0;box-shadow:0 4px 12px rgba(124,58,237,0.3)}

/* ===== FORM ELEMENTS ===== */
.f-group{margin-bottom:20px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-label{display:block;font-size:0.75rem;font-weight:800;color:#374151;margin-bottom:8px;letter-spacing:0.8px;text-transform:uppercase}
.f-input,.f-select,.f-textarea{width:100%;padding:14px 18px;border:2px solid #e8e4f8;border-radius:14px;font-size:0.93rem;font-family:inherit;background:#fafafa;transition:all 0.25s;color:#0d0d1a;outline:none}
.f-input:focus,.f-select:focus,.f-textarea:focus{border-color:#7c3aed;background:#fff;box-shadow:0 0 0 5px rgba(124,58,237,0.08);transform:translateY(-1px)}
.f-textarea{resize:vertical;min-height:110px;line-height:1.65}
.f-input::placeholder,.f-textarea::placeholder{color:#bbb}

/* ===== PILL BUTTONS ===== */
.pill-grid{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.pill{border:2px solid #e8e4f8;border-radius:50px;padding:10px 22px;font-size:0.82rem;font-weight:700;color:#666;cursor:pointer;transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);background:#fff;font-family:inherit;position:relative;overflow:hidden}
.pill::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#7c3aed,#4f46e5);opacity:0;transition:opacity 0.2s}
.pill span{position:relative;z-index:1}
.pill:hover{border-color:#7c3aed;color:#7c3aed;transform:translateY(-2px) scale(1.03)}
.pill.active{border-color:#7c3aed;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(124,58,237,0.35)}
.pill.active::before{opacity:1}

/* ===== EMOJI GRID ===== */
.em-grid{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.em-pill{background:#f8f7ff;border:2px solid #e8e4f8;border-radius:12px;padding:9px 13px;font-size:1.15rem;cursor:pointer;transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);line-height:1;font-family:inherit}
.em-pill:hover{background:#faf5ff;border-color:#7c3aed;transform:scale(1.2) rotate(-5deg)}
.em-pill.active{background:linear-gradient(135deg,#7c3aed,#4f46e5);border-color:#7c3aed;box-shadow:0 4px 14px rgba(124,58,237,0.35);transform:scale(1.1)}

/* ===== GENERATE BUTTON ===== */
.gen-btn{width:100%;background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 50%,#7c3aed 100%);background-size:200% auto;color:#fff;border:none;padding:18px;border-radius:16px;font-size:1.05rem;font-weight:800;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:10px;letter-spacing:0.2px;box-shadow:0 8px 28px rgba(124,58,237,0.4);font-family:inherit;position:relative;overflow:hidden;animation:glow 3s ease infinite}
.gen-btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,0.2);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s}
.gen-btn:hover{background-position:right center;transform:translateY(-4px);box-shadow:0 16px 48px rgba(124,58,237,0.5)}
.gen-btn:active::before{width:300px;height:300px}

/* ===== RESULTS ===== */
.results-wrap{margin-top:28px}
.results-header{font-family:'Space Grotesk',sans-serif;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#7c3aed;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.res-card{background:#fff;border:2px solid #f0eeff;border-radius:20px;padding:26px;margin-bottom:16px;position:relative;transition:all 0.3s;overflow:hidden;animation:slideIn 0.4s ease both}
.res-card:nth-child(1){animation-delay:0.05s}
.res-card:nth-child(2){animation-delay:0.15s}
.res-card:nth-child(3){animation-delay:0.25s}
.res-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#7c3aed,#4f46e5,#f43f5e);opacity:0;transition:opacity 0.25s}
.res-card:hover{border-color:#c4b5fd;box-shadow:0 12px 40px rgba(124,58,237,0.12);transform:translateY(-3px)}
.res-card:hover::before{opacity:1}
.res-card-tag{font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:#a78bfa;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.res-card-text{font-size:0.97rem;color:#0d0d1a;line-height:1.85;white-space:pre-line;word-break:break-word;padding-right:100px;font-weight:500}
.res-card-meta{font-size:0.73rem;color:#bbb;margin-top:12px;font-weight:600}
.res-card-meta.over{color:#f43f5e;font-weight:700}
.res-copy-btn{position:absolute;top:22px;right:22px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border:none;border-radius:12px;padding:9px 18px;font-size:0.76rem;font-weight:700;cursor:pointer;transition:all 0.25s;white-space:nowrap;font-family:inherit;box-shadow:0 4px 14px rgba(124,58,237,0.3)}
.res-copy-btn:hover{transform:scale(1.06);box-shadow:0 8px 24px rgba(124,58,237,0.4)}
.res-copy-btn.copied{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 14px rgba(16,185,129,0.3)}

/* ===== TIPS CARD ===== */
.tips-card{background:linear-gradient(135deg,#faf5ff,#f0eeff);border:2px solid #e9d5ff;border-radius:20px;padding:28px;margin-top:22px;position:relative;overflow:hidden}
.tips-card::before{content:'💡';position:absolute;right:20px;top:20px;font-size:2.5rem;opacity:0.1}
.tips-card h3{font-family:'Space Grotesk',sans-serif;font-size:0.82rem;font-weight:700;color:#7c3aed;margin-bottom:16px;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:1px}
.tips-card ul{list-style:none;padding:0}
.tips-card li{font-size:0.84rem;color:#555;padding:8px 0 8px 28px;position:relative;border-bottom:1px solid rgba(124,58,237,0.06);line-height:1.6}
.tips-card li:last-child{border-bottom:none}
.tips-card li::before{content:"✓";position:absolute;left:0;color:#7c3aed;font-weight:900;font-size:0.9rem}

/* ===== SIDEBAR ===== */
.s-widget{background:#fff;border-radius:20px;padding:24px;margin-bottom:20px;box-shadow:0 2px 16px rgba(0,0,0,0.04);border:1.5px solid #f0eeff;transition:box-shadow 0.3s}
.s-widget:hover{box-shadow:0 8px 32px rgba(124,58,237,0.08)}
.s-widget-title{font-family:'Space Grotesk',sans-serif;font-size:0.7rem;font-weight:700;color:#0d0d1a;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #f0eeff;text-transform:uppercase;letter-spacing:1.5px}
.s-tool-list{list-style:none;padding:0}
.s-tool-list li{padding:9px 0;border-bottom:1px solid #f8f7ff}
.s-tool-list li:last-child{border-bottom:none}
.s-tool-list li a{font-size:0.85rem;color:#555;font-weight:600;display:flex;align-items:center;gap:9px;transition:all 0.2s;padding:2px 0;border-radius:8px}
.s-tool-list li a:hover{color:#7c3aed;text-decoration:none;padding-left:6px}

/* ===== STAT BOXES ===== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.stat-box{background:linear-gradient(135deg,#faf5ff,#f0eeff);border:2px solid #e9d5ff;border-radius:18px;padding:22px 14px;text-align:center;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.stat-box:hover{border-color:#c4b5fd;transform:translateY(-4px) scale(1.02);box-shadow:0 12px 32px rgba(124,58,237,0.12)}
.stat-box-num{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:700;background:linear-gradient(135deg,#7c3aed,#4f46e5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;transition:transform 0.3s}
.stat-box:hover .stat-box-num{transform:scale(1.1)}
.stat-box-label{font-size:0.67rem;color:#888;text-transform:uppercase;letter-spacing:0.8px;margin-top:6px;font-weight:700}

/* ===== HASHTAG CHIPS ===== */
.chip-wrap{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.chip{background:#f0eeff;color:#7c3aed;padding:9px 18px;border-radius:50px;font-size:0.84rem;font-weight:700;cursor:pointer;transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);border:2px solid transparent;user-select:none}
.chip:hover{background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;transform:scale(1.06) translateY(-2px);box-shadow:0 6px 18px rgba(124,58,237,0.3)}
.chip.chip-copied{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-color:transparent}

/* ===== PASSWORD ===== */
.pw-box{background:#0d0d1a;border-radius:16px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;border:1px solid #1e1e3a;transition:border-color 0.3s}
.pw-box:hover{border-color:#7c3aed}
.pw-val{font-family:'Space Grotesk',monospace;font-size:1rem;color:#a78bfa;font-weight:600;word-break:break-all;flex:1;letter-spacing:2px}
.pw-bars{display:flex;gap:5px;margin-top:16px}
.pw-bar{height:8px;flex:1;border-radius:4px;background:#1e1e3a;transition:background 0.5s,transform 0.3s}
.pw-bar.filled{transform:scaleY(1.2)}
.pw-strength-label{font-size:0.84rem;font-weight:800;margin-top:12px;font-family:'Space Grotesk',sans-serif}

/* ===== COLOR PICKER ===== */
.color-swatch-big{width:100%;height:190px;border-radius:20px;margin-bottom:24px;transition:all 0.4s;border:2px solid #f0eeff;cursor:pointer;box-shadow:0 8px 32px rgba(0,0,0,0.1)}
.color-fmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.color-fmt-box{background:#faf5ff;border:2px solid #e9d5ff;border-radius:16px;padding:18px;transition:all 0.25s;cursor:pointer}
.color-fmt-box:hover{border-color:#c4b5fd;transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,58,237,0.1)}
.color-fmt-label{font-size:0.65rem;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:#a78bfa;margin-bottom:6px}
.color-fmt-val{font-family:'Space Grotesk',monospace;font-size:0.93rem;font-weight:600;color:#0d0d1a;margin-bottom:10px}
.palette-wrap{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.pal-swatch{width:44px;height:44px;border-radius:14px;cursor:pointer;border:3px solid transparent;transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 2px 8px rgba(0,0,0,0.12)}
.pal-swatch:hover{transform:scale(1.25) translateY(-3px);border-color:#7c3aed;box-shadow:0 8px 24px rgba(0,0,0,0.2)}
.shades-wrap{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}
.shade-box{width:44px;height:44px;border-radius:12px;cursor:pointer;transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.shade-box:hover{transform:scale(1.2) translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.2)}

/* ===== PLATFORM BARS ===== */
.plat-bar-wrap{background:#faf5ff;border:2px solid #e9d5ff;border-radius:14px;padding:16px 18px;margin-bottom:12px;transition:all 0.25s}
.plat-bar-wrap:hover{border-color:#c4b5fd;transform:translateX(4px)}
.plat-bar-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.plat-bar-name{font-size:0.86rem;font-weight:700;color:#0d0d1a}
.plat-bar-count{font-size:0.82rem;font-weight:700}
.plat-bar-track{background:#e9d5ff;border-radius:50px;height:8px;overflow:hidden}
.plat-bar-fill{height:100%;border-radius:50px;transition:width 0.5s cubic-bezier(0.34,1.56,0.64,1)}

/* ===== USERNAME GRID ===== */
.un-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:11px;margin-top:6px}
.un-card{background:#faf5ff;border:2px solid #e9d5ff;border-radius:16px;padding:16px;cursor:pointer;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);text-align:center}
.un-card:hover{border-color:#7c3aed;background:#f0eeff;transform:translateY(-5px) scale(1.02);box-shadow:0 12px 32px rgba(124,58,237,0.15)}
.un-card-val{font-family:'Space Grotesk',monospace;font-size:0.93rem;font-weight:600;color:#0d0d1a;margin-bottom:7px}
.un-card-copy{font-size:0.68rem;color:#a78bfa;font-weight:700;text-transform:uppercase;letter-spacing:0.8px}

/* ===== MOBILE ===== */
@media(max-width:900px){.tool-page-wrap{grid-template-columns:1fr}.footer-body{grid-template-columns:1fr 1fr;gap:36px}.why-grid{grid-template-columns:1fr}}@media(max-width:768px){
  .hamburger{display:flex}
  nav{display:none;position:absolute;top:68px;left:0;right:0;background:rgba(255,255,255,0.97);backdrop-filter:blur(24px);border-top:1px solid #f0eeff;padding:16px 24px;box-shadow:0 12px 40px rgba(0,0,0,0.1)}
  nav.open{display:block}
  nav ul{flex-direction:column;gap:4px}
  nav ul li a{padding:12px 16px}
  .hero h1{font-size:2.6rem;letter-spacing:-1.5px}
  .hero-stats{padding:22px 28px}
  .hero-stat{padding:0 18px}
  .f-row{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .color-fmt-grid{grid-template-columns:1fr}
  .t-card{padding:24px 18px}
  .section-title{font-size:2rem}
  .tools-grid{grid-template-columns:1fr}
  .tool-page-hero h1{font-size:2rem}
  .footer-body{grid-template-columns:1fr 1fr;gap:32px;padding:48px 24px 36px}
  .footer-bottom-bar{flex-direction:column;text-align:center;gap:10px}
}
@media(max-width:480px){
  .hero h1{font-size:2rem;letter-spacing:-1px}
  .hero-stats{flex-direction:column;gap:18px;padding:24px}
  .hero-stat+.hero-stat::before{display:none}
  .footer-body{grid-template-columns:1fr;gap:28px;padding:40px 24px 32px}
  .footer-bottom-bar{flex-direction:column;text-align:center}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .hero-btns{flex-direction:column;align-items:center}
}