:root{
  --accent: #4db5ff;
  --accent2:#7cc6ff;
  --bg1:#02040a;
  --bg2:#050b16;
  --text:#e6f0ff;
  --muted:#9fb3d1;
  --glass-border: rgba(124,198,255,.18);
  --glass-fill: rgba(255,255,255,.03);
  --particle: rgba(124,198,255,.95);
}


html[data-theme="harkonnen"]{
  --accent:#e79a3f;
  --accent2:#f7c37e;
  --text:#f6ede0;
  --muted:#e1d2b8;
  --glass-border: rgba(231,154,63,.22);
  --glass-fill: rgba(255,255,255,.03);
  --particle: rgba(231,154,63,.95);
}
html,body{
  height:100%;
  background:
    radial-gradient(1200px 600px at 70% -10%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(1000px 400px at 10% -20%, color-mix(in oklab, var(--accent2) 18%, transparent), transparent 55%),
    var(--bg1);
  color:var(--text);
  font-family:"Cormorant Garamond", serif;
  margin:0;
  scroll-behavior:smooth;
}
.brand{font-family:"Cinzel", serif; letter-spacing:.08em}
.main-nav{backdrop-filter: blur(8px); background:color-mix(in oklab, var(--bg2) 80%, transparent); border-bottom:1px solid var(--glass-border); animation: slideDown .8s ease both}
.main-nav .nav-link.active{color:var(--accent)!important}
.btn-accent{background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#04121d; border:0; transition:transform .3s ease}
.btn-accent:hover{filter:brightness(.97); transform:translateY(-2px)}
.btn-outline-accent{color:var(--accent); border-color:var(--accent); transition:transform .3s ease}
.btn-outline-accent:hover{background:var(--accent); color:#04121d; transform:translateY(-2px)}
.loader{position:fixed; inset:0; background:var(--bg1); display:flex; align-items:center; justify-content:center; z-index:2000;}
.loader-card{display:grid; place-items:center; padding:2rem 3rem; border-radius:1.25rem; border:1px solid var(--glass-border); background:var(--glass-fill); box-shadow:0 20px 60px rgba(0,0,0,.45)}
.loader-logo{letter-spacing:.3em; text-transform:uppercase}
.loader-glow{width:160px; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent); animation:sweep 1.6s ease-in-out infinite}
@keyframes sweep{0%{transform:scaleX(.2); opacity:.5}50%{transform:scaleX(1); opacity:1}100%{transform:scaleX(.2); opacity:.5}}
#page{opacity:0; transform: translateY(12px) scale(.99); filter: blur(1px); transition: opacity .6s ease, transform .8s ease, filter .8s ease;}
#page.revealed{opacity:1; transform:none; filter:none}
.hero{position:relative; min-height:100vh; display:grid; place-items:center; overflow:hidden}
.hero::before{content:""; position:absolute; width:900px; height:900px; border-radius:50%; background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--accent) 28%, transparent), color-mix(in oklab, var(--accent2) 10%, transparent) 55%, transparent 60%); right:-200px; top:-250px; filter:blur(3px); opacity:.9; pointer-events:none}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:40vh; background: linear-gradient(to top, color-mix(in oklab, var(--accent2) 10%, transparent), transparent)}
.stars{position:absolute; inset:0; width:100%; height:100%; display:block}
.panel{position:absolute; inset:0; background:radial-gradient(60% 40% at 50% 80%, color-mix(in oklab, var(--bg2) 70%, transparent), transparent 70%); mask-image: linear-gradient(to top, black 60%, transparent 90%)}
.highlight{position:absolute; inset:0; pointer-events:none}
.highlight i{position:absolute; width:2px; height:2px; background:var(--particle); border-radius:50%; opacity:.7; animation: drift var(--t) linear infinite}
@keyframes drift{from{transform:translateY(100vh)} to{transform:translateY(-20vh)}}
.scroll-indicator{position:absolute; bottom:1.25rem; left:50%; transform:translateX(-50%); width:24px; height:40px; border:1px solid color-mix(in oklab, var(--text) 35%, transparent); border-radius:30px; display:flex; align-items:flex-start; justify-content:center; padding-top:6px}
.scroll-indicator span{width:4px; height:8px; background:color-mix(in oklab, var(--text) 85%, transparent); border-radius:2px; animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0); opacity:1}80%{opacity:.2}100%{transform:translateY(14px); opacity:0}}
.section{padding:6rem 0}
.kicker{letter-spacing:.3em; text-transform:uppercase; font-size:.75rem; color:var(--muted)}
.title{font-family:"Cinzel", serif; font-weight:600}
.glass{background:var(--glass-fill); border:1px solid var(--glass-border); border-radius:1.25rem; backdrop-filter: blur(10px); position:relative}
.glass::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 10%, color-mix(in oklab, var(--accent2) 18%, transparent), transparent 40%); border-radius:inherit; pointer-events:none}
.feature-card{transition:transform .4s ease, box-shadow .4s ease; border-color:var(--glass-border)}
.feature-card:hover{transform: translateY(-6px); box-shadow:0 25px 60px color-mix(in oklab, var(--accent) 12%, transparent)}
.banner{position:relative; min-height:60vh; background: radial-gradient(1200px 600px at 70% -10%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%), url('https://images.unsplash.com/photo-1606117331085-5760e3b58520?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat fixed}
.banner::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in oklab, var(--bg1) 80%, transparent), color-mix(in oklab, var(--bg1) 92%, transparent))}
@media (max-width: 991.98px){ .banner{background-attachment:scroll} }
.dot-nav{position:fixed; right:18px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:1100}
.dot-nav a{width:10px; height:10px; border-radius:50%; border:1px solid var(--glass-border); background:color-mix(in oklab, var(--bg1) 70%, transparent); display:block; transition:transform .2s ease, background-color .2s ease}
.dot-nav a.active{transform:scale(1.4); background:var(--accent); border-color:transparent}
@media (max-width: 991.98px){ .dot-nav{display:none} }
.reveal{opacity:0; transform:scale(.985); transition:opacity .6s ease, transform .8s ease}
.reveal.in{opacity:1; transform:none}
.reveal-up{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .8s ease}
.reveal-up.in{opacity:1; transform:none}
.footer{border-top:1px solid var(--glass-border); padding:2rem 0; margin-top:0}
.credit-badge{position:fixed; right:10px; bottom:10px; padding:.35rem .6rem; border-radius:.5rem; background:color-mix(in oklab, var(--accent) 20%, transparent); border:1px solid var(--glass-border); color:var(--text); font-size:.75rem; z-index:2001; backdrop-filter:blur(4px)}
/* Card media */
.card-media{border-radius:1rem; border:1px solid var(--glass-border); overflow:hidden}
.card-media img{width:100%; height:160px; object-fit:cover; display:block}
/* Timelines */
.timeline{position:relative; margin-left:1rem; padding-left:1.25rem; border-left:2px solid var(--glass-border)}
.timeline .t{position:relative; margin:0 0 1.5rem 0; padding-left:.75rem}
.timeline .t::before{content:""; position:absolute; left:-1.35rem; top:.25rem; width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent)}
/* Gallery masonry */
.masonry{column-count:1; column-gap:1rem}
@media(min-width:576px){ .masonry{column-count:2} }
@media(min-width:992px){ .masonry{column-count:3} }
.masonry img{width:100%; margin:0 0 1rem; border-radius:1rem; border:1px solid var(--glass-border)}
/* Tilt cards */
.tilt{transform-style:preserve-3d; transition:transform .2s ease}
.tilt:hover{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.01)}
/* SVG draw */
.path-draw path{stroke-dasharray:1000; stroke-dashoffset:1000; animation:draw 4s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* Motion prefs */
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }
@media (max-width: 576px){ .display-3{font-size: calc(1.6rem + 3vw)} }


