/* =========================================================
   Digital Hemant — Design System
   Botpresso-inspired: warm espresso base, cream, orange accent
   Type: Sora (display) + Plus Jakarta Sans (body)
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* base neutrals (warm-tinted) */
  --espresso:   #1B1622;   /* dark section bg */
  --espresso-2: #251E30;   /* dark surface */
  --espresso-3: #322942;   /* dark hairline / raised */
  --cream:      #F7F2EA;   /* light section bg */
  --cream-2:    #EFE7DA;   /* warm surface */
  --paper:      #FFFFFF;
  --tan:        #E9DAC5;

  /* ink (text) */
  --ink:        #211C2A;   /* primary text on light */
  --ink-soft:   #5C5563;   /* muted text on light */
  --ink-faint:  #8A828F;
  --on-dark:    #F7F2EA;   /* text on dark */
  --on-dark-soft:#B4ABBC;

  /* accent */
  --accent:     #E8743B;   /* warm orange */
  --accent-600: #D2602B;   /* hover */
  --accent-soft:#FBE6D8;   /* tint surface */
  --accent-ring:rgba(232,116,59,.30);

  /* lines */
  --line:       #E4DACB;
  --line-dark:  rgba(247,242,234,.12);

  /* radii */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* shadow */
  --sh-sm: 0 2px 8px rgba(33,28,42,.06);
  --sh:    0 10px 30px rgba(33,28,42,.08);
  --sh-lg: 0 30px 70px rgba(33,28,42,.14);

  /* layout */
  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);

  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* overflow-x:clip stops the decorative blobs (negative left/right offsets)
   from pushing the page wider than the viewport — the cause of side-to-side
   scrolling on phones. `clip` (not `hidden`) avoids creating a scroll
   container, so the sticky header keeps working. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  max-width:100%;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:700; line-height:1.08; margin:0; letter-spacing:-.02em; color:var(--ink); }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px,9vw,128px); position:relative; }
.section--tight{ padding-block:clamp(48px,6vw,80px); }
.dark{ background:var(--espresso); color:var(--on-dark); }
.dark h1,.dark h2,.dark h3,.dark h4{ color:var(--on-dark); }
.cream{ background:var(--cream); }
.paper{ background:var(--paper); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:700;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--accent); border-radius:2px; }
.dark .eyebrow{ color:var(--accent); }

.h-xl{ font-size:clamp(40px,6vw,76px); }
.h-lg{ font-size:clamp(32px,4.6vw,54px); }
.h-md{ font-size:clamp(26px,3.2vw,38px); }
.lead{ font-size:clamp(18px,2vw,22px); color:var(--ink-soft); line-height:1.6; }
.dark .lead{ color:var(--on-dark-soft); }
.muted{ color:var(--ink-soft); }
.center{ text-align:center; }
.measure{ max-width:62ch; }
.measure-sm{ max-width:46ch; }

.section-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(36px,5vw,64px); }
.section-head.center{ align-items:center; text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:16px;
  padding:15px 26px; border-radius:var(--r-pill); border:1.5px solid transparent;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn--accent{ background:var(--accent); color:#fff; box-shadow:0 8px 22px var(--accent-ring); }
.btn--accent:hover{ background:var(--accent-600); transform:translateY(-2px); }
.btn--dark{ background:var(--ink); color:var(--cream); }
.btn--dark:hover{ background:#000; transform:translateY(-2px); }
.btn--ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); }
.dark .btn--ghost,.hero .btn--ghost,.page-hero .btn--ghost,.price-card.featured .btn--ghost{ border-color:var(--line-dark); color:var(--on-dark); }
.dark .btn--ghost:hover,.hero .btn--ghost:hover,.page-hero .btn--ghost:hover,.price-card.featured .btn--ghost:hover{ border-color:var(--on-dark); }
.btn--light{ background:var(--cream); color:var(--ink); }
.btn--light:hover{ background:#fff; transform:translateY(-2px); }
.btn--lg{ padding:18px 32px; font-size:18px; }
.btn .arr{ transition:transform .2s ease; }
.btn:hover .arr{ transform:translate(3px,-3px); }

.textlink{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; color:var(--accent);
}
.textlink .arr{ transition:transform .2s ease; }
.textlink:hover .arr{ transform:translate(3px,-3px); }

/* ---------- Pills / tags ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:var(--r-pill);
  font-size:13px; font-weight:700; letter-spacing:.02em;
  background:var(--accent-soft); color:var(--accent-600);
}
.dark .pill{ background:var(--espresso-2); color:var(--on-dark); border:1px solid var(--line-dark); }
.tag{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }

/* =========================================================
   HEADER
   ========================================================= */
.topbar{
  background:var(--ink); color:var(--cream);
  font-size:13.5px; letter-spacing:.01em;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:42px; }
.topbar a{ color:var(--cream); opacity:.85; }
.topbar a:hover{ opacity:1; }
.topbar .star{ color:var(--accent); }
.topbar-right{ display:flex; align-items:center; gap:22px; }
@media (max-width:760px){ .topbar-left span{ display:none; } }

.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(247,242,234,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-header.scrolled{ background:rgba(247,242,234,.96); box-shadow:var(--sh-sm); border-color:var(--line); }
.nav{ position:relative; display:flex; align-items:center; gap:28px; min-height:74px; }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:800; font-size:21px; letter-spacing:-.02em; color:var(--ink); }
.brand .mark{
  width:34px; height:34px; border-radius:11px; flex:none;
  background:linear-gradient(135deg, var(--accent), #F0A35E);
  position:relative; box-shadow:0 4px 12px var(--accent-ring);
}
.brand .mark::after{ content:""; position:absolute; inset:9px 9px auto auto; width:9px; height:9px; border-radius:50%; background:#fff; }
.brand b{ font-weight:800; }
.brand span{ color:var(--accent); }

.nav-menu{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.nav-item{ position:relative; }
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px; border-radius:var(--r-pill);
  font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--ink);
  transition:background .15s ease, color .15s ease;
}
.nav-link:hover{ background:var(--cream-2); }
.nav-link .chev{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s ease; opacity:.6; }
.nav-item.open .nav-link .chev{ transform:rotate(-135deg) translateY(-1px); }
.nav-item.open .nav-link{ background:var(--cream-2); }

.nav-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }

/* dropdown */
.dropdown{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); padding:14px; min-width:300px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  z-index:70;
}
.dropdown.wide{ min-width:620px; }
.nav-item.open .dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.dropdown::before{ content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(45deg); width:14px; height:14px; background:var(--paper); border-left:1px solid var(--line); border-top:1px solid var(--line); }
.dd-grid{ display:grid; gap:6px; }
.dropdown.wide .dd-grid{ grid-template-columns:1fr 1fr; gap:6px; }
.dd-link{ display:flex; gap:13px; align-items:flex-start; padding:12px; border-radius:var(--r); transition:background .15s ease; }
.dd-link:hover{ background:var(--cream); }
.dd-ico{ width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-600); }
.dd-ico svg{ width:21px; height:21px; }
.dd-txt b{ display:block; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); margin-bottom:2px; }
.dd-txt span{ font-size:13px; color:var(--ink-soft); line-height:1.45; }
.dd-foot{ margin-top:8px; padding:14px 12px 6px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.dd-foot .textlink{ font-size:14px; }

/* burger */
.burger{ display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line); background:var(--paper); flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.burger span{ width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }
.burger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2){ opacity:0; }
.burger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(420px,90vw); z-index:90;
  background:var(--cream); box-shadow:var(--sh-lg); padding:24px;
  transform:translateX(100%); transition:transform .3s ease; overflow-y:auto;
}
.mobile-menu.open{ transform:translateX(0); }
.m-overlay{ position:fixed; inset:0; background:rgba(27,22,34,.5); opacity:0; visibility:hidden; transition:.3s; z-index:85; }
.m-overlay.open{ opacity:1; visibility:visible; }
.m-group{ border-bottom:1px solid var(--line); }
.m-head{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:0; padding:18px 4px; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink); text-align:left; }
.m-head .chev{ width:9px;height:9px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(45deg);transition:.2s; }
.m-group.open .m-head .chev{ transform:rotate(-135deg); }
.m-sub{ display:none; padding:0 4px 16px; flex-direction:column; gap:2px; }
.m-group.open .m-sub{ display:flex; }
.m-sub a{ padding:9px 12px; border-radius:10px; color:var(--ink-soft); font-weight:500; }
.m-sub a:hover{ background:var(--cream-2); color:var(--ink); }
@media (max-width:1000px){
  .nav-menu, .nav-actions .btn--ghost{ display:none; }
  .burger{ display:flex; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; overflow:hidden; background:var(--espresso); color:var(--on-dark); padding-block:clamp(64px,9vw,120px); }
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,64px); align-items:center; }
.hero h1{ font-size:clamp(38px,5.6vw,72px); color:var(--on-dark); }
.hero h1 .hl{ color:var(--accent); position:relative; white-space:nowrap; }
.hero .kicker{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:var(--r-pill); background:var(--espresso-2); border:1px solid var(--line-dark); font-size:14px; font-weight:600; color:var(--on-dark-soft); margin-bottom:26px; }
.hero .kicker .dot{ width:8px;height:8px;border-radius:50%;background:#3FCF8E; box-shadow:0 0 0 4px rgba(63,207,142,.18); }
.hero p.lead{ margin-top:22px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.hero-rating{ display:flex; align-items:center; gap:14px; margin-top:30px; color:var(--on-dark-soft); font-size:14px; }
.stars{ display:inline-flex; gap:3px; color:var(--accent); }
.stars svg{ width:18px; height:18px; }

/* hero visual: abstract */
.hero-visual{ position:relative; aspect-ratio:1/1; }
.hero-orb{ position:absolute; border-radius:50%; filter:blur(2px); }
.blob{ position:absolute; border-radius:46% 54% 60% 40%/52% 44% 56% 48%; }

/* floating result cards */
.float-card{
  position:absolute; z-index:3; background:var(--paper); color:var(--ink);
  border-radius:var(--r); padding:16px 18px; box-shadow:var(--sh-lg);
  display:flex; flex-direction:column; gap:4px; min-width:170px;
}
.float-card .fc-label{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.float-card .fc-val{ font-family:var(--font-display); font-weight:800; font-size:30px; color:var(--ink); letter-spacing:-.02em; }
.float-card .fc-val span{ color:var(--accent); }
.float-card .fc-trend{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#1F9D6B; }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ max-width:440px; margin:0 auto; width:100%; }
}

/* =========================================================
   STAT STRIP
   ========================================================= */
.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat{ display:flex; flex-direction:column; gap:6px; }
.stat .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(38px,5vw,60px); letter-spacing:-.03em; line-height:1; color:var(--ink); }
.dark .stat .num{ color:var(--on-dark); }
.stat .num .u{ color:var(--accent); }
.stat .lbl{ font-size:14.5px; color:var(--ink-soft); line-height:1.4; }
.dark .stat .lbl{ color:var(--on-dark-soft); }
@media (max-width:760px){ .stat-strip{ grid-template-columns:1fr 1fr; gap:30px 20px; } }

/* ---------- Logo wall ---------- */
.logo-note{ text-align:center; font-size:14px; color:var(--ink-soft); margin-bottom:30px; }
.dark .logo-note{ color:var(--on-dark-soft); }
.logo-wall{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(28px,5vw,64px); }
.logo-wm{ font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:.02em; color:var(--ink-faint); opacity:.7; transition:opacity .2s, color .2s; }
.dark .logo-wm{ color:var(--on-dark-soft); opacity:.55; }
.logo-wm:hover{ opacity:1; color:var(--ink); }
.dark .logo-wm:hover{ color:var(--on-dark); opacity:1; }

/* marquee */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:clamp(40px,6vw,80px); width:max-content; animation:marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =========================================================
   CARDS / GRIDS
   ========================================================= */
.grid{ display:grid; gap:24px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh); border-color:transparent; }
.card .c-ico{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-600); margin-bottom:20px; }
.card .c-ico svg{ width:27px; height:27px; }
.card h3{ font-size:21px; margin-bottom:10px; }
.card p{ color:var(--ink-soft); font-size:16px; }
.card .textlink{ margin-top:18px; font-size:15px; }

