*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#0f0e0c;
  --ink2:#44433f;
  --ink3:#8a8880;
  --ink4:#b8b6b0;
  --paper:#faf9f6;
  --paper2:#f2f1ec;
  --paper3:#e8e6df;
  --white:#ffffff;
  --accent:#1A56FF;
    --accent2: #234cc1;
  --accent-light:#EEF3FF;
  --accent-mid:#4caf85;
  --accent-border:#b6dece;
  --accent-text:#0d4a31;
  --gold:#b8860b;
  --gold-light:#fdf6e3;
  --gold-border:#e8d48a;
  --gold-text:#7a5a04;
  --red:#c0392b;
  --red-light:#fdf2f0;
  --border:#dedad0;
  --border-dark:#c8c4b8;
  --shadow-sm:0 1px 2px rgba(15,14,12,0.05),0 2px 8px rgba(15,14,12,0.04);
  --shadow:0 2px 8px rgba(15,14,12,0.06),0 8px 24px rgba(15,14,12,0.06);
  --shadow-lg:0 4px 16px rgba(15,14,12,0.08),0 16px 48px rgba(15,14,12,0.08);
  --radius:10px;
  --radius-lg:16px;
  --radius-xl:22px;
  --font-display:'Fraunces',Georgia,serif;
  --font:'Geist',sans-serif;
  --mono:'Geist Mono',monospace;
  --bg: #F7F8FB;
}

html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;font-size:15px}


/* ── Breadcrumb ── */
.breadcrumb{width:100%;margin:0 auto;padding:14px 0 0;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink3);margin-top:10px;}
.breadcrumb a{color:var(--ink3);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb-sep{opacity:0.5}

/* ── Page layout ── */
.page{width:100%;margin:0 auto;padding:3rem 0 5rem;display:grid;grid-template-columns:1fr 340px;gap:2rem;align-items:start}
@media(max-width:900px){.page{grid-template-columns:1fr;padding:1.25rem 1rem 4rem}}

/* ── Left column ── */
.main{}

/* ── Hero section ── */
.hero{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:2rem;
  margin-bottom:1.25rem;
  box-shadow:var(--shadow-sm);
  animation:fadeUp 0.35s ease both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.hero-top{display:flex;align-items:flex-start;gap:1.25rem;margin-bottom:1.5rem}
.site-avatar{
  width:64px;height:64px;
  border-radius:14px;
  background: #fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
  padding: 10px;
  overflow: hidden;
  flex-shrink:0;
  border: 1px solid #e2e2e2;
  box-shadow:0 4px 10px rgba(26,107,74,0.2);
}
.site-avatar img{
  width:100%;height:auto;
}
.hero-meta{flex:1;min-width:0}
.hero-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:0}
.hero-title{font-family:var(--font-display);font-size:26px;font-weight:500;color:var(--ink);letter-spacing:-0.5px;line-height:1.2}
.verified-badge{display:inline-flex;align-items:center;gap:4px;background:var(--accent-light);color:var(--accent);border:1px solid var(--accent);border-radius:20px;font-size:11px;font-weight:500;padding:3px 9px}
.hero-url{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.hero-url a{font-family:var(--mono);font-size:13px;color:var(--accent);text-decoration:none;font-weight:500}
.hero-url a:hover{text-decoration:underline}
.hero-tags{display:flex;flex-wrap:wrap;gap:6px}
.tag-pill{background:#fff;border:1px solid rgba(0,0,0,0.1);border-radius:20px;font-size:12px;padding:3px 10px;color:var(--ink2);font-weight:500}
.tag-pill.cat{background:var(--accent-light);border-color:var(--accent);color:var(--accent)}

.hero-desc{
  font-size:14px;color:var(--ink2);line-height:1.75;
  border-top:1px solid var(--border);
  padding-top:1.25rem;
  margin-bottom:1.25rem;
}
.hero-usp{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-light);
  border:1px solid var(--accent);
  border-radius:8px;
  padding:9px 14px;
  font-size:13px;color:var(--accent);font-weight:500;
  margin-bottom:1.25rem;
  width:100%;
}

/* ── Stat bar ── */
.stat-bar{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.stat-cell{
  background:var(--bg);
  padding:14px 12px;
  text-align:center;
}
.stat-val{font-family:var(--font-display);font-size:22px;font-weight:500;color:var(--ink);letter-spacing:-0.5px;line-height:1;margin-bottom:4px}
.stat-val.green{color:var(--accent)}
.stat-lbl{font-size:11px;color:var(--ink3);font-weight:500;text-transform:uppercase;letter-spacing:0.6px}
.stat-sub{font-size:10px;color:var(--ink4);margin-top:2px;font-family:var(--mono)}

/* ── Section cards ── */
.section-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  margin-bottom:1.25rem;
  box-shadow:var(--shadow-sm);
  animation:fadeUp 0.35s ease both;
}
.section-card:nth-child(2){animation-delay:0.05s}
.section-card:nth-child(3){animation-delay:0.1s}
.section-card:nth-child(4){animation-delay:0.15s}
.section-card:nth-child(5){animation-delay:0.2s}

.sc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;padding-bottom:10px;border-bottom:1px solid var(--border)}
.sc-title{font-family:var(--font-display);font-size:17px;font-weight:500;color:var(--ink)}
.sc-badge{font-size:11px;font-weight:500;padding:3px 9px;border-radius:20px;font-family:var(--font)}

/* ── Metric grid ── */
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.metric-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  text-align:center;
}
.metric-card.accent{background:var(--accent-light);border-color:var(--accent-border)}
.metric-num{font-family:var(--font-display);font-size:28px;font-weight:500;color:var(--ink);letter-spacing:-0.5px;line-height:1;margin-bottom:4px}
.metric-num.green{color:var(--accent)}
.metric-name{font-size:11px;color:var(--ink3);text-transform:uppercase;letter-spacing:0.6px;font-weight:500}
.metric-src{font-size:10px;color:var(--ink4);margin-top:2px;font-family:var(--mono)}