/* Added by audit: visible focus for accessibility */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:static; width:auto; height:auto; padding:.5rem 1rem; display:inline-block; background:var(--accent); color:#000; border-radius:.5rem; }
/* Lazy images default */
img[loading="lazy"] { content-visibility:auto; }


/* World of Aethelos teaser */
.world-teaser{ padding: clamp(3rem, 6vw, 6rem) 0; background: radial-gradient(1200px 600px at 20% -10%, rgba(77,181,255,.12), transparent 60%), radial-gradient(900px 450px at 120% 20%, rgba(77,181,255,.08), transparent 60%); }
.world-teaser .section-title{ font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: .75rem;}
.world-teaser .lead{ max-width: 60ch; opacity:.9; }
.world-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:.75rem; margin:1.25rem 0 1.75rem;}
.world-chip{ padding:.6rem .8rem; border:1px solid #2a2f3a; border-radius:999px; text-align:center; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.03)); box-shadow:0 0 0 rgba(77,181,255,0); transition: transform .2s ease, box-shadow .2s ease; }
.world-chip:hover{ transform:translateY(-2px); box-shadow:0 0 24px rgba(77,181,255,.25); }
.button.cta{ display:inline-block; padding:.8rem 1.2rem; border-radius:.8rem; background:var(--accent); color:#000; text-decoration:none; font-weight:600; }
#type-rotate::after{ content:"|"; margin-left:.2rem; animation: caret 1s step-end infinite; }
@keyframes caret { 50% { opacity:0; } }


/* override: lighten hero overlay */
html body .banner::after{
  background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.22)) !important;
  opacity: 1 !important;
}