/* service card (dark variant) */
.svc-card{ position:relative; overflow:hidden; }
.svc-card .num{ position:absolute; top:22px; right:26px; font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--ink-faint); }

/* =========================================================
   PROCESS
   ========================================================= */
.steps{ display:grid; gap:24px; grid-template-columns:repeat(3,1fr); counter-reset:step; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding:32px; border-radius:var(--r-lg); background:var(--espresso-2); border:1px solid var(--line-dark); }
.step .badge{ width:48px;height:48px;border-radius:50%; display:grid;place-items:center; font-family:var(--font-display); font-weight:800; font-size:20px; background:var(--accent); color:#fff; margin-bottom:20px; }
.step h3{ font-size:21px; margin-bottom:10px; color:var(--on-dark); }
.step p{ color:var(--on-dark-soft); font-size:16px; }

/* =========================================================
   TABS (services / industries)
   ========================================================= */
.tabs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px; }
.tab{ padding:11px 20px; border-radius:var(--r-pill); border:1.5px solid var(--line); background:var(--paper); font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink-soft); transition:.18s; }
.tab:hover{ border-color:var(--ink-soft); color:var(--ink); }
.tab.active{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fade .35s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px); align-items:center; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }
.feature-list{ display:grid; gap:14px; margin-top:8px; }
.feature-list li{ display:flex; gap:12px; align-items:flex-start; font-size:16.5px; }
.feature-list .ck{ width:24px;height:24px;border-radius:50%; flex:none; display:grid;place-items:center; background:var(--accent-soft); color:var(--accent-600); margin-top:1px; }
.feature-list .ck svg{ width:13px;height:13px; }

/* visual panel */
.viz{ border-radius:var(--r-xl); aspect-ratio:5/4; position:relative; overflow:hidden; background:linear-gradient(150deg,var(--cream-2),var(--tan)); border:1px solid var(--line); }
.viz.dark-viz{ background:linear-gradient(150deg,var(--espresso-2),var(--espresso-3)); border-color:var(--line-dark); }

/* =========================================================
   CASE STUDY CARDS
   ========================================================= */
