/* === FROM: custom-style.css === */
/* ============================================================
   majharulshagor.com — Apple-inspired Custom CSS
   Paste into: Appearance > Customize > Additional CSS
   ============================================================ */

/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* --- Design Tokens --- */
:root {
  --ms-white:        #FFFFFF;
  --ms-gray-bg:      #F5F5F7;
  --ms-text:         #1D1D1F;
  --ms-muted:        #6E6E73;
  --ms-accent:       #6366F1;
  --ms-accent-dark:  #4F46E5;
  --ms-black:        #000000;
  --ms-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ms-transition:   all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ms-radius-card:  20px;
  --ms-radius-btn:   980px;
}

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--ms-font);
  color: var(--ms-text);
  background: var(--ms-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Typography Override (Elementor) --- */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--ms-font) !important;
  color: var(--ms-text) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

p,
.elementor-widget-text-editor p {
  font-family: var(--ms-font) !important;
  color: var(--ms-muted) !important;
  line-height: 1.65 !important;
  font-size: 17px !important;
}

/* ============================================================
   NAVIGATION — Frosted Glass (Apple style)
   ============================================================ */

.site-header,
#masthead,
.elementor-location-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  transition: var(--ms-transition) !important;
}

.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item {
  font-family: var(--ms-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--ms-text) !important;
  letter-spacing: 0 !important;
  transition: var(--ms-transition) !important;
  opacity: 0.85;
}

.elementor-nav-menu a:hover,
.elementor-nav-menu--main .elementor-item:hover {
  color: var(--ms-accent) !important;
  opacity: 1;
}

/* ============================================================
   HERO SECTION
   Add CSS class "ms-hero" to the Elementor Section
   ============================================================ */

.ms-hero {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: var(--ms-white) !important;
  padding: 120px 24px 80px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle indigo glow background */
.ms-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 65% 35%, rgba(99,102,241,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 75%, rgba(139,92,246,0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.ms-hero .elementor-container {
  position: relative;
  z-index: 1;
}

/* Hero eyebrow label */
.ms-hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ms-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Hero title — use on an Elementor Heading widget */
.ms-hero-title .elementor-heading-title {
  font-size: clamp(52px, 8vw, 96px) !important;
  font-weight: 800 !important;
  color: var(--ms-text) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.0 !important;
  max-width: 900px;
  margin: 0 auto 28px;
}

/* Gradient word — wrap word in <span class="ms-gradient-text"> inside Heading HTML */
.ms-gradient-text {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A78BFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero subtitle */
.ms-hero-subtitle .elementor-heading-title,
.ms-hero-subtitle p {
  font-size: clamp(18px, 2.5vw, 22px) !important;
  color: var(--ms-muted) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: -0.01em !important;
  max-width: 580px;
  margin: 0 auto;
}

/* ============================================================
   BUTTONS — Apple Pill Style
   Add CSS class to Elementor Button widget
   ============================================================ */

/* Primary: ms-btn-primary */
.ms-btn-primary .elementor-button,
a.ms-btn-primary {
  background: var(--ms-accent) !important;
  color: #fff !important;
  font-family: var(--ms-font) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 14px 32px !important;
  border-radius: var(--ms-radius-btn) !important;
  border: none !important;
  transition: var(--ms-transition) !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25) !important;
}

.ms-btn-primary .elementor-button:hover {
  background: var(--ms-accent-dark) !important;
  transform: scale(1.02) !important;
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.40) !important;
}

/* Secondary: ms-btn-secondary */
.ms-btn-secondary .elementor-button,
a.ms-btn-secondary {
  background: transparent !important;
  color: var(--ms-accent) !important;
  font-family: var(--ms-font) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 14px 32px !important;
  border-radius: var(--ms-radius-btn) !important;
  border: 1.5px solid var(--ms-accent) !important;
  transition: var(--ms-transition) !important;
  letter-spacing: -0.01em !important;
}

.ms-btn-secondary .elementor-button:hover {
  background: var(--ms-accent) !important;
  color: #fff !important;
  transform: scale(1.02) !important;
}

/* ============================================================
   WHAT I DO — 3 Service Cards
   Add CSS class "ms-cards-section" to Section
   Add CSS class "ms-card" to each Column's inner div
   ============================================================ */

.ms-cards-section {
  background: var(--ms-gray-bg) !important;
  padding: 120px 24px !important;
}

.ms-card {
  background: var(--ms-white) !important;
  border-radius: var(--ms-radius-card) !important;
  padding: 48px 36px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: var(--ms-transition) !important;
  height: 100% !important;
}

.ms-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.09) !important;
}

.ms-card-icon {
  font-size: 44px;
  margin-bottom: 24px;
  display: block;
}

.ms-card .elementor-heading-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 12px !important;
}

/* ============================================================
   SECTION SHARED STYLES
   ============================================================ */

.ms-section {
  padding: 120px 0 !important;
}

.ms-section-dark {
  background: var(--ms-black) !important;
  padding: 120px 24px !important;
}

.ms-section-dark .elementor-heading-title,
.ms-section-dark h1,
.ms-section-dark h2,
.ms-section-dark h3 {
  color: #FFFFFF !important;
}

.ms-section-dark p {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Eyebrow label (small uppercase label above headings) */
.ms-eyebrow .elementor-heading-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ms-accent) !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* Large section heading */
.ms-section-heading .elementor-heading-title {
  font-size: clamp(36px, 5vw, 56px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

/* ============================================================
   DIVIDER / SEPARATOR
   ============================================================ */

.ms-divider {
  width: 48px;
  height: 3px;
  background: var(--ms-accent);
  border-radius: 2px;
  margin: 20px auto 0;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .ms-hero {
    padding: 100px 20px 60px !important;
    min-height: 100svh !important;
  }

  .ms-cards-section {
    padding: 80px 20px !important;
  }

  .ms-card {
    padding: 36px 24px !important;
    margin-bottom: 16px;
  }

  .ms-section,
  .ms-section-dark {
    padding: 80px 20px !important;
  }
}


/* === FROM: hero-section.html === */
/* Self-contained hero styles — works without any external CSS */
.ms-hero-block {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  background: #FFFFFF;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Background glow */
.ms-hero-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 65% 35%, rgba(99,102,241,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 75%, rgba(139,92,246,0.05) 0%, transparent 60%);
  pointer-events: none;
}

/* Eyebrow label */
.ms-label {
  position: relative;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #6366F1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 28px;
  padding: 8px 20px;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 980px;
  background: rgba(99,102,241,0.05);
}

/* Main heading */
.ms-h1 {
  position: relative;
  font-size: clamp(48px, 8vw, 92px);
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.04em;
  line-height: 1.0;
  margin: 0 0 28px;
  max-width: 860px;
}

/* Gradient on key word */
.ms-gradient {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A78BFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtitle */
.ms-sub {
  position: relative;
  font-size: clamp(17px, 2.2vw, 21px);
  color: #6E6E73;
  font-weight: 400;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 52px;
  letter-spacing: -0.01em;
}

/* Button group */
.ms-btns {
  position: relative;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Base button */
.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 14px 32px;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Primary CTA */
.ms-btn--primary {
  background: #6366F1;
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 20px rgba(99,102,241,0.28);
}
.ms-btn--primary:hover {
  background: #4F46E5;
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(99,102,241,0.42);
  color: #FFFFFF;
  text-decoration: none;
}

/* Secondary CTA */
.ms-btn--secondary {
  background: transparent;
  color: #6366F1;
  border: 1.5px solid #6366F1;
}
.ms-btn--secondary:hover {
  background: #6366F1;
  color: #FFFFFF;
  transform: scale(1.02);
  text-decoration: none;
}

/* Scroll indicator */
.ms-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  color: #6E6E73;
  opacity: 0.5;
  animation: ms-bounce 2s ease-in-out infinite;
}

@keyframes ms-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* Responsive */
@media (max-width: 640px) {
  .ms-hero-block {
    padding: 100px 20px 60px;
    min-height: 100svh;
  }
  .ms-btns {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .ms-btn {
    width: 100%;
    max-width: 280px;
  }
}

/* === FROM: what-i-do-section.html === */
.wid-section {
  background: #F5F5F7;
  padding: 120px 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Header */
.wid-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 72px;
}

.wid-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #6366F1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding: 6px 16px;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 980px;
  background: rgba(99,102,241,0.06);
}

.wid-title {
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 20px;
}

.wid-subtitle {
  font-size: 18px;
  color: #6E6E73;
  line-height: 1.6;
  margin: 0;
  font-weight: 400;
}

/* Grid */
.wid-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1160px;
  margin: 0 auto;
}

/* Card base */
.wid-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 48px 36px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.wid-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.09);
}

/* Accent card (middle — stands out) */
.wid-card--accent {
  background: linear-gradient(145deg, #6366F1 0%, #7C3AED 100%);
  border: none;
}

.wid-card--accent:hover {
  box-shadow: 0 24px 60px rgba(99, 102, 241, 0.35);
}

/* Card icon */
.wid-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.08);
  border-radius: 14px;
  margin-bottom: 28px;
  flex-shrink: 0;
}

.wid-card--accent .wid-card__icon {
  background: rgba(255, 255, 255, 0.15);
}

/* Card title */
.wid-card__title {
  font-size: 22px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 14px;
}

.wid-card__title--white {
  color: #FFFFFF;
}

/* Card text */
.wid-card__text {
  font-size: 15px;
  color: #6E6E73;
  line-height: 1.65;
  margin: 0 0 32px;
  flex-grow: 1;
}

.wid-card__text--white {
  color: rgba(255, 255, 255, 0.72);
}

/* Card link */
.wid-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #6366F1;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: all 0.25s ease;
  margin-top: auto;
}

.wid-card__link:hover {
  gap: 10px;
  color: #4F46E5;
  text-decoration: none;
}

.wid-card__link--white {
  color: rgba(255, 255, 255, 0.85);
}

.wid-card__link--white:hover {
  color: #FFFFFF;
}

