/* ============================================================
   AI1DESIGN — BLOG.CSS
   COMPLETE BLOG REBUILD
   ------------------------------------------------------------
   Goals:
   - Premium magazine-style blog landing page
   - Blog category hero matches the rest of the AI1Design site
   - Compact, clearly separated article preview cards
   - Read More is integrated into each card
   - No hero video behind individual article previews/articles
   - Full article pages remain spacious and readable
   - Byte dividers stay sharp and fully visible
   - Clean animation hooks for blog.js
============================================================ */


/* ============================================================
   1) BLOG VARIABLES / RESET
============================================================ */

:root{
  --ai1blog-bg:#07111f;
  --ai1blog-bg-deep:#040a13;
  --ai1blog-panel:#0a1b30;
  --ai1blog-panel-2:#102b49;
  --ai1blog-white:#ffffff;
  --ai1blog-muted:rgba(255,255,255,.76);
  --ai1blog-green:#39ff14;
  --ai1blog-cyan:#00cfff;
  --ai1blog-orange:#ff7b00;
  --ai1blog-yellow:#ffe600;
  --ai1blog-pink:#ff4fd8;
  --ai1blog-radius:30px;
  --ai1blog-shadow:0 30px 80px rgba(0,0,0,.34);
  --ai1blog-ease:cubic-bezier(.22,1,.36,1);
}

.com-content-category-blog.blog,
.com-content-category-blog.blog *,
.com-content-category-blog.blog *::before,
.com-content-category-blog.blog *::after,
.ai1blog-page,
.ai1blog-page *,
.ai1blog-page *::before,
.ai1blog-page *::after{
  box-sizing:border-box;
}


/* ============================================================
   2) BLOG CATEGORY PAGE SHELL
============================================================ */

.com-content-category-blog.blog{
  position:relative;
  isolation:isolate;
  overflow:visible;
  margin:0;
  padding:0;
  background:
    radial-gradient(circle at 4% 18%, rgba(57,255,20,.10), transparent 27%),
    radial-gradient(circle at 96% 32%, rgba(0,207,255,.12), transparent 29%),
    radial-gradient(circle at 74% 82%, rgba(255,123,0,.08), transparent 30%),
    linear-gradient(180deg,#07111f 0%,#081827 42%,#050c16 100%);
}

.com-content-category-blog.blog .category-desc{
  position:relative;
  z-index:3;
  overflow:visible !important;
  margin:0;
  padding:0;
  background:transparent;
}

.com-content-category-blog.blog .category-desc::before,
.com-content-category-blog.blog .category-desc::after{
  display:none !important;
}


/* ============================================================
   3) BLOG CATEGORY HERO — SAME FAMILY AS OTHER INNER PAGES
============================================================ */

.ai1blog-category-hero{
  position:relative;
  width:100%;
  min-height:clamp(620px,88vh,900px);
  overflow:hidden;
  isolation:isolate;
  background:#050505;
}

.ai1blog-category-hero-video{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.72;
  pointer-events:none;
}

.ai1blog-category-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 10%,rgba(57,255,20,.22),transparent 30%),
    radial-gradient(circle at 92% 14%,rgba(0,183,255,.24),transparent 31%),
    radial-gradient(circle at 82% 88%,rgba(255,123,0,.20),transparent 30%),
    radial-gradient(circle at 14% 90%,rgba(255,230,0,.14),transparent 28%),
    linear-gradient(to bottom,rgba(0,0,0,.40),rgba(0,0,0,.88));
}

.ai1blog-category-hero-inner{
  position:relative;
  z-index:2;
  min-height:clamp(620px,88vh,900px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(5rem,8vw,7rem) 1.5rem clamp(6rem,9vw,8rem);
}

.com-content-category-blog.blog .ai1blog-category-intro{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:min(1080px,100%);
  margin:0 auto;
  padding:clamp(2.2rem,5vw,4.3rem);
  border:1px solid rgba(255,255,255,.18);
  border-radius:34px;
  background:
    radial-gradient(circle at 10% 10%,rgba(57,255,20,.12),transparent 28%),
    radial-gradient(circle at 90% 12%,rgba(0,183,255,.13),transparent 28%),
    linear-gradient(135deg,rgba(4,10,18,.86),rgba(8,25,42,.76));
  box-shadow:
    0 34px 110px rgba(0,0,0,.58),
    0 0 52px rgba(57,255,20,.10),
    0 0 64px rgba(0,183,255,.09),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  text-align:center;
}

.com-content-category-blog.blog .ai1blog-category-intro::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(
    125deg,
    rgba(57,255,20,.85),
    rgba(0,207,255,.72),
    rgba(255,123,0,.58),
    rgba(255,79,216,.54),
    rgba(255,230,0,.56)
  );
  background-size:300% 300%;
  animation:ai1blogBorderFlow 9s linear infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

.com-content-category-blog.blog .ai1blog-category-intro::after{
  content:"";
  position:absolute;
  inset:-50% auto -50% -65%;
  z-index:0;
  width:46%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.09),transparent);
  transform:rotate(12deg);
  animation:ai1blogSweep 8s ease-in-out infinite;
  pointer-events:none;
}

.ai1blog-category-content{
  position:relative;
  z-index:2;
  max-width:900px;
  margin:0 auto;
}

.ai1blog-category-glow{
  display:none !important;
}

.ai1blog-category-kicker,
.ai1blog-kicker,
.ai1blog-section-kicker,
.ai1blog-feed-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  margin:0 0 1.15rem;
  padding:.72rem 1.15rem;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    var(--ai1blog-green),
    var(--ai1blog-cyan),
    var(--ai1blog-orange),
    var(--ai1blog-yellow),
    var(--ai1blog-pink),
    var(--ai1blog-green)
  );
  background-size:400% 100%;
  color:#06160a;
  font-size:.78rem;
  font-weight:950;
  letter-spacing:.07em;
  text-transform:uppercase;
  box-shadow:
    0 12px 28px rgba(57,255,20,.20),
    0 12px 32px rgba(0,183,255,.13),
    inset 0 1px 0 rgba(255,255,255,.35);
  animation:ai1blogGradient 8s linear infinite;
}

.ai1blog-category-kicker{
  margin-left:auto;
  margin-right:auto;
}