/* footer legal links */
.footer a.text-secondary { text-decoration: none; opacity: 0.85; }
.footer a.text-secondary:hover { opacity: 1; text-decoration: underline; }


/* unified footer styling */
.footer { border-top:1px solid var(--glass-border); padding:2rem 0; margin-top:2rem; }
.footer a.text-secondary { text-decoration:none; opacity:.85; }
.footer a.text-secondary:hover { opacity:1; text-decoration:underline; }


/* footer layout (no Bootstrap dependency) */
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
.footer .sep{opacity:.6; margin:0 .5rem;}
.footer a{color:var(--text); opacity:.85; text-decoration:none;}
.footer a:hover{opacity:1; text-decoration:underline;}


/* === Aurora Background (lightweight CSS only) === */
body::before{
  content:""; position:fixed; inset:-10%; z-index:-1;
  background:
    radial-gradient(60% 40% at 20% 10%, rgba(77,181,255,0.12), transparent 60%),
    radial-gradient(50% 30% at 80% 20%, rgba(137,196,255,0.10), transparent 60%),
    conic-gradient(from 180deg at 70% 30%, rgba(77,181,255,0.18), rgba(0,0,0,0) 25%, rgba(77,181,255,0.12) 50%, rgba(0,0,0,0) 75%, rgba(77,181,255,0.18));
  filter: blur(30px) saturate(120%);
  animation: auroraShift 24s ease-in-out infinite;
  pointer-events:none;
}
@keyframes auroraShift{ 0%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(0,-2%,0) scale(1.03);} 100%{transform:translate3d(0,0,0) scale(1);} }