.case-card{ border-radius:var(--r-lg); overflow:hidden; background:var(--paper); border:1px solid var(--line); transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column; }
.case-card:hover{ transform:translateY(-4px); box-shadow:var(--sh); }
.case-top{ aspect-ratio:16/10; position:relative; overflow:hidden; display:grid; place-items:center; }
.case-metric{ font-family:var(--font-display); font-weight:800; font-size:clamp(34px,4vw,52px); color:#fff; letter-spacing:-.02em; position:relative; z-index:2; text-align:center; line-height:1; }
.case-metric small{ display:block; font-size:14px; font-weight:600; letter-spacing:.04em; opacity:.92; margin-top:8px; }
.case-body{ padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.case-body .tag{ color:var(--accent-600); }
.case-body h3{ font-size:20px; }
.case-body p{ color:var(--ink-soft); font-size:15.5px; flex:1; }

/* =========================================================
   TESTIMONIALS (carousel)
   ========================================================= */
.tcar{ position:relative; }
.tcar-viewport{ overflow:hidden; }
.tcar-track{ display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.tslide{ min-width:100%; padding:0 4px; }
.tquote{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(32px,5vw,56px); box-shadow:var(--sh-sm); }
.tquote .mark{ font-family:var(--font-display); font-size:80px; line-height:.6; color:var(--accent); height:42px; }
.tquote q{ display:block; font-family:var(--font-display); font-weight:500; font-size:clamp(20px,2.6vw,29px); line-height:1.4; letter-spacing:-.01em; color:var(--ink); quotes:none; margin:18px 0 28px; }
.tquote .who{ display:flex; align-items:center; gap:14px; }
.tquote .ava{ width:54px;height:54px;border-radius:50%; flex:none; background:linear-gradient(135deg,var(--accent),#F0A35E); display:grid;place-items:center; color:#fff; font-family:var(--font-display); font-weight:800; font-size:20px; }
.tquote .who b{ display:block; font-family:var(--font-display); font-size:16px; }
.tquote .who span{ font-size:14px; color:var(--ink-soft); }
.tcar-nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:30px; }
.tcar-btn{ width:50px;height:50px;border-radius:50%; border:1.5px solid var(--line); background:var(--paper); display:grid;place-items:center; color:var(--ink); transition:.18s; }
.tcar-btn:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.tcar-dots{ display:flex; gap:8px; }
.tdot{ width:9px;height:9px;border-radius:50%; background:var(--line); border:0; padding:0; transition:.2s; }
.tdot.active{ background:var(--accent); width:26px; border-radius:6px; }

/* =========================================================
   AWARDS / BADGES
   ========================================================= */
.badges{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
@media (max-width:860px){ .badges{ grid-template-columns:repeat(2,1fr); } }
.badge-card{ border:1px solid var(--line-dark); border-radius:var(--r); padding:24px 18px; text-align:center; display:flex; flex-direction:column; gap:12px; align-items:center; background:var(--espresso-2); }
.badge-medal{ width:56px;height:56px; border-radius:50%; display:grid;place-items:center; background:linear-gradient(135deg,var(--accent),#F0A35E); color:#fff; }
.badge-card b{ font-family:var(--font-display); font-size:15px; color:var(--on-dark); }
.badge-card span{ font-size:13px; color:var(--on-dark-soft); }

/* =========================================================
   TEAM
   ========================================================= */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:860px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
.member{ text-align:center; }
.member .photo{ aspect-ratio:1/1; border-radius:var(--r-lg); overflow:hidden; margin-bottom:16px; position:relative; display:grid; place-items:center; }
.member .photo .initials{ font-family:var(--font-display); font-weight:800; font-size:46px; color:#fff; opacity:.95; }
.member b{ font-family:var(--font-display); font-size:18px; display:block; }
.member span{ color:var(--ink-soft); font-size:14.5px; }

/* Founder trust section (template-parts/founder.php) */
.founder-photo{ aspect-ratio:1/1; width:100%; max-width:360px; border-radius:var(--r-xl); overflow:hidden; position:relative; display:grid; place-items:center; box-shadow:var(--sh-lg); }
.founder-photo .initials{ font-family:var(--font-display); font-weight:800; font-size:84px; color:#fff; opacity:.95; }
.founder-role{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--accent-600); }
.founder-li{ display:inline-flex; align-items:center; gap:9px; }
.founder-li-ico{ display:inline-grid; place-items:center; }
.founder-li-ico svg{ width:18px; height:18px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ max-width:840px; margin:0 auto; display:grid; gap:14px; }
.faq-item{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:box-shadow .2s, border-color .2s; }
.faq-item.open{ box-shadow:var(--sh); border-color:transparent; }
.faq-q{ width:100%; text-align:left; background:none; border:0; padding:24px 26px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink); }
.faq-ico{ width:30px;height:30px; flex:none; border-radius:50%; background:var(--accent-soft); color:var(--accent-600); position:relative; display:grid; place-items:center; }
.faq-ico::before,.faq-ico::after{ content:""; position:absolute; background:currentColor; border-radius:2px; }
.faq-ico::before{ width:13px; height:2.5px; }
.faq-ico::after{ width:2.5px; height:13px; transition:transform .25s ease; }
.faq-item.open .faq-ico::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a-inner{ padding:0 26px 26px; color:var(--ink-soft); font-size:16.5px; line-height:1.65; }

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta{ position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--accent); color:#fff; padding:clamp(40px,6vw,72px); }
.cta h2{ color:#fff; }
.cta .lead{ color:rgba(255,255,255,.92); }
.cta-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; position:relative; z-index:2; }
@media (max-width:820px){ .cta-grid{ grid-template-columns:1fr; } }
.cta-points{ display:grid; gap:14px; }
.cta-points li{ display:flex; gap:12px; align-items:flex-start; font-size:16.5px; }
.cta-points .ck{ width:26px;height:26px;border-radius:50%; flex:none; background:rgba(255,255,255,.22); display:grid;place-items:center; color:#fff; }
.cta-points .ck svg{ width:14px;height:14px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--espresso); color:var(--on-dark-soft); padding-top:clamp(56px,7vw,88px); }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:40px 24px; padding-bottom:48px; border-bottom:1px solid var(--line-dark); }
@media (max-width:980px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer .brand{ color:var(--on-dark); margin-bottom:18px; }
.footer-col h5{ font-family:var(--font-display); font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark); margin-bottom:18px; }
.footer-col a{ display:block; padding:7px 0; color:var(--on-dark-soft); font-size:15px; }
.footer-col a:hover{ color:var(--accent); }
.footer-blurb{ font-size:15px; line-height:1.6; max-width:30ch; margin-bottom:22px; }
.socials{ display:flex; gap:10px; }
.socials a{ width:40px;height:40px;border-radius:11px; border:1px solid var(--line-dark); display:grid;place-items:center; color:var(--on-dark); transition:.2s; }
.socials a:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.socials svg{ width:18px; height:18px; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:28px; flex-wrap:wrap; font-size:14px; }
.footer-bottom .links{ display:flex; gap:22px; flex-wrap:wrap; }

/* Footer mini lead form — fills the 5th footer-top column */
.footer-form-note{ font-size:14px; line-height:1.55; color:var(--on-dark-soft); margin-bottom:16px; }
.footer-form{ display:flex; flex-direction:column; gap:10px; }
.footer-form-input{ width:100%; font-family:var(--font-body); font-size:15px; padding:11px 14px; border-radius:var(--r-sm); border:1px solid var(--line-dark); background:rgba(247,242,234,.06); color:var(--on-dark); }
.footer-form-input::placeholder{ color:var(--on-dark-soft); }
.footer-form-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
.footer-form .btn{ width:100%; justify-content:center; }
.footer-form-err{ color:#F0A35E; font-size:13px; margin:6px 0 0; }
.footer-form-done{ display:flex; gap:10px; align-items:flex-start; color:var(--on-dark); font-size:14px; line-height:1.5; }
.footer-form-check{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#fff; }
.footer-form-check svg{ width:15px; height:15px; }

/* Footer newsletter band — full-width row above .footer-bottom (footer.php) */
.footer-newsletter{ display:grid; grid-template-columns:1.4fr 2fr; gap:18px 40px; align-items:center; padding-block:32px; border-bottom:1px solid var(--line-dark); }
.footer-newsletter__copy h5{ font-family:var(--font-display); font-size:18px; color:var(--on-dark); margin-bottom:6px; }
.footer-newsletter__copy .footer-form-note{ margin-bottom:0; max-width:42ch; }
.footer-newsletter__form{ flex-direction:row; flex-wrap:wrap; align-items:center; }
.footer-newsletter__form .footer-form-input{ flex:1 1 180px; width:auto; }
.footer-newsletter__form .btn{ width:auto; flex:0 0 auto; }
.footer-newsletter__form .footer-form-err{ flex-basis:100%; }
.footer-newsletter .footer-form-done{ grid-column:1 / -1; }
@media (max-width:768px){ .footer-newsletter{ grid-template-columns:1fr; gap:14px; } }
@media (max-width:560px){
  .footer-newsletter__form{ flex-direction:column; align-items:stretch; }
  .footer-newsletter__form .footer-form-input,
  .footer-newsletter__form .btn{ width:100%; flex:none; }
}

/* Mobile sticky action bar (footer.php) — hidden on desktop */
.sticky-cta{ display:none; }
@media (max-width:768px){
  .sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -6px 22px rgba(20,16,26,.12); }
  .sticky-cta__btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:13px 14px;
    border-radius:var(--r-sm); font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1; }
  .sticky-cta__wa{ flex:0 0 auto; background:#25D366; color:#fff; }
  .sticky-cta__wa svg{ width:20px; height:20px; }
  .sticky-cta__lead{ flex:1; background:var(--accent); color:#fff; box-shadow:0 8px 22px var(--accent-ring); }
  body.peakflow{ padding-bottom:70px; }
}

/* =========================================================
   PAGE HERO (inner pages)
   ========================================================= */
.page-hero{ background:var(--espresso); color:var(--on-dark); padding-block:clamp(56px,7vw,96px); position:relative; overflow:hidden; }
.page-hero .wrap{ position:relative; z-index:2; }
.crumbs{ display:flex; gap:8px; align-items:center; font-size:14px; color:var(--on-dark-soft); margin-bottom:22px; }
.crumbs a:hover{ color:var(--accent); }
.crumbs .sep{ opacity:.5; }
.page-hero h1{ font-size:clamp(36px,5.4vw,68px); color:var(--on-dark); max-width:18ch; }
.page-hero .lead{ margin-top:20px; max-width:60ch; }
/* .hero / .page-hero are dark (espresso) sections that don't carry the .dark
   class, so the .dark text overrides above don't reach them. Re-apply the ones
   their content uses so muted text + pills stay legible on the dark background
   (matches the existing .page-hero .skilltag fix). */
.hero .lead,.page-hero .lead,.hero .muted,.page-hero .muted{ color:var(--on-dark-soft); }
.hero .pill,.page-hero .pill{ background:var(--espresso-2); color:var(--on-dark); border:1px solid var(--line-dark); }

/* =========================================================
   PRICING
   ========================================================= */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
@media (max-width:920px){ .price-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
.price-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:34px; display:flex; flex-direction:column; gap:18px; position:relative; }
.price-card.featured{ background:var(--espresso); color:var(--on-dark); border-color:var(--espresso); box-shadow:var(--sh-lg); transform:translateY(-12px); }
@media (max-width:920px){ .price-card.featured{ transform:none; } }
.price-card.featured h3,.price-card.featured .price{ color:var(--on-dark); }
.price-card.featured .price-feat li{ color:var(--on-dark-soft); }
.price-tag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 16px; border-radius:var(--r-pill); }
.price-card h3{ font-size:22px; }
.price-card .ptype{ font-size:14.5px; color:var(--ink-soft); }
.price-card.featured .ptype{ color:var(--on-dark-soft); }
.price{ font-family:var(--font-display); font-weight:800; font-size:48px; letter-spacing:-.03em; color:var(--ink); }
.price small{ font-size:16px; font-weight:600; color:var(--ink-soft); }
.price-card.featured .price small{ color:var(--on-dark-soft); }
.price-feat{ display:grid; gap:12px; margin:6px 0 8px; }
.price-feat li{ display:flex; gap:11px; align-items:flex-start; font-size:15.5px; color:var(--ink-soft); }
.price-feat .ck{ width:22px;height:22px;border-radius:50%; flex:none; background:var(--accent-soft); color:var(--accent-600); display:grid;place-items:center; }
.price-feat .ck svg{ width:12px;height:12px; }
.price-card .btn{ margin-top:auto; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px); align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field label{ font-family:var(--font-display); font-weight:600; font-size:14.5px; }
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:16px; padding:14px 16px;
  border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); transition:.18s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.contact-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(28px,4vw,44px); box-shadow:var(--sh-sm); }
.info-item{ display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); }
.info-item:last-child{ border-bottom:0; }
.info-ico{ width:48px;height:48px;border-radius:13px; flex:none; background:var(--accent-soft); color:var(--accent-600); display:grid;place-items:center; }
.info-item b{ font-family:var(--font-display); display:block; margin-bottom:3px; }
.info-item span{ color:var(--ink-soft); font-size:15.5px; }

/* =========================================================
   MISC: reveal animation
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-track{ animation:none; }
  *{ scroll-behavior:auto; }
}

/* divider shapes */
.deco{ position:absolute; pointer-events:none; z-index:1; }

/* big quote block */
.bigquote{ font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3.6vw,46px); line-height:1.28; letter-spacing:-.02em; max-width:20ch; }
.bigquote .hl{ color:var(--accent); }

/* value props list */
.vlist{ display:grid; gap:28px; }
.vrow{ display:flex; gap:18px; align-items:flex-start; }
.vrow .vico{ width:50px;height:50px;border-radius:14px;flex:none; background:var(--accent-soft); color:var(--accent-600); display:grid; place-items:center; }
.vrow .vico svg{ width:24px;height:24px; }
.vrow h4{ font-size:19px; margin-bottom:6px; }
.vrow p{ color:var(--ink-soft); font-size:16px; }

/* stat callout band */
.band{ background:var(--accent-soft); }

/* =========================================================================
 * SEO service pages — grouped mega-menu, related blocks, services widget
 * ====================================================================== */

/* Mega-menu — rail + panes (Services / Near Me). The level-1 services / branches
   sit in a left rail; hovering one reveals its pane on the right (category
   columns, or a single promo "solo" pane for childless branches). Anchored to
   the nav's left edge (.nav is positioned) so Services and Near Me line up. */
.nav-item.mega-parent{ position:static; }
.dropdown.mega{ left:0; right:auto; transform:translateY(8px); width:min(1040px, calc(100vw - 2 * var(--gut))); max-width:calc(100vw - 2 * var(--gut)); padding:0; overflow:hidden; }
.nav-item.open .dropdown.mega{ transform:translateY(0); }
.dropdown.mega::before{ display:none; }
.mega-grid{ display:flex; align-items:stretch; }
.mega-rail{ flex:0 0 250px; display:flex; flex-direction:column; gap:2px; padding:14px; background:var(--cream); border-right:1px solid var(--line); max-height:540px; overflow-y:auto; }
.mega-rail-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink); transition:background .15s ease, color .15s ease, box-shadow .15s ease; }
.mega-rail-item:hover, .mega-rail-item.active{ background:var(--paper); color:var(--accent-600); box-shadow:var(--sh-sm); }
.mr-ico{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-600); transition:background .15s ease, color .15s ease; }
.mr-ico svg{ width:18px; height:18px; }
.mega-rail-item.active .mr-ico{ background:var(--accent); color:#fff; }
.mr-name{ flex:1; min-width:0; }
.mr-arr{ width:8px; height:8px; flex:none; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); opacity:0; transition:opacity .15s ease; }
.mega-rail-item:hover .mr-arr, .mega-rail-item.active .mr-arr{ opacity:.55; }
.mega-body{ flex:1; min-width:0; padding:24px 26px; max-height:540px; overflow-y:auto; }
.mega-pane{ display:none; }
.mega-pane.active{ display:block; animation:fade .3s ease; }
.mega-pane-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.mega-pane-head b{ display:block; font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); margin-bottom:3px; }
.mega-pane-head span{ font-size:13.5px; color:var(--ink-soft); }
.mega-pane-head .textlink{ flex:none; font-size:14px; white-space:nowrap; }
.mega-cols{ columns:3; column-gap:28px; }
.mega-col{ break-inside:avoid; display:inline-block; width:100%; margin-bottom:18px; }
.mega-col h6{ font-family:var(--font-display); font-weight:600; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 8px; }
.mega-col h6 a{ color:var(--ink-faint); }
.mega-col h6 a:hover{ color:var(--accent); }
.mega-col a{ display:block; padding:5px 0; font-size:14px; color:var(--ink-soft); line-height:1.35; transition:color .15s ease; }
.mega-col a:hover{ color:var(--accent-600); }
.mega-col a.allink{ font-weight:600; color:var(--accent-600); }
.mega-solo{ display:flex; gap:22px; align-items:flex-start; max-width:560px; }
.ms-ico{ width:56px; height:56px; flex:none; border-radius:15px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-600); }
.ms-ico svg{ width:26px; height:26px; }
.ms-body h5{ font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--ink); margin:0 0 8px; }
.ms-body p{ font-size:15px; color:var(--ink-soft); line-height:1.55; margin:0 0 16px; }
.ms-body ul{ display:grid; gap:10px; margin:0 0 20px; }
.ms-body li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink); }
.ms-body li svg{ width:18px; height:18px; flex:none; color:var(--accent); margin-top:1px; }
.mega-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 26px; background:var(--cream); border-top:1px solid var(--line); font-size:14px; color:var(--ink-soft); }
.mega-foot .textlink{ font-size:14px; }
@media (max-width:1100px){ .mega-rail{ flex-basis:210px; } .mega-cols{ columns:2; } }
.m-sub-l1{ font-family:var(--font-display); font-weight:700; color:var(--ink); }