/* ── Gauge bars ── */
.gauge-list{display:flex;flex-direction:column;gap:12px;margin-top:1rem}
.gauge-row{display:flex;align-items:center;gap:12px}
.gauge-label{font-size:12px;color:var(--ink2);font-weight:500;min-width:110px}
.gauge-track{flex:1;height:6px;background:var(--paper3);border-radius:6px;overflow:hidden}
.gauge-fill{height:100%;border-radius:6px;transition:width 1s cubic-bezier(.4,0,.2,1)}
.gauge-fill.green{background:var(--accent)}
.gauge-fill.gold{background:var(--gold)}
.gauge-fill.red{background:#e07060}
.gauge-val{font-size:12px;font-weight:600;font-family:var(--mono);color:var(--ink2);min-width:28px;text-align:right}

/* ── Info rows ── */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.info-row{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius)}
.info-key{font-size:11px;color:var(--ink3);font-weight:500;text-transform:uppercase;letter-spacing:0.6px}
.info-val{font-size:14px;color:var(--ink);font-weight:500}

/* ── Chips ── */
.chip-list{display:flex;flex-wrap:wrap;gap:7px}
.chip{background:var(--paper2);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:12px;color:var(--ink2);font-weight:500}
.chip.green{background:var(--bg);border-color:rgba(0, 0, 0, 0.1);color:var(--ink2)}
.chip.gold{background:var(--gold-light);border-color:var(--gold-border);color:var(--gold-text)}
.chip.red{background:var(--accent-light);border-color:rgba(0, 0, 0, 0.1);color:var(--ink2)}

/* ── Requirements list ── */
.req-list{display:flex;flex-direction:column;gap:8px}
.req-item{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink2);line-height:1.6}
.req-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;margin-top:1px}
.req-icon.ok{background:var(--accent-light);color:var(--accent)}
.req-icon.no{background:var(--red-light);color:var(--red)}

/* ── Sample URLs ── */
.sample-url-list{display:flex;flex-direction:column;gap:8px}
.sample-url-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);transition:border-color 0.12s}
.sample-url-item:hover{border-color:var(--accent-border)}
.url-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-mid);flex-shrink:0}
.sample-url-item a{font-family:var(--mono);font-size:12px;color:var(--accent);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sample-url-item a:hover{text-decoration:underline}

/* ── Sections badges ── */
.section-tag{display:inline-flex;align-items:center;gap:5px;background:var(--paper2);border:1px solid var(--border);border-radius:6px;padding:6px 11px;font-size:12px;font-weight:500;color:var(--ink2)}

/* ── Audience bar ── */
.audience-bar{display:flex;height:8px;border-radius:8px;overflow:hidden;gap:2px;margin:10px 0}
.aud-seg{height:100%;border-radius:2px;flex-shrink:0;transition:flex 0.5s}
.aud-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--ink2)}
.aud-dot{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:4px;vertical-align:middle}

/* ── Sidebar ── */
.sidebar{}

