/* /public/assets/styles/components_app.css
   - Everything NOT required for first paint
   - Includes: reveal, sections, nf-intro, metrics, stats, faq, results table,
     tags/blur/paywall helper UI, hashtag generator, footer, pricing, niche monitor, etc.
*/

/* ==========================================================
   SCROLL REVEAL
   ========================================================== */
.reveal{
  opacity:0;
  transform:translateX(-28px);
}

.reveal.reveal--visible{
  animation-name:reveal-slide-in;
  animation-duration:0.55s;
  animation-timing-function:cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode:forwards;
}

@keyframes reveal-slide-in{
  from{opacity:0;transform:translateX(-28px)}
  to{opacity:1;transform:translateX(0)}
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
  .reveal.reveal--visible{animation:none}
}

/* ==========================================================
   SEARCHBAR variants (not needed for hero)
   ========================================================== */
.searchbar--2{grid-template-columns:minmax(0,1fr) 170px}
.searchbar--2 input{grid-column:1 / 2}
.searchbar--2 .btn-primary{grid-column:2 / 3}

@media (max-width:560px){
  .searchbar--2{grid-template-columns:1fr}
  .searchbar--2 input{grid-column:1 / -1}
  .searchbar--2 .btn-primary{grid-column:1 / -1}
}

/* ==========================================================
   BTN SECONDARY — Global Premium Version
   ========================================================== */
.btn-secondary{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:52px;
  padding:0 16px;
  padding-right:46px;
  border-radius:12px;

  background:transparent;
  border:1px solid rgba(15,23,42,.16);
  color:var(--text);

  font-weight:700;
  font-size:1rem;
  letter-spacing:.01em;
  line-height:1;

  cursor:pointer;
  text-decoration:none;

  -webkit-tap-highlight-color:transparent;
  transform:translateZ(0);

  transition:
    background-color .18s cubic-bezier(.22,.61,.36,1),
    border-color .18s cubic-bezier(.22,.61,.36,1),
    color .18s cubic-bezier(.22,.61,.36,1);
}

.btn-secondary::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:calc(12px - 1px);
  pointer-events:none;
  border:1px solid rgba(255,255,255,.55);
  opacity:.55;
  transition:opacity .18s cubic-bezier(.22,.61,.36,1);
}

.btn-secondary::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:20px;
  height:20px;
  transform:translate3d(0,-50%,0);
  transform-origin:center;
  opacity:.78;

  background:url("/assets/icons/arrow-right.svg") center/20px 20px no-repeat;

  transition:
    transform .26s cubic-bezier(.22,.61,.36,1),
    opacity .18s cubic-bezier(.22,.61,.36,1),
    filter .18s cubic-bezier(.22,.61,.36,1);
}

.btn-secondary:hover{
  background:rgba(15,23,42,.04);
  border-color:rgba(15,23,42,.26);
}

.btn-secondary:hover::before{opacity:.70}

.btn-secondary:hover::after{
  transform:translate3d(4px,-50%,0);
  opacity:1;
  filter:contrast(1.05);
}

.btn-secondary:active{
  background:rgba(15,23,42,.055);
  border-color:rgba(15,23,42,.30);
}

.btn-secondary:active::after{transform:translate3d(2px,-50%,0)}

.btn-secondary:focus-visible{
  outline:none;
  border-color:rgba(34,108,224,.45);
  box-shadow:0 0 0 4px rgba(34,108,224,.18);
}

@media (prefers-reduced-motion: reduce){
  .btn-secondary,
  .btn-secondary::before,
  .btn-secondary::after{transition:none !important}
}

/* Small utility button used in table */
.btn-profitability{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  padding:8px 14px;
  font-size:.9rem;
  font-weight:500;

  color:var(--text);
  background:#fff;
  border:1px solid rgba(15,19,32,.18);
  border-radius:8px;

  cursor:pointer;
  white-space:nowrap;

  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .08s ease;
}
.btn-profitability:hover{
  background:#f9fafb;
  border-color:rgba(15,19,32,.32);
  box-shadow:0 6px 18px rgba(12,24,60,.08);
}
.btn-profitability:active{transform:translateY(1px)}

/* ==========================================================
   SECTIONS / TYPO
   ========================================================== */