/* Footer locations block: section sub-headings (link grids now use .geo-grid--sm). */
.pf-loc-head{
  font-family:var(--font-display); font-weight:600; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; opacity:.65; margin:0 0 10px;
}

/* Mobile menu — category sub-headings */
.m-sub-head{ display:block; font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:14px 12px 4px; }
.m-sub-more{ font-size:13px; font-weight:600; color:var(--accent-600) !important; }

/* [related_services] shortcode wrapper */
.pf-related-shortcode{ margin:32px 0; }
.pf-related-title{ font-family:var(--font-display); font-weight:700; font-size:22px; margin:0 0 18px; color:var(--ink); }

/* India locations footer block (theme-rendered, sits on the dark footer) */
.pf-locations-footer h5{ font-family:var(--font-display); font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark); margin-bottom:14px; }
.pf-locations-footer h5 a{ color:var(--on-dark); }
.pf-locations-footer a{ color:var(--on-dark-soft); }
.pf-locations-footer a:hover{ color:var(--accent); }

/* Footer widgets row + Services widget */
.footer-widgets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:28px 32px; padding-bottom:44px; margin-bottom:4px; border-bottom:1px solid var(--line-dark); }
.footer-widget h5{ font-family:var(--font-display); font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark); margin-bottom:16px; }
.footer-widget ul{ list-style:none; margin:0; padding:0; }
.footer-widget a{ color:var(--on-dark-soft); font-size:14px; }
.footer-widget a:hover{ color:var(--accent); }
.pf-svc-widget{ list-style:none; margin:0; padding:0; }
.pf-svc-widget li a{ display:block; padding:5px 0; color:var(--on-dark-soft); font-size:14px; }
.pf-svc-widget li a:hover{ color:var(--accent); }
.pf-svc-widget--grouped{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px 28px; }
.pf-svc-group{ font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark); margin:0 0 8px; }
.pf-svc-group a{ color:var(--on-dark); }
.pf-svc-group a:hover{ color:var(--accent); }