.ai1blog-category-title{
  max-width:940px;
  margin:0 auto 1.25rem;
  font-size:clamp(2.8rem,6.5vw,5.3rem);
  line-height:1.01;
  font-weight:850;
  letter-spacing:-.05em;
  background-image:linear-gradient(
    90deg,
    #fff,
    var(--ai1blog-green),
    var(--ai1blog-cyan),
    var(--ai1blog-orange),
    var(--ai1blog-yellow),
    #fff
  );
  background-size:420% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:ai1blogGradient 9s linear infinite,ai1blogTextGlow 4s ease-in-out infinite;
}

.ai1blog-category-text{
  max-width:800px;
  margin:0 auto 1.1rem;
  color:rgba(255,255,255,.92);
  font-size:clamp(1.05rem,1.55vw,1.22rem);
  line-height:1.78;
  font-weight:600;
}

.ai1blog-category-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2rem;
}

.ai1blog-category-btn,
.ai1blog-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:.9rem 1.45rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease;
}

.ai1blog-category-btn:hover,
.ai1blog-btn:hover{
  transform:translateY(-3px) scale(1.025);
}

.ai1blog-category-btn-primary,
.ai1blog-btn{
  background:linear-gradient(90deg,var(--ai1blog-green),var(--ai1blog-cyan),var(--ai1blog-orange),var(--ai1blog-green));
  background-size:300% 100%;
  color:#041b08;
  box-shadow:
    0 15px 36px rgba(57,255,20,.26),
    0 0 30px rgba(0,207,255,.19);
  animation:ai1blogGradient300 7s linear infinite;
}

.ai1blog-category-btn-secondary{
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.08);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}

.ai1blog-category-btn-secondary:hover{
  border-color:rgba(255,255,255,.36);
  background:rgba(255,255,255,.14);
}


/* ============================================================
   4) CATEGORY BYTE DIVIDER — HERO TO FEED BRIDGE
============================================================ */

.com-content-category-blog.blog .category-desc > .ai1-byte-divider{
  position:relative;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:124px;
  margin:-62px 0 0 !important;
  overflow:visible !important;
  pointer-events:none;
}

.com-content-category-blog.blog .category-desc > .ai1-byte-divider-line{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  z-index:1;
  height:8px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    var(--ai1blog-green),
    var(--ai1blog-cyan),
    var(--ai1blog-orange),
    var(--ai1blog-pink),
    var(--ai1blog-yellow),
    var(--ai1blog-green)
  );
  background-size:350% 100%;
  box-shadow:
    0 0 18px rgba(57,255,20,.24),
    0 0 28px rgba(0,207,255,.22);
  animation:ai1blogGradient350 8s linear infinite;
  transform:translateY(-50%);
}

.com-content-category-blog.blog .category-desc > .ai1-byte-divider-video{
  position:relative;
  z-index:2;
  width:118px;
  height:118px;
  overflow:hidden;
  border:5px solid #fff;
  border-radius:50%;
  background:radial-gradient(circle at center,#fff 0%,#dfefff 100%);
  box-shadow:
    0 0 0 5px rgba(57,255,20,.25),
    0 0 30px rgba(57,255,20,.46),
    0 0 48px rgba(0,183,255,.27),
    0 18px 42px rgba(0,0,0,.32);
}

.com-content-category-blog.blog .category-desc > .ai1-byte-divider-video video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.12) !important;
  filter:none !important;
}


/* ============================================================
   5) FEED INTRO — INSERTED BY BLOG.JS
============================================================ */

.ai1blog-feed-heading{
  position:relative;
  z-index:4;
  width:min(1360px,calc(100% - 48px));
  margin:clamp(2.2rem,5vw,4.5rem) auto clamp(1.6rem,3vw,2.4rem);
  padding:0 clamp(.25rem,2vw,1.25rem);
  text-align:left;
}

.ai1blog-feed-heading::before{
  content:"";
  position:absolute;
  left:0;
  top:-1.4rem;
  width:84px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--ai1blog-green),var(--ai1blog-cyan),var(--ai1blog-orange));
  box-shadow:0 0 20px rgba(0,207,255,.25);
}

.ai1blog-feed-kicker{
  margin-bottom:.9rem;
}

.ai1blog-feed-heading h2{
  max-width:900px;
  margin:0 0 .85rem;
  color:#fff;
  font-size:clamp(2rem,4.2vw,3.6rem);
  line-height:1.06;
  letter-spacing:-.04em;
}

.ai1blog-feed-heading p{
  max-width:760px;
  margin:0;
  color:var(--ai1blog-muted);
  font-size:clamp(1rem,1.4vw,1.12rem);
  line-height:1.7;
}


/* ============================================================
   6) JOOMLA BLOG LIST — PREMIUM MAGAZINE GRID
============================================================ */

.com-content-category-blog.blog .com-content-category-blog__items,
.com-content-category-blog.blog .blog-items,
.com-content-category-blog.blog .items-leading{
  position:relative;
  z-index:3;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.35rem,2.5vw,2rem);
  width:min(1360px,calc(100% - 48px));
  margin:0 auto;
  padding:0 0 clamp(5rem,8vw,7rem);
}

.com-content-category-blog.blog .blog-item{
  --ai1blog-card-accent:var(--ai1blog-green);
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:410px;
  overflow:hidden;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.14);
  border-radius:30px;
  background:
    radial-gradient(circle at 10% 8%,color-mix(in srgb,var(--ai1blog-card-accent) 17%,transparent),transparent 32%),
    radial-gradient(circle at 90% 92%,rgba(0,207,255,.10),transparent 34%),
    linear-gradient(145deg,rgba(9,25,43,.97),rgba(5,13,25,.98));
  box-shadow:
    0 26px 70px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition:
    transform .28s var(--ai1blog-ease),
    border-color .28s ease,
    box-shadow .28s ease;
}

.com-content-category-blog.blog .blog-item:nth-child(4n+2){
  --ai1blog-card-accent:var(--ai1blog-cyan);
}

.com-content-category-blog.blog .blog-item:nth-child(4n+3){
  --ai1blog-card-accent:var(--ai1blog-orange);
}

.com-content-category-blog.blog .blog-item:nth-child(4n+4){
  --ai1blog-card-accent:var(--ai1blog-pink);
}

.com-content-category-blog.blog .blog-item::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  z-index:6;
  height:6px;
  background:linear-gradient(
    90deg,
    var(--ai1blog-card-accent),
    var(--ai1blog-cyan),
    var(--ai1blog-orange)
  );
  box-shadow:0 0 24px color-mix(in srgb,var(--ai1blog-card-accent) 42%,transparent);
}

.com-content-category-blog.blog .blog-item::after{
  content:"";
  position:absolute;
  right:-80px;
  bottom:-80px;
  z-index:0;
  width:220px;
  height:220px;
  border:34px solid rgba(255,255,255,.025);
  border-radius:50%;
  pointer-events:none;
}

