/* =========================================================
   Modern Workplace Mindset — Design System
   Default theme: DARK. Light theme available via toggle.
   ========================================================= */
:root{
  --bg: #0b0d14;
  --bg-elevated: #12141e;
  --bg-alt: #161925;
  --text: #eef0f8;
  --text-muted: #a3a8c3;
  --border: #23273a;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --purple: #7c3aed;
  --teal: #0d9488;
  --green: #16a34a;
  --gradient: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(124,58,237,0.25);
  --radius: 18px;
  --font-head: 'Manrope', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --header-h: 76px;
}

[data-theme="light"]{
  --bg: #f6f7fb;
  --bg-elevated: #ffffff;
  --bg-alt: #eef1f8;
  --text: #14161f;
  --text-muted: #545a72;
  --border: #e3e6f0;
  --shadow-sm: 0 2px 8px rgba(20,22,31,0.06);
  --shadow-md: 0 8px 30px rgba(20,22,31,0.08);
  --shadow-lg: 0 20px 60px rgba(37,99,235,0.15);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  transition: background .35s ease, color .35s ease;
  overflow-x: hidden;
}
h1,h2,h3{ font-family: var(--font-head); font-weight:800; margin:0 0 .5em; letter-spacing:-0.02em; }
p{ margin:0 0 1em; color: var(--text-muted); line-height:1.7; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }

.bg-glow{ position:fixed; border-radius:50%; filter: blur(120px); opacity:.35; z-index:-1; pointer-events:none; }
.bg-glow-1{ width:600px; height:600px; background: var(--blue); top:-200px; right:-150px; }
.bg-glow-2{ width:500px; height:500px; background: var(--purple); bottom:-150px; left:-150px; }

.site-header{
  position: sticky; top:0; z-index:100;
  backdrop-filter: blur(14px) saturate(160%);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
}
.header-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-head); font-weight:800; font-size:1.05rem; white-space:nowrap; }
.brand-logo{ width:34px; height:34px; object-fit:contain; }
.brand-accent{ background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }

.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{ font-size:.92rem; font-weight:600; color: var(--text-muted); transition:color .2s; position:relative; }
.main-nav a:hover{ color: var(--text); }
.nav-cta{
  background: var(--gradient); color:#fff !important; padding:9px 18px; border-radius:999px;
  box-shadow: var(--shadow-sm);
}
.nav-cta:hover{ opacity:.92; color:#fff !important; }

.header-controls{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
  background: var(--bg-elevated); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color: var(--text); transition: all .2s;
}
.icon-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.icon-moon{ display:block; }
.icon-sun{ display:none; }
[data-theme="light"] .icon-moon{ display:none; }
[data-theme="light"] .icon-sun{ display:block; }

.hamburger{ display:none; flex-direction:column; gap:5px; width:38px; height:38px; border:none; background:none; cursor:pointer; align-items:center; justify-content:center; }
.hamburger span{ width:22px; height:2px; background: var(--text); border-radius:2px; transition:.3s; }

.hero{ padding: 90px 0 60px; position:relative; }
.hero-inner{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap:50px; align-items:center; }
.eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--blue); margin-bottom:14px;
}
.hero h1{ font-size: 3rem; line-height:1.12; margin-bottom:20px; }
.text-gradient{ background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ font-size:1.08rem; max-width:540px; }
.hero-actions{ display:flex; gap:14px; margin: 28px 0 40px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px; border-radius: 999px; font-weight:700; font-size:.95rem;
  cursor:pointer; border:none; transition: all .25s ease;
}
.btn-primary{ background: var(--gradient); color:#fff; box-shadow: var(--shadow-lg); }
.btn-primary:hover{ transform: translateY(-2px); filter:brightness(1.06); }
.btn-ghost{ background: transparent; color: var(--text); border:1.5px solid var(--border); }
.btn-ghost:hover{ border-color: var(--blue); color: var(--blue); }

.hero-stats{ display:flex; gap:36px; }
.stat{ display:flex; flex-direction:column; }
.stat-num{ font-family: var(--font-head); font-size:1.6rem; font-weight:800; }
.stat-label{ font-size:.8rem; color: var(--text-muted); font-weight:600; }

.hero-visual{ position:relative; height:420px; }
.hero-orb{
  position:absolute; inset:10%; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(37,99,235,0.35), rgba(124,58,237,0.15) 60%, transparent 70%);
  filter: blur(10px);
  animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }

.floating-card{
  position:absolute; background: var(--bg-elevated); border:1px solid var(--border);
  border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow-md);
  font-size:.85rem; font-weight:600; display:flex; align-items:center; gap:10px;
  animation: float 5s ease-in-out infinite;
}
.floating-card strong{ margin-left:auto; font-weight:800; }
.card-1{ top:8%; left:0; animation-delay: 0s; }
.card-2{ top:45%; right:0; animation-delay: 1.2s; }
.card-3{ bottom:6%; left:12%; animation-delay: 2.4s; }
@keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }

.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot-blue{ background: var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.18); }
.dot-purple{ background: var(--purple); box-shadow:0 0 0 4px rgba(124,58,237,.18); }
.dot-green{ background: var(--green); box-shadow:0 0 0 4px rgba(22,163,74,.18); }

.section{ padding: 90px 0; }
.section-alt{ background: var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section-title{ font-size:2.1rem; }
.section-sub{ font-size:1.05rem; max-width:600px; }
.section-head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:40px; }
.section-head-row .section-title, .section-head-row .section-sub{ margin-bottom:0; }

