/**
 * Hakimi.Tech — assets/css/main.css
 * استایل اصلی قالب — تمام کامپوننت‌ها
 *
 * INDEX:
 * ─────────────────────────────────────────────
 *  §1   Typography & Content
 *  §2   Layout Utilities
 *  §3   Breadcrumb
 *  §4   Page Hero Bar
 *  §5   Buttons (global extensions)
 *  §6   Cards (global extensions)
 *  §7   Bento Grid
 *  §8   Tags / Chips
 *  §9   Badge & Pill
 *  §10  Section Headers
 *  §11  Hero Section
 *  §12  Services Section
 *  §13  Process Steps
 *  §14  CTA Box
 *  §15  Portfolio
 *  §16  About Page
 *  §17  Contact Page
 *  §18  My Account / WooCommerce
 *  §19  Shop / Products
 *  §20  Blog & Archive
 *  §21  Single Post
 *  §22  Search & 404
 *  §23  Sidebar & Widgets
 *  §24  Comments
 *  §25  Forms (global)
 *  §26  Navigation
 *  §27  Pagination
 *  §28  Social Links
 *  §29  Animations & Reveal
 *  §30  Utilities
 *  §31  Print
 * ─────────────────────────────────────────────
 *
 * @package HakimiTech
 * @version 1.0.0
 */

/* ============================================================
   §1 — TYPOGRAPHY & CONTENT
   ============================================================ */

body {
	font-family:             var(--hkm-font-body);
	font-size:               1rem;
	font-size-adjust:        none;
	background-color:        var(--hkm-bg);
	color:                   var(--hkm-text);
	line-height:             1.7;
	overflow-x:              hidden;
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Font-scale from Customizer */
:root {
	font-size: calc(16px * var(--hkm-font-scale, 100) / 100);
}

/* Global heading defaults */
h1, h2, h3, h4, h5, h6 {
	font-family:    var(--hkm-font-head);
	color:          var(--hkm-text);
	letter-spacing: -0.02em;
	line-height:    1.1;
}

/* Rich content area */
.hkm-content { max-width: 72ch; }

.hkm-content > * + * { margin-top: 1.25em; }

.hkm-content h2 {
	font-size:      1.75rem;
	font-weight:    800;
	margin-top:     2.5rem;
	padding-bottom: .5rem;
	border-bottom:  1px solid var(--hkm-border);
}

.hkm-content h3 { font-size: 1.35rem; font-weight: 700; margin-top: 2rem; }
.hkm-content h4 { font-size: 1.1rem;  font-weight: 700; color: var(--hkm-text); }

.hkm-content p  { color: var(--hkm-muted); line-height: 1.85; margin: 0; }

.hkm-content a  {
	color:                  var(--hkm-emerald);
	text-decoration:        underline;
	text-underline-offset:  3px;
	text-decoration-color:  rgba(16,185,129,.4);
	transition:             text-decoration-color .2s;
}
.hkm-content a:hover { text-decoration-color: var(--hkm-emerald); }

.hkm-content strong { color: var(--hkm-text); font-weight: 700; }

.hkm-content ul,
.hkm-content ol {
	padding-left:  1.75rem;
	color:         var(--hkm-muted);
}
.hkm-content li { padding: .3rem 0; line-height: 1.7; }

.hkm-content blockquote {
	border-left:   3px solid var(--hkm-emerald);
	padding:       1rem 1.5rem;
	margin:        1.5rem 0;
	background:    var(--hkm-card);
	border-radius: 0 var(--hkm-r-md) var(--hkm-r-md) 0;
	font-style:    italic;
	color:         var(--hkm-muted);
}

.hkm-content code {
	background:    var(--hkm-card);
	border:        1px solid var(--hkm-border);
	border-radius: 4px;
	padding:       .15em .4em;
	font-family:   var(--hkm-font-mono);
	font-size:     .875em;
	color:         var(--hkm-cyan);
}

.hkm-content pre {
	background:    var(--hkm-card);
	border:        1px solid var(--hkm-border);
	border-radius: var(--hkm-r-md);
	padding:       1.5rem;
	overflow-x:    auto;
	line-height:   1.85;
}

.hkm-content pre code {
	background: none;
	border:     none;
	padding:    0;
	color:      var(--hkm-text);
	font-size:  .88rem;
}

.hkm-content table {
	width:          100%;
	border-collapse: collapse;
	font-size:       .9rem;
}

.hkm-content th {
	background:    var(--hkm-card);
	color:         var(--hkm-emerald);
	font-size:     .72rem;
	font-weight:   700;
	letter-spacing:.08em;
	text-transform:uppercase;
	padding:       .75rem 1rem;
	border-bottom: 1px solid var(--hkm-border);
	text-align:    left;
}

.hkm-content td {
	padding:       .7rem 1rem;
	border-bottom: 1px solid var(--hkm-border);
	color:         var(--hkm-muted);
	vertical-align: top;
}

.hkm-content tr:last-child td { border-bottom: none; }
.hkm-content tr:hover td { background: rgba(255,255,255,.02); }

.hkm-content img {
	border-radius: var(--hkm-r-md);
	max-width:     100%;
	height:        auto;
	display:       block;
}

.hkm-content figure { margin: 2rem 0; }
.hkm-content figcaption {
	text-align:  center;
	font-size:   .82rem;
	color:       var(--hkm-muted);
	margin-top:  .6rem;
}

.hkm-content hr {
	border:     none;
	border-top: 1px solid var(--hkm-border);
	margin:     2.5rem 0;
}

/* ============================================================
   §2 — LAYOUT UTILITIES
   ============================================================ */

.hkm-container {
	width:     100%;
	max-width: var(--hkm-container, 1200px);
	margin:    0 auto;
	padding:   0 6%;
}

.hkm-section {
	position: relative;
	z-index:  1;
	padding:  var(--hkm-space-xl, 8rem) 6%;
}

.hkm-section--sm { padding-top: 4rem;  padding-bottom: 4rem; }
.hkm-section--lg { padding-top: 10rem; padding-bottom: 10rem; }
.hkm-section--no-top    { padding-top: 0; }
.hkm-section--no-bottom { padding-bottom: 0; }

.hkm-page-content { padding-top: var(--hkm-nav-h, 68px); }

/* Two-column page layout (content + sidebar) */
.hkm-page-layout {
	display:               grid;
	grid-template-columns: 1fr 280px;
	gap:                   3rem;
	align-items:           start;
	padding:               4rem 0;
}

.hkm-page-article { min-width: 0; }

/* Full-width inner max */
.hkm-max-900 { max-width: 900px;  margin: 0 auto; }
.hkm-max-700 { max-width: 700px;  margin: 0 auto; }
.hkm-max-560 { max-width: 560px;  margin: 0 auto; }

/* ============================================================
   §3 — BREADCRUMB
   ============================================================ */

.hkm-breadcrumb { margin-bottom: 1.25rem; }

.hkm-breadcrumb__list {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         .4rem;
	list-style:  none;
	font-size:   .8rem;
}

.hkm-breadcrumb__item {
	display:     flex;
	align-items: center;
	gap:         .4rem;
	color:       var(--hkm-muted);
}

.hkm-breadcrumb__item::before {
	content: '/';
	opacity: .4;
}

.hkm-breadcrumb__item:first-child::before { display: none; }

.hkm-breadcrumb__item a {
	color:           var(--hkm-muted);
	text-decoration: none;
	transition:      color .2s;
	display:         flex;
	align-items:     center;
	gap:             .3rem;
}

.hkm-breadcrumb__item a:hover          { color: var(--hkm-text); }
.hkm-breadcrumb__item--current         { color: var(--hkm-text); font-weight: 500; }
.hkm-breadcrumb__item svg              { color: var(--hkm-emerald); }

/* ============================================================
   §4 — PAGE HERO BAR
   ============================================================ */

.hkm-page-hero {
	position:      relative;
	z-index:       1;
	padding:       5rem 6% 3rem;
	border-bottom: 1px solid var(--hkm-border);
	background:    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(16,185,129,.05) 0%, transparent 70%);
}

