/* ==========================

   Global

========================== */



*{

    margin:0;

    padding:0;

    box-sizing:border-box;

    font-family:Arial,sans-serif;

}



html{

    scroll-behavior:smooth;

}



body{

    background:#0f172a;

    color:#fff;

    line-height:1.6;

}



/* ==========================

   Header

========================== */



header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 8%;

    background:#111827;

    position:sticky;

    top:0;

    z-index:999;

    flex-wrap:wrap;

}



.logo{

    font-size:28px;

    font-weight:bold;

    color:#fff;

    transition:.3s;

}



.logo:hover{

    transform:scale(1.05);

}



nav{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

}



nav a{

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



nav a:hover{

    color:#38bdf8;

}



/* ==========================

   Hero

========================== */



.hero{

    text-align:center;

    padding:90px 20px;

    background:linear-gradient(135deg,#111827,#1d4ed8);

    border-radius:0 0 35px 35px;

}



.hero h2{

    font-size:48px;

    margin-bottom:20px;

}



.hero p{

    max-width:700px;

    margin:auto;

    color:#d1d5db;

    font-size:20px;

}



.hero input,

.hero textarea,

.hero select{

    width:100%;

    max-width:700px;

    margin:30px auto 0;

    display:block;

}



/* ==========================

   Inputs

========================== */



input,

textarea,

select{

    width:100%;

    max-width:700px;

    padding:14px;

    border-radius:10px;

    border:1px solid #d1d5db;

    font-size:16px;

    outline:none;

    margin-bottom:18px;

}



textarea{

    resize:vertical;

    min-height:180px;

}



textarea:focus,

input:focus,

select:focus{

    border-color:#4f46e5;

}



/* ==========================

   Buttons

========================== */



button{

    background:linear-gradient(135deg,#4f46e5,#2563eb);

    color:#fff;

    border:none;

    padding:13px 26px;

    border-radius:10px;

    cursor:pointer;

    transition:.35s;

    font-size:16px;

    margin:5px;

}



button:hover{

    transform:translateY(-3px);

    background:linear-gradient(135deg,#4338ca,#1d4ed8);

}



/* ===========================

   Premium Dark Tool Cards

=========================== */



.tools{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    padding:70px 8%;

}



.card{

    position:relative;

    overflow:hidden;

    padding:30px;

    border-radius:20px;

    background:rgba(30,41,59,.75);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 10px 30px rgba(0,0,0,.35);

    transition:.4s ease;

}



.card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#06b6d4,#4f46e5,#8b5cf6);

}



.card:hover{

    transform:translateY(-12px) scale(1.03);

    box-shadow:0 20px 45px rgba(79,70,229,.45);

    border-color:#4f46e5;

}



.card h3{

    font-size:23px;

    margin-bottom:15px;

}



.card h3 a{

    color:#ffffff;

    text-decoration:none;

}



.card p{

    color:#cbd5e1;

    line-height:1.8;

    margin-bottom:25px;

}



.tool-btn{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:linear-gradient(135deg,#4f46e5,#06b6d4);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.tool-btn:hover{

    transform:scale(1.08);

    box-shadow:0 10px 30px rgba(79,70,229,.45);

}



/* ==========================

   Stats

========================== */



.stats{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    padding:70px 20px;

}



.stat-card{

    width:240px;

    background:#fff;

    border-radius:18px;

    padding:30px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}



.stat-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(79,70,229,.25);

}



.stat-icon{

    font-size:46px;

    margin-bottom:18px;

    transition:.35s;

}



.stat-card:hover .stat-icon{

    transform:scale(1.15) rotate(8deg);

}



.stat-card h2{

    color:#4f46e5;

    font-size:38px;

    margin-bottom:10px;

}



.stat-card p{

    color:#6b7280;

    font-size:18px;

}



/* ==========================

   Tool Container

========================== */



.container{

    max-width:900px;

    margin:50px auto;

    background:#fff;

    color:#111827;

    padding:35px;

    border-radius:18px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}



.container h1{

    text-align:center;

    margin-bottom:15px;

}



.container p{

    color:#6b7280;

    text-align:center;

}



/* ===========================

   PREMIUM FOOTER

=========================== */



.footer{

    background:linear-gradient(180deg,#0b1220,#111827);

    color:#fff;

    padding:80px 20px 30px;

    margin-top:100px;

}



.footer-top{

    max-width:900px;

    margin:auto;

    text-align:center;

}



.footer-logo h2{

    font-size:42px;

    font-weight:700;

    margin-bottom:18px;

}



.footer-logo span{

    color:#7c3aed;

}



.footer-logo p{

    max-width:700px;

    margin:auto;

    color:#cbd5e1;

    font-size:18px;

    line-height:1.9;

}



.footer-tags{

    margin-top:30px;

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}



.footer-tags span{

    background:#1e293b;

    color:#fff;

    padding:10px 22px;

    border-radius:40px;

    font-size:15px;

    border:1px solid rgba(255,255,255,.08);

    transition:.3s;

}



.footer-tags span:hover{

    background:#7c3aed;

    transform:translateY(-3px);

}



.footer-divider{

    width:100%;

    max-width:1200px;

    height:1px;

    margin:60px auto;

    background:linear-gradient(to right,transparent,#7c3aed,transparent);

}



.footer-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:60px;

}



.footer-col{

    text-align:center;

}



.footer-col h3{

    font-size:28px;

    margin-bottom:30px;

    color:#fff;

}



.footer-col ul{

    list-style:none;

    padding:0;

    margin:0;

}



.footer-col li{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin:18px 0;

}



.footer-col li i:first-child{

    color:#7c3aed;

    width:22px;

}



.footer-col li .arrow{

    color:#64748b;

    font-size:13px;

}



.footer-col a{

    color:#d1d5db;

    text-decoration:none;

    transition:.3s;

    font-size:17px;

}



.footer-col a:hover{

    color:#7c3aed;

}



.social-icons{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-bottom:25px;

}



.social-icons a{

    width:56px;

    height:56px;

    background:#1e293b;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    text-decoration:none;

    font-size:22px;

    transition:.35s;

    border:1px solid rgba(255,255,255,.08);

}



.social-icons a:hover{

    background:#7c3aed;

    transform:translateY(-6px);

    box-shadow:0 10px 25px rgba(124,58,237,.35);

}



.follow p{

    color:#cbd5e1;

    line-height:1.8;

    font-size:16px;

    max-width:280px;

    margin:auto;

}



.footer-bottom{

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    color:#94a3b8;

    font-size:15px;

}



.footer-bottom strong{

    color:#fff;

}



.footer-bottom i{

    color:#7c3aed;

}



/* ===================================

   PART 3 - Premium Effects & Fixes

=================================== */



::selection{

    background:#4f46e5;

    color:#fff;

}



::-webkit-scrollbar{

    width:10px;

}



::-webkit-scrollbar-track{

    background:#0f172a;

}



::-webkit-scrollbar-thumb{

    background:#4f46e5;

    border-radius:20px;

}



::-webkit-scrollbar-thumb:hover{

    background:#3730a3;

}



.badge{

    display:inline-block;

    padding:6px 12px;

    background:#ef4444;

    color:#fff;

    border-radius:30px;

    font-size:13px;

    font-weight:bold;

    margin-bottom:15px;

}



.card.featured{

    border:2px solid #4f46e5;

    position:relative;

}



.card.featured::after{

    content:"⭐ Featured";

    position:absolute;

    top:15px;

    right:15px;

    background:#4f46e5;

    color:#fff;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

}



.card img{

    width:70px;

    height:70px;

    object-fit:contain;

    margin-bottom:15px;

}



.section-title{

    font-size:40px;

    text-align:center;

    margin-bottom:15px;

    color:#fff;

}



.section-subtitle{

    text-align:center;

    color:#cbd5e1;

    margin-bottom:40px;

}



.announcement-bar{

    width:100%;

    background:linear-gradient(90deg,#4f46e5,#7c3aed);

    color:#fff;

    overflow:hidden;

    white-space:nowrap;

    padding:12px 0;

    font-weight:600;

}



.announcement-track{

    display:inline-block;

    padding-left:100%;

    animation:scrollText 25s linear infinite;

}



.announcement-bar:hover .announcement-track{

    animation-play-state:paused;

}



@keyframes scrollText{

    from{ transform:translateX(0); }

    to{ transform:translateX(-100%); }

}



.hero-content{

    width:100%;

    max-width:950px;

    margin:0 auto;

    text-align:center;

}



.hero-icon{

    font-size:42px;

    margin-bottom:20px;

}



.hero-content h1{

    font-size:52px;

    line-height:1.25;

    font-weight:700;

    margin-bottom:30px;

    text-align:center;

}



.hero-content p{

    max-width:850px;

    margin:0 auto 25px;

    font-size:22px;

    line-height:1.8;

    text-align:center;

}



.back-home{

    text-align:center;

    margin:20px 0;

}



.home-btn{

    display:inline-block;

    background:#4f46e5;

    color:#fff;

    padding:12px 25px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    transition:0.3s;

}



.home-btn:hover{

    background:#3730a3;

}



/* ==========================

   Tool Box & FAQ (Desktop)

========================== */



@media(min-width:1200px){

    .tool-page{

        display:flex;

        justify-content:center;

        align-items:center;

        padding:60px 20px;

    }



    .tool-box{

        width:100%;

        max-width:850px;

        background:#ffffff;

        color:#111827;

        padding:40px;

        border-radius:18px;

        box-shadow:0 15px 40px rgba(0,0,0,.15);

    }



    .tool-box h1,

    .tool-box p{

        text-align:center;

    }



    .tool-box h3{

        text-align:left;

        margin-top:20px;

        margin-bottom:8px;

    }



    .tool-box input,

    .tool-box textarea{

        width:100%;

        display:block;

        margin:0 auto 18px;

        padding:14px;

        border:1px solid #d1d5db;

        border-radius:10px;

        font-size:16px;

    }



    .tool-box textarea{

        min-height:180px;

        resize:vertical;

    }



    .button-area{

        display:flex;

        justify-content:center;

        gap:12px;

        flex-wrap:wrap;

        margin:25px 0;

    }



    .button-area button{

        min-width:170px;

    }

}



/* FAQ Section */



.faq-section{

    max-width:900px;

    margin:80px auto;

    padding:20px;

}



.faq-section h2{

    text-align:center;

    font-size:34px;

    margin-bottom:35px;

    color:#fff;

}



.faq{

    display:flex;

    flex-direction:column;

    gap:18px;

}



.faq details{

    background:#ffffff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.35s;

}



.faq details:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(79,70,229,.18);

}



.faq summary{

    list-style:none;

    cursor:pointer;

    padding:22px 25px;

    font-size:18px;

    font-weight:700;

    color:#111827;

    position:relative;

}



.faq summary::-webkit-details-marker{

    display:none;

}



.faq summary::after{

    content:"+";

    position:absolute;

    right:25px;

    top:18px;

    font-size:28px;

    color:#4f46e5;

    transition:.3s;

}



.faq details[open] summary::after{

    content:"−";

}



.faq p{

    padding:0 25px 22px;

    color:#555;

    line-height:1.8;

    font-size:16px;

}



/* About Section */



.about-section{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:70px 20px;

}



.about-content{

    width:100%;

    max-width:900px;

    text-align:center;

    margin:0 auto;

}



.about-content h2{

    font-size:38px;

    font-weight:700;

    line-height:1.4;

    margin-bottom:25px;

}



.about-content p{

    max-width:850px;

    margin:0 auto 22px;

    font-size:18px;

    line-height:1.9;

}



/* ==========================

   Responsive

========================== */



@media(max-width:768px){

    header{

        flex-direction:column;

        gap:15px;

    }

    .logo{

        font-size:22px;

    }

    .hero{

        padding:60px 20px;

    }

    .hero h2{

        font-size:32px;

    }

    .hero p{

        font-size:17px;

    }

    .tools{

        grid-template-columns:1fr;

        padding:25px;

    }

    .card{

        padding:22px;

    }

    .container{

        margin:20px;

        padding:20px;

    }

    .stat-card{

        width:100%;

        max-width:300px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .about-content h2{

        font-size:30px;

    }

    .about-content p{

        font-size:16px;

    }

}





/* ==========================================

   MOBILE CLICK & TOUCH OVERLAY FIX

   ========================================== */



/* Buttons ko sab se upar laane ke liye */

button, 

input[type="button"], 

input[type="submit"], 

.btn {

  position: relative !important;

  z-index: 99999 !important;

  pointer-events: auto !important;

  touch-action: manipulation !important;

  -webkit-tap-highlight-color: rgba(0,0,0,0);

}



/* Form Inputs Touch Fix */

input, textarea, select {

  position: relative !important;

  z-index: 9999 !important;

  pointer-events: auto !important;

}



/* Background overlays ko click block karne se rokna */

.container, .wrapper, .card, .main-content {

  overflow: visible !important;

}



}

/* =========================================================
   AI PRODUCT DESCRIPTION GENERATOR
   Add at the END of your existing style.css
========================================================= */

.pdg-page {
  width: 100%;
  min-height: 100vh;
  color: #fff;
}


/* =========================
   HERO
========================= */

.pdg-hero {
  width: min(900px, 92%);
  margin: 0 auto;
  padding: 65px 20px 40px;
  text-align: center;
}

.pdg-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  margin-bottom: 18px;

  border: 1px solid rgba(118, 87, 255, 0.4);
  border-radius: 50px;

  background: rgba(118, 87, 255, 0.1);
  color: #b8adff;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}

.pdg-hero h1 {
  margin: 0 0 15px;

  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.05;
  letter-spacing: -2px;
  font-weight: 900;

  color: #fff;
}

.pdg-hero p {
  max-width: 680px;
  margin: 0 auto;

  color: #929db7;

  font-size: 15px;
  line-height: 1.7;
}


/* =========================
   MAIN TOOL
========================= */

.pdg-container {
  width: min(1150px, 92%);
  margin: 0 auto;
  padding-bottom: 80px;
}

.pdg-tool {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 22px;
  align-items: start;
}


/* =========================
   CARDS
========================= */

.pdg-card {
  background:
    linear-gradient(
      145deg,
      rgba(16, 24, 39, 0.98),
      rgba(10, 16, 29, 0.98)
    );

  border: 1px solid #27324a;
  border-radius: 18px;

  padding: 25px;

  box-shadow:
    0 15px 45px rgba(0, 0, 0, 0.18);
}

.pdg-card h2 {
  margin: 0 0 7px;

  color: #fff;

  font-size: 20px;
  font-weight: 800;
}

.pdg-card-subtitle {
  margin: 0 0 25px;

  color: #7f8aa5;

  font-size: 12px;
  line-height: 1.6;
}


/* =========================
   FORM
========================= */

.pdg-field {
  margin-bottom: 18px;
}

.pdg-field label {
  display: block;

  margin-bottom: 8px;

  color: #dce2f0;

  font-size: 12px;
  font-weight: 750;
}

.pdg-field label span {
  color: #ff6b81;
}

.pdg-field label small {
  color: #68738d;
  font-weight: 500;
}

.pdg-field input,
.pdg-field textarea,
.pdg-field select {
  width: 100%;

  padding: 12px 13px;

  border: 1px solid #2a354d;
  border-radius: 9px;

  outline: none;

  background: #0a1120;
  color: #fff;

  font-family: inherit;
  font-size: 13px;

  transition: 0.2s;

  box-sizing: border-box;
}

.pdg-field input::placeholder,
.pdg-field textarea::placeholder {
  color: #56617a;
}

.pdg-field input:focus,
.pdg-field textarea:focus,
.pdg-field select:focus {
  border-color: #7657ff;

  box-shadow:
    0 0 0 3px rgba(118, 87, 255, 0.1);
}

.pdg-field textarea {
  min-height: 115px;
  resize: vertical;
  line-height: 1.6;
}

.pdg-field select {
  cursor: pointer;
}


/* =========================
   GENERATE BUTTON
========================= */

.pdg-generate {
  width: 100%;

  padding: 13px 16px;

  border: 0;
  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      #7657ff,
      #573ed0
    );

  color: #fff;

  font-family: inherit;
  font-size: 13px;
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 8px 25px rgba(118, 87, 255, 0.2);

  transition: 0.25s;
}

.pdg-generate:hover {
  transform: translateY(-1px);

  box-shadow:
    0 12px 30px rgba(118, 87, 255, 0.3);
}

.pdg-generate:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}


/* =========================
   CLEAR BUTTON
========================= */

.pdg-clear {
  width: 100%;

  margin-top: 9px;

  padding: 11px;

  border: 1px solid #303a50;
  border-radius: 9px;

  background: transparent;

  color: #8994ad;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  transition: 0.2s;
}

.pdg-clear:hover {
  color: #fff;
  border-color: #536079;
}


/* =========================
   RESULT HEADER
========================= */

.pdg-result-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 20px;
}

.pdg-result-header h2 {
  margin-bottom: 5px;
}

.pdg-result-header p {
  margin: 0;

  color: #707b95;

  font-size: 11px;
}


/* =========================
   COPY BUTTON
========================= */

.pdg-copy {
  flex-shrink: 0;

  padding: 8px 11px;

  border: 1px solid #303a51;
  border-radius: 8px;

  background: #111a2b;

  color: #b5bfd5;

  font-size: 11px;
  font-weight: 700;

  cursor: pointer;

  transition: 0.2s;
}

.pdg-copy:hover {
  color: #fff;
  border-color: #7657ff;
}


/* =========================
   EMPTY RESULT
========================= */

.pdg-empty {
  min-height: 470px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  padding: 30px;
}

.pdg-empty-icon {
  width: 62px;
  height: 62px;

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

  margin-bottom: 17px;

  border-radius: 17px;

  background: rgba(118, 87, 255, 0.1);

  border: 1px solid rgba(118, 87, 255, 0.2);

  font-size: 28px;
}

.pdg-empty h3 {
  margin: 0 0 8px;

  color: #fff;

  font-size: 17px;
}

.pdg-empty p {
  max-width: 330px;

  margin: 0;

  color: #68738e;

  font-size: 12px;

  line-height: 1.6;
}


/* =========================
   GENERATED CONTENT
========================= */

.pdg-generated {
  display: none;
}

.pdg-generated.active {
  display: block;
}

.pdg-output {
  margin-bottom: 16px;

  padding: 16px;

  background: #0a1120;

  border: 1px solid #222d43;

  border-radius: 11px;
}

.pdg-output-title {
  margin-bottom: 10px;

  color: #a99cff;

  font-size: 11px;
  font-weight: 850;

  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pdg-description {
  color: #c6cede;

  font-size: 13px;
  line-height: 1.75;

  white-space: pre-line;
}

.pdg-output ul {
  margin: 0;
  padding-left: 19px;
}

.pdg-output li {
  margin-bottom: 7px;

  color: #b9c2d5;

  font-size: 12px;
  line-height: 1.5;
}


/* =========================
   META OUTPUT
========================= */

.pdg-output-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;
}

.pdg-small-output {
  color: #b9c2d5;

  font-size: 12px;
  line-height: 1.65;
}


/* =========================
   SEO CONTENT
========================= */

.pdg-info {
  max-width: 850px;

  margin: 65px auto 0;
}

.pdg-info h2 {
  margin: 30px 0 12px;

  color: #fff;

  font-size: 25px;
  font-weight: 850;
}

.pdg-info h2:first-child {
  margin-top: 0;
}

.pdg-info p {
  margin: 0;

  color: #8792aa;

  font-size: 14px;
  line-height: 1.8;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {

  .pdg-tool {
    grid-template-columns: 1fr;
  }

  .pdg-empty {
    min-height: 300px;
  }

}


@media (max-width: 600px) {

  .pdg-hero {
    width: 94%;
    padding: 42px 10px 30px;
  }

  .pdg-hero h1 {
    font-size: 40px;
    letter-spacing: -1.3px;
  }

  .pdg-hero p {
    font-size: 13px;
  }

  .pdg-container {
    width: 94%;
  }

  .pdg-card {
    padding: 19px;
    border-radius: 15px;
  }

  .pdg-output-grid {
    grid-template-columns: 1fr;
  }

  .pdg-result-header {
    align-items: center;
  }

}


@media (max-width: 380px) {

  .pdg-hero h1 {
    font-size: 34px;
  }

}