/* AlanBush.me V2.1 — Lively Visual System */
:root{
  --ab-cyan:#35c8ff;
  --ab-blue:#2777ff;
  --ab-violet:#9158ff;
  --ab-green:#2bd39b;
  --ab-gold:#d4af37;
  --ab-gold-hi:#f4df91;
  --ab-red:#ff625f;
}
html{background:#040914}
body{
  position:relative;
  background:
    radial-gradient(circle at 8% 10%,rgba(53,200,255,.09),transparent 28rem),
    radial-gradient(circle at 92% 16%,rgba(145,88,255,.08),transparent 30rem),
    radial-gradient(circle at 54% 70%,rgba(43,211,155,.06),transparent 34rem),
    linear-gradient(180deg,#050a13 0%,#07111f 42%,#081322 100%)!important;
  background-attachment:fixed!important;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.30;
  background-image:
    linear-gradient(rgba(53,200,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(53,200,255,.035) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 88%);
}
body::after{
  content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;opacity:.65;
  background:
    radial-gradient(circle at 20% 30%,rgba(53,200,255,.10),transparent 22%),
    radial-gradient(circle at 75% 32%,rgba(212,175,55,.08),transparent 20%),
    radial-gradient(circle at 62% 70%,rgba(145,88,255,.08),transparent 24%);
  animation:abAurora 18s ease-in-out infinite alternate;
}
@keyframes abAurora{0%{transform:translate3d(-1.5%,0,0) scale(1)}100%{transform:translate3d(1.5%,-1%,0) scale(1.04)}}

/* Header becomes a luminous glass rail. */
.topbar,.site-header{
  border-bottom-color:rgba(53,200,255,.15)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.28),0 1px 0 rgba(212,175,55,.08)!important;
}

/* Main buttons: premium pulse on primary actions only. */
.btn:not(.secondary),.btn-primary{
  position:relative;isolation:isolate;overflow:visible;
  box-shadow:0 12px 30px rgba(212,175,55,.20),0 0 32px rgba(212,175,55,.10)!important;
}
.btn:not(.secondary)::before,.btn-primary::before{
  content:"";position:absolute;inset:-5px;border:2px solid rgba(244,223,145,.42);border-radius:inherit;opacity:0;z-index:-1;
  animation:abRing 2.8s ease-out infinite;
}
.btn:not(.secondary)::after,.btn-primary::after{
  content:"";position:absolute;inset:-10px;border:2px solid rgba(53,200,255,.22);border-radius:inherit;opacity:0;z-index:-2;
  animation:abRing 2.8s ease-out .75s infinite;
}
@keyframes abRing{0%{transform:scale(.94);opacity:0}18%{opacity:.65}72%,100%{transform:scale(1.10);opacity:0}}

/* Cards now feel like live platform modules. */
.card,.eco-card,.topic,.book,.assessment,.story-card,.route{
  position:relative!important;overflow:hidden!important;
  border-color:rgba(80,165,255,.18)!important;
  background:
    radial-gradient(circle at 88% 8%,rgba(53,200,255,.08),transparent 22%),
    linear-gradient(145deg,rgba(16,31,50,.92),rgba(7,15,27,.88))!important;
  box-shadow:0 20px 54px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.03)!important;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .32s ease,box-shadow .32s ease!important;
}
.card::after,.eco-card::after,.topic::after,.book::after,.route::after{
  content:"";position:absolute;inset:-60% auto -60% -30%;width:22%;transform:rotate(18deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);opacity:0;
  transition:transform .75s ease,opacity .3s ease;
}
.card:hover,.eco-card:hover,.topic:hover,.book:hover,.route:hover{
  transform:translateY(-7px)!important;
  border-color:rgba(212,175,55,.34)!important;
  box-shadow:0 28px 72px rgba(0,0,0,.38),0 0 34px rgba(53,200,255,.08)!important;
}
.card:hover::after,.eco-card:hover::after,.topic:hover::after,.book:hover::after,.route:hover::after{opacity:1;transform:translateX(620%) rotate(18deg)}

/* Visual hero/banner modules. */
.ab-visual-banner{
  width:min(1320px,94%);margin:34px auto 64px;position:relative;border-radius:28px;padding:1px;
  background:linear-gradient(115deg,rgba(53,200,255,.75),rgba(212,175,55,.72),rgba(145,88,255,.52));
  box-shadow:0 30px 90px rgba(0,0,0,.46),0 0 60px rgba(53,200,255,.10);
}
.ab-visual-banner::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;background:inherit;filter:blur(18px);opacity:.18;
}
.ab-visual-banner-inner{position:relative;border-radius:27px;overflow:hidden;background:#050a12}
.ab-visual-banner img{display:block;width:100%;height:auto;aspect-ratio:1916/821;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .4s ease}
.ab-visual-banner:hover img{transform:scale(1.018);filter:saturate(1.08) brightness(1.03)}
.ab-visual-banner .ab-banner-overlay{position:absolute;inset:auto 0 0;padding:28px 32px;background:linear-gradient(transparent,rgba(2,8,17,.92));display:flex;align-items:end;justify-content:space-between;gap:20px}
.ab-banner-overlay strong{font-size:clamp(22px,3vw,38px);font-family:Georgia,serif;color:#fff}
.ab-banner-overlay span{color:#b9c8d8;font-size:14px}

/* 2026 visual vertical gallery */
.ab-visual-section{padding:76px 0 86px;position:relative}
.ab-visual-section .section-title{max-width:880px;margin-bottom:30px}
.ab-visual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.ab-image-card{
  display:block;position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(80,165,255,.20);
  background:#050b14;box-shadow:0 24px 64px rgba(0,0,0,.36);isolation:isolate;
  transform:translateZ(0);transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease,border-color .38s ease;
}
.ab-image-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(125deg,rgba(53,200,255,.05),transparent 38%,rgba(212,175,55,.08));mix-blend-mode:screen}
.ab-image-card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
.ab-image-card img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s ease}
.ab-image-card:hover{transform:translateY(-9px) scale(1.008);border-color:rgba(212,175,55,.52);box-shadow:0 34px 82px rgba(0,0,0,.44),0 0 42px rgba(53,200,255,.10)}
.ab-image-card:hover img{transform:scale(1.025);filter:saturate(1.10) contrast(1.02)}
.ab-image-card .ab-card-label{position:absolute;left:18px;right:18px;bottom:18px;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 15px;border-radius:14px;background:rgba(4,10,20,.72);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(10px);transition:.35s ease}
.ab-image-card:hover .ab-card-label{opacity:1;transform:none}
.ab-card-label strong{color:#fff}.ab-card-label span{color:#f3cf69;font-size:13px;font-weight:800}

/* Color-coded card accents on the text ecosystem matrix. */
.accent-gold,.eco-gold{--accent:#d4af37!important}
.accent-cyan,.eco-cyan{--accent:#35c8ff!important}
.accent-green,.eco-green{--accent:#2bd39b!important}
.accent-red,.eco-red{--accent:#ff625f!important}
.accent-violet,.eco-violet{--accent:#a56bff!important}
.accent-blue,.eco-blue{--accent:#4c8fff!important}
.accent-teal,.eco-teal{--accent:#23d8c5!important}
.accent-amber,.eco-amber{--accent:#ffb744!important}
.eco-card,.eco-2026-card{border-color:color-mix(in srgb,var(--accent,#d4af37) 36%,transparent)!important}
.eco-card::before,.eco-2026-card::before{box-shadow:0 0 20px color-mix(in srgb,var(--accent,#d4af37) 35%,transparent)}
.card-badge{box-shadow:0 0 18px color-mix(in srgb,var(--accent,#d4af37) 12%,transparent)}

/* Scroll reveal. */
.ab-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.ab-reveal.ab-visible{opacity:1;transform:none}

/* Moving focus glow for maps */
.ecosystem-map,.map-wrap{position:relative!important;isolation:isolate}
.ecosystem-map::after,.map-wrap::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 20%,rgba(53,200,255,.14),rgba(212,175,55,.14),transparent 80%);background-size:220% 100%;mix-blend-mode:screen;animation:abScan 8s linear infinite}
@keyframes abScan{to{background-position:-220% 0}}

@media(max-width:860px){
  body{background-attachment:scroll!important}
  .ab-visual-grid{grid-template-columns:1fr}
  .ab-visual-banner{width:94%;margin-bottom:44px}
  .ab-visual-banner .ab-banner-overlay{padding:20px;align-items:flex-start;flex-direction:column}
  .ab-image-card .ab-card-label{opacity:1;transform:none}
}
@media(max-width:600px){
  .ab-visual-section{padding:54px 0 62px}
  .ab-visual-grid{gap:18px}
  .ab-image-card{border-radius:18px}
  .ab-visual-banner{border-radius:20px}.ab-visual-banner-inner{border-radius:19px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .ab-reveal{opacity:1!important;transform:none!important}
}


/* V2.2 — Homepage visual-card prominence */
.ab-home-visuals{
  padding-top:82px!important;
  padding-bottom:92px!important;
  background:
    radial-gradient(circle at 10% 20%,rgba(53,200,255,.08),transparent 30%),
    radial-gradient(circle at 90% 70%,rgba(165,107,255,.07),transparent 30%);
}
.ab-home-visuals .section-title{
  max-width:920px;
  margin:0 auto 34px!important;
}
.ab-home-visuals .ab-image-card{
  min-height:0;
}
.ab-home-visuals .ab-image-card .ab-card-label{
  opacity:1!important;
  transform:none!important;
  background:linear-gradient(90deg,rgba(3,9,19,.90),rgba(3,9,19,.68))!important;
  border-color:rgba(212,175,55,.18)!important;
}
.ab-home-visual-actions{
  display:flex;
  justify-content:center;
  margin-top:34px;
}
.ab-home-visual-actions .btn{
  position:relative;
  overflow:visible;
}
.ab-home-visual-actions .btn::before,
.ab-home-visual-actions .btn::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:2px solid rgba(212,175,55,.38);
  border-radius:inherit;
  opacity:0;
  animation:abHomePulse 2.8s ease-out infinite;
  pointer-events:none;
}
.ab-home-visual-actions .btn::after{animation-delay:1.15s}
@keyframes abHomePulse{
  0%{transform:scale(.97);opacity:.55}
  70%{transform:scale(1.11);opacity:0}
  100%{transform:scale(1.11);opacity:0}
}
@media(max-width:860px){
  .ab-home-visuals{padding-top:58px!important;padding-bottom:66px!important}
}
@media(prefers-reduced-motion:reduce){
  .ab-home-visual-actions .btn::before,
  .ab-home-visual-actions .btn::after{animation:none!important;display:none}
}


/* ==========================================================================
   V2.3 — Journey Ecosystem premium card system
   Matches the visual energy of the 2026 ecosystem maps and image cards.
   ========================================================================== */

.premium-portfolio-os{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 8% 16%,rgba(25,182,255,.11),transparent 29rem),
    radial-gradient(circle at 92% 28%,rgba(151,75,255,.10),transparent 31rem),
    radial-gradient(circle at 50% 88%,rgba(31,210,161,.07),transparent 34rem),
    linear-gradient(180deg,rgba(2,8,18,.2),rgba(2,7,16,.56));
}
.premium-portfolio-os::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(76,168,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(76,168,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%);
}
.portfolio-orbit{
  position:absolute;
  width:680px;height:680px;
  border:1px solid rgba(73,174,255,.10);
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}
.orbit-one{left:-360px;top:120px;box-shadow:0 0 90px rgba(24,170,255,.06)}
.orbit-two{right:-370px;bottom:40px;border-color:rgba(198,151,50,.12);box-shadow:0 0 90px rgba(212,175,55,.06)}

.portfolio-title{
  max-width:980px;
  margin-bottom:38px!important;
}
.portfolio-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px;
  padding:7px 12px;
  border:1px solid rgba(105,194,255,.24);
  border-radius:999px;
  background:rgba(22,114,170,.10);
  color:#8bd7ff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.portfolio-kicker::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:#65d8ff;
  box-shadow:0 0 13px rgba(101,216,255,.8);
}

.premium-portfolio-os .group-heading{
  display:grid!important;
  grid-template-columns:auto 1fr;
  align-items:end;
  gap:6px 20px;
  margin-bottom:20px;
  color:#fff5db;
}
.premium-portfolio-os .group-heading span{
  font-size:18px;
  font-weight:900;
  letter-spacing:.04em;
}
.premium-portfolio-os .group-heading small{
  grid-column:1 / -1;
  color:#8296aa;
  font-size:12px;
  font-weight:600;
  letter-spacing:.03em;
}
.premium-portfolio-os .group-heading::after{
  grid-column:2;
  grid-row:1;
  align-self:center;
  background:linear-gradient(90deg,rgba(212,175,55,.48),rgba(67,183,255,.18),transparent)!important;
}

.premium-grid{
  gap:24px!important;
}
.premium-eco-card{
  --accent:#d4af37;
  position:relative;
  min-height:315px;
  padding:24px 24px 22px!important;
  border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.04))!important;
  border-radius:24px!important;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 10rem),
    linear-gradient(145deg,rgba(14,27,43,.96),rgba(4,12,24,.98) 62%,rgba(4,9,18,.99))!important;
  box-shadow:
    0 22px 56px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(255,255,255,.01)!important;
  transform:translateZ(0);
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease,
    border-color .35s ease!important;
}
.premium-eco-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:100%!important;
  height:3px!important;
  background:linear-gradient(90deg,transparent,var(--accent),color-mix(in srgb,var(--accent) 42%,white),transparent)!important;
  box-shadow:0 0 22px color-mix(in srgb,var(--accent) 50%,transparent)!important;
}
.premium-eco-card::after{
  content:""!important;
  position:absolute!important;
  width:180px!important;height:180px!important;
  right:-80px!important;top:-82px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 68%)!important;
  opacity:.74!important;
  pointer-events:none!important;
  transform:none!important;
}
.premium-eco-card:hover{
  transform:translateY(-8px) scale(1.012)!important;
  border-color:color-mix(in srgb,var(--accent) 67%,white 5%)!important;
  box-shadow:
    0 30px 72px rgba(0,0,0,.48),
    0 0 36px color-mix(in srgb,var(--accent) 18%,transparent),
    inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.premium-eco-card:hover::after{
  opacity:1!important;
  transform:none!important;
}

.eco-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.eco-icon{
  width:54px;height:54px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:18px;
  color:color-mix(in srgb,var(--accent) 76%,white 24%);
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.10),transparent 45%),
    color-mix(in srgb,var(--accent) 13%,rgba(7,18,31,.94));
  border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
  box-shadow:
    0 10px 28px rgba(0,0,0,.28),
    0 0 24px color-mix(in srgb,var(--accent) 13%,transparent),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.eco-icon svg{
  width:29px;height:29px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.premium-eco-card .card-badge{
  margin:0!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)!important;
  color:color-mix(in srgb,var(--accent) 72%,white 28%)!important;
  background:color-mix(in srgb,var(--accent) 9%,rgba(4,12,24,.72))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
}
.premium-eco-card h3{
  margin:0 0 11px!important;
  color:#fff7e6!important;
  font-size:clamp(20px,2vw,26px)!important;
  line-height:1.12!important;
  text-shadow:0 2px 18px rgba(0,0,0,.24);
}
.premium-eco-card p{
  min-height:72px;
  margin:0 0 18px!important;
  color:#aebdca!important;
  font-size:13.5px!important;
  line-height:1.62!important;
}
.eco-link-list{
  display:grid!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
.eco-link-list li{
  padding:0!important;
  color:#8fa0af;
  font-size:11px;
  line-height:1.35;
}
.eco-link-list li::before{display:none!important}
.eco-link-list a{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  width:100%;
  padding:10px 12px!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.028)!important;
  color:#e9f2f8!important;
  font-size:12px!important;
  font-weight:800!important;
  text-decoration:none!important;
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease!important;
}
.eco-link-list a b{
  color:color-mix(in srgb,var(--accent) 76%,white 24%);
  font-size:14px;
  font-weight:900;
}
.eco-link-list a:hover{
  transform:translateX(3px);
  background:color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.025))!important;
  border-color:color-mix(in srgb,var(--accent) 30%,transparent)!important;
  color:#fff!important;
}

.premium-summary{
  margin-top:46px!important;
  gap:14px!important;
}
.premium-summary > div{
  position:relative;
  min-height:132px;
  padding:22px 18px 18px!important;
  border:1px solid rgba(88,179,233,.14)!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(43,184,242,.10),transparent 10rem),
    linear-gradient(145deg,rgba(12,29,46,.82),rgba(4,12,23,.94))!important;
  box-shadow:0 16px 38px rgba(0,0,0,.24)!important;
}
.premium-summary .summary-icon{
  display:inline-flex;
  margin-bottom:10px;
  color:#d4af37;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}
.premium-summary strong{
  color:#fff3cf!important;
  font-size:16px!important;
}
.premium-summary div > span:last-child{
  color:#9dafbd!important;
}

.premium-eco-card.accent-gold{--accent:#e6b941}
.premium-eco-card.accent-cyan{--accent:#38c9ff}
.premium-eco-card.accent-green{--accent:#38d39f}
.premium-eco-card.accent-red{--accent:#ff625e}
.premium-eco-card.accent-amber{--accent:#f3a83b}
.premium-eco-card.accent-violet{--accent:#a978ff}
.premium-eco-card.accent-blue{--accent:#4c87ff}
.premium-eco-card.accent-teal{--accent:#2ecdc1}

@media(max-width:920px){
  .premium-eco-card{min-height:0}
  .premium-eco-card p{min-height:0}
}
@media(max-width:680px){
  .premium-portfolio-os .portfolio-title{text-align:left}
  .premium-eco-card{padding:20px!important;border-radius:20px!important}
  .eco-icon{width:48px;height:48px;border-radius:15px}
  .eco-icon svg{width:25px;height:25px}
  .premium-eco-card h3{font-size:21px!important}
  .premium-summary > div{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .premium-eco-card,.eco-link-list a{transition:none!important}
  .premium-eco-card:hover{transform:none!important}
}