/*
Theme Name: Keywords Insider
Theme URI: https://keywordsinsider.com
Author: Qamar Shahzad
Author URI: https://keywordsinsider.com
Description: Custom theme for Keywords Insider, a free keyword trends and content idea tool for bloggers, agencies, and businesses.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keywordsinsider
*/

:root{
  --bg:#FFFFFF;
  --surface:#F5F8FF;
  --line:#E3E9F7;
  --ink:#16233F;
  --ink-soft:#4C5678;
  --blue:#1A4FD6;
  --blue-deep:#0E2E82;
  --blue-tint:#EAF0FE;
  --gold:#C79A3C;
  --gold-tint:#FBF3E1;
  --up:#1E8E5A;
  --down:#B4432F;
  --radius:14px;
  --shadow:0 20px 40px -24px rgba(14,46,130,.28);
  --shadow-sm:0 8px 20px -14px rgba(14,46,130,.28);
  --maxw:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden;}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0;letter-spacing:-0.02em;color:var(--ink);}
p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
select,input,textarea{font-family:inherit;}
img{max-width:100%;display:block;}
.mono{font-family:'IBM Plex Mono',monospace;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.section{padding:96px 0;}
.up{color:var(--up);}
.down{color:var(--down);}
@media (max-width:720px){.section{padding:64px 0;}}

/* text effects */
.shine{
  background:linear-gradient(90deg,var(--blue),var(--gold),var(--blue));
  background-size:200% auto;color:transparent;
  -webkit-background-clip:text;background-clip:text;
  animation:shine 4s linear infinite;
}
@keyframes shine{0%{background-position:0% center;}100%{background-position:200% center;}}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;height:76px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:34px;height:34px;flex-shrink:0;}
.brand-mark path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw 1.3s ease forwards .2s;}
@keyframes draw{to{stroke-dashoffset:0;}}
.brand-name{font-family:'Space Grotesk';font-weight:700;font-size:17px;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-size:14.5px;font-weight:600;color:var(--ink-soft);transition:color .2s;}
.nav-links a:hover{color:var(--blue);}
.nav-actions{display:flex;align-items:center;gap:10px;}
.btn-gold{background:var(--gold);color:#fff;padding:11px 20px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:0 10px 24px -12px rgba(199,154,60,.6);transition:transform .2s,box-shadow .2s;}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(199,154,60,.7);}
.nav-toggle{display:none;width:40px;height:40px;border-radius:10px;background:var(--surface);align-items:center;justify-content:center;font-size:18px;}
@media (max-width:860px){
  .nav-links{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:16px 28px;gap:14px;box-shadow:var(--shadow-sm);}
  .nav-links.open{display:flex;}
  .nav-toggle{display:flex;}
}

/* HERO */
.hero{position:relative;overflow:hidden;padding:80px 0 56px;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;} .hero-visual{height:260px !important;margin-top:12px;}}
.hero-load{opacity:0;transform:translateY(16px);animation:heroIn .8s ease forwards;}
@keyframes heroIn{to{opacity:1;transform:translateY(0);}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono';font-size:12.5px;font-weight:500;color:var(--blue-deep);background:var(--blue-tint);padding:6px 12px;border-radius:999px;margin-bottom:20px;}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--up);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.hero h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08;font-weight:700;}
.hero p.lead{margin-top:18px;font-size:16.5px;color:var(--ink-soft);max-width:48ch;}
.hero-search{margin-top:28px;display:flex;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:var(--shadow-sm);}
.hero-search input{flex:1 1 180px;border:none;outline:none;padding:12px 14px;font-size:14.5px;min-width:0;}
.hero-search select{border:none;background:var(--surface);border-radius:10px;padding:12px 10px;font-size:13.5px;color:var(--ink-soft);}
.hero-search .btn-blue{background:var(--blue);color:#fff;padding:12px 20px;border-radius:10px;font-weight:700;font-size:14px;white-space:nowrap;}
.trend-chart-box{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;min-height:180px;box-shadow:var(--shadow-sm);}
.hero-visual{position:relative;height:420px;}
.hero-visual::before{content:'';position:absolute;inset:-40px;background:radial-gradient(circle at 60% 40%,rgba(26,79,214,.12),transparent 60%);filter:blur(6px);z-index:0;}
.chip{position:absolute;font-family:'IBM Plex Mono';font-weight:500;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 14px;box-shadow:var(--shadow-sm);white-space:nowrap;animation:drift 7s ease-in-out infinite;}
.chip b{font-weight:600;margin-left:4px;}
.chip.l{font-size:13.5px;z-index:3;}
.chip.m{font-size:12px;opacity:.88;z-index:2;}
.chip.s{font-size:11px;opacity:.62;transform:scale(.94);z-index:1;}
@keyframes drift{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

/* TRENDS */
.trends{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.trends-head h2{font-size:clamp(24px,3vw,32px);}
.trends-note{font-size:13px;color:var(--ink-soft);margin-top:6px;}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);padding:10px;border-radius:14px;margin:26px 0;box-shadow:var(--shadow-sm);}
.filters select{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px;color:var(--ink);}
.cat-pills{display:flex;gap:8px;flex-wrap:wrap;}
.cat-pills button{padding:9px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-soft);background:var(--surface);transition:background .2s,color .2s;}
.cat-pills button.active{background:var(--blue);color:#fff;}
.kw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;}
.kw-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;transition:transform .2s,box-shadow .3s,opacity .25s ease,transform .35s ease;overflow:hidden;opacity:0;transform:translateY(14px);}
.kw-card.in{opacity:1;transform:translateY(0);}
.kw-card:hover{box-shadow:var(--shadow);}
.kw-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.kw-tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--blue-tint);color:var(--blue-deep);}
.kw-word{font-family:'IBM Plex Mono';font-size:15px;font-weight:600;margin-bottom:6px;}
.kw-change{font-size:13px;font-weight:600;}
.kw-idea{position:absolute;inset:0;background:var(--blue-deep);color:#fff;border-radius:14px;padding:18px;display:flex;flex-direction:column;justify-content:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .25s;}
.kw-card:hover .kw-idea,.kw-card:focus-within .kw-idea{opacity:1;pointer-events:auto;}
.kw-idea .label{font-family:'IBM Plex Mono';font-size:10.5px;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;}
.kw-idea p{font-size:13.5px;line-height:1.45;}
.kw-empty{padding:30px;text-align:center;color:var(--ink-soft);font-size:14px;background:#fff;border:1px dashed var(--line);border-radius:14px;}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px;}
@media (max-width:780px){.steps{grid-template-columns:1fr;}}
.step{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.step.in{opacity:1;transform:translateY(0);}
.step .num{font-family:'Space Grotesk';font-weight:700;font-size:32px;color:#fff;-webkit-text-stroke:1.6px var(--blue);}
.step h3{font-size:18px;margin-top:10px;}
.step p{margin-top:8px;font-size:14.5px;color:var(--ink-soft);}

/* BLOG */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;}
@media (max-width:900px){.blog-grid{grid-template-columns:1fr;}}
.post-card{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s,opacity .25s ease;background:#fff;opacity:0;transform:translateY(14px);}
.post-card.in{opacity:1;transform:translateY(0);}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.post-thumb{height:140px;background:linear-gradient(135deg,var(--blue),var(--blue-deep));background-size:cover;background-position:center;}
.post-body{padding:20px;}
.post-cat{font-family:'IBM Plex Mono';font-size:10.5px;color:var(--blue);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.post-body h3{font-size:16px;margin-top:8px;line-height:1.32;}
.post-body p{font-size:13.5px;color:var(--ink-soft);margin-top:8px;}
.post-empty{padding:30px;text-align:center;color:var(--ink-soft);font-size:14px;background:#fff;border:1px dashed var(--line);border-radius:14px;}

/* ABOUT */
.about{background:var(--ink);color:#fff;border-radius:24px;padding:42px;display:flex;gap:30px;align-items:center;flex-wrap:wrap;}
.about-avatar{width:70px;height:70px;border-radius:50%;background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;font-size:24px;flex-shrink:0;}
.about h3{color:#fff;font-size:19px;}
.about p{color:#B7C0DE;font-size:14.5px;margin-top:8px;max-width:62ch;}
.about-socials{display:flex;gap:10px;margin-top:14px;}
.about-socials a{width:33px;height:33px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;transition:background .2s,color .2s;}
.about-socials a:hover{background:var(--gold);color:var(--ink);}

/* GENERIC PAGE / SINGLE POST */
.page-content{max-width:760px;margin:0 auto;}
.page-content h1{font-size:clamp(28px,4vw,40px);margin-bottom:24px;}
.page-content .entry-content{font-size:16px;color:var(--ink-soft);}
.page-content .entry-content p{margin-bottom:18px;line-height:1.7;}
.page-content .entry-content h2{margin:32px 0 12px;font-size:22px;color:var(--ink);}
.post-meta{font-family:'IBM Plex Mono';font-size:12px;color:var(--ink-soft);margin-bottom:18px;}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:40px 0 28px;}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:center;}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-soft);}
.foot-links a:hover{color:var(--blue);}
.foot-bottom{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--ink-soft);}

/* FAB + AGENT PANEL */
.fab{position:fixed;bottom:24px;right:24px;z-index:60;background:var(--blue);color:#fff;padding:15px 20px;border-radius:999px;display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;box-shadow:0 16px 32px -14px rgba(14,46,130,.55);transition:transform .2s;}
.fab:hover{transform:translateY(-3px);}
.fab .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite;}
.agent-panel{position:fixed;top:0;right:-380px;width:360px;max-width:92vw;height:100%;background:#fff;border-left:1px solid var(--line);box-shadow:-16px 0 40px -20px rgba(14,46,130,.3);z-index:70;transition:right .35s ease;display:flex;flex-direction:column;}
.agent-panel.open{right:0;}
.agent-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.agent-head .who{display:flex;align-items:center;gap:10px;}
.agent-avatar{width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;}
.agent-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;}
.msg{max-width:85%;padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.45;}
.msg.bot{background:var(--surface);border-bottom-left-radius:4px;align-self:flex-start;}
.msg.user{background:var(--blue);color:#fff;border-bottom-right-radius:4px;align-self:flex-end;}
.msg.typing{display:flex;gap:4px;align-items:center;}
.msg.typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);opacity:.5;animation:blink 1s infinite;}
.msg.typing span:nth-child(2){animation-delay:.15s;}
.msg.typing span:nth-child(3){animation-delay:.3s;}
@keyframes blink{0%,100%{opacity:.3;}50%{opacity:1;}}
.agent-suggest{padding:12px 18px;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);}
.agent-suggest button{font-size:12px;background:var(--blue-tint);color:var(--blue-deep);padding:8px 12px;border-radius:999px;font-weight:600;transition:background .2s,color .2s;}
.agent-suggest button:hover{background:var(--blue);color:#fff;}
.agent-input-row{display:flex;gap:8px;padding:14px 18px 18px;border-top:1px solid var(--line);}
.agent-input-row input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px;outline:none;}
.agent-input-row button{background:var(--blue);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;font-size:13px;}
.agent-close{width:30px;height:30px;border-radius:50%;background:var(--surface);font-size:13px;}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal,.kw-card,.step,.post-card{opacity:1 !important;transform:none !important;transition:none !important;}
  .chip,.eyebrow .dot,.fab .dot,.brand-mark path,.shine,.hero-load{animation:none !important;}
}