.com-content-category-blog.blog .blog-item:hover{
  transform:translateY(-8px);
  border-color:rgba(255,255,255,.26);
  box-shadow:
    0 34px 88px rgba(0,0,0,.42),
    0 0 32px color-mix(in srgb,var(--ai1blog-card-accent) 16%,transparent),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* First/latest article becomes a featured card. */
.com-content-category-blog.blog .blog-item:first-child{
  grid-column:1 / -1;
  min-height:430px;
  background:
    radial-gradient(circle at 10% 8%,rgba(57,255,20,.14),transparent 30%),
    radial-gradient(circle at 88% 16%,rgba(0,207,255,.15),transparent 32%),
    radial-gradient(circle at 78% 92%,rgba(255,123,0,.10),transparent 34%),
    linear-gradient(135deg,rgba(9,29,48,.98),rgba(5,14,26,.99));
}

.com-content-category-blog.blog .blog-item:first-child::before{
  height:8px;
  background:linear-gradient(
    90deg,
    var(--ai1blog-green),
    var(--ai1blog-cyan),
    var(--ai1blog-orange),
    var(--ai1blog-pink)
  );
}

/* Joomla structural wrappers remain harmless and transparent. */
.com-content-category-blog.blog .blog-item > .item-content,
.com-content-category-blog.blog .blog-item .ai1blog-page{
  position:relative;
  z-index:2;
  display:flex;
  flex:1 1 auto;
  min-width:0;
  width:100%;
  margin:0 !important;
  padding:0 !important;
  overflow:visible;
  background:transparent !important;
}

/* Category previews NEVER use the full article body. */
.com-content-category-blog.blog .blog-item .ai1blog-body{
  display:none !important;
}

/* Category previews NEVER use article hero video. */
.com-content-category-blog.blog .blog-item .ai1blog-hero-video{
  display:none !important;
}


/* ============================================================
   7) CATEGORY ARTICLE PREVIEW
============================================================ */

.com-content-category-blog.blog .blog-item .ai1blog-hero{
  position:relative !important;
  z-index:2 !important;
  display:flex;
  flex:1 1 auto;
  width:100%;
  min-height:0 !important;
  margin:0 !important;
  overflow:visible !important;
  background:transparent !important;
}

.com-content-category-blog.blog .blog-item .ai1blog-hero::before,
.com-content-category-blog.blog .blog-item .ai1blog-hero::after{
  display:none !important;
}

.com-content-category-blog.blog .blog-item .ai1blog-hero-overlay{
  display:none !important;
}

.com-content-category-blog.blog .blog-item .ai1blog-hero-inner{
  position:relative;
  z-index:3;
  display:flex;
  align-items:stretch;
  width:100%;
  min-height:0 !important;
  padding:clamp(1.65rem,3vw,2.3rem) clamp(1.45rem,3vw,2.2rem) 1rem !important;
}

.com-content-category-blog.blog .blog-item .ai1blog-hero-card{
  position:relative;
  isolation:isolate;
  overflow:visible;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent !important;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  text-align:left;
  color:#fff;
}

.com-content-category-blog.blog .blog-item .ai1blog-hero-card::before,
.com-content-category-blog.blog .blog-item .ai1blog-hero-card::after{
  display:none !important;
}

.com-content-category-blog.blog .blog-item .ai1blog-kicker{
  margin:0 0 1.2rem;
  padding:.58rem .88rem;
  font-size:.68rem;
  box-shadow:none;
}

.com-content-category-blog.blog .blog-item .ai1blog-hero-card h1{
  max-width:18ch;
  margin:0 0 1rem;
  font-size:clamp(1.85rem,3.2vw,2.65rem);
  line-height:1.05;
  letter-spacing:-.045em;
  text-align:left;
  background-image:linear-gradient(
    90deg,
    #fff,
    var(--ai1blog-cyan),
    var(--ai1blog-card-accent),
    var(--ai1blog-orange),
    #fff
  );
  background-size:400% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:ai1blogGradient 10s linear infinite;
}

.com-content-category-blog.blog .blog-item:first-child .ai1blog-hero-card h1{
  max-width:22ch;
  font-size:clamp(2.3rem,4.6vw,4.1rem);
}

.com-content-category-blog.blog .blog-item .ai1blog-lead{
  max-width:62ch;
  margin:0 0 1.35rem;
  color:rgba(255,255,255,.84);
  font-size:clamp(.98rem,1.3vw,1.08rem);
  line-height:1.65;
  font-weight:600;
}

.com-content-category-blog.blog .blog-item:first-child .ai1blog-lead{
  max-width:70ch;
  font-size:clamp(1.02rem,1.5vw,1.16rem);
}

.com-content-category-blog.blog .blog-item .ai1blog-meta{
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:.48rem;
  margin-top:auto;
  color:rgba(255,255,255,.62);
  font-size:.82rem;
  line-height:1.45;
  font-weight:700;
}


/* ============================================================
   8) CATEGORY READ MORE — INTEGRATED CARD FOOTER
============================================================ */

.com-content-category-blog.blog .blog-item .readmore{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  margin:0 !important;
  padding:1rem clamp(1.45rem,3vw,2.2rem) clamp(1.5rem,3vw,2rem);
  border:0;
  background:transparent;
}

.com-content-category-blog.blog .blog-item .readmore::before{
  content:"";
  position:absolute;
  left:clamp(1.45rem,3vw,2.2rem);
  right:clamp(1.45rem,3vw,2.2rem);
  top:0;
  height:1px;
  background:linear-gradient(
    90deg,
    color-mix(in srgb,var(--ai1blog-card-accent) 72%,transparent),
    rgba(0,207,255,.45),
    transparent
  );
}

.com-content-category-blog.blog .blog-item .readmore a,
.com-content-category-blog.blog .blog-item .readmore .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:46px;
  max-width:100%;
  padding:.78rem 1.15rem;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:999px;
  background:rgba(255,255,255,.075);
  color:#fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 26px rgba(0,0,0,.20);
  text-decoration:none !important;
  font-weight:850;
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.com-content-category-blog.blog .blog-item .readmore a::after{
  content:"→";
  color:var(--ai1blog-card-accent);
  font-size:1.15em;
  transition:transform .2s ease;
}

.com-content-category-blog.blog .blog-item .readmore a:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--ai1blog-card-accent) 55%,white) !important;
  background:rgba(255,255,255,.12);
  box-shadow:
    0 14px 30px rgba(0,0,0,.24),
    0 0 24px color-mix(in srgb,var(--ai1blog-card-accent) 14%,transparent);
}

