/* ═══════════════════════════════════════
   JCITechnology — Design System v2
   ═══════════════════════════════════════ */

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

:root {
  --color-bg: #f0f4ff;
  --color-surface: #ffffff;
  --color-surface-soft: #edf2ff;
  --color-surface-2: #f8faff;
  --color-text: #080f1e;
  --color-text-muted: #4a5568;
  --color-text-soft: #718096;
  --color-border: #e2e8f0;
  --color-border-soft: #edf2f7;
  --color-primary: #2563eb;
  --color-primary-2: #0891b2;
  --color-primary-hover: #1d4ed8;
  --color-accent: #7c3aed;
  --color-danger: #dc2626;
  --color-success: #059669;
  --color-warning: #d97706;

  --bg-gradient:
    radial-gradient(ellipse 80% 50% at 20% -10%, #3b82f630 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 5%, #06b6d430 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 50% 100%, #7c3aed18 0%, transparent 50%),
    linear-gradient(180deg, #f0f4ff 0%, #f8faff 50%, #fff 100%);

  --glass-bg: rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.9);
  --glass-blur: blur(20px);

  --shadow-xs: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 4px 16px -4px rgba(15,30,60,0.10), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 12px 40px -8px rgba(15,30,60,0.14), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-lg: 0 24px 64px -12px rgba(15,30,60,0.18), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-xl: 0 40px 96px -16px rgba(15,30,60,0.22);
  --shadow-glow: 0 0 0 4px rgba(37,99,235,0.15);
  --shadow-glow-2: 0 8px 32px rgba(37,99,235,0.25);

  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-2xl: 2.5rem;

  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --step--2: clamp(0.64rem, 0.62rem + 0.1vw, 0.72rem);
  --step--1: clamp(0.78rem, 0.75rem + 0.14vw, 0.88rem);
  --step-0: clamp(0.94rem, 0.9rem + 0.2vw, 1.05rem);
  --step-1: clamp(1.13rem, 1.06rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.23rem + 0.6vw, 1.65rem);
  --step-3: clamp(1.62rem, 1.44rem + 0.9vw, 2.1rem);
  --step-4: clamp(1.95rem, 1.68rem + 1.35vw, 2.7rem);
  --step-5: clamp(2.34rem, 1.95rem + 2vw, 3.5rem);
  --step-6: clamp(2.8rem, 2.2rem + 3vw, 4.6rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem; --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;   --space-9: 6rem;

  --content-max: 1200px;
  --header-h: 72px;

  color-scheme: light;
}

html[data-theme="dark"] {
  --color-bg: #050c1a;
  --color-surface: #0c1628;
  --color-surface-soft: #121e35;
  --color-surface-2: #0f1a2e;
  --color-text: #eef2ff;
  --color-text-muted: #94a3b8;
  --color-text-soft: #64748b;
  --color-border: #1e2d47;
  --color-border-soft: #172036;
  --color-primary: #60a5fa;
  --color-primary-2: #22d3ee;
  --color-primary-hover: #93c5fd;
  --color-accent: #a78bfa;
  --color-danger: #f87171;
  --color-success: #34d399;
  --color-warning: #fbbf24;

  --bg-gradient:
    radial-gradient(ellipse 80% 60% at 20% -15%, #3b82f640 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 5%, #06b6d435 0%, transparent 45%),
    radial-gradient(ellipse 50% 60% at 50% 100%, #7c3aed25 0%, transparent 50%),
    linear-gradient(180deg, #050c1a 0%, #070e1c 60%, #06101f 100%);

  --glass-bg: rgba(12,22,40,0.78);
  --glass-border: rgba(255,255,255,0.08);
  --shadow-sm: 0 4px 16px -4px rgba(0,0,0,0.4);
  --shadow-md: 0 12px 40px -8px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 64px -12px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 0 4px rgba(96,165,250,0.2);
  --shadow-glow-2: 0 8px 32px rgba(96,165,250,0.3);
  color-scheme: dark;
}

/* ─── Reset & Base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--bg-gradient);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; color: var(--color-text-muted); }
h1,h2,h3,h4,h5,h6 { margin: 0; line-height: 1.15; letter-spacing: -0.03em; color: var(--color-text); font-weight: 700; }
h1 { font-size: var(--step-6); font-weight: 800; }
h2 { font-size: var(--step-4); font-weight: 800; }
h3 { font-size: var(--step-2); font-weight: 700; }
h4 { font-size: var(--step-1); font-weight: 600; }
small { font-size: var(--step--1); }
main { overflow: clip; }

/* ─── Layout ────────────────────────────────────── */
.container {
  width: min(100% - 2rem, var(--content-max));
  margin-inline: auto;
}

.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-6); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.section   { padding: var(--space-9) 0; }
.section-sm { padding: var(--space-7) 0; }
.section-xs { padding: var(--space-5) 0; }

/* ─── Surfaces ──────────────────────────────────── */
.surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.glass {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

/* ─── Buttons ───────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 0.72rem 1.4rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  white-space: nowrap;
  text-decoration: none;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, #1e40af 100%);
  color: #fff;
  box-shadow: var(--shadow-glow-2);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--color-primary-hover) 0%, #1e3a8a 100%); box-shadow: 0 12px 40px rgba(37,99,235,0.35); }

.btn-secondary {
  background: linear-gradient(135deg, var(--color-primary-2) 0%, #0e7490 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(8,145,178,0.25);
}
.btn-secondary:hover { box-shadow: 0 12px 40px rgba(8,145,178,0.35); }

.btn-ghost {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.btn-ghost:hover { border-color: var(--color-primary); background: var(--color-surface-soft); box-shadow: var(--shadow-sm); }

.btn-danger {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: #fff;
  box-shadow: 0 6px 20px rgba(220,38,38,0.3);
}
.btn-danger:hover { box-shadow: 0 10px 30px rgba(220,38,38,0.4); }

.btn-sm { padding: 0.5rem 1rem; font-size: var(--step--2); }
.btn-lg { padding: 0.9rem 1.8rem; font-size: var(--step-0); }

.btn-icon {
  width: 2.4rem; height: 2.4rem;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-icon:hover { border-color: var(--color-primary); background: var(--color-surface-soft); transform: translateY(-1px); }

.icon-btn { /* legacy alias */
  border: 1px solid var(--color-border);
  border-radius: 999px;
  width: 2.4rem; height: 2.4rem;
  background: var(--color-surface);
  color: var(--color-text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.icon-btn:hover { border-color: var(--color-primary); background: var(--color-surface-soft); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ─── Forms ─────────────────────────────────────── */
.input, textarea, select {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.72rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  -webkit-appearance: none;
}
.input:focus, textarea:focus, select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
}

textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
label { font-size: var(--step--1); font-weight: 600; color: var(--color-text); }
.error-msg { font-size: var(--step--1); color: var(--color-danger); margin-top: 0.25rem; }
.help-text { font-size: var(--step--1); color: var(--color-text-soft); margin-top: 0.25rem; }

/* ─── Badges & Pills ────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: var(--step--2);
  font-weight: 700;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pill-blue  { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.pill-teal  { background: #ccfbf1; color: #115e59; border: 1px solid #99f6e4; }
.pill-violet{ background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }
.pill-green { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.pill-amber { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.pill-red   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

html[data-theme="dark"] .pill-blue   { background: #1e3a8a30; color: #93c5fd; border-color: #1e40af50; }
html[data-theme="dark"] .pill-teal   { background: #0e7490,30; color: #67e8f9; border-color: #0e749040; }
html[data-theme="dark"] .pill-violet { background: #5b21b630; color: #c4b5fd; border-color: #6d28d940; }
html[data-theme="dark"] .pill-green  { background: #14532d30; color: #6ee7b7; border-color: #15803d40; }
html[data-theme="dark"] .pill-amber  { background: #78350f30; color: #fcd34d; border-color: #92400e40; }
html[data-theme="dark"] .pill-red    { background: #7f1d1d30; color: #fca5a5; border-color: #99191940; }

/* ─── Card ──────────────────────────────────────── */
.card {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in oklab, var(--color-primary) 30%, var(--color-border));
}
.card:hover::before { opacity: 0.03; }

.card h3 { margin-bottom: 0.6rem; }
.card h2 { margin-bottom: 0.6rem; font-size: var(--step-2); }
.card a:not(.btn) {
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--step--1);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 0.2s ease;
}
.card a:not(.btn):hover { gap: 0.5rem; }
.card a:not(.btn)::after { content: '→'; }

/* ─── KPI / Stats ───────────────────────────────── */
.kpi {
  font-size: var(--step-4);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Announcement ──────────────────────────────── */
.site-announcement {
  position: sticky; top: 0; z-index: 90;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  font-size: var(--step--1);
}
.site-announcement .inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: 0.6rem 0;
}
.site-announcement p { color: rgba(255,255,255,0.9); }
.site-announcement .icon-btn {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.site-announcement .icon-btn:hover { background: rgba(255,255,255,0.25); }

/* ─── Header ────────────────────────────────────── */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--color-surface); padding: var(--space-2) var(--space-3); z-index: 999;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

.site-header {
  position: sticky; top: 0; z-index: 80;
  border-bottom: 1px solid rgba(226,232,240,0.6);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background: rgba(240,244,255,0.8);
  transition: box-shadow 0.3s ease;
}
html[data-theme="dark"] .site-header {
  background: rgba(5,12,26,0.85);
  border-bottom-color: rgba(30,45,71,0.8);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }

.header-inner {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}

.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 800; font-size: var(--step-1); letter-spacing: -0.02em;
}
.brand-logo {
  width: 2.2rem; height: 2.2rem;
  object-fit: contain; border-radius: 0.6rem;
}
.brand-mark {
  width: 2.2rem; height: 2.2rem; border-radius: 0.6rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

.site-nav { display: none; }

.menu, .submenu { list-style: none; margin: 0; padding: 0; }
.menu { display: flex; gap: 0.25rem; align-items: center; }
.menu-item { position: relative; }

.menu-link, .menu-button {
  border: 0; background: none; font: inherit; color: var(--color-text-muted);
  padding: 0.55rem 0.85rem; border-radius: var(--radius-sm);
  cursor: pointer; font-weight: 500; font-size: var(--step--1);
  transition: all 0.18s ease;
  display: flex; align-items: center; gap: 0.3rem;
}
.menu-link[aria-current="page"] { color: var(--color-primary); font-weight: 700; background: var(--color-surface-soft); }
.menu-link:hover, .menu-button:hover, .menu-button[aria-expanded="true"] {
  color: var(--color-text); background: var(--color-surface-soft);
}

.dropdown {
  position: absolute; top: calc(100% + 0.5rem); left: 0;
  min-width: 220px; padding: 0.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transform: translateY(10px) scale(0.97);
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  transform-origin: top left;
}
.dropdown.show { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.dropdown a {
  display: block; padding: 0.55rem 0.75rem; border-radius: var(--radius-xs);
  color: var(--color-text-muted); font-size: var(--step--1); font-weight: 500;
  transition: all 0.15s ease;
}
.dropdown a:hover { background: var(--color-surface-soft); color: var(--color-text); padding-left: 1rem; }

.header-actions { display: flex; align-items: center; gap: 0.5rem; }

/* ─── Language Switcher ─────────────────────────── */
.lang-switcher {
  position: relative;
  z-index: 200;
}

.lang-switcher__btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.38rem 0.7rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface); cursor: pointer;
  font-family: var(--font-sans); font-size: var(--step--2); font-weight: 600;
  color: var(--color-text); transition: all 0.18s ease;
  white-space: nowrap;
}
.lang-switcher__btn:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-soft);
  color: var(--color-primary);
}
.lang-switcher__flag { font-size: 1rem; line-height: 1; }
.lang-switcher__code { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; }
.lang-switcher__arrow {
  opacity: 0.5; transition: transform 0.2s ease;
}
.lang-switcher__btn[aria-expanded="true"] .lang-switcher__arrow {
  transform: rotate(180deg);
}

/* Dropdown panel */
.lang-dropdown {
  position: absolute; top: calc(100% + 0.5rem); right: 0;
  min-width: 200px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.4rem;
  opacity: 0; pointer-events: none;
  transform: translateY(8px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lang-dropdown.open {
  opacity: 1; pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Each language option */
.lang-option {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%; padding: 0.6rem 0.75rem;
  border: none; background: none;
  border-radius: var(--radius-xs);
  cursor: pointer; font-family: var(--font-sans);
  text-align: left; transition: background 0.12s ease;
  position: relative;
}
.lang-option:hover { background: var(--color-surface-soft); }
.lang-option--active { background: var(--color-surface-soft); }

.lang-option__flag { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.lang-option__text { flex: 1; display: flex; flex-direction: column; gap: 0.05rem; }
.lang-option__name { font-size: 0.82rem; font-weight: 700; color: var(--color-text); }
.lang-option__native { font-size: 0.7rem; color: var(--color-text-soft); }
.lang-option__check {
  color: var(--color-primary); flex-shrink: 0;
  opacity: 0; transition: opacity 0.12s;
}
.lang-option--active .lang-option__check { opacity: 1; }

/* Divider between options */
.lang-option + .lang-option::before {
  content: ''; display: block; height: 1px;
  background: var(--color-border-soft);
  position: absolute; top: 0; left: 0.75rem; right: 0.75rem;
}

/* Small "Powered by Google" note at bottom */
.lang-dropdown::after {
  content: 'Powered by Google Translate';
  display: block;
  font-size: 0.62rem; color: var(--color-text-soft);
  text-align: center; padding: 0.4rem 0.75rem 0.35rem;
  border-top: 1px solid var(--color-border-soft);
  margin-top: 0.3rem;
}

/* ─── Hide Google Translate's native UI ─────────── */
.goog-te-banner-frame,
.goog-te-menu-frame,
iframe.skiptranslate,
body > .skiptranslate,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip-content { display: none !important; }
body { top: 0 !important; }
#google_translate_element { display: none !important; }

/* Mobile Menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 120;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.mobile-menu.show { opacity: 1; pointer-events: auto; }
.mobile-menu-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); }
.mobile-menu-panel {
  position: absolute; top: 0; right: 0;
  width: min(88vw, 360px); height: 100%;
  padding: var(--space-5); background: var(--color-surface);
  border-left: 1px solid var(--color-border); box-shadow: var(--shadow-xl);
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-4);
  transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.mobile-menu.show .mobile-menu-panel { transform: translateX(0); }
.mobile-links { display: grid; gap: 0.25rem; overflow-y: auto; }
.mobile-links a, .mobile-links summary {
  padding: 0.75rem 0.85rem; border-radius: var(--radius-sm);
  color: var(--color-text-muted); font-weight: 500; font-size: var(--step--1);
  cursor: pointer; list-style: none; transition: all 0.15s ease;
}
.mobile-links a:hover, .mobile-links summary:hover {
  background: var(--color-surface-soft); color: var(--color-text);
}

/* ─── Hero ──────────────────────────────────────── */
.hero {
  padding-top: calc(var(--space-9) + var(--space-4));
  padding-bottom: var(--space-9);
  position: relative;
  overflow: hidden;
}

.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none;
}
.hero-orb-1 {
  width: 40vw; height: 40vw; max-width: 600px; max-height: 600px;
  top: -10%; left: -5%;
  background: radial-gradient(circle, rgba(37,99,235,0.22) 0%, transparent 70%);
  animation: float 12s ease-in-out infinite;
}
.hero-orb-2 {
  width: 30vw; height: 30vw; max-width: 450px; max-height: 450px;
  top: 0; right: 0;
  background: radial-gradient(circle, rgba(8,145,178,0.18) 0%, transparent 70%);
  animation: float 14s ease-in-out infinite reverse;
}
.hero-orb-3 {
  width: 25vw; height: 25vw; max-width: 350px; max-height: 350px;
  bottom: 5%; left: 40%;
  background: radial-gradient(circle, rgba(124,58,237,0.15) 0%, transparent 70%);
  animation: float 10s ease-in-out infinite 2s;
}

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

.hero-grid {
  display: grid; gap: var(--space-7); align-items: center; position: relative; z-index: 1;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--step--1); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-primary);
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.2);
  padding: 0.35rem 0.85rem; border-radius: 999px;
  width: fit-content;
}
.hero-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--color-primary); font-weight: 700;
}