/* Responsive */
@media (max-width: 900px) {
  .wid-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .wid-card--accent {
    order: -1;
  }
}

@media (max-width: 640px) {
  .wid-section {
    padding: 80px 20px;
  }

  .wid-header {
    margin-bottom: 48px;
  }

  .wid-card {
    padding: 36px 28px;
  }
}

/* === FROM: featured-work-section.html === */
.fw-section {
  background: #FFFFFF;
  padding: 120px 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.fw-inner {
  max-width: 1160px;
  margin: 0 auto;
}

/* Header */
.fw-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 72px;
}

.fw-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #6366F1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding: 6px 16px;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 980px;
  background: rgba(99,102,241,0.06);
}

.fw-title {
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 20px;
}

.fw-subtitle {
  font-size: 18px;
  color: #6E6E73;
  line-height: 1.6;
  margin: 0;
}

/* Grid */
.fw-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
}

/* Large card spans both columns */
.fw-card--large {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

.fw-card--large:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,0.09);
  transform: translateY(-4px);
}

.fw-card--large .fw-card__image {
  height: 360px;
}

.fw-card--large .fw-card__body {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #FFFFFF;
}

/* Small cards */
.fw-card--small {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
}

.fw-card--small:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,0.09);
  transform: translateY(-4px);
}

.fw-card--small .fw-card__image {
  height: 220px;
}

.fw-card--small .fw-card__body {
  padding: 32px 32px 36px;
  background: #FFFFFF;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Image container */
.fw-card__image {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* CSS Placeholder images — replace with <img> tags */
.fw-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

.fw-card:hover .fw-placeholder {
  transform: scale(1.03);
}

.fw-placeholder--1 {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}
.fw-placeholder--2 {
  background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #21262d 100%);
}
.fw-placeholder--3 {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
}

.fw-placeholder__label {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}

/* Overlay on hover with visit link */
.fw-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fw-card:hover .fw-card__overlay {
  opacity: 1;
}

.fw-card__visit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 10px 22px;
  border-radius: 980px;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: all 0.25s ease;
}

.fw-card__visit:hover {
  background: rgba(255,255,255,0.25);
  text-decoration: none;
  color: #FFFFFF;
}

/* Card body content */
.fw-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.fw-tag {
  font-size: 11px;
  font-weight: 600;
  color: #6366F1;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.18);
  padding: 4px 12px;
  border-radius: 980px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fw-card__title {
  font-size: 22px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 12px;
}

.fw-card__text {
  font-size: 15px;
  color: #6E6E73;
  line-height: 1.65;
  margin: 0 0 28px;
  flex-grow: 1;
}

.fw-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #6366F1;
  text-decoration: none;
  transition: gap 0.25s ease, color 0.25s ease;
  margin-top: auto;
}

.fw-card__link:hover {
  gap: 10px;
  color: #4F46E5;
  text-decoration: none;
}

/* Bottom CTA */
.fw-footer {
  text-align: center;
  margin-top: 56px;
}

.fw-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #6366F1;
  text-decoration: none;
  padding: 14px 32px;
  border: 1.5px solid rgba(99,102,241,0.3);
  border-radius: 980px;
  transition: all 0.3s ease;
}

.fw-all-link:hover {
  background: #6366F1;
  color: #FFFFFF;
  border-color: #6366F1;
  text-decoration: none;
  gap: 12px;
}

/* Responsive */
@media (max-width: 860px) {
  .fw-card--large {
    grid-template-columns: 1fr;
  }
  .fw-card--large .fw-card__image {
    height: 260px;
  }
  .fw-card--large .fw-card__body {
    padding: 32px 28px 36px;
  }
}

@media (max-width: 640px) {
  .fw-section { padding: 80px 20px; }
  .fw-header  { margin-bottom: 48px; }

  .fw-grid {
    grid-template-columns: 1fr;
  }
  .fw-card--large {
    grid-column: 1;
  }
}

/* === FROM: about-snippet-section.html === */
.ab-section {
  background: #F5F5F7;
  padding: 120px 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ab-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ---- Left: Content ---- */
.ab-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #6366F1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding: 6px 16px;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 980px;
  background: rgba(99,102,241,0.06);
}

.ab-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0 0 28px;
}

.ab-title__accent {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A78BFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ab-text {
  font-size: 17px;
  color: #6E6E73;
  line-height: 1.7;
  margin: 0 0 20px;
}

.ab-text strong {
  color: #1D1D1F;
  font-weight: 600;
}

/* Stats */
.ab-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 36px 0 40px;
  padding: 28px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.ab-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ab-stat__number {
  font-size: 32px;
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.04em;
  line-height: 1;
}

.ab-stat__label {
  font-size: 12px;
  color: #6E6E73;
  line-height: 1.4;
  font-weight: 400;
  max-width: 100px;
}

.ab-stat__divider {
  width: 1px;
  height: 40px;
  background: rgba(0,0,0,0.10);
  flex-shrink: 0;
}

/* Button */
.ab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  background: #6366F1;
  padding: 14px 32px;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 4px 20px rgba(99,102,241,0.28);
  letter-spacing: -0.01em;
}

.ab-btn:hover {
  background: #4F46E5;
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(99,102,241,0.42);
  color: #FFFFFF;
  text-decoration: none;
  gap: 12px;
}

/* ---- Right: Photo ---- */
.ab-photo-wrap {
  position: relative;
}

.ab-photo-frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #1D1D1F;
}

/* Actual photo — uncomment when you have it */
.ab-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Placeholder shown until photo is added */
.ab-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: rgba(255,255,255,0.35);
  font-size: 13px;
  letter-spacing: 0.04em;
  font-family: 'Inter', sans-serif;
}

/* Available badge — top right */
.ab-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px 16px;
  border-radius: 980px;
  font-size: 12px;
  font-weight: 500;
  color: #FFFFFF;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

.ab-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.3);
  animation: ab-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes ab-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(34,197,94,0.3); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0.15); }
}

/* AI floating card — bottom left */
.ab-float-card {
  position: absolute;
  bottom: 24px;
  left: -28px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.14);
  font-family: 'Inter', sans-serif;
}

.ab-float-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ab-float-card__title {
  font-size: 13px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.01em;
}

.ab-float-card__sub {
  font-size: 11px;
  color: #6E6E73;
  font-weight: 400;
}

/* Background glow */
.ab-glow {
  position: absolute;
  top: 10%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Responsive */
@media (max-width: 900px) {
  .ab-inner {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .ab-photo-wrap {
    order: -1;
  }

  .ab-photo-frame {
    aspect-ratio: 4 / 3;
    max-height: 360px;
  }

  .ab-float-card {
    left: 16px;
    bottom: 16px;
  }
}

@media (max-width: 640px) {
  .ab-section { padding: 80px 20px; }

  .ab-stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .ab-stat__divider { display: none; }

  .ab-float-card { display: none; }
}

/* === FROM: blog-preview-section.html === */
.bp-section {
  background: #F5F5F7;
  padding: 120px 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.bp-inner {
  max-width: 1160px;
  margin: 0 auto;
}

/* Header row */
.bp-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 56px;
  gap: 24px;
  flex-wrap: wrap;
}

.bp-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #6366F1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding: 6px 16px;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 980px;
  background: rgba(99,102,241,0.06);
}

.bp-title {
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

.bp-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #6366F1;
  text-decoration: none;
  padding: 12px 24px;
  border: 1.5px solid rgba(99,102,241,0.3);
  border-radius: 980px;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.bp-all-link:hover {
  background: #6366F1;
  color: #FFFFFF;
  border-color: #6366F1;
  text-decoration: none;
  gap: 12px;
}

/* Grid layout: featured + side-by-side small */
.bp-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
}

.bp-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Post card base */
.bp-post {
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
}

.bp-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.09);
}

