/*
Theme Name:     MetropolitanHost
Theme URI:      https://metropolitanhost.com
Description:    MetropolitanHost premium child theme
Author:         MetropolitanHost
Author URI:     https://metropolitanhost.com
Template:       kallyas
Version:        1.0
Tags:           custom-background, custom-colors, custom-header, custom-menu, full-width-template, theme-options
Text Domain:    metropolitanhost
*/

/* ================================================================
   METROPOLITANHOST — CONSOLIDATED STYLESHEET
   Centralises all custom CSS: homepage, wordpress-services,
   premium-themes template, and domain search widget.
   Remove page-level inline CSS after verifying this loads.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700;1,800;1,900&family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #f5f5f0; font-family: "Poppins", sans-serif; color: #0a0f1e; overflow-x: hidden; font-size: 22px; }
a { text-decoration: none; color: inherit; }

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  --ink:    #0a0f1e;
  --ink2:   #111827;
  --bg:     #f5f5f0;
  --bg2:    #eeeee8;
  --white:  #ffffff;
  --green:  #39d98a;
  --green2: #2ac97a;
  --muted:  #6b7280;
  --border: #e0e0d8;
}

/* ── Utilities ─────────────────────────────────────────────────── */
.c { max-width: 1240px; margin: 0 auto; }
.ey { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
.h2 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 800; line-height: 1.07; letter-spacing: -1.5px; margin-bottom: 18px; }
.h2 em { font-style: italic; font-family: "Playfair Display", serif; color: var(--green); }
.h2--wh { color: #fff; }
.h2--wh em { color: var(--green); }
.bc { font-size: 20px; color: var(--muted); line-height: 1.8; }
.bc--wh { color: rgba(255,255,255,0.5); }
.bar { width: 50px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--green), var(--ink)); margin: 18px 0 42px; }
.bar--c { margin-left: auto; margin-right: auto; }
.bar--wh { background: linear-gradient(90deg, var(--green), rgba(255,255,255,.15)); }
.btn { display: inline-block; padding: 18px 38px; border-radius: 7px; font-weight: 700; font-size: 19px; font-family: "Poppins", sans-serif; transition: all .3s; cursor: pointer; line-height: 1; }
.btn-green { background: var(--green); color: var(--ink); }
.btn-green:hover { background: var(--green2); transform: translateY(-3px); box-shadow: 0 14px 38px rgba(57,217,138,.45); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #1a2a4a; transform: translateY(-3px); box-shadow: 0 14px 38px rgba(10,15,30,.35); }
.btn-wh-ol { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.32); }
.btn-wh-ol:hover { border-color: var(--green); color: var(--green); transform: translateY(-3px); }
.btn-dk-ol { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-dk-ol:hover { background: var(--ink); color: #fff; transform: translateY(-3px); }
.btn--sm { padding: 14px 26px; font-size: 17px; border-radius: 6px; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.6);} }
.dot { width: 9px; height: 9px; background: var(--green); border-radius: 50%; animation: pulse 2s infinite; display: inline-block; flex-shrink:0; }

/* ================================================================
   DOMAIN SEARCH WIDGET
   ================================================================ */
.domain-search-wrapper { padding: 0 !important; }
.domain-search-wrapper .zn_section_size,
.domain-search-wrapper .row,
.domain-search-wrapper .znColumnElement,
.domain-search-wrapper .znColumnElement-innerWrapper,
.domain-search-wrapper .znColumnElement-innerContent { padding: 0 !important; margin: 0 !important; }
.domain-search-wrapper .widget.rstore-domain { width: 100%; }
.domain-search-wrapper .widget.rstore-domain .search-form { display: flex !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; background: #f3f4f6 !important; border-radius: 14px !important; padding: 6px !important; margin: 0 auto !important; }
.domain-search-wrapper .widget.rstore-domain .search-form label { flex: 1; margin: 0 !important; }
.domain-search-wrapper .widget.rstore-domain .search-field { width: 100% !important; border: none !important; background: transparent !important; padding: 20px 24px !important; font-size: 18px !important; min-height: 64px !important; outline: none !important; }
.domain-search-wrapper .widget.rstore-domain .search-submit { background: #0f766e !important; color: #ffffff !important; border: none !important; padding: 0 32px !important; min-height: 64px !important; border-radius: 12px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s ease !important; }
.domain-search-wrapper .widget.rstore-domain .search-submit:hover { background: #115e59 !important; }

/* ================================================================
   HERO — shared base (WP Services layout default)
   ================================================================ */
.hero { background: var(--ink); padding: 100px 40px 90px; position: relative; overflow: hidden; }
.hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(57,217,138,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(57,217,138,.04) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; }
.hero__glow, .hero__glow-r { position: absolute; bottom: -120px; right: -160px; width: 900px; height: 900px; background: radial-gradient(circle, rgba(57,217,138,.07) 0%, transparent 65%); pointer-events: none; }
.hero__glow-l { position: absolute; top: -180px; left: -180px; width: 650px; height: 650px; background: radial-gradient(circle, rgba(57,217,138,.04) 0%, transparent 65%); pointer-events: none; }
.hero__inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 420px; gap: 70px; align-items: center; }
.hero__badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(57,217,138,.1); border: 1px solid rgba(57,217,138,.26); color: var(--green); font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: 10px 22px; border-radius: 5px; margin-bottom: 28px; }
.hero__h1 { font-size: clamp(42px, 5.8vw, 82px); font-weight: 800; color: #fff; line-height: 1.02; margin-bottom: 24px; letter-spacing: -2.5px; }
.hero__h1 em { font-style: italic; font-family: "Playfair Display", serif; color: var(--green); display: block; }
.hero__sub { font-size: 20px; color: rgba(255,255,255,.5); line-height: 1.76; max-width: 580px; margin-bottom: 40px; }
.hero__btns { display: flex; gap: 16px; flex-wrap: wrap; }
/* Hero card (WP Services right column) */
.hero__card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 38px 32px; }
.hero__card-title { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.hero__card-sub { font-size: 15px; color: rgba(255,255,255,.38); margin-bottom: 28px; line-height: 1.5; }
.hero__card-list { list-style: none; margin-bottom: 28px; }
.hero__card-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: rgba(255,255,255,.65); padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); line-height: 1.4; }
.hero__card-list li:last-child { border-bottom: none; }
.hero__card-list li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.hero__card-cta { display: block; width: 100%; padding: 18px 24px; background: var(--green); color: var(--ink); font-size: 18px; font-weight: 700; border-radius: 9px; text-align: center; font-family: "Poppins", sans-serif; transition: all .3s; }
.hero__card-cta:hover { background: var(--green2); transform: translateY(-2px); box-shadow: 0 12px 34px rgba(57,217,138,.4); }
.hero__card-note { font-size: 14px; color: rgba(255,255,255,.28); text-align: center; margin-top: 14px; line-height: 1.5; }
/* Hero stat strip (Homepage) */
.hero__stats { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.07); }
.hero__stat { padding: 40px 28px; border-right: 1px solid rgba(255,255,255,.07); transition: background .3s; }
.hero__stat:last-child { border-right: none; }
.hero__stat:hover { background: rgba(57,217,138,.03); }
.hero__stat-num { font-size: 50px; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -1.5px; }
.hero__stat-num em { font-style: normal; color: var(--green); }
.hero__stat-lbl { font-size: 16px; color: rgba(255,255,255,.38); margin-top: 8px; }
/* Homepage hero overrides */
body.home .hero { padding: 110px 40px 0; }
body.home .hero__inner { display: block; }
body.home .hero__h1 { font-size: clamp(46px, 6.5vw, 90px); }
body.home .hero__sub { max-width: 600px; margin-bottom: 44px; }
body.home .hero__badge { margin-bottom: 30px; }
body.home .hero__btns { margin-bottom: 72px; }

