/* MetaGem shared shell: tokens, base, header, footer.
   Page-specific styles stay in each page's own <style> block. */

:root{
  --purple:#501AC8;
  --purple-glow:#7B43F0;
  --coral:#CF6679;
  --bg:#07070C;
  --bg-2:#0D0B16;
  --surface:#12101D;
  --border:#211C33;
  --text:#FFFFFF;
  --muted:#A8A4B8;
  --radius:14px;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Plus Jakarta Sans",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Parallax-ready page background. Swap the radial gradients for the real
   particle image when it lands in assets/img/ — e.g.:
   background:url(../img/hero-bg.png) center top / cover fixed, var(--bg);  */
body.bg-particles{
  background:
    linear-gradient(rgba(7,7,12,.12),rgba(7,7,12,.45)),
    url(../img/hero-bg.jpg) center top / cover no-repeat,
    var(--bg);
  background-attachment:fixed;
}

a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3{font-weight:800;line-height:1.1;letter-spacing:-.01em}
.pill{
  display:inline-block;background:var(--purple);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.04em;
  padding:7px 18px;border-radius:40px;text-transform:uppercase;
}
.btn{
  display:inline-block;background:var(--purple);color:#fff;font-weight:700;
  padding:15px 34px;border-radius:40px;transition:transform .15s,box-shadow .2s;
  box-shadow:0 8px 30px rgba(80,26,200,.45);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 38px rgba(80,26,200,.6)}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(7,7,12,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:0;font-weight:800;font-size:22px;color:#fff}
.logo .gem{
  width:30px;height:30px;border-radius:7px;margin-right:10px;
  background:conic-gradient(from 140deg,var(--purple),var(--purple-glow),var(--coral),var(--purple));
  box-shadow:0 0 18px rgba(123,67,240,.6);
}
.logo b{color:#fff}
.logo img{height:46px;width:auto;display:block}
.menu{display:flex;gap:34px;list-style:none}
.menu a{
  font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;transition:color .2s;padding:6px 0;position:relative;
}
.menu a:hover{color:var(--coral)}
.menu a.active{color:var(--coral)}
.menu a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--coral);
}
.burger{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer}

/* ---------- Footer ---------- */
footer.site{background:var(--bg-2);border-top:1px solid var(--border);padding:70px 0 30px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px}
.fgrid h4{font-size:16px;margin-bottom:18px}
.fgrid p{color:var(--muted);font-size:14px}
.fgrid ul{list-style:none}
.fgrid li{margin-bottom:10px}
.fgrid li a{color:var(--coral);font-size:14px}
.fgrid li a:hover{color:#fff}
.nl{display:flex;gap:8px;margin-top:14px}
.nl input{flex:1;background:#1b1830;border:1px solid var(--border);border-radius:8px;padding:11px 14px;color:#fff;font-family:inherit}
.nl button{background:var(--purple);border:0;border-radius:8px;padding:0 18px;color:#fff;font-weight:700;cursor:pointer}
.copy{border-top:1px solid var(--border);margin-top:50px;padding-top:24px;display:flex;justify-content:space-between;color:var(--muted);font-size:13px}

@media(max-width:900px){
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .menu{display:none}
  .burger{display:block}
  .fgrid{grid-template-columns:1fr}
  .copy{flex-direction:column;gap:10px}
}


/* ---------- WordPress blog (Hello Elementor + Theme Builder single post) ---------- */
.elementor-widget-theme-post-title,
.elementor-widget-theme-post-content{max-width:760px !important;margin-left:auto !important;margin-right:auto !important}
.elementor-widget-theme-post-title{padding-top:40px}
.elementor-widget-theme-post-title h1{font-size:clamp(30px,4.4vw,48px);line-height:1.14;color:#fff;margin-bottom:6px}
.elementor-widget-theme-post-content{font-size:17px;line-height:1.75;color:#d7d4e2;padding-bottom:48px}
.elementor-widget-theme-post-content h2{font-size:28px;color:#fff;margin:42px 0 16px}
.elementor-widget-theme-post-content h3{font-size:21px;color:#fff;margin:32px 0 12px}
.elementor-widget-theme-post-content p{margin-bottom:24px}
.elementor-widget-theme-post-content a{color:var(--coral);text-decoration:underline;text-underline-offset:3px}
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol{margin:0 0 24px 22px}
.elementor-widget-theme-post-content li{margin-bottom:9px}
.elementor-widget-theme-post-content blockquote{border-left:3px solid var(--purple);background:var(--surface);margin:0 0 26px;padding:20px 26px;border-radius:0 12px 12px 0;color:#fff;font-style:italic}
.elementor-widget-theme-post-content img{border-radius:14px;border:1px solid var(--border);max-width:100%;height:auto}

/* ---------- WordPress blog archive (/articles) cards ---------- */
.elementor-posts .elementor-post{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.elementor-posts .elementor-post:hover{transform:translateY(-6px);border-color:var(--purple);box-shadow:0 16px 44px rgba(80,26,200,.32)}
.elementor-post__text{padding:18px 20px 22px}
.elementor-post__title{font-size:18px;line-height:1.3;margin-bottom:8px}
.elementor-post__title a{color:#fff}
.elementor-post__title a:hover{color:var(--coral)}
.elementor-post__meta-data{color:var(--muted);font-size:12px;margin-bottom:10px}
.elementor-post__excerpt p{color:var(--muted);font-size:14px;line-height:1.55}
.elementor-post__read-more{color:var(--coral);font-weight:700;font-size:13px}
.elementor-post__read-more:hover{color:#fff}
/* Box the archive grid to the site content width (was full-bleed) */
.elementor-widget-archive-posts,
.elementor-widget-posts{max-width:1180px !important;margin-left:auto !important;margin-right:auto !important;padding-left:24px;padding-right:24px}
/* Force card title white + read-more coral over Elementor/Hello defaults */
.elementor-post__title a,
.elementor-post__title a:hover,
.elementor-post__title a:visited{color:#fff !important}
.elementor-post__read-more,
.elementor-post__read-more:visited{color:var(--coral) !important}
.elementor-post__read-more:hover{color:#fff !important}

/* ---------- Loop Grid archive cards (MetaGem Article Card loop item) ---------- */
.elementor-loop-container{gap:28px}
.mg-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.mg-card:hover{transform:translateY(-6px);border-color:var(--purple);box-shadow:0 16px 44px rgba(80,26,200,.32)}
/* Full-bleed featured image across the top of the card */
.mg-card>.elementor-widget-theme-post-featured-image img{display:block;width:100%;height:200px;object-fit:cover;border-radius:0}
/* Padded body holding chip, date, title, excerpt, byline */
.mg-card>.e-con{padding:16px 20px 22px !important}
/* Purple category chip above the title */
.mg-card .mg-chip .elementor-heading-title,
.mg-card .mg-chip .elementor-heading-title a{display:inline-block;background:var(--purple) !important;color:#fff !important;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:none !important;padding:5px 12px;border-radius:40px;text-decoration:none}
/* White post title */
.mg-card .elementor-widget-theme-post-title .elementor-heading-title,
.mg-card .elementor-widget-theme-post-title a{color:#fff !important}
.mg-card .elementor-widget-theme-post-title .elementor-heading-title{font-size:19px;line-height:1.3}
/* Muted plain headings (fallback; chip/date/readmore/title are styled below) */
.mg-card .elementor-widget-heading:not(.mg-chip):not(.elementor-widget-theme-post-title):not(.mg-date):not(.mg-readmore) .elementor-heading-title{color:var(--muted) !important;font-size:12px;font-weight:600}
/* Muted excerpt */
.mg-card .elementor-widget-theme-post-excerpt{color:var(--muted);font-size:14px;line-height:1.55}
/* Date pill overlaid on the bottom-left of the featured image */
.mg-card{position:relative}
.mg-card .mg-date{position:absolute;left:16px;top:-40px;z-index:2;margin:0}
.mg-card .mg-date .elementor-heading-title{display:inline-block;background:rgba(80,26,200,.92);color:#fff !important;font-size:11px;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:40px}
/* Coral Read More CTA */
.mg-card .mg-readmore{margin-top:12px}
.mg-card .mg-readmore .elementor-heading-title{color:var(--coral) !important;font-size:13px;font-weight:700;text-transform:none;letter-spacing:.02em}