:root {
  --blue: #087cff;
  --cyan: #18a9ff;
  --ink: #020a17;
  --navy: #031326;
  --line: rgba(78, 143, 216, .3);
  --white: #f5f7fb;
  --muted: #b4c2d2;
  --container: min(1336px, calc(100% - 96px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--white); font-family: 'Inter', Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.container { width: var(--container); margin: 0 auto; }

.topbar { height: 29px; border-bottom: 1px solid rgba(61, 125, 196, .25); background: #020a16; }
.topbar-inner { display: flex; height: 100%; align-items: center; justify-content: space-between; font-size: 11px; }
.top-contact, .top-actions, .social-links { display: flex; height: 100%; align-items: center; }
.top-contact { gap: 36px; }
.top-contact i { margin-right: 10px; color: var(--cyan); }
.social-links { gap: 23px; }
.offer { display: flex; min-width: 136px; height: 29px; align-items: center; justify-content: center; margin-left: 35px; border-radius: 0 0 4px 4px; background: var(--blue); font-size: 8px; font-weight: 700; text-transform: uppercase; }

.site-header { height: 61px; border-bottom: 1px solid var(--line); background: #020a17; }
.nav-wrap { display: flex; height: 100%; align-items: center; gap: 29px; }
.brand { display: inline-flex; align-items: center; gap: 13px; }
.site-header .brand img { display: block; width: 269px; height: auto; image-rendering: auto; }
.site-header nav { display: flex; height: 100%; align-items: stretch; gap: 34px; margin-left: auto; }
.site-header nav a { position: relative; display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.site-header nav a i { font-size: 9px; }
.site-header nav a.active { color: var(--blue); }
.site-header nav a.active::after { position: absolute; right: 0; bottom: 8px; left: 0; height: 2px; background: var(--blue); content: ''; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: white; }

.hero { position: relative; height: 322px; overflow: hidden; border-bottom: 1px solid rgba(46, 113, 183, .35); background: #020b18; }
.hero-photo { position: absolute; inset: 0; background: var(--hero-image, url('../images/birebir-hero-v3.png')) 58% 51% / cover no-repeat; transition: opacity .35s ease; }
.hero-photo::before { position: absolute; inset: 0; background: linear-gradient(90deg, #020a17 0, rgba(2, 10, 23, .98) 28%, rgba(2, 10, 23, .74) 40%, rgba(2, 10, 23, .08) 57%, transparent 76%); content: ''; }
.hero-photo::after { position: absolute; top: 0; bottom: 0; left: 0; width: 43%; opacity: .3; background-image: linear-gradient(120deg, transparent 0 48%, rgba(18, 126, 238, .24) 49% 50%, transparent 51%), linear-gradient(60deg, transparent 0 48%, rgba(18, 126, 238, .13) 49% 50%, transparent 51%); background-size: 75px 48px; content: ''; mask-image: linear-gradient(90deg, transparent 5%, black 65%, transparent 100%); }
.hero-inner { position: relative; z-index: 3; height: 100%; }
.hero-copy { display: flex; width: 450px; height: 100%; flex-direction: column; justify-content: center; padding-bottom: 2px; }
.eyebrow { margin-bottom: 8px; color: var(--cyan); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.hero h1 { margin: 0; padding-bottom: 2px; font-size: 42px; font-weight: 800; line-height: 1.05; letter-spacing: 0; text-transform: uppercase; }
.hero h1 span { color: #0878f2; }
.hero h1 .hero-plain { color: var(--white); }
.hero-copy p { width: 435px; margin: 11px 0 17px; color: #edf1f6; font-size: 11px; line-height: 1.6; }
.hero-actions { display: flex; gap: 20px; }
.button { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; gap: 16px; padding: 0 20px; border: 1px solid transparent; border-radius: 5px; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.button.primary { min-width: 145px; background: var(--blue); }
.button.outline { min-width: 145px; border-color: #128cf7; background: rgba(2, 14, 30, .75); color: #26a5ff; }
.wall-brand { position: absolute; top: 35px; right: 26px; display: grid; min-width: 254px; justify-items: center; }
.wall-brand img { display: block; width: 254px; height: auto; mix-blend-mode: screen; }
.wall-brand small { margin-top: 3px; color: #eef7ff; font-size: 8px; letter-spacing: 4px; text-shadow: 0 0 7px #0b8cff; }

.services { height: 129px; background: #020d1d; }
.service-grid { position: relative; z-index: 5; top: 0; display: grid; height: 121px; grid-template-columns: repeat(6, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: rgba(3, 16, 33, .96); }
.service-grid > a { min-width: 0; border-right: 1px solid var(--line); }
.service-grid > a:last-child { border-right: 0; }
.service-grid article { display: grid; min-width: 0; height: 100%; grid-template-columns: 54px 1fr; align-content: center; padding: 12px 18px; transition: background .2s ease; }
.service-grid > a:hover article { background: rgba(8, 124, 255, .09); }
.service-grid article > i { align-self: start; margin-top: 4px; color: var(--blue); font-size: 34px; filter: drop-shadow(0 0 5px rgba(8, 124, 255, .35)); }
.service-grid h2 { margin: 0; font-size: 10px; line-height: 1.3; text-transform: uppercase; }
.service-grid p { display: -webkit-box; overflow: hidden; min-height: 30px; margin: 6px 0 5px; color: #c8d3e0; font-size: 8px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.service-detail { color: #12a4ff; font-size: 8px; font-weight: 700; }
.service-detail i { margin-left: 7px; }

.stats { height: 72px; background: #020d1d; color: #fff; }
.stat-grid { display: grid; height: 100%; grid-template-columns: repeat(4, 1fr); }
.stat-grid { height: 58px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: rgba(3, 16, 33, .96); }
.stat-grid div { position: relative; display: grid; grid-template-columns: 56px auto; grid-template-rows: 27px 17px; align-content: center; justify-content: center; min-width: 0; }
.stat-grid div:not(:last-child)::after { position: absolute; top: 10px; right: 0; width: 1px; height: 38px; background: rgba(78, 143, 216, .3); content: ''; }
.stat-grid i { grid-row: 1 / 3; align-self: center; color: #0879ef; font-size: 31px; line-height: 1; text-align: center; }
.stat-grid strong { align-self: end; font-size: 18px; line-height: 1; }
.stat-grid span { margin-top: 4px; color: #c4d0dd; font-size: 8px; }
@media (min-width: 900px) {
  .services { height: 190px; }
  .service-grid { height: 182px; border-radius: 13px; box-shadow: 0 10px 26px rgba(0, 74, 151, .14); }
  .service-grid article { grid-template-columns: 72px 1fr; padding: 20px 23px; }
  .service-grid article > i { margin-top: 1px; font-size: 47px; }
  .service-grid h2 { font-size: 16px; line-height: 1.35; }
  .service-grid p { min-height: 52px; margin: 9px 0 10px; color: #d4e0ed; font-size: 13px; line-height: 1.5; }
  .service-detail { font-size: 12px; }
  .service-detail i { margin-left: 8px; }
  .stat-grid { height: 84px; border-radius: 13px; box-shadow: 0 8px 22px rgba(0, 74, 151, .12); }
  .stat-grid div { grid-template-columns: 74px auto; grid-template-rows: 36px 23px; }
  .stat-grid div:not(:last-child)::after { top: 14px; height: 54px; }
  .stat-grid i { font-size: 43px; }
  .stat-grid strong { font-size: 25px; }
  .stat-grid span { margin-top: 5px; font-size: 12px; }
}

.about-band { height: 86px; background: #f6f8fc; color: #09162b; }
.about-inner { display: grid; height: 100%; grid-template-columns: 1.2fr .8fr 210px; align-items: center; border-top: 1px solid #d9e1eb; }
.about-inner > div > span { color: var(--blue); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.about-inner h2 { margin: 6px 0 0; font-size: 21px; line-height: 1; }
.about-inner p { margin: 0; color: #37465a; font-size: 10px; line-height: 1.55; }
.about-inner .button { min-width: 160px; justify-self: end; }

.about-showcase { padding: 68px 0; background: #f6f8fc; color: #09162b; }
.about-showcase-grid { display: grid; grid-template-columns: .94fr 1.06fr; gap: 62px; align-items: center; }
.about-showcase-image { position: relative; min-height: 330px; overflow: hidden; border: 1px solid #bfd7ef; border-radius: 8px; background: #031326; box-shadow: 0 20px 40px rgba(16, 46, 81, .16); }
.about-showcase-image::after { position: absolute; inset: 0; background: linear-gradient(135deg, transparent 48%, rgba(6, 124, 255, .27)); content: ''; pointer-events: none; }
.about-showcase-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-showcase-image span { position: absolute; z-index: 1; bottom: 20px; left: 20px; display: inline-flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid rgba(121, 210, 255, .9); border-radius: 6px; background: rgba(2, 19, 43, .9); color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.about-showcase-image span i { color: #2eb2ff; font-size: 17px; }
.about-showcase-copy > span { color: var(--blue); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.about-showcase-copy h2 { max-width: 600px; margin: 9px 0 18px; font-size: 34px; line-height: 1.16; }
.about-showcase-copy > p { margin: 0 0 13px; color: #56677d; font-size: 13px; line-height: 1.75; }
.about-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 18px; margin: 23px 0 27px; }
.about-benefits span { display: flex; align-items: flex-start; gap: 8px; color: #18314d; font-size: 11px; font-weight: 700; line-height: 1.4; }
.about-benefits i { color: var(--blue); font-size: 14px; }
.about-showcase-copy .button { min-width: 166px; }

.home-services { padding: 58px 0 64px; background: #f6f8fc; color: #09162b; }
.home-services-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.home-services-head > div > span { color: var(--blue); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.home-services-head h2 { margin: 7px 0 0; font-size: 28px; line-height: 1.15; }
.home-services-head > a { color: var(--blue); font-size: 10px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.home-services-head > a i, .home-services-grid article > span i { margin-left: 8px; }
.home-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.home-services-grid > a { display: block; border: 1px solid #d8e1ec; background: #fff; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.home-services-grid > a:hover { transform: translateY(-4px); border-color: #82c4ff; box-shadow: 0 15px 30px rgba(20, 62, 109, .12); }
.home-services-grid article { min-height: 202px; padding: 24px; }
.home-services-grid article > i { display: inline-grid; width: 45px; height: 45px; place-items: center; border: 1px solid #bcdcf9; border-radius: 8px; background: #edf7ff; color: var(--blue); font-size: 23px; }
.home-services-grid h3 { margin: 20px 0 8px; font-size: 16px; line-height: 1.25; text-transform: uppercase; }
.home-services-grid p { min-height: 38px; margin: 0 0 15px; color: #607187; font-size: 11px; line-height: 1.55; }
.home-services-grid article > span { color: var(--blue); font-size: 10px; font-weight: 800; text-transform: uppercase; }

.footer { height: 204px; background: #020d1d; color: #b9c6d6; }
.footer-grid { display: grid; height: 154px; grid-template-columns: 1.45fr 1fr .9fr .9fr 1.35fr; gap: 0; padding-top: 16px; }
.footer-grid > div { min-width: 0; padding: 0 40px; border-left: 1px solid rgba(69, 132, 202, .28); }
.footer-grid > div:first-child { padding-left: 0; border-left: 0; }
.footer-grid > div:last-child { padding-right: 0; }
.footer .brand { margin-bottom: 7px; }
.footer .brand img { display: block; width: 248px; height: auto; }
.footer-brand p { max-width: 260px; margin: 0 0 8px; font-size: 9px; line-height: 1.55; }
.footer-social { display: flex; gap: 21px; font-size: 11px; }
.footer h3 { margin: 0 0 7px; color: #fff; font-size: 10px; text-transform: uppercase; }
.footer-grid > div > a:not(.brand) { display: block; margin-bottom: 4px; font-size: 9px; }
.footer-contact p, .footer-contact a { position: relative; padding-left: 23px; }
.footer-contact p { margin: 0 0 4px; font-size: 9px; line-height: 1.45; }
.footer-contact i { position: absolute; top: 2px; left: 0; width: 14px; color: var(--blue); text-align: center; }
.footer-bottom { display: flex; height: 50px; align-items: center; justify-content: space-between; border-top: 1px solid rgba(69, 132, 202, .28); font-size: 9px; }
.footer-bottom div { display: flex; gap: 30px; }
.whatsapp { position: fixed; z-index: 50; right: 22px; bottom: 22px; display: grid; width: 52px; height: 52px; place-items: center; border: 2px solid #7bffad; border-radius: 50%; background: #16c96a; color: white; box-shadow: 0 8px 25px rgba(22, 201, 106, .4); font-size: 27px; }
.thanks-page { display: grid; min-height: 100vh; place-items: center; background: #020a17; }
.thanks-box { width: min(520px, calc(100% - 32px)); padding: 40px; border: 1px solid var(--line); background: #031326; text-align: center; }

body.modal-open { overflow: hidden; }
.service-modal { position: fixed; z-index: 100; inset: 0; display: grid; visibility: hidden; place-items: center; padding: 22px; opacity: 0; transition: opacity .2s ease, visibility .2s ease; }
.service-modal.is-open { visibility: visible; opacity: 1; }
.service-modal-backdrop { position: absolute; inset: 0; background: rgba(1, 9, 22, .78); backdrop-filter: blur(5px); }
.service-modal-card { position: relative; width: min(760px, 100%); max-height: min(900px, calc(100vh - 36px)); overflow: auto; padding: 32px; border: 1px solid #bcd4ea; border-radius: 14px; background: #f7fafd; color: #1d2a3b; box-shadow: 0 26px 80px rgba(0, 0, 0, .42); transform: translateY(12px) scale(.98); transition: transform .2s ease; }
.service-modal.is-open .service-modal-card { transform: translateY(0) scale(1); }
.service-modal-close { position: absolute; top: 15px; right: 15px; display: grid; width: 35px; height: 35px; min-height: 0; place-items: center; padding: 0; border: 1px solid #d6e1ec; border-radius: 50%; background: #fff; color: #52647a; font-size: 16px; }
.service-modal-heading { margin: 0 auto 22px; text-align: center; }
.service-modal-heading span { color: #087cff; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }
.service-modal-heading h2 { margin: 6px 0 7px; color: #202932; font-size: 28px; }
.service-modal-heading p { max-width: 560px; margin: 0 auto; color: #65758a; font-size: 13px; line-height: 1.55; }
.service-request-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.service-request-form label { display: grid; gap: 7px; color: #344458; font-size: 13px; }
.service-request-form label b { color: #087cff; }
.service-request-form .full { grid-column: 1 / -1; }
.service-request-form input,.service-request-form select,.service-request-form textarea { width: 100%; min-height: 42px; padding: 10px 13px; border: 1px solid #d4dee8; border-radius: 7px; outline: 0; background: #fff; color: #263648; font: inherit; font-size: 14px; }
.service-request-form textarea { min-height: 84px; resize: vertical; }
.service-request-form input:focus,.service-request-form select:focus,.service-request-form textarea:focus { border-color: #1688ff; box-shadow: 0 0 0 3px rgba(22, 136, 255, .13); }
.service-request-form input[type=file] { padding: 8px; }
.service-request-form small { color: #78889a; font-size: 11px; }
.service-request-form .button { min-height: 46px; margin-top: 4px; border: 0; font-size: 12px; }
.service-modal-card { width:min(820px,100%); padding:3px 40px 34px; border-color:#a9cae8; background:linear-gradient(145deg,#fbfdff 0%,#f2f7fc 100%); }
.service-modal-heading { padding:0 42px 20px; border-bottom:1px solid #dce8f3; }
.service-modal-heading span { display:inline-flex; align-items:center; gap:8px; }
.service-modal-heading span::before { display:inline-block; width:22px; height:2px; background:#087cff; content:''; }
.service-modal-heading h2 { margin-top:9px; font-size:30px; letter-spacing:-.4px; }
.service-modal-heading p { font-size:14px; }
.service-request-form { gap:12px 12px; padding-top:3px; }
.service-request-form label { gap:8px; color:#40536b; font-size:13px; font-weight:600; }
.service-request-form label { display:block; line-height:1.35; }
.service-request-form label b { display:inline; vertical-align:baseline; }
.service-request-form label input,.service-request-form label select,.service-request-form label textarea { display:block; margin-top:8px; }
.service-request-form label b { margin-left:3px; font-size:15px; }
.service-request-form input,.service-request-form select,.service-request-form textarea { min-height:44px; border-color:#cbd9e7; border-radius:8px; box-shadow:0 2px 5px rgba(32,76,119,.03); transition:border-color .18s ease,box-shadow .18s ease; }
.service-request-form textarea { min-height:92px; }
.service-request-form input:hover,.service-request-form select:hover,.service-request-form textarea:hover { border-color:#9fc3e5; }
.service-request-form input:focus,.service-request-form select:focus,.service-request-form textarea:focus { border-color:#087cff; box-shadow:0 0 0 4px rgba(8,124,255,.13),0 4px 12px rgba(32,76,119,.06); }
.service-request-form input[type=file] { min-height:46px; padding:7px; background:#fff; }
.service-request-form input[type=file]::file-selector-button { margin-right:10px; padding:8px 12px; border:0; border-radius:6px; background:#e9f3ff; color:#0868c9; font:inherit; font-weight:700; cursor:pointer; }
.service-request-form small { margin-top:-3px; color:#71849a; }
.service-request-form .button { min-height:48px; border-radius:8px; background:linear-gradient(135deg,#087cff,#1266d5); box-shadow:0 9px 18px rgba(8,124,255,.2); font-size:13px; letter-spacing:.2px; }
.service-request-form .button:hover { transform:translateY(-1px); box-shadow:0 12px 23px rgba(8,124,255,.28); }
.service-modal-close { top:18px; right:18px; width:36px; height:36px; transition:background .18s ease,color .18s ease,transform .18s ease; }
.service-modal-close:hover { background:#eaf4ff; color:#087cff; transform:rotate(90deg); }
@media (max-width: 650px) { .service-modal { padding: 10px; }.service-modal-card { padding: 27px 18px 20px; }.service-modal-heading h2 { font-size: 23px; }.service-request-form { grid-template-columns: 1fr; gap: 12px; }.service-request-form .full { grid-column: auto; } }

/* Shared inner pages */
.page-hero { position: relative; height: 260px; overflow: hidden; border-bottom: 1px solid var(--line); background: #020b18; }
.page-hero-media { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 10, 23, .98) 0, rgba(2, 10, 23, .84) 44%, rgba(2, 10, 23, .28) 100%), url('../images/birebir-hero-v3.png') 58% 49% / cover no-repeat; }
.page-hero-media::after { position: absolute; inset: 0; background-image: linear-gradient(rgba(22, 131, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 131, 255, .12) 1px, transparent 1px); background-size: 65px 65px; content: ''; mask-image: linear-gradient(90deg, black, transparent 65%); }
.page-hero-inner { position: relative; z-index: 2; display: flex; height: 100%; align-items: center; justify-content: space-between; }
.page-hero-inner > div { max-width: 720px; }
.page-hero-inner > div > span { color: var(--cyan); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.page-hero h1 { margin: 9px 0 13px; font-size: 43px; line-height: 1.1; text-transform: uppercase; }
.page-hero p { max-width: 680px; margin: 0; color: #c9d5e2; font-size: 13px; line-height: 1.65; }
.breadcrumb { display: flex; align-items: center; gap: 12px; padding: 12px 17px; border: 1px solid var(--line); border-radius: 5px; background: rgba(3, 17, 36, .78); font-size: 10px; text-transform: uppercase; }
.breadcrumb a { color: var(--cyan); }
.breadcrumb i { color: #72859a; }
.subpage { background: #f5f7fa; color: #0a1830; }
.content-band { padding: 78px 0; }
.content-band.light { background: #f5f7fa; }
.section-label { color: var(--blue); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.section-head { max-width: 790px; margin-bottom: 36px; }
.section-head h2, .corporate-intro h2 { margin: 8px 0 0; font-size: 34px; line-height: 1.15; }
.section-head > p { margin: 13px 0 0; color: #5f6f83; font-size: 13px; }
.section-head.inverse { color: white; }
.section-head.inverse h2 { color: white; }
.lead { font-size: 18px; line-height: 1.6; }

.corporate-intro { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; align-items: start; }
.corporate-intro p { color: #526278; font-size: 13px; line-height: 1.75; }
.corporate-intro .lead { margin-top: 0; color: #152943; font-size: 17px; }
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; background: #031326; color: white; }
.mission-grid article { min-height: 310px; padding: 62px max(7vw, 70px); border-right: 1px solid var(--line); }
.mission-grid article:last-child { border-right: 0; }
.mission-grid article > i { color: var(--cyan); font-size: 35px; }
.mission-grid article > span { display: block; margin-top: 28px; color: var(--cyan); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.mission-grid h2 { max-width: 520px; margin: 9px 0 12px; font-size: 27px; line-height: 1.25; }
.mission-grid p { max-width: 560px; color: #b8c7d7; font-size: 13px; line-height: 1.7; }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #d3dce7; border-bottom: 1px solid #d3dce7; }
.value-grid article { min-height: 200px; padding: 31px; border-right: 1px solid #d3dce7; }
.value-grid article:first-child { border-left: 1px solid #d3dce7; }
.value-grid i { color: var(--blue); font-size: 31px; }
.value-grid h3 { margin: 25px 0 8px; font-size: 18px; }
.value-grid p { margin: 0; color: #627287; font-size: 12px; line-height: 1.6; }

.page-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.services-page-grid article { position: relative; min-height: 270px; padding: 32px; border: 1px solid #d2dce7; background: white; transition: transform .2s ease, box-shadow .2s ease; }
.services-page-grid article:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(13, 42, 76, .1); }
.services-page-grid article > i { color: var(--blue); font-size: 39px; }
.services-page-grid article > span { position: absolute; top: 30px; right: 30px; color: #9aa8b8; font-size: 11px; }
.services-page-grid h3 { margin: 35px 0 11px; font-size: 20px; }
.services-page-grid p { min-height: 57px; color: #637287; font-size: 12px; line-height: 1.6; }
.services-page-grid a, .solution-list a, .blog-page-grid a { color: var(--blue); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.services-page-grid a i, .solution-list a i, .blog-page-grid a i { margin-left: 8px; }
.process-band, .partner-band, .faq-band { padding: 72px 0; background: #031326; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.process-grid > div { position: relative; min-height: 180px; padding: 30px; border-right: 1px solid var(--line); color: white; }
.process-grid > div:last-child { border-right: 0; }
.process-grid b { color: var(--blue); font-size: 12px; }
.process-grid h3 { margin: 28px 0 8px; font-size: 18px; }
.process-grid p { margin: 0; color: #aebed0; font-size: 11px; line-height: 1.6; }

.solution-list { display: grid; border-top: 1px solid #d1dbe6; }
.solution-list article { display: grid; min-height: 170px; grid-template-columns: 70px 80px 1fr; align-items: center; border-bottom: 1px solid #d1dbe6; }
.solution-number { color: #8b99a9; font-size: 11px; }
.solution-list article > i { color: var(--blue); font-size: 34px; }
.solution-list h3 { margin: 0 0 8px; font-size: 22px; }
.solution-list p { max-width: 740px; margin: 0 0 14px; color: #637287; font-size: 12px; }
.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.partner-grid article { min-height: 175px; padding: 30px; border-right: 1px solid var(--line); color: white; }
.partner-grid article:last-child { border-right: 0; }
.partner-grid b { color: var(--cyan); font-size: 23px; }
.partner-grid h3 { margin: 24px 0 7px; font-size: 17px; }
.partner-grid p { margin: 0; color: #aebed0; font-size: 11px; }
.partner-page { padding: 78px 0 92px; background: #f4f7fb; }
.partner-page .section-head { max-width: 760px; margin-bottom: 34px; }
.partner-page .section-head p { margin: 14px 0 0; color: #637287; font-size: 13px; line-height: 1.7; }
.partner-logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.partner-logo-grid article { min-height: 245px; padding: 24px; border: 1px solid #d6e0ec; background: #fff; box-shadow: 0 12px 30px rgba(16, 41, 76, .06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.partner-logo-grid article:hover { transform: translateY(-4px); border-color: #72b8ff; box-shadow: 0 18px 36px rgba(0, 119, 255, .14); }
.partner-logo { display: grid; height: 132px; place-items: center; overflow: hidden; border: 1px solid #e4ebf2; background: #f8fbff; }
.partner-logo img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.partner-logo-fallback { background: #04162c; color: var(--blue); }
.partner-logo-fallback span { font-size: 30px; font-weight: 800; }
.partner-logo-grid h3 { margin: 20px 0 7px; color: #102640; font-size: 17px; }
.partner-logo-grid p { margin: 0; color: #66758a; font-size: 11px; line-height: 1.6; }

.reference-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.reference-page-grid article { min-height: 300px; padding: 32px; border: 1px solid #d0dbe7; background: white; }
.reference-page-grid article > i { color: var(--blue); font-size: 35px; }
.reference-page-grid article > span { display: block; margin-top: 31px; color: var(--blue); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.reference-page-grid h3 { margin: 8px 0 11px; font-size: 21px; }
.reference-page-grid p { color: #637287; font-size: 12px; line-height: 1.6; }
.reference-page-grid ul { display: grid; gap: 7px; margin: 20px 0 0; padding: 17px 0 0; border-top: 1px solid #e1e6ec; list-style: none; color: #42536a; font-size: 10px; }
.reference-page-grid li::before { margin-right: 8px; color: var(--blue); content: '✓'; }
.reference-cta { padding: 45px 0; background: #031326; color: white; }
.reference-cta .container { display: flex; align-items: center; justify-content: space-between; }
.reference-cta span { color: var(--cyan); font-size: 10px; text-transform: uppercase; }
.reference-cta h2 { margin: 6px 0 0; font-size: 27px; }

.blog-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-page-grid article { overflow: hidden; border: 1px solid #d1dbe6; background: white; }
.blog-visual { display: grid; height: 180px; place-items: center; background: linear-gradient(135deg, #021024, #0a3b72); color: var(--cyan); font-size: 55px; }
.blog-visual-2 { background: linear-gradient(135deg, #041527, #085389); }
.blog-visual-3 { background: linear-gradient(135deg, #061222, #123a66); }
.blog-page-grid article > span, .blog-page-grid article > h3, .blog-page-grid article > p, .blog-page-grid article > a { margin-right: 25px; margin-left: 25px; }
.blog-page-grid article > span { display: block; margin-top: 23px; color: var(--blue); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.blog-page-grid h3 { min-height: 53px; margin-top: 9px; margin-bottom: 8px; font-size: 18px; line-height: 1.35; }
.blog-page-grid p { min-height: 58px; color: #637287; font-size: 11px; line-height: 1.6; }
.blog-page-grid article > a { display: inline-block; margin-bottom: 25px; }
.article-page { max-width: 900px; padding-top: 65px; padding-bottom: 80px; }
.article-meta { display: flex; gap: 25px; margin-bottom: 28px; color: #65758a; font-size: 10px; }
.article-meta i { margin-right: 7px; color: var(--blue); }
.article-page p, .article-page li { color: #526278; font-size: 13px; line-height: 1.85; }
.article-page .lead { color: #162a44; font-size: 19px; }
.article-page h2 { margin: 38px 0 12px; font-size: 26px; }
.article-page blockquote { margin: 32px 0; padding: 25px 30px; border-left: 4px solid var(--blue); background: #eaf1f8; color: #18304e; font-size: 17px; font-weight: 600; }
.article-page .button { margin-top: 25px; color: white; }

.contact-page-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; }
.contact-details h2 { margin: 8px 0 13px; font-size: 34px; }
.contact-details > p { margin-bottom: 30px; color: #607086; font-size: 13px; }
.contact-method { display: flex; align-items: flex-start; gap: 18px; padding: 18px 0; border-top: 1px solid #d6dfe9; }
.contact-method > i { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #c9d8e7; border-radius: 50%; color: var(--blue); }
.contact-method div { display: grid; gap: 5px; }
.contact-method b { font-size: 11px; text-transform: uppercase; }
.contact-method span, .contact-method a { color: #607086; font-size: 12px; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 30px; border: 1px solid #d2dce7; background: white; }
.contact-form label { display: grid; gap: 6px; color: #4d5e74; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.contact-form label.full { grid-column: 1 / -1; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid #ccd7e3; border-radius: 4px; outline: 0; background: #f8fafc; color: #10213a; font: inherit; }
.contact-form input { height: 43px; padding: 0 12px; }
.contact-form textarea { padding: 12px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--blue); }
.contact-form .button { width: 180px; color: white; }
.faq-list { display: grid; gap: 8px; }
.faq-list details { border: 1px solid var(--line); background: #06192e; color: white; }
.faq-list summary { display: flex; min-height: 55px; align-items: center; justify-content: space-between; padding: 0 20px; cursor: pointer; font-size: 12px; font-weight: 600; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { color: var(--cyan); }
.faq-list details[open] summary i { transform: rotate(45deg); }
.faq-list details p { margin: 0; padding: 0 20px 18px; color: #adbdce; font-size: 11px; }

.detail-section { padding: 70px 0; }
.detail-grid { display: grid; grid-template-columns: 1fr 330px; gap: 55px; }
.detail-main h2 { margin: 9px 0 14px; font-size: 36px; }
.detail-main > p { color: #5c6c81; font-size: 13px; line-height: 1.8; }
.detail-main .lead { color: #152943; font-size: 18px; }
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 35px; border: 1px solid #d1dbe6; background: #d1dbe6; }
.feature-list > div { display: grid; min-height: 150px; align-content: start; padding: 25px; background: white; }
.feature-list i { margin-bottom: 20px; color: var(--blue); font-size: 26px; }
.feature-list b { font-size: 14px; }
.feature-list span { margin-top: 7px; color: #66758a; font-size: 13px; line-height: 1.6; }
.service-rich-content { color: #5f6f84; font-size: 13px; line-height: 1.75; }
.service-rich-content > *:first-child { margin-top: 0; }
.service-rich-content h2, .service-rich-content h3, .service-rich-content h4 { color: #102640; }
.service-rich-content h2 { font-size: 25px; }.service-rich-content h3 { font-size: 20px; }.service-rich-content h4 { font-size: 16px; }
.service-rich-content ul, .service-rich-content ol { padding-left: 20px; }.service-rich-content li { margin: 6px 0; }
.service-rich-content a { color: var(--blue); text-decoration: underline; }.service-rich-content blockquote { margin: 20px 0; padding: 14px 18px; border-left: 3px solid var(--blue); background: #f0f7ff; color: #36516f; }
.security-service-intro { margin: 31px 0 18px; padding: 25px 28px; border-left: 4px solid var(--blue); background: #eef6ff; }
.security-service-intro > span, .security-service-cta span { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.security-service-intro h3 { margin: 8px 0 9px; color: #102640; font-size: 21px; }
.security-service-intro p { margin: 0; color: #53657c; font-size: 12px; line-height: 1.75; }
.security-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.security-service-grid article { display: grid; grid-template-columns: 45px 1fr; gap: 15px; padding: 22px; border: 1px solid #d6e1ed; background: #fff; }
.security-service-grid article > i { color: var(--blue); font-size: 27px; }
.security-service-grid h3 { margin: 0 0 8px; color: #102640; font-size: 16px; }
.security-service-grid p { margin: 0; color: #5d6d81; font-size: 11px; line-height: 1.7; }
.security-service-grid ul { display: grid; gap: 5px; margin: 14px 0 0; padding: 13px 0 0; border-top: 1px solid #e2e9f1; list-style: none; color: #39516d; font-size: 10px; line-height: 1.5; }
.security-service-grid li::before { margin-right: 7px; color: var(--blue); content: '✓'; }
.security-service-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; padding: 24px 28px; background: #04162c; color: white; }
.security-service-cta h3 { margin: 7px 0 0; font-size: 18px; }
.security-service-cta .button { color: white; white-space: nowrap; }
.detail-sidebar { align-self: start; border: 1px solid #d1dbe6; background: white; }
.detail-sidebar > h3 { margin: 0; padding: 20px; border-bottom: 1px solid #d1dbe6; font-size: 15px; }
.detail-sidebar > a { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #e2e7ed; color: #4c5d73; font-size: 14px; }
.detail-sidebar > a.active, .detail-sidebar > a:hover { background: var(--blue); color: white; }
.sidebar-contact { padding: 25px; background: #031326; color: white; }
.sidebar-contact > i { color: var(--cyan); font-size: 28px; }
.sidebar-contact h3 { margin: 17px 0 8px; font-size: 18px; }
.sidebar-contact p { color: #aebed0; font-size: 13px; }
.sidebar-contact .button { margin-top: 12px; color: white; }
.empty-state { display: grid; min-height: 400px; place-items: center; align-content: center; gap: 16px; text-align: center; }
.empty-state > i { color: var(--blue); font-size: 50px; }
.empty-state h2 { margin: 0; }
.empty-state .button { color: white; }

/* Wider desktop screens use the available canvas instead of leaving the homepage undersized. */
@media (min-width: 1500px) {
  :root { --container: min(1389px, calc(100% - 100px)); }
  .topbar { height: 33px; }
  .topbar-inner { font-size: 11px; }
  .top-contact { gap: 37px; }
  .social-links { gap: 24px; }
  .offer { min-width: 142px; height: 33px; margin-left: 37px; font-size: 10px; }
  .site-header { height: 72px; }
  .nav-wrap { gap: 30px; }
  .site-header .brand img { width: 300px; }
  .site-header nav { gap: 35px; }
  .site-header nav a, .site-header nav a i { font-size: 12px; }
  .site-header nav a.active::after { bottom: 8px; height: 2px; }
  .hero { height: 585px; }
  .hero-copy { width: 468px; }
  .eyebrow { margin-bottom: 8px; font-size: 10px; }
  .hero h1 { font-size: 44px; }
  .hero-copy p { width: 452px; margin: 11px 0 18px; font-size: 14px; }
  .hero-actions { gap: 21px; }
  .button { min-height: 34px; gap: 17px; padding: 0 21px; border-radius: 5px; font-size: 12px; }
  .button.primary, .button.outline { min-width: 151px; }
  .services { height: 134px; }
  .service-grid { height: 126px; border-radius: 11px; }
  .service-grid article { grid-template-columns: 56px 1fr; padding: 13px 18px; }
  .service-grid article > i { font-size: 35px; }
  .service-grid h2 { font-size: 10px; }
  .service-grid p { min-height: 31px; margin: 6px 0 6px; font-size: 8px; }
  .service-detail { font-size: 8px; }
  .stats { height: 75px; }
  .stat-grid { height: 60px; border-radius: 11px; }
  .stat-grid div { grid-template-columns: 58px auto; grid-template-rows: 28px 18px; }
  .stat-grid div:not(:last-child)::after { top: 10px; height: 39px; }
  .stat-grid i { font-size: 32px; }
  .stat-grid strong { font-size: 18px; }
  .stat-grid span { font-size: 8px; }
  .about-band { height: 90px; }
  .about-inner { grid-template-columns: 1.2fr .8fr 218px; }
  .about-inner h2 { font-size: 22px; }
  .about-inner p { font-size: 10px; }
  .about-inner .button { min-width: 166px; }
  .footer { height: 212px; }
  .footer-grid { height: 160px; padding-top: 17px; }
  .footer-grid > div { padding: 0 42px; }
  .footer .brand img { width: 258px; }
  .footer-brand p { max-width: 270px; font-size: 10px; }
  .footer-social { gap: 22px; font-size: 11px; }
  .footer h3 { font-size: 10px; }
  .footer-grid > div > a:not(.brand), .footer-contact p { font-size: 10px; }
  .footer-contact p, .footer-contact a { padding-left: 24px; }
  .footer-bottom { height: 52px; font-size: 10px; }
  .footer-bottom div { gap: 31px; }
  .whatsapp { right: 23px; bottom: 23px; width: 54px; height: 54px; font-size: 28px; }
}

@media (max-width: 1180px) {
  :root { --container: min(100% - 48px, 1080px); }
  .site-header nav { gap: 20px; }
  .site-header nav a { font-size: 9px; }
  .site-header .brand img { width: 285px; }
  .hero h1 { font-size: 42px; }
  .service-grid article { grid-template-columns: 48px 1fr; padding: 14px 12px; }
  .service-grid article > i { font-size: 33px; }
  .service-grid h2 { font-size: 11px; }
  .footer-grid > div { padding-right: 24px; padding-left: 24px; }
}

@media (min-width: 901px) and (max-width: 1400px) {
  .site-header .brand img { width: 294px; }
  .wall-brand { top: 48px; right: 10px; min-width: 263px; }
  .wall-brand img { width: 263px; }
  .footer .brand img { width: 208px; }
  .site-header nav { gap: 29px; }
  .site-header nav a { font-size: 10px; }
}

@media (max-width: 900px) {
  :root { --container: min(100% - 32px, 720px); }
  .social-links { display: none; }
  .offer { margin-left: 0; }
  .site-header { height: auto; min-height: 70px; }
  .nav-wrap { min-height: 70px; flex-wrap: wrap; padding: 9px 0; }
  .menu-toggle { display: block; margin-left: auto; }
  .site-header nav { display: none; width: 100%; height: auto; flex-direction: column; gap: 0; padding: 5px 0 14px; }
  .site-header nav.open { display: flex; }
  .site-header nav a { min-height: 40px; border-top: 1px solid var(--line); }
  .site-header nav a.active::after { display: none; }
  .hero { height: 580px; }
  .hero-photo { background-position: 64% center; }
  .hero-photo::after { background: linear-gradient(90deg, rgba(2, 10, 23, .9), rgba(2, 10, 23, .25)); }
  .hero-copy { width: 100%; align-items: flex-start; }
  .wall-brand { display: none; }
  .services { height: auto; }
  .service-grid { top: 0; height: auto; grid-template-columns: repeat(2, 1fr); }
  .service-grid article { min-height: 125px; border-bottom: 1px solid var(--line); }
  .stats { height: auto; }
  .stat-grid { height: auto; grid-template-columns: repeat(2, 1fr); }
  .stat-grid div { min-height: 105px; }
  .about-band { height: auto; padding: 25px 0; }
  .about-inner { height: auto; grid-template-columns: 1fr; gap: 20px; }
  .about-inner .button { justify-self: start; }
  .about-showcase { padding: 56px 0; }
  .about-showcase-grid { grid-template-columns: 1fr; gap: 34px; }
  .about-showcase-image { min-height: 300px; }
  .home-services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer { height: auto; }
  .footer-grid { height: auto; grid-template-columns: 1fr 1fr; gap: 30px 0; padding-bottom: 30px; }
  .footer-grid > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .footer-bottom { min-height: 60px; height: auto; }
  .page-hero { height: 300px; }
  .page-hero-inner { align-items: flex-start; flex-direction: column; justify-content: center; gap: 23px; }
  .page-hero h1 { font-size: 35px; }
  .corporate-intro, .contact-page-grid, .detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .mission-grid, .page-card-grid, .reference-page-grid, .blog-page-grid { grid-template-columns: 1fr 1fr; }
  .value-grid, .process-grid { grid-template-columns: 1fr 1fr; }
  .partner-grid { grid-template-columns: 1fr; }
  .partner-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .partner-logo-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-sidebar { width: 100%; }
  .security-service-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root { --container: calc(100% - 26px); }
  .topbar { height: 39px; }
  .topbar-inner { font-size: 9px; }
  .top-contact { gap: 13px; }
  .top-contact a + a { padding-left: 13px; border-left: 1px solid var(--line); }
  .offer { min-width: 115px; height: 39px; font-size: 8px; }
  .site-header .brand img { width: 238px; }
  .hero { height: 610px; }
  .hero h1 { font-size: 36px; }
  .hero-copy p { width: 100%; font-size: 13px; }
  .hero-actions { flex-direction: column; gap: 12px; }
  .service-grid, .stat-grid, .footer-grid { grid-template-columns: 1fr; }
  .home-services { padding: 42px 0; }
  .about-showcase { padding: 42px 0; }
  .about-showcase-image { min-height: 235px; }
  .about-showcase-copy h2 { font-size: 27px; }
  .about-showcase-copy > p { font-size: 12px; }
  .about-benefits { grid-template-columns: 1fr; }
  .home-services-head { align-items: flex-start; flex-direction: column; gap: 16px; }
  .home-services-head h2 { font-size: 25px; }
  .home-services-grid { grid-template-columns: 1fr; gap: 12px; }
  .service-grid article { border-right: 0; }
  .stat-grid div:not(:last-child)::after { right: 15%; left: 15%; top: auto; bottom: 0; width: auto; height: 1px; }
  .footer-grid > div { padding: 0 0 22px; border: 0; }
  .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 0; }
  .footer-bottom div { gap: 14px; }
  .page-hero { height: 330px; }
  .page-hero h1 { font-size: 31px; }
  .breadcrumb { display: none; }
  .content-band { padding: 55px 0; }
  .section-head h2, .corporate-intro h2, .contact-details h2 { font-size: 28px; }
  .mission-grid, .page-card-grid, .reference-page-grid, .blog-page-grid, .value-grid, .process-grid, .feature-list, .contact-form { grid-template-columns: 1fr; }
  .mission-grid article { min-height: 270px; padding: 45px 25px; border-right: 0; border-bottom: 1px solid var(--line); }
  .solution-list article { grid-template-columns: 45px 55px 1fr; padding: 20px 0; }
  .partner-page { padding: 52px 0; }
  .partner-logo-grid { grid-template-columns: 1fr; }
  .reference-cta .container { align-items: flex-start; flex-direction: column; gap: 20px; }
  .contact-form label.full { grid-column: auto; }
  .detail-main h2 { font-size: 30px; }
  .security-service-intro { padding: 21px; }
  .security-service-cta { align-items: flex-start; flex-direction: column; padding: 22px; }
}