.com-content-category-blog.blog .blog-item .readmore a:hover::after{
  transform:translateX(4px);
}


/* ============================================================
   9) FULL ARTICLE PAGE SHELL
============================================================ */

.ai1blog-page{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  margin:0 !important;
  padding:0 !important;
  background:var(--ai1blog-bg);
}

/* Individual article hero videos are intentionally disabled. */
.ai1blog-page > .ai1blog-hero .ai1blog-hero-video{
  display:none !important;
}

.ai1blog-page > .ai1blog-hero{
  position:relative !important;
  z-index:1 !important;
  isolation:isolate;
  overflow:hidden !important;
  width:100%;
  min-height:clamp(500px,64vh,720px);
  background:
    radial-gradient(circle at 7% 12%,rgba(57,255,20,.22),transparent 29%),
    radial-gradient(circle at 92% 18%,rgba(0,207,255,.24),transparent 31%),
    radial-gradient(circle at 82% 86%,rgba(255,123,0,.18),transparent 32%),
    linear-gradient(135deg,#06101d 0%,#0a2946 48%,#111827 100%) !important;
}

.ai1blog-page > .ai1blog-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;
  opacity:.33;
  -webkit-mask-image:radial-gradient(circle at center,black 20%,transparent 84%);
          mask-image:radial-gradient(circle at center,black 20%,transparent 84%);
}

.ai1blog-page > .ai1blog-hero::after{
  content:"";
  position:absolute;
  right:-12%;
  top:-34%;
  z-index:0;
  width:min(680px,70vw);
  height:min(680px,70vw);
  border-radius:50%;
  background:conic-gradient(
    from 90deg,
    rgba(57,255,20,.18),
    rgba(0,207,255,.24),
    rgba(255,123,0,.16),
    rgba(255,79,216,.12),
    rgba(57,255,20,.18)
  );
  filter:blur(34px);
  opacity:.70;
  animation:ai1blogOrb 18s linear infinite;
  pointer-events:none;
}

.ai1blog-page > .ai1blog-hero .ai1blog-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.34));
  pointer-events:none;
}

.ai1blog-page > .ai1blog-hero .ai1blog-hero-inner{
  position:relative;
  z-index:2;
  min-height:clamp(500px,64vh,720px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(4.5rem,8vw,7rem) 1.5rem clamp(4rem,7vw,6rem);
}

.ai1blog-page > .ai1blog-hero .ai1blog-hero-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:min(1040px,100%);
  margin:0 auto;
  padding:clamp(2.1rem,5vw,4rem);
  border:1px solid rgba(255,255,255,.18);
  border-radius:34px;
  background:
    radial-gradient(circle at 10% 10%,rgba(57,255,20,.10),transparent 30%),
    radial-gradient(circle at 90% 12%,rgba(0,207,255,.11),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  box-shadow:
    0 32px 100px rgba(0,0,0,.46),
    0 0 42px rgba(57,255,20,.09),
    0 0 54px rgba(0,207,255,.08);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  text-align:center;
  color:#fff;
}

.ai1blog-page > .ai1blog-hero .ai1blog-hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(
    135deg,
    rgba(57,255,20,.76),
    rgba(0,207,255,.54),
    rgba(255,123,0,.42),
    rgba(255,79,216,.34)
  );
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}

.ai1blog-page > .ai1blog-hero .ai1blog-kicker{
  margin-left:auto;
  margin-right:auto;
}

.ai1blog-page > .ai1blog-hero h1{
  max-width:920px;
  margin:0 auto 1rem;
  font-size:clamp(2.7rem,6vw,5.1rem);
  line-height:1.02;
  font-weight:850;
  letter-spacing:-.05em;
  background-image:linear-gradient(
    90deg,
    #fff,
    var(--ai1blog-green),
    var(--ai1blog-cyan),
    var(--ai1blog-orange),
    var(--ai1blog-yellow),
    #fff
  );
  background-size:420% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:ai1blogGradient 9s linear infinite,ai1blogTextGlow 5s ease-in-out infinite;
}

.ai1blog-page > .ai1blog-hero .ai1blog-lead{
  max-width:800px;
  margin:0 auto 1.5rem;
  color:rgba(255,255,255,.92);
  font-size:clamp(1.08rem,1.8vw,1.32rem);
  line-height:1.65;
  font-weight:650;
}

.ai1blog-page > .ai1blog-hero .ai1blog-meta{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.58rem;
  color:rgba(255,255,255,.70);
  font-size:.92rem;
  font-weight:700;
}


/* ============================================================
   10) FULL ARTICLE CONTENT
============================================================ */

.ai1blog-body{
  position:relative;
  z-index:3;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(4rem,7vw,6.5rem) 0 clamp(5rem,8vw,7rem);
  background:
    radial-gradient(circle at 8% 10%,rgba(57,255,20,.10),transparent 30%),
    radial-gradient(circle at 92% 22%,rgba(0,207,255,.11),transparent 32%),
    radial-gradient(circle at 78% 86%,rgba(255,123,0,.08),transparent 30%),
    linear-gradient(180deg,#07111f 0%,#081a2b 48%,#050c16 100%) !important;
}

.ai1blog-body::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:52px 52px;
  opacity:.52;
  -webkit-mask-image:radial-gradient(circle at center,black 25%,transparent 100%);
          mask-image:radial-gradient(circle at center,black 25%,transparent 100%);
  pointer-events:none;
}

.ai1blog-wrap{
  position:relative;
  z-index:2;
  width:min(1080px,calc(100% - 48px));
  margin:0 auto;
}

.ai1blog-content-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  margin:0;
  padding:clamp(2rem,5vw,4.25rem);
  border:1px solid rgba(255,255,255,.13);
  border-radius:34px;
  background:
    radial-gradient(circle at 8% 8%,rgba(57,255,20,.08),transparent 28%),
    radial-gradient(circle at 92% 12%,rgba(0,207,255,.08),transparent 30%),
    linear-gradient(145deg,rgba(10,27,48,.94),rgba(6,16,29,.96));
  box-shadow:
    0 30px 90px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.05);
  color:#fff;
}

.ai1blog-content-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(
    145deg,
    rgba(57,255,20,.30),
    rgba(0,207,255,.26),
    transparent 44%,
    rgba(255,123,0,.18)
  );
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

