/* ============================================================
   TAGREEL — design tokens
   Ink studio background, signal-red REC accent, tape-teal tags
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --ink:      #14141A;
  --ink-2:    #1E1E27;
  --paper:    #F5F3EE;
  --white:    #F2F0EC;
  --signal:   #FF4B3E;
  --signal-dim: #C93A2F;
  --tape:     #3EC9A7;
  --slate:    #8B8B93;
  --slate-dim:#5B5B63;
  --line:     rgba(242,240,236,0.12);
  --radius:   14px;
  --display: 'Space Grotesk', sans-serif;
  --body:    'Inter', sans-serif;
  --mono:    'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

/* ---------- Nav (studio tab bar) ---------- */
.studio-nav{
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
  background:rgba(20,20,26,0.9);
  backdrop-filter:blur(10px);
}
.studio-nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.brand{
  font-family:var(--display);font-weight:700;font-size:1.15rem;
  display:flex;align-items:center;gap:10px;text-decoration:none;letter-spacing:-0.01em;
}
.brand .dot{
  width:10px;height:10px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 4px rgba(255,75,62,0.18);
}
.nav-links{display:flex;gap:28px;font-size:0.92rem;color:var(--slate);}
.nav-links a{text-decoration:none;transition:color .15s;}
.nav-links a:hover,.nav-links a.active{color:var(--white);}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--white);
  border-radius:8px;padding:8px 10px;font-size:1rem;}

@media(max-width:720px){
  .nav-links{
    position:fixed;inset:64px 0 0 0;background:var(--ink);flex-direction:column;
    padding:28px 24px;gap:20px;font-size:1.05rem;transform:translateY(-110%);
    transition:transform .25s ease;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{padding:64px 0 32px;}
.eyebrow{
  font-family:var(--mono);font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--tape);display:flex;align-items:center;gap:8px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal);
  animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

h1.headline{
  font-family:var(--display);font-weight:700;font-size:clamp(2.1rem,5vw,3.4rem);
  line-height:1.05;letter-spacing:-0.02em;margin:0 0 18px;max-width:820px;
}
h1.headline em{color:var(--tape);font-style:normal;}
.sub{color:var(--slate);font-size:1.05rem;max-width:600px;margin:0 0 36px;}

/* ---------- Tool panel ---------- */
.panel{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;margin-bottom:20px;
}
.panel-label{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--slate);margin-bottom:10px;display:block;
}
.input-row{display:flex;gap:10px;flex-wrap:wrap;}
input[type="text"]{
  flex:1;min-width:220px;background:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:14px 16px;color:var(--white);font-size:1rem;font-family:var(--body);
  outline:none;transition:border-color .15s;
}
input[type="text"]:focus{border-color:var(--tape);}
select{
  background:var(--ink);border:1px solid var(--line);border-radius:10px;color:var(--white);
  padding:14px 12px;font-family:var(--body);font-size:0.95rem;
}
.btn{
  font-family:var(--body);font-weight:600;font-size:0.95rem;border:none;border-radius:10px;
  padding:14px 24px;cursor:pointer;transition:transform .12s,opacity .12s;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--signal);color:var(--white);}
.btn-primary:hover{background:var(--signal-dim);}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--white);}
.btn-ghost:hover{border-color:var(--tape);color:var(--tape);}
.btn:disabled{opacity:0.4;cursor:not-allowed;}

/* ---------- Reel meter (signature element) ---------- */
.reel-meter{
  margin-top:22px;padding-top:18px;border-top:1px dashed var(--line);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.reel-meter .meter-track{
  flex:1;min-width:180px;height:8px;background:var(--ink);border-radius:6px;overflow:hidden;
  border:1px solid var(--line);
}
.reel-meter .meter-fill{
  height:100%;width:0%;background:var(--tape);transition:width .25s,background .25s;
  border-radius:6px;
}
.reel-meter .meter-count{
  font-family:var(--mono);font-size:0.82rem;color:var(--slate);white-space:nowrap;
}
.reel-meter .meter-count b{color:var(--white);}

/* ---------- Tag chips (film-strip style) ---------- */
.tag-strip{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;
}
.chip{
  font-family:var(--mono);font-size:0.86rem;background:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:8px 12px 8px 10px;display:flex;align-items:center;gap:8px;
  position:relative;color:var(--white);
}
.chip::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--tape);flex-shrink:0;
}
.chip button{
  background:none;border:none;color:var(--slate);cursor:pointer;font-size:0.95rem;line-height:1;
  padding:0;
}
.chip button:hover{color:var(--signal);}
.empty-state{
  color:var(--slate-dim);font-family:var(--mono);font-size:0.88rem;padding:20px 0;
}

/* ---------- Action row ---------- */
.action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}

/* ---------- Feature grid ---------- */
.section{padding:56px 0;border-top:1px solid var(--line);}
.section-head{max-width:640px;margin-bottom:36px;}
.kicker{
  font-family:var(--mono);font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--tape);margin-bottom:10px;display:block;
}
h2{font-family:var(--display);font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 12px;letter-spacing:-0.01em;}
h3{font-family:var(--display);font-size:1.15rem;margin:0 0 8px;}
p{color:var(--slate);margin:0 0 14px;}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:800px){.grid-3{grid-template-columns:1fr;}}
.feat-card{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px;
}
.feat-card .num{
  font-family:var(--mono);color:var(--signal);font-size:0.82rem;margin-bottom:10px;display:block;
}