.hero h1 { margin-bottom: var(--space-4); }

.hero-card {
  padding: var(--space-6); border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.hero-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-2), var(--color-accent));
}

/* ─── Logo Strip ────────────────────────────────── */
.logo-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-3); align-items: center;
}
.logo-item {
  aspect-ratio: 1;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  display: grid; place-items: center;
  box-shadow: var(--shadow-xs);
  transition: all 0.25s ease;
}
.logo-item:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-md);
  border-color: rgba(37,99,235,0.3);
}
.logo-mark { width: 78%; height: 78%; object-fit: contain; }

/* ─── Testimonials ──────────────────────────────── */
.testimonial-slider { position: relative; overflow: hidden; }
.slides { display: flex; transition: transform 0.45s cubic-bezier(0.4,0,0.2,1); }
.slide { min-width: 100%; padding: var(--space-5); }
.slide p:first-child {
  font-size: var(--step-1); font-style: italic; font-weight: 500;
  color: var(--color-text); line-height: 1.65;
  margin-bottom: var(--space-3);
}
.slider-controls { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.slider-dots { display: flex; gap: 0.4rem; align-items: center; margin-top: var(--space-3); }
.slider-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-border); cursor: pointer;
  transition: all 0.2s ease;
}
.slider-dot.active { background: var(--color-primary); width: 24px; border-radius: 999px; }