.ai1blog-intro{
  position:relative;
  margin:0 0 2.5rem;
  padding:0 0 0 1.25rem;
  border-left:4px solid var(--ai1blog-cyan);
  color:rgba(255,255,255,.96);
  font-size:clamp(1.16rem,2vw,1.42rem);
  line-height:1.72;
  font-weight:700;
}

.ai1blog-content-card h2{
  margin:2.8rem 0 1rem;
  font-size:clamp(1.9rem,3.7vw,3rem);
  line-height:1.08;
  letter-spacing:-.04em;
  background-image:linear-gradient(
    90deg,
    #fff,
    var(--ai1blog-green),
    var(--ai1blog-cyan),
    var(--ai1blog-orange),
    var(--ai1blog-yellow),
    #fff
  );
  background-size:500% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:ai1blogGradient500 10s linear infinite;
}

.ai1blog-content-card h2:first-of-type{
  margin-top:.25rem;
}

.ai1blog-content-card h3{
  margin:0 0 .72rem;
  color:#fff;
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  line-height:1.18;
}

.ai1blog-content-card h4{
  margin:0 0 .35rem;
  color:#fff;
  font-size:1.05rem;
}

.ai1blog-content-card p{
  margin:0 0 1.3rem;
  color:rgba(255,255,255,.86) !important;
  font-size:clamp(1rem,1.25vw,1.08rem);
  line-height:1.82;
}

.ai1blog-content-card strong{
  color:#fff;
  font-weight:900;
}

.ai1blog-content-card ul{
  display:grid;
  gap:.85rem;
  margin:1.4rem 0 2rem;
  padding:0;
  list-style:none;
}

.ai1blog-content-card li{
  position:relative;
  padding-left:2rem;
  color:rgba(255,255,255,.88);
  font-size:1.02rem;
  line-height:1.65;
}

.ai1blog-content-card li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:.1rem;
  display:grid;
  place-items:center;
  width:1.35rem;
  height:1.35rem;
  border-radius:50%;
  background:rgba(57,255,20,.13);
  color:var(--ai1blog-green);
  font-size:.78rem;
  font-weight:950;
  box-shadow:0 0 16px rgba(57,255,20,.13);
}


/* ============================================================
   11) QUICK TAKEAWAYS
============================================================ */

.ai1blog-summary-panel{
  margin:2.4rem 0 2.8rem;
  padding:clamp(1.5rem,3vw,2.3rem);
  border:1px solid rgba(255,255,255,.13);
  border-radius:28px;
  background:
    radial-gradient(circle at 8% 8%,rgba(57,255,20,.13),transparent 30%),
    radial-gradient(circle at 90% 16%,rgba(0,207,255,.14),transparent 32%),
    rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.ai1blog-summary-panel .ai1blog-section-kicker{
  margin-bottom:1rem;
}

.ai1blog-summary-panel > h3{
  margin:0 0 1.35rem;
  font-size:clamp(1.55rem,2.8vw,2.25rem);
  letter-spacing:-.03em;
}

.ai1blog-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}

.ai1blog-summary-grid article{
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:1.3rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease;
}

.ai1blog-summary-grid article:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.085);
}

.ai1blog-summary-grid span{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:1rem;
  border-radius:50%;
  background:linear-gradient(135deg,#fff,#eafcff);
  color:#ff6a00;
  font-weight:950;
  box-shadow:
    0 10px 22px rgba(0,0,0,.22),
    0 0 18px rgba(0,207,255,.12);
}

.ai1blog-summary-grid p{
  margin:0;
  color:rgba(255,255,255,.72) !important;
  font-size:.94rem;
  line-height:1.6;
}


/* ============================================================
   12) CALLOUTS
============================================================ */

.ai1blog-callout{
  position:relative;
  overflow:hidden;
  margin:2.25rem 0;
  padding:1.55rem 1.65rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  box-shadow:0 18px 42px rgba(0,0,0,.18);
}

.ai1blog-callout::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:#fff;
}

.ai1blog-callout-green{
  background:linear-gradient(135deg,rgba(27,104,52,.74),rgba(11,47,31,.82));
}

.ai1blog-callout-green::before{
  background:var(--ai1blog-green);
}

.ai1blog-callout-orange{
  background:linear-gradient(135deg,rgba(161,68,20,.72),rgba(83,31,11,.84));
}

.ai1blog-callout-orange::before{
  background:var(--ai1blog-orange);
}

.ai1blog-callout p{
  margin:0 !important;
  color:rgba(255,255,255,.94) !important;
  font-weight:700;
}


/* ============================================================
   13) ARTICLE CTA
============================================================ */

.ai1blog-cta{
  position:relative;
  overflow:hidden;
  margin-top:3rem;
  padding:clamp(1.8rem,4vw,3rem);
  border:1px solid rgba(255,255,255,.15);
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 10%,rgba(57,255,20,.14),transparent 30%),
    radial-gradient(circle at 90% 18%,rgba(0,207,255,.14),transparent 32%),
    linear-gradient(145deg,rgba(12,37,62,.92),rgba(7,19,34,.96));
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  text-align:center;
}

.ai1blog-cta::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--ai1blog-green),var(--ai1blog-cyan),var(--ai1blog-orange),transparent);
  box-shadow:0 0 20px rgba(0,207,255,.20);
}

.ai1blog-cta h3{
  margin:0 0 .75rem;
  font-size:clamp(1.55rem,3vw,2.25rem);
}

.ai1blog-cta p{
  max-width:680px;
  margin:0 auto 1rem !important;
}


/* ============================================================
   14) ARTICLE BYTE DIVIDER
============================================================ */

.ai1blog-page + .ai1-byte-divider,
.ai1blog-page .ai1-byte-divider{
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(1200px,calc(100% - 40px));
  height:112px;
  margin:clamp(2.5rem,5vw,4rem) auto;
  overflow:visible;
  pointer-events:none;
}

.ai1blog-page + .ai1-byte-divider .ai1-byte-divider-line,
.ai1blog-page .ai1-byte-divider-line{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:2px;
  background:linear-gradient(
    90deg,
    transparent,
    var(--ai1blog-green),
    var(--ai1blog-cyan),
    var(--ai1blog-orange),
    transparent
  );
  box-shadow:0 0 20px rgba(0,207,255,.20);
}

.ai1blog-page + .ai1-byte-divider .ai1-byte-divider-video,
.ai1blog-page .ai1-byte-divider-video{
  position:relative;
  z-index:2;
  width:92px;
  height:92px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:radial-gradient(circle at center,#12263e,#05070a);
  box-shadow:
    0 0 0 7px rgba(0,0,0,.20),
    0 0 28px rgba(57,255,20,.18),
    0 0 36px rgba(0,207,255,.16);
}

.ai1blog-page + .ai1-byte-divider .ai1-byte-divider-video video,
.ai1blog-page .ai1-byte-divider-video video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.08) !important;
  filter:none !important;
}