/* ---------- Content pages (paper style) ---------- */
.content-page{background:var(--paper);color:#232320;}
.content-page .studio-nav{background:rgba(245,243,238,0.92);border-bottom:1px solid rgba(0,0,0,0.08);}
.content-page .brand{color:#161613;}
.content-page .nav-links{color:#6B6B63;}
.content-page .nav-links a:hover,.content-page .nav-links a.active{color:#161613;}
.content-page .nav-links{background:var(--paper);}
.content-page footer{background:#EDEAE2;border-top:1px solid rgba(0,0,0,0.08);}
.content-page footer .slate{color:#7A7A70;}
.content-page h1,.content-page h2,.content-page h3{color:#161613;}
.content-page p,.content-page li{color:#4B4B44;}
.content-page a.inline-link{color:var(--signal-dim);text-decoration:underline;}
.doc{max-width:760px;margin:0 auto;padding:64px 24px 96px;}
.doc .eyebrow{color:var(--signal-dim);}
.doc .eyebrow::before{background:var(--signal-dim);}
.doc h1{font-family:var(--display);font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:8px;}
.doc .updated{font-family:var(--mono);font-size:0.8rem;color:#8A8A80;margin-bottom:40px;display:block;}
.doc h2{font-size:1.3rem;margin-top:36px;}
.doc ul{padding-left:20px;}
.doc li{margin-bottom:8px;}
.callout{
  background:#fff;border:1px solid rgba(0,0,0,0.08);border-left:3px solid var(--tape);
  border-radius:8px;padding:16px 18px;margin:20px 0;font-size:0.95rem;
}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:40px 0;}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;font-size:0.88rem;color:var(--slate);}
.foot-links a{text-decoration:none;}
.foot-links a:hover{color:var(--tape);}
.slate{color:var(--slate);font-size:0.85rem;}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--white);color:var(--ink);font-family:var(--body);font-weight:600;
  padding:12px 20px;border-radius:10px;font-size:0.9rem;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;box-shadow:0 10px 30px rgba(0,0,0,0.3);z-index:100;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- Insights preview (rapidtags-style panel) ---------- */
.insight-panel{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
@media(max-width:800px){.insight-panel{grid-template-columns:1fr;}}
.insight-col h4{font-family:var(--mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--slate);margin:0 0 14px;}
.kw-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:0.9rem;}
.kw-row:last-child{border-bottom:none;}
.kw-score{
  font-family:var(--mono);font-weight:700;width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:0.82rem;flex-shrink:0;
  background:rgba(62,201,167,0.14);color:var(--tape);
}
.kw-score.mid{background:rgba(232,181,74,0.14);color:#E8B54A;}
.kw-score.high{background:rgba(255,75,62,0.14);color:var(--signal);}
.metric-block{display:flex;flex-direction:column;gap:16px;}
.metric-bar-row{display:flex;flex-direction:column;gap:6px;}
.metric-label{display:flex;justify-content:space-between;font-size:0.85rem;color:var(--slate);font-family:var(--mono);}
.metric-track{height:8px;background:var(--ink);border-radius:6px;overflow:hidden;border:1px solid var(--line);}
.metric-fill{height:100%;border-radius:6px;background:var(--tape);}
.sample-tag{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--slate-dim);border:1px dashed var(--line);border-radius:999px;padding:3px 10px;
  display:inline-block;margin-bottom:12px;
}

/* ---------- Pricing ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:800px){.grid-2{grid-template-columns:1fr;}}
.price-card{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:32px;
  display:flex;flex-direction:column;
}
.price-card.featured{border-color:var(--tape);position:relative;}
.price-card.featured::before{
  content:"Most useful";position:absolute;top:-12px;right:24px;background:var(--tape);color:var(--ink);
  font-family:var(--mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.06em;
  padding:4px 10px;border-radius:999px;font-weight:700;
}
.price-amount{font-family:var(--display);font-size:2.4rem;margin:14px 0;}
.price-amount span{font-size:1rem;color:var(--slate);font-family:var(--body);}
.price-list{list-style:none;padding:0;margin:18px 0;flex:1;}
.price-list li{padding:8px 0;border-bottom:1px solid var(--line);color:var(--white);font-size:0.92rem;
  display:flex;gap:10px;align-items:baseline;}
.price-list li::before{content:"✓";color:var(--tape);font-family:var(--mono);}

/* ---------- Blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media(max-width:760px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{
  background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:var(--radius);padding:24px;
  text-decoration:none;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;
}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,0.08);}
.blog-card .tag{
  font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--signal-dim);margin-bottom:10px;
}
.blog-card h3{margin-bottom:8px;}
.blog-card p{font-size:0.9rem;flex:1;}
.blog-card .meta{font-family:var(--mono);font-size:0.76rem;color:#9A9A90;margin-top:10px;}

/* ---------- Cookie notice ---------- */
.cookie-bar{
  position:fixed;bottom:0;left:0;right:0;background:var(--ink-2);border-top:1px solid var(--line);
  padding:16px 24px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  z-index:200;transform:translateY(110%);transition:transform .3s ease;
}
.cookie-bar.show{transform:translateY(0);}
.cookie-bar p{margin:0;font-size:0.86rem;color:var(--slate);max-width:640px;}
.cookie-bar a{color:var(--tape);text-decoration:underline;}