@import url('https://fonts.bunny.net/css?family=instrument-sans:400,500,600');

:root {
--font-sans:'Instrument Sans',ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

body {
    min-height: 300vh;
font-family:var(--font-sans);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

.navbar {
position:fixed !important;
z-index:30 !important;
top:50px !important;
margin:0;
width:100%;
height:55px;
max-width:1300px !important;
left:50%;
transform:translateX(-50%);
}

.navbar .navbar-brand,
.navbar .nav-link {
font-weight:500;
}

.hero__content h1 {
font-size:clamp(2rem,6vw,3.5rem);
font-weight:600;
letter-spacing:-.01em;
margin:0 0 1rem;
max-width:800px;
}

.hero__content p {
font-size:clamp(1rem,2.2vw,1.25rem);
font-weight:400;
margin:0;
}

/* Topbar */
.topbar{position:fixed;z-index:3;top:20px;left:50%;transform:translateX(-50%);width:100%;max-width:1300px}
.topbar-shell{display:flex;align-items:center;justify-content:space-between;padding:0 12px}
.topbar-link{font-size:12px;color:#fff;text-decoration:none;opacity:.9;display:inline-flex;align-items:center;gap:6px}
.topbar-link:hover{opacity:1}
.topbar .dropdown-menu{font-size:12px}

/* SweetAlert language modal tweaks */
.swal2-popup .langButton{display:block;padding:.6rem .75rem;border-radius:.75rem;text-decoration:none;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 20px rgba(0,0,0,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.swal2-popup .langButton:hover{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.12));transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 30px rgba(0,0,0,.35)}
.swal2-title{font-size:1.1rem}
.swal2-container{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(0,0,0,.6)}
.swal2-container.swal2-center>.swal2-popup.swal2-glass{border-radius:16px;overflow:hidden}
.swal2-glass{position:relative;border:1px solid rgba(255,255,255,.25)}
.swal2-glass:before,.swal2-glass:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.swal2-glass:before{z-index:0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(255,255,255,.22)}
.swal2-glass:after{z-index:0;box-shadow:inset 1px 1px 1px rgba(255,255,255,.65)}
.swal2-glass .swal2-html-container,.swal2-glass .swal2-title{position:relative;z-index:1}

.hero__actions {
margin-top:1.5rem;
}

.glass-btn {
display:inline-block;
padding:.7rem 1.25rem;
border-radius:12px;
color:#fff;
text-decoration:none;
background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
border:1px solid rgba(255,255,255,.35);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 20px rgba(0,0,0,.25);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.glass-btn:hover {
transform:translateY(-1px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 30px rgba(0,0,0,.35);
}

.glass-btn:active {
transform:translateY(0);
}

/* Glass Button (enhanced) */
.glass-button {
--bg-color:rgba(255,255,255,.25);
--highlight:rgba(255,255,255,.75);
--text:#fff;
position:relative;
padding:12px 24px;
border:none;
border-radius:12px;
cursor:pointer;
overflow:hidden;
background:transparent;
transition:transform .2s ease;
outline:none;
}

.glass-button:hover {
transform:scale(1.05);
}

.glass-button:active {
transform:scale(.95);
}

.glass-filter,
.glass-overlay,
.glass-specular {
position:absolute;
inset:0;
border-radius:inherit;
}

.glass-filter {
z-index:1;
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
filter:url(#glass-distortion) saturate(120%) brightness(1.15);
}

.glass-overlay {
z-index:2;
background:var(--bg-color);
}

.glass-specular {
z-index:3;
box-shadow:inset 1px 1px 1px var(--highlight);
}

.glass-content {
position:relative;
z-index:4;
color:var(--text);
font-weight:500;
font-size:16px;
}

@media (prefers-color-scheme:dark) {
.glass-button { --bg-color:rgba(0,0,0,.25); --highlight:rgba(255,255,255,.15); }
}

/* Glass Navigation */
.glass-nav {
--bg-color:rgba(255,255,255,.25);
--highlight:rgba(255,255,255,.75);
--text:#fff;
position:relative;
width:100%;
border-radius:12px;
overflow:hidden;
background:transparent;
}

.glass-nav .glass-filter,
.glass-nav .glass-overlay,
.glass-nav .glass-specular {
position:absolute;
inset:0;
border-radius:inherit;
}

.glass-nav .glass-filter {
z-index:1;
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
filter:url(#glass-distortion) saturate(120%) brightness(1.15);
}

.glass-nav .glass-overlay {
z-index:2;
background:var(--bg-color);
transition:background-color .25s ease, background .25s ease;
}

.glass-nav .glass-specular {
z-index:3;
box-shadow:inset 1px 1px 1px var(--highlight);
}

.glass-nav .glass-content {
position:relative;
z-index:4;
margin-top: -6px;
width: 100%;
}

.glass-nav .nav-link {
color:var(--text)!important;
border-radius:8px;
padding: 7px 20px;
text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.glass-nav .nav-link:hover {
background-color:rgba(255,255,255,.1);
}

.glass-nav .nav-link.active {
background-color:rgba(255,255,255,.2);
}

@media (prefers-color-scheme:dark) {
.glass-nav { --bg-color:rgba(0,0,0,.25); --highlight:rgba(255,255,255,.15); }
}

/* Gray tone state for navbar when over bright backgrounds */
.glass-nav.is-gray{ --highlight: rgb(211 211 211 / 75%); }
.glass-nav.is-gray .glass-overlay{ background: rgb(79 79 79 / 28%); }
.glass-nav.is-gray .glass-specular{ box-shadow: inset 1px 1px 1px rgb(152 152 152 / 75%); }
.glass-nav:not(.is-gray) .glass-overlay{ background:rgba(255,255,255,.25); }

/* Navbar layout sizing */
.glass-nav {
background:transparent;
position:fixed;
z-index:2;
top:30px;
margin:0;
width:100%;
height:55px;
max-width:1000px;
left:50%;
transform:translateX(-50%);
}

.glass-nav .glass-content {
height:100%;
}

.nav-shell {
 height:100%;
 width:100%;
 margin:0;
 padding:0 12px;
 display:grid;
 grid-template-columns:max-content 1fr max-content;
 align-items:center;
 gap:12px;
}

.nav-left { min-width:0; white-space:nowrap; }

.glass-nav .navbar-nav {
display:flex;
flex-direction:row;
align-items:center;
}

.nav-center > .navbar-nav {
 gap:12px;
justify-content:center;
}

.nav-right { justify-self:end; white-space:nowrap; text-align:right; }

.nav-search{position:relative;display:inline-block}
.nav-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.95);font-size:14px;pointer-events:none;z-index:2}

.nav-search-input {
 position:relative;
 z-index:1;
 width:240px;
 padding:10px 42px 10px 36px;
 background:rgba(255,255,255,.1);
 border:1px solid rgba(255,255,255,.2);
 border-radius:12px;
 color:#fff;
 font-size:15px;
 transition:all .3s ease;
 backdrop-filter:blur(4px);
 -webkit-backdrop-filter:blur(4px);
}

.nav-search-input::placeholder { color: rgba(255,255,255,.9); }
.nav-search-input:focus {
outline:none;
background:rgba(255,255,255,.3);
border-color:rgba(255,255,255,.5);
box-shadow:0 8px 16px rgba(0,0,0,.1);
transform:translateY(-1px);
}

.glass-search {
--bg-color:rgba(255,255,255,.25);
--highlight:rgba(255,255,255,.75);
--text:#fff;
--input-bg:rgba(255,255,255,.1);
--input-border:rgba(255,255,255,.2);
--input-focus:rgba(255,255,255,.3);
position:relative;
width:280px;
border-radius:20px;
overflow:hidden;
box-shadow:0 6px 24px rgba(0,0,0,.2);
}

.glass-search .glass-filter,
.glass-search .glass-overlay,
.glass-search .glass-specular {
position:absolute;
inset:0;
border-radius:inherit;
}

.glass-search .glass-filter {
z-index:1;
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
filter:url(#glass-distortion) saturate(120%) brightness(1.15);
}

.glass-search .glass-overlay {
z-index:2;
background:var(--bg-color);
}

.glass-search .glass-specular {
z-index:3;
box-shadow:inset 1px 1px 1px var(--highlight);
}

.glass-search .glass-content {
position:relative;
z-index:4;
color:var(--text);
}

.search-container {
position:relative;
padding:10px 14px;
display:flex;
align-items:center;
transition:padding .4s cubic-bezier(.4,0,.2,1);
}

.search-icon {
position:absolute;
left:28px;
font-size:16px;
color:var(--text);
opacity:.8;
pointer-events:none;
transition:all .4s cubic-bezier(.4,0,.2,1);
transform-origin:center;
}

.search-input {
width:100%;
padding:10px 42px;
background:var(--input-bg);
border:1px solid var(--input-border);
border-radius:12px;
color:var(--text);
font-size:15px;
transition:all .4s cubic-bezier(.4,0,.2,1);
}

.search-input:focus {
outline:none;
background:var(--input-focus);
border-color:var(--highlight);
transform:translateY(-1px);
box-shadow:0 8px 16px rgba(0,0,0,.1);
}

.search-input::placeholder {
color:rgba(255,255,255,.6);
}

.search-clear {
position:absolute;
right:24px;
background:none;
border:none;
color:var(--text);
opacity:0;
cursor:pointer;
font-size:16px;
transition:opacity .3s ease;
padding:5px;
border-radius:50%;
}

.search-clear:hover {
background:rgba(255,255,255,.1);
}

.search-input:not(:placeholder-shown) + .search-icon + .search-clear {
opacity:.7;
}

@media (prefers-color-scheme:dark) {
.glass-search { --bg-color:rgba(0,0,0,.25); --highlight:rgba(255,255,255,.15); --input-bg:rgba(0,0,0,.2); --input-border:rgba(255,255,255,.1); --input-focus:rgba(0,0,0,.3); }
}

@media (max-width:992px) {
.nav-shell { grid-template-columns:auto 1fr; grid-auto-rows:auto; }
.nav-center { display:none; }
.glass-search { display:none; }
}

.hero__logo {
display:none;
}

.navbar .navbar-brand img {
display:block;
height:32px;
width:auto;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

.hero {
position:relative;
min-height:100vh;
width:100%;
display:grid;
place-items:center;
overflow:hidden;
}

.hero__media {
position:absolute;
inset:0;
z-index:0;
}

.hero__video {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
background:#000;
}

.hero::after {
content:"";
position:absolute;
inset:0;
z-index:1;
background:rgba(0,0,0,.3);
backdrop-filter:blur(5px);
-webkit-backdrop-filter:blur(5px);
pointer-events:none;
}

.hero__content {
position:relative;
z-index:2;
color:#fff;
text-align:center;
padding:4rem 1rem;
}

.ribbon-holder{position:absolute;bottom:40px;left:calc(50% - 650px);z-index:2;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:0 12px;margin:0}
.ribbon-image{height:26px;width:auto;opacity:.95;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.ribbon-text{font-size:.5rem;line-height:1.15;color:#fff;opacity:.9;margin:0;text-align:left}
.hero__content .ribbon-text{font-size:11px!important}

.hero--light .hero__content {
color:#111;
}

@media (prefers-reduced-motion:reduce) {
.hero__video { animation:none; transition:none; }
}

/* Demo sections for navbar testing */
.demo-section{padding:4rem 1rem}
.demo-container{max-width:1300px;margin:0 auto;color:#1b1b18}
.section-light{background:#fff}
.section-dark{background:#0a0a0a}
.section-dark .demo-container{color:#ededec}

/* Align all Bootstrap containers to navbar width */
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl{max-width:1300px!important}

/* Cards section */
.cards-section{padding:4rem 1rem;background:#fff}
.cards-container{max-width:1300px;margin:0 auto}
.cards-title{font-size:1.5rem;margin:0 0 1.5rem;color:#1b1b18}
.info-card{border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:1.25rem;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.6));box-shadow:0 6px 24px rgba(0,0,0,.06)}
.info-card-title{margin:0 0 .5rem;font-size:1.1rem;color:#1b1b18}
.info-card-text{margin:0 0 1rem;color:#333}
.info-card-btn{display:inline-block}

/* Rod video section */
.rod-section{position:relative;background:#fff}
.rod-section:before{content:"";position:absolute;inset:0 0 auto 0;height:120px;background:linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0) 100%);pointer-events:none;z-index:1}
.rod-section:after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0) 100%);pointer-events:none;z-index:1}
.rod-video-wrapper{position:relative;max-width:1300px;margin:0 auto;height:80vh;overflow:hidden;border-radius:16px}
.rod-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}