.section__wrap{max-width:880px;margin:0 auto}
.section__wrap--wide{max-width:var(--container)}
.section__title{
  margin:0 0 14px;
  font-weight:800;
  font-size:clamp(1.6rem,1.15rem + 1.2vw,2rem);
  color:var(--text);
  text-align:center;
}
.section__lead{
  margin:0 auto 22px;
  font-size:var(--fs-600);
  color:var(--muted);
  text-align:center;
}
.section__text{
  margin:0 0 14px;
  font-size:var(--fs-700);
  color:var(--muted);
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}
.section__text a{color:var(--yt-red-600);font-weight:600;text-decoration:underline}

.why-yt{
  position:relative;
  z-index:2;
  background:transparent;
  border:0;
  padding:68px 0;
  margin-top:clamp(32px,4vw,72px);
}

/* Group wrapper */
.gradient-group{position:relative;overflow:hidden;background:transparent}
.gradient-group>section{background:transparent;padding:80px 0;border:0}

/* ==========================================================
   METRICS
   ========================================================== */
.metrics__grid{
  display:grid;
  gap:18px;
  margin:10px 0 10px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.metrics--pro .metrics__grid--pro{
  display:grid;
  gap:28px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1160px){.metrics--pro .metrics__grid--pro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.metrics--pro .metrics__grid--pro{grid-template-columns:1fr}}

.metric-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
  padding:32px 24px 160px;
  min-height:380px;
  box-shadow:0 22px 80px rgba(12,24,60,.18);
  transform:translateZ(0);
  transition:transform .18s,box-shadow .22s,filter .22s;
}
.metric-card:hover{transform:translateY(-2px);box-shadow:0 28px 96px rgba(12,24,60,.26)}
@media (min-width:1280px){.metric-card{min-height:440px;padding-bottom:190px}}

.metric-card--red{
  background:linear-gradient(158deg,var(--yt-red-700) 0%,var(--yt-red-600) 52%,var(--yt-red-500) 100%);
  border:0;
  color:#fff;
}
.metric-card--red::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.22) 2px,transparent 1.2px);
  background-size:15px 15px;
  background-position:0 0,11px 11px;
  opacity:.4;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}
.metric-card--red::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,0,0,.05) 60%,rgba(0,0,0,.10) 100%);
  opacity:.22;
  pointer-events:none;
  z-index:0;
}
.metric-card__title{
  margin:0 0 10px;
  font-weight:700;
  letter-spacing:.2px;
  font-size:clamp(1.25rem,1.08rem + .7vw,1.6rem);
  line-height:1.22;
  color:#fff;
  position:relative;
  z-index:2;
}
.metric-card__desc{
  margin:0;
  color:rgba(255,255,255,.95);
  font-size:clamp(1.02rem,.98rem + .25vw,1.15rem);
  line-height:1.7;
  position:relative;
  z-index:2;
}
.metric-card .small{font-size:.92em;opacity:.9}

.metric-card__art{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-70px;
  width:120%;
  max-width:none;
  pointer-events:none;
  opacity:.7;
  filter:saturate(1.05);
  z-index:1;
  transition:opacity .25s,transform .25s;
}
.metric-card:hover .metric-card__art{opacity:.9;transform:translateX(-50%) scale(1.02)}
.metric-card__art .art-img{display:block;width:100%;height:auto;object-fit:contain}

@media (max-width:1160px){.metric-card__art{width:120%;bottom:-80px}}
@media (max-width:560px){
  .metric-card{min-height:420px;padding:30px 22px 180px}
  .metric-card__art{width:120%;bottom:-90px}
}
.metrics__hint{margin:24px 0 0;text-align:center;color:var(--muted);font-size:var(--fs-600)}

/* ==========================================================
   STATS (inline counters)
   ========================================================== */
.stats{padding:80px 0 72px;background:transparent}
.section__wrap--wide-stats{max-width:var(--container);text-align:center}

.stats-inline{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:48px;
  align-items:stretch;
}