.hkm-page-hero__title {
	font-family:    var(--hkm-font-head);
	font-size:      clamp(2rem, 5vw, 3.5rem);
	font-weight:    800;
	letter-spacing: -.03em;
	margin-top:     .75rem;
	color:          var(--hkm-text);
}

/* ============================================================
   §5 — BUTTONS (global)
   ============================================================ */

.hkm-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             .5rem;
	padding:         .85rem 2rem;
	border-radius:   var(--hkm-r-sm);
	font-family:     var(--hkm-font-body);
	font-weight:     600;
	font-size:       .97rem;
	text-decoration: none;
	border:          none;
	cursor:          pointer;
	transition:      all .25s ease;
	white-space:     nowrap;
	line-height:     1;
	position:        relative;
	overflow:        hidden;
}

.hkm-btn--primary {
	background: var(--hkm-emerald);
	color:      var(--hkm-bg);
	box-shadow: var(--hkm-shadow-em);
}
.hkm-btn--primary:hover {
	background: var(--hkm-emerald-h);
	box-shadow: var(--hkm-shadow-em-h);
	transform:  translateY(-2px);
	color:      var(--hkm-bg);
}

.hkm-btn--ghost {
	background: transparent;
	color:      var(--hkm-text);
	border:     1px solid var(--hkm-border-h);
}
.hkm-btn--ghost:hover {
	border-color: rgba(255,255,255,.28);
	background:   rgba(255,255,255,.04);
	transform:    translateY(-2px);
	color:        var(--hkm-text);
}

.hkm-btn--cyan {
	background: var(--hkm-cyan-dim);
	color:      var(--hkm-cyan);
	border:     1px solid rgba(6,182,212,.25);
}
.hkm-btn--cyan:hover {
	background: rgba(6,182,212,.22);
	transform:  translateY(-2px);
	color:      var(--hkm-cyan);
}

.hkm-btn--gold {
	background: var(--hkm-gold-dim);
	color:      var(--hkm-gold);
	border:     1px solid rgba(245,158,11,.25);
}
.hkm-btn--gold:hover {
	background: rgba(245,158,11,.22);
	transform:  translateY(-2px);
	color:      var(--hkm-gold);
}

.hkm-btn--danger {
	background: rgba(239,68,68,.12);
	color:      #f87171;
	border:     1px solid rgba(239,68,68,.25);
}
.hkm-btn--danger:hover { background: rgba(239,68,68,.22); }

.hkm-btn--sm { padding: .5rem 1.25rem; font-size: .85rem; border-radius: 6px; }
.hkm-btn--lg { padding: 1.1rem 2.5rem; font-size: 1.05rem; }
.hkm-btn--full { width: 100%; }

.hkm-btn[disabled],
.hkm-btn.is-loading { opacity: .6; pointer-events: none; cursor: not-allowed; }

/* Loading spinner */
.hkm-btn.is-loading::after {
	content:     '';
	width:       16px;
	height:      16px;
	border:      2px solid transparent;
	border-top-color: currentColor;
	border-radius: 50%;
	animation:   hkmSpin .6s linear infinite;
	margin-left: .5rem;
}

@keyframes hkmSpin { to { transform: rotate(360deg); } }

/* ============================================================
   §6 — CARDS (global)
   ============================================================ */

.hkm-card {
	background:    var(--hkm-card);
	border:        1px solid var(--hkm-border);
	border-radius: var(--hkm-r-lg);
	padding:       2rem;
	position:      relative;
	overflow:      hidden;
	transition:    all .35s ease;
}

.hkm-card::before {
	content:       '';
	position:      absolute;
	top:           0; left: 0;
	width:         100%; height: 2px;
	background:    var(--hkm-accent-color, var(--hkm-emerald));
	opacity:       0;
	transition:    opacity .35s;
	border-radius: var(--hkm-r-lg) var(--hkm-r-lg) 0 0;
}

.hkm-card::after {
	content:       '';
	position:      absolute;
	inset:         0;
	border-radius: var(--hkm-r-lg);
	background:    radial-gradient(
		circle at var(--mx,50%) var(--my,50%),
		rgba(255,255,255,.04) 0%,
		transparent 60%
	);
	opacity:       0;
	transition:    opacity .35s;
	pointer-events:none;
}

.hkm-card:hover {
	border-color: var(--hkm-border-h);
	background:   var(--hkm-card-h);
	transform:    translateY(-3px);
}

.hkm-card:hover::before,
.hkm-card:hover::after { opacity: 1; }

.hkm-card--emerald { --hkm-accent-color: var(--hkm-emerald); }
.hkm-card--cyan    { --hkm-accent-color: var(--hkm-cyan);    }
.hkm-card--gold    { --hkm-accent-color: var(--hkm-gold);    }

.hkm-card--flat    { transform: none !important; }
.hkm-card--flat:hover { transform: none !important; }

.hkm-card__icon {
	width:         44px;
	height:        44px;
	border-radius: 10px;
	display:       flex;
	align-items:   center;
	justify-content: center;
	font-size:     1.3rem;
	margin-bottom: 1.25rem;
	flex-shrink:   0;
}

