:root {
    --raspi-blue: #0879e8;
    --raspi-blue-dark: #063a6b;
    --raspi-navy: #061424;
    --raspi-ink: #172434;
    --raspi-muted: #607084;
    --raspi-light: #f3f7fb;
    --raspi-line: #dce6ef;
}

html { scroll-behavior: smooth; }
body { color: var(--raspi-ink); background: #fff; }

.header-navbar { padding-top: 12px; padding-bottom: 12px; background: rgba(255,255,255,.97); box-shadow: 0 4px 22px rgba(6,20,36,.08); }
.header-navbar.header-fixed { background: rgba(255,255,255,.99); }
.raspi-brand { display: flex; align-items: center; gap: 9px; color: var(--raspi-blue-dark) !important; font-size: 22px; line-height: 1; letter-spacing: .045em; font-weight: 800; }
.raspi-brand i { color: var(--raspi-blue); font-size: 28px; }
.header-navbar .navbar-nav .nav-link { font-weight: 600; color: #38495b; }
.header-navbar .navbar-nav .nav-link:hover,
.header-navbar .navbar-nav .nav-link.active { color: var(--raspi-blue); }

.raspi-hero { position: relative; background: var(--raspi-navy); overflow: hidden; }
.raspi-slide { position: relative; min-height: 760px; overflow: hidden; background: var(--raspi-navy); }
.raspi-slide-height { min-height: 760px; padding-top: 95px; padding-bottom: 70px; }
.raspi-slide-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.raspi-slide-screen .raspi-slide-image { object-fit: cover; object-position: center top; filter: saturate(.92) brightness(.72); }
.raspi-slide-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,13,25,.93) 0%, rgba(2,13,25,.72) 47%, rgba(2,13,25,.18) 77%, rgba(2,13,25,.10) 100%); }
.raspi-slide-screen .raspi-slide-overlay { background: linear-gradient(90deg, rgba(2,13,25,.94) 0%, rgba(2,13,25,.68) 48%, rgba(2,13,25,.25) 100%); }
.raspi-slide-content { position: relative; z-index: 2; }
.raspi-slide h1,
.raspi-slide h2 { color: #fff; font-size: 66px; line-height: 1.05; margin-bottom: 22px; text-shadow: 0 2px 20px rgba(0,0,0,.28); }
.raspi-slide h2 { font-size: 52px; }
.raspi-kicker { color: #66b4ff; font-size: 14px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.raspi-lead { max-width: 760px; color: #eef6ff; font-size: 21px; line-height: 1.7; margin-bottom: 32px; text-shadow: 0 1px 14px rgba(0,0,0,.3); }
.raspi-hero .btn { margin-right: 10px; margin-bottom: 10px; }
.raspi-hero .owl-nav { position: absolute; z-index: 4; left: 0; right: 0; top: 50%; pointer-events: none; }
.raspi-hero .owl-nav button { pointer-events: auto; position: absolute; width: 52px; height: 52px; border-radius: 50% !important; background: rgba(0,0,0,.36) !important; color: #fff !important; font-size: 27px !important; }
.raspi-hero .owl-nav .owl-prev { left: 22px; }
.raspi-hero .owl-nav .owl-next { right: 22px; }
.raspi-hero .owl-dots { position: absolute; z-index: 4; left: 0; right: 0; bottom: 24px; text-align: center; }
.raspi-hero .owl-dot span { width: 38px !important; height: 4px !important; border-radius: 3px !important; background: rgba(255,255,255,.45) !important; }
.raspi-hero .owl-dot.active span { background: #fff !important; }

.raspi-stats { position: relative; z-index: 5; margin-top: -1px; background: #fff; box-shadow: 0 12px 35px rgba(6,20,36,.12); }
.raspi-stat { display: flex; align-items: center; gap: 14px; min-height: 112px; padding-top: 22px; padding-bottom: 22px; border-right: 1px solid var(--raspi-line); }
.raspi-stat:last-child { border-right: 0; }
.raspi-stat strong { color: var(--raspi-blue); font-size: 42px; line-height: 1; }
.raspi-stat span { max-width: 145px; color: #526174; font-weight: 600; line-height: 1.35; }

.section { padding-top: 100px; padding-bottom: 100px; }
.section-alt { background: var(--raspi-light); }
.section-eyebrow { color: var(--raspi-blue); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; margin-bottom: 12px; }
.section h2 { color: var(--raspi-ink); font-size: 42px; line-height: 1.25; }
.section .text-lg { color: var(--raspi-muted); line-height: 1.85; }

.solution-card,
.software-card,
.use-card { border-radius: 10px; transition: transform .25s ease, box-shadow .25s ease; }
.solution-card:hover,
.software-card:hover,
.use-card:hover { transform: translateY(-5px); }
.solution-card { padding: 34px; background: #fff; border: 1px solid var(--raspi-line); box-shadow: 0 12px 34px rgba(15,50,85,.06); }
.solution-icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; border-radius: 14px; background: #e7f3ff; color: var(--raspi-blue); font-size: 25px; }
.solution-card h3 { font-size: 23px; margin-bottom: 14px; }
.solution-card p { color: var(--raspi-muted); line-height: 1.75; margin-bottom: 0; }

.hardware-figure { position: relative; margin: 0; overflow: hidden; border-radius: 12px; background: #071625; box-shadow: 0 26px 60px rgba(5,29,54,.18); }
.hardware-figure img { display: block; width: 100%; min-height: 575px; object-fit: cover; object-position: center top; }
.hardware-figure figcaption { position: absolute; left: 22px; right: 22px; bottom: 22px; padding: 12px 16px; border-radius: 8px; background: rgba(3,17,31,.82); color: #fff; font-size: 14px; backdrop-filter: blur(8px); }
.hardware-section-layout { display: grid; gap: 34px; }
.hardware-figure-wide { width: 100%; max-width: 1050px; margin: 0 auto; }
.hardware-figure-wide img { min-height: 0; aspect-ratio: 16 / 9; object-fit: cover; object-position: center top; }
.feature-list { display: grid; gap: 12px; }
.feature-list-two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.feature-item { display: grid; grid-template-columns: 44px 1fr; align-items: center; min-height: 68px; padding: 13px 16px; background: #fff; border: 1px solid #dbe6ef; border-radius: 8px; box-shadow: 0 5px 14px rgba(9,45,78,.035); }
.feature-item i { color: var(--raspi-blue); font-size: 20px; text-align: center; }
.feature-item span { color: #3f4f61; line-height: 1.55; }

.software-grid { align-items: stretch; }
.software-card { padding: 34px 36px; background: #fff; border: 1px solid var(--raspi-line); box-shadow: 0 12px 36px rgba(15,50,85,.07); }
.software-card-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 23px; }
.software-card-heading i { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #e7f3ff; color: var(--raspi-blue); font-size: 22px; }
.software-card h3 { margin: 0; font-size: 24px; }
.software-card ul { list-style: none; margin: 0; padding: 0; }
.software-card li { position: relative; padding: 10px 0 10px 28px; color: #536477; line-height: 1.65; border-bottom: 1px solid #edf2f6; }
.software-card li:last-child { border-bottom: 0; }
.software-card li::before { content: "\f00c"; position: absolute; top: 12px; left: 0; color: var(--raspi-blue); font-family: "Font Awesome 5 Free"; font-weight: 900; }
.software-preview-row { margin-top: 35px !important; padding: 34px; border-radius: 12px; background: var(--raspi-light); }
.software-preview { width: 100%; border-radius: 8px; box-shadow: 0 20px 45px rgba(5,29,54,.16); }
.software-preview-row h3 { font-size: 30px; }
.software-preview-row p { color: var(--raspi-muted); line-height: 1.8; }

.section-dark { position: relative; overflow: hidden; color: #dbe9f7; background: radial-gradient(circle at 85% 20%, rgba(0,126,244,.25), transparent 31%), linear-gradient(135deg, #061424, #0a2945); }
.section-dark h2 { color: #fff; }
.section-dark .text-lg { color: #c4d4e4; }
.section-eyebrow-light { color: #65b7ff; }
.use-card { padding: 34px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.use-card i { color: #66b8ff; font-size: 31px; margin-bottom: 22px; }
.use-card h3 { color: #fff; font-size: 22px; margin-bottom: 14px; }
.use-card p { color: #c6d5e4; line-height: 1.75; margin: 0; }

.contact-section { background: #fff; }
.contact-actions .btn { margin-right: 10px; margin-bottom: 10px; }
.contact-box { padding: 38px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #082746, #061424); box-shadow: 0 24px 55px rgba(6,20,36,.22); }
.contact-box h3 { color: #fff; font-size: 28px; margin-bottom: 2px; }
.contact-subtitle { color: #68baff; font-weight: 700; margin-bottom: 28px; }
.contact-box > p:not(.contact-subtitle) { display: flex; gap: 15px; align-items: flex-start; color: #dce8f3; line-height: 1.6; }
.contact-box > p i { color: #68baff; width: 20px; margin-top: 4px; text-align: center; }
.contact-box img { filter: brightness(0) invert(1); }

footer { background: #030d18; }
.footer-note { color: #7f91a3; }
.back-to-top { background: var(--raspi-blue); border-radius: 6px 6px 0 0; }

@media (max-width: 1199px) {
    .raspi-slide,
    .raspi-slide-height { min-height: 680px; }
    .raspi-slide h1 { font-size: 56px; }
    .raspi-slide h2 { font-size: 45px; }
    .section h2 { font-size: 38px; }
    .hardware-figure img { min-height: 500px; }
}

@media (max-width: 991px) {
    .header-navbar { padding-top: 9px; padding-bottom: 9px; }
    .raspi-slide,
    .raspi-slide-height { min-height: 650px; }
    .raspi-slide-image { object-position: center; }
    .raspi-slide-overlay,
    .raspi-slide-screen .raspi-slide-overlay { background: linear-gradient(90deg, rgba(2,13,25,.93), rgba(2,13,25,.68)); }
    .raspi-stat:nth-child(2) { border-right: 0; }
    .raspi-stat:nth-child(-n+2) { border-bottom: 1px solid var(--raspi-line); }
    .hardware-figure img { min-height: auto; }
}

@media (max-width: 767px) {
    .feature-list-two-columns { grid-template-columns: 1fr; }
    .hardware-section-layout { gap: 24px; }
    .raspi-brand { font-size: 18px; gap: 6px; }
    .raspi-brand i { font-size: 23px; }
    .raspi-slide,
    .raspi-slide-height { min-height: 620px; }
    .raspi-slide-height { padding-top: 120px; padding-bottom: 76px; }
    .raspi-slide h1 { font-size: 45px; }
    .raspi-slide h2 { font-size: 38px; }
    .raspi-lead { font-size: 17px; line-height: 1.65; }
    .raspi-hero .owl-nav { display: none; }
    .raspi-stat { flex-direction: column; justify-content: center; text-align: center; gap: 7px; padding-left: 8px; padding-right: 8px; }
    .raspi-stat strong { font-size: 34px; }
    .raspi-stat span { font-size: 13px; }
    .section { padding-top: 76px; padding-bottom: 76px; }
    .section h2 { font-size: 32px; }
    .software-card { padding: 28px 24px; }
    .software-card-heading { align-items: flex-start; }
    .software-preview-row { padding: 22px; }
    .contact-box { padding: 30px 24px; }
}

@media (max-width: 480px) {
    .raspi-slide h1 { font-size: 39px; }
    .raspi-slide h2 { font-size: 33px; }
    .raspi-lead { font-size: 16px; }
    .raspi-slide .btn { display: block; width: 100%; margin-right: 0; }
    .section h2 { font-size: 29px; }
}