/* === Command Palette (Ctrl/Cmd+K) === */
.cmdk-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(6px); display:none; align-items:flex-start; justify-content:center; padding-top:10vh; z-index:1000; }
.cmdk{ width:min(800px, 92vw); background:rgba(13,17,23,.95); border:1px solid #2a2f3a; border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.cmdk input{ width:100%; padding:14px 16px; background:transparent; border:0; color:var(--text); font-size:1rem; outline:none; }
.cmdk .list{ max-height:50vh; overflow:auto; }
.cmdk .item{ padding:12px 16px; display:flex; align-items:center; gap:10px; border-top:1px solid rgba(255,255,255,.04); cursor:pointer; }
.cmdk .item:hover, .cmdk .item.active{ background:rgba(77,181,255,.12); }
.cmdk kbd{ font-size:.8rem; opacity:.7; border:1px solid #2a2f3a; border-radius:6px; padding:0 .35rem; }

/* === 3D Tilt Cards === */
.tilt{ transform-style: preserve-3d; transition: transform .15s ease, box-shadow .2s ease; will-change: transform; }
.tilt:hover{ box-shadow: 0 10px 30px rgba(77,181,255,.18); }
.tilt .tilt-raise{ transform: translateZ(24px); }
@media (prefers-reduced-motion: reduce){
  .tilt, .tilt:hover{ transition:none; transform:none !important; }
}

/* === "Spice Oracle" bubble === */
.oracle-btn{ position:fixed; left:24px; bottom:24px; z-index:900; border:1px solid #2a2f3a; background:rgba(13,17,23,.95); color:var(--text); padding:.6rem .9rem; border-radius:999px; cursor:pointer; }
.oracle{ position:fixed; left:24px; bottom:72px; width:min(360px, 92vw); background:rgba(13,17,23,.98); border:1px solid #2a2f3a; border-radius:16px; padding:12px 14px; display:none; z-index:901; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.oracle .line{ padding:6px 4px; opacity:.9; }
.oracle .line::before{ content:"✦ "; opacity:.7; }

/* === Liquid Gradient Text === */
.liquid-text{ background: linear-gradient(90deg, #9ad0ff, #4db5ff, #b5e1ff, #9ad0ff); background-size: 300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation: liquidFlow 12s linear infinite; }
@keyframes liquidFlow{ 0%{background-position:0% 50%;} 100%{background-position:300% 50%;} }

/* === Visitor Counter === */
.footer .counter{ font-variant-numeric: tabular-nums; letter-spacing:.02em; opacity:.7; }


/* === Page Transition Overlay (panel swirl) === */
#transitionOverlay{ position:fixed; inset:0; z-index:1200; pointer-events:none; opacity:0; transition: opacity .45s ease; }
#transitionOverlay.active{ opacity:1; }
#transitionOverlay canvas{ position:absolute; inset:0; width:100%; height:100%; }
#transitionOverlay .veil{ position:absolute; inset:0; background: radial-gradient(80% 60% at 50% 50%, rgba(13,17,23,0.0), rgba(13,17,23,0.75)); }


/* === HOMEPAGE POLISH === */
.hero-title{letter-spacing:.02em;line-height:1.05;text-shadow:0 6px 30px rgba(124,92,255,.18),0 1px 0 rgba(255,255,255,.06);transform:translateZ(0)}
.hero-sub{color:var(--muted);max-width:72ch;margin-inline:auto}
.cta-band{position:relative;isolation:isolate}
.cta-band::after{content:"";position:absolute;inset:-40px -10%;background:radial-gradient(65% 60% at 50% 45%, rgba(124,92,255,.08), transparent 60%);filter:blur(20px);z-index:-1}

/* Cards */
.card-glass{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 8px 18px rgba(0,0,0,.25);transition:transform .18s ease, box-shadow .18s ease, border-color .18s;backdrop-filter:blur(8px)}
.card-glass:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.35);border-color:rgba(124,92,255,.35)}
.card-glass .card-title{font-weight:700;letter-spacing:.02em}

/* Buttons */
.btn-accent{background:linear-gradient(135deg,#6aa8ff,#7c5cff);border:1px solid rgba(255,255,255,.16);color:#eaf0ff;box-shadow:0 6px 24px rgba(124,92,255,.25)}
.btn-accent:hover{filter:brightness(1.06)}
.btn-accent:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(124,92,255,.35)}

/* Capabilities grid */
.capabilities-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;content-visibility:auto}
.capabilities-grid>article{grid-column:span 4}
@media (max-width:992px){.capabilities-grid>article{grid-column:span 6}}
@media (max-width:600px){.capabilities-grid>article{grid-column:span 12}}
.cap-card{padding:18px}
.cap-card .thumb{aspect-ratio:16/9;border-radius:12px;background:#121826;display:block}



/* --- Tools catalog A–Z --- */









/* Smooth footer transition under tools page */
body.tools-page .page-wrap::after { content:""; position:fixed; left:0; right:0; bottom:0; height:60vh; pointer-events:none; background: linear-gradient(180deg, rgba(12,18,28,0) 0%, rgba(16,24,36,0.35) 25%, rgba(18,28,44,0.55) 55%, rgba(20,32,52,0.85) 100%); z-index:-1; }



/* === Tools A–Z grid (scoped) === */
.tools-catalog { position: relative; }
.tools-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:18px; }
.tool-card-link { text-decoration:none; }
.tool-card {
  background: rgba(18, 26, 36, 0.70);
  border: 1px solid rgba(120,160,220,0.18);
  border-radius: 16px;
  padding: 16px 16px 18px;
  height: 100%;
  display:flex;
  flex-direction:column;
  gap: 8px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25) inset;
}
.tool-card:hover {
  transform: translateY(-2px);
  border-color: rgba(120,160,220,0.4);
  box-shadow: 0 0 0 1px rgba(120,160,220,0.25), 0 10px 40px rgba(30,60,120,0.25);
}
.tool-thumb {
  height: 120px;
  border-radius: 12px;
  background: radial-gradient(120px 60px at 30% 30%, rgba(120,160,220,0.22), rgba(20,28,40,0.0));
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tool-thumb img { max-height:100%; max-width:100%; opacity:.95; }
.tool-title { font-weight:700; letter-spacing:.4px; color:#e6ecff; }
.tool-desc { color: rgba(230,236,255,0.76); font-size:.92rem; }

/* Smoother full-page gradient only on tools page */
body.tools-page::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(80vw 60vh at 70% -20%, rgba(120,160,220,0.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(12,18,28,0) 0%,
                           rgba(16,24,36,0.25) 30%,
                           rgba(18,28,44,0.50) 65%,
                           rgba(20,32,52,0.88) 100%);
}
body.tools-page main{ padding-bottom: 100px; }


/* === Aethelos polish additions === */

/* Tools smoother backdrop */
body.tools-page::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(110vw 70vh at 80% -30%, rgba(120,160,220,0.16), rgba(0,0,0,0) 60%),
    radial-gradient(80vw 40vh at 15% 110%, rgba(20,32,52,0.55), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(12,18,28,0) 0%,
                           rgba(16,24,36,0.25) 28%,
                           rgba(18,28,44,0.50) 62%,
                           rgba(20,32,52,0.88) 100%);
}

/* Readability – IT Consultancy */
body.page-itc .text-secondary, 
body.page-itc .text-muted { color:#eaf1ff!important; opacity:.96; }
body.page-itc .card { background:rgba(18,26,36,.72); border:1px solid rgba(120,160,220,.22); }

/* FAQ dark theme */
body.faq-dark .accordion-button{ background:rgba(18,26,36,.9); color:#e6ecff; border:1px solid rgba(120,160,220,.2); }
body.faq-dark .accordion-item{ background:transparent; }
body.faq-dark .accordion-body{ background:rgba(18,26,36,.65); color:#e6ecff; border:1px solid rgba(120,160,220,.14); border-top:0; }
body.faq-dark .accordion-button:focus{ box-shadow:0 0 0 .2rem rgba(120,160,220,.15); }

/* --- Smooth long gradient for tools page --- */
body.tools-page::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(130,160,220,.18), transparent 60%),
    linear-gradient(180deg,
      rgba(10,16,24,1) 0%,
      rgba(12,20,30,.98) 20%,
      rgba(16,26,40,.92) 45%,
      rgba(20,32,52,.86) 70%,
      rgba(28,44,72,.82) 100%);
}


/* --- Visual dividers using the hero background --- */
.banner.banner--divider{
  min-height:32vh;
  margin: 3rem 0;
}
@media (max-width: 991.98px){
  .banner.banner--divider{ min-height: 26vh; margin: 2rem 0; }
}


/* --- Parallax polyfill (works on mobile) --- */
.parallax{
  /* Force scroll so we can simulate the effect */
  background-attachment: scroll !important;
  /* Let JS drive vertical offset using a CSS variable */
  background-position: center calc(50% + var(--py, 0px)) !important;
  will-change: background-position;
}
@media (prefers-reduced-motion: reduce){
  .parallax{ background-position: center center !important; }
}


/* --- Seamless divider polish --- */
/* Smooth blends so no harsh 'stripe' between sections */
.banner.banner--divider{
  position: relative;
  isolation: isolate; /* so pseudo-elements stay under content */
}
/* Top & bottom fades to merge with page background */
.banner.banner--divider::before,
.banner.banner--divider::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 0;
}
.banner.banner--divider::before{
  top: -1px;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--bg1) 100%, transparent) 0%, transparent 100%);
}
.banner.banner--divider::after{
  bottom: -1px;
  background: linear-gradient(to top, color-mix(in oklab, var(--bg1) 100%, transparent) 0%, transparent 100%);
}

/* Soft vignette band across the divider so the wallpaper doesn't look like a hard bar */
.banner.banner--divider{
  mask-image: radial-gradient(100% 120% at 50% 50%, black 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(100% 120% at 50% 50%, black 60%, transparent 100%);
}

/* Keep divider content (there is none) above fades */
.banner.banner--divider > *{ position: relative; z-index: 1; }

/* Ensure surrounding sections visually connect */
.section{ position: relative; background: linear-gradient(180deg, var(--bg1), var(--bg2)); }
.section.seamless-top::before,
.section.seamless-bottom::after{
  content:"";
  position:absolute; left:0; right:0; height:60px; pointer-events:none;
}
.section.seamless-top::before{
  top:-1px;
  background: linear-gradient(to top, transparent, color-mix(in oklab, var(--bg1) 95%, transparent));
}
.section.seamless-bottom::after{
  bottom:-1px;
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--bg1) 95%, transparent));
}

