/* ============================================================
   INTELIZEST BLOG — SHARED STYLESHEET
   intelizest-blog.css
============================================================ */

/* ── Theme Tokens ── */
[data-theme="indigo"] {
  --bg:#f0f2f8; --bg2:#e8ebf5; --bg3:#dde1f0;
  --ink:#0b1340; --ink2:#1e2d6b; --muted:#5a6490;
  --border:#d0d5e8; --card:#ffffff; --nav-bg:rgba(255,255,255,0.92);
  --accent:#6b4fe0; --accent2:#00c9a7; --accent-dk:#5538cc;
  --inv-bg:#0e1547; --footer-bg:#080e30;
  --shadow:0 4px 24px rgba(107,79,224,0.10);
  --shadow-lg:0 12px 48px rgba(107,79,224,0.18);
}
[data-theme="dark"] {
  --bg:#060a1f; --bg2:#0d1235; --bg3:#131a45;
  --ink:#e8ecff; --ink2:#b0badd; --muted:#7a87b8;
  --border:rgba(107,79,224,0.18); --card:#0d1235; --nav-bg:rgba(6,10,31,0.92);
  --accent:#7c6fff; --accent2:#00e8c4; --accent-dk:#a594ff;
  --inv-bg:#030615; --footer-bg:#030615;
  --shadow:0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg:0 12px 48px rgba(0,0,0,0.65);
}
[data-theme="white"] {
  --bg:#ffffff; --bg2:#f7f8fa; --bg3:#eef0f5;
  --ink:#0b1340; --ink2:#374151; --muted:#6b7280;
  --border:#e5e7eb; --card:#ffffff; --nav-bg:rgba(255,255,255,0.88);
  --accent:#6b4fe0; --accent2:#00c9a7; --accent-dk:#5538cc;
  --inv-bg:#0b1340; --footer-bg:#080e30;
  --shadow:0 4px 24px rgba(0,0,0,0.07);
  --shadow-lg:0 12px 48px rgba(0,0,0,0.12);
}

