/* ── RESET ── */
*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:16px;}
body{font-family:'Inter',sans-serif;background:#f5f6fa;color:#1a1a2e;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
button{font-family:'Inter',sans-serif;cursor:pointer;}

/* ══════════════════════════════
   NAVBAR  — height 62px
══════════════════════════════ */
.navbar{
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  height:62px;
  display:flex;
  align-items:center;
  padding:0 24px;
  gap:0;
  position:sticky;top:0;z-index:300;
}
/* Logo */
.nav-logo{
  display:flex;align-items:center;
  margin-right:32px;flex-shrink:0;
}
.logo-box{
  width:32px;height:32px;border-radius:8px;
  background:#2563eb;
  display:flex;align-items:center;justify-content:center;
  margin-right:8px;flex-shrink:0;
}
.logo-box span{font-size:16px;font-weight:900;color:#fff;line-height:1;}
.logo-text{display:flex;flex-direction:column;line-height:1;}
.logo-text .tw-name{font-size:17px;font-weight:800;color:#111827;letter-spacing:-0.3px;}
.logo-text .tw-name span{color:#2563eb;}
.logo-text .tw-by{font-size:9.5px;font-weight:400;color:#9ca3af;margin-top:1px;}

/* Nav links */
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-links a{
  font-size:14px;font-weight:500;color:#374151;
  padding:7px 13px;border-radius:8px;
  transition:background .13s;
  white-space:nowrap;
}
.nav-links a:hover{background:#f3f4f6;}

/* Right side */
.nav-right{
  margin-left:auto;
  display:flex;align-items:center;gap:6px;
}
.nav-icon{
  width:34px;height:34px;
  border:1px solid #e5e7eb;border-radius:8px;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  color:#6b7280;cursor:pointer;
  transition:background .13s;
  flex-shrink:0;
}
.nav-icon:hover{background:#f9fafb;}
.nav-icon svg{width:17px;height:17px;stroke-width:1.8;}
.nav-upgrade{
  font-size:13px;font-weight:500;color:#374151;
  padding:7px 13px;
  border:1px solid #e5e7eb;border-radius:8px;
  background:#fff;
  transition:background .13s;
}
.nav-upgrade:hover{background:#f9fafb;}
.nav-signin{
  background:#2563eb;color:#fff;
  border:none;
  padding:8px 16px;border-radius:8px;
  font-size:13px;font-weight:600;
  transition:background .13s;
}
.nav-signin:hover{background:#1d4ed8;}

/* ══════════════════════════════
   HERO  — pixel-perfect screenshot
══════════════════════════════ */
.hero{
  background:linear-gradient(160deg,#f0f2f8 0%,#eceef5 50%,#f2f4f9 100%);
  padding:80px 24px 80px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

/* ── Decorative shapes (exact positions from screenshot) ── */
.deco{position:absolute;pointer-events:none;}

/* Orange filled triangle — upper left */
.deco-tri{
  top:48px; left:6%;
  width:0;height:0;
  border-left:13px solid transparent;
  border-right:13px solid transparent;
  border-bottom:22px solid #f59e0b;
}
/* Pink hexagon — mid-left */
.deco-hex{
  top:52%; left:4.5%;
  width:20px; height:20px;
  background:#f472b6;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
/* Small red dot — left-center */
.deco-rdot{
  top:40%; left:9%;
  width:9px;height:9px;
  border-radius:50%;
  background:#f43f5e;
}
/* Blue inverted triangle — lower left */
.deco-tri2{
  bottom:28px; left:15%;
  width:0;height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:17px solid #6366f1;
  opacity:.75;
}
/* Blue dot — top center-left */
.deco-dot1{
  top:22px; left:37%;
  width:8px;height:8px;
  border-radius:50%;
  background:#60a5fa; opacity:.7;
}
/* Blue dot — top center-right */
.deco-dot2{
  top:20px; right:32%;
  width:7px;height:7px;
  border-radius:50%;
  background:#3b82f6; opacity:.55;
}
/* 3-D pink cube — top right */
.deco-cube{
  top:28px; right:5.5%;
  width:38px;height:38px;
  background:linear-gradient(135deg,#f9a8d4 0%,#ec4899 50%,#be185d 100%);
  border-radius:8px;
  transform:rotate(15deg);
  box-shadow:inset -4px -4px 8px rgba(0,0,0,.15);
}
/* Small pink dot — mid right */
.deco-dot3{
  top:45%; right:3%;
  width:10px;height:10px;
  border-radius:50%;
  background:#f472b6; opacity:.6;
}
/* Orange square — lower-right area */
.deco-sq{
  top:68%; right:8%;
  width:14px;height:14px;
  background:#fbbf24;
  border-radius:3px;
  transform:rotate(18deg);
}

/* ── H1 — large bold, exact match ── */
.hero h1{
  font-size:62px;
  font-weight:900;
  line-height:1.06;
  color:#0f172a;
  letter-spacing:-0.035em;
  margin-bottom:22px;
  white-space:nowrap;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
/* Hot-pink highlight box — "Your Life" */
.hero h1 .hl{
  background:#e5195f;
  color:#fff;
  padding:6px 22px 8px;
  border-radius:12px;
  font-size:62px;
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:1.1;
  display:inline-flex;
  align-items:center;
}

/* ── Subtitle ── */
.hero-sub{
  font-size:16.5px;
  font-weight:400;
  color:#6b7280;
  margin-bottom:44px;
  line-height:1.5;
}

/* ── Search bar — large pill, white, shadowed ── */
.hero-search{
  display:flex;
  align-items:center;
  width:100%;
  max-width:560px;
  margin:0 auto;
  background:#fff;
  border-radius:100px;
  padding:7px 7px 7px 22px;
  box-shadow:0 4px 24px rgba(0,0,0,.10);
}
.hero-search-icon{
  flex-shrink:0;
  display:flex;align-items:center;
  color:#3b82f6;
  margin-right:12px;
}
.hero-search-icon svg{width:21px;height:21px;stroke-width:2.3;}
.hero-search input{
  flex:1;
  border:none;outline:none;background:none;
  font-size:16px;
  font-family:'Inter',sans-serif;
  color:#111827;
  padding:8px 0;
}
.hero-search input::placeholder{
  color:#9ca3af;
  font-size:16px;
  font-weight:400;
}
.hero-search button{
  flex-shrink:0;
  background:#3b82f6;
  color:#fff;
  border:none;
  border-radius:100px;
  padding:12px 32px;
  font-size:15px;
  font-weight:600;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  transition:background .13s;
}
.hero-search button:hover{background:#2563eb;}

/* ══════════════════════════════
   CATEGORY SECTION — bg lavender
══════════════════════════════ */
.cats-section{
  background:linear-gradient(180deg,#eceef8 0%,#e8eaf5 60%,#eceef8 100%);
  padding:80px 24px 80px;
}
.cats-wrap{max-width:1200px;margin:0 auto;}
.cats-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}

/* Each column = colored card + white feat strip below */
.cat-col{display:flex;flex-direction:column;gap:10px;}

/* Colored card */
.cat-card{
  border-radius:18px;
  padding:20px 18px 22px;
  cursor:pointer;
  position:relative;
  transition:transform .18s,box-shadow .18s;
  flex:1;
}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.18);}
.cat-card.cpdf {background:linear-gradient(160deg,#7B5CE5 0%,#6348d5 100%);}
.cat-card.cimg {background:linear-gradient(160deg,#F07C2A 0%,#e06010 100%);}
.cat-card.cvid {background:linear-gradient(160deg,#D4245C 0%,#be1a4f 100%);}
.cat-card.cai  {background:linear-gradient(160deg,#3B72F0 0%,#2858d8 100%);}
.cat-card.cfile{background:linear-gradient(160deg,#1AA898 0%,#0d9080 100%);}

/* Top row: icon + badge */
.cat-top-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.cat-icon-wrap{
  width:44px;height:44px;
  background:rgba(255,255,255,.22);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.cat-icon-wrap svg{width:22px;height:22px;stroke:#fff;stroke-width:1.8;fill:none;}
.cat-badge{
  background:rgba(255,255,255,.22);
  color:#fff;
  font-size:11px;font-weight:600;
  padding:4px 12px;border-radius:100px;
  letter-spacing:.01em;
  white-space:nowrap;
}

/* Title row */
.cat-title-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;
}
.cat-name{
  font-size:19px;font-weight:800;
  color:#fff;letter-spacing:-0.01em;
  line-height:1.2;
}
.cat-arrow{color:rgba(255,255,255,.85);}
.cat-arrow svg{width:20px;height:20px;stroke-width:2.2;fill:none;display:block;}

/* Subtitle */
.cat-sub{
  font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,.82);
  line-height:1.4;
}

/* White featured tool strip — below each card */
.cat-feat-strip{
  background:#fff;
  border-radius:12px;
  padding:12px 16px;
  display:flex;align-items:center;gap:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.cat-feat-label{
  font-size:12px;font-weight:400;color:#9ca3af;
  white-space:nowrap;
}
.cat-feat-link{
  font-size:12px;font-weight:700;
  white-space:nowrap;
}
.cat-feat-link.cpdf{color:#7B5CE5;}
.cat-feat-link.cimg{color:#F07C2A;}
.cat-feat-link.cvid{color:#D4245C;}
.cat-feat-link.cai {color:#3B72F0;}
.cat-feat-link.cfile{color:#1AA898;}

/* ══════════════════════════════
   STATS BAR (hidden — removed)
══════════════════════════════ */
.stats-wrap{display:none;}
.stat{
  padding:22px 16px;
  text-align:center;
  border-right:1px solid #e5e7eb;
}
.stat:last-child{border-right:none;}
.stat-n{font-size:34px;font-weight:800;color:#2563eb;line-height:1;letter-spacing:-0.02em;}
.stat-l{font-size:12.5px;font-weight:400;color:#9ca3af;margin-top:5px;line-height:1.35;}

/* ══════════════════════════════
   POPULAR TOOLS SECTION
══════════════════════════════ */
.pop-section{
  background:linear-gradient(180deg,#e8eaf5 0%,#eceef8 100%);
  padding:80px 24px 80px;
}
.pop-wrap{max-width:1160px;margin:0 auto;}
.sec-h{
  font-size:48px;font-weight:900;
  color:#0f172a;text-align:center;
  letter-spacing:-0.03em;margin-bottom:14px;
}
.sec-s{
  font-size:16px;font-weight:400;
  color:#6b7280;text-align:center;
  margin-bottom:32px;
}

/* Tab pill container */
.tabs-container{
  background:#fff;
  border-radius:100px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:0;
  margin:0 auto 36px;
  box-shadow:0 2px 16px rgba(0,0,0,.08);
  width:100%;
  max-width:1100px;
}
.tab{
  display:flex;align-items:center;gap:7px;
  padding:10px 22px;border-radius:100px;
  font-size:15px;font-weight:500;
  border:none;background:none;
  color:#374151;cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
  flex:1;justify-content:center;
}
.tab:hover{color:#F66213;}
.tab.on{background:#F66213;color:#fff;}
.tab svg{width:17px;height:17px;stroke-width:1.8;fill:none;flex-shrink:0;}

/* Tool cards grid */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.tcrd{
  background:#fff;
  border:1px solid #e8eaf0;
  border-radius:16px;
  padding:20px 18px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:4px;
  transition:box-shadow .15s,transform .15s;
  text-decoration:none;color:inherit;
}
.tcrd:hover{
  box-shadow:0 6px 20px rgba(0,0,0,.09);
  transform:translateY(-2px);
}
/* Top row: icon + name */
.tcrd-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:4px;}
.tcrd-icon{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.tcrd-icon svg{width:24px;height:24px;stroke-width:1.8;fill:none;}
/* icon bg colors */
.icon-ai  {background:#f0fdf4;} .icon-ai svg{stroke:#22c55e;}
.icon-ai2 {background:#fef3c7;} .icon-ai2 svg{stroke:#f59e0b;}
.icon-ai3 {background:#eff6ff;} .icon-ai3 svg{stroke:#3b82f6;}
.icon-img {background:#fdf4ff;} .icon-img svg{stroke:#a855f7;}
.icon-img2{background:#fff1f2;} .icon-img2 svg{stroke:#f43f5e;}
.icon-img3{background:#f0fdf4;} .icon-img3 svg{stroke:#10b981;}
.icon-img4{background:#fef9c3;} .icon-img4 svg{stroke:#eab308;}
.icon-pdf {background:#fdf2f8;} .icon-pdf svg{stroke:#ec4899;}
.icon-pdf2{background:#eff6ff;} .icon-pdf2 svg{stroke:#60a5fa;}
.icon-pdf3{background:#fff7ed;} .icon-pdf3 svg{stroke:#f97316;}
.icon-vid {background:#eff6ff;} .icon-vid svg{stroke:#3b82f6;}
.icon-vid2{background:#fdf4ff;} .icon-vid2 svg{stroke:#a855f7;}
.icon-conv{background:#f0fdfa;} .icon-conv svg{stroke:#14b8a6;}
.icon-conv2{background:#fef9c3;} .icon-conv2 svg{stroke:#eab308;}

.tcrd-info{flex:1;}
.tcrd-name{font-size:15px;font-weight:700;color:#0f172a;line-height:1.3;margin-bottom:3px;}
.tcrd-cat{font-size:12px;font-weight:600;}
.tcrd-cat.cai   {color:#7c3aed;}
.tcrd-cat.cimg  {color:#db2777;}
.tcrd-cat.cpdf  {color:#db2777;}
.tcrd-cat.cvid  {color:#2563eb;}
.tcrd-cat.cconv {color:#0d9488;}
.tcrd-cat.coth  {color:#7c3aed;}
.tcrd-desc{font-size:13px;color:#6b7280;line-height:1.5;margin-top:6px;}

.all-btn-wrap{text-align:center;margin-top:28px;}
.all-btn{
  display:inline-block;
  border:1.5px solid #d1d5db;
  color:#374151;
  padding:11px 36px;border-radius:10px;
  font-size:14px;font-weight:500;
  background:#fff;transition:all .13s;
}
.all-btn:hover{border-color:#2563eb;color:#2563eb;}

/* ══════════════════════════════
   FREE TOOLS CAROUSEL
══════════════════════════════ */
.free-wrap{
  background:#f0f2f8;
  padding:80px 0 80px;
}
.free-inner{max-width:1200px;margin:0 auto;padding:0 32px;}
.free-top{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:6px;
}
.free-title{
  font-size:32px;font-weight:800;color:#0f172a;
  letter-spacing:-0.02em;line-height:1.1;
  flex:1;text-align:center;
  padding-right:100px;
}
.free-sub{
  font-size:14px;color:#6b7280;
  line-height:1.7;margin-bottom:32px;
  text-align:center;
}
.free-arrows{display:flex;gap:10px;margin-top:6px;}
.farr{
  width:42px;height:42px;border-radius:50%;
  border:1.5px solid #d1d5db;background:#fff;
  display:flex;align-items:center;justify-content:center;
  color:#6b7280;cursor:pointer;
  transition:all .15s;flex-shrink:0;
}
.farr:hover{border-color:#2563eb;color:#2563eb;}
.farr.active-arr{background:#2563eb;border-color:#2563eb;color:#fff;}
.farr svg{width:18px;height:18px;stroke-width:2.2;fill:none;stroke:currentColor;}

/* Carousel viewport */
.carousel-viewport{
  overflow:hidden;
  border-radius:0;
}
.carousel-track{
  display:flex;
  gap:20px;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94);
}
/* Each slide = 3 cards visible, calc width */
.fcrd{
  background:#fff;
  border:1px solid #e8eaf0;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  flex:0 0 calc((100% - 40px) / 3);
  min-width:0;
  transition:transform .2s,box-shadow .2s;
  text-decoration:none;color:inherit;
}
.fcrd:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.10);
}
/* Preview image area */
.fcrd-img{
  height:200px;
  overflow:hidden;
  background:#f1f5f9;
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.fcrd-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .3s;
}
.fcrd:hover .fcrd-img img{transform:scale(1.03);}
.fcrd-img.gb1{background:linear-gradient(135deg,#eff6ff,#e0e7ff);}
.fcrd-img.gb2{background:linear-gradient(135deg,#fdf2f8,#fce7f3);}
.fcrd-img.gb3{background:linear-gradient(135deg,#f0fdf4,#dcfce7);}
.fcrd-img.gb4{background:linear-gradient(135deg,#fffbeb,#fef9c3);}
.fcrd-img.gb5{background:linear-gradient(135deg,#f5f3ff,#ede9fe);}
.fcrd-img.gb6{background:linear-gradient(135deg,#fff7ed,#ffedd5);}
/* emoji fallback */
.fcrd-img .fcrd-emoji{font-size:64px;line-height:1;}

/* Card body */
.fcrd-body{padding:22px 22px 20px;}
.fcrd-title{
  font-size:18px;font-weight:800;
  color:#0f172a;margin-bottom:8px;
  letter-spacing:-0.01em;
}
.fcrd-desc{
  font-size:14px;color:#6b7280;
  line-height:1.55;margin-bottom:16px;
}
.fcrd-link{
  font-size:14px;font-weight:600;color:#2563eb;
  display:flex;align-items:center;gap:5px;
  transition:gap .15s;
}
.fcrd:hover .fcrd-link{gap:8px;}
.fcrd-link svg{width:14px;height:14px;stroke-width:2.2;fill:none;stroke:currentColor;}

/* Dots indicator */
.carousel-dots{
  display:flex;justify-content:center;gap:8px;
  margin-top:28px;
}
.cdot{
  width:8px;height:8px;border-radius:50%;
  background:#d1d5db;cursor:pointer;
  transition:all .2s;
}
.cdot.active{background:#2563eb;width:24px;border-radius:4px;}

/* ══════════════════════════════
   PREMIUM
══════════════════════════════ */
.prem-wrap{max-width:100%;margin:0;padding:0;}
.prem-box{
  background:linear-gradient(135deg,#F07C2A 0%,#e85d10 30%,#c94400 60%,#a83200 100%);
  padding:80px 10% 80px 8%;
  display:flex;align-items:center;gap:60px;
  position:relative;overflow:hidden;
  border-radius:0;
}
/* decorative blobs */
.prem-box::before{
  content:'';position:absolute;
  width:400px;height:400px;border-radius:50%;
  background:rgba(255,255,255,.05);
  top:-100px;right:30%;
  pointer-events:none;
}
.prem-box::after{
  content:'';position:absolute;
  width:250px;height:250px;border-radius:50%;
  background:rgba(255,255,255,.04);
  bottom:-80px;left:40%;
  pointer-events:none;
}
.prem-left{flex:1;position:relative;z-index:1;}
.prem-left h2{
  font-size:40px;font-weight:800;
  color:#fff;margin-bottom:18px;
  letter-spacing:-0.02em;line-height:1.1;
}
.prem-left p{
  font-size:16px;color:rgba(255,255,255,.88);
  line-height:1.7;max-width:520px;margin-bottom:32px;
}
.prem-feats{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:36px;}
.pf{
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:500;color:#fff;
}
.pf-icon{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.pf-icon svg{width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none;}
.prem-btn{
  background:#fff;color:#e85d10;
  border:none;border-radius:12px;
  padding:15px 36px;
  font-size:16px;font-weight:700;
  font-family:'Inter',sans-serif;
  cursor:pointer;transition:all .15s;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
  display:inline-block;
}
.prem-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.2);}

/* Right side — laptop illustration */
.prem-right{
  flex-shrink:0;
  position:relative;z-index:1;
  width:440px;
}
.prem-laptop-wrap{
  position:relative;
  width:100%;
}
/* Laptop screen layers */
.laptop-bg{
  background:rgba(255,255,255,.12);
  border-radius:24px;
  width:100%;padding-bottom:68%;
  position:relative;
}
.laptop-inner{
  position:absolute;inset:12px;
  background:rgba(255,255,255,.1);
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
}
/* App icons floating */
.prem-icons-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  padding:20px;
  width:100%;
}
.prem-app-icon{
  background:#fff;
  border-radius:14px;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  margin:0 auto;
  transition:transform .2s;
}
.prem-app-icon:hover{transform:scale(1.08);}
.prem-center-logo{
  width:72px;height:72px;
  background:linear-gradient(135deg,#5b8dee,#3b72f0);
  border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  margin:0 auto;
}
.prem-center-logo svg{width:36px;height:36px;stroke:#fff;stroke-width:1.8;fill:none;}

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
footer{
  background:#fff;
  border-top:1px solid #e5e7eb;
  margin-top:60px;
  padding:80px 24px 80px;
}
.ft-inner{max-width:1200px;margin:0 auto;}
.ft-top{
  display:grid;
  grid-template-columns:250px 130px 1fr;
  gap:44px;
  margin-bottom:36px;
}
.ft-brand{}
.ft-logo{display:flex;align-items:center;margin-bottom:14px;}
.ft-logo .lb{
  width:28px;height:28px;border-radius:7px;
  background:#2563eb;display:flex;align-items:center;justify-content:center;
  margin-right:7px;font-size:14px;font-weight:900;color:#fff;
}
.ft-logo-text{font-size:16px;font-weight:800;color:#111827;}
.ft-logo-text span{color:#2563eb;}
.ft-desc{font-size:13px;color:#6b7280;line-height:1.65;}
.ft-col h4{
  font-size:11.5px;font-weight:700;color:#111827;
  text-transform:uppercase;letter-spacing:.07em;
  margin-bottom:14px;
}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.ft-col ul li a{font-size:13px;color:#6b7280;transition:color .13s;}
.ft-col ul li a:hover{color:#2563eb;}
.ft-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:9px 16px;}
.ft-tools a{font-size:13px;color:#6b7280;transition:color .13s;white-space:nowrap;}
.ft-tools a:hover{color:#2563eb;}
.ft-bottom{
  border-top:1px solid #e5e7eb;
  padding-top:18px;
  display:flex;justify-content:space-between;align-items:center;
}
.ft-copy{font-size:12.5px;color:#9ca3af;}
.ft-jenni{font-size:12.5px;color:#9ca3af;display:flex;gap:4px;}
/* ══════════════════════════════
   NAV DROPDOWNS
══════════════════════════════ */
.nav-item{position:relative;}
.nav-item>a{
  display:flex;align-items:center;gap:4px;
  font-size:14px;font-weight:500;color:#374151;
  padding:7px 13px;border-radius:8px;
  cursor:pointer;transition:background .13s;
  white-space:nowrap;
}
.nav-item>a:hover,.nav-item.open>a{background:#f3f4f6;color:#111827;}
.nav-item>a svg{width:13px;height:13px;stroke-width:2.5;transition:transform .2s;}
.nav-item.open>a svg{transform:rotate(180deg);}

/* Dropdown panel */
.nav-drop{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  padding-top:8px;
  background:transparent;
  z-index:999;
  min-width:580px;
}
.nav-drop-inner{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 16px 48px rgba(0,0,0,.12);
  padding:24px;
  display:flex;
  gap:28px;
}
.nav-item:hover .nav-drop{display:block;}
.nav-item:hover>a{background:#f3f4f6;color:#111827;}
.nav-item:hover>a svg{transform:rotate(180deg);}

/* Wide dropdown for Image tab */
.nav-drop-wide{min-width:900px !important;}
.nav-drop-wide .nav-drop-inner{flex-direction:column;gap:0;padding:0;}

/* AI Tools left panel + featured right panel */
.drop-wide-top{display:flex;gap:0;}

/* Left AI tools column */
.drop-ai-col{
  flex:0 0 200px;
  border-right:1px solid #f1f5f9;
  padding:24px 16px 24px 20px;
}
.drop-ai-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 10px;border-radius:10px;
  cursor:pointer;transition:background .13s;
  text-decoration:none;color:inherit;
  margin-bottom:2px;
}
.drop-ai-item:hover{background:#f8fafc;}
.drop-ai-item.featured{align-items:flex-start;margin-bottom:12px;padding-bottom:16px;border-bottom:1px solid #f1f5f9;}
.drop-ai-icon{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.drop-ai-icon.featured-icon{width:52px;height:52px;border-radius:12px;}
.drop-ai-icon svg{width:20px;height:20px;stroke-width:1.8;fill:none;}
.dai-pink{background:#fdf2f8;} .dai-pink svg{stroke:#db2777;}
.dai-yellow{background:#fefce8;} .dai-yellow svg{stroke:#ca8a04;}
.dai-red{background:#fff1f2;} .dai-red svg{stroke:#e11d48;}
.dai-teal{background:#f0fdfa;} .dai-teal svg{stroke:#0d9488;}
.dai-purple{background:#f5f3ff;} .dai-purple svg{stroke:#7c3aed;}
.dai-orange{background:#fff7ed;} .dai-orange svg{stroke:#ea580c;}
.drop-ai-text .name{font-size:14px;font-weight:500;color:#111827;}
.drop-ai-text .desc{font-size:12px;color:#9ca3af;line-height:1.4;margin-top:2px;}

/* Right featured cards column */
.drop-feat-col{
  flex:1;
  padding:24px 24px 20px 24px;
  display:flex;flex-direction:column;gap:0;
}
.drop-feat-cards{display:flex;gap:14px;margin-bottom:20px;}
.drop-feat-card{
  flex:1;border:1px solid #e8eaf0;border-radius:12px;
  overflow:hidden;cursor:pointer;
  transition:box-shadow .15s,transform .15s;
  text-decoration:none;color:inherit;
}
.drop-feat-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1);transform:translateY(-2px);}
.drop-feat-card-img{
  height:110px;
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.drop-feat-card-img img{width:100%;height:100%;object-fit:cover;}
.drop-feat-card-img.ci1{background:linear-gradient(135deg,#fef3c7,#fed7aa);}
.drop-feat-card-img.ci2{background:linear-gradient(135deg,#d1fae5,#a7f3d0);}
.drop-feat-card-img.ci3{background:linear-gradient(135deg,#ede9fe,#ddd6fe);}
.drop-feat-card-body{padding:10px 12px 12px;}
.drop-feat-card-title{font-size:13px;font-weight:700;color:#111827;margin-bottom:2px;}
.drop-feat-card-desc{font-size:11.5px;color:#9ca3af;}
.drop-feat-card-arrow{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:#f97316;margin-top:6px;}
.drop-feat-card-arrow svg{width:12px;height:12px;stroke:#f97316;stroke-width:2.5;fill:none;}

/* Other tools grid bottom */
.drop-wide-bottom{
  border-top:1px solid #f1f5f9;
  padding:18px 24px 20px;
}
.drop-other-grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px 8px;
  margin-top:10px;
}
.drop-featured{
  flex:0 0 220px;
  border-right:1px solid #f1f5f9;
  padding-right:24px;
}
.drop-section-label{
  font-size:10px;font-weight:700;
  color:#9ca3af;letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.drop-feat-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 10px;border-radius:10px;
  cursor:pointer;transition:background .13s;
  text-decoration:none;color:inherit;
  margin-bottom:4px;
}
.drop-feat-item:hover{background:#f8fafc;}
.drop-feat-icon{
  width:42px;height:42px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.drop-feat-icon svg{width:20px;height:20px;stroke-width:1.8;fill:none;}
.dfi-pink{background:#fdf2f8;} .dfi-pink svg{stroke:#db2777;}
.dfi-teal{background:#f0fdfa;} .dfi-teal svg{stroke:#0d9488;}
.dfi-purple{background:#f5f3ff;} .dfi-purple svg{stroke:#7c3aed;}
.dfi-orange{background:#fff7ed;} .dfi-orange svg{stroke:#ea580c;}
.drop-feat-text{}
.drop-feat-name{font-size:14px;font-weight:600;color:#111827;margin-bottom:2px;}
.drop-feat-desc{font-size:12px;color:#9ca3af;line-height:1.4;}

/* Right: other tools */
.drop-other{flex:1;}
.drop-other-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 16px;
  margin-top:2px;
}
.drop-other-link{
  font-size:14px;color:#374151;
  padding:8px 10px;border-radius:8px;
  cursor:pointer;text-decoration:none;
  transition:background .13s,color .13s;
  display:block;
}
.drop-other-link:hover{background:#f8fafc;color:#2563eb;}
.drop-other-link.all{color:#2563eb;font-weight:600;}
.drop-other-link.all:hover{background:#eff6ff;}


/* ══════════════════════════════
   FULLY RESPONSIVE — ALL DEVICES
══════════════════════════════ */

/* ── Large Desktop (1400px+) ── */
@media (min-width: 1400px) {
  .tgrid { grid-template-columns: repeat(4,1fr); }
  .feat-strip { grid-template-columns: repeat(4,1fr); }
}

/* ── Tablet Landscape (1024px) ── */
@media (max-width: 1024px) {
  .tgrid { grid-template-columns: repeat(3,1fr) !important; }
  .feat-strip { grid-template-columns: repeat(2,1fr) !important; }
  .seo-2col { grid-template-columns: 1fr !important; gap: 20px; }
  .ft-top { grid-template-columns: 1fr 1fr !important; gap: 32px; }
  .ft-tools-grid { grid-template-columns: repeat(3,1fr) !important; }
  .page-content { grid-template-columns: 1fr !important; }
  .sidebar { display: none !important; }
  .howto .steps { grid-template-columns: repeat(3,1fr) !important; }
  .cats-grid { grid-template-columns: repeat(3,1fr) !important; }
  .tools-grid { grid-template-columns: repeat(3,1fr) !important; }
  .tabs-container { max-width: 100% !important; flex-wrap: wrap !important; }
}

/* ── Tablet Portrait (768px) ── */
@media (max-width: 768px) {
  /* NAVBAR */
  .navbar { padding: 0 16px !important; height: 56px !important; position: sticky; top: 0; z-index: 300; }
  .nav-links { display: none !important; }
  .nav-upgrade { display: none !important; }
  .nav-icon:not(:last-of-type) { display: none !important; }
  .nav-drop { display: none !important; }
  .logo-text .tw-name { font-size: 15px !important; }
  .logo-text .tw-by { font-size: 8px !important; }
  .logo-box { width: 28px !important; height: 28px !important; }

  /* HERO */
  .page-hero { padding: 44px 16px 40px !important; }
  .page-hero h1 { font-size: 30px !important; }
  .page-hero p { font-size: 14px !important; }
  .hero h1 { font-size: 30px !important; white-space: normal !important; flex-direction: column !important; gap: 8px !important; }
  .hero h1 .hl { font-size: 30px !important; }
  .hero { padding: 44px 16px 40px !important; }
  .hero-search { max-width: 100% !important; padding: 5px 5px 5px 14px !important; }
  .hero-search input { font-size: 13px !important; }
  .hero-search button { padding: 9px 16px !important; font-size: 13px !important; }
  .stats { flex-wrap: wrap !important; gap: 24px !important; padding-top: 28px !important; }

  /* CATEGORY CARDS */
  .cats-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  .cats-section { padding: 24px 16px 0 !important; }
  .cat-name { font-size: 15px !important; }
  .cat-sub { font-size: 11px !important; }

  /* TOOLS TABS */
  .tabs-container { padding: 5px !important; gap: 2px !important; flex-wrap: wrap !important; }
  .tab { padding: 7px 10px !important; font-size: 12px !important; flex: none !important; }
  .pop-section { padding: 40px 16px 40px !important; }
  .pop-wrap { padding: 0 !important; }
  .tools-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  .tgrid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }

  /* TOOL CARD BODY */
  .vid-body, .img-body, .pdf-body, .write-body { padding: 0 16px 60px !important; margin-top: 24px !important; }

  /* FEATURED */
  .feat-strip { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }

  /* STATS BAR */
  .stats-bar { grid-template-columns: repeat(2,1fr) !important; }
  .stat-n { font-size: 24px !important; }

  /* FREE TOOLS CAROUSEL */
  .free-wrap { padding: 40px 0 40px !important; }
  .free-inner { padding: 0 16px !important; }
  .carousel-track { gap: 12px !important; }
  .fcrd { flex: 0 0 calc(100% - 24px) !important; }
  .fcrd-img { height: 140px !important; }
  .free-title { font-size: 22px !important; padding-right: 60px !important; }

  /* PREMIUM */
  .prem-box { flex-direction: column !important; padding: 36px 24px !important; }
  .prem-left h2 { font-size: 24px !important; }
  .prem-left p { font-size: 14px !important; }
  .prem-feats { gap: 14px !important; }
  .prem-right { display: none !important; }

  /* WHY US SECTION */
  .why-grid { grid-template-columns: repeat(2,1fr) !important; gap: 14px !important; }

  /* FAQ */
  .faq-section, .faq-wrap { padding: 0 16px 60px !important; }
  .faq-wrap h2, .faq-section h2 { font-size: 22px !important; }
  .faq-q { font-size: 13.5px !important; }
  .faq-btn { padding: 16px 18px !important; }
  .faq-body { padding: 0 18px 16px !important; font-size: 13px !important; }

  /* SEO SECTIONS */
  .seo-wrap, .seo-section { padding: 40px 16px 0 !important; }
  .seo-2col { grid-template-columns: 1fr !important; gap: 16px !important; }
  .seo-full h2 { font-size: 18px !important; }
  .seo-full p { font-size: 13.5px !important; }
  .sec-h { font-size: 22px !important; }

  /* MERGE PDF TOOL */
  .tool-header { padding: 20px 16px 24px !important; }
  .tool-header-inner { flex-direction: column !important; gap: 12px !important; }
  .tool-hdr-title { font-size: 22px !important; }
  .tool-hdr-desc { font-size: 13px !important; }
  .page-content { grid-template-columns: 1fr !important; padding: 0 16px 40px !important; }
  .sidebar { display: none !important; }
  .tool-card { padding: 24px 16px !important; }
  .howto { padding: 24px 16px !important; grid-column: 1 !important; }
  .howto h3 { font-size: 18px !important; }
  .steps { grid-template-columns: 1fr !important; gap: 20px !important; }
  .actions-row { flex-direction: column !important; gap: 10px !important; }
  .merge-btn { width: 100% !important; justify-content: center !important; }
  .add-btn { width: 100% !important; justify-content: center !important; }
  .drop-zone { padding: 36px 16px !important; }
  .dz-title { font-size: 16px !important; }
  .dz-sub { font-size: 13px !important; }
  .breadcrumb { padding: 10px 16px !important; font-size: 12px !important; }

  /* FILTER BAR */
  .filter-bar { top: 56px !important; }
  .ftab { padding: 12px 12px !important; font-size: 12px !important; }
  .ftab-count { display: none !important; }
  .filter-bar-inner { gap: 0 !important; }

  /* FOOTER */
  .ft-top { grid-template-columns: 1fr !important; gap: 24px !important; }
  .ft-tools-grid, .ft-tools { grid-template-columns: repeat(2,1fr) !important; }
  .ft-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
  footer { padding: 36px 16px 20px !important; }
}

/* ── Mobile Portrait (480px) ── */
@media (max-width: 480px) {
  .tgrid { grid-template-columns: 1fr !important; }
  .tools-grid { grid-template-columns: 1fr !important; }
  .cats-grid { grid-template-columns: 1fr !important; }
  .feat-strip { grid-template-columns: 1fr !important; }
  .page-hero h1 { font-size: 24px !important; }
  .hero h1 { font-size: 22px !important; }
  .hero h1 .hl { font-size: 22px !important; }
  .stats { flex-direction: column !important; gap: 16px !important; align-items: center !important; }
  .stats-bar { grid-template-columns: repeat(2,1fr) !important; }
  .tabs-container { justify-content: flex-start !important; overflow-x: auto !important; flex-wrap: nowrap !important; padding-bottom: 4px !important; }
  .prem-feats { flex-direction: column !important; }
  .why-grid { grid-template-columns: 1fr !important; }
  .cat-col { flex-direction: column !important; }
}

/* ── Small Mobile (360px) ── */
@media (max-width: 360px) {
  .page-hero h1 { font-size: 20px !important; }
  .hero h1 { font-size: 18px !important; }
  .nav-signin { padding: 6px 12px !important; font-size: 12px !important; }
  .tcrd-name { font-size: 13px !important; }
  .tcrd-desc { font-size: 11px !important; }
}

/* ══════════════════════════════════════════════
   NAVBAR STACKING + DROPDOWN VARIANTS
══════════════════════════════════════════════ */
.navbar{position:sticky;top:0;z-index:9000;}
.nav-item{position:relative;}
.nav-drop{z-index:9001;}
.page-hero{position:relative;z-index:0;}

/* File menu = sirf featured items -> 2 column grid */
.drop-featured.drop-feat-grid{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 18px;
  border-right:none;
  padding-right:0;
}
.drop-featured.drop-feat-grid .drop-section-label{grid-column:1/-1;}

/* ══════════════════════════════════════════════
   MOBILE MENU  (ye CSS pehle missing thi)
══════════════════════════════════════════════ */
.mobile-toggle{
  display:none;
  margin-left:auto;
  width:38px;height:38px;
  border:1px solid #e5e7eb;border-radius:8px;
  background:#fff;color:#374151;
  align-items:center;justify-content:center;
  flex-shrink:0;
}
.mobile-toggle svg{width:20px;height:20px;}

.mobile-menu{
  display:none;
  position:fixed;
  top:56px;left:0;right:0;bottom:0;
  background:#fff;
  z-index:8999;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mobile-menu.open{display:block;}
.mobile-menu-inner{padding:16px 18px 40px;}

.mob-section{border-bottom:1px solid #f1f5f9;}
.mob-section-head{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 4px;
  background:none;border:none;
  font-family:'Inter',sans-serif;
  font-size:15px;font-weight:600;color:#111827;
  text-align:left;cursor:pointer;
}
.mob-section-head svg{
  width:18px;height:18px;
  stroke-width:2.2;fill:none;stroke:#9ca3af;
  transition:transform .25s;flex-shrink:0;
}
.mob-section.open .mob-section-head svg{transform:rotate(180deg);}

.mob-section-body{display:none;padding:0 0 12px;}
.mob-section.open .mob-section-body{display:block;}

.mob-link{
  display:block;
  padding:11px 12px;
  border-radius:8px;
  font-size:14px;color:#4b5563;
  text-decoration:none;
  transition:background .13s,color .13s;
}
.mob-link:hover,.mob-link:active{background:#f8fafc;color:#2563eb;}

.mob-all-link{
  display:block;
  padding:11px 12px;
  margin-bottom:4px;
  border-radius:8px;
  font-size:14px;font-weight:600;color:#2563eb;
  background:#eff6ff;
  text-decoration:none;
}

.mob-signin{
  width:100%;
  margin-top:10px;
  padding:12px;
  border:none;border-radius:10px;
  background:#2563eb;color:#fff;
  font-family:'Inter',sans-serif;
  font-size:14px;font-weight:600;
  text-align:center;cursor:pointer;
}

/* Mobile pe hamburger dikhao, desktop links chhupao */
@media (max-width:768px){
  .mobile-toggle{display:flex;}
  .nav-right{display:none;}
  .mobile-menu{top:56px;}
}
@media (min-width:769px){
  .mobile-toggle{display:none;}
  .mobile-menu{display:none !important;}
}