.hkm-card--emerald .hkm-card__icon { background: var(--hkm-emerald-dim); }
.hkm-card--cyan    .hkm-card__icon { background: var(--hkm-cyan-dim);    }
.hkm-card--gold    .hkm-card__icon { background: var(--hkm-gold-dim);    }

.hkm-card__title {
	font-family:   var(--hkm-font-head);
	font-size:     1.05rem;
	font-weight:   700;
	color:         var(--hkm-text);
	margin-bottom: .5rem;
	letter-spacing: -.01em;
}

.hkm-card__body {
	color:       var(--hkm-muted);
	font-size:   .88rem;
	line-height: 1.65;
}

/* ============================================================
   §7 — BENTO GRID
   ============================================================ */

.hkm-bento {
	display:               grid;
	grid-template-columns: repeat(12, 1fr);
	gap:                   1rem;
	max-width:             var(--hkm-container);
	margin:                0 auto;
}

.hkm-bento__col-1  { grid-column: span 1;  }
.hkm-bento__col-2  { grid-column: span 2;  }
.hkm-bento__col-3  { grid-column: span 3;  }
.hkm-bento__col-4  { grid-column: span 4;  }
.hkm-bento__col-5  { grid-column: span 5;  }
.hkm-bento__col-6  { grid-column: span 6;  }
.hkm-bento__col-7  { grid-column: span 7;  }
.hkm-bento__col-8  { grid-column: span 8;  }
.hkm-bento__col-9  { grid-column: span 9;  }
.hkm-bento__col-10 { grid-column: span 10; }
.hkm-bento__col-11 { grid-column: span 11; }
.hkm-bento__col-12 { grid-column: span 12; }

/* ============================================================
   §8 — TAGS / CHIPS
   ============================================================ */

.hkm-tags {
	display:    flex;
	flex-wrap:  wrap;
	gap:        .4rem;
	margin-top: 1.25rem;
}

.hkm-tag {
	display:        inline-flex;
	align-items:    center;
	font-size:      .7rem;
	font-weight:    700;
	padding:        .25rem .65rem;
	border-radius:  var(--hkm-r-pill);
	letter-spacing: .03em;
	white-space:    nowrap;
	transition:     all .2s;
}

.hkm-tag--emerald { background: var(--hkm-emerald-dim); color: var(--hkm-emerald); }
.hkm-tag--cyan    { background: var(--hkm-cyan-dim);    color: var(--hkm-cyan);    }
.hkm-tag--gold    { background: var(--hkm-gold-dim);    color: var(--hkm-gold);    }
.hkm-tag--muted   { background: rgba(255,255,255,.06);  color: var(--hkm-muted);   }

a.hkm-tag:hover { opacity: .85; transform: translateY(-1px); }

/* ============================================================
   §9 — BADGE & PILL
   ============================================================ */

.hkm-badge {
	display:        inline-flex;
	align-items:    center;
	gap:            .5rem;
	background:     var(--hkm-emerald-dim);
	border:         1px solid rgba(16,185,129,.25);
	color:          var(--hkm-emerald);
	padding:        .35rem 1rem;
	border-radius:  var(--hkm-r-pill);
	font-size:      .78rem;
	font-weight:    700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hkm-badge::before {
	content:       '';
	width:         6px;
	height:        6px;
	border-radius: 50%;
	background:    var(--hkm-emerald);
	animation:     hkmPulse 2s ease infinite;
	flex-shrink:   0;
}

.hkm-badge--cyan   { background: var(--hkm-cyan-dim); border-color: rgba(6,182,212,.25); color: var(--hkm-cyan); }
.hkm-badge--cyan::before { background: var(--hkm-cyan); }
.hkm-badge--gold   { background: var(--hkm-gold-dim); border-color: rgba(245,158,11,.25); color: var(--hkm-gold); }
.hkm-badge--gold::before { background: var(--hkm-gold); }
.hkm-badge--no-dot::before { display: none; }

@keyframes hkmPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: .5; transform: scale(.8); }
}

/* ============================================================
   §10 — SECTION HEADERS
   ============================================================ */

.hkm-section-header { margin-bottom: var(--hkm-space-lg, 4rem); }

.hkm-section-header--center { text-align: center; }
.hkm-section-header--center .hkm-section-desc { margin: 0 auto; }

.hkm-section-header--left  { text-align: left; }
.hkm-section-header--right { text-align: right; }

.hkm-section-label {
	display:        inline-block;
	font-size:      .72rem;
	font-weight:    700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color:          var(--hkm-emerald);
	margin-bottom:  .6rem;
}

.hkm-section-title {
	font-family:    var(--hkm-font-head);
	font-size:      clamp(1.8rem, 3.5vw, 2.8rem);
	font-weight:    800;
	line-height:    1.1;
	letter-spacing: -.02em;
	color:          var(--hkm-text);
	margin-bottom:  .75rem;
}

.hkm-section-desc {
	color:       var(--hkm-muted);
	font-size:   1.05rem;
	max-width:   540px;
	line-height: 1.7;
	margin:      0;
}

/* ============================================================
   §11 — HERO SECTION
   ============================================================ */

.hkm-hero {
	position:        relative;
	z-index:         1;
	min-height:      100vh;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	text-align:      center;
	padding:         calc(var(--hkm-nav-h, 68px) + 3rem) 6% 5rem;
}

.hkm-hero__badge-wrap { margin-bottom: 2rem; animation: hkmFadeUp .6s ease both; }

.hkm-hero__h1 {
	font-family:    var(--hkm-font-head);
	font-size:      clamp(2.6rem, 6vw, 5.2rem);
	font-weight:    800;
	line-height:    1.05;
	letter-spacing: -.03em;
	margin-bottom:  1.5rem;
	animation:      hkmFadeUp .6s ease .1s both;
}

.hkm-hero__desc {
	color:     var(--hkm-muted);
	font-size: clamp(1rem, 2vw, 1.15rem);
	max-width: 580px;
	margin:    0 auto 3rem;
	animation: hkmFadeUp .6s ease .2s both;
}

.hkm-hero__actions {
	display:        flex;
	gap:            1rem;
	justify-content:center;
	flex-wrap:      wrap;
	animation:      hkmFadeUp .6s ease .3s both;
}

.hkm-hero__stats {
	display:        flex;
	gap:            3.5rem;
	justify-content:center;
	flex-wrap:      wrap;
	margin-top:     5rem;
	padding-top:    3rem;
	border-top:     1px solid var(--hkm-border);
	width:          100%;
	max-width:      680px;
	animation:      hkmFadeUp .6s ease .4s both;
}

.hkm-hero__stat { text-align: center; }

.hkm-hero__stat-num {
	display:     block;
	font-family: var(--hkm-font-head);
	font-size:   2rem;
	font-weight: 700;
	color:       var(--hkm-text);
}