/* ─── FAQ ───────────────────────────────────────── */
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.faq-trigger {
  width: 100%; border: 0; background: none; font: inherit;
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  cursor: pointer; color: var(--color-text); font-weight: 600; font-size: var(--step-0);
  text-align: left; transition: background 0.18s ease;
}
.faq-trigger:hover { background: var(--color-surface-soft); }
.faq-trigger[aria-expanded="true"] { color: var(--color-primary); }
.faq-trigger span {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-surface-soft);
  display: grid; place-items: center; flex-shrink: 0; font-size: 1.1rem;
  transition: transform 0.25s ease, background 0.18s ease;
}
.faq-trigger[aria-expanded="true"] span { transform: rotate(45deg); background: rgba(37,99,235,0.1); color: var(--color-primary); }
.faq-panel { padding: 0 var(--space-5) var(--space-4); }
.faq-panel p { color: var(--color-text-muted); line-height: 1.7; }

/* ─── Footer ────────────────────────────────────── */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) 0 var(--space-5);
  margin-top: var(--space-9);
}
.footer-grid { display: grid; gap: var(--space-7); }
.footer-links { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-links a { color: var(--color-text-muted); font-size: var(--step--1); font-weight: 500; transition: all 0.15s ease; width: fit-content; }
.footer-links a:hover { color: var(--color-primary); padding-left: 4px; }
.socials { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.footer-bottom { border-top: 1px solid var(--color-border); margin-top: var(--space-6); padding-top: var(--space-4); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); }

/* ─── Breadcrumb ────────────────────────────────── */
.breadcrumb { margin-bottom: var(--space-5); }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; gap: 0.5rem; align-items: center; font-size: var(--step--1); }
.breadcrumb li::after { content: '/'; color: var(--color-border); }
.breadcrumb li:last-child::after { display: none; }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb [aria-current] { color: var(--color-text); font-weight: 600; }

/* ─── Back to Top ───────────────────────────────── */
.back-to-top {
  position: fixed; bottom: var(--space-5); right: var(--space-5);
  z-index: 70; width: 2.8rem; height: 2.8rem; padding: 0;
  border-radius: 50%; opacity: 0; pointer-events: none;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }

/* ─── Animations ────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].revealed { opacity: 1; transform: none; }

/* ─── List Clean ────────────────────────────────── */
.list-clean { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.list-clean li {
  position: relative; padding-left: 1.4rem;
  color: var(--color-text-muted);
}
.list-clean li::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  position: absolute; left: 0; top: 0.62rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

/* ─── Toast ─────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: var(--space-5); left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: var(--space-2); align-items: center;
}
.toast {
  background: var(--color-text); color: var(--color-surface);
  padding: 0.75rem 1.25rem; border-radius: var(--radius-md);
  font-size: var(--step--1); font-weight: 500;
  box-shadow: var(--shadow-xl); max-width: 420px;
  animation: fadeInUp 0.3s ease;
}

/* ─── Utility ───────────────────────────────────── */
.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: var(--step--1); }
.hidden { display: none !important; }
.desktop-only { display: none; }

.divider { border: 0; border-top: 1px solid var(--color-border); width: 100%; }