/* Featured post image */
.bp-post--featured .bp-post__image {
  height: 280px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.bp-post--featured .bp-post__body {
  padding: 36px 36px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Small post layout: horizontal */
.bp-post--small {
  flex-direction: row;
}

.bp-post__image--small {
  width: 140px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.bp-post--small .bp-post__body {
  padding: 24px 24px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Category badge */
.bp-post__cat {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 11px;
  font-weight: 600;
  color: #FFFFFF;
  background: rgba(99,102,241,0.85);
  backdrop-filter: blur(8px);
  padding: 5px 12px;
  border-radius: 980px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 1;
}

/* Image placeholders */
.bp-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.bp-post:hover .bp-img {
  transform: scale(1.04);
}

.bp-img-placeholder {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.bp-post:hover .bp-img-placeholder {
  transform: scale(1.04);
}

.bp-img-placeholder--1 {
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  min-height: 280px;
}
.bp-img-placeholder--2 {
  background: linear-gradient(160deg, #1e1b4b 0%, #2e1065 100%);
  min-height: 120px;
}
.bp-img-placeholder--3 {
  background: linear-gradient(160deg, #0c4a6e 0%, #075985 100%);
  min-height: 120px;
}

/* Post meta */
.bp-post__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.bp-post__date,
.bp-post__read {
  font-size: 12px;
  color: #6E6E73;
  font-weight: 400;
}

.bp-post__date::after {
  content: '·';
  margin-left: 12px;
}

/* Post title */
.bp-post__title {
  font-size: 20px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 14px;
  flex-grow: 0;
}

.bp-post__title--sm {
  font-size: 16px;
}

.bp-post__title-link {
  color: #1D1D1F;
  text-decoration: none;
  transition: color 0.25s ease;
}

.bp-post__title-link:hover {
  color: #6366F1;
  text-decoration: none;
}

/* Excerpt (featured only) */
.bp-post__excerpt {
  font-size: 15px;
  color: #6E6E73;
  line-height: 1.65;
  margin: 0 0 28px;
  flex-grow: 1;
}

/* Read link */
.bp-post__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6366F1;
  text-decoration: none;
  transition: gap 0.25s ease, color 0.25s ease;
  margin-top: auto;
}

.bp-post__link:hover {
  gap: 10px;
  color: #4F46E5;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 860px) {
  .bp-grid {
    grid-template-columns: 1fr;
  }

  .bp-side {
    flex-direction: row;
  }

  .bp-post--small {
    flex-direction: column;
    flex: 1;
  }

  .bp-post__image--small {
    width: 100%;
    height: 160px;
  }
}

@media (max-width: 640px) {
  .bp-section { padding: 80px 20px; }

  .bp-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
  }

  .bp-side {
    flex-direction: column;
  }

  .bp-post--small {
    flex-direction: row;
  }

  .bp-post__image--small {
    width: 120px;
    height: auto;
  }
}

/* === FROM: cta-strip.html === */
.cta-section {
  position: relative;
  background: #000000;
  padding: 120px 24px;
  text-align: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Subtle grid background */
.cta-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Glow orb */
.cta-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* Inner container */
.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

/* Eyebrow */
.cta-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #6366F1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 28px;
  padding: 6px 16px;
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: 980px;
  background: rgba(99,102,241,0.08);
}

/* Main heading */
.cta-title {
  font-size: clamp(44px, 7vw, 80px);
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.04em;
  line-height: 1.0;
  margin: 0 0 28px;
}

.cta-title__accent {
  background: linear-gradient(135deg, #6366F1 0%, #A78BFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtitle */
.cta-sub {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.50);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto 52px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Button group */
.cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

/* Base button */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 15px 34px;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Primary */
.cta-btn--primary {
  background: #6366F1;
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 24px rgba(99,102,241,0.4);
}
.cta-btn--primary:hover {
  background: #4F46E5;
  transform: scale(1.03);
  box-shadow: 0 8px 40px rgba(99,102,241,0.55);
  color: #FFFFFF;
  text-decoration: none;
}

/* Ghost */
.cta-btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.75);
  border: 1.5px solid rgba(255,255,255,0.2);
}
.cta-btn--ghost:hover {
  border-color: rgba(255,255,255,0.5);
  color: #FFFFFF;
  transform: scale(1.02);
  text-decoration: none;
}

/* Social row */
.cta-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.cta-socials__label {
  font-size: 13px;
  color: rgba(255,255,255,0.30);
  letter-spacing: 0.04em;
}

.cta-socials__links {
  display: flex;
  gap: 4px;
}

.cta-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: rgba(255,255,255,0.40);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.25s ease;
  text-decoration: none;
}

.cta-social-link--inactive { opacity: 0.3; cursor: default; pointer-events: none; }
.cta-social-link:hover {
  color: #FFFFFF;
  background: rgba(99,102,241,0.20);
  border-color: rgba(99,102,241,0.4);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Responsive */
@media (max-width: 640px) {
  .cta-section {
    padding: 80px 20px;
  }

  .cta-btns {
    flex-direction: column;
    align-items: center;
  }

  .cta-btn {
    width: 100%;
    max-width: 280px;
  }

  .cta-socials {
    flex-direction: column;
    gap: 16px;
  }
}

/* === FROM: footer.html === */
/* ---- Footer shell ---- */
.ft-footer {
  background: #111111;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- Shared container ---- */
.ft-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Top section ---- */
.ft-top {
  padding: 80px 0 72px;
}

.ft-inner:not(.ft-inner--bottom) {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}

/* ---- Brand ---- */
.ft-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 20px;
}

.ft-logo__ms {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.ft-logo__name {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.ft-brand__tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.38);
  line-height: 1.65;
  margin: 0 0 28px;
  font-weight: 400;
}

/* ---- Social icons ---- */
.ft-socials {
  display: flex;
  gap: 8px;
}

.ft-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: all 0.25s ease;
}

.ft-social:hover {
  background: rgba(99,102,241,0.18);
  border-color: rgba(99,102,241,0.35);
  color: #FFFFFF;
  transform: translateY(-2px);
  text-decoration: none;
}

/* ---- Nav columns ---- */
.ft-nav__heading {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.30);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.ft-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ft-nav__link {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s ease;
  line-height: 1;
}

.ft-nav__link:hover {
  color: #FFFFFF;
  text-decoration: none;
}

/* ---- Newsletter ---- */
.ft-newsletter__text {
  font-size: 13px;
  color: rgba(255,255,255,0.40);
  line-height: 1.6;
  margin: 0 0 20px;
  font-weight: 400;
}

.ft-form__row {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.ft-form__row:focus-within {
  border-color: rgba(99,102,241,0.50);
  background: rgba(255,255,255,0.08);
}

.ft-form__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 13px 16px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  min-width: 0;
}

.ft-form__input::placeholder {
  color: rgba(255,255,255,0.25);
}

.ft-form__btn {
  background: #6366F1;
  border: none;
  color: #FFFFFF;
  padding: 0 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
  flex-shrink: 0;
}

.ft-form__btn:hover {
  background: #4F46E5;
}

.ft-form__success {
  font-size: 13px;
  color: #22c55e;
  margin: 12px 0 0;
  display: none;
  font-weight: 500;
}

.ft-form__success.ft-visible {
  display: block;
}

/* ---- Divider ---- */
.ft-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 0 24px;
  max-width: calc(1160px - 0px);
  margin-left: auto;
  margin-right: auto;
}

/* ---- Bottom bar ---- */
.ft-bottom {
  padding: 24px 0;
}

.ft-inner--bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.ft-copy {
  font-size: 13px;
  color: rgba(255,255,255,0.28);
  margin: 0;
  font-weight: 400;
}

.ft-legal {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ft-legal__link {
  font-size: 13px;
  color: rgba(255,255,255,0.28);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 400;
}

.ft-legal__link:hover {
  color: rgba(255,255,255,0.70);
  text-decoration: none;
}

.ft-legal__dot {
  color: rgba(255,255,255,0.18);
  font-size: 13px;
}

/* Back to top */
.ft-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.45);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 980px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.ft-top-btn:hover {
  background: rgba(255,255,255,0.10);
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.20);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .ft-inner:not(.ft-inner--bottom) {
    grid-template-columns: 1fr 1fr;
    gap: 40px 48px;
  }

  .ft-brand {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0 40px;
  }

  .ft-logo {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  .ft-brand__tagline {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  .ft-socials {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 768px) {
  .ft-top {
    padding: 60px 0 52px;
  }

  .ft-inner:not(.ft-inner--bottom) {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ft-brand {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .ft-logo {
    margin-bottom: 16px;
  }

  .ft-brand__tagline {
    margin-bottom: 20px;
  }

  .ft-inner--bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .ft-top-btn {
    align-self: flex-end;
    margin-top: -48px;
  }
}

/* === FROM: about-page.html === */
/* ============================================================
   ABOUT PAGE — Shared tokens
   ============================================================ */
.ap-hero, .ap-story, .ap-skills, .ap-timeline, .ap-values, .ap-cta {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ap-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.ap-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #6366F1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding: 6px 16px;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 980px;
  background: rgba(99,102,241,0.06);
}

.ap-eyebrow--white {
  color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07);
}

.ap-section-title {
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 20px;
}

.ap-section-sub {
  font-size: 17px;
  color: #6E6E73;
  line-height: 1.65;
  margin: 0;
}

.ap-gradient {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A78BFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Shared buttons */
.ap-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 30px;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ap-btn--primary {
  background: #6366F1;
  color: #fff;
  box-shadow: 0 4px 20px rgba(99,102,241,0.28);
  border: none;
}
.ap-btn--primary:hover {
  background: #4F46E5;
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(99,102,241,0.42);
  color: #fff;
  text-decoration: none;
}
.ap-btn--ghost {
  background: transparent;
  color: #6366F1;
  border: 1.5px solid rgba(99,102,241,0.35);
}
.ap-btn--ghost:hover {
  background: #6366F1;
  color: #fff;
  border-color: #6366F1;
  text-decoration: none;
}
.ap-btn--white {
  background: #fff;
  color: #1D1D1F;
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.ap-btn--white:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0,0,0,0.20);
  color: #1D1D1F;
  text-decoration: none;
}
.ap-btn--ghost-white {
  background: transparent;
  color: rgba(255,255,255,0.75);
  border: 1.5px solid rgba(255,255,255,0.20);
}
.ap-btn--ghost-white:hover {
  border-color: rgba(255,255,255,0.55);
  color: #fff;
  text-decoration: none;
}

/* ============================================================
   HERO
   ============================================================ */
.ap-hero {
  background: #fff;
  padding: 100px 24px 80px;
  overflow: hidden;
}

.ap-hero__inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.ap-hero__title {
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 24px;
}

.ap-hero__sub {
  font-size: 18px;
  color: #6E6E73;
  line-height: 1.65;
  margin: 0 0 40px;
  font-weight: 400;
}

.ap-hero__btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.ap-hero__photo-wrap {
  position: relative;
}

.ap-hero__photo {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: top;
  border-radius: 24px;
  display: block;
}

.ap-photo-placeholder {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 24px;
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255,255,255,0.30);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.04em;
}

.ap-hero__badge {
  position: absolute;
  bottom: 28px;
  left: -24px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 980px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: #1D1D1F;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

.ap-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: ap-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes ap-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(34,197,94,0.3); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0.12); }
}

/* ============================================================
   MY STORY
   ============================================================ */
.ap-story {
  background: #F5F5F7;
  padding: 100px 24px;
}

.ap-story__header {
  max-width: 640px;
  margin-bottom: 64px;
}

.ap-story__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.ap-story__block {
  background: #fff;
  border-radius: 20px;
  padding: 40px 36px;
  border: 1px solid rgba(0,0,0,0.06);
}

.ap-story__icon {
  width: 48px;
  height: 48px;
  background: rgba(99,102,241,0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.ap-story__heading {
  font-size: 20px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  line-height: 1.2;
}

.ap-story__text {
  font-size: 15px;
  color: #6E6E73;
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   SKILLS
   ============================================================ */
.ap-skills {
  background: #fff;
  padding: 100px 24px;
}

.ap-skills__header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 64px;
}

.ap-skills__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ap-skill-group {
  background: #F5F5F7;
  border-radius: 20px;
  padding: 36px 32px;
}

.ap-skill-group__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1F;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}

.ap-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-tag {
  font-size: 13px;
  font-weight: 500;
  color: #1D1D1F;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  padding: 6px 14px;
  border-radius: 980px;
  letter-spacing: -0.01em;
  transition: all 0.2s ease;
}

.ap-tag:hover {
  border-color: #6366F1;
  color: #6366F1;
}

.ap-tag--accent {
  color: #6366F1;
  background: rgba(99,102,241,0.06);
  border-color: rgba(99,102,241,0.20);
}

.ap-tag--accent:hover {
  background: #6366F1;
  color: #fff;
}

/* ============================================================
   TIMELINE
   ============================================================ */
.ap-timeline {
  background: #F5F5F7;
  padding: 100px 24px;
}

.ap-timeline__header {
  max-width: 640px;
  margin-bottom: 64px;
}

.ap-tl-list {
  max-width: 760px;
  position: relative;
}

/* Vertical line */
.ap-tl-list::before {
  content: '';
  position: absolute;
  left: 88px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(0,0,0,0.10);
}

.ap-tl-item {
  display: grid;
  grid-template-columns: 80px 20px 1fr;
  gap: 0 24px;
  align-items: start;
  margin-bottom: 48px;
  position: relative;
}

.ap-tl-item:last-child { margin-bottom: 0; }

.ap-tl-item__year {
  font-size: 13px;
  font-weight: 600;
  color: #6E6E73;
  text-align: right;
  padding-top: 4px;
  letter-spacing: 0.02em;
}

.ap-tl-item--now .ap-tl-item__year {
  color: #6366F1;
}

.ap-tl-item__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.18);
  margin-top: 5px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.ap-tl-item__dot--pulse {
  background: #6366F1;
  border-color: #6366F1;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.15);
  animation: ap-tl-pulse 2s ease-in-out infinite;
}

@keyframes ap-tl-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(99,102,241,0.15); }
  50%       { box-shadow: 0 0 0 8px rgba(99,102,241,0.06); }
}

.ap-tl-item__title {
  font-size: 18px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  line-height: 1.2;
}

.ap-tl-item__text {
  font-size: 15px;
  color: #6E6E73;
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   VALUES
   ============================================================ */
.ap-values {
  background: #fff;
  padding: 100px 24px;
}

.ap-values__header {
  max-width: 640px;
  margin-bottom: 64px;
}

.ap-values__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(0,0,0,0.07);
  border-radius: 20px;
  overflow: hidden;
}

.ap-value {
  background: #fff;
  padding: 48px 44px;
  transition: background 0.25s ease;
}

.ap-value:hover {
  background: #F5F5F7;
}

.ap-value__num {
  font-size: 12px;
  font-weight: 700;
  color: #6366F1;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 16px;
}

.ap-value__title {
  font-size: 22px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  line-height: 1.2;
}

.ap-value__text {
  font-size: 15px;
  color: #6E6E73;
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   ABOUT CTA
   ============================================================ */
.ap-cta {
  background: #000;
  padding: 100px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ap-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(99,102,241,0.14) 0%, transparent 70%);
  pointer-events: none;
}

.ap-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.ap-cta__title {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 20px;
}

.ap-cta__sub {
  font-size: 17px;
  color: rgba(255,255,255,0.48);
  line-height: 1.65;
  margin: 0 0 44px;
}

.ap-cta__btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .ap-hero__inner   { grid-template-columns: 1fr; gap: 48px; }
  .ap-hero__photo-wrap { order: -1; }
  .ap-story__grid   { grid-template-columns: 1fr; }
  .ap-skills__cols  { grid-template-columns: 1fr; }
  .ap-values__grid  { grid-template-columns: 1fr; }
  .ap-hero__badge   { left: 16px; }
}

