:root{
--bg-0: #0c0f14;         /* page background */
--bg-1: #11161d;         /* cards */
--acc-1: #5ad3ff;        /* cyan accent */
--acc-2: #b988ff;        /* purple accent */
--muted: #9aa4b2;
--glass: rgba(255,255,255,.06);
--glass-border: rgba(255,255,255,.14);
--radius-xl: 20px;
--radius-xxl: 12px;
}
html,body{background: radial-gradient(1200px 600px at 10% -10%, rgba(90,211,255,.08), transparent 60%),
radial-gradient(1200px 600px at 90% -20%, rgba(185,136,255,.09), transparent 60%),
var(--bg-0);}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";}
/* Headings like Crafto */
.display-hero{font-family: "Space Grotesk", Inter, sans-serif; letter-spacing:-.02em;}
/* Glass utilities */
.glass{background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid var(--glass-border); box-shadows: 0 12px 30px rgba(0,0,0,.35);
border-radius: var(--radius-xl);}
.glass-soft{background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px);}
.card.glass{overflow:hidden}
.card img{object-fit: cover;}
/* News hover lift */
.news-card{transition:transform .2s ease, box-shadow .2s ease}
.news-card:hover{transform:translateY(-2px);box-shadows:0 16px 40px rgba(0,0,0,.35)}
@media (prefers-reduced-motion: reduce){.news-card{transition:none}}
/* Buttons */
.btn-cyan{--bs-btn-color:#071019; --bs-btn-bg:#4CD1FF; --bs-btn-border-color:#4CD1FF; --bs-btn-hover-bg:#39c9fb; --bs-btn-hover-border-color:#39c9fb; --bs-btn-active-bg:#25bff6;}
.btn-outline-cyan{--bs-btn-color:#9fe3ff; --bs-btn-border-color:#2a99c8; --bs-btn-hover-bg:#2a99c8; --bs-btn-hover-color:#071019;}
/* Section spacing */
section{padding: clamp(3.5rem, 6vw, 6rem) 0}
/* Nav */
.navbar{background: rgba(8,11,16,.55); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.08)}
/* Hero */
.hero{position: relative; isolation: isolate;}
.hero::after{content:""; position:absolute; inset:0; background: radial-gradient(900px 380px at 30% 0%, rgba(92,173,255,.2), transparent 60%), radial-gradient(900px 380px at 70% -10%, rgba(185,136,255,.15), transparent 60%); z-index:-1}
.hero-video{border-radius: var(--radius-xl); overflow:hidden;}
/* Grid cards */
.badge-dot{display:inline-flex; align-items:center; gap:.4rem}
.badge-dot::before{content:""; width:.5rem; height:.5rem; background: var(--acc-1); border-radius:50%; box-shadows:0 0 .6rem rgba(90,211,255,.9)}
/* Category grid */
.category-tile{position:relative;height:180px;border-radius:16px;overflow:hidden}
.category-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.1)}
.category-tile .shade{position:absolute;inset:0;background:linear-gradient(to top, rgba(8,11,16,.85) 0%, rgba(8,11,16,0) 65%)}
.category-tile::after{content:"";position:absolute;inset:-20%;background:radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0), rgba(0,0,0,.45));pointer-events:none;opacity:.8;transition:opacity .25s ease}
.category-tile:hover::after{opacity:1}
.category-tile .label{position:absolute;left:14px;bottom:12px;font-weight:700}
.tile-cta{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);transition:transform .2s ease,background .2s ease}
.category-tile:hover .tile-cta{transform:translateY(-2px)}
/* Theme toggle button */
.btn-theme{width:36px;height:36px;border-radius:999px;display:inline-grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}
.btn-theme:hover{background:rgba(255,255,255,.12)}
/* Light theme overrides */
[data-bs-theme="light"]{
--bg-0:#f7f8fb;            /* page background */
--bg-1:#ffffff;            /* cards */
--acc-1:#0dcaf0;           /* cyan accent (Bootstrap-like) */
--acc-2:#6f42c1;           /* purple accent */
--muted:#5c6773;
--glass: rgba(255,255,255,.65);
--glass-border: rgba(0,0,0,.06);
--divider: rgba(0,0,0,.08);
}