.hkm-hero__stat-label {
	display:    block;
	font-size:  .8rem;
	color:      var(--hkm-muted);
	margin-top: .2rem;
}

/* Hero background variants */
.hkm-hero--image {
	background-size:     cover;
	background-position: center;
	background-repeat:   no-repeat;
}

.hkm-hero--image::before {
	content:  '';
	position: absolute;
	inset:    0;
	background: rgba(10,10,15, var(--hkm-hero-overlay, .7));
}

/* ============================================================
   §12 — SERVICES SECTION
   ============================================================ */

.hkm-services {
	padding: 8rem 6%;
}

/* Code preview block inside card */
.hkm-code-preview {
	background: rgba(0,0,0,.45);
	border:     1px solid var(--hkm-border);
	border-radius: 10px;
	margin:     1.25rem 0;
	overflow:   hidden;
}

.hkm-code-preview__dots {
	display: flex;
	gap:     6px;
	padding: .6rem .9rem;
	border-bottom: 1px solid var(--hkm-border);
}

.hkm-code-preview__dots span {
	width:         10px;
	height:        10px;
	border-radius: 50%;
	background:    var(--hkm-border-h);
}

.hkm-code-preview__dots span:nth-child(1) { background: #ff5f57; }
.hkm-code-preview__dots span:nth-child(2) { background: #febc2e; }
.hkm-code-preview__dots span:nth-child(3) { background: #28c840; }

.hkm-code-preview__body {
	padding:     1rem;
	font-family: var(--hkm-font-mono);
	font-size:   .74rem;
	color:       var(--hkm-muted);
	line-height: 1.85;
	direction:   ltr;
	text-align:  left;
	margin:      0;
	white-space: pre;
	overflow-x:  auto;
}

/* Pine Script syntax */
.hkm-kw  { color: var(--hkm-cyan);    }
.hkm-fn  { color: var(--hkm-emerald); }
.hkm-str { color: var(--hkm-gold);    }
.hkm-cm  { color: var(--hkm-muted); opacity: .6; }

/* ============================================================
   §13 — PROCESS STEPS
   ============================================================ */

.hkm-process {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap:                   1.5rem;
	max-width:             1000px;
	margin:                0 auto;
	position:              relative;
}

.hkm-process::before {
	content:    '';
	position:   absolute;
	top:        26px;
	left:       5%; right: 5%;
	height:     1px;
	background: linear-gradient(90deg, transparent, var(--hkm-border-h), transparent);
	pointer-events: none;
}

.hkm-process__step {
	background:    var(--hkm-card);
	border:        1px solid var(--hkm-border);
	border-radius: 14px;
	padding:       1.75rem;
	text-align:    center;
	transition:    var(--hkm-trans);
}

.hkm-process__step:hover {
	border-color: var(--hkm-border-h);
	transform:    translateY(-3px);
}

.hkm-process__num {
	width:         48px;
	height:        48px;
	border-radius: 50%;
	background:    var(--hkm-bg);
	border:        1px solid var(--hkm-border-h);
	display:       flex;
	align-items:   center;
	justify-content: center;
	margin:        0 auto 1.25rem;
	font-family:   var(--hkm-font-head);
	font-weight:   700;
	font-size:     1rem;
	color:         var(--hkm-emerald);
}

.hkm-process__title {
	font-family:   var(--hkm-font-head);
	font-size:     1rem;
	font-weight:   700;
	color:         var(--hkm-text);
	margin-bottom: .5rem;
}

.hkm-process__desc { font-size: .85rem; color: var(--hkm-muted); margin: 0; }

/* ============================================================
   §14 — CTA BOX
   ============================================================ */

.hkm-cta-box {
	max-width:     900px;
	margin:        0 auto;
	background:    linear-gradient(135deg, rgba(16,185,129,.08) 0%, rgba(6,182,212,.06) 100%);
	border:        1px solid rgba(16,185,129,.2);
	border-radius: var(--hkm-r-xl);
	padding:       4rem 3rem;
	text-align:    center;
	position:      relative;
	overflow:      hidden;
}

.hkm-cta-box__glow {
	position:  absolute;
	top:       -60px; left: 50%;
	transform: translateX(-50%);
	width:     300px; height: 200px;
	background: radial-gradient(ellipse, rgba(16,185,129,.15) 0%, transparent 70%);
	pointer-events: none;
}

.hkm-cta-box h2 {
	font-family:    var(--hkm-font-head);
	font-size:      clamp(1.8rem, 3vw, 2.5rem);
	font-weight:    800;
	letter-spacing: -.02em;
	margin-bottom:  1rem;
	position:       relative;
}

.hkm-cta-box p {
	color:        var(--hkm-muted);
	font-size:    1.05rem;
	margin:       0 auto 2.5rem;
	max-width:    480px;
	position:     relative;
}

.hkm-cta-box__actions {
	display:         flex;
	gap:             1rem;
	justify-content: center;
	flex-wrap:       wrap;
	position:        relative;
}

/* ============================================================
   §15 — PORTFOLIO
   ============================================================ */

/* Filter bar */
.hkm-pf-filter {
	display:         flex;
	flex-wrap:       wrap;
	gap:             .5rem;
	justify-content: center;
	margin-bottom:   3rem;
}

.hkm-pf-filter__btn {
	background:     var(--hkm-card);
	border:         1px solid var(--hkm-border);
	border-radius:  var(--hkm-r-pill);
	padding:        .45rem 1.1rem;
	font-size:      .82rem;
	font-weight:    600;
	font-family:    var(--hkm-font-body);
	color:          var(--hkm-muted);
	cursor:         pointer;
	transition:     all .2s;
	letter-spacing: .03em;
}

.hkm-pf-filter__btn:hover,
.hkm-pf-filter__btn.is-active {
	background:   var(--hkm-emerald-dim);
	border-color: rgba(16,185,129,.3);
	color:        var(--hkm-emerald);
}

/* Grid */
.hkm-pf-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap:                   3rem 2rem;
	margin-bottom:         3rem;
}

.hkm-pf-grid.is-filtering { pointer-events: none; opacity: .7; transition: opacity .2s; }

/* Portfolio card */
.hkm-pf-card { display: flex; flex-direction: column; gap: 1.25rem; }
.hkm-pf-card.is-hidden { display: none; }

/* Monitor */
.hkm-monitor { display: flex; flex-direction: column; align-items: center; }

.hkm-monitor__body {
	width:      100%;
	background: linear-gradient(145deg, #1e1e2e, #12121a);
	border:     2px solid rgba(255,255,255,.1);
	border-radius: 12px 12px 4px 4px;
	overflow:   hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
	transition: box-shadow .35s, transform .35s;
}

.hkm-pf-card:hover .hkm-monitor__body {
	box-shadow:
		0 30px 80px rgba(0,0,0,.6),
		0 0 0 1px rgba(16,185,129,.2),
		inset 0 1px 0 rgba(255,255,255,.08);
}

.hkm-monitor__bar {
	display:       flex;
	align-items:   center;
	gap:           .5rem;
	padding:       .55rem .85rem;
	background:    rgba(0,0,0,.4);
	border-bottom: 1px solid rgba(255,255,255,.06);
}

.hkm-monitor__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.hkm-monitor__dot--red    { background: #ff5f57; }
.hkm-monitor__dot--yellow { background: #febc2e; }
.hkm-monitor__dot--green  { background: #28c840; }

.hkm-monitor__url-bar {
	display:       flex;
	align-items:   center;
	gap:           .4rem;
	flex:          1;
	margin:        0 .5rem;
	background:    rgba(255,255,255,.05);
	border:        1px solid rgba(255,255,255,.08);
	border-radius: 4px;
	padding:       .22rem .6rem;
	font-size:     .7rem;
	color:         var(--hkm-muted);
	font-family:   var(--hkm-font-mono);
	overflow:      hidden;
}

.hkm-monitor__url-icon { color: var(--hkm-emerald); flex-shrink: 0; }
.hkm-monitor__url-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hkm-monitor__screen { position: relative; overflow: hidden; aspect-ratio: 16/10; }

.hkm-monitor__screenshot {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform .5s ease;
}

/* Hover effects */
.hkm-monitor--hover-zoom  .hkm-pf-card:hover .hkm-monitor__screenshot { transform: scale(1.04); }
.hkm-monitor--hover-slide .hkm-pf-card:hover .hkm-monitor__screenshot { transform: translateY(-8px); }
.hkm-monitor--hover-fade  .hkm-monitor__screenshot { transition: opacity .4s; }
.hkm-monitor--hover-fade  .hkm-pf-card:hover .hkm-monitor__screenshot { opacity: .85; }

/* Overlay */
.hkm-monitor__overlay {
	position:   absolute;
	inset:      0;
	background: rgba(10,10,15,.75);
	display:    flex;
	align-items:center;
	justify-content:center;
	gap:        .75rem;
	opacity:    0;
	transition: opacity .35s;
	backdrop-filter: blur(4px);
}

.hkm-pf-card:hover .hkm-monitor__overlay { opacity: 1; }

/* Stand */
.hkm-monitor__stand { display: flex; flex-direction: column; align-items: center; }

.hkm-monitor__neck {
	width:      28px;
	height:     22px;
	background: linear-gradient(to bottom, #1a1a28, #0f0f1a);
	border-left:  1px solid rgba(255,255,255,.06);
	border-right: 1px solid rgba(255,255,255,.06);
}

.hkm-monitor__base {
	width:         100px;
	height:        10px;
	background:    linear-gradient(to bottom, #1a1a28, #0f0f1a);
	border-radius: 0 0 8px 8px;
	border:        1px solid rgba(255,255,255,.06);
	border-top:    none;
}

/* Monitor variants */
.hkm-monitor--light   .hkm-monitor__body { background: linear-gradient(145deg,#f8f9fa,#e9ecef); border-color: rgba(0,0,0,.12); }
.hkm-monitor--minimal .hkm-monitor__body { border-color: var(--hkm-border); box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.hkm-monitor--minimal .hkm-monitor__bar  { display: none; }

/* Card info */
.hkm-pf-card__title { font-family: var(--hkm-font-head); font-size: 1.05rem; font-weight: 700; margin-bottom: .35rem; }
.hkm-pf-card__title a { color: var(--hkm-text); text-decoration: none; transition: color .2s; }
.hkm-pf-card__title a:hover { color: var(--hkm-emerald); }
.hkm-pf-card__client { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--hkm-muted); margin-bottom: .5rem; }

/* ============================================================
   §16 — ABOUT PAGE
   ============================================================ */

.hkm-about-story { padding: 6rem 6%; }

.hkm-about-story__grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   4rem;
	align-items:           center;
	max-width:             var(--hkm-container);
	margin:                0 auto;
}

.hkm-about-stats {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   1.5rem;
	margin-top:            2.5rem;
	padding-top:           2rem;
	border-top:            1px solid var(--hkm-border);
}

.hkm-about-stat { text-align: center; }

.hkm-about-stat__num {
	display:     block;
	font-family: var(--hkm-font-head);
	font-size:   2rem;
	font-weight: 800;
	color:       var(--hkm-emerald);
}

.hkm-about-stat__label {
	display:    block;
	font-size:  .8rem;
	color:      var(--hkm-muted);
	margin-top: .2rem;
}

.hkm-about-story__img img { border-radius: var(--hkm-r-lg); width: 100%; display: block; }

.hkm-values-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap:                   1.5rem;
	margin-top:            3rem;
}

/* ============================================================
   §17 — CONTACT PAGE
   ============================================================ */

.hkm-contact-grid {
	display:               grid;
	grid-template-columns: 1fr 1.5fr;
	gap:                   3rem;
	align-items:           start;
}

.hkm-contact-cards { display: flex; flex-direction: column; gap: 1rem; }

.hkm-contact-card {
	display:         flex;
	align-items:     center;
	gap:             1rem;
	text-decoration: none;
	padding:         1.25rem 1.5rem;
	transition:      var(--hkm-trans);
}

.hkm-contact-card:hover  { transform: translateX(4px); }
.hkm-contact-card svg:last-child { margin-left: auto; color: var(--hkm-muted); flex-shrink: 0; }

.hkm-contact-card__label {
	display:        block;
	font-size:      .72rem;
	font-weight:    700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color:          var(--hkm-emerald);
	margin-bottom:  .2rem;
}

.hkm-contact-card__val { font-size: .9rem; color: var(--hkm-text); font-weight: 500; }
.hkm-contact-social    { padding-top: 1rem; display: flex; flex-direction: column; gap: .75rem; }

.hkm-contact-form-wrap { padding: 2rem; }
.hkm-contact-form-wrap__title {
	font-family:   var(--hkm-font-head);
	font-size:     1.3rem;
	font-weight:   700;
	margin-bottom: 1.5rem;
	color:         var(--hkm-text);
}

/* ============================================================
   §18 — MY ACCOUNT
   ============================================================ */

.hkm-account-wrap {
	display:               grid;
	grid-template-columns: 240px 1fr;
	gap:                   2rem;
	align-items:           start;
}

.hkm-account-nav {
	background:    var(--hkm-card);
	border:        1px solid var(--hkm-border);
	border-radius: var(--hkm-r-lg);
	padding:       1rem;
	position:      sticky;
	top:           calc(var(--hkm-nav-h, 68px) + 1rem);
}

.hkm-account-nav ul,
.woocommerce-MyAccount-navigation ul { list-style: none; }

.hkm-account-nav ul li a,
.woocommerce-MyAccount-navigation ul li a {
	display:       block;
	padding:       .65rem .85rem;
	color:         var(--hkm-muted);
	font-size:     .9rem;
	font-weight:   500;
	text-decoration: none;
	border-radius: var(--hkm-r-sm);
	transition:    all .2s;
	border-left:   2px solid transparent;
}

.hkm-account-nav ul li a:hover,
.woocommerce-MyAccount-navigation ul li a:hover {
	color:      var(--hkm-text);
	background: rgba(255,255,255,.04);
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active > a {
	color:             var(--hkm-emerald);
	background:        var(--hkm-emerald-dim);
	border-left-color: var(--hkm-emerald);
}

.hkm-account-content { padding: 2rem; }

/* WooCommerce table overrides */
.hkm-account-content table.shop_table {
	width:           100%;
	border-collapse: collapse;
	font-size:       .9rem;
}

.hkm-account-content table.shop_table th {
	color:          var(--hkm-emerald);
	font-size:      .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding:        .75rem;
	border-bottom:  1px solid var(--hkm-border);
	text-align:     left;
}

.hkm-account-content table.shop_table td {
	padding:       .75rem;
	border-bottom: 1px solid var(--hkm-border);
	color:         var(--hkm-muted);
}

/* ============================================================
   §19 — SHOP & PRODUCTS
   ============================================================ */

.hkm-products-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap:                   2rem;
}

.hkm-product-card { position: relative; }

.hkm-product-card__badges {
	position: absolute;
	top:      1rem;
	left:     1rem;
	z-index:  2;
	display:  flex;
	gap:      .4rem;
}

.hkm-product-badge {
	font-size:      .65rem;
	font-weight:    800;
	padding:        .2rem .55rem;
	border-radius:  var(--hkm-r-pill);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hkm-product-badge--new  { background: var(--hkm-emerald); color: var(--hkm-bg); }
.hkm-product-badge--sale { background: var(--hkm-gold);    color: var(--hkm-bg); }
.hkm-product-badge--hot  { background: #ef4444;             color: #fff; }

.hkm-product-card__thumb {
	display:       block;
	overflow:      hidden;
	border-radius: var(--hkm-r-md) var(--hkm-r-md) 0 0;
	aspect-ratio:  4/3;
}

.hkm-product-card__thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.hkm-product-card:hover .hkm-product-card__thumb img { transform: scale(1.04); }

.hkm-product-card__body  { padding: 1.25rem 1.5rem 1.5rem; }
.hkm-product-card__title { font-family: var(--hkm-font-head); font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
.hkm-product-card__title a { color: var(--hkm-text); text-decoration: none; transition: color .2s; }
.hkm-product-card__title a:hover { color: var(--hkm-emerald); }

.hkm-product-card__price {
	font-family:   var(--hkm-font-head);
	font-size:     1.1rem;
	font-weight:   700;
	color:         var(--hkm-emerald);
	margin-bottom: .85rem;
}

.hkm-product-card__price del { color: var(--hkm-muted); font-weight: 400; font-size: .85em; margin-right: .4rem; }

/* WooCommerce overrides */
.woocommerce .price      { color: var(--hkm-emerald); font-weight: 700; }
.woocommerce .button     { background: var(--hkm-emerald) !important; color: var(--hkm-bg) !important; border-radius: var(--hkm-r-sm) !important; font-weight: 600 !important; border: none !important; transition: var(--hkm-trans) !important; }
.woocommerce .button:hover { background: var(--hkm-emerald-h) !important; }
.woocommerce-message       { background: var(--hkm-emerald-dim); border: 1px solid rgba(16,185,129,.3); border-radius: var(--hkm-r-md); color: var(--hkm-text); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.woocommerce-error         { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: var(--hkm-r-md); color: #f87171; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }

/* ============================================================
   §20 — BLOG & ARCHIVE
   ============================================================ */

.hkm-posts-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap:                   2rem;
	margin-bottom:         3rem;
}

.hkm-post-card { overflow: hidden; }

.hkm-post-card__thumb { display: block; overflow: hidden; aspect-ratio: 3/2; }
.hkm-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.hkm-post-card:hover .hkm-post-card__thumb img { transform: scale(1.04); }

.hkm-post-card__body    { padding: 1.5rem; }
.hkm-post-card__cat     { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hkm-emerald); text-decoration: none; display: block; margin-bottom: .5rem; }
.hkm-post-card__title   { font-family: var(--hkm-font-head); font-size: 1.1rem; font-weight: 700; margin-bottom: .6rem; }
.hkm-post-card__title a { color: var(--hkm-text); text-decoration: none; transition: color .2s; }
.hkm-post-card__title a:hover { color: var(--hkm-emerald); }
.hkm-post-card__excerpt { font-size: .88rem; color: var(--hkm-muted); line-height: 1.6; margin-bottom: .75rem; }

/* Post meta */
.hkm-post-meta         { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin: .75rem 0; }
.hkm-post-meta > *     { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--hkm-muted); }
.hkm-post-meta svg     { color: var(--hkm-emerald); flex-shrink: 0; }

/* ============================================================
   §21 — SINGLE POST
   ============================================================ */

.hkm-single__header  { padding: 3rem 0 2rem; }
.hkm-single__title   { font-family: var(--hkm-font-head); font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.03em; color: var(--hkm-text); margin: .75rem 0; }
.hkm-single__thumb   { margin: 2rem 0; border-radius: var(--hkm-r-lg); overflow: hidden; }
.hkm-single__thumb img { width: 100%; display: block; }
.hkm-single__body    { margin-top: 2rem; }
.hkm-single__tags    { margin-top: 2.5rem; }

/* Author box */
.hkm-author-box       { display: flex; gap: 1.5rem; align-items: flex-start; padding: 2rem; margin-top: 3rem; }
.hkm-author-box__avatar img { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; }
.hkm-author-box__name { font-family: var(--hkm-font-head); font-size: 1rem; font-weight: 700; color: var(--hkm-text); margin-bottom: .4rem; }
.hkm-author-box__bio  { font-size: .88rem; color: var(--hkm-muted); margin-bottom: .75rem; }

/* Post nav */
.hkm-post-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--hkm-border); }
.hkm-post-nav__item a { color: var(--hkm-muted); font-size: .9rem; font-weight: 500; text-decoration: none; transition: color .2s; }
.hkm-post-nav__item a:hover { color: var(--hkm-emerald); }
.hkm-post-nav__item--next { text-align: right; }

/* ============================================================
   §22 — SEARCH & 404
   ============================================================ */

/* Empty state (shared) */
.hkm-empty-state {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             1.25rem;
	padding:         6rem 2rem;
	text-align:      center;
	color:           var(--hkm-muted);
}

.hkm-empty-state svg { opacity: .3; }
.hkm-empty-state h2  { color: var(--hkm-text); font-size: 1.5rem; }

/* 404 */
.hkm-404 {
	display:         flex;
	align-items:     center;
	justify-content: center;
	min-height:      90vh;
	text-align:      center;
	padding:         6rem 2rem;
}

.hkm-404__inner {
	position:       relative;
	max-width:      560px;
	margin:         0 auto;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            1.25rem;
}

.hkm-404__glow {
	position:   absolute;
	top:        -80px; left: 50%;
	transform:  translateX(-50%);
	width:      400px; height: 300px;
	background: radial-gradient(ellipse, rgba(16,185,129,.1) 0%, transparent 70%);
	pointer-events: none;
}

.hkm-404__code {
	font-family:    var(--hkm-font-head);
	font-size:      clamp(6rem, 18vw, 12rem);
	font-weight:    900;
	line-height:    1;
	letter-spacing: -.05em;
	background:     linear-gradient(135deg, var(--hkm-emerald) 0%, var(--hkm-cyan) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hkm-404__title { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; color: var(--hkm-text); }
.hkm-404__desc  { color: var(--hkm-muted); max-width: 400px; }
.hkm-404__actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   §23 — SIDEBAR & WIDGETS
   ============================================================ */

.hkm-sidebar {
	position: sticky;
	top:      calc(var(--hkm-nav-h, 68px) + 1.5rem);
}

.hkm-widget {
	background:    var(--hkm-card);
	border:        1px solid var(--hkm-border);
	border-radius: var(--hkm-r-md);
	padding:       1.5rem;
	margin-bottom: 1.5rem;
}

.hkm-widget:last-child { margin-bottom: 0; }

.hkm-widget__title {
	font-family:    var(--hkm-font-head);
	font-size:      .72rem;
	font-weight:    700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color:          var(--hkm-emerald);
	margin-bottom:  1rem;
	padding-bottom: .75rem;
	border-bottom:  1px solid var(--hkm-border);
}

.hkm-widget ul { list-style: none; }
.hkm-widget ul li { padding: .4rem 0; border-bottom: 1px solid var(--hkm-border); }
.hkm-widget ul li:last-child { border-bottom: none; }

.hkm-widget ul li a {
	color:           var(--hkm-muted);
	font-size:       .88rem;
	text-decoration: none;
	transition:      color .2s;
	display:         flex;
	justify-content: space-between;
	align-items:     center;
}

.hkm-widget ul li a:hover { color: var(--hkm-emerald); }

/* ============================================================
   §24 — COMMENTS
   ============================================================ */

.comments-area { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--hkm-border); }
.comments-title { font-family: var(--hkm-font-head); font-size: 1.5rem; font-weight: 700; margin-bottom: 2rem; color: var(--hkm-text); }

.comment-list   { list-style: none; }
.comment-body   { background: var(--hkm-card); border: 1px solid var(--hkm-border); border-radius: var(--hkm-r-md); padding: 1.5rem; margin-bottom: 1.25rem; }
.comment-meta   { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.comment-author img { border-radius: 50%; }
.comment-author .fn { font-weight: 700; font-size: .9rem; color: var(--hkm-text); font-style: normal; }
.comment-metadata a { font-size: .78rem; color: var(--hkm-muted); text-decoration: none; }
.comment-content p { color: var(--hkm-muted); font-size: .9rem; line-height: 1.7; }
.reply a { font-size: .8rem; color: var(--hkm-emerald); text-decoration: none; font-weight: 600; }
.children { padding-left: 2rem; }

/* Comment form */
.hkm-comment-form { margin-top: 3rem; }
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label { display: block; font-size: .8rem; font-weight: 600; color: var(--hkm-text); margin-bottom: .4rem; }

.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea {
	width:         100%;
	background:    rgba(255,255,255,.04);
	border:        1px solid var(--hkm-border-h);
	border-radius: var(--hkm-r-sm);
	padding:       .75rem 1rem;
	color:         var(--hkm-text);
	font-size:     .9rem;
	font-family:   var(--hkm-font-body);
	outline:       none;
	transition:    border-color .2s, box-shadow .2s;
}

.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--hkm-emerald);
	box-shadow:   0 0 0 3px var(--hkm-emerald-dim);
}

/* ============================================================
   §25 — FORMS (global)
   ============================================================ */

.hkm-native-form { display: flex; flex-direction: column; gap: 1.25rem; }
.hkm-native-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.hkm-native-form__field { display: flex; flex-direction: column; gap: .4rem; }

.hkm-native-form__field label {
	font-size:  .8rem;
	font-weight:600;
	color:      var(--hkm-text);
}

.hkm-native-form__field span[aria-hidden] { color: var(--hkm-emerald); }

.hkm-native-form__field input,
.hkm-native-form__field textarea,
.hkm-native-form__field select {
	background:    rgba(255,255,255,.04);
	border:        1px solid var(--hkm-border-h);
	border-radius: var(--hkm-r-sm);
	padding:       .75rem 1rem;
	color:         var(--hkm-text);
	font-size:     .9rem;
	font-family:   var(--hkm-font-body);
	outline:       none;
	transition:    border-color .2s, box-shadow .2s;
	resize:        vertical;
}

.hkm-native-form__field input:focus,
.hkm-native-form__field textarea:focus,
.hkm-native-form__field select:focus {
	border-color: var(--hkm-emerald);
	box-shadow:   0 0 0 3px var(--hkm-emerald-dim);
}

.hkm-native-form__field input::placeholder,
.hkm-native-form__field textarea::placeholder { color: var(--hkm-muted); }

.hkm-native-form__footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.hkm-native-form__status { font-size: .85rem; font-weight: 500; }
.hkm-native-form__status.is-success { color: var(--hkm-emerald); }
.hkm-native-form__status.is-error   { color: #f87171; }

/* Search form */
.hkm-search-form { display: flex; gap: .6rem; }

.hkm-search-form__input {
	flex:          1;
	background:    var(--hkm-card);
	border:        1px solid var(--hkm-border-h);
	border-radius: var(--hkm-r-sm);
	padding:       .75rem 1rem;
	color:         var(--hkm-text);
	font-size:     .9rem;
	outline:       none;
	transition:    border-color .2s;
}

.hkm-search-form__input:focus  { border-color: var(--hkm-emerald); }
.hkm-search-form__input::placeholder { color: var(--hkm-muted); }

/* ============================================================
   §26 — NAVIGATION (desktop/footer links)
   ============================================================ */

/* Page links (paginated content) */
.hkm-page-links {
	display:     flex;
	gap:         .5rem;
	margin:      2rem 0;
	flex-wrap:   wrap;
	align-items: center;
}

/* ============================================================
   §27 — PAGINATION
   ============================================================ */

.hkm-pagination {
	display:         flex;
	justify-content: center;
	gap:             .5rem;
	margin-top:      3rem;
	flex-wrap:       wrap;
}

.hkm-pagination .page-numbers,
.nav-links .page-numbers {
	display:         flex;
	align-items:     center;
	justify-content: center;
	min-width:       40px;
	height:          40px;
	padding:         0 .75rem;
	background:      var(--hkm-card);
	border:          1px solid var(--hkm-border);
	border-radius:   var(--hkm-r-sm);
	color:           var(--hkm-muted);
	font-size:       .88rem;
	font-weight:     600;
	text-decoration: none;
	transition:      all .2s;
}

.hkm-pagination .page-numbers:hover,
.nav-links .page-numbers:hover,
.hkm-pagination .current,
.nav-links .current {
	background:   var(--hkm-emerald-dim);
	border-color: rgba(16,185,129,.3);
	color:        var(--hkm-emerald);
}

.hkm-pagination .dots,
.nav-links .dots { background: transparent; border-color: transparent; }

/* ============================================================
   §28 — SOCIAL LINKS
   ============================================================ */

.hkm-social { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.hkm-social__link {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	border-radius:   var(--hkm-r-sm);
	background:      var(--hkm-emerald-dim);
	color:           var(--hkm-muted);
	border:          1px solid var(--hkm-border);
	transition:      all .2s;
	text-decoration: none;
}

.hkm-social__link:hover {
	color:        var(--hkm-emerald);
	border-color: rgba(16,185,129,.35);
	transform:    translateY(-2px);
}

/* ============================================================
   §29 — ANIMATIONS & REVEAL
   ============================================================ */

@keyframes hkmFadeUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0);    }
}

@keyframes hkmFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes hkmSlideLeft {
	from { opacity: 0; transform: translateX(24px); }
	to   { opacity: 1; transform: translateX(0);    }
}

@keyframes hkmScaleIn {
	from { opacity: 0; transform: scale(.92); }
	to   { opacity: 1; transform: scale(1);   }
}

.hkm-reveal {
	opacity:    0;
	transform:  translateY(28px);
	transition: opacity .65s ease, transform .65s ease;
}

.hkm-reveal.is-visible {
	opacity:   1;
	transform: translateY(0);
}

.hkm-reveal--d1 { transition-delay: .1s; }
.hkm-reveal--d2 { transition-delay: .2s; }
.hkm-reveal--d3 { transition-delay: .3s; }
.hkm-reveal--d4 { transition-delay: .4s; }
.hkm-reveal--d5 { transition-delay: .5s; }

/* Gradient text */
.hkm-grad-text {
	background:              linear-gradient(135deg, var(--hkm-emerald) 0%, var(--hkm-cyan) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip:         text;
}

/* ============================================================
   §30 — UTILITIES
   ============================================================ */

.hkm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

.hkm-text-center { text-align: center; }
.hkm-text-left   { text-align: left;   }
.hkm-text-right  { text-align: right;  }

.hkm-text-emerald { color: var(--hkm-emerald); }
.hkm-text-cyan    { color: var(--hkm-cyan);    }
.hkm-text-gold    { color: var(--hkm-gold);    }
.hkm-text-muted   { color: var(--hkm-muted);   }

.hkm-mt-0 { margin-top: 0; }
.hkm-mt-1 { margin-top: 1rem; }
.hkm-mt-2 { margin-top: 2rem; }
.hkm-mt-3 { margin-top: 3rem; }
.hkm-mb-0 { margin-bottom: 0; }
.hkm-mb-1 { margin-bottom: 1rem; }
.hkm-mb-2 { margin-bottom: 2rem; }
.hkm-mb-3 { margin-bottom: 3rem; }

.hkm-img { display: block; max-width: 100%; height: auto; }

/* ============================================================
   §31 — RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
	.hkm-bento__col-4 { grid-column: span 6; }
	.hkm-bento__col-3 { grid-column: span 6; }
}

@media (max-width: 900px) {
	.hkm-section { padding-left: 5%; padding-right: 5%; }
	.hkm-bento__col-4  { grid-column: span 6;  }
	.hkm-bento__col-8  { grid-column: span 12; }
	.hkm-bento__col-6  { grid-column: span 12; }
	.hkm-page-layout   { grid-template-columns: 1fr; }
	.hkm-contact-grid  { grid-template-columns: 1fr; }
	.hkm-about-story__grid  { grid-template-columns: 1fr; gap: 2.5rem; }
	.hkm-about-stats        { grid-template-columns: repeat(2,1fr); }
	.hkm-account-wrap       { grid-template-columns: 1fr; }
	.hkm-account-nav        { position: static; }
	.hkm-process::before    { display: none; }
	.hkm-pf-grid            { grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); }
	.hkm-hero__stats        { gap: 2rem; }
}

@media (max-width: 600px) {
	.hkm-section { padding-left: 1.25rem; padding-right: 1.25rem; }
	.hkm-bento__col-4,
	.hkm-bento__col-6,
	.hkm-bento__col-8  { grid-column: span 12; }
	.hkm-native-form__row { grid-template-columns: 1fr; }
	.hkm-author-box     { flex-direction: column; }
	.hkm-post-nav       { flex-direction: column; }
	.hkm-cta-box        { padding: 2.5rem 1.5rem; }
	.hkm-pf-grid        { grid-template-columns: 1fr; }
	.hkm-hero           { padding-bottom: 4rem; }
	.hkm-process        { grid-template-columns: 1fr; }
}

/* ============================================================
   §32 — PRINT
   ============================================================ */

@media print {
	.hkm-nav,
	.hkm-footer,
	.hkm-back-top,
	.hkm-mobile-menu,
	.hkm-search-modal { display: none !important; }

	body  { background: #fff; color: #000; }
	a     { text-decoration: underline; }
	h1, h2, h3 { page-break-after: avoid; }
	img   { max-width: 100% !important; }
	pre, blockquote { page-break-inside: avoid; }

	.hkm-content { max-width: 100%; }
	.hkm-card    { border: 1px solid #ddd; box-shadow: none; }
}