@media (max-width: 640px) {
  .ap-hero, .ap-story, .ap-skills,
  .ap-timeline, .ap-values, .ap-cta { padding-left: 20px; padding-right: 20px; padding-top: 72px; padding-bottom: 72px; }
  .ap-tl-list::before { left: 72px; }
  .ap-value { padding: 36px 28px; }
}

/* === FROM: contact-page.html === */
/* ============================================================
   CONTACT PAGE
   ============================================================ */
.cp-hero, .cp-section {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cp-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #6366F1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding: 6px 16px;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 980px;
  background: rgba(99,102,241,0.06);
}

.cp-gradient {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A78BFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero */
.cp-hero {
  background: #fff;
  padding: 100px 24px 72px;
  text-align: center;
}

.cp-hero__inner {
  max-width: 640px;
  margin: 0 auto;
}

.cp-hero__title {
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 24px;
}

.cp-hero__sub {
  font-size: 18px;
  color: #6E6E73;
  line-height: 1.65;
  margin: 0;
}

/* Main section */
.cp-section {
  background: #F5F5F7;
  padding: 80px 24px 100px;
}

.cp-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  align-items: start;
}

/* ---- Form ---- */
.cp-form-wrap {
  background: #fff;
  border-radius: 24px;
  padding: 52px 48px;
  border: 1px solid rgba(0,0,0,0.06);
}

.cp-form-title {
  font-size: 24px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.02em;
  margin: 0 0 36px;
}

.cp-form { display: flex; flex-direction: column; gap: 20px; }

.cp-form__row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cp-field { display: flex; flex-direction: column; gap: 8px; }

.cp-label {
  font-size: 13px;
  font-weight: 600;
  color: #1D1D1F;
  letter-spacing: -0.01em;
}

.cp-input {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #1D1D1F;
  background: #F5F5F7;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 13px 16px;
  outline: none;
  transition: all 0.25s ease;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

.cp-input::placeholder { color: #A1A1A6; }

.cp-input:focus {
  border-color: #6366F1;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.10);
}

.cp-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 44px;
}

.cp-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}

/* Submit button */
.cp-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #6366F1;
  color: #fff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 15px 32px;
  border-radius: 980px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  letter-spacing: -0.01em;
  box-shadow: 0 4px 20px rgba(99,102,241,0.28);
  align-self: flex-start;
}

.cp-submit:hover {
  background: #4F46E5;
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(99,102,241,0.42);
}

.cp-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

@keyframes cp-spin {
  to { transform: rotate(360deg); }
}
.cp-spin { animation: cp-spin 0.8s linear infinite; }

/* Alerts */
.cp-alert {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.cp-alert--success {
  background: rgba(34,197,94,0.08);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,0.20);
}

.cp-alert--error {
  background: rgba(239,68,68,0.07);
  color: #dc2626;
  border: 1px solid rgba(239,68,68,0.18);
}

.cp-alert.cp-show { display: flex; }

/* ---- Info sidebar ---- */
.cp-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cp-info__card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  border: 1px solid rgba(0,0,0,0.06);
}