/* Tighter mobile spacing and weaker vignette */
@media (max-width: 991.98px){
  .banner.banner--divider{ min-height: 24vh; margin: 1.5rem 0; }
  .banner.banner--divider::before,
  .banner.banner--divider::after{ height: 50px; }
  .banner.banner--divider{
    mask-image: radial-gradient(120% 150% at 50% 50%, black 70%, transparent 100%);
    -webkit-mask-image: radial-gradient(120% 150% at 50% 50%, black 70%, transparent 100%);
  }
}

/* Make sure parallax variable doesn't push visible seams too much */
.banner.banner--divider{ --py: 0px; }


/* --- Decorative section effects (stars / spice) --- */
.fx-host{ position: relative; overflow: hidden; }
.fx-host .fx-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.fx-host > *{ position: relative; z-index: 1; }
.fx-host .fx-canvas{ mix-blend-mode: screen; opacity:.38; } /* subtle by default */
html[data-theme="harkonnen"] .fx-host .fx-canvas{ mix-blend-mode: lighten; }
@media (prefers-reduced-motion: reduce){
  .fx-host .fx-canvas{ display:none; }
}


/* --- Footer polish: fixed zone + soft blend --- */
.footer{
  position: relative;
  min-height: 140px; /* set area */
  background:
    radial-gradient(120% 140% at 70% -20%, rgba(124,198,255,.08), transparent 60%),
    radial-gradient(120% 160% at 20% 120%, rgba(124,92,255,.06), transparent 70%),
    linear-gradient(180deg, var(--bg2), var(--bg1));
  border-top: 1px solid color-mix(in oklab, var(--glass-border) 85%, transparent);
  box-shadow: 0 -20px 60px rgba(0,0,0,.35) inset;
  overflow: hidden;
  isolation: isolate;
}
/* seamless curved blend to content above */
.footer::before{
  content:"";
  position:absolute; left:0; right:0; top:-1px;
  height: 120px;
  background:
    radial-gradient(140% 120% at 50% 0%,
      color-mix(in oklab, var(--bg1) 98%, transparent) 0%,
      color-mix(in oklab, var(--bg1) 75%, transparent) 40%,
      transparent 75%);
  pointer-events:none;
  z-index:0;
}
/* subtle top highlight line for definition */
.footer::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(124,198,255,.25), transparent);
  opacity:.5;
  pointer-events:none;
}
/* keep content above the decorative layers */
.footer > *{ position: relative; z-index: 1; }