/* =========================================================
   Free SEO Tools — directory grid + tool detail pages
   ========================================================= */

/* ---------- Directory: search + filters ---------- */
.tools-search{ position:relative; max-width:720px; margin:0 auto; display:flex; align-items:center; }
.tools-search .s-ico{ position:absolute; left:20px; width:22px; height:22px; color:var(--ink-faint); pointer-events:none; }
.tools-search input{ flex:1; width:100%; font-family:var(--font-body); font-size:17px; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r-pill); padding:16px 120px 16px 54px; transition:border-color .2s, box-shadow .2s; }
.tools-search input:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring); }
.tools-search .btn{ position:absolute; right:6px; padding:11px 22px; }

.tool-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }
.chip{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink-soft); background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r-pill); padding:9px 16px; transition:all .18s ease; }
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.active{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.chip .n{ font-size:12px; font-weight:700; background:var(--cream-2); color:var(--ink-soft); border-radius:var(--r-pill); padding:1px 8px; }
.chip.active .n{ background:rgba(247,242,234,.18); color:var(--cream); }

/* ---------- Directory: tool grid ---------- */
.tools-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.tool-card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s; }
.tool-card:hover{ transform:translateY(-4px); box-shadow:var(--sh); border-color:transparent; }
.tool-card.is-hidden{ display:none; }
.tc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.tc-ico{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-600); }
.tc-ico svg{ width:25px; height:25px; }
.tool-badge{ font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; border-radius:var(--r-pill); padding:4px 10px; }
.tool-badge.free{ background:#E7F4EC; color:#1F7A4D; }
.tool-badge.beta{ background:#EEE9FB; color:#6A4BB3; }
.tool-badge.freemium{ background:var(--accent-soft); color:var(--accent-600); }
.tc-cat{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.tool-card h3{ font-size:19px; margin:8px 0 10px; }
.tool-card p{ color:var(--ink-soft); font-size:15.5px; line-height:1.55; flex:1; }
.tc-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.tc-meta{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-faint); }
.tc-meta svg{ width:14px; height:14px; color:var(--accent); }
.tc-open{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--accent-600); }
.tc-open .arr{ transition:transform .2s ease; }
.tool-card:hover .tc-open .arr{ transform:translate(3px,-3px); }
.tools-empty{ display:none; text-align:center; padding:48px 0 8px; }
[data-tools].is-empty .tools-grid{ display:none; }
[data-tools].is-empty .tools-empty{ display:block; }

/* ---------- Directory: browse-by-category ---------- */
.catx-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.catx{ display:flex; align-items:center; gap:16px; background:var(--espresso-2); border:1px solid var(--line-dark); border-radius:var(--r-lg); padding:20px 22px; transition:transform .2s ease, border-color .2s; }
.catx:hover{ transform:translateY(-3px); border-color:var(--accent); }
.cx-ico{ width:48px; height:48px; flex:none; border-radius:13px; display:grid; place-items:center; background:rgba(232,116,59,.16); color:var(--accent); }
.cx-ico svg{ width:24px; height:24px; }
.catx > span:last-child{ display:flex; flex-direction:column; }
.catx b{ font-family:var(--font-display); font-size:17px; color:var(--on-dark); }
.catx span span{ color:var(--on-dark-soft); font-size:14px; }
@media (max-width:860px){ .catx-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .catx-grid{ grid-template-columns:1fr; } .tools-search .btn{ display:none; } .tools-search input{ padding-right:20px; } }

/* ---------- Tool detail: masthead ---------- */
.tool-masthead{ display:flex; align-items:flex-start; gap:26px; flex-wrap:wrap; }
.tm-ico{ width:76px; height:76px; flex:none; border-radius:20px; display:grid; place-items:center; background:rgba(232,116,59,.16); color:var(--accent); }
.tm-ico svg{ width:38px; height:38px; }
.tm-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.tm-chip{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--on-dark); background:rgba(247,242,234,.08); border:1px solid var(--line-dark); border-radius:var(--r-pill); padding:7px 14px; }
.tm-chip svg{ width:15px; height:15px; color:var(--accent); }

/* ---------- Tool detail: layout ---------- */
.tooldetail-grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px; align-items:start; }
@media (max-width:1000px){ .tooldetail-grid{ grid-template-columns:1fr; gap:40px; } }

/* ---------- Tool detail: the interactive box ---------- */
.toolbox{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(22px,3vw,34px); box-shadow:var(--sh); }
.toolbox-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.toolbox-head h2{ font-size:22px; }
.toolbox-head .btn{ padding:9px 18px; font-size:14px; }
.tool-field{ margin-bottom:20px; }
.tool-field label{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink); margin-bottom:8px; }
.tool-field .count{ font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--ink-faint); }
.tool-field .count.warn{ color:var(--accent-600); }
.tool-field .count.over{ color:#C2453B; }
.tool-field input, .tool-field textarea, .tool-field select{ width:100%; font-family:var(--font-body); font-size:16px; color:var(--ink); background:var(--cream); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:13px 15px; transition:border-color .2s, box-shadow .2s; }
.tool-field textarea{ resize:vertical; line-height:1.55; }
.tool-field input:focus, .tool-field textarea:focus, .tool-field select:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring); background:var(--paper); }
.tool-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .tool-row{ grid-template-columns:1fr; } }
.tool-checks{ display:grid; gap:12px; margin:4px 0 22px; }
.tool-check{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-soft); cursor:pointer; }
.tool-check input{ width:18px; height:18px; accent-color:var(--accent); }