/* ── Reset & Base ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:'DM Sans',sans-serif; font-weight:300; overflow-x:hidden; line-height:1.65; transition:background .3s,color .3s; }
p { font-family:'Manrope',sans-serif; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

/* ── Keyframes ── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes gridShift { 0%{transform:translate(0,0)} 100%{transform:translate(60px,60px)} }

/* ── Nav ── */
nav { position:fixed; top:0; left:0; right:0; z-index:300; display:flex; align-items:center; justify-content:space-between; padding:1rem 4rem; background:var(--nav-bg); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); transition:box-shadow .3s,background .3s; }
nav.scrolled { box-shadow:var(--shadow); }
.nav-logo { font-family:'Syne',sans-serif; font-weight:800; font-size:1.4rem; letter-spacing:-.04em; color:var(--ink); cursor:pointer; display:flex; align-items:center; gap:.6rem; }
.nav-logo img { height:36px; width:auto; object-fit:contain; }
.nav-links { display:flex; gap:0; list-style:none; align-items:center; }
.nav-item>a,.nav-item>span { color:var(--muted); font-size:.82rem; font-weight:400; padding:.5rem .9rem; cursor:pointer; transition:color .2s; display:block; white-space:nowrap; }
.nav-item:hover>a,.nav-item:hover>span { color:var(--ink); }
.nav-cta-btn { background:var(--accent); color:#fff !important; padding:.45rem 1.3rem; border-radius:100px; font-weight:500 !important; margin-left:.5rem; transition:opacity .2s !important; }
.nav-cta-btn:hover { opacity:.85; }
.iz-mobile-toggle { display:none; background:none; border:none; cursor:pointer; padding:.5rem; }

/* ── Theme Switcher ── */
.theme-switcher { position:fixed; bottom:2rem; right:2rem; z-index:500; display:flex; flex-direction:column; gap:.5rem; align-items:flex-end; }
.theme-label { font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.2rem; text-align:right; }
.theme-btns { display:flex; gap:.4rem; }
.theme-btn { width:32px; height:32px; border-radius:50%; border:2.5px solid var(--border); cursor:pointer; transition:transform .2s,box-shadow .2s; outline:none; }
.theme-btn:hover { transform:scale(1.15); }
.theme-btn.active { box-shadow:0 0 0 3px var(--accent); }
.theme-btn.indigo { background:linear-gradient(135deg,#6b4fe0,#00c9a7); }
.theme-btn.dark   { background:linear-gradient(135deg,#060a1f,#7c6fff); }
.theme-btn.white  { background:#ffffff; }

/* ── Page Hero ── */
.page-hero { padding:9rem 5rem 4rem; background:linear-gradient(160deg,var(--bg2) 0%,var(--bg) 60%); border-bottom:1px solid var(--border); color:var(--ink); position:relative; overflow:hidden; }
.page-hero-grid { position:absolute; inset:0; z-index:0; background-image:linear-gradient(rgba(107,79,224,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(107,79,224,.04) 1px,transparent 1px); background-size:60px 60px; animation:gridShift 25s linear infinite; opacity:.5; }
.page-hero-inner {
    position: relative;
    z-index: 1;
    margin-left: 38px;
    margin-top: -41px;
    margin-bottom: -18px;
  
  max-width:auto;
 }
.page-hero-eyebrow { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:.8rem; display:flex; align-items:center; gap:.6rem; animation:fadeInUp .6s ease both; }
.page-hero-eyebrow::before { content:''; width:20px; height:1.5px; background:var(--accent); display:inline-block; }
.page-hero h1 { font-family:'Syne',sans-serif; font-size:clamp(2rem,4vw,3.2rem); font-weight:800; letter-spacing:-.04em; line-height:1.1; margin-bottom:1.2rem; color:var(--ink); animation:fadeInUp .6s .1s ease both; }
.hero-meta { display:flex; align-items:center; gap:1.5rem; font-size:.78rem; color:var(--muted); animation:fadeInUp .6s .2s ease both; flex-wrap:wrap; }
.hero-meta-tag { display:inline-flex; align-items:center; background:rgba(107,79,224,.1); border:1px solid rgba(107,79,224,.25); color:var(--accent-dk); padding:.22rem .75rem; border-radius:100px; font-size:.68rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.hero-dot { width:3px; height:3px; border-radius:50%; background:var(--border); }

/* ── Blog Layout ── */
    .blog-layout { max-width:1200px; margin:0 auto; padding:4rem 5rem 6rem; display:grid; grid-template-columns:1fr 340px; gap:4rem; align-items:start; }

/* ── Blog Content ── */
.blog-cover { width:100%; border-radius:18px; overflow:hidden; margin-bottom:2.5rem; border:1.5px solid var(--border); box-shadow:var(--shadow-lg); }
.blog-cover img { width:100%; height:400px; object-fit:cover; display:block; }
.blog-body { font-family:'Manrope',sans-serif; font-weight:300; }
/* .blog-body .blog-intro { font-size:1.08rem; color:var(--muted); line-height:1.8; margin-bottom:2rem; font-weight:400; padding-bottom:2rem; border-bottom:1.5px solid var(--border); } */
.blog-body .blog-intro { font-size:18px; color:var(--muted); line-height:1.8; margin-bottom:2rem; font-weight:400; padding-bottom:2rem; border-bottom:1.5px solid var(--border); }


.blog-body p { font-size:18px; color:var(--muted); line-height:1.85; margin-bottom:1.5rem; }
/* .blog-body h4 { font-family:'Syne',sans-serif; font-size:1.2rem; font-weight:700; letter-spacing:-.03em; color:var(--ink); margin:2.5rem 0 .8rem; } */
.blog-body h4 { font-family:'Syne',sans-serif; font-size:30px; font-weight:700; letter-spacing:-.03em; color:var(--ink); margin:2.5rem 0 .8rem; }

.blog-body h6 { font-family:'Syne',sans-serif; font-size:24px; font-weight:700; color:var(--ink); margin:1.8rem 0 .6rem; letter-spacing:-.01em; }
.blog-highlight { background:var(--bg2); border:1.5px solid var(--border); border-left:4px solid var(--accent); border-radius:0 12px 12px 0; padding:1.4rem 1.8rem; margin:2rem 0; font-size:.95rem; color:var(--ink2); line-height:1.75; font-family:'Manrope',sans-serif; }
.blog-body .inline-img { width:100%; border-radius:14px; border:1.5px solid var(--border); margin:2rem 0; overflow:hidden; box-shadow:var(--shadow); }
.blog-body .inline-img img { width:100%; height:auto; object-fit:cover; display:block; }
.blog-img-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:2rem 0; }
.blog-img-grid-item { border-radius:12px; overflow:hidden; border:1.5px solid var(--border); box-shadow:var(--shadow); }
.blog-img-grid-item img { width:100%; height:auto; display:block; }
.blog-body ul { margin:1rem 0 1.8rem 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.blog-body ul li { display:flex; align-items:flex-start; gap:.75rem; font-size:.95rem; color:var(--ink2); line-height:1.65; }
.blog-body ul li::before { content:'→'; color:var(--accent); font-weight:700; flex-shrink:0; margin-top:.05rem; }

/* ── Contact list ── */
.contact-list { margin:1.5rem 0; display:flex; flex-direction:column; gap:.4rem; font-family:'Manrope',sans-serif; font-size:.92rem; }
.contact-list a { color:var(--accent); transition:opacity .2s; }
.contact-list a:hover { opacity:.7; }

/* ── Share bar ── */
.share-bar { display:flex; align-items:center; gap:1rem; margin-top:3rem; padding-top:2rem; border-top:1.5px solid var(--border); }
.share-label { font-size:.78rem; font-weight:500; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }
.share-icons { display:flex; gap:.6rem; }
.share-icon { width:36px; height:36px; border-radius:9px; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:border-color .2s,box-shadow .2s; }
.share-icon:hover { border-color:var(--accent); box-shadow:var(--shadow); }
.share-icon img { width:20px; height:20px; object-fit:contain; }

/* ── Team credits ── */
.team-credits { margin-top:2.5rem; padding:1.8rem; border-radius:16px; background:var(--bg2); border:1.5px solid var(--border); }
.team-credits p { font-size:.78rem; color:var(--muted); margin-bottom:1rem; font-family:'DM Mono',monospace; letter-spacing:.04em; text-transform:uppercase; }
.team-credits ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.team-credits ul li { display:flex; align-items:center; gap:.6rem; }
.team-credits ul li::before { content:none; }
.team-credits a { font-size:.85rem; color:var(--accent); transition:opacity .2s; }
.team-credits a:hover { opacity:.7; }

/* ── Sidebar ── */
.blog-sidebar { display:flex; flex-direction:column; gap:2rem; position:sticky; top:7rem; }
.sidebar-card { background:var(--card); border:1.5px solid var(--border); border-radius:18px; padding:1.6rem; box-shadow:var(--shadow); }
.sidebar-card-title { font-family:'Syne',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:1.2rem; display:flex; align-items:center; gap:.5rem; }
.sidebar-card-title::before { content:''; width:14px; height:1.5px; background:var(--accent); display:inline-block; }
.sidebar-blog-list { display:flex; flex-direction:column; gap:.9rem; }
.sidebar-blog-item { display:flex; gap:.85rem; align-items:flex-start; padding-bottom:.9rem; border-bottom:1px solid var(--border); transition:opacity .2s; cursor:pointer; }
.sidebar-blog-item:last-child { border-bottom:none; padding-bottom:0; }
.sidebar-blog-item:hover { opacity:.75; }
.sbi-thumb { width:56px; height:52px; border-radius:9px; overflow:hidden; flex-shrink:0; background:var(--bg2); border:1px solid var(--border); }
.sbi-thumb img { width:100%; height:100%; object-fit:cover; }
.sbi-text { flex:1; }
.sbi-text h6 { font-family:'Syne',sans-serif; font-size:.82rem; font-weight:700; color:var(--ink); line-height:1.35; margin-bottom:.25rem; }
.sbi-text span { font-size:.7rem; font-family:'DM Mono',monospace; color:var(--muted); }
.sidebar-products { display:flex; flex-direction:column; gap:.55rem; }
.sidebar-product { display:flex; align-items:center; gap:.7rem; padding:.75rem 1rem; border-radius:10px; border:1.5px solid var(--border); background:var(--bg2); font-size:.82rem; font-weight:500; color:var(--ink2); transition:border-color .2s,color .2s; cursor:pointer; }
.sidebar-product:hover { border-color:var(--accent); color:var(--accent); }
.sidebar-product::before { content:'◆'; font-size:.55rem; color:var(--accent); }

/* ── Footer ── */
footer { background:var(--footer-bg); color:#fff; padding:4.5rem 5rem 2.5rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:3.5rem; }
.footer-brand img { height:36px; filter:brightness(0) invert(1); margin-bottom:.8rem; }
.footer-brand p { color:rgba(255,255,255,.48); font-size:.82rem; margin-top:.8rem; max-width:260px; line-height:1.65; }
.footer-col h5 { font-size:.67rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.42); margin-bottom:1.1rem; font-weight:500; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; }
.footer-col a { color:rgba(255,255,255,.38); font-size:.82rem; transition:color .2s; display:block; }
.footer-col a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding-top:1.8rem; display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:.75rem; color:rgba(255,255,255,.18); }
.footer-socials { display:flex; gap:.7rem; }
.social-btn { width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.32); font-size:.75rem; transition:all .2s; }
.social-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ── Responsive ── */
@media(max-width:960px) {
  nav { padding:.9rem 1.8rem; }
  .nav-links { display:none; }
  .iz-mobile-toggle { display:flex !important; align-items:center; justify-content:center; }
  .page-hero { padding:7.5rem 1.8rem 3rem; }
  .blog-layout { grid-template-columns:1fr; padding:3rem 1.8rem 5rem; gap:3rem; }
  .blog-sidebar { position:static; }
  footer { padding:3rem 1.8rem 2rem; }
  .footer-grid { grid-template-columns:1fr 1fr 1fr; }
}
@media(max-width:600px) {
  .page-hero h1 { font-size:clamp(1.7rem,7vw,2.4rem); }
  .blog-cover img { height:240px; }
  .blog-img-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}