@media (max-width: 991.98px){
  .footer{ min-height: 120px; }
  .footer::before{ height: 90px; }
}


/* === Readability fix for login form labels & helpers === */
.card.card-login.shadow-lg label,
.card.card-login.shadow-lg .form-label,
.card.card-login.shadow-lg .form-text,
.card.card-login.shadow-lg .form-check-label {
  color: #ffffff !important;
}
.card.card-login.shadow-lg input::placeholder,
.card.card-login.shadow-lg textarea::placeholder {
  color: #d9d9d9 !important;
  opacity: 1;
}
.card.card-login.shadow-lg .form-hint, .card.card-login.shadow-lg .text-muted {
  color: #e6e6e6 !important;
}



/* === Aethelos Performance (inline, safe) === */
.section, .hero, .banner, .features, .cards, .cta, .footer, .panel, .container {
  content-visibility: auto;
  contain-intrinsic-size: 900px 700px;
}
.glass, .card-glass, .frosted, .card.glass, .card.card-glass {
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
}
.parallax, .starfield, .fade-in, .reveal-in, .hero-title {
  will-change: transform, opacity;
}
[data-reveal]{ opacity:0; transform:translateY(24px); transition:transform .6s ease, opacity .6s ease; }
[data-reveal].reveal-in{ opacity:1; transform:translateY(0); }