.meter{ height:6px; border-radius:var(--r-pill); background:var(--cream-2); margin-top:10px; overflow:hidden; }
.meter i{ display:block; height:100%; width:0; border-radius:var(--r-pill); background:#1F7A4D; transition:width .2s ease, background .2s ease; }
.meter.warn i{ background:var(--accent); }
.meter.over i{ background:#C2453B; }

/* ---------- Tool detail: SERP preview ---------- */
.serp-wrap{ margin-top:6px; }
.serp-label{ font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; }
.serp{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; }
.serp-top{ display:flex; align-items:center; gap:12px; }
.serp-fav{ width:28px; height:28px; flex:none; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; }
.serp-fav span{ width:13px; height:13px; border-radius:4px; background:linear-gradient(135deg,var(--accent),var(--accent-600)); }
.serp-site b{ display:block; font-family:var(--font-body); font-weight:600; font-size:14px; color:#202124; line-height:1.2; }
.serp-site small{ display:block; font-size:12.5px; color:#4d5156; }
.serp-title{ font-family:arial, var(--font-body); font-weight:400; font-size:20px; line-height:1.3; color:#1a0dab; margin:14px 0 4px; letter-spacing:0; }
.serp-desc{ font-size:14px; line-height:1.58; color:#4d5156; }
.serp-date{ color:#70757a; }

/* ---------- Tool detail: code output ---------- */
.tool-output{ margin-top:8px; }
.code-box{ margin:0; background:var(--espresso); color:#E8E2D6; border-radius:var(--r); padding:18px 20px; overflow:auto; max-height:340px; }
.code-box code{ font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:13px; line-height:1.65; white-space:pre; color:inherit; }

/* ---------- Tool detail: actions ---------- */
.tool-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.copied{ background:#1F7A4D !important; box-shadow:none !important; }

/* ---------- Tool detail: word-counter stats ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:6px; }
.stat-box{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r); padding:18px 16px; text-align:center; }
.stat-num{ display:block; font-family:var(--font-display); font-weight:800; font-size:28px; color:var(--ink); line-height:1; }
.stat-lbl{ display:block; font-size:13px; color:var(--ink-faint); margin-top:8px; }
@media (max-width:560px){ .stat-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- Tool detail: prose ---------- */
.prose p{ color:var(--ink-soft); font-size:16.5px; line-height:1.7; margin-bottom:16px; }
.prose p:last-child{ margin-bottom:0; }
.prose b{ color:var(--ink); }
.prose code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9em; background:var(--cream-2); border-radius:6px; padding:2px 6px; }

/* ---------- Tool detail: sidebar ---------- */
.side-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; margin-bottom:18px; }
.side-card h4{ font-size:16px; margin-bottom:16px; }
.rate-big{ display:flex; align-items:center; gap:16px; }
.rate-big .score{ font-family:var(--font-display); font-weight:800; font-size:46px; color:var(--ink); line-height:1; }
.rate-big .stars{ display:flex; gap:2px; }
.rate-big .stars svg{ width:18px; height:18px; }
.info-list{ display:grid; gap:0; }
.info-list .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.info-list .row:last-child{ border-bottom:0; }
.info-list .row span{ color:var(--ink-soft); }
.info-list .row b{ color:var(--ink); font-weight:600; }
.share-row{ display:flex; gap:10px; }
.share-row a{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--cream); border:1px solid var(--line); color:var(--ink-soft); transition:all .18s ease; }
.share-row a:hover{ border-color:var(--accent); color:var(--accent-600); transform:translateY(-2px); }
.share-row svg{ width:18px; height:18px; }

/* ---------- Tool detail: similar tools ---------- */
.alt-list{ display:grid; gap:12px; }
.alt-row{ display:flex; align-items:center; gap:18px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 22px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s; }
.alt-row:hover{ transform:translateY(-2px); box-shadow:var(--sh); border-color:transparent; }
.alt-rank{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--ink-faint); width:24px; flex:none; text-align:center; }
.alt-ico{ width:48px; height:48px; flex:none; border-radius:13px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-600); }
.alt-ico svg{ width:23px; height:23px; }
.alt-body{ flex:1; min-width:0; }
.alt-body b{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:17px; }
.alt-body .alt-desc{ display:block; color:var(--ink-soft); font-size:14.5px; margin-top:4px; }
.alt-likes{ display:inline-flex; align-items:center; gap:6px; flex:none; font-size:13px; color:var(--ink-faint); }
.alt-likes svg{ width:14px; height:14px; color:var(--accent); }
.alt-likes b{ color:var(--ink); }
@media (max-width:620px){ .alt-row{ gap:14px; padding:16px; } .alt-likes{ display:none; } }

/* ---------- Category page: rich tool rows ---------- */
.cat-tools{ display:grid; gap:18px; }
.toolrow{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3vw,30px); transition:box-shadow .2s ease, border-color .2s; }
.toolrow:hover{ box-shadow:var(--sh); border-color:transparent; }
.toolrow-head{ display:flex; align-items:flex-start; gap:18px; }
.tr-ico{ width:58px; height:58px; flex:none; border-radius:15px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-600); }
.tr-ico svg{ width:28px; height:28px; }
.tr-headmain{ flex:1; min-width:0; }
.tr-headmain h3{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:21px; }
.tr-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tr-pill{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-soft); background:var(--cream); border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 12px; }
.tr-pill svg{ width:13px; height:13px; color:var(--accent); }
.tr-price{ color:#1F7A4D; background:#E7F4EC; border-color:#CDEAD9; }
.tr-desc{ color:var(--ink-soft); font-size:16px; line-height:1.6; margin-top:18px; }
.tr-best{ font-size:15px; color:var(--ink); margin-top:14px; }
.tr-best span{ font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-600); margin-right:8px; }
.tr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; margin-top:20px; }
.tr-grid h4{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.tr-grid ul{ display:grid; gap:8px; }
.tr-grid li{ display:flex; gap:9px; align-items:flex-start; font-size:15px; color:var(--ink-soft); }
.pc-ico{ width:20px; height:20px; flex:none; border-radius:50%; display:grid; place-items:center; margin-top:1px; }
.pc-ico svg{ width:11px; height:11px; }
.pc-yes{ background:#E7F4EC; color:#1F7A4D; }
.pc-no{ background:#FBE3E1; color:#C2453B; }
.tr-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.tr-soon{ font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink-faint); background:var(--cream-2); border-radius:var(--r-pill); padding:9px 16px; }
@media (max-width:620px){ .tr-grid{ grid-template-columns:1fr; } .toolrow-head{ gap:14px; } }

/* ---------- Tool widgets: shared result UI ---------- */
.tool-table{ width:100%; border-collapse:collapse; margin-top:8px; font-size:14.5px; }
.tool-table th{ text-align:left; font-family:var(--font-display); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); padding:8px 12px; border-bottom:1px solid var(--line); }
.tool-table td{ padding:9px 12px; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:top; }
.tool-table td:nth-child(2), .tool-table td:nth-child(3){ color:var(--ink-soft); white-space:nowrap; width:1%; }
.tool-table tr:last-child td{ border-bottom:0; }

.intent-tag{ display:inline-block; font-family:var(--font-display); font-weight:600; font-size:12px; border-radius:var(--r-pill); padding:3px 11px; }
.intent-informational{ background:#E6F0FB; color:#2E5E9E; }
.intent-commercial{ background:#FBF0DD; color:#9A6B12; }
.intent-transactional{ background:#E7F4EC; color:#1F7A4D; }
.intent-navigational{ background:#EEE9FB; color:#6A4BB3; }

.tool-note{ font-size:13.5px; color:var(--ink-faint); margin-top:6px; }
.tool-note--warn{ background:var(--accent-soft); color:var(--accent-600); border-radius:var(--r-sm); padding:11px 14px; margin-top:16px; font-weight:500; }

/* Score ring (title optimizer, AI detector) */
.res-score{ display:flex; align-items:center; gap:18px; margin:10px 0 18px; padding:18px 20px; background:var(--cream); border:1px solid var(--line); border-radius:var(--r); }
.rs-ring{ width:88px; height:88px; flex:none; border-radius:50%; display:flex; align-items:baseline; justify-content:center; gap:1px; background:var(--paper); border:5px solid var(--ink-faint); }
.rs-num{ font-family:var(--font-display); font-weight:800; font-size:30px; color:var(--ink); line-height:1; }
.rs-of{ font-size:13px; color:var(--ink-faint); }
.rs-label{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); }
.res-score.good .rs-ring{ border-color:#1F7A4D; } .res-score.good .rs-num{ color:#1F7A4D; }
.res-score.warn .rs-ring{ border-color:var(--accent); } .res-score.warn .rs-num{ color:var(--accent-600); }
.res-score.over .rs-ring{ border-color:#C2453B; } .res-score.over .rs-num{ color:#C2453B; }

/* Pass/fail checklist (title optimizer, AI detector signals) */
.check-list{ display:grid; gap:9px; margin:4px 0 0; }
.check-list li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--ink-soft); }
.check-list .cl-ico{ width:20px; height:20px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; margin-top:1px; }
.check-list li.ok .cl-ico{ background:#E7F4EC; color:#1F7A4D; }
.check-list li.no .cl-ico{ background:#FBE3E1; color:#C2453B; }

/* Radio row (robots tool) */
.radio-row{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.tool-check input[type="radio"]{ width:18px; height:18px; accent-color:var(--accent); }

/* Dynamic field rows (hreflang) */
.field-rows-label{ display:block; font-family:var(--font-display); font-weight:600; font-size:14.5px; margin-bottom:10px; }
.field-rows{ display:grid; gap:10px; }
.field-row{ display:flex; gap:10px; align-items:center; }
.field-row input{ flex:1; min-width:0; font-family:var(--font-body); font-size:15px; color:var(--ink); background:var(--cream); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; }
.field-row input:first-child{ flex:0 0 130px; }
.field-row input:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring); background:var(--paper); }
.field-x{ flex:none; width:36px; height:36px; border-radius:9px; border:1px solid var(--line); background:var(--paper); color:var(--ink-faint); font-size:18px; line-height:1; }
.field-x:hover{ border-color:#C2453B; color:#C2453B; }
@media (max-width:520px){ .field-row input:first-child{ flex-basis:96px; } }

/* Distribution bars (anchor analyzer) */
.res-bars{ display:grid; gap:12px; margin-top:6px; }
.rbar{ display:flex; align-items:center; gap:12px; font-size:14px; }
.rbar-l{ flex:0 0 120px; color:var(--ink-soft); }
.rbar-track{ flex:1; height:10px; border-radius:var(--r-pill); background:var(--cream-2); overflow:hidden; }
.rbar-track i{ display:block; height:100%; border-radius:var(--r-pill); }
.rbar-v{ flex:0 0 42px; text-align:right; font-weight:700; color:var(--ink); }
.bar-branded{ background:#1F7A4D; } .bar-exact{ background:var(--accent); } .bar-naked{ background:#2E5E9E; } .bar-generic{ background:var(--ink-faint); }
@media (max-width:520px){ .rbar-l{ flex-basis:88px; } }

/* ---------- Location internal linking: geo-panel (sitewide standard) ---------- */
.geo-panel{ position:relative; overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(24px,4vw,44px); box-shadow:var(--sh); }
.geo-panel .deco{ position:absolute; pointer-events:none; }
.geo-head{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.geo-count{ display:flex; align-items:center; gap:14px; }
.geo-count b{ font-family:var(--font-display); font-weight:800; font-size:clamp(34px,5vw,46px); color:var(--accent-600); line-height:1; }
.geo-count span{ font-size:14px; color:var(--ink-soft); line-height:1.4; }
.geo-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.geo-link{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--cream); transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.geo-link:hover{ transform:translateY(-2px); border-color:transparent; background:var(--paper); box-shadow:var(--sh-sm); }
.geo-pin{ width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-600); }
.geo-pin svg{ width:18px; height:18px; }
.geo-name{ flex:1; min-width:0; font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.3; color:var(--ink); }
.geo-arr{ flex:none; color:var(--ink-faint); font-size:15px; transition:transform .2s ease, color .2s ease; }
.geo-link:hover .geo-arr{ color:var(--accent); transform:translate(2px,-2px); }
.geo-foot{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.geo-foot p{ font-size:15px; color:var(--ink-soft); max-width:62ch; }
@media (max-width:560px){ .geo-grid{ grid-template-columns:1fr 1fr; } .geo-head,.geo-foot{ flex-direction:column; align-items:flex-start; } }
@media (max-width:400px){ .geo-grid{ grid-template-columns:1fr; } }
/* Compact tile variant — used for dense link lists (e.g. the footer directory). */
.geo-grid--sm{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; }
.geo-grid--sm .geo-link{ padding:9px 11px; gap:9px; }
.geo-grid--sm .geo-pin{ width:28px; height:28px; border-radius:8px; }
.geo-grid--sm .geo-pin svg{ width:15px; height:15px; }
.geo-grid--sm .geo-name{ font-size:14px; }
/* Footer directory: same tiles, tuned for the dark footer. */
.pf-locations-footer .geo-grid{ margin-bottom:22px; }
.pf-locations-footer .geo-link{ background:rgba(255,255,255,.03); border-color:var(--line-dark); }
.pf-locations-footer .geo-link:hover{ background:rgba(255,255,255,.07); border-color:var(--accent); }
.pf-locations-footer .geo-pin{ background:rgba(255,255,255,.06); color:var(--on-dark); }
.pf-locations-footer .geo-name{ color:var(--on-dark); }
.pf-locations-footer .geo-arr{ color:var(--on-dark-soft); }
.pf-locations-footer .geo-link:hover .geo-arr{ color:var(--accent); }

/* GBP post variations */
.gbp-post{ margin-top:16px; }
.gbp-post textarea{ width:100%; font-family:var(--font-body); font-size:15px; color:var(--ink); background:var(--cream); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; resize:vertical; line-height:1.5; }
.gbp-post .btn{ margin-top:10px; padding:9px 18px; font-size:14px; }

/* =====================================================================
 * Claude SEO Skills — directory + single skill pages (inc/skills-pages.php)
 * ================================================================== */

/* Tag rows + capability pills */
.tagrow{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.skilltag{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-pill); font-family:var(--font-display); font-size:13px; font-weight:600; line-height:1; background:var(--cream-2); border:1px solid var(--line); color:var(--ink-soft); }
.skilltag svg{ width:14px; height:14px; color:var(--accent); }
.page-hero .skilltag{ background:var(--espresso-2); border-color:var(--line-dark); color:var(--on-dark-soft); }

/* Slug chip (monospace) */
.skill-slug{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; color:var(--ink); background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px 9px; }

/* Command box (self-contained dark terminal — reads on light or dark sections) */
.cmd{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--espresso-2); border:1px solid var(--espresso-3); border-radius:var(--r); padding:13px 16px; margin-top:22px; }
.cmd + .cmd{ margin-top:12px; }
.cmd code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:14px; color:var(--on-dark); overflow-x:auto; white-space:nowrap; }
.cmd .tok{ color:var(--accent); }
.cmd .copy{ flex-shrink:0; display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--line-dark); color:var(--on-dark-soft); border-radius:var(--r-sm); padding:7px 12px; font-family:var(--font-display); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:color .15s,border-color .15s; }
.cmd .copy svg{ width:15px; height:15px; }
.cmd .copy:hover{ color:var(--accent); border-color:var(--accent); }

/* Example chat-preview card */
.example-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh); overflow:hidden; }
.example-head{ display:flex; align-items:center; gap:7px; padding:12px 16px; background:var(--cream); border-bottom:1px solid var(--line); }
.example-head .dotty{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.example-head .ttl{ margin-left:8px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; color:var(--ink-soft); }
.example-body{ padding:18px; }
.example-body .role{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--ink-faint); margin:14px 0 4px; }
.example-body .role:first-child{ margin-top:0; }
.example-body .msg{ background:var(--cream); border-radius:var(--r-sm); padding:10px 13px; font-size:14.5px; line-height:1.5; color:var(--ink); }
.example-body .msg.bot{ background:var(--accent-soft); }

/* Skill-details sidebar card */
.skill-meta{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:24px; }
.skill-meta h4{ font-family:var(--font-display); font-size:16px; color:var(--ink); margin-bottom:8px; }
.meta-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; }
.meta-row:last-of-type{ border-bottom:0; }
.meta-row span{ color:var(--ink-soft); }
.meta-row b{ color:var(--ink); font-weight:600; text-align:right; }
.meta-row b svg{ width:14px; height:14px; color:var(--accent); vertical-align:-2px; }

/* Lightweight numbered steps */
.steps-lite{ display:grid; gap:22px; }
.step-lite{ display:flex; gap:16px; align-items:flex-start; }
.step-lite .sn{ flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--accent-soft); color:var(--accent-600); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:16px; }
.step-lite h4{ font-family:var(--font-display); font-size:17px; color:var(--ink); margin-bottom:4px; }
.step-lite p{ color:var(--ink-soft); font-size:15px; line-height:1.6; }

/* "Pro tip" bullet list */
.inside{ list-style:none; display:grid; gap:14px; }
.inside li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-soft); line-height:1.55; }
.inside .dot{ flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:7px; }

