: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);
--bg1: #0b1625 !important; --bg2: #0b1625 !important;}


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 { min-height: 100vh; background-attachment: fixed;
  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, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%), 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, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%), 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, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%) 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%, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%)}
.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, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%) 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(8,12,20,1) 95%, rgba(8,12,20,1) 100%), 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: none !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: none !important; 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, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%); 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: none !important; }


/* === 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(8,12,20,1) 95%, rgba(8,12,20,1) 100%), 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, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%);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, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%) 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, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%) 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, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%) 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, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%) 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: none !important;
}
.banner.banner--divider::after{
  bottom: -1px;
  background: none !important;
}

/* 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, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%), 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, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%) 95%, transparent));
}
.section.seamless-bottom::after{
  bottom:-1px;
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--bg1, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%) 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, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%), 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, rgba(8,12,20,1) 95%, rgba(8,12,20,1) 100%), 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); }


/* === Compact service cards (merged 12 -> one section) === */
.feature-card .card-media img{
  height: 160px;
  width: 100%;
  object-fit: cover;
  display: block;
  border-top-left-radius: calc(var(--bs-border-radius-xxl) - 1px);
  border-top-right-radius: calc(var(--bs-border-radius-xxl) - 1px);
}
.feature-card .card-body{ padding: 1rem !important; }
.feature-card .brand{ font-size: 0.95rem; letter-spacing:.06em }
.feature-card p{ margin-bottom: .5rem; }
@media (min-width: 992px){
  .feature-card .card-media img{ height: 140px; }
}


/* === Tighter compact service cards (half-height images) === */
.feature-card .card-media img{
  height: 90px !important;
  width: 100%;
  object-fit: cover;
  border-top-left-radius: calc(var(--bs-border-radius-xxl) - 1px);
  border-top-right-radius: calc(var(--bs-border-radius-xxl) - 1px);
}
.feature-card .card-body{ padding: 0.75rem !important; }
.feature-card .brand{ font-size: 0.9rem; letter-spacing:.05em }
.feature-card p{ margin-bottom: .25rem; font-size: 0.85rem; }
.row.g-4 > [class*="col-"]{ padding: 0.5rem !important; }


/* === Replace space/star effects with static wallpaper === */
.fx-host .fx-canvas{ display:none !important; }
.fx-host{ overflow: visible; } /* allow normal overflow */

/* Global wallpaper */
html, body { min-height: 100vh; background-attachment: fixed;
  background: url('../assets/img/wallpaper.jpg') center/cover fixed no-repeat, var(--bg1) !important;
}
.section{ background: transparent !important; }
.banner{ background: none !important; }


/* === Remove only horizontal divider shadows === */
.section::before, .section::after,
.banner::before, .banner::after,
.pricing::before, .pricing::after {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  opacity: 0 !important;
}


/* === Compact consistent vertical spacing across sections === */
.section, .banner, .pricing, .seamless-top, .seamless-bottom {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}


/* === Global instant visibility, no loader or fade === */
#loader, .loader { display: none !important; }
#page, main#page {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}
body { overflow: auto !important; }


/* === Particle/sand/star effects disabled site-wide === */
canvas.fx-canvas, .fx-canvas { display: none !important; visibility: hidden !important; opacity: 0 !important; }


/* === GLOBAL SHARP CORNERS OVERRIDE === */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* === Flat Edges Stable Override (v1-30) === */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* Remove rounded visuals on common UI components without touching layout engines */
img,
.card, .banner, .feature, .highlight, .service, .section, .content, .panel,
.button, button, .btn, .nav-btn, .navbar a, .navbar .btn, .login, input, textarea, select {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Ensure pseudo-elements used for frames/overlays are square too */
.card::before, .card::after,
.banner::before, .banner::after,
.feature::before, .feature::after,
.highlight::before, .highlight::after,
.service::before, .service::after,
.section::before, .section::after,
.content::before, .content::after,
.panel::before, .panel::after {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Keep gradient background as-is — do NOT override page backgrounds */
html, body { background-attachment: fixed; }


/* Full-screen hero */
.hero-full {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 120px;     /* space for navbar */
  padding-bottom: 80px;
  overflow: hidden;
}

/* Center content */
.hero-content {
  position: relative;
  z-index: 2;
}

.hero-kicker {
  letter-spacing: 0.25em;
  font-size: 0.8rem;
  text-transform: uppercase;
  opacity: 0;
  animation: hero-fade-up 0.8s ease-out forwards 0.1s;
}

.hero-title {
  font-size: clamp(2.6rem, 4vw, 3.8rem);
  line-height: 1.1;
  margin-top: 1rem;
  opacity: 0;
  animation: hero-fade-up 0.9s ease-out forwards 0.25s;
}

.hero-subtitle {
  max-width: 46rem;
  margin: 1.5rem auto 0;
  font-size: 0.95rem;
  opacity: 0.8;
  opacity: 0;
  animation: hero-fade-up 0.9s ease-out forwards 0.4s;
}

.hero-actions {
  margin-top: 2rem;
  opacity: 0;
  animation: hero-fade-up 0.9s ease-out forwards 0.55s;
}

.hero-tagline {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  opacity: 0;
  animation: hero-fade-up 0.9s ease-out forwards 0.7s;
}

/* Soft animated glow over the existing galaxy background */
.hero-overlay {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 10% 20%, rgba(120, 180, 255, 0.18), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(207, 130, 255, 0.15), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.75;
  animation: hero-glow 18s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

/* Gentle float on the whole hero to stop it feeling static */
.hero-full::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    0 0 80px rgba(80, 140, 255, 0.15),
    0 0 160px rgba(170, 120, 255, 0.12);
  opacity: 0.7;
  transform: translateY(10px);
  animation: hero-float 14s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* Scroll indicator at bottom */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.7;
}

.hero-scroll-icon {
  width: 18px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  position: relative;
}

.hero-scroll-icon::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  transform: translateX(-50%);
  animation: hero-scroll-dot 1.4s ease-in-out infinite;
}

/* Keyframes */
@keyframes hero-fade-up {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-glow {
  0% {
    transform: translate3d(-10px, 0, 0) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate3d(10px, -10px, 0) scale(1.05);
    opacity: 0.9;
  }
}

@keyframes hero-float {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}

@keyframes hero-scroll-dot {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, 7px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 13px);
  }
}