.stat-inline{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.stat-inline__value{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
  font-weight:900;
  font-size:clamp(3.6rem, 2.4rem + 3vw, 4.5rem);
  line-height:1;
  letter-spacing:.04em;

  background:linear-gradient(135deg,var(--yt-red-700) 0%,var(--yt-red-500) 50%,var(--yt-red-400) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.stat-inline__value .unit{
  font-size:.6em;
  font-weight:800;
  line-height:1.6;
}

.stat-inline__label{
  margin:14px 0 0;
  font-size:clamp(1.05rem, 1rem + .4vw, 1.22rem);
  letter-spacing:.06em;
  color:var(--muted-2);
  text-transform:uppercase;
  font-weight:600;
}

@media (max-width:720px){
  .stats-inline{grid-template-columns:1fr;gap:28px}
  .stat-inline__value{font-size:clamp(2.9rem,2.3rem + 2vw,3.6rem)}
}

/* ==========================================================
   FAQ
   ========================================================== */
.faq{
  position:relative;
  background:transparent;
  padding:96px 0;
}

.faq__list{
  margin:32px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:20px;
}

.faq__item{
  background:var(--surface);
  border:none;
  border-radius:var(--r-lg);
  box-shadow:0 12px 40px rgba(12, 24, 60, .12);
  overflow:hidden;
  transform:translateZ(0);
  transition:box-shadow .25s ease, transform .25s ease;
}
.faq__item:hover{
  box-shadow:0 20px 60px rgba(12, 24, 60, .16);
  transform:translateY(-2px);
}

.faq__q{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:26px 30px;
  background:linear-gradient(180deg,#fff,#f9fbff);
  border:none;
  cursor:pointer;
  font-weight:700;
  font-size:clamp(1.05rem,1rem + .4vw,1.2rem);
  letter-spacing:.1px;
  color:var(--text);
  line-height:1.7;
  transition:background .2s ease, color .2s ease;
}
.faq__q:hover{background:linear-gradient(180deg,#fff,#f3f6ff)}
.faq__q:focus-visible{
  outline:none;
  box-shadow:0 0 0 5px rgba(34,108,224,.25);
  border-radius:var(--r-lg);
}

.faq__chev{
  flex-shrink:0;
  opacity:.6;
  transition:transform .26s cubic-bezier(.2,.75,.2,1), opacity .2s;
}
.faq__q[aria-expanded="true"] .faq__chev{transform:rotate(180deg);opacity:.9}

.faq__a{
  height:0;
  overflow:hidden;
  will-change:height;
  background:#fff;
  border-top:1px solid rgba(15, 19, 32, .06);
}
.faq__a-inner{
  text-align:left;
  padding:24px 32px 32px;
  color:var(--muted);
  font-size:clamp(1.05rem, 1rem + .4vw, 1.2rem);
  line-height:1.8;
}
.faq__a a{color:var(--yt-red-600);font-weight:700;text-decoration:underline}

.faq__item.is-open{box-shadow:0 22px 70px rgba(12,24,60,.18)}

.faq__item{
  opacity:1;
  transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.75,.2,1);
}
.faq.faq--animate .faq__item{opacity:0;transform:translateY(10px)}
.faq.faq--animate .faq__item.is-visible{opacity:1;transform:none}

@media (max-width: 720px){
  .faq{padding:72px 0}
  .faq__q{padding:22px 22px;font-size:clamp(1rem,.95rem + .3vw,1.1rem)}
  .faq__a-inner{padding:20px 22px 26px}
  .faq .section__wrap{
    max-width:none;
    width:100%;
  }
}

/* ==========================================================
   RESULTS TABLE
   ========================================================== */
.results{
  margin-top:44px;
  text-align:left;
}

.table-wrap{
  overflow-x:auto;
  overflow-y:visible;
  position:relative;
  border-radius:var(--r-sm);
  background:transparent;
}

.table,
.table thead,
.table tbody,
.table tr,
.table th,
.table td{overflow:visible}

.table{
  width:100%;
  min-width:1180px;
  border-collapse:collapse;
  background:var(--surface);
  table-layout:fixed;
}

/* Column sizing */
.table thead th:nth-child(1),
.table tbody td:nth-child(1){width:auto}

.table thead th:nth-child(2),
.table tbody td:nth-child(2){width:20%}

.table thead th:nth-child(3),
.table tbody td:nth-child(3){width:17%}

.table thead th:nth-child(4),
.table tbody td:nth-child(4){width:9%}

.table thead th:nth-child(5),
.table tbody td:nth-child(5){width:19.5%}

/* Sticky header */
.table thead{
  position:relative;
  isolation:isolate;
}

.table thead th{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--surface);
  padding:18px 20px;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.45px;
  color:var(--muted);
  border-bottom:1px solid var(--border);
  user-select:none;
  white-space:nowrap;
}

.table thead th:hover,
.table thead th:focus-within{z-index:80}

/* Body cells */
.table tbody td{
  padding:18px 20px;
  border-top:1px solid var(--border);
  vertical-align:middle;
}
.table tbody tr:first-child td{border-top:none}
.table tbody tr:hover{background:rgba(0,0,0,.04)}

/* Keyword full text */
.table tbody td:nth-child(1){
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
  overflow-wrap:anywhere;
  hyphens:auto;
}

/* Numeric alignment */
.table tbody td:nth-child(2){
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* COMP centered */
.table thead th:nth-child(4){text-align:center}
.table tbody td:nth-child(4){
  text-align:center;
  font-variant-numeric:tabular-nums;
}

/* Trend canvas */
.table tbody td:nth-child(3){
  transform:none !important;
  filter:none !important;
}
.trend-canvas{
  position:relative;
  z-index:1;
  display:block;
  width:160px;
  height:28px;
  pointer-events:none;
}

/* Sorting */
.th-sortable{cursor:pointer}
.th-sortable.is-active{color:var(--text)}
.sort-indicator{
  display:inline-block;
  min-width:1.2em;
  margin-left:6px;
  color:var(--muted-2);
}

/* Row animation */
.table tbody tr{transition:opacity .18s, transform .18s}
.table tbody tr.row-enter{opacity:0;transform:translateY(4px)}

/* Header help tooltip */
.th-help{
  position:relative;
  z-index:90;
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  cursor:help;
}
.th-help img{
  width:16px;
  height:16px;
  display:block;
  opacity:.6;
  transition:opacity .15s ease, transform .15s ease;
}
.th-help:hover img{opacity:.9;transform:translateY(-0.5px)}

.tooltip{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  right:auto;
  transform:translateX(-50%) translateY(-6px);

  width:max-content;
  max-width:min(320px, calc(100vw - 24px));
  white-space:normal;

  padding:10px 12px;
  border-radius:10px;
  font-size:.85rem;
  line-height:1.5;

  color:var(--text);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);

  border:1px solid var(--border);
  box-shadow:0 18px 45px rgba(12,24,60,.18);

  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
  z-index:200;
}

.th-help:hover .tooltip,
.th-help:focus-within .tooltip{
  opacity:1;
  transform:translateX(var(--tt-shift-x, -50%)) translateY(0);
  pointer-events:auto;
}

.tooltip::after{
  content:"";
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  border-width:6px;
  border-style:solid;
  border-color:transparent transparent rgba(255,255,255,.94) transparent;
}

/* Right-edge protection */
.table thead th:nth-last-child(-n+2) .tooltip{
  left:auto;
  right:0;
  --tt-shift-x:0;
  transform:translateY(-6px);
}
.table thead th:nth-last-child(-n+2) .tooltip::after{
  left:auto;
  right:12px;
  transform:none;
}

/* Skeletons */
.sk{position:relative;display:block;border-radius:8px;overflow:hidden;background:#eef2f9}
.sk::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-100%);
  animation:sk-shimmer 1.2s ease-in-out infinite;
}
.sk-text{height:16px}
.sk-line{height:28px;width:160px}
.sk-pill{height:28px;width:64px;border-radius:999px}

.table tbody td:nth-child(2) .sk,
.table tbody td:nth-child(4) .sk{margin-left:auto}
.table tbody td:nth-child(3) .sk-line{margin-inline:auto}
.table tbody td:nth-child(5) .sk-pill{margin-inline:auto}

@keyframes sk-shimmer{to{transform:translateX(100%)}}

.row-error{background:#fff4f4!important}

/* Tags */
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  min-width:52px;
  border-radius:8px;
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
  border:0;
  box-shadow:none;
  white-space:nowrap;
}
.tag--green{background:var(--green-500);color:#fff}
.tag--yellow{background:var(--yellow-500);color:#fff}
.tag--red{background:var(--yt-red-600);color:#fff}
.tag--neutral{background:#e5e7eb;color:#111827}

/* Blurs / lock overlay */
.blurred{
  filter:blur(3.6px) saturate(.8);
  opacity:.65;
  transition:filter .12s,opacity .12s;
  user-select:none;
  pointer-events:none;
  will-change:filter,opacity;
}

.lock-overlay{position:relative;transform:translateZ(0)}
.lock-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}

.upsell-row td{padding:0;border-top:none;background:transparent}

.upsell-card{
  margin:10px 12px;
  padding:16px;
  display:grid;
  grid-template-columns:10px 1fr auto;
  align-items:center;
  gap:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
}
.upsell-card__bar{height:100%;border-radius:var(--r-sm);background:linear-gradient(180deg,var(--green-300),var(--green-700))}
.upsell-card__text{display:grid;gap:4px}
.upsell-card__title{font-weight:800;letter-spacing:.2px}
.upsell-card__desc{color:var(--muted);font-size:var(--fs-400)}

/* ==========================================================
   HASHTAG GENERATOR
   ========================================================== */
.copybar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 14px}

.btn-seg{display:inline-flex;gap:0;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.btn-seg button{height:44px;padding:0 14px;border:0;background:transparent;font-weight:700;cursor:pointer}
.btn-seg button.is-active{background:linear-gradient(180deg,#fff,#f6f8ff)}

.tags-grid{display:grid;gap:12px;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;margin-top:12px}
@media (max-width:960px){.tags-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.tags-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.tag-chip,.tag-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:12px 14px;
  min-height:48px;
  text-align:left;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  background:linear-gradient(180deg,#fff,#f7fbff);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  box-shadow:0 10px 30px rgba(12,24,60,.08);
  font-weight:600;
  letter-spacing:.02em;
  transition:transform .12s,box-shadow .18s,border-color .12s,background .12s,filter .12s;
}
.tag-chip:hover,.tag-card:hover{transform:translateY(-1px);box-shadow:0 14px 42px rgba(12,24,60,.14);background:#fff}
.tag-chip:active,.tag-card:active{transform:translateY(0);filter:brightness(.985)}
.tag-chip:focus,.tag-card:focus{outline:none}
.tag-chip:focus-visible,.tag-card:focus-visible{outline:none;box-shadow:var(--focus);border-color:rgba(34,108,224,.35)}
.tag-chip.is-copied,.tag-card.is-copied{outline:3px solid rgba(34,108,224,.18)}

.tag-chip__text,.tag-card__text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag-chip__score,.tag-card__meta{
  flex:0 0 auto;
  font-size:.86em;
  line-height:1;
  padding:6px 8px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--surface-2);
  font-weight:800;
}
.tag-chip__score--good,.tag-card__meta--good{background:var(--green-600);border-color:transparent;color:#fff}
.tag-chip__score--okay,.tag-card__meta--okay{background:var(--yellow-500);border-color:transparent;color:#111827}
.tag-chip__score--neutral,.tag-card__meta--neutral{background:#e8edf7;border-color:transparent;color:#111827}

.small.muted{color:var(--muted-2)}
body.yt-hashtag-page main.hero{padding-bottom:100px}

.tags-panel{
  margin-top:44px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  padding:16px;
}
.tags-panel__header{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:12px}
.tags-panel__hint{margin:10px 2px 0}

.toast{
  position:fixed;
  left:50%;
  bottom:-60px;
  transform:translateX(-50%);
  background:#16a34a;
  color:#fff;
  font-weight:600;
  padding:10px 20px;
  border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  transition:bottom .4s cubic-bezier(.25,1,.5,1),opacity .3s;
  z-index:9999;
}
.toast.is-visible{bottom:32px;opacity:1}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{
  border-top:1px solid var(--border);
  background:
    radial-gradient(900px 600px at 100% -20%, rgba(255,0,0,.10), transparent 60%),
    linear-gradient(180deg,#fbfcff 0%,#f4f7ff 100%);
  padding-top:80px;
}
.footer__grid{display:grid;gap:32px;grid-template-columns:2fr repeat(4,1fr);padding:44px 0}
.footer__col h4{margin:0 0 12px;font-size:1.02rem;color:var(--text)}
.footer__col a{display:block;color:var(--muted);padding:6px 0;font-size:1rem}
.footer__col a:hover{color:var(--text)}
.footer__blurb{color:var(--muted);margin:12px 0 0;max-width:380px}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;padding:18px 0 34px;color:var(--muted-2);font-size:1rem}

.footer__col a.brand{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  padding:0;
}

.footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.footer__bottom span:last-child{
  text-align:right;
  max-width:520px;
  text-wrap:balance;
}

@media (max-width:560px){
  .footer__bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer__bottom span:last-child{
    text-align:left;
    max-width:none;
  }
}

/* ==========================================================
   RESPONSIVE (bundled)
   ========================================================== */
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr}
  .why-yt{padding:48px 0;margin-top:clamp(24px,4vw,56px)}
  .gradient-group>section{padding:56px 0}
  .section__title{font-size:clamp(1.35rem,1.05rem + .8vw,1.7rem)}
  .section__text{font-size:var(--fs-600)}
  .trust{gap:14px;margin-top:16px}
  .trust .avatar{width:48px;height:48px;margin-left:-12px}
  .metrics__grid{grid-template-columns:1fr}
  .copybar{gap:8px}
  .tags-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================
   PRICING PAGE
   ========================================================== */
.pricing{
  position:relative;
  margin-top:56px;
  padding:80px 0 96px;
  overflow:visible;
}

.pricing::before{
  content:"";
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%, -50%);

  width:100%;
  aspect-ratio:1 / 1;
  max-width:none;

  background: radial-gradient(
    circle,
    rgba(255, 114, 126, 0.75) 0%,
    rgba(221, 0, 19, 0.60) 18%,
    rgba(255,0,0,0.32) 35%,
    rgba(255,0,0,0.18) 45%,
    rgba(255,0,0,0.00) 70%
  );

  clip-path:inset(0 0 50% 0);
  opacity:0.9;
  pointer-events:none;
  z-index:0;
}

.pricing__inner{
  max-width:960px;
  margin:0 auto;
  text-align:center;
  position:relative;
  z-index:1;
}

.pricing__title{
  margin:0 0 10px;
  font-weight:800;
  font-size:clamp(2rem,1.4rem + 1.8vw,2.6rem);
  color:var(--text);
}

.pricing__subtitle{
  margin:0 auto 40px;
  max-width:560px;
  font-size:var(--fs-600);
  color:var(--muted);
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:28px;
  align-items:stretch;
}

.pricing-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:30px 28px 26px;
  border-radius:var(--r-lg);
  background:var(--surface);
  color:var(--muted);
  box-shadow:0 20px 60px rgba(15, 23, 42, 0.08);
  height:100%;
  text-align:left;
}

.pricing-card__title{
  margin:0 0 4px;
  font-size:1.25rem;
  font-weight:600;
  color:var(--text);
}

.pricing-card__price{
  margin:6px 0 10px;
  font-size:2.3rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--text);
}

.pricing-card__price span{
  font-size:1rem;
  font-weight:600;
  margin-left:6px;
  color:var(--muted);
}

.pricing-card__desc{
  margin:0 0 8px;
  font-size:var(--fs-500);
  color:var(--muted);
}

.pricing__features{
  list-style:none;
  padding:0;
  margin:8px 0 24px;
  width:100%;
}
.pricing__features li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:1rem;
  color:var(--muted);
  padding:5px 0;
}
.pricing__features li::before{content:none}

.pricing-feature__icon{
  width:25px;
  height:25px;
  flex-shrink:0;
  display:block;
}

.pricing-card__footer{
  margin-top:auto;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.btn-secondary--full,
.btn-primary--full{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.pricing-card__note{
  font-size:.86rem;
  color:var(--muted-2);
}

.pricing-card--pro{
  border:1px solid rgba(148, 163, 184, 0.32);
  box-shadow:0 26px 80px rgba(15,23,42,.14);
}

.pricing-discount{
  margin-top:32px;
  padding:18px 22px;
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:0 14px 40px rgba(15,23,42,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  text-align:left;
}

.pricing-discount__title{
  margin:0 0 4px;
  font-size:1.2rem;
  font-weight:600;
  color:var(--text);
}
.pricing-discount__body{
  margin:0;
  font-size:.96rem;
  color:var(--muted);
}
.pricing-discount__text{max-width:700px}

.pricing-card--pro .pricing-card__tag{
  position:absolute;
  top:-12px;
  right:-12px;
  padding:12px 14px;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg, var(--yt-red-600), var(--yt-red-400));
  color:#fff;
  rotate:4deg;
  font-size:1rem;
  font-weight:600;
  letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  z-index:2;
}

@media (max-width:720px){
  .pricing{margin-top:40px;padding:60px 0 72px}
  .pricing-grid{grid-template-columns:1fr}
  .pricing-discount{flex-direction:column;align-items:flex-start}
  .pricing-discount__button{width:100%}
}

/* ==========================================================
   NICHE MONITOR – PAGE LEVEL
   ========================================================== */
.niche-monitor-page .hero.hero--niche{padding-bottom:72px}
.niche-results{padding:40px 0 96px}
.niche-section{padding:56px 0 0}
.niche-section--disclaimer{padding-bottom:96px}

.kr-ob {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15,15,15,.55);
  backdrop-filter: blur(6px);
}
.kr-ob.is-open { display: flex; }

.kr-ob__card{
  width: min(520px, 100%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 18px 18px 14px;
}

.kr-ob__h{
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #111;
}
.kr-ob__p{
  margin: 0 0 14px;
  color: #444;
  font-size: 13px;
  line-height: 1.4;
}

.kr-ob__row{ display: grid; gap: 10px; margin-bottom: 12px; }
.kr-ob label{ font-size: 12px; color:#333; font-weight: 600; }
.kr-ob input, .kr-ob select{
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}
.kr-ob input:focus, .kr-ob select:focus{ border-color:#bbb; }

.kr-ob__actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding-top: 6px;
}
.kr-ob__btn{
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}
.kr-ob__btn--ghost{ background:#f2f2f2; color:#111; }
.kr-ob__btn--primary{ background:#ff0000; color:#fff; }
.kr-ob__err{ color:#b91c1c; font-size:12px; min-height: 16px; }

/* ==========================================================
   NF INTRO — Split sections
   ========================================================== */
:root{ --kr-ease: cubic-bezier(.22,.61,.36,1); }

.nf-intro{
  position:relative;
  z-index:2;
  padding:92px 0 54px;
  background:transparent;

  content-visibility:auto;
  contain-intrinsic-size: 520px;
}

.nf-intro__inner{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:46px;
  align-items:center;
}

.nf-intro__copy{ text-align:left; }

.nf-intro__title{
  margin:0 0 14px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.12;
  color:var(--text);
  font-size:clamp(2.0rem, 1.55rem + 1.6vw, 2.85rem);
}

.nf-intro__sub{
  margin:0;
  text-align:left;
  max-width:560px;
}

/* media-only reveal */
.nf-intro__media{ --krp: 1; }

.nf-intro__media img{
  width:100%;
  height:auto;
  border-radius:var(--r-lg);

  --inv: calc(1 - var(--krp));

  opacity: var(--krp);
  transform:
    translate3d(0, calc(var(--inv) * 18px), 0)
    scale(calc(.985 + (var(--krp) * .015)));
  filter: blur(calc(var(--inv) * 10px));

  will-change: transform, opacity, filter;
  transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce){
  .nf-intro__media img{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    will-change:auto !important;
  }
}

/* CTA row */
.nf-intro__actions{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

@media (max-width: 920px){
  .nf-intro{ padding:72px 0 40px; }
  .nf-intro__inner{ grid-template-columns:1fr; gap:26px; }
  .nf-intro__media{ order:0; }
  .nf-intro__copy{ order:1; }
  .nf-intro__sub{ max-width:680px; }
}

.nf-intro--reverse .nf-intro__inner{ direction:ltr; }
.nf-intro--reverse .nf-intro__media{ order:0; }
.nf-intro--reverse .nf-intro__copy{ order:1; }

/* ==========================================================
   LEGACY LAVA KEYFRAMES
   ========================================================== */
@keyframes lava-a{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(14px,-10px,0) scale(1.03)}
}
@keyframes lava-b{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-12px,10px,0) scale(1.02)}
}
@keyframes lava-c{
  0%{transform:translate3d(0,0,0) rotate(.001deg) scale(1)}
  100%{transform:translate3d(8px,-6px,0) rotate(.001deg) scale(1.04)}
}