/* Layout — Header, Hero, Breadcrumbs, Footer */

/* Header — glassmorphism */
.header_area { position: fixed; width: 100%; left: 0; z-index: 20; top: 0; background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); }
.menu_one, .menu_five { padding: 0; border: none; background: transparent; }
.sticky_logo img { display: none; }
.sticky_logo img + img { display: block; }
.menu > .nav-item { position: relative; padding-bottom: var(--space-4); padding-top: var(--space-4); }
.menu > .nav-item + .nav-item { margin-left: 2.5rem; }
.menu > .nav-item > .nav-link { font: 500 0.875rem var(--font-headline); color: var(--on-surface-variant); padding: 0; transition: color var(--transition-base); position: relative; letter-spacing: -0.01em; }
.menu > .nav-item > .nav-link:before { content: ""; width: 0; height: 2px; background: var(--primary); position: absolute; bottom: -4px; left: 0; transition: width var(--transition-base); }
.menu > .nav-item > .nav-link:after { display: none; }
.menu > .nav-item:hover > .nav-link { color: var(--on-background); }
.menu > .nav-item:hover > .nav-link:before { width: 100%; }
.menu > .nav-item.active > .nav-link { color: var(--primary); font-weight: 700; }
.menu > .nav-item.active > .nav-link:before { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.nav-cta { background: var(--primary); color: var(--on-primary); padding: 0.625rem 1.5rem; border-radius: var(--radius-md); font: 700 0.875rem var(--font-headline); transition: opacity var(--transition-base), transform var(--transition-fast); text-decoration: none; white-space: nowrap; }
.nav-cta:hover { opacity: 0.9; color: var(--on-primary); }
.nav-cta:active { transform: scale(0.95); }

/* Scrolled */
.header_area.navbar_fixed { position: fixed; top: 0; left: 0; width: 100%; background: rgba(255,255,255,0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-md); }
.header_area.navbar_fixed .menu_one { padding: 0; transition: all var(--transition-base); }
.navbar .nav-link { text-decoration: none; transition: color var(--transition-base); }
.navbar .nav-link:hover { text-decoration: none; }

/* Hamburger */
.navbar-toggler { padding: 0; margin-left: 20px; border: 0; }
.navbar-toggler:focus { outline: none; box-shadow: none; }
.menu_toggle { width: 22px; height: 22px; position: relative; cursor: pointer; display: block; }
.menu_toggle .hamburger { position: absolute; height: 100%; width: 100%; display: block; }
.menu_toggle .hamburger span { width: 0%; height: 2px; position: relative; top: 0; left: 0; margin: 4px 0; display: block; background: var(--primary); border-radius: 3px; transition: 0.2s ease-in-out; }
.menu_toggle .hamburger span:nth-child(1) { transition-delay: 0s; }
.menu_toggle .hamburger span:nth-child(2) { transition-delay: 0.125s; }
.menu_toggle .hamburger span:nth-child(3) { transition-delay: 0.2s; }
.menu_toggle .hamburger-cross { position: absolute; height: 100%; width: 100%; transform: rotate(45deg); display: block; }
.menu_toggle .hamburger-cross span { display: block; background: var(--primary); border-radius: 3px; transition: 0.2s ease-in-out; }
.menu_toggle .hamburger-cross span:nth-child(1) { height: 100%; width: 2px; position: absolute; top: 0; left: 10px; transition-delay: 0.3s; }
.menu_toggle .hamburger-cross span:nth-child(2) { width: 100%; height: 2px; position: absolute; left: 0; top: 10px; transition-delay: 0.4s; }
.collapsed .menu_toggle .hamburger span { width: 100%; }
.collapsed .menu_toggle .hamburger span:nth-child(1) { transition-delay: 0.3s; }
.collapsed .menu_toggle .hamburger span:nth-child(2) { transition-delay: 0.4s; }
.collapsed .menu_toggle .hamburger span:nth-child(3) { transition-delay: 0.5s; }
.collapsed .menu_toggle .hamburger-cross span:nth-child(1) { height: 0%; transition-delay: 0s; }
.collapsed .menu_toggle .hamburger-cross span:nth-child(2) { width: 0%; transition-delay: 0.2s; }
.menu_five .menu_toggle .hamburger span, .menu_five .menu_toggle .hamburger-cross span { background: var(--primary); }

/* Hero */
.front_intro_area { padding: 160px 0 var(--space-24); min-height: 100vh; display: flex; align-items: center; background: var(--surface); position: relative; z-index: 1; overflow: hidden; }
.front_intro_area::before { content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: var(--surface-container-low); opacity: 0.5; z-index: -1; }
.front_intro_area::after { content: ""; position: absolute; bottom: -80px; right: -80px; width: 400px; height: 400px; background: rgba(0,129,138,0.08); filter: blur(100px); border-radius: 50%; z-index: -1; }
.front_intro_area h1 { color: var(--on-background); font-family: var(--font-headline); font-weight: 800; letter-spacing: -0.02em; }
.front_intro_area h1 span { color: var(--primary); font-style: italic; }
.front_intro_area p { color: var(--on-surface-variant); max-width: 700px; }
.software_banner_content p { max-width: 700px; margin-left: auto; margin-right: auto; font-size: 1.125rem; line-height: 1.7; }

/* Breadcrumbs */
.breadcrumb_area, .breadcrumb_area_two { background: var(--gradient-cta); position: relative; z-index: 1; padding: 160px 0 var(--space-16); overflow: hidden; }
.breadcrumb_shap { position: absolute; right: 0; top: 0; z-index: -1; opacity: 0.1; }
.breadcrumb_area_two .breadcrumb_shap { height: 100%; width: 100%; background-size: cover; }

/* Hero image header (blog posts with header_image) */
.breadcrumb_hero_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.breadcrumb_area:has(.breadcrumb_hero_bg) { padding: 200px 0 var(--space-12); min-height: 420px; display: flex; align-items: flex-end; background: var(--on-secondary-fixed); }
.breadcrumb_area:has(.breadcrumb_hero_bg)::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 75%; background: linear-gradient(to top, rgba(12,29,43,0.92), transparent); z-index: -1; }
.breadcrumb_area .content-meta { justify-content: center; color: rgba(255,255,255,0.7); border: none; padding: var(--space-2) 0 0; margin: 0; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; }
.breadcrumb_area .content-meta i { color: rgba(255,255,255,0.5); }
.breadcrumb_area .content-meta a { color: rgba(255,255,255,0.8); }
.overline-label { display: inline-block; padding: 4px 14px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--primary); color: var(--on-primary); border-radius: var(--radius-sm); margin-bottom: var(--space-4); }