.cat-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:26px; margin-top:46px; }
.cat-card{
  background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius);
  padding: 32px 28px; transition: all .3s ease; display:block;
}
.cat-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.cat-icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:#fff; }
.icon-blue{ background: linear-gradient(135deg,#2563eb,#3b82f6); }
.icon-purple{ background: linear-gradient(135deg,#7c3aed,#a855f7); }
.icon-teal{ background: linear-gradient(135deg,#0d9488,#14b8a6); }
.cat-card h3{ font-size:1.25rem; }
.cat-link{ font-weight:700; font-size:.88rem; color: var(--blue); }

.filter-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{
  border:1px solid var(--border); background: var(--bg-elevated); color: var(--text-muted);
  padding: 9px 18px; border-radius:999px; font-weight:600; font-size:.85rem; cursor:pointer; transition: all .2s;
}
.pill:hover{ border-color: var(--blue); color: var(--text); }
.pill.active{ background: var(--gradient); color:#fff; border-color:transparent; }

.article-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.article-card{
  background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius);
  padding:28px; transition: all .3s ease; display:flex; flex-direction:column;
}
.article-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.article-card.hidden{ display:none; }
.article-tag{
  align-self:flex-start; font-size:.72rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; margin-bottom:16px;
}
.tag-blue{ background: rgba(37,99,235,.12); color: var(--blue); }
.tag-purple{ background: rgba(124,58,237,.12); color: var(--purple); }
.tag-teal{ background: rgba(13,148,136,.12); color: var(--teal); }
.article-card h3{ font-size:1.12rem; margin-bottom:10px; }
.article-meta{ margin-top:auto; padding-top:14px; font-size:.8rem; color: var(--text-muted); font-weight:600; }
.dot-sep{ margin:0 8px; }
.article-card-cta{ background: var(--gradient); color:#fff; justify-content:center; }
.article-card-cta h3, .article-card-cta p{ color:#fff; }
.article-card-cta .cat-link{ color:#fff; text-decoration:underline; }

.about-grid{ display:grid; grid-template-columns: 0.55fr 1fr; gap:60px; align-items:center; }
.about-visual{ text-align:center; }
.about-photo-ring{
  width:260px; height:260px; border-radius:50%; padding:14px;
  background: var(--gradient); margin:0 auto; box-shadow: var(--shadow-lg);
}
.about-photo-ring img{
  width:100%; height:100%; object-fit:contain; border-radius:50%; background: var(--bg-elevated); padding:30px;
}
.about-name{ margin-top:22px; margin-bottom:6px; font-size:1.4rem; }
.linkedin-link{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem;
  color: var(--blue); border:1.5px solid var(--border); padding:9px 18px; border-radius:999px;
  transition: all .2s;
}
.linkedin-link:hover{ border-color: var(--blue); background: rgba(37,99,235,.08); }
.about-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.about-list li{
  font-weight:700; font-size:.88rem; padding:10px 14px; background: var(--bg-alt);
  border-radius:10px; border:1px solid var(--border);
}

.newsletter{ text-align:center; }
.newsletter-inner{ max-width:640px; }
.newsletter h2{ font-size:2rem; }
.newsletter-form{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; justify-content:center; }
.newsletter-form input{
  flex:1; min-width:240px; padding:13px 18px; border-radius:999px; border:1.5px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size:.95rem;
}
.newsletter-form input:focus{ outline:none; border-color: var(--blue); }
.newsletter-note{ margin-top:14px; font-size:.85rem; font-weight:600; color: var(--teal); min-height:1.2em; }
.contact-direct{ margin-top:18px; font-size:.92rem; }
.contact-direct a{ color: var(--blue); font-weight:700; text-decoration: underline; }

.site-footer{ border-top:1px solid var(--border); padding: 40px 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-family: var(--font-head); }
.footer-brand .brand-logo{ width:28px; height:28px; }
.footer-nav{ display:flex; gap:22px; }
.footer-nav a{ font-size:.85rem; font-weight:600; color: var(--text-muted); }
.footer-nav a:hover{ color: var(--text); }
.footer-meta p{ margin:0; font-size:.8rem; }

@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ height:280px; order:-1; }
  .about-grid{ grid-template-columns:1fr; text-align:center; }
  .about-list{ grid-template-columns:1fr 1fr; max-width:420px; margin-inline:auto; }
  .cat-grid{ grid-template-columns:1fr 1fr; }
  .article-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px){
  .main-nav{
    position:fixed; top: var(--header-h); left:0; right:0; bottom:0;
    background: var(--bg); flex-direction:column; align-items:flex-start; gap:0;
    padding: 20px 24px; transform: translateX(100%); transition: transform .3s ease;
    overflow-y:auto;
  }
  .main-nav.open{ transform: translateX(0); }
  .main-nav a{ width:100%; padding:16px 0; border-bottom:1px solid var(--border); font-size:1rem; }
  .nav-cta{ margin-top:16px; text-align:center; }
  .hamburger{ display:flex; }
  .hero h1{ font-size:2.1rem; }
  .cat-grid, .article-grid{ grid-template-columns:1fr; }
  .about-list{ grid-template-columns:1fr 1fr; }
  .section{ padding:60px 0; }
  .hero{ padding:50px 0 40px; }
}