/* Mobile refinements */
@media (max-width: 575.98px) {
  .hero-full {
    padding-top: 100px;
    padding-bottom: 60px;
  }

  .hero-full::before {
    inset: 6%;
    border-radius: 28px;
  }
}

/* === NAVBAR REFRESH === */

.navbar.main-nav{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: rgba(3, 16, 30, 0.96);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(120, 180, 255, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  padding-block: 0.6rem;
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    padding-block 0.2s ease;
}

/* Brand text */
.navbar.main-nav .navbar-brand span{
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: #f6fbff;
}

/* Nav links */
.navbar.main-nav .nav-link{
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding-inline: 0.9rem;
  color: rgba(219, 231, 245, 0.82);
  position: relative;
  transition: color 0.18s ease-out;
}

/* Underline glow effect */
.navbar.main-nav .nav-link::after{
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0.35rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(120, 180, 255, 0.0),
    rgba(120, 180, 255, 0.9),
    rgba(207, 130, 255, 0.0)
  );
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition:
    transform 0.22s ease-out,
    opacity 0.22s ease-out;
}

.navbar.main-nav .nav-link:hover,
.navbar.main-nav .nav-link:focus{
  color: #ffffff;
}

.navbar.main-nav .nav-link:hover::after,
.navbar.main-nav .nav-link:focus::after,
.navbar.main-nav .nav-link.active::after{
  transform: scaleX(1);
  opacity: 1;
}

/* Active link */
.navbar.main-nav .nav-link.active{
  color: #ffffff !important;
}

/* Login button */
.navbar.main-nav .btn-outline-accent{
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.45rem 1.4rem;
  border-width: 1px;
  border-color: rgba(120, 180, 255, 0.9);
  color: rgba(232, 241, 255, 0.96);
  box-shadow:
    0 0 0 1px rgba(8, 32, 55, 0.9),
    0 0 18px rgba(120, 180, 255, 0.45);
  background: radial-gradient(circle at 0 0, rgba(120, 180, 255, 0.28), transparent 60%);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    background 0.18s ease-out,
    color 0.18s ease-out;
}

.navbar.main-nav .btn-outline-accent:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(8, 32, 55, 0.95),
    0 0 28px rgba(144, 190, 255, 0.75);
  background: radial-gradient(circle at 100% 0, rgba(207, 130, 255, 0.36), transparent 60%);
  color: #04121d;
}
/* Animated hero headline */

.hero-title {
  font-size: clamp(2.8rem, 4vw, 4rem);
  line-height: 1.1;
  margin-top: 1rem;
}

/* Each line of the heading */
.hero-line {
  display: block;
  background-image: linear-gradient(
    120deg,
    #ffffff,
    #9fb9ff,
    #f2e5ff
  );
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 18px rgba(120, 180, 255, 0.35),
    0 0 40px rgba(15, 24, 48, 0.9);
  opacity: 0;
  transform: translateY(24px);
}

/* First and second lines: staggered reveal + slow shimmer */
.hero-line:first-child {
  animation:
    hero-line-reveal 0.9s ease-out forwards 0.15s,
    hero-line-shimmer 9s linear infinite 1.4s;
}

.hero-line:last-child {
  animation:
    hero-line-reveal 0.9s ease-out forwards 0.35s,
    hero-line-shimmer 9s linear infinite 1.8s;
}

/* Reveal animation */
@keyframes hero-line-reveal {
  0% {
    opacity: 0;
    transform: translateY(28px);
    background-position: 0% 50%;
  }
  60% {
    opacity: 1;
    transform: translateY(0);
    background-position: 50% 50%;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    background-position: 100% 50%;
  }
}

/* Very gentle, continuous light sweep across the text */
@keyframes hero-line-shimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Slight emphasis when the hero is hovered */
.hero-full:hover .hero-line {
  text-shadow:
    0 0 24px rgba(140, 190, 255, 0.55),
    0 0 60px rgba(40, 90, 180, 0.6);
}
/* === Layout: sticky footer across all pages === */
html,
body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main content wrappers grow to fill the space */
#page,
main {
  flex: 1 0 auto;
}

/* Footer sits at the bottom when content is short */
.footer {
  margin-top: auto;
}
.brand {
    color: #ffffff !important;
}