/* ============================================================
   15) ANIMATION HOOKS — CONTROLLED BY BLOG.JS
============================================================ */

.ai1-blog-js-active .ai1blog-reveal{
  opacity:0;
  transform:translate3d(0,34px,0);
  transition:
    opacity .72s var(--ai1blog-ease),
    transform .72s var(--ai1blog-ease);
  transition-delay:var(--ai1blog-delay,0ms);
  will-change:opacity,transform;
}

.ai1-blog-js-active .ai1blog-reveal.ai1blog-from-left{
  transform:translate3d(-42px,18px,0);
}

.ai1-blog-js-active .ai1blog-reveal.ai1blog-from-right{
  transform:translate3d(42px,18px,0);
}

.ai1-blog-js-active .ai1blog-reveal.ai1blog-zoom{
  transform:translate3d(0,24px,0) scale(.975);
}

.ai1-blog-js-active .ai1blog-reveal.is-inview{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}


/* ============================================================
   16) RESPONSIVE
============================================================ */

@media (max-width:980px){
  .com-content-category-blog.blog .com-content-category-blog__items,
  .com-content-category-blog.blog .blog-items,
  .com-content-category-blog.blog .items-leading{
    grid-template-columns:1fr;
  }

  .com-content-category-blog.blog .blog-item:first-child{
    grid-column:auto;
  }

  .ai1blog-summary-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:768px){
  .ai1blog-category-hero,
  .ai1blog-category-hero-inner{
    min-height:100svh;
  }

  .ai1blog-category-hero-inner{
    padding:5rem 1rem 6rem;
  }

  .com-content-category-blog.blog .ai1blog-category-intro{
    padding:2rem 1.35rem;
    border-radius:24px;
  }

  .ai1blog-category-title{
    font-size:clamp(2.25rem,11vw,3.6rem);
  }

  .ai1blog-category-actions{
    flex-direction:column;
  }

  .ai1blog-category-btn{
    width:100%;
  }

  .com-content-category-blog.blog .category-desc > .ai1-byte-divider{
    height:104px;
    margin:-52px 0 0 !important;
  }

  .com-content-category-blog.blog .category-desc > .ai1-byte-divider-video{
    width:98px;
    height:98px;
    border-width:4px;
  }

  .ai1blog-feed-heading,
  .com-content-category-blog.blog .com-content-category-blog__items,
  .com-content-category-blog.blog .blog-items,
  .com-content-category-blog.blog .items-leading{
    width:calc(100% - 28px);
  }

  .com-content-category-blog.blog .blog-item{
    min-height:360px;
    border-radius:24px;
  }

  .com-content-category-blog.blog .blog-item .ai1blog-hero-inner{
    padding:1.5rem 1.25rem .8rem !important;
  }

  .com-content-category-blog.blog .blog-item .readmore{
    padding:.9rem 1.25rem 1.4rem;
  }

  .com-content-category-blog.blog .blog-item .readmore::before{
    left:1.25rem;
    right:1.25rem;
  }

  .com-content-category-blog.blog .blog-item .ai1blog-hero-card h1,
  .com-content-category-blog.blog .blog-item:first-child .ai1blog-hero-card h1{
    font-size:clamp(2rem,9vw,3rem);
  }

  .ai1blog-page > .ai1blog-hero,
  .ai1blog-page > .ai1blog-hero .ai1blog-hero-inner{
    min-height:clamp(440px,70svh,620px);
  }

  .ai1blog-page > .ai1blog-hero .ai1blog-hero-inner{
    padding:4rem 1rem 3.5rem;
  }

  .ai1blog-page > .ai1blog-hero .ai1blog-hero-card,
  .ai1blog-content-card{
    border-radius:24px;
  }

  .ai1blog-page > .ai1blog-hero h1{
    font-size:clamp(2.3rem,11vw,3.7rem);
  }

  .ai1blog-wrap{
    width:calc(100% - 28px);
  }

  .ai1blog-content-card{
    padding:1.65rem 1.35rem;
  }

  .ai1blog-intro{
    padding-left:1rem;
  }

  .ai1blog-btn{
    width:100%;
  }
}

@media (max-width:480px){
  .com-content-category-blog.blog .blog-item .ai1blog-meta{
    font-size:.76rem;
  }

  .com-content-category-blog.blog .blog-item .readmore a,
  .com-content-category-blog.blog .blog-item .readmore .btn{
    width:100%;
  }
}


/* ============================================================
   17) ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion:reduce){
  .ai1blog-category-intro::before,
  .ai1blog-category-intro::after,
  .ai1blog-category-title,
  .ai1blog-kicker,
  .ai1blog-section-kicker,
  .ai1blog-feed-kicker,
  .ai1blog-content-card h2,
  .ai1blog-category-btn,
  .ai1blog-btn{
    animation:none !important;
  }

  .ai1blog-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* ============================================================
   18) KEYFRAMES
============================================================ */

@keyframes ai1blogGradient{
  0%{background-position:0% 50%;}
  100%{background-position:400% 50%;}
}

@keyframes ai1blogGradient300{
  0%{background-position:0% 50%;}
  100%{background-position:300% 50%;}
}

@keyframes ai1blogGradient350{
  0%{background-position:0% 50%;}
  100%{background-position:350% 50%;}
}

@keyframes ai1blogGradient500{
  0%{background-position:0% 50%;}
  100%{background-position:500% 50%;}
}

@keyframes ai1blogBorderFlow{
  0%{background-position:0% 50%;}
  100%{background-position:300% 50%;}
}

@keyframes ai1blogSweep{
  0%,42%{left:-65%;opacity:0;}
  52%{opacity:1;}
  100%{left:135%;opacity:0;}
}

@keyframes ai1blogTextGlow{
  0%,100%{
    filter:
      drop-shadow(0 0 8px rgba(57,255,20,.14))
      drop-shadow(0 0 15px rgba(0,207,255,.10));
  }
  50%{
    filter:
      drop-shadow(0 0 15px rgba(57,255,20,.25))
      drop-shadow(0 0 25px rgba(0,207,255,.20));
  }
}

@keyframes ai1blogOrb{
  0%{transform:rotate(0deg) scale(1);}
  50%{transform:rotate(180deg) scale(1.06);}
  100%{transform:rotate(360deg) scale(1);}
}