/* =========================================================
   MOBILE / RESPONSIVE HARDENING  (2026-06-24)
   Small-screen tuning on top of the existing breakpoints. The
   root overflow-x:clip (see reset) already removes horizontal
   scrolling; these rules make phone layouts friendlier.
   ========================================================= */

/* Phones (≤600px) */
@media (max-width:600px){
  /* The header "Get free proposal" CTA doesn't fit next to the burger on
     phones (it was being cropped). Hide it here — it's still available inside
     the opened menu and in every page's CTA — leaving a clean logo + burger. */
  .nav-actions .btn--accent{ display:none; }

  /* Let the highlighted hero phrase wrap instead of overflowing/clipping. */
  .hero h1 .hl{ white-space:normal; }

  /* Full-width, easy-to-tap CTAs in hero / page CTA blocks. */
  .hero-cta{ gap:12px; }
  .hero-cta .btn{ width:100%; }

  /* Slightly tighter large buttons + top bar on narrow screens. */
  .btn--lg{ padding:16px 24px; font-size:16px; }
  .topbar .wrap{ gap:10px; }
  .topbar-right{ gap:14px; }

  /* Keep the CTA two-column band readable when stacked. */
  .cta-points{ margin-top:6px; }

  /* Long emails / URLs (e.g. contact info) wrap instead of overflowing. */
  .info-item span,
  .contact-card,
  .entry-content{ overflow-wrap:anywhere; word-break:break-word; }
}