/* ─── Django Messages ───────────────────────────── */
.messages-container { position: fixed; top: 80px; right: var(--space-4); z-index: 150; display: flex; flex-direction: column; gap: var(--space-2); max-width: 380px; }
.message-item {
  padding: 0.85rem 1.15rem; border-radius: var(--radius-md);
  font-size: var(--step--1); font-weight: 500;
  box-shadow: var(--shadow-md);
  display: flex; align-items: flex-start; gap: 0.75rem;
  animation: slideInRight 0.3s ease;
  border-left: 4px solid transparent;
}
.message-item.success { background: #f0fdf4; border-left-color: var(--color-success); color: #15803d; }
.message-item.error   { background: #fef2f2; border-left-color: var(--color-danger);  color: #dc2626; }
.message-item.info    { background: #eff6ff; border-left-color: var(--color-primary); color: #1d4ed8; }
.message-item.warning { background: #fffbeb; border-left-color: var(--color-warning); color: #d97706; }
html[data-theme="dark"] .message-item.success { background: #052e16; color: #4ade80; }
html[data-theme="dark"] .message-item.error   { background: #450a0a; color: #f87171; }
html[data-theme="dark"] .message-item.info    { background: #0f1e3d; color: #93c5fd; }
html[data-theme="dark"] .message-item.warning { background: #1c1207; color: #fcd34d; }
.message-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; opacity: 0.6; color: inherit; margin-left: auto; padding: 0; line-height: 1; }
.message-close:hover { opacity: 1; }

/* ─── Blog / News list ──────────────────────────── */
.post-meta { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; font-size: var(--step--1); color: var(--color-text-soft); }
.post-meta .dot::before { content: '·'; }
.post-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.post-content { line-height: 1.8; color: var(--color-text-muted); }
.post-content h2, .post-content h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); color: var(--color-text); }
.post-content p { margin-bottom: var(--space-4); }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag {
  padding: 0.2rem 0.65rem; border-radius: 999px;
  font-size: var(--step--2); font-weight: 600;
  background: var(--color-surface-soft); border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: all 0.15s ease;
}
.tag:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ─── Search bar ────────────────────────────────── */
.search-wrap { position: relative; }
.search-wrap input { padding-left: 2.5rem; }
.search-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--color-text-soft); pointer-events: none; font-size: 1rem; }

/* ═══════════════════════════════════════
   Blog & News — Professional Redesign
   ═══════════════════════════════════════ */

/* ── Shared tokens ─────────────────────────────────── */
:root {
  --pv-blog:   #2563eb;
  --pv-blog-2: #1d4ed8;
  --pv-blog-l: #dbeafe;
  --pv-news:   #0d9488;
  --pv-news-2: #0f766e;
  --pv-news-l: #ccfbf1;
  --pv-web:    #2563eb;  --pv-web-l:   #dbeafe;
  --pv-software: #7c3aed; --pv-software-l: #ede9fe;
  --pv-security: #dc2626; --pv-security-l: #fee2e2;
  --pv-ai:     #d97706;  --pv-ai-l:    #fef3c7;
  --pv-vision: #059669;  --pv-vision-l: #d1fae5;
  --pv-other:  #64748b;  --pv-other-l:  #f1f5f9;
  --pv-card-r: 12px;
  --pv-hero-h: 64px;
}

/* ── Breadcrumb ─────────────────────────────────────── */
.pv-breadcrumb { display:flex; align-items:center; gap:0.3rem; font-size:0.78rem; color:var(--color-text-soft); margin-bottom:1.5rem; flex-wrap:wrap; }
.pv-breadcrumb a { color:var(--color-text-soft); text-decoration:none; transition:color 0.15s; }
.pv-breadcrumb a:hover { color:var(--color-primary); }
.pv-breadcrumb__sep { opacity:0.4; }

/* ── Badges ─────────────────────────────────────────── */
.pv-badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.3rem 0.8rem; border-radius:999px; font-size:0.72rem; font-weight:700; letter-spacing:0.04em; text-decoration:none; }
.pv-badge--blue   { background:var(--pv-blog-l); color:var(--pv-blog); border:1px solid #bfdbfe; }
.pv-badge--teal   { background:var(--pv-news-l); color:var(--pv-news); border:1px solid #99f6e4; }
.pv-badge--neutral{ background:var(--color-surface-soft); color:var(--color-text-muted); border:1px solid var(--color-border); }
.pv-badge--neutral:hover { border-color:var(--color-primary); color:var(--color-primary); }

/* ── Category labels ────────────────────────────────── */
.pv-cat { display:inline-flex; align-items:center; gap:0.25rem; padding:0.22rem 0.65rem; border-radius:999px; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; }
.pv-cat--web      { background:var(--pv-web-l);      color:var(--pv-web); }
.pv-cat--software { background:var(--pv-software-l); color:var(--pv-software); }
.pv-cat--security { background:var(--pv-security-l); color:var(--pv-security); }
.pv-cat--ai       { background:var(--pv-ai-l);       color:var(--pv-ai); }
.pv-cat--vision   { background:var(--pv-vision-l);   color:var(--pv-vision); }
.pv-cat--other    { background:var(--pv-other-l);    color:var(--pv-other); }
.pv-cat--news     { background:var(--pv-news-l);     color:var(--pv-news); }

/* ── Tags ───────────────────────────────────────────── */
.pv-tags { display:flex; flex-wrap:wrap; gap:0.35rem; }
.pv-tags--sm .pv-tag { font-size:0.65rem; padding:0.12rem 0.5rem; }
.pv-tag { display:inline-block; padding:0.18rem 0.6rem; border-radius:999px; font-size:0.7rem; font-weight:600; background:var(--color-surface-soft); border:1px solid var(--color-border); color:var(--color-text-muted); transition:all 0.15s; }
.pv-tag:hover { border-color:var(--color-primary); color:var(--color-primary); background:var(--pv-blog-l); }

/* ── Author chip ────────────────────────────────────── */
.pv-author { display:inline-flex; align-items:center; gap:0.55rem; }
.pv-author--sm { gap:0.4rem; }
.pv-author__av { width:2.2rem; height:2.2rem; border-radius:50%; flex-shrink:0; color:#fff; font-size:0.85rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.pv-author__av--sm { width:1.7rem; height:1.7rem; font-size:0.72rem; }
.pv-av--blog { background:linear-gradient(135deg,#2563eb,#7c3aed); }
.pv-av--news { background:linear-gradient(135deg,#0d9488,#059669); }
.pv-author__name { font-size:0.82rem; font-weight:600; color:var(--color-text-muted); }
.pv-author__role { font-size:0.7rem; color:var(--color-text-soft); }

/* ── Hero ───────────────────────────────────────────── */
.pv-hero {
  padding: calc(var(--header-h) + 3rem) 0 3rem;
  position:relative; overflow:hidden;
}
.pv-hero--blog { background:linear-gradient(160deg,#f0f4ff 0%,#f8faff 60%,#fff 100%); }
.pv-hero--news { background:linear-gradient(160deg,#f0fdfc 0%,#f8faff 60%,#fff 100%); }
html[data-theme="dark"] .pv-hero--blog { background:linear-gradient(160deg,#050c1a 0%,#0a1628 100%); }
html[data-theme="dark"] .pv-hero--news { background:linear-gradient(160deg,#022c22 0%,#050c1a 100%); }

.pv-hero__bg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(37,99,235,.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 0% 100%, rgba(124,58,237,.05) 0%, transparent 55%);
}
.pv-hero--news .pv-hero__bg {
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(13,148,136,.09) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 0% 100%, rgba(5,150,105,.06) 0%, transparent 55%);
}
.pv-hero__body { position:relative; z-index:1; max-width:680px; }
.pv-hero__label { display:flex; align-items:center; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.pv-hero__title {
  font-size:clamp(2.2rem,4.5vw,3.6rem); font-weight:800; letter-spacing:-0.04em; line-height:1.05;
  color:var(--color-text); margin:0 0 0.75rem;
}
.pv-hero__title--news {
  background:linear-gradient(135deg,var(--color-text) 0%,var(--pv-news) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.pv-hero__sub { font-size:1rem; color:var(--color-text-muted); line-height:1.7; max-width:55ch; margin-bottom:1.75rem; }

/* Search bar */
.pv-search { max-width:520px; }
.pv-search__wrap {
  display:flex; align-items:center; gap:0.4rem;
  background:var(--color-surface); border:1.5px solid var(--color-border);
  border-radius:12px; padding:0.4rem 0.4rem 0.4rem 1rem;
  box-shadow:0 2px 8px rgba(0,0,0,.06); transition:border-color .2s,box-shadow .2s;
}
.pv-search__wrap:focus-within { border-color:var(--pv-blog); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.pv-search--news .pv-search__wrap:focus-within { border-color:var(--pv-news); box-shadow:0 0 0 3px rgba(13,148,136,.12); }
.pv-search__icon { width:1rem; height:1rem; color:var(--color-text-soft); flex-shrink:0; }
.pv-search__input { flex:1; border:none; outline:none; background:transparent; font-size:0.875rem; color:var(--color-text); font-family:inherit; min-width:0; }
.pv-search__input::placeholder { color:var(--color-text-soft); }
.pv-search__btn { flex-shrink:0; padding:0.5rem 1.1rem; border-radius:8px; border:none; background:var(--pv-blog); color:#fff; font-size:0.8rem; font-weight:700; cursor:pointer; transition:background .2s; font-family:inherit; }
.pv-search__btn:hover { background:var(--pv-blog-2); }
.pv-search__btn--teal { background:var(--pv-news) !important; }
.pv-search__btn--teal:hover { background:var(--pv-news-2) !important; }

/* ── Category tab bar ───────────────────────────────── */
.pv-tabs {
  background:var(--color-surface); border-bottom:1px solid var(--color-border);
  position:sticky; top:var(--header-h); z-index:50;
  box-shadow:0 1px 0 var(--color-border);
}
.pv-tabs__row {
  display:flex; align-items:center; gap:0.25rem;
  overflow-x:auto; padding:0.6rem 0;
  scrollbar-width:none;
}
.pv-tabs__row::-webkit-scrollbar { display:none; }
.pv-tab {
  display:inline-flex; align-items:center; white-space:nowrap;
  padding:0.38rem 1rem; border-radius:8px;
  font-size:0.78rem; font-weight:600;
  color:var(--color-text-muted); text-decoration:none;
  transition:all .15s; border:1.5px solid transparent;
}
.pv-tab:hover { background:var(--color-surface-soft); color:var(--color-text); }
.pv-tab--on { background:var(--pv-blog-l); color:var(--pv-blog); border-color:rgba(37,99,235,.25); }
.pv-tab--web.pv-tab--on    { background:var(--pv-web-l);      color:var(--pv-web);      border-color:rgba(37,99,235,.25); }
.pv-tab--software.pv-tab--on { background:var(--pv-software-l); color:var(--pv-software); border-color:rgba(124,58,237,.25); }
.pv-tab--security.pv-tab--on { background:var(--pv-security-l); color:var(--pv-security); border-color:rgba(220,38,38,.25); }
.pv-tab--ai.pv-tab--on       { background:var(--pv-ai-l);       color:var(--pv-ai);       border-color:rgba(217,119,6,.25); }
.pv-tab--vision.pv-tab--on   { background:var(--pv-vision-l);   color:var(--pv-vision);   border-color:rgba(5,150,105,.25); }

/* ── Filter bar ─────────────────────────────────────── */
.pv-filter-bar {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--color-surface-soft); border:1px solid var(--color-border);
  border-radius:10px; padding:0.7rem 1.2rem; margin-bottom:1.5rem;
  font-size:0.82rem; color:var(--color-text-muted);
}
.pv-filter-bar__reset { font-size:0.78rem; font-weight:600; color:var(--color-text-soft); text-decoration:none; padding:0.3rem 0.7rem; border-radius:6px; border:1px solid var(--color-border); background:var(--color-surface); transition:all .15s; }
.pv-filter-bar__reset:hover { border-color:var(--color-danger); color:var(--color-danger); }

/* ── Content wrapper ─────────────────────────────────── */
.pv-content { padding:2.5rem 0 4rem; }

/* ── Featured post ──────────────────────────────────── */
.pv-feature {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-radius:16px; overflow:hidden;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  box-shadow:0 4px 24px rgba(0,0,0,.07);
  text-decoration:none; margin-bottom:3rem;
  transition:transform .3s,box-shadow .3s;
}
.pv-feature:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.1); }
@media (max-width:720px) { .pv-feature { grid-template-columns:1fr; } }

.pv-feature__img { position:relative; overflow:hidden; min-height:320px; }
.pv-feature__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.pv-feature:hover .pv-feature__img img { transform:scale(1.04); }
.pv-feature__noimg { width:100%; height:100%; min-height:320px; display:flex; align-items:center; justify-content:center; }
.pv-noimg--web      { background:linear-gradient(135deg,#dbeafe 0%,#ede9fe 100%); }
.pv-noimg--software { background:linear-gradient(135deg,#ede9fe 0%,#fce7f3 100%); }
.pv-noimg--security { background:linear-gradient(135deg,#fee2e2 0%,#fef3c7 100%); }
.pv-noimg--ai       { background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%); }
.pv-noimg--vision   { background:linear-gradient(135deg,#d1fae5 0%,#ccfbf1 100%); }
.pv-noimg--other    { background:linear-gradient(135deg,#f1f5f9 0%,#e2e8f0 100%); }
.pv-noimg--news     { background:linear-gradient(135deg,#ccfbf1 0%,#d1fae5 100%); }
.pv-noimg__icon { font-size:3.5rem; opacity:.4; }

.pv-feature__label {
  position:absolute; top:1rem; left:1rem;
  padding:0.28rem 0.8rem; border-radius:999px;
  font-size:0.65rem; font-weight:800; text-transform:uppercase; letter-spacing:0.1em;
  background:var(--pv-blog); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.35);
}
.pv-feature__label--teal { background:var(--pv-news) !important; box-shadow:0 2px 8px rgba(13,148,136,.35) !important; }

.pv-feature--news { border-top:3px solid var(--pv-news); }
.pv-feature__body { padding:2.5rem; display:flex; flex-direction:column; gap:1rem; }
@media (max-width:720px) { .pv-feature__body { padding:1.5rem; } }

.pv-feature__title { font-size:clamp(1.4rem,2.5vw,1.9rem); font-weight:800; line-height:1.15; letter-spacing:-0.03em; color:var(--color-text); }
.pv-feature__excerpt { color:var(--color-text-muted); font-size:0.95rem; line-height:1.7; flex:1; }
.pv-feature__foot { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; flex-wrap:wrap; margin-top:0.5rem; }

.pv-cta { font-size:0.85rem; font-weight:700; color:var(--pv-blog); }
.pv-cta--teal { color:var(--pv-news) !important; }

.pv-card__cats { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.pv-card__date { font-size:0.72rem; color:var(--color-text-soft); font-weight:500; }

/* ── Card grid ──────────────────────────────────────── */
.pv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:1.5rem; }
.pv-grid--3 { grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:1.5rem; }

.pv-card {
  display:flex; flex-direction:column;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--pv-card-r); overflow:hidden; text-decoration:none;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  transition:transform .25s,box-shadow .25s,border-color .25s;
  position:relative;
}
.pv-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--pv-card-r) var(--pv-card-r) 0 0; }
.pv-card--web::before      { background:linear-gradient(90deg,#2563eb,#7c3aed); }
.pv-card--software::before { background:linear-gradient(90deg,#7c3aed,#a855f7); }
.pv-card--security::before { background:linear-gradient(90deg,#dc2626,#f97316); }
.pv-card--ai::before       { background:linear-gradient(90deg,#d97706,#f59e0b); }
.pv-card--vision::before   { background:linear-gradient(90deg,#059669,#10b981); }
.pv-card--other::before    { background:linear-gradient(90deg,#64748b,#94a3b8); }
.pv-card--news::before     { background:linear-gradient(90deg,#0d9488,#059669); }
.pv-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.1); border-color:var(--color-primary); }
.pv-card--news:hover { border-color:var(--pv-news); }

.pv-card__img { position:relative; overflow:hidden; aspect-ratio:16/9; }
.pv-card__img img { width:100%; height:100%; object-fit:cover; transition:transform .45s; }
.pv-card:hover .pv-card__img img { transform:scale(1.06); }
.pv-card__noimg { width:100%; height:100%; min-height:150px; display:flex; align-items:center; justify-content:center; }
.pv-card__cat-badge { position:absolute; top:0.65rem; left:0.65rem; font-size:0.62rem !important; padding:0.15rem 0.5rem !important; }

.pv-card__body { padding:1.2rem; flex:1; display:flex; flex-direction:column; gap:0.55rem; }
.pv-card__title { font-size:1rem; font-weight:700; line-height:1.3; letter-spacing:-0.01em; color:var(--color-text); }
.pv-card:hover .pv-card__title { color:var(--pv-blog); }
.pv-card--news:hover .pv-card__title { color:var(--pv-news); }
.pv-card__excerpt { font-size:0.825rem; color:var(--color-text-muted); line-height:1.65; flex:1; }
.pv-card__foot { display:flex; align-items:center; justify-content:space-between; padding-top:0.7rem; border-top:1px solid var(--color-border-soft); margin-top:auto; }
.pv-card__readmore { font-size:0.75rem; font-weight:700; color:var(--pv-blog); white-space:nowrap; }
.pv-card__readmore--news { color:var(--pv-news) !important; }

/* ── Empty state ─────────────────────────────────────── */
.pv-empty { text-align:center; padding:5rem 2rem; background:var(--color-surface); border:1.5px dashed var(--color-border); border-radius:16px; }
.pv-empty__icon { font-size:3.5rem; margin-bottom:1rem; opacity:.4; }
.pv-empty__title { font-size:1.3rem; font-weight:700; margin-bottom:0.5rem; }
.pv-empty__desc { color:var(--color-text-muted); margin-bottom:1rem; }

/* ── CTA section ─────────────────────────────────────── */
.pv-cta { padding:4rem 0; }
.pv-cta--blog { background:linear-gradient(135deg,#f0f4ff,#faf5ff); border-top:1px solid var(--color-border); }
.pv-cta--news { background:linear-gradient(135deg,#f0fdfc,#f0fdf4); border-top:1px solid var(--color-border); }
html[data-theme="dark"] .pv-cta--blog { background:linear-gradient(135deg,#0c1628,#1e1b4b); }
html[data-theme="dark"] .pv-cta--news { background:linear-gradient(135deg,#022c22,#042f2e); }

.pv-cta__inner {
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  background:linear-gradient(135deg,var(--pv-blog) 0%,#4f46e5 100%);
  border-radius:18px; padding:3rem;
  box-shadow:0 16px 48px rgba(37,99,235,.22);
  position:relative; overflow:hidden;
}
.pv-cta--news .pv-cta__inner { background:linear-gradient(135deg,var(--pv-news) 0%,#059669 100%) !important; box-shadow:0 16px 48px rgba(13,148,136,.22) !important; }
.pv-cta__text { position:relative; }
.pv-cta__text h2 { color:#fff; font-size:clamp(1.3rem,3vw,1.8rem); letter-spacing:-0.03em; margin-bottom:0.4rem; }
.pv-cta__text p  { color:rgba(255,255,255,.8); font-size:0.95rem; }
.pv-cta__actions { display:flex; gap:0.75rem; flex-wrap:wrap; position:relative; }
.pv-cta__inner .btn-ghost { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3); color:#fff; }
.pv-cta__inner .btn-ghost:hover { background:rgba(255,255,255,.25); }
.pv-cta__inner .btn-primary { background:#fff; color:var(--pv-blog); box-shadow:0 4px 16px rgba(0,0,0,.15); }
.pv-cta__inner .btn-primary:hover { background:#f0f4ff; }
.pv-cta--news .pv-cta__inner .btn-primary { color:var(--pv-news) !important; }
.pv-cta--news .pv-cta__inner .btn-secondary { background:#fff; color:var(--pv-news); box-shadow:0 4px 16px rgba(0,0,0,.15); }
.pv-cta--news .pv-cta__inner .btn-secondary:hover { background:#f0fdfc; }

/* ── News feed list ──────────────────────────────────── */
.nf-section { margin-top:3rem; }
.nf-section__title { font-size:1.1rem; font-weight:700; color:var(--color-text); margin-bottom:1.25rem; display:flex; align-items:center; gap:0.6rem; }
.nf-section__title::before { content:''; display:block; width:4px; height:1.1rem; border-radius:2px; background:var(--pv-news); }
.nf-list { display:flex; flex-direction:column; gap:1px; background:var(--color-border); border-radius:12px; overflow:hidden; border:1px solid var(--color-border); }

.nf-item {
  display:grid; grid-template-columns:220px 1fr;
  background:var(--color-surface); text-decoration:none;
  transition:background .15s;
}
.nf-item:hover { background:var(--color-surface-soft); }
@media (max-width:580px) { .nf-item { grid-template-columns:1fr; } }

.nf-item__img { overflow:hidden; position:relative; min-height:130px; }
.nf-item__img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.nf-item:hover .nf-item__img img { transform:scale(1.05); }
.nf-item__noimg { width:100%; height:100%; background:var(--pv-news-l); display:flex; align-items:center; justify-content:center; font-size:1.8rem; opacity:.6; }

.nf-item__body { padding:1.25rem 1.5rem; display:flex; flex-direction:column; gap:0.45rem; border-left:1px solid var(--color-border); }
@media (max-width:580px) { .nf-item__body { border-left:none; border-top:1px solid var(--color-border); padding:1rem; } }
.nf-item__meta { display:flex; align-items:center; gap:0.5rem; }
.nf-item__title { font-size:1.02rem; font-weight:700; line-height:1.3; letter-spacing:-0.01em; color:var(--color-text); transition:color .15s; }
.nf-item:hover .nf-item__title { color:var(--pv-news); }
.nf-item__excerpt { font-size:0.82rem; color:var(--color-text-muted); line-height:1.6; flex:1; }
.nf-item__foot { display:flex; align-items:center; justify-content:space-between; margin-top:0.25rem; }
.nf-readmore { font-size:0.75rem; font-weight:700; color:var(--pv-news); }

/* ── Article header ──────────────────────────────────── */
.art-header {
  padding:calc(var(--header-h) + 2.5rem) 0 2.5rem;
  border-bottom:1px solid var(--color-border);
}
.art-header--blog { background:linear-gradient(180deg,var(--color-surface-soft) 0%,var(--color-surface) 100%); }
.art-header--news { background:linear-gradient(180deg,#f0fdfc 0%,var(--color-surface) 100%); }
html[data-theme="dark"] .art-header--blog { background:linear-gradient(180deg,#0c1628 0%,var(--color-surface) 100%); }
html[data-theme="dark"] .art-header--news { background:linear-gradient(180deg,#022c22 0%,var(--color-surface) 100%); }
.art-header__body { max-width:780px; }
.art-header__meta { display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem; flex-wrap:wrap; }
.art-header__date { font-size:0.8rem; color:var(--color-text-soft); font-weight:500; }
.art-header__title { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; line-height:1.1; letter-spacing:-0.04em; color:var(--color-text); margin:0 0 1.25rem; }
.art-header__byline { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }

.art-header__cover { margin-top:2.5rem; }
.art-header__cover-img { width:100%; max-height:480px; object-fit:cover; border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.1); }

/* ── Article two-column layout ───────────────────────── */
.art-layout { padding:3rem 0 5rem; }
.art-layout__inner { display:grid; grid-template-columns:1fr 280px; gap:3.5rem; align-items:start; }
@media (max-width:900px) { .art-layout__inner { grid-template-columns:1fr; } }

/* Article body */
.art-body { }
.art-lead {
  font-size:1.15rem; font-weight:500; line-height:1.7; color:var(--color-text);
  border-left:4px solid var(--pv-blog); padding-left:1.2rem; margin-bottom:2.5rem;
  font-style:italic;
}
.art-lead--news { border-left-color:var(--pv-news) !important; }
.art-prose { font-size:1rem; line-height:1.9; color:var(--color-text-muted); }
.art-prose p { margin-bottom:1.4rem; }
.art-prose h2 { font-size:1.4rem; color:var(--color-text); margin:2.5rem 0 0.75rem; letter-spacing:-0.02em; }
.art-prose h3 { font-size:1.15rem; color:var(--color-text); margin:2rem 0 0.6rem; }
.art-prose ul,.art-prose ol { padding-left:1.5rem; margin-bottom:1.4rem; }
.art-prose li { margin-bottom:0.4rem; }
.art-prose blockquote { border-left:4px solid var(--pv-blog); background:var(--color-surface-soft); padding:1rem 1.5rem; border-radius:0 10px 10px 0; margin:1.5rem 0; font-style:italic; color:var(--color-text); }
.art-prose code { background:var(--color-surface-soft); border:1px solid var(--color-border); padding:0.15rem 0.4rem; border-radius:5px; font-size:0.85em; font-family:var(--font-mono); }
.art-prose pre { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:10px; padding:1.5rem; overflow-x:auto; margin:1.5rem 0; }
.art-prose pre code { background:none; border:none; padding:0; }
.art-prose img { border-radius:10px; margin:1.5rem 0; box-shadow:0 4px 20px rgba(0,0,0,.08); }
.art-prose a { color:var(--pv-blog); text-decoration:underline; }
.art-body__foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--color-border); }

/* Article sidebar */
.art-sidebar { position:sticky; top:calc(var(--header-h) + 1.5rem); }
.art-scard {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:12px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.art-scard--news { border-top:3px solid var(--pv-news); }
.art-scard__head { padding:0.9rem 1.2rem; font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; color:var(--color-text-soft); background:var(--color-surface-soft); border-bottom:1px solid var(--color-border); }
.art-scard__author { padding:1.2rem; text-align:center; }
.art-scard__av { width:3.2rem; height:3.2rem; border-radius:50%; margin:0 auto 0.65rem; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem; font-weight:800; }
.art-scard__author-name { font-size:0.95rem; font-weight:700; color:var(--color-text); }
.art-scard__author-role { font-size:0.75rem; color:var(--color-text-soft); margin-top:0.2rem; }
.art-scard__divider { height:1px; background:var(--color-border); }
.art-scard__row { display:flex; align-items:center; justify-content:space-between; padding:0.6rem 1.2rem; border-top:1px solid var(--color-border-soft); font-size:0.78rem; }
.art-scard__row span:first-child { color:var(--color-text-soft); }
.art-scard__row strong { color:var(--color-text); }
.art-scard__row--col { flex-direction:column; align-items:flex-start; }
.art-scard__pubrow { display:flex; align-items:center; gap:0.75rem; padding:1rem 1.2rem; }
.art-scard__logo { width:2rem; height:2rem; border-radius:6px; object-fit:contain; }

/* ── Related section ─────────────────────────────────── */
.pv-related { padding:3.5rem 0; background:var(--color-surface-2); border-top:1px solid var(--color-border); }
.pv-related--news { background:linear-gradient(180deg,var(--color-surface-2),#f0fdfc); }
.pv-related__head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:2rem; }
.pv-related__title { font-size:1.2rem; font-weight:800; color:var(--color-text); letter-spacing:-0.02em; }



/* ═══════════════════════════════════════
   Portfolio — Public Pages
   ═══════════════════════════════════════ */

/* ── Hero ───────────────────────────────────── */
.pf-hero {
  padding: calc(var(--header-h) + 3.5rem) 0 3.5rem;
  background: linear-gradient(160deg,#f5f3ff 0%,#f0f4ff 50%,#fff 100%);
  position: relative; overflow: hidden;
}
html[data-theme="dark"] .pf-hero { background: linear-gradient(160deg,#1e1b4b 0%,#0c1628 100%); }
.pf-hero__glow { position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none; }
.pf-hero__glow--1 { width:600px;height:600px;background:radial-gradient(circle,rgba(124,58,237,.12) 0%,transparent 70%);top:-200px;right:-100px; }
.pf-hero__glow--2 { width:500px;height:500px;background:radial-gradient(circle,rgba(37,99,235,.1) 0%,transparent 70%);bottom:-100px;left:-150px; }
.pf-hero__body { position:relative;z-index:1;max-width:700px;display:flex;flex-direction:column;gap:1.25rem; }
.pf-hero__title {
  font-size:clamp(2.4rem,5vw,3.8rem);font-weight:800;line-height:1.05;letter-spacing:-0.04em;color:var(--color-text);margin:0;
}
.pf-hero__title-accent {
  background:linear-gradient(135deg,#7c3aed,#2563eb);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.pf-hero__sub { font-size:1.05rem;color:var(--color-text-muted);line-height:1.75;max-width:58ch;margin:0; }
.pf-hero__stats { display:flex;align-items:center;gap:0;flex-wrap:wrap;background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);max-width:420px; }
.pf-hero__stat { flex:1;padding:1rem 1.5rem;text-align:center;min-width:110px; }
.pf-hero__stat-val { display:block;font-size:1.6rem;font-weight:800;background:linear-gradient(135deg,#7c3aed,#2563eb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1; }
.pf-hero__stat-lbl { display:block;font-size:0.72rem;color:var(--color-text-soft);font-weight:600;text-transform:uppercase;letter-spacing:0.07em;margin-top:0.25rem; }
.pf-hero__stat-div { width:1px;background:var(--color-border);align-self:stretch; }

/* ── Content wrapper ────────────────────────── */
.pf-content { padding:2.5rem 0 5rem; }

/* ── Featured case study ────────────────────── */
.pf-featured {
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:18px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.08);
  text-decoration:none;margin-bottom:3rem;
  transition:transform .3s,box-shadow .3s;
}
.pf-featured:hover { transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.12); }
@media (max-width:720px) { .pf-featured { grid-template-columns:1fr; } }

.pf-featured__img { position:relative;overflow:hidden;min-height:360px; }
.pf-featured__img img { width:100%;height:100%;object-fit:cover;transition:transform .5s; }
.pf-featured:hover .pf-featured__img img { transform:scale(1.04); }
.pf-featured__img-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 60%); }
.pf-featured__noimg { width:100%;height:100%;min-height:360px;display:flex;align-items:center;justify-content:center; }
.pf-featured__noimg-icon { font-size:5rem;font-weight:900;opacity:.2; }
.pf-featured__img-content { position:absolute;bottom:1.25rem;left:1.25rem;display:flex;flex-direction:column;gap:0.5rem; }
.pf-featured__client { font-size:0.8rem;font-weight:600;color:rgba(255,255,255,.85);background:rgba(0,0,0,.3);backdrop-filter:blur(4px);padding:0.25rem 0.65rem;border-radius:999px;width:fit-content; }
.pf-featured__badge { position:absolute;top:1.25rem;left:1.25rem;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;font-size:0.65rem;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;padding:0.3rem 0.9rem;border-radius:999px;box-shadow:0 2px 12px rgba(124,58,237,.4); }

.pf-featured__body { padding:2.5rem;display:flex;flex-direction:column;gap:1.1rem;justify-content:center; }
@media (max-width:720px) { .pf-featured__body { padding:1.75rem; } }
.pf-featured__title { font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:800;line-height:1.15;letter-spacing:-0.03em;color:var(--color-text); }
.pf-featured__desc { color:var(--color-text-muted);font-size:0.95rem;line-height:1.7;flex:1; }
.pf-featured__cta { display:flex;align-items:center; }
.pf-cta-link { font-size:0.9rem;font-weight:700;color:#7c3aed;transition:gap .2s; }
.pf-featured:hover .pf-cta-link { color:#2563eb; }

/* KPI row in featured card */
.pf-kpi-row { display:flex;gap:0;background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:12px;overflow:hidden; }
.pf-kpi-item { flex:1;padding:0.85rem 1rem;text-align:center;border-right:1px solid var(--color-border); }
.pf-kpi-item:last-child { border-right:none; }
.pf-kpi-val { font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,#7c3aed,#2563eb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1; }
.pf-kpi-lbl { font-size:0.7rem;color:var(--color-text-soft);font-weight:600;margin-top:0.2rem;text-transform:uppercase;letter-spacing:0.05em; }

/* ── Portfolio grid ──────────────────────────── */
.pf-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:1.75rem; }
.pf-grid--3 { grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:1.5rem; }

.pf-card {
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:14px;overflow:hidden;text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s;
}
.pf-card:hover { transform:translateY(-5px);box-shadow:0 16px 48px rgba(0,0,0,.1); }

.pf-card__img { position:relative;overflow:hidden;aspect-ratio:16/9; }
.pf-card__img img { width:100%;height:100%;object-fit:cover;transition:transform .45s; }
.pf-card:hover .pf-card__img img { transform:scale(1.06); }
.pf-card__noimg { width:100%;height:100%;display:flex;align-items:center;justify-content:center; }
.pf-card__noimg-icon { font-size:2.8rem;opacity:.5; }
.pf-card__overlay { position:absolute;inset:0;background:rgba(15,23,42,.5);opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity .25s; }
.pf-card:hover .pf-card__overlay { opacity:1; }
.pf-card__view-btn { background:#fff;color:#0f172a;font-size:0.8rem;font-weight:700;padding:0.5rem 1.1rem;border-radius:999px;transition:background .15s; }
.pf-card__star { position:absolute;top:0.65rem;right:0.65rem;font-size:1rem;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4)); }

.pf-card__body { padding:1.25rem;flex:1;display:flex;flex-direction:column;gap:0.55rem; }
.pf-card__meta { display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap; }
.pf-card__client { font-size:0.72rem;color:var(--color-text-soft);font-weight:500; }
.pf-card__title { font-size:1rem;font-weight:700;line-height:1.3;letter-spacing:-0.01em;color:var(--color-text); }
.pf-card:hover .pf-card__title { color:#7c3aed; }
.pf-card__desc { font-size:0.825rem;color:var(--color-text-muted);line-height:1.65;flex:1; }
.pf-card__kpis { display:flex;gap:1rem;margin-top:0.25rem;padding-top:0.75rem;border-top:1px solid var(--color-border-soft); }
.pf-card__kpi { display:flex;flex-direction:column;gap:0.1rem; }
.pf-card__kpi-val { font-size:1.1rem;font-weight:800;background:linear-gradient(135deg,#7c3aed,#2563eb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1; }
.pf-card__kpi-lbl { font-size:0.65rem;color:var(--color-text-soft);font-weight:600;text-transform:uppercase;letter-spacing:0.05em; }

/* ── CTA Section ─────────────────────────────── */
.pf-cta-section { padding:4.5rem 0;background:var(--color-surface-2);border-top:1px solid var(--color-border); }
.pf-cta-inner {
  background:linear-gradient(135deg,#7c3aed 0%,#2563eb 100%);
  border-radius:20px;padding:3.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  box-shadow:0 20px 60px rgba(124,58,237,.25);position:relative;overflow:hidden;
}
.pf-cta-inner::before { content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(255,255,255,.08),transparent); }
.pf-cta-text { position:relative; }
.pf-cta-eyebrow { font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,.6);margin-bottom:0.5rem; }
.pf-cta-text h2 { color:#fff;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-0.03em;margin-bottom:0.5rem; }
.pf-cta-text p { color:rgba(255,255,255,.8);font-size:0.95rem; }
.pf-cta-actions { display:flex;gap:0.75rem;flex-wrap:wrap;position:relative; }
.pf-cta-inner .btn-primary { background:#fff;color:#7c3aed;box-shadow:0 4px 20px rgba(0,0,0,.2); }
.pf-cta-inner .btn-primary:hover { background:#f5f3ff; }
.pf-cta-inner .btn-ghost { background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#fff; }
.pf-cta-inner .btn-ghost:hover { background:rgba(255,255,255,.25); }

/* ── Detail: header ──────────────────────────── */
.pf-detail-header {
  padding:calc(var(--header-h) + 2.5rem) 0 2.5rem;
  background:linear-gradient(180deg,#f5f3ff 0%,var(--color-surface) 100%);
  border-bottom:1px solid var(--color-border);
}
html[data-theme="dark"] .pf-detail-header { background:linear-gradient(180deg,#1e1b4b 0%,var(--color-surface) 100%); }
.pf-detail-header__body { max-width:800px; }
.pf-detail-header__meta { display:flex;align-items:center;gap:0.65rem;margin-bottom:1rem;flex-wrap:wrap; }
.pf-detail-header__industry { font-size:0.78rem;color:var(--color-text-soft);background:var(--color-surface-soft);border:1px solid var(--color-border);padding:0.2rem 0.6rem;border-radius:999px; }
.pf-detail-header__star { font-size:0.72rem;font-weight:700;background:#fef3c7;color:#b45309;border:1px solid #fde68a;padding:0.2rem 0.65rem;border-radius:999px; }
.pf-detail-header__title { font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;line-height:1.1;letter-spacing:-0.04em;color:var(--color-text);margin:0 0 0.75rem; }
.pf-detail-header__tagline { font-size:1.1rem;color:var(--color-text-muted);line-height:1.65;margin:0 0 1.25rem;max-width:65ch; }
.pf-detail-header__info { display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap; }
.pf-info-chip { display:inline-flex;align-items:center;gap:0.4rem;font-size:0.82rem;font-weight:600;color:var(--color-text-muted);background:var(--color-surface-soft);border:1px solid var(--color-border);padding:0.3rem 0.85rem;border-radius:999px; }
.pf-info-chip--link { color:#7c3aed;border-color:#ddd6fe;background:#f5f3ff;text-decoration:none;transition:all .15s; }
.pf-info-chip--link:hover { background:#ede9fe;border-color:#c4b5fd; }
.pf-detail-header__cover { margin-top:2.5rem; }
.pf-detail-header__cover-img { width:100%;max-height:520px;object-fit:cover;border-radius:16px;box-shadow:0 12px 48px rgba(0,0,0,.1); }

/* ── Detail: KPI metrics bar ─────────────────── */
.pf-metrics-bar { background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:2rem 0; }
.pf-metrics { display:flex;justify-content:center;gap:0;max-width:700px;margin:0 auto;background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:14px;overflow:hidden; }
.pf-metric { flex:1;padding:1.5rem 1.25rem;text-align:center;border-right:1px solid var(--color-border);min-width:120px; }
.pf-metric:last-child { border-right:none; }
.pf-metric__val { font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,#7c3aed,#2563eb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:0.4rem; }
.pf-metric__lbl { font-size:0.75rem;color:var(--color-text-soft);font-weight:600;text-transform:uppercase;letter-spacing:0.07em; }
.pf-metric__div { width:1px;background:var(--color-border); }

/* ── Detail: main layout ─────────────────────── */
.pf-detail-layout { padding:3rem 0 5rem; }
.pf-detail-inner { display:grid;grid-template-columns:1fr 280px;gap:3.5rem;align-items:start; }
@media (max-width:900px) { .pf-detail-inner { grid-template-columns:1fr; } }

.pf-detail-section { margin-bottom:0; }
.pf-detail-section__title { font-size:1.2rem;font-weight:800;color:var(--color-text);margin-bottom:1rem;letter-spacing:-0.02em; }
.pf-detail-foot { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--color-border); }

/* Challenge / Solution / Result blocks */
.pf-csection { display:flex;gap:1.25rem;padding:1.75rem;border-radius:14px;border:1px solid var(--color-border); }
.pf-csection--challenge { background:linear-gradient(135deg,#fef3c7,#fffbeb);border-color:#fde68a; }
.pf-csection--solution  { background:linear-gradient(135deg,#dbeafe,#eff6ff);border-color:#bfdbfe; }
.pf-csection--result    { background:linear-gradient(135deg,#d1fae5,#ecfdf5);border-color:#a7f3d0; }
html[data-theme="dark"] .pf-csection--challenge { background:linear-gradient(135deg,#1c1207,#111); }
html[data-theme="dark"] .pf-csection--solution  { background:linear-gradient(135deg,#0f1e3d,#111); }
html[data-theme="dark"] .pf-csection--result    { background:linear-gradient(135deg,#052e16,#111); }
.pf-csection__icon { font-size:1.8rem;flex-shrink:0;line-height:1; }
.pf-csection__title { font-size:1rem;font-weight:800;color:var(--color-text);margin-bottom:0.6rem;letter-spacing:-0.01em; }
.pf-csection__body { font-size:0.9rem;color:var(--color-text-muted);line-height:1.8; }
.pf-csection__body p { margin-bottom:0.75rem; }
.pf-csection__body p:last-child { margin-bottom:0; }

/* Tech stack */
.pf-tech-grid { display:flex;flex-wrap:wrap;gap:0.5rem; }
.pf-tech-chip { display:inline-flex;align-items:center;gap:0.3rem;font-size:0.75rem;font-weight:700;padding:0.3rem 0.75rem;border-radius:8px;background:var(--color-surface-soft);border:1px solid var(--color-border);color:var(--color-text-muted);transition:all .15s; }
.pf-tech-chip:hover { border-color:#7c3aed;color:#7c3aed;background:#f5f3ff; }

/* Sidebar CTA */
.pf-sidebar-cta { margin-top:1rem;padding:1.5rem;background:linear-gradient(135deg,#f5f3ff,#ede9fe);border:1px solid #ddd6fe;border-radius:12px;text-align:center; }
.pf-sidebar-cta__title { font-size:0.9rem;font-weight:800;color:var(--color-text);margin-bottom:0.3rem; }
.pf-sidebar-cta__sub { font-size:0.8rem;color:var(--color-text-muted);margin-bottom:1rem; }

/* ─── Dashboard: Portfolio form extras ─────── */
.mgmt-form-layout--wide .mgmt-form-sidebar { min-width:260px; }
.pf-section-label { font-size:0.78rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.5rem;display:flex;align-items:center;gap:0.4rem;padding:0.35rem 0.75rem;border-radius:6px;width:fit-content; }
.pf-section-label--challenge { background:#fef3c7;color:#92400e; }
.pf-section-label--solution  { background:#dbeafe;color:#1e40af; }
.pf-section-label--result    { background:#d1fae5;color:#065f46; }
.pf-kpi-row-input { display:flex;align-items:flex-start;gap:0.75rem;padding:0.75rem;background:var(--dash-bg);border-radius:8px;border:1px solid var(--dash-border); }
.pf-kpi-num { font-size:0.72rem;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:0.08em;padding-top:0.65rem;white-space:nowrap;min-width:40px; }

/* ─── Responsive ────────────────────────────────── */
@media (min-width: 640px) {
  .desktop-only { display: inline-flex; }
  .site-nav { display: block; }
  .mobile-menu-toggle { display: none; }
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}