/* ── Order card ── */
.order-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  animation:fadeUp 0.4s 0.1s ease both;
}
.order-header{
  background:#fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding:1.5rem;
  text-align:center;
}
.order-price-label{font-size:11px;color:rgba(0,0,0,0.5);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:4px}
.order-price{font-family:var(--font-display);font-size:40px;font-weight:500;color:var(--accent);letter-spacing:-1px;line-height:1}
.order-price sup{font-size:18px;font-weight:400;vertical-align:super;margin-right:2px}
.order-price-note{font-size:12px;color:rgba(0,0,0,0.4);margin-top:4px}
.order-body{padding:1.25rem}
.order-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border)}
.order-row:last-of-type{border-bottom:none;margin-bottom:0.5rem}
.order-key{font-size:12px;color:var(--ink3);font-weight:500}
.order-val{font-size:13px;color:var(--ink);font-weight:500;text-align:right}
.order-val.green{color:var(--accent)}
.order-val.gold{color:var(--accent)}
.order-cta{
  display:block;width:100%;
  background:var(--accent);
  color:#fff;
  font-family:var(--font);
  font-size:15px;
  font-weight:600;
  border:none;
  padding:14px;
  border-radius:10px;
  cursor:pointer;
  text-align:center;
  transition:all 0.15s;
  letter-spacing:-0.1px;
  margin-bottom:10px;
}
.order-cta:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(35, 76, 193, 0.3)}
.order-cta:active{transform:translateY(0)}
.order-wishlist{
  display:block;width:100%;
  background:transparent;
  color:var(--ink2);
  font-family:var(--font);
  font-size:13px;
  font-weight:500;
  border:1px solid var(--border);
  padding:10px;
  border-radius:10px;
  cursor:pointer;
  text-align:center;
  transition:all 0.15s;
}
.order-wishlist:hover{background:var(--accent-light);border-color:var(--border-dark)}
.order-guarantee{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11px;color:var(--ink3);
  margin-top:10px;text-align:center;
}

/* ── Trust card ── */
.trust-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.25rem;
  margin-top:1rem;
  box-shadow:var(--shadow-sm);
  animation:fadeUp 0.4s 0.2s ease both;
}
.trust-title{font-size:12px;text-transform:uppercase;letter-spacing:0.7px;color:var(--ink3);font-weight:600;margin-bottom:12px}
.trust-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--ink2)}
.trust-item:last-child{border-bottom:none;padding-bottom:0}
.trust-icon{font-size:16px;width:28px;text-align:center;flex-shrink:0}

/* ── Publisher card ── */
.publisher-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.25rem;
  margin-top:1rem;
  box-shadow:var(--shadow-sm);
  animation:fadeUp 0.4s 0.25s ease both;
}
.pub-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pub-avatar{width:40px;height:40px;border-radius:50%;padding: 7px; border: 1px solid #e2e2e2; overflow: hidden;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;color:#fff;flex-shrink:0}
.pub-avatar img{
    width: 100%;
    height: auto;
}
.pub-name{font-size:14px;font-weight:600;color:var(--ink)}
.pub-since{font-size:11px;color:var(--ink3)}
.pub-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:12px}
.pub-stat-n{font-family:var(--font-display);font-size:18px;font-weight:500;color:var(--ink);margin-bottom:2px}
.pub-stat-l{font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:0.5px;font-weight:500}
.contact-btn{display:block;width:100%;background:var(--bg);color:var(--ink2);font-family:var(--font);font-size:13px;font-weight:500;border:1px solid var(--border);padding:9px;border-radius:8px;cursor:pointer;text-align:center;transition:all 0.12s}
.contact-btn:hover{background:var(--accent-light)}

/* ── Review stars ── */
.stars{display:flex;gap:2px}
.star{color:var(--gold);font-size:14px}
.star.empty{color:var(--border-dark)}

/* ── Reviews ── */
.review-list{display:flex;flex-direction:column;gap:12px}
.review-item{padding:14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius)}
.review-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px;gap:8px}
.review-author{font-size:13px;font-weight:600;color:var(--ink)}
.review-date{font-size:11px;color:var(--ink3);white-space:nowrap}
.review-text{font-size:13px;color:var(--ink2);line-height:1.7}

/* ── Tooltip ── */
.tt{position:relative;cursor:help}
.tt::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:11px;padding:4px 8px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.15s;font-family:var(--font)}
.tt:hover::after{opacity:1}

/* ── Divider ── */
.divider{height:1px;background:var(--border);margin:1.25rem 0}

/* ── Back link ── */
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2);text-decoration:none;padding:6px 0;margin-bottom:0.75rem;font-weight:500}
.back-link:hover{color:var(--accent)}

/* ── Responsive ── */
@media(max-width:640px){
  .stat-bar{grid-template-columns:repeat(2,1fr)}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  .info-grid{grid-template-columns:1fr}
  .topbar-nav .topbar-link{display:none}
}

.sidebar .nav-tabs{
    padding: 7px !important;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    margin-bottom: 10px;
    gap: 7px;
}
.sidebar .nav-link:hover{
    background-color: var(--bg);
}
.sidebar .nav-link.active{
    background-color: var(--accent);
    color: #fff;
    border: 1px solid #f2f2f2;
}
.sidebar .nav-link{
    padding: 5px 12px;
    color: #7a7f99;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    border: 1px solid transparent;
    transition: .4s ease-in-out;
}
.tab-content-wrapper {
  /*overflow: hidden;*/
  transition: height 0.8s ease;
}
.hero-det{
    max-width: 100% !important;
}