.cp-info__heading {
  font-size: 14px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.cp-info__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

.cp-info__item:last-child { margin-bottom: 0; }

.cp-info__icon {
  width: 36px;
  height: 36px;
  background: rgba(99,102,241,0.07);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cp-info__label {
  font-size: 11px;
  font-weight: 600;
  color: #6E6E73;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 3px;
}

.cp-info__value {
  font-size: 14px;
  color: #1D1D1F;
  font-weight: 500;
  text-decoration: none;
  display: block;
}

a.cp-info__value:hover { color: #6366F1; }

.cp-info__value--green { color: #16a34a; }

.cp-avail-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  margin: 4px auto;
  animation: cp-avail 2s ease-in-out infinite;
}

@keyframes cp-avail {
  0%, 100% { box-shadow: 0 0 0 2px rgba(34,197,94,0.3); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0.12); }
}

/* Social links in sidebar */
.cp-socials { display: flex; flex-direction: column; gap: 8px; }

.cp-social {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.25s ease;
  background: transparent;
}

.cp-social:hover {
  background: #F5F5F7;
  text-decoration: none;
}

.cp-social__icon {
  width: 36px;
  height: 36px;
  background: rgba(99,102,241,0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366F1;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.cp-social:hover .cp-social__icon {
  background: #6366F1;
  color: #fff;
}

.cp-social__text { flex: 1; }

.cp-social__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1F;
  letter-spacing: -0.01em;
}

.cp-social__handle {
  display: block;
  font-size: 12px;
  color: #6E6E73;
  font-weight: 400;
}

.cp-social__arrow {
  color: #A1A1A6;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cp-social:hover .cp-social__arrow { opacity: 1; color: #6366F1; }
.cp-social--inactive { opacity: 0.35; cursor: default; pointer-events: none; }
.cp-social--inactive .cp-social__arrow { display: none; }

/* FAQ */
.cp-faq { display: flex; flex-direction: column; gap: 0; }

.cp-faq__item {
  border-bottom: 1px solid rgba(0,0,0,0.07);
  padding: 4px 0;
}

.cp-faq__item:last-child { border-bottom: none; }

.cp-faq__q {
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1F;
  cursor: pointer;
  padding: 14px 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.cp-faq__q::-webkit-details-marker { display: none; }

.cp-faq__q::after {
  content: '+';
  font-size: 18px;
  font-weight: 300;
  color: #6E6E73;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

details[open] .cp-faq__q::after {
  transform: rotate(45deg);
  color: #6366F1;
}

details[open] .cp-faq__q { color: #6366F1; }

.cp-faq__a {
  font-size: 14px;
  color: #6E6E73;
  line-height: 1.65;
  margin: 0 0 14px;
  padding-right: 24px;
}

/* Responsive */
@media (max-width: 900px) {
  .cp-inner {
    grid-template-columns: 1fr;
  }
  .cp-form__row--2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cp-hero { padding: 72px 20px 52px; }
  .cp-section { padding: 60px 20px 80px; }
  .cp-form-wrap { padding: 36px 24px; }
}

/* === FROM: portfolio-page.html === */
/* ============================================================
   PORTFOLIO PAGE
   ============================================================ */
.po-hero, .po-grid-section, .po-hire {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.po-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.po-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #6366F1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding: 6px 16px;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 980px;
  background: rgba(99,102,241,0.06);
}

.po-gradient {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A78BFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Hero ---- */
.po-hero {
  background: #fff;
  padding: 100px 24px 80px;
  text-align: center;
}

.po-hero__inner { max-width: 680px; margin: 0 auto; }

.po-hero__title {
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 24px;
}

.po-hero__sub {
  font-size: 18px;
  color: #6E6E73;
  line-height: 1.65;
  margin: 0 0 48px;
}

.po-hero__stats {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  background: #F5F5F7;
  border-radius: 16px;
  padding: 20px 40px;
}

.po-stat { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.po-stat__n { font-size: 28px; font-weight: 800; color: #1D1D1F; letter-spacing: -0.04em; line-height: 1; }
.po-stat__l { font-size: 12px; color: #6E6E73; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.po-stat__div { width: 1px; height: 36px; background: rgba(0,0,0,0.10); flex-shrink: 0; }

/* ---- Filters ---- */
.po-grid-section { background: #F5F5F7; padding: 80px 24px 100px; }

.po-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.po-filter {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #6E6E73;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  padding: 10px 22px;
  border-radius: 980px;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: -0.01em;
}

.po-filter:hover {
  color: #6366F1;
  border-color: rgba(99,102,241,0.30);
}

.po-filter--active {
  background: #6366F1;
  color: #fff;
  border-color: #6366F1;
  box-shadow: 0 4px 16px rgba(99,102,241,0.25);
}

/* ---- Project grid ---- */
.po-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Featured card spans full width */
.po-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
}

/* Base card */
.po-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
}

.po-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.09);
}

/* Hide/show for filter */
.po-card.po-hidden {
  display: none;
}

/* Image wrap */
.po-card__img-wrap {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.po-card--featured .po-card__img-wrap { min-height: 380px; }
.po-card:not(.po-card--featured) .po-card__img-wrap { height: 220px; }

/* Placeholder images — replace with <img class="po-img"> */
.po-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.po-card:hover .po-img { transform: scale(1.04); }

.po-img-ph {
  width: 100%;
  height: 100%;
  min-height: inherit;
  transition: transform 0.5s ease;
}
.po-card:hover .po-img-ph { transform: scale(1.04); }

.po-img-ph--1 { background: linear-gradient(145deg, #0f172a 0%, #1e3a5f 50%, #1d4ed8 100%); }
.po-img-ph--2 { background: linear-gradient(145deg, #1e1b4b 0%, #4338ca 60%, #7c3aed 100%); }
.po-img-ph--3 { background: linear-gradient(145deg, #0c4a6e 0%, #0369a1 50%, #38bdf8 100%); }
.po-img-ph--4 { background: linear-gradient(145deg, #431407 0%, #9a3412 50%, #ea580c 100%); }
.po-img-ph--5 { background: linear-gradient(145deg, #14532d 0%, #15803d 50%, #4ade80 100%); }
.po-img-ph--6 { background: linear-gradient(145deg, #1e1b4b 0%, #312e81 40%, #6366f1 100%); }

/* Hover overlay */
.po-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.52);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.po-card:hover .po-card__overlay { opacity: 1; }

.po-overlay-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 11px 22px;
  border-radius: 980px;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: background 0.2s ease;
}
.po-overlay-btn:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
  text-decoration: none;
}

/* Card body */
.po-card__body {
  padding: 32px 32px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.po-card--featured .po-card__body { padding: 44px 44px; justify-content: center; }

.po-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* Category badges */
.po-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 980px;
}
.po-cat--wp      { color: #2563eb; background: rgba(37,99,235,0.08); }
.po-cat--ai      { color: #7c3aed; background: rgba(124,58,237,0.08); }
.po-cat--content { color: #ea580c; background: rgba(234,88,12,0.08); }

.po-year { font-size: 12px; color: #A1A1A6; font-weight: 500; }

.po-card__title {
  font-size: 20px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 10px;
}

.po-card--featured .po-card__title { font-size: 26px; }

.po-card__desc {
  font-size: 14px;
  color: #6E6E73;
  line-height: 1.65;
  margin: 0 0 20px;
  flex-grow: 1;
}

.po-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}

.po-tag {
  font-size: 11px;
  font-weight: 500;
  color: #6366F1;
  background: rgba(99,102,241,0.07);
  border: 1px solid rgba(99,102,241,0.15);
  padding: 4px 10px;
  border-radius: 980px;
}

.po-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6366F1;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
  margin-top: auto;
}
.po-card__link:hover { gap: 10px; color: #4F46E5; text-decoration: none; }

/* Empty state */
.po-empty {
  text-align: center;
  padding: 60px 24px;
  color: #6E6E73;
  font-size: 16px;
}

/* ---- Hire strip ---- */
.po-hire {
  background: #fff;
  padding: 80px 24px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.po-hire__inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.po-hire__title {
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}

.po-hire__sub { font-size: 16px; color: #6E6E73; margin: 0; }

.po-hire__btns { display: flex; gap: 12px; flex-shrink: 0; }

.po-btn {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 28px;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.3s ease;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.po-btn--primary {
  background: #6366F1;
  color: #fff;
  box-shadow: 0 4px 16px rgba(99,102,241,0.25);
}
.po-btn--primary:hover { background: #4F46E5; transform: scale(1.02); color: #fff; text-decoration: none; }
.po-btn--ghost {
  background: transparent;
  color: #6366F1;
  border: 1.5px solid rgba(99,102,241,0.30);
}
.po-btn--ghost:hover { background: #6366F1; color: #fff; border-color: #6366F1; text-decoration: none; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .po-card--featured { grid-column: 1; grid-template-columns: 1fr; }
  .po-card--featured .po-card__img-wrap { min-height: 260px; }
  .po-card--featured .po-card__body { padding: 32px 28px 36px; }
}

@media (max-width: 640px) {
  .po-hero  { padding: 72px 20px 60px; }
  .po-grid-section { padding: 60px 20px 80px; }
  .po-grid  { grid-template-columns: 1fr; }
  .po-card--featured { grid-column: 1; }
  .po-hero__stats { flex-direction: column; gap: 16px; padding: 24px 28px; }
  .po-stat__div { width: 48px; height: 1px; }
  .po-hire { padding: 60px 20px; }
  .po-hire__inner { flex-direction: column; align-items: flex-start; }
}

/* === FROM: blog-post-template.html === */
/* ============================================================
   BLOG POST TYPOGRAPHY — applies to all WordPress post content
   ============================================================ */

/* Target WordPress post content area */
.entry-content,
.post-content,
.elementor-widget-theme-post-content .elementor-widget-container,
.wp-block-post-content {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: #1D1D1F;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  -webkit-font-smoothing: antialiased;
}

/* Headings */
.entry-content h2,
.post-content h2 {
  font-size: clamp(26px, 3.5vw, 34px);
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 56px 0 20px;
}

.entry-content h3,
.post-content h3 {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 44px 0 16px;
}

.entry-content h4,
.post-content h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.01em;
  margin: 36px 0 12px;
}

/* Paragraphs */
.entry-content p,
.post-content p {
  font-size: 18px;
  color: #3D3D3F;
  line-height: 1.78;
  margin: 0 0 24px;
}

/* Lead paragraph (first p after h1) */
.entry-content > p:first-of-type,
.post-content > p:first-of-type {
  font-size: 20px;
  color: #1D1D1F;
  font-weight: 400;
  line-height: 1.65;
}

/* Links */
.entry-content a,
.post-content a {
  color: #6366F1;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}
.entry-content a:hover,
.post-content a:hover {
  color: #4F46E5;
}

/* Bold */
.entry-content strong,
.post-content strong {
  font-weight: 700;
  color: #1D1D1F;
}

/* Lists */
.entry-content ul,
.entry-content ol,
.post-content ul,
.post-content ol {
  margin: 0 0 28px 0;
  padding-left: 28px;
}

.entry-content li,
.post-content li {
  font-size: 18px;
  color: #3D3D3F;
  line-height: 1.75;
  margin-bottom: 8px;
}

.entry-content ul li::marker { color: #6366F1; }
.entry-content ol li::marker { color: #6366F1; font-weight: 700; }

/* Blockquote */
.entry-content blockquote,
.post-content blockquote {
  border-left: 3px solid #6366F1;
  margin: 40px 0;
  padding: 20px 0 20px 32px;
  background: rgba(99,102,241,0.04);
  border-radius: 0 12px 12px 0;
}

.entry-content blockquote p,
.post-content blockquote p {
  font-size: 20px;
  font-style: italic;
  color: #1D1D1F;
  font-weight: 500;
  margin: 0;
  line-height: 1.6;
}

.entry-content blockquote cite,
.post-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  color: #6E6E73;
  font-style: normal;
  font-weight: 500;
}

/* Inline code */
.entry-content code,
.post-content code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
  font-size: 14px;
  background: rgba(99,102,241,0.08);
  color: #4F46E5;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(99,102,241,0.12);
}

/* Code blocks */
.entry-content pre,
.post-content pre {
  background: #0f0f1a;
  border-radius: 14px;
  padding: 28px 32px;
  overflow-x: auto;
  margin: 36px 0;
  border: 1px solid rgba(255,255,255,0.06);
}

.entry-content pre code,
.post-content pre code {
  font-size: 14px;
  background: none;
  color: #e2e8f0;
  padding: 0;
  border: none;
  border-radius: 0;
  line-height: 1.7;
}

/* Images */
.entry-content img,
.post-content img {
  border-radius: 14px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 36px auto;
}

.entry-content figure,
.post-content figure {
  margin: 36px 0;
}

.entry-content figcaption,
.post-content figcaption {
  text-align: center;
  font-size: 13px;
  color: #A1A1A6;
  margin-top: 10px;
  font-style: italic;
}

/* Horizontal rule */
.entry-content hr,
.post-content hr {
  border: none;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin: 56px 0;
}

/* Tables */
.entry-content table,
.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 15px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}

.entry-content th,
.post-content th {
  background: #F5F5F7;
  color: #1D1D1F;
  font-weight: 700;
  text-align: left;
  padding: 12px 16px;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.entry-content td,
.post-content td {
  padding: 12px 16px;
  color: #3D3D3F;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.entry-content tr:last-child td,
.post-content tr:last-child td {
  border-bottom: none;
}

/* Callout box — add class "bpt-callout" to a paragraph in WP editor */
.bpt-callout {
  background: rgba(99,102,241,0.06);
  border: 1px solid rgba(99,102,241,0.18);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 16px !important;
  color: #1D1D1F !important;
  line-height: 1.65 !important;
}

/* ============================================================
   POST HEADER
   ============================================================ */
.bpt-header {
  background: #fff;
  padding: 80px 24px 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.bpt-header__inner {
  max-width: 720px;
  margin: 0 auto;
}

.bpt-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #A1A1A6;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.bpt-breadcrumb__link {
  color: #6E6E73;
  text-decoration: none;
  transition: color 0.2s ease;
}
.bpt-breadcrumb__link:hover { color: #6366F1; text-decoration: none; }
.bpt-breadcrumb__current { color: #A1A1A6; }

.bpt-cat {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #6366F1;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.18);
  padding: 5px 14px;
  border-radius: 980px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.bpt-post-title {
  font-size: clamp(36px, 5.5vw, 56px);
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin: 0 0 20px;
}

.bpt-post-excerpt {
  font-size: 19px;
  color: #6E6E73;
  line-height: 1.6;
  margin: 0 0 36px;
  font-weight: 400;
}

.bpt-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 0;
  flex-wrap: wrap;
}

.bpt-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bpt-author__img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.bpt-author__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}

.bpt-author__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1F;
  letter-spacing: -0.01em;
}

.bpt-author__role {
  display: block;
  font-size: 12px;
  color: #A1A1A6;
  font-weight: 400;
}

.bpt-meta__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bpt-meta__item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #6E6E73;
  font-weight: 400;
}

.bpt-meta__dot { color: #C7C7CC; font-size: 13px; }

/* Featured image */
.bpt-featured-img {
  max-width: 720px;
  margin: 48px auto 56px;
  padding: 0 24px;
}

.bpt-feat-img {
  width: 100%;
  border-radius: 18px;
  display: block;
}

.bpt-feat-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 18px;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}

/* ============================================================
   POST FOOTER
   ============================================================ */
.bpt-post-footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 80px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Share bar */
.bpt-share {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.bpt-share__label {
  font-size: 13px;
  font-weight: 600;
  color: #6E6E73;
  white-space: nowrap;
}

.bpt-share__btns { display: flex; gap: 8px; flex-wrap: wrap; }

.bpt-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 980px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}

.bpt-share-btn--tw { background: #000; color: #fff; }
.bpt-share-btn--tw:hover { background: #333; color: #fff; text-decoration: none; }
.bpt-share-btn--fb { background: #1877F2; color: #fff; }
.bpt-share-btn--fb:hover { background: #1467D2; color: #fff; text-decoration: none; }
.bpt-share-btn--copy { background: #F5F5F7; color: #1D1D1F; }
.bpt-share-btn--copy:hover { background: #E8E8ED; }

/* Author bio */
.bpt-bio {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: #F5F5F7;
  border-radius: 20px;
  padding: 36px;
  margin-bottom: 40px;
}

.bpt-bio__img,
.bpt-bio__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bpt-bio__img { object-fit: cover; }

.bpt-bio__avatar {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  font-family: 'Inter', sans-serif;
}

.bpt-bio__written {
  font-size: 12px;
  font-weight: 600;
  color: #A1A1A6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 4px;
}

.bpt-bio__name {
  font-size: 18px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.bpt-bio__text {
  font-size: 15px;
  color: #6E6E73;
  line-height: 1.65;
  margin: 0 0 16px;
}

.bpt-bio__links { display: flex; gap: 16px; }

.bpt-bio__link {
  font-size: 13px;
  font-weight: 600;
  color: #6366F1;
  text-decoration: none;
  transition: color 0.2s ease;
}
.bpt-bio__link:hover { color: #4F46E5; text-decoration: none; }
.bpt-bio__link--inactive { opacity: 0.35; cursor: default; pointer-events: none; }

/* Post nav */
.bpt-postnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 56px;
}

.bpt-postnav__item {
  background: #F5F5F7;
  border-radius: 16px;
  padding: 20px 24px;
  text-decoration: none;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bpt-postnav__item:hover { background: #EBEBF0; transform: translateY(-2px); text-decoration: none; }

.bpt-postnav__item--next { text-align: right; }

.bpt-postnav__dir {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6E6E73;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bpt-postnav__item--next .bpt-postnav__dir { justify-content: flex-end; }

.bpt-postnav__title {
  font-size: 15px;
  font-weight: 600;
  color: #1D1D1F;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Related posts */
.bpt-related { margin-bottom: 56px; }

.bpt-related__heading {
  font-size: 20px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.bpt-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.bpt-related__card {
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.07);
  transition: all 0.25s ease;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.bpt-related__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  text-decoration: none;
}

.bpt-related__img {
  height: 120px;
}

.bpt-related__img--1 { background: linear-gradient(145deg, #0f172a 0%, #1d4ed8 100%); }
.bpt-related__img--2 { background: linear-gradient(145deg, #1e1b4b 0%, #7c3aed 100%); }
.bpt-related__img--3 { background: linear-gradient(145deg, #431407 0%, #ea580c 100%); }

.bpt-related__body { padding: 16px; }

.bpt-related__cat {
  font-size: 10px;
  font-weight: 700;
  color: #6366F1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 6px;
}

.bpt-related__title {
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1F;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.bpt-related__date { font-size: 12px; color: #A1A1A6; }

/* Newsletter CTA */
.bpt-nl {
  background: linear-gradient(145deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  border-radius: 20px;
  padding: 44px 40px;
  text-align: center;
  color: #fff;
}

.bpt-nl__icon {
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,0.12);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.bpt-nl__title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.bpt-nl__text {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  margin: 0 0 28px;
}

.bpt-nl__form { max-width: 400px; margin: 0 auto; }

.bpt-nl__row {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 12px;
  overflow: hidden;
}

.bpt-nl__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 13px 16px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  color: #fff;
  min-width: 0;
}
.bpt-nl__input::placeholder { color: rgba(255,255,255,0.40); }

.bpt-nl__btn {
  background: #fff;
  border: none;
  color: #4338ca;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 0 22px;
  cursor: pointer;
  transition: background 0.25s ease;
  white-space: nowrap;
}
.bpt-nl__btn:hover { background: #F0EFFE; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .entry-content,
  .post-content,
  .bpt-header,
  .bpt-featured-img,
  .bpt-post-footer { padding-left: 20px; padding-right: 20px; }

  .bpt-meta { flex-direction: column; align-items: flex-start; }
  .bpt-bio { flex-direction: column; gap: 16px; padding: 28px 24px; }
  .bpt-postnav { grid-template-columns: 1fr; }
  .bpt-related__grid { grid-template-columns: 1fr; }
  .bpt-nl { padding: 36px 24px; }
  .bpt-share { flex-direction: column; align-items: flex-start; }
}

/* === FROM: thank-you-page.html === */
/* ============================================================
   THANK YOU PAGE
   ============================================================ */
.ty-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background: #F5F5F7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px 48px;
  position: relative;
  overflow: hidden;
}

/* Background glow */
.ty-bg-glow {
  position: fixed;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(99,102,241,0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Subtle dot grid */
.ty-bg-grid {
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Main card */
.ty-card {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border-radius: 28px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 32px 80px rgba(0,0,0,0.08);
  padding: 56px 52px 48px;
  max-width: 600px;
  width: 100%;
  text-align: center;
}

/* ─── Animated checkmark ─── */
.ty-check {
  width: 72px;
  height: 72px;
  margin: 0 auto 28px;
}

.ty-check__circle { width: 72px; height: 72px; }

/* Outer ring — draws itself */
.ty-check__ring {
  stroke: #E8E8ED;
}

/* Filled ring — indigo, draws after ring */
.ty-check__fill {
  stroke: #6366F1;
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  stroke-linecap: round;
  transform-origin: center;
  transform: rotate(-90deg);
  animation: ty-ring 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

@keyframes ty-ring {
  to { stroke-dashoffset: 0; }
}

/* Tick — draws after ring */
.ty-check__tick {
  stroke: #6366F1;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: ty-tick 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.75s forwards;
}

@keyframes ty-tick {
  to { stroke-dashoffset: 0; }
}

/* Fade-in everything else after animations */
.ty-eyebrow,
.ty-title,
.ty-sub,
.ty-steps,
.ty-divider,
.ty-while,
.ty-explore,
.ty-social-row,
.ty-home-btn {
  animation: ty-fadein 0.5s ease 0.9s both;
}

@keyframes ty-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Eyebrow ─── */
.ty-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #6366F1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding: 5px 14px;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 980px;
  background: rgba(99,102,241,0.06);
}

/* ─── Heading ─── */
.ty-title {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 16px;
}

.ty-sub {
  font-size: 16px;
  color: #6E6E73;
  line-height: 1.65;
  margin: 0 0 36px;
}

.ty-sub strong {
  color: #1D1D1F;
  font-weight: 600;
}

/* ─── Steps ─── */
.ty-steps {
  text-align: left;
  background: #F5F5F7;
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.ty-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.ty-step__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.ty-step__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ty-step__text strong {
  font-size: 14px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.01em;
}

.ty-step__text span {
  font-size: 13px;
  color: #6E6E73;
  line-height: 1.5;
}

/* ─── Divider ─── */
.ty-divider {
  height: 1px;
  background: rgba(0,0,0,0.07);
  margin: 0 0 24px;
}

.ty-while {
  font-size: 13px;
  font-weight: 600;
  color: #A1A1A6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
}

/* ─── Explore cards ─── */
.ty-explore {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
  text-align: left;
}

.ty-explore-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.07);
  text-decoration: none;
  transition: all 0.25s ease;
  background: #fff;
}

.ty-explore-card:hover {
  background: #F5F5F7;
  border-color: rgba(99,102,241,0.20);
  transform: translateX(4px);
  text-decoration: none;
}

.ty-explore-card__icon {
  width: 40px;
  height: 40px;
  background: rgba(99,102,241,0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease;
}

.ty-explore-card:hover .ty-explore-card__icon {
  background: rgba(99,102,241,0.14);
}

.ty-explore-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ty-explore-card__text strong {
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1F;
  letter-spacing: -0.01em;
}

.ty-explore-card__text span {
  font-size: 12px;
  color: #A1A1A6;
}

.ty-explore-card__arrow {
  color: #C7C7CC;
  transition: color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.ty-explore-card:hover .ty-explore-card__arrow {
  color: #6366F1;
  transform: translateX(3px);
}

/* ─── Social row ─── */
.ty-social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.ty-social-label {
  font-size: 13px;
  color: #A1A1A6;
  font-weight: 400;
  white-space: nowrap;
}

.ty-socials {
  display: flex;
  gap: 8px;
}

.ty-social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #6E6E73;
  background: #F5F5F7;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 8px 14px;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.ty-social--inactive { opacity: 0.35; cursor: default; pointer-events: none; }
.ty-social:hover {
  color: #6366F1;
  border-color: rgba(99,102,241,0.25);
  background: rgba(99,102,241,0.05);
  text-decoration: none;
}

/* ─── Home button ─── */
.ty-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #6366F1;
  background: transparent;
  border: 1.5px solid rgba(99,102,241,0.30);
  padding: 12px 28px;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.3s ease;
  letter-spacing: -0.01em;
}

.ty-home-btn:hover {
  background: #6366F1;
  color: #fff;
  border-color: #6366F1;
  text-decoration: none;
  transform: scale(1.02);
}

/* ─── Redirect countdown ─── */
.ty-redirect {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  font-size: 13px;
  color: #A1A1A6;
  font-family: 'Inter', -apple-system, sans-serif;
  animation: ty-fadein 0.5s ease 1.1s both;
}

.ty-redirect strong { color: #6E6E73; }

.ty-redirect__cancel {
  background: none;
  border: none;
  color: #6366F1;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.ty-redirect__cancel:hover { color: #4F46E5; }

/* ─── Responsive ─── */
@media (max-width: 640px) {
  .ty-page { padding: 40px 16px 36px; }

  .ty-card { padding: 40px 28px 36px; border-radius: 20px; }

  .ty-social-row { flex-direction: column; gap: 12px; }

  .ty-explore-card:hover { transform: none; }
}

/* === FROM: 404-page.html === */
/* ============================================================
   404 PAGE
   ============================================================ */
.e4-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background: #0a0a0f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  position: relative;
  overflow: hidden;
}

/* ─── Background layers ─── */
.e4-bg-glow {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,241,0.18) 0%, transparent 60%);
  pointer-events: none;
}

.e4-bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.e4-bg-orb1 {
  position: fixed;
  top: 20%;
  left: -10%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.10) 0%, transparent 70%);
  pointer-events: none;
  animation: e4-float 8s ease-in-out infinite;
}

.e4-bg-orb2 {
  position: fixed;
  bottom: 10%;
  right: -8%;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%);
  pointer-events: none;
  animation: e4-float 10s ease-in-out infinite reverse;
}

@keyframes e4-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-24px); }
}

/* ─── Main card ─── */
.e4-card {
  position: relative;
  z-index: 1;
  max-width: 560px;
  width: 100%;
  text-align: center;
}

/* ─── Terminal window ─── */
.e4-terminal {
  background: #111118;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 40px;
  text-align: left;
  animation: e4-fadein 0.6s ease both;
}

@keyframes e4-fadein {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.e4-terminal__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.e4-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.e4-dot--red    { background: #FF5F57; }
.e4-dot--yellow { background: #FFBD2E; }
.e4-dot--green  { background: #28C840; }

.e4-terminal__title {
  font-size: 12px;
  color: rgba(255,255,255,0.28);
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.e4-terminal__body {
  padding: 18px 20px 16px;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
}

.e4-terminal__line {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}

.e4-terminal__line--output {
  color: rgba(255,255,255,0.35);
  padding-left: 0;
  margin: 4px 0;
}

.e4-term-prompt {
  color: #6366F1;
  font-weight: 700;
}

.e4-term-cmd {
  color: rgba(255,255,255,0.55);
}

.e4-term-url {
  color: #A78BFA;
}

.e4-term-error {
  color: #F87171;
  font-weight: 700;
  margin-right: 6px;
}

/* Blinking cursor */
.e4-term-cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: #6366F1;
  border-radius: 1px;
  animation: e4-blink 1.1s step-end infinite;
  vertical-align: middle;
}

@keyframes e4-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── 404 number ─── */
.e4-number {
  font-size: clamp(100px, 20vw, 160px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(99,102,241,0.6) 0%, rgba(139,92,246,0.4) 50%, rgba(167,139,250,0.2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: e4-fadein 0.5s ease 0.1s both;
  user-select: none;
}

/* ─── Heading ─── */
.e4-title {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 12px;
  animation: e4-fadein 0.5s ease 0.15s both;
}

.e4-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.45);
  line-height: 1.65;
  margin: 0 0 36px;
  animation: e4-fadein 0.5s ease 0.2s both;
}

/* ─── Search ─── */
.e4-search {
  margin-bottom: 24px;
  animation: e4-fadein 0.5s ease 0.25s both;
}

.e4-search__wrap {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.e4-search__wrap:focus-within {
  border-color: rgba(99,102,241,0.55);
  background: rgba(255,255,255,0.09);
}

.e4-search__icon {
  color: rgba(255,255,255,0.30);
  margin-left: 16px;
  flex-shrink: 0;
}

.e4-search__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 14px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px;
  color: #FFFFFF;
  min-width: 0;
}

.e4-search__input::placeholder {
  color: rgba(255,255,255,0.22);
}

/* Clear the native search cancel button */
.e4-search__input::-webkit-search-cancel-button { display: none; }

.e4-search__btn {
  background: #6366F1;
  border: none;
  color: #fff;
  padding: 0 18px;
  height: 100%;
  min-height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
  flex-shrink: 0;
}

.e4-search__btn:hover { background: #4F46E5; }

/* ─── Quick nav ─── */
.e4-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  animation: e4-fadein 0.5s ease 0.3s both;
}

.e4-nav__label {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.e4-nav__links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.e4-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.50);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  padding: 8px 14px;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.e4-nav__link:hover {
  color: #FFFFFF;
  background: rgba(99,102,241,0.18);
  border-color: rgba(99,102,241,0.35);
  text-decoration: none;
}

/* ─── Home button ─── */
.e4-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  background: #6366F1;
  padding: 14px 32px;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  letter-spacing: -0.01em;
  box-shadow: 0 4px 24px rgba(99,102,241,0.40);
  animation: e4-fadein 0.5s ease 0.35s both;
}

.e4-home-btn:hover {
  background: #4F46E5;
  transform: scale(1.03);
  box-shadow: 0 8px 36px rgba(99,102,241,0.55);
  color: #FFFFFF;
  text-decoration: none;
}

/* ─── Brand watermark ─── */
.e4-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  text-decoration: none;
  opacity: 0.45;
  transition: opacity 0.25s ease;
  animation: e4-fadein 0.5s ease 0.4s both;
}

.e4-brand:hover { opacity: 0.80; text-decoration: none; }

.e4-brand__ms {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  font-family: 'Inter', sans-serif;
}

.e4-brand__name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.70);
  letter-spacing: -0.01em;
}

/* ─── Responsive ─── */
@media (max-width: 480px) {
  .e4-page { padding: 36px 16px; }
  .e4-terminal { display: none; }   /* hide on very small screens */
  .e4-nav { flex-direction: column; gap: 12px; }
  .e4-nav__label { display: none; }
}

/* === FROM: search-page.html === */
/* ============================================================
   SEARCH RESULTS PAGE
   ============================================================ */
.sr-hero, .sr-section {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── Hero ─── */
.sr-hero {
  background: #fff;
  padding: 80px 24px 60px;
}

.sr-hero__inner {
  max-width: 700px;
  margin: 0 auto;
}

.sr-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #6366F1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding: 5px 14px;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 980px;
  background: rgba(99,102,241,0.06);
}

.sr-title {
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 28px;
}

.sr-query {
  color: #6366F1;
}

/* Search form */
.sr-form { margin-bottom: 20px; }

.sr-form__wrap {
  display: flex;
  align-items: center;
  background: #F5F5F7;
  border: 1.5px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.25s ease;
}

.sr-form__wrap:focus-within {
  background: #fff;
  border-color: #6366F1;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.10);
}

.sr-form__icon {
  color: #A1A1A6;
  margin: 0 4px 0 16px;
  flex-shrink: 0;
}

.sr-form__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 15px 14px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  color: #1D1D1F;
  min-width: 0;
}

.sr-form__input::placeholder { color: #A1A1A6; }
.sr-form__input::-webkit-search-cancel-button { display: none; }

.sr-form__btn {
  background: #6366F1;
  border: none;
  color: #fff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 0 22px;
  min-height: 52px;
  cursor: pointer;
  transition: background 0.25s ease;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.sr-form__btn:hover { background: #4F46E5; }

/* Filter pills */
.sr-filters {
  display: flex;
  gap: 6px;
}

.sr-filter {
  font-size: 13px;
  font-weight: 500;
  color: #6E6E73;
  background: #F5F5F7;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 7px 16px;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sr-filter:hover { color: #6366F1; border-color: rgba(99,102,241,0.25); text-decoration: none; }

.sr-filter--active {
  background: #6366F1;
  color: #fff;
  border-color: #6366F1;
}

.sr-filter--active:hover { color: #fff; }

/* ─── Section ─── */
.sr-section {
  background: #F5F5F7;
  padding: 60px 24px 100px;
}

/* Two-col layout: results + sidebar */
.sr-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}

/* ─── Result items ─── */
.sr-results {
  display: flex;
  flex-direction: column;
}

.sr-item {
  background: #fff;
  border-radius: 18px;
  padding: 32px 36px;
  border: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 14px;
  transition: all 0.25s ease;
}

.sr-item:last-of-type { margin-bottom: 0; }

.sr-item:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}

.sr-item__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* Category chips */
.sr-item__cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 980px;
}

.sr-item__cat--wp      { color: #2563eb; background: rgba(37,99,235,0.08); }
.sr-item__cat--ai      { color: #7c3aed; background: rgba(124,58,237,0.08); }
.sr-item__cat--content { color: #ea580c; background: rgba(234,88,12,0.08); }
.sr-item__cat--page    { color: #059669; background: rgba(5,150,105,0.08); }

.sr-item__dot  { color: #C7C7CC; font-size: 12px; }
.sr-item__date { font-size: 12px; color: #A1A1A6; }
.sr-item__read { font-size: 12px; color: #A1A1A6; }

.sr-item__title {
  font-size: 20px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 10px;
}

.sr-item__link {
  color: #1D1D1F;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sr-item__link:hover { color: #6366F1; text-decoration: none; }

/* Highlight the search term in title/excerpt */
.sr-item__title strong,
.sr-item__excerpt strong {
  color: #6366F1;
  font-weight: 700;
  background: rgba(99,102,241,0.07);
  border-radius: 3px;
  padding: 0 2px;
}

.sr-item__excerpt {
  font-size: 15px;
  color: #6E6E73;
  line-height: 1.65;
  margin: 0 0 18px;
}

.sr-item__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #6366F1;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}

.sr-item__more:hover { gap: 9px; color: #4F46E5; text-decoration: none; }

/* ─── Pagination ─── */
.sr-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 40px;
}

.sr-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #6E6E73;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  text-decoration: none;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  padding: 0 4px;
}

.sr-page:hover { color: #6366F1; border-color: rgba(99,102,241,0.30); text-decoration: none; }

.sr-page--active {
  background: #6366F1;
  color: #fff;
  border-color: #6366F1;
  box-shadow: 0 4px 14px rgba(99,102,241,0.30);
}

.sr-page--active:hover { color: #fff; }

.sr-page--prev,
.sr-page--next { color: #A1A1A6; }

.sr-page--gap {
  background: transparent;
  border-color: transparent;
  cursor: default;
  color: #C7C7CC;
}

/* ─── Sidebar ─── */
.sr-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 100px;
}

.sr-widget {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  border: 1px solid rgba(0,0,0,0.06);
}

.sr-widget__title {
  font-size: 13px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

/* Tag cloud */
.sr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sr-tag {
  font-size: 12px;
  font-weight: 500;
  color: #6E6E73;
  background: #F5F5F7;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 6px 13px;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sr-tag:hover {
  color: #6366F1;
  border-color: rgba(99,102,241,0.30);
  background: rgba(99,102,241,0.05);
  text-decoration: none;
}

/* Topic list */
.sr-topics {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sr-topic {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.sr-topic:hover { background: #F5F5F7; text-decoration: none; }

.sr-topic__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sr-topic__icon--wp      { background: rgba(37,99,235,0.08);  color: #2563eb; }
.sr-topic__icon--ai      { background: rgba(124,58,237,0.08); color: #7c3aed; }
.sr-topic__icon--content { background: rgba(234,88,12,0.08);  color: #ea580c; }

.sr-topic__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sr-topic__text strong {
  font-size: 13px;
  font-weight: 600;
  color: #1D1D1F;
  letter-spacing: -0.01em;
}

.sr-topic__text span {
  font-size: 11px;
  color: #A1A1A6;
}

.sr-topic svg { color: #C7C7CC; flex-shrink: 0; }
.sr-topic:hover svg { color: #6366F1; }

/* ─── No results ─── */
.sr-empty {
  text-align: center;
  max-width: 500px;
  margin: 40px auto;
  padding: 60px 32px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,0.06);
}

.sr-empty__icon {
  width: 72px;
  height: 72px;
  background: #F5F5F7;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.sr-empty__title {
  font-size: 24px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.sr-empty__text {
  font-size: 15px;
  color: #6E6E73;
  line-height: 1.65;
  margin: 0 0 28px;
}

.sr-empty__suggest-label {
  font-size: 12px;
  font-weight: 600;
  color: #A1A1A6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
}

.sr-empty__links {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

.sr-empty__link {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 26px;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.sr-empty__link--primary {
  background: #6366F1;
  color: #fff;
  box-shadow: 0 4px 16px rgba(99,102,241,0.28);
}

.sr-empty__link--primary:hover { background: #4F46E5; color: #fff; text-decoration: none; }

.sr-empty__link--ghost {
  background: transparent;
  color: #6366F1;
  border: 1.5px solid rgba(99,102,241,0.30);
}

.sr-empty__link--ghost:hover { background: #6366F1; color: #fff; border-color: #6366F1; text-decoration: none; }

/* ─── Responsive ─── */
@media (max-width: 860px) {
  .sr-layout { grid-template-columns: 1fr; }
  .sr-sidebar { position: static; }
}

@media (max-width: 640px) {
  .sr-hero    { padding: 60px 20px 40px; }
  .sr-section { padding: 40px 20px 72px; }
  .sr-item    { padding: 24px 22px; }
  .sr-filters { flex-wrap: wrap; }
  .sr-empty__links { flex-direction: column; align-items: center; }
}

/* === WordPress / Theme Extras === */

/* Nav header styles */
.ms-site-header { position: sticky; top: 0; z-index: 9999; background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,0.07); font-family: 'Inter', sans-serif; }
.ms-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1160px; margin: 0 auto; padding: 0 24px; height: 60px; }
.ms-nav__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ms-nav__logo-badge { width: 32px; height: 32px; background: linear-gradient(135deg,#6366F1,#8B5CF6); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; }
.ms-nav__logo-name { font-size: 15px; font-weight: 700; color: #1D1D1F; letter-spacing: -0.02em; }
.ms-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; }
.ms-nav__list a { font-size: 14px; color: #1D1D1F; text-decoration: none; padding: 6px 12px; border-radius: 8px; transition: all 0.2s ease; font-weight: 400; }
.ms-nav__list a:hover { color: #6366F1; background: rgba(99,102,241,0.06); }
.ms-nav__list .current-menu-item > a, .ms-nav__list .current_page_item > a { color: #6366F1; }
.ms-nav__toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: #1D1D1F; }
@media(max-width:768px){
  .ms-nav__list { display: none; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background: rgba(255,255,255,0.97); backdrop-filter: blur(20px); padding: 16px 24px 24px; border-bottom: 1px solid rgba(0,0,0,0.07); gap: 4px; z-index: 9998; }
  .ms-nav__list.open { display: flex; }
  .ms-nav__toggle { display: flex; }
  .ms-site-header { position: relative; }
}

/* WordPress Pagination */
.sr-pagination .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: 10px; font-size: 14px; font-weight: 500; color: #6E6E73; background: #fff; border: 1px solid rgba(0,0,0,0.08); text-decoration: none; transition: all 0.2s ease; font-family: 'Inter', sans-serif; padding: 0 4px; margin: 0 3px; }
.sr-pagination .page-numbers:hover { color: #6366F1; border-color: rgba(99,102,241,0.30); text-decoration: none; }
.sr-pagination .page-numbers.current { background: #6366F1; color: #fff; border-color: #6366F1; box-shadow: 0 4px 14px rgba(99,102,241,0.30); }
.sr-pagination nav { display: flex; justify-content: center; margin-top: 40px; }

/* WordPress Archive grid */
.arc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }

/* Entry content (WP blog post body) */
.entry-content { max-width: 760px; margin: 60px auto; padding: 0 24px; font-family: 'Inter', sans-serif; font-size: 18px; line-height: 1.75; color: #1D1D1F; }
.entry-content h2 { font-size: clamp(24px, 3.5vw, 32px); font-weight: 800; color: #1D1D1F; letter-spacing: -0.03em; margin: 48px 0 16px; }
.entry-content h3 { font-size: clamp(20px, 2.5vw, 26px); font-weight: 700; color: #1D1D1F; margin: 36px 0 12px; }
.entry-content h4 { font-size: 20px; font-weight: 700; color: #1D1D1F; margin: 28px 0 10px; }
.entry-content p { margin: 0 0 24px; }
.entry-content a { color: #6366F1; text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { margin: 0 0 24px 24px; }
.entry-content li { margin-bottom: 8px; }
.entry-content blockquote { border-left: 3px solid #6366F1; margin: 32px 0; padding: 16px 24px; background: rgba(99,102,241,0.04); border-radius: 0 12px 12px 0; font-style: italic; color: #3D3D3F; }
.entry-content code { background: #1D1D1F; color: #E2E8F0; padding: 2px 8px; border-radius: 5px; font-size: 0.88em; font-family: 'SF Mono', 'Fira Code', monospace; }
.entry-content pre { background: #0a0a0f; border-radius: 16px; padding: 24px 28px; overflow-x: auto; margin: 32px 0; }
.entry-content pre code { background: none; color: #E2E8F0; font-size: 14px; padding: 0; }
.entry-content img { width: 100%; height: auto; border-radius: 16px; margin: 32px 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 32px 0; }
.entry-content th { background: #F5F5F7; padding: 12px 16px; text-align: left; font-weight: 600; font-size: 13px; color: #6E6E73; text-transform: uppercase; letter-spacing: 0.05em; }
.entry-content td { padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.entry-content .bpt-callout { background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.15); border-radius: 14px; padding: 20px 24px; margin: 32px 0; }
/* === Portfolio & About real images === */
.po-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.po-card:hover .po-img { transform: scale(1.04); }
.po-card__img-wrap { overflow: hidden; }
.ap-hero__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}