/* Backgrounds per theme */
html[data-bs-theme="light"],
body[data-bs-theme="light"],
[data-bs-theme="light"] body{background:
radial-gradient(1200px 600px at 10% -10%, rgba(13,202,240,.08), transparent 60%),
radial-gradient(1200px 600px at 90% -20%, rgba(111,66,193,.06), transparent 60%),
var(--bg-0) !important;}
/* Navbar per theme */
[data-bs-theme="light"] .navbar{background: rgba(255,255,255,.7); border-bottom:1px solid var(--divider)}
[data-bs-theme="light"] .hero-wrap{background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.65)); border-color: var(--divider); box-shadows:0 16px 40px rgba(0,0,0,.08)}
[data-bs-theme="light"] .hero-badge{background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08)}
/* Glass per theme */
[data-bs-theme="light"] .glass{background: var(--glass); border-color: var(--glass-border); box-shadows:0 12px 30px rgba(0,0,0,.08)}
[data-bs-theme="light"] .glass-soft{background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.06)}
/* Links and outlines in light */
[data-bs-theme="light"] .link-fade{color:#0d6efd}
[data-bs-theme="light"] .link-fade:hover{color:#0a58ca}
[data-bs-theme="light"] .btn-outline-light{--bs-btn-color:#212529; --bs-btn-border-color:rgba(0,0,0,.2); --bs-btn-hover-bg:#212529; --bs-btn-hover-border-color:#212529; --bs-btn-hover-color:#fff}
/* Footers & dividers */
[data-bs-theme="light"] footer{border-top:1px solid var(--divider)}
[data-bs-theme="light"] .footer-hr{border-top-color: var(--divider)}
/* Category tiles: keep contrast in light */
[data-bs-theme="light"] .category-tile .shade{background:linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 60%)}
/* Theme toggle button in light */
[data-bs-theme="light"] .btn-theme{border-color: rgba(0,0,0,.2); background: rgba(255,255,255,.85)}
[data-bs-theme="light"] .btn-theme:hover{background: rgba(255,255,255,.95)}

/* Bootstrap ratio helpers: make inner <img> cover */
.ratio>img,.ratio>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* News thumbs: fixed ratio + cover */
.news-card .col-5{position:relative;aspect-ratio:16/9}
.news-card .col-5 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Card tops in learning/docs: unified crop */
.card-img-top{width:100%;aspect-ratio:16/9;object-fit:cover}

/* Footer refresh to match reference */
footer{color:#c7cdd6}
.footer-hr{border-top:1px solid rgba(255,255,255,.08)}
.footer-col h6{font-weight:700;color:#fff;margin-bottom:1rem}
.footer-col ul{margin:0;padding:0;list-style:none}
.footer-col li{margin:.55rem 0}
.footer-col a{color:rgba(255,255,255,.85);text-decoration:none}
.footer-col a:hover{color:#fff}
.social-row a{opacity:.85;color:rgba(255,255,255,.85)}
.social-row a:hover{opacity:1;color:#fff}
.footer-brand{font-weight:800;letter-spacing:.02em;color:#fff}
.btn-backtop{--bs-btn-bg:rgba(255,255,255,.10);--bs-btn-color:#e9ecef;--bs-btn-border-color:rgba(255,255,255,.15);--bs-btn-hover-bg:rgba(255,255,255,.18);--bs-btn-hover-border-color:rgba(255,255,255,.25)}
/* Light theme footer */
[data-bs-theme="light"] footer{color:#5c6773}
[data-bs-theme="light"] .footer-col h6{color:#111}
[data-bs-theme="light"] .footer-col a{color:#212529}
[data-bs-theme="light"] .footer-col a:hover{color:#000}
[data-bs-theme="light"] .social-row a{color:#212529}
[data-bs-theme="light"] .social-row a:hover{color:#000}
[data-bs-theme="light"] .btn-backtop{--bs-btn-bg:#e9ecef;--bs-btn-color:#111;--bs-btn-border-color:#e9ecef;--bs-btn-hover-bg:#dee2e6}
[data-bs-theme="light"] .footer-hr{border-top-color:rgba(0,0,0,.08)}
/* Navbar/brand wordmark color in light */
[data-bs-theme="light"] .footer-brand{color:#111}
[data-bs-theme="light"] .navbar .navbar-brand{color:#111}
/* UEFN cards */
.uefn-card{border:1px solid rgba(255,255,255,.12); transition:transform .2s ease, box-shadow .2s ease}
.uefn-card:hover{transform:translateY(-2px); box-shadows:0 18px 40px rgba(0,0,0,.35)}
.uefn-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
.uefn-ico i{font-size:1.1rem}
[data-bs-theme="light"] .uefn-ico{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
.container-xxl {
max-width: 1350px;
}
.btn-lg {
font-size: 1rem;
}
.input-group-text,
.form-control {

border: none;
background-color: var(--bs-body-bg);

}
.nav-link {
font-size: 14px !important;
letter-spacing: 1px;

}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 16px;
padding-left:  16px;
}
}
.lead {
font-size: 1.05rem;
font-weight: 300;
}
.img, .card img {
border-radius: var(--radius-xxl);
}
.footer-col li a{
color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}
p {
font-size: 0.9rem;
}
.btn i {
position: relative;
margin-left: 0px;
}
.navbar .navbar-nav .nav-link {
color: inherit !important;
}

/* === Success Stories band (parallax) === */
.success-stories{position:relative;isolation:isolate;padding:clamp(3.5rem,6vw,6rem) 0;overflow:hidden}
.success-stories::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 45%, rgba(0,0,0,.7));z-index:1}
.success-stories::after{content:"";position:absolute;inset:-12% -6%;background:radial-gradient(50% 50% at 20% 5%, rgba(92,173,255,.22), transparent 42%),radial-gradient(50% 50% at 80% -5%, rgba(185,136,255,.18), transparent 45%);filter:saturate(110%);z-index:1}
.success-stories>.container-xxl{position:relative;z-index:2;}
/* parallax layers */
.parallax-wrap{position:relative}
.parallax-bg{position:absolute;left:0;right:0;top:-15%;bottom:-15%;background-size:cover;background-position:center;transform:translateY(var(--parallax,0px));will-change:transform;z-index:0}
/* cards */
.story-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);border-radius:20px;overflow:hidden;transition:transform .2s ease, box-shadow .2s ease}
.story-card:hover{transform:translateY(-2px);box-shadows:0 16px 40px rgba(0,0,0,.35)}
.story-thumb{aspect-ratio:16/9;width:100%;height:auto;object-fit:cover}
.story-meta{color:#9aa4b2}
/* Light theme tweaks */
[data-bs-theme="light"] .success-stories::before{background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.55) 45%, rgba(255,255,255,.75))}
[data-bs-theme="light"] .parallax-bg{filter:saturate(105%)}
[data-bs-theme="light"] .story-card{background:rgba(255,255,255,.78);border-color:rgba(0,0,0,.08);box-shadows:0 12px 30px rgba(0,0,0,.08)}
/* Reduce motion / mobile */
@media (max-width: 991.98px){ .parallax-bg{transform:none !important} }


/* Headings like Crafto */
.display-hero{font-family: "Space Grotesk", Inter, sans-serif; letter-spacing:-.02em;}



/* Step cards */
.step{counter-increment: step}
.step .num::before{content: counter(step);}
.num{width:38px; height:38px; border-radius:10px; display:grid; place-content:center; font-weight:700; background:linear-gradient(135deg, rgba(92,173,255,.18), rgba(185,136,255,.18)); border:1px solid rgba(255,255,255,.12)}
.link-fade{color:#cfe9ff; text-decoration:none}
.link-fade:hover{color:white}
/* Pricing / licensing */
.price-card{border:1px solid rgba(255,255,255,.12); border-radius: var(--radius-xl);}
/* Footer */
footer{border-top:1px solid rgba(255,255,255,.08)}
/* Header refinements */
.hero-wrap{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.10);border-radius:32px;padding:clamp(1.25rem,2vw,2rem);box-shadows:0 20px 60px rgba(0,0,0,.35);overflow:visible}
.hero-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem .7rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.hero-badge i{font-size:1.1rem}
.hero-title{font-weight:800;letter-spacing:-.02em}
.media-card{position:relative;border-radius:26px;overflow:hidden;box-shadows:0 18px 40px rgba(0,0,0,.45)}
.media-card img{display:block;width:100%;height:auto}
.media-card .shade{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%)}
.media-overlap{z-index:2}
@media (min-width:1200px){.media-overlap{transform:translate(32px,-24px)}}
.media-card img{display:block;width:100%;height:auto}
.media-card .shade{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.0) 55%)}
.caption-bar{position:absolute;left:16px;bottom:18px;padding:.65rem .9rem;border-radius:12px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.15);font-weight:800;letter-spacing:.01em}
.caption-sub{position:absolute;left:18px;bottom:8px;transform:translateY(100%);font-size:.8rem;color:#c5c5c5}
/* Footer (mega) */
.footer-hr{border-top:1px solid rgba(255,255,255,.08)}
.footer-col h6{font-weight:700}
.footer-col ul{margin:0;padding:0;list-style:none}
.footer-col li{margin:.5rem 0}
.social-row a{opacity:.85}
.social-row a:hover{opacity:1}
/* Theme toggle button */
.btn-theme{width:36px;height:36px;border-radius:999px;display:inline-grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}
.btn-theme:hover{background:rgba(255,255,255,.12)}



/* Extra compatibility: paint blur on a layer */
.mega-menu::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.04)); pointer-events:none
}
/* GLASS MEGA MENU — wins on specificity and order */
.dropdown-menu, .mega-menu {

backdrop-filter: blur(18px) saturate(120%);
-webkit-backdrop-filter: blur(18px) saturate(120%);
}
.navbar .navbar-nav .dropdown .dropdown-menu.mega-menu {

backdrop-filter: blur(18px) saturate(120%);
-webkit-backdrop-filter: blur(18px) saturate(120%);


background-clip: padding-box;                            /* avoid edge halo */
/* borders / radius / shadow */
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 22px;
box-shadows: 0 30px 70px rgba(0,0,0,.5);
/* layout */
--bs-dropdown-padding-y: 0;
--bs-dropdown-min-width: auto;
--bs-dropdown-border-color: rgba(255, 255, 255, .14);
min-width: min(100%, 980px);
overflow: hidden;
padding: 0;
}


/* Image sizing & fill (consistent across sections) */
/* Hero media keeps 16:9 and always covers */
.media-card{aspect-ratio:16/9}
.media-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}


/* Glow install cards */
.step-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .65rem;border-radius:999px;background:rgba(13,202,240,.18);border:1px solid rgba(13,202,240,.35);font-weight:700;font-size:.85rem}
.step-2{background:rgba(185,136,255,.18);border-color:rgba(185,136,255,.35)}
.step-3{background:rgba(255,193,7,.18);border-color:rgba(255,193,7,.35)}
/* Light theme variant */
[data-bs-theme="light"] .glow-card{background:rgba(255,255,255,.75);border-color:rgba(0,0,0,.08);box-shadows:inset 0 1px 0 rgba(255,255,255,.6), 0 20px 50px rgba(0,0,0,.08)}
[data-bs-theme="light"] .glow-card::before{background:radial-gradient(600px 300px at 20% 80%, rgba(13,202,240,.25), transparent 60%),radial-gradient(600px 300px at 80% 20%, rgba(111,66,193,.22), transparent 60%)}
/* Learning chips + muted buttons + docs links */
.chip{padding:.5rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font-weight:600}
.chip:hover{background:rgba(255,255,255,.10)}
.chip.active{background:#fff;color:#111;border-color:#fff}
.btn-muted{--bs-btn-bg:rgba(255,255,255,.10);--bs-btn-color:#e9ecef;--bs-btn-border-color:rgba(255,255,255,.15);--bs-btn-hover-bg:rgba(255,255,255,.18);--bs-btn-hover-border-color:rgba(255,255,255,.25)}
.doc-link{color:#8cdcff;text-decoration:none}
.doc-link:hover{color:#b3e7ff}
[data-bs-theme="light"] .chip{background:#fff;color:#111;border-color:#ddd}
[data-bs-theme="light"] .chip.active{background:#111;color:#fff;border-color:#111}
[data-bs-theme="light"] .btn-muted{--bs-btn-bg:#e9ecef;--bs-btn-color:#111;--bs-btn-border-color:#e9ecef;--bs-btn-hover-bg:#dee2e6}
[data-bs-theme="light"] .doc-link{color:#0d6efd}
[data-bs-theme="light"] .doc-link:hover{color:#0a58ca}



/* Feature glass panels + chips (Battle-tested / Make the jump) */
.glass-panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:.5rem}
.glass-panel .ratio>img{object-fit:cover}
.mini-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .7rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#eaeff5;text-decoration:none}
.mini-chip:hover{background:rgba(255,255,255,.12)}
[data-bs-theme="light"] .glass-panel{background:rgba(255,255,255,.75);border-color:rgba(0,0,0,.08)}
[data-bs-theme="light"] .mini-chip{background:#f1f3f5;border-color:#e2e6ea;color:#212529}
[data-bs-theme="light"] .mini-chip:hover{background:#e9ecef}
/* ==============================
INSTALL / GLOW CARDS / CHIPS / DOCS
============================== */
.glow-card{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);box-shadows:inset 0 1px 0 rgba(255,255,255,.04), 0 24px 60px rgba(0,0,0,.35)}

.glow-card::before{content:"";
position:absolute;
inset:-20%;
border-radius:300%;
filter: blur(60px);
background:radial-gradient(300px 600px at 20% 10%,
rgba(92,173,255,.18), transparent 60%),
radial-gradient(1500px 300px at 80% 20%,
rgba(185,136,255,.18), transparent 60%);
z-index:-1;
}

:root{
--gm-bg: rgba(16,18,24,.32);
--gm-border: rgba(255,255,255,.14);
--gm-text: #e8eef7;
--gm-muted: #a9b2bf;
--gm-radius: 22px;
--gm-shadow: 0 30px 70px rgba(0,0,0,.5);
--gm-sheen1: rgba(255,255,255,.05);
--gm-sheen2: rgba(255,255,255,.03);
--gm-maxw: 100px;
--gm-gap: 22px;
}
/* Trigger in navbar looks like a nav-link button */
.gm-trigger-in-nav{
background: transparent;
border: 0;
color: inherit;
display: inline-flex;
align-items: center;
padding: .5rem .75rem;
text-transform: capitalize;
cursor: pointer;
}
/* Panel is fixed, outside layout; hidden by default (JS toggles [hidden]) */
.glassmegamenu{
position: fixed;
inset: auto auto auto auto;               /* JS will set left/top/width */
z-index: 1055;
}
.glassmegamenu[hidden]{ display: none !important; }
/* Glass surface */
.glassmegamenu .gm-surface{
position: relative; overflow: hidden;
border-radius: var(--gm-radius);
border: 1px solid var(--gm-border);
box-shadows: var(--gm-shadow);
background: var(--gm-bg);
backdrop-filter: blur(18px) saturate(120%);
-webkit-backdrop-filter: blur(18px) saturate(120%);
}
.glassmegamenu .gm-surface::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, var(--gm-sheen1), var(--gm-sheen2));
pointer-events:none;
}
/* Grid/content */
.gm-grid{ display:grid; gap: var(--gm-gap); grid-template-columns: repeat(4, minmax(0,1fr)); padding: 22px; }
.gm-heading{ margin:0 0 .5rem; font-size:.95rem; letter-spacing:.02em; text-transform:uppercase; color:var(--gm-muted); }
.gm-list{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.gm-list a{ display:block; text-decoration:none; color:var(--gm-text); padding:.45rem .5rem; border-radius:10px; }
.gm-list a:hover{ background: rgba(255,255,255,.06); transform: translateX(2px); }
.gm-feature{ grid-column: span 2; }
.gm-card{ display:grid; grid-template-columns: 1.2fr 1fr; gap:14px; align-items:stretch; }
.gm-card-media{ border-radius:16px; overflow:hidden; min-height:160px; background: linear-gradient(120deg, rgba(90,211,255,.15), rgba(185,136,255,.12)), var(--img) center/cover no-repeat; }
.gm-card-title{ margin:0; font-size:1.05rem; color:var(--gm-text); }
.gm-card-text{ margin:0; color: var(--gm-muted); line-height:1.35; }
.gm-card-cta{ margin-top:.35rem; display:inline-block; color:var(--gm-text); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.25); padding-bottom:1px; }
.gm-card-cta:hover{ border-color: rgba(255,255,255,.5); }
/* Responsive */
@media (max-width: 1024px){
.gm-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.gm-feature{ grid-column: span 2; }
}
@media (max-width: 640px){
.gm-grid{ grid-template-columns: 1fr; }
.gm-card{ grid-template-columns: 1fr; }
}
/* Fallback if backdrop-filter unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
.glassmegamenu .gm-surface{ background: rgba(16,18,24,.88); }
}
/* Mobile collapse background matches theme */
@media (max-width: 991.98px){
.navbar .navbar-collapse{
background: rgba(8,11,16,.96);           /* dark glassy panel */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid rgba(255,255,255,.08);
}
[data-bs-theme="light"] .navbar .navbar-collapse{
background: rgba(255,255,255,.90);
border-top: 1px solid rgba(0,0,0,.08);
}
}
/* Ensure hamburger icon is visible in both themes even without .navbar-dark/.light */
.navbar-toggler{
border-color: rgba(255,255,255,.3);

}

/* Mega internals (already in your file; included here for clarity) */
.gm-surface{position:relative;overflow:hidden;background:transparent}
.gm-grid{display:grid;gap:22px;grid-template-columns:repeat(4,minmax(0,1fr));padding:22px}
.gm-heading{margin:0 0 .5rem;font-size:.95rem;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.gm-list{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.gm-list a{display:block;text-decoration:none;color:inherit;padding:.45rem .5rem;border-radius:10px}
.gm-list a:hover{background:rgba(255,255,255,.06);transform:translateX(2px)}
.gm-feature{grid-column:span 2}
.gm-card{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
.gm-card-media{border-radius:16px;min-height:160px;overflow:hidden;background:linear-gradient(120deg,rgba(90,211,255,.15),rgba(185,136,255,.12)),var(--img) center/cover no-repeat}
/* Mobile: stack */
@media (max-width:1024px){.gm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gm-feature{grid-column:span 2}}
@media (max-width:640px){.gm-grid{grid-template-columns:1fr}.gm-card{grid-template-columns:1fr}}
/* Offcanvas backdrop polish */
.offcanvas-backdrop {
background-color: rgba(0,0,0,.65);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
will-change: opacity;
transition: opacity .14s ease-out !important;
}
/* Start almost visible to avoid the first-frame pop, then animate to full */
.offcanvas-backdrop.fade { opacity: .01; }
.offcanvas-backdrop.show { opacity: .65; }
/* Panel animation trim so both feel consistent */
.offcanvas {
transition: transform .16s ease-out !important;
}
/* Persistent backdrop (no flash) */
#app-backdrop{
position: fixed;
inset: 0;
background: rgba(0,0,0,.65);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
z-index: 1040;            /* Bootstrap: backdrop 1040, offcanvas 1045 */
transition: opacity .18s ease-out, visibility 0s linear .18s;
}
/* When any offcanvas is open, show it */
.backdrop-show #app-backdrop{
opacity: .65;
visibility: visible;
transition: opacity .18s ease-out;
}
/* Optional: sync panel speed so both feel cohesive */
.offcanvas{ transition: transform .18s ease-out !important; }
/* BLOG SECTION */
/* Parallax banner behind toolbar */
.toolbar-wrap{position:relative;isolation:isolate}
.toolbar-parallax{position:absolute;inset:-8% 0 -25% 0;background:
linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.4) 60%, rgba(0,0,0,.65)),
url('https://images.unsplash.com/photo-1520975916090-3105956dac38?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat;
transform:translateY(var(--pY,0px));will-change:transform;z-index:0;filter:saturate(105%)}
.toolbar-inner{position:relative;z-index:1}
/* Feature (image left, text right) */
.feature-card{position:relative;border-radius:18px;overflow:hidden;background:#000}
.feature-card .thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-card .shade{position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.2) 100%)}
.feature-body{position:relative;z-index:2}
/* Grid + hover */
.grid-sizer,.grid-item{width:100%}
@media(min-width:768px){.grid-sizer,.grid-item{width:50%}}
@media(min-width:992px){.grid-sizer,.grid-item{width:33.333%}}



/* PROJECTS SECTION */

/* Parallax hero */
.hero{position:relative; isolation:isolate; overflow:hidden}
.hero::before{
content:""; position:absolute; inset:-10% -5% -30% -5%;
background-image:
radial-gradient(1000px 400px at 20% 0%, rgba(92,173,255,.25), transparent 60%),
radial-gradient(900px 360px at 80% -10%, rgba(185,136,255,.18), transparent 60%),
var(--hero-image);
background-size:cover; background-position:center;
transform:translateY(var(--parallax,0px));
will-change:transform; z-index:-2; filter:saturate(108%);
}
.hero::after{
content:""; position:absolute; inset:0;
/*background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.65) 40%, rgba(0,0,0,.85));*/
z-index:-1;
}
/* Feature cards */
.feature-card{border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:.65rem}
.feature-card .icon{
width:44px;height:44px;border-radius:12px; display:grid; place-items:center;
border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06)
}
.feature-card p{color:var(--muted); margin-bottom:0}
.feature-card .btn{align-self:flex-start}

/* Light theme (keeps your existing behavior) */
[data-bs-theme="light"]{
--bg-0:#f7f8fb; --bg-1:#fff; --acc-1:#0dcaf0; --acc-2:#6f42c1; --muted:#5c6773;
--glass:rgba(255,255,255,.75); --glass-border:rgba(0,0,0,.06);
}
[data-bs-theme="light"] .hero::after{background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.75))}
[data-bs-theme="light"] .feature-card .icon{background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08)}

/* Headline row: icon + title */
.feature-card .feature-head{
display:flex;
align-items:center;         /* keeps baselines feeling right */
gap:.75rem;
margin-bottom:.35rem;
}
/* Rounded glass icon badge */
.feature-card .feature-ico{
flex:0 0 auto;
width:44px; height:44px;
border-radius:12px;
display:grid; place-items:center;
border:1px solid var(--glass-border);
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
box-shadows: inset 0 1px 0 rgba(255,255,255,.08);
}
/* Icon glyph size */
.feature-card .feature-ico i{ font-size:1.1rem; opacity:.95 }
/* Title tweaks so it aligns nicely with the badge */
.feature-card .feature-title{
margin:0;                   /* kill default h5 margin */
line-height:1.1;
font-weight:700;
letter-spacing:.01em;
}
/* Light theme polish */
[data-bs-theme="light"] .feature-card .feature-ico{
background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
border-color:rgba(0,0,0,.08);
box-shadows: inset 0 1px 0 rgba(255,255,255,.65);
}

/* put glow *behind* the image/card content */
.media-card,
.feature-card{
position: relative;
isolation: isolate;             /* keep pseudo behind content only */
overflow: visible;              /* allow halo to bleed out */
}
.media-card {
aspect-ratio: 16 / 9;
}


/* subtle lift on hover (if the element is hoverable) */
.media-card:hover::before,
.feature-card:hover::before{
filter: blur(calc(var(--glow-blur) + 6px)) saturate(125%);
opacity: 1;
}
/* Light theme trims the glow a bit so it doesn’t wash out */
[data-bs-theme="light"] .media-card::before,
[data-bs-theme="light"] .feature-card::before{
opacity: .65;
filter: blur(calc(var(--glow-blur) - 6px)) saturate(105%);
}
/* INSTALL section — vignette + card tints */
.install-wrap{position:relative;isolation:isolate}
.install-wrap::before,
.install-wrap::after{
content:""; position:absolute; inset:auto auto 0 0; width:min(900px,48vw); height:70%;
background:radial-gradient(600px 400px at 25% 70%, rgba(90,211,255,.18), transparent 60%);
filter:saturate(110%); z-index:0; pointer-events:none;
}
.install-wrap::after{
left:auto; right:0;
background:radial-gradient(700px 420px at 75% 35%, rgba(185,136,255,.20), transparent 65%);
}
/* tighten header row like UE */
.install-head h2{letter-spacing:-.02em}
.install-head .btn{border-radius:14px; padding:.55rem .9rem}
/* step cards — keep glow-card base, add tint + softer edges */
.install-card{border-radius:26px; backdrop-filter:blur(14px)}
.install-c1::before{background:
radial-gradient(500px 280px at -10% 120%, rgba(76,209,255,.22), transparent 60%),
radial-gradient(900px 300px at 120% -10%, rgba(255,255,255,.05), transparent 60%) !important}
.install-c2::before{background:
radial-gradient(520px 300px at 110% 120%, rgba(185,136,255,.22), transparent 60%),
radial-gradient(900px 300px at -20% -10%, rgba(255,255,255,.05), transparent 60%) !important}
.install-c3::before{background:
radial-gradient(540px 340px at 110% 110%, rgba(255,140,230,.20), transparent 60%),
radial-gradient(900px 300px at -20% -10%, rgba(255,255,255,.05), transparent 60%) !important}
/* step pills */
.step-pill{border-radius:999px; font-weight:800; letter-spacing:.02em}
.step-2{background:rgba(185,136,255,.2); border-color:rgba(185,136,255,.35)}
.step-3{background:rgba(255,140,230,.20); border-color:rgba(255,140,230,.35)}

/* UEFN banner */
.install-uefn{
border-radius:26px; overflow:hidden;
background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.12);
box-shadows:inset 0 1px 0 rgba(255,255,255,.04), 0 24px 60px rgba(0,0,0,.35);
position:relative;
}
.install-uefn::before{
content:""; position:absolute; inset:-25%;
background:
radial-gradient(900px 360px at 15% 85%, rgba(90,211,255,.18), transparent 65%),
radial-gradient(1000px 420px at 85% 20%, rgba(185,136,255,.20), transparent 65%);
filter:saturate(110%); z-index:0;
}

/* PROJECT SECTION */
:root{
--bg-0:#0c0f14; --bg-1:#11161d;
--acc-1:#5ad3ff; --acc-2:#b988ff;
--muted:#9aa4b2;
--glass:rgba(255,255,255,.06);
--glass-border:rgba(255,255,255,.14);
}
html,body{
background:
radial-gradient(1200px 600px at 10% -10%, rgba(90,211,255,.08), transparent 60%),
radial-gradient(1200px 600px at 90% -20%, rgba(185,136,255,.09), transparent 60%),
var(--bg-0);
color:#e9eef5; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}


/* Feature cards */
.feature-card-2{border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:.65rem}
.feature-card-2 .icon{
width:44px;height:44px;border-radius:12px; display:grid; place-items:center;
border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06)
}
.feature-card-2 p{color:var(--muted); margin-bottom:0}
.feature-card-2 .btn{align-self:flex-start}
/* Page utilities */
.container-xxl{max-width:1350px}
.link-fade{color:#cfe9ff; text-decoration:none}
.link-fade:hover{color:#fff}

[data-bs-theme="light"] .hero::after{background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.75))}
[data-bs-theme="light"] .feature-card-2 .icon{background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08)}
@media (max-width: 991.98px){ .hero::before{transform:none !important} }
/* Headline row: icon + title */
.feature-card-2 .feature-head{
display:flex;
align-items:center;         /* keeps baselines feeling right */
gap:.75rem;
margin-bottom:.35rem;
}
/* Rounded glass icon badge */
.feature-card-2 .feature-ico{
flex:0 0 auto;
width:44px; height:44px;
border-radius:12px;
display:grid; place-items:center;
border:1px solid var(--glass-border);
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
box-shadows: inset 0 1px 0 rgba(255,255,255,.08);
}
/* Icon glyph size */
.feature-card-2 .feature-ico i{ font-size:1.1rem; opacity:.95 }
/* Title tweaks so it aligns nicely with the badge */
.feature-card-2 .feature-title{
margin:0;                   /* kill default h5 margin */
line-height:1.1;
font-weight:700;
letter-spacing:.01em;
}
/* Light theme polish */
[data-bs-theme="light"] .feature-card-2 .feature-ico{
background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
border-color:rgba(0,0,0,.08);
box-shadows: inset 0 1px 0 rgba(255,255,255,.65);
}
/* ===== Tabbed hero ===== */
.tabbed-hero{
position: relative;
min-height: 78vh;            /* big header */
display: grid;
align-items: center;         /* vertical centering */
overflow: hidden;
isolation: isolate;
--bg-image: none;
}
/* Background image + soft tints (reuses your gradient style) */
.tabbed-hero::before{
content:"";
position:absolute; inset:-10% -5% -25% -5%;
background-image:
radial-gradient(1000px 420px at 18% 0%, rgba(92,173,255,.22), transparent 60%),
radial-gradient(900px 360px at 82% -8%, rgba(185,136,255,.18), transparent 60%),
var(--bg-image);
background-size: cover; background-position: center;
filter: saturate(108%);
z-index: -2;
transition: opacity .4s ease, transform .6s ease;
opacity: 1;
}
/* Black -> transparent overlay for legibility */
.tabbed-hero__backdrop{
position:absolute; inset:0;
background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72) 45%, rgba(0,0,0,.88) 90%);
z-index: -1;
}
/* Centered copy block */
.tabbed-hero__content{
max-width: 860px;
margin-top: 6vh;
}
/* Pills row style */
.tabbed-hero__tabs .nav-link{
border-radius: 999px;
padding: .5rem .9rem;
line-height: 1;
border: 1px solid var(--glass-border, rgba(255,255,255,.14));
background: rgba(255,255,255,.06);
color: #e9eef5;
}
.tabbed-hero__tabs .nav-link.active{
background: var(--glass, rgba(255,255,255,.12));
color: #fff;
border-color: var(--glass-border, rgba(255,255,255,.18));
}
/* Small polish on light theme */
[data-bs-theme="light"] .tabbed-hero__tabs .nav-link{
background: rgba(0,0,0,.05);
color: #2a2f36;
border-color: rgba(0,0,0,.08);
}
[data-bs-theme="light"] .tabbed-hero__backdrop{
background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.78) 40%, rgba(255,255,255,.9));
}
/* Subtle parallax feel on scroll */
@media (min-width: 992px){
.tabbed-hero{ --parallax: 0px; }
.tabbed-hero::before{ transform: translateY(var(--parallax)); }
}
.tabbed-hero{ --min-h: 78vh; min-height: var(--min-h); }
@media (max-width: 991.98px){ .tabbed-hero{ --min-h: 58vh; } }
@media (max-width: 575.98px){ .tabbed-hero{ --min-h: 52vh; } }
/* ===== Mobile height tweaks for the tabbed hero ===== */
/* Tablet and down */
@media (max-width: 991.98px){
.tabbed-hero{
min-height: 58vh;                 /* was ~78vh */
}
.tabbed-hero__content{
max-width: 640px;
margin-top: 2vh;                  /* less top air */
}
.tabbed-hero__content .lead{
width: 100% !important;           /* no extra wrap on small screens */
font-size: 1rem;                  /* slightly smaller body */
}
}
/* Phones */
@media (max-width: 575.98px){
.tabbed-hero{
min-height: 52vh;                 /* shorter on phones */
}
.tabbed-hero__content h1{
font-size: clamp(1.65rem, 6vw, 2rem);  /* scale heading */
margin-bottom: .6rem;
}
.tabbed-hero__content .lead{
font-size: .95rem;
margin-bottom: 1rem;
}
.tabbed-hero__tabs{
margin-top: 1rem !important;
gap: .5rem !important;
}
.tabbed-hero__tabs .nav-link{
padding: .4rem .7rem;
font-size: .9rem;
}
/* keep buttons from wrapping awkwardly */
.tabbed-hero__content .btn{
padding: .5rem .85rem;
}
}
/* Optional: ultra-small devices */
@media (max-width: 380px){
.tabbed-hero{ min-height: 48vh; }
}
/* Parallax target (the image/video wrapper inside the hero) */
.tabbed-hero__bg {
will-change: transform;                /* GPU hint */
backface-visibility: hidden;
transform: translate3d(0, var(--pY, 0px), 0);
transition: transform 80ms linear;     /* fast micro-smoothing (no sluggish ease) */
contain: paint;                        /* isolates repaints to this element */
}
/* If you previously had a long transition like .3s ease, remove/override it */
/* Tabbed hero background (keep the rest of your styles) */
.tabbed-hero::before{
content:"";
position:absolute; inset:-10% -5% -25% -5%;
background-image:
radial-gradient(1000px 420px at 18% 0%, rgba(92,173,255,.22), transparent 60%),
radial-gradient(900px 360px at 82% -8%, rgba(185,136,255,.18), transparent 60%),
var(--bg-image);
background-size: cover; background-position: center;
filter: saturate(108%);
z-index: -2;
/* important for smoothness */
transform: translate3d(0, var(--pY, 0px), 0);
will-change: transform;
transition: opacity .35s ease;   /* keep fade, but not transform */
}
/* disable parallax motion on mobile to avoid jank */
@media (max-width: 991.98px){
.tabbed-hero::before{ transform: none !important; }
}
/* Generic parallax layer that sits behind your content */
.parallax-layer {
position: absolute; inset: 0;
z-index: -2;                     /* behind content but above page bg */
background-size: cover;
background-position: center;
will-change: transform, background-position;
}
/* If you use it as a bg image helper (instead of ::before) */
.tabbed-hero { position: relative; overflow: hidden; }
.tabbed-hero .parallax-layer::after{
/* optional glow/grade to match your theme */
content:""; position:absolute; inset:-12%;
background:
radial-gradient(1000px 420px at 18% 0%, rgba(92,173,255,.20), transparent 60%),
radial-gradient(900px 360px at 80% -8%, rgba(185,136,255,.16), transparent 60%);
pointer-events:none; filter:saturate(108%) blur(0);
z-index:-1;
}
/* Don’t animate on small screens if you prefer */
@media (max-width: 991.98px){
.parallax-layer { transform: none !important; }
}
/* NEWS/RESOURCES SECTION*/
.category-tile {
position: relative;
height: 210px;
border-radius: 16px;
overflow: hidden;
}
/* Page-local trims to get the Epic-style layout */
.news-wrap .container-xxl{max-width:1350px}
.news-hero{
position:relative; border-radius:26px; overflow:hidden; isolation:isolate;
background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.10);
box-shadows:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px rgba(0,0,0,.35);
}
.news-hero .hero-img{
position:relative; aspect-ratio:16/9; border-radius:22px; overflow:hidden;
}
.news-hero .hero-img img{width:100%; height:100%; object-fit:cover}
.news-hero .hero-img::before{
content:""; position:absolute; inset:-25%;
background:
radial-gradient(900px 420px at 80% 30%, rgba(90,211,255,.18), transparent 60%),
radial-gradient(1000px 420px at 40% 90%, rgba(185,136,255,.18), transparent 65%);
filter:saturate(110%);
z-index:0; pointer-events:none;
}
.news-hero .pill{border-radius:999px; padding:.35rem .7rem; font-weight:700; letter-spacing:.02em}
.news-hero .pill + .pill{margin-left:.35rem}
.news-hero .search-pill{
border:1px solid var(--glass-border); border-radius:999px; overflow:hidden;
background:rgba(255,255,255,.04)
}
.news-hero .search-pill .form-control{background:transparent; border:0; color:inherit}
.news-hero .search-pill .input-group-text{background:transparent; border:0}
/* Feature rows + cards */
.media-card{position:relative; border-radius:22px; overflow:hidden; isolation:isolate}
.media-card img{width:100%; height:100%; object-fit:cover}
.media-card::before{
content:""; position:absolute; inset:-22%;
background:radial-gradient(900px 420px at 20% 85%, rgba(108,198,255,.28), transparent 60%);
filter:blur(36px) saturate(115%); z-index:-1; pointer-events:none;
}
.story-card{border-radius:20px}
.story-thumb{aspect-ratio:16/9; width:100%; object-fit:cover; border-radius:16px}
.story-badges .badge{font-weight:600}
/* Scope everything to .post-card so we don't clash with your other promos */
.post-card{
--pc-radius: 26px;
--pc-pad: clamp(18px, 2vw, 24px);
--pc-border: rgba(255,255,255,.10);
--pc-shadow: 0 24px 60px rgba(0,0,0,.35);
position: relative;
border-radius: var(--pc-radius);
background: rgba(255,255,255,.04);
border: 1px solid var(--pc-border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
overflow: hidden;
box-shadows: var(--pc-shadow);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.post-card:hover{ transform: translateY(-2px); box-shadows: 0 30px 70px rgba(0,0,0,.45) }
.post-card:focus-within{ border-color: rgba(255,255,255,.2) }
/* Media */
.post-card .pc-media{
aspect-ratio: 16/9;
position: relative;
overflow: hidden;
}
.post-card .pc-media img{
position:absolute; inset:0; width:100%; height:100%;
object-fit: cover; object-position:center;
filter: saturate(104%);
}
.post-card .pc-media,
.post-card .pc-media img{
border-top-left-radius: var(--pc-radius);
border-top-right-radius: var(--pc-radius);
}
/* Body */
.post-card .pc-body{ padding: var(--pc-pad) }
.post-card .pc-meta{
display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
color: rgba(255,255,255,.85);
margin-bottom: .75rem;
}
.post-card .pc-badge{
display:inline-flex; align-items:center; gap:.5rem;
padding:.45rem .85rem; border-radius:999px;
background:#ffcc44; color:#111; font-weight:700; font-size:.9rem;
}
[data-bs-theme="light"] .post-card .pc-badge{ color:#111 }
.post-card time{ opacity:.85; font-size:.95rem }
/* Title & excerpt */
.post-card h3{
margin: .25rem 0 .25rem;
font-weight: 800;
letter-spacing: .01em;
line-height: 1.1;
font-size: clamp(1.45rem, 1.2rem + 1.6vw, 2.25rem); /* big, like screenshot */
}
.post-card .pc-excerpt{
color: var(--muted, #9aa4b2);
margin: .6rem 0 1.1rem;
font-size: 1.02rem;
}
/* Author & footer actions */
.post-card .pc-footer{
display:flex; align-items:center; justify-content:space-between;
gap:1rem;
}
.post-card .pc-author{
display:flex; align-items:center; gap:.6rem; color:#e9eef5;
}
.post-card .pc-author img{
width:36px; height:36px; border-radius:999px;
border:1px solid rgba(255,255,255,.18);
}
.post-card .pc-actions{
display:flex; align-items:center; gap:1.1rem; color:#e9eef5;
}
.post-card .pc-actions .bi{ opacity:.9; }
.post-card .pc-actions span{ display:inline-flex; align-items:center; gap:.35rem; }
/* Light theme tweaks */
[data-bs-theme="light"] .post-card{
background: #fff; border-color: rgba(0,0,0,.08);
box-shadows: 0 20px 50px rgba(0,0,0,.08);
}
[data-bs-theme="light"] .post-card .pc-excerpt{ color:#5c6773 }
[data-bs-theme="light"] .post-card .pc-author{ color:#212529 }
[data-bs-theme="light"] .post-card .pc-actions{ color:#212529 }
/* CONTACT SECTION */
/* --- Hero band --- */
.hero-contact{position:relative; isolation:isolate; overflow:hidden; padding:clamp(3rem,5vw,5.5rem) 0;}
.hero-contact::before{
content:""; position:absolute; inset:-20% -10% -30%;
background:
radial-gradient(1200px 520px at 12% 10%, rgba(90,211,255,.18), transparent 60%),
radial-gradient(1000px 420px at 88% -8%, rgba(185,136,255,.16), transparent 60%);
z-index:-1;
}
.hero-wrap{border-radius:32px}
/* --- Cards / chips (reuses your “glass”, “chip” patterns) --- */
.contact-card{border-radius:22px; padding:1.25rem}
.contact-card .list-unstyled > li{margin:.55rem 0}
.chip{padding:.45rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);font-weight:600}
[data-bs-theme="light"] .chip{background:#fff;border-color:#ddd}
/* --- Form look --- */
.contact .form-control, .contact .form-select{border-radius:14px; padding:.65rem .9rem; border:1px solid var(--glass-border); background:rgba(255,255,255,.04)}
.form-floating>.form-control, .form-floating>.form-select{height:calc(3.2rem + 2px)}
.form-floating>label{color:#9aa4b2}
textarea.form-control{min-height:140px}
/* --- FAQ --- */
.accordion-button{border-radius:14px !important}
.accordion-item{border:1px solid rgba(255,255,255,.12); border-radius:16px; overflow:hidden; background:rgba(255,255,255,.04)}
[data-bs-theme="light"] .accordion-item{background:#fff; border-color:rgba(0,0,0,.08)}
/* Subtle glow utility if you want behind elements */
.glow::before{
content:""; position:absolute; inset:-80% -6% -40%; z-index:-1; pointer-events:none;
background: radial-gradient(920px 720px at 62% 45%, rgba(108,198,255,.35) 0, transparent 40%);
filter: blur(42px) saturate(115%); opacity:.95;
}
/* Small utilities */
.icon-avatar{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.btn-cyan{--bs-btn-color:#071019; --bs-btn-bg:#4CD1FF; --bs-btn-border-color:#4CD1FF; --bs-btn-hover-bg:#39c9fb; --bs-btn-hover-border-color:#39c9fb; --bs-btn-active-bg:#25bff6;}
.btn-muted{--bs-btn-bg:rgba(255,255,255,.10);--bs-btn-color:#e9ecef;--bs-btn-border-color:rgba(255,255,255,.15);--bs-btn-hover-bg:rgba(255,255,255,.18);--bs-btn-hover-border-color:rgba(255,255,255,.25)}
/* Keep placeholders invisible in Bootstrap floating fields */
.form-floating > .form-control::placeholder { color: transparent; }
/* (Optional) show a faint hint only while focused */
.form-floating > .form-control:focus::placeholder { color: rgba(255,255,255,.35); }
/* PROMOS SECTION */
:root{--bg-0:#0c0f14;--glass:rgba(255,255,255,.06);--glass-b:rgba(255,255,255,.14);--muted:#9aa4b2;--cyan:#4CD1FF;--radius:18px}
html,body{background:radial-gradient(1200px 600px at 10% -10%, rgba(90,211,255,.08), transparent 60%),radial-gradient(1200px 600px at 90% -20%, rgba(185,136,255,.09), transparent 60%),var(--bg-0)}
.glass{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-b);border-radius:var(--radius)}
.navbar{background:rgba(8,11,16,.55);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.btn-cyan{--bs-btn-color:#071019;--bs-btn-bg:#4CD1FF;--bs-btn-border-color:#4CD1FF;--bs-btn-hover-bg:#39c9fb;--bs-btn-hover-border-color:#39c9fb;--bs-btn-active-bg:#25bff6}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .65rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.sidebar{position:sticky;top:82px}
.card-asset{overflow:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);transition:transform .18s ease, box-shadow .18s ease}
.card-asset:hover{transform:translateY(-2px);box-shadows:0 16px 40px rgba(0,0,0,.35)}
.thumb{aspect-ratio:16/9;width:100%;object-fit:cover;border-bottom:1px solid rgba(255,255,255,.08)}
.badge-deal{background:linear-gradient(90deg,#4CD1FF,#b988ff);border:0}
.hero-market{position:relative;isolation:isolate;border-radius:28px;overflow:hidden}
.hero-market img.hero{width:100%;height:320px;object-fit:cover;filter:saturate(105%)}
.hero-market .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.7));}
.hero-market .caption{position:absolute;inset:auto 0 0 0;padding:1rem 1.25rem}
/* Light theme */
[data-bs-theme="light"] html,[data-bs-theme="light"] body{background:#f7f8fb}
[data-bs-theme="light"] .navbar{background:rgba(255,255,255,.7);border-bottom:1px solid rgba(0,0,0,.08)}
[data-bs-theme="light"] .glass,.card-asset{background:rgba(255,255,255,.78);border-color:rgba(0,0,0,.08)}
[data-bs-theme="light"] .thumb{border-bottom-color:rgba(0,0,0,.06)}
/* --- Glassy mega menu (upgraded) --- */
.mega-menu{--bs-dropdown-bg:transparent; --bs-dropdown-border-color:rgba(255,255,255,.14); --bs-dropdown-padding-y:0; --bs-dropdown-min-width:auto; min-width:min(100%,980px); position:relative; border-radius:22px; padding:0; border:1px solid rgba(255,255,255,.14); background:rgba(16,18,24,.28); backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%); box-shadows:0 30px 70px rgba(0,0,0,.5); z-index:1051; overflow:hidden}
/* Extra compatibility: paint blur on a layer */
.mega-menu::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.04)); pointer-events:none}
.mega-body{display:grid; grid-template-columns:1fr 1fr; gap:0}
.mega-col{padding:1.25rem}
.mega-col+.mega-col{border-left:1px solid rgba(255,255,255,.08)}
.mega-head{font-weight:800; letter-spacing:.02em}
.mega-link{display:flex; align-items:center; gap:.65rem; padding:.6rem .65rem; border-radius:12px; text-decoration:none; color:inherit}
.mega-link:hover{background:rgba(255,255,255,.08)}
.mega-cta{padding:1rem; border-top:1px solid rgba(255,255,255,.08); display:flex; gap:.75rem}
.navbar-search{max-width:580px}
.search-pill .input-group-text{background:transparent; border-right:0}
.search-pill .form-control{background:transparent; border-left:0}
.search-pill .form-control, .search-pill .input-group-text{border-color:rgba(255,255,255,.25)}
.navbar .dropdown-toggle::after{display:none}
.navbar .dropdown-menu{margin-top:.5rem}
@media (max-width:991.98px){.mega-menu{min-width:100%}.mega-body{grid-template-columns:1fr}}
/* Light theme */
[data-bs-theme="light"] .mega-menu{border-color:rgba(0,0,0,.08); background:rgba(255,255,255,.88); box-shadows:0 30px 60px rgba(0,0,0,.2)}
[data-bs-theme="light"] .mega-link:hover{background:rgba(0,0,0,.06)}
/* ===== Promo band (2 left tiles stacked, 1 tall tile on right) ===== */
.promo-grid{
--gap: 18px;                    /* gutter */
--radius: 22px;
--cols-left: 1fr;               /* tweak these to fine-tune widths */
--cols-right: 1.05fr;
display: grid;
grid-template-columns: var(--cols-left) var(--cols-right);
grid-template-rows: 1fr 1fr;    /* two equal rows on the left */
gap: var(--gap);
}
.promo{
position: relative;
border-radius: var(--radius);
overflow: hidden;
isolation: isolate;             /* keeps the glow/overlay inside */
min-height: 260px;              /* safety for small screens */
}
.promo--tall{ grid-row: 1 / span 2; grid-column: 2; } /* span two rows on right */
.promo img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
filter: saturate(105%);
}
/* soft “studio glow” behind each tile */
.promo::before{
content:""; position:absolute; inset:-15%;
background:
radial-gradient(40% 50% at 25% 15%, rgba(92,173,255,.25), transparent 60%),
radial-gradient(50% 45% at 80% 85%, rgba(185,136,255,.22), transparent 65%);
filter: blur(28px);
z-index: 0;
}
/* dimmer overlay for text legibility */
.promo::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65) 90%);
z-index: 1;
}
/* caption block (reuses your button styles) */
.promo-caption{
position: absolute; left: 28px; bottom: 26px; right: 28px;
z-index: 2; color: #fff;
}
.promo h3{ font-weight: 800; letter-spacing: .01em; margin: 0 0 .25rem; }
.promo p{ margin: 0 0 .8rem; color: var(--muted, #9aa4b2); }
/* Responsive: stack tiles on ≤ lg and keep spacing consistent */
@media (max-width: 991.98px){
.promo-grid{ grid-template-columns: 1fr; grid-template-rows: unset; }
.promo--tall{ grid-row: auto; grid-column: auto; min-height: 320px; }
}

/* ===== Vehicle promo grid ===== */
.vehicle-grid{
--gap: 18px;
--radius: 22px;
--row: 220px;                   /* base row height; change to tune tall/short */
display: grid;
grid-template-columns: 1fr 1fr; /* two even columns */
grid-auto-rows: var(--row);
gap: var(--gap);
}
.vehicle{
position: relative;
border-radius: var(--radius);
overflow: hidden;
isolation: isolate;
}
.vehicle img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover; object-position:center;
filter:saturate(105%);
}
/* glow + legibility overlay */
.vehicle::before{
content:""; position:absolute; inset:-14%;
background:
radial-gradient(40% 45% at 15% 20%, rgba(92,173,255,.22), transparent 60%),
radial-gradient(55% 50% at 85% 90%, rgba(185,136,255,.18), transparent 65%);
filter:blur(26px);
z-index:0;
}
.vehicle::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.55) 90%);
z-index:1;
}
/* caption */
.vehicle-cap{
position:absolute; left:28px; top:24px; right:28px;
z-index:2; color:#fff;
}
.vehicle-cap h3{
margin:0 0 .25rem; font-weight:800; letter-spacing:.02em;
text-transform:uppercase;
}
.vehicle-cap p{ margin:0 0 1rem; color:rgba(255,255,255,.85) }
/* call-to-action bottom-right */
.vehicle-cta{
position:absolute; right:28px; bottom:26px; z-index:2;
}
/* tile spans: make “tall” ones fill two base rows */
.vehicle--tall{ grid-row: span 2; }
/* Responsive: stack cleanly */
@media (max-width: 991.98px){
.vehicle-grid{
grid-template-columns: 1fr;
grid-auto-rows: 240px;
}
.vehicle--tall{ grid-row: span 1; min-height: 340px; }
}
@media (min-width: 992px){
.vehicle-cta .btn { padding:.6rem 1.1rem; font-size:.95rem; }
}
.category-tile {
position: relative;
height: 210px;
border-radius: 16px;
overflow: hidden;
}
/* Page-local polish that rides on top of your existing tokens/classes */
.container-xxl{max-width:1350px}
.hero-about{position:relative; isolation:isolate; overflow:hidden}
.hero-about::before{
content:""; position:absolute; inset:-15% -10% -35%;
background:
radial-gradient(1000px 420px at 15% 0%, rgba(90,211,255,.18), transparent 60%),
radial-gradient(900px 360px at 85% -10%, rgba(185,136,255,.16), transparent 60%),
var(--hero-image);
background-size:cover; background-position:center;
filter:saturate(108%); z-index:-2;
}
.hero-about::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.85));
z-index:-1;
}
.hero-card{border-radius:26px}
/* Values grid cards */
.value-card{border-radius:20px; padding:22px}
.value-card .ico{
width:44px; height:44px; border-radius:12px;
display:grid; place-items:center;
border:1px solid var(--glass-border);
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
box-shadows: inset 0 1px 0 rgba(255,255,255,.08);
margin-bottom:.65rem;
}
.value-card h6{font-weight:800; letter-spacing:.01em}
/* Team */
.team-card{border-radius:22px; padding:18px}
.avatar{
width:72px; height:72px; border-radius:18px; overflow:hidden; flex:0 0 auto;
border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05)
}
.avatar img{width:100%; height:100%; object-fit:cover}
.social a{color:inherit; opacity:.8}
.social a:hover{opacity:1}
/* Logo cloud */
.logo-tile{
height:56px; border-radius:14px;
display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.10);
filter:grayscale(1) opacity(.9);
transition:transform .18s ease, filter .18s ease;
}
.logo-tile:hover{transform:translateY(-2px); filter:grayscale(.4) opacity(1)}
.logo-tile img{max-height:28px; max-width:120px}
/* News */
.news-card{border-radius:20px; transition:transform .2s ease, box-shadow .2s ease}
.news-card:hover{transform:translateY(-2px); box-shadows:0 16px 40px rgba(0,0,0,.35)}
.news-thumb{aspect-ratio:16/9; object-fit:cover; border-radius:18px}
/* Light theme trims (keeps your tokens working) */
[data-bs-theme="light"] .logo-tile{background:#fff; border-color:rgba(0,0,0,.08)}
/* sensible defaults; tweak per-instance via CSS variables */
:root{
--glow1: rgba(108,198,255,.35);  /* cyan */
--glow2: rgba(159,135,255,.30);  /* purple */
--glow-blur: 42px;               /* blur strength */
--glow-opacity: .95;             /* overall intensity */
}

.media-card img {
position: relative;
border-radius: 26px;


}
/* image/card glow */
.media-card::before,
.feature-card::before{
content: "";
position: absolute;
/* extend beyond edges so the blur has room */
inset: -122% -14%;
z-index: -1;
pointer-events: none;
/* two soft radial spots; colors are customizable via --glow1/--glow2 */
background:

radial-gradient(920px 820px at 62% 45%, var(--glow1) 0, transparent 40%);
filter: blur(var(--glow-blur)) saturate(115%);
opacity: var(--glow-opacity);
transition: filter .25s ease, opacity .25s ease;
}



.install-wrap::after{
left:auto; right:0;
background:radial-gradient(700px 420px at 75% 35%, rgba(185,136,255,.20), transparent 65%);
}


/* text tone & buttons like reference */
.install-card p{color:var(--muted)}
.install-cta .btn{border-radius:12px}


.install-uefn > *{position:relative; z-index:1}
.install-uefn .btn{border-radius:12px}
/* small polish */
.install-card .btn i{margin-left:0}
@media (max-width:991.98px){
.install-head{gap:1rem}
}
/* Grid: two tiles left (stacked), one tall on the right, then a small bottom-right */
.promo-2-grid{
--gap: 18px;                 /* gutter between tiles */
--radius: 22px;              /* rounded corners */
--cols-left: 2fr;            /* left column width */
--cols-right: 1.18fr;        /* slightly wider right column (matches ref image) */
--tile-h: clamp(280px, 30vw, 360px); /* height for each left tile */
display: grid;
grid-template-columns: var(--cols-left) var(--cols-right);
gap: var(--gap);
align-items: stretch;
}
/* Base tile */
.promo-2{
position: relative;
height: var(--tile-h);
border-radius: var(--radius);
overflow: hidden;
isolation: isolate; /* keep glow/overlays inside */
}
/* Tall tile on the right: EXACT height = 2 tiles + 1 gap */
.promo-2-tall{
grid-column: 2;
grid-row: 1 / span 2;
height: calc(var(--tile-h) * 2 + var(--gap));
}
/* Image fill */
.promo-2 > img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
filter: saturate(105%);
}
/* Soft glow behind artwork (subtle) */
.promo-2::before{
content:""; position:absolute; inset:-15%;
background:
radial-gradient(40% 50% at 25% 15%, rgba(92,173,255,.25), transparent 60%),
radial-gradient(50% 45% at 80% 85%, rgba(185,136,255,.22), transparent 65%);
filter: blur(28px);
z-index: 0;
}
/* Legibility veil */
.promo-2::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65) 90%);
z-index: 1;
}
/* Caption block (uses your existing buttons) */
.promo-2-caption{
position: absolute; left: 24px; right: 24px; bottom: 24px;
z-index: 2; color: #fff;
}
.promo-2-caption h3{ margin:0 0 .25rem; font-weight:800; letter-spacing:.01em; }
.promo-2-caption p{ margin:0 0 .8rem; color: var(--muted, #9aa4b2); }
/* Responsive: stack tiles on lg- and recalc heights */
@media (max-width: 991.98px){
.promo-2-grid{
grid-template-columns: 1fr;
--tile-h: clamp(260px, 48vw, 420px);
}
.promo-2-tall{
grid-column: auto; grid-row: auto;
height: var(--tile-h);
}
}
/* ===== PROMO-3 (Hero left, info + thumbs right) ===== */
.promo-3-grid{
--gap: 22px;
--radius: 22px;
display:grid;
grid-template-columns: 2fr 1.1fr; /* large hero left */
grid-template-rows: auto auto;    /* right column: card + thumbs */
gap:var(--gap);
}
/* Shared tile shell */
.promo-3-tile{
position:relative;
border-radius:var(--radius);
overflow:hidden;
isolation:isolate;
}
/* Media fill */
.promo-3-tile > img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover; object-position:center;
filter:saturate(105%);
}
/* Soft glow + legibility layer (works with your theme) */
.promo-3-tile::before{
content:""; position:absolute; inset:-18%;
background:
radial-gradient(40% 45% at 20% 10%, rgba(92,173,255,.20), transparent 60%),
radial-gradient(55% 55% at 80% 90%, rgba(185,136,255,.18), transparent 65%);
filter:blur(28px);
z-index:0;
}
.promo-3-tile::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55) 90%);
z-index:1;
}
/* HERO (left) */
.promo-3-hero{
grid-column:1; grid-row:1 / span 2; /* spans both right rows */
min-height: 520px;
}
.promo-3-hero .hero-inner{
position:absolute; inset:0; z-index:2; color:#fff;
display:flex; flex-direction:column; justify-content:space-between;
padding:22px;
}
.promo-3-tags{
display:flex; gap:10px; flex-wrap:wrap;
}
.promo-3-tag{
display:inline-flex; align-items:center; gap:.4rem;
padding:.45rem .9rem; border-radius:999px;
background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(6px);
color:#fff; font-weight:600;
}
.promo-3-title{
font-weight:800; letter-spacing:.01em; margin:0;
font-size: clamp(2rem, 3.6vw, 3.2rem);
}
.promo-3-friends{
display:flex; align-items:center; gap:10px; margin-top:10px;
}
.promo-3-avatars{display:flex;}
.promo-3-avatars img{
width:32px; height:32px; border-radius:50%; border:2px solid rgba(255,255,255,.65);
margin-right:-10px;
}
/* RIGHT COLUMN – INFO CARD */
.promo-3-card{
grid-column:2; grid-row:1;
background:linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.15)) , var(--glass, rgba(255,255,255,.06));
border:1px solid var(--glass-border, rgba(255,255,255,.14));
box-shadows:0 30px 70px rgba(0,0,0,.45);
border-radius:var(--radius);
padding:24px;
color:#fff;
position:relative;
overflow:hidden;
}
.promo-3-card::after{
/* warm edge light like the reference */
content:""; position:absolute; right:-30%; top:-30%; width:80%; height:140%;
background:radial-gradient(50% 50% at 50% 50%, rgba(255,85,55,.45), rgba(255,0,0,0) 60%);
filter:blur(40px);
z-index:0; pointer-events:none;
}
.promo-3-card > *{ position:relative; z-index:1; }
.promo-3-price{ font-weight:800; margin:.75rem 0 1rem; font-size:1.15rem; }
.promo-3-cta{ display:flex; align-items:center; gap:12px; }
/* RIGHT COLUMN – THUMBS */
.promo-3-thumbs{
grid-column:2; grid-row:2;
display:grid; grid-template-columns:1fr 1fr; gap:var(--gap);
}
.promo-3-thumb{ min-height:180px; }
.promo-3-thumb::after{ background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45)); }
/* Responsive */
@media (max-width: 991.98px){
.promo-3-grid{
grid-template-columns:1fr;
grid-template-rows:auto;
}
.promo-3-hero{ grid-column:auto; grid-row:auto; min-height:380px; }
.promo-3-card{ grid-column:auto; }
.promo-3-thumbs{ grid-column:auto; grid-template-columns:1fr 1fr; }
}