.breadcrumb_content h1 { font-size: 3rem; font-weight: 800; line-height: 1.1; color: var(--on-primary); margin-bottom: 1rem; letter-spacing: -0.02em; font-style: italic; }
.breadcrumb_content p { max-width: 700px; margin: 0 auto; font-size: 1rem; line-height: 1.7; color: var(--on-primary); opacity: 0.85; }
.breadcrumb_content_two h1 { color: var(--on-primary); margin-bottom: 12px; }
.breadcrumb_content_two .breadcrumb { background: transparent; justify-content: center; }
.breadcrumb_content_two .breadcrumb li { font-size: 1.25rem; font-weight: 400; color: var(--on-primary); }
.breadcrumb_content_two .breadcrumb li a { color: var(--primary-fixed-dim); }
.breadcrumb_content_two .breadcrumb li a:hover { color: var(--on-primary); }
.breadcrumb_contact_hint { opacity: 0.3; }

/* Bubbles */
.breadcrumb_area_two .bubble li { background: var(--primary-fixed-dim); opacity: 0.1; width: 16px; height: 16px; border-radius: 50%; position: absolute; }
.breadcrumb_area_two .bubble li:nth-child(1) { left: 220px; bottom: 50px; animation: spin3 2s infinite alternate; }
.breadcrumb_area_two .bubble li:nth-child(2) { left: 35%; top: 100px; animation: spin 2s infinite alternate; }
.breadcrumb_area_two .bubble li:nth-child(3) { left: 40%; width: 51px; height: 51px; bottom: 50px; animation: spin1 3s infinite alternate; }
.breadcrumb_area_two .bubble li:nth-child(4) { left: 42%; bottom: 50px; width: 20px; height: 20px; }
.breadcrumb_area_two .bubble li:nth-child(5) { left: 76%; width: 51px; height: 51px; top: 160px; animation: spin1 3s infinite alternate; }
.breadcrumb_area_two .bubble li:nth-child(6) { left: 75%; width: 30px; height: 30px; top: 186px; }
.breadcrumb_area_two .bubble li:nth-child(7) { left: 52%; top: 150px; width: 20px; height: 20px; animation: spin2 2s infinite alternate; }
.breadcrumb_area_two .bubble li:nth-child(8) { left: 90%; top: 250px; width: 20px; height: 20px; animation: spin2 2s infinite alternate; }
@keyframes spin  { 0% { transform: translateX(-10px) scale(0.9); } 100% { transform: translateX(10px) scale(1.1); } }
@keyframes spin1 { 0% { transform: scale(0.9); } 100% { transform: scale(1.1); } }
@keyframes spin2 { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
@keyframes spin3 { 0% { transform: translateX(5px); } 100% { transform: translateX(-5px); } }

/* Footer */
.footer_logo { width: 120px; height: auto; margin-bottom: 1rem; }
.f_bg { background: var(--gradient-cta); }
.footer_area h3 { color: var(--on-primary); font-family: var(--font-headline); }
.footer_area a { text-decoration: none; color: rgba(255,255,255,0.7); transition: color var(--transition-base); }
.footer_area a:hover { color: var(--on-primary); }
.f_widget { padding-bottom: var(--space-6); }
.f_widget .widget-wrap { margin-top: 35px; }
.f_list li { margin-bottom: 0.6rem; }
.f_list a { font: 400 0.9375rem/1.4 var(--font-body); display: inline-block; position: relative; }
.f_list a::before { content: ""; width: 0; height: 1px; background: rgba(255,255,255,0.5); bottom: 0; left: 0; position: absolute; transition: width var(--transition-base); }
.f_list a:hover::before { width: 100%; }
.footer_bottom { font-size: 0.875rem; color: rgba(255,255,255,0.5); padding: var(--space-6) 0; border-top: 1px solid rgba(255,255,255,0.08); }
.f_menu li { display: inline-block; }
.f_menu a { color: rgba(255,255,255,0.7); text-decoration: none; }
.f_menu a:hover { color: var(--on-primary); }
.f_menu li + li { margin-left: 16px; }
.f_menu li + li:before { content: ""; width: 1px; height: 12px; background: rgba(255,255,255,0.2); display: inline-block; margin-right: 18px; vertical-align: middle; }
.f_social_icon_two a { font-size: 0.875rem; color: rgba(255,255,255,0.7); margin: 0 8px; transition: color var(--transition-base); }
.f_social_icon_two a:hover { color: var(--on-primary); }