/* ================================================================
   TRUST BAR — shared
   ================================================================ */
.trust { background: #fff; border-bottom: 1px solid var(--border); }
.trust__inner { display: flex; align-items: stretch; }
.trust__item { flex: 1; padding: 22px 14px; text-align: center; font-size: 16px; font-weight: 600; color: var(--muted); border-right: 1px solid var(--border); transition: background .2s, color .2s; line-height: 1.35; }
.trust__item:last-child { border-right: none; }
.trust__item:hover { background: #fafaf6; color: var(--ink); }
.trust__item strong { display: block; font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }

/* ================================================================
   TF BUYERS — Homepage
   ================================================================ */
.tf { background: var(--ink2); padding: 100px 40px; position: relative; overflow: hidden; }
.tf__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(57,217,138,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(57,217,138,.035) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.tf__glow { position: absolute; top: -200px; right: -200px; width: 800px; height: 800px; background: radial-gradient(circle, rgba(57,217,138,.08) 0%, transparent 65%); pointer-events: none; }
.tf__ghost { position: absolute; bottom: -24px; right: -10px; font-size: 240px; font-weight: 900; line-height: 1; color: rgba(255,255,255,.025); font-family: "Playfair Display", serif; pointer-events: none; user-select: none; letter-spacing: -8px; white-space: nowrap; }
.tf__inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.tf__tag { display: inline-flex; align-items: center; gap: 10px; background: rgba(57,217,138,.1); border: 1px solid rgba(57,217,138,.26); color: var(--green); font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: 10px 22px; border-radius: 5px; margin-bottom: 26px; }
.tf__sub { font-size: 20px; color: rgba(255,255,255,.5); line-height: 1.76; max-width: 500px; margin-bottom: 40px; }
.tf__btns { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.tf__reply { display: flex; align-items: center; gap: 14px; background: rgba(57,217,138,.07); border: 1px solid rgba(57,217,138,.2); border-radius: 8px; padding: 16px 22px; }
.tf__reply-txt { font-size: 16px; color: rgba(255,255,255,.55); line-height: 1.5; }
.tf__reply-txt strong { color: var(--green); font-weight: 700; }
.tf__feats { display: flex; flex-direction: column; gap: 1px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; overflow: hidden; }
.tf__feat { background: rgba(255,255,255,.03); padding: 26px 28px; display: flex; align-items: flex-start; gap: 20px; transition: background .25s; }
.tf__feat:hover { background: rgba(57,217,138,.06); }
.tf__feat-n { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: rgba(57,217,138,.12); border: 1px solid rgba(57,217,138,.25); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: var(--green); }
.tf__feat h4 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 5px; line-height: 1.2; }
.tf__feat p { font-size: 15px; color: rgba(255,255,255,.44); line-height: 1.6; }

/* ================================================================
   PROCESS — Homepage
   ================================================================ */
.process { background: var(--bg); }
.process__hd { text-align: center; padding: 90px 40px 0; max-width: 700px; margin: 0 auto; }
.process__grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--border); margin-top: 56px; }
.process__step { padding: 52px 36px; border-right: 1px solid var(--border); position: relative; transition: background .3s; }
.process__step:last-child { border-right: none; }
.process__step:hover { background: var(--bg2); }
.process__step:not(:last-child)::after { content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 16px solid var(--border); z-index: 2; }
.process__step:not(:last-child)::before { content: ''; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 15px solid var(--bg); z-index: 3; transition: border-left-color .3s; }
.process__step:hover::before { border-left-color: var(--bg2); }
.process__num { font-size: 68px; font-weight: 900; color: rgba(10,15,30,.06); font-family: "Playfair Display", serif; line-height: 1; margin-bottom: 18px; transition: color .3s; }
.process__step:hover .process__num { color: rgba(57,217,138,.18); }
.process__label { font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.process__title { font-size: 24px; font-weight: 800; color: var(--ink); margin-bottom: 12px; line-height: 1.2; }
.process__desc { font-size: 17px; color: var(--muted); line-height: 1.65; margin-bottom: 22px; }
.process__link { display: inline-block; font-size: 16px; font-weight: 700; color: var(--ink); border-bottom: 2.5px solid var(--green); padding-bottom: 2px; transition: color .2s; }
.process__link:hover { color: var(--green); }

/* ================================================================
   SERVICES GRID — Homepage
   ================================================================ */
.svcs { background: #fff; padding: 110px 40px; }
.svcs__hd { text-align: center; max-width: 780px; margin: 0 auto 80px; }
.cat { margin-bottom: 68px; }
.cat__head { display: flex; align-items: center; margin-bottom: 28px; }
.cat__meta { flex-shrink: 0; padding-right: 28px; }
.cat__num { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green); margin-bottom: 4px; }
.cat__title { font-size: 27px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.cat__rule { flex: 1; height: 1px; background: var(--border); margin: 0 28px; }
.cat__sub { font-size: 17px; color: var(--muted); padding-left: 28px; border-left: 3px solid var(--green); line-height: 1.5; max-width: 370px; flex-shrink: 0; }
.sg { display: grid; gap: 1px; background: #e2e2da; border: 1px solid #e2e2da; border-radius: 16px; overflow: hidden; }
.sg3 { grid-template-columns: repeat(3,1fr); }
.sg2 { grid-template-columns: repeat(2,1fr); }
.sg4 { grid-template-columns: repeat(4,1fr); }
.sc { background: #fff; padding: 30px 26px; display: flex; flex-direction: column; position: relative; transition: background .25s; }
.sc:hover { background: #fafaf6; }
.sc--dk { background: var(--ink); }
.sc--dk:hover { background: #0d1526; }
.sc__badge { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 4px 11px; border-radius: 4px; }
.sc__badge--g { background: var(--green); color: var(--ink); }
.sc__badge--r { background: #ef4444; color: #fff; }
.sc__badge--dk { background: var(--ink); color: #fff; }
.sc__title { font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 9px; line-height: 1.3; padding-right: 80px; }
.sc--dk .sc__title { color: #fff; }
.sc__desc { font-size: 16px; color: var(--muted); line-height: 1.65; flex: 1; margin-bottom: 20px; }
.sc--dk .sc__desc { color: rgba(255,255,255,.44); }
.sc__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid #f0f0ea; }
.sc--dk .sc__foot { border-top-color: rgba(255,255,255,.08); }
.sc__prices { display: flex; flex-direction: column; }
.sc__old { font-size: 15px; color: #bbb; text-decoration: line-through; line-height: 1; }
.sc--dk .sc__old { color: rgba(255,255,255,.25); }
.sc__price { font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.sc--dk .sc__price { color: var(--green); }
.sc__save { font-size: 13px; font-weight: 700; color: var(--green); margin-top: 2px; }
.sc__btn { display: inline-block; padding: 13px 22px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; border-radius: 7px; white-space: nowrap; font-family: "Poppins", sans-serif; transition: all .25s; flex-shrink: 0; }
.sc__btn:hover { background: #1a2a4a; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10,15,30,.25); }
.sc__btn--g { background: var(--green); color: var(--ink); }
.sc__btn--g:hover { background: var(--green2); box-shadow: 0 8px 22px rgba(57,217,138,.38); }

/* ================================================================
   PACKAGES / PRICING — Homepage
   ================================================================ */
.pkgs { background: var(--bg); padding: 110px 40px; }
.pkgs__hd { text-align: center; max-width: 800px; margin: 0 auto 32px; }
.pkgs__ghost { font-size: 130px; font-weight: 900; line-height: 1; color: rgba(10,15,30,.04); text-align: center; letter-spacing: -5px; font-family: "Playfair Display", serif; margin-bottom: -50px; position: relative; z-index: 0; pointer-events: none; user-select: none; }
.pkgs__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; max-width: 1100px; margin: 0 auto; background: #d6d6ce; border: 2.5px solid #d6d6ce; border-radius: 22px; overflow: hidden; box-shadow: 0 36px 90px rgba(10,15,30,.14); }
.pc { background: #fff; padding: 52px 38px; display: flex; flex-direction: column; position: relative; transition: background .25s; }
.pc:hover { background: #fafaf8; }
.pc--mid { background: var(--ink); }
.pc--mid:hover { background: #0d1526; }
.pc__pill { display: inline-block; padding: 6px 18px; border-radius: 30px; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 22px; }
.pc__pill--a { background: #f0f0ea; color: #666; }
.pc__pill--b { background: var(--green); color: var(--ink); }
.pc__pill--c { background: var(--ink); color: #fff; }
.pc__name { font-size: 34px; font-weight: 800; margin-bottom: 10px; letter-spacing: -.5px; }
.pc:not(.pc--mid) .pc__name { color: var(--ink); }
.pc--mid .pc__name { color: #fff; }
.pc__tag { font-size: 17px; line-height: 1.6; margin-bottom: 30px; }
.pc:not(.pc--mid) .pc__tag { color: var(--muted); }
.pc--mid .pc__tag { color: rgba(255,255,255,.44); }
.pc__old { font-size: 17px; text-decoration: line-through; margin-bottom: 4px; }
.pc:not(.pc--mid) .pc__old { color: #bbb; }
.pc--mid .pc__old { color: rgba(255,255,255,.25); }
.pc__amt { font-size: 68px; font-weight: 900; line-height: 1; margin-bottom: 6px; letter-spacing: -2px; }
.pc__amt sup { font-size: 30px; font-weight: 700; vertical-align: super; letter-spacing: 0; }
.pc:not(.pc--mid) .pc__amt { color: var(--ink); }
.pc--mid .pc__amt { color: #fff; }
.pc:not(.pc--mid) .pc__amt sup { color: var(--green); }
.pc--mid .pc__amt sup { color: var(--green); }
.pc__save { font-size: 16px; font-weight: 700; color: var(--green); margin-bottom: 30px; }
.pc__hr { height: 1px; margin-bottom: 24px; }
.pc:not(.pc--mid) .pc__hr { background: #eeeee8; }
.pc--mid .pc__hr { background: rgba(255,255,255,.08); }
.pc__incl { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; }
.pc:not(.pc--mid) .pc__incl { color: #aaa; }
.pc--mid .pc__incl { color: rgba(255,255,255,.3); }
.pc__feats { list-style: none; flex: 1; margin-bottom: 34px; }
.pc__feats li { font-size: 17px; padding: 11px 0; display: flex; align-items: flex-start; gap: 12px; line-height: 1.45; }
.pc__feats li + li { border-top: 1px solid transparent; }
.pc:not(.pc--mid) .pc__feats li + li { border-top-color: #f5f5f0; }
.pc--mid .pc__feats li + li { border-top-color: rgba(255,255,255,.05); }
.pc:not(.pc--mid) .pc__feats li { color: #333; }
.pc--mid .pc__feats li { color: rgba(255,255,255,.75); }
.pc__feats li::before { content: "—"; color: var(--green); font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.pc__cta { display: block; width: 100%; padding: 20px 24px; border-radius: 9px; text-align: center; font-weight: 700; font-size: 19px; font-family: "Poppins", sans-serif; transition: all .3s; cursor: pointer; }
.pc__cta--dk { background: var(--ink); color: #fff; }
.pc__cta--dk:hover { background: #1a2a4a; transform: translateY(-2px); box-shadow: 0 12px 34px rgba(10,15,30,.3); }
.pc__cta--g { background: var(--green); color: var(--ink); }
.pc__cta--g:hover { background: var(--green2); transform: translateY(-2px); box-shadow: 0 12px 34px rgba(57,217,138,.4); }
.pc__cta--wh { background: #fff; color: var(--ink); }
.pc__cta--wh:hover { background: #f0f0ea; transform: translateY(-2px); }

/* ================================================================
   WHY — Homepage
   ================================================================ */
.why { background: #fff; padding: 110px 40px; }
.why__hd { text-align: center; max-width: 700px; margin: 0 auto 68px; }
.why__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #e6e6de; border: 1px solid #e6e6de; border-radius: 18px; overflow: hidden; }
.why__item { background: #fff; padding: 48px 38px; position: relative; overflow: hidden; transition: background .25s; }
.why__item:hover { background: #fafaf6; }
.why__item--dk { background: var(--ink); }
.why__item--dk:hover { background: #0d1526; }
.why__bg { position: absolute; bottom: -18px; right: 8px; font-size: 130px; font-weight: 900; line-height: 1; color: rgba(57,217,138,.05); font-family: "Playfair Display", serif; pointer-events: none; user-select: none; }
.why__item--dk .why__bg { color: rgba(255,255,255,.03); }
.why__kicker { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green); margin-bottom: 16px; }
.why__title { font-size: 26px; font-weight: 800; margin-bottom: 14px; line-height: 1.2; }
.why__item:not(.why__item--dk) .why__title { color: var(--ink); }
.why__item--dk .why__title { color: #fff; }
.why__body { font-size: 17px; line-height: 1.75; }
.why__item:not(.why__item--dk) .why__body { color: var(--muted); }
.why__item--dk .why__body { color: rgba(255,255,255,.44); }

/* ================================================================
   SVC-LIST (Services Accordion) — WordPress Services page
   ================================================================ */
.svc-list { background: var(--bg); padding: 110px 40px; }
.svc-list__hd { text-align: center; max-width: 720px; margin: 0 auto 72px; }
.svc-accordion { max-width: 1240px; margin: 0 auto; }
.svc-row { border-top: 1px solid var(--border); position: relative; }
.svc-row:last-child { border-bottom: 1px solid var(--border); }
.svc-row__head { display: grid; grid-template-columns: 60px 1fr auto auto; align-items: center; gap: 28px; padding: 32px 0; cursor: pointer; transition: background .2s; }
.svc-row__head:hover .svc-row__title { color: var(--green); }
.svc-row__num { font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--green); }
.svc-row__title { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.5px; transition: color .2s; line-height: 1.2; }
.svc-row__tag { font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 20px; white-space: nowrap; }
.svc-row__tag--g { background: var(--green); color: var(--ink); }
.svc-row__tag--dk { background: var(--ink); color: #fff; }
.svc-row__tag--bd { background: transparent; border: 1.5px solid var(--border); color: var(--muted); }
.svc-row__price { font-size: 28px; font-weight: 900; color: var(--ink); letter-spacing: -1px; text-align: right; white-space: nowrap; }
.svc-row__price span { font-size: 15px; font-weight: 500; color: var(--muted); }
.svc-row__body { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 0 0 48px 88px; border-top: 1px solid var(--border); }
.svc-row__desc { font-size: 18px; color: var(--muted); line-height: 1.78; }
.svc-row__desc strong { color: var(--ink); font-weight: 600; }
.svc-row__incl-label { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green); margin-bottom: 16px; }
.svc-row__incl-list { list-style: none; }
.svc-row__incl-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: #444; padding: 9px 0; border-bottom: 1px solid #f0f0ea; line-height: 1.4; }
.svc-row__incl-list li:last-child { border-bottom: none; }
.svc-row__incl-list li::before { content: "—"; color: var(--green); font-weight: 700; flex-shrink: 0; }
.svc-row__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 14px 26px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; border-radius: 7px; font-family: "Poppins", sans-serif; transition: all .25s; }
.svc-row__cta:hover { background: #1a2a4a; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10,15,30,.25); }
.svc-row__cta--g { background: var(--green); color: var(--ink); }
.svc-row__cta--g:hover { background: var(--green2); box-shadow: 0 8px 22px rgba(57,217,138,.38); }

/* ================================================================
   NYC ADVANTAGE — WordPress Services page
   ================================================================ */
.nyc { background: var(--ink2); padding: 110px 40px; position: relative; overflow: hidden; }
.nyc__grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(57,217,138,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(57,217,138,.035) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.nyc__glow { position: absolute; top: -200px; left: -200px; width: 800px; height: 800px; background: radial-gradient(circle, rgba(57,217,138,.07) 0%, transparent 65%); pointer-events: none; }
.nyc__ghost { position: absolute; bottom: -30px; right: -20px; font-size: 260px; font-weight: 900; line-height: 1; color: rgba(255,255,255,.02); font-family: "Playfair Display", serif; pointer-events: none; user-select: none; white-space: nowrap; letter-spacing: -10px; }
.nyc__inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
.nyc__tag { display: inline-flex; align-items: center; gap: 10px; background: rgba(57,217,138,.1); border: 1px solid rgba(57,217,138,.26); color: var(--green); font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: 10px 22px; border-radius: 5px; margin-bottom: 26px; }
.nyc__body { font-size: 19px; color: rgba(255,255,255,.5); line-height: 1.82; margin-bottom: 22px; }
.nyc__body strong { color: rgba(255,255,255,.85); font-weight: 600; }
.nyc__btns { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 36px; }
.nyc__hoods { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; overflow: hidden; }
.nyc__hoods-label { padding: 20px 24px; font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--green); border-bottom: 1px solid rgba(255,255,255,.06); }
.nyc__hoods-grid { display: grid; grid-template-columns: 1fr 1fr; }
.nyc__hood { padding: 18px 24px; font-size: 16px; font-weight: 600; color: rgba(255,255,255,.6); border-right: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); transition: background .2s, color .2s; display: flex; align-items: center; gap: 10px; }
.nyc__hood:hover { background: rgba(57,217,138,.06); color: #fff; }
.nyc__hood:nth-child(even) { border-right: none; }
.nyc__hood::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; opacity: .5; }
.nyc__hood:hover::before { opacity: 1; }
.nyc__stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.06); }
.nyc__stat { padding: 22px 24px; text-align: center; border-right: 1px solid rgba(255,255,255,.06); }
.nyc__stat:last-child { border-right: none; }
.nyc__stat-num { font-size: 32px; font-weight: 900; color: var(--green); letter-spacing: -1px; line-height: 1; }
.nyc__stat-lbl { font-size: 13px; color: rgba(255,255,255,.3); margin-top: 4px; }

/* ================================================================
   COMPARE TABLE — WordPress Services page
   ================================================================ */
.compare { background: #fff; padding: 110px 40px; }
.compare__hd { text-align: center; max-width: 700px; margin: 0 auto 68px; }
.compare__table { max-width: 980px; margin: 0 auto; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.compare__head { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--ink); }
.compare__head-cell { padding: 26px 32px; font-size: 17px; font-weight: 800; color: rgba(255,255,255,.35); border-right: 1px solid rgba(255,255,255,.07); }
.compare__head-cell:last-child { border-right: none; }
.compare__head-cell--us { color: #fff; }
.compare__head-cell--us span { display: inline-block; background: var(--green); color: var(--ink); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 4px; margin-left: 10px; letter-spacing: .5px; }
.compare__row { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--border); transition: background .2s; }
.compare__row:hover { background: #fafaf6; }
.compare__cell { padding: 22px 32px; font-size: 17px; color: var(--muted); border-right: 1px solid var(--border); display: flex; align-items: center; gap: 10px; line-height: 1.4; }
.compare__cell:last-child { border-right: none; }
.compare__cell--feature { font-weight: 600; color: var(--ink); }
.compare__cell--us { color: var(--ink); font-weight: 600; }
.compare__cell--yes::before { content: '✓'; color: var(--green); font-weight: 800; font-size: 18px; flex-shrink: 0; }
.compare__cell--no::before { content: '✕'; color: #f87171; font-weight: 800; font-size: 18px; flex-shrink: 0; }
.compare__cell--partial::before { content: '~'; color: #f59e0b; font-weight: 800; font-size: 18px; flex-shrink: 0; }

/* ================================================================
   INDUSTRIES — WordPress Services page
   ================================================================ */
.industries { background: var(--bg); padding: 110px 40px; }
.industries__hd { text-align: center; max-width: 640px; margin: 0 auto 68px; }
.industries__grid, .industries__grid2 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: #d8d8d0; border: 1px solid #d8d8d0; border-radius: 18px; overflow: hidden; max-width: 1240px; margin: 0 auto 28px; }
.ind__card { background: var(--bg); padding: 38px 30px; position: relative; overflow: hidden; transition: background .25s; }
.ind__card:hover { background: #eeeee4; }
.ind__card--dk { background: var(--ink); }
.ind__card--dk:hover { background: #0d1526; }
.ind__icon { font-size: 34px; margin-bottom: 18px; line-height: 1; display: block; }
.ind__name { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 10px; line-height: 1.2; }
.ind__card--dk .ind__name { color: #fff; }
.ind__desc { font-size: 15px; color: var(--muted); line-height: 1.65; }
.ind__card--dk .ind__desc { color: rgba(255,255,255,.4); }
.ind__tag { display: inline-block; margin-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); border-bottom: 2px solid var(--green); padding-bottom: 2px; }

/* ================================================================
   FAQ — WordPress Services page
   ================================================================ */
.faq { background: var(--ink2); padding: 110px 40px; position: relative; overflow: hidden; }
.faq__grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(57,217,138,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(57,217,138,.03) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.faq__glow { position: absolute; bottom: -200px; right: -200px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(57,217,138,.07) 0%, transparent 65%); pointer-events: none; }
.faq__inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 380px 1fr; gap: 90px; align-items: start; }
.faq__left { position: sticky; top: 40px; }
.faq__tag { display: inline-flex; align-items: center; gap: 10px; background: rgba(57,217,138,.1); border: 1px solid rgba(57,217,138,.26); color: var(--green); font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: 10px 22px; border-radius: 5px; margin-bottom: 26px; }
.faq__left-sub { font-size: 18px; color: rgba(255,255,255,.4); line-height: 1.76; margin-bottom: 36px; }
.faq__left-cta { display: inline-block; padding: 16px 28px; background: var(--green); color: var(--ink); font-size: 17px; font-weight: 700; border-radius: 8px; font-family: "Poppins", sans-serif; transition: all .3s; }
.faq__left-cta:hover { background: var(--green2); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(57,217,138,.4); }
.faq__items { display: flex; flex-direction: column; gap: 1px; }
.faq__item { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; overflow: hidden; }
.faq__q { padding: 26px 28px; font-size: 19px; font-weight: 700; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 20px; line-height: 1.3; }
.faq__q-num { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--green); flex-shrink: 0; width: 32px; }
.faq__q-arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--green); font-size: 18px; font-weight: 700; }
.faq__a { padding: 20px 28px 26px; font-size: 17px; color: rgba(255,255,255,.44); line-height: 1.78; border-top: 1px solid rgba(255,255,255,.05); }

/* ================================================================
   TESTIMONIALS — shared
   ================================================================ */
.testi { background: var(--bg); padding: 110px 40px; }
.testi__hd { text-align: center; max-width: 640px; margin: 0 auto 68px; }
.testi__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.testi__card { background: #fff; border: 1px solid #e6e6de; border-radius: 16px; padding: 38px 30px; position: relative; overflow: hidden; transition: all .3s; }
.testi__card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(10,15,30,.1); border-color: #c6c6be; }
.testi__card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 70px; background: linear-gradient(180deg, var(--green), transparent); }
.testi__q { font-size: 64px; line-height: 1; color: #e6e6de; font-family: "Playfair Display", serif; margin-bottom: 6px; margin-left: -4px; }
.testi__stars { color: #f59e0b; font-size: 18px; letter-spacing: 2px; margin-bottom: 18px; }
.testi__card p { font-size: 18px; color: #444; line-height: 1.72; font-style: italic; margin-bottom: 28px; }
.testi__author { display: flex; align-items: center; gap: 16px; }
.testi__av { width: 50px; height: 50px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: var(--green); flex-shrink: 0; }
.testi__name { font-size: 17px; font-weight: 700; color: var(--ink); }
.testi__role { font-size: 15px; color: var(--muted); }

/* ================================================================
   FINAL CTA — shared
   ================================================================ */
.cta { background: var(--ink); padding: 130px 40px; text-align: center; position: relative; overflow: hidden; }
.cta::before { content: ''; position: absolute; top: -300px; left: 50%; transform: translateX(-50%); width: 1400px; height: 900px; background: radial-gradient(ellipse, rgba(57,217,138,.08) 0%, transparent 65%); pointer-events: none; }
.cta__word { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font-size: 200px; font-weight: 900; white-space: nowrap; color: rgba(255,255,255,.025); font-family: "Playfair Display", serif; pointer-events: none; user-select: none; letter-spacing: -6px; }
.cta__inner { max-width: 780px; margin: 0 auto; position: relative; z-index: 1; }
.cta__ey { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--green); margin-bottom: 22px; }
.cta__h2 { font-size: clamp(36px, 5.5vw, 68px); font-weight: 800; color: #fff; line-height: 1.05; margin-bottom: 22px; letter-spacing: -2px; }
.cta__h2 em { font-style: italic; font-family: "Playfair Display", serif; color: var(--green); }
.cta__sub { font-size: 21px; color: rgba(255,255,255,.44); line-height: 1.76; margin-bottom: 48px; }
.cta__btns { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
.cta__badge { display: inline-flex; align-items: center; gap: 14px; background: rgba(57,217,138,.07); border: 1px solid rgba(57,217,138,.22); border-radius: 40px; padding: 14px 30px; font-size: 17px; color: rgba(255,255,255,.5); }
.cta__badge strong { color: var(--green); font-weight: 700; }

/* ================================================================
   PREMIUM THEMES TEMPLATE (.tfl-* classes)
   Full-width product listing — restyled to site design tokens
   ================================================================ */

/* Full-width override */
body.page-template-template-tf-landing-php #page_wrapper,
body.page-template-template-tf-landing-php .zn_pb_wrapper,
body.page-template-template-tf-landing-php #main_content { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }

.tfl-wrap { width: 100%; padding: 0 3%; box-sizing: border-box; }

/* TFL Hero */
.tfl-hero { background: var(--ink); color: #fff; padding: 56px 0 48px; text-align: center; position: relative; overflow: hidden; }
.tfl-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(57,217,138,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(57,217,138,.04) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; }
.tfl-hero::after { content: ''; position: absolute; top: -150px; right: -150px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(57,217,138,.07) 0%, transparent 65%); pointer-events: none; }
.tfl-hero__icon { font-size: 2.5rem; display: block; margin-bottom: 12px; position: relative; z-index: 1; }
.tfl-hero__title { font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 800; margin: 0 0 14px; position: relative; z-index: 1; letter-spacing: -1px; }
.tfl-hero__desc { max-width: 620px; margin: 0 auto 24px; color: rgba(255,255,255,.5); font-size: 1.05rem; line-height: 1.6; position: relative; z-index: 1; }
.tfl-hero__stats { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.tfl-hero__stat { font-size: .9rem; color: rgba(255,255,255,.5); }
.tfl-hero__stat strong { display: block; font-size: 1.4rem; font-weight: 700; color: #fff; }

/* Format tabs */
.tfl-format-bar { background: var(--ink2); border-bottom: 1px solid rgba(255,255,255,.07); position: sticky; top: 0; z-index: 100; }
.tfl-format-tabs { display: flex; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.tfl-format-tabs::-webkit-scrollbar { display: none; }
.tfl-format-tabs__link { display: inline-block; padding: 14px 20px; color: rgba(255,255,255,.5); font-size: .875rem; font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; transition: color .2s, border-color .2s; }
.tfl-format-tabs__link:hover { color: #fff; }
.tfl-format-tabs__link--active { color: #fff; border-bottom-color: var(--green); }

/* Dark page background for landing & single product pages */
body.page-template-page-templates-template-tf-landing,
body.page-template-template-tf-landing-php,
body.single-tf_product { background: #0d1117; color: #fff; }

/* Body layout */
.tfl-body { display: flex; gap: 0; align-items: flex-start; padding: 40px 0 80px; }

/* Sidebar */
.tfl-sidebar { width: 230px; flex-shrink: 0; padding-right: 28px; position: sticky; top: 52px; max-height: calc(100vh - 60px); overflow-y: auto; scrollbar-width: thin; }
.tfl-sidebar::-webkit-scrollbar { width: 4px; }
.tfl-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.tfl-filter-section { margin-bottom: 28px; }
.tfl-filter-heading { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.tfl-sidebar__nav { display: flex; flex-direction: column; gap: 1px; }
.tfl-sidebar__link { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 6px; color: rgba(255,255,255,.6); font-size: .85rem; text-decoration: none; transition: background .15s, color .15s; cursor: pointer; }
.tfl-sidebar__link:hover { background: rgba(255,255,255,.06); color: #fff; }
.tfl-sidebar__link--active { background: rgba(57,217,138,.15); color: #fff; font-weight: 600; }
.tfl-sidebar__link--active:hover { background: rgba(57,217,138,.22); color: #fff; }
.tfl-sidebar__count { font-size: .72rem; opacity: .55; }
.tfl-sidebar__heading { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }

/* Tag cloud */
.tfl-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tfl-tag { display: inline-block; padding: 4px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; font-size: .78rem; color: rgba(255,255,255,.55); text-decoration: none; transition: background .15s, border-color .15s, color .15s; cursor: pointer; }
.tfl-tag:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.28); color: #fff; }
.tfl-tag--active { background: rgba(57,217,138,.15); border-color: #39d98a; color: #39d98a; }

/* Main + toolbar */
.tfl-main { flex: 1; min-width: 0; }
.tfl-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.tfl-toolbar__count { font-size: .9rem; color: rgba(255,255,255,.45); }
.tfl-active-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tfl-active-filter { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: rgba(255,255,255,.07); border-radius: 20px; font-size: .78rem; color: rgba(255,255,255,.65); cursor: pointer; }
.tfl-active-filter:hover { background: rgba(255,255,255,.12); }
.tfl-active-filter__x { font-size: .9rem; line-height: 1; }
.tfl-toolbar__sort { padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; font-size: .875rem; background: #161b27; color: #fff; cursor: pointer; font-family: "Poppins", sans-serif; }

/* Product grid */
.tfl-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 24px; }

/* Product card */
.tf-card { background: #161b27; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 8px rgba(0,0,0,.25); transition: transform .2s, box-shadow .2s, border-color .2s; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.07); }
.tf-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(57,217,138,.1); border-color: rgba(57,217,138,.4); }
.tf-card.tfl-hidden { display: none; }
.tf-card__thumb-wrap { position: relative; aspect-ratio: 590/300; overflow: hidden; background: #0d1117; }
.tf-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.tf-card__thumb--placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #161b27, #1e2535); }
.tf-card__badge { position: absolute; top: 10px; left: 10px; background: rgba(57,217,138,.15); color: #39d98a; font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(57,217,138,.3); }
.tf-card__body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tf-card__title { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.tf-card__title a { color: #fff; text-decoration: none; }
.tf-card__title a:hover { color: var(--green); }
.tf-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tf-stars { color: #f59e0b; font-size: .85rem; letter-spacing: 1px; }
.tf-star--half, .tf-star--empty { opacity: .4; }
.tf-card__rcount { font-size: .75rem; color: rgba(255,255,255,.4); }
.tf-card__sales { font-size: .75rem; color: rgba(255,255,255,.4); margin-left: auto; }
.tf-card__actions { display: flex; gap: 8px; margin-top: auto; }
.tf-btn { flex: 1; padding: 9px 12px; border-radius: 6px; font-size: .8rem; font-weight: 600; text-align: center; text-decoration: none; transition: background .2s, color .2s, border-color .2s; cursor: pointer; font-family: "Poppins", sans-serif; }
.tf-btn--ghost { border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.6); background: transparent; }
.tf-btn--ghost:hover { border-color: var(--green); color: var(--green); }
.tf-btn--primary { background: var(--green); color: var(--ink); border: 1px solid transparent; font-weight: 700; }
.tf-btn--primary:hover { background: var(--green2); box-shadow: 0 4px 14px rgba(57,217,138,.35); }

/* No results / Coming soon */
.tfl-no-results { text-align: center; padding: 60px 20px; color: rgba(255,255,255,.45); grid-column: 1/-1; display: none; }
.tfl-no-results__icon { font-size: 3rem; display: block; margin-bottom: 12px; }
.tfl-coming-soon { text-align: center; padding: 80px 20px; color: rgba(255,255,255,.45); }
.tfl-coming-soon__icon { font-size: 4rem; display: block; margin-bottom: 20px; }

/* Niche category tab bar */
.tfl-cat-bar { background: var(--ink2); border-bottom: 1px solid rgba(255,255,255,.07); }
.tfl-cat-tabs { display: flex; overflow-x: auto; scrollbar-width: none; white-space: nowrap; padding: 0 3%; }
.tfl-cat-tabs::-webkit-scrollbar { display: none; }
.tfl-cat-tabs__link { display: inline-block; padding: 13px 18px; color: rgba(255,255,255,.5); font-size: .85rem; font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; transition: color .2s, border-color .2s; cursor: pointer; }
.tfl-cat-tabs__link:hover { color: #fff; }
.tfl-cat-tabs__link--active { color: #fff; border-bottom-color: var(--green); }
.tfl-cat-tabs__count { font-size: .75rem; opacity: .6; }

/* Mobile filter */
.tfl-mobile-filter { display: none; margin-bottom: 16px; }
.tfl-mobile-filter select { width: 100%; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; font-size: .9rem; font-family: "Poppins", sans-serif; background: #161b27; color: #fff; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__card { max-width: 480px; }
  body.home .hero__inner { display: block; }
  .hero__stats { grid-template-columns: repeat(2,1fr); }
  .tf__inner { grid-template-columns: 1fr; gap: 50px; }
  .tf__feats { gap: 1px; }
  .process__grid { grid-template-columns: repeat(2,1fr); }
  .process__step::after, .process__step::before { display: none; }
  .process__step { border-right: none; border-bottom: 1px solid var(--border); }
  .pkgs__grid { grid-template-columns: 1fr; background: transparent; border: none; gap: 18px; border-radius: 0; }
  .pc { border-radius: 16px; border: 1px solid #ddddd6; }
  .pc--mid { border: none; }
  .why__grid { grid-template-columns: repeat(2,1fr); }
  .testi__grid { grid-template-columns: repeat(2,1fr); }
  .sg3, .sg4 { grid-template-columns: repeat(2,1fr); }
  .cat__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cat__rule { display: none; }
  .cat__sub { padding-left: 16px; }
  .nyc__inner { grid-template-columns: 1fr; gap: 50px; }
  .nyc__ghost { display: none; }
  .faq__inner { grid-template-columns: 1fr; }
  .faq__left { position: static; }
  .industries__grid, .industries__grid2 { grid-template-columns: repeat(2,1fr); }
  .compare__head, .compare__row { grid-template-columns: 1fr 1fr 1fr; }
  .svc-row__head { grid-template-columns: 44px 1fr auto; }
  .svc-row__price { display: none; }
  .svc-row__body { grid-template-columns: 1fr; gap: 28px; padding-left: 44px; }
  .tfl-sidebar { display: none; }
  .tfl-mobile-filter { display: block; }
}
@media (max-width: 640px) {
  body { font-size: 19px; }
  .hero { padding: 80px 22px 70px; }
  body.home .hero { padding: 80px 22px 0; }
  .hero__stats { grid-template-columns: repeat(2,1fr); }
  .hero__stat { padding: 28px 18px; }
  .hero__stat-num { font-size: 38px; }
  .trust__inner { flex-direction: column; }
  .trust__item { border-right: none; border-bottom: 1px solid var(--border); }
  .trust__item:last-child { border-bottom: none; }
  .tf { padding: 70px 22px; }
  .tf__ghost { display: none; }
  .process__hd { padding: 70px 22px 0; }
  .process__grid { grid-template-columns: 1fr; }
  .process__step { padding: 38px 22px; }
  .svcs { padding: 80px 22px; }
  .sg2, .sg3, .sg4 { grid-template-columns: 1fr; }
  .pkgs { padding: 80px 22px; }
  .pkgs__ghost { font-size: 70px; margin-bottom: -26px; }
  .why { padding: 80px 22px; }
  .why__grid { grid-template-columns: 1fr; }
  .svc-list { padding: 80px 22px; }
  .svc-row__head { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .svc-row__num { display: none; }
  .svc-row__body { padding-left: 0; grid-template-columns: 1fr; }
  .svc-row__tag { align-self: flex-start; }
  .nyc { padding: 80px 22px; }
  .nyc__hoods-grid { grid-template-columns: 1fr; }
  .nyc__hood:nth-child(even) { border-right: none; }
  .nyc__stats { grid-template-columns: 1fr; }
  .nyc__stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
  .compare { padding: 80px 22px; }
  .compare__head, .compare__row { grid-template-columns: 1fr 1fr; }
  .compare__cell--feature { display: none; }
  .industries { padding: 80px 22px; }
  .industries__grid, .industries__grid2 { grid-template-columns: 1fr; }
  .faq { padding: 80px 22px; }
  .testi { padding: 80px 22px; }
  .testi__grid { grid-template-columns: 1fr; }
  .cta { padding: 90px 22px; }
  .cta__word { font-size: 80px; }
  .domain-search-wrapper .widget.rstore-domain .search-form { padding: 8px !important; }
  .domain-search-wrapper .widget.rstore-domain .search-field { font-size: 16px !important; min-height: 70px !important; padding: 22px !important; }
  .domain-search-wrapper .widget.rstore-domain .search-submit { min-height: 70px !important; padding: 0 18px !important; font-size: 15px !important; }
}

/* ══════════════════════════════════════════════════════════
   UI ENHANCEMENTS 2026-03-13
══════════════════════════════════════════════════════════ */

/* Fix white #page_wrapper on landing + product pages */
body.page-template-template-tf-landing #page_wrapper,
body.single-tf_product #page_wrapper {
    background: #0d1117 !important;
}

/* 4-column product grid */
.tfl-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}
@media (max-width: 1200px) {
    .tfl-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
    .tfl-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .tfl-grid { grid-template-columns: 1fr !important; }
}

/* Wider sidebar */
.tfl-sidebar {
    width: 300px !important;
    min-width: 300px !important;
    flex-shrink: 0 !important;
}

/* Format bar wrapper */
.tfl-format-bar {
    background: #0d1117;
    padding: 48px 0 40px;
    border-bottom: 1px solid rgba(57,217,138,.15);
}
.tfl-format-bar--sub {
    padding: 24px 0 20px;
}

/* Format showcase grid */
.tfl-format-showcase {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
}
@media (max-width: 1100px) {
    .tfl-format-showcase { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
    .tfl-format-showcase { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* Format card */
.tfl-format-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 10px 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    text-decoration: none !important;
    color: #e2e8f0 !important;
    transition: background .2s, border-color .2s, transform .18s;
    text-align: center;
}
.tfl-format-card:hover,
.tfl-format-card--active {
    background: rgba(57,217,138,.1) !important;
    border-color: #39d98a !important;
    transform: translateY(-3px);
    color: #39d98a !important;
}
.tfl-format-card__icon {
    font-size: 2.2rem;
    line-height: 1;
    color: #39d98a;
}
.tfl-format-card--active .tfl-format-card__icon {
    color: #39d98a;
}
.tfl-format-card__label {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #f1f5f9;
}
.tfl-format-card--active .tfl-format-card__label {
    color: #39d98a;
}
.tfl-format-card__count {
    font-size: .7rem;
    color: #6b7280;
    font-weight: 500;
}
.tfl-format-card:hover .tfl-format-card__count,
.tfl-format-card--active .tfl-format-card__count {
    color: #39d98a;
}

/* Typography improvements */
.tfl-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
}
.tfl-hero__desc {
    font-size: clamp(1rem, 2vw, 1.2rem) !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    line-height: 1.65 !important;
}
.tfl-hero__stat strong {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
}
.tf-card__title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

/* ══════════════════════════════════════════════════════════
   FONT FIX 2026-03-13 — Kallyas sets html font-size:62.5% (1rem=10px)
   All sizes below use px to bypass rem scaling
══════════════════════════════════════════════════════════ */

/* Hero */
.tfl-hero__title {
    font-size: clamp(28px, 5vw, 52px) !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
}
.tfl-hero__desc {
    font-size: clamp(15px, 2vw, 18px) !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    line-height: 1.65 !important;
    color: #94a3b8 !important;
}
.tfl-hero__stat strong {
    font-size: 26px !important;
    font-weight: 800 !important;
    display: block !important;
    color: #39d98a !important;
}
.tfl-hero__stat {
    font-size: 12px !important;
    color: #6b7280 !important;
}

/* Format cards */
.tfl-format-card__icon {
    font-size: 32px !important;
    line-height: 1 !important;
}
.tfl-format-card__label {
    font-size: 11px !important;
    letter-spacing: .06em !important;
}
.tfl-format-card__count {
    font-size: 10px !important;
}

/* Product cards */
.tf-card__title,
.tf-card__title a {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}
.tf-card__sales,
.tf-card__rcount {
    font-size: 11px !important;
}
.tf-card__badge {
    font-size: 10px !important;
}
.tf-btn {
    font-size: 12px !important;
}
.tf-btn--primary {
    font-size: 13px !important;
}

/* Sidebar + toolbar */
.tfl-filter-heading {
    font-size: 11px !important;
    letter-spacing: .08em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
.tfl-sidebar__link {
    font-size: 13px !important;
}
.tfl-sidebar__count {
    font-size: 11px !important;
}
.tfl-tag {
    font-size: 11px !important;
}
.tfl-toolbar__count {
    font-size: 13px !important;
}
.tfl-toolbar__sort {
    font-size: 13px !important;
}
.tfl-sidebar__heading {
    font-size: 10px !important;
}

/* Niche/category tabs */
.tfl-cat-tabs__link {
    font-size: 13px !important;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE — 2026-03-13
══════════════════════════════════════════════════════════ */

/* Hero bar */
.tfd-hero-bar {
    background: #0d1117;
    border-bottom: 1px solid rgba(57,217,138,.15);
    padding: 32px 0 28px;
}
.tfd-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Breadcrumb */
.tfd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: rgba(255,255,255,.4);
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
}
.tfd-breadcrumb a {
    color: rgba(255,255,255,.55);
    text-decoration: none;
    transition: color .15s;
}
.tfd-breadcrumb a:hover { color: #39d98a; }
.tfd-breadcrumb span[aria-current] { color: rgba(255,255,255,.85); }

/* Sticky sidebar */
.tfs-info {
    position: sticky !important;
    top: 100px !important;
    align-self: start !important;
}

/* Description / rich content area */
.tfd-content {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.8);
    font-size: 15px;
    line-height: 1.75;
    font-family: 'Poppins', sans-serif;
}
.tfd-content h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 32px 0 14px !important;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(57,217,138,.2);
}
.tfd-content h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 24px 0 10px !important;
}
.tfd-content p { margin: 0 0 14px; }
.tfd-content ul,
.tfd-content ol {
    margin: 0 0 20px 0;
    padding-left: 0;
    list-style: none;
}
.tfd-content ul li,
.tfd-content ol li {
    position: relative;
    padding: 5px 0 5px 24px;
    font-size: 14px;
    color: rgba(255,255,255,.75);
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.tfd-content ul li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #39d98a;
    font-weight: 700;
}
.tfd-content ol { counter-reset: tfd-ol; }
.tfd-content ol li::before {
    content: counter(tfd-ol) '.';
    counter-increment: tfd-ol;
    position: absolute;
    left: 0;
    color: #39d98a;
    font-weight: 700;
    font-size: 12px;
}
.tfd-content a { color: #39d98a; }
.tfd-content strong { color: #fff; font-weight: 700; }

/* Fix font sizes with px to avoid Kallyas 62.5% rem issue */
.tfs-title  { font-size: 28px !important; font-weight: 800 !important; line-height: 1.25 !important; }
.tfs-price  { font-size: 36px !important; font-weight: 800 !important; }
.tfs-badge  { font-size: 12px !important; }
.tfs-spec-row { font-size: 14px !important; }
.tfs-btn    { font-size: 15px !important; }