/* Very small phones (≤380px) */
@media (max-width:380px){
  .stat-strip{ grid-template-columns:1fr; }
  .brand{ font-size:18px; }
  .brand .mark{ width:30px; height:30px; }
}

/* =========================================================
   Lead-capture modal — skill download (single skill pages) +
   the site-wide "free proposal" modal opened from every CTA.
   ========================================================= */
.skill-modal,.lead-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; }
.skill-modal[hidden],.lead-modal[hidden]{ display:none; }
.skill-modal__overlay,.lead-modal__overlay{ position:absolute; inset:0; background:rgba(20,16,26,.55); animation:pf-fade .2s ease; }
.skill-modal__box,.lead-modal__box{ position:relative; width:100%; max-width:460px; max-height:calc(100vh - 48px); overflow-y:auto; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:0 24px 60px rgba(20,16,26,.28); padding:clamp(26px,4vw,40px); animation:pf-pop .22s cubic-bezier(.2,.8,.3,1); }
.skill-modal__x,.lead-modal__x{ position:absolute; top:14px; right:16px; width:34px; height:34px; display:grid; place-items:center; font-size:26px; line-height:1; color:var(--ink-faint); background:transparent; border:0; border-radius:50%; cursor:pointer; transition:background .15s,color .15s; }
.skill-modal__x:hover,.lead-modal__x:hover{ background:var(--cream); color:var(--ink); }
.skill-modal .field:last-of-type,.lead-modal .field:last-of-type{ margin-bottom:22px; }
.skill-modal__err,.lead-modal__err{ color:#C0392B; font-size:14px; margin-top:12px; }
.skill-modal__check,.lead-modal__check{ width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:var(--accent-ring); color:var(--accent); }
.skill-modal__check svg,.lead-modal__check svg{ width:30px; height:30px; }
/* Honeypot — moved off-screen rather than display:none so bots still fill it. */
.pf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* JS-masked contact links: hrefless <a> that open the lead modal — keep the
   pointer cursor a real link would have. */
.pf-masked{ cursor:pointer; }
@keyframes pf-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pf-pop{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .skill-modal__overlay,.skill-modal__box,.lead-modal__overlay,.lead-modal__box{ animation:none; } }

/* ---------- Country directory (homepage "global coverage") ---------- */
.cdir-count{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--paper); font:600 13px/1 var(--font-body); color:var(--ink-soft); white-space:nowrap; }
.cdir-controls{ display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; justify-content:space-between; margin:28px 0 24px; }
.cdir-search{ position:relative; flex:1 1 260px; max-width:360px; }
.cdir-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-faint); pointer-events:none; }
.cdir-search input{ width:100%; padding:12px 16px 12px 42px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--paper); font:400 15px/1 var(--font-body); color:var(--ink); }
.cdir-search input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring); }
.cdir-filters{ display:flex; flex-wrap:wrap; gap:8px; }
.cdir-filter{ padding:9px 16px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--paper); font:600 13px/1 var(--font-body); color:var(--ink-soft); cursor:pointer; transition:border-color .15s, color .15s, background .15s; }
.cdir-filter:hover{ border-color:var(--accent); color:var(--ink); }
.cdir-filter.active{ background:var(--espresso); border-color:var(--espresso); color:var(--on-dark); }
.cdir-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.cdir-card{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); text-decoration:none; color:var(--ink); box-shadow:var(--sh-sm); transition:transform .15s, box-shadow .15s, border-color .15s; }
.cdir-card:hover{ transform:translateY(-2px); box-shadow:var(--sh); border-color:var(--accent); }
.cdir-card.is-hidden{ display:none; }
.cdir-flag{ flex:none; width:34px; height:24px; border-radius:4px; display:flex; align-items:center; justify-content:center; font:700 9px/1 var(--font-body); color:#fff; letter-spacing:.5px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); text-shadow:0 1px 2px rgba(0,0,0,.5); }
.cdir-name{ flex:1 1 auto; font:600 14px/1.3 var(--font-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cdir-arr{ flex:none; color:var(--ink-faint); font-size:14px; transition:color .15s, transform .15s; }
.cdir-card:hover .cdir-arr{ color:var(--accent); transform:translate(2px,-2px); }
.cdir-empty{ display:none; text-align:center; padding:40px 0; color:var(--ink-soft); font:400 15px/1.5 var(--font-body); }
@media (max-width:600px){ .cdir-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); } .cdir-search{ max-width:none; } }