/* ============================================================
   19) FULL ARTICLE POLISH — MAGAZINE / EDITORIAL TREATMENT
============================================================ */

/* Standalone article outer Joomla wrappers */
.com-content-article.item-page{
  position:relative;
  isolation:isolate;
  overflow:visible;
  margin:0;
  padding:0;
  background:
    radial-gradient(circle at 8% 14%, rgba(57,255,20,.06), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(0,207,255,.07), transparent 30%),
    linear-gradient(180deg,#07111f 0%,#050c16 100%);
}

.com-content-article.item-page .com-content-article__body{
  margin:0;
  padding:0;
}

/* Tighten hero slightly and make it feel more editorial */
.com-content-article.item-page .ai1blog-page > .ai1blog-hero{
  min-height:clamp(520px,62vh,700px);
}

.com-content-article.item-page .ai1blog-page > .ai1blog-hero .ai1blog-hero-inner{
  min-height:clamp(520px,62vh,700px);
  padding:clamp(4.5rem,8vw,6.5rem) 1.5rem clamp(3.5rem,6vw,5rem);
}

.com-content-article.item-page .ai1blog-page > .ai1blog-hero .ai1blog-hero-card{
  width:min(1120px,100%);
  padding:clamp(2.3rem,5vw,4.4rem);
}

/* Editorial eyebrow detail */
.com-content-article.item-page .ai1blog-page > .ai1blog-hero .ai1blog-kicker{
  box-shadow:
    0 12px 28px rgba(57,255,20,.18),
    0 0 24px rgba(0,207,255,.12),
    inset 0 1px 0 rgba(255,255,255,.34);
}

/* Stronger article title hierarchy */
.com-content-article.item-page .ai1blog-page > .ai1blog-hero h1{
  max-width:1000px;
  font-size:clamp(3rem,6.7vw,5.7rem);
}

.com-content-article.item-page .ai1blog-page > .ai1blog-hero .ai1blog-lead{
  max-width:850px;
}

/* Article content sits closer to the hero and wider than before */
.com-content-article.item-page .ai1blog-body{
  padding:clamp(3rem,5vw,4.5rem) 0 clamp(4rem,7vw,6rem);
}

.com-content-article.item-page .ai1blog-wrap{
  width:min(1180px,calc(100% - 48px));
}

.com-content-article.item-page .ai1blog-content-card{
  padding:clamp(2.2rem,5vw,4.7rem);
  border-radius:36px;
  background:
    radial-gradient(circle at 6% 7%,rgba(57,255,20,.08),transparent 30%),
    radial-gradient(circle at 94% 10%,rgba(0,207,255,.09),transparent 31%),
    linear-gradient(145deg,rgba(8,24,43,.96),rgba(5,14,26,.98));
}

/* First paragraph treatment */
.com-content-article.item-page .ai1blog-intro{
  max-width:900px;
  margin:0 0 2.8rem;
  padding:1.15rem 1.35rem;
  border:1px solid rgba(255,255,255,.10);
  border-left:5px solid var(--ai1blog-cyan);
  border-radius:0 18px 18px 0;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

/* Give sections a little more rhythm */
.com-content-article.item-page .ai1blog-content-card h2{
  margin-top:3.2rem;
}

.com-content-article.item-page .ai1blog-content-card h2::after{
  content:"";
  display:block;
  width:76px;
  height:3px;
  margin-top:.7rem;
  border-radius:999px;
  background:linear-gradient(90deg,var(--ai1blog-green),var(--ai1blog-cyan),var(--ai1blog-orange));
  box-shadow:0 0 16px rgba(0,207,255,.15);
}

.com-content-article.item-page .ai1blog-content-card h2:first-of-type{
  margin-top:.6rem;
}

/* Slightly wider measure for body copy */
.com-content-article.item-page .ai1blog-content-card > p,
.com-content-article.item-page .ai1blog-content-card > ul,
.com-content-article.item-page .ai1blog-content-card > aside,
.com-content-article.item-page .ai1blog-content-card > section{
  max-width:980px;
}

/* Summary block as strong editorial panel */
.com-content-article.item-page .ai1blog-summary-panel{
  max-width:none !important;
  padding:clamp(1.7rem,3vw,2.5rem);
  border-radius:30px;
  background:
    radial-gradient(circle at 8% 10%,rgba(57,255,20,.14),transparent 30%),
    radial-gradient(circle at 90% 14%,rgba(0,207,255,.15),transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
}

/* Quick Takeaway cards get stronger visual hierarchy */
.com-content-article.item-page .ai1blog-summary-grid article{
  min-height:180px;
  padding:1.45rem;
}

.com-content-article.item-page .ai1blog-summary-grid span{
  width:52px;
  height:52px;
  margin-bottom:1.1rem;
}

.com-content-article.item-page .ai1blog-summary-grid h4{
  font-size:1.08rem;
}

/* Callouts behave like proper editorial pull quotes */
.com-content-article.item-page .ai1blog-callout{
  max-width:920px !important;
  margin:2.5rem auto;
  padding:1.7rem 1.8rem 1.7rem 2rem;
}

.com-content-article.item-page .ai1blog-callout p{
  font-size:1.04rem;
}

/* CTA gets a touch more drama */
.com-content-article.item-page .ai1blog-cta{
  max-width:none !important;
  margin-top:3.4rem;
  padding:clamp(2rem,4vw,3.3rem);
}

/* ============================================================
   20) REMOVE ARTICLE-BOTTOM BYTE DIVIDER COMPLETELY
   ------------------------------------------------------------
   The article already ends with a CTA, and the footer has its own
   Byte divider. This extra divider/orange strip is unnecessary.
============================================================ */

.com-content-article.item-page .ai1blog-page + .ai1-byte-divider{
  display:none !important;
}

/* Make the transition from article to footer clean and dark */
.com-content-article.item-page{
  background:#050c16;
}

.com-content-article.item-page + *{
  margin-top:0;
}

/* If an old divider wrapper leaves any inherited spacing */
.com-content-article.item-page .ai1-section-divider{
  margin:0;
}

/* ============================================================
   21) FULL ARTICLE MOBILE POLISH
============================================================ */

@media (max-width:768px){
  .com-content-article.item-page .ai1blog-page > .ai1blog-hero h1{
    font-size:clamp(2.45rem,11vw,4rem);
  }

  .com-content-article.item-page .ai1blog-wrap{
    width:calc(100% - 28px);
  }

  .com-content-article.item-page .ai1blog-content-card{
    padding:1.6rem 1.25rem;
    border-radius:24px;
  }

  .com-content-article.item-page .ai1blog-intro{
    padding:1rem 1rem;
  }

  .com-content-article.item-page .ai1blog-callout{
    padding:1.35rem 1.25rem 1.35rem 1.45rem;
  }
}


/* ============================================================
   22) FULL ARTICLE SCROLL CHOREOGRAPHY
   ------------------------------------------------------------
   Controlled by blog.js.
   - Replays on scroll down and back up.
   - Alternates left/right for editorial rhythm.
   - Keeps structural wrappers untouched.
============================================================ */

.ai1-blog-js-active .ai1blog-reveal{
  opacity:0;
  transition:
    opacity .76s var(--ai1blog-ease),
    transform .76s var(--ai1blog-ease);
  transition-delay:var(--ai1blog-delay,0ms);
  will-change:opacity,transform;
}

.ai1-blog-js-active .ai1blog-reveal.ai1blog-from-left{
  transform:translate3d(-54px,18px,0);
}

.ai1-blog-js-active .ai1blog-reveal.ai1blog-from-right{
  transform:translate3d(54px,18px,0);
}

.ai1-blog-js-active .ai1blog-reveal.ai1blog-from-up{
  transform:translate3d(0,-38px,0);
}

.ai1-blog-js-active .ai1blog-reveal.ai1blog-from-down{
  transform:translate3d(0,38px,0);
}

.ai1-blog-js-active .ai1blog-reveal.ai1blog-zoom{
  transform:translate3d(0,24px,0) scale(.972);
}

.ai1-blog-js-active .ai1blog-reveal.is-inview{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

/* When scrolling back upwards, hidden items subtly reverse their
   vertical direction so the page feels responsive to travel direction. */
body.ai1-scroll-up .ai1blog-reveal.ai1blog-from-left:not(.is-inview){
  transform:translate3d(-54px,-18px,0);
}

body.ai1-scroll-up .ai1blog-reveal.ai1blog-from-right:not(.is-inview){
  transform:translate3d(54px,-18px,0);
}

body.ai1-scroll-up .ai1blog-reveal.ai1blog-from-down:not(.is-inview){
  transform:translate3d(0,-38px,0);
}

body.ai1-scroll-down .ai1blog-reveal.ai1blog-from-up:not(.is-inview){
  transform:translate3d(0,38px,0);
}

/* Paragraph/list reveals are deliberately softer than feature cards. */
.ai1-blog-js-active .ai1blog-reveal.ai1blog-copy{
  transform:translate3d(0,22px,0);
}

body.ai1-scroll-up .ai1blog-reveal.ai1blog-copy:not(.is-inview){
  transform:translate3d(0,-22px,0);
}

/* Avoid transform blur on buttons/text after reveal. */
.ai1-blog-js-active .ai1blog-reveal.is-inview{
  will-change:auto;
}

@media (max-width:768px){
  .ai1-blog-js-active .ai1blog-reveal.ai1blog-from-left{
    transform:translate3d(-28px,12px,0);
  }

  .ai1-blog-js-active .ai1blog-reveal.ai1blog-from-right{
    transform:translate3d(28px,12px,0);
  }

  body.ai1-scroll-up .ai1blog-reveal.ai1blog-from-left:not(.is-inview){
    transform:translate3d(-28px,-12px,0);
  }

  body.ai1-scroll-up .ai1blog-reveal.ai1blog-from-right:not(.is-inview){
    transform:translate3d(28px,-12px,0);
  }
}

@media (prefers-reduced-motion:reduce){
  .ai1blog-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ============================================================
   23) FULL ARTICLE MOTION — RELIABLE DEDICATED SYSTEM
   ------------------------------------------------------------
   Controlled by blog.js using ai1blog-motion-* classes.
   Separate from the category-page reveal system so full articles
   always receive a painted hidden state before observation begins.
============================================================ */

.com-content-article.item-page .ai1blog-motion{
  opacity:0;
  transition:
    opacity .82s cubic-bezier(.22,1,.36,1),
    transform .82s cubic-bezier(.22,1,.36,1),
    filter .82s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--ai1blog-motion-delay,0ms);
  will-change:opacity,transform,filter;
}

.com-content-article.item-page .ai1blog-motion-left{
  transform:translate3d(-88px,18px,0);
  filter:blur(2px);
}

.com-content-article.item-page .ai1blog-motion-right{
  transform:translate3d(88px,18px,0);
  filter:blur(2px);
}

.com-content-article.item-page .ai1blog-motion-up{
  transform:translate3d(0,52px,0);
  filter:blur(1.5px);
}

.com-content-article.item-page .ai1blog-motion-zoom{
  transform:translate3d(0,30px,0) scale(.955);
  filter:blur(2px);
}

.com-content-article.item-page .ai1blog-motion.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:none;
  will-change:auto;
}

/* Reverse the vertical component when travelling back upwards. */
body.ai1-scroll-up .com-content-article.item-page .ai1blog-motion-left:not(.is-visible){
  transform:translate3d(-88px,-18px,0);
}

body.ai1-scroll-up .com-content-article.item-page .ai1blog-motion-right:not(.is-visible){
  transform:translate3d(88px,-18px,0);
}

body.ai1-scroll-up .com-content-article.item-page .ai1blog-motion-up:not(.is-visible){
  transform:translate3d(0,-52px,0);
}

/* The whole content panel remains visible. We only animate its contents. */
.com-content-article.item-page .ai1blog-content-card{
  opacity:1 !important;
  transform:none !important;
}

@media (max-width:768px){
  .com-content-article.item-page .ai1blog-motion-left{
    transform:translate3d(-34px,12px,0);
  }

  .com-content-article.item-page .ai1blog-motion-right{
    transform:translate3d(34px,12px,0);
  }

  .com-content-article.item-page .ai1blog-motion-up{
    transform:translate3d(0,34px,0);
  }

  body.ai1-scroll-up .com-content-article.item-page .ai1blog-motion-left:not(.is-visible){
    transform:translate3d(-34px,-12px,0);
  }

  body.ai1-scroll-up .com-content-article.item-page .ai1blog-motion-right:not(.is-visible){
    transform:translate3d(34px,-12px,0);
  }

  body.ai1-scroll-up .com-content-article.item-page .ai1blog-motion-up:not(.is-visible){
    transform:translate3d(0,-34px,0);
  }
}

@media (prefers-reduced-motion:reduce){
  .com-content-article